/* ==========================================================================
   CST FOR CONCUSSION - DESIGN SYSTEM
   One stylesheet, three pages. Edit tokens here and the whole site moves.

   Aesthetic: clinical warmth. Editorial, spacious, serif-led.
   Display: Cormorant Garamond (closest free match to The Seasons / Perfectly Nineties)
   Body:    Mulish (closest free match to Avenir Light)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root {
  /* --- Type families --- */
  --font-display: 'Cormorant Garamond', 'The Seasons', Georgia, 'Times New Roman', serif;
  --font-body: 'Mulish', 'Avenir Next', Avenir, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;

  /* --- Ink & brand --- */
  --navy-deep:   #2A2841;
  --navy:        #3E3B5A;
  --navy-mid:    #524F74;
  --navy-light:  #7772A5;
  --navy-veil:   rgba(62, 59, 90, 0.08);

  --amber:       #B44D24;   /* CTA + accent. Darkened from #C7592B to pass AA (5.21:1 on white). */
  --amber-deep:  #98401D;   /* CTA hover */
  --amber-light: #FFCC36;   /* the Upledger Institute UK yellow, sampled from upledger.co.uk */
  --amber-wash:  #FBF1EA;

  /* --- Surfaces. The warm paper tone is what stops this feeling corporate. --- */
  --white:       #FFFFFF;
  --paper:       #FDFBF7;
  --off-white:   #FAF9FC;
  --light-grey:  #F1EFF8;
  --amber-pale:  #FBF1EA;

  /* --- Text --- */
  --text:        #1C1B29;
  --text-light:  #55536B;
  --text-muted:  #6B6982;   /* 5.29:1 on white */
  --on-dark:     rgba(255, 255, 255, 0.92);
  --on-dark-mid: rgba(255, 255, 255, 0.74);
  --on-dark-low: rgba(255, 255, 255, 0.56);

  --border:      #E4E1EF;
  --border-soft: #EFEDF6;
  --success:     #1A6B3C;

  /* --- Type scale (fluid, 1.25 modular) --- */
  --t-display-xl: clamp(42px, 5.8vw, 74px);
  --t-display-l:  clamp(33px, 4.3vw, 52px);
  --t-display-m:  clamp(27px, 3.3vw, 39px);
  --t-display-s:  clamp(23px, 2.5vw, 30px);
  --t-body-xl:    clamp(19px, 1.9vw, 22px);
  --t-body-lg:    18px;
  --t-body:       17px;
  --t-body-sm:    15px;
  --t-micro:      13px;   /* floor for any running text */
  --t-eyebrow:    12.5px;

  --lh-display: 1.2;
  --lh-display-loose: 1.28;
  --lh-body: 1.68;
  --lh-tight: 1.35;

  /* --- Spacing (8px base) --- */
  --s-1: 4px;   --s-2: 8px;   --s-3: 12px;  --s-4: 16px;
  --s-5: 24px;  --s-6: 32px;  --s-7: 48px;  --s-8: 64px;
  --s-9: 80px;  --s-10: 104px; --s-11: 136px;

  --section-y: clamp(72px, 9vw, 128px);
  --section-y-tight: clamp(52px, 6vw, 84px);
  --gutter: clamp(20px, 5vw, 40px);

  /* --- Shape --- */
  --r-xs: 4px; --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px;

  /* --- Elevation. Warm-tinted, never grey. --- */
  --shadow-sm: 0 1px 2px rgba(42, 40, 65, 0.05), 0 2px 8px rgba(42, 40, 65, 0.04);
  --shadow-md: 0 4px 12px rgba(42, 40, 65, 0.07), 0 12px 32px rgba(42, 40, 65, 0.06);
  --shadow-lg: 0 8px 24px rgba(42, 40, 65, 0.09), 0 28px 64px rgba(42, 40, 65, 0.10);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;

  /* --- Measure --- */
  --measure: 68ch;
  --measure-px: 694px;   /* the measure resolved at body size, so headings match paragraphs */
  --measure-narrow: 56ch;
}

/* --------------------------------------------------------------------------
   2. RESET & BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

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

body {
  font-family: var(--font-body);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { max-width: 100%; display: block; height: auto; }

a { color: var(--amber); text-decoration: none; transition: color var(--dur) var(--ease); }
a:hover { color: var(--amber-deep); text-decoration: underline; text-underline-offset: 3px; }

::selection { background: var(--amber-light); color: var(--navy-deep); }

:focus-visible {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

/* --------------------------------------------------------------------------
   3. TYPOGRAPHY
   -------------------------------------------------------------------------- */
h1, h2, .display {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: var(--lh-display);
  letter-spacing: 0.004em;
  color: var(--navy);
  text-wrap: balance;
}

h3, h4, h5 {
  font-family: var(--font-body);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: -0.005em;
  color: var(--navy);
  text-wrap: balance;
}

h1 { font-size: var(--t-display-l); }
h2 { font-size: clamp(25px, 2.7vw, 34px); }
h3 { font-size: var(--t-display-s); }
h4 { font-size: var(--t-body-lg); }

/* The signature move, borrowed from upledger.co.uk: italic emphasis inside a
   roman display line. Used sparingly, one phrase per headline. */
h1 em, h2 em, .display em {
  font-style: italic;
  font-weight: 400;
  color: inherit;
}
.on-dark h1 em, .on-dark h2 em, .hero em { color: var(--amber-light); }

p { margin-bottom: 1.15em; max-width: var(--measure-px); }
p:last-child { margin-bottom: 0; }

strong, b { font-weight: 700; color: var(--text); }
em { font-style: italic; }

.body-xl { font-size: var(--t-body-xl); line-height: 1.6; color: var(--text-light); }
.body-lg { font-size: var(--t-body-lg); line-height: var(--lh-body); color: var(--text-light); }
.body-md { font-size: var(--t-body); line-height: var(--lh-body); color: var(--text-light); }
.body-sm { font-size: var(--t-body-sm); line-height: 1.6; color: var(--text-light); }
.micro   { font-size: var(--t-micro); line-height: 1.55; color: var(--text-muted); }

.measure-narrow { max-width: var(--measure-narrow); }
.center { text-align: center; }
.center p, .center .body-xl, .center .body-lg { margin-left: auto; margin-right: auto; }

/* Eyebrow / section label. The short amber rule is a recurring motif. */
/* Section head. A hairline runs the full width of the column and the label
   hangs beneath it, so the rule is doing structural work (marking where one
   section ends and the next begins) rather than decorating the text. No chip,
   no leading dash. */
/* Section label: the capsule. One component, used for every small label on
   the site, including the hero eyebrow, so there is a single treatment.
   Chosen by Caroline from label-options.html, option 01. */
.section-label, .label, .hero__eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--amber);
  background: transparent;
  border: 1px solid rgba(180, 77, 36, 0.45);
  border-radius: 999px;
  padding: 8px 18px;
  margin-bottom: var(--s-5);
}
/* a short amber segment sits on the rule, directly above the words, so the
   eye is led from the rule down into the label */


.center .section-label, .center .label { text-align: center; }





/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: 820px;
  margin: 0 auto;
  padding-inline: var(--gutter);
}
/* These must stand alone: used without .container they still need to centre. */
.container--wide,
.container--full {
  width: 100%;
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--wide { max-width: 1140px; }
.container--full { max-width: 1340px; }

.section { padding-block: var(--section-y); }
.section--tight { padding-block: var(--section-y-tight); }
.section--alt { background: var(--paper); }
.section--grey { background: var(--off-white); }

.section--dark {
  background: var(--navy);
  color: var(--on-dark);
}
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: var(--white); }
.section--dark p { color: var(--on-dark-mid); }
.section--dark strong { color: var(--white); }

.section--deep { background: var(--navy-deep); color: var(--on-dark); }
.section--deep h1, .section--deep h2, .section--deep h3 { color: var(--white); }
.section--deep p { color: var(--on-dark-mid); }

/* A hairline rule between same-tone sections so the rhythm never muddles. */
.rule { height: 1px; background: var(--border-soft); border: 0; }

.stack > * + * { margin-top: var(--s-5); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }

/* --------------------------------------------------------------------------
   5. BUTTONS
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: var(--t-body-sm);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1.25;
  padding: 16px 30px;
  min-height: 48px;
  border-radius: var(--r-pill);
  border: 1.5px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.btn:hover { text-decoration: none; }

.btn--amber {
  background: var(--amber);
  color: var(--white);
  box-shadow: 0 2px 8px rgba(26, 24, 44, 0.24);
}
.btn--amber:hover {
  background: var(--amber-deep);
  color: var(--white);
  box-shadow: 0 4px 14px rgba(26, 24, 44, 0.32);
}

.btn--navy { background: var(--navy); color: var(--white); }
.btn--navy:hover { background: var(--navy-deep); color: var(--white); }

.btn--outline-navy {
  background: transparent;
  color: var(--navy);
  border-color: var(--border);
}
.btn--outline-navy:hover { background: var(--navy); color: var(--white); border-color: var(--navy); }

.btn--yellow {
  background: var(--amber-light);
  color: #000;
  border-color: var(--amber-light);
}
.btn--yellow:hover {
  background: var(--white);
  border-color: var(--white);
  color: #000;
}

.btn--outline-white {
  background: transparent;
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.42);
}
.btn--outline-white:hover {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}

.btn--lg { font-size: var(--t-body); padding: 20px 38px; }
.btn--block { display: flex; width: 100%; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.center .btn-row { justify-content: center; }

/* Text link with a moving arrow. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  gap: 8px;
  font-weight: 700;
  font-size: var(--t-body-sm);
  letter-spacing: 0.02em;
}
.link-arrow::after {
  content: '\2192';
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover { text-decoration: none; }
.link-arrow:hover::after { transform: translateX(4px); }

input, textarea, select, button { font-family: inherit; min-height: 48px; }
textarea { min-height: 96px; }

/* --------------------------------------------------------------------------
   6. HEADER / TOP BAR
   -------------------------------------------------------------------------- */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(42, 40, 65, 0.94);
  backdrop-filter: saturate(160%) blur(12px);
  -webkit-backdrop-filter: saturate(160%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--on-dark-mid);
  font-size: var(--t-micro);
  letter-spacing: 0.06em;
  transition: background var(--dur) var(--ease);
}
.top-bar__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 13px var(--gutter);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  flex-wrap: wrap;
  text-align: center;
}
.top-bar strong, .top-bar b { color: var(--white); }
.top-bar a { color: var(--amber-light); font-weight: 700; }
.top-bar a:hover { color: var(--white); }
.top-bar__sep { color: rgba(255, 255, 255, 0.28); }

/* --------------------------------------------------------------------------
   7. HERO
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(92px, 12vw, 168px);
  text-align: center;
  color: var(--on-dark);
  background: var(--navy);
  overflow: hidden;
  isolation: isolate;
}
.hero::after {
  /* Soft vignette so overlaid type always has ground to stand on. */
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(120% 90% at 50% 40%, transparent 0%, rgba(30, 28, 48, 0.55) 100%);
  pointer-events: none;
}
/* on dark, the capsule switches to the light yellow */
.hero__eyebrow,
.section-label--light,
.label--light,
.section--dark .section-label,
.section--dark .label,
.section--deep .section-label,
.section--deep .label {
  color: var(--amber-light);
  border-color: rgba(255, 204, 54, 0.50);
}
.hero__headline {
  font-family: var(--font-display);
  font-size: var(--t-display-xl);
  font-weight: 400;
  color: var(--white);
  line-height: var(--lh-display-loose);
  letter-spacing: 0.004em;
  margin: 0 auto var(--s-6);
  max-width: 17ch;
  text-shadow: 0 2px 30px rgba(24, 22, 42, 0.5);
  text-wrap: balance;
}
.hero__headline--wide { max-width: 22ch; }
.hero__headline em { font-style: italic; color: var(--amber-light); }
.hero__subhead {
  font-size: var(--t-body-xl);
  color: var(--on-dark-mid);
  max-width: 62ch;
  margin: 0 auto var(--s-6);
  line-height: 1.62;
}
.hero__kicker {
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-style: italic;
  color: var(--amber-light);
  margin-bottom: var(--s-6);
}
.hero__cta-group { display: flex; flex-wrap: wrap; gap: var(--s-3); justify-content: center; margin-top: var(--s-7); }

/* --------------------------------------------------------------------------
   8. TRUST BAR
   -------------------------------------------------------------------------- */
.trust-bar {
  background: var(--amber);
  color: var(--white);
}
.trust-bar__inner {
  max-width: 1340px;
  margin: 0 auto;
  padding: 18px var(--gutter);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--s-3) var(--s-5);
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.045em;
  text-align: center;
}
.trust-bar__item { display: flex; align-items: center; gap: var(--s-3); }
.trust-bar__dot {
  width: 4px; height: 4px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   9. CARDS
   -------------------------------------------------------------------------- */
.card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.card:hover { box-shadow: var(--shadow-md); border-color: var(--border); }

/* Gap cards. Editorial: big ghosted numeral, amber keyline that draws on hover. */
.gap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-8);
}
.gap-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  padding: var(--s-7) var(--s-6) var(--s-6);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gap-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 1px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 340ms var(--ease);
}
.gap-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.gap-card:hover::before { transform: scaleY(1); }

.gap-card__number {
  font-family: var(--font-display);
  font-size: var(--t-micro);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: var(--s-3);
  font-family: var(--font-body);
}
.gap-card h3 {
  font-size: var(--t-body-lg);
  font-weight: 700;
  color: var(--navy);
  margin-bottom: var(--s-3);
  line-height: 1.32;
}
.gap-card p {
  font-size: var(--t-body-sm);
  color: var(--text-light);
  line-height: 1.68;
  margin-bottom: var(--s-4);
}
.gap-card__cst {
  font-size: var(--t-body-sm);
  line-height: 1.6;
  color: var(--text);
  background: var(--amber-wash);
  border-radius: var(--r-sm);
  padding: var(--s-4);
  margin-top: auto;
}
.gap-card__cst::before {
  content: 'CST addresses this: ';
  font-weight: 700;
  color: var(--amber);
}

/* --------------------------------------------------------------------------
   10. CALLOUTS & QUOTES
   -------------------------------------------------------------------------- */
.callout {
  border-left: 1px solid var(--amber);
  background: var(--amber-wash);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  padding: var(--s-5) var(--s-6);
  font-size: var(--t-body-sm);
  line-height: 1.68;
  color: var(--text);
  margin-block: var(--s-5);
}
.callout strong { color: var(--navy); }
.callout--dark {
  background: rgba(255, 255, 255, 0.06);
  border-left-color: var(--amber-light);
  color: var(--on-dark-mid);
}
.callout--dark strong { color: var(--amber-light); }

/* Pull quote in display italic. */
.pull-quote {
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  font-style: italic;
  font-weight: 400;
  line-height: 1.42;
  color: var(--navy);
  max-width: 24ch;
}
.on-dark .pull-quote, .section--dark .pull-quote { color: var(--amber-light); }

.quote-card {
  background: var(--white);
  border: 1px solid var(--border-soft);
  border-left: 1px solid var(--amber);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  padding: var(--s-6);
  box-shadow: var(--shadow-sm);
}
.quote-card__text {
  font-family: var(--font-display);
  font-size: clamp(19px, 2vw, 24px);
  font-style: italic;
  line-height: 1.42;
  color: var(--navy);
  margin-bottom: var(--s-4);
}
.quote-card__name { font-size: var(--t-micro); font-weight: 700; color: var(--text); }
.quote-card__role { font-size: var(--t-micro); color: var(--text-muted); }

/* A white card inside a dark section inherits that section's light text and
   vanishes. On dark, the card is dark and the text is light. */
.section--dark .quote-card, .section--deep .quote-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
  border-left-color: var(--amber-light);
}
.section--dark .quote-card__text, .section--deep .quote-card__text { color: var(--white); }
.section--dark .quote-card__name, .section--deep .quote-card__name { color: var(--amber-light); }
.section--dark .quote-card__role, .section--deep .quote-card__role { color: var(--on-dark-low); }

/* --------------------------------------------------------------------------
   11. FIGURES & IMAGE PLACEHOLDERS
   -------------------------------------------------------------------------- */
figure { margin: 0; }
.figure img { width: 100%; border-radius: var(--r-md); box-shadow: var(--shadow-md); }
.figure figcaption {
  font-size: var(--t-micro);
  line-height: 1.55;
  color: var(--text-muted);
  margin-top: var(--s-3);
  max-width: 62ch;        /* 44ch broke one-line captions onto two lines */
}
.section--dark .figure figcaption { color: var(--on-dark-low); }

/* Labelled slot for imagery that doesn't exist yet. Deliberately visible:
   it should look like a considered gap, not a broken image. */
.img-slot {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: var(--s-6);
  min-height: 220px;
  border: 1.5px dashed var(--navy-mid);
  border-radius: var(--r-md);
  background: var(--light-grey);
  color: var(--navy-mid);
}
.img-slot__label {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--navy);
}
.img-slot__desc {
  font-size: var(--t-body-sm);
  line-height: 1.5;
  color: var(--navy-mid);
  max-width: 34ch;
}
.img-slot__spec { font-size: var(--t-micro); color: var(--navy-mid); }
.img-slot--wide { min-height: 300px; }
.img-slot--tall { min-height: 420px; }
.img-slot--dark {
  border-color: rgba(255, 255, 255, 0.34);
  background: rgba(255, 255, 255, 0.05);
  color: var(--on-dark-mid);
}
.img-slot--dark .img-slot__label,
.img-slot--dark .img-slot__spec { color: var(--on-dark-low); }
.img-slot--dark .img-slot__desc { color: var(--on-dark-mid); }

/* --------------------------------------------------------------------------
   12. PILLS, TAGS, LISTS
   -------------------------------------------------------------------------- */
.pill, .credential-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--light-grey);
  color: var(--navy-mid);
  font-size: var(--t-micro);
  font-weight: 600;
  padding: 6px 14px;
  border-radius: var(--r-pill);
}
.pill-row { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.ticklist { list-style: none; display: grid; gap: var(--s-3); }
.ticklist li {
  position: relative;
  padding-left: 30px;
  font-size: var(--t-body-sm);
  line-height: 1.6;
  color: var(--text-light);
}
.ticklist li::before {
  content: '\2192';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--amber);
  font-weight: 700;
}
.section--dark .ticklist li { color: var(--on-dark-mid); }
.section--dark .ticklist li::before { color: var(--amber-light); }

/* --------------------------------------------------------------------------
   13. STAT / FIGURE BAND
   -------------------------------------------------------------------------- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: var(--s-5);
  margin-top: var(--s-7);
}
.stat { text-align: center; }
.stat__figure {
  font-family: var(--font-display);
  font-size: clamp(38px, 4.6vw, 58px);
  font-weight: 400;
  line-height: 1;
  color: var(--amber-light);
  margin-bottom: var(--s-2);
}
.section--alt .stat__figure, .section--grey .stat__figure, body > .stat__figure { color: var(--amber); }
.stat__label {
  font-size: var(--t-micro);
  line-height: 1.5;
  color: var(--on-dark-low);
  letter-spacing: 0.04em;
}
.section--alt .stat__label, .section--grey .stat__label { color: var(--text-muted); }

/* CTA panel. Solid navy by default; translucent when it already sits on dark. */
.cta-box {
  background: var(--navy);
  border: 1px solid transparent;
  border-radius: var(--r-md);
  padding: clamp(28px, 4vw, 48px);
  text-align: center;
  transition: border-color var(--dur) var(--ease);
}
.cta-box h2, .cta-box h3 { color: var(--white); }
.cta-box p { color: var(--on-dark-mid); }
.cta-box strong { color: var(--white); }
.section--dark .cta-box, .section--deep .cta-box {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.14);
}
.section--dark .cta-box:hover, .section--deep .cta-box:hover { border-color: rgba(255, 204, 54, 0.40); }
.cta-box__buttons { display: flex; justify-content: center; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   14. FOOTER
   -------------------------------------------------------------------------- */
.footer {
  background: var(--navy-deep);
  color: var(--on-dark-low);
  padding-block: var(--s-9) var(--s-7);
  font-size: var(--t-body-sm);
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: var(--s-7);
  margin-bottom: var(--s-7);
}
.footer__brand {
  font-family: var(--font-display);
  font-size: var(--t-display-s);
  color: var(--white);
  margin-bottom: var(--s-2);
}
.footer__sub { font-size: var(--t-micro); color: var(--on-dark-low); line-height: 1.6; }
.footer__heading {
  font-size: var(--t-eyebrow);
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--on-dark-mid);
  margin-bottom: var(--s-4);
}
.footer__links { list-style: none; display: grid; gap: 10px; }
.footer__links a { color: var(--on-dark-mid); font-size: var(--t-body-sm); }
.footer__links a:hover { color: var(--amber-light); text-decoration: none; }
.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  padding-top: var(--s-5);
  font-size: var(--t-micro);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.42);
  max-width: 78ch;
}

/* --------------------------------------------------------------------------
   15. MOTION - scroll reveal
   -------------------------------------------------------------------------- */
/* Content is visible by default. The .anim class is added by JS only after it
   has confirmed it can reveal things again, and is stripped on any failure, so
   a broken observer can never leave a heading invisible. */
.reveal { opacity: 1; transform: none; }
.anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 620ms var(--ease), transform 620ms var(--ease);
}
.anim .reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* --------------------------------------------------------------------------
   16. RESPONSIVE
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .grid-2, .grid-3 { grid-template-columns: 1fr; gap: var(--s-6); }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 640px) {
  :root { --t-body: 16px; }
  .gap-grid { grid-template-columns: 1fr; }
  .footer__grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .hero { padding-block: clamp(64px, 16vw, 96px); }
  .hero__headline { max-width: 100%; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; }
  .trust-bar__inner { flex-direction: column; gap: 10px; }
  .trust-bar__dot { display: none; }
  .top-bar__inner { font-size: 11px; gap: 8px; }
}

/* --------------------------------------------------------------------------
   17. PRINT - clinicians print these pages
   -------------------------------------------------------------------------- */
@media print {
  .top-bar, .hero__cta-group, .btn, .img-slot { display: none !important; }
  body { font-size: 11pt; color: #000; }
  .section, .hero { padding-block: 18pt; background: #fff !important; color: #000 !important; }
  .section--dark, .section--deep, .hero { color: #000 !important; }
  .section--dark h1, .section--dark h2, .hero__headline { color: #000 !important; }
  .gap-card { break-inside: avoid; box-shadow: none; border: 1px solid #ccc; }
  a::after { content: ' (' attr(href) ')'; font-size: 9pt; color: #555; }
}