/*
 * Emar The 6th — public marketing site styles (Turn 6.1 redesign).
 * Direction: dark, industrial, cinematic — a lit "warehouse bay" journey
 * through Execution → Supply → Transport, closing on a request form.
 * Navy (#0E2C56) + gold (#CB7D26/#E3A55A) accents on near-black grounds,
 * with stone-toned (#D2CEC5) light bands between scenes and in the
 * "How we work" / footer areas. Bracket-corner buttons and route-node
 * timelines are the two recurring signature components.
 *
 * Fixed-width source (design authored at 1440 desktop / 390 mobile) is
 * reproduced here as a FLUID system (clamp()/%/vw, not literal px) so
 * every intermediate viewport (768/1024/1280...) stays correct — the
 * design's own two reference widths are treated as endpoints to
 * interpolate between, not the only two supported sizes.
 */

:root {
  /* Vertical / text-measure units for the desktop and tablet compositions: both
     equal 100vw (so every calc(X / 1440 * var(--uy)) is identical to the old vw
     formula) except in the tablet range, where they are held at the 901px
     composition. */
  --uy: 100vw;
  --uw: 100vw;
  --mu: 100vw; /* phone-layout unit: 100vw, capped at 540px (see the 541–699px block) */
  --ink-950: #070809;
  --ink-900: #0b0d0f;
  --ink-850: #14181c;
  --ink-800: #1a1814;
  --ink-750: #14120f;
  --stone-300: #d2cec5;
  --stone-400: #c3beb4;
  --stone-500: #beb9af;
  --cream-50: #f1efea;
  --cream-100: #e4e0d8;
  --cream-200: #d6d1c8;
  --cream-muted: #b3ada4;
  --cream-faint: #948d84;
  --navy-800: #0e2c56;
  --gold-600: #cb7d26;
  --gold-500: #e3a55a;
  --gold-700: #7a4510;
  --error-500: #e58a6e;
  --error-100: #f1c7ba;
  --text-dark: #14181c;
  --text-dark-soft: #2e2b26;
  --text-dark-muted: #3c3933;

  --font-ar: "Almarai", "Segoe UI", Tahoma, sans-serif;
  --font-ar-label: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, sans-serif;
  --font-en: "Archivo", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --container: 1200px;
  --edge: clamp(20px, 3vw, 44px);
  --radius-sm: 2px;

  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 72px;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}

body {
  margin: 0;
  background: var(--ink-900);
  color: var(--cream-50);
  font-family: var(--font-ar);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

body.lang-en {
  font-family: var(--font-en);
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

.wrap {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--edge);
}

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

.skip-link {
  position: absolute;
  top: -100px;
  inset-inline-start: 12px;
  z-index: 100;
  background: var(--gold-600);
  color: var(--text-dark);
  padding: 10px 16px;
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: top 0.2s ease;
}
.skip-link:focus {
  top: 12px;
}

.kicker {
  font-family: var(--font-mono);
  font-size: clamp(10px, 0.9vw, 11px);
  font-weight: 500;
  letter-spacing: 0.28em;
  color: var(--gold-500);
  margin: 0 0 14px;
}
.kicker-dark {
  color: var(--gold-700);
}

/* ---------- bracket-corner button (the recurring CTA shape) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  padding: 5px;
}
.btn::before,
.btn::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--gold-600);
  border-style: solid;
  border-width: 0;
}
.btn::before {
  top: 0;
  inset-inline-start: 0;
  border-top-width: 2px;
  border-inline-start-width: 2px;
}
.btn::after {
  bottom: 0;
  inset-inline-end: 0;
  border-bottom-width: 2px;
  border-inline-end-width: 2px;
}
.btn-inner {
  display: flex;
  align-items: stretch;
  white-space: nowrap;
  font-family: var(--font-ar);
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.btn-label {
  padding: clamp(13px, 1.6vw, 17px) clamp(18px, 2.4vw, 28px);
  font-size: clamp(13.5px, 1.1vw, 15.5px);
  font-weight: 800;
}
.btn-arrow {
  display: flex;
  align-items: center;
  padding-inline: clamp(14px, 1.6vw, 22px);
  border-inline-start: 1px solid rgba(241, 239, 234, 0.28);
  font-family: var(--font-mono);
  font-size: 14px;
}
.btn-navy .btn-inner {
  background: var(--navy-800);
  color: var(--cream-50);
}
.btn-navy:hover .btn-inner {
  background: var(--gold-600);
  color: var(--text-dark);
}
.btn-gold .btn-inner {
  background: var(--gold-600);
  color: var(--text-dark);
}
.btn-gold:hover .btn-inner {
  background: var(--cream-50);
}
.btn-gold .btn-arrow {
  border-inline-start-color: rgba(20, 24, 28, 0.28);
}
.btn-outline .btn-inner {
  background: transparent;
  color: var(--cream-50);
  border: 1px solid rgba(241, 239, 234, 0.55);
}
.btn-outline:hover .btn-inner {
  background: var(--gold-600);
  color: var(--text-dark);
  border-color: var(--gold-600);
}
.btn-outline .btn-arrow {
  border-inline-start-color: rgba(241, 239, 234, 0.4);
}
.btn-charcoal .btn-inner {
  background: var(--ink-850);
  color: var(--cream-50);
}
.btn-charcoal:hover .btn-inner {
  background: var(--gold-600);
  color: var(--text-dark);
}
.btn:focus-visible {
  outline: 2px solid var(--gold-500);
  outline-offset: 4px;
}

/* ---------- section shells ---------- */
.scene {
  position: relative;
  overflow: hidden;
  background: var(--ink-900);
}
.scene-media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.scene-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.scene-scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.route-node {
  width: 13px;
  height: 13px;
  border-radius: 50%;
  background: var(--text-dark);
  border: 3px solid var(--stone-300);
  flex: none;
}
.route-node.is-done,
.route-node.is-current {
  background: var(--gold-600);
}
.route-line {
  height: 3px;
  background: var(--text-dark);
}
.route-line-fill {
  height: 3px;
  background: var(--gold-600);
}

/* =====================================================================
   HEADER
   ===================================================================== */
/* position:fixed (not sticky/static) so this bar contributes ZERO height
   to the document while hidden — a sticky or static element still
   reserves its box in normal flow even at opacity:0, which is exactly
   what produced the empty black band above the hero. Fixed removes it
   from flow entirely; "sticking" to the top is then just it always being
   there, shown/hidden by opacity + pointer-events. */
.site-header {
  position: fixed;
  top: 0;
  inset-inline: 0;
  z-index: 40;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--edge);
  background: rgba(11, 13, 15, 0.94);
  border-bottom: 1px solid rgba(241, 239, 234, 0.14);
  font-family: var(--font-ar);
  opacity: 0;
  transform: translateY(-12px);
  pointer-events: none;
  transition:
    opacity 0.35s ease,
    transform 0.35s ease;
}
.site-header.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
}
.brand-name {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.brand-ar {
  font-size: 15px;
  font-weight: 800;
  color: var(--cream-50);
}
.brand-en {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.22em;
  color: var(--cream-muted);
}

.main-nav {
  display: flex;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  font-size: 13.5px;
  white-space: nowrap;
}
.main-nav a {
  color: var(--cream-200);
  border-bottom: 2px solid transparent;
  padding-bottom: 4px;
}
.main-nav a:hover,
.main-nav a.is-active {
  color: var(--cream-50);
}
.main-nav a.is-active {
  border-bottom-color: var(--gold-600);
}

.lang-toggle {
  font-family: var(--font-mono);
  font-size: 11px;
  border: 1px solid rgba(241, 239, 234, 0.36);
  padding: 6px 10px;
  color: var(--cream-50);
  background: transparent;
  cursor: pointer;
}
.lang-toggle:hover {
  border-color: var(--gold-500);
  color: var(--gold-500);
}

.menu-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  cursor: pointer;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
}
.menu-toggle span {
  width: 18px;
  height: 2px;
  background: var(--cream-50);
}
.menu-toggle span:last-child {
  width: 12px;
  align-self: center;
}

.mobile-menu {
  position: fixed;
  inset: 64px 0 0 0;
  z-index: 39;
  background: rgba(11, 13, 15, 0.98);
  padding: 30px var(--edge);
  display: none;
  flex-direction: column;
  overflow-y: auto;
}
.mobile-menu.is-open {
  display: flex;
}
.mobile-menu a {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 18px 0;
  border-bottom: 1px solid rgba(241, 239, 234, 0.14);
  color: var(--cream-50);
  font-size: clamp(20px, 6vw, 26px);
  font-weight: 800;
}
.mobile-menu a .num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--gold-600);
}

@media (max-width: 860px) {
  .main-nav {
    display: none;
  }
  .menu-toggle {
    display: flex;
  }
}

/* =====================================================================
   ENTRANCE (hero / approved scene "5a")
   Reference: 1440×940 — wall/image area 718px (76.383%), stone floor
   222px (23.617%). Every value below uses calc(X / 1440 * 100vw), clamped,
   so the composition is EXACT at the 1440 reference width and scales
   fluidly (not simplified/re-proportioned) at other widths — height
   tracks width via aspect-ratio, so the same vw-based formula is valid
   for vertical measurements too.
   ===================================================================== */
.entrance {
  position: relative;
  display: flex;
  flex-direction: column;
  aspect-ratio: 1440 / 940;
  min-height: 480px;
}
@media (max-width: 640px) {
  .entrance {
    aspect-ratio: auto;
    height: clamp(560px, 148vw, 820px);
  }
}

.entrance-wall {
  position: relative;
  flex: 0 0 76.383%;
  overflow: hidden;
  background: var(--ink-900);
}
.entrance-stage {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.entrance-stage img {
  position: absolute;
  top: 0;
  left: calc(-357 / 1440 * 100vw);
  width: calc(2154 / 1440 * 100vw);
  height: calc(718 / 1440 * 100vw);
  max-width: none;
}

/* Five-bay structure (grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr) — a
   continuous vignette across the whole wall, not three generic columns. */
.entrance-bays {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr 1.25fr 1fr 1fr;
}
.bay {
  position: relative;
}
.bay-edge {
  background: rgba(11, 13, 15, 0.3);
}
.bay-mid {
  background: rgba(11, 13, 15, 0.2);
  box-shadow:
    inset 22px 0 34px -20px rgba(11, 13, 15, 0.6),
    inset -22px 0 34px -20px rgba(11, 13, 15, 0.6);
}
.bay-mid + .bay-center {
  border-inline-start: 1px solid rgba(227, 165, 90, 0.42);
}
.bay-center {
  overflow: hidden;
  border-inline-end: 1px solid rgba(227, 165, 90, 0.42);
  box-shadow: 0 0 90px rgba(227, 165, 90, 0.2);
}
.bay-center img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.entrance-door {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  overflow: hidden;
}
.entrance-door picture {
  position: absolute;
  inset: 0;
  display: block;
}
/* Both halves are crops of the same 2154x718 source frame as the static
   IMG-01 panorama above (.entrance-stage img) — left offsets are chosen so
   the door crops line up pixel-for-pixel with the main panorama and with
   each other, giving a seamless closed state with no visible crop seam. */
.entrance-door img {
  position: absolute;
  top: 0;
  width: calc(2154 / 1440 * 100vw);
  height: calc(718 / 1440 * 100vw);
  max-width: none;
  filter: brightness(0.72);
}
.entrance-door-l img {
  left: calc(-905.57 / 1440 * 100vw);
}
.entrance-door-r img {
  left: calc(-1077 / 1440 * 100vw);
}
/* Base/default state is OPEN (matching the approved design's own rest
   markup) — a no-JS or no-IntersectionObserver visitor sees the finished
   scene, never a permanently-closed door. The WAAPI door-l/door-r
   animation (main.js) only temporarily overrides this via its own
   fill:backwards first keyframe while it actually plays. */
/* Physical left/right (not inset-inline-*): the door crops and the WAAPI translate are physical, so in
   the RTL page logical offsets would swap the halves and slide them INTO the opening. */
.entrance-door-l {
  left: 0;
  transform: translateX(-101%);
  box-shadow: inset -1px 0 0 rgba(241, 239, 234, 0.35);
}
.entrance-door-r {
  left: 50%;
  transform: translateX(101%);
  box-shadow: inset 1px 0 0 rgba(241, 239, 234, 0.35);
}

.entrance-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(11, 13, 15, 0.74) 0%,
    rgba(11, 13, 15, 0.42) 22%,
    rgba(11, 13, 15, 0.36) 52%,
    rgba(11, 13, 15, 0.08) 78%,
    rgba(11, 13, 15, 0.32) 100%
  );
}

/* Overlaid nav row (92px at 1440) — part of the hero scene itself, not a
   separate flow element, so it never reserves extra vertical space. */
.entrance-topbar {
  position: relative;
  z-index: 2;
  height: clamp(64px, calc(92 / 1440 * 100vw), 92px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--edge);
  border-bottom: 1px solid rgba(241, 239, 234, 0.22);
}
.entrance-topbar .brand-mark {
  width: clamp(40px, calc(58 / 1440 * 100vw), 58px);
  height: clamp(40px, calc(58 / 1440 * 100vw), 58px);
  box-shadow:
    0 0 0 1px rgba(241, 239, 234, 0.28),
    0 6px 18px rgba(0, 0, 0, 0.4);
}
.entrance-topbar .brand-ar {
  font-size: clamp(15px, calc(17 / 1440 * 100vw), 17px);
}
.entrance-topbar .main-nav a {
  color: var(--cream-200);
}
.entrance-topbar .main-nav a.is-active {
  color: var(--cream-50);
}
.entrance-topbar-actions {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.4vw, 16px);
}

.entrance-bay-label {
  position: absolute;
  z-index: 2;
  inset-inline-end: var(--edge);
  top: clamp(80px, calc(120 / 1440 * 100vw), 120px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.entrance-bay-label span:first-child {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--gold-500);
  writing-mode: vertical-rl;
}
.entrance-bay-label span:last-child {
  width: 1px;
  height: 130px;
  background: linear-gradient(var(--gold-600), rgba(203, 125, 38, 0));
}
@media (max-width: 639px) {
  .entrance-bay-label {
    display: none;
  }
}

.entrance-copy {
  position: relative;
  z-index: 2;
  padding-inline: var(--edge);
  padding-top: clamp(24px, calc(206 / 1440 * 100vw), 206px);
}
.entrance-title {
  font-size: clamp(34px, calc(132 / 1440 * 100vw), 132px);
  line-height: 1;
  font-weight: 800;
  color: var(--cream-50);
  letter-spacing: -0.035em;
  text-shadow:
    0 10px 40px rgba(11, 13, 15, 0.7),
    0 2px 6px rgba(11, 13, 15, 0.45);
  margin: 0;
}
.entrance-lede {
  display: flex;
  align-items: flex-end;
  gap: clamp(16px, calc(40 / 1440 * 100vw), 40px);
  flex-wrap: wrap;
  margin-top: 2px;
}
.entrance-lede-body {
  margin: 0;
  padding-bottom: clamp(6px, calc(28 / 1440 * 100vw), 28px);
  max-width: clamp(220px, calc(290 / 1440 * 100vw), 290px);
  font-size: clamp(13px, calc(15 / 1440 * 100vw), 15px);
  line-height: 1.8;
  color: var(--cream-100);
  text-shadow: 0 2px 14px rgba(11, 13, 15, 0.95);
}
.m-title-break {
  display: none;
}

/* Bottom stone floor (222px at 1440 — 23.617% of the scene) */
.entrance-strip {
  position: relative;
  flex: 0 0 23.617%;
  background: linear-gradient(var(--stone-300), var(--stone-400));
  border-top: 3px solid var(--gold-600);
  padding-inline: var(--edge);
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.entrance-strip-grid {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 18px;
  display: flex;
}
.entrance-strip-grid span {
  flex: 1;
  border-inline-start: 1px solid rgba(14, 16, 18, 0.12);
}
/* Every 3rd tick is heavier — matches the approved source's rhythmic
   architectural tick pattern, not a uniform grid. */
.entrance-strip-grid span:nth-child(1),
.entrance-strip-grid span:nth-child(4),
.entrance-strip-grid span:nth-child(7) {
  border-inline-start-color: rgba(14, 16, 18, 0.3);
}
.entrance-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.entrance-words {
  display: flex;
  align-items: baseline;
  gap: clamp(16px, calc(48 / 1440 * 100vw), 48px);
  flex-wrap: wrap;
}
.entrance-words span {
  font-size: clamp(22px, calc(46 / 1440 * 100vw), 46px);
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.02em;
}
.entrance-scroll-hint {
  margin-top: 14px;
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: #5e5a52;
}

/* Mobile menu footer (EN toggle + email) — matches the source's own
   placement of the language control inside the opened menu rather than
   on the always-visible topbar. */
.mobile-menu-footer {
  margin-top: 28px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.mobile-menu-email {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cream-faint);
}

/* =====================================================================
   MOBILE HERO — exact-at-390 geometry (source: scene height 820, wall
   560/strip 260, 3-bay grid, bespoke crops, stacked copy, full-width
   CTA). Ported from the authored m5a board, not derived by scaling the
   desktop d5a values — every pixel reference below is the mobile
   source's own. Scoped to <=639px only; desktop (>=640px) is untouched.
   ===================================================================== */
@media (max-width: 639px) {
  .entrance {
    aspect-ratio: 390 / 820;
    height: auto;
    min-height: 480px;
  }
  .entrance-wall {
    flex: 0 0 68.293%; /* 560 / 820 */
  }
  .entrance-stage img {
    left: calc(-645 / 390 * var(--mu));
    width: calc(1680 / 390 * var(--mu));
    height: calc(560 / 390 * var(--mu));
  }
  /* 3-bay grid (edge/center/edge) — the two "mid" bays from the desktop
     5-column grid are hidden, not restyled, so the remaining 3 children
     naturally fill this 3-column track in source order. */
  .entrance-bays {
    grid-template-columns: 1fr 1.3fr 1fr;
  }
  .bay-mid {
    display: none;
  }
  .bay-edge {
    background: rgba(11, 13, 15, 0.28);
  }
  /* No glow ring around the opening on mobile — confirmed absent in source. */
  .bay-center {
    box-shadow: none;
  }
  .entrance-door img {
    width: calc(1680 / 390 * var(--mu));
    height: calc(560 / 390 * var(--mu));
  }
  .entrance-door-l img {
    left: calc(-763.18 / 390 * var(--mu));
  }
  .entrance-door-r img {
    left: calc(-840 / 390 * var(--mu));
  }
  .entrance-scrim {
    background: linear-gradient(
      180deg,
      rgba(11, 13, 15, 0.78) 0%,
      rgba(11, 13, 15, 0.5) 30%,
      rgba(11, 13, 15, 0.4) 62%,
      rgba(11, 13, 15, 0.1) 86%,
      rgba(11, 13, 15, 0.3) 100%
    );
  }
  .entrance-topbar {
    height: calc(64 / 390 * var(--mu));
    padding-inline-start: calc(16 / 390 * var(--mu));
    padding-inline-end: calc(12 / 390 * var(--mu));
  }
  .entrance-topbar .brand-mark {
    width: calc(40 / 390 * var(--mu));
    height: calc(40 / 390 * var(--mu));
  }
  .entrance-topbar .brand-ar {
    font-size: calc(14 / 390 * var(--mu));
  }
  .entrance-topbar .main-nav {
    display: none;
  }
  /* The hero's own lang-toggle (added for desktop's "EN visible from
     first screen" requirement) is not part of the mobile source — the
     only language control on this board lives inside the opened menu. */
  .entrance-topbar-actions [data-lang-toggle] {
    display: none;
  }
  .entrance-copy {
    padding-top: calc(118 / 390 * var(--mu));
  }
  .entrance-title {
    font-size: calc(48 / 390 * var(--mu));
    line-height: 1.06;
  }
  /* Source hard-breaks the Arabic title into 3 lines at 390; English has
     no authored mobile board, so it keeps natural wrap. */
  .m-title-break {
    display: inline;
  }
  /* Mobile stacks line 2 + body vertically (not side by side like desktop). */
  .entrance-lede {
    display: block;
    margin-top: 0;
  }
  .entrance-lede-body {
    margin-top: calc(22 / 390 * var(--mu));
    padding-bottom: 0;
    max-width: calc(300 / 390 * var(--mu));
    font-size: calc(14 / 390 * var(--mu));
    line-height: 1.85;
  }
  .entrance-strip {
    flex: 0 0 31.707%; /* 260 / 820 */
  }
  .entrance-strip-grid {
    height: calc(14 / 390 * var(--mu));
  }
  /* 4 segments (not 8) with a different every-other rhythm. */
  .entrance-strip-grid span:nth-child(n + 5) {
    display: none;
  }
  .entrance-strip-grid span {
    border-inline-start-color: rgba(20, 24, 28, 0.12);
  }
  .entrance-strip-grid span:nth-child(1),
  .entrance-strip-grid span:nth-child(3) {
    border-inline-start-color: rgba(20, 24, 28, 0.3);
  }
  /* Words row above a full-width CTA, stacked (not a space-between row). */
  .entrance-strip-row {
    flex-direction: column;
    align-items: stretch;
    gap: calc(70 / 390 * var(--mu));
  }
  .entrance-words {
    gap: calc(22 / 390 * var(--mu));
  }
  .entrance-words span {
    font-size: calc(30 / 390 * var(--mu));
  }
  .entrance-strip-row .btn-navy {
    display: flex;
  }
  .entrance-strip-row .btn-navy .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .entrance-scroll-hint {
    justify-content: flex-start;
  }
}

/* =====================================================================
   ABOUT / CORRIDOR (approved scene "5b")
   below 640px this keeps the previous stacked/flow fallback (mobile
   corridor composition is handled in a dedicated later phase). At
   640px+ it becomes the full 1440x880 cinematic corridor: a deep
   central opening (IMG-05) flanked by two physical perspective walls
   (IMG-03 / IMG-04), a horizontal statement slot, and a bottom bar —
   never a small image floating inside a large empty section.
   ===================================================================== */
.about {
  min-height: clamp(560px, 60vw, 880px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(48px, 8vw, 90px) 0;
}
.about-opening {
  position: absolute;
  inset: 0;
  background: #1a1814;
}
.about-opening img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-opening::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 13, 15, 0.9) 0%,
    rgba(11, 13, 15, 0.22) 40%,
    rgba(11, 13, 15, 0.04) 70%,
    rgba(11, 13, 15, 0.2) 100%
  );
}
.about-perspective {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-bottom: clamp(20px, 4vw, 40px);
}
.about-wall {
  width: 30%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  position: relative;
  border-radius: var(--radius-sm);
}
.about-wall img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.about-wall::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 13, 15, 0.55), transparent 45%);
}
.about-slot {
  position: relative;
}
.about-statement {
  position: relative;
  text-align: center;
  font-size: clamp(24px, 3.6vw, 50px);
  line-height: 1.42;
  font-weight: 800;
  color: var(--cream-50);
  letter-spacing: -0.015em;
  max-width: 20ch;
  margin: 0 auto;
}
.about-body {
  position: relative;
  text-align: center;
  max-width: 62ch;
  margin: clamp(20px, 3vw, 34px) auto 0;
  font-size: clamp(14.5px, 1.1vw, 16px);
  line-height: 1.9;
  color: var(--cream-100);
  text-shadow: 0 2px 14px rgba(11, 13, 15, 0.95);
}
.about-bottom {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 3vw, 32px);
  margin-top: clamp(24px, 4vw, 40px);
}
.about-legend {
  display: flex;
  justify-content: center;
  gap: clamp(16px, 3vw, 34px);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  color: var(--cream-faint);
}
.about-legend .is-current {
  color: var(--cream-50);
  border-bottom: 2px solid var(--gold-600);
  padding-bottom: 8px;
}

/* Desktop cinematic composition — exact-at-1440 geometry from the
   approved source, scaled proportionally via calc(V/1440*100vw). */
@media (min-width: 640px) {
  .about {
    display: block;
    aspect-ratio: 1440 / 880;
    min-height: 480px;
    padding: 0;
  }

  .about-opening {
    inset-inline: calc(330 / 1440 * 100vw);
    top: 0;
    bottom: calc(236 / 1440 * var(--uy));
    overflow: hidden;
  }

  .about-perspective {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    perspective: 1300px;
    perspective-origin: 50% 44%;
  }
  .about-wall {
    position: absolute;
    top: 0;
    width: calc(460 / 1440 * 100vw);
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .about-wall-a {
    inset-inline-start: 0;
    transform: rotateY(38deg);
    transform-origin: left center;
    background: #514a40;
    border-inline-end: 1px solid rgba(241, 239, 234, 0.24);
  }
  .about-wall-b {
    inset-inline-end: 0;
    transform: rotateY(-38deg);
    transform-origin: right center;
    background: #7a6b52;
    border-inline-start: 1px solid rgba(241, 239, 234, 0.24);
  }
  .about-wall-a::after {
    background:
      linear-gradient(90deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.04) 60%),
      linear-gradient(to top, rgba(11, 13, 15, 0.55), transparent 40%);
  }
  .about-wall-b::after {
    background:
      linear-gradient(270deg, rgba(11, 13, 15, 0.38), rgba(11, 13, 15, 0.04) 60%),
      linear-gradient(to top, rgba(11, 13, 15, 0.55), transparent 40%);
  }

  .about-slot {
    position: absolute;
    top: calc(318 / 1440 * var(--uy));
    inset-inline: 0;
    height: calc(186 / 1440 * var(--uy));
    background: #0b0d0f;
    border-block: 1px solid rgba(241, 239, 234, 0.28);
    box-shadow:
      0 -30px 70px rgba(11, 13, 15, 0.55),
      0 30px 70px rgba(11, 13, 15, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 44, 86, 0.6), transparent 50%);
  }
  .about-slot .about-statement {
    position: relative;
    max-width: none;
    font-size: clamp(28px, calc(50 / 1440 * 100vw), 50px);
  }

  .about-body {
    position: absolute;
    top: calc(540 / 1440 * var(--uy));
    inset-inline: 0;
    max-width: none;
    margin: 0;
    padding-inline: calc(380 / 1440 * 100vw);
    font-size: clamp(14px, calc(16 / 1440 * 100vw), 16px);
  }

  .about-bottom {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: calc(236 / 1440 * var(--uy));
    display: block;
    gap: 0;
    margin: 0;
    background: linear-gradient(to bottom, #2e2a25, #0b0d0f);
  }
  .about-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #cb7d26 30%, #cb7d26 70%, transparent);
  }
  .about-cta {
    position: absolute;
    top: calc(58 / 1440 * var(--uy));
    inset-inline: 0;
    display: flex;
    justify-content: center;
  }
  .about-legend {
    position: absolute;
    bottom: calc(44 / 1440 * var(--uy));
    inset-inline: 0;
  }
}

/* Mobile About/Corridor — exact-at-390 geometry (source: scene 390x820,
   data-scene="m5b"). A materially different composition from desktop, not
   a scaled copy: full-height 150px walls (not 460px) under a narrower
   700px/50%-40% perspective (not 1300px/50%-44%), a single shared wall
   gradient (not desktop's directional left/right variant), and only the
   center legend label (desktop also shows the two wall labels). */
@media (max-width: 639px) {
  .about {
    aspect-ratio: 390 / 820;
    height: auto;
    min-height: 480px;
    display: block;
    padding: 0;
  }
  .about-opening {
    inset-inline: calc(96 / 390 * var(--mu));
    top: 0;
    bottom: calc(220 / 390 * var(--mu));
  }
  .about-opening::after {
    background: linear-gradient(
      to top,
      rgba(11, 13, 15, 0.9) 0%,
      rgba(11, 13, 15, 0.2) 40%,
      rgba(11, 13, 15, 0.05) 70%,
      rgba(11, 13, 15, 0.2) 100%
    );
  }
  .about-perspective {
    position: absolute;
    inset: 0;
    display: block;
    margin: 0;
    perspective: calc(700 / 390 * var(--mu));
    perspective-origin: 50% 40%;
  }
  .about-wall {
    position: absolute;
    top: 0;
    width: calc(150 / 390 * var(--mu));
    height: 100%;
    aspect-ratio: auto;
    border-radius: 0;
  }
  .about-wall-a {
    inset-inline-start: 0;
    transform: rotateY(38deg);
    transform-origin: left center;
    background: #514a40;
    border-inline-end: 0;
  }
  .about-wall-b {
    inset-inline-end: 0;
    transform: rotateY(-38deg);
    transform-origin: right center;
    background: #7a6b52;
    border-inline-start: 0;
  }
  .about-wall-a::after,
  .about-wall-b::after {
    background: linear-gradient(to top, rgba(11, 13, 15, 0.55), transparent 40%);
  }
  .about-slot {
    position: absolute;
    top: calc(236 / 390 * var(--mu));
    inset-inline: 0;
    height: calc(170 / 390 * var(--mu));
    background: #0b0d0f;
    border-block: 1px solid rgba(241, 239, 234, 0.28);
    box-shadow:
      0 calc(-24 / 390 * var(--mu)) calc(50 / 390 * var(--mu)) rgba(11, 13, 15, 0.55),
      0 calc(24 / 390 * var(--mu)) calc(50 / 390 * var(--mu)) rgba(11, 13, 15, 0.55);
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .about-slot::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(14, 44, 86, 0.6), transparent 55%);
  }
  .about-slot .about-statement {
    position: relative;
    max-width: none;
    font-size: calc(23 / 390 * var(--mu));
    line-height: 1.55;
    padding-inline: calc(26 / 390 * var(--mu));
  }
  .about-statement-break {
    display: none;
  }
  .about-body {
    position: absolute;
    top: calc(432 / 390 * var(--mu));
    inset-inline: 0;
    max-width: none;
    margin: 0;
    padding-inline: calc(30 / 390 * var(--mu));
    font-size: calc(14 / 390 * var(--mu));
    line-height: 1.9;
  }
  .about-bottom {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: calc(220 / 390 * var(--mu));
    display: block;
    gap: 0;
    margin: 0;
    background: linear-gradient(to bottom, #2e2a25, #0b0d0f);
  }
  .about-bottom::before {
    content: "";
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #cb7d26 25%, #cb7d26 75%, transparent);
  }
  .about-cta {
    position: absolute;
    top: calc(56 / 390 * var(--mu));
    inset-inline: calc(20 / 390 * var(--mu));
  }
  .about-cta .btn-outline {
    display: flex;
  }
  .about-cta .btn-outline .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .about-legend {
    position: absolute;
    bottom: calc(40 / 390 * var(--mu));
    inset-inline: 0;
  }
  .about-legend span:not(.is-current) {
    display: none;
  }
}

/* =====================================================================
   WORLD SECTIONS (shared: Contracting / Supply / Transport)
   ===================================================================== */
.world {
  padding-top: clamp(64px, 8vw, 88px);
}
.world-topbar {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: clamp(64px, 8vw, 88px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-inline: var(--edge);
  border-bottom: 1px solid rgba(241, 239, 234, 0.2);
  z-index: 2;
}
.world-eyebrow {
  font-family: var(--font-mono);
  font-size: clamp(9.5px, 0.9vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold-500);
  white-space: nowrap;
}
/* 5c only (per source: Archivo) — World 02/03 keep the mono eyebrow
   above until their own visual-parity phase verifies it against their
   source, even though they use an identical `.world-eyebrow` span. */
.contracting .world-eyebrow {
  font-family: var(--font-en);
}
.world-steps {
  display: flex;
  gap: clamp(14px, 2vw, 26px);
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--cream-muted);
}
.world-steps .is-current {
  color: var(--cream-50);
}
/* Mobile-only compact counter for Contracting (replaces .world-steps
   below 640px — see the M3 mobile block further down); hidden elsewhere. */
.contracting-step-counter {
  display: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--cream-50);
  white-space: nowrap;
}

.world-heading {
  position: relative;
  z-index: 2;
  padding: clamp(24px, 4vw, 52px) var(--edge) 0;
  max-width: 640px;
}
.world-title {
  font-size: clamp(40px, 6vw, 84px);
  line-height: 1.06;
  font-weight: 800;
  color: var(--cream-50);
  letter-spacing: -0.03em;
  text-shadow: 0 10px 40px rgba(11, 13, 15, 0.8);
  margin: 0;
}
.world-intro {
  margin-top: clamp(14px, 2vw, 26px);
  max-width: 54ch;
  font-size: clamp(14.5px, 1vw, 16.5px);
  line-height: 1.9;
  color: var(--cream-100);
  text-shadow: 0 2px 14px rgba(11, 13, 15, 0.9);
}

/* Contracting (World 01) */
.contracting {
  min-height: clamp(620px, 62vw, 960px);
  background: var(--ink-750);
}
.contracting-media {
  position: absolute;
  inset: 0;
}
.contracting-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contracting-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to top,
      rgba(11, 13, 15, 0.94) 12%,
      rgba(11, 13, 15, 0.46) 40%,
      rgba(11, 13, 15, 0.05) 62%,
      rgba(11, 13, 15, 0.42) 100%
    ),
    linear-gradient(270deg, rgba(11, 13, 15, 0.3), rgba(11, 13, 15, 0) 50%);
}
/* Giant ghost "01" — integrated into the architecture, not a decorative
   afterthought. Hidden below the desktop breakpoint (mobile 5c is a
   dedicated later phase, like the hero bay-label). */
.contracting-ghost {
  display: none;
  position: absolute;
  z-index: 1;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 0.72;
  color: rgba(241, 239, 234, 0.14);
  letter-spacing: -0.04em;
  pointer-events: none;
}
.contracting-caps-rule {
  position: absolute;
  top: 0;
  inset-inline: 0;
  height: 6px;
  background: repeating-linear-gradient(90deg, var(--gold-600) 0 40px, transparent 40px 80px);
  transform-origin: right center;
}
.contracting-strips {
  position: relative;
  z-index: 2;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  padding-inline-end: var(--edge);
  margin-top: clamp(16px, 3vw, 32px);
}
.contracting-strip {
  width: clamp(64px, 8vw, 112px);
  aspect-ratio: 1 / 1.8;
  overflow: hidden;
  border: 1px solid rgba(241, 239, 234, 0.32);
  box-shadow: 0 30px 60px rgba(11, 13, 15, 0.5);
}
.contracting-strip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contracting-caps {
  position: relative;
  z-index: 2;
  margin-top: clamp(40px, 8vw, 90px);
  background: var(--ink-800);
  border-top: 1px solid rgba(241, 239, 234, 0.2);
  padding: clamp(28px, 4vw, 52px) var(--edge) clamp(20px, 3vw, 26px);
}
.contracting-caps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2vw, 0px);
}
.cap {
  padding-inline-end: clamp(10px, 1.8vw, 28px);
  border-inline-start: 1px solid rgba(241, 239, 234, 0.2);
  padding-inline-start: clamp(10px, 1.8vw, 28px);
}
.cap:first-child {
  padding-inline-start: 0;
  border-inline-start: 0;
}
.cap-num {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--cream-faint);
}
.cap-num.is-current {
  color: var(--gold-500);
}
.cap-title {
  margin-top: 12px;
  font-size: clamp(16px, 1.4vw, 21px);
  font-weight: 700;
  color: var(--cream-50);
}
.cap-body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--cream-muted);
}
.contracting-caps-cta {
  display: flex;
  align-items: flex-end;
  margin-top: clamp(14px, 2vw, 0px);
}
.world-next {
  margin-top: clamp(20px, 3vw, 26px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cream-faint);
}
.world-next .rule {
  width: 60px;
  height: 1px;
  background: var(--cream-faint);
}
.world-next .is-next {
  color: var(--gold-500);
}

/* Desktop exact-at-1440 geometry (source: scene height 960, topbar 88,
   strips top:88/bottom:300, heading bottom:300, caps bottom:0/height:250).
   Below this the previous flow-based stacking remains as the mobile
   fallback (5c mobile is a dedicated later phase, matching the pattern
   used for the hero and corridor). */
@media (min-width: 640px) {
  .contracting {
    aspect-ratio: 1440 / 960;
    min-height: 480px;
  }
  .contracting .world-topbar {
    height: calc(88 / 1440 * var(--uy));
  }
  .contracting-ghost {
    display: block;
    top: calc(150 / 1440 * var(--uy));
    inset-inline-start: calc(40 / 1440 * 100vw);
    font-size: clamp(225px, calc(360 / 1440 * 100vw), 360px);
  }
  .contracting-strips {
    position: absolute;
    top: calc(88 / 1440 * var(--uy));
    bottom: calc(300 / 1440 * var(--uy));
    inset-inline-end: var(--edge);
    margin-top: 0;
    padding-inline-end: 0;
  }
  .contracting-strip {
    width: calc(112 / 1440 * 100vw);
    aspect-ratio: auto;
    height: 100%;
  }
  .contracting .world-heading {
    position: absolute;
    bottom: calc(300 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    padding: 0;
    max-width: calc(640 / 1440 * var(--uw));
  }
  .contracting-caps {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: calc(250 / 1440 * var(--uy));
    margin-top: 0;
    padding: calc(52 / 1440 * var(--uy)) var(--edge) calc(26 / 1440 * var(--uy));
  }
}

/* Mobile World 01/Contracting — exact-at-390 geometry (source: scene
   390xauto, data-scene="m5c"). Auto-height content flow, not a fixed
   canvas like M1/M2 — two absolutely-positioned overlay layers (backdrop,
   ghost "01" + detail strips) float over in-flow content below them. */
@media (max-width: 639px) {
  .contracting {
    min-height: 0;
  }
  .contracting-media {
    position: absolute;
    top: 0;
    inset-inline: 0;
    bottom: auto;
    height: calc(560 / 390 * var(--mu));
  }
  .contracting-media img {
    object-position: 38% 50%;
  }
  .contracting-media::after {
    background: linear-gradient(
      to bottom,
      rgba(11, 13, 15, 0.5) 0%,
      rgba(11, 13, 15, 0.05) 28%,
      rgba(20, 18, 15, 0.35) 58%,
      #14120f 100%
    );
  }
  .contracting .world-topbar {
    position: relative;
    height: 56px;
  }
  .contracting .world-steps {
    display: none;
  }
  .contracting-step-counter {
    display: block;
  }
  .contracting-ghost {
    display: block;
    top: calc(70 / 390 * var(--mu));
    inset-inline-start: calc(14 / 390 * var(--mu));
    font-size: calc(190 / 390 * var(--mu));
  }
  .contracting-strips {
    position: absolute;
    top: calc(76 / 390 * var(--mu));
    bottom: auto;
    inset-inline-end: calc(20 / 390 * var(--mu));
    margin-top: 0;
    padding-inline-end: 0;
    gap: calc(8 / 390 * var(--mu));
  }
  .contracting-strip {
    width: calc(60 / 390 * var(--mu));
    height: calc(270 / 390 * var(--mu));
    aspect-ratio: auto;
    background: #57514a;
  }
  .contracting .world-heading {
    position: relative;
    margin-top: calc(334 / 390 * var(--mu));
    padding-inline: calc(20 / 390 * var(--mu));
    max-width: none;
  }
  .contracting .world-title {
    font-size: calc(46 / 390 * var(--mu));
    line-height: 1.1;
  }
  .contracting .world-intro {
    margin-top: calc(18 / 390 * var(--mu));
    max-width: none;
    font-size: calc(14.5 / 390 * var(--mu));
  }
  .contracting-caps-rule {
    position: relative;
    top: auto;
    inset-inline: auto;
    margin-top: calc(34 / 390 * var(--mu));
    height: 6px;
    background: repeating-linear-gradient(
      90deg,
      #cb7d26 0 calc(30 / 390 * var(--mu)),
      transparent calc(30 / 390 * var(--mu)) calc(60 / 390 * var(--mu))
    );
  }
  .contracting-caps {
    position: relative;
    z-index: 2;
    margin-top: 0;
    background: #1a1814;
    border-top: 0;
    padding: calc(6 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) 0;
  }
  .contracting-caps-grid {
    display: block;
  }
  .cap:not(.contracting-caps-cta) {
    padding: calc(18 / 390 * var(--mu)) 0;
    border-inline-start: 0;
    padding-inline-start: 0;
    padding-inline-end: 0;
    border-bottom: 1px solid rgba(241, 239, 234, 0.14);
    display: grid;
    grid-template-columns: calc(62 / 390 * var(--mu)) 1fr;
    gap: calc(4 / 390 * var(--mu)) calc(12 / 390 * var(--mu));
  }
  /* Source's 4-cell grid (label, title, blank, body) puts body in column 2
     row 2 via an empty filler cell; our markup has only 3 children, so
     auto-placement would otherwise drop cap-body into column 1. */
  .cap:not(.contracting-caps-cta) .cap-body {
    grid-column: 2;
  }
  .contracting-caps-grid > .cap:nth-child(3) {
    padding-bottom: calc(24 / 390 * var(--mu));
    border-bottom: 0;
  }
  /* In normal flow (not absolutely positioned) so it correctly expands
     the section's auto height instead of being clipped by .scene's
     overflow:hidden. Its own background + negative inline margin paints
     over the panel's padding band so it still reads as sitting outside
     the dark .contracting-caps panel, matching the source. */
  .contracting-caps-cta {
    display: block;
    background: #14120f;
    margin-top: calc(26 / 390 * var(--mu));
    margin-inline: calc(-20 / 390 * var(--mu));
    padding-inline: calc(20 / 390 * var(--mu));
  }
  .contracting-caps-cta .btn::before,
  .contracting-caps-cta .btn::after {
    border-color: #e3a55a;
  }
  .contracting-caps-cta .btn-gold {
    display: flex;
  }
  .contracting-caps-cta .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .contracting .world-next {
    display: none;
  }
}

/* ---------- Route timeline (new: 5d) ---------- */
.route {
  background: var(--ink-900);
  padding-top: clamp(48px, 6vw, 96px);
}
.route-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding-inline: var(--edge);
}
.route-eyebrow {
  font-family: var(--font-en);
  font-size: clamp(9.5px, 0.9vw, 10.5px);
  font-weight: 600;
  letter-spacing: 0.3em;
  color: var(--gold-500);
}
.route-eyebrow-en {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--cream-faint);
}
.route-title {
  padding-inline: var(--edge);
  margin-top: clamp(16px, 2vw, 28px);
  max-width: 46ch;
  font-size: clamp(26px, 3.4vw, 46px);
  line-height: 1.34;
  font-weight: 800;
  color: var(--cream-50);
  letter-spacing: -0.02em;
}
.route-stages {
  margin-top: clamp(28px, 4vw, 60px);
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  background: var(--ink-850);
}
.route-stage {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  border-inline-start: 1px solid rgba(241, 239, 234, 0.3);
}
.route-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Custom per-stage crops from the approved source — not a generic center
   crop for any of the four. */
.route-stage:nth-child(1) img {
  object-position: 57% 50%;
}
.route-stage:nth-child(2) img {
  object-position: 50% 70%;
}
.route-stage:nth-child(4) img {
  object-position: 62% 50%;
}
/* Stage 3 (Transport, IMG-11) uses an explicit pixel crop in the source,
   not object-fit:cover. The exact crop only makes sense against the
   scene's real 1440-wide/330-tall band, so it's applied desktop-only
   (see the min-width:640px block below) — mobile keeps a plain cover
   crop on its own narrower aspect-ratio box for now. */
.route-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 13, 15, 0.78),
    rgba(11, 13, 15, 0.18) 38%,
    rgba(11, 13, 15, 0) 58%,
    rgba(11, 13, 15, 0.22)
  );
}
.route-stage-label {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 2;
}
.route-stage-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-500);
}
.route-stage-title {
  margin-top: 8px;
  font-size: clamp(20px, 2.2vw, 34px);
  font-weight: 800;
  color: var(--cream-50);
  text-shadow: 0 2px 16px rgba(11, 13, 15, 0.6);
}
/* Mobile-only elements (vertical timeline, per-stage node + description) —
   see the M4 mobile block further down. Hidden everywhere else; desktop
   keeps its existing horizontal .route-track/.route-nodes/.route-descriptions
   component entirely untouched. */
.route-vertical-line,
.route-stage-node,
.route-stage-desc {
  display: none;
}
.route-footer {
  background: linear-gradient(var(--stone-300), var(--stone-500));
  padding: clamp(24px, 3vw, 46px) var(--edge) clamp(20px, 3vw, 26px);
}
.route-track {
  position: relative;
  height: 16px;
  margin-inline: clamp(20px, 4vw, 58px);
}
.route-nodes {
  position: absolute;
  inset: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.route-labels {
  margin-top: 18px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--text-dark-muted);
}
.route-labels div {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.route-labels .step-num {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  color: var(--gold-700);
}
.route-labels .step-title {
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
}
.route-bottom-row {
  margin-top: clamp(20px, 3vw, 30px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.route-steps-legend {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(14px, 2vw, 38px);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: #4e4a43;
}
/* 5d's own node/description treatment — scoped to .route-footer so it
   never touches World 03's .transport-footer, which reuses the same
   base .route-track/.route-node/.route-nodes component classes with its
   own is-done/is-current content untouched by this phase. */
.route-footer .route-node-1 {
  width: 17px;
  height: 17px;
  background: var(--gold-600);
}
.route-descriptions {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr 1.6fr 1fr;
  gap: 12px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-dark-muted);
}

/* Desktop exact-at-1440 geometry (source: scene height 900, header 96,
   headline top:112, stages top:340/height:330, footer height:230 with
   pixel-exact line/node/CTA positions). Below this the previous
   flow-based stacking remains as the mobile fallback (5d mobile is a
   dedicated later phase, matching the pattern used for 5a/5b/5c). */
@media (min-width: 640px) {
  .route {
    aspect-ratio: 1440 / 900;
    min-height: 480px;
    padding-top: 0;
  }
  .route-header {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: calc(96 / 1440 * var(--uy));
    padding-top: calc(38 / 1440 * var(--uy));
  }
  .route-title {
    position: absolute;
    top: calc(112 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    margin-top: 0;
    max-width: calc(700 / 1440 * var(--uw));
  }
  .route-stages {
    position: absolute;
    top: calc(340 / 1440 * var(--uy));
    inset-inline: 0;
    height: calc(330 / 1440 * var(--uy));
    margin-top: 0;
  }
  .route-stage {
    aspect-ratio: auto;
    height: 100%;
  }
  .route-stage-transport img {
    position: absolute;
    left: calc(-138 / 1440 * var(--uy));
    top: calc(-76 / 1440 * var(--uy));
    width: calc(743 / 1440 * var(--uy));
    height: calc(415 / 1440 * var(--uy));
    max-width: none;
    object-fit: initial;
    object-position: initial;
  }
  .route-footer {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: calc(230 / 1440 * var(--uy));
    padding: 0;
  }
  .route-track {
    position: absolute;
    top: calc(46 / 1440 * var(--uy));
    inset-inline-start: calc(32 / 1440 * 100vw);
    inset-inline-end: calc(281 / 1440 * 100vw);
    height: 3px;
    margin-inline: 0;
  }
  .route-line-fill {
    width: calc(313 / 1440 * 100vw);
  }
  /* The markup carries an inline top:6px (mobile track); the source line sits exactly on the track (top 46). */
  .route-footer .route-line,
  .route-footer .route-line-fill {
    top: 0 !important;
  }
  .route-nodes {
    position: static;
    display: contents;
  }
  /* The nodes are positioned against .route-track (top:46, inline-start:32 in footer coordinates), so the
     source's footer-relative offsets (top 41/39, inline-start 21/336/649/1150) are shifted by -46 / -32. */
  .route-footer .route-node {
    box-sizing: content-box; /* the source nodes are content-box: 19px / 23px overall, not 13px / 17px */
    position: absolute;
    top: -5px; /* source: 41 - 46 (rail top), constant: the dots are fixed-size, so the offset must not scale */
    inset-inline-start: 0;
  }
  .route-footer .route-node-1 {
    top: -7px; /* source: 39 - 46 */
    inset-inline-start: calc((21 - 32) / 1440 * 100vw);
  }
  .route-footer .route-node-2 {
    inset-inline-start: calc((336 - 32) / 1440 * 100vw);
  }
  .route-footer .route-node-3 {
    inset-inline-start: calc((649 - 32) / 1440 * 100vw);
  }
  .route-footer .route-node-4 {
    inset-inline-start: calc((1150 - 32) / 1440 * 100vw);
  }
  .route-descriptions {
    position: absolute;
    top: calc(88 / 1440 * var(--uy));
    inset-inline: 0;
    margin-top: 0;
    gap: 0;
  }
  .route-descriptions span {
    padding-inline: calc(24 / 1440 * var(--uw));
  }
  .route-bottom-row {
    display: contents;
  }
  .route-steps-legend {
    position: absolute;
    bottom: calc(24 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
  }
  .route-footer .btn {
    position: absolute;
    bottom: calc(18 / 1440 * var(--uy));
    inset-inline-end: var(--edge);
  }
}

/* Mobile Route — exact-at-390 geometry (source: scene 390xauto,
   data-scene="m5d"). Structurally different from desktop: a VERTICAL
   stacked timeline (one gold line running top-to-bottom, a node + its
   own description beside each stage) rather than desktop's horizontal
   4-column grid with a separate footer track — not a derivative of 5d,
   an independently authored composition. */
@media (max-width: 639px) {
  .route {
    padding-top: calc(34 / 390 * var(--mu));
    padding-bottom: calc(44 / 390 * var(--mu));
  }
  .route-eyebrow-en {
    display: none;
  }
  .route-eyebrow {
    color: #e09a55;
  }
  .route-title {
    font-size: calc(30 / 390 * var(--mu));
    line-height: 1.38;
  }
  .route-vertical-line {
    display: block;
    position: absolute;
    top: calc(190 / 390 * var(--mu));
    bottom: 0;
    inset-inline-start: calc(23 / 390 * var(--mu));
    width: 3px;
    background: var(--gold-600);
  }
  .route-stages {
    display: flex;
    flex-direction: column;
    grid-template-columns: none;
    background: none;
  }
  /* Margin only before each later stage's own image (not before its
     description, which hugs the image directly via its own padding-top)
     — a flex `gap` would incorrectly add space in both places since the
     description is a flex sibling, not nested inside `.route-stage`. */
  .route-stage ~ .route-stage {
    margin-top: calc(16 / 390 * var(--mu));
  }
  .route-stage {
    position: relative;
    padding-inline-start: calc(48 / 390 * var(--mu));
    aspect-ratio: auto;
    border-inline-start: 0;
  }
  .route-stage:not(.route-stage-transport) {
    height: calc(190 / 390 * var(--mu));
  }
  .route-stage-transport {
    height: calc(240 / 390 * var(--mu));
  }
  .route-stage-node {
    display: block;
    position: absolute;
    top: calc(22 / 390 * var(--mu));
    inset-inline-start: calc(15 / 390 * var(--mu));
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--cream-200);
    border: 3px solid #0b0d0f;
    z-index: 2;
  }
  .route-stage-node.is-current {
    background: var(--gold-600);
  }
  .route-stage::after {
    background: linear-gradient(to bottom, rgba(11, 13, 15, 0.75), rgba(11, 13, 15, 0) 50%);
  }
  .route-stage-transport::after {
    background: linear-gradient(to bottom, rgba(11, 13, 15, 0.6), rgba(11, 13, 15, 0) 40%);
  }
  .route-stage-transport img {
    position: absolute;
    left: calc(-99 / 390 * var(--mu));
    top: calc(-55 / 390 * var(--mu));
    width: calc(532 / 390 * var(--mu));
    height: calc(297 / 390 * var(--mu));
    max-width: none;
    object-fit: initial;
    object-position: initial;
  }
  .route-stage-label {
    top: calc(16 / 390 * var(--mu));
    inset-inline-start: calc(18 / 390 * var(--mu));
  }
  .route-stage:not(:first-child) .route-stage-tag {
    color: var(--cream-200);
  }
  .route-stage-title {
    margin-top: calc(6 / 390 * var(--mu));
    font-size: calc(26 / 390 * var(--mu));
  }
  .route-stage-desc {
    display: block;
    position: relative;
    padding-top: calc(12 / 390 * var(--mu));
    padding-inline-start: calc(48 / 390 * var(--mu));
    font-size: calc(13.5 / 390 * var(--mu));
    line-height: 1.7;
    color: var(--cream-muted);
  }
  .route-footer {
    background: none;
    padding: 0;
  }
  .route-footer .route-track,
  .route-descriptions,
  .route-steps-legend {
    display: none;
  }
  .route-bottom-row {
    display: block;
    margin-top: calc(34 / 390 * var(--mu));
  }
  .route-footer .btn {
    display: flex;
    margin-inline-start: calc(48 / 390 * var(--mu));
    margin-inline-end: calc(20 / 390 * var(--mu));
  }
  .route-footer .btn .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
}

/* Supply (World 02) */
.supply {
  position: relative;
  background: var(--ink-900);
  padding-bottom: clamp(20px, 3vw, 0px);
}
/* World 02's own eyebrow (Archivo per source) — scoped, does not touch
   the shared .world-eyebrow base (mono) that World 03 still depends on
   until its own visual-parity phase. */
.supply .world-eyebrow {
  font-family: var(--font-en);
}
/* Mobile fallback: Supply's topbar sits in normal flow above the
   establishing image (unlike 5c's, which is always absolute-overlaid) —
   preserved as-is below the desktop breakpoint. */
.supply .world-topbar {
  position: static;
  height: auto;
  padding-block: 20px;
}
.supply-heading {
  position: static;
  padding-top: 32px;
}
/* Mobile-only compact counter (replaces .world-steps below 640px — see the
   M5 mobile block); hidden elsewhere. */
.supply-step-counter {
  display: none;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--cream-50);
  white-space: nowrap;
}
/* Top tick + ghost "02" — hidden below the desktop breakpoint, matching
   the pattern used for 5c's ghost numeral (mobile World 02 is a later
   phase). */
.supply-tick {
  display: none;
  position: absolute;
  top: 0;
  width: 3px;
  background: var(--gold-600);
}
.supply-tick-dot {
  display: none;
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--gold-600);
}
.supply-ghost {
  display: none;
  position: absolute;
  z-index: 1;
  font-family: var(--font-en);
  font-weight: 700;
  line-height: 0.72;
  color: rgba(241, 239, 234, 0.07);
  letter-spacing: -0.04em;
  pointer-events: none;
}
.supply-stage {
  position: relative;
  height: clamp(220px, 26vw, 320px);
  overflow: hidden;
  background: var(--ink-800);
  margin-top: 0;
}
.supply-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.supply-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      to left,
      rgba(11, 13, 15, 0.95) 0%,
      rgba(11, 13, 15, 0.75) 42%,
      rgba(11, 13, 15, 0.28) 70%,
      rgba(11, 13, 15, 0.45) 100%
    ),
    linear-gradient(to bottom, rgba(11, 13, 15, 0.3), rgba(11, 13, 15, 0) 40%, #0b0d0f 100%);
}
.supply-rows {
  display: flex;
  flex-direction: column;
}
.supply-row {
  display: flex;
  flex-wrap: wrap;
}
.supply-row-copy {
  flex: 1 1 320px;
  background: var(--stone-300);
  padding: clamp(20px, 2.6vw, 26px) clamp(20px, 3vw, 30px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.supply-row-tag {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  color: var(--gold-700);
}
.supply-row-title {
  font-size: clamp(19px, 1.8vw, 26px);
  font-weight: 800;
  color: var(--text-dark);
}
.supply-row-body {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-dark-muted);
}
.supply-row-media {
  flex: 2 1 420px;
  min-height: 160px;
  position: relative;
  overflow: hidden;
  background: #57514a;
}
.supply-row-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Row 3's media panel uses a different base tone in the source (#7A6B52
   vs rows 1/2's #57514A) — a real distinction, not a repeated value. */
.supply-row-3 .supply-row-media {
  background: #7a6b52;
}
/* Decorative repeating hairline overlay — two genuinely different
   pitches in the source (rows 1/3 share one, row 2 has its own denser
   one), not a single reused pattern. */
.supply-row-hairlines {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.supply-row-hairlines-wide {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 20.2%,
    rgba(241, 239, 234, 0.2) 20.2% 20.28%
  );
}
.supply-row-hairlines-dense {
  background: repeating-linear-gradient(
    90deg,
    transparent 0 10.1%,
    rgba(241, 239, 234, 0.2) 10.1% 10.14%,
    transparent 10.14% 20.2%,
    transparent 20.2% 20.28%
  );
}
.supply-footer {
  position: relative;
  background: linear-gradient(var(--stone-300), var(--stone-500));
  padding: clamp(20px, 3vw, 28px) var(--edge);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.supply-footer-tick {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--gold-600);
}

/* Desktop exact-at-1440 geometry (source: scene height 1120, header 88,
   stage top:88/height:320, title top:140, rows top:420/612/804 each
   height:180, footer height:124). Below this the previous flow-based
   stacking remains as the mobile fallback (World 02 mobile is a later
   phase, matching 5a/5b/5c/5d). */
@media (min-width: 640px) {
  .supply {
    aspect-ratio: 1440 / 1120;
    min-height: 480px;
  }
  .supply .world-topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: calc(88 / 1440 * var(--uy));
    padding-block: 0;
  }
  .supply-tick {
    display: block;
    inset-inline-start: calc(344 / 1440 * 100vw);
    height: calc(112 / 1440 * var(--uy));
  }
  .supply-tick-dot {
    display: block;
    top: calc(106 / 1440 * var(--uy));
    inset-inline-start: calc(339 / 1440 * 100vw);
  }
  .supply-ghost {
    display: block;
    top: calc(96 / 1440 * var(--uy));
    inset-inline-end: calc(40 / 1440 * 100vw);
    font-size: clamp(225px, calc(360 / 1440 * 100vw), 360px);
  }
  .supply-stage {
    position: absolute;
    top: calc(88 / 1440 * var(--uy));
    inset-inline: 0;
    height: calc(320 / 1440 * var(--uy));
  }
  .supply-stage img {
    position: absolute;
    left: 0;
    top: calc(-150 / 1440 * var(--uy));
    width: 100%;
    height: calc(804 / 1440 * var(--uy));
    object-fit: initial;
    max-width: none;
  }
  .supply-heading {
    position: absolute;
    top: calc(140 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    padding: 0;
    max-width: calc(640 / 1440 * var(--uw));
  }
  .supply-rows {
    position: absolute;
    top: 0;
    inset-inline: 0;
  }
  .supply-row {
    position: absolute;
    inset-inline-end: 0;
    height: calc(180 / 1440 * var(--uy));
  }
  .supply-row-1 {
    top: calc(420 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
  }
  .supply-row-2 {
    top: calc(612 / 1440 * var(--uy));
    inset-inline-start: calc(124 / 1440 * 100vw);
  }
  .supply-row-3 {
    top: calc(804 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
  }
  .supply-row-copy {
    flex: none;
    width: calc(520 / 1440 * var(--uw));
    height: 100%;
  }
  .supply-row-media {
    flex: 1;
    min-height: 0;
    height: 100%;
  }
  .supply-row-media img {
    position: absolute;
    max-width: none;
    object-fit: initial;
  }
  .supply-row-1 .supply-row-media img {
    left: calc(-520 / 1440 * var(--uy));
    top: calc(-160 / 1440 * var(--uy));
    width: calc(1678 / 1440 * var(--uy));
    height: calc(937 / 1440 * var(--uy));
  }
  .supply-row-2 .supply-row-media img {
    left: 0;
    top: calc(-300 / 1440 * var(--uy));
    width: calc(1672 / 1440 * var(--uy));
    height: calc(941 / 1440 * var(--uy));
  }
  .supply-row-3 .supply-row-media img {
    left: calc(-380 / 1440 * var(--uy));
    top: calc(-430 / 1440 * var(--uy));
    width: calc(1672 / 1440 * var(--uy));
    height: calc(941 / 1440 * var(--uy));
  }
  .supply-footer {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: calc(124 / 1440 * var(--uy));
    padding: 0;
  }
  .supply-footer-tick {
    display: block;
    inset-inline-start: calc(657 / 1440 * 100vw);
  }
  .supply-footer .world-next {
    position: absolute;
    top: calc(52 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
  }
  .supply-footer .btn {
    position: absolute;
    top: calc(28 / 1440 * var(--uy));
    inset-inline-end: var(--edge);
  }
}

/* Mobile World 02/Supply — exact-at-390 geometry (source: scene 390xauto,
   data-scene="mW02"). Media-on-top rows with explicit per-occurrence pixel
   crops, a gold rail + square marker, a compact "02 / 03" counter, and a
   charcoal CTA above a shorter "next world" line — not a derivative of
   desktop's side-by-side 180px rows. Everything is .supply-scoped so no
   shared .world-* rule (Contracting / World 03) is touched. */
@media (max-width: 639px) {
  .supply {
    padding-bottom: 0;
  }
  .supply .world-topbar {
    height: 57px;
    padding-block: 0;
    padding-inline-start: calc(48 / 390 * var(--mu));
    padding-inline-end: calc(20 / 390 * var(--mu));
  }
  .supply .world-eyebrow {
    font-size: calc(10 / 390 * var(--mu));
    letter-spacing: 0.28em;
  }
  .supply .world-steps {
    display: none;
  }
  .supply-step-counter {
    display: block;
  }
  .supply-tick {
    display: block;
    inset-inline-start: calc(23 / 390 * var(--mu));
    height: calc(118 / 390 * var(--mu));
  }
  .supply-tick-dot {
    display: block;
    top: calc(112 / 390 * var(--mu));
    inset-inline-start: calc(18 / 390 * var(--mu));
  }
  .supply-stage {
    height: calc(230 / 390 * var(--mu));
    margin-inline-start: calc(48 / 390 * var(--mu));
    background: var(--ink-800);
  }
  .supply-stage img {
    object-position: 42% 45%;
  }
  .supply-stage::after {
    background: linear-gradient(
      to bottom,
      rgba(11, 13, 15, 0.2),
      rgba(11, 13, 15, 0) 45%,
      #0b0d0f 100%
    );
  }
  .supply-heading {
    position: relative;
    margin-top: calc(-30 / 390 * var(--mu));
    padding: 0 calc(20 / 390 * var(--mu));
    padding-inline-start: calc(48 / 390 * var(--mu));
    max-width: none;
  }
  .supply .world-title {
    font-size: calc(66 / 390 * var(--mu));
    line-height: 1;
    letter-spacing: -0.035em;
    text-shadow: none;
  }
  .supply .world-intro {
    margin-top: calc(20 / 390 * var(--mu));
    max-width: none;
    font-size: calc(14.5 / 390 * var(--mu));
    text-shadow: none;
  }
  .supply-rows {
    margin-top: calc(36 / 390 * var(--mu));
    gap: calc(12 / 390 * var(--mu));
  }
  .supply-row {
    flex-direction: column-reverse;
    flex-wrap: nowrap;
    margin-inline-start: calc(48 / 390 * var(--mu));
  }
  .supply-row-2 {
    margin-inline-start: calc(80 / 390 * var(--mu));
  }
  .supply-row-copy {
    flex: none;
    padding: calc(18 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) calc(20 / 390 * var(--mu));
    gap: calc(6 / 390 * var(--mu));
    background: var(--stone-300);
  }
  .supply-row-tag {
    font-size: calc(10 / 390 * var(--mu));
    line-height: normal;
    letter-spacing: 0.18em;
  }
  .supply-row-title {
    font-size: calc(20 / 390 * var(--mu));
    line-height: normal;
  }
  .supply-row-body {
    font-size: calc(13.5 / 390 * var(--mu));
    line-height: 1.7;
  }
  .supply-row-media {
    flex: none;
    min-height: 0;
    height: calc(150 / 390 * var(--mu));
  }
  .supply-row-media img {
    position: absolute;
    max-width: none;
    object-fit: initial;
  }
  /* One explicit pixel crop per occurrence (SUP-01 x2 incl. hero stage,
     SUP-02 x2) — deliberately different compositions of the same photos. */
  .supply-row-1 .supply-row-media img {
    left: calc(-269 / 390 * var(--mu));
    top: calc(-60 / 390 * var(--mu));
    width: calc(760 / 390 * var(--mu));
    height: calc(424 / 390 * var(--mu));
  }
  .supply-row-2 .supply-row-media img {
    left: 0;
    top: calc(-110 / 390 * var(--mu));
    width: calc(760 / 390 * var(--mu));
    height: calc(428 / 390 * var(--mu));
  }
  .supply-row-3 .supply-row-media img {
    left: calc(-170 / 390 * var(--mu));
    top: calc(-190 / 390 * var(--mu));
    width: calc(760 / 390 * var(--mu));
    height: calc(428 / 390 * var(--mu));
  }
  .supply-row-hairlines-wide {
    background: repeating-linear-gradient(
      90deg,
      transparent 0 calc(113 / 390 * var(--mu)),
      rgba(241, 239, 234, 0.2) calc(113 / 390 * var(--mu)) calc(114 / 390 * var(--mu))
    );
  }
  .supply-row-hairlines-dense {
    background: repeating-linear-gradient(
      90deg,
      transparent 0 calc(56 / 390 * var(--mu)),
      rgba(241, 239, 234, 0.2) calc(56 / 390 * var(--mu)) calc(57 / 390 * var(--mu)),
      transparent calc(57 / 390 * var(--mu)) calc(113 / 390 * var(--mu)),
      transparent calc(113 / 390 * var(--mu)) calc(114 / 390 * var(--mu))
    );
  }
  .supply-footer {
    margin-top: calc(12 / 390 * var(--mu));
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    background: linear-gradient(var(--stone-300), var(--stone-500));
    padding: calc(26 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) calc(30 / 390 * var(--mu));
    padding-inline-start: calc(48 / 390 * var(--mu));
  }
  .supply-footer-tick {
    display: block;
    inset-inline-start: calc(23 / 390 * var(--mu));
  }
  .supply-footer .btn {
    display: flex;
    order: 1;
  }
  .supply-footer .btn .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .supply-footer .btn .btn-label {
    display: flex;
    align-items: center;
    padding-block: 0;
    padding-inline: calc(20 / 390 * var(--mu));
  }
  .supply-footer .btn .btn-arrow {
    padding-inline: calc(18 / 390 * var(--mu));
    border-inline-start-color: rgba(241, 239, 234, 0.25);
  }
  .supply-footer .world-next {
    order: 2;
    padding-top: calc(18 / 390 * var(--mu));
    gap: calc(12 / 390 * var(--mu));
    flex-wrap: nowrap;
    font-size: calc(10 / 390 * var(--mu));
    line-height: normal;
    letter-spacing: 0.14em;
    color: #4e4a43;
  }
  .supply-footer .world-next .rule {
    width: calc(30 / 390 * var(--mu));
    background: #4e4a43;
  }
  .supply-footer .world-next > span:first-child:lang(ar),
  .supply-footer .world-next .supply-next-name:lang(ar) {
    letter-spacing: 0;
  }
  .supply-next-extra {
    display: none;
  }
}

/* Transport (World 03) */
.transport {
  position: relative;
  min-height: clamp(560px, 60vw, 900px);
  background: var(--ink-900);
}
/* World 03's own eyebrow (Archivo per source) — scoped to .transport
   only, not touching .world-eyebrow's shared mono base or World 02's/
   5c's own scoped overrides. */
.transport .world-eyebrow {
  font-family: var(--font-en);
}
/* Top tick + dot — hidden below the desktop breakpoint (mobile World 03
   is a later phase, matching the pattern used elsewhere). */
.transport-tick {
  display: none;
  position: absolute;
  top: 0;
  width: 3px;
  background: var(--gold-600);
}
.transport-tick-dot {
  display: none;
  position: absolute;
  width: 13px;
  height: 13px;
  background: var(--gold-600);
}
.transport-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(24px, 4vw, 52px) var(--edge) 0;
}
.transport-title {
  font-size: clamp(32px, 5.2vw, 84px);
  line-height: 1.08;
  font-weight: 800;
  color: var(--cream-50);
  letter-spacing: -0.03em;
  margin: 0;
  max-width: 14ch;
}
.transport-intro {
  max-width: 40ch;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.9;
  color: var(--cream-100);
}
.transport-stages {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(8px, 1.2vw, 16px);
  padding: clamp(24px, 4vw, 48px) var(--edge) 0;
}
.transport-stage {
  position: relative;
  overflow: hidden;
  background: var(--ink-800);
  flex: 1 1 260px;
  min-height: 260px;
}
.transport-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.transport-stage.is-wide {
  flex: 2 1 420px;
}
.transport-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(11, 13, 15, 0.6),
    rgba(11, 13, 15, 0.06) 34%,
    rgba(11, 13, 15, 0) 68%,
    rgba(11, 13, 15, 0.3)
  );
}
/* Stage B's gradient is genuinely lighter than A/C in the source, not a
   copy of the same value. */
.transport-stage-b::after {
  background: linear-gradient(
    to bottom,
    rgba(11, 13, 15, 0.5),
    rgba(11, 13, 15, 0) 30%,
    rgba(11, 13, 15, 0) 78%,
    rgba(11, 13, 15, 0.25)
  );
}
.transport-stage-label {
  position: absolute;
  top: 20px;
  inset-inline-start: 20px;
  z-index: 2;
}
.transport-footer {
  position: relative;
  margin-top: clamp(24px, 4vw, 40px);
  background: linear-gradient(var(--stone-300), var(--stone-500));
  padding: clamp(24px, 3vw, 46px) var(--edge) clamp(20px, 3vw, 26px);
}
/* World 03's own node/travel/label/divider treatment — scoped so it
   never touches 5d's already-fixed .route-footer geometry, which reuses
   the same shared .route-track/.route-node/.route-labels component
   classes with its own distinct pixel layout. */
.transport-footer .transport-node {
  width: 13px;
  height: 13px;
  background: var(--text-dark);
}
.transport-footer .transport-node-1 {
  background: var(--gold-600);
}
.transport-travel {
  display: none;
  position: absolute;
  width: 28px;
  height: 13px;
  background: var(--gold-600);
  box-shadow: 0 0 0 2px var(--ink-850);
}
.transport-divider {
  display: none;
  position: absolute;
  width: 3px;
  background: var(--gold-600);
}
/* Stages B/C anchor their label to the inline-end edge (was an inline
   style on each label; same declarations, now overridable on mobile). */
.transport-stage-label.is-end {
  inset-inline-start: auto;
  inset-inline-end: 20px;
  text-align: end;
}
/* Mobile-only elements (compact counter, vertical rails, per-row nodes,
   vertical travel marker) — hidden everywhere except the M6 mobile block. */
.transport-step-counter {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--cream-50);
  white-space: nowrap;
}
.transport-step-counter,
.transport-rail,
.transport-rail-fill,
.transport-row-node,
.transport-travel-m {
  display: none;
}

/* Desktop exact-at-1440 geometry (source: scene height 1080, header 88,
   title top:140, stages at staggered offsets top:360/400/440, footer
   height:240 with pixel-exact line/node/travel/label positions). Below
   this the previous flow-based stacking remains as the mobile fallback
   (World 03 mobile is a dedicated later phase, matching 5a/5b/5c/5d/
   World02). */
@media (min-width: 640px) {
  .transport {
    aspect-ratio: 1440 / 1080;
    min-height: 480px;
  }
  .transport .world-topbar {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: calc(88 / 1440 * var(--uy));
  }
  .transport-tick {
    display: block;
    inset-inline-start: calc(657 / 1440 * 100vw);
    height: calc(112 / 1440 * var(--uy));
  }
  .transport-tick-dot {
    display: block;
    top: calc(106 / 1440 * var(--uy));
    inset-inline-start: calc(652 / 1440 * 100vw);
  }
  .transport-heading {
    display: contents;
  }
  .transport-title {
    position: absolute;
    top: calc(140 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    max-width: calc(700 / 1440 * var(--uw));
    white-space: nowrap;
  }
  .transport-intro {
    position: absolute;
    top: calc(160 / 1440 * var(--uy));
    inset-inline-end: var(--edge);
    max-width: calc(440 / 1440 * var(--uw));
  }
  .transport-stages {
    display: block;
    position: absolute;
    top: 0;
    inset-inline: 0;
    padding: 0;
  }
  .transport-stage {
    position: absolute;
    min-height: 0;
  }
  .transport-stage-a {
    top: calc(360 / 1440 * var(--uy));
    inset-inline-start: calc(44 / 1440 * 100vw);
    width: calc(330 / 1440 * 100vw);
    height: calc(480 / 1440 * var(--uy));
  }
  .transport-stage-b {
    top: calc(400 / 1440 * var(--uy));
    inset-inline-start: calc(394 / 1440 * 100vw);
    width: calc(680 / 1440 * 100vw);
    height: calc(440 / 1440 * var(--uy));
  }
  .transport-stage-c {
    top: calc(440 / 1440 * var(--uy));
    inset-inline-start: calc(1094 / 1440 * 100vw);
    width: calc(302 / 1440 * 100vw);
    height: calc(400 / 1440 * var(--uy));
  }
  .transport-stage img {
    position: absolute;
    max-width: none;
    object-fit: initial;
  }
  .transport-stage-a img {
    left: calc(-80 / 1440 * var(--uy));
    top: calc(-20 / 1440 * var(--uy));
    width: calc(940 / 1440 * var(--uy));
    height: calc(525 / 1440 * var(--uy));
  }
  .transport-stage-b img {
    left: calc(-103 / 1440 * var(--uy));
    top: 0;
    width: calc(783 / 1440 * var(--uy));
    height: calc(440 / 1440 * var(--uy));
  }
  .transport-stage-c img {
    left: calc(-440 / 1440 * var(--uy));
    top: calc(-40 / 1440 * var(--uy));
    width: calc(836 / 1440 * var(--uy));
    height: calc(470 / 1440 * var(--uy));
  }
  .transport-footer {
    position: absolute;
    bottom: 0;
    inset-inline: 0;
    height: calc(240 / 1440 * var(--uy));
    margin-top: 0;
    padding: 0;
  }
  .transport-footer .route-track {
    position: absolute;
    top: calc(49 / 1440 * var(--uy));
    inset-inline: calc(66 / 1440 * 100vw);
    height: 3px;
    margin-inline: 0;
  }
  .transport-footer .route-nodes {
    position: static;
    display: contents;
  }
  /* Nodes are positioned relative to .route-track (their containing block).
     Source values (58/493/929/1364) are footer-relative; the track has a
     66px inset-inline, so subtract 66 from each horizontal value. The vertical
     offset (source 41px from footer, track top 49px from footer = -8px) is
     constant — nodes are fixed-size circles, not scaled with the viewport. */
  .transport-footer .route-node {
    position: absolute;
    top: -8px;
    inset-inline-start: 0;
  }
  .transport-footer .transport-node-1 {
    top: -8px;
    inset-inline-start: -8px;
  }
  .transport-footer .transport-node-2 {
    inset-inline-start: calc(427 / 1440 * 100vw);
  }
  .transport-footer .transport-node-3 {
    inset-inline-start: calc(863 / 1440 * 100vw);
  }
  .transport-footer .transport-node-4 {
    inset-inline-start: calc(1298 / 1440 * 100vw);
  }
  .transport-travel {
    display: block;
    top: calc(44 / 1440 * var(--uy));
    inset-inline-start: calc(1289 / 1440 * 100vw);
  }
  .transport-divider {
    display: block;
    top: calc(49 / 1440 * var(--uy));
    bottom: 0;
    inset-inline-end: calc(65 / 1440 * 100vw);
  }
  .transport-labels {
    display: block;
    position: absolute;
    top: calc(84 / 1440 * var(--uy));
    inset-inline: 0;
    margin-top: 0;
  }
  .transport-label {
    position: absolute;
    width: calc(300 / 1440 * 100vw);
  }
  .transport-label-1 {
    inset-inline-start: calc(58 / 1440 * 100vw);
  }
  .transport-label-2 {
    inset-inline-start: calc(493 / 1440 * 100vw);
  }
  .transport-label-3 {
    inset-inline-start: calc(929 / 1440 * 100vw);
  }
  .transport-label-4 {
    inset-inline-end: calc(110 / 1440 * 100vw);
    width: calc(200 / 1440 * 100vw);
    text-align: left;
  }
  .transport-footer .route-bottom-row {
    position: absolute;
    bottom: calc(24 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    display: block;
  }
  .transport-footer .route-bottom-row span:empty {
    display: none;
  }
}

/* Mobile World 03/Transport — exact-at-390 geometry (source: scene
   390xauto, data-scene="mW03"). One vertical journey: an inset three-image
   stack (200 / 250 / 200px, explicit per-image pixel crops) above a stone
   footer whose vertical rail carries four process rows and a travelling
   marker — not desktop's staggered boxes or horizontal route. Everything is
   .transport-scoped so no shared .world-* / .route-* rule is relied on. */
@media (max-width: 639px) {
  .transport {
    min-height: 0;
  }
  .transport .world-topbar {
    position: relative;
    height: 57px;
    padding-block: 0;
    padding-inline-start: calc(48 / 390 * var(--mu));
    padding-inline-end: calc(20 / 390 * var(--mu));
  }
  .transport .world-eyebrow {
    font-size: calc(10 / 390 * var(--mu));
    letter-spacing: 0.28em;
  }
  .transport-eyebrow-extra {
    display: none;
  }
  .transport .world-steps {
    display: none;
  }
  .transport-step-counter {
    display: block;
  }
  .transport-tick {
    display: block;
    inset-inline-start: calc(23 / 390 * var(--mu));
    height: calc(118 / 390 * var(--mu));
  }
  .transport-tick-dot {
    display: block;
    top: calc(112 / 390 * var(--mu));
    inset-inline-start: calc(18 / 390 * var(--mu));
  }
  .transport-heading {
    display: block;
    padding: calc(44 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) 0;
    padding-inline-start: calc(48 / 390 * var(--mu));
  }
  .transport-title {
    font-size: calc(40 / 390 * var(--mu));
    line-height: 1.12;
    max-width: none;
  }
  .transport-intro {
    margin: calc(18 / 390 * var(--mu)) 0 0;
    max-width: none;
    font-size: calc(14.5 / 390 * var(--mu));
  }
  .transport-stages {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: calc(12 / 390 * var(--mu));
    margin-top: calc(34 / 390 * var(--mu));
    padding: 0;
    padding-inline-start: calc(48 / 390 * var(--mu));
  }
  .transport .transport-stage {
    flex: none;
    min-height: 0;
  }
  .transport .transport-stage-a,
  .transport .transport-stage-c {
    height: calc(200 / 390 * var(--mu));
  }
  .transport .transport-stage-b {
    height: calc(250 / 390 * var(--mu));
  }
  .transport-stage img {
    position: absolute;
    max-width: none;
    object-fit: initial;
  }
  /* One explicit pixel crop per image — LOG-01, LOG-02 and LOG-03 are
     three different photographs and none shares another's framing. */
  .transport-stage-a img {
    left: calc(-40 / 390 * var(--mu));
    top: calc(-60 / 390 * var(--mu));
    width: calc(604 / 390 * var(--mu));
    height: calc(337 / 390 * var(--mu));
  }
  .transport-stage-b img {
    left: calc(-126 / 390 * var(--mu));
    top: calc(-8 / 390 * var(--mu));
    width: calc(468 / 390 * var(--mu));
    height: calc(263 / 390 * var(--mu));
  }
  .transport-stage-c img {
    left: calc(-200 / 390 * var(--mu));
    top: calc(-90 / 390 * var(--mu));
    width: calc(568 / 390 * var(--mu));
    height: calc(320 / 390 * var(--mu));
  }
  .transport-stage-a::after {
    background: linear-gradient(to bottom, rgba(11, 13, 15, 0.62), rgba(11, 13, 15, 0) 45%);
  }
  .transport-stage-b::after {
    background: linear-gradient(to bottom, rgba(11, 13, 15, 0.5), rgba(11, 13, 15, 0) 40%);
  }
  .transport-stage-c::after {
    background: linear-gradient(to bottom, rgba(11, 13, 15, 0.55), rgba(11, 13, 15, 0) 42%);
  }
  .transport-stage-label {
    top: calc(16 / 390 * var(--mu));
    inset-inline-start: calc(18 / 390 * var(--mu));
  }
  .transport-stage-label.is-end {
    inset-inline-start: auto;
    inset-inline-end: calc(18 / 390 * var(--mu));
  }
  .transport-stage-label .route-stage-tag {
    line-height: normal;
  }
  .transport-stage-label .route-stage-title {
    margin-top: calc(6 / 390 * var(--mu));
    font-size: calc(23 / 390 * var(--mu));
    line-height: normal;
    text-shadow: 0 2px 12px rgba(11, 13, 15, 0.6);
  }
  .transport-footer {
    margin-top: calc(12 / 390 * var(--mu));
    padding: calc(30 / 390 * var(--mu)) calc(20 / 390 * var(--mu));
    padding-inline-start: calc(48 / 390 * var(--mu));
  }
  .transport-rail,
  .transport-rail-fill {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(23 / 390 * var(--mu));
    width: 3px;
  }
  .transport-rail {
    background: var(--ink-850);
  }
  .transport-rail-fill {
    background: var(--gold-600);
    transform-origin: top center;
  }
  .transport-footer .route-track,
  .transport-divider {
    display: none;
  }
  .transport-footer .transport-labels {
    display: flex;
    flex-direction: column;
    position: relative;
    gap: 0;
    margin-top: 0;
  }
  .transport-footer .transport-label {
    position: relative;
    display: block;
    height: calc(64 / 390 * var(--mu));
  }
  .transport-footer .transport-label .step-num {
    display: block;
    font-size: calc(10 / 390 * var(--mu));
    line-height: normal;
    letter-spacing: 0.18em;
    color: #4e4a43;
  }
  .transport-footer .transport-label-1 .step-num {
    color: var(--gold-700);
  }
  .transport-footer .transport-label .step-title {
    display: block;
    margin-top: calc(4 / 390 * var(--mu));
    font-size: calc(18 / 390 * var(--mu));
    line-height: normal;
    font-weight: 800;
    color: var(--text-dark);
  }
  .transport-row-node {
    display: block;
    position: absolute;
    top: calc(4 / 390 * var(--mu));
    inset-inline-start: calc(-34 / 390 * var(--mu));
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--ink-850);
    border: 3px solid var(--stone-300);
  }
  .transport-row-node.is-current {
    background: var(--gold-600);
  }
  .transport-travel-m {
    display: block;
    position: absolute;
    top: calc(192 / 390 * var(--mu));
    inset-inline-start: calc(-31 / 390 * var(--mu));
    width: 13px;
    height: 26px;
    background: var(--gold-600);
    box-shadow: 0 0 0 2px var(--ink-850);
  }
  .transport-footer .route-bottom-row {
    display: block;
    margin-top: calc(20 / 390 * var(--mu));
  }
  .transport-footer .route-bottom-row span:empty {
    display: none;
  }
  .transport-footer .btn {
    display: flex;
  }
  .transport-footer .btn .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .transport-footer .btn .btn-label {
    display: flex;
    align-items: center;
    padding-block: 0;
    padding-inline: calc(20 / 390 * var(--mu));
  }
  .transport-footer .btn .btn-arrow {
    padding-inline: calc(18 / 390 * var(--mu));
    border-inline-start-color: rgba(241, 239, 234, 0.25);
  }
}

/* =====================================================================
   HOW WE WORK — its own scene: a continuous architectural route line
   (drawn frame + gold process line + nodes), never a card grid. Own
   typography/geometry extracted independently, not inherited from 5d
   or World 03 by assumption.
   ===================================================================== */
.how {
  position: relative;
  background-color: var(--stone-300);
  background-image:
    linear-gradient(rgba(14, 44, 86, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(14, 44, 86, 0.08) 1px, transparent 1px);
  background-size: 40px 40px;
  padding: clamp(48px, 7vw, 96px) var(--edge);
}
/* The 5 architectural frame strokes — hidden below the desktop
   breakpoint (mobile How We Work is a later phase, matching the
   pattern used for every other scene's desktop-only extras). */
.how-frame {
  display: none;
  position: absolute;
  background: var(--gold-600);
}
.how-heading {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-end;
  gap: 20px;
}
.how-title {
  font-size: clamp(40px, 5.4vw, 96px);
  line-height: 1;
  font-weight: 800;
  color: var(--text-dark);
  letter-spacing: -0.03em;
  margin: 12px 0 0;
}
.how-intro {
  max-width: 40ch;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.9;
  color: var(--text-dark-soft);
}
/* Route track (line + nodes + travel marker) — mobile fallback keeps a
   plain gold top rule, matching the section's previous simple divider,
   until How We Work's own mobile phase. */
.how-track {
  position: relative;
  margin-top: clamp(36px, 5vw, 64px);
  height: 3px;
  border-top: 3px solid var(--gold-600);
}
.how-track-line {
  display: none;
}
.how-nodes {
  display: none;
}
.how-travel {
  display: none;
}
.how-steps {
  list-style: none;
  margin: 0;
  padding: clamp(24px, 3vw, 34px) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: clamp(20px, 3vw, 32px);
}
.how-step-num {
  font-family: var(--font-en, "Archivo", sans-serif);
  font-size: 34px;
  font-weight: 700;
  color: var(--text-dark);
}
.how-step-title {
  margin-top: 12px;
  font-size: 20px;
  font-weight: 800;
  color: var(--text-dark);
}
.how-step-body {
  margin-top: 8px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-dark-muted);
}
.how-step-link {
  display: inline-block;
  margin-top: 10px;
  font-size: 11px;
  color: var(--navy-800);
  border-bottom: 1px solid var(--navy-800);
  padding-bottom: 3px;
}
.how-step-link:hover {
  color: var(--gold-700);
  border-color: var(--gold-700);
}
/* Mobile-only elements (static dark rail, animated gold rail, travelling
   square) — hidden everywhere except the M7 mobile block. */
.how-rail,
.how-rail-fill,
.how-travel-m,
.how-eyebrow-m {
  display: none;
}

/* Desktop exact-at-1440 geometry (source: scene height 780, architectural
   frame strokes at their literal coordinates, process line at top:419,
   6 nodes at explicit x-positions, 6 step columns at those same
   x-positions). All selectors are new `how-` prefixed classes, scoped
   to this file section only — nothing here can leak into 5d's or
   World 03's shared route/transport classes, and nothing from those
   scenes is reused here by assumption. */
@media (min-width: 700px) {
  .how {
    overflow-x: clip; /* the travel marker starts 1054px off to the side */
    aspect-ratio: 1440 / 780;
    min-height: 480px;
    padding: 0;
  }
  .how-frame {
    display: block;
  }
  .how-frame-1 {
    top: 0;
    inset-inline-end: calc(65 / 1440 * 100vw);
    width: 3px;
    height: calc(122 / 1440 * var(--uy));
  }
  .how-frame-2 {
    top: calc(119 / 1440 * var(--uy));
    inset-inline: calc(65 / 1440 * 100vw);
    height: 3px;
    background: var(--ink-850);
  }
  .how-frame-3 {
    top: calc(119 / 1440 * var(--uy));
    inset-inline-start: calc(65 / 1440 * 100vw);
    width: 3px;
    height: calc(303 / 1440 * var(--uy));
    background: var(--ink-850);
  }
  .how-frame-4 {
    top: calc(419 / 1440 * var(--uy));
    inset-inline: calc(65 / 1440 * 100vw);
    height: 3px;
    background: var(--ink-850);
  }
  .how-frame-5 {
    top: calc(419 / 1440 * var(--uy));
    bottom: 0;
    inset-inline-end: calc(65 / 1440 * 100vw);
    width: 3px;
  }
  .how-heading {
    display: block;
    position: absolute;
    top: calc(168 / 1440 * var(--uy));
    inset-inline-start: calc(120 / 1440 * 100vw);
  }
  .how-intro {
    position: absolute;
    top: calc(190 / 1440 * var(--uy));
    inset-inline-end: calc(120 / 1440 * 100vw);
    max-width: calc(520 / 1440 * var(--uw));
  }
  .how-track {
    position: absolute;
    top: calc(419 / 1440 * var(--uy));
    inset-inline: 0;
    height: 3px;
    margin-top: 0;
    border-top: none;
  }
  .how-track-line {
    display: block;
    position: absolute;
    top: 0;
    inset-inline-start: calc(96 / 1440 * 100vw);
    width: calc(1054 / 1440 * 100vw);
    height: 3px;
    background: var(--gold-600);
  }
  .how-nodes {
    display: contents;
  }
  .how-node {
    position: absolute;
    top: calc(-8 / 1440 * var(--uy));
    width: 13px;
    height: 13px;
    border-radius: 50%;
    background: var(--ink-850);
    border: 3px solid var(--stone-300);
  }
  .how-node-1 {
    inset-inline-start: calc(86 / 1440 * 100vw);
    background: var(--gold-600);
  }
  .how-node-2 {
    inset-inline-start: calc(297 / 1440 * 100vw);
  }
  .how-node-3 {
    inset-inline-start: calc(508 / 1440 * 100vw);
  }
  .how-node-4 {
    inset-inline-start: calc(718 / 1440 * 100vw);
  }
  .how-node-5 {
    inset-inline-start: calc(929 / 1440 * 100vw);
  }
  .how-node-6 {
    inset-inline-start: calc(1140 / 1440 * 100vw);
  }
  .how-travel {
    display: block;
    position: absolute;
    top: calc(-6 / 1440 * var(--uy));
    inset-inline-start: calc(1143 / 1440 * 100vw);
    width: 15px;
    height: 15px;
    background: var(--gold-600);
    box-shadow: 0 0 0 2px var(--ink-850);
  }
  .how-steps {
    display: block;
    position: absolute;
    top: calc(452 / 1440 * var(--uy));
    inset-inline: 0;
    padding: 0;
  }
  .how-step {
    position: absolute;
    width: calc(190 / 1440 * 100vw);
  }
  .how-step-1 {
    inset-inline-start: calc(87 / 1440 * 100vw);
  }
  .how-step-2 {
    inset-inline-start: calc(298 / 1440 * 100vw);
  }
  .how-step-3 {
    inset-inline-start: calc(509 / 1440 * 100vw);
  }
  .how-step-4 {
    inset-inline-start: calc(719 / 1440 * 100vw);
  }
  .how-step-5 {
    inset-inline-start: calc(930 / 1440 * 100vw);
  }
  .how-step-6 {
    inset-inline-start: calc(1141 / 1440 * 100vw);
  }
}

/* Mobile How We Work — exact-at-390 geometry (source: scene 390xauto,
   data-scene="mHow"). One continuous vertical process: a dark rail the full
   height of the scene, a gold rail that draws down over it, six 120px rows
   with a node each on the rail, and a gold square that travels to the last
   row — not desktop's horizontal route, and not six cards. */
@media (max-width: 699px) {
  .how {
    overflow: hidden;
    background-size: 32px 32px;
    padding: calc(44 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) calc(40 / 390 * var(--mu));
    padding-inline-start: calc(48 / 390 * var(--mu));
  }
  .how-rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(23 / 390 * var(--mu));
    width: 3px;
    background: var(--ink-850);
  }
  .how-heading {
    display: block;
  }
  .how .kicker {
    font-family: var(--font-en);
    font-size: calc(10 / 390 * var(--mu));
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.24em;
    margin: 0;
  }
  .how-eyebrow-ar {
    letter-spacing: 0;
  }
  .how-heading > .kicker:not(.how-eyebrow-m) {
    display: none;
  }
  .how-heading > .how-eyebrow-m {
    display: block;
  }
  .how-title {
    margin: calc(14 / 390 * var(--mu)) 0 0;
    font-size: calc(52 / 390 * var(--mu));
  }
  .how-intro {
    margin: calc(18 / 390 * var(--mu)) 0 0;
    max-width: none;
    font-size: calc(14 / 390 * var(--mu));
  }
  .how-track {
    height: 0;
    margin-top: calc(36 / 390 * var(--mu));
    border-top: 0;
  }
  .how-nodes {
    display: contents;
  }
  .how-node {
    position: absolute;
    inset-inline-start: calc(-33 / 390 * var(--mu));
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--ink-850);
    border: 3px solid var(--stone-300);
  }
  .how-node-1 {
    top: calc(1 / 390 * var(--mu));
  }
  .how-node-2 {
    top: calc(121 / 390 * var(--mu));
  }
  .how-node-3 {
    top: calc(241 / 390 * var(--mu));
  }
  .how-node-4 {
    top: calc(361 / 390 * var(--mu));
  }
  .how-node-5 {
    top: calc(481 / 390 * var(--mu));
  }
  .how-node-6 {
    top: calc(601 / 390 * var(--mu));
  }
  .how-rail-fill {
    display: block;
    position: absolute;
    top: calc(10 / 390 * var(--mu));
    height: calc(600 / 390 * var(--mu));
    inset-inline-start: calc(-25 / 390 * var(--mu));
    width: 3px;
    background: var(--gold-600);
    transform-origin: top center;
  }
  .how-travel-m {
    display: block;
    position: absolute;
    top: calc(604 / 390 * var(--mu));
    inset-inline-start: calc(-30 / 390 * var(--mu));
    width: 13px;
    height: 13px;
    background: var(--gold-600);
    box-shadow: 0 0 0 2px var(--ink-850);
    z-index: 2;
  }
  .how-steps {
    display: block;
    padding: 0;
  }
  .how-step {
    position: relative;
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: calc(12 / 390 * var(--mu));
    align-items: baseline;
    align-content: start;
    height: calc(120 / 390 * var(--mu));
  }
  .how-step-num {
    font-size: calc(24 / 390 * var(--mu));
    line-height: 1;
  }
  .how-step-title {
    margin: 0;
    font-size: calc(19 / 390 * var(--mu));
    line-height: normal;
  }
  .how-step-body {
    grid-column: 1 / -1;
    margin: calc(8 / 390 * var(--mu)) 0 0;
    font-size: calc(13.5 / 390 * var(--mu));
    line-height: 1.7;
  }
  .how-step-link {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: calc(8 / 390 * var(--mu));
    font-family: var(--font-mono);
    font-size: calc(11 / 390 * var(--mu));
    letter-spacing: 0.06em;
    padding-bottom: 2px;
  }
}

/* =====================================================================
   CONTACT
   ===================================================================== */
.contact {
  position: relative;
  background: var(--ink-900);
  padding-bottom: clamp(40px, 6vw, 0px);
}
/* Architectural tick marks — hidden below the desktop breakpoint
   (mobile Contact is a later phase, matching the pattern used for
   every other scene's desktop-only extras). */
.contact-tick {
  display: none;
  position: absolute;
  background: var(--gold-600);
  z-index: 2;
}
/* Mobile-only elements (full-height gold rail, mobile eyebrow) — hidden
   everywhere except the M8 mobile block. */
.contact-rail,
.contact-kicker-m {
  display: none;
}
.contact-stage {
  position: relative;
  height: clamp(220px, 34vw, 560px);
  overflow: hidden;
  background: var(--ink-800);
}
.contact-stage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.contact-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 13, 15, 0.4) 0%,
    rgba(11, 13, 15, 0) 20%,
    rgba(11, 13, 15, 0) 70%,
    #0b0d0f 100%
  );
}
.contact-body {
  position: relative;
  margin-top: clamp(-140px, -14vw, -220px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(28px, 4vw, 48px);
  z-index: 2;
  padding-inline: var(--edge);
}
@media (min-width: 980px) {
  .contact-body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
  }
}
.contact-kicker-block {
  max-width: 34ch;
}
.contact-title {
  margin-top: 18px;
  font-size: clamp(40px, 5.4vw, 88px);
  line-height: 1.04;
  font-weight: 800;
  color: var(--cream-50);
  letter-spacing: -0.03em;
  text-shadow: 0 10px 40px rgba(11, 13, 15, 0.6);
}
.contact-lede {
  margin-top: 22px;
  font-size: clamp(18px, 1.8vw, 24px);
  font-weight: 700;
  color: var(--cream-50);
}
.contact-sub {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--cream-200);
  text-shadow: 0 2px 12px rgba(11, 13, 15, 0.8);
}
.contact-actions {
  margin-top: 26px;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
}
.contact-whatsapp[hidden] {
  display: none;
}
.contact-email {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 17px 6px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--cream-50);
  border-bottom: 1px solid rgba(241, 239, 234, 0.4);
}
.contact-email:hover {
  color: var(--gold-500);
  border-color: var(--gold-500);
}
.contact-meta {
  margin-top: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--cream-muted);
}
.contact-meta a {
  color: var(--cream-200);
}
.contact-meta a:hover {
  color: var(--gold-500);
}

.contact-card {
  position: relative;
  background: rgba(20, 24, 28, 0.97);
  border: 1px solid rgba(241, 239, 234, 0.14);
  padding: clamp(24px, 3vw, 36px) clamp(20px, 3vw, 40px) clamp(24px, 3vw, 34px);
  box-shadow: 0 40px 90px rgba(0, 0, 0, 0.5);
}
.contact-card::before,
.contact-card::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  border-color: var(--gold-600);
  border-style: solid;
  border-width: 0;
}
.contact-card::before {
  top: -6px;
  inset-inline-end: -6px;
  border-top-width: 2px;
  border-inline-end-width: 2px;
}
.contact-card::after {
  bottom: -6px;
  inset-inline-start: -6px;
  border-bottom-width: 2px;
  border-inline-start-width: 2px;
}
.contact-card-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(241, 239, 234, 0.14);
}
.contact-card-head h2 {
  margin: 0;
  font-size: 22px;
  font-weight: 800;
  color: var(--cream-50);
}
.contact-card-head span {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--cream-faint);
}

.contact-form {
  margin-top: 26px;
}
.form-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(16px, 2.4vw, 28px);
  row-gap: clamp(18px, 2.4vw, 24px);
}
.form-fields[hidden] {
  display: none;
}
@media (max-width: 520px) {
  .form-fields {
    grid-template-columns: 1fr;
  }
}
.form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-row.full {
  grid-column: 1 / -1;
}
.form-row label {
  font-family: var(--font-ar-label);
  font-size: 11px;
  color: var(--cream-muted);
}
.form-row input,
.form-row select {
  font-family: var(--font-ar);
  font-size: 16px;
  color: var(--cream-50);
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(241, 239, 234, 0.3);
  padding: 10px 0;
  outline: none;
  border-radius: 0;
  appearance: none;
}
.form-row input:focus,
.form-row select:focus {
  border-bottom-color: var(--gold-600);
}
.form-row select option {
  color: var(--text-dark);
}
.form-row.select-row {
  position: relative;
}
.form-row.select-row::after {
  content: "▾";
  position: absolute;
  inset-inline-end: 0;
  bottom: 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--gold-600);
  pointer-events: none;
}
.form-row textarea {
  font-family: var(--font-ar);
  font-size: 16px;
  line-height: 1.7;
  color: var(--cream-50);
  background: rgba(241, 239, 234, 0.03);
  border: 1px solid rgba(241, 239, 234, 0.22);
  padding: 12px 14px;
  outline: none;
  border-radius: 0;
  resize: vertical;
}
.form-row textarea:focus {
  border-color: var(--gold-600);
}

.hp-field {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
}

.form-actions {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Source wraps the submit button with align-self:flex-start — without
   it, the flex column's default align-items:stretch stretches the
   outer <button> to the full form width while .btn-inner (the gold
   pill) stays content-sized, exposing the browser's own unstyled
   button background in the leftover space. */
.form-submit {
  align-self: flex-start;
}
.form-actions[hidden] {
  display: none;
}
.form-note {
  font-size: 13px;
  line-height: 1.7;
  color: var(--cream-faint);
}
.form-status {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid rgba(229, 138, 110, 0.55);
  background: rgba(229, 138, 110, 0.08);
  font-size: 14px;
  line-height: 1.6;
  color: var(--error-100);
  white-space: pre-line;
}
.form-status[hidden] {
  display: none;
}
.form-status::before {
  content: "";
  width: 8px;
  height: 8px;
  flex: none;
  background: var(--error-500);
}
.form-status-success {
  border-color: rgba(203, 125, 38, 0.5);
  background: rgba(203, 125, 38, 0.08);
  color: var(--cream-50);
}
.form-status-success::before {
  display: none;
}
.form-status-info {
  border-color: rgba(241, 239, 234, 0.2);
  background: rgba(241, 239, 234, 0.04);
  color: var(--cream-100);
}
.form-status-info::before {
  display: none;
}

.form-success {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 6px 0 2px;
}
.form-success[hidden] {
  display: none;
}
.form-success-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.form-success-check {
  width: 40px;
  height: 40px;
  flex: none;
  background: var(--gold-600);
  color: var(--text-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 18px;
}
.form-success-head span:last-child {
  font-size: 24px;
  font-weight: 800;
  color: var(--cream-50);
}
.form-ref-box {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 20px;
  border: 1px dashed rgba(227, 165, 90, 0.6);
  background: rgba(203, 125, 38, 0.06);
}
.form-ref-box .ref-label {
  font-size: 13px;
  color: var(--cream-muted);
}
.form-ref-box .ref-value {
  font-family: var(--font-ar-label);
  font-size: 15px;
  font-weight: 600;
  color: var(--gold-500);
  direction: ltr;
  unicode-bidi: isolate;
}
.form-success-note {
  font-size: 14px;
  line-height: 1.8;
  color: var(--cream-200);
}
.form-reset {
  align-self: flex-start;
  min-height: 44px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid rgba(241, 239, 234, 0.4);
  padding: 0 2px;
  color: var(--cream-50);
  font-family: var(--font-ar);
  font-size: 14px;
  cursor: pointer;
}
.form-reset:hover {
  color: var(--gold-500);
  border-color: var(--gold-500);
}

.form-submit[disabled] {
  cursor: progress;
}
.form-submit[disabled] .btn-inner {
  background: var(--text-dark-muted);
  color: var(--cream-50);
}
.form-submit[disabled] .btn::before,
.form-submit[disabled] .btn::after {
  border-color: #6e6862;
}

/* Desktop exact-at-1440 geometry (source: scene height 1400, image band
   height 901 with an explicit pixel crop, text block top:112, form card
   top:646, tick marks at their literal coordinates). Below this the
   previous flow-based grid/overlap-margin layout remains as the mobile
   fallback (Contact mobile is a dedicated later phase, matching 5a/5b/
   5c/5d/World02/World03/How We Work). None of the form's ids, names, or
   JS-driven hidden/disabled states are touched here — only geometry. */
@media (min-width: 640px) {
  .contact {
    aspect-ratio: 1440 / 1400;
    min-height: 480px;
    padding-bottom: 0;
  }
  .contact-tick {
    display: block;
  }
  .contact-tick-1 {
    top: 0;
    inset-inline-end: calc(65 / 1440 * 100vw);
    width: 3px;
    height: calc(59 / 1440 * var(--uy));
  }
  .contact-tick-2 {
    top: calc(56 / 1440 * var(--uy));
    inset-inline-end: calc(65 / 1440 * 100vw);
    inset-inline-start: calc(568 / 1440 * 100vw);
    height: 3px;
  }
  .contact-tick-3 {
    top: calc(56 / 1440 * var(--uy));
    inset-inline-start: calc(568 / 1440 * 100vw);
    width: 3px;
    height: calc(590 / 1440 * var(--uy));
  }
  .contact-stage {
    position: absolute;
    top: 0;
    inset-inline: 0;
    height: calc(901 / 1440 * var(--uy));
  }
  .contact-stage img {
    position: absolute;
    left: calc(-160 / 1440 * var(--uy));
    top: 0;
    width: calc(1600 / 1440 * var(--uy));
    height: 100%;
    object-fit: initial;
    max-width: none;
  }
  .contact-stage::after {
    background:
      linear-gradient(
        to left,
        rgba(11, 13, 15, 0.74) 0%,
        rgba(11, 13, 15, 0.46) 30%,
        rgba(11, 13, 15, 0) 52%
      ),
      linear-gradient(
        to bottom,
        rgba(11, 13, 15, 0.4) 0%,
        rgba(11, 13, 15, 0) 14%,
        rgba(11, 13, 15, 0) 76%,
        #0b0d0f 100%
      );
  }
  .contact-body {
    display: block;
    position: static;
    margin-top: 0;
    padding-inline: 0;
  }
  .contact-text {
    position: absolute;
    top: calc(112 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    width: calc(500 / 1440 * var(--uw));
    max-width: none;
  }
  .contact-kicker-block {
    max-width: none;
  }
  .contact-text .kicker {
    font-family: var(--font-en);
  }
  .contact-title {
    margin-top: 20px;
    font-size: clamp(60px, calc(92 / 1440 * 100vw), 92px);
    line-height: 1.02;
  }
  .contact-lede {
    margin-top: 28px;
    font-size: clamp(20px, calc(24 / 1440 * 100vw), 24px);
  }
  .contact-sub {
    max-width: calc(440 / 1440 * var(--uw));
  }
  .contact-card {
    position: absolute;
    top: calc(646 / 1440 * var(--uy));
    inset-inline-start: var(--edge);
    width: calc(530 / 1440 * var(--uw));
  }
}

/* Mobile Contact — exact-at-390 geometry (source: scene 390xauto,
   data-scene="mContact"). One cinematic scene: a 320px CTA-01 crop fading
   into the page, a full-height gold rail, the text block overlapping the
   fade by 40px, WA + email rows, then the request form as a dark framed
   panel — not desktop's two columns stacked. Everything is .contact-scoped
   and none of the form's ids/names/JS-driven hidden/disabled states are
   touched (visual only). */
@media (max-width: 639px) {
  .contact {
    padding-bottom: calc(40 / 390 * var(--mu));
  }
  .contact-stage {
    height: calc(320 / 390 * var(--mu));
  }
  .contact-stage img {
    position: absolute;
    left: calc(-178 / 390 * var(--mu));
    top: 0;
    width: calc(568 / 390 * var(--mu));
    height: calc(320 / 390 * var(--mu));
    max-width: none;
    object-fit: initial;
  }
  .contact-stage::after {
    background: linear-gradient(
      to bottom,
      rgba(11, 13, 15, 0.3),
      rgba(11, 13, 15, 0) 35%,
      #0b0d0f 100%
    );
  }
  .contact-rail {
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: calc(23 / 390 * var(--mu));
    width: 3px;
    background: var(--gold-600);
    transform-origin: top center;
    z-index: 2;
  }
  .contact-body {
    display: block;
    margin-top: calc(-40 / 390 * var(--mu));
    padding-inline: 0;
  }
  .contact-text {
    padding-inline-start: calc(48 / 390 * var(--mu));
    padding-inline-end: calc(20 / 390 * var(--mu));
  }
  .contact-kicker-block {
    max-width: none;
  }
  .contact-kicker-block > .kicker:not(.contact-kicker-m) {
    display: none;
  }
  .contact-kicker-block > .contact-kicker-m {
    display: block;
    font-family: var(--font-en);
    font-size: calc(10 / 390 * var(--mu));
    font-weight: 600;
    line-height: normal;
    letter-spacing: 0.24em;
    color: var(--gold-500);
    margin: 0;
  }
  .contact-kicker-ar {
    letter-spacing: 0;
  }
  .contact-title {
    margin: calc(14 / 390 * var(--mu)) 0 0;
    font-size: calc(50 / 390 * var(--mu));
    line-height: 1.04;
    text-shadow: none;
  }
  .contact-lede {
    margin: calc(20 / 390 * var(--mu)) 0 0;
    font-size: calc(19 / 390 * var(--mu));
    line-height: normal;
  }
  .contact-sub {
    margin: calc(8 / 390 * var(--mu)) 0 0;
    max-width: none;
    font-size: calc(14 / 390 * var(--mu));
    line-height: 1.8;
    text-shadow: none;
  }
  .contact-actions {
    margin-top: calc(24 / 390 * var(--mu));
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: calc(12 / 390 * var(--mu));
  }
  .contact-whatsapp {
    display: flex;
  }
  .contact-whatsapp .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .contact-whatsapp .btn-label {
    display: flex;
    align-items: center;
    padding-block: 0;
    padding-inline: calc(20 / 390 * var(--mu));
  }
  .contact-whatsapp .btn-arrow {
    padding-inline: calc(16 / 390 * var(--mu));
    font-size: calc(11 / 390 * var(--mu));
    letter-spacing: 0.12em;
  }
  .contact-actions .contact-email {
    justify-content: space-between;
    min-height: 49px;
    padding: 0 calc(6 / 390 * var(--mu));
    gap: 0;
    letter-spacing: 0;
  }
  .contact-meta {
    display: none;
  }
  .contact-card {
    margin: calc(34 / 390 * var(--mu)) calc(16 / 390 * var(--mu)) 0;
    margin-inline-start: calc(40 / 390 * var(--mu));
    background: var(--ink-850);
    box-shadow: none;
    padding: calc(26 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) calc(24 / 390 * var(--mu));
  }
  .contact-card::before,
  .contact-card::after {
    width: 18px;
    height: 18px;
  }
  .contact-card-head {
    padding-bottom: calc(16 / 390 * var(--mu));
  }
  .contact-card-head h2 {
    line-height: normal;
    font-size: calc(19 / 390 * var(--mu));
  }
  .contact-card-head span {
    line-height: normal;
    font-size: calc(9.5 / 390 * var(--mu));
    letter-spacing: 0.18em;
  }
  .contact-form {
    margin-top: calc(20 / 390 * var(--mu));
  }
  .form-fields {
    grid-template-columns: 1fr;
    row-gap: calc(20 / 390 * var(--mu));
  }
  .form-row {
    gap: calc(4 / 390 * var(--mu));
  }
  .form-row label {
    line-height: normal;
  }
  .form-fields > .form-row:last-child {
    gap: calc(6 / 390 * var(--mu));
  }
  .form-row input,
  .form-row select {
    padding: calc(12 / 390 * var(--mu)) 0;
  }
  .form-row input[type="tel"] {
    font-family: var(--font-mono);
    text-align: right;
  }
  .form-row.select-row::after {
    bottom: calc(14 / 390 * var(--mu));
  }
  .form-row textarea {
    padding: calc(12 / 390 * var(--mu));
    height: calc(4 * 1.7em + 26px);
  }
  .form-actions {
    margin-top: calc(20 / 390 * var(--mu));
  }
  .form-submit {
    display: flex;
    align-self: stretch;
    width: 100%;
    background: transparent;
    border: 0;
  }
  .form-submit::before,
  .form-submit::after {
    border-color: var(--cream-50);
  }
  .form-submit[disabled]::before,
  .form-submit[disabled]::after {
    border-color: #6e6862;
  }
  .form-submit .btn-inner {
    width: 100%;
    justify-content: space-between;
    min-height: 56px;
  }
  .form-submit .btn-label {
    display: flex;
    align-items: center;
    padding-block: 0;
    padding-inline: calc(20 / 390 * var(--mu));
  }
  .form-submit .btn-arrow {
    padding-inline: calc(18 / 390 * var(--mu));
  }
  .form-submit[disabled] .btn-arrow {
    border-inline-start-color: rgba(241, 239, 234, 0.2);
  }
  /* Loading shows "···" in the arrow slot. Scoped to "no availability
     notice" so the unavailable-disabled state doesn't claim it's sending. */
  .contact-form:has(#cf-availability-notice[hidden]) .form-submit[disabled] .btn-arrow {
    font-size: 0;
  }
  .contact-form:has(#cf-availability-notice[hidden]) .form-submit[disabled] .btn-arrow::after {
    content: "···";
    font-size: 14px;
    letter-spacing: 0.2em;
    color: var(--gold-500);
  }
  .form-note {
    margin: 0;
    font-size: calc(12.5 / 390 * var(--mu));
  }
  .form-alt {
    display: none;
  }
  .contact-form:has(#cf-availability-notice:not([hidden])) .form-alt,
  .contact-form:has(#cf-status:not([hidden])) .form-alt {
    display: block;
  }
  .form-success-head span:last-child {
    font-size: calc(21 / 390 * var(--mu));
  }
}

/* =====================================================================
   FOOTER
   ===================================================================== */
.site-footer {
  background: var(--ink-950);
  border-top: 1px solid rgba(241, 239, 234, 0.12);
  padding: clamp(36px, 5vw, 56px) 0 clamp(20px, 3vw, 30px);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: clamp(24px, 4vw, 60px);
  align-items: start;
}
@media (max-width: 639px) {
  .footer-grid {
    grid-template-columns: 1fr;
  }
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 14px;
}
.footer-brand .brand-mark {
  width: 48px;
  height: 48px;
  box-shadow: 0 0 0 1px rgba(241, 239, 234, 0.2);
}
/* Footer's own EMAR THE 6TH treatment (Archivo/9.5px/.24em/#948D84 per
   source) — scoped to the footer only; .brand-en's shared base (mono)
   is also used by 5a's header and is not touched here. */
.footer-brand .brand-en {
  font-family: var(--font-en);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--cream-faint);
}
.footer-brand .brand-ar {
  font-size: 16px;
}
.footer-tagline {
  max-width: 420px;
  font-size: 14px;
  line-height: 1.8;
  color: var(--cream-muted);
}
.footer-col {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14px;
}
.footer-col-label {
  font-family: var(--font-ar-label);
  font-size: 10.5px;
  color: var(--cream-faint);
  margin-bottom: 4px;
}
.footer-col a {
  color: var(--cream-200);
}
.footer-col a:hover {
  color: var(--gold-500);
}
.footer-bottom {
  margin-top: clamp(28px, 4vw, 48px);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: space-between;
  align-items: center;
  padding-top: 22px;
  border-top: 1px solid rgba(241, 239, 234, 0.1);
  font-size: 12.5px;
  color: var(--cream-faint);
}
.footer-bottom a {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  color: var(--cream-faint);
}
.footer-bottom a:hover {
  color: var(--gold-500);
}

/* Mobile Footer — exact-at-390 composition (source: footer 390xauto,
   padding 40/20/26, 30px rhythm): brand row, tagline, a 2-column
   quick-links / contact grid, then the copyright line. Not desktop's three
   columns collapsed. The source has no back-to-top link, so it is hidden
   here. Static in the source — no motion. */
@media (max-width: 639px) {
  .site-footer {
    padding: calc(40 / 390 * var(--mu)) calc(20 / 390 * var(--mu)) calc(26 / 390 * var(--mu));
    display: flex;
    flex-direction: column;
    gap: calc(30 / 390 * var(--mu));
  }
  .site-footer .wrap {
    width: auto;
    max-width: none;
    margin: 0;
    padding-inline: 0;
  }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: calc(30 / 390 * var(--mu)) calc(24 / 390 * var(--mu));
  }
  .footer-brand {
    grid-column: 1 / -1;
    gap: calc(30 / 390 * var(--mu));
  }
  .footer-brand-row {
    gap: calc(12 / 390 * var(--mu));
  }
  .footer-brand .brand-mark {
    width: calc(44 / 390 * var(--mu));
    height: calc(44 / 390 * var(--mu));
  }
  .footer-brand .brand-name {
    display: flex;
    flex-direction: column;
    gap: calc(3 / 390 * var(--mu));
  }
  .footer-brand .brand-ar {
    font-size: calc(15 / 390 * var(--mu));
    font-weight: 800;
    line-height: normal;
  }
  .footer-brand .brand-en {
    font-size: calc(8.5 / 390 * var(--mu));
    font-weight: 600;
    letter-spacing: 0.22em;
    line-height: normal;
  }
  .footer-tagline {
    max-width: none;
    margin: 0;
    font-size: calc(13.5 / 390 * var(--mu));
  }
  .footer-col {
    font-size: calc(14 / 390 * var(--mu));
    line-height: normal;
  }
  .footer-col-label {
    margin-bottom: 0;
    font-size: calc(10 / 390 * var(--mu));
    line-height: normal;
  }
  .footer-col a[dir="ltr"] {
    align-self: flex-start;
    font-family: var(--font-mono);
    font-size: calc(12 / 390 * var(--mu));
  }
  .footer-col > span:not(.footer-col-label) {
    color: var(--cream-muted);
  }
  .footer-bottom {
    margin-top: 0;
    padding-top: calc(18 / 390 * var(--mu));
    font-size: calc(11.5 / 390 * var(--mu));
    line-height: 1.7;
  }
  .footer-bottom a {
    display: none;
  }
}

/* =====================================================================
   SCROLL-TRIGGERED MOTION (one-shot, disabled under reduced motion)
   ===================================================================== */
[data-anim] {
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: reduce) {
  [data-anim] {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  /* The generic transform:none above would leave the door halves at their
     CLOSED position (translateX(0), covering IMG-02) — their own final
     state is off-screen, not transform:none, so it needs a more specific
     override here. */
  .entrance-door-l {
    transform: translateX(-101%) !important;
  }
  .entrance-door-r {
    transform: translateX(101%) !important;
  }
}

@media (max-width: 639px) {
  .entrance-words span {
    font-size: 24px;
  }
  .contracting-caps-grid {
    grid-template-columns: 1fr 1fr;
    row-gap: 20px;
  }
  .cap:nth-child(3) {
    padding-inline-start: 0;
    border-inline-start: 0;
  }
  .route-stages {
    grid-template-columns: 1fr 1fr;
  }
  .route-labels {
    grid-template-columns: 1fr 1fr;
  }
  .transport-stage {
    flex: 1 1 100%;
  }
}

/* R1/R2 — phone and tablet touch targets. Invisible hit-area extensions only (a
   transparent ::after on elements that are otherwise statically positioned),
   so no visible size, spacing or layout changes — the 390 composition is
   untouched. Bounded to phone and tablet widths (<= 1099px). */
@media (max-width: 1099px) {
  .lang-toggle,
  .footer-col a,
  .how-step-link {
    position: relative;
  }
  .lang-toggle::after {
    content: "";
    position: absolute;
    inset: -8px -5px;
  }
  .footer-col a::after {
    content: "";
    position: absolute;
    inset: -6px 0;
  }
  .how-step-link::after {
    content: "";
    position: absolute;
    inset: -11px 0;
  }
}

/* R2 — tablet / intermediate range (700–1099px).
   Below 1100px the desktop composition (min-width:640px blocks) is used with
   two adjustments, both driven by one length, --tab (= 1100px − viewport, so
   it tapers smoothly to 0 at 1100px and the 1440 composition is untouched):
   1. Vertical metrics hold their 901px-composition values (--uy = 901px under
      901px) instead of shrinking with the viewport, because text stays at its
      px floor while boxes would otherwise keep shrinking.
   2. Scene heights (explicit height, not aspect-ratio — an aspect-ratio box
      with a min-height would otherwise widen the page) grow by a small
      multiple of --tab where the narrower columns make text wrap onto more
      lines (route labels, supply rows, transport labels, how steps). */
@media (min-width: 640px) and (max-width: 1099px) {
  :root {
    --tab: calc(1100px - 100vw);
  }
  .route,
  .supply,
  .transport {
    aspect-ratio: auto;
    min-height: 0;
  }
  .route {
    height: calc(900 / 1440 * var(--uy) + var(--tab) * 0.14);
  }
  .route-footer {
    height: calc(230 / 1440 * var(--uy) + var(--tab) * 0.14);
  }
  .supply {
    height: calc(1120 / 1440 * var(--uy) + var(--tab) * 0.57);
  }
  .supply-row {
    height: calc(180 / 1440 * var(--uy) + var(--tab) * 0.19);
  }
  .supply-row-2 {
    top: calc(612 / 1440 * var(--uy) + var(--tab) * 0.19);
  }
  .supply-row-3 {
    top: calc(804 / 1440 * var(--uy) + var(--tab) * 0.38);
  }
  .transport {
    height: calc(1080 / 1440 * var(--uy) + var(--tab) * 0.21);
  }
  .transport-footer {
    height: calc(240 / 1440 * var(--uy) + var(--tab) * 0.21);
  }
}
@media (min-width: 640px) and (max-width: 900px) {
  :root {
    --uy: 901px;
    --uw: 901px;
  }
  .about-body {
    padding-inline: max(var(--edge), calc(50% - 212px));
  }
}

/* About: the centred CTA and the legend row below it overlap until ~1190px
   (the bottom band shrinks with the viewport while both keep their px size),
   so the band gets up to 43px extra height that tapers to 0 at 1200px. */
@media (min-width: 640px) and (max-width: 1199px) {
  :root {
    --ab: min(43px, max(0px, calc((1200px - 100vw) * 0.43)));
  }
  .about {
    aspect-ratio: auto;
    min-height: 0;
    height: calc(880 / 1440 * var(--uy) + var(--ab));
  }
  .about-opening {
    bottom: calc(236 / 1440 * var(--uy) + var(--ab));
  }
  .about-bottom {
    height: calc(236 / 1440 * var(--uy) + var(--ab));
  }
}

/* Contracting: the three capability columns wrap onto more lines than the
   1440 layout (and English more than Arabic), so the caps band gets extra
   height that holds up to ~1100px and tapers to 0 at 1200px (Arabic) /
   1360px (English). */
@media (min-width: 640px) and (max-width: 1359px) {
  :root {
    --cx: calc(min(56px, max(0px, (1200px - 100vw) * 0.56)) + max(0px, 800px - 100vw) * 0.65);
  }
  .contracting {
    aspect-ratio: auto;
    min-height: 0;
    height: calc(960 / 1440 * var(--uy) + var(--cx));
  }
  .contracting-strips,
  .contracting .world-heading {
    bottom: calc(300 / 1440 * var(--uy) + var(--cx));
  }
  .contracting-caps {
    height: calc(250 / 1440 * var(--uy) + var(--cx));
  }
  :root:lang(en) {
    --cx: calc(min(150px, max(0px, (1360px - 100vw) * 0.3)) + max(0px, 800px - 100vw) * 0.65);
  }
}

/* R2.2 — phone layout growth clamp. The authored phone composition scales with the viewport
   (--mu = 100vw) up to 540px (1.38x the 390 reference). From 541px up to the tablet switch (640px; 700px for
   How We Work, which stays vertical) the scenes are full width again, but every phone metric stays at its
   540px value, and the two aspect-ratio scenes get an explicit height so they do not keep growing. */
@media (min-width: 541px) and (max-width: 699px) {
  :root {
    --mu: 540px;
  }
}
@media (min-width: 541px) and (max-width: 639px) {
  .entrance,
  .about {
    aspect-ratio: auto;
    min-height: 0;
    height: calc(820 / 390 * var(--mu));
  }
}

/* R2.1 — hero floor below 768px. The base hero keeps its 480px floor through
   aspect-ratio + min-height, which widens the page at 700–767px; use an
   explicit height with the same floor instead (identical values at >=768px). */
@media (min-width: 640px) and (max-width: 767px) {
  .entrance {
    aspect-ratio: auto;
    min-height: 0;
    height: max(calc(940 / 1440 * 100vw), 480px);
  }
}

/* R2.1 — Contact: the form card (646/1440 from the top, ~870px tall) was taller
   than the 1440/1400 scene box and was clipped by its overflow:hidden at every
   desktop width (115px at 1440). The card now sits in flow below a spacer equal
   to its old top offset (+ --ce below ~1300px, where the text column is taller
   than the room above the card), so the scene is as tall as its content and the
   composition (CTA-01 crop, text block, card position) is unchanged. */
@media (min-width: 640px) {
  :root {
    --ce: min(117px, max(0px, calc((1440px - 100vw) * 0.22)));
  }
  :root:lang(en) {
    --ce: clamp(130px, calc(212px - (100vw - 900px) * 0.15), 212px);
  }
  .contact {
    aspect-ratio: auto;
    height: auto;
    min-height: calc(1400 / 1440 * var(--uy));
    padding-bottom: 56px;
  }
  .contact-body {
    position: relative;
    padding-top: calc(646 / 1440 * var(--uy) + var(--ce));
  }
  .contact-card {
    position: relative;
    top: auto;
    inset-inline-start: auto;
    margin-inline-start: var(--edge);
  }
  .contact-tick-3 {
    height: calc(590 / 1440 * var(--uy) + var(--ce));
  }
  /* The source design puts the lede 28px under the title; the live title carried an extra
     clamp()ed bottom margin (76px at 1440) that pushed the whole text block down onto the card. */
  .contact-title {
    margin-bottom: 0;
  }
  .contact-text {
    width: max(calc(500 / 1440 * var(--uw)), min(440px, calc(100% - 2 * var(--edge))));
  }
  .contact-sub {
    max-width: max(calc(440 / 1440 * var(--uw)), min(400px, 100%));
  }
}

/* R2.1 — English hero title. The Arabic title is two short lines at 132px; the
   English one is 48 characters and wrapped onto four lines that ran under the
   stone floor at every width >=640px. A smaller size lets it settle on three
   lines inside the wall; the phone composition (<=639px) is untouched. */
@media (min-width: 640px) {
  .entrance-title:lang(en) {
    font-size: clamp(26px, calc(100 / 1440 * 100vw), 100px);
  }
}

/* English lede is longer than the Arabic one and ends up under the wall at
   830–949px (below 830px the lede takes the full measure, see next block);
   give the English hero a little extra height there. */
@media (min-width: 830px) and (max-width: 949px) {
  .entrance:lang(en) {
    aspect-ratio: auto;
    min-height: 0;
    height: calc(max(calc(940 / 1440 * 100vw), 480px) + (950px - 100vw) * 0.28);
  }
}

/* Below ~830px the hero lede wraps under the title; give it the full measure
   (two lines) instead of its 220–290px column so it stays inside the wall. */
@media (min-width: 640px) and (max-width: 829px) {
  .entrance-lede-body {
    max-width: min(520px, 100%);
  }
}

/* R2.2 — How We Work keeps the vertical phone composition up to 699px and switches to the horizontal
   composition at 700px (the six columns do not fit before that). Its tablet rules therefore start at 700px. */
@media (min-width: 700px) and (max-width: 1099px) {
  .how {
    aspect-ratio: auto;
    min-height: 0;
  }
  .how {
    height: calc(780 / 1440 * var(--uy) + var(--tab) * 0.226);
  }
  .how-intro {
    top: calc(190 / 1440 * var(--uy) - var(--tab) * 0.085);
  }
  .how-step-title {
    font-size: clamp(15px, 1.95vw, 20px);
  }
  .how-heading .kicker {
    letter-spacing: 0.14em;
  }
  .how:lang(en) .how-intro {
    top: calc(190 / 1440 * var(--uy) - var(--tab) * 0.135);
  }
  .how:lang(en) {
    height: calc(780 / 1440 * var(--uy) + var(--tab) * 0.446);
  }
}

@media (min-width: 700px) and (max-width: 767px) {
  .how-heading .kicker {
    letter-spacing: 0.06em;
  }
  .how-step-title {
    font-size: 14px;
  }
}

/* R2.2 — the 3rd and 4th logistics labels would touch at the narrowest tablet widths. */
@media (min-width: 640px) and (max-width: 767px) {
  .transport-footer .transport-label .step-title {
    font-size: clamp(16px, 2.6vw, 20px);
  }
}

/* Final review — the Route eyebrow and process labels mix Latin with Arabic words, but their stacks were Latin-only
   (Archivo / IBM Plex Mono), so the Arabic glyphs fell back to Segoe UI / Times New Roman. Almarai is added as the
   Arabic fallback; the Latin glyphs keep Archivo / IBM Plex Mono. Scoped to the Route section (not World 03). */
.route .route-eyebrow {
  font-family: "Archivo", Almarai, "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.32em; /* authored 5d value (base rule is 0.3em) */
}
.route .route-steps-legend {
  font-family: "IBM Plex Mono", Almarai, ui-monospace, monospace;
}

/* Route process legend: it is absolutely placed at the footer start and, in English (and at tablet widths), ran
   underneath the CTA at the opposite end. Keep it clear of the CTA by letting it wrap inside the free width. */
/* phones: let the Arabic headline wrap naturally instead of forcing the desktop line break */
@media (max-width: 639px) {
  .route .route-title br {
    display: none;
  }
}
@media (min-width: 640px) {
  .route .route-steps-legend {
    flex-wrap: wrap;
    row-gap: 4px;
    max-width: calc(100% - 2 * var(--edge) - 300px);
  }
}

/* Final review — wide desktop (>= 1440px) for the Route / 5d scene only.
   1440px is the authored visual scale: the composition (header, headline, four stages, footer rail, CTA) is
   capped at 1440 x 900 and centred, with the type at its authored sizes. The section background fills the
   wider viewport (dark field, the stage-row band and the stone footer band run edge to edge), so there are no
   gutters and nothing is enlarged. Scoped to .route — World 03 (.transport) is untouched. */
@media (min-width: 1440px) {
  .route {
    --uw: 1440px;
    --uy: 1440px;
    aspect-ratio: auto;
    height: 900px;
    min-height: 0;
    background:
      linear-gradient(var(--stone-300), var(--stone-500)) 0 100% / 100% 230px no-repeat,
      linear-gradient(var(--ink-850), var(--ink-850)) 0 340px / 100% 330px no-repeat,
      var(--ink-900);
  }
  .route .route-header,
  .route .route-stages,
  .route .route-footer {
    inset-inline: 0;
    width: 1440px;
    margin-inline: auto;
    background: none;
  }
  .route .route-title {
    inset-inline-start: calc((100% - 1440px) / 2 + var(--edge));
  }
  /* footer rail: the 1440-based vw offsets above, as fixed pixels */
  .route .route-track {
    inset-inline-start: 32px;
    inset-inline-end: 281px;
  }
  .route .route-line-fill {
    width: 313px;
  }
  .route .route-footer .route-node-1 {
    inset-inline-start: -11px;
  }
  .route .route-footer .route-node-2 {
    inset-inline-start: 304px;
  }
  .route .route-footer .route-node-3 {
    inset-inline-start: 617px;
  }
  .route .route-footer .route-node-4 {
    inset-inline-start: 1118px;
  }
  /* authored type roles (reference 5d at 1440) */
  .route .route-eyebrow,
  .route .route-eyebrow-en,
  .route .route-steps-legend {
    font-size: 10.5px;
  }
  .route .route-title {
    font-size: 46px;
  }
  .route .route-stage-tag {
    font-size: 10px;
  }
  .route .route-stage-title {
    font-size: 34px;
  }
  .route .route-descriptions {
    font-size: 13.5px;
  }
  .route .route-footer .btn-label {
    padding: 17px 26px;
    font-size: 14.5px;
  }
  .route .route-footer .btn-arrow {
    padding-inline: 18px;
    font-size: 14px;
  }
}

/* R3 — the English route headline is much longer than the Arabic one; at 700px it wrapped onto four
   lines and its last line ran 19–31px under the stage images (900–1440px). Give it a wider measure. */
@media (min-width: 640px) {
  .route-title:lang(en) {
    max-width: calc(1120 / 1440 * var(--uw));
  }
}