/* Self-hosted variable fonts — Fraunces & Inter, SIL Open Font License 1.1.
   Latin subset only: the site's copy contains no latin-ext characters.
   Both carry full weight axes, so no separate weight files are needed. */

@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url(../assets/fonts/fraunces-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(../assets/fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ============================================================
   VipCareHealth — Design System
   Tokens → Base → Layout → Components → Pages → Responsive
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Surface — the warm/paper and deep/ink pairs are deliberately a visible step
     apart (~1.15-1.19 contrast), not a hairline apart, so that two same-family
     bands meeting still read as two sections. */
  /* Surface */
  --ink:        #0B1F2A;
  --ink-soft:   #14303D;
  --ink-deep:   #041017;
  --paper:      #F7F9FA;
  --paper-warm: #DFE7EB;

  /* Brand — taken from the VIPCare Health logo.
     --brand-blue and --brand-orange are the exact logo values; --accent is the
     blue tinted up so it clears 4.5:1 on the dark surfaces, and --accent-dim is
     the logo blue itself, which already passes on the light ones. */
  --brand-blue:   #005AA2;
  --brand-orange: #F05A24;

  --accent:     #229DFF;
  --accent-dim: #005AA2;
  --accent-alt: #F05A24;

  /* Text */
  --on-dark:        #E8EEF1;
  --on-dark-dim:    rgba(232,238,241,.66);
  --on-dark-faint:  rgba(232,238,241,0.54);
  --on-light:       #0B1F2A;
  --on-light-dim:   #4A6470;

  /* Lines */
  --rule-dark:  rgba(232,238,241,.14);
  --rule-light: rgba(11,31,42,.12);

  /* Type */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Motion — slow, no bounce */
  --ease: cubic-bezier(.16,1,.3,1);
  --dur: .55s;

  /* Metrics */
  --gutter: clamp(20px, 5vw, 64px);
  --maxw: 1280px;
  --header-h: 76px;
}

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

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body{
  margin:0;
  background:var(--ink);
  color:var(--on-dark);
  font-family:var(--font-sans);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

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

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:400;
  line-height:1.06;
  letter-spacing:-.02em;
  margin:0;
}

h1{ font-size:clamp(2.75rem, 6.2vw, 5.25rem); }
h2{ font-size:clamp(2.1rem, 4.4vw, 3.5rem); }
h3{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); line-height:1.18; }
h4{ font-size:1.15rem; line-height:1.3; }

/* Heading LEVEL is set by document structure; heading SIZE is set by these
   utilities. Keeps the outline valid without distorting the visual hierarchy. */
.h-md{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); line-height:1.18; }
.h-sm{ font-size:1.15rem; line-height:1.3; }

/* Card headings render at one consistent size whatever level they carry */
.card h2, .card h3, .card h4{ font-size:clamp(1.4rem, 2.2vw, 1.9rem); line-height:1.18; }
.card h2.h-sm, .card h3.h-sm, .card h4.h-sm{ font-size:1.15rem; }

/* Footer column labels are nav-group labels, styled flat regardless of level */
.footer-col h2, .footer-col h3{
  font-family:var(--font-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint);
  margin-bottom:20px;
}

p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

a{ color:inherit; text-decoration:none; }

/* Keyboard focus — visible everywhere, WCAG 2.2 */
:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:2px;
}

.skip-link{
  position:absolute; top:-100px; left:var(--gutter); z-index:200;
  background:var(--accent); color:var(--ink);
  padding:12px 20px; font-weight:600; font-size:.9rem; border-radius:4px;
  transition:top .2s;
}
.skip-link:focus{ top:14px; }

/* ---------- 3. Layout ---------- */
.wrap{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--gutter); }
.wrap-narrow{ max-width:860px; }

section{ position:relative; }

.band{ padding:clamp(72px, 10vw, 140px) 0; }
.band-tight{ padding:clamp(52px, 6vw, 84px) 0; }

/* Alternating surfaces set the page rhythm */
.band--dark{ background:var(--ink); color:var(--on-dark); }
.band--deep{ background:var(--ink-deep); color:var(--on-dark); }

/* Section boundaries. Most of the page alternates dark/light, so the edge is obvious.
   Where two bands of the same family end up adjacent (paper next to warm, ink next to
   deep) the tonal step alone is too subtle to read as a break, so draw a hairline.
   Adjacent-sibling selectors mean this applies itself wherever the case arises. */
.band--light + .band--light, .band--light + .band--warm,
.band--warm  + .band--warm,  .band--warm  + .band--light{
  border-top:1px solid var(--rule-light);
}
.band--dark + .band--dark, .band--dark + .band--deep,
.band--deep + .band--deep, .band--deep + .band--dark{
  border-top:1px solid var(--rule-dark);
}
.band--soft{ background:var(--ink-soft); color:var(--on-dark); }
.band--light{ background:var(--paper); color:var(--on-light); }
.band--warm{ background:var(--paper-warm); color:var(--on-light); }

.band--light .eyebrow, .band--warm .eyebrow{ color:var(--accent-dim); }
.band--light p, .band--warm p{ color:var(--on-light-dim); }
.band--light h2, .band--light h3, .band--warm h2, .band--warm h3{ color:var(--on-light); }

.cols{ display:grid; gap:clamp(32px,5vw,72px); }
.cols-2{ grid-template-columns:repeat(2,1fr); }
.cols-3{ grid-template-columns:repeat(3,1fr); }
.cols-4{ grid-template-columns:repeat(4,1fr); }
.cols-sticky{ grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); }

/* ---------- 4. Type helpers ---------- */
.eyebrow{
  font-family:var(--font-sans);
  font-size:.72rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent);
  margin:0 0 22px;
  display:flex; align-items:center; gap:12px;
}
.eyebrow::before{
  content:""; width:28px; height:1px; background:currentColor; flex:none; opacity:.6;
}

/* Headlines are short declaratives terminated with a period — see brand voice note in README */
.lede{
  font-family:var(--font-display);
  font-size:clamp(1.5rem, 2.9vw, 2.35rem);
  line-height:1.3; letter-spacing:-.015em;
  color:var(--on-dark);
}
.band--light .lede, .band--warm .lede{ color:var(--on-light); }

.body-lg{ font-size:1.1rem; line-height:1.7; color:var(--on-dark-dim); }
.band--light .body-lg, .band--warm .body-lg{ color:var(--on-light-dim); }

.muted{ color:var(--on-dark-dim); }
.footnote{ font-size:.82rem; line-height:1.6; color:var(--on-dark-faint); }
.band--light .footnote, .band--warm .footnote{ color:var(--on-light-dim); opacity:.85; }

/* ---------- 5. Links & buttons ---------- */
.link-arrow{
  display:inline-flex; align-items:center; gap:10px;
  font-size:.95rem; font-weight:500; color:var(--accent);
  padding-bottom:3px; border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), gap .3s var(--ease);
}
.link-arrow::after{ content:"→"; transition:transform .3s var(--ease); }
.link-arrow:hover{ border-bottom-color:currentColor; }
.link-arrow:hover::after{ transform:translateX(5px); }

.btn{
  display:inline-flex; align-items:center; gap:11px;
  font-family:var(--font-sans); font-size:.92rem; font-weight:600; letter-spacing:.01em;
  padding:16px 30px; border-radius:2px; border:1px solid transparent;
  cursor:pointer; transition:all .35s var(--ease);
}
.btn::after{ content:"→"; transition:transform .35s var(--ease); }
.btn:hover::after{ transform:translateX(5px); }

.btn-primary{ background:var(--accent); color:var(--ink); }
.btn-primary:hover{ background:#45AEFF; }

.btn-ghost{ background:transparent; color:var(--on-dark); border-color:var(--rule-dark); }
.btn-ghost:hover{ border-color:var(--accent); color:var(--accent); }

.band--light .btn-ghost, .band--warm .btn-ghost{ color:var(--on-light); border-color:var(--rule-light); }
.band--light .btn-ghost:hover, .band--warm .btn-ghost:hover{ border-color:var(--accent-dim); color:var(--accent-dim); }

.btn-block{ width:100%; justify-content:center; }

/* ---------- 6. Header ---------- */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:100;
  height:var(--header-h);
  display:flex; align-items:center;
  background:transparent;
  border-bottom:1px solid transparent;
  transition:background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s;
}
.site-header.is-stuck{
  background:rgba(7,23,32,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom-color:var(--rule-dark);
}
.site-header .wrap{ display:flex; align-items:center; justify-content:space-between; gap:clamp(18px,2.4vw,32px); }

.brand{ display:flex; align-items:center; gap:11px; flex:none; }
.brand-mark{ width:31px; height:31px; flex:none; }
.brand-word{
  font-family:var(--font-sans); font-size:1.02rem; letter-spacing:.005em;
  color:var(--on-dark); white-space:nowrap;
}
.brand-word b{ font-weight:700; }
.brand-word span{ font-weight:300; color:var(--on-dark-dim); }

/* Single row down to the hamburger breakpoint: the labels are long enough that
   between ~1140px and ~1230px they used to wrap two lines each. nowrap forbids the
   intra-label break, and the gap and size shrink to buy the room back. */
.nav{ display:flex; align-items:center; flex-wrap:nowrap; gap:clamp(13px,2.1vw,38px); }
.nav a{
  font-size:clamp(.81rem,1.05vw,.9rem); font-weight:450; color:var(--on-dark-dim);
  padding:6px 0; position:relative; white-space:nowrap;
  transition:color .3s var(--ease);
}
.nav a::after{
  content:""; position:absolute; left:0; bottom:0; height:1px; width:0;
  background:var(--accent); transition:width .35s var(--ease);
}
.nav a:hover{ color:var(--on-dark); }
.nav a:hover::after, .nav a[aria-current="page"]::after{ width:100%; }
.nav a[aria-current="page"]{ color:var(--on-dark); }

.nav-cta{
  font-size:.88rem; font-weight:600; color:var(--accent) !important;
  border:1px solid var(--rule-dark); border-radius:2px;
  padding:10px clamp(13px,1.5vw,19px) !important;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.nav-cta::after{ display:none; }
.nav-cta:hover{ border-color:var(--accent); background:rgba(34,157,255,.09); }

.nav-toggle{
  display:none; width:44px; height:44px; flex:none;
  background:none; border:0; cursor:pointer; padding:11px;
}
.nav-toggle span{
  display:block; height:1.5px; background:var(--on-dark); border-radius:2px;
  transition:transform .35s var(--ease), opacity .25s;
}
.nav-toggle span + span{ margin-top:6px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

/* ---------- 7. Hero ---------- */
.hero{
  position:relative; min-height:min(92vh, 860px);
  display:flex; align-items:flex-end;
  padding:calc(var(--header-h) + 80px) 0 clamp(56px,8vh,96px);
  background:var(--ink-deep);
  overflow:hidden;
}
.hero-bg{
  position:absolute; inset:0; z-index:0;
  background:
    radial-gradient(120% 90% at 78% 14%, rgba(34,157,255,.20), transparent 58%),
    radial-gradient(80% 70% at 8% 96%, rgba(240,90,36,.10), transparent 62%),
    linear-gradient(170deg, var(--ink-deep), var(--ink) 58%, var(--ink-soft));
}
.hero-bg svg{ position:absolute; inset:0; width:100%; height:100%; opacity:.5; }
.hero .wrap{ position:relative; z-index:1; }
.hero h1{ max-width:16ch; }
.hero h1 em{ font-style:normal; color:var(--accent); }
.hero-sub{
  margin-top:30px; max-width:52ch;
  font-size:1.12rem; line-height:1.66; color:var(--on-dark-dim);
}
.hero-actions{ margin-top:42px; display:flex; flex-wrap:wrap; gap:14px; }

/* ---------- Hero panel ----------
   The hero copy caps itself at 16ch/52ch, so the right half of the banner sat empty
   at desktop widths. partials/hero-widget.html (injected by build.sh) fills it on
   the home page only; inner pages use a plain single-column .wrap hero.
   Below the breakpoint it stacks under the copy rather than disappearing. */
.hero-wrap{
  display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,.68fr);
  gap:clamp(32px,4vw,64px); align-items:center;
}
.hero-panel{
  position:relative; isolation:isolate;
  border:1px solid rgba(232,238,241,.14); border-radius:4px;
  background:
    radial-gradient(120% 80% at 88% 0%, rgba(34,157,255,.13), transparent 62%),
    rgba(232,238,241,.03);
  backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  padding:clamp(22px,2.5vw,32px);
  transition:border-color .45s var(--ease), transform .45s var(--ease);
}
/* Brand edge: the logo blue running into the orange accent, used nowhere else. */
.hero-panel::before{
  content:""; position:absolute; left:-1px; right:-1px; top:-1px; height:2px;
  border-radius:4px 4px 0 0;
  background:linear-gradient(90deg, var(--accent), var(--accent-alt) 62%, transparent);
}
.hero-panel:hover{ border-color:rgba(34,157,255,.34); }
.hero-panel-title{
  margin:0 0 clamp(14px,1.7vw,20px);
  font-size:.7rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent);
}
.hero-panel-list{ list-style:none; margin:0; padding:0; }
.hero-panel-list li{
  position:relative;
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(12px,1.4vw,18px);
  padding:clamp(12px,1.4vw,16px) 0 clamp(12px,1.4vw,16px) 14px;
  border-top:1px solid rgba(232,238,241,.10);
  transition:background .35s var(--ease);
}
.hero-panel-list li:first-child{ border-top:0; }
/* Rail on the left of each row, filling in on hover */
.hero-panel-list li::before{
  content:""; position:absolute; left:0; top:12%; bottom:12%; width:2px;
  background:var(--accent); opacity:0;
  transform:scaleY(.25); transform-origin:center;
  transition:opacity .35s var(--ease), transform .35s var(--ease);
}
.hero-panel-list li:hover::before{ opacity:1; transform:scaleY(1); }
.hero-panel-list li:hover{ background:rgba(34,157,255,.05); }
.hero-panel-num{
  font-size:.7rem; font-weight:600; letter-spacing:.12em; padding-top:4px;
  color:var(--accent); font-variant-numeric:tabular-nums;
  transition:color .35s var(--ease);
}
.hero-panel-list li:hover .hero-panel-num{ color:var(--accent-alt); }
.hero-panel-name{
  display:block; margin-bottom:4px;
  font-family:var(--font-display); font-size:clamp(1rem,1.2vw,1.15rem);
  line-height:1.25; color:var(--on-dark);
}
.hero-panel-desc{ display:block; font-size:.84rem; line-height:1.55; color:var(--on-dark-dim); }
.hero-panel-link{ margin-top:clamp(16px,1.8vw,22px); }

@media (prefers-reduced-motion: reduce){
  .hero-panel, .hero-panel-list li, .hero-panel-list li::before{ transition:none; }
}
@media (max-width: 1080px){
  .hero-wrap{ grid-template-columns:1fr; gap:clamp(38px,6vw,54px); align-items:start; }
  .hero-panel{ max-width:560px; }
}
}

/* Compact hero for interior pages */
.hero--page{ min-height:auto; padding:calc(var(--header-h) + 100px) 0 clamp(54px,7vw,92px); align-items:center; }
.hero--page h1{ font-size:clamp(2.4rem,5vw,4.25rem); max-width:18ch; }

/* ---------- 8. Stats ---------- */
.stats{ border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark); }
.stats .cols{ gap:0; }
.stat{ padding:clamp(34px,4vw,54px) clamp(18px,2.4vw,36px); border-left:1px solid var(--rule-dark); }
.stat:first-child{ border-left:0; padding-left:0; }
.stat-num{
  font-family:var(--font-display); font-size:clamp(2.5rem,5vw,3.9rem);
  line-height:1; letter-spacing:-.03em; color:var(--on-dark);
  display:flex; align-items:baseline; gap:2px;
}
.stat-num .unit{ font-size:.46em; color:var(--accent); letter-spacing:0; }
.stat-label{
  margin-top:16px; font-size:.74rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint);
}

/* ---------- 9. Accordion (pillars + bios) ---------- */
.accordion{ border-top:1px solid var(--rule-dark); }
.band--light .accordion, .band--warm .accordion{ border-top-color:var(--rule-light); }

.acc-item{ border-bottom:1px solid var(--rule-dark); }
.band--light .acc-item, .band--warm .acc-item{ border-bottom-color:var(--rule-light); }

.acc-head{
  width:100%; display:grid; align-items:center; gap:clamp(16px,3vw,44px);
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr) auto;
  padding:clamp(24px,3vw,36px) 0;
  background:none; border:0; cursor:pointer; text-align:left;
  font-family:inherit; color:inherit;
  transition:opacity .3s var(--ease);
}
.acc-head:hover{ opacity:.72; }

.acc-num{
  font-family:var(--font-sans); font-size:.78rem; font-weight:600;
  letter-spacing:.1em; color:var(--accent); flex:none; padding-top:4px;
}
.acc-title{
  font-family:var(--font-display); font-size:clamp(1.25rem,2.1vw,1.75rem);
  line-height:1.16; letter-spacing:-.015em;
}
.acc-lede{ font-size:.97rem; line-height:1.6; color:var(--on-dark-dim); }
.band--light .acc-lede, .band--warm .acc-lede{ color:var(--on-light-dim); }

.acc-icon{ position:relative; width:17px; height:17px; flex:none; }
.acc-icon::before, .acc-icon::after{
  content:""; position:absolute; background:var(--accent);
  left:50%; top:50%; border-radius:1px;
  transition:transform .4s var(--ease), opacity .3s;
}
.acc-icon::before{ width:17px; height:1.5px; transform:translate(-50%,-50%); }
.acc-icon::after{ width:1.5px; height:17px; transform:translate(-50%,-50%); }
.acc-item.is-open .acc-icon::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.acc-panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows var(--dur) var(--ease); }
.acc-item.is-open .acc-panel{ grid-template-rows:1fr; }
.acc-panel-inner{
  overflow:hidden; visibility:hidden;
  transition:visibility 0s var(--dur);
}
.acc-item.is-open .acc-panel-inner{ visibility:visible; transition-delay:0s; }
.acc-body{
  padding:4px 0 clamp(30px,4vw,48px);
  display:grid; gap:clamp(24px,4vw,56px);
  grid-template-columns:auto minmax(0,1fr) minmax(0,1.15fr);
}
.acc-body > .spacer{ width:clamp(20px,3vw,44px); }
.acc-body-main{ grid-column:3; }

.tag-row{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.tag{
  font-size:.72rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase;
  padding:6px 12px; border:1px solid var(--rule-dark); border-radius:2px;
  color:var(--on-dark-dim);
}
.band--light .tag, .band--warm .tag{ border-color:var(--rule-light); color:var(--on-light-dim); }

/* ---------- 10. Cards ---------- */
.card{
  padding:clamp(26px,3vw,38px);
  border:1px solid var(--rule-dark); border-radius:3px;
  background:rgba(232,238,241,.02);
  transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.card:hover{ border-color:rgba(34,157,255,.4); transform:translateY(-3px); }
.card h3{ margin-bottom:14px; }
.card p{ font-size:.97rem; color:var(--on-dark-dim); }
.band--light .card, .band--warm .card{ border-color:var(--rule-light); background:#fff; }
.band--light .card p, .band--warm .card p{ color:var(--on-light-dim); }

.card-sublabel{
  margin-top:22px; font-size:.72rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--accent);
}
.band--light .card-sublabel, .band--warm .card-sublabel{ color:var(--accent-dim); }
.card .chips{ margin-top:12px; }

.card-num{
  font-size:.78rem; font-weight:600; letter-spacing:.1em;
  color:var(--accent); margin-bottom:18px;
}

/* ---------- 10b. Criteria list ---------- */
.criteria{ list-style:none; margin:0; padding:0; border-top:1px solid var(--rule-dark); }
.band--light .criteria, .band--warm .criteria{ border-top-color:var(--rule-light); }
.criteria li{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(16px,3vw,40px); align-items:baseline;
  padding:clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--rule-dark);
  font-size:clamp(1rem,1.5vw,1.15rem); line-height:1.55;
}
.band--light .criteria li, .band--warm .criteria li{ border-bottom-color:var(--rule-light); }
.criteria-num{
  font-size:.78rem; font-weight:600; letter-spacing:.1em;
  color:var(--accent); font-variant-numeric:tabular-nums;
}

/* Two-column variant. Grid rather than CSS columns so the rules line up across
   both columns; the list's single top border is handed to the first item of each
   column instead, or it would only cap the left one. */
.criteria--2col{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  column-gap:clamp(32px,5vw,72px);
  border-top:0;
}
.criteria--2col > li:nth-child(-n+2){ border-top:1px solid var(--rule-dark); }
.band--light .criteria--2col > li:nth-child(-n+2),
.band--warm .criteria--2col > li:nth-child(-n+2){ border-top-color:var(--rule-light); }
@media (max-width: 760px){
  .criteria--2col{ grid-template-columns:1fr; }
  .criteria--2col > li:nth-child(2){ border-top:0; }
}

/* ---------- 10c. Process steps ---------- */
.steps{ border-top:1px solid var(--rule-dark); }
.band--light .steps, .band--warm .steps{ border-top-color:var(--rule-light); }
.step{
  display:grid; grid-template-columns:auto minmax(0,1fr);
  gap:clamp(18px,3vw,44px);
  padding:clamp(24px,3vw,34px) 0;
  border-bottom:1px solid var(--rule-dark);
}
.band--light .step, .band--warm .step{ border-bottom-color:var(--rule-light); }
.step-num{
  font-size:.78rem; font-weight:600; letter-spacing:.1em;
  color:var(--accent); padding-top:6px; font-variant-numeric:tabular-nums;
}
.step h3{ font-size:clamp(1.25rem,2vw,1.6rem); margin-bottom:10px; }
.step .h-md{ font-size:clamp(1.4rem,2.2vw,1.9rem); line-height:1.18; }
.step p{ color:var(--on-dark-dim); font-size:1rem; max-width:70ch; }
.band--light .step p, .band--warm .step p{ color:var(--on-light-dim); }

/* ---------- 10c-b. Investment focus cards ----------
   White cards sitting on the dark band, so every foreground colour has to be
   re-stated: the inherited on-dark type would be invisible. Blue is --accent-dim
   (#005AA2), the logo blue, which is the variant that clears AA on white; the
   brighter --accent only clears AA on dark surfaces. */
.focus-cards .card{ background:#fff; border-color:rgba(0,90,162,.20); }
.focus-cards .card:hover{ border-color:var(--accent-dim); }
.focus-cards .card h3,
.focus-cards .card p,
.focus-cards .card .card-sublabel{ color:var(--accent-dim); }
/* Filled with --ink, the same navy as the dark band the cards sit on, so the chips
   read at the site's own darkness rather than as a separate blue. */
.focus-cards .chips li{
  background:var(--ink); border-color:var(--ink); color:#fff;
}

/* ---------- 10c-d. Model grid ----------
   The four ownership paths, laid out flat in a 2x2 rather than behind an accordion.
   Hairlines are cell borders so the grid survives an odd count later. */
.model-grid{
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
  border-top:1px solid var(--rule-light);
}
.model-cell{
  padding:clamp(30px,3.6vw,56px) clamp(26px,3vw,48px);
  border-bottom:1px solid var(--rule-light);
}
.model-cell:nth-child(odd){ border-right:1px solid var(--rule-light); }
.model-num{
  margin-bottom:clamp(16px,2vw,26px);
  font-size:.72rem; font-weight:500; letter-spacing:.2em;
  color:var(--on-light-dim); font-variant-numeric:tabular-nums;
}
.model-cell h2, .model-cell h3{
  font-family:var(--font-display);
  font-size:clamp(1.55rem,2.5vw,2.15rem); line-height:1.12;
  margin-bottom:clamp(14px,1.6vw,20px); color:var(--on-light);
}
.model-body{ font-size:1rem; line-height:1.7; color:var(--on-light-dim); max-width:54ch; }
.model-outcome{
  margin-top:clamp(18px,2.2vw,28px);
  font-size:.7rem; font-weight:500; letter-spacing:.16em; line-height:1.7;
  text-transform:uppercase; color:var(--accent-dim);
}
@media (max-width: 760px){
  .model-grid{ grid-template-columns:1fr; }
  .model-cell:nth-child(odd){ border-right:0; }
}

/* ---------- 10c-e. Clinical-leadership panel ----------
   Circle of clinical leaders beside a 2x3 grid of the capabilities that surround
   them, boxed together; then the full capability list flowing across three columns. */
.cl-panel{
  border:1px solid var(--rule-light); border-radius:3px;
  padding:clamp(20px,2.4vw,32px);
  background:rgba(255,255,255,.5);
}
.cl-panel .eyebrow{ margin-bottom:clamp(16px,2vw,24px); }
/* The hub component only had light-band rules for its backgrounds and borders, not
   its type — on a light band the node text rendered near-invisible. */
.band--light .hub-node h3, .band--warm .hub-node h3{ color:var(--on-light); }
.band--light .hub-node p,  .band--warm .hub-node p{ color:var(--on-light-dim); }
.band--light .hub-core-sub, .band--warm .hub-core-sub{ color:var(--accent-dim); }

/* Compact hub: sized to sit inside the panel rather than span the page. The core's
   glow is dropped for a plain outlined circle, which is what reads at this size. */
.hub--compact{ gap:clamp(6px,.9vw,14px); }
.hub--compact .hub-core{
  max-width:180px; border:1px solid var(--accent-dim); padding:10px;
}
.hub--compact .hub-core::before{ display:none; }
.hub--compact .hub-core .h-md{ font-size:clamp(.95rem,1.25vw,1.2rem); line-height:1.2; }
.hub--compact .hub-core-sub{
  margin-top:7px; font-size:.58rem; letter-spacing:.13em; text-transform:uppercase;
}
.hub--compact .hub-node{ padding:clamp(9px,1vw,14px); }
.hub--compact .hub-node h3{ font-size:clamp(.88rem,1vw,1rem); margin-bottom:4px; }
.hub--compact .hub-node p{ font-size:.73rem; line-height:1.45; }
.hub--compact .hub-node::after{ width:clamp(5px,.7vw,10px); }

/* Capability list: ten items flowing across three ruled columns. */
.cap-cols{
  list-style:none; margin:clamp(40px,5vw,72px) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  column-gap:clamp(28px,4vw,56px);
}
.cap-cols li{
  padding:clamp(14px,1.6vw,20px) 0;
  border-top:1px solid var(--rule-light);
  font-size:.95rem; line-height:1.5; color:var(--on-light);
}
@media (max-width: 1080px){
  .cl-panel-body{ grid-template-columns:1fr; }
  .cl-circle{ max-width:200px; }
  .cap-cols{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 640px){
  .cl-cells{ grid-template-columns:1fr; }
  .cl-cell:nth-child(odd){ border-right:0; }
  .cl-cell:nth-last-child(-n+2){ border-bottom:1px solid var(--rule-light); }
  .cl-cell:last-child{ border-bottom:0; }
  .cap-cols{ grid-template-columns:1fr; }
}

/* ---------- 10c-f. Role grid ----------
   Two ruled columns of role names. The final entry spans both columns, so there is
   no empty seventh cell sitting opposite it. */
.role-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr));
}
.role-grid li{
  font-family:var(--font-display);
  font-size:clamp(1.02rem,1.45vw,1.28rem); line-height:1.3;
  color:var(--on-light);
  padding:clamp(15px,1.9vw,24px) clamp(13px,1.5vw,22px);
  border-bottom:1px solid var(--rule-light);
}
.role-grid li:nth-child(odd){ border-right:1px solid var(--rule-light); }
.role-grid li:last-child{ grid-column:1 / -1; border-right:0; }
.band--dark .role-grid li, .band--deep .role-grid li{
  color:var(--on-dark); border-color:var(--rule-dark);
}
@media (max-width: 640px){
  .role-grid{ grid-template-columns:1fr; }
  .role-grid li:nth-child(odd){ border-right:0; }
}

/* ---------- 10d. Chips ---------- */
.chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.chips li{
  font-size:.9rem; line-height:1.4; padding:11px 17px;
  border:1px solid var(--rule-dark); border-radius:2px;
  color:var(--on-dark-dim);
}
.band--light .chips li, .band--warm .chips li{
  border-color:var(--rule-light); color:var(--on-light-dim); background:#fff;
}

/* ---------- 10d-b. Opportunity cards ----------
   Dark navy cards on the light band — the inverse of the focus cards. Placed after
   the .band--light rules above, which share their specificity, so these win on
   source order; moving this block earlier in the file would silently undo it. */
.opp-cards .card{ background:var(--ink); border-color:var(--rule-dark); }
.opp-cards .card:hover{ border-color:rgba(34,157,255,.4); }
.opp-cards .card h3,
.opp-cards .card p{ color:var(--on-dark); }
.opp-cards .card .card-num,
.opp-cards .card .card-sublabel{ color:var(--accent); }
.opp-cards .chips li{
  background:transparent; border-color:var(--rule-dark); color:var(--on-dark);
}

/* ---------- 10d-c. Partnership-path cards ----------
   Dark blue border, and a slight grow on hover. Sits after the .band--light rules
   it shares specificity with, so source order decides — same caveat as above. */
.fit-cards .card{ position:relative; border-color:var(--accent-dim); }
.fit-cards .card:hover{
  border-color:var(--accent-dim);
  transform:scale(1.025);
  z-index:1;
}
@media (prefers-reduced-motion: reduce){
  .fit-cards .card:hover{ transform:none; }
}

/* Cards that are links */
a.card{ display:flex; flex-direction:column; }
a.card .link-arrow{ margin-top:auto; padding-top:8px; }

/* ---------- 10e. Clinical hub ---------- */
.hub{ display:grid; gap:clamp(24px,3vw,40px); grid-template-columns:minmax(0,.9fr) minmax(0,2fr); align-items:center; }
.hub-core{
  padding:clamp(30px,4vw,48px);
  border:1px solid var(--accent); border-radius:3px;
  background:rgba(34,157,255,.07); text-align:center;
}
.hub-core-sub{ margin-top:10px; font-size:.86rem; color:var(--accent); letter-spacing:.04em; }
.hub-ring{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:var(--rule-dark); border:1px solid var(--rule-dark); }
.hub-node{ background:var(--ink); padding:clamp(20px,2.4vw,28px); }
.hub-node h3{ margin-bottom:9px; color:var(--on-dark); }
.hub-node p{ font-size:.88rem; line-height:1.55; color:var(--on-dark-dim); }
.band--light .hub-ring, .band--warm .hub-ring{ background:var(--rule-light); border-color:var(--rule-light); }
.band--light .hub-node, .band--warm .hub-node{ background:var(--paper); }

/* ---------- 10f. Tick lists ---------- */
.ticks{ list-style:none; margin:0; padding:0; }
.ticks li{
  position:relative; padding:14px 0 14px 30px;
  border-bottom:1px solid var(--rule-dark);
  font-size:1rem; line-height:1.55; color:var(--on-dark-dim);
}
.ticks li::before{
  content:""; position:absolute; left:2px; top:22px;
  width:9px; height:9px; border-radius:50%;
  border:1.5px solid var(--accent);
}
.band--light .ticks li, .band--warm .ticks li{ border-bottom-color:var(--rule-light); color:var(--on-light-dim); }

/* ---------- 11. Team ---------- */
.founders{ display:grid; gap:clamp(36px,4vw,56px); grid-template-columns:repeat(3,1fr); }
.founder-photo{
  aspect-ratio:4/5; border-radius:3px; overflow:hidden;
  background:linear-gradient(155deg, var(--ink-soft), var(--ink-deep));
  border:1px solid var(--rule-dark);
  display:flex; align-items:center; justify-content:center;
  position:relative;
}
.founder-photo img{ width:100%; height:100%; object-fit:cover; }
.founder-photo .initials{
  font-family:var(--font-display); font-size:3.4rem; letter-spacing:.02em;
  color:var(--accent); opacity:.55;
}
.founder-photo .ph-note{
  position:absolute; bottom:12px; left:0; right:0; text-align:center;
  font-size:.66rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-dark-faint);
}
.founder-name{ margin-top:24px; font-family:var(--font-display); font-size:1.5rem; letter-spacing:-.015em; }
.founder-role{
  margin-top:7px; font-size:.75rem; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:var(--accent);
}
.founder-bio{ margin-top:16px; font-size:.97rem; line-height:1.68; color:var(--on-dark-dim); }

/* Leadership page: portrait sits above the name in the sticky left column. */
.leader-portrait{
  aspect-ratio:1; max-width:300px; width:100%;
  margin-bottom:clamp(20px,2.4vw,28px);
}
.leader-portrait .initials{ font-size:2.6rem; }

.leader-teaser{ display:grid; grid-template-columns:repeat(4,1fr); gap:clamp(20px,2.6vw,34px); }
.leader-mini{ text-align:left; }
.leader-mini .founder-photo{ aspect-ratio:1; }
.leader-mini .initials{ font-size:2.1rem; }

/* ---------- 12. Logo / proof row ---------- */
.logo-row{
  display:grid; grid-template-columns:repeat(5,1fr); gap:1px;
  background:var(--rule-dark); border:1px solid var(--rule-dark);
}
.logo-cell{
  background:var(--ink); padding:32px 18px;
  display:flex; align-items:center; justify-content:center;
  font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-faint); text-align:center; min-height:96px;
}
.band--light .logo-row, .band--warm .logo-row{ background:var(--rule-light); border-color:var(--rule-light); }
.band--light .logo-cell, .band--warm .logo-cell{ background:var(--paper); color:var(--on-light-dim); }

/* ---------- 13. Quote ---------- */
.quote{ border-left:2px solid var(--accent); padding-left:clamp(22px,3vw,38px); }
.quote blockquote{
  margin:0; font-family:var(--font-display);
  font-size:clamp(1.3rem,2.4vw,1.95rem); line-height:1.36; letter-spacing:-.015em;
}
.quote figcaption{
  margin-top:22px; font-size:.78rem; font-weight:600;
  letter-spacing:.12em; text-transform:uppercase; color:var(--on-dark-faint);
}
.band--light .quote figcaption, .band--warm .quote figcaption{ color:var(--on-light-dim); }

/* ---------- 13b. Statement band ----------
   One principle given a section of its own rather than a margin pull-quote:
   centred, with a rule beneath the line and the supporting sentence stepped down. */
.statement{ text-align:center; }
.statement .eyebrow{ justify-content:center; }
.statement h2{
  max-width:20ch; margin-inline:auto;
  font-size:clamp(1.85rem,3.8vw,3.1rem); line-height:1.14; letter-spacing:-.02em;
}
.statement h2::after{
  content:""; display:block; width:64px; height:2px; margin:clamp(22px,2.6vw,32px) auto 0;
  background:var(--accent);
}
.band--light .statement h2::after, .band--warm .statement h2::after{ background:var(--accent-dim); }
.statement-sub{
  max-width:58ch; margin:clamp(20px,2.4vw,28px) auto 0;
  font-size:1.05rem; line-height:1.72;
}

/* ---------- 14. CTA band ---------- */
.cta-band{
  background:linear-gradient(120deg, var(--ink-soft), var(--ink-deep));
  border-top:1px solid var(--rule-dark); border-bottom:1px solid var(--rule-dark);
}
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:44px; flex-wrap:wrap; }
.cta-inner h2{ max-width:20ch; }

/* ---------- 15. News ---------- */
.news-item{
  display:grid; grid-template-columns:150px minmax(0,1fr) auto;
  gap:clamp(18px,3vw,40px); align-items:center;
  padding:28px 0; border-bottom:1px solid var(--rule-dark);
  transition:opacity .3s var(--ease);
}
.news-item:hover{ opacity:.74; }
.news-item:first-child{ border-top:1px solid var(--rule-dark); }
.news-date{ font-size:.78rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--accent); }
.news-title{ font-family:var(--font-display); font-size:clamp(1.1rem,1.7vw,1.35rem); line-height:1.3; }
.news-arrow{ color:var(--on-dark-faint); font-size:1.1rem; }

/* ---------- 16. Forms ---------- */
.form-grid{ display:grid; gap:20px; grid-template-columns:repeat(2,1fr); }
.field{ display:flex; flex-direction:column; gap:9px; }
.field--full{ grid-column:1 / -1; }
.field label{
  font-size:.74rem; font-weight:600; letter-spacing:.12em;
  text-transform:uppercase; color:var(--on-dark-faint);
}
.field input, .field select, .field textarea{
  font-family:var(--font-sans); font-size:.97rem; color:var(--on-dark);
  background:rgba(232,238,241,.04);
  border:1px solid var(--rule-dark); border-radius:2px;
  padding:14px 16px; width:100%;
  transition:border-color .3s var(--ease), background .3s var(--ease);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--on-dark-faint); }
.field input:focus, .field select:focus, .field textarea:focus{
  border-color:var(--accent); background:rgba(232,238,241,.07); outline:none;
}
.field textarea{ resize:vertical; min-height:120px; }
.field select{ appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 20px) calc(50% + 2px), calc(100% - 14px) calc(50% + 2px);
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.field select option{ background:var(--ink-soft); color:var(--on-dark); }

.check{ display:flex; gap:13px; align-items:flex-start; }
.check input{ width:18px; height:18px; flex:none; margin-top:3px; accent-color:var(--accent); }
.check label{
  font-size:.88rem; line-height:1.55; letter-spacing:0;
  text-transform:none; font-weight:400; color:var(--on-dark-dim);
}
.field-error{ font-size:.82rem; color:#F2836B; min-height:0; }
.field.has-error input, .field.has-error select{ border-color:#F2836B; }

.form-success{
  display:none; padding:clamp(28px,4vw,44px);
  border:1px solid var(--accent); border-radius:3px;
  background:rgba(34,157,255,.07);
}
.form-success.is-shown{ display:block; }

/* ---------- 17. Gate / portal ---------- */
.gate{
  max-width:460px; margin:0 auto; text-align:center;
  padding:clamp(34px,4vw,52px);
  border:1px solid var(--rule-dark); border-radius:3px;
  background:rgba(232,238,241,.02);
}
.gate .lock{ width:38px; height:38px; margin:0 auto 24px; color:var(--accent); }

.doc-list{ border-top:1px solid var(--rule-dark); }
.doc-row{
  display:grid; grid-template-columns:auto minmax(0,1fr) auto;
  gap:20px; align-items:center;
  padding:22px 0; border-bottom:1px solid var(--rule-dark);
}
.doc-icon{ width:20px; height:20px; color:var(--accent); flex:none; }
.doc-meta{ font-size:.8rem; color:var(--on-dark-faint); margin-top:3px; }
.doc-locked{
  font-size:.7rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--on-dark-faint); border:1px solid var(--rule-dark);
  padding:5px 11px; border-radius:2px;
}

/* ---------- 18. Placeholder marker ---------- */
/* Anything wrapped in .ph is copy or data awaiting real input. Search "PLACEHOLDER" in HTML. */
.ph{
  background:rgba(240,90,36,.11);
  box-shadow:0 0 0 1px rgba(240,90,36,.28);
  border-radius:2px; padding:0 3px;
}
body.ph-off .ph{ background:none; box-shadow:none; padding:0; }

.ph-toggle{
  position:fixed; right:18px; bottom:18px; z-index:120;
  font-family:var(--font-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  background:var(--accent-alt); color:var(--ink-deep);
  border:0; border-radius:2px; padding:11px 16px; cursor:pointer;
  box-shadow:0 6px 22px rgba(0,0,0,.34);
  transition:transform .3s var(--ease);
}
.ph-toggle:hover{ transform:translateY(-2px); }

/* ---------- 19. Footer ---------- */
.site-footer{ background:var(--ink-deep); border-top:1px solid var(--rule-dark); padding:clamp(56px,7vw,88px) 0 34px; }
.footer-top{
  display:grid; grid-template-columns:minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap:clamp(30px,4vw,56px); padding-bottom:clamp(40px,5vw,64px);
  border-bottom:1px solid var(--rule-dark);
}
.footer-col h4{
  font-family:var(--font-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-faint);
  margin-bottom:20px;
}
.footer-col ul{ list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.footer-col a{ font-size:.93rem; color:var(--on-dark-dim); transition:color .3s var(--ease); }
.footer-col a:hover{ color:var(--accent); }
.footer-blurb{ margin-top:20px; max-width:34ch; font-size:.92rem; color:var(--on-dark-dim); }
.footer-bottom{
  padding-top:26px; display:flex; flex-wrap:wrap; gap:18px 32px;
  align-items:center; justify-content:space-between;
}
.footer-legal{ display:flex; flex-wrap:wrap; gap:22px; }
.footer-legal a, .footer-copy{ font-size:.82rem; color:var(--on-dark-faint); }
.footer-legal a:hover{ color:var(--accent); }
.footer-disclaimer{
  margin-top:26px; padding-top:22px; border-top:1px solid var(--rule-dark);
  font-size:.78rem; line-height:1.65; color:var(--on-dark-faint); max-width:95ch;
}

/* ---------- 20. Scroll reveal ---------- */
[data-reveal]{ opacity:0; transform:translateY(22px); }
[data-reveal].is-visible{
  opacity:1; transform:none;
  transition:opacity .75s var(--ease), transform .75s var(--ease);
  transition-delay:var(--d, 0ms);
}

/* ---------- 21. Responsive ---------- */
@media (max-width: 1080px){
  .cols-4{ grid-template-columns:repeat(2,1fr); }
  .leader-teaser{ grid-template-columns:repeat(2,1fr); }
  .stat:nth-child(3){ border-left:0; padding-left:0; }
  .logo-row{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width: 1140px){
  :root{ --header-h:66px; }

  .nav-toggle{ display:block; }
  .nav{
    position:fixed; inset:var(--header-h) 0 auto 0;
    flex-direction:column; align-items:flex-start; gap:0;
    background:rgba(7,23,32,.98);
    backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
    border-bottom:1px solid var(--rule-dark);
    padding:12px var(--gutter) 30px;
    transform:translateY(-12px); opacity:0; pointer-events:none;
    transition:transform .4s var(--ease), opacity .3s var(--ease);
    max-height:calc(100vh - var(--header-h)); overflow-y:auto;
  }
  .nav.is-open{ transform:none; opacity:1; pointer-events:auto; }
  .nav a{ width:100%; padding:17px 0; border-bottom:1px solid var(--rule-dark); font-size:1.05rem; }
  .nav a::after{ display:none; }
  .nav-cta{ margin-top:22px; border-radius:2px; padding:15px 22px !important; text-align:center; justify-content:center; }
  .nav-cta{ border-color:var(--accent) !important; }

  .cols-2, .cols-3, .cols-sticky{ grid-template-columns:1fr; }
  .hub{ grid-template-columns:1fr; }
  .hub-ring{ grid-template-columns:repeat(2,1fr); }
  .founders{ grid-template-columns:1fr; gap:44px; }
  .founder-photo{ aspect-ratio:3/2; }
  .founder-photo.leader-portrait{ aspect-ratio:1; max-width:260px; }

  .acc-head{ grid-template-columns:auto minmax(0,1fr) auto; gap:16px; }
  .acc-lede{ display:none; }
  .acc-body{ grid-template-columns:1fr; }
  .acc-body > .spacer{ display:none; }
  .acc-body-main{ grid-column:1; }

  .form-grid{ grid-template-columns:1fr; }
  .news-item{ grid-template-columns:1fr auto; gap:6px 18px; }
  .news-date{ grid-column:1 / -1; }
  .footer-top{ grid-template-columns:repeat(2,1fr); }
  .cta-inner{ flex-direction:column; align-items:flex-start; gap:30px; }
}

@media (max-width: 640px){
  body{ font-size:16px; }
  .cols-4{ grid-template-columns:1fr; }
  .hub-ring{ grid-template-columns:1fr; }
  .leader-teaser{ grid-template-columns:repeat(2,1fr); }
  .stat{ border-left:0; padding-left:0; border-top:1px solid var(--rule-dark); }
  .stat:first-child{ border-top:0; }
  .logo-row{ grid-template-columns:repeat(2,1fr); }
  .footer-top{ grid-template-columns:1fr; }
  .doc-row{ grid-template-columns:auto minmax(0,1fr); }
  .doc-row .doc-locked{ grid-column:2; justify-self:start; }
  .ph-toggle{ right:12px; bottom:12px; padding:9px 13px; font-size:.66rem; }
}

/* ---------- 22. Reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  [data-reveal]{ opacity:1; transform:none; }
  .acc-panel{ transition:none; }
}

/* ---------- 23. Print ---------- */
@media print{
  .site-header, .ph-toggle, .nav-toggle, .cta-band{ display:none; }
  body{ background:#fff; color:#000; }
  .acc-panel{ grid-template-rows:1fr; }
  .acc-panel-inner{ visibility:visible; }
}

/* ============================================================
   24. FUTURE LAYER — depth, grain, motion
   Added in the visual pass. Everything here is CSS/SVG: no image
   or video bytes, and all motion is gated on prefers-reduced-motion.
   ============================================================ */

/* ---------- 24.1 Grain ----------
   One inline feTurbulence tile, fixed over the viewport. Stops large flat
   fields reading as cheap. Non-interactive, sits under the header. */
body::after{
  content:"";
  position:fixed; inset:0; z-index:1;
  pointer-events:none;
  opacity:.028;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.site-header, .nav, .skip-link{ z-index:100; }

/* ---------- 24.2 Optical sizing ----------
   Fraunces ships an opsz axis (9–144). Driving it from the type scale gives
   true display cuts at large sizes and text cuts at small ones. */
body{ font-optical-sizing:auto; }
h1{ font-variation-settings:'opsz' 144, 'wght' 400; }
h2{ font-variation-settings:'opsz' 96,  'wght' 400; }
h3{ font-variation-settings:'opsz' 48,  'wght' 400; }
.lede{ font-variation-settings:'opsz' 72, 'wght' 300; }
.acc-title{ font-variation-settings:'opsz' 48, 'wght' 400; }
.quote blockquote{ font-variation-settings:'opsz' 96, 'wght' 300; }

/* ---------- 24.3 Drifting mesh ----------
   Transform-animated pseudo-elements (compositor-friendly), not
   background-position. Two layers at different rates for parallax depth. */
.hero-bg::before, .hero-bg::after{
  content:""; position:absolute; inset:-30%;
  pointer-events:none;
}
.hero-bg::before{
  background:radial-gradient(closest-side, rgba(34,157,255,.28), transparent 70%);
  width:70%; height:70%; left:58%; top:-12%; inset:auto;
}
.hero-bg::after{
  background:radial-gradient(closest-side, rgba(240,90,36,.16), transparent 70%);
  width:60%; height:60%; left:-8%; top:48%; inset:auto;
}
@media (prefers-reduced-motion: no-preference){
  .hero-bg::before{ animation:drift-a 52s ease-in-out infinite alternate; }
  .hero-bg::after{  animation:drift-b 68s ease-in-out infinite alternate; }
}
@keyframes drift-a{
  from{ transform:translate3d(0,0,0) scale(1); }
  to  { transform:translate3d(-7%,6%,0) scale(1.12); }
}
@keyframes drift-b{
  from{ transform:translate3d(0,0,0) scale(1.05); }
  to  { transform:translate3d(9%,-7%,0) scale(.94); }
}

/* ---------- 24.4 Gradient edge on cards ----------
   Masked 1px gradient ring, revealed on hover/focus. Adds depth without
   a second border or a shadow. */
.card{ position:relative; isolation:isolate; }
.card::before{
  content:""; position:absolute; inset:0; border-radius:inherit;
  padding:1px; pointer-events:none; opacity:0;
  background:linear-gradient(140deg,
    rgba(34,157,255,.85), rgba(34,157,255,0) 42%,
    rgba(34,157,255,0) 58%, rgba(240,90,36,.45));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  transition:opacity .45s var(--ease);
}
.card:hover::before, .card:focus-visible::before{ opacity:1; }

/* Accent glow on primary action */
.btn-primary{ box-shadow:0 0 0 0 rgba(34,157,255,0); }
.btn-primary:hover{ box-shadow:0 6px 28px -6px rgba(34,157,255,.55); }

/* ---------- 24.5 Scroll-driven reveals ----------
   Where the browser supports scroll-timelines, motion runs off the compositor
   and the JS observer stands down (see initReveal in site.js). */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    html.has-scroll-timeline [data-reveal]{
      opacity:0;
      animation:reveal-in linear both;
      animation-timeline:view();
      animation-range:entry 5% entry 55%;
    }
  }
}
@keyframes reveal-in{
  from{ opacity:0; transform:translateY(22px); }
  to  { opacity:1; transform:none; }
}

/* ---------- 24.6 Care-graph canvas ----------
   The site's signature motif: nodes and directed edges, drawn in canvas.
   Decorative — aria-hidden, with a static SVG beneath as the no-JS fallback. */
.graph-layer{
  position:absolute; inset:0; z-index:0;
  pointer-events:none; opacity:.85;
}
.graph-layer canvas{ width:100%; height:100%; display:block; }

/* ---------- 24.7 Diagram primitives ---------- */
.figure{ margin:0; }
.figure svg{ width:100%; height:auto; display:block; overflow:visible; }
.figure figcaption{
  margin-top:18px; font-size:.82rem; line-height:1.6;
  color:var(--on-dark-faint);
}
.band--light .figure figcaption, .band--warm .figure figcaption{ color:var(--on-light-dim); }

.dg-label{
  font-family:var(--font-sans); font-size:13px; font-weight:600;
  letter-spacing:.02em; fill:var(--on-dark);
}
.dg-sub{
  font-family:var(--font-sans); font-size:11.5px; font-weight:400;
  fill:rgba(232,238,241,.66);
}
.dg-num{
  font-family:var(--font-sans); font-size:10.5px; font-weight:600;
  letter-spacing:.12em; fill:var(--accent);
}
.band--light .dg-label, .band--warm .dg-label{ fill:var(--on-light); }
.band--light .dg-sub, .band--warm .dg-sub{ fill:var(--on-light-dim); }
.band--light .dg-num, .band--warm .dg-num{ fill:var(--accent-dim); }

.dg-node{ fill:rgba(34,157,255,.07); stroke:var(--rule-dark); }
.band--light .dg-node, .band--warm .dg-node{ fill:#fff; stroke:var(--rule-light); }
.dg-edge{ stroke:var(--accent); stroke-opacity:.5; fill:none; }
.dg-ring{ fill:none; stroke:var(--accent); stroke-opacity:.22; }
.dg-core{ fill:rgba(34,157,255,.12); stroke:var(--accent); }

/* Draw-on reveal for diagram strokes */
@media (prefers-reduced-motion: no-preference){
  .figure[data-reveal] .dg-edge{
    stroke-dasharray:var(--len, 400); stroke-dashoffset:var(--len, 400);
  }
  .figure[data-reveal].is-visible .dg-edge,
  html.has-scroll-timeline .figure[data-reveal] .dg-edge{
    stroke-dashoffset:0; transition:stroke-dashoffset 1.1s var(--ease) .15s;
  }
}

@media (prefers-reduced-motion: reduce){
  .hero-bg::before, .hero-bg::after{ animation:none; }
  .figure .dg-edge{ stroke-dasharray:none; stroke-dashoffset:0; }
}

/* ---------- 24.8 Flow panel ----------
   The four steps live inside one bordered panel rather than four separate cards.
   Each step carries its own top rule; the final step's rule and number take the
   accent, marking it as the outcome the other three feed. */
.flow-panel{
  display:grid; grid-template-columns:repeat(4, minmax(0,1fr));
  gap:clamp(22px,2.8vw,44px);
  padding:clamp(24px,3vw,40px);
  border:1px solid var(--rule-light); border-radius:3px;
  background:#fff;
}
.flow-step{ border-top:1px solid var(--rule-light); padding-top:clamp(16px,1.6vw,22px); }
.flow-step--end{ border-top-color:var(--accent-dim); border-top-width:2px; }
.flow-step-num{
  margin-bottom:clamp(10px,1.2vw,16px);
  font-size:.76rem; font-weight:600; letter-spacing:.14em;
  color:var(--on-light-dim); font-variant-numeric:tabular-nums;
}
.flow-step--end .flow-step-num{ color:var(--accent-dim); }
.flow-step h3{
  font-size:clamp(1.12rem,1.45vw,1.35rem); line-height:1.25;
  margin-bottom:clamp(8px,1vw,13px); color:var(--on-light);
}
.flow-step p{ font-size:.95rem; line-height:1.65; color:var(--on-light-dim); }

@media (max-width: 1080px){
  .flow-panel{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px){
  .flow-panel{ grid-template-columns:1fr; }
}

/* ---------- 24.9 Radial hub ----------
   Clinical leaders at the centre, capabilities flanking. Pure grid, so it
   reflows to a single column without the labels ever leaving the DOM. */
.hub{ grid-template-columns:minmax(0,1fr) minmax(0,1.15fr) minmax(0,1fr); align-items:stretch; }
.hub-core{
  grid-column:2; grid-row:1 / span 3;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; overflow:hidden;
  /* A true circle: square it off, cap the size, and centre it in the three-row
     span rather than stretching to fill it. */
  aspect-ratio:1; width:min(100%, 400px);
  margin-inline:auto; align-self:center;
  border-radius:50%;
}
/* Concentric rings behind the core */
.hub-core::before{
  content:""; position:absolute; left:50%; top:50%;
  width:150%; aspect-ratio:1; transform:translate(-50%,-50%);
  border-radius:50%;
  background:
    radial-gradient(closest-side, rgba(34,157,255,.16), transparent 72%);
  box-shadow:
    0 0 0 1px rgba(34,157,255,.16) inset,
    0 0 0 34px rgba(34,157,255,.05) inset;
  pointer-events:none;
}
.hub-core > *{ position:relative; }
@media (prefers-reduced-motion: no-preference){
  .hub-core::before{ animation:hub-pulse 9s ease-in-out infinite alternate; }
}
@keyframes hub-pulse{
  from{ transform:translate(-50%,-50%) scale(1);    opacity:.85; }
  to  { transform:translate(-50%,-50%) scale(1.09); opacity:1; }
}

.hub-ring{
  display:contents;                 /* nodes place themselves around the core */
  background:none; border:0;
}
.hub-node{
  border:1px solid var(--rule-dark);
  border-radius:3px;
  position:relative;
}
.hub-node:nth-child(1){ grid-column:1; grid-row:1; }
.hub-node:nth-child(2){ grid-column:1; grid-row:2; }
.hub-node:nth-child(3){ grid-column:1; grid-row:3; }
.hub-node:nth-child(4){ grid-column:3; grid-row:1; }
.hub-node:nth-child(5){ grid-column:3; grid-row:2; }
.hub-node:nth-child(6){ grid-column:3; grid-row:3; }
/* Connector stub pointing at the core */
.hub-node::after{
  content:""; position:absolute; top:50%; width:clamp(12px,2.2vw,28px); height:1px;
  background:linear-gradient(90deg, var(--accent), transparent);
  opacity:.4;
}
.hub-node:nth-child(-n+3)::after{ right:-1px; transform:translateX(100%); }
.hub-node:nth-child(n+4)::after{
  left:-1px; transform:translateX(-100%) scaleX(-1);
}
.band--light .hub-node, .band--warm .hub-node{ border-color:var(--rule-light); }

@media (max-width: 1140px){
  .hub{ grid-template-columns:repeat(2,1fr); }
  .hub-core{ grid-column:1 / -1; grid-row:auto; padding-block:clamp(34px,6vw,56px); }
  .hub-node{ grid-column:auto !important; grid-row:auto !important; }
  .hub-node::after{ display:none; }
}
@media (max-width: 640px){
  .hub{ grid-template-columns:1fr; }
}

/* ---------- 24.10 Process + criteria spine ----------
   A hairline runs through the numbers, turning two stacked lists into a
   single continuous sequence. */
.steps, .criteria{ position:relative; }
.steps::before, .criteria::before{
  content:""; position:absolute; top:0; bottom:0;
  left:calc(0.78rem / 2); width:1px;
  background:linear-gradient(180deg, transparent, var(--accent) 8%, var(--accent) 92%, transparent);
  opacity:.28; pointer-events:none;
}
.step-num, .criteria-num{ position:relative; }
.step-num::before, .criteria-num::before{
  content:""; position:absolute; left:50%; top:50%;
  width:7px; height:7px; margin:-3.5px 0 0 -3.5px;
  border-radius:50%; background:var(--ink);
  box-shadow:0 0 0 1.5px var(--accent);
}
.band--light .step-num::before, .band--light .criteria-num::before,
.band--warm .step-num::before, .band--warm .criteria-num::before{ background:var(--paper); }
.step-num, .criteria-num{ padding-left:20px; }
@media (max-width: 640px){
  .steps::before, .criteria::before{ display:none; }
  .step-num::before, .criteria-num::before{ display:none; }
  .step-num, .criteria-num{ padding-left:0; }
}

/* ---------- 24.11 Brand logo ----------
   Replaces the placeholder mark. The white lockup is used on every surface it
   appears on (header and footer are both dark). Intrinsic width/height are on
   the element so it reserves space before the bitmap decodes. */
.brand{ --logo-h:clamp(22px, 2.2vw, 30px); align-items:center; }
.site-footer .brand{ --logo-h:clamp(26px, 2.8vw, 34px); }

/* Full lockup — mark plus "VIPCare Health" — so no adjacent text is needed.
   Aspect is 6.6:1, hence the shorter height than the previous mark. */
.brand-logo{ height:var(--logo-h); width:auto; display:block; }

/* Retired with the placeholder mark; kept harmless for any stale markup */
.brand-mark, .brand-word{ display:none; }

/* ---------- 24.12 Measurement groups ----------
   The twelve measures grouped under the three portfolio-thesis pillars, so the
   list reads as evidence for the claims rather than as an undifferentiated wall
   of tags. Wording of every measure is unchanged; only the grouping is new. */
.measures{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(26px,3.4vw,54px);
  border-top:1px solid var(--rule-dark);
  padding-top:clamp(24px,3vw,38px);
}
.band--light .measures, .band--warm .measures{ border-top-color:var(--rule-light); }

.measure-head{
  display:flex; align-items:baseline; gap:12px;
  font-family:var(--font-display);
  font-size:clamp(1.05rem, 1.45vw, 1.25rem);
  font-variation-settings:'opsz' 36, 'wght' 400;
  line-height:1.24; letter-spacing:-.01em;
  margin:0 0 4px;
  min-height:2.5em;                 /* keeps the three lists top-aligned */
}
.measure-num{
  font-family:var(--font-sans); font-size:.72rem; font-weight:600;
  letter-spacing:.12em; color:var(--accent);
  flex:none; font-variant-numeric:tabular-nums;
}
.band--light .measure-num, .band--warm .measure-num{ color:var(--accent-dim); }

.measures .ticks li{ padding:12px 0 12px 28px; font-size:.95rem; }
.measures .ticks li:first-child{ border-top:1px solid var(--rule-dark); }
.band--light .measures .ticks li:first-child,
.band--warm .measures .ticks li:first-child{ border-top-color:var(--rule-light); }
.measures .ticks li::before{ top:19px; }

@media (max-width: 900px){
  .measures{ grid-template-columns:1fr; gap:clamp(22px,3vw,34px); }
  .measure-head{ min-height:0; }
}