/* ============================================================================
   SAAED SERVICE KSA — DESIGN SYSTEM
   Riyadh. Light-green light theme: pale-mint canvas, white surfaces, deep-green
   ink, one light-green accent (#22C55E) that carries every call to action.
   Sora / IBM Plex (en) · Tajawal (ar). One system, 270+ pages.
   ============================================================================ */

/* ---------- 1. TOKENS ---------------------------------------------------- */
:root {
  /* GREEN — the one accent, light-green family */
  --green-50:  #F0FDF4;
  --green-100: #DCFCE7;
  --green-200: #BBF7D0;
  --green-300: #86EFAC;
  --green-400: #4ADE80;               /* green as TEXT on deep green (7:1) */
  --green-500: #22C55E;               /* PRIMARY light-green fill / CTA bg */
  --green-600: #16A34A;               /* hover */
  --green-700: #15803D;               /* green as TEXT on light (4.8:1) */
  --green-800: #166534;
  --green-900: #14532D;
  --green-950: #052E16;               /* ink ON the light-green fill (6.5:1) */

  /* Deep greens — inverted bands, footer, photo scrims */
  --deep-900: #06231A;                /* deepest — footer */
  --deep-800: #0B3D2C;                /* inverted band canvas */
  --deep-700: #14503B;                /* raised surface on deep */
  --deep-600: #1E6349;                /* borders on deep */

  /* Warm neutral ramp, very slightly green-shifted so it never reads grey-blue */
  --sand-50:  #FBFDFB;
  --sand-100: #F6FBF7;                /* page canvas */
  --sand-200: #EDF5EF;
  --sand-300: #DFEBE3;
  --ink-700:  #335443;
  --ink-800:  #1C3E2E;
  --ink-900:  #0B2E1C;                /* body text */
  --white: #FFFFFF;

  --gold-500: #F0B429;                /* star glyphs only */

  /* Semantic — LIGHT (canonical) */
  --bg: var(--sand-100);
  --bg-alt: var(--white);
  --surface: var(--white);
  --surface-raised: var(--white);
  --surface-tint: var(--green-50);
  --text-primary: var(--ink-900);
  /* Deepened from #4A6B59. Together with --accent-text below this is what pays for the
     ambient video being visible at all: those two are the weakest text on the page, and
     every extra point of contrast they carry converts directly into a lighter scrim.
     Still clearly lighter than --text-primary, so the type hierarchy is intact. */
  --text-muted: #3D5C4B;              /* 6.6:1 on --bg */
  --border: rgba(11, 46, 28, 0.10);
  --border-strong: rgba(11, 46, 28, 0.20);
  --accent: var(--green-500);          /* fills */
  --accent-ink: var(--green-950);      /* text/icons ON a fill */
  /* green-900, not green-700. green-700 gives only 4.79:1 on the plain background — AA,
     but with 0.29 to spare, so no useful video scrim passed at all. Each step deeper buys
     scrim headroom: green-700 → 10% video, green-800 → 22%, green-900 → 50%. See §1b. */
  --accent-text: var(--green-900);     /* accent as text on light */
  --accent-hover: var(--green-400);
  --accent-deep: var(--deep-800);
  --accent-tint: rgba(34, 197, 94, 0.12);
  --accent-tint-2: rgba(34, 197, 94, 0.22);
  --accent-glow: rgba(22, 163, 74, 0.28);
  --shadow-key: rgba(6, 35, 26, 0.10);

  /* Type */
  --font-display: 'Sora', system-ui, sans-serif;
  --font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --fs-caption: 0.75rem;
  --fs-small: 0.875rem;
  --fs-body: 1rem;
  --fs-lead: 1.1875rem;
  --fs-h3: 1.4375rem;
  --fs-h2: clamp(1.9rem, 3.7vw, 2.6rem);
  --fs-h1: clamp(2.4rem, 5.4vw, 3.7rem);
  --fs-display: clamp(3rem, 7.5vw, 5.25rem);

  /* Spacing (8pt) */
  --sp-1: 4px;  --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;  --sp-6: 24px;
  --sp-8: 32px; --sp-12: 48px; --sp-16: 64px; --sp-24: 96px; --sp-32: 128px;

  /* Layout */
  --container: 1200px;
  --container-wide: 1440px;
  --gutter: clamp(1.25rem, 5vw, 2.5rem);

  /* Radius — a light UI needs more roundness than a dark one to feel soft */
  --r-xs: 8px; --r-sm: 12px; --r-md: 18px; --r-lg: 26px; --r-pill: 999px;

  /* Signature skew */
  --skew: -7deg;

  /* Motion */
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-quint: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.77, 0, 0.175, 1);

  --shadow-card: 0 1px 2px rgba(6, 35, 26, 0.06), 0 6px 20px -12px rgba(6, 35, 26, 0.14);
  --shadow-raised: 0 24px 60px -28px rgba(6, 35, 26, 0.30);
  --shadow-accent: 0 10px 28px -10px var(--accent-glow);

  color-scheme: light;
}

/* Inverted scope — deep-green sections re-point the SAME semantic tokens, so
   every component inside works unchanged (cards, badges, buttons, lists…). */
.on-deep {
  --bg: var(--deep-800);
  --bg-alt: var(--deep-700);
  --surface: rgba(255, 255, 255, 0.055);
  --surface-raised: rgba(255, 255, 255, 0.09);
  --surface-tint: rgba(255, 255, 255, 0.06);
  --text-primary: #F4FBF6;
  --text-muted: #A8CDB8;
  --border: rgba(255, 255, 255, 0.13);
  --border-strong: rgba(255, 255, 255, 0.26);
  --accent-text: var(--green-400);
  --accent-tint: rgba(74, 222, 128, 0.14);
  --accent-tint-2: rgba(74, 222, 128, 0.24);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.25);
  color: var(--text-primary);
}

/* ---------- 2. RESET / BASE --------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 90px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* The canvas colour lives on <html> so the fixed video layer (negative z-index,
   see §1b) paints ABOVE it. If <body> carried an opaque background instead, its
   background box would paint over the video and hide it entirely. */
html { background: var(--bg); }

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.65;
  color: var(--text-primary);
  background: transparent;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-optical-sizing: auto;
}

/* ---------- 1b. AMBIENT BACKGROUND VIDEO --------------------------------- */
/* A fixed Riyadh skyline loop behind the entire page.
   The scrim alphas here are DERIVED, not picked by eye. process-video.mjs lifts the
   footage's black point so its measured luminance floor is 0.321; each alpha below is
   the LOWEST value that still clears WCAG AA 4.5:1 for the weakest text colour on that
   surface, composited against the worst-case video pixel:
     · light areas  0.56  → 44% of the video visible. Capped by --text-muted (measured 4.60:1).
     · deep bands   0.85  → 15% visible. Capped by on-deep --text-muted #A8CDB8 (4.64:1);
                            white body text there sits at 7.7:1. A BRIGHT video cannot show
                            much through a dark band without washing it out, which is why
                            this figure does not move when the light one does.
   The light figure is bought entirely with text colour, not with the scrim: measured,
   --accent-text at green-700 allowed only 10% video, green-800 22%, green-900 44%.
   AND DERIVE FROM ALL FRAMES, not a sample: a 9-frame estimate put this at 0.50, which
   measured 4.38:1 on the real page. Always confirm against rendered pixels.
   Re-grading the video changes the floor, which changes both alphas. Re-measure. */
.site-video {
  position: fixed; inset: 0; z-index: -1;
  overflow: hidden; pointer-events: none;
}
.site-video .sv-poster,
.site-video .sv-video {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* The video fades in over the poster once it can actually play, so there is no
   flash of empty space and no layout dependency on the network. */
.site-video .sv-video { opacity: 0; transition: opacity 1.4s var(--ease-out-quart); }
.site-video .sv-video.ready { opacity: 1; }
/* NB: the scrim colour and opacity are ALSO inlined on the element in layout.mjs as a
   safety net, so a stale or blocked stylesheet can never expose the raw video behind
   body text. Inline styles win, so if you change this colour, change it there too. */
.site-video .sv-scrim { position: absolute; inset: 0; background: var(--bg); opacity: 0.56; }

@media (prefers-reduced-motion: reduce) {
  .site-video .sv-video { display: none; }
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* NB: do NOT set `svg { fill: currentColor }` here. Our icon set is stroke-based
   and declares fill="none" on the root <svg>; a CSS fill beats that presentation
   attribute and turns every outline icon into a solid blob. Icons that ARE solid
   (star, bolt, flags, social) set fill on their own paths. */
a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; color: inherit; }
ul, ol { list-style: none; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; border-radius: var(--r-xs); }
.on-deep :focus-visible { outline-color: var(--green-300); }
::selection { background: var(--green-200); color: var(--green-950); }

/* ---------- 3. TYPOGRAPHY ------------------------------------------------ */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.13; text-wrap: balance; color: var(--text-primary); }
h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; }
h2 { font-size: var(--fs-h2); letter-spacing: -0.022em; }
h3 { font-size: var(--fs-h3); font-weight: 650; letter-spacing: -0.015em; line-height: 1.25; }
h4 { font-size: 1.0625rem; font-weight: 600; }
p { text-wrap: pretty; }
strong, b { font-weight: 650; color: var(--text-primary); }

.display { font-size: var(--fs-display); font-weight: 800; letter-spacing: -0.035em; line-height: 1.0; }
.lead { font-size: var(--fs-lead); color: var(--text-muted); line-height: 1.55; max-width: 62ch; }
.eyebrow {
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.15em; color: var(--accent-text);
  display: inline-flex; align-items: center; gap: var(--sp-2);
}
.eyebrow::before { content: ""; width: 22px; height: 2px; border-radius: 2px; background: var(--accent); flex: none; }
.text-muted { color: var(--text-muted); }
.text-accent { color: var(--accent-text); }
/* accent words inside a headline sit on a soft light-green wash */
h1 .text-accent, h2 .text-accent { position: relative; }
h1 .text-accent::after {
  content: ""; position: absolute; inset-inline: -2px; bottom: 0.06em; height: 0.34em; z-index: -1;
  background: var(--accent-tint-2); border-radius: 3px; transform: skewX(var(--skew));
}
.prose p { max-width: 70ch; margin-bottom: var(--sp-4); color: var(--text-primary); }
.prose p:last-child { margin-bottom: 0; }
.prose h2 { margin: var(--sp-12) 0 var(--sp-4); }
.prose h3 { margin: var(--sp-8) 0 var(--sp-3); }
.prose ul, .prose ol { margin: var(--sp-4) 0; display: grid; gap: var(--sp-3); }
.prose li { position: relative; padding-inline-start: var(--sp-6); max-width: 68ch; }
.prose ul li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.6em; width: 9px; height: 9px;
  background: var(--accent); transform: skewX(var(--skew)); border-radius: 2px;
}
.prose ol { counter-reset: n; }
.prose ol li { padding-inline-start: var(--sp-8); counter-increment: n; }
.prose ol li::before {
  content: counter(n); position: absolute; inset-inline-start: 0; top: 0.1em;
  font-family: var(--font-mono); font-size: 0.8rem; font-weight: 600; color: var(--accent-text);
  width: 22px; height: 22px; display: grid; place-items: center;
  background: var(--accent-tint); border-radius: var(--r-xs);
}
.prose a:not(.btn) { color: var(--accent-text); font-weight: 550; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--green-800); }
.prose blockquote {
  margin: var(--sp-8) 0; padding: var(--sp-6) var(--sp-8);
  background: var(--surface-tint); border-inline-start: 4px solid var(--accent);
  border-radius: var(--r-sm);
}
.prose blockquote p { font-size: 1.0625rem; }
.num { font-variant-numeric: tabular-nums; }

/* ---------- 4. LAYOUT ---------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { max-width: var(--container-wide); }
.container-narrow { max-width: 820px; }
.section { padding-block: var(--sp-24); }
@media (min-width: 768px) { .section { padding-block: var(--sp-32); } }
.section-tight { padding-block: var(--sp-16); }
.grid { display: grid; gap: var(--sp-6); }
.cols-2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.cols-3 { grid-template-columns: repeat(auto-fit, minmax(288px, 1fr)); }
.cols-4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.cols-6 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-3); }
.stack { display: flex; flex-direction: column; }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
.divider { height: 1px; background: var(--border); border: 0; }

.section-head { max-width: 48rem; margin-bottom: var(--sp-12); }
.section-head.center { margin-inline: auto; }
.section-head h2 { margin-top: var(--sp-3); }
.section-head .lead { margin-top: var(--sp-4); }

/* ---------- 5. BUTTONS --------------------------------------------------- */
.btn {
  --btn-bg: var(--accent); --btn-fg: var(--accent-ink);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  font-family: var(--font-body); font-weight: 650; font-size: var(--fs-body); letter-spacing: 0.005em;
  padding: 15px 26px; min-height: 52px; border-radius: var(--r-pill); border: 1.5px solid transparent;
  background: var(--btn-bg); color: var(--btn-fg); cursor: pointer; position: relative;
  transition: transform .16s var(--ease-out-quart), background-color .16s var(--ease-out-quart),
              box-shadow .16s var(--ease-out-quart), border-color .16s var(--ease-out-quart), color .16s;
  white-space: nowrap; text-align: center;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: scale(0.975); }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-accent); }
.btn-ghost { background: transparent; color: var(--text-primary); border-color: var(--border-strong); }
.btn-light { background: var(--white); color: var(--green-900); }
.btn-deep  { background: var(--deep-800); color: var(--white); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--green-400); transform: translateY(-2px); box-shadow: 0 14px 32px -10px var(--accent-glow); }
  .btn-ghost:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-text); transform: translateY(-2px); }
  .btn-light:hover { background: var(--green-50); transform: translateY(-2px); }
  .btn-deep:hover { background: var(--deep-700); transform: translateY(-2px); }
}
.on-deep .btn-ghost { color: var(--text-primary); border-color: var(--border-strong); }
.btn-lg { padding: 18px 32px; min-height: 60px; font-size: 1.0625rem; }
.btn-block { width: 100%; }
/* nested arrow chip */
.btn .chip {
  width: 30px; height: 30px; border-radius: var(--r-pill); margin-inline-end: -8px; margin-inline-start: 4px;
  display: grid; place-items: center; background: rgba(5, 46, 22, 0.16);
}
.btn-ghost .chip { background: var(--accent-tint-2); }
.btn .chip svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out-quart); }
@media (hover: hover) { .btn:hover .chip svg { transform: translateX(2px); } }

/* 3D pressable CTA (the "Get help now" key) */
.btn-3d {
  position: relative; overflow: hidden;
  box-shadow: 0 4px 0 0 var(--green-700), 0 12px 24px -8px var(--accent-glow);
  transition: transform .13s var(--ease-out-quart), box-shadow .13s var(--ease-out-quart), background-color .16s;
}
@media (hover: hover) { .btn-3d:hover { transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--green-700), 0 18px 32px -8px var(--accent-glow); } }
.btn-3d:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--green-700), 0 6px 12px -8px var(--accent-glow); }
.btn-3d::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%);
  transform: translateX(-130%); transition: transform .75s var(--ease-out-quart);
}
@media (hover: hover) { .btn-3d:hover::after { transform: translateX(130%); } }

/* ---------- 6. BADGES / PILLS / TAGS ------------------------------------ */
.badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-caption); font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.1em;
  padding: 7px 13px; border-radius: var(--r-pill); background: var(--surface);
  color: var(--text-muted); border: 1px solid var(--border);
}
.badge-green { background: var(--accent-tint); color: var(--accent-text); border-color: var(--accent-tint-2); }
.badge-solid { background: var(--accent); color: var(--accent-ink); border-color: transparent; font-weight: 600; }
.badge-live  { background: var(--deep-800); color: var(--green-300); border-color: var(--deep-600); }
.on-deep .badge { background: var(--surface-raised); }
/* legacy alias kept so no template can silently lose its pill styling */
.badge-red { background: var(--accent-tint); color: var(--accent-text); border-color: var(--accent-tint-2); }
.dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: none; }
.dot-pulse { animation: pulse 2s var(--ease-inout) infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 currentColor; } 50% { opacity: .5; box-shadow: 0 0 0 5px transparent; } }

.tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); padding: 7px 14px;
  border-radius: var(--r-pill); background: var(--surface); border: 1px solid var(--border);
  color: var(--text-primary); transition: border-color .15s, background-color .15s, transform .15s, color .15s;
}
a.tag:hover { border-color: var(--accent); background: var(--accent-tint); color: var(--accent-text); transform: translateY(-1px); }
.tag svg { width: 15px; height: 15px; flex: none; color: var(--accent-text); }

/* ---------- 7. CARDS ----------------------------------------------------- */
.card {
  position: relative; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--r-md); padding: var(--sp-8); overflow: hidden;
  box-shadow: var(--shadow-card);
  transition: transform .22s var(--ease-out-quart), border-color .22s var(--ease-out-quart), box-shadow .22s var(--ease-out-quart);
}
.card::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--accent);
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease-out-quart);
}
[dir="rtl"] .card::before { transform-origin: right; }
@media (hover: hover) and (pointer: fine) {
  .card-hover:hover { transform: translateY(-5px); border-color: var(--accent-tint-2); box-shadow: 0 22px 44px -22px var(--accent-glow); }
  .card-hover:hover::before { transform: scaleX(1); }
}
.card-icon {
  width: 54px; height: 54px; border-radius: var(--r-sm); display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-text); margin-bottom: var(--sp-6);
  border: 1px solid var(--accent-tint-2); transition: background-color .22s, color .22s;
}
.card-icon svg { width: 27px; height: 27px; }
@media (hover: hover) { .card-hover:hover .card-icon { background: var(--accent); color: var(--accent-ink); border-color: transparent; } }
.card h3 { margin-bottom: var(--sp-3); }
.card p { color: var(--text-muted); }
.card-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: var(--sp-6);
  font-weight: 650; font-size: var(--fs-small); color: var(--accent-text);
}
.card-link svg { width: 16px; height: 16px; transition: transform .2s var(--ease-out-quart); }
@media (hover: hover) { .card-hover:hover .card-link svg { transform: translateX(3px); } }
a.card { color: inherit; display: block; }
.card-compact { padding: var(--sp-6); }
.card-compact .card-icon { width: 44px; height: 44px; margin-bottom: var(--sp-4); }
.card-compact .card-icon svg { width: 22px; height: 22px; }

/* Feature card — double bezel */
.card-feature { padding: 6px; background: linear-gradient(160deg, var(--green-100), var(--sand-200)); border-radius: var(--r-lg); }
.card-feature > .inner { background: var(--white); border-radius: calc(var(--r-lg) - 6px); padding: var(--sp-8); border: 1px solid var(--border); }

/* ---------- 8. STAT COUNTERS -------------------------------------------- */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--sp-8); }
.stat .value {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 4.8vw, 3.5rem);
  line-height: 1; font-variant-numeric: tabular-nums; letter-spacing: -0.025em;
  display: flex; align-items: baseline; gap: 2px; color: var(--text-primary);
}
.stat .value .unit { font-size: 0.4em; color: var(--accent-text); }
.stat .rule { width: 44px; height: 3px; border-radius: 3px; background: var(--accent); margin: var(--sp-3) 0; }
.stat .label { font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase;
               letter-spacing: 0.09em; color: var(--text-muted); }

/* ---------- 9. TELEMETRY STRIP ------------------------------------------ */
.telemetry {
  display: inline-flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--text-muted); padding: 11px 18px; border: 1px solid var(--border); border-radius: var(--r-pill);
  background: var(--surface);
}
.telemetry .bracket { color: var(--accent-text); }
.telemetry .live { color: var(--accent-text); display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.telemetry .sep { color: var(--border-strong); }
.hero-photo .telemetry, .hero.has-photo .telemetry {
  background: rgba(6, 35, 26, 0.42); border-color: rgba(255, 255, 255, 0.24); color: #DCFCE7;
  backdrop-filter: blur(10px);
}
.hero-photo .telemetry .live, .hero.has-photo .telemetry .live,
.hero-photo .telemetry .bracket, .hero.has-photo .telemetry .bracket { color: var(--green-300); }
.hero-photo .telemetry .sep, .hero.has-photo .telemetry .sep { color: rgba(255, 255, 255, 0.35); }

/* ---------- 10. HERO ----------------------------------------------------- */
.hero { position: relative; overflow: hidden; padding-block: var(--sp-16) var(--sp-24); }
.hero-inner { display: grid; gap: var(--sp-12); align-items: center; }
.hero-inner > * { min-width: 0; }
@media (min-width: 960px) {
  .hero-inner { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-16); }
}
.hero h1 { margin: var(--sp-6) 0; }
.hero .lead { margin-bottom: var(--sp-8); }
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-bottom: var(--sp-8); }
.hero-trust { display: flex; flex-wrap: wrap; gap: var(--sp-4) var(--sp-8); align-items: center; margin-top: var(--sp-8);
              padding-top: var(--sp-8); border-top: 1px solid var(--border); }
.hero-badge-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-6); }

/* light hero without a photo: pale mint wash + green map grid + soft glow */
.hero-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.hero-bg::before {
  content: ""; position: absolute; inset: -2px;
  background-image: linear-gradient(rgba(21, 128, 61, 0.10) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(21, 128, 61, 0.10) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(115% 85% at 78% 0%, #000 12%, transparent 72%);
}
.hero-bg::after {
  content: ""; position: absolute; inset-inline-end: -12%; top: -30%; width: 62%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.26), transparent 66%);
  filter: blur(10px);
}
.hero.band-hero, .hero.band-red { background: linear-gradient(150deg, var(--green-50) 0%, var(--sand-100) 46%, var(--white) 100%); }
.hero > .container { position: relative; z-index: 2; }

/* ---------- 11. BANDS / SECTION SKINS ----------------------------------- */
/* Bands read as the same colours as before, but at 0.9 alpha so the ambient video
   is not simply switched off wherever a band happens to sit. */
.band { background: rgba(255, 255, 255, 0.90); border-block: 1px solid var(--border); }
.band-tint { background: rgba(240, 253, 244, 0.90); border-block: 1px solid var(--accent-tint-2); }
/* Deep-green bands are the one place the video can genuinely be SEEN: white text on
   dark green has ~8:1 of headroom, so 20% of the skyline can come through without
   costing anything. See the derivation note in §1b. */
.band-deep { background: rgba(11, 61, 44, 0.85); position: relative; overflow: hidden; }
.band-deep::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: radial-gradient(100% 100% at 50% 0%, #000 10%, transparent 70%);
}
.band-deep > .container { position: relative; z-index: 1; }
.angle-top { clip-path: polygon(0 3.5vw, 100% 0, 100% 100%, 0 100%); }

/* Oversized numerals — how-it-works */
.steps { display: grid; gap: var(--sp-8); }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: var(--sp-12); } }
.step { position: relative; padding-top: var(--sp-8); }
.step::before { content: ""; position: absolute; top: 0; inset-inline-start: 0; width: 56px; height: 3px; border-radius: 3px; background: var(--accent); }
.step .n {
  font-family: var(--font-display); font-weight: 800; font-size: clamp(3.5rem, 8vw, 6rem); line-height: 0.85;
  -webkit-text-stroke: 2px var(--accent); color: transparent; letter-spacing: -0.045em;
  margin-bottom: var(--sp-4); display: block;
}
.on-deep .step .n { -webkit-text-stroke-color: var(--green-400); }
.step h3 { margin-bottom: var(--sp-3); }
.step p { color: var(--text-muted); }

/* ---------- 12. FAQ ACCORDION ------------------------------------------- */
.faq { border-top: 1px solid var(--border); }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-q {
  width: 100%; display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-6);
  text-align: start; padding: var(--sp-6) 0; background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 650; font-size: 1.0625rem; color: var(--text-primary);
  transition: color .15s;
}
.faq-q:hover { color: var(--accent-text); }
.faq-icon {
  flex: none; width: 28px; height: 28px; position: relative; margin-top: 1px; border-radius: 50%;
  background: var(--accent-tint); transition: background-color .25s, transform .3s var(--ease-out-quart);
}
.faq-icon::before, .faq-icon::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; border-radius: 2px;
  background: var(--accent-text); transform: translate(-50%, -50%);
  transition: transform .3s var(--ease-out-quart), background-color .25s;
}
.faq-icon::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-q[aria-expanded="true"] .faq-icon { background: var(--accent); }
.faq-q[aria-expanded="true"] .faq-icon::before,
.faq-q[aria-expanded="true"] .faq-icon::after { background: var(--accent-ink); }
.faq-q[aria-expanded="true"] .faq-icon::after { transform: translate(-50%, -50%) rotate(0); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .32s var(--ease-out-quart); }
.faq-q[aria-expanded="true"] + .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { padding-bottom: var(--sp-6); color: var(--text-muted); max-width: 72ch; }

/* ---------- 13. HEADER / NAV -------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(246, 251, 247, 0.82);
  backdrop-filter: blur(18px) saturate(1.25);
  border: 1px solid transparent; border-bottom-color: var(--border);
  transition: top .4s var(--ease-out-expo), background-color .4s ease, border-color .4s ease,
              border-radius .4s ease, box-shadow .4s ease, margin .4s var(--ease-out-expo);
  animation: hdrIn .7s var(--ease-out-expo) both;
}
@keyframes hdrIn { from { opacity: 0; } to { opacity: 1; } }
.site-header.scrolled {
  top: 10px; margin-inline: 12px;
  background: rgba(255, 255, 255, 0.94);
  border-color: var(--border); border-radius: var(--r-lg);
  box-shadow: 0 18px 40px -18px rgba(6, 35, 26, 0.22), 0 2px 6px rgba(6, 35, 26, 0.06);
}
.nav { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); height: 70px; }

.brand { display: inline-flex; align-items: center; transition: transform .3s var(--ease-out-quart); }
@media (hover: hover) { .brand:hover { transform: translateY(-1px) scale(1.03); } }
.brand-logo { height: 42px; width: auto; display: block; }
@media (max-width: 400px) { .brand-logo { height: 34px; } }
.site-footer .brand-logo, .mm-head .brand-logo { height: 46px; }

/* nav links + sliding indicator */
.nav-links { display: none; align-items: center; gap: 1px; position: relative; }
.nav-links a {
  font-size: var(--fs-small); font-weight: 550; color: var(--ink-700);
  padding: 9px 12px; border-radius: var(--r-pill); position: relative; z-index: 1;
  transition: color .18s var(--ease-out-quart), transform .28s var(--ease-out-quart), background-color .18s;
}
@media (hover: hover) { .nav-links a:hover { color: var(--green-800); transform: translateY(-2px); background: var(--accent-tint); } }
.nav-links a:active { transform: translateY(0); }
.nav-indicator {
  position: absolute; top: 50%; left: 0; height: 3px; width: 1px;
  transform: translate(var(--ix, 0px), 16px) scaleX(var(--iw, 0));
  transform-origin: left center;
  background: var(--accent); border-radius: 3px; box-shadow: 0 0 12px 1px var(--accent-glow);
  opacity: 0; z-index: 0; pointer-events: none;
  transition: transform .5s var(--ease-out-expo), opacity .3s ease;
}
.nav-links.show-ind .nav-indicator { opacity: 1; }
.nav-cta { display: none; align-items: center; gap: var(--sp-3); }
.nav-phone {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono);
  font-weight: 550; font-size: var(--fs-small); color: var(--text-primary);
  padding: 8px 12px; border-radius: var(--r-pill); transition: background-color .15s, color .15s;
  white-space: nowrap;   /* a grouped number must never wrap mid-digits */
}
.nav-phone svg { width: 18px; height: 18px; color: var(--accent-text); }
@media (hover: hover) { .nav-phone:hover { background: var(--accent-tint); color: var(--accent-text); } }
.nav-toggle {
  display: grid; place-items: center; width: 46px; height: 46px; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; box-shadow: var(--shadow-card);
}
.nav-toggle svg { width: 22px; height: 22px; }
.lang-switch {
  display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); font-weight: 550;
  color: var(--text-primary); padding: 8px 13px; border: 1px solid var(--border-strong);
  border-radius: var(--r-pill); transition: border-color .15s, color .15s, background-color .15s; white-space: nowrap;
}
.lang-switch:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-tint); }
.lang-switch svg { width: 16px; height: 16px; flex: none; }
.lang-switch-block { justify-content: center; width: 100%; padding: 15px; min-height: 52px; }
/* NB: media query AFTER the base rule — media queries add no specificity, so order decides. */
@media (min-width: 1080px) { .nav-links, .nav-cta { display: flex; } .nav-toggle { display: none; } }

/* Mobile drawer */
.mobile-menu {
  position: fixed; inset: 0; z-index: 60; background: var(--bg); transform: translateX(100%);
  transition: transform .35s var(--ease-out-quint); display: flex; flex-direction: column;
  padding: var(--sp-6) var(--gutter); overflow-y: auto;
}
[dir="rtl"] .mobile-menu { transform: translateX(-100%); }
.mobile-menu.open, [dir="rtl"] .mobile-menu.open { transform: translateX(0); }
.mobile-menu .mm-head { display: flex; align-items: center; justify-content: space-between; height: 70px; }
.mobile-menu nav { display: grid; gap: var(--sp-1); margin-top: var(--sp-6); }
.mobile-menu nav a {
  font-family: var(--font-display); font-weight: 650; font-size: 1.375rem; padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--border);
}
.mobile-menu nav a:hover { color: var(--accent-text); }
.mobile-menu .mm-cta { margin-top: auto; display: grid; gap: var(--sp-3); padding-block: var(--sp-8); }

/* ---------- 14. STICKY MOBILE CALL BAR ---------------------------------- */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-3) calc(var(--sp-3) + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.92); backdrop-filter: blur(16px); border-top: 1px solid var(--border);
  box-shadow: 0 -8px 28px -14px rgba(6, 35, 26, 0.28);
  transform: translateY(110%); transition: transform .3s var(--ease-out-quart);
}
.callbar.show { transform: translateY(0); }
.callbar .btn { flex: 1; min-height: 54px; }
.callbar .btn-wa { flex: 0 0 54px; padding: 0; }
@media (min-width: 1080px) { .callbar { display: none; } }

/* ---------- 14b. FLOATING LANGUAGE SWITCH (circular FAB) ---------------- */
.lang-fab {
  position: fixed;
  inset-block-end: calc(88px + env(safe-area-inset-bottom));
  inset-inline-end: 16px;
  z-index: 56;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  width: 60px; height: 60px; border-radius: 50%;
  background: var(--deep-800); color: var(--green-200);
  border: 2px solid var(--green-400);
  box-shadow: 0 8px 24px -6px rgba(6, 35, 26, 0.45);
  transition: transform .18s var(--ease-out-quart), box-shadow .18s ease, background-color .15s ease;
  animation: langFabIn .45s var(--ease-out-quint) both;
}
.lang-fab::before {
  content: ""; position: absolute; inset: -2px; border-radius: 50%;
  border: 2px solid var(--green-400); opacity: 0.5; pointer-events: none;
  animation: langFabPulse 2.6s ease-out infinite;
}
.lang-fab svg { width: 22px; height: 22px; }
.lang-fab .lang-fab-code { font-family: var(--font-mono); font-weight: 600; font-size: 11px; line-height: 1; letter-spacing: 0.06em; }
.lang-fab:hover { background: var(--deep-700); transform: translateY(-2px) scale(1.05); }
.lang-fab:active { transform: scale(0.97); }
@keyframes langFabIn { from { opacity: 0; transform: scale(0.6); } to { opacity: 1; transform: scale(1); } }
@keyframes langFabPulse { 0% { transform: scale(1); opacity: 0.5; } 70%, 100% { transform: scale(1.5); opacity: 0; } }
@media (min-width: 1080px) { .lang-fab { inset-block-end: 24px; inset-inline-end: 24px; width: 64px; height: 64px; } }

/* ---------- 15. FOOTER --------------------------------------------------- */
.site-footer {
  background: var(--deep-900); color: #E7F6EC; padding-block: var(--sp-24) var(--sp-12);
  margin-bottom: 74px; position: relative; overflow: hidden;
}
.site-footer::before {
  content: ""; position: absolute; inset-inline-start: -6%; top: -40%; width: 46%; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.16), transparent 68%); pointer-events: none;
}
@media (min-width: 1080px) { .site-footer { margin-bottom: 0; } }
.site-footer > .container { position: relative; z-index: 1; }
.footer-grid { display: grid; gap: var(--sp-12); grid-template-columns: 1fr; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; } }
.footer-col h4 {
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--green-300); margin-bottom: var(--sp-4); font-weight: 500;
}
.footer-col ul { display: grid; gap: var(--sp-2); }
.footer-col a { font-size: var(--fs-small); color: #C9E6D4; transition: color .15s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between; align-items: center;
  margin-top: var(--sp-16); padding-top: var(--sp-8); border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: var(--fs-small); color: #A8CDB8;
}
.footer-social { display: flex; gap: var(--sp-2); margin-top: var(--sp-6); }
.footer-social a {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14); color: #E7F6EC;
  transition: background-color .18s, transform .18s, color .18s;
}
.footer-social a:hover { background: var(--accent); color: var(--accent-ink); transform: translateY(-2px); }
.footer-social svg { width: 20px; height: 20px; }

/* ---------- 16. BREADCRUMBS --------------------------------------------- */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center;
  font-size: var(--fs-small); color: var(--text-muted); padding-block: var(--sp-6);
}
.breadcrumb a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }
.breadcrumb .sep { color: var(--border-strong); }

/* ---------- 17. FORMS ---------------------------------------------------- */
.field { display: grid; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.field label { font-size: var(--fs-small); font-weight: 550; color: var(--text-primary); }
.field input, .field textarea, .field select {
  background: var(--white); border: 1.5px solid var(--border-strong); border-radius: var(--r-sm);
  padding: 13px 15px; color: var(--text-primary); transition: border-color .15s, box-shadow .15s; width: 100%;
}
.field input::placeholder, .field textarea::placeholder { color: #7C9A89; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint);
}
.form-note { font-size: var(--fs-caption); color: var(--text-muted); }

/* ---------- 18. CTA BAND ------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden; border-radius: var(--r-lg);
  background: linear-gradient(135deg, var(--deep-800) 0%, var(--deep-900) 62%, #0A4B34 100%);
  padding: var(--sp-16) var(--gutter); text-align: center; color: #F4FBF6;
  box-shadow: var(--shadow-raised);
}
.cta-band h2 { color: var(--white); margin-bottom: var(--sp-4); }
.cta-band .lead { color: #BFE3CD; margin-inline: auto; margin-bottom: var(--sp-8); }
.cta-band .slash-accent {
  position: absolute; top: 0; inset-inline-end: -60px; width: 240px; height: 140%;
  background: rgba(34, 197, 94, 0.16); transform: skewX(var(--skew));
}
.cta-band > * { position: relative; }
.cta-band .btns { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; }
.cta-band .wm {
  position: absolute; inset-inline-end: -30px; bottom: -30px; width: 320px; max-width: 45%;
  opacity: 0.10; z-index: 0; pointer-events: none; filter: brightness(3) grayscale(1);
}
.cta-band .badge { background: rgba(255, 255, 255, 0.10); color: var(--green-300); border-color: rgba(255, 255, 255, 0.2); }

/* ---------- 18b. PHOTO HERO + MEDIA ------------------------------------- */
.hero-photo { position: relative; overflow: hidden; min-height: 88dvh; display: flex; align-items: center; padding-block: var(--sp-24); }
.hero-media { position: absolute; inset: 0; z-index: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; }
/* Home hero video: sits over its own poster and cross-fades in when it can play, so a
   slow connection or a refused autoplay just leaves the still image in place. */
.hero-media .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 1.2s var(--ease-out-quart);
}
.hero-media .hero-video.ready { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hero-media .hero-video { display: none; } }
/* deep-GREEN scrim — the signature of this build. It fades to fully clear on the
   image side so the photo still reads as a photo instead of a green wash. */
.hero-scrim {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(96deg, rgba(4, 32, 22, 0.95) 0%, rgba(5, 40, 29, 0.88) 34%, rgba(6, 50, 36, 0.44) 66%, rgba(6, 50, 36, 0.04) 100%),
    linear-gradient(0deg, rgba(4, 32, 22, 0.86) 0%, rgba(4, 32, 22, 0.02) 52%);
}
.hero-photo > .container, .hero.has-photo > .container { position: relative; z-index: 2; width: 100%; }
.hero-photo .hero-copy { max-width: 42rem; }
.hero-photo, .hero.has-photo { color: #F4FBF6; }
.hero-photo h1, .hero.has-photo h1 { color: var(--white); }
.hero-photo .lead, .hero.has-photo .lead { color: #CFE9D8; }
.hero-photo .eyebrow, .hero.has-photo .eyebrow { color: var(--green-300); }
.hero-photo .eyebrow::before, .hero.has-photo .eyebrow::before { background: var(--green-400); }
.hero-photo h1 .text-accent, .hero.has-photo h1 .text-accent { color: var(--green-300); }
.hero-photo h1 .text-accent::after, .hero.has-photo h1 .text-accent::after { background: rgba(74, 222, 128, 0.22); }
.hero-photo .badge, .hero.has-photo .badge {
  background: rgba(255, 255, 255, 0.12); color: #EAF9EE; border-color: rgba(255, 255, 255, 0.24);
  backdrop-filter: blur(8px);
}
.hero-photo .badge-green, .hero.has-photo .badge-green,
.hero-photo .badge-red, .hero.has-photo .badge-red { background: rgba(34, 197, 94, 0.24); color: #DCFCE7; border-color: rgba(134, 239, 172, 0.5); }
.hero-photo .btn-ghost, .hero.has-photo .btn-ghost { color: var(--white); border-color: rgba(255, 255, 255, 0.45); }
.hero-photo .btn-ghost:hover, .hero.has-photo .btn-ghost:hover { background: rgba(255, 255, 255, 0.14); color: var(--white); border-color: var(--white); }
.hero-photo .hero-trust, .hero.has-photo .hero-trust { border-top-color: rgba(255, 255, 255, 0.2); }
/* scroll cue */
.hero-cue {
  position: absolute; inset-inline: 0; bottom: var(--sp-8); z-index: 3; display: grid; place-items: center;
  color: rgba(244, 251, 246, 0.7); font-family: var(--font-mono); font-size: var(--fs-caption);
  letter-spacing: 0.14em; text-transform: uppercase; gap: 6px; pointer-events: none;
}
.hero-cue span.line { display: block; width: 1px; height: 34px; background: linear-gradient(var(--green-400), transparent); animation: cueDrop 2.2s var(--ease-inout) infinite; }
@keyframes cueDrop { 0% { transform: scaleY(0); transform-origin: top; opacity: 0; } 40% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); transform-origin: bottom; opacity: 0; } }
@media (max-width: 700px) { .hero-cue { display: none; } }

/* Photo band — section with a photo background + green scrim */
.photo-band { position: relative; overflow: hidden; }
.pb-media { position: absolute; inset: 0; z-index: 0; }
.pb-media img { width: 100%; height: 100%; object-fit: cover; }
.pb-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(92deg, rgba(4, 32, 22, 0.96) 0%, rgba(6, 45, 32, 0.88) 46%, rgba(8, 58, 41, 0.58) 100%);
}
.photo-band > .container { position: relative; z-index: 2; }

/* Split feature: photo one side, copy the other */
.feature-split { display: grid; gap: var(--sp-12); align-items: center; }
@media (min-width: 900px) {
  .feature-split { grid-template-columns: 1fr 1fr; gap: var(--sp-16); }
  .feature-split.reverse .fs-media { order: 2; }
}
.feature-split > * { min-width: 0; }
.fs-media {
  position: relative; border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--border);
  aspect-ratio: 4/3; box-shadow: var(--shadow-raised);
}
.fs-media img { width: 100%; height: 100%; object-fit: cover; }
.fs-media .fs-tag { position: absolute; inset-inline-start: var(--sp-4); bottom: var(--sp-4); background: rgba(255,255,255,0.92); backdrop-filter: blur(8px); }

/* Gallery — real work, bento grid */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--sp-3); grid-auto-flow: dense; }
.gallery figure {
  position: relative; overflow: hidden; border-radius: var(--r-md); border: 1px solid var(--border);
  aspect-ratio: 4/3; background: var(--surface); box-shadow: var(--shadow-card);
}
/* A wide figure is a 2x2 bento block, NOT 2x1. It spans two columns, so with
   aspect-ratio:4/3 it is also twice as tall as a normal cell — if it only claimed
   one row, its row stretched to fit it and every 1x1 cell beside it kept its own
   short height, leaving a hole underneath each one. Spanning two rows makes the
   block exactly as tall as the two rows it covers, and the grid tiles flush.
   aspect-ratio must go to auto here or it fights the row span. */
.gallery figure.wide { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
@media (max-width: 520px) { .gallery figure.wide { grid-column: span 1; grid-row: span 1; aspect-ratio: 4/3; } }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out-quart); }
@media (hover: hover) { .gallery figure:hover img { transform: scale(1.06); } }
.gallery figcaption {
  position: absolute; inset: auto 0 0 0; padding: var(--sp-8) var(--sp-4) var(--sp-3);
  font-size: var(--fs-small); color: #fff;
  background: linear-gradient(0deg, rgba(4, 32, 22, 0.92), transparent);
  opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s;
}
@media (hover: hover) { .gallery figure:hover figcaption { opacity: 1; transform: none; } }
@media (hover: none) { .gallery figcaption { opacity: 1; } }

/* ---------- 19. LIST / FEATURE ROWS ------------------------------------- */
/* a list that directly follows prose must not butt against the last paragraph */
.prose + .check-list, .prose + .symptom-list, .prose + .timeline, .prose + .table-wrap { margin-top: var(--sp-6); }
.check-list { display: grid; gap: var(--sp-3); }
.check-list li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-primary); }
.check-list li svg { flex: none; width: 22px; height: 22px; color: var(--accent-text); margin-top: 2px; }
.symptom-list { display: grid; gap: var(--sp-3); grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); }
.symptom-list li {
  display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-sm);
  box-shadow: var(--shadow-card);
}
.symptom-list li svg { flex: none; width: 20px; height: 20px; color: var(--accent-text); margin-top: 2px; }

/* ---------- 20. CHIP GRID / REVIEW CARDS -------------------------------- */
.chip-grid { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.card figcaption { display: flex; align-items: center; gap: var(--sp-2); }
.card figcaption svg { width: 16px; height: 16px; flex: none; color: var(--accent-text); }
.card blockquote p { color: var(--text-primary); }
.rating-stars { color: var(--gold-500); letter-spacing: 2px; }

/* ---------- 21. TWO-COLUMN DOC LAYOUT ---------------------------------- */
.doc { display: grid; gap: var(--sp-12); align-items: start; }
.doc > * { min-width: 0; }
@media (min-width: 960px) { .doc { grid-template-columns: 1fr 350px; gap: var(--sp-16); } }
.doc-aside { display: grid; gap: var(--sp-6); }
@media (min-width: 960px) { .doc-aside { position: sticky; top: 96px; } }
.aside-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  padding: var(--sp-6); box-shadow: var(--shadow-card);
}
.aside-card.accent { background: var(--surface-tint); border-color: var(--accent-tint-2); }
.aside-card h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.aside-card .price-note { font-size: var(--fs-small); color: var(--text-muted); margin-bottom: var(--sp-4); }

/* ---------- 22. NEW: TRUST MARQUEE ------------------------------------- */
.marquee {
  position: relative; overflow: hidden; padding-block: var(--sp-4);
  background: var(--deep-800); color: #DCFCE7;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee-track { display: flex; gap: var(--sp-8); width: max-content; animation: marquee 34s linear infinite; }
.marquee-track > span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.14em;
  white-space: nowrap;
}
.marquee-track svg { width: 15px; height: 15px; color: var(--green-400); flex: none; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
[dir="rtl"] .marquee-track { animation-name: marqueeRtl; }
@keyframes marqueeRtl { from { transform: translateX(0); } to { transform: translateX(50%); } }

/* ---------- 23. NEW: BRAND (MARQUE) GRID ------------------------------- */
.brand-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: var(--sp-3); }
.brand-chip {
  display: grid; place-items: center; gap: var(--sp-3); padding: var(--sp-6) var(--sp-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  text-align: center; box-shadow: var(--shadow-card);
  transition: transform .2s var(--ease-out-quart), border-color .2s, box-shadow .2s;
}
.brand-chip .bc-mark {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-tint); color: var(--accent-text);
  font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; letter-spacing: -0.03em;
  border: 1px solid var(--accent-tint-2); transition: background-color .2s, color .2s;
}
.brand-chip .bc-name { font-family: var(--font-display); font-weight: 650; font-size: 0.9375rem; line-height: 1.25; }
.brand-chip .bc-sub { font-size: var(--fs-caption); color: var(--text-muted); }
@media (hover: hover) {
  .brand-chip:hover { transform: translateY(-4px); border-color: var(--accent-tint-2); box-shadow: 0 18px 36px -20px var(--accent-glow); }
  .brand-chip:hover .bc-mark { background: var(--accent); color: var(--accent-ink); }
}

/* ---------- 24. NEW: GUIDE / ARTICLE ----------------------------------- */
.guide-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--sp-6); }
.guide-card {
  display: flex; flex-direction: column; gap: var(--sp-3); padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md);
  box-shadow: var(--shadow-card); transition: transform .2s var(--ease-out-quart), border-color .2s, box-shadow .2s;
}
.guide-card .gc-topic {
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--accent-text);
}
.guide-card h3 { font-size: 1.1875rem; }
.guide-card p { color: var(--text-muted); font-size: var(--fs-small); flex: 1; }
.guide-card .gc-read { font-size: var(--fs-caption); color: var(--text-muted); font-family: var(--font-mono); }
@media (hover: hover) { .guide-card:hover { transform: translateY(-4px); border-color: var(--accent-tint-2); box-shadow: 0 18px 36px -20px var(--accent-glow); } }

.article-meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center;
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--text-muted); margin-bottom: var(--sp-6);
}
.toc {
  background: var(--surface-tint); border: 1px solid var(--accent-tint-2); border-radius: var(--r-md);
  padding: var(--sp-6); margin-bottom: var(--sp-12);
}
.toc h2 { font-size: 1rem; font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 var(--sp-3); color: var(--accent-text); }
.toc ol { display: grid; gap: var(--sp-2); counter-reset: toc; margin: 0; }
.toc li { counter-increment: toc; padding-inline-start: var(--sp-6); position: relative; }
.toc li::before { content: counter(toc) "."; position: absolute; inset-inline-start: 0; font-family: var(--font-mono); font-size: var(--fs-small); color: var(--accent-text); }
.toc a { font-size: var(--fs-small); text-decoration: none; }
.toc a:hover { color: var(--accent-text); text-decoration: underline; text-underline-offset: 3px; }

/* Key-takeaway callout */
.callout {
  display: grid; gap: var(--sp-2); padding: var(--sp-6); border-radius: var(--r-md);
  background: var(--surface-tint); border: 1px solid var(--accent-tint-2); margin-block: var(--sp-8);
}
.callout .co-head {
  display: inline-flex; align-items: center; gap: var(--sp-2); font-family: var(--font-mono);
  font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent-text);
}
.callout .co-head svg { width: 16px; height: 16px; }

/* ---------- 25. NEW: PRICE / COMPARISON TABLE -------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-card); }
.data-table { min-width: 520px; font-size: var(--fs-small); }
.data-table th, .data-table td { padding: var(--sp-4) var(--sp-4); text-align: start; border-bottom: 1px solid var(--border); vertical-align: top; }
.data-table thead th {
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--accent-text); background: var(--surface-tint); font-weight: 500; white-space: nowrap;
}
.data-table tbody tr:last-child td { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--green-50); }
.data-table td strong { font-weight: 650; }

/* ---------- 26. NEW: ZONE / PILL FILTER ROW ---------------------------- */
.pill-row { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.pill-row a, .pill-row span {
  font-family: var(--font-mono); font-size: var(--fs-caption); text-transform: uppercase; letter-spacing: 0.1em;
  padding: 9px 16px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); color: var(--text-muted);
  transition: all .15s;
}
.pill-row a:hover { border-color: var(--accent); color: var(--accent-text); background: var(--accent-tint); }
.pill-row .is-active { background: var(--accent); border-color: transparent; color: var(--accent-ink); font-weight: 600; }

/* ---------- 27. NEW: STEP TIMELINE (emergency page) -------------------- */
.timeline { display: grid; gap: 0; position: relative; }
.timeline li { position: relative; padding-inline-start: var(--sp-12); padding-bottom: var(--sp-8); }
.timeline li:last-child { padding-bottom: 0; }
.timeline li::before {
  content: ""; position: absolute; inset-inline-start: 13px; top: 26px; bottom: 0; width: 2px;
  background: linear-gradient(var(--accent-tint-2), transparent);
}
.timeline li:last-child::before { display: none; }
.timeline li .tl-dot {
  position: absolute; inset-inline-start: 0; top: 2px; width: 28px; height: 28px; border-radius: 50%;
  background: var(--accent); color: var(--accent-ink); display: grid; place-items: center;
  font-family: var(--font-mono); font-size: 0.75rem; font-weight: 600;
}
.timeline li h3 { font-size: 1.0625rem; margin-bottom: var(--sp-2); }
.timeline li p { color: var(--text-muted); }

/* ---------- 28. MOTION UTILITIES --------------------------------------- */
[data-reveal] { opacity: 0; transform: translateY(24px); }
[data-reveal].in { opacity: 1; transform: none; transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo); }
[data-reveal-blur] { filter: blur(6px); }
[data-reveal-blur].in { filter: none; }
.parallax { will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; filter: none !important; }
  .dot-pulse, .marquee-track, .hero-cue span.line { animation: none !important; }
  .site-header { animation: none; }
  .btn-3d::after { display: none; }
  .lang-fab { animation: none; }
  .lang-fab::before { animation: none; opacity: 0; }
  .lang-fab:hover { transform: none; }
}

/* ---------- 29. RTL / ARABIC ------------------------------------------- */
[dir="rtl"] { --font-body: 'Tajawal', system-ui, sans-serif; --font-display: 'Tajawal', system-ui, sans-serif; }
/* Arabic doesn't uppercase, and letter-spacing breaks letter-joining — kill both. */
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .display { letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .badge, [dir="rtl"] .telemetry, [dir="rtl"] .stat .label,
[dir="rtl"] .footer-col h4, [dir="rtl"] .tag, [dir="rtl"] .nav-phone, [dir="rtl"] .btn, [dir="rtl"] .faq-q,
[dir="rtl"] .guide-card .gc-topic, [dir="rtl"] .article-meta, [dir="rtl"] .toc h2,
[dir="rtl"] .data-table thead th, [dir="rtl"] .pill-row a, [dir="rtl"] .pill-row span,
[dir="rtl"] .callout .co-head, [dir="rtl"] .marquee-track > span, [dir="rtl"] .brand-chip .bc-sub {
  font-family: 'Tajawal', system-ui, sans-serif; letter-spacing: normal; text-transform: none;
}
[dir="rtl"] .telemetry { font-size: var(--fs-small); }
[dir="rtl"] .guide-card .gc-read, [dir="rtl"] .stat .value { font-family: 'Tajawal', system-ui, sans-serif; }
[dir="rtl"] .stat .value { direction: ltr; }
/* arrows mirror */
[dir="rtl"] .btn .chip svg, [dir="rtl"] .card-link svg { transform: scaleX(-1); }
@media (hover: hover) {
  [dir="rtl"] .btn:hover .chip svg { transform: scaleX(-1) translateX(2px); }
  [dir="rtl"] .card-hover:hover .card-link svg { transform: scaleX(-1) translateX(3px); }
}
/* photo scrims darken the reading (right) side in RTL */
[dir="rtl"] .hero-scrim { background:
  linear-gradient(264deg, rgba(4, 32, 22, 0.95) 0%, rgba(5, 40, 29, 0.88) 34%, rgba(6, 50, 36, 0.44) 66%, rgba(6, 50, 36, 0.04) 100%),
  linear-gradient(0deg, rgba(4, 32, 22, 0.86) 0%, rgba(4, 32, 22, 0.02) 52%); }
[dir="rtl"] .pb-scrim { background: linear-gradient(268deg, rgba(4, 32, 22, 0.96) 0%, rgba(6, 45, 32, 0.88) 46%, rgba(8, 58, 41, 0.58) 100%); }
/* NB: the nav indicator is deliberately NOT mirrored. motion.js positions it from
   measured layout offsets (r.left - container.left), and CSS transforms use a
   physical x-axis in both directions — so the LTR rule is already correct in RTL. */
[dir="rtl"] .lang-switch { direction: ltr; }
[dir="rtl"] .hero-bg::before { mask-image: radial-gradient(115% 85% at 22% 0%, #000 12%, transparent 72%); }
[dir="rtl"] .timeline li::before { inset-inline-start: auto; inset-inline-end: 13px; }

/* ---------- 30. UTILITIES ---------------------------------------------- */
.mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); } .mt-6 { margin-top: var(--sp-6); }
.mt-8 { margin-top: var(--sp-8); } .mt-12 { margin-top: var(--sp-12); } .mt-16 { margin-top: var(--sp-16); }
.mb-4 { margin-bottom: var(--sp-4); } .mb-6 { margin-bottom: var(--sp-6); } .mb-8 { margin-bottom: var(--sp-8); }
.flex { display: flex; } .items-center { align-items: center; } .items-start { align-items: flex-start; }
.gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); } .gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }
.wrap { flex-wrap: wrap; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
/* hidden off the TOP (not the side) so it never causes horizontal overflow in RTL */
.skip-link {
  position: fixed; top: -80px; inset-inline-start: var(--sp-4); z-index: 100;
  background: var(--accent); color: var(--accent-ink); padding: 12px 18px; border-radius: var(--r-sm);
  font-weight: 650; transition: top .2s ease;
}
.skip-link:focus { top: var(--sp-4); }