/* =========================================================
   DressInn – Homepage Prototyp v2 ("super wow")
   GSAP + ScrollTrigger + Lenis. Palette & type unchanged from v1.
   ========================================================= */

:root{
  --cream:#F4EFE7;
  --cream-2:#EBE3D6;
  --paper:#FBF8F3;
  --espresso:#2B211A;
  --ink-soft:#6E6157;
  --caramel:#9A6A3A;
  --gold:#C9A46A;
  --line:rgba(43,33,26,.14);
  --line-light:rgba(244,239,231,.18);

  --display:"Bodoni Moda", "Didot", "Bodoni 72", Georgia, serif;
  --script:"Cormorant Garamond", Georgia, serif;
  --body:"Figtree", "Segoe UI", system-ui, sans-serif;

  --gutter:clamp(16px, 4vw, 56px);
  --ease:cubic-bezier(.22,.8,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{margin:0;background:var(--espresso);color:var(--espresso);font-family:var(--body);font-size:16px;line-height:1.6;overflow-x:hidden;-webkit-font-smoothing:antialiased}
body.loading{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
h1,h2,h3,h4{margin:0;font-weight:400}
p{margin:0}
em{font-family:var(--script);font-style:italic;font-weight:500;color:var(--caramel)}
:focus-visible{outline:2px solid var(--caramel);outline-offset:3px}
::selection{background:var(--caramel);color:var(--cream)}

.eyebrow{display:inline-block;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--caramel)}
.eyebrow.light{color:var(--gold)}
h2{font-family:var(--display);font-size:clamp(40px,5.6vw,92px);line-height:1;letter-spacing:-.025em}
h2 em{font-size:1.08em;letter-spacing:-.01em}

/* split text helpers (JS wraps chars/words) */
.ch,.wd{display:inline-block;will-change:transform}
.split{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.ht-line{display:inline-block;overflow:hidden;padding:.06em 0}
.line-mask{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.08em;margin-bottom:-.08em}

/* ---------- buttons ---------- */
.btns{display:flex;flex-wrap:wrap;gap:12px}
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;height:56px;padding:0 32px;font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;border-radius:999px;overflow:hidden;isolation:isolate;transition:color .5s var(--ease)}
.btn::before{content:"";position:absolute;left:50%;top:100%;width:150%;aspect-ratio:1;border-radius:50%;z-index:-1;transform:translate(-50%,0) scale(0);transition:transform .7s var(--ease)}
.btn:hover::before{transform:translate(-50%,-55%) scale(1)}
.btn span{position:relative;display:inline-block}
.btn-dark{background:var(--espresso);color:var(--cream)}
.btn-dark::before{background:var(--caramel)}
.btn-line{border:1px solid var(--espresso)}
.btn-line::before{background:var(--espresso)}
.btn-line:hover{color:var(--cream)}
.btn-light{background:var(--cream);color:var(--espresso)}
.btn-light::before{background:var(--gold)}
.btn-ghost-light{border:1px solid rgba(244,239,231,.6);color:var(--cream)}
.btn-ghost-light::before{background:var(--cream)}
.btn-ghost-light:hover{color:var(--espresso)}
.link-arrow{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;border-bottom:1px solid currentColor;padding-bottom:4px}
.link-arrow i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.link-arrow:hover i{transform:translateX(5px)}

/* =========================================================
   PRELOADER
   ========================================================= */
.loader{position:fixed;inset:0;z-index:400;background:var(--espresso);color:var(--cream);overflow:hidden}
.ld-top{position:absolute;top:28px;left:var(--gutter);right:var(--gutter);display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.32em;text-transform:uppercase;opacity:.75}
.ld-logo{font-family:var(--display);font-size:24px;letter-spacing:0;text-transform:none}
.ld-logo em{color:var(--gold)}
.ld-stack{position:absolute;left:50%;top:50%;width:clamp(170px,17vw,270px);aspect-ratio:3/4;transform:translate(-50%,-50%);overflow:hidden;border-radius:4px;background:#fff}
.ld-stack img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;visibility:hidden}
.ld-stack img:last-child{object-position:70% center}
.ld-stack img.on{visibility:visible}
.ld-bottom{position:absolute;left:var(--gutter);right:var(--gutter);bottom:18px;display:flex;justify-content:space-between;align-items:flex-end}
.ld-count{font-family:var(--display);font-size:clamp(90px,17vw,280px);line-height:.78;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.ld-note{font-size:11px;letter-spacing:.3em;text-transform:uppercase;text-align:right;opacity:.6;padding-bottom:14px}

/* =========================================================
   HEADER (blend: always readable on light & dark)
   ========================================================= */
.header{position:fixed;top:0;left:0;right:0;z-index:300;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:22px var(--gutter);color:var(--cream);mix-blend-mode:difference;transition:transform .6s var(--ease)}
.header.hide{transform:translateY(-110%)}
.menu-btn{display:flex;align-items:center;gap:14px;justify-self:start;font-size:12px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.mb-lines{position:relative;width:30px;height:12px}
.mb-lines i{position:absolute;left:0;right:0;height:1.5px;background:currentColor;transition:transform .5s var(--ease), top .5s var(--ease), width .5s var(--ease)}
.mb-lines i:first-child{top:0}
.mb-lines i:last-child{top:10px;width:65%}
.menu-btn:hover .mb-lines i:last-child{width:100%}
body.menu-open .mb-lines i:first-child{top:5px;transform:rotate(45deg)}
body.menu-open .mb-lines i:last-child{top:5px;width:100%;transform:rotate(-45deg)}
.logo-name{font-family:var(--display);font-size:32px;letter-spacing:-.01em;line-height:1}
.logo-name em{color:inherit;font-size:1.1em}
.header-r{display:flex;align-items:center;justify-content:flex-end;gap:14px}
.h-cta{display:inline-flex;align-items:center;height:40px;padding:0 20px;border:1px solid currentColor;border-radius:999px;font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;margin-right:6px}
.icon-btn{width:36px;height:36px;display:grid;place-items:center}
.icon-btn svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.4}

/* =========================================================
   FULLSCREEN MENU
   ========================================================= */
.menu{position:fixed;inset:0;z-index:250;background:var(--espresso);color:var(--cream);display:grid;grid-template-columns:1.2fr .8fr;grid-template-rows:1fr auto;gap:0 6vw;padding:120px var(--gutter) 36px;clip-path:inset(0 0 100% 0);visibility:hidden}
.menu-links{display:flex;flex-direction:column;justify-content:center}
.menu-links a{display:flex;align-items:baseline;gap:22px;padding:2px 0;overflow:hidden}
.ml-n{font-size:12px;font-weight:600;letter-spacing:.14em;color:var(--gold);width:24px}
.ml-t{font-family:var(--display);font-size:clamp(38px,5.6vw,92px);line-height:1.08;letter-spacing:-.02em;display:inline-block;transition:transform .6s var(--ease), color .4s}
.menu-links a:hover .ml-t{transform:translateX(24px);font-style:italic;color:var(--gold)}
.menu-media{position:relative;border-radius:999px 999px 0 0;overflow:hidden;align-self:center;aspect-ratio:3/4;max-height:68vh;background:#fff}
.menu-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;opacity:0;transform:scale(1.15);transition:opacity .6s, transform 1.2s var(--ease)}
.menu-media img.on{opacity:1;transform:scale(1.05)}
.menu-foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:12px 40px;padding-top:24px;border-top:1px solid var(--line-light);font-size:14px;color:rgba(244,239,231,.7)}

/* =========================================================
   PAGE + FOOTER REVEAL
   ========================================================= */
.page{position:relative;z-index:2;background:var(--cream);margin-bottom:var(--fh,0px);box-shadow:0 40px 80px rgba(0,0,0,.35)}
.footer{position:fixed;left:0;right:0;bottom:0;z-index:1;background:var(--espresso);color:var(--cream);padding:clamp(70px,8vw,120px) var(--gutter) 26px;overflow:hidden}
.footer.static{position:relative}

/* =========================================================
   HERO
   ========================================================= */
.hero{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--cream)}
.hero-cols{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;padding:0 16px}
.col{position:relative;will-change:transform}
.col-track{display:flex;flex-direction:column;gap:16px;padding-bottom:16px;animation:colUp 46s linear infinite}
.col:nth-child(even) .col-track{animation-direction:reverse;animation-duration:52s}
.col:nth-child(3) .col-track{animation-duration:40s}
.col-track img{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center 18%;border-radius:6px;background:#fff}
@keyframes colUp{to{transform:translateY(-50%)}}

.hero-focus{position:absolute;inset:0;z-index:4;clip-path:inset(30% 39% 14% 39% round 400px 400px 6px 6px);will-change:clip-path}
.hero-focus img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:72% 30%;transform:scale(1.25);will-change:transform}
.hf-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(43,33,26,.25),rgba(43,33,26,0) 35%,rgba(43,33,26,.65));opacity:0}
.hf-text{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(60px,12vh,130px);display:flex;flex-direction:column;align-items:flex-start;gap:22px;color:var(--cream);visibility:hidden}
.hf-title{font-size:clamp(56px,10vw,170px);line-height:.92}
.hf-title em{color:var(--gold)}

.hero-title{position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-weight:400;font-size:20vw;line-height:.8;letter-spacing:-.045em;color:var(--cream);mix-blend-mode:difference;pointer-events:none;white-space:nowrap;padding-bottom:4vh}
.hero-bar{position:absolute;left:var(--gutter);right:var(--gutter);bottom:24px;z-index:6;display:flex;justify-content:space-between;align-items:center;font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--cream);mix-blend-mode:difference}
.hb-scroll{display:flex;align-items:center;gap:12px}
.hb-scroll i{width:44px;height:1px;background:currentColor;position:relative;overflow:hidden}
.hb-scroll i::after{content:"";position:absolute;inset:0;background:var(--espresso);animation:sline 2s var(--ease) infinite}
@keyframes sline{from{transform:translateX(-100%)}to{transform:translateX(100%)}}

/* =========================================================
   VELOCITY MARQUEE
   ========================================================= */
.vmq{background:var(--cream);padding:clamp(60px,7vw,110px) 0 clamp(30px,4vw,60px);overflow:hidden;display:flex;flex-direction:column;gap:1vw}
.vmq-row{display:flex;white-space:nowrap;will-change:transform}
.vmq-inner{display:flex;align-items:center;gap:3.2vw;padding-right:3.2vw;flex-shrink:0}
.r1 span{font-family:var(--display);font-style:italic;font-size:clamp(48px,8.5vw,150px);line-height:1.05;letter-spacing:-.02em}
.r1 i{font-style:normal;color:var(--gold);font-size:clamp(18px,2vw,32px)}
.r2 span{font-family:var(--display);font-size:clamp(48px,8.5vw,150px);line-height:1.05;letter-spacing:-.02em;text-transform:uppercase;color:transparent;-webkit-text-stroke:1px var(--espresso)}
.r2 i{font-style:normal;color:var(--caramel);font-size:clamp(30px,5vw,80px)}

/* =========================================================
   MANIFESTO
   ========================================================= */
.mani{background:var(--cream);padding:clamp(80px,12vw,200px) var(--gutter) clamp(100px,14vw,220px);display:flex;flex-direction:column;align-items:center;text-align:center;gap:clamp(24px,3vw,48px)}
.mani-text{font-family:var(--display);font-size:clamp(34px,5.4vw,96px);line-height:1.14;letter-spacing:-.025em;max-width:1500px}
.mani-text .wd{opacity:.13}
.pill{display:inline-block;width:1.9em;height:.8em;vertical-align:-.04em;border-radius:999px;overflow:hidden;margin:0 .06em;background:#fff}
.pill-round{width:1.25em}
.pill img{width:100%;height:100%;object-fit:cover;object-position:center 30%}

/* =========================================================
   HORIZONTAL CATEGORIES
   ========================================================= */
.hs{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--paper)}
.hs-track{display:flex;align-items:center;height:100%;gap:5vw;padding:0 7vw;width:max-content;will-change:transform}
.hs-intro{width:min(520px,80vw);flex-shrink:0;display:flex;flex-direction:column;gap:22px;margin-right:3vw}
.hs-intro h2{font-size:clamp(46px,6vw,104px)}
.hs-intro p{color:var(--ink-soft);font-size:17px;max-width:36ch}
.hs-hint{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;display:flex;align-items:center;gap:10px}
.hs-hint i{font-style:normal;display:inline-block;animation:nudge 1.6s var(--ease) infinite}
@keyframes nudge{50%{transform:translateX(8px)}}
.hp{position:relative;flex-shrink:0;display:flex;flex-direction:column;gap:18px}
.hp-img{height:var(--h,60vh);aspect-ratio:3/4;overflow:hidden;background:#fff;border-radius:6px}
.hp-1 .hp-img,.hp-4 .hp-img{border-radius:999px 999px 6px 6px}
.hp-img img{width:130%;max-width:none;height:100%;object-fit:cover;object-position:center 18%;margin-left:-15%;transition:scale 1.2s var(--ease)}
.hp:hover .hp-img img{scale:1.06}
.hp-num{position:absolute;z-index:2;top:-.5em;left:-.28em;font-family:var(--display);font-style:italic;font-size:clamp(80px,10vw,180px);line-height:1;color:transparent;-webkit-text-stroke:1px var(--caramel);pointer-events:none}
.hp-cap{display:flex;justify-content:space-between;align-items:baseline;gap:20px}
.hp-cap h3{font-family:var(--display);font-size:clamp(24px,2.2vw,38px);line-height:1.1}
.hp-cap span{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--caramel);white-space:nowrap;transition:transform .5s var(--ease)}
.hp:hover .hp-cap span{transform:translateX(6px)}
.hp-1{--h:64vh;margin-top:6vh}
.hp-2{--h:50vh;margin-top:22vh}
.hp-3{--h:70vh;margin-top:-6vh}
.hp-4{--h:54vh;margin-top:14vh}
.hp-5{--h:66vh;margin-top:-2vh}
.hp-6{--h:56vh;margin-top:18vh;margin-right:7vw}
.hs-progress{position:absolute;left:7vw;right:7vw;bottom:34px;height:1px;background:var(--line)}
.hs-progress i{position:absolute;inset:-1px 0;background:var(--espresso);transform-origin:left;transform:scaleX(0)}

/* =========================================================
   IMAGE TRAIL
   ========================================================= */
.trail{position:relative;height:100vh;height:100svh;background:var(--espresso);overflow:hidden;display:grid;place-items:center}
.trail-imgs{position:absolute;inset:0;z-index:1}
.trail-imgs img{position:absolute;left:0;top:0;width:clamp(130px,15vw,250px);aspect-ratio:3/4;object-fit:cover;object-position:center 18%;border-radius:4px;background:#fff;opacity:0;will-change:transform,opacity}
.trail-text{position:relative;z-index:2;text-align:center;color:var(--cream);mix-blend-mode:difference;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:10px}
.trail-text .eyebrow{color:var(--cream)}
.trail-text h2{display:flex;flex-direction:column;align-items:center;line-height:.82}
.trail-text h2 span{font-size:clamp(110px,19vw,330px);letter-spacing:-.05em}
.trail-text h2 em{color:var(--cream);font-size:clamp(60px,9vw,160px);margin-top:-.08em}
.trail-hint{font-size:12px;letter-spacing:.24em;text-transform:uppercase;margin-top:18px;opacity:.7}

/* =========================================================
   PRODUCT RAIL
   ========================================================= */
.stl{position:relative;background:var(--cream);padding:clamp(80px,9vw,140px) var(--gutter) clamp(90px,10vw,150px)}
.stl-box{display:grid;grid-template-columns:minmax(0,1fr) clamp(320px,28vw,420px);background:var(--paper);border-radius:16px;overflow:hidden;box-shadow:0 50px 100px -50px rgba(43,33,26,.35)}

.stl-stage{position:relative;height:clamp(560px,78vh,760px);overflow:hidden;outline:none;touch-action:pan-y;background:linear-gradient(180deg,#FDFCFA 0%,#F7F5F1 55%,#EFECE7 100%)}
.stl-title{position:absolute;left:clamp(22px,3vw,48px);top:clamp(22px,3vw,44px);z-index:20}
.stl-title h2{font-size:clamp(30px,2.8vw,46px);letter-spacing:-.02em}
.stl-title h2 span{color:var(--caramel)}
.stl-title p{margin:8px 0 0;font-size:14px;color:var(--ink-soft)}
.stl-figs{position:absolute;inset:0}
.stl-floor{position:absolute;left:50%;bottom:22%;transform:translateX(-50%);border-radius:50%;border:1px solid rgba(43,33,26,.10);background:radial-gradient(closest-side,rgba(154,106,58,.10),rgba(154,106,58,.03) 70%,transparent);pointer-events:none}
.stl-floor::after{content:"";position:absolute;inset:14%;border-radius:50%;border:1px dashed rgba(43,33,26,.07)}
.stl-fig{position:absolute;left:50%;bottom:22%;transform-origin:50% 100%;will-change:transform,filter}
.stl-fig > img{display:block;height:100%;width:auto;-webkit-mask-image:linear-gradient(to top,transparent 0,#000 15%);mask-image:linear-gradient(to top,transparent 0,#000 15%);pointer-events:none;user-select:none}
.ct > img{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 15%,#000 88%,transparent 100%);mask-image:linear-gradient(to top,transparent 0,#000 15%,#000 88%,transparent 100%)}
.stl-stage{cursor:grab}
.stl-stage.dragging{cursor:grabbing;user-select:none}
.stl-stage.dragging .stl-card{opacity:0 !important}
.stl-fig{cursor:pointer}
.stl-fig.is-active{cursor:default}
.stl-fig.is-back{pointer-events:none}
.stl-sh{position:absolute;left:8%;right:8%;bottom:-3%;height:30px;border-radius:50%;background:radial-gradient(closest-side,rgba(43,33,26,.2),rgba(43,33,26,.07) 60%,transparent);z-index:-1}
.stl-card{position:absolute;left:78%;top:24%;display:flex;gap:10px;align-items:center;width:max-content;max-width:230px;padding:8px 14px 8px 8px;background:rgba(255,255,255,.96);border-radius:8px;box-shadow:0 14px 34px -10px rgba(43,33,26,.3);font-size:12.5px;line-height:1.35;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s, transform .5s var(--ease)}
.stl-card img{width:44px;height:54px;object-fit:cover;object-position:center 18%;border-radius:4px}
.stl-card small{display:block;font-size:9.5px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--caramel)}
.stl-card b{display:block;font-weight:600;margin-top:2px}
@media (hover:hover){.stl-fig:hover .stl-card{opacity:1;transform:none}}

.stl-ctrl{position:absolute;left:clamp(22px,3vw,48px);right:clamp(22px,3vw,48px);bottom:clamp(20px,2.6vw,34px);z-index:20;display:flex;align-items:flex-end;justify-content:space-between;gap:20px}
.stl-tl{width:min(340px,60%)}
.stl-progress{position:relative;height:1.5px;background:rgba(43,33,26,.14);margin-bottom:12px}
.stl-progress i{display:block;height:100%;width:100%;background:var(--espresso);transform-origin:left;transform:scaleX(0)}
.stl-progress i.run{animation:stlprog var(--dur,6s) linear forwards}
.stl-progress i.hold{animation-play-state:paused}
@keyframes stlprog{to{transform:scaleX(1)}}
.stl-tl-row{display:flex;align-items:center;gap:16px}
.stl-tabs{display:flex;gap:4px}
.stl-tabs button{font-size:11px;font-weight:600;letter-spacing:.06em;color:rgba(43,33,26,.38);padding:4px 5px;font-variant-numeric:tabular-nums;transition:color .3s}
.stl-tabs button:hover,.stl-tabs button.on{color:var(--espresso)}
.stl-name{font-family:var(--display);font-size:16px;white-space:nowrap}
.stl-arrows{display:flex;align-items:center;gap:6px}
.stl-arrows button{height:40px;min-width:40px;font-size:18px;display:grid;place-items:center;color:var(--espresso);transition:transform .4s var(--ease), opacity .3s}
.stl-prev:hover{transform:translateX(-4px)}
.stl-next:hover{transform:translateX(4px)}
.stl-play{display:flex !important;gap:4px;align-items:center;justify-content:center}
.stl-play i{width:2px;height:12px;background:currentColor}
.stl-play.paused i:first-child{width:0;height:0;background:none;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor;margin-left:3px}
.stl-play.paused i:last-child{display:none}

.stl-panel{display:flex;flex-direction:column;border-left:1px solid var(--line);padding:clamp(22px,2.4vw,34px)}
.stl-ph{display:flex;justify-content:space-between;align-items:baseline;padding-bottom:14px;border-bottom:1px solid var(--line);font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-soft)}
.stl-ph span:first-child{color:var(--espresso)}
.stl-items{list-style:none;margin:0;padding:0;flex:1}
.stl-it{display:grid;grid-template-columns:76px 1fr auto;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid var(--line);opacity:0;transform:translateY(18px);animation:stlin .8s var(--ease) forwards;animation-delay:calc(var(--d) * 90ms + 120ms)}
.stl-it.flash{animation:stlin .8s var(--ease) forwards, flash 1.4s ease}
@keyframes stlin{to{opacity:1;transform:none}}
@keyframes flash{30%{background:rgba(201,164,106,.22)}}
.stl-it-img{display:block;width:76px;aspect-ratio:4/5;border-radius:6px;overflow:hidden;background:#fff}
.stl-it-img img{width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.15);transition:transform .8s var(--ease)}
.stl-it:hover .stl-it-img img{transform:scale(1.25)}
.stl-it small{display:block;font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--caramel)}
.stl-it .t{display:block;font-family:var(--display);font-size:17px;line-height:1.25;margin:3px 0 4px}
.stl-it .t:hover{color:var(--caramel)}
.stl-it .pr{font-size:14.5px;font-weight:500}
.stl-add{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);font-size:20px;font-weight:300;line-height:1;display:grid;place-items:center;transition:background .3s, color .3s, border-color .3s}
.stl-add:hover{background:var(--espresso);color:var(--cream);border-color:var(--espresso)}
.stl-add.done{background:var(--caramel);border-color:var(--caramel);color:var(--cream);font-size:15px}
.stl-foot{padding-top:20px;display:flex;flex-direction:column;gap:14px}
.stl-total{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--ink-soft)}
.stl-total b{font-family:var(--display);font-weight:400;font-size:26px;color:var(--espresso)}
.stl-all{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px;padding:0 26px;border-radius:999px;background:var(--espresso);color:var(--cream);font-size:12px;font-weight:600;letter-spacing:.09em;text-transform:uppercase;text-align:left;overflow:hidden;isolation:isolate}
.stl-all::before{content:"";position:absolute;inset:0;background:var(--caramel);z-index:-1;transform:scaleX(0);transform-origin:right;transition:transform .7s var(--ease)}
.stl-all:hover::before,.stl-all.done::before{transform:scaleX(1);transform-origin:left}
.stl-all i{font-style:normal;font-size:16px;transition:transform .4s var(--ease)}
.stl-all:hover i{transform:translateX(5px)}
.stl-try{font-size:13.5px;text-align:center;color:var(--ink-soft)}
.stl-try u{text-decoration:none;color:var(--espresso);border-bottom:1px solid var(--caramel);padding-bottom:1px}

.stl-toast{position:fixed;left:50%;bottom:28px;z-index:320;display:flex;align-items:center;gap:22px;max-width:calc(100vw - 32px);padding:12px 12px 12px 24px;background:var(--espresso);color:var(--cream);border-radius:999px;font-size:14px;box-shadow:0 20px 50px rgba(0,0,0,.3);transform:translate(-50%,160%);opacity:0;transition:transform .7s var(--ease), opacity .5s}
.stl-toast.on{transform:translate(-50%,0);opacity:1}
.stl-toast a{flex:none;font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--espresso);background:var(--gold);padding:10px 16px;border-radius:999px}
.stl-fly{position:fixed;z-index:400;border-radius:8px;object-fit:cover;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.25)}
.cart-btn{position:relative}
.cart-n{position:absolute;top:-2px;right:-6px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--cream);color:var(--espresso);font-size:10px;font-weight:700;line-height:17px;text-align:center;transform:scale(0);transition:transform .5s var(--ease)}
.cart-n.on{transform:scale(1)}
.cart-n.bump{animation:bump .5s var(--ease)}
@keyframes bump{40%{transform:scale(1.5)}}

/* =========================================================
   3D LOOK RING
   ========================================================= */

/* =========================================================
   NO SIZE
   ========================================================= */
.nosize{position:relative;background:var(--cream);overflow:hidden}
.ns-frame{position:relative;height:100vh;height:100svh;min-height:560px;overflow:hidden;background:var(--espresso);will-change:clip-path}
.ns-img{position:absolute;inset:-8% 0;will-change:transform}
.ns-img img{width:100%;height:100%;object-fit:cover;object-position:66% 60%}
.ns-img::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(43,33,26,.78),rgba(43,33,26,.25) 55%,rgba(43,33,26,.05)),linear-gradient(0deg,rgba(43,33,26,.55),transparent 45%)}
.ns-content{position:absolute;z-index:3;left:var(--gutter);right:var(--gutter);bottom:clamp(50px,10vh,120px);color:var(--cream);display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.ns-content h2{font-size:clamp(56px,9vw,170px);line-height:.92;letter-spacing:-.02em}
.ns-content h2 span{display:block;will-change:transform}
.ns-l2{padding-left:clamp(30px,8vw,160px)}
.ns-content h2 em{color:var(--gold)}
.ns-foot{display:flex;align-items:flex-end;gap:clamp(24px,4vw,60px);flex-wrap:wrap;margin-top:6px}
.ns-content p{font-size:18px;color:rgba(244,239,231,.85);max-width:40ch;margin:0}
.ns-badge{position:absolute;z-index:3;right:var(--gutter);top:clamp(90px,16vh,160px);width:clamp(104px,10vw,150px);aspect-ratio:1;display:grid;place-items:center;color:var(--cream)}
.ns-badge svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 24s linear infinite}
.ns-badge text{font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;fill:currentColor;font-weight:600}
.ns-badge i{font-style:normal;font-size:22px;color:var(--gold)}
.ns-ticker{overflow:hidden;padding:clamp(22px,3vw,36px) 0;border-bottom:1px solid rgba(43,33,26,.1)}
.ns-track{display:flex;align-items:center;gap:clamp(22px,3vw,44px);width:max-content;animation:nsmarq 38s linear infinite}
.ns-track span{font-family:var(--display);font-style:italic;font-size:clamp(26px,3.2vw,52px);white-space:nowrap;color:var(--espresso)}
.ns-track b{color:var(--caramel);font-size:18px;font-weight:400}
@keyframes nsmarq{to{transform:translateX(-50%)}}
@media (max-width:700px){
  .ns-badge{top:96px;width:96px}
  .ns-badge text{font-size:11.5px}
  .ns-l2{padding-left:0}
  .ns-img::after{background:linear-gradient(0deg,rgba(43,33,26,.85),rgba(43,33,26,.45) 50%,rgba(43,33,26,.1) 80%)}
}

/* =========================================================
   STACKING CARDS
   ========================================================= */
.stack{background:var(--cream);display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,110px);padding:clamp(100px,12vw,180px) var(--gutter) clamp(60px,6vw,100px);align-items:start}
.stack-head{position:sticky;top:18vh;display:flex;flex-direction:column;align-items:flex-start;gap:24px}
.stack-head p{color:var(--ink-soft);font-size:17px;max-width:40ch}
.stack-cards{display:flex;flex-direction:column;gap:10vh;padding-bottom:6vh}
.sc{position:sticky;top:calc(14vh + var(--i,0) * 26px);height:min(68vh,640px);display:grid;grid-template-columns:1fr 1fr;background:var(--paper);border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -40px rgba(43,33,26,.35);transform-origin:center top;will-change:transform}
.sc:nth-child(2){--i:1;background:#F1E8DA}
.sc:nth-child(3){--i:2;background:var(--espresso);color:var(--cream)}
.sc:nth-child(3) p{color:rgba(244,239,231,.72)}
.sc-text{padding:clamp(26px,3vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:20px}
.sc-n{font-family:var(--display);font-style:italic;font-size:clamp(60px,7vw,120px);line-height:1;color:var(--caramel)}
.sc:nth-child(3) .sc-n{color:var(--gold)}
.sc h3{font-family:var(--display);font-size:clamp(28px,2.6vw,44px);line-height:1.08;margin-bottom:12px}
.sc p{color:var(--ink-soft)}
.sc-img{overflow:hidden;background:#fff}
.sc-img img{width:100%;height:100%;object-fit:cover;object-position:60% 25%}

/* services hover list */
.svc-list{position:relative;background:var(--cream);padding:0 var(--gutter) clamp(90px,10vw,160px)}
.svc-row{position:relative;z-index:2;display:grid;grid-template-columns:80px 1fr auto 60px;align-items:center;gap:20px;padding:clamp(22px,2.6vw,40px) 0;border-top:1px solid var(--line);transition:padding .6s var(--ease)}
.svc-row:last-of-type{border-bottom:1px solid var(--line)}
.sv-n{font-family:var(--display);font-style:italic;font-size:20px;color:var(--caramel)}
.sv-t{font-family:var(--display);font-size:clamp(36px,6vw,104px);line-height:1;letter-spacing:-.03em;transition:transform .6s var(--ease)}
.sv-d{font-size:14px;color:var(--ink-soft);text-align:right}
.svc-row i{font-style:normal;font-size:28px;color:var(--caramel);justify-self:end;transition:transform .6s var(--ease)}
.svc-row:hover .sv-t{transform:translateX(30px);font-style:italic}
.svc-row:hover i{transform:rotate(-45deg)}
.svc-float{position:absolute;left:0;top:0;z-index:3;width:clamp(180px,18vw,300px);aspect-ratio:3/4;border-radius:6px;overflow:hidden;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.6);background:#fff}
.svc-float img{width:100%;height:100%;object-fit:cover;object-position:60% 25%}

/* =========================================================
   VISIT
   ========================================================= */
.visit{background:var(--cream);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,100px);align-items:center;padding:clamp(60px,8vw,120px) var(--gutter) clamp(110px,12vw,180px)}
.visit-text{display:flex;flex-direction:column;align-items:flex-start;gap:28px}
.visit-info{margin:0;width:100%;display:flex;flex-direction:column}
.visit-info > div{display:grid;grid-template-columns:150px 1fr;gap:12px;padding:16px 0;border-top:1px solid var(--line)}
.visit-info dt{font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--caramel);padding-top:4px}
.visit-info dd{margin:0;font-family:var(--display);font-size:20px;line-height:1.4}
.visit-info a{border-bottom:1px solid var(--line);transition:border-color .3s}
.visit-info a:hover{border-color:var(--caramel)}
.visit-media{position:relative;aspect-ratio:5/4}
.visit-media iframe{width:100%;height:100%;border:0;border-radius:8px;filter:grayscale(1) sepia(.25) contrast(.95);background:var(--cream-2)}
.visit-photo{position:absolute;left:-40px;bottom:-40px;margin:0;width:42%;background:var(--paper);padding:10px 10px 14px;box-shadow:0 30px 60px -30px rgba(43,33,26,.5);transform:rotate(-4deg)}
.visit-photo img{width:100%;aspect-ratio:4/3;object-fit:cover}
.visit-photo figcaption{font-family:var(--script);font-style:italic;font-size:20px;text-align:center;padding-top:8px;color:var(--caramel)}

/* =========================================================
   FOOTER
   ========================================================= */
.ft-glow{position:absolute;left:50%;top:38%;width:min(900px,90vw);aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(closest-side,rgba(201,164,106,.16),transparent 70%);pointer-events:none}
.ft-main{position:relative;display:grid;grid-template-columns:1.15fr minmax(260px,.8fr) 1fr;gap:clamp(30px,4vw,70px);align-items:end}
.ft-eyebrow{color:var(--gold)}
.ft-title{margin:22px 0 clamp(28px,3.4vw,48px);font-size:clamp(40px,4.3vw,74px);line-height:1.02;color:var(--cream)}
.ft-l{display:block;overflow:hidden;padding-bottom:.08em}
.ft-title em{color:var(--gold)}
.ft-contact{display:flex;flex-direction:column}
.ft-big{position:relative;display:grid;grid-template-columns:96px 1fr;align-items:baseline;padding:14px 0;border-top:1px solid var(--line-light)}
.ft-big:last-child{border-bottom:1px solid var(--line-light)}
.ft-big small{font-size:10.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:rgba(244,239,231,.5)}
.ft-big span{font-family:var(--display);font-size:clamp(19px,1.6vw,26px);transition:transform .6s var(--ease), color .4s}
.ft-big::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .8s var(--ease)}
.ft-big:hover::after{transform:scaleX(1);transform-origin:left}
.ft-big:hover span{transform:translateX(10px);color:var(--gold)}

.ft-arch{position:relative;align-self:stretch;display:flex;align-items:flex-end;justify-content:center;min-height:clamp(360px,52vh,520px)}
.ft-arch-media,.ft-arch-line{position:absolute;inset:0 0 0 0;border-radius:999px 999px 8px 8px}
.ft-arch-media{overflow:hidden;background:#3a2e25}
.ft-arch-media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 22%;opacity:0;transform:scale(1.12);transition:opacity .8s, transform 1.6s var(--ease)}
.ft-arch-media img.on{opacity:1;transform:scale(1)}
.ft-arch-media img:first-child{object-position:68% 30%}
.ft-arch-media::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(43,33,26,.45),transparent 45%)}
.ft-arch-line{inset:-14px -14px -14px -14px;border:1px solid rgba(201,164,106,.45);border-radius:999px 999px 14px 14px;pointer-events:none}
.ft-seal{position:absolute;left:-58px;bottom:42px;width:clamp(120px,9.5vw,150px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:var(--espresso);box-shadow:0 0 0 1px rgba(201,164,106,.35)}
.ft-seal svg{position:absolute;inset:0;width:100%;height:100%;animation:spin 22s linear infinite}
.ft-seal text{font-family:var(--body);font-size:12px;font-weight:600;text-transform:uppercase;fill:var(--cream)}
.ft-seal-mono{font-family:var(--display);font-size:clamp(30px,2.6vw,40px);line-height:1;color:var(--cream)}
.ft-seal-mono em{font-style:italic;color:var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}

.ft-side{display:flex;flex-direction:column;gap:clamp(30px,4vh,48px)}
.ft-news h3{margin:0 0 10px;font-family:var(--display);font-weight:400;font-size:clamp(24px,2vw,32px);line-height:1.1;color:var(--cream)}
.ft-news h3 em{color:var(--gold)}
.ft-news p{margin:0 0 14px;font-size:14.5px;line-height:1.6;color:rgba(244,239,231,.65);max-width:380px}
.news-form{position:relative;display:flex;max-width:520px;border-bottom:1px solid rgba(244,239,231,.5)}
.news-form input{flex:1;min-width:0;background:none;border:0;font:inherit;font-size:16px;padding:13px 2px;color:var(--cream)}
.news-form input::placeholder{color:rgba(244,239,231,.5)}
.news-form input:focus{outline:none}
.news-form:focus-within{border-color:var(--gold)}
.news-form button{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.news-form button i{font-style:normal;display:inline-block;transition:transform .4s var(--ease)}
.news-form button:hover i{transform:translateX(5px)}
.news-ok{position:absolute;inset:0;display:flex;align-items:center;background:var(--espresso);font-family:var(--display);font-size:16px;opacity:0;pointer-events:none;transition:opacity .4s}
.news-form.done .news-ok{opacity:1}
.ft-links{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.ft-links div{display:flex;flex-direction:column;gap:9px}
.ft-links h4{margin:0 0 6px;font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.ft-links a{position:relative;width:fit-content;color:rgba(244,239,231,.75);transition:color .3s, padding .5s var(--ease)}
.ft-links a::before{content:"";position:absolute;left:0;top:50%;width:0;height:1px;background:var(--gold);transition:width .5s var(--ease)}
.ft-links a:hover{color:var(--cream);padding-left:22px}
.ft-links a:hover::before{width:14px}

.ft-bottom{position:relative;display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:20px 36px;margin-top:clamp(44px,6vh,70px);padding-top:22px;border-top:1px solid var(--line-light);font-size:13px;color:rgba(244,239,231,.6)}
.ft-logo{font-family:var(--display);font-size:26px;color:var(--cream);letter-spacing:-.01em}
.ft-logo em{color:var(--gold)}
.ft-clock{display:inline-flex;align-items:center;gap:8px;letter-spacing:.14em;text-transform:uppercase;font-size:11px;font-weight:600}
.ft-clock b{font-weight:600;color:var(--cream);font-variant-numeric:tabular-nums}
.ft-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(201,164,106,.6);animation:pulse 2.2s infinite}
@keyframes pulse{70%{box-shadow:0 0 0 9px rgba(201,164,106,0)}100%{box-shadow:0 0 0 0 rgba(201,164,106,0)}}
.ft-legal{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:8px 22px}
.ft-legal a{transition:color .3s}
.ft-legal a:hover{color:var(--cream)}
.ft-up{width:54px;height:54px;border-radius:50%;border:1px solid rgba(201,164,106,.55);color:var(--gold);font-size:18px;display:grid;place-items:center;transition:background .4s, color .4s}
.ft-up:hover{background:var(--gold);color:var(--espresso)}
.ft-up span{display:inline-block;transition:transform .5s var(--ease)}
.ft-up:hover span{transform:translateY(-3px)}
.ft-note{margin:16px 0 0;font-size:12px;color:rgba(244,239,231,.38)}

/* =========================================================
   CURSOR + GRAIN
   ========================================================= */
.cursor{position:fixed;left:0;top:0;z-index:500;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--cream);mix-blend-mode:difference;pointer-events:none;display:grid;place-items:center;transition:width .4s var(--ease), height .4s var(--ease), margin .4s var(--ease), background .3s}
.cursor.hover{width:56px;height:56px;margin:-28px 0 0 -28px}
.cursor.label{width:100px;height:100px;margin:-50px 0 0 -50px;mix-blend-mode:normal;background:var(--caramel)}
.cursor-label{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--cream);opacity:0;transition:opacity .3s}
.cursor.label .cursor-label{opacity:1}
@media (hover:none){.cursor{display:none}}

.grain{position:fixed;inset:-50%;z-index:450;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");animation:grain 1s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-2%,6%)}80%{transform:translate(5%,-2%)}100%{transform:translate(0,0)}}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:900px){
  .h-cta{display:none}
  .mb-label{display:none}
  .menu{grid-template-columns:1fr;padding-top:110px}
  .menu-media{display:none}
  .hero-cols{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:0 10px}
  .hero-cols .col:nth-child(4){display:none}
  .col-track{gap:10px;padding-bottom:10px}
  .hero-focus{clip-path:inset(30% 22% 16% 22% round 400px 400px 6px 6px)}
  .hb-mid{display:none}
  .hp-1,.hp-2,.hp-3,.hp-4,.hp-5,.hp-6{--h:50vh;margin-top:0}
  .hs-track{gap:8vw}
  .stl-box{grid-template-columns:minmax(0,1fr)}
  .stl-panel{border-left:0;border-top:1px solid var(--line)}
  .stl-stage{height:clamp(520px,74vh,640px)}
  .stl-fig,.stl-floor{bottom:21%}
  .stl-name{display:none}
  .stl-card{display:none}
  .stack{grid-template-columns:minmax(0,1fr)}
  .stack-head{position:relative;top:0}
  .sc{grid-template-columns:1fr;grid-template-rows:1fr 1fr;height:72vh}
  .sc-img{order:-1}
  .svc-row{grid-template-columns:40px 1fr 40px}
  .sv-d{display:none}
  .svc-float{display:none}
  .visit{grid-template-columns:minmax(0,1fr)}
  .visit-photo{left:auto;right:12px;bottom:-30px;width:46%}
  .ft-main{grid-template-columns:1fr 1fr;align-items:start}
  .ft-invite{grid-column:1/-1}
  .ft-arch{min-height:440px;margin-left:58px}
  .ft-bottom{grid-template-columns:1fr auto}
  .ft-legal{grid-column:1/-1;justify-content:flex-start;order:3}
  .ft-up{order:1}
  .ft-clock{order:2;grid-column:1/-1}
}
@media (max-width:600px){
  .logo-name{font-size:26px}
  .header{padding:16px var(--gutter)}
  .hero-title{font-size:21vw}
  .visit-info > div{grid-template-columns:1fr;gap:2px}
  .btn{height:50px;padding:0 24px}
  .ft-main{grid-template-columns:minmax(0,1fr)}
  .ft-arch{min-height:420px;margin:10px 14px 0 34px}
  .ft-seal{left:-34px;width:112px}
  .ft-big{grid-template-columns:78px 1fr}
}

/* no GSAP (offline) or reduced motion: static, fully readable page */
.no-motion .loader{display:none}
.no-motion .hero-focus{clip-path:inset(0)}
.no-motion .hf-shade{opacity:1}
.no-motion .hf-text{visibility:visible}
.no-motion .hero-title{opacity:0}
.no-motion .mani-text .wd{opacity:1}
.no-motion .hs{height:auto}
.no-motion .hs-track{flex-wrap:wrap;width:auto;padding:100px var(--gutter)}
.no-motion .col-track,.no-motion .grain{animation:none}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
.hero-cols::after{content:"";position:absolute;inset:0;background:rgba(244,239,231,.22);pointer-events:none}