:root{
  --bg:#14060a; --bg2:#1f080e; --wine:#3a0d18; --line:rgba(247,236,230,.13);
  --ink:#f7ece6; --mute:#c7a6a4; --acc:#e3173e; --blush:#f1aebb; --dark:#2a0810;
  --serif:"Fraunces",Georgia,serif; --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --pad:clamp(20px,5vw,72px); --bar:0px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--serif);font-variation-settings:"SOFT" 60;font-weight:350;font-size:18px;line-height:1.55;overflow-x:clip;
  background-image:
    radial-gradient(120vw 80vh at 85% -10%,rgba(227,23,62,.16),transparent 60%),
    radial-gradient(90vw 70vh at -10% 60%,rgba(120,20,45,.35),transparent 65%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='170' viewBox='0 0 120 170'%3E%3Cpath d='M38 150V70c0-34 12-56 22-56s22 22 22 56v80' fill='none' stroke='%23f7ece6' stroke-opacity='.075'/%3E%3Cpath d='M38 150q22 12 44 0' fill='none' stroke='%23f7ece6' stroke-opacity='.075'/%3E%3C/svg%3E");
  background-attachment:fixed,fixed,scroll}
img{display:block;max-width:100%;height:auto}
a{color:inherit}
h1,h2,h3,p,ol,figure,blockquote,fieldset{margin:0;padding:0;border:0}
em{font-style:italic;color:var(--acc)}
.label,.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute)}
.label::before{content:"";display:inline-block;width:22px;height:1px;background:var(--acc);vertical-align:middle;margin-right:10px}
.fine{font-family:var(--mono);font-size:11.5px;letter-spacing:.02em;color:var(--mute);line-height:1.5}
.center{text-align:center}

/* ---------- top ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:20px;padding:16px var(--pad);pointer-events:none;mix-blend-mode:normal}
.top>*{pointer-events:auto;position:relative}
.top::before{content:"";position:absolute;inset:0 0 -34px 0;background:linear-gradient(rgba(20,6,10,.92) 30%,rgba(20,6,10,0));transition:opacity .3s;pointer-events:none}
body.lightstage .top::before{opacity:0}
.brand{text-decoration:none;display:flex;align-items:baseline;gap:12px}
.brand i{font-size:26px;font-weight:400;letter-spacing:-.01em}
.brand span{font-family:var(--mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--mute)}
.top-nav{display:flex;gap:26px;font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.top-nav a{text-decoration:none;color:var(--mute);transition:color .2s}
.top-nav a:hover{color:var(--ink)}
.top-call{font-family:var(--mono);font-size:12px;letter-spacing:.08em;text-decoration:none;border:1px solid var(--line);padding:9px 14px;border-radius:99px;backdrop-filter:blur(8px);background:rgba(20,6,10,.35)}
body.lightstage .top{color:var(--dark)}
body.lightstage .top .brand span,body.lightstage .top-nav a{color:rgba(42,8,16,.65)}
body.lightstage .top-call{border-color:rgba(42,8,16,.25);background:rgba(255,255,255,.25)}

/* ---------- story ---------- */
.story{position:relative;height:620vh}
.stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;--flip:0;--rot:0deg;color:var(--ink);transition:color .35s}
.stage.is-light{color:var(--dark)}
.stage-bg,.stage-blush{position:absolute;inset:0}
.stage-bg{background:radial-gradient(70% 60% at 50% 45%,#4a101f 0%,#22080f 55%,#12050a 100%)}
.stage-blush{opacity:var(--flip);background:radial-gradient(75% 65% at 50% 45%,#ffd3da 0%,#f3a9b8 55%,#e58a9f 100%)}
.fanlines{position:absolute;inset:0;width:100%;height:100%}
.fanlines .fl{transform-origin:500px 1040px;transform:rotate(var(--rot))}
.fanlines line,.fanlines circle{fill:none;stroke:#f7ece6;stroke-opacity:.09;stroke-width:1;vector-effect:non-scaling-stroke}
.fanlines .tk{stroke-opacity:.22}
.stage-blush::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(42,8,16,.07) 0 1px,transparent 1px 64px)}
#hero,.hero-still{position:absolute;inset:0;width:100%;height:100%;z-index:2}
.hero-still{object-fit:cover;opacity:.55}
.giant{position:absolute;z-index:1;left:0;right:0;top:50%;margin-top:-.62em;text-align:center;font-style:italic;font-weight:300;line-height:1;white-space:nowrap;font-size:min(38vw,62vh);letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1px rgba(247,236,230,.26);will-change:transform,opacity;pointer-events:none}
.g-red{-webkit-text-stroke:0;color:var(--acc);opacity:0;font-size:min(28vw,56vh);left:36vw}
.g-intro{left:6vw;text-align:left}

.chap{position:absolute;z-index:3;max-width:min(430px,38vw);top:50%;margin-top:-110px;opacity:0;visibility:hidden;will-change:transform,opacity}
.chap.left{left:var(--pad)}
.chap.right{right:var(--pad)}
.chap h2{font-size:clamp(34px,4.3vw,66px);line-height:1.02;font-weight:350;letter-spacing:-.025em;margin:16px 0 16px;text-wrap:balance}
.chap p:not(.label){font-size:17px;max-width:34ch;opacity:.86}
.stage.is-light .label{color:rgba(42,8,16,.7)}
.intro{left:var(--pad);top:auto;bottom:clamp(90px,16vh,160px);margin:0;max-width:min(560px,46vw)}
.intro h1{font-size:clamp(46px,6.6vw,104px);line-height:.96;font-weight:330;letter-spacing:-.035em;margin:18px 0 22px;text-wrap:balance}
.intro .lead{font-size:18px;max-width:36ch;opacity:.86}
.rating{margin-top:20px;font-family:var(--mono);font-size:12px;letter-spacing:.08em;color:var(--mute)}
.rating b{color:var(--ink);font-weight:500;font-size:14px;margin-right:6px}
.closing{left:50%;top:17vh;bottom:auto;margin:0 0 0 calc(min(760px,88vw)/-2);width:min(760px,88vw);max-width:none;text-align:center}
.closing h2{font-size:clamp(30px,4.2vw,60px);line-height:1.06}
.cta-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.closing .cta-row{justify-content:center}
.btn{display:inline-flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;color:#fff;background:var(--acc);padding:16px 24px;border-radius:99px;border:1px solid var(--acc);transition:transform .25s,background .25s}
.btn:hover{transform:translateY(-2px)}
.btn.ghost{background:transparent;color:inherit;border-color:currentColor}

.hud{position:absolute;z-index:4;left:0;top:0;opacity:0;pointer-events:none;font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;will-change:transform}
.hud::before{content:"";position:absolute;left:-4px;top:-4px;width:7px;height:7px;border-radius:50%;background:var(--acc);box-shadow:0 0 0 5px rgba(227,23,62,.22)}
.hud::after{content:"";position:absolute;left:8px;top:0;width:64px;height:1px;background:currentColor;opacity:.5}
.hud b{position:absolute;left:82px;top:-16px;font-weight:400;opacity:.7}
.hud span{position:absolute;left:82px;top:1px;font-size:15px;letter-spacing:.06em}

.cue{position:absolute;z-index:3;left:50%;bottom:26px;transform:translateX(-50%);font-family:var(--mono);font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute);transition:opacity .4s}
.cue::after{content:"";display:block;width:1px;height:26px;margin:8px auto 0;background:linear-gradient(var(--mute),transparent)}
.stage.moved .cue{opacity:0}
.prog{position:absolute;z-index:5;left:0;right:0;bottom:0;height:2px;background:rgba(247,236,230,.12)}
.prog i{display:block;height:100%;background:var(--acc);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- band ---------- */
.band{overflow:hidden;padding:clamp(40px,8vw,110px) 0 clamp(10px,2vw,30px);border-top:1px solid var(--line)}
.band-row{white-space:nowrap;font-style:italic;font-weight:300;font-size:clamp(54px,11vw,170px);line-height:1.05;letter-spacing:-.03em;will-change:transform}
.band-row.out{color:transparent;-webkit-text-stroke:1px rgba(247,236,230,.35);font-style:normal}

/* ---------- sections ---------- */
.sec{padding:clamp(70px,10vw,150px) var(--pad);position:relative}
.sec-head{max-width:900px;margin-bottom:clamp(34px,5vw,70px)}
.sec-head.row{max-width:none;display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.sec h2{font-size:clamp(34px,5.2vw,82px);line-height:1;font-weight:340;letter-spacing:-.03em;margin-top:18px;text-wrap:balance}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.split .w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.split.in .w>span{transform:none}
.rv{opacity:0;transform:translateY(26px);transition:opacity .8s,transform .8s cubic-bezier(.2,.8,.2,1)}
.rv.in{opacity:1;transform:none}

.svc{list-style:none;border-top:1px solid var(--line)}
.svc li{display:grid;grid-template-columns:70px minmax(180px,1fr) 1.4fr;gap:20px;align-items:baseline;padding:28px 0;border-bottom:1px solid var(--line);position:relative}
.svc li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--acc);transition:width .5s}
.svc li:hover::after{width:100%}
.svc .n{font-family:var(--mono);font-size:12px;color:var(--acc);letter-spacing:.1em}
.svc h3{font-size:clamp(28px,3.4vw,50px);font-weight:340;letter-spacing:-.02em;line-height:1.05}
.svc p{color:var(--mute);max-width:44ch}
.note{margin-top:28px;font-size:17px;color:var(--mute)}
.note a{color:var(--ink)}

/* ---------- tool ---------- */
.tool-grid{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(24px,5vw,80px);align-items:center}
.tool-view{background:radial-gradient(80% 80% at 50% 30%,#4a101f,#1b070c);border:1px solid var(--line);border-radius:28px;padding:clamp(16px,3vw,40px);position:relative;overflow:hidden}
.tool-view::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(247,236,230,.05) 0 1px,transparent 1px 52px)}
#nails{position:relative;width:100%;height:auto;display:block}
#nails path.n{transition:fill .35s}
.tool-sum{position:relative;margin-top:10px;font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--mute);text-align:center}
.tool-ctrl{display:grid;gap:26px}
legend{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--mute);margin-bottom:12px;padding:0}
.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{font:inherit;font-size:17px;color:var(--ink);background:transparent;border:1px solid var(--line);padding:10px 20px;border-radius:99px;cursor:pointer;transition:background .2s,border-color .2s}
.seg button.on{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.sw{display:flex;gap:10px;flex-wrap:wrap}
.sw button{width:40px;height:40px;border-radius:50%;border:2px solid transparent;outline:1px solid var(--line);cursor:pointer;padding:0;transition:transform .2s}
.sw button.on{border-color:var(--bg);outline:2px solid var(--ink);transform:scale(1.08)}
input[type=range]{width:100%;accent-color:var(--acc);height:28px}
.ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:11px;color:var(--mute);letter-spacing:.06em}
.tool-ctrl .btn{justify-self:start}

/* ---------- gallery ---------- */
.gal{columns:3;column-gap:clamp(12px,2vw,28px)}
.ph{break-inside:avoid;margin-bottom:clamp(12px,2vw,28px);border-radius:18px;overflow:hidden;clip-path:inset(12% 0 12% 0 round 18px);transition:clip-path 1.1s cubic-bezier(.2,.8,.2,1);background:var(--wine)}
.ph.in{clip-path:inset(0 round 18px)}
.ph img{width:100%;transform:scale(1.14) translateY(var(--py,0px));will-change:transform}
#galerie .fine{margin-top:22px}

/* ---------- about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.8fr) 1fr;gap:clamp(28px,6vw,100px);align-items:center}
.about-ph{border-radius:22px;overflow:hidden;aspect-ratio:4/5;background:var(--wine)}
.about-ph img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;transform:scale(var(--z,1.18));will-change:transform}
.lit{font-size:clamp(28px,3.6vw,56px);line-height:1.1;font-weight:330;letter-spacing:-.025em;font-style:italic;margin:22px 0 28px}
.lit span{opacity:.22;transition:opacity .5s}
.lit span.on{opacity:1}
.about-tx p{max-width:52ch;margin-bottom:14px}
.about-tx>p:not(.fine):not(.label){color:var(--mute)}

/* ---------- reviews ---------- */
.score{display:flex;align-items:baseline;gap:14px}
.score b{font-size:clamp(70px,10vw,150px);line-height:.8;font-weight:300;letter-spacing:-.04em;color:var(--acc)}
.score span{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--mute)}
.revs{columns:3;column-gap:clamp(16px,2.5vw,36px)}
.revs blockquote{break-inside:avoid;margin-bottom:clamp(16px,2.5vw,36px);padding:26px 0 0;border-top:1px solid var(--line)}
.revs p{font-size:21px;line-height:1.36;letter-spacing:-.01em}
.revs cite{display:block;margin-top:16px;font-family:var(--mono);font-style:normal;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--mute)}

/* ---------- location ---------- */
.loc{display:grid;grid-template-columns:1fr 1.05fr;gap:clamp(28px,6vw,90px);align-items:stretch}
.hours{width:100%;max-width:440px;border-collapse:collapse;margin:34px 0 26px;font-size:19px}
.hours th{text-align:left;font-weight:350;padding:11px 0}
.hours td{text-align:right;font-family:var(--mono);font-size:14px;color:var(--mute)}
.hours tr{border-bottom:1px solid var(--line)}
.hours tr.today th{color:var(--acc)}
.hours tr.today td{color:var(--ink)}
.hours tr.today th::after{content:"azi";font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;margin-left:12px;border:1px solid var(--acc);border-radius:99px;padding:2px 8px}
address{font-style:normal;font-size:19px;color:var(--mute)}
.map{border-radius:22px;overflow:hidden;border:1px solid var(--line);min-height:420px;background:var(--wine)}
.map iframe{width:100%;height:100%;min-height:420px;border:0;display:block;filter:invert(.92) hue-rotate(160deg) saturate(.75) brightness(.92) contrast(.95)}

/* ---------- footer / bar ---------- */
.foot{padding:40px var(--pad) calc(120px + env(safe-area-inset-bottom));border-top:1px solid var(--line);overflow:hidden}
.foot-big{font-style:italic;font-weight:300;font-size:clamp(110px,27vw,420px);line-height:.8;letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(247,236,230,.28);margin:0 0 30px -.04em}
.foot-row{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--mute)}
.foot-row a{color:var(--ink);text-decoration:none}
.credit a{color:var(--acc);font-weight:500}
.bar{position:fixed;z-index:50;right:20px;bottom:20px;display:flex;gap:8px;padding:6px;border-radius:99px;background:rgba(20,6,10,.72);backdrop-filter:blur(12px);border:1px solid var(--line)}
.bar a{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;text-decoration:none;color:var(--ink);padding:12px 18px;border-radius:99px}
.bar a:last-child{background:var(--acc);color:#fff}
.bar svg{width:16px;height:16px;fill:currentColor}

/* ---------- static story (reduced motion / no WebGL) ---------- */
.static-story .story{height:auto}
.static-story .stage{position:relative;height:auto;overflow:visible;padding:110px var(--pad) 60px;display:grid;gap:56px}
.static-story #hero,.static-story .hero-still{position:relative;inset:auto;height:62vh;border-radius:22px;order:-1;opacity:1}
.static-story .chap{position:static;opacity:1!important;visibility:visible!important;transform:none!important;margin:0;max-width:560px;width:auto;text-align:left;pointer-events:auto!important}
.static-story .closing .cta-row{justify-content:flex-start}
.static-story .giant,.static-story .cue,.static-story .prog,.static-story .hud,.static-story .stage-blush{display:none}
.static-story .intro{order:-2}

/* ---------- phone ---------- */
@media (max-width:760px){
  body{font-size:17px}
  .top{padding:14px 18px}
  .top-nav,.top-call{display:none}
  .brand i{font-size:23px}
  .story{height:600vh}
  .chap,.chap.left,.chap.right{left:20px;right:20px;max-width:none;top:auto;bottom:calc(96px + env(safe-area-inset-bottom));margin:0}
  .chap h2{font-size:clamp(32px,9.6vw,44px);margin:12px 0 10px}
  .chap p:not(.label){font-size:16px;max-width:none}
  .intro{bottom:calc(150px + env(safe-area-inset-bottom));text-align:left}
  .stage::after{content:"";position:absolute;z-index:2;left:0;right:0;bottom:0;height:52%;pointer-events:none;background:linear-gradient(transparent,color-mix(in srgb,#14060a,#ec9db0 calc(var(--flip)*100%)) 58%)}
  .static-story .stage::after{display:none}
  .intro h1{font-size:clamp(46px,14vw,64px);margin:0}
  .intro .eyebrow,.intro .lead,.intro .rating{display:none}
  .closing{left:20px;right:20px;width:auto;margin:0;top:13vh;bottom:auto}
  .closing h2{font-size:clamp(27px,7.6vw,36px)}
  .closing .cta-row{margin-top:18px}
  .closing .btn{flex:1 1 100%;padding:14px 16px}
  .giant{top:30%;font-size:44vw}
  .g-red{font-size:58vw;left:0}
  .hud::after{width:26px}.hud b,.hud span{left:42px}
  .cue{bottom:calc(84px + env(safe-area-inset-bottom))}
  .prog{top:0;bottom:auto}
  .svc li{grid-template-columns:44px 1fr;gap:6px 10px;padding:22px 0}
  .svc p{grid-column:2}
  .tool-grid,.about,.loc{grid-template-columns:1fr}
  .tool-ctrl .btn{justify-self:stretch}
  .gal{columns:2}
  .revs{columns:1}
  .revs p{font-size:19px}
  .map,.map iframe{min-height:320px}
  .bar{left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));justify-content:stretch}
  .bar a{flex:1;justify-content:center;padding:14px 10px}
  .static-story .stage{padding:90px 20px 40px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv,.split .w>span,.ph{transition:none;opacity:1;transform:none;clip-path:inset(0 round 18px)}
  .lit span{opacity:1}
}