/* Kalman — original build. Palette, type and motion per the Kalman brand system. */
:root{
  --graphite:#15171B; --bone:#EDE9E3; --vermillion:#DE4B22;
  --iron:#6B7078; --sulphur:#E3C04A; --ash:#C9C3B9;
  /* WCAG AA variants. Brand Vermillion stays for fills, graphics and large type;
     these are used wherever the colour carries small text. */
  --iron-text:#565B62;        /* 5.66:1 on Bone  */
  --verm-text:#B73D1B;        /* 4.70:1 on Bone  */
  --verm-on-dark:#E15D38;     /* 4.98:1 on Graphite */
  --display:"Cabinet Grotesk",ui-sans-serif,system-ui,sans-serif;
  --body:"Switzer",ui-sans-serif,system-ui,sans-serif;
  --mono:"Martian Mono",ui-monospace,monospace;
  --gutter:clamp(20px,5vw,80px);
  --max:1320px;
  --ease:cubic-bezier(.16,1,.3,1);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{background:var(--bone);color:var(--graphite);font-family:var(--body);font-size:17px;
  line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
h1,h2,h3,h4{font-family:var(--display);font-weight:500;letter-spacing:-0.02em;line-height:1.06}
a{color:inherit;text-decoration:none}
img,canvas{display:block;max-width:100%}
::selection{background:var(--vermillion);color:var(--bone)}
:focus-visible{outline:2px solid var(--vermillion);outline-offset:4px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
a,dd,p{overflow-wrap:break-word}
.rule{border:0;border-top:0.5px solid var(--ash)}
.mono{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--iron-text)}

/* ---------------- masked reveal ---------------- */
.rv{display:block;overflow:hidden}
.rv>*{display:block;transform:translateY(105%);transition:transform 1s var(--ease)}
.rv.in>*{transform:none}
.fd{opacity:0;transform:translateY(14px);filter:blur(3px)}
.fd.in{opacity:1;transform:none;filter:none;
  transition:opacity .8s var(--ease),transform .8s var(--ease),filter .8s var(--ease)}

/* ---------------- nav ---------------- */
.nav{position:fixed;top:0;left:0;right:0;z-index:60;transition:background .4s var(--ease),border-color .4s}
.nav::after{content:"";position:absolute;inset:0;background:rgba(237,233,227,.86);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:0.5px solid transparent;opacity:0;transition:opacity .4s var(--ease);z-index:-1}
.nav.stuck::after{opacity:1;border-bottom-color:var(--ash)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px;gap:24px}
.brand{display:flex;align-items:center;gap:11px}
.brand img{height:30px;width:auto}
.brand span{font-family:var(--display);font-weight:500;font-size:19px;letter-spacing:-0.02em}
.navlinks{display:flex;gap:30px;align-items:center}
.navlinks a{font-size:14px;color:var(--iron-text);position:relative;padding:4px 0}
.navlinks a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;
  background:var(--vermillion);transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.navlinks a:hover{color:var(--graphite)}
.navlinks a:hover::after{transform:scaleX(1);transform-origin:left}
.nav-cta{border:0.5px solid var(--graphite);padding:9px 17px !important;color:var(--graphite) !important;
  font-size:13px;transition:background .35s var(--ease),color .35s var(--ease)}
.nav-cta::after{display:none}
.nav-cta:hover{background:var(--graphite);color:var(--bone) !important}
.burger{display:none;width:42px;height:42px;border:0.5px solid var(--ash);background:none;cursor:pointer;
  position:relative;z-index:70}
.burger i{position:absolute;left:11px;width:18px;height:1px;background:var(--graphite);transition:transform .45s var(--ease),opacity .3s}
.burger i:nth-child(1){top:17px}.burger i:nth-child(2){top:23px}
body.menu .burger i:nth-child(1){transform:translateY(3px) rotate(45deg)}
body.menu .burger i:nth-child(2){transform:translateY(-3px) rotate(-45deg)}
@media (max-width:900px){
  .navlinks{position:fixed;inset:0;background:var(--bone);flex-direction:column;justify-content:center;
    gap:6px;transform:translateY(-100%);transition:transform .7s var(--ease);z-index:65}
  body.menu .navlinks{transform:none}
  .navlinks a{font-family:var(--display);font-size:34px;color:var(--graphite);letter-spacing:-0.02em}
  .navlinks a::after{display:none}
  .nav-cta{border:0;font-size:34px !important;color:var(--vermillion) !important;padding:4px 0 !important}
  .nav-cta:hover{background:none;color:var(--vermillion) !important}
  .burger{display:block}
  body.menu{overflow:hidden}
}

/* ---------------- hero ---------------- */
.hero{position:relative;min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;
  padding:150px 0 clamp(48px,7vw,84px);overflow:hidden}
#grid{position:absolute;inset:0;width:100%;height:100%;z-index:0}
.hero .wrap{position:relative;z-index:1;width:100%}
.hero h1{font-size:clamp(40px,7.4vw,104px);max-width:15ch}
.hero h1 em{font-style:normal;color:var(--vermillion)}
.hero-sub{margin-top:clamp(24px,3vw,38px);display:grid;grid-template-columns:1fr auto;gap:32px;align-items:end}
.hero-sub p{max-width:52ch;color:#2b2f35;font-size:clamp(15px,1.35vw,18px)}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:34px}
.btn{display:inline-flex;align-items:center;gap:10px;padding:15px 26px;font-size:15px;font-weight:500;
  border:0.5px solid var(--graphite);position:relative;overflow:hidden;isolation:isolate}
.btn span{position:relative;z-index:1;transition:color .45s var(--ease)}
.btn::before{content:"";position:absolute;inset:0;background:var(--graphite);transform:translateY(101%);
  transition:transform .5s var(--ease);z-index:0}
.btn:hover::before{transform:none}
.btn:hover span{color:var(--bone)}
.btn-primary{background:var(--verm-text);border-color:var(--verm-text);color:var(--bone)}
.btn-primary::before{background:var(--graphite)}
.btn-primary:hover span{color:var(--bone)}
.scrollcue{display:flex;align-items:center;gap:10px}
.scrollcue i{width:1px;height:44px;background:var(--ash);position:relative;overflow:hidden}
.scrollcue i::after{content:"";position:absolute;inset:0;background:var(--vermillion);animation:cue 2.2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}
@media (max-width:760px){.hero-sub{grid-template-columns:1fr}.scrollcue{display:none}}

/* ---------------- sections ---------------- */
section{padding:clamp(76px,10vw,140px) 0;position:relative}
.sec-head{display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,5vw,70px);align-items:start;
  padding-bottom:clamp(30px,4vw,48px)}
.sec-head .idx{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--verm-text);padding-top:12px}
h2{font-size:clamp(29px,4.2vw,58px);max-width:20ch}
.lede{margin-top:22px;max-width:58ch;color:#2b2f35;font-size:clamp(15px,1.25vw,17px)}
@media (max-width:640px){.sec-head{grid-template-columns:1fr;gap:14px}.sec-head .idx{padding-top:0}}

/* dark section */
.dark{background:var(--graphite);color:var(--bone)}
.dark h2,.dark h3{color:var(--bone)}
.dark .lede,.dark p{color:#c6c1ba}
.dark .rule,.dark .cellgrid{border-color:#2b2f35}
.dark .cell{border-color:#2b2f35}
.dark .mono{color:var(--ash)}
.dark .sec-head .idx,.dark .cell-n,.dark .row .tag.on,.dark .step .n{color:var(--verm-on-dark)}
.dark .row .tag.on{border-color:var(--verm-on-dark)}
.dark .row .n,.dark .row .tag{color:var(--ash)}
.dark .row p{color:#c6c1ba}

/* ---------------- capability grid ---------------- */
.cellgrid{display:grid;grid-template-columns:repeat(3,1fr);border-top:0.5px solid var(--ash)}
@media (max-width:900px){.cellgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.cellgrid{grid-template-columns:1fr}}
.cell{border-bottom:0.5px solid var(--ash);border-right:0.5px solid var(--ash);
  padding:clamp(26px,3vw,40px);position:relative;overflow:hidden;isolation:isolate}
.cell:nth-child(3n){border-right:0}
@media (max-width:900px){.cell:nth-child(3n){border-right:0.5px solid var(--ash)}.cell:nth-child(2n){border-right:0}}
@media (max-width:560px){.cell{border-right:0 !important}}
.cell::before{content:"";position:absolute;inset:0;background:var(--graphite);transform:translateY(100%);
  transition:transform .6s var(--ease);z-index:-1}
.cell:hover::before{transform:none}
.cell:hover h3,.cell:hover .cell-n{color:var(--bone)}
.cell:hover p{color:#b9b4ac}
.cell-n{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--verm-text);transition:color .5s}
.cell h3{font-size:22px;margin-top:20px;transition:color .5s var(--ease)}
.cell p{margin-top:14px;font-size:14.5px;color:var(--iron-text);transition:color .5s var(--ease)}

/* ---------------- list rows (services / work) ---------------- */
.rows{border-top:0.5px solid var(--ash)}
.row{display:grid;grid-template-columns:70px minmax(0,1.05fr) minmax(0,1.5fr) auto;gap:clamp(16px,3vw,44px);
  padding:clamp(24px,3vw,36px) 0;border-bottom:0.5px solid var(--ash);align-items:baseline;
  position:relative;transition:padding-left .5s var(--ease)}
@media (hover:hover){.row:hover{padding-left:14px}}
.row .n{font-family:var(--mono);font-size:11px;color:var(--iron-text)}
.row h3{font-size:clamp(19px,1.9vw,26px)}
.row p{font-size:15px;color:var(--iron-text)}
.row .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--iron-text);
  border:0.5px solid var(--ash);padding:5px 10px;white-space:nowrap}
.row .tag.on{color:var(--verm-text);border-color:var(--verm-text)}
@media (max-width:860px){.row{grid-template-columns:52px minmax(0,1fr) auto;row-gap:10px}
  .row p{grid-column:2/-1}
  /* careers tags carry stipend, duration and hours — they must be allowed to wrap */
  .row .tag{white-space:normal;text-align:right}}
@media (max-width:640px){
  /* two columns, tag on its own line — a nowrap tag in an auto column
     overflows the viewport on a phone, and body{overflow-x:hidden} hides
     the overflow by clipping the text rather than reflowing it */
  .row{grid-template-columns:52px minmax(0,1fr)}
  .row h3,.row p{grid-column:2}
  .row .tag{grid-column:2;justify-self:start;text-align:left;margin-top:4px}}

/* ---------------- process ---------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:0.5px solid var(--ash)}
@media (max-width:980px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.steps{grid-template-columns:1fr}}
.step{padding:clamp(22px,2.4vw,32px) clamp(18px,2vw,26px) clamp(28px,3vw,40px) 0;border-bottom:0.5px solid var(--ash)}
.step .n{font-family:var(--mono);font-size:11px;color:var(--verm-text);letter-spacing:.08em}
.step h3{font-size:18px;margin-top:16px}
.step p{font-size:14px;color:var(--iron-text);margin-top:10px}

/* ---------------- stat / status ---------------- */
.facts{display:grid;grid-template-columns:repeat(4,1fr);border-top:0.5px solid #2b2f35}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,1fr)}}
.fact{padding:26px 20px 26px 0;border-bottom:0.5px solid #2b2f35}
.fact dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--ash)}
.fact dd{font-family:var(--display);font-size:clamp(20px,2.2vw,26px);font-weight:500;margin-top:10px;letter-spacing:-0.02em}
.fact dd.sig{color:var(--vermillion)}

/* ---------------- contact ---------------- */
.big-cta{display:block;padding:clamp(40px,6vw,90px) 0;border-top:0.5px solid var(--ash);border-bottom:0.5px solid var(--ash)}
.big-cta h2{font-size:clamp(38px,8vw,110px);max-width:none;transition:color .5s var(--ease)}
.big-cta:hover h2{color:var(--vermillion)}
.contact-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
@media (max-width:760px){.contact-meta{grid-template-columns:1fr}}
.contact-meta dt{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--iron-text)}
.contact-meta dd{margin-top:8px;font-size:16px}
.contact-meta a{border-bottom:1px solid var(--vermillion)}

/* ---------------- footer ---------------- */
footer{border-top:0.5px solid var(--ash);padding:clamp(40px,5vw,64px) 0 40px;font-size:13.5px;color:var(--iron-text)}
footer .top{display:flex;justify-content:space-between;flex-wrap:wrap;gap:22px;align-items:flex-start}
footer .cols{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));gap:26px}
footer .cols h3.fh{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--iron-text);font-weight:400;margin-bottom:12px}
footer .cols a{display:block;color:var(--graphite);padding:3px 0}
footer .cols a:hover{color:var(--vermillion)}
footer .legal{margin-top:34px;max-width:78ch;line-height:1.7;font-size:12.5px}
footer .legal a{border-bottom:1px solid var(--ash)}
@media (max-width:640px){footer .cols{grid-template-columns:repeat(2,1fr)}}

/* ---------------- cursor ---------------- */
#cur,#curdot{position:fixed;top:0;left:0;pointer-events:none;z-index:90;border-radius:50%;
  mix-blend-mode:difference;will-change:transform}
#cur{width:34px;height:34px;border:1px solid #fff;margin:-17px 0 0 -17px;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease)}
#curdot{width:5px;height:5px;background:#fff;margin:-2.5px 0 0 -2.5px}
body.hov #cur{width:62px;height:62px;margin:-31px 0 0 -31px}
@media (hover:none),(pointer:coarse){#cur,#curdot{display:none}}

/* ---------------- intro reveal ---------------- */
html.lock,html.lock body{overflow:hidden}
#intro{position:fixed;inset:0;z-index:100;background:var(--bone);display:flex;align-items:center;justify-content:center}
#intro.done{opacity:0;filter:blur(8px);transition:opacity .7s var(--ease),filter .7s var(--ease);pointer-events:none}
.intro-stage{display:flex;align-items:center;gap:clamp(14px,2.2vw,26px)}
.intro-svg{width:clamp(90px,11vw,132px);height:auto;overflow:visible}
#intro.run .wheel{transform-origin:44% 50%;animation:wheelSettle 1.1s var(--ease) both}
#intro.run .rim,#intro.run .hub,#intro.run .arc{stroke-dashoffset:320;animation:strokeIn .9s var(--ease) .05s both}
#intro.run .dr{stroke-dashoffset:34;animation:strokeIn .5s var(--ease) both}
#intro.run .sig{transform-origin:44% 50%;animation:signalOut .55s var(--ease) 1.0s both}
#intro.run .hubdot{animation:popIn .3s var(--ease) .95s both}
#intro.run .enddot{animation:popIn .35s var(--ease) 1.45s both}
#intro.run .intro-word{animation:riseIn .7s var(--ease) 1.4s both}
#intro.run .intro-sub{animation:riseIn .7s var(--ease) 1.55s both}
.intro-type{overflow:hidden}
.intro-word{font-family:var(--display);font-weight:500;letter-spacing:-0.02em;
  font-size:clamp(34px,5.6vw,64px);line-height:1;color:var(--graphite)}
.intro-sub{font-family:var(--mono);font-size:clamp(8px,1vw,11px);letter-spacing:.09em;
  text-transform:uppercase;color:var(--iron-text);margin-top:11px}
@keyframes wheelSettle{from{transform:rotate(-38deg) scale(.86);opacity:0}to{transform:none;opacity:1}}
@keyframes strokeIn{to{stroke-dashoffset:0}}
@keyframes signalOut{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes popIn{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes riseIn{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}
.hubdot,.enddot{transform-box:fill-box;transform-origin:center}
@media (max-width:520px){.intro-stage{flex-direction:column;gap:16px;text-align:center}}

/* ---------------- legal pages ---------------- */
.legalpage{padding:150px 0 clamp(56px,8vw,96px);max-width:min(100%,860px)}
/* legal pages read as a centred document, not a column pinned to the left */
.legalpage h1{font-family:var(--display);font-weight:500;letter-spacing:-0.02em;font-size:clamp(32px,4.4vw,50px)}
.legalpage .updated{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--iron);margin-top:14px}
.legalpage article{max-width:none}
.legalpage h2{font-size:21px;margin-top:46px}
.legalpage p,.legalpage li{font-size:16px;color:#2b2f35;margin-top:14px}
.legalpage ul{margin-left:20px}
.legalpage a{border-bottom:1px solid var(--vermillion)}
.backlink{font-family:var(--mono);font-size:11px;letter-spacing:.07em;text-transform:uppercase;color:var(--iron-text);
  display:inline-block;margin-bottom:30px}
.backlink:hover{color:var(--vermillion)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important}
  .rv>*{transform:none}.fd{opacity:1;transform:none;filter:none}
  #intro{display:none}#cur,#curdot{display:none}
}

/* hero lockup — fills the empty upper band, never collides with the headline */
.hero{align-items:stretch}
.hero .wrap{display:flex;flex-direction:column;justify-content:space-between;flex:1}
.hero-logo{width:min(370px,56vw);height:auto;margin-bottom:clamp(28px,5vh,64px)}
.hero-body{width:100%}
@media (max-width:760px){.hero-logo{width:min(280px,68vw)}}
@media (max-height:680px){.hero-logo{width:min(240px,40vw)}}

/* utilities — replace inline style attributes so CSP can drop style-src 'unsafe-inline' */
.u-mb26{margin-bottom:26px}
.u-mb22{margin-bottom:22px}
.u-mt36{margin-top:36px}
.u-mt16{margin-top:16px}
.u-plain{text-transform:none}
.u-graphite{color:var(--graphite)}
.u-link{border-bottom:1px solid var(--vermillion)}

/* wide capability cell — spans the row so the grid never leaves an orphan */
.cell.wide{grid-column:1/-1;border-right:0}
.cell.wide p{max-width:76ch}

/* areas of focus */
.focusgrid{display:grid;grid-template-columns:repeat(4,1fr);border-top:0.5px solid var(--ash)}
@media (max-width:980px){.focusgrid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:520px){.focusgrid{grid-template-columns:1fr}}
.focus{padding:clamp(22px,2.4vw,30px) clamp(18px,2vw,26px) clamp(26px,3vw,34px) 0;
  border-bottom:0.5px solid var(--ash)}
.focus h3{font-size:18px;margin-top:14px}
.focus p{font-size:14px;color:var(--iron-text);margin-top:9px}

/* skip link — first stop for keyboard and screen-reader users */
.skip{position:absolute;left:-9999px;top:0;z-index:120;background:var(--graphite);color:var(--bone);
  padding:14px 20px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase}
.skip:focus{left:var(--gutter);top:12px}
.legalpage h3{font-size:17px;margin-top:30px;font-family:var(--display);font-weight:500;letter-spacing:-0.01em}

/* founder cards + timeline (About) */
.sub-h{font-size:clamp(20px,2.2vw,26px);margin-top:clamp(56px,7vw,84px);margin-bottom:24px}
.founders{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.5vw,28px);margin-top:clamp(44px,5vw,64px)}
@media (max-width:760px){.founders{grid-template-columns:1fr}}
.fcard{border:0.5px solid var(--ash);padding:clamp(22px,3vw,32px);transition:border-color .3s var(--ease)}
.fcard:hover{border-color:var(--graphite)}
.fcard h3{font-size:21px}
.fc-role{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;
  color:var(--iron-text);margin-top:10px;line-height:1.7}
.fc-bio{font-size:15px;color:#2b2f35;margin-top:18px}
.fc-meta{margin-top:22px;border-top:0.5px solid var(--ash)}
.fc-meta>div{display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;padding:11px 0;
  border-bottom:0.5px solid var(--ash);align-items:baseline}
@media (max-width:420px){.fc-meta>div{grid-template-columns:1fr;gap:3px}}
.fc-meta dt{font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--iron-text)}
.fc-meta dd{font-size:14.5px;color:#2b2f35}
.timeline{border-top:0.5px solid var(--ash)}
.tl{display:grid;grid-template-columns:130px minmax(0,1fr) auto;gap:clamp(14px,3vw,32px);
  padding:17px 0;border-bottom:0.5px solid var(--ash);align-items:baseline}
@media (max-width:640px){.tl{grid-template-columns:100px 1fr}.tl .tag{grid-column:2;justify-self:start;margin-top:6px}}
.tl .when{font-family:var(--mono);font-size:11px;color:var(--iron-text);letter-spacing:.04em}
.tl .what{font-size:16px}
.tl .tag{font-family:var(--mono);font-size:9.5px;letter-spacing:.07em;text-transform:uppercase;
  color:var(--iron-text);border:0.5px solid var(--ash);padding:4px 9px}
.tl .tag.on{color:var(--verm-text);border-color:var(--verm-text)}

/* currency preference — no prices, just what your quote will be denominated in */
.currency{margin-top:44px;padding-top:32px;border-top:0.5px solid var(--ash)}
.currency-label{margin-bottom:14px}
.currency-opts{display:flex;flex-wrap:wrap;gap:8px}
.currency .cbtn{font-family:var(--mono);font-size:12px;letter-spacing:.04em;padding:10px 15px;
  border:0.5px solid var(--ash);background:none;color:var(--iron-text);cursor:pointer;
  transition:color .3s var(--ease),border-color .3s var(--ease),background .3s var(--ease)}
.currency .cbtn:hover{color:var(--graphite);border-color:var(--graphite)}
.currency .cbtn.is-on{background:var(--graphite);border-color:var(--graphite);color:var(--bone)}
.currency-note{margin-top:16px;font-size:14px;color:var(--iron-text);max-width:64ch}
#cur-echo{color:var(--verm-text)}

/* language switcher — appears only when a second locale is registered */
.langsel{display:flex;gap:6px;align-items:center}
.langsel[hidden]{display:none}
.langsel button{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  background:none;border:0.5px solid var(--ash);color:var(--iron-text);padding:7px 10px;cursor:pointer;
  transition:color .3s,border-color .3s}
.langsel button:hover{color:var(--graphite);border-color:var(--graphite)}
.langsel button.is-on{background:var(--graphite);border-color:var(--graphite);color:var(--bone)}

/* ---------------- section backdrops ----------------
   Photographic texture behind four sections. Desaturated at build time and
   again in CSS, so the images read as tone inside the Graphite/Bone system
   rather than as photographs. Decorative only — empty alt, aria-hidden.
   Opacity is capped so the worst pixel still clears WCAG AA (4.5:1) against
   body copy: light sections stay above 5.3:1, the dark section above 4.6:1. */
.has-bg{overflow:hidden}
.has-bg>.wrap{position:relative;z-index:1}
.sec-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  pointer-events:none;-webkit-user-select:none;user-select:none;
  filter:grayscale(1) contrast(1.04);
  opacity:.34;mix-blend-mode:multiply;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 78%,transparent 100%)}
.dark .sec-bg{opacity:.52;mix-blend-mode:luminosity;
  -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0,#000 16%,#000 80%,transparent 100%)}
/* per-section tuning — the busier frames are held back a little */
#approach .sec-bg{opacity:.26}
#research .sec-bg{opacity:.36}
#capabilities .sec-bg{opacity:.38}
@media (max-width:640px){
  .sec-bg{opacity:.24}.dark .sec-bg{opacity:.40}
  #approach .sec-bg{opacity:.18}#capabilities .sec-bg{opacity:.28}#research .sec-bg{opacity:.26}}
@media (prefers-contrast:more){.sec-bg{display:none}}
@media print{.sec-bg{display:none}}
/* footer: social handles that exist as labels, not links, until the accounts do */
footer .cols .soon{display:block;color:var(--iron);cursor:default;font-size:13.5px;padding:3px 0}