.header {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
  background-color: var(--color-foundation-white);
}

body:has(.page-builder > section:first-child.band--light-beige) .header,
body.page-id-28 .header,
body.page-id-31 .header {
  background-color: var(--color-foundation-light-beige);
}

body:has(.page-builder > section:first-child.band--lightest-beige) .header,
body.page-id-30 .header {
  background-color: var(--color-foundation-lightest-beige);
}

body:has(.page-builder > section:first-child.band--primary-beige) .header {
  background-color: var(--color-primary-beige);
}

.header--hero-banner,
.header--tall { min-height: 980px; }
.header--short { min-height: 580px; }

.header__bg {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1920px;
  overflow: hidden;
  pointer-events: none;
}
.header--hero-banner .header__bg,
.header--tall .header__bg {
  height: 963.1px;
  clip-path: path('M0 0L1920 0L1920 860C1920 860 1631.02 946.735 1440 960C1057.97 986.53 862.033 833.47 480 860C288.984 873.265 0 960 0 960L0 0Z');
}
.header--short .header__bg {
  height: 563.1px;
  clip-path: path('M0 0L1920 0L1920 460C1920 460 1631.02 546.735 1440 560C1057.97 586.53 862.033 433.47 480 460C288.984 473.265 0 560 0 560L0 0Z');
}

.header__bg-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  will-change: transform, opacity;
  transform: scale(1.0);
}

.header__bg-layer.is-zooming {
  animation: heroBgFadeIn 2s cubic-bezier(0.16, 1, 0.3, 1) forwards, heroBgZoomIn 16s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes heroBgFadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes heroBgZoomIn {
  from {
    transform: scale(1.0);
  }
  to {
    transform: scale(1.15);
  }
}

@media (prefers-reduced-motion: reduce) {
  .header__bg-layer,
  .header__bg-layer.is-zooming {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.header__wave {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 1923px;
  max-width: none;
  pointer-events: none;
  display: block;
}
.header--hero-banner .header__wave { top: 823px; }
.header--tall .header__wave { top: 826px; }
.header--short .header__wave { top: 425px; }



.header__nav {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  box-sizing: border-box;
  z-index: 50;
  opacity: 1;
}
.header__nav-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  max-width: 1440px;
  margin: 0 auto;
  padding: 20px 20px;
  gap: clamp(20px, 3vw, 50px);
}

.header--hero-banner .header__nav:not(.is-sticky) .header__nav-logo-link {
  display: none;
}
.header--hero-banner .header__nav:not(.is-sticky) .header__nav-row {
  justify-content: flex-end;
}

.header__nav.is-sticky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: var(--color-primary-blue, #273d4c);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
  z-index: 1000;
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
  visibility: hidden;
  transition: opacity 0.25s cubic-bezier(0.16, 1, 0.3, 1), transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.25s;
}
.header__nav.is-sticky.is-revealed {
  opacity: 1 !important;
  transform: translateY(0);
  pointer-events: auto;
  visibility: visible;
}
.header__nav.is-sticky .header__nav-logo-link {
  display: flex;
  align-items: center;
}
.header__nav.is-sticky .header__nav-row {
  justify-content: space-between;
  padding: 12px 20px;
  min-height: 68px;
}
.header__nav.is-sticky .header__nav-logo {
  height: 44px;
  width: auto;
}
.header__nav.is-sticky .header__phone,
.header__nav.is-sticky a.header__phone {
  height: 46px;
  padding: 0 26px;
  font-size: 16px;
}
.header__nav.is-sticky .header__nav-menu > li > a {
  font-size: 17px;
  line-height: 24px;
}
.header__nav.is-sticky .header__nav-menu .sub-menu {
  top: calc(100% + 28px);
}

@keyframes navSlideDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.header__nav-logo { max-width: 100%; height: auto; flex-shrink: 0; }

.header__nav-links {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 50px);
}

.header__nav-menu-wrap {
  display: flex;
  align-items: center;
}

.header__nav-menu,
.header__nav-links ul:not(.sub-menu) {
  display: flex;
  align-items: center;
  gap: clamp(20px, 3vw, 50px);
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.header__nav-links > nav > ul > li,
.header__nav-menu > li {
  position: relative;
  list-style: none;
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
}

.header__nav a,
.header__nav-link,
.header__nav-menu a,
.header__nav-menu > li > a,
.header__nav-menu .sub-menu a,
.header__nav-logo-link,
.header__phone,
a.header__phone {
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
}

.header__nav a:focus,
.header__nav a:focus-visible,
.header__nav-link:focus,
.header__nav-link:focus-visible,
.header__nav-menu a:focus,
.header__nav-menu a:focus-visible,
.header__nav-menu > li > a:focus,
.header__nav-menu > li > a:focus-visible,
.header__nav-menu .sub-menu a:focus,
.header__nav-menu .sub-menu a:focus-visible,
.header__nav-logo-link:focus,
.header__nav-logo-link:focus-visible,
.header__phone:focus,
.header__phone:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.header__nav-link,
.header__nav-menu > li > a {
  font-family: "Zalando Sans", sans-serif;
  font-stretch: 112.5%;
  font-size: 18px;
  font-weight: 700;
  line-height: 25.2px;
  letter-spacing: 0px;
  color: var(--color-foundation-white);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s ease, color 0.2s ease;
}

.header__nav-menu > li > a:hover,
.header__nav-menu > li > a:focus-visible {
  opacity: 0.85;
}

.header__nav-menu > li.menu-item-has-children.is-open > a {
  opacity: 1;
  color: var(--color-accent-light-blue);
}

/* Dropdown Sub-menu */
.header__nav-menu .sub-menu {
  position: absolute;
  top: calc(100% + 32px);
  left: 0;
  right: auto;
  transform: translateY(6px);
  background-color: var(--color-primary-blue, #273d4c);
  border-radius: var(--radius-20, 20px);
  padding: 20px 0;
  margin: 0;
  min-width: 260px;
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.3);
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  list-style: none;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}

/* Invisible bridge over the gap so hover persists from parent link to sub-menu */
.header__nav-menu .sub-menu::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 40px;
}

.header__nav-menu .sub-menu.is-right-aligned {
  left: auto;
  right: 0;
}

.header__nav-menu > li.menu-item-has-children.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  /* Animate in only; closing is instant so switching parents doesn't overlap */
  transition: opacity 0.2s cubic-bezier(0.16, 1, 0.3, 1), transform 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.header__nav-menu .sub-menu li {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
}

.header__nav-menu .sub-menu a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 40px;
  font-family: var(--font-body, "Zalando Sans", sans-serif);
  font-stretch: 112.5%;
  font-size: 18px;
  font-weight: 400;
  line-height: 25.2px;
  color: var(--color-foundation-white);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.header__nav-menu .sub-menu a:hover,
.header__nav-menu .sub-menu a:focus-visible {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-accent-light-blue);
  opacity: 1;
}

.header__nav-menu .sub-menu i {
  font-size: 18px;
  line-height: 1;
  color: var(--color-foundation-white);
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

.header__phone,
a.header__phone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 54px;
  padding: 0 clamp(20px, 2.5vw, 40px);
  background-color: var(--color-accent-medium-blue);
  border-radius: var(--radius-25) var(--radius-6) var(--radius-25) var(--radius-6);
  color: var(--color-foundation-white);
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  line-height: 1;
  box-sizing: border-box;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease;
}
.header__phone:hover,
.header__phone:focus-visible,
a.header__phone:hover,
a.header__phone:focus-visible {
  background-color: var(--color-accent-medium-blue-hover, #5d8199);
  color: var(--color-foundation-white);
}
.header__phone:active {
  transform: translateY(1px);
}

.header__inner {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 20px;
  height: 100%;
  box-sizing: border-box;
  z-index: 3;
}

.header__content {
  position: absolute;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  max-width: calc(100% - 40px);
}
.header--hero-banner .header__content {
  left: 20px;
  top: 190px;
  gap: 40px;
  width: 650px;
}
.header--tall .header__content {
  left: 20px;
  top: 333px;
  gap: 60px;
  width: 650px;
}
.header--short .header__content {
  right: 20px;
  left: auto;
  top: 187px;
  align-items: flex-end;
  text-align: right;
  width: 600px;
}

.header__logo { width: 100%; max-width: 500px; height: auto; }

.header__text {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
}
.header__eyebrow {
  color: var(--color-foundation-white);
  text-transform: capitalize;
}
.header__title {
  color: var(--color-foundation-white);
  text-transform: uppercase;
}
.header__title sup{ font-size: 1.2rem; position: relative; top: -0.6em; }
.header__body {
  color: var(--color-foundation-white);
}

.header__cta {
  display: flex;
  gap: 40px;
  flex-wrap: wrap;
}

.header__cta .btn[data-emphasis="outline"]:hover,
.header__cta .btn[data-emphasis="outline"]:focus-visible,
.header__cta .btn[data-emphasis="outline"]:focus {
  background-color: var(--color-foundation-white-a20);
  color: var(--color-foundation-white);
  border-color: var(--color-foundation-white);
}

.header__cta .btn[data-emphasis="filled"]:hover,
.header__cta .btn[data-emphasis="filled"]:focus-visible,
.header__cta .btn[data-emphasis="filled"]:focus {
  background-color: var(--color-accent-medium-blue-hover, #5d8199);
  color: var(--color-foundation-white);
}

.header__cta .btn:focus-visible {
  outline: 2px solid var(--color-foundation-white);
  outline-offset: 3px;
}

/* ==========================================================================
   Mobile Navigation & Offcanvas Drawer (< 1200px)
   ========================================================================== */

.header__nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  color: var(--color-foundation-white);
  font-size: 26px;
  cursor: pointer;
  padding: 0;
  transition: opacity 0.2s ease;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 60;
}
.header__nav-toggle:hover,
.header__nav-toggle:focus,
.header__nav-toggle:focus-visible {
  opacity: 0.85;
  outline: none;
}

.mobile-nav-backdrop {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 9998;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
body.mobile-nav-open .mobile-nav-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

.mobile-nav-drawer {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  width: min(340px, 85vw);
  height: 100%;
  background-color: var(--color-primary-blue, #273d4c);
  color: var(--color-foundation-white);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  transform: translateX(calc(-100% - 50px));
  visibility: hidden;
  pointer-events: none;
  box-shadow: none;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s ease, box-shadow 0.35s ease;
  box-sizing: border-box;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
body.mobile-nav-open .mobile-nav-drawer {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
  box-shadow: 4px 0 28px rgba(0, 0, 0, 0.4);
}

.mobile-nav-drawer__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 20px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
}
.mobile-nav-drawer__logo {
  height: 38px;
  width: auto;
  display: block;
}
.mobile-nav-drawer__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.08);
  border: none;
  border-radius: 8px;
  color: var(--color-foundation-white);
  font-size: 20px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.mobile-nav-drawer__close:hover,
.mobile-nav-drawer__close:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
}

.mobile-nav-drawer__body {
  flex: 1 1 auto;
  padding: 10px 0 20px;
  overflow-y: auto;
}
.mobile-nav-menu {
  list-style: none;
  margin: 0;
  padding: 0;
}
.mobile-nav-menu > li {
  position: relative;
  list-style: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav-menu > li > a {
  display: flex;
  align-items: center;
  padding: 16px 56px 16px 20px;
  color: var(--color-foundation-white);
  font-family: var(--font-headline);
  font-size: 18px;
  font-weight: 700;
  text-decoration: none;
  line-height: 1.3;
  transition: color 0.2s ease;
}
.mobile-nav-menu > li > a:hover,
.mobile-nav-menu > li > a:focus-visible {
  color: var(--color-primary-beige);
}

.mobile-nav-sub-toggle {
  position: absolute;
  right: 12px;
  top: 10px;
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px;
  color: var(--color-primary-beige);
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  z-index: 2;
}
.mobile-nav-sub-toggle:hover,
.mobile-nav-sub-toggle:focus,
.mobile-nav-sub-toggle:focus-visible {
  background-color: rgba(255, 255, 255, 0.2);
  outline: none;
}
.mobile-nav-menu > li.is-open > .mobile-nav-sub-toggle {
  background-color: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.3);
  color: var(--color-foundation-white);
}

.mobile-nav-menu .sub-menu {
  display: block;
  list-style: none;
  margin: 0;
  padding: 0 0 0 16px;
  background-color: rgba(0, 0, 0, 0.18);
  border-top: 1px solid transparent;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  transition: max-height 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              opacity 0.28s ease,
              border-color 0.25s ease;
  will-change: max-height, opacity;
}
.mobile-nav-menu > li.is-open > .sub-menu {
  opacity: 1;
  visibility: visible;
  padding: 10px 0 16px 16px;
  border-top-color: rgba(255, 255, 255, 0.05);
}
.mobile-nav-menu .sub-menu li {
  list-style: none;
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}
.mobile-nav-menu > li.is-open > .sub-menu li {
  opacity: 1;
  transform: translateY(0);
}
.mobile-nav-menu > li.is-open > .sub-menu li:nth-child(1) { transition-delay: 0.03s; }
.mobile-nav-menu > li.is-open > .sub-menu li:nth-child(2) { transition-delay: 0.06s; }
.mobile-nav-menu > li.is-open > .sub-menu li:nth-child(3) { transition-delay: 0.09s; }
.mobile-nav-menu > li.is-open > .sub-menu li:nth-child(4) { transition-delay: 0.12s; }
.mobile-nav-menu > li.is-open > .sub-menu li:nth-child(5) { transition-delay: 0.15s; }

.mobile-nav-menu .sub-menu a {
  display: block;
  padding: 10px 20px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 15px;
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.2s;
}
.mobile-nav-menu .sub-menu a:hover,
.mobile-nav-menu .sub-menu a:focus-visible {
  color: var(--color-primary-beige);
}

.mobile-nav-drawer__footer {
  padding: 20px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.1);
}
.mobile-nav-drawer__phone {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 48px;
  background-color: var(--color-accent-medium-blue);
  color: var(--color-foundation-white);
  border-radius: var(--radius-20) var(--radius-6) var(--radius-20) var(--radius-6);
  text-decoration: none;
  font-size: 16px;
  box-sizing: border-box;
}

/* ==========================================================================
   Header Mobile Breakpoint (< 1200px)
   ========================================================================== */

@media (max-width: 1199px) {
  /* Navigation Top Bar */
  .header__nav-toggle {
    display: flex;
    flex-shrink: 0;
  }
  .header__nav-menu-wrap {
    display: none !important;
  }
  .header__nav-logo-link,
  .header--hero-banner .header__nav:not(.is-sticky) .header__nav-logo-link {
    display: flex !important;
    align-items: center;
    margin-left: 6px;
    margin-right: auto;
  }
  /* max-width was the binding constraint, not height — the logo rendered
     shorter than its height allowance because the width cap squeezed it. Both
     move up together so height actually governs. The row is sized by the phone
     pill, which is taller, so none of this changes the bar. */
  .header__nav-logo {
    height: clamp(36px, 5.2vw, 46px);
    width: auto;
    max-width: clamp(164px, 26vw, 210px);
    object-fit: contain;
  }
  .header__nav.is-sticky .header__nav-logo-link {
    display: flex !important;
    align-items: center;
    margin-left: 6px;
    margin-right: auto;
  }
  .header__nav.is-sticky .header__nav-logo {
    height: clamp(34px, 4.6vw, 42px);
    width: auto;
  }
  .header__nav-row {
    justify-content: flex-start !important;
    padding: 16px 20px;
  }
  .header--hero-banner .header__nav:not(.is-sticky) .header__nav-row {
    justify-content: flex-start !important;
  }
  .header__nav-links {
    margin-left: auto;
    display: flex;
    align-items: center;
  }
  .header__phone,
  a.header__phone {
    height: 42px;
    padding: 0 16px;
    font-size: 14px;
    border-radius: var(--radius-20) var(--radius-4) var(--radius-20) var(--radius-4);
  }

  /* Header Variants Dimensions & Scaling.
     min-height ran past .header__bg — 700 against 683.1 on the hero, 415
     against 383.1 on the other two — so every page carried a strip of empty
     header between the swoop and the first section on top of that section's
     own padding. Matching the bg height hands those 17px and 32px back. The
     hairlines still overhang by 16px, which is deliberate and matches desktop;
     they are pointer-events: none and land in the next section's top padding. */
  .header--hero-banner {
    min-height: 683.1px;
  }
  .header--tall,
  .header--short {
    min-height: 383.1px;
  }

  /* Hero swoop.

     .header__bg is 1920px wide and centred, bleeding off both sides, so the wave
     art is already at its natural scale here — the only thing wrong at phone
     width was WHICH slice of it you saw. Centred, a 375px window lands on art
     x 772-1147: the straight run between the crest at 480 and the dip at 1440,
     which is why the edge read as a diagonal.

     So nothing gets stretched. The art keeps its 1920-unit width and full 108.21
     height, and --header-wave-x slides it sideways so the curve's high point
     sits in frame instead of the flat middle. That point is at art x=569 (the
     path's own control points pull it well past the x=480 node), and a 359px
     shift centres it at any viewport width. min() keeps the shift inside the
     available bleed: by 1199px the window is already wide enough to show the
     extremum anyway, and the taper stops the mask running out of art at the
     left edge.

     clip-path can't be offset this way (path() takes fixed coordinates), which
     is why this is a mask — a solid layer for everything above the swoop, plus
     --band-wave across the bottom band. Unflipped, --band-wave is opaque above
     its curve and clear below, the same curve the desktop clip-path draws.
     Masking the photo rather than painting white over it also works over the
     tinted sections, where an overlay would show a hard edge.

     .header__wave carries the three hairlines and takes the identical width and
     offset, so the two track each other by construction. It is NOT scaled to the
     viewport: at 100% it squeezed 1926 units into 375px and the lines came out
     roughly 5x steeper than the photo edge they are meant to trace. */
  .header {
    --header-wave-h: 108.21px;
    --header-wave-x: min(359px, calc((1920px - 100vw) / 2 - 8px));
  }
  /* The bg carried a fixed height while .header__content flows from the top, so
     the wave band sat at a pinned 275px (tall/short) no matter how the copy
     wrapped — and the copy ran straight through it: the last line cleared the
     curve's high point by -24px at 1129, -4px at 768, -1px at 375. Letting the
     bg follow the header means the band is always measured from the real
     bottom, and .header__content reserves the decorative zone below the text so
     the two can't collide at any wrap. min-height stays as the floor.

     That zone is NOT just the wave band. .header__wave starts 32px above the
     band and paints from ~5px into its own box, so the topmost hairline sits
     about 27px higher than the band top — reserving the band alone still left
     the last line 2px under the strokes. The 56px is that 32px plus a 24px
     gap, which puts the text ~29px clear of the first painted stroke. */
  .header--hero-banner .header__bg,
  .header--tall .header__bg,
  .header--short .header__bg {
    height: 100%;
    clip-path: none;
  }
  .header--hero-banner .header__bg,
  .header--tall .header__bg,
  .header--short .header__bg {
    -webkit-mask-image: linear-gradient(#000, #000), var(--band-wave);
    mask-image: linear-gradient(#000, #000), var(--band-wave);
    -webkit-mask-size: 100% calc(100% - var(--header-wave-h) + 1px), 100% var(--header-wave-h);
    mask-size: 100% calc(100% - var(--header-wave-h) + 1px), 100% var(--header-wave-h);
    -webkit-mask-position: left top, var(--header-wave-x) bottom;
    mask-position: left top, var(--header-wave-x) bottom;
    -webkit-mask-repeat: no-repeat, no-repeat;
    mask-repeat: no-repeat, no-repeat;
  }

  /* Natural width and height, same offset as the mask. The tops carry over the
     desktop relationship: the strokes start 32px above the curve. */
  .header--hero-banner .header__wave,
  .header--tall .header__wave,
  .header--short .header__wave {
    width: 1923px;
    max-width: none;
    height: auto;
    left: 50%;
    transform: translateX(calc(-50% + var(--header-wave-x)));
    bottom: auto !important;
  }
  /* Anchored from the bottom now that the bg height is fluid. The strokes are
     156px tall and start 32px above the band, so their bottom lands
     124px - wave height below the bg — the same ~16px overhang as desktop. */
  .header--hero-banner .header__wave,
  .header--tall .header__wave,
  .header--short .header__wave {
    top: auto !important;
    bottom: calc(var(--header-wave-h) - 124px) !important;
  }


  /* Header Content Centering */
  .header__inner {
    height: auto;
    padding: 0 20px;
  }
  .header__content,
  .header--tall .header__content,
  .header--short .header__content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding-top: clamp(80px, 10vw, 100px);
    padding-bottom: calc(var(--header-wave-h) + 56px);
    align-items: center !important;
    text-align: center !important;
    gap: 24px;
  }
  .header--hero-banner .header__content {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 0 auto !important;
    padding-top: clamp(130px, 16vw, 160px);
    padding-bottom: calc(var(--header-wave-h) + 56px);
    align-items: center !important;
    text-align: center !important;
    gap: 24px;
  }
  .header--short .header__content {
    padding-top: clamp(80px, 10vw, 95px);
    padding-bottom: calc(var(--header-wave-h) + 56px);
    gap: 16px;
  }

  .header--hero-banner .header__logo-link {
    display: none !important;
  }
  .header__logo {
    max-width: clamp(280px, 68vw, 380px);
    height: auto;
    margin: 0 auto;
  }

  .header__text {
    align-items: center;
    text-align: center;
    gap: 12px;
  }
  .header__eyebrow {
    font-size: clamp(14px, 3.5vw, 18px);
  }
  .header__title {
    font-size: clamp(30px, 6.5vw, 44px);
    line-height: 1.18;
  }
  .header__body {
    font-size: clamp(15px, 3vw, 17px);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
  }

  /* CTA Buttons */
  .header__cta {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 16px;
    width: 100%;
    max-width: 460px;
    margin: 8px auto 0;
  }
  .header__cta .btn {
    flex: 1 1 auto;
    height: auto;
    min-height: 52px;
    max-width: 240px;
    text-align: center;
    justify-content: center;
  }

  @media (max-width: 540px) {
    .header__cta {
      flex-direction: column;
      align-items: center;
      max-width: 320px;
      gap: 12px;
    }
    .header__cta .btn {
      width: 100%;
      max-width: 300px;
      height: auto;
      min-height: 54px;
      flex: none;
      box-sizing: border-box;
    }
  }
}


/* ==========================================================================
   Narrow Phones (< 480px) — nav row must fit logo + phone pill without clipping
   ========================================================================== */

@media (max-width: 480px) {
  .header__nav-row,
  .header__nav.is-sticky .header__nav-row {
    padding-left: 14px;
    padding-right: 14px;
    gap: 8px;
  }
  .header__nav-toggle {
    width: 38px;
    height: 38px;
    font-size: 23px;
  }
  .header__nav-logo,
  .header__nav.is-sticky .header__nav-logo {
    height: clamp(30px, 8.6vw, 38px);
    max-width: clamp(130px, 40vw, 168px);
  }
  .header__phone,
  a.header__phone,
  .header__nav.is-sticky .header__phone,
  .header__nav.is-sticky a.header__phone {
    height: 40px;
    padding: 0 12px;
    font-size: 13px;
    border-radius: var(--radius-20) var(--radius-4) var(--radius-20) var(--radius-4);
  }
  .header__nav.is-sticky .header__nav-row {
    min-height: 60px;
  }
}

@media (max-width: 400px) {
  .header__nav-toggle {
    width: 34px;
    height: 34px;
    font-size: 21px;
  }
  .header__nav-logo-link,
  .header__nav.is-sticky .header__nav-logo-link {
    margin-left: 4px;
  }
  /* This tier catches 375px too, not just the 320px it was tuned for. The row
     packs toggle + logo + phone from the left against ~198px of fixed width, so
     the logo's ceiling is roughly 100vw - 200px: 120px at 320, 175px at 375.
     Scaling by vw lets the common sizes take the full step up while 320 stays
     clear of the phone pill. */
  .header__nav-logo,
  .header__nav.is-sticky .header__nav-logo {
    height: clamp(26px, 8.2vw, 33px);
    max-width: clamp(100px, 35vw, 136px);
  }
  .header__phone,
  a.header__phone,
  .header__nav.is-sticky .header__phone,
  .header__nav.is-sticky a.header__phone {
    height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }
}