@charset "UTF-8";
/* ==========================================================================
   GHALY SALON | صالون غالي
   Mobile-first. Base = phone. Enhance up at 640 / 900 / 1280.
   Never max-width queries.
   ========================================================================== */

/* ── 1. TOKENS ───────────────────────────────────────────────────────────── */
:root{
  /* surface */
  --ink:#0B0B0C;
  --ink-2:#0F0F11;
  --coal:#141417;
  --coal-2:#1A1A1E;
  --coal-3:#212127;

  /* line */
  --line:rgba(244,241,236,.09);
  --line-2:rgba(244,241,236,.16);
  --line-3:rgba(244,241,236,.26);

  /* type colour */
  --cream:#F4F1EC;
  --sand:#B7B0A4;
  --mute:#87837C;

  /* accent — used sparingly */
  --brass:#B08D57;
  --brass-2:#C9A66B;
  --brass-dim:rgba(176,141,87,.14);
  --wa:#1FB855;
  --wa-2:#25D366;

  /* spacing — strict 4px scale */
  --s1:4px;  --s2:8px;   --s3:12px;  --s4:16px;  --s5:20px;
  --s6:24px; --s7:32px;  --s8:40px;  --s9:48px;  --s10:64px;
  --s11:80px;--s12:96px; --s13:128px;

  /* rhythm + layout */
  --sec:72px;
  --gutter:20px;
  --maxw:1240px;
  --gap:16px;
  --hdr-h:68px;

  /* radius */
  --r1:10px; --r2:14px; --r3:20px; --r4:28px; --rp:999px;

  /* elevation */
  --sh1:0 1px 2px rgba(0,0,0,.4);
  --sh2:0 12px 32px rgba(0,0,0,.44);
  --sh3:0 24px 64px rgba(0,0,0,.55);
  --sh-gold:0 10px 30px rgba(176,141,87,.24);
  --sh-wa:0 10px 30px rgba(31,184,85,.26);

  /* motion */
  --e:cubic-bezier(.22,.61,.36,1);
  --e-out:cubic-bezier(.16,1,.3,1);
  --t1:.22s; --t2:.4s; --t3:.7s;

  /* type */
  --f-disp:'Noto Kufi Arabic','Cairo',system-ui,sans-serif;
  --f-body:'Cairo',system-ui,sans-serif;
  --f-en:'Inter',system-ui,sans-serif;
}

/* ── 2. RESET ────────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
*{margin:0;padding:0}
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  scroll-padding-top:calc(var(--hdr-h) + var(--s5));
}
body{
  background:var(--ink);
  color:var(--cream);
  font-family:var(--f-body);
  font-size:16px;
  line-height:1.9;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
  padding-block-end:calc(72px + env(safe-area-inset-bottom));
}
body.is-locked{overflow:hidden}
img,svg,iframe{display:block;max-width:100%}
img{height:auto}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--brass-2);outline-offset:3px;border-radius:4px}
::selection{background:var(--brass);color:var(--ink)}

/* numerals + latin always read LTR and use Inter */
bdi,.num{font-family:var(--f-en);font-variant-numeric:tabular-nums}

.skip{
  position:fixed;inset-block-start:-100px;inset-inline-start:var(--s4);z-index:200;
  background:var(--brass);color:var(--ink);padding:var(--s3) var(--s5);
  border-radius:var(--r1);font-weight:700;transition:inset-block-start var(--t1)
}
.skip:focus{inset-block-start:var(--s4)}

/* ── 3. LAYOUT PRIMITIVES ────────────────────────────────────────────────── */
.wrap{
  width:100%;
  max-width:calc(var(--maxw) + var(--gutter)*2);
  margin-inline:auto;
  padding-inline:var(--gutter);
}
.sec{padding-block:var(--sec);position:relative}
.sec--why,.sec--gal{background:var(--ink-2)}
.sec--about{background:var(--coal)}

/* ── 4. TYPE ─────────────────────────────────────────────────────────────── */
h1,h2,h3{font-family:var(--f-disp);font-weight:700;line-height:1.28;letter-spacing:-.01em}

.kicker{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-family:var(--f-body);font-size:11px;font-weight:700;
  letter-spacing:.22em;color:var(--brass-2);
  text-transform:uppercase;line-height:1
}
.kicker::before{
  content:"";width:20px;height:1px;background:var(--brass);opacity:.7;flex:0 0 auto
}

.sechead{margin-block-end:var(--s9);max-width:56ch}
.sechead__h{
  font-size:clamp(28px,7.6vw,40px);
  margin-block-start:var(--s4);
  line-height:1.24
}
.sechead__p{
  margin-block-start:var(--s4);
  color:var(--sand);font-size:15px;line-height:1.85;max-width:46ch
}

/* Centred section heads. Used only where the content underneath is a symmetric
   grid, so the head sits on the same axis as the columns below it. Sections
   whose content is asymmetric (the gallery row, the about split) keep the
   start alignment, because centring a head over a left-heavy block reads as a
   mistake rather than a choice. Body copy inside cards is never centred:
   these heads are one or two lines, which is where centring still scans. */
.sechead--mid{margin-inline:auto;text-align:center}
.sechead--mid .sechead__p{margin-inline:auto}
/* a centred display line wants a short measure. Without this the location head,
   which carries the whole street address, runs almost the full 1440 and dwarfs
   every other head on the page. Short heads are unaffected. */
.sechead--mid .sechead__h{max-width:25ch;margin-inline:auto}
/* a single leading rule looks lopsided once the line is centred, so the
   centred kickers get one on each side */
.sechead--mid .kicker::after,
.cta .kicker::after{
  content:"";width:20px;height:1px;background:var(--brass);opacity:.7;flex:0 0 auto
}

/* ── 5. BUTTONS ──────────────────────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:48px;padding:0 var(--s6);
  border-radius:var(--rp);border:1px solid transparent;
  font-family:var(--f-body);font-size:15px;font-weight:700;line-height:1;
  letter-spacing:-.01em;white-space:nowrap;
  transition:transform var(--t1) var(--e),background var(--t1) var(--e),
             border-color var(--t1) var(--e),box-shadow var(--t1) var(--e),color var(--t1) var(--e);
  will-change:transform
}
.btn svg{width:19px;height:19px;flex:0 0 auto}
.btn--lg{min-height:56px;padding:0 var(--s7);font-size:16px}

.btn--gold{background:var(--brass);color:#100D08;box-shadow:var(--sh-gold)}
.btn--gold:hover{background:var(--brass-2);transform:translateY(-2px);box-shadow:0 14px 34px rgba(176,141,87,.32)}

.btn--wa{background:var(--wa);color:#04240F;box-shadow:var(--sh-wa)}
.btn--wa:hover{background:var(--wa-2);transform:translateY(-2px)}

.btn--outline{border-color:var(--line-3);color:var(--cream);background:rgba(244,241,236,.03)}
.btn--outline:hover{border-color:var(--brass);color:var(--brass-2);background:var(--brass-dim);transform:translateY(-2px)}

.btn--ghost{border-color:var(--line-2);color:var(--cream)}
.btn--ghost:hover{border-color:var(--line-3);background:rgba(244,241,236,.05)}

.btn:active{transform:translateY(0) scale(.985)}

.ico-btn{
  display:none;place-items:center;
  width:44px;height:44px;border-radius:var(--rp);
  border:1px solid var(--line-2);color:var(--sand);
  transition:color var(--t1),border-color var(--t1),background var(--t1)
}
.ico-btn svg{width:19px;height:19px}
.ico-btn:hover{color:var(--cream);border-color:var(--line-3);background:rgba(244,241,236,.05)}
.ico-btn--wa:hover{color:var(--wa-2);border-color:rgba(37,211,102,.4);background:rgba(37,211,102,.1)}

/* ── 6. HEADER ───────────────────────────────────────────────────────────── */
.hdr{
  position:fixed;inset-block-start:0;inset-inline:0;z-index:90;
  height:var(--hdr-h);
  transition:height var(--t2) var(--e),background var(--t2),
             border-color var(--t2),backdrop-filter var(--t2);
  border-block-end:1px solid transparent;
  background:linear-gradient(to bottom,rgba(11,11,12,.72),rgba(11,11,12,0))
}
.hdr.is-stuck{
  height:58px;
  background:rgba(11,11,12,.82);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border-block-end-color:var(--line)
}
.hdr__in{display:flex;align-items:center;gap:var(--s4);height:100%}

/* logo lockup */
.logo{display:flex;align-items:center;gap:var(--s3);min-width:0;flex:1 1 auto;
  min-height:44px}
.logo__img{
  width:40px;height:40px;object-fit:contain;flex:0 0 auto;
  display:none
}
.logo.has-logo .logo__img{display:block}
.logo.has-logo .logo__mark{display:none}
/* full lockup — artwork includes the wordmark, so no text sits beside it */
.logo__full{width:116px;height:auto;display:block}
.logo__mark{
  display:grid;place-items:center;flex:0 0 auto;
  width:38px;height:38px;border-radius:var(--r1);
  border:1px solid var(--brass);color:var(--brass-2);
  font-family:var(--f-en);font-size:17px;font-weight:800;line-height:1;
  background:linear-gradient(160deg,rgba(176,141,87,.18),rgba(176,141,87,.02))
}
.logo__txt{display:flex;align-items:center;gap:var(--s2);min-width:0}
/* Arabic is the primary name, the Latin transliteration is the secondary line */
.logo__ar{
  font-family:var(--f-disp);font-size:15px;font-weight:700;
  color:var(--cream);white-space:nowrap
}
.logo__sep{width:1px;height:13px;background:var(--line-3);flex:0 0 auto}
.logo__en{
  font-family:var(--f-en);font-size:11px;font-weight:700;
  letter-spacing:.15em;color:var(--sand);white-space:nowrap
}

.nav{display:none}
.hdr__act{display:flex;align-items:center;gap:var(--s2)}
.hdr__cta{display:none}

.burger{
  display:grid;place-content:center;gap:5px;
  width:48px;height:48px;margin-inline-end:-10px;flex:0 0 auto
}
.burger span{
  display:block;width:22px;height:1.6px;background:var(--cream);border-radius:2px;
  transition:transform var(--t2) var(--e),opacity var(--t1)
}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6.6px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6.6px) rotate(-45deg)}

/* ── 7. MOBILE MENU ──────────────────────────────────────────────────────── */
.mnav{
  position:fixed;inset:0;z-index:95;
  background:var(--ink);
  display:flex;flex-direction:column;
  padding:var(--s5) var(--gutter) calc(var(--s6) + env(safe-area-inset-bottom));
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity var(--t2) var(--e),transform var(--t2) var(--e)
}
.mnav[hidden]{display:none}
.mnav.is-on{opacity:1;transform:none;pointer-events:auto}
.mnav__top{display:flex;align-items:center;justify-content:space-between;height:48px}
.mnav__brand{
  font-family:var(--f-en);font-size:12px;font-weight:800;letter-spacing:.14em;color:var(--sand)
}
.mnav__brand i{color:var(--brass);font-style:normal;margin-inline:var(--s2)}
.mnav__x{display:grid;place-items:center;width:48px;height:48px;margin-inline-end:-12px;color:var(--sand)}
.mnav__x svg{width:22px;height:22px}

.mnav__links{
  flex:1 1 auto;display:flex;flex-direction:column;justify-content:center;
  gap:var(--s1);padding-block:var(--s6)
}
.mnav__links a{
  display:flex;align-items:baseline;gap:var(--s4);
  min-height:56px;padding-block:var(--s2);
  font-family:var(--f-disp);font-size:26px;font-weight:700;letter-spacing:-.01em;
  border-block-end:1px solid var(--line);
  transition:color var(--t1),padding-inline-start var(--t2) var(--e)
}
.mnav__links a b{
  font-family:var(--f-en);font-size:11px;font-weight:600;
  color:var(--brass);letter-spacing:.1em
}
.mnav__links a:active{color:var(--brass-2);padding-inline-start:var(--s2)}

.mnav__foot{display:grid;gap:var(--s4)}
.mnav__hours{
  display:flex;align-items:center;gap:var(--s2);
  font-size:13px;color:var(--mute)
}
.mnav__hours svg{width:16px;height:16px;color:var(--brass);flex:0 0 auto}
.mnav__cta{display:grid;gap:var(--s3)}
.mnav__cta .btn{width:100%}

/* ── 8. HERO ─────────────────────────────────────────────────────────────── */
.hero{
  position:relative;
  min-height:100svh;
  display:flex;align-items:flex-end;
  padding-block:calc(var(--hdr-h) + var(--s9)) var(--s11);
  overflow:hidden;
  isolation:isolate
}
.hero__bg{
  position:absolute;inset:-2% -2% -6%;z-index:-2;
  background-color:var(--ink);
  background-position:center;background-size:cover;background-repeat:no-repeat;
  will-change:transform
}
/* cinematic base treatment — instant paint, no image required for LCP.
   Reads as a warm key light raking across a dark room. */
.hero__bg::before{
  content:"";position:absolute;inset:0;
  background:
    /* warm key light */
    radial-gradient(74% 46% at 70% 24%, rgba(214,172,104,.34) 0%, rgba(163,124,70,.13) 38%, transparent 74%),
    /* soft bounce, opposite side */
    radial-gradient(58% 42% at 12% 6%, rgba(120,104,84,.30) 0%, transparent 72%),
    /* light beam */
    linear-gradient(122deg, transparent 26%, rgba(214,180,124,.09) 40%, transparent 58%),
    /* room */
    linear-gradient(180deg,#1D181A 0%,#151215 32%,#0F0E10 66%,#0B0B0C 100%)
}
.hero__grade{
  position:absolute;inset:0;
  background:
    /* vignette */
    radial-gradient(96% 76% at 50% 42%, transparent 34%, rgba(11,11,12,.62) 100%),
    /* copy legibility ramp */
    linear-gradient(to top, var(--ink) 0%, rgba(11,11,12,.92) 16%, rgba(11,11,12,.56) 44%, rgba(11,11,12,.14) 76%, rgba(11,11,12,.34) 100%)
}
/* film grain — keeps the gradient from reading as a flat CSS box */
.hero::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.62;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
  mix-blend-mode:overlay
}
/* once a real photo is in, drop the synthetic lighting and keep only the grade */
.hero__bg.has-img::before{
  background:linear-gradient(122deg, transparent 30%, rgba(214,180,124,.05) 44%, transparent 60%)
}

/* ── hero film ──
   Sits above ::before (the CSS light-rig) and below .hero__grade, so the rig
   stays as the paint-instantly fallback if the clip is skipped or fails.
   The grade pushes it well under the copy: this is atmosphere, not a photo. */
/* On a portrait phone a full-bleed 16:9 clip crops down to roughly a quarter of
   the frame, which reads as abstract texture rather than a barber at work. So on
   mobile it runs as a film panel across the top of the hero and dissolves into
   the ink where the copy and buttons live. Desktop gets the full bleed. */
.hero__vid{
  position:absolute;inset-block-start:0;inset-inline:0;z-index:0;
  width:100%;height:56%;
  object-fit:cover;object-position:88% 50%;
  /* flipped: the clip's subject sits on its right and its negative space on its
     left, which is the wrong way round for right-aligned RTL copy */
  transform:scaleX(-1);
  -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.35) 78%,transparent 100%);
          mask-image:linear-gradient(to bottom,#000 0%,#000 46%,rgba(0,0,0,.35) 78%,transparent 100%);
  opacity:0;transition:opacity 1.1s var(--e1);
  filter:grayscale(.46) contrast(1.12) brightness(.58) saturate(.78);
  pointer-events:none
}
.hero__bg.is-film .hero__vid{opacity:1}
/* the clip carries its own light, so the synthetic key light would double up */
.hero__bg.is-film::before{opacity:.34}
.hero__bg::before{transition:opacity 1.1s var(--e1)}
/* with moving footage under it the copy needs a deeper ramp than the flat
   gradient did, otherwise a bright frame can wash out the sub-headline */
.hero__bg.is-film + .hero__grade,
.hero__bg.is-film .hero__grade{
  background:
    radial-gradient(96% 76% at 50% 40%, transparent 26%, rgba(11,11,12,.74) 100%),
    linear-gradient(to top, var(--ink) 0%, rgba(11,11,12,.96) 22%, rgba(11,11,12,.78) 48%, rgba(11,11,12,.44) 74%, rgba(11,11,12,.52) 100%)
}
.hero__in{position:relative;z-index:1;width:100%}

.hero__eyebrow{
  display:inline-flex;align-items:center;gap:var(--s2);
  font-size:12px;font-weight:600;letter-spacing:.04em;color:var(--sand);
  padding:var(--s2) var(--s4);border-radius:var(--rp);
  border:1px solid var(--line-2);background:rgba(11,11,12,.44);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.hero__eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--wa-2);
  box-shadow:0 0 0 4px rgba(37,211,102,.16);flex:0 0 auto
}
.hero__h1{
  font-size:clamp(42px,13.2vw,60px);
  font-weight:800;line-height:1.18;letter-spacing:-.025em;
  margin-block-start:var(--s5)
}
.hero__sub{
  margin-block-start:var(--s4);
  font-size:16px;line-height:1.8;color:var(--sand);max-width:32ch
}
.hero__cta{
  display:grid;gap:var(--s3);
  margin-block-start:var(--s8)
}
.hero__cta .btn{width:100%}

.hero__meta{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s5);
  margin-block-start:var(--s7);
  padding-block-start:var(--s5);border-block-start:1px solid var(--line)
}
.hero__meta li{
  display:flex;align-items:center;gap:var(--s2);
  font-size:12.5px;color:var(--mute);line-height:1.5
}
.hero__meta svg{width:15px;height:15px;color:var(--brass);flex:0 0 auto}

.hero__scroll{display:none}

/* ── 9. TICKER ───────────────────────────────────────────────────────────── */
.ticker{
  overflow:hidden;
  border-block:1px solid var(--line);
  background:var(--ink-2);
  padding-block:var(--s4)
}
.ticker__row{display:flex;width:max-content;animation:tick 34s linear infinite}
.ticker__set{display:flex;align-items:center;gap:var(--s5);padding-inline-end:var(--s5)}
.ticker__set span{
  font-family:var(--f-disp);font-size:13px;font-weight:600;
  color:var(--mute);white-space:nowrap;letter-spacing:.02em
}
.ticker__set i{width:4px;height:4px;border-radius:50%;background:var(--brass);opacity:.55;flex:0 0 auto}
@keyframes tick{from{transform:translateX(0)}to{transform:translateX(50%)}}

/* ── 10. SERVICES ────────────────────────────────────────────────────────── */
.tabs{position:relative;margin-block-end:var(--s7)}
.tabs__strip{
  display:flex;gap:var(--s2);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-block:var(--s1);
  padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1)
}
.tabs__strip::-webkit-scrollbar{display:none}
.tab{
  scroll-snap-align:center;flex:0 0 auto;
  min-height:48px;padding:0 var(--s5);
  border-radius:var(--rp);border:1px solid var(--line-2);
  background:rgba(244,241,236,.02);
  font-family:var(--f-body);font-size:14px;font-weight:600;color:var(--sand);
  white-space:nowrap;line-height:1;
  transition:color var(--t1),background var(--t1),border-color var(--t1),transform var(--t1)
}
.tab:hover{color:var(--cream);border-color:var(--line-3)}
.tab.is-on{
  background:var(--brass);border-color:var(--brass);color:#100D08;font-weight:700;
  box-shadow:var(--sh-gold)
}
.tabs__fade{
  position:absolute;inset-block:0;width:36px;pointer-events:none;z-index:1;
  transition:opacity var(--t1)
}
/* physical directions on purpose — the document is always RTL, so
   inline-start = right edge, inline-end = left edge */
.tabs__fade--s{inset-inline-start:0;background:linear-gradient(to left,var(--ink),transparent)}
.tabs__fade--e{inset-inline-end:0;background:linear-gradient(to right,var(--ink),transparent)}
.tabs.at-start .tabs__fade--s{opacity:0}
.tabs.at-end .tabs__fade--e{opacity:0}

.panel[hidden]{display:none}
.panel{animation:panelIn .42s var(--e-out) both}
@keyframes panelIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.panel__note{
  font-size:13.5px;color:var(--mute);margin-block-end:var(--s5);
  padding-inline-start:var(--s3);border-inline-start:2px solid var(--brass);
  line-height:1.7
}

.svcgrid{display:grid;gap:var(--gap);align-items:stretch}

.svc{
  position:relative;display:flex;flex-direction:column;
  padding:var(--s5);
  border:1px solid var(--line);border-radius:var(--r3);
  background:linear-gradient(165deg,var(--coal-2) 0%,var(--coal) 100%);
  overflow:hidden;
  transition:border-color var(--t2) var(--e),transform var(--t2) var(--e),box-shadow var(--t2) var(--e)
}
.svc::before{
  content:"";position:absolute;inset-block-start:0;inset-inline:0;height:1px;
  background:linear-gradient(to left,transparent,var(--brass),transparent);
  opacity:0;transition:opacity var(--t2)
}
.svc::after{
  content:"";position:absolute;inset-block-start:-40%;inset-inline-end:-30%;
  width:180px;height:180px;border-radius:50%;
  background:radial-gradient(circle,rgba(176,141,87,.16),transparent 68%);
  opacity:0;transition:opacity var(--t3) var(--e);pointer-events:none
}
.svc:hover{
  border-color:var(--line-2);transform:translateY(-4px);box-shadow:var(--sh2)
}
.svc:hover::before,.svc:hover::after{opacity:1}

.svc__top{
  display:flex;align-items:flex-start;justify-content:space-between;gap:var(--s4);
  margin-block-end:var(--s4)
}
.svc__h{
  font-size:19px;font-weight:700;line-height:1.4;letter-spacing:-.01em;flex:1 1 auto
}
.svc__h small{
  display:block;font-family:var(--f-body);font-size:12px;font-weight:400;
  color:var(--mute);margin-block-start:var(--s1);letter-spacing:0
}
.svc__ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--r1);
  border:1px solid var(--line);color:var(--brass-2);
  background:rgba(176,141,87,.07);
  transition:transform var(--t2) var(--e),background var(--t2),border-color var(--t2)
}
.svc__ico svg{width:19px;height:19px}
.svc:hover .svc__ico{
  transform:scale(1.06) rotate(-3deg);
  background:rgba(176,141,87,.14);border-color:rgba(176,141,87,.34)
}

.svc__steps{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);
  margin-block-end:var(--s5)
}
.svc__steps li{
  position:relative;font-size:12.5px;color:var(--mute);line-height:1.7
}
/* separator sits in the gap BEFORE each item — inline-start is the previous
   sibling's side in RTL */
.svc__steps li + li::before{
  content:"";position:absolute;inset-inline-start:calc(var(--s3) / -2 - 1px);inset-block-start:50%;
  width:3px;height:3px;border-radius:50%;background:var(--brass);opacity:.6;
  transform:translateY(-50%)
}

.svc__foot{
  margin-block-start:auto;
  padding-block-start:var(--s4);border-block-start:1px solid var(--line);
  display:flex;align-items:baseline;gap:var(--s3);flex-wrap:wrap;
  min-height:53px
}
.svc__price{
  font-family:var(--f-en);font-size:20px;font-weight:800;color:var(--cream);
  letter-spacing:-.02em;line-height:1.3
}
.svc__price .cur{font-size:13px;font-weight:600;color:var(--sand);margin-inline-start:2px}
.svc__dur{
  font-size:12px;color:var(--mute);
  padding:3px var(--s3);border-radius:var(--rp);border:1px solid var(--line);
  line-height:1.5
}
.svc__ask{font-size:13.5px;color:var(--sand);font-weight:600}

.svc__link{
  display:inline-flex;align-items:center;gap:var(--s2);
  min-height:44px;margin-block-start:var(--s2);margin-block-end:calc(var(--s2) * -1);
  font-size:14px;font-weight:700;color:var(--brass-2);
  transition:gap var(--t1) var(--e),color var(--t1)
}
.svc__link svg{width:16px;height:16px;transition:transform var(--t1) var(--e)}
.svc__link:hover{color:var(--brass)}
.svc__link:hover svg{transform:translateX(-3px)}

.tier{
  align-self:flex-start;
  font-family:var(--f-body);font-size:10.5px;font-weight:700;letter-spacing:.12em;
  color:var(--mute);text-transform:uppercase;
  padding:var(--s1) var(--s3);border-radius:var(--rp);
  border:1px solid var(--line);
  margin-block-end:var(--s4);line-height:1.6
}
.tier--gold{color:var(--brass-2);border-color:rgba(176,141,87,.38);background:var(--brass-dim)}
.svc.is-best{border-color:rgba(176,141,87,.3)}
.svc.is-best::before{opacity:.7}

.svc__cta{
  margin-block-start:var(--s8);
  font-size:14.5px;color:var(--mute);text-align:center;line-height:1.9
}
.svc__cta a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--brass-2);font-weight:700;
  border-block-end:1px solid rgba(176,141,87,.4);padding-block-end:2px;
  transition:color var(--t1),border-color var(--t1)
}
.svc__cta a:hover{color:var(--brass);border-color:var(--brass)}

/* ── 11. WHY ─────────────────────────────────────────────────────────────── */
.whygrid{display:grid;gap:var(--gap)}
.why{
  position:relative;
  padding:var(--s6) var(--s5) var(--s5);
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--coal);
  overflow:hidden;
  transition:border-color var(--t2),transform var(--t2) var(--e),background var(--t2)
}
.why:hover{border-color:var(--line-2);transform:translateY(-3px);background:var(--coal-2)}
.why__n{
  position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--s6);
  font-family:var(--f-en);font-size:12px;font-weight:800;letter-spacing:.1em;
  color:var(--line-3);line-height:1
}
.why__ico{
  display:grid;place-items:center;
  width:46px;height:46px;border-radius:var(--r2);
  border:1px solid rgba(176,141,87,.24);color:var(--brass-2);
  background:linear-gradient(160deg,rgba(176,141,87,.14),rgba(176,141,87,.02));
  margin-block-end:var(--s4)
}
.why__ico svg{width:22px;height:22px}
.why__h{font-size:19px;font-weight:700;margin-block-end:var(--s3);line-height:1.4}
.why__p{font-size:14.5px;color:var(--sand);line-height:1.85}

/* ── 12. EXPERIENCE ──────────────────────────────────────────────────────── */
.sec--exp{background:var(--ink-2);overflow:hidden}
.steps{display:grid;gap:var(--s6);position:relative}
.step{
  position:relative;
  padding-inline-start:var(--s9);
  padding-block:var(--s2)
}
.step::before{
  content:"";position:absolute;inset-inline-start:17px;inset-block:var(--s8) calc(var(--s6) * -1);
  width:1px;background:linear-gradient(to bottom,var(--line-2),transparent)
}
.step:last-child::before{display:none}
.step__n{
  position:absolute;inset-inline-start:0;inset-block-start:var(--s2);
  display:grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  border:1px solid rgba(176,141,87,.4);color:var(--brass-2);
  background:var(--ink);
  font-family:var(--f-en);font-size:12px;font-weight:800;line-height:1
}
.step__h{font-size:21px;font-weight:700;margin-block-end:var(--s2);line-height:1.4}
.step__p{font-size:14.5px;color:var(--sand);line-height:1.85;max-width:38ch}
.exp__cta{margin-block-start:var(--s9)}
.exp__cta .btn{width:100%}

/* ── 13. GALLERY ─────────────────────────────────────────────────────────── */
.sechead--row{max-width:none}
/* mobile = a clean, perfectly-aligned square grid (no dense-packing holes).
   The editorial masonry is a deliberate enhancement from 640px up. */
.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s2)}
.gal__i{
  position:relative;overflow:hidden;
  aspect-ratio:1/1;
  border-radius:var(--r2);
  border:1px solid var(--line);
  background:var(--coal)
}
.gal__i--wide,.gal__i--tall{grid-column:auto;aspect-ratio:1/1}
.gal__i figcaption{
  position:absolute;inset-block-end:0;inset-inline:0;z-index:3;
  padding:var(--s6) var(--s4) var(--s3);
  font-family:var(--f-disp);font-size:12.5px;font-weight:600;color:var(--cream);
  background:linear-gradient(to top,rgba(11,11,12,.9),transparent);
  transform:translateY(0);
  transition:transform var(--t2) var(--e)
}
.gal__i .ph{z-index:1}

/* ── 14. IMAGE PLACEHOLDER SYSTEM ────────────────────────────────────────── */
/* Any [data-img] without a real photo renders this designed slot instead. */
.ph{
  position:absolute;inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--s2);padding:var(--s5);text-align:center;
  background:
    repeating-linear-gradient(-45deg,rgba(244,241,236,.022) 0 1px,transparent 1px 9px),
    linear-gradient(160deg,var(--coal-2),var(--coal));
  color:var(--mute)
}
.ph svg{width:26px;height:26px;color:var(--brass);opacity:.6}
.ph b{
  font-family:var(--f-disp);font-size:12.5px;font-weight:600;color:var(--sand);
  letter-spacing:.01em;line-height:1.5
}
.ph i{
  font-style:normal;font-size:10.5px;line-height:1.7;color:var(--mute);
  max-width:30ch;opacity:.9;
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden
}
/* in the gallery the figcaption is already the label, so the art-direction
   note stays quiet and secondary */
.gal__i .ph b{display:none}
.gal__i .ph{justify-content:center;padding-block-end:var(--s9)}
.gal__i .ph i{font-size:10px;opacity:.62;-webkit-line-clamp:2;max-width:26ch}
.gal__i .ph svg{width:22px;height:22px;opacity:.5}

/* real photos — one shared grade so every image reads as the same shoot */
.img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.82) contrast(1.07) brightness(.94);
  transition:transform 1.1s var(--e-out),filter var(--t3)
}
.gal__i:hover .img{transform:scale(1.05);filter:saturate(.92) contrast(1.05) brightness(1)}
.img-grade{
  position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to top,rgba(11,11,12,.55),rgba(11,11,12,.05) 55%,rgba(176,141,87,.06));
  mix-blend-mode:multiply
}

/* ── 15. ABOUT ───────────────────────────────────────────────────────────── */
.about{display:grid;gap:var(--s8)}
.about__img{
  position:relative;overflow:hidden;
  aspect-ratio:4/5;border-radius:var(--r3);
  border:1px solid var(--line);background:var(--coal-2)
}
.about__h{
  font-size:clamp(28px,7.6vw,40px);
  margin-block:var(--s4) var(--s5);line-height:1.24
}
.about__p{font-size:15px;line-height:2.05;color:var(--sand)}
.about__facts{
  display:flex;flex-wrap:wrap;gap:var(--s6);
  margin-block:var(--s8);
  padding-block:var(--s6);
  border-block:1px solid var(--line)
}
.about__facts li{display:flex;flex-direction:column;gap:var(--s1)}
.about__facts b{
  font-family:var(--f-en);font-size:30px;font-weight:800;color:var(--brass-2);
  line-height:1;letter-spacing:-.03em
}
.about__facts span{font-size:12px;color:var(--mute);line-height:1.5}

/* ── 16. REVIEWS ─────────────────────────────────────────────────────────── */
.rating{
  display:flex;align-items:center;justify-content:center;gap:var(--s4);flex-wrap:wrap;
  padding:var(--s5) var(--s6);margin-block-end:var(--s7);
  border:1px solid var(--line);border-radius:var(--r2);
  background:var(--coal)
}
.rating__stars{display:flex;gap:3px}
.rating__stars svg{width:17px;height:17px;color:var(--brass);opacity:.34}
.rating.has-rating .rating__stars svg{opacity:1}
.rating__v{display:flex;align-items:baseline;gap:var(--s2)}
.rating__num{
  font-family:var(--f-en);font-size:19px;font-weight:800;color:var(--cream);letter-spacing:-.02em
}
.rating:not(.has-rating) .rating__num{
  font-family:var(--f-body);font-size:13px;font-weight:600;color:var(--mute)
}
.rating__lbl{font-size:12.5px;color:var(--mute)}

/* mobile = swipeable strip so three cards cost one card of height */
.revgrid{
  display:grid;grid-auto-flow:column;grid-auto-columns:84%;
  gap:var(--s3);
  overflow-x:auto;overscroll-behavior-x:contain;
  scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;
  padding-inline:var(--gutter);margin-inline:calc(var(--gutter) * -1);
  padding-block:2px
}
.revgrid::-webkit-scrollbar{display:none}
.rev{
  scroll-snap-align:center;
  position:relative;
  padding:var(--s7) var(--s6) var(--s6);
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--coal);
  display:flex;flex-direction:column
}
.rev__q{
  width:26px;height:26px;color:var(--brass);opacity:.4;margin-block-end:var(--s4)
}
.rev__t{font-size:16px;line-height:1.9;color:var(--cream);flex:1 1 auto}
.rev__by{
  margin-block-start:var(--s5);padding-block-start:var(--s4);
  border-block-start:1px solid var(--line);
  font-size:13px;font-weight:600;color:var(--sand)
}
.rev.is-empty{
  border-style:dashed;border-color:var(--line-2);background:transparent
}
.rev.is-empty .rev__t{color:var(--mute);font-size:14.5px}
.rev.is-empty .rev__by{color:var(--mute)}
.rev.is-empty::after{
  content:"مكان مراجعة عميل حقيقية";
  position:absolute;inset-block-start:var(--s5);inset-inline-end:var(--s6);
  font-size:10px;font-weight:700;letter-spacing:.08em;color:var(--brass);
  opacity:.65;line-height:1
}

/* ── 17. LOCATION ────────────────────────────────────────────────────────── */
.loc{display:grid;gap:var(--gap)}
.loc__card{
  padding:var(--s6);
  border:1px solid var(--line);border-radius:var(--r3);
  background:var(--coal);
  display:flex;flex-direction:column
}
.loc__list{display:grid;gap:var(--s5);margin-block-end:var(--s7)}
.loc__list li{display:flex;gap:var(--s4);align-items:flex-start}
.loc__ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:40px;height:40px;border-radius:var(--r1);
  border:1px solid var(--line);color:var(--brass-2);
  background:rgba(176,141,87,.07)
}
.loc__ico svg{width:19px;height:19px}
.loc__list b{
  display:block;font-family:var(--f-body);font-size:11px;font-weight:700;
  letter-spacing:.14em;color:var(--mute);text-transform:uppercase;
  line-height:1.6;margin-block-end:2px
}
.loc__list p{font-size:15px;line-height:1.7;color:var(--cream)}
.loc__list p a{display:inline-flex;align-items:center;min-height:44px;
  transition:color var(--t1)}
.loc__list p a:hover{color:var(--brass-2)}
.loc__btns{display:grid;gap:var(--s3);margin-block-start:auto}
.loc__btns .btn{width:100%}

.loc__map{
  position:relative;overflow:hidden;
  aspect-ratio:4/3;
  border-radius:var(--r3);border:1px solid var(--line);
  background:var(--coal)
}
/* the iframe carries no src until script.js supplies a real embed, so the
   placeholder is the default state and only hides once a map is actually mounted */
.loc__map iframe{display:none;width:100%;height:100%;border:0;
  filter:grayscale(1) invert(.92) contrast(.86)}
.loc__map.has-map iframe{display:block}
.loc__map.has-map .loc__mapph{display:none}
.loc__mapph{
  position:absolute;inset:0;display:flex;
  flex-direction:column;align-items:center;justify-content:center;gap:var(--s2);
  padding:var(--s6);text-align:center;
  background:
    repeating-linear-gradient(-45deg,rgba(244,241,236,.022) 0 1px,transparent 1px 9px),
    linear-gradient(160deg,var(--coal-2),var(--coal))
}
.loc__mapph svg{width:28px;height:28px;color:var(--brass);opacity:.6}
.loc__mapph p{font-family:var(--f-disp);font-size:13.5px;font-weight:600;color:var(--sand)}
.loc__mapph small{font-family:var(--f-en);font-size:10.5px;color:var(--mute);letter-spacing:.04em}

.loc__home{
  display:flex;align-items:flex-start;gap:var(--s3);
  margin-block-start:var(--s6);padding:var(--s5);
  border-radius:var(--r2);border:1px solid var(--line);
  background:rgba(176,141,87,.05);
  font-size:14px;line-height:1.85;color:var(--sand);
  text-wrap:pretty
}
.loc__home svg{width:18px;height:18px;color:var(--brass);flex:0 0 auto;margin-block-start:6px}
/* the copy and its link are one flex item, otherwise the link breaks off into
   its own column beside the sentence */
.loc__home span{min-width:0}
.loc__home a{
  display:inline-flex;align-items:center;min-height:44px;
  color:var(--brass-2);font-weight:700;white-space:nowrap
}
.loc__home a:hover{color:var(--brass)}

/* ── 18. SOCIAL ──────────────────────────────────────────────────────────── */
.socgrid{display:grid;gap:var(--s3)}
.soc{
  display:flex;align-items:center;gap:var(--s4);
  min-height:72px;padding:var(--s4) var(--s5);
  border:1px solid var(--line);border-radius:var(--r2);
  background:var(--coal);
  transition:border-color var(--t2),background var(--t2),transform var(--t2) var(--e)
}
.soc:hover{border-color:var(--line-2);background:var(--coal-2);transform:translateY(-2px)}
.soc__ico{
  display:grid;place-items:center;flex:0 0 auto;
  width:44px;height:44px;border-radius:var(--r1);
  border:1px solid var(--line);color:var(--cream);
  transition:color var(--t2),border-color var(--t2)
}
.soc__ico svg{width:21px;height:21px}
.soc:hover .soc__ico{color:var(--brass-2);border-color:rgba(176,141,87,.34)}
.soc__n{
  flex:1 1 auto;font-family:var(--f-en);font-size:15px;font-weight:600;letter-spacing:.02em
}
.soc__go{
  display:grid;place-items:center;width:24px;height:24px;color:var(--mute);flex:0 0 auto;
  transition:transform var(--t2) var(--e),color var(--t2)
}
.soc__go svg{width:17px;height:17px}
.soc:hover .soc__go{transform:translateX(-4px);color:var(--brass-2)}

/* ── 19. FINAL CTA ───────────────────────────────────────────────────────── */
.cta{
  position:relative;overflow:hidden;isolation:isolate;
  padding-block:var(--sec);
  background:var(--ink-2);
  border-block-start:1px solid var(--line);
  text-align:center
}
.cta__glow{
  position:absolute;inset-block-start:-40%;inset-inline-start:50%;z-index:-1;
  width:min(760px,140%);aspect-ratio:1;transform:translateX(50%);
  background:radial-gradient(circle,rgba(176,141,87,.16) 0%,transparent 62%);
  pointer-events:none
}
.cta__in{display:flex;flex-direction:column;align-items:center}
.cta__h{
  font-size:clamp(32px,9vw,46px);font-weight:800;letter-spacing:-.025em;
  margin-block:var(--s4) var(--s4);line-height:1.24
}
.cta__p{font-size:16px;color:var(--sand);line-height:1.8;max-width:34ch}
.cta__btns{display:grid;gap:var(--s3);width:100%;margin-block-start:var(--s8)}
.cta__btns .btn{width:100%}
.cta__note{margin-block-start:var(--s6);font-size:12.5px;color:var(--mute)}

/* ── 20. FOOTER ──────────────────────────────────────────────────────────── */
.ft{
  background:var(--ink);
  border-block-start:1px solid var(--line);
  padding-block:var(--s9) var(--s6)
}
.ft__top{display:grid;gap:var(--s7)}
.ft__brand{display:grid;gap:var(--s4)}
.logo--ft{min-height:0}
.ft__tag{
  font-family:var(--f-disp);font-size:17px;font-weight:600;color:var(--sand);
  line-height:1.6;max-width:24ch
}
.ft__col h3{
  font-family:var(--f-body);font-size:11px;font-weight:700;letter-spacing:.16em;
  color:var(--brass-2);text-transform:uppercase;
  margin-block-end:var(--s4);line-height:1.6
}
.ft__col ul{display:grid;gap:var(--s1)}
/* min-height keeps every footer row a comfortable touch target on phones */
.ft__col li{display:flex;align-items:center;min-height:44px;
  font-size:14px;color:var(--sand);line-height:1.7}
.ft__col li a{display:flex;align-items:center;align-self:stretch;
  transition:color var(--t1)}
.ft__col li a:hover{color:var(--brass-2)}
.ft__soc{display:flex;gap:var(--s2);margin-block-start:var(--s5)}
.ft__soc a{
  display:grid;place-items:center;width:44px;height:44px;
  border:1px solid var(--line);border-radius:var(--r1);color:var(--sand);
  transition:color var(--t1),border-color var(--t1),background var(--t1)
}
.ft__soc a svg{width:19px;height:19px}
.ft__soc a:hover{color:var(--brass-2);border-color:rgba(176,141,87,.34);background:var(--brass-dim)}

.ft__bot{
  display:grid;gap:var(--s2);
  margin-block-start:var(--s7);padding-block-start:var(--s5);
  border-block-start:1px solid var(--line)
}
.ft__bot p{font-size:12px;color:var(--mute);line-height:1.7}
.ft__by a{display:inline-flex;align-items:center;min-height:44px;
  color:var(--sand);border-block-end:1px solid var(--line-2);transition:color var(--t1)}
.ft__by a:hover{color:var(--brass-2)}

/* ── 21. FLOATING DOCK ───────────────────────────────────────────────────── */
.dock{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:88;
  display:grid;grid-template-columns:1.35fr 1fr;gap:1px;
  background:var(--line-2);
  padding-block-end:env(safe-area-inset-bottom);
  transform:translateY(0);
  transition:transform var(--t2) var(--e)
}
.dock.is-hidden{transform:translateY(110%)}
.dock__b{
  display:flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:60px;
  font-size:14.5px;font-weight:700;line-height:1;letter-spacing:-.01em
}
.dock__b svg{width:20px;height:20px;flex:0 0 auto}
.dock__b--wa{background:var(--wa);color:#04240F}
.dock__b--wa:active{background:var(--wa-2)}
.dock__b--call{background:var(--coal-2);color:var(--cream)}
.dock__b--call:active{background:var(--coal-3)}

/* ── 21b. "COMING SOON" LINK STATE ───────────────────────────────────────
   Applied by script.js to any link whose URL is still a [BRACKETED] token,
   so an unfilled placeholder reads as designed rather than broken.        */
.is-soon{cursor:default;position:relative}
.is-soon:hover{transform:none!important}
.soc.is-soon{opacity:.5;border-style:dashed;border-color:var(--line-2);background:transparent}
.soc.is-soon:hover{background:transparent;border-color:var(--line-2)}
.soc.is-soon .soc__go{display:none}
.soc.is-soon::after{
  content:"قريبًا";
  position:absolute;inset-block-start:var(--s4);inset-inline-end:var(--s5);
  font-size:10px;font-weight:700;letter-spacing:.1em;color:var(--brass);line-height:1
}
.btn.is-soon{
  background:transparent!important;color:var(--mute)!important;
  border:1px dashed var(--line-2)!important;box-shadow:none!important
}
.ft__soc a.is-soon{opacity:.4;border-style:dashed}
.ft__col a.is-soon{color:var(--mute);border-block-end:1px dashed var(--line-2)}
.loc__list a.is-soon,.ft__by a.is-soon{border-block-end-style:dashed;color:var(--mute)}

/* ── 22. REVEAL ──────────────────────────────────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(20px)}
[data-rv].rv{
  opacity:1;transform:none;
  transition:opacity .72s var(--e-out),transform .72s var(--e-out)
}
[data-rv][data-rv-d="1"].rv{transition-delay:.08s}
[data-rv][data-rv-d="2"].rv{transition-delay:.16s}
[data-rv][data-rv-d="3"].rv{transition-delay:.24s}
[data-rv][data-rv-d="4"].rv{transition-delay:.32s}

/* page load */
html.is-ready body{animation:pageIn .6s var(--e-out) both}
@keyframes pageIn{from{opacity:0}to{opacity:1}}


/* ══════════════════════════════════════════════════════════════════════════
   TABLET — 640px+
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:640px){
  :root{--sec:96px;--gutter:32px;--gap:20px}
  body{font-size:16.5px}

  .sechead__h{font-size:clamp(36px,5vw,44px)}
  .sechead__p{font-size:16px}

  .hero{
    align-items:center;min-height:min(94svh,900px);
    padding-block:calc(var(--hdr-h) + var(--s10)) var(--s11)
  }
  /* wider viewport, less crop, so the panel can take more of the hero */
  .hero__vid{
    height:64%;object-position:82% 50%;
    -webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.32) 82%,transparent 100%);
            mask-image:linear-gradient(to bottom,#000 0%,#000 54%,rgba(0,0,0,.32) 82%,transparent 100%)
  }
  .hero__h1{font-size:clamp(58px,8.6vw,74px)}
  .hero__sub{font-size:18px;max-width:38ch}
  .hero__cta{display:flex;gap:var(--s4);flex-wrap:wrap}
  .hero__cta .btn{width:auto;min-width:200px}
  .hero__meta{gap:var(--s3) var(--s7)}
  .hero__meta li{font-size:13.5px}

  .svcgrid{grid-template-columns:repeat(2,1fr)}
  .svc{padding:var(--s7)}
  .svc__h{font-size:20px}

  .whygrid{grid-template-columns:repeat(2,1fr)}

  .steps{grid-template-columns:repeat(3,1fr);gap:var(--s6)}
  .step{padding-inline-start:0;padding-block-start:var(--s10)}
  .step::before{
    inset-inline:44px calc(var(--s6) * -1);inset-block:18px auto;
    width:auto;height:1px;
    background:linear-gradient(to left,var(--line-2),transparent)
  }
  .step__n{inset-block-start:0}
  .exp__cta{display:flex;justify-content:center}
  .exp__cta .btn{width:auto;min-width:260px}

  .gal{gap:var(--s3);grid-template-columns:repeat(2,1fr);grid-auto-rows:180px}
  .gal__i,.gal__i--wide,.gal__i--tall{aspect-ratio:auto;grid-column:auto}
  .gal__i:nth-child(1){grid-area:1/1/3/2}
  .gal__i:nth-child(2){grid-area:1/2/2/3}
  .gal__i:nth-child(3){grid-area:2/2/3/3}
  .gal__i:nth-child(4){grid-area:3/1/4/3}
  .gal__i:nth-child(5){grid-area:4/1/6/2}
  .gal__i:nth-child(6){grid-area:4/2/5/3}
  .gal__i:nth-child(7){grid-area:5/2/6/3}
  .gal__i:nth-child(8){grid-area:6/1/7/3}

  .about{grid-template-columns:1fr 1fr;gap:var(--s9);align-items:center}
  .about__img{aspect-ratio:4/5}

  .revgrid{
    grid-auto-flow:row;grid-template-columns:repeat(3,1fr);grid-auto-columns:auto;
    gap:var(--gap);overflow:visible;
    padding-inline:0;margin-inline:0
  }
  .rev{padding:var(--s8) var(--s6) var(--s6)}
  .why{padding:var(--s7) var(--s6) var(--s6)}
  .ft{padding-block:var(--s10) var(--s7)}
  .ft__bot{margin-block-start:var(--s9);padding-block-start:var(--s6)}

  .loc{grid-template-columns:1fr 1fr;align-items:stretch}
  .loc__map{aspect-ratio:auto;min-height:100%}
  .loc__btns{display:flex;flex-wrap:wrap}
  .loc__btns .btn{width:auto;flex:1 1 180px}

  .socgrid{grid-template-columns:repeat(3,1fr);gap:var(--gap)}
  .soc{flex-direction:column;align-items:flex-start;gap:var(--s5);min-height:150px;padding:var(--s6)}
  .soc__n{flex:0 0 auto}
  .soc__go{position:absolute}
  .soc{position:relative}
  .soc__go{inset-block-start:var(--s6);inset-inline-end:var(--s6)}

  .cta__h{font-size:clamp(44px,6vw,54px)}
  .cta__btns{display:flex;justify-content:center;width:auto}
  .cta__btns .btn{width:auto;min-width:230px}

  .ft__top{grid-template-columns:repeat(2,1fr);gap:var(--s9)}
  .ft__brand{grid-column:1/-1}
  .ft__bot{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s4)}

  .dock{
    inset-inline:auto var(--s6);inset-block-end:var(--s6);
    grid-template-columns:1fr;gap:var(--s3);
    background:none;padding:0
  }
  .dock__b{
    min-height:56px;padding-inline:var(--s6);border-radius:var(--rp);
    box-shadow:var(--sh3)
  }
  .dock__b--call{border:1px solid var(--line-2);background:rgba(20,20,23,.9);backdrop-filter:blur(12px)}
  body{padding-block-end:0}
}


/* ══════════════════════════════════════════════════════════════════════════
   LAPTOP / DESKTOP — 900px+
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:900px){
  :root{--sec:128px;--gutter:40px;--gap:24px;--hdr-h:88px}
  body{font-size:17px}

  .burger{display:none}
  .mnav{display:none!important}

  /* landscape viewport: the frame barely crops, so the clip goes full bleed.
     Graded a stop darker than mobile because at full bleed a bright frame
     (the barber's forearm sweeping through) would otherwise crowd the copy. */
  .hero__vid{
    height:100%;object-position:100% 50%;
    filter:grayscale(.5) contrast(1.12) brightness(.5) saturate(.75);
    -webkit-mask-image:none;mask-image:none
  }

  .nav{display:flex;align-items:center;gap:var(--s2);flex:0 0 auto}
  .nav a{
    position:relative;display:flex;align-items:center;min-height:44px;
    padding:var(--s2) var(--s4);
    font-size:14.5px;font-weight:600;color:var(--sand);
    transition:color var(--t1)
  }
  .nav a::after{
    content:"";position:absolute;inset-block-end:2px;inset-inline:var(--s4);
    height:1px;background:var(--brass);
    transform:scaleX(0);transform-origin:100% 50%;
    transition:transform var(--t2) var(--e)
  }
  .nav a:hover{color:var(--cream)}
  .nav a:hover::after,.nav a.is-cur::after{transform:scaleX(1)}
  .nav a.is-cur{color:var(--cream)}

  .logo{flex:0 0 auto}
  .logo__mark,.logo__img{width:46px;height:46px}
  .logo__ar{font-size:17px}
  .logo__en{font-size:12px}
  .hdr__in{gap:var(--s7);justify-content:space-between}
  .hdr__act{gap:var(--s3);flex:0 0 auto}
  .ico-btn{display:grid}
  .hdr__cta{display:inline-flex}

  .hero{align-items:center;min-height:min(92vh,880px);padding-block:var(--hdr-h)}
  .hero__h1{font-size:clamp(74px,7.4vw,104px);line-height:1.14}
  .hero__sub{font-size:19px;max-width:34ch;margin-block-start:var(--s5)}
  .hero__cta{margin-block-start:var(--s9)}
  .hero__meta{max-width:none;margin-block-start:var(--s9);padding-block-start:var(--s6)}
  .hero__meta li{font-size:14px}
  /* sits on the end (left) rail so it balances the right-aligned hero copy */
  .hero__scroll{
    display:block;position:absolute;z-index:1;
    inset-block-end:var(--s8);inset-inline-end:var(--gutter);
    width:1px;height:56px;background:var(--line-2);overflow:hidden
  }
  .hero__scroll span{
    display:block;width:100%;height:18px;background:var(--brass);
    animation:scrollDot 2.4s var(--e) infinite
  }
  @keyframes scrollDot{
    0%{transform:translateY(-20px)}
    60%{transform:translateY(56px)}
    100%{transform:translateY(56px)}
  }

  .ticker{padding-block:var(--s5)}
  .ticker__set{gap:var(--s7);padding-inline-end:var(--s7)}
  .ticker__set span{font-size:14px}

  /* the 56ch measure is sized for body text and chokes the display headings,
     so on desktop the title runs full width and only the paragraph keeps a measure */
  .sechead{margin-block-end:var(--s10);max-width:none}
  .sechead__h{font-size:clamp(44px,3.6vw,54px);text-wrap:balance}
  /* a place name is one unit. Left to balance it, the location head breaks
     between "Family" and "Arena", so the address gets its own line. */
  .sechead--mid .sechead__h bdi{display:block}
  .sechead__p{max-width:44ch}
  .sechead--row{
    display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s9)
  }
  .sechead--row .sechead__p{margin-block-start:0;text-align:start;max-width:34ch;flex:0 0 auto}

  /* tabs become a centred row, no scroll */
  .tabs{margin-block-end:var(--s9)}
  .tabs__strip{
    justify-content:center;flex-wrap:wrap;gap:var(--s3);
    overflow:visible;padding-inline:0;margin-inline:0
  }
  .tabs__fade{display:none}
  .tab{font-size:14.5px;padding:0 var(--s6)}
  .tab:hover{transform:translateY(-2px)}

  .svcgrid{grid-template-columns:repeat(4,1fr)}
  .svcgrid--3{grid-template-columns:repeat(3,1fr)}
  .svcgrid--2{grid-template-columns:repeat(2,1fr);max-width:820px}
  .svc__h{font-size:21px}
  .panel__note{font-size:14.5px;margin-block-end:var(--s6)}

  .whygrid{grid-template-columns:repeat(4,1fr)}
  .why{padding:var(--s8) var(--s7) var(--s7)}
  .why__h{font-size:20px}

  .steps{gap:var(--s8)}
  .step::before{inset-inline:52px calc(var(--s8) * -1)}
  .step__n{width:40px;height:40px;font-size:13px}
  .step{padding-block-start:var(--s11)}
  .step::before{inset-block-start:20px}
  .step__h{font-size:24px}
  .step__p{font-size:15.5px}

  .gal{grid-template-columns:repeat(4,1fr);grid-auto-rows:200px;gap:var(--gap)}
  .gal__i:nth-child(1){grid-area:1/1/3/2}
  .gal__i:nth-child(2){grid-area:1/2/2/4}
  .gal__i:nth-child(3){grid-area:1/4/3/5}
  .gal__i:nth-child(4){grid-area:2/2/3/3}
  .gal__i:nth-child(5){grid-area:2/3/3/4}
  .gal__i:nth-child(6){grid-area:3/1/4/2}
  .gal__i:nth-child(7){grid-area:3/2/4/4}
  .gal__i:nth-child(8){grid-area:3/4/4/5}
  .gal__i{border-radius:var(--r3)}
  .gal__i figcaption{transform:translateY(8px);opacity:.85;padding:var(--s8) var(--s5) var(--s5);font-size:13.5px}
  .gal__i:hover figcaption{transform:translateY(0);opacity:1}

  .about{grid-template-columns:5fr 6fr;gap:var(--s12)}
  .about__h{font-size:clamp(44px,3.6vw,54px)}
  .about__p{font-size:16.5px}
  .about__facts{gap:var(--s10)}
  .about__facts b{font-size:36px}

  .rating{padding:var(--s6) var(--s7);gap:var(--s5)}
  .rating__stars svg{width:19px;height:19px}
  .rating__num{font-size:22px}
  .rev__t{font-size:17px}

  .loc{grid-template-columns:5fr 7fr;gap:var(--gap)}
  .loc__card{padding:var(--s8) var(--s7)}
  /* spread the three info rows so the card fills the map's height evenly */
  .loc__list{gap:var(--s8);margin-block-end:var(--s8)}
  .loc__map{min-height:460px}
  .loc__home{
    margin-block-start:var(--s7);padding:var(--s5) var(--s6);
    align-items:center;font-size:15px;justify-content:center
  }
  .loc__home svg{margin-block-start:0}

  .soc{min-height:170px;padding:var(--s7)}
  .soc__ico{width:48px;height:48px}
  .soc__n{font-size:16px}

  .cta__h{font-size:clamp(56px,4.6vw,72px)}
  .cta__p{font-size:18px;max-width:40ch}
  .cta__btns{gap:var(--s4)}
  .cta__glow{inset-block-start:-60%;width:min(1000px,90%)}

  .ft{padding-block:var(--s12) var(--s8)}
  .ft__top{grid-template-columns:2.2fr 1fr 1.3fr 1.3fr;gap:var(--s8)}
  .ft__brand{grid-column:auto}
  .ft__tag{font-size:19px}

  .dock{inset-inline:auto var(--s8);inset-block-end:var(--s8)}
  .dock__b span{
    max-width:0;overflow:hidden;white-space:nowrap;opacity:0;
    transition:max-width var(--t2) var(--e),opacity var(--t1),margin var(--t2) var(--e)
  }
  .dock__b{width:56px;padding-inline:0;justify-content:center;transition:width var(--t2) var(--e)}
  .dock__b:hover{width:auto;padding-inline:var(--s6)}
  .dock__b:hover span{max-width:180px;opacity:1;margin-inline-start:var(--s1)}
}


/* ══════════════════════════════════════════════════════════════════════════
   LARGE DESKTOP — 1280px+
   ══════════════════════════════════════════════════════════════════════════ */
@media (min-width:1280px){
  :root{--gutter:56px;--gap:28px;--sec:144px}
  body{font-size:17.5px}

  .hero__h1{font-size:clamp(96px,6.6vw,120px)}
  .hero__sub{font-size:20px}
  .sechead__h,.about__h{font-size:58px}
  .cta__h{font-size:78px}

  .svc{padding:var(--s8) var(--s7)}
  .why{padding:var(--s9) var(--s7) var(--s8)}
  .gal{grid-auto-rows:236px}
  .loc__map{min-height:520px}
  .about__facts b{font-size:42px}
}


/* ── ACCESSIBILITY / MOTION ──────────────────────────────────────────────── */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important
  }
  [data-rv]{opacity:1!important;transform:none!important}
  .ticker__row{animation:none}
}

@media (prefers-contrast:more){
  :root{--mute:#A9A59E;--sand:#D6D0C6;--line:rgba(244,241,236,.2)}
}

@media print{
  .hdr,.dock,.mnav,.ticker,.hero__scroll{display:none!important}
  body{background:#fff;color:#000;padding:0}
}