/* ==========================================================================
   Novinway — design tokens
   Colour source of truth: Novinway Brand Book 2026 (BRAND.md).
   BOOK values are verbatim. DERIVED values are computed from a BOOK value by a
   stated mix or HSL adjustment, covered by p10: "Tints and shades may be used
   alongside core and accent colors." Every pairing used here clears WCAG AA.
   ========================================================================== */

:root {
  /* ---- Core brand (BOOK p10) ---- */
  --navy:              #1B2A4A;
  --coral:             #E8998D;   /* the COMPANY accent, not a service */

  /* ---- Accent (BOOK p10) ---- */
  --paper:             #FDF8F5;
  --paper-warm:        #FFFDF7;
  --coral-light:       #F2B5AC;
  --sage:              #7A9E8A;
  --periwinkle:        #A7BDFF;
  --slate:             #4A5568;
  --slate-light:       #A2AAB7;

  /* ---- Service lanes (BOOK p11) ---- */
  --respite:           #A7BDFF;        --respite-deep:     #6B8FD4;
  --navigation:        #7A9E8A;        --navigation-deep:  #5C7D6A;

  /* ---- DERIVED · text darks, AA on every ground they touch ---- */
  --coral-ink:         #9A4538;
  --respite-ink:       #4162A2;
  --navigation-ink:    #455E50;

  /* ---- DERIVED · solid fields, white body text clears AA ---- */
  --coral-field:       #B04434;
  --respite-field:     #3765BE;
  --navigation-field:  #516E5E;

  /* ---- DERIVED · on-dark tints, AA on navy ---- */
  --coral-on-dark:     #F2B5AC;
  --sage-light:        #A7BFB2;
  --periwinkle-light:  #B9CAFF;

  /* ======================================================================
     THE SURFACE STACK — three layers, 6.4 L* points apart.
     The card is LIGHTER than the ground; the panel is DARKER than it.
     That inversion is what makes elevation read without a heavy shadow,
     and it replaces dark bands as the section-grouping device.
     ====================================================================== */
  --card:              #ffffff;   /* L* 100.0 */
  --ground:            #FDF8F5;   /* L*  97.9 */
  --panel:             #EFECEC;   /* L*  93.6 */
  --panel-respite:     #EBEBF7;   /* L*  93.4 — Care */
  --panel-navigation:  #EDEDE8;   /* L*  93.6 — Navigation */
  --panel-coral:       #FAE9E5;   /* L*  93.6 — company */
  --paper-2:           var(--paper-warm);
  --respite-mist:      var(--panel-respite);
  --navigation-mist:   var(--panel-navigation);

  /* ---- DERIVED · neutrals ---- */
  --ink:               var(--navy);
  --ink-deep:          #141E35;
  --ink-deepest:       #0D1527;
  --muted:             #616B7D;
  --rule:              #DADADD;
  --rule-strong:       #BDC1CA;
  --surface:           #ffffff;

  /* ======================================================================
     ELEVATION — the z-axis the site had none of.
     Brand book p8 sanctions this: "A light shadow may be added to the icon."
     ====================================================================== */
  --lift-1: 0 1px 2px rgba(27,42,74,.05), 0 10px 24px -14px rgba(27,42,74,.28);
  --lift-2: 0 1px 2px rgba(27,42,74,.06), 0 18px 40px -20px rgba(27,42,74,.40);
  --lift-3: 0 2px 4px rgba(27,42,74,.07), 0 30px 64px -26px rgba(27,42,74,.52);

  /* ======================================================================
     TYPE SCALE — eight steps, ~1.26 ratio. Was 23 arbitrary sizes.
     Every step is visibly different from its neighbours.
     ====================================================================== */
  --t-caption:    0.8125rem;  /* 13 — ALBERT SANS BOLD caps, per BOOK p13 */
  --t-body:       1rem;       /* 16 */
  --t-lede:       1.125rem;   /* 18 */
  --t-card:       1.375rem;   /* 22 */
  --t-h3:         1.75rem;    /* 28 */
  --t-h2:         2.25rem;    /* 36 */
  --t-h1:         clamp(2.75rem, 3.25vw, 3rem); /* 44–48, fluid on desktop */
  --t-statement:  3.125rem;   /* 50 — compact full-width statement */
  --t-section:    1.375rem;   /* 22 — compact section statement */

  /* ---- Line heights, four values, was thirteen ---- */
  --lh-tight:  1.06;
  --lh-snug:   1.28;
  --lh-body:   1.62;
  --lh-loose:  1.7;

  /* ======================================================================
     SPACING — three deliberate densities. Was one value used 18 times.
     ====================================================================== */
  --pad-tight: 48px;
  --pad:       82px;
  --pad-wide:  120px;
  --gutter:    48px;
  --shell:     1240px;
  --edge:      max(var(--gutter), calc(50vw - var(--shell) / 2));

  /* ---- Radii — matches the brand book's own card geometry ---- */
  --r-sm: 8px;    /* buttons, chips  */
  --r:    14px;   /* small cards     */
  --r-lg: 22px;   /* cards, photos   */
  --r-xl: 28px;   /* panels          */

  --display: "Wix Madefor Display", "Avenir Next", "Segoe UI", sans-serif;
  --text:    "Albert Sans", "Avenir Next", "Segoe UI", sans-serif;
  --chan:    var(--rule-strong);
  --focus:   var(--navy);
}

/* Tablet — three roles step down. Nothing else moves. */
@media (max-width: 980px) {
  :root {
    --t-statement: 2.875rem;  /* 46 */
    --t-h1:        2.75rem;   /* 44 */
    --t-h2:        2.125rem;  /* 34 */
    --t-h3:        1.625rem;  /* 26 */
    --pad-wide:    96px;
    --pad:         68px;
    --pad-tight:   42px;
    --gutter:      30px;
  }
}

/* Phone */
@media (max-width: 720px) {
  :root {
    --t-statement: 2.125rem;  /* 34 */
    --t-h1:        2.375rem;  /* 38 */
    --t-h2:        1.875rem;  /* 30 */
    --t-h3:        1.5rem;    /* 24 */
    --t-card:      1.3125rem; /* 21 */
    --t-lede:      1.0625rem; /* 17 */
    --pad-wide:    72px;
    --pad:         52px;
    --pad-tight:   34px;
    --gutter:      22px;
  }
}

/* ========================================================================
   SITE-WIDE CHAPTER RHYTHM
   Backgrounds group related chapters. Cards remain reserved for discrete
   choices, people, plans, and self-contained tools.
   ======================================================================== */

.band--cool { background: #E8EAF0; }
.band--care-mist { background: var(--panel-respite); }
.band--navigation-mist { background: var(--panel-navigation); }
.band--human { background: #F1EEF0; }

.band--cool + .band--cool,
.band--care-mist + .band--care-mist,
.band--navigation-mist + .band--navigation-mist,
.band--human + .band--human { border-top-color: transparent; }

.band--cool > .shell > .panel-block,
.band--care-mist > .shell > .panel-block,
.band--navigation-mist > .shell > .panel-block,
.band--ink > .shell > .panel-block {
  padding: 0;
  border-radius: 0;
  background: transparent;
}

.band--cool .card,
.band--care-mist .card,
.band--navigation-mist .card,
.band--human .person,
.band--human .quote-feature,
.band--cool .role {
  border-color: transparent;
  box-shadow: var(--lift-1);
}

.band--proof-rail {
  padding: clamp(42px, 5vw, 64px) 0;
  border-top: 0;
}
.band--proof-rail .section-kicker {
  max-width: none;
  margin-bottom: clamp(26px, 3vw, 38px);
  color: #fff;
  font-size: var(--t-h3);
}
.band--proof-rail .tokens { gap: 0; }
.band--proof-rail .token {
  min-height: 0;
  padding: 0 clamp(22px, 3vw, 36px);
  border: 0;
  border-left: 1px solid rgba(255,255,255,.22);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.band--proof-rail .token:first-child { padding-left: 0; border-left: 0; }
.band--proof-rail .token:last-child { padding-right: 0; }
.band--proof-rail .token h3 { color: #fff; }
.band--proof-rail .token p { color: rgba(255,255,255,.76); }

.band--statement-proof { padding-block: clamp(58px, 7vw, 92px); }
.band--statement-proof .sec-intro p,
.band--statement-proof .cols p,
.band--statement-proof .split-copy p { color: rgba(255,255,255,.78); }
.band--statement-proof .cols article { border-color: rgba(255,255,255,.24); }
.band--statement-proof .cols h3 { color: #fff; }

.band--chapter-bridge { padding-block: clamp(40px, 5vw, 64px); }

/* The one strong action color remains legible on white inline CTAs. */
.inline-cta .btn {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--navy);
}
.inline-cta .btn:hover { background: var(--coral-light); border-color: var(--coral-light); }

/* Current-page and mobile navigation must not override the CTA treatment. */
.nav-desktop > a.nav-cta[aria-current="page"] {
  background: var(--coral);
  color: var(--navy);
}
.nav-panel-inner > a.btn {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--navy);
}

/* FAQ groups are chapters even though search treats them as one collection. */
.band--faq-chapters { padding-block: var(--pad-tight) 0; overflow: hidden; }
.band--faq-chapters .qa-group {
  position: relative;
  margin: 0;
  padding: var(--pad) 0;
}
.band--faq-chapters .qa-group + .qa-group { border-top: 1px solid var(--rule); }
.band--faq-chapters #care-services {
  background: var(--panel-respite);
  box-shadow: 0 0 0 100vmax var(--panel-respite);
  clip-path: inset(0 -100vmax);
}
.band--faq-chapters #navigation-services {
  background: var(--panel-navigation);
  box-shadow: 0 0 0 100vmax var(--panel-navigation);
  clip-path: inset(0 -100vmax);
}
.band--faq-chapters #using-both-services,
.band--faq-chapters #pricing-and-logistics {
  background: #E8EAF0;
  box-shadow: 0 0 0 100vmax #E8EAF0;
  clip-path: inset(0 -100vmax);
}
.band--faq-chapters #using-both-services + #pricing-and-logistics { border-top-color: rgba(27,42,74,.12); }

@media (max-width: 720px) {
  .hero--image .hero-grid { grid-template-columns: 1fr; }
  .hero--image .hero-media img { object-position: var(--pos-m, center top); }
  .band--proof-rail .tokens { grid-template-columns: 1fr; }
  .band--proof-rail .token,
  .band--proof-rail .token:first-child,
  .band--proof-rail .token:last-child {
    padding: 20px 0;
    border-left: 0;
    border-top: 1px solid rgba(255,255,255,.2);
  }
  .band--proof-rail .token:first-child { border-top: 0; padding-top: 0; }
  .band--proof-rail .token:last-child { padding-bottom: 0; }
  .band--faq-chapters .qa-group { padding-block: var(--pad); }
}
@font-face {
  font-family: "Albert Sans";
  src: url("./fonts/albert-sans-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("./fonts/albert-sans-italic-latin.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Wix Madefor Display";
  src: url("./fonts/wix-madefor-display-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 500 800;
  font-display: swap;
}

/* ==========================================================================
   Base
   Typography follows Brand Book p13:
     Wix Madefor Display Extra Bold  -> headings
     Wix Madefor Display Bold        -> subheadings
     Albert Sans Bold (sentence)     -> section headers, CTAs
     Albert Sans Regular             -> body
     ALBERT SANS BOLD (caps)         -> captions
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 92px; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
body.nav-open { overflow: hidden; }

img, picture, svg, iframe, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; }
li { list-style: none; }
table { border-collapse: collapse; width: 100%; }

h1, h2, h3, h4, h5 {
  margin: 0;
  font-family: var(--display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: -.03em;
  text-wrap: balance;
  color: var(--ink);
}
h1 { font-size: var(--t-h1); letter-spacing: -.035em; }
h2 { font-size: var(--t-h2); font-weight: 750; }
h3 { font-size: var(--t-h3); line-height: 1.1; letter-spacing: -.026em; font-weight: 750; }
/* Subheadings are Bold, not Extra Bold - Brand Book p13. */
h4 { font-size: var(--t-card); font-weight: 700; line-height: 1.16; letter-spacing: -.022em; }
h5 { font-size: var(--t-body); font-weight: 700; letter-spacing: -.008em; }

:where(p, li) { text-wrap: pretty; }

:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 3px; }
.band--ink :focus-visible, .site-footer :focus-visible,
.statement :focus-visible, .cta :focus-visible { outline-color: var(--coral-light); }
::selection { background: var(--panel-coral); color: var(--ink); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: fixed; left: 16px; top: -100px; z-index: 400;
  background: var(--navy); color: var(--paper);
  padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 700; text-decoration: none;
  transition: top .15s ease;
}
.skip-link:focus { top: 14px; }

/* ---- shared type utilities ------------------------------------------- */

.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--slate); }
.body-copy { color: var(--slate); }
.prose-wide { max-width: 46em; }
.note { font-size: var(--t-caption); line-height: 1.62; color: var(--muted); }

/* Captions: ALBERT SANS BOLD, all caps - Brand Book p13. */
.caption {
  font-family: var(--text); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
/* ==========================================================================
   Layout — bands, the surface stack, the lane spine
   ========================================================================== */

.shell { width: min(var(--shell), 100% - (var(--gutter) * 2)); margin-inline: auto; }

/* --------------------------------------------------------------------------
   BANDS. Default is ground. Dark is now rationed: one statement per page
   plus the closing CTA, roughly 12% of the page instead of 41%.
   -------------------------------------------------------------------------- */

.band { position: relative; padding: var(--pad) 0; background: var(--ground); }
.band + .band { border-top: 1px solid var(--rule); }
.band--tight { padding: var(--pad-tight) 0; }
.band--wide  { padding: var(--pad-wide) 0; }
.band--flush { padding-top: 0; }

/* Ground-level tints, used sparingly for whole-band context. */
.band--panel            { background: var(--panel); }
.band--panel-respite    { background: var(--panel-respite); }
.band--panel-navigation { background: var(--panel-navigation); }
.band--panel-coral      { background: var(--panel-coral); }
.band--nav-mist         { background: var(--panel-navigation); }
.band--card             { background: var(--card); }

.band--ink {
  background: var(--navy);
  color: rgba(255,255,255,.82);
  --chan: rgba(255,255,255,.3);
  --rule: rgba(255,255,255,.15);
  --rule-strong: rgba(255,255,255,.28);
  --muted: rgba(255,255,255,.68);
  --slate: rgba(255,255,255,.78);
  --focus: var(--coral-light);
}
.band--ink :where(p, li, td, dd) { color: rgba(255,255,255,.8); }
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink h4, .band--ink h5 { color: #fff; }
.band--deep { background: var(--ink-deep); }

/* --------------------------------------------------------------------------
   THE PANEL. This is what replaced the dark band as the grouping device.
   A rounded, faintly tinted container; cards inside it read as lifted
   because the panel is darker than the page and the card is lighter.
   -------------------------------------------------------------------------- */

.panel-block {
  background: var(--panel);
  border-radius: var(--r-xl);
  padding: clamp(28px, 4vw, 56px);
}
.panel-block--respite    { background: var(--panel-respite); }
.panel-block--navigation { background: var(--panel-navigation); }
.panel-block--coral      { background: var(--panel-coral); }
.panel-block--flush      { padding: clamp(24px, 3vw, 40px); }

/* A lifted white card. The workhorse. */
.lift {
  background: var(--card);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.lift--2 { box-shadow: var(--lift-2); }
.lift--3 { box-shadow: var(--lift-3); }

/* --------------------------------------------------------------------------
   The lane spine — a plotted route down the left of load-bearing sections.
   -------------------------------------------------------------------------- */

.sec { position: relative; }
.sec::before {
  content: ""; position: absolute;
  left: 0; top: 8px; bottom: 0;
  width: 3px; border-radius: 3px;
  background: var(--chan);
  display: none;
}
.sec--respite    { --chan: var(--respite); }
.sec--navigation { --chan: var(--navigation); }
.sec--both::before {
  background: linear-gradient(180deg, var(--respite) 0%, var(--respite) 34%,
                                      var(--navigation) 72%, var(--navigation) 100%);
}
.sec-star { position: absolute; left: -7px; top: -6px; width: 17px; height: 17px; color: var(--chan); display: none; }
.sec--both > .sec-star { color: var(--respite); }
.sec--spine { padding-left: 42px; }
.sec--spine::before, .sec--spine > .sec-star { display: block; }

.js-plot .sec--spine::before {
  transform: scaleY(0); transform-origin: top;
  transition: transform .7s cubic-bezier(.22,.68,.3,1);
}
.js-plot .sec--spine.is-plotted::before { transform: scaleY(1); }
.js-plot .sec--spine > .sec-star {
  opacity: 0; transform: scale(.7) rotate(-14deg);
  transition: opacity .4s ease .12s, transform .5s cubic-bezier(.3,1.4,.5,1) .12s;
}
.js-plot .sec--spine.is-plotted > .sec-star { opacity: 1; transform: none; }

/* --------------------------------------------------------------------------
   Section heads
   -------------------------------------------------------------------------- */

.sec-head { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .85fr); gap: 20px 64px; align-items: start; margin-bottom: 40px; }
.sec-head--solo   { grid-template-columns: 1fr; }
.sec-head--solo .sec-title h2 { max-width: 17em; }
.sec-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
.sec-head--center .sec-title h2 { max-width: 20em; }
.sec-title h2 { max-width: 13em; }
.sec-intro { font-size: var(--t-lede); color: var(--slate); line-height: 1.5; padding-bottom: 4px; }
.sec-intro > * + * { margin-top: 16px; }
.sec-intro p { max-width: 34em; }
.sec-aside { margin-top: 20px; }
.sec-body > * + * { margin-top: 26px; }

/* --------------------------------------------------------------------------
   Eyebrow labels. Caption spec from Brand Book p13.
   Colour carries meaning: default = company, --respite = Care, --navigation = Nav.
   -------------------------------------------------------------------------- */

.label {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-family: var(--text);
  font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .13em; text-transform: uppercase;
  color: var(--coral-ink);
  line-height: 1.3;
}
.label--flush      { margin-bottom: 0; }
.label--respite    { color: var(--respite-ink); }
.label--navigation { color: var(--navigation-ink); }
.label--plain      { color: var(--muted); }
.band--ink .label,
.statement .label,
.cta .label                   { color: var(--coral-light); }
.band--ink .label--respite    { color: var(--periwinkle); }
.band--ink .label--navigation { color: var(--sage-light); }
.band--ink .label--plain      { color: rgba(255,255,255,.62); }

.tick { flex: 0 0 auto; width: 18px; height: 3px; border-radius: 3px; background: var(--coral); }
.label--respite .tick    { background: var(--respite); }
.label--navigation .tick { background: var(--navigation); }
.label--plain .tick      { background: var(--rule-strong); }
.tick--split { background: linear-gradient(90deg, var(--respite) 0 50%, var(--navigation) 50% 100%); }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

.js-plot .rise { opacity: 0; transform: translateY(16px); transition: opacity .55s ease, transform .55s cubic-bezier(.22,.68,.3,1); }
.js-plot .rise.is-plotted { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
  .js-plot .rise { opacity: 1; transform: none; }
}
/* ==========================================================================
   Chrome — announce bar, header, navigation, buttons, links

   The top of the site is one navy family: a deepest-navy announce strip,
   an ink-deep header, and a slightly lighter navy hero. The value steps keep
   the chrome distinct without introducing a white stripe above the hero.
   ========================================================================== */

.announce {
  background: var(--ink-deepest);
  color: rgba(255,255,255,.8);
  font-size: var(--t-caption);
  text-align: center;
}
.announce a {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  flex-wrap: wrap; padding: 9px 20px; min-height: 38px;
  text-decoration: none; color: rgba(255,255,255,.8);
}
.announce svg { width: 11px; height: 11px; color: var(--coral); flex: 0 0 auto; }
.announce strong { font-weight: 700; color: #fff; }
.announce-where { color: rgba(255,255,255,.62); }
.announce-cta {
  color: var(--coral-light); font-weight: 700;
  text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1.5px;
}
.announce a:hover .announce-cta { color: #fff; }

/* -------------------------------------------------------------------------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: var(--ink-deep);
  transition: box-shadow .2s ease;
}
.site-header.is-stuck { box-shadow: 0 12px 30px -18px rgba(13,23,41,.85); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 26px; height: 74px; }
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 36px; width: auto; }

.nav-desktop { display: flex; align-items: center; gap: 2px; }
.nav-desktop > a {
  position: relative;
  display: flex; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: var(--r-sm);
  color: rgba(255,255,255,.82);
  font-size: .9375rem; font-weight: 600;
  text-decoration: none; white-space: nowrap;
  transition: color .16s ease, background .16s ease;
}
.nav-desktop > a:hover { color: #fff; background: rgba(255,255,255,.09); }
.nav-desktop > a[aria-current="page"] { color: #fff; font-weight: 700; }
.nav-desktop > a[aria-current="page"]::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 1px;
  height: 3px; border-radius: 3px; background: var(--coral);
}
.nav-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--coral); flex: 0 0 auto; }
.nav-dot--respite    { background: var(--respite); }
.nav-dot--navigation { background: var(--navigation); }
.nav-desktop > a.nav-cta {
  margin-left: 12px;
  padding: 9px 16px;
  color: var(--navy);
  background: var(--coral);
  font-size: .875rem;
  font-weight: 700;
}
.nav-desktop > a.nav-cta:hover {
  color: var(--navy);
  background: var(--coral-light);
}

.nav-mobile { display: none; }
.nav-toggle {
  display: flex; align-items: center; gap: 10px;
  background: transparent; border: 1.5px solid rgba(255,255,255,.34);
  color: #fff; border-radius: var(--r-sm);
  padding: 9px 14px; font: inherit; font-size: var(--t-body); font-weight: 700;
  cursor: pointer;
}
.nav-toggle-icon { display: grid; gap: 3.5px; width: 17px; }
.nav-toggle-icon i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
.nav-toggle[aria-expanded="true"] .nav-toggle-icon i:nth-child(2) { opacity: .35; }

.nav-panel {
  position: absolute; left: 0; right: 0;
  background: var(--ink-deep);
  border-top: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 26px 44px -24px rgba(13,23,41,.85);
}
.nav-panel-inner { display: grid; gap: 2px; padding: 12px 0 22px; }
.nav-panel-inner > a {
  display: flex; align-items: center; gap: 11px;
  padding: 15px 2px; color: rgba(255,255,255,.9);
  text-decoration: none; font-size: var(--t-lede); font-weight: 600;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.nav-panel-inner > a[aria-current="page"] { color: #fff; font-weight: 800; }
.nav-panel-inner > a[aria-current="page"]::before {
  content: ""; flex: 0 0 auto; width: 3px; height: 19px;
  border-radius: 3px; background: var(--coral);
}
.nav-panel-inner > a.btn { justify-content: center; margin-top: 16px; border-bottom: 0; }
.nav-panel-inner > a.btn::before { display: none; }

/* --------------------------------------------------------------------------
   BUTTONS. Primary is coral with navy text (6.35:1). On paper the button
   needs its own navy border for non-text contrast; on navy the coral fill
   already reads at 6.35:1 against the field, so the border becomes coral.
   Brand Book p8's navy-on-coral pairing either way.
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  padding: 13px 24px;
  background: var(--coral); color: var(--navy);
  border: 1.5px solid var(--navy); border-radius: var(--r-sm);
  font-family: var(--text); font-size: 1rem; font-weight: 700;
  letter-spacing: -.004em; text-decoration: none; cursor: pointer;
  transition: transform .14s ease, background .16s ease, box-shadow .16s ease;
  white-space: nowrap;
}
.btn:hover {
  background: var(--coral-light);
  transform: translateY(-1px);
  box-shadow: 0 10px 22px -12px rgba(27,42,74,.5);
}
.btn:active { transform: none; }

.band--ink .btn, .statement .btn, .cta .btn, .inline-cta .btn, .combo .btn,
.site-header .btn, .nav-panel .btn { border-color: var(--coral); }
.band--ink .btn:hover, .statement .btn:hover, .cta .btn:hover,
.inline-cta .btn:hover, .combo .btn:hover,
.site-header .btn:hover, .nav-panel .btn:hover { border-color: var(--coral-light); }

.btn--ghost { background: transparent; color: var(--navy); border-color: var(--rule-strong); }
.btn--ghost:hover { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.band--ink .btn--ghost, .statement .btn--ghost, .cta .btn--ghost {
  color: #fff; background: transparent; border-color: rgba(255,255,255,.4);
}
.band--ink .btn--ghost:hover, .statement .btn--ghost:hover, .cta .btn--ghost:hover {
  background: #fff; color: var(--navy); border-color: #fff;
}
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--paper); border-color: var(--paper); }
.band--ink .btn--light, .statement .btn--light, .cta .btn--light { border-color: #fff; }
.band--ink .btn--light:hover, .statement .btn--light:hover,
.cta .btn--light:hover { border-color: var(--paper); }
.btn--navy { background: var(--navy); color: var(--paper); border-color: var(--navy); }
.btn--navy:hover { background: var(--ink-deep); border-color: var(--ink-deep); }
.btn--sm { padding: 10px 18px; font-size: var(--t-caption); }

.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; }

/* --------------------------------------------------------------------------
   Links
   -------------------------------------------------------------------------- */

.alink {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: var(--t-body);
  text-decoration: none; color: var(--navy);
  border-bottom: 2px solid var(--coral);
  padding-bottom: 3px;
  transition: gap .16s ease, border-color .16s ease;
}
.alink:hover { gap: 13px; border-bottom-color: var(--navy); }
.alink--respite    { border-bottom-color: var(--respite); }
.alink--navigation { border-bottom-color: var(--navigation); }
.band--ink .alink, .statement .alink { color: #fff; }
.band--ink .alink:hover, .statement .alink:hover { border-bottom-color: #fff; }

.inline-link {
  color: inherit; text-decoration: underline; text-underline-offset: 3px;
  text-decoration-thickness: 1.5px; text-decoration-color: var(--coral);
}
.inline-link:hover { text-decoration-color: currentColor; }

/* Six nav items plus the CTA outgrow the shell between the desktop layout and
   the 980px switch to the menu button. Tighten spacing only — the type scale
   stays at eight sizes. */
@media (min-width: 981px) and (max-width: 1120px) {
  .nav-desktop { gap: 0; }
  .nav-desktop > a { padding: 9px 8px; gap: 6px; }
  .nav-desktop > a[aria-current="page"]::after { left: 8px; right: 8px; }
  .nav-desktop > a.nav-cta { margin-left: 8px; padding: 8px 13px; }
  .header-inner { gap: 16px; }
}
/* ==========================================================================
   Heroes
   Image-led pages use a full-bleed photograph with a navy veil behind the
   copy. The photograph is part of the hero plane, never a separate card.
   Utility pages use the same navy field with a simpler type-only treatment.
   ========================================================================== */

.hero {
  position: relative;
  overflow: hidden;
  background: var(--navy);
  color: rgba(255,255,255,.82);
  --rule: rgba(255,255,255,.15);
  --rule-strong: rgba(255,255,255,.3);
}
.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr);
  align-items: center;
  gap: 0 clamp(32px, 5vw, 72px);
  width: min(var(--shell), 100% - (var(--gutter) * 2));
  margin-inline: auto;
}
.hero-copy { position: relative; z-index: 3; padding: var(--pad-wide) 0; max-width: 34rem; }
.hero--compact .hero-copy { padding: var(--pad) 0; }
.hero h1 { margin-bottom: 22px; color: #fff; }
.hero-lede { font-size: var(--t-lede); line-height: 1.5; color: rgba(255,255,255,.8); max-width: 30em; margin-bottom: 32px; }
.hero .label { color: var(--coral-on-dark); }
.hero .label--respite { color: var(--periwinkle-light); }
.hero .label--navigation { color: var(--sage-light); }
.hero .label--plain { color: rgba(255,255,255,.66); }
.hero .btn { border-color: var(--coral); }
.hero .alink { color: #fff; }
.hero .alink:hover { border-bottom-color: #fff; }

.hero-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 30px;
  font-family: var(--text); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.68);
}
.hero-meta svg { width: 12px; height: 12px; color: var(--coral); }

/* ---- full-bleed image hero ------------------------------------------- */

.hero--image { isolation: isolate; min-height: clamp(560px, 66vw, 720px); background: var(--navy); }
.hero--image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(27,42,74,1) 0%,
    rgba(27,42,74,1) 34%,
    rgba(27,42,74,.98) 40%,
    rgba(27,42,74,.86) 47%,
    rgba(27,42,74,.5) 55%,
    rgba(27,42,74,.14) 63%,
    rgba(27,42,74,0) 70%);
}
.hero--image .hero-grid {
  width: 100%;
  min-height: inherit;
  display: block;
}
.hero--image .hero-copy {
  width: min(34rem, calc(100% - (var(--gutter) * 2)));
  margin-left: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  padding: clamp(72px, 8vw, 118px) 0;
}
.hero--image.hero--compact .hero-copy { padding: clamp(64px, 7vw, 104px) 0; }
.hero--home .hero-copy {
  width: 40vw;
  max-width: 40vw;
  padding: clamp(64px, 7vw, 104px) 0;
}
.hero--home h1 {
  max-width: none;
  margin-bottom: 16px;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
}
.hero--home .hero-line { display: block; }
@media (min-width: 981px) {
  .hero--home .hero-line { white-space: nowrap; }
}
.hero--home .hero-lede { margin-bottom: 20px; line-height: 1.42; }
.hero--home .hero-meta { margin-top: 18px; }
.contact-intro {
  background: var(--ink);
  color: #fff;
  padding: clamp(38px, 4.5vw, 60px) 0 0;
}
.contact-intro .label { color: var(--coral-light); margin-bottom: 14px; }
.contact-intro h1 { max-width: 12em; color: #fff; font-size: clamp(2.25rem, 3.2vw, 2.75rem); }
.contact-intro-copy { max-width: 44em; margin-top: 16px; color: rgba(255,255,255,.82); font-size: var(--t-lede); line-height: 1.48; }
.contact-facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(30px, 4vw, 46px);
  border-top: 1px solid rgba(255,255,255,.18);
}
.contact-facts li {
  padding: 18px 24px 20px 0;
  color: rgba(255,255,255,.88);
  font-size: .9375rem;
  font-weight: 700;
}
.contact-facts li + li { padding-left: 24px; border-left: 1px solid rgba(255,255,255,.18); }
.hero-art { position: relative; align-self: center; padding: 40px 0; }
.hero--image .hero-art {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 38%;
  z-index: 0;
  height: auto;
  min-height: 100%;
  padding: 0;
  overflow: hidden;
}
.hero-media {
  position: relative;
  display: block;
  width: calc(100% + var(--edge));
  max-width: none;
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--lift-3);
  background: var(--panel);
}
.hero--image .hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  box-shadow: none;
}
.hero-media img {
  width: 100%; max-width: none; height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: var(--pos, center 38%);
  filter: saturate(1.02);
}
.hero--image .hero-media img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
}
.hero--tall .hero-media img { aspect-ratio: 1 / 1; }

/* ---- type-only hero, for utility pages -------------------------------- */

.hero--respite    { --chan: var(--respite); }
.hero--navigation { --chan: var(--navigation); }
.hero--type { border-bottom: 1px solid rgba(255,255,255,.14); }
.hero--type .hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); align-items: end; gap: 30px clamp(32px, 5vw, 64px); }
.hero--type .hero-copy { padding: var(--pad) 0 var(--pad-tight); max-width: none; }
.hero--type .hero-side { padding-bottom: var(--pad); }
.hero--type .hero-side .panel {
  color: var(--slate);
  --rule: #DADADD;
  --rule-strong: #BDC1CA;
  --muted: #616B7D;
}
.hero--type .hero-side .label { color: var(--coral-ink); }
.hero--type .hero-side .label--plain { color: var(--muted); }
.hero--type .hero-side .alink { color: var(--navy); }
.hero--type .hero-side .alink:hover { border-bottom-color: var(--navy); }

/* --------------------------------------------------------------------------
   Full-bleed photo strips. These fill the midrange the palette had nothing in.
   -------------------------------------------------------------------------- */

.strip { position: relative; overflow: hidden; background: var(--navy); }
.strip img { width: 100%; height: clamp(240px, 30vw, 420px); object-fit: cover; object-position: var(--pos, center 38%); }
.strip--short img { height: clamp(170px, 19vw, 260px); }
.strip--tall  img { height: clamp(300px, 38vw, 520px); }

.strip--quote img { filter: brightness(.58) saturate(.85); }
.strip--quote::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(27,42,74,.94) 0%, rgba(27,42,74,.86) 34%,
                           rgba(27,42,74,.42) 68%, rgba(27,42,74,.3) 100%),
    linear-gradient(180deg, rgba(27,42,74,.3) 0%, rgba(27,42,74,0) 40%);
}
.strip-over { position: absolute; inset: 0; z-index: 2; display: grid; align-items: center; padding: 40px 0; }
.strip-over .shell { width: min(var(--shell), 100% - (var(--gutter) * 2)); }
.strip-over p {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-h2); line-height: 1.1; letter-spacing: -.03em;
  color: #fff; max-width: 18em; text-wrap: balance;
}
.strip-over cite {
  display: block; margin-top: 20px; font-style: normal;
  font-family: var(--text); font-size: var(--t-caption); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.75);
}

/* A photo in a lifted card, for use inside panels. */
.photo-card {
  border-radius: var(--r-lg); overflow: hidden;
  box-shadow: var(--lift-2); background: var(--panel);
}
.photo-card img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }
.photo-card--square img { aspect-ratio: 1; }
/* ==========================================================================
   Section archetypes — seven distinct rhythms so no two sections read alike
   ========================================================================== */

/* --- 1. STATEMENT ---------------------------------------------------------
   One sentence at display scale, on ink, with the waypoint star bleeding
   off the edge. Used once per page as the pivot.
   -------------------------------------------------------------------------- */

.statement {
  position: relative; overflow: hidden;
  background: var(--ink); color: #fff;
  padding: clamp(64px, 7vw, 96px) 0;
}
.statement--deep { background: var(--ink-deep); }
.statement--respite { background: var(--respite-field); }
.statement--navigation { background: var(--navigation-field); }
.statement--coral { background: var(--coral-field); }
.statement .shell { position: relative; z-index: 2; }
.statement-star {
  position: absolute; z-index: 1;
  right: -6vw; top: 50%; translate: 0 -50%;
  width: clamp(240px, 34vw, 480px); height: auto;
  color: #fff; opacity: .05; pointer-events: none;
}
.statement .label { color: var(--coral-light); margin-bottom: 20px; }
.statement--respite .label,
.statement--navigation .label,
.statement--coral .label { color: #fff; }
.statement--respite .tick { background: var(--respite); }
.statement--navigation .tick { background: var(--sage-light); }
.statement--coral .tick { background: var(--coral-light); }

.statement p.statement-line, .statement h2.statement-line {
  font-family: var(--display); font-weight: 700;
  font-size: var(--t-statement);
  line-height: 1.02; letter-spacing: -.036em;
  color: #fff; max-width: 15em; text-wrap: balance;
}
.statement-sub { margin-top: 30px; font-size: var(--t-lede); line-height: 1.5; color: rgba(255,255,255,.8); max-width: 34em; }
.statement--respite .statement-sub,
.statement--navigation .statement-sub,
.statement--coral .statement-sub { color: rgba(255,255,255,.85); }
.statement .btn-row { margin-top: 40px; }
.statement-split { display: block; width: min(100%, 56rem); margin-inline: auto; text-align: left; }
.statement-split > div:first-child { max-width: none; }
.statement-split > div:last-child { max-width: 46rem; margin: 24px 0 0; }
.statement-split .label { justify-content: flex-start; }
.statement-split .statement-sub { max-width: none; margin-top: 0; }
.statement-split .statement-sub p + p { margin-top: 14px; }

/* --- 2. LANES -------------------------------------------------------------
   The two service lines as parallel lanes with a visible convergence.
   -------------------------------------------------------------------------- */

.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.lane {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  padding: 38px 36px 34px;
  box-shadow: var(--lift-1);
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease;
}
.lane:hover { transform: translateY(-3px); box-shadow: var(--lift-2); }
.lane::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--respite); }
.lane--navigation::before { background: var(--navigation); }
.lane-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; margin-bottom: 22px; }
.lane-head svg { width: 30px; height: 30px; color: var(--respite); flex: 0 0 auto; }
.lane--navigation .lane-head svg { color: var(--navigation); }
.lane h3 { font-size: var(--t-card); margin-bottom: 16px; }
.lane > p { color: var(--slate); }
.lane-list { margin-top: 24px; display: grid; gap: 2px; }
.lane-list li {
  display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start;
  padding: 12px 0; border-top: 1px solid var(--rule);
  font-size: var(--t-body); color: var(--slate);
}
.lane-list svg { width: 11px; height: 11px; margin-top: 6px; color: var(--respite); }
.lane--navigation .lane-list svg { color: var(--navigation); }
.lane-foot { margin-top: auto; padding-top: 28px; }

/* Where the lanes converge. */
.junction {
  position: relative;
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 20px; align-items: center;
  margin-top: 26px; padding: 24px 30px;
  background: var(--ink); color: #fff; border-radius: var(--r-lg);
}
.junction::before {
  content: ""; position: absolute; left: 0; top: 0; height: 5px; width: 100%;
  background: linear-gradient(90deg, var(--respite) 0%, var(--respite) 32%, var(--navigation) 68%, var(--navigation) 100%);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}
.junction svg { width: 26px; height: 26px; color: var(--coral-light); }
.junction p { color: rgba(255,255,255,.84); font-size: var(--t-body); }
.junction strong { color: #fff; }

/* --- 3. COMPARE -----------------------------------------------------------
   The category table. This is the section that explains what Novinway is
   by showing what it is not.
   -------------------------------------------------------------------------- */

.compare-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compare {
  min-width: 720px;
  font-size: var(--t-body);
  border-collapse: separate; border-spacing: 0;
}
.compare th, .compare td { text-align: left; vertical-align: top; padding: 18px 22px; }
.compare thead th {
  font-family: var(--display); font-size: var(--t-body); font-weight: 700; letter-spacing: -.014em;
  line-height: 1.24; color: var(--ink);
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
}
.compare thead th:first-child { width: 27%; }
.compare thead .col-us {
  background: var(--ink); color: #fff;
  border-bottom-color: var(--respite);
  border-radius: var(--r) var(--r) 0 0;
}
.compare thead .col-us small { display: block; margin-top: 5px; font-family: var(--text); font-size: var(--t-caption); font-weight: 600; letter-spacing: .11em; text-transform: uppercase; color: var(--coral-light); }
.compare tbody th {
  font-family: var(--text); font-size: var(--t-body); font-weight: 700; color: var(--ink);
  border-bottom: 1px solid var(--rule);
}
.compare tbody td { color: var(--slate); border-bottom: 1px solid var(--rule); }
.compare tbody .col-us { background: var(--ink); color: #fff; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.14); }
.compare tbody tr:last-child .col-us { border-radius: 0 0 var(--r) var(--r); border-bottom-color: transparent; }
.compare tbody tr:last-child th, .compare tbody tr:last-child td { border-bottom: 0; }
.compare .mark { display: inline-flex; align-items: center; gap: 9px; }
.compare .mark svg { width: 15px; height: 15px; flex: 0 0 auto; }
.compare .col-us .mark svg { color: var(--sage-light); }
.compare .mark--no svg { color: var(--rule-strong); }
.compare-note { margin-top: 18px; font-size: var(--t-caption); color: var(--muted); }
.compare-scroll-hint { display: none; margin-bottom: 12px; font-size: var(--t-caption); letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }

/* --- 4. ROUTE -------------------------------------------------------------
   Numbered steps, oversized numerals, joined by the route line.
   -------------------------------------------------------------------------- */

.route { position: relative; display: grid; }
.route-step {
  position: relative;
  display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 0 34px;
  padding: 30px 0 32px;
  border-top: 1px solid var(--rule);
}
.route-step:last-child { border-bottom: 1px solid var(--rule); }
.route-num {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-h2); line-height: .9;
  letter-spacing: -.04em;
  color: var(--coral-ink);
}
.route--navigation .route-num { color: var(--navigation-deep); }
/* On a dark band the numerals take the lane's on-dark tint. */
.route--ink .route-num { color: var(--coral-light); }
.sec--respite .route--ink .route-num { color: var(--periwinkle); }
.sec--navigation .route--ink .route-num { color: var(--sage-light); }
/* deeper tone on the warmer alternate surface, so the numerals clear 3:1 */
.band--alt .route-num { color: var(--coral-ink); }
.band--alt .route--navigation .route-num { color: var(--navigation-ink); }
.route-step h3 { margin-bottom: 12px; font-size: var(--t-card); }
.route-step p { color: var(--slate); max-width: 44em; }
.route-step .label { margin-bottom: 10px; }

/* Horizontal variant for short 3-step flows. */
.route--across { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; }
.route--across .route-step { grid-template-columns: 1fr; gap: 0; border-bottom: 0; padding: 26px 0 0; border-top: 3px solid var(--respite); }
.route--across.route--navigation .route-step { border-top-color: var(--navigation); }
.route--across .route-num { margin-bottom: 14px; }
.route--across .route-step:last-child { border-bottom: 0; }

/* --- 5. PROOF WALL --------------------------------------------------------
   Dark grid of hard claims, each led by a display-scale figure.
   -------------------------------------------------------------------------- */

.proofwall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.proofwall > div { padding: 4px 30px 4px 0; border-right: 1px solid var(--rule); }
.proofwall > div + div { padding-left: 30px; }
.proofwall > div:last-child { border-right: 0; padding-right: 0; }
.proof-figure {
  display: block; font-family: var(--display); font-weight: 800;
  font-size: var(--t-h2); line-height: 1; letter-spacing: -.038em;
  color: #fff; margin-bottom: 14px;
}
.band--ink .proof-figure { color: #fff; }
.proofwall h3 { font-size: var(--t-body); margin-bottom: 9px; letter-spacing: -.01em; }
.proofwall p { font-size: var(--t-body); line-height: 1.56; }
.proofwall--light .proof-figure { color: var(--coral-ink); }
.proofwall .proof-heading {
  font-family: var(--display);
  font-size: var(--t-card);
  line-height: 1.04;
  letter-spacing: -.035em;
  color: var(--navy);
  margin-bottom: 14px;
}
.panel-block > h2:not(.sr-only) { max-width: 18em; margin-bottom: 30px; }

/* Compact training curriculum. */
.training-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule-strong);
  border-bottom: 1px solid var(--rule-strong);
}
.training-grid article { padding: 30px 30px 32px 0; }
.training-grid article + article { padding-left: 30px; border-left: 1px solid var(--rule-strong); }
.training-num {
  display: block;
  margin-bottom: 18px;
  color: var(--coral-ink);
  font-family: var(--display);
  font-size: var(--t-caption);
  font-weight: 800;
  letter-spacing: .13em;
}
.training-grid h3 { margin-bottom: 12px; font-size: var(--t-card); }
.training-grid p { color: var(--slate); }
.training-callout {
  margin-top: 34px;
  padding: clamp(26px, 3vw, 38px);
  background: var(--ink);
  color: rgba(255,255,255,.86);
  border-radius: var(--r-lg);
}
.training-callout p { max-width: 66rem; font-size: var(--t-lede); line-height: 1.5; }
.training-callout strong { color: #fff; }

/* One compact testimonial language across the site. Quotes stand on their
   own; decorative photography no longer adds height or competes with them. */
.quote-feature-band { padding-block: clamp(36px, 4vw, 54px); }
.quote-feature {
  width: min(100%, 960px);
  margin: 0 auto;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}
.quote-feature figcaption {
  position: relative;
  padding: clamp(26px, 3vw, 34px) clamp(24px, 4vw, 42px);
}
.quote-feature figcaption::before {
  content: "";
  display: block;
  width: 46px;
  height: 4px;
  margin-bottom: 16px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--coral) 0 50%, var(--navy) 50% 100%);
}
.quote-feature blockquote {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(150px, 210px);
  gap: 16px 36px;
  align-items: end;
  margin: 0;
}
.quote-feature p {
  max-width: 28em;
  font-family: var(--display);
  font-size: clamp(1.35rem, 1.75vw, 1.5625rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--navy);
  text-wrap: balance;
}
.quote-feature cite {
  display: block;
  padding-bottom: 3px;
  color: var(--muted);
  font-size: var(--t-caption);
  font-style: normal;
  font-weight: 700;
  letter-spacing: .1em;
  line-height: 1.45;
  text-transform: uppercase;
}
.quote-feature--after-proof { margin-top: 28px; }
.sec-body > .quote-feature,
.form-layout .quote-feature { margin-top: 28px; }
.form-layout .quote-feature blockquote { grid-template-columns: 1fr; }

/* --- 7. SCENARIO ----------------------------------------------------------
   Two columns: the week a family is running now, and the same week with
   Novinway in it.
   -------------------------------------------------------------------------- */

.scenario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; background: var(--surface); }
.scenario-col { padding: 34px 34px 36px; }
.scenario-col + .scenario-col { border-left: 1px solid var(--rule); }
.scenario-col--before { background: var(--paper-2); }
.scenario-col--after { background: var(--surface); position: relative; }
.scenario-col--after::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--respite) 0%, var(--navigation) 100%); }
.scenario-col h3 { font-size: var(--t-lede); margin-bottom: 6px; }
.scenario-when { font-size: var(--t-caption); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.scenario-list { display: grid; gap: 0; margin-top: 22px; }
.scenario-list li {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 13px; align-items: start;
  padding: 13px 0; border-top: 1px solid var(--rule);
  font-size: var(--t-body); line-height: 1.52;
}
.scenario-list svg { width: 15px; height: 15px; margin-top: 4px; flex: 0 0 auto; }
.scenario-col--before .scenario-list li { color: var(--slate); }
.scenario-col--before .scenario-list svg { color: var(--rule-strong); }
.scenario-col--after .scenario-list li { color: var(--ink); font-weight: 500; }
.scenario-col--after .scenario-list svg { color: var(--navigation-deep); }
.scenario-who { display: flex; width: fit-content; align-items: center; gap: 7px; margin-top: 8px; font-size: var(--t-caption); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--respite-ink); }
.scenario-who::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--respite); }
.scenario-who--navigation { color: var(--navigation-ink); }
.scenario-who--navigation::before { background: var(--navigation); }

/* Desktop comparison rows share their height so each left/right divider lands
   on the same line. Stacked layouts keep their natural content height. */
@media (min-width: 981px) {
  .scenario--row-aligned { grid-template-rows: auto repeat(5, auto); }
  .scenario--row-aligned .scenario-col {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: 1 / span 6;
  }
  .scenario--row-aligned .scenario-col--before { grid-column: 1; }
  .scenario--row-aligned .scenario-col--after { grid-column: 2; }
  .scenario--row-aligned .scenario-when { grid-row: 1; }
  .scenario--row-aligned .scenario-list { display: contents; }
  .scenario--row-aligned .scenario-list li:first-child { margin-top: 22px; }
  .scenario--row-aligned .scenario-list li:nth-child(1) { grid-row: 2; }
  .scenario--row-aligned .scenario-list li:nth-child(2) { grid-row: 3; }
  .scenario--row-aligned .scenario-list li:nth-child(3) { grid-row: 4; }
  .scenario--row-aligned .scenario-list li:nth-child(4) { grid-row: 5; }
  .scenario--row-aligned .scenario-list li:nth-child(5) { grid-row: 6; }
}
/* ==========================================================================
   Components
   ========================================================================== */

/* --- card grids ----------------------------------------------------------- */

.cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 40px; }
.cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cols--four { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 32px; }
.cols > article { padding: 26px 0 30px; border-top: 3px solid var(--coral); }
.cols--respite > article { border-top-color: var(--respite); }
.cols--navigation > article { border-top-color: var(--navigation); }
.cols--hair > article { border-top-width: 1px; border-top-color: var(--rule); }
.cols h3 { margin-bottom: 11px; }
.cols p { color: var(--slate); font-size: var(--t-body); }
.cols .label { margin-bottom: 12px; }
.cols-cta { margin-top: 16px; }

.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }

.card {
  background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg);
  padding: 30px 30px 32px; box-shadow: var(--lift-1);
}
.card h3 { margin-bottom: 12px; }
.card p { color: var(--slate); font-size: var(--t-body); }
.card--respite { border-top: 4px solid var(--respite); }
.card--navigation { border-top: 4px solid var(--navigation); }

/* --- ledger rows ---------------------------------------------------------- */

.ledger { display: grid; }
.ledger-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px; align-items: start;
  padding: 20px 0; border-top: 1px solid var(--rule);
}
.ledger-row:last-child { border-bottom: 1px solid var(--rule); }
.ledger-row svg { width: 20px; height: 20px; color: var(--coral-ink); margin-top: 3px; }
.ledger--navigation .ledger-row svg { color: var(--navigation-deep); }
.ledger-row h3 { font-size: var(--t-body); margin-bottom: 5px; font-family: var(--text); font-weight: 700; letter-spacing: -.005em; }
.ledger-row p { color: var(--slate); font-size: var(--t-body); }

/* --- checklist ------------------------------------------------------------ */

.starlist { display: grid; }
.starlist li { display: grid; grid-template-columns: 16px minmax(0, 1fr); gap: 13px; align-items: start; padding: 11px 0; border-top: 1px solid var(--rule); font-size: var(--t-body); color: var(--slate); }
.starlist li:first-child { border-top: 0; padding-top: 0; }
.starlist svg { width: 11px; height: 11px; margin-top: 6px; color: var(--coral); }
.starlist--navigation svg { color: var(--navigation); }
.starlist--check svg { width: 15px; height: 15px; margin-top: 3px; color: var(--navigation-deep); }

/* Care visit content stays centered on the all-ages experience. The age note
   is deliberately subordinate instead of becoming a second section. */
.visit-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
}
.visit-list li,
.visit-list li:first-child {
  padding: 21px 24px;
  border-top: 0;
}
.visit-list li:nth-child(-n+4) { border-bottom: 1px solid var(--rule); }
.visit-list li:nth-child(odd):not(:last-child) { border-right: 1px solid var(--rule); }
.visit-list li:last-child { grid-column: 1 / -1; }
.visit-principle {
  max-width: 62rem;
  margin-top: 28px;
  color: var(--slate);
  font-size: var(--t-lede);
  line-height: 1.55;
}
.age-callout {
  display: grid;
  grid-template-columns: minmax(220px, .42fr) minmax(0, 1fr);
  gap: 18px 36px;
  align-items: center;
  margin-top: 30px;
  padding: 24px 28px;
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 4px solid var(--navy);
  border-radius: 0 var(--r) var(--r) 0;
}
.age-callout .label { margin: 0; color: var(--muted); }
.age-callout > p:last-child { color: var(--slate); font-size: var(--t-body); line-height: 1.55; }
.age-callout strong { color: var(--navy); }

@media (max-width: 720px) {
  .visit-list { grid-template-columns: 1fr; border-radius: var(--r); }
  .visit-list li,
  .visit-list li:first-child,
  .visit-list li:nth-child(-n+4) {
    padding: 18px 20px;
    border-right: 0;
    border-bottom: 1px solid var(--rule);
  }
  .visit-list li:last-child { grid-column: auto; border-bottom: 0; }
  .visit-principle { margin-top: 22px; font-size: var(--t-body); }
  .age-callout { grid-template-columns: 1fr; padding: 22px 20px; }
}

/* --- panels, notes, callouts ---------------------------------------------- */

.panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 30px 32px 32px; }
.section-kicker { max-width: 18em; margin: 6px 0 30px; font-size: var(--t-section); }
.panel--ink { background: var(--ink); color: #fff; border-color: transparent; }
.panel--respite { background: var(--respite-mist); border-color: color-mix(in srgb, var(--respite) 40%, transparent); }
.panel--navigation { background: var(--navigation-mist); border-color: color-mix(in srgb, var(--navigation) 40%, transparent); }
.panel h3 { margin-bottom: 12px; }
.panel > * + * { margin-top: 14px; }
.panel .cost { background: var(--paper-2); }

.note { font-size: var(--t-body); line-height: 1.6; color: var(--muted); }
.note--boxed { padding: 18px 22px; border-left: 3px solid var(--rule-strong); background: var(--paper-2); border-radius: 0 var(--r-sm) var(--r-sm) 0; }
.band--alt .note--boxed { background: var(--paper); }

.boundary {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 18px;
  padding: 26px 30px; border: 1px solid var(--rule-strong); border-radius: var(--r-lg);
  background: var(--paper-2);
}
.band--alt .boundary { background: var(--paper); }
.boundary svg { width: 22px; height: 22px; color: var(--ink); margin-top: 3px; }
.boundary h3 { font-size: var(--t-lede); margin-bottom: 9px; font-family: var(--text); font-weight: 700; }
.boundary p { color: var(--slate); font-size: var(--t-body); }
.boundary p + p { margin-top: 10px; }

.bridge {
  display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 16px; align-items: start;
  padding: 22px 26px; background: var(--surface);
  border: 1px solid var(--rule); border-left: 4px solid var(--coral);
  border-radius: 0 var(--r) var(--r) 0;
  font-size: var(--t-body); color: var(--slate);
}
.bridge svg { width: 15px; height: 15px; margin-top: 5px; color: var(--coral); }

.inline-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 34px; align-items: center;
  padding: 26px 30px; background: var(--ink); color: #fff;
  border-radius: var(--r-lg);
}
.inline-cta strong { display: block; font-family: var(--display); font-size: var(--t-lede); font-weight: 700; letter-spacing: -.02em; color: #fff; margin-bottom: 6px; }
.inline-cta p { color: rgba(255,255,255,.76); font-size: var(--t-body); }
.inline-cta .btn { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.inline-cta .btn:hover { background: #fff; border-color: #fff; }

/* --- split media + copy --------------------------------------------------- */

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 30px 64px; align-items: center; }
.split--copy-first > .split-copy { order: -1; }
.split--top { align-items: start; }
.split-copy > * + * { margin-top: 18px; }
.split-copy p { color: var(--slate); }
.split-copy h2 + p, .split-copy h3 + p { margin-top: 14px; }

.proof-media img, .figure img { border-radius: var(--r); border: 1px solid var(--rule); }
.proof-media img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; }

.figure { margin: 0; }
.figure img { width: 100%; height: auto; }
/* Keep documentary photos in their true proportions — never stretched. */
.figure--natural img { aspect-ratio: auto; object-fit: contain; background: var(--paper-2); }
.figure figcaption { margin-top: 14px; color: var(--slate); font-size: var(--t-body); line-height: 1.55; }
.figure--roadmap { position: relative; }
.roadmap-demo-logo {
  position: absolute;
  z-index: 2;
  top: 7.15%;
  left: 5.5%;
  width: 10.6%;
  pointer-events: none;
}
.roadmap-demo-logo img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  background: transparent;
}

@media (max-width: 720px) {
  .roadmap-demo-logo { top: 4%; left: 7.1%; width: 17.2%; }
}

/* An award/press card built around a photo. */
.award { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 0; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-1); }
.award-media { background: var(--paper-2); }
.award-media img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 680 / 514; }
.award-body { padding: 34px 36px 36px; display: flex; flex-direction: column; justify-content: center; }
.award-body .label { margin-bottom: 16px; }
.award-body h3 { font-size: var(--t-card); margin-bottom: 14px; }
.award-body p { color: var(--slate); font-size: var(--t-body); }
.award-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--rule); font-size: var(--t-caption); font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* --- people --------------------------------------------------------------- */

.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.person { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--lift-1); }
.person-photo { position: relative; background: var(--paper-2); }
.person-photo img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; object-position: center 18%; }
.person-body { padding: 24px 26px 26px; display: flex; flex-direction: column; flex: 1; }
.person-body .label { margin-bottom: 10px; }
.person-body h3 { font-size: var(--t-card); margin-bottom: 10px; }
.person-body > p:not(.label) { color: var(--slate); font-size: var(--t-body); }
.bio { margin-top: auto; padding-top: 20px; }
.bio summary {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding-top: 16px; border-top: 1px solid var(--rule);
  cursor: pointer; list-style: none;
  font-size: var(--t-body); font-weight: 700; color: var(--ink);
}
.bio summary::-webkit-details-marker { display: none; }
.bio summary span { color: var(--coral-ink); font-size: var(--t-lede); line-height: 1; }
.bio[open] summary span { transform: rotate(45deg); }
.bio > p { margin-top: 16px; font-size: var(--t-body); color: var(--slate); }
.bio blockquote { margin: 16px 0 0; padding: 15px 16px 16px; border-left: 3px solid var(--navy); border-radius: 0 var(--r-sm) var(--r-sm) 0; background: var(--paper-2); font-family: var(--display); font-size: var(--t-body); line-height: 1.4; color: var(--ink); }

.leaders { display: grid; gap: 0; }
.leader { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 44px; padding: 40px 0 44px; border-top: 1px solid var(--rule); align-items: start; }
.leader:last-child { border-bottom: 1px solid var(--rule); }
.leader img { width: 100%; height: auto; aspect-ratio: 389 / 423; object-fit: cover; object-position: center top; border-radius: var(--r); border: 1px solid var(--rule); }
.leader-body .label { margin-bottom: 12px; }
.leader h3 { font-size: var(--t-h3); margin-bottom: 16px; }
.leader-body > p { color: var(--slate); }
.leader-body > * + * { margin-top: 15px; }
.leader-creds { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.leader-creds li { padding: 6px 13px; border: 1px solid var(--rule-strong); border-radius: 100px; font-size: var(--t-caption); font-weight: 600; color: var(--slate); }
.leader blockquote { margin: 22px 0 0; padding: 20px 22px 22px; border-left: 4px solid var(--navy); border-radius: 0 var(--r) var(--r) 0; background: var(--paper-2); box-shadow: var(--lift-1); font-family: var(--display); font-size: var(--t-lede); line-height: 1.42; color: var(--ink); }

/* --- pricing -------------------------------------------------------------- */

.pricing-jump { background: var(--ink); }
.pricing-nav { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.pricing-nav--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.pricing-nav a {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px 24px; text-decoration: none; color: #fff;
  font-family: var(--display); font-size: var(--t-lede); font-weight: 700; letter-spacing: -.018em;
  border-right: 1px solid rgba(255,255,255,.14);
  transition: background .16s ease;
}
.pricing-nav a:nth-child(3n), .pricing-nav a:last-child { border-right: 0; }
.pricing-nav--four a:nth-child(3n) { border-right: 1px solid rgba(255,255,255,.14); }
.pricing-nav--four a:nth-child(4n) { border-right: 0; }
.pricing-nav--four a:nth-child(n+4) { border-top: 0; }
.pricing-nav a:nth-child(n+4) { border-top: 1px solid rgba(255,255,255,.14); }
.pricing-nav a:hover { background: rgba(255,255,255,.08); }
.pricing-nav span { color: var(--coral-light); }

.plans { font-size: var(--t-body); }
.plans col.plans-label-col { width: 170px; }
.plans th, .plans td { text-align: left; vertical-align: top; padding: 20px 26px 20px 0; border-bottom: 1px solid var(--rule); }
.plans thead th { border-bottom: 2px solid var(--ink); padding-bottom: 16px; }
.plans thead th:first-child { border-bottom-color: var(--rule); }
.plans tbody th { font-family: var(--text); font-size: var(--t-caption); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); padding-right: 26px; }
.plans td { color: var(--slate); }
.plans-name { display: block; font-family: var(--display); font-size: var(--t-card); font-weight: 700; letter-spacing: -.024em; color: var(--ink); }
.plans-rate, p.plans-rate { font-family: var(--display); font-size: var(--t-h3); font-weight: 800; letter-spacing: -.032em; color: var(--ink); line-height: 1.05; }
.plans-rate small, p.plans-rate small { display: block; margin-top: 6px; font-family: var(--text); font-size: var(--t-caption); font-weight: 600; letter-spacing: 0; color: var(--muted); }
.plans-best { font-weight: 700; color: var(--ink); }
.plans ul { display: grid; gap: 9px; }
.plans li { display: grid; grid-template-columns: 15px minmax(0, 1fr); gap: 11px; align-items: start; }
.plans li svg { width: 13px; height: 13px; margin-top: 5px; color: var(--coral); }
.plans--navigation li svg { color: var(--navigation); }
.plans tbody tr:last-child th, .plans tbody tr:last-child td { border-bottom: 0; }

.combo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 48px; align-items: center;
  padding: 40px 44px; border-radius: var(--r-lg);
  background: var(--ink); color: #fff; position: relative; overflow: hidden;
}
.combo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: linear-gradient(90deg, var(--respite) 0%, var(--navigation) 100%); }
.combo h3 { font-size: var(--t-h2); letter-spacing: -.04em; color: #fff; margin-bottom: 8px; }
.combo p { color: rgba(255,255,255,.78); }
.combo .label { color: var(--coral-light); }

.cost { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; margin-top: 8px; padding: 34px 36px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.cost-item + .cost-item { border-left: 1px solid var(--rule); padding-left: 30px; }
.cost p.cost-figure { font-family: var(--display); font-size: var(--t-h2); font-weight: 800; letter-spacing: -.038em; color: var(--ink); line-height: 1; margin-bottom: 12px; }
.cost h3 { font-size: var(--t-body); font-family: var(--text); font-weight: 700; margin-bottom: 6px; }
.cost p { font-size: var(--t-body); color: var(--muted); }
.cost-item--total p.cost-figure { color: var(--coral-ink); }
.cost-item--total h3 { color: var(--coral-ink); }

/* --- accordions / FAQ ------------------------------------------------------ */

.qa { display: grid; }
.qa details { border-top: 1px solid var(--rule); }
.qa details:last-of-type { border-bottom: 1px solid var(--rule); }
.qa summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-size: var(--t-lede); font-weight: 700; letter-spacing: -.016em;
  color: var(--ink); line-height: 1.32;
}
.qa summary::-webkit-details-marker { display: none; }
.qa summary::after {
  content: ""; flex: 0 0 auto; width: 13px; height: 13px; margin-top: 5px;
  border-right: 2px solid var(--coral-ink); border-bottom: 2px solid var(--coral-ink);
  rotate: 45deg; transition: rotate .2s ease;
}
.qa details[open] summary::after { rotate: -135deg; }
.qa summary:hover { color: var(--coral-ink); }
.qa-body { padding: 0 0 24px; max-width: 52em; }
.qa-body > p { color: var(--slate); }
.qa-body > * + * { margin-top: 13px; }
.qa-group + .qa-group { margin-top: 56px; }
.qa-group > h2 { margin-bottom: 22px; padding-bottom: 14px; border-bottom: 3px solid var(--ink); font-size: var(--t-h3); }

.faq-search { display: grid; gap: 10px; margin-bottom: 44px; }
.faq-search-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: stretch; }
.faq-search input {
  min-width: 0; width: 100%; padding: 16px 20px;
  font: inherit; font-size: var(--t-body); color: var(--ink);
  background: var(--surface); border: 1px solid var(--rule-strong); border-radius: var(--r);
}
.faq-search input::placeholder { color: var(--muted); }
.faq-search-submit {
  padding: 12px 20px;
  border: 1px solid var(--coral); border-radius: var(--r); background: var(--coral); color: var(--ink);
  font: inherit; font-size: var(--t-body); font-weight: 700; cursor: pointer;
}
.faq-search-submit:hover { background: var(--coral-light); }
.faq-search-submit:focus-visible, .faq-search-clear:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.faq-search-clear {
  justify-self: start; padding: 0; border: 0; background: transparent; color: var(--coral-ink);
  font: inherit; font-size: var(--t-caption); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.faq-search label { font-size: var(--t-caption); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.faq-search-status, .faq-no-results { font-size: var(--t-body); color: var(--muted); }
.faq-no-results { padding: 20px 0; }

/* --- contact / form ------------------------------------------------------- */

.form-layout { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: 56px; align-items: start; }
.form-layout--contact { grid-template-columns: minmax(0, 1.18fr) minmax(300px, .72fr); gap: clamp(34px, 4vw, 56px); }
.tally-panel { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 12px 22px; box-shadow: var(--lift-1); }
.contact-support { padding-top: 10px; }
.contact-support .label { margin-bottom: 14px; }
.contact-support h2 { font-size: var(--t-h3); }
.contact-support > h3 { margin-top: 24px; font-size: var(--t-lede); }
.contact-support > p { margin-top: 10px; color: var(--slate); }
.contact-service-summaries { display: grid; gap: 14px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--rule-strong); }
.contact-service-summaries div { padding-left: 15px; border-left: 3px solid var(--respite); }
.contact-service-summaries div + div { border-left-color: var(--navigation); }
.contact-service-summaries strong { color: var(--ink); }
.contact-service-summaries p { margin-top: 4px; color: var(--slate); font-size: 1rem; line-height: 1.5; }
.contact-steps { margin-top: 22px; border-top: 1px solid var(--rule-strong); }
.contact-steps li { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 14px; padding: 20px 0 22px; border-bottom: 1px solid var(--rule); }
.contact-steps li > span { color: var(--coral-ink); font-family: var(--display); font-size: var(--t-caption); font-weight: 800; letter-spacing: .1em; }
.contact-steps strong { display: block; margin-bottom: 5px; color: var(--ink); }
.contact-steps p { color: var(--slate); font-size: 1rem; line-height: 1.5; }
.form-layout--contact .quote-feature { width: 100%; margin-top: 28px; border-radius: var(--r-lg); }
.form-layout--contact .quote-feature figcaption { padding: 22px 24px 24px; }
.form-layout--contact .quote-feature p { font-size: 1.25rem; }
.form-layout--contact .quote-feature cite { margin-top: 12px; }
.hr { border: 0; border-top: 1px solid var(--rule); margin: 22px 0; }
.direct-contact { display: flex; flex-direction: column; gap: 6px; }
.direct-contact a { font-family: var(--display); font-size: var(--t-lede); font-weight: 700; letter-spacing: -.022em; text-decoration: none; color: var(--ink); }
.direct-contact a:hover { color: var(--coral-ink); }

/* --- policy pages --------------------------------------------------------- */

.policy-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 56px; align-items: start; }
.policy-aside { position: sticky; top: 110px; padding: 26px 28px; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.policy-aside h2 { font-size: var(--t-lede); margin-bottom: 10px; }
.policy-aside p { font-size: var(--t-body); color: var(--slate); margin-bottom: 14px; }
.policy-date { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--rule); font-size: var(--t-caption); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.policy-body > section { padding: 28px 0; border-top: 1px solid var(--rule); }
.policy-body > section:first-child { border-top: 0; padding-top: 0; }
.policy-body h2 { font-size: var(--t-lede); margin-bottom: 12px; display: flex; gap: 14px; align-items: baseline; }
.policy-body h2 span { font-family: var(--display); font-size: var(--t-caption); font-weight: 700; color: var(--coral-ink); letter-spacing: .04em; }
.policy-body p { color: var(--slate); }
.policy-body p + p { margin-top: 12px; }

/* --- roles (careers) ------------------------------------------------------ */

.role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.role { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 34px 34px 36px; box-shadow: var(--lift-1); position: relative; overflow: hidden; }
.role::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--respite); }
.role--navigation::before { background: var(--navigation); }
.role h3 { font-size: var(--t-card); margin-bottom: 14px; }
.role > p { color: var(--slate); }
.role h4 { margin: 26px 0 12px; font-size: var(--t-caption); font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); }
.role ul { display: grid; gap: 9px; }
.role li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: 12px; align-items: start; font-size: var(--t-body); color: var(--slate); }
.role li svg { width: 11px; height: 11px; margin-top: 6px; color: var(--respite); }
.role--navigation li svg { color: var(--navigation); }
.role-foot { margin-top: auto; padding-top: 28px; }

.terms-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.terms-chip { padding: 22px 0 0; border-top: 3px solid var(--coral); }
.terms-chip strong { display: block; font-family: var(--display); font-size: var(--t-card); font-weight: 700; letter-spacing: -.024em; margin-bottom: 7px; }
.terms-chip p { font-size: var(--t-body); color: var(--slate); }

/* --- provider service cards ----------------------------------------------- */

.provider-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.provider-service-card { background: var(--surface); border: 1px solid var(--rule); border-radius: var(--r-lg); padding: 32px 32px 34px; position: relative; overflow: hidden; }
.provider-service-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px; background: var(--respite); }
.provider-service-card--navigation::before { background: var(--navigation); }
.provider-service-card h3 { margin: 14px 0 12px; }
.provider-service-card > p { color: var(--slate); font-size: var(--t-body); }
.provider-service-card ul { margin-top: 20px; }

/* Align repeated landmarks only while the cards sit side by side. */
@media (min-width: 981px) {
  .lanes .lane h3 { min-height: 3rem; }
  .lanes .lane > p:not(.lane-foot) { min-height: 4.875rem; }

  .care-use-cases > article { display: flex; flex-direction: column; }
  .care-use-cases h3 { min-height: 5.8125rem; }
  .care-use-cases .cols-cta { margin-top: auto; padding-top: 16px; }

  .care-preparation h3 { min-height: 3.875rem; }
  .navigation-work-grid > .card:nth-child(n + 4) h3 { min-height: 3.875rem; }
  .provider-service-grid--aligned > .provider-service-card > h3 + p { min-height: 6.5rem; }
}

/* --- closing CTA ---------------------------------------------------------- */

.cta { position: relative; overflow: hidden; background: var(--ink-deep); color: #fff; padding: clamp(64px, 7vw, 104px) 0; }
.cta::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, var(--respite) 0%, var(--respite) 45%, var(--navigation) 55%, var(--navigation) 100%); }
.cta-inner { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 56px; align-items: center; }
.cta h2 { color: #fff; margin-bottom: 16px; max-width: 15em; }
.cta p { color: rgba(255,255,255,.76); max-width: 40em; }
.cta .label { color: var(--coral-light); }
.cta-star { position: absolute; right: -4vw; top: 50%; translate: 0 -50%; width: clamp(240px, 30vw, 460px); color: #fff; opacity: .045; z-index: 1; }

/* --- footer --------------------------------------------------------------- */

.site-footer { position: relative; overflow: hidden; background: var(--ink); color: rgba(255,255,255,.72); padding: 76px 0 34px; }
.footer-star { position: absolute; left: -70px; bottom: -90px; width: 320px; color: #fff; opacity: .04; }
.footer-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 44px; }
.footer-logo { height: 30px; width: auto; margin-bottom: 22px; }
.footer-brand p { font-size: var(--t-body); line-height: 1.6; max-width: 34em; }
.ownership { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 18px; border-top: 1px solid rgba(255,255,255,.14); }
.ownership img { width: 54px; height: auto; flex: 0 0 54px; border-radius: 2px; }
.ownership span { font-size: var(--t-caption); font-weight: 600; color: rgba(255,255,255,.82); }
.footer-col h2 { font-size: var(--t-caption); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.52); margin-bottom: 16px; font-family: var(--text); }
.footer-col a { display: block; padding: 6px 0; font-size: var(--t-body); text-decoration: none; color: rgba(255,255,255,.8); }
.footer-col a:hover { color: #fff; }
.footer-col p { margin-top: 12px; font-size: var(--t-caption); line-height: 1.6; color: rgba(255,255,255,.6); }
.footer-legal { position: relative; z-index: 2; margin-top: 52px; padding-top: 26px; border-top: 1px solid rgba(255,255,255,.14); }
.footer-legal p { font-size: var(--t-caption); line-height: 1.62; color: rgba(255,255,255,.55); max-width: 78em; }
.footer-bottom { margin-top: 18px; }

/* --- misc ----------------------------------------------------------------- */

.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--slate); }
.body-copy { color: var(--slate); }
.prose-wide { max-width: 46em; }
.eyebrow-num { font-family: var(--display); font-weight: 800; font-size: var(--t-h3); letter-spacing: -.04em; color: var(--coral); line-height: 1; }

.mission-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  border-block: 1px solid var(--rule-strong);
}
.mission-statement {
  min-width: 0;
  padding: clamp(30px, 4vw, 46px) clamp(30px, 4vw, 52px) clamp(34px, 4.5vw, 52px) 0;
}
.mission-statement + .mission-statement {
  padding-right: 0;
  padding-left: clamp(30px, 4vw, 52px);
  border-left: 1px solid var(--rule-strong);
}
.mission-statement .label { margin-bottom: 18px; color: var(--coral-ink); }
.mission-statement--vision .tick { background: var(--navy); }
.mission-statement h3 { max-width: 19em; font-size: var(--t-card); line-height: 1.24; }
.mission-statement > p:not(.label) { margin-top: 18px; max-width: 34em; color: var(--slate); }
.mission-statement h3 span { display: block; }
.mission-statement h3 span + span { margin-top: 12px; }
.band--ink .mission-grid { border-color: rgba(255,255,255,.22); }
.band--ink .mission-statement + .mission-statement { border-left-color: rgba(255,255,255,.22); }

/* ==========================================================================
   TOKEN CARDS — one hard fact per card, lifted off a panel.
   The device from the reference page: turns a claim into an object.
   ========================================================================== */

.tokens { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tokens--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tokens--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.token {
  background: var(--card); border-radius: var(--r-lg);
  padding: 26px 26px 28px; box-shadow: var(--lift-1);
  display: flex; flex-direction: column;
}
.token .num {
  font-family: var(--display); font-weight: 800;
  font-size: var(--t-card); line-height: 1; letter-spacing: -.035em;
  color: var(--navy); margin-bottom: 14px;
}
.token .num--respite    { color: var(--respite-ink); }
.token .num--navigation { color: var(--navigation-ink); }
.token .num--coral      { color: var(--coral-ink); }
.token h3 {
  font-family: var(--text); font-size: var(--t-body); font-weight: 700;
  letter-spacing: -.008em; line-height: 1.32; margin-bottom: 8px; color: var(--navy);
}
.token p { font-size: var(--t-caption); line-height: 1.6; color: var(--slate); }

@media (max-width: 980px) { .tokens, .tokens--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tokens, .tokens--3, .tokens--2 { grid-template-columns: 1fr; gap: 12px; } }

/* Panel heads sit inside a panel-block, above its cards. */
.panel-head { margin-bottom: 26px; max-width: 46em; }
.panel-head h2 { margin-bottom: 12px; }
.panel-head p { color: var(--slate); font-size: var(--t-lede); line-height: 1.5; max-width: 34em; }

/* Cards inside panels lose their borders — elevation does the work now. */
.panel-block .card,
.panel-block .lane,
.panel-block .person,
.panel-block .role,
.panel-block .provider-service-card { border: 0; box-shadow: var(--lift-1); }
.panel-block .lane:hover,
.panel-block .card:hover { box-shadow: var(--lift-2); }

/* The lane convergence, restated as a rule rather than a black box. */
.join {
  display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: center;
  margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--rule-strong);
}
.join i {
  display: block; height: 4px; border-radius: 3px;
  background: linear-gradient(90deg, var(--respite), var(--navigation));
}
.join p { font-size: var(--t-body); color: var(--slate); }
.join strong { color: var(--navy); font-weight: 700; }
@media (max-width: 560px) { .join { grid-template-columns: 1fr; gap: 10px; } .join i { width: 44px; } }

/* ==========================================================================
   Light-ground variants — these components used to live only on navy.
   ========================================================================== */

.panel-block .proof-figure { color: var(--navy); }
.panel-block .proofwall > div { border-color: var(--rule-strong); }
.panel-block .proofwall h3 { color: var(--navy); }
.panel-block .proofwall p { color: var(--slate); }
.panel-block .route-num { color: var(--coral-ink); }
.panel-block--respite    .route-num { color: var(--respite-ink); }
.panel-block--navigation .route-num { color: var(--navigation-ink); }
.panel-block .route-step { border-color: var(--rule-strong); }

/* Inline CTA — was a navy box, now a lifted card with a coral button. */
.inline-cta {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 22px 34px; align-items: center;
  padding: 28px 32px; background: var(--card); color: var(--ink);
  border-radius: var(--r-lg); box-shadow: var(--lift-2);
}
.inline-cta strong {
  display: block; font-family: var(--display); font-size: var(--t-card); font-weight: 800;
  letter-spacing: -.024em; color: var(--navy); margin-bottom: 6px;
}
.inline-cta p { color: var(--slate); font-size: var(--t-body); }

/* Pricing jump nav — was navy, now a panel with navy type. */
.pricing-jump { background: var(--card); border-block: 1px solid var(--rule); }
.pricing-nav a { color: var(--navy); border-right-color: var(--rule-strong); }
.pricing-nav a:hover { background: var(--card); }
.pricing-nav span { color: var(--coral-ink); }
.pricing-nav a:nth-child(3n), .pricing-nav a:last-child { border-right: 0; }
.pricing-nav--four a:nth-child(3n) { border-right-color: var(--rule-strong); }
.pricing-nav--four a:nth-child(4n) { border-right: 0; }
.pricing-nav--four a:nth-child(n+4) { border-top: 0; }
.pricing-nav a:nth-child(n+4) { border-top: 1px solid var(--rule-strong); }

/* Combined-services offer — was navy, now the company panel. */
.combo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 30px 48px; align-items: center;
  padding: 40px 44px; border-radius: var(--r-xl);
  background: var(--panel-coral); color: var(--ink);
  position: relative; overflow: hidden;
}
.combo::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 5px;
  background: linear-gradient(90deg, var(--respite) 0%, var(--navigation) 100%); }
.combo h3 { font-size: var(--t-h2); letter-spacing: -.04em; color: var(--coral-ink); margin-bottom: 8px; }
.combo p { color: var(--slate); }
.combo .label { color: var(--coral-ink); }
.combo .btn { border-color: var(--navy); }

/* The closing CTA keeps navy — it is one of the two sanctioned dark moments. */
.cta { padding: var(--pad) 0; }

/* Direct-contact buttons — a second front door beside the form. */
.btn-row--stack { flex-direction: column; align-items: stretch; gap: 10px; }
.btn-row--stack .btn { justify-content: flex-start; }
.btn-row--stack .btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
/* ==========================================================================
   Responsive — LAYOUT ONLY.
   Type sizes and section padding step down via the token media queries in
   00-tokens.css. Nothing here sets a font-size, so the 8-step scale holds
   at every viewport.
   ========================================================================== */

@media (max-width: 1120px) {
  .form-layout { grid-template-columns: 1fr; gap: 44px; }
  .policy-layout { grid-template-columns: 1fr; gap: 32px; }
  .policy-aside { position: static; }
  .cols--four { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
  .proofwall { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proofwall > div { padding: 22px 26px 22px 0; border-bottom: 1px solid var(--rule); }
  .proofwall > div:nth-child(2n) { border-right: 0; padding-right: 0; }
  .proofwall > div:nth-child(2n+1) { padding-left: 0; }
  .proofwall > div:nth-child(n+3) { padding-bottom: 0; border-bottom: 0; }
  .terms-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
  .leader { grid-template-columns: 200px minmax(0, 1fr); gap: 34px; }
  .award { grid-template-columns: minmax(0, 1.05fr) minmax(300px, .95fr); }
  .award-media img { aspect-ratio: 680 / 514; }
}

@media (max-width: 980px) {
  .nav-desktop { display: none; }
  .nav-mobile { display: block; }
  .header-inner { height: 66px; }
  .brand img { height: 32px; }

  .sec-head { grid-template-columns: 1fr; align-items: start; gap: 16px; margin-bottom: 32px; }
  .sec-title h2, .sec-head--solo .sec-title h2 { max-width: 17em; }
  .sec-aside { margin-top: 6px; }

  .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); }
  .hero--type .hero-grid { grid-template-columns: 1fr; align-items: start; }
  .hero--type .hero-side { padding-bottom: var(--pad); padding-top: 0; }

  .lanes, .grid-2, .grid-3, .role-grid, .provider-service-grid, .scenario { grid-template-columns: 1fr; }
  .scenario-col + .scenario-col { border-left: 0; border-top: 1px solid var(--rule); }
  .cols, .cols--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 30px; }
  .route--across { grid-template-columns: 1fr; gap: 0; }
  .route--across .route-step { border-top: 1px solid var(--rule); padding: 26px 0 28px; display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 0 26px; }
  .route--across .route-step:last-child { border-bottom: 1px solid var(--rule); }
  .route--across .route-num { margin-bottom: 0; }
  .people { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .leaders .leader { grid-template-columns: 170px minmax(0, 1fr); gap: 28px; }
  .split { grid-template-columns: 1fr; gap: 30px; }
  .cost { grid-template-columns: 1fr; gap: 24px; }
  .cost-item + .cost-item { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 24px; }
  .combo { grid-template-columns: 1fr; gap: 26px; }
  .cta-inner { grid-template-columns: 1fr; }
  .inline-cta { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 36px; }
  .footer-brand { grid-column: 1 / -1; }
  .pricing-nav { grid-template-columns: 1fr; }
  .pricing-nav a { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); padding: 16px 0; }
  .pricing-nav a:last-child { border-bottom: 0; }
  .statement-split > div:last-child { margin-top: 26px; }
  .compare-scroll-hint { display: block; }
}

@media (max-width: 720px) {
  /* ------------------------------------------------------------------
     MOBILE HERO TEMPLATE
     Image-led pages use a dedicated mobile asset in a short, predictable
     image field above the copy. Group photographs opt into a stacked treatment
     so the full team remains visible. Type-only pages use the same compact
     copy rhythm and place their utility panel below it.
     ------------------------------------------------------------------ */
  .hero-grid { display: flex; flex-direction: column; width: 100%; }
  .hero--image { min-height: 0; }
  .hero--image::after { display: none; }
  .hero--image .hero-grid {
    position: relative;
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: 0;
    padding-bottom: 0;
  }
  .hero--image .hero-art {
    position: relative;
    inset: auto;
    z-index: 0;
    order: 1;
    width: 100%;
    height: clamp(210px, 56vw, 240px);
    aspect-ratio: auto;
    padding: 0;
    overflow: hidden;
  }
  .hero--image:not(.hero--group-photo) .hero-art::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1;
    height: clamp(126px, 36vw, 160px);
    pointer-events: none;
    background: linear-gradient(180deg,
      rgba(27,42,74,0) 0%,
      rgba(27,42,74,.03) 18%,
      rgba(27,42,74,.12) 38%,
      rgba(27,42,74,.32) 58%,
      rgba(27,42,74,.68) 78%,
      rgba(27,42,74,1) 100%);
  }
  /* The Care image is portrait-oriented and the controllers sit lower in the
     frame. Give this hero a little more depth without changing every page. */
  .hero--respite .hero-art {
    height: clamp(300px, 42svh, 350px);
  }
  .hero--image .hero-media,
  .hero--image .hero-media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
  }
  .hero--image .hero-media img {
    object-fit: cover;
    object-position: var(--pos-m, center top);
  }
  .hero--image .hero-copy {
    position: relative;
    z-index: 2;
    order: 2;
    width: min(var(--shell), 100% - (var(--gutter) * 2));
    margin-inline: auto;
    max-width: none;
    padding: 26px 0 30px;
  }
  .hero--image .label {
    margin-bottom: 8px;
    font-size: .71875rem;
    letter-spacing: .105em;
  }
  .hero--image h1 {
    margin-bottom: 12px;
    font-size: 1.875rem;
    line-height: 1.06;
  }
  .hero--image .hero-lede {
    max-width: 35em;
    margin-bottom: 16px;
    font-size: .9375rem;
    line-height: 1.46;
  }
  .hero--image .btn-row { gap: 10px 18px; }
  .hero--image .hero-copy .btn,
  .hero--image .hero-copy .btn-row > .btn {
    width: auto;
    padding: 11px 18px;
    font-size: 1rem;
  }
  .hero--image .alink { font-size: 1rem; }

  .hero--home h1 { max-width: 19ch; }
  .hero--home .hero-line { display: inline; }
  .hero--home .hero-line::after { content: " "; }
  .hero--home .btn-row .alink { display: none; }
  .hero--home .hero-meta {
    margin-top: 12px;
    font-size: .6875rem;
    letter-spacing: .105em;
  }

  /* Team photographs contain too many people for a portrait crop. */
  .hero--group-photo::after { display: none; }
  .hero--group-photo .hero-grid {
    display: flex;
    flex-direction: column;
    background: var(--navy);
  }
  .hero--group-photo .hero-art {
    position: relative;
    inset: auto;
    order: 1;
    height: auto;
    min-height: 0;
    aspect-ratio: auto;
    background: var(--paper-2);
  }
  .hero--group-photo .hero-media,
  .hero--group-photo .hero-media img {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
  }
  .hero--group-photo .hero-media img {
    aspect-ratio: 3 / 2;
    object-fit: contain;
    object-position: center;
  }
  .hero--group-photo .hero-copy,
  .hero--group-photo.hero--compact .hero-copy {
    order: 2;
    width: min(var(--shell), 100% - (var(--gutter) * 2));
    margin-inline: auto;
    padding: 26px 0 30px;
  }

  /* Utility heroes stay compact and never inherit the image overlay rules. */
  .hero--type .hero-grid {
    display: block;
    width: min(var(--shell), 100% - (var(--gutter) * 2));
    padding: 0;
  }
  .hero--type .hero-copy,
  .hero--type .hero-side {
    width: 100%;
    margin: 0;
    max-width: none;
  }
  .hero--type .hero-copy { padding: 38px 0 28px; }
  .hero--type .hero-side { padding: 0 0 38px; }
  .hero--type h1 { font-size: var(--t-h1); }
  .hero--type .hero-lede { margin-bottom: 22px; font-size: var(--t-lede); }
  .hero--type .panel { padding: 24px 22px; border-radius: var(--r); }
  .hero--mobile-compact .hero-side { display: none; }

  .hero h1 { margin-bottom: 16px; }
  .hero-lede { max-width: none; }
  .hero-copy .btn,
  .hero-copy .btn-row > .btn { width: 100%; }
  .hero-meta { margin-top: 22px; }

  .sec--spine { padding-left: 22px; }
  .sec-star { left: -6px; width: 14px; height: 14px; }
  .sec-head { margin-bottom: 26px; }
  .sec-body > * + * { margin-top: 24px; }

  .panel-block { border-radius: var(--r-lg); }
  .lane { border-radius: var(--r); }
  .junction { grid-template-columns: 1fr; gap: 14px; border-radius: var(--r); }

  .statement { padding: var(--pad) 0; }
  .statement-star { right: -22vw; width: 72vw; }
  .statement .btn { width: 100%; }

  .cols, .cols--two, .cols--four, .people, .terms-chips { grid-template-columns: 1fr; gap: 0; }
  .cols > article { padding: 22px 0 24px; }
  .grid-2, .grid-3 { gap: 16px; }

  .route-step, .route--across .route-step { grid-template-columns: 62px minmax(0, 1fr); gap: 0 18px; padding: 24px 0 26px; }

  .proofwall { grid-template-columns: 1fr; }
  .proofwall > div, .proofwall > div + div { padding: 20px 0; border-right: 0; border-bottom: 1px solid var(--rule); }
  .proofwall > div:last-child { border-bottom: 0; padding-bottom: 0; }
  .proofwall > div:first-child { padding-top: 0; }
  .training-grid { grid-template-columns: 1fr; }
  .training-grid article,
  .training-grid article + article { padding: 24px 0 26px; border-left: 0; border-bottom: 1px solid var(--rule); }
  .training-grid article:last-child { border-bottom: 0; }
  .training-callout { margin-top: 24px; padding: 24px 22px 26px; border-radius: var(--r); }

  .quote-feature { border-radius: var(--r); }
  .quote-feature figcaption { padding: 24px 22px 26px; }
  .quote-feature figcaption::before { margin-bottom: 16px; }
  .quote-feature blockquote { grid-template-columns: 1fr; }
  .scenario { border-radius: var(--r); }
  .scenario-col { padding: 26px 22px 28px; }

  .compare { min-width: 620px; }
  .compare th, .compare td { padding: 14px 16px; }

  .card, .panel, .provider-service-card, .role, .policy-aside,
  .mission-statement, .boundary, .inline-cta, .combo, .cost, .token {
    padding: 24px 22px 26px; border-radius: var(--r);
  }
  .boundary { grid-template-columns: 1fr; gap: 14px; }
  .bridge { padding: 20px; gap: 13px; }
  .inline-cta .btn, .combo .btn, .cta .btn { width: 100%; }

  .person-body { padding: 22px 22px 24px; }
  .leader { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 32px; }
  .leaders .leader { grid-template-columns: 1fr; gap: 22px; padding: 30px 0 32px; }
  .leader img { max-width: 220px; }
  .award { grid-template-columns: 1fr; }
  .award-body { padding: 26px 22px 28px; }
  .award-media img { aspect-ratio: 680 / 514; }
  .mission-grid { grid-template-columns: 1fr; }
  .mission-statement { padding: 28px 0 30px; }
  .mission-statement + .mission-statement { padding: 30px 0 28px; border-left: 0; border-top: 1px solid var(--rule-strong); }

  .qa summary { padding: 18px 0; gap: 16px; }
  .qa-group + .qa-group { margin-top: 40px; }
  .faq-search { margin-bottom: 30px; }
  .faq-search-field { grid-template-columns: 1fr; }
  .faq-search-submit { width: 100%; }

  /* Pricing tables become labelled stacks. */
  .plans { display: block; }
  .plans colgroup, .plans thead { display: none; }
  .plans tbody, .plans tr, .plans th, .plans td { display: block; width: 100%; }
  .plans tbody { display: grid; gap: 0; }
  .plans tbody th { padding: 22px 0 8px; border-bottom: 0; }
  .plans tbody td { padding: 0 0 14px; border-bottom: 0; }
  .plans tbody td::before {
    content: attr(data-plan);
    display: block; margin-bottom: 6px;
    font-family: var(--text); font-size: var(--t-caption); font-weight: 700;
    letter-spacing: .1em; text-transform: uppercase; color: var(--respite-ink);
  }
  .plans--navigation tbody td::before { color: var(--navigation-ink); }
  .plans tbody tr { border-bottom: 1px solid var(--rule); padding-bottom: 12px; }
  .plans tbody tr:last-child { border-bottom: 0; }

  .form-layout { gap: 32px; }
  .contact-intro { padding-top: 30px; }
  .contact-intro h1 { font-size: 2rem; }
  .contact-intro-copy { margin-top: 12px; font-size: 1rem; line-height: 1.5; }
  .contact-facts { grid-template-columns: 1fr; margin-top: 24px; }
  .contact-facts li,
  .contact-facts li + li { padding: 12px 0 13px; border-left: 0; }
  .contact-facts li + li { border-top: 1px solid rgba(255,255,255,.18); }
  .contact-form-band { padding-top: 34px; }
  .tally-panel { padding: 8px 10px; border-radius: var(--r); }
  .contact-support { padding-top: 0; }
  .tally-panel { padding: 8px 14px; border-radius: var(--r); }
  .strip--quote img { height: clamp(280px, 78vw, 380px); }
  .cta-star { right: -30vw; width: 90vw; }
  .footer-grid { grid-template-columns: 1fr; gap: 30px; }
  .footer-legal { margin-top: 34px; }
  .announce a { gap: 7px; padding: 8px 16px; min-height: 34px; }
}

/* Keep the header action visually stable in every interaction state. */
.nav-desktop > a.nav-cta,
.nav-desktop > a.nav-cta:focus-visible {
  color: var(--navy);
  background: var(--coral);
  border-color: var(--coral);
}
.nav-desktop > a.nav-cta:hover {
  color: var(--navy);
  background: var(--coral-light);
  border-color: var(--coral-light);
}

@media (max-width: 620px) {
  .announce-where { display: none; }
}

@media (max-width: 400px) {
  .route-step, .route--across .route-step { grid-template-columns: 52px minmax(0, 1fr); gap: 0 14px; }
}

/* Print — the pricing page gets printed and passed around. */
@media print {
  .site-header, .announce, .nav-mobile, .cta, .skip-link, .strip,
  .statement-star, .cta-star, .footer-star { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .band { padding: 18pt 0; background: #fff !important; color: #000 !important; }
  .band--ink, .band--ink h2, .band--ink h3, .band--ink p { background: #fff !important; color: #000 !important; }
  .lift, .panel-block, .card { box-shadow: none !important; border: 1px solid #ccc; }
  .compare { min-width: 0; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 8pt; color: #555; }
}

/* v14 cohesion pass ------------------------------------------------------- */
/* Full-width surfaces now have clear jobs: navy heroes, one warm page
   canvas, and white reserved for cards and framed content. */
.hero { background: var(--navy); }

.statement--respite,
.statement--navigation { background: var(--ink); }

.nav-desktop > a[aria-current="page"] {
  background: rgba(255,255,255,.1);
}

.site-dock,
.floating-nav,
.bottom-nav,
.floating-page-nav { display: none !important; }

/* The home-page problem statement should read as a short argument, not as
   another oversized card. The rule gives the conclusion a clear landing
   point without adding another surface or shadow. */
.band--why { padding: clamp(54px, 6vw, 78px) 0; }
.why-novinway {
  display: grid;
  grid-template-columns: minmax(280px, .82fr) minmax(0, 1.18fr);
  gap: 30px clamp(48px, 7vw, 96px);
  align-items: start;
}
.why-novinway-title h2 { max-width: 14em; }
.why-novinway-copy { display: grid; gap: 18px; }
.why-novinway-copy p {
  max-width: 42em;
  color: var(--slate);
  font-size: var(--t-lede);
  line-height: 1.55;
}
.why-novinway-copy strong { color: var(--navy); }
.why-novinway-answer {
  grid-column: 1 / -1;
  margin-top: 4px;
  padding-top: 22px;
  border-top: 1px solid var(--rule-strong);
  color: var(--navy);
  font-size: var(--t-lede);
  line-height: 1.5;
}

/* Staff profiles use one card layer and preserve the original headshot
   framing. The three-column introduction fills the space above the cards
   instead of making the short heading wait for a tall text column. */
.band--care-specialists { padding: clamp(54px, 6vw, 78px) 0; }
.specialists-intro {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
  margin-bottom: 28px;
}
.specialists-intro-title h2 { max-width: 11em; margin-bottom: 18px; }
.specialists-intro > p {
  max-width: 32em;
  color: var(--slate);
  font-size: var(--t-body);
  line-height: 1.55;
}
.people--compact { align-items: start; }
.people--compact .person {
  align-self: start;
  border-radius: var(--r);
  box-shadow: var(--lift-1);
}
.people--compact .person-photo img { aspect-ratio: 1 / 1; }
.people--compact .person-body { padding: 19px 20px 20px; }
.people--compact .person-body .label { margin-bottom: 7px; }
.people--compact .person-body h3 { margin-bottom: 7px; }
.people--compact .bio { margin-top: 14px; padding-top: 0; }
.people--compact .bio summary { padding-top: 13px; }

.band--team-feature { background: var(--ground); padding: clamp(58px, 7vw, 96px) 0; }
.team-feature {
  display: grid;
  grid-template-columns: minmax(240px, .56fr) minmax(0, 1.44fr);
  gap: clamp(30px, 5vw, 72px);
  align-items: center;
}
.team-feature-copy h2 { margin-bottom: 16px; }
.team-feature-copy > p:not(.label) { color: var(--slate); font-size: var(--t-lede); line-height: 1.5; }
.team-feature-copy .alink { margin-top: 24px; }
.team-feature-photo {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-lg);
  background: var(--paper-2);
  box-shadow: var(--lift-2);
}
.team-feature-photo picture { display: block; }
.team-video-launch {
  position: relative;
  display: block;
  color: var(--navy);
}
.team-video-launch::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(20,30,53,.48), rgba(20,30,53,.06) 42%, rgba(20,30,53,.02));
  transition: opacity .2s ease;
}
.team-video-launch:hover::after { opacity: .86; }
.team-video-launch:focus-visible { outline: 4px solid var(--coral); outline-offset: 4px; }
.team-video-callout {
  position: absolute;
  z-index: 1;
  left: clamp(16px, 2.5vw, 28px);
  bottom: clamp(16px, 2.5vw, 28px);
  display: flex;
  max-width: calc(100% - clamp(32px, 5vw, 56px));
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border: 1px solid rgba(255,255,255,.3);
  border-radius: 18px;
  background: rgba(20,30,53,.92);
  color: #fff;
  box-shadow: 0 14px 36px rgba(20,30,53,.34);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
  transition: background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.team-video-play {
  flex: 0 0 auto;
  display: grid;
  width: clamp(48px, 5vw, 60px);
  aspect-ratio: 1;
  place-items: center;
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 50%;
  background: var(--coral);
  color: var(--navy);
  box-shadow: 0 8px 22px rgba(20,30,53,.28);
}
.team-video-play svg { width: 28%; margin-left: 5%; }
.team-video-copy { display: grid; gap: 3px; min-width: 0; }
.team-video-copy strong {
  font-family: var(--display);
  font-size: clamp(16px, 1.7vw, 21px);
  line-height: 1.15;
}
.team-video-copy > span {
  color: rgba(255,255,255,.78);
  font-size: var(--t-caption);
  font-weight: 650;
  line-height: 1.25;
}
.team-video-launch:hover .team-video-callout {
  background: rgba(20,30,53,.97);
  box-shadow: 0 17px 40px rgba(20,30,53,.4);
  transform: translateY(-2px);
}
.team-feature-photo img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 3 / 2;
  object-fit: contain;
}
.team-feature-photo figcaption {
  position: absolute;
  left: 18px;
  bottom: 18px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 999px;
  background: rgba(27,42,74,.88);
  color: #fff;
  font-size: var(--t-caption);
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.2;
  box-shadow: 0 6px 18px rgba(27,42,74,.2);
}
.team-video-frame {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 2;
  border: 0;
  background: var(--navy);
}

.strip--team { background: var(--paper-2); padding: clamp(28px, 4vw, 56px) var(--gutter); }
.strip--team img {
  width: min(var(--shell), 100%);
  height: auto;
  max-height: none;
  margin: 0 auto;
  border-radius: var(--r-lg);
  object-fit: contain;
  box-shadow: var(--lift-2);
}

.origin-copy { display: grid; gap: 18px; }
.origin-copy p { color: var(--slate); }
.origin-story {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(360px, .98fr);
  gap: clamp(42px, 6vw, 88px);
  align-items: start;
}
.origin-story-copy { display: grid; gap: 28px; }
.origin-story-copy .sec-title h2 { max-width: 13em; }
.origin-story-visual { display: grid; gap: 0; align-self: start; }
.origin-story-media {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--rule);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  background: var(--paper-2);
}
.origin-story-media img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 680 / 514;
  object-fit: cover;
}
.origin-recognition {
  margin-top: 24px;
  padding-top: 26px;
  border-top: 1px solid var(--rule);
}
.origin-recognition .label { margin-bottom: 14px; }
.origin-recognition h3 { margin-bottom: 10px; font-size: var(--t-card); }
.origin-recognition > p:not(.label):not(.award-meta) { color: var(--slate); }
@media (max-width: 900px) {
  .origin-story { grid-template-columns: 1fr; gap: 32px; }
  .origin-story-visual { max-width: 680px; }
}

@media (max-width: 820px) {
  .team-feature { grid-template-columns: 1fr; }
  .team-feature-copy { max-width: 38rem; }
  .why-novinway { grid-template-columns: 1fr; gap: 22px; }
  .why-novinway-copy { gap: 15px; }
  .why-novinway-answer { margin-top: 2px; }
  .specialists-intro { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .specialists-intro-title { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .band--why, .band--care-specialists { padding: 46px 0; }
  .why-novinway-copy p, .why-novinway-answer { font-size: var(--t-body); }
  .why-novinway-answer { padding-top: 18px; }
  .specialists-intro { grid-template-columns: 1fr; gap: 16px; margin-bottom: 24px; }
  .specialists-intro-title { grid-column: auto; }
  .band--team-feature { padding: 48px 0; }
  .team-feature { gap: 26px; }
  .team-feature-photo { border-radius: var(--r); }
  .team-feature-photo img { aspect-ratio: 3 / 2; object-fit: contain; }
  .team-feature-photo figcaption { left: 12px; bottom: 12px; padding: 7px 10px; }
  .team-video-callout { left: 12px; bottom: 12px; max-width: calc(100% - 24px); gap: 10px; padding: 9px 12px 9px 9px; border-radius: 14px; }
  .team-video-play { width: 46px; }
  .team-video-copy strong { font-size: 15px; }
  .team-video-copy > span { font-size: 11px; }
  .strip--team { padding: 30px var(--gutter); }
  .strip--team img { border-radius: var(--r); }
}

/* Final cascade corrections for shared interactive and responsive elements. */
.inline-cta .btn {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--navy);
}
.inline-cta .btn:hover { background: var(--coral-light); border-color: var(--coral-light); }
.nav-desktop > a.nav-cta[aria-current="page"],
.nav-panel-inner > a.btn {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--navy);
}
@media (max-width: 720px) {
  .hero--image .hero-grid { grid-template-columns: 1fr; }
  .hero--image .hero-media img { object-position: var(--pos-m, center top); }
}

.why-quote {
  margin: 8px 0 0;
  padding: 20px 0 0 24px;
  border-top: 1px solid var(--rule);
  border-left: 3px solid var(--coral);
}
.why-quote p { color: var(--navy); font-size: var(--t-lede); font-weight: 700; line-height: 1.45; }
.why-quote cite { display: block; margin-top: 10px; color: var(--muted); font-size: var(--t-caption); font-style: normal; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.team-feature--photo-only { grid-template-columns: 1fr; }
.team-feature--photo-only .team-feature-photo { width: min(100%, 1080px); margin-inline: auto; }
@media (max-width: 720px) {
  .why-quote { padding-left: 18px; }
}