@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;
}

/* Machine-translated pages.
   Google Translate swaps lang= and adds one of these classes, but leaves dir=
   untouched — so an Arabic page read in English came out mirrored. site.js
   copies the class onto dir=; this does the same for the main axis immediately,
   so the layout never flashes the wrong way round while the script boots. */
html.translated-ltr { direction: ltr; }
html.translated-rtl { direction: rtl; }
/* Arabic typography is keyed to lang=, which Translate rewrites for us, so the
   English serif and letter-spacing come back on their own. */

/* ── 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); }

/* ── 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; }

/* ── 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; }

/* Consent box.

   It sits inside .field, which styles every input as a text box: appearance:none
   with a 10px radius turned a 20px checkbox into a plain circle, and once
   appearance is none, accent-color draws nothing. Ticking it therefore changed
   nothing on screen — the only feedback was the focus ring, so clicking away
   looked exactly like the box clearing itself. Drawn explicitly here instead. */
.checkbox { display: flex; align-items: flex-start; gap: .75rem; cursor: pointer; }
.checkbox input[type="checkbox"] {
  width: 22px; height: 22px;
  flex: none;
  margin: .05rem 0 0;
  padding: 0;
  border-radius: 7px;
  border: 1.5px solid var(--glass-border-lit);
  background-color: rgba(255,255,255,.045);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px 15px;
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.checkbox:hover input[type="checkbox"]:not(:checked) { border-color: var(--gold-400); }
.checkbox input[type="checkbox"]:checked {
  background-color: var(--gold-400);
  border-color: var(--gold-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230B0E13' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.6 4.6L19 7.2'/%3E%3C/svg%3E");
}
.checkbox input[type="checkbox"]:focus-visible {
  outline: none;
  border-color: var(--gold-400);
  box-shadow: 0 0 0 3px rgba(212,176,99,.26);
}
.field.has-error .checkbox input[type="checkbox"] { border-color: #FF9B8A; }
.checkbox span { font-size: var(--step--1); color: var(--ink-muted); transition: color .18s var(--ease); }
.checkbox input[type="checkbox"]:checked + span { color: var(--ink); }

/* 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(3rem, 6vw, 5rem);
  border-block-start: 1px solid var(--glass-border);
  background: linear-gradient(to bottom, rgba(255,255,255,.022), transparent);
  padding-block: clamp(2.25rem, 4vw, 3.5rem) 1.5rem;
}

/* Brand block plus four link columns, side by side on one line.
   auto-fit was the problem: with a brand spanning two tracks there were six
   tracks to place and only five that fit, so the last column dropped onto a new
   row and the footer grew to twice the height it needed. The track count is now
   stated outright at each breakpoint instead of being inferred. */
.footer-grid {
  display: grid;
  gap: clamp(1.5rem, 1rem + 1.5vw, 2.5rem);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.footer-brand { grid-column: 1 / -1; max-width: 46ch; }

@media (min-width: 600px) {
  .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Everything on one row — brand plus the three columns.
 
   This kicks in at 860px, not 1040px. Windows commonly runs display scaling at
   125%, so a 1280-wide screen reports 1024 CSS pixels; at the old breakpoint
   that dropped the brand onto its own row and pushed all three columns beneath
   it, on a machine the owner would rightly call a desktop.
 
   The tracks are deliberately unequal: Contact carries a 30-character email and
   Company carries one-word links, so the width goes where the text needs it.
   Equal columns split the email across two lines for no reason. */
@media (min-width: 860px) {
  .footer-grid { grid-template-columns: 1.35fr 1.25fr 1.1fr 0.8fr; }
  .footer-brand { grid-column: auto; max-width: 34ch; }
}
.footer-brand p { font-size: var(--step--1); color: var(--ink-subtle); margin-block-start: .9rem; line-height: 1.65; }
.footer-social { display: flex; gap: .55rem; margin-block-start: 1.1rem; }
.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: .5rem; }
.footer-col a, .footer-col span {
  font-size: var(--step--1); color: var(--ink-subtle);
  transition: color .25s var(--ease);
  /* An email address is one unbreakable word. In a narrow column it ran straight
     over the neighbouring column instead of wrapping, so it is allowed to break
     mid-string — nothing else in here is long enough to be affected. */
  overflow-wrap: anywhere;
}
.footer-col li { min-width: 0; }
.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, .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; }
}

/* ══ our work ═══════════════════════════════════════════════════════════
   Photographs of real jobs. This is the part of the page that actually sells,
   so it gets the largest frames and the least text. */

.work-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--gutter);
  flex-wrap: wrap;
  margin-block-end: clamp(1.75rem, 1.2rem + 2vw, 3rem);
}
.work-head h2 { margin-block-start: .8rem; max-width: 20ch; }

/* Deliberately uneven: the newest project takes two columns and the rest fall
   in beside it, so a wall of identical squares never forms. */
.projects {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: clamp(.85rem, .5rem + 1.2vw, 1.5rem);
}
@media (min-width: 900px) {
  .projects { grid-template-columns: repeat(6, 1fr); }
  .project { grid-column: span 2; }
  .project:first-child { grid-column: span 4; }
  .project:first-child .project-frame { aspect-ratio: 16 / 9; }
  /* Rows of three, then two wide, keeps the rhythm from repeating. */
  .project:nth-child(6n + 5) { grid-column: span 3; }
  .project:nth-child(6n + 6) { grid-column: span 3; }

  /* One or two projects have no row to break up, so the stagger is dropped. A
     lone project is CENTRED on four of the six columns rather than stretched
     across all six: full width at a cinematic ratio turned one photograph into
     a wall-sized banner that dwarfed everything under it. */
  .projects.is-single .project { grid-column: 2 / span 4; }
  .projects.is-single .project-frame { aspect-ratio: 16 / 9; }
  .projects.is-pair .project,
  .projects.is-pair .project:first-child { grid-column: span 3; }
  .projects.is-pair .project-frame { aspect-ratio: 3 / 2; }
}

.project {
  position: relative;
  cursor: pointer;
  border: 0;
  background: none;
  padding: 0;
  text-align: start;
  transition: transform .5s var(--ease-out);
}
.project:focus-visible { outline: 2px solid var(--gold-400); outline-offset: 6px; border-radius: var(--radius); }

.project-frame {
  position: relative;
  aspect-ratio: 3 / 2;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--onyx-800);
  box-shadow: 0 0 0 1px var(--glass-border) inset, 0 24px 50px -28px rgba(0,0,0,.9);
}
.project-frame img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .9s var(--ease-out), filter .6s var(--ease);
  filter: saturate(.94) contrast(1.03);
}
.project:hover .project-frame img,
.project:focus-visible .project-frame img { transform: scale(1.055); filter: saturate(1.04) contrast(1.06); }

/* A wash that deepens on hover so the badges stay readable over any photo. */
.project-frame::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(7,10,14,.78), rgba(7,10,14,.06) 52%, transparent);
  opacity: .85;
  transition: opacity .5s var(--ease);
  pointer-events: none;
}
.project:hover .project-frame::after { opacity: 1; }

.project-meta { padding: 1rem .15rem 0; }
.project-meta h3 {
  font-size: var(--step-1);
  line-height: 1.3;
  transition: color .3s var(--ease);
}
.project:hover .project-meta h3 { color: var(--gold-200); }
.project-meta p {
  color: var(--ink-subtle);
  font-size: var(--step--1);
  line-height: 1.6;
  margin-block-start: .35rem;
  /* Two lines is a caption; more is an essay nobody asked for. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ── badges over a thumbnail ─────────────────────────────────────────── */

/* The note the owner left on this exact picture or clip. Bottom-inline-end so
   it never covers the subject, and truncated so a long note cannot take over
   the frame. */
.media-note {
  position: absolute;
  inset-block-end: .7rem;
  inset-inline-end: .7rem;
  z-index: 3;
  max-width: min(78%, 30ch);
  padding: .34rem .6rem;
  border-radius: 8px;
  background: rgba(7, 10, 14, .74);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--gold-200);
  font-size: .75rem;
  line-height: 1.35;
  letter-spacing: .01em;
  text-align: start;
  overflow: hidden;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}

.project-count {
  position: absolute;
  inset-block-start: .7rem;
  inset-inline-start: .7rem;
  z-index: 3;
  padding: .3rem .6rem;
  border-radius: 999px;
  background: rgba(7,10,14,.7);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink);
}
[lang="ar"] .project-count { letter-spacing: 0; text-transform: none; }

.media-play {
  position: absolute;
  inset-block-start: 50%; inset-inline-start: 50%;
  translate: -50% -50%;
  z-index: 3;
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: rgba(7,10,14,.55);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,.3);
  color: var(--marble-100);
  transition: transform .4s var(--ease-out), background .3s var(--ease);
}
/* The icon is a triangle: nudge it so it looks centred rather than measures it. */
.media-play .icon { margin-inline-start: 3px; }
[dir="rtl"] .media-play .icon { scale: -1 1; margin-inline-start: 0; margin-inline-end: 3px; }
.project:hover .media-play { transform: scale(1.1); background: rgba(212,176,99,.85); color: var(--onyx-950); }

.media-dur {
  position: absolute;
  inset-block-start: .7rem;
  inset-inline-end: .7rem;
  z-index: 3;
  padding: .2rem .45rem;
  border-radius: 6px;
  background: rgba(7,10,14,.7);
  border: 1px solid rgba(255,255,255,.14);
  font-size: .68rem;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  direction: ltr;
}

/* ══ viewer ═════════════════════════════════════════════════════════════
   One project at a time, full screen. Photos and clips share the stage so the
   arrows move through a job the way it happened. */

.viewer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: clamp(1rem, .6rem + 1.6vw, 2rem);
  background: rgba(5, 7, 10, .93);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s var(--ease), visibility .35s;
}
.viewer.is-open { opacity: 1; visibility: visible; }

.viewer-inner {
  width: min(1180px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(14px) scale(.985);
  transition: transform .45s var(--ease-out);
}
.viewer.is-open .viewer-inner { transform: none; }

.viewer-stage {
  position: relative;
  aspect-ratio: 3 / 2;
  max-height: 68vh;
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--onyx-900);
  box-shadow: 0 0 0 1px var(--glass-border) inset, 0 40px 90px -40px #000;
}
.viewer-stage img, .viewer-stage video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: var(--onyx-950);
}
/* Each swap fades rather than snaps — a hard cut between two photographs of the
   same floor reads as a glitch. */
.viewer-stage > * { animation: viewer-in .45s var(--ease-out); }
@keyframes viewer-in { from { opacity: 0; transform: scale(1.012); } to { opacity: 1; transform: none; } }

.viewer-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.viewer-text { min-width: 0; flex: 1 1 220px; }
.viewer-text h4 { font-size: var(--step-1); font-family: var(--font-display); font-weight: 400; }
.viewer-text p { color: var(--ink-muted); font-size: var(--step--1); margin-block-start: .25rem; }

.viewer-thumbs {
  display: flex;
  gap: .5rem;
  overflow-x: auto;
  padding-block: .25rem;
  scrollbar-width: none;
  max-width: 100%;
}
.viewer-thumbs::-webkit-scrollbar { display: none; }
.viewer-thumb {
  position: relative;
  flex: none;
  width: 74px; height: 50px;
  border-radius: 7px;
  overflow: hidden;
  border: 1px solid transparent;
  opacity: .5;
  cursor: pointer;
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
  padding: 0; background: none;
}
.viewer-thumb img { width: 100%; height: 100%; object-fit: cover; }
.viewer-thumb:hover { opacity: .85; }
.viewer-thumb[aria-current="true"] { opacity: 1; border-color: var(--gold-400); }
.viewer-thumb .tp {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  background: rgba(7,10,14,.35);
  color: #fff;
}

.viewer-close, .viewer-nav {
  position: absolute;
  z-index: 3;
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 1px solid var(--glass-border);
  background: rgba(255,255,255,.07);
  backdrop-filter: blur(10px);
  color: var(--ink);
  cursor: pointer;
  transition: background .25s var(--ease), transform .25s var(--ease-out);
}
.viewer-close:hover, .viewer-nav:hover { background: rgba(255,255,255,.16); transform: scale(1.06); }
.viewer-close { inset-block-start: 1.1rem; inset-inline-end: 1.1rem; }
.viewer-nav { inset-block-start: 50%; translate: 0 -50%; }
.viewer-nav.prev { inset-inline-start: 1.1rem; }
.viewer-nav.next { inset-inline-end: 1.1rem; }
/* The chevron points along reading order, so it flips with the document. */
.viewer-nav.prev .icon { scale: -1 1; }
[dir="rtl"] .viewer-nav.prev .icon { scale: 1 1; }
[dir="rtl"] .viewer-nav.next .icon { scale: -1 1; }
@media (max-width: 640px) {
  .viewer-nav { width: 40px; height: 40px; }
  .viewer-nav.prev { inset-inline-start: .4rem; }
  .viewer-nav.next { inset-inline-end: .4rem; }
}

/* ══ motion polish ══════════════════════════════════════════════════════
   The reveal was a plain fade-and-rise. Adding a whisper of blur and scale
   makes elements resolve into place instead of sliding, which is the
   difference between "animated" and "considered". */
[data-reveal] {
  transition-duration: .9s, .9s, .9s;
  transition-timing-function: var(--ease-out);
}

/* Cards lift toward the pointer. Subtle enough to feel physical, small enough
   never to shift the layout. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .card, .project, .stat { will-change: transform; }
  .stat { transition: transform .5s var(--ease-out), background .4s var(--ease); }
  .stat:hover { transform: translateY(-5px); background: rgba(26, 31, 40, .82); }
  .why-item { transition: transform .5s var(--ease-out); }
  .why-item:hover { transform: translateX(4px); }
  [dir="rtl"] .why-item:hover { transform: translateX(-4px); }
  .why-item:hover .why-num { opacity: 1; color: var(--gold-300); }
  .why-num { transition: opacity .4s var(--ease), color .4s var(--ease); }
}

/* A faint film grain over the whole page. Flat dark panels band on cheap
   screens and read as synthetic; a little noise breaks the gradients up and is
   most of why expensive sites feel expensive. */
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");
}
@media print { body::after { display: none; } }