/* ══════════════════════════════════════════════════════════════════════
   WAAAUB Qatar Chapter — www.waaaub-qatar.com — design direction (v2)

   THESIS: this is a chapter of a real, storied university's alumni body,
   not a startup — the surface should read like a serious institutional
   registry, not a SaaS gradient template. It refuses both the neon-glass
   AI-hero cliché and the invented "faceted pearl/diamond" mark this site
   shipped with before real brand assets existed (superseded by W-D25).

   OWN-WORLD: warm paper ground (#faf7f4) carrying long-form registry and
   directory content in daylight, bookended by a committed maroon band at
   the hero and footer. 2026-08-23 owner direction: the accent is now
   Qatar-flag maroon (#8A1538, Pantone 1955 C — was AUB-seal maroon
   #840032), used only as a filled surface (buttons, badges) with white
   text on it; a translucent blush/pink had been used in .on-dark to dodge
   maroon-on-dark contrast failures and was rejected outright — see
   --accent-text below for the actual fix. Display type is an institutional serif (Source
   Serif 4) against a clean grotesque body (Manrope — shared with
   app.waaaub-qatar.com so the nav's link-out to the app isn't a visible
   type seam). Arabic uses a single family throughout — IBM Plex Sans
   Arabic, matching the app's Arabic face — for both headings and body — with
   headings scaled ~15% down from the EN numbers (owner correction: no
   separate Arabic display face; a humanist sans at serif-display sizes
   reads oversized). Cards are hairline-bordered, on white, never frosted
   glass. One token system
   (--bg/--text/--accent/…) is scoped twice — light (default) and dark
   (".on-dark", applied to the hero and footer) — so every component works
   in both without duplication, and both are contrast-checked (see
   DECISIONS.md W-D25 and the build report for exact ratios).

   STORY: a Doha-based AUB alumnus/alumna understands within seconds this
   is their university chapter's real registry — who it's for, what
   launches today (registry, jobs, business & services directories,
   events), what's coming, and that their contact details stay private
   until they choose to share them (W-D22).

   FIRST VIEWPORT: sticky nav with the real WAAAUB mark + wordmark; a
   maroon-charcoal hero band with the AUB globe-and-tower motif, a two-line
   headline, one blush-lightened accent word, a sub-line naming the actual
   launch services, a primary+ghost CTA pair, and a three-item trust strip
   built only from verifiable facts (chapter identity, privacy-by-default,
   Doha data residency).

   FORM: bespoke marketing shell (no template), single ordered direction —
   the brief is fully pinned (W-D25 + real logo assets + explicit scope),
   so no concept roll was run; committing directly per Impeccable's
   brief-wins rule.
   ══════════════════════════════════════════════════════════════════════ */

/* ---------------------------------------------------------------------
   1. Design tokens — light (default) + dark (.on-dark) scopes
   --------------------------------------------------------------------- */
:root {
  /* brand constants (context-independent) — Qatar flag maroon (Pantone 1955 C,
     #8A1538), per owner direction 2026-08-23: replaces the earlier AUB-seal
     maroon (#840032) as the site's one accent/brand fill. Always paired with
     white (#ffffff) text/foreground on a filled surface — see --on-accent
     below and the measured ratios in the build report (~9.3:1). */
  --maroon: #8A1538;
  --maroon-deep: #5E0F27;
  --maroon-06: rgba(138, 21, 56, 0.06);
  --maroon-12: rgba(138, 21, 56, 0.12);
  --maroon-20: rgba(138, 21, 56, 0.2);

  /* surfaces — light */
  --bg: #faf7f4;
  --bg-alt: #f3ede7;
  --surface: #ffffff;
  --surface-raised: #ffffff;
  --line: rgba(36, 20, 23, 0.1);
  --line-strong: rgba(36, 20, 23, 0.18);

  /* text — light */
  --text: #241417;
  --text-secondary: #5c5257;
  --text-muted: #6b5f63;
  --on-accent: #ffffff;

  /* accent — light: full-strength Qatar maroon carries CTAs + emphasis.
     --accent is a FILL colour (button/badge backgrounds) and is always
     paired with --on-accent (white) as foreground.
     --accent-text is a TEXT colour for accent emphasis directly on the
     page background (nav active state, links, icons) — in light mode this
     is the same maroon (contrast ~9.3:1 on white/paper), but in .on-dark
     below it resolves to white instead, because maroon text on the dark
     hero/footer background measures ~1.8:1 and fails WCAG entirely. */
  --accent: var(--maroon);
  --accent-strong: var(--maroon-deep);
  --accent-text: var(--maroon);

  /* semantic */
  --focus-ring: var(--maroon);
  --success: #2f7d55;
  --danger: #a4302a;

  /* type */
  --font-display: "Source Serif 4", Georgia, serif;
  --font-body: "Manrope", "IBM Plex Sans Arabic", -apple-system, "Segoe UI", sans-serif;
  /* Arabic uses one family throughout — IBM Plex Sans Arabic for both headings
     and body — per owner correction; headings are scaled down (not re-fonted)
     to compensate for its larger apparent x-height vs. the EN display serif.
     Manrope + IBM Plex Sans Arabic match app.waaaub-qatar.com's --font-brand /
     --font-body exactly, so the two surfaces read as one type system. */
  --font-arabic-display: "IBM Plex Sans Arabic", "Manrope", sans-serif;
  --font-arabic-body: "IBM Plex Sans Arabic", "Manrope", sans-serif;

  /* spacing scale */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2rem;
  --space-xl: 3rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  --space-section: 7rem;

  /* radii + shadow */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-pill: 999px;
  --shadow-card: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 20px 40px -28px rgba(36, 20, 23, 0.28);
  --shadow-lift: 0 24px 48px -20px rgba(36, 20, 23, 0.22);

  /* layout */
  --content-width: 1180px;
  --content-narrow: 760px;
  /* 88px (was 76px) to comfortably fit the enlarged, bordered logo (owner:
     "the logo should be much bigger") without cramping the sticky nav. */
  --nav-height: 88px;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

/* dark scope — applied to .hero, .cta-band--dark and .footer
   2026-08-23: was a lightened blush/pink (#f0c2d0) standing in for the
   maroon everywhere the maroon-on-dark contrast failed. Owner rejected
   pink outright. Fix: --accent and --on-accent are NOT overridden here —
   they inherit the root's maroon fill (#8A1538) + white foreground, so
   buttons/badges on the dark hero and footer are the same Qatar maroon
   with white text as everywhere else (~9.3:1, see build report). Anywhere
   the old pink was doing TEXT-on-dark-background duty (the hero accent
   word, overline label, trust-strip icons, footer link hover) now reads
   --accent-text, which resolves to white in this scope instead. */
.on-dark {
  --bg: #2b1418;
  --bg-alt: #1f0e12;
  --surface: rgba(255, 255, 255, 0.055);
  --surface-raised: rgba(255, 255, 255, 0.08);
  --line: rgba(255, 255, 255, 0.14);
  --line-strong: rgba(255, 255, 255, 0.24);

  --text: #ffffff;
  --text-secondary: #e7d9dc;
  --text-muted: #c9b8bc;

  /* button/badge hover fill: same maroon hue+saturation, lightness raised
     (HSL 342°,74%,31%→40%) so it reads as brighter red against near-black,
     never blended toward pink. White text on it measures ~6.7:1. */
  --accent-strong: #B11B48;
  --accent-text: #ffffff;
  --focus-ring: #ffffff;

  --success: #6fcf9a;
  --danger: #ef9c92;

  background: var(--bg);
  color: var(--text);
}

/* ---------------------------------------------------------------------
   2. Reset + base
   --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html[dir="rtl"] body { font-family: var(--font-arabic-body); }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] .display {
  font-family: var(--font-arabic-display);
  font-weight: 700;
  letter-spacing: 0;
}
/* IBM Plex Sans Arabic reads larger than Source Serif 4 at the same font-size
   (bigger apparent x-height, no display-serif contrast) — every heading is
   scaled down ~15% in RTL so Arabic and English land at a comparable optical
   size, rather than inheriting the EN display-serif numbers verbatim. */
html[dir="rtl"] .hero-title { font-size: calc(clamp(2.4rem, 5vw, 3.6rem) * 0.85); }
html[dir="rtl"] .section-head h2 { font-size: calc(clamp(1.8rem, 3.4vw, 2.6rem) * 0.85); }
html[dir="rtl"] .page-header h1 { font-size: calc(clamp(2rem, 4vw, 2.8rem) * 0.85); }
html[dir="rtl"] .cta-band h2 { font-size: calc(clamp(1.8rem, 3.2vw, 2.4rem) * 0.85); }
html[dir="rtl"] .prose h2 { font-size: calc(1.4rem * 0.85); }
html[dir="rtl"] .prose h3 { font-size: calc(1.1rem * 0.85); }
html[dir="rtl"] .card h3 { font-size: calc(1.15rem * 0.85); }
html[dir="rtl"] .step h3 { font-size: calc(1.05rem * 0.85); }
html[dir="rtl"] .soon-item h3 { font-size: calc(1rem * 0.85); }
html[dir="rtl"] .membership-name { font-size: calc(1.1rem * 0.85); }
html[dir="rtl"] .brand { font-size: 1rem; }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 var(--space-sm);
  letter-spacing: -0.01em;
  color: var(--text);
}
p { margin: 0 0 var(--space-sm); color: var(--text-secondary); }

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--maroon);
  color: #ffffff;
  padding: var(--space-xs) var(--space-sm);
  z-index: 999;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.container {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
}
.container--narrow { max-width: var(--content-narrow); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ---------------------------------------------------------------------
   3. Motif — AUB globe-and-tower watermark / divider
   --------------------------------------------------------------------- */
.lattice-watermark {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.5;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,0.9), rgba(0,0,0,0));
}

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  color: var(--text-muted);
  margin: var(--space-2xl) 0;
}
.divider::before, .divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: linear-gradient(to right, transparent, var(--line-strong), transparent);
}
.divider svg { width: 14px; height: 14px; }

/* ---------------------------------------------------------------------
   4. Navigation
   --------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  border-bottom: 1px solid var(--line);
}

/* 🔴 The frosted-glass background lives on a PSEUDO-ELEMENT, not on .nav itself.
   This is load-bearing, not a style preference.

   A non-`none` `backdrop-filter` makes an element a CONTAINING BLOCK for its
   `position: fixed` descendants (CSS Containment/Filter Effects — same rule as
   `transform`, `filter`, `perspective`, `will-change`). `.nav` previously carried
   `backdrop-filter: saturate(140%) blur(14px)`, so the mobile drawer
   (`.nav-links { position: fixed; inset: var(--nav-height) 0 0 0 }`) resolved its
   inset against the 88px-tall HEADER instead of the viewport, and collapsed to a
   64px sliver showing only "Home".

   The symptom is thoroughly misleading: getComputedStyle reports exactly the
   values you wrote — `top: 88px`, `bottom: 0px`, `position: fixed` — so the rule
   looks correct in DevTools. Only getBoundingClientRect() reveals it (measured
   top 80 vs computed top 88 — the giveaway that the containing block is not the
   viewport). Diagnosed 2026-08-23 at 375x812.

   A pseudo-element has no element descendants, so it can carry the filter without
   trapping anything. `.nav` is `position: sticky`, i.e. positioned, so the
   absolute inset:0 resolves against it. `z-index: -1` keeps it behind the nav's
   own content while staying inside `.nav`'s z-index:100 stacking context.

   ⚠️ If you ever move `backdrop-filter` (or add `transform`/`filter`/
   `will-change`) back onto `.nav`, the drawer breaks again in exactly this way. */
.nav::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(250, 247, 244, 0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
}
.nav-inner {
  width: 100%;
  max-width: var(--content-width);
  margin-inline: auto;
  padding-inline: var(--space-lg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}
.brand {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text);
}
/* Logo: much bigger (34px -> 56px) with a white border/ring around it, per
   owner direction 2026-08-23. Same treatment in the nav (light bg) and the
   footer (.on-dark, dark bg) — the white plate + hairline (var(--line-strong),
   which itself flips light/dark per scope) plus a soft lift shadow keeps it
   crisp on both surfaces without a separate on-dark override. */
.brand img {
  height: 56px;
  width: auto;
  flex-shrink: 0;
  padding: 6px 10px;
  background: #ffffff;
  border: 3px solid #ffffff;
  border-radius: var(--radius-lg);
  box-shadow: 0 0 0 1px var(--line-strong), var(--shadow-lift);
}
.brand-sub {
  display: block;
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--maroon);
}
/* maroon text on the dark footer's near-black bg measures ~1.8:1 — same
   text-vs-fill split as --accent-text; the footer previously patched this
   per-instance with an inline style="color: var(--accent)" (pink). */
.on-dark .brand-sub { color: var(--accent-text); }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}
.nav-links a:not(.btn) {
  font-size: 0.94rem;
  color: var(--text-secondary);
  transition: color 0.2s var(--ease);
  position: relative;
  padding-block: var(--space-3xs);
}
.nav-links a:not(.btn):hover { color: var(--text); }
.nav-links a:not(.btn)[aria-current="page"] { color: var(--maroon); font-weight: 600; }

.nav-actions { display: flex; align-items: center; gap: var(--space-sm); }

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-pill);
  padding: var(--space-3xs) var(--space-sm);
  font-size: 0.82rem;
  color: var(--text-secondary);
  transition: border-color 0.2s var(--ease), color 0.2s var(--ease);
}
.lang-toggle:hover { color: var(--text); border-color: var(--maroon); }
.lang-toggle svg { width: 14px; height: 14px; }

.nav-toggle {
  display: none;
  width: 40px; height: 40px;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
}
.nav-toggle svg { width: 22px; height: 22px; fill: var(--text); }

/* Services nav item — WAI-ARIA "menu button" disclosure pattern (W-D47:
   this is a pure link-out list; the app itself gates auth per destination,
   so only Events — the one member-only entry — carries a visual cue).
   Shares the .nav-links row on desktop; becomes an inline accordion inside
   the mobile drawer (see Responsive section below). */
.nav-item { position: relative; }

.nav-item-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font: inherit;
  font-size: 0.94rem;
  color: var(--text-secondary);
  background: none;
  border: none;
  padding-block: var(--space-3xs);
  cursor: pointer;
  transition: color 0.2s var(--ease);
}
.nav-item-trigger:hover { color: var(--text); }
.nav-item-trigger[aria-expanded="true"] { color: var(--maroon); font-weight: 600; }

.nav-item-caret {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 0.2s var(--ease);
}
.nav-item-trigger[aria-expanded="true"] .nav-item-caret { transform: rotate(180deg); }

/* .nav-item-menu is the positioned/visual wrapper; .nav-item-menu-inner
   (the actual role="menu") is its one grid/flex child — kept as a single
   child on purpose so the mobile accordion below can animate it as one
   collapsing row instead of hardcoding a pixel ceiling. */
.nav-item-menu {
  position: absolute;
  top: calc(100% + 0.85rem);
  inset-inline-start: 0;
  z-index: 110;
  min-width: 240px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lift);
  padding: var(--space-2xs);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity 0.18s var(--ease), transform 0.18s var(--ease), visibility 0.18s;
}
.nav-item-menu.open { opacity: 1; visibility: visible; transform: translateY(0); }

.nav-item-menu-inner {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item-menu .nav-item-menu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  font-size: 0.92rem;
  color: var(--text);
  transition: background 0.15s var(--ease), color 0.15s var(--ease);
}
.nav-item-menu .nav-item-menu-link:hover,
.nav-item-menu .nav-item-menu-link:focus-visible {
  background: var(--maroon-06);
  color: var(--maroon);
}

/* Understated "members" cue — reserved for the one entry (Events) that
   actually requires sign-in, so it reads as a real distinction rather
   than decoration applied evenly across the list. */
.nav-item-menu-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line-strong);
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-muted);
  flex-shrink: 0;
}
.nav-item-menu-tag svg { width: 10px; height: 10px; flex-shrink: 0; }

/* ---------------------------------------------------------------------
   5. Buttons — token-driven, work in light and .on-dark alike
   --------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.75rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: 0.95rem;
  white-space: nowrap;
  transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
  border: 1px solid transparent;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0) scale(0.99); }

.btn--primary {
  background: var(--accent);
  color: var(--on-accent);
  box-shadow: 0 12px 24px -14px rgba(138, 21, 56, 0.5);
}
.btn--primary:hover { background: var(--accent-strong); box-shadow: 0 16px 30px -14px rgba(138, 21, 56, 0.6); }

.btn--ghost {
  border-color: var(--line-strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover { border-color: var(--accent-text); background: var(--maroon-06); }
.on-dark .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); }

.btn--sm { padding: 0.55rem 1.05rem; font-size: 0.85rem; }
.btn--lg { padding: 0.9rem 1.75rem; font-size: 1rem; }
.btn--block { width: 100%; }

.btn svg { width: 18px; height: 18px; flex-shrink: 0; }

/* directional "forward" arrows must mirror in RTL — reading direction reverses */
html[dir="rtl"] .btn svg { transform: scaleX(-1); }

/* ---------------------------------------------------------------------
   6. Hero
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-3xl) var(--space-2xl);
  overflow: hidden;
  /* maroon-tinted glow (was a pink rgba(240,194,208,…) highlight) — a
     brightened tint of the accent hue, never blended toward pink. */
  background:
    radial-gradient(70% 60% at 92% 0%, rgba(177, 27, 72, 0.2), transparent 55%),
    linear-gradient(180deg, var(--bg) 0%, var(--bg-alt) 100%);
}
.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}
.overline {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-text);
  border: 1px solid var(--maroon-20);
  background: var(--maroon-06);
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  margin-bottom: var(--space-lg);
}
/* maroon-tinted chip on the dark hero (was pink rgba(240,194,208,…)) —
   text stays --accent-text (white) since maroon text here fails contrast. */
.on-dark .overline { border-color: rgba(138, 21, 56, 0.45); background: rgba(138, 21, 56, 0.18); }
.overline svg { width: 12px; height: 12px; }

.hero-title {
  font-size: clamp(2.4rem, 5vw, 3.6rem);
  margin-bottom: var(--space-md);
}
/* Accent word on the dark hero: was maroon text on near-black (~1.8:1,
   fails WCAG) fixed by lightening toward pink. Now white text (inherits
   h1's --text, ~17:1) with a maroon underline instead — keeps the brand
   colour without repeating the contrast failure or the rejected pink. */
.hero-title .accent {
  color: inherit;
  font-style: italic;
  text-decoration: underline;
  text-decoration-color: var(--maroon);
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.16em;
}

.hero-sub {
  font-size: 1.12rem;
  color: var(--text-secondary);
  max-width: 620px;
  margin-bottom: var(--space-xl);
}

.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-bottom: var(--space-2xl); }

.trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.trust-item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.86rem;
  color: var(--text-muted);
}
.trust-item svg { width: 16px; height: 16px; color: var(--accent-text); flex-shrink: 0; }

.hero-motif {
  position: absolute;
  top: -6%;
  inset-inline-end: -6%;
  width: min(46vw, 560px);
  opacity: 0.9;
  z-index: 0;
}
html[dir="rtl"] .hero-motif { transform: scaleX(-1); }

.soon-flag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3xs);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--maroon-deep);
  background: var(--maroon-06);
  border: 1px solid var(--maroon-20);
  padding: 0.18rem 0.55rem;
  border-radius: var(--radius-sm);
  vertical-align: middle;
  margin-inline-start: var(--space-2xs);
}

/* ---------------------------------------------------------------------
   7. Sections + section headers
   --------------------------------------------------------------------- */
.section { padding-block: var(--space-section); }
.section--tight { padding-block: var(--space-2xl); }
.section--alt { background: var(--bg-alt); border-block: 1px solid var(--line); }

.section-head { max-width: 640px; margin-bottom: var(--space-2xl); }
.section-head .overline { margin-bottom: var(--space-md); }
.section-head h2 { font-size: clamp(1.8rem, 3.4vw, 2.6rem); }
.section-head p { font-size: 1.05rem; }

.section-head--center { margin-inline: auto; text-align: center; }

/* ---------------------------------------------------------------------
   8. Feature grid + cards
   --------------------------------------------------------------------- */
.grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  box-shadow: var(--shadow-card);
  transition: border-color 0.25s var(--ease), transform 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.card:hover {
  border-color: var(--maroon-20);
  transform: translateY(-3px);
  box-shadow: var(--shadow-lift);
}

.card-icon {
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md);
  background: var(--maroon-12);
  border: 1px solid var(--maroon-20);
  margin-bottom: var(--space-md);
}
.card-icon svg { width: 22px; height: 22px; color: var(--accent-strong, var(--maroon)); }
.card-icon svg { color: var(--maroon); }

.card h3 { font-size: 1.15rem; margin-bottom: var(--space-2xs); }
.card p { margin: 0; font-size: 0.95rem; }

/* ---------------------------------------------------------------------
   9. Steps ("how it works")
   --------------------------------------------------------------------- */
.steps {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(3, 1fr);
  counter-reset: step;
}
.step { position: relative; padding-inline-start: var(--space-xl); }
.step::before {
  counter-increment: step;
  content: counter(step);
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  width: 2.2rem; height: 2.2rem;
  border-radius: 50%;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display);
  color: var(--maroon);
  font-size: 1.05rem;
}
.step h3 { font-size: 1.05rem; }
.step p { font-size: 0.94rem; }

/* ---------------------------------------------------------------------
   10. Coming soon
   --------------------------------------------------------------------- */
.soon-grid {
  display: grid;
  gap: var(--space-md);
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.soon-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--surface);
  border: 1px dashed var(--line-strong);
  border-radius: var(--radius-lg);
}
.soon-item .card-icon { background: transparent; border-color: var(--line-strong); }
.soon-item .card-icon svg { color: var(--text-muted); }
.soon-item h3 { font-size: 1rem; margin-bottom: 0.15em; }
.soon-item p { font-size: 0.88rem; margin: 0; }
.soon-note {
  margin-top: var(--space-xl);
  text-align: center;
  font-size: 0.92rem;
  color: var(--text-muted);
}

/* ---------------------------------------------------------------------
   11. Membership (formerly pricing)
   --------------------------------------------------------------------- */
.membership-grid {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: repeat(3, 1fr);
  align-items: stretch;
}
.membership-card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.membership-card--primary {
  border-color: var(--maroon-20);
  background: linear-gradient(180deg, var(--maroon-06), var(--surface) 45%);
}
.membership-name { font-size: 1.1rem; margin-bottom: var(--space-2xs); }
.membership-list { display: flex; flex-direction: column; gap: var(--space-2xs); margin: var(--space-md) 0 var(--space-lg); flex: 1; }
.membership-list li { display: flex; gap: var(--space-2xs); font-size: 0.94rem; color: var(--text-secondary); align-items: flex-start; }
.membership-list svg { width: 16px; height: 16px; color: var(--maroon); flex-shrink: 0; margin-top: 0.2em; }

/* ---------------------------------------------------------------------
   12. FAQ (native <details>)
   --------------------------------------------------------------------- */
.faq { max-width: var(--content-narrow); margin-inline: auto; }
.faq-item {
  border-bottom: 1px solid var(--line);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) 0;
  font-weight: 600;
  font-size: 1.02rem;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .icon { width: 18px; height: 18px; transition: transform 0.25s var(--ease); flex-shrink: 0; color: var(--maroon); }
.faq-item[open] summary .icon { transform: rotate(45deg); }
.faq-item p { padding-bottom: var(--space-md); max-width: 640px; }

/* ---------------------------------------------------------------------
   13. CTA band
   --------------------------------------------------------------------- */
.cta-band {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  background: var(--bg-alt);
  border: 1px solid var(--line);
}
.cta-band h2 { font-size: clamp(1.8rem, 3.2vw, 2.4rem); max-width: 620px; margin-inline: auto var(--space-sm); }
.cta-band p { max-width: 520px; margin-inline: auto var(--space-lg); }
.cta-band .hero-actions { justify-content: center; margin-bottom: 0; }

/* dark CTA band variant (used sparingly, still token-driven via .on-dark) */
.cta-band.on-dark { background: var(--bg); border-color: var(--line); }

/* ---------------------------------------------------------------------
   14. Simple content pages (about / privacy / terms / contact)
   --------------------------------------------------------------------- */
.page-header {
  padding-block: var(--space-2xl) var(--space-xl);
  border-bottom: 1px solid var(--line);
  background: var(--bg-alt);
}
.page-header h1 { font-size: clamp(2rem, 4vw, 2.8rem); margin-bottom: var(--space-2xs); }
.page-header p { font-size: 1.05rem; max-width: 620px; }
.breadcrumb {
  display: flex; align-items: center; gap: var(--space-2xs);
  font-size: 0.85rem; color: var(--text-muted); margin-bottom: var(--space-md);
}
.breadcrumb a { color: var(--text-muted); }
.breadcrumb a:hover { color: var(--maroon); }

.prose { max-width: var(--content-narrow); }
.prose h2 { font-size: 1.4rem; margin-top: var(--space-2xl); }
.prose h3 { font-size: 1.1rem; margin-top: var(--space-lg); }
.prose p, .prose li { color: var(--text-secondary); font-size: 0.98rem; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin-bottom: var(--space-md); }
.prose li { margin-bottom: var(--space-2xs); }
.prose a { color: var(--maroon); text-decoration: underline; text-underline-offset: 2px; }
.prose .updated { color: var(--text-muted); font-size: 0.85rem; margin-bottom: var(--space-xl); }
.prose .callout {
  background: var(--bg-alt);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-md);
  font-size: 0.92rem;
  color: var(--text-secondary);
  margin-bottom: var(--space-xl);
}

/* ---------------------------------------------------------------------
   15. Contact form
   --------------------------------------------------------------------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: var(--space-2xl);
  align-items: start;
}
.field { margin-bottom: var(--space-md); }
.field label {
  display: block;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--text-secondary);
  margin-bottom: var(--space-2xs);
}
.field input, .field textarea, .field select {
  width: 100%;
  padding: 0.75rem 0.9rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--text);
  font: inherit;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.field input:focus, .field textarea:focus, .field select:focus {
  border-color: var(--maroon);
  box-shadow: 0 0 0 3px var(--maroon-12);
  outline: none;
}
.field textarea { min-height: 140px; resize: vertical; }
.field-hint { font-size: 0.8rem; color: var(--text-muted); margin-top: var(--space-3xs); }

.contact-info-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
.contact-info-item {
  display: flex;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-bottom: 1px solid var(--line);
}
.contact-info-item:last-child { border-bottom: none; }
.contact-info-item svg { width: 20px; height: 20px; color: var(--maroon); flex-shrink: 0; margin-top: 0.15em; }
.contact-info-item h3 { font-size: 0.95rem; margin-bottom: 0.15em; }
.contact-info-item p { font-size: 0.9rem; margin: 0; }

.form-status {
  display: none;
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border-radius: var(--radius-sm);
  font-size: 0.9rem;
}
.form-status--ok { display: block; background: rgba(47, 125, 85, 0.1); border: 1px solid rgba(47, 125, 85, 0.35); color: var(--success); }
.form-status--err { display: block; background: rgba(164, 48, 42, 0.1); border: 1px solid rgba(164, 48, 42, 0.35); color: var(--danger); }

/* ---------------------------------------------------------------------
   16. Footer (dark scope)
   --------------------------------------------------------------------- */
.footer {
  padding-block: var(--space-2xl) var(--space-lg);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--space-xl);
  margin-bottom: var(--space-2xl);
}
.footer-brand p { max-width: 320px; font-size: 0.92rem; }
.footer-col h3 {
  font-family: var(--font-body);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-sm);
}
.footer-col ul { display: flex; flex-direction: column; gap: var(--space-2xs); }
.footer-col a { font-size: 0.92rem; color: var(--text-secondary); transition: color 0.2s var(--ease); }
.footer-col a:hover { color: var(--accent-text); }

.footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--line);
}
.footer-copy { font-size: 0.85rem; color: var(--text-muted); }

.footer-provenance {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--line);
}
.footer-provenance img {
  height: 20px;
  width: auto;
  display: block;
  background: #ffffff;
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm);
}
.footer-provenance span { font-size: 0.78rem; color: var(--text-muted); }

.powered-by {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: 0.82rem;
  color: var(--text-muted);
}
.powered-by a { font-weight: 600; color: var(--text); text-decoration: none; }
.powered-by a:hover, .powered-by a:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

/* Contact-form honeypot: real people never see or reach it; bots fill every field. */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------------
   17. Scroll reveal
   --------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
html.no-js .reveal { opacity: 1; transform: none; }

/* ---------------------------------------------------------------------
   18. Responsive
   --------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .grid--3, .membership-grid { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: var(--space-2xl); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
}

/* 🔴 The hamburger drawer must start where the desktop row STOPS FITTING, not at
   the phone breakpoint. Between ~769px and ~1060px the six nav items + language
   toggle + "Access the App" button are wider than the header, so the flex row
   squeezed the brand link and the "WAAAUB / Qatar Chapter" wordmark spilled
   underneath the "Home" link (found 2026-09-21 on an iPad-width window). */
@media (max-width: 1100px) {
  .nav-toggle { display: flex; }
  .nav-links {
    position: fixed;
    inset: var(--nav-height) 0 0 0;
    background: var(--bg);
    flex-direction: column;
    align-items: stretch;
    padding: var(--space-lg);
    gap: var(--space-md);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
    overflow-y: auto;
  }
  .nav-links.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
  .nav-links a:not(.btn) { font-size: 1.05rem; padding-block: var(--space-sm); border-bottom: 1px solid var(--line); }
  .nav-actions { margin-top: var(--space-md); flex-direction: column; align-items: stretch; }
  .nav-actions .btn { width: 100%; }

  /* Services item becomes an inline accordion inside the drawer, not a
     floating panel — consistent with the rest of the vertical drawer. */
  .nav-item { width: 100%; }
  .nav-item-trigger {
    width: 100%;
    justify-content: space-between;
    padding-block: var(--space-sm);
    font-size: 1.05rem;
    border-bottom: 1px solid var(--line);
  }
  /* Grid-rows collapse instead of an animated max-height: no hardcoded
     ceiling to clip a 4th item or a two-line Arabic wrap, and it animates
     on the compositor instead of thrashing layout every frame. */
  .nav-item-menu {
    position: static;
    inset-inline-start: auto;
    top: auto;
    z-index: auto;
    min-width: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    opacity: 1;
    transform: none;
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.25s var(--ease), visibility 0.25s;
  }
  .nav-item-menu.open { visibility: visible; grid-template-rows: 1fr; }
  .nav-item-menu-inner {
    overflow: hidden;
    min-height: 0;
    padding-block: var(--space-2xs) var(--space-xs);
  }
  .nav-item-menu .nav-item-menu-link {
    padding-inline: var(--space-md) var(--space-sm);
    font-size: 0.98rem;
    border-inline-start: 2px solid var(--line);
  }
}

@media (max-width: 768px) {
  :root { --space-section: 4.5rem; }
  .grid--3, .grid--2, .membership-grid, .footer-grid { grid-template-columns: 1fr; }
  .hero-motif { display: none; }
  .hero-title { max-width: 100%; }
}