/* Tactile Design website V5 (from V4: work cards from V3 A, production from V3 C, industries, team)
   Layout from the drawing sheet: white paper, hairlines, a 12-column grid, renders on white.
   Type from the index: Archivo at normal width and medium weight, set large and tight. One dark band. */
@font-face{font-family:"Archivo";src:url(../fonts/archivo-var.woff2) format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plexmono-400.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url(../fonts/plexmono-500.woff2) format("woff2");font-weight:500;font-display:swap}

:root{
  --paper:#FFFFFF;--mist:#F5F5F2;--stone:#ECECE7;--line:#E4E4DE;--line-2:#C9C9C1;
  --ink:#16181A;--ink-2:#474A4D;--ink-3:#73767A;--signal:#FF6B00;--signal-ink:#FF6B00;
  --dark:#111213;--dark-ink:#EDEDE8;--dark-ink-2:#B4B7BA;
  --mark-on:#FF6B00;--mark-off:#BDBDB4;--br-on:#16181A;--br-off:#CFCFC7;--br-sig:#FF6B00;
  --f-sans:"Archivo","Helvetica Neue",Arial,system-ui,sans-serif;
  --f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --ease:cubic-bezier(.2,.7,.2,1);
  --gutter:clamp(16px,4vw,64px);--maxw:1440px;--gap:clamp(16px,1.8vw,28px);--hd-h:66px;--sec:clamp(88px,10vw,160px);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f-sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
img,video,svg,canvas{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
p,h1,h2,h3,figure,dl,dd,ul,ol{margin:0;padding:0}
ul,ol{list-style:none}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
[hidden]{display:none!important}
[id]{scroll-margin-top:calc(var(--hd-h) + 8px)}
:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.skip{position:absolute;left:12px;top:-80px;z-index:200;background:var(--ink);color:#fff;padding:10px 14px;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{max-width:var(--maxw);margin-inline:auto;padding-left:max(var(--gutter),env(safe-area-inset-left,0px));padding-right:max(var(--gutter),env(safe-area-inset-right,0px))}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important}}

/* type */
.h1{font-weight:500;font-size:clamp(2.75rem,1.05rem + 5vw,6.1rem);line-height:.94;letter-spacing:-.052em;text-wrap:balance}
.h2{font-weight:500;font-size:clamp(2.15rem,1.2rem + 2.9vw,4.1rem);line-height:.98;letter-spacing:-.045em;text-wrap:balance}
.h3{font-weight:500;font-size:clamp(1.45rem,1.15rem + .8vw,1.95rem);line-height:1.08;letter-spacing:-.03em;text-wrap:balance}
.lead{font-size:clamp(1.06rem,1rem + .32vw,1.28rem);line-height:1.5;color:var(--ink-2);max-width:32em}

/* buttons and links */
.btn{display:inline-flex;align-items:center;gap:12px;min-height:50px;padding:0 22px;background:var(--ink);color:#fff;border:0;border-radius:2px;font-size:15px;font-weight:600;text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),color .25s var(--ease)}
.btn:hover{background:var(--signal);color:var(--ink)}
.arr{width:15px;height:15px;flex:none;transition:transform .25s var(--ease)}
.btn:hover .arr,a:hover>.arr{transform:translateX(3px)}
.link{display:inline-flex;align-items:center;min-height:44px;font-weight:600;font-size:15px;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:var(--line-2);transition:text-decoration-color .2s}
.link:hover{text-decoration-color:var(--signal)}

/* header: the drawing-sheet border, then the bar */
.hd{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:rgba(255,255,255,.96);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-bottom:1px solid transparent;transition:border-color .3s}
.hd.is-scrolled{border-bottom-color:var(--line)}
.ruler{border-bottom:1px solid var(--line)}
.ruler-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));height:20px;border-inline:1px solid var(--line-2)}
.ruler-in span{display:flex;align-items:center;justify-content:center;font-family:var(--f-mono);font-size:9.5px;color:#A3A6A8;border-left:1px solid var(--line);position:relative}
.ruler-in span:first-child{border-left:0}
.ruler-in span::after{content:"";position:absolute;left:50%;bottom:0;width:1px;height:4px;background:var(--line-2)}
.hd-row{display:flex;align-items:center;gap:32px;height:64px}
.brand{display:inline-flex;align-items:center;gap:12px;text-decoration:none;color:var(--ink);min-height:44px}
.mark{width:22px;height:22px;flex:none}
.wm{font-stretch:125%;font-size:15.5px;line-height:1;letter-spacing:.04em;text-transform:uppercase;white-space:nowrap}
.wm b{font-weight:820}.wm span{font-weight:300}
.nav{display:none;margin-left:auto;gap:32px}
.nav a{font-size:15px;font-weight:500;color:var(--ink-2);text-decoration:none;padding-block:10px;transition:color .2s}
.nav a:hover{color:var(--ink)}
.hd-cta{display:none;align-items:center;gap:10px;font-size:15px;font-weight:600;text-decoration:none;padding:10px 0 10px 28px;border-left:1px solid var(--line)}
.hd-cta:hover{color:var(--signal-ink)}
.menu-btn{margin-left:auto;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 4px 0 12px;background:none;border:0;font-weight:600;font-size:15px}
.menu-btn i{display:block;width:18px;height:8px;border-block:1.5px solid var(--ink)}
.mnav{border-top:1px solid var(--line);background:var(--paper)}
.mnav .wrap{display:flex;flex-direction:column;padding-block:4px 18px}
.mnav a{display:flex;align-items:center;min-height:56px;border-bottom:1px solid var(--line);text-decoration:none;font-weight:500;font-size:22px;letter-spacing:-.025em}
@media (min-width:960px){.nav,.hd-cta{display:inline-flex}.menu-btn,.mnav{display:none!important}}
@media (max-width:640px){.ruler-in span:nth-child(even){font-size:0}}

/* hero */
.hero{padding-top:clamp(36px,5vw,80px)}
.hero-grid{display:grid;gap:40px var(--gap)}
.hero-copy{display:flex;flex-direction:column;gap:clamp(22px,2.4vw,32px);min-width:0}
.cta-row{display:flex;flex-wrap:wrap;align-items:center;gap:12px 28px}
.hero-fig{min-width:0}
.hero-frame{position:relative;aspect-ratio:1/1;max-width:100%;background:#fff}
.hero-frame::after{content:"";position:absolute;inset:0;pointer-events:none;--t:14px;--c:var(--line-2);
  background:linear-gradient(var(--c),var(--c)) top left/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px var(--t) no-repeat,
  linear-gradient(var(--c),var(--c)) top right/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px var(--t) no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px var(--t) no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px var(--t) no-repeat}
.hero-frame video,.hero-frame img{width:100%;height:100%;object-fit:contain}
.dim{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;color:var(--ink-3);overflow:visible}
.dim .ext{stroke:var(--line-2);stroke-width:1.2}
.dim .dl{stroke:var(--ink-3);stroke-width:1.2}
.dim [data-dim-box] rect{fill:#fff}
.dim text{font-family:var(--f-mono);font-size:21px;fill:var(--ink-2);letter-spacing:.05em}
.hero-fig figcaption{display:flex;flex-wrap:wrap;align-items:center;gap:4px 20px;margin-top:10px;font-size:14px;color:var(--ink-3)}
.hero-fig figcaption .link{margin-left:auto;font-size:14px}
@media (min-width:960px){
  .hero-grid{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}
  .hero-copy{grid-column:1 / span 6;padding-right:clamp(0px,2vw,40px)}
  .hero-fig{grid-column:7 / span 6}
}

/* sections */
.sec{padding-top:var(--sec)}
.sec-head{display:grid;gap:16px;margin-bottom:clamp(40px,5vw,72px)}
.sec-head p{font-size:clamp(1.02rem,.98rem + .2vw,1.15rem);color:var(--ink-3);max-width:28em}
.sec-side{display:grid;gap:14px}
.sec-head .sec-note{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--ink-3)}
.sec-note::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--signal);flex:none}
@media (min-width:960px){.sec-head{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}.sec-head .h2{grid-column:1 / span 7}.sec-head>p,.sec-head .sec-side{grid-column:9 / span 4}}

/* selected work: sheets with a title block under each image */
.work{display:grid;gap:clamp(40px,4.5vw,64px) var(--gap)}
.wk{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.wk-media{position:relative;display:block;overflow:hidden;aspect-ratio:4/3;max-width:100%}
.wk-media::after{content:"";position:absolute;inset:0;outline:1px solid var(--line-2);outline-offset:-1px;pointer-events:none}
.wk-img{position:absolute;inset:0;display:block;background:#fff}
.wk-img.is-photo{background:var(--stone)}
.wk-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)}
.wk-img.is-white img{object-fit:contain;padding:6%}
.wk-img.is-bleed img{padding:2%}
.wk-tb{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 14px 14px 18px;border:1px solid var(--line-2);border-top:0}
.wk-t{font-weight:500;font-size:clamp(1.15rem,1.05rem + .4vw,1.45rem);line-height:1.15;letter-spacing:-.025em;text-wrap:balance;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;transition:text-decoration-color .25s}
.wk-go{display:inline-flex;align-items:center;gap:8px;flex:none;min-height:38px;padding:0 14px;border:1px solid var(--line-2);border-radius:2px;font-size:14px;font-weight:600;white-space:nowrap;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.wk-d{padding:12px 2px 0;font-size:15px;line-height:1.5;color:var(--ink-3);max-width:34em}
.wk:hover .wk-t{text-decoration-color:var(--signal)}
.wk:hover .wk-go{background:var(--ink);border-color:var(--ink);color:#fff}
.wk:hover .wk-go .arr{transform:translateX(3px)}
@media (hover:hover){.wk:hover .wk-img img{transform:scale(1.025)}}
.wk-panel{display:flex;flex-direction:column;align-items:flex-start;gap:18px;padding:20px 18px 18px;border:1px solid var(--line-2);border-top:0}
.wk-pt{display:flex;flex-direction:column;gap:10px}
.wk-feat .wk-media{display:block}
.wk-feat .wk-img img{transition:transform .7s var(--ease),opacity .25s var(--ease)}
.wk-feat .wk-media:hover .wk-img img{transform:scale(1.02)}
.wk-feat .wk-t{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px;text-decoration-color:transparent;font-size:clamp(1.5rem,1.2rem + 1vw,2.2rem);line-height:1.05;letter-spacing:-.035em}
.wk-feat .wk-t:hover{text-decoration-color:var(--signal)}
.wk-feat .wk-d{padding:0;font-size:16px;color:var(--ink-2)}
.wk-ths{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-self:stretch}
.wk-th{display:block;width:100%;padding:0;border:0;background:#fff;outline:1px solid var(--line);outline-offset:-1px;opacity:.75;cursor:pointer;transition:opacity .2s,outline-color .2s}

.wk-th:hover{opacity:1}
.wk-th[aria-current="true"]{opacity:1;outline:1.5px solid var(--ink);outline-offset:-1.5px}
.wk-feat .wk-go:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.wk-feat .wk-go:hover .arr{transform:translateX(3px)}
@media (min-width:640px){.work{grid-template-columns:repeat(2,minmax(0,1fr))}.wk-feat{grid-column:1 / -1}.wk:not(.wk-feat) .wk-t{display:flex;align-items:center;min-height:2.3em}}
@media (min-width:960px){
  .work{grid-template-columns:repeat(3,minmax(0,1fr))}
  .wk-feat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}
  .wk-feat .wk-media{grid-column:1 / span 8;aspect-ratio:auto;height:clamp(400px,40vw,580px)}
  .wk-feat .wk-panel{grid-column:9 / span 4;justify-content:space-between;padding:22px 0 4px;border:0;border-top:1px solid var(--ink)}
  .wk-ths{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
}

/* what we do: the design disciplines as rows, the way a drawing lists its parts */
.design{border-top:1px solid var(--ink)}
.ds{display:grid;gap:12px var(--gap);padding-block:28px 32px;border-bottom:1px solid var(--line)}
.ds h3{font-weight:500;font-size:clamp(1.45rem,1.1rem + 1vw,2.1rem);line-height:1.08;letter-spacing:-.035em;text-wrap:balance}
.ds-p{font-size:16px;line-height:1.6;color:var(--ink-2);max-width:34em}
.ds-work{font-size:14px;color:var(--ink-3)}
.ds-work a{color:var(--ink);text-underline-offset:4px;text-decoration-color:var(--line-2)}
.ds-work a:hover{text-decoration-color:var(--signal)}
.ds-fig{position:relative;aspect-ratio:3/2;max-width:100%;overflow:hidden;background:#fff;outline:1px solid var(--line);outline-offset:-1px;margin-top:8px}
.ds-fig.is-photo{background:var(--stone)}
.ds-fig img{width:100%;height:100%;object-fit:cover}
.ds-fig.is-white img{object-fit:contain;padding:8%}
.ds-fig.is-floor img{padding:5% 8% 0;object-position:center bottom}
@media (min-width:720px) and (max-width:959px){.ds{grid-template-columns:minmax(0,1fr) minmax(0,14em)}.ds-fig{grid-column:2;grid-row:1 / span 3;margin-top:0}}
@media (min-width:960px){
  .ds{grid-template-columns:repeat(12,minmax(0,1fr));grid-template-rows:auto 1fr;align-items:start;row-gap:14px;padding-block:32px}
  .ds h3{grid-column:1 / span 4;grid-row:1 / span 2;padding-top:2px;padding-right:clamp(16px,2.5vw,48px)}
  .ds-p{grid-column:5 / span 4;grid-row:1;padding-top:6px}
  .ds-work{grid-column:5 / span 4;grid-row:2;align-self:start}
  .ds-fig{grid-column:10 / span 3;grid-row:1 / span 2;margin-top:0}
}

/* industries: simple cards with a thumbnail */
.inds{display:grid;gap:36px var(--gap)}
.ind{display:flex;flex-direction:column;min-width:0}
.ind-fig{position:relative;aspect-ratio:4/3;overflow:hidden;background:#fff;outline:1px solid var(--line);outline-offset:-1px}
.ind-fig.is-photo{background:var(--stone)}
.ind-fig img{width:100%;height:100%;object-fit:cover}
.ind-fig.is-white img{object-fit:contain;padding:8%}
.ind-fig.is-tight img{padding:3%}
.ind h3{margin-top:18px;font-weight:500;font-size:clamp(1.25rem,1.1rem + .45vw,1.5rem);line-height:1.12;letter-spacing:-.025em;text-wrap:balance}
.ind p{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (min-width:640px){.inds{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1080px){.inds{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* production: four stages on one line, then the manufacturers */
.stages{display:grid;gap:30px;margin-left:4px;padding-left:26px;border-left:1px solid var(--ink)}
.stages li{position:relative}
.stages li::before{content:"";position:absolute;left:-31px;top:9px;width:9px;height:9px;border-radius:50%;background:var(--signal)}
.stages h3{font-weight:500;font-size:clamp(1.3rem,1.12rem + .55vw,1.65rem);line-height:1.1;letter-spacing:-.03em}
.stages p{margin-top:10px;font-size:15.5px;line-height:1.55;color:var(--ink-2);max-width:24em}
@media (min-width:1080px){.stages{grid-template-columns:repeat(4,minmax(0,1fr));gap:28px var(--gap);margin-left:0;padding-left:0;border-left:0;border-top:1px solid var(--ink)}.stages li{padding-top:26px}.stages li::before{left:0;top:-5px}}
.nw{display:grid;gap:36px var(--gap);margin-top:clamp(64px,7vw,112px);padding-top:28px;border-top:1px solid var(--line)}
.nw-t p{margin-top:14px;color:var(--ink-2);max-width:30em}
.nw-cols{display:grid;gap:28px var(--gap)}
.nw-col h4{display:flex;flex-direction:column;gap:2px;padding-bottom:10px;border-bottom:1px solid var(--ink);font-size:16px;font-weight:600}
.nw-col h4 small{font-size:13.5px;font-weight:400;color:var(--ink-3)}
.nw-col li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
.nw-run{margin-top:clamp(28px,3vw,40px)}
.nw-run h4{margin-bottom:12px;font-size:14px;font-weight:500;color:var(--ink-3)}
.nw-run ul{display:flex;flex-wrap:wrap;gap:8px}
.nw-run li{padding:7px 12px;border:1px solid var(--line-2);border-radius:2px;font-size:14.5px;color:var(--ink)}
.nw-run li,.inv-tools li{transition:border-color .2s var(--ease)}
.nw-run li:hover{border-color:var(--signal)}
.inv-tools li:hover{border-color:var(--signal)}
@media (min-width:560px){.nw-cols{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:960px){.nw{grid-template-columns:repeat(12,minmax(0,1fr))}.nw-t{grid-column:1 / span 5}.nw-cols{grid-column:7 / span 6}.nw-flip .nw-t{grid-column:8 / span 5;grid-row:1}.nw-flip .nw-cols{grid-column:1 / span 6;grid-row:1}}

/* team */
.team{display:grid;gap:0 var(--gap);border-top:1px solid var(--ink)}
.pp{padding:24px 0 28px;border-bottom:1px solid var(--line)}
.pp h3{font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.2vw,2.3rem);line-height:1.05;letter-spacing:-.04em}
.pp-role{margin-top:8px;font-size:15px;font-weight:600}
.pp-text{margin-top:8px;font-size:15px;line-height:1.55;color:var(--ink-2);max-width:24em}
@media (min-width:760px){.team{grid-template-columns:repeat(3,minmax(0,1fr))}.pp{border-bottom:0}}

/* the one dark band */
.inv{position:relative;margin-top:var(--sec);background:var(--dark);color:var(--dark-ink);overflow:hidden;isolation:isolate}
.inv-img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;object-position:62% 50%}
.inv-in{position:relative;display:flex;flex-direction:column;gap:18px;padding-block:40px 64px}
.inv-label{font-size:14px;color:var(--dark-ink-2)}
.inv .h2{color:#fff;max-width:11em}
.inv-in>p{color:var(--dark-ink-2);max-width:31em}
.inv .inv-files{color:var(--dark-ink);font-size:15.5px}
.inv-tools{margin-top:10px;max-width:36em}
.inv-tools h3{margin-bottom:12px;font-size:14px;font-weight:500;color:var(--dark-ink-2)}
.inv-tools ul{display:flex;flex-wrap:wrap;gap:8px}
.inv-tools li{padding:7px 12px;border:1px solid rgba(237,237,232,.28);border-radius:2px;font-size:14px;color:var(--dark-ink);background:rgba(17,18,19,.35)}
@media (min-width:960px){
  .inv{min-height:clamp(560px,50vw,760px);display:flex;align-items:center}
  .inv-img{position:absolute;inset:0;height:100%;aspect-ratio:auto;z-index:-2;object-position:70% 50%}
  .inv::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(17,18,19,.94) 0%,rgba(17,18,19,.82) 34%,rgba(17,18,19,0) 62%)}
  .inv-in{width:100%;padding-block:96px}
  .inv-flip::before{background:linear-gradient(270deg,rgba(17,18,19,.95) 0%,rgba(17,18,19,.84) 38%,rgba(17,18,19,0) 66%)}
  .inv-flip .inv-img{object-position:30% 50%}
  .inv-flip .inv-in{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);row-gap:18px;align-content:center}
  .inv-flip .inv-in>*{grid-column:7 / span 6}
}
.inv-flip .inv-img{transform:scaleX(-1)}

/* contact */
.contact{padding-bottom:var(--sec)}
.ct{display:grid;gap:48px var(--gap)}
.ct-l{display:flex;flex-direction:column;gap:22px;min-width:0}
.direct{display:grid;max-width:32em}
.direct{margin-top:8px;border-top:1px solid var(--ink)}
.direct div{display:grid;grid-template-columns:minmax(0,9em) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.direct dt{font-size:14px;color:var(--ink-3);padding-top:1px}
.direct dd{font-size:16px;color:var(--ink)}
.ct-r{min-width:0}
.ct-fig{margin-top:clamp(28px,3vw,44px);max-width:32em}
.ct-fig img{width:100%;height:auto;max-height:360px;object-fit:contain;object-position:center bottom}
.direct a{text-decoration:none}
.direct a:hover{color:var(--signal-ink)}
.how{margin-bottom:clamp(56px,6vw,96px)}
.how-t{margin-bottom:16px;font-size:14px;font-weight:500;color:var(--ink-3)}
.steps{display:grid;gap:0 var(--gap)}
.steps li{padding:16px 0 18px;border-top:1px solid var(--ink)}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps h4{margin:0;font-size:16px;font-weight:600}
.steps p{margin-top:4px;font-size:15px;line-height:1.55;color:var(--ink-2)}
@media (min-width:1080px){.steps{grid-template-columns:repeat(5,minmax(0,1fr))}.steps li{padding-top:14px}.steps li:last-child{border-bottom:0}}
.form{display:grid;gap:18px;padding:clamp(20px,3vw,36px);background:var(--mist)}
.row2,[data-fields]{display:grid;gap:18px}
.form [hidden]{display:none!important}
@media (min-width:720px){.row2{grid-template-columns:repeat(2,minmax(0,1fr))}}
.field{display:flex;flex-direction:column;gap:7px;min-width:0}
.field label{font-size:14px;font-weight:600}
.opt{font-weight:400;color:var(--ink-3)}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 14px;background:#fff;border:1px solid var(--line-2);border-radius:2px;font-size:16px;line-height:1.4}
.field textarea{min-height:128px;resize:vertical}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--signal);outline-offset:0;border-color:var(--signal)}
.hint{font-size:13px;color:var(--ink-3)}
.form .btn{justify-self:start;min-width:160px;justify-content:center}
.field [aria-invalid=true]{border-color:var(--signal);box-shadow:inset 0 0 0 1px var(--signal)}
.form-status{font-size:14.5px;line-height:1.5;padding:12px 14px;border-left:3px solid var(--signal);background:#fff}
@media (min-width:960px){.ct{grid-template-columns:repeat(12,minmax(0,1fr))}.ct-l{grid-column:1 / span 4}.ct-r{grid-column:6 / span 7}}

/* questions */
.faq{display:grid;gap:28px var(--gap)}
.faq-head p{margin-top:16px;font-size:clamp(1.02rem,.98rem + .2vw,1.15rem);color:var(--ink-3);max-width:24em}
.faq-list{border-top:1px solid var(--ink)}
.faq-list details{border-bottom:1px solid var(--line)}
.faq-list summary{display:flex;justify-content:space-between;align-items:center;gap:20px;min-height:60px;padding:14px 0;cursor:pointer;list-style:none;font-size:clamp(1.05rem,1rem + .25vw,1.2rem);font-weight:500;letter-spacing:-.015em}
.faq-list summary::-webkit-details-marker{display:none}
.faq-list summary i{position:relative;width:14px;height:14px;flex:none}
.faq-list summary i::before,.faq-list summary i::after{content:"";position:absolute;left:0;top:6.5px;width:14px;height:1.5px;background:var(--ink);transition:transform .25s var(--ease)}
.faq-list summary i::after{transform:rotate(90deg)}
.faq-list details[open] summary i::after{transform:rotate(0)}
.faq-list summary:hover span{color:var(--signal-ink)}
.faq-list details p{padding:0 0 18px;max-width:40em;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
@media (min-width:960px){.faq{grid-template-columns:repeat(12,minmax(0,1fr))}.faq-head{grid-column:1 / span 4}.faq-list{grid-column:6 / span 7}}

/* footer */
.ft{border-top:1px solid var(--line);padding-block:clamp(48px,6vw,88px) 28px}
.braille{width:100%;height:auto;touch-action:pan-y}
.ft-row{display:grid;gap:20px var(--gap);margin-top:clamp(36px,5vw,64px);padding-top:24px;border-top:1px solid var(--line);font-size:14.5px;color:var(--ink-2)}
.ft-row nav{display:flex;gap:22px}
.ft-row nav a{text-decoration:none;color:var(--ink)}
.ft-row nav a:hover{color:var(--signal-ink)}
.ft-contact{display:flex;flex-wrap:wrap;gap:6px 24px}
.ft-contact a{text-decoration:none;color:var(--ink)}
.ft-contact a:hover{color:var(--signal-ink)}
@media (min-width:900px){.ft-row{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center}.ft-row>:nth-child(1){grid-column:1 / span 4}.ft-row>:nth-child(2){grid-column:5 / span 5}.ft-row>:nth-child(3){grid-column:10 / span 3;justify-content:flex-end}}
.legal{display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 20px;margin-top:32px;font-size:13px;color:var(--ink-3)}

/* project page */
.prod{display:grid;gap:36px var(--gap);padding-block:clamp(20px,3vw,40px) 0}
.prod-gal,.prod-info{min-width:0}
.gal-stage{position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:#fff;outline:1px solid var(--line);outline-offset:-1px;touch-action:pan-y}
.gal-stage.is-dark{background:var(--stone)}
.gal-img{position:relative;width:100%;height:100%;object-fit:contain;cursor:zoom-in;transition:opacity .25s var(--ease)}
.gal-bg{position:absolute;inset:-60px;background-size:cover;background-position:center;filter:blur(40px) brightness(.94);pointer-events:none}
.gal-stage.is-white .gal-bg{display:none}
.gal-stage.is-white .gal-img{padding:4%}
.gal-stage.is-loading .gal-img{opacity:.35}
.gal-zoom,.gal-prev,.gal-next{position:absolute;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-2);border-radius:2px;background:rgba(255,255,255,.9);color:var(--ink);opacity:0;transition:opacity .2s}
.gal-prev{left:12px;top:50%;transform:translateY(-50%)}
.gal-next{right:12px;top:50%;transform:translateY(-50%)}
.gal-zoom{right:12px;top:12px}
.gal-zoom svg,.gal-prev svg,.gal-next svg{width:18px;height:18px}
.gal-stage:hover .gal-zoom,.gal-stage:hover .gal-prev,.gal-stage:hover .gal-next,.gal-stage :focus-visible{opacity:1}
@media (hover:none){.gal-zoom,.gal-prev,.gal-next{opacity:1}}
.gal-bar{display:flex;justify-content:space-between;gap:16px;align-items:baseline;padding-top:10px;font-size:14px;color:var(--ink-3)}
.gal-count{font-family:var(--f-mono);font-size:12px;white-space:nowrap}
.gal-count span{color:var(--ink)}
.gal-thumbs{display:flex;gap:8px;margin-top:14px;padding:2px 2px 10px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.gal-thumbs li{flex:0 0 clamp(68px,7vw,96px);scroll-snap-align:start}
.gal-ti{display:block;width:100%;aspect-ratio:4/3;background-repeat:no-repeat;background-color:#fff}
.gal-t{display:block;width:100%;padding:0;border:0;background:#fff;opacity:.7;outline:1px solid var(--line);outline-offset:-1px;transition:opacity .2s}

.gal-t:hover{opacity:1}
.gal-t[aria-current="true"]{opacity:1;outline:1.5px solid var(--ink);outline-offset:-1.5px}
.back{display:inline-flex;align-items:center;gap:8px;min-height:40px;font-size:14px;color:var(--ink-3);text-decoration:none}
.back:hover{color:var(--ink)}
.arr-back{transition:transform .25s var(--ease)}
.back:hover .arr-back{transform:translateX(-3px)}
.p-title{margin-top:10px;font-weight:500;font-size:clamp(2.1rem,1.5rem + 1.9vw,3.3rem);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.p-angle{margin-top:14px;font-size:clamp(1.08rem,1rem + .3vw,1.25rem);line-height:1.45;color:var(--ink)}
.p-intro{margin-top:16px;font-size:16px;line-height:1.6;color:var(--ink-2)}
.p-nums{margin-top:26px;border-top:1px solid var(--ink)}
.p-nums li{display:flex;flex-direction:column;gap:3px;padding:12px 0 13px;border-bottom:1px solid var(--line)}
.p-nums b{font-weight:500;font-size:1.75rem;line-height:1;letter-spacing:-.035em;white-space:nowrap}
.p-nums span{font-size:14.5px;line-height:1.4;color:var(--ink-2)}
.p-facts{margin-top:22px}
.p-facts div{display:grid;grid-template-columns:minmax(0,5.6em) minmax(0,1fr);gap:16px;padding:7px 0}
.p-facts dt{font-size:14px;color:var(--ink-3)}
.p-facts dd{font-size:14.5px;color:var(--ink)}
.p-cta{display:flex;flex-wrap:wrap;align-items:center;gap:14px 26px;margin-top:28px}
.btn-dl{min-height:58px;padding:0 22px 0 18px;white-space:normal;text-align:left}
.btn-dl>span{display:flex;flex-direction:column;line-height:1.2}
.btn-dl small{font-size:12.5px;font-weight:400;opacity:.75;margin-top:3px}
.arr-d{width:18px;height:18px;flex:none}
.p-note{margin-top:20px;font-size:13.5px;line-height:1.45;color:var(--ink-3)}
@media (min-width:1080px){
  .prod{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .prod-gal{grid-column:1 / span 7;position:sticky;top:calc(var(--hd-h) + 20px)}
  .prod-info{grid-column:9 / span 4}
}

/* project page: breadcrumb, brief, numbers band, chapters */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding-top:clamp(16px,2vw,28px);font-size:14px;color:var(--ink-3)}
.crumb a{color:var(--ink-2);text-decoration:none}
.crumb a:hover{color:var(--ink)}
.prod{padding-top:clamp(14px,1.6vw,24px)}
.p-kicker{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-3)}
.prod-info .p-title{margin-top:12px}
.p-brief{margin-top:26px;border-top:1px solid var(--ink)}
.p-brief div{display:grid;grid-template-columns:minmax(0,6.2em) minmax(0,1fr);gap:16px;padding:12px 0;border-bottom:1px solid var(--line)}
.p-brief dt{font-size:14px;color:var(--ink-3);padding-top:1px}
.p-brief dd{font-size:15px;line-height:1.5;color:var(--ink)}
.band{margin-top:clamp(72px,8vw,128px)}
.band ul{display:grid;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.band li{display:flex;flex-direction:column;gap:8px;padding:22px 0 24px}
.band li+li{border-top:1px solid var(--line)}
.band b{font-weight:500;font-size:clamp(2.4rem,1.6rem + 2.4vw,3.8rem);line-height:1;letter-spacing:-.045em;white-space:nowrap}
.band span{font-size:15px;line-height:1.45;color:var(--ink-2);max-width:18em}
@media (min-width:760px){.band ul{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}.band li+li{border-top:0;border-left:1px solid var(--line);padding-left:var(--gap)}}
.chs{padding-top:clamp(40px,5vw,80px)}
.ch{display:grid;gap:28px var(--gap);padding-block:clamp(56px,7vw,104px);border-top:1px solid var(--line)}
.ch:first-child{border-top:0}
.ch-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.ch-t{font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.5rem);line-height:1.04;letter-spacing:-.035em;text-wrap:balance}
.ch-text>p{color:var(--ink-2);max-width:30em}
.ch-media{min-width:0}
@media (min-width:960px){
  .ch{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .ch-text{grid-column:1 / span 4;position:sticky;top:calc(var(--hd-h) + 32px)}
  .ch-media{grid-column:6 / span 7}
  .ch-flip .ch-text{grid-column:9 / span 4;grid-row:1}
  .ch-flip .ch-media{grid-column:1 / span 7;grid-row:1}
}

/* highlights */
.hls{padding-top:var(--sec)}
.hl{display:grid;gap:28px var(--gap);padding-block:clamp(48px,6vw,88px);border-top:1px solid var(--line)}
.hl-text{display:flex;flex-direction:column;gap:14px;min-width:0}
.hl-text>p{color:var(--ink-2);max-width:30em}
.hl-media{min-width:0;display:flex;flex-direction:column;gap:var(--gap)}
@media (min-width:960px){
  .hl{grid-template-columns:repeat(12,minmax(0,1fr));align-items:start}
  .hl-text{grid-column:1 / span 4;position:sticky;top:calc(var(--hd-h) + 32px)}
  .hl-media{grid-column:6 / span 7}
  .hl-flip .hl-text{grid-column:9 / span 4;grid-row:1}
  .hl-flip .hl-media{grid-column:1 / span 7;grid-row:1}
}
.hl-figs{display:grid;gap:var(--gap)}
.hl-figs.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.hl-figs.three{grid-template-columns:repeat(2,minmax(0,1fr))}
.hl-figs.three>.fig:first-child{grid-column:1 / -1}
.fig{min-width:0}
.fig-a{position:relative;display:block;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:#fff;outline:1px solid var(--line);outline-offset:-1px;cursor:zoom-in}
.fig.is-photo .fig-a{background:var(--stone)}
.fig-a img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.fig.is-white .fig-a img{object-fit:contain;padding:5%}
.fig.is-bleed .fig-a img{padding:0}
.fig-a:hover img{transform:scale(1.02)}
.hl-figs.one .fig-a,.hl-figs.three>.fig:first-child .fig-a{aspect-ratio:16/10}
.fig figcaption{margin-top:9px;font-size:13.5px;line-height:1.4;color:var(--ink-3)}
.fig.has-co .fig-a{display:flex;justify-content:center;align-items:center;aspect-ratio:auto!important;outline:0;background:transparent}
.co-wrap{position:relative;display:inline-block;max-width:100%}
.co-wrap img{display:block;width:auto!important;height:auto!important;max-width:100%;max-height:78vh;padding:0!important;object-fit:fill!important;transform:none!important}
.co-set{position:absolute;inset:0;pointer-events:none}
.co{position:absolute;transform:translate(-50%,-50%);display:grid;place-items:center;width:24px;height:24px;border:1px solid var(--ink);border-radius:50%;background:#fff;font-family:var(--f-mono);font-size:11px;color:var(--ink);box-shadow:0 0 0 3px rgba(255,255,255,.6)}
.legend{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 16px;margin-top:6px;border-top:1px solid var(--line);padding-top:10px}
.legend li{display:flex;gap:10px;align-items:center;font-size:14px;color:var(--ink-2);padding:3px 0}
.legend li>span:first-child{display:inline-grid;place-items:center;width:20px;height:20px;border:1px solid var(--ink-3);border-radius:50%;font-family:var(--f-mono);font-size:10px;color:var(--ink);flex:none}
.key{display:flex;gap:18px;font-size:13.5px;color:var(--ink-3)}
.key>span{display:inline-flex;align-items:center;gap:8px}
.key i{width:10px;height:10px;border-radius:50%}
.vids{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.vid figcaption{margin-top:8px;font-size:13.5px;color:var(--ink-3)}
.vloop{position:relative}
.vid .vloop{aspect-ratio:4/3;background:#F8F8F8;outline:1px solid var(--line);outline-offset:-1px;overflow:hidden}
.vloop video{width:100%;height:100%;object-fit:cover}
.vtoggle{position:absolute;right:10px;bottom:10px;width:32px;height:32px;display:grid;place-items:center;border:0;border-radius:2px;background:rgba(22,24,26,.6);color:#fff;opacity:.8}
.vtoggle:hover{opacity:1}
.vtoggle svg{width:11px;height:11px}
@media (max-width:560px){.hl-figs.two,.vids{grid-template-columns:minmax(0,1fr)}.legend{grid-template-columns:minmax(0,1fr)}}

/* all projects: in the breadcrumb row and beside the next project */
.all-btn{display:inline-flex;align-items:center;gap:9px;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:2px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:none;white-space:nowrap;transition:background-color .25s var(--ease),border-color .25s var(--ease),color .25s var(--ease)}
.all-btn svg{width:14px;height:14px;flex:none}
.all-btn:hover{background:var(--ink);border-color:var(--ink);color:#fff}
.crumb .all-btn{margin-left:auto;min-height:36px;font-size:13.5px}

/* ballooned figures: the parts list beside the drawing */
.ch-co .legend{grid-template-columns:minmax(0,1fr);gap:0;margin-top:10px;padding-top:0;border-top:1px solid var(--ink)}
.ch-co .legend li{gap:14px;padding:9px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink)}
.ch-co .legend li>span:first-child{width:24px;height:24px;border-color:var(--ink);font-size:11px}
@media (min-width:960px){.ch-co{align-items:center}.ch-co .ch-text{position:static}}

/* mechanisms: two more clips in the room under the paragraph */
.vids-side{margin-top:10px;gap:14px}
.vids-side .vid figcaption{margin-top:6px}
@media (min-width:960px){.ch-mech{align-items:stretch}.ch-mech .ch-text{position:static;grid-column:1 / span 5}.ch-flip.ch-mech .ch-text{grid-column:8 / span 5}.ch-flip.ch-mech .ch-media{grid-column:1 / span 7}.ch-mech .vids-side{margin-top:auto;padding-top:28px}}
@media (max-width:560px){.vids-side{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* supporting views kept small under a figure */
.refs{margin-top:22px;padding-top:14px;border-top:1px solid var(--line)}
.refs-t{font-size:13.5px;color:var(--ink-3);margin-bottom:10px}
.refs-row{display:grid;grid-template-columns:repeat(var(--c,3),minmax(0,1fr));gap:10px}
.fig.ref .fig-a{aspect-ratio:16/9}

/* drag-to-turn view */
.spin{margin-top:var(--gap)}
.spin-stage{position:relative;display:grid;place-items:center;aspect-ratio:4/3;max-width:100%;background:#fff;outline:1px solid var(--line);outline-offset:-1px;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;overflow:hidden}
.spin-stage.is-drag{cursor:grabbing}
.spin-stage canvas{height:92%;width:auto;max-width:100%;object-fit:contain}
.spin-hint{position:absolute;left:12px;bottom:12px;display:inline-flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line-2);border-radius:2px;background:rgba(255,255,255,.92);font-size:13px;color:var(--ink-2);transition:opacity .4s var(--ease)}
.spin-hint svg{width:18px;height:18px}
.spin.is-used .spin-hint{opacity:0}
.spin figcaption{margin-top:9px;font-size:13.5px;line-height:1.4;color:var(--ink-3)}

/* scooter: the complete model, centered under its title */
.show{padding-top:clamp(64px,8vw,120px);text-align:center}
.show-t{padding-top:28px;border-top:1px solid var(--ink);font-weight:500;font-size:clamp(2rem,1.3rem + 2.2vw,3.4rem);line-height:1;letter-spacing:-.045em;text-wrap:balance}
.show-hero{max-width:880px;margin:clamp(20px,3vw,40px) auto 0}
.show-hero .fig-a{display:block;aspect-ratio:1600/1288;background:#fff;outline:0;cursor:zoom-in}
.show-hero img{width:100%;height:100%;object-fit:contain;transition:transform .8s var(--ease)}
.show-hero .fig-a:hover img{transform:scale(1.015)}

/* subassemblies: a slim strip */
.rail-sec{padding-top:clamp(56px,7vw,104px)}
.rail-head{display:grid;gap:12px var(--gap);align-items:end;padding-top:28px;border-top:1px solid var(--line)}
.rail-head p{color:var(--ink-2);max-width:34em}
.rail-nav{display:none;gap:8px}
.rail-nav button{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--line-2);border-radius:2px;background:#fff;color:var(--ink)}
.rail-nav button:hover{border-color:var(--ink)}
.rail-nav svg{width:16px;height:16px}
.rail{display:flex;gap:12px;margin-top:22px;padding:2px 2px 12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--line-2) transparent}
.rail li{flex:0 0 clamp(150px,15vw,208px);scroll-snap-align:start}
.rail-a{display:block;text-decoration:none;color:inherit;cursor:zoom-in}
.rail-im{display:block;aspect-ratio:4/3;background-repeat:no-repeat;background-color:#fff;outline:1px solid var(--line);outline-offset:-1px;transition:outline-color .2s}
.rail-a:hover .rail-im{outline-color:var(--ink)}
.rail-c{display:block;margin-top:8px;font-size:13px;line-height:1.35;color:var(--ink-3)}
.rail-a:hover .rail-c{color:var(--ink)}
@media (min-width:960px){.rail-head{grid-template-columns:repeat(12,minmax(0,1fr))}.rail-head .ch-t{grid-column:1 / span 8}.rail-nav{display:flex;grid-column:11 / span 2;justify-content:flex-end}}

/* numbers and specification sheet, high on the page */
.band-8{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.band-8 li{padding:20px 0 22px!important;border-left:0!important;border-top:0!important;border-bottom:1px solid var(--line)}
.band-8 li:nth-child(odd){padding-right:16px!important}
.band-8 li:nth-child(even){padding-left:16px!important;border-left:1px solid var(--line)!important}
.band-8 li:nth-last-child(-n+2){border-bottom:0}
.band b small{margin-left:.22em;font-family:var(--f-mono);font-size:.36em;font-weight:400;letter-spacing:.02em;color:var(--ink-3)}
.band-8 b{font-size:clamp(2rem,1.3rem + 2vw,3.3rem)}
@media (min-width:760px){
  .band-8{grid-template-columns:repeat(4,minmax(0,1fr))!important}
  .band-8 li{padding:24px var(--gap) 26px!important;border-left:1px solid var(--line)!important}
  .band-8 li:nth-child(4n+1){padding-left:0!important;border-left:0!important}
  .band-8 li:nth-last-child(-n+4){border-bottom:0}
  .band-8 li:nth-last-child(-n+2){border-bottom:0}
}
.sheet{display:grid;gap:36px var(--gap);margin-top:clamp(40px,5vw,72px)}
.sheet-fig{position:relative;display:grid;gap:12px;align-content:center;padding:clamp(16px,2.4vw,36px);background:#fff;min-width:0}
.sheet-fig::after{content:"";position:absolute;inset:0;pointer-events:none;--t:14px;--c:var(--line-2);
  background:linear-gradient(var(--c),var(--c)) top left/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) top left/1px var(--t) no-repeat,
  linear-gradient(var(--c),var(--c)) top right/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) top right/1px var(--t) no-repeat,
  linear-gradient(var(--c),var(--c)) bottom left/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom left/1px var(--t) no-repeat,
  linear-gradient(var(--c),var(--c)) bottom right/var(--t) 1px no-repeat,linear-gradient(var(--c),var(--c)) bottom right/1px var(--t) no-repeat}
.sheet-im{display:block;cursor:zoom-in}
.sheet-im img{display:block;width:100%;height:auto;margin-inline:auto;transition:transform .8s var(--ease)}
.sheet-im:hover img{transform:scale(1.015)}
.sheet-1 .sheet-im img{max-height:min(72vh,640px);width:auto;max-width:100%}
.sheet-2 .sheet-im+.sheet-im img{max-width:62%}
.sheet-t{display:flex;flex-direction:column;gap:30px;min-width:0}
.sheet-head{display:grid;gap:8px}
.sheet-head h2{font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.5rem);line-height:1.04;letter-spacing:-.035em}
.sheet-head p{font-size:15px;color:var(--ink-3);max-width:30em}
.sheet-t h3{padding-bottom:10px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:600}
.sheet-t dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.sheet-t dt{font-size:14.5px;color:var(--ink-3)}
.sheet-t dd{font-weight:500;font-size:1.2rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.sheet-t dd small{margin-left:6px;font-family:var(--f-mono);font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
.sheet-t .grp-txt dl div{grid-template-columns:minmax(0,6.4em) minmax(0,1fr)}
.sheet-t .grp-txt dd{font-size:15px;line-height:1.45;letter-spacing:0;text-align:left;color:var(--ink)}
@media (min-width:960px){
  .sheet{grid-template-columns:repeat(12,minmax(0,1fr));align-items:stretch}
  .sheet-fig{grid-column:1 / span 6}
  .sheet-t{grid-column:8 / span 5;justify-content:center}
}

/* six clips, one size, under a title row */
.wide-head{display:grid;gap:12px var(--gap);align-items:end;margin-bottom:clamp(24px,3vw,40px)}
.wide-head p{color:var(--ink-2);max-width:34em}
.vids-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px var(--gap)}
@media (min-width:960px){.ch.ch-wide{display:block}.wide-head{grid-template-columns:repeat(12,minmax(0,1fr))}.wide-head .ch-t{grid-column:1 / span 5}.wide-head p{grid-column:7 / span 6}.vids-6{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:560px){.vids-6{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}}

/* subassembly strip as a chapter */
.ch.ch-rail{display:block}
.ch-rail .rail-head{padding-top:0;border-top:0}
.rail-sec.ch{padding-top:clamp(56px,7vw,104px)}

/* turning view under a paragraph */
.ch-spin .spin{margin:30px 0 0 clamp(0px,3vw,40px);max-width:340px}
.ch-spin .spin-stage{display:block;outline:0;aspect-ratio:527/600;background:transparent}
.ch-spin .spin-stage canvas{display:block;width:100%;height:auto}
.ch-spin .spin-hint{display:none}
.ch-spin .spin figcaption{margin-top:18px;text-align:center}

/* a figure shown whole, at its own proportions */
.fig.is-natural .fig-a{aspect-ratio:auto;background:#fff}
.fig.is-natural .fig-a img{object-fit:contain;padding:0}

/* next project */
.next{padding-bottom:var(--sec)}
.next{position:relative}
.next .next-a{display:grid;gap:18px;padding-top:28px;border-top:1px solid var(--ink);text-decoration:none;color:inherit}
.next-k{font-size:14px;color:var(--ink-3)}
.next-t{display:block;font-weight:500;font-size:clamp(2rem,1.1rem + 3.2vw,4.4rem);line-height:1;letter-spacing:-.05em;text-wrap:balance}
.next-t .arr{display:inline-block;width:.46em;height:.46em;margin-left:.15em;vertical-align:.05em}
.next-a:hover .next-t{color:var(--signal-ink)}
.next-a:hover .next-t .arr{transform:translateX(6px)}
.next>.all-btn{margin-top:22px}
.next-img{display:block;position:relative;aspect-ratio:4/3;max-width:100%;overflow:hidden;background:#fff;outline:1px solid var(--line);outline-offset:-1px}
.next-img.is-photo{background:var(--stone)}
.next-img img{width:100%;height:100%;object-fit:cover}
.next-img.is-white img{object-fit:contain;padding:7%}
@media (min-width:960px){.next .next-a{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:end}.next-k{grid-column:1 / -1}.next-t{grid-column:1 / span 8}.next-img{grid-column:10 / span 3}.next>.all-btn{position:absolute;top:22px;right:max(var(--gutter),env(safe-area-inset-right,0px));margin:0}}

/* lightbox */
.lb{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:rgba(14,15,16,.96);color:#EEEEEA;z-index:300}
.lb::backdrop{background:rgba(14,15,16,.96)}
.lb-in{position:absolute;inset:0;display:grid;grid-template-rows:56px 1fr auto;padding:0 clamp(12px,3vw,40px) 18px}
.lb-top{display:flex;align-items:center;justify-content:space-between;font-family:var(--f-mono);font-size:12px;color:#A9ACAF}
.lb-fig{position:relative;min-height:0;display:grid;place-items:center}
.lb-fig img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;background:#fff}
.lb-fig img.is-dark{background:transparent}
.lb-cap{font-size:14px;color:#C9CBCD;text-align:center;padding-top:12px;min-height:30px}
.lb button{background:none;border:1px solid #3A3D41;color:#EEEEEA;width:44px;height:44px;display:grid;place-items:center;border-radius:2px}
.lb button:hover{border-color:var(--signal);color:var(--signal)}
.lb .lb-prev,.lb .lb-next{position:absolute;top:50%;transform:translateY(-50%);background:rgba(20,21,22,.7)}
.lb .lb-prev{left:0}.lb .lb-next{right:0}
.lb svg{width:18px;height:18px}

/* gentle reveal */
.js [data-reveal]{opacity:0;transform:translateY(14px);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js [data-reveal].is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js [data-reveal]{opacity:1;transform:none}}

/* in-page text editor (owner only; see edit.js) */
.ed-pill{position:fixed;left:max(16px,env(safe-area-inset-left,0px));bottom:max(16px,env(safe-area-inset-bottom,0px));z-index:90;display:inline-flex;align-items:center;gap:10px;min-height:44px;padding:0 16px 0 14px;background:var(--paper);color:var(--ink);border:1px solid var(--line-2);border-radius:2px;font:600 14px/1 var(--f-sans);box-shadow:0 1px 0 rgba(0,0,0,.04);cursor:pointer}
.ed-pill:hover{border-color:var(--ink)}
.ed-pill i{width:7px;height:7px;border-radius:50%;background:var(--line-2);flex:none}
.ed-pill.has-saved i{background:var(--signal)}
.ed-pill small{font-weight:400;color:var(--ink-3);font-size:13px}
.ed-bar{position:fixed;left:0;right:0;bottom:0;z-index:95;background:var(--paper);border-top:1px solid var(--ink);padding:12px max(16px,env(safe-area-inset-left,0px)) max(12px,env(safe-area-inset-bottom,0px))}
.ed-bar-in{max-width:var(--maxw);margin-inline:auto;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px}
.ed-msg{flex:1 1 280px;font-size:14px;line-height:1.4;color:var(--ink-2)}
.ed-msg b{font-weight:600;color:var(--ink)}
.ed-actions{display:flex;gap:10px;flex-wrap:wrap}
.ed-btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border:1px solid var(--ink);border-radius:2px;background:var(--paper);color:var(--ink);font:600 14px/1 var(--f-sans);cursor:pointer;transition:background-color .2s var(--ease),color .2s var(--ease)}
.ed-btn:hover{background:var(--ink);color:#fff}
.ed-btn.primary{background:var(--ink);color:#fff}
.ed-btn.primary:hover{background:var(--signal);border-color:var(--signal);color:var(--ink)}
.ed-btn:disabled{opacity:.4;cursor:default;background:var(--paper);color:var(--ink)}
.td-editing body{padding-bottom:96px}
.td-editing [data-edit]{cursor:text;outline:1px dashed transparent;outline-offset:3px;border-radius:1px;transition:outline-color .15s}
.td-editing [data-edit]:hover{outline-color:rgba(255,107,0,.6)}
.td-editing [data-edit]:focus{outline:2px solid var(--signal);outline-offset:3px}
.td-editing [data-edit].is-changed{background:rgba(255,107,0,.10)}
.td-editing .inv [data-edit].is-changed{background:rgba(255,107,0,.22)}
.td-editing .wk,.td-editing .next a,.td-editing .gal-stage{cursor:default}
@media (max-width:600px){.ed-actions{width:100%}.ed-actions .ed-btn{flex:1}}

/* master viewer: no captions, the counter stays */
.gal-cap{display:none}
.gal-bar{justify-content:flex-end}

/* specification heads, shared */
.sp-head{display:grid;gap:8px}
.sp-head h2{font-weight:500;font-size:clamp(1.6rem,1.2rem + 1.3vw,2.5rem);line-height:1.04;letter-spacing:-.035em}
.sp-head p{font-size:15px;color:var(--ink-3);max-width:34em}
.spec .grp h3{padding-bottom:10px;border-bottom:1px solid var(--ink);font-size:14px;font-weight:600}
.spec .grp dl div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:16px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line)}
.spec .grp dt{font-size:14.5px;color:var(--ink-3)}
.spec .grp dd{font-weight:500;font-size:1.2rem;line-height:1.1;letter-spacing:-.02em;font-variant-numeric:tabular-nums;text-align:right}
.spec .grp dd small{margin-left:6px;font-family:var(--f-mono);font-size:11.5px;font-weight:400;letter-spacing:0;color:var(--ink-3)}
.spec .grp-kv dd{font-size:15.5px;letter-spacing:0;line-height:1.35}
.spec .grp-txt dl div{grid-template-columns:minmax(0,6.4em) minmax(0,1fr)}
.spec .grp-txt dd{font-size:15px;line-height:1.45;letter-spacing:0;text-align:left}

/* scooter: two lists flanking the render, sizes underneath */
.flank{display:grid;gap:32px var(--gap);margin-top:clamp(48px,6vw,88px)}
.flank .sp-head{text-align:center;justify-items:center}
.flank-fig{margin:0 auto;max-width:440px;width:100%}
.flank-fig img{display:block;width:100%;height:auto}
.flank-sizes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--ink)}
.flank-sizes li{display:flex;flex-direction:column;gap:6px;padding:16px 12px 4px;text-align:center}
.flank-sizes li+li{border-left:1px solid var(--line)}
.flank-sizes b{font-weight:500;font-size:clamp(1.15rem,1rem + .6vw,1.6rem);letter-spacing:-.025em;font-variant-numeric:tabular-nums;white-space:nowrap}
.flank-sizes b small{margin-left:5px;font-family:var(--f-mono);font-size:11.5px;font-weight:400;color:var(--ink-3)}
.flank-sizes span{font-size:13.5px;color:var(--ink-3)}
@media (min-width:960px){
  .flank{grid-template-columns:repeat(12,minmax(0,1fr));align-items:center;row-gap:28px}
  .flank .sp-head{grid-column:1 / -1}
  .flank-l{grid-column:1 / span 4;grid-row:2}
  .flank-fig{grid-column:5 / span 4;grid-row:2}
  .flank-r{grid-column:9 / span 4;grid-row:2}
  .flank-sizes{grid-column:3 / span 8;grid-row:3}
}
@media (max-width:560px){.flank-sizes{grid-template-columns:minmax(0,1fr)}.flank-sizes li+li{border-left:0;border-top:1px solid var(--line)}.flank-sizes li{padding:12px 0}}

/* Thunder-X: the figures laid over the dark fog render */
.strip{position:relative;margin-top:clamp(48px,6vw,88px);background:#00050f;color:#EEF0F2;overflow:hidden}
.strip-img{display:block;width:100%;height:auto}
.strip-in{padding:28px 20px 8px}
.strip .sp-head h2{color:#fff}
.strip .sp-head p{color:rgba(238,240,242,.62)}
.strip-groups{display:grid;gap:28px var(--gap);margin-top:24px}
.strip .grp h3{border-bottom-color:rgba(255,255,255,.55);color:#fff}
.strip .grp dl div{border-bottom-color:rgba(255,255,255,.14)}
.strip .grp dt{color:rgba(238,240,242,.6)}
.strip .grp dd{color:#fff}
@media (min-width:960px){
  .strip-in{position:absolute;left:0;right:0;top:0;padding:clamp(32px,3.6vw,56px) clamp(32px,3.6vw,56px) 0}
  .strip .sp-head{grid-template-columns:repeat(2,minmax(0,1fr));align-items:end;column-gap:clamp(32px,4vw,72px)}
  .strip-groups{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,72px)}
  .strip-img{margin-top:0}
}
@media (max-width:959px){.strip{display:flex;flex-direction:column-reverse}.strip-img{margin-top:-18%}}
.ch.ch-show{display:block;padding-top:clamp(56px,7vw,104px)}
.ch-show .show-t{padding-top:0;border-top:0}

/* v11: flanked spec with room between the render and the lists */
@media (min-width:960px){
  .flank-l{grid-column:1 / span 3}
  .flank-fig{grid-column:5 / span 4}
  .flank-r{grid-column:10 / span 3}
}
.flank-sizes{grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
@media (min-width:960px){.flank-sizes[style*="--n:1"]{grid-column:5 / span 4}}
.flank-sizes[style*="--n:1"]{max-width:420px;width:100%;margin-inline:auto}

/* v11: Thunder-X spec back on white, one render */
.spec .sheet{margin-top:clamp(48px,6vw,88px)}
.spec .sheet-1 .sheet-fig{align-content:center}
.spec .sheet-1 .sheet-im img{max-height:none;width:100%}
.spec .sheet-t .sp-head{margin-bottom:4px}
@media (min-width:960px){.spec .sheet-1{align-items:center}.spec .sheet-1 .sheet-fig{grid-column:1 / span 6}.spec .sheet-1 .sheet-t{grid-column:8 / span 5}}

/* v11: two views of one board, side by side at the same size */
.hl-figs.pair{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--gap)}
.hl-figs.pair .fig-a{aspect-ratio:1176/758}
.hl-figs.pair .fig.has-co .fig-a{aspect-ratio:auto!important}
@media (max-width:640px){.hl-figs.pair{grid-template-columns:minmax(0,1fr)}}
@media (min-width:960px){
  .ch.ch-pair{display:block}
  .ch-pair .ch-text{position:static;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start;margin-bottom:clamp(28px,3vw,44px)}
  .ch-pair .ch-text>.ch-t{grid-column:1 / span 5;grid-row:1}
  .ch-pair .ch-text>p{grid-column:1 / span 5;grid-row:2;margin-top:14px}
  .ch-pair .ch-text>.legend{grid-column:7 / span 6;grid-row:1 / span 2;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--gap);margin-top:0}
}

/* v11: note under the traced photos */
.refs-below{padding-top:0;border-top:0;margin-top:14px}
.refs-below .refs-t{margin:10px 0 0;text-align:center}

/* v11: outside links and films */
.ch-links{display:grid;margin-top:10px;border-top:1px solid var(--ink);max-width:30em}
.ch-links a{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font-size:15px}
.ch-links .cl-s{font-size:13px;color:var(--ink-3)}
.ch-links .out,.film .out{width:13px;height:13px;flex:none;color:var(--ink-3);transition:transform .3s var(--ease)}
.ch-links a:hover .out,.film:hover .out{transform:translate(2px,-2px);color:var(--ink)}
.ch.ch-watch{display:block}
.films{display:grid;gap:28px var(--gap)}
@media (min-width:760px){.films{grid-template-columns:repeat(2,minmax(0,1fr))}}
.film{display:grid;gap:6px;color:var(--ink);text-decoration:none}
.film-im{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#0b0f16;margin-bottom:8px}
.film-im img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.film:hover .film-im img{transform:scale(1.02)}
.film-play{position:absolute;left:50%;top:50%;display:grid;place-items:center;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);transition:transform .3s var(--ease)}
.film-play svg{width:24px;height:24px;margin-left:3px}
.film:hover .film-play{transform:scale(1.06)}
.film-t{font-weight:500;font-size:1.25rem;letter-spacing:-.02em}
.film-s{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-3)}
.p-cta .all-btn{min-height:48px}
.hl-figs.pair .fig-a{outline:0;background:transparent}
.hl-figs.pair .fig.is-white .fig-a img{padding:0}
@media (min-width:960px){.spec .sheet-1{align-items:stretch}}
.spec .sheet-1{row-gap:28px}
@media (min-width:960px){
  .spec .sheet-1{grid-template-rows:1fr auto auto 1fr;row-gap:24px}
  .spec .sheet-1 .sheet-fig{grid-row:1 / -1}
  .spec .sheet-1>.sp-head{grid-column:8 / span 5;grid-row:2}
  .spec .sheet-1 .sheet-t{grid-row:3}
}

/* v12: one merged list of what our manufacturers make */
.nw-merge{display:block}
.nw-heads{display:grid;gap:12px var(--gap);padding-bottom:12px;border-bottom:1px solid var(--ink)}
.nw-heads h4{display:flex;flex-direction:column;gap:2px;font-size:16px;font-weight:600}
.nw-heads h4 small{font-size:13.5px;font-weight:400;color:var(--ink-3)}
.nw-merge ul{display:grid;column-gap:var(--gap)}
.nw-merge li{padding:10px 0;border-bottom:1px solid var(--line);font-size:15px;color:var(--ink-2)}
@media (min-width:560px){.nw-heads,.nw-merge ul{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* the confidentiality line, small, under the project grid */
.work-note{margin-top:clamp(20px,2.4vw,32px);font-size:13px;color:var(--ink-3);text-align:right}
@media (max-width:640px){.work-note{text-align:left}}
.nw-heads{grid-template-columns:minmax(0,1fr)!important;gap:8px}
.nw-heads h4{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.nw-heads h4 span{min-width:3.6em}
.nw-heads h4{margin:0;padding:0;border:0;line-height:1.3}
.nw-heads{gap:6px!important;padding-bottom:14px}

/* ───────── V8 ───────── */
/* Type: the V6 headline voice, a step quieter. Archivo's width axis does the work: wide and heavy for the big
   statements, a little wider than normal for titles, normal width for reading. */
.h1{font-weight:680;font-stretch:114%;font-size:clamp(2.5rem,1rem + 4.1vw,5rem);line-height:.92;letter-spacing:-.042em}
.h2{font-weight:660;font-stretch:112%;font-size:clamp(2rem,1.15rem + 2.6vw,3.75rem);line-height:.96;letter-spacing:-.036em}
.h3{font-weight:640;font-stretch:108%;letter-spacing:-.026em}
.lead{font-weight:380}
.sec-head p,.faq-head p{font-weight:380}
.wk-t{font-weight:600;font-stretch:104%;letter-spacing:-.02em}
.wk-feat .wk-t{font-weight:660;font-stretch:110%;letter-spacing:-.032em}
.ds h3{font-weight:620;font-stretch:106%;letter-spacing:-.028em}
.ind h3,.stages h3{font-weight:620;font-stretch:106%;letter-spacing:-.022em}
.pp h3{font-weight:700;font-stretch:116%;font-size:clamp(1.8rem,1.3rem + 1.5vw,2.7rem);line-height:.95;letter-spacing:-.04em}
.pp-role{font-family:var(--f-mono);font-size:12px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--signal-ink);margin-top:12px}
.faq-list summary{font-weight:560}
.p-title{font-weight:680;font-stretch:108%;font-size:clamp(1.95rem,1.4rem + 1.5vw,2.75rem);line-height:.98;letter-spacing:-.038em}
.ch-t,.show-t{font-weight:640;font-stretch:108%;letter-spacing:-.03em}
.band b,.p-nums b{font-weight:680;font-stretch:114%;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.band b small{font-weight:400;font-stretch:100%}
.sp-head h2{font-weight:660;font-stretch:110%;letter-spacing:-.032em}
.next-t{font-weight:680;font-stretch:114%;letter-spacing:-.04em}
.inv .h2{max-width:9.5em}
.direct dd,.p-brief dd{font-weight:420}

/* Made by manufacturers we know: one set of tiles beside the paragraph */
.nw-made .nw-t p{max-width:32em}
.mk-chips{display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}
.mk-chips li{padding:8px 12px;border:1px solid var(--line-2);border-radius:2px;background:#fff;font-size:14px;line-height:1.25;color:var(--ink-2);transition:border-color .2s var(--ease),color .2s var(--ease)}
.mk-chips li:hover{border-color:var(--signal);color:var(--ink)}
@media (min-width:960px){.nw-made .nw-t{grid-column:1 / span 5}.nw-made .mk-chips{grid-column:7 / span 6}}

/* contact details */
.direct dd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 16px}
.direct .wa{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--ink-2)}
.direct .wa svg{width:15px;height:15px;align-self:center}
.direct .mono-v{font-family:var(--f-mono);font-size:14px;letter-spacing:.02em}

/* footer without the repeated email and phone */
@media (min-width:900px){.ft-row>:nth-child(2){grid-column:7 / span 6;justify-content:flex-end}}

/* project pages: title on top, the wide image under it, then the intro beside the facts (the V6 layout) */
.pg-top{display:flex;align-items:center;padding-top:clamp(16px,2vw,26px)}
.back{font-weight:600;color:var(--ink-2)}
.back .arr{width:16px;height:16px;transition:transform .3s var(--ease)}
.back:hover .arr{transform:translateX(-3px)}
.pg-head{display:grid;gap:22px var(--gap);align-items:end;padding-block:clamp(22px,3.4vw,48px) clamp(22px,2.6vw,36px)}
.pg-head .p-title{margin:0;font-size:clamp(2.3rem,1.1rem + 3.7vw,4.6rem);font-stretch:114%;line-height:.94;letter-spacing:-.042em;max-width:15em}
.pg-line{margin-top:14px;font-size:clamp(1.1rem,1rem + .5vw,1.4rem);line-height:1.4;color:var(--ink-2);max-width:32em}
.pg-head .btn-dl{justify-self:start}
@media (min-width:960px){.pg-head{grid-template-columns:minmax(0,1fr) auto}.pg-head .btn-dl{justify-self:end;margin-bottom:4px}}
.gal-wide .gal-stage{aspect-ratio:auto;height:clamp(280px,60vh,720px)}
.gal-wide .gal-stage.is-white .gal-img{padding:3%}
.gal-wide .gal-thumbs li{flex-basis:clamp(84px,9vw,132px)}
@media (max-width:640px){.gal-wide .gal-stage{height:auto;aspect-ratio:4/3}}
.pg-brief{display:grid;gap:28px var(--gap);padding-block:clamp(40px,5vw,72px) 0}
.pg-intro{font-size:clamp(1.15rem,1rem + .7vw,1.6rem);line-height:1.42;letter-spacing:-.01em;color:var(--ink);max-width:30em;text-wrap:pretty}
.pg-side{min-width:0}
.pg-side .p-brief{margin-top:0}
@media (min-width:960px){.pg-brief{grid-template-columns:repeat(12,minmax(0,1fr))}.pg-intro{grid-column:1 / span 7}.pg-side{grid-column:9 / span 4}}

/* WhatsApp launcher under the form, styled like the Instagram links on the Thunder-X page */
.wa-link{margin-top:22px;max-width:none}
.wa-link .cl-t{display:inline-flex;align-items:center;gap:10px;font-weight:600}
.wa-link .cl-t svg{width:18px;height:18px;color:var(--signal)}

/* scroll bar under thumbnail strips and rails: drag it, click along it, or drag the strip itself */
.has-scrub{scrollbar-width:none}
.has-scrub::-webkit-scrollbar{display:none}
.gal-thumbs.has-scrub,.rail.has-scrub{padding-bottom:2px}
.has-scrub.is-drag{cursor:grabbing;user-select:none}
.has-scrub.is-drag *{pointer-events:none}
.scrub{position:relative;height:18px;margin-top:6px;cursor:pointer;touch-action:none}
.scrub::before{content:"";position:absolute;left:0;right:0;top:8px;height:2px;background:var(--line)}
.scrub-th{position:absolute;left:0;top:6px;height:6px;min-width:28px;background:var(--ink);border-radius:3px;cursor:grab;transition:background-color .2s}
.scrub:hover .scrub-th,.scrub.is-drag .scrub-th{background:var(--signal)}
.scrub.is-drag .scrub-th{cursor:grabbing}
.scrub[hidden]{display:none}

/* V8 final pass: small phones */
@media (max-width:400px){
  .hd-row{gap:12px}
  .wm{font-size:14px}
  .brand{gap:9px}
  .menu-btn{padding-left:8px;gap:8px}
}
.direct dd,.direct dd a{min-width:0;overflow-wrap:anywhere}
.nobr{white-space:nowrap}
/* contact column wider on small laptops, label column narrower */
@media (min-width:960px){.ct-l{grid-column:1 / span 5}.ct-r{grid-column:6 / span 7}}
@media (min-width:1200px){.ct-l{grid-column:1 / span 4}}
.direct div{grid-template-columns:minmax(0,6.5em) minmax(0,1fr)}
/* project cards: a size step down where three columns get tight */
@media (min-width:960px) and (max-width:1199px){.wk:not(.wk-feat) .wk-t{font-size:1.08rem}.wk-tb{padding:12px 12px 12px 14px;gap:10px}}
/* team: name beside the text on tablets, three columns from 960 */
@media (min-width:560px) and (max-width:959px){
  .team{grid-template-columns:minmax(0,1fr)!important}
  .pp{display:grid;grid-template-columns:minmax(0,13em) minmax(0,1fr);column-gap:var(--gap);border-bottom:1px solid var(--line)!important}
  .pp h3,.pp-role{grid-column:1}.pp-text{grid-column:2;grid-row:1 / span 2;margin-top:4px;max-width:34em}
}