*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }
img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: none; }

body {
  font-family: "Segoe UI", sans-serif;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.7;
  background: var(--bg);
  color: var(--text);
}

h1 { font-size: clamp(30px, 1.6rem + 1.6vw, 48px); font-weight: 700; line-height: 1.2; margin: 0 0 24px; color: var(--heading); }
h2 { font-size: 25px; font-weight: 700; line-height: 1.3;  margin: 0 0 20px; color: var(--heading); }
h3 { font-size: 19px; font-weight: 700; line-height: 1.4;  margin: 0 0 12px; color: var(--heading); }

.reg-mark { font-size: 0.5em; font-weight: 700; position: relative; top: -0.6em; margin-left: 1px; }
p  { margin: 0 0 16px; }
p:last-child { margin-bottom: 0; }

/* Long-form legal prose (privacy policy). Headings otherwise inherit
   margin-bottom only, which leaves less space BEFORE a heading than after it,
   so each heading reads as attached to the paragraph above rather than to the
   text it introduces. Scoped, not global: section headings elsewhere sit inside
   padded sections and have their own overrides. */
.legal h2 { margin-top: 40px; }
.legal h3 { margin-top: 28px; }

.lede        { font-size: clamp(16px, 0.9rem + 0.45vw, 21px); color: var(--text-muted); max-width: 60ch; }
.footnote    { font-size: 13px; color: var(--text-subtle); }
.eyebrow     { font-size: 14px; font-weight: 700; letter-spacing: .04em; color: var(--accent); margin-bottom: 16px; }

a { color: var(--link); }
a:hover { color: var(--link-hover); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  padding: 12px 20px;
  background: var(--surface);
  color: var(--heading);
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid var(--border);
}
.skip-link:focus { left: 0; }

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.theme-navy {
  --bg: #fbfcfb;
  --surface: #fff;
  --surface-tint: #f4f5f6;
  --heading: #14171c;
  --text: #17191c;
  --text-muted: #4a4e55;
  --text-subtle: #6b6f76;
  --text-faint: #8b8f96;
  --text-desc: #7a7f87;
  --text-desc-hover: #33363b;
  --accent: #121B2B;
  --accent-hover: #1f3350;
  --link: #121B2B;
  --link-hover: #1f3350;
  --nav-link: #2A2C3C;
  --border: #e2e8e5;
  --border-soft: #dcdde0;
  --btn-bg: #eceeec;
  --btn-bg-hover: #e4e6e9;
  --dot-line: #b0b3b8;
  --practitioner-dot: #006CB7;
  --practitioner-dot-hover: #005A98;
}
.theme-green {
  --bg: #fbfcfb;
  --surface: #fff;
  --surface-tint: #f4f7f6;
  --heading: #0c1c17;
  --text: #10201b;
  --text-muted: #3d5148;
  --text-subtle: #5c766c;
  --text-faint: #8a9a92;
  --accent: #0e7a5f;
  --accent-hover: #0a5c47;
  --link: #0e7a5f;
  --link-hover: #0a5c47;
  --nav-link: #2A2C3C;
  --border: #e2e8e5;
  --border-soft: #d8e2de;
  --btn-bg: #eceeec;
  --btn-bg-hover: #e2ebe6;
  --btn-text-hover: #0e5c46;
  --dark-eyebrow: #5fbfa0;
  --practitioner-dot: #006CB7;
  --practitioner-dot-hover: #005A98;
}

.wrap { max-width: 1280px; margin: 0 auto; }
.section { padding: 120px 64px; }
.section--sm { padding: 96px 64px; }
.section--white { background: var(--surface); }
.section--relative { position: relative; overflow: hidden; }

#about { min-height: clamp(460px, 45vw, 700px); display: flex; align-items: center; }

#about .bg-media { object-position: center bottom; }
#about .above { margin-left: 96px; }
#about .lede { font-size: 1.3em; }
#about h2 { font-size: 32px; }
#how-we-work h2 { font-size: 32px; }
#how-we-work .lede { font-size: 1.3em; text-wrap: balance; margin-left: auto; margin-right: auto; }

.site-header {
  position: sticky; top: 0; z-index: 10;
  background: #fbfcfbee;
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--border);
}
/* 24px vertical, not the published 8px. The bar has no declared height — it is
   the tallest child plus padding. That child was the logo at 80px, 38% of which
   was empty padding baked into the old artwork. The canonical logo is 49px of
   pure ink, so the same 8px here would collapse the bar from 97px to 66px.
   24px reproduces the published bar height with the approved logo size. */
.site-header .wrap {
  display: flex; align-items: center; justify-content: space-between;
  padding: 24px 40px; gap: 24px;
}
/* 49px, not 80: the canonical Figma artwork has no padding in its viewBox,
   where the old file baked in 38.3%. 49px reproduces the previously
   rendered wordmark size. 134.7px wide, clear of the 120px floor. */
.site-logo img { height: 49px; width: auto; }
.nav { display: flex; align-items: center; gap: 44px; }
.nav a { font-size: 18px; color: var(--nav-link); text-decoration: none; }
.nav a:hover { text-decoration: underline; }
.nav a[aria-current="page"] { font-weight: 700; }

.header-ctas { display: flex; align-items: center; gap: 12px; }

.nav-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  cursor: pointer;
}
.nav-toggle-bar { width: 22px; height: 2px; background: var(--nav-link); border-radius: 1px; }

.btn {
  display: inline-block;
  font-size: 14px; letter-spacing: .04em;
  color: var(--nav-link); background: var(--btn-bg);
  padding: 13px 26px; border-radius: 2px; text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn:hover { background: var(--btn-bg-hover); color: var(--accent); }
.theme-green .btn:hover { color: var(--btn-text-hover); }

.btn--secondary { background: var(--practitioner-dot); color: #fff; }
.btn--secondary:hover,
.theme-green .btn--secondary:hover { background: var(--practitioner-dot-hover); color: #fff; }

.hero { position: relative; width: 100%; min-height: 100vh; overflow: hidden; }
.hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.hero-inner {
  position: relative; max-width: 1280px; min-height: 100vh; margin: 0 auto;
  padding-top: 0; padding-right: 64px; padding-bottom: calc(14vh + 20px); padding-left: 0;
  display: flex; flex-direction: column;
}

.hero-copy { max-width: 820px; margin-top: auto; margin-bottom: auto; margin-left: max(-45px, min(0px, (1280px - 100vw) / 2)); }

@media (min-width: 861px) {
  .hero-copy {
    margin-left: max(
      -45px,
      min(0px, (1280px - 100vw) / 2),
      (100vw * 35 / 1440) - max(0px, (100vw - 1280px) / 2)
    );
  }
  /* Home only: 25px further left above ~1493px. Identical to the rule above
     at every narrower width, so no zoom state changes. About keeps the rule
     above unchanged — its faded photo has no subject to clear. */
  .theme-navy .hero-copy {
    margin-left: max(
      -70px,
      min(0px, (1280px - 100vw) / 2),
      (100vw * 35 / 1440) - max(0px, (100vw - 1280px) / 2)
    );
  }
}
.hero-copy .lede { max-width: 760px; }
.theme-navy .hero-copy .lede { text-wrap: pretty; }

/* MOCKUP — hero CTAs under the copy, Home only. Remove this block and the
   .hero-ctas div in index.html to revert. */
.theme-navy .hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.theme-navy .hero-ctas .btn { font-size: 17px; padding: 18px 34px; text-align: center; }

@media (hover: hover) and (pointer: fine) {
  .theme-navy .hero-copy {
    max-width: min(820px, max(
      280px,
      400px + (100vw - 823px) * 0.164609,
      480px + (100vw - 1309px) * 2.595420
    ));
  }

  .theme-green .hero-copy { max-width: min(820px, max(560px, 75vw)); }
}

@media (hover: none) and (pointer: coarse) and (min-width: 861px) {
  .theme-navy .hero-copy {
    max-width: min(820px, max(
      280px,
      400px + (100vw - 823px) * 0.164609,
      480px + (100vw - 1309px) * 2.595420
    ));
  }
}

.theme-green .hero-copy .lede { font-size: 22px; max-width: 810px; }

#brands-intro h1 { font-size: 36px; }
#brands-intro .lede { font-size: 22px; max-width: none; }
.rule { height: 4px; background: var(--accent); }

.rule--blue { background: var(--practitioner-dot); }

#mission { aspect-ratio: 1456 / 983; display: flex; padding: 75px 64px 140px; }
#mission .bg-media { object-position: center top; }
.mission-inner { display: flex; flex-direction: column; justify-content: space-between; width: 100%; }

.mission-copy { max-width: 920px; margin: 80px auto 0; }
.mission-statement {
  font-size: clamp(32px, 2rem + 2.6vw, 64px);
  font-weight: 700;
  line-height: 1.15;
  color: var(--heading);
  text-transform: uppercase;
  margin: 0;
}
.mission-signature {
  margin: 28px 0 0;
  font-size: 22px;
  font-weight: 600;
  color: var(--accent);
}

.bg-media { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; object-fit: cover; }
.bg-scrim { position: absolute; inset: 0; z-index: 1; }
.bg-scrim--white { background: rgba(255,255,255,0.40); }
.above { position: relative; z-index: 2; }

#research-spotlight { aspect-ratio: 1272 / 716; display: flex; align-items: center; }

#research-spotlight .wrap { width: 100%; }

.spotlight-copy { max-width: 560px; }

#research-spotlight .eyebrow { margin-bottom: 10px; color: var(--practitioner-dot); text-transform: uppercase; font-size: 16px; }
.spotlight-rule { display: block; width: 40px; height: 3px; background: var(--practitioner-dot); margin-bottom: 28px; }

.spotlight-kicker { font-size: clamp(30px, 1.6rem + 1.6vw, 48px); font-weight: 800; line-height: 1.1; color: var(--heading); margin: 0 0 6px; }

#research-spotlight h2 i { color: var(--practitioner-dot); font-style: italic; }

#research-spotlight h2 { margin-bottom: 36px; }
.spotlight-list { list-style: none; margin: 0 0 40px; padding: 0; }
.spotlight-list li { position: relative; padding-left: 32px; }
.spotlight-list li:not(:last-child) { padding-bottom: 20px; }
.spotlight-marker {
  position: absolute; left: 0; top: 6px;
  width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--practitioner-dot);
}
.spotlight-marker::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--practitioner-dot); transform: translate(-50%, -50%);
}

.spotlight-list li:not(:last-child)::before {
  content: ''; position: absolute; left: 7px; top: 22px; bottom: 0;
  width: 2px; background: var(--practitioner-dot); opacity: .35;
}
#research-spotlight .brand-link { border-bottom: none; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }

.timeline-line {
  position: absolute; top: 13px; left: 16.6667%; width: 66.6667%; height: 1px;
  background: var(--border-soft); transform-origin: left;
  animation: drawline 1.4s ease-out;
}
@keyframes drawline { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.timeline { display: flex; position: relative; }
.stage {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 0 20px; position: relative;
}
.stage-marker { display: flex; flex-direction: column; align-items: center; gap: 16px; margin-bottom: 20px; }
.stage-dot {
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent); transition: all .3s ease;
}
.stage-icon svg { stroke: var(--accent); transition: stroke .3s ease; }
.stage-title { font-size: 19px; font-weight: 700; line-height: 1.7; color: var(--heading); margin: 0 0 10px; transition: color .3s ease; }
.stage-desc { font-size: 18px; margin: 0; color: var(--text-desc); transition: color .3s ease; }
.stage:hover .stage-dot { background: var(--accent); border-color: var(--accent); transform: scale(1.3); }
.stage:hover .stage-desc { color: var(--text-desc-hover); }

.process-card {
  width: 100%; flex: 1;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  border: 1px solid var(--border); border-radius: 4px;
  background: var(--surface); padding: 28px 24px;
}
.stage-toggle {
  margin-top: auto; padding-top: 14px; font-size: 14px; letter-spacing: .02em;
  color: var(--text-subtle); text-decoration: none;
  border-bottom: 1px dotted var(--dot-line); padding-bottom: 2px;
}
.stage-toggle:hover { color: var(--accent); }

.stat-band {
  display: grid; grid-template-columns: repeat(3,1fr); gap: 0;
  padding: 8px 0; text-align: center;
}
.stat { padding: 0 40px; border-right: 1px solid var(--border); }
.stat:last-child { border-right: none; }
.stat-num { font-size: clamp(40px, 4.2vw, 64px); font-weight: 800; color: var(--accent); line-height: 1; margin-bottom: 14px; }
.stat-title { font-size: 20px; font-weight: 700; color: var(--heading); margin: 0 0 6px; white-space: nowrap; }
.stat-label { font-size: 20px; font-weight: 400; color: var(--text-muted); white-space: nowrap; line-height: 1.3; }
.stat-label--wrap { white-space: normal; }

.stat-band--cards { gap: 24px; align-items: end; }
.stat--card {
  background: var(--surface);
  border-right: none;
  border-radius: 8px;
  padding: 32px 24px;
  box-shadow: 0 8px 24px rgba(13, 21, 18, 0.14);
}

.stat-band--cards .stat--card:not(.stat--featured) {
  height: 206px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.stat--featured {
  padding: 64px 40px;
  margin-top: -44px;
  box-shadow: 0 12px 32px rgba(13, 21, 18, 0.2);
}
.stat--featured .stat-num { font-size: clamp(60px, 6.4vw, 96px); }

.brand-grid {
  display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  border-top: 1px solid var(--border);
}
.brand-cell { padding: 56px 64px; border-bottom: 1px solid var(--border); }
.brand-cell--divider { border-right: 1px solid var(--border); }
.brand-media { padding: 24px; border-bottom: 1px solid var(--border); aspect-ratio: 1 / 1; }
.brand-media a { display: block; width: 100%; height: 100%; }
.brand-media img { width: 100%; height: 100%; object-fit: cover; border-radius: 2px; }
.brand-kicker { display: flex; align-items: center; gap: 8px; margin-bottom: 20px; }

.brand-kicker .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.brand-kicker .dot-practitioner { background: var(--practitioner-dot); }
.brand-kicker-label { font-size: 14px; letter-spacing: .04em; color: var(--accent); }
.brand-kicker-label--practitioner { color: var(--practitioner-dot); }
.brand-link {
  font-size: clamp(16px, 0.9rem + 0.45vw, 21px); color: var(--accent); text-decoration: none;
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}
.brand-link--practitioner { color: var(--practitioner-dot); border-bottom-color: var(--practitioner-dot); }
.brand-link--practitioner:hover { color: var(--practitioner-dot); }

.site-footer { background: var(--surface-tint); border-top: 1px solid var(--border); padding: 80px 64px 0; }
.footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr 1.1fr; gap: 48px; padding-bottom: 56px; }
/* 52px = 143px wide. The floor is 120px (Figma decision 4), which 44px only
   just cleared; this sits comfortably above it. The published footer rendered
   110.3px wide and was under the floor.
   No opacity: at .9 the canonical #006CB7 / #00A650 composited toward the
   footer ground and never reached the screen as the approved values. */
.footer-logo { height: 52px; width: auto; margin-bottom: 18px; }

.footer-head { font-size: 14px; letter-spacing: .04em; color: var(--text-subtle); margin-bottom: 18px; font-weight: 700; }
.footer-links { display: flex; flex-direction: column; gap: 12px; }
.footer-links a { font-size: 14px; color: var(--nav-link); text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
/* 15px, not 14: at 14 it matched the address numerically but read smaller
   because it is the lighter --text-subtle. 15px also lands the natural wrap so
   "into" opens the second line, with no forced <br> to break at other widths. */
.footer-note { font-size: 15px; color: var(--text-subtle); margin: 0; max-width: 280px; }

.footer-address { font-style: normal; font-size: 14px; color: var(--nav-link); margin: 0; }

.footer-bottom {
  border-top: 1px solid var(--border); padding: 24px 0;
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 12px;
}

.footer-bottom, .footer-bottom a { font-size: 13px; color: var(--text-subtle); }
.footer-legal { display: flex; gap: 24px; }
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { text-decoration: underline; }

@media (max-width: 980px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .section, .section--sm { padding: 72px 24px; }
  .site-header .wrap { padding: 17px 24px; flex-wrap: wrap; gap: 16px; } /* holds the published 79px bar */

  .site-logo img { height: 44px; } /* 121px wide — at the 120px floor */

  .nav-toggle { display: flex; }
  .header-ctas .btn:not(.btn--secondary) { display: none; }
  .nav { display: none; gap: 24px; }
  .site-header.nav-open .nav {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px 20px;
    gap: 4px;
    box-shadow: 0 8px 16px rgba(20, 23, 28, 0.12);
  }
  .site-header.nav-open .nav a { padding: 10px 0; }
  .header-ctas { flex-wrap: wrap; gap: 10px; }
  .hero-inner { padding: 0 24px; }

  #about .above { margin-left: 0; }
  .brand-grid { grid-template-columns: 1fr; }

  .brand-grid > *:nth-child(3) { order: 4; border-right: none !important; }
  .brand-grid > *:nth-child(4) { order: 3; }
  .brand-cell, .brand-cell--divider { border-right: none; padding: 40px 24px; }

  .brand-media { aspect-ratio: auto; }
  .brand-media a { height: auto; }
  .brand-media img { height: auto; object-fit: contain; }

  #brands-intro .wrap { padding-left: 0 !important; }

  #brands-intro .lede br { display: none; }
  .stat-band { grid-template-columns: 1fr; row-gap: 40px; }
  .stat { border-right: none; padding: 0 24px; }

  #mission { aspect-ratio: auto; padding: 64px 24px 40px; }
  .mission-inner { gap: 40px; }

  .mission-statement { font-size: clamp(30px, 10.6vw, 44px); }
  .mission-signature { font-size: 15px; margin-top: 16px; }
  .stat-band--cards { grid-template-columns: 1fr; gap: 16px; }
  .stat--card { padding: 24px; }

  .stat--featured { padding: 24px; margin-top: 0; box-shadow: 0 8px 24px rgba(13, 21, 18, 0.14); }
  .stat--featured .stat-num { font-size: clamp(40px, 4.2vw, 64px); }
  .stat-title, .stat-label { white-space: normal; }
  .timeline { flex-direction: column; gap: 56px; }
  .timeline-line { display: none; }
  .stage { flex-direction: row; text-align: left; align-items: flex-start; gap: 24px; width: 100%; }

  .stage-marker { flex-direction: row; align-items: center; gap: 12px; margin-bottom: 0; }
  .footer-grid { grid-template-columns: 1fr; }
  .site-footer { padding: 56px 24px 0; }

  #research-spotlight { aspect-ratio: auto; padding: 56px 24px; }

  #research-spotlight .bg-media { display: none; }
}

@media (max-width: 860px) and (hover: none) and (pointer: coarse) {
  .theme-navy .hero > img,
  .theme-green .hero > img { display: none; }
  .theme-navy .hero,
  .theme-green .hero { height: auto; min-height: 0; background: var(--bg); }

  .theme-navy .hero-inner,
  .theme-green .hero-inner { height: auto; min-height: 0; padding-top: 72px; padding-bottom: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}