/* ============================================================================
   OAKFORME
   ONE typeface, TWO text styles, and nothing else on the page:
     A — the wordmark's design      weight 700 · wdth 92 · -0.05em · tight
     B — the intro line's design    weight 400 · wdth 98 · -0.025em · 1.35
   Photo first, then the name, then one micro line. Detail is folded behind +.
   The tables are the accent: cut-outs on paper, the wordmark laid over them.
   ==========================================================================*/
:root{
  --paper:#FFFFFF; --paper-2:#F2EEE7; --paper-3:#FAF9F7;
  --ink:#0B0B0B; --ink-2:#56524D; --ink-3:#8E8A84; --ink-4:#B8B4AE;
  --line:rgba(11,11,11,.11); --line-2:rgba(11,11,11,.24); --ghost:rgba(11,11,11,.16);
  --glass:rgba(255,255,255,.60); --veil:rgba(255,255,255,.74); --halo:rgba(11,11,11,.08);
  --f:'Archivo',system-ui,-apple-system,sans-serif;
  --a1:clamp(58px,16.6vw,231px);   /* wordmark */
  --a2:clamp(32px,6vw,88px);       /* section titles */
  --a3:clamp(13px,2.6vw,40px);     /* item headings, figures */
  --b1:clamp(12px,1.7vw,23px);     /* the intro line */
  --b2:clamp(11px,1.05vw,15px);    /* everything else — scales with the screen */
  --e:cubic-bezier(.16,1,.3,1);
  --pad:clamp(14px,4.6vw,88px);
  --gap:clamp(76px,13vw,250px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0B0B0B; --paper-2:#17150F; --paper-3:#131313;
    --ink:#F2EFEA; --ink-2:#A9A39A; --ink-3:#817B73; --ink-4:#5A554D;
    --line:rgba(242,239,234,.13); --line-2:rgba(242,239,234,.28); --ghost:rgba(242,239,234,.19);
    --glass:rgba(242,239,234,.045); --veil:rgba(11,11,11,.72); --halo:rgba(242,239,234,.10);
  }
}
html{color-scheme:light dark}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;overflow-x:clip;scroll-padding-top:90px}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--f);font-size:var(--b2);line-height:1.35;
  font-variation-settings:'wdth' 98;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden}
body.lock{overflow:hidden}
img,svg{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,textarea,select{font:inherit;color:inherit;background:none;border:0}
h1,h2,h3,p,dl,dd,dt,ol,ul,figure,fieldset,legend,address{margin:0;padding:0;font-style:normal}
ol,ul{list-style:none}
fieldset{border:0;min-width:0}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:10px 16px}
.skip:focus{left:8px;top:8px}

/* ── THE TWO TEXT STYLES ────────────────────────────────────────────── */
.wordmark,.title,.fig__n,.foot__mark span{font-weight:700;font-variation-settings:'wdth' 92;letter-spacing:-.05em;line-height:.92}
.title{font-size:var(--a2);line-height:.98}
h3{font-size:var(--a3);line-height:1.05}
.sheet__nav a{font-size:clamp(26px,8vw,48px);line-height:1.05}
body,.mono,.u,.idx,.data,dt,dd,legend,p,a,button,input,textarea,select,td,th,label,figcaption,h1,h2,h3,b,strong,em,i,small{
  font-weight:400;font-variation-settings:'wdth' 98;letter-spacing:-.025em;line-height:1.35;text-transform:none;font-family:var(--f)}
.hero__line{font-size:var(--b1);line-height:1.3}
.mono,.u,.idx,.data,dt,legend,small{font-size:var(--b2);color:var(--ink-3)}
.u{display:inline-block;transition:color .3s}
.data{margin-top:20px;line-height:1.55;max-width:52ch;color:var(--ink-3)}
.idx{display:flex;align-items:baseline;gap:9px;margin-bottom:26px}
.idx b{color:var(--ink)}

/* ── motion primitives ──────────────────────────────────────────────── */
.ln{display:block;overflow:hidden;padding-bottom:.04em}
.ln>span{display:block;transform:translateY(105%);transition:transform 1.05s var(--e)}
.is-in .ln>span,.ln.is-in>span{transform:none}
.is-in .ln:nth-child(2)>span{transition-delay:.08s}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .95s var(--e),transform .95s var(--e)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.09s}
.reveal[data-d="2"]{transition-delay:.18s}
.reveal[data-d="3"]{transition-delay:.27s}

/* ── chrome ─────────────────────────────────────────────────────────── */
.topbar{position:fixed;top:0;left:0;right:0;z-index:801;text-align:center;font-size:12px;color:var(--ink-3);
  padding:5px var(--pad);background:var(--paper);border-bottom:1px solid var(--line);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  transition:transform .55s var(--e)}
.bar{position:fixed;top:27px;left:0;right:0;z-index:800;display:flex;justify-content:space-between;align-items:center;gap:24px;
  padding:13px var(--pad);pointer-events:none;isolation:isolate;transition:transform .55s var(--e),padding .5s var(--e)}
.bar>*{pointer-events:auto}
body.up .bar,body.up .topbar{transform:translateY(-140%)}
.bar.stuck{padding-block:11px}
.bar.stuck::before{content:'';position:absolute;inset:0;z-index:-1;background:var(--veil);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border-bottom:1px solid var(--line)}
.cl--r{display:flex;align-items:center;gap:14px}
.lnk{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:34px;padding:0 16px;border-radius:99px;
  border:1px solid var(--line-2);font-size:var(--b2);white-space:nowrap;cursor:pointer;
  background:var(--veil);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);transition:.4s var(--e)}
.lnk:hover{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lnk--fill{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.lnk--fill:hover{background:transparent;color:var(--ink);border-color:var(--line-2)}
.bar__mark{font-size:var(--b2);color:var(--ink)}
.lang{display:flex;gap:6px}
.lang a{color:var(--ink-4);transition:color .3s}
.lang a.is-on,.lang a:hover{color:var(--ink)}
.menu{display:block;width:30px;height:30px;border:1px solid var(--line-2);border-radius:50%;cursor:pointer;position:relative;background:var(--paper);flex:none}
.menu i{position:absolute;left:9px;width:12px;height:1px;background:var(--ink);transition:.4s var(--e)}
.menu i:first-child{top:12px}.menu i:last-child{top:16px}
body.sheet-on .menu i:first-child{top:14px;transform:rotate(45deg)}
body.sheet-on .menu i:last-child{top:14px;transform:rotate(-45deg)}
.sheet{position:fixed;inset:0;z-index:790;background:var(--paper);display:flex;flex-direction:column;justify-content:center;gap:40px;
  padding:100px var(--pad) 40px;clip-path:inset(0 0 100% 0);transition:clip-path .75s var(--e);pointer-events:none;overflow:auto}
body.sheet-on .sheet{clip-path:inset(0);pointer-events:auto}
.sheet__nav{display:flex;flex-direction:column}
.sheet__nav a{display:flex;align-items:baseline;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);transition:padding-left .45s var(--e)}
.sheet__nav a:hover{padding-left:12px}
.sheet__nav em{font-size:var(--b2);color:var(--ink-4)}
.sheet__foot{display:flex;gap:10px;flex-wrap:wrap}
.fab{position:fixed;right:16px;bottom:16px;z-index:700;display:none;box-shadow:0 10px 30px rgba(0,0,0,.18)}

/* ── disclosure ─────────────────────────────────────────────────────── */
.dsc{position:relative}
.dsc__t{display:flex;align-items:baseline;gap:20px;width:100%;text-align:left;cursor:pointer;padding:0;background:none;border:0;color:inherit}
.dsc__t>:first-child{flex:1;min-width:0}
.dsc__i{position:relative;width:11px;height:11px;flex:none;margin-top:4px;align-self:flex-start;transition:transform .55s var(--e)}
.dsc__i::before,.dsc__i::after{content:'';position:absolute;background:var(--ink-3);transition:.4s var(--e)}
.dsc__i::before{left:0;top:5px;width:11px;height:1px}
.dsc__i::after{left:5px;top:0;width:1px;height:11px}
.dsc__t:hover .dsc__i{transform:scale(1.15)}
.dsc__t:hover .dsc__i::before,.dsc__t:hover .dsc__i::after{background:var(--ink)}
.dsc.is-open .dsc__i{transform:rotate(90deg)}
.dsc.is-open .dsc__i::before{opacity:0}
.dsc__p{height:0;overflow:hidden;transition:height .62s var(--e)}
.dsc__c{padding-top:16px;display:grid;gap:16px;justify-items:start;min-width:0;max-width:100%}
.dsc__c p{font-size:var(--b2);line-height:1.55;color:var(--ink-2);max-width:52ch}
.dsc__t:focus-visible{outline:2px solid var(--ink);outline-offset:6px;border-radius:2px}
.h{display:flex;flex-direction:column;align-items:flex-start;gap:7px}
.h .u{color:var(--ink-4)}
.h h3{font-size:clamp(18px,1.7vw,24px)}

/* ── actions ────────────────────────────────────────────────────────── */
.act{display:inline-flex;align-items:center;gap:14px;cursor:pointer;font-size:var(--b2)}
.act__d{width:44px;height:44px;border-radius:50%;background:var(--ink);color:var(--paper);display:grid;place-items:center;flex:none;transition:.45s var(--e)}
.act__d--sm{width:34px;height:34px}
.act__d svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square;transition:transform .45s var(--e)}
.act:hover .act__d{transform:scale(1.08)}
.act:hover .act__d svg{transform:translate(2px,-2px)}
.act--plain>span{position:relative;padding-bottom:4px}
.act--plain>span::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;transform-origin:right;transition:transform .5s var(--e)}
.act--plain:hover>span::after{transform:scaleX(0)}
.act--wide{justify-content:space-between;background:var(--ink);color:var(--paper);border-radius:99px;padding:6px 6px 6px 22px;transition:.45s var(--e);min-width:240px}
.act--wide .act__d{background:var(--paper);color:var(--ink)}
.act--wide:hover{transform:translateY(-2px)}
.glass{background:var(--glass);backdrop-filter:blur(30px) saturate(180%);-webkit-backdrop-filter:blur(30px) saturate(180%);border:1px solid var(--line);border-radius:2px;position:relative}

/* ═══════════ HERO — three tables, the wordmark laid over them ═══════ */
.hero{position:relative;min-height:100svh;overflow:hidden;display:grid;grid-template-rows:1fr auto auto 1fr auto;grid-template-columns:minmax(0,1fr);
  padding:clamp(74px,11vh,112px) var(--pad) clamp(20px,3.6vh,36px)}
.hero__tables{grid-row:2;position:relative;z-index:1;display:flex;align-items:flex-end;justify-content:center;
  gap:clamp(8px,2vw,40px);padding:0 0 clamp(4px,1vw,14px);pointer-events:none;max-width:100%}
.hero__t{display:block;flex:none;opacity:0;transform:scale(1.025);transition:opacity 1.4s var(--e),transform 1.6s var(--e)}
.ready .hero__t{opacity:1;transform:none}
.hero__t--main{width:min(680px,44vw);z-index:2}
.hero__t--l{width:min(400px,25vw);transition-delay:.12s}
.hero__t--r{width:min(220px,14vw);transition-delay:.2s}
.hero__t img{width:100%;height:auto;object-fit:contain;object-position:bottom}
.hero__foot{display:contents}
.wordmark{grid-row:3;position:relative;z-index:4;font-size:var(--a1);line-height:.78;white-space:nowrap;color:var(--ghost);margin-top:-.58em;text-align:center;
  opacity:0;transform:translateY(22%);transition:opacity 1.1s .2s var(--e),transform 1.2s .2s var(--e)}
.ready .wordmark{opacity:1;transform:none}
.wordmark b{color:var(--ink);font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit;line-height:inherit}
.hero__strip{grid-row:5;position:relative;z-index:4;min-width:0;display:flex;gap:26px;align-items:baseline;justify-content:space-between;padding-top:16px;margin-top:clamp(8px,1.4vh,16px);
  border-top:1px solid var(--line);flex-wrap:wrap}
.hero__line{max-width:64ch}
.hero__sub{display:block;margin-top:6px;color:var(--ink-3)}
.hero__scroll{white-space:nowrap;margin-left:auto}
.hero__types{display:flex;flex-wrap:nowrap;gap:8px;align-items:center;margin-top:16px;overflow-x:auto;min-width:0;width:100%;scrollbar-width:none;-webkit-overflow-scrolling:touch;max-width:100%}
.hero__types::-webkit-scrollbar{display:none}
.hero__types .lnk{flex:none}
.hero__types[data-more="1"]{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 56px),transparent)}
.hero__types .lnk{background:transparent;height:38px;padding:0 18px}
.hero__types .lnk--fill{background:var(--ink);padding-right:14px}
.hero__types .lnk--fill:hover{background:transparent}
.lnk__a{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:square;margin-left:4px}

/* ═══════════ THESIS — the line fills as it is read ═══════════ */
.thesis{min-height:96svh;display:grid;place-items:center;padding:var(--gap) var(--pad)}
.thesis__line{max-width:18ch;text-align:center;font-size:clamp(28px,6.2vw,92px);line-height:.94;
  font-weight:700;font-variation-settings:'wdth' 92;letter-spacing:-.05em}
.thesis__line .w{display:inline-block;opacity:.12;transition:opacity .6s var(--e)}
.thesis__line .w.on{opacity:1}

/* ── cursor ring ────────────────────────────────────────────────────── */
.cursor{position:fixed;top:0;left:0;z-index:950;pointer-events:none;opacity:0;transition:opacity .4s;mix-blend-mode:difference}
body.cur .cursor{opacity:1}
.cursor i{position:absolute;display:block;width:28px;height:28px;border:1px solid #fff;border-radius:50%;
  transform:translate(-50%,-50%);transition:width .35s var(--e),height .35s var(--e)}
body.cur-hot .cursor i{width:58px;height:58px}
.macro__im img{will-change:transform}
[data-magnet]{transition:transform .5s var(--e)}

/* ── section furniture ──────────────────────────────────────────────── */
.sec{padding:var(--gap) 0 0;max-width:1760px;margin:0 auto}
.sec__head{padding:0 var(--pad);margin-bottom:clamp(36px,5vw,72px)}
.sec__head--row{display:flex;align-items:flex-end;justify-content:space-between;gap:40px;flex-wrap:wrap}
.sec__out{padding:0 var(--pad);margin-top:clamp(32px,4vw,56px)}
.g{display:grid;gap:clamp(14px,2.2vw,34px);padding:0 var(--pad)}
.g--2{grid-template-columns:repeat(2,1fr)}
.g--3{grid-template-columns:repeat(3,1fr)}
.g--4{grid-template-columns:repeat(4,1fr)}
.g--7{grid-template-columns:repeat(7,1fr);gap:clamp(10px,1.2vw,18px)}
.g--5{grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,24px)}
.it{opacity:0;transform:translateY(26px);transition:opacity .95s var(--e),transform .95s var(--e)}
.it.is-in{opacity:1;transform:none}
.it:nth-child(2){transition-delay:.1s}.it:nth-child(3){transition-delay:.2s}.it:nth-child(4){transition-delay:.3s}
.im{overflow:hidden;background:var(--paper-3);border-radius:2px;position:relative}
.im img{width:100%;height:100%;object-fit:cover;transition:transform 1.4s var(--e)}
.it:hover .im img,.card:hover .im img{transform:scale(1.04)}
.im--43{aspect-ratio:4/3}.im--45{aspect-ratio:4/5}.im--32{aspect-ratio:3/2}.im--11{aspect-ratio:1/1.1}
.im__n{position:absolute;top:16px;left:16px;font-size:var(--b2);color:var(--ink);background:var(--veil);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);padding:6px 10px;border-radius:99px}
.im__n--ink{background:var(--ink);color:var(--paper)}
.it .dsc,.it .h{margin-top:22px}
.it .h+.u{margin-top:6px}
.macro{padding:0 var(--pad);margin-bottom:clamp(40px,5vw,80px)}
.macro__im{overflow:hidden;aspect-ratio:21/8;border-radius:2px;background:var(--paper-3)}
.macro__im img{width:100%;height:100%;object-fit:cover}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{padding:8px 13px;border:1px solid var(--line-2);border-radius:99px;font-size:var(--b2);white-space:nowrap;color:var(--ink-2)}

/* 01 · who we work with — four cards in free space; each type appears in turn */
.g--space{grid-template-columns:repeat(4,1fr)!important;gap:clamp(24px,4vw,80px) clamp(18px,3vw,56px);align-items:start}
.sp{transition-delay:calc(var(--i) * .1s);max-width:min(300px,19vw)}
.sp:nth-child(1){margin-top:clamp(0px,6vw,110px)}
.sp:nth-child(2){margin-top:0;justify-self:end}
.sp:nth-child(3){margin-top:clamp(0px,11vw,190px)}
.sp:nth-child(4){margin-top:clamp(0px,3vw,60px);justify-self:end}
.sp:nth-child(2) .im,.sp:nth-child(4) .im{aspect-ratio:3/4}
.clipim{clip-path:inset(0 0 100% 0);transition:clip-path 1.25s var(--e)}
.clipim{transition-delay:calc(var(--i) * .1s)}
.is-in .clipim{clip-path:inset(0 0 0 0)}
.sp .h,.sp .dsc{opacity:0;transform:translateY(12px);transition:opacity .8s var(--e),transform .8s var(--e);transition-delay:calc(var(--i) * .1s + .3s)}
.sp.is-in .h,.sp.is-in .dsc{opacity:1;transform:none}

/* 02 · catalogue — the snapping rail, one card per category */
.rail__ui{display:flex;align-items:center;gap:14px}
.rail__bar{display:block;width:clamp(90px,12vw,180px);height:1px;background:var(--line-2);position:relative}
.rail__bar i{position:absolute;left:0;top:-1px;height:3px;width:20%;background:var(--ink);transition:transform .2s linear}
.rail{overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scrollbar-width:none;padding-block:4px;cursor:grab;scroll-snap-type:x mandatory;padding-inline:var(--pad);scroll-padding-inline:var(--pad);-webkit-overflow-scrolling:touch}
.rail::-webkit-scrollbar{display:none}
.rail.drag{cursor:grabbing;scroll-snap-type:none}
.rail__track{display:flex;gap:clamp(12px,1.6vw,24px);width:max-content;padding-right:var(--pad)}
.card{width:clamp(272px,30vw,460px);flex:none;scroll-snap-align:start;display:block}
.rail .it{transform:none}
.rail .it:hover .im img{transform:scale(1.04)}
.card__im{aspect-ratio:4/3}
.card .h{margin-top:20px}
.card:hover h3{text-decoration:underline;text-underline-offset:5px;text-decoration-thickness:1px}
.sec__head--row>div:first-child{flex:1;min-width:0}

/* category pages keep the old row layout */
.cats{display:grid;gap:clamp(44px,6vw,90px);padding:0 var(--pad)}
.cat{display:grid;grid-template-columns:minmax(240px,.7fr) minmax(0,2.3fr);gap:clamp(20px,3vw,48px);padding-top:clamp(20px,3vw,40px);border-top:1px solid var(--line)}
.cat__h{display:grid;gap:18px;align-content:start;justify-items:start;position:sticky;top:110px}
.cat__h h3{font-size:var(--a3)}
.cat__h .u{display:block;color:var(--ink-4)}
.cat__base{display:grid;gap:3px;transition:color .3s}
.cat__base b{font-weight:400}
.cat__base:hover b{text-decoration:underline;text-underline-offset:4px}
.cat__g{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.6vw,24px)}

/* 03 · base models — five in an asymmetric composition: one wide, one tall, three small */
.g--models{grid-template-columns:repeat(6,1fr);gap:clamp(24px,4vw,72px) clamp(14px,2.2vw,34px);align-items:start}
.model{transition-delay:calc(var(--i) * .12s)}
.model:nth-child(1){grid-column:1/5}
.model:nth-child(1) .im,.model:nth-child(2) .im{aspect-ratio:auto;height:min(36vw,560px)}
.model:nth-child(1) .im img,.model:nth-child(2) .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.model:nth-child(2){grid-column:5/7}
.model:nth-child(3){grid-column:1/3}
.model:nth-child(3) .im{aspect-ratio:4/5}
.model:nth-child(4){grid-column:3/5}
.model:nth-child(4) .im{aspect-ratio:4/5}
.model:nth-child(5){grid-column:5/7}
.model:nth-child(5) .im{aspect-ratio:4/5}
.model:nth-child(n+6){grid-column:span 2}
.model:nth-child(n+6) .im{aspect-ratio:4/5}

.model .spec{display:grid;width:100%}
.spec div{display:grid;grid-template-columns:minmax(100px,.6fr) 1fr;gap:12px;padding:8px 0;border-bottom:1px solid var(--line)}
.spec dd{color:var(--ink)}
.model__a{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.model .dsc{margin-top:18px}
.model .dsc .u{color:var(--ink-3)}

/* 04 · tabletop */
.sub{padding:clamp(28px,4vw,56px) var(--pad) 0}
.sub .u{display:block;margin-bottom:18px;color:var(--ink-3)}
.sub .g{padding:0}
.sw .im{background:var(--tone)}
.sw .im img{mix-blend-mode:multiply;opacity:.85;filter:grayscale(1) contrast(1.05)}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:clamp(20px,3vw,48px);align-items:end}
.row2>div{display:grid;gap:14px;justify-items:start}
.fig__n{font-size:clamp(44px,5vw,72px);line-height:.9}

/* 05 · legs */
.leg__svg{width:58%;height:auto;color:var(--ink-2);margin:auto}
.leg .im{display:grid;place-items:center}
.leg .card__im{aspect-ratio:4/3}

/* 06 · how we work — the numbered list + two photos */
.craft__grid{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1fr);gap:clamp(30px,5vw,90px);padding:0 var(--pad);align-items:stretch}
.craft__list{align-self:start}
.craft__im{display:grid;min-height:0}
.craft__im .im{height:100%}
.craft__im .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.craft__list li{padding:18px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(14px);transition:opacity .8s var(--e),transform .8s var(--e)}
.craft__list li:first-child{border-top:1px solid var(--line)}
.craft__list li.is-in{opacity:1;transform:none}
.craft__list .dsc__t{gap:20px}
.craft__list .dsc__t>:first-child{flex:none}
.craft__list em{font-size:var(--b2);color:var(--ink-4);flex:none;min-width:30px}
.craft__list .dsc__t h3{flex:1;display:inline-block;transition:transform .5s var(--e)}
.craft__list .dsc__t:hover h3{transform:translateX(10px)}
.craft__list .dsc__c{padding-left:50px}
.craft__ims{display:grid;gap:clamp(14px,2vw,28px)}
.craft__ims figure{overflow:hidden;border-radius:2px;background:var(--paper-3);aspect-ratio:4/3}
.craft__ims img{width:100%;height:100%;object-fit:cover}
.craft__ims figure:nth-child(2){margin-left:clamp(20px,7vw,110px)}

/* 07 · factory — the big figures, as the project numeral was */
.fact{display:grid;grid-template-columns:auto auto minmax(0,1fr);gap:clamp(24px,4vw,70px);padding:0 var(--pad);align-items:end;margin-bottom:clamp(36px,5vw,72px)}
.fact__f{display:grid;gap:8px;justify-items:center;text-align:center}
.fact__f .fig__n{font-size:clamp(62px,10.5vw,184px);line-height:.78;opacity:.9}
.fact__t{color:var(--ink-2);max-width:48ch;font-size:var(--b1);line-height:1.4;padding-bottom:6px}

/* 08 · gallery */
.proj{display:grid;gap:12px}
.proj__ims{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.proj__ims figure{aspect-ratio:3/2;overflow:hidden;border-radius:2px;background:var(--paper-3)}
.proj__ims img{width:100%;height:100%;object-fit:cover}

/* ═══════════ 09 · QUOTE — the one warm field ═══════════ */
.samples__in{max-width:1760px;margin:0 auto;padding:0 var(--pad);display:grid;grid-template-columns:minmax(0,.8fr) minmax(360px,1.1fr);gap:clamp(30px,5vw,90px);align-items:start}
.samples__l{position:sticky;top:110px;display:grid;gap:0}
.samples__im{margin-top:clamp(28px,4vw,56px);overflow:hidden;border-radius:2px;aspect-ratio:3/2;background:var(--paper-3)}
.samples__im img{width:100%;height:100%;object-fit:cover}
.contact__c{display:grid;gap:8px;margin-top:clamp(24px,3vw,40px)}
.contact__c a:hover{text-decoration:underline;text-underline-offset:4px}
.contact__c .big{font-size:var(--a3)}
.qf{padding:clamp(22px,2.6vw,36px);display:grid;gap:16px}
.f{display:grid;gap:7px;min-width:0}
.f>span,.f>legend{font-size:var(--b2);color:var(--ink-3)}
.f small{line-height:1.4}
.f2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.f3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px}
.qf input:not([type=checkbox]):not([type=radio]),.qf textarea,.qf select{width:100%;border-bottom:1px solid var(--line-2);padding:9px 0;font-size:var(--b2);
  transition:border-color .3s;resize:vertical;border-radius:0;background:transparent;color:var(--ink)}
.qf select{appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:20px;background-repeat:no-repeat;background-position:right 2px center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' fill='none' stroke='%238E8A84' stroke-width='1.2'/%3E%3C/svg%3E")}
.qf select option{color:#0B0B0B;background:#fff}
.qf input:focus,.qf textarea:focus,.qf select:focus{outline:none;border-color:var(--ink)}
.qf input::placeholder,.qf textarea::placeholder{color:var(--ink-4)}
.qf input[type=file]{padding:8px 0;color:var(--ink-2)}
.qf input[type=file]::file-selector-button{font:inherit;color:var(--ink);background:none;border:1px solid var(--line-2);border-radius:99px;padding:6px 12px;margin-right:10px;cursor:pointer}
.qf input:user-invalid,.qf select:user-invalid{border-color:#B3261E}
.radios{display:flex;gap:16px;padding:9px 0}
.radios label{display:flex;align-items:center;gap:8px;cursor:pointer}
.radios input{accent-color:var(--ink)}
.hp{position:absolute;left:-9999px;width:0;height:0;opacity:0}
.agree{display:flex!important;align-items:flex-start;gap:10px;cursor:pointer;position:relative}
.agree input{position:absolute;opacity:0;width:0;height:0}
.agree .box{width:15px;height:15px;border:1px solid var(--line-2);border-radius:2px;flex:none;margin-top:2px;position:relative;transition:.3s}
.agree .box::after{content:'';position:absolute;inset:3px;background:var(--ink);opacity:0;transition:opacity .25s}
.agree input:checked+.box{border-color:var(--ink)}
.agree input:checked+.box::after{opacity:1}
.agree input:focus-visible+.box{outline:2px solid var(--ink);outline-offset:2px}
.agree i{font-size:var(--b2);color:var(--ink-3);line-height:1.5}
.agree a{text-decoration:underline;text-underline-offset:3px}
.qf__ok{font-size:var(--b1);line-height:1.45}
.qf__err{color:#B3261E;line-height:1.5}
.qf__pre{color:var(--ink-3);padding:10px 14px;border:1px solid var(--line);border-radius:2px}
.qf button[type=submit]{justify-self:start}
.picks{display:grid;gap:10px}
.picks__g{display:flex;flex-wrap:wrap;gap:5px}
.pick{position:relative;cursor:pointer}
.pick input{position:absolute;opacity:0;width:0;height:0}
.pick span{display:inline-block;padding:8px 13px;border:1px solid var(--line-2);border-radius:99px;font-size:var(--b2);color:var(--ink-2);transition:.28s var(--e)}
.pick:hover span{border-color:var(--ink)}
.pick input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.pick input:focus-visible+span{outline:2px solid var(--ink);outline-offset:2px}

.samples__in--home{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);align-items:stretch}
.samples__in--home .samples__l{position:static}
.contact__a{display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:clamp(28px,4vw,48px)}
.contact__im{display:grid}
.contact__im .im{height:100%;min-height:0}
.contact__im .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ═══════════ FOOTER ═══════════ */
.foot{padding:var(--gap) var(--pad) 22px;overflow:hidden}
.foot__row{display:flex;flex-wrap:wrap;gap:8px 26px;max-width:1760px;margin:0 auto clamp(48px,7vw,110px)}
.foot__row a,.foot__row span{font-size:var(--b2);color:var(--ink-3);transition:color .3s}
.foot__row a:hover{color:var(--ink)}
.foot__mark{max-width:1760px;margin:0 auto;line-height:.76;overflow:hidden;text-align:center}
.foot__mark span{display:block;font-size:clamp(52px,15.8vw,268px);color:var(--ink);white-space:nowrap;transform:translateY(22%);transition:transform 1.4s var(--e)}
.foot__mark b{color:var(--ghost);font-weight:inherit;font-variation-settings:inherit;letter-spacing:inherit;line-height:inherit}
.foot__mark.is-in span{transform:none}
.foot__base{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;max-width:1760px;margin:26px auto 0;padding-top:18px;border-top:1px solid var(--line)}

/* ── standalone pages, prose, cookie ─────────────────────────────────── */
.page{padding-top:clamp(70px,10vh,100px)}
.page .sec{padding-block:clamp(40px,6vw,88px) 0}
.prose{padding:0 var(--pad);max-width:860px;display:grid;gap:14px}
.prose h2{font-size:var(--a3);margin-top:18px}
.prose p{color:var(--ink-2);line-height:1.55}
.prose b{color:var(--ink)}
.prose a{text-decoration:underline;text-underline-offset:3px}
.nf{display:grid;gap:22px;justify-items:start;min-height:60svh;align-content:center;padding:0 var(--pad)}
.cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:900;margin:0 auto;max-width:640px;display:flex;gap:16px;align-items:center;
  justify-content:space-between;flex-wrap:wrap;padding:14px 18px;background:var(--veil);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border:1px solid var(--line);border-radius:2px;box-shadow:0 10px 40px rgba(0,0,0,.12)}
.cookie[hidden]{display:none}
.cookie p{color:var(--ink-2);max-width:40ch;line-height:1.45}
.cookie a{text-decoration:underline;text-underline-offset:3px}
.cookie__b{display:flex;gap:8px}

/* ── responsive — the desktop composition is kept on every screen and scaled ──
   Column counts, the hero, the two-column blocks stay as on desktop; type,
   padding and gaps shrink with the viewport width. Only touch comfort differs. */
@media (max-width:900px){
  .hero{min-height:100svh;padding-top:clamp(64px,16vw,112px)}
  .hero__tables{gap:1.5vw}
  .hero__t--main{width:56vw}.hero__t--l{width:26vw}.hero__t--r{width:14vw}
  .wordmark{margin-top:-.5em}
  .hero__types .lnk{height:30px;padding:0 11px;font-size:12px}
  .hero__types .lnk--fill{padding-right:9px}
  .lnk{height:30px;padding:0 12px;font-size:12px}
  .menu{width:28px;height:28px}
  .menu i{left:8px;width:11px}
  .bar{top:22px;padding:9px var(--pad)}
  .topbar{font-size:9.5px;padding:4px var(--pad)}
  .act__d{width:34px;height:34px}
  .act__d--sm{width:26px;height:26px}
  .act--wide{min-width:0;padding:5px 5px 5px 16px}
  .im__n{font-size:11px;padding:4px 8px;top:8px;left:8px}
  .dsc__i{width:9px;height:9px}
  .card{width:clamp(150px,30vw,460px)}
  .spec div{grid-template-columns:minmax(0,.6fr) minmax(0,1fr);gap:8px;padding:5px 0}
  .spec dd,.spec dt{overflow-wrap:anywhere}
  .cookie{left:10px;right:10px;bottom:10px;padding:10px 12px;gap:10px}
  .sheet__nav a{font-size:clamp(20px,5vw,34px)}
  .thesis{min-height:70svh}
  .h h3,.card h3{font-size:clamp(11px,2.4vw,24px)}
  .g--7 .h h3,.g--5 .h h3{font-size:clamp(9px,2vw,24px)}
  .g--7 .u,.g--5 .u,.g--4 .u,.legs .u{font-size:clamp(9px,1.4vw,15px)}
  .fig__n{font-size:clamp(22px,5.5vw,72px);white-space:nowrap}
  .chip{padding:5px 9px;font-size:clamp(10px,1.4vw,15px)}
  .strip b{font-size:clamp(12px,2.2vw,40px)}
  .craft__list h3{font-size:clamp(13px,2.6vw,40px)}
  .model__a .lnk,.contact__a .lnk{white-space:normal;height:auto;min-height:30px;padding:6px 10px;text-align:center;line-height:1.2}
  .model__a{gap:6px}
  .h h3{overflow-wrap:anywhere}
  .u,.data{overflow-wrap:anywhere}
}
@media (hover:none){
  .qf input,.qf select,.qf textarea{font-size:16px}   /* iOS does not zoom the field */
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  .reveal,.it,.craft__list li,.hero__t,.wordmark,.sp .h,.sp .dsc{opacity:1;transform:none}
  .clipim{clip-path:none}
  .thesis__line .w{opacity:1}
  .ln>span{transform:none}
  .dsc__p{transition:none}
}
@media print{.topbar,.bar,.sheet,.fab,.cookie{display:none}}

/* the quote head sits in a column: tighter */
.samples__l .sec__head{padding:0;margin-bottom:0}
.samples__l .title{font-size:clamp(28px,3.4vw,52px)}
.samples__l .idx{margin-bottom:18px}