/* Noor Beauty Salon, the shared shell.
   Every page loads this. Page specific rules live in each page's own <style>. */

:root{
  --canvas:#0B0A08;
  --panel:#16130E;
  --panel-2:#1E1A12;
  --night:#132227;
  --wine:#3A1B25;
  --gold:#D4AF37;
  --gold-lite:#E5C766;
  --gold-deep:#B8941F;
  --gold-ghost:rgba(212,175,55,.22);
  --gold-line:rgba(212,175,55,.34);
  --ink:#F4EFE4;
  --ink-2:rgba(244,239,228,.66);
  --ink-3:rgba(244,239,228,.42);
  --display:"Fraunces",Georgia,serif;
  --body:"Open Sans",system-ui,sans-serif;
  --mono:"DM Mono",ui-monospace,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-soft:cubic-bezier(.4,0,.2,1);
  --tshadow:0 1px 2px rgba(5,4,2,.95),0 3px 12px rgba(5,4,2,.8),0 10px 44px rgba(5,4,2,.82);
  --pad:clamp(20px,5vw,80px);
}
/* Bangla. Fraunces and Open Sans carry no Bangla glyphs at all, so the whole type system
   swaps when the reader asks for it. Tiro Bangla is the serif that sits closest to Fraunces,
   Hind Siliguri reads like Open Sans at small sizes. Neither is fetched until the switch is
   pressed, so an English visitor never pays for them. */
html.bn{
  --display:"Tiro Bangla",Georgia,serif;
  --body:"Hind Siliguri",system-ui,sans-serif;
  --mono:"Hind Siliguri",system-ui,sans-serif;
}
/* Bangla sits taller in the line and does not want Fraunces's tight tracking */
html.bn h1,html.bn h2,html.bn h3{line-height:1.28;letter-spacing:0;font-variation-settings:normal}
html.bn body{line-height:1.8}
html.bn .kick,html.bn .kicker,html.bn .th,html.bn .cat-count,html.bn .medal-cap,
html.bn .tally,html.bn .cue{letter-spacing:.06em}

/* the switch itself */
.lang{background:none;border:1px solid rgba(212,175,55,.28);color:var(--ink-2);cursor:pointer;
  font-family:var(--body);font-size:12.5px;line-height:1;padding:9px 13px;border-radius:999px;
  white-space:nowrap;transition:color .4s var(--ease),border-color .4s var(--ease),background .4s var(--ease)}
.lang:hover{color:var(--ink);border-color:var(--gold);background:rgba(212,175,55,.1)}
.lang .on{display:none}
html.bn .lang .on{display:inline}
html.bn .lang .off{display:none}
@media (pointer:coarse){.lang{min-height:40px}}
/* on a phone the nav keeps only the mark, this switch and the burger, so the switch is
   reachable without opening the drawer first */
@media (max-width:940px){.nav>.lang{margin-left:auto;margin-right:4px}}
.drawer .foot .lang{align-self:flex-start}

*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:hidden;overflow-x:clip}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--canvas);color:var(--ink);
  font-family:var(--body);font-size:clamp(16px,1.05vw,18px);line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
/* Fraunces carries its warmth in the SOFT and WONK axes, so they are set once, here */
h1,h2,h3,.line,.prow .name,.q summary{font-variation-settings:"SOFT" 40,"WONK" 1}
h1,h2,h3{font-family:var(--display);font-weight:400;line-height:1.06;letter-spacing:-.014em;margin:0}
p{margin:0}
a{color:inherit}
img{max-width:100%;display:block}
/* An author rule like the one above outranks the browser's own [hidden] rule, so el.hidden = true
   stops working and the element stays on screen. This puts it back for every element on the site. */
[hidden]{display:none}

/* the one fixed environment layer */
.env{position:fixed;inset:0;z-index:0;pointer-events:none}
.env::before{
  content:"";position:absolute;inset:-20%;
  background:radial-gradient(50% 40% at 70% 18%,rgba(212,175,55,.09),transparent 62%),
             radial-gradient(46% 38% at 18% 78%,rgba(19,34,39,.5),transparent 66%);
  animation:drift 78s var(--ease-soft) -14s infinite alternate;
}
@keyframes drift{from{transform:translate3d(-2%,-1%,0) scale(1.02)}to{transform:translate3d(2%,2%,0) scale(1.08)}}

.skip{position:absolute;left:-9999px;top:0;z-index:99;background:var(--gold);color:#140F03;padding:12px 18px;font-weight:600;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:2px}

/* ---------- nav ---------- */
.nav{
  /* above the drawer on purpose, so the mark and the close control stay reachable while it is open */
  position:fixed;top:0;left:0;right:0;z-index:60;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px var(--pad);
  transition:background .5s var(--ease),backdrop-filter .5s var(--ease);
}
.nav::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:1;
  background:linear-gradient(to bottom,rgba(6,5,3,.78),rgba(6,5,3,0));
  transition:opacity .5s var(--ease);
}
.nav.solid{background:rgba(11,10,8,.86);backdrop-filter:blur(14px);border-bottom:1px solid rgba(212,175,55,.14)}
.nav.solid::before{opacity:0}
.nav>*{position:relative}
.nav-mark{display:flex;align-items:center;gap:10px;text-decoration:none}
.nav-mark svg{width:88px;height:auto;display:block}

.nav-links{display:flex;align-items:center;gap:clamp(16px,2.2vw,34px)}
.nav-links a{position:relative;font-size:14.5px;color:var(--ink-2);text-decoration:none;padding:7px 0;white-space:nowrap;
  transition:color .45s var(--ease)}
.nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:2px;height:1px;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;transition:transform .5s var(--ease)}
.nav-links a:hover{color:var(--ink)}
.nav-links a:hover::after{transform:scaleX(1)}
.nav-links a[aria-current="page"]{color:var(--gold)}
.nav-links a[aria-current="page"]::after{transform:scaleX(1)}

.burger{display:none;align-items:center;justify-content:center;width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;color:var(--ink)}
.burger i{display:block;width:22px;height:1.5px;background:currentColor;position:relative;transition:background .3s var(--ease)}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:1.5px;background:currentColor;
  transition:transform .45s var(--ease)}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.burger[aria-expanded="true"] i{background:transparent}
.burger[aria-expanded="true"] i::before{transform:translateY(7px) rotate(45deg)}
.burger[aria-expanded="true"] i::after{transform:translateY(-7px) rotate(-45deg)}

.drawer{position:fixed;inset:0;z-index:55;background:rgba(9,8,6,.97);backdrop-filter:blur(18px);
  display:flex;flex-direction:column;justify-content:center;gap:4px;padding:0 var(--pad);
  opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s var(--ease)}
.drawer.open{opacity:1;visibility:visible}
.drawer>a{font-family:var(--display);font-size:clamp(30px,8.4vw,46px);color:var(--ink);text-decoration:none;
  padding:9px 0;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease),transform .6s var(--ease),color .4s var(--ease)}
.drawer.open>a{opacity:1;transform:none}
.drawer.open>a:nth-child(1){transition-delay:60ms}
.drawer.open>a:nth-child(2){transition-delay:130ms}
.drawer.open>a:nth-child(3){transition-delay:200ms}
.drawer.open>a:nth-child(4){transition-delay:270ms}
.drawer.open>a:nth-child(5){transition-delay:340ms}
.drawer.open>a:nth-child(6){transition-delay:400ms}
.drawer>a:hover,.drawer>a[aria-current="page"]{color:var(--gold)}
.drawer .foot{margin-top:34px;display:flex;flex-direction:column;gap:12px;opacity:0;transform:translateY(16px);
  transition:opacity .6s var(--ease) 340ms,transform .6s var(--ease) 340ms}
.drawer.open .foot{opacity:1;transform:none}
.drawer .foot p{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3)}
body.locked{overflow:hidden}

@media (max-width:940px){
  .nav-links{display:none}
  .burger{display:inline-flex}
  .nav>.btn-gold{display:none}
}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--body);font-size:14.5px;font-weight:600;letter-spacing:.01em;
  padding:12px 22px;border-radius:999px;text-decoration:none;border:1px solid transparent;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),background .45s var(--ease),color .45s var(--ease),border-color .45s var(--ease);
  text-shadow:none;cursor:pointer;
}
.btn-gold{background:var(--gold);color:#140F03;box-shadow:0 6px 26px rgba(212,175,55,.18)}
.btn-gold:hover{background:var(--gold-lite);transform:translateY(-2px);box-shadow:0 12px 36px rgba(212,175,55,.3)}
.btn-ghost{border-color:var(--gold-line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--gold);background:rgba(212,175,55,.09);transform:translateY(-2px)}
.btn svg{width:16px;height:16px;flex:none}
@media (pointer:coarse){.btn{min-height:44px}}

/* ---------- section furniture ---------- */
main{position:relative;z-index:1}
section{position:relative;padding:clamp(78px,10vw,152px) var(--pad)}
.wrap{max-width:1200px;margin-inline:auto}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
.h2{font-size:clamp(30px,4.4vw,62px);max-width:19ch}
.lede{color:var(--ink-2);margin-top:18px;max-width:52ch;font-size:clamp(15.5px,1.25vw,18px)}

/* the signature: the Noor lens, two circles that draw themselves */
.lens{display:block;width:min(200px,34vw);height:auto;margin:0 auto;color:var(--gold);overflow:visible}
.lens circle{fill:none;stroke:currentColor;stroke-width:.9;stroke-dasharray:var(--len,240);
  stroke-dashoffset:calc(var(--len,240)*(1 - var(--draw,0)));opacity:.62}
.lens .sp{fill:currentColor;opacity:calc(var(--draw,0)*.9);transform-box:fill-box;transform-origin:center;
  transform:scale(var(--draw,0))}
.divide{padding-block:clamp(30px,5vw,62px)}

/* entrance choreography */
.rise{opacity:0;transform:translateY(26px);transition:opacity .95s var(--ease),transform .95s var(--ease)}
.in .rise,.rise.in{opacity:1;transform:none}
.stagger>*{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.stagger.in>*{opacity:1;transform:none}
.stagger.in>*:nth-child(1){transition-delay:0ms}
.stagger.in>*:nth-child(2){transition-delay:110ms}
.stagger.in>*:nth-child(3){transition-delay:220ms}
.stagger.in>*:nth-child(4){transition-delay:330ms}
.stagger.done>*:nth-child(1),.stagger.done>*:nth-child(2),
.stagger.done>*:nth-child(3),.stagger.done>*:nth-child(4){transition-delay:0s !important}

/* ---------- faq, reusable ---------- */
.faq{margin-top:clamp(34px,4vw,52px);border-top:1px solid rgba(212,175,55,.14)}
.q{border-bottom:1px solid rgba(212,175,55,.14)}
.q summary{list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:clamp(18px,2vw,26px) 2px;font-family:var(--display);font-size:clamp(19px,1.9vw,26px);
  transition:color .5s var(--ease)}
.q summary::-webkit-details-marker{display:none}
.q summary:hover{color:var(--gold-lite)}
.q .sign{flex:none;width:20px;height:20px;position:relative;margin-top:7px}
.q .sign::before,.q .sign::after{content:"";position:absolute;inset:50% 0 auto 0;height:1px;background:var(--gold);
  transition:transform .5s var(--ease)}
.q .sign::after{transform:rotate(90deg)}
.q[open] .sign::after{transform:rotate(0)}
.q .a{padding:0 2px clamp(20px,2vw,26px);color:var(--ink-2);max-width:64ch;font-size:15.5px}

/* ---------- footer ---------- */
footer{position:relative;z-index:1;border-top:1px solid rgba(212,175,55,.16);padding:clamp(46px,5vw,72px) var(--pad) 40px;background:rgba(11,10,8,.7)}
.fgrid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:clamp(26px,4vw,60px);max-width:1200px;margin-inline:auto}
@media (max-width:940px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:760px){.fgrid{grid-template-columns:1fr;gap:30px}}
footer .mark svg{width:120px;height:auto}
footer p,footer a{font-size:14.5px;color:var(--ink-2);text-decoration:none}
footer a:hover{color:var(--gold-lite)}
.flinks{display:flex;flex-direction:column;gap:9px}
.fsocial{display:flex;flex-wrap:wrap;gap:14px}
.schip{display:flex;flex-direction:column;align-items:center;gap:8px;width:52px;text-decoration:none!important}
.schip .chip{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;
  box-shadow:0 4px 12px rgba(0,0,0,.32);transition:transform .3s var(--ease),filter .3s var(--ease)}
.schip .chip svg{width:18px;height:18px;fill:#fff}
.schip .name{font-size:10px;font-family:var(--mono);letter-spacing:.02em;color:var(--ink-2)!important;text-align:center}
.schip:hover .chip{transform:translateY(-3px);filter:brightness(1.15)}
.schip:hover .name{color:var(--gold-lite)!important}
.chip.wa{background:#25D366}
.chip.fb{background:#1877F2}
.chip.ig{background:linear-gradient(135deg,#f9ce34,#ee2a7b,#6228d7)}
.chip.gb{background:#4285F4}
.chip.li{background:#0A66C2}
.chip.yt{background:#FF0000}
.chip.tt{background:#000;border:1px solid rgba(255,255,255,.18)}
.chip.pt{background:#E60023}
@media (max-width:760px){.schip{width:46px}.schip .chip{width:36px;height:36px}.schip .chip svg{width:16px;height:16px}.schip .name{font-size:9.5px}}
.ftitle{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--ink-3);margin-bottom:14px}
.fbase{max-width:1200px;margin:clamp(34px,4vw,52px) auto 0;padding-top:22px;border-top:1px solid rgba(212,175,55,.12);
  display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;font-size:12.5px;color:var(--ink-3)}

/* ---------- page banner, for every page except home ---------- */
.banner{position:relative;min-height:clamp(340px,54vh,520px);display:flex;align-items:flex-end;
  padding:130px var(--pad) clamp(40px,5vw,64px);overflow:hidden;isolation:isolate}
.banner .bg{position:absolute;inset:0;z-index:-2;background-size:cover;background-position:center}
.banner::after{content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(to top,rgba(6,5,3,.95) 6%,rgba(6,5,3,.62) 46%,rgba(6,5,3,.42) 100%)}
.banner .inner{max-width:1200px;margin-inline:auto;width:100%;text-shadow:var(--tshadow)}
.banner h1{font-size:clamp(38px,6vw,84px);max-width:15ch}
.banner .sub{margin-top:16px;color:var(--ink-2);max-width:56ch;font-size:clamp(15.5px,1.25vw,18px)}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none !important;transition:none !important;transition-delay:0s !important}
  .rise,.stagger>*{opacity:1 !important;transform:none !important}
  .lens circle{stroke-dashoffset:0 !important}
  .lens .sp{opacity:.9 !important;transform:scale(1) !important}
}
body.paused *,body.paused *::before,body.paused *::after{animation-play-state:paused !important}

footer .ftag{font-family:var(--mono);font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-lite);margin-top:16px;line-height:1.5}