/* Keya Beauty Salon
   Palette lock: rose (surfaces) + ink (text) + BRASS (the one accent).
   Brass replaces jade: the photography is maroon, gold and warm skin, and a
   green CTA fought it. One accent, actions only.
   Shape lock: 2px radius on media, full pill on every button.
   Grid: one 12-column system for every split section.
   Type: Outfit throughout, Fraunces only on the wordmark, Hind Siliguri for Bangla.
   MOTION_INTENSITY 5, all behind prefers-reduced-motion.
*/

:root{
  --ink:#241318;
  --ink-soft:#3d2a30;
  --rose:#4a1220;
  --rose-deep:#2b0b14;
  --rose-soft:#7a2436;
  --brass:#b08d4f;
  --brass-deep:#96773d;
  --brass-light:#e8cf9a;
  --cream:#fbf6f1;
  --sand:#f2e8e0;
  --line:#ddcec2;
  --muted:#5f4d53;

  --ff-sans:'Outfit',system-ui,sans-serif;
  --ff-serif:'Fraunces',Georgia,serif;
  --ff-bn:'Hind Siliguri','Outfit',sans-serif;

  --pad:clamp(1.5rem,5vw,6rem);
  --sect:clamp(6rem,11vw,12rem);
  --max:1280px;
  --r:2px;
  --ease:cubic-bezier(.16,1,.3,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--ff-sans);
  font-weight:300;
  font-size:clamp(1.0625rem,.6rem + .45vw,1.1875rem);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block}
a{color:inherit}
ul{margin:0;padding:0;list-style:none}

.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--ink);color:var(--cream);padding:.75rem 1.25rem}
.skip:focus{left:0}
:where(a,button):focus-visible{outline:2px solid var(--brass);outline-offset:3px}

.bn{font-family:var(--ff-bn);font-weight:400}

/* Sticky header must not swallow anchor targets. */
:target,section[id]{scroll-margin-top:88px}

/* ---------- NAV ---------- */
.nav{
  position:sticky;top:0;z-index:50;
  background:rgba(251,246,241,.92);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{
  max-width:var(--max);margin:0 auto;height:72px;padding:0 var(--pad);
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
}
/* Real logo, shipped in its own presentation: gold foil on near-black.
   Bare gold on cream measured ~2:1, too pale to read. The plate fixes
   contrast without recolouring artwork that is the client's. */
.brand{display:flex;align-items:center;text-decoration:none;flex:none}
.brand-logo{height:40px;width:auto;display:block;border-radius:2px}
@media(max-width:880px){.brand-logo{height:36px}}

.nav-links{display:flex;align-items:center;gap:2rem}
.nav-links a{
  text-decoration:none;font-size:.9rem;font-weight:400;letter-spacing:.02em;
  padding:.3rem 0;border-bottom:1px solid transparent;
  transition:border-color .25s,color .25s;
}
.nav-links a:hover{border-bottom-color:var(--brass)}
/* Phone is the nav's only action, so it gets the treatment every link shares:
   a rose underline that thickens on hover. No bespoke stray rule. */
.nav-tel{
  color:var(--rose)!important;font-weight:500;
  padding:.3rem 0!important;border-bottom:1px solid var(--rose)!important;
  transition:border-color .25s,color .25s;
}
.nav-tel:hover{border-bottom-width:2px!important;padding-bottom:calc(.3rem - 1px)!important}

.burger{display:none;background:none;border:0;cursor:pointer;width:44px;height:44px;padding:0}
.burger span{display:block;width:24px;height:2px;background:var(--ink);margin:5px auto;transition:transform .3s}
/* 24x2 bars, 5px margin, 10px pitch => close to 10px offset (2 + 5*2 = 12 centres apart) */
.burger[aria-expanded=true] span:first-child{transform:translateY(5px) rotate(45deg)}
.burger[aria-expanded=true] span:last-child{transform:translateY(-5px) rotate(-45deg)}

.mnav{border-top:1px solid var(--line);padding:.5rem var(--pad) 1.5rem;background:var(--cream)}
.mnav a{display:block;padding:.9rem 0;text-decoration:none;font-size:1.05rem;border-bottom:1px solid var(--line)}
.mnav a:last-child{border-bottom:0;color:var(--rose);font-weight:500}

/* ---------- BUTTONS ----------
   ONE action colour: rose. Brass is decorative only (rules, focus, links).
   Two filled buttons in two accents was the original sin. */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  text-decoration:none;white-space:nowrap;
  padding:.95rem 1.9rem;border-radius:100px;
  font-size:.95rem;font-weight:500;letter-spacing:.01em;
  border:1px solid transparent;cursor:pointer;
  transition:transform .2s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--brass);color:#1a1208;font-weight:600;box-shadow:0 6px 24px -6px rgba(36,19,24,.4)}
.btn-primary:hover{background:#c19b58}
.btn-ghost{
  background:rgba(24,7,12,.46);border:1.5px solid rgba(253,248,244,.82);color:#fdf8f4;
  padding:.95rem 1.5rem;font-weight:400;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
}
.btn-ghost:hover{border-color:#fdf8f4;background:rgba(24,7,12,.62)}
.btn-line{background:transparent;border-color:var(--line);color:var(--ink)}
.btn-line:hover{border-color:var(--ink)}
.btn-lg{padding:1.1rem 2.3rem;font-size:1.0625rem}

/* ---------- HERO ---------- */
.hero{
  position:relative;min-height:calc(100dvh - 72px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--rose-deep);
}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 28%}
/* Directional, not global. A full-frame wash kills the bride's skin tone and
   the golds, which are the whole selling point. Dark where the copy sits,
   clear across the face and the vanity lights. Warm plum, not neutral black,
   so the gold jewellery stays gold. */
/* Directional, not a flat wash. A full-frame darken kills skin tone and turns
   the gold jewellery olive, so the density is concentrated where the copy sits
   (left column, lower band) and falls away across her face on the right.
   The left panel runs to 44% before fading: the eyebrow sits high on wide
   viewports, where the old 34% stop left it over her lit shoulder at 2.0:1. */
.hero-scrim{
  position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(26,8,13,.62) 0%,rgba(26,8,13,.34) 26%,transparent 46%),
    linear-gradient(to right,rgba(22,7,11,.90) 0%,rgba(22,7,11,.84) 34%,rgba(22,7,11,.52) 48%,rgba(22,7,11,.18) 58%,transparent 68%),
    rgba(28,10,16,.16);
}
.hero-txt{
  position:relative;width:100%;max-width:var(--max);margin:0 auto;
  padding:0 var(--pad) clamp(2.5rem,6vw,5rem);color:var(--cream);
}
.hero-eyebrow{
  font-size:.8125rem;text-transform:uppercase;letter-spacing:.16em;
  color:#fdf8f4;margin:0 0 1.1rem;
  /* Halo travels with the glyphs, so the eyebrow keeps AA contrast at any
     crop where it lands on a bright patch. Cheaper than darkening the photo. */
  text-shadow:
    0 0 3px rgba(18,5,9,.95),
    0 0 7px rgba(18,5,9,.8),
    0 1px 18px rgba(18,5,9,.7);
}
/* Heritage rides the eyebrow rather than the headline: proof, not promise.
   Kept in cream, not gold, so brass stays exclusive to the one action. */
.eyebrow-since{
  color:rgba(253,248,244,.85);margin-left:.6em;
  padding-left:.6em;border-left:1px solid rgba(253,248,244,.6);
}
.hero-h1{
  font-size:clamp(2.4rem,5.4vw,4.5rem);
  text-wrap:balance;
  font-weight:400;line-height:1.06;letter-spacing:-.035em;
  margin:0 0 1.5rem;max-width:13ch;
  text-shadow:0 2px 30px rgba(24,7,12,.5);
}
.hero-sub{
  font-size:1.0625rem;
  text-wrap:pretty;color:#fdf8f4;
  max-width:42ch;margin:0 0 1.85rem;
  text-shadow:0 1px 20px rgba(24,7,12,.45);
}
.hero-cta{display:flex;flex-wrap:wrap;align-items:center;gap:.85rem 1.25rem}
.hero-trust{
  font-size:.9375rem;letter-spacing:.02em;color:#f3e9e2;
  margin:1.5rem 0 0;max-width:36ch;
  text-shadow:0 1px 16px rgba(24,7,12,.5);
}

/* ---------- RESPONSIVE OVERRIDES ----------
   These MUST stay below the base .hero-* rules above: equal specificity
   means source order decides, and these lose if placed earlier. */
@media(max-width:880px){
  .nav-links{display:none}
  .burger{display:block}
  .nav-in{height:64px}
  .hero{min-height:calc(100dvh - 64px)}
}
/* Tablet portrait: the photo crops so the copy sits mid-frame, where the
   vertical scrim has faded. Needs a full-width wash, measured 4.0:1 without. */
@media(min-width:401px) and (max-width:880px){
  .hero-scrim{
    background:
      linear-gradient(to top,rgba(22,7,11,.93) 0%,rgba(22,7,11,.86) 44%,rgba(22,7,11,.62) 72%,rgba(22,7,11,.36) 100%),
      rgba(28,10,16,.18);
  }
}
/* Narrow phones: stack CTAs so the number never wraps mid-digits. */
@media(max-width:400px){
  .hero-cta{flex-direction:column;align-items:stretch;gap:.75rem}
  .hero-cta .btn{width:100%}
  .hero-h1{font-size:clamp(2.1rem,10vw,2.6rem)}
  .hero-sub{font-size:1rem}
  .hero-trust{font-size:.875rem}
  .hero-scrim{
    background:
      linear-gradient(to top,rgba(22,7,11,.95) 0%,rgba(22,7,11,.9) 46%,rgba(22,7,11,.68) 72%,rgba(22,7,11,.4) 100%),
      rgba(28,10,16,.2);
  }
}

/* ---------- PROOF ---------- */
.proof{background:var(--ink);color:var(--cream)}
.proof-in{
  max-width:var(--max);margin:0 auto;
  padding:clamp(2.25rem,4.5vw,3.5rem) var(--pad);
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
}
.proof-item{display:flex;flex-direction:column;gap:.35rem}
.proof-n{font-size:clamp(1.3rem,1rem + .9vw,1.9rem);font-weight:400;letter-spacing:-.02em;line-height:1.15}
.proof-l{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(251,246,241,.62)}
@media(max-width:760px){.proof-in{grid-template-columns:repeat(2,1fr);gap:1.75rem 1.5rem}}

/* ---------- SECTION HEADS (stacked, never split-header) ---------- */
.sec-head{max-width:var(--max);margin:0 auto;padding:0 var(--pad) clamp(1rem,2vw,1.5rem)}
.sec-h2{font-size:clamp(1.9rem,1.35rem + 2vw,3rem);text-wrap:balance;font-weight:400;letter-spacing:-.03em;line-height:1.1;margin:0 0 .85rem}
.sec-sub{font-size:1.0625rem;text-wrap:pretty;color:var(--muted);max-width:44ch;margin:0}

/* ---------- SERVICES: one filled card per service ----------
   Three designs have been tried here: a scroll-snap row (hid four items), a
   shared ruled box (needed :not(:nth-child(...)) edge logic per breakpoint and
   lost on specificity at 400px), and a ruled menu. This one gives every card
   its own fill on the section colour, so there is no shared frame, no outer
   edge to close and no row-ending cell to special-case.

   A flex-wrap version was tried and rejected: centring the short last row
   inset the whole grid 34px inside the heading column, so the cards stopped
   sharing a left edge with the text above them. Spanning tracks fixes that.
   A gap-as-hairline trick is also wrong here: with five cards the empty cell
   of the last row would expose the grid's own background as a grey block. */
.services{background:var(--cream);padding:var(--pad) 0 0}
/* Five services, so five equal columns on one row. Every earlier layout here
 had to split 5 across 2 or 3 columns, and both shapes caused a defect:
   - 3 + 2 via spans gave row two cards a different width than row one;
   - flex + centred row two inset the grid 34px inside the heading column;
   - auto-fit dropped to 4 + 1 and left one card stranded.
 Five 1fr columns sidestep all of it: every card is identical, the row fills
 the container edge to edge, and there is no short final row to reconcile.
 Cards carry their own fill, so there is no shared frame to close. */
.svc-list{
list-style:none;
display:grid;grid-template-columns:repeat(4,1fr);
gap:clamp(.75rem,1.2vw,1.125rem);
max-width:var(--max);margin:0 auto;padding:0 var(--pad) var(--sect);
}
/* stretch makes every card in a row match its tallest sibling, so one label
   wrapping to two lines at 320px does not make that card stand proud. */
.svc{
  background:var(--sand);
  /* The fill alone contrasts only about 1.15:1 against the page, which is too
     faint to carry the shape on its own. The hairline is the actual edge. */
  box-shadow:inset 0 0 0 1px rgba(36,19,24,.07);
  padding:1.9rem 1.35rem;
  display:flex;flex-direction:column;gap:.45rem;
  transition:background-color .3s var(--ease);
}
/* Hover deepens the card a touch. It stays inside the warm neutrals, so it
   never competes with the rose action colour or the brass accent. */

.svc-en{font-size:1.2rem;font-weight:400;letter-spacing:-.015em;line-height:1.25;color:var(--cream);transition:color .3s var(--ease);position:relative;z-index:2;}
.svc-bn{font-family:var(--ff-bn);font-size:1rem;color:rgba(251,246,241,.8);line-height:1.4;transition:color .3s var(--ease);position:relative;z-index:2;}
.svc-note{
  max-width:var(--max);margin:2.25rem auto 0;padding:1.25rem var(--pad) 0;
  font-size:.875rem;color:var(--muted);
}

/* ---------- CRAFT: 12-col grid, top aligned, generous gutter ---------- */
.craft{
  background:var(--cream);padding:0 0 var(--sect);
  display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(2rem,5vw,5.5rem);
  align-items:start;max-width:var(--max);margin:0 auto;
  padding-left:var(--pad);padding-right:var(--pad);
}
.craft-media{grid-column:1 / span 6}
.craft-media img{width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r)}
.craft-txt{grid-column:8 / span 5;padding-top:.5rem}
.craft-h2{font-size:clamp(1.75rem,1.2rem + 1.7vw,2.6rem);text-wrap:balance;font-weight:400;letter-spacing:-.03em;line-height:1.12;margin:0 0 1.5rem}
.craft-p{font-size:1.0625rem;text-wrap:pretty;color:var(--muted);max-width:38ch;margin:0 0 1.5rem}
.craft-p.bn{color:var(--muted);font-size:1rem;padding-top:1.25rem;border-top:1px solid var(--line);margin-bottom:0}
@media(max-width:900px){
  .craft{grid-template-columns:1fr;gap:2.25rem}
  .craft-media,.craft-txt{grid-column:1 / -1}
  .craft-txt{padding-top:0}
}

/* ---------- SPACE: full-bleed, graded to match the rest ---------- */
.space{
  position:relative;min-height:min(78svh,680px);
  display:flex;align-items:flex-end;overflow:hidden;background:var(--rose-deep);
}
.space > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.space::after{
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(to top,rgba(24,7,12,.94) 0%,rgba(24,7,12,.8) 36%,rgba(24,7,12,.5) 72%,rgba(24,7,12,.44) 100%),
    linear-gradient(to right,rgba(24,7,12,.55),transparent 58%);
}
.space-txt{
  position:relative;z-index:1;max-width:var(--max);width:100%;margin:0 auto;
  padding:0 var(--pad) clamp(2.75rem,6vw,4.5rem);color:var(--cream);
}
.space-label{
  display:inline-block;font-size:.75rem;text-transform:uppercase;letter-spacing:.15em;
  color:var(--brass-light);margin-bottom:1rem;
  border-bottom:1px solid rgba(232,207,154,.3);padding-bottom:.3rem;
}
.space-h2{
  font-size:clamp(1.85rem,1.3rem + 2.1vw,3rem);
  text-wrap:balance;font-weight:400;
  letter-spacing:-.03em;line-height:1.08;margin:0 0 1rem;max-width:11ch;
  text-shadow:0 2px 26px rgba(24,7,12,.5);
}
.space-p{font-size:1.0625rem;text-wrap:pretty;color:#fdf8f4;max-width:44ch;margin:0;text-shadow:0 1px 18px rgba(24,7,12,.45)}
.space-p.bn{font-family:var(--ff-bn);font-size:1rem;color:rgba(251,246,241,.7);margin-top:1rem;border-top:1px solid rgba(251,246,241,.15);padding-top:1rem;max-width:max-content}

/* ---------- HOLUD: tinted ground, top aligned ---------- */
.holud{background:var(--sand);padding:var(--sect) 0}
.holud-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:repeat(12,1fr);
  gap:clamp(2rem,5vw,5.5rem);align-items:start;
}
.holud-img{grid-column:1 / span 7;width:100%;aspect-ratio:3/2;object-fit:cover;border-radius:var(--r)}
.holud-txt{grid-column:9 / span 4;padding-top:.5rem}
.holud-h2{font-size:clamp(1.75rem,1.2rem + 1.7vw,2.6rem);text-wrap:balance;font-weight:400;letter-spacing:-.03em;line-height:1.12;margin:0 0 1.5rem}
.holud-p{font-size:1.0625rem;text-wrap:pretty;color:var(--muted);max-width:34ch;margin:0 0 1.5rem}
.holud-p.bn{color:var(--muted);font-size:1rem;padding-top:1.25rem;border-top:1px solid #d8c7b9;margin-bottom:0}
@media(max-width:900px){
  .holud-in{grid-template-columns:1fr;gap:2.25rem}
  .holud-img,.holud-txt{grid-column:1 / -1}
  .holud-txt{padding-top:0}
}

/* ---------- VISIT: promoted, dark, the conversion section ---------- */
.visit{background:var(--rose-deep);color:var(--cream);padding:var(--sect) 0}
/* Two columns on wide screens: details left, map right. Below that the
   single column stacks, which is what the empty right half was. */
.visit-in{
  max-width:var(--max);margin:0 auto;padding:0 var(--pad);
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(2.5rem,5vw,4.5rem);align-items:start;
}
.visit-left{min-width:0}
@media(max-width:900px){
  .visit-in{grid-template-columns:1fr}
}
.visit-h2{font-size:clamp(2rem,1.4rem + 2.1vw,3rem);text-wrap:balance;font-weight:400;letter-spacing:-.03em;line-height:1.1;margin:0 0 1.25rem}
.visit-p{font-size:1.0625rem;text-wrap:pretty;color:rgba(251,246,241,.86);max-width:46ch;margin:0 0 clamp(2.5rem,5vw,3.5rem)}
.visit-rows{max-width:46rem;border-top:1px solid rgba(251,246,241,.22)}
.visit-row{
  display:grid;grid-template-columns:8rem 1fr;gap:1.5rem;
  padding:1.4rem 0;border-bottom:1px solid rgba(251,246,241,.22);align-items:baseline;
}
.visit-k{font-size:.68rem;text-transform:uppercase;letter-spacing:.2em;color:rgba(251,246,241,.6)}
.visit-v{font-size:1.15rem}
.visit-v a{text-decoration:none;border-bottom:1px solid rgba(251,246,241,.35);transition:border-color .25s,color .25s}
.visit-v a:hover{color:var(--brass-light);border-bottom-color:var(--brass-light)}
.visit-cta{display:flex;flex-wrap:wrap;gap:.85rem;margin-top:.5rem}
/* Filled action colour is cream, not rose: the visit section sits on --rose-deep,
   so a rose fill would disappear into its own background. Brass stays decorative,
   which is why it was the wrong choice here in the first place. */
.visit .btn-primary{
  background:var(--cream);color:#1a1208;font-weight:600;
  box-shadow:0 6px 24px -6px rgba(36,19,24,.4);
}
.visit .btn-primary:hover{background:#fff}
.visit .btn-line{border-color:rgba(251,246,241,.4);color:var(--cream)}
.visit .btn-line:hover{border-color:var(--cream);background:rgba(251,246,241,.08)}

/* ---------- MAP ----------
   Google embed: no API key, and far richer than OSM in Rajshahi, where OSM
   has almost no building detail. output=embed only renders inside an iframe,
   which is why it fails when loaded as a top-level page. */
/* The map is the brightest object on the page, so it needs enough height to
   balance the contact list instead of floating as a small bright block. */
.map{margin:0;min-width:0;display:flex;flex-direction:column;gap:1rem}
.map-frame{
  flex:1 1 auto;
  min-height:clamp(320px,52vh,600px);
  position:relative;display:block;text-decoration:none;
  border:1px solid rgba(251,246,241,.22);border-radius:2px;overflow:hidden;
  background:#e8e0d8;
}
.map-iframe{
  display:block;width:100%;height:100%;min-height:inherit;
  border:0;
}
.map-cap{
  margin:0;padding-top:1rem;font-size:.9375rem;
  color:rgba(251,246,241,.92);line-height:1.5;
  display:flex;flex-wrap:wrap;align-items:baseline;gap:.4rem 1rem;
}
/* Directions is an action, so it reads as one and sits in the brand brass. */
.map-link{
  color:var(--brass-light);text-decoration:none;
  border-bottom:1px solid rgba(232,207,154,.45);
  transition:border-color .25s,color .25s;
}
.map-link:hover{border-bottom-color:var(--brass-light)}
@media(max-width:620px){
  .visit-row{grid-template-columns:1fr;gap:.3rem}
  .map{width:100%}
  .map-iframe{height:260px}
}
@media(max-width:1040px){
  /* Five across stops fitting here. The problem with dropping to 3 or 2 is that
     five never divides evenly, so the last row is always short. Spanning the
     fifth card full width was tried and is worse: at 3 across it pushed cards
     4 and 5 onto separate rows. Two columns plus a full-width fifth keeps every
     row edge-to-edge. */
  .svc-list{grid-template-columns:repeat(2,1fr)}
  
}

/* ---------- FOOTER ---------- */
.foot{background:var(--ink);color:rgba(251,246,241,.8)}
.foot-in{max-width:var(--max);margin:0 auto;padding:clamp(2.5rem,5vw,4rem) var(--pad);display:flex;flex-direction:column;gap:.5rem}
.foot-logo{width:168px;height:auto;display:block;margin-bottom:1rem}
.foot-line{margin:0;font-size:.95rem}
.foot-bn{margin:0;color:rgba(251,246,241,.55)}
.foot-fine{margin:.75rem 0 0;font-size:.85rem;letter-spacing:.08em;color:rgba(251,246,241,.5)}

/* ---------- MOTION ---------- */
@media(prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(20px);transition:opacity .75s var(--ease),transform .75s var(--ease)}
  .reveal.in{opacity:1;transform:none}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
}
.svc {
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.svc::before {
  content: '';
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  z-index: -2;
  transition: transform 0.6s var(--ease);
}

.svc::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(36,19,24,0.7);
  z-index: -1;
  transition: background-color 0.4s var(--ease);
}

.svc:hover::before {
  transform: scale(1.05);
}

.svc:hover::after {
  background: rgba(36,19,24,0.4);
}

.svc:nth-child(1)::before { background-image: url('img/svc-cut.jpg'); }
.svc:nth-child(2)::before { background-image: url('img/svc-styling.jpg'); }
.svc:nth-child(3)::before { background-image: url('img/svc-smoothing.jpg'); }
.svc:nth-child(4)::before { background-image: url('img/svc-rebonding.jpg'); }
.svc:nth-child(5)::before { background-image: url('img/svc-colour.jpg'); }
.svc:nth-child(6)::before { background-image: url('img/svc-bridal.jpg'); }
.svc:nth-child(7)::before { background-image: url('img/svc-party.jpg'); }


.svc:nth-child(8)::before { background-image: url('img/svc-facial.jpg'); }
.svc:nth-child(9)::before { background-image: url('img/svc-laser.jpg'); }
.svc:nth-child(10)::before { background-image: url('img/svc-darkspot.jpg'); }
.svc:nth-child(11)::before { background-image: url('img/svc-mole.jpg'); }
.svc:nth-child(12)::before { background-image: url('img/svc-hairfall.jpg'); }

.svc:nth-child(9)::before { background-image: url('img/svc-laser.jpg'); }
.svc:nth-child(10)::before { background-image: url('img/svc-darkspot.jpg'); }