/*
Theme Name:   Aurelle Divi Child
Theme URI:    https://example.com/aurelle
Description:  Child theme for the Aurelle skincare template. Adds the brand typography,
              header, footer and component styling used by the bundled Divi layouts.
Author:       Aurelle Studio
Author URI:   https://example.com
Template:     Divi
Version:      1.0.6
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  aurelle
*/

/* ==========================================================================
   1. Design tokens
   ========================================================================== */

:root {
  --au-ink: #1E2A23;
  --au-ink-soft: #3D4A41;
  --au-muted: #6F7B71;
  --au-cream: #FBF8F3;
  --au-sand: #F1E8DA;
  --au-sand-deep: #E7DAC6;
  --au-sage: #93A78F;
  --au-sage-light: #E9EFE5;
  --au-clay: #B8735A;
  --au-gold: #C1A06A;
  --au-line: #E4DBCC;
  --au-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --au-sans: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --au-container: 1080px;
  --au-radius: 2px;
}

/* ==========================================================================
   2. Base
   ========================================================================== */

body,
body.et_pb_pagebuilder_layout,
.et_pb_pagebuilder_layout #main-content {
  background-color: var(--au-cream);
  font-family: var(--au-sans);
  color: var(--au-ink-soft);
  font-size: 16.5px;
  line-height: 1.78;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  letter-spacing: 0.005em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--au-serif);
  color: var(--au-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
}

p {
  font-family: var(--au-sans);
}

a {
  color: var(--au-ink);
  text-decoration-color: rgba(30, 42, 35, 0.28);
  text-underline-offset: 3px;
  transition: color 0.25s ease, text-decoration-color 0.25s ease;
}

a:hover {
  color: var(--au-clay);
  text-decoration-color: currentColor;
}

::selection {
  background: var(--au-sage);
  color: #fff;
}

/* Divi's default content padding gets in the way of full-bleed sections. */
.et_pb_pagebuilder_layout #main-content .container {
  padding-top: 0;
}

.et_pb_pagebuilder_layout #main-content .container::before {
  display: none;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

#main-header {
  background-color: rgba(251, 248, 243, 0.94);
  border-bottom: 1px solid var(--au-line);
  box-shadow: none;
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
}

#main-header.et-fixed-header {
  background-color: rgba(251, 248, 243, 0.97);
  box-shadow: 0 1px 0 rgba(30, 42, 35, 0.06);
}

#main-header .container {
  max-width: var(--au-container);
}

/* Desktop header: a single flex row so the wordmark and the menu share one
   baseline and the header height is predictable. Divi's own mobile header
   takes over below 981px. */
@media (min-width: 981px) {
  #main-header .et_menu_container,
  #main-header.et-fixed-header .et_menu_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 78px;
  }

  /* Divi pins the logo container to the full width of the bar; pull it back
     into the flow so the flex row can space the wordmark and the menu. */
  #main-header .logo_container {
    position: static;
    width: auto;
    height: auto;
  }

  /* Divi reserves 33px of top padding for a vertically centred left menu. */
  #main-header #et-top-navigation,
  #main-header.et-fixed-header #et-top-navigation {
    display: flex;
    align-items: center;
    float: none;
    height: 78px;
    padding: 0;
  }

  #main-header #top-menu-nav {
    float: none;
  }

  #main-header #top-menu {
    display: flex;
    align-items: stretch;
  }

  /* Divi pads both the item and the link; keep only the link padding so the
     gaps between menu labels stay even. */
  #main-header #top-menu > li {
    padding-right: 0;
  }

  #main-header #top-menu > li > a,
  #main-header.et-fixed-header #top-menu > li > a {
    display: flex;
    align-items: center;
    height: 78px;
    padding: 0 16px;
  }

  #main-header #et_top_search {
    float: none;
    margin: 0 0 0 18px;
  }
}

#logo {
  max-height: 40px;
  width: auto;
}

/* Typeset wordmark used when no Divi logo image is set. */
.au-wordmark {
  display: block;
  line-height: 1;
}

.au-wordmark a {
  display: block;
  font-family: var(--au-serif);
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.30em;
  text-transform: uppercase;
  color: var(--au-ink);
  text-decoration: none;
  line-height: 1;
  padding: 0;
  padding-right: 0.30em; /* optically balance the trailing letter-spacing */
}

.au-wordmark a:hover {
  color: var(--au-ink);
}

#top-menu-nav > #top-menu > li > a {
  font-family: var(--au-sans);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--au-ink);
  padding: 0 16px;
  position: relative;
  transition: color 0.25s ease;
}

#top-menu-nav > #top-menu > li > a::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 26px;
  height: 1px;
  background: var(--au-ink);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

#top-menu-nav > #top-menu > li > a:hover::after,
#top-menu-nav > #top-menu > li.current-menu-item > a::after {
  transform: scaleX(1);
}

#top-menu-nav > #top-menu > li.current-menu-item > a {
  color: var(--au-ink);
  font-weight: 600;
}

#top-menu li li a {
  font-family: var(--au-sans);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: none;
  color: var(--au-ink-soft);
  background: var(--au-cream);
  padding: 10px 20px;
  width: 220px;
}

#top-menu li li a:hover {
  background: var(--au-sand);
  color: var(--au-ink);
}

.et_mobile_menu {
  border-top: 1px solid var(--au-line);
  background: var(--au-cream);
}

.et_mobile_menu li a {
  font-family: var(--au-sans);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--au-line);
  color: var(--au-ink);
}

/* ==========================================================================
   4. Footer
   ========================================================================== */

#main-footer {
  background-color: var(--au-ink);
  color: #C9D2C6;
  padding-top: 0;
}

#footer-widgets {
  padding: 76px 0 56px;
  border-bottom: 1px solid rgba(251, 248, 243, 0.12);
}

#footer-widgets .footer-widget {
  padding: 0 28px 0 0;
}

#footer-widgets .footer-widget h4,
#footer-widgets .footer-widget h2 {
  font-family: var(--au-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--au-gold);
  padding-bottom: 20px;
}

#footer-widgets .footer-widget,
#footer-widgets .footer-widget p,
#footer-widgets .footer-widget li,
#footer-widgets .footer-widget a,
#footer-widgets .footer-widget li a,
#footer-widgets .footer-widget p a,
#footer-widgets .widget_block a {
  font-family: var(--au-sans);
  font-size: 14px;
  line-height: 1.85;
  color: #B9C4B6 !important;
}

#footer-widgets .footer-widget a,
#footer-widgets .footer-widget li a,
#footer-widgets .footer-widget p a,
#footer-widgets .widget_block a {
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 0.25s ease, border-color 0.25s ease;
}

#footer-widgets .footer-widget a:hover,
#footer-widgets .footer-widget li a:hover,
#footer-widgets .footer-widget p a:hover,
#footer-widgets .widget_block a:hover {
  color: var(--au-cream) !important;
  border-bottom-color: rgba(251, 248, 243, 0.35);
}

#footer-widgets .footer-widget ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

#footer-widgets .footer-widget ul li {
  padding: 0 0 6px;
}

/* Divi paints a small accent dot in front of every footer list item. */
#footer-widgets .footer-widget li::before {
  display: none !important;
  content: none !important;
  border: 0 !important;
}

#footer-bottom {
  background-color: var(--au-ink);
  padding: 26px 0;
}

#footer-bottom .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

#footer-bottom .et-social-icons {
  margin: 0;
  float: none;
  display: flex;
  gap: 6px;
}

#footer-bottom .et-social-icons li {
  margin-left: 0;
}

#footer-bottom .et-social-icons li a {
  color: #A9B5A6;
  font-size: 15px;
  transition: color 0.25s ease;
}

#footer-bottom .et-social-icons li a:hover {
  color: var(--au-cream);
}

#footer-info {
  font-family: var(--au-sans);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #7E8C7B;
  padding: 0;
  margin: 0;
}

#footer-info a {
  color: #A9B5A6;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.et_pb_button,
.et_pb_button_module .et_pb_button,
.et_pb_contact_form .et_pb_contact_submit,
.au-submit {
  font-family: var(--au-sans) !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  padding: 17px 36px !important;
  border-radius: var(--au-radius) !important;
  border-width: 1px !important;
  border-style: solid !important;
  transition: background-color 0.3s ease, color 0.3s ease,
              border-color 0.3s ease, transform 0.3s ease !important;
}

/* Fallback palette for buttons that are not part of a bundled layout. */
.et_pb_button:not([class*="et_pb_button_"]) {
  background-color: var(--au-ink);
  border-color: var(--au-ink);
  color: var(--au-cream);
}

.et_pb_button:not([class*="et_pb_button_"]):hover {
  background-color: var(--au-clay);
  border-color: var(--au-clay);
  color: #FFF9F4;
}


.et_pb_button::after,
.et_pb_button::before {
  display: none !important;
}

.et_pb_button:hover {
  transform: translateY(-1px);
}

.et_pb_button_module {
  line-height: 1;
}

/* Ghost buttons sit on light backgrounds. */
.au-btn-sm .et_pb_button {
  padding: 12px 22px !important;
  font-size: 10.5px !important;
  letter-spacing: 0.14em !important;
}

/* Divi injects its own background through inline styles; keep hover consistent. */
.et_pb_button[style*="background-color:#1E2A23"]:hover,
.et_pb_button[style*="background:#1E2A23"]:hover {
  background-color: var(--au-clay) !important;
  border-color: var(--au-clay) !important;
  color: #FFF9F4 !important;
}

.et_pb_button[style*="transparent"]:hover {
  background-color: var(--au-ink) !important;
  color: var(--au-cream) !important;
  border-color: var(--au-ink) !important;
}

/* ==========================================================================
   6. Components
   ========================================================================== */

.au-eyebrow .et_pb_text_inner p,
.au-eyebrow-inner {
  font-family: var(--au-sans);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  margin: 0;
}

.au-eyebrow-inner a {
  color: inherit;
}

/* Divi's Text module ignores the body font's text-align, so alignment ships as
   a class on the module instead (see tools/divi_kit.py). */
.au-ta-center,
.au-ta-center .et_pb_text_inner,
.au-ta-center p {
  text-align: center !important;
}

.au-ta-right,
.au-ta-right .et_pb_text_inner,
.au-ta-right p {
  text-align: right !important;
}

.au-lead p {
  font-size: 19px;
  line-height: 1.7;
}

.au-meta p,
.au-meta {
  font-family: var(--au-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.au-link-inline a {
  font-family: var(--au-sans);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 42, 35, 0.25);
  padding-bottom: 2px;
}

.au-link-inline a:hover {
  border-color: var(--au-clay);
}

/* Hero ------------------------------------------------------------------- */

.au-hero-copy {
  padding: 40px 40px 40px 0 !important;
}

.au-hero-media img {
  width: 100%;
  height: 620px;
  object-fit: cover;
  display: block;
}

.au-promise p {
  margin: 0;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10.5px;
  opacity: 0.85;
}

/* Cards ------------------------------------------------------------------ */

/* Divi wraps images in an inline-block span that shrinks to its content, so a
   percentage width on the image resolves to zero. Make the wrapper full width
   first, then let the image fill it. */
.au-product .et_pb_image_wrap,
.au-post .et_pb_image_wrap,
.au-split-media .et_pb_image_wrap,
.au-wide-media .et_pb_image_wrap,
.au-hero-media .et_pb_image_wrap {
  display: block;
  width: 100%;
  overflow: hidden;
}

.au-product img {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.au-product {
  transition: transform 0.4s ease;
}

.au-product:hover img {
  transform: scale(1.03);
}

.au-post img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
  transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.au-post {
  transition: transform 0.4s ease;
}

.au-post:hover img {
  transform: scale(1.03);
}

.au-post:hover h3 {
  color: var(--au-clay);
}

.au-post h3 {
  transition: color 0.3s ease;
}

.au-card-cat {
  margin-top: 22px !important;
}

.au-card-cat .au-eyebrow-inner {
  font-size: 10px !important;
}

/* Splits ----------------------------------------------------------------- */

.au-split-media img {
  width: 100%;
  height: 100%;
  max-height: 660px;
  object-fit: cover;
  display: block;
}

.au-split-copy {
  padding-left: 30px !important;
}

/* Values, steps, stats --------------------------------------------------- */

/* Divi 5 draws dividers as a pseudo element, not an <hr>. Define the rule
   fully here so the static preview (which skips Divi's own CSS) matches. */
.et_pb_divider {
  position: relative;
  min-height: 1px;
}

.et_pb_divider::before {
  content: "";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0;
  border: 0;
  border-top: 1px solid var(--au-line) !important;
}

.au-hairline.et_pb_divider::before {
  border-top-color: var(--au-ink) !important;
  opacity: 0.9;
}

.au-value h3 {
  letter-spacing: -0.01em;
}

.au-step-no p {
  font-family: var(--au-sans);
  letter-spacing: 0.2em;
}

.au-stats .et_pb_number_counter {
  text-align: left !important;
  margin-bottom: 0 !important;
}

.au-stats .percent,
.au-stats .percent p {
  font-family: var(--au-serif) !important;
  font-size: 64px !important;
  font-weight: 500 !important;
  line-height: 1 !important;
  letter-spacing: -0.01em !important;
  color: var(--au-cream) !important;
  margin: 0 !important;
}

.au-stats .percent-sign {
  font-size: 0.62em !important;
  vertical-align: 0.16em;
  margin-left: 2px;
}

.au-stats .title {
  font-family: var(--au-sans) !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.14em !important;
  line-height: 1.6 !important;
  text-transform: uppercase !important;
  color: #A9B5A6 !important;
  margin: 16px 0 0 !important;
}

/* Pull quote ------------------------------------------------------------- */

.au-pullquote {
  font-style: italic;
  letter-spacing: -0.015em;
}

/* Testimonials ----------------------------------------------------------- */

/* Divi floats a round quote badge above the module; the brand uses plain
   editorial quotes instead. */
.au-quotes .et_pb_testimonial::before,
.au-quotes .et_pb_testimonial::after {
  display: none !important;
  content: none !important;
}

.au-quotes .et_pb_testimonial {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  text-align: left !important;
}

.au-quotes .et_pb_testimonial_description,
.au-quotes .et_pb_testimonial_description_inner {
  padding: 0 !important;
  margin: 0 !important;
}

.au-quotes .et_pb_testimonial_content,
.au-quotes .et_pb_testimonial_content p {
  font-family: var(--au-serif) !important;
  font-size: 26px !important;
  font-weight: 400 !important;
  line-height: 1.42 !important;
  color: var(--au-ink) !important;
  font-style: normal !important;
  padding: 0 !important;
  margin: 0 0 22px !important;
  border: 0 !important;
}

.au-quotes .et_pb_testimonial_author {
  font-family: var(--au-sans) !important;
  font-size: 11.5px !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: var(--au-ink) !important;
  font-weight: 600 !important;
  padding: 0 !important;
}

.au-quotes .et_pb_testimonial_author span,
.au-quotes .et_pb_testimonial_meta {
  display: block;
  margin-top: 6px;
  font-weight: 400;
  letter-spacing: 0.06em;
  color: var(--au-muted);
  text-transform: none;
}

/* Accordion -------------------------------------------------------------- */

.au-faq .et_pb_accordion_item,
.au-faq .et_pb_toggle {
  border: 0 !important;
  border-bottom: 1px solid var(--au-line) !important;
  background: transparent !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

.au-faq .et_pb_toggle_title {
  font-family: var(--au-serif) !important;
  font-size: 21px !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  color: var(--au-ink) !important;
  padding: 24px 44px 24px 0 !important;
  cursor: pointer;
}

/* Divi 5 ships a filled circled-plus glyph. Replace it with a light rule
   glyph in the brand ink. */
.au-faq .et_pb_toggle_title::before {
  content: "+";
  font-family: var(--au-sans) !important;
  font-size: 22px !important;
  font-weight: 300 !important;
  line-height: 1 !important;
  color: var(--au-ink) !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  top: 50% !important;
  right: 2px !important;
  left: auto !important;
  margin-top: -11px !important;
  display: block !important;
}

.au-faq .et_pb_toggle_open .et_pb_toggle_title::before {
  content: "\2013";
}

.au-faq .et_pb_toggle_content,
.au-faq .et_pb_toggle_content p {
  font-family: var(--au-sans) !important;
  font-size: 15px !important;
  line-height: 1.8 !important;
  color: var(--au-ink-soft) !important;
  padding-bottom: 24px !important;
  max-width: 92%;
}

.au-faq .et_pb_toggle_open .et_pb_toggle_title {
  color: var(--au-ink) !important;
}

/* Forms ------------------------------------------------------------------ */

.au-form .au-field {
  display: block;
  margin-bottom: 18px;
}

.au-form .au-field span {
  display: block;
  font-family: var(--au-sans);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--au-muted);
  margin-bottom: 8px;
}

.au-form input,
.au-form textarea,
.et_pb_contact_form .et_pb_contact_field .input {
  width: 100%;
  max-width: 100%;
  background: transparent !important;
  border: 0 !important;
  border-bottom: 1px solid var(--au-line) !important;
  border-radius: 0 !important;
  padding: 12px 0 !important;
  font-family: var(--au-sans) !important;
  font-size: 15.5px !important;
  line-height: 1.5 !important;
  color: var(--au-ink) !important;
  box-shadow: none !important;
  transition: border-color 0.3s ease;
}

/* Divi 5 renders `text` and `textarea` field types with the same <textarea>
   markup, so single-line fields need their height normalised. */
.et_pb_contact_form .et_pb_contact_field textarea.input {
  height: 52px !important;
  min-height: 52px;
  resize: none;
  overflow: hidden;
}

.et_pb_contact_form .et_pb_contact_field[data-id="message"] {
  flex: 0 0 100%;
  max-width: 100%;
}

.et_pb_contact_form .et_pb_contact_field[data-id="message"] textarea.input {
  height: 132px !important;
  min-height: 132px;
  resize: none;
  overflow: auto;
}

.au-form input:focus,
.au-form textarea:focus,
.et_pb_contact_form .et_pb_contact_field .input:focus {
  outline: none;
  border-bottom-color: var(--au-ink) !important;
}

.au-form input::placeholder,
.au-form textarea::placeholder,
.et_pb_contact_form .et_pb_contact_field .input::placeholder {
  color: #A9B2A7;
  opacity: 1;
}

.au-submit {
  background: var(--au-ink);
  color: var(--au-cream);
  border-color: var(--au-ink);
  cursor: pointer;
  margin-top: 10px;
}

.au-submit:hover {
  background: var(--au-clay);
  border-color: var(--au-clay);
}

.au-form-light .au-form input,
.au-form-light .au-form textarea {
  border-bottom-color: #DCD3C4 !important;
}

.au-form-dark .au-form .au-field span {
  color: #93A08F;
}

.au-form-dark .au-form input,
.au-form-dark .au-form textarea {
  border-bottom-color: rgba(251, 248, 243, 0.28) !important;
  color: var(--au-cream) !important;
}

.au-form-dark .au-form input::placeholder {
  color: rgba(251, 248, 243, 0.45);
}

.au-form-dark .au-submit {
  background: var(--au-cream);
  color: var(--au-ink);
  border-color: var(--au-cream);
}

.au-form-dark .au-submit:hover {
  background: var(--au-gold);
  border-color: var(--au-gold);
}

/* Same treatment for the real Divi contact form, which uses its own markup. */
.au-form-dark .et_pb_contact_form .et_pb_contact_field .input {
  color: var(--au-cream) !important;
  border-bottom-color: rgba(251, 248, 243, 0.28) !important;
}

.au-form-dark .et_pb_contact_form .et_pb_contact_field .input::placeholder {
  color: rgba(251, 248, 243, 0.5);
}

.au-form-dark .et_pb_contact_submit {
  background: var(--au-cream) !important;
  border-color: var(--au-cream) !important;
  color: var(--au-ink) !important;
}

.au-form-dark .et_pb_contact_submit:hover {
  background: var(--au-gold) !important;
  border-color: var(--au-gold) !important;
  color: var(--au-ink) !important;
}

.au-form-inline .au-form {
  display: flex;
  gap: 16px;
  align-items: flex-end;
}

.au-form-inline .au-field {
  flex: 1;
  margin-bottom: 0;
}

/* Divi contact form tweaks (front-end markup) ---------------------------- */

.et_pb_contact_form .et_pb_contact_field {
  margin-bottom: 18px !important;
}

.et_pb_contact_form .et_pb_contact_field label {
  font-family: var(--au-sans) !important;
  font-size: 10.5px !important;
  font-weight: 600 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--au-muted) !important;
}

.au-form-card .et_pb_contact_form {
  margin-top: 0 !important;
}

/* Captcha + submit row */
.et_pb_contact_form .et_contact_bottom_container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 18px;
  margin-top: 26px;
}

.et_pb_contact_form .et_pb_contact_right {
  margin: 0;
  padding: 0;
  float: none;
}

.et_pb_contact_form .et_pb_contact_right p {
  margin: 0;
}

.et_pb_contact_form .et_pb_contact_right label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--au-sans);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--au-muted);
  white-space: nowrap;
}

.et_pb_contact_form .et_pb_contact_field .input.et_pb_contact_captcha {
  width: 62px !important;
  min-width: 62px;
  height: auto;
  padding: 2px 0 5px !important;
  line-height: 1.4;
  text-align: center;
  border-bottom-color: var(--au-line) !important;
}

.et_pb_contact_form .et_pb_button_wrapper {
  margin: 0;
  margin-left: auto;
}

/* Newsletter: a single field and the submit button on one line. */
.au-newsletter-form .et_pb_contact_form form.et_pb_contact_form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0 18px;
}

.au-newsletter-form .et_pb_contact_field[data-id] {
  flex: 1 1 220px;
  max-width: 100%;
  margin-bottom: 0 !important;
}

.au-newsletter-form .et_contact_bottom_container {
  flex: 0 0 auto;
  margin-top: 0;
  gap: 0;
}

.au-newsletter-form .et_pb_button_wrapper {
  margin-left: 0;
}

/* Filters ---------------------------------------------------------------- */

.au-filter a,
.au-filters a {
  font-family: var(--au-sans);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--au-muted);
  transition: color 0.25s ease;
}

.au-filter a:hover,
.au-filters a:hover {
  color: var(--au-ink);
}

/* Media ------------------------------------------------------------------ */

.au-wide-media img {
  width: 100%;
  height: 460px;
  object-fit: cover;
  display: block;
}

/* Contact ---------------------------------------------------------------- */

.au-contact-details a {
  text-decoration: none;
  border-bottom: 1px solid rgba(30, 42, 35, 0.2);
}

/* ==========================================================================
   7. Responsive
   ========================================================================== */

/* Divi rows are 100% wide with only a max-width, so below the layout width the
   content runs flush to the screen edges. Keep the 24px gutter the preview has.
   Divi's critical CSS pins the width with `#main-content .et_pb_row.et_pb_row_N`,
   so this needs one class more to win. */
@media (max-width: 1128px) {
  #main-content .et_pb_row.et_pb_row.et_pb_row {
    width: calc(100% - 48px) !important;
  }
}

@media (max-width: 1100px) {
  .au-hero-copy { padding-right: 20px !important; }
  .au-hero-media img { height: 520px; }
}

@media (max-width: 980px) {
  .au-hero-copy { padding: 0 0 32px !important; }
  .au-hero-media img { height: 420px; }
  .au-split-copy { padding-left: 0 !important; }
  .au-split-media img { max-height: 460px; }
  .au-quotes .et_pb_testimonial_content,
  .au-quotes .et_pb_testimonial_content p { font-size: 22px !important; }
  #footer-widgets .footer-widget { padding: 0 0 32px; }
  .au-form-inline .au-form { flex-direction: column; align-items: stretch; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  .au-hero-media img { height: 340px; }
  .au-wide-media img { height: 300px; }
  .au-stats .percent,
  .au-stats .percent p { font-size: 46px !important; }
  .au-quotes .et_pb_testimonial_content,
  .au-quotes .et_pb_testimonial_content p { font-size: 20px !important; }
  .au-head-note { margin-top: 16px !important; }
  .au-head-note p { text-align: left !important; }
  .au-link-inline p { text-align: left !important; }

  /* Divi leaves 1/4 columns side by side on phones; stack everything so the
     phone layout matches the preview. */
  #main-content .et_pb_column.et_pb_column.et_pb_column {
    width: 100% !important;
    margin-right: 0 !important;
    margin-bottom: 8px;
  }

  /* The side note in split headings only needs a small gap once stacked. */
  .au-head-note p { margin-top: 6px !important; }

  /* Divi keeps contact fields at 50% on phones; one per row reads better. */
  .et_pb_contact_form .et_pb_contact_field[data-id] {
    flex: 0 0 100% !important;
    max-width: 100% !important;
  }
}