:root{
  --mink:#B49C8A; --velvet:#8E7564; --cream:#F5EEE7; --paper:#FBF8F4; --cocoa:#2E211B; --ink:#2A1F1A;
  --gold:#C2A06A; --gold-hi:#E9D3A1; --blush:#E6B9BF; --muted:#7A6A60;
  --head:'Marcellus',serif; --script:'Ballet',cursive; --body:'Jost',system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--paper);color:var(--ink);font:300 18px/1.65 var(--body)}
img{display:block;max-width:100%}
a{color:inherit}
h1,h2{font-family:var(--head);font-weight:400;letter-spacing:.02em;margin:0;line-height:1.05}
h2{font-size:clamp(34px,4.6vw,64px)}
h2 em{font-family:var(--script);font-style:normal;color:var(--velvet);font-size:1.05em;letter-spacing:0}
.kicker{display:flex;align-items:center;gap:12px;font:400 italic 17px/1 var(--body);color:var(--velvet);margin:0 0 18px}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold)}
.small{font-size:14px;color:var(--muted)}
.sample{background:var(--cocoa);color:var(--gold-hi);font-size:13px;text-align:center;padding:7px 12px;letter-spacing:.04em}

/* nav */
.nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px clamp(18px,4vw,56px);background:color-mix(in srgb,var(--paper) 86%,transparent);backdrop-filter:blur(10px)}
.logo{font:400 22px/1 var(--head);letter-spacing:3px;text-decoration:none;margin-right:auto}
.logo span{color:var(--gold)}
.nav nav{display:flex;gap:24px}
.nav nav a{text-decoration:none;font-size:15px;position:relative}
.nav nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-4px;height:1px;background:var(--gold);transition:right .35s ease}
.nav nav a:hover::after{right:0}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 24px;border-radius:999px;text-decoration:none;font:500 15px/1 var(--body);letter-spacing:.04em;transition:transform .25s ease,background .25s ease,color .25s ease,box-shadow .25s ease}
.btn-gold{background:linear-gradient(135deg,#B8935B,#D9BC82 50%,#B8935B);background-size:200% 100%;color:var(--cocoa)}
.btn-gold:hover{background-position:100% 0;transform:translateY(-2px);box-shadow:0 10px 24px -12px rgba(120,85,40,.6)}
.btn-line{border:1px solid currentColor}
.btn-line:hover{background:var(--cocoa);color:var(--cream);transform:translateY(-2px)}
.btn-line.light{color:var(--cream)}
.btn-line.light:hover{background:var(--cream);color:var(--cocoa)}
.btn:active{transform:scale(.97)}
.cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}

/* hero: collage of arches beside the promise */
.hero{display:grid;grid-template-columns:1.05fr 1fr;gap:clamp(24px,4vw,64px);align-items:center;min-height:calc(100svh - 110px);padding:clamp(28px,5vw,72px) clamp(18px,4vw,56px)}
.hero h1{font-size:clamp(40px,5vw,74px);letter-spacing:.01em}
.hero h1 span{display:block}
.hero h1 .l2{background:linear-gradient(100deg,var(--velvet) 0 40%,var(--gold-hi) 50%,var(--velvet) 60% 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.whisper{font:400 clamp(34px,3.8vw,56px)/1.1 var(--script);color:var(--ink);margin:6px 0 0 .1em}
.lede{max-width:34ch;margin:22px 0 0}
.proof{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-wrap:wrap;gap:10px 26px;font-size:14px;color:var(--muted)}
.proof b{font:400 17px var(--head);color:var(--ink);letter-spacing:.03em;margin-right:4px}
.hero-art{position:relative;height:min(78svh,720px)}
.arch{margin:0;overflow:hidden;border-radius:999px 999px 18px 18px;background:var(--cream)}
.arch img{width:100%;height:100%;object-fit:cover}
.hero-art .big{position:absolute;inset:0 16% 0 8%}
.hero-art .small{position:absolute;width:30%;aspect-ratio:3/4.4;border:6px solid var(--paper);box-shadow:0 30px 60px -30px rgba(46,33,27,.5)}
.hero-art .a{right:0;top:8%}
.hero-art .b{left:0;bottom:6%}
.hero-art .tag{position:absolute;right:4%;bottom:2%;font-size:12px;letter-spacing:.08em;color:var(--muted)}

/* load-in */
.js .hero h1 span,.js .whisper,.js .lede,.js .hero .cta,.js .proof{opacity:0;transform:translateY(22px)}
.js .hero-art .big{clip-path:inset(100% 0 0 0 round 999px 999px 18px 18px)}
.js .hero-art .small{opacity:0;transform:translateY(40px) scale(.96)}
.loaded .hero h1 span,.loaded .whisper,.loaded .lede,.loaded .hero .cta,.loaded .proof{opacity:1;transform:none;transition:opacity .9s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.loaded .hero h1 .l2{transition-delay:.15s}.loaded .whisper{transition-delay:.35s}.loaded .lede{transition-delay:.5s}.loaded .hero .cta{transition-delay:.62s}.loaded .proof{transition-delay:.74s}
.loaded .hero-art .big{clip-path:inset(0 0 0 0 round 999px 999px 18px 18px);transition:clip-path 1.4s cubic-bezier(.7,0,.2,1) .1s}
.loaded .hero-art .small{opacity:1;transform:none;transition:opacity 1s ease .8s,transform 1.2s cubic-bezier(.2,.7,.2,1) .8s}
.loaded .hero-art .b{transition-delay:1s}
.sheen .hero h1 .l2{animation:sheen 2.4s ease 1.1s 1 both}
@keyframes sheen{from{background-position:100% 0}to{background-position:0 0}}

/* the shade card */
.shades{position:relative;height:420vh;background:var(--cream)}
.shades-pin{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:1fr auto 1fr;gap:clamp(20px,3.5vw,56px);align-items:center;padding:80px clamp(18px,4vw,56px) 40px}
.shades-head h2{font-size:clamp(30px,3.6vw,52px)}
.shades-head .small{margin-top:16px;max-width:30ch}
.rail{list-style:none;margin:0;padding:0;display:flex;gap:10px;height:min(64svh,560px)}
.rail li{position:relative;width:44px;border-radius:999px;overflow:hidden;transition:width .6s cubic-bezier(.2,.7,.2,1),transform .6s ease,box-shadow .6s ease;cursor:pointer}
.rail li img{width:100%;height:100%;object-fit:cover}
.rail li span{position:absolute;left:50%;bottom:14px;transform:translateX(-50%) rotate(180deg);writing-mode:vertical-rl;font-size:13px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.55);white-space:nowrap}
.rail li.on{width:92px;box-shadow:0 22px 40px -20px rgba(46,33,27,.6)}
.rail li:hover{transform:translateY(-6px)}
.result{position:relative;justify-self:start;width:min(100%,430px)}
.frame{position:relative;aspect-ratio:3/4}
.frame img{position:absolute;inset:0;clip-path:inset(0 0 100% 0);transition:clip-path 1s cubic-bezier(.7,0,.2,1)}
.frame img.on{clip-path:inset(0 0 0 0)}
.frame img.was{clip-path:inset(0 0 0 0);z-index:-1}
.shade-name{font:400 clamp(40px,4.6vw,68px)/1 var(--script);margin:18px 0 6px;color:var(--velvet)}
.shade-name span{display:inline-block;animation:pour .8s ease both}
@keyframes pour{from{opacity:0;clip-path:inset(0 0 100% 0);transform:translateY(-8px)}to{opacity:1;clip-path:inset(0 0 -20% 0);transform:none}}
.note{margin:0}

/* treatments */
.menu{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(28px,6vw,96px);padding:clamp(80px,10vw,150px) clamp(18px,4vw,56px)}
.menu-intro p{max-width:32ch}
.menu-intro .btn{margin-top:10px}
.menu-list details{border-top:1px solid #DCCFC4;padding:6px 0}
.menu-list details:last-child{border-bottom:1px solid #DCCFC4}
.menu-list summary{list-style:none;cursor:pointer;display:flex;align-items:baseline;gap:22px;padding:20px 0;font:400 clamp(24px,2.4vw,34px)/1.1 var(--head);letter-spacing:.02em;transition:color .3s ease,padding .3s ease}
.menu-list summary::-webkit-details-marker{display:none}
.menu-list summary span{font:500 13px var(--body);color:var(--gold);letter-spacing:.1em}
.menu-list summary:hover{color:var(--velvet);padding-left:8px}
.menu-list details p{margin:0 0 18px 48px;max-width:46ch;color:var(--muted)}
.menu-list details img{margin:0 0 22px 48px;width:min(300px,70%);aspect-ratio:4/3;object-fit:cover;border-radius:14px}

/* reviews: the deep section */
.words{background:var(--cocoa);color:var(--cream);padding:clamp(90px,11vw,160px) clamp(18px,4vw,56px)}
.words .kicker{color:var(--gold)}
.lead-quote{margin:0 0 70px}
.lead-quote p{font:400 clamp(30px,3.6vw,54px)/1.2 var(--head);margin:0;max-width:24ch}
.words cite{display:block;margin-top:18px;font:400 14px var(--body);font-style:normal;letter-spacing:.08em;color:var(--gold-hi)}
.quotes{display:grid;grid-template-columns:repeat(12,1fr);gap:40px 0}
.quotes blockquote:nth-child(1){grid-column:1/7}
.quotes blockquote:nth-child(2){grid-column:8/13;margin-top:90px}
.quotes blockquote:nth-child(3){grid-column:3/9}
.quotes blockquote{margin:0;padding-top:22px;border-top:1px solid rgba(233,211,161,.35)}
.quotes p{margin:0;font-size:19px}
.rating{margin:60px 0 0;color:var(--gold-hi)}
.rating b{font:400 28px var(--head);color:var(--cream);margin-right:8px}
.js .words blockquote{opacity:0;transform:translateY(26px);transition:opacity 1s ease,transform 1s cubic-bezier(.2,.7,.2,1)}
.js .words blockquote.in{opacity:1;transform:none}

/* team */
.team{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,6vw,96px);align-items:center;padding:clamp(80px,10vw,150px) clamp(18px,4vw,56px)}
.team-photo{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3.2}
.team-photo img{width:100%;height:115%;object-fit:cover;will-change:transform}
.team-copy p:last-child{max-width:36ch}

/* locks strip */
.locks{display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap;margin:0 clamp(18px,4vw,56px);padding:clamp(40px,5vw,64px);border-radius:24px;background:linear-gradient(120deg,var(--velvet),var(--mink));color:var(--cream)}
.locks .kicker{color:var(--gold-hi)}
.locks h2{font-size:clamp(32px,3.6vw,50px)}
.locks p{max-width:48ch;margin:12px 0 0}

/* visit */
.visit{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,6vw,96px);align-items:center;padding:clamp(80px,10vw,150px) clamp(18px,4vw,56px)}
.visit-photo{margin:0;border-radius:18px;overflow:hidden}
.visit h2{font-size:clamp(30px,3.4vw,48px)}
.hours{display:grid;grid-template-columns:auto 1fr;gap:6px 24px;margin:28px 0 0}
.hours dt{color:var(--muted)}.hours dd{margin:0}

.foot{background:var(--cocoa);color:var(--cream);padding:46px clamp(18px,4vw,56px) 110px}
.foot p{margin:0 0 8px}.foot .small{color:#BFAE9F}

/* phone bar */
.bar{display:none}

@media (max-width:900px){
  body{font-size:17px}
  .nav nav{display:none}
  .nav .btn{min-height:42px;padding:0 16px;font-size:14px}
  .logo{font-size:18px}
  .hero{grid-template-columns:1fr;min-height:auto;padding-top:28px}
  .hero-art{height:auto;aspect-ratio:1/1.05;order:-1}
  .shades{height:380vh}
  .shades-pin{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:16px;padding:70px 18px 96px;align-items:start}
  .shades-head .small{display:none}
  .rail{height:76px;order:2}
  .rail li{width:auto;flex:1;border-radius:14px}
  .rail li.on{width:auto;flex:2.2}
  .rail li span{writing-mode:horizontal-tb;transform:translateX(-50%);bottom:8px;font-size:10px;opacity:0;transition:opacity .4s}
  .rail li.on span{opacity:1}
  .result{order:3;width:min(100%,250px,34svh);justify-self:center}
  .shade-name{font-size:40px}
  .shade-name{margin-top:10px}
  .menu,.team,.visit{grid-template-columns:1fr}
  .menu-list details p,.menu-list details img{margin-left:0}
  .quotes{grid-template-columns:1fr}
  .quotes blockquote:nth-child(n){grid-column:1/-1;margin-top:0}
  .lead-quote{margin-bottom:44px}
  .bar{display:grid;grid-template-columns:1fr 2fr;gap:8px;position:fixed;left:10px;right:10px;bottom:10px;z-index:30;padding:8px;border-radius:999px;background:rgba(46,33,27,.92);backdrop-filter:blur(8px)}
  .bar a{display:flex;align-items:center;justify-content:center;min-height:48px;border-radius:999px;text-decoration:none;color:var(--cream);font-weight:500;letter-spacing:.04em}
  .bar .go{background:linear-gradient(135deg,#B8935B,#D9BC82);color:var(--cocoa)}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .hero h1 span,.js .whisper,.js .lede,.js .hero .cta,.js .proof,.js .hero-art .small,.js .words blockquote{opacity:1;transform:none}
  .js .hero-art .big{clip-path:none}
  .shades{height:auto}
  .shades-pin{position:static;height:auto}
  .hero h1 .l2{color:var(--velvet);background:none}
}