/* ============================================================
   TES — DRAFT DESIGN SYSTEM
   One direction, two skins. 8pt spacing. 2 typefaces, 3 sizes
   in the working scale. 3 colours + 1 accent. CTA colour is
   isolated: #E2701E appears ONLY on primary actions + the mark.
   ============================================================ */
:root{
  --accent:#E2701E; --accent-hi:#F0842F;
    --s1:4px; --s2:8px; --s3:16px; --s4:24px; --s5:32px; --s6:48px;
  --s7:64px; --s8:96px; --s9:128px; --s10:160px;
  /* squircle radius scale — one step per component size, nothing in between */
  --r-xs:8px; --r-sm:12px; --r-md:18px; --r-lg:26px; --r-xl:34px;
  --maxw:1240px;
  --ease:cubic-bezier(.16,.84,.34,1);
  --font-d:'Archivo',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-t:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}
html[data-skin="dark"]{
  --bg:#0B0C0E; --surface:#131519; --surface2:#191C21;
  --ink:#F3F2EF; --ink-2:#C7C9CE; --muted:#8B9099;
  --rule:rgba(255,255,255,.11); --rule-2:rgba(255,255,255,.055);
  --shadow:0 24px 64px rgba(0,0,0,.55);
  --scrim:linear-gradient(180deg,rgba(11,12,14,0) 0%,rgba(11,12,14,.35) 45%,rgba(11,12,14,.92) 100%);
}
html[data-skin="light"]{
  --bg:#FBFAF8; --surface:#FFFFFF; --surface2:#F4F2EE;
  --ink:#15171B; --ink-2:#3C4149; --muted:#666C75;
  --rule:rgba(0,0,0,.13); --rule-2:rgba(0,0,0,.07);
  --shadow:0 24px 64px rgba(20,22,26,.13);
  --scrim:linear-gradient(180deg,rgba(251,250,248,0) 0%,rgba(251,250,248,.30) 45%,rgba(251,250,248,.93) 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-t); font-size:17px; line-height:1.62;
  -webkit-font-smoothing:antialiased; font-feature-settings:"tnum" 0;
  transition:background .45s var(--ease), color .45s var(--ease);
}
img{display:block; max-width:100%}
a{color:inherit; text-decoration:none}
svg{display:block}

/* ---------- squircle geometry ----------
   Superellipse corners via corner-shape (Chromium 139+). border-radius is
   the base value and the graceful fallback; corner-shape only changes the
   curve's exponent, so nothing breaks where it is unsupported.
   Rules, dividers and type stay sharp — the softness is on containers only,
   so the page reads as precise rather than consumer-app. */
.btn{border-radius:var(--r-sm)}
.seg-card,.pcard,.panel,.needs,.ico{border-radius:var(--r-sm)}
@supports (corner-shape: squircle){
  .btn,.seg-card,.pcard,.panel,.needs,.h2{font-family:var(--font-d); font-weight:600; letter-spacing:-.022em; line-height:1.1;
  font-size:clamp(1.85rem,3.5vw,2.95rem); margin:0}
.h3{font-family:var(--font-d); font-weight:600; letter-spacing:-.014em; line-height:1.2;
  font-size:1.24rem; margin:0}
.label{font-size:.695rem; letter-spacing:.17em; text-transform:uppercase; font-weight:600;
  color:var(--muted); margin:0 0 var(--s4)}
.lede{font-size:clamp(1.05rem,1.55vw,1.29rem); line-height:1.58; color:var(--ink-2); max-width:60ch; margin:0}
p{margin:0 0 var(--s3)}
.small{font-size:.875rem; line-height:1.55; color:var(--muted)}
.num{font-variant-numeric:tabular-nums lining-nums}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 var(--s4)}
section{padding:var(--s8) 0; position:relative}
@media(max-width:760px){section{padding:var(--s7) 0}}
.rule-top{border-top:1px solid var(--rule-2)}
.grid{display:grid; gap:var(--s4)}
.two{grid-template-columns:repeat(2,1fr)}
.three{grid-template-columns:repeat(3,1fr)}
.four{grid-template-columns:repeat(4,1fr)}
@media(max-width:980px){.three,.four{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.two,.three,.four{grid-template-columns:1fr}}
.split{display:grid; grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr); gap:var(--s8); align-items:start}
@media(max-width:900px){.split{grid-template-columns:1fr; gap:var(--s6)}}

/* ---------- buttons: accent isolated here ---------- */
.btn{display:inline-flex; align-items:center; gap:var(--s2); font-family:var(--font-t);
  font-weight:600; font-size:.945rem; letter-spacing:-.005em; padding:15px var(--s4);
  border-radius:2px; border:1px solid transparent; cursor:pointer;
  transition:background .22s var(--ease), transform .22s var(--ease), border-color .22s var(--ease), color .22s var(--ease)}
.btn-primary{background:var(--accent); color:#fff}
.btn-primary:hover{background:var(--accent-hi); transform:translateY(-1px)}
.btn-primary:active{transform:translateY(0)}
.btn-ghost{border-color:var(--rule); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink); transform:translateY(-1px)}
.btn:focus-visible{outline:2px solid var(--accent); outline-offset:3px}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.arrow{transition:transform .22s var(--ease)}
.btn:hover .arrow{transform:translateX(3px)}

/* ---------- register ---------- */
.rg{border-top:1px solid var(--rule-2); padding:var(--s5) 0}
.rg-head{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s3)}
.rg-n{margin-left:auto; font-family:var(--font-d); font-size:1.7rem; font-weight:600; letter-spacing:-.02em; color:var(--muted)}
.rg-list{list-style:none; margin:0; padding:0; columns:3; column-gap:var(--s5)}
@media(max-width:980px){.rg-list{columns:2}} @media(max-width:640px){.rg-list{columns:1}}
.rg-row{break-inside:avoid; padding:10px 0; border-bottom:1px solid var(--rule-2); display:flex; flex-direction:column; gap:2px; font-size:.92rem}
.rg-name{color:var(--ink); font-weight:500}
.rg-place{color:var(--muted); font-size:.82rem}
.rg-tags{display:flex; flex-wrap:wrap; gap:4px; margin-top:4px}
.rtag{font-size:.6rem; letter-spacing:.09em; text-transform:uppercase; font-weight:600; color:var(--muted);
  border:1px solid var(--rule); padding:2px 7px; border-radius:var(--r-xs)}
.rtag-chk{color:#C98A1B; border-color:color-mix(in srgb,#C98A1B 55%,transparent)}
.needs{border:1px dashed var(--rule); border-radius:3px; padding:var(--s4);
  color:var(--muted); font-size:.9rem; line-height:1.55}

/* ---------- review chrome (draft only — not part of the design) --- */

html[data-skin="light"] 

.seg{display:inline-flex; border:1px solid rgba(255,255,255,.2); border-radius:2px; overflow:hidden}
.seg button{background:transparent; border:0; color:#E9E9E7; font:inherit; padding:5px 11px; cursor:pointer; opacity:.6}
.seg button[aria-pressed="true"]{background:rgba(255,255,255,.15); opacity:1; font-weight:600}

@media(max-width:860px){}
body{padding-top:46px}

/* ---------- header ---------- */
header.site{position:sticky; top:46px; z-index:100; background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(14px); border-bottom:1px solid var(--rule-2)}
.nav{display:flex; align-items:center; gap:var(--s5); height:76px}
/* NOTE: the existing lockup overprints the strapline through the letterforms,
   so it collapses below ~120px wide. Held at 25px here; a responsive logo
   system (full lockup / TES mark only / monochrome) is a build requirement. */
.mark{height:25px; width:auto; flex:none}
html[data-skin="dark"] .mark{filter:none}
.nav ul{display:flex; gap:var(--s5); list-style:none; margin:0; padding:0; font-size:.925rem; font-weight:500}
.nav ul a{color:var(--ink-2); position:relative; padding:6px 0}
.nav ul a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ink); transition:right .3s var(--ease)}
.nav ul a:hover{color:var(--ink)} .nav ul a:hover::after{right:0}
.nav .spacer{flex:1}
@media(max-width:900px){.nav ul{display:none}}
/* Mobile: the header CTA becomes a persistent bottom bar — same label,
   repeated verbatim (CTA variety reads as indecision). A real build also
   needs a mobile nav; out of scope for a look-and-feel draft. */
.mobcta{display:none}
@media(max-width:640px){
  header.site .btn-primary{display:none}
  .mobcta{display:block; opacity:0; pointer-events:none; transform:translateY(8px);
    transition:opacity .35s var(--ease), transform .35s var(--ease);
    position:fixed; left:0; right:0; bottom:0; z-index:150;
    padding:10px var(--s3) calc(10px + env(safe-area-inset-bottom));
    background:color-mix(in srgb,var(--bg) 90%,transparent); backdrop-filter:blur(14px);
    border-top:1px solid var(--rule)}
  .mobcta.show{opacity:1; pointer-events:auto; transform:none}
  .mobcta .btn{width:100%; justify-content:center}
  footer.site{padding-bottom:calc(var(--s6) + 68px)}
}

/* ---------- hero ---------- */
/* The hero is always a dark treatment in BOTH skins. Photography is
   uncontrollable in brightness; forcing light text over a guaranteed
   scrim is the only way to hold the 4.5:1 contrast floor on every image. */
.hero{position:relative; min-height:calc(100svh - 122px); display:flex; align-items:flex-end;
  padding-bottom:var(--s6); overflow:hidden;
  --ink:#F4F3F0; --ink-2:#DAD8D4; --muted:rgba(255,255,255,.66); --rule:rgba(255,255,255,.26);
  color:var(--ink)}
.hero-media{position:absolute; inset:0; z-index:0}
.hero-media img{width:100%; height:100%; object-fit:cover; animation:heroScale 2.4s var(--ease) both}
@keyframes heroScale{from{transform:scale(1.075)}to{transform:scale(1)}}
.hero-scrim{position:absolute; inset:0; z-index:1;
  background:
    linear-gradient(180deg,rgba(8,9,11,.55) 0%,rgba(8,9,11,.12) 26%,rgba(8,9,11,.55) 62%,rgba(8,9,11,.90) 100%),
    linear-gradient(94deg,rgba(8,9,11,.80) 0%,rgba(8,9,11,.46) 42%,rgba(8,9,11,.06) 78%)}
.hero .wrap{position:relative; z-index:2; width:100%}
.hero-inner{max-width:23ch}
.hero .display{max-width:21ch}
.hero .lede{margin-top:var(--s3); max-width:54ch}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s4); align-items:center}
.risk{font-size:.83rem; color:var(--muted); margin-top:var(--s2); max-width:52ch}
.trustline{display:flex; flex-wrap:wrap; gap:var(--s2) var(--s4); margin-top:var(--s4);
  padding-top:var(--s3); border-top:1px solid var(--rule); font-size:.845rem; color:var(--ink-2)}
.trustline span{display:inline-flex; align-items:center; gap:7px}
.dot{width:4px; height:4px; border-radius:50%; background:var(--muted); flex:none; opacity:.85}
.hero-peek{position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--rule); z-index:2}
@media(max-width:640px){
  .hero{padding-bottom:84px}   /* clears the persistent bottom CTA bar */
  .hero .display{font-size:2.02rem; line-height:1.08}
  .hero .lede{font-size:1rem; line-height:1.48; margin-top:var(--s2)}
  .hero .cta-row{margin-top:var(--s3)}
  .hero .cta-row .btn{width:100%; justify-content:center}
  .trustline{font-size:.77rem; gap:5px var(--s3); margin-top:var(--s3); padding-top:var(--s2)}
  .trustline span:nth-child(3){display:none}   /* disciplines duplicate the nav on small screens */
}

/* ---------- reveal (the one interactive moment) ---------- */
/* ---------- segment router ---------- */
.seg-card{border:1px solid var(--rule-2); padding:var(--s4); background:var(--surface);
  display:flex; flex-direction:column; gap:var(--s2); min-height:172px;
  transition:border-color .28s var(--ease), transform .28s var(--ease), background .28s var(--ease)}
.seg-card:hover{border-color:var(--rule); transform:translateY(-3px); background:var(--surface2)}
.seg-card .count{font-family:var(--font-d); font-size:2.05rem; font-weight:600; letter-spacing:-.03em; line-height:1}
.seg-card .lst{font-size:.83rem; color:var(--muted); margin-top:auto}

/* ---------- project cards ---------- */
.pcard{display:block; position:relative; overflow:hidden; background:var(--surface); border:1px solid var(--rule-2)}
.pcard .ph{aspect-ratio:4/3; overflow:hidden; background:var(--surface2)}
.pcard img{width:100%; height:100%; object-fit:cover; transition:transform .8s var(--ease)}
.pcard:hover img{transform:scale(1.045)}
.pcard .meta{padding:var(--s3) var(--s3) var(--s4)}
.pcard .loc{font-size:.8rem; color:var(--muted); margin-top:2px}
.pcard .stats{display:flex; flex-wrap:wrap; gap:var(--s1) var(--s3); margin-top:var(--s3);
  padding-top:var(--s3); border-top:1px solid var(--rule-2); font-size:.775rem; color:var(--muted)}
.pcard.big .ph{aspect-ratio:16/10}

/* ---------- discipline list ---------- */
.disc{border-top:1px solid var(--rule-2)}
.disc-row{display:grid; grid-template-columns:minmax(0,.42fr) minmax(0,1fr); gap:var(--s6);
  padding:var(--s5) 0; border-bottom:1px solid var(--rule-2); align-items:start}
@media(max-width:820px){.disc-row{grid-template-columns:1fr; gap:var(--s3)}}
.caps{columns:2; column-gap:var(--s5); margin:0; padding:0; list-style:none}
@media(max-width:640px){.caps{columns:1}}
.caps li{break-inside:avoid; padding:5px 0 5px 17px; position:relative; font-size:.925rem; color:var(--ink-2)}
.caps li::before{content:""; position:absolute; left:0; top:14px; width:7px; height:1px; background:var(--muted)}

/* ---------- data table (the differentiator, made visible) ---------- */
.dtable{width:100%; border-collapse:collapse; font-size:.925rem}
.dtable th,.dtable td{text-align:left; padding:13px var(--s3) 13px 0; border-bottom:1px solid var(--rule-2); vertical-align:top}
.dtable th{font-weight:500; color:var(--muted); width:44%; font-size:.86rem}
.dtable td{color:var(--ink)}

/* ---------- icon system (D10: one pack, locked) ----------
   24px grid · 1.5 stroke · round caps/joins · currentColor · outline only.
   Used strictly to encode building type and system type — the two things a
   silhouette communicates faster than a label. Never as decoration. */
.i{width:24px; height:24px; stroke:currentColor; stroke-width:1.5; fill:none;
   stroke-linecap:round; stroke-linejoin:round; flex:none}
.ico{width:44px; height:44px; display:grid; place-items:center; background:var(--surface2);
     border:1px solid var(--rule-2); color:var(--ink-2); flex:none;
     transition:color .28s var(--ease), background .28s var(--ease), border-color .28s var(--ease)}
.seg-card:hover .ico,.disc-row:hover .ico{color:var(--ink); border-color:var(--rule)}
.seg-card .ico{margin-bottom:var(--s2)}

/* ---------- diagram frame ---------- */
.dia{background:var(--surface); border:1px solid var(--rule-2); padding:var(--s5)}
@media(max-width:640px){.dia{padding:var(--s3)}}
.dia-title{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted);
  font-weight:600; margin:0 0 var(--s4)}
.dia svg{width:100%; height:auto}
/* every diagram inherits the page's ink; no diagram-only colours exist */
.d-ink{stroke:var(--ink)} .d-mut{stroke:var(--muted)} .d-rule{stroke:var(--rule)}
.d-fill{fill:var(--ink)} .d-fill-mut{fill:var(--muted)} .d-fill-s{fill:var(--surface2)}
.d-t{fill:var(--ink-2); font-family:var(--font-t); font-size:12px}
.d-t-sm{fill:var(--muted); font-family:var(--font-t); font-size:10.5px; letter-spacing:.06em}
.d-t-lg{fill:var(--ink); font-family:var(--font-d); font-size:15px; font-weight:600}

/* ---------- system highlighting (contrast, never hue — CTA colour stays isolated) ---------- */
.sysdia [data-sys]{transition:opacity .42s var(--ease)}
.sysdia[data-active] [data-sys]{opacity:.13}
.sysdia[data-active="hvac"] [data-sys="hvac"],
.sysdia[data-active="elec"] [data-sys="elec"],
.sysdia[data-active="phe"]  [data-sys="phe"],
.sysdia[data-active="fire"] [data-sys="fire"],
.sysdia[data-active="elv"]  [data-sys="elv"],
.sysdia[data-active] [data-sys="shell"]{opacity:1}
.sysdia[data-active] [data-sys="shell"]{opacity:.34}
.chiprow{display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4)}
.chip{display:inline-flex; align-items:center; gap:7px; padding:8px 14px 8px 10px;
  border:1px solid var(--rule-2); background:var(--surface2); color:var(--ink-2);
  font:inherit; font-size:.855rem; font-weight:500; cursor:pointer;
  transition:border-color .24s var(--ease), color .24s var(--ease), background .24s var(--ease)}
.chip .i{width:18px; height:18px}
.chip:hover{border-color:var(--rule); color:var(--ink)}
.chip[aria-pressed="true"]{border-color:var(--ink); color:var(--ink); background:transparent}

/* ---------- flow diagram ---------- */
.flow{display:grid; grid-template-columns:repeat(5,1fr); gap:var(--s4); align-items:stretch}
@media(max-width:900px){.flow{grid-template-columns:1fr; gap:var(--s3)}}
.node{position:relative; background:var(--surface2); border:1px solid var(--rule-2);
  padding:var(--s4) var(--s3) var(--s3); display:flex; flex-direction:column; gap:6px}
.node .n{font-family:var(--font-d); font-size:.72rem; letter-spacing:.12em; color:var(--muted); font-weight:600}
.node .t{font-family:var(--font-d); font-size:1rem; font-weight:600; letter-spacing:-.01em; line-height:1.25}
.node .d{font-size:.8rem; color:var(--muted); line-height:1.45}
.node::after{content:""; position:absolute; right:calc(var(--s4)*-1 - 1px); top:50%; width:var(--s4); height:1px;
  background:var(--rule); transform:translateY(-50%)}
.node::before{content:""; position:absolute; right:-7px; top:50%; width:6px; height:6px;
  border-top:1px solid var(--rule); border-right:1px solid var(--rule);
  transform:translateY(-50%) rotate(45deg)}
.node:last-child::before{display:none}
.node:last-child::after{display:none}
@media(max-width:900px){
  .node::after{right:auto; left:50%; top:auto; bottom:calc(var(--s3)*-1 - 1px);
    width:1px; height:var(--s3); transform:translateX(-50%)}
  .node::before{right:auto; left:50%; top:auto; bottom:-7px; transform:translateX(-50%) rotate(135deg)}
}
.node .tag{position:absolute; top:-1px; right:-1px; font-size:.6rem; letter-spacing:.11em;
  text-transform:uppercase; font-weight:600; padding:4px 9px; background:var(--ink); color:var(--bg);
  border-radius:0 var(--r-md) 0 var(--r-md)}

/* ---------- map ---------- */
.mapframe{background:var(--surface2); border:1px solid var(--rule-2); padding:var(--s4)}
.pin{fill:var(--ink)} .pin-o{fill:none; stroke:var(--ink); stroke-width:1.4}

/* ---------- misc ---------- */
.stat-row{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--s4);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule); padding:var(--s5) 0}
@media(max-width:760px){.stat-row{grid-template-columns:repeat(2,1fr); gap:var(--s5)}}
.stat .v{font-family:var(--font-d); font-size:clamp(1.9rem,3.4vw,2.7rem); font-weight:600; letter-spacing:-.03em; line-height:1}
.stat .k{font-size:.79rem; color:var(--muted); margin-top:var(--s2); letter-spacing:.02em}
.panel{background:var(--surface); border:1px solid var(--rule-2); padding:var(--s6)}
@media(max-width:640px){.panel{padding:var(--s4)}}
footer.site{border-top:1px solid var(--rule); padding:var(--s7) 0 var(--s6); background:var(--surface)}
.fgrid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:var(--s5)}
@media(max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.fgrid{grid-template-columns:1fr}}
.fgrid h4{font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin:0 0 var(--s3); font-weight:600}
.fgrid ul{list-style:none; margin:0; padding:0; font-size:.9rem; line-height:2.05; color:var(--ink-2)}
.fgrid a:hover{color:var(--ink)}

/* ---------- motion: reveal on scroll (Y + opacity only) ---------- */
.rv{opacity:0; transform:translateY(22px); transition:opacity .85s var(--ease), transform .85s var(--ease)}
.rv.in{opacity:1; transform:none}
.stagger>*{opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease)}
.stagger.in>*{opacity:1; transform:none}
.word{display:inline-block; opacity:0; transform:translateY(.42em);
  animation:wordIn .9s var(--ease) both; animation-delay:calc(var(--i)*.062s + .12s)}
@keyframes wordIn{to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; animation-delay:0s!important; transition-duration:.001ms!important}
  .rv,.stagger>*{opacity:1; transform:none}
  .word{opacity:1; transform:none}
  html{scroll-behavior:auto}
}
[hidden]{display:none!important}

/* ============================================================
   TES — SITE SHELL
   Layout the draft study did not contain: header, footer,
   section rhythm, register, empty states. Built on the draft's
   tokens. Accent still appears only on .btn-primary and .mark.
   ============================================================ */

/* ---------- base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); font-family:var(--font-t);
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
h1,h2,h3,p,ul,ol,figure{margin:0}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:-9999px; top:0; z-index:999; background:var(--surface);
  color:var(--ink); padding:12px 18px; border-radius:var(--r-xs)}
.skip:focus{left:var(--s3); top:var(--s3)}

/* ---------- type scale (3 sizes in the working scale) ---------- */
.h1{font-family:var(--font-d); font-weight:700; letter-spacing:-.032em; line-height:1.03;
  font-size:clamp(2.35rem,5.4vw,4.05rem); margin:0}
.h1-sm{font-size:clamp(2rem,4vw,3.05rem)}
.h2{font-family:var(--font-d); font-weight:600; letter-spacing:-.024em; line-height:1.1;
  font-size:clamp(1.65rem,3vw,2.5rem); margin:0}
.h3{font-size:clamp(1.1rem,1.5vw,1.32rem)}
.lede-lg{font-size:clamp(1.12rem,1.75vw,1.4rem)}
.fine{font-size:.83rem; line-height:1.55; color:var(--muted); margin:0}
.claim{font-family:var(--font-d); font-weight:600; letter-spacing:-.01em;
  font-size:1.02rem; color:var(--ink); margin-top:var(--s3)}
.claim-lg{font-size:clamp(1.2rem,2vw,1.6rem); margin-top:var(--s4)}
.narrow{max-width:74ch}
.mt3{margin-top:var(--s3)} .mt6{margin-top:var(--s6)}
.link{color:var(--ink); border-bottom:1px solid var(--rule); padding-bottom:1px;
  transition:border-color .25s var(--ease)}
.link:hover{border-color:var(--ink)}

/* ---------- header ---------- */
.hdr{position:sticky; top:0; z-index:120; background:color-mix(in srgb,var(--bg) 88%,transparent);
  backdrop-filter:saturate(140%) blur(14px); border-bottom:1px solid var(--rule-2)}
.hdr-in{display:flex; align-items:center; gap:var(--s5); height:72px}
.brand{display:flex; align-items:baseline; gap:10px; flex:none}
.mark{font-family:var(--font-d); font-weight:700; font-size:1.32rem; letter-spacing:-.04em;
  color:var(--accent); height:auto; line-height:1}
.mark-sm{font-size:1.1rem}
.brand-t{font-size:.79rem; color:var(--muted); letter-spacing:.01em; white-space:nowrap}
.hdr .nav{display:flex; align-items:center; gap:var(--s5); height:auto; margin-left:auto;
  font-size:.925rem; font-weight:500}
.hdr .nav a{color:var(--ink-2); position:relative; padding:6px 0; transition:color .25s var(--ease)}
.hdr .nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:1px;
  background:var(--ink); transition:right .3s var(--ease)}
.hdr .nav a:hover{color:var(--ink)} .hdr .nav a:hover::after{right:0}
.hdr .nav a[aria-current="page"]{color:var(--ink)}
.hdr-cta{flex:none}
.navtoggle{display:none; background:transparent; border:1px solid var(--rule); color:var(--ink);
  border-radius:var(--r-xs); width:42px; height:42px; align-items:center; justify-content:center;
  cursor:pointer; margin-left:auto}
.mnav{display:none; flex-direction:column; gap:var(--s3); padding:var(--s4);
  border-top:1px solid var(--rule-2); background:var(--bg)}
.mnav a{font-size:1.05rem; color:var(--ink-2)}
.mnav .btn{margin-top:var(--s2); justify-content:center}

/* ---------- buttons ---------- */
.btn{padding:12px 20px; font-size:.925rem; font-weight:600; cursor:pointer; border:1px solid transparent;
  transition:background .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease)}
.btn-lg{padding:15px 26px; font-size:1rem}
.btn-ghost{border-color:var(--rule); color:var(--ink); background:transparent}
.btn-ghost:hover{border-color:var(--ink)}
.cta-row{display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}

/* ---------- hero (dark treatment in BOTH skins) ---------- */
/* The hero is a dark treatment in BOTH skins. Photography brightness is
   uncontrollable, so it scopes its own light-on-dark tokens and lays a
   two-axis scrim over the image. Measured, not assumed: see E2. */
.hero{position:relative; min-height:min(74svh,640px); display:flex; align-items:flex-end;
  padding:var(--s7) 0 var(--s6); isolation:isolate; overflow:hidden;
  --ink:#FFFFFF; --ink-2:#E8E6E2; --muted:rgba(255,255,255,.78); --rule:rgba(255,255,255,.3)}
.hero .wrap{width:100%}
.hero-media{position:absolute; inset:0; z-index:-2}
.hero-media img{width:100%; height:100%; object-fit:cover}
.hero-scrim{position:absolute; inset:0; z-index:1;   /* inside .hero-media's stacking context — must be POSITIVE to sit over the img */
  background:
    linear-gradient(90deg,rgba(8,9,11,.80) 0%,rgba(8,9,11,.68) 38%,rgba(8,9,11,.30) 70%,rgba(8,9,11,.12) 100%),
    linear-gradient(180deg,rgba(8,9,11,.34) 0%,rgba(8,9,11,.20) 34%,rgba(8,9,11,.62) 100%)}
.hero-in{max-width:64ch}
.hero .h1{margin-top:var(--s3); max-width:24ch; font-size:clamp(2.15rem,4.2vw,3.35rem)}
.hero .lede{margin-top:var(--s4); color:var(--ink-2); max-width:56ch}
.hero .label{color:rgba(255,255,255,.82)}
.trustline{display:flex; flex-wrap:wrap; gap:6px var(--s4); margin-top:var(--s4);
  padding-top:var(--s3); border-top:1px solid rgba(255,255,255,.24);
  font-size:.83rem; color:var(--ink-2); max-width:72ch; line-height:1.5}
.tl-a{color:var(--ink); font-weight:500}
.hero .cta-row{margin-top:var(--s5)}

/* ---------- sections ---------- */
.sec{padding:var(--s8) 0}
.sec-alt{background:var(--surface)}
.phead{padding:var(--s8) 0 var(--s6); border-bottom:1px solid var(--rule-2)}
.phead .label{margin-bottom:var(--s3)}
.phead .lede{margin-top:var(--s4)}
.sec .label{margin-bottom:var(--s3)}
.sec .h2 + .lede{margin-top:var(--s4)}
.row-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); flex-wrap:wrap}
.hero-img{margin-top:var(--s6); border-radius:var(--r-md); overflow:hidden; border:1px solid var(--rule-2)}
.hero-img img{width:100%; aspect-ratio:16/9; object-fit:cover}

/* ---------- cards ---------- */
.seg-card{display:flex; flex-direction:column; gap:var(--s2); text-align:left}
.seg-card .count{color:var(--ink)}
.seg-t{font-weight:600; font-size:.985rem; color:var(--ink); line-height:1.25}
.seg-m{font-size:.79rem; color:var(--muted); line-height:1.5}
.pcard{border-radius:var(--r-sm)}
.pcard .ph{aspect-ratio:4/3; overflow:hidden; background:var(--surface2)}
.ph-empty{display:grid; place-items:center; color:var(--muted); opacity:.45}
.pcard-b{padding:var(--s4)}
.pcard-t{font-family:var(--font-d); font-weight:600; font-size:1.02rem; letter-spacing:-.012em;
  line-height:1.25; color:var(--ink)}
.pcard-m{font-size:.8rem; color:var(--muted); margin-top:6px}
.pcard:hover{border-color:var(--rule)}
.panel{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s5)}
.panel-link{transition:border-color .25s var(--ease), transform .25s var(--ease)}
.panel-link:hover{border-color:var(--rule); transform:translateY(-2px)}
.minicard{display:flex; flex-direction:column; gap:3px; padding:var(--s3) 0;
  border-bottom:1px solid var(--rule-2); font-size:.925rem}
.minicard:hover{color:var(--ink)}
.i-lg{width:30px; height:30px}

/* ---------- lists ---------- */
.caps-lg{columns:1}
.caps-lg li{font-size:1rem; padding:8px 0 8px 19px}
.steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--s4);
  grid-template-columns:repeat(5,1fr)}
.step{background:var(--surface); border:1px solid var(--rule-2); border-radius:var(--r-sm);
  padding:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.step-n{font-family:var(--font-d); font-size:.86rem; font-weight:600; color:var(--muted);
  letter-spacing:.06em}
.step .lede{font-size:.9rem}

/* ---------- register ---------- */
.rg{margin-bottom:var(--s7)}
.rg-head{border-bottom:1px solid var(--rule); padding-bottom:var(--s3)}
.rg-list{columns:3; column-gap:var(--s6)}
.rg-row a{display:flex; flex-direction:column; gap:2px}
.rg-row:hover .rg-name{color:var(--ink); border-bottom-color:var(--rule)}
.rg-name{border-bottom:1px solid transparent; transition:border-color .25s var(--ease)}
.chip{background:transparent; border:1px solid var(--rule-2); color:var(--muted);
  border-radius:var(--r-xs); font-family:var(--font-t); font-size:.86rem; cursor:pointer}

/* ---------- empty states + data ---------- */
.empty{border:1px dashed var(--rule); border-radius:var(--r-sm); padding:var(--s5);
  background:transparent; display:flex; flex-direction:column; gap:var(--s3)}
.empty .h3{color:var(--ink)}
.gap{color:var(--muted); font-style:italic}
.needs-list{margin-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.prose > * + *{margin-top:var(--s4)}
.prose .h3{margin-top:var(--s6)}

/* ---------- closing band + footer ---------- */
.band{background:var(--surface); border-top:1px solid var(--rule-2); padding:var(--s8) 0}
.band-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s6); flex-wrap:wrap}
.band .lede{margin-top:var(--s3); max-width:56ch}
.ftr{background:var(--bg); border-top:1px solid var(--rule-2); padding:var(--s7) 0 var(--s5)}
.ftr-in{display:grid; grid-template-columns:1.6fr 1fr 1fr 1fr; gap:var(--s6)}
.ftr-h{font-size:.695rem; letter-spacing:.17em; text-transform:uppercase; font-weight:600;
  color:var(--muted); margin-bottom:var(--s3)}
.ftr-c p{font-size:.9rem; color:var(--ink-2); line-height:1.7}
.ftr-c a:hover{color:var(--ink)}
.ftr-b{margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--rule-2)}

/* ---------- persistent mobile CTA ---------- */
.mobcta{display:none}

/* ---------- responsive ---------- */
@media(max-width:1040px){
  .four{grid-template-columns:repeat(2,1fr)}
  .three{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .rg-list{columns:2}
  .ftr-in{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hdr .nav,.hdr-cta{display:none}
  .navtoggle{display:flex}
  .mnav:not([hidden]){display:flex}
  .brand-t{display:none}
}
@media(max-width:720px){
  .sec{padding:var(--s7) 0}
  .phead{padding:var(--s7) 0 var(--s5)}
  .two,.three,.four{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .rg-list{columns:1}
  .ftr-in{grid-template-columns:1fr; gap:var(--s5)}
  .caps{columns:1}
  .hero{min-height:auto; padding:var(--s4) 0 var(--s6)}
  .hero .h1{max-width:none; font-size:clamp(1.95rem,7.4vw,2.5rem)}
  .hero .lede{font-size:1rem; margin-top:var(--s3)}
  .hero .cta-row{margin-top:var(--s4)}
  .tl-b{display:none}            /* the discipline list is below the fold on a phone; the count and reach are what must survive */
  .trustline{margin-top:var(--s3); padding-top:var(--s2)}
  .hero .label{font-size:.66rem}
  .band-in{flex-direction:column; align-items:flex-start}
  .mobcta{display:none; position:fixed; left:var(--s3); right:var(--s3); bottom:var(--s3);
    z-index:130; justify-content:center; box-shadow:var(--shadow)}
  .mobcta:not([hidden]){display:flex}
  body:has(.mobcta:not([hidden])) .ftr{padding-bottom:88px}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important; transition-duration:.001ms!important}
  .rv{opacity:1!important; transform:none!important}
}