/* ==========================================================================
   DiverseITS — Global Design System (v2)
   Source of truth: 04_DiverseITS_Website_Mockup_Approval_Package.html
   Palette, brand language, and content hierarchy preserved from the approved
   mockup; v2 focuses on typographic polish, editorial composition, section
   rhythm, and interaction — see DEV-NOTES.md changelog for what moved and why.
   ========================================================================== */

/* ---- Design tokens -------------------------------------------------- */
:root{
  /* Color — unchanged from the approved mockup */
  --ink:#111315;
  --char:#1d2024;
  --slate:#5b6169;
  --paper:#ffffff;
  --soft:#f6f4ef;
  --line:#e2ddd5;
  --line-strong:#c7c1b8;
  --red:#c61124;
  --red-2:#8e0d1b;
  --red-tint:#fdf1f2;
  --gold:#c99a35;
  --gold-tint:#faf3e1;
  --gold-deep:#a87d24;
  --cream:#fbf7ef;
  --green:#2f7b55;
  --focus:#1a73e8;

  /* Type */
  --font-display:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --font-body:"Noto Serif","Georgia",serif;

  /* Spacing scale (4px base) */
  --sp-1:4px;  --sp-2:8px;  --sp-3:12px; --sp-4:16px;
  --sp-5:24px; --sp-6:32px; --sp-7:48px; --sp-8:72px; --sp-9:112px;

  /* Layout */
  --container:1200px;
  --measure:64ch;
  --radius-sm:6px;
  --radius-md:10px;
  --radius-lg:16px;
  --radius-pill:999px;
  --header-h:72px;

  --shadow-sm:0 1px 2px rgba(17,19,21,.06);
  --shadow-md:0 8px 24px rgba(17,19,21,.09);
  --shadow-lift:0 14px 34px rgba(198,17,36,.18);

  --ease:cubic-bezier(.4,0,.2,1);
}

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

html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;transition-duration:.001ms !important;scroll-behavior:auto !important}
}

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:17px;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,h5{
  font-family:var(--font-display);
  margin:0;
  color:var(--ink);
  letter-spacing:-0.022em;
  font-weight:800;
}
h1{font-size:clamp(2.5rem,5.6vw,4.25rem); line-height:1.02; letter-spacing:-0.03em}
h2{font-size:clamp(1.6rem,3vw,2.375rem); line-height:1.12; font-weight:700}
h3{font-size:1.2rem; line-height:1.3; font-weight:700}
h4{font-size:0.95rem; line-height:1.4; font-weight:700}

p{margin:0 0 1em; max-width:var(--measure)}
.lead{font-size:1.15rem; color:var(--slate); max-width:52ch; line-height:1.6}
.muted{color:var(--slate)}
.section--dark .muted{color:#a7adb3}

/* ---- Skip link ---------------------------------------------------------*/
.skip-link{
  position:absolute; left:8px; top:-52px;
  background:var(--ink); color:#fff; padding:12px 18px;
  border-radius:var(--radius-sm); z-index:1000;
  font-family:var(--font-display); font-weight:700; font-size:14px;
  transition:top .18s var(--ease);
}
.skip-link:focus{top:8px}

/* ---- Visible focus states (site-wide) ---------------------------------*/
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible{
  outline:3px solid var(--focus);
  outline-offset:3px;
  border-radius:4px;
}

/* ---- Layout helpers -----------------------------------------------------*/
.container{
  max-width:var(--container);
  margin-inline:auto;
  padding-inline:clamp(20px,4vw,var(--sp-6));
}
.section{
  padding-block:clamp(56px,8vw,var(--sp-9));
  position:relative;
}
.section + .section{border-top:1px solid var(--line)}
.section--soft{background:var(--soft)}
.section--dark{background:var(--ink); color:#fff}
.section--dark + .section{border-top-color:transparent}
.section--dark h1,
.section--dark h2,
.section--dark h3,
.section--dark h4{color:#fff}
.section--tight{padding-block:clamp(40px,5vw,64px)}

.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-display);
  font-size:0.74rem;
  font-weight:800;
  color:var(--red);
  letter-spacing:.09em;
  text-transform:uppercase;
  margin:0 0 var(--sp-4);
}
.eyebrow::before{content:""; width:20px; height:2px; background:var(--red); border-radius:2px; display:inline-block}
.section--dark .eyebrow{color:var(--gold)}
.section--dark .eyebrow::before{background:var(--gold)}

.grid{display:grid; gap:var(--sp-5)}
.grid--2{grid-template-columns:repeat(2,1fr)}
.grid--3{grid-template-columns:repeat(3,1fr)}
.grid--4{grid-template-columns:repeat(4,1fr)}

.split{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,5vw,var(--sp-8)); align-items:start}
.split--asym{grid-template-columns:1.35fr .95fr}

@media (max-width:900px){
  .grid--2,.grid--3,.grid--4,.split,.split--asym{grid-template-columns:1fr}
}
@media (min-width:901px) and (max-width:1100px){
  .grid--4{grid-template-columns:repeat(2,1fr)}
}

.max-measure{max-width:62ch}

/* ---- Buttons -------------------------------------------------------------*/
.btn{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:700; font-size:0.92rem;
  border-radius:var(--radius-sm);
  padding:14px 22px;
  border:1.5px solid var(--red);
  background:var(--red);
  color:#fff;
  text-decoration:none;
  cursor:pointer;
  transition:transform .16s var(--ease), background-color .16s var(--ease),
             border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.btn:hover{background:var(--red-2); border-color:var(--red-2); box-shadow:var(--shadow-lift); transform:translateY(-1px)}
.btn:active{transform:translateY(0); box-shadow:none}

.btn--secondary{
  background:transparent; color:var(--ink); border-color:transparent;
  padding:14px 4px; gap:8px;
  border-bottom:2px solid var(--ink);
  border-radius:0;
}
.btn--secondary:hover{color:var(--red); border-color:var(--red); box-shadow:none; transform:none; background:transparent}
.section--dark .btn--secondary{color:#fff; border-color:#fff}
.section--dark .btn--secondary:hover{color:var(--gold); border-color:var(--gold)}

.btn--gold{background:var(--gold); border-color:var(--gold); color:#241a02}
.btn--gold:hover{background:var(--gold-deep); border-color:var(--gold-deep); box-shadow:0 14px 34px rgba(201,154,53,.25)}
.btn--dark{background:var(--ink); border-color:var(--ink); color:#fff}
.btn--dark:hover{background:#000}

.btn .arrow{font-size:1.15em; line-height:1; transition:transform .16s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

.btn-row{display:flex; align-items:center; gap:clamp(16px,3vw,32px); flex-wrap:wrap; margin-top:var(--sp-6)}

/* ---- Cards (used sparingly — see DEV-NOTES.md on card-overuse reduction) --*/
.card{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  background:#fff;
  padding:var(--sp-5);
  transition:border-color .16s var(--ease), box-shadow .16s var(--ease), transform .16s var(--ease);
}
.card--interactive:hover{border-color:var(--line-strong); box-shadow:var(--shadow-md); transform:translateY(-2px)}
.card--soft{background:var(--soft)}
.card h3{margin-bottom:var(--sp-2)}
.card p{font-size:0.96rem; color:var(--slate); margin-bottom:0}
.card ul{margin:var(--sp-3) 0 0; padding-left:1.1em; color:var(--slate); font-size:0.92rem}
.card li{margin:5px 0}

/* Dark-card color overrides use !important deliberately and narrowly here:
   .card--dark p and .card p previously had identical CSS specificity, and
   whichever was declared later in the file silently won the cascade —
   `.card p{color:var(--slate)}` was overriding the intended light text,
   producing ~3:1 contrast on a near-black background (fails WCAG AA). Source
   order alone is fragile (the next person to edit this file could reorder it
   and reintroduce the exact same bug). !important on these dark-card color
   rules guarantees no other same-file selector — regardless of specificity
   or where it's declared — can ever silently darken text inside a dark card
   again. This is intentionally scoped to .card--dark only; nothing else in
   the stylesheet uses !important. */
.card--dark{background:var(--ink); border-color:var(--ink); color:#fff}
.card--dark h1,
.card--dark h2,
.card--dark h3,
.card--dark h4{color:#fff !important}
.card--dark .eyebrow + h3{margin:8px 0 10px}
.card--dark p,
.card--dark ul,
.card--dark li{color:#c8cbd0 !important}
.card--dark .eyebrow{color:var(--gold) !important}
.card--dark .eyebrow::before{background:var(--gold)}

/* ---- Pills ---------------------------------------------------------------*/
.skill-cluster{margin-bottom:var(--sp-5)}
.skill-cluster:last-child{margin-bottom:0}
.skill-cluster__label{
  font-family:var(--font-display); font-size:0.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.08em; color:var(--slate);
  margin-bottom:var(--sp-3); display:block;
}
.pill-group{display:flex; gap:8px; flex-wrap:wrap}
.pill{
  border:1px solid var(--line);
  border-radius:var(--radius-pill);
  padding:7px 14px;
  font-family:var(--font-display);
  font-size:0.8rem;
  font-weight:600;
  background:#fff;
  color:var(--ink);
  transition:border-color .14s var(--ease), background-color .14s var(--ease);
}
.pill--verified{border-color:#bcd8c8; background:#f4fbf6; color:#235c40}

/* ---- Client Results page — scoped reusable classes (replace one-off inline styles) --*/
.mb-0{margin-bottom:0}
.measure-48{max-width:48ch}
.profile-panel--narrow{max-width:680px}
.profile-panel__row--single{grid-template-columns:1fr}
.profile-panel--narrow .eyebrow{margin-bottom:10px}
.profile-panel--narrow h2{font-size:1.4rem}
.profile-panel__subtitle{
  font-family:var(--font-display); font-weight:700; font-size:0.92rem; margin:10px 0 14px;
}

/* ---- Site header / nav ----------------------------------------------------*/
.utility-bar{
  background:var(--ink); color:#e9eaec;
  font-family:var(--font-display);
  font-size:0.7rem; font-weight:600;
  text-transform:uppercase; letter-spacing:.08em;
  padding:8px clamp(20px,4vw,32px);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-4);
}
@media (max-width:640px){
  .utility-bar{font-size:0.64rem; flex-wrap:wrap; justify-content:center; text-align:center; gap:4px}
}

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(140%) blur(8px);
  border-bottom:1px solid var(--line);
}
.site-header__bar{
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(20px,4vw,32px);
  height:var(--header-h);
  max-width:var(--container);
  margin-inline:auto;
}
.logo{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-display); font-weight:800; font-size:1.3rem;
  letter-spacing:-0.03em; text-decoration:none; color:var(--ink);
}
.logo__bar{width:4px; height:30px; background:var(--red); border-radius:2px}
.logo__dot{width:7px; height:7px; border-radius:50%; background:var(--gold); margin-left:1px}

.primary-nav{display:flex; align-items:center; gap:clamp(20px,3vw,36px)}
.primary-nav__list{
  display:flex; gap:clamp(18px,2.4vw,32px); list-style:none; margin:0; padding:0;
  font-family:var(--font-display); font-size:0.85rem; font-weight:600;
}
.primary-nav__list a{
  text-decoration:none; color:var(--ink); padding-bottom:5px;
  border-bottom:2px solid transparent;
  transition:color .14s var(--ease), border-color .14s var(--ease);
}
.primary-nav__list a:hover{color:var(--red)}
.primary-nav__list a[aria-current="page"]{color:var(--red); border-bottom-color:var(--red)}

.nav-cta{
  font-family:var(--font-display); font-weight:800; font-size:0.76rem;
  background:var(--red); color:#fff; padding:10px 16px; border-radius:6px;
  text-decoration:none; white-space:nowrap;
  transition:background-color .14s var(--ease), box-shadow .14s var(--ease);
}
.nav-cta:hover{background:var(--red-2); box-shadow:var(--shadow-lift)}
.nav-cta--secondary{background:var(--gold); color:#241a02}
.nav-cta--secondary:hover{background:var(--gold-deep); box-shadow:0 14px 34px rgba(201,154,53,.25)}
.nav-cta-group{display:flex; align-items:center; gap:10px}

.nav-toggle{
  display:none;
  background:none; border:1px solid var(--line); border-radius:8px;
  padding:9px 11px; cursor:pointer;
}
.nav-toggle__bars{display:block; width:22px; height:2px; background:var(--ink); position:relative; transition:background-color .12s var(--ease)}
.nav-toggle__bars::before,.nav-toggle__bars::after{
  content:""; position:absolute; left:0; width:22px; height:2px; background:var(--ink);
  transition:transform .2s var(--ease), top .2s var(--ease), opacity .2s var(--ease);
}
.nav-toggle__bars::before{top:-7px}
.nav-toggle__bars::after{top:7px}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::before{top:0; transform:rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle__bars::after{top:0; transform:rotate(-45deg)}

@media (max-width:900px){
  .nav-toggle{display:inline-flex; align-items:center; justify-content:center}
  .primary-nav{
    position:fixed; inset:var(--header-h) 0 0 0;
    background:#fff;
    flex-direction:column; align-items:stretch;
    padding:var(--sp-6) clamp(20px,6vw,32px);
    transform:translateY(-10px);
    opacity:0; visibility:hidden; pointer-events:none;
    transition:opacity .2s var(--ease), transform .2s var(--ease), visibility .2s;
    overflow-y:auto;
  }
  .primary-nav.is-open{opacity:1; visibility:visible; pointer-events:auto; transform:translateY(0)}
  .primary-nav__list{flex-direction:column; gap:0; font-size:1.1rem}
  .primary-nav__list li{border-bottom:1px solid var(--line)}
  .primary-nav__list a{display:block; padding:18px 4px; border-bottom-width:0}
  .nav-cta{margin-top:var(--sp-5); text-align:center; padding:14px}
  .nav-cta-group{flex-direction:column; align-items:stretch; gap:10px}
  .nav-cta-group .nav-cta{margin-top:0}
  .nav-cta-group .nav-cta:first-child{margin-top:var(--sp-5)}
}

/* ---- Footer ----------------------------------------------------------------*/
.site-footer{background:var(--ink); color:#c7ccd0; padding:clamp(48px,7vw,var(--sp-8)) 0 var(--sp-5)}
.site-footer .footer-label{color:#fff; font-size:0.72rem; letter-spacing:.07em; text-transform:uppercase; margin:0 0 var(--sp-4); font-weight:700; font-family:var(--font-display)}
.site-footer a{color:#c1c6cb; text-decoration:none; display:block; margin-bottom:10px; font-size:0.9rem; transition:color .14s var(--ease)}
.site-footer a:hover{color:#fff}
.site-footer .logo{color:#fff}
.site-footer p{font-size:0.9rem; color:#a9afb5; max-width:38ch}
.site-footer .footer-blurb{margin-top:12px}
.footer-grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:clamp(28px,4vw,var(--sp-7))}
@media (max-width:800px){.footer-grid{grid-template-columns:1fr 1fr; row-gap:var(--sp-6)} }
@media (max-width:520px){.footer-grid{grid-template-columns:1fr} }
.footer-bottom{
  border-top:1px solid #2b2f34; margin-top:clamp(32px,5vw,var(--sp-7)); padding-top:var(--sp-4);
  display:flex; justify-content:space-between; gap:var(--sp-3); flex-wrap:wrap;
  font-family:var(--font-display); font-size:0.76rem; color:#8d9399;
}

/* ---- Abstract geometric visual (hero) --------------------------------------*/
.abstract-visual{
  position:relative;
  min-height:340px;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:
    radial-gradient(120% 120% at 100% 0%, #fdfbf7 0%, #f6f2ea 55%, #f1ebe0 100%);
  border:1px solid var(--line);
  isolation:isolate;
}
.abstract-visual::before{
  content:""; position:absolute; z-index:0;
  width:250px; height:250px;
  background:linear-gradient(150deg,var(--red) 0%,var(--red-2) 100%);
  transform:rotate(45deg); right:-72px; top:-30px; border-radius:26px;
  box-shadow:0 30px 60px rgba(142,13,27,.28);
}
.abstract-visual::after{
  content:""; position:absolute; z-index:0;
  width:150px; height:150px;
  border:2px solid var(--gold); transform:rotate(45deg);
  right:118px; top:64px; border-radius:20px;
}
.abstract-visual__ring{
  position:absolute; z-index:0; width:340px; height:340px; border-radius:50%;
  border:1px solid rgba(17,19,21,.08); right:-90px; bottom:-140px;
}
.abstract-visual__caption{
  position:relative; z-index:2; max-width:250px; padding:var(--sp-6) var(--sp-6) 0;
  font-family:var(--font-display); font-weight:800; font-size:1.6rem; line-height:1.12;
  letter-spacing:-.01em;
}
.abstract-visual__caption .red{color:var(--red); display:block; margin-top:2px}
.abstract-visual__note{
  position:relative; z-index:2; margin:var(--sp-6) var(--sp-6) var(--sp-6) var(--sp-6);
  background:rgba(17,19,21,.96); color:#fff; border-radius:12px; padding:var(--sp-5);
  box-shadow:0 20px 44px rgba(17,19,21,.22);
}
.abstract-visual__note-title{font-family:var(--font-display); font-size:0.78rem; margin:0 0 10px; color:#fff; text-transform:uppercase; letter-spacing:.06em; font-weight:800}
.abstract-visual__note li{font-family:var(--font-display); font-size:0.82rem; color:#e2e4e6; margin:7px 0; list-style:none; padding-left:14px; position:relative}
.abstract-visual__note li::before{content:"+"; position:absolute; left:0; color:var(--gold); font-weight:800}
.abstract-visual__note ul{margin:0; padding:0}
@media (max-width:520px){
  .abstract-visual{min-height:280px}
  .abstract-visual__caption{font-size:1.3rem; padding:var(--sp-5) var(--sp-5) 0}
  .abstract-visual__note{margin:var(--sp-5)}
}

/* ---- Hero ------------------------------------------------------------------*/
.hero{
  padding-block:clamp(56px,8vw,var(--sp-9));
  position:relative;
}
.hero::before{
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--cream) 0%, rgba(251,247,239,0) 62%);
}
.hero__grid{display:grid; grid-template-columns:1.28fr .9fr; gap:clamp(32px,5vw,var(--sp-8)); align-items:center}
@media (max-width:960px){.hero__grid{grid-template-columns:1fr}}
.hero h1{margin-bottom:var(--sp-5)}
.hero .lead{margin-bottom:0}

/* ---- Engagement model list (replaces equal-card grid) -----------------------*/
.model-list{display:flex; flex-direction:column}
.model-row{
  display:grid; grid-template-columns:88px 1fr 1.15fr; gap:clamp(20px,3vw,40px);
  padding-block:clamp(28px,4vw,40px);
  border-top:1px solid #2b2f34;
  align-items:start;
}
.model-row:last-child{border-bottom:1px solid #2b2f34}
.model-row__index{
  font-family:var(--font-display); font-weight:800; font-size:2.1rem;
  color:var(--gold); letter-spacing:-0.02em; line-height:1;
}
.model-row__head h3{font-size:1.35rem; margin-bottom:8px}
.model-row__for{
  font-family:var(--font-display); font-size:0.76rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--gold);
}
.model-row__body p{color:#c7ccd0; margin-bottom:12px; max-width:52ch}
.model-row__body ul{list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px 20px}
.model-row__body li{
  font-family:var(--font-display); font-size:0.82rem; color:#e4e6e8;
  padding-left:16px; position:relative;
}
.model-row__body li::before{content:""; position:absolute; left:0; top:8px; width:7px; height:7px; background:var(--red); border-radius:50%}
@media (max-width:800px){
  .model-row{grid-template-columns:56px 1fr; grid-template-areas:"idx head" "body body"}
  .model-row__index{grid-area:idx}
  .model-row__head{grid-area:head}
  .model-row__body{grid-area:body; margin-top:14px}
}

/* ---- Industry feature layout (replaces 3 equal cards) -----------------------*/
.industry-feature{
  display:grid; grid-template-columns:1.3fr 1fr; gap:clamp(28px,4vw,56px);
  align-items:stretch;
}
@media (max-width:900px){.industry-feature{grid-template-columns:1fr}}
.industry-feature__lead{
  border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(28px,4vw,40px);
  background:linear-gradient(155deg,#fff 0%,var(--soft) 100%);
  display:flex; flex-direction:column; justify-content:flex-end;
  min-height:280px;
}
.industry-feature__lead .tag{
  font-family:var(--font-display); font-size:0.72rem; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; color:var(--red); margin-bottom:14px;
}
.industry-feature__lead h2{font-size:1.6rem}
.industry-feature__lead h2 + p{margin-top:10px}
.industry-feature__lead-title{font-size:1.4rem}
.industry-list{display:flex; flex-direction:column}
.industry-list__item{padding-block:var(--sp-5); border-bottom:1px solid var(--line)}
.industry-list__item:first-child{padding-top:0}
.industry-list__item h3{font-size:1.05rem; margin-bottom:6px}
.industry-list__item p{font-size:0.92rem; color:var(--slate); margin-bottom:0}

/* ---- Proof "moment" band -----------------------------------------------------*/
.proof-band{
  background:var(--ink); color:#fff;
  padding:clamp(64px,9vw,var(--sp-9)) 0;
  position:relative; overflow:hidden;
}
.proof-band::before{
  content:""; position:absolute; width:2px; height:70%; background:linear-gradient(180deg,var(--red),transparent);
  left:calc(50% - 620px); top:15%; opacity:.5;
}
.proof-band__inner{max-width:820px; margin-inline:auto; padding-inline:clamp(20px,4vw,32px); text-align:left}
.proof-band .eyebrow{color:var(--gold)}
.proof-band .eyebrow::before{background:var(--gold)}
.proof-band__statement{
  color:#fff;
  font-family:var(--font-display); font-weight:700; font-size:clamp(1.6rem,3.4vw,2.5rem);
  line-height:1.2; letter-spacing:-.015em; margin-bottom:var(--sp-5);
}
.proof-band__statement .accent{color:var(--gold)}
.proof-band p.lead{color:#c7ccd0; max-width:60ch}
.proof-band .btn-row{margin-top:var(--sp-6)}

/* ---- Capability index (team/bench role groups; replaces 8 equal cards) ------*/
.capability-index{display:grid; grid-template-columns:repeat(2,1fr); gap:0 var(--sp-7)}
@media (max-width:800px){.capability-index{grid-template-columns:1fr}}
.capability-index__item{
  padding-block:var(--sp-5); border-bottom:1px solid var(--line);
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-4); align-items:baseline;
}
.capability-index__num{
  font-family:var(--font-display); font-weight:800; font-size:0.78rem; color:var(--red);
}
.capability-index__item h3{font-size:1rem; margin-bottom:4px}
.capability-index__item p{font-size:0.9rem; color:var(--slate); margin-bottom:0}

/* ---- Verified profile panel ---------------------------------------------------*/
.profile-panel{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff}
.profile-panel__row{padding:var(--sp-6); display:grid; grid-template-columns:180px 1fr; gap:var(--sp-5)}
.profile-panel__row + .profile-panel__row{border-top:1px solid var(--line)}
.profile-panel__meta{font-family:var(--font-display)}
.profile-panel__name{font-weight:800; font-size:1rem; margin-bottom:4px}
.profile-panel__tenure{font-size:0.8rem; color:var(--slate)}
@media (max-width:640px){.profile-panel__row{grid-template-columns:1fr; gap:8px}}

/* ---- Step strips (process / bench-to-pod) ---------------------------------*/
.step-strip{display:grid; grid-template-columns:repeat(4,1fr); border-top:2px solid var(--ink); margin-top:var(--sp-6)}
.section--dark .step-strip{border-top-color:var(--gold)}
.step-strip__item{padding:var(--sp-5) clamp(14px,2vw,var(--sp-4)); border-right:1px solid var(--line)}
.section--dark .step-strip__item{border-right-color:#2b2f34}
.step-strip__item:last-child{border-right:0}
.step-strip__num{font-family:var(--font-display); font-size:0.78rem; font-weight:800; color:var(--red); margin-bottom:8px}
.section--dark .step-strip__num{color:var(--gold)}
@media (max-width:800px){
  .step-strip{grid-template-columns:1fr 1fr}
  .step-strip__item{border-bottom:1px solid var(--line); border-right:1px solid var(--line)}
  .step-strip__item:nth-child(2n){border-right:0}
}
@media (max-width:480px){.step-strip{grid-template-columns:1fr} .step-strip__item{border-right:0}}

/* ---- Tables ------------------------------------------------------------------*/
.table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; border:1px solid var(--line); border-radius:var(--radius-md)}
.compare-table{width:100%; min-width:640px; border-collapse:collapse; font-family:var(--font-display); font-size:0.88rem}
.compare-table th,.compare-table td{padding:14px 16px; text-align:left; vertical-align:top; border-bottom:1px solid var(--line)}
.compare-table thead th{background:var(--soft); font-weight:700; border-bottom:1px solid var(--line-strong)}
.compare-table tbody tr:last-child td{border-bottom:0}
.compare-table th[scope="row"]{font-weight:700; width:20%; background:var(--soft)}

/* ---- Forms -------------------------------------------------------------------*/
.form-panel{border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,var(--sp-6)); background:#fff}
.form-field{margin-bottom:var(--sp-4)}
.form-field label{display:block; font-family:var(--font-display); font-weight:700; font-size:0.85rem; margin-bottom:7px}
.form-field input,
.form-field textarea,
.form-field select{
  width:100%; border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:12px 13px; font:inherit; font-family:var(--font-display); font-size:0.94rem;
  background:#fff; color:var(--ink);
  transition:border-color .14s var(--ease);
}
.form-field input:hover,.form-field textarea:hover{border-color:var(--line-strong)}
.form-field .hint{font-size:0.8rem; color:var(--slate); margin-top:5px}

/* ---- Survey options -----------------------------------------------------------*/
.survey-panel{border:1px solid var(--line); border-radius:var(--radius-lg); padding:clamp(24px,3vw,var(--sp-6)); background:#fff}
.survey-question{margin-bottom:var(--sp-6)}
.survey-question:last-of-type{margin-bottom:0}
.survey-question h3{font-size:1.02rem; margin-bottom:var(--sp-3)}
.option-group{display:grid; grid-template-columns:repeat(3,1fr); gap:10px}
@media (max-width:700px){.option-group{grid-template-columns:1fr}}
.option{
  border:1px solid var(--line); border-radius:8px; padding:13px 15px;
  background:#fff; font-family:var(--font-display); font-size:0.87rem; font-weight:600;
  color:var(--ink); cursor:pointer; text-align:left;
  transition:border-color .14s var(--ease), background-color .14s var(--ease), color .14s var(--ease);
}
.option:hover{border-color:var(--red-2)}
.option[aria-pressed="true"]{border-color:var(--red); background:var(--red-tint); color:var(--red-2)}
.survey-result{margin-top:var(--sp-6); padding:var(--sp-5); background:var(--soft); border-radius:var(--radius-md); font-size:0.95rem; border-left:3px solid var(--red)}
.survey-result[hidden]{display:none}

/* ---- Notice banner -------------------------------------------------------------*/
.notice{border:1px solid var(--line); background:var(--soft); border-radius:var(--radius-md); padding:var(--sp-5); font-size:0.92rem}

/* ---- Photo component (approved imagery) ------------------------------------
   object-fit:cover + a fixed aspect-ratio crops responsively at every width
   instead of stretching/distorting the source image. */
/* ---- Photo component (approved imagery) ------------------------------------
   Source images are 421x282px. A fixed 3:2 aspect-ratio matches that native
   ratio (no odd cropping), and max-width caps display size close to native
   resolution so a small source image is never upscaled into a large,
   soft-looking hero band. object-fit:cover still crops responsively at any
   container width up to that cap, without stretching/distorting. */
.photo-frame{
  border-radius:var(--radius-lg);
  overflow:hidden;
  aspect-ratio:3/2;
  max-width:440px;
  background:var(--soft);
}
.photo-frame img{width:100%; height:100%; object-fit:cover; display:block}
.photo-frame--center{margin-inline:auto}
.photo-caption{font-size:0.8rem; color:var(--slate); margin-top:10px}

/* ---- Pull quote (About page founder quote) ------------------------------------*/
.bigquote{
  font-size:clamp(1.15rem,2vw,1.4rem); line-height:1.5; font-style:italic;
  border-left:3px solid var(--red); padding:4px 0 4px 24px; color:var(--ink);
}

/* ---- Utility -------------------------------------------------------------------*/
.visually-hidden{
  position:absolute !important; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.text-center{text-align:center}

/* ---- Small utility classes (consolidated from repeated inline styles) --------*/
.on-dark{color:#fff}
.text-red{color:var(--red)}
.link-accent{color:var(--red); font-weight:600}
.section--flush{border-top:0}
.section--flush-tight{border-top:0; padding-top:8px}
.text-tight{font-size:1rem}
.mt-1{margin-top:8px}
.mt-2{margin-top:12px}
.mt-3{margin-top:14px}
.mt-4{margin-top:16px}
.mt-5{margin-top:var(--sp-5)}
.mt-6{margin-top:var(--sp-6)}
.mt-7{margin-top:var(--sp-7)}

/* Header spacing, inline-nav tablet range (901-1200px).
   Below ~1100px the logo, six links and two buttons need more room than the header has, so the nav ran into the logo
   (and squeezed it). The gaps BETWEEN the nav items scale down smoothly as the window narrows (with a safety margin for a
   15px desktop scrollbar, which 100vw includes but the layout does not) and return to exactly today's values at 1200px.
   The logo keeps its full size and a minimum gap to the nav is guaranteed. No font, size, colour or content change.
   Above 1200px and in the menu layout (<=900px) nothing changes. */
@media (min-width:901px) and (max-width:1200px){
  .site-header__bar{gap:28px}
  .site-header .logo{flex-shrink:0}
  .primary-nav{gap:clamp(12px, calc(12px + (100vw - 1000px) * 0.12), 36px)}
  .primary-nav__list{gap:clamp(11px, calc(11px + (100vw - 1000px) * 0.089), 28.8px)}
  .nav-cta-group{gap:clamp(8px, calc(8px + (100vw - 1000px) * 0.01), 10px)}
  .nav-cta{padding:10px clamp(12px, calc(12px + (100vw - 1000px) * 0.02), 16px)}
}