/* ═══════════════════════════════════════════════════════════════
   BIO GUARD v2.1 — style.css
   Dark impression at the door, light shop through the middle,
   dark again to close. Obsidian + boutique forest green + brushed
   steel on dark; warm ivory + the same green on light. One identity,
   two grounds, per Harith's direction (04-visual-direction.md).
   Built by ليث (Layth) — Jaheez Web Craft.
   ═══════════════════════════════════════════════════════════════ */

/* ── tokens ─────────────────────────────────────────────────── */
:root{
  /* dark surfaces (default) */
  --obsidian:      #090b09;
  --surface-0:     #0c0f0c;
  --surface-1:     #12160f;
  --surface-2:     #181d17;
  --surface-3:     #212820;
  --surface-glass: rgba(20, 25, 19, .62);

  --line-1: rgba(238, 241, 236, .08);
  --line-2: rgba(238, 241, 236, .14);
  --line-3: rgba(238, 241, 236, .22);

  --ink-1: #eef1ec;
  --ink-2: #a8b1a9;
  --ink-3: #707970;
  /* text/icon sitting on a solid saturated accent surface (buttons, hover
     chips, photo badges) — stays white on both grounds, so it is not
     redefined by .section--light below */
  --ink-inverse: #ffffff;
  --accent-ink: var(--green-300);

  /* light "paper" surfaces, scoped in with .section--light */
  --paper-0: #f3f1e9;
  --paper-1: #ffffff;
  --paper-2: #ece8da;
  --paper-3: #e2ddca;
  --paper-line-1: rgba(20, 22, 16, .08);
  --paper-line-2: rgba(20, 22, 16, .14);
  --paper-line-3: rgba(20, 22, 16, .24);
  --paper-ink-1: #14170f;
  --paper-ink-2: #4b5142;
  --paper-ink-3: #7c8270;
  --paper-accent-ink: #1f5233;

  /* brand green, pulled from the real shield logo -- constant across grounds */
  --green-900: #12301f;
  --green-700: #1f5233;
  --green-500: #2f7a49;
  --green-400: #48a065;
  --green-300: #7ecf98;

  /* metallic accent, from the shield's chrome bevel */
  --steel-1: #cfd6d0;
  --steel-2: #8b938c;

  /* status */
  --amber: #d9a13d;
  --amber-ink: #8a5a12;

  /* fonts -- authentic athletic luxury typography
     Arabic display (headings, section kickers) and Arabic body/text run on
     two self-hosted families; both are Arabic-subset woff2 files in
     assets/fonts/, no Google Fonts anywhere on this page. */
  --font-ar-display: 'Noto Kufi Arabic', 'Tajawal', system-ui, sans-serif;
  --font-ar: 'IBM Plex Sans Arabic', 'Tajawal', system-ui, sans-serif;
  --font-latin: 'Clash Display', 'General Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-display: 'Clash Display', var(--font-ar-display), sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', monospace;

  /* radii */
  --r-sm: 6px;
  --r-md: 14px;
  --r-lg: 26px;
  --r-pill: 999px;

  /* shadow */
  --shadow-lift: 0 30px 70px -30px rgba(0,0,0,.65);
  --shadow-soft: 0 14px 34px -18px rgba(0,0,0,.55);
  --shadow-paper: 0 18px 40px -24px rgba(20,22,16,.28);

  /* motion easings */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-in: cubic-bezier(.4,0,1,1);
  --ease-io: cubic-bezier(.65,0,.35,1);

  --nav-h: 82px;
  --edge: clamp(20px, 4.4vw, 120px);
}

/* ── self-hosted fonts ──────────────────────────────────────────
   Arabic-subset woff2 only (assets/fonts/), fontsource 5.3.0, no
   Google Fonts request anywhere on this page. Same unicode-range as
   fontsource ships for the arabic split: covers the Arabic block plus
   Arabic-Indic digits (٠-٩ live inside U+0600-06FF). */
@font-face{
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/noto-kufi-arabic-arabic-700-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('assets/fonts/noto-kufi-arabic-arabic-800-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
@font-face{
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.woff2') format('woff2');
  unicode-range: U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC,U+102E0-102FB,U+10E60-10E7E,U+10EC2-10EC4,U+10EFC-10EFF,U+1EE00-1EE03,U+1EE05-1EE1F,U+1EE21-1EE22,U+1EE24,U+1EE27,U+1EE29-1EE32,U+1EE34-1EE37,U+1EE39,U+1EE3B,U+1EE42,U+1EE47,U+1EE49,U+1EE4B,U+1EE4D-1EE4F,U+1EE51-1EE52,U+1EE54,U+1EE57,U+1EE59,U+1EE5B,U+1EE5D,U+1EE5F,U+1EE61-1EE62,U+1EE64,U+1EE67-1EE6A,U+1EE6C-1EE72,U+1EE74-1EE77,U+1EE79-1EE7C,U+1EE7E,U+1EE80-1EE89,U+1EE8B-1EE9B,U+1EEA1-1EEA3,U+1EEA5-1EEA9,U+1EEAB-1EEBB,U+1EEF0-1EEF1;
}
/* JetBrains Mono was previously loaded from Google Fonts; self-hosted now,
   latin subset only (coordinates, prices, timestamps — no Arabic glyphs used). */
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-500-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-600-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('assets/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

/* ── section grounds ────────────────────────────────────────── */
/* Scoped custom-property overrides: every component below reads
   var(--surface-*) / var(--ink-*) / var(--line-*), so a section
   carrying .section--light re-themes its entire subtree for free,
   with zero per-component duplication. */
.section--light{
  --surface-0: var(--paper-0);
  --surface-1: var(--paper-1);
  --surface-2: var(--paper-2);
  --surface-3: var(--paper-3);
  --line-1: var(--paper-line-1);
  --line-2: var(--paper-line-2);
  --line-3: var(--paper-line-3);
  --ink-1: var(--paper-ink-1);
  --ink-2: var(--paper-ink-2);
  --ink-3: var(--paper-ink-3);
  --accent-ink: var(--paper-accent-ink);
  --amber-tone: var(--amber-ink);
  background: var(--paper-0);
  color: var(--paper-ink-1);
}
.section--dark-band{ background: var(--obsidian); }

/* ── reset ──────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ color-scheme: dark; scroll-behavior: smooth; }
html, body{ margin:0; padding:0; overflow-x: hidden; }
body{
  background: var(--surface-0);
  color: var(--ink-1);
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
[data-lang="en"] body{ font-family: var(--font-latin); }
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
ul{ list-style:none; margin:0; padding:0; }
h1,h2,h3,h4,p{ margin:0; }
hr{ border:0; border-block-start:1px solid var(--line-2); margin:0; }
:focus-visible{ outline: 2px solid var(--green-400); outline-offset: 3px; }

.skip-link{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.skip-link:focus{
  position: fixed;
  top: 16px;
  inset-inline-start: 16px;
  width: auto;
  height: auto;
  padding: 12px 20px;
  background: var(--green-500);
  color: var(--ink-inverse);
  z-index: 99999;
  border-radius: var(--r-sm);
  clip: auto;
}

main{ position:relative; z-index:1; }

.section__head{
  max-width: 1400px; margin-inline:auto;
  padding: clamp(64px, 9vw, 120px) var(--edge) 0;
}
.section__kicker{
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-size: clamp(1.7rem, 2.7vw, 2.5rem);
  letter-spacing: -0.01em;
  color: var(--ink-1);
  max-width: 20ch;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding: 16px 30px;
  border-radius: var(--r-pill);
  font-family: var(--font-ar);
  font-weight:700; font-size: .98rem;
  border: 1px solid var(--line-3);
  transition: transform .18s var(--ease-out), border-color .18s, background-color .18s, opacity .18s;
  white-space: nowrap;
}
[data-lang="en"] .btn{ font-family: var(--font-latin); }
/* text was #08130c (near-black on medium green = 3.61:1, fails 4.5:1) — this
   class was defined but unused until #bg-06's directions button; ink-inverse
   (white) reads 5.25:1 on --green-500 and keeps the color on a token */
.btn--solid{ background: var(--green-500); border-color: var(--green-500); color: var(--ink-inverse); }
.btn--solid:hover{ background: var(--green-400); border-color: var(--green-400); }
.btn--ghost{ background: transparent; color: var(--ink-1); }
.btn--ghost:hover{ border-color: var(--steel-1); }
.btn--block{ width:100%; }
.btn--nav{ padding: 10px 20px; font-size:.86rem; }
.btn:active{ transform: scale(.97); }

/* ═══════════════════════ NAV ═══════════════════════ */
.nav{
  position: fixed; inset-inline: 0; top: 22px; z-index: 200;
  display:flex; justify-content:center;
  pointer-events: none;
}
.nav__inner{
  pointer-events: auto;
  width: min(94vw, 1180px);
  display:flex; align-items:center; gap: 28px;
  padding: 10px 12px 10px 22px;
  background: rgba(12,15,12,.66);
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid rgba(238,241,236,.14);
  border-radius: var(--r-pill);
  box-shadow: var(--shadow-soft);
}
[dir="rtl"] .nav__inner{ padding: 10px 22px 10px 12px; }
.nav__mark{ display:flex; align-items:center; gap:10px; flex-shrink:0; }
.nav__markImg{ border-radius: 50%; }
.nav__markText{ font-family: var(--font-latin); font-weight:800; letter-spacing:.04em; font-size:.92rem; color:#eef1ec; }
.nav__links{ display:flex; align-items:center; gap: 26px; flex:1; justify-content:center; }
.nav__links a{ font-family: var(--font-ar); font-weight:600; font-size:.94rem; color: #a8b1a9; position:relative; padding: 6px 0; transition: color .18s; }
[data-lang="en"] .nav__links a{ font-family: var(--font-latin); }
.nav__links a:hover{ color: #eef1ec; }
.nav__links a::after{
  content:''; position:absolute; inset-inline:0; bottom:0; height:1px; background: var(--green-400);
  transform: scaleX(0); transform-origin: center; transition: transform .25s var(--ease-out);
}
.nav__links a:hover::after, .nav__links a.is-active::after{ transform: scaleX(1); }
.nav__actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
.lang-toggle{
  display:flex; align-items:center; border:1px solid rgba(238,241,236,.14); border-radius: var(--r-pill);
  padding:4px; gap:2px; font-family: var(--font-mono);
}
.lang-toggle__opt{
  padding:6px 12px; border-radius: var(--r-pill); font-size:.72rem; letter-spacing:.08em;
  color: var(--ink-3); transition: color .2s var(--ease-out), background-color .2s var(--ease-out);
}
.lang-toggle__opt.is-on{ background: #eef1ec; color: #0c0f0c; }
.nav__burger{ display:none; flex-direction:column; gap:5px; padding:8px; }
.nav__burger span{ width:20px; height:2px; background: #eef1ec; transition: transform .2s var(--ease-out), opacity .2s var(--ease-out); }
.nav__drawer{
  pointer-events:auto;
  position:fixed; top: calc(var(--nav-h) + 14px); inset-inline: 3vw;
  background: #181d17; border:1px solid rgba(238,241,236,.14); border-radius: var(--r-md);
  display:flex; flex-direction:column; padding: 10px;
  opacity:0; visibility:hidden; transform: translateY(-8px);
  transition: opacity .22s var(--ease-out), transform .22s var(--ease-out);
  z-index: 199;
}
.nav__drawer.is-open{ opacity:1; visibility:visible; transform: translateY(0); }
.nav__drawer a{ padding: 14px 16px; border-radius: var(--r-sm); font-size:1rem; color:#eef1ec; font-family: var(--font-ar); font-weight:600; }
[data-lang="en"] .nav__drawer a{ font-family: var(--font-latin); }
.nav__drawer a:active{ background: #212820; }

@media (max-width: 899.98px){
  .nav{ top:14px; }
  .nav__inner{ width: 92vw; padding: 8px 10px 8px 16px; }
  [dir="rtl"] .nav__inner{ padding: 8px 16px 8px 10px; }
  .nav__links{ display:none; }
  .nav__burger{ display:flex; }
  .nav__actions .btn--nav span{ display:none; }
  .nav__actions .btn--nav{ padding:11px; border-radius:50%; }
}

/* ═══════════════════════ BG-01 · HERO (dark) ═══════════════════════ */
.hero{
  position:relative;
  min-height: 100vh;
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  padding-block-start: calc(var(--nav-h) + 16px);
  padding-block-end: clamp(16px, 3vh, 32px);
  overflow:hidden;
  background: var(--obsidian);
}
.hero__stage{
  position:absolute; inset:0; z-index:0;
  background: var(--obsidian);
}
.hero__silkCanvas{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
  z-index:0;
  pointer-events:none;
}
.hero__glow{
  position:absolute; inset:0;
  background: radial-gradient(65% 55% at 50% 36%, rgba(31,82,51,.22), transparent 75%);
  mix-blend-mode: screen;
  pointer-events:none;
}

.hero__plane{ position:absolute; inset:0; will-change: transform; pointer-events:none; }
.hero__plane--subject{
  display: flex; align-items: center; justify-content: flex-end;
  padding-inline-end: clamp(20px, 6vw, 100px);
  z-index: 1; opacity: 0.38;
  mask-image: radial-gradient(ellipse at center, #000 45%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 45%, transparent 75%);
}
.hero__storefront{
  max-height: 80vh; max-width: 48vw; object-fit: contain;
  border-radius: 16px;
  filter: drop-shadow(0 0 40px rgba(31,82,51,.4));
}
.hero__blueprint{
  position:absolute; inset: -10% -10%;
  max-width:none;
  opacity: .07;
  background-image:
    repeating-linear-gradient(0deg, var(--steel-1) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(90deg, var(--steel-1) 0 1px, transparent 1px 96px);
  -webkit-mask-image: radial-gradient(65% 65% at 50% 40%, #000 35%, transparent 75%);
  mask-image: radial-gradient(65% 65% at 50% 40%, #000 35%, transparent 75%);
  pointer-events:none;
}

.hero__specular{
  position:absolute; inset:0; pointer-events:none; z-index:1;
  background: radial-gradient(360px 360px at var(--mx,50%) var(--my,40%), rgba(255,255,255,.08), transparent 62%);
  opacity:0; transition: opacity .4s ease;
}
.hero__specular.is-active{ opacity:1; }
.hero__grain{
  position:absolute; inset:0; z-index:1; opacity:.04; mix-blend-mode: overlay; pointer-events:none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.hero__floorFade{
  position:absolute; inset-inline:0; bottom:0; height: 180px; z-index:1; pointer-events:none;
  background: linear-gradient(to bottom, transparent 0%, rgba(9,11,9,.8) 60%, var(--obsidian) 100%);
}

/* ── Centered Typography & 3D Logo Stage ── */
.hero__type{
  position:relative; z-index:2;
  width: min(92vw, 860px);
  margin-inline: auto;
  padding-block: 0;
  text-align: center;
  display: flex; flex-direction: column; align-items: center;
}

/* 3D Clear 4K Logo Shield (Enlarged, Zero Black Shadow, High Definition) */
.hero__brandBadge{
  position: relative;
  display: flex; flex-direction: column; align-items: center;
  margin-block-end: 6px;
  cursor: default;
}
.hero__logoAura{
  position: absolute; top: 46%; left: 50%;
  transform: translate(-50%, -50%);
  width: clamp(280px, 28vw, 380px); height: clamp(280px, 28vw, 380px);
  background: radial-gradient(circle, rgba(126,207,152,.22) 0%, rgba(47,122,73,.08) 48%, transparent 72%);
  border-radius: 50%;
  pointer-events: none;
  filter: blur(36px);
  transition: transform .6s var(--ease-out), opacity .6s ease;
}
.hero__logo3dStage{
  position: relative;
  width: clamp(220px, 22vw, 300px);
  aspect-ratio: 1372 / 1922;
  height: auto;
  perspective: 1000px;
  transform-style: preserve-3d;
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
.hero__logo3dImg{
  width: 100%; height: 100%;
  object-fit: contain;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: crisp-edges;
  /* Crystal Clear Definition: ZERO black shadow, subtle radiant emerald/mint backlight */
  filter: 
    drop-shadow(0 10px 24px rgba(31,82,51,.32))
    drop-shadow(0 2px 8px rgba(126,207,152,.38));
  transform: rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) translateZ(28px);
  transition: transform .18s cubic-bezier(.16,1,.3,1), filter .35s ease;
  will-change: transform, filter;
  backface-visibility: hidden;
}
.hero__brandBadge:hover .hero__logo3dImg{
  transform: rotateX(var(--rot-x, 0deg)) rotateY(var(--rot-y, 0deg)) translateZ(48px) scale(1.05);
  filter: 
    drop-shadow(0 14px 32px rgba(47,122,73,.45))
    drop-shadow(0 4px 12px rgba(126,207,152,.55));
}
.hero__brandBadge:hover .hero__logoAura{
  transform: translate(-50%, -50%) scale(1.15);
  opacity: .95;
}
.hero__badgePill{
  margin-block-start: 6px;
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--font-mono); font-size: .72rem; letter-spacing: .08em;
  color: var(--ink-1);
  padding: 4px 14px; border-radius: var(--r-pill);
  background: rgba(18, 30, 20, .68);
  border: 1px solid rgba(126, 207, 152, .28);
  box-shadow: 0 4px 12px rgba(18,48,31,.22), inset 0 1px 1px rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.hero__badgePill svg{ color: var(--green-300); }

/* Headline — refined smaller scale & color harmonized with background silk waves */
.hero__h1{
  font-family: var(--font-ar-display);
  font-weight: 800;
  font-size: clamp(1.18rem, 1.72vw, 1.62rem);
  line-height: 1.32;
  letter-spacing: -0.01em;
  text-align: center;
  max-width: 560px;
  margin-inline: auto;
  margin-block-start: 8px;
  margin-block-end: 0;
  color: var(--ink-1);
  background: linear-gradient(175deg, #ffffff 15%, #e2efe7 55%, #b0daba 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 2px 8px rgba(18, 48, 31, 0.40));
}
[data-lang="en"] .hero__h1{
  font-family: var(--font-latin);
  letter-spacing: -0.018em;
  font-weight: 700;
}

.hero__actions{ 
  display:flex; justify-content:center; align-items:center; 
  gap:16px; margin-block-start: 12px; flex-wrap:wrap; 
}

/* Glass CTA Button — harmonized with background */
.btn--glass{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 24px;
  border-radius: var(--r-pill);
  font-family: var(--font-ar); font-weight: 700; font-size: 0.94rem;
  color: var(--ink-1);
  background: rgba(31, 82, 51, 0.48);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(126, 207, 152, 0.42);
  box-shadow: 0 8px 22px -4px rgba(18, 48, 31, 0.45), 0 0 16px rgba(126, 207, 152, 0.15);
  transition: all .3s var(--ease-out);
}
[data-lang="en"] .btn--glass{ font-family: var(--font-latin); }
.btn--glass:hover{
  background: rgba(47, 122, 73, 0.65);
  border-color: rgba(126, 207, 152, 0.68);
  transform: translateY(-2px);
  box-shadow: 0 12px 28px -4px rgba(18, 48, 31, 0.55), 0 0 24px rgba(126, 207, 152, 0.28);
  color: var(--ink-inverse);
}
.btn--glass svg{
  transition: transform .25s var(--ease-out);
}
.btn--glass:hover svg{
  transform: translateY(2px);
}

/* ── Enlarged Glass Cards Bottom Section (Glass Effect) ── */
.hero__creds--glass{
  position:relative; z-index:2;
  max-width:1200px; margin-inline:auto; width:100%;
  margin-block-start: clamp(18px, 2.5vh, 28px);
  padding: 0 var(--edge);
  display:grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.8vw, 22px);
  border-block-start: none;
  background: transparent;
}
.hero__glassCard{
  display:flex; align-items:center; gap: 16px;
  padding: clamp(16px, 2vw, 22px) clamp(18px, 2.4vw, 26px);
  background: rgba(18, 24, 17, 0.60);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  border: 1px solid rgba(207, 214, 208, 0.18);
  border-radius: var(--r-md);
  box-shadow: 
    0 20px 42px -12px rgba(0,0,0,0.7), 
    inset 0 1px 1px rgba(255,255,255,0.12),
    0 0 0 1px rgba(18,48,31,0.2);
  transition: transform .35s var(--ease-out), border-color .35s ease, background-color .35s ease, box-shadow .35s ease;
  cursor: default;
}
.hero__glassCard:hover{
  transform: translateY(-4px);
  background: rgba(24, 32, 22, 0.75);
  border-color: rgba(126,207,152,0.42);
  box-shadow: 
    0 28px 52px -12px rgba(0,0,0,0.82), 
    0 0 28px rgba(31,82,51,0.28),
    inset 0 1px 2px rgba(255,255,255,0.2);
}
.hero__glassIcon{
  display:flex; align-items:center; justify-content:center;
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(31,82,51,0.65), rgba(12,15,12,0.92));
  border: 1px solid rgba(126,207,152,0.32);
  color: var(--green-300);
  box-shadow: 0 6px 14px rgba(0,0,0,0.45);
}
.hero__glassText{
  display:flex; flex-direction:column; gap: 3px;
  text-align: start;
}
[dir="rtl"] .hero__glassText{ text-align: right; }
.hero__glassTitle{
  font-family: var(--font-ar); font-weight: 800; font-size: clamp(1.02rem, 1.25vw, 1.22rem);
  color: var(--ink-1); letter-spacing: .01em; line-height: 1.2;
}
[data-lang="en"] .hero__glassTitle{ font-family: var(--font-latin); }
.hero__glassSub{
  font-family: var(--font-ar); font-size: clamp(.82rem, .95vw, .94rem);
  color: var(--ink-2); line-height: 1.2;
}
[data-lang="en"] .hero__glassSub{ font-family: var(--font-latin); }

@media (max-width: 899.98px){
  .hero{ min-height: 100vh; padding-block: calc(var(--nav-h) + 20px) 30px; justify-content: center; }
  .hero__stage{ position: absolute; inset: 0; margin: 0; border-radius: 0; height: 100%; aspect-ratio: auto; }
  .hero__watermark{ display:none; }
  .hero__specular{ display:none; }
  .hero__floorFade{ height: 120px; }
  .hero__type{ width: 100%; padding-inline: var(--edge); padding-block: 0; }
  .hero__logo3dStage{ width: clamp(170px, 45vw, 240px); }
  .hero__creds--glass{ grid-template-columns: 1fr; padding: 0 var(--edge); margin-block-start: 22px; gap: 10px; }
  .hero__glassCard{ padding: 12px 16px; }
}

/* ═══════════════════════ BG-02 · MENU (light) ═══════════════════════ */
.menu{ padding-block-end: clamp(70px, 9vw, 130px); }

/* -- goal tiles, photographic, above the catalogue -- */
.menu__goals{
  max-width: 1560px; margin-inline:auto; padding: 48px var(--edge) 0;
  display:grid; grid-template-columns: repeat(5, 1fr); gap: clamp(16px, 1.8vw, 24px);
}
.goal-tile{
  position:relative; display:flex; flex-direction:column; justify-content:flex-end;
  aspect-ratio: 4 / 5.5;
  border-radius: 24px; overflow:hidden;
  background: #141a15;
  border: 1.5px solid rgba(255, 255, 255, 0.85);
  text-align:start; cursor:pointer;
  box-shadow: 
    0 20px 48px -12px rgba(20, 32, 22, 0.16),
    0 0 0 1px rgba(31, 82, 51, 0.08),
    inset 0 1.5px 2px rgba(255, 255, 255, 0.95);
  transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s var(--ease-out),
              border-color .3s ease;
}

/* Full bleed image: Covers 100% of the card from edge to edge */
.goal-tile__plate{
  position:absolute; inset:0; width:100%; height:100%;
  overflow:hidden; background:#141a15;
  border-radius: inherit;
  z-index: 0;
}
.goal-tile__plate img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position: center 25%; display:block;
  filter: brightness(.97) saturate(1.04);
  transition: transform .7s cubic-bezier(.16,1,.3,1), filter .45s ease;
}
/* Glass specular light gradient over the photo */
.goal-tile__plate::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(150deg, rgba(255,255,255,.22) 0%, transparent 40%, rgba(10,18,12,.25) 100%);
  pointer-events:none;
}
/* Scrim to ensure subtle contrast without darkening the glass */
.goal-tile__scrim{
  position:absolute; inset:0; pointer-events:none; z-index: 1;
  background: linear-gradient(180deg, rgba(8,11,9,.35) 0%, transparent 26%, rgba(8,11,9,.10) 60%, rgba(8,11,9,.40) 100%);
}
/* Green wash that blooms in on hover and stays on the selected card */
.goal-tile__glow{
  position:absolute; inset:0; pointer-events:none; opacity:0; z-index: 1;
  background: radial-gradient(120% 80% at 50% 100%, rgba(47,122,73,.45) 0%, rgba(47,122,73,0) 70%);
  transition: opacity .4s ease;
}
/* Frosted Glass Top Index Badge */
.goal-tile__index{
  position:absolute; top:14px; inset-inline-start:14px; z-index:2;
  font-family: var(--font-mono); font-weight:800; font-size:.78rem; letter-spacing:.08em;
  color: var(--ink-inverse);
  background: rgba(12, 18, 14, 0.52);
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  padding: 4px 11px; border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.35);
  box-shadow: 0 4px 14px rgba(0,0,0,.24), inset 0 1px 1px rgba(255,255,255,.3);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}

/* Floating Frosted Glass Caption Bar (True Glassmorphism: White Translucent / ابيض شفاف) */
.goal-tile__caption{
  position:relative; z-index:2;
  margin: 12px;
  display:flex; align-items:center; gap:12px;
  padding: 13px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(24px) saturate(190%);
  -webkit-backdrop-filter: blur(24px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.92);
  box-shadow: 
    0 12px 30px -4px rgba(0, 0, 0, 0.16),
    inset 0 1.5px 2px rgba(255, 255, 255, 1);
  transition: background-color .32s ease, border-color .32s ease, box-shadow .32s ease, transform .32s var(--ease-out);
}
.goal-tile__label{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; text-align: start; }
[dir="rtl"] .goal-tile__label{ text-align: right; }
.goal-tile__primary{
  font-family: var(--font-ar); font-weight:800; font-size: clamp(1.12rem, 1.25vw, 1.3rem); line-height:1.2;
  color: var(--paper-ink-1); letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  transition: color .25s ease;
}
[data-lang="en"] .goal-tile__primary{ font-family: var(--font-latin); letter-spacing: -0.015em; font-weight:800; }
.goal-tile__state{
  font-family: var(--font-ar); font-size:.76rem; font-weight:600; line-height:1.25;
  color: var(--paper-ink-2);
  transition: color .25s ease;
}
[data-lang="en"] .goal-tile__state{ font-family: var(--font-latin); font-weight:600; }

/* Frosted Glass Press-target mark: + transforms to x */
.goal-tile__mark{
  position:relative; flex:0 0 auto; width:32px; height:32px; border-radius:50%;
  border:1px solid rgba(0, 0, 0, 0.08);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 3px 10px rgba(0,0,0,.08), inset 0 1px 1px #fff;
  transition: background-color .26s ease, border-color .26s ease, transform .34s var(--ease-out);
}
.goal-tile__mark::before,
.goal-tile__mark::after{
  content:''; position:absolute; inset-inline-start:50%; top:50%;
  width:11px; height:2px; border-radius:2px; background: #141a15;
  transform: translate(-50%,-50%);
  transition: background-color .26s ease, transform .34s var(--ease-out);
}
.goal-tile__mark::after{ transform: translate(-50%,-50%) rotate(90deg); }

/* ---- hover ---- */
@media (hover: hover){
  .goal-tile:hover{
    transform: translateY(-8px) scale(1.02);
    border-color: rgba(126, 207, 152, 0.95);
    box-shadow: 
      0 28px 56px -14px rgba(20, 32, 22, 0.32),
      0 0 26px rgba(126, 207, 152, 0.32),
      inset 0 1.5px 2px #fff;
  }
  .goal-tile:hover .goal-tile__plate img{
    transform: scale(1.06);
    filter: brightness(1.02) saturate(1.08);
  }
  .goal-tile:hover .goal-tile__glow{ opacity:1; }
  .goal-tile:hover .goal-tile__index{
    background: rgba(18, 48, 31, 0.85); border-color: rgba(126, 207, 152, 0.7); color: #ffffff;
  }
  .goal-tile:hover .goal-tile__caption{
    background: rgba(255, 255, 255, 0.88);
    border-color: #ffffff;
    box-shadow: 
      0 14px 36px -4px rgba(0, 0, 0, 0.2),
      0 0 18px rgba(126, 207, 152, 0.25),
      inset 0 1.5px 2px #fff;
  }
  .goal-tile:hover .goal-tile__primary{ color: var(--green-700); }
  .goal-tile:hover .goal-tile__state{ color: var(--green-900); }
  .goal-tile:hover .goal-tile__mark{
    border-color: var(--green-700); background: var(--green-700); transform: rotate(90deg);
  }
  .goal-tile:hover .goal-tile__mark::before,
  .goal-tile:hover .goal-tile__mark::after{ background: #ffffff; }
}

/* ---- press ---- */
.goal-tile:active{ transform: translateY(-3px) scale(.992); }
.goal-tile:focus-visible{
  outline:2px solid var(--green-500); outline-offset:3px;
}

/* ---- selected ---- */
.goal-tile.is-active{
  border-color: var(--green-400);
  box-shadow: 
    0 32px 64px -14px rgba(18, 48, 31, 0.45), 
    0 0 32px rgba(126, 207, 152, 0.45), 
    inset 0 1.5px 2px #fff;
  transform: translateY(-8px) scale(1.02);
}
.goal-tile.is-active .goal-tile__plate img{
  transform: scale(1.06);
  filter: brightness(1.03) saturate(1.08);
}
.goal-tile.is-active .goal-tile__glow{ opacity:1; }
.goal-tile.is-active .goal-tile__index{
  background: var(--green-700); border-color: var(--green-300); color: #ffffff;
}
.goal-tile.is-active .goal-tile__caption{
  background: rgba(24, 68, 38, 0.88);
  backdrop-filter: blur(24px) saturate(200%);
  -webkit-backdrop-filter: blur(24px) saturate(200%);
  border-color: rgba(126, 207, 152, 0.85);
  box-shadow: 
    0 14px 36px -4px rgba(10, 24, 15, 0.5),
    inset 0 1px 2px rgba(255, 255, 255, 0.6);
}
.goal-tile.is-active .goal-tile__primary{ color:#fff; }
.goal-tile.is-active .goal-tile__state{ color: rgba(238,241,236,.92); }
.goal-tile.is-active .goal-tile__mark{
  background: rgba(255,255,255,.28); border-color: rgba(255,255,255,.7);
  transform: rotate(45deg);
}
.goal-tile.is-active .goal-tile__mark::before,
.goal-tile.is-active .goal-tile__mark::after{ background:#fff; }

.menu__hint{
  max-width: 620px;
  margin: 32px auto 10px;
  padding: 14px 24px;
  border-radius: 999px;
  background: rgba(31, 82, 51, 0.08);
  border: 1px dashed rgba(31, 82, 51, 0.28);
  font-family: var(--font-ar);
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--ink-2);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  transition: opacity .3s, transform .3s;
  animation: pulseHint 2.4s ease-in-out infinite;
}
[data-lang="en"] .menu__hint{ font-family: var(--font-latin); font-size: .92rem; }
.menu__hint.is-hidden{ display: none !important; }
.menu__hintIcon{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green-500); /* was var(--green-600), a token that was never defined — the circle rendered with no fill */
  color: var(--ink-inverse);
  font-size: .85rem;
  font-weight: 800;
}
@keyframes pulseHint{
  0%, 100%{ transform: translateY(0); opacity: 0.95; }
  50%{ transform: translateY(3px); opacity: 0.8; }
}

.menu__panel{
  max-width:1400px; margin-inline:auto; padding: 40px var(--edge) 0;
  transition: opacity .35s ease, transform .35s ease;
}
.menu__panel.is-hidden{
  display: none !important;
}
.menu__panelHead{ display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-block-end:22px; }
.menu__panelTitleRow{ display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.menu__panelTitle{ font-family: var(--font-ar); font-weight:800; font-size: clamp(1.7rem, 2.6vw, 2.4rem); color: var(--ink-1); }
[data-lang="en"] .menu__panelTitle{ font-family: var(--font-latin); }
.menu__closeBtn{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.05);
  border: 1px solid var(--line-2);
  color: var(--ink-2);
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s var(--ease-out);
}
[data-lang="en"] .menu__closeBtn{
  font-family: var(--font-latin);
  font-size: 0.78rem;
}
.menu__closeBtn:hover{
  background: var(--surface-3);
  border-color: var(--line-3);
  color: var(--ink-1);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.06);
}
.menu__closeBtn:active{
  transform: scale(0.96);
}
.agency-filters{ display:flex; gap:10px; flex-wrap:wrap; }
.agency-chip{
  padding: 10px 16px; border:1px solid var(--line-2); border-radius: var(--r-sm);
  font-family: var(--font-ar); font-size: .8rem; font-weight:600; color: var(--ink-2);
  transition: color .2s var(--ease-out), border-color .2s var(--ease-out), background-color .2s var(--ease-out);
}
[data-lang="en"] .agency-chip{ font-family: var(--font-latin); }
.agency-chip:hover{ border-color: var(--ink-2); color: var(--ink-1); }
.agency-chip.is-active{ background: var(--ink-1); color: var(--surface-0); border-color: var(--ink-1); }

.product-grid{
  margin-block-start: 26px;
  display:grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.product-card{
  background: var(--surface-1); border:1px solid var(--line-1); border-radius: var(--r-md);
  overflow:hidden; display:flex; flex-direction:column; box-shadow: var(--shadow-paper);
  transition: transform .25s var(--ease-out), border-color .25s, box-shadow .25s;
  position: relative;
}
.product-card:hover{
  transform: translateY(-5px);
  border-color: var(--green-400);
  box-shadow: 0 16px 32px -8px rgba(0,0,0,.14);
}
.product-card__img{
  aspect-ratio: 1/1;
  background: radial-gradient(circle at 50% 45%, rgba(255,255,255,.9) 0%, rgba(243,240,232,.5) 70%, var(--surface-2) 100%);
  display:flex; align-items:center; justify-content:center;
  padding: 14px 16px 10px;
  position:relative;
  overflow: hidden;
}
.product-card__img::after{
  content:''; position:absolute; inset:0;
  background: linear-gradient(160deg, rgba(255,255,255,.35), transparent 45%);
  pointer-events:none;
}
.product-card__img img{
  width: 100%;
  height: 100%;
  margin-inline:auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.15));
  /* No baseline zoom: object-fit keeps the whole bottle in frame, so a tall tub
     never has its lid or label clipped by the plate's overflow. */
  transform: scale(1);
  transition: transform .4s cubic-bezier(.2,.8,.2,1), filter .4s;
}
.product-card:hover .product-card__img img{
  transform: scale(1.06) translateY(-3px);
  filter: drop-shadow(0 14px 20px rgba(0,0,0,.22));
}
.product-card__body{
  padding: 16px 18px 20px;
  text-align:start;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background: var(--surface-1);
}
.product-card__name{
  font-family: var(--font-latin); font-weight:700; font-size: .95rem;
  line-height:1.3; min-height: 2.6em; letter-spacing:-.01em;
  color: var(--ink-1);
}
.product-card__brand{
  display:flex; align-items:center; gap:8px; margin-block-start:8px;
  font-family: var(--font-ar); font-size: .82rem; font-weight:600; color: var(--ink-2);
}
.product-card__dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.product-card__price{
  font-family: var(--font-latin); font-weight:800; font-size: 1.2rem;
  margin-block-start: 12px; font-variant-numeric: tabular-nums;
  color: var(--ink-1);
}
.product-card__flavours{
  font-family: var(--font-ar); font-size:.74rem; color: var(--paper-ink-3);
  margin-block-start:4px;
  /* Always rendered, even when a product has no flavour list, so every card in
     a row shares the same height and the prices sit on one baseline. */
  min-height: 1.1em;
}
.product-card.is-dimmed{ opacity: .18; transform: scale(.985); pointer-events: none; }

@media (max-width: 1180px){
  .menu__goals{ grid-template-columns: repeat(3, 1fr); }
  .product-grid{ grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 899.98px){
  .menu__goals{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:14px; padding: 34px 20px 8px; -webkit-overflow-scrolling:touch; }
  .menu__goals::-webkit-scrollbar{ display:none; }
  .goal-tile{ flex:0 0 auto; width: clamp(220px, 62vw, 280px); max-width:280px; scroll-snap-align:start; }
  .goal-tile__caption{ margin: 10px; padding: 12px 14px; gap:8px; border-radius: 14px; }
  .goal-tile__primary{ font-size:1.06rem; }
  .goal-tile__state{ font-size:.74rem; }
  .goal-tile__mark{ width:30px; height:30px; }
  .menu__panel{ padding: 30px 20px 0; }
  .product-grid{ grid-template-columns: repeat(2, 1fr); gap:14px; }
  .product-card__name{ font-size:.85rem; }
}

/* ═══════════════════════ BG-03 · AGENCIES (self-running brand lane) ═══════════════════════
   Built to عمّار's locked blueprint: v2/blueprint/BG-03-greybox-sheet.png
   The tile is a stage, not a shelf — a hero and one companion standing on a floor, lit from it.
   Every object is placed by a fixed anchor and a capped width, both in % of the stage box,
   so nothing can be clipped or swallowed. Sizes are area-normalised in app.js, never measured. */
.agencies{
  background: #090b09;
  position: relative;
  overflow: hidden;
  padding: clamp(60px, 6.5vw, 96px) 0 clamp(52px, 6vw, 84px);
  --agency-ease: cubic-bezier(.2, .8, .25, 1);
}
.agencies__container{
  max-width: 1560px;
  margin-inline: auto;
  padding: 0 var(--edge);
}
.agencies__header{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 46ch;
  margin-block-end: 34px;
}
.agencies__editorialSub{
  font-family: var(--font-ar);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--ink-3);
}
[data-lang="en"] .agencies__editorialSub{
  font-family: var(--font-latin);
  letter-spacing: 0.04em;
}

/* ── the lane ─────────────────────────────────────────────── */
.agencies__viewport{
  position: relative;
  width: 100%;
  overflow: hidden;
  direction: ltr;           /* the lane is anchored at the left in both languages */
  padding-block: 30px 34px;  /* headroom the card lift needs — overflow:hidden clips it otherwise */
  cursor: grab;
  touch-action: pan-y;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 4%, #000 96%, transparent 100%);
}
.agencies__viewport.is-grabbing{ cursor: grabbing; }
.agencies__viewport.is-static{
  overflow-x: auto;
  padding-inline: var(--edge);
  scroll-snap-type: x proximity;
  cursor: default;
  -webkit-mask-image: none;
          mask-image: none;
}
.agencies__viewport.is-static .agencies__track{ transform: none !important; }
.agencies__viewport.is-static .agency-tile{ scroll-snap-align: center; }

.agencies__track{
  display: flex;
  width: max-content;
  gap: 18px;
  padding-inline: 18px;
  will-change: transform;
}

/* ── the tile ─────────────────────────────────────────────── */
.agency-tile{
  position: relative;
  flex: 0 0 clamp(268px, 23vw, 324px);
  aspect-ratio: 324 / 405;
  margin: 0;
  padding: 0;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  color: inherit;
  text-align: start;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  user-select: none;
  background:
    linear-gradient(168deg, rgba(255,255,255,.055) 0%, rgba(255,255,255,0) 46%),
    linear-gradient(180deg, rgba(20,24,20,0) 0%, rgba(11,14,11,1) 100%),
    #0e120f;
  border: 1px solid rgba(255,255,255,.075);
  transition: transform 420ms var(--agency-ease), border-color 420ms, box-shadow 420ms;
}
[dir="rtl"] .agency-tile{ direction: rtl; }
[dir="ltr"] .agency-tile{ direction: ltr; }

.agency-tile:hover,
.agency-tile:focus-visible{
  outline: none;
  transform: translateY(-18px) scale(1.018);     /* 4.4% of card height — below this it reads as a nudge */
  transition-duration: 320ms;
  border-color: color-mix(in srgb, var(--agency-accent) 52%, transparent);
  box-shadow:
    0 26px 44px -18px rgba(0,0,0,.92),
    0 0 40px -16px color-mix(in srgb, var(--agency-accent) 14%, transparent);
}

/* front groundline · a light event, never a drawn line */
.agency-tile__floor{
  position: absolute;
  inset-inline: -14%;
  bottom: 30%;                 /* the 70% groundline */
  height: 26px;
  transform: translateY(50%);
  background: radial-gradient(50% 50% at 50% 50%, var(--agency-accent) 0%, transparent 72%);
  opacity: .19;
  pointer-events: none;
  transition: opacity 420ms var(--agency-ease);
}
.agency-tile:hover .agency-tile__floor,
.agency-tile:focus-visible .agency-tile__floor{ opacity: .36; }
.agency-tile.is-solo .agency-tile__floor{ inset-inline: -20%; opacity: .30; }
.agency-tile.is-solo:hover .agency-tile__floor,
.agency-tile.is-solo:focus-visible .agency-tile__floor{ opacity: .48; }

/* ── the stage ────────────────────────────────────────────── */
.agency-tile__stage{
  position: absolute;
  inset-inline: 7%;
  top: 18%;
  height: 52%;                 /* 18% → 70%, the front groundline */
  pointer-events: none;
}
.agency-tile__pack{
  position: absolute;
  width: var(--pw);
  height: var(--ph);
  inset-inline-start: calc(var(--anchor) - var(--pw) / 2);
  object-fit: contain;
  object-position: bottom center;
  transform-origin: bottom center;
  transition: transform 380ms var(--agency-ease);
}
.agency-tile__pack--hero{ --anchor: 66%; bottom: 0; z-index: 3; }
.agency-tile__pack--companion{ --anchor: 29%; bottom: 15.4%; z-index: 1; opacity: .95; }
.agency-tile__pack--solo{ --anchor: 50%; bottom: 0; z-index: 3; }

.agency-tile:hover .agency-tile__pack--hero,
.agency-tile:focus-visible .agency-tile__pack--hero{
  transform: translateY(-10px) scale(1.03);
  transition-delay: 40ms;      /* the hero outruns the card, so the card reads as a frame it stands in */
}
.agency-tile:hover .agency-tile__pack--companion,
.agency-tile:focus-visible .agency-tile__pack--companion{ transform: translateY(-4px); }
.agency-tile.is-solo:hover .agency-tile__pack--solo,
.agency-tile.is-solo:focus-visible .agency-tile__pack--solo{
  transform: translateY(-10px) scale(1.04);
  transition-delay: 40ms;
}

/* contact shadows · each on its own groundline — what makes two objects one scene */
.agency-tile__contact{
  position: absolute;
  width: calc(var(--pw) * 1.16);
  inset-inline-start: calc(var(--anchor) - (var(--pw) * 1.16) / 2);
  background: radial-gradient(50% 50% at 50% 50%, rgba(0,0,0,.55) 0%, transparent 70%);
  transition: transform 380ms var(--agency-ease), opacity 380ms;
  transform-origin: center;
}
.agency-tile__contact--hero{ --anchor: 66%; height: 18px; bottom: -9px; z-index: 2; }
.agency-tile__contact--companion{ --anchor: 29%; height: 14px; bottom: calc(15.4% - 7px); z-index: 0; }
.agency-tile__contact--solo{ --anchor: 50%; height: 19px; bottom: -9px; z-index: 2; }

.agency-tile:hover .agency-tile__contact--hero,
.agency-tile:focus-visible .agency-tile__contact--hero,
.agency-tile:hover .agency-tile__contact--solo,
.agency-tile:focus-visible .agency-tile__contact--solo{
  transform: scale(1.18, .72);  /* the shadow spreading and softening is what reads as height */
  opacity: .38;
}

/* ── identity zone ────────────────────────────────────────── */
.agency-tile__id{
  position: absolute;
  inset-inline-start: 5.6%;
  top: 8.9%;
  z-index: 4;
  pointer-events: none;
  transform: translateY(-50%);
}
.agency-tile__logo{
  display: block;
  width: var(--lw);
  height: var(--lh);
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .82;
  transition: opacity 260ms;
}
.agency-tile__wordmark{
  display: block;
  font-family: var(--font-latin);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  opacity: .82;
  transition: opacity 260ms;
}
.agency-tile:hover .agency-tile__logo,
.agency-tile:focus-visible .agency-tile__logo,
.agency-tile:hover .agency-tile__wordmark,
.agency-tile:focus-visible .agency-tile__wordmark{ opacity: 1; }

/* ── footer ───────────────────────────────────────────────── */
.agency-tile__footer{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 24%;                 /* 76% → 100% */
  z-index: 4;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  padding: 0 16px 18px;
  background: linear-gradient(180deg, rgba(9,11,9,0) 0%, rgba(9,11,9,.82) 46%, rgba(9,11,9,.97) 100%);
}
.agency-tile__names{
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.agency-tile__name{
  position: relative;
  align-self: flex-start;
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: .71rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-inverse);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.agency-tile__name::after,
.agency-tile__ar--lead::after{
  content: "";
  position: absolute;
  inset-inline-start: 0;
  bottom: -3px;
  height: 1px;
  width: 100%;
  background: var(--agency-accent);
  transform: scaleX(0);
  transform-origin: inline-start center;
  transition: transform 260ms var(--agency-ease);
}
[dir="rtl"] .agency-tile__name::after,
[dir="rtl"] .agency-tile__ar--lead::after{ transform-origin: right center; }
[dir="ltr"] .agency-tile__name::after,
[dir="ltr"] .agency-tile__ar--lead::after{ transform-origin: left center; }
.agency-tile:hover .agency-tile__name::after,
.agency-tile:focus-visible .agency-tile__name::after,
.agency-tile:hover .agency-tile__ar--lead::after,
.agency-tile:focus-visible .agency-tile__ar--lead::after{ transform: scaleX(1); }

.agency-tile__ar{
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: .84rem;
  line-height: 1.2;
  color: color-mix(in srgb, var(--agency-accent) 74%, #ffffff);
}
.agency-tile__ar--lead{ position: relative; align-self: flex-start; }

.agency-tile__chev{
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  color: var(--agency-accent);
  filter: saturate(.9) brightness(1.3);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 240ms, transform 240ms var(--agency-ease);
}
[dir="rtl"] .agency-tile__chev{ transform: translateX(6px); }
[dir="rtl"] .agency-tile__chev svg{ transform: scaleX(-1); }
.agency-tile:hover .agency-tile__chev,
.agency-tile:focus-visible .agency-tile__chev{ opacity: 1; transform: none; }

/* ── mobile · recomposed, not shrunk ──────────────────────── */
@media (max-width: 900px){
  .agency-tile{ flex-basis: clamp(248px, 52vw, 300px); }
}
@media (max-width: 560px){
  .agencies{ padding: 52px 0 44px; }
  .agencies__header{ margin-block-end: 26px; }
  .agencies__viewport{ padding-block: 22px 26px; }
  .agencies__track{ gap: 14px; padding-inline: 14px; }
  .agency-tile{ flex-basis: 78vw; }
  /* the stage loses its second plane — at this size a depth offset just reads as misalignment */
  .agency-tile__pack,
  .agency-tile__contact{ width: var(--mpw); }
  .agency-tile__pack{ height: var(--mph); }
  .agency-tile__contact{ width: calc(var(--mpw) * 1.16); inset-inline-start: calc(var(--anchor) - (var(--mpw) * 1.16) / 2); }
  .agency-tile__pack--hero,
  .agency-tile__contact--hero{ --anchor: 62%; }
  .agency-tile__pack--companion{ --anchor: 27%; bottom: 0; }
  .agency-tile__contact--companion{ --anchor: 27%; bottom: -7px; }
  .agency-tile__pack{ inset-inline-start: calc(var(--anchor) - var(--mpw) / 2); }
}

/* touch has no hover — the press carries the whole affordance */
@media (hover: none){
  .agency-tile:active{
    transform: translateY(3px) scale(.995);
    transition-duration: 120ms;
  }
  .agency-tile:active .agency-tile__floor{ opacity: .34; }
  .agency-tile:active .agency-tile__chev{ opacity: 1; transform: none; transition-duration: 180ms; }
  .agency-tile:active .agency-tile__name::after,
  .agency-tile:active .agency-tile__ar--lead::after{ transform: scaleX(1); transition-duration: 180ms; }
}

@media (prefers-reduced-motion: reduce){
  .agency-tile,
  .agency-tile__pack,
  .agency-tile__contact,
  .agency-tile__floor,
  .agency-tile__chev{ transition: none; }
  .agency-tile:hover,
  .agency-tile:focus-visible{ transform: none; }
  .agency-tile:hover .agency-tile__pack--hero,
  .agency-tile:hover .agency-tile__pack--companion,
  .agency-tile:hover .agency-tile__pack--solo,
  .agency-tile:hover .agency-tile__contact--hero,
  .agency-tile:hover .agency-tile__contact--solo{ transform: none; }
}

/* ═══════════════════════ BG-04 · TEAM & EXPERIENCE (Circular 3D Glass Stage) ═══════════════════════ */
.counter{
  position: relative;
  z-index: 3;
  padding-block: clamp(60px, 8vw, 110px);
  overflow: hidden;
}

.circular-stage-wrap{
  max-width: 1440px;
  margin-inline: auto;
  padding: 16px var(--edge) 0;
  position: relative;
  perspective: 1800px;
  perspective-origin: 50% 46%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Interactive Playing Card Deck Affordance Hint */
.team-deck-hint{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-block-end: 14px;
  padding: 7px 18px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.92);
  color: var(--ink-2);
  font-family: var(--font-ar);
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1), transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  user-select: none;
}
[data-lang="en"] .team-deck-hint{
  font-family: var(--font-latin);
  font-size: 0.85rem;
}
.team-deck-hint__icon{
  color: var(--accent-ink);
  font-size: 0.85rem;
  animation: deckHintPulse 2.2s infinite ease-in-out;
}
@keyframes deckHintPulse{
  0%, 100% { transform: scale(1); opacity: 0.8; }
  50% { transform: scale(1.22); opacity: 1; }
}
.team-deck-hint.is-spread{
  opacity: 0.42;
  transform: translateY(-2px);
}

.circular-stage{
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  transform-style: preserve-3d;
  min-height: 575px;
  position: relative;
  padding: 20px 10px 36px;
  width: 100%;
}

/* Glassmorphism Card — Ultra-crisp, zero blur on contents */
.team-glass-card{
  position: relative;
  flex: 0 0 295px;
  max-width: 305px;
  border-radius: 28px;
  overflow: hidden;
  /* Crisp Card Ground — Opaque so background cards never leak ghost text */
  background: #ffffff;
  border: 1px solid rgba(18, 48, 31, 0.12);
  box-shadow: 
    0 20px 45px -12px rgba(0, 0, 0, 0.1),
    0 4px 14px rgba(0, 0, 0, 0.03);
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transform-style: preserve-3d;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  filter: none !important;
  transform-origin: 50% 50%;
  transition: transform 0.72s cubic-bezier(0.16, 1, 0.3, 1), 
              box-shadow 0.45s ease, 
              border-color 0.4s ease, 
              background 0.4s ease,
              opacity 0.55s ease;
  will-change: transform, box-shadow;
  opacity: 1;
}

/* Stacked Deck Shadows */
.circular-stage-wrap:not(.is-spread) .team-glass-card.is-active{
  box-shadow: 
    0 26px 54px -10px rgba(18, 48, 31, 0.22),
    0 8px 22px -4px rgba(0, 0, 0, 0.08);
  border-color: rgba(72, 160, 101, 0.5);
}

/* User requirement: "والكارد اللي يأشر عليه اليوزر يرتفع شوية" */
.circular-stage-wrap.is-spread .team-glass-card:hover{
  box-shadow: 
    0 34px 68px -10px rgba(18, 48, 31, 0.28),
    0 8px 24px -4px rgba(0, 0, 0, 0.1);
  border-color: rgba(72, 160, 101, 0.85) !important;
  z-index: 50 !important;
}

.circular-stage-wrap.is-spread .team-glass-card.is-active{
  box-shadow: 
    0 26px 52px -10px rgba(18, 48, 31, 0.22),
    0 6px 18px rgba(0, 0, 0, 0.06);
  border-color: rgba(72, 160, 101, 0.6);
  background: #ffffff;
}

.team-glass-card__media{
  position: relative;
  width: calc(100% + 2px);
  margin: -1px -1px 0 -1px;
  aspect-ratio: 4 / 4.45;
  overflow: hidden;
  background: #111512;
  border-radius: 0;
  transform: translateZ(0);
}

.team-glass-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  transform: scale(1.025);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.team-glass-card:hover .team-glass-card__img{
  transform: scale(1.045);
}

.team-glass-card__badge{
  position: absolute;
  top: 14px;
  inset-inline-start: 14px;
  z-index: 2;
  transform: translateZ(20px);
}

.team-glass-card__pill{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  background: rgba(13, 20, 15, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: var(--ink-inverse);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
  -webkit-font-smoothing: antialiased;
}
[data-lang="en"] .team-glass-card__pill{ font-family: var(--font-latin); }

.team-glass-card__pill--accent{
  background: rgba(18, 56, 33, 0.88);
  border-color: rgba(90, 200, 130, 0.5);
  color: var(--green-300);
}

.team-glass-card__pill--gold{
  background: rgba(45, 34, 12, 0.88);
  border-color: rgba(230, 180, 80, 0.55);
  color: #ffd978; /* exception: one-off gold badge accent, no brand token is this warm — --amber is a duller ochre */
}

/* Glass bottom text plate — 100% sharp text */
.team-glass-card__content{
  padding: 20px 22px 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  background: #ffffff;
  border-top: none;
  transform: translateZ(10px);
}

.team-glass-card__title{
  font-family: var(--font-ar);
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--paper-ink-1);
  line-height: 1.35;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}
[data-lang="en"] .team-glass-card__title{
  font-family: var(--font-latin);
}

.team-glass-card__desc{
  font-family: var(--font-ar);
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--paper-ink-2);
  margin: 0;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
}
[data-lang="en"] .team-glass-card__desc{
  font-family: var(--font-latin);
}
[data-lang="en"] .team-glass-card__desc{
  font-family: var(--font-latin);
}

/* Controls for circular browsing */
.circular-stage-nav{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 22px;
  margin-top: 24px;
}

.stage-nav-btn{
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--ink-1);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 8px 20px rgba(0,0,0,0.06);
}

.stage-nav-btn:hover{
  background: #12301f;
  color: var(--ink-inverse);
  border-color: #12301f;
  transform: scale(1.08);
  box-shadow: 0 12px 28px rgba(18, 48, 31, 0.25);
}

.stage-dots{
  display: flex;
  align-items: center;
  gap: 10px;
}

.stage-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(18, 48, 31, 0.2);
  cursor: pointer;
  transition: all 0.35s ease;
  padding: 0;
}

.stage-dot.is-active{
  width: 32px;
  border-radius: 6px;
  background: #12301f;
  box-shadow: 0 2px 8px rgba(18, 48, 31, 0.3);
}

@media (max-width: 1024px){
  .team-glass-card{
    flex: 0 0 260px;
    max-width: 275px;
  }
  .circular-stage{
    min-height: 520px;
    gap: 12px;
  }
}

@media (max-width: 768px){
  .circular-stage-wrap{
    padding-inline: 12px;
    perspective: none;
  }
  .circular-stage{
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    justify-content: flex-start;
    padding: 20px 10px 24px;
    min-height: auto;
    gap: 16px;
  }
  .circular-stage::-webkit-scrollbar{
    display: none;
  }
  .team-glass-card{
    flex: 0 0 82vw;
    max-width: 320px;
    scroll-snap-align: center;
    transform: none !important;
  }
  .team-glass-card:hover{
    transform: translateY(-8px) !important;
  }
}

/* ═══════════════════════ BG-05 · CONSULT (light, enlarged translucent glass console) ═══════════════════════ */
.consult{
  padding-block: clamp(80px, 9vw, 130px);
  scroll-margin-top: calc(var(--nav-h) + 40px);
  background: 
    radial-gradient(ellipse 60% 40% at 20% 25%, rgba(34, 197, 94, 0.05) 0%, transparent 70%),
    radial-gradient(ellipse 50% 50% at 80% 65%, rgba(14, 42, 27, 0.035) 0%, transparent 70%),
    var(--surface-0);
  position: relative;
}

.consult .section__head{
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--edge);
  padding-block: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: start;
}

.consult__topBadge{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: var(--r-pill);
  background: rgba(34, 197, 94, 0.12);
  border: 1.5px solid rgba(34, 197, 94, 0.28);
  color: var(--paper-accent-ink);
  font-family: var(--font-ar);
  font-size: 0.92rem;
  font-weight: 700;
  margin-block-end: 14px;
}
[data-lang="en"] .consult__topBadge{
  font-family: var(--font-latin);
  font-size: 0.88rem;
}
.consult__topBadgeIcon{
  color: var(--paper-accent-ink);
  flex-shrink: 0;
}

.consult .section__kicker{
  max-width: none;
  font-size: clamp(2.4rem, 4.2vw, 3.4rem);
  font-weight: 800;
  color: var(--paper-ink-1);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.15;
}

.consult__editorialSub{
  font-family: var(--font-ar);
  font-size: clamp(1.05rem, 1.3vw, 1.2rem);
  line-height: 1.6;
  color: var(--paper-ink-2);
  max-width: 68ch;
  margin-block-start: 12px;
}
[data-lang="en"] .consult__editorialSub{
  font-family: var(--font-latin);
  font-size: clamp(0.98rem, 1.2vw, 1.1rem);
}

.consult__console{
  max-width: 1440px;
  margin-inline: auto;
  padding-inline: var(--edge);
  margin-block-start: clamp(32px, 4vw, 46px);
  display: grid;
  grid-template-columns: 1.22fr 0.78fr;
  gap: 28px;
  align-items: start;
}
@media (max-width: 1040px){
  .consult__console{
    grid-template-columns: 1fr;
  }
}

/* ── Step Selection Desk (Left: Compact Glassmorphic Questionnaire) ── */
.consult__desk{
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: clamp(28px, 3.2vw, 40px);
  box-shadow: 
    0 20px 48px -12px rgba(18, 48, 31, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.02),
    inset 0 1.5px 2px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
}

/* Stepper Top Bar */
.consult-desk__topBar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-block-end: 20px;
  border-block-end: 1px solid rgba(20, 22, 16, 0.08);
  margin-block-end: 26px;
}

.consult-stepper{
  display: flex;
  align-items: center;
  gap: 8px;
}

.consult-stepper__item{
  display: flex;
  align-items: center;
}

.consult-stepper__circle{
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(20, 22, 16, 0.06);
  color: var(--paper-ink-3);
  border: 1px solid rgba(20, 22, 16, 0.1);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.consult-stepper__item.is-active .consult-stepper__circle{
  background: #0e2a1b;
  border-color: #0e2a1b;
  color: var(--ink-inverse);
  box-shadow: 0 2px 8px rgba(14, 42, 27, 0.28);
}

.consult-stepper__item.is-done .consult-stepper__circle{
  background: #15803d;
  border-color: #15803d;
  color: var(--ink-inverse);
}

.consult-stepper__line{
  width: 34px;
  height: 2px;
  background: rgba(20, 22, 16, 0.12);
  border-radius: 2px;
}

.consult-stepper__label{
  font-family: var(--font-ar);
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--paper-ink-2);
}
[data-lang="en"] .consult-stepper__label{
  font-family: var(--font-latin);
}

/* Steps Vertical Timeline */
.consult-steps{
  display: flex;
  flex-direction: column;
  gap: 0;
}

.consult-step{
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 20px;
  position: relative;
  padding-block-end: 28px;
}
.consult-step:last-child{
  padding-block-end: 0;
}

.consult-step__marker{
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.consult-step__num{
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ebf7f0;
  border: 1.5px solid rgba(47, 122, 73, 0.25);
  color: var(--paper-accent-ink);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(47, 122, 73, 0.08);
}

.consult-step__connector{
  position: absolute;
  top: 40px;
  bottom: -28px;
  width: 2px;
  background: rgba(20, 22, 16, 0.1);
  z-index: 1;
}

.consult-step__body{
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}

.consult-step__head{
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.consult-step__title{
  font-family: var(--font-ar);
  font-size: clamp(1.15rem, 1.4vw, 1.35rem);
  font-weight: 800;
  color: var(--paper-ink-1);
  margin: 0;
}
[data-lang="en"] .consult-step__title{
  font-family: var(--font-latin);
}

.consult-step__desc{
  font-family: var(--font-ar);
  font-size: 0.92rem;
  color: var(--paper-ink-2);
  margin: 0;
  line-height: 1.45;
}
[data-lang="en"] .consult-step__desc{
  font-family: var(--font-latin);
}

/* Interactive Chips */
.consult-chips{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.consult-chip{
  padding: 9px 15px;
  border-radius: var(--r-pill);
  border: 1.5px solid rgba(20, 22, 16, 0.12);
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 0.94rem;
  color: var(--paper-ink-2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
  user-select: none;
}
[data-lang="en"] .consult-chip{
  font-family: var(--font-latin);
  font-size: 0.90rem;
  padding: 9px 16px;
}

.consult-chip:hover{
  border-color: #1b4d2e;
  color: var(--paper-ink-1);
  background: #ffffff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(27, 77, 46, 0.1);
}

.consult-chip.is-picked{
  background: #0e2a1b !important;
  border-color: #0e2a1b !important;
  color: var(--ink-inverse) !important;
  box-shadow: 0 6px 18px rgba(14, 42, 27, 0.32);
  transform: translateY(-1px);
}

.consult-chip__icon{
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.2s;
}
.consult-chip.is-picked .consult-chip__icon{
  opacity: 1;
}

.consult-chip__check{
  display: none;
  stroke: currentColor;
  flex-shrink: 0;
  margin-inline-start: 4px;
}
.consult-chip.is-picked .consult-chip__check{
  display: inline-block;
}

.consult-field__optional{
  margin-block-start: 8px;
  animation: consultFadeIn 0.25s ease-out;
}

@keyframes consultFadeIn{
  from{ opacity: 0; transform: translateY(-4px); }
  to{ opacity: 1; transform: none; }
}

.consult-input{
  width: 100%;
  max-width: 520px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1.5px solid rgba(20, 22, 16, 0.14);
  border-radius: var(--r-md);
  padding: 13px 20px;
  font-family: var(--font-ar);
  font-size: 1.02rem;
  color: var(--ink-1);
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
[data-lang="en"] .consult-input{
  font-family: var(--font-latin);
}
.consult-input:focus{
  border-color: var(--green-500);
  box-shadow: 0 0 0 3px rgba(47, 122, 73, 0.14);
}

/* ── Live Prescription & Medical Dispatch (Right Card) ── */
.consult__dispatch{
  position: relative;
  display: flex;
}

.consult__dispatchInner{
  width: 100%;
  background: rgba(255, 255, 255, 0.58);
  backdrop-filter: blur(30px) saturate(190%);
  -webkit-backdrop-filter: blur(30px) saturate(190%);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  padding: clamp(26px, 3vw, 36px);
  box-shadow: 
    0 20px 48px -12px rgba(18, 48, 31, 0.08),
    0 4px 16px rgba(0, 0, 0, 0.02),
    inset 0 1.5px 2px rgba(255, 255, 255, 1);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Medical Staff Card Banner */
.consult-medical-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(235, 247, 240, 0.85) 0%, rgba(243, 252, 246, 0.6) 100%);
  border: 1.5px solid rgba(47, 122, 73, 0.22);
  overflow: hidden;
  position: relative;
  min-height: 114px;
  box-shadow: 0 4px 16px rgba(47, 122, 73, 0.04);
}

.consult-medical-card__info{
  padding: 16px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  z-index: 2;
  flex: 1;
  max-width: calc(100% - 110px);
}

.consult-medical-card__icon{
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1.5px solid rgba(47, 122, 73, 0.24);
  color: var(--paper-accent-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(47, 122, 73, 0.1);
  margin-block-start: 2px;
}

.consult-medical-card__titles{
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.consult-medical-card__title{
  font-family: var(--font-ar);
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--paper-ink-1);
  margin: 0;
}
[data-lang="en"] .consult-medical-card__title{
  font-family: var(--font-latin);
}

.consult-medical-card__desc{
  font-family: var(--font-ar);
  font-size: 0.85rem;
  color: var(--paper-ink-2);
  margin: 0;
  line-height: 1.35;
}
[data-lang="en"] .consult-medical-card__desc{
  font-family: var(--font-latin);
}

.consult-medical-card__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--paper-accent-ink);
  margin-block-start: 4px;
}
[data-lang="en"] .consult-medical-card__status{
  font-family: var(--font-latin);
}

.consult-medical-card__dot{
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.25);
  animation: consultPulse 2s infinite;
}

@keyframes consultPulse{
  0%{ box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); }
  70%{ box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100%{ box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

.consult-medical-card__media{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 155px;
  z-index: 1;
  pointer-events: none;
}
[dir="rtl"] .consult-medical-card__media{
  right: auto;
  left: 0;
}

.consult-medical-card__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 18%;
  -webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to left, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}
[dir="rtl"] .consult-medical-card__img{
  -webkit-mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to right, rgba(0,0,0,1) 50%, rgba(0,0,0,0) 100%);
}

/* WhatsApp CTA & Hierarchy */
.consult-cta-group{
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 2px;
}

.consult-dispatch__btn{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 15px 24px;
  border-radius: 14px;
  background: #22c55e;
  color: var(--ink-inverse) !important;
  font-family: var(--font-ar);
  font-size: 1.05rem;
  font-weight: 800;
  text-decoration: none;
  box-shadow: 0 6px 20px rgba(34, 197, 94, 0.35);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-lang="en"] .consult-dispatch__btn{
  font-family: var(--font-latin);
}
.consult-dispatch__btn:hover{
  background: #16a34a;
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(34, 197, 94, 0.45);
}

.consult-dispatch__arrow{
  display: inline-block;
  font-size: 1.15rem;
  line-height: 1;
  transition: transform 0.2s;
}
[dir="rtl"] .consult-dispatch__arrow{
  transform: scaleX(-1);
}
.consult-dispatch__btn:hover .consult-dispatch__arrow{
  transform: translateX(4px);
}
[dir="rtl"] .consult-dispatch__btn:hover .consult-dispatch__arrow{
  transform: scaleX(-1) translateX(4px);
}

.consult-cta-group__sub{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font-ar);
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--paper-ink-2);
}
[data-lang="en"] .consult-cta-group__sub{
  font-family: var(--font-latin);
}

/* Recommendations Section */
.consult-recommendations{
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 4px;
}

.consult-recommendations__header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.consult-recommendations__headline{
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--paper-accent-ink);
}

.consult-recommendations__title{
  font-family: var(--font-ar);
  font-size: 1.12rem;
  font-weight: 800;
  color: var(--paper-ink-1);
  margin: 0;
}
[data-lang="en"] .consult-recommendations__title{
  font-family: var(--font-latin);
}

.consult-recommendations__badge{
  font-family: var(--font-ar);
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--paper-accent-ink);
  background: #e8f5ed;
  border: 1px solid rgba(47, 122, 73, 0.2);
  padding: 4px 12px;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
[data-lang="en"] .consult-recommendations__badge{
  font-family: var(--font-latin);
}

.consult-recommendations__sub{
  font-family: var(--font-ar);
  font-size: 0.86rem;
  color: var(--paper-ink-2);
  margin: -4px 0 2px;
}
[data-lang="en"] .consult-recommendations__sub{
  font-family: var(--font-latin);
}

.consult-recommendations__list{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* Product Cards */
.consult-product-card{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 12px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.02);
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
}
.consult-product-card:hover{
  background: #ffffff;
  border-color: rgba(47, 122, 73, 0.3);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(18, 48, 31, 0.08);
}

.consult-product-card__main{
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
}

.consult-product-card__thumb{
  width: 54px;
  height: 54px;
  border-radius: 12px;
  background: #f8faf9;
  border: 1px solid rgba(20, 22, 16, 0.06);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  flex-shrink: 0;
}
.consult-product-card__thumb img{
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.consult-product-card__details{
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.consult-product-card__name{
  font-family: var(--font-latin);
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--paper-ink-1);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.consult-product-card__tags{
  font-family: var(--font-ar);
  font-size: 0.8rem;
  color: var(--paper-ink-2);
  margin: 2px 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
[data-lang="en"] .consult-product-card__tags{
  font-family: var(--font-latin);
}

.consult-product-card__price{
  font-family: var(--font-ar);
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--paper-ink-1);
  margin: 0;
}
[data-lang="en"] .consult-product-card__price{
  font-family: var(--font-latin);
}

.consult-product-card__btn{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(20, 22, 16, 0.14);
  background: #ffffff;
  color: var(--paper-ink-1);
  font-family: var(--font-ar);
  font-size: 0.82rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.2s;
  cursor: pointer;
  flex-shrink: 0;
}
[data-lang="en"] .consult-product-card__btn{
  font-family: var(--font-latin);
}
.consult-product-card__btn:hover{
  border-color: #0e2a1b;
  background: #0e2a1b;
  color: var(--ink-inverse);
}

.consult-product-card__btn-arrow{
  display: inline-block;
  transition: transform 0.2s;
}
[dir="rtl"] .consult-product-card__btn-arrow{
  transform: scaleX(-1);
}

/* Bottom Reassurance Note */
.consult-note{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-radius: 14px;
  background: rgba(34, 197, 94, 0.08);
  border: 1px solid rgba(34, 197, 94, 0.2);
  margin-top: 4px;
}

.consult-note__icon{
  color: var(--paper-accent-ink);
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.consult-note__text{
  font-family: var(--font-ar);
  font-size: 0.82rem;
  color: var(--paper-accent-ink);
  font-weight: 600;
  line-height: 1.45;
  margin: 0;
}
[data-lang="en"] .consult-note__text{
  font-family: var(--font-latin);
}
[data-lang="en"] .consult-dispatch__note{
  font-family: var(--font-latin);
}
.consult-dispatch__note svg{
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--accent-ink);
}

@media (max-width: 1080px){
  .consult__console{
    grid-template-columns: 1fr;
    gap: 28px;
  }
}

@media (max-width: 560px){
  .consult-chips{
    gap: 8px;
  }
  .consult-chip{
    padding: 11px 18px;
    font-size: 1rem;
  }
  .consult__desk, .consult__dispatchInner{
    padding: 24px 18px;
    border-radius: 22px;
  }
  .consult-dispatch__top{
    flex-wrap: wrap;
  }
}

/* ═══════════════════════ BG-06 · وين تلگانا (FIND US) — dark, compact ═══════════════════════
   One photograph, one plaque, one button. Replaces the old flagship+ledger
   sprawl (1849px tall, 3 competing headings, 4 buttons, a hidden Google Maps
   iframe loading on every visit). See ../04-branch-section-audit.md. ═══ */
.branch{
  /* obsidian ground, plus the same radial glow the footer opens with, mirrored
     so the last ~260px of this section melts into bg-07 instead of stopping dead */
  background:
    radial-gradient(circle at 50% 100%, rgba(47, 122, 73, 0.16) 0%, transparent 55%),
    var(--obsidian);
  position: relative;
  overflow: hidden;
  /* top spacing lives on .section__head below, same convention every other
     section on this page uses (e.g. .menu only sets padding-block-end) */
  padding-block-end: clamp(40px, 5vw, 72px);
  scroll-margin-top: calc(var(--nav-h) + 24px);
}

.branch__container{
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--edge);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 24px);
  position: relative;
  z-index: 1;
}

/* Header lives inside the same min(820px,100%) column as the frame below it
   (not the default 1400px band), so the kicker's own edge lands exactly on
   the frame's edge instead of floating ~227px further out. Tighter top
   rhythm too — this section's whole budget is ≤700px on desktop, so the
   usual 120px .section__head top pad is too rich. */
.branch__head{
  width: min(820px, 100%);
  padding-inline: 0;
  padding-block: clamp(32px, 4.4vw, 56px) 0;
}

/* ── Frame: the real facade photograph ── */
.branch__frame{
  position: relative;
  width: min(820px, 100%);
  aspect-ratio: 21 / 9;
  margin: 0;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--line-2);
  box-shadow: var(--shadow-lift);
}

.branch__img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* the source photo is a tall 896×1200 architectural shot (shield sign,
     then the Arabic wordmark + teal bar, then the glass storefront below).
     Top-anchoring a 21:9 crop keeps the shield fully in frame and only
     catches the very top of the Arabic wordmark line, which the fade
     then buries before the plaque text sits on top of it */
  object-position: 50% 0%;
  display: block;
}

/* ── Plaque: one strip of data sitting on the fade, like a plate on the building ──
   The darkening lives on the plaque itself now, not on a frame-relative
   overlay. A frame-relative fade measures its opacity as a percentage of the
   FRAME's fixed height, but the plaque's own height changes whenever text
   wraps to an extra line — at in-between widths (561–899px) the plaque grew
   taller and climbed further up the frame while the fade's dark band stayed
   put, so opacity at the plaque's edge swung anywhere from 0.36 to 0.99
   depending on viewport width. Backing the gradient onto .branch__plaque
   itself ties the fade to the plaque's own box, so it stretches and holds
   automatically no matter how many lines the text takes — no breakpoints.
   padding-block-start reserves the room the gradient needs to fully resolve
   before the first line of text; align-items:flex-start (= inline-start, so
   this flips correctly in the English/ltr build) keeps every row shrunk to
   its own content and flush to one edge instead of stretching full width. */
.branch__plaque{
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 2;
  margin: 0;
  background: linear-gradient(to top,
    rgb(9, 11, 9) 0%,
    rgba(9, 11, 9, 0.97) 62%,
    rgba(9, 11, 9, 0) 100%);
  padding-inline: clamp(18px, 2.8vw, 28px);
  padding-block-end: clamp(14px, 2.2vw, 22px);
  padding-block-start: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.branch__plaqueTop{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* Dot + state are one atomic unit so a narrow viewport can wrap the address
   onto its own line without ever separating the dot from its label. */
.branch__status{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.branch__dot{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green-300);
  box-shadow: 0 0 8px rgba(126, 207, 152, 0.7);
  flex-shrink: 0;
}
.branch__dot.is-closed{
  background: var(--amber);
  box-shadow: 0 0 8px rgba(217, 161, 61, 0.7);
}

.branch__state{
  font-family: var(--font-ar);
  font-size: 0.98rem;
  font-weight: 700;
  color: var(--ink-1);
}
[data-lang="en"] .branch__state{ font-family: var(--font-latin); }

.branch__sep{ color: var(--ink-2); }

.branch__addr{
  font-family: var(--font-ar);
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--ink-2);
}
[data-lang="en"] .branch__addr{ font-family: var(--font-latin); }

.branch__hours{
  font-family: var(--font-ar);
  font-size: 0.86rem;
  color: var(--ink-2);
  margin: 0;
}
[data-lang="en"] .branch__hours{ font-family: var(--font-latin); }

.branch__coords{
  font-family: var(--font-mono);
  font-size: 0.76rem;
  letter-spacing: 0.02em;
  color: var(--ink-2);
}

/* ── Actions: one button, the site's own system ── */
.branch__actions{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.branch__note{
  font-family: var(--font-ar);
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0;
}
[data-lang="en"] .branch__note{ font-family: var(--font-latin); }

/* ── Responsive: 900 / 768 / 560, matching the rest of the site ──
   21:9 only has headroom for the plaque down to ~740px wide (frame height
   shrinks faster than the plaque's own content does). A middle ratio for
   561–900px keeps the frame tall enough that the plaque stays a minority of
   it instead of eating into the BIO GUARD lettering above it. */
@media (max-width: 900px){
  .branch__frame{ width: 100%; aspect-ratio: 3 / 2; }
}

@media (max-width: 768px){
  .branch__plaqueTop{ row-gap: 4px; }
}

@media (max-width: 560px){
  .branch__frame{
    aspect-ratio: 4 / 5;
  }
  .branch__img{
    object-position: 50% 6%;
  }
  /* stays a wrapping row (not flex-direction:column) so .branch__status
     (dot+state) wraps as one atomic unit — the address can drop to its own
     line, but the dot never separates from its label */
  .branch__plaqueTop{ row-gap: 4px; }
  .branch__sep{ display: none; }
  .branch__actions .btn{ width: 100%; }
}

/* ═══════════════════════ BG-07 · CLOSE (21st.dev Bento & Particle Showcase) ═══════════════════════ */
.close{
  background: radial-gradient(circle at 50% 0%, rgba(47, 122, 73, 0.16) 0%, rgba(9, 11, 9, 0.98) 50%), var(--obsidian);
  /* border removed: #bg-06 now ends in the same green glow this section opens
     with, so the seam reads as one continuous glow instead of two dark blocks
     separated by a hairline (see 05-branch-redesign-blueprint.md) */
  padding-block-start: 0;
  padding-block-end: 32px;
  position: relative;
  overflow: hidden;
}

/* ── Particle Text Showcase (Full Width - Edge to Edge, No Frame) ── */
.footer-particle-showcase{
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  margin-block-end: clamp(32px, 4.5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  overflow: hidden;
  border-block-end: 1px solid rgba(238, 241, 236, 0.06);
}

.footer-particle-ambient{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 380px;
  background: radial-gradient(ellipse at 50% 50%, rgba(47, 122, 73, 0.22), rgba(72, 160, 101, 0.05) 50%, transparent 75%);
  filter: blur(50px);
  pointer-events: none;
  z-index: 0;
}

.footer-particle-container{
  width: 100%;
  max-width: none;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  position: relative;
  backdrop-filter: none;
  z-index: 1;
}

.footer-particle-canvas{
  width: 100%;
  max-width: none;
  height: auto;
  display: block;
  cursor: crosshair;
}

.footer-particle-hint{
  margin-block-start: 10px;
  margin-block-end: 18px;
  font-family: var(--font-ar);
  font-size: 0.88rem;
  color: var(--ink-2);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(24, 29, 23, 0.65);
  padding: 6px 18px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(238, 241, 236, 0.08);
  backdrop-filter: blur(8px);
  z-index: 1;
}

.footer-particle-beacon{
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #48a065;
  box-shadow: 0 0 10px #48a065, 0 0 16px rgba(72, 160, 101, 0.8);
  animation: beaconPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

/* ── Bento Multi-Column Grid with Rotating Border Beams & Transparent Glass ── */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

@keyframes rotateBorderBeam {
  to {
    --border-angle: 360deg;
  }
}

.footer-bento-shell {
  position: relative;
}

/* Floating ambient emerald aura to illuminate translucent glass cards */
.footer-bento-shell::before {
  content: "";
  position: absolute;
  top: 25%;
  left: 10%;
  width: 80%;
  height: 55%;
  background: radial-gradient(ellipse at center, rgba(47, 122, 73, 0.22) 0%, rgba(31, 82, 51, 0.08) 50%, transparent 72%);
  pointer-events: none;
  z-index: 0;
  filter: blur(70px);
}

.footer-bento-grid{
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--edge);
  display: grid;
  grid-template-columns: 1.35fr 1.45fr 1fr 1.2fr;
  gap: 22px;
  margin-block-end: 48px;
  position: relative;
  z-index: 1;
}

.footer-card{
  position: relative;
  border-radius: 24px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(20, 28, 22, 0.22) 50%, rgba(12, 16, 13, 0.3) 100%);
  backdrop-filter: blur(28px) saturate(200%);
  -webkit-backdrop-filter: blur(28px) saturate(200%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 0 32px 0 rgba(72, 160, 101, 0.04),
    0 24px 60px -15px rgba(0, 0, 0, 0.7);
  padding: 30px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
  transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out), border-color .35s var(--ease-out);
  z-index: 1;
}

.footer-card:hover{
  transform: translateY(-4px);
  box-shadow: 
    inset 0 1px 1px 0 rgba(255, 255, 255, 0.24),
    inset 0 0 36px 0 rgba(72, 160, 101, 0.08),
    0 32px 70px -15px rgba(0, 0, 0, 0.8),
    0 0 32px -6px rgba(72, 160, 101, 0.35);
  border-color: rgba(126, 207, 152, 0.35);
}

/* Continuous Rotating Gradient Border Beam */
.footer-card::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0deg,
    transparent 170deg,
    rgba(72, 160, 101, 0.25) 230deg,
    rgba(126, 207, 152, 0.85) 285deg,
    #d8ffe4 330deg,
    rgba(126, 207, 152, 0.95) 345deg,
    rgba(72, 160, 101, 0.3) 355deg,
    transparent 360deg
  );
  -webkit-mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
  pointer-events: none;
  animation: rotateBorderBeam 5s linear infinite;
  z-index: 3;
}

/* Ambient Glow Trailing the Rotating Beam */
.footer-card::after{
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--border-angle, 0deg),
    transparent 0deg,
    transparent 240deg,
    rgba(72, 160, 101, 0.15) 280deg,
    rgba(126, 207, 152, 0.5) 330deg,
    transparent 360deg
  );
  filter: blur(14px);
  pointer-events: none;
  animation: rotateBorderBeam 5s linear infinite;
  z-index: 0;
  opacity: 0.7;
  transition: opacity .35s ease, filter .35s ease;
}

.footer-card:hover::after{
  opacity: 1;
  filter: blur(18px);
}

/* Phased Staggered Rotation across the 4 Cards */
.footer-card:nth-child(1)::before, .footer-card:nth-child(1)::after { animation-delay: 0s; }
.footer-card:nth-child(2)::before, .footer-card:nth-child(2)::after { animation-delay: -1.25s; }
.footer-card:nth-child(3)::before, .footer-card:nth-child(3)::after { animation-delay: -2.5s; }
.footer-card:nth-child(4)::before, .footer-card:nth-child(4)::after { animation-delay: -3.75s; }

.footer-card > *{
  position: relative;
  z-index: 2;
}

/* Col 1: Brand */
.footer-brand-lockup{
  display: flex;
  align-items: center;
  gap: 14px;
}

.footer-brand-logo{
  border-radius: 12px;
  filter: drop-shadow(0 6px 16px rgba(47, 122, 73, 0.35));
  flex-shrink: 0;
}

.footer-brand-meta{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-brand-title{
  font-family: var(--font-latin);
  font-size: 1.35rem;
  letter-spacing: 0.06em;
  color: var(--ink-1);
  font-weight: 900;
}

.footer-brand-sub{
  font-family: var(--font-ar);
  font-size: 0.84rem;
  color: var(--accent-ink);
  font-weight: 500;
}

.footer-brand-desc{
  font-family: var(--font-ar);
  font-size: 0.88rem;
  line-height: 1.7;
  color: var(--ink-2);
  font-weight: 400;
  margin: 0;
}

.footer-live-status{
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(72, 160, 101, 0.08);
  border: 1px solid rgba(126, 207, 152, 0.25);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 12px 14px;
}

.footer-status-dot{
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #48a065;
  box-shadow: 0 0 12px #48a065, 0 0 20px rgba(72, 160, 101, 0.8);
  animation: beaconPulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
  flex-shrink: 0;
}

.footer-status-info{
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.footer-status-heading{
  font-family: var(--font-ar);
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--ink-1);
}

.footer-status-time{
  font-family: var(--font-ar);
  font-size: 0.78rem;
  color: var(--accent-ink);
}

.footer-trust-pill{
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-ar);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--steel-1);
  border-block-start: 1px solid rgba(255, 255, 255, 0.07);
  padding-block-start: 14px;
  margin-top: auto;
}

.footer-trust-icon{
  color: var(--accent-ink);
  flex-shrink: 0;
}

/* Col 2: Social Media Hub */
.footer-card-header{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border-block-end: 1px solid rgba(255, 255, 255, 0.08);
  padding-block-end: 14px;
}

.footer-card-title{
  font-family: var(--font-ar);
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink-1);
  margin: 0;
}

.footer-badge-count{
  font-family: var(--font-ar);
  font-size: 0.72rem;
  font-weight: 700;
  background: rgba(72, 160, 101, 0.15);
  color: var(--accent-ink);
  padding: 3px 10px;
  border-radius: var(--r-pill);
  border: 1px solid rgba(126, 207, 152, 0.28);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.footer-social-list{
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.footer-social-item{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  text-decoration: none;
  color: var(--ink-1);
  transition: all .25s var(--ease-out);
  position: relative;
  overflow: hidden;
}

.footer-social-item:hover{
  background: rgba(72, 160, 101, 0.12);
  border-color: rgba(126, 207, 152, 0.4);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -6px rgba(72, 160, 101, 0.25);
}

.footer-social-icon-box{
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform .25s var(--ease-out);
}

.footer-social-item:hover .footer-social-icon-box{
  transform: scale(1.1);
}

.footer-social-text{
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  min-width: 0;
  gap: 1px;
}

.footer-social-name{
  font-family: var(--font-ar);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-social-val{
  font-family: var(--font-mono);
  font-size: 0.74rem;
  color: var(--steel-2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.footer-social-pill{
  font-family: var(--font-ar);
  font-size: 0.68rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--steel-1);
  flex-shrink: 0;
}

/* Individual Social Brands */
.footer-social--wa .footer-social-icon-box{ background: rgba(37, 211, 102, 0.15); color: #25D366; }
.footer-social--wa:hover{ border-color: rgba(37, 211, 102, 0.45); }

.footer-social--ig .footer-social-icon-box{ background: rgba(225, 48, 108, 0.15); color: #E1306C; }
.footer-social--ig:hover{ border-color: rgba(225, 48, 108, 0.45); }

.footer-social--fb .footer-social-icon-box{ background: rgba(24, 119, 242, 0.15); color: #1877F2; }
.footer-social--fb:hover{ border-color: rgba(24, 119, 242, 0.45); }

.footer-social--tk .footer-social-icon-box{ background: rgba(0, 242, 254, 0.15); color: #00F2FE; }
.footer-social--tk:hover{ border-color: rgba(0, 242, 254, 0.45); }

.footer-social--map .footer-social-icon-box{ background: rgba(52, 168, 83, 0.15); color: #34A853; }
.footer-social--map:hover{ border-color: rgba(52, 168, 83, 0.45); }

.footer-social--tel .footer-social-icon-box{ background: rgba(126, 207, 152, 0.15); color: #7ecf98; }
.footer-social--tel:hover{ border-color: rgba(126, 207, 152, 0.45); }

/* Col 3: Navigation Index */
.footer-nav-links{
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.footer-nav-link{
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-ar);
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--ink-2);
  text-decoration: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
  border: 1px solid rgba(255, 255, 255, 0.04);
  transition: all .22s var(--ease-out);
}

.footer-nav-link:hover{
  background: rgba(72, 160, 101, 0.1);
  border-color: rgba(126, 207, 152, 0.3);
  color: var(--ink-1);
  transform: translateY(-2px);
}

.footer-nav-dot{
  color: var(--accent-ink);
  font-weight: 700;
  font-size: 0.95rem;
  line-height: 1;
  transition: transform .22s var(--ease-out);
}

[dir="rtl"] .footer-nav-link:hover .footer-nav-dot{
  transform: translateX(-3px);
}

[dir="ltr"] .footer-nav-link:hover .footer-nav-dot{
  transform: translateX(3px);
}

/* Col 4: Store Visit & Delivery Coverage */
.footer-visit-blocks{
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer-visit-box{
  background: rgba(255, 255, 255, 0.025);
  border: 1px solid rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: 14px;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  transition: all .22s var(--ease-out);
}

.footer-visit-box:hover{
  border-color: rgba(126, 207, 152, 0.25);
  background: rgba(255, 255, 255, 0.04);
}

.footer-visit-box--accent{
  background: rgba(72, 160, 101, 0.1);
  border-color: rgba(126, 207, 152, 0.3);
}

.footer-visit-tag{
  font-family: var(--font-ar);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--accent-ink);
  letter-spacing: 0.02em;
}

.footer-visit-val{
  font-family: var(--font-ar);
  font-size: 0.94rem;
  font-weight: 700;
  color: var(--ink-1);
}

.footer-visit-sub{
  font-family: var(--font-ar);
  font-size: 0.82rem;
  color: var(--ink-2);
  line-height: 1.6;
  margin: 0;
}

/* ── Footer Bottom Bar ── */
.footer-bottom-bar{
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--edge);
  padding-block-start: 24px;
  border-block-start: 1px solid rgba(238, 241, 236, 0.08);
  position: relative;
  z-index: 1;
}

.footer-bottom-inner{
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.footer-bottom-row-top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.footer-bottom-creds{
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.footer-signature{
  font-family: var(--font-ar);
  font-weight: 800;
  font-size: 1.15rem;
  color: var(--ink-1);
  margin: 0;
}

.footer-bottom-sep{
  color: rgba(126, 207, 152, 0.4); /* exception: translucent brand-green tint, no rgba-alpha token exists for --green-300 */
}

.footer-copyright{
  font-family: var(--font-ar);
  font-size: 0.88rem;
  color: var(--ink-3);
  margin: 0;
}

.footer-bottom-row-sub{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  border-block-start: 1px solid rgba(238, 241, 236, 0.06);
  padding-block-start: 14px;
}

.footer-brands-list{
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: var(--ink-3);
  flex-wrap: wrap;
}

.footer-brands-label{
  color: var(--green-400);
  font-weight: 700;
  font-family: var(--font-ar);
}

.footer-brands-names{
  font-family: var(--font-latin);
  letter-spacing: 0.02em;
}

.close__mark{
  border-radius: 50%;
  opacity: 0.85;
  transition: opacity .2s ease, transform .2s ease;
}

.close__mark:hover{
  opacity: 1;
  transform: rotate(15deg);
}

@keyframes beaconPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.85);
  }
}

/* ── Responsive Adaptations ── */
@media (max-width: 1200px){
  .footer-bento-grid{
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }
}

@media (max-width: 768px){
  .close{
    padding-block-start: 40px;
  }
  .footer-bento-grid{
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .footer-particle-container{
    min-height: 220px;
    border-radius: var(--r-md);
  }
  .footer-particle-hint{
    font-size: 0.8rem;
    padding: 5px 12px;
    text-align: center;
  }
  .footer-bottom-inner{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }
  .footer-brands-list{
    font-size: 0.78rem;
  }
}

/* ═══════════════════════ reveal utility ═══════════════════════ */
[data-reveal]{ transition: opacity .44s var(--ease-out), transform .44s var(--ease-out), filter .44s var(--ease-out); filter: blur(4px); }
[data-reveal].is-revealed{ opacity:1; transform:none; filter:blur(0); }
.hero__h1, .hero__fact, .hero__actions{ opacity:0; transform: translateY(14px); filter: blur(6px); }
.hero__h1.is-revealed, .hero__fact.is-revealed, .hero__actions.is-revealed{ opacity:1; transform:none; filter:blur(0); transition: opacity .52s var(--ease-out), transform .52s var(--ease-out), filter .52s var(--ease-out); }

/* ═══════════════════════ reduced motion ═══════════════════════ */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *, *::before, *::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior:auto !important; }
  [data-reveal], .hero__h1, .hero__fact, .hero__actions{ opacity:1 !important; transform:none !important; filter:none !important; }
  .hero__specular{ display:none !important; }
  .close__whatsapp{ transform:none !important; }
  .consult-chip, .consult-dispatch__btn, .match-card{ transition: none !important; transform: none !important; }
}