/* NIAR: skin-first complexion. Mobile first. */
:root{
  --bone:#f2ebe3; --paper:#f8f4ef; --sand:#e4d8ca; --ink:#1f1915; --ink-2:#4a403a; --muted:#7a6d64;
  --olive:#57524a; --olive-2:#3f3b35; --kumkum:#9e3b26;
  --shade:#c68d5f; --shade-ink:#1f1915;
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --pad:clamp(20px, 5vw, 64px);
  --r:18px;
  --ease:cubic-bezier(.2,.7,.1,1);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
html.lenis{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--bone);color:var(--ink);font:400 16px/1.6 var(--sans);overflow-x:hidden;-webkit-font-smoothing:antialiased}
img,video,svg{display:block;max-width:100%}
img{height:auto}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:400}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:2px solid var(--kumkum);outline-offset:3px;border-radius:4px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--bone);padding:10px 16px;border-radius:999px;text-decoration:none}
.skip:focus{top:12px}
.wrap{width:100%;max-width:1360px;margin:0 auto;padding:0 var(--pad)}
.eyebrow{font:600 12px/1.2 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--kumkum);margin-bottom:18px}
.display{font-family:var(--serif);font-weight:400;font-variation-settings:"opsz" 96,"SOFT" 50;font-size:clamp(30px,5.2vw,58px);line-height:1.06;letter-spacing:-.015em}
.display .muted,.muted{color:var(--muted)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:999px;border:1px solid var(--ink);background:var(--ink);color:var(--bone);font:500 15px/1 var(--sans);text-decoration:none;cursor:pointer;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn:hover{background:var(--kumkum);border-color:var(--kumkum)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.btn--small{min-height:40px;padding:0 18px;font-size:14px}
.btn--full{width:100%}
.btn[aria-busy="true"]{pointer-events:none;opacity:.75}
.btn[aria-busy="true"]::after{content:"";width:14px;height:14px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.link{background:none;border:0;padding:6px 0;cursor:pointer;text-decoration:underline;text-underline-offset:4px;color:var(--ink-2)}
.link:disabled{opacity:.35;cursor:default}
.round{width:48px;height:48px;border-radius:50%;border:1px solid var(--ink);background:transparent;cursor:pointer;font-size:18px;transition:background .3s,color .3s}
.round:hover{background:var(--ink);color:var(--bone)}

/* NAV */
.nav{position:fixed;inset:0 0 auto;z-index:50;display:flex;align-items:center;justify-content:space-between;gap:16px;height:68px;padding:0 var(--pad);color:var(--bone);transition:background .4s,color .4s,box-shadow .4s}
.nav.is-solid{background:rgba(242,235,227,.92);color:var(--ink);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:0 1px 0 rgba(31,25,21,.08)}
.nav__logo{display:block;width:86px}
.nav__logo svg,.foot__logo svg{width:100%;height:auto}
.drop{fill:var(--shade);transition:fill .6s}
.nav__links{display:none;gap:30px;font-size:14px;letter-spacing:.02em}
.nav__links a{text-decoration:none;position:relative;padding:6px 0}
.nav__links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.nav__links a:hover::after{transform:scaleX(1)}
.nav__end{display:flex;align-items:center;gap:12px}
.nav__shade{display:none;align-items:center;gap:8px;font-size:13px;opacity:.85}
.dot{width:14px;height:14px;border-radius:50%;background:var(--shade);box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);transition:background .6s}
.nav .btn{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.nav.is-solid .btn{background:var(--ink);color:var(--bone);border-color:var(--ink)}
.nav .btn:hover{background:var(--kumkum);color:var(--bone);border-color:var(--kumkum)}
.nav__burger{width:44px;height:44px;border:0;background:none;cursor:pointer;display:grid;place-content:center;gap:6px}
.nav__burger span{display:block;width:22px;height:1.5px;background:currentColor;transition:transform .3s}
.nav__burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.nav__burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
.nav .btn--small{display:none}
.mnav{position:fixed;inset:68px 0 0;z-index:49;background:var(--bone);padding:24px var(--pad);display:flex;flex-direction:column}
.mnav[hidden]{display:none}
.mnav a{font:400 30px/1.2 var(--serif);text-decoration:none;padding:12px 0;border-bottom:1px solid var(--sand)}
@media (min-width:640px){.nav .btn--small{display:inline-flex}}
@media (min-width:1080px){
  .nav__links{display:flex}.nav__burger{display:none}.nav__shade{display:inline-flex}.nav__logo{width:96px}
}

/* HERO */
.hero{position:relative;min-height:100svh;background:var(--olive);color:var(--bone);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden}
.hero__media{position:absolute;inset:0}
.hero__video{width:100%;height:100%;object-fit:cover;object-position:46% 30%}
.hero__shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(40,37,32,.45) 0%,rgba(40,37,32,0) 22%,rgba(40,37,32,0) 40%,rgba(40,37,32,.88) 78%,rgba(40,37,32,.96) 100%)}
.hero__copy{position:relative;z-index:2;padding:0 var(--pad) 120px;max-width:640px}
.hero .eyebrow{color:#e9c7a6}
.hero__title{font-family:var(--serif);font-variation-settings:"opsz" 144,"SOFT" 60;font-weight:400;font-size:clamp(46px,11vw,112px);line-height:.98;letter-spacing:-.025em;margin-bottom:22px}
.hero__title .line{display:block}
.hero__title em{font-style:italic;color:var(--shade);transition:color .6s}
.hero__lede{font-size:16px;line-height:1.6;max-width:30em;color:rgba(242,235,227,.86)}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.hero .btn{background:var(--bone);color:var(--ink);border-color:var(--bone)}
.hero .btn:hover{background:var(--kumkum);color:var(--bone);border-color:var(--kumkum)}
.hero .btn--ghost{background:transparent;color:var(--bone);border-color:rgba(242,235,227,.6)}
.hero .btn--ghost:hover{background:var(--bone);color:var(--ink)}
.hero__pause{position:absolute;z-index:3;right:var(--pad);top:84px;width:40px;height:40px;border-radius:50%;border:1px solid rgba(242,235,227,.5);background:rgba(31,25,21,.25);cursor:pointer;display:grid;place-items:center}
.i-pause{width:10px;height:12px;border-left:3px solid var(--bone);border-right:3px solid var(--bone)}
.hero__pause.is-paused .i-pause{border:0;width:0;height:0;border-left:11px solid var(--bone);border-top:7px solid transparent;border-bottom:7px solid transparent;margin-left:3px}
.hero__rail{position:absolute;z-index:3;left:0;right:0;bottom:0;height:64px;display:flex;align-items:flex-end}
.rail__chip{flex:1 1 0;min-width:0;height:26px;border:0;padding:0;background:var(--c);cursor:pointer;position:relative;transition:height .35s var(--ease)}
.rail__chip:hover,.rail__chip:focus-visible{height:48px}
.rail__chip[aria-checked="true"]{height:64px}
.rail__chip[aria-checked="true"]::after{content:"";position:absolute;left:50%;top:8px;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:var(--bone);box-shadow:0 0 0 1px rgba(0,0,0,.2)}
.rail__tip{position:absolute;bottom:72px;transform:translateX(-50%);background:var(--bone);color:var(--ink);font-size:12px;font-weight:500;padding:6px 10px;border-radius:999px;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .2s}
.rail__tip.is-on{opacity:1}
@media (min-width:900px){
  .hero{justify-content:center}
  .hero__media{right:auto;width:60%}
  .hero__video{object-position:48% 30%}
  .hero__shade{background:linear-gradient(90deg,rgba(87,82,74,0) 55%,rgba(87,82,74,.7) 85%,var(--olive) 100%),linear-gradient(180deg,rgba(40,37,32,.4),rgba(40,37,32,0) 20%,rgba(40,37,32,0) 80%,rgba(40,37,32,.5))}
  .hero__copy{margin-left:auto;margin-right:clamp(24px,6vw,110px);padding:110px 0 120px;max-width:min(600px,40vw)}
  .hero__lede{font-size:17px}
}

/* INTRO */
.intro{padding:clamp(80px,12vw,160px) 0 clamp(60px,9vw,120px)}
.intro__text .display{max-width:22ch}
.intro__grid{display:grid;gap:28px;margin-top:clamp(40px,6vw,80px)}
.intro__fig{margin:0;position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.intro__fig img{width:100%;aspect-ratio:4/5;object-fit:cover}
.intro__fig figcaption,.tag{position:absolute;left:14px;bottom:14px;background:rgba(242,235,227,.92);color:var(--ink);font-size:12px;font-weight:500;padding:6px 12px;border-radius:999px}
.intro__body{font-size:17px;color:var(--ink-2)}
.stats{display:grid;gap:22px;margin:34px 0 0;padding-top:28px;border-top:1px solid var(--sand)}
.stats div{display:grid;grid-template-columns:120px 1fr;align-items:baseline;gap:16px}
.stats dt{font:400 44px/1 var(--serif);color:var(--ink)}
.stats dd{margin:0;font-size:14px;color:var(--muted)}
@media (min-width:900px){
  .intro__grid{grid-template-columns:1fr 1.15fr .8fr;align-items:start;gap:clamp(28px,4vw,60px)}
  .intro__fig--b{margin-top:180px}
  .intro__body{padding-top:40px}
}

/* SHADE WALL */
.wall{padding:clamp(70px,10vw,140px) 0;background:var(--paper)}
.wall__head{display:grid;gap:20px;margin-bottom:clamp(30px,5vw,60px)}
.wall__intro{max-width:34em;color:var(--ink-2)}
.wall__body{display:grid;gap:28px}
.wall__grid{display:grid;grid-template-columns:auto 1fr;gap:10px 12px}
.wall__labels{display:grid;grid-template-rows:repeat(3,1fr);gap:6px}
.wall__labels span{display:flex;flex-direction:column;justify-content:center;font:500 16px/1 var(--serif)}
.wall__labels small{font:400 10px/1.2 var(--sans);color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-top:4px;display:none}
.wall__chips{display:grid;grid-template-columns:repeat(14,1fr);grid-template-rows:repeat(3,1fr);gap:6px}
.chip{aspect-ratio:3/4;border:0;border-radius:8px;background:var(--c);cursor:pointer;position:relative;transition:transform .3s var(--ease),box-shadow .3s;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.chip:hover{transform:translateY(-3px)}
.chip[aria-checked="true"]{box-shadow:0 0 0 2px var(--paper),0 0 0 4px var(--ink)}
.chip span{position:absolute;inset:auto 0 4px;text-align:center;font-size:9px;font-weight:600;color:var(--t);opacity:.75;display:none}
.wall__scale{grid-column:2;display:flex;justify-content:space-between;font-size:11px;color:var(--muted);letter-spacing:.04em}
.wall__card{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;background:var(--bone);border-radius:24px;padding:20px}
.wall__render{background:linear-gradient(160deg,#e9dfd3,#d9cbbb);border-radius:16px;padding:10px}
.wall__code{font:400 30px/1.05 var(--serif);margin-bottom:8px}
.wall__desc{color:var(--ink-2);font-size:15px}
.wall__meta{display:grid;grid-template-columns:repeat(3,auto);gap:14px;margin:0 0 18px;font-size:13px}
.wall__meta dt{color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.1em}
.wall__meta dd{margin:2px 0 0;font-weight:500}
.wall__card .btn{grid-column:1/-1}
@media (max-width:899px){ .wall__card .wall__info{display:contents} .wall__card .wall__info > *{grid-column:1/-1} .wall__card .wall__code{grid-column:2;grid-row:1;align-self:center} }
@media (min-width:640px){ .wall__chips{gap:8px} .chip span{display:block} .wall__labels small{display:block} }
@media (min-width:900px){
  .wall__head{grid-template-columns:1.3fr 1fr;align-items:end}
  .wall__body{grid-template-columns:1.6fr 1fr;align-items:center;gap:clamp(30px,4vw,60px)}
  .wall__card{grid-template-columns:150px 1fr;padding:24px;gap:24px}
  .wall__render{padding:14px 10px;align-self:stretch;display:grid;place-items:center}
  .wall__card .btn{grid-column:auto}
}

/* RENDERS */
.render svg{width:100%;height:auto}
.liquid{fill:var(--shade);transition:fill .6s}

/* RANGE */
.range{padding:clamp(70px,10vw,140px) 0}
.range__head{margin-bottom:clamp(30px,5vw,56px)}
.range__head .display{max-width:16ch}
.range__note{margin-top:16px;color:var(--muted);font-size:14px}
.range__list{display:grid;gap:18px}
.product{position:relative;background:var(--paper);border-radius:24px;padding:18px;display:flex;flex-direction:column;transition:transform .5s var(--ease)}
.product:hover{transform:translateY(-4px)}
.product__stage{position:relative;border-radius:16px;aspect-ratio:4/3;display:grid;place-items:center;overflow:hidden;background:radial-gradient(120% 90% at 50% 100%,#d7c7b5,#ece3d8 60%)}
.product__stage .render{width:34%;transition:transform .6s var(--ease)}
.product:hover .render{transform:translateY(-6px) rotate(-2deg)}
.product__badge{position:absolute;top:12px;left:12px;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;background:var(--bone);padding:5px 10px;border-radius:999px}
.product h3{font:400 24px/1.15 var(--serif);margin:18px 0 6px}
.product__sub{color:var(--muted);font-size:14px;margin-bottom:14px}
.product__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto}
.product__price{font-weight:600;font-size:17px}
.product__price small{font-weight:400;color:var(--muted);font-size:13px}
.product .btn::before{content:"";position:absolute;inset:0;border-radius:24px}
@media (min-width:640px){ .range__list{grid-template-columns:1fr 1fr} .product__stage{aspect-ratio:1/1} .product__stage .render{width:44%} }
@media (min-width:1100px){
  .range__list{grid-template-columns:repeat(6,1fr)}
  .product{grid-column:span 2}
  .product:nth-child(1),.product:nth-child(2){grid-column:span 3}
  .product:nth-child(1) .product__stage,.product:nth-child(2) .product__stage{aspect-ratio:16/11}
  .product:nth-child(1) .render,.product:nth-child(2) .render{width:28%}
}

/* FORMULA */
.formula{background:var(--olive);color:var(--bone);padding:clamp(70px,10vw,140px) 0}
.formula .eyebrow{color:#e9c7a6}
.formula__lead{display:grid;gap:30px;align-items:center}
.formula__video{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:1/1;max-width:560px;background:#c48f69}
.formula__video video{width:100%;height:100%;object-fit:cover}
.formula__copy p{color:rgba(242,235,227,.82);font-size:17px;max-width:34em;margin-top:22px}
.formula__points{display:grid;gap:30px;margin-top:clamp(50px,7vw,90px)}
.formula__points li{border-top:1px solid rgba(242,235,227,.2);padding-top:20px}
.formula__points img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:12px;margin-bottom:18px}
.formula__points h3{font:400 23px/1.2 var(--serif);margin-bottom:8px}
.formula__points p{color:rgba(242,235,227,.75);font-size:15px}
@media (min-width:700px){ .formula__points{grid-template-columns:1fr 1fr} }
@media (min-width:1000px){
  .formula__lead{grid-template-columns:1fr 1.1fr;gap:clamp(40px,6vw,100px)}
  .formula__points{grid-template-columns:repeat(4,1fr)}
  .formula__points img{aspect-ratio:3/4}
}

/* FINDER */
.finder{padding:clamp(70px,10vw,140px) 0;background:linear-gradient(180deg,var(--bone),var(--paper))}
.finder__wrap{display:grid;gap:36px}
.finder__side p{color:var(--ink-2);max-width:30em;margin-top:18px}
.finder__photo{display:none;margin:30px 0 0;border-radius:var(--r);overflow:hidden}
.finder__photo img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 60%}
.finder__form{background:#fff;border-radius:28px;padding:clamp(22px,4vw,44px);box-shadow:0 30px 80px -40px rgba(31,25,21,.35);display:flex;flex-direction:column;min-height:460px}
.finder__progress{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:30px}
.finder__progress li{height:3px;border-radius:3px;background:var(--sand);transition:background .4s}
.finder__progress li.is-on{background:var(--ink)}
.step{border:0;margin:0;padding:0;min-width:0}
.step legend{font:400 clamp(22px,3vw,30px)/1.2 var(--serif);margin-bottom:24px;padding:0}
.step__n{display:block;font:600 12px/1 var(--sans);letter-spacing:.14em;color:var(--kumkum);margin-bottom:12px}
.opts{display:grid;gap:10px}
.opt{position:relative;display:block;cursor:pointer}
.opt input{position:absolute;opacity:0;inset:0;cursor:pointer}
.opt span{display:block;padding:16px 20px;border:1px solid var(--sand);border-radius:14px;transition:border-color .25s,background .25s}
.opt:hover span{border-color:var(--ink-2)}
.opt input:checked + span{border-color:var(--ink);background:var(--bone);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input:focus-visible + span{outline:2px solid var(--kumkum);outline-offset:2px}
.depth__swatch{height:120px;border-radius:16px;background:var(--depth,#c68d5f);margin-bottom:22px;position:relative;overflow:hidden;transition:background .3s}
.depth__swatch span{position:absolute;inset:0;background:url(../media/drop-hand.webp) center 62%/cover;mix-blend-mode:multiply;opacity:.0}
.depth input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:28px;background:transparent;cursor:pointer}
.depth input[type=range]::-webkit-slider-runnable-track{height:10px;border-radius:10px;background:linear-gradient(90deg,#efd1b9,#e0b28d,#c9915f,#a8714a,#835335,#5b3a25,#3f2819)}
.depth input[type=range]::-moz-range-track{height:10px;border-radius:10px;background:linear-gradient(90deg,#efd1b9,#e0b28d,#c9915f,#a8714a,#835335,#5b3a25,#3f2819)}
.depth input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;margin-top:-9px;border-radius:50%;background:#fff;border:2px solid var(--ink);box-shadow:0 2px 8px rgba(0,0,0,.2)}
.depth input[type=range]::-moz-range-thumb{width:24px;height:24px;border-radius:50%;background:#fff;border:2px solid var(--ink)}
.depth__ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.depth__label{font:400 22px/1.2 var(--serif);margin-top:16px}
.finder__err{color:var(--kumkum);font-size:14px;min-height:1.4em;margin:16px 0 0}
.finder__nav{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:12px}
.finder__result .result{display:grid;grid-template-columns:96px 1fr;gap:20px;align-items:center}
.result__swatch{width:96px;height:96px;border-radius:50%;background:var(--shade);box-shadow:inset 0 -10px 20px rgba(0,0,0,.12),0 10px 30px -10px rgba(0,0,0,.4)}
.result__code{font:400 34px/1.05 var(--serif);margin-bottom:8px}
.result__why{color:var(--ink-2);font-size:15px;margin:0}
.result__product{display:none}
.finder__btns{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 12px}
@media (min-width:960px){
  .finder__wrap{grid-template-columns:.9fr 1.1fr;gap:clamp(40px,6vw,90px);align-items:start}
  .finder__photo{display:block}
}

/* WORN */
.worn{padding:clamp(70px,10vw,140px) 0 clamp(50px,7vw,90px);overflow:hidden}
.worn__head{display:grid;gap:20px;margin-bottom:36px}
.worn__head .display{max-width:20ch}
.worn__ctrl{display:none;gap:10px}
.worn__strip{display:flex;align-items:flex-start;scroll-padding-inline:var(--pad);gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px var(--pad) 18px;scrollbar-width:none;overscroll-behavior-x:contain}
.worn__strip::-webkit-scrollbar{display:none}
.worn__strip li{flex:0 0 72%;scroll-snap-align:start;position:relative;border-radius:var(--r);overflow:hidden;background:var(--sand)}
.worn__strip img{width:100%;aspect-ratio:3/4;object-fit:cover}
.worn__strip button{position:absolute;left:12px;bottom:12px;border:0;cursor:pointer;background:rgba(242,235,227,.94);padding:8px 14px 8px 10px;border-radius:999px;font-size:13px;font-weight:500;display:flex;align-items:center;gap:8px}
.worn__strip button::before{content:"";width:16px;height:16px;border-radius:50%;background:var(--c)}
.worn__strip button:hover{background:var(--ink);color:var(--bone)}
.worn__hint{color:var(--muted);font-size:14px;margin-top:10px}
@media (min-width:700px){ .worn__strip li{flex-basis:38%} }
@media (min-width:1100px){
  .worn__head{grid-template-columns:1fr auto;align-items:end}
  .worn__ctrl{display:flex}
  .worn__strip li{flex-basis:calc((100% - 3*14px)/3.6)}
  .worn__strip li:nth-child(even){margin-top:60px}
}

/* VOICES */
.voices{background:var(--ink);color:var(--bone);padding:clamp(70px,10vw,130px) 0}
.voices .eyebrow{color:#e9c7a6}
.voices__track{display:grid;margin-top:12px}
.voice{grid-area:1/1;margin:0;opacity:0;visibility:hidden;transition:opacity .6s,visibility .6s}
.voice.is-on{opacity:1;visibility:visible}
.voice blockquote{margin:0 0 28px;font:400 clamp(24px,3.6vw,44px)/1.22 var(--serif);font-variation-settings:"opsz" 72,"SOFT" 60;max-width:28ch}
.voice figcaption{font-size:14px;color:rgba(242,235,227,.7)}
.voice figcaption strong{color:var(--bone);font-weight:600;margin-right:8px}
.voices__dots{display:flex;gap:10px;margin-top:36px}
.voices__dots button{width:44px;height:28px;border:0;background:none;cursor:pointer;padding:0;position:relative}
.voices__dots button::after{content:"";position:absolute;left:0;right:0;top:13px;height:2px;background:rgba(242,235,227,.25)}
.voices__dots button[aria-selected="true"]::after{background:var(--shade)}

/* STUDIO */
.studio{display:grid;gap:36px;padding:clamp(70px,10vw,140px) var(--pad);max-width:1360px;margin:0 auto}
.studio__media{position:relative}
.studio__main{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.studio__sub{position:absolute;right:-8px;bottom:-30px;width:52%;aspect-ratio:4/3;object-fit:cover;border-radius:14px;border:6px solid var(--bone)}
.studio__copy{padding-top:20px}
.studio__copy > p{color:var(--ink-2);margin-top:20px;max-width:34em}
.hours{display:grid;gap:0;margin:26px 0 34px;border-top:1px solid var(--sand)}
.hours div{display:grid;grid-template-columns:1fr 1.2fr;gap:14px;padding:12px 0;border-bottom:1px solid var(--sand);font-size:15px}
.hours dt{color:var(--muted)}
.hours dd{margin:0}
.book{background:var(--paper);border-radius:24px;padding:clamp(20px,3vw,32px)}
.book h3{font:400 24px/1.2 var(--serif);margin-bottom:18px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px;min-width:0}
.field label{font-size:13px;font-weight:500}
.field input,.field select,.letter__form input[type=email]{width:100%;min-height:48px;padding:0 14px;border:1px solid #d5c8b8;border-radius:12px;background:#fff;font-size:16px}
.field input:focus,.field select:focus{border-color:var(--ink);outline:none;box-shadow:0 0 0 3px rgba(158,59,38,.15)}
.field.is-bad input,.field.is-bad select{border-color:var(--kumkum)}
.field .err{font-size:12px;color:var(--kumkum);min-height:0}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-ok{margin:14px 0 0;padding:14px 16px;border-radius:12px;background:#e6efe1;color:#2b4a22;font-size:15px}
.studio__city{margin:20px 0 0;grid-column:1/-1;position:relative;border-radius:var(--r);overflow:hidden}
.studio__city img{width:100%;aspect-ratio:16/9;object-fit:cover}
.studio__city figcaption{position:absolute;left:0;right:0;bottom:0;padding:40px 20px 18px;color:var(--bone);font-size:14px;background:linear-gradient(transparent,rgba(31,25,21,.7))}
@media (min-width:960px){
  .studio{grid-template-columns:1fr 1fr;gap:clamp(40px,6vw,100px);align-items:start}
  .studio__media{position:sticky;top:100px}
  .studio__sub{right:-40px}
  .studio__city img{aspect-ratio:21/8}
  .studio__city figcaption{padding:60px 32px 26px;font-size:15px}
}

/* TEAM */
.team{padding:clamp(70px,10vw,140px) 0;background:var(--paper)}
.team__head .display{max-width:22ch}
.team__list{display:grid;grid-template-columns:1fr 1fr;gap:28px 16px;margin-top:44px}
.team__list img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:14px;margin-bottom:14px;filter:saturate(.9)}
.team__list h3{font:400 20px/1.2 var(--serif)}
.team__list p{font-size:14px;color:var(--muted);margin-top:6px}
@media (min-width:900px){ .team__list{grid-template-columns:repeat(5,1fr);gap:24px} .team__list li:nth-child(even){margin-top:50px} }

/* FAQ */
.faq{padding:clamp(70px,10vw,140px) 0}
.faq__wrap{display:grid;gap:36px}
.faq__promise img{width:100%;aspect-ratio:4/3;object-fit:cover;object-position:center 30%;border-radius:var(--r);margin-top:30px}
.faq__list details{border-top:1px solid var(--sand);padding:4px 0}
.faq__list details:last-child{border-bottom:1px solid var(--sand)}
.faq__list summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;padding:18px 0;font:400 20px/1.3 var(--serif)}
.faq__list summary::-webkit-details-marker{display:none}
.faq__list summary::after{content:"+";font:300 26px/1 var(--sans);transition:transform .3s}
.faq__list details[open] summary::after{transform:rotate(45deg)}
.faq__list details p{color:var(--ink-2);padding-bottom:16px;max-width:40em}
@media (min-width:960px){ .faq__wrap{grid-template-columns:1fr 1.2fr;gap:clamp(40px,6vw,100px)} .faq__list{padding-top:40px} }

/* LETTER */
.letter{position:relative;padding:clamp(90px,12vw,170px) 0;overflow:hidden;color:var(--ink)}
.letter__bg{position:absolute;inset:0;background:url(../media/cream-curve.webp) center/cover;filter:saturate(1.1)}
.letter__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,240,232,.92),rgba(248,240,232,.6) 60%,rgba(248,240,232,.2))}
.letter__inner{position:relative}
.letter .display{max-width:20ch}
.letter__form{display:grid;grid-template-columns:1fr;gap:12px;margin-top:34px;max-width:560px}
.letter__form input[type=email]{min-height:54px;border-radius:999px;padding:0 22px;border-color:rgba(31,25,21,.25)}
.letter__form .btn{min-height:54px}
.check{display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--ink-2);grid-column:1/-1;cursor:pointer}
.check input{width:18px;height:18px;margin-top:2px;accent-color:var(--ink)}
.letter__form .err{grid-column:1/-1;color:var(--kumkum);font-size:14px;margin:0;min-height:1.2em}
.letter__form .form-ok{grid-column:1/-1}
@media (min-width:640px){ .letter__form{grid-template-columns:1fr auto} }

/* FOOTER */
.foot{background:var(--olive-2);color:var(--bone);padding:70px 0 30px}
.foot__top{display:grid;gap:24px;padding-bottom:50px;border-bottom:1px solid rgba(242,235,227,.15)}
.foot__logo{display:block;width:180px}
.foot__tag{font:400 24px/1.25 var(--serif);max-width:16ch;color:rgba(242,235,227,.85)}
.foot__nav{display:flex;flex-wrap:wrap;gap:12px 26px;font-size:14px}
.foot__nav a{text-decoration:none;opacity:.8}
.foot__nav a:hover{opacity:1;text-decoration:underline}
.foot__base{display:flex;flex-direction:column;gap:6px;padding-top:24px;font-size:13px;color:rgba(242,235,227,.65)}
.foot__base p{margin:0}
.foot__base a{color:var(--bone)}
@media (min-width:900px){ .foot__top{grid-template-columns:1fr 1fr 1.2fr;align-items:end} .foot__base{flex-direction:row;justify-content:space-between} }

/* PRODUCT DIALOG */
.pdp{width:min(1080px,100% - 24px);max-height:calc(100dvh - 24px);padding:0;border:0;border-radius:28px;background:var(--bone);color:var(--ink);overflow:auto}
.pdp::backdrop{background:rgba(31,25,21,.6);backdrop-filter:blur(4px)}
.pdp[open]{animation:pdpIn .45s var(--ease)}
@keyframes pdpIn{from{opacity:0;transform:translateY(20px)}}
.pdp__inner{display:grid;position:relative}
.pdp__close{position:absolute;top:12px;right:12px;z-index:2;width:44px;height:44px;border-radius:50%;border:0;background:var(--bone);font-size:26px;cursor:pointer;line-height:1}
.pdp__visual{background:radial-gradient(120% 90% at 50% 100%,#cdb9a4,#e8ddd0 65%);display:grid;place-items:center;padding:30px;min-height:300px}
.pdp__render{width:min(170px,44%)}
.pdp__info{padding:26px clamp(20px,4vw,44px) 30px}
.pdp__name{font:400 clamp(28px,3.4vw,40px)/1.08 var(--serif);margin-bottom:8px}
.pdp__price{font-size:20px;font-weight:600;margin-bottom:16px}
.pdp__price small{font-size:13px;color:var(--muted);font-weight:400}
.pdp__blurb{color:var(--ink-2)}
.pdp__label{font-size:14px;margin:20px 0 10px}
.pdp__chips{display:grid;grid-template-columns:repeat(14,1fr);gap:4px}
.pdp__chips .chip{border-radius:5px;aspect-ratio:1/1.3}
.pdp__chips .chip span{display:none}
.pdp__facts{display:grid;grid-template-columns:1fr 1fr;gap:12px 20px;margin:22px 0;padding:18px 0;border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);font-size:14px}
.pdp__facts dt{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pdp__facts dd{margin:2px 0 0}
.pdp__stock{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.pdp__stock i{width:8px;height:8px;border-radius:50%;background:#4f8a3c}
.pdp__btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
@media (min-width:860px){ .pdp__inner{grid-template-columns:1fr 1.1fr} .pdp__visual{min-height:100%} .pdp__render{width:200px} }

/* REVEALS (only when JS motion is on) */
.js-motion [data-reveal]{opacity:0;transform:translateY(28px)}
@media (max-width:899px){
  .hero__media{bottom:auto;height:60%}
  .hero__shade{background:linear-gradient(180deg,rgba(40,37,32,.45) 0%,rgba(40,37,32,0) 22%,rgba(87,82,74,0) 55%,var(--olive) 100%)}
  .hero{background:var(--olive)}
}