/* ==========================================================
   DOLLSKIN — quiet edition
   A beauty-counter treatment: bone ground, ink type, hairline
   rules, and skin as the subject. Palette anchored on
   #F1F0ED / #161616. Motion is slow and mechanical, never bouncy.
   ========================================================== */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}

:root{
  --bone:#F1F0ED;
  --bone-2:#E7E4DD;
  --sand:#DCD6CB;
  --clay:#C3B4A4;
  --ink:#161616;
  --ink-soft:#23231F;
  --ink-70:rgba(22,22,22,.7);
  --ink-52:rgba(22,22,22,.52);
  --ink-38:rgba(22,22,22,.38);
  --rule:rgba(22,22,22,.14);
  --rule-soft:rgba(22,22,22,.07);
  --on-dark:rgba(241,240,237,.72);
  --wrap:1280px;
  --gut:clamp(20px,5vw,72px);
  --sec:clamp(76px,13vh,168px);
  --ease:cubic-bezier(.16,1,.3,1);
  --f:"Instrument Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,monospace;
}

html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bone);color:var(--ink);
  font-family:var(--f);font-weight:400;font-size:16px;line-height:1.55;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--bone)}

/* ---------- type ---------- */
.eyebrow{
  font-size:.66rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-52);margin:0;
}
.d1,.d2,.d3{font-weight:400;text-transform:lowercase;margin:0;letter-spacing:-.04em;line-height:.94}
.d1{font-size:clamp(2.7rem,7.6vw,6.2rem)}
.d2{font-size:clamp(2rem,5.4vw,4.2rem);line-height:.96}
.d3{font-size:clamp(1.4rem,2.7vw,2.2rem);line-height:1.04;letter-spacing:-.03em}
.lede{font-size:clamp(1rem,1.3vw,1.16rem);line-height:1.6;color:var(--ink-70);margin:0;max-width:56ch}
.small{font-size:.86rem;line-height:1.6;color:var(--ink-52);margin:0}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-38)}

/* ---------- shell ---------- */
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
section{position:relative}
.sec{padding-block:var(--sec)}
.sec.tight{padding-block:clamp(52px,8vh,104px)}
.dark{background:var(--ink);color:var(--bone)}
.dark .eyebrow{color:var(--on-dark)}
.dark .lede{color:var(--on-dark)}
.dark .small{color:rgba(241,240,237,.52)}
.dark .rule,.dark hr{background:rgba(241,240,237,.16)}

/* ---------- reveal ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform 1.05s var(--ease)}
.rv.in{opacity:1;transform:none}
.rv.d1x{transition-delay:.08s}.rv.d2x{transition-delay:.16s}
.rv.d3x{transition-delay:.24s}.rv.d4x{transition-delay:.32s}
@media (prefers-reduced-motion:reduce){ .rv{opacity:1;transform:none;transition:none} }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--ink);color:var(--bone);border:0;border-radius:2px;cursor:pointer;
  padding:16px 28px 15px;font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease);
}
.btn:hover{background:#31312D}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.btn.ghost:hover{background:var(--ink);color:var(--bone)}
.dark .btn{background:var(--bone);color:var(--ink)}
.dark .btn:hover{background:#fff}
.dark .btn.ghost{background:transparent;color:var(--bone);box-shadow:inset 0 0 0 1px rgba(241,240,237,.5)}
.dark .btn.ghost:hover{background:var(--bone);color:var(--ink)}
.btn.sm{padding:12px 20px 11px;font-size:.64rem}
.btn[disabled]{opacity:.4;cursor:not-allowed}
.link{
  display:inline-flex;align-items:center;gap:8px;padding-bottom:3px;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  border-bottom:1px solid var(--rule);transition:border-color .4s var(--ease)
}
.link:hover{border-color:var(--ink)}

/* ---------- nav ---------- */
.nav{
  position:fixed;inset:0 0 auto;z-index:60;background:transparent;
  transition:background .5s var(--ease),border-color .5s var(--ease);
  border-bottom:1px solid transparent;padding-top:env(safe-area-inset-top,0px);
}
/* No backdrop-filter: a full-width fixed blur over scrolling photography
   re-composites the whole strip every frame and flickers. At 93% opaque it
   was blurring the 7% you could see through it anyway. */
.nav.stuck{background:rgb(241,240,237);border-color:var(--rule)}   /* fully opaque: with the blur gone, any translucency ghosts the text passing under it */
.nav-in{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.mark{font-size:.96rem;font-weight:500;letter-spacing:.34em;text-transform:uppercase}
.nav-links{display:flex;align-items:center;gap:clamp(14px,2.2vw,32px)}
.nav-links a{
  font-size:.7rem;font-weight:500;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-70);
  transition:color .35s var(--ease)
}
.nav-links a:hover{color:var(--ink)}
@media (max-width:880px){ .nav-links a.hide{display:none} }

/* The quiet edition breathes on a phone: wider gutters, taller section
   rhythm, and more space inside every stacked block. */
@media (max-width:760px){
  :root{--gut:clamp(24px,7vw,40px);--sec:clamp(64px,11vh,96px)}
  .sec.tight{padding-block:clamp(52px,9vh,80px)}
  .shead{gap:14px;margin-bottom:clamp(30px,5vh,46px)}
  .strip-in>div{padding-block:clamp(26px,4vh,38px)}
  .row{padding-block:clamp(22px,3.4vh,30px);gap:10px 16px}
  .st{padding-block:clamp(24px,3.6vh,34px) clamp(26px,4vh,38px)}
  .facts>div{padding-block:clamp(22px,3.2vh,30px)}
  .duo figcaption{padding-top:18px}
  .faq summary{padding-block:clamp(20px,3vh,26px)}
  .panel{gap:26px}
  .studio{gap:clamp(28px,5vh,44px)}
  .checkout,.done{gap:20px;padding-top:26px}
  .fields{gap:22px}
  .diagram{gap:clamp(28px,5vh,44px)}
  .dia-list>div{padding-block:clamp(16px,2.6vh,22px)}
  footer{padding-block:clamp(48px,8vh,72px) 36px}
  .fgrid{gap:clamp(30px,5vh,44px)}
  .hero{gap:clamp(26px,5vh,44px);padding-top:clamp(96px,14vh,140px)}
  .hero-copy{gap:clamp(16px,2.6vh,24px)}
  .hero-meta{gap:18px 26px;margin-top:12px}
  .band .cap{padding:clamp(24px,7vw,40px)}
}

/* ==========================================================
   HERO — type on bone, skin in the other column
   ========================================================== */
.hero{
  padding:clamp(104px,15vh,168px) 0 0;
  display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);
  gap:clamp(24px,5vw,72px);align-items:center;
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
}
.hero-copy{display:grid;gap:clamp(14px,2.2vh,24px);align-content:center}
/* the hero tagline is a full sentence, so it sits below display scale */
.hero .d1{font-size:clamp(2rem,4.2vw,3.5rem);line-height:1;max-width:19ch}
.hero-line{
  margin:0;font-size:clamp(.94rem,1.2vw,1.1rem);color:var(--ink);letter-spacing:-.01em;
  line-height:1.7;
}
.hero-line svg{
  display:inline-block;width:1.3em;height:auto;vertical-align:-.26em;margin:0 .3em;
  border-radius:2px;box-shadow:0 1px 3px rgba(22,22,22,.22);
}
.nw{white-space:nowrap}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:6px}
.hero-meta{display:flex;gap:clamp(14px,2.4vw,30px);flex-wrap:wrap;margin-top:8px}
.hero-meta span{display:grid;gap:3px}
.hero-meta b{font-weight:400;font-size:1.02rem;letter-spacing:-.02em}
.hero-meta small{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}

/* the skin panel: a fixed-ratio frame so the patch lands on the
   under-eye every time, whatever the viewport does */
.skin{
  position:relative;overflow:hidden;background:var(--bone-2);
  aspect-ratio:3/4;width:100%;
  /* the patches are tilted in 3D below, so the frame needs the camera */
  perspective:620px;perspective-origin:50% 36%;
}
/* Photo and patches live on ONE layer and are scaled together. Animating
   the image alone slid the face out from under the patches for the whole
   sixteen seconds of the zoom, which is what made them look stuck on the
   wrong part of the face. */
.skin-in{
  position:absolute;inset:0;transform-origin:50% 42%;
  /* the camera has to live on the layer that holds the patches, or the 3D
     tilt is flattened by the scale above it */
  perspective:620px;perspective-origin:50% 36%;
}
.skin>.skin-in>img{width:100%;height:100%;object-fit:cover;display:block}
.anim .skin .skin-in{animation:skinIn 16s var(--ease) both}
@keyframes skinIn{from{transform:scale(1.06)}to{transform:scale(1)}}
.skin .skin-in .gel{position:absolute;z-index:2;pointer-events:none;transform-style:preserve-3d}
/* the patch sits in the skin rather than over it: a wide, very soft
   multiply pool under it warms the shadow into the photograph, while the
   tight contact shadow lives in the SVG */
.skin .gel::before{
  content:"";position:absolute;z-index:-1;left:-6%;right:-6%;top:12%;bottom:-20%;
  border-radius:50%;
  background:radial-gradient(56% 60% at 50% 54%,rgba(38,22,12,.3),rgba(38,22,12,0) 74%);
  filter:blur(7px);mix-blend-mode:multiply;
}
.skin .gel .lay{position:absolute;inset:0;opacity:0;transition:opacity .9s var(--ease)}
.skin .gel .lay.on{opacity:1;position:relative}
/* no CSS drop-shadow: the patch carries its own contact shadow inside the
   SVG, shaped like the patch instead of boxed around it */
.skin .gel svg{width:100%;height:auto;display:block}
/* hero: one patch under one eye, calibrated to face-eye.jpg. The tilts bend
   it over the cheekbone - the outer end turns away towards the temple, the
   lower edge away down the cheek. */
.skin.one .gel{left:17.2%;top:45.2%;width:64%;transform-origin:86% 55%;transform:rotate(3deg) rotateX(-9deg) rotateY(-9deg)}
.skin-tag{
  position:absolute;z-index:3;left:0;bottom:0;padding:14px clamp(14px,2vw,22px);
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(to top,rgba(22,22,22,.62),transparent);
  width:100%;color:#F1F0ED;
}
.skin-tag i{
  font-style:normal;font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;opacity:.7
}
.skin-tag b{font-weight:400;font-size:.94rem;letter-spacing:-.01em}
@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);gap:clamp(22px,4vh,40px);padding-top:clamp(92px,13vh,132px)}
  .hero-copy{order:2}
  /* The patch placements are percentages of this box, calibrated against a
     3:4 crop - changing the ratio on a phone slides them off the eye. */
  .skin{order:1}
}

/* ---------- value strip ---------- */
.strip{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.strip-in{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);
}
.strip-in>div{background:var(--bone);padding:clamp(22px,3.4vh,36px) clamp(0px,2vw,26px);display:grid;gap:6px}
.strip b{font-weight:400;font-size:clamp(1.9rem,4.4vw,3rem);letter-spacing:-.04em;line-height:1}
.strip small{font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}
.strip p{margin:4px 0 0;font-size:.88rem;color:var(--ink-70);line-height:1.5}
@media (max-width:760px){
  .strip-in{grid-template-columns:1fr}
  .strip-in>div{padding-inline:0}
}

/* ==========================================================
   THE FACE SCROLL — pinned, four options on one face
   ========================================================== */
.face-track{position:relative;height:420svh}
.face-pin{
  position:sticky;top:0;height:100svh;overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
  gap:clamp(20px,4vw,64px);align-items:center;
  max-width:var(--wrap);margin-inline:auto;padding:clamp(88px,13vh,124px) var(--gut) clamp(40px,7vh,72px);
}
.face-copy{position:relative;display:grid;gap:18px;align-content:center;min-width:0}
.face-kicker{display:flex;align-items:center;gap:14px}
.face-kicker .n{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--ink-38)}
.face-kicker .bar{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden;max-width:180px}
.face-kicker .bar i{position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--fp,0));transform-origin:left;transition:transform .6s var(--ease)}
.face-heads{position:relative;min-height:2.1em}
.face-heads h2{
  position:absolute;left:0;right:0;top:0;margin:0;
  font-weight:400;text-transform:lowercase;letter-spacing:-.04em;line-height:.96;
  font-size:clamp(2rem,4.6vw,3.6rem);
  opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .8s var(--ease);
}
.face-heads h2.on{opacity:1;transform:none;position:relative}
.face-caps{position:relative;min-height:7.4em}
.face-caps article{
  position:absolute;left:0;right:0;top:0;opacity:0;transform:translateY(14px);pointer-events:none;
  transition:opacity .55s var(--ease),transform .8s var(--ease);display:grid;gap:12px;
}
.face-caps article.on{opacity:1;transform:none;position:relative;pointer-events:auto}
.face-caps .eg{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}
.face-caps p{margin:0;font-size:clamp(.94rem,1.2vw,1.08rem);line-height:1.6;color:var(--ink-70);max-width:44ch}
.face-caps .go{
  justify-self:start;font-size:.66rem;letter-spacing:.18em;text-transform:uppercase;
  border:0;background:none;padding:0 0 3px;cursor:pointer;border-bottom:1px solid var(--rule);
  transition:border-color .4s var(--ease)
}
.face-caps .go:hover{border-color:var(--ink)}
.face-stage{position:relative;justify-self:stretch}
/* the portrait: patches calibrated to face-a.jpg */
.skin.two .gel.l{left:26.2%;top:32%;width:18%;transform-origin:88% 58%;transform:rotate(-1deg) rotateX(-9deg) rotateY(-9deg)}
.skin.two .gel.r{left:57.1%;top:32.3%;width:18%;transform-origin:12% 58%;transform:rotate(1deg) rotateX(-9deg) rotateY(9deg)}
/* the studio preview: a second face, calibrated to face-d.jpg */
.skin.three .gel.l{left:25.2%;top:33.6%;width:19%;transform-origin:88% 58%;transform:rotate(14deg) rotateX(-9deg) rotateY(-9deg)}
.skin.three .gel.r{left:55.6%;top:33.3%;width:19%;transform-origin:12% 58%;transform:rotate(-14deg) rotateX(-9deg) rotateY(9deg)}
.face-dots{
  position:absolute;z-index:4;right:14px;top:50%;transform:translateY(-50%);
  display:grid;gap:10px;list-style:none;margin:0;padding:0;
}
.face-dots button{
  width:9px;height:9px;border-radius:50%;border:0;padding:0;cursor:pointer;
  background:rgba(241,240,237,.4);transition:background .4s var(--ease),transform .4s var(--ease);
}
.face-dots button[aria-current="true"]{background:#F1F0ED;transform:scale(1.5)}
@media (max-width:900px){
  .face-track{height:400svh}
  .face-pin{
    grid-template-columns:minmax(0,1fr);grid-template-rows:1fr auto;
    gap:clamp(14px,2.4vh,24px);padding:clamp(76px,11vh,104px) var(--gut) clamp(20px,3.6vh,34px);
    align-items:stretch;
  }
  .face-stage{order:1;min-height:0}
  .skin.two{height:auto;max-height:100%;margin-inline:auto}
  .face-copy{order:2;align-content:end;gap:12px}
  .face-heads{min-height:2em}
  .face-heads h2{font-size:clamp(1.9rem,8.6vw,2.7rem)}
  .face-caps{min-height:6.2em}
  .face-caps p{font-size:.92rem;line-height:1.5}
  .face-dots{right:10px}
}
@media (max-width:900px) and (max-height:760px){
  .face-caps p{display:none}
  .face-caps{min-height:2.6em}
}

/* ---------- marquee ---------- */
.marq{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);overflow:hidden;padding:18px 0}
.marq-in{display:flex;gap:clamp(26px,4vw,56px);width:max-content;will-change:transform}
.marq-in span{
  font-size:.72rem;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38);
  white-space:nowrap;display:inline-flex;align-items:center;gap:clamp(26px,4vw,56px)
}
.marq-in span::after{content:"";width:4px;height:4px;border-radius:50%;background:var(--clay);display:block}

/* ---------- studio ---------- */
.studio{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,.88fr);gap:clamp(24px,5vw,72px);align-items:start}
.vbar{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:16px 0 0}
.vbar b{font-weight:400;font-size:1.06rem;letter-spacing:-.02em;text-transform:lowercase}
.vbar span{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-38)}
.panel{display:grid;gap:24px}
.tabs{display:flex;gap:clamp(14px,2vw,22px);border-bottom:1px solid var(--rule)}
.tabs button{
  background:none;border:0;cursor:pointer;padding:0 0 12px;position:relative;
  font-size:.68rem;font-weight:500;letter-spacing:.17em;text-transform:uppercase;color:var(--ink-38);
  transition:color .4s var(--ease);
}
.tabs button::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--ink);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);
}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::after{transform:scaleX(1)}
.search input{
  width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);
  padding:11px 0;font-size:.92rem;
}
.search input:focus{outline:none;border-color:var(--ink)}
.search input::placeholder{color:var(--ink-38)}
.sw{display:grid;grid-template-columns:repeat(auto-fill,minmax(74px,1fr));gap:9px;max-height:clamp(210px,30vh,320px);overflow-y:auto;padding-bottom:6px}
.sw::-webkit-scrollbar{width:3px}
.sw::-webkit-scrollbar-thumb{background:var(--rule)}
.s1{background:none;border:0;cursor:pointer;padding:0;display:grid;gap:7px;justify-items:center;transition:opacity .35s var(--ease)}
.s1 .f{width:100%;aspect-ratio:3/2;overflow:hidden;background:var(--bone-2);box-shadow:inset 0 0 0 1px var(--rule-soft)}
.s1 .f img,.s1 .f svg{width:100%;height:100%;object-fit:cover;display:block}
.s1 em{font-style:normal;font-size:.66rem;color:var(--ink-52);text-align:center;line-height:1.25}
.s1:hover{opacity:.7}
.s1[aria-pressed="true"] .f{box-shadow:inset 0 0 0 1px var(--ink),0 0 0 1px var(--ink)}
.s1[aria-pressed="true"] em{color:var(--ink)}
.own{display:grid;gap:12px;justify-items:start}
.own input[type=file]{position:absolute;width:1px;height:1px;opacity:0}
.packs{display:grid;gap:1px;background:var(--rule)}
.pk{
  background:var(--bone);border:0;cursor:pointer;text-align:left;padding:18px 2px;
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
  transition:background .4s var(--ease)
}
.pk b{position:relative;font-weight:400;font-size:1.04rem;letter-spacing:-.02em;text-transform:lowercase;transition:padding-left .4s var(--ease)}
.pk small{grid-column:1;font-size:.78rem;color:var(--ink-52);transition:padding-left .4s var(--ease)}
.pk i{grid-row:1/3;grid-column:2;font-style:normal;font-size:1.04rem}
.pk[aria-pressed="true"]{background:var(--bone-2)}
.pk[aria-pressed="true"] b{padding-left:18px}
.pk[aria-pressed="true"] small{padding-left:18px}
.pk[aria-pressed="true"] b::before{content:"";position:absolute;left:0;top:.46em;width:8px;height:8px;background:var(--ink)}
.cycle{display:flex;gap:18px;align-items:center}
.cycle button{
  background:none;border:0;cursor:pointer;padding:0 0 4px;
  font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-38);
  border-bottom:1px solid transparent;transition:color .4s var(--ease),border-color .4s var(--ease)
}
.cycle button[aria-pressed="true"]{color:var(--ink);border-color:var(--ink)}
.tot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;border-top:1px solid var(--rule);padding-top:18px}
.tot .amt{font-size:clamp(1.7rem,3vw,2.4rem);letter-spacing:-.03em;line-height:1}
.tot .per{font-size:.76rem;color:var(--ink-52);text-align:right}
@media (max-width:900px){ .studio{grid-template-columns:minmax(0,1fr)} }

/* ---------- band ---------- */
.band{position:relative;overflow:hidden;background:var(--bone-2)}
.band img{width:100%;height:clamp(300px,64vh,680px);object-fit:cover;will-change:transform}
.band .cap{position:absolute;inset:auto 0 0;padding:var(--gut);background:linear-gradient(to top,rgba(22,22,22,.5),transparent);color:#F1F0ED}
.band .cap p{margin:0;max-width:34ch;font-size:clamp(1.05rem,2vw,1.6rem);line-height:1.22;letter-spacing:-.025em;text-transform:lowercase}
.band .cap small{display:block;margin-top:10px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;opacity:.74}

/* ---------- section head ---------- */
.shead{display:grid;gap:18px;margin-bottom:clamp(34px,6vh,72px);max-width:62ch}
.shead.mid{margin-inline:auto;text-align:center}
.shead.mid .lede{margin-inline:auto}

/* ---------- ingredient rows ---------- */
.rows{border-top:1px solid var(--rule)}
.row{
  display:grid;grid-template-columns:54px minmax(0,1fr) minmax(0,1.35fr) minmax(0,.8fr);
  gap:clamp(12px,2.4vw,36px);align-items:start;
  padding:clamp(20px,3vh,32px) 0;border-bottom:1px solid var(--rule);
}
.row .num{font-family:var(--mono);font-size:.72rem;color:var(--ink-38);padding-top:5px}
.row h3{margin:0;font-weight:400;font-size:clamp(1.1rem,1.8vw,1.42rem);letter-spacing:-.025em;text-transform:lowercase;line-height:1.1}
.row .sub{margin:4px 0 0;font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-38)}
.row p{margin:0;font-size:.92rem;color:var(--ink-70);line-height:1.62}
.row .why{margin:0;font-size:.8rem;color:var(--ink-38);line-height:1.5}
.row.out h3{}
@media (max-width:920px){
  .row{grid-template-columns:38px minmax(0,1fr);gap:8px 14px}
  .row p,.row .why{grid-column:2}
  .row .why{padding-top:2px}
}

/* ---------- annotated patch diagram ---------- */
.diagram{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(24px,5vw,72px);align-items:center}
.dia-art{position:relative;padding:clamp(10px,3vh,34px) 0}
.dia-art svg{width:100%;max-width:580px;height:auto;display:block;margin-inline:auto;overflow:visible}
.dia-list{display:grid;gap:0;border-top:1px solid rgba(241,240,237,.16)}
.dia-list>div{
  padding:clamp(14px,2.2vh,22px) 0;border-bottom:1px solid rgba(241,240,237,.16);
  display:grid;grid-template-columns:34px minmax(0,1fr);gap:14px;align-items:start;cursor:default;
}
.dia-list>div>span{font-family:var(--mono);font-size:.68rem;color:rgba(241,240,237,.44);padding-top:3px}
.dia-list>div>div{min-width:0}
.dia-list b{display:block;font-weight:400;font-size:1.04rem;letter-spacing:-.02em;text-transform:lowercase;color:rgba(241,240,237,.72);transition:color .4s var(--ease)}
.dia-list p{margin:5px 0 0;font-size:.88rem;line-height:1.55;color:rgba(241,240,237,.55)}
.dia-list>div.on b{color:#fff}
@media (max-width:900px){ .diagram{grid-template-columns:minmax(0,1fr)} }

/* ---------- facts ---------- */
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--rule)}
.facts>div{background:var(--bone);padding:clamp(18px,2.6vh,28px) clamp(0px,1.6vw,20px);display:grid;gap:5px;align-content:start}
.facts b{font-weight:400;font-size:clamp(1.4rem,2.6vw,2rem);letter-spacing:-.035em;line-height:1}
.facts small{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}
.facts p{margin:4px 0 0;font-size:.84rem;color:var(--ink-70);line-height:1.5}
.dark .facts{background:rgba(241,240,237,.16)}
.dark .facts>div{background:var(--ink)}
.dark .facts p{color:rgba(241,240,237,.6)}
.dark .facts small{color:rgba(241,240,237,.44)}
@media (max-width:860px){ .facts{grid-template-columns:1fr 1fr} }
@media (max-width:460px){ .facts{grid-template-columns:1fr} .facts>div{padding-inline:0} }

/* ---------- pull quote ---------- */
.quote{max-width:34ch;margin:0}
.quote p{margin:0;font-size:clamp(1.3rem,2.6vw,2.1rem);line-height:1.18;letter-spacing:-.03em;text-transform:lowercase}
.quote cite{display:block;margin-top:16px;font-style:normal;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}
.dark .quote cite{color:rgba(241,240,237,.44)}

/* ---------- duo ---------- */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(22px,4vw,56px);align-items:start}
.duo figure{margin:0}
.duo img{width:100%;height:clamp(240px,42vh,460px);object-fit:cover;filter:saturate(.9)}
.duo figcaption{padding:20px 0 0;display:grid;gap:8px}
.duo .k{display:flex;align-items:center;gap:9px;font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-52)}
.duo .k svg{width:20px;height:auto;border-radius:2px}
.duo p{margin:0;font-size:.92rem;color:var(--ink-70);line-height:1.6;max-width:42ch}
@media (max-width:820px){ .duo{grid-template-columns:1fr;gap:clamp(28px,5vh,48px)} }

/* ---------- steps ---------- */
.steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule)}
.st{background:var(--bone);padding:clamp(22px,3.4vh,38px) clamp(0px,2vw,26px) clamp(24px,4vh,44px);display:grid;gap:12px;align-content:start}
.st .num{font-family:var(--mono);font-size:.72rem;color:var(--ink-38)}
.st h3{margin:0;font-weight:400;font-size:clamp(1.12rem,2vw,1.5rem);letter-spacing:-.025em;text-transform:lowercase;line-height:1.05}
.st p{margin:0;font-size:.9rem;color:var(--ink-70);line-height:1.6}
@media (max-width:760px){ .steps{grid-template-columns:1fr} .st{padding-inline:0} }

/* ---------- faq ---------- */
.faq{border-top:1px solid var(--rule)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{
  list-style:none;cursor:pointer;padding:clamp(18px,2.8vh,26px) 0;
  display:flex;align-items:baseline;justify-content:space-between;gap:20px;
  font-size:clamp(1rem,1.5vw,1.18rem);letter-spacing:-.015em;text-transform:lowercase;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:1.1rem;color:var(--ink-38)}
.faq details[open] summary::after{content:"–"}
.faq .body{padding:0 0 clamp(20px,3vh,30px);max-width:66ch}
.faq .body p{margin:0 0 12px;font-size:.93rem;color:var(--ink-70);line-height:1.66}
.faq .body p:last-child{margin-bottom:0}

/* ---------- the studio checkout ---------- */
.checkout,.done{
  display:grid;gap:18px;border-top:1px solid var(--rule);padding-top:22px;margin-top:4px;
  animation:coIn .6s var(--ease) both;
}
@keyframes coIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.co-top{display:grid;gap:6px}
.co-sum{margin:0;font-size:1.06rem;letter-spacing:-.02em}
.co-code{
  margin:0;font-family:var(--mono);font-size:.76rem;letter-spacing:.1em;color:var(--ink-52);
}
.done{justify-items:start}
.done .tick{
  display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  background:var(--ink);color:var(--bone);
}
.done .tick svg{width:20px;height:20px}
.done .lede{font-size:1rem}

/* ---------- reserve ---------- */
.reserve{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(26px,5vw,84px);align-items:start}
@media (max-width:920px){ .reserve{grid-template-columns:minmax(0,1fr)} }
.ticket{background:var(--bone);box-shadow:inset 0 0 0 1px var(--rule);display:grid;grid-template-rows:1fr auto;position:sticky;top:110px}
@media (max-width:920px){ .ticket{position:static} }
.tk-top{padding:clamp(20px,2.6vw,30px)}
.tk-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:20px;border-bottom:1px solid var(--rule)}
.tk-head .m{font-size:.8rem;letter-spacing:.3em;text-transform:uppercase}
.tk-head .k{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-38)}
.tk-art{padding:clamp(14px,2.4vh,26px) 0}
.tk-art .skin{aspect-ratio:1/1}
.tk-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 20px;border-top:1px solid var(--rule);padding-top:18px}
.tk-grid span{display:grid;gap:4px;min-width:0}
.tk-grid small{font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}
.tk-grid b{font-weight:400;font-size:.96rem;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tk-grid b.ph{color:var(--ink-38)}
.tk-perf{position:relative;height:1px;background:repeating-linear-gradient(to right,var(--rule) 0 6px,transparent 6px 12px)}
.tk-bot{padding:18px clamp(20px,2.6vw,30px);display:flex;align-items:center;justify-content:space-between;gap:14px}
.tk-code{font-family:var(--mono);font-size:.74rem;letter-spacing:.1em}
.tk-due{text-align:right}
.tk-due small{display:block;font-size:.56rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38)}
.tk-due b{font-weight:400;font-size:1.02rem}
.ticket.done{box-shadow:inset 0 0 0 1px var(--ink)}
.form{display:grid;gap:24px}
.pbar{display:flex;align-items:center;gap:14px}
.pbar i{flex:1;height:1px;background:var(--rule);position:relative;overflow:hidden}
.pbar i::after{content:"";position:absolute;inset:0;background:var(--ink);transform:scaleX(var(--p,.12));transform-origin:left;transition:transform .7s var(--ease)}
.pbar em{font-style:normal;font-family:var(--mono);font-size:.66rem;color:var(--ink-38);white-space:nowrap}
.panes{position:relative}
.pane{position:absolute;inset:0;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .5s var(--ease),transform .7s var(--ease);display:grid;gap:18px;align-content:start}
.pane.on{position:relative;opacity:1;pointer-events:auto;transform:none}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.f{display:grid;gap:6px;grid-column:1/-1;min-width:0}
.f.half{grid-column:auto}
.f label{font-size:.58rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-52)}
.f input,.f select{width:100%;background:transparent;border:0;border-bottom:1px solid var(--rule);padding:10px 0;font-size:.96rem;color:var(--ink);transition:border-color .4s var(--ease)}
.f select{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:26px;border-radius:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23161616' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 2px center;background-size:14px 14px;
}
.f input:focus,.f select:focus{outline:none;border-color:var(--ink)}
.f select.bad{border-color:#9B3B2F}
.f.solo{grid-column:1/-1}
.f input::placeholder{color:var(--ink-38)}
.f input.bad{border-color:#9B3B2F}
.err{margin:0;font-size:.84rem;color:#9B3B2F}
.nav2{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
@media (max-width:560px){ .fields{grid-template-columns:1fr} .f.half{grid-column:1/-1} }

/* ---------- footer ---------- */
footer{border-top:1px solid var(--rule);padding-block:clamp(44px,7vh,86px) 34px}
.fgrid{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:clamp(26px,4vw,60px)}
footer h4{margin:0 0 14px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-38);font-weight:500}
footer ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer li a{font-size:.9rem;color:var(--ink-70);transition:color .35s var(--ease)}
footer li a:hover{color:var(--ink)}
.fmark{margin:clamp(28px,5vh,60px) 0 0;font-size:clamp(2.4rem,15vw,11rem);line-height:.8;letter-spacing:-.05em;text-transform:lowercase;opacity:.1}
@media (max-width:760px){ .fgrid{grid-template-columns:1fr 1fr} .fgrid>div:first-child{grid-column:1/-1} }

/* ---------- toast + switch ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:80;
  background:var(--ink);color:var(--bone);padding:13px 22px;border-radius:2px;
  font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease),transform .5s var(--ease);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.switch{
  position:fixed;right:16px;bottom:16px;z-index:70;
  background:rgb(241,240,237);        /* opaque instead of blurred: it is fixed over moving content */
  color:var(--ink-70);box-shadow:inset 0 0 0 1px var(--rule);
  padding:10px 15px;border-radius:2px;
  font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;
  transition:color .4s var(--ease),box-shadow .4s var(--ease);
}
.switch:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
@media (max-width:520px){ .switch{right:10px;bottom:10px;padding:9px 12px;font-size:.54rem} }