/* ==========================================================================
   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-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}
}

/* ---- 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)}