/* ---------------------------------------------------------------- tokens */
:root{
  --bg:#F2F0EC;
  --ink:#212325;
  --mute:#5A5D5F;
  --rule:rgba(33,35,37,.15);
  --rule-strong:rgba(33,35,37,.28);
  --dark:#212325;
  --on-dark:#F2F0EC;
  --on-dark-mute:#A8AAA8;
  --rule-dark:rgba(242,240,236,.18);
  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --gut:clamp(20px,5vw,64px);
  --sec:clamp(84px,11vw,168px);
  --ease:cubic-bezier(.22,.61,.36,1);
  --ez:cubic-bezier(.16,1,.3,1); /* motion layer: expo-out, matches the reference feel */
}

/* ---------------------------------------------------------------- reset  */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:var(--sans);font-size:16px;font-weight:400;line-height:1.6;
  letter-spacing:-.011em;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,figure,blockquote,ul{margin:0;padding:0}
ul{list-style:none}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}

:focus-visible{
  outline:2px solid var(--ink);outline-offset:3px;
}
.on-dark :focus-visible,.hero :focus-visible{outline-color:#F2F0EC}

.skip{
  position:absolute;left:-9999px;top:0;z-index:999;
  background:var(--ink);color:var(--bg);padding:12px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
}
.skip:focus{left:12px;top:12px}

/* ---------------------------------------------------------------- type   */
.display{
  font-size:clamp(38px,5.5vw,86px);font-weight:400;line-height:1.03;
  letter-spacing:-.028em;
}
.h2{
  font-size:clamp(27px,3.5vw,52px);font-weight:400;line-height:1.1;
  letter-spacing:-.025em;
}
.h3{
  font-size:clamp(19px,1.6vw,25px);font-weight:400;line-height:1.22;
  letter-spacing:-.02em;
}
.lede{
  font-size:clamp(17px,1.5vw,21px);font-weight:300;line-height:1.55;
  letter-spacing:-.016em;
}
.body{font-size:16px;line-height:1.68;color:var(--mute)}
.label{
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;color:var(--mute);
  display:inline-flex;align-items:center;gap:.65em;
}
.label::before{
  content:"";width:5px;height:5px;border-radius:50%;
  background:currentColor;flex:none;
}
.on-dark .label{color:var(--on-dark-mute)}

/* ---------------------------------------------------------------- shell  */
.wrap{max-width:1560px;margin:0 auto;padding-inline:var(--gut)}
.section{padding-block:var(--sec)}
.rule{height:1px;background:var(--rule);border:0;margin:0}

/* ---------------------------------------------------------------- header */
.header{
  position:fixed;inset:0 0 auto 0;z-index:100;
  padding:18px var(--gut);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:16px;
  color:#fff;mix-blend-mode:normal;
  transition:background .3s ease,color .3s ease,border-color .3s ease,padding .3s ease;
  border-bottom:1px solid transparent;
}
.header.is-solid{
  background:rgba(242,240,236,.92);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  backdrop-filter:saturate(150%) blur(14px);
  color:var(--ink);border-bottom-color:var(--rule);padding-block:14px;
}
.nav{display:flex;gap:clamp(14px,2vw,30px);align-items:center}
.nav a{
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  opacity:.82;position:relative;padding-block:4px;
}
.nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:currentColor;
  transition:width .35s var(--ease);
}
.nav a:hover{opacity:1}
.nav a:hover::after{width:100%}
.nav--right{justify-content:flex-end}
.wordmark{
  justify-self:center;text-align:center;line-height:1.05;
}
.wordmark .n{font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;white-space:nowrap}
.wordmark .s{
  display:block;font-family:var(--mono);font-size:8.5px;letter-spacing:.22em;
  text-transform:uppercase;opacity:.6;margin-top:3px;
}
.btn{
  display:inline-block;border:1px solid currentColor;background:transparent;color:inherit;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:10px 16px;border-radius:0;cursor:pointer;white-space:nowrap;text-align:center;
  transition:background .3s var(--ease),color .3s var(--ease);
}
.btn--solid{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.btn--solid:hover{background:transparent;color:var(--ink)}
.header:not(.is-solid) .btn--solid{background:#fff;border-color:#fff;color:var(--ink)}
.header:not(.is-solid) .btn--solid:hover{background:transparent;color:#fff}
.btn--lg{padding:16px 28px;font-size:11px}
.btn--light{background:#fff;border-color:#fff;color:var(--ink)}
.btn--light:hover{background:transparent;color:#fff}
.btn--ondark{background:var(--on-dark);border-color:var(--on-dark);color:var(--dark)}
.btn--ondark:hover{background:transparent;color:var(--on-dark)}

/* ---------------------------------------------------------------- hero   */
.hero{
  position:relative;min-height:100svh;height:112vh;
  display:flex;align-items:flex-end;color:#fff;overflow:hidden;
}
.hero__img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 55%;
}
/* hero parallax: the image lags the scroll (translateY only — same box, same crop) */
html.js .hero__img{will-change:transform}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,20,21,.42) 0%,rgba(18,20,21,.08) 34%,rgba(18,20,21,.22) 62%,rgba(18,20,21,.72) 100%);
}
.hero__inner{
  position:relative;z-index:2;width:100%;
  padding:0 var(--gut) clamp(40px,7vw,88px);
  max-width:1560px;margin:0 auto;
}
.hero .label{color:rgba(255,255,255,.86)}
.hero h1{margin-top:18px;max-width:17ch;text-wrap:balance}
.hero__foot{
  display:flex;flex-wrap:wrap;gap:24px 48px;align-items:flex-end;
  justify-content:space-between;margin-top:clamp(28px,4vw,52px);
}
.hero__sub{max-width:46ch;font-size:16px;line-height:1.6;color:rgba(255,255,255,.88)}
.cue{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  color:rgba(255,255,255,.8);
}
.cue span{display:block;width:1px;height:34px;background:rgba(255,255,255,.5);position:relative;overflow:hidden}
.cue span::after{
  content:"";position:absolute;inset:0;background:#fff;
  animation:drip 2.4s var(--ease) infinite;
}
@keyframes drip{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------------------------------------------------------------- stmt   */
.stmt{text-align:center;max-width:980px;margin:0 auto}
.stmt .h2{margin-top:26px;text-wrap:balance}
.stmt .body{margin:28px auto 0;max-width:62ch}
.meta-row{
  display:flex;flex-wrap:wrap;justify-content:center;gap:0;
  margin-top:clamp(48px,6vw,78px);border-top:1px solid var(--rule);
}
.meta-row div{
  flex:1 1 200px;padding:26px 20px;border-bottom:1px solid var(--rule);
  border-right:1px solid var(--rule);text-align:left;
}
.meta-row div:last-child{border-right:0}
.meta-row dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.meta-row dd{margin:8px 0 0;font-size:clamp(17px,1.4vw,20px);letter-spacing:-.02em}

/* -- utilities (these replace the inline style attributes the single-page demo
      carried, so the markup other pages copy stays attribute-free) -- */
.sec-head .h2{margin-top:22px}
.section--flush-top{padding-top:0}
.meta-row--flush{margin-top:0;border-top:0}
.reviews__top .score{margin-top:18px}
.reviews__top .body{max-width:36ch;font-size:15px}
.sr-only{
  position:absolute;width:1px;height:1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;
}

/* ---------------------------------------------------------------- rail   */
.sec-head{
  display:flex;flex-wrap:wrap;gap:20px 40px;align-items:flex-end;
  justify-content:space-between;padding-bottom:28px;border-bottom:1px solid var(--rule);
}
.sec-head .h2{max-width:18ch}
.sec-head p{max-width:40ch;font-size:15px;line-height:1.6;color:var(--mute)}

.rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:clamp(280px,26vw,400px);
  gap:clamp(14px,1.6vw,26px);
  overflow-x:auto;scroll-snap-type:x mandatory;
  padding:clamp(28px,4vw,52px) var(--gut);margin-top:0;
  scrollbar-width:thin;scrollbar-color:var(--rule-strong) transparent;
  -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{height:2px}
.rail::-webkit-scrollbar-thumb{background:var(--rule-strong)}
.card{scroll-snap-align:start;display:block;position:relative}
.card__fig{
  position:relative;overflow:hidden;aspect-ratio:4/5;background:#e4e1dc;
}
.card__fig img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ez),filter .6s var(--ease);
}
.card:hover .card__fig img,.card:focus-visible .card__fig img{transform:scale(1.03)}
.card__fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,transparent 48%,rgba(18,20,21,.62) 100%);
}
.card__name{
  position:absolute;z-index:2;left:18px;right:18px;bottom:16px;color:#fff;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
}
.card__name .t{font-size:clamp(17px,1.4vw,21px);letter-spacing:-.02em;line-height:1.15}
.card__name .i{font-family:var(--mono);font-size:10px;letter-spacing:.08em;opacity:.75}
.card__body{padding:16px 2px 0;border-top:1px solid var(--rule);margin-top:16px}
.card__body p{font-size:14.5px;line-height:1.6;color:var(--mute);margin-top:10px}
.card__body ul{
  display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:14px;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
}
.card__body li::after{content:" ·";opacity:.5}
.card__body li:last-child::after{content:""}

/* ---------------------------------------------------------------- dark   */
.on-dark{background:var(--dark);color:var(--on-dark)}
.on-dark .body{color:var(--on-dark-mute)}
.workshop,.text-asset{
  display:grid;gap:clamp(36px,5vw,76px);
  grid-template-columns:minmax(0,1fr) minmax(0,.82fr);align-items:center;
}
.workshop__txt .h2,.text-asset__txt .h2{margin-top:26px;max-width:15ch;text-wrap:balance}
.workshop__txt .body,.text-asset__txt .body{margin-top:26px;max-width:52ch}
.addr{
  margin-top:clamp(34px,4vw,56px);border-top:1px solid var(--rule-dark);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;
}
.addr div{padding:22px 20px 0 0}
.addr dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--on-dark-mute)}
.addr dd{margin:8px 0 0;font-size:16px;line-height:1.5}
.addr a:hover{text-decoration:underline;text-underline-offset:3px}
.workshop__fig{position:relative;overflow:hidden;aspect-ratio:4/5;background:#2b2d2f}
.workshop__fig img{width:100%;height:100%;object-fit:cover;filter:grayscale(.15)}
.text-asset__fig{position:relative;overflow:hidden;aspect-ratio:4/5;background:#e4e1dc}
.text-asset__fig img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- work   */
.work{display:grid;gap:0;border-top:1px solid var(--rule);margin-top:clamp(40px,5vw,70px)}
.work__item{
  display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px);align-items:start;
  padding-block:clamp(30px,3.6vw,52px);border-bottom:1px solid var(--rule);
}
.work__meta .idx{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--mute)}
.work__meta .h3{margin-top:14px;max-width:16ch}
.work__meta ul{
  display:flex;flex-wrap:wrap;gap:6px 10px;margin-top:18px;
  font-family:var(--mono);font-size:10px;letter-spacing:.07em;text-transform:uppercase;color:var(--mute);
}
.work__meta li::after{content:" ·";opacity:.5}
.work__meta li:last-child::after{content:""}
.work__meta p{margin-top:16px;font-size:15px;line-height:1.65;color:var(--mute);max-width:40ch}
.work__shots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(10px,1.2vw,18px)}
.work__shots figure{position:relative;overflow:hidden;aspect-ratio:4/5;background:#e4e1dc}
.work__shots figure.wide{grid-column:span 2;aspect-ratio:16/10}
.work__shots img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ez)}
.work__shots figure:hover img{transform:scale(1.03)}

/* ---------------------------------------------------------------- band   */
.band{
  display:block;width:100%;overflow:hidden;background:#e4e1dc;
  aspect-ratio:1241/405;max-height:56vh;
}
.band img{width:100%;height:100%;object-fit:cover}

/* ---------------------------------------------------------------- revs   */
.reviews__top{
  display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:22px 40px;border-bottom:1px solid var(--rule);padding-bottom:30px;
}
.score{display:flex;align-items:baseline;gap:14px}
.score b{font-size:clamp(44px,5.2vw,76px);font-weight:300;letter-spacing:-.04em;line-height:1}
.score span{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.stars{font-size:13px;letter-spacing:.22em;color:var(--ink)}
.quotes{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:0;margin-top:0;
}
.quotes .quote:nth-child(3n){border-right:0}
.quote{
  padding:clamp(28px,3.2vw,44px) clamp(20px,2.4vw,38px);
  border-bottom:1px solid var(--rule);border-right:1px solid var(--rule);
  display:flex;flex-direction:column;
}
.quote blockquote{font-size:16.5px;line-height:1.6;letter-spacing:-.014em;flex:1}
.quote figcaption{
  margin-top:24px;font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--mute);
}

/* ---------------------------------------------------------------- cta    */
.cta{
  position:relative;min-height:62vh;display:flex;align-items:center;
  color:#fff;overflow:hidden;text-align:center;
}
.cta img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 58%}
.cta::after{content:"";position:absolute;inset:0;background:rgba(18,20,21,.5)}
.cta__in{position:relative;z-index:2;width:100%;padding:clamp(70px,9vw,130px) var(--gut);max-width:1100px;margin:0 auto}
.cta .label{color:rgba(255,255,255,.86)}
.cta .h2{margin-top:22px;text-wrap:balance}
.cta p{margin:22px auto 0;max-width:50ch;color:rgba(255,255,255,.88);font-size:16px}
.cta .btn{margin-top:36px}

/* ---------------------------------------------------------------- form   */
.enq{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1fr);gap:clamp(40px,6vw,96px)}
.enq__aside .h2{margin-top:24px;max-width:13ch;text-wrap:balance}
.enq__aside .body{margin-top:24px;max-width:40ch}
.contacts{margin-top:clamp(32px,4vw,52px);border-top:1px solid var(--rule)}
.contacts div{padding:20px 0;border-bottom:1px solid var(--rule);display:flex;gap:16px;justify-content:space-between;flex-wrap:wrap}
.contacts dt{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.contacts dd{margin:0;font-size:16px;letter-spacing:-.015em}
.contacts a:hover{text-decoration:underline;text-underline-offset:3px}

form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(18px,2.4vw,34px)}
.field{display:flex;flex-direction:column;padding-bottom:26px}
.field--full{grid-column:1/-1}
.field label{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin-bottom:10px}
.field input,.field select,.field textarea{
  background:transparent;border:0;border-bottom:1px solid var(--rule-strong);
  padding:10px 0;border-radius:0;font-size:16px;letter-spacing:-.015em;
  transition:border-color .3s var(--ease);
}
.field textarea{resize:vertical;min-height:96px}
.field select{appearance:none;-webkit-appearance:none;cursor:pointer}
.field--select{position:relative}
.field--select::after{
  content:"";position:absolute;right:2px;bottom:38px;width:7px;height:7px;
  border-right:1px solid var(--mute);border-bottom:1px solid var(--mute);
  transform:rotate(45deg);pointer-events:none;
}
.field input:focus,.field select:focus,.field textarea:focus{border-bottom-color:var(--ink);outline:none}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.form__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:18px 26px;align-items:center;justify-content:space-between;padding-top:6px}
.form__note{font-size:13.5px;line-height:1.55;color:var(--mute);max-width:42ch}
.form__msg{
  grid-column:1/-1;margin-top:20px;padding:18px 20px;border:1px solid var(--rule-strong);
  font-size:15px;line-height:1.55;
}
.form__msg[hidden]{display:none}
.form__msg a{text-decoration:underline;text-underline-offset:3px}

/* ---------------------------------------------------------------- foot   */
.footer{border-top:1px solid var(--rule);padding-block:clamp(52px,6vw,86px) 34px}
.footer__grid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:36px 32px}
.footer h4{font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--mute)}
.footer ul{margin-top:16px;display:grid;gap:9px;font-size:15px}
.footer ul a:hover{text-decoration:underline;text-underline-offset:3px}
.footer__mark .n{font-size:clamp(22px,2.4vw,32px);letter-spacing:-.025em;line-height:1.1}
.footer__mark p{margin-top:14px;font-size:15px;color:var(--mute);max-width:32ch;line-height:1.6}
.footer__base{
  margin-top:clamp(46px,5vw,76px);padding-top:22px;border-top:1px solid var(--rule);
  display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}

/* ---------------------------------------------------------------- reveal */
/* Every hidden state below is scoped to html.js — with JS off, nothing is invisible. */
html.js .rv{opacity:0;transform:translateY(22px);transition:opacity 1s var(--ease),transform 1s var(--ease)}
html.js .rv.in{opacity:1;transform:none}
html.js .rv-d1{transition-delay:.09s}
html.js .rv-d2{transition-delay:.18s}
html.js .rv-d3{transition-delay:.27s}

/* ------------------------------------------------------- motion: lenis   */
html.lenis,html.lenis body{height:auto}
html.lenis-smooth{scroll-behavior:auto!important}
html.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
html.lenis-stopped{overflow:hidden}

/* -------------------------------------------- motion: masked line reveal */
.ln{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.ln__i{display:block}
html.js .splitting .ln__i{transform:translateY(100%)}
/* the resting (pre-script) state only — the live offset is written inline by the
   shared rAF loop as an exponential decay, so there is deliberately no transition
   here and opacity is never touched: the lines lag the scroll and catch up. */
html.js .split .ln__i{transform:translateY(100%)}

/* ------------------------------------------- motion: hairline draw-in    */
html.js .dl{position:relative}
html.js .dl--t{border-top-color:transparent!important}
html.js .dl--b{border-bottom-color:transparent!important}
html.js .dl::after{
  content:"";position:absolute;left:0;right:0;height:1px;background:var(--rule);
  transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ez) .22s;
}
html.js .on-dark .dl::after{background:var(--rule-dark)}
html.js .dl--t::after{top:0}
html.js .dl--b::after{bottom:0}
html.js .dl.in::after{transform:scaleX(1)}

/* ------------------------------------------------ motion: image reveal   */
@keyframes imgIn{from{transform:scale(1.08)}to{transform:scale(1)}}
html.js .imgrv{opacity:0;transition:opacity .6s var(--ez)}
html.js .imgrv img{transform:scale(1.08)}
html.js .imgrv.in{opacity:1}
html.js .imgrv.in img{transform:none;animation:imgIn 1.2s var(--ez) backwards}
/* hover must out-specify the reveal rule above */
html.js .card:hover .card__fig img,
html.js .card:focus-visible .card__fig img{transform:scale(1.03)}
html.js .work__shots figure:hover img{transform:scale(1.03)}

/* ------------------------------------------------ motion: custom cursor  */
.cur{
  position:fixed;left:0;top:0;z-index:900;pointer-events:none;
  opacity:0;transition:opacity .3s ease;mix-blend-mode:difference;
}
.cur.on{opacity:1}
.cur__dot{
  position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;
  background:#fff;transition:opacity .2s ease,transform .2s ease;
}
.cur__ring{
  position:absolute;width:36px;height:36px;margin:-18px 0 0 -18px;border-radius:50%;
  border:1px solid rgba(255,255,255,.75);
  transition:width .3s var(--ez),height .3s var(--ez),margin .3s var(--ez),border-color .3s ease;
}
.cur.is-hot .cur__dot{opacity:0;transform:scale(.4)}
.cur.is-hot .cur__ring{width:64px;height:64px;margin:-32px 0 0 -32px}
@media (pointer:coarse),(hover:none){.cur{display:none!important}}

/* ------------------------------------------------ motion: button labels  */
.btn__lbl{position:relative;display:block;overflow:hidden}
.btn__lbl i{display:block;font-style:normal;transition:transform .4s var(--ez)}
.btn__lbl i+i{position:absolute;left:0;right:0;top:0;transform:translateY(100%)}
.btn:hover .btn__lbl i,.btn:focus-visible .btn__lbl i{transform:translateY(-100%)}
.btn:hover .btn__lbl i+i,.btn:focus-visible .btn__lbl i+i{transform:translateY(0)}

/* ------------------------------------------------ motion: rail           */
html.js .rail{cursor:grab}
html.js .rail.is-drag{cursor:grabbing;scroll-snap-type:none;user-select:none}
html.js .rail.is-drag a,html.js .rail.is-drag img{pointer-events:none}
.rail-prog{display:none}
html.js .rail-prog{
  display:block;
  position:relative;height:1px;background:var(--rule);overflow:hidden;
  margin-top:clamp(18px,2.4vw,30px);
}
.rail-prog i{
  position:absolute;left:0;top:0;bottom:0;width:100%;background:var(--ink);
  transform:scaleX(0);transform-origin:left;
}

/* ---------------------------------------------------------------- resp   */
@media (max-width:1080px){
  .workshop,.text-asset{grid-template-columns:1fr}
  .workshop__fig{aspect-ratio:16/10;order:-1}
  .text-asset__fig{aspect-ratio:16/10}
  .work__item{grid-template-columns:1fr}
  .enq{grid-template-columns:1fr}
}
@media (max-width:860px){
  .nav--left{display:none}
  .header{grid-template-columns:auto 1fr}
  .header .wordmark{justify-self:start;text-align:left}
  .nav--right{justify-content:flex-end}
  .nav--right a:not(.btn){display:none}
  .rail{grid-auto-columns:minmax(230px,72vw)}
  .meta-row div{flex-basis:50%;border-right:0}
  .meta-row div:nth-child(odd){border-right:1px solid var(--rule)}
  .footer__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quotes .quote:nth-child(3n){border-right:1px solid var(--rule)}
  .quotes .quote:nth-child(2n){border-right:0}
}
@media (max-width:600px){
  .hero{height:auto;min-height:94svh;padding-top:120px}
  form{grid-template-columns:1fr}
  .quotes{grid-template-columns:1fr}
  .quotes .quote{border-right:0}
  .work__shots figure{aspect-ratio:1/1}
  .footer__grid{grid-template-columns:1fr}
  .meta-row div{flex-basis:100%;border-right:0!important}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  html{scroll-behavior:auto!important}
  html.js .rv,html.js .rv.in{opacity:1;transform:none}
  html.js .split .ln__i,html.js .splitting .ln__i{transform:none!important}
  html.js .hero__img{transform:none!important;will-change:auto}
  html.js .imgrv{opacity:1}
  html.js .imgrv img,html.js .imgrv.in img{transform:none!important;animation:none!important}
  html.js .dl::after{transform:scaleX(1)!important}
  .cur{display:none!important}
  .cue span::after{animation:none!important}
  .pt{display:none!important}
  html.js .navpanel{transition:none!important}
}

/* ================================================================================
   MULTI-PAGE ADDITIONS (wave 1)
   Everything above this line is the design system extracted verbatim from
   demos/01-fluid.html. Everything below is what a multi-page site needs and a
   single page did not: nav active state, a mobile nav disclosure, the page
   transition cover, and the two shared page-level primitives (`text-header`,
   `text-asset`) that the inventory in SITE-01.md asks for.
   ================================================================================ */

/* ---------------------------------------------------------------- nav: active */
/* The current page reads as a permanently-drawn underline — the same hairline
   the hover state wipes in, so the language is unchanged. */
.nav a[aria-current="page"]{opacity:1}
.nav a[aria-current="page"]::after{width:100%}

/* ---------------------------------------------------------- nav: mobile menu */
/* ≤860px the inline nav links are hidden (as they already were). A 6-page site
   needs them reachable, so the same links appear in a disclosure panel.
   No-JS: the button is hidden and the footer nav is the fallback. */
.navtoggle{display:none}
html.js .navtoggle{
  display:none;
  border:1px solid currentColor;background:transparent;color:inherit;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;
  padding:10px 14px;cursor:pointer;
}
/* under 860px the inline links are gone, so the toggle is the only navigation.
   The quote CTA moves into the panel so the header stays wordmark + Menu and
   never crowds at 390px. With JS off there is no toggle, so the header CTA
   stays put and the footer nav is the fallback. */
@media (max-width:860px){
  html.js .navtoggle{display:inline-block}
  html.js .header .nav--right .btn{display:none}
}
.navpanel{display:none}
html.js .navpanel{
  display:block;
  position:fixed;inset:0 0 auto 0;z-index:99;
  background:var(--bg);color:var(--ink);
  border-bottom:1px solid var(--rule);
  padding:84px var(--gut) clamp(28px,5vw,44px);
  transform:translateY(-101%);
  transition:transform .55s var(--ez),visibility .55s linear;
  visibility:hidden;
}
html.js .navpanel.is-open{transform:none;visibility:visible}
.navpanel ul{display:grid;gap:2px}
.navpanel li{border-bottom:1px solid var(--rule)}
.navpanel a{
  display:block;padding:15px 0;
  font-size:clamp(20px,5vw,27px);letter-spacing:-.025em;line-height:1.2;
}
.navpanel a[aria-current="page"]{color:var(--mute)}
.navpanel__foot{
  margin-top:clamp(26px,4vw,38px);display:grid;gap:9px;
  font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);
}
.navpanel__foot a:hover{text-decoration:underline;text-underline-offset:3px}
.navpanel__foot .btn{justify-self:start;margin-bottom:8px}
.navpanel__foot .btn:hover{text-decoration:none}

/* -------------------------------------------------------- page transition */
/* Exit cover only: the overlay is created by site.js, so a no-JS page can never
   be left covered. On click it fades up over the leaving page, then navigation
   happens; the arriving page paints fresh and its own reveals play. Scroll is
   restored to the top by site.js (history.scrollRestoration = 'manual'). */
.pt{
  position:fixed;inset:0;z-index:950;background:var(--bg);
  opacity:0;pointer-events:none;
  transition:opacity .42s var(--ez);
}
.pt.is-on{opacity:1;pointer-events:auto}
@media (prefers-reduced-motion:reduce){
  .pt{display:none!important}
  html.js .navpanel{transition:none}
}

/* ---------------------------------------------------------- text-header */
/* Short page-title band: mono label + big title, ~300px. Sits under the fixed
   header, so it carries its own top padding. `--th-pad` tunes the height. */
.text-header{
  --th-pad:clamp(132px,15vw,196px);
  padding:var(--th-pad) 0 clamp(48px,6vw,80px);
  border-bottom:1px solid var(--rule);
}
.text-header__in{max-width:1560px;margin:0 auto;padding-inline:var(--gut)}
.text-header h1,.text-header .display{margin-top:20px;max-width:20ch;text-wrap:balance}
.text-header .lede{margin-top:clamp(22px,2.6vw,32px);max-width:54ch;color:var(--mute)}
.text-header--tall{--th-pad:clamp(168px,20vw,272px)}
/* with an image: title band over a plate, same crop language as the hero */
.text-header--fig{position:relative;overflow:hidden;color:#fff;border-bottom:0}
.text-header--fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.text-header--fig::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(18,20,21,.46) 0%,rgba(18,20,21,.2) 46%,rgba(18,20,21,.62) 100%);
}
.text-header--fig .text-header__in{position:relative;z-index:2}
.text-header--fig .label{color:rgba(255,255,255,.86)}
.text-header--fig .lede{color:rgba(255,255,255,.88)}

/* ------------------------------------------------------------ text-asset */
/* Text one side, a single image the other. Identical grid to `.workshop`
   (which is this component on the dark band) — the rules it shares are added
   to the existing selectors above, this block only carries what is new. */
.text-asset--flip .text-asset__fig{order:-1}
.text-asset--wide .text-asset__fig{aspect-ratio:16/10}
.text-asset__txt .lede{margin-top:26px;max-width:46ch}
@media (max-width:1080px){
  .text-asset--flip .text-asset__fig{order:-1}
}

/* ================================================================================
   MULTI-PAGE ADDITIONS (wave 2) — the ten remaining inventory components
   --------------------------------------------------------------------------------
   Reverse-engineered from the live reference with demos/tools + puppeteer. The
   reference lays every one of these out on a 24-column grid with a 2rem gutter
   (18px at 1440, root 1rem = 9px) inside a 4rem page margin, and has exactly one
   breakpoint (600px). Ported onto this system's own tokens: `--gut` for the page
   margin, `--g24` for the 24-col gutter, `--sec`-scaled rhythm, this site's type
   classes, zero radius, the same hairline colours. Column spans are kept VERBATIM
   so the compositions read the same; only the gutter and type scale are ours.
   Nothing above this line is modified.
   ================================================================================ */

:root{
  --g24:clamp(10px,1.25vw,18px);   /* the reference's 2rem grid gutter */
  --r24:clamp(22px,2.5vw,36px);    /* its 4rem grid row gap */
  --rhy:clamp(64px,9.4vw,135px);   /* its 15rem block rhythm */
  --hdr:58px;                      /* the solid header's height — sticky heads clear it */
}

/* _components.html ONLY — the specimen label above each block in the kitchen
   sink. This is not a site component: never use it on a real page. */
.spec{max-width:1560px;margin:0 auto;padding:clamp(44px,5.5vw,80px) var(--gut) 0}
.spec hr{height:1px;background:var(--rule-strong);border:0;margin:0 0 12px}
.spec code{font-family:var(--mono);font-size:12px;letter-spacing:.01em;color:var(--ink)}
.spec span{font-family:var(--mono);font-size:10.5px;letter-spacing:.05em;color:var(--mute);margin-left:16px}

/* a 24-column field inside the page gutter — the spine of every component below */
.c24{
  display:grid;grid-template-columns:repeat(24,minmax(0,1fr));
  column-gap:var(--g24);
  max-width:1560px;margin:0 auto;padding-inline:var(--gut);
}

/* ---------------------------------------------------------- product-header */
/* Reference: section is a 2-column flex — image 98.3rem (61.4%) on the LEFT,
   text 61.7rem (38.6%) on the right via order:2, the text column 100svh tall and
   vertically centred with a 8.4rem inner padding; image aspect 983/1211 so it
   overhangs the text column. A "back" link is absolutely placed top-left.
   ≤600px it stacks with a 16rem top padding (clearing the fixed header). */
.product-header{position:relative;margin-bottom:18px}
.product-header__in{display:flex;max-width:1560px;margin:0 auto}
.product-header__fig{width:61.44%;overflow:hidden;background:#e4e1dc}
.product-header__fig img{width:100%;height:100%;object-fit:cover;aspect-ratio:983/1211}
.product-header__txt{
  order:2;width:38.56%;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  padding-inline:clamp(28px,5.3vw,76px);
}
.product-header__txt .h2{margin:clamp(18px,1.9vw,27px) 0;max-width:15ch;text-wrap:balance}
.product-header__note{
  margin-top:clamp(18px,1.9vw,27px);
  font-size:13px;line-height:1.3;color:var(--mute);max-width:34ch;
}
.product-header__back{
  position:absolute;z-index:6;top:clamp(78px,8vw,96px);left:var(--gut);
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
}
.product-header__back::before{
  content:"";width:13px;height:1px;background:currentColor;flex:none;
  transition:width .35s var(--ease);
}
.product-header__back:hover::before{width:22px}

/* ---------------------------------------------------------------- assets-duo */
/* Reference: a 24-col grid, 2rem gap, align-items:start, and six named
   compositions that differ only in the two children's column spans. Verbatim. */
.assets-duo{align-items:start;row-gap:var(--g24)}
.assets-duo figure{position:relative;overflow:hidden;background:#e4e1dc;margin:0}
.assets-duo img{width:100%;height:auto;display:block}
.assets-duo--p1 > :first-child{grid-column:3/15}
.assets-duo--p1 > :nth-child(2){grid-column:15/23}
.assets-duo--p2 > :first-child{grid-column:1/13}
.assets-duo--p2 > :nth-child(2){grid-column:13/21}
.assets-duo--p3 > :first-child{grid-column:5/17}
.assets-duo--p3 > :nth-child(2){grid-column:17/25}
.assets-duo--l1 > :first-child{grid-column:1/7}
.assets-duo--l1 > :nth-child(2){grid-column:7/25}
.assets-duo--l2 > :first-child{grid-column:1/19}
.assets-duo--l2 > :nth-child(2){grid-column:19/25}
.assets-duo--l3 > :first-child{grid-column:1/25}
.assets-duo--l3 > :nth-child(2){grid-column:11/23}

/* ---------------------------------------------------------------- text-blocks */
/* Reference: 24-col, hairline top, 2rem top padding. Mono label 1/11, the big
   lede 11/24 (4.8rem) with a 13rem gap under it, then stacked rows 11/24 — each
   row a 10%-ink hairline with a 32.1rem title and a 49.3rem column of copy.
   `.text-blocks` is itself the grid so site.js's existing hairline wiring for
   `.text-blocks` / `.text-blocks > *` keeps working untouched. */
.text-blocks{border-top:1px solid var(--rule);padding-top:18px;align-items:start}
.text-blocks > .label{grid-column:1/11}
.text-blocks__lede{grid-column:11/24;margin:10px 0 clamp(46px,8.1vw,117px);text-wrap:balance}
.text-blocks__list{grid-column:11/24}
.text-blocks__row{
  display:grid;grid-template-columns:minmax(0,.4fr) minmax(0,.6fr);
  column-gap:var(--g24);
  border-top:1px solid rgba(33,35,37,.1);
  padding:18px 0 clamp(30px,3.8vw,54px);
}
.text-blocks__row:last-child{padding-bottom:0}
.text-blocks__row .h3{font-size:16.5px;line-height:1.3;letter-spacing:-.01em;font-weight:500}
.text-blocks__row p{font-size:16px;line-height:1.5;color:var(--ink)}
.text-blocks__row p + p{margin-top:18px}

/* -------------------------------------------- overview heads + filter pills */
/* Shared by collection-overview and projects-overview: a hairline head that
   sticks to the top of the viewport (inset:-1px 0 auto) over a page-coloured
   background, the mono section title left and the filter pills right. */
.ovh{
  position:sticky;inset:var(--hdr) 0 auto;z-index:2;
  display:flex;align-items:flex-start;gap:16px;
  max-width:1560px;margin:0 auto;padding:18px var(--gut);
  background:var(--bg);border-top:1px solid var(--rule);
}
.ovh__nav{
  margin-left:auto;display:flex;gap:9px;
  overflow-x:auto;scrollbar-width:none;
}
.ovh__nav::-webkit-scrollbar{display:none}
.filter{
  background:var(--bg);border:1px solid var(--rule);
  height:40px;padding:0 22px;white-space:nowrap;cursor:pointer;
  font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.09em;text-transform:uppercase;
  transition:background .3s var(--ease),color .3s var(--ease),border-color .3s var(--ease);
}
.filter:hover,.filter[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}

/* ------------------------------------------------------------------- tile */
/* The one card both overviews are built from: a 430/530 plate and a 2rem title. */
.tile{display:block;position:relative}
.tile__fig{position:relative;overflow:hidden;background:#e4e1dc;aspect-ratio:430/530}
.tile__fig img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ez)}
.tile:hover .tile__fig img,.tile:focus-visible .tile__fig img{transform:scale(1.03)}
.tile__t{margin-top:10px;font-size:clamp(17px,1.4vw,20px);line-height:1.3;letter-spacing:-.018em}
.tile__tag{
  position:absolute;z-index:2;top:18px;right:18px;
  background:rgba(242,240,236,.92);color:var(--ink);padding:6px 10px;
  font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;
}

/* -------------------------------------------------- collection-overview */
/* Reference: the sticky head, an absolutely-positioned aside whose wrapper is
   sticky for 100svh and parks a 55.8rem/4rem heading at the bottom-left of the
   viewport, and a 24-col field whose product grid sits at 11/25 — inside it,
   per-category 2-up grids with a 4rem/2rem gap and 15rem between categories. */
.collection-overview{position:relative;margin-block:var(--r24)}
.collection-overview__aside{position:absolute;inset:0;pointer-events:none}
.collection-overview__sticky{position:sticky;top:0;height:100svh;max-width:1560px;margin:0 auto}
.collection-overview__sticky .h2{
  position:absolute;bottom:clamp(28px,4vw,36px);left:var(--gut);
  max-width:min(502px,40vw);text-wrap:balance;
}
.collection-overview__in{position:relative;z-index:1;padding-top:var(--rhy)}
.collection-overview__grid{grid-column:11/25}
.cat{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--r24) var(--g24);margin-bottom:var(--rhy)}
.cat:last-child{margin-bottom:0}

/* ---------------------------------------------------- projects-overview */
/* Reference: the same sticky head, then one 24-col field with a 4rem row gap
   and an 8-item placement rhythm that walks the grid left and right — the
   reason the 10.6k-px page never reads as a plain three-up. Spans verbatim. */
.projects-overview{position:relative;margin-block:var(--r24)}
.projects-overview__grid{row-gap:var(--r24);padding-top:var(--rhy)}
.projects-overview__grid > .tile:nth-child(8n+1){grid-column:11/18}
.projects-overview__grid > .tile:nth-child(8n+2){grid-column:18/25}
.projects-overview__grid > .tile:nth-child(8n+3){grid-column:4/11}
.projects-overview__grid > .tile:nth-child(8n+4),
.projects-overview__grid > .tile:nth-child(8n+5){grid-column:11/18}
.projects-overview__grid > .tile:nth-child(8n+6){grid-column:4/11}
.projects-overview__grid > .tile:nth-child(8n+7){grid-column:11/18}
.projects-overview__grid > .tile:nth-child(8n+8){grid-column:18/25}
.projects-overview__banner{grid-column:11/25;position:relative;overflow:hidden;background:#e4e1dc;margin:0}
.projects-overview__banner img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10}

/* ----------------------------------------------------------------- slider */
/* Reference: a 100svh (max 90rem) dark panel. Background plates crossfade at
   80% opacity under a black bottom gradient; the active slide's 6.4rem headline
   and mono project name sit bottom-left in a 68.6rem column; a 1px track with a
   filling bar runs the autoplay (~5s), with prev/next and an "01 / 05" readout
   bottom-right. Markup is one <article> per slide carrying BOTH its plate and
   its text, so with no JS the same markup is a scrollable row of real slides. */
.slider{
  position:relative;overflow:hidden;
  background:var(--dark);color:#fff;
}
html.js .slider{height:100svh;max-height:810px;touch-action:pan-y}
.slider__track{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
html.js .slider__track{position:absolute;inset:0;display:block;overflow:visible}
.slider__slide{position:relative;flex:0 0 100%;min-width:100%;scroll-snap-align:start}
html.js .slider__slide{
  position:absolute;inset:0;min-width:0;
  opacity:0;visibility:hidden;transition:opacity 1s var(--ease),visibility 1s linear;
}
html.js .slider__slide.is-on{opacity:1;visibility:visible}
.slider__fig{position:relative;margin:0;overflow:hidden;aspect-ratio:16/9}
html.js .slider__fig{position:absolute;inset:0;aspect-ratio:auto;opacity:.8}
.slider__fig img{width:100%;height:100%;object-fit:cover}
.slider__fig::after{
  content:"";position:absolute;inset:0;z-index:5;opacity:.5;
  background:linear-gradient(180deg,rgba(0,0,0,0) 0,#000 100%);
}
.slider__txt{
  position:relative;padding:clamp(22px,3vw,34px) var(--gut) clamp(28px,4vw,40px);
}
html.js .slider__txt{
  position:absolute;z-index:1;left:var(--gut);bottom:72px;
  width:min(617px,calc(100% - var(--gut) * 2));padding:0;
}
.slider__txt .display{max-width:20ch;text-wrap:balance}
.slider__txt .label{color:rgba(255,255,255,.86);margin-top:clamp(22px,3vw,43px)}
.slider__ui{display:none}
html.js .slider__ui{display:block}
.slider__prog{
  position:absolute;z-index:2;left:var(--gut);right:var(--gut);bottom:110px;
  height:1px;background:rgba(255,255,255,.2);overflow:hidden;
}
.slider__prog i{
  position:absolute;inset:0;background:rgba(255,255,255,.8);
  transform:scaleX(0);transform-origin:left;
}
.slider__nav{position:absolute;z-index:2;right:var(--gut);bottom:144px;display:flex;gap:9px}
.slider__nav button{
  width:45px;height:45px;border:0;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,rgba(255,255,255,.15),rgba(255,255,255,.2));
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);
  transition:background .3s var(--ease);
}
.slider__nav button:hover{background:rgba(255,255,255,.3)}
.slider__nav button:first-child svg{transform:rotate(180deg)}
.slider__nav svg{width:14px;height:9px;display:block}
.slider__ind{
  position:absolute;z-index:1;right:var(--gut);bottom:72px;
  font-family:var(--mono);font-size:10.5px;font-weight:500;letter-spacing:.09em;
  text-transform:uppercase;color:#fff;
}

/* ---------------------------------------------------------------- process */
/* Reference: a 700svh dark section whose inner container is sticky for 100svh
   while a 10.2k-px inline-flex track is translated sideways by scroll progress;
   a 1px hairline across the top fills as it goes. Panels alternate an intro, a
   full-bleed asset and a two-column step (3.87rem text + a 445px plate).
   No JS / reduced motion: the section collapses to a snap-scrolling row. */
.process{background:var(--dark);color:var(--on-dark)}
html.js .process{height:700svh}
.process__in{position:relative}
html.js .process__in{position:sticky;top:0;height:100svh;overflow:hidden}
.process > .process__in > .label{
  position:absolute;z-index:1;top:calc(var(--hdr) + 38px);left:var(--gut);color:var(--on-dark-mute);
}
.process__prog{display:none}
html.js .process__prog{
  display:block;position:absolute;z-index:1;top:calc(var(--hdr) + 18px);left:var(--gut);right:var(--gut);
  height:1px;background:rgba(242,240,236,.2);overflow:hidden;
}
.process__prog i{position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left}
.process__track{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  padding-block:var(--sec);
}
html.js .process__track{
  display:inline-flex;height:100svh;overflow:visible;padding-block:0;
  will-change:transform;
}
.process__panel,.process__step,.process__asset{
  flex:none;scroll-snap-align:center;
  display:flex;flex-direction:column;justify-content:center;
  padding-inline:var(--gut);
}
.process__panel{width:min(792px,88vw)}
.process__step{width:min(1323px,92vw)}
.process__asset{width:min(1350px,94vw);padding-inline:0}
.process__asset figure{position:relative;overflow:hidden;margin:0;height:100%;background:#2b2d2f}
.process__asset img{width:100%;height:100%;object-fit:cover}
.process__panel .h2{max-width:22ch;text-wrap:balance}
.process__panel .body{margin-top:26px;max-width:40ch}
.process__step__in{
  /* the reference's step is a 967px block inside the 1323px panel: a 387px text
     column, a 135px gutter and a 445px plate */
  max-width:967px;margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,387fr) minmax(0,445fr);
  gap:clamp(24px,9.4vw,135px);align-items:center;
}
.process__step .idx{font-family:var(--mono);font-size:10.5px;letter-spacing:.09em;color:var(--on-dark-mute)}
.process__step .h2{margin-top:14px;max-width:14ch;text-wrap:balance}
.process__step .body{margin-top:22px;max-width:36ch}
.process__step figure{position:relative;overflow:hidden;margin:0;aspect-ratio:445/499;background:#2b2d2f}
.process__step figure img{width:100%;height:100%;object-fit:cover}

/* -------------------------------------------------------------------- faq */
/* Reference: 24-col, hairline top, 2rem padding. Mono label 1/25 with a 12rem
   gap, the 4.8rem question-set title 1/9, the accordion 13/25 closed by a
   hairline bottom. Each row: a full-width button, a 2rem title with a 10rem
   right inset, and a 1rem plus that rotates 45deg in 500ms ease-in-out. The
   panel's height animates. ONE row open at a time (measured: opening the third
   closed the first). No JS: every answer is simply open. */
.faq{border-top:1px solid var(--rule);padding-top:18px;margin-block:var(--rhy)}
.faq > .label{grid-column:1/25;margin-bottom:clamp(40px,7.5vw,108px)}
.faq__h{grid-column:1/9;text-wrap:balance}
.faq__list{grid-column:13/25;border-bottom:1px solid var(--rule)}
.faq__item{position:relative;overflow:hidden;border-top:1px solid var(--rule)}
.faq__q{
  width:100%;text-align:left;background:transparent;border:0;cursor:pointer;
  padding:0;color:inherit;display:block;
}
.faq__q .h3{display:block;margin:clamp(18px,1.9vw,27px) 0;padding-right:90px;font-size:clamp(17px,1.5vw,20px);line-height:1.3}
.faq__ic{
  position:absolute;top:36px;right:27px;width:10px;height:10px;pointer-events:none;
  transition:transform .5s ease-in-out;
}
.faq__ic::before,.faq__ic::after{content:"";position:absolute;background:currentColor}
.faq__ic::before{left:0;right:0;top:4.5px;height:1px}
.faq__ic::after{top:0;bottom:0;left:4.5px;width:1px}
.faq__q[aria-expanded="true"] .faq__ic{transform:rotate(45deg)}
html.js .faq__a{height:0;overflow:hidden;transition:height .5s ease-in-out}
.faq__a__in{padding:0 clamp(24px,13vw,173px) 27px 0;font-size:16px;line-height:1.45}
.faq__a__in a{text-decoration:underline;text-underline-offset:3px}
.faq__a__in p + p{margin-top:14px}

/* ------------------------------------------------------------------- tabs */
/* Reference: a 15rem-rhythm section. The tablist is a flex row of mono buttons
   over a hairline with a 2rem bottom padding and 4.8rem between items, 40%-ink
   when inactive; it scrolls sideways on small screens. 6rem under it the active
   panel becomes a 24-col grid: the lone-column variant spans 1/17, otherwise a
   1/7 text column plus a 10/25 (listings) or 9/25 (icons) detail column.
   Switching is an instant display swap — measured, no animation at all.
   No JS: `hidden` is applied by site.js, never in the markup, so every panel
   is visible and reachable. */
.tabs{margin-block:var(--rhy)}
.tabs__nav{margin-bottom:clamp(30px,3.8vw,54px);overflow-x:auto;scrollbar-width:none}
.tabs__nav::-webkit-scrollbar{display:none}
.tabs__nav ul{
  display:flex;border-bottom:1px solid var(--rule);padding-bottom:18px;
  max-width:1560px;margin:0 auto;padding-inline:var(--gut);
}
.tabs__nav li:not(:last-child){margin-right:clamp(22px,3vw,43px)}
.tabs__nav button{
  background:transparent;border:0;padding:0;cursor:pointer;white-space:nowrap;
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;color:rgba(33,35,37,.4);
  transition:color .3s var(--ease);
}
.tabs__nav button:hover{color:rgba(33,35,37,.7)}
.tabs__nav button[aria-selected="true"]{color:var(--ink)}
.tabs__panel[hidden]{display:none}
.tabs__panel + .tabs__panel{margin-top:clamp(40px,5vw,72px)}  /* no-JS stacking only */
html.js .tabs__panel + .tabs__panel{margin-top:0}
.tabs__col{grid-column:1/7}
.tabs__col--single{grid-column:1/17}
.tabs__col--wide{grid-column:10/25}
.tabs__col--icons{grid-column:9/25}
.tabs__txt{margin-top:clamp(22px,2.6vw,36px);font-size:15px;line-height:1.5;color:var(--mute)}
.specs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--r24) var(--g24)}
.specs h4{font-size:16px;font-weight:500;margin-bottom:10px}
.specs ul{padding-left:18px}
.specs li{position:relative;margin:5px 0;font-size:15px;line-height:1.45;color:var(--mute)}
.specs li::before{
  content:"";position:absolute;top:7px;left:-18px;width:5px;height:5px;
  border:1px solid currentColor;opacity:.4;transform:rotate(45deg);
}
.icongrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g24)}
.icongrid figure{position:relative;margin:0;border:1px solid var(--rule);aspect-ratio:1/1;overflow:hidden}
.icongrid img{width:100%;height:100%;object-fit:cover}
.icongrid figcaption{
  position:absolute;inset:auto 18px 18px;text-align:center;
  font-family:var(--mono);font-size:10px;font-weight:500;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mute);
}

/* -------------------------------------------------------- banner-brochure */
/* Reference: hairline top, 2rem padding, 24-col, vertically centred. Mono label
   1/25 with a 6rem gap, the plate 1/16, the text block 17/24 (mono subtitle,
   4rem heading, black button). ≤600px it stacks and the text centres. */
.banner-brochure{
  border-top:1px solid var(--rule);padding-top:18px;
  align-items:center;margin-block:var(--r24);
}
.banner-brochure > .label{grid-column:1/25;margin-bottom:clamp(30px,3.8vw,54px)}
.banner-brochure__fig{grid-column:1/16;position:relative;overflow:hidden;margin:0;background:#e4e1dc}
.banner-brochure__fig img{width:100%;height:auto;display:block}
.banner-brochure__txt{grid-column:17/24}
.banner-brochure__txt .sub{
  font-family:var(--mono);font-size:11px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;
}
.banner-brochure__txt .h2{margin:clamp(18px,1.9vw,27px) 0;text-wrap:balance}

/* ---------------------------------------------------------------- resp w2 */
@media (max-width:1080px){
  .product-header__txt{padding-inline:clamp(24px,4vw,48px)}
  .process__step__in{grid-template-columns:1fr;gap:28px}
  .process__step figure{aspect-ratio:16/10}
  .icongrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .specs{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  :root{--hdr:68px}   /* the header grows when the wordmark moves left */
  /* the 24-col field keeps its spans where they still read, and collapses to a
     single stacked column where the reference collapses its own grid at 600px */
  .product-header__in{flex-direction:column}
  .product-header__fig,.product-header__txt{width:100%}
  .product-header__txt{order:0;min-height:0;padding:clamp(28px,6vw,44px) 0 0}
  .product-header__fig{order:1;margin-top:clamp(28px,5vw,40px)}
  .product-header__back{position:static;margin:0 0 clamp(18px,3vw,26px)}
  .product-header{padding-top:clamp(104px,15vw,140px)}
  .product-header__in{padding-inline:var(--gut)}

  .text-blocks > .label,.text-blocks__lede,.text-blocks__list{grid-column:1/25}
  .text-blocks__lede{margin:18px 0 clamp(34px,5vw,48px)}
  .text-blocks__row{grid-template-columns:1fr;row-gap:10px}

  .collection-overview__aside{display:none}
  .collection-overview__grid{grid-column:1/25!important}
  .projects-overview__banner{grid-column:1/-1!important}
  .collection-overview__in,.projects-overview__grid{padding-top:clamp(104px,16vw,135px)}
  .projects-overview__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .projects-overview__grid > .tile{grid-column:auto!important}

  .faq > .label,.faq__h,.faq__list{grid-column:1/25}
  .faq__h{margin-bottom:clamp(26px,4vw,36px)}
  .faq__ic{right:0}
  .faq__q .h3{padding-right:40px}
  .faq__a__in{padding-right:clamp(0px,6vw,58px)}

  .tabs__col,.tabs__col--single,.tabs__col--wide,.tabs__col--icons{grid-column:1/25}
  .tabs__col + .tabs__col{margin-top:clamp(28px,5vw,40px)}

  .banner-brochure > .label,.banner-brochure__fig,.banner-brochure__txt{grid-column:1/25}
  .banner-brochure__txt{margin-top:clamp(22px,4vw,27px)}

  html.js .slider{max-height:none}
  html.js .slider__txt{bottom:108px}
  .slider__prog{bottom:84px}
  .slider__nav{display:none}
  .slider__ind{bottom:56px}

  html.js .process{height:520svh}
  .process__panel,.process__step{width:92vw}
  .process__asset{width:92vw}
}
@media (max-width:600px){
  /* the reference's own breakpoint: both duo children become a fixed-width
     flex row (portraits) or a full-width column (landscapes) */
  .assets-duo{display:flex;gap:var(--g24);align-items:flex-start}
  .assets-duo > *{grid-column:auto!important}
  .assets-duo--p1 > :first-child,.assets-duo--p2 > :first-child,.assets-duo--p3 > :first-child{width:61%}
  .assets-duo--p1 > :nth-child(2),.assets-duo--p2 > :nth-child(2),.assets-duo--p3 > :nth-child(2){width:39%}
  .assets-duo--l1,.assets-duo--l2,.assets-duo--l3{flex-direction:column}
  .assets-duo--l1 > :nth-child(2),.assets-duo--l3 > :nth-child(2){width:68%;margin-left:auto}
  .assets-duo--l2 > :first-child{width:68%;margin-left:auto}

  .projects-overview__grid{grid-template-columns:1fr}
  .cat{grid-template-columns:1fr}
  .specs,.icongrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ovh{flex-wrap:wrap}
  .ovh__nav{margin-left:0;width:100%;margin-top:14px}
  .slider__txt .label{margin-top:18px}
}
@media (prefers-reduced-motion:reduce){
  /* no pin, no autoplay, no crossfade: the slider and the process track are
     plain snap-scrolling rows and every slide/panel is reachable by scroll. */
  html.js .slider{height:auto;max-height:none}
  html.js .slider__track{position:static;display:flex;overflow-x:auto}
  html.js .slider__slide{position:relative;flex:0 0 100%;min-width:100%;opacity:1;visibility:visible}
  html.js .slider__fig{position:relative;aspect-ratio:16/9;opacity:1}
  html.js .slider__txt{position:relative;left:auto;bottom:auto;width:auto;padding:clamp(22px,3vw,34px) var(--gut) clamp(28px,4vw,40px)}
  .slider__prog,.slider__nav{display:none}
  .slider__ind{position:static;display:block;padding:0 var(--gut) 20px}
  html.js .process{height:auto}
  html.js .process__in{position:static;height:auto;overflow:visible}
  html.js .process__track{display:flex;height:auto;overflow-x:auto;transform:none!important;padding-block:var(--sec)}
  .process__prog{display:none!important}
  .process > .process__in > .label{position:static;padding:var(--sec) var(--gut) 0}
  /* the accordion still opens and closes; the 500ms height/rotate just lands at once
     (the global reduced-motion rule above already flattens every duration) */
  html.js .faq__a{transition:none}
  .faq__ic{transition:none}
}