/* self-hosted fonts (latin subset) — no third-party origins, no GDPR surface */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/montserrat-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/montserrat-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('/assets/fonts/montserrat-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('/assets/fonts/montserrat-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('/assets/fonts/montserrat-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/assets/fonts/ibm-plex-mono-latin-500-normal.woff2') format('woff2')}
:root{
  --paper:#FAFBFC;
  --ink:#112935;
  --steel:#5A6E78;
  --hairline:#D7DCDF;
  --pink:#FF0086;
  /* Brand pink reaches only 3.62:1 on paper and 3.75:1 under white text —
     fine for display type (>=24px needs 3.0) but short of the 4.5:1 AA
     floor for body-size text. --pink-text is the same hue and saturation,
     darkened until both directions pass: 4.83:1 on paper, 5.01:1 under
     white. Use it for small text and for pink behind white text. */
  --pink-text:#D90072;
  --pink-soft:#FFD6E9;
  --mist:#F1F4F5;
  --pink-light:#FF4DA6;
  --deep:#0C1F28;
  --max:1180px;
  --pad:clamp(20px,4vw,48px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
body{font-family:'Montserrat',system-ui,sans-serif;background:var(--paper);color:var(--ink);line-height:1.55;-webkit-font-smoothing:antialiased}
.mono{font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--steel)}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--pad)}
a{color:inherit}
/* tinted section — third surface, breaks up runs of light sections without
   the weight of a full dark band. Steel body text stays at 4.83:1 on it. */
.tint{background:var(--mist)}
.tint .grid{border-left-color:#DCE3E6;border-top-color:#DCE3E6}
.tint .card{background:#fff;border-right-color:#DCE3E6;border-bottom-color:#DCE3E6}
/* utilities */
.pink{color:var(--pink-text)}
.mono .pink{color:var(--pink-text)} /* breadcrumbs */
section.flush{padding-top:0}
.lede.spaced{margin-bottom:clamp(28px,4vw,44px)}
:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:2px}
.skip-link{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:#fff;padding:10px 18px;border-radius:0 0 8px 0;font-weight:600;text-decoration:none}
.skip-link:focus{left:0}
main:focus,.page h1:focus{outline:none}
::selection{background:var(--pink);color:#fff}

/* ---------- header ---------- */
header{position:fixed;inset:0 0 auto 0;z-index:50;background:var(--paper);border-bottom:1px solid var(--hairline)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1rem}
.logo{font-weight:700;font-size:1.02rem;letter-spacing:.22em;text-decoration:none;display:flex;align-items:center;gap:.55rem}
.logo .mark{flex:0 0 auto}
.nav-links{display:flex;gap:clamp(10px,2vw,26px);align-items:center}
.nav-links a{text-decoration:none;font-size:.88rem;font-weight:500;color:var(--steel);transition:color .2s;white-space:nowrap}
.nav-links a:hover{color:var(--ink)}
.nav-links a.active{color:var(--ink);font-weight:700}
.cta{display:inline-block;background:var(--ink);color:#fff;text-decoration:none;font-weight:600;font-size:.88rem;padding:10px 20px;border-radius:999px;transition:background .2s,transform .2s}
.cta:hover{background:var(--pink-text);transform:translateY(-1px)}
/* header CTA sits inside .nav-links, whose `a` rule would otherwise override .cta — force white text/weight */
.nav-links a.cta{color:#fff;font-weight:600}
.nav-links a.cta:hover{color:#fff}
.nav-links a.cta.active{background:var(--pink-text)}
.cta-ghost{display:inline-block;border:1px solid var(--hairline);color:var(--ink);text-decoration:none;font-weight:600;font-size:.88rem;padding:10px 20px;border-radius:999px;background:#fff;transition:border-color .2s,color .2s}
.cta-ghost:hover{border-color:var(--pink);color:var(--pink-text)}
.menu-btn{display:none;background:none;border:1px solid var(--hairline);border-radius:8px;padding:8px 10px;cursor:pointer;font-family:'IBM Plex Mono',monospace;font-size:.7rem;letter-spacing:.1em}

/* ---------- page scaffolding ---------- */
.page{display:block}
main{min-height:100vh}
section{padding:clamp(64px,9vw,120px) 0}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;border-top:1px solid var(--ink);padding-top:14px;margin-bottom:clamp(32px,5vw,56px);flex-wrap:wrap}
h2{font-size:clamp(1.6rem,3.2vw,2.5rem);letter-spacing:-.025em;font-weight:800;line-height:1.12;max-width:24ch}
.lede{font-size:clamp(1rem,1.5vw,1.2rem);color:var(--steel);max-width:58ch}

/* ---------- hero ---------- */
.hero{position:relative;min-height:88vh;display:flex;align-items:flex-end;padding:140px 0 64px;overflow:hidden;border-bottom:1px solid var(--hairline)}
#contours{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;width:100%}
.coords{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.coords span{color:var(--pink-text)}
h1{font-size:clamp(2.4rem,6.6vw,5rem);line-height:1.04;letter-spacing:-.035em;font-weight:800;max-width:15ch}
h1 em{font-style:normal;color:var(--pink)}
.hero p.sub{margin-top:1.5rem;font-size:clamp(1rem,1.6vw,1.22rem);color:var(--steel);max-width:52ch}
.hero-actions{display:flex;gap:14px;margin-top:2.2rem;flex-wrap:wrap}

/* page heroes (subpages) */
.page-hero{padding:150px 0 0;position:relative;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;pointer-events:none;background:url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%201600%20420%27%20preserveAspectRatio=%27xMidYMax%20slice%27%3E%3Cpath%20d=%27M0,204L20,205L40,204L60,203L80,202L100,200L120,198L140,196L160,193L180,191L200,189L220,187L240,185L260,183L280,182L300,181L320,180L340,180L360,180L380,180L400,180L420,180L440,180L460,180L480,180L500,180L520,179L540,177L560,176L580,173L600,171L620,168L640,164L660,160L680,156L700,152L720,147L740,143L760,139L780,135L800,132L820,129L840,127L860,125L880,124L900,123L920,123L940,124L960,126L980,128L1000,130L1020,133L1040,136L1060,139L1080,143L1100,146L1120,149L1140,152L1160,154L1180,157L1200,158L1220,160L1240,161L1260,161L1280,161L1300,161L1320,161L1340,161L1360,160L1380,160L1400,160L1420,160L1440,160L1460,161L1480,162L1500,163L1520,165L1540,167L1560,169L1580,172L1600,175%27%20fill=%27none%27%20stroke=%27%23112935%27%20stroke-opacity=%27.08%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M0,294L20,294L40,295L60,295L80,296L100,296L120,296L140,296L160,295L180,294L200,293L220,292L240,290L260,288L280,286L300,284L320,282L340,279L360,277L380,275L400,273L420,272L440,271L460,270L480,270L500,271L520,272L540,273L560,275L580,278L600,281L620,285L640,289L660,293L680,298L700,302L720,307L740,312L760,316L780,321L800,325L820,328L840,331L860,334L880,336L900,338L920,339L940,339L960,339L980,339L1000,338L1020,337L1040,335L1060,333L1080,331L1100,329L1120,326L1140,324L1160,322L1180,320L1200,319L1220,317L1240,316L1260,315L1280,315L1300,314L1320,314L1340,315L1360,315L1380,315L1400,316L1420,316L1440,316L1460,316L1480,316L1500,315L1520,314L1540,312L1560,310L1580,308L1600,305%27%20fill=%27none%27%20stroke=%27%23112935%27%20stroke-opacity=%27.10%27%20stroke-width=%271%27/%3E%3Cpath%20d=%27M0,260L20,257L40,254L60,251L80,249L100,247L120,246L140,245L160,244L180,244L200,244L220,244L240,243L260,243L280,243L300,242L320,242L340,241L360,239L380,237L400,235L420,232L440,230L460,226L480,223L500,220L520,216L540,213L560,209L580,206L600,204L620,202L640,200L660,199L680,198L700,199L720,200L740,201L760,203L780,206L800,209L820,213L840,217L860,221L880,226L900,230L920,234L940,238L960,242L980,246L1000,249L1020,251L1040,253L1060,255L1080,256L1100,256L1120,256L1140,256L1160,255L1180,255L1200,254L1220,253L1240,252L1260,251L1280,250L1300,249L1320,249L1340,249L1360,250L1380,250L1400,251L1420,253L1440,254L1460,256L1480,257L1500,259L1520,260L1540,262L1560,263L1580,263L1600,263%27%20fill=%27none%27%20stroke=%27%23FF0086%27%20stroke-opacity=%27.30%27%20stroke-width=%271.4%27/%3E%3C/svg%3E") center bottom/cover no-repeat}
/* The ::before above is a static SVG of the same contour motif. It is the
   fallback for visitors without JavaScript; once the script runs it swaps the
   .no-js class for .js and the live canvas takes over. */
.js .page-hero::before{display:none}
.page-hero .wrap{position:relative}
.page-hero h1{font-size:clamp(2rem,5vw,3.6rem);margin-top:1rem}
.page-hero .sub{margin-top:1.4rem}

/* ---------- logo wall ---------- */
.logowall{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));border-top:1px solid var(--hairline);border-left:1px solid var(--hairline)}
.logowall .cell{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:#fff;aspect-ratio:5/2;display:flex;align-items:center;justify-content:center;padding:18px 22px;transition:background .2s}
.logowall .cell:hover{background:#FFF0F7}
.logowall .cell img{max-width:100%;max-height:100%;object-fit:contain;transition:transform .25s ease}
.logowall .cell:hover img{transform:scale(1.03)}
/* home wall: locked grid — 15 logos = 5x3 (desktop) / 3x5 (narrow); both divide cleanly */
.logowall--home{grid-template-columns:repeat(5,1fr)}
@media(max-width:900px){.logowall--home{grid-template-columns:repeat(3,1fr)}}
/* graceful fallback tile when a real logo file is missing */
.logo-mono{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.5rem;width:100%;height:100%;text-align:center}
.logo-mono span{font-weight:700;font-size:clamp(.82rem,1.05vw,1.02rem);letter-spacing:.03em;color:var(--ink);line-height:1.12}
.logo-mono::after{content:"";width:18px;height:3px;background:var(--pink);border-radius:2px}

/* ---------- stats ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)}
.stat{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);background:#fff;padding:clamp(22px,3vw,34px)}
.stat b{display:block;font-size:clamp(2rem,4vw,3rem);font-weight:800;letter-spacing:-.03em;line-height:1}
.stat b i{font-style:normal;color:var(--pink)}
.stat .mono{display:block;margin-top:.7rem}
.stat p{margin-top:.6rem;color:var(--steel);font-size:.95rem}

/* ---------- dark band ---------- */
.band{background:var(--deep);color:#EAF0F3}
.band .sec-head{border-top-color:#2A4654}
.band .mono{color:#8FA3AD}
.band h2 span,.band h2 em{color:var(--pink-light);font-style:normal}
.band p.lead{font-size:1.05rem;color:#B4C2CA;max-width:56ch}
.band .cta{background:var(--pink-text);color:#fff}
.band .cta:hover{background:#fff;color:var(--deep)}
.consequences{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,4vw,56px);margin-top:2.6rem}
.consequences.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:760px){.consequences.three{grid-template-columns:1fr}}
.choices{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,40px);margin-top:2rem}
.choice{border-top:1px solid #2A4654;padding-top:16px}
.choice .mono{color:var(--pink-light);display:block;margin-bottom:.7rem}
.choice h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem;color:#fff}
.choice p{color:#B4C2CA;font-size:.95rem}
.band .sublabel{display:block;margin:2.8rem 0 .2rem;font-family:'IBM Plex Mono',monospace;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#8FA3AD}
.band .sublabel.first{margin-top:1.6rem}
@media(max-width:760px){.choices{grid-template-columns:1fr}}
.consequence{border-top:1px solid #2A4654;padding-top:18px}
.consequence .mono{color:var(--pink-light);display:block;margin-bottom:.8rem}
.consequence h3{font-size:1.15rem;font-weight:700;margin-bottom:.5rem}
.consequence p{color:#B4C2CA;font-size:.95rem}
.consequence p strong{color:#fff;font-weight:700}
.consequence p em{font-style:normal;color:#fff;font-weight:600}
.band blockquote{margin-top:3rem;border-left:3px solid var(--pink);padding-left:1.4rem;font-size:clamp(1.05rem,1.8vw,1.35rem);font-weight:600;line-height:1.45;max-width:34ch}
.band blockquote footer{margin-top:.8rem}
.band .cta-ghost{background:transparent;color:#EAF0F3;border-color:#2A4654}
/* band variants: closing call-to-action bands */
.band.short{padding-top:clamp(48px,7vw,80px)}
.closer h2{margin-top:14px}
.closer .lead{margin-top:1rem}
.closer blockquote{margin-top:1.6rem}
.closer blockquote~.hero-actions{margin-top:2.4rem}
.consequences.auto{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}

/* ---------- expertise grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));border-left:1px solid var(--hairline);border-top:1px solid var(--hairline)}
.card{border-right:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:clamp(20px,3vw,30px);background:#fff;position:relative;transition:background .25s}
.card:hover{background:#FFF0F7}
.card .mono{display:block;margin-bottom:.9rem}
.card h3{font-size:1.1rem;font-weight:700;letter-spacing:-.01em;margin-bottom:.5rem}
.card p{color:var(--steel);font-size:.95rem}
.card p strong{color:var(--ink);font-weight:700}
/* six-item grids lock to 3x2 on wide screens (auto-fit would reflow 4+2 and leave dead cells) */
.grid--three{grid-template-columns:repeat(3,1fr)}
@media(max-width:1000px){.grid--three{grid-template-columns:repeat(2,1fr)}}
@media(max-width:680px){.grid--three{grid-template-columns:1fr}}
.card::after{content:"";position:absolute;left:0;top:0;width:3px;height:0;background:var(--pink);transition:height .3s}
.card:hover::after{height:100%}

/* ---------- growth chart (instrument) ---------- */
.instrument{display:block;width:100%;height:auto;max-width:760px;overflow:visible}
.instrument .grid line{stroke:#E6EBED;stroke-width:1}
.instrument .yaxis text{font-family:'IBM Plex Mono',monospace;font-size:10px;fill:#9AA7AD;text-anchor:end}
.instrument .bars .b{fill:var(--pink-soft);transition:height .9s cubic-bezier(.2,.7,.2,1),y .9s cubic-bezier(.2,.7,.2,1)}
.instrument .bars .b.hot{fill:var(--pink)}
.instrument .ticks line{stroke:var(--pink);stroke-width:3}
.instrument .vals text{font-family:'IBM Plex Mono',monospace;font-weight:500;font-size:13px;fill:var(--ink);text-anchor:middle}
.instrument .vals text.hotval{fill:var(--pink)}
.instrument .xaxis text{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--steel);text-anchor:middle;letter-spacing:1px}
.instrument .cap{font-family:'IBM Plex Mono',monospace;font-size:11px;fill:var(--steel);letter-spacing:1.5px}
.chart-note{margin-top:1.6rem;color:var(--steel);font-size:.95rem;max-width:58ch}
.chart-note.wall-caption{margin-top:1.4rem}
.inline-next{color:var(--ink);font-weight:600;text-decoration:underline;
  text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .18s}
.inline-next:hover{color:var(--pink-text)}

/* ---------- prose / split ---------- */
.split{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(32px,5vw,80px);align-items:start}
.split p{color:var(--steel);font-size:1rem;max-width:56ch}
.split p+p{margin-top:1rem}
.split p strong{color:var(--ink)}
/* founder story — single readable column, emphasised lead + close */
.story{max-width:64ch}
.story p{color:var(--steel);font-size:clamp(1.02rem,1.5vw,1.16rem);line-height:1.72}
.story p+p{margin-top:1.25rem}
.story p:first-child{font-size:clamp(1.3rem,2.4vw,1.8rem);line-height:1.35;color:var(--ink);font-weight:700;letter-spacing:-.01em;max-width:22ch}
.story p strong{color:var(--ink)}
.story p:last-child{color:var(--ink)}
.facts{display:grid;border-top:1px solid var(--hairline)}
.fact{display:flex;justify-content:space-between;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--hairline);gap:1rem}
.fact b{font-weight:700;letter-spacing:-.01em;text-align:right}

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:clamp(22px,3vw,38px)}
.step{border-top:1px solid var(--hairline);padding-top:16px}
.step .mono{color:var(--pink-text);display:block;margin-bottom:.7rem}
.step h3{font-size:1.06rem;font-weight:700;margin-bottom:.45rem}
.step p{color:var(--steel);font-size:.95rem}

/* ---------- founders ---------- */
.founders{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,3vw,32px)}
.founder{border:1px solid var(--hairline);background:#fff;overflow:hidden;display:flex;flex-direction:column;border-radius:16px;padding:12px}
.founder .photo{position:relative;aspect-ratio:1/1;overflow:hidden;background:var(--hairline);border-radius:10px;border:1px solid var(--hairline)}
.founder .photo img{width:100%;height:100%;object-fit:cover;object-position:center;display:block;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.founder:hover .photo img{transform:scale(1.04)}
.founder .photo::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(12,31,40,.94) 0%,rgba(12,31,40,.86) 10%,rgba(12,31,40,.5) 20%,rgba(12,31,40,.12) 27%,transparent 34%)}
.founder .photo .name{position:absolute;left:0;right:0;bottom:0;padding:clamp(16px,2.5vw,22px);z-index:1}
.founder .photo .name h3{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:800;letter-spacing:-.01em;color:#fff;line-height:1.1;text-shadow:0 1px 3px rgba(0,0,0,.55),0 2px 16px rgba(0,0,0,.5)}
.founder .photo .name .mono{display:block;margin-top:.3rem;color:#fff;opacity:.95;text-shadow:0 1px 3px rgba(0,0,0,.6),0 1px 10px rgba(0,0,0,.5)}
.founder .bio{padding:clamp(14px,2vw,18px) clamp(4px,.6vw,6px) clamp(4px,.6vw,6px)}
.founder .bio p{color:var(--steel);font-size:.92rem}

/* ---------- engagements / vignettes ---------- */
.vignettes{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:clamp(20px,3vw,32px)}
.vig{border:1px solid var(--hairline);background:#fff;padding:clamp(22px,3vw,30px)}
.vig .mono{display:block;margin-bottom:.9rem;color:var(--pink-text)}
.vig h3{font-size:1.05rem;font-weight:700;margin-bottom:.5rem}
.vig p{color:var(--steel);font-size:.95rem}
.vig dl{margin-top:1rem;border-top:1px solid var(--hairline)}
.vig dl div{display:flex;justify-content:space-between;gap:1rem;padding:8px 0;border-bottom:1px solid var(--hairline);font-size:.82rem}
.vig dt{color:var(--steel)}
.vig dd{font-weight:600}
.todo{outline:2px dashed var(--pink);outline-offset:4px;position:relative}
.todo::before{content:"VERIFY BEFORE LAUNCH";position:absolute;top:-11px;right:10px;background:var(--pink);color:#fff;font-family:'IBM Plex Mono',monospace;font-size:.58rem;letter-spacing:.1em;padding:2px 8px}

/* ---------- benefit buckets (join page) ---------- */
.perklist{list-style:none;margin-top:.7rem}
.perklist li{position:relative;padding-left:1.15rem;color:var(--steel);font-size:.9rem;line-height:1.5;margin-top:.6rem}
.perklist li::before{content:"";position:absolute;left:0;top:.5em;width:6px;height:6px;background:var(--pink);border-radius:50%}
.perklist li b{color:var(--ink);font-weight:600}

/* ---------- role dossier list (what-we-solve) ---------- */
.rolelist{border-top:1px solid var(--ink)}
.role{display:grid;grid-template-columns:minmax(220px,.9fr) 1.6fr;gap:clamp(20px,4vw,56px);padding:clamp(24px,3.2vw,36px) 0;border-bottom:1px solid var(--hairline)}
.role .rhead .mono{display:block;color:var(--pink-text);margin-bottom:.5rem}
.role .rhead h3{font-size:clamp(1.1rem,1.9vw,1.35rem);font-weight:800;letter-spacing:-.01em;line-height:1.15}
.role .rbody p{color:var(--steel);font-size:.98rem;max-width:60ch}
.role .asks{list-style:none;margin-top:1rem;display:grid;gap:.5rem}
.role .asks li{position:relative;padding-left:1.6rem;color:var(--ink);font-size:.95rem;line-height:1.45}
.role .asks li::before{content:"→";position:absolute;left:0;top:0;color:var(--pink);font-weight:700}
.role .stack{margin-top:1.1rem;padding-top:.8rem;border-top:1px solid var(--hairline);color:var(--steel);font-size:.86rem}
.role .stack b{color:var(--ink);font-weight:600}
@media(max-width:760px){.role{grid-template-columns:1fr;gap:14px}}

/* ---------- contact: customer / candidate split ---------- */
.contact-split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px);max-width:1000px}
.pathcard{border:1px solid var(--hairline);background:#fff;padding:clamp(24px,3vw,36px);display:flex;flex-direction:column;min-width:0}
.pathcard>.mono{font-size:.72rem;color:var(--pink-text);letter-spacing:.14em}
/* h2 (not h3) so the contact page doesn't skip a heading level after its h1;
   line-height/max-width restated to keep the previous h3 rendering exactly */
.pathcard h2{font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:800;letter-spacing:-.01em;margin:.5rem 0 .6rem;line-height:1.55;max-width:none}
.pathcard .pdesc{color:var(--steel);font-size:.95rem;line-height:1.5}
.pathcard .pplist+.pdesc{margin-top:1.3rem}
.pathcard .pcta{margin-top:auto;padding-top:1.4rem}
.pathcard .pcta a{display:inline-block;font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:2px}
@media(max-width:760px){.contact-split{grid-template-columns:1fr}}
/* people inside a contact card — bigger faces */
.pplist{margin-top:1.3rem;padding-top:1.3rem;border-top:1px solid var(--hairline);display:grid;gap:1.5rem}
.person{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:14px 18px;align-items:center}
.person .pav{width:124px;height:124px;border-radius:16px;object-fit:cover;object-position:center 22%;background:var(--hairline)}
.person .pinfo b{font-size:1.05rem;font-weight:800;display:block;line-height:1.2}
.person .pinfo .mono{font-size:.66rem;color:var(--steel);display:block;margin:.2rem 0 0}
.person .pcontacts{grid-column:1/-1}
/* A grid item defaults to min-width:auto, so the 124px avatar plus the name
   column set a 262px min-content floor — wider than the 280px available
   inside the page gutter at 320px, which pushed the card 12px off-screen.
   Shrink the avatar at phone widths and let long addresses break. */
.person .pinfo{min-width:0}
.person .pcontacts a{overflow-wrap:anywhere}
@media(max-width:400px){
  .person .pav{width:92px;height:92px}
  .person{gap:12px 14px}
}
.pcontacts{display:grid;grid-template-columns:max-content 1fr;gap:.4rem .8rem;font-size:.9rem;align-items:baseline}
.pcontacts .lbl{color:var(--steel);font-weight:500}
/* value links: ink text (14.6:1) with a brand-pink underline as the affordance —
   pink as accent, not as body text, which no AA-passing pink can be */
.pcontacts a{color:var(--ink);font-weight:600;overflow-wrap:anywhere;text-decoration:underline;
  text-decoration-color:var(--pink);text-decoration-thickness:1.5px;text-underline-offset:3px;
  transition:color .18s}
.pcontacts a:hover{color:var(--pink-text)}
/* candidate card: what-happens-next mini steps */
.ministeps{margin-top:1.3rem;padding-top:1.2rem;border-top:1px solid var(--hairline)}
.ministeps>.mono{display:block;margin-bottom:.9rem}
.mslist{display:grid;grid-template-columns:max-content 1fr;gap:.75rem .8rem;align-items:baseline}
.ministeps .ms{display:contents}
.ministeps .ms .mono{color:var(--pink-text)}
.ministeps .ms p{color:var(--steel);font-size:.95rem}
.contact-office{margin-top:clamp(24px,4vw,36px);border-top:1px solid var(--hairline);padding-top:1.1rem}
.contact-office .mono{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--steel)}

footer{border-top:1px solid var(--hairline);padding:34px 0;color:var(--steel)}
footer .wrap{display:flex;justify-content:space-between;gap:1.4rem;flex-wrap:wrap;align-items:flex-start}
footer nav{display:flex;gap:1.2rem;flex-wrap:wrap}
footer nav a{text-decoration:none;font-size:.85rem}
footer nav a:hover{color:var(--ink)}

.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease,transform .6s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}

@media(max-width:920px){
  .nav-links{display:none;position:absolute;top:64px;left:0;right:0;background:var(--paper);border-bottom:1px solid var(--hairline);flex-direction:column;align-items:flex-start;padding:20px var(--pad);gap:18px}
  .nav-links.open{display:flex}
  .menu-btn{display:block}
  .split,.consequences{grid-template-columns:1fr}
}

/* 404 recovery links — plain list, no inline styles (CSP forbids them) */
.notfound-nav{display:flex;flex-wrap:wrap;gap:12px 26px;padding-top:.5rem}
.notfound-nav a{font-weight:700;color:var(--ink);text-decoration:none;border-bottom:2px solid var(--pink);padding-bottom:2px}
.notfound-nav a:hover{color:var(--pink-text)}