/* ============================================================
   LUXE BEAUTY YANCHEP — shared stylesheet
   Sections are themed via CSS variables, so a section can be
   flipped light/dark by class alone and every component follows.
   ============================================================ */
:root{
  --bg:#0C0B0A; --surface:#1B1815; --fg:#F7F2EB; --fg-dim:#CBC1B4;
  --accent:#C4A47C; --accent-soft:#DCC5A5; --hair:rgba(247,242,235,.10);
  --hair-accent:rgba(196,164,124,.28);
  --serif:"Cormorant Garamond",Didot,Georgia,serif;
  --sans:"Jost",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --wrap:1200px; --pad:clamp(20px,5vw,48px);
}
section.light{
  --bg:#F3EDE4; --surface:#FBF8F3; --fg:#1A1613; --fg-dim:#5F554B;
  --accent:#9B7B4E; --accent-soft:#8A6C42; --hair:rgba(26,22,19,.13);
  --hair-accent:rgba(155,123,78,.30);
  background:var(--bg); color:var(--fg);
}
section.alt{--bg:#131110; --surface:#211D1A; background:var(--bg)}

*{box-sizing:border-box}
html{scroll-behavior:smooth; overflow-x:clip}
body{margin:0; background:#0C0B0A; color:var(--fg); font-family:var(--sans);
  font-weight:300; line-height:1.75; overflow-x:clip; -webkit-font-smoothing:antialiased}
/* fine film grain: stops the large flat fields looking like dead pixels */
body::after{content:""; position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.035;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E")}
img{max-width:100%; display:block}
/* browsers give <figure> a default margin of 1em 40px, which was eating 80px of
   every gallery column (262px column -> 183px tile). */
figure{margin:0}
a{color:inherit}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 var(--pad)}
.center{text-align:center}

h1,h2,h3{font-family:var(--serif); font-weight:300; line-height:1.04; margin:0; color:var(--fg)}
h1{font-size:clamp(48px,9vw,104px); letter-spacing:-.005em}
h2{font-size:clamp(34px,5.4vw,66px); letter-spacing:-.005em}
h3{font-size:clamp(21px,2.4vw,27px)}
p{margin:0 0 1.1em}
.lede{font-size:clamp(15.5px,1.5vw,18px); color:var(--fg-dim); max-width:56ch; font-weight:200}
.eyebrow{font-size:10px; letter-spacing:.44em; text-transform:uppercase; color:var(--accent);
  margin:0 0 20px; font-weight:400}
.script{font-family:var(--serif); font-style:italic; color:var(--accent-soft)}
.rule{width:52px; height:1px; background:var(--accent); opacity:.55; margin:30px auto; border:0}

/* the LB monogram: pure CSS, crisp at any size */
.mark{display:grid; place-items:center; border-radius:50%; flex:none; background:#0C0B0A;
  position:relative; box-shadow:inset 0 0 0 1px rgba(196,164,124,.55);
  font-family:var(--serif); font-weight:400; color:#C4A47C;
  letter-spacing:.04em; line-height:1; text-indent:.04em}
.mark::after{content:""; position:absolute; inset:7%; border-radius:50%;
  box-shadow:inset 0 0 0 1px rgba(196,164,124,.22)}
.brand .mark{width:42px; height:42px; font-size:17px}
.mark-lg{width:clamp(84px,12vw,110px); height:clamp(84px,12vw,110px);
  font-size:clamp(34px,5vw,46px); margin:0 auto 30px}

.site-head{position:sticky; top:0; z-index:60; background:rgba(12,11,10,.72);
  backdrop-filter:blur(18px) saturate(1.3); border-bottom:1px solid rgba(247,242,235,.08)}
.head-in{max-width:var(--wrap); margin:0 auto; padding:13px var(--pad);
  display:flex; align-items:center; justify-content:space-between; gap:20px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none}
.brand b{font-family:var(--serif); font-weight:400; font-size:20px; letter-spacing:.22em;
  text-transform:uppercase; color:#F7F2EB; display:block; line-height:1.1}
.brand small{display:block; font-size:8.5px; letter-spacing:.38em; text-transform:uppercase;
  color:#C4A47C; margin-top:3px}
.nav{display:flex; align-items:center; gap:clamp(16px,2.2vw,30px)}
.nav a{text-decoration:none; font-size:11px; letter-spacing:.26em; text-transform:uppercase;
  color:#CBC1B4; padding:7px 0; position:relative; transition:color .3s}
.nav a::after{content:""; position:absolute; left:0; bottom:0; height:1px; width:100%;
  background:#C4A47C; transform:scaleX(0); transform-origin:right; transition:transform .45s cubic-bezier(.2,.7,.2,1)}
.nav a:hover{color:#F7F2EB}
.nav a:hover::after{transform:scaleX(1); transform-origin:left}
.nav a[aria-current="page"]{color:#C4A47C}
.nav a[aria-current="page"]::after{transform:scaleX(1)}
.nav-toggle{display:none; background:none; border:1px solid rgba(196,164,124,.28); color:#F7F2EB;
  width:42px; height:42px; cursor:pointer; font-size:15px}

.btn{display:inline-block; text-decoration:none; cursor:pointer; border:0; font-family:var(--sans);
  font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; padding:18px 40px;
  position:relative; overflow:hidden; background:var(--accent); color:#141210; font-weight:400;
  transition:background .35s, color .35s, border-color .35s}
.btn:hover{background:var(--accent-soft)}
.btn.ghost{background:transparent; color:var(--fg); border:1px solid var(--hair-accent)}
.btn.ghost:hover{background:var(--accent); border-color:var(--accent); color:#141210}
.btn-row{display:flex; flex-wrap:wrap; gap:14px; margin-top:36px}
.center .btn-row,.hero .btn-row,.callout .btn-row{justify-content:center}
.nav a.btn{color:#141210; padding:15px 30px; border:0}
.nav a.btn::after{display:none}
.nav a.btn:hover{color:#141210}

/* ---------- hero ---------- */
.hero{position:relative; min-height:clamp(580px,92svh,900px); display:grid; place-items:center;
  text-align:center; padding:clamp(70px,10vw,120px) var(--pad); overflow:hidden; isolation:isolate}
.hero-bg{position:absolute; inset:0; z-index:-2; width:100%; height:100%;
  object-fit:cover; opacity:.52; filter:saturate(.78);
  animation:kenburns 26s ease-in-out infinite alternate; will-change:transform}
@keyframes kenburns{from{transform:scale(1.04) translate3d(0,0,0)}
                    to{transform:scale(1.13) translate3d(0,-1.2%,0)}}
.hero::after{content:""; position:absolute; inset:0; z-index:-1; background:
  radial-gradient(74% 62% at 50% 42%, rgba(12,11,10,.28), rgba(12,11,10,.86) 74%),
  linear-gradient(180deg, rgba(12,11,10,.92) 0%, rgba(12,11,10,.30) 32%, rgba(12,11,10,.97) 100%)}
.hero > *:not(.hero-bg):not(.hero-frame):not(.scroll-cue){position:relative; z-index:1; max-width:860px}
/* .hero-frame and .scroll-cue are absolutely positioned; the rule above would
   otherwise force them to position:relative and cap them at 860px. */
.hero h1{margin-bottom:10px}
.hero .lede{margin:0 auto}
.hero--sm{min-height:clamp(320px,48svh,470px)}
.hero--sm h1{font-size:clamp(40px,6.8vw,76px)}

section{padding:clamp(74px,10.5vw,150px) 0; position:relative}
.sec-head{max-width:60ch; margin:0 auto clamp(44px,5.5vw,72px)}
.center.sec-head .lede{margin-inline:auto}

/* ---------- editorial statement ---------- */
.statement{max-width:1000px; margin:0 auto; text-align:center}
.statement h2{font-size:clamp(30px,4.6vw,60px); line-height:1.18}
.statement em{font-style:italic; color:var(--accent)}

/* ---------- image tiles ---------- */
.tiles{display:grid; gap:clamp(12px,1.6vw,22px); grid-template-columns:repeat(auto-fit,minmax(270px,1fr))}
.tile{position:relative; overflow:hidden; text-decoration:none; display:block;
  background:var(--surface); border:1px solid var(--hair)}
.tile img{width:100%; aspect-ratio:8/9; object-fit:cover; opacity:.74;
  transition:transform 1.1s cubic-bezier(.2,.7,.2,1), opacity .6s}
.tile:hover img{transform:scale(1.06); opacity:.92}
.tile figcaption{position:absolute; inset:auto 0 0; padding:clamp(22px,3vw,34px);
  background:linear-gradient(transparent, rgba(10,9,8,.5) 32%, rgba(10,9,8,.96))}
.tile h3{color:#F7F2EB; margin-bottom:6px}
.tile .from{font-size:10.5px; letter-spacing:.3em; text-transform:uppercase; color:#C4A47C}
.tile p{color:#CBC1B4; font-size:14.5px; margin:8px 0 0}
.tile .go{display:inline-block; margin-top:14px; font-size:10.5px; letter-spacing:.28em;
  text-transform:uppercase; color:#C4A47C; opacity:0; transform:translateY(6px);
  transition:opacity .45s, transform .45s}
.tile:hover .go{opacity:1; transform:none}

/* ---------- asymmetric feature band ---------- */
.feature{display:grid; gap:clamp(28px,5vw,72px); align-items:center;
  grid-template-columns:1.05fr .95fr}
.feature.flip .media{order:2}
.feature .media{position:relative}
.feature .media img{width:100%; aspect-ratio:5/6; object-fit:cover}
.feature .media::after{content:""; position:absolute; inset:14px; border:1px solid var(--hair-accent);
  pointer-events:none}
.feature .body{max-width:50ch}
.feature .body h2{margin-bottom:20px}
@media (max-width:880px){
  .feature{grid-template-columns:1fr}
  .feature.flip .media{order:0}
  .feature .media img{aspect-ratio:7/5}
}

/* ---------- steps ---------- */
.flow{display:grid; gap:clamp(20px,3vw,40px); grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.flow div{padding-top:26px; border-top:1px solid var(--hair-accent)}
.flow .n{font-family:var(--serif); font-size:13px; letter-spacing:.3em; color:var(--accent); display:block; margin-bottom:14px}
.flow h3{margin-bottom:8px}
.flow p{color:var(--fg-dim); font-size:15px; margin:0}

.grid{display:grid; gap:clamp(14px,2vw,22px)}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(258px,1fr))}
.card{background:var(--surface); border:1px solid var(--hair); padding:clamp(26px,3.2vw,40px)}
.card h3{margin-bottom:10px}
.card p{color:var(--fg-dim); margin:0; font-size:15px}
.card .num{font-family:var(--serif); font-size:13px; letter-spacing:.26em; color:var(--accent);
  display:block; margin-bottom:16px}

.menu{max-width:800px; margin:0 auto}
.menu + .menu{margin-top:clamp(50px,6.5vw,88px)}
.menu h3{font-size:11.5px; letter-spacing:.38em; text-transform:uppercase; color:var(--accent);
  font-family:var(--sans); font-weight:400; margin:0 0 8px}
.menu .note{color:var(--fg-dim); opacity:.8; font-size:14px; margin:0 0 30px}
.row{display:flex; align-items:baseline; gap:14px; padding:17px 0; border-bottom:1px solid var(--hair)}
.row:last-child{border-bottom:0}
.row .name{font-family:var(--serif); font-size:23px; color:var(--fg); white-space:nowrap}
.row .desc{flex:1; color:var(--fg-dim); opacity:.85; font-size:13.5px; line-height:1.5;
  border-bottom:1px dotted var(--hair); transform:translateY(-4px)}
.row .price{font-family:var(--serif); font-size:23px; color:var(--accent); white-space:nowrap}
@media (max-width:560px){
  .row{flex-wrap:wrap; gap:4px 12px}
  .row .desc{flex-basis:100%; order:3; border-bottom:0; transform:none}
  .row .name{flex:1}
}

/* ---------- gallery: varied heights read as editorial, not a spreadsheet ---------- */
.gal{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr));
  gap:clamp(10px,1.3vw,18px); align-items:start}
/* align-items:start matters: grid items stretch vertically by default, and with
   aspect-ratio set the browser then derives WIDTH from that stretched height,
   which shrank every tile to 183px inside a 262px column. */
.shot{position:relative; aspect-ratio:4/5; overflow:hidden; border:1px solid var(--hair); background:var(--surface)}
.gal .shot:nth-child(3n+1){aspect-ratio:4/5.6}
.gal .shot:nth-child(4n+3){aspect-ratio:4/4.4}
.shot img{width:100%; height:100%; object-fit:cover; transition:transform 1.1s cubic-bezier(.2,.7,.2,1)}
.shot:hover img{transform:scale(1.06)}
.shot .ph{position:absolute; inset:0; display:grid; place-content:center; text-align:center; padding:18px;
  background:radial-gradient(70% 60% at 50% 35%, rgba(196,164,124,.13), transparent 70%), var(--surface)}
.shot .ph span{font-family:var(--serif); font-size:13px; letter-spacing:.26em; text-transform:uppercase; color:var(--fg-dim)}
.shot .ph ~ figcaption{display:none}
.shot figcaption{position:absolute; left:0; right:0; bottom:0; padding:34px 15px 14px;
  background:linear-gradient(transparent,rgba(8,7,6,.9)); font-size:10px; letter-spacing:.26em;
  text-transform:uppercase; color:#CBC1B4}

.steps{counter-reset:s; display:grid; max-width:800px; margin:0 auto}
.step{display:flex; gap:26px; align-items:flex-start; padding:28px 0; border-bottom:1px solid var(--hair)}
.step:last-child{border-bottom:0}
.step::before{counter-increment:s; content:"0" counter(s); font-family:var(--serif);
  font-size:22px; color:var(--accent); min-width:42px}
.step h3{font-size:22px; margin-bottom:7px}
.step p{color:var(--fg-dim); margin:0; font-size:15px}

details.faq{border-bottom:1px solid var(--hair)}
details.faq summary{cursor:pointer; list-style:none; padding:24px 0; font-family:var(--serif);
  font-size:22px; display:flex; justify-content:space-between; align-items:center; gap:16px}
details.faq summary::-webkit-details-marker{display:none}
details.faq summary::after{content:"+"; color:var(--accent); font-size:22px; line-height:1}
details.faq[open] summary::after{content:"\2013"}
details.faq p{color:var(--fg-dim); margin:0 0 22px; font-size:15px; max-width:70ch}

.info div{display:flex; gap:16px; padding:15px 0; border-bottom:1px solid var(--hair)}
.info div:last-child{border-bottom:0}
.info b{min-width:112px; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--accent); font-weight:400; padding-top:4px}
.info span{color:var(--fg-dim); font-size:15px}

.quote{max-width:860px; margin:0 auto; text-align:center; position:relative}
.quote::before{content:"\201C"; font-family:var(--serif); font-size:150px; line-height:.8;
  color:var(--accent); opacity:.22; display:block; margin-bottom:-24px}
.quote p{font-family:var(--serif); font-style:italic; font-size:clamp(23px,3.4vw,38px);
  line-height:1.38; color:var(--fg); margin:0 0 22px}
.quote cite{font-style:normal; font-size:10px; letter-spacing:.36em; text-transform:uppercase; color:var(--accent)}

/* ---------- closing CTA over a photo ---------- */
.callout{position:relative; overflow:hidden; isolation:isolate; text-align:center;
  padding:clamp(64px,9vw,130px) clamp(24px,5vw,60px); border:1px solid var(--hair-accent)}
.callout img{position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; opacity:.36}
.callout::after{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(80% 100% at 50% 40%, rgba(12,11,10,.62), rgba(12,11,10,.93))}
.callout h2,.callout .lede{color:#F7F2EB}
.callout .lede{margin-inline:auto}

.site-foot{border-top:1px solid rgba(247,242,235,.09); background:#131110; color:#CBC1B4;
  padding:clamp(56px,7vw,90px) 0 34px}
.foot-grid{display:grid; gap:38px; grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}
.foot-grid h4{font-size:10px; letter-spacing:.32em; text-transform:uppercase; color:#C4A47C;
  margin:0 0 16px; font-weight:400}
.foot-grid a{color:#CBC1B4; text-decoration:none; display:block; padding:5px 0; font-size:14.5px}
.foot-grid a:hover{color:#C4A47C}
.foot-grid p{color:#CBC1B4; font-size:14.5px}
.foot-bot{margin-top:46px; padding-top:26px; border-top:1px solid rgba(247,242,235,.09);
  display:flex; flex-wrap:wrap; gap:10px; justify-content:space-between; color:#8B8175; font-size:12px}

/* ---------- reveal, staggered within a group ---------- */
.rv{opacity:0; transform:translateY(24px); transition:opacity 1s ease, transform 1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1; transform:none}
.tiles .rv:nth-child(2),.gal .rv:nth-child(2),.g3 .rv:nth-child(2),.flow .rv:nth-child(2){transition-delay:.10s}
.tiles .rv:nth-child(3),.gal .rv:nth-child(3),.g3 .rv:nth-child(3),.flow .rv:nth-child(3){transition-delay:.20s}
.gal .rv:nth-child(4),.flow .rv:nth-child(4){transition-delay:.30s}
.gal .rv:nth-child(n+5){transition-delay:.36s}

@media (max-width:880px){
  .nav-toggle{display:block}
  .nav{position:fixed; inset:63px 0 auto; flex-direction:column; gap:0; align-items:stretch;
    background:#131110; border-bottom:1px solid rgba(247,242,235,.09);
    padding:6px var(--pad) 26px; display:none}
  .nav.open{display:flex}
  .nav a{padding:17px 0; border-bottom:1px solid rgba(247,242,235,.09); font-size:12.5px}
  .nav a::after{display:none}
  .nav a.btn{margin-top:18px; text-align:center; border-bottom:0}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  .rv{opacity:1; transform:none}
  html{scroll-behavior:auto}
}

/* ============================================================
   EDITORIAL LAYER
   Asymmetry, full-bleed drama and scroll-driven motion.
   ============================================================ */

/* gold hairline scroll progress */
.progress{position:fixed; top:0; left:0; height:2px; width:0%; z-index:100;
  background:linear-gradient(90deg, rgba(196,164,124,0), var(--accent)); pointer-events:none}

/* gallery-style inset frame on the hero - reads as a mounted print */
.hero-frame{position:absolute; inset:clamp(14px,2.2vw,30px); z-index:1; pointer-events:none;
  border:1px solid rgba(196,164,124,.28)}
.hero-frame::before,.hero-frame::after{content:""; position:absolute; width:9px; height:9px;
  border:1px solid var(--accent); opacity:.85}
.hero-frame::before{top:-5px; left:-5px; border-right:0; border-bottom:0}
.hero-frame::after{bottom:-5px; right:-5px; border-left:0; border-top:0}

/* hero type settles in on load */
@keyframes settle{from{opacity:0; transform:translateY(16px); letter-spacing:.06em}
                  to{opacity:1; transform:none; letter-spacing:normal}}
.hero h1{animation:settle 1.5s cubic-bezier(.2,.7,.2,1) both}
.hero .eyebrow{animation:settle 1.2s cubic-bezier(.2,.7,.2,1) .15s both}
.hero .lede{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) .3s both}
.hero .btn-row{animation:settle 1.4s cubic-bezier(.2,.7,.2,1) .45s both}
.hero .mark-lg{animation:settle 1.3s cubic-bezier(.2,.7,.2,1) both}

/* scroll cue */
.scroll-cue{position:absolute; left:50%; bottom:clamp(26px,4vh,52px); transform:translateX(-50%);
  z-index:2; font-size:9px; letter-spacing:.42em; text-transform:uppercase; color:var(--accent);
  display:grid; justify-items:center; gap:10px; opacity:.85}
.scroll-cue i{display:block; width:1px; height:40px; background:linear-gradient(var(--accent),transparent);
  animation:cue 2.6s ease-in-out infinite}
@keyframes cue{0%,100%{transform:scaleY(.35); transform-origin:top; opacity:.4}
               50%{transform:scaleY(1); transform-origin:top; opacity:1}}

/* asymmetric section header: index numeral + hairline, left aligned */
.head-ed{display:grid; grid-template-columns:auto 1fr; gap:clamp(20px,3vw,44px);
  align-items:start; margin:0 0 clamp(40px,5vw,68px)}
.head-ed .idx{font-family:var(--serif); font-size:clamp(38px,5vw,64px); line-height:.9;
  color:var(--accent); opacity:.5}
.head-ed h2{margin-bottom:14px}
.head-ed .lede{margin:0}
.head-ed::after{content:""; grid-column:1/-1; height:1px; background:var(--hair-accent); margin-top:clamp(24px,3vw,38px)}

/* full-bleed image band with an overlaid line */
.bleed{position:relative; height:clamp(340px,62vh,620px); overflow:hidden;
  display:grid; place-items:center; isolation:isolate}
.bleed img{position:absolute; inset:-12% 0; width:100%; height:124%; object-fit:cover;
  z-index:-2; will-change:transform}
.bleed::after{content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(10,9,8,.72), rgba(10,9,8,.42) 45%, rgba(10,9,8,.78))}
.bleed p{font-family:var(--serif); font-style:italic; color:#F7F2EB; text-align:center;
  font-size:clamp(26px,4.6vw,60px); line-height:1.24; margin:0; max-width:16ch; padding:0 24px;
  text-shadow:0 2px 30px rgba(0,0,0,.5)}

/* slow serif ticker of treatments */
.ticker{overflow:hidden; border-block:1px solid var(--hair-accent); padding:clamp(16px,2.4vw,28px) 0;
  background:var(--bg)}
.ticker-track{display:flex; gap:0; width:max-content; animation:tick 46s linear infinite}
.ticker span{font-family:var(--serif); font-size:clamp(20px,2.6vw,34px); color:var(--fg);
  opacity:.55; white-space:nowrap; padding:0 clamp(20px,3vw,44px); display:flex; align-items:center; gap:clamp(20px,3vw,44px)}
.ticker span::after{content:"✦"; font-size:.42em; color:var(--accent); opacity:.9}
@keyframes tick{from{transform:translateX(0)} to{transform:translateX(-50%)}}

/* parallax targets */
.px{will-change:transform}

/* gallery caption reveal */
.shot figcaption{transform:translateY(8px); opacity:0; transition:transform .5s, opacity .5s}
.shot:hover figcaption,.shot:focus-within figcaption{transform:none; opacity:1}

@media (prefers-reduced-motion:reduce){
  .hero h1,.hero .eyebrow,.hero .lede,.hero .btn-row,.hero .mark-lg{animation:none}
  .ticker-track{animation:none}
  .scroll-cue i{animation:none}
  .shot figcaption{transform:none; opacity:1}
}