/* =========================================================
   SUPER Hair Salon · v2 layer
   Built on styles.css (tokens, buttons, menu, booking sheet).
   New: loader, triptych hero, manifesto, studio walk-through,
   two worlds, card stack, crew, image-filled footer word.
   ========================================================= */
:root{
  --f-poster:'Anton','Unbounded',Impact,sans-serif;
  --teal:#2f6f6b;
  --gold:#e9b45c;
}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* film grain over everything (very light) */
.grain{position:fixed;inset:-50%;z-index:90;pointer-events:none;opacity:.06;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' 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(-6%,2%)}80%{transform:translate(5%,5%)}100%{transform:translate(0,0)}}
html.lite .grain{display:none}

/* ---------- loader ---------- */
.ld{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;overflow:hidden}
.ld__frame{position:relative;width:min(34vw,240px);aspect-ratio:3/4;overflow:hidden;border-radius:14px;background:var(--ink-3);will-change:clip-path,transform}
.ld__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0}
.ld__frame img.is-on{opacity:1}
.ld__word{position:absolute;left:0;right:0;bottom:clamp(20px,5vh,48px);text-align:center;font-family:var(--f-poster);font-size:clamp(28px,4vw,46px);letter-spacing:.08em;line-height:1}
.ld__word small{display:block;font-family:var(--f-body);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:var(--mute);margin-top:10px}
.ld__num{position:absolute;top:clamp(18px,4vh,40px);right:clamp(16px,4vw,48px);font-family:var(--f-poster);font-size:clamp(46px,9vw,120px);line-height:.9;color:var(--bone);font-variant-numeric:tabular-nums}
html:not(.js) .ld{display:none}

/* ---------- nav tweaks ---------- */
.nav{mix-blend-mode:normal}

/* ---------- HERO ---------- */
.hx{position:relative;height:100svh;min-height:600px;overflow:hidden;background:#000;isolation:isolate}
.hx__media{position:absolute;inset:0;display:grid;grid-template-columns:1fr;gap:0}
.hx__panel{position:relative;overflow:hidden;background:#000}
.hx__panel--l,.hx__panel--r{display:none}
.hx__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04)}
.hx__shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(11,10,9,.55) 0%,rgba(11,10,9,.05) 26%,rgba(11,10,9,.05) 46%,rgba(11,10,9,.86) 82%,var(--ink) 100%)}
.hx__eyebrow{position:absolute;z-index:3;top:calc(86px + env(safe-area-inset-top));left:0;right:0;display:flex;justify-content:center;align-items:center;gap:14px;font-size:11px;font-weight:700;letter-spacing:.34em;text-transform:uppercase;color:var(--bone-2)}
.hx__eyebrow i{width:5px;height:5px;border-radius:50%;background:var(--crimson-2)}
.hx__title{position:absolute;z-index:2;left:0;right:0;top:50%;transform:translateY(-58%);text-align:center;pointer-events:none;line-height:.8}
.hx__word{display:flex;justify-content:center;font-family:var(--f-poster);font-weight:400;font-size:clamp(120px,31vw,520px);letter-spacing:-.01em;color:#fff;mix-blend-mode:difference}
.hx__word b{display:inline-block;font-weight:400;will-change:transform}
.hx__sub{display:block;font-size:clamp(28px,6vw,72px);color:var(--bone);margin-top:.12em;letter-spacing:0}
.hx__foot{position:absolute;z-index:3;left:0;right:0;bottom:calc(22px + env(safe-area-inset-bottom));width:min(1200px,100% - 32px);margin-inline:auto;display:grid;gap:16px}
.hx__chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;background:rgba(11,10,9,.55);border:1px solid var(--line-2);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);font-size:13px;font-weight:600}
.chip b{font-family:var(--f-poster);font-weight:400;font-size:17px}
.chip small{color:var(--mute);font-size:12px}
.chip .stars{color:var(--amber);letter-spacing:1px;font-size:12px}
.chip .live{width:8px;height:8px;border-radius:50%;background:#2fd36a;box-shadow:0 0 0 0 rgba(47,211,106,.6);animation:live 2s infinite}
.chip .live.is-closed{background:var(--crimson-2);animation:none}
@keyframes live{0%{box-shadow:0 0 0 0 rgba(47,211,106,.55)}70%{box-shadow:0 0 0 10px rgba(47,211,106,0)}100%{box-shadow:0 0 0 0 rgba(47,211,106,0)}}
.hx__lede{font-size:clamp(16px,1.6vw,20px);max-width:34ch;color:var(--bone-2)}
.hx__ctas{display:flex;flex-wrap:wrap;gap:10px}
.hx__ctas .btn i{font-style:normal;transition:transform .3s var(--ease)}
.hx__ctas .btn:hover i{transform:translateX(4px)}
.hx__scroll{position:absolute;z-index:3;right:clamp(16px,3vw,40px);bottom:calc(30px + env(safe-area-inset-bottom));display:none;flex-direction:column;align-items:center;gap:10px;font-size:10px;letter-spacing:.3em;text-transform:uppercase;color:var(--mute)}
.hx__scroll i{width:1px;height:56px;background:linear-gradient(var(--bone),transparent);animation:drip 1.8s var(--ease) infinite}
@keyframes drip{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}

@media (min-width:900px){
  .hx__media{grid-template-columns:1fr 1.15fr 1fr;gap:10px;padding:10px}
  .hx__panel{border-radius:18px}
  .hx__panel--l,.hx__panel--r{display:block}
  .hx__panel--l{transform:translateY(4%)}
  .hx__panel--r{transform:translateY(-4%)}
  .hx__foot{grid-template-columns:1fr auto;align-items:end}
  .hx__foot .hx__chips{grid-column:1/-1}
  .hx__scroll{display:flex}
  .hx__title{transform:translateY(-55%)}
}

/* ---------- ticker spacing ---------- */
.ticker{padding-top:26px}

/* ---------- MANIFESTO ---------- */
.mf{position:relative;padding:clamp(90px,16vh,180px) 0 clamp(80px,14vh,160px);overflow:hidden}
.mf .eyebrow{margin-bottom:28px}
.mf__text{font-family:var(--f-body);font-weight:700;font-size:clamp(28px,4.6vw,68px);line-height:1.08;letter-spacing:-.025em;max-width:20ch}
.mf__text em{font-family:var(--f-serif);font-weight:400;font-style:italic;color:var(--crimson-2)}
.mf__text .w{color:rgba(242,236,226,.16);transition:color .25s linear}
.mf__text .w.is-lit{color:var(--bone)}
.mf__text em .w.is-lit, .mf__text .w.is-em.is-lit{color:var(--crimson-2)}
.mf__stats{display:grid;grid-template-columns:repeat(2,1fr);gap:28px 18px;margin-top:clamp(50px,8vh,90px);border-top:1px solid var(--line);padding-top:28px}
.mf__stats dt{font-family:var(--f-poster);font-size:clamp(44px,6vw,84px);line-height:1;color:var(--bone)}
.mf__stats dd{color:var(--mute);font-size:13px;letter-spacing:.06em;text-transform:uppercase;margin-top:6px}
@media (min-width:900px){.mf__stats{grid-template-columns:repeat(4,1fr)}}
.mf__float{position:absolute;z-index:0;border-radius:16px;overflow:hidden;opacity:.85;pointer-events:none}
.mf__float img{width:100%;height:100%;object-fit:cover}
.mf__float--a{width:clamp(110px,15vw,220px);aspect-ratio:3/4;right:6%;top:9%}
.mf__float--b{width:clamp(90px,11vw,170px);aspect-ratio:3/4;right:22%;bottom:16%}
.mf__float--c{width:clamp(80px,9vw,140px);aspect-ratio:3/4;right:2%;bottom:6%}
.mf .wrap{position:relative;z-index:1}
@media (max-width:899px){.mf__float--b,.mf__float--c{display:none}.mf__float--a{opacity:.35;top:4%}}

/* ---------- STUDIO walk-through ---------- */
.house{position:relative;background:var(--ink-2)}
.house__pin{position:relative;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center;gap:clamp(18px,3vh,34px)}
.house__head{width:min(1200px,100% - 32px);margin-inline:auto;display:flex;justify-content:space-between;align-items:end;gap:20px}
.house__head .display{font-family:var(--f-poster);font-weight:400;font-size:clamp(48px,8vw,120px);line-height:.9;text-transform:uppercase}
.house__track{display:flex;align-items:center;gap:clamp(14px,2vw,28px);padding-left:max(16px,calc((100vw - 1200px)/2));padding-right:16px;will-change:transform;width:max-content}
.room{position:relative;flex:none}
.room__img{overflow:hidden;border-radius:18px;background:var(--ink-3);height:100%}
.room__img img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);will-change:transform}
.room--tall{height:min(58svh,560px);aspect-ratio:2/3}
.room--wide{height:min(58svh,560px);aspect-ratio:3/2}
.room figcaption{position:absolute;left:14px;bottom:14px;display:flex;gap:10px;align-items:center;padding:8px 14px;border-radius:999px;background:rgba(11,10,9,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-size:13px;font-weight:700}
.room figcaption span{color:var(--crimson-2);font-family:var(--f-poster);font-weight:400;font-size:15px}
.room--end{width:min(80vw,520px);display:grid;gap:22px;padding:0 4vw}
.room--end .display{font-family:var(--f-poster);font-weight:400;font-size:clamp(44px,6vw,96px);line-height:.92;text-transform:uppercase}
.house__bar{width:min(1200px,100% - 32px);margin-inline:auto;height:2px;background:var(--line);border-radius:2px;overflow:hidden}
.house__bar i{display:block;height:100%;background:var(--crimson-2);transform:scaleX(0);transform-origin:left}
@media (max-width:899px){.room--tall,.room--wide{height:52svh}}

/* ---------- TWO WORLDS ---------- */
.worlds{padding:clamp(80px,12vh,140px) 0}
.worlds__grid{width:min(1400px,100% - 20px);margin:0 auto;display:grid;gap:10px}
.world{position:relative;overflow:hidden;border-radius:22px;min-height:78svh;display:flex;align-items:flex-end;background:#000;transition:flex-grow .8s var(--ease)}
.world__vid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.06);transition:transform 1.2s var(--ease),filter .8s var(--ease)}
.world::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 30%,rgba(11,10,9,.88) 100%)}
.world__body{position:relative;z-index:1;padding:clamp(22px,3vw,42px);display:grid;gap:16px;width:100%}
.world__num{font-family:var(--f-poster);font-size:14px;letter-spacing:.2em;color:var(--crimson-2)}
.world h3{font-family:var(--f-poster);font-weight:400;font-size:clamp(54px,7vw,110px);line-height:.88;text-transform:uppercase}
.world ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;max-width:520px}
.world li{padding:7px 12px;border:1px solid var(--line-2);border-radius:999px;font-size:13px;font-weight:600;background:rgba(11,10,9,.35);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.world .btn{justify-self:start}
@media (min-width:900px){
  .worlds__grid{display:flex;height:86svh}
  .world{flex:1 1 0;min-height:0}
  .worlds__grid:hover .world{flex-grow:.75}
  .worlds__grid .world:hover{flex-grow:1.5}
  .worlds__grid:hover .world:not(:hover) .world__vid{filter:grayscale(.85) brightness(.6)}
  .world:hover .world__vid{transform:scale(1)}
}

/* ---------- RESULTS stack ---------- */
.stack{position:relative;background:var(--bone);color:var(--ink)}
.stack__pin{height:100svh;display:grid;grid-template-rows:auto 1fr;gap:16px;padding:calc(80px + env(safe-area-inset-top)) 16px 24px;overflow:hidden}
.stack__copy .eyebrow{color:#6d655b}
.stack__copy .display{font-family:var(--f-poster);font-weight:400;font-size:clamp(52px,8vw,128px);line-height:.88;text-transform:uppercase;color:var(--ink)}
.stack__copy .serif{color:var(--crimson)}
.stack__copy .lead{color:#4a443d;margin-top:10px;max-width:30ch}
.stack__count{font-family:var(--f-poster);font-size:20px;margin-top:14px;color:#6d655b}
.stack__count b{font-weight:400;color:var(--ink)}
.stack__deck{position:relative;width:min(100%,420px);justify-self:center;align-self:stretch}
.card{position:absolute;inset:0;margin:auto;height:100%;max-height:600px;aspect-ratio:3/4;max-width:100%;border-radius:20px;overflow:hidden;background:#ddd;box-shadow:0 30px 60px -20px rgba(0,0,0,.45);will-change:transform}
.card img{width:100%;height:100%;object-fit:cover}
.card figcaption{position:absolute;left:12px;bottom:12px;padding:7px 12px;border-radius:999px;background:rgba(242,236,226,.9);color:var(--ink);font-size:12px;font-weight:800;letter-spacing:.04em}
@media (min-width:900px){
  .stack__pin{grid-template-rows:none;grid-template-columns:1fr 1fr;align-items:center;padding:0 max(32px,calc((100vw - 1200px)/2))}
  .stack__deck{height:min(78svh,640px);align-self:center}
}

/* ---------- menu offer ---------- */
.offer{display:inline-flex;align-items:center;gap:10px;margin-top:16px;padding:8px 14px 8px 8px;border-radius:999px;border:1px solid rgba(233,180,92,.4);background:rgba(233,180,92,.08);font-size:14px;font-weight:600;color:var(--bone-2)}
.offer__tag{padding:5px 10px;border-radius:999px;background:linear-gradient(90deg,#ff9a1f,#ffc94a);color:var(--ink);font-weight:800;font-size:12px;letter-spacing:.06em;text-transform:uppercase}

/* ---------- CREW ---------- */
.crew{padding:clamp(80px,12vh,140px) 0}
.crew__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:30px}
.mate{position:relative;overflow:hidden;border-radius:18px;aspect-ratio:3/4;background:var(--ink-3)}
.mate img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.05);transform:scale(1.04);transition:filter .7s var(--ease),transform 1s var(--ease)}
.mate:hover img,.mate.is-in img{filter:none;transform:scale(1)}
.mate figcaption{position:absolute;left:12px;right:12px;bottom:12px;display:flex;gap:10px;align-items:center;font-size:13px;font-weight:700;padding:8px 12px;border-radius:999px;background:rgba(11,10,9,.6);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);width:max-content;max-width:calc(100% - 24px)}
.mate figcaption span{font-family:var(--f-poster);font-weight:400;color:var(--crimson-2)}
@media (min-width:900px){.crew__grid{grid-template-columns:repeat(4,1fr)}.mate:nth-child(even){transform:translateY(40px)}}
html.touch .mate img{filter:none}

/* ---------- FOOTER ---------- */
.foot2{position:relative;padding-top:clamp(80px,12vh,140px);overflow:hidden;border-top:1px solid var(--line)}
.foot2__top{display:grid;gap:18px;justify-items:start}
.foot2__line{font-family:var(--f-poster);font-weight:400;font-size:clamp(44px,7vw,108px);line-height:.9;text-transform:uppercase;max-width:14ch}
.foot2__word{margin-top:clamp(30px,6vh,70px);line-height:.78;text-align:center;user-select:none}
.foot2__word span{display:block;font-family:var(--f-poster);font-size:clamp(130px,33vw,560px);letter-spacing:-.01em;
  background:url("assets/p/studio-wide-s.webp") center/cover no-repeat;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  background-position:var(--bx,50%) 50%}
.foot2 .foot__bar{border-top:1px solid var(--line);padding-top:22px;padding-bottom:calc(110px + env(safe-area-inset-bottom))}
@media (min-width:900px){.foot2 .foot__bar{padding-bottom:28px}}

/* ---------- reels: bigger cards for the new wall ---------- */
.work{padding-top:clamp(80px,12vh,140px)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  .grain,.hx__scroll i,.chip .live{animation:none}
  .mf__text .w{color:var(--bone)}
}

/* ---------- one display face everywhere ---------- */
.display{font-family:var(--f-poster);font-weight:400;letter-spacing:0;line-height:.9}
.sec-head .display{font-size:clamp(52px,8vw,124px)}
.brand__word{font-family:var(--f-poster);font-weight:400;letter-spacing:.06em}

/* hero waits hidden for its intro (no loader screen) */
html.pre .hx__word b,html.pre .hx__sub,html.pre .hx__eyebrow,html.pre .hx__foot,html.pre .hx__scroll{opacity:0}

/* booking: busy button + taken slots */
.btn.is-busy{opacity:.7;pointer-events:none}
.slot.is-taken{text-decoration:line-through;opacity:.35}

/* ---------- Ladies link: its own look in the header ---------- */
.nav__ladies{position:relative;display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:999px;font-weight:800;color:#1a0a12!important;
  background:linear-gradient(135deg,#f6b7c9,#e57ea0);box-shadow:0 8px 22px -8px rgba(242,155,181,.7);opacity:1!important}
.nav__ladies::before{content:"✦";font-size:11px}
.nav__ladies:hover{filter:brightness(1.07)}
.nav__ladies.is-here{background:var(--bone);box-shadow:none}
.nav__ladies.is-here::before{content:"←"}
.nav__ladies--m{display:none}
@media (max-width:899px){.nav__ladies--m{display:inline-flex;padding:7px 12px;font-size:13px;margin-right:2px}}
.mmenu nav a.mm-ladies{color:#f29bb5}
.mmenu nav a.mm-ladies span{color:#f29bb5}

/* ---------- phone hero: stacked layout, nothing can overlap the title ---------- */
@media (max-width:899px){
  .hx{display:flex;flex-direction:column;padding:calc(78px + env(safe-area-inset-top)) 0 calc(18px + env(safe-area-inset-bottom))}
  .hx__eyebrow,.hx__title,.hx__foot{position:relative;inset:auto;transform:none}
  .hx__eyebrow{z-index:3}
  .hx__title{flex:1;display:flex;flex-direction:column;justify-content:center;min-height:0;padding:10px 0}
  .hx__foot{gap:12px}
  .hx__chips .chip{padding:7px 12px;font-size:12px}
}
@media (max-width:899px) and (max-height:740px){
  .hx__lede{display:none}
  .hx__word{font-size:clamp(100px,27vw,200px)}
}
.hx__anim{z-index:1}

/* ---------- Pay via UPI (done step) ---------- */
.pay{display:grid;justify-items:center;gap:12px;width:100%;max-width:360px;margin:6px auto 4px;padding:18px 16px;border-radius:20px;background:var(--ink-2,#151210);box-shadow:inset 0 0 0 1px var(--line-2)}
.pay[hidden],.pay [hidden]{display:none!important}
.pay__k{font-family:var(--f-display);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)!important}
.btn--upi{--bg:#fff;--fg:#16120f;width:100%}
.btn--upi b{font-weight:900}
.pay__qr{width:200px;padding:8px;border-radius:14px;background:#fff}
.pay__qr svg{display:block;width:100%;height:auto}
.pay__hint{font-size:13px;line-height:1.45}
.pay__utr{display:grid;gap:8px;width:100%;text-align:left}
.pay__utr label{font-size:12px;color:var(--mute)}
.pay__row{display:flex;gap:8px}
.pay__row input{flex:1;min-width:0;height:40px;padding:0 14px;border-radius:999px;border:1.5px solid var(--line-2);background:transparent;color:var(--bone);font:600 15px/1 var(--f-body,inherit);letter-spacing:.06em}
.pay__row input:focus{outline:none;border-color:var(--bone)}
.pay__ok{font-size:14px;color:var(--wa)!important}