/* GENERATED FILE — do not edit. Source: site/tokens/tokens.css, site/styles/base.css, site/styles/chrome.css, site/styles/sections.css. Rebuild: node scripts/build-pages.mjs */
/* =============================================================================
   SAWA DESIGN TOKENS — single source of truth for the redesigned website
   =============================================================================

   Source of truth for colour:
     docs/sawa-brand/03_SAWA_VISUAL_LANGUAGE.md §5  (Brand Palette)
     docs/sawa-brand/13_SAWA_COLOR_LIGHTING.md  §2  (Official Palette)
     docs/website-redesign/SAWA_WEBSITE_REDESIGN_DECISIONS.md §13

   RULES
   -----
   1. Raw brand values are declared ONCE, below. Nothing else in the codebase
      may contain a brand hex literal. Section CSS references semantic tokens,
      never raw ones — that is what makes a palette change a one-file edit
      instead of a 118 KB find-and-replace, which is the failure the legacy
      site demonstrates.

   2. There is no second palette. The legacy values (#0d1330, #f5b500,
      #f6f1e7, #a9b0c8) are retired and must not reappear.

   3. Gold has an accessibility constraint baked into its token names — see
      the ACCENT section. The constraint travels with the value so it cannot
      be forgotten at the point of use.

   STATUS (Phase 1)
   ----------------
   This file is the established foundation. It is NOT yet linked into the
   legacy pages: doing so before Phase 2/3 would change the live appearance
   and break the Phase 1 parity requirement. Phase 2 wires it in.
   ============================================================================= */

:root {
  /* ---------------------------------------------------------------------------
     1. RAW BRAND PALETTE — the only place these six values may be written
     --------------------------------------------------------------------------- */
  --sawa-navy: #222c46; /* trust, depth, typography, dark surfaces, end frames */
  --sawa-gold: #ffaa02; /* CTA accents, route highlights, sunlight, warm attention */
  --sawa-green: #59bf75; /* confirmation, successful match, positive state */
  --sawa-red: #fa4c4c; /* alert, error, missed opportunity — use sparingly */
  --sawa-gray: #8f9cb3; /* metadata, secondary text, inactive UI */
  --sawa-off-white: #f8f9fd; /* clean backgrounds, breathing space, end frames */

  /* Neutral ramp derived from brand navy/off-white. Kept deliberately short:
     a long grey scale invites decorative variation the brand does not want. */
  --sawa-navy-900: #1a2236; /* darker navy for layered dark surfaces only */
  --sawa-gray-300: #c9d1e0; /* hairlines and dividers on light surfaces */
  --sawa-white: #ffffff;

  /* ---------------------------------------------------------------------------
     2. SEMANTIC COLOUR — everything downstream uses these, not the raw values
     --------------------------------------------------------------------------- */

  /* Surfaces. Off-white is the MAIN light surface (decision log §13).
     The legacy warm cream is deliberately absent. */
  --surface-primary: var(--sawa-off-white);
  --surface-raised: var(--sawa-white);
  --surface-inverse: var(--sawa-navy);
  --surface-inverse-deep: var(--sawa-navy-900);

  /* Text. Navy is the body-text colour on light surfaces — never gold.
     ---------------------------------------------------------------------------
     GRAY HAS THE SAME SHAPE OF CONSTRAINT AS GOLD, and it is easy to miss.
     Brand gray #8F9CB3 on off-white #F8F9FD measures ~2.64:1 — below AA for
     normal text. On navy it measures ~4.99:1 and is fine. So gray is a
     secondary-text colour ON DARK SURFACES; on light surfaces, secondary text
     is navy and the hierarchy comes from size and weight instead of colour.
     Both facts are true of the brand palette, and the resolution is a usage
     restriction rather than a changed value (Gate 3 two-fact rule).
     --------------------------------------------------------------------------- */
  --text-primary: var(--sawa-navy);
  --text-secondary: var(--sawa-gray); /* on DARK surfaces only */
  --text-inverse: var(--sawa-off-white);
  --text-inverse-secondary: var(--sawa-gray); /* gray on navy — ~4.99:1 */
  /* Secondary text on LIGHT surfaces. Navy, differentiated by size/weight. */
  --text-secondary-on-light: var(--sawa-navy);

  /* Borders */
  --border-subtle: var(--sawa-gray-300);
  --border-subtle-inverse: rgb(248 249 253 / 14%);

  /* State */
  --success: var(--sawa-green);
  --error: var(--sawa-red);

  /* ---------------------------------------------------------------------------
     3. ACCENT (GOLD) — constraint encoded in the token name
     ---------------------------------------------------------------------------
     #FFAA02 on #F8F9FD measures ~2.1:1. That is below the 4.5:1 WCAG AA
     threshold for normal text and below 3:1 for large text. It is a correct
     brand pairing AND it is inaccessible for text — both facts are true, which
     is why the resolution is a usage restriction rather than a changed colour
     (decision log §14, Guardian Gate 3 two-fact rule).

     --accent-on-inverse IS safe for text: gold on navy measures ~9.6:1.
     --------------------------------------------------------------------------- */
  --accent: var(--sawa-gold); /* non-text use on light: rules, route lines, fills, icons-with-label */
  --accent-on-inverse: var(--sawa-gold); /* text-safe ON DARK surfaces only (~9.6:1) */

  /* ---------------------------------------------------------------------------
     4. TYPOGRAPHY
     ---------------------------------------------------------------------------
     English: DM Sans. Arabic: IBM Plex Sans Arabic, Noto Sans Arabic fallback.
     Locked 2026-09-17 (decision log §15). Inter, Playfair Display and Cairo are
     not part of this system and must not be added to it.
     --------------------------------------------------------------------------- */
  --font-latin: "DM Sans", system-ui, -apple-system, sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Noto Sans Arabic", system-ui, sans-serif;
  --font-body: var(--font-latin);

  /* Type scale. Eight steps, fluid between the mobile and desktop bounds.
     Deliberately short — the brand asks for restraint and warns against
     "multiple competing font sizes" (03 §7). */
  --text-xs: 0.8125rem; /* 13px — smallest permitted. Nothing below this ships. */
  --text-sm: 0.9375rem; /* 15px */
  --text-base: 1rem; /* 16px */
  --text-lg: clamp(1.125rem, 0.4vw + 1rem, 1.25rem);
  --text-xl: clamp(1.375rem, 1vw + 1.1rem, 1.75rem);
  --text-2xl: clamp(1.75rem, 2vw + 1.2rem, 2.5rem);
  --text-3xl: clamp(2.25rem, 4vw + 1.2rem, 3.5rem);
  --text-4xl: clamp(2.75rem, 6vw + 1.2rem, 4.5rem);

  --leading-tight: 1.15;
  --leading-snug: 1.3;
  --leading-normal: 1.55;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  --tracking-tight: -0.02em;
  --tracking-normal: 0;

  /* ---------------------------------------------------------------------------
     5. SPACING — one 4px-based scale, used for every gap, pad and margin
     --------------------------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;

  /* Section rhythm. Varying these per section is how the page avoids the
     "identical composition" pattern Gate 16 flags. */
  --section-pad-block: clamp(var(--space-16), 8vw, var(--space-24));
  --section-pad-block-tight: clamp(var(--space-12), 6vw, var(--space-16));

  /* ---------------------------------------------------------------------------
     6. LAYOUT
     --------------------------------------------------------------------------- */
  --container-max: 75rem; /* 1200px */
  --container-narrow: 46rem; /* 736px — readable measure for prose */
  --gutter: clamp(var(--space-4), 4vw, var(--space-8)); /* 16px floor on mobile */

  --bp-sm: 37.5rem; /* 600px */
  --bp-md: 56.25rem; /* 900px */
  --bp-lg: 75rem; /* 1200px */

  /* ---------------------------------------------------------------------------
     7. RADIUS, BORDER, SHADOW — deliberately minimal
     ---------------------------------------------------------------------------
     Three radii and ONE shadow. Gate 16 flags "excessive rounded cards" and
     "generic SaaS shadows" as warning signs: a large radius taxonomy is how a
     site drifts into component-library-demo aesthetics. If a fourth radius
     seems necessary, that is a signal the composition is wrong, not the scale.
     --------------------------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 16px;
  --radius-full: 999px; /* pills and circular controls only */

  --border-width: 1px;

  --shadow: 0 1px 2px rgb(34 44 70 / 6%), 0 8px 24px rgb(34 44 70 / 8%);

  /* ---------------------------------------------------------------------------
     8. MOTION
     ---------------------------------------------------------------------------
     Motion explains, guides, connects and reveals (03 §45). It does not
     decorate. Durations are short by design; anything longer than --duration-slow
     is drawing attention to itself rather than to the content.
     --------------------------------------------------------------------------- */
  --duration-fast: 120ms;
  --duration-base: 220ms;
  --duration-slow: 600ms; /* route-line draw — the longest permitted */
  --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* ---------------------------------------------------------------------------
     9. INTERACTION
     --------------------------------------------------------------------------- */
  --target-min: 44px; /* minimum interactive size, every breakpoint */
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--sawa-navy);
  --focus-ring-color-inverse: var(--sawa-off-white);
}

/* Arabic inherits everything and swaps the family. Arabic needs slightly more
   line height than DM Sans at the same optical size, which is set here once
   rather than patched per component. */
:root:lang(ar),
[lang="ar"] {
  --font-body: var(--font-arabic);
  --leading-normal: 1.7;
  --leading-snug: 1.45;
}

/* Reduced motion is honoured at the token layer, so every consumer inherits it
   without having to remember. Individual components still need their own
   @media guard for transforms they own. */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 1ms;
    --duration-base: 1ms;
    --duration-slow: 1ms;
  }
}

/* =============================================================================
   SAWA BASE — document defaults, RTL foundation, accessibility, motion
   =============================================================================

   Consumes site/tokens/tokens.css. Declares no brand hex literals of its own.

   RTL IS NATIVE HERE, NOT RETROFITTED
   -----------------------------------
   Every directional property below is logical (inline/block), not physical
   (left/right). Arabic is the primary experience for most of SAWA's audience,
   and a system authored LTR-first needs an override for every component later.
   The rule for all downstream CSS: use margin-inline / padding-inline /
   inset-inline / border-inline / text-align: start|end. Reach for left/right
   only when the thing is genuinely physical — a drop shadow's offset, a map.

   STATUS (Phase 1)
   ----------------
   Established, not yet linked into the legacy pages. Phase 2 wires it in.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. Reset — minimal, not a framework reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd,
ul,
ol {
  margin: 0;
}

ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding-inline-start: 0;
}

img,
picture,
svg,
video {
  display: block;
  max-inline-size: 100%;
  block-size: auto;
}

input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}

/* -----------------------------------------------------------------------------
   2. Document
   -------------------------------------------------------------------------- */
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  color: var(--text-primary);
  background-color: var(--surface-primary);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* -----------------------------------------------------------------------------
   3. Typography defaults
   -------------------------------------------------------------------------- */
h1,
h2,
h3,
h4 {
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  text-wrap: balance;
}

h1 {
  font-size: var(--text-4xl);
}
h2 {
  font-size: var(--text-3xl);
}
h3 {
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}
h4 {
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
}

p {
  text-wrap: pretty;
  max-inline-size: 68ch;
}

/* Arabic does not take the tight Latin tracking well — it closes up joins. */
[lang="ar"] h1,
[lang="ar"] h2,
[lang="ar"] h3,
[lang="ar"] h4 {
  letter-spacing: var(--tracking-normal);
}

a {
  color: inherit;
  text-underline-offset: 0.18em;
}

/* -----------------------------------------------------------------------------
   4. Layout primitives — logical properties only
   -------------------------------------------------------------------------- */
.container {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.container--narrow {
  max-inline-size: var(--container-narrow);
}

.section {
  padding-block: var(--section-pad-block);
}

.section--tight {
  padding-block: var(--section-pad-block-tight);
}

.section--inverse {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
}

/* -----------------------------------------------------------------------------
   5. Accessibility foundation
   -------------------------------------------------------------------------- */

/* Visible focus everywhere. :focus-visible so pointer users are not shouted at,
   with a :focus fallback for older engines. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color);
  outline-offset: var(--focus-ring-offset);
  border-radius: var(--radius-sm);
}

.section--inverse :where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline-color: var(--focus-ring-color-inverse);
}

/* Never remove focus without replacing it. Kept as a guard so a later phase
   cannot quietly reintroduce outline:none. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* Minimum interactive target. Applies at every breakpoint, not just mobile:
   the audit found 6x6px carousel dots, 34x34px social icons and 38x38px
   arrows shipping today. */
:where(a, button, [role="button"], [role="tab"], input[type="checkbox"], input[type="radio"]).target,
.target {
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
}

/* Skip link — visually hidden until focused. */
.skip-link {
  position: absolute;
  inset-inline-start: var(--space-4);
  inset-block-start: calc(var(--space-4) * -4);
  z-index: 999;
  padding: var(--space-3) var(--space-4);
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  border-radius: var(--radius-md);
  transition: inset-block-start var(--duration-fast) var(--ease-out);
}

.skip-link:focus {
  inset-block-start: var(--space-4);
}

/* Screen-reader-only text that remains focusable. */
.visually-hidden:not(:focus):not(:active) {
  clip-path: inset(50%);
  block-size: 1px;
  inline-size: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   6. Motion foundation
   -----------------------------------------------------------------------------
   Deliberately one primitive, not a scroll-animation system. `.reveal` moves an
   element a short distance into place once, when `.is-in` is added by an
   IntersectionObserver. Anything that needs more than this in a later phase
   needs a product reason first (Gate 14 / Gate 16).

   Every animated element must have a complete static resting state, so the
   reduced-motion and no-JS paths show finished content rather than nothing.
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--duration-base) var(--ease-out),
    transform var(--duration-base) var(--ease-out);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

/* No JS: content must be visible. Never leave a page blank behind an observer. */
.no-js .reveal {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  /* Content still appears — only the movement is removed. */
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* -----------------------------------------------------------------------------
   7. Print — legal pages are printed in practice
   -------------------------------------------------------------------------- */
@media print {
  body {
    background: #fff;
    color: #000;
  }

  .skip-link,
  nav {
    display: none;
  }
}

/* =============================================================================
   SAWA SITE CHROME — header, navigation, mobile menu, footer
   =============================================================================

   Consumes site/tokens/tokens.css. No brand hex literals here.

   WHY THIS LOOKS THE WAY IT DOES, SPECIFICALLY FOR SAWA (Guardian Gate 16)
   -----------------------------------------------------------------------
   The header is a ROUTE, not a navbar.

   SAWA's product is a journey that already exists between two points, and the
   brand's own visual system names the route line as its device
   (03 §44 maps and routes, 13 §11 "subtle route-line pattern"). So the header's
   bottom edge is not a generic 1px divider: it is a thin navy road with a gold
   origin node at the inline-start, directly under the logo. Reading order runs
   from that origin along the road to the actions at the inline-end — which in
   Arabic reverses automatically, because the whole thing is built from logical
   properties. A visitor travels the header the way a trip travels a road.

   That detail is used exactly ONCE on the page and carries the site's core
   idea. It is not transplantable: a fintech or a food-delivery site has no
   origin and no road, so the motif would be meaningless there. That is the
   Gate 16 transplant test, answered concretely.

   Everything else is deliberately quiet, because 01 §10 asks for a voice that
   is confident and not loud: one surface, one accent, no shadow on the header,
   no blur, no gradient, no sticky chrome eating mobile height.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   HEADER
   -------------------------------------------------------------------------- */
.site-header {
  position: relative;
  background-color: var(--surface-primary);
  color: var(--text-primary);
  /* The road. Navy line full width — the route the whole site is about. */
  border-block-end: 2px solid var(--surface-inverse);
}

/* The origin node: where this journey starts. Sits ON the road, at the
   inline-start edge, under the logo. Mirrors in RTL with no extra rules. */
.site-header::after {
  content: "";
  position: absolute;
  inset-block-end: -5px;
  inset-inline-start: var(--gutter);
  inline-size: 8px;
  block-size: 8px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  border: 2px solid var(--surface-primary);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-3);
}

.site-header__logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  min-block-size: var(--target-min);
}

.site-header__logo img {
  inline-size: auto;
  block-size: 34px;
}

.site-header__end {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-inline-start: auto;
}

/* -----------------------------------------------------------------------------
   NAVIGATION (desktop)
   -------------------------------------------------------------------------- */
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin-inline-start: auto;
}

.site-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-nav__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  /* Short labels ("FAQ") would otherwise make a ~30px-wide target. Height alone
     is not a tappable target. */
  min-inline-size: var(--target-min);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  text-decoration: none;
  position: relative;
}

/* Hover marks the link with a short segment of road, not a full underline or a
   pill. Same motif, smallest possible dose. */
.site-nav__link::after {
  content: "";
  position: absolute;
  inset-block-end: 10px;
  inset-inline-start: 0;
  inline-size: 0;
  block-size: 2px;
  background-color: var(--accent);
  transition: inline-size var(--duration-fast) var(--ease-out);
}

.site-nav__link:hover::after,
.site-nav__link:focus-visible::after {
  inline-size: 100%;
}

.site-nav__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

/* -----------------------------------------------------------------------------
   BUTTONS
   -----------------------------------------------------------------------------
   Gold fill with navy text. Gold is the brand's CTA accent (13 §2), and navy on
   gold measures ~7.7:1 — comfortably AA. The reverse (gold text on off-white)
   is ~2.1:1 and is why --accent is never used as a text colour on light.
   -------------------------------------------------------------------------- */
.site-header .btn,
.site-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-block-size: var(--target-min);
  padding-inline: var(--space-4);
  padding-block: var(--space-2);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out);
}

.site-header .btn--primary,
.site-footer .btn--primary {
  background-color: var(--accent);
  color: var(--sawa-navy);
}

.site-header .btn--primary:hover,
.site-footer .btn--primary:hover {
  background-color: var(--sawa-navy);
  color: var(--text-inverse);
}

/* -----------------------------------------------------------------------------
   LANGUAGE SWITCHER
   -----------------------------------------------------------------------------
   A text control, never a flag: a flag names a country, not a language, and
   Arabic is not "Egypt" any more than English is "the UK". The generator
   replaces this element with a real crawlable <a href> to the opposite-language
   URL carrying hreflang and an aria-label, so it works without JavaScript and
   search engines can follow EN <-> AR.
   -------------------------------------------------------------------------- */
.site-header .lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  padding-inline: var(--space-3);
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--text-primary);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.site-header .lang-toggle:hover {
  border-color: var(--surface-inverse);
}

/* -----------------------------------------------------------------------------
   MOBILE MENU TRIGGER
   -------------------------------------------------------------------------- */
.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  min-inline-size: var(--target-min);
  min-block-size: var(--target-min);
  padding: 0;
  border: var(--border-width) solid var(--border-subtle);
  border-radius: var(--radius-md);
  background-color: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
  display: block;
  inline-size: 18px;
  block-size: 2px;
  background-color: currentColor;
  border-radius: var(--radius-sm);
}

.nav-toggle__bars {
  position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
  content: "";
  position: absolute;
  inset-inline-start: 0;
}

.nav-toggle__bars::before {
  inset-block-start: -6px;
}

.nav-toggle__bars::after {
  inset-block-start: 6px;
}

/* -----------------------------------------------------------------------------
   MOBILE NAVIGATION
   -----------------------------------------------------------------------------
   A compact panel docked under the header — not a full-screen takeover and not
   a floating glass sheet. It stays visually attached to the road it belongs to,
   and it opens in ~220ms with no elastic easing: Gate 16 flags "giant
   full-screen animation merely for spectacle".
   -------------------------------------------------------------------------- */
@media (max-width: 56.1875rem) {
  .nav-toggle {
    display: inline-flex;
  }

  .site-nav {
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    z-index: 50;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin: 0;
    padding-inline: var(--gutter);
    padding-block: var(--space-2) var(--space-4);
    background-color: var(--surface-primary);
    border-block-end: 2px solid var(--surface-inverse);
  }

  .site-nav[hidden] {
    display: none;
  }

  .site-nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .site-nav__list > li {
    display: block;
  }

  /* Full-width rows: in a docked panel the whole row should be the target, not
     just the text. justify-content: flex-start follows the flex main axis, so
     it starts at the right in RTL with no extra rule. */
  .site-nav__link {
    inline-size: 100%;
    justify-content: flex-start;
    min-block-size: var(--target-min);
    padding-block: var(--space-3);
    border-block-end: var(--border-width) solid var(--border-subtle);
    font-size: var(--text-base);
  }

  /* The sliding road segment is a desktop affordance; on touch there is no
     hover, so it would only ever be a stray line. */
  .site-nav__link::after {
    display: none;
  }

  .site-nav__actions {
    margin-block-start: var(--space-4);
  }

  .site-nav__actions .btn {
    inline-size: 100%;
  }
}

/* Body scroll lock while the panel is open. */
.has-nav-open {
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   FOOTER
   -----------------------------------------------------------------------------
   Navy with off-white type and a single gold accent — the pairing 13 §11 names
   for exactly this kind of closing frame. Four short columns, not a SaaS
   directory: SAWA has nine pages, and a footer with more links than the site
   has pages is a sitemap pretending to be a brand moment.
   -------------------------------------------------------------------------- */
.site-footer {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  /* The road arrives. Gold rule at the top edge closes the journey the header
     opened, and is the only gold in the footer. */
  border-block-start: 2px solid var(--accent);
}

.site-footer__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  gap: var(--space-8);
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-16) var(--space-12);
}

.site-footer__brand {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: flex-start;
}

.site-footer__logo {
  display: inline-flex;
  min-block-size: var(--target-min);
  align-items: center;
}

.site-footer__logo img {
  inline-size: auto;
  block-size: 30px;
}

.site-footer__tagline {
  margin: 0;
  color: var(--text-inverse-secondary);
  font-size: var(--text-sm);
  max-inline-size: 30ch;
}

.site-footer__social {
  display: flex;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--target-min);
  block-size: var(--target-min);
  border: var(--border-width) solid var(--border-subtle-inverse);
  border-radius: var(--radius-md);
  color: var(--text-inverse);
  transition: border-color var(--duration-fast) var(--ease-out);
}

.site-footer__social a:hover {
  border-color: var(--accent);
}

.site-footer__social svg {
  inline-size: 20px;
  block-size: 20px;
}

.site-footer__heading {
  margin: 0 0 var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-normal);
  line-height: var(--leading-snug);
  color: var(--text-inverse-secondary);
}

.site-footer__col ul {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-footer__col a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  color: var(--text-inverse);
  font-size: var(--text-sm);
  text-decoration: none;
}

.site-footer__col a:hover {
  text-decoration: underline;
}

.site-footer__stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.site-footer__stores a {
  display: inline-flex;
  align-items: center;
  min-block-size: var(--target-min);
}

.site-footer__stores img {
  block-size: 40px;
  inline-size: auto;
}

.site-footer__base {
  border-block-start: var(--border-width) solid var(--border-subtle-inverse);
}

.site-footer__copy {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: var(--space-4);
  color: var(--text-inverse-secondary);
  font-size: var(--text-xs);
}

@media (min-width: 56.25rem) {
  .site-footer__brand {
    grid-column: span 2;
  }
}

/* NOTE ON SPECIFICITY
   ------------------------------------------------------------------
   /sawa.css is linked BEFORE each page's inline <style>, deliberately: that
   keeps legacy page CSS authoritative for page CONTENT, so Phase 2 changes the
   chrome without disturbing sections that later phases will rewrite.

   The cost is that a chrome selector sharing a class name with legacy CSS would
   lose on source order. Three names collide — .btn, .lang-toggle and .reveal.
   The first two are scoped to .site-header / .site-footer above, lifting them
   to (0,2,0) so they win regardless of order. .reveal is left alone on purpose:
   legacy page CSS owns content reveals for now, and Phase 3 migrates it.
   ------------------------------------------------------------------ */

/* =============================================================================
   SAWA HOMEPAGE SECTIONS 1–8 (Phases 3 and 4)
   =============================================================================

   Consumes site/tokens/tokens.css. No brand hex literals.

   ONE DEVICE, EIGHT DIFFERENT COMPOSITIONS
   ----------------------------------------
   Every section here is built from the same object — the road — and no two use
   it the same way:

     1 Hero        the road runs edge to edge, a car already on it
     2 Empty seat  no road at all; the car seen from above, twice
     3 How         the road turns vertical, steps as waypoints
     4 Two ways    the road runs between two people who join it
     5 Real roads  five roads side by side, each drawn by a different hand
     6 Why SAWA    no road; prose, two sides and a hanging-label list
     7 People      no road; a pinned strip of three at three different heights
     8 End         one road arrives from the page edge and stops at its marker

   That is deliberate. Gate 16 flags "visually identical section compositions",
   and eight variations on a three-card grid is exactly what a template
   produces. Varying the composition while holding the motif is what makes a
   page read as art-directed rather than assembled.

   The surfaces do not simply alternate either — 7 is the only white section and
   8 is the only deep navy, so the page does not settle into a two-tone rhythm
   the reader can predict by the halfway point.

   The road is not decoration. SAWA's product is a trip that already exists
   between two points; 03 §44 and 13 §11 name the route line as the brand's own
   device. A fintech has no road.
   ============================================================================= */

/* -----------------------------------------------------------------------------
   Shared section primitives
   -------------------------------------------------------------------------- */
.hero-s,
.seat-s,
.how-s,
.ways-s,
.routes-s,
.why-s,
.people-s,
.end-s {
  font-family: var(--font-body);
}

/* Legacy page CSS still declares h1,h2,h3 { color:#fff; font-family:<serif> }
   and /sawa.css is deliberately linked BEFORE it, so element-level colour would
   otherwise win inside these sections and paint dark-on-light headings white.
   Stating colour and family explicitly on the section headings (0,1,0) settles
   it. This goes away when Phase 5 removes the legacy stylesheets. */
.hero-s :where(h1, h2, h3),
.seat-s :where(h1, h2, h3),
.how-s :where(h1, h2, h3),
.ways-s :where(h1, h2, h3),
.routes-s :where(h1, h2, h3),
.why-s :where(h1, h2, h3),
.people-s :where(h1, h2, h3),
.end-s :where(h1, h2, h3),
.hero-s__slogan,
.seat-s__h2,
.how-s__h2,
.ways-s__h2,
.routes-s__h2,
.why-s__h2,
.people-s__h2,
.end-s__h2,
.steps__h3,
.why-sides__h3 {
  font-family: var(--font-body);
  color: inherit;
}

.hero-s__inner,
.seat-s__inner,
.how-s__inner,
.ways-s__inner,
.routes-s__inner,
.why-s__inner,
.people-s__inner,
.end-s__inner {
  inline-size: 100%;
  max-inline-size: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.hero-s__slogan-a,
.seat-s__micro,
.how-s__micro,
.ways-s__micro,
.routes-s__micro,
.why-s__micro,
.people-s__micro,
.end-s__micro {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.btn-s {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  padding-inline: var(--space-6);
  padding-block: var(--space-3);
  border: var(--border-width) solid transparent;
  border-radius: var(--radius-md);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition:
    background-color var(--duration-fast) var(--ease-out),
    border-color var(--duration-fast) var(--ease-out),
    color var(--duration-fast) var(--ease-out);
}

/* Gold fill, navy text: ~7.7:1. The reverse (gold text on light) is ~2.1:1 and
   is never used. */
.btn-s--primary {
  background-color: var(--accent);
  color: var(--sawa-navy);
}

.btn-s--primary:hover {
  background-color: var(--sawa-navy);
  color: var(--text-inverse);
}

.btn-s--quiet {
  border-color: var(--border-subtle-inverse);
  color: var(--text-inverse);
}

.btn-s--quiet:hover {
  border-color: var(--text-inverse);
}

/* =============================================================================
   1. HERO — the road runs edge to edge
   ============================================================================= */
.hero-s {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  padding-block: clamp(var(--space-12), 7vw, var(--space-24)) var(--section-pad-block);
  overflow: hidden;
}

/* The slogan IS the page h1 — the brand's own line, not a marketing headline
   wrapped around it (08 §7). Sizing is declared here rather than inherited so
   it does not track the global h1 scale. */
.hero-s__slogan {
  margin: 0 0 var(--space-12);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  font-size: inherit;
  letter-spacing: normal;
}

/* Two lines, one heading: the question and the invitation (08 §7). The gold
   second line is the answer, which is why only it carries the accent. */
.hero-s__slogan-a {
  font-size: clamp(2rem, 5vw + 0.5rem, 3.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  text-transform: none;
  color: var(--text-inverse);
}

.hero-s__slogan-b {
  font-size: clamp(2rem, 5vw + 0.5rem, 3.75rem);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  color: var(--accent-on-inverse);
}

/* --- the trip figure --- */
.trip {
  margin: 0 0 var(--space-12);
}

.trip__road {
  position: relative;
  block-size: 2px;
  background-color: var(--border-subtle-inverse);
  margin-block-end: var(--space-8);
}

.trip__road::before {
  /* The travelled part of the road: from the origin to the car. */
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 62%;
  background-color: var(--accent);
}

.trip__node {
  position: absolute;
  inset-block-start: 50%;
  inline-size: 12px;
  block-size: 12px;
  margin-block-start: -6px;
  border-radius: var(--radius-full);
}

.trip__node--from {
  inset-inline-start: 0;
  background-color: var(--accent);
}

.trip__node--to {
  inset-inline-end: 0;
  background-color: var(--surface-inverse);
  border: 2px solid var(--text-inverse-secondary);
}

.trip__car {
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 62%;
  transform: translate(-50%, -50%);
  color: var(--text-inverse);
}

/* The car faces the direction of travel. In RTL the road runs the other way,
   so the car turns with it — one rule, not a mirrored stylesheet. */
[dir="rtl"] .trip__car {
  transform: translate(50%, -50%) scaleX(-1);
}

.trip__car svg {
  inline-size: clamp(56px, 7vw, 84px);
  block-size: auto;
}

/* The empty seat, marked on the car itself. */
.trip__seat {
  position: absolute;
  inset-block-start: -10px;
  inset-inline-end: 22%;
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--accent);
}

.trip__labels {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  font-size: var(--text-sm);
}

.trip__label--from,
.trip__label--to {
  font-weight: var(--weight-semibold);
}

.trip__label--to {
  color: var(--text-inverse-secondary);
}

.trip__label--seat {
  color: var(--accent-on-inverse);
  font-weight: var(--weight-semibold);
}

.trip__caption {
  margin-block-start: var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-inverse-secondary);
}

.hero-s__say {
  display: grid;
  gap: var(--space-6);
  max-inline-size: 52ch;
}

.hero-s__lead {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.hero-s__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

@media (min-width: 56.25rem) {
  .trip__labels {
    font-size: var(--text-base);
  }
}

/* =============================================================================
   2. EMPTY SEAT — no road; the car from above, twice
   ============================================================================= */
.seat-s {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  padding-block: var(--section-pad-block);
}

.seat-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary-on-light);
}

.seat-s__h2 {
  margin: 0 0 var(--space-8);
  font-size: var(--text-3xl);
  max-inline-size: 20ch;
}

.seat-s__body {
  display: grid;
  gap: var(--space-4);
  max-inline-size: 60ch;
  margin-block-end: var(--space-16);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.seat-s__body p {
  margin: 0;
}

/* --- the two states --- */
.seats {
  display: grid;
  gap: var(--space-8);
  align-items: center;
  margin: 0 0 var(--space-16);
}

.seats__state {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.seats__label {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary-on-light);
}

/* Four seats seen from above. Not an icon — the actual object the product is
   about. The bonnet edge is the top border. */
.seats__car {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2);
  inline-size: clamp(9rem, 22vw, 12rem);
  padding: var(--space-3);
  border: 2px solid var(--text-primary);
  border-start-start-radius: var(--radius-lg);
  border-start-end-radius: var(--radius-lg);
  border-end-start-radius: var(--radius-sm);
  border-end-end-radius: var(--radius-sm);
}

.seats__seat {
  aspect-ratio: 1;
  border-radius: var(--radius-sm);
  /* Empty seats are outlined, not filled — dashed reads as "nothing here"
     without relying on colour alone. */
  border: 2px dashed var(--border-subtle);
}

.seats__seat.is-taken {
  background-color: var(--text-primary);
  border-color: var(--text-primary);
  border-style: solid;
}

.seats__seat.is-shared {
  background-color: var(--success);
  border-color: var(--success);
  border-style: solid;
}

.seats__note {
  margin: 0;
  font-size: var(--text-sm);
  color: var(--text-secondary-on-light);
  max-inline-size: 26ch;
}

.seats__arrow {
  inline-size: 100%;
  block-size: 2px;
  background-color: var(--accent);
  position: relative;
}

.seats__arrow::after {
  content: "";
  position: absolute;
  inset-inline-end: 0;
  inset-block-start: 50%;
  inline-size: 10px;
  block-size: 10px;
  margin-block-start: -5px;
  border-block-start: 2px solid var(--accent);
  border-inline-end: 2px solid var(--accent);
  transform: translateX(1px) rotate(45deg);
}

[dir="rtl"] .seats__arrow::after {
  transform: translateX(-1px) rotate(-135deg);
}

.seat-s__close {
  margin: 0 0 var(--space-6);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
  font-weight: var(--weight-medium);
  max-inline-size: 34ch;
}

/* The company principle, stated once, after the product is understood — never
   before it (decision log §5). Set quieter than the product copy on purpose. */
.seat-s__principle {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--accent);
  font-size: var(--text-base);
  color: var(--text-secondary-on-light);
  max-inline-size: 46ch;
}

@media (min-width: 56.25rem) {
  .seats {
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-12);
  }

  .seats__arrow {
    inline-size: clamp(3rem, 8vw, 7rem);
  }
}

/* =============================================================================
   3. HOW SAWA WORKS — the road turns vertical, steps as waypoints
   ============================================================================= */
.how-s {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  padding-block: var(--section-pad-block);
}

.how-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-inverse-secondary);
}

.how-s__h2 {
  margin: 0 0 var(--space-16);
  font-size: var(--text-3xl);
  max-inline-size: 18ch;
}

.steps {
  position: relative;
  display: grid;
  gap: var(--space-12);
  margin: 0 0 var(--space-12);
  padding: 0;
  list-style: none;
}

/* The vertical road the markers sit on. */
.steps::before {
  content: "";
  position: absolute;
  inset-block: 0.6rem 0.6rem;
  inset-inline-start: 15px;
  inline-size: 2px;
  background-color: var(--border-subtle-inverse);
}

.steps__step {
  position: relative;
  display: grid;
  grid-template-columns: 32px 1fr;
  gap: var(--space-4);
  align-items: start;
}

.steps__marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 32px;
  block-size: 32px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  color: var(--sawa-navy);
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  position: relative;
  z-index: 1;
}

.steps__text {
  display: grid;
  gap: var(--space-2);
}

/* Who acts at this step. The two sides are named at every step so the roles
   never blur into "a service and a customer". */
.steps__tag {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent-on-inverse);
}

.steps__h3 {
  margin: 0;
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.steps__text p:not(.steps__tag) {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-inline-size: 52ch;
}

.how-s__note {
  margin: 0;
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--accent);
  color: var(--text-inverse-secondary);
  font-size: var(--text-base);
  max-inline-size: 48ch;
}

@media (min-width: 56.25rem) {
  .steps {
    gap: var(--space-16);
  }

  /* Alternating offsets: the road bends. Three flush-left blocks would be a
     list; a road with stops on either side is a trip. */
  .steps__step:nth-child(2) {
    padding-inline-start: clamp(var(--space-8), 8vw, var(--space-24));
  }

  .steps__step:nth-child(3) {
    padding-inline-start: clamp(var(--space-16), 16vw, calc(var(--space-24) * 2));
  }

  .steps::before {
    inset-inline-start: 15px;
  }
}

/* =============================================================================
   4. TWO WAYS TO TRAVEL — the road runs between two people who join it
   ============================================================================= */
.ways-s {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  padding-block: var(--section-pad-block);
}

.ways-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary-on-light);
}

.ways-s__h2 {
  margin: 0 0 var(--space-16);
  font-size: var(--text-3xl);
  max-inline-size: 18ch;
}

.ways {
  display: grid;
  gap: var(--space-8);
}

.ways__side {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
  align-content: start;
}

.ways__eyebrow {
  margin: 0;
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight);
  max-inline-size: 18ch;
}

.ways__role {
  margin: 0;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary-on-light);
}

.ways__p {
  margin: 0 0 var(--space-2);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  max-inline-size: 42ch;
}

/* The shared road. On mobile it is vertical and runs between the two sides; on
   desktop it is horizontal and they meet across it. Either way there is exactly
   one road, and both people are on it. */
.ways__road {
  position: relative;
  min-block-size: 2px;
  background-color: var(--accent);
  margin-block: var(--space-6);
}

.ways__meet {
  position: absolute;
  inset-inline-start: 50%;
  inset-block-start: 50%;
  transform: translate(-50%, -50%);
  padding-inline: var(--space-3);
  padding-block: var(--space-1);
  background-color: var(--surface-primary);
  color: var(--text-secondary-on-light);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
}

@media (min-width: 56.25rem) {
  .ways {
    grid-template-columns: 1fr 2px 1fr;
    gap: var(--space-16);
    align-items: start;
  }

  .ways__road {
    inline-size: 2px;
    block-size: 100%;
    min-block-size: 12rem;
    margin-block: 0;
    justify-self: center;
  }

  /* On desktop the road is vertical and the label is wider than the line, so a
     centred label spills into whichever column sits beside it — which it did in
     Arabic, where the traveller column starts higher relative to the road. The
     top of the road is clear in both languages, so the label goes there. */
  .ways__meet {
    inset-block-start: 0;
    transform: translate(-50%, -50%);
    padding-block: var(--space-2);
  }

  .ways__side--traveller {
    padding-block-start: var(--space-16);
  }
}

/* =============================================================================
   5. REAL ROADS — five corridors, each drawn by a different hand
   =============================================================================
   Every road here is the SAME length. A varying length would be read as a
   quantity (distance, price, popularity) and there is no figure behind it.
   What varies is the curve, which claims nothing. Five slightly different
   curves is also what stops this reading as a bar chart (Gate 16).
   ============================================================================= */
.routes-s {
  background-color: var(--surface-inverse);
  color: var(--text-inverse);
  padding-block: var(--section-pad-block);
}

.routes-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-inverse-secondary);
}

.routes-s__h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-3xl);
  max-inline-size: 18ch;
}

.routes-s__p {
  margin: 0 0 var(--space-16);
  max-inline-size: var(--container-narrow);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-inverse-secondary);
}

.corridors {
  margin: 0 0 var(--space-12);
}

.corridors__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  row-gap: var(--space-8);
}

/* Flex rather than subgrid: "Cairo" starts every row so the first column lines
   up on its own, and letting the road absorb the difference in destination-name
   width keeps every row flush without a second layout system. */
.corridor {
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.corridor__a,
.corridor__b {
  font-size: var(--text-lg);
  white-space: nowrap;
}

.corridor__a {
  color: var(--text-inverse-secondary);
  font-weight: var(--weight-regular);
}

.corridor__b {
  color: var(--text-inverse);
  font-weight: var(--weight-semibold);
}

.corridor__road {
  position: relative;
  flex: 1 1 auto;
  min-inline-size: 2.5rem;
  /* Tall enough that the curve survives being stretched across a desktop row.
     At 24px the five roads flattened into five identical straight lines — the
     exact "identical rows" this composition exists to avoid. */
  block-size: 44px;
}

.corridor__road svg {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  overflow: visible;
}

/* preserveAspectRatio="none" stretches the geometry, which would also stretch
   the stroke into a wedge. non-scaling-stroke keeps the road an even width at
   every viewport. */
.corridor__road path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}

/* Endpoints as real circles rather than SVG geometry, for the same reason. */
.corridor__road::before,
.corridor__road::after {
  content: "";
  position: absolute;
  inset-block-start: 50%;
  inline-size: 7px;
  block-size: 7px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
  transform: translateY(-50%);
}

.corridor__road::before {
  inset-inline-start: 0;
}

.corridor__road::after {
  inset-inline-end: 0;
}

/* The road runs the other way in Arabic, so the curve is drawn the other way. */
[dir="rtl"] .corridor__road svg {
  transform: scaleX(-1);
}

/* The limit of the claim, set next to the claim (Gate 3). Shared treatment with
   the People of SAWA note: a gold rule marks "this is the caveat". */
.routes-s__note,
.people-s__note {
  margin: 0;
  max-inline-size: var(--container-narrow);
  padding-inline-start: var(--space-4);
  border-inline-start: 2px solid var(--accent);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}

.routes-s__note {
  color: var(--text-inverse-secondary);
}

@media (min-width: 56.25rem) {
  .corridors__list {
    max-inline-size: 52rem;
  }
}

/* =============================================================================
   6. WHY SAWA — the one section that argues, so it is prose
   =============================================================================
   Deliberately not a feature grid. Cards give every point the same weight and
   hide a weak claim behind an icon; a lead, two sides and a hanging-label list
   make each sentence carry itself.
   ============================================================================= */
.why-s {
  background-color: var(--surface-primary);
  color: var(--text-primary);
  padding-block: var(--section-pad-block);
}

.why-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary-on-light);
}

.why-s__h2 {
  margin: 0 0 var(--space-8);
  font-size: var(--text-3xl);
  max-inline-size: 16ch;
}

.why-s__lead {
  margin: 0 0 var(--space-16);
  max-inline-size: var(--container-narrow);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

.why-sides {
  display: grid;
  gap: var(--space-8);
  margin-block-end: var(--space-16);
}

.why-sides__side {
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--accent);
}

.why-sides__h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.why-sides__side p {
  margin: 0;
  max-inline-size: 44ch;
  line-height: var(--leading-normal);
}

.why-points {
  margin: 0 0 var(--space-16);
  max-inline-size: 58rem;
}

.why-points__item {
  display: grid;
  gap: var(--space-2);
  padding-block: var(--space-6);
  border-block-start: var(--border-width) solid var(--border-subtle);
}

.why-points__item:last-child {
  border-block-end: var(--border-width) solid var(--border-subtle);
}

.why-points dt {
  font-size: var(--text-lg);
  font-weight: var(--weight-semibold);
}

.why-points dd {
  margin: 0;
  max-inline-size: 60ch;
  line-height: var(--leading-normal);
}

/* Smart travel named as the travel-specific expression of the company
   principle, never as the parent category (00_SAWA_CORE_IDEA §1). */
.why-s__close {
  margin: 0;
  max-inline-size: 46rem;
  padding-inline-start: var(--space-6);
  border-inline-start: 3px solid var(--accent);
  font-size: var(--text-xl);
  line-height: var(--leading-snug);
}

@media (min-width: 56.25rem) {
  .why-sides {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-16);
  }

  .why-points__item {
    /* Wide enough that the longest label stays on one line — a two-line hanging
       label reads as a wrapped sentence, not a label. */
    grid-template-columns: 22rem minmax(0, 1fr);
    gap: var(--space-8);
    align-items: start;
  }
}

/* =============================================================================
   7. PEOPLE OF SAWA — a pinned strip, not a carousel
   =============================================================================
   White rather than off-white: a third surface, so the page is not a strict
   dark/light alternation by the time it reaches the end (Gate 16).

   The portraits are MARKED PLACEHOLDERS. Gate 7 forbids a stock or generated
   face standing in for a real customer; an obvious empty frame cannot be
   mistaken for one, and the note says so in words as well.
   ============================================================================= */
.people-s {
  background-color: var(--surface-raised);
  color: var(--text-primary);
  padding-block: var(--section-pad-block);
  /* White against off-white is a real step but a quiet one. The hairline makes
     the boundary read as chosen rather than as a rendering accident. */
  border-block-start: var(--border-width) solid var(--border-subtle);
}

.people-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-secondary-on-light);
}

.people-s__h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-3xl);
  max-inline-size: 16ch;
}

.people-s__p {
  margin: 0 0 var(--space-16);
  max-inline-size: var(--container-narrow);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.people {
  display: grid;
  gap: var(--space-12);
}

.person {
  margin: 0;
  display: grid;
  gap: var(--space-4);
  justify-items: start;
}

.person__photo {
  inline-size: 100%;
  max-inline-size: 13rem;
  block-size: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: var(--radius-md);
}

/* A gold rule instead of quotation marks: English and Arabic take different
   quote glyphs, and a generated pair would be wrong in one of them. */
.person__quote {
  margin: 0;
  padding-block-start: var(--space-4);
  border-block-start: 2px solid var(--accent);
}

.person__quote p {
  margin: 0;
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
}

.person__id {
  display: grid;
  gap: var(--space-1);
}

.person__name {
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.person__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
  color: var(--text-secondary-on-light);
}

.person__route::before {
  content: "·";
  margin-inline-end: var(--space-3);
}

.people-s__note {
  margin-block-start: var(--space-16);
  color: var(--text-secondary-on-light);
}

@media (min-width: 56.25rem) {
  .people {
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-8);
    align-items: start;
  }

  /* Three different heights, so the row reads as pinned up rather than
     generated. */
  .person:nth-child(2) {
    margin-block-start: var(--space-16);
  }

  .person:nth-child(3) {
    margin-block-start: var(--space-8);
  }

  .person__photo {
    max-inline-size: 100%;
  }
}

/* =============================================================================
   8. THE END OF THE ROAD — the road arrives and stops
   =============================================================================
   The deepest navy on the page, used once, here. No phone mock-ups and no
   invented app screens: the two real store listings are the product proof.
   ============================================================================= */
.end-s {
  background-color: var(--surface-inverse-deep);
  color: var(--text-inverse);
  padding-block: var(--section-pad-block);
}

/* Full-bleed on purpose — the road comes in off the page edge rather than
   starting politely inside the container. */
.end-road {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-block-end: var(--space-16);
  padding-inline-end: var(--gutter);
}

.end-road__line {
  flex: 1 1 auto;
  min-inline-size: 2rem;
  block-size: 2px;
  background-image: linear-gradient(to right, transparent, var(--accent));
}

[dir="rtl"] .end-road__line {
  background-image: linear-gradient(to left, transparent, var(--accent));
}

.end-road__dot {
  flex: 0 0 auto;
  inline-size: 12px;
  block-size: 12px;
  border-radius: var(--radius-full);
  background-color: var(--accent);
}

/* Gold ON navy is ~9.6:1, so gold is safe for this text. The same gold on the
   light sections is ~2.1:1 and is never used for text there. */
.end-road__dest {
  flex: 0 0 auto;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  color: var(--accent-on-inverse);
}

.end-s__micro {
  margin: 0 0 var(--space-3);
  color: var(--text-inverse-secondary);
}

.end-s__h2 {
  margin: 0 0 var(--space-6);
  font-size: var(--text-3xl);
  max-inline-size: 16ch;
}

.end-s__p {
  margin: 0 0 var(--space-12);
  max-inline-size: var(--container-narrow);
  font-size: var(--text-lg);
  line-height: var(--leading-normal);
  color: var(--text-inverse-secondary);
}

.end-stores {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
}

.end-stores__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-block-size: var(--target-min);
  min-inline-size: var(--target-min);
  border-radius: var(--radius-sm);
}

.end-stores__badge img {
  block-size: 45px;
  inline-size: auto;
}

.end-stores__badge:focus-visible {
  outline: var(--focus-ring-width) solid var(--focus-ring-color-inverse);
  outline-offset: var(--focus-ring-offset);
}