/* ==========================================================================
   Justice Care Partners — Homepage
   Built from Figma file "Justice Care Partners" (Homepage + Design System pages).
   Tokens mirror the Figma variables; values switch to the Mobile mode < 768px.
   ========================================================================== */

/* ---------- Brand fonts (drop licensed files into assets/fonts/) ---------- */
@font-face {
  font-family: "Adobe Devanagari";
  src: local("Adobe Devanagari Bold"), local("AdobeDevanagari-Bold"),
       url("../assets/fonts/AdobeDevanagari-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: local("Neue Haas Unica Light"), local("NeueHaasUnica-Light"),
       url("../assets/fonts/NeueHaasUnica-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: local("Neue Haas Unica"), local("NeueHaasUnica-Regular"),
       url("../assets/fonts/NeueHaasUnica-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: local("Neue Haas Unica Medium"), local("NeueHaasUnica-Medium"),
       url("../assets/fonts/NeueHaasUnica-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Neue Haas Unica";
  src: local("Neue Haas Unica Black"), local("NeueHaasUnica-Black"),
       url("../assets/fonts/NeueHaasUnica-Black.woff2") format("woff2");
  font-weight: 900; font-style: normal; font-display: swap;
}

/* ---------- Tokens (Figma variables) ---------- */
:root {
  /* Color */
  --color-white: #ffffff;
  --color-navy-900: #1e4a6a;
  --color-navy-700: #2b5b85;
  --color-blue-500: #396fa4;
  --color-blue-100: #e6f0f7;
  --color-mint-300: #a0d8cf;
  --color-rose-500: #ee5aa2;
  --color-ink-900: #262c38;
  --color-gray-600: #5b6472;
  --color-gray-200: #dce3ea;
  --color-icon-light: #5fa8d2;
  --color-overlay-inverse-15: rgba(255, 255, 255, 0.15);
  --color-bg-tint: var(--color-blue-100);
  --color-text-brand: var(--color-navy-900);
  --color-action-primary-hover: var(--color-navy-700);
  --color-action-secondary-hover: var(--color-blue-100);
  --color-border-focus: var(--color-icon-light);
  --gradient-brand: linear-gradient(150deg, var(--color-blue-500) 14.286%, var(--color-navy-900) 85.714%);

  /* Type families */
  --font-family-serif: "Adobe Devanagari", "Crimson Pro", Georgia, "Times New Roman", serif;
  --font-family-sans: "Neue Haas Unica", "Inter", "Helvetica Neue", Arial, sans-serif;

  /* Type scale — Desktop mode */
  --font-size-eyebrow: 20px;   --line-height-eyebrow: 28px;  --tracking-eyebrow: 6px;
  --font-size-display: 66px;   --line-height-display: 59px;
  --font-size-subhead: 34px;   --line-height-subhead: 36px;  --tracking-subhead: 3.4px;
  --font-size-h2: 58px;        --line-height-h2: 56px;
  --font-size-h3: 30px;        --line-height-h3: 32px;       --tracking-h3: 2.4px;
  --font-size-h4: 30px;        --line-height-h4: 34px;
  --font-size-body-lg: 22px;   --line-height-body-lg: 25px;
  --font-size-body: 20px;      --line-height-body: 28px;
  --font-size-feature: 20px;   --line-height-feature: 26px;
  --font-size-label: 16px;     --line-height-label: 20px;
  --font-size-caption: 14px;   --line-height-caption: 20px;
  --font-size-button: 18px;    --line-height-button: 18px;
  --font-size-button-compact: 16px; --line-height-button-compact: 16px;
  --font-size-button-sm: 16px; --line-height-button-sm: 20px;
  --font-size-card-name: 20px; --line-height-card-name: 26px;
  --font-size-card-title: 16px;--line-height-card-title: 22px;

  /* Spacing */
  --space-8: 8px; --space-12: 12px; --space-16: 16px; --space-20: 20px; --space-24: 24px;
  --space-32: 32px; --space-40: 40px; --space-48: 48px; --space-56: 56px; --space-64: 64px;
  --space-72: 72px; --space-80: 80px; --space-104: 104px; --space-120: 120px;

  /* Layout — Desktop mode */
  --layout-content-max-width: 1296px;
  --layout-page-margin: 72px;
  --layout-section-padding-y: 104px;
  --layout-section-padding-y-lg: 120px;
  --layout-grid-gap: 48px;
  --layout-column-gap: 80px;

  /* Radii */
  --radius-sm: 8px; --radius-md: 15px; --radius-lg: 20px; --radius-xl: 24px;
  --radius-feature: 144px; --radius-full: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-hover: 150ms;
}

/* Fluid step between tablet and full desktop */
@media (max-width: 1199px) {
  :root {
    --font-size-display: 56px; --line-height-display: 54px;
    --font-size-h2: 48px;      --line-height-h2: 50px;
    --layout-page-margin: 48px;
    --layout-column-gap: 56px;
    --layout-grid-gap: 32px;
  }
}

/* Mobile mode (< 768px) */
@media (max-width: 767px) {
  :root {
    --font-size-eyebrow: 15px;   --line-height-eyebrow: 22px;  --tracking-eyebrow: 3px;
    --font-size-display: 48px;   --line-height-display: 44px;
    --font-size-subhead: 22px;   --line-height-subhead: 26px;  --tracking-subhead: 2.2px;
    --font-size-h2: 38px;        --line-height-h2: 40px;
    --font-size-h3: 22px;        --line-height-h3: 26px;       --tracking-h3: 1.76px;
    --font-size-h4: 24px;        --line-height-h4: 28px;
    --font-size-body-lg: 18px;   --line-height-body-lg: 28px;
    --font-size-body: 17px;      --line-height-body: 28px;
    --font-size-feature: 18px;   --line-height-feature: 24px;
    --layout-page-margin: 20px;
    --layout-section-padding-y: 56px;
    --layout-grid-gap: 24px;
    --layout-column-gap: 32px;
  }
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0;
  background: var(--color-white);
  color: var(--color-ink-900);
  font-family: var(--font-family-sans);
  font-weight: 300;
  font-size: var(--font-size-body);
  line-height: var(--line-height-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
button { font: inherit; }

.skip-link {
  position: absolute; left: 16px; top: -48px; z-index: 100;
  padding: 10px 16px; background: var(--color-navy-900); color: var(--color-white);
  border-radius: var(--radius-sm); text-decoration: none;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 2px solid var(--color-border-focus); outline-offset: 2px; }

.container {
  width: 100%;
  max-width: calc(var(--layout-content-max-width) + 2 * var(--layout-page-margin));
  margin-inline: auto;
  padding-inline: var(--layout-page-margin);
}
.section { padding-block: var(--layout-section-padding-y); }

/* ---------- Typography ---------- */
.eyebrow {
  font-family: var(--font-family-sans); font-weight: 400;
  font-size: var(--font-size-eyebrow); line-height: var(--line-height-eyebrow);
  letter-spacing: var(--tracking-eyebrow); text-transform: uppercase;
}
.display {
  font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-display); line-height: var(--line-height-display);
}
.subhead {
  font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-subhead); line-height: var(--line-height-subhead);
  letter-spacing: var(--tracking-subhead); text-transform: uppercase;
}
.h2 {
  font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-h2); line-height: var(--line-height-h2);
}
.h3 {
  font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-h3); line-height: var(--line-height-h3);
  letter-spacing: var(--tracking-h3); text-transform: uppercase;
  color: var(--color-navy-900);
}
.body { font-size: var(--font-size-body); line-height: var(--line-height-body); font-weight: 300; }
.body-lg { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: 300; }
.feature-text {
  font-weight: 500; font-size: var(--font-size-feature); line-height: var(--line-height-feature);
}
.text-blue { color: var(--color-blue-500); }
.text-white { color: var(--color-white); }
.text-center { text-align: center; }

.divider { border: 0; height: 1px; background: var(--color-gray-200); margin: 0; }

/* ---------- Buttons (Design System › Button) ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  padding: var(--space-16) var(--space-32);
  border: 1.5px solid transparent; border-radius: var(--radius-full);
  font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-button); line-height: var(--line-height-button);
  letter-spacing: 1.08px; text-transform: uppercase; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--duration-hover) ease-out, border-color var(--duration-hover) ease-out, color var(--duration-hover) ease-out;
}
.btn > span { padding-top: 0.12em; } /* optical centering for serif caps */
.btn__icon { width: 24px; height: 24px; flex: none; }
.btn--compact {
  gap: 10px; padding: 13px 22px;
  font-size: var(--font-size-button-compact); line-height: var(--line-height-button-compact);
  letter-spacing: 0.96px;
}
.btn--compact .btn__icon { width: 18px; height: 18px; }
.btn--block { width: 100%; }

.btn--primary { background: var(--color-navy-900); color: var(--color-white); }
.btn--primary:hover { background: var(--color-action-primary-hover); }

.btn--secondary { background: var(--color-white); border-color: var(--color-mint-300); color: var(--color-navy-900); }
.btn--secondary:hover { background: var(--color-action-secondary-hover); border-color: var(--color-navy-700); }

.btn--outline-light { background: transparent; border-color: var(--color-mint-300); color: var(--color-white); }
.btn--outline-light:hover { background: var(--color-overlay-inverse-15); }

.btn--text-dark { background: transparent; border-color: var(--color-mint-300); color: var(--color-navy-900); }
.btn--text-dark:hover { background: var(--color-bg-tint); }

.btn--form {
  background: var(--color-navy-900); color: var(--color-white);
  padding: 13px 36px;
  font-family: var(--font-family-sans); font-weight: 400;
  font-size: var(--font-size-button-sm); line-height: var(--line-height-button-sm); letter-spacing: 0.64px;
}
.btn--form > span { padding-top: 0; }
.btn--form:hover { background: var(--color-action-primary-hover); }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-blue-500);
  transition: box-shadow 200ms ease-out;
}
.site-header.is-scrolled { box-shadow: 0 2px 12px rgba(30, 74, 106, 0.12); }
.site-header__bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--space-16) var(--space-48);
  border-bottom: 1px solid var(--color-gray-200);
}
.site-header__logo img { width: 145px; height: auto; }
.site-header__nav { display: flex; align-items: center; gap: var(--space-24); }
.site-header__mobile-actions { display: none; align-items: center; gap: var(--space-12); }
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; padding: 0; cursor: pointer; color: var(--color-white);
}
.icon-btn--call { width: 44px; height: 44px; border-radius: var(--radius-full); background: var(--color-navy-700); }
.icon-btn--menu { width: 44px; height: 44px; }
.icon-btn--menu .icon-close { display: none; }
.icon-btn--menu[aria-expanded="true"] .icon-open { display: none; }
.icon-btn--menu[aria-expanded="true"] .icon-close { display: block; }
.mobile-menu {
  display: grid; gap: var(--space-12);
  padding: var(--space-20); background: var(--color-blue-500);
  border-bottom: 1px solid var(--color-gray-200);
}
.mobile-menu[hidden] { display: none; }

/* ---------- Hero ---------- */
.hero { background: var(--color-blue-500); color: var(--color-white); padding-top: var(--space-56); }
.hero__row { display: flex; gap: var(--space-72); align-items: flex-start; }
.hero__copy { flex: 0 1 639px; display: flex; flex-direction: column; gap: var(--space-20); }
.hero__body { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: 300; }

.form-card {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-32);
  padding: var(--space-40); background: var(--color-white);
  border-radius: var(--radius-xl); color: var(--color-ink-900);
  position: relative; z-index: 2;
}
.form-card__title {
  max-width: 444px; text-align: center; color: var(--color-blue-500);
  font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-h4); line-height: var(--line-height-h4);
}
.form-card__form { width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--space-32); }
.form-grid { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-20); }
.field { display: flex; flex-direction: column; gap: var(--space-8); }
.field label { font-weight: 400; font-size: var(--font-size-label); line-height: var(--line-height-label); }
.field input {
  height: 52px; width: 100%; padding: 0 14px;
  border: 1.5px solid var(--color-gray-200); border-radius: var(--radius-sm);
  background: var(--color-white); color: var(--color-ink-900);
  font: 400 16px/1 var(--font-family-sans);
  transition: border-color var(--duration-hover) ease-out;
}
.field input:focus { outline: none; border: 2px solid var(--color-border-focus); padding: 0 13.5px; }
.field input[aria-invalid="true"] { border: 2px solid var(--color-rose-500); }
.field__error { color: #b8246c; font-size: var(--font-size-caption); line-height: var(--line-height-caption); font-weight: 400; }
.form-card__success { color: var(--color-navy-900); font-weight: 400; text-align: center; }

/* ---------- Hero image ---------- */
.hero-image { position: relative; height: 612px; overflow: hidden; }
.hero-image__photo { width: 100%; height: 100%; object-fit: cover; }
.hero-image__gradient {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgb(57,111,164) 0%, rgba(57,111,164,.75) 5.37%, rgba(57,111,164,.5) 8.37%, rgba(57,111,164,.25) 11.38%, rgba(57,111,164,.11) 13.27%, rgba(57,111,164,0) 15.17%);
}
.wave { position: absolute; left: 0; width: 100%; height: 78px; pointer-events: none; }
.wave--bottom { bottom: -1px; }

/* ---------- Features ---------- */
.features { padding-block: var(--space-72); }
.features__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--layout-grid-gap); }
.feature { display: flex; flex-direction: column; gap: var(--space-20); }
.feature img { width: 60px; height: 60px; }
.feature p {
  color: var(--color-navy-900); font-weight: 500;
  font-size: var(--font-size-feature); line-height: var(--line-height-feature);
}

/* ---------- Differentiator ---------- */
.differentiator__row { display: flex; gap: var(--layout-column-gap); align-items: stretch; }
.differentiator__media { flex: 0 0 440px; border-radius: var(--radius-lg); overflow: hidden; }
.differentiator__media img { width: 100%; height: 100%; object-fit: cover; }
.differentiator__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.label-heading { width: 100%; padding-bottom: 14px; border-bottom: 1px solid var(--color-gray-200); }
.check-columns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-40); width: 100%; margin-bottom: 4px; }
.check-list { display: flex; flex-direction: column; gap: var(--space-24); }
.check-list--tight { gap: 18px; }
.check-item {
  position: relative; padding-left: 46px; min-height: 30px;
  font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: 300;
  color: var(--color-ink-900);
}
.check-item::before {
  content: ""; position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  background: url("../assets/icons/check-blue.svg") center / contain no-repeat;
}
.check-list--light .check-item { color: var(--color-white); }
.check-list--light .check-item::before { background-image: url("../assets/icons/check-mint.svg"); }

/* ---------- Photo row ---------- */
.photo-row { padding-block: 49px; }
.photo-row__track { display: flex; justify-content: center; gap: var(--space-16); padding-inline: var(--space-24); }
.photo-row__track img { flex: 1 1 0; min-width: 0; max-width: 338px; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-md); }

/* ---------- Video ---------- */
.video-section__row { display: flex; align-items: center; gap: var(--space-64); }
.video-section__copy { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--space-20); }
.video-poster {
  flex: 0 0 560px; height: 340px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  padding: 0 0 64px; border: 0; border-radius: var(--radius-lg); cursor: pointer;
  background: linear-gradient(141deg, var(--color-blue-500) 14.286%, var(--color-navy-900) 85.714%);
  color: var(--color-white);
}
.video-poster__logo, .video-poster__play { flex-shrink: 0; }
.video-poster__logo { width: 170px; height: 60px; margin-bottom: 24px; }
.video-poster__play { width: 78px; height: 78px; transition: transform var(--duration-hover) ease-out; }
.video-poster:hover .video-poster__play { transform: scale(1.06); }
.video-poster__caption { font-weight: 400; font-size: var(--font-size-caption); line-height: var(--line-height-caption); }

.video-modal { width: min(960px, 92vw); padding: 0; border: 0; border-radius: var(--radius-lg); background: #000; overflow: visible; }
.video-modal::backdrop { background: rgba(20, 30, 45, 0.8); }
.video-modal__frame { aspect-ratio: 16 / 9; }
.video-modal__frame iframe { width: 100%; height: 100%; border: 0; border-radius: var(--radius-lg); }
.video-modal__close {
  position: absolute; top: -48px; right: 0; width: 40px; height: 40px;
  border: 0; border-radius: var(--radius-full); background: var(--color-white); color: var(--color-navy-900);
  font-size: 28px; line-height: 1; cursor: pointer;
}

/* ---------- On-site care (photo overlaps panel) ---------- */
.onsite { position: relative; padding-top: 55px; min-height: 790px; }
.onsite__panel { position: relative; background: var(--gradient-brand); }
.onsite__content { padding-top: var(--space-104); padding-bottom: 86px; }
.onsite__copy { width: min(601px, calc(50% - 40px)); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; }
.wave--panel { bottom: -1px; height: 86px; }
.wave--flip { transform: scaleX(-1); }
.onsite__photo {
  position: absolute; right: 0; top: 18px;
  width: 50%; max-width: 720px; height: 732px; object-fit: cover;
  border-radius: var(--radius-feature) 0 0 var(--radius-feature);
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

/* ---------- Step-down ---------- */
.stepdown { background: var(--color-blue-100); }
.stepdown__inner { display: flex; flex-direction: column; align-items: center; gap: var(--space-64); }
.stepdown__heading { display: flex; flex-direction: column; align-items: center; gap: var(--space-32); text-align: center; }
.stepdown__heading .h2 { max-width: 718px; }
.icon-items { width: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--layout-grid-gap); }
.icon-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); text-align: center; }
.icon-item img { height: 121px; width: auto; }
.icon-item p { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: 300; }

/* ---------- Compliance (photo overlaps panel) ---------- */
.compliance { position: relative; background: var(--color-blue-100); padding-top: 48px; }
.compliance__panel { background: var(--color-white); }
.compliance__content { display: flex; justify-content: flex-end; padding-top: var(--space-104); padding-bottom: var(--space-24); min-height: 648px; }
.compliance__copy { width: min(581px, calc(50% - 40px)); display: flex; flex-direction: column; align-items: flex-start; gap: 22px; align-self: center; }
.compliance__wave { position: relative; height: 86px; background: var(--color-white); }
.compliance__wave .wave { bottom: -1px; height: 86px; }
.compliance__photo {
  position: absolute; left: 0; top: 10px;
  width: 50%; max-width: 720px; height: 717px; object-fit: cover;
  border-radius: 0 var(--radius-feature) var(--radius-feature) 0;
  box-shadow: 0 2px 18px rgba(0, 0, 0, 0.3);
}

/* ---------- What we provide ---------- */
.treat { background: var(--color-bg-tint); }
.treat__row { display: flex; align-items: center; justify-content: space-between; gap: var(--layout-column-gap); }
.treat__copy { flex: 0 1 798px; min-width: 0; display: flex; flex-direction: column; gap: var(--space-32); }
.treat__heading { display: flex; flex-direction: column; gap: 7px; }
.treat__list { display: flex; flex-direction: column; gap: var(--space-24); }
.treat__lead {
  font-family: var(--font-family-sans); font-weight: 400;
  font-size: 28px; line-height: 36px; color: var(--color-text-brand);
}
.list-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 69px; }
.arrow-list { display: flex; flex-direction: column; gap: var(--space-16); }
.arrow-list li {
  position: relative; padding-left: 38px; min-height: 30px;
  font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: 300;
}
.arrow-list li::before {
  content: ""; position: absolute; left: 0; top: -2px; width: 30px; height: 30px;
  background: url("../assets/icons/list-arrow.svg") center / contain no-repeat;
}
.treat__cta { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-24); }
.treat__photo {
  flex: 0 0 384px; width: 384px; height: 534px; object-fit: cover;
  border-radius: var(--radius-md); box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.3);
}

/* ---------- Leadership ---------- */
.leadership { background: var(--color-blue-500); }
.leadership .h2 { margin-bottom: var(--space-48); }
.leadership__rows { display: flex; flex-direction: column; gap: var(--space-48); }
.leader-row { display: flex; justify-content: center; gap: var(--space-24); }
.leader-card {
  flex: 0 1 306px; min-height: 172px;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-8);
  padding: calc(36px + 12px) var(--space-24) 36px;
  background: var(--color-white); border: 1px solid var(--color-gray-200); border-radius: var(--radius-lg);
  box-shadow: 0 8px 12px rgba(31, 74, 107, 0.08); text-align: center;
}
.leader-row--four .leader-card { flex: 1 1 0; }
.leader-card__name {
  color: var(--color-navy-900); font-weight: 900;
  font-size: var(--font-size-card-name); line-height: var(--line-height-card-name);
}
.leader-card__title {
  color: var(--color-gray-600); font-weight: 400;
  font-size: var(--font-size-card-title); line-height: var(--line-height-card-title);
}

/* ---------- Getting started ---------- */
.getting-started { position: relative; background: var(--color-navy-900); padding-bottom: var(--layout-section-padding-y); }
/* Background photo under a navy overlay */
.getting-started::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(rgba(30, 74, 106, 0.4), rgba(30, 74, 106, 0.4)),
    url("../assets/images/inviting_community.webp") center / cover no-repeat;
}
.getting-started__wave { position: relative; z-index: 1; }
.getting-started__wave { width: 100%; height: 112px; }
.getting-started__inner { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--layout-column-gap); margin-top: var(--layout-column-gap); }
.getting-started__title { max-width: 864px; }
.steps { width: 100%; max-width: 1126px; display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-56); }
.step { display: flex; flex-direction: column; align-items: center; gap: var(--space-20); text-align: center; color: var(--color-white); }
.step img { height: 60px; width: auto; }
.step p { font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); font-weight: 300; }
.btn-group { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-16); }

/* ---------- Final CTA ---------- */
.final-cta {
  position: relative; overflow: hidden;
  background: linear-gradient(153.6deg, var(--color-blue-500) 14.286%, var(--color-navy-900) 85.714%);
  padding-block: var(--layout-section-padding-y-lg);
  min-height: 536px;
}
.final-cta__decor { position: absolute; left: 0; top: 22px; width: 100%; height: auto; pointer-events: none; }
.final-cta__copy { position: relative; max-width: calc(860px + 2 * var(--layout-page-margin)); display: flex; flex-direction: column; gap: var(--space-20); text-align: center; }
.final-cta__copy .body-lg { color: var(--color-blue-100); }

/* ---------- Footer ---------- */
.site-footer { background: var(--color-navy-900); border-top: 1px solid var(--color-mint-300); color: var(--color-white); }
.site-footer__inner { max-width: calc(1200px + 2 * var(--space-120)); margin-inline: auto; padding: var(--space-80) var(--space-120) 36px; display: flex; flex-direction: column; gap: var(--space-48); }
.site-footer__columns { display: flex; justify-content: space-between; gap: var(--space-48); }
.site-footer__brand { flex: 0 1 400px; display: flex; flex-direction: column; gap: var(--space-20); }
.site-footer__brand img { width: 220px; height: auto; }
.site-footer__tagline { font-weight: 500; font-size: var(--font-size-feature); line-height: var(--line-height-feature); }
.site-footer__contact { flex: 0 1 464px; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.site-footer__label {
  color: var(--color-mint-300); font-family: var(--font-family-serif); font-weight: 700;
  font-size: var(--font-size-button); line-height: var(--line-height-button); letter-spacing: 1.08px; text-transform: uppercase;
}
.site-footer__text { color: var(--color-blue-100); font-weight: 400; font-size: var(--font-size-body); line-height: var(--line-height-body); margin-bottom: 4px; }
.site-footer__divider { border: 0; height: 1px; background: var(--color-overlay-inverse-15); margin: 0; }
.site-footer__legal { color: var(--color-blue-100); font-weight: 400; font-size: var(--font-size-caption); line-height: var(--line-height-caption); }

/* ---------- Reveal motion ---------- */
.js [data-reveal], .js [data-reveal-group] > * {
  opacity: 0; transform: translateY(24px);
  transition: opacity 400ms ease-out, transform 400ms ease-out;
  transition-delay: var(--reveal-delay, 0ms);
}
.js .is-revealed[data-reveal], .js [data-reveal-group].is-revealed > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal], .js [data-reveal-group] > * { opacity: 1; transform: none; transition: none; }
  * { transition-duration: 0ms !important; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */

/* Tablet: 768–1023 — desktop layout, fluid columns */
@media (max-width: 1023px) {
  .features__grid { grid-template-columns: repeat(2, 1fr); }
  .site-header__bar { padding-inline: var(--layout-page-margin); }
  .hero__row { gap: var(--space-40); }
  .differentiator__media { flex-basis: 340px; }
  .video-poster { flex-basis: 420px; height: 280px; }
  .treat__photo { flex-basis: 300px; width: 300px; height: 440px; }
  .site-footer__inner { padding-inline: var(--layout-page-margin); }
  .leader-row, .leader-row--four { flex-wrap: wrap; }
  .leader-row--four .leader-card { flex: 0 1 306px; }
}

/* Stack two-column rows below 900px */
@media (max-width: 899px) {
  .hero__row { flex-direction: column; align-items: stretch; gap: var(--layout-column-gap); }
  .hero__copy { flex-basis: auto; }
  .form-card { margin-bottom: 0; }
  .hero { padding-bottom: var(--space-24); }
  .differentiator__row, .video-section__row, .treat__row { flex-direction: column; align-items: stretch; }
  .differentiator__media { flex-basis: auto; height: 300px; }
  .video-poster { flex-basis: auto; width: 100%; height: auto; aspect-ratio: 7 / 4; padding: 24px 0 40px; }
  .treat__row { align-items: center; }
  .treat__copy { flex-basis: auto; width: 100%; }

  /* Overlap sections: photo moves into flow, no overlap */
  .onsite { padding-top: 0; min-height: 0; display: flex; flex-direction: column;
            background: linear-gradient(180deg, var(--color-white) 140px, var(--color-blue-500) 140px); }
  .onsite__photo { position: static; order: -1; width: 100%; max-width: none; height: 280px; box-shadow: none; }
  .onsite__content { padding-top: var(--space-24); padding-bottom: 48px; }
  .onsite__copy { width: 100%; }
  .wave--panel { height: 24px; }

  .compliance { padding-top: 0; display: flex; flex-direction: column; }
  .compliance__photo { position: static; order: -1; width: 100%; max-width: none; height: 280px; }
  .compliance__content { min-height: 0; padding-top: var(--space-24); justify-content: center; }
  .compliance__copy { width: 100%; }
  .compliance__wave { height: 24px; }
  .compliance__wave .wave { height: 24px; }
}

/* Mobile (< 768px) */
@media (max-width: 767px) {
  .site-header__bar { padding: var(--space-12) var(--space-20); min-height: 80px; }
  .site-header__nav { display: none; }
  .site-header__mobile-actions { display: flex; }

  .hero { padding-top: var(--space-24); }
  .hero__body { font-weight: 400; }
  .form-card { padding: var(--space-40); }
  .form-grid { grid-template-columns: 1fr; gap: 10px var(--space-20); }

  .hero-image { height: 260px; }
  .wave--bottom { height: 24px; }

  .features { padding-block: var(--space-24); }
  .features__grid { grid-template-columns: 1fr; }
  .feature { align-items: center; text-align: center; }

  .check-columns { grid-template-columns: 1fr; }

  .photo-row { padding-block: var(--space-24); }
  .photo-row__track img:not(:first-child) { display: none; }
  .photo-row__track img { max-width: 280px; }

  .icon-items { grid-template-columns: 1fr; gap: var(--space-24); }
  .stepdown__inner { gap: var(--space-32); }

  .compliance__copy { align-items: center; }
  .compliance__copy .h2, .compliance__copy .body { align-self: stretch; }

  .treat__row { gap: var(--space-32); }
  .treat__heading .h3 { font-size: 22px; }
  .treat__lead { font-size: 22px; line-height: 28px; }
  .list-columns { grid-template-columns: 1fr; gap: var(--space-16); }
  .treat__cta { align-items: center; text-align: center; }
  .treat__photo { flex-basis: auto; width: 100%; height: 360px; }

  /* Leadership: horizontal scroll with snap + peek (per annotation) */
  .leadership .container { padding-inline: 0; }
  .leadership .h2 { padding-inline: var(--layout-page-margin); margin-bottom: var(--space-32); }
  .leadership__rows {
    flex-direction: row; gap: var(--space-16);
    overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--layout-page-margin);
    padding: 4px var(--layout-page-margin) 20px; -webkit-overflow-scrolling: touch;
  }
  .leader-row, .leader-row--four { display: contents; }
  .leader-card, .leader-row--four .leader-card { flex: 0 0 306px; max-width: 80vw; height: 172px; scroll-snap-align: start; }

  .getting-started__wave { height: 26px; }
  .getting-started__inner { margin-top: var(--space-24); }
  .steps { grid-template-columns: 1fr; gap: var(--space-32); }
  .btn-group { flex-direction: column; width: 100%; }
  .btn-group .btn { width: 100%; }

  .final-cta { padding-block: 72px; min-height: 328px; }

  .site-footer { border-top-color: var(--color-blue-500); }
  .site-footer__inner { padding: var(--space-56) var(--space-20) 28px; gap: 36px; }
  .site-footer__columns { flex-direction: column; gap: 36px; }
  .site-footer__brand { flex-basis: auto; }
  .site-footer__brand img { width: 190px; }
  .site-footer__tagline { font-weight: 400; font-size: var(--font-size-body-lg); line-height: var(--line-height-body-lg); }
  .site-footer__contact { flex-basis: auto; width: 100%; }
  .site-footer__text { font-size: var(--font-size-label); line-height: var(--line-height-label); }
  .site-footer__btn { width: 100%; }
  .site-footer__btn .btn__icon { display: none; }
}