/* Self-hosted Arabic fonts (OFL) — Amiri (display) + Tajawal (body). Subsets: arabic + latin. */
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/amiri-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Amiri';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/amiri-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/tajawal-400-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:400;font-display:swap;src:url(/static/fonts/tajawal-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/tajawal-500-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:500;font-display:swap;src:url(/static/fonts/tajawal-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/tajawal-700-arabic.woff2) format('woff2');unicode-range:U+0600-06FF, U+0750-077F, U+0870-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC7, U+10EC9-10EEE, U+10EF0-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1}
@font-face{font-family:'Tajawal';font-style:normal;font-weight:700;font-display:swap;src:url(/static/fonts/tajawal-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

/* ═══════════════════════════════════════════════════════════════
   القهوة الملكية — Royal Coffee · Luxury Design System v1.0
   Derived from: NOIR&EMBER · 10 SHADES OF BLACK · N99° · Obsidian
   ═══════════════════════════════════════════════════════════════ */

/* ─── 1. TOKENS ─────────────────────────────────────────────── */
:root {
  /* Surfaces — royal emerald ramp (Qahwajeen) */
  --noir:        #04100c;
  --onyx:        #081812;
  --onyx-mid:    #0d2019;
  --onyx-elev:   #122a21;
  --onyx-high:   #18352a;

  /* Gold ramp — single source of truth */
  --gold:        #c5a059;
  --gold-lite:   #e2c68e;
  --gold-deep:   #a67c37;
  --bronze:      #85642e;
  --gold-grad:   linear-gradient(135deg, #a67c37 0%, #c5a059 32%, #e2c68e 62%, #c5a059 100%);
  --gold-text:   linear-gradient(120deg, #e2c68e 0%, #c5a059 50%, #e2c68e 100%);

  /* Gold at opacity — hairlines & glows */
  --gold-04:     rgba(197,160,89,.04);
  --gold-08:     rgba(197,160,89,.08);
  --gold-14:     rgba(197,160,89,.14);
  --gold-22:     rgba(197,160,89,.22);
  --gold-38:     rgba(197,160,89,.38);

  /* Text — warm pearl, never cool gray */
  --pearl:       #f6f0e3;
  --pearl-soft:  rgba(246,240,227,.86);
  --pearl-mute:  rgba(246,240,227,.74);
  --pearl-faint: rgba(246,240,227,.56);

  /* Type */
  --f-display: 'Amiri', 'Tajawal', Georgia, serif;
  --f-body:    'Tajawal', system-ui, -apple-system, sans-serif;

  /* Radii */
  --r-sm: 10px;  --r-md: 16px;  --r-lg: 22px;
  --r-xl: 28px;  --r-2xl: 36px; --r-pill: 999px;

  /* Elevation */
  --sh-sm:  0 4px 14px rgba(0,0,0,.42);
  --sh-md:  0 12px 30px rgba(0,0,0,.52);
  --sh-lg:  0 24px 60px rgba(0,0,0,.62);
  --sh-gold: 0 8px 28px rgba(166,124,55,.26);
  --inset-hi: inset 0 1px 0 rgba(255,255,255,.09);

  /* Chrome */
  --hdr-h: 60px;
  --nav-h: 66px;

  /* Motion */
  --ease: cubic-bezier(.22,1,.36,1);
  --t-fast: .28s var(--ease);
  --t-mid:  .45s var(--ease);

  /* Rhythm */
  --sp-sec: 68px;
  --gutter: 18px;
  --maxw: 1240px;
}

@media (min-width:768px){ :root{ --sp-sec:96px; --gutter:32px; --hdr-h:76px } }
@media (min-width:1024px){ :root{ --sp-sec:120px } }

/* ─── 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) + 16px) }
body{
  font-family:var(--f-body); font-size:16px; line-height:1.78; font-weight:400;
  color:var(--pearl-soft); background:var(--noir);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden; min-height:100vh;
}
img,svg{ display:block; max-width:100%; height:auto }
a{ color:inherit; text-decoration:none; -webkit-tap-highlight-color:transparent }
button{ font:inherit; color:inherit; background:none; border:0; cursor:pointer }
ul{ list-style:none }
::selection{ background:var(--gold-deep); color:var(--noir) }

/* Ambient page glow */
body::before{
  content:''; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:
    radial-gradient(900px 600px at 82% -8%, rgba(166,124,55,.13), transparent 62%),
    radial-gradient(700px 520px at 10% 105%, rgba(24,92,68,.22), transparent 66%),
    var(--noir);
}
/* Fine film grain */
body::after{
  content:''; position:fixed; inset:0; z-index:-1; pointer-events:none; opacity:.028;
  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='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ─── 3. TYPOGRAPHY SCALE ───────────────────────────────────── */
/* Arabic display type needs far more leading than Latin: Amiri carries tall
   ascenders (ل ك ط) and low descenders (ج ح ع ي) plus tashkeel, so Latin-grade
   line-heights (1.16) make consecutive lines collide. These values are the
   minimum that keeps every glyph clear at every breakpoint. */
h1,h2,h3{ font-family:var(--f-display); font-weight:700; color:var(--pearl); line-height:1.42; letter-spacing:0 }
h1{ font-size:clamp(31px, 7.4vw, 62px); line-height:1.44 }
h2{ font-size:clamp(26px, 5.6vw, 44px); line-height:1.42 }
h3{ font-size:clamp(20px, 3.4vw, 27px); line-height:1.46 }
p{ font-size:16px; line-height:1.82; color:var(--pearl-soft) }
small{ font-size:13px; line-height:1.6 }

/* Section eyebrow — wide-tracked caps (from 10 SHADES) */

/* ─── 4. LAYOUT ─────────────────────────────────────────────── */
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
section{ position:relative }

.grid{ display:grid; gap:var(--gutter) }
.grid>*{ min-width:0 } /* prevent long words from blowing out the track */
.grid>.card{ align-self:stretch }

/* Ornamental divider (from 10 SHADES gold rule) */

/* ─── 5. BUTTONS ────────────────────────────────────────────── */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center;
  gap:9px; min-height:52px; padding:0 26px; border-radius:var(--r-pill);
  font-family:var(--f-body); font-size:16px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; overflow:hidden; isolation:isolate;
  transition:transform var(--t-fast), box-shadow var(--t-fast), border-color var(--t-fast);
}
.btn svg{ width:19px; height:19px; flex:none }
.btn:active{ transform:scale(.975) }

/* Primary — gold gradient on solid base (never over video) */
/* gold ink is dark on purpose — locked against inheritance */
.btn-gold{ color:#06140f; background:var(--gold-grad); box-shadow:var(--sh-gold), var(--inset-hi) }
.btn-gold::after{
  content:''; position:absolute; inset:0; z-index:-1; opacity:0;
  background:linear-gradient(135deg,#c5a059,#f0dcae 55%,#c5a059);
  transition:opacity var(--t-fast);
}
.btn-gold:hover::after{ opacity:1 }
.btn-gold:hover{ box-shadow:0 14px 40px rgba(197,160,89,.38), var(--inset-hi) }

/* Secondary — hairline outline */
.btn-line{
  color:var(--gold-lite); border:1px solid var(--gold-38);
  background:rgba(197,160,89,.05); backdrop-filter:blur(10px);
}
.btn-line:hover{ border-color:var(--gold); background:rgba(197,160,89,.11); color:var(--gold-lite) }

/* Ghost */
.btn-lg{ min-height:58px; font-size:17px; padding:0 32px }

/* ─── 6. CARDS ──────────────────────────────────────────────── */
/* Obsidian glass tile — the workhorse */
.card{
  position:relative; border-radius:var(--r-xl); overflow:hidden;
  background:linear-gradient(160deg, rgba(18,42,33,.92), rgba(8,24,18,.96));
  border:1px solid var(--gold-14);
  box-shadow:var(--sh-md);
  transition:transform var(--t-mid), border-color var(--t-mid), box-shadow var(--t-mid);
}
.card::before{ /* inner top highlight */
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--inset-hi);
}
@media (hover:hover){
  .card:hover{ transform:translateY(-5px); border-color:var(--gold-38); box-shadow:var(--sh-lg) }
}

/* Service card — photo inset so the gold border frames it (NOIR&EMBER) */

/* Gold price / meta badge (NOIR&EMBER) */

/* Numbered medallion (from 10 SHADES OF BLACK) */

/* Numbered pillar row — satin band (10 SHADES) */

/* Feature tile with circular bronze icon badge (from Blush ref) */

/* Stat cell — 3D gold pill influence (Minimal Green) */

/* ─── 7. HEADER ─────────────────────────────────────────────── */
.hdr{
  position:fixed; inset-inline:0; top:0; z-index:60; height:var(--hdr-h);
  display:flex; align-items:center;
  transition:background var(--t-mid), border-color var(--t-mid), backdrop-filter var(--t-mid);
  border-bottom:1px solid transparent;
}
.hdr.stuck{
  background:rgba(4,16,12,.86); backdrop-filter:blur(20px) saturate(1.4);
  border-bottom-color:var(--gold-14);
}
.hdr-in{ display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }

.brand{ display:flex; align-items:center; gap:11px; min-height:44px }
.brand img{ width:40px; height:40px; border-radius:50%; border:1px solid var(--gold-22) }
.brand-txt{ display:flex; flex-direction:column; line-height:1.1 }
.brand-txt b{ font-family:var(--f-display); font-size:17.5px; font-weight:700; color:var(--pearl) }
.brand-txt span{ font-size:9.5px; letter-spacing:.26em; color:var(--gold); text-transform:uppercase }

/* Desktop pill nav (NOIR&EMBER) */
.nav{ display:none }
@media (min-width:1024px){
  .nav{
    display:flex; align-items:center; gap:4px; padding:5px;
    border-radius:var(--r-pill); background:rgba(13,32,25,.6);
    border:1px solid var(--gold-08); backdrop-filter:blur(14px);
  }
  .nav a{
    position:relative; padding:10px 17px; border-radius:var(--r-pill);
    font-size:14.5px; font-weight:500; color:var(--pearl-mute);
    transition:color var(--t-fast), background var(--t-fast);
  }
  .nav a:hover{ color:var(--gold-lite) }
  .nav a[aria-current="page"]{ color:#06140f; background:var(--gold-grad); font-weight:700 }
}
.hdr-cta{ display:none }
@media (min-width:1024px){ .hdr-cta{ display:inline-flex } }

.burger{
  display:grid; place-items:center; width:46px; height:46px;
  border-radius:14px; border:1px solid var(--gold-22); color:var(--gold-lite);
  background:rgba(197,160,89,.06);
}
@media (min-width:1024px){ .burger{ display:none } }
.burger svg{ width:21px; height:21px }

/* ─── 8. MOBILE SHEET MENU (N99° high-radius sheet) ─────────── */
.sheet-bd{
  position:fixed; inset:0; z-index:80; background:rgba(2,9,7,.74);
  backdrop-filter:blur(6px); opacity:0; visibility:hidden; transition:all var(--t-mid);
}
.sheet-bd.open{ opacity:1; visibility:visible }
.sheet{
  position:fixed; inset-inline:0; bottom:0; z-index:81;
  max-height:88vh; overflow-y:auto; overscroll-behavior:contain;
  padding:10px var(--gutter) calc(24px + env(safe-area-inset-bottom));
  border-radius:var(--r-2xl) var(--r-2xl) 0 0;
  background:linear-gradient(180deg,#0d2019,#071510);
  border-top:1px solid var(--gold-22);
  box-shadow:0 -28px 70px rgba(0,0,0,.7);
  transform:translateY(101%); transition:transform var(--t-mid), visibility var(--t-mid);
  visibility:hidden; pointer-events:none;
}
.sheet.open{ transform:translateY(0); visibility:visible; pointer-events:auto }
@media (min-width:1024px){ .sheet,.sheet-bd{ display:none } }

/* ── identity + conversion, one single row ──
   Previously these were a 44px logo block plus two 76px stacked cards:
   ~180px of vertical space before a single nav item appeared, which made
   the sheet read as a page. Collapsed into one 40px row. */
.sheet-id{ display:inline-flex; align-items:center; gap:8px; min-width:0 }
.sheet-id img{ width:26px; height:26px; object-fit:contain; flex:none; opacity:.95 }
.sheet-id b{
  font-family:var(--f-display); font-size:14.5px; font-weight:700;
  color:var(--pearl-soft); white-space:nowrap;
}
/* Slim, jewel-like pills — content-sized (never a fixed square), with a
   hairline border and a whisper of tint. Tap height stays at the 44px
   minimum via padding, so "small" never means "hard to hit". */
/* NOTE ON TAP SIZE: an inset-expanded ::before was tried to reach the 44px
   HIG minimum while keeping the 34px look — but a negative-inset pseudo
   element contributes to scrollWidth and produced measurable overflow.
   The pill now uses a real 44px min-height (WCAG 2.5.5 / Apple HIG) —
   still compact and jewel-like, with no phantom geometry. */

/* ── nav as a compact 3-column tile grid ──
   9 items land in 3 rows of squat 62px tiles instead of 5 rows of 92px
   cards, so the whole sheet fits well under half the viewport. */

/* one quiet closing row */

/* ─── 9. BOTTOM APP NAV — "Golden Wave" dock ────────────────
 * A curved wave crest cradles the centre action. Built from a
 * single SVG-free mask so it costs nothing to paint.
 * ─────────────────────────────────────────────────────────── */
.bnav{
  position:fixed; inset-inline:0; bottom:0; z-index:55;
  height:calc(var(--nav-h) + env(safe-area-inset-bottom));
  padding-bottom:env(safe-area-inset-bottom);
  display:grid; grid-template-columns:repeat(5,1fr); align-items:center;
  isolation:isolate; pointer-events:auto;
}
@media (min-width:1024px){ .bnav{ display:none } }

/* the wave body — a rounded bar with a scooped crest in the middle */
.bnav::before{
  content:''; position:absolute; inset:0; z-index:-2;
  background:
    radial-gradient(120% 150% at 50% -40%, rgba(197,160,89,.16), transparent 62%),
    linear-gradient(180deg, rgba(11,28,22,.96), rgba(4,16,12,.99));
  backdrop-filter:blur(26px) saturate(1.6);
  -webkit-backdrop-filter:blur(26px) saturate(1.6);
  border-start-start-radius:26px; border-start-end-radius:26px;
  /* A real wave, not a single arc: the centre dome is subtracted while two
     side crests are added back, so the top edge rises–dips–rises. Built from
     composited radial masks — no SVG, no extra paint cost. */
  -webkit-mask:
    radial-gradient(34px 30px at 50% -2px, transparent 99%, #000 100%),
    radial-gradient(64px 15px at 21% 13px, #000 99%, transparent 100%),
    radial-gradient(64px 15px at 79% 13px, #000 99%, transparent 100%);
  -webkit-mask-composite:source-over;
  mask:
    radial-gradient(34px 30px at 50% -2px, transparent 99%, #000 100%),
    radial-gradient(64px 15px at 21% 13px, #000 99%, transparent 100%),
    radial-gradient(64px 15px at 79% 13px, #000 99%, transparent 100%);
  mask-composite:add;
}

/* the gold hairline that traces the wave — sits 1px above the body */
.bnav::after{
  content:''; position:absolute; inset-inline:0; inset-block-start:0;
  height:2px; z-index:-1; pointer-events:none;
  background:linear-gradient(90deg,
    transparent 0%, rgba(197,160,89,.34) 12%, rgba(226,198,142,.72) 34%,
    rgba(240,220,174,.9) 50%, rgba(226,198,142,.72) 66%,
    rgba(197,160,89,.34) 88%, transparent 100%);
  -webkit-mask:radial-gradient(34px 30px at 50% -2px, transparent 99%, #000 100%);
  mask:radial-gradient(34px 30px at 50% -2px, transparent 99%, #000 100%);
}

.bnav a{
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:5px;
  min-height:56px; padding:6px 2px; text-decoration:none; min-width:0;
  font-size:10px; font-weight:600; letter-spacing:0; line-height:1.15;
  text-align:center; white-space:nowrap; color:var(--pearl-faint);
  transition:color var(--t-fast) var(--ease);
}
.bnav a svg{ width:22px; height:22px; stroke-width:1.6; transition:transform var(--t-fast) var(--ease) }
.bnav a:active svg{ transform:scale(.9) }
.bnav a:hover{ color:var(--pearl-soft) }

/* active state: gold text + a tiny wave underline that grows in */
.bnav a[aria-current="page"]{ color:var(--gold-lite) }
.bnav a[aria-current="page"]::after{
  content:''; position:absolute; inset-block-start:4px; inset-inline:32%;
  height:3px; border-radius:3px; background:var(--gold-grad);
  box-shadow:0 0 12px rgba(197,160,89,.7);
  animation:navRise .4s var(--ease) both;
}
@keyframes navRise{ from{ transform:scaleX(0); opacity:0 } to{ transform:scaleX(1); opacity:1 } }

/* ── centre action: rides the wave crest ── */
.bnav .center{ position:relative }
.bnav .center span{
  position:absolute; top:-24px; left:50%; translate:-50% 0;
  width:58px; height:58px; border-radius:50%; display:grid; place-items:center;
  color:#06140f; background:var(--gold-grad);
  border:3px solid #071510;
  box-shadow:
    0 10px 28px -6px rgba(166,124,55,.6),
    0 0 0 1px rgba(240,220,174,.35),
    inset 0 2px 0 rgba(255,255,255,.42);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.bnav .center span svg{ width:25px; height:25px; stroke-width:2.1 }
.bnav .center:active span{ transform:translate(-50%,0) scale(.93) }
.bnav .center:hover span{
  transform:translate(-50%,-3px);
  box-shadow:0 16px 34px -6px rgba(166,124,55,.7), 0 0 0 1px rgba(240,220,174,.5),
             inset 0 2px 0 rgba(255,255,255,.42);
}
/* breathing halo so the eye lands on "احجز" */
.bnav .center span::before{
  content:''; position:absolute; inset:-6px; border-radius:50%;
  border:1.5px solid rgba(197,160,89,.5); pointer-events:none;
  animation:crestPulse 3s var(--ease) infinite;
}
@keyframes crestPulse{
  0%{ transform:scale(.94); opacity:.7 }
  70%,100%{ transform:scale(1.22); opacity:0 }
}
.bnav .center em{
  margin-top:36px; font-style:normal; font-weight:700;
  color:var(--gold); font-size:10px; white-space:nowrap;
}
@media (prefers-reduced-motion:reduce){
  .bnav .center span::before{ animation:none; opacity:.3 }
  .bnav a[aria-current="page"]::after{ animation:none }
}

/* ─── 10. HERO ──────────────────────────────────────────────── */
.hero{
  position:relative; min-height:min(94svh,860px);
  display:flex; align-items:center; overflow:hidden;
  padding-top:calc(var(--hdr-h) + 34px); padding-bottom:56px;
}
.hero-bg{ position:absolute; inset:0; z-index:0 }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center }
.hero-bg::after{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--noir) 2%, rgba(4,16,12,.7) 34%, rgba(4,16,12,.44) 68%, rgba(4,16,12,.72) 100%),
    radial-gradient(120% 88% at 50% 46%, transparent 26%, rgba(4,16,12,.62) 100%);
}
.hero-in{ position:relative; z-index:1; text-align:center; width:100%;
  max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter) }
@keyframes crestIn{ from{ opacity:0; transform:scale(.86) translateY(16px) } to{ opacity:1; transform:none } }

/* the eyebrow's rules sit at x-height while the h1's first line carries a
   damma above the cap line — give the pair real breathing room */
.hero h1{ margin-bottom:20px; text-shadow:0 3px 26px rgba(0,0,0,.7) }

/* ── 10b. CINEMATIC HERO (home only) ───────────────────────────
 * Four independent, cheap layers build the "luxury film" feel:
 *   1. two stills cross-fading on a 22s loop (hero-bg / hero-bg-2)
 *   2. a slow Ken-Burns scale+pan on each still
 *   3. a single gold sheen that sweeps the headline
 *   4. a staggered cascade for the copy block
 * Everything animates only `transform` and `opacity`, so the compositor
 * handles it on its own thread — no layout, no paint, no CLS.
 * ─────────────────────────────────────────────────────────── */
@keyframes crossFade{ 0%,42%{ opacity:0 } 54%,92%{ opacity:1 } 100%{ opacity:0 } }
@keyframes kenBurnsA{
  from{ transform:scale(1.06) translate3d(0,0,0) }
  to{   transform:scale(1.16) translate3d(-1.6%,-1.4%,0) }
}
@keyframes kenBurnsB{
  from{ transform:scale(1.16) translate3d(1.4%,1.2%,0) }
  to{   transform:scale(1.06) translate3d(0,0,0) }
}

/* the darkening veil has to sit ABOVE both stills, so it is its own layer
   rather than the ::after of a single one */   /* superseded by .hero-veil */

/* a wide, very soft gold beam that drifts across the frame — reads as
   light moving through the room rather than as a UI effect */
@keyframes beam{ 0%{ transform:translateX(-32%) } 55%,100%{ transform:translateX(32%) } }

/* headline: a gold gradient that sweeps once, then settles */
@keyframes sheen{ from{ background-position:180% 0 } to{ background-position:-80% 0 } }

/* cascade: each child enters a beat after the one before it */
@keyframes riseIn{
  from{ opacity:0; transform:translate3d(0,22px,0) }
  to{   opacity:1; transform:none }
}
/* LCP guard: the headline (largest text) must paint on the first frame.
   Opacity-from-0 delays LCP until the animation ends, so the title only
   slides — it is never invisible. */
@keyframes riseInSoft{ from{ transform:translate3d(0,12px,0) } to{ transform:none } }

/* Accessibility: one still frame, no drift, no sheen, no cascade. */

/* Trust strip under hero CTAs */

/* ─── 11. MENU / OFFERINGS LIST ─────────────────────────────── */

/* ─── 12. GALLERY (masonry, non-symmetric) ──────────────────── */
.gal{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media (min-width:768px){ .gal{ grid-template-columns:repeat(4,1fr); gap:16px } }
.gal figure{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  border:1px solid var(--gold-08); background:var(--onyx-mid);
}
.gal img{ width:100%; height:100%; object-fit:cover; transition:transform 1.1s var(--ease) }
@media (hover:hover){ .gal figure:hover img{ transform:scale(1.08) } }
.gal .tall{ grid-row:span 2 }
.gal figcaption{
  position:absolute; inset-inline:0; bottom:0; padding:22px 14px 12px;
  font-size:12.5px; font-weight:500; color:var(--pearl-soft);
  background:linear-gradient(to top, rgba(4,16,12,.9), transparent);
}

/* ─── 13. FAQ ACCORDION ─────────────────────────────────────── */
.faq{ display:grid; gap:12px }
.faq details{
  border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(160deg, rgba(18,42,33,.72), rgba(7,21,16,.9));
  border:1px solid var(--gold-08); transition:border-color var(--t-mid);
}
.faq details[open]{ border-color:var(--gold-22) }
.faq summary{
  display:flex; align-items:center; gap:14px; min-height:60px; padding:15px 20px;
  cursor:pointer; list-style:none; font-family:var(--f-display); font-size:17.5px;
  font-weight:700; color:var(--pearl);
}
.faq summary::-webkit-details-marker{ display:none }
.faq summary .chev{
  margin-inline-start:auto; flex:none; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center; color:var(--gold-lite);
  background:rgba(197,160,89,.09);
  border:1px solid var(--gold-38); transition:transform var(--t-mid), background var(--t-fast);
}
.faq summary .chev svg{ width:14px; height:14px }
.faq details[open] summary .chev{ transform:rotate(180deg); background:rgba(197,160,89,.12) }
.faq .ans{ padding:0 20px 20px; font-size:15px; line-height:1.85; color:var(--pearl-mute) }

/* ─── 14. CITY CHIPS ────────────────────────────────────────── */
.chips{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center }
.chip{
  display:inline-flex; align-items:center; gap:8px; min-height:46px; padding:0 18px;
  border-radius:var(--r-pill); font-size:14.5px; font-weight:500; color:var(--pearl-soft);
  background:rgba(255,255,255,.03); border:1px solid var(--gold-14);
  transition:all var(--t-fast);
}
.chip svg{ width:15px; height:15px; color:var(--gold) }
.chip:hover{ border-color:var(--gold-38); color:var(--gold-lite); background:rgba(197,160,89,.09) }
.chip[aria-current="page"]{ color:#06140f; background:var(--gold-grad); border-color:transparent; font-weight:700 }
.chip[aria-current="page"] svg{ color:#06140f }

/* ─── 15. CTA BAND ──────────────────────────────────────────── */
.cta-band{
  position:relative; overflow:hidden; border-radius:var(--r-2xl);
  padding:clamp(34px,6vw,64px) clamp(22px,4vw,54px); text-align:center;
  background:linear-gradient(150deg, #10261e 0%, #081812 58%, #05110d 100%);
  border:1px solid var(--gold-22); box-shadow:var(--sh-lg), var(--inset-hi);
}
.cta-band::before{
  content:''; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(600px 320px at 50% -12%, rgba(197,160,89,.2), transparent 66%);
}
.cta-band>*{ position:relative }
.cta-phone{
  display:inline-flex; align-items:center; min-height:48px; margin-top:20px; font-family:var(--f-display);
  font-size:clamp(24px,5.6vw,38px); font-weight:700; letter-spacing:.04em;
  direction:ltr; unicode-bidi:isolate;
  background:var(--gold-text); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
}

/* ─── 16. FOOTER ────────────────────────────────────────────── */
.ftr{
  margin-top:var(--sp-sec); padding-top:clamp(40px,6vw,64px);
  padding-bottom:calc(var(--nav-h) + 30px + env(safe-area-inset-bottom));
  border-top:1px solid var(--gold-14); background:linear-gradient(180deg,#071510,var(--noir));
}
@media (min-width:1024px){ .ftr{ padding-bottom:44px } }
.ftr .ftr-h{ font-size:15px; line-height:1.5; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--f-body); font-weight:700; color:var(--gold); margin-bottom:16px }
.ftr p{ font-size:14.5px; color:var(--pearl-mute); max-width:42ch }

.ftr-base{
  margin-top:40px; padding-top:22px; border-top:1px solid var(--gold-08);
  display:flex; flex-wrap:wrap; gap:12px; align-items:center; justify-content:space-between;
  font-size:13px; color:var(--pearl-faint);
}

/* ─── 17. TOAST (N99° glass pill) ───────────────────────────── */
.toast{
  position:fixed; z-index:90; left:50%; translate:-50% 0;
  bottom:calc(var(--nav-h) + 22px + env(safe-area-inset-bottom));
  display:flex; align-items:center; gap:10px;
  padding:12px 20px; border-radius:var(--r-pill);
  font-size:14.5px; font-weight:600; color:var(--pearl);
  background:rgba(9,24,18,.9); backdrop-filter:blur(20px);
  border:1px solid var(--gold-38); box-shadow:var(--sh-lg);
  opacity:0; visibility:hidden; transform:translateY(14px); transition:all var(--t-mid);
}
.toast.show{ opacity:1; visibility:visible; transform:translateY(0) }
.toast svg{ width:18px; height:18px; color:var(--gold) }
@media (min-width:1024px){ .toast{ bottom:28px } }

/* ─── 18. FORM ──────────────────────────────────────────────── */

/* ─── 19. REVEAL ON SCROLL ──────────────────────────────────── */
.rv{ opacity:0; transform:translateY(24px); transition:opacity .8s var(--ease), transform .8s var(--ease) }
.rv.in{ opacity:1; transform:none }
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
  .rv{ opacity:1; transform:none }
  html{ scroll-behavior:auto }
}

/* ─── 20. UTIL ──────────────────────────────────────────────── */
.sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0 }
.center{ text-align:center }
body{ padding-bottom:0 }
main{ padding-bottom:0 }

/* ══════════════════════════════════════════════════════════
 * TURN-3 ADDITIONS — new components, transitions, 3D stage
 * ══════════════════════════════════════════════════════════ */

/* ── LTR isolation for phones / emails / handles ─────────── */
.ltr{ direction:ltr; unicode-bidi:isolate; text-align:start }

/* ── Page-transition progress line ──────────────────────── */
.pgline{
  position:fixed; inset-block-start:0; inset-inline-start:0; z-index:120;
  height:2px; width:0; background:var(--gold-grad);
  box-shadow:0 0 12px rgba(197,160,89,.7);
  transition:width .32s var(--ease), opacity .3s var(--ease);
  opacity:0; pointer-events:none;
}
.pgline.on{ opacity:1 }

/* ── Header actions ─────────────────────────────────────── */
.hdr-act{ display:flex; align-items:center; gap:10px; margin-inline-start:auto }
.hdr-tel{
  display:none; align-items:center; justify-content:center; gap:8px;
  min-height:44px; min-width:44px; font-size:14px; font-weight:600;
  color:var(--pearl-mute); padding:8px 12px; border-radius:var(--r-pill);
  border:1px solid var(--gold-14); transition:all var(--t-fast) var(--ease);
  direction:ltr; unicode-bidi:isolate;
}
.hdr-tel svg{ width:16px; height:16px; color:var(--gold) }
.hdr-tel:hover{ color:var(--gold-lite); border-color:var(--gold-38); background:var(--gold-04) }
@media (min-width:1024px){ .hdr-tel{ display:inline-flex } }
.hdr-cta{ display:none }
@media (min-width:768px){ .hdr-cta{ display:inline-flex } }

/* ── Breadcrumbs ────────────────────────────────────────── */
/* short crumb labels ("جدة") need horizontal padding to reach the 44px
   minimum tap width; negative inline margin keeps the visual rhythm tight */

/* ── Inner page hero ────────────────────────────────────── */

/* ── Quick conversion bar ───────────────────────────────── */

/* ── Hero stat strip ────────────────────────────────────── */
@keyframes bob{ 0%,100%{ transform:translateX(-50%) translateY(0) } 50%{ transform:translateX(-50%) translateY(7px) } }

/* ── Process steps ──────────────────────────────────────── */

/* ── Chips: active state ────────────────────────────────── */
.chip.on{ color:#06140f; background:var(--gold-grad); border-color:transparent; font-weight:700 }
.chip.on svg{ color:#06140f }

/* ── Gallery: flip reveal + column control ─────────────── */
.gal figure.flip{
  opacity:0; transform:perspective(900px) rotateY(14deg) translateY(26px) scale(.96);
  transition:opacity .8s var(--ease), transform .9s var(--ease);
  transition-delay:var(--d,0ms);
}
.gal figure.flip.in{ opacity:1; transform:perspective(900px) rotateY(0) translateY(0) scale(1) }
.gal figure[hidden]{ display:none }

/* ── CTA band extras ───────────────────────────────────── */

/* ── Mid-section CTA ───────────────────────────────────── */

/* ── Split (text + image) ──────────────────────────────── */

/* ── Ticks list ────────────────────────────────────────── */

/* ── Occasion card ─────────────────────────────────────── */

/* ── City card ─────────────────────────────────────────── */
.city{ display:block; overflow:hidden }

/* ── Family card + link mesh ───────────────────────────── */

/* ── Coverage (districts / venues) ─────────────────────── */
.cover{ display:grid; gap:28px }
@media (min-width:768px){ .cover{ grid-template-columns:1fr 1fr } }

/* ── Menu category tile ────────────────────────────────── */

/* ── Dish card ─────────────────────────────────────────── */

/* ── Price card ────────────────────────────────────────── */

/* ── Review card ───────────────────────────────────────── */

/* ── Contact cards ─────────────────────────────────────── */

/* ── Booking form ──────────────────────────────────────── */
.form{ display:grid; gap:16px }
.form input,.form select,.form textarea{
  width:100%; padding:14px 16px; border-radius:var(--r-sm);
  background:var(--onyx); border:1px solid var(--gold-14); color:var(--pearl);
  font-family:inherit; font-size:15px; transition:all var(--t-fast) var(--ease);
}
.form textarea{ resize:vertical; line-height:1.8 }
.form input::placeholder,.form textarea::placeholder{ color:var(--pearl-faint) }
.form input:focus,.form select:focus,.form textarea:focus{
  outline:none; border-color:var(--gold-38); background:var(--onyx-mid);
  box-shadow:0 0 0 3px rgba(197,160,89,.12);
}
.form select{
  appearance:none; padding-inline-end:42px;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c5a059' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-size:16px;
  background-position:left 16px center;
}

/* ── Footer additions ──────────────────────────────────── */
.ftr-mesh{ margin-block-start:38px; padding-block-start:30px; border-block-start:1px solid var(--gold-08) }
.ftr-mesh .ftr-h{ margin-block-end:14px }
.mesh{ display:flex; flex-wrap:wrap; gap:7px }
.mesh a{
  display:inline-flex; align-items:center; min-height:44px;
  font-size:12.5px; padding:6px 13px; border-radius:var(--r-pill);
  color:var(--pearl-faint); border:1px solid var(--gold-04);
  transition:all var(--t-fast) var(--ease);
}
.mesh a:hover{ color:var(--gold-lite); border-color:var(--gold-22) }

/* ── Floating dock — readable pills, never clipped ──────── */
.dock{
  position:fixed; inset-inline-end:12px;
  inset-block-end:calc(var(--nav-h) + 20px + env(safe-area-inset-bottom));
  z-index:70; display:flex; flex-direction:row-reverse; align-items:center; gap:8px;
  opacity:0; transform:translateY(16px) scale(.94); pointer-events:none;
  transition:opacity var(--t-mid) var(--ease), transform var(--t-mid) var(--ease);
}
.dock.on{ opacity:1; transform:none; pointer-events:auto }
/* retract while reading — slides out of the way, keeps a grab edge */
.dock.on.tuck{ opacity:.32; transform:translateY(6px) scale(.9) }
@media (prefers-reduced-motion:reduce){ .dock.on.tuck{ opacity:1; transform:none } }
@media (min-width:1024px){ .dock{ inset-block-end:26px } }

/* pill: icon + full label, sized by content so text can never clip */
.dock-btn{
  position:relative; display:inline-flex; align-items:center; gap:9px;
  min-height:46px; padding:0 16px 0 13px; border-radius:var(--r-pill);
  font-family:var(--f-body); font-size:14px; font-weight:700; letter-spacing:.01em;
  white-space:nowrap; text-decoration:none; color:#06140f;
  box-shadow:0 14px 34px -10px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.3);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.dock-btn svg{ width:20px; height:20px; flex:none; stroke-width:2 }
.dock-btn:hover,.dock-btn:focus-visible{ transform:translateY(-2px) scale(1.03) }
.dock-btn:active{ transform:scale(.97) }
.dock-tel{ background:var(--gold-grad) }
.dock-wa{ background:linear-gradient(150deg,#2bea75,#128c46); color:#fff }
.dock-wa svg{ color:#fff }

/* Attention halo drawn with box-shadow, not a scaled pseudo-element:
   box-shadow paints outside the box WITHOUT contributing to scrollWidth,
   so the ring can never create phantom overflow on the button. */
.dock-wa{ animation:dockPing 2.6s var(--ease) infinite }
@keyframes dockPing{
  0%{   box-shadow:0 14px 34px -10px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.3),
                    0 0 0 0 rgba(37,211,102,.55) }
  70%,
  100%{ box-shadow:0 14px 34px -10px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.3),
                    0 0 0 9px rgba(37,211,102,0) }
}
@media (prefers-reduced-motion:reduce){
  .dock-wa{ animation:none;
    box-shadow:0 14px 34px -10px rgba(0,0,0,.92), inset 0 1px 0 rgba(255,255,255,.3),
               0 0 0 2px rgba(37,211,102,.4) }
}

/* ── 404 ───────────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════
 * 3D SOCIAL / QR LANDING STAGE  —  /social
 * ══════════════════════════════════════════════════════════ */

/* floating light orbs */
@keyframes orbA{ from{ transform:translate3d(0,0,0) scale(1) } to{ transform:translate3d(-7%,9%,0) scale(1.14) } }
@keyframes orbB{ from{ transform:translate3d(0,0,0) scale(1.06) } to{ transform:translate3d(9%,-8%,0) scale(.92) } }

/* receding perspective grid floor */

/* ── 3D coin logo ─────────────────────────────────────── */
.coin{
  width:184px; height:184px; margin:0 auto 8px;
  position:relative; transform-style:preserve-3d;
}
.coin-in{
  position:absolute; inset:0; transform-style:preserve-3d;
  animation:spinCoin 15s linear infinite;
  will-change:transform;
}
.coin-shadow{
  position:absolute; inset-block-end:-26px; inset-inline:16%; height:22px;
  border-radius:50%; background:radial-gradient(ellipse at 50% 50%, rgba(197,160,89,.34), transparent 72%);
  filter:blur(9px); animation:coinShade 15s linear infinite;
}
@keyframes spinCoin{
  0%{ transform:rotateY(0deg) rotateX(9deg) }
  100%{ transform:rotateY(360deg) rotateX(9deg) }
}
@keyframes coinShade{
  0%,100%{ transform:scaleX(1); opacity:.85 }
  25%,75%{ transform:scaleX(.4); opacity:.4 }
  50%{ transform:scaleX(1); opacity:.85 }
}

/* ── headings ─────────────────────────────────────────── */

/* ── tilt primitive (JS feeds --rx / --ry / --mx / --my) ── */
.tilt{
  --rx:0deg; --ry:0deg; --mx:50%; --my:50%;
  transform-style:preserve-3d;
  transform:perspective(760px) rotateX(var(--rx)) rotateY(var(--ry));
  transition:transform .16s ease-out, box-shadow var(--t-fast) var(--ease),
             border-color var(--t-fast) var(--ease);
  will-change:transform;
}

/* ── primary contact slabs ────────────────────────────── */

/* ── QR card ──────────────────────────────────────────── */

/* ── platform deck ────────────────────────────────────── */
@keyframes tileIn{
  to{ opacity:1; transform:perspective(760px) translateY(0) rotateX(0deg) }
}

/* ── maps slab ────────────────────────────────────────── */

/* ── site links ───────────────────────────────────────── */

/* reduced motion */
@media (prefers-reduced-motion:reduce){
  .coin-in{ animation:none; transform:rotateY(-14deg) rotateX(8deg) }
  .coin-shadow{ animation:none }
  .tilt{ transition:none }
}

/* ─── 21. MINI-SITE BLOCKS (every page = the whole site, compact) ─
   Mobile-first density, modelled on the swipe-rail rhythm phones
   expect: wide lists scroll sideways (CSS scroll-snap, zero JS),
   services collapse into a 2-up tile grid, section padding tightens
   so each block is about one screen tall. Desktop keeps grids.     */

/* swipe hint — phones only */
@keyframes nudge{ 0%,100%{ transform:translateX(0) } 50%{ transform:translateX(-5px) } }

/* the rail */
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:min(72%,300px); gap:12px;
  overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1); padding:4px var(--gutter) 14px;
  scrollbar-width:none; -webkit-overflow-scrolling:touch;
}
.rail::-webkit-scrollbar{ display:none }
.rail>*{ scroll-snap-align:start; min-width:0 }
.rail-menu,.rail-occ{ grid-auto-columns:min(58%,260px) }
@media (min-width:1024px){
  .rail{ grid-auto-flow:row; grid-template-columns:repeat(4,1fr); overflow:visible;
    margin-inline:0; padding:0; gap:18px }
  .rail-works>*:nth-child(n+9){ display:none }
}

/* rail card */
.rcard{
  position:relative; display:block; margin:0; border-radius:var(--r-lg); overflow:hidden;
  aspect-ratio:4/5; background:var(--onyx-mid); border:1px solid var(--gold-14);
  box-shadow:var(--sh-md); text-decoration:none;
}
.rcard img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
@media (hover:hover){ .rcard:hover img{ transform:scale(1.06) } }
.rcard::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(to top, rgba(4,16,12,.9) 0%, rgba(4,16,12,.15) 48%, transparent 70%) }
.rcard figcaption,.rcard-cap{
  position:absolute; inset-inline:0; bottom:0; z-index:1; padding:14px 14px 15px;
  font-size:14px; font-weight:700; color:var(--pearl); line-height:1.5;
}
.rcard-cap b{ display:block; font-family:var(--f-display); font-size:17px; color:var(--pearl) }
.rcard-cap small{ display:block; margin-top:3px; font-size:12.5px; font-weight:500; color:var(--gold-lite) }

/* compact service tiles — 2-up on phones */
.tiles{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px }
@media (min-width:768px){ .tiles{ grid-template-columns:repeat(3,1fr); gap:18px } }
@media (min-width:1024px){ .tiles{ grid-template-columns:repeat(4,1fr) } }
.tile{
  display:flex; flex-direction:column; border-radius:var(--r-lg); overflow:hidden; min-width:0;
  background:linear-gradient(160deg, rgba(18,42,33,.92), rgba(8,24,18,.96));
  border:1px solid var(--gold-14); text-decoration:none; box-shadow:var(--sh-sm);
  transition:transform var(--t-mid), border-color var(--t-mid);
}
@media (hover:hover){ .tile:hover{ transform:translateY(-4px); border-color:var(--gold-38) } }
.tile-media{ display:block; aspect-ratio:4/3; overflow:hidden; background:var(--onyx-mid) }
.tile-media img{ width:100%; height:100%; object-fit:cover }
.tile-in{ display:flex; flex-direction:column; gap:3px; padding:11px 12px 13px }
.tile-in b{ font-family:var(--f-display); font-size:16px; line-height:1.45; color:var(--gold-lite) }
.tile-in small{ font-size:12.5px; line-height:1.6; color:var(--pearl-mute) }
@media (min-width:768px){ .tile-in b{ font-size:18px } .tile-in small{ font-size:13.5px } }

/* steps as a rail on phones */

/* why-us checklist */
.why{ list-style:none; margin:0; padding:0; display:grid; gap:10px }
.why li{
  display:flex; align-items:flex-start; gap:12px; padding:14px 16px; border-radius:var(--r-md, 14px);
  background:linear-gradient(100deg, rgba(18,42,33,.9), rgba(6,20,15,.94)); border:1px solid var(--gold-08);
  font-size:14.5px; line-height:1.75; color:var(--pearl-mute);
}
.why li b{ color:var(--pearl) }
.why li>span:first-child{ display:inline-flex; flex:none; margin-top:4px }
.why li svg{ width:17px; height:17px; color:var(--gold) }

/* coverage links */
.chip[aria-current="page"]{
  color:#06140f; background:var(--gold-grad); border-color:transparent; font-weight:700 }

/* footer phone */
.ftr-phone{ display:inline-block; margin-top:6px; font-family:var(--f-display); font-size:26px; font-weight:700;
  direction:ltr; unicode-bidi:isolate; background:var(--gold-text); -webkit-background-clip:text;
  background-clip:text; -webkit-text-fill-color:transparent; min-height:44px; line-height:44px }

/* packages: swipe rail on phones (3 tall cards ≈ 2.5 screens otherwise) */

/* compact footer on phones: links in two columns, city mesh collapsible */
.ftr-mesh>summary{ cursor:pointer; list-style:none; display:flex; align-items:center; justify-content:space-between;
  min-height:44px; margin:0 }
.ftr-mesh>summary::-webkit-details-marker{ display:none }
.ftr-mesh>summary::after{ content:'+'; font-size:20px; color:var(--gold); transition:transform var(--t-fast) }
.ftr-mesh[open]>summary::after{ transform:rotate(45deg) }
.ftr-mesh[open] .mesh{ margin-top:12px }
@media (min-width:1024px){ .ftr-mesh>summary::after{ display:none } }

/* ═══════════════════════════════════════════════════════════════
 * 22. QAHWAJEEN — ROYAL EMERALD & GOLD
 *  Identity distinct from black/gold competitors: deep Saudi emerald
 *  surfaces, champagne-gold ink, real photography full-bleed.
 * ═══════════════════════════════════════════════════════════════ */
.hdr.stuck{ background:rgba(4,16,12,.9) }
.card,.tile,.why li,.faq details{
  border-color:rgba(197,160,89,.2) }

/* photo cards: taller, richer scrim, gold frame */
.rcard{ border-color:rgba(197,160,89,.26); box-shadow:0 18px 40px -22px rgba(0,0,0,.9) }
.rcard::after{ background:linear-gradient(to top, rgba(3,12,9,.94) 0%, rgba(3,12,9,.35) 46%, transparent 72%) }
.rcard-cap b,.rcard figcaption{ text-shadow:0 2px 10px rgba(0,0,0,.6) }
.tile{ box-shadow:0 16px 34px -22px rgba(0,0,0,.9) }
.tile-media{ aspect-ratio:1/1 }

/* contact band: emerald velvet */
.cta-band{ background:radial-gradient(120% 90% at 50% 0%, #17402f 0%, #0b2219 55%, #06140f 100%) }

/* ═══ BOTTOM CONTACT BAR — no page navigation ═══
   [ واتساب ]  ( اتصل الآن )  [ عرض سعر ] — the burger stays in the header */
.bnav{ grid-template-columns:1fr 1fr 1fr }
.bnav::before{ -webkit-mask:radial-gradient(40px 34px at 50% -2px, transparent 99%, #000 100%);
  mask:radial-gradient(40px 34px at 50% -2px, transparent 99%, #000 100%) }
.bnav::after{ -webkit-mask:radial-gradient(40px 34px at 50% -2px, transparent 99%, #000 100%);
  mask:radial-gradient(40px 34px at 50% -2px, transparent 99%, #000 100%) }
.bnav a{ font-size:12px; font-weight:700; color:var(--pearl-soft) }
.bnav .b-wa span{ color:#3ddc84 }
.bnav .b-quote span{ color:var(--gold-lite) }
.bnav .center span{ width:62px; height:62px; top:-27px; border-color:#071510 }
.bnav .center em{ margin-top:38px; font-size:12px; color:var(--gold-lite) }
@media (max-width:1023px){ .dock{ display:none } }

/* ═══ 23. HOME FIRST SCREEN — "the first 5 seconds" ═══════════════
   Everything a visitor needs is painted on the FIRST frame, no fades:
   real team photo full-bleed → frosted glass card (logo, name, H1,
   one line) → two big buttons (call / WhatsApp) → the number.
   Fits a 390×844 phone above the bottom bar.                        */
.hero-lux{ min-height:100svh; padding:calc(var(--hdr-h) + 14px) 0 calc(var(--nav-h) + 22px);
  display:flex; align-items:center }
@media (min-width:1024px){ .hero-lux{ min-height:min(100svh,900px); padding-bottom:56px } }
.hero-lux .hero-bg img{ object-position:center 30% }
.hero-lux .hero-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(3,12,9,.55) 0%, rgba(3,12,9,.25) 30%, rgba(3,12,9,.55) 62%, rgba(3,12,9,.94) 100%) }
.hero-lux .hero-in{ z-index:2; display:grid; gap:14px; justify-items:center; max-width:560px }
.glass{
  position:relative; width:100%; text-align:center;
  padding:22px 18px 18px; border-radius:24px;
  background:linear-gradient(160deg, rgba(10,30,23,.58), rgba(4,16,12,.42));
  border:1px solid rgba(226,198,142,.34);
  backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2);
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.08);
}
.glass-kick{ display:flex; align-items:center; justify-content:center; gap:10px;
  font-size:12px; letter-spacing:.06em; color:var(--gold-lite); margin:0 }
.glass-kick::before,.glass-kick::after{ content:''; width:26px; height:1px; background:rgba(226,198,142,.5) }
.glass-name{ margin:2px 0 0; font-family:var(--f-display); font-weight:700; line-height:1.25;
  font-size:clamp(40px,12vw,60px);
  background:linear-gradient(120deg,#e2c68e 0%,#f4e0b0 40%,#c5a059 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#e2c68e }
.glass-latin{ margin:2px 0 0; font-size:10px; letter-spacing:.3em; color:rgba(246,240,227,.72) }
.glass-h1{ margin:12px 0 0; font-size:clamp(21px,5.6vw,30px); line-height:1.45; color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.5); animation:none }
.glass-lead{ margin:8px auto 0; max-width:40ch; font-size:14.5px; line-height:1.8; color:rgba(246,240,227,.88) }
.glass-dots{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px 14px; margin:12px 0 0; padding:0 }
.glass-dots li{ display:flex; align-items:center; gap:6px; font-size:12.5px; color:var(--gold-lite) }
.glass-dots li::before{ content:''; width:5px; height:5px; border-radius:50%; background:var(--gold) }
.hero-cta{ display:grid; grid-template-columns:1fr 1fr; gap:10px; width:100% }
.hero-cta .btn{ min-height:56px; padding:0 12px }
.hero-cta .btn-line{ background:rgba(4,16,12,.55); color:#fff; border-color:rgba(226,198,142,.5) }
/* header sits over the photo on load, solidifies on scroll */
.hdr{ background:linear-gradient(180deg, rgba(3,12,9,.7), transparent) }
/* photo visible, not blurred: it owns the top half, fades into emerald,
   the glass card overlaps its lower edge */
.hero-lux{ align-items:flex-end }
.hero-lux .hero-bg{ bottom:auto; height:min(56svh,520px);
  -webkit-mask:linear-gradient(180deg,#000 62%,transparent 100%); mask:linear-gradient(180deg,#000 62%,transparent 100%) }
.hero-lux .hero-bg img{ object-position:center 40% }
.hero-lux .hero-veil{ background:linear-gradient(180deg, rgba(3,12,9,.5) 0%, rgba(3,12,9,0) 22%, rgba(3,12,9,0) 38%, rgba(4,16,12,.9) 60%, var(--noir) 78%) }
.glass{ backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); padding:16px 16px 14px;
  background:linear-gradient(160deg, rgba(12,34,26,.82), rgba(4,16,12,.78)) }
.glass-name{ font-size:clamp(38px,11vw,56px) }
@media (min-width:1024px){ .hero-lux .hero-bg{ height:100%; -webkit-mask:none; mask:none }
  .hero-lux{ align-items:center } .hero-lux .hero-veil{ background:linear-gradient(90deg, rgba(3,12,9,.2), rgba(3,12,9,.75)) } }
.hero-lux .hero-bg img{ filter:brightness(1.12) saturate(1.05) }
.hero-lux .hero-veil{ background:linear-gradient(180deg, rgba(3,12,9,.35) 0%, rgba(3,12,9,0) 16%, rgba(3,12,9,0) 42%, rgba(4,16,12,.9) 62%, var(--noir) 78%) }

/* ═══ 24. INNER-PAGE FIRST SCREEN — same pattern as home ═══ */
@media (min-width:1024px){
  .hero-lux .hero-bg{ top:0; bottom:0; height:auto; -webkit-mask:none; mask:none }
  .hero-lux .hero-veil{ background:radial-gradient(70% 80% at 50% 50%, rgba(3,12,9,.55), rgba(3,12,9,.3) 70%),
    linear-gradient(180deg, rgba(3,12,9,.5), transparent 20%, transparent 80%, var(--noir)) }
}

/* ═══ 25. HOME — ART-DIRECTED FIRST SCREEN ════════════════════════
   One composed poster, not a news layout:
   full-bleed real photo, cinematic emerald grade + vignette,
   a single centred frosted card (wordmark → hairline → latin → H1 →
   one line → three dots), two buttons. Nothing else above the fold. */
.hero-art{ min-height:100svh; display:flex; align-items:center;
  padding:calc(var(--hdr-h) + 18px) 0 calc(var(--nav-h) + 26px) }
.hero-art .hero-bg{ position:absolute; inset:0; height:auto; -webkit-mask:none; mask:none; border-radius:0 }
.hero-art .hero-bg img{ object-position:center 35%; filter:saturate(.9) contrast(1.05) brightness(.95);
  transform:scale(1.04); animation:artDrift 18s var(--ease) infinite alternate }
@keyframes artDrift{ to{ transform:scale(1.12) translate3d(-1.5%,-1%,0) } }
.hero-art .hero-veil{ position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    radial-gradient(80% 60% at 50% 48%, rgba(3,12,9,.25), rgba(3,12,9,.78) 100%),
    linear-gradient(180deg, rgba(3,12,9,.75) 0%, rgba(3,12,9,.2) 26%, rgba(3,12,9,.35) 60%, rgba(3,12,9,.96) 100%) }
.hero-art .hero-in{ z-index:2; display:grid; gap:16px; max-width:460px; width:calc(100% - var(--gutter)*2);
  margin-inline:auto; padding:0 }
.hero-art .glass{ padding:24px 20px 20px; border-radius:26px; text-align:center;
  background:linear-gradient(165deg, rgba(14,38,29,.52), rgba(4,16,12,.38));
  border:1px solid rgba(226,198,142,.38);
  backdrop-filter:blur(16px) saturate(1.15); -webkit-backdrop-filter:blur(16px) saturate(1.15);
  box-shadow:0 30px 70px -30px rgba(0,0,0,.9), inset 0 1px 0 rgba(255,255,255,.1) }
.hero-art .glass-kick{ font-family:var(--f-body); font-size:11px; letter-spacing:.32em; color:var(--gold-lite) }
.hero-art .glass-kick::before,.hero-art .glass-kick::after{ width:28px; background:rgba(226,198,142,.55) }
.hero-art .glass-name{ font-family:'Amiri',serif; font-size:clamp(54px,16vw,78px); line-height:1.2; margin-top:6px;
  background:linear-gradient(180deg,#f6e6bf 0%,#e2c68e 45%,#b88d45 100%);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  filter:drop-shadow(0 4px 18px rgba(0,0,0,.45)) }
.glass-bar{ display:block; width:64px; height:2px; margin:4px auto 10px; border-radius:2px;
  background:linear-gradient(90deg,transparent,#e2c68e,transparent) }
.hero-art .glass-latin{ font-size:13px; letter-spacing:.42em; color:#f4ead2; margin:0 }
.glass-sub{ display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 0;
  font-size:10px; letter-spacing:.34em; color:var(--gold-lite) }
.glass-sub::before,.glass-sub::after{ content:''; width:22px; height:1px; background:rgba(226,198,142,.5) }
.hero-art .glass-h1{ font-family:'Amiri',serif; margin:16px 0 0; font-size:clamp(23px,6.4vw,30px); line-height:1.5;
  color:#f2dfb3; text-shadow:0 2px 16px rgba(0,0,0,.55) }
.hero-art .glass-lead{ margin:8px auto 0; max-width:32ch; font-size:14.5px; line-height:1.85; color:rgba(246,240,227,.9) }
.hero-art .glass-dots{ margin-top:14px; gap:4px 18px }
.hero-art .glass-dots li{ font-size:13px; color:#ead6a6 }
.hero-art .hero-cta{ gap:12px }
.hero-art .hero-cta .btn{ min-height:58px; border-radius:999px; font-size:16.5px }
.hero-art .hero-cta .btn-line{ background:rgba(3,12,9,.5); border-color:rgba(226,198,142,.55); color:#f4ead2;
  backdrop-filter:blur(8px) }
.hero-art .hero-cta .btn-line svg{ color:#3ddc84 }
@media (min-width:1024px){
  .hero-art{ min-height:min(100svh,920px); padding-bottom:60px }
  .hero-art .hero-in{ max-width:520px }
}
@media (prefers-reduced-motion:reduce){ .hero-art .hero-bg img{ animation:none } }
/* header: transparent over the poster, solid once scrolled */
.hdr:not(.stuck){ background:linear-gradient(180deg, rgba(3,12,9,.65), transparent); border-bottom-color:transparent }
.hero-art .hero-bg img{ filter:saturate(.95) contrast(1.05) brightness(1.08) }
.hero-art .hero-veil{ background:
    radial-gradient(85% 55% at 50% 50%, rgba(3,12,9,.15), rgba(3,12,9,.62) 100%),
    linear-gradient(180deg, rgba(3,12,9,.6) 0%, rgba(3,12,9,.05) 22%, rgba(3,12,9,.2) 62%, rgba(3,12,9,.95) 100%) }
/* inner pages get the same poster treatment */

/* ═══ 26. ONE-PAGE SYSTEM ══════════════════════════════════════════ */
.op{ padding-block:clamp(46px,8vw,92px); position:relative }
.op-alt{ background:linear-gradient(180deg, rgba(14,36,28,.6), rgba(4,16,12,0) 70%) }
.op-head{ text-align:center; margin-bottom:clamp(20px,3.6vw,34px) }
.op-k{ display:inline-flex; align-items:center; gap:10px; margin:0 0 10px; font-size:12px; font-weight:700;
  letter-spacing:.08em; color:var(--gold-lite) }
.op-k::before,.op-k::after{ content:'✦'; font-size:9px; color:var(--gold) }
.op-head h2{ font-family:'Amiri',serif; font-size:clamp(25px,6.6vw,40px); line-height:1.45; color:var(--pearl) }
.op-rule{ display:block; width:58px; height:2px; margin:12px auto 0; border-radius:2px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent) }
.op-sub{ max-width:46ch; margin:12px auto 0; font-size:14.5px; line-height:1.85; color:var(--pearl-mute) }
.op-more{ display:flex; justify-content:center; margin-top:22px }
.op-more .btn{ min-height:48px; padding:0 26px; border-radius:999px; font-size:15px }

/* rail cards: photo + caption over a gradient, consistent heights */
.rail{ grid-auto-columns:min(66%,280px); gap:12px }
.rail-occ,.rail-menu{ grid-auto-columns:min(46%,220px) }
.rcard{ aspect-ratio:3/4; border-radius:20px; border:1px solid rgba(226,198,142,.24); background:var(--onyx-mid) }
.rail-works .rcard{ aspect-ratio:4/5 }
.rail-crew .rcard{ aspect-ratio:3/4.4 }
.rcard img{ width:100%; height:100%; object-fit:cover }
.rcard::after{ background:linear-gradient(to top, rgba(3,12,9,.92) 0%, rgba(3,12,9,.25) 42%, transparent 64%) }
.rcard-cap,.rcard figcaption{ padding:12px 14px 14px }
.rcard-cap b{ font-family:var(--f-body); font-size:15px; font-weight:700; color:#fff }
.rcard-cap small{ color:var(--gold-lite); font-size:12.5px }
@media (min-width:1024px){
  .rail{ grid-template-columns:repeat(4,1fr) }
  .rail-occ{ grid-template-columns:repeat(6,1fr) }
  .rail-menu{ grid-template-columns:repeat(5,1fr) }
  .rail-menu>*:nth-child(n+11){ display:none }
  .rail-crew{ grid-template-columns:repeat(6,1fr) }
}

/* service tiles: photo + one title, no paragraph */
.tiles{ gap:10px }
.tile{ border-radius:18px; border:1px solid rgba(226,198,142,.2) }
.tile-media{ aspect-ratio:1/1 }
.tile-in{ padding:11px 12px 13px; text-align:center }
.tile-in b{ font-family:var(--f-body); font-size:15px; color:var(--pearl) }

/* roles: big photo cards */
.roles{ display:grid; gap:14px }
@media (min-width:768px){ .roles{ grid-template-columns:repeat(3,1fr); gap:18px } }
.role{ border-radius:22px; overflow:hidden; background:linear-gradient(165deg,#10261e,#071510);
  border:1px solid rgba(226,198,142,.22) }
.role-img{ display:block; aspect-ratio:16/10; overflow:hidden }
.role-img img{ width:100%; height:100%; object-fit:cover }
.role-in{ padding:16px 18px 20px }
.role-in h3{ font-family:'Amiri',serif; font-size:24px; color:var(--gold-lite); margin-bottom:6px }
.role-in p{ font-size:14.5px; line-height:1.85; color:var(--pearl-mute) }

/* why: one-line checks in two columns on wide screens */
.why-list{ list-style:none; padding:0; margin:0; display:grid; gap:10px }
@media (min-width:768px){ .why-list{ grid-template-columns:1fr 1fr } }
.why-list li{ display:flex; align-items:center; gap:12px; padding:14px 16px; border-radius:16px;
  background:rgba(18,42,33,.55); border:1px solid rgba(226,198,142,.16); font-size:14.5px; color:var(--pearl-soft) }
.why-list li>span{ display:grid; place-items:center; flex:none; width:28px; height:28px; border-radius:50%;
  background:rgba(197,160,89,.14); color:var(--gold) }
.why-list svg{ width:15px; height:15px }

/* focus block (each URL's own content) */
.op-focus{ padding-top:clamp(30px,6vw,64px) }
.focus{ display:grid; gap:20px; align-items:center }
@media (min-width:1024px){ .focus{ grid-template-columns:1.1fr .9fr; gap:48px } }
.focus-txt{ text-align:center }
.focus-txt h2{ font-family:'Amiri',serif; font-size:clamp(25px,6.4vw,38px); line-height:1.45 }
.focus-body{ margin:14px auto 18px; max-width:62ch; font-size:15px; line-height:1.95; color:var(--pearl-mute) }
.focus-txt .why-list{ text-align:start }
@media (min-width:1024px){ .focus-txt{ text-align:start } .focus-txt .op-rule{ margin-inline:0 } .focus-body{ margin-inline:0 } }
.focus-img{ display:block; border-radius:22px; overflow:hidden; aspect-ratio:4/3; border:1px solid rgba(226,198,142,.24) }
.focus-img img{ width:100%; height:100%; object-fit:cover }
.pgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px }
@media (min-width:768px){ .pgrid{ grid-template-columns:repeat(3,1fr); gap:14px } }
@media (min-width:1024px){ .pgrid{ grid-template-columns:repeat(4,1fr) } }

/* contact band */
.op-contact .cta-band{ padding:clamp(30px,6vw,56px) 20px; text-align:center }
.op-contact h2{ font-family:'Amiri',serif; font-size:clamp(24px,6.4vw,38px); line-height:1.45; color:var(--pearl) }
.op-contact .hero-cta{ max-width:460px; margin:20px auto 0 }
.op-contact .cta-phone{ margin-top:14px }
.chips .chip{ min-height:44px }

/* ═══ 27. SIDE DRAWER (slides from the right, RTL start) ═════════ */
.sheet.drawer{
  inset:0 0 0 auto; bottom:auto; height:100dvh; max-height:none; width:min(84vw,340px);
  border-radius:0; border:0; border-inline-start:1px solid rgba(226,198,142,.22);
  padding:calc(14px + env(safe-area-inset-top)) 18px calc(20px + env(safe-area-inset-bottom));
  background:linear-gradient(180deg,#0d2019 0%,#06140f 100%);
  transform:translateX(102%); display:flex; flex-direction:column; gap:12px;
  box-shadow:-30px 0 70px rgba(0,0,0,.6)
}
.sheet.drawer.open{ transform:translateX(0) }
@media (min-width:1024px){ .sheet.drawer,.sheet-bd{ display:flex } .sheet-bd{ display:block } }
.dr-top{ display:flex; align-items:center; justify-content:space-between; padding-bottom:14px;
  border-bottom:1px solid rgba(226,198,142,.14) }
.dr-top .sheet-id{ gap:10px }
.dr-top .sheet-id img{ width:40px; height:40px; border-radius:50% }
.dr-top .sheet-id b{ display:block; font-family:'Amiri',serif; font-size:20px; color:var(--gold-lite); line-height:1.2 }
.dr-top .sheet-id small{ font-size:9.5px; letter-spacing:.24em; color:var(--pearl-faint) }
.dr-x{ display:grid; place-items:center; width:44px; height:44px; border-radius:14px; color:var(--gold-lite);
  border:1px solid rgba(226,198,142,.22); background:rgba(197,160,89,.06) }
.dr-x svg{ width:20px; height:20px }
.dr-call,.dr-wa{ display:flex; align-items:center; gap:14px; min-height:68px; padding:12px 16px; border-radius:18px }
.dr-call{ background:var(--gold-grad); color:#06140f }
.dr-wa{ background:rgba(37,211,102,.1); border:1px solid rgba(37,211,102,.32); color:#e9fff1 }
.dr-call>span:first-child,.dr-wa>span:first-child{ display:grid; place-items:center; width:42px; height:42px; border-radius:50%; flex:none }
.dr-call>span:first-child{ background:rgba(6,20,15,.12) }
.dr-wa>span:first-child{ background:#1fae5b; color:#fff }
.dr-call svg,.dr-wa svg{ width:20px; height:20px }
.dr-call b,.dr-wa b{ display:block; font-size:16px }
.dr-call small,.dr-wa small{ font-size:13px; opacity:.85 }
.dr-list{ display:grid; gap:4px; margin-top:8px }
.dr-list a{ display:flex; align-items:center; gap:12px; min-height:52px; padding:0 12px; border-radius:14px;
  font-size:15.5px; font-weight:600; color:var(--pearl-soft) }
.dr-list a span{ display:grid; place-items:center; color:var(--gold) }
.dr-list svg{ width:19px; height:19px }
.dr-list a[aria-current="page"]{ background:rgba(197,160,89,.1); color:var(--gold-lite) }
.dr-foot{ margin-top:auto; text-align:center; font-size:12.5px; color:var(--pearl-faint) }
/* the header burger is the only menu, on every screen size */
.burger{ display:grid !important }
.nav{ display:none !important }

/* ═══ 28. FOOTER — minimal ══════════════════════════════════════ */
.ftr{ padding-top:40px }
.ftr-mini{ display:grid; justify-items:center; gap:4px; text-align:center }
.ftr-mini img{ width:56px; height:56px; border-radius:50%; margin-bottom:6px }
.ftr-mini b{ font-family:'Amiri',serif; font-size:24px; color:var(--gold-lite) }
.ftr-mini small{ font-size:10px; letter-spacing:.22em; color:var(--pearl-faint) }
.ftr-mini .ftr-phone{ margin-top:8px }
.ftr-mesh{ text-align:center }
.ftr-mesh>summary{ justify-content:center; gap:10px }
.ftr-mesh .mesh{ justify-content:center }
@media (min-width:1024px){ .ftr-mesh>summary::after{ display:inline } }

/* ═══ 29. BOTTOM BAR — refined ═══════════════════════════════════
   Analysis: (1) labels were 12px grey — now 12.5px cream, bold;
   (2) the centre call disc sat on a hard gold line — the line now
   fades at the edges; (3) "عرض سعر" duplicated WhatsApp with no
   cue — it now carries a gold "مجاني" chip; (4) the bar hides while
   the first screen is in view, so the hero's own buttons lead.     */
.bnav a{ font-size:12.5px; color:#efe4cb }
.bnav .center em{ font-weight:800 }
.bnav .b-quote{ position:relative }
.bnav .b-quote::before{ content:'مجاني'; position:absolute; top:6px; inset-inline-start:calc(50% + 6px);
  padding:1px 6px; border-radius:999px; font-size:9.5px; font-weight:800; color:#06140f; background:var(--gold-grad) }
.bnav{ transition:transform .35s var(--ease) }
.bnav.hide{ transform:translateY(110%) }
.bnav.hide{ transform:translateY(calc(100% + 48px)) }
.bnav .b-quote::before{ top:2px; inset-inline-start:calc(50% + 12px) }

/* ═══════════════════════════════════════════════════════════════════
 * 30. QAHWAJEEN v3 — EDITORIAL CINEMATIC ONE-PAGE
 *  Identity: deep emerald night + champagne gold, Amiri display set
 *  large, editorial numbering (01 / 02 …), alternating image/text
 *  rows, moving gold marquee and film-strip. All motion is
 *  transform/opacity only and disabled under reduced-motion.
 * ═══════════════════════════════════════════════════════════════════ */
:root{ --em:#04100c; --em2:#0a1d16; --em3:#10271f; --gl:#e2c68e; --gd:#c5a059; --ink:#f4ead2 }
.sprog{ position:fixed; inset-inline:0; top:0; height:2px; z-index:120; transform-origin:right; transform:scaleX(0);
  background:linear-gradient(90deg,#a67c37,#e2c68e,#a67c37); pointer-events:none }

/* reveal system */
.rv{ opacity:0; transform:translate3d(0,34px,0); transition:opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay:calc(var(--i,0) * 90ms) }
.rv.in{ opacity:1; transform:none }
.rv-clip{ clip-path:inset(12% 8% 12% 8% round 26px); transform:scale(1.06); transition:clip-path 1.2s var(--ease), transform 1.4s var(--ease), opacity .8s }
.rv-clip.in{ clip-path:inset(0 0 0 0 round 26px); transform:none }

/* ── FIRST SCREEN ── */
.hx{ position:relative; min-height:100svh; display:flex; align-items:flex-end; overflow:hidden; isolation:isolate;
  padding:calc(var(--hdr-h) + 20px) 0 calc(38px + env(safe-area-inset-bottom)) }
.hx-bg{ position:absolute; inset:-4% 0 0; z-index:-2; will-change:transform }
.hx-bg img,.hx-bg picture{ width:100%; height:100%; object-fit:cover; display:block }
.hx-bg img{ object-position:center 30%; animation:hxZoom 2.4s var(--ease) both }
@keyframes hxZoom{ from{ transform:scale(1.14); filter:brightness(.6) } to{ transform:scale(1); filter:none } }
.hx-veil{ position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(180deg, rgba(4,16,12,.72) 0%, rgba(4,16,12,0) 22%, rgba(4,16,12,0) 40%, rgba(4,16,12,.82) 70%, var(--em) 100%),
    radial-gradient(120% 70% at 50% 100%, rgba(197,160,89,.14), transparent 60%) }
.hx-side{ position:absolute; inset-inline-start:14px; top:50%; writing-mode:vertical-rl; transform:translateY(-50%) rotate(180deg);
  font-size:10px; letter-spacing:.5em; color:rgba(226,198,142,.55); margin:0 }
.hx-in{ position:relative; width:100% }
.hx-kick{ display:flex; align-items:center; gap:12px; margin:0 0 14px; font-size:12px; letter-spacing:.32em; color:var(--gl);
  animation:hxUp .9s var(--ease) .3s both }
.hx-kick i{ width:36px; height:1px; background:var(--gl) }
.hx-h1{ font-family:'Amiri',serif; font-weight:700; font-size:clamp(44px,13vw,104px); line-height:1.12; color:var(--ink);
  margin:0; text-shadow:0 6px 40px rgba(0,0,0,.5) }
.hx-h1 span{ display:inline-block; animation:hxWord 1s var(--ease) both; animation-delay:calc(.45s + var(--i) * .12s) }
@keyframes hxWord{ from{ transform:translate3d(0,40%,0); clip-path:inset(0 0 100% 0) } to{ transform:none; clip-path:inset(0 0 -20% 0) } }
.hx-home .hx-h1 span:nth-child(1){ background:linear-gradient(180deg,#f6e6bf,#c5a059); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent }
.hx-lead{ max-width:36ch; margin:16px 0 26px; font-size:clamp(15.5px,2.4vw,19px); line-height:1.85; color:rgba(244,234,210,.86);
  animation:hxUp .9s var(--ease) .9s both }
.hx-cta{ display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:460px; animation:hxUp .9s var(--ease) 1.05s both }
.hx-cta .btn{ min-height:58px; border-radius:999px; font-size:16.5px }
@keyframes hxUp{ from{ opacity:0; transform:translate3d(0,20px,0) } to{ opacity:1; transform:none } }
.btn-glass{ color:var(--ink); background:rgba(244,234,210,.08); border:1px solid rgba(226,198,142,.45);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px) }
.btn-glass svg{ color:#3ddc84 }
.hx-down{ position:absolute; bottom:18px; inset-inline-end:22px; width:26px; height:44px; border-radius:20px;
  border:1px solid rgba(226,198,142,.5); display:none }
.hx-down span{ position:absolute; left:50%; top:8px; width:3px; height:8px; margin-left:-1.5px; border-radius:2px; background:var(--gl);
  animation:hxDot 1.8s var(--ease) infinite }
@keyframes hxDot{ 0%{ transform:translateY(0); opacity:1 } 80%,100%{ transform:translateY(16px); opacity:0 } }
@media (min-width:768px){ .hx-down{ display:block } .hx{ align-items:center } }
@media (min-width:1024px){ .hx-in{ padding-inline-start:40px } }

/* ── marquee ── */
.mq{ overflow:hidden; border-block:1px solid rgba(226,198,142,.18); background:linear-gradient(90deg,#071510,#0d2019,#071510) }
.mq-track{ display:flex; width:max-content; animation:mq 34s linear infinite }
.mq-row{ display:flex; flex:none }
.mq-row span{ display:flex; align-items:center; gap:22px; padding:16px 11px; font-family:'Amiri',serif; font-size:20px; color:var(--gl); white-space:nowrap }
.mq-row i{ font-style:normal; font-size:11px; color:var(--gd) }
@keyframes mq{ to{ transform:translateX(50%) } }

/* ── sections ── */
.sx{ padding-block:clamp(64px,11vw,128px); position:relative }
.sx-alt{ background:linear-gradient(180deg, var(--em2), var(--em) 80%) }
.sx-head{ text-align:center; margin-bottom:clamp(30px,5vw,56px) }
.sx-start{ text-align:start }
.sx-k{ display:inline-flex; align-items:center; gap:10px; margin:0 0 12px; font-size:12px; font-weight:700; letter-spacing:.22em; color:var(--gd) }
.sx-k::before{ content:''; width:24px; height:1px; background:currentColor }
.sx-head h2,.focx-txt h2,.endx h2{ font-family:'Amiri',serif; font-size:clamp(30px,8vw,58px); line-height:1.3; color:var(--ink); margin:0 }
.sx-sub{ max-width:48ch; margin:14px auto 0; font-size:15.5px; line-height:1.9; color:rgba(244,234,210,.7) }
.sx-more{ display:flex; justify-content:center; margin-top:28px }
.sx-more .btn{ border-radius:999px; min-height:52px; padding:0 30px }
.sx-more .btn svg{ transition:transform .3s }
.sx-more .btn[aria-expanded="true"] svg{ transform:rotate(180deg) }

/* statement */
.sx-statement{ padding-block:clamp(56px,10vw,110px) }
.stmt{ font-family:'Amiri',serif; font-size:clamp(24px,6.4vw,44px); line-height:1.65; color:var(--ink); text-align:center; margin:0 }
.stmt em{ font-style:normal; color:var(--gl) }

/* services — editorial rows */
.svx{ display:grid; gap:clamp(48px,9vw,110px) }
.svx-row{ display:grid; gap:22px; align-items:center }
@media (min-width:900px){ .svx-row{ grid-template-columns:1.05fr .95fr; gap:64px } .svx-row.flip .svx-media{ order:2 } }
.svx-media{ position:relative; border-radius:26px; overflow:hidden; aspect-ratio:4/3.4; background:var(--em3) }
.svx-media img{ width:100%; height:100%; object-fit:cover }
.svx-n{ position:absolute; inset-block-end:14px; inset-inline-end:16px; font-family:'Amiri',serif; font-size:56px; line-height:1;
  color:rgba(244,234,210,.92); text-shadow:0 4px 24px rgba(0,0,0,.6) }
.svx-txt h3{ font-family:'Amiri',serif; font-size:clamp(30px,7.6vw,46px); line-height:1.25; color:var(--ink); margin:0 0 8px }
.svx-short{ font-size:16px; line-height:1.85; color:rgba(244,234,210,.78); margin:0 0 16px }
.svx-pts{ list-style:none; padding:0; margin:0 0 18px; display:grid; grid-template-columns:1fr 1fr; gap:10px 14px }
.svx-pts li{ position:relative; padding-inline-start:18px; font-size:14px; line-height:1.6; color:var(--pearl-soft) }
.svx-pts li::before{ content:''; position:absolute; inset-inline-start:0; top:.62em; width:7px; height:7px; rotate:45deg; background:var(--gd) }
.svx-more{ border-top:1px solid rgba(226,198,142,.16); border-bottom:1px solid rgba(226,198,142,.16); margin-bottom:18px }
.svx-more summary{ display:flex; align-items:center; justify-content:space-between; min-height:52px; cursor:pointer; list-style:none;
  font-weight:700; color:var(--gl) }
.svx-more summary::-webkit-details-marker{ display:none }
.svx-more summary svg{ width:16px; height:16px; transition:transform .35s var(--ease) }
.svx-more[open] summary svg{ transform:rotate(180deg) }
.svx-more p{ font-size:15px; line-height:1.95; color:rgba(244,234,210,.76); margin:0 0 14px }
.svx-inc{ display:grid; gap:10px; padding-bottom:16px }
@media (min-width:600px){ .svx-inc{ grid-template-columns:1fr 1fr } }
.svx-inc div{ padding:14px 16px; border-radius:16px; background:rgba(16,39,31,.7); border:1px solid rgba(226,198,142,.14) }
.svx-inc b{ display:block; color:var(--ink); font-size:14.5px; margin-bottom:4px }
.svx-inc span{ font-size:13.5px; line-height:1.75; color:var(--pearl-mute) }
.svx-act{ display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px }
.svx-act .btn{ border-radius:999px; min-height:52px }
.svx-act .lnk{ margin:0; min-height:44px }

/* occasions — mosaic */
.occx{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (min-width:900px){ .occx{ grid-template-columns:repeat(3,1fr); gap:16px } }
.occx-card{ position:relative; display:block; border-radius:22px; overflow:hidden; aspect-ratio:3/4; isolation:isolate }
.occx-card:nth-child(1){ grid-column:span 2; aspect-ratio:16/10 }
@media (min-width:900px){ .occx-card:nth-child(1){ grid-column:span 1; grid-row:span 2; aspect-ratio:auto } }
.occx-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 1.2s var(--ease) }
.occx-card::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(to top, rgba(4,16,12,.92), transparent 58%) }
@media (hover:hover){ .occx-card:hover img{ transform:scale(1.07) } }
.occx-cap{ position:absolute; inset-inline:0; bottom:0; padding:16px }
.occx-cap b{ display:block; font-family:'Amiri',serif; font-size:clamp(20px,5vw,28px); color:var(--ink); line-height:1.3 }
.occx-cap small{ font-size:12.5px; color:var(--gl) }

/* crew film-strip */
.film{ overflow:hidden; padding-block:6px; -webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent) }
.film-track{ display:flex; gap:14px; width:max-content; animation:film 48s linear infinite }
.film:hover .film-track{ animation-play-state:paused }
@keyframes film{ to{ transform:translateX(calc(50% + 7px)) } }
.film-card{ position:relative; flex:none; width:min(62vw,300px); aspect-ratio:3/4.3; margin:0; border-radius:24px; overflow:hidden;
  border:1px solid rgba(226,198,142,.22) }
.film-card img{ width:100%; height:100%; object-fit:cover }
.film-card figcaption{ position:absolute; inset-inline:0; bottom:0; padding:40px 16px 16px; background:linear-gradient(to top, rgba(4,16,12,.94), transparent) }
.film-card b{ display:block; font-family:'Amiri',serif; font-size:22px; color:var(--ink) }
.film-card small{ font-size:12.5px; color:var(--gl) }

/* roles */
.rolx{ display:grid; gap:16px }
@media (min-width:900px){ .rolx{ grid-template-columns:repeat(3,1fr); gap:22px } }
.rolx-card{ position:relative; padding:0 0 24px; border-radius:26px; overflow:hidden; background:linear-gradient(180deg,var(--em3),var(--em2));
  border:1px solid rgba(226,198,142,.18) }
.rolx-img{ display:block; aspect-ratio:16/11; overflow:hidden }
.rolx-img img{ width:100%; height:100%; object-fit:cover }
.rolx-n{ position:absolute; top:14px; inset-inline-start:16px; padding:6px 12px; border-radius:999px; font-size:12px; letter-spacing:.14em;
  color:var(--em); background:var(--gold-grad) }
.rolx-card h3{ font-family:'Amiri',serif; font-size:30px; color:var(--gl); margin:18px 20px 6px }
.rolx-card p{ margin:0 20px; font-size:15px; line-height:1.9; color:var(--pearl-mute) }

/* menu tabs */
.tabs{ display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; margin:0 calc(var(--gutter) * -1) 22px; padding:4px var(--gutter);
  scroll-snap-type:x proximity }
.tabs::-webkit-scrollbar{ display:none }
@media (min-width:1024px){ .tabs{ flex-wrap:wrap; justify-content:center; overflow:visible } }
.tab{ flex:none; min-height:46px; padding:0 18px; border-radius:999px; font-size:14.5px; font-weight:700; white-space:nowrap;
  color:var(--pearl-soft); background:rgba(16,39,31,.7); border:1px solid rgba(226,198,142,.2); scroll-snap-align:center;
  transition:background .3s, color .3s }
.tab[aria-selected="true"]{ color:var(--em); background:var(--gold-grad); border-color:transparent }
.tabp{ animation:hxUp .6s var(--ease) both }
.tabp-blurb{ text-align:center; max-width:56ch; margin:0 auto 20px; font-size:15px; line-height:1.9; color:var(--pearl-mute) }
.dishx{ display:grid; grid-template-columns:1fr 1fr; gap:10px }
@media (min-width:768px){ .dishx{ grid-template-columns:repeat(3,1fr); gap:14px } }
@media (min-width:1024px){ .dishx{ grid-template-columns:repeat(4,1fr) } }
.dishx-card{ margin:0; border-radius:20px; overflow:hidden; background:var(--em3); border:1px solid rgba(226,198,142,.14) }
.dishx-card img{ width:100%; aspect-ratio:1; object-fit:cover; display:block }
.dishx-card figcaption{ padding:11px 12px 13px }
.dishx-card b{ display:block; font-size:14.5px; color:var(--ink); line-height:1.5 }
.dishx-card small{ display:block; margin-top:2px; font-size:12.5px; line-height:1.6; color:var(--pearl-mute) }

/* gallery */
.galx{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:150px; gap:8px; grid-auto-flow:dense }
@media (min-width:768px){ .galx{ grid-template-columns:repeat(4,1fr); grid-auto-rows:210px; gap:12px } }
.galx-it{ position:relative; padding:0; border-radius:18px; overflow:hidden; cursor:zoom-in; background:var(--em3) }
.galx-it.tall{ grid-row:span 2 }
.galx-it img{ width:100%; height:100%; object-fit:cover; transition:transform 1s var(--ease) }
@media (hover:hover){ .galx-it:hover img{ transform:scale(1.07) } }
.galx-it.more{ display:none }
.galx.open .galx-it.more{ display:block; animation:hxUp .6s var(--ease) both }
.lbx{ border:0; padding:0; background:transparent; max-width:96vw; max-height:92vh }
.lbx::backdrop{ background:rgba(2,8,6,.92); backdrop-filter:blur(6px) }
.lbx img{ max-width:96vw; max-height:88vh; border-radius:16px; display:block }
.lbx-x{ position:absolute; top:10px; inset-inline-end:10px; width:44px; height:44px; border-radius:50%; display:grid; place-items:center;
  color:var(--ink); background:rgba(4,16,12,.7); border:1px solid rgba(226,198,142,.4) }
.lbx-x svg{ width:20px; height:20px }

/* why — editorial numbered list */
.whyx{ list-style:none; margin:0; padding:0; display:grid; gap:0; max-width:880px; margin-inline:auto }
@media (min-width:768px){ .whyx{ grid-template-columns:1fr 1fr; column-gap:40px } }
.whyx li{ display:flex; align-items:baseline; gap:18px; padding:20px 4px; border-bottom:1px solid rgba(226,198,142,.16) }
.whyx b{ font-family:'Amiri',serif; font-size:30px; color:var(--gd); line-height:1; flex:none }
.whyx span{ font-size:16px; line-height:1.7; color:var(--ink) }

/* final call */
.endx{ position:relative; overflow:hidden; isolation:isolate; padding-block:clamp(90px,16vw,170px); text-align:center }
.endx-bg{ position:absolute; inset:0; z-index:-2 }
.endx-bg img{ width:100%; height:100%; object-fit:cover; filter:saturate(.8) }
.endx::after{ content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, var(--em) 0%, rgba(4,16,12,.78) 30%, rgba(4,16,12,.82) 70%, var(--em) 100%) }
.endx .sx-sub{ margin-bottom:10px }
.endx-phone{ display:inline-block; margin:6px 0 24px; font-family:'Amiri',serif; font-size:clamp(36px,10vw,64px); color:var(--gl); letter-spacing:.04em }
.endx .hx-cta{ margin-inline:auto }

/* focus block */
.sx-focus{ padding-block:clamp(40px,8vw,90px) }
.focx{ display:grid; gap:24px; align-items:center }
@media (min-width:900px){ .focx{ grid-template-columns:1fr 1fr; gap:60px } }
.focx-solo{ max-width:820px; margin-inline:auto }
.focx-body{ margin:16px 0 20px; font-size:16px; line-height:2; color:rgba(244,234,210,.78) }
.focx-img{ display:block; border-radius:26px; overflow:hidden; aspect-ratio:4/3.4 }
.focx-img img{ width:100%; height:100%; object-fit:cover }

/* FAQ refinement */
.faq details{ background:transparent; border:0; border-bottom:1px solid rgba(226,198,142,.16); border-radius:0 }
.faq details[open]{ box-shadow:none }
.faq summary{ font-family:'Amiri',serif; font-size:19px; min-height:66px; padding-inline:2px }
.faq .ans{ padding:0 2px 22px }

/* header over the cinematic hero */
.hdr:not(.stuck){ background:linear-gradient(180deg, rgba(4,16,12,.7), transparent) }
.bnav.hide{ transform:translateY(calc(100% + 48px)) }

@media (prefers-reduced-motion:reduce){
  .rv,.rv-clip{ opacity:1; transform:none; clip-path:none; transition:none }
  .hx-bg img,.hx-h1 span,.hx-kick,.hx-lead,.hx-cta,.tabp{ animation:none }
  .mq-track,.film-track{ animation:none }
  .film{ overflow-x:auto }
}
.lnk{ display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:700; color:var(--gl) }
.lnk svg{ width:15px; height:15px; flex:none; transition:transform .3s var(--ease) }
@media (hover:hover){ .lnk:hover svg{ transform:translateX(-4px) } }
.btn svg{ width:19px; height:19px; flex:none }
.chev svg,.svx-more summary svg{ width:16px; height:16px }
.lbx img{ width:auto; height:auto }
/* off-screen sections: skip style/layout/paint until near the viewport */
.sx:not(.sx-statement),.endx{ content-visibility:auto; contain-intrinsic-size:auto 900px }