/* ==========================================================
   EYELANDS — 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);
}
.nav.stuck{background:rgba(241,240,237,.93);backdrop-filter:blur(14px);border-color:var(--rule)}
.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:20%;top:43%;width:62%;transform-origin:86% 45%;transform:rotate(-2deg) rotateX(-6deg) rotateY(-7deg)}
.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.8%;top:31.6%;width:17.0%;transform:rotate(10deg) rotateX(-9deg) rotateY(-9deg)}
.skin.two .gel.r{left:57.9%;top:32.1%;width:17.2%;transform:rotate(-10deg) rotateX(-9deg) rotateY(9deg)}
/* the studio preview: a second face, calibrated to face-d.jpg */
.skin.three .gel.l{left:25.5%;top:32.4%;width:18.4%;transform:rotate(10deg) rotateX(-9deg) rotateY(-9deg)}
.skin.three .gel.r{left:56.0%;top:31.9%;width:18.4%;transform:rotate(-10deg) 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:rgba(241,240,237,.88);backdrop-filter:blur(10px);
  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} }