/* ==========================================================================
   Signia Solutions — site stylesheet
   Brand: #38a6e9. Ink navy #18212F is text; dark surfaces use azure --night #0B66C9.
   No frameworks, no external requests: every byte here ships from our origin,
   which is what keeps LCP/CLS clean on Core Web Vitals.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Brand */
  --brand:        #38a6e9;   /* brand blue — marks, icons, borders, decorative rules.
                                Only 2.69:1 on white, so it is NEVER a fill behind text
                                and never carries a focus ring, a control edge or a
                                display numeral on a light ground — all of those want
                                >=3:1 and use --brand-action instead. Decoration and the
                                logo mark, which WCAG exempts, are what is left. */
  --brand-logo:   #0094EF;   /* the colour traced from the official logo file. The mark
                                keeps it even as --brand moves, because the logo is the
                                one thing on the page that is not ours to restyle. */
  /* The interactive colour, and deliberately the same azure as --night below.
     Azure owned the dark bands but nothing in the light half of the page, so
     one blue now does every interactive job — buttons, focus rings, accent
     words, stat numerals, the mission line — and the palette reads as one
     idea rather than two similar blues. It is also the more legible of the
     two: white on it is 5.59:1 against the old #0076BF's 4.83:1. */
  --brand-action: #0B66C9;
  --brand-action-hover: #0A57AC; /* 7.07:1 */
  --brand-ink:    #0069AE;   /* darkened for body-size links (>=4.5:1 on white) */
  --brand-deep:   #066AAB;
  --brand-tint:   #EAF4FE;
  --brand-tint-2: #D2E7FF;

  /* Dark surfaces. Split out from --ink deliberately: --ink still has to be a
     near-black for headline text on white, but the dark *bands* wanted to be
     brighter and unmistakably blue. Changing one token for both would have
     dragged every headline toward mid-blue and cost contrast on white. */
  --night:      #0B66C9;     /* azure — hero, dark sections, footer. Pushed as bright as
                                the text allows: at #007FFF white is only 3.83:1, so body
                                copy on it would fail. Here white is 5.59:1. */
  --night-deep: #0A57AC;
  --night-lift: #1478E0;

  /* Neutrals */
  --ink:      #18212F;       /* headline navy — text only */
  --ink-2:    #26324a;
  --body:     #3D4757;
  --muted:    #5C6979;
  --line:     #E2E8F0;       /* decorative dividers / card edges */
  --line-2:   #EDF1F6;
  --line-ui:  #828A98;       /* form-control + ghost-button edge. WCAG 2.2 SC 1.4.11 wants
                                >=3:1 against the surface BEHIND it, and the pale-blue bands
                                are darker than white, so this is set for the worst case. */
  --line-btn: #828A98;
  --surface:  #FFFFFF;
  --surface-2:#F2F8FD;       /* blue-tinted, not grey — grey reads as dim next to a blue brand */
  --sky:      #EAF5FF;       /* soft daylight band, replaces most of the old navy sections */
  --sky-2:    #F6FBFF;

  /* Support */
  --amber:    #B45309;
  --amber-tint: #FDF2E6;     /* icon-chip wash behind an amber glyph */
  --amber-line: #EFD5B4;     /* hairline that reads as amber without shouting */
  --green:      #0F7B54;   /* green text on white (5.27:1) — form success, card icon */
  /* The commitment band and every primary CTA. This is as bright as the green
     can go: the band's body copy (#E6F0FA) lands at 4.57:1 here, and one step
     lighter (#118A5F) drops it to 3.77:1 — a fail. Switching that copy to pure
     white does not rescue it either, since #118A5F is only 4.35:1 against white.
     Brighter than this needs dark text on a pale green, which is a different
     section entirely. */
  --green-deep: #0F7B54;
  --green-deeper: #0B5F42; /* CTA hover — white on it is 7.69:1 */

  /* Type scale (fluid) */
  --font-sans: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --step--1: clamp(0.86rem, 0.84rem + 0.12vw, 0.94rem);
  --step-0:  clamp(1rem, 0.97rem + 0.16vw, 1.09rem);
  --step-1:  clamp(1.15rem, 1.09rem + 0.3vw, 1.35rem);
  --step-2:  clamp(1.38rem, 1.26rem + 0.6vw, 1.75rem);
  --step-3:  clamp(1.7rem, 1.45rem + 1.2vw, 2.4rem);
  --step-4:  clamp(2.05rem, 1.6rem + 2.2vw, 3.25rem);
  --step-5:  clamp(2.35rem, 1.7rem + 3.1vw, 4rem);

  /* Space & shape */
  --container: 1160px;
  --gutter: clamp(1.15rem, 4vw, 2.5rem);
  --section-y: clamp(3.5rem, 7vw, 6.5rem);
  --radius: 14px;
  --radius-lg: 22px;
  --radius-btn: 10px;         /* buttons match the nav item's corner, not a pill */
  --shadow-sm: 0 1px 2px rgba(24,33,47,.06), 0 1px 3px rgba(24,33,47,.05);
  --shadow:    0 4px 12px rgba(24,33,47,.07), 0 12px 32px rgba(24,33,47,.06);
  --shadow-lg: 0 10px 24px rgba(24,33,47,.09), 0 28px 60px rgba(24,33,47,.10);
  --ring: 0 0 0 3px rgba(56,166,233,.38);
}

/* --------------------------------------------------------------------------
   2. Reset / base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 92px; /* clears the sticky header on in-page anchors */
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--body);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 .6em;
  text-wrap: balance;
  font-weight: 700;
}
h1 { font-size: var(--step-5); letter-spacing: -0.03em; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }

p  { margin: 0 0 1.15em; max-width: 68ch; text-wrap: pretty; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.25em; }
li { margin-bottom: .45em; }

a { color: var(--brand-ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--brand-deep); }

img, svg, video { max-width: 100%; height: auto; display: block; }
strong { color: var(--ink); font-weight: 650; }
hr { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

:focus-visible {
  /* --brand-action, not --brand: a focus indicator has to clear 3:1 against the
     surface behind it (WCAG 2.2 SC 1.4.11) and --brand is 2.69:1 on white. */
  outline: 2px solid var(--brand-action);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Accented word in a headline — the one typographic device the live site has
   that this rebuild lacked; it sets "AFTER-HOURS" apart from the rest of the
   line. --brand-action, not --brand, because on white --brand is 2.69:1 and
   even display type needs 3:1. On a photographic hero the ground is dark, so a
   light tint carries it there instead. */
.hl { color: var(--brand-action); }
.hero .hl,
.page-hero--media .hl,
.section--dark .hl { color: #8FD3FF; }

::selection { background: var(--brand-tint-2); color: var(--ink); }

/* Skip link — first tab stop, WCAG 2.4.1 */
.skip-link {
  position: absolute; left: 50%; top: 0; transform: translate(-50%, -140%);
  z-index: 200; background: var(--night); color: #fff;
  padding: .75rem 1.25rem; border-radius: 0 0 10px 10px;
  font-weight: 600; text-decoration: none; transition: transform .18s ease;
}
.skip-link:focus { transform: translate(-50%, 0); color: #fff; }

/* --------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: 820px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--tint { background: var(--surface-2); }
.section--brandtint { background: linear-gradient(180deg, var(--brand-tint) 0%, #fff 100%); }

/* Soft daylight band. Carries the sections that used to be navy. */
.section--sky {
  background: linear-gradient(180deg, var(--sky) 0%, var(--sky-2) 100%);
  border-top: 1px solid #DCEBFA; border-bottom: 1px solid #DCEBFA;
}

.section--dark {
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(56,166,233,.22), transparent 60%),
    radial-gradient(760px 420px at 0% 110%, rgba(56,166,233,.13), transparent 62%),
    var(--night);
  color: #E6F0FA;
}
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

/* A dark band held inside the page rather than spanning it. The section keeps
   every .section--dark descendant rule — white headings, inverted buttons,
   lifted link and eyebrow colours — while the azure surface itself moves onto
   the container, so the band becomes a panel with page showing either side. */
.section--dark.section--boxed {
  background: transparent;
  padding-block: clamp(2.25rem, 5vw, 3.75rem);
}
.section--boxed > .container {
  background:
    radial-gradient(760px 380px at 88% -12%, rgba(56,166,233,.24), transparent 62%),
    radial-gradient(520px 300px at 4% 112%, rgba(56,166,233,.14), transparent 64%),
    var(--night);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding-block: clamp(2.25rem, 5vw, 3.25rem);
}

/* The commitment band in green rather than azure. Green as an *accent on* azure
   was the first idea and it does not survive measurement: the greens that read
   as green are 2.75-2.91:1 against #0B66C9, under even the 3:1 for a graphic,
   because the two hues sit too close in luminance. Green as the surface works
   — white on it is 6.52:1 — and gives the page a second colour moment instead
   of a weak accent. */
.section--boxed--green > .container {
  background:
    radial-gradient(760px 380px at 88% -12%, rgba(41,206,144,.20), transparent 62%),
    radial-gradient(520px 300px at 4% 112%, rgba(41,206,144,.12), transparent 64%),
    var(--green-deep);
}
/* The inverted button takes the band's own colour, not --night, so its label
   does not arrive azure on a green panel. Needs .section--dark in the selector
   to outrank ".section--dark .btn--primary", which is equal specificity but
   declared later in the file. */
/* Same reason: the eyebrow's little rule is --brand, which is azure. */
.section--dark.section--boxed--green .eyebrow::before { background: #E0F0FF; }
.section--dark a { color: #FFFFFF; }

.stack > * + * { margin-top: 1rem; }
.center { text-align: center; }
.center p { margin-inline: auto; }

.grid { display: grid; gap: clamp(1rem, 2.2vw, 1.75rem); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

/* Section intro block */
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-size: var(--step--1); font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-ink); margin: 0 0 .9rem;
}
.eyebrow::before {
  content: ""; width: 22px; height: 2px; border-radius: 2px;
  background: var(--brand); flex: none;
}
.eyebrow--center { justify-content: center; }
.section--dark .eyebrow { color: #E0F0FF; }

.lede { font-size: var(--step-1); color: var(--muted); line-height: 1.6; }
.lede--body { color: var(--body); }
.section--dark .lede { color: #E6F0FA; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */
/* Buttons share the nav's language: uppercase label, soft rectangle, and a
   hover that swaps the surface colour instead of lifting the element. No
   translate, no growing shadow — the nav doesn't do those, so neither do these. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  padding: .9rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit; font-weight: 700; font-size: var(--step--1);
  letter-spacing: .085em; text-transform: uppercase;
  line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease,
              transform .15s ease;
  white-space: nowrap;
}
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

/* Green, not --brand-action: the call to action is the one place the palette
   wants a colour of its own, distinct from the azure that carries brand,
   links, focus rings and accent words. */
.btn--primary { background: var(--green-deep); color: #fff; }
.btn--primary:hover { background: var(--green-deeper); color: #fff; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* Same hover as a nav item: brand tint behind brand-ink text. */
.btn--ghost { background: #fff; color: var(--ink); border-color: var(--line-btn); }
.btn--ghost:hover { background: var(--brand-tint); color: var(--brand-ink); border-color: var(--brand-tint); }

.btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.34); }
.btn--outline-light:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(255,255,255,.55); }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--step-0); letter-spacing: .075em; }
.btn--block { width: 100%; }

/* Long uppercase labels need room to break on the narrowest phones. */
@media (max-width: 400px) {
  .btn { white-space: normal; text-align: center; }
}

.btn-row { display: flex; flex-wrap: wrap; gap: .85rem; }
.btn-row--center { justify-content: center; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: .4rem;
  font-weight: 650; text-decoration: none;
}
.link-arrow::after { content: "→"; transition: transform .16s ease; }
.link-arrow:hover::after { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   5. Header / navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.9);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease, box-shadow .2s ease;
}
.site-header.is-stuck { border-bottom-color: var(--line); box-shadow: 0 1px 14px rgba(24,33,47,.06); }

.nav {
  display: flex; align-items: center; gap: 1rem;
  min-height: 76px;
}

.brand { display: inline-flex; align-items: center; gap: .7rem; text-decoration: none; margin-right: auto; }
.brand__mark { width: 34px; height: 34px; color: var(--brand-logo); flex: none; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  /* The wordmark reads in the logo blue, matching the mark beside it. As part of
     a logotype it is exempt from SC 1.4.3, which it needs to be: #0094EF is
     3.24:1 on white, under the 4.5:1 body text would otherwise require. */
  font-size: 1.02rem; font-weight: 800; color: var(--brand-logo);
  letter-spacing: .01em; text-transform: uppercase;
}
.brand__tag { font-size: .68rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--brand-ink); }

.nav__links { display: flex; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.nav__links a {
  display: block; padding: .6rem .8rem; border-radius: var(--radius-btn);
  color: var(--ink); font-weight: 700; font-size: .82rem; text-decoration: none;
  letter-spacing: .095em; text-transform: uppercase;
  transition: background-color .15s ease, color .15s ease;
}
.nav__links a:hover { background: var(--brand-tint); color: var(--brand-ink); }
.nav__links a[aria-current="page"] { color: var(--brand-ink); background: var(--brand-tint); }

.nav__actions { display: flex; align-items: center; gap: .6rem; }
.nav__phone {
  display: inline-flex; align-items: center; gap: .45rem;
  font-weight: 700; color: var(--ink); text-decoration: none; font-size: .88rem;
  letter-spacing: .02em;
  padding: .6rem .75rem; border-radius: var(--radius-btn);
}
.nav__phone svg { width: 1.05em; height: 1.05em; color: var(--brand-ink); }
.nav__phone:hover { color: var(--brand-ink); background: var(--brand-tint); }

.nav__toggle {
  display: none;
  width: 44px; height: 44px; padding: 0;
  align-items: center; justify-content: center;
  background: #fff; border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); cursor: pointer;
}
.nav__toggle svg { width: 22px; height: 22px; }
.nav__toggle .icon-close { display: none; }
.nav__toggle[aria-expanded="true"] .icon-open { display: none; }
.nav__toggle[aria-expanded="true"] .icon-close { display: block; }

@media (max-width: 940px) {
  .nav__toggle { display: inline-flex; }
  .nav__phone span { display: none; }
  .nav__menu {
    position: absolute; left: 0; right: 0; top: 100%;
    background: #fff; border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
    padding: .75rem var(--gutter) 1.5rem;
    display: none;
  }
  .nav__menu.is-open { display: block; }
  .nav__links { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__links a { padding: .95rem .6rem; border-bottom: 1px solid var(--line-2); border-radius: 0; font-size: .92rem; }
  .nav__menu .btn { margin-top: 1.1rem; width: 100%; }
}
@media (min-width: 941px) {
  .nav__menu { display: flex !important; align-items: center; gap: 1rem; }
  .nav__menu .btn { display: none; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
/* Night hero. The product is the hours when everyone else is asleep, so the page
   opens after dark and the white call card reads as the one light still on.
   This is an accent, not a return to the eight dark bands the palette pass
   removed — the hero and the closing commitment band are dark, and everything
   between them stays bright. */
.hero {
  position: relative; overflow: hidden;
  /* Neutral, so nothing blue shows if the photograph fails to load. The picture
     covers this entirely in the normal case. */
  background: #0E1218;
  color: #E6F0FA;
  padding-block: clamp(3.5rem, 8vw, 6.5rem);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
/* The triage photograph, drifting slowly enough that you notice it only if you
   stay. ::before is the picture, ::after the scrim over it — the brand-mark
   watermark that used to live on ::after is gone, because a watermark laid over
   a photograph is just noise. */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: url("../img/hero-rn-bg.webp");
  background-repeat: no-repeat;
  /* Oversized on purpose: background-position can only pan across whatever slack
     exists, and `cover` leaves almost none. 120% is the ceiling here — this photo
     is 2.86:1, so at 150% the travel was wide enough to pan the nurse clean out
     of frame and leave an abstract gradient. */
  background-size: auto 120%;
  /* The keyframes carry no fill-mode, so when reduced-motion collapses the
     animation this base position is what remains on screen. Without it the
     fallback is 0% 0% — the empty blurred corner, with the nurse cropped off
     the right edge. It sits mid-way between the two keyframe stops. */
  background-position: 87% 51%;
  animation: hero-pan 22s ease-in-out infinite alternate;
  pointer-events: none;
}

/* A second, faster-moving layer. The photograph alone drifts too slowly to
   register as motion — this is what actually reads as "the page is alive".
   Sits above the picture, below the scrim, so it lights the photo rather than
   floating over the text. */
.hero__aurora {
  position: absolute; inset: -20%; z-index: 0; pointer-events: none;
  background:
    /* Was three blue glows, which tinted the photograph as much as the scrim
       did. Neutral light still reads as movement without recolouring her. */
    radial-gradient(38% 46% at 22% 30%, rgba(255,255,255,.16), transparent 70%),
    radial-gradient(32% 40% at 74% 68%, rgba(255,255,255,.12), transparent 72%),
    radial-gradient(30% 34% at 52% 12%, rgba(255,255,255,.09), transparent 70%);
  filter: blur(6px);
  animation: aurora-a 17s ease-in-out infinite alternate;
}
@keyframes aurora-a {
  0%   { transform: translate3d(-4%, -2%, 0) scale(1); }
  50%  { transform: translate3d(3%, 4%, 0) scale(1.16); }
  100% { transform: translate3d(6%, -3%, 0) scale(1.06); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  /* Two passes. The vertical one darkens the top edge so the subject's cropped
     head fades into the white header instead of butting against it; the angled
     one keeps the headline over a near-opaque left end while the photograph
     stays legible past the middle. */
  background:
    linear-gradient(180deg, rgba(8,11,16,.46) 0%, rgba(8,11,16,0) 26%),
    linear-gradient(100deg,
      rgba(8,11,16,.90) 0%,
      rgba(8,11,16,.83) 34%,
      rgba(10,14,20,.62) 58%,
      rgba(12,16,22,.46) 100%);
  pointer-events: none;
}
/* Deliberately background-position rather than transform. A transform animation
   is handed to the compositor, which is fine in a browser but invisible to the
   headless harness used to check this — so the previous drift could be shown to
   be correctly wired but never shown to actually move. This runs on the main
   thread, which makes it observable, and one slow pan on one element is not a
   cost worth optimising away. Both endpoints stay inside the 150% slack, so no
   edge of the photograph is ever exposed. */
@keyframes hero-pan {
  from { background-position: 100% 44%; }
  to   { background-position: 74% 58%; }
}
.hero__inner { position: relative; z-index: 1; display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) { .hero__inner { grid-template-columns: 1.15fr .85fr; } }

.hero h1 { color: #fff; }
/* #B9C7DA was set against the old navy; on azure it is 4.12:1, under the 4.5:1
   body copy needs. */
.hero__lede { font-size: var(--step-1); color: #E6F0FA; max-width: 56ch; }
.hero .eyebrow { color: #E0F0FF; }

/* The solid button was --brand-action on a navy ground, which read clearly. On
   azure that fill is about 1.5:1 against the background — the button's own edge
   is its only boundary, so at that ratio it dissolves into the section (SC
   1.4.11 wants 3:1). Inverted to white, it is 5.59:1 both ways. */
.hero .btn--primary,
.page-hero--media .btn--primary,
.section--dark .btn--primary {
  background: #fff; color: var(--green-deep); border-color: #fff;
}
.hero .btn--primary:hover,
.page-hero--media .btn--primary:hover,
.section--dark .btn--primary:hover {
  background: #E4F5EC; color: var(--green-deeper); border-color: #E4F5EC;
}

.hero__badge {
  display: inline-flex; align-items: center; gap: .55rem;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.17);
  color: #DCE7F5; border-radius: 999px; padding: .45rem 1rem;
  font-size: var(--step--1); font-weight: 650; margin-bottom: 1.4rem;
}
.hero__badge .dot {
  /* brightened off the body green — .16 alpha of the light-mode dot disappears
     against the night ground. The pulse is the one animation on this page that
     means something: the line is open right now. */
  width: 8px; height: 8px; border-radius: 50%; background: #29CE90; flex: none;
  animation: dot-pulse 2.6s ease-out infinite;
}
@keyframes dot-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(41,206,144,.55); }
  70%  { box-shadow: 0 0 0 10px rgba(41,206,144,0); }
  100% { box-shadow: 0 0 0 0 rgba(41,206,144,0); }
}

/* Hero entrance: the copy arrives, then the call card a beat later. */
@keyframes rise-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: none; }
}
.hero__inner > * { animation: rise-in .75s cubic-bezier(.22,.61,.36,1) both; }
.hero__inner > *:nth-child(2) { animation-delay: .16s; }

.hero__card {
  background: #fff;
  border: 1px solid #DCEBFA;
  border-radius: var(--radius-lg);
  padding: clamp(1.35rem, 3vw, 2rem);
  /* --shadow-lg is tuned for a light ground and vanishes on the night hero;
     this lifts the card off the dark instead of sinking into it */
  box-shadow: 0 26px 64px rgba(0,0,0,.46), 0 0 0 1px rgba(255,255,255,.05);
}
.hero__card h2 { font-size: var(--step-2); color: var(--ink); margin-bottom: 1rem; }
.hero__card ul { list-style: none; padding: 0; margin: 0; }
.hero__card li {
  display: flex; gap: .75rem; align-items: flex-start;
  padding: .7rem 0; border-bottom: 1px solid var(--line-2);
  color: var(--body); font-size: .98rem;
}
.hero__card li:last-child { border-bottom: 0; padding-bottom: 0; }
.hero__card li svg { width: 20px; height: 20px; flex: none; color: var(--brand-ink); margin-top: .15rem; }

/* Trust strip beneath the hero */
.trustbar {
  background: var(--sky); color: var(--ink);
  /* A thin azure edge carries the hero's colour into the light band instead
     of stopping it dead at the fold. */
  border-top: 3px solid var(--night);
  border-bottom: 1px solid #D2E7FF;
}
.trustbar__list {
  /* Measured, not guessed: naming pathways, policies and procedures in full put
     the four items at 1089px inside a 1080px container — over by 9px, which
     stranded the last one on a row of its own. Dropping the strip to 14px and
     easing the gap back brings it to ~1041px, leaving real slack rather than
     sitting on the boundary. */
  display: flex; flex-wrap: wrap; gap: clamp(.9rem, 2.2vw, 1.75rem);
  list-style: none; margin: 0; padding: 1.15rem 0;
  justify-content: center; align-items: center;
  font-size: .875rem; font-weight: 600; letter-spacing: .04em;
}
.trustbar__list li { display: inline-flex; align-items: center; gap: .5rem; margin: 0; }
.trustbar__list svg { width: 17px; height: 17px; color: var(--brand-ink); flex: none; }

/* --------------------------------------------------------------------------
   7. Cards
   -------------------------------------------------------------------------- */
.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.35rem, 2.5vw, 1.85rem);
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  height: 100%;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow); border-color: #CFE3F5; }
.card h3 { font-size: var(--step-1); margin-bottom: .5rem; }
.card p:last-child { margin-bottom: 0; }
.card--flat:hover { transform: none; box-shadow: var(--shadow-sm); }

.card__icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: grid; place-items: center; margin-bottom: 1rem;
  background: var(--brand-tint); color: var(--brand-ink);
  transition: transform .28s cubic-bezier(.34,1.4,.64,1), background-color .28s ease;
}
.card__icon svg { width: 23px; height: 23px; }
.card:hover .card__icon { transform: translateY(-3px) rotate(-4deg); }

/* A rotating accent so a six-card grid is not six identical blue chips. Every
   glyph/chip pair here was measured at >=3:1, the floor SC 1.4.11 sets for a
   graphic that carries meaning — the palette is decorative, the legibility is
   not negotiable. */
.grid > .card:nth-child(4n+2) .card__icon { background: #E2F5EE; color: #0F7B54; }
.grid > .card:nth-child(4n+3) .card__icon { background: #EFEBFD; color: #5A44C0; }
.grid > .card:nth-child(4n+4) .card__icon { background: #FDF2E6; color: #B45309; }

/* A rule that draws itself across the top edge on hover. */
.card { position: relative; }
.card::before {
  content: ""; position: absolute; inset: 0 auto auto 0;
  height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand), var(--brand-action));
  border-radius: var(--radius) var(--radius) 0 0;
  transition: width .4s cubic-bezier(.22,.61,.36,1);
}
.card:hover::before { width: 100%; }
.card--flat::before { display: none; }

.section--dark .card {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
  box-shadow: none; color: #C2D0E2;
}
.section--dark .card:hover { border-color: rgba(56,166,233,.5); background: rgba(255,255,255,.08); }
/* Outranks the nth-child accents above, so a dark band keeps its own treatment
   instead of inheriting light chips meant for white cards. */
.section--dark .grid > .card .card__icon,
.section--dark .card__icon { background: rgba(255,255,255,.16); color: #D8ECFF; }

/* Problem list (the after-hours gap).
   Each item gets its own icon rather than four identical warning triangles —
   repeating one glyph reads as decoration, distinct glyphs carry meaning.
   auto-fit lets it sit 2-up in the wide left column and stack on a phone. */
.problem-list {
  list-style: none; padding: 0; margin: 0 0 1.75rem;
  display: grid; gap: .8rem;
  /* auto-fit rather than a viewport media query: this list sits in the left
     column of .split, which itself narrows when .split goes two-up at 900px.
     Container width is therefore not a function of viewport width, and a
     breakpoint guesses wrong at exactly that size. 265px is the track width
     below which the labels start breaking mid-phrase. */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 265px), 1fr));
}
.problem-list li {
  display: flex; flex-direction: column; align-items: flex-start; margin: 0;
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1.15rem 1.2rem 1.2rem;
  font-weight: 650; color: var(--ink); line-height: 1.35;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.problem-list li:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow);
  border-color: var(--amber-line);
}
.problem-list__icon {
  width: 46px; height: 46px; border-radius: 12px; margin-bottom: .85rem;
  display: grid; place-items: center;
  background: var(--amber-tint); color: var(--amber);
  box-shadow: inset 0 0 0 1px var(--amber-line);
}
.problem-list__icon svg { width: 24px; height: 24px; }

/* Checklist */
.checklist { list-style: none; padding: 0; margin: 0; display: grid; gap: .65rem; }
.checklist li { display: flex; gap: .7rem; align-items: flex-start; margin: 0; }
.checklist svg { width: 21px; height: 21px; color: var(--brand-ink); flex: none; margin-top: .2rem; }
.section--dark .checklist svg { color: #BFE3FF; }

/* The mission statement, set apart from the paragraphs around it by weight,
   slant and colour rather than by size — the surrounding copy is all one size
   deliberately. --brand-action, not --brand: this is body-size text and needs
   4.5:1 on white, which --brand-action clears at 4.84:1 and --brand does not. */
.mission {
  font-style: italic;
  font-weight: 600;
  color: var(--brand-action);
}

/* Commitment — a sheet of paper on a desk, not a section.
   The photograph is the ground and the copy sits on an actual page within it,
   which is why this reads as something being read rather than another band.
   Three details do that work: a 3px radius instead of the site's 14px (paper
   has a corner, not a rounded UI edge), a fractional rotation so it is laid
   down rather than aligned to the grid, and a long soft shadow so it floats
   above the desk. */
.commitment {
  position: relative;
  overflow: hidden;
  background: #201a16;
  padding-block: clamp(3rem, 8vw, 6.5rem);
}
.commitment::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url("../img/desk-reading.webp") no-repeat center / cover;
  animation: desk-drift 34s ease-in-out infinite alternate;
}
/* Darkens the desk just enough that the white page reads as lit, and keeps the
   left third quieter so the sheet is the thing you look at. */
.commitment::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: linear-gradient(100deg, rgba(20,16,13,.62) 0%, rgba(20,16,13,.34) 46%, rgba(20,16,13,.12) 100%);
}
@keyframes desk-drift {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to   { transform: scale(1.10) translate3d(-1.5%, -1%, 0); }
}

.commitment > .container { position: relative; z-index: 1; }

.commitment__sheet {
  max-width: 33rem;
  background: #fff;
  color: var(--body);
  padding: clamp(1.6rem, 4vw, 2.75rem);
  border-radius: 3px;
  box-shadow: 0 22px 60px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.22);
  transform: rotate(-0.7deg);
}
.commitment__sheet p:last-child { margin-bottom: 0; }
/* Straightened on small screens — a tilt that looks deliberate at 33rem just
   looks broken when the sheet is the full width of a phone. */
@media (max-width: 620px) {
  .commitment__sheet { transform: none; }
}

/* Pull quote */
.pullquote {
  margin: 0; padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1.5rem, 4vw, 3rem);
  background: var(--brand-tint); border-radius: var(--radius-lg);
  border-left: 5px solid var(--brand);
  font-size: var(--step-2); font-weight: 650; color: var(--ink);
  line-height: 1.35; letter-spacing: -0.01em;
}
.pullquote p { max-width: none; margin: 0; }
.pullquote cite { display: block; margin-top: .85rem; font-size: var(--step--1); font-style: normal; font-weight: 600; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }

/* --------------------------------------------------------------------------
   8. Steps (how it works)
   -------------------------------------------------------------------------- */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: step; }
.steps > li {
  position: relative; margin: 0;
  padding: 0 0 2.1rem 4.4rem;
  counter-increment: step;
}
.steps > li::before {
  content: counter(step, decimal-leading-zero);
  position: absolute; left: 0; top: 0;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-action); color: #fff;
  font-weight: 800; font-size: .95rem; letter-spacing: .02em;
  box-shadow: 0 0 0 5px var(--brand-tint);
}
.steps > li::after {
  content: ""; position: absolute; left: 23px; top: 52px; bottom: 4px;
  width: 2px; background: linear-gradient(180deg, var(--brand-tint-2), var(--line));
}
.steps > li:last-child { padding-bottom: 0; }
.steps > li:last-child::after { display: none; }
.steps h3 { font-size: var(--step-1); margin-bottom: .35rem; }
.steps p { margin-bottom: 0; }

.section--dark .steps > li::before { box-shadow: 0 0 0 5px rgba(56,166,233,.18); }
.section--dark .steps > li::after { background: linear-gradient(180deg, rgba(56,166,233,.45), rgba(255,255,255,.08)); }

/* Numbered reason cards (roman numerals in source copy) */
.reasons { display: grid; gap: clamp(1rem, 2.2vw, 1.6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); counter-reset: reason; }
.reason { position: relative; counter-increment: reason; }
.reason__num {
  font-size: var(--step--1); font-weight: 800; letter-spacing: .12em;
  color: var(--brand-ink); text-transform: uppercase; display: block; margin-bottom: .5rem;
}

/* --------------------------------------------------------------------------
   9. Stats
   -------------------------------------------------------------------------- */
.stats { display: grid; gap: clamp(1rem, 2.5vw, 2rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
.stat { text-align: center; padding: 1.25rem .75rem; }
/* Large bold text still needs 3:1; --brand does not reach it on white. */
.stat__value { display: block; font-size: var(--step-4); font-weight: 800; color: var(--brand-action); line-height: 1; letter-spacing: -0.03em; }
.stat__label { display: block; margin-top: .6rem; font-size: var(--step--1); color: var(--muted); font-weight: 600; }
.section--dark .stat__value { color: #BFE3FF; }
.section--dark .stat__label { color: #A9B8CC; }

/* --------------------------------------------------------------------------
   10. Media / split sections
   -------------------------------------------------------------------------- */
.split { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; }
  .split--wide-left { grid-template-columns: 1.2fr .8fr; }
  .split--wide-right { grid-template-columns: .8fr 1.2fr; }
  .split__media--first { order: -1; }
}
.media-frame {
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-lg); background: var(--brand-tint);
  position: relative;
}
.media-frame img {
  width: 100%;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
}
/* The frame already clips, so the picture can grow inside it without nudging
   anything on the page — no reflow, no layout shift. */
.media-frame:hover img { transform: scale(1.045); }


/* --------------------------------------------------------------------------
   11. FAQ
   -------------------------------------------------------------------------- */
.faq { display: grid; gap: .75rem; max-width: 860px; margin-inline: auto; }
.faq details {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.faq details[open] { border-color: #CFE3F5; box-shadow: var(--shadow-sm); }
.faq summary {
  cursor: pointer; list-style: none;
  padding: 1.05rem 3rem 1.05rem 1.3rem;
  font-weight: 650; color: var(--ink); font-size: var(--step-0);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 1.3rem; top: 50%;
  width: 11px; height: 11px; margin-top: -6px;
  border-right: 2px solid var(--brand-action); border-bottom: 2px solid var(--brand-action);
  transform: rotate(45deg); transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--brand-ink); }
.faq__body { padding: 0 1.3rem 1.25rem; }
.faq__body p:last-child { margin-bottom: 0; }

/* --------------------------------------------------------------------------
   12. CTA band
   -------------------------------------------------------------------------- */
.cta-band {
  background: linear-gradient(135deg, #E8F4FE 0%, #F5FAFF 62%, #FFFFFF 100%);
  color: var(--body);
  border-top: 1px solid #CBE3F8; border-bottom: 1px solid #CBE3F8;
}
.cta-band h2 { color: var(--ink); }
.cta-band__inner { display: grid; gap: 2rem; align-items: center; }
@media (min-width: 860px) { .cta-band__inner { grid-template-columns: 1.35fr .65fr; } }
.cta-band .btn-row { justify-content: flex-start; }
@media (min-width: 860px) { .cta-band .btn-row { justify-content: flex-end; } }

/* --------------------------------------------------------------------------
   13. Forms
   -------------------------------------------------------------------------- */
.form-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: clamp(1.5rem, 3.5vw, 2.5rem);
  box-shadow: var(--shadow);
}
.field { margin-bottom: 1.15rem; }
.field label {
  display: block; font-weight: 650; color: var(--ink);
  font-size: var(--step--1); margin-bottom: .4rem;
}
.field .req { color: #C1121F; }
.field .hint { display: block; font-weight: 400; color: var(--muted); font-size: .82rem; margin-top: .3rem; }

.input, .select, .textarea {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: #fff;
  border: 1px solid var(--line-ui);
  border-radius: 10px;
  padding: .75rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
  appearance: none;
}
.textarea { min-height: 140px; resize: vertical; }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%235C6979'%3E%3Cpath d='M5.5 7.5 10 12l4.5-4.5' stroke='%235C6979' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right .8rem center; background-size: 20px;
  padding-right: 2.5rem;
}
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--brand-action); box-shadow: var(--ring);
}
.input::placeholder, .textarea::placeholder { color: #6E7784; }

.field-row { display: grid; gap: 0 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note { font-size: var(--step--1); color: var(--muted); margin-top: 1rem; }

.form-status { display: none; border-radius: 10px; padding: .9rem 1.1rem; margin-bottom: 1.25rem; font-weight: 600; font-size: var(--step--1); }
.form-status.is-visible { display: block; }
.form-status--ok { background: #E7F7F0; color: var(--green); border: 1px solid #A9DFC8; }
.form-status--err { background: #FDECEC; color: #A61B1B; border: 1px solid #F3BDBD; }

/* --------------------------------------------------------------------------
   14. Contact details
   -------------------------------------------------------------------------- */
.contact-methods { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.contact-method {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.4rem; box-shadow: var(--shadow-sm);
}
.contact-method .card__icon { margin-bottom: .85rem; }
.contact-method h3 { font-size: var(--step-0); text-transform: uppercase; letter-spacing: .1em; color: var(--muted); font-weight: 700; margin-bottom: .5rem; }
.contact-method a, .contact-method address {
  font-style: normal; font-size: var(--step-1); font-weight: 650;
  color: var(--ink); text-decoration: none; line-height: 1.4; display: block;
}
.contact-method a:hover { color: var(--brand-ink); }
.contact-method .sub { font-size: var(--step--1); color: var(--muted); font-weight: 500; margin: .35rem 0 0; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.site-footer { background: var(--night); color: #E6F0FA; padding-block: clamp(2rem, 3.5vw, 2.75rem) 0; font-size: var(--step--1); }
.site-footer h2, .site-footer h3 { color: #fff; }
/* Three columns, not four: "Contact" and "Visit" were split across two columns
   for one phone number, one address and a fax line nobody uses. */
.footer__grid { display: grid; gap: 1.5rem 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); }
.footer__col address { margin-top: .75rem; }
.footer__brand .brand__name { color: #fff; }
.footer__brand .brand__tag { color: #E0F0FF; }
/* The header mark is the logo blue on white, as it should be. Here the ground
   is itself blue, and --brand on --night is 2.67:1 — under the 3:1 that
   WCAG 1.4.11 asks of a meaningful graphic. Same hue, lifted to clear it. */
.footer__brand .brand__mark { color: #D8ECFF; }
.footer__brand p { margin-top: .7rem; max-width: 34ch; color: #E6F0FA; }
.footer__col h3 { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #fff; margin-bottom: .65rem; }
.footer__col ul { list-style: none; padding: 0; margin: 0; }
.footer__col li { margin-bottom: .4rem; }
.footer__col a { color: #FFFFFF; text-decoration: none; }
.footer__col a:hover { color: #fff; text-decoration: underline; }
.footer__col address { font-style: normal; color: #FFFFFF; line-height: 1.7; }
/* Partnership mark. The artwork is transparent PNG-derived and its darker
   lettering would disappear into the blue footer, so it sits on a white chip
   rather than being recoloured — a partner's mark is theirs, not ours to tint. */
.footer__partner {
  display: flex; align-items: center; gap: .9rem;
  margin-right: auto;
}
.footer__partner img {
  width: 168px; height: auto; flex: none;
  background: #fff; border-radius: 10px; padding: .55rem .75rem;
}
.footer__partner p { margin: 0; color: #E6F0FA; font-size: var(--step--1); max-width: 22ch; }

.footer__bottom {
  margin-top: 1.75rem; padding-block: 1.15rem;
  border-top: 1px solid rgba(255,255,255,.1);
  display: flex; flex-wrap: wrap; gap: 1.25rem 2rem; align-items: center;
}
.footer__bottom p { margin: 0; }
.footer__copy { color: #E6F0FA; }
.footer__legal { display: flex; flex-wrap: wrap; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.footer__legal li { margin: 0; }
/* These had no colour of their own and fell through to the global link colour,
   --brand-ink, which is chosen to pass on WHITE. On the old navy that was
   already 2.73:1; on --night it would be 1.50:1. */
.footer__legal a { color: #FFFFFF; }
.footer__legal a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   16. Page hero (interior pages)
   -------------------------------------------------------------------------- */
.page-hero {
  background:
    radial-gradient(900px 420px at 85% -30%, rgba(56,166,233,.18), transparent 60%),
    linear-gradient(180deg, #F1F8FF 0%, #FFFFFF 100%);
  color: var(--body);
  border-bottom: 1px solid #DCEBFA;
  padding-block: clamp(3rem, 6vw, 4.5rem) clamp(2.5rem, 5vw, 3.5rem);
}
.page-hero h1 { color: var(--ink); max-width: 20ch; }
.page-hero .lede { color: var(--body); max-width: 62ch; }

/* Photo-backed page hero, built the same way as the home one: ::before carries
   the picture and pans, ::after the scrim, content sits above both. Taller than
   the plain .page-hero so the photograph reads as the whole top of the page
   rather than a stripe behind the heading. */
.page-hero--media {
  position: relative; overflow: hidden;
  background: #0E1218;   /* neutral, so nothing blue shows if the photo fails to load */
  border-bottom: 0;
  padding-block: clamp(4rem, 9vw, 7rem) clamp(3.5rem, 8vw, 6rem);
  /* The picture is a variable so a second page can reuse this whole treatment
     — scrim, contrast rules, motion — by overriding three values. */
  --hero-img: url("../img/triage-hero-bg.webp");
  --hero-size: auto 165%;
  --hero-pos: 60% 50%;
}

/* Who We Are: a wider photo (2.68:1 against the triage shot's 1.78:1), so it
   needs less oversize to leave the same room to travel. */
.page-hero--contact {
  --hero-img: url("../img/contact-hero-bg.webp");
  /* 2.06:1, wider than either other hero photo, so it needs less oversize to
     fill the band. The trade-off is that at 128% it has only ~118px of
     horizontal slack, so --hero-pos barely moves the framing here — the crop
     itself is what places the subjects, not this value. */
  --hero-size: auto 128%;
  --hero-pos: 50% 42%;
}
.page-hero--who {
  --hero-img: url("../img/who-hero-bg.webp");
  --hero-size: auto 128%;
  --hero-pos: 68% 44%;
}
.page-hero--who::before { animation: who-pan 22s ease-in-out infinite alternate; }
@keyframes who-pan {
  from { background-position: 80% 42%; }
  to   { background-position: 52% 56%; }
}
.page-hero--media > .container { position: relative; z-index: 1; }
.page-hero--media::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background-image: var(--hero-img);
  background-repeat: no-repeat;
  /* 150%, not 122%: this photo is 1.78:1 where the home hero's is 2.86:1, so at
     the same oversize it had only ~56px of travel and measured 1.8% movement —
     technically animating, visibly still. */
  background-size: var(--hero-size);
  background-position: var(--hero-pos);   /* the still frame when motion is reduced */
  animation: triage-pan 20s ease-in-out infinite alternate;
}
.page-hero--media::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  /* Neutral, not azure. A coloured scrim repaints the photograph — the warm lamp
     and the scrubs all came out one flat blue. This only darkens, so the image
     keeps its own colour, and it darkens hardest at the left where the copy sits
     (white lands ~15:1 there) while thinning to .38 on the right so the picture
     is actually visible. */
  background:
    linear-gradient(180deg, rgba(8,11,16,.42) 0%, rgba(8,11,16,0) 24%),
    linear-gradient(100deg,
      rgba(8,11,16,.88) 0%,
      rgba(8,11,16,.80) 38%,
      rgba(10,14,20,.55) 66%,
      rgba(12,16,22,.38) 100%);
}
/* Both stops keep her face inside the window; the travel is ~200px. */
@keyframes triage-pan {
  from { background-position: 76% 42%; }
  to   { background-position: 44% 60%; }
}

.page-hero--media h1 { color: #fff; }
.page-hero--media .lede { color: #E6F0FA; }
.page-hero--media .eyebrow { color: #E0F0FF; }
.page-hero--media .eyebrow::before { background: #E0F0FF; }
.page-hero--media .breadcrumb li { color: #D3E4F7; }
.page-hero--media .breadcrumb a { color: #FFFFFF; }
.page-hero--media .breadcrumb li + li::before { color: #C6DCF2; }
.page-hero--media .breadcrumb [aria-current="page"] { color: #E6F0FA; }

.breadcrumb { margin-bottom: 1.25rem; font-size: var(--step--1); }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.breadcrumb li { margin: 0; display: inline-flex; align-items: center; gap: .45rem; color: var(--muted); }
.breadcrumb li + li::before { content: "/"; color: #7C8A9C; }
.breadcrumb a { color: var(--brand-ink); text-decoration: none; }
.breadcrumb a:hover { color: var(--brand-deep); text-decoration: underline; }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------------------------
   17. Utilities & motion
   -------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.m-0 { margin: 0; }
.mt-sm { margin-top: 1.5rem; }
.mt-md { margin-top: 1.75rem; }
.mt-lg { margin-top: clamp(2rem, 4vw, 3rem); }
.mb-lg { margin-bottom: 2.5rem; }
.inline-flex { display: inline-flex; }
.items-start { align-items: start; }

/* Centred intro block above a grid of cards */
.section-intro {
  max-width: 740px; margin-inline: auto;
  margin-bottom: clamp(2rem, 4vw, 3rem); text-align: center;
}
.section-intro p { margin-inline: auto; }
.measure-center { max-width: 660px; margin-inline: auto; }

/* Larger checklist used as a standalone content block */
.checklist--lg li { font-size: var(--step-1); font-weight: 600; color: var(--ink); }
.section--dark .checklist--lg li { color: #DCE6F2; }

/* Smaller section heading when the h2 sits inside a band */
.h-band { font-size: var(--step-3); margin-bottom: .5rem; }
.h-sub { font-size: var(--step-1); margin-top: 2rem; }

/* Inverted card used as the last cell in a card grid */
.card--invert { background: var(--night); border-color: var(--night); color: #E6F0FA; }
.card--invert h3 { color: #fff; }
.card--invert .link-arrow { color: #FFFFFF; }
.card--invert .link-arrow:hover { color: #fff; }

/* Advisory / caveat card */
.card--note { border-left: 3px solid var(--amber); }
.card--note h3 { font-size: var(--step-0); margin-bottom: .35rem; }
.card--note p { margin: 0; font-size: var(--step--1); }

.cta-band__sub { margin: 0; color: var(--body); }
.standard-line { color: #fff; font-weight: 700; font-size: var(--step-2); margin-top: 1.5rem; }
.brand--footer { margin-right: 0; }
.link-inline { font-size: inherit; font-weight: 600; display: inline; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.reveal { opacity: 0; transform: translateY(18px); }
.reveal.is-in { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1); }

/* Cards in a row arrive across rather than all at once. Delay is on the
   transition, not a keyframe, so the reduced-motion block still kills it. */
.grid > .reveal:nth-child(3n+2) { transition-delay: .09s; }
.grid > .reveal:nth-child(3n)   { transition-delay: .18s; }

/* Children of a revealed block cascade once their parent is in view. */
.reveal.is-in .problem-list li { animation: rise-in .55s cubic-bezier(.22,.61,.36,1) both; }
.reveal.is-in .problem-list li:nth-child(2) { animation-delay: .08s; }
.reveal.is-in .problem-list li:nth-child(3) { animation-delay: .16s; }
.reveal.is-in .problem-list li:nth-child(4) { animation-delay: .24s; }

/* Checklists tick through in order rather than landing as a block. */
.reveal.is-in .checklist li { animation: rise-in .5s cubic-bezier(.22,.61,.36,1) both; }
.reveal.is-in .checklist li:nth-child(2) { animation-delay: .07s; }
.reveal.is-in .checklist li:nth-child(3) { animation-delay: .14s; }
.reveal.is-in .checklist li:nth-child(4) { animation-delay: .21s; }
.reveal.is-in .checklist li:nth-child(5) { animation-delay: .28s; }
.reveal.is-in .checklist li:nth-child(6) { animation-delay: .35s; }

/* The eyebrow's little rule draws itself out from nothing. */
.reveal.is-in .eyebrow::before { animation: rule-draw .55s cubic-bezier(.22,.61,.36,1) both; }
@keyframes rule-draw { from { width: 0; } to { width: 22px; } }

/* The step numeral overshoots slightly on arrival — the one place a bit of
   bounce suits, because the numerals are the sequence. */
.steps.is-in > li::before { animation: badge-pop .5s cubic-bezier(.34,1.56,.64,1) both; }
.steps.is-in > li:nth-child(2)::before { animation-delay: .10s; }
.steps.is-in > li:nth-child(3)::before { animation-delay: .20s; }
.steps.is-in > li:nth-child(4)::before { animation-delay: .30s; }
.steps.is-in > li:nth-child(5)::before { animation-delay: .40s; }
@keyframes badge-pop {
  from { transform: scale(.6); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.steps.is-in > li { animation: rise-in .55s cubic-bezier(.22,.61,.36,1) both; }
.steps.is-in > li:nth-child(2) { animation-delay: .10s; }
.steps.is-in > li:nth-child(3) { animation-delay: .20s; }
.steps.is-in > li:nth-child(4) { animation-delay: .30s; }
.steps.is-in > li:nth-child(5) { animation-delay: .40s; }

/* The trust strip runs in under the hero on load. */
.trustbar__list li { animation: rise-in .6s cubic-bezier(.22,.61,.36,1) both; }
.trustbar__list li:nth-child(1) { animation-delay: .34s; }
.trustbar__list li:nth-child(2) { animation-delay: .42s; }
.trustbar__list li:nth-child(3) { animation-delay: .50s; }
.trustbar__list li:nth-child(4) { animation-delay: .58s; }

/* Media panels settle rather than simply appearing. */
.reveal.is-in .media-frame { animation: frame-in .8s cubic-bezier(.22,.61,.36,1) both; }
@keyframes frame-in {
  from { opacity: 0; transform: scale(.965); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    /* Delays too, or a staggered card still waits its turn to appear and the
       hero copy still arrives late — a near-zero duration alone is not enough. */
    animation-delay: 0s !important;
    transition-delay: 0s !important;
  }
  .reveal { opacity: 1; transform: none; }
}

@media print {
  .site-header, .nav__toggle, .cta-band, .btn { display: none !important; }
  body { color: #000; }
  .section--dark, .hero, .page-hero { background: #fff !important; color: #000 !important; }
  .hero h1, .page-hero h1, .section--dark h2 { color: #000 !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .8em; }
}