/* ==========================================================================
   ENPRAMEX GLOBAL — Design System (2026 brand refresh, green retired)
   Corporate blue #0A1D3D · brand red #85182A · ink black #07121F on a
   deep-navy/steel neutral scale. Manrope type. Light + dark. WCAG-aligned.
   Energy green #1D7A43 is scoped to the Green Approach page only — see
   main.theme-green below; every other section replaces it with black/white.
   ========================================================================== */

/* ------------------------------ Tokens ---------------------------------- */
:root {
  /* Brand */
  --navy:      #0A1D3D;   --navy-rgb: 10,29,61;     /* corporate blue */
  --ink:       #07121F;   --ink-rgb: 7,18,31;       /* deep navy — dark surfaces */
  --title:     #333A44;   /* dark grey/silver for h1–h4 (Aug 2026 typography refinement) —
                              distinct from --ink: titles read as sophisticated dark grey,
                              never pure black */
  --red:       #85182A;   --red-rgb: 133,24,42;     /* primary brand red */
  --green:     #1D7A43;   --green-rgb: 29,122,67;   /* Green Approach page only — see main.theme-green; lightened Aug 2026 (was #004225) so the page reads as living plant-green, not near-black */
  --red-bright: #E5484D;  --red-bright-rgb: 229,72,77;    /* on-dark down states */
  --ico-blue: #2D6BCC; --ico-blue-rgb: 45,107,204; /* icon accent — the ONE blue every card icon shows in every state,
                                                      theme and badge style; mid-tone so it reads on light and dark alike */
  --gold:      #495463;   --gold-rgb: 73,84,99;     /* steel — neutral accent (ex-gold) */
  --paper:     #F7F9FB;   --paper-rgb: 247,249,251;
  --white:     #FFFFFF;
  --slate:     #495463;   /* steel */
  --muted:     #9AA5B5;
  --line:      #D9DDE3;   /* cloud gray */

  /* Semantic (light scheme default) */
  --bg:        var(--paper);
  --surface:   var(--white);
  --surface-2: #EEF2F5;
  --text:      var(--ink);
  --text-2:    var(--slate);
  --hair:      var(--line);
  --accent:    var(--red);
  --accent-2:  var(--ink);   /* unused today; kept black rather than green so any future use stays on-brand */
  --on-accent: #FFFFFF;

  /* Band surfaces (Aug 2026, user request): every flat deep-navy/ink band —
     topbar, navbar, heroes, CTA band, market ticker, product-market band,
     dmap band, footer, gateway — was re-skinned to light off-white grey.
     These tokens carry that scheme; the dark theme maps them back to dark
     surfaces so dark mode stays dark. Photo scrims (.page-hero--photo,
     .media-band) keep their dark overlays — those are image-legibility
     washes, not navy surfaces. */
  --band:        #EEF1F4;
  --band-deep:   #E4E8ED;
  --band-text:   var(--ink);
  --band-text-2: var(--slate);
  --band-hair:   rgba(7, 18, 31, .14);
  --band-chip:   rgba(7, 18, 31, .05);
  --band-chip-2: rgba(7, 18, 31, .1);
  --scrim-rgb:   238, 241, 244;   /* hero text-legibility scrim over imagery */

  /* Type — Manrope primary, Inter alternative (2026 brand kit) */
  --f-display: 'Manrope', 'Inter', system-ui, sans-serif;
  --f-body:    'Manrope', 'Inter', system-ui, sans-serif;
  --f-serif:   'Newsreader', Georgia, serif;

  --step--1: clamp(.8rem, .78rem + .1vw, .875rem);
  --step-0:  clamp(1rem, .96rem + .2vw, 1.0625rem);
  --step-1:  clamp(1.2rem, 1.1rem + .5vw, 1.375rem);
  /* step-2..5 cut 20% (Aug 2026 typography refinement — smaller, sophisticated
     titles sitewide); step--1/0/1 (labels/body/lede) are untouched. */
  --step-2:  clamp(1.2rem, 1.04rem + .8vw, 1.52rem);
  --step-3:  clamp(1.6rem, 1.28rem + 1.44vw, 2.28rem);
  --step-4:  clamp(2.08rem, 1.6rem + 2.4vw, 3.4rem);
  --step-5:  clamp(2.56rem, 1.84rem + 3.52vw, 4.6rem);

  /* Space (8pt rhythm) */
  --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-5: 1.5rem;
  --s-6: 2rem;  --s-7: 3rem;  --s-8: 4rem;  --s-9: 6rem;  --s-10: 8rem;

  --wrap: 1280px;
  --radius: 12px;      /* buttons & inputs */
  --radius-lg: 16px;   /* cards */
  --radius-xl: 24px;   /* containers & modals */
  --shadow-1: 0 1px 2px rgba(var(--ink-rgb), .06), 0 2px 8px rgba(var(--ink-rgb), .05);
  --shadow-2: 0 8px 24px rgba(var(--ink-rgb), .10), 0 2px 6px rgba(var(--ink-rgb), .06);
  --shadow-3: 0 24px 60px rgba(var(--ink-rgb), .16);
  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --dur: .24s;
}

:root[data-theme="dark"] {
  --bg:        var(--ink);
  --surface:   #0F1E30;   /* decoupled from --navy: #0A1D3D is an accent, not a surface */
  --surface-2: #0B1826;
  --text:      #E9EDF2;
  --title:     #D7DCE3;   /* soft silver, not pure white — keeps titles off pure-black/white in both themes */
  --text-2:    var(--muted);
  --hair:      rgba(255,255,255,.12);
  --on-accent: #FFFFFF;
  --band:        #0F1E30;
  --band-deep:   #0B1826;
  --band-text:   #E9EDF2;
  --band-text-2: var(--muted);
  --band-hair:   rgba(255, 255, 255, .12);
  --band-chip:   rgba(255, 255, 255, .06);
  --band-chip-2: rgba(255, 255, 255, .14);
  --scrim-rgb:   7, 18, 31;
  --shadow-1: 0 1px 2px rgba(0,0,0,.4);
  --shadow-2: 0 10px 30px rgba(0,0,0,.5);
  --shadow-3: 0 24px 60px rgba(0,0,0,.6);
}

/* ------------------------------ Reset ----------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Clears the sticky .site-header (topbar + navbar, ~114px) when jumping to an in-page anchor. */
[id] { scroll-margin-top: 130px; }

body {
  font-family: var(--f-body);
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { list-style: none; padding: 0; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 2px; }

h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 700; line-height: 1.08; letter-spacing: -.02em; color: var(--title); }
h1 { font-size: var(--step-4); }
h2 { font-size: var(--step-3); }
h3 { font-size: var(--step-2); }

/* ------------------------------ Layout ---------------------------------- */
.wrap { width: min(100% - 0.5rem, var(--wrap)); margin-inline: auto; }
/* Full-bleed section rhythm (Aug 2026, user request): every top-level band
   under <main> — hero, .section, .media-band, .cta-band, map bands, the
   home's .section--photo interludes — used to butt directly against the
   next with zero gap, so a dark photo band could cut straight into the next
   band's different-colored surface with no breathing room. A flat --s-5
   (1.5rem) top margin on every direct child of <main> after the first gives
   each band a beat of body-colored ("--bg") space on every page site-wide,
   without touching each band's own internal padding. display:none children
   (the odd noscript) take no box, so this is a no-op for them. */
main > * + * { margin-top: var(--s-5); }
/* .accordion-panel (united-states.html's USA accordion) is a real DOM sibling
   between the hero and the next section even while collapsed to 0 height via
   grid-template-rows, so it still matches the rule above — stacking its own
   var(--s-5) with the following section's, doubling the gap to 3rem when
   collapsed. Zeroing its own top margin leaves exactly one var(--s-5) gap
   (contributed by whatever follows it) whether the panel is open or closed. */
main > .accordion-panel { margin-top: 0; }
.section { padding-block: clamp(3.5rem, 7vw, 7rem); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4.5rem); }
.grid { display: grid; gap: var(--s-6); }
.eyebrow {
  font-family: var(--f-display);
  font-size: var(--step--1); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); display: inline-flex; align-items: center; gap: .6rem;
}
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--accent); display: inline-block; }
.lede { font-size: var(--step-1); color: var(--text-2); max-width: 60ch; line-height: 1.55; }
.section-head { max-width: 62ch; margin-bottom: var(--s-7); }
/* --s-6, not --s-3: the eyebrow needs real air under it before the display
   title, matching the .prose eyebrow→h2 rhythm the region pages already use.
   Stays under the head's own --s-7 bottom margin so the pair still reads as
   one unit rather than two loose lines. */
.section-head h2 { margin-top: var(--s-6); }
.skip-link { position: absolute; left: -999px; top: 0; background: var(--navy); color: #fff; padding: .75rem 1.25rem; z-index: 200; }
.skip-link:focus { left: var(--s-4); top: var(--s-4); }
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; z-index: 210; background: #fff; width: var(--p, 0%); transition: width 80ms linear; }
@media (prefers-reduced-motion: reduce) { .scroll-progress { display: none; } }

/* ------------------------------ Buttons --------------------------------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--f-display); font-weight: 600; font-size: var(--step--1);
  letter-spacing: .02em; padding: .85rem 1.5rem; border-radius: var(--radius);
  border: 1.5px solid transparent; min-height: 46px;
  transition: transform var(--dur) var(--ease), background var(--dur) var(--ease),
              color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
              letter-spacing var(--dur) var(--ease);
}
/* magnetic shimmer sweep on hover — ported from the brand reskin */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(115deg, transparent 25%, rgba(255,255,255,.5) 50%, transparent 75%);
  transform: translateX(-120%); transition: transform .75s cubic-bezier(.2,.7,.2,1); pointer-events: none;
}
.btn:hover::before { transform: translateX(120%); }
.btn > * { position: relative; z-index: 1; }
.btn svg { width: 18px; height: 18px; transition: transform .32s cubic-bezier(.2,.7,.2,1); }
.btn:hover { transform: translateY(-2px); letter-spacing: .03em; }
.btn:hover svg { transform: translate(3px, -3px) rotate(-2deg); }
.btn:active { transform: translateY(0); }
/* Brand kit: primary = corporate blue, hover = brand red */
.btn--primary { background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgba(var(--navy-rgb), .28); }
.btn--primary:hover { background: var(--red); box-shadow: 0 10px 26px rgba(var(--red-rgb), .34); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--red); }
/* Brand kit secondary: blue outline, fills blue on hover (light surfaces) */
.btn--ghost { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--ghost:hover { border-color: var(--navy); background: var(--navy); color: #fff; }
:root[data-theme="dark"] .btn--ghost { color: var(--text); border-color: var(--hair); }
:root[data-theme="dark"] .btn--ghost:hover { background: var(--surface-2); color: var(--text); }
.navbar .btn--primary, .page-hero .btn--primary, .hero .btn--primary { background: var(--red); box-shadow: 0 6px 18px rgba(var(--red-rgb), .30); }
.navbar .btn--primary:hover, .page-hero .btn--primary:hover, .hero .btn--primary:hover { background: #6E1423; }
/* CTA band is a light surface now — the default navy primary reads on it;
   dark theme (dark band) keeps the old white button. Green Approach keeps
   its white-on-green button. */
:root[data-theme="dark"] .cta-band .btn--primary { background: #fff; color: var(--ink); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
main.theme-green .cta-band .btn--primary { background: #fff; color: var(--green); box-shadow: 0 6px 18px rgba(19,46,28,.35); }
.cta-band .btn--primary:hover, main.theme-green .cta-band .btn--primary:hover { background: var(--red); color: #fff; }
/* Secondary button for the home hero, sole usage. Was token-based
   (--band-chip/--band-text) for the old light video-wash hero, reading as a
   quiet dark-outline chip — the Aug 2026 hero--photo swap made the hero
   genuinely dark, and those same light-band tokens rendered near-black text
   on a near-black chip (illegible). Hardcoded to a real "on dark" white
   translucent chip instead, matching .page-hero--photo's white-text
   convention rather than chasing band tokens that no longer fit here. */
.btn--onDark { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .32); backdrop-filter: blur(6px); }
.btn--onDark:hover { background: rgba(255, 255, 255, .2); }
.btn--lg { padding: 1.05rem 1.9rem; min-height: 56px; font-size: var(--step-0); }

/* ------------------------------ Header ---------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(var(--ink-rgb), .0);
}
.topbar {
  background: var(--band-deep); color: var(--band-text-2); font-size: var(--step--1);
  border-bottom: 1px solid var(--band-hair);
}
.topbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 40px; gap: var(--s-5); flex-wrap: nowrap; }
.topbar a { color: var(--band-text-2); opacity: .85; transition: opacity var(--dur), text-decoration-color var(--dur); text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 3px; }
.topbar a:hover { opacity: 1; color: var(--band-text); text-decoration-color: currentColor; }
.topbar__meta { display: flex; align-items: center; gap: var(--s-5); min-width: 0; }
.topbar__meta:first-child { flex: 1 1 auto; overflow: hidden; }
.topbar__meta:last-child { flex: none; }
.topbar__meta span, .topbar__meta > a { display: inline-flex; align-items: center; gap: .4rem; }
.topbar__meta:first-child span {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.switcher { display: inline-flex; gap: .2rem; align-items: center; }
.switcher button {
  background: transparent; border: 0; color: var(--band-text-2); font-size: var(--step--1);
  font-family: var(--f-display); font-weight: 600; padding: .2rem .45rem; border-radius: 3px;
}
.switcher button[aria-pressed="true"] { color: var(--band-text); background: var(--band-chip-2); }
.topbar .sep { width: 1px; height: 16px; background: var(--band-hair); }

.navbar { background: var(--band); color: var(--band-text); box-shadow: var(--shadow-1); }
:root[data-theme="dark"] .navbar { background: var(--surface); border-bottom: 1px solid var(--hair); }
.navbar .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 74px; gap: var(--s-4); }
.brand { display: inline-flex; align-items: center; gap: .75rem; flex: none; }
.brand__logo { height: 34px; width: auto; display: block; }
.site-footer .brand__logo { height: 30px; }
.brand__mark { width: 40px; height: 40px; flex: none; background: #fff; border-radius: 10px; padding: 4px; box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--band-hair); }
.brand__name { font-family: var(--f-display); font-weight: 800; letter-spacing: .01em; line-height: 1; color: var(--band-text); white-space: nowrap; }
.brand__name b { color: var(--band-text); white-space: nowrap; }
.brand__name span { display: block; font-size: 10px; font-weight: 600; letter-spacing: .24em; color: var(--muted); text-transform: uppercase; margin-top: 3px; white-space: nowrap; }

.mainnav { display: flex; align-items: center; gap: var(--s-2); }
.navlink--mobile-contact { display: none; }
.mainnav > ul { display: flex; align-items: center; gap: 2px; }
.mainnav a.navlink {
  display: inline-flex; align-items: center; gap: .26rem; color: var(--band-text-2); white-space: nowrap;
  font-family: var(--f-display); font-weight: 500; font-size: .875rem;
  padding: .5rem .5rem; border-radius: var(--radius); position: relative;
  transition: color var(--dur), background var(--dur);
}
.mainnav a.navlink:hover, .mainnav a.navlink[aria-current="page"] { color: var(--band-text); background: var(--band-chip); }
.mainnav a.navlink[aria-current="page"]::after {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: -2px; height: 2px; background: var(--red);
}
.nav-cta { display: inline-flex; align-items: center; gap: var(--s-3); }

.nav-toggle { display: none; background: transparent; border: 0; color: var(--band-text); width: 46px; height: 46px; }
.nav-toggle svg { width: 26px; height: 26px; }

/* ------------------------------ Hero ------------------------------------ */
.hero { position: relative; background: var(--band); color: var(--band-text); overflow: hidden; isolation: isolate; }
/* .hero__canvas (flow-field particles) was retired (Aug 2026, What We Do
   merge) in favor of one static photo — see .hero--photo below. Its markup
   is gone from build.mjs so this rule is dead/no-op; left in place rather
   than pruned, matching how the retired dark-mode toggle CSS was handled.
   .hero__video (Vimeo background) was reinstated (Sep 2026, user request)
   on top of the .hero--photo image — see the z-index note on
   .hero.hero--photo::before below. */
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -2; opacity: .9; }
.hero::after { /* faint overall wash — image stays almost fully visible */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 100% at 85% 0%, rgba(var(--red-rgb), .08), transparent 55%),
    linear-gradient(180deg, rgba(var(--scrim-rgb), .1) 0%, rgba(var(--scrim-rgb), .1) 80%, rgba(var(--scrim-rgb), .3) 100%);
}
.hero .wrap { position: relative; padding-block: clamp(4.5rem, 12vh, 9rem) clamp(3.5rem, 9vh, 7rem); }
.hero__inner { max-width: 46rem; position: relative; }
.hero__inner::before { /* localized shade so copy stays legible over the now-lighter image;
  fade zone is a fixed 14rem measured back from the box's own right edge, so it always
  lands just past the text column regardless of viewport width. */
  content: ""; position: absolute; z-index: -1;
  inset: -2.5rem -3rem -2.5rem -100vw;
  background: linear-gradient(90deg, rgba(var(--scrim-rgb), .85) 0, rgba(var(--scrim-rgb), .85) calc(100% - 14rem), rgba(var(--scrim-rgb), 0) 100%);
}
.hero h1 { font-size: var(--step-5); margin: var(--s-4) 0 var(--s-5); }
.hero h1 .accent { color: var(--band-text); position: relative; }
.hero h1 .thin { font-family: var(--f-serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--band-text-2); }
.hero__lede { font-size: var(--step-1); color: var(--band-text-2); max-width: 42ch; line-height: 1.5; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-4); margin-top: var(--s-7); }
.hero__scroll { display: inline-flex; align-items: center; gap: .5rem; color: var(--band-text-2); font-size: var(--step--1); margin-top: var(--s-8); font-family: var(--f-display); letter-spacing: .1em; text-transform: uppercase; }

/* Home hero photo variant (Aug 2026) — set the image with
   style="--hero-img:url('/assets/img/hero/x.jpg')" on the <section>, same
   convention as .page-hero--photo on interior pages. The rules above this
   point (.hero::after's light wash, .hero__inner::before's light-to-clear
   scrim) were tuned for the old bright video background and dark ink text;
   this real photo is dark, so it gets its own dark scrim + white text
   instead of inheriting those, via the higher-specificity .hero.hero--photo
   selector (order-independent override, not a cascade-position gamble). */
.hero.hero--photo::before {
  /* z-index -3, one behind .hero__video's -2 (Sep 2026, user request): the
     photo is the instant-paint layer (no load delay, no flash of navy),
     and the Vimeo background video fades in on top of it once the Player
     API confirms real playback (see "Home hero video reveal" in main.js) —
     under prefers-reduced-motion .hero__video is display:none, so this
     photo is what actually shows in that case. On the home hero specifically
     this "photo" IS the video's own first frame (IMG.homeHeroVideoPoster,
     pulled from Vimeo's thumbnail), not a separate image — so there's no
     visual swap when the video fades in, only motion starting. */
  content: ""; position: absolute; inset: 0; z-index: -3;
  background-image: var(--hero-img); background-size: cover; background-position: center;
  filter: contrast(1.05) saturate(.94) brightness(.97);
}
.hero.hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(90% 120% at 92% -10%, rgba(var(--red-rgb), .16), transparent 55%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .3) 0%, rgba(var(--ink-rgb), .58) 55%, rgba(var(--ink-rgb), .88) 100%);
}
.hero.hero--photo .hero__inner::before { content: none; }
.hero.hero--photo h1,
.hero.hero--photo h1 .accent,
.hero.hero--photo .hero__scroll { color: #fff; }
.hero.hero--photo h1 .thin,
.hero.hero--photo .hero__lede { color: #D9DDE3; }
@media (prefers-reduced-motion: no-preference) {
  .hero.hero--photo::before { animation: eg-ken-burns 24s ease-in-out infinite alternate; }
}

/* trust ticker */
.ticker { border-top: 1px solid var(--band-hair); border-bottom: 1px solid var(--band-hair); background: var(--band-chip); }
.ticker .wrap { display: flex; align-items: center; gap: var(--s-6); flex-wrap: wrap; padding-block: var(--s-4); }
.ticker__label { font-family: var(--f-display); font-size: var(--step--1); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.ticker__items { display: flex; gap: var(--s-6); flex-wrap: wrap; color: var(--band-text-2); font-weight: 500; }
.ticker__items span { display: inline-flex; align-items: center; gap: .5rem; }
.ticker__items svg { width: 18px; height: 18px; color: var(--band-text); }
@media (max-width: 620px) {
  .ticker .wrap { flex-direction: column; align-items: flex-start; gap: var(--s-3); padding-block: var(--s-4); }
  .ticker__items { flex-direction: column; align-items: flex-start; gap: var(--s-3); }
}

/* ------------------------------ Stats / credibility --------------------- */
.stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-6); }
.stat { position: relative; padding: var(--s-5) 0; border-top: 3px solid var(--navy); }
.stat__num { font-family: var(--f-display); font-weight: 800; font-size: var(--step-3); line-height: 1; color: var(--navy); letter-spacing: -.03em; }
:root[data-theme="dark"] .stat__num { color: #fff; }
.stat__label { color: var(--text-2); margin-top: var(--s-2); font-size: var(--step--1); }
.badge-illustrative {
  position: absolute; top: var(--s-3); right: 0; font-size: 10px; font-family: var(--f-display); font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
  border: 1px solid var(--hair); border-radius: 999px; padding: .1rem .5rem;
}

/* ------------------------------ Audience paths -------------------------- */
.paths { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); }
.paths--3 { grid-template-columns: repeat(3, 1fr); }
.paths--2 { grid-template-columns: repeat(2, 1fr); }
.paths--1 { grid-template-columns: minmax(0, 420px); justify-content: center; }
.path {
  display: flex; flex-direction: column; gap: var(--s-3); padding: var(--s-6) var(--s-5);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur);
}
.path:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--navy); }
/* Icons show the same blue at rest as on hover, in both themes and on both
   badge styles — no per-theme or per-state color variants. */
.path__icon { width: 44px; height: 44px; display: grid; place-items: center; color: var(--ico-blue); background: var(--surface-2); border-radius: var(--radius); }
.path__icon svg { width: 24px; height: 24px; }
.path h3 { font-size: var(--step-2); line-height: 1.15; }
.path p { color: var(--text-2); font-size: var(--step--1); flex: 1; }
.path__link { color: var(--accent); font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); display: inline-flex; align-items: center; gap: .4rem; background: none; border: 0; padding: 0; text-align: left; }
.path:hover .path__link svg { transform: translateX(4px); }
.path__link svg { width: 16px; height: 16px; transition: transform var(--dur) var(--ease); }

/* Real Pemex wordmark above the brand-heritage heading (united-states.html
   only) — object-fit so the transparent PNG's aspect ratio never distorts. */
.brandstory__logo { height: 56px; width: auto; object-fit: contain; margin-bottom: var(--s-4); }

/* ------------------------------ Card icon motion ------------------------- */
/* One effect, one color, everywhere (July 2026). Every card icon hovers the
   same way: the badge tints, the glyph floods with color where it carries an
   .ico-fill, a ring + sparkle burst fires, and the glyph does a single
   spring lift-and-settle. The old per-glyph gestures and red/blue/black
   :has() color clusters were retired — sibling cards hovered in different
   colors (mail red next to shield blue on careers) and different motions,
   which read as inconsistent side by side. The unified accent is --ico-blue,
   a mid-tone corporate blue chosen to read on light and dark surfaces alike —
   the same value in every state, theme and badge style (an earlier pass used
   a lighter blue in dark theme, which itself read as "different colors").
   Green stays scoped to the Green Approach page via the main.theme-green
   override below. Pure CSS; motion stays behind the hover + reduced-motion
   media gates so touch and reduced-motion get color only. */
.path__icon {
  position: relative; --ico-color: var(--ico-blue); --ico-rgb: var(--ico-blue-rgb);
  transition: background-color .45s var(--ease), box-shadow .45s var(--ease), color .45s var(--ease);
}
main.theme-green .path__icon { --ico-color: var(--green-2); --ico-rgb: var(--green-2-rgb); }
.path__icon svg, .flow-step__dot svg { transform-origin: center; }
.ico-fill {
  transform-box: fill-box; transform-origin: bottom;
  transform: scaleY(0); opacity: 0;
  transition: transform .6s var(--ease-spring), opacity .5s var(--ease);
}
/* While the envelope is flooded, its flap stroke would sink into the fill
   (same color) and the glyph would read as a plain solid rectangle — knock
   the flap out to the surface color so it still reads as mail. */
.ico-mail path { transition: stroke .45s var(--ease); }
:is(.path, .flow-step):is(:hover, :focus-within, .ico-live) .ico-mail path { stroke: var(--surface); }

/* Ship / plane / truck carry real detail (hull + cabin, fuselage + wings,
   cab + rig) on wide viewBoxes, but stay in the same 44px badge and 24px
   glyph box as every other icon — SVG's default preserveAspectRatio scales
   them to fit without distortion, just more compact than the square glyphs. */

/* Ring burst + sparkle cluster — extra elements that fire alongside the glyph */
.path__icon::before, .path__icon::after { content: ""; position: absolute; left: 50%; top: 50%; pointer-events: none; opacity: 0; }
.path__icon::before {
  width: 44px; height: 44px; margin: -22px 0 0 -22px; border-radius: 50%;
  border: 2px solid var(--ico-color);
}
.path__icon::after {
  width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px; border-radius: 50%;
  background: var(--ico-color);
  box-shadow: 13px -15px 0 -1px var(--ico-color), -14px -11px 0 -1.5px var(--ico-color), 3px 17px 0 -1.5px var(--ico-color);
}

@keyframes eg-ico-lift   { 0% { transform: translateY(0) scale(1); } 40% { transform: translateY(-4px) scale(1.16); } 70% { transform: translateY(1px) scale(.98); } 100% { transform: translateY(0) scale(1); } }
@keyframes eg-ico-ring   { 0% { opacity: .6; transform: scale(.5); } 100% { opacity: 0; transform: scale(1.9); } }
@keyframes eg-ico-sparkle{ 0% { opacity: 0; transform: translateY(0) scale(.3); } 30% { opacity: 1; transform: translateY(-5px) scale(1.1); } 100% { opacity: 0; transform: translateY(-20px) scale(.5); } }

/* Active state — reached by hover/focus on pointer devices, or by the
   .ico-live class main.js toggles when a card scrolls into view on touch
   devices (iOS etc.), so mobile gets the exact same design as desktop.
   Color is applied unconditionally; motion stays behind reduced-motion. */
.path:is(:hover, :focus-within, .ico-live) .path__icon {
  color: var(--ico-color); background-color: rgba(var(--ico-rgb), .18);
  box-shadow: inset 0 0 0 1px rgba(var(--ico-rgb), .4);
}
:is(.path, .flow-step):is(:hover, :focus-within, .ico-live) .ico-fill { transform: scaleY(1); opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  .path:is(:hover, :focus-within, .ico-live) .path__icon::before { animation: eg-ico-ring .85s var(--ease) 1; }
  .path:is(:hover, :focus-within, .ico-live) .path__icon::after  { animation: eg-ico-sparkle 1s var(--ease) 1; }

  /* One shared gesture — every glyph does the same spring lift-and-settle,
     playing once on hover-in / scroll-in. */
  :is(.path, .flow-step):is(:hover, :focus-within, .ico-live) :is(.path__icon, .flow-step__dot) > svg { animation: eg-ico-lift .7s var(--ease-spring) 1; }
}

/* ------------------------------ Commodities ----------------------------- */
/* Text-forward corporate tiles (Aug 2026 — card photography removed
   site-wide): code eyebrow, large title, copy and tags on a flat surface
   with the navy/red accent bar carrying the brand. */
.commodities { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.commodity {
  position: relative; padding: 0; border-radius: var(--radius-lg); overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair); box-shadow: var(--shadow-1);
  display: flex; flex-direction: column;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.commodity::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--navy); transition: background var(--dur); z-index: 2; }
.commodity:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.commodity:hover::before { background: var(--red); }
.commodity__body { padding: var(--s-5) var(--s-6) var(--s-6); display: flex; flex-direction: column; flex: 1; }
.commodity__code { font-family: var(--f-display); font-size: var(--step--1); font-weight: 600; letter-spacing: .12em; color: var(--slate); text-transform: uppercase; }
.commodity h3 { font-size: var(--step-2); line-height: 1.15; margin: var(--s-2) 0 var(--s-3); }
.commodity p { color: var(--text-2); font-size: var(--step--1); }
.commodity__tags { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s-4); }
.tag { font-size: 11px; font-family: var(--f-display); font-weight: 600; letter-spacing: .04em; color: var(--navy); background: var(--surface-2); border-radius: 999px; padding: .25rem .6rem; }
:root[data-theme="dark"] .tag { color: #D9DDE3; }

/* ------------------------------ Feature split --------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.split--dark { background: var(--band); color: var(--band-text); border-radius: var(--radius-lg); overflow: hidden; }
.heritage-figure {
  position: relative; border-radius: var(--radius-lg); overflow: hidden; min-height: 420px;
  background: linear-gradient(160deg, var(--band), var(--band-deep));
  border: 1px solid var(--hair); display: grid; place-items: center;
}
.heritage-figure__year { font-family: var(--f-display); font-weight: 800; font-size: clamp(4rem, 12vw, 9rem); color: rgba(var(--ink-rgb),.08); letter-spacing: -.04em; }
:root[data-theme="dark"] .heritage-figure__year { color: rgba(255,255,255,.08); }
.heritage-figure__stripe { position: absolute; left: 0; right: 0; bottom: 0; height: 8px; background: linear-gradient(90deg, var(--red) 0%, var(--navy) 100%); opacity: .9; }
.timeline { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.timeline li { display: grid; grid-template-columns: 84px 1fr; gap: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--hair); }
.timeline b { font-family: var(--f-display); color: var(--accent); font-size: var(--step-1); }
.timeline span { color: var(--text-2); }
.split--dark .timeline span { color: var(--band-text-2); }
.split--dark .timeline li { border-color: var(--band-hair); }

/* ------------------------------ Regions --------------------------------- */
.regions { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); }
.region {
  padding: var(--s-6); border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--hair); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.region:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.region__flagrow { display: flex; align-items: center; gap: .6rem; color: var(--slate); font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; }
.region__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(var(--ink-rgb), .15); }
.region__dot--soon { background: var(--gold); box-shadow: 0 0 0 4px rgba(var(--gold-rgb), .18); }
.region h3 { font-size: var(--step-2); line-height: 1.15; margin: var(--s-3) 0 var(--s-2); }
.region p { color: var(--text-2); font-size: var(--step--1); }

/* ------------------------------ Placeholder card (§12) ------------------ */
.gov-card {
  border: 1.5px dashed var(--slate); border-radius: var(--radius-lg); padding: clamp(2rem, 4vw, 3rem);
  background: var(--surface); position: relative;
}
.gov-card__flag {
  position: absolute; top: -12px; left: var(--s-6); background: var(--gold); color: #fff;
  font-family: var(--f-display); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  padding: .3rem .7rem; border-radius: 3px;
}
.gov-card h3 { font-size: var(--step-2); margin-bottom: var(--s-3); }
.gov-card p { color: var(--text-2); max-width: 62ch; }
.gov-card__caps { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }
.gov-card__caps span { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); color: var(--navy); border: 1px solid var(--hair); border-radius: 999px; padding: .45rem .9rem; }
:root[data-theme="dark"] .gov-card__caps span { color: #D9DDE3; }

/* ------------------------------ CTA band -------------------------------- */
/* Black by default; the Green Approach page keeps the original deep-green
   band via main.theme-green overrides below the Green Approach section. */
.cta-band { background: var(--band); color: var(--band-text); position: relative; overflow: hidden; }
.cta-band::before { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.45), transparent 60%); }
:root[data-theme="dark"] .cta-band::before { background: radial-gradient(80% 120% at 100% 0%, rgba(255,255,255,.08), transparent 60%); }
.cta-band .wrap { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--s-6); flex-wrap: wrap; }
.cta-band h2 { max-width: 20ch; }
.cta-band p { color: var(--band-text-2); max-width: 46ch; margin-top: var(--s-3); }

/* ------------------------------ Forms ----------------------------------- */
.form-card { background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: clamp(1.75rem, 4vw, 2.75rem); }
.field { margin-bottom: var(--s-5); }
.field label { display: block; font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); margin-bottom: .45rem; }
.field .req { color: var(--red); }
.field input, .field select, .field textarea {
  width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1.5px solid var(--hair); border-radius: var(--radius); padding: .8rem .95rem; min-height: 48px;
  transition: border-color var(--dur), box-shadow var(--dur);
}
.field textarea { min-height: 130px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .12); }
.field .helper { font-size: var(--step--1); color: var(--text-2); margin-top: .4rem; }
.field .error { display: none; color: var(--red); font-size: var(--step--1); margin-top: .4rem; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: var(--red); }
.field.invalid .error { display: block; }
.field--captcha { margin-block: var(--s-2) var(--s-3); }
.field--captcha .g-recaptcha { transform-origin: 0 0; }
.field--captcha.invalid .g-recaptcha { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 4px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.form-note { display: flex; gap: .6rem; align-items: flex-start; font-size: var(--step--1); color: var(--text-2); margin-top: var(--s-4); }
.form-status { margin-top: var(--s-4); padding: var(--s-4); border-radius: var(--radius); font-size: var(--step--1); display: none; }
.form-status.ok { display: block; background: rgba(var(--ink-rgb), .06); color: var(--ink); border: 1px solid rgba(var(--ink-rgb), .25); }
.form-status.err { display: block; background: rgba(var(--red-rgb), .08); color: var(--red); border: 1px solid rgba(var(--red-rgb), .3); }

/* ------------------------------ Footer ---------------------------------- */
.site-footer { background: var(--band-deep); color: var(--band-text-2); padding-block: var(--s-9) var(--s-6); border-top: 1px solid var(--band-hair); }
.footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: var(--s-7); }
.site-footer h4 { font-family: var(--f-display); font-size: var(--step--1); letter-spacing: .14em; text-transform: uppercase; color: var(--band-text); margin-bottom: var(--s-4); }
.site-footer a { color: var(--band-text-2); transition: color var(--dur); }
.site-footer a:hover { color: var(--band-text); }
.site-footer li { margin-bottom: var(--s-3); font-size: var(--step--1); }
.footer-brand p { color: var(--band-text-2); max-width: 34ch; margin-top: var(--s-4); font-size: var(--step--1); }
.footer-heritage { display: inline-flex; align-items: center; gap: .6rem; margin-top: var(--s-5); font-size: var(--step--1); color: var(--band-text-2); }
.footer-heritage .stripe { width: 34px; height: 12px; border-radius: 2px; background: linear-gradient(90deg, var(--red) 0%, var(--navy) 100%); }
.footer-social { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.footer-social a { width: 40px; height: 40px; border: 1px solid var(--band-hair); border-radius: var(--radius); display: grid; place-items: center; }
.footer-social a:hover { background: var(--band-chip); border-color: var(--band-text-2); }
.footer-social svg { width: 18px; height: 18px; }
.footer-bottom { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); flex-wrap: wrap; margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--band-hair); font-size: var(--step--1); color: var(--band-text-2); }
.footer-bottom nav { display: flex; gap: var(--s-5); flex-wrap: wrap; }
.disclaimer { background: var(--band-deep); color: var(--band-text-2); font-size: 12px; text-align: center; padding: var(--s-4); border-top: 1px solid var(--band-hair); }

/* ------------------------------ Utilities / reveal ---------------------- */
/* Progressive enhancement: content is visible by default; only hidden (to be
   revealed on scroll) when JS is active (html.js set by inline head script). */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1 !important; transform: none !important; transition: none; }
  .btn:hover, .path:hover, .commodity:hover, .region:hover { transform: none; }
  .hero__canvas { display: none; }
}
[data-placeholder] { position: relative; }

/* ------------------------------ Page hero (interior) -------------------- */
.page-hero { background: var(--band); color: var(--band-text); position: relative; overflow: hidden; }
/* On the light band the muted pink eyebrow washes out — use brand red; the
   photo heroes and dark theme keep the on-dark pink via the overrides below. */
.page-hero .eyebrow, .hero .eyebrow { color: var(--red); }
.page-hero .eyebrow::before, .hero .eyebrow::before { background: var(--red); }
:root[data-theme="dark"] .page-hero .eyebrow, :root[data-theme="dark"] .hero .eyebrow,
.page-hero--photo .eyebrow { color: #D9808E; }
:root[data-theme="dark"] .page-hero .eyebrow::before, :root[data-theme="dark"] .hero .eyebrow::before,
.page-hero--photo .eyebrow::before { background: #D9808E; }
.cta-band .eyebrow { color: var(--band-text); }
.cta-band .eyebrow::before { background: var(--band-text); }
.page-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 120% at 90% -10%, rgba(var(--red-rgb), .18), transparent 55%); }
.page-hero .wrap { position: relative; padding-block: clamp(3rem, 8vh, 6rem); }
.page-hero .breadcrumb { display: flex; gap: .5rem; align-items: center; color: var(--band-text-2); font-size: var(--step--1); margin-bottom: var(--s-4); }
.page-hero .breadcrumb a:hover { color: var(--band-text); }
.page-hero h1 { max-width: 20ch; font-size: calc(var(--step-4) * .9); }
.page-hero p { color: var(--band-text-2); max-width: 60ch; margin-top: var(--s-4); font-size: var(--step-1); }

.prose { max-width: 68ch; }
.prose h2 { margin: var(--s-8) 0 var(--s-4); }
.prose h3 { margin: var(--s-6) 0 var(--s-3); }
.prose p { color: var(--text-2); margin-bottom: var(--s-4); }
.prose ul.ticks { display: grid; gap: var(--s-3); margin: var(--s-4) 0; }
.prose ul.ticks li { display: grid; grid-template-columns: 24px 1fr; gap: .6rem; color: var(--text-2); }
.prose ul.ticks svg { width: 20px; height: 20px; color: var(--ink); margin-top: 3px; }

/* ------------------------------ Responsive ------------------------------ */
@media (max-width: 960px) {
  /* Drop the decorative tagline first so the functional cluster (offices,
     phone, language) always keeps its room and never overflows the viewport. */
  .topbar__meta:first-child { display: none; }
  .topbar .wrap { justify-content: flex-end; }
}
@media (max-width: 1024px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .paths { grid-template-columns: repeat(2, 1fr); }
  .paths--1 { grid-template-columns: minmax(0, 420px); }
  .commodities, .regions { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6); }
  .split { grid-template-columns: 1fr; }
}
@media (max-width: 1200px) {
  .mainnav { position: fixed; inset: 0 0 0 auto; width: min(86vw, 360px); background: var(--band);
    flex-direction: column; align-items: stretch; padding: 6rem var(--s-5) var(--s-5); gap: var(--s-2);
    transform: translateX(100%); transition: transform var(--dur) var(--ease); box-shadow: var(--shadow-3); z-index: 120; }
  :root[data-theme="dark"] .mainnav { background: var(--surface); }
  .mainnav.open { transform: none; }
  .mainnav > ul { flex-direction: column; align-items: stretch; gap: var(--s-1); }
  .mainnav a.navlink { padding: .85rem .6rem; font-size: 1.05rem; }
  .navlink--mobile-contact { display: list-item; margin-top: var(--s-3); padding-top: var(--s-3); border-top: 1px solid var(--hair); }
  .navlink--mobile-contact a.navlink { color: var(--red); font-weight: 700; }
  .nav-toggle { display: grid; place-items: center; border-radius: var(--radius); transition: background var(--dur); }
  .nav-toggle[aria-expanded="true"] { background: var(--band-chip); }
  .nav-toggle[aria-expanded="true"] svg { transform: rotate(90deg); }
  .nav-toggle svg { transition: transform var(--dur) var(--ease); }
  .nav-cta .btn--primary { display: none; }
  /* Below .site-header's z-index (100) on purpose: .mainnav lives *inside* the
     header, so its own z-index (120) only orders it against other header
     children — it can't out-rank a sibling of <header> like this backdrop.
     A backdrop at/above 100 paints over the whole header (incl. the open
     drawer and its links), silently eating every tap. Keeping it just below
     means it still dims/close-on-click the page content behind the header,
     without blocking the header or drawer themselves. */
  .nav-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.5); opacity: 0; visibility: hidden; transition: opacity var(--dur); z-index: 90; }
  .nav-backdrop.show { opacity: 1; visibility: visible; }
}
@media (max-width: 620px) {
  .stats, .paths, .commodities, .regions { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .topbar__meta .hide-sm { display: none; }
  .cta-band .wrap { flex-direction: column; align-items: flex-start; }
}

/* ------------------------------ Support chat widget --------------------- */
.eg-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.eg-chat-launcher {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 150;
  width: 58px; height: 58px; border-radius: 50%; border: 0; background: var(--red); color: #fff;
  display: grid; place-items: center; box-shadow: 0 10px 30px rgba(var(--red-rgb), .38);
  transition: transform var(--dur) var(--ease), background var(--dur);
}
.eg-chat-launcher:hover { transform: translateY(-2px); background: #6E1423; }
.eg-chat-launcher svg { width: 26px; height: 26px; }
.eg-chat-launcher.is-open { background: var(--navy); box-shadow: var(--shadow-2); }

.eg-chat-panel[hidden] { display: none; }
.eg-chat-panel {
  position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: calc(clamp(1rem, 3vw, 2rem) + 72px); z-index: 150;
  width: min(380px, calc(100vw - 2rem)); height: min(560px, calc(100vh - 120px));
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-3);
}
.eg-chat-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-5); background: var(--navy); color: #fff; }
.eg-chat-title { font-family: var(--f-display); font-weight: 700; display: block; }
.eg-chat-sub { display: block; font-size: var(--step--1); color: var(--muted); margin-top: 2px; }
.eg-chat-x { background: transparent; border: 0; color: #fff; width: 32px; height: 32px; display: grid; place-items: center; border-radius: var(--radius); opacity: .8; }
.eg-chat-x:hover { opacity: 1; background: rgba(255,255,255,.12); }
.eg-chat-x svg { width: 18px; height: 18px; }

.eg-chat-log { flex: 1; overflow-y: auto; padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-4); background: var(--bg); }
.eg-msg { display: flex; }
.eg-msg--user { justify-content: flex-end; }
.eg-msg__body {
  max-width: 84%; padding: .6rem .85rem; border-radius: 12px; font-size: var(--step--1); line-height: 1.5;
  white-space: pre-wrap; word-wrap: break-word;
}
.eg-msg--bot .eg-msg__body { background: var(--surface-2); color: var(--text); border-bottom-left-radius: 3px; }
.eg-msg--user .eg-msg__body { background: var(--navy); color: #fff; border-bottom-right-radius: 3px; }
.eg-msg.is-typing .eg-msg__body::after { content: '…'; animation: eg-blink 1.2s steps(3, end) infinite; }
@keyframes eg-blink { 0% { opacity: .3 } 50% { opacity: 1 } 100% { opacity: .3 } }

.eg-chat-form { display: flex; gap: var(--s-3); padding: var(--s-4); border-top: 1px solid var(--hair); background: var(--surface); }
.eg-chat-input { flex: 1; resize: none; font: inherit; font-size: var(--step--1); color: var(--text);
  background: var(--bg); border: 1.5px solid var(--hair); border-radius: var(--radius); padding: .6rem .75rem; max-height: 120px; }
.eg-chat-input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .12); }
.eg-chat-send { flex: none; width: 44px; border: 0; border-radius: var(--radius); background: var(--red); color: #fff; display: grid; place-items: center; transition: background var(--dur); }
.eg-chat-send:hover { background: #6E1423; }
.eg-chat-send:disabled { opacity: .5; }
.eg-chat-send svg { width: 18px; height: 18px; }
@media (prefers-reduced-motion: reduce) { .eg-chat-launcher:hover { transform: none; } .eg-msg.is-typing .eg-msg__body::after { animation: none; } }

/* ============================ Imagery / large-format media =============== */
/* Home hero background video (Vimeo, background-mode embed) — layers over the
   .hero--photo static image (see its ::before z-index note above), which
   stays as the instant-paint poster while the video loads and as the sole
   visual under prefers-reduced-motion, when this whole layer is hidden.
   Cover-fit sizing keeps a 16:9 video filling the hero at any viewport
   ratio. */
.hero__video { position: absolute; inset: 0; z-index: -3; overflow: hidden; pointer-events: none; }
.hero__video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw; min-width: 177.78vh; min-height: 100%;
  border: 0;
  opacity: 0; transition: opacity .8s var(--ease);
}
/* .is-ready is added by main.js once the Vimeo Player API confirms real
   playback (or its fallback timer fires) — see "Home hero video reveal".
   Until then the iframe (and its poster-thumbnail flash) stays invisible. */
.hero__video.is-ready iframe { opacity: 1; }
.hero__video::after { /* light overall tint — .hero__inner::before carries the text contrast */
  content: ""; position: absolute; inset: 0;
  background: rgba(var(--ink-rgb), .1);
}
@media (prefers-reduced-motion: reduce) { .hero__video { display: none; } }

/* Photographic interior page hero — set the image with
   style="--hero-img:url('assets/img/hero/x.jpg')" on the <section>. */
.page-hero--photo {
  background: var(--ink); min-height: min(62vh, 600px);
  display: flex; align-items: flex-end;
}
.page-hero--photo .wrap { padding-block: clamp(4rem, 10vh, 7rem) clamp(2.5rem, 6vh, 4rem); }
/* Country/region pages: a taller, more cinematic hero on arrival. */
.page-hero--tall { min-height: 66vh; }
@media (max-width: 640px) { .page-hero--tall { min-height: 56vh; } }
.page-hero--photo::before {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background-image: var(--hero-img); background-size: cover; background-position: center;
  filter: contrast(1.05) saturate(.94) brightness(.97);
}
.page-hero--photo::after {
  content: ""; position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(90% 120% at 92% -10%, rgba(var(--red-rgb), .16), transparent 55%),
    linear-gradient(180deg, rgba(var(--ink-rgb), .22) 0%, rgba(var(--ink-rgb), .48) 55%, rgba(var(--ink-rgb), .86) 100%);
}
.page-hero--photo .wrap { z-index: 1; }
.page-hero--photo h1, .page-hero--photo p, .page-hero--photo .breadcrumb { color: #fff; }
.page-hero--photo .breadcrumb a:hover { color: #fff; }
.page-hero--photo p { color: #D9DDE3; }

/* Slow continuous zoom on interior-page hero photography — ported from the brand reskin */
@media (prefers-reduced-motion: no-preference) {
  .page-hero--photo::before { animation: eg-ken-burns 22s ease-in-out infinite alternate; }
}
@keyframes eg-ken-burns {
  0%   { transform: scale(1.04) translate(0, 0); }
  100% { transform: scale(1.15) translate(-2%, -1.5%); }
}

/* Full-width cinematic media band with headline/copy. Image via
   style="--band-img:url(...)" on the .media-band element. */
.media-band {
  position: relative; overflow: hidden; isolation: isolate; color: #fff;
  min-height: clamp(340px, 48vh, 580px); display: grid; align-items: end;
}
.media-band::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--band-img); background-size: cover; background-position: center;
  filter: contrast(1.05) saturate(.94) brightness(.97);
  transform: scale(1.04); transition: transform 1.2s var(--ease);
}
.media-band.in::before { transform: scale(1); }
.media-band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), .3) 0%, rgba(var(--ink-rgb), .55) 62%, rgba(var(--ink-rgb), .85) 100%);
}
.media-band__inner { padding: clamp(2rem, 6vw, 4rem) 0; max-width: 54rem; }
.media-band .eyebrow { color: #A2AEBE; }
.media-band h2 { color: #fff; margin: var(--s-3) 0 var(--s-4); max-width: 22ch; }
.media-band p { color: #D9DDE3; max-width: 56ch; font-size: var(--step-1); }
.media-band__meta {
  display: inline-flex; align-items: center; gap: .6rem; margin-top: var(--s-5);
  font-family: var(--f-display); font-size: var(--step--1); letter-spacing: .08em;
  text-transform: uppercase; color: #B6C0CC;
}
.media-band__meta .stripe { width: 30px; height: 8px; border-radius: 2px;
  background: linear-gradient(90deg, var(--red) 0%, var(--navy) 100%); }
/* Desktop parallax — disabled on touch/reduced-motion below. */
@media (min-width: 1025px) {
  .media-band--fixed::before { background-attachment: fixed; transform: none; }
}

/* ---- USA page "2 landing pages in one" accordion (united-states.html
   only) — the USA page-hero and the Pemex media-band each carry a
   .accordion-cue trigger pinned to their bottom edge; clicking one expands
   the .accordion-panel directly beneath it, dropping that section's full
   landing-page-styled content down in place. See accordionCue()/the
   united-states branch of the REGIONS loop in build.mjs, and the toggle
   handler in main.js. */
.page-hero--accordion .wrap { padding-bottom: clamp(4.5rem, 12vh, 8rem); }
.media-band--accordion .media-band__inner { padding-bottom: clamp(4.5rem, 9vw, 7rem); }
.accordion-cue {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center; gap: .55rem;
  width: 100%; padding: 1.15rem 1rem; margin: 0; border: 0; cursor: pointer;
  font-family: var(--f-display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(180deg, rgba(var(--ink-rgb), 0) 0%, rgba(var(--ink-rgb), .6) 75%);
  transition: gap .25s var(--ease);
}
.accordion-cue .caret { width: 14px; height: 14px; transition: transform .35s var(--ease); }
.accordion-cue:hover, .accordion-cue:focus-visible { gap: .9rem; }
.accordion-cue:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.accordion-cue[aria-expanded="true"] .caret { transform: rotate(180deg); }

.accordion-panel {
  display: grid; grid-template-rows: 0fr; visibility: hidden;
  transition: grid-template-rows .55s var(--ease), visibility 0s linear .55s;
}
.accordion-panel > .accordion-panel__inner { overflow: hidden; min-height: 0; }
.accordion-panel.is-open {
  grid-template-rows: 1fr; visibility: visible;
  transition: grid-template-rows .55s var(--ease), visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) {
  .accordion-panel, .accordion-panel.is-open { transition: none; }
  .accordion-cue .caret, .accordion-cue { transition: none; }
}

/* Feature-media block — a real photograph used in a .split in place of the
   abstract navy figure. Image via style="--fig-img:url(...)". */
.feature-media {
  position: relative; border-radius: var(--radius-lg); overflow: hidden;
  min-height: 440px; box-shadow: var(--shadow-2); border: 1px solid var(--hair);
}
.feature-media::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--fig-img); background-size: cover; background-position: center;
  filter: contrast(1.05) saturate(.94) brightness(.97);
  transition: transform .8s var(--ease);
}
.feature-media:hover::before { transform: scale(1.05); }
.feature-media__cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 2.25rem 1.35rem 1.15rem;
  color: #fff; font-family: var(--f-display); font-weight: 600; font-size: var(--step--1);
  background: linear-gradient(180deg, transparent, rgba(var(--ink-rgb), .88));
}
.feature-media__badge {
  position: absolute; top: var(--s-4); left: var(--s-4); z-index: 1;
  font-family: var(--f-display); font-weight: 700; font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: #fff; background: rgba(var(--ink-rgb), .55);
  border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: .3rem .7rem;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.feature-media__flags {
  position: absolute; right: var(--s-4); bottom: var(--s-4); z-index: 2;
  display: flex; gap: .3rem; font-size: 1.05rem; line-height: 1;
  padding: .3rem .5rem; border-radius: 999px; background: rgba(var(--ink-rgb), .55);
  border: 1px solid rgba(255,255,255,.25);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}

/* Thin photographic strip used as a section lead-in (e.g. authentic banners) */
.photo-strip {
  position: relative; height: clamp(160px, 24vw, 300px); border-radius: var(--radius-lg);
  overflow: hidden; box-shadow: var(--shadow-1); margin-bottom: var(--s-7);
}
.photo-strip::before { content: ""; position: absolute; inset: 0;
  background-image: var(--strip-img); background-size: cover; background-position: center; }
.photo-strip::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--ink-rgb), .55), transparent 60%); }
.photo-strip__label { position: absolute; left: var(--s-5); bottom: var(--s-4); z-index: 1; color: #fff;
  font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); letter-spacing: .04em; }

@media (prefers-reduced-motion: reduce) {
  .media-band::before, .feature-media:hover::before { transform: none; transition: none; }
}
@media (max-width: 620px) {
  .feature-media { min-height: 300px; }
}

/* media-band uses .reveal only to receive the .in trigger — no vertical shift */
.js .media-band.reveal { opacity: 1; transform: none; }

/* ============================ Documents & Resources library ============== */
.doc-toolbar { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; margin-bottom: var(--s-5); }
.doc-search { position: relative; flex: 1; min-width: 240px; }
.doc-search svg { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--slate); }
.doc-search__input { width: 100%; font: inherit; color: var(--text); background: var(--bg);
  border: 1.5px solid var(--hair); border-radius: var(--radius); padding: .8rem .95rem .8rem 2.6rem; min-height: 48px; }
.doc-search__input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .12); }
.doc-count { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); color: var(--slate); white-space: nowrap; }

.doc-cats { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s-6); }
.doc-chip { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); color: var(--navy);
  background: var(--surface); border: 1px solid var(--hair); border-radius: 999px; padding: .45rem .85rem;
  transition: background var(--dur), color var(--dur), border-color var(--dur); }
.doc-chip span { color: var(--slate); font-weight: 500; margin-left: .25rem; }
.doc-chip:hover { border-color: var(--navy); }
.doc-chip.is-active { background: var(--navy); color: #fff; border-color: var(--navy); }
.doc-chip.is-active span { color: #A9B4C2; }
:root[data-theme="dark"] .doc-chip { color: #D9DDE3; }

.doc-results { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); }
.doc-card { display: flex; align-items: flex-start; gap: var(--s-4); padding: var(--s-4) var(--s-5);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  transition: box-shadow var(--dur), transform var(--dur); }
.doc-card:hover { box-shadow: var(--shadow-2); transform: translateY(-2px); }
.doc-type { flex: none; font-family: var(--f-display); font-weight: 700; font-size: 10px; letter-spacing: .05em;
  color: #fff; border-radius: 4px; padding: .35rem .5rem; margin-top: 2px; min-width: 42px; text-align: center; }
.doc-card__body { flex: 1; min-width: 0; }
.doc-card__title { font-size: var(--step-0); font-weight: 600; line-height: 1.35; margin: 0 0 .35rem;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.doc-card__cat { font-family: var(--f-display); font-size: var(--step--1); color: var(--slate); }
.doc-card__actions { flex: none; display: flex; flex-direction: column; gap: .4rem; align-items: stretch; }
.doc-btn { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); text-align: center;
  border: 0; border-radius: var(--radius); padding: .5rem .8rem; background: var(--navy); color: #fff; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem; white-space: nowrap; transition: background var(--dur); }
.doc-btn:hover { background: #0A1622; }
.doc-btn--ghost { background: transparent; color: var(--navy); border: 1px solid var(--hair); }
.doc-btn--ghost:hover { background: var(--surface-2); border-color: var(--navy); }
:root[data-theme="dark"] .doc-btn--ghost { color: #D9DDE3; }
.doc-btn svg { width: 14px; height: 14px; }
.doc-empty { grid-column: 1 / -1; color: var(--text-2); padding: var(--s-6) 0; }
.doc-more { display: flex; justify-content: center; margin-top: var(--s-6); }

/* Viewer modal */
.doc-modal { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2rem); }
.doc-modal[hidden] { display: none; }
.doc-modal__backdrop { position: absolute; inset: 0; background: rgba(var(--ink-rgb), .72); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.doc-modal__panel { position: relative; width: min(1000px, 100%); height: min(90vh, 900px); display: flex; flex-direction: column;
  background: var(--surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-3); }
.doc-modal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-4) var(--s-5); background: var(--navy); color: #fff; }
.doc-modal__title { font-family: var(--f-display); font-weight: 600; font-size: var(--step-0); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-modal__head-actions { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.doc-modal__open { background: rgba(255,255,255,.14); color: #fff; border: 0; }
.doc-modal__open:hover { background: rgba(255,255,255,.24); }
.doc-modal__x { background: transparent; border: 0; color: #fff; width: 36px; height: 36px; display: grid; place-items: center; border-radius: var(--radius); }
.doc-modal__x:hover { background: rgba(255,255,255,.14); }
.doc-modal__x svg { width: 20px; height: 20px; }
.doc-modal__note { font-size: var(--step--1); color: var(--text-2); padding: .6rem var(--s-5); background: var(--surface-2); margin: 0; }
.doc-modal__frame { flex: 1; background: #525659; }
.doc-modal__frame iframe { width: 100%; height: 100%; border: 0; }

@media (max-width: 720px) {
  .doc-results { grid-template-columns: 1fr; }
  .doc-card__actions { flex-direction: row; }
}

/* ==========================================================================
   Language switcher (topbar dropdown) + change-language gateway + RTL
   ========================================================================== */
.langswitch { position: relative; display: inline-flex; }
.langswitch__btn {
  display: inline-flex; align-items: center; gap: .4rem; cursor: pointer;
  background: transparent; border: 0; color: var(--band-text-2); font-family: var(--f-display);
  font-weight: 600; font-size: var(--step--1); padding: .2rem .35rem; border-radius: 4px;
}
.langswitch__btn:hover { color: var(--band-text); }
/* Scoped under `.langswitch` (0,2,x) so `.topbar__meta span` (0,1,1) can't
   force this span visible. */
.langswitch .langswitch__menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 120;
  min-width: 230px; max-height: 60vh; overflow-y: auto;
  background: #fff; border: 1px solid var(--hair); border-radius: 12px;
  box-shadow: 0 18px 48px rgba(7,18,31,.28); padding: .4rem;
  display: none; grid-template-columns: 1fr 1fr; gap: 2px;
}
:root[data-theme="dark"] .langswitch .langswitch__menu { background: var(--surface); border-color: var(--hair); }
.langswitch .langswitch__menu.open { display: grid; }
.langswitch__item, .langswitch__all {
  display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left;
  background: transparent; border: 0; cursor: pointer; color: var(--ink);
  font: 500 var(--step--1)/1.2 var(--f-body); padding: .5rem .55rem; border-radius: 8px;
}
:root[data-theme="dark"] .langswitch__item, :root[data-theme="dark"] .langswitch__all { color: var(--fg); }
.langswitch__item:hover, .langswitch__all:hover { background: var(--surface-2); }
.langswitch__item[aria-pressed="true"] { background: rgba(var(--navy-rgb), .10); color: var(--navy); font-weight: 700; }
:root[data-theme="dark"] .langswitch__item[aria-pressed="true"] { color: #fff; background: rgba(255,255,255,.12); }
.langswitch__flag { font-size: 1.05em; line-height: 1; }
.langswitch__txt { display: flex; flex-direction: column; gap: .08rem; min-width: 0; }
.langswitch__native { font-size: .82em; font-weight: 400; color: #66717F; }
:root[data-theme="dark"] .langswitch__native { color: #93A0B0; }
.langswitch__item[aria-pressed="true"] .langswitch__native { color: inherit; opacity: .75; }
.langswitch__all { grid-column: 1 / -1; margin-top: .25rem; border-top: 1px solid var(--hair); border-radius: 0 0 8px 8px; font-weight: 600; color: var(--navy); }
:root[data-theme="dark"] .langswitch__all { color: #9BAAE0; }
@media (max-width: 520px) { .langswitch__menu { position: fixed; left: 8px; right: 8px; min-width: 0; } }

/* ---- change-language gateway ---- */
.gateway { min-height: 100vh; background: var(--band); color: var(--band-text); display: flex; flex-direction: column; }
.gateway__top { border-bottom: 1px solid var(--band-hair); }
.gateway__top .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 68px; }
.gateway__body { flex: 1; padding: clamp(2rem, 6vw, 5rem) 0; }
.gateway__eyebrow { color: var(--band-text-2); font-family: var(--f-display); font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: var(--step--1); }
.gateway h1 { font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; margin: .5rem 0 .75rem; color: var(--band-text); }
.gateway__lead { color: var(--band-text-2); max-width: 60ch; font-size: var(--step-1); }
.gateway__region { margin-top: clamp(2rem, 5vw, 3.5rem); }
.gateway__region h2 {
  font-size: var(--step-0); color: var(--band-text-2); font-family: var(--f-display); letter-spacing: .04em;
  text-transform: uppercase; padding-bottom: .6rem; margin-bottom: 1rem; border-bottom: 1px solid var(--band-hair);
}
.gateway__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .5rem; }
.gateway__lang {
  display: flex; align-items: center; gap: .85rem; padding: .9rem 1rem; border-radius: 12px;
  background: var(--band-chip); border: 1px solid var(--band-hair); cursor: pointer;
  color: var(--band-text); text-align: left; transition: background var(--dur), border-color var(--dur), transform var(--dur);
}
.gateway__lang:hover { background: var(--band-chip-2); border-color: var(--band-text-2); transform: translateY(-1px); }
.gateway__lang .flag { font-size: 1.7rem; line-height: 1; }
.gateway__lang .names { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.gateway__lang .native { font-family: var(--f-display); font-weight: 700; font-size: var(--step-0); color: var(--band-text); }
.gateway__lang .en { font-size: var(--step--1); color: var(--band-text-2); }
.gateway__lang[aria-current="true"] { border-color: var(--red); background: rgba(var(--red-rgb), .14); }
.gateway__foot { border-top: 1px solid var(--band-hair); padding: 1.5rem 0; color: var(--band-text-2); font-size: var(--step--1); }

/* ---- RTL ---- */
:root[dir="rtl"] .topbar .wrap,
:root[dir="rtl"] .navbar .wrap { direction: rtl; }
:root[dir="rtl"] .langswitch__menu { right: auto; left: 0; }
:root[dir="rtl"] .gateway__lang,
:root[dir="rtl"] .langswitch__item,
:root[dir="rtl"] .langswitch__all { text-align: right; }
:root[dir="rtl"] .skip-link { left: auto; right: -999px; }

/* Landing pages — alternating section background (matches inline surface-2 pattern) */
.section--alt{background:var(--surface-2)}
.section .prose + .prose{margin-top:2rem}

/* ===================== Landing pages (redesign) ===================== */
.lgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--s-5); }
@media (min-width: 920px){ .lgrid { grid-template-columns: repeat(3, 1fr); } }

.lcard { position: relative; display: flex; flex-direction: column; padding: var(--s-6);
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-1); overflow: hidden;
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur); }
.lcard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: rgba(var(--navy-rgb), .22); }
:root[data-theme="dark"] .lcard:hover { border-color: rgba(255,255,255,.18); }
.lcard__top { display:flex; align-items:center; justify-content:space-between; margin-bottom: var(--s-4); }
.lcard__icon { display:grid; place-items:center; width:52px; height:52px; border-radius:14px; flex:none;
  background: var(--navy); color:#fff; box-shadow: 0 6px 16px rgba(var(--navy-rgb),.18);
  transition: background var(--dur) var(--ease); }
.lcard__icon svg { width:26px; height:26px; }
.lcard__icon--sm { width:40px; height:40px; border-radius:11px; box-shadow:none; }
.lcard__icon--sm svg { width:21px; height:21px; }
.lcard:hover .lcard__icon { background: var(--red); }
.lcard__code { font-family: var(--f-display); font-weight:700; font-size: var(--step-1); letter-spacing:.06em; color: rgba(90,107,133,.55); }
.lcard h3 { font-size: var(--step-1); margin: 0 0 var(--s-3); line-height:1.2; }
.lcard > p { color: var(--text-2); font-size: var(--step--1); margin: 0 0 var(--s-4); }

/* chips (short item labels) */
.lchips { display:flex; flex-wrap:wrap; gap:.45rem; margin-top: var(--s-3); }
.lchip { font-size:12px; font-family: var(--f-display); font-weight:600; letter-spacing:.01em;
  color: var(--navy); background: var(--surface-2); border:1px solid var(--hair);
  border-radius:999px; padding:.32rem .7rem; }
:root[data-theme="dark"] .lchip { color:#D9DDE3; background: rgba(255,255,255,.05); }

/* checklist with small circular checks */
.checklist { list-style:none; display:grid; gap:.7rem; margin: var(--s-2) 0 0; padding:0; }
.checklist li { display:grid; grid-template-columns:20px 1fr; gap:.6rem; align-items:start; color: var(--text-2); font-size: var(--step--1); }
.checklist .ck { width:19px; height:19px; margin-top:1px; flex:none; }
.lprose .checklist { margin-top: var(--s-4); }

/* spec table (definition-style pages) */
.spec-wrap { border:1px solid var(--hair); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-1); background: var(--surface); }
.spec-table { width:100%; border-collapse:collapse; }
.spec-table tr { border-bottom:1px solid var(--hair); transition: background var(--dur); }
.spec-table tr:last-child { border-bottom:0; }
.spec-table tr:hover { background: var(--surface-2); }
.spec-table td, .spec-table th { padding: var(--s-4); text-align:left; vertical-align:middle; }
.spec-table .spec__ico { width:64px; }
.spec-table .lcard__icon--sm { background: var(--surface-2); color: var(--navy); border:1px solid var(--hair); }
:root[data-theme="dark"] .spec-table .lcard__icon--sm { color:#CBD5E0; }
.spec-table th[scope="row"] { font-family: var(--f-display); font-weight:700; font-size: var(--step-0); width:32%; }
.spec-table .spec__desc { color: var(--text-2); font-size: var(--step--1); }
@media (max-width:640px){ .spec-table th[scope="row"]{width:auto;} .spec-table .spec__ico{display:none;} }

/* prose head with icon */
.lprose__head { display:flex; align-items:center; gap: var(--s-3); margin-bottom: var(--s-3); }
.lprose__head h2 { margin:0; }

/* link cards (sibling / child grids) */
.lcard--link { text-decoration:none; color:inherit; }
.lcard--link > p { color: var(--text-2); font-size: var(--step--1); margin: 0 0 var(--s-4); }
.lcard__go { margin-top:auto; font-family: var(--f-display); font-weight:600; font-size: var(--step--1); color: var(--red); display:inline-flex; align-items:center; gap:.35rem; }
.lcard__go::after { content:"→"; transition: transform var(--dur); }
.lcard--link:hover .lcard__go::after { transform: translateX(4px); }

/* Landing redesign — dark theme (—surface is navy in dark, so icon tiles need a contrasting tint) */
:root[data-theme="dark"] .lcard__icon { background: rgba(255,255,255,.09); color: #DDE3EA; box-shadow: none; }
:root[data-theme="dark"] .lcard:hover .lcard__icon { background: var(--red); color: #fff; }
:root[data-theme="dark"] .lcard__code { color: rgba(219,231,247,.4); }
:root[data-theme="dark"] .spec-table .lcard__icon--sm { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.1); }

/* ============================ Enpramex Global — additions =============== */
/* Brand wordmark lockup (mark + name) */
.brand__name b { font-size: 1.12rem; letter-spacing: .02em; }
.brand__mark { border-radius: 8px; }

/* --- Primary nav dropdowns (Global Trading / Distribution folders) ------ */
.mainnav li { position: relative; }
.mainnav .navlink .caret { width: 13px; height: 13px; transition: transform var(--dur) var(--ease); opacity: .8; }
.mainnav .dropdown {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 244px; z-index: 130;
  background: var(--surface); color: var(--text); border: 1px solid var(--hair);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-3); padding: var(--s-2);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}
:root[data-theme="dark"] .mainnav .dropdown { background: var(--surface-2); }
.mainnav .has-dropdown:hover > .dropdown,
.mainnav .has-dropdown:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.mainnav .has-dropdown:hover > .navlink .caret { transform: rotate(180deg); }
.mainnav .dropdown a {
  display: block; padding: .6rem .75rem; border-radius: var(--radius);
  font-family: var(--f-body); font-weight: 500; font-size: .9rem; color: var(--text-2);
  transition: background var(--dur), color var(--dur);
}
.mainnav .dropdown a:not(:first-child) { border-top: 1px solid var(--hair); }
.mainnav .dropdown a:hover { background: var(--surface-2); color: var(--navy); }
:root[data-theme="dark"] .mainnav .dropdown a:hover { color: #fff; }
.mainnav .dropdown a b { display: block; font-family: var(--f-display); font-weight: 700; color: var(--text); font-size: .92rem; }
.mainnav .dropdown a small { color: var(--slate); font-size: .78rem; }

@media (max-width: 1200px) {
  /* Matches the hamburger-drawer breakpoint above (also 1200px) and the
     matchMedia check in main.js's dropdown-tap handler — all three must
     agree, or a tap toggles .open on the <li> with no matching CSS to
     reveal it (or vice versa: CSS ready to animate a state JS never sets). */
  .mainnav .navlink .caret { margin-left: auto; }
  .mainnav .dropdown {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
    border: 0; border-left: 2px solid var(--hair); border-radius: 0; margin: 0 0 var(--s-2) .6rem;
    padding: 0 0 0 var(--s-3); background: transparent; max-height: 0; overflow: hidden;
    transition: max-height var(--dur) var(--ease);
  }
  :root[data-theme="dark"] .mainnav .dropdown { background: transparent; }
  .mainnav .has-dropdown.open > .dropdown { max-height: 640px; }
  .mainnav .has-dropdown.open > .navlink .caret { transform: rotate(180deg); }
  .mainnav .dropdown a { color: #CBD5E0; }
}

/* --- Office / contact cards (reuse region look, add detail rows) -------- */
.office { padding: var(--s-6); border-radius: var(--radius-lg); background: var(--surface);
  border: 1px solid var(--hair); box-shadow: var(--shadow-1); }
.office__tag { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); letter-spacing: .12em;
  text-transform: uppercase; color: var(--red); }
.office h3 { font-size: var(--step-1); margin: var(--s-2) 0 var(--s-3); }
.office address { font-style: normal; color: var(--text-2); font-size: var(--step--1); line-height: 1.7; }

/* --- News / media cards ------------------------------------------------- */
.newscard { display: grid; gap: var(--s-3); padding: var(--s-6); background: var(--surface);
  border: 1px solid var(--hair); border-radius: var(--radius-lg); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.newscard:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); }
.newscard time { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); color: var(--slate); letter-spacing: .04em; }
.newscard h3 { font-size: var(--step-2); line-height: 1.15; }
.newscard p { color: var(--text-2); font-size: var(--step--1); }

/* --- Value pill row ------------------------------------------------------
   `span` pills are static labels (office cities, brand values, product
   tags). `button.pill` pills are the interactive risk-management ones —
   same look at rest, but hoverable/clickable to open a detail modal. */
.pills { display: flex; flex-wrap: wrap; gap: .5rem; }
.pills span, .pills .pill { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); color: var(--navy);
  background: var(--surface-2); border: 1px solid var(--hair); border-radius: 999px; padding: .45rem .9rem; }
:root[data-theme="dark"] .pills span, :root[data-theme="dark"] .pills .pill { color: #D9DDE3; }

.pills .pill {
  appearance: none; -webkit-appearance: none; cursor: pointer; line-height: 1.3;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.pills .pill:hover, .pills .pill:focus-visible {
  background: var(--navy); color: #fff; border-color: var(--navy); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--navy-rgb), .25); outline: none;
}
:root[data-theme="dark"] .pills .pill:hover, :root[data-theme="dark"] .pills .pill:focus-visible {
  background: var(--gold); color: #fff; border-color: var(--gold);
  box-shadow: 0 8px 20px rgba(var(--gold-rgb), .3);
}

/* --- Photo-dominant cards (imagery overtakes the card) ------------------ */
.media-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
.media-grid .feature-media { min-height: 300px; }
.media-grid--2 { grid-template-columns: repeat(2, 1fr); }
.feature-media__cap b { display: block; font-size: var(--step-1); font-weight: 700; margin-bottom: .2rem; }
.feature-media__cap small { display:block; font-weight: 500; color: #C9D1DB; font-size: var(--step--1); margin-top:.15rem; }
.feature-media--tall { min-height: 480px; }
@media (max-width: 1024px) { .media-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .media-grid, .media-grid--2 { grid-template-columns: 1fr; } }

/* --- Icon sizing safety (prevent unconstrained inline SVGs) ------------- */
.topbar__meta svg { width: 14px; height: 14px; flex: none; }
.breadcrumb svg { width: 13px; height: 13px; flex: none; }
.form-note svg { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.checklist li > svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--navy); }
:root[data-theme="dark"] .checklist li > svg { color: #CBD5E0; }
.site-footer .footer-grid li svg { width: 15px; height: 15px; flex: none; vertical-align: -2px; margin-right: .35rem; opacity: .8; }
.newscard time svg, .office svg { width: 16px; height: 16px; flex: none; }
.mainnav .navlink .caret { width: 12px; height: 12px; }
.cta-band .btn svg, .hero__actions .btn svg, .path__link svg, .btn svg { flex: none; }
/* language switcher inherits .switcher from the topbar */
.langsw button { font-family: var(--f-display); }

/* --- News card body ----------------------------------------------------- */
.newscard .newscard__body { display: grid; gap: var(--s-2); }

/* --- Office cards address ----------------------------------------------- */
.office-photo .region__body address { font-style: normal; color: var(--text-2); font-size: var(--step--1); line-height: 1.7; }
.office-photo .office__tag { font-family: var(--f-display); font-weight: 600; font-size: var(--step--1); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.office-photo .region__body h3 { margin: var(--s-1) 0 var(--s-3); font-size: calc(var(--step-2) * .9); }
/* #office-<slug> deep links land on these cards. The global [id]
   scroll-margin-top of 130px isn't enough here: the reveal animation settles
   ~32px after the browser's anchor scroll, which left the card's top edge
   under the sticky header. */
.office-photo { scroll-margin-top: 165px; }
/* Direct line, shown only for offices that have their own number (London). */
.office__tel {
  display: inline-flex; align-items: center; gap: .45rem; margin-top: var(--s-3);
  font-size: var(--step--1); font-weight: 600; color: var(--text);
}
.office__tel svg { width: 16px; height: 16px; flex: none; color: var(--red); }
.office__tel:hover { color: var(--red); }

/* --- Card "more" link cues (product & region detail links) ------------- */
a.commodity, a.region { display: block; }
.commodity__more, .region__more {
  display: inline-flex; align-items: center; gap: .4rem; margin-top: var(--s-4);
  color: var(--accent); font-family: var(--f-display); font-weight: 600; font-size: var(--step--1);
}
.commodity__more svg, .region__more svg { width: 16px; height: 16px; flex: none; transition: transform var(--dur) var(--ease); }
a.commodity:hover .commodity__more svg, a.region:hover .region__more svg { transform: translateX(4px); }

/* ---- Green Approach — the ONLY place brand green still appears -------- */
/* 2026 rebrand: green was removed sitewide in favor of black/white (see the
   token comments above and the CTA band / ticks / icon-cluster / footer
   stripe / ticker rules earlier in this file). It survives only here, scoped
   to the Green Approach <main class="theme-green">, which keeps its original
   green-themed hero/media/cta/icons/ticks/eyebrow exactly as before. */
:root { --green-2: #2BA85C; --green-2-rgb: 43,168,92; --green-ink: #1C4A2C; --green-ink-rgb: 28,74,44; } /* --green-ink lightened Aug 2026 (was #06341C, near-black) — kept above the 4.5:1 white-text floor at full opacity; --green-2 left as-is, already the lightest of the three and at its accessible ceiling against white */
main.theme-green { --accent: var(--green-2); --accent-rgb: var(--green-2-rgb); }
main.theme-green .btn--primary { background: var(--green); box-shadow: 0 6px 18px rgba(var(--green-rgb), .30); }
main.theme-green .btn--primary:hover { background: var(--red); }
/* Green-tinted photo hero (was navy/red) */
main.theme-green .page-hero--photo::after {
  background:
    radial-gradient(90% 120% at 92% -10%, rgba(var(--green-2-rgb), .42), transparent 55%),
    linear-gradient(180deg, rgba(var(--green-ink-rgb), .56) 0%, rgba(var(--green-ink-rgb), .84) 100%);
}
/* Green-tinted media band */
main.theme-green .media-band::after {
  background: linear-gradient(180deg, rgba(var(--green-ink-rgb), .3) 0%, rgba(var(--green-ink-rgb), .56) 62%, rgba(var(--green-ink-rgb), .88) 100%);
}
main.theme-green .media-band .eyebrow { color: #86e0a8; }
/* Green CTA band — every other page's CTA band is black (see the base
   .cta-band rules earlier in this file); this page keeps the original green. */
main.theme-green .cta-band { background: var(--green-ink); color: #fff; }
/* h1–h4 carry a sitewide color: var(--title) (dark grey — see the token
   comment at the top of this file), which beats the .cta-band's inherited
   #fff for any heading inside it (a direct rule on the element always wins
   over an inherited one, regardless of the ancestor selector's specificity).
   Every other page's CTA band is a light --band surface where dark-grey text
   is correct, so this never showed — only here, where the band is genuinely
   dark, did it read as a near-invisible heading. Found + fixed Aug 2026. */
main.theme-green .cta-band h2 { color: #fff; }
main.theme-green .cta-band::before { background: radial-gradient(80% 120% at 100% 0%, rgba(var(--green-2-rgb), .32), transparent 60%); }
main.theme-green .cta-band p { color: #B9D9C6; }
main.theme-green .cta-band .eyebrow { color: #86E0A8; }
main.theme-green .cta-band .eyebrow::before { background: #86E0A8; }
/* Green CTA band */
/* Green path icons + tick checks */
main.theme-green .path__icon { color: #fff; background: var(--green-2); }
:root[data-theme="dark"] main.theme-green .path__icon { color: #fff; }
main.theme-green .prose ul.ticks svg { color: var(--green-2); }

/* ---- FAQ chat widget --------------------------------------------------- */
.eg-chat-btn{position:fixed;right:20px;bottom:20px;z-index:200;display:inline-flex;align-items:center;gap:.5rem;
  background:var(--navy);color:#fff;border:1px solid rgba(255,255,255,.14);border-radius:999px;
  padding:.7rem 1.1rem;font-family:var(--f-display);font-weight:600;font-size:.95rem;cursor:pointer;
  box-shadow:0 10px 30px rgba(7,18,31,.35)}
.eg-chat-btn:hover{background:var(--navy-2,#364660)}
.eg-chat-btn svg{width:20px;height:20px}
.eg-chat{position:fixed;right:20px;bottom:20px;z-index:201;width:min(94vw,380px);height:min(72vh,560px);
  display:none;flex-direction:column;background:var(--surface);border:1px solid var(--hair);
  border-radius:16px;overflow:hidden;box-shadow:0 24px 60px rgba(7,18,31,.4)}
.eg-chat.open{display:flex}
.eg-chat__head{background:var(--navy);color:#fff;padding:.9rem 1rem;display:flex;align-items:center;justify-content:space-between}
.eg-chat__head b{font-family:var(--f-display)}
.eg-chat__close{background:transparent;border:0;color:#C9D1DB;font-size:1.1rem;cursor:pointer}
.eg-chat__log{flex:1;overflow-y:auto;padding:1rem;display:flex;flex-direction:column;gap:.6rem;background:var(--surface)}
.eg-msg{max-width:85%;padding:.6rem .8rem;border-radius:12px;font-size:.92rem;line-height:1.45;white-space:pre-wrap}
.eg-msg--bot{background:var(--surface-2);color:var(--text);align-self:flex-start}
.eg-msg--user{background:var(--navy);color:#fff;align-self:flex-end}
.eg-faq-list{display:flex;flex-direction:column;gap:.5rem;padding:.7rem;border-top:1px solid var(--hair);
  background:var(--surface);max-height:45%;overflow-y:auto}
.eg-faq-chip{display:block;width:100%;text-align:left;background:var(--surface-2);color:var(--text);
  border:1px solid var(--hair);border-radius:10px;padding:.55rem .8rem;font:inherit;font-size:.88rem;
  line-height:1.35;cursor:pointer;transition:background .15s ease,border-color .15s ease}
.eg-faq-chip:hover{background:var(--surface);border-color:var(--accent)}
.eg-faq-chip--contact{color:var(--accent);font-weight:600;text-decoration:none;border-style:dashed}

/* ============================ Marquee (generic) =========================== */
@keyframes eg-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } }
.marquee-mask {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: eg-marquee 34s linear infinite; will-change: transform; }
.marquee-track:hover { animation-play-state: paused; }
.marquee-group { display: flex; flex-shrink: 0; }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Small pulsing "live" indicator dot — default is black for its light-card
   context (commodity quote strip); on-dark contexts (market ticker,
   product-market band) override to white below. */
.dot-pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--ink); flex: none; }
.dot-pulse::after {
  content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--ink);
  animation: eg-pulse-ring 2.2s ease-out infinite;
}
@keyframes eg-pulse-ring { 0% { opacity: .7; transform: scale(.6); } 100% { opacity: 0; transform: scale(1.7); } }
@media (prefers-reduced-motion: reduce) { .dot-pulse::after { animation: none; display: none; } }

/* ============================ Market ticker (live quotes) ================= */
.market-ticker { background: var(--band); color: var(--band-text); padding-block: var(--s-5); border-block: 1px solid var(--band-hair); }
.market-ticker .dot-pulse { background: var(--band-text); }
.market-ticker .dot-pulse::after { border-color: var(--band-text); }
/* "Live" badge — revealed by main.js once /api/markets responds with quotes */
.market-ticker__live {
  padding: .1rem .5rem; border: 1px solid var(--band-text-2); border-radius: 99px;
  color: var(--band-text); font-size: var(--step--2); letter-spacing: .1em;
}
.market-ticker__label {
  display: flex; align-items: center; gap: .6rem; max-width: var(--wrap); margin-inline: auto;
  padding-inline: 1.25rem; margin-bottom: var(--s-3);
  font-family: var(--f-display); font-size: var(--step--1); font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase; color: var(--band-text-2);
}
.market-ticker__note {
  max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; margin-top: var(--s-3);
  font-size: var(--step--2); color: var(--band-text-2);
}
.ticker-chip {
  display: inline-flex; align-items: center; gap: .65rem; padding: .5rem 1.4rem; white-space: nowrap;
  border-right: 1px solid var(--band-hair);
}
.ticker-chip__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.ticker-chip__dot.is-up { background: var(--band-text); box-shadow: 0 0 0 3px var(--band-chip-2); }
.ticker-chip__dot.is-down { background: var(--red-bright); box-shadow: 0 0 0 3px rgba(var(--red-bright-rgb), .18); }
.ticker-chip b { font-family: var(--f-display); font-weight: 700; font-size: var(--step--1); }
.ticker-chip__bench { color: var(--muted); font-size: var(--step--2); }
.ticker-chip__price { font-family: var(--f-display); font-weight: 600; font-variant-numeric: tabular-nums; }
.ticker-chip__price small { color: var(--muted); font-weight: 500; font-size: .75em; margin-left: .2rem; }
.ticker-chip__change { font-family: var(--f-display); font-weight: 700; font-size: var(--step--1); }
.ticker-chip__change.is-up { color: var(--band-text); }
.ticker-chip__change.is-down { color: var(--red-bright); }

/* ============================ Stat count-up =============================== */
@media (prefers-reduced-motion: reduce) { .stat__num[data-counted] { transition: none; } }

/* ============================ Floating orbs (ambient motion) ============== */
@keyframes eg-float-y { 0%, 100% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(0, -18px, 0) scale(1.04); } }
@keyframes eg-drift {
  0% { transform: translate3d(0, 0, 0); } 33% { transform: translate3d(2vw, -1.5vw, 0); }
  66% { transform: translate3d(-1.5vw, 1vw, 0); } 100% { transform: translate3d(0, 0, 0); }
}
@keyframes eg-blob-morph {
  0%, 100% { border-radius: 42% 58% 63% 37% / 41% 44% 56% 59%; }
  33%      { border-radius: 60% 40% 33% 67% / 56% 33% 67% 44%; }
  66%      { border-radius: 35% 65% 52% 48% / 60% 50% 50% 40%; }
}
.blob-orb { position: absolute; filter: blur(60px); opacity: .35; pointer-events: none; mix-blend-mode: screen; }
.blob-orb--a { animation: eg-blob-morph 18s ease-in-out infinite, eg-drift 26s ease-in-out infinite; }
.blob-orb--b { animation: eg-blob-morph 22s ease-in-out infinite reverse, eg-drift 30s ease-in-out infinite reverse; }
@media (prefers-reduced-motion: reduce) { .blob-orb { animation: none; } }

/* Gradient sheen sweep on hero accent text */
@keyframes eg-gradient-pan { 0% { background-position: 0% 50%; } 100% { background-position: 200% 50%; } }
.text-sheen {
  background-image: linear-gradient(90deg, currentColor 0%, rgba(255,255,255,.4) 35%, #fff 50%, rgba(255,255,255,.4) 65%, currentColor 100%);
  background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: eg-gradient-pan 6s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .text-sheen { animation: none; -webkit-background-clip: initial; background-clip: initial; color: inherit; background-image: none; }
}

/* ==========================================================================
   Design Kit 2.0 additions — spotlight, tilt, staggered reveals, nav sweep,
   global network diagram, Green Approach duotone. Every color reference
   below reuses existing brand tokens (--navy/--red/--ink/--muted, plus
   green scoped to main.theme-green only) — no new hues are introduced
   anywhere in this section.
   ========================================================================== */

/* ---- Clickable-card highlight (replaces the old cursor spotlight glow) --
   Cards that ARE links, or that contain one, get a corporate-blue ring +
   elevated shadow on hover/focus so interactivity is unmistakable. Static
   cards stay quiet. */
.spotlight { position: relative; isolation: isolate; transition: box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
a.spotlight:hover, a.spotlight:focus-visible,
.spotlight:has(a):hover, .spotlight:focus-within {
  border-color: rgba(var(--navy-rgb), .45);
  box-shadow: 0 0 0 3px rgba(var(--navy-rgb), .14), var(--shadow-2);
}
:root[data-theme="dark"] a.spotlight:hover, :root[data-theme="dark"] a.spotlight:focus-visible,
:root[data-theme="dark"] .spotlight:has(a):hover, :root[data-theme="dark"] .spotlight:focus-within {
  border-color: rgba(255,255,255,.35);
  box-shadow: 0 0 0 3px rgba(255,255,255,.10), var(--shadow-2);
}

/* ---- Pointer tilt (feature photography) --------------------------------- */
.tilt-wrap { display: block; height: 100%; transform-style: preserve-3d; perspective: 900px; }
.tilt-inner {
  display: block; height: 100%;
  transform: rotateX(var(--ry, 0deg)) rotateY(var(--rx, 0deg)) translateZ(0);
  transition: transform 180ms var(--ease);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce), (hover: none) { .tilt-inner { transition: none; } }

/* ---- Staggered card-pop reveal (grid children pop in one after another) - */
/* Progressive enhancement — same convention as .reveal: visible without JS. */
.js .stagger > * {
  opacity: 0; transform: translateY(24px) scale(.96); filter: blur(6px);
  transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js .stagger.in > * { opacity: 1; transform: none; filter: blur(0); }
@media (prefers-reduced-motion: reduce) {
  .stagger > * { opacity: 1 !important; transform: none !important; filter: none !important; transition: none !important; }
}

/* ---- Nav link underline sweep (layered onto the existing hover state) --- */
.mainnav a.navlink::before {
  content: ""; position: absolute; left: .5rem; right: .5rem; bottom: 2px; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: right;
  transition: transform 320ms var(--ease); pointer-events: none;
}
.mainnav a.navlink:hover::before, .mainnav a.navlink:focus-visible::before { transform: scaleX(1); transform-origin: left; }
.mainnav a.navlink[aria-current="page"]::before { display: none; }
@media (prefers-reduced-motion: reduce) { .mainnav a.navlink::before { transition: none; } }

/* ---- Green Approach — duotone photo wash (reuses existing green tokens) - */
/* Multiply-blends the same --green-2/--green-ink values already defined
   above onto hero/media photography — no new colors, just a treatment. */
main.theme-green .page-hero--photo::before {
  background-image: linear-gradient(140deg, rgba(var(--green-2-rgb), .32), rgba(var(--green-ink-rgb), .22)), var(--hero-img);
  background-blend-mode: multiply, normal;
}
main.theme-green .media-band::before {
  background-image: linear-gradient(140deg, rgba(var(--green-2-rgb), .28), rgba(var(--green-ink-rgb), .18)), var(--band-img);
  background-blend-mode: multiply, normal;
}

/* ============================== Careers ================================= */
.job-filters {
  display: flex; flex-wrap: wrap; gap: var(--s-4); align-items: center;
  margin-bottom: var(--s-7); padding: var(--s-4); border-radius: var(--radius);
  background: var(--surface-2);
}
.job-filters__search {
  flex: 1 1 260px; display: flex; align-items: center; gap: .6rem;
  background: var(--surface); border: 1px solid var(--hair); border-radius: var(--radius);
  padding: .65rem .9rem; color: var(--muted);
}
.job-filters__search svg { flex: none; width: 18px; height: 18px; }
.job-filters__search input {
  border: 0; background: transparent; flex: 1; font: inherit; color: var(--ink); min-width: 0;
}
.job-filters__search input:focus { outline: none; }
.job-filters select {
  flex: 0 1 220px; padding: .65rem .9rem; border-radius: var(--radius); border: 1px solid var(--hair);
  background: var(--surface); color: var(--ink); font: inherit;
}
.jobs-list { display: grid; gap: var(--s-4); }
.job-card {
  border: 1px solid var(--hair); border-radius: var(--radius-lg); background: var(--surface);
  overflow: hidden; transition: border-color var(--dur), box-shadow var(--dur);
}
.job-card:hover { border-color: rgba(var(--navy-rgb), .3); box-shadow: var(--shadow-1); }
.job-card[hidden] { display: none; }
.job-card__head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) var(--s-6); background: transparent; border: 0; cursor: pointer; text-align: left; font: inherit; color: inherit;
}
.job-card__main h3 { margin: 0 0 .5rem; font-size: var(--step-1); }
.job-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-5); color: var(--text-2); font-size: var(--step--1); }
.job-card__meta span { display: inline-flex; align-items: center; gap: .4rem; }
.job-card__meta svg { width: 16px; height: 16px; flex: none; color: var(--muted); }
.job-card__toggle { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--surface-2); transition: transform var(--dur); }
.job-card__toggle svg { width: 16px; height: 16px; }
.job-card__head[aria-expanded="true"] .job-card__toggle { transform: rotate(180deg); background: var(--red); color: #fff; }
.job-card__body { padding: 0 var(--s-6) var(--s-6); border-top: 1px solid var(--hair); padding-top: var(--s-5); }
.job-card__body[hidden] { display: none; }
.job-card__summary { color: var(--text-2); font-size: var(--step-0); margin-bottom: var(--s-4); }
.job-card__body .prose h4 { margin-top: var(--s-5); }
.job-card__apply { margin-top: var(--s-5); }
.jobs-empty { text-align: center; color: var(--muted); padding: var(--s-7) 0; }
.jobs-empty[hidden] { display: none; }

/* Application modal (also reused as the generic public-site modal shell) */
.modal {
  position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center;
  padding: var(--s-5); background: rgba(7, 18, 31, .6); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.modal[hidden] { display: none; }
.modal__panel {
  width: 100%; max-width: 640px; max-height: 90vh; overflow-y: auto; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-2); padding: var(--s-6);
}
.modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--s-5); }
.modal__head h2 { margin: 0; font-size: var(--step-2); }
.modal .icon-btn { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--hair); background: transparent; color: var(--ink); cursor: pointer; }
.modal .icon-btn:hover { background: var(--surface-2); }

/* ---- Photo-banner modal variant (risk-management + product-tag pills) --
   A cinematic photo strip replaces the plain padding at the top of the
   panel; the close button floats over it as a frosted circle. Content
   below scrolls independently so the photo's rounded corners stay clipped
   even on a long description. */
.modal--photo .modal__panel { padding: 0; overflow: hidden; display: flex; flex-direction: column; }
.modal--photo .modal__photo {
  position: relative; height: 220px; flex: none;
  background: var(--modal-img) center/cover no-repeat;
}
.modal--photo .modal__photo::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(var(--ink-rgb), .38));
}
.modal--photo .modal__photo .icon-btn {
  position: absolute; top: var(--s-4); right: var(--s-4); z-index: 1;
  background: rgba(255,255,255,.94); backdrop-filter: blur(4px); border: none;
}
.modal--photo .modal__body { padding: var(--s-6); overflow-y: auto; }
.modal--photo .modal__head { margin-bottom: var(--s-4); }

/* ==================== Capability flow (scroll-animated) ================= */
/* Large connected step sequence — the line fills and each dot lights
   up as the section scrolls through the viewport. Driven by main.js setting
   --flow-progress on [data-flow-steps] and toggling .is-active per step. */
.flow-steps { position: relative; margin: clamp(3rem, 7vw, 5.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.flow-steps__track {
  position: absolute; top: 34px; left: 6%; right: 6%; height: 4px;
  background: var(--hair); border-radius: 999px; overflow: hidden;
}
:root[data-theme="dark"] .flow-steps__track { background: rgba(255,255,255,.12); }
.flow-steps__fill {
  position: absolute; inset: 0 auto 0 0; width: calc(var(--flow-progress, 0) * 100%);
  border-radius: 999px; background: linear-gradient(90deg, var(--ink), var(--slate));
  box-shadow: 0 0 18px rgba(var(--ink-rgb), .55);
}
.flow-steps__row { display: flex; justify-content: space-between; gap: var(--s-4); position: relative; }
.flow-step { display: flex; flex-direction: column; align-items: center; gap: var(--s-4); flex: 1; text-align: center; }
.flow-step__dot {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface); border: 3px solid var(--hair); color: var(--muted);
  transition: border-color .35s, color .35s, background .35s, transform .35s var(--ease), box-shadow .35s;
}
.flow-step__dot svg { width: 28px; height: 28px; }
.flow-step.is-active .flow-step__dot {
  /* The tint is layered OVER the opaque surface (not a bare rgba background)
     so the dot fully covers the progress track running behind it — a
     translucent fill let the dark line show through the circle and read as
     a strikethrough on the active steps. */
  border-color: var(--ink); color: var(--ink);
  background: linear-gradient(rgba(var(--ink-rgb), .1), rgba(var(--ink-rgb), .1)) var(--surface);
  transform: scale(1.12);
  box-shadow: 0 0 0 8px rgba(var(--ink-rgb), .12), 0 0 26px rgba(var(--ink-rgb), .38);
}
.flow-step__label {
  font-family: var(--f-display); font-weight: 700; letter-spacing: .02em;
  font-size: var(--step-0); color: var(--text-2); transition: color .35s;
}
.flow-step.is-active .flow-step__label { color: var(--ink); }
:root[data-theme="dark"] .flow-step.is-active .flow-step__label { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .flow-steps__fill { width: 100%; }
}
@media (max-width: 760px) {
  .flow-steps__row { flex-wrap: wrap; row-gap: var(--s-6); }
  .flow-step { flex: 0 1 40%; }
  .flow-steps__track { display: none; }
}

/* ================= Live product benchmark quotes (product cards) ========== */
/* Hidden until main.js confirms live data from /api/markets — real data only. */
.commodity__quote { margin-top: var(--s-4); padding-top: var(--s-3); border-top: 1px dashed var(--hair); }
.commodity__quote-head { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; margin-bottom: .4rem; }
.commodity__quote-label {
  font-family: var(--f-display); font-size: 10.5px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: var(--slate);
}
.commodity__quote-bench { font-size: var(--step--2); color: var(--muted); white-space: nowrap; }
.commodity__quote-row { display: flex; align-items: center; gap: .7rem; }
.commodity__spark { width: 84px; height: 26px; flex: none; overflow: visible; }
.commodity__spark path { fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.commodity__quote.is-up .commodity__spark path { stroke: var(--ink); }
.commodity__quote.is-down .commodity__spark path { stroke: var(--red); }
:root[data-theme="dark"] .commodity__quote.is-up .commodity__spark path { stroke: #fff; }
:root[data-theme="dark"] .commodity__quote.is-down .commodity__spark path { stroke: var(--red-bright); }
.commodity__quote-price {
  font-family: var(--f-display); font-weight: 700; font-size: var(--step-0);
  font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap;
}
.commodity__quote-price small { color: var(--muted); font-weight: 500; font-size: .68em; margin-left: .15rem; }
.commodity__quote-change {
  margin-left: auto; font-family: var(--f-display); font-weight: 700; font-size: var(--step--2);
  font-variant-numeric: tabular-nums; padding: .18rem .55rem; border-radius: 6px; white-space: nowrap;
}
.commodity__quote.is-up .commodity__quote-change { color: var(--ink); background: rgba(var(--ink-rgb), .1); }
.commodity__quote.is-down .commodity__quote-change { color: #dc2626; background: rgba(var(--red-rgb), .1); }
:root[data-theme="dark"] .commodity__quote.is-up .commodity__quote-change { color: #fff; }
:root[data-theme="dark"] .commodity__quote.is-down .commodity__quote-change { color: #f87171; }
/* Terminal-style tick flash when a refreshed quote moves */
@keyframes eg-tick-up { 0% { background: rgba(var(--ink-rgb), .2); } 100% { background: transparent; } }
@keyframes eg-tick-down { 0% { background: rgba(var(--red-rgb), .16); } 100% { background: transparent; } }
.commodity__quote.tick-up { animation: eg-tick-up 1.1s ease-out; border-radius: 8px; }
.commodity__quote.tick-down { animation: eg-tick-down 1.1s ease-out; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) {
  .commodity__quote.tick-up, .commodity__quote.tick-down { animation: none; }
}

/* ======================= Product market band (hero stat) ================= */
/* One large, real-time benchmark price for a single product's detail page,
   positioned directly under the header/nav — before the page hero — so live
   market context is the first thing a visitor sees. Reuses the exact
   .commodity__quote markup/classes as the compact card strip (products.html
   grid) so main.js's existing quote-render logic works unmodified; every
   rule below only rescales that same component for a full-width dark band.
   Real data only — stays hidden until a live quote actually arrives. */
.product-market { background: var(--band); overflow: hidden; border-block: 1px solid var(--band-hair); }
.product-market .wrap { padding-block: var(--s-7); }
.product-market .commodity__quote {
  margin: 0; padding: 0; border: 0; display: flex; flex-direction: column; gap: var(--s-4);
}
.product-market .commodity__quote-head { justify-content: flex-start; gap: .7rem; margin-bottom: 0; }
.product-market .commodity__quote-label {
  font-size: var(--step-0); letter-spacing: .12em; color: var(--band-text);
}
.product-market .commodity__quote-bench { font-size: var(--step--1); color: var(--muted); }
.product-market .commodity__quote-row { gap: var(--s-6); row-gap: var(--s-4); flex-wrap: wrap; }
.product-market .commodity__spark { width: 220px; height: 60px; }
.product-market .commodity__quote-price {
  font-family: var(--f-display); font-weight: 800; font-size: var(--step-4);
  color: var(--band-text); line-height: 1; letter-spacing: -.01em;
}
.product-market .commodity__quote-price small { font-size: .3em; color: var(--muted); font-weight: 500; }
.product-market .commodity__quote-change {
  margin-left: 0; font-size: var(--step-1); font-weight: 700; padding: .4rem 1.1rem; border-radius: 999px;
}
.product-market .commodity__quote.is-up .commodity__quote-change { color: var(--band-text); background: var(--band-chip-2); }
.product-market .commodity__quote.is-down .commodity__quote-change { color: var(--band-text); background: rgba(var(--red-bright-rgb), .22); }
.product-market .commodity__quote.is-up .commodity__spark path { stroke: var(--band-text); }
.product-market .commodity__quote.is-down .commodity__spark path { stroke: var(--red-bright); }
.product-market .dot-pulse { background: var(--band-text); }
.product-market .dot-pulse::after { border-color: var(--band-text); }
@media (max-width: 640px) {
  .product-market .commodity__quote-price { font-size: var(--step-3); }
  .product-market .commodity__spark { width: 140px; height: 44px; }
}

/* ===================== Live-market ambient motion ======================== */
/* Every element that shows market data — product-card quote strips, the
   product-page market band, the global-trading ticker chips — stays in
   gentle motion between the real 5-minute /api/markets refreshes: main.js
   drives bounded micro-drift steps (see "Ambient market motion" there);
   these rules supply the terminal-style flash, the pulsing LIVE dot and the
   sheen sweep each step triggers. Disabled under prefers-reduced-motion. */
.commodity__quote { position: relative; overflow: hidden; }
.commodity__quote .dot-pulse { width: 6px; height: 6px; }
/* Card strips gained a leading LIVE dot — keep label beside it and the
   benchmark pinned right (head is a space-between flex row). */
.commodity__quote-head { align-items: center; }
.commodity__body .commodity__quote-head .commodity__quote-label { margin-inline-end: auto; }
.commodity__quote.is-down .dot-pulse { background: var(--red); }
.commodity__quote.is-down .dot-pulse::after { border-color: var(--red); }
:root[data-theme="dark"] .commodity__quote .dot-pulse { background: #fff; }
:root[data-theme="dark"] .commodity__quote .dot-pulse::after { border-color: #fff; }
:root[data-theme="dark"] .commodity__quote.is-down .dot-pulse { background: var(--red-bright); }
:root[data-theme="dark"] .commodity__quote.is-down .dot-pulse::after { border-color: var(--red-bright); }
.commodity__quote-change { transition: background .45s var(--ease), color .45s var(--ease); }
.commodity__quote-price { transition: color .45s var(--ease); }
@keyframes eg-quote-sheen { from { transform: translateX(-130%); } to { transform: translateX(420%); } }
.commodity__quote::after {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 30%; pointer-events: none;
  background: linear-gradient(105deg, transparent, rgba(var(--ink-rgb), .06), transparent);
  transform: translateX(-130%);
}
:root[data-theme="dark"] .commodity__quote::after { background: linear-gradient(105deg, transparent, rgba(255,255,255,.07), transparent); }
.commodity__quote.tick-up::after, .commodity__quote.tick-down::after { animation: eg-quote-sheen 1.05s var(--ease); }
/* Ticker chips get the same per-step flash as the card strips. */
@keyframes eg-chip-flash { 0% { background: var(--band-chip-2); } 100% { background: transparent; } }
.ticker-chip { border-radius: 10px; padding-inline: .35rem; }
.ticker-chip.tick-up, .ticker-chip.tick-down { animation: eg-chip-flash 1s ease-out; }
@media (prefers-reduced-motion: reduce) {
  .commodity__quote::after { display: none; }
  .ticker-chip.tick-up, .ticker-chip.tick-down { animation: none; }
}

/* ================== Scroll spotlight: highlight + invert ================== */
/* Sections light up while they cross the middle band of the viewport —
   main.js toggles .is-hot via an IntersectionObserver with a centered
   rootMargin. Two layers:
   1) HIGHLIGHT — every .section-head h2 sweeps in a red→blue underline and
      the eyebrow rule brightens while its section is hot. Runs in both
      themes; it never darkens a background.
   2) INVERT — dark theme ONLY: alternate sections (.section--alt) get a
      navy lift while hot, by re-declaring the semantic tokens locally;
      cards, ticks, hairlines and text inside follow automatically because
      components only consume var(--surface)/var(--text)/var(--text-2)/
      var(--hair). Light mode never gets this — .section--alt stays on its
      normal white/light-grey surface (var(--surface-2)) no matter where it
      sits on screen, so scrolling never darkens a light-mode page. */
.js main .section { transition: background .8s var(--ease), color .8s var(--ease); }
/* block + fit-content, never inline-block: the underline still hugs the text,
   but the h2 always starts its own line under the eyebrow. As inline-block it
   flowed in beside the inline-flex .eyebrow whenever both fit on one line
   (short pairs like "Global network" + "Other regions" on the region pages),
   which read as a broken heading next to the wrapped ones elsewhere. */
.js .section-head h2 {
  display: block; width: fit-content; padding-bottom: .3rem;
  background-image: linear-gradient(90deg, var(--red), var(--navy));
  background-repeat: no-repeat; background-position: left 100%; background-size: 0% 3px;
  transition: background-size .9s var(--ease) .12s;
}
:root[dir="rtl"] .js .section-head h2 { background-position: right 100%; }
.js .section.is-hot .section-head h2 { background-size: 100% 3px; }
.js .section .eyebrow::before { transition: width .7s var(--ease), background .7s var(--ease); }
.js .section.is-hot .eyebrow::before { width: 44px; }

:root[data-theme="dark"] .js .section--alt.is-hot {
  background: #0A1C36; color: #E9EDF2;
  --surface: #13233B; --surface-2: #0E1B2E;
  --text: #E9EDF2; --text-2: #A8B3C2; --muted: #9AA5B5;
  --hair: rgba(255,255,255,.12);
  --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 10px 30px rgba(0,0,0,.5);
}
:root[data-theme="dark"] .js .section--alt.is-hot .stat__num { color: #fff; }
:root[data-theme="dark"] .js .section--alt.is-hot .eyebrow { color: #fff; }
:root[data-theme="dark"] .js .section--alt.is-hot .eyebrow::before { background: #fff; }
:root[data-theme="dark"] .js .section--alt.is-hot .section-head h2 { background-image: linear-gradient(90deg, var(--red-bright), #fff); }
/* Card icons keep their one unified blue while inverted — --ico-blue is a
   mid-tone chosen to read on the lifted navy surface too, so no white/navy
   flip here (those flips read as "the icons change color while scrolling"). */
:root[data-theme="dark"] .js .section--alt.is-hot .prose ul.ticks svg { color: #fff; }
/* Flow steps use ink for their active state — flip to white while inverted
   (and in dark theme generally, which had the same ink-on-ink gap). */
:root[data-theme="dark"] .js .section--alt.is-hot .flow-step.is-active .flow-step__dot,
:root[data-theme="dark"] .flow-step.is-active .flow-step__dot {
  /* Tint over opaque surface, same as light theme — keeps the white fill
     line from showing through the active circle. */
  border-color: #fff; color: #fff;
  background: linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) var(--surface);
  box-shadow: 0 0 0 8px rgba(255,255,255,.08), 0 0 26px rgba(255,255,255,.22);
}
:root[data-theme="dark"] .js .section--alt.is-hot .flow-step.is-active .flow-step__label { color: #fff; }
:root[data-theme="dark"] .js .section--alt.is-hot .flow-steps__fill,
:root[data-theme="dark"] .flow-steps__fill {
  background: linear-gradient(90deg, #fff, var(--muted));
  box-shadow: 0 0 18px rgba(255,255,255,.3);
}
:root[data-theme="dark"] .js .section--alt.is-hot .flow-steps__track { background: rgba(255,255,255,.12); }
:root[data-theme="dark"] .js .section--alt.is-hot .tag, :root[data-theme="dark"] .js .section--alt.is-hot .lchip { color: #D9DDE3; }
:root[data-theme="dark"] .js .section--alt.is-hot .commodity__quote.is-up .commodity__spark path { stroke: #fff; }
:root[data-theme="dark"] .js .section--alt.is-hot .commodity__quote.is-up .commodity__quote-change { color: #fff; }
/* Smooth the palette flip on the cards inside (dark theme only — light mode
   never flips, so it needs no transition here). */
:root[data-theme="dark"] .js .section--alt .path, :root[data-theme="dark"] .js .section--alt .region,
:root[data-theme="dark"] .js .section--alt .commodity, :root[data-theme="dark"] .js .section--alt .lcard,
:root[data-theme="dark"] .js .section--alt .stat, :root[data-theme="dark"] .js .section--alt .ticks li {
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease),
    background .8s var(--ease), border-color .8s var(--ease), color .8s var(--ease);
}
@media (prefers-reduced-motion: reduce) {
  .js main .section, .js .section-head h2, .js .section .eyebrow::before { transition: none; }
}

/* =================== USA accordion: open choreography ==================== */
/* The full-page dropdowns on united-states.html — the panel's height motion
   lives above (.accordion-panel); these rules add the content wipe, the
   idle bobbing cue caret, and the hot state for an expanded trigger. */
.accordion-panel > .accordion-panel__inner {
  transform: translateY(-16px); opacity: .3;
  transition: transform .6s var(--ease) .05s, opacity .55s var(--ease) .05s;
}
.accordion-panel.is-open > .accordion-panel__inner { transform: none; opacity: 1; }
@keyframes eg-cue-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(5px); } }
.accordion-cue .caret { animation: eg-cue-bob 2.4s ease-in-out infinite; }
.accordion-cue[aria-expanded="true"] .caret { animation: none; transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .accordion-panel > .accordion-panel__inner { transform: none; opacity: 1; transition: none; }
  .accordion-cue .caret { animation: none; }
}

/* --------------------- Distribution coverage map ------------------------- */
/* The .dmap-band on distribution.html (distributionMapBand() in build.mjs):
   per-country Natural Earth paths — countries in an Enpramex region are
   clickable; clicking highlights the whole country and swaps the services
   panel beside the map. Office markers (Houston/Rotterdam/Abu Dhabi/Beverly
   Hills) sit on top. Filter pills above the map glow every active country
   offering a service, independent of the click-to-select/zoom interaction.
   No country is pre-selected — the panel opens on a global summary state.
   Off-white grey like every other band since the Aug 2026 re-skin (was ink,
   dark in both themes). Interactions: "Distribution coverage map" in main.js. */
.dmap-band { background: var(--band); color: var(--band-text); padding-block: var(--s-9); overflow: hidden; }
/* The panel/stage swap content by toggling [hidden] — make sure it always
   wins over the display set by .path__link, .dmap-zoomout etc. */
.dmap-band [hidden] { display: none !important; }
.dmap-band__head { max-width: var(--wrap); margin-inline: auto; padding-inline: 1.25rem; margin-bottom: var(--s-7); }
.dmap-band__head .eyebrow { color: var(--band-text-2); }
.dmap-band__head h2 { color: var(--band-text); margin-top: var(--s-3); max-width: 28ch; }
.dmap-band__head p { color: var(--band-text-2); max-width: 58ch; margin-top: var(--s-3); }
/* Filter pills: toggle buttons, not a static legend — selecting one glows
   every active country whose data-services (set from REGION_SERVICES in
   build.mjs) includes that service. Multiple pills OR together. */
.dmap-filters {
  max-width: 2080px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem);
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem; margin-bottom: var(--s-5);
}
.dmap-filters__label {
  font-size: .68rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--band-text-2);
}
.dmap-filters__pills { display: flex; flex-wrap: wrap; gap: .55rem; }
.dmap-filter {
  display: inline-flex; align-items: center; gap: .5rem; font: inherit; cursor: pointer; color: var(--band-text);
  background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 4px 14px rgba(7, 18, 31, .06), inset 0 1px 0 rgba(255, 255, 255, .7);
  border-radius: 999px; padding: .48rem .95rem; font-size: var(--step--1); font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.dmap-filter svg { width: 17px; height: 17px; flex: none; color: var(--band-text-2); transition: color var(--dur) var(--ease); }
.dmap-filter:hover { background: var(--band-chip-2); border-color: var(--band-text-2); translate: 0 -2px; }
.dmap-filter[aria-pressed="true"] {
  background: rgba(242, 184, 75, .22); border-color: rgba(196, 138, 24, .65); color: var(--band-text);
}
.dmap-filter[aria-pressed="true"] svg { color: #F2B84B; }
.dmap {
  /* Substantially wider than --wrap on purpose — the map is the hero of
     this band and needs real room to breathe. Layout history: an early
     side-by-side pass was replaced by stacked (panel below the map) so the
     map got the full row; in Aug 2026 the panel moved back BESIDE the map
     by user request — but as a fixed 360px right-hand column (the ≥1200px
     grid override below), so the map still takes every remaining pixel of
     the row instead of sharing it with a fluid column. Below 1200px the
     band stacks (panel under the map) exactly as before. */
  max-width: 2080px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem);
}
.dmap-stage {
  /* Fixed to the exact crop ratio from distributionMapBand() (inline
     `--dmap-ar` custom property) so the SVG always renders at full size,
     uncropped — no viewport height ever clips a country. */
  aspect-ratio: var(--dmap-ar, 1000 / 391);
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  /* Glassmorphic stage (Aug 2026, user request — replaced the opaque
     off-white radial, which itself replaced the original dark navy):
     COMPLETELY transparent frosted pane, per the user's smoked-glass
     reference — a smoked-grey tint (darkened Aug 2026, user request: the
     map must sit visibly darker than the off-white page background), with
     the depth coming from the blurred chrome orbs on ::before underneath
     the land. GREYISH
     glass on purpose — the trading-offices locations map is the
     very-light-navy sibling. Land colors below are calibrated against THIS
     transparency — change them together. */
  background: linear-gradient(135deg, rgba(134, 147, 163, .34) 0%, rgba(110, 123, 140, .42) 45%, rgba(84, 97, 114, .5) 100%);
  -webkit-backdrop-filter: blur(30px) saturate(1.15);
  backdrop-filter: blur(30px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 24px 60px rgba(7, 18, 31, .12), inset 0 1px 0 rgba(255, 255, 255, .75), inset 0 -1px 0 rgba(255, 255, 255, .25);
}
/* Chrome-orb underlay + sheen live INSIDE the stage (user request: "the
   map should be the only thing glassmorphic, not the other cards" — the
   orbs briefly floated on the .dmap/.lmap wrapper behind the stage AND
   panel, and bled behind the band head text and cards): ::before carries
   the blurred orb gradients, clipped by the stage's rounded overflow so
   nothing outside the pane changes; ::after carries the on-pane light
   sheen. Paint order inside the stage: pane background → ::before orbs
   (z-index 0, first in tree) → the land svg (its filter creates a stacking
   context at the same level, later in tree) → ::after sheen (z-index 0,
   last in tree) → the positioned overlays, which carry z-index 1
   (.dmap-zoomout/.dmap-pop/.dmap-legend/.lmap-pin) so the sheen can never
   wash over them. Both pseudos are pointer-events: none so country clicks
   pass straight through. Orb tint is the one thing telling the two maps
   apart: silver/steel here, navy/periwinkle on .lmap-stage::before. */
.dmap-stage::before, .lmap-stage::before {
  content: ""; position: absolute; inset: -8%; z-index: 0; pointer-events: none;
  filter: blur(40px); opacity: .85;
}
.dmap-stage::before {
  background:
    radial-gradient(42% 68% at 10% 6%, rgba(255, 255, 255, .6) 0%, rgba(180, 190, 202, .45) 38%, rgba(180, 190, 202, 0) 70%),
    radial-gradient(46% 74% at 92% 92%, rgba(210, 217, 225, .55) 0%, rgba(118, 131, 148, .55) 42%, rgba(118, 131, 148, 0) 72%),
    radial-gradient(30% 52% at 74% 6%, rgba(66, 78, 94, .6), rgba(66, 78, 94, 0) 68%),
    radial-gradient(17% 30% at 22% 70%, #E9EDF2 0%, #8B96A4 38%, #39434F 68%, rgba(57, 67, 79, 0) 82%),
    radial-gradient(13% 24% at 78% 22%, #DCE2E9 0%, #6E7A89 45%, rgba(43, 53, 65, .9) 70%, rgba(43, 53, 65, 0) 84%);
}
.dmap-stage::after, .lmap-stage::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .3) 0%, rgba(255, 255, 255, .06) 34%, rgba(255, 255, 255, 0) 52%),
    radial-gradient(90% 60% at 50% 118%, rgba(7, 18, 31, .05), rgba(7, 18, 31, 0) 60%);
}
.dmap-svg { display: block; width: 100%; height: 100%; }
/* Zoom group — main.js sets the precomputed translate/scale from the selected
   country's data-zk/ztx/zty. Strokes stay crisp via non-scaling-stroke. */
.dmap-zoom { transition: transform .9s var(--ease); transform-origin: 0 0; will-change: transform; }
.dmap-zoomout {
  position: absolute; top: .8rem; right: .8rem; width: 36px; height: 36px; z-index: 1;
  display: grid; place-items: center; font: inherit; font-size: .95rem; line-height: 1;
  color: var(--ink, #07121F); background: rgba(255, 255, 255, .42); border: 1px solid rgba(255, 255, 255, .68);
  border-radius: 999px; cursor: pointer;
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 22px rgba(7, 18, 31, .12), inset 0 1px 0 rgba(255, 255, 255, .8);
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.dmap-zoomout:hover { background: rgba(255, 255, 255, .72); border-color: rgba(255, 255, 255, .95); }
/* Faded again for the glass re-skin (.05 → .025) — on the transparent pane
   the graticule showed through the frosted land as a mechanical grid. */
.dmap-meridian { stroke: rgba(7, 18, 31, .025); stroke-width: 1; vector-effect: non-scaling-stroke; }
/* Every one of the 176 countries on the map renders a path — active or not
   — so the world reads as complete rather than a few colored blobs on
   empty ocean. Glass palette (Aug 2026 re-skin, tightened same month, user
   request: "have the whole map be the same color … truly transparent
   glassmorphism"): ALL land — active markets and inert countries alike —
   is ONE uniform white-frost tone, a translucent glass layer floating over
   the tinted pane, defined by the soft drop shadow under the landmass
   rather than by color blocks. Active/inert no longer differ at rest
   (deliberate; the legend is hidden below for the same reason) — the
   cursor, hover tint, filter-pill glow and the panel carry that
   information instead. */
/* NO resting country borders (same request: "no lines delimiting the
   countries") — the end of the fade series that went .75/.6 → .32/.26 →
   .1/.08 on the old white hairlines. The stroke is NOT removed though:
   each path strokes in ITS OWN fill color, so the line is invisible while
   still closing the hairline anti-aliasing gaps that fully strokeless
   adjacent same-fill paths can show at some zoom levels (the
   long-documented reason the stroke never went to 0). Width 1.4 (was .5):
   with the dark chrome orbs behind the transparent pane, the generator's
   simplification slivers between neighboring paths showed through as dark
   specks — a same-color stroke this wide seals them and costs nothing
   visually, since it can't be told apart from the fill. Translucency lives
   on the GROUP (.dmap-countries opacity below), not on per-path rgba
   fills, so the self-colored strokes can't double-composite into darker
   seams. Every fill change (hover etc.) must update the stroke with it or
   a stale-colored rim appears. The focus and glow states below keep their
   heavier/opaque strokes on purpose: they're emphasis affordances
   (keyboard focus ring, filter-pill pulse), not resting country lines. */
/* Translucency on the countries GROUP (see comment above); the landmass
   drop shadow lives on .dmap-svg instead — an ancestor of the zoom
   transform — so it's computed in screen space AFTER the zoom and stays a
   constant soft lift. On .dmap-countries (inside the transform) the
   .9s-zoom scaled it into a huge dark smudge at high zoom levels. Alpha .4
   because it filters the group's already-.68-opacity alpha. */
/* Radius kept small on purpose: this root filter re-evaluates over the
   whole stage on every frame of the .9s zoom and of the (100+ path) glow
   animation — 26px read the same at this alpha but cost ~2.5x the blur. */
.dmap-svg { filter: drop-shadow(0 10px 14px rgba(7, 18, 31, .4)); }
.dmap-countries { opacity: .72; }
.dmap-country { fill: #fff; stroke: #fff; stroke-width: 1.4; }
.dmap-country--active {
  fill: #fff; stroke: #fff; stroke-width: 1.4; cursor: pointer;
  transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease);
  outline: none;
}
.dmap-country--active:hover { fill: #6E93C0; stroke: #6E93C0; }
.dmap-country--active:focus-visible { fill: #6E93C0; stroke: #fff; stroke-width: 1.4; }
/* Filter-pill glow — amber, distinct from the red "selected" state so both
   can be true of the same country at once without reading as a conflict. */
.dmap-country--active.is-glow {
  stroke: #F2B84B; stroke-width: 1.3;
  animation: dmap-glow 1.7s ease-in-out infinite;
}
@keyframes dmap-glow {
  0%, 100% { fill: #3D6088; filter: drop-shadow(0 0 1px rgba(242, 184, 75, .3)); }
  50% { fill: #5C87B8; filter: drop-shadow(0 0 7px rgba(242, 184, 75, .85)); }
}
/* Selected: the red fill is the emphasis on the glass pane — its old white
   rim was retired with every other resting line (self-colored stroke, same
   seam-insurance trick as above); .is-glow layered on top still gets its
   white pulse stroke since that one is an affordance, not a border. */
.dmap-country--active.is-selected { fill: var(--red-bright); stroke: var(--red-bright); stroke-width: 1.4; }
.dmap-country--active.is-selected.is-glow { stroke: #fff; stroke-width: 1.3; }
/* Keyboard focus must survive the selected/glow states: the plain
   :focus-visible rule above loses every cascade tie to the later
   .is-selected/.is-glow rules (equal specificity, later source order), and
   the glow ANIMATION owns fill outright — so the focus ring here is a
   stroke, carried by higher-specificity companions, at a width no other
   state uses. Without these, tabbing onto a selected or glowing country
   shows nothing (found in the Aug 2026 glass re-skin review). */
.dmap-country--active.is-selected:focus-visible,
.dmap-country--active.is-glow:focus-visible { stroke: #fff; stroke-width: 2.2; }
.dmap-legend {
  position: absolute; left: 1rem; bottom: .85rem; z-index: 1; display: flex; flex-wrap: wrap; gap: .45rem;
  font-size: .68rem; font-weight: 600; letter-spacing: .04em; color: var(--steel, #495463);
  /* Hidden since the uniform-color glass re-skin (Aug 2026, user request:
     "the whole map be the same color") — with active and inert land
     identical at rest, an Active/Selected/Not-yet-served key describes
     distinctions the map no longer draws, so showing it would be wrong.
     CSS-hidden rather than removed from distributionMapBand() so the
     markup, its translations and this rule set stay ready if a color
     split ever comes back. */
  display: none;
}
/* Chip backdrop: the legend sits on the map itself, and land can run under
   it — dark text needs the light chip to stay readable over any land. */
.dmap-legend__item {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(244, 246, 248, .85); border-radius: 999px; padding: .28rem .6rem;
}
.dmap-legend__swatch { width: 11px; height: 11px; border-radius: 3px; flex: none; }
.dmap-legend__swatch--active { background: #2E4A68; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); }
.dmap-legend__swatch--selected { background: var(--red-bright); }
.dmap-legend__swatch--inert { background: #B9C1CB; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .75); }
/* Selected-country card drawn on the map itself ([data-dmap-pop]). The panel
   below the map holds the same content, but the map runs up to 2080px wide,
   so the panel routinely sits below the fold — selecting a country then read
   as "nothing happened" unless you scrolled. Markup mirrors the panel's (same
   data-dmap-cname/-rg/-svc hooks), main.js shows it whenever the map is
   zoomed into a country. Top-left, clear of the ✕ (top-right) and the legend
   (bottom-left); dmapFocus() always centers the zoomed country, so the card
   never lands on top of it. */
.dmap-pop {
  position: absolute; top: .9rem; left: .9rem; width: min(340px, 40%); z-index: 1;
  max-height: calc(100% - 1.8rem); overflow: auto;
  display: flex; flex-direction: column; gap: .6rem;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px);
  border: 1px solid var(--band-hair); border-radius: var(--radius-lg);
  padding: .95rem 1.1rem 1.05rem; box-shadow: 0 18px 44px rgba(7, 18, 31, .25);
  animation: dmap-pop-in .35s var(--ease) both;
}
@keyframes dmap-pop-in {
  from { opacity: 0; translate: 0 -10px; scale: .97; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}
.dmap-pop .dmap-panel__tag { margin-bottom: 0; }
.dmap-pop__country { font-size: var(--step-1); }
.dmap-pop__desc {
  margin-top: 0; font-size: .8rem; line-height: 1.55;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; line-clamp: 3; overflow: hidden;
}
.dmap-pop .dmap-panel__svclabel { margin-bottom: .45rem; }
.dmap-pop .dmap-panel__chips { gap: .35rem; }
.dmap-pop .dmap-chip { padding: .3rem .62rem; font-size: .74rem; gap: .35rem; }
.dmap-pop .dmap-chip svg { width: 14px; height: 14px; }
.dmap-pop__more { font-size: .8rem; }
/* Office markers (Houston, Rotterdam, Abu Dhabi, Beverly Hills, Mexico
   City, London — pulsing dots, drawn OUTSIDE the zoom group and
   re-translated by main.js on every zoom) removed Aug 2026, user request:
   offices moved to the trading-offices.html locations map as diamond pins
   instead (`.lmap-pin` — same gem as the region pins there). This coverage
   map no longer renders any office marker; don't reintroduce a
   `.dmap-office*` rule set here without also reverting that move. */
.dmap-panel {
  /* Stacked fallback (<1200px): sits below the map, left-aligned to the
     map's own edge and capped for readability. At ≥1200px the .dmap grid
     override places it beside the map in the 360px right-hand column.
     Deliberately a STANDARD surface card, not glass — the map pane is the
     only glassmorphic object in the band (user request). */
  display: flex; flex-direction: column; gap: var(--s-5);
  max-width: 760px; margin-top: var(--s-6);
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius-xl); padding: 1.4rem 1.5rem 1.5rem; box-shadow: var(--shadow-1);
}
.dmap-panel__tag {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: .45rem;
}
.dmap-panel__country { color: var(--text); font-size: var(--step-2); line-height: 1.1; }
.dmap-panel__desc { color: var(--text-2); font-size: var(--step--1); line-height: 1.65; margin-top: .65rem; }
/* Default panel state — no country pre-selected on load. */
.dmap-panel__countryunit { font-size: var(--step-0); font-weight: 600; color: var(--text-2); }
.dmap-panel__stat { color: var(--text-2); font-size: var(--step--1); margin-top: var(--s-5); padding-top: var(--s-4); border-top: 1px solid var(--hair); }
.dmap-panel__svclabel {
  display: block; font-size: .68rem; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-2); margin-bottom: .6rem;
}
.dmap-panel__chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.dmap-chip {
  display: inline-flex; align-items: center; gap: .5rem; color: var(--text);
  background: var(--surface-2); border: 1px solid var(--hair);
  border-radius: 999px; padding: .42rem .85rem; font-size: var(--step--1); font-weight: 600;
  transition: background var(--dur) var(--ease), border-color var(--dur) var(--ease), translate var(--dur) var(--ease);
}
.dmap-chip:hover { background: var(--band-chip-2); border-color: var(--text-2); translate: 0 -2px; color: var(--text); }
.dmap-chip svg { width: 17px; height: 17px; flex: none; color: var(--text-2); }
.dmap-chip:hover svg { color: var(--text); }
.dmap-panel__more { color: var(--text); }
.dmap-panel__more:hover svg { transform: translateX(4px); }
/* Side-by-side layout (Aug 2026, user request): at desktop widths the
   Global-coverage panel rides in a fixed 360px column to the RIGHT of the
   map. minmax(0, 1fr) lets the stage column shrink below its content size
   so the aspect-ratio stage always tracks the column width; align-items:
   start keeps both boxes content-sized (the stage never stretches past its
   aspect ratio to match a taller panel, so the SVG never letterboxes). */
@media (min-width: 1200px) {
  .dmap { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: var(--s-6); align-items: start; }
  .dmap-panel { margin-top: 0; max-width: none; }
  /* The on-map selected-country card existed because the panel used to sit
     below the fold at full map width; with the panel now beside the map it
     duplicated the identical content a few pixels away. The pop stays for
     the stacked 901–1199px range only. */
  .dmap-pop { display: none; }
}
@media (max-width: 1100px) {
  .dmap-pop { width: min(300px, 48%); top: .7rem; left: .7rem; padding: .8rem .9rem .9rem; }
  .dmap-pop__desc { -webkit-line-clamp: 2; line-clamp: 2; }
}
@media (max-width: 900px) {
  .dmap-stage { border-radius: var(--radius-lg); }
  .dmap-panel { max-width: none; }
  /* Inert while the base .dmap-legend rule ends in display:none (glass
     re-skin) — this block sets no display, so the legend stays hidden at
     every width; kept for the day the legend returns. */
  .dmap-legend { position: static; padding: .6rem .95rem .75rem; flex-wrap: wrap; row-gap: .4rem; }
  /* Below this the stage is short enough (≤~320px, ~150px on a phone) that
     the card would cover a third of the map or more — measured 36% of the
     stage at a 760px viewport. main.js scrolls the panel, which is directly
     under the map on this layout anyway, into view instead. */
  .dmap-pop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dmap-country--active, .dmap-chip, .dmap-filter, .dmap-zoom { transition: none; }
  .dmap-country--active.is-glow { animation: none; fill: #5C87B8; }
  .dmap-pop { animation: none; }
}

/* ------------------- Hero background video (What We Do) -------------------
   Full-bleed Vimeo layer covering the entire page hero. background=1 mode
   strips all player chrome (no mute button, no controls); the iframe is
   cover-fitted to the section with container-query units so the 16:9 video
   crops instead of letterboxing at any hero size. Paint order: the --hero-img
   ::before stays behind it as the loading poster, and the ::after legibility
   gradient (later in paint order at the same level) stays on top of it. */
.page-hero__video {
  position: absolute; inset: 0; overflow: hidden; z-index: 0;
  container-type: size; pointer-events: none;
}
.page-hero__video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  border: 0;
  /* Fallback for browsers without cq units: over-covers, never letterboxes */
  width: max(100vw, 178vh); height: max(100vh, 56.25vw);
  width: max(100cqw, calc(100cqh * 16 / 9));
  height: max(100cqh, calc(100cqw * 9 / 16));
}
/* Reduced motion: drop the moving video, leaving the still hero photo. */
@media (prefers-reduced-motion: reduce) {
  .page-hero__video { display: none; }
}

/* ------------------- Locations map (distribution.html) --------------------
   The secondary "Our locations" map (locationsMapBand() in build.mjs): the
   same world-map base as the coverage map above it, reduced to a pure
   navigation surface — only the eight region locations are featured, each
   as region land (an SVG <a>), an HTML pin and a flat text card, all
   linking to that region's page. No filters/zoom/panel. The section reuses
   .dmap-band/.dmap-band__head for the band chrome and .dmap-meridian for
   the graticule; everything lmap-specific lives here. Land/ocean colors
   are the coverage map's — the two must read as the same object. Hover or
   focus on any land/pin/card highlights the other two via .is-hi (the
   "Locations map" sync in main.js). */
.lmap { max-width: 2080px; margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
.lmap-stage {
  aspect-ratio: var(--dmap-ar, 1000 / 391);
  position: relative; border-radius: var(--radius-xl); overflow: hidden;
  /* Very-light-navy frosted pane — the tinted sibling of the greyish
     .dmap-stage glass (the shared orb/sheen pseudo rules live with
     .dmap-stage), equally near-clear per the "complete transparency"
     reference. */
  /* One even light-blue tint edge to edge (user request: the whole
     background that lighter shade of blue, not concentrated in one area) —
     a deliberately narrow gradient range, with only broad low-contrast
     washes on ::before below for glass life. Darkened + de-fogged (late
     Aug 2026, user request: "background slightly darker … more crystal
     clear glassmorphism" — paired with the crisp, unblurred land edge
     above): base tint stepped down toward navy and the backdrop blur cut
     from 30px to 14px so the pane reads as clear glass over a darker room
     rather than a bright frosted fog. The land's own see-through tone
     (14% alpha in the #lmap-glass-edge filter) is untouched — "the lighter
     transparent version" of the continents stays exactly as light. */
  background: linear-gradient(135deg, rgba(104, 128, 160, .5) 0%, rgba(88, 111, 143, .56) 100%);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .62);
  box-shadow: 0 24px 60px rgba(7, 18, 31, .18), inset 0 1px 0 rgba(255, 255, 255, .7), inset 0 -1px 0 rgba(255, 255, 255, .22);
}
.lmap-svg { display: block; width: 100%; height: 100%; }
/* Navy/periwinkle orbs, in-stage — the shared geometry/sheen rules live
   with .dmap-stage::before/::after above. */
/* Unlike the coverage map's localized chrome orbs, this stage carries only
   two stage-spanning diagonal washes — the user asked for the light blue to
   cover the WHOLE background evenly, so no bright spotlights or dark
   corner orbs here. */
.lmap-stage::before {
  background:
    radial-gradient(120% 160% at 18% 0%, rgba(255, 255, 255, .35), rgba(255, 255, 255, 0) 60%),
    radial-gradient(130% 170% at 85% 100%, rgba(59, 86, 124, .3), rgba(59, 86, 124, 0) 65%);
}
/* GLASS-OUTLINE landmass (Aug 2026, user request — THIS MAP ONLY for now,
   so the treatment can be compared against distribution.html's bold
   white-frost land): continents are fully see-through — the pane shows
   straight through the interior at 14% of the painted color — with only a
   very fine, crisply-cut white edge along the UNION silhouette (late Aug
   2026, user request: the edge used to carry a feGaussianBlur soft glow;
   it's now a hard-edged fine line — see the #lmap-glass-edge filter comment
   in locationsMapBand() in build.mjs). Because the band is computed on the
   union alpha of all paths, internal country borders don't exist in it
   (the no-lines rule holds), and the self-colored seam strokes below still
   seal the generator's slivers so no internal cracks show in the union.
   Fills stay authored OPAQUE on purpose: the filter owns the transparency,
   so overlapping seam strokes can't double-composite into visible interior
   lines. Root drop-shadow softened for the thin edges. */
.lmap-svg { filter: drop-shadow(0 10px 14px rgba(7, 18, 31, .3)); }
.lmap-countries { filter: url(#lmap-glass-edge); }
.lmap-country { fill: #fff; stroke: #fff; stroke-width: 1.4; }
.lmap-country--loc { fill: #fff; stroke: #fff; stroke-width: 1.4; transition: fill var(--dur) var(--ease), stroke var(--dur) var(--ease); }
.lmap-region { cursor: pointer; outline: none; }
/* Hover/card-sync highlight: the filter shows interiors at 14% alpha, so
   the hover fill is INK — at 14% it reads as a smoked-glass region tint
   (a mid-blue like the old #6E93C0 vanishes entirely at this alpha). */
.lmap-region:hover .lmap-country--loc,
.lmap-region.is-hi .lmap-country--loc { fill: #07121F; stroke: #07121F; }
.lmap-region:focus-visible .lmap-country--loc { fill: #07121F; stroke: #fff; stroke-width: 1.4; }
/* Pins are HTML overlays, not SVG text: the label pill sizes itself to the
   translated region name in any of the 51 languages, which fixed-width SVG
   pills can't. left/top are build-time percentages of the cropped stage. */
.lmap-pin {
  position: absolute; z-index: 1; display: flex; align-items: center; gap: .45rem;
  transform: translate(-6.5px, -50%); text-decoration: none; outline: none;
  /* The map is a physical surface: under RTL the page's direction would
     reverse the flex row (label first), sliding the shard off its
     geographic point by the label's width. Locking LTR keeps the shard on
     its coordinates in every language; Arabic text still renders correctly
     inside the pill (single bidi run). */
  direction: ltr;
}
.lmap-pin--left { flex-direction: row-reverse; transform: translate(calc(-100% + 6.5px), -50%); }
/* Twinkle-cluster marker (user request, Aug 2026 — replaced the faceted
   diamond gem; markup is GEM_SVG in build.mjs, now a .lmap-pin__stars span
   holding three empty <i> sparks): each office is marked by three VERY
   small four-point stars that twinkle in sequence — no icon body, just the
   twinkle. The cluster keeps the gem's 13x18 footprint so .lmap-pin's
   geographic translate() math and the labelLeft variant needed no changes.
   Each spark staggers its own --sd delay on top of the pin's --tw delay
   (from build.mjs), so sparks ripple within a pin AND pins ripple across
   the map. White bodies with a dark halo read on the light-blue pane;
   hover/.is-hi swaps the animation for a steady bright state (the
   animation owns opacity/transform, so it must be switched off for the
   hover state to take — same rule the gem had for filter). */
.lmap-pin__stars { position: relative; display: block; width: 13px; height: 18px; flex: none; }
/* Spark bodies are the unified icon blue, flashing to white at the twinkle
   peak — most pins sit ON the white-frost land, where a plain white spark
   would vanish; the blue body + dark micro-halo reads on both the land and
   the blue pane, and the white flash + bloom is the actual twinkle. */
.lmap-pin__spark {
  position: absolute; display: block; background: var(--ico-blue, #2D6BCC);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
  filter: drop-shadow(0 0 1.5px rgba(16, 35, 60, .8)) drop-shadow(0 0 3px rgba(255, 255, 255, .7));
  opacity: .9;
  animation: lmap-spark-twinkle 3.2s ease-in-out infinite;
  animation-delay: calc(var(--tw, 0s) + var(--sd, 0s));
}
.lmap-pin__spark--1 { width: 8px; height: 8px; left: 2px; top: 2px; --sd: 0s; }
.lmap-pin__spark--2 { width: 6px; height: 6px; left: 0; top: 11px; --sd: .45s; }
.lmap-pin__spark--3 { width: 5px; height: 5px; left: 8px; top: 12px; --sd: .9s; }
@keyframes lmap-spark-twinkle {
  0%, 100% { opacity: .8; transform: scale(.9) rotate(0deg); background: var(--ico-blue, #2D6BCC); }
  12% { opacity: 1; transform: scale(1.5) rotate(24deg); background: #fff;
        filter: drop-shadow(0 0 2px rgba(16, 35, 60, .6)) drop-shadow(0 0 6px rgba(255, 255, 255, .95)); }
  24% { opacity: .85; transform: scale(.95) rotate(0deg); background: var(--ico-blue, #2D6BCC); }
  62% { opacity: 1; transform: scale(1.2) rotate(-14deg); background: #9FC3EC; }
}
.lmap-pin__label {
  background: rgba(7, 18, 31, .72); color: #fff; border-radius: 999px;
  padding: .28rem .62rem; font-family: var(--f-display); font-weight: 700;
  font-size: .72rem; line-height: 1; white-space: nowrap;
  transition: background var(--dur) var(--ease);
}
.lmap-pin:hover .lmap-pin__label, .lmap-pin.is-hi .lmap-pin__label,
.lmap-pin:focus-visible .lmap-pin__label { background: #07121F; }
.lmap-pin:hover .lmap-pin__spark, .lmap-pin.is-hi .lmap-pin__spark,
.lmap-pin:focus-visible .lmap-pin__spark {
  animation: none; opacity: 1; transform: scale(1.45); background: #fff;
  filter: drop-shadow(0 0 2px rgba(16, 35, 60, .7)) drop-shadow(0 0 5px rgba(45, 107, 204, .95));
}
/* Flat text-forward location cards (no photos — photography stays in
   heroes/bands/feature-media). Whole card is the link. */
.lmap-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-5); }
.lmap-card {
  display: flex; flex-direction: column; gap: var(--s-3);
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: var(--radius-lg); padding: 1.15rem 1.25rem 1.2rem;
  color: var(--text); box-shadow: var(--shadow-1);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lmap-card:hover, .lmap-card.is-hi { transform: translateY(-4px); box-shadow: var(--shadow-2); border-color: var(--navy); }
.lmap-card__icon {
  width: 44px; height: 44px; display: grid; place-items: center;
  color: var(--ico-blue); background: var(--surface-2); border-radius: var(--radius);
}
.lmap-card h3 { font-size: var(--step-2); line-height: 1.15; }
.lmap-card p { color: var(--text-2); font-size: var(--step--1); flex: 1; }
.lmap-card__more { display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; font-size: var(--step--1); }
.lmap-card__more svg { transition: transform var(--dur) var(--ease); }
.lmap-card:hover .lmap-card__more svg, .lmap-card.is-hi .lmap-card__more svg { transform: translateX(4px); }
@media (max-width: 1200px) {
  .lmap-cards { grid-template-columns: repeat(2, 1fr); }
  .lmap-pin__label { font-size: .64rem; padding: .24rem .5rem; }
}
@media (max-width: 900px) {
  /* The stage is too small for six free-floating pills — the spark
     clusters stay as visual anchors, the cards below carry the names (and
     each pin <a> carries an aria-label so the link keeps its name). */
  .lmap-pin__label { display: none; }
  .lmap-pin, .lmap-pin--left { transform: translate(-50%, -50%); }
}
@media (max-width: 640px) {
  .lmap-cards { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  /* Sparks stop twinkling but stay visible — they ARE the office marker. */
  .lmap-pin__spark { animation: none; opacity: 1; }
  .lmap-card:hover, .lmap-card.is-hi { transform: none; }
}

/* Home-page-only breathing room (Aug 2026, user request, ref. fpinfra.com):
   wider gaps between sections than the sitewide .section default, so the
   trimmed copy sits in more open space instead of a dense stack. Scoped to
   main.page-home so every other page keeps the standard rhythm. */
main.page-home .section,
main.page-home .media-band { padding-block: clamp(5rem, 10vw, 10rem); }
main.page-home .section--tight { padding-block: clamp(3.5rem, 6vw, 6rem); }
main.page-home .media-band__inner { padding: clamp(3rem, 7vw, 6rem) 0; }

/* .section--photo: home-only faded background photo behind a whole section
   (the "Three integrated businesses" section-head + cards), not behind the
   individual cards — those stay the standard flat .path (text-forward rule
   above, untouched). One low-opacity, desaturated image spans the full
   section edge-to-edge; a top/bottom fade to --bg keeps it from hard-cutting
   against the plain sections above/below. The .path cards' own opaque
   --surface background sits on top of it same as always. */
main.page-home .section--photo { position: relative; isolation: isolate; overflow: hidden; }
main.page-home .section--photo::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background-image: var(--section-img); background-size: cover; background-position: center;
  opacity: .1; filter: grayscale(.4) contrast(1.05);
}
main.page-home .section--photo::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, var(--bg) 0%, transparent 22%, transparent 78%, var(--bg) 100%);
}