/* Phronesis Labs, the five inner pages: about, the-lab, consulting, contact, privacy.

   The same system the home page is built on, which is the first half of
   assets/home.css up to its "home page only" marker, plus the rules these five
   pages need and the home page does not.

   The home page keeps its own sheet because it carries three things these pages
   do not: the review ledger, the 3D mark and the autoplay clock. Shared rules
   live in both files rather than in a third, so a page is always one request.
   If you change a shared rule, change it in both and bump both cache busters. */

/* Phronesis Labs home page.
   The former previews/pl.css and previews/pl2.css (deleted 2026-10-08, in git
   history), which own the tokens, the header, the footer,
   the buttons, the pills, the hairline tables and the reveals, followed by the rules
   this page adds on top: the 3D mark, the three Greek rows, and the phone tap targets.
   The other five pages are still served by assets/styles.css, which this does not touch. */

/* Phronesis Labs · landing directions
   Visual system: cinematic full-bleed grounds, one accent (brand orange) carried in pills,
   badges and markers, a single neo-grotesk at medium weight with tight leading, and a
   monospace micro-voice for labels, readouts and specs. */

@font-face{font-family:"Hanken Grotesk";src:url("/assets/fonts/HankenGrotesk.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"EB Garamond";src:url("/assets/fonts/EBGaramond-Italic.woff2") format("woff2");font-weight:400 700;font-style:italic;font-display:swap}

:root{
  --void:#0A1119; --navy:#15263F; --navy-2:#0D1B2E; --slate:#1D3151;
  --cream:#F7F6F2; --paper:#FFFFFF; --grey:#EFEEE9; --sand:#E7E4DA;
  --orange:#EE5A1A; --orange-hi:#FF7133; --orange-soft:#FBD9C6;
  /* Any orange SURFACE that holds text uses --orange-aa, not --orange. White on
     #EE5A1A is 3.44:1, under the 4.5:1 WCAG AA asks for normal text, and
     --orange-hi is lighter still so hovering made it worse. --orange-aa is the
     shade this repo already documented as the orange hover and clears AA at
     4.89:1; --orange-aa-hi goes a step darker again.
     --orange itself is now decoration only: dots, rules, marquee bullets, the
     reticle, and display type large enough for the 3:1 threshold. */
  --orange-aa:#CA4210; --orange-aa-hi:#B23A0E;
  --ink:#15263F; --ink-2:#4C586A; --ink-3:#77808E;
  --onwhite:rgba(21,38,63,.13); --ondark:rgba(255,255,255,.16);
  --sans:"Hanken Grotesk",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --serif:"EB Garamond",Georgia,serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono",monospace;
  --ease:cubic-bezier(.22,1,.36,1);
  --t1:180ms; --t2:420ms; --t3:900ms;
  --pad:clamp(20px,5vw,64px);
  --wrap:min(1320px,100% - var(--pad)*2);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:clip}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}

h1,h2,h3{margin:0;font-weight:500;letter-spacing:-.028em;line-height:1.1;text-wrap:balance}
h1{font-size:clamp(34px,4.3vw,60px)}
h2{font-size:clamp(30px,3.6vw,50px)}
h3{font-size:clamp(19px,1.5vw,23px);letter-spacing:-.02em;line-height:1.2}
p{margin:0}
.wrap{width:var(--wrap);margin-inline:auto}

/* micro-voice */
.mono{font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;text-transform:uppercase;line-height:1.65;font-weight:500}
.pill{display:inline-block;font-family:var(--mono);font-size:.63rem;letter-spacing:.15em;text-transform:uppercase;
  font-weight:600;background:var(--orange-aa);color:#fff;padding:5px 10px 4px;border-radius:4px}
.pill.light{background:var(--orange-soft);color:#8A3208}
.rule{height:1px;background:var(--onwhite);border:0;margin:0}
.on-dark .rule{background:var(--ondark)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-size:.86rem;font-weight:600;letter-spacing:.01em;
  padding:13px 16px;border-radius:6px;background:var(--orange-aa);color:#fff;
  transition:background var(--t1) var(--ease),transform var(--t1) var(--ease)}
.btn:hover{background:var(--orange-aa-hi);transform:translateY(-1px)}
.btn .sq{display:grid;place-items:center;width:20px;height:20px;border-radius:3px;background:rgba(255,255,255,.22);font-size:.7rem;line-height:1}
.btn.hollow{background:transparent;box-shadow:inset 0 0 0 1px var(--ondark);color:#fff}
.btn.hollow:hover{background:rgba(255,255,255,.09)}
.btn.hollow.ink{box-shadow:inset 0 0 0 1px var(--onwhite);color:var(--ink)}
.btn.hollow.ink:hover{background:rgba(21,38,63,.05)}
.btn.hollow .sq{background:var(--orange-aa)}
.tlink{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.66rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600}
.tlink .sq{display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:var(--orange-aa);color:#fff;font-size:.68rem;
  transition:transform var(--t1) var(--ease)}
.tlink:hover .sq{transform:translate(2px,-2px)}

/* ── header ───────────────────────────────────────────── */
.hdr{position:fixed;left:0;right:0;top:var(--hdr-top,0);z-index:80;padding:14px 0;
  transition:background var(--t2) var(--ease),backdrop-filter var(--t2) var(--ease)}
.hdr.solid{background:rgba(10,17,25,.86);backdrop-filter:blur(14px)}
.hdr-in{width:var(--wrap);margin-inline:auto;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-brand{display:flex;align-items:center;gap:10px}
.hdr-brand svg{height:26px;width:auto}
.hdr-word{font-size:.95rem;font-weight:600;letter-spacing:-.02em;color:#fff}
.hdr-nav{display:flex;align-items:center;gap:26px}
.hdr-nav a{font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;font-weight:500;
  color:rgba(255,255,255,.72);transition:color var(--t1) var(--ease)}
.hdr-nav a:hover,.hdr-nav a.on{color:#fff}
.hdr-nav a.on{color:var(--orange)}
.hdr-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;
  text-transform:uppercase;font-weight:600;color:#fff}
.hdr-cta .sq{display:grid;place-items:center;width:22px;height:22px;border-radius:4px;background:var(--orange-aa);
  transition:transform var(--t1) var(--ease)}
.hdr-cta:hover .sq{transform:translate(2px,-2px)}
.hdr-burger{display:none}
.hdr-burger svg{width:24px;height:24px;stroke:#fff}

/* ── hero shell ───────────────────────────────────────── */
.hero{position:relative;min-height:min(94svh,940px);display:flex;flex-direction:column;justify-content:flex-end;
  padding:150px 0 clamp(26px,4vw,44px);overflow:hidden;background:var(--void);color:#fff;isolation:isolate}
.hero-media{position:absolute;inset:0;z-index:-2;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform-origin:58% 45%;animation:pan 46s ease-in-out infinite alternate}
.hero-scrim{position:absolute;inset:0;z-index:-1;pointer-events:none}
.hero-label{position:absolute;top:calc(var(--hdr-top,0px) + 104px);left:var(--pad);z-index:3;color:#fff;opacity:.82}
.hero-body{position:relative;z-index:3;width:var(--wrap);margin-inline:auto}
.hero h1{max-width:18ch;font-weight:500}
.hero h1 .pt{color:var(--orange)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:clamp(24px,3vw,34px)}
.hero-foot{position:relative;z-index:3;width:var(--wrap);margin:clamp(40px,7vw,90px) auto 0;display:flex;
  align-items:flex-end;justify-content:space-between;gap:30px}
.hero-foot p{max-width:44ch;font-size:.95rem;line-height:1.5;color:rgba(255,255,255,.9)}
.scroller{display:flex;align-items:center;gap:9px;white-space:nowrap;color:rgba(255,255,255,.72)}
.scroller .mouse{width:15px;height:23px;border-radius:9px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.55);position:relative;flex:none}
.scroller .mouse::after{content:"";position:absolute;left:50%;top:5px;width:2px;height:5px;border-radius:2px;background:#fff;
  transform:translateX(-50%);animation:wheel 1.9s var(--ease) infinite}
@keyframes wheel{0%{opacity:0;transform:translate(-50%,-3px)}40%{opacity:1}100%{opacity:0;transform:translate(-50%,7px)}}
@keyframes pan{from{transform:scale(1.04)}to{transform:scale(1.15) translate(-2%,1.5%)}}

/* intro wipe: the ground is painted underneath, a dot opens the curtain */
.curtain{position:fixed;inset:0;z-index:90;background:#05090E;pointer-events:none}
.curtain::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;margin:-4.5px 0 0 -4.5px;border-radius:50%;background:var(--orange)}
.js .curtain{animation:curtain 1150ms var(--ease) forwards}
@keyframes curtain{
  0%{clip-path:circle(140% at 50% 50%);opacity:1}
  22%{clip-path:circle(140% at 50% 50%);opacity:1}
  100%{clip-path:circle(0% at 50% 50%);opacity:0}
}
.js .hero-body,.js .hero-label,.js .hero-foot{animation:sharpen 900ms var(--ease) 620ms both}
@keyframes sharpen{from{opacity:0;filter:blur(9px);transform:translateY(16px)}to{opacity:1;filter:none;transform:none}}

/* instrument markers over the media */
.pins{position:absolute;inset:0;z-index:2;pointer-events:none}
.pin{position:absolute;display:flex;align-items:flex-start;gap:10px;pointer-events:auto;
  transform:translate(calc(var(--mx,0) * var(--d,1) * -14px),calc(var(--my,0) * var(--d,1) * -14px))}
.js .pin{opacity:0;animation:pinin 620ms var(--ease) forwards;animation-delay:calc(1000ms + var(--i,0) * 140ms)}
@keyframes pinin{from{opacity:0;transform:scale(.82)}to{opacity:1;transform:none}}
.dot{position:relative;flex:none;width:30px;height:30px;border-radius:50%;background:var(--orange);display:grid;place-items:center}
.dot i{display:block;width:12px;height:12px;background:
  radial-gradient(circle 1.6px at 2px 6px,#fff 99%,transparent),
  radial-gradient(circle 1.6px at 6px 2px,#fff 99%,transparent),
  radial-gradient(circle 1.6px at 6px 6px,#fff 99%,transparent),
  radial-gradient(circle 1.6px at 6px 10px,#fff 99%,transparent),
  radial-gradient(circle 1.6px at 10px 6px,#fff 99%,transparent)}
.dot::after{content:"";position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 1px var(--orange);
  animation:ping 2.8s var(--ease) infinite}
@keyframes ping{0%{transform:scale(1);opacity:.9}70%,100%{transform:scale(2.1);opacity:0}}
.pin .cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.6;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.65);padding-top:5px;max-width:19ch;
  opacity:0;transform:translateX(-6px);transition:opacity var(--t2) var(--ease),transform var(--t2) var(--ease)}
.pin.show .cap,.pin:hover .cap,.pin:focus-within .cap{opacity:1;transform:none}

/* scanning reticle + readout */
.reticle{position:absolute;z-index:2;pointer-events:none;opacity:0;transition:opacity 500ms var(--ease)}
.reticle.on{opacity:1}
.reticle .box{width:clamp(120px,13vw,190px);aspect-ratio:1.28;box-shadow:inset 0 0 0 1px rgba(255,255,255,.62)}
.reticle .box span{position:absolute;width:7px;height:7px;background:var(--orange)}
.reticle .box span:nth-child(1){left:-3px;top:-3px}.reticle .box span:nth-child(2){right:-3px;top:-3px}
.reticle .box span:nth-child(3){left:-3px;bottom:-3px}.reticle .box span:nth-child(4){right:-3px;bottom:-3px}
.reticle .read{margin-top:9px;font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.7);white-space:pre-line;line-height:1.7}
.reticle .read b{color:var(--orange);font-weight:600}

/* floating data card */
.datacard{position:absolute;z-index:3;width:min(268px,60vw);padding:16px 18px 14px;border-radius:12px;
  background:rgba(10,17,25,.62);backdrop-filter:blur(10px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.16);color:#fff;
  transform:translate(calc(var(--mx,0) * -20px),calc(var(--my,0) * -20px))}
.datacard .k{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.datacard .v{margin-top:8px}
.datacard .u{margin-top:2px}
.datacard .v b{font-size:2.3rem;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.datacard .u span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:var(--orange)}
.datacard svg{margin-top:12px;width:100%;height:38px;overflow:visible}

/* spec list */
.specs{display:grid;gap:0;max-width:430px}
.specs .row{display:grid;grid-template-columns:22px 1fr 14px;gap:12px;align-items:center;padding:13px 0;
  border-top:1px solid var(--ondark)}
.specs .row:last-child{border-bottom:1px solid var(--ondark)}
.specs .n{font-family:var(--mono);font-size:.55rem;letter-spacing:.1em;color:var(--orange)}
.specs .t{font-family:var(--mono);font-size:.64rem;letter-spacing:.13em;text-transform:uppercase;line-height:1.55;color:#fff}
.specs .p{color:rgba(255,255,255,.5);font-size:.8rem;text-align:right}

/* ── marquee ──────────────────────────────────────────── */
.marq{background:var(--void);color:#fff;padding:15px 0;overflow:hidden;border-top:1px solid var(--ondark)}
.marq .track{display:flex;gap:0;width:max-content;animation:slide 34s linear infinite}
.marq span{font-family:var(--mono);font-size:.66rem;letter-spacing:.19em;text-transform:uppercase;padding:0 26px;
  display:inline-flex;align-items:center;gap:26px;white-space:nowrap}
.marq span::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--orange)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ── sections ─────────────────────────────────────────── */
.sec,.marq,.ftr{position:relative;z-index:2}
.sec{padding:clamp(74px,9vw,132px) 0}
.sec.void{background:var(--void);color:#fff}
.sec.navy{background:var(--navy);color:#fff}
.sec.paper{background:var(--paper)}
.sec.grey{background:var(--grey)}
.on-dark{color:#fff}
.on-dark .lead{color:rgba(255,255,255,.74)}
.lead{color:var(--ink-2);font-size:clamp(1rem,1.15vw,1.14rem);line-height:1.6;max-width:56ch}
.head{display:grid;gap:20px;max-width:940px}
.head .pill{justify-self:start}
.centered{text-align:center;margin-inline:auto;justify-items:center}
.centered .lead{margin-inline:auto}

/* panel that rides up over the section above it */
.panel{position:relative;z-index:3;border-radius:30px 30px 0 0;margin-top:-34px}
.sticky-under{position:sticky;top:0;z-index:0}

/* numbered grid */
.numgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(34px,4vw,52px)}
.num{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:start;background:var(--paper);border-radius:16px;
  padding:22px 24px;box-shadow:inset 0 0 0 1px var(--onwhite);transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.num:hover{transform:translateY(-3px);box-shadow:inset 0 0 0 1px rgba(238,90,26,.4)}
.num .b{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--orange-soft);
  font-family:var(--mono);font-size:.66rem;font-weight:600;color:#8A3208}
.num h3{margin-bottom:5px}
.num p{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.void .num,.navy .num{background:rgba(255,255,255,.045);box-shadow:inset 0 0 0 1px var(--ondark)}
.void .num p,.navy .num p{color:rgba(255,255,255,.66)}
.void .num .b,.navy .num .b{background:var(--orange-aa);color:#fff}

/* big tiles */
.tiles{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(30px,3.4vw,46px)}
.tile{position:relative;isolation:isolate;border-radius:16px;overflow:hidden;min-height:290px;display:flex;flex-direction:column;
  justify-content:space-between;gap:30px;padding:26px 28px;transition:transform var(--t2) var(--ease)}
.tile:hover{transform:translateY(-4px)}
.tile > .pill{align-self:flex-start}
.tile.fill{background:var(--orange-aa);color:#fff}
.tile.fill .pill{background:rgba(255,255,255,.22)}
.tile.shot{color:#fff}
.tile.shot img{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover}
.tile.shot::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(10,17,25,.28),rgba(10,17,25,.8))}
.tile .q{font-size:clamp(1.35rem,2.1vw,1.95rem);font-weight:500;letter-spacing:-.025em;line-height:1.16;max-width:19ch}
.tile .qn{font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;opacity:.85}
.tile .foot{display:flex;align-items:center;justify-content:space-between;gap:16px}
.tile .arw{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.2);
  transition:transform var(--t1) var(--ease)}
.tile:hover .arw{transform:translate(3px,-3px)}

/* verdict */
.verdict{margin-top:clamp(28px,3vw,40px);font-size:clamp(1.2rem,2vw,1.7rem);font-weight:500;letter-spacing:-.02em;line-height:1.3}
.verdict b{color:var(--orange);font-weight:500}

/* scatter collage */
.scatter{position:relative;display:grid;grid-template-columns:repeat(12,1fr);gap:14px;margin-top:clamp(34px,4vw,54px);align-items:center}
.chip{border-radius:14px;overflow:hidden;background:var(--paper);box-shadow:0 16px 40px rgba(10,17,25,.1),inset 0 0 0 1px var(--onwhite);
  transition:transform 900ms var(--ease),opacity 700ms var(--ease)}
.js .chip{opacity:0;transform:translate(var(--dx,0),var(--dy,0)) rotate(var(--rot,0deg)) scale(.94)}
.js .chip.in{opacity:1;transform:none}
.chip img{width:100%;height:100%;object-fit:cover;aspect-ratio:1.35}
.chip.stat{aspect-ratio:1.35;display:grid;align-content:center;gap:4px;padding:18px}
.chip.stat b{font-size:1.9rem;font-weight:500;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.chip.stat span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3)}
.chip.dark{background:var(--void);color:#fff;box-shadow:0 16px 40px rgba(10,17,25,.22)}
.chip.dark span{color:rgba(255,255,255,.6)}
.chip.accent{background:var(--orange-aa);color:#fff}
.chip.accent span{color:rgba(255,255,255,.8)}
.scatter .mid{grid-column:4 / span 6;grid-row:1 / span 2;align-self:center;text-align:center;display:grid;gap:16px;justify-items:center;padding:22px 0}
.scatter .c1{grid-column:1 / span 3;grid-row:1}.scatter .c2{grid-column:1 / span 3;grid-row:2}
.scatter .c3{grid-column:10 / span 3;grid-row:1}.scatter .c4{grid-column:10 / span 3;grid-row:2}

/* carousel */
.rail{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-top:clamp(28px,3vw,42px);
  padding-bottom:8px;scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.item{flex:0 0 min(430px,84vw);scroll-snap-align:start;border-radius:16px;overflow:hidden;background:var(--paper);
  box-shadow:inset 0 0 0 1px var(--onwhite);display:flex;flex-direction:column;
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.item:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(238,90,26,.42)}
.item .shot{aspect-ratio:1.7;overflow:hidden;background:var(--sand)}
.item .shot img{width:100%;height:100%;object-fit:cover}
.item .shot.mark{display:grid;place-items:center}
.item .shot.mark img{width:34%;height:auto;object-fit:contain}
.item .txt{padding:22px 24px 24px;display:flex;flex-direction:column;gap:9px;flex:1}
.item .txt p{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.item .tlink{margin-top:auto;padding-top:12px}
.railnav{display:flex;gap:9px}
.railnav button{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;box-shadow:inset 0 0 0 1px var(--onwhite);
  transition:background var(--t1) var(--ease)}
.railnav button:hover{background:rgba(21,38,63,.06)}
.on-dark .railnav button{box-shadow:inset 0 0 0 1px var(--ondark)}
.on-dark .railnav button:hover{background:rgba(255,255,255,.1)}
.railhead{display:flex;align-items:flex-end;justify-content:space-between;gap:26px;flex-wrap:wrap}

/* creed */
.creed{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,70px);align-items:center}
.creed .card{background:var(--orange-aa);color:#fff;border-radius:16px;padding:30px 32px;display:grid;gap:14px}
.creed .gk{font-family:var(--serif);font-style:italic;font-size:1.6rem;line-height:1.2}
.creed .card p{font-size:1.02rem;line-height:1.5}
/* the motto is a p, so the card's own p rule was taking its size, and the general .gk
   rule further down was painting it brand orange on a brand orange card. Both beaten here. */
.creed .card .gk{font-size:1.6rem;color:#fff}
.creed .who{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;opacity:.9}

/* cta */
.cta{display:grid;gap:26px;justify-items:center;text-align:center}
.cta h2{max-width:18ch}

/* footer */
.ftr{background:var(--void);color:#fff;padding:clamp(48px,6vw,74px) 0 26px}
.ftr-top{display:grid;grid-template-columns:1.2fr 1fr auto;gap:34px;align-items:start}
.ftr-brand{display:flex;align-items:center;gap:11px}
.ftr-brand svg{height:30px;width:auto}
.ftr-brand b{font-size:1.05rem;font-weight:600;letter-spacing:-.02em}
.ftr-brand .gk{display:block;font-family:var(--serif);font-style:italic;color:var(--orange);font-size:.86rem;font-weight:400}
.ftr-brand .gk i{color:rgba(255,255,255,.6);font-style:normal}
.ftr p{color:rgba(255,255,255,.62);font-size:.94rem;max-width:36ch}
.ftr-nav{display:flex;flex-wrap:wrap;gap:14px 22px}
.ftr-nav a{font-family:var(--mono);font-size:.63rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.8)}
.ftr-nav a:hover{color:var(--orange)}
.ftr-bot{margin-top:44px;padding-top:18px;border-top:1px solid var(--ondark);display:flex;justify-content:space-between;
  gap:18px;flex-wrap:wrap;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.45)}

/* reveals */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity var(--t2) var(--ease),transform 720ms var(--ease)}
.js .rv.in{opacity:1;transform:none}
.js .rv[data-d="1"]{transition-delay:70ms}.js .rv[data-d="2"]{transition-delay:140ms}
.js .rv[data-d="3"]{transition-delay:210ms}.js .rv[data-d="4"]{transition-delay:280ms}

/* preview strip */
.pv{background:var(--orange);color:#fff;text-align:center;padding:9px 16px;font-family:var(--mono);
  font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;z-index:95;line-height:1}
.pv a{text-decoration:underline;text-underline-offset:2px}
.has-pv{--hdr-top:34px}
.pv{position:fixed;inset:0 0 auto 0}

/* ── responsive ───────────────────────────────────────── */
@media (max-width:1080px){
  .creed{grid-template-columns:1fr}
  .ftr-top{grid-template-columns:1fr 1fr}
}
@media (max-width:860px){
  .js .chip{transform:scale(.96)}
  .js .chip.in{transform:none}
  .hdr-nav{display:none;position:absolute;left:var(--pad);right:var(--pad);top:calc(100% + 10px);flex-direction:column;
    align-items:flex-start;gap:0;background:rgba(10,17,25,.96);backdrop-filter:blur(14px);border-radius:14px;padding:8px 0;
    box-shadow:inset 0 0 0 1px var(--ondark)}
  .hdr-nav.open{display:flex}
  .hdr-nav a{padding:13px 20px;width:100%}
  .hdr-burger{display:block}
  .hdr-cta{display:none}
  .hdr-in{position:relative}
  .numgrid,.tiles{grid-template-columns:1fr}
  .hero-foot{flex-direction:column;align-items:flex-start;gap:18px}
  .scatter{grid-template-columns:1fr 1fr}
  .scatter .mid{grid-column:1 / -1;grid-row:auto;order:-1}
  .scatter .c1,.scatter .c2,.scatter .c3,.scatter .c4{grid-column:span 1;grid-row:auto}
  .ftr-top{grid-template-columns:1fr}
}
@media (max-width:640px){
  body{font-size:16px}
  .hero{min-height:0;padding-top:126px}
  .hero-label{display:none}
  .pins{display:none}
  .datacard{position:relative;inset:auto;margin-top:22px;width:100%;transform:none}
  .reticle{display:none}
  .scatter{grid-template-columns:1fr}
  .tile{min-height:0;gap:20px;padding:23px 22px 21px}
  .chip.stat{aspect-ratio:auto;padding:22px 20px;gap:6px}
  .chip img{aspect-ratio:1.5}
  /* the frame is its own band here, so one marker fits without crowding the copy */
  .hero-c .frame .pins{display:block}
  .hero-c .frame .pin:nth-of-type(n+2){display:none}
}
@media (prefers-reduced-motion:reduce){
  .js .rv{opacity:1;transform:none;transition:none}
  .js .chip{opacity:1;transform:none}
  .js .curtain{display:none}
  .js .hero-body,.js .hero-label,.js .hero-foot,.js .pin{animation:none;opacity:1}
  .hero-media img{animation:none}
  .marq .track{animation:none}
  .dot::after,.scroller .mouse::after{animation:none}
  .pin{transform:none}
  .datacard{transform:none}
  html{scroll-behavior:auto}
}

/* ── hero variants ────────────────────────────────────── */
/* A · The Bench, one cinematic frame, annotated while you watch */
.hero-a .hero-scrim{background:
  linear-gradient(95deg,rgba(10,17,25,.92) 0%,rgba(10,17,25,.74) 34%,rgba(10,17,25,.3) 68%,rgba(10,17,25,.5) 100%),
  linear-gradient(to top,rgba(10,17,25,.86) 0%,transparent 46%)}
.hero-a .hero-media img{filter:saturate(.72) contrast(1.04) brightness(.94)}

/* B · The Instrument, a floating plate under measurement, on a dark ground */
.hero-b{background:radial-gradient(74% 58% at 68% 42%,#17293F 0%,var(--void) 62%)}
.hero-b .hero-label{left:auto;right:var(--pad);text-align:right}
.hero-b .hero-body{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(30px,5vw,72px);align-items:center}
.hero-b .plate-wrap{position:relative;justify-self:center;width:min(430px,100%);
  transform:translate(calc(var(--mx,0) * -16px),calc(var(--my,0) * -16px))}
.hero-b .plate{border-radius:18px;overflow:hidden;box-shadow:0 46px 100px rgba(0,0,0,.6);
  animation:float 11s ease-in-out infinite alternate}
@keyframes float{from{transform:translateY(-12px) rotate(-.7deg)}to{transform:translateY(14px) rotate(.7deg)}}
.hero-b .specs{margin-top:clamp(26px,3vw,38px);max-width:none}
.hero-b .datacard{right:-6%;bottom:-8%}

/* C · The Brief, a light reading column against a working frame */
.hero-c{background:var(--cream);color:var(--ink);min-height:min(92svh,920px);padding:0;display:grid;
  grid-template-columns:1.02fr .98fr;
  grid-template-rows:minmax(calc(var(--hdr-top,0px) + 116px),1fr) auto auto 1fr}
.hero-c .hero-copy{padding:0 clamp(28px,4vw,64px) 0 var(--pad);
  display:flex;flex-direction:column;max-width:760px;justify-self:end;width:100%}
.hero-c .ctop{grid-column:1;grid-row:2;align-self:end}
.hero-c .crest{grid-column:1;grid-row:3;align-self:start;padding-bottom:clamp(40px,5vw,64px)}
.hero-c .frame{grid-column:2;grid-row:1 / -1}
.hero-c h1{color:var(--ink);max-width:15ch}
.hero-c .hero-sub{color:var(--ink-2);font-size:1rem;line-height:1.55;max-width:46ch;margin-top:20px}
.hero-c .specs .row{border-color:var(--onwhite)}
.hero-c .specs .t{color:var(--ink)}
.hero-c .specs .p{color:var(--ink-3)}
.hero-c .specs{margin-top:clamp(26px,3vw,40px)}
.hero-c .frame{position:relative;overflow:hidden;background:var(--void);min-height:420px}
.hero-c .frame img{width:100%;height:100%;object-fit:cover;filter:saturate(.76) contrast(1.03);
  animation:pan 46s ease-in-out infinite alternate}
.hero-c .frame::after{content:"";position:absolute;inset:0;background:
  linear-gradient(100deg,rgba(247,246,242,.55),transparent 24%),
  linear-gradient(200deg,rgba(10,17,25,.18) 0%,rgba(10,17,25,.62) 100%)}
.hero-c .hero-label{top:auto;bottom:26px;left:auto;right:26px;text-align:right;color:#fff;z-index:4}
.hero-c .scroller{color:var(--ink-3);margin-top:30px}
.hero-c .scroller .mouse{box-shadow:inset 0 0 0 1px rgba(21,38,63,.4)}
.hero-c .scroller .mouse::after{background:var(--ink)}
.js .hero-c .ctop{animation:sharpen 900ms var(--ease) 620ms both}
.js .hero-c .crest{animation:sharpen 900ms var(--ease) 720ms both}
@media (max-width:900px){
  .hero-b .hero-label{left:auto;right:var(--pad);text-align:right}
.hero-b .hero-body{grid-template-columns:1fr}
  .hero-b .plate-wrap{order:-1;width:min(320px,76%)}
  .hero-b .datacard{position:relative;right:auto;bottom:auto;margin-top:20px;width:100%}
  .hero-c{grid-template-columns:1fr;grid-template-rows:auto auto auto;min-height:0}
  .hero-c .hero-copy{justify-self:stretch;max-width:none}
  .hero-c .ctop{grid-column:1;grid-row:1;padding:calc(var(--hdr-top,0px) + 96px) var(--pad) 28px}
  .hero-c .frame{grid-column:1;grid-row:2;min-height:clamp(230px,36svh,340px)}
  .hero-c .crest{grid-column:1;grid-row:3;padding:30px var(--pad) 46px}
}

/* Phronesis Labs · landing directions D, E and F
   Loaded after pl.css, which owns the tokens, header, footer, buttons, pills and reveals.
   Each direction here changes the whole page structure, not only the hero. */

/* ══ D · The Statement ══════════════════════════════════
   Type carries everything. Near black grounds, centred statements, almost no chrome. */
.hero-d{position:relative;min-height:min(94svh,960px);display:grid;place-items:center;
  padding:clamp(120px,14vw,180px) 0 clamp(70px,8vw,110px);background:var(--void);color:#fff;
  overflow:hidden;isolation:isolate;text-align:center}
.rings{position:absolute;inset:0;z-index:0;display:grid;place-items:center;pointer-events:none;opacity:.5}
.rings svg{width:min(112vmin,1180px);height:min(112vmin,1180px);overflow:visible}
.rings .r1{transform-origin:50% 50%;animation:spin 118s linear infinite}
.rings .r2{transform-origin:50% 50%;animation:spin 76s linear infinite reverse}
.rings .r3{transform-origin:50% 50%;animation:spin 190s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.hero-d .inner{position:relative;z-index:2;width:min(1080px,88vw);display:grid;justify-items:center;gap:clamp(20px,2.4vw,30px)}
.hero-d h1{max-width:19ch;font-size:clamp(36px,5.3vw,76px);line-height:1.04;letter-spacing:-.035em}
.hero-d .lead{max-width:52ch;text-align:center;color:rgba(255,255,255,.74)}
.hero-d .actions{justify-content:center;margin-top:4px}
.corner{position:absolute;z-index:2;color:rgba(255,255,255,.62);max-width:24ch;text-align:left}
.corner.tl{top:calc(var(--hdr-top,0px) + 104px);left:var(--pad)}
.corner.tr{top:calc(var(--hdr-top,0px) + 104px);right:var(--pad);text-align:right}
.corner.br{text-align:right}
.corner.bl{bottom:30px;left:var(--pad)}
.corner.br{bottom:30px;right:var(--pad);text-align:right}
.js .hero-d .inner > *{animation:sharpen 900ms var(--ease) both}
.js .hero-d .inner > :nth-child(1){animation-delay:640ms}
.js .hero-d .inner > :nth-child(2){animation-delay:720ms}
.js .hero-d .inner > :nth-child(3){animation-delay:800ms}
.js .hero-d .inner > :nth-child(4){animation-delay:880ms}
.js .corner{animation:sharpen 900ms var(--ease) 960ms both}

/* a statement section is one sentence at display size, nothing else competing */
.stmt{text-align:center;display:grid;justify-items:center;gap:22px}
.stmt .big{font-size:clamp(30px,4.6vw,62px);font-weight:500;letter-spacing:-.032em;line-height:1.08;max-width:20ch}
.stmt .lead{text-align:center}
.qstack{display:grid;gap:0;margin-top:clamp(40px,5vw,70px);width:100%}
.qrow{display:grid;grid-template-columns:auto 1fr;gap:clamp(20px,3vw,44px);align-items:baseline;
  padding:clamp(30px,3.6vw,48px) 0;border-top:1px solid var(--onwhite);text-align:left;position:relative}
.on-dark .qrow,.void .qrow,.navy .qrow{border-color:var(--ondark)}
.qrow:last-child{border-bottom:1px solid var(--onwhite)}
.on-dark .qrow:last-child,.void .qrow:last-child,.navy .qrow:last-child{border-bottom-color:var(--ondark)}
.qrow .qi{font-family:var(--mono);font-size:.7rem;letter-spacing:.16em;color:var(--orange);font-weight:600}
.qrow .qt{font-size:clamp(23px,3.1vw,42px);font-weight:500;letter-spacing:-.028em;line-height:1.13;max-width:24ch}
.qrow::after{content:"";position:absolute;left:0;bottom:-1px;height:2px;width:100%;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 900ms var(--ease)}
.qrow.in::after{transform:scaleX(1)}

.stagerow{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,2.4vw,34px);margin-top:clamp(40px,5vw,66px);text-align:left}
.stagerow .s .n{font-size:clamp(42px,4.6vw,66px);font-weight:400;letter-spacing:-.04em;line-height:.9;
  color:transparent;-webkit-text-stroke:1px currentColor;opacity:.55}
.stagerow .s h3{margin:16px 0 7px}
.stagerow .s p{color:var(--ink-2);font-size:.96rem;line-height:1.5}
.on-dark .stagerow .s p,.void .stagerow .s p{color:rgba(255,255,255,.62)}

.plainlist{margin-top:clamp(34px,4vw,54px);display:grid;text-align:left}
.plainlist a{display:grid;grid-template-columns:auto 1fr auto;gap:clamp(16px,2.4vw,34px);align-items:center;
  padding:clamp(22px,2.6vw,32px) 0;border-top:1px solid var(--onwhite);transition:padding-inline var(--t2) var(--ease)}
.plainlist a:last-child{border-bottom:1px solid var(--onwhite)}
.plainlist a:hover{padding-inline:10px}
.plainlist .st{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;
  font-weight:600;color:var(--orange);width:9ch}
.plainlist h3{font-size:clamp(19px,2.1vw,27px)}
.plainlist p{color:var(--ink-2);font-size:.94rem;margin-top:5px;max-width:58ch}
.plainlist .go{color:var(--orange);font-size:1.1rem;transition:transform var(--t1) var(--ease)}
.plainlist a:hover .go{transform:translate(3px,-3px)}
.quote{text-align:center;display:grid;justify-items:center;gap:18px;max-width:26ch;margin-inline:auto}
.quote .gk{font-family:var(--serif);font-style:italic;color:var(--orange);font-size:clamp(30px,4vw,52px);line-height:1.1}
.quote p{font-size:clamp(17px,1.6vw,21px);line-height:1.5;color:var(--ink-2);max-width:44ch}
.on-dark .quote p,.void .quote p{color:rgba(255,255,255,.74)}

/* ══ E · The Ledger ═════════════════════════════════════
   The page reads like the instrument that does the reviewing. */
.hero-e{background:linear-gradient(180deg,#0C1520 0%,var(--void) 100%)}
.hero-e .hero-body{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(30px,5vw,70px);align-items:center}
.ledger{background:rgba(255,255,255,.035);box-shadow:inset 0 0 0 1px var(--ondark);border-radius:14px;
  overflow:hidden;backdrop-filter:blur(8px)}
.ledger .lh{display:grid;grid-template-columns:1fr 8.5ch;gap:14px;padding:13px 18px;
  border-bottom:1px solid var(--ondark);font-family:var(--mono);font-size:.57rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.5)}
.ledger .lh span:last-child{text-align:right}
.lrow{display:grid;grid-template-columns:1fr 8.5ch;gap:14px;align-items:center;padding:15px 18px;
  border-bottom:1px solid rgba(255,255,255,.07);transition:opacity 320ms var(--ease),transform 320ms var(--ease)}
.lbody .lrow:last-child{border-bottom:0}
.lrow .id{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.82);line-height:1.5}
.lrow .id b{display:block;color:rgba(255,255,255,.42);font-weight:500;letter-spacing:.16em;font-size:.55rem;margin-bottom:3px}
.vd{justify-self:end;font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;padding:5px 8px 4px;border-radius:4px;white-space:nowrap}
.vd.pass{background:var(--orange-aa);color:#fff}
.vd.stop{background:rgba(255,255,255,.1);color:rgba(255,255,255,.6)}
.lrow.out{opacity:0;transform:translateY(-8px)}
.lrow.fresh .vd{animation:stamp 420ms var(--ease) both}
@keyframes stamp{from{opacity:0;transform:scale(1.35)}to{opacity:1;transform:none}}
.lsum{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ondark)}
.lsum div{padding:15px 18px}
.lsum div + div{border-left:1px solid var(--ondark)}
.lsum b{display:block;font-size:1.55rem;font-weight:500;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.lsum span{font-family:var(--mono);font-size:.53rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.5);margin-top:6px;display:block;line-height:1.5}

.dtable{margin-top:clamp(34px,4vw,54px);display:grid}
.dtable .tr{display:grid;grid-template-columns:5ch 1fr 1.35fr auto;gap:clamp(14px,2.2vw,32px);align-items:start;
  padding:clamp(20px,2.4vw,28px) 0;border-top:1px solid var(--onwhite)}
.dtable .tr:last-child{border-bottom:1px solid var(--onwhite)}
.on-dark .dtable .tr,.void .dtable .tr{border-color:var(--ondark)}
.on-dark .dtable .tr:last-child,.void .dtable .tr:last-child{border-bottom-color:var(--ondark)}
.dtable .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;color:var(--orange);font-weight:600;padding-top:5px}
.dtable h3{font-size:clamp(18px,1.8vw,23px)}
.dtable p{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.on-dark .dtable p,.void .dtable p{color:rgba(255,255,255,.62)}
.dtable .pl{font-family:var(--mono);font-size:.9rem;color:var(--ink-3);padding-top:4px}
.on-dark .dtable .pl,.void .dtable .pl{color:rgba(255,255,255,.34)}
.meter{margin-top:clamp(36px,4vw,56px);display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--onwhite);border:1px solid var(--onwhite);border-radius:12px;overflow:hidden}
.on-dark .meter,.void .meter{background:var(--ondark);border-color:var(--ondark)}
.meter div{background:var(--paper);padding:22px 24px}
.void .meter div,.on-dark .meter div{background:var(--void)}
.meter b{display:block;font-size:clamp(1.8rem,2.8vw,2.5rem);font-weight:500;letter-spacing:-.035em;line-height:1;
  font-variant-numeric:tabular-nums;color:var(--orange)}
.meter span{display:block;margin-top:9px;font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.55}
.on-dark .meter span,.void .meter span{color:rgba(255,255,255,.5)}

/* ══ F · The Mosaic ═════════════════════════════════════
   Everything is a module. The grid is the identity. */
.hero-f{min-height:min(94svh,980px);padding:calc(var(--hdr-top,0px) + 104px) var(--pad) var(--pad);
  background:var(--cream);display:grid}
.mosaic{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(112px,auto);gap:12px;width:100%}
.mt{border-radius:16px;overflow:hidden;position:relative;isolation:isolate;padding:26px 28px;display:flex;
  flex-direction:column;justify-content:space-between;gap:18px}
.js .mt{opacity:0;animation:tilein 720ms var(--ease) forwards;animation-delay:calc(560ms + var(--i,0) * 90ms)}
@keyframes tilein{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
.mt.head{grid-column:span 4;grid-row:span 3;background:var(--orange);color:#fff}
.mt.head h1{color:#fff;font-size:clamp(32px,3.9vw,60px);line-height:1.04;letter-spacing:-.035em;max-width:16ch}
.mt.head .pill{background:rgba(255,255,255,.22);align-self:flex-start}
.mt.shot{grid-column:span 2;grid-row:span 2;padding:0}
.mt.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2}
.mt.shot::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(200deg,rgba(10,17,25,.1),rgba(10,17,25,.6))}
.mt.shot .cap{margin-top:auto;padding:26px 28px;color:#fff;font-family:var(--mono);font-size:.6rem;
  letter-spacing:.14em;text-transform:uppercase;line-height:1.6}
.mt.read{grid-column:span 2;grid-row:span 2;background:var(--paper);box-shadow:inset 0 0 0 1px var(--onwhite)}
.mt.read p{color:var(--ink-2);font-size:.98rem;line-height:1.55}
.mt.read .actions{margin-top:0;gap:10px}
.mt.data{grid-column:span 2;grid-row:span 1;background:var(--void);color:#fff;justify-content:center;gap:8px}
.mt.data b{font-size:2.1rem;font-weight:500;letter-spacing:-.035em;line-height:1;font-variant-numeric:tabular-nums;
  color:var(--orange)}
.mt.data span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.58);line-height:1.55}
.mt.mono{grid-column:span 2;grid-row:span 1;background:var(--navy);color:#fff;justify-content:center}
.mt.mono p{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.9}
.mt.mono p b{color:var(--orange);font-weight:600}

.tilegrid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,4vw,52px)}
.gt{border-radius:16px;padding:26px 26px 24px;display:flex;flex-direction:column;gap:10px;
  background:var(--paper);box-shadow:inset 0 0 0 1px var(--onwhite);
  transition:transform var(--t2) var(--ease),box-shadow var(--t2) var(--ease)}
.gt:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(238,90,26,.45)}
.gt .n{font-family:var(--mono);font-size:.6rem;letter-spacing:.15em;color:var(--orange);font-weight:600}
.gt p{color:var(--ink-2);font-size:.95rem;line-height:1.5}
.gt.wide{grid-column:span 2}
.gt.fill{background:var(--orange-aa);color:#fff;box-shadow:none}
.gt.fill p,.gt.fill .n{color:rgba(255,255,255,.86)}
.gt.fill h3{color:#fff}
.gt.dark{background:var(--void);color:#fff;box-shadow:none}
.gt.dark p{color:rgba(255,255,255,.66)}
.gt.dark h3{color:#fff}
.gt .q{font-size:clamp(1.2rem,1.9vw,1.72rem);font-weight:500;letter-spacing:-.026em;line-height:1.16}

@media (max-width:1080px){
  .stagerow{grid-template-columns:1fr 1fr;gap:30px}
  .meter{grid-template-columns:1fr 1fr}
  .tilegrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero-e .hero-body{grid-template-columns:1fr}
  .dtable .tr{grid-template-columns:5ch 1fr;gap:14px}
  .dtable .pl{display:none}
  .dtable p{grid-column:2}
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mt.head{grid-column:span 2;grid-row:span 2}
  .mt.shot,.mt.read,.mt.data,.mt.mono{grid-column:span 2;grid-row:span 1}
  .mt.shot{min-height:220px}
  .hero-f{min-height:0}
}
@media (max-width:640px){
  .corner.tr,.corner.tl{display:none}
  .stagerow{grid-template-columns:1fr;gap:26px}
  .meter,.tilegrid{grid-template-columns:1fr}
  .gt.wide{grid-column:span 1}
  .qrow{grid-template-columns:1fr;gap:12px}
  .plainlist a{grid-template-columns:1fr auto;gap:10px}
  .plainlist .st{width:auto;grid-column:1}
  .plainlist .go{grid-row:1;grid-column:2}
  .plainlist div{grid-column:1 / -1}
  .lsum{grid-template-columns:1fr}
  .lsum div + div{border-left:0;border-top:1px solid var(--ondark)}
}
@media (prefers-reduced-motion:reduce){
  .rings .r1,.rings .r2,.rings .r3{animation:none}
  .js .hero-d .inner > *,.js .corner,.js .mt{animation:none;opacity:1}
  .qrow::after{transform:scaleX(1);transition:none}
  .lrow,.lrow.fresh .vd{transition:none;animation:none}
}



/* ══ inner pages only ═══════════════════════════ */


/* --hdr-top is the offset for the 34px preview bar the previews/ chrome used to
   put above the page, set by .has-pv. The live site has no such bar, and the
   home page never set one, so this sheet must not either: a 34px value here
   pushed the fixed header down and let the page scroll through the gap above
   it, which read as the header not being sticky. Left unset, so it falls back
   to 0 and matches the home page. */
.sec[id]{scroll-margin-top:calc(var(--hdr-top,0px) + 74px)}

/* the mark, as on the home page */
.hero-e{isolation:isolate}
#gl{position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;opacity:.5}
.glscrim{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(58% 48% at 26% 46%, rgba(10,17,25,.92) 0%, rgba(10,17,25,.55) 46%, transparent 76%),
    linear-gradient(to right, rgba(10,17,25,.80) 0%, rgba(10,17,25,.26) 48%, rgba(10,17,25,.72) 100%),
    linear-gradient(to bottom, rgba(10,17,25,.55) 0%, transparent 26%, rgba(10,17,25,.70) 100%)}
@media (max-width:900px){
  #gl{opacity:.4}
  .glscrim{background:
    radial-gradient(80% 40% at 50% 62%, rgba(10,17,25,.70) 0%, transparent 78%),
    linear-gradient(to bottom, rgba(10,17,25,.88) 0%, rgba(10,17,25,.62) 34%, rgba(10,17,25,.86) 100%)}
}

/* phone tap targets, same as the home page */
@media (max-width:900px){
  .hdr-burger{display:grid;place-items:center;width:44px;height:44px;margin-right:-10px}
  .ftr-nav{gap:0 22px}
  .ftr-nav a{display:inline-block;padding:15px 0}
  .dtable .tr.anon .go{min-height:44px;padding:11px 0}
}

/* The shared spec list keeps a 14px third column for a `+`. These pages put a short
   label there instead, so it needs room, and goes away entirely on a phone. */
.specs .row{grid-template-columns:22px 1fr auto}
.specs .p{white-space:nowrap;text-align:right;font-family:var(--mono);font-size:.58rem;
  letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.42)}
@media (max-width:640px){
  .specs .row{grid-template-columns:22px 1fr}
  .specs .p{display:none}
}

/* Consulting and Privacy open on cream. Every other page opens dark, so a light hero
   is the single clearest way to tell them apart before a word is read. */
.hero-l{background:var(--cream);color:var(--ink);min-height:min(86svh,860px)}
.hero-l.short{min-height:min(56svh,560px)}
.hero-l h1{color:var(--ink);max-width:19ch}
.hero-l .hero-sub{color:var(--ink-2);font-size:1.02rem;line-height:1.55;max-width:48ch;margin-top:20px}
.hero-l .hero-body{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(30px,5vw,64px);align-items:end}
.hero-l .btn.hollow.ink{color:var(--ink)}
.lspecs{display:grid;align-self:end}
.lspecs .r{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--onwhite)}
.lspecs .r:last-child{border-bottom:1px solid var(--onwhite)}
.lspecs .n{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:var(--orange);font-weight:600}
.lspecs .t{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);line-height:1.55}
@media (max-width:900px){ .hero-l .hero-body{grid-template-columns:1fr} }

/* ── four heroes, four silhouettes ────────────────────────────────────────
   The landing page keeps the mark and the ledger panel. Each inner page takes a
   different one of the shapes the six directions established, so the first screen
   of every page is a different object before a word is read. */

/* About: the Statement. The Greek word carries the hero, rings turn behind it. */
.gkd{font-family:var(--serif);font-style:italic;color:var(--orange);
  font-size:clamp(56px,9vw,132px);line-height:.9;letter-spacing:0;display:block}
.hero-d .pill{background:transparent;color:rgba(255,255,255,.66);
  box-shadow:inset 0 0 0 1px var(--ondark);font-weight:500}
.hero-d h1{font-size:clamp(28px,3.4vw,46px);max-width:24ch}
.hero-d .inner{gap:clamp(14px,1.8vw,22px)}

/* The Lab: the Mosaic, moved onto the dark ground so it does not read as Consulting. */
.hero-f.dark{background:var(--void)}
.hero-f.dark .mt.read{background:rgba(255,255,255,.05);box-shadow:inset 0 0 0 1px var(--ondark);color:#fff}
.hero-f.dark .mt.read p{color:rgba(255,255,255,.7)}
.hero-f.dark .mt.data{box-shadow:inset 0 0 0 1px var(--ondark)}
.mt.stage{grid-column:span 2;grid-row:span 1;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--ondark);color:#fff;justify-content:center}
.mt.stage p{font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;line-height:1.9;
  color:rgba(255,255,255,.6)}
@media (max-width:900px){
  .mosaic{grid-template-columns:repeat(2,1fr)}
  .mt.head{grid-column:span 2;grid-row:span 2}
  .mt.read,.mt.data,.mt.mono,.mt.stage{grid-column:span 2;grid-row:span 1}
}

/* Contact: two full height columns meeting at a hard edge. No centred wrap at all. */
.hero-split{min-height:min(94svh,940px);display:grid;grid-template-columns:1.05fr .95fr;
  background:var(--void);color:#fff}
.hero-split .sl{padding:calc(var(--hdr-top,0px) + 132px) clamp(34px,4vw,64px) clamp(44px,5vw,70px) var(--pad);
  display:flex;flex-direction:column;justify-content:center;gap:clamp(22px,2.6vw,32px)}
.hero-split h1{max-width:17ch}
.hero-split .sr{background:#060B12;box-shadow:inset 1px 0 0 var(--ondark);
  padding:calc(var(--hdr-top,0px) + 132px) var(--pad) clamp(44px,5vw,70px) clamp(34px,4vw,64px);
  display:grid;align-content:center;gap:15px}
.splitfacts{display:grid}
.splitfacts div{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:12px 0;border-top:1px solid var(--ondark)}
.splitfacts div:last-child{border-bottom:1px solid var(--ondark)}
.splitfacts span{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:var(--orange);font-weight:600}
.splitfacts p{font-family:var(--mono);font-size:.62rem;letter-spacing:.11em;text-transform:uppercase;
  color:rgba(255,255,255,.78);line-height:1.6}
@media (max-width:900px){
  .hero-split{grid-template-columns:1fr;min-height:0}
  .hero-split .sl{padding:calc(var(--hdr-top,0px) + 112px) var(--pad) 34px}
  .hero-split .sr{padding:30px var(--pad) 46px;box-shadow:inset 0 1px 0 var(--ondark)}
}

/* Privacy: no hero. A document masthead, then the policy begins. */
#policy{padding-top:clamp(30px,3.4vw,46px)}   /* the masthead already gave it air */
.masthead{background:var(--cream);color:var(--ink);
  padding:calc(var(--hdr-top,0px) + 128px) 0 clamp(36px,4vw,54px)}
.masthead .mono{color:var(--ink-3);margin-bottom:18px}
.masthead h1{font-size:clamp(44px,6vw,92px);letter-spacing:-.035em;line-height:1}
.mh-meta{display:flex;flex-wrap:wrap;gap:10px 34px;margin-top:clamp(26px,3vw,38px);
  padding-top:18px;border-top:1px solid var(--onwhite)}
.mh-meta span{font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink-3)}

/* Over a light hero the header is transparent, so everything in it has to flip to ink
   until the scroll makes it solid again. */
.hdr-ink:not(.solid) .hdr-word{color:var(--ink)}
.hdr-ink:not(.solid) .hdr-nav a{color:var(--ink-2)}
.hdr-ink:not(.solid) .hdr-nav a:hover{color:var(--ink)}
.hdr-ink:not(.solid) .hdr-nav a.on{color:var(--orange)}
.hdr-ink:not(.solid) .hdr-cta{color:var(--ink)}
.hdr-ink:not(.solid) .hdr-burger svg{stroke:var(--ink)}
.hdr-ink.solid .hdr-word,.hdr-ink.solid .hdr-cta{color:#fff}
.hdr-ink.solid .hdr-nav a{color:rgba(255,255,255,.72)}
.hdr-ink.solid .hdr-nav a.on{color:var(--orange)}
.hdr-ink.solid .hdr-burger svg{stroke:#fff}

/* Consulting is the only page built on big tiles, so it needs a three across row.
   All three start neutral: filling one of them permanently read as a ranking. The
   highlight is the pointer's, and it is gated on hover so a tap does not leave one
   stuck orange on a phone. */
.tiles.three{grid-template-columns:repeat(3,1fr)}
.tiles.three .tile{min-height:250px;background:rgba(255,255,255,.05);
  box-shadow:inset 0 0 0 1px var(--ondark);
  transition:background .3s ease,box-shadow .3s ease,color .3s ease,transform .3s ease}
@media (hover:hover){
  .tiles.three .tile:hover{background:var(--orange-aa);color:#fff;box-shadow:inset 0 0 0 1px var(--orange-aa)}
  .tiles.three .tile:hover .pill.light{background:rgba(255,255,255,.22);color:#fff}
  .tiles.three .tile:hover .qn{opacity:.95}
}
.tiles.three .q{font-size:clamp(1.2rem,1.7vw,1.6rem);max-width:none}
.tiles.three .qn{text-transform:none;letter-spacing:.01em;font-family:var(--sans);font-size:.88rem;
  line-height:1.45;opacity:.82}
@media (max-width:980px){ .tiles.three{grid-template-columns:1fr} }

/* a simple hero for the pages that have no instrument to show */
.hero-p{background:radial-gradient(70% 56% at 30% 40%,#17293F 0%,var(--void) 64%)}
.hero-p .hero-body{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(30px,5vw,64px);align-items:end}
.hero-p h1{max-width:20ch}
.hero-p .aside{display:grid;gap:0;align-self:end}
.hero-p .aside .r{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:baseline;
  padding:13px 0;border-top:1px solid var(--ondark)}
.hero-p .aside .r:last-child{border-bottom:1px solid var(--ondark)}
.hero-p .aside .n{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;color:var(--orange);font-weight:600}
.hero-p .aside .t{font-family:var(--mono);font-size:.63rem;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;line-height:1.55}
@media (max-width:900px){ .hero-p .hero-body{grid-template-columns:1fr} }

/* the Greek word, given room */
.gkbig{font-family:var(--serif);font-style:italic;color:var(--orange);
  font-size:clamp(44px,6vw,86px);line-height:1;letter-spacing:0;display:block}
.gkrom{display:block;margin-top:10px;font-family:var(--mono);font-size:.62rem;letter-spacing:.15em;
  text-transform:uppercase;color:rgba(255,255,255,.6)}

/* pl2.css already owns .stmt. An earlier build redefined it here with a 19ch max-width,
   which collapsed the block and stranded it against the left edge. */

/* reading column, for the policy */
.read{max-width:68ch;margin-top:clamp(30px,3.6vw,48px)}
.read .blk{padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--onwhite)}
.read .blk:last-child{border-bottom:1px solid var(--onwhite)}
.read .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--orange);font-weight:600;display:block;margin-bottom:13px}
.read h3{margin-bottom:9px}
.read p{color:var(--ink-2);font-size:1rem;line-height:1.62}
.read p + p{margin-top:12px}

/* the contact form, in the panel the ledger occupies on the home page */
.formpanel{border-radius:16px;box-shadow:inset 0 0 0 1px var(--ondark);background:rgba(255,255,255,.035);
  padding:clamp(22px,2.6vw,30px);display:grid;gap:15px}
.formpanel .fh{font-family:var(--mono);font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.66);padding-bottom:13px;border-bottom:1px solid var(--ondark)}
.fld{display:grid;gap:7px}
.fld label{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  color:rgba(255,255,255,.6)}
.fld input,.fld textarea{width:100%;font:inherit;font-size:.95rem;color:#fff;background:rgba(0,0,0,.26);
  border:0;box-shadow:inset 0 0 0 1px var(--ondark);border-radius:8px;padding:12px 13px;
  transition:box-shadow var(--t1) var(--ease)}
.fld textarea{min-height:104px;resize:vertical;line-height:1.5}
.fld input:focus,.fld textarea:focus{outline:0;box-shadow:inset 0 0 0 1px var(--orange)}
.fld input::placeholder,.fld textarea::placeholder{color:rgba(255,255,255,.3)}
.formpanel .note,.hero-split .sr .note{font-family:var(--mono);font-size:.55rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.42);line-height:1.6}
.hero-e .formpanel{width:100%}

/* a quiet row of facts */
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(28px,3.2vw,44px);
  border-top:1px solid var(--onwhite)}
.on-dark .facts,.void .facts{border-color:var(--ondark)}
.facts div{padding:22px clamp(14px,2vw,26px) 20px 0}
.facts b{display:block;font-size:clamp(28px,3vw,40px);font-weight:500;letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
.facts span{display:block;margin-top:8px;font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink-3);line-height:1.5}
.on-dark .facts span,.void .facts span{color:rgba(255,255,255,.5)}
@media (max-width:760px){ .facts{grid-template-columns:1fr} .facts div{padding-right:0} }

/* The lab lists its work by description, not by name, so these rows carry no heading.
   The description takes the weight a heading would normally hold. */
.dtable .tr.anon{grid-template-columns:minmax(11ch,14ch) 1fr auto;align-items:start}
.dtable.anonlist{max-width:940px}   /* so the hairline ends where the text does */
.dtable .tr.anon .d{min-width:0}
.dtable .tr.anon p{font-size:clamp(1rem,1.2vw,1.13rem);line-height:1.52;color:var(--ink)}
.dtable .tr.anon .go{display:inline-flex;align-items:center;gap:9px;margin-top:12px;
  font-family:var(--mono);font-size:.6rem;letter-spacing:.13em;text-transform:uppercase;
  font-weight:600;color:var(--ink);padding:6px 0}
.dtable .tr.anon .go .sq{display:grid;place-items:center;width:22px;height:22px;border-radius:4px;
  background:var(--orange-aa);color:#fff;font-size:.68rem;transition:transform var(--t1) var(--ease)}
.dtable .tr.anon .go:hover .sq{transform:translate(2px,-2px)}
.on-dark .dtable .tr.anon .go,.void .dtable .tr.anon .go{color:#fff}
.on-dark .dtable .tr.anon p,.void .dtable .tr.anon p{color:#fff}
.dtable .tr.anon .k{padding-top:5px}
@media (max-width:900px){
  .dtable .tr.anon{grid-template-columns:1fr;gap:9px}
  .dtable .tr.anon .k,.dtable .tr.anon .d{grid-column:1}
  .dtable .tr.anon .k{padding-top:0}
}

.facts.four{grid-template-columns:repeat(4,1fr)}
@media (max-width:900px){ .facts.four{grid-template-columns:repeat(2,1fr)} }
@media (max-width:560px){ .facts.four{grid-template-columns:1fr} }

/* Status words do not fit the 5ch slot the stage numbers use. Widen it, and stack
   the row entirely once the table is down to two columns. */
.dtable .tr.prod{grid-template-columns:minmax(11ch,13ch) 1fr 1.35fr auto}
.dtable .tr.prod .k{padding-top:6px}
@media (max-width:900px){
  .dtable .tr.prod{grid-template-columns:1fr;gap:9px}
  .dtable .tr.prod .k,.dtable .tr.prod h3,.dtable .tr.prod p{grid-column:1}
  .dtable .tr.prod .k{padding-top:0}
}


/* ── the contact form ──────────────────────────────────────────────────────
   The markup is the live form, unchanged, because it posts to /api/contact and
   carries a honeypot. Only its clothes are new. It sits on the near black right
   hand column of .hero-split, so labels are light and fields are lighter still
   than the ground rather than darker.

   Every control clears 48px. The old sheet left the inputs at 21px and the submit
   at 27px, which is under the 44px minimum on a phone. */
.formpanel{width:100%}
.intake .field{display:block;margin-bottom:16px}
.intake .field > span{display:block;font-family:var(--mono);font-size:.58rem;letter-spacing:.13em;
  text-transform:uppercase;font-weight:600;color:rgba(255,255,255,.72);margin-bottom:9px}
.intake .field > span em{font-style:normal;color:rgba(255,255,255,.44)}
.intake input,.intake textarea{display:block;width:100%;min-height:48px;padding:13px 15px;
  font:inherit;font-size:.96rem;color:#fff;background:rgba(255,255,255,.06);
  border:0;border-radius:10px;box-shadow:inset 0 0 0 1px var(--ondark);
  transition:box-shadow var(--t1) var(--ease),background var(--t1) var(--ease)}
.intake textarea{min-height:132px;resize:vertical;line-height:1.5}
.intake input::placeholder,.intake textarea::placeholder{color:rgba(255,255,255,.38)}
.intake input:focus,.intake textarea:focus{outline:none;background:rgba(255,255,255,.09);
  box-shadow:inset 0 0 0 2px var(--orange)}
.intake button{display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:50px;width:100%;margin-top:4px;padding:14px 22px;border:0;border-radius:10px;
  font:inherit;font-weight:600;font-size:.95rem;color:#fff;background:var(--orange-aa);cursor:pointer;
  transition:background var(--t1) var(--ease),transform var(--t1) var(--ease)}
.intake button:hover{background:var(--orange-aa-hi)}
.intake button:active{transform:translateY(1px)}
.intake button:focus-visible{outline:2px solid #fff;outline-offset:2px}
.intake .foot{margin:15px 0 0;font-size:.82rem;line-height:1.55;color:rgba(255,255,255,.56)}
.intake .foot a{color:rgba(255,255,255,.86);text-decoration:underline;text-underline-offset:2px}
/* the honeypot: off screen for people, still in the tree for the bots that fill it */
.intake .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── a reading column, for the policy ─────────────────────────────────────
   A privacy policy is a document, not a landing section, so it does not want
   section sized headings. The h2 drops to document scale, the measure is capped
   near 68 characters, and the rhythm puts the air above a heading rather than
   below it, so each question sits with the answer it belongs to.

   This is .doc, not .read. `.read` is already taken: it is the mosaic tile class
   in the hero on /the-lab/. When these rules were written as `.read` the
   `.read a` rule beat `.btn` and painted that hero's primary button navy on
   orange, the only button on the site not white on orange. Do not reuse the name. */
.doc{max-width:68ch}
.doc h2{font-size:clamp(23px,2.2vw,31px);letter-spacing:-.025em;line-height:1.2;
  margin:clamp(34px,3.6vw,48px) 0 12px;max-width:26ch}
.doc h2:first-child{margin-top:0}
.doc p{font-size:1.03rem;line-height:1.68;color:var(--ink-2);margin:0 0 14px;max-width:68ch}
.doc p:last-of-type{margin-bottom:0}
.doc a{color:var(--ink);text-decoration:underline;text-underline-offset:2px;
  text-decoration-color:var(--orange);text-decoration-thickness:1.5px}
.doc a:hover{color:var(--orange)}
.on-dark .doc p,.void .doc p{color:rgba(255,255,255,.76)}
.on-dark .doc a,.void .doc a{color:#fff}

/* ── the byline, shared with the home page ───────────────────────
   Copied from assets/home.css rather than imported: the two sheets are deliberately
   standalone so a page costs one request. Change it in both. On /about/ it sits on a
   light ground, which the home page never does, so the monogram and badge get ink
   versions below. */
/* ── the byline: a face and a way to reach her, beside the name ───────────
   The photo file may not be in the repo yet. If it 404s the img removes itself
   and the monogram behind it stands in, so the block never shows a broken image. */
.byline{display:inline-flex;align-items:center;gap:14px;margin-top:4px;padding:10px 0;
  transition:opacity var(--t1) var(--ease)}
.byline:hover{opacity:.86}
.avatar{position:relative;flex:none;width:52px;height:52px;border-radius:50%;overflow:hidden;
  background:rgba(255,255,255,.18);display:grid;place-items:center}
.avatar .ini{font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;font-weight:600;color:#fff}
.avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.byline .bt{display:grid;gap:2px;min-width:0}
.byline .bt b{font-size:.98rem;font-weight:600;letter-spacing:-.01em}
.byline .bt span{font-family:var(--mono);font-size:.56rem;letter-spacing:.13em;text-transform:uppercase;
  opacity:.72}
.byline .sq{display:grid;place-items:center;width:24px;height:24px;border-radius:4px;flex:none;
  background:rgba(255,255,255,.22);font-size:.7rem;transition:transform var(--t1) var(--ease)}
.byline:hover .sq{transform:translate(2px,-2px)}

/* on a light ground. The home page only ever shows this on the orange creed card. */
.paper .avatar,.grey .avatar{background:rgba(21,38,63,.1)}
.paper .avatar .ini,.grey .avatar .ini{color:var(--ink)}
.paper .byline .sq,.grey .byline .sq{background:var(--orange-aa);color:#fff}
.paper .byline .bt span,.grey .byline .bt span{color:var(--ink-3);opacity:1}

/* A bench row may carry its product's name. Most do not: the owner asked for this
   page to read by what the work does. Where a name is given it sits above the
   description, at the weight the description would otherwise hold alone. */
.dtable .tr.anon .nm{margin:0 0 7px;font-size:clamp(1rem,1.2vw,1.13rem);font-weight:600;
  letter-spacing:-.015em;line-height:1.3;color:var(--ink)}
.on-dark .dtable .tr.anon .nm,.void .dtable .tr.anon .nm{color:#fff}