/* =========================================================
   SHOAIB SALON — Celebrity Hairstylist, Karachi
   Base layer: tokens, reset, type primitives, buttons, nav,
   media slots, section bands, reveal, responsive nav.
   Page-specific components live in sections.css and hero.css.
   ========================================================= */

:root{
  /* =====================================================
     BRAND KIT
     Supplied as three swatches and two typefaces:
       #172E07  deep green
       #090909  near-black
       #F1F1F1  off-white
       Montserrat (headings) / Poppins (everything else)
     Every colour below is one of those three verbatim, or a step
     taken from them. Nothing is invented alongside them.
     ===================================================== */
  --green:      #172E07;   /* the brand green, exactly as supplied */
  --ink:        #090909;   /* the near-black, exactly as supplied */
  --off:        #F1F1F1;   /* the off-white, exactly as supplied */

  /* The green is very dark — relative luminance 0.0215, against the
     near-black's 0.0027. Measured, green on ink is 1.36:1, so it can
     never carry text or a visible line on a dark ground. It earns its
     place as a GROUND instead: off-white on green measures 13.00:1.
     These lifted steps exist only for the few places an accent has to
     read against the near-black — 47821C measures 4.25:1 there. */
  --green-2:    #0E1D04;   /* deeper, for gradients under the green */
  --green-lift: #3A6A16;   /* 3.08:1 on ink — hairlines, quiet borders */
  --green-glow: #47821C;   /* 4.25:1 on ink — active states, accents */

  /* Steps either side of the near-black, for raised cards and the foot. */
  --ink-2:      #131313;
  --ink-3:      #050505;
  --off-2:      #E2E4DE;
  /* The appointment ground. Not a fourth colour: it is the off-white
     walked 18% of the way toward the brand green, so it belongs to the
     kit by construction rather than by eye. Measured on it - headings
     12.48:1, the brand green 9.20:1, body copy 5.11:1, all past the
     4.5 floor. A 24% walk would have pushed body copy to 4.50 and a
     30% walk to 3.93, which is where this stops. */
  --stone:      #CACEC7;
  --white:      #FFFFFF;

  /* Body copy, all measured:
       --muted      on ink   8.88:1   on green 6.55:1
       --muted-dark on off   7.22:1
     Comfortably past the 4.5:1 needed for body text on all three. */
  --muted:      #A9AFA6;
  --muted-dark: #4B514A;

  /* Type. Montserrat is the heading face and doubles as the wordmark —
     its heavy weights are the closest match to the SHOAIB SALON
     logotype. Poppins carries sub-headings and body. */
  --display: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
  --body:    'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --serif:   'Montserrat', 'Helvetica Neue', Arial, sans-serif;

  /* Layout */
  --wrap: 1180px;
  --gut: clamp(20px, 5vw, 56px);
  --r-card: 10px;

  /* Motion */
  --ease: cubic-bezier(.22,.61,.36,1);
  --z-nav: 50;
  --z-float: 40;
}


/* -
/* ---------------------------------------------------------
   Aliases for the previous palette.
   The old gold/cream kit is gone, but its token names are still spelled
   throughout sections.css and hero.css. Rather than a risky find-and-
   replace across three files, each retired name now points at its
   nearest equivalent in the new kit. There is no gold in the brand, so
   everything gold resolves to the off-white or a lifted green.
   --------------------------------------------------------- */
:root{
  --gold:       var(--green-glow);
  --gold-2:     var(--green-lift);
  --gold-deep:  var(--green);
  --gold-lift:  #5DAB25;   /* small text on the dark bands: measured
                              5.12:1 on the emerald, 6.94:1 on the ink */
  --gold-soft:  var(--off-2);
  --cream:      var(--off);
  --cream-2:    var(--off-2);
  --green-soft: var(--green-lift);
  --muted-warm: var(--muted-dark);
}


/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{
  -webkit-text-size-adjust:100%; scroll-behavior:smooth;
  /* overflow-x on body alone isn't reliable — per the CSS overflow
     propagation rules a visible <html> can still size the viewport off
     body's un-clipped content. Clipping here too is the defensive fix.
     ---
     clip, NOT hidden. They crop identically, but `overflow-x:hidden`
     forces the other axis from visible to auto, which turns this element
     into a scroll container — and position:sticky further down the tree
     then sticks to a box that never scrolls, i.e. it silently does
     nothing. That is what pins the hero walk-in. `clip` is the one value
     allowed to sit next to `visible`, so it clips without creating a
     scroller. `hidden` is kept first as the fallback for browsers that
     don't know `clip`; hero.js feature-tests for it before switching the
     scrub on, so those browsers keep the still instead of scrolling
     through empty space. */
  overflow-x:hidden;
  overflow-x:clip;
}
body{
  margin:0;
  background:var(--ink);
  color:var(--white);
  font-family:var(--body);
  font-size:16px;
  line-height:1.7;
  font-weight:400;
  /* clip, not hidden — same reason as on <html> above. */
  overflow-x:hidden;
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img{ max-width:100%; display:block; }
a{ color:inherit; }
button,input,select,textarea{ font:inherit; color:inherit; }
h1,h2,h3,h4{ margin:0; }
p{ margin:0 0 1.05em; }

:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:2px;
}
.on-cream :focus-visible{ outline-color:var(--gold-deep); }

.sr-only{
  position:absolute; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

/* =========================================================
   OPENING CURTAIN
   Hidden by default. Only a browser that ran the inline .js
   flag ever renders it, so JavaScript-off visitors go straight
   to the page rather than staring at a panel that never lifts.
   ========================================================= */
.curtain{ display:none; }

.js .curtain{
  display:block;
  position:fixed; inset:0; z-index:9999;
  /* Clips the panels as they leave and, in iris mode, keeps the very
     large box-shadow from ever reaching the document. */
  overflow:hidden;
  /* Backstop. If the inline script never runs, this still clears the
     page at 7s. forwards holds the end state so it cannot reappear. */
  animation:curtain-failsafe 0s linear 7s forwards;
}
@keyframes curtain-failsafe{
  to{ opacity:0; visibility:hidden; pointer-events:none; }
}

/* The two halves. 50.5% so their inner edges overlap slightly and no
   hairline of the page shows through the join before they part. */
.curtain__panel{
  position:absolute; top:0; bottom:0; width:50.5%;
  background:var(--ink-3);
  transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.curtain__panel--l{ left:0; }
.curtain__panel--r{ right:0; }
.curtain.is-open .curtain__panel--l{ transform:translateX(-100%); }
.curtain.is-open .curtain__panel--r{ transform:translateX(100%); }

/* ---------- reveal: lift ----------
   One full-width panel rising, like a stage curtain. */
.curtain[data-reveal="lift"] .curtain__panel--l{ width:100%; }
.curtain[data-reveal="lift"] .curtain__panel--r{ display:none; }
.curtain[data-reveal="lift"].is-open .curtain__panel--l{
  transform:translateY(-100%);
}

/* ---------- reveal: iris ----------
   A transparent circle grows from behind the logo while a very wide
   box-shadow fills everything outside it, so the page opens outward.
   The shadow is what you see; the element itself is the hole. */
.curtain__iris{ display:none; }
.curtain[data-reveal="iris"] .curtain__panel{ display:none; }
.curtain[data-reveal="iris"] .curtain__iris{
  display:block;
  position:absolute; left:50%; top:46%;
  width:0; height:0; border-radius:50%;
  transform:translate(-50%,-50%);
  box-shadow:0 0 0 100vmax var(--ink-3);
  transition:width 1s cubic-bezier(.76,0,.24,1),
             height 1s cubic-bezier(.76,0,.24,1);
}
.curtain[data-reveal="iris"].is-open .curtain__iris{
  width:230vmax; height:230vmax;
}

.curtain__inner{
  position:absolute; inset:0;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding-inline:var(--gut);
  text-align:center;
  /* A soft pool of the brand green, so the panel is not flat black. */
  background:radial-gradient(46% 40% at 50% 46%,
             rgba(24,59,30,.55) 0%, rgba(24,59,30,0) 70%);
  transition:opacity .4s var(--ease);
}
.curtain.is-open .curtain__inner{ opacity:0; }

.curtain__logo{
  display:block; width:clamp(82px,11vw,112px); height:auto;
  opacity:0; transform:scale(.82);
  animation:curtain-pop .8s var(--ease) .1s forwards;
}
@keyframes curtain-pop{ to{ opacity:1; transform:scale(1); } }

/* letter-spacing tightening is the signature move here. text-indent is
   animated to the same value so the trailing space letter-spacing adds
   after the last glyph does not shove the line off centre. */
.curtain__name{
  margin:24px 0 0;
  font-family:var(--display); font-weight:800;
  font-size:clamp(1.05rem,2.4vw,1.5rem);
  line-height:1; text-transform:uppercase; color:var(--white);
  opacity:0; letter-spacing:.55em; text-indent:.55em;
  animation:curtain-word 1s var(--ease) .45s forwards;
}
@keyframes curtain-word{
  to{ opacity:1; letter-spacing:.2em; text-indent:.2em; }
}

.curtain__tag{
  margin:12px 0 0;
  font-family:var(--display); font-weight:500;
  font-size:clamp(.58rem,1.1vw,.68rem);
  letter-spacing:.3em; text-transform:uppercase;
  color:var(--gold-soft);
  opacity:0;
  animation:curtain-fade .7s var(--ease) .85s forwards;
}
@keyframes curtain-fade{ to{ opacity:1; } }

/* Nothing behind the curtain should scroll while it is up. */
html.curtain-on, html.curtain-on body{ overflow:hidden; }

@media (prefers-reduced-motion:reduce){
  .js .curtain{ display:none; }
}

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--gold); color:var(--ink);
  padding:14px 22px; font-weight:600; text-decoration:none;
}
.skip-link:focus{ left:12px; top:12px; }

.wrap{ max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gut); }

/* ---------- Typography primitives ---------- */
/* The accent green measured 3.13:1 against the emerald band - a fail for
   text this size, and these eyebrows are 11.8px at .28em tracking, which
   is the hardest case on the page rather than the easiest. --gold-lift is
   the same hue carried up in lightness until it clears 4.5:1 with room to
   spare. Light grounds are untouched: .eyebrow--dark follows this rule and
   keeps the deep green, which is already high contrast on cream. */
.eyebrow{
  font-family:var(--display);
  font-size:.74rem; font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color:var(--gold-lift);
  margin:0 0 1rem;
}
.eyebrow--dark{ color:var(--gold-deep); }

/* The workhorse section heading: condensed, heavy, uppercase. */
.h-sec{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.6rem, 3.1vw, 2.5rem);
  line-height:1.08; letter-spacing:.01em; text-transform:uppercase;
  margin:0 0 1rem;
  color:var(--white);
}
.h-sec--dark{ color:var(--ink); }
.h-sec--center{ text-align:center; }

.h-big{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.9rem, 4.2vw, 3.2rem);
  line-height:1.06; letter-spacing:.005em; text-transform:uppercase;
  margin:0 0 1.1rem;
}

.lead{
  font-size:clamp(1rem, 1.5vw, 1.12rem);
  line-height:1.6; color:var(--muted);
  margin-bottom:1.4em;
}
.lead--dark{ color:var(--muted-warm); }

/* ---------- Buttons ---------- */
.btn{
  --btn-bg:var(--gold); --btn-fg:var(--ink); --btn-bd:var(--gold);
  display:inline-flex; align-items:center; justify-content:center; gap:.55em;
  min-height:48px;
  padding:.8em 1.7em;
  background:var(--btn-bg); color:var(--btn-fg);
  border:1.5px solid var(--btn-bd);
  border-radius:4px;
  font-family:var(--display);
  font-size:.8rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease),
             border-color .22s var(--ease), transform .22s var(--ease);
}
.btn:hover{ transform:translateY(-1px); }
.btn:hover,.btn:focus-visible{ --btn-bg:var(--gold-2); --btn-bd:var(--gold-2); }

.btn--ghost{ --btn-bg:transparent; --btn-fg:var(--white); --btn-bd:rgba(255,255,255,.34); }
.btn--ghost:hover,.btn--ghost:focus-visible{ --btn-bg:var(--gold); --btn-fg:var(--ink); --btn-bd:var(--gold); }

.btn--dark{ --btn-bg:var(--ink); --btn-fg:var(--white); --btn-bd:var(--ink); }
.btn--dark:hover,.btn--dark:focus-visible{ --btn-bg:var(--gold-deep); --btn-bd:var(--gold-deep); --btn-fg:var(--white); }

.btn--sm{ min-height:42px; padding:.62em 1.25em; font-size:.72rem; }
.btn--full{ width:100%; }
.ico{ width:15px; height:15px; flex:none; }

/* Round icon button — carousel arrows. */
.round-btn{
  width:44px; height:44px; flex:none;
  display:grid; place-items:center;
  background:transparent; color:inherit;
  border:1.5px solid currentColor; border-radius:50%;
  cursor:pointer;
  transition:background .22s var(--ease), color .22s var(--ease), border-color .22s var(--ease);
}
.round-btn svg{ width:16px; height:16px; }
.round-btn:hover:not(:disabled){ background:var(--gold); color:var(--ink); border-color:var(--gold); }
.round-btn:disabled{ opacity:.3; cursor:not-allowed; }

/* =========================================================
   NAV — links left, badge logo centred, contact right
   ========================================================= */
.nav{
  position:fixed; inset:0 0 auto; z-index:var(--z-nav);
  background:rgba(14,14,14,.9);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:transform .35s var(--ease), background .3s var(--ease);
}
.nav.is-hidden{ transform:translateY(-100%); }

.nav__inner{
  max-width:var(--wrap); margin-inline:auto;
  padding:0 var(--gut);
  display:grid; grid-template-columns:1fr auto 1fr;
  align-items:center; gap:20px;
  min-height:84px;
}

.nav__links{ display:flex; gap:4px; }
.nav__links a{
  padding:8px 13px; border-radius:4px;
  font-family:var(--display); font-size:.78rem; font-weight:400;
  letter-spacing:.1em; text-transform:uppercase; text-decoration:none;
  color:rgba(255,255,255,.82);
  transition:background .2s var(--ease), color .2s var(--ease);
}
.nav__links a:hover{ color:var(--gold); }
.nav__links a.is-active{ color:var(--gold); }

/* The centred brand lockup: monogram above the wordmark, matching the
   salon's own vertical logo. */
.brand{
  display:flex; flex-direction:column; align-items:center; gap:5px;
  text-decoration:none; color:var(--cream);
  transition:opacity .3s var(--ease);
}
.brand:hover{ opacity:.82; }
/* The salon's own badge. width/height are set here rather than left to
   the img attributes so the intrinsic 241px never leaks into layout. */
.brand__mark{ display:block; width:34px; height:34px; flex:none; }
.brand__name{
  font-family:var(--serif); font-weight:400;
  font-size:.86rem; line-height:1;
  letter-spacing:.17em; text-transform:uppercase;
  white-space:nowrap;
}
.brand__sub{
  font-family:var(--display); font-weight:300;
  font-size:.54rem; line-height:1.2;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--gold);
  white-space:nowrap;
}
.brand--stack{ align-items:flex-start; gap:7px; }
.brand--stack .brand__mark{ width:44px; height:44px; }
.brand--stack .brand__name{ font-size:1rem; }

.nav__right{
  display:flex; align-items:center; justify-content:flex-end; gap:16px;
}
.nav__phone{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--display); font-size:.82rem; font-weight:500;
  letter-spacing:.06em; color:var(--white); text-decoration:none;
  white-space:nowrap;
  transition:color .2s var(--ease);
}
.nav__phone:hover{ color:var(--gold); }
.nav__phone svg{ width:15px; height:15px; color:var(--gold); flex:none; }

.nav__burger{
  display:none; width:44px; height:44px;
  background:none; border:0; cursor:pointer;
  flex-direction:column; align-items:center; justify-content:center; gap:5px;
  color:var(--white);
}
.nav__burger span{
  width:20px; height:2px; background:currentColor; border-radius:2px;
  transition:transform .28s var(--ease), opacity .2s var(--ease);
}
.nav__burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav__burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav__burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* =========================================================
   MEDIA SLOTS
   ========================================================= */
.media{
  position:relative; overflow:hidden;
  background:var(--ink-2);
  border-radius:var(--r-card);
}
.media img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(.25) sepia(.12) contrast(1.06) brightness(.96);
  transition:transform .8s var(--ease), filter .5s var(--ease);
}
.media:hover img{ transform:scale(1.04); filter:grayscale(.15) sepia(.14) contrast(1.1); }

.media--tall{ aspect-ratio:3/4; }
.media--wide{ aspect-ratio:4/3; }
.media--sq{ aspect-ratio:1/1; }
.media--fill{ position:absolute; inset:0; border-radius:0; }

/* Placeholder state when the photo file isn't there yet */
.media.is-empty{
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,.07) 0 12px, rgba(255,255,255,.02) 12px 24px),
    var(--ink-2);
  border:1px dashed rgba(255,255,255,.26);
}
.media.is-empty img{ display:none; }
.media.is-empty::after{
  content:attr(data-empty);
  position:absolute; inset:0;
  display:grid; place-items:center; text-align:center;
  padding:14px;
  font-family:var(--display); font-size:.66rem; font-weight:500;
  letter-spacing:.18em; text-transform:uppercase;
  color:rgba(255,255,255,.5);
}
/* On cream panels the placeholder needs the inverse treatment. */
.on-cream .media.is-empty{
  background:
    repeating-linear-gradient(135deg,
      rgba(22,22,22,.08) 0 12px, rgba(22,22,22,.03) 12px 24px),
    var(--cream-2);
  border-color:rgba(22,22,22,.26);
}
.on-cream .media.is-empty::after{ color:rgba(22,22,22,.5); }

/* =========================================================
   SECTION BANDS
   ========================================================= */
.section{ padding:clamp(56px,7.5vw,104px) 0; }
.section--ink{ background:var(--ink); }
.section--ink3{ background:var(--ink-3); }
.section--green{ background:var(--green); }
.section--cream{ background:var(--cream); color:var(--ink); }

/* A subtle diagonal edge between bands, like the reference. Sections
   carry enough vertical padding that the clip never eats content. */
.slant-b{ clip-path:polygon(0 0, 100% 0, 100% calc(100% - 2.2vw), 0 100%); }
.slant-t{ clip-path:polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%); margin-top:-2.2vw; }
.slant-tb{
  clip-path:polygon(0 2.2vw, 100% 0, 100% calc(100% - 2.2vw), 0 100%);
  margin-top:-2.2vw;
}

/* =========================================================
   Floating WhatsApp
   ========================================================= */
.wa-float{
  position:fixed; right:18px; bottom:18px; z-index:var(--z-float);
  width:54px; height:54px; display:grid; place-items:center;
  background:var(--gold); color:var(--ink);
  border-radius:50%; box-shadow:0 12px 30px rgba(0,0,0,.45);
  transition:background .22s var(--ease), transform .22s var(--ease);
}
.wa-float svg{ width:25px; height:25px; }
.wa-float:hover{ background:var(--gold-soft); transform:translateY(-2px); }

/* =========================================================
   REVEAL
   ========================================================= */
/* Content is visible by default. It is only hidden once JS confirms it can
   reveal it again — so a script failure or a no-JS browser never blanks the page. */
.reveal{ transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal{ opacity:0; transform:translateY(22px); }
.js .reveal.in{ opacity:1; transform:none; }

/* =========================================================
   RESPONSIVE — nav
   ========================================================= */
@media (max-width:1000px){
  .nav__inner{ grid-template-columns:auto 1fr auto; min-height:64px; }
  .brand{ justify-self:center; gap:3px; }
  .brand__mark{ width:26px; height:26px; }
  .brand__name{ font-size:.7rem; letter-spacing:.14em; }
  .nav__links{
    position:absolute; top:100%; left:0; right:0;
    flex-direction:column; gap:2px;
    background:rgba(14,14,14,.98);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    border-bottom:1px solid rgba(255,255,255,.1);
    padding:12px var(--gut) 18px;
    opacity:0; visibility:hidden; transform:translateY(-10px);
    transition:opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  }
  .nav__links.is-open{ opacity:1; visibility:visible; transform:none; }
  .nav__links a{ padding:13px 4px; font-size:.9rem; }
  .nav__burger{ display:flex; }
  /* The label hides here, which would otherwise collapse the anchor to
     the 15px icon — far too small to tap. Hold it at 44x44. */
  .nav__phone span{ display:none; }
  .nav__phone{ min-width:44px; min-height:44px; justify-content:center; }
  .nav__phone svg{ width:18px; height:18px; }
  .nav__right .btn{ display:none; }
}

@media (max-width:600px){
  .wa-float{ width:48px; height:48px; right:14px; bottom:14px; }
}

/* =========================================================
   MOTION PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .reveal{ opacity:1; transform:none; }
}

/* =========================================================
   PRINT
   ========================================================= */
@media print{
  .nav,.wa-float{ display:none !important; }
  body{ background:#fff; color:#000; }
  .section{ padding:22px 0; break-inside:avoid; }
  .section--ink,.section--ink3,.section--green{ background:#fff !important; color:#000 !important; }
  .h-sec,.h-big{ color:#000 !important; }
  .slant-b,.slant-t,.slant-tb{ clip-path:none !important; margin-top:0 !important; }
}