/* ==========================================================================
   MAHU — Specialty coffee drive-thru, Jazan, Saudi Arabia
   Design system, ported from the 2021 Mahu visual identity.

   Brand type: Luam (Bold / Regular / Light) — commercial, not supplied with
   the brand deck. SUBSTITUTIONS in use until the real Luam files arrive:
     Luam Bold/Regular -> Big Shoulders Display  (display / headline)
     Luam Light/body   -> Archivo Narrow         (body, UI, small text)
   Arabic runs on Tajawal (display) + Almarai (body).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Fonts
   -------------------------------------------------------------------------- */
@font-face{font-family:"Big Shoulders Display";font-style:normal;font-weight:300 700;font-display:swap;
  src:url("../fonts/big-shoulders-display-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/archivo-narrow-latin.woff2") format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Archivo Narrow";font-style:normal;font-weight:400 700;font-display:swap;
  src:url("../fonts/archivo-narrow-latin-ext.woff2") format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

@font-face{font-family:"Almarai";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/almarai-arabic-400.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}
@font-face{font-family:"Almarai";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/almarai-latin-400.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:"Almarai";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/almarai-arabic-700.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}
@font-face{font-family:"Almarai";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/almarai-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/tajawal-arabic-400.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/tajawal-latin-400.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/tajawal-arabic-500.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:500;font-display:swap;src:url("../fonts/tajawal-latin-500.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/tajawal-arabic-700.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:700;font-display:swap;src:url("../fonts/tajawal-latin-700.woff2") format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/tajawal-arabic-800.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}
@font-face{font-family:"Tajawal";font-style:normal;font-weight:800;font-display:swap;src:url("../fonts/tajawal-latin-800.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}

/* --------------------------------------------------------------------------
   2. Tokens
   -------------------------------------------------------------------------- */
:root{
/* --- Core brand (from the 2021 Mahu visual identity, "THE COLORS") --- */
--teal-600:#067B80;        /* TEAL        rgb(2 123 128)   cmyk 87 35 47 9 */
--fire-opal-500:#E86660;   /* FIRE OPAL   rgb(232 102 96)  cmyk 4 75 59 0 */
--sandy-brown-500:#EF964A; /* SANDY BROWN rgb(239 150 74)  cmyk 3 48 79 0 */

/* --- Illustration palette, sampled from the packaging artwork --- */
--pine-800:#0E5B55;        /* dark headland / deep shade */
--teal-400:#64ADAF;        /* ocean band */
--sand-300:#F3B07A;        /* beach band */
--sun-200:#FAD9A6;         /* low sun */
--cream-100:#FFF1DF;       /* paper / cup stock — the brand's true "white" */
--cream-200:#F7E8D3;       /* cream, one step down (dividers, insets) */

/* --- Neutrals: warm, never pure grey --- */
--ink-900:#123033; --ink-700:#274B4C; --ink-500:#5C7476;
--ink-300:#9CAFAF; --ink-100:#D9E0DB; --white:#FFFFFF;

/* --- Tints & shades used for states --- */
--teal-700:#045A5E; --teal-500:#0A9296; --teal-050:#E3F0EF;
--fire-opal-600:#D2514B; --fire-opal-050:#FBE4E2;
--sandy-brown-600:#D97F34; --sandy-brown-050:#FDEEDC;

/* --- Semantic aliases --- */
--surface-page:var(--cream-100); --surface-card:var(--white);
--surface-inset:var(--cream-200); --surface-brand:var(--teal-600);
--surface-brand-deep:var(--pine-800); --surface-accent:var(--sandy-brown-500);
--surface-hot:var(--fire-opal-500);
--text-body:var(--ink-900); --text-muted:var(--ink-500); --text-subtle:var(--ink-300);
--text-on-brand:var(--cream-100); --text-on-accent:var(--ink-900);
--text-brand:var(--teal-600); --text-price:var(--teal-600);
--border-hairline:rgba(18,48,51,.12); --border-strong:var(--teal-600);
--border-inset:rgba(18,48,51,.06); --focus-ring:var(--sandy-brown-500);
--state-success:var(--teal-600); --state-warning:var(--sandy-brown-500);
--state-error:var(--fire-opal-500); --state-info:var(--teal-400);

/* --- Illustration band order (top -> bottom), the brand's signature scene --- */
--scene-sky:var(--cream-100); --scene-sun:var(--sun-200);
--scene-hills:var(--fire-opal-500); --scene-headland:var(--pine-800);
--scene-sea:var(--teal-400); --scene-beach:var(--sand-300);

/* --- Type --- */
--font-display:"Big Shoulders Display","Oswald","Arial Narrow",sans-serif;
--font-body:"Archivo Narrow","Arial Narrow",sans-serif;
--font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
--fw-light:300; --fw-regular:400; --fw-medium:500; --fw-bold:700;
--size-display-xl:96px; --lh-display-xl:.86;
--size-display-l:64px;  --lh-display-l:.9;
--size-display-m:44px;  --lh-display-m:.94;
--size-display-s:32px;  --lh-display-s:1;
--size-title:24px;   --lh-title:1.15;
--size-body-l:18px;  --lh-body-l:1.5;
--size-body:16px;    --lh-body:1.55;
--size-body-s:14px;  --lh-body-s:1.5;
--size-caption:12px; --lh-caption:1.35;
--track-display:.02em; --track-eyebrow:.22em; --track-body:0;

/* --- Space --- */
--space-0:0px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;
--space-5:24px;--space-6:32px;--space-7:48px;--space-8:64px;--space-9:96px;--space-10:128px;
--gutter-screen:24px; --gutter-screen-wide:48px; --max-measure:62ch; --hit-min:44px;

/* --- Radius --- */
--radius-0:0px;--radius-sm:6px;--radius-md:12px;--radius-lg:20px;--radius-xl:28px;
--radius-pill:999px;--radius-card:var(--radius-md);--radius-control:var(--radius-pill);
--border-width:1px;--border-width-strong:2px;

/* --- Elevation: warm, low, single-direction. The identity is flat print —
       use sparingly. --- */
--shadow-0:none;
--shadow-1:0 1px 2px rgba(18,48,51,.06);
--shadow-2:0 4px 14px rgba(18,48,51,.08);
--shadow-3:0 12px 32px rgba(18,48,51,.12);
--shadow-inset:inset 0 0 0 1px rgba(18,48,51,.08);
--overlay-scrim:rgba(18,48,51,.5);
--protection-gradient:linear-gradient(180deg,rgba(18,48,51,0) 0%,rgba(18,48,51,.55) 100%);

/* --- Motion --- */
--ease-standard:cubic-bezier(.2,.7,.3,1);
--ease-out:cubic-bezier(.16,1,.3,1);
--ease-in:cubic-bezier(.5,0,.9,.3);
--dur-fast:120ms; --dur-base:200ms; --dur-slow:360ms;
--press-scale:.97; --hover-lift:-1px;

/* --- Page-level derived sizes --- */
--size-hero:clamp(38px, min(9vw, 12.5svh), 96px);
--size-step-title:clamp(26px, 2.9vw, 36px);
--nav-switch-font:"Archivo Narrow","Arial Narrow",sans-serif;
--hero-scrim-dir:right;
--hero-img-pos:6% bottom;
}

/* Arabic overrides — Tajawal/Almarai need more leading and no extra tracking. */
:root[lang="ar"]{
--font-display:"Tajawal","Big Shoulders Display",sans-serif;
--font-body:"Almarai","Archivo Narrow",sans-serif;
--track-display:0em; --track-eyebrow:.08em;
--size-hero:clamp(32px, min(6vw, 9.5svh), 68px);
--size-step-title:clamp(24px, 2.5vw, 31px);
--lh-display-xl:1.12; --lh-display-l:1.15; --lh-display-m:1.2; --lh-title:1.35;
--hero-scrim-dir:left;
--hero-img-pos:100% bottom;
}

/* --------------------------------------------------------------------------
   3. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--cream-100);color:var(--text-body);
  font-family:var(--font-body);font-size:var(--size-body);line-height:var(--lh-body);
  overflow-x:hidden;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto}
a{color:var(--teal-600);text-decoration:none}
a:hover{color:var(--teal-700)}
:focus-visible{outline:3px solid var(--focus-ring);outline-offset:2px}
::selection{background:var(--sun-200);color:var(--ink-900)}
.u-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.u-skip{position:absolute;inset-inline-start:-9999px;top:0;z-index:100;
  padding:12px 20px;background:var(--cream-100);color:var(--teal-700);font-weight:700}
.u-skip:focus{inset-inline-start:0}

/* Display headings — always uppercase in Latin, tight, tracked out slightly.
   Arabic never gets uppercase (it has no case) or extra tracking. */
.t-display{font-family:var(--font-display);font-weight:var(--fw-bold);
  letter-spacing:var(--track-display);text-transform:uppercase;margin:0}
:root[lang="ar"] .t-display{text-transform:none}
.t-xl{font-size:var(--size-display-xl);line-height:var(--lh-display-xl)}
.t-l{font-size:clamp(36px,5vw,64px);line-height:var(--lh-display-l)}
.t-m{font-size:var(--size-display-m);line-height:var(--lh-display-m)}
.t-s{font-size:var(--size-display-s);line-height:var(--lh-display-s)}
.t-eyebrow{font-size:var(--size-caption);line-height:var(--lh-caption);font-weight:var(--fw-bold);
  text-transform:uppercase;letter-spacing:var(--track-eyebrow);color:var(--ink-500)}
:root[lang="ar"] .t-eyebrow{text-transform:none}
.t-lead{font-size:var(--size-body-l);line-height:var(--lh-body-l);color:var(--text-muted)}
.t-mono{font-family:var(--font-mono)}

/* --------------------------------------------------------------------------
   4. Layout
   -------------------------------------------------------------------------- */
.wrap{max-width:1100px;margin:0 auto;padding-inline:clamp(24px,4vw,48px)}
.sec{padding-block:clamp(48px,7vw,96px)}
.sec--cream{background:var(--cream-100);color:var(--ink-900)}
.sec--inset{background:var(--cream-200);color:var(--ink-900)}
.sec--pine{background:var(--pine-800);color:var(--cream-100)}
.sec--teal{background:var(--teal-600);color:var(--cream-100)}
.sec--sun{background:var(--sun-200);color:var(--ink-900)}
.sec-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
  gap:20px;margin-bottom:clamp(32px,5vw,56px)}
.sec-head__text{display:flex;flex-direction:column;gap:12px;min-width:0}
.grid{display:grid;gap:20px}
.grid--auto{grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr))}
.grid--split{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:clamp(36px,5vw,72px);align-items:center}
.stack{display:flex;flex-direction:column}

/* --------------------------------------------------------------------------
   5. Components
   -------------------------------------------------------------------------- */

/* Button — PAINT x SIZE, mirroring components/core/Button.jsx */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:44px;padding:0 var(--space-5);
  font-family:var(--font-body);font-weight:var(--fw-bold);font-size:15px;line-height:1;
  text-transform:uppercase;letter-spacing:.1em;white-space:nowrap;
  border:var(--border-width-strong) solid transparent;border-radius:var(--radius-pill);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-standard),
    color var(--dur-fast) var(--ease-standard),border-color var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard)}
:root[lang="ar"] .btn{text-transform:none;letter-spacing:0}
.btn:active{transform:scale(var(--press-scale))}
.btn:disabled{background:var(--ink-100);color:var(--ink-500);cursor:not-allowed;
  border-color:transparent;transform:none}
.btn--sm{min-height:36px;padding:0 var(--space-4);font-size:13px;gap:6px}
.btn--lg{min-height:54px;padding:0 var(--space-6);font-size:18px;gap:10px}
.btn--block{display:flex;width:100%}
.btn--primary{background:var(--teal-600);color:var(--cream-100)}
.btn--primary:hover:not(:disabled){background:var(--teal-700);color:var(--cream-100)}
.btn--accent{background:var(--sandy-brown-500);color:var(--ink-900)}
.btn--accent:hover:not(:disabled){background:var(--sandy-brown-600)}
.btn--hot{background:var(--fire-opal-500);color:var(--cream-100)}
.btn--hot:hover:not(:disabled){background:var(--fire-opal-600)}
.btn--secondary{background:transparent;color:var(--teal-600);border-color:var(--teal-600)}
.btn--secondary:hover:not(:disabled){background:var(--teal-050);color:var(--teal-700)}
.btn--ghost{background:transparent;color:var(--teal-600)}
.btn--ghost:hover:not(:disabled){background:var(--teal-050)}
.btn--onBrand{background:var(--cream-100);color:var(--teal-600)}
.btn--onBrand:hover:not(:disabled){background:var(--white);color:var(--teal-700)}
.btn--outlineCream{background:transparent;color:var(--cream-100);border-color:var(--cream-100)}
.btn--outlineCream:hover:not(:disabled){background:var(--cream-100);color:var(--teal-700)}
.btn--outlineInk{background:transparent;color:var(--ink-900);border-color:rgba(18,48,51,.2);font-size:13px}
.btn--outlineInk:hover:not(:disabled){background:var(--teal-050);border-color:var(--teal-600)}

/* Badge — TONE map from components/core/Badge.jsx */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;
  border-radius:var(--radius-pill);font-family:var(--font-body);font-weight:var(--fw-bold);
  font-size:var(--size-caption);line-height:1.2;text-transform:uppercase;letter-spacing:.12em}
:root[lang="ar"] .badge{text-transform:none;letter-spacing:0}
.badge--teal{background:var(--teal-050);color:var(--teal-700)}
.badge--coral{background:var(--fire-opal-050);color:var(--fire-opal-600)}
.badge--sand{background:var(--sandy-brown-050);color:var(--sandy-brown-600)}
.badge--solid{background:var(--teal-600);color:var(--cream-100)}
.badge--cream{background:var(--cream-200);color:var(--ink-700)}
.badge--sun{background:var(--sun-200);color:var(--ink-900)}

/* Tag — selectable pill */
.tag{display:inline-flex;align-items:center;gap:6px;min-height:34px;padding:0 14px;
  background:transparent;color:var(--ink-700);
  border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-pill);
  font-family:var(--font-body);font-weight:var(--fw-medium);font-size:var(--size-body-s);
  cursor:pointer;transition:background var(--dur-fast) var(--ease-standard)}
.tag:hover{background:var(--teal-050)}
.tag[aria-selected="true"]{background:var(--teal-600);color:var(--cream-100);border-color:var(--teal-600)}

/* Card */
.card{display:flex;flex-direction:column;background:var(--surface-card);
  border:var(--border-width) solid var(--border-hairline);border-radius:var(--radius-card);
  box-shadow:var(--shadow-1);overflow:hidden}
.card__media{position:relative;aspect-ratio:4/3;background:var(--surface-inset)}
.card__media img{width:100%;height:100%;object-fit:cover;display:block}
.card__body{flex:1;padding:24px;display:flex;flex-direction:column;gap:12px}

/* SceneBand — the brand's signature horizon, BANDS from SceneBand.jsx */
.scene{display:flex;flex-direction:column;height:12px;overflow:hidden}
.scene>i{flex:1;display:block}
.scene--beach>i:nth-child(1){background:var(--scene-sky)}
.scene--beach>i:nth-child(2){background:var(--scene-sea)}
.scene--beach>i:nth-child(3){background:var(--scene-beach)}
.scene--sunset>i:nth-child(1){background:var(--scene-sky)}
.scene--sunset>i:nth-child(2){background:var(--scene-hills)}
.scene--sunset>i:nth-child(3){background:var(--scene-sea)}
.scene--deep>i:nth-child(1){background:var(--scene-sea)}
.scene--deep>i:nth-child(2){background:var(--scene-headland)}
.scene--sand>i:nth-child(1){background:var(--scene-beach)}
.scene--sand>i:nth-child(2){background:var(--sun-200)}

/* Logo */
.logo{height:28px;width:auto;display:block}

/* --------------------------------------------------------------------------
   6. Navigation
   -------------------------------------------------------------------------- */
.nav{position:fixed;top:0;inset-inline:0;z-index:40}
.nav__bar{display:flex;align-items:center;gap:var(--space-6);
  padding:var(--space-4) var(--gutter-screen);background:var(--teal-600);
  transition:background var(--dur-base) var(--ease-standard),box-shadow var(--dur-base) var(--ease-standard)}
.nav__links{display:flex;gap:var(--space-5);margin-inline-start:auto}
.nav__link{background:transparent;border:none;padding:var(--space-2) 0;cursor:pointer;
  color:rgba(255,241,223,.72);font-family:var(--font-body);font-weight:var(--fw-bold);
  font-size:var(--size-body-s);line-height:1;text-transform:uppercase;letter-spacing:.14em}
:root[lang="ar"] .nav__link{text-transform:none;letter-spacing:0}
.nav__link:hover{color:var(--cream-100)}
.nav__link[aria-current="true"]{color:var(--cream-100);box-shadow:inset 0 -2px 0 0 var(--cream-100)}
.nav__right{display:flex;align-items:center;gap:var(--space-3)}
.nav__lang{min-height:var(--hit-min);padding:0 14px;background:transparent;border:none;
  color:var(--cream-100);font-family:var(--nav-switch-font);font-weight:var(--fw-bold);
  font-size:var(--size-caption);text-transform:uppercase;letter-spacing:var(--track-eyebrow);cursor:pointer}
.nav__burger{display:none;place-items:center;width:44px;height:44px;flex:0 0 auto;
  background:transparent;border:2px solid rgba(255,241,223,.5);border-radius:var(--radius-pill);
  color:var(--cream-100);cursor:pointer}
.nav__sheet{position:fixed;inset-inline:0;top:68px;bottom:0;background:var(--teal-600);
  color:var(--cream-100);display:flex;flex-direction:column;padding:8px 20px 28px;
  overflow-y:auto;animation:mahuFade var(--dur-base) var(--ease-standard) both}
.nav__sheet[hidden]{display:none}
.nav__sheet a{display:flex;align-items:center;justify-content:space-between;gap:16px;
  width:100%;min-height:60px;padding:0 4px;border-bottom:1px solid rgba(255,241,223,.24);
  color:var(--cream-100);font-family:var(--font-display);font-weight:var(--fw-bold);
  font-size:26px;letter-spacing:var(--track-display);text-transform:uppercase;text-align:start}
:root[lang="ar"] .nav__sheet a{text-transform:none}
@media (max-width:860px){
  .nav__links{display:none}
  .nav__burger{display:grid}
  .nav__bar{gap:12px;padding:12px 20px}
  .nav__lang{margin-inline-start:auto}
}
@media (min-width:861px){.nav__sheet{display:none}}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.foot{background:var(--teal-600);color:var(--cream-100)}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));
  gap:32px;padding-block:clamp(40px,6vw,72px)}
.foot__col{display:flex;flex-direction:column;gap:10px}
.foot__head{font-size:var(--size-caption);text-transform:uppercase;
  letter-spacing:var(--track-eyebrow);color:rgba(255,241,223,.72)}
:root[lang="ar"] .foot__head{text-transform:none;letter-spacing:0}
.foot a{color:var(--cream-100);font-size:var(--size-body-s)}
.foot a:hover{color:var(--sun-200)}
.foot span.foot__muted{font-size:var(--size-body-s);color:rgba(255,241,223,.86)}

/* --------------------------------------------------------------------------
   8. Motion
   -------------------------------------------------------------------------- */
@keyframes mahuStamp{from{opacity:0;transform:scale(1.18)}to{opacity:1;transform:scale(1)}}
@keyframes mahuFade{from{opacity:0}to{opacity:1}}
@keyframes mahuPop{0%{opacity:0;transform:scale(.86)}100%{opacity:1;transform:scale(1)}}
@keyframes mahuRing{from{opacity:.5;transform:scale(1)}to{opacity:0;transform:scale(1.5)}}
.reveal{opacity:0;transform:translateY(14px);
  transition:opacity var(--dur-slow) var(--ease-out),transform var(--dur-slow) var(--ease-out)}
.reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* Directional arrows point the way the text runs. */
:root[lang="ar"] .u-arrow{transform:scaleX(-1)}