@charset "UTF-8";
/* ==========================================================================
   TopTenMarbleWorld — design system
   Onyx / champagne-gold glassmorphism.

   Direction: every inline-axis rule uses logical properties (margin-inline,
   inset-inline, border-start-*, padding-block) so the Arabic build mirrors from
   dir="rtl" alone. There is no separate RTL stylesheet — if you add a physical
   left/right rule here you will break the Arabic pages.
   ========================================================================== */

/* ── tokens ─────────────────────────────────────────────────────────── */
:root {
  /* onyx */
  --onyx-950: #070A0E;
  --onyx-900: #0B0E13;
  --onyx-850: #0F131A;
  --onyx-800: #12161D;
  --onyx-700: #1A1F28;
  --onyx-600: #232935;
  --onyx-500: #2E3644;

  /* marble */
  --marble-50:  #FEFDFB;
  --marble-100: #FAF7F2;
  --marble-200: #F0EBE2;
  --marble-300: #DED6C9;
  --marble-400: #BDB2A1;

  /* champagne */
  --gold-200: #F4E4BC;
  --gold-300: #E8CE95;
  --gold-400: #D4B063;
  --gold-500: #BE9642;
  --gold-600: #9C7A33;

  /* text */
  --ink:        #F5F1EA;
  --ink-muted:  #B6B0A5;
  --ink-subtle: #8B857B;
  --ink-invert: #14181F;

  /* glass */
  --glass-bg:        rgba(255, 255, 255, 0.045);
  --glass-bg-strong: rgba(255, 255, 255, 0.075);
  --glass-border:    rgba(255, 255, 255, 0.10);
  --glass-border-lit:rgba(255, 255, 255, 0.20);
  --glass-blur: 20px;
  --glass-shadow: 0 1px 0 0 rgba(255,255,255,.07) inset,
                  0 16px 48px -12px rgba(0,0,0,.55);

  /* type */
  --font-display: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: "SFMono-Regular", ui-monospace, "Cascadia Mono", Menlo, Consolas, monospace;

  --step--1: clamp(.8125rem, .78rem + .16vw, .875rem);
  --step-0:  clamp(.9375rem, .90rem + .19vw, 1.0625rem);
  --step-1:  clamp(1.0625rem, .99rem + .34vw, 1.25rem);
  --step-2:  clamp(1.25rem, 1.12rem + .62vw, 1.625rem);
  --step-3:  clamp(1.5rem, 1.28rem + 1.05vw, 2.25rem);
  --step-4:  clamp(1.875rem, 1.48rem + 1.90vw, 3.25rem);
  --step-5:  clamp(2.25rem, 1.56rem + 3.30vw, 4.75rem);

  /* layout */
  --wrap: 1240px;
  --wrap-narrow: 820px;
  --gutter: clamp(1.125rem, .70rem + 2.1vw, 2.5rem);
  --section-y: clamp(4rem, 2.6rem + 6.6vw, 8.5rem);
  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 24px;
  --radius-xl: 32px;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --header-h: 76px;
}

/* Arabic build: swap the family, relax line-height for taller glyphs. */
[lang="ar"] {
  --font-display: "IBM Plex Sans Arabic", "Noto Kufi Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-body: "IBM Plex Sans Arabic", "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
}

/* ── reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  color: var(--ink);
  background: var(--onyx-900);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}
[lang="ar"] body { line-height: 1.85; }

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
:target { scroll-margin-top: calc(var(--header-h) + 24px); }

::selection { background: var(--gold-400); color: var(--onyx-900); }

:focus-visible {
  outline: 2px solid var(--gold-300);
  outline-offset: 3px;
  border-radius: 4px;
}

/* ── page atmosphere ────────────────────────────────────────────────── */
/* Two gold pools plus a fine grain. The grain is what stops large flat dark
   areas from banding on cheap panels, and keeps the glass from looking plastic. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(58vw 42vw at 78% -6%, rgba(212,176,99,.11), transparent 62%),
    radial-gradient(46vw 40vw at 4% 42%, rgba(190,150,66,.07), transparent 60%),
    linear-gradient(180deg, var(--onyx-900) 0%, var(--onyx-950) 58%, var(--onyx-900) 100%);
}
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .30;
  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' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.42'/%3E%3C/svg%3E");
}

/* ── layout primitives ──────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-narrow { max-width: var(--wrap-narrow); }
.section { padding-block: var(--section-y); position: relative; }
.section-tight { padding-block: clamp(2.75rem, 1.9rem + 4vw, 5rem); }

/* Inner-page masthead: clears the fixed header, and lets the section-head's own
   bottom margin set the gap rather than stacking on full section padding. */
.page-intro { padding-block: calc(var(--header-h) + clamp(2.75rem, 1.6rem + 4.4vw, 5rem)) 0; }
.page-intro .section-head { margin-block-end: clamp(1.75rem, 1.2rem + 2vw, 3rem); }
.section-after-intro { padding-block-start: 0; }

.icon { flex: none; }
.icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.skip-link {
  position: absolute;
  inset-inline-start: 50%;
  top: -100px;
  transform: translateX(-50%);
  z-index: 200;
  padding: .75rem 1.25rem;
  background: var(--gold-400);
  color: var(--onyx-900);
  font-weight: 600;
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

/* ── typography ─────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
[lang="ar"] h1, [lang="ar"] h2, [lang="ar"] h3, [lang="ar"] h4 {
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0;
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  font-family: var(--font-body);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-block-end: 1.15rem;
}
[lang="ar"] .eyebrow { letter-spacing: 0; font-size: .82rem; text-transform: none; }
.eyebrow::before {
  content: "";
  width: 26px;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--gold-400));
  flex: none;
}
[dir="rtl"] .eyebrow::before { background: linear-gradient(to left, transparent, var(--gold-400)); }

.lede { font-size: var(--step-1); color: var(--ink-muted); line-height: 1.62; max-width: 62ch; }
[lang="ar"] .lede { line-height: 1.85; }
.muted { color: var(--ink-muted); }
.subtle { color: var(--ink-subtle); }
.serif-accent { font-family: var(--font-display); font-style: italic; color: var(--gold-200); }

.section-head { max-width: 68ch; margin-block-end: clamp(2.25rem, 1.5rem + 3vw, 3.75rem); }
.section-head p { color: var(--ink-muted); margin-block-start: 1.15rem; font-size: var(--step-1); }
.section-head.centred { margin-inline: auto; text-align: center; }
.section-head.centred .eyebrow { justify-content: center; }

/* Hairline rule with a gold pip — used between major bands. */
.rule {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-block: clamp(2.5rem, 5vw, 4.5rem);
}
.rule::before, .rule::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--glass-border), transparent);
}
.rule i { width: 5px; height: 5px; rotate: 45deg; background: var(--gold-400); flex: none; }

/* ── glass ──────────────────────────────────────────────────────────── */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: var(--glass-shadow);
}
/* Specular sweep along the lit edge — the detail that sells it as glass
   rather than a translucent rectangle. */
.glass::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.28), rgba(255,255,255,0) 38%, rgba(255,255,255,0) 62%, rgba(212,176,99,.16));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
.glass-strong { background: var(--glass-bg-strong); border-color: var(--glass-border-lit); }

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass { background: rgba(24, 29, 38, .92); }
}

/* ── buttons ────────────────────────────────────────────────────────── */
.btn {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  border-radius: 999px;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  cursor: pointer;
  transition:
    transform .42s var(--ease-out),
    box-shadow .42s var(--ease),
    background .42s var(--ease),
    color .42s var(--ease),
    border-color .42s var(--ease);
}
.btn > * { position: relative; z-index: 1; }
.btn .icon { width: 18px; height: 18px; transition: transform .42s var(--ease-out); }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); transition-duration: .1s; }

/* Light sweeps across the button once on hover — the same specular language as
   the polished stone the business sells. */
.btn::after {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: 100%;
  background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.38) 50%, transparent 68%);
  transform: translateX(-130%);
  transition: transform .9s var(--ease-out);
  pointer-events: none;
}
.btn:hover::after { transform: translateX(130%); }
.btn-glass::after { background: linear-gradient(105deg, transparent 32%, rgba(255,255,255,.16) 50%, transparent 68%); }
[dir="rtl"] .btn .icon-flip { scale: -1 1; }

.btn-primary {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  color: #241B08;
  box-shadow: 0 10px 30px -10px rgba(212,176,99,.55), 0 1px 0 rgba(255,255,255,.35) inset;
}
.btn-primary:hover { box-shadow: 0 18px 42px -12px rgba(212,176,99,.68), 0 1px 0 rgba(255,255,255,.45) inset; }
.btn-primary:hover .icon { transform: translateX(3px); }
[dir="rtl"] .btn-primary:hover .icon { transform: translateX(-3px); }

.btn-glass {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border-lit);
  color: var(--ink);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.btn-glass:hover { background: rgba(255,255,255,.13); border-color: rgba(255,255,255,.30); }

.btn-ghost { color: var(--ink); border: 1px solid transparent; padding-inline: .5rem; }
.btn-ghost:hover { color: var(--gold-300); }

.btn-whatsapp { background: #1FA855; color: #fff; box-shadow: 0 10px 30px -12px rgba(31,168,85,.6); }
.btn-whatsapp:hover { background: #23BC5F; }

.btn-lg { padding: 1.08rem 2rem; font-size: var(--step-0); }
.btn-sm { padding: .62rem 1.1rem; font-size: .8125rem; }
.btn-block { width: 100%; }

/* Text link with an underline that grows from the leading edge. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--gold-300);
  position: relative;
}
.link-arrow .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.link-arrow::after {
  content: "";
  position: absolute;
  inset-block-end: -3px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: var(--gold-400);
  transition: width .35s var(--ease-out);
}
.link-arrow:hover::after { width: 100%; }
.link-arrow:hover .icon { transform: translateX(4px); }
[dir="rtl"] .link-arrow .icon { scale: -1 1; }
[dir="rtl"] .link-arrow:hover .icon { transform: translateX(4px); }

/* ── header ─────────────────────────────────────────────────────────── */
.site-header {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition:
    background .35s var(--ease),
    border-color .35s var(--ease),
    transform .55s var(--ease-out);
  border-block-end: 1px solid transparent;
}
/* Retracts on scroll down, returns on scroll up — gives the content the full
   viewport while reading, and the nav back the moment it is wanted. */
.site-header.is-hidden { transform: translateY(-100%); }
.site-header.is-stuck {
  background: rgba(11, 14, 19, .72);
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  border-block-end-color: var(--glass-border);
}
.header-inner { display: flex; align-items: center; gap: 1.5rem; width: 100%; }

.logo { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.logo-mark { transition: transform .5s var(--ease-out); }
.logo:hover .logo-mark { transform: rotate(90deg); }
.logo-word { display: flex; flex-direction: column; line-height: 1.1; }
.logo-word-main {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  font-weight: 400;
  letter-spacing: -.005em;
  color: var(--marble-100);
  white-space: nowrap;
}
.logo-word-main b { font-weight: 700; }
.logo-word-sub {
  font-size: .625rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--gold-400);
  margin-block-start: 2px;
  white-space: nowrap;
}
[lang="ar"] .logo-word-sub { letter-spacing: 0; text-transform: none; font-size: .6875rem; }

.nav { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.nav a {
  position: relative;
  padding: .55rem .85rem;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-muted);
  border-radius: 8px;
  transition: color .25s var(--ease);
}
.nav a:hover { color: var(--ink); }
.nav a::after {
  content: "";
  position: absolute;
  inset-block-end: .18rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--gold-400);
  transition: width .3s var(--ease-out);
}
.nav a:hover::after { width: 18px; }
.nav a[aria-current="page"] { color: var(--ink); }
.nav a[aria-current="page"]::after { width: 18px; }

.header-actions { display: flex; align-items: center; gap: .6rem; flex: none; }

/* The in-nav CTA is for the mobile drawer only; on desktop the header button
   covers it, and showing both stacks two CTAs on top of each other. */
.nav-cta { display: none; }

.lang-switch {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .5rem .85rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ink-muted);
  transition: color .25s var(--ease), border-color .25s var(--ease), background .25s var(--ease);
}
.lang-switch:hover { color: var(--gold-200); border-color: var(--glass-border-lit); background: var(--glass-bg-strong); }
.lang-switch .icon { width: 16px; height: 16px; }

.nav-toggle {
  display: none;
  width: 44px; height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--ink);
}

/* Narrow phones: the full lockup + language pill + burger overrun the bar.
   Drop the tagline and tighten spacing rather than letting the burger clip. */
@media (max-width: 480px) {
  .header-inner { gap: .65rem; }
  .logo { gap: .5rem; }
  .logo-word-sub { display: none; }
  .logo-word-main { font-size: .9375rem; }
  .lang-switch { padding: .45rem .65rem; }
  .nav-toggle { width: 40px; height: 40px; }
}

@media (max-width: 1040px) {
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-cta-header { display: none; }
  .nav {
    position: fixed;
    inset-block-start: var(--header-h);
    inset-inline: 0;
    inset-block-end: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 1.5rem var(--gutter) 2.5rem;
    background: rgba(9, 12, 17, .97);
    backdrop-filter: blur(26px);
    -webkit-backdrop-filter: blur(26px);
    margin-inline-start: 0;
    transform: translateY(-8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .28s var(--ease), transform .28s var(--ease-out), visibility .28s;
    overflow-y: auto;
  }
  .nav.is-open { opacity: 1; visibility: visible; transform: translateY(0); }
  .nav a {
    padding: 1.05rem .25rem;
    font-size: var(--step-1);
    border-block-end: 1px solid rgba(255,255,255,.07);
    border-radius: 0;
  }
  .nav a::after { display: none; }
  .nav a[aria-current="page"] { color: var(--gold-300); }
  .nav .nav-cta { display: inline-flex; margin-block-start: 1.75rem; }
  body.nav-open { overflow: hidden; }
}

/* ── hero ───────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  min-height: min(94svh, 900px);
  display: flex;
  align-items: center;
  padding-block: calc(var(--header-h) + 4rem) clamp(3.5rem, 8vw, 7rem);
  overflow: hidden;
}
.hero-media { position: absolute; inset: 0; z-index: -1; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Scrim is directional so the text side stays legible when RTL flips it. */
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, var(--onyx-900) 2%, rgba(11,14,19,.55) 42%, rgba(11,14,19,.30) 100%),
    linear-gradient(to var(--scrim-dir, right), rgba(7,10,14,.90) 0%, rgba(7,10,14,.62) 42%, rgba(7,10,14,.12) 78%);
}
[dir="rtl"] .hero-media::after { --scrim-dir: left; }

.hero-content { max-width: 46rem; position: relative; }
.hero h1 { margin-block-end: 1.6rem; }
.hero h1 em { font-style: italic; color: var(--gold-200); }
/* Arabic has no italic tradition — synthetic obliquing just looks like a
   rendering fault. Keep the gold emphasis, drop the slant. */
[lang="ar"] .hero h1 em,
[lang="ar"] .serif-accent { font-style: normal; }
.hero .lede { font-size: var(--step-1); max-width: 44rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: .85rem; margin-block-start: 2.4rem; }
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1.25rem;
  margin-block-start: 2.4rem;
  font-size: var(--step--1);
  color: var(--ink-subtle);
}
.hero-trust span { display: inline-flex; align-items: center; gap: .45rem; }
.hero-trust .icon { width: 15px; height: 15px; color: var(--gold-400); }

.scroll-cue {
  position: absolute;
  inset-block-end: 1.75rem;
  inset-inline-start: 50%;
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 34px; height: 54px;
  border: 1px solid var(--glass-border-lit);
  border-radius: 999px;
  color: var(--ink-subtle);
}
.scroll-cue i {
  width: 3px; height: 8px;
  border-radius: 2px;
  background: var(--gold-300);
  animation: cue 2s var(--ease) infinite;
}
@keyframes cue { 0%,100% { transform: translateY(-7px); opacity: 0; } 40% { opacity: 1; } 70% { transform: translateY(8px); opacity: 0; } }

/* ── stat strip ─────────────────────────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1px;
  background: var(--glass-border);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.stat { background: rgba(18, 22, 29, .72); padding: clamp(1.5rem, 3vw, 2.25rem); text-align: center; }
.stat .icon { color: var(--gold-400); margin-inline: auto; margin-block-end: .9rem; width: 26px; height: 26px; }
.stat-value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3rem);
  line-height: 1;
  background: linear-gradient(135deg, var(--gold-200), var(--gold-500));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* "85+" and "24h": the trailing symbol is bidi-neutral and jumps to the wrong
     side under RTL. These are measurements, not prose — pin them to LTR. */
  direction: ltr;
  unicode-bidi: isolate;
}
[lang="ar"] .stat-value { font-weight: 700; }
.stat-label { font-size: var(--step--1); font-weight: 600; margin-block-start: .55rem; }
.stat-note { font-size: .8125rem; color: var(--ink-subtle); margin-block-start: .4rem; line-height: 1.5; }

/* ── cards ──────────────────────────────────────────────────────────── */
/* Deterministic columns, and a centred final row.
   auto-fit resolved to 3 tracks at desktop width, so a 4-item grid rendered as
   3 + 1 orphan with a half-empty row beside it. Flex-wrap with a capped basis
   gives fixed columns AND centres whatever is left over on the last row, which
   grid cannot do for an arbitrary item count. */
.grid {
  --gap: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--gap);
}
.grid > * { flex: 1 1 100%; min-width: 0; }

@media (min-width: 620px) {
  .grid-3 > *, .grid-4 > * { flex-basis: calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); }
}
@media (min-width: 880px) {
  .grid-2 > * { flex-basis: calc((100% - var(--gap)) / 2); max-width: calc((100% - var(--gap)) / 2); }
  .grid-4 > * { flex-basis: calc((100% - 3 * var(--gap)) / 4); max-width: calc((100% - 3 * var(--gap)) / 4); }
}
@media (min-width: 1060px) {
  .grid-3 > * { flex-basis: calc((100% - 2 * var(--gap)) / 3); max-width: calc((100% - 2 * var(--gap)) / 3); }
}

.card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.5rem, 1.1rem + 1.4vw, 2.25rem);
  border-radius: var(--radius-lg);
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  box-shadow: var(--glass-shadow);
  overflow: hidden;
  transition: transform .45s var(--ease-out), border-color .45s var(--ease), background .45s var(--ease);
}
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(255,255,255,.24), transparent 40%, transparent 62%, rgba(212,176,99,.14));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  pointer-events: none;
}
/* Gold wash that follows the cursor. Falls back to a static corner glow. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(340px circle at var(--mx, 50%) var(--my, 0%), rgba(212,176,99,.13), transparent 62%);
  opacity: 0;
  transition: opacity .45s var(--ease);
  pointer-events: none;
}
.card:hover { transform: translateY(-4px); border-color: var(--glass-border-lit); background: var(--glass-bg-strong); }
.card:hover::after { opacity: 1; }

.card-icon {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  border-radius: 15px;
  margin-block-end: 1.4rem;
  color: var(--gold-300);
  background: linear-gradient(145deg, rgba(212,176,99,.20), rgba(212,176,99,.05));
  border: 1px solid rgba(212,176,99,.24);
  flex: none;
}
.card-icon .icon { width: 26px; height: 26px; }
.card h3 { margin-block-end: .85rem; font-size: var(--step-2); }
.card p { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.68; }
.card .link-arrow { margin-block-start: auto; padding-block-start: 1.5rem; }

/* Extra uploaded photos for a service, stacked in the corner of its card. */
.thumb-strip {
  position: absolute;
  inset-block-end: .75rem;
  inset-inline-end: .75rem;
  display: flex;
  gap: .4rem;
  z-index: 2;
}
.thumb-strip-item, .thumb-strip-more {
  width: 46px; height: 34px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 6px 16px -6px rgba(0,0,0,.8);
  flex: none;
}
.thumb-strip-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-strip-more {
  display: grid; place-items: center;
  background: rgba(11,14,19,.82);
  font-size: .75rem; font-weight: 600; color: var(--gold-200);
  font-variant-numeric: tabular-nums;
}

/* Service card with photography */
.card-media { padding: 0; }
.card-media .card-thumb { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.card-media .card-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out), filter .8s var(--ease);
  filter: saturate(.92) contrast(1.03);
}
.card-media:hover .card-thumb img { transform: scale(1.05); filter: saturate(1) contrast(1.05); }
.card-media .card-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11,14,19,.92), rgba(11,14,19,.15) 55%, transparent);
}
.card-media .card-body {
  padding: clamp(1.4rem, 1.1rem + 1.2vw, 2rem);
  display: flex;
  flex-direction: column;
  flex: 1;
}
/* The badge straddles the image/body boundary. It must live in .card-body and
   be pulled up by half its height — parked inside .card-thumb it gets sliced in
   half by the overflow:hidden that the image zoom depends on. */
.card-media .card-icon {
  margin: -49px 0 1.2rem;
  position: relative;
  z-index: 2;
  background: linear-gradient(145deg, rgba(32,38,49,.97), rgba(18,22,29,.97));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Compact list item inside a service group */
.svc-list { display: grid; gap: .25rem; margin-block-start: 1.5rem; }
.svc-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .85rem 0;
  border-block-start: 1px solid rgba(255,255,255,.07);
}
.svc-item:first-child { border-block-start: 0; }
.svc-item .icon { color: var(--gold-400); width: 19px; height: 19px; margin-block-start: .2rem; }
.svc-item-title { font-weight: 600; font-size: var(--step--1); }
.svc-item-body { font-size: .8125rem; color: var(--ink-subtle); line-height: 1.6; margin-block-start: .22rem; }

/* ── layout variations ──────────────────────────────────────────────────
   Three shapes that exist purely to break the "heading, then a grid" rhythm.
   All logical properties, so Arabic mirrors from dir="rtl" with no overrides. */

/* Heading column holds still while its neighbour scrolls past it. */
.split-sticky {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3vw, 4rem);
  align-items: start;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
}
.split-sticky.reverse > .sticky-head { order: 2; }
.sticky-head { position: sticky; top: calc(var(--header-h, 76px) + 2.5rem); }
.sticky-head .section-head { margin-block-end: 1.75rem; }
/* Sticky is a large-screen luxury: on a phone the column is full width and
   pinning it would cover the content it introduces. */
@media (max-width: 940px) {
  .split-sticky { grid-template-columns: 1fr; }
  .sticky-head { position: static; }
  .split-sticky.reverse > .sticky-head { order: 0; }
}

/* Service cards laid on their side: photograph inline-start, copy inline-end.
   Nothing else on the page has this shape, so the section reads as its own
   thing without changing a single colour or typeface. The image side alternates
   so the column does not become a second rigid pattern. */
@media (min-width: 720px) {
  .cards-row .card-media { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
  .cards-row .card-media .card-thumb { aspect-ratio: auto; height: 100%; }
  /* Flipping the image to the far side must flip the track widths with it,
     otherwise the copy lands in the narrow column on every second card and the
     service names wrap where their neighbours do not. */
  .cards-row .card-media:nth-child(even) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .cards-row .card-media:nth-child(even) .card-thumb { order: 2; }
  /* The gradient scrim is drawn for a card with copy underneath; sideways it
     would darken the wrong edge, so fade it along the inline axis instead. */
  .cards-row .card-media .card-thumb::after {
    background: linear-gradient(to var(--scrim-dir, right), transparent 45%, rgba(11,14,19,.55));
  }
  .cards-row .card-media:nth-child(even) .card-thumb::after { --scrim-dir: left; }
  /* Badge no longer straddles a horizontal seam — put it back in flow. */
  .cards-row .card-media .card-icon { margin: 0 0 1.1rem; }
}
[dir="rtl"] .cards-row .card-media .card-thumb::after { --scrim-dir: left; }
[dir="rtl"] .cards-row .card-media:nth-child(even) .card-thumb::after { --scrim-dir: right; }

/* Full-bleed tinted band. The background change alone resets the eye, which is
   why the process list can stay a plain list and still feel like a new chapter. */
.band {
  position: relative;
  padding-block: clamp(3.5rem, 2.4rem + 4.5vw, 6.5rem);
  background:
    radial-gradient(120% 100% at 50% 0%, rgba(212,176,99,.055), transparent 60%),
    var(--band-bg, rgba(255,255,255,.018));
  border-block: 1px solid var(--glass-border);
}
.band-head { max-width: 62ch; margin-block-end: clamp(2.25rem, 1.5rem + 3vw, 3.5rem); }
.band-head p { color: var(--ink-muted); margin-block-start: 1.15rem; font-size: var(--step-1); }

/* A section that recedes slightly — used where the content is already busy. */
.section-quiet { background: linear-gradient(180deg, transparent, rgba(255,255,255,.014) 30%, transparent); }

/* ── why: numbered editorial list ───────────────────────────────────── */
.why-list { list-style: none; display: grid; gap: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); }
.why-item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1rem, .7rem + 1vw, 1.75rem);
  padding-block-end: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem);
  border-block-end: 1px solid var(--glass-border);
}
.why-item:last-child { border-block-end: 0; padding-block-end: 0; }
.why-num {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem);
  line-height: 1;
  color: var(--gold-500);
  opacity: .55;
  font-variant-numeric: tabular-nums;
  /* Latin digits read the same in both languages here, and keeping them LTR
     stops the numbering reversing in Arabic. */
  direction: ltr;
  unicode-bidi: isolate;
}
.why-body h3 { display: flex; align-items: center; gap: .6rem; font-size: var(--step-1); margin-block-end: .55rem; }
.why-body .why-ic { color: var(--gold-400); flex: none; }
.why-body p { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.7; max-width: 62ch; }

/* ── split feature ──────────────────────────────────────────────────── */
.split {
  display: grid;
  gap: clamp(2rem, 1.2rem + 3.4vw, 4.5rem);
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr));
}
.split-media { position: relative; border-radius: var(--radius-lg); overflow: hidden; }
.split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-media::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px var(--glass-border) inset, 0 40px 80px -30px rgba(0,0,0,.7);
  pointer-events: none;
}
/* Floating gloss-reading chip over the image */
.media-badge {
  position: absolute;
  inset-block-end: 1.25rem;
  inset-inline-start: 1.25rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .8rem 1.1rem;
  border-radius: 14px;
  background: rgba(11,14,19,.72);
  border: 1px solid var(--glass-border-lit);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.media-badge .icon { color: var(--gold-300); width: 22px; height: 22px; }
.media-badge-value {
  font-family: var(--font-display); font-size: 1.35rem; line-height: 1; color: var(--gold-200);
  direction: ltr; unicode-bidi: isolate; /* "85+ GU" — see .stat-value */
}
.media-badge-label { font-size: .6875rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-subtle); margin-block-start: .2rem; }
[lang="ar"] .media-badge-label { letter-spacing: 0; text-transform: none; }

/* ── process ────────────────────────────────────────────────────────── */
/* Two columns from tablet up. Six full-width rows made this the tallest section
   on the page for what is essentially a six-item list. */
.process {
  display: grid;
  gap: 0 clamp(2rem, 1.2rem + 3vw, 4rem);
  counter-reset: step;
}
@media (min-width: 860px) { .process { grid-template-columns: 1fr 1fr; } }

.process-step {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, .8rem + 1vw, 1.5rem);
  padding-block: clamp(1.35rem, 1rem + 1.3vw, 2rem);
  border-block-start: 1px solid rgba(255,255,255,.08);
  position: relative;
  transition: background .4s var(--ease);
}
/* With two columns the first row is the first *two* items. */
.process-step:first-child { border-block-start: 0; }
@media (min-width: 860px) { .process-step:nth-child(2) { border-block-start: 0; } }
.process-step:hover { background: linear-gradient(to right, rgba(212,176,99,.05), transparent 70%); }
[dir="rtl"] .process-step:hover { background: linear-gradient(to left, rgba(212,176,99,.05), transparent 70%); }
.process-num {
  counter-increment: step;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(212,176,99,.28);
  background: linear-gradient(145deg, rgba(212,176,99,.14), rgba(212,176,99,.02));
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--gold-200);
  flex: none;
  transition: border-color .4s var(--ease), transform .4s var(--ease-out), background .4s var(--ease);
}
.process-num::before { content: counter(step, decimal-leading-zero); }
.process-step:hover .process-num {
  border-color: var(--gold-400);
  background: linear-gradient(145deg, rgba(212,176,99,.24), rgba(212,176,99,.05));
  transform: scale(1.06);
}
.process-body h3 { margin-block-end: .5rem; font-size: var(--step-1); }
.process-body p { color: var(--ink-muted); font-size: var(--step--1); max-width: 54ch; line-height: 1.68; }
/* The decorative icon competed with the step number for attention in a
   two-column layout — the number is the wayfinding element that matters. */
.process-icon { display: none; }

/* ── gallery ────────────────────────────────────────────────────────── */
.filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-end: 2.25rem; }
.filter-btn {
  padding: .55rem 1.15rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--ink-muted);
  transition: all .28s var(--ease);
}
.filter-btn:hover { color: var(--ink); border-color: var(--glass-border-lit); }
.filter-btn[aria-pressed="true"] {
  background: linear-gradient(135deg, var(--gold-300), var(--gold-500));
  border-color: transparent;
  color: #241B08;
  font-weight: 600;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr));
  gap: clamp(.75rem, .5rem + .9vw, 1.25rem);
  /* Feature tiles span two tracks; dense backfills the gaps they would leave. */
  grid-auto-flow: dense;
}
.tile {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 1px solid var(--glass-border);
  cursor: zoom-in;
  background: var(--onyx-800);
}
/* A feature tile must span rows as well as columns, otherwise a 2-column-wide
   tile at 4:3 stands twice as tall as its row and punches a hole in the grid.
   Spanning 2×2 with an auto ratio makes its height the sum of the two rows. */
.tile.is-wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
.tile.is-tall { grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 700px) {
  .tile.is-wide, .tile.is-tall { grid-column: span 1; grid-row: span 1; aspect-ratio: 4 / 3; }
}
.tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out), filter .5s var(--ease);
  filter: saturate(.9) contrast(1.03);
}
.tile:hover img { transform: scale(1.06); filter: saturate(1.03) contrast(1.06); }
.tile-caption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: 2.5rem 1.1rem 1.05rem;
  background: linear-gradient(to top, rgba(7,10,14,.94), transparent);
  font-size: .8125rem;
  font-weight: 500;
  translate: 0 6px;
  opacity: 0;
  transition: opacity .4s var(--ease), translate .4s var(--ease-out);
}
.tile:hover .tile-caption, .tile:focus-visible .tile-caption { opacity: 1; translate: 0 0; }
.tile[hidden] { display: none; }

/* Lightbox */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5, 7, 10, .93);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img { max-width: 100%; max-height: 82svh; border-radius: var(--radius); box-shadow: 0 40px 90px -20px rgba(0,0,0,.8); }
.lightbox-caption { margin-block-start: 1.1rem; text-align: center; color: var(--ink-muted); font-size: var(--step--1); }
.lightbox-close, .lightbox-nav {
  position: absolute;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid var(--glass-border-lit);
  background: rgba(255,255,255,.07);
  color: var(--ink);
  backdrop-filter: blur(10px);
  transition: background .25s var(--ease);
}
.lightbox-close:hover, .lightbox-nav:hover { background: rgba(255,255,255,.16); }
.lightbox-close { inset-block-start: clamp(1rem, 3vw, 2rem); inset-inline-end: clamp(1rem, 3vw, 2rem); }
.lightbox-nav.prev { inset-inline-start: clamp(.5rem, 2vw, 2rem); }
.lightbox-nav.next { inset-inline-end: clamp(.5rem, 2vw, 2rem); }
.lightbox-nav { inset-block-start: 50%; translate: 0 -50%; }
/* One chevron glyph, mirrored per direction — prev always points at the leading edge. */
.lightbox-nav.prev .icon { scale: -1 1; }
[dir="rtl"] .lightbox-nav.prev .icon { scale: 1 1; }
[dir="rtl"] .lightbox-nav.next .icon { scale: -1 1; }

/* ── spec list ──────────────────────────────────────────────────────
   Replaces a grid of near-identical glass cards. Six boxes in a row read as
   filler; hairline-separated rows read as a specification, which is what this
   content actually is. */
.spec-list {
  display: grid;
  gap: 0 clamp(2rem, 1.2rem + 3vw, 4rem);
  border-block-start: 1px solid rgba(255,255,255,.09);
}
@media (min-width: 900px) { .spec-list { grid-template-columns: 1fr 1fr; } }

.spec-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1.15rem;
  padding-block: clamp(1.35rem, 1rem + 1.2vw, 1.9rem);
  border-block-end: 1px solid rgba(255,255,255,.09);
  position: relative;
}
.spec-row::after {
  content: "";
  position: absolute;
  inset-block-end: -1px;
  inset-inline-start: 0;
  width: 0;
  height: 1px;
  background: linear-gradient(to right, var(--gold-400), transparent);
  transition: width .6s var(--ease-out);
}
[dir="rtl"] .spec-row::after { background: linear-gradient(to left, var(--gold-400), transparent); }
.spec-row:hover::after { width: 100%; }

.spec-icon {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 12px;
  color: var(--gold-300);
  background: linear-gradient(145deg, rgba(212,176,99,.16), rgba(212,176,99,.03));
  border: 1px solid rgba(212,176,99,.20);
  flex: none;
  transition: border-color .45s var(--ease), transform .45s var(--ease-out), background .45s var(--ease);
}
.spec-row:hover .spec-icon {
  border-color: rgba(212,176,99,.48);
  background: linear-gradient(145deg, rgba(212,176,99,.26), rgba(212,176,99,.06));
  transform: translateY(-2px);
}
.spec-icon .icon { width: 21px; height: 21px; }
.spec-title {
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.25;
  margin-block-end: .5rem;
  transition: color .35s var(--ease);
}
[lang="ar"] .spec-title { font-weight: 600; }
.spec-row:hover .spec-title { color: var(--gold-200); }
.spec-body { font-size: var(--step--1); color: var(--ink-muted); line-height: 1.7; }

/* ── testimonials ───────────────────────────────────────────────────── */
/* Featured quote + three supporting ones, rather than four identical cards. */
.quote-feature {
  position: relative;
  padding: clamp(2rem, 1.4rem + 2.6vw, 3.5rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-block-end: clamp(1rem, .6rem + 1.4vw, 1.75rem);
  background: linear-gradient(140deg, rgba(212,176,99,.11), rgba(255,255,255,.035) 55%);
  border: 1px solid rgba(212,176,99,.20);
  backdrop-filter: blur(var(--glass-blur)) saturate(150%);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(150%);
}
.quote-feature::before {
  content: "";
  position: absolute;
  inset-block-start: -55%;
  inset-inline-end: -10%;
  width: 46%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212,176,99,.20), transparent 68%);
  pointer-events: none;
}
.quote-feature blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.02rem + 1.15vw, 1.9rem);
  line-height: 1.42;
  color: var(--marble-50);
  max-width: 44ch;
  position: relative;
}
[lang="ar"] .quote-feature blockquote { line-height: 1.75; font-weight: 500; }
.quote-feature .quote-mark { width: 40px; height: 40px; opacity: .7; }
.quote-feature .quote-author { border-block-start-color: rgba(212,176,99,.24); }
.quote-card { padding: clamp(1.75rem, 1.2rem + 1.8vw, 2.5rem); }
.quote-mark { color: var(--gold-400); opacity: .55; width: 30px; height: 30px; margin-block-end: 1rem; }
.quote-card blockquote { font-family: var(--font-display); font-size: var(--step-1); line-height: 1.55; color: var(--marble-100); }
[lang="ar"] .quote-card blockquote { line-height: 1.85; font-weight: 500; }
.quote-stars { display: flex; gap: .18rem; color: var(--gold-400); margin-block: 1.25rem .9rem; }
.quote-stars .icon { width: 15px; height: 15px; }
.quote-author { display: flex; align-items: center; gap: .85rem; padding-block-start: 1.15rem; border-block-start: 1px solid rgba(255,255,255,.08); }
.quote-avatar {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(145deg, rgba(212,176,99,.22), rgba(212,176,99,.06));
  border: 1px solid rgba(212,176,99,.28);
  color: var(--gold-200);
  font-family: var(--font-display);
  font-size: 1.05rem;
  flex: none;
}
.quote-name { font-weight: 600; font-size: var(--step--1); }
.quote-role { font-size: .8125rem; color: var(--ink-subtle); }

/* ── accordion (FAQ) ────────────────────────────────────────────────── */
.accordion { border-block-start: 1px solid rgba(255,255,255,.08); }
.acc-item { border-block-end: 1px solid rgba(255,255,255,.08); }
.acc-trigger {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
  padding: 1.5rem 0;
  text-align: start;
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
  color: var(--ink);
  transition: color .3s var(--ease);
}
[lang="ar"] .acc-trigger { font-weight: 600; }
.acc-trigger:hover { color: var(--gold-200); }
.acc-trigger .icon {
  margin-inline-start: auto;
  color: var(--gold-400);
  transition: transform .4s var(--ease-out);
  flex: none;
}
.acc-trigger[aria-expanded="true"] .icon { transform: rotate(180deg); }
.acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .42s var(--ease-out);
}
.acc-panel[data-open="true"] { grid-template-rows: 1fr; }
.acc-panel > div { overflow: hidden; }
.acc-panel p { color: var(--ink-muted); font-size: var(--step--1); line-height: 1.72; max-width: 72ch; padding-block-end: 1.6rem; }

/* ── CTA band ───────────────────────────────────────────────────────── */
.cta-band {
  position: relative;
  padding: clamp(2.5rem, 1.7rem + 3.4vw, 4.5rem);
  border-radius: var(--radius-xl);
  overflow: hidden;
  text-align: center;
  background: linear-gradient(140deg, rgba(212,176,99,.14), rgba(212,176,99,.03) 45%, rgba(255,255,255,.04));
  border: 1px solid rgba(212,176,99,.24);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
}
.cta-band::before {
  content: "";
  position: absolute;
  inset-block-start: -60%;
  inset-inline-start: 50%;
  translate: -50% 0;
  width: 70%;
  aspect-ratio: 1;
  background: radial-gradient(circle, rgba(212,176,99,.20), transparent 66%);
  pointer-events: none;
}
.cta-band h2 { max-width: 22ch; margin-inline: auto; position: relative; }
.cta-band p { max-width: 62ch; margin: 1.3rem auto 0; color: var(--ink-muted); position: relative; }
.cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; justify-content: center; margin-block-start: 2.25rem; position: relative; }

/* ── coverage chips ─────────────────────────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: .55rem; }
.chip {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .55rem 1.05rem;
  border-radius: 999px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  font-size: var(--step--1);
  color: var(--ink-muted);
  transition: all .28s var(--ease);
}
.chip .icon { width: 14px; height: 14px; color: var(--gold-400); }
.chip:hover { border-color: rgba(212,176,99,.36); color: var(--ink); background: rgba(212,176,99,.07); }

/* ── forms ──────────────────────────────────────────────────────────── */
.form-grid { display: grid; gap: 1.15rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.field { display: flex; flex-direction: column; gap: .5rem; }
.field-full { grid-column: 1 / -1; }
.field label { font-size: var(--step--1); font-weight: 600; color: var(--ink); }
.field label .req { color: var(--gold-400); margin-inline-start: .2rem; }

.field input, .field select, .field textarea {
  width: 100%;
  padding: .85rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.045);
  color: var(--ink);
  font-size: var(--step--1);
  transition: border-color .25s var(--ease), background .25s var(--ease), box-shadow .25s var(--ease);
  -webkit-appearance: none;
  appearance: none;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.6; }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-subtle); opacity: 1; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold-400);
  background: rgba(255,255,255,.07);
  box-shadow: 0 0 0 3px rgba(212,176,99,.16);
}
.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23B6B0A5' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6.4 9.4 5.6 5.6 5.6-5.6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 18px;
  padding-inline-end: 2.75rem;
}
[dir="rtl"] .field select { background-position: left 1rem center; padding-inline-end: 1rem; padding-inline-start: 2.75rem; }
.field select option { background: var(--onyx-800); color: var(--ink); }

.field-error { font-size: .8125rem; color: #FF9B8A; display: none; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #FF9B8A; }
.field.has-error .field-error { display: block; }

.checkbox { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.checkbox input { width: 20px; height: 20px; flex: none; margin-block-start: .15rem; accent-color: var(--gold-400); padding: 0; }
.checkbox span { font-size: var(--step--1); color: var(--ink-muted); }

/* Bot trap — visually gone but not display:none, which some bots skip. */
.hp-field {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.form-status { display: none; padding: 1.25rem 1.4rem; border-radius: var(--radius); margin-block-start: 1.5rem; }
.form-status.is-visible { display: block; }
.form-status h4 { font-family: var(--font-body); font-weight: 700; font-size: var(--step-0); margin-block-end: .35rem; }
.form-status p { font-size: var(--step--1); }
.form-status.ok { background: rgba(31,168,85,.12); border: 1px solid rgba(31,168,85,.35); }
.form-status.ok h4 { color: #6FE39C; }
.form-status.err { background: rgba(255,120,100,.10); border: 1px solid rgba(255,120,100,.32); }
.form-status.err h4 { color: #FF9B8A; }

.btn[aria-busy="true"] { opacity: .7; pointer-events: none; }

/* ── contact detail rows ────────────────────────────────────────────── */
.contact-row {
  display: flex;
  gap: 1.15rem;
  padding-block: 1.35rem;
  border-block-start: 1px solid rgba(255,255,255,.08);
}
.contact-row:first-of-type { border-block-start: 0; padding-block-start: 0; }
.contact-row .card-icon { width: 46px; height: 46px; border-radius: 13px; margin: 0; }
.contact-row .card-icon .icon { width: 21px; height: 21px; }
.contact-label { font-size: .6875rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle); }
[lang="ar"] .contact-label { letter-spacing: 0; text-transform: none; font-size: .75rem; }
.contact-value { font-size: var(--step-1); font-weight: 600; margin-block: .3rem .3rem; word-break: break-word; }
.contact-value:hover { color: var(--gold-200); }
.contact-note { font-size: .8125rem; color: var(--ink-subtle); line-height: 1.55; }

/* ── map ────────────────────────────────────────────────────────────── */
.map-frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--glass-border);
  background: var(--onyx-800);
  min-height: 380px;
}
.map-frame iframe { display: block; width: 100%; height: 100%; min-height: 380px; border: 0; filter: grayscale(.35) contrast(1.06) brightness(.86); }
.map-overlay {
  position: absolute;
  inset-block-end: 1.15rem;
  inset-inline: 1.15rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.35rem;
  border-radius: var(--radius);
  background: rgba(11,14,19,.82);
  border: 1px solid var(--glass-border-lit);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.map-overlay .icon { color: var(--gold-300); }
.map-overlay-text { flex: 1 1 220px; min-width: 0; }
.map-overlay-title { font-weight: 600; font-size: var(--step--1); }
.map-overlay-sub { font-size: .8125rem; color: var(--ink-subtle); margin-block-start: .2rem; }
.map-overlay-coords {
  font-size: .75rem; color: var(--gold-500); margin-block-start: .25rem;
  font-variant-numeric: tabular-nums; letter-spacing: .01em;
}

/* ── contact + map band (foot of the landing page) ──────────────────── */
.contact-band {
  display: grid;
  gap: clamp(1.75rem, 1.2rem + 2.4vw, 3.25rem);
  align-items: center;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
}
@media (max-width: 900px) { .contact-band { grid-template-columns: 1fr; } }

.contact-band-info h2 { font-size: var(--step-3); margin-block: .75rem 1.75rem; }
.contact-band .map-frame { height: 100%; }
.contact-band .map-frame iframe { min-height: 340px; }
.contact-band .map-placeholder-note { margin-block-start: .9rem; }

.clines { list-style: none; display: grid; gap: 0; }
.cline {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .9rem;
  align-items: center;
  padding-block: .85rem;
  border-block-start: 1px solid var(--glass-border);
}
.cline:first-child { border-block-start: 0; padding-block-start: 0; }
.cline-ic {
  display: grid; place-items: center;
  width: 38px; height: 38px; border-radius: 11px;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  color: var(--gold-300);
}
.cline-text { min-width: 0; }
.cline-label {
  display: block;
  font-size: .625rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-subtle);
}
.cline-value {
  display: block; font-weight: 600; font-size: var(--step-0);
  margin-block-start: .15rem; word-break: break-word;
}
a.cline-value:hover { color: var(--gold-200); }
.contact-band-actions { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }

.map-placeholder-note {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  margin-block-start: 1rem;
  font-size: .8125rem;
  color: var(--ink-subtle);
}
.map-placeholder-note .icon { width: 15px; height: 15px; color: var(--gold-500); }

/* ── standards / checklist ──────────────────────────────────────────── */
.check-list { display: grid; gap: .9rem; }
.check-list li { display: flex; align-items: flex-start; gap: .8rem; font-size: var(--step--1); color: var(--ink-muted); }
.check-list .icon { color: var(--gold-400); width: 19px; height: 19px; margin-block-start: .22rem; flex: none; }

/* ── prose ──────────────────────────────────────────────────────────── */
.prose p { color: var(--ink-muted); line-height: 1.78; }
.prose p + p { margin-block-start: 1.35rem; }
.prose p:first-of-type::first-letter {
  font-family: var(--font-display);
  font-size: 3.4em;
  line-height: .84;
  float: inline-start;
  padding-inline-end: .09em;
  padding-block-start: .06em;
  color: var(--gold-300);
}
[lang="ar"] .prose p:first-of-type::first-letter { font-size: 1em; float: none; padding: 0; color: inherit; }

/* ── footer ─────────────────────────────────────────────────────────── */
.site-footer {
  margin-block-start: clamp(4rem, 8vw, 7rem);
  border-block-start: 1px solid var(--glass-border);
  background: linear-gradient(to bottom, rgba(255,255,255,.022), transparent);
  padding-block: clamp(3rem, 5vw, 4.5rem) 2rem;
}
.footer-grid {
  display: grid;
  gap: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
}
.footer-brand { grid-column: span 1; max-width: 34ch; }
@media (min-width: 900px) { .footer-brand { grid-column: span 2; max-width: 38ch; } }
.footer-brand p { font-size: var(--step--1); color: var(--ink-subtle); margin-block-start: 1.25rem; line-height: 1.7; }
.footer-social { display: flex; gap: .55rem; margin-block-start: 1.6rem; }
.footer-social a {
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border-radius: 11px;
  border: 1px solid var(--glass-border);
  background: var(--glass-bg);
  color: var(--ink-muted);
  transition: all .28s var(--ease);
}
.footer-social a:hover { color: var(--gold-200); border-color: rgba(212,176,99,.36); background: rgba(212,176,99,.08); transform: translateY(-2px); }

.footer-col h4 {
  font-family: var(--font-body);
  font-size: .6875rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--gold-300);
  margin-block-end: 1.25rem;
}
[lang="ar"] .footer-col h4 { letter-spacing: 0; text-transform: none; font-size: .8125rem; }
.footer-col li + li { margin-block-start: .72rem; }
.footer-col a, .footer-col span { font-size: var(--step--1); color: var(--ink-subtle); transition: color .25s var(--ease); }
.footer-col a:hover { color: var(--gold-200); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem 1.5rem;
  align-items: center;
  justify-content: space-between;
  margin-block-start: clamp(2.5rem, 4vw, 3.5rem);
  padding-block-start: 1.75rem;
  border-block-start: 1px solid rgba(255,255,255,.07);
  font-size: .8125rem;
  color: var(--ink-subtle);
}
.footer-note { display: flex; align-items: center; gap: .5rem; }
.footer-note .icon { width: 14px; height: 14px; color: var(--gold-500); }

/* ── sticky mobile call bar ─────────────────────────────────────────── */
.callbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 90;
  display: none;
  gap: .5rem;
  padding: .6rem;
  padding-block-end: max(.6rem, env(safe-area-inset-bottom));
  background: rgba(9,12,17,.93);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-block-start: 1px solid var(--glass-border);
}
.callbar .btn { flex: 1; padding-block: .78rem; }
@media (max-width: 720px) {
  .callbar { display: flex; }
  body { padding-block-end: 70px; }
}

/* ── scroll reveal ──────────────────────────────────────────────────────
   Transform runs longer than opacity so elements finish settling after they
   have finished fading — that lag is what stops a reveal feeling like a switch
   being flipped. Sub-pixel scale adds depth without visible "zooming". */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0) scale(.988);
  transition:
    opacity .85s var(--ease-out) var(--reveal-delay, 0ms),
    transform 1.15s var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* Photography wipes up and settles out of an over-scale instead of sliding —
   sliding a large image reads as cheap, a wipe reads as a reveal. */
[data-reveal="media"] { opacity: 1; transform: none; overflow: hidden; }
[data-reveal="media"] img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition:
    clip-path 1.15s var(--ease-out) var(--reveal-delay, 0ms),
    transform 1.6s var(--ease-out) var(--reveal-delay, 0ms);
}
[data-reveal="media"].is-visible img { clip-path: inset(0 0 0 0); transform: scale(1); }

/* Reading-progress rail. */
.progress-rail {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 2px;
  z-index: 101;
  background: linear-gradient(to right, var(--gold-500), var(--gold-300));
  transform: scaleX(var(--progress, 0));
  transform-origin: left center;
  pointer-events: none;
  opacity: .9;
}
[dir="rtl"] .progress-rail { transform-origin: right center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  [data-reveal] { opacity: 1; transform: none; }
  [data-reveal="media"] img { clip-path: none; transform: none; }
  .progress-rail { display: none; }
  .hero-media img { transform: none !important; }
}

/* ── print ──────────────────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #000; }
  body::before, body::after, .site-header, .callbar, .scroll-cue, .lightbox { display: none !important; }
  .glass, .card, .stats { background: none !important; border: 1px solid #ccc !important; box-shadow: none !important; backdrop-filter: none !important; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: .75em; color: #555; }
}