/* One World International — client-approved multi-page system */
@font-face {
  font-family: "OWI Source Serif 4";
  src: url("/assets/fonts/headline-comparison/source-serif-4-latin.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OWI Source Serif 4";
  src: url("/assets/fonts/headline-comparison/source-serif-4-latin-italic.woff2") format("woff2");
  font-style: italic;
  font-weight: 400;
  font-display: swap;
}

@font-face {
  font-family: "OWI Noto Naskh Arabic";
  src: url("/assets/fonts/headline-comparison/noto-naskh-arabic.woff2") format("woff2");
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
}

:root {
  /* Locked to oneworldinternational.ae — see DESIGN-TOKENS.md */
  --navy: oklch(17% .055 255);
  --navy-deep: oklch(11% .04 255);
  --navy-surface: oklch(21% .06 255);
  --accent: oklch(74% .15 55);
  --accent-dark: oklch(64% .14 50);
  --gold: oklch(74% .15 55);
  --ivory: #f5edd0;
  /* Map/illustration metallic gold family — deliberately separate from the
     UI apricot --accent/--gold token. Sourced from docs/asset-audit.md §5:
     the map reference photo's gold reads deeper/bronzer than UI apricot.
     Never substitute --accent/--gold for these in map or illustration fills. */
  --map-gold: #d9a441;
  --map-gold-dark: #c98f3d;
  --map-bronze: #b3823a;
  --map-slate: #37455c;
  --map-slate-light: #5a6c88;
  /* Tier ramp (review finding #5): one perceptual axis, gold -> bronze ->
     mid -> steel -> steel-dark, each step visibly apart on the navy ground.
     Shared by bank dots, map region fills, and the legend — never decorative. */
  --tier-elite: #d9a441;
  --tier-2: #b3823a;
  --tier-mid: #8f7f66;
  --tier-3: #6d80a0;
  --tier-4: #46587a;
  --type-base: 1rem;
  --leading-body: 1.65;
  --leading-display: .96;
  --paper-texture: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='p'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 .55  0 0 0 0 .46  0 0 0 0 .24  0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23p)'/%3E%3C/svg%3E");
  --paper: oklch(98% .008 95);
  --ink: #111827;
  --slate: #1e293b;
  --muted-ink: #5b6b7d;
  /* Secondary text on dark — documented in DESIGN-TOKENS.md but never
     actually defined here until the one-background pass needed it for
     real (previously only --muted-ink, the on-light pairing, existed). */
  --muted: oklch(78% .018 250);
  --line-light: #e2ddd5;
  --line-dark: color-mix(in oklch, var(--paper) 20%, transparent);
  --error: #b33a3a;
  --display-latin: "OWI Source Serif 4", Georgia, "Times New Roman", serif;
  --display-ar: "OWI Noto Naskh Arabic", serif;
  --display: var(--display-latin);
  --body: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "Helvetica Neue", Helvetica, Arial, sans-serif;
  --shell: min(1280px, calc(100vw - 96px));
  /* The fixed header's own horizontal inset, derived so it always lands on
     the same edge as .page-shell's centered margin - .page-shell caps at
     1280px, so above ~1376px viewport width its margin grows past the 96px/
     48px/36px figures below; the header used to stay pinned at those fixed
     values and drifted out of alignment with the content edge on wide
     screens. Recomputes automatically at each breakpoint below since --shell
     itself is redefined there - only this one definition is needed. */
  --shell-margin: calc((100vw - var(--shell)) / 2);
  --ease: cubic-bezier(.16,1,.3,1);
  /* Press feedback is one value site-wide: subtle enough to read as
     acknowledgement, never as a jump. .97 sits mid-band — above ~.98 is
     imperceptible, below ~.95 reads as a bounce. --ease-press is a strong
     ease-out kept separate from --ease so a press can be retuned without
     touching entrances. */
  --press-scale: .97;
  --ease-press: cubic-bezier(.23, 1, .32, 1);
  /* Motion duration scale — every transition/keyframe delay derives from
     these; see the motion-interaction-review artifact for rationale. */
  --dur-press: .12s;
  --dur-fast: .18s;
  --dur-move: .3s;
  /* Client note (sticky-note review, 2026-08-27): arena strip specifically
     read as too quick to react on hover/click - scoped override, not a
     site-wide motion change. */
  --dur-arena: .55s;
  --dur-enter: .6s;
}

html[lang="ar"] { --display: var(--display-ar); }
html[lang="ar"] :is(h1, h2, h3, h4) { letter-spacing: normal; }
html[lang="ar"] :is(h1, h2, h3) { line-height: 1.18; }
html[lang="ar"] :is(h1, h2, h3, h4) em { font-style: normal; }
* { box-sizing: border-box; }
html { font-size: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; background: var(--navy-deep); overflow-x: hidden; }
body { margin: 0; color: var(--paper); background-color: var(--navy-deep); font-family: var(--body); font-size: var(--type-base); line-height: var(--leading-body); overflow-x: hidden; }
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }
.page-shell { width: var(--shell); margin: 0 auto; }
.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; }
.dot { color: var(--muted); }
.copy-section--dark .dot, .contact-band .dot { color: var(--accent); }

/* Shared type and controls */
h1, h2, h3, h5, p { margin-top: 0; }
h1, h2, h3 { font-family: var(--display); font-weight: 400; line-height: var(--leading-display); }
h1 em, h2 em, h3 em { color: var(--accent); font-style: italic; }
.copy-section--dark :is(h1, h2, h3) em, .contact-band :is(h1, h2, h3) em, .page-hero :is(h1, h2, h3) em { color: var(--accent); }
h1 { letter-spacing: -.03em; text-wrap: balance; }
h2 { margin-bottom: 28px; font-size: clamp(2.4rem, 4.5vw, 4.6rem); letter-spacing: -.02em; }
h3 { margin-bottom: 18px; font-size: clamp(1.5rem, 2.6vw, 2.6rem); letter-spacing: -.01em; line-height: 1.1; }
/* H5 — one shared style for the accent line that opens a section (kicker)
   and the one that closes it (every closer variant below). A style tier,
   not a literal heading level (DESIGN-SYSTEM.md §3.2a) — markup keeps
   whatever tag/heading-level fits that section's own outline. */
.section-kicker, .type-h5, h4, h3.section-closer, .evidence-assurance, .risk-evidence__close {
  color: var(--accent);
  font: 400 .66rem/1.2 var(--body);
  letter-spacing: .18em;
  text-transform: uppercase;
}
.section-kicker { margin: 0 0 22px; }
h4, h3.section-closer { margin-top: 40px; }
.section-kicker--gold { color: var(--gold); }
/* Client ask (Capital Aligned With Commerce, 2026-09-15): a second, quieter
   line under the all-caps kicker — same font family, smaller and lighter
   than the kicker itself, single line. Not part of the shared kicker
   selector above so it keeps normal-case, non-accent text by default. */
.section-kicker__subtitle { margin: -14px 0 26px; font: 300 .95rem/1.3 var(--body); letter-spacing: .01em; }
.section-kicker__subtitle em { color: var(--accent); font-style: normal; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 15px; min-height: 52px; padding: 0 28px; border: 1px solid transparent; border-radius: 0; font: 600 .6875rem/1 var(--body); letter-spacing: .16em; text-decoration: none; text-transform: uppercase; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease); }
.button span { font-size: 1.125rem; }
.button:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.button--accent { color: var(--navy); background: var(--accent); border-color: var(--accent); }
.button--accent:hover { background: var(--accent-dark); border-color: var(--accent-dark); }

/* Shared header — dark-tinted liquid glass. Base tint stays >=62% opaque so
   white nav text holds 4.5:1+ even over the lightest content that can sit
   behind a fixed header (worst case: ivory hero, verified by hand — this
   isn't in scripts/check-contrast.mjs's fixed pair list since the backdrop
   varies per page). Sheen/edge layers are separate from the tint so the
   contrast-relevant color stays a single, checkable value. */
.site-header {
  position: fixed; z-index: 30; top: 0; left: 0; right: 0;
  display: flex; align-items: center; gap: 36px; min-height: 82px; padding: 16px var(--shell-margin);
  color: var(--paper);
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,0) 42%, rgba(0,0,0,.1) 100%),
    rgba(0,15,38,.64);
  background-blend-mode: overlay, normal;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border-bottom: 1px solid rgba(255,255,255,.08);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.14), 0 12px 30px rgba(0,4,18,.28);
  transition: background-color var(--dur-move) var(--ease);
}
.site-header.is-scrolled {
  min-height: 68px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 42%, rgba(0,0,0,.12) 100%),
    rgba(0,7,22,.82);
  background-blend-mode: overlay, normal;
}
.site-logo-link { display: block; flex: 0 0 auto; }
.site-logo { width: 178px; height: auto; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 44px); margin-left: auto; }
.site-nav__link { color: rgba(255,255,255,.7); font: 500 .6875rem/1 var(--body); letter-spacing: .15em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.site-nav__link:hover, .site-nav__link.is-active { color: var(--accent); }
/* Client edit (2026-08-27): the desktop header pill (.site-header__cta) is
   removed site-wide (was previously a NEXUS-only exception — see git
   history for both). This mobile-dropdown link is now every page's only
   header-level path to the inquiry form, still shown mobile-only (<=980px,
   hidden here to avoid a duplicate desktop CTA now that there's nothing to
   deduplicate against — kept mobile-scoped rather than promoted to desktop
   since that wasn't asked for). */
.site-nav__link--cta { display: none; }
.site-nav__link:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.site-header__menu-toggle { display: none; width: 44px; height: 44px; padding: 9px 7px; color: var(--paper); background: transparent; border: 1px solid var(--line-dark); cursor: pointer; }
.site-header__menu-toggle:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.site-header__menu-toggle span { display: block; width: 26px; height: 1px; margin: 6px auto; background: currentColor; }
.site-nav__lang-switch { display: flex; align-items: center; gap: 6px; margin-left: 8px; color: rgba(255,255,255,.5); font: 500 .625rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; }
/* Visual size stays micro; the hit area meets the 44px tap-target floor. */
.site-nav__lang { display: inline-flex; align-items: center; min-height: 44px; padding: 0 6px; color: rgba(255,255,255,.5); text-decoration: none; }
.site-nav__lang:hover { color: var(--accent); }
.site-nav__lang.is-active { color: var(--paper); }

/* Page hero */
.page-hero {
  --hero-eyebrow-size: clamp(.62rem, .7vw, .75rem);
  --hero-title-size: clamp(2.8rem, 5.6vw, 5.2rem);
  --hero-subhead-size: clamp(1.15rem, 1.65vw, 1.5rem);
  --hero-body-size: clamp(.88rem, .95vw, 1rem);
  position: relative;
  min-height: min(860px, 94svh);
  overflow: hidden;
  isolation: isolate;
  background: var(--navy-deep);
}
.page-hero__media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
/* Client comments 1CD5_VIKrVoz / Z4nhqvkoee4c (2026-09-16): a further ~30%
   cut on top of the prior round's modest reduction, paired with the
   brightness() bump above on the media itself. */
.page-hero__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(90deg, oklch(11% .04 255 / .6), oklch(11% .04 255 / .52) 34%, oklch(11% .04 255 / .15) 78%, oklch(11% .04 255 / .05)), linear-gradient(0deg, oklch(11% .04 255 / .6), transparent 33%); }
.grain { position: absolute; z-index: -1; inset: 0; pointer-events: none; opacity: .11; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E"); }

/* Full-bleed background photo for an otherwise-bare section — same layering
   as .page-hero (isolation + negative z-index media/veil), scoped to the
   section's own content height rather than a fixed hero height. A single
   flat, dense veil (not a directional gradient like the hero's) keeps text
   contrast safe regardless of the underlying photo's local brightness. */
.section-photo { position: relative; isolation: isolate; overflow: hidden; }
.section-photo__media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.7) contrast(1.08); }
.section-photo__veil { position: absolute; z-index: -2; inset: 0; background: oklch(11% .04 255 / .88); }
.page-hero__content { display: flex; min-height: min(860px, 94svh); flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 110px; padding-bottom: 90px; color: var(--paper); }
.page-hero__eyebrow { margin-bottom: clamp(18px, 2.4vw, 30px); font-size: var(--hero-eyebrow-size); }
.page-hero__content h1 { max-width: 980px; margin-bottom: clamp(22px, 2.4vw, 30px); font-size: var(--hero-title-size); }
.page-hero__lead, .page-hero__subhead { max-width: 760px; margin-bottom: clamp(14px, 1.6vw, 18px); color: rgba(255,255,255,.86); font: 400 var(--hero-subhead-size)/1.55 var(--body); }
.page-hero__body { max-width: 760px; margin-bottom: clamp(24px, 3vw, 34px); color: rgba(255,255,255,.68); font-size: var(--hero-body-size); }
.page-hero__close { max-width: 760px; margin: clamp(18px, 2.6vw, 32px) 0 0; color: var(--gold); font: 400 clamp(1rem, 1.4vw, 1.35rem)/1.2 var(--display); letter-spacing: 0; text-transform: none; }
.page-hero--global .page-hero__content { padding-bottom: 135px; }
.page-hero--global .page-hero__lead { width: min(34.25rem, 100%); max-width: none; }
.page-hero--global .page-hero__body { width: min(34.375rem, 100%); max-width: none; }
.page-hero--leadership .page-hero__lead { width: min(35rem, 100%); max-width: none; }
.page-hero--leadership .page-hero__content h1 { width: min(42.375rem, 100%); max-width: none; }
.page-hero--trade .page-hero__lead { width: min(30.9375rem, 100%); max-width: none; }
/* Client comments 1CD5_VIKrVoz / Z4nhqvkoee4c (2026-09-16): "brighter by
   30%" on top of the modest veil-only reduction from the prior round, which
   evidently wasn't enough — brightness(1.24) -> 1.6 is +29% relative. */
.page-hero--global .page-hero__media { object-position: center; filter: saturate(1.3) contrast(1.1) brightness(1.6); }
.page-hero--trade .page-hero__media, .page-hero--equation .page-hero__media { filter: saturate(.72) contrast(1.08); }
.page-hero--leadership .page-hero__media { filter: saturate(.72) contrast(1.08) brightness(1.3); }
.page-hero--light { color: var(--paper); background-color: var(--navy-deep); }
.page-hero--light .page-hero__media { inset: 0 0 0 43%; width: 57%; object-position: center; }
/* Percentage padding resolves against the full-viewport section, not the
   1280px shell — bare 48% grew to 922px at 1920px wide and crushed the text
   column to ~360px (NEXUS h1 wrapped to four lines; Vercel comment
   zcCukZpZu0Wa "Two lines only"). Cap at 48% of the shell's 1280px max so
   the column is stable on wide screens. */
.page-hero--light .page-hero__content { min-height: min(760px, 90svh); max-width: var(--shell); margin: 0 auto; padding-right: min(48%, 614px); }
.page-hero--nexus { background: #000204; }
.page-hero--nexus .page-hero__media { inset: 0 0 0 22%; width: 87.5%; height: 100%; object-fit: contain; object-position: 58% center; filter: saturate(.78) contrast(1.08); }
.nexus-wordmark { width: 190px; height: auto; margin-bottom: 36px; object-fit: contain; }
.page-hero--equation { min-height: min(760px, 90svh); }
.page-hero--equation .page-hero__content { min-height: min(760px, 90svh); }

/* Page sections */
.copy-section { position: relative; padding: clamp(90px, 10vw, 160px) 0; }
.copy-section--light { color: var(--paper); background-color: var(--navy-deep); }
.copy-section--dark { color: var(--paper); background: var(--navy-deep); }
.copy-section__grid { display: grid; grid-template-columns: minmax(250px, .62fr) minmax(0, 1.38fr); gap: clamp(48px, 10vw, 170px); align-items: start; }
.copy-section__heading { position: relative; }
.copy-section__body { max-width: 880px; }
.copy-section__body h3 { margin-top: 34px; color: var(--gold); }
.copy-section--dark .copy-section__body h3 { color: var(--gold); }
.copy-paragraph { margin-bottom: 19px; color: rgba(255,255,255,.7); font-size: 1.075rem; line-height: 1.75; }
.copy-paragraph--formula { margin: 30px 0; color: var(--gold); font: 600 clamp(1.2rem, 2vw, 1.65rem)/1.35 var(--mono); letter-spacing: .03em; }
.copy-section--dark .copy-paragraph--formula { color: var(--gold); }
.copy-paragraph--terms { padding: 15px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); color: rgba(255,255,255,.78); font: 500 .75rem/1.7 var(--mono); }
.copy-section--dark .copy-paragraph--terms { border-color: var(--line-dark); color: rgba(255,255,255,.78); }
.copy-paragraph--list { padding-left: 18px; border-left: 2px solid var(--accent); }
.copy-section--dark .copy-paragraph--list { border-color: var(--gold); }
.copy-section:nth-of-type(even) .copy-section__grid { grid-template-columns: minmax(0, 1.38fr) minmax(250px, .62fr); }
.copy-section:nth-of-type(even) .copy-section__heading { order: 2; }
.copy-section:nth-of-type(even) .copy-section__body { order: 1; }
.section-media { position: relative; margin: 42px 0 0; }
.section-media img, .section-media video { width: 100%; height: 320px; object-fit: cover; filter: saturate(.75) contrast(1.06); }
.section-media figcaption { position: relative; z-index: 1; margin-top: 10px; color: rgba(255,255,255,.5); font: .625rem/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.copy-section--dark .section-media figcaption { color: rgba(255,255,255,.5); }
/* Client direction: media washes into the brand navy toward its right edge
   (Counterparty & Deal Intelligence panel only). Caption stays above the veil. */
#counterparty-deal-intelligence .section-media::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 260px; pointer-events: none; background: linear-gradient(90deg, transparent 42%, oklch(21% .06 255 / .58)); }

/* Global Commerce */
.section-intro { max-width: 900px; margin-bottom: 70px; }
.section-intro > p:not(.section-kicker) { max-width: 780px; color: var(--muted); font-size: 1.1rem; }

/* Commercial arena cards — client edit (2026-08-27), replacing the earlier
   accordion tab-strip (DESIGN-SYSTEM.md §4.4's spec): all four arenas render
   as plain cards, visible simultaneously, no click-to-reveal. */
/* Homepage evidence system — each section has a distinct information role. */
.evidence-section { position: relative; padding: clamp(96px, 11vw, 168px) 0; }
.evidence-section h2 { max-width: 780px; }
.evidence-heading { display: grid; grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: clamp(48px, 9vw, 140px); align-items: end; margin-bottom: 72px; }
.evidence-heading .section-kicker { grid-column: 1 / -1; margin-bottom: -20px; }
.evidence-heading h3, .evidence-heading > p { margin: 0; }
.evidence-heading--dark { color: var(--paper); }
.evidence-heading--dark > p { color: rgba(255,255,255,.7); }

.equation-evidence { color: var(--paper); background: var(--navy-deep); }
.equation-evidence .evidence-heading h3 { color: var(--paper); font-size: clamp(2rem, 3vw, 3rem); }
.equation-evidence__layout { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(280px, .9fr); gap: clamp(48px, 9vw, 130px); align-items: center; }
.equation-evidence__media { margin: 0; }
.equation-evidence__media .section-media { margin: 0; height: auto; }
.equation-evidence__media .section-media img { height: clamp(15rem, 26.6vw, 19.08rem); }
/* Sticky notes (canvas, 2026-08-29): kicker + formula span both columns as
   a header row; the eight-stage flow sits in the copy column as a 2x4 grid,
   column flow (01-04 left, 05-08 right). */
.equation-evidence__header { margin-bottom: 36px; }
/* GUI edit (canvas, 2026-08-29): the eight-stage list was removed from the
   section outright, superseding the short-lived 2x4-grid treatment. */
/* Full-width content image replacing the section-wide background-photo
   treatment (sticky-note review, 2026-08-27): the section now carries its
   own --navy-deep background and this image sits in the content flow,
   after the process illustration, instead of behind a veil. */
.equation-evidence__full-image { display: block; width: 100%; height: auto; margin-top: clamp(48px, 8vw, 96px); aspect-ratio: 21 / 9; object-fit: cover; filter: saturate(.85) contrast(1.05); }
.copy-section__flow, .copy-section__after { margin-top: clamp(40px, 7vw, 84px); }
.equation-evidence .flow__list { background: var(--line-dark); border-color: var(--line-dark); }
.equation-evidence .flow__step { background: var(--navy-deep); }
.equation-evidence .flow__index { color: var(--accent); }
.equation-evidence .flow__caption { color: rgba(255,255,255,.62); }
.equation-evidence__copy > h3 { width: min(28.16rem, 100%); color: var(--paper); font-size: clamp(2rem, 3.5vw, 2.5rem); }
.equation-evidence__copy > .copy-paragraph { font: 400 1rem/1.625 var(--body); letter-spacing: normal; }
.animate-words { overflow: hidden; }
/* Word entrance is gated by initWordAnimation(): .is-split lands in the same
   tick as the span split (words hide), .words-visible starts the staggered
   replay when scrolled into view — so nothing animates off-screen at load
   and no restart side effects are possible. */
.animate-words.is-split .word { display: inline-block; }
.animate-words.is-split:not(.words-visible) .word { opacity: 0; transform: translateY(.4em); }
.animate-words.words-visible .word { display: inline-block; animation: word-in .5s var(--ease) forwards; }
@keyframes word-in { to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
  .animate-words.is-split .word { opacity: 1; transform: none; animation: none; }
}

.dossier-evidence { color: var(--paper); background-color: var(--navy-deep); }
.dossier-evidence__layout { display: grid; grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(50px, 9vw, 130px); align-items: start; }
.dossier-evidence__copy { position: sticky; top: 120px; }
.dossier-evidence__copy h3 { font-size: clamp(2.8rem, 5vw, 5rem); }
.evidence-assurance { margin-top: 42px; }
.dossier-panel { background: var(--navy-deep); border: 1px solid var(--line-dark); }
.dossier-panel__top { display: flex; justify-content: space-between; gap: 20px; padding: 16px 22px; color: var(--muted); border-bottom: 1px solid var(--line-dark); font: 600 .625rem/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.dossier-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); }
/* Arrow-bullet list style (reference: docs/original-landing "Six Pillars"
   capability lists, 2026-08-27) — a small leading arrow instead of a tracked
   index number, and quieter text: these are a supporting checklist, not a
   sequence, so the item's position doesn't carry meaning the way it does in
   the numbered .flow lists (Structured for Settlement, Instrument
   Intelligence), which keep their numbers. */
.dossier-checks li { display: flex; gap: 12px; align-items: flex-start; min-height: 72px; padding: 16px 22px; background: var(--navy-deep); font: 500 .8125rem/1.5 var(--body); }
.dossier-checks__text { min-width: 0; color: rgba(255,255,255,.68); }
/* Shared arrow-bullet glyph — .dossier-checks and .risk-register only; the
   numbered .flow lists (an actual sequence) keep their tracked index number. */
.list-arrow { flex-shrink: 0; color: var(--accent); font: 600 .75rem/1.4 var(--body); }
/* Client edit (2026-08-27, canvas note): background photo bottom-aligned
   (the warehouse-interior shot reads best at floor level) with a top-down
   fade to navy, rather than the flat veil .section-photo uses elsewhere. */
.dossier-evidence.section-photo .section-photo__media { object-position: bottom; }
.dossier-evidence.section-photo .section-photo__veil { background: linear-gradient(to top, transparent 0%, oklch(11% .04 255 / .92) 100%); }

.risk-evidence { color: var(--paper); background: var(--navy-deep); }
/* Client edit (2026-08-27): left column (kicker/headline/lead/closer,
   stacked) beside the register on the right, replacing the earlier
   full-width heading-over-register stack. */
.risk-evidence__layout { display: grid; grid-template-columns: minmax(280px, .85fr) minmax(0, 1.15fr); gap: clamp(48px, 8vw, 120px); align-items: start; }
.risk-evidence__copy h3 { font-size: clamp(2rem, 3.5vw, 3.5rem); }
.risk-evidence__close { margin: 28px 0 0; }
/* Red-flag register — same tile grammar as the .flow illustrations: hairline
   grid, indexed steps, gold flag dot anchoring each tile. */
.risk-register { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); }
.risk-register li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* Arrow-bullet list style (reference: docs/original-landing "Six Pillars"
   capability lists, 2026-08-27) — leading arrow in place of the tracked index
   number and the corner dot, quieter label. This is a flag register, not a
   sequence: an item's position carries no meaning, unlike the numbered .flow
   lists elsewhere on the site. */
.risk-register li { position: relative; display: flex; flex-direction: row; gap: 12px; align-items: flex-start; min-height: 118px; padding: 24px; background: var(--navy-deep); }
.risk-register .flow__label { max-width: calc(100% - 20px); color: rgba(255,255,255,.7); }
/* One designed matrix, not nine floating boxes (review finding #10): the
   hairline-grid language every other register on the site speaks, cells
   hugging their content, ring numeral as each cell's anchor. */
.risk-register--chart { grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line-dark); border: 1px solid var(--line-dark); counter-reset: risk-register; }
.risk-register--chart li { min-height: 0; padding: 1.25rem; border: 0; background: var(--navy-deep); counter-increment: risk-register; }
.risk-register--chart li:last-child:nth-child(odd) { grid-column: auto; }
.risk-register--chart .risk-register__index { display: grid; place-items: center; flex: 0 0 auto; width: 2.25rem; height: 2.25rem; margin-bottom: .85rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 400 .9rem/1 var(--display); }
.risk-register--chart li { flex-direction: column; }
.risk-register--chart .list-arrow { display: none; }
.risk-register--chart .flow__label { max-width: none; color: var(--paper); font-size: .75rem; line-height: 1.45; }

.alignment-evidence { color: var(--paper); background-color: var(--navy-deep); }
.alignment-evidence__layout { display: grid; grid-template-columns: minmax(300px, .8fr) minmax(0, 1.2fr); gap: clamp(50px, 9vw, 140px); align-items: center; }
.alignment-evidence__layout h3 { font-size: clamp(2rem, 3vw, 3rem); }
.alignment-evidence__layout > div:first-child > p:last-child { color: var(--muted); font-size: .875rem; line-height: 1.75; }
.alignment-evidence h3 { font-weight: 400; }
.alignment-chain { display: grid; grid-template-columns: 1fr 42px 1.12fr 42px 1fr; align-items: center; padding: 36px; }
/* Client edit (2026-08-27): larger, more deliberately styled hover targets —
   a visible border/tint on rollover, not just the lift, plus a bigger,
   display-styled index number instead of the same tiny mono caption size as
   the small print underneath it. */
.alignment-chain > div { min-height: 220px; padding: 32px 22px; border: 1px solid var(--line-dark); transition: transform var(--dur-move) var(--ease), border-color var(--dur-move) var(--ease), background-color var(--dur-move) var(--ease); }
.alignment-chain > div:hover { border-color: var(--accent); background-color: color-mix(in srgb, var(--accent) 8%, transparent); }
.alignment-chain > i { height: 1px; background: var(--accent); }
/* 1.5rem to match .arena-strip__num / .arena-strip__spine b (Apple-design
   review, 2026-08-27) - same role (a small numeral heading a card in a
   small set), was 2rem for no reason tied to this component specifically. */
.alignment-chain > div > span { display: block; color: var(--accent); font: 400 1.5rem/1 var(--display); }
.alignment-chain small { display: block; color: var(--muted); font: .625rem/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.alignment-chain strong { display: block; margin: 22px 0 12px; font: 400 1.55rem/1.1 var(--display); }
.alignment-chain__focus > span, .alignment-chain__focus strong { color: var(--accent); }
.alignment-chain__focus small { color: var(--muted); }
.alignment-chain > div.alignment-chain__focus { border-color: var(--accent); }
.alignment-chain > h4 { grid-column: 1 / -1; margin: 32px 0 0; text-align: center; }

.institution-evidence { color: var(--paper); background: var(--navy-deep); }
.institution-evidence__layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: clamp(48px, 8vw, 120px); align-items: center; }
.institution-evidence__media .section-media { margin: 0; }
.institution-evidence__media .section-media video, .institution-evidence__media .section-media img { height: 430px; }
.institution-evidence__media .section-media figcaption { color: rgba(255,255,255,.5); }
.institution-lockup { position: relative; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .75rem; margin-top: 1.875rem; }
.institution-lockup::before { content: ""; position: absolute; z-index: 0; top: 2.3rem; right: 8%; left: 8%; height: 1px; background: var(--accent); opacity: .7; }
.institution-lockup__node { position: relative; z-index: 1; display: flex; min-height: 7.75rem; flex-direction: column; align-items: center; gap: .8rem; padding: 1rem .65rem; color: var(--paper); text-align: center; }
.institution-lockup__node:not(:last-child)::after { content: ""; position: absolute; top: 2.3rem; right: -.8rem; width: .8rem; height: 1px; background: var(--accent); opacity: .7; }
.institution-lockup__node b { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; color: var(--navy); background: var(--map-gold); border-radius: 50%; font: 400 .75rem/1 var(--mono); transition: color .2s ease, background-color .2s ease, border-color .2s ease; }
/* Client comment eIGVWHF-P6y3 (2026-09-10): remove the node's box, hide the
   title until rollover, invert the badge's orange/blue on rollover. */
.institution-lockup__node strong { font: 500 .7rem/1.35 var(--body); opacity: 0; transition: opacity .2s ease; }
.institution-lockup__node:hover strong, .institution-lockup__node:focus-visible strong { opacity: 1; }
.institution-lockup__node:hover b, .institution-lockup__node:focus-visible b { color: var(--navy-deep); background: var(--accent); border-color: var(--accent); }
.institution-evidence__copy h3 { font-size: clamp(3rem, 5vw, 5.2rem); }
/* --accent on --ivory is 2.23:1, below the 4.5:1 AA floor for text this
   small (13px) — see DESIGN-TOKENS.md §6. The client-requested orange H4
   style is safe on dark surfaces only; light surfaces fall back to --slate,
   same weight/tracking/case, so the H4 identity stays consistent everywhere
   without shipping unreadable text if a future H4 lands on a light section. */
/* Section closers render as h3.section-closer to avoid h2-to-h4 level skips
   in the heading outline; the visual treatment is identical to h4. */
/* Outweighs the dark-section h3 color rule so closers keep the h4 identity. */

.relationship-conviction { padding: clamp(90px, 10vw, 150px) 0; color: var(--paper); background: var(--navy-deep); border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); text-align: center; }
.relationship-conviction .page-shell { max-width: 900px; }
.relationship-conviction > div > p:not(.section-kicker) { margin-bottom: 18px; color: rgba(255,255,255,.62); font: 400 clamp(1.2rem, 2vw, 1.65rem)/1.3 var(--display); }

/* NEXUS */
/* Client edit (design canvas review, 2026-08-27): the first two applications
   of the H5 style-guide proposal (DESIGN-SYSTEM.md §3.2a) — accent-orange
   closers, done by hand in the canvas before the full H5 pass ships. */
.nexus-routes { padding-top: 120px; }
/* Client edit (design canvas review, 2026-08-27): the merged intro heading
   (see nexusPage() in render-pages.mjs) reads smaller than the default h2
   clamp to fit its now-longer sentence. Desktop only; the existing mobile
   rule (.nexus-routes .section-intro h2 at 600px) is unaffected. */
.nexus-routes__heading { font-size: 2.25rem; }
.nexus-route-list { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--line-dark); }
.nexus-route { display: grid; grid-template-columns: 45px 1fr 28px; gap: 18px; align-items: start; min-height: 190px; padding: 28px 34px 28px 0; color: var(--paper); border-bottom: 1px solid var(--line-dark); text-decoration: none; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.nexus-route:nth-child(odd) { border-right: 1px solid var(--line-dark); }
.nexus-route:nth-child(even) { padding-left: 34px; }
.nexus-route:hover { background: rgba(255,255,255,.06); }
.nexus-route:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.nexus-route:hover h3 { color: var(--accent); }
.nexus-route__index { color: var(--muted); font: .6875rem/1 var(--mono); }
.nexus-route h3 { margin: 0 0 12px; font-size: clamp(1.65rem, 2.5vw, 2.6rem); }
.nexus-route p { margin: 0; color: var(--muted); font-size: .75rem; line-height: 1.6; }
.nexus-route__arrow { color: var(--accent); font-size: 1.25rem; transition: transform var(--dur-move) var(--ease); }
.nexus-route__close { display: flex; align-items: center; justify-content: space-between; gap: 30px; margin-top: 60px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.nexus-route__inline-link { color: var(--accent); font: 500 .75rem/1 var(--body); font-style: normal; letter-spacing: .05em; text-decoration: none; text-transform: uppercase; white-space: nowrap; }
.nexus-route__inline-link:hover { text-decoration: underline; }

/* ============================================================
   Interactive Bank Map — /markets/
   ============================================================ */
.bank-map__layout { display: grid; grid-template-columns: minmax(0, 340px) 1fr; gap: 48px; align-items: start; }
i.bank-map__tile { display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: -4px; cursor: default; }
.bank-map__tile--p1 { background: var(--tier-elite); }
.bank-map__tile--p2 { background: var(--tier-2); }
.bank-map__tile--p3 { background: var(--tier-3); }
.bank-map__tile--p4 { background: var(--tier-4); }
/* Restricted reads as an outline, not a fill — visible on navy without
   pretending to be a rated tier. */
.bank-map__tile--p5 { background: transparent; border: 1px solid var(--tier-3); box-sizing: border-box; }

/* Map surface — off-white panel per docs/asset-audit.md §5, reusing the
   site's ivory + paper-texture pair rather than a new color. */
.bank-map__map { position: relative; padding: 28px; background-color: var(--navy-deep); border: 1px solid var(--line-dark); }
.bank-map__region-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 20px; padding: 0; list-style: none; }
.bank-map__region-btn { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; color: var(--paper); background: var(--navy-deep); border: 1px solid var(--line-dark); cursor: pointer; text-align: left; transition: border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease); }
.bank-map__region-btn:hover, .bank-map__region-btn:focus-visible { border-color: var(--map-gold-dark); }
.bank-map__region-btn[aria-pressed="true"] { color: var(--paper); background: var(--map-slate); border-color: var(--map-slate); }
.bank-map__region-btn-name { font: 700 .6875rem/1.2 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.bank-map__region-btn-meta { font: 400 .625rem/1.3 var(--mono); opacity: .7; }
.bank-map__zoom-out { display: inline-flex; margin: 0 0 16px; padding: 6px 12px; color: var(--paper); background: transparent; border: 1px solid var(--line-dark); font: 500 .6875rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.bank-map__zoom-out:hover { border-color: var(--map-gold-dark); }
.bank-map__svg { width: 100%; height: auto; overflow: visible; }
.bank-map__region { cursor: pointer; }
.bank-map__region-shape { stroke: var(--ivory); stroke-width: 1.5; opacity: 1; transition: filter var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease); }
.bank-map__region-label { fill: var(--paper); font: 700 .8125rem/1 var(--mono); letter-spacing: .04em; pointer-events: none; }
.bank-map__region--p1 .bank-map__region-shape { fill: var(--tier-elite); stroke-width: 2; }
.bank-map__region--p1 .bank-map__region-label,
.bank-map__region--p2 .bank-map__region-label { fill: var(--navy); }
.bank-map__region--p2 .bank-map__region-shape { fill: var(--tier-2); }
.bank-map__region--p3 .bank-map__region-shape { fill: var(--tier-3); }
.bank-map__region--p4 .bank-map__region-shape { fill: var(--tier-4); }
.bank-map__region--p5 .bank-map__region-shape { fill: color-mix(in srgb, var(--tier-4) 40%, transparent); stroke-dasharray: 4 3; }
.bank-map__region:hover .bank-map__region-shape,
.bank-map__region:focus-visible .bank-map__region-shape { filter: brightness(1.15); stroke-width: 3; }
.bank-map__region.is-selected .bank-map__region-shape { stroke: var(--map-gold-dark); stroke-width: 3; }
.bank-map__region.is-dimmed .bank-map__region-shape { opacity: .28; }
.bank-map__region.is-region-active .bank-map__region-shape { filter: brightness(1.1); }
/* transform-box: fill-box or an SVG shape scales about the viewBox origin and
   slides off-target instead of dipping in place. */
.bank-map__region:active .bank-map__region-shape { transform: scale(var(--press-scale)); transform-box: fill-box; transform-origin: center; transition: transform var(--dur-press) var(--ease-press); }
.bank-map__connector { fill: none; stroke: var(--map-gold-dark); stroke-width: 2; opacity: 0; transition: opacity var(--dur-move) var(--ease); }
.bank-map__connector.is-drawn { opacity: 1; }
.bank-map__pin-ring { fill: var(--map-gold); stroke: var(--navy); stroke-width: 1.5; }
.bank-map__pin-dot { fill: var(--navy); }

/* Popup panel — navy card per the reference photo, sits beside the ivory map.
   align-self: start (review finding #6): the drill-down detail no longer
   inherits the bank list's full ~1000px height as an empty box. */
.bank-map__panel { align-self: start; padding: 32px; background: var(--navy-deep); border: 1px solid var(--line-dark); }
.bank-map__panel-header { display: flex; align-items: flex-start; gap: 18px; margin-bottom: 10px; }
.bank-map__code { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; color: var(--navy); background: var(--map-gold); border-radius: 50%; font: 700 .8125rem/1 var(--mono); letter-spacing: .04em; }
.bank-map__panel-header h3 { margin: 0 0 6px; color: var(--paper); font-size: clamp(1.5rem, 2.2vw, 2.1rem); }
.bank-map__view { margin: 0; color: rgba(255,255,255,.6); font: 500 .6875rem/1.4 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.bank-map__stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0; padding: 14px 0; border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.bank-map__stat { display: flex; flex-direction: column; gap: 2px; text-align: center; }
.bank-map__stat-value { color: var(--map-gold); font: 700 1.125rem/1.1 var(--body); }
.bank-map__stat-label { color: rgba(255,255,255,.55); font: 500 .625rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.bank-map__notes { max-width: 640px; margin: 14px 0 18px; color: rgba(255,255,255,.72); font: 400 .8125rem/1.6 var(--body); }
.bank-map__restricted-note { margin: 10px 0 18px; padding: 12px 16px; color: var(--paper); background: color-mix(in oklch, var(--error) 18%, transparent); border-left: 3px solid var(--error); font: 500 .75rem/1.6 var(--body); }
.bank-map__list-heading { margin: 0 0 8px; color: rgba(255,255,255,.55); font: 700 .6875rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.bank-map__bank-list { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.bank-map__bank { display: grid; grid-template-columns: 14px 1fr auto auto; align-items: center; gap: 12px; width: 100%; padding: 12px 0; color: var(--paper); background: transparent; border: 0; border-bottom: 1px solid var(--line-dark); font: 400 .8125rem/1.4 var(--body); text-align: left; cursor: pointer; }
.bank-map__bank:hover, .bank-map__bank:focus-visible { background: color-mix(in oklch, var(--map-gold) 10%, transparent); }
/* Every tier slug from bank-map.json maps onto the ramp — before this, all
   non-sanctioned dots computed to the same gold (fake data color). */
.bank-map__bank-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tier-elite); }
.bank-map__bank-dot--aa-elite, .bank-map__bank-dot--aa-elite-regional { background: var(--tier-elite); }
.bank-map__bank-dot--tier-2 { background: var(--tier-2); }
.bank-map__bank-dot--tier-2-3 { background: var(--tier-mid); }
.bank-map__bank-dot--tier-3 { background: var(--tier-3); }
.bank-map__bank-dot--tier-4, .bank-map__bank-dot--tier-4-re-entry { background: var(--tier-4); }
.bank-map__bank-dot--avoid-sanctioned { background: var(--error); }
.bank-map__bank-name { font-weight: 500; }
.bank-map__bank-rating { color: var(--map-gold); font: 700 .75rem/1 var(--mono); white-space: nowrap; }
.bank-map__bank-tier { color: rgba(255,255,255,.55); font: 500 .625rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.bank-map__empty { color: rgba(255,255,255,.6); font: 400 .8125rem/1.6 var(--body); }
.bank-map__legend { display: flex; flex-wrap: wrap; gap: 20px; margin: 32px 0 0; padding-top: 24px; border-top: 1px solid var(--line-dark); color: var(--muted); font: 500 .6875rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; }
.bank-map__legend-item { display: flex; align-items: center; }

/* Bank detail (level 4) — swaps in for the bank list inside the same panel. */
.bank-map__panel-detail { color: var(--paper); }
.bank-map__back { display: inline-flex; margin: 0 0 16px; padding: 6px 0; color: var(--map-gold); background: transparent; border: 0; font: 500 .75rem/1 var(--body); letter-spacing: .04em; text-transform: uppercase; cursor: pointer; }
.bank-map__back:hover, .bank-map__back:focus-visible { color: var(--paper); }
.bank-map__detail-body h4 { margin: 0 0 4px; color: var(--paper); font-size: clamp(1.2rem, 1.8vw, 1.6rem); }
.bank-map__detail-swift { margin: 0 0 18px; color: rgba(255,255,255,.55); font: 400 .6875rem/1 var(--mono); letter-spacing: .04em; }
.bank-map__detail-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin: 0 0 18px; }
.bank-map__detail-item { display: flex; flex-direction: column; gap: 2px; }
.bank-map__detail-item span:first-child { color: rgba(255,255,255,.55); font: 500 .625rem/1.3 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.bank-map__detail-item span:last-child { color: var(--paper); font: 500 .8125rem/1.4 var(--body); }
.bank-map__detail-item .bank-map__stat-value { color: var(--map-gold); }
/* Detail stat card (review finding #6): score as the dominant serif numeral,
   tier as a ramp-colored chip. */
.bank-map__detail-lead { display: flex; align-items: baseline; gap: 18px; margin: 0 0 22px; }
.bank-map__detail-score b { color: var(--map-gold); font: 400 clamp(2.6rem, 4vw, 3.4rem)/1 var(--display); letter-spacing: -.02em; }
.bank-map__detail-score span { margin-left: 6px; color: rgba(255,255,255,.55); font: 500 .625rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.bank-map__detail-tier { display: inline-block; padding: 6px 12px; background: var(--tier-elite); color: var(--navy); font: 600 .625rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.bank-map__detail-tier--tier-2 { background: var(--tier-2); }
.bank-map__detail-tier--tier-2-3 { background: var(--tier-mid); }
.bank-map__detail-tier--tier-3 { background: var(--tier-3); color: var(--paper); }
.bank-map__detail-tier--tier-4, .bank-map__detail-tier--tier-4-re-entry { background: var(--tier-4); color: var(--paper); }
.bank-map__detail-tier--avoid-sanctioned { background: var(--error); color: var(--paper); }

/* One World Equation — three editorial chapters and a final manifesto.
   Each chapter has a different information role: ledger, matrix, map. */
.equation-chapter { position: relative; overflow: hidden; padding: clamp(6rem, 10vw, 10rem) 0; color: var(--paper); background: var(--navy-deep); border-top: 1px solid var(--line-dark); }
.equation-chapter--equality { background: linear-gradient(145deg, color-mix(in oklch, var(--navy-deep) 91%, var(--navy-surface)) 0%, var(--navy-deep) 72%); }
.equation-chapter__heading { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: start; margin-bottom: clamp(3.5rem, 7vw, 7rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }
.equation-chapter__index { color: var(--accent); font: 400 clamp(1.45rem, 2.2vw, 2rem)/1 var(--display); }
.equation-chapter__heading .section-kicker { margin: .2rem 0 1.2rem; }
.equation-chapter__heading h2 { width: min(61rem, 100%); margin: 0; color: var(--paper); font: 400 clamp(2.8rem, 5.6vw, 5.8rem)/.96 var(--display); letter-spacing: -.035em; text-transform: none; text-wrap: balance; }
.equation-chapter__image { position: relative; margin: 0; overflow: hidden; background: var(--navy-surface); }
.equation-chapter__image::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 45%, oklch(11% .04 255 / .4) 100%); }
.equation-chapter__image img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.72) contrast(1.08); }
.equation-chapter__closer { margin: 2.25rem 0 0; color: var(--accent); font: 500 .68rem/1.5 var(--body); letter-spacing: .15em; text-transform: uppercase; }

.equation-capabilities__layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(22rem, .95fr); gap: clamp(2.5rem, 7vw, 7rem); align-items: stretch; }
.equation-chapter__image--port { min-height: 31rem; }
.equation-capability-ledger { margin: 0; padding: 0; border-top: 1px solid var(--line-dark); list-style: none; }
.equation-capability-ledger li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: 1rem; align-items: center; min-height: 6.2rem; border-bottom: 1px solid var(--line-dark); }
.equation-capability-ledger span { color: var(--accent); font: 500 .72rem/1 var(--body); letter-spacing: .12em; }
.equation-capability-ledger strong { color: var(--paper); font: 400 clamp(1.15rem, 1.8vw, 1.55rem)/1.25 var(--display); }
.equation-capabilities__statement { display: grid; grid-template-columns: minmax(18rem, .9fr) minmax(0, 1.1fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; margin-top: clamp(4rem, 8vw, 7rem); padding-top: clamp(2.5rem, 5vw, 4.5rem); border-top: 1px solid var(--line-dark); }
.equation-capabilities__statement h3 { margin: 0; color: var(--gold); font: 400 clamp(2rem, 3.5vw, 3.7rem)/1.04 var(--display); letter-spacing: -.02em; text-transform: none; text-wrap: balance; }
.equation-capabilities__statement .copy-paragraph:last-child { margin-bottom: 0; }

.equation-equality__layout { display: grid; grid-template-columns: minmax(18rem, .8fr) minmax(0, 1.2fr); gap: clamp(3rem, 8vw, 8rem); align-items: center; }
.equation-equality__intro { max-width: 33rem; }
.equation-equality__intro .copy-paragraph { font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.equation-chapter__image--city { height: clamp(23rem, 37vw, 35rem); }
.equation-role-matrix { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: clamp(4rem, 8vw, 7rem) 0 0; padding: 0; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); list-style: none; }
.equation-role-matrix li { min-height: 12rem; padding: 1.5rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.equation-role-matrix span { display: block; margin-bottom: 2.75rem; color: var(--accent); font: 400 1.15rem/1 var(--display); }
.equation-role-matrix p { margin: 0; color: var(--paper); font: 400 clamp(1rem, 1.45vw, 1.25rem)/1.35 var(--display); }
.equation-equality__principle { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(18rem, .75fr); gap: clamp(3rem, 9vw, 9rem); align-items: end; margin-top: clamp(4rem, 8vw, 7rem); }
.equation-equality__principle h3 { margin: 0; color: var(--gold); font: 400 clamp(2.3rem, 4.4vw, 4.7rem)/1 var(--display); letter-spacing: -.025em; text-transform: none; text-wrap: balance; }
.equation-equality__principle .equation-chapter__closer { margin: 0; padding-bottom: .5rem; }

.equation-opportunity__layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(19rem, .72fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; }
.equation-opportunity__copy { max-width: 40rem; padding-top: clamp(1rem, 4vw, 3rem); }
.equation-opportunity__copy h3 { margin: 0 0 2.5rem; color: var(--gold); font: 400 clamp(2.2rem, 4vw, 4.1rem)/1.02 var(--display); letter-spacing: -.025em; text-transform: none; text-wrap: balance; }
.equation-chapter__image--convergence { height: clamp(34rem, 54vw, 48rem); }
.equation-convergence-map { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(4rem, 9vw, 8rem) 0 0; padding: 0; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); list-style: none; }
.equation-convergence-map li { min-height: 12.5rem; padding: 1.5rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
.equation-convergence-map__index { display: block; margin-bottom: 2rem; color: var(--accent); font: 400 1.2rem/1 var(--display); }
.equation-convergence-map strong { display: block; color: var(--paper); font: 600 .75rem/1.4 var(--body); letter-spacing: .08em; text-transform: uppercase; }
.equation-convergence-map p { margin: .75rem 0 0; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.5; }
.equation-convergence-map__close { display: flex; flex-direction: column; justify-content: space-between; background: color-mix(in oklch, var(--navy-deep) 86%, var(--navy-surface)); }

.manifesto-panel.equation-manifesto { position: relative; min-height: min(880px, 92svh); overflow: hidden; padding: clamp(7rem, 12vw, 12rem) 0; color: var(--paper); text-align: left; background: radial-gradient(circle at 82% 18%, color-mix(in oklch, var(--navy-surface) 42%, transparent) 0%, transparent 35%), var(--navy-deep); border-top: 1px solid var(--line-dark); }
.equation-manifesto__monogram { position: absolute; right: -2vw; top: -12vw; color: rgb(255 255 255 / .025); font: 400 clamp(28rem, 58vw, 54rem)/1 var(--display); pointer-events: none; }
.equation-manifesto .page-shell { position: relative; z-index: 1; }
.equation-manifesto .section-kicker { margin-bottom: clamp(2rem, 5vw, 4rem); }
.equation-manifesto h2 { width: min(67rem, 100%); margin: 0; color: var(--gold); font: 400 clamp(3rem, 6.4vw, 6.8rem)/.94 var(--display); letter-spacing: -.04em; text-transform: none; text-wrap: balance; }
.equation-manifesto__principle { display: grid; grid-template-columns: minmax(14rem, .55fr) minmax(0, 1.45fr); gap: clamp(3rem, 9vw, 9rem); align-items: start; margin-top: clamp(5rem, 10vw, 9rem); padding-top: clamp(2.5rem, 5vw, 4rem); border-top: 1px solid var(--line-dark); }
.equation-manifesto__principle h3 { margin: 0; color: var(--accent); font: 500 .72rem/1.5 var(--body); letter-spacing: .15em; text-transform: uppercase; }
.equation-manifesto__principle p { margin: 0; color: var(--paper); font: 400 clamp(2.2rem, 4.3vw, 4.6rem)/1 var(--display); letter-spacing: -.025em; text-wrap: balance; }
.equation-manifesto__close { margin: clamp(4rem, 8vw, 7rem) 0 0; color: var(--accent); font: 500 .68rem/1.5 var(--body); letter-spacing: .16em; text-transform: uppercase; }

/* Contact */
.contact-band { padding: clamp(90px, 10vw, 150px) 0; color: var(--paper); background: var(--navy-deep); }
.contact-band__grid { display: grid; grid-template-columns: .78fr 1.22fr; gap: clamp(48px, 9vw, 140px); align-items: start; }
/* No form currently — a replacement contact mechanism is being designed
   separately (see contactBand() in scripts/render-pages.mjs). Until it
   ships, the intro copy is the only child, so center it as its own column. */
.contact-band__grid:has(> :only-child) { grid-template-columns: 1fr; max-width: 620px; margin: 0 auto; text-align: center; }
.contact-band__grid:has(> :only-child) > div > p:not(.section-kicker) { max-width: none; margin: 0 auto; }
.contact-band h2 { color: var(--paper); }
.contact-band__grid > div > p:not(.section-kicker) { max-width: 420px; color: rgba(255,255,255,.68); }
.consultation-form { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: clamp(26px, 4vw, 48px); color: var(--ink); background: var(--paper); }
.consultation-form__field { display: flex; flex-direction: column; gap: 8px; }
.consultation-form__field--full { grid-column: 1 / -1; }
.consultation-form label { color: var(--navy); font: 600 .625rem/1.3 var(--body); letter-spacing: .12em; text-transform: uppercase; }
.consultation-form label span { color: var(--slate); }
.consultation-form__hint { margin: 0; color: var(--muted-ink); font: 400 .75rem/1.6 var(--body); }
.consultation-form input:not([type=checkbox]), .consultation-form select, .consultation-form textarea { width: 100%; padding: 13px 14px; color: var(--ink); background: var(--ivory); border: 1px solid var(--line-light); border-radius: 0; }
.consultation-form textarea { min-height: 125px; resize: vertical; }
.consultation-form input:not([type=checkbox]):focus, .consultation-form select:focus, .consultation-form textarea:focus { border-color: var(--accent); outline: 2px solid rgba(242,142,66,.22); outline-offset: 0; }
.consultation-form__privacy label { display: flex; flex-direction: row; align-items: flex-start; gap: 10px; color: var(--muted-ink); font-size: .6875rem; font-weight: 400; letter-spacing: 0; line-height: 1.45; text-transform: none; }
.consultation-form__privacy input { flex: 0 0 auto; width: 17px; height: 17px; accent-color: var(--accent); }
.consultation-form__privacy-error { display: block; color: var(--error); font-size: .6875rem; }
.consultation-form__submit { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 18px; }
.consultation-form__success { display: flex; flex: 1 1 180px; flex-direction: column; gap: 4px; padding: 12px 0; color: #24543c; font-size: .75rem; }
.consultation-form__success strong { font: 600 1.5rem/1 var(--display); }
.form-error { color: var(--error); font-size: .6875rem; }
.is-hidden { display: none !important; }

/* Consultation popup (client decision, 2026-08-29): the form returns as a
   light card — inline at the bottom of the NEXUS page for crawlers/no-JS,
   promoted into a <dialog> by initConsultationDialog(). The card styling
   lives on .consultation-panel__inner so it is identical in both homes;
   .consultation-form's own card chrome is suppressed inside it. */
.consultation-panel { padding: clamp(70px, 8vw, 110px) 0; border-top: 1px solid var(--line-dark); }
.consultation-panel__inner { position: relative; width: min(680px, 100%); margin: 0 auto; padding: clamp(26px, 4vw, 44px); background: var(--paper); }
.consultation-panel__inner .consultation-form { padding: 0; background: transparent; }
.consultation-panel__intro { margin-bottom: 28px; }
/* Small text on a light surface takes --slate, never --accent —
   DESIGN-TOKENS.md §6. */
.consultation-panel__kicker { margin: 0 0 14px; color: var(--slate); font: 500 .66rem/1.2 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.consultation-panel__intro h3 { margin: 0; color: var(--ink); font: 400 clamp(1.6rem, 2.4vw, 2.2rem)/1.08 var(--display); letter-spacing: -.015em; }
.consultation-dialog { width: min(680px, calc(100vw - 32px)); max-height: min(88svh, 60rem); margin: auto; padding: 0; border: 0; background: transparent; overflow-y: auto; }
.consultation-dialog .consultation-panel__inner { width: 100%; }
/* Materialize, don't just fade (apple-design §12): the scrim's blur and tint
   arrive together on open, and the exit mirrors the entrance path exactly
   (apple-design §7 — leave the way you came, same axis, inverse curve). The
   exit is transition-driven, so no JS defers the close: the base rule carries
   the exit timing, [open] overrides it with the entrance, and @starting-style
   supplies the from-state. `overlay` rides in the transition list alongside
   `display` because a showModal() dialog lives in the top layer — without it
   the element is yanked out of the top layer the instant [open] is removed and
   the exit plays underneath the page. The backdrop keeps a constant blur and
   cross-fades: interpolating the radius re-blurred the whole viewport every
   frame, and blur is not a composited property. */
.consultation-dialog { opacity: 0; transform: translateY(16px); transition: opacity .25s var(--ease), transform .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete; }
.consultation-dialog[open] { opacity: 1; transform: none; transition: opacity .4s var(--ease), transform .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete; }
@starting-style {
  .consultation-dialog[open] { opacity: 0; transform: translateY(16px); }
}
.consultation-dialog::backdrop { background: oklch(11% .04 255 / .8); backdrop-filter: blur(10px); opacity: 0; transition: opacity .25s var(--ease), overlay .25s allow-discrete, display .25s allow-discrete; }
.consultation-dialog[open]::backdrop { opacity: 1; transition: opacity .4s var(--ease), overlay .4s allow-discrete, display .4s allow-discrete; }
@starting-style {
  .consultation-dialog[open]::backdrop { opacity: 0; }
}
/* 44px minimum tap target; instant press feedback on pointer-down. */
.consultation-dialog__close { position: absolute; z-index: 2; top: 6px; right: 6px; display: grid; place-items: center; width: 44px; height: 44px; color: var(--muted-ink); background: transparent; border: 0; font: 400 1.5rem/1 var(--body); cursor: pointer; transition: color var(--dur-fast) var(--ease); }
.consultation-dialog__close:hover, .consultation-dialog__close:focus-visible { color: var(--ink); }
.consultation-dialog__close:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
[dir="rtl"] .consultation-dialog__close { right: auto; left: 6px; }
body.is-dialog-open { overflow: hidden; }
/* Focus is a response, not a state swap — inputs ease into their focus ring. */
.consultation-form input:not([type=checkbox]), .consultation-form select, .consultation-form textarea { transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }


/* Footer */
.site-footer { padding: 70px 0 26px; color: var(--paper); background: var(--navy-deep); }
/* Client edit (design canvas review, 2026-08-27): NEXUS only, a deliberate
   exception to the site-wide single-navy-background rule (DESIGN-TOKENS.md
   §7). The logo swap to the full-color mark lives in footer()'s `meta.key`
   check in render-pages.mjs — a white logo would be invisible here.
   Two of the three colors set in the canvas failed WCAG AA against this
   background and were adjusted, same hue, to the nearest passing shade:
   kicker #FF6700 measured 2.58:1 (needs 4.5:1 at this size) -> #b84900 at
   4.65:1; legal line rgba(0,0,0,.48) measured 3.61:1 -> .55 at 4.62:1. Body
   text at rgba(0,0,0,.58) already passed (5.15:1) and is unchanged. */
/* Client direction (2026-08-27): pale-yellow footer on every page, not just
   NEXUS. --accent is only 2.13:1 on this ground, so kickers and links use
   #b84900 (4.65:1) — the on-light accent NEXUS already established. */
.site-footer { color: var(--navy); background: #F6F1DF; }
.site-footer .section-kicker { color: #b84900; }
.site-footer__legal { color: rgba(0,0,0,.55); border-top-color: rgba(0,0,0,.14); }
.site-footer__legal span { color: rgba(0,0,0,.55); }
.site-footer__legal-links { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer__legal-links a { color: rgba(0,0,0,.62); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__legal-links a:hover, .site-footer__legal-links a:focus-visible { color: #b84900; }
.site-footer__legal { display: flex; justify-content: space-between; gap: 30px; padding-top: 20px; color: rgba(255,255,255,.48); border-top: 1px solid var(--line-dark); font: .625rem/1.5 var(--mono); }

/* Footer contact bar (client mockup, comment 9oQxq483vzJB): icon row +
   dotted rule running to the tagline. #2A6DB0 is a one-off brand blue from
   the mockup, not the site's orange accent — 5.4:1 on the #F6F1DF ground.
   Client comments (2026-09-15) folded the old three-column grid above this
   bar into it — logo first, no border-top left to separate from (nothing
   sits above it in the footer any more). */
.site-footer__contact { display: flex; flex-wrap: wrap; align-items: center; gap: 29px; padding: 33px 0; color: rgba(0,0,0,.68); font-size: .75rem; }
.site-footer__contact-item { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none; line-height: 1.35; }
.site-footer__contact-item svg { flex-shrink: 0; width: 1.15rem; height: 1.15rem; color: #2A6DB0; }
.site-footer__contact-item strong { color: var(--navy); }
.site-footer__contact-logo img { display: block; height: 2.125rem; width: auto; }
.site-footer__contact-divider { width: 1px; height: 1.6rem; background: rgba(0,0,0,.16); }
/* Client comment lWxLksDttP0B (2026-09-15): "reduce the dotted line by 25%".
   The rule is a flex-grow filler with no fixed length of its own, so the
   client's follow-up direction was to get there by widening the padding
   (gap) around the items it sits between instead of shrinking its own
   border — more gap leaves less remaining space for it to grow into. */
.site-footer__contact-rule { flex: 1 1 3rem; min-width: 2rem; height: 0; border-top: 2px dotted rgba(0,0,0,.3); }
.site-footer__contact-tagline { color: var(--navy); font: 700 .75rem/1 var(--mono); letter-spacing: .08em; white-space: nowrap; }
@media (max-width: 700px) {
  .site-footer__contact { gap: 14px; }
  .site-footer__contact-divider { display: none; }
  .site-footer__contact-rule { flex-basis: 100%; order: 10; margin-top: 4px; }
}

/* Scroll entrances — one shared IntersectionObserver driver (initMotion in
   app.js). JS marks targets .motion-pending BEFORE observing, so with JS off
   or before hydration everything is simply visible: no blank-page trap.
   Stagger is per-element inline transition-delay set by initMotion, capped
   at 5 steps, and cleared on transitionend so later hover/focus transitions
   are never delayed. */
[data-motion~="fade-up"] { transition: opacity var(--dur-enter) var(--ease), translate var(--dur-enter) var(--ease); }
.motion-pending[data-motion~="fade-up"] { opacity: 0; translate: 0 16px; }
.motion-pending[data-motion~="fade-up"].motion-in { opacity: 1; translate: 0 0; }

/* Splash entrance — rendered hidden, revealed by app.js */
[hidden] { display: none !important; }
.splash { position: fixed; z-index: 60; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; isolation: isolate; color: var(--paper); background: var(--navy-deep); }
/* Client direction: give the splash its own imagery — same veil/grain
   layering as .page-hero, scoped to the splash's fixed full-viewport box. */
.splash__media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(1.1) contrast(1.1); }
/* Plays once over .splash__media, then fades to reveal it (client clip,
   2026-08-28) - opaque by default so it hides the image beneath until
   initSplash() adds .is-faded on the video's "ended" event. */
.splash__video { position: absolute; z-index: -2; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 1; transition: opacity 1.1s var(--ease); }
.splash__video.is-faded { opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: reduce) {
  .splash__video { display: none; }
}
.splash__veil { position: absolute; z-index: -2; inset: 0; background: oklch(11% .04 255 / .82); }
.splash__skip { position: absolute; z-index: 2; top: 24px; right: 24px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 16px; color: rgba(255,255,255,.7); background: transparent; border: 1px solid rgba(255,255,255,.3); border-radius: 0; font: 500 .625rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.splash__skip:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.splash__skip:hover, .splash__skip:focus-visible { color: var(--paper); border-color: rgba(255,255,255,.6); }
.splash__inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 28px; padding: 40px; text-align: center; }
.splash__logo { width: min(320px, 62vw); height: auto; animation: splash-rise .9s var(--ease) both; }
.splash__line { margin: 0; color: var(--accent); font: 400 clamp(.68rem, 1.5vw, .84rem)/1.6 var(--body); letter-spacing: .3em; text-transform: uppercase; animation: splash-rise .9s var(--ease) .25s both; }
.splash__enter { margin-top: 8px; padding: 15px 32px; color: var(--paper); background: transparent; border: 1px solid var(--accent); border-radius: 0; font: 600 .6875rem/1 var(--body); letter-spacing: .16em; text-transform: uppercase; cursor: pointer; animation: splash-rise .9s var(--ease) .5s both; transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.splash__enter:hover { color: var(--navy); background: var(--accent); }
.splash__enter:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
/* Client edit (2026-08-27): "for now" splash variant — see splash() in
   render-pages.mjs. No .splash__veil/.splash__inner in this markup (the
   supplied graphic carries its own logo/headline), so the enter button is
   positioned standalone, and it's filled gold rather than the outline
   treatment above since it now sits directly on busy photographic detail. */
.splash--custom .splash__media { object-fit: contain; filter: none; }
.splash--custom .splash__video { object-fit: contain; }
/* The base rule's `splash-rise` keyframe animates `transform` directly, which
   would clobber the static translateX(-50%) centering below once it plays —
   this variant needs its own keyframe that carries the offset through both
   ends of the animation. */
.splash--custom .splash__enter { position: absolute; z-index: 2; left: 50%; bottom: 48px; transform: translateX(-50%); margin-top: 0; color: var(--navy); background: var(--map-gold); border-color: var(--map-gold); box-shadow: 0 0 0 1px color-mix(in srgb, var(--map-gold) 38%, transparent); animation: splash-rise-center .9s var(--ease) .5s both; }
.splash--custom .splash__enter:hover { background: var(--map-gold-dark); border-color: var(--map-gold-dark); }
.splash--custom .splash__enter:active { transform: translateX(-50%) scale(var(--press-scale)); }
@keyframes splash-rise-center { from { opacity: 0; transform: translateX(-50%) translateY(14px); } to { opacity: 1; transform: translateX(-50%); } }
.splash.is-leaving { animation: splash-out .55s var(--ease) both; }
@keyframes splash-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes splash-out { to { opacity: 0; visibility: hidden; } }
body.is-splash-open { overflow: hidden; }
body.is-nav-open { overflow: hidden; }

/* Leadership statements */
.statement__grid { display: grid; grid-template-columns: minmax(220px, .55fr) minmax(0, 1.45fr); gap: clamp(40px, 8vw, 120px); align-items: start; }
.statement__name { margin: 0 0 8px; font: 400 clamp(1.4rem, 2.3vw, 2.1rem)/1.1 var(--display); }
.copy-section--dark .statement__name { color: var(--paper); }
.copy-section--dark .statement__role { color: var(--accent); }
.statement__role { margin: 0; color: var(--accent); font: 500 .625rem/1.4 var(--body); letter-spacing: .16em; text-transform: uppercase; }
.statement__body { max-width: none; }
.statement__attribution { margin-top: clamp(2.5rem, 6vw, 5rem); padding-top: 1.5rem; border-top: 1px solid var(--line-dark); }

/* Static illustration flows */
.flow { margin: 42px 0 0; }
.flow__art { display: block; margin: 0 0 28px; }
/* Client edit (canvas note, 2026-08-27): Structured for Settlement specifically
   — chart moved beside the step list instead of stacked above it. Scoped by
   id, not a general .flow:has(.flow__art) rule, so Instrument Intelligence's
   chart (stacked, per its own layout) is unaffected. */
#structured-for-settlement .flow { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); align-items: center; gap: 32px; }
#structured-for-settlement .flow__art { order: 2; margin: 0; }
#structured-for-settlement .flow__list { order: 1; }
#structured-for-settlement .flow__detail { grid-column: 1 / -1; }
.flow__art img { display: block; width: 100%; height: auto; object-fit: contain; }
.flow__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(184px, 1fr)); gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--line-dark); border: 1px solid var(--line-dark); }
/* A lone item stranded in the last row of an even-column grid — same fix
   already used on .risk-register. */
.flow__list li:last-child:nth-child(odd) { grid-column: 1 / -1; }
/* One process-list component, used everywhere (Apple-design review,
   2026-08-27): a numbered flow used to render three different ways depending
   on incidental context — the plain grid here, a pill-badge legend on
   Structured for Settlement (fired only when a flow had artwork and no
   caption text), and a bespoke stacked-row list on Instrument Intelligence
   (built when its list was moved into a narrow column). Same content, same
   role, three unrelated looks. Consolidated to the one grid-of-cells
   language the rest of the site's numbered lists already use (dossier-checks,
   risk-register, institution-lockup) — column count is the only thing that
   changes per context now, not the component itself. */
.flow__step { display: flex; flex-direction: column; gap: 14px; padding: 28px 22px; background: var(--navy-deep); }
.flow__index { color: var(--accent); font: 400 1.4rem/1 var(--display); letter-spacing: normal; }
.flow__label { font: 600 .75rem/1.4 var(--body); letter-spacing: .1em; text-transform: uppercase; }
.flow__caption { color: var(--muted); font-size: .75rem; line-height: 1.5; }

/* Exact column counts per known context, rather than leaving auto-fit to
   pick a count that can strand empty track space at arbitrary widths: 8
   items at full shell width -> 2 clean rows of 4. */
#the-commercial-equation .flow__list { grid-template-columns: repeat(4, 1fr); }
#the-commercial-equation .flow--progression .flow__list { position: relative; grid-template-columns: repeat(4, 1fr); gap: 0; background: transparent; border: 0; }
#the-commercial-equation .flow--progression .flow__step { position: relative; align-items: center; min-height: 7rem; padding: 1.5rem .75rem; text-align: center; background: transparent; }
#the-commercial-equation .flow--progression .flow__step:not(:nth-child(4n))::after { content: ""; position: absolute; z-index: 0; top: 2.75rem; left: 50%; width: 100%; height: 1px; background: var(--accent); opacity: .7; }
#the-commercial-equation .flow--progression .flow__index { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--navy-deep); font-size: 1.15rem; }
#the-commercial-equation .flow--progression .flow__label { position: relative; z-index: 1; color: var(--paper); font-size: .72rem; line-height: 1.35; }
/* Instrument Intelligence is a seven-stage process, so give it a connected
   full-width map rather than leaving the sequence stranded beside the copy. */
#transaction-instrument-intelligence .flow--process-map .flow__list { grid-template-columns: repeat(4, 1fr); gap: 0; background: transparent; border: 0; }
#transaction-instrument-intelligence .flow--process-map .flow__step { position: relative; align-items: center; min-height: 9rem; padding: 1.5rem .75rem; text-align: center; background: transparent; }
#transaction-instrument-intelligence .flow--process-map .flow__step:not(:nth-child(4n))::after { content: ""; position: absolute; z-index: 0; top: 2.75rem; left: 50%; width: 100%; height: 1px; background: var(--accent); opacity: .7; }
#transaction-instrument-intelligence .flow--process-map .flow__index { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--navy-deep); font-size: 1.15rem; }
#transaction-instrument-intelligence .flow--process-map .flow__label { position: relative; z-index: 1; color: var(--paper); font-size: .72rem; line-height: 1.35; }
/* 7 items in the narrower column beside the settlement chart -> 2 columns;
   the trailing lone 7th item spans full width via the rule above. */
#structured-for-settlement .flow__list { grid-template-columns: repeat(2, 1fr); }

/* A caption grid's final step without caption text (e.g. a deliberate
   closing node) reads as an unfinished card at the same size as its
   captioned neighbours — style it as an intentional closing statement
   instead, without inventing copy. */
.flow__list:has(.flow__caption) .flow__step--closing { justify-content: center; text-align: center; }
.flow__list:has(.flow__caption) .flow__step--closing .flow__label { font: 400 clamp(1.05rem, 1.6vw, 1.35rem)/1.35 var(--display); letter-spacing: normal; text-transform: none; }

/* A captioned grid's auto-fit column count depends on viewport width, which
   can leave a false trailing half-row (Brand Critique: 9 items, 6 columns
   at wide desktop -> row two only 3 full + 3 empty). Fix to an exact 3x3 at
   the width where the full-shell flow row has room for it. */
@media (min-width: 900px) {
  .flow__list:has(.flow__caption) { grid-template-columns: repeat(3, 1fr); }
}
.flow__detail { margin-top: 24px; }
.flow__detail .copy-paragraph:last-child { margin-bottom: 0; }
.copy-pull { margin: 26px 0; color: var(--gold); font: italic 400 clamp(1.5rem, 2.5vw, 2.1rem)/1.2 var(--display); }
.copy-section--dark .copy-pull { color: var(--gold); }

/* Decorative hover transforms — gated to avoid sticky-hover on touch */
@media (hover: hover) {
  /* :not(:active) so the press state wins while held — both match on a mouse,
     and equal specificity would otherwise let this later rule swallow it. */
  .button:hover:not(:active) { transform: translateY(-2px); }
  .nexus-route:hover .nexus-route__arrow { transform: translate(4px,-4px); }
}

/* Ungated, this 8px lift latched on touch: a tap left the card stuck in a hover
   state that reads as "selected". Colour feedback stays ungated above; only the
   movement is pointer-gated. */
@media (hover: hover) and (pointer: fine) {
  .alignment-chain > div:hover { transform: translateY(-8px); }
}

/* Press feedback on every remaining interactive control — respond on
   pointer-down, never only on release (apple-design §1). */
.bank-map__bank:active, .bank-map__region-btn:active, .bank-map__zoom-out:active, .bank-map__back:active { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.site-footer__legal-links a { padding: 6px 0; }

/* Responsive */
@media (max-width: 1200px) {
  .site-nav { gap: clamp(14px, 2vw, 26px); }
  .site-nav__link { font-size: .625rem; }
}
@media (max-width: 980px) {
  .statement__grid { grid-template-columns: 1fr; gap: 40px; }
  :root { --shell: min(100vw - 48px, 720px); }
  .site-header { min-width: 0; padding: 14px var(--shell-margin); }
  /* Menu materializes from its trigger (top-right toggle) — anchored origin
     per apple-design §7, short critically-damped settle, no overshoot.
     Transitions rather than keyframes so a double-tap retargets from the
     current value instead of replaying from opacity 0; `display` rides along
     with allow-discrete so the exit is visible before display:none applies.
     Base rule carries the exit timing, .is-open the (slower) entrance. */
  .site-nav { position: absolute; top: 72px; right: 24px; left: 24px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 10px 18px; background: rgba(0,4,18,.98); border: 1px solid var(--line-dark); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right; transition: opacity var(--dur-press) var(--ease), transform var(--dur-press) var(--ease), display var(--dur-press) allow-discrete; }
  [dir="rtl"] .site-nav { transform-origin: top left; }
  .site-nav.is-open { display: flex; opacity: 1; transform: none; transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), display var(--dur-fast) allow-discrete; }
  @starting-style {
    .site-nav.is-open { opacity: 0; transform: translateY(-6px) scale(.98); }
  }
  /* Menu rows read at menu scale, not desktop-nav micro scale, with 48px
     tap rows (review finding #1's second half). */
  .site-nav__link { padding: 16px 0; border-bottom: 1px solid var(--line-dark); font-size: .8125rem; }
  .site-nav__link:last-child { border-bottom: 0; }
  .site-nav__link--cta { display: block; margin-top: 8px; color: var(--accent); font-weight: 600; }
  .site-header__menu-toggle { display: flex !important; position: relative; z-index: 2; flex: 0 0 44px; align-items: center; justify-content: center; margin-left: auto; background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.42); }
  .page-hero__content, .page-hero--light .page-hero__content { min-height: min(760px, 92svh); padding-top: 130px; padding-bottom: 80px; }
  .page-hero--light .page-hero__media { inset: 42% 0 0; width: 100%; height: 58%; }
  .page-hero--light .page-hero__content { position: relative; z-index: 1; min-height: min(760px, 92svh); max-width: var(--shell); padding-right: 0; background: linear-gradient(var(--navy-deep) 0 48%, transparent 77%); }
  .page-hero--nexus .page-hero__media { inset: auto 0 0; width: 100%; height: 42%; }
  .page-hero--nexus .page-hero__content { background: linear-gradient(#000204 0 60%, rgb(0 2 4 / .9) 68%, transparent 82%); }
  .copy-section__grid, .copy-section:nth-of-type(even) .copy-section__grid, .contact-band__grid { grid-template-columns: 1fr; gap: 45px; }
  .copy-section:nth-of-type(even) .copy-section__heading, .copy-section:nth-of-type(even) .copy-section__body { order: initial; }
  .nexus-route-list { grid-template-columns: 1fr; }
  .nexus-route:nth-child(odd) { border-right: 0; }
  .nexus-route:nth-child(even) { padding-left: 0; }
  .bank-map__layout { grid-template-columns: 1fr; }
  .evidence-heading, .dossier-evidence__layout, .alignment-evidence__layout, .institution-evidence__layout, .risk-evidence__layout { grid-template-columns: 1fr; }
  #structured-for-settlement .flow { grid-template-columns: 1fr; }
  #structured-for-settlement .flow__art { order: 1; margin: 0 0 28px; }
  #structured-for-settlement .flow__list { order: 2; }
  .evidence-heading .section-kicker { margin-bottom: -10px; }
  .equation-evidence__layout { grid-template-columns: 1fr; }
  .dossier-evidence__copy { position: static; }
  .institution-evidence__copy { order: -1; }
  .institution-lockup { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .risk-register--chart { grid-template-columns: repeat(2, 1fr); }
  #transaction-instrument-intelligence .flow--process-map .flow__list { grid-template-columns: repeat(2, 1fr); }
  #transaction-instrument-intelligence .flow--process-map .flow__step:not(:nth-child(4n))::after { display: none; }
  #transaction-instrument-intelligence .flow--process-map .flow__step:not(:nth-child(2n))::after { display: block; }
  #the-commercial-equation .flow--progression .flow__list { grid-template-columns: repeat(2, 1fr); }
  #the-commercial-equation .flow--progression .flow__step:not(:nth-child(4n))::after { display: none; }
  #the-commercial-equation .flow--progression .flow__step:not(:nth-child(2n))::after { display: block; }
}
@media (max-width: 600px) {
  :root { --shell: calc(100vw - 36px); }
  /* No overflow clipping here: the open mobile nav is an absolutely
     positioned child of the fixed header, and `overflow: hidden` rendered
     it invisible (review finding #1) — the menu opened into a clipped
     region and phones could not navigate at all. Width caps alone contain
     the logo row. */
  .site-header { width: 100vw; max-width: 100vw; }
  .site-logo-link { min-width: 0; }
  .site-logo { width: 148px; max-width: 100%; }
  .page-shell, .page-hero__content, .page-hero--light .page-hero__content { width: calc(100vw - 36px) !important; max-width: calc(100vw - 36px) !important; min-width: 0; }
  .page-hero--nexus .page-hero__media { inset: auto 0 8%; height: 30%; }
  .page-hero { --hero-title-size: clamp(2.2rem, 9vw, 3.6rem); --hero-subhead-size: clamp(1rem, 4.4vw, 1.15rem); --hero-body-size: clamp(.9rem, 3.6vw, 1rem); }
  .page-hero__content > *, .page-hero__lead, .page-hero__body, .page-hero__close, .copy-section__body, .copy-paragraph { min-width: 0; max-width: 100%; overflow-wrap: anywhere; }
  .page-hero__content h1 { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .page-hero__lead, .page-hero__body, .page-hero__close { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; }
  .page--nexus .page-hero, .page--equation .page-hero { --hero-title-size: clamp(2rem, 8vw, 2.8rem); }
  .arenas-section { padding-top: 84px; padding-bottom: 84px; }
  .arenas-section .section-intro { margin-bottom: 42px; }
  .copy-section__body h3 { margin-top: 25px; }
  .nexus-routes { padding-top: 84px; padding-bottom: 84px; }
  .nexus-routes .section-intro { margin-bottom: 40px; }
  .nexus-routes .section-intro h2 { font-size: 2.15rem; }
  .nexus-route { grid-template-columns: 28px minmax(0, 1fr) 20px; gap: 10px; min-height: 0; padding: 18px 0; }
  .nexus-route__index { padding-top: 3px; font-size: .5625rem; }
  .nexus-route h3 { margin-bottom: 7px; font-size: 1.25rem; line-height: 1.05; }
  .nexus-route p { font-size: .6875rem; line-height: 1.45; }
  .nexus-route__arrow { font-size: 1.0625rem; }
  .nexus-route__close { align-items: flex-start; flex-direction: column; }
  .nexus-route__close { margin-top: 38px; }
  .consultation-form { grid-template-columns: 1fr; padding: 24px 18px; }
  .consultation-form__field--full { grid-column: auto; }
  .site-footer__legal { flex-direction: column; }
  .bank-map__panel { padding: 20px; }
  .bank-map__bank { grid-template-columns: 14px 1fr; gap: 4px; padding: 14px 0; }
  .bank-map__bank-rating, .bank-map__bank-tier { grid-column: 2; }
  .bank-map__stat-row { grid-template-columns: 1fr; gap: 8px; }
  .bank-map__detail-grid { grid-template-columns: 1fr; }
  .evidence-section { padding: 84px 0; }
  .evidence-heading { gap: 28px; margin-bottom: 46px; }
  .evidence-heading .section-kicker { margin-bottom: 0; }
  .dossier-checks { grid-template-columns: 1fr; }
  .dossier-panel__top { align-items: flex-start; flex-direction: column; }
  .risk-register { grid-template-columns: 1fr; }
  .risk-register--chart { grid-template-columns: 1fr; }
  #transaction-instrument-intelligence .flow--process-map .flow__list { grid-template-columns: 1fr; }
  #transaction-instrument-intelligence .flow--process-map .flow__step::after { display: none !important; }
  #the-commercial-equation .flow--progression .flow__list { grid-template-columns: 1fr; }
  #the-commercial-equation .flow--progression .flow__step::after { display: none !important; }
  .risk-register li:last-child:nth-child(odd) { grid-column: auto; }
  .risk-register li { min-height: 90px; }
  /* The fixed 4/2-column process-list counts are sized for full shell width
     and a mid-width split column - both collapse to one column here, same
     as the default .flow__list already does via auto-fit. */
  #the-commercial-equation .flow__list, #structured-for-settlement .flow__list { grid-template-columns: 1fr; }
  .flow__list li:last-child:nth-child(odd) { grid-column: auto; }
  .alignment-chain { grid-template-columns: 1fr; padding: 18px; }
  .alignment-chain > div { min-height: 145px; }
  .alignment-chain > i { width: 1px; height: 28px; margin: 0 auto; }
  .alignment-chain > h4 { grid-column: 1; }
  .institution-evidence__media .section-media video, .institution-evidence__media .section-media img { height: 280px; }
  .institution-lockup { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-iteration-count: 1 !important; transition-property: color, background-color, border-color, outline-color, opacity !important; transition-duration: .15s !important; }
  /* Reduced motion means fewer and gentler, not none. The blanket that used to
     sit here — animation-duration: .001ms on * — also collapsed opacity-only
     keyframes, which carry no vestibular risk: splash-out has no transform at
     all, so reduced-motion users got a hard cut where everyone else got a soft
     one. Movement is neutralised per element instead; the fades survive at a
     calm duration. animation-iteration-count above still stops anything looping. */
  .animate-words .word, .splash__logo, .splash__line, .splash__enter { animation-duration: .3s !important; }
  .splash.is-leaving { animation-duration: .4s !important; }
  .splash__logo, .splash__line, .splash__enter, .animate-words .word { transform: none !important; }
  .page-hero--global .page-hero__media { display: none; }
  .page-hero--global { background: center/cover url("/assets/content/hero.webp"); }
  .page-hero--nexus .page-hero__media { display: none; }
  .page-hero--nexus { background: #000204 url("/assets/images/nexus-client-globe-v02.jpg") right center/70% auto no-repeat; }
}
@media (prefers-reduced-transparency: reduce) {
  .site-header { background: var(--navy-deep); backdrop-filter: none; }
  .grain { display: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: var(--paper); }
  .site-header { background: var(--navy-deep); backdrop-filter: none; border-bottom-color: var(--paper); }
  :focus-visible { outline-width: 3px; }
}

/* RTL (Arabic build, [dir="rtl"] on <html>) — targeted overrides only, not a
   full logical-properties rewrite. Most layout (flex/grid) already mirrors
   correctly under `dir="rtl"`; these are the physical (left/right) rules
   that don't. Logo, wordmarks and English brand/product names are never
   flipped — see DESIGN.md's Arabic build section. */
[dir="rtl"] .copy-paragraph--list { padding-left: 0; padding-right: 18px; border-left: 0; border-right: 2px solid var(--accent); }
[dir="rtl"] .copy-pull { border-left: 0; }
[dir="rtl"] .nexus-route:nth-child(odd) { border-right: 0; border-left: 1px solid var(--line-dark); }
[dir="rtl"] .nexus-route:nth-child(even) { padding-left: 0; padding-right: 34px; }
[dir="rtl"] .nexus-route { padding: 28px 0 28px 34px; }
[dir="rtl"] .page-hero--light .page-hero__content { padding-right: 0; padding-left: 48%; }
[dir="rtl"] .site-nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .bank-map__restricted-note { border-left: 0; border-right: 3px solid var(--error); }
[dir="rtl"] i.bank-map__tile { margin-right: 0; margin-left: 8px; }
[dir="rtl"] .site-nav__lang-switch { margin-left: 0; margin-right: 8px; }
[dir="rtl"] .splash__skip { right: auto; left: 24px; }
/* Forward-direction arrow glyphs (↗) mirror in RTL; dots, bullets, ×, and
   numeric indices are left alone. */
[dir="rtl"] .nexus-route__arrow,
[dir="rtl"] .button span,
[dir="rtl"] .splash__enter span {
  display: inline-block;
  transform: scaleX(-1);
}
@media (max-width: 900px) {
  [dir="rtl"] .nexus-route:nth-child(odd) { border-left: 0; }
  [dir="rtl"] .nexus-route:nth-child(even) { padding-right: 0; }
  [dir="rtl"] .nexus-route { padding-left: 0; }
  [dir="rtl"] .page-hero--light .page-hero__content { padding-left: 0; }
  [dir="rtl"] .site-header__menu-toggle { margin-right: auto; margin-left: 0; }
}

/* ------------------------------------------------------------------
   Commercial Arenas — 5 vertical tabs (client sketch, 2026-08-27).
   Supersedes the 4-up card grid, which superseded the original accordion.
   Panel 00 is the cover; 01–04 open on rollover, exit returns to the cover.
   ------------------------------------------------------------------ */
.arenas-section { padding: 0; }
.arenas-section > .page-shell { width: 100%; max-width: none; }
.arena-strip { display: flex; overflow: hidden; min-height: min(640px, 76svh); background: var(--navy-deep); border: 0; }
.arena-strip__radio { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* flex-basis stays 84px and only flex-grow animates: transitioning basis
   between auto and a length is not interpolable and left the transition
   permanently mid-flight. */
.arena-strip__panel { position: relative; display: block; flex: 0 0 84px; min-width: 0; isolation: isolate; overflow: hidden; cursor: pointer; border-left: 1px solid var(--line-dark); transition: flex-grow var(--dur-arena) var(--ease); }
.arena-strip__panel:first-of-type { border-left: 0; }
.arena-strip__media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: saturate(.6) contrast(1.05); transition: filter var(--dur-press) var(--ease-press); }
/* The panel's own press feedback. The spine rule below covers the collapsed
   state, but on a pointer device hovering hides the spine (:hover sets its
   opacity to 0) and reveals the content — so a spine-only press would be
   invisible to every mouse user. The media sits behind both states, so dipping
   its brightness reads as a press whichever one is showing. Paint-only, and it
   cannot open the seams that scaling the panel itself would. */
.arena-strip__panel:active .arena-strip__media { filter: saturate(.6) contrast(1.05) brightness(.9); }
.arena-strip__tint { position: absolute; z-index: -2; inset: 0; background: oklch(11% .04 255 / .93); transition: background var(--dur-arena) var(--ease); }
.arena-strip__spine { position: absolute; z-index: 1; inset: 0; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px; opacity: 1; transition: opacity var(--dur-fast) var(--ease); }
/* Press feedback scales the SPINE, not the panel: the strip is edge-to-edge
   with border-left dividers over overflow:hidden full-bleed media, so insetting
   the panel opens a visible seam against both neighbours. */
.arena-strip__panel:active .arena-strip__spine { transform: scale(var(--press-scale)); transition: transform var(--dur-press) var(--ease-press); }
.arena-strip__spine b { color: var(--accent); font: 400 1.5rem/1 var(--display); writing-mode: vertical-rl; transform: rotate(180deg); letter-spacing: .06em; }
.arena-strip__content { position: relative; z-index: 1; display: flex; height: 100%; flex-direction: column; align-items: flex-start; justify-content: center; gap: 16px; width: min(560px, 46vw); padding: clamp(2rem, 5vw, 5.5rem) 46px; opacity: 0; pointer-events: none; transform: translateX(-22px); transition: opacity var(--dur-arena) var(--ease), transform var(--dur-arena) var(--ease); }
.arena-strip__num { color: var(--accent); font: 400 1.5rem/1 var(--display); }
.arena-strip__title { color: var(--accent); font: 400 clamp(1.6rem, 2.6vw, 2.5rem)/1.1 var(--display); }
.arena-strip__body { color: rgba(255,255,255,.72); font: 400 1.0125rem/1.75 var(--body); }

.arena-strip__radio:checked + .arena-strip__panel { flex-grow: 1; }
.arena-strip__radio:checked + .arena-strip__panel .arena-strip__content { opacity: 1; pointer-events: auto; transform: translateX(0); }
.arena-strip__radio:checked + .arena-strip__panel .arena-strip__spine { opacity: 0; }
.arena-strip__radio:checked + .arena-strip__panel .arena-strip__tint { background: linear-gradient(90deg, oklch(20% .07 255 / .94) 0%, oklch(18% .07 255 / .82) 62%, oklch(16% .06 255 / .66) 100%); }

/* The default must not depend on the radio's `checked` attribute — form state
   is not guaranteed to survive a re-render. Scoped to "nothing checked AND not
   hovered" so it never competes with the rules below. */
.arena-strip:not(:hover):not(:has(.arena-strip__radio:checked)) .arena-strip__panel--cover { flex-grow: 1; }
.arena-strip:not(:hover):not(:has(.arena-strip__radio:checked)) .arena-strip__panel--cover .arena-strip__content { opacity: 1; pointer-events: auto; transform: translateX(0); }
.arena-strip:not(:hover):not(:has(.arena-strip__radio:checked)) .arena-strip__panel--cover .arena-strip__spine { opacity: 0; }
.arena-strip:not(:hover):not(:has(.arena-strip__radio:checked)) .arena-strip__panel--cover .arena-strip__tint { background: linear-gradient(90deg, oklch(20% .07 255 / .94) 0%, oklch(18% .07 255 / .82) 62%, oklch(16% .06 255 / .66) 100%); }

/* Dead-state fallback (review finding #3): if the hover-compact state is
   active but the pointer sits on a divider — no panel actually hovered and
   nothing checked wins — the strip could collapse to five slivers beside a
   void. The cover reclaims the space whenever nothing else holds it. */
.arena-strip.is-hovering-noncover:not(:has(.arena-strip__panel:hover)):not(:has(.arena-strip__radio:checked)) .arena-strip__panel--cover { flex-grow: 1; }

@media (hover: hover) {
  /* The cover is the stable default. JavaScript adds this state only after a
     pointer enters a non-cover tab, so the cover cannot collapse beneath a
     pointer that is still over it while flex widths are animating. */
  .arena-strip.is-hovering-noncover .arena-strip__radio:checked + .arena-strip__panel { flex-grow: 0; }
  .arena-strip.is-hovering-noncover .arena-strip__radio:checked + .arena-strip__panel .arena-strip__content { opacity: 0; pointer-events: none; transform: translateX(-22px); }
  .arena-strip.is-hovering-noncover .arena-strip__radio:checked + .arena-strip__panel .arena-strip__spine { opacity: 1; }
  .arena-strip.is-hovering-noncover .arena-strip__radio:checked + .arena-strip__panel .arena-strip__tint { background: oklch(11% .04 255 / .93); }
  .arena-strip.is-hovering-noncover .arena-strip__panel { flex-grow: 0; }
  .arena-strip.is-hovering-noncover .arena-strip__panel:hover { flex-grow: 1; }
  .arena-strip__panel:hover .arena-strip__content { opacity: 1; pointer-events: auto; transform: translateX(0); }
  .arena-strip__panel:hover .arena-strip__spine { opacity: 0; }
  .arena-strip__panel:hover .arena-strip__tint { background: linear-gradient(90deg, oklch(20% .07 255 / .94) 0%, oklch(18% .07 255 / .82) 62%, oklch(16% .06 255 / .66) 100%); }
}
/* Keyboard: the radios are a native group — Tab reaches it, arrows move and
   check, which opens the panel. These only add the visible ring (no tabindex
   on the labels; that would double the tab stops). */
.arena-strip__radio:focus-visible + .arena-strip__panel { outline: 2px solid var(--accent); outline-offset: -2px; flex-grow: 1; }
.arena-strip__radio:focus-visible + .arena-strip__panel .arena-strip__content { opacity: 1; pointer-events: auto; transform: translateX(0); }
.arena-strip__radio:focus-visible + .arena-strip__panel .arena-strip__spine { opacity: 0; }

@media (max-width: 900px) {
  .arena-strip { flex-direction: column; min-height: 0; }
  .arena-strip__panel, .arena-strip__radio:checked + .arena-strip__panel, .arena-strip__panel:hover { flex: 0 0 auto; border-left: 0; border-top: 1px solid var(--line-dark); }
  .arena-strip__panel:first-of-type { border-top: 0; }
  .arena-strip__spine, .arena-strip:hover .arena-strip__radio:checked + .arena-strip__panel .arena-strip__spine { display: none; opacity: 0; }
  .arena-strip__content, .arena-strip:hover .arena-strip__radio:checked + .arena-strip__panel .arena-strip__content { width: auto; height: auto; justify-content: flex-start; padding: 30px 26px; opacity: 1; pointer-events: auto; transform: none; }
  .arena-strip__tint, .arena-strip:hover .arena-strip__radio:checked + .arena-strip__panel .arena-strip__tint { background: oklch(14% .05 255 / .88); }
}
@media (prefers-reduced-motion: reduce) {
  .arena-strip__panel, .arena-strip__content, .arena-strip__spine, .arena-strip__tint { transition: none; }
}

/* Contact band — canvas notes (2026-08-27): world render beside the copy,
   balanced line breaks in place of a hard <br>. */
.contact-band--split { position: relative; isolation: isolate; min-height: 25rem; padding: .41875rem 0; overflow: hidden; background: transparent; }
.contact-band--split .contact-band__grid { position: relative; z-index: 1; display: flex; min-height: calc(25rem - .8375rem); align-items: center; }
.contact-band--split .contact-band__copy { position: relative; z-index: 1; width: min(29.7rem, 100%); padding: 0; }
.contact-band__copy h2 { text-wrap: balance; }
.contact-band--split .contact-band__copy p { max-width: 100%; text-wrap: pretty; }
.contact-band__globe { position: absolute; z-index: -5; top: 50%; right: clamp(-22rem, -16vw, -8rem); width: min(70vw, 60rem); height: min(70vw, 60rem); margin: 0; overflow: hidden; transform: translateY(-50%); pointer-events: none; }
/* Client comment CBZTUCGOtjda (2026-09-10): "fade this edge with the blue"
   — the globe's hard rectangular edge is vignetted on all sides instead of
   just top/bottom, so it dissolves into the section's navy-deep ground. */
.contact-band__globe img { display: block; width: 132%; height: 132%; max-width: none; object-fit: cover; object-position: center center; transform: translateX(8%); transform-origin: center; filter: saturate(.88) contrast(1.08); -webkit-mask-image: radial-gradient(ellipse 68% 62% at 55% 50%, black 52%, transparent 86%); mask-image: radial-gradient(ellipse 68% 62% at 55% 50%, black 52%, transparent 86%); }
@media (max-width: 900px) {
  .contact-band--split { min-height: 0; padding: clamp(90px, 10vw, 150px) 0; }
  .contact-band--split .contact-band__grid { display: grid; grid-template-columns: 1fr; min-height: 0; }
  .contact-band--split .contact-band__copy { width: 100%; padding: 0; }
  .contact-band__globe { position: relative; z-index: 0; top: auto; right: auto; order: -1; width: 100%; height: clamp(20rem, 78vw, 30rem); margin: 1.4375rem 0 0; transform: none; }
}

/* Leadership statements — canvas notes (2026-08-27). */
.statement__title { margin: 0 0 26px; color: var(--paper); font: 400 clamp(3rem, 5.253vw, 3.76625rem)/1.02 var(--display); letter-spacing: -.025em; text-transform: none; text-wrap: balance; }
.statement__body .copy-pull { width: 100%; max-width: 47.8125rem; margin: clamp(2.25rem, 4vw, 3.75rem) 0; padding: .25rem 0 .25rem 1.25rem; border-left: 3px solid var(--map-gold); color: #fff; font-size: clamp(1.35rem, 2.2vw, 1.5425rem); }
/* Client comment nhg9u3SmZRgx (2026-09-10): the Belief statement's rewritten
   pull line carries an orange + bold treatment, distinct from the default
   gold/italic pull quote used elsewhere in the statement bodies. */
.statement__body .copy-pull--accent { border-left-color: var(--accent); color: var(--accent); font-style: normal; font-weight: 600; }
.statement__body .statement__emphasis { margin: clamp(2rem, 4vw, 3rem) 0 1.25rem; color: var(--gold); font: 400 clamp(1.5rem, 2.3vw, 1.9rem)/1.15 var(--display); letter-spacing: -.01em; }
/* Presentation lift (client comment aakf40kFYI8V, 2026-09-01: portraits
   read "shabby"): the heavy desaturation over dusk photography rendered
   both statements' images muddy at column width. Grade lifted and a
   hairline frame added so they read as placed, not dropped in. This is the
   interim measure — the comment asks for replacement imagery, which needs
   client-supplied photography (approved pool is exhausted; see the reply
   on the thread). */
.statement__portrait { margin: 0; padding: 8px; border: 1px solid var(--line-dark); }
.statement__portrait img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; filter: saturate(.92) contrast(1.08) brightness(1.14); }
.statement__name { max-width: 551px; }
/* Client comments UgPxuReI_kfp / W1Hg2EzEGfp3 (2026-09-16): each portrait
   should visually run down to roughly a specific line in its own column
   ("Built through people..." / "...opportunities it creates"). Since the
   portrait and body copy are independent grid tracks, this is tuned against
   the client's own reported viewport (~1631px) and is an approximation, not
   an exact sync — it will drift some at other widths. Desktop only, so it
   doesn't fight the 16:9 mobile crop below. */
@media (min-width: 981px) {
  #the-belief-behind-one-world .statement__portrait img { aspect-ratio: .634; }
  #the-architect-of-endless-possibilities .statement__portrait img { aspect-ratio: .524; }
}
@media (max-width: 980px) { .statement__portrait img { aspect-ratio: 16 / 9; } }
[dir="rtl"] .statement__body .copy-pull { padding-right: 1.25rem; padding-left: 0; border-right: 3px solid var(--map-gold); border-left: 0; }

/* Equation chapters collapse their paired editorial compositions below the
   site tablet breakpoint; matrices preserve comparison until mobile. */
@media (max-width: 980px) {
  .equation-capabilities__layout, .equation-capabilities__statement,
  .equation-equality__layout, .equation-equality__principle,
  .equation-opportunity__layout, .equation-manifesto__principle { grid-template-columns: 1fr; }
  .equation-chapter__image--port { min-height: 24rem; }
  .equation-chapter__image--city { height: clamp(20rem, 56vw, 30rem); }
  .equation-chapter__image--convergence { width: min(30rem, 100%); height: min(44rem, 120vw); }
  .equation-role-matrix { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equation-convergence-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .equation-equality__principle .equation-chapter__closer { padding-bottom: 0; }
  .equation-manifesto__principle { gap: 2rem; }
}

@media (max-width: 600px) {
  .equation-chapter { padding: 5rem 0; }
  .equation-chapter__heading { grid-template-columns: 2.5rem minmax(0, 1fr); gap: 1rem; margin-bottom: 3.5rem; }
  .equation-chapter__heading h2 { font-size: clamp(2.35rem, 11.5vw, 3.35rem); }
  .equation-chapter__image--port { min-height: 18rem; }
  .equation-capability-ledger li { min-height: 5.3rem; }
  .equation-capabilities__statement { margin-top: 3.5rem; gap: 2.5rem; }
  .equation-role-matrix, .equation-convergence-map { grid-template-columns: 1fr; }
  .equation-role-matrix li, .equation-convergence-map li { min-height: 9.5rem; }
  .equation-chapter__image--convergence { height: 32rem; }
  .manifesto-panel.equation-manifesto { min-height: 0; padding: 6rem 0; }
  .equation-manifesto h2 { font-size: clamp(2.7rem, 13vw, 4rem); }
  .equation-manifesto__principle { margin-top: 4rem; }
  .equation-manifesto__principle p { font-size: clamp(2rem, 10vw, 3rem); }
}

/* Trade Finance — canvas notes (2026-08-27). The recurring point across the
   notes: 37px display h3s were being used for sentences and list lead-ins.
   Those drop to body size; only the genuine lead-in keeps the accent. */
.copy-lead-in { color: var(--accent); }
.copy-paragraph--terms { font-size: 1.075rem; line-height: 1.75; letter-spacing: normal; }
p.copy-section__close { color: rgba(255,255,255,.7); }

/* Same tile as every other process list on the site now (Apple-design
   review, 2026-08-27) — only the column count changes, forced to one since
   this sits in the section's narrower heading column rather than the full
   shell. */
.tii-split .copy-section__heading .flow__list { grid-template-columns: 1fr; margin: 24px 0 0; }

/* Vertical image beside the Red-Flag scrutiny questions. */
.redflag-question { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .38fr); gap: clamp(40px, 6vw, 90px); align-items: center; }
.redflag-question__media { margin: 0; }
.redflag-question__media img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; filter: saturate(.7) contrast(1.06); }
@media (max-width: 900px) {
  .redflag-question { grid-template-columns: 1fr; }
  .redflag-question__media { max-width: 300px; }
}
.copy-section__aside { margin: 26px 0 0; }
.copy-section__aside img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; filter: saturate(.72) contrast(1.07); }
@media (max-width: 980px) { .copy-section__aside { margin-top: 18px; } .copy-section__aside img { aspect-ratio: 16 / 9; } }

/* Canvas note cleanup (2026-08-28): Instruments gets top/bottom rule lines
   (no side borders) and its term-list dots switch from muted to accent. */
#instruments { border-top: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); }
#instruments .dot { color: var(--accent); }
/* Design pass (2026-08-29): advisory copy left, risk register right — the
   single narrow column left half the section empty at register height. The
   flat .88 veil also blacked out the skyline photo entirely; a directional
   veil keeps the copy side dense and lets the photo read toward the right,
   while register cells carry their own tint for guaranteed legibility. */
#instruments .copy-section__grid { grid-template-columns: minmax(280px, .72fr) minmax(0, 1.28fr); gap: clamp(48px, 7vw, 110px); align-items: start; }
#instruments .copy-section__heading { order: 0; }
#instruments .copy-section__body { order: 1; max-width: 720px; }
#instruments .section-photo__veil { background: linear-gradient(90deg, oklch(11% .04 255 / .96) 0%, oklch(11% .04 255 / .9) 42%, oklch(11% .04 255 / .68) 100%); }
#instruments .copy-terms--illustrated li { background: oklch(11% .04 255 / .72); }
@media (max-width: 980px) {
  #instruments .copy-section__grid { grid-template-columns: 1fr; gap: 45px; }
  #instruments .section-photo__veil { background: oklch(11% .04 255 / .9); }
}
#instruments .copy-section__body .copy-paragraph { font-size: 1rem; line-height: 1.65; }
#instruments .copy-section__body .copy-lead-in { margin-top: 0; font: 500 1rem/1.5 var(--body); }
#instruments .copy-section__body .copy-paragraph--terms { font: 400 1rem/1.65 var(--body); letter-spacing: normal; }

/* Canvas note cleanup (2026-08-28): the "Read the Transaction. Not Just the
   Instrument." subhead sits on a dark photo background like its Instruments
   neighbor's h3 — same white override. */
#transaction-instrument-intelligence h3 { color: var(--paper); }

/* Canvas note cleanup (2026-08-28): Capital Aligned with Commerce drops the
   flat veil tint in favor of a right-side fade so the photo reads through
   on the left. */
#capital-aligned-with-commerce.section-photo--feature { padding-top: 0; background: var(--navy-deep); }
#capital-aligned-with-commerce.section-photo--feature .section-photo__media { position: relative; z-index: 0; inset: auto; display: block; width: 100%; height: clamp(18rem, 42vw, 34rem); object-position: center; filter: saturate(.78) contrast(1.06); mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 100%); -webkit-mask-image: linear-gradient(to bottom, black 0%, black 62%, transparent 100%); }
#capital-aligned-with-commerce.section-photo--feature .section-photo__veil { display: none; }
#capital-aligned-with-commerce.section-photo--feature .grain { z-index: 1; }
#capital-aligned-with-commerce.section-photo--feature .copy-section__grid { position: relative; z-index: 2; margin-top: clamp(-9rem, -12vw, -5rem); }

/* Canvas note cleanup (2026-08-28): the closer line reads as body copy on
   this dark section, not the muted default — force it to full white. */
#but-capital-should-follow-commercial-substance h3.section-closer { color: var(--paper); }

/* Canvas note cleanup (2026-08-28): Banking & Counterparty Alignment's photo
   moved out of the heading column (see SECTION_FULL_IMAGE in render-pages.mjs)
   so the heading column is empty — collapse the grid to one column instead
   of leaving a blank track. */
#banking-counterparty-alignment .copy-section__grid { grid-template-columns: minmax(0, 1fr); }
#banking-counterparty-alignment .equation-evidence__full-image { margin-top: 0; margin-bottom: clamp(2.5rem, 6vw, 5rem); }

/* Canvas note cleanup (2026-08-28): "Same style as Nexus" + tighter heading
   gap for Structured for Settlement. The route-list itself is single-column
   here (one flow, not two independent route groups), so the odd-child right
   border used for Nexus's two-column split doesn't apply. */
#structured-for-settlement .copy-section__flow { margin-top: 32px; }
#structured-for-settlement .nexus-route-list { grid-template-columns: 1fr; }
#structured-for-settlement .nexus-route { grid-template-columns: 45px 1fr; padding-right: 0; min-height: 0; padding-top: 20px; padding-bottom: 20px; }
#structured-for-settlement .nexus-route:nth-child(odd) { border-right: none; }
#structured-for-settlement .nexus-route h3 { font-size: 1.15rem; }

/* Trade Finance refinement (Apple-design review, 2026-08-28)
   ----------------------------------------------------------------
   The page works as a sequence of calm reading columns separated by two
   image-led transitions. Images are not backgrounds behind every sentence:
   they establish place, then dissolve into the text surface. */
.copy-terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 1.75rem 0 2.25rem; padding: 0; border-top: 1px solid var(--line-dark); border-left: 1px solid var(--line-dark); list-style: none; }
.copy-terms li { position: relative; min-height: 3.5rem; padding: .9rem 1rem .9rem 2.1rem; border-right: 1px solid var(--line-dark); border-bottom: 1px solid var(--line-dark); color: rgba(255,255,255,.78); font: 500 .78rem/1.45 var(--body); }
.copy-terms li::before { content: "→"; position: absolute; top: .88rem; left: .9rem; color: var(--accent); font: 400 1rem/1 var(--display); }

/* The copy column reads as a precise advisory note beside the register;
   the register owns the wider column (design pass, 2026-08-29). */
#instruments .copy-section__heading { margin-bottom: 0; }
#instruments .copy-section__body .copy-terms { margin-top: 1.25rem; margin-bottom: 0; }
#instruments .copy-section__body .section-closer { max-width: 27rem; margin-top: 2.5rem; }
#instruments .copy-instruments__prompt { max-width: 24rem; margin: .5rem 0 1.5rem; color: var(--paper); font: 400 clamp(2rem, 2.9vw, 2.9rem)/1.04 var(--display); letter-spacing: -.02em; text-transform: none; }
#instruments .copy-section__heading .copy-paragraph { max-width: 24rem; }
#instruments .copy-instruments__signoff { margin: 1.75rem 0 0; color: var(--accent); font: 500 .68rem/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; }
#instruments .copy-terms--illustrated li { min-height: 6.5rem; padding-top: 1rem; padding-bottom: 1rem; }
#instruments .copy-terms--illustrated strong { display: block; color: var(--paper); font: 600 .76rem/1.35 var(--body); }
#instruments .copy-terms--illustrated small { display: block; margin-top: .55rem; color: rgba(255,255,255,.6); font: 400 .69rem/1.42 var(--body); }

/* Transaction & Instrument Intelligence: a vertical process rail is the
   visual concept. It becomes an explanatory counterpart to the copy rather
   than a large, competing illustration. */
.copy-section--transaction-intelligence { overflow: hidden; padding: clamp(6rem, 11vw, 10rem) 0; background: linear-gradient(135deg, color-mix(in oklch, var(--navy-deep) 93%, var(--navy-surface)) 0%, var(--navy-deep) 64%); }
.transaction-intelligence__layout { display: grid; grid-template-columns: minmax(16rem, .68fr) minmax(0, 29.9475rem); gap: clamp(3rem, 9vw, 10rem); align-items: start; }
.transaction-intelligence__rail { position: relative; padding-top: .35rem; }
.transaction-intelligence__rail .flow { margin: 0; }
#transaction-instrument-intelligence .flow--process-map .flow__list { position: relative; grid-template-columns: 1fr; gap: 0; border: 0; background: transparent; }
#transaction-instrument-intelligence .flow--process-map .flow__step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 1rem; align-items: start; min-height: 0; padding: 0 0 1.5rem; text-align: left; background: transparent; }
#transaction-instrument-intelligence .flow--process-map .flow__step:not(:nth-child(4n))::after { display: none; }
#transaction-instrument-intelligence .flow--process-map .flow__step:not(:last-child)::before { content: ""; position: absolute; top: 2.7rem; bottom: -.15rem; left: 1.35rem; width: 1px; background: color-mix(in oklch, var(--accent) 65%, transparent); }
#transaction-instrument-intelligence .flow--process-map .flow__step { cursor: default; outline: 0; }
#transaction-instrument-intelligence .flow--process-map .flow__step:focus-visible { outline: 1px solid var(--map-slate-light); outline-offset: .35rem; }
/* Ring numeral — the site's one numbered-sequence primitive (review finding
   #8); the slate-filled badge this rail wore was the odd one out. */
#transaction-instrument-intelligence .flow--process-map .flow__index { grid-row: 1 / span 2; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid var(--accent); border-radius: 50%; background: var(--navy-deep); color: var(--accent); font: 400 1rem/1 var(--display); }
#transaction-instrument-intelligence .flow--process-map .flow__label { align-self: end; padding-top: .25rem; color: var(--paper); font-size: .72rem; line-height: 1.35; }
/* Captions are always present at reading-rest opacity and simply come to
   full strength on hover — no height animation, so the rail never reflows
   under the cursor, and the dim text itself is the hover affordance
   (review finding #7). */
#transaction-instrument-intelligence .flow--process-map .flow__caption { grid-column: 2; margin-top: .4rem; opacity: .7; color: rgba(255,255,255,.58); font-size: .78rem; line-height: 1.5; transition: opacity var(--dur-fast) var(--ease); }
#transaction-instrument-intelligence .flow--process-map .flow__step:is(:hover, :focus-visible) .flow__caption { opacity: 1; }
.transaction-intelligence__copy { width: min(29.9475rem, 100%); }
.transaction-intelligence__copy > .section-kicker { margin: 0 0 1.5rem; }
.transaction-intelligence__copy > h2 { margin: 0 0 1.75rem; color: var(--paper); font-size: clamp(2.25rem, 3.4vw, 3.5rem); line-height: .99; letter-spacing: -.025em; text-wrap: balance; }
.transaction-intelligence__copy .copy-paragraph { margin-bottom: 1.35rem; }
.transaction-intelligence__copy .copy-lead-in { margin-top: 2rem; color: var(--accent); font-size: 1rem; }
.copy-terms--transaction { margin-top: 1.1rem; }
.transaction-intelligence__warning { margin-top: 2rem; color: rgba(255,255,255,.82); }
.transaction-intelligence__close { margin: 2.25rem 0 0; color: var(--accent); font: 500 .68rem/1.5 var(--body); letter-spacing: .14em; text-transform: uppercase; }

/* Banking is a split composition (client comment edKSKHubABr4, 2026-09-15):
   the image holds the left half and the copy reads on the right — the mirror
   of Capital Aligned With Commerce below. A rightward fade into the section's
   navy lets the copy sit on solid ground without a hard seam. */
.copy-section--banking { position: relative; isolation: isolate; overflow: hidden; min-height: clamp(31rem, 45vw, 39rem); padding: clamp(4rem, 7vw, 7rem) 0; background: var(--navy-deep); }
.banking-alignment__image { position: absolute; z-index: -2; inset: 0 auto 0 0; width: 54%; margin: 0; }
.banking-alignment__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, oklch(11% .04 255 / .06) 0%, oklch(11% .04 255 / .18) 55%, oklch(11% .04 255 / .7) 84%, var(--navy-deep) 100%); }
/* Client comment TDESMVzQnw-Z (2026-09-16): the desk/laptop/bank-icon
   cluster sits in the right ~60% of this photo — recentered from 38% (which
   favored the empty port/sky on the left) so the crop keeps the subject and
   lets the left edge go instead. */
.banking-alignment__image img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 82% center; filter: saturate(.85) contrast(1.06); }
.banking-alignment__copy { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .88fr); align-content: center; min-height: clamp(22rem, 30vw, 28rem); }
.banking-alignment__copy > * { grid-column: 2; }
.banking-alignment__copy > .section-kicker { margin-bottom: 1.75rem; }
.banking-alignment__copy .copy-section__body { max-width: 40rem; }
.banking-alignment__copy .copy-section__body h3 { margin-top: 1.75rem; }

/* Capital is a paired editorial composition: the copy leads from the left,
   while the logistics image stays to the right as a distinct second column. */
#capital-aligned-with-commerce.section-photo--feature { min-height: clamp(31rem, 45vw, 39rem); padding: clamp(4rem, 7vw, 7rem) 0; }
#capital-aligned-with-commerce.section-photo--feature .section-photo__media { position: absolute; z-index: -3; inset: 0 0 0 auto; width: 48%; height: 100%; object-position: right center; mask-image: none; -webkit-mask-image: none; }
#capital-aligned-with-commerce.section-photo--feature .section-photo__veil { display: block; z-index: -2; background: linear-gradient(90deg, var(--navy-deep) 0%, oklch(11% .04 255 / .96) 38%, oklch(11% .04 255 / .5) 61%, oklch(11% .04 255 / .08) 100%); }
#capital-aligned-with-commerce.section-photo--feature .grain { z-index: -1; }
#capital-aligned-with-commerce.section-photo--feature .copy-section__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(20rem, .88fr); grid-template-rows: auto auto; align-content: center; min-height: clamp(22rem, 30vw, 28rem); gap: 0 clamp(3rem, 7vw, 8rem); width: var(--shell); margin: 0 auto; }
#capital-aligned-with-commerce .copy-section__heading { grid-column: 1; grid-row: 1; order: initial; margin: 0; }
#capital-aligned-with-commerce .copy-section__body { grid-column: 1; grid-row: 2; order: initial; max-width: 31rem; }
#capital-aligned-with-commerce .copy-section__body h3 { margin-top: 0; }

/* The final proposition belongs with its explanation, while the terminal is
   a 40%-wide full-bleed counterweight — a place, not an extra column. */
.copy-section--capital-substance { position: relative; isolation: isolate; min-height: clamp(32rem, 48vw, 44rem); overflow: hidden; padding: clamp(5rem, 9vw, 8rem) 0; background: var(--navy-deep); }
/* Client comment ENNX_0di_9JE (2026-09-10): flip image left / copy right. */
.capital-substance__image { position: absolute; z-index: -1; top: 0; left: 0; bottom: 0; width: 40vw; min-width: 22rem; margin: 0; }
.capital-substance__image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--navy-deep) 0%, oklch(11% .04 255 / .72) 27%, oklch(11% .04 255 / .08) 100%); }
/* Client comment Tccwf_roILYb (2026-09-16): "zoom out proportionally to
   have the full image visible" — cover was cropping this square photo
   against a much taller/wider box; contain shows it whole. */
.capital-substance__image img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; filter: saturate(.72) contrast(1.05); }
.capital-substance__layout { display: flex; align-items: flex-start; justify-content: flex-end; min-height: clamp(22rem, 32vw, 30rem); }
.capital-substance__copy { width: min(31rem, 54%); }
.capital-substance__copy > .section-kicker { margin: 0 0 1.75rem; }
.capital-substance__copy h3 { margin: 0 0 2rem; color: var(--paper); font: 400 clamp(2.4rem, 4vw, 4.25rem)/.98 var(--display); letter-spacing: -.03em; text-transform: none; text-wrap: balance; }
.capital-substance__copy .copy-paragraph { max-width: 28rem; }

@media (max-width: 980px) {
  .transaction-intelligence__layout { grid-template-columns: minmax(14rem, .72fr) minmax(0, 1fr); gap: 3rem; }
  .transaction-intelligence__copy { width: 100%; }
  .copy-section--banking { min-height: 0; padding-top: 0; }
  .banking-alignment__image { position: relative; inset: auto; width: 100%; height: clamp(17rem, 45vw, 25rem); }
  .banking-alignment__image::after { background: linear-gradient(to bottom, oklch(11% .04 255 / .05) 0%, var(--navy-deep) 100%); }
  .banking-alignment__copy { grid-template-columns: minmax(0, 1fr); min-height: 0; margin-top: clamp(-4rem, -8vw, -2.5rem); }
  .banking-alignment__copy > * { grid-column: 1; }
  .capital-substance__image { width: 46vw; min-width: 17rem; }
  .capital-substance__copy { width: min(30rem, 60%); }
  #capital-aligned-with-commerce.section-photo--feature { min-height: 0; padding-top: 0; }
  #capital-aligned-with-commerce.section-photo--feature .section-photo__media { position: relative; inset: auto; display: block; width: 100%; height: clamp(17rem, 45vw, 25rem); object-position: right center; }
  #capital-aligned-with-commerce.section-photo--feature .section-photo__veil { inset: 0; background: linear-gradient(to bottom, oklch(11% .04 255 / .05) 0%, var(--navy-deep) 100%); }
  #capital-aligned-with-commerce.section-photo--feature .copy-section__grid { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; min-height: 0; gap: 1.25rem; padding-top: clamp(2rem, 6vw, 4rem); }
  #capital-aligned-with-commerce .copy-section__heading, #capital-aligned-with-commerce .copy-section__body { grid-column: 1; grid-row: auto; }
}

@media (max-width: 700px) {
  .copy-terms { grid-template-columns: 1fr; }
  .transaction-intelligence__layout { grid-template-columns: 1fr; gap: 3rem; }
  .transaction-intelligence__rail { max-width: 30rem; }
  .transaction-intelligence__copy { width: 100%; max-width: 29.9475rem; }
  .copy-section--banking { padding-bottom: 5rem; }
  .copy-section--capital-substance { min-height: 0; padding-top: 0; }
  .capital-substance__image { position: relative; width: 100%; min-width: 0; height: 18rem; }
  .capital-substance__image::after { background: linear-gradient(to bottom, oklch(11% .04 255 / .08) 0%, var(--navy-deep) 100%); }
  .capital-substance__layout { min-height: 0; padding-top: 3rem; }
  .capital-substance__copy { width: 100%; }
}

/* Sticky note (canvas, 2026-08-29): design-token #2 "Photo Stat Banner".
   GUI edit (canvas, same day): nested at the bottom of the homepage hero,
   which now bottom-aligns its content; the support paragraph is gone. */
html[lang="en"] .page-hero--global .page-hero__content { justify-content: flex-end; padding-bottom: 0; }
.gateway-banner__wrap { width: 100%; margin: 45px 0 90px; }
/* GUI edit (canvas, 2026-08-29): the banner's own photo card was stripped -
   it reads as plain type over the hero video now. */
.tk-banner { display: flex; align-items: center; }
.tk-banner__content { padding: 28px 0 0; border-top: 1px solid var(--line-dark); }
/* Source Serif 4 ships weight 400 only — 700 here synthesized a faux bold,
   and the upright em inverted the locked italic-emphasis signature
   (DESIGN-TOKENS.md §2). Weight 400 + true italic em, size carries the
   emphasis instead. */
.tk-banner__content h2 { margin: 0 0 12px; color: var(--paper); font: 400 clamp(1.8rem, 2.8vw, 2.6rem)/1.12 var(--display); letter-spacing: -.015em; }
.tk-banner__content h2 em { color: var(--accent); font-style: italic; }
/* Sub-line follows the locked micro-label spec (.66rem/.18em caps). */
.tk-banner__content p { margin: 0; color: oklch(78% .015 255); font: 400 .66rem/1.6 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.tk-banner__content .dot { color: var(--accent); }

/* One World Equation — "Connects the Path" replacement page (client mock,
   2026-08-29): hub-and-spoke pathway diagram on a cinematic dark ground. */
/* v2 environment (client mock one_world_equation_new.svg, 2026-09-01):
   cinematic three-panel collage — molten pour left, dawn port center,
   skyline right — warm and legible, answering "the current one looks too
   plain". Veil much lighter than v1; text areas keep their own tints. */
.eq-connect { position: relative; isolation: isolate; overflow: hidden; padding: clamp(60px, 7vw, 100px) 0 clamp(50px, 6vw, 80px); color: var(--paper); background: var(--navy-deep); }
/* Client comment YCOVZnFrlgW- (2026-09-16): single full-bleed image
   replaces the former 3-layer industrial/hero/metals triptych. */
.eq-connect__media { position: absolute; z-index: -3; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; filter: saturate(1.05) contrast(1.08) brightness(1.05); }
/* Lightened for the single client photo (YCOVZnFrlgW-, 2026-09-16): the
   prior values were tuned to blend a 3-panel triptych and buried this
   image's own subject under a near-solid center vignette. Top/bottom bands
   stay dark enough for the hero title and closing strip; the middle band
   (where the diagram cards carry their own navy fill) is now much lighter
   so the photo actually reads as the background. */
.eq-connect__veil { position: absolute; z-index: -2; inset: 0; background: linear-gradient(to bottom, oklch(9% .04 255 / .55) 0%, oklch(11% .04 255 / .28) 22%, oklch(11% .04 255 / .22) 70%, oklch(9% .04 255 / .6) 100%), radial-gradient(ellipse at center 42%, transparent 30%, oklch(10% .04 255 / .2) 100%); }
.eq-connect__content { display: flex; flex-direction: column; align-items: center; text-align: center; }
.eq-connect__kicker { display: flex; align-items: center; gap: 18px; margin: 0 0 26px; color: var(--gold); font: 400 .72rem/1.2 var(--body); letter-spacing: .3em; text-transform: uppercase; }
.eq-connect__rule { display: inline-block; width: 54px; height: 1px; background: color-mix(in oklch, var(--gold) 65%, transparent); }
/* Weight 400: the display face has no bold cut, 600 was synthesizing one.
   The composition (uppercase, gold em, centered) is the client's mock and
   stays; a slightly larger clamp keeps the presence the fake weight faked. */
.eq-connect__title { margin: 0 0 22px; font: 400 clamp(2.5rem, 4.6vw, 4.1rem)/1.08 var(--display); letter-spacing: .015em; text-transform: uppercase; }
.eq-connect__title em { color: var(--gold); font-style: normal; }
.eq-connect__lead { max-width: 56ch; margin: 0 0 clamp(40px, 5vw, 64px); color: oklch(85% .015 255); font-size: 1.05rem; line-height: 1.6; }
.eq-connect__diagram { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(24px, 3.5vw, 56px); width: 100%; margin-bottom: clamp(40px, 5vw, 64px); text-align: left; }
.eq-connect__col { display: grid; gap: 22px; }
/* radius 0: the 12px round was the only radius on the site — the decision
   record explicitly rejected Base44's rounded language, square is the
   structural signature everywhere else. */
/* Border lifted to 60% gold and the tint made near-opaque: at 45% over a
   translucent blur, the left cards (over dark photo) and right cards (over
   skyline) read as two different border colors (review finding #9). */
.eq-card { position: relative; display: flex; gap: 18px; align-items: flex-start; padding: 22px 24px; background: oklch(14% .04 255 / .92); border: 1px solid color-mix(in oklch, var(--gold) 60%, transparent); backdrop-filter: blur(4px); }
/* v2 photo-backed cards (mock 2026-09-01): each pathway carries its own
   scene from the approved pool, tinted hard on the text side so the copy
   never fights the image. */
.eq-card[class*="eq-card--"] { background-size: cover; background-position: center right; backdrop-filter: none; }
.eq-card--kizad { background-image: linear-gradient(90deg, oklch(9% .04 255 / .94) 42%, oklch(9% .04 255 / .62)), url("/assets/content/free-zone.webp"); }
.eq-card--government { background-image: linear-gradient(90deg, oklch(9% .04 255 / .94) 42%, oklch(9% .04 255 / .62)), url("/assets/content/government.webp"); }
.eq-card--aluminium { background-image: linear-gradient(90deg, oklch(9% .04 255 / .94) 42%, oklch(9% .04 255 / .58)), url("/assets/images/metals-smelter-coastal-aerial.jpg"); }
.eq-card--finance { background-image: linear-gradient(90deg, oklch(9% .04 255 / .94) 42%, oklch(9% .04 255 / .62)), url("/assets/content/banking-institution.jpg"); }
.eq-card--trade { background-image: linear-gradient(90deg, oklch(9% .04 255 / .94) 42%, oklch(9% .04 255 / .58)), url("/assets/images/industrial-container-ship-aerial.jpg"); }
.eq-card--global { background-image: linear-gradient(90deg, oklch(9% .04 255 / .94) 42%, oklch(9% .04 255 / .62)), url("/assets/images/nexus-client-globe-v02.jpg"); }
.eq-card__icon { flex: 0 0 auto; color: var(--gold); margin-top: 2px; }
.eq-card h3 { margin: 0 0 8px; color: var(--gold); font: 600 1.02rem/1.25 var(--body); letter-spacing: .06em; text-transform: uppercase; }
.eq-card p { margin: 0; color: oklch(88% .012 255); font-size: .9rem; line-height: 1.55; }
.eq-card .dot { color: var(--gold); }
/* Connectors span the full diagram gap and glow (v2 mock): a 2px lit line
   with a node dot at the hub end. */
.eq-connect__col--left .eq-card::after, .eq-connect__col--right .eq-card::before { content: ""; position: absolute; top: 50%; width: clamp(24px, 3.5vw, 56px); height: 2px; background: var(--map-gold); box-shadow: 0 0 9px rgba(217, 164, 65, .75); }
.eq-connect__col--left .eq-card::after { background: radial-gradient(circle 3px at right center, #f6d38b 0 3px, transparent 3px), var(--map-gold); }
.eq-connect__col--right .eq-card::before { background: radial-gradient(circle 3px at left center, #f6d38b 0 3px, transparent 3px), var(--map-gold); }
.eq-connect__col--left .eq-card::after { left: 100%; }
.eq-connect__col--right .eq-card::before { right: 100%; }
.eq-connect__hub { display: flex; align-items: center; justify-content: center; }
.eq-connect__globe { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; width: clamp(220px, 19vw, 270px); aspect-ratio: 1; border: 2px solid var(--gold); border-radius: 50%; background: radial-gradient(circle at 50% 35%, oklch(20% .05 255 / .95), oklch(11% .04 255 / .98) 75%); box-shadow: 0 0 80px oklch(74% .15 55 / .38), 0 0 24px oklch(74% .15 55 / .3), inset 0 0 46px oklch(74% .15 55 / .12); text-align: center; }
.eq-connect__globe b { font: 400 clamp(2.1rem, 3.1vw, 2.8rem)/1.05 var(--display); color: var(--paper); letter-spacing: .04em; }
.eq-connect__globe b em { color: var(--gold); font-style: normal; }
.eq-connect__globe span { color: oklch(80% .015 255); font: 400 .68rem/1.5 var(--body); letter-spacing: .18em; text-transform: uppercase; }
.eq-connect__closer { margin: 0 0 clamp(32px, 4vw, 48px); font: 400 clamp(1.7rem, 2.9vw, 2.6rem)/1.15 var(--display); letter-spacing: .015em; text-transform: uppercase; }
.eq-connect__closer em { color: var(--gold); font-style: normal; }
.eq-connect__strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; margin: 0; padding: 22px 0 0; list-style: none; border-top: 1px solid color-mix(in oklch, var(--gold) 35%, transparent); width: 100%; }
.eq-connect__strip li { display: flex; align-items: center; gap: 12px; padding: 6px 28px; color: oklch(88% .012 255); font: 500 .72rem/1.4 var(--body); letter-spacing: .12em; text-transform: uppercase; text-align: left; }
.eq-connect__strip li + li { border-left: 1px solid color-mix(in oklch, var(--gold) 30%, transparent); }
.eq-connect__strip svg { color: var(--gold); flex: 0 0 auto; }
@media (max-width: 980px) {
  .eq-connect__diagram { grid-template-columns: 1fr; }
  .eq-connect__hub { order: -1; margin-bottom: 10px; }
  .eq-connect__col--left .eq-card::after, .eq-connect__col--right .eq-card::before { display: none; }
  .eq-connect__media { opacity: .35; }
  .eq-connect__strip li + li { border-left: 0; }
}

/* ------------------------------------------------------------------
   Design pass (2026-08-29) — composition and rhythm corrections.
   Placed last deliberately: several rules must outrank the generic
   980px overrides earlier in the file.
   ------------------------------------------------------------------ */

/* NEXUS hero: 90svh was reserved for three lines of copy, leaving ~600px of
   raw black between the lead and the routes. Height now follows content;
   the globe keeps its right-column anchor. */
.page-hero--nexus { min-height: min(600px, 74svh); }
.page-hero--nexus .page-hero__content { min-height: min(600px, 74svh); padding-bottom: 70px; }
@media (max-width: 980px) {
  .page-hero--nexus .page-hero__content { min-height: min(620px, 80svh); }
}
.nexus-routes { padding-top: 96px; }

/* Homepage Commercial Equation: the media was a small floating rectangle and
   the copy column two thin lines — the section read unfinished. The formula
   headline takes real display scale, the media grows to counterweight it. */
.equation-evidence__header { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
/* Client comment Nik1W226X-1G (2026-09-03): the formula reads as one straight
   line — nowrap with fluid sizing so it always fits the shell; phones alone
   (≤700px) let it wrap, where a 52-character single line cannot stay legible. */
.equation-evidence__header h3 { max-width: none; white-space: nowrap; font-size: clamp(1.05rem, calc((100vw - 120px) / 29.5), 2.7rem); letter-spacing: -.015em; }
@media (max-width: 700px) {
  .equation-evidence__header h3 { white-space: normal; font-size: clamp(1.35rem, 4.6vw, 1.8rem); }
}
.equation-evidence__media .section-media img { height: clamp(17rem, 30vw, 24rem); }
.equation-evidence__copy > .copy-paragraph { font-size: 1.1rem; line-height: 1.7; }
/* Client ask (2026-09-15): "Execution creates the result." reads too small
   next to the paragraph above it — bump the shared h4/H5-tier size 20% for
   this instance only (the bare h4 rule is shared sitewide, see line ~129). */
.equation-evidence__copy h4 { font-size: .792rem; }

/* Trade / Capital Aligned With Commerce: the right-side photo was graded
   into invisibility under its veil — lift the media, ease the veil ramp. */
#capital-aligned-with-commerce.section-photo--feature .section-photo__media { filter: saturate(.85) contrast(1.08) brightness(1.18); }
#capital-aligned-with-commerce.section-photo--feature .section-photo__veil { background: linear-gradient(90deg, var(--navy-deep) 0%, oklch(11% .04 255 / .94) 34%, oklch(11% .04 255 / .38) 58%, oklch(11% .04 255 / .04) 100%); }

/* Arenas strip cover: the resting state is the section's front door, but its
   title rendered at card scale — promote it to the display tier so the band
   has an anchor instead of a caption. Open arena panels keep card scale. */
/* Client comment kaV68qGPtyRb (2026-09-03): "Arenas in orange" — the cover
   title joins the numbered arena titles on the accent. */
.arena-strip__panel--cover .arena-strip__title { color: var(--accent); font-size: clamp(2.2rem, 3.8vw, 3.8rem); letter-spacing: -.02em; line-height: 1.02; }
.arena-strip__panel--cover .arena-strip__body { max-width: 34rem; }
/* The strip is full-bleed but its text must sit on the page grid — on wide
   screens the fixed 46px inset left the cover title outside the visual
   margins (Harold, comment SZ2J7WCF3F7l). */
.arena-strip__panel--cover .arena-strip__content { margin-left: calc(max(46px, var(--shell-margin)) - 46px); }

/* Institutional lockup: filled gold badges were the one numbered component
   ignoring the site's ring-numeral language (.flow--progression got it
   right) — align it. */
.institution-lockup__node b { color: var(--accent); background: var(--navy-deep); border: 1px solid var(--accent); font: 400 .8rem/1 var(--display); }

/* Trade / capital-substance: same invisible-photo grade as its neighbor —
   lift the terminal image so the counterweight actually exists. */
.capital-substance__image img { filter: saturate(.82) contrast(1.06) brightness(1.18); }
/* Angle flipped to 270deg (image moved from right to left, comment
   ENNX_0di_9JE) so the opaque stop still sits against the copy, now on the
   image's right edge instead of its left. */
.capital-substance__image::after { background: linear-gradient(270deg, var(--navy-deep) 0%, oklch(11% .04 255 / .6) 30%, oklch(11% .04 255 / .04) 100%); }

/* Bank Intelligence Globe embed on /trade-finance/ (moved from NEXUS per
   client comment, 2026-09-01): the app is its own
   document in an iframe — a hairline-framed instrument at the bottom of the
   page. Height gives the app's internal layout room on desktop and lets its
   own mobile app-shell take over inside the frame on small screens. */
.globe-embed { padding-top: clamp(70px, 8vw, 110px); }
.globe-embed .section-kicker { margin-bottom: 26px; }
/* Client comment Iu9_xEg4ubf- (2026-09-10): drop the hairline border around
   the embed and add a narrower breakpoint so the frame isn't oversized on
   small phones. */
.globe-embed__frame { display: block; width: 100%; height: min(52rem, 92svh); border: 0; background: var(--navy-deep); }
@media (max-width: 820px) {
  .globe-embed__frame { height: min(46rem, 88svh); }
}
@media (max-width: 480px) {
  .globe-embed__frame { height: min(34rem, 80svh); }
}

/* ---- Independent review findings (2026-08-29) ---- */

/* #8: the instruments risk register is an <ol> that hid its own numbers
   behind arrow bullets — restore 01-10 as ring numerals, the site's one
   numbered-sequence primitive. */
#instruments .copy-terms--illustrated { counter-reset: instrument; }
#instruments .copy-terms--illustrated li { counter-increment: instrument; padding-left: 3.4rem; }
#instruments .copy-terms--illustrated li::before { content: counter(instrument, decimal-leading-zero); top: .95rem; left: .9rem; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border: 1px solid var(--accent); border-radius: 50%; color: var(--accent); font: 400 .7rem/1 var(--display); }
[dir="rtl"] #instruments .copy-terms--illustrated li { padding-left: 1rem; padding-right: 3.4rem; }
[dir="rtl"] #instruments .copy-terms--illustrated li::before { left: auto; right: .9rem; }

/* #4 (partial): the map gets the sidebar's full width above the region
   buttons instead of hiding beneath them, more column room overall, and
   the four smallest shapes drop their colliding labels unless active.
   Real simplified geography remains an asset request — see changelog. */
.bank-map__layout { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.bank-map__map { display: flex; flex-direction: column; }
.bank-map__svg { order: 1; }
.bank-map__zoom-out { order: 2; align-self: flex-start; margin: 16px 0 0; }
.bank-map__region-list { order: 3; margin: 16px 0 0; }
.bank-map__region-label { font-size: .8125rem; }
:is(g[data-market="LB"], g[data-market="PS"], g[data-market="BH"], g[data-market="KW"]) .bank-map__region-label { opacity: 0; transition: opacity var(--dur-fast) var(--ease); }
:is(g[data-market="LB"], g[data-market="PS"], g[data-market="BH"], g[data-market="KW"]):is(:hover, :focus-visible, .is-selected) .bank-map__region-label { opacity: 1; }
/* Below tablet the stylized map is illegible — the region buttons and panel
   carry the full experience. */
@media (max-width: 768px) {
  .bank-map__svg { display: none; }
  .bank-map__zoom-out, .bank-map__region-list { order: initial; margin: 0 0 16px; }
}

/* #11: secondary heroes sized to their content; the nexus globe floats on
   the ground via a radial feather instead of sitting in a seamed image box. */
.page-hero--map, .page-hero--map .page-hero__content { min-height: min(480px, 62svh); }
.page-hero--nexus .page-hero__media { -webkit-mask-image: radial-gradient(ellipse 62% 62% at center, black 52%, transparent 76%); mask-image: radial-gradient(ellipse 62% 62% at center, black 52%, transparent 76%); }

/* #12: the consultation form drops native UA chrome — square brand
   checkbox, styled select indicator, a real resting border on fields, and
   the acknowledgment lifted off micro size. */
.consultation-form input:not([type=checkbox]), .consultation-form select, .consultation-form textarea { border-color: rgba(17,24,39,.18); }
.consultation-form select { appearance: none; -webkit-appearance: none; padding-right: 40px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%231e293b' stroke-width='1.5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; }
[dir="rtl"] .consultation-form select { padding-right: 14px; padding-left: 40px; background-position: left 14px center; }
.consultation-form__privacy input { appearance: none; -webkit-appearance: none; display: grid; place-content: center; width: 18px; height: 18px; margin: 0; background: var(--paper); border: 1px solid rgba(17,24,39,.35); border-radius: 0; cursor: pointer; transition: background var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.consultation-form__privacy input:checked { background: var(--accent); border-color: var(--accent); }
.consultation-form__privacy input:checked::before { content: ""; width: 10px; height: 8px; background: var(--navy); clip-path: polygon(14% 44%, 0 62%, 40% 100%, 100% 16%, 84% 0, 38% 66%); }
.consultation-form__privacy label { font-size: .75rem; }

/* #13: draft legal pages (privacy/terms) — client comments ve8lg1HJMRba /
   W1_-VJz3_ZPj, "not compliant with the site's design system". Long-form
   clause text needs its own, narrower measure and restrained heading scale
   rather than the marketing pages' display-size h2. */
.legal-page__shell { max-width: 42rem; padding-top: 96px; padding-bottom: 96px; }
.legal-page__back { display: inline-block; margin-bottom: 40px; color: var(--muted); font-size: .875rem; text-decoration: none; }
.legal-page__back:hover, .legal-page__back:focus-visible { color: var(--accent); }
.legal-page h1 { font-size: clamp(2rem, 4vw, 2.75rem); }
.legal-page h2 { margin-top: 44px; font-size: 1.375rem; }
.legal-page__link { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal-page__link:hover, .legal-page__link:focus-visible { color: var(--paper); }