/* ============ DESIGN TOKENS — global ============ */
/* Extracted from the Webflow export (future-health-china-yolkk.webflow) — Mode B: visual reference only.
   Brand colors lifted verbatim; body type + site layout use Yolkk defaults (they matched the export);
   heading ramp + section spacing lifted from the export as the redesign starting point. */

:root {
  /* Site fundamentals (unitless) */
  --site--viewport-min: 20;
  --site--viewport-max: 100;
  --site--column-count: 12;

  /* Max widths */
  --max-width--main: 100rem; /* lifted from export (wide, airy layout) — Yolkk default is 80rem */
  --max-width--small: 50rem;
  --max-width--full: 100%;

  /* Site layout — margin, gutter, column width */
  --site--margin: clamp(
    1 * 1rem,
    ((1 - ((3 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((3 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    3 * 1rem
  );
  /* 1rem → 3rem — horizontal site margins */

  --site--gutter: clamp(
    1 * 1rem,
    ((1 - ((2 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((2 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    2 * 1rem
  );
  /* 1rem → 2rem — column gutters */

  --site--column-width: calc(
    (min(var(--max-width--main), 100% - var(--site--margin) * 2)
      - (var(--site--gutter) * (var(--site--column-count) - 1)))
    / var(--site--column-count)
  );

  /* Space — section rhythm (lifted from export) */
  --space--section-main: clamp(
    4 * 1rem,
    ((4 - ((7 - 4) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((7 - 4) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    7 * 1rem
  );
  /* 64px → 112px — default vertical section padding */

  --space--section-small: clamp(
    3 * 1rem,
    ((3 - ((5 - 3) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((5 - 3) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    5 * 1rem
  );
  /* 48px → 80px */

  --space--section-large: clamp(
    5.5 * 1rem,
    ((5.5 - ((10 - 5.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((10 - 5.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    10 * 1rem
  );
  /* 88px → 160px */

  --space--section-page-top: clamp(
    10 * 1rem,
    ((10 - ((14 - 10) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((14 - 10) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    14 * 1rem
  );
  /* 160px → 224px — first section of a page */

  /* Fonts — July 2026 rebrand: Geist (display) + Inter (body), the exact faces used by
     zetta-joule.com. Thin/light weights throughout per rebrand direction. */
  --font--display: "Geist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font--body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font--weight-thin: 200;
  --font--weight-light: 300;
  --font--weight-regular: 400;
  --font--weight-medium: 500;

  /* Text — body sizes (Yolkk defaults; identical in export) */
  --text--size-small: clamp(
    0.875 * 1rem,
    ((0.875 - ((1 - 0.875) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((1 - 0.875) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    1 * 1rem
  );
  /* 14px → 16px */

  --text--size-main: clamp(
    1 * 1rem,
    ((1 - ((1.125 - 1) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((1.125 - 1) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    1.125 * 1rem
  );
  /* 16px → 18px */

  --text--size-large: clamp(
    1.125 * 1rem,
    ((1.125 - ((1.25 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((1.25 - 1.125) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    1.25 * 1rem
  );
  /* 18px → 20px */

  /* Text — heading ramp (lifted from export) */
  --text--size-display: clamp(
    2.5 * 1rem,
    ((2.5 - ((6 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((6 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    6 * 1rem
  );
  /* 40px → 96px */

  --text--size-h1: clamp(
    2.5 * 1rem,
    ((2.5 - ((5.5 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((5.5 - 2.5) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    5.5 * 1rem
  );
  /* 40px → 88px */

  --text--size-h2: clamp(
    2.25 * 1rem,
    ((2.25 - ((4.5 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((4.5 - 2.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    4.5 * 1rem
  );
  /* 36px → 72px */

  --text--size-h3: clamp(
    2.05 * 1rem,
    ((2.05 - ((3.85 - 2.05) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((3.85 - 2.05) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    3.85 * 1rem
  );
  /* 33px → 62px */

  --text--size-h4: clamp(
    1.7 * 1rem,
    ((1.7 - ((2.9 - 1.7) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((2.9 - 1.7) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    2.9 * 1rem
  );
  /* 27px → 46px */

  --text--size-h5: clamp(
    1.4 * 1rem,
    ((1.4 - ((2.35 - 1.4) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((2.35 - 1.4) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    2.35 * 1rem
  );
  /* 22px → 38px */

  --text--size-h6: clamp(
    1.25 * 1rem,
    ((1.25 - ((2 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min)) * var(--site--viewport-min))) * 1rem
      + ((2 - 1.25) / (var(--site--viewport-max) - var(--site--viewport-min))) * 100vw),
    2 * 1rem
  );
  /* 20px → 32px */

  /* Text — line heights and letter spacing (lifted from export) */
  --text--lh-heading-tight: 0.9;
  --text--lh-heading: 1;
  --text--lh-heading-loose: 1.1;
  --text--lh-body: 1.3;
  --text--ls-tight: -0.02em; /* lighter weights need less negative tracking */
  --text--ls-normal: 0em;
  --text--ls-eyebrow: 0.08em;

  /* Color — brand lifted verbatim from export swatches; cream/forest promoted from
     export component usage (band backgrounds in FHA copy deck) */
  --color--brand: #01485e;          /* deep teal — primary brand */
  --color--brand-green: #4cb493;    /* secondary brand green */
  --color--surface: #f7f9f8;        /* brand off-white — page background */
  --color--surface-2: #ffffff;
  --color--band-tint: color-mix(in srgb, var(--color--brand-green) 20%, var(--color--surface-2)); /* soft green band background (20% brand green) */
  --color--band-grey: color-mix(in srgb, var(--color--ink) 9%, var(--color--surface-2)); /* light grey band background — must stay clearly darker than --color--surface */
  --color--forest: #16231b;         /* dark band background (currently unused — sections below pricing hidden) */
  --color--grey: #e9e9e9;
  --color--ink: #1f1d1e;            /* primary text */
  --color--ink-2: #2f2b2d;
  --color--ink-soft: color-mix(in srgb, var(--color--ink) 72%, transparent); /* body copy grey */
  --color--brand-dark: color-mix(in srgb, var(--color--brand), black 40%);
  --color--brand-light: color-mix(in srgb, var(--color--brand), white 80%);
  --color--border: color-mix(in srgb, var(--color--ink) 14%, transparent);

  /* Motion */
  --ease--main: cubic-bezier(0.625, 0.05, 0, 1); /* the "osmo" ease, shared with JS */

  /* Radius + borders — July 2026 rebrand: slightly smaller radii, hairline borders */
  --radius--main: 0.375rem;
  --radius--small: 0.1875rem;
  --radius--round: 100vw;
  --border-width--main: 0.0625rem; /* 1px hairline */
}


/* ============ GLOBAL BASE — global ============ */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: initial; /* Lenis owns scrolling */
}

body {
  font-family: var(--font--body);
  font-weight: var(--font--weight-light);
  font-size: var(--text--size-main);
  line-height: 1.5;
  color: var(--color--ink);
  background-color: var(--color--surface);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font--display);
  font-weight: var(--font--weight-light);
  line-height: var(--text--lh-heading-loose);
  letter-spacing: var(--text--ls-tight);
}

h1 { font-size: var(--text--size-h1); font-weight: var(--font--weight-thin); }
h2 { font-size: var(--text--size-h2); font-weight: var(--font--weight-thin); }
h3 { font-size: var(--text--size-h4); }
h4 { font-size: var(--text--size-h5); }

a { color: inherit; }

/* Layout */
.page-wrapper {
  min-height: 100vh;
}

.padding-global {
  padding-left: var(--site--margin);
  padding-right: var(--site--margin);
}

.container-large {
  max-width: var(--max-width--main);
  margin-left: auto;
  margin-right: auto;
}

.padding-section-main {
  padding-top: var(--space--section-main);
  padding-bottom: var(--space--section-main);
}

/* Text styles */
.text-style-lead {
  font-size: var(--text--size-large);
  color: var(--color--ink-soft);
  line-height: 1.55;
  text-wrap: pretty;
}

.text-style-small {
  font-size: var(--text--size-small);
}

/* Eyebrow — icon carried over from current site (kept per rebrand notes) */
.eyebrow {
  display: inline-flex;
  align-items: flex-start; /* icon stays top-left when the text wraps */
  gap: calc(var(--site--gutter) / 2);
  font-family: var(--font--body);
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-medium);
  letter-spacing: var(--text--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color--brand);
  margin-bottom: calc(var(--space--section-small) / 3);
}

.eyebrow_icon {
  width: 1.25rem;
  aspect-ratio: 1;
  flex: none;
}

.eyebrow.is--on-dark {
  color: var(--color--brand-green);
}

/* Buttons — carried over from current site, radius follows new token */
.button {
  display: inline-block;
  padding: 0.9rem 1.8rem;
  border-radius: var(--radius--main);
  border: var(--border-width--main) solid transparent;
  background-color: var(--color--brand);
  color: var(--color--surface-2);
  font-family: var(--font--body);
  font-size: var(--text--size-main);
  font-weight: var(--font--weight-medium);
  text-decoration: none;
  transition: background-color 0.25s ease;
}

.button:hover {
  background-color: var(--color--brand-dark);
}

.button.is-secondary {
  background-color: transparent;
  border-color: var(--color--border);
  color: var(--color--ink);
}

.button.is-secondary:hover {
  background-color: color-mix(in srgb, var(--color--ink) 5%, transparent);
}

/* Bubble-arrow button — Osmo "Button with Bubble Arrow" snippet, restyled to
   site tokens: small radius instead of circular, brand colors. The content pill
   slides while the arrows scale at fixed positions, so the layout box never
   changes width — nothing pushes past the page margins. */
.btn-bubble-arrow {
  border-radius: var(--radius--main);
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  text-decoration: none;
  font-family: var(--font--body);
  display: inline-flex;
  position: relative;
}

.btn-bubble-arrow__arrow {
  color: var(--color--surface-2);
  background-color: var(--color--brand-green);
  border-radius: var(--radius--main);
  flex-flow: row;
  justify-content: center;
  align-items: center;
  width: 3em;
  height: 3em;
  display: flex;
  position: relative;
  transition: transform 0.735s var(--ease--main);
  transform: scale(0) rotate(0.001deg);
  transform-origin: left;
}

.btn-bubble-arrow__arrow.is--duplicate {
  position: absolute;
  z-index: 2;
  right: 0;
  transform: scale(1) rotate(0.001deg);
  transform-origin: right;
}

.btn-bubble-arrow__arrow-svg {
  width: 40%;
  transition: transform 0.735s var(--ease--main);
  transform: rotate(0.001deg);
}

.btn-bubble-arrow__content {
  color: var(--color--surface-2);
  background-color: var(--color--brand);
  border-radius: var(--radius--main);
  justify-content: center;
  align-items: center;
  height: 3em;
  margin-left: 0.375em; /* gap between pill and arrow square, both states */
  padding-left: 1.5em;
  padding-right: 1.5em;
  display: flex;
  position: relative;
  transition: transform 0.735s var(--ease--main);
  transform: translateX(calc(-3em - 0.375em)) rotate(0.001deg);
}

.btn-bubble-arrow__content-text {
  line-height: 1;
  font-size: 0.9375em;
  font-weight: var(--font--weight-medium);
  white-space: nowrap;
}

/* Hover */
.btn-bubble-arrow:hover .btn-bubble-arrow__content {
  transform: translateX(0em) rotate(0.001deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow-svg {
  transform: rotate(-45deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow {
  transform: scale(1) rotate(0.001deg);
}

.btn-bubble-arrow:hover .btn-bubble-arrow__arrow.is--duplicate {
  transform: scale(0) rotate(0.001deg);
}

/* Secondary — fully outlined, for light surfaces (hero) */
.btn-bubble-arrow.is--secondary .btn-bubble-arrow__content,
.btn-bubble-arrow.is--secondary .btn-bubble-arrow__arrow {
  background-color: transparent;
  border: var(--border-width--main) solid var(--color--border);
  color: var(--color--ink);
}

/* Light — for dark surfaces (pricing card) */
.btn-bubble-arrow.is--light .btn-bubble-arrow__content {
  background-color: var(--color--surface-2);
  color: var(--color--brand);
}

/* Temporarily hidden sections (pending design direction) */
.u-hidden {
  display: none !important;
}

/* Text reveal — hidden until initTextReveal() shows it; visible if JS never runs is
   handled by the .no-js fallback on <html> */
html.js [data-reveal] {
  visibility: hidden;
}

.line-child {
  display: block;
}

/* Parallax media pattern (Osmo): trigger = mask, target = taller inner wrapper.
   The inner is 120% tall (10% overflow each side), which covers yPercent travel
   up to ±8 on the inner (8% × 1.2 = 9.6% of the mask) — site standard is ±5,
   hero ±6. Larger travel than ±8 WILL expose the mask background. */
.parallax-media {
  position: relative;
  overflow: hidden;
}

.parallax-media_inner {
  position: absolute;
  inset: -10% 0;
  height: 120%;
}

.parallax-media_inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============ NAVIGATION — mega nav ============ */
/* Osmo Mega Navigation structure + the old site's two-step open:
   step 1 (0–0.5s): the floating bar pulls up flush with the screen edge
   (insets → 0, radius → 0) — driven by CSS transitions on [data-menu-open];
   step 2 (0.25s+): the dropdown reveals downward (GSAP height tween in
   initMegaNav), content rising in staggered after. Same osmo ease throughout. */

.mega-nav {
  --nav-height: 3.75em;
  --nav-ease: cubic-bezier(0.625, 0.05, 0, 1);
  z-index: 100;
  position: fixed;
  top: 1.25rem;
  left: var(--site--margin);
  right: var(--site--margin);
  font-size: 1rem;
  transition: top 0.5s var(--nav-ease), left 0.5s var(--nav-ease), right 0.5s var(--nav-ease),
    opacity 0.7s var(--nav-ease), filter 0.7s var(--nav-ease), transform 0.7s var(--nav-ease);
}

/* Two-step, step 1 — pull up flush with the viewport edge */
.mega-nav[data-menu-open="true"] {
  top: 0;
  left: 0;
  right: 0;
}

/* Blur + fade away on scroll-down (like the text reveals, in reverse); return
   on any scroll-up. Never hides while the menu is open. Driven by the Osmo
   scroll-direction attributes on <body>. */
[data-scrolling-started="true"][data-scrolling-direction="down"] .mega-nav:not([data-menu-open="true"]) {
  opacity: 0;
  filter: blur(6px);
  transform: translateY(-0.75rem) rotate(0.001deg);
  pointer-events: none;
}

.mega-nav__bar {
  z-index: 3;
  background-color: var(--color--surface-2);
  border: var(--border-width--main) solid var(--color--border);
  border-radius: var(--radius--main);
  width: 100%;
  position: relative;
  transition: border-radius 0.5s var(--nav-ease);
}

.mega-nav[data-menu-open="true"] .mega-nav__bar {
  border-radius: 0;
}

.mega-nav__container {
  height: var(--nav-height);
  justify-content: space-between;
  align-items: center;
  padding: 0.625em 1.25em;
  display: flex;
}

.mega-nav__bar-start {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.mega-nav__bar-logo {
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex: none;
  margin-right: 3em;
  text-decoration: none;
}

.mega-nav__bar-logo-icon {
  width: 2.125em;
}

.mega-nav__bar-logo-wordmark {
  height: 2em;
  width: auto;
}

.mega-nav__bar-inner {
  gap: 0.75em;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-list {
  gap: 0.75em;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-list.is--actions {
  margin-left: auto;
}

.mega-nav__bar-link {
  color: var(--color--ink);
  background-color: transparent;
  border: none;
  border-radius: var(--radius--small);
  justify-content: flex-start;
  align-items: center;
  padding: 0.375em 0.625em;
  text-decoration: none;
  display: flex;
  cursor: pointer;
  font-family: var(--font--body);
  font-size: 1em; /* buttons don't inherit font-size — keeps toggles equal to the About link */
  transition: background-color 0.25s ease;
}

.mega-nav__bar-link:hover {
  background-color: color-mix(in srgb, var(--color--ink) 4%, transparent);
}

/* Eyebrow-weight labels (medium + slight tracking), without the all-caps */
.mega-nav__bar-link-label {
  font-size: 0.9375em;
  font-weight: var(--font--weight-medium);
  letter-spacing: 0.02em;
  line-height: 1.2;
}

.mega-nav__bar-link-icon {
  width: 1.25em;
}

/* Nav CTA is the primary bubble-arrow button at a smaller scale */
.mega-nav__bar-cta.btn-bubble-arrow {
  font-size: 0.8125rem;
}

.mega-nav__bar-end {
  gap: 0.75em;
  justify-content: flex-end;
  align-items: center;
  display: none;
}

.mega-nav__burger {
  gap: 0.25em;
  background-color: transparent;
  border: var(--border-width--main) solid var(--color--border);
  border-radius: var(--radius--small);
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
  cursor: pointer;
}

.mega-nav__burger-line {
  z-index: 1;
  background-color: var(--color--ink);
  border-radius: var(--radius--small);
  flex: none;
  width: 1.25em;
  height: var(--border-width--main);
  padding: 0;
  display: block;
  position: relative;
}

.mega-nav__back {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -0.625em;
}

.mega-nav__backdrop {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  background-color: color-mix(in srgb, var(--color--ink) 32%, transparent);
  position: fixed;
  inset: 0%;
}

.mega-nav__dropdown-wrapper {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  position: absolute;
  top: calc(100% - var(--radius--main));
  left: 0;
  right: 0;
}

.mega-nav__dropdown-container {
  position: relative;
  overflow: hidden;
}

.mega-nav__dropdown-bg {
  will-change: transform;
  background-color: var(--color--surface-2);
  border-bottom-right-radius: var(--radius--main);
  border-bottom-left-radius: var(--radius--main);
  border-top: var(--border-width--main) solid var(--color--border);
  position: absolute;
  inset: 0;
  transition: border-radius 0.5s var(--nav-ease);
}

.mega-nav[data-menu-open="true"] .mega-nav__dropdown-bg {
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
}

.mega-nav__dropdown-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

.mega-nav__dropdown-inner {
  display: flex;
}

.mega-nav__panel-col {
  gap: 1.25em;
  border-right: var(--border-width--main) solid var(--color--border);
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2.5em 1.5em;
  display: flex;
}

.mega-nav__panel-col:last-of-type {
  border-right: none;
}

.mega-nav__panel-col.is--colored {
  background-color: var(--color--band-grey);
}

.mega-nav__panel-col.is--colored.has--card {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.mega-nav__panel-label {
  text-transform: uppercase;
  padding-left: 1em;
  font-family: var(--font--body);
  font-size: 0.75em;
  font-weight: var(--font--weight-medium);
  letter-spacing: var(--text--ls-eyebrow);
  color: var(--color--ink-soft);
  line-height: 1;
}

.mega-nav__panel-list {
  gap: 0;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.mega-nav__panel-link {
  color: var(--color--ink);
  border-radius: var(--radius--small);
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 0.625em 1em;
  text-decoration: none;
  display: flex;
  transition: background-color 0.25s ease;
}

.mega-nav__panel-link:hover {
  background-color: color-mix(in srgb, var(--color--ink) 4%, transparent);
}

.mega-nav__panel-link-text {
  font-weight: var(--font--weight-regular);
}

.mega-nav__panel-link-desc {
  color: var(--color--ink-soft);
  font-size: 0.875em;
  font-weight: var(--font--weight-light);
}

.mega-nav__card {
  background-color: var(--color--surface-2);
  border: var(--border-width--main) solid var(--color--border);
  border-radius: var(--radius--main);
  flex-flow: column;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.mega-nav__card-visual {
  width: 100%;
  height: 12.5em;
  position: relative;
}

.mega-nav__card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mega-nav__card-content {
  gap: 1.25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5em;
  display: flex;
}

.mega-nav__card-text {
  gap: 0.125em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.mega-nav__card-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.25em;
  color: var(--color--brand);
  font-size: 0.9375em;
  font-weight: var(--font--weight-medium);
  text-decoration: none;
}

.mega-nav__card-cta-icon {
  width: 1.25em;
}

@media screen and (max-width: 991px) {
  .mega-nav {
    top: 0;
    left: 0;
    right: 0;
  }

  .mega-nav__bar {
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
  }

  .mega-nav__bar-start {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-list {
    gap: 0;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  .mega-nav__bar-list.is--actions {
    gap: 1em;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .mega-nav__bar-link {
    border-bottom: var(--border-width--main) solid var(--color--border);
    border-radius: 0;
    width: 100%;
    padding: 0.75em 0;
  }

  .mega-nav__bar-link.is--dropdown {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-link.is--back {
    border-bottom-style: none;
    font-size: 1em;
  }

  .mega-nav__bar-link-label {
    font-size: 1.25em;
  }

  .mega-nav__bar-link-icon {
    width: 1.5em;
  }

  .mega-nav__bar-link-icon.is--dropdown {
    transform: rotate(-90deg);
  }

  .mega-nav__bar-end {
    display: flex;
  }

  .mega-nav__bar-inner {
    opacity: 0;
    bottom: 0%;
    left: 0%;
    right: 0%;
    top: var(--nav-height);
    visibility: hidden;
    background-color: var(--color--surface-2);
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.5em;
    position: fixed;
    overflow: auto;
  }

  .mega-nav__backdrop {
    display: none;
  }

  .mega-nav__dropdown-wrapper {
    z-index: 4;
    bottom: 0;
    top: var(--nav-height);
    position: fixed;
  }

  .mega-nav__dropdown-container {
    height: 100%;
    overflow: auto;
  }

  .mega-nav__dropdown-bg {
    display: none;
  }

  .mega-nav__dropdown-panel {
    background-color: var(--color--surface-2);
    bottom: 0;
    overflow: auto;
  }

  .mega-nav__dropdown-inner {
    flex-flow: column;
  }

  .mega-nav__panel-col {
    border-bottom: var(--border-width--main) solid var(--color--border);
    border-right-style: none;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .mega-nav__panel-label {
    width: 100%;
  }

  .mega-nav__bar-action {
    flex: 1;
  }
}

@media screen and (max-width: 479px) {
  .mega-nav__bar-link-label {
    font-size: 1em;
  }

  .mega-nav__bar-link-icon {
    width: 1.375em;
  }

  .mega-nav__panel-col.is--colored.has--card {
    padding: 0;
  }

  .mega-nav__card {
    border-bottom: var(--border-width--main) solid var(--color--border);
    border-radius: 0;
  }

  .mega-nav__card-content {
    padding: 1em 1em 1.5em;
  }
}


/* ============ FHA HERO — section_fha-hero ============ */

.section_fha-hero {
  background-color: var(--color--surface);
}

.fha-hero_top {
  /* 0.72× page-top: tighter gap between the nav and the hero heading */
  padding-top: calc(var(--space--section-page-top) * 0.72);
  padding-bottom: var(--space--section-main);
}

.fha-hero_grid {
  display: grid;
  grid-template-columns: repeat(var(--site--column-count), 1fr);
  gap: var(--site--gutter);
  align-items: start;
}

.fha-hero_heading-block {
  grid-column: 1 / span 8;
}

.fha-hero_heading-block h1 {
  max-width: 16ch;
  text-wrap: balance;
}

.fha-hero_content {
  grid-column: 9 / span 4;
  display: flex;
  flex-direction: column;
  gap: calc(var(--site--gutter) * 1.25);
  align-items: flex-start;
  /* start level with the h1, not the eyebrow: eyebrow line + its margin */
  padding-top: calc(1.5rem + var(--space--section-small) / 3);
}

.fha-hero_meta {
  font-size: var(--text--size-small);
  color: var(--color--ink-soft);
  letter-spacing: 0.02em;
}

.fha-hero_media {
  height: 78vh;
  min-height: 30rem;
}

@media (max-width: 61.9375rem) {
  .fha-hero_grid {
    grid-template-columns: 1fr;
  }

  .fha-hero_heading-block,
  .fha-hero_content {
    grid-column: auto;
  }

  .fha-hero_media {
    height: 60vh;
  }
}


/* ============ FHA OVERVIEW — section_fha-overview ============ */

.section_fha-overview {
  background-color: var(--color--surface);
}

/* Full-width heading above a two-column row; the image stretches to exactly
   the paragraph block's height (same visual size as the text). */
.fha-overview_header {
  margin-bottom: calc(var(--site--gutter) * 1.25 + 2rem);
}

.fha-overview_header h2 {
  max-width: none;
  text-wrap: balance;
}

.fha-overview_grid {
  display: grid;
  grid-template-columns: repeat(var(--site--column-count), 1fr);
  gap: var(--site--gutter);
  align-items: end;
}

.fha-overview_content {
  grid-column: 1 / span 5;
}

.fha-overview_content .text-style-lead {
  max-width: 44rem;
}

.fha-overview_content .text-style-lead + .text-style-lead {
  margin-top: calc(var(--site--gutter) * 1.5);
}

.fha-overview_media {
  grid-column: 8 / span 5;
  align-self: stretch;
  border-radius: var(--radius--main);
}

@media (max-width: 61.9375rem) {
  .fha-overview_grid {
    grid-template-columns: 1fr;
    gap: calc(var(--site--gutter) * 2);
  }

  .fha-overview_content,
  .fha-overview_media {
    grid-column: auto;
  }

  .fha-overview_media {
    aspect-ratio: 4 / 3; /* stacked layout needs an intrinsic height */
  }
}


/* ============ FHA INCLUDED — section_fha-included ============ */

.section_fha-included {
  background-color: var(--color--surface);
}

.fha-included_header {
  max-width: var(--max-width--small);
  margin-bottom: calc(var(--space--section-small) * 0.9);
}

.fha-included_header .text-style-lead {
  margin-top: calc(var(--site--gutter) * 1.5);
}

/* Equal 1fr columns with no horizontal padding so every image mask is the same
   width (and therefore, via aspect-ratio, the same height). Column dividers are
   drawn in the middle of the gap instead of as borders. */
.fha-included_grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--site--gutter) * 2.5);
  row-gap: calc(var(--site--gutter) * 3);
}

.fha-included_item {
  position: relative;
  display: flex;
  flex-direction: column;
}

.fha-included_item:not(:nth-child(3n + 1))::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--site--gutter) * -1.25);
  width: var(--border-width--main);
  background-color: var(--color--border);
}

.fha-included_media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius--small);
  margin-bottom: calc(var(--site--gutter) * 1.25);
}

.fha-included_item h3 {
  font-size: var(--text--size-h6);
  font-weight: var(--font--weight-regular);
  margin-bottom: calc(var(--site--gutter) * 0.5);
}

.fha-included_item p {
  color: var(--color--ink-soft);
  font-size: var(--text--size-main);
  line-height: 1.55;
}

/* Option A: the whole card is the modal trigger; a hairline bottom row carries
   the label + bracket hint where the old details toggle sat. No lift, no
   shadow — hover speaks through the brackets, label color and a whisper of
   image zoom. */
.fha-included_item {
  cursor: pointer;
}

.fha-included_item .parallax-media img {
  transition: transform 0.7s var(--ease--main);
}

.fha-included_item:hover .parallax-media img {
  transform: scale(1.03);
}

.fha-included_more {
  position: relative;
  margin-top: auto;
  padding-top: calc(var(--site--gutter) * 0.9);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--site--gutter);
  border-top: var(--border-width--main) solid var(--color--border);
}

/* Brand line sweeps over the faded hairline on hover anywhere on the card
   (same move as the report info-card footers) */
.fha-included_more::before {
  content: "";
  position: absolute;
  top: calc(var(--border-width--main) * -1);
  left: 0;
  right: 0;
  height: var(--border-width--main);
  background-color: var(--color--brand);
  transform: scaleX(0) rotate(0.001deg);
  transform-origin: left;
  transition: transform 0.6s var(--ease--main);
}

.fha-included_item:hover .fha-included_more::before,
.fha-included_item:focus-visible .fha-included_more::before {
  transform: scaleX(1) rotate(0.001deg);
}

.fha-included_item p {
  margin-bottom: var(--site--gutter);
}

.fha-included_more-label {
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-medium);
  color: var(--color--ink-soft);
  transition: color 0.4s var(--ease--main);
}

.fha-included_item:hover .fha-included_more-label,
.fha-included_item:focus-visible .fha-included_more-label {
  color: var(--color--brand);
}

@media (max-width: 61.9375rem) {
  .fha-included_grid {
    grid-template-columns: 1fr;
    row-gap: calc(var(--site--gutter) * 2);
  }

  .fha-included_item:not(:nth-child(3n + 1))::before {
    content: none;
  }

  .fha-included_item {
    border-top: var(--border-width--main) solid var(--color--border);
    padding-top: calc(var(--site--gutter) * 1.5);
  }

  .fha-included_item:first-child {
    border-top: none;
    padding-top: 0;
  }
}


/* ============ FHA WHO FOR — section_fha-who ============ */

.section_fha-who {
  background-color: var(--color--band-tint);
}

.fha-who_header {
  max-width: var(--max-width--small);
  margin-bottom: calc(var(--space--section-small) * 0.6);
}

.fha-who_list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: calc(var(--site--gutter) * 2.5);
}

.fha-who_list li {
  display: flex;
  align-items: center;
  gap: calc(var(--site--gutter) * 0.75);
  padding: calc(var(--site--gutter) * 0.9) 0;
  border-top: var(--border-width--main) solid var(--color--border);
  font-size: var(--text--size-large);
}

.fha-who_list li::before {
  content: "✓";
  color: var(--color--brand-green);
  font-weight: var(--font--weight-medium);
  flex: none;
}

@media (max-width: 61.9375rem) {
  .fha-who_list {
    grid-template-columns: 1fr;
  }
}


/* ============ FHA REPORT — section_fha-report ============ */

.section_fha-report {
  background-color: var(--color--band-grey);
}

.fha-report_header {
  max-width: var(--max-width--small);
  margin-bottom: calc(var(--space--section-small) * 0.9);
}

.fha-report_header .text-style-lead {
  margin-top: calc(var(--site--gutter) * 1.5);
}

/* Slider — Osmo "Basic GSAP Slider" chassis. The root is full-bleed with
   overflow clipped at the viewport; its left padding aligns the first slide
   with the site's content edge, and slides bleed past the right margin
   (the "Watch CSS" trick: snap math runs on the collection, clipping on the
   root). Each slide is a PAIR (parallax image card + static info card, side
   by side on desktop — visually identical to alternating cards) that stacks
   image-over-info on small screens so the unit reads as one card. */
.fha-report_slider {
  --slider-status: on;
  --slider-gap: calc(var(--site--gutter) / 2);
  --report-media-w: min(29vw, 30rem); /* image card width; info card runs 2rem wider */
  width: 100%;
  padding-left: max(var(--site--margin), calc((100vw - var(--max-width--main)) / 2));
  margin-top: calc(var(--space--section-small) * 0.9);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: calc(var(--site--gutter) * 1.5);
  overflow: clip;
  position: relative;
}

.gsap-slider__collection {
  width: 100%;
}

.gsap-slider__list {
  -webkit-user-select: none;
  user-select: none;
  will-change: transform;
  touch-action: pan-y;
  backface-visibility: hidden;
  display: flex;
  align-items: stretch;
}

.gsap-slider__list[data-gsap-slider-list-status="grab"] { cursor: grab; }
.gsap-slider__list[data-gsap-slider-list-status="grabbing"] { cursor: grabbing; }

.fha-report_slider .gsap-slider__item {
  width: auto; /* the pair defines its own width */
  margin-right: var(--slider-gap);
  flex: none;
}

[data-gsap-slider-item]:last-child {
  margin-right: 0;
}

.fha-report_pair {
  display: flex;
  gap: var(--slider-gap);
  align-items: stretch;
  height: 100%;
}

@media screen and (max-width: 991px) {
  .fha-report_slider {
    --report-media-w: 36vw;
  }
}

/* Small screens: the pair stacks — image on top, info underneath, one unit */
@media screen and (max-width: 767px) {
  .fha-report_pair {
    flex-direction: column;
    width: 78vw;
  }

  .fha-report_pair .fha-report_media-card,
  .fha-report_pair .fha-report_info-card {
    width: 100%;
  }

  .fha-report_pair .fha-report_media-card {
    aspect-ratio: 4 / 3;
    height: auto;
  }
}

/* Image card — vertical scroll parallax via the site-standard
   .parallax-media pattern (no horizontal movement) */
.fha-report_media-card {
  width: var(--report-media-w);
  height: 100%;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius--main);
  flex: none;
}

/* Info card — static content on the brand surface */
.fha-report_info-card {
  width: calc(var(--report-media-w) + 2rem);
  flex: none;
  display: flex;
  flex-direction: column;
  background-color: var(--color--brand);
  color: var(--color--surface-2);
  border-radius: var(--radius--main);
  padding: calc(var(--site--gutter) * 1.5);
}

.fha-report_info-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-regular);
  color: color-mix(in srgb, var(--color--surface-2) 80%, transparent);
  margin-bottom: calc(var(--space--section-small) * 0.55);
}

.fha-report_info-dot {
  width: 0.5em;
  height: 0.5em;
  border-radius: var(--radius--round);
  background-color: var(--color--brand-green);
  flex: none;
}

.fha-report_info-card h3 {
  font-size: var(--text--size-h5);
  font-weight: var(--font--weight-light);
  max-width: 14ch;
  margin-bottom: calc(var(--site--gutter) * 0.75);
}

.fha-report_info-card p {
  color: color-mix(in srgb, var(--color--surface-2) 72%, transparent);
  line-height: 1.55;
  max-width: 34ch;
}

/* Footer: hairline top; on hover a full-white line sweeps over it */
.fha-report_info-footer {
  margin-top: auto;
  position: relative;
  border-top: var(--border-width--main) solid color-mix(in srgb, var(--color--surface-2) 22%, transparent);
  padding-top: calc(var(--site--gutter) * 0.75);
}

.fha-report_info-footer::before {
  content: "";
  position: absolute;
  top: calc(var(--border-width--main) * -1);
  left: 0;
  right: 0;
  height: var(--border-width--main);
  background-color: var(--color--surface-2);
  transform: scaleX(0) rotate(0.001deg);
  transform-origin: left;
  transition: transform 0.6s var(--ease--main);
}

.fha-report_info-footer:hover::before {
  transform: scaleX(1) rotate(0.001deg);
}

.fha-report_learn-more {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  background: none;
  border: none;
  padding: 0;
  color: var(--color--surface-2);
  font-family: var(--font--body);
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-medium);
  cursor: pointer;
}

.fha-report_learn-more-icon {
  font-size: 1.1em;
  line-height: 1;
}

/* Controls — hairline squares with thin chevrons, aligned to the site margin */
.gsap-slider__controls {
  display: flex;
  gap: calc(var(--site--gutter) * 0.5);
}

.gsap-slider__control {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.5em;
  height: 2.5em;
  background: transparent;
  border: var(--border-width--main) solid var(--color--border);
  border-radius: var(--radius--small);
  color: var(--color--ink);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
}

.gsap-slider__control svg {
  width: 1em;
  height: 1em;
}

.gsap-slider__control:hover {
  color: var(--color--brand);
  border-color: color-mix(in srgb, var(--color--brand) 45%, transparent);
}

[data-gsap-slider-status="not-active"] [data-gsap-slider-controls] {
  display: none;
}

[data-gsap-slider-control-status="not-active"] {
  opacity: 0.25;
  pointer-events: none;
}


/* ============ FHA JOURNEY — section_fha-journey ============ */

.section_fha-journey {
  background-color: var(--color--surface);
}

.fha-journey_header {
  max-width: var(--max-width--small);
  margin-bottom: calc(var(--space--section-small) * 0.6);
}

/* Text columns leave free space on the right for the hover media to float in
   (madewithgsap effect030) */
.fha-journey_steps {
  position: relative;
}

.fha-journey_step {
  display: grid;
  grid-template-columns: 5rem minmax(0, 0.85fr) minmax(0, 1fr) 16rem;
  gap: var(--site--gutter);
  align-items: baseline;
  padding: calc(var(--site--gutter) * 1.25) 0;
  border-top: var(--border-width--main) solid var(--color--border);
}

.fha-journey_step h3 {
  max-width: 16ch;
}

.fha-journey_step p {
  max-width: 30rem;
}

/* Hover media: follows the cursor vertically; rows wipe their image in.
   The wipe divs/imgs are created by initJourneyHoverImages(). */
.fha-journey_media {
  position: absolute;
  top: 0;
  right: 2%;
  z-index: 2;
  width: 13rem;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius--small);
  overflow: hidden;
  pointer-events: none;
  visibility: hidden;
}

.fha-journey_media.is--on {
  visibility: visible;
}

.fha-journey_media > div {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translate(0, -100%); /* starts above the mask */
}

.fha-journey_media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transform: translate(0, 90%); /* starts almost completely below the parent */
}

.fha-journey_step:last-child {
  border-bottom: var(--border-width--main) solid var(--color--border);
}

.fha-journey_number {
  font-size: var(--text--size-small);
  color: var(--color--ink-soft);
  letter-spacing: 0.04em;
}

.fha-journey_step h3 {
  font-size: var(--text--size-h6);
  font-weight: var(--font--weight-regular);
}

.fha-journey_step p {
  color: var(--color--ink-soft);
  line-height: 1.55;
}

@media (max-width: 61.9375rem) {
  .fha-journey_step {
    grid-template-columns: 3rem 1fr;
  }

  .fha-journey_step p {
    grid-column: 2;
  }

  .fha-journey_media {
    display: none;
  }
}


/* ============ FHA PRICING — section_fha-pricing ============ */

.section_fha-pricing {
  background-color: var(--color--band-grey);
}

.fha-pricing_header {
  max-width: var(--max-width--small);
  margin-bottom: calc(var(--space--section-small) * 0.6);
}

.fha-pricing_header .text-style-lead {
  margin-top: calc(var(--site--gutter) * 1.5);
}

.fha-pricing_card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: calc(var(--site--gutter) * 2.5);
  align-items: center;
  background-color: var(--color--brand);
  color: var(--color--surface-2);
  border-radius: var(--radius--main);
  padding: clamp(2.5rem, 5vw, 4rem);
}

.fha-pricing_card h3 {
  font-size: var(--text--size-h5);
  font-weight: var(--font--weight-light);
}

.fha-pricing_includes {
  list-style: none;
  columns: 2;
  column-gap: calc(var(--site--gutter) * 2.5);
  margin-top: calc(var(--site--gutter) * 1.5);
}

.fha-pricing_includes li {
  display: flex;
  gap: calc(var(--site--gutter) * 0.6);
  padding: 0.4rem 0;
  font-size: var(--text--size-small);
  color: color-mix(in srgb, var(--color--surface-2) 75%, transparent);
  break-inside: avoid;
}

.fha-pricing_includes li::before {
  content: "✓";
  color: var(--color--surface-2);
  flex: none;
}

.fha-pricing_side {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 15rem;
}

.fha-pricing_amount {
  font-family: var(--font--display);
  font-size: var(--text--size-h2);
  font-weight: var(--font--weight-thin);
  line-height: 1;
}

.fha-pricing_note {
  margin-top: calc(var(--site--gutter) * 0.5);
  font-size: var(--text--size-small);
  color: color-mix(in srgb, var(--color--surface-2) 55%, transparent);
}

.fha-pricing_side .btn-bubble-arrow {
  margin-top: calc(var(--site--gutter) * 1.5);
}

@media (max-width: 61.9375rem) {
  .fha-pricing_card {
    grid-template-columns: 1fr;
  }

  .fha-pricing_includes {
    columns: 1;
  }

  .fha-pricing_side {
    align-items: flex-start;
    text-align: left;
  }
}


/* ============ FHA WHY — section_fha-why ============ */
/* Scroll takeover (zetta pattern): the video starts framed in the layout, then
   expands to fullscreen as you scroll (radius easing away); a hairline line and
   step copy fade in over it while the stage stays sticky through four points.
   All scroll animation lives in initWhyTakeover() (desktop only). */

.section_fha-why {
  background-color: var(--color--surface);
}

.fha-why_track {
  height: 520vh;
}

.fha-why_stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: clip;
}

.fha-why_stage-inner {
  position: relative;
  height: 100%;
}

.fha-why_intro {
  display: grid;
  grid-template-columns: repeat(var(--site--column-count), 1fr);
  gap: var(--site--gutter);
  padding-top: 14vh;
}

.fha-why_intro .eyebrow {
  grid-column: 1 / span 4;
  align-self: start;
}

.fha-why_intro-right {
  grid-column: 6 / -1;
}

.fha-why_intro-right h2 {
  max-width: 16ch;
}

.fha-why_intro-right .btn-bubble-arrow {
  margin-top: calc(var(--site--gutter) * 1.5);
}

.fha-why_aside {
  position: absolute;
  left: var(--site--margin);
  top: 52vh;
  max-width: 20rem;
  color: var(--color--ink-soft);
  line-height: 1.6;
}

.fha-why_media {
  position: absolute;
  top: 48vh;
  right: var(--site--margin);
  width: 52vw;
  height: calc(52vw * 9 / 16);
  border-radius: var(--radius--main);
  overflow: hidden;
}

.fha-why_video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fha-why_shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, color-mix(in srgb, var(--color--ink) 62%, transparent) 0%, color-mix(in srgb, var(--color--ink) 25%, transparent) 55%, color-mix(in srgb, var(--color--ink) 10%, transparent) 100%);
  opacity: 0; /* animated */
}

.fha-why_steps {
  position: absolute;
  left: var(--site--margin);
  right: var(--site--margin);
  top: 58vh; /* line sits below center; text reveals beneath it with room to spare */
  color: var(--color--surface-2);
}

.fha-why_steps-line {
  height: var(--border-width--main);
  background-color: color-mix(in srgb, var(--color--surface-2) 85%, transparent);
  transform: scaleX(0) rotate(0.001deg);
  transform-origin: left;
}

.fha-why_step {
  position: absolute;
  top: calc(var(--site--gutter) * 1.25);
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(var(--site--column-count), 1fr);
  gap: var(--site--gutter);
  align-items: start;
}

.fha-why_step-label {
  grid-column: 1 / span 3;
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-medium);
  letter-spacing: var(--text--ls-eyebrow);
  text-transform: uppercase;
  color: color-mix(in srgb, var(--color--surface-2) 75%, transparent);
  opacity: 0; /* animated */
}

.fha-why_step-text {
  grid-column: 6 / span 6;
  font-family: var(--font--display);
  font-size: var(--text--size-h6);
  font-weight: var(--font--weight-light);
  line-height: 1.35;
  text-wrap: pretty;
}

/* Mobile portrait AND mobile landscape (short screens): no takeover — static framed layout */
@media (max-width: 47.9375rem), (max-height: 31.1875rem) {
  .fha-why_track {
    height: auto;
  }

  .fha-why_stage {
    position: static;
    height: auto;
    padding-top: var(--space--section-main);
    padding-bottom: var(--space--section-main);
  }

  .fha-why_intro {
    grid-template-columns: 1fr;
    padding-top: 0;
  }

  .fha-why_intro .eyebrow,
  .fha-why_intro-right {
    grid-column: auto;
  }

  .fha-why_aside {
    position: static;
    margin-top: calc(var(--site--gutter) * 2);
    padding: 0 var(--site--margin);
  }

  .fha-why_media {
    position: static;
    width: auto;
    height: auto;
    aspect-ratio: 16 / 9;
    margin: calc(var(--site--gutter) * 1.5) var(--site--margin) 0;
  }

  .fha-why_shade {
    display: none;
  }

  .fha-why_steps {
    position: static;
    margin-top: calc(var(--site--gutter) * 2);
    padding: 0 var(--site--margin);
    color: var(--color--ink);
  }

  .fha-why_steps-line {
    display: none;
  }

  .fha-why_step {
    position: static;
    grid-template-columns: 1fr;
    border-top: var(--border-width--main) solid var(--color--border);
    padding: calc(var(--site--gutter) * 1.1) 0;
  }

  .fha-why_step-label {
    grid-column: auto;
    opacity: 1;
    color: var(--color--ink-soft);
    margin-bottom: 0.5rem;
  }

  .fha-why_step-text {
    grid-column: auto;
  }
}


/* ============ FHA FAQ — section_fha-faq ============ */

.section_fha-faq {
  background-color: var(--color--surface);
}

.fha-faq_header {
  margin-bottom: calc(var(--space--section-small) * 0.6);
}

.fha-faq_list {
  max-width: var(--max-width--small);
  border-bottom: var(--border-width--main) solid var(--color--border);
}

/* Annnimate accordion, restyled: hairline rows, thin plus icon, GSAP height
   expansion with masked line-stagger on the answer text */
.fha-faq_item {
  border-top: var(--border-width--main) solid var(--color--border);
}

.fha-faq_trigger {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--site--gutter);
  padding: calc(var(--site--gutter) * 1.1) 0;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--color--ink);
  font-family: var(--font--body);
}

.fha-faq_question {
  font-size: var(--text--size-large);
  font-weight: var(--font--weight-regular);
}

.fha-faq_icon {
  width: 0.9em;
  height: 0.9em;
  flex: none;
  color: var(--color--brand);
}

.fha-faq_content {
  overflow: hidden;
}

.fha-faq_answer {
  padding-bottom: calc(var(--site--gutter) * 1.1);
  color: var(--color--ink-soft);
  max-width: 44rem;
  line-height: 1.6;
}


/* ============ FHA UPGRADES — section_fha-upgrades ============ */
/* Same open-cell card language as What's included, but these are LINKS to the
   other assessment pages — no modal, no brackets: a "Learn more" row with the
   report-style line sweep instead. */

.section_fha-upgrades {
  background-color: var(--color--band-grey);
}

.fha-upgrades_header {
  max-width: var(--max-width--small);
  margin-bottom: calc(var(--space--section-small) * 0.9);
}

.fha-upgrades_header .text-style-lead {
  margin-top: calc(var(--site--gutter) * 1.5);
}

/* Slider chassis vars: off on desktop (grid layout), on at tablet and below */
.fha-upgrades_slider {
  --slider-status: off;
  --slider-spv: 4;
  --slider-gap: calc(var(--site--gutter) * 1.25);
  position: relative;
  overflow: clip;
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: calc(var(--site--gutter) * 1.5);
}

.fha-upgrades_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  column-gap: calc(var(--site--gutter) * 2.5);
  row-gap: calc(var(--site--gutter) * 3);
}

.fha-upgrades_slider .gsap-slider__item {
  width: auto;
  margin-right: 0;
}

.fha-upgrades_card {
  height: 100%;
}

@media screen and (max-width: 991px) {
  .fha-upgrades_slider {
    --slider-status: on;
    --slider-spv: 2.15;
  }

  .fha-upgrades_grid {
    display: flex;
    align-items: stretch;
  }

  .fha-upgrades_slider .gsap-slider__item {
    width: calc(((100% - 1px) - (var(--slider-spv) - 1) * var(--slider-gap)) / var(--slider-spv));
    margin-right: var(--slider-gap);
    flex: none;
  }
}

@media screen and (max-width: 767px) {
  .fha-upgrades_slider {
    --slider-spv: 1.15;
  }
}

.fha-upgrades_card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--color--ink);
  cursor: pointer;
}

@media screen and (min-width: 62rem) {
  .fha-upgrades_slider .gsap-slider__item:not(:first-child) .fha-upgrades_card::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--site--gutter) * -1.25);
    width: var(--border-width--main);
    background-color: var(--color--border);
  }
}

.fha-upgrades_media {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius--small);
  margin-bottom: calc(var(--site--gutter) * 1.25);
}

.fha-upgrades_card .parallax-media img {
  transition: transform 0.7s var(--ease--main);
}

.fha-upgrades_card:hover .parallax-media img {
  transform: scale(1.03);
}

.fha-upgrades_card h3 {
  font-size: var(--text--size-h6);
  font-weight: var(--font--weight-regular);
  margin-bottom: calc(var(--site--gutter) * 0.5);
}

.fha-upgrades_card p {
  color: var(--color--ink-soft);
  line-height: 1.55;
  margin-bottom: calc(var(--site--gutter) * 0.75);
}

.fha-upgrades_price {
  color: var(--color--brand);
  font-size: var(--text--size-large);
  font-weight: var(--font--weight-medium);
  margin-bottom: var(--site--gutter);
}

.fha-upgrades_price span {
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-light);
  color: var(--color--ink-soft);
  margin-left: 0.35em;
}

.fha-upgrades_more {
  position: relative;
  margin-top: auto;
  padding-top: calc(var(--site--gutter) * 0.9);
  border-top: var(--border-width--main) solid var(--color--border);
}

.fha-upgrades_more::before {
  content: "";
  position: absolute;
  top: calc(var(--border-width--main) * -1);
  left: 0;
  right: 0;
  height: var(--border-width--main);
  background-color: var(--color--brand);
  transform: scaleX(0) rotate(0.001deg);
  transform-origin: left;
  transition: transform 0.6s var(--ease--main);
}

.fha-upgrades_card:hover .fha-upgrades_more::before,
.fha-upgrades_card:focus-visible .fha-upgrades_more::before {
  transform: scaleX(1) rotate(0.001deg);
}

.fha-upgrades_more-label {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  font-size: var(--text--size-small);
  font-weight: var(--font--weight-medium);
  color: var(--color--ink-soft);
  transition: color 0.4s var(--ease--main);
}

.fha-upgrades_card:hover .fha-upgrades_more-label {
  color: var(--color--brand);
}

.fha-upgrades_more-icon {
  font-size: 1.1em;
  line-height: 1;
}


/* ============ HINT BRACKETS — global component ============ */
/* From "Card Hover + Modal Popup": two angle brackets rotated 45° that pull
   apart on card hover — the "this opens a pop-up, not a page" affordance.
   Timings/eases kept from the resource; colors/radius are ours. Works inside
   any [data-modal-card]. */

.hint-brackets {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25em;
  height: 2.25em;
  flex: none;
  border: var(--border-width--main) solid var(--color--border);
  border-radius: var(--radius--small);
  color: var(--color--ink-soft);
  transition: color 0.4s var(--ease--main), border-color 0.4s var(--ease--main);
}

.hint-brackets_icon {
  display: flex;
  align-items: center;
  transform: rotate(-45deg);
}

.hint-brackets_bracket {
  width: 0.9em;
  height: 0.9em;
  flex: none;
  transition: transform 0.4s var(--ease--main);
}

/* Rest state sits slightly open so the affordance reads at a glance */
.hint-brackets_bracket.is--a { transform: translateX(-0.05em); }
.hint-brackets_bracket.is--b { transform: translateX(0.05em); }

[data-modal-card]:hover .hint-brackets,
[data-modal-card]:focus-visible .hint-brackets {
  color: var(--color--brand);
  border-color: color-mix(in srgb, var(--color--brand) 45%, transparent);
}

[data-modal-card]:hover .hint-brackets_bracket.is--a,
[data-modal-card]:focus-visible .hint-brackets_bracket.is--a { transform: translateX(-0.26em); }

[data-modal-card]:hover .hint-brackets_bracket.is--b,
[data-modal-card]:focus-visible .hint-brackets_bracket.is--b { transform: translateX(0.26em); }

.hint-brackets.is--overlay {
  position: absolute;
  top: 1em;
  right: 1em;
  z-index: 2;
  background-color: var(--color--surface-2);
}


/* ============ MODAL — global component ============ */
/* Site-wide pop-up shell (one instance, outside the Barba container). Populated
   from whichever [data-modal-card] was clicked — content lives once, on the
   card, so it stays consistent across pages. Panel has margins top + sides and
   sits flush with the viewport bottom: a page-within-a-page, per the resource. */

.modal {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: none;
}

.modal.is--active {
  display: block;
}

.modal_overlay {
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--color--ink) 55%, transparent);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  opacity: 0; /* animated by GSAP */
}

.modal_panel {
  position: absolute;
  inset: 2rem 2rem 0;
  background-color: var(--color--surface);
  border-radius: var(--radius--small) var(--radius--small) 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  opacity: 0; /* animated by GSAP */
}

.modal_close {
  position: fixed;
  top: 3.25rem;
  right: 3.25rem;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75em;
  height: 2.75em;
  border: var(--border-width--main) solid var(--color--border);
  border-radius: var(--radius--small);
  background-color: var(--color--surface-2);
  color: var(--color--ink);
  cursor: pointer;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.modal_close:hover {
  color: var(--color--brand);
  border-color: color-mix(in srgb, var(--color--brand) 45%, transparent);
}

.modal_close svg {
  width: 1em;
  height: 1em;
}

.modal_inner {
  max-width: var(--max-width--small);
  margin: 0 auto;
  padding: calc(var(--space--section-small) * 1.1) var(--site--margin) var(--space--section-large);
  display: flex;
  flex-flow: column;
  align-items: flex-start;
  gap: calc(var(--site--gutter) * 1.5);
}

.modal_media {
  width: 100%;
  aspect-ratio: 21 / 10;
  border-radius: var(--radius--small);
  overflow: hidden;
}

.modal_media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.modal_title {
  font-size: var(--text--size-h3);
  font-weight: var(--font--weight-thin);
  letter-spacing: var(--text--ls-tight);
  line-height: var(--text--lh-heading-loose);
  max-width: 20ch;
}

.modal_body p {
  font-size: var(--text--size-large);
  line-height: 1.6;
  color: var(--color--ink-soft);
  max-width: 60ch;
  text-wrap: pretty;
}

.modal_body ul {
  list-style: none;
  width: 100%;
  margin-top: calc(var(--site--gutter) * 1.25);
  columns: 2;
  column-gap: calc(var(--site--gutter) * 2.5);
}

.modal_body li {
  display: flex;
  gap: calc(var(--site--gutter) * 0.6);
  padding: 0.65rem 0;
  border-bottom: var(--border-width--main) solid var(--color--border);
  font-size: var(--text--size-main);
  break-inside: avoid;
}

.modal_body li::before {
  content: "✓";
  color: var(--color--brand-green);
  font-weight: var(--font--weight-medium);
  flex: none;
}

@media (max-width: 40.5625rem) {
  .modal_panel {
    inset: 1rem 1rem 0;
  }

  .modal_close {
    top: 2rem;
    right: 2rem;
  }

  .modal_body ul {
    columns: 1;
  }
}