/* ============================================================
 * F2 SYSTEM — SELF-HOSTED FONTS (latin subset, woff2)
 * Replaces Google Fonts CDN to avoid the cross-origin handshake
 * and to remove a third-party dependency. Variable font ranges
 * cover all weights used across the site.
 * ============================================================ */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/fraunces-normal-300-700.woff2) format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/fraunces-italic-400.woff2) format('woff2');
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url(fonts/manrope-normal-300-700.woff2) format('woff2');
}
@font-face {
  font-family: 'JetBrains Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url(fonts/jetbrains-mono-normal-400-500.woff2) format('woff2');
}

/* ============================================================
 * F2 SYSTEM — DESIGN SYSTEM
 * ============================================================
 * Single source of truth for all visual design tokens.
 *
 * Architecture (token families):
 *   COLOR     — brand palette + surfaces + derived gold variants
 *   TYPE      — numeric scale, semantic aliases, utility classes,
 *               display helpers, eyebrow + button styles
 *   SPACE     — 4px-based scale and semantic gap aliases
 *   RADIUS    — border-radius scale (none → pill)
 *   SHADOW    — elevation and glow
 *   MOTION    — durations + easing curves
 *   Z-INDEX   — stacking layers
 *   OPACITY   — fade / transparency scale
 *
 * Breakpoints: CSS custom properties cannot be used inside
 * @media queries, but these are the canonical values — use them
 * consistently in page-level media queries:
 *   --bp-xs:  480px   small mobile
 *   --bp-sm:  640px   mobile baseline
 *   --bp-md:  768px   tablet
 *   --bp-lg:  860px   nav hamburger threshold
 *   --bp-xl:  900px   desktop
 *   --bp-2xl: 1100px  wide desktop
 *
 * Fonts:
 *   Fraunces       — display serif (headlines, numerals)
 *   Manrope        — body sans-serif (prose, UI)
 *   JetBrains Mono — monospace (labels, specs, buttons)
 * ============================================================ */

:root {
  /* ======== COLOR — BRAND & SURFACES ======== */
  --bg:             #0a0b0d;
  --bg-elevated:    #14161a;
  --bg-panel:       #1c1f24;
  --ink:            #f4f1ea;
  --ink-muted:      #a8a49b;
  --ink-dim:        #9a9690;
  --gold:           #d4a84a;
  --gold-bright:    #ebc56b;

  /* Derived gold variants — tokenize so raw rgba() values stay out of page CSS. */
  --gold-subtle:    rgba(212, 168, 74, 0.06);  /* surface tint / hero card bg */
  --gold-dim:       rgba(212, 168, 74, 0.20);  /* subtle gold border */
  --gold-glow:      rgba(212, 168, 74, 0.40);  /* shadow/glow source */

  /* Ink-based borders (opacity-on-cream, reads on dark). */
  --border:         rgba(244, 241, 234, 0.08);
  --border-strong:  rgba(244, 241, 234, 0.18);

  /* ======== TYPE — NUMERIC SCALE ======== */
  --text-xs:  0.75rem;   /* 12px */
  --text-sm:  0.875rem;  /* 14px */
  --text-md:  1rem;      /* 16px */
  --text-lg:  1.125rem;  /* 18px */
  --text-xl:  1.25rem;   /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.75rem;   /* 28px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 4rem;      /* 64px */
  --text-7xl: 5rem;      /* 80px */

  /* Paired line-heights (tighter as sizes get larger) */
  --lh-xs:  1.5;
  --lh-sm:  1.5;
  --lh-md:  1.7;   /* body default */
  --lh-lg:  1.6;
  --lh-xl:  1.4;
  --lh-2xl: 1.3;
  --lh-3xl: 1.2;
  --lh-4xl: 1.15;
  --lh-5xl: 1.1;
  --lh-6xl: 1.05;
  --lh-7xl: 1.05;

  /* Letter spacing scale */
  --ls-display:    -0.02em;
  --ls-display-s:  -0.01em;
  --ls-button:      0.02em;  /* button text */
  --ls-utility:     0.08em;  /* short utility labels */
  --ls-tight:       0.10em;  /* compact UI / spec labels */
  --ls-chip:        0.12em;  /* chip / tag variant */
  --ls-meta:        0.14em;  /* mono caption */
  --ls-wide:        0.15em;  /* badges, section labels */
  --ls-callout:     0.16em;  /* callout badge */
  --ls-label:       0.18em;  /* button / tag labels */
  --ls-eyebrow:     0.28em;  /* section kicker */

  /* ======== TYPE — SEMANTIC ALIASES ======== */

  /* Body + utility (fixed — mobile-safe) */
  --fs-label:      var(--text-xs);   /* 12px */
  --fs-eyebrow:    var(--text-xs);   /* 12px */
  --fs-small:      var(--text-sm);   /* 14px */
  --fs-body:       var(--text-md);   /* 16px */
  --fs-lede:       var(--text-lg);   /* 18px */
  --fs-label-lg:   var(--text-lg);   /* 18px */
  --fs-subheading: var(--text-2xl);  /* 24px */

  /* Display (fluid — responsive via clamp) */
  --fs-display-s:  var(--text-3xl);                                /* 28px fixed */
  --fs-display-l:  clamp(var(--text-3xl), 5vw, var(--text-6xl));   /* 28→64px */
  --fs-display-xl: clamp(var(--text-4xl), 6vw, var(--text-7xl));   /* 36→80px */
  --fs-stat-xl:    clamp(var(--text-4xl), 5vw, var(--text-6xl));   /* 36→64px */

  /* Semantic line-heights (reference scale-paired values) */
  --lh-body:       var(--lh-md);     /* 1.7 */
  --lh-body-small: var(--lh-lg);     /* 1.6 */
  --lh-display-s:  var(--lh-4xl);    /* 1.15 */
  --lh-display-l:  var(--lh-5xl);    /* 1.1 */
  --lh-display-xl: var(--lh-6xl);    /* 1.05 */

  /* ======== SPACE — NUMERIC SCALE (4px base) ======== */
  --space-1:   0.25rem;   /*  4px */
  --space-2:   0.5rem;    /*  8px */
  --space-3:   0.75rem;   /* 12px */
  --space-4:   1rem;      /* 16px */
  --space-5:   1.25rem;   /* 20px */
  --space-6:   1.5rem;    /* 24px */
  --space-8:   2rem;      /* 32px */
  --space-10:  2.5rem;    /* 40px */
  --space-12:  3rem;      /* 48px */
  --space-16:  4rem;      /* 64px */
  --space-20:  5rem;      /* 80px */
  --space-24:  6rem;      /* 96px */
  --space-32:  8rem;      /* 128px */

  /* Semantic gap aliases — use these for every CSS gap property.
     xs  = tight intra-element gaps (icon↔label inside a button)
     sm  = between grouped items (buttons in a btn-row)
     md  = between small components (footer-bottom items)
     lg  = between content blocks
     xl  = open layouts (nav links, feature grids)
     2xl = wide grid columns (footer-grid)       */
  --gap-xs:  var(--space-2);   /*  8px */
  --gap-sm:  var(--space-3);   /* 12px */
  --gap-md:  var(--space-4);   /* 16px */
  --gap-lg:  var(--space-6);   /* 24px */
  --gap-xl:  var(--space-10);  /* 40px */
  --gap-2xl: var(--space-12);  /* 48px */

  /* Page header (hero/title block) vertical padding.
     Canonical spacing for the first section on content-led pages
     (about, products, contact). Clears the 80px fixed nav with
     breathing room above the title. Full-viewport heroes (index, RGD3)
     use their own `min-height: 100vh` pattern; breadcrumbed heroes
     (RGD2) use their own smaller values. Mobile override below. */
  --header-pad-t: 9rem;  /* 144px */
  --header-pad-b: 4rem;  /*  64px */

  /* Section vertical padding — symmetric top/bottom.
     Pick the tier that matches the section's visual weight:
       y    = standard content section (default)       8rem / 5rem
       y-md = medium section / CTA strip               6rem / 4rem
       y-sm = compact accent bar or divider strip      3rem / 2rem
     Asymmetric paddings (top ≠ bottom) stay inline — that's deliberate
     rhythm, not a token failure. */
  --section-pad-y:    8rem;  /* 128px */
  --section-pad-y-md: 6rem;  /*  96px */
  --section-pad-y-sm: 3rem;  /*  48px */

  /* ======== RADIUS ======== */
  --radius-none:   0;
  --radius-sm:     2px;   /* badges, small accents */
  --radius-md:     4px;   /* cards, inputs */
  --radius-lg:     6px;   /* larger panels */
  --radius-xl:     8px;   /* hero surfaces */
  --radius-2xl:    14px;  /* large decorative cards */
  --radius-pill:   999px; /* buttons, nav CTA */
  --radius-circle: 50%;   /* avatars, dots */

  /* ======== SHADOW ======== */
  --shadow-sm:    0 2px 8px rgba(0, 0, 0, 0.25);
  --shadow-md:    0 8px 16px rgba(0, 0, 0, 0.30);
  --shadow-lg:    0 20px 40px rgba(0, 0, 0, 0.50);
  --shadow-gold:  0 20px 40px -15px var(--gold-glow);  /* button hover glow */

  /* ======== MOTION — duration + easing ======== */
  --duration-fast:    200ms;   /* hovers, color fades, opacity */
  --duration-base:    300ms;   /* buttons, cards, standard UI */
  --duration-ui:      400ms;   /* nav, logo, flyout menu */
  --duration-slow:    550ms;   /* deliberate: card tilt, deck fan */
  --duration-reveal:  900ms;   /* scroll reveal on-enter */

  --ease-smooth:  cubic-bezier(0.20, 0.80, 0.20, 1);  /* default ease-out */
  --ease-sharp:   cubic-bezier(0.40, 0.00, 0.20, 1);  /* menu, hamburger */
  --ease-spring:  cubic-bezier(0.34, 1.40, 0.64, 1);  /* overshoot / bounce */

  /* ======== Z-INDEX — stacking layers ======== */
  --z-base:        0;
  --z-overlay:     1;   /* hero overlays, card backgrounds */
  --z-content:     2;   /* hero content, nav items above overlay */
  --z-dropdown:    3;   /* hero marquee, small popovers */
  --z-sticky:     10;   /* sticky section headers */
  --z-nav:       100;   /* top nav bar */
  --z-nav-menu:  200;   /* flyout menu */
  --z-grain:    1000;   /* film-grain overlay (always on top) */

  /* ======== OPACITY scale ======== */
  --opacity-grain:   0.035;  /* film-grain overlay */
  --opacity-subtle:  0.08;   /* very subtle overlays */
  --opacity-medium:  0.30;   /* dimmed text / inactive */
  --opacity-muted:   0.55;   /* inactive thumbnails */
  --opacity-dim:     0.70;   /* footer links default */
  --opacity-strong:  0.85;   /* hero glass backdrop */
}

/* Mobile overrides for responsive tokens */
@media (max-width: 640px) {
  :root {
    --header-pad-t: 7rem;  /* 112px */
    --header-pad-b: 3rem;  /*  48px */

    --section-pad-y:    5rem;  /* 80px */
    --section-pad-y-md: 4rem;  /* 64px */
    --section-pad-y-sm: 2rem;  /* 32px */
  }
}

/* ============================================================
 * TYPE — UTILITY CLASSES
 * ============================================================ */

.text-xs  { font-size: var(--text-xs);  line-height: var(--lh-xs); }
.text-sm  { font-size: var(--text-sm);  line-height: var(--lh-sm); }
.text-md  { font-size: var(--text-md);  line-height: var(--lh-md); }
.text-lg  { font-size: var(--text-lg);  line-height: var(--lh-lg); }
.text-xl  { font-size: var(--text-xl);  line-height: var(--lh-xl); }
.text-2xl { font-size: var(--text-2xl); line-height: var(--lh-2xl); }
.text-3xl { font-size: var(--text-3xl); line-height: var(--lh-3xl); }
.text-4xl { font-size: var(--text-4xl); line-height: var(--lh-4xl); }
.text-5xl { font-size: var(--text-5xl); line-height: var(--lh-5xl); }
.text-6xl { font-size: var(--text-6xl); line-height: var(--lh-6xl); }
.text-7xl { font-size: var(--text-7xl); line-height: var(--lh-7xl); }

/* ============================================================
 * DISPLAY HELPERS — intent-named headline classes.
 * Use .display-xl / -l / -s for consistent hero / section / card
 * headings; these bundle font, weight, line-height, letter-spacing,
 * and Fraunces variation axes.
 * ============================================================ */

.display-xl {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: var(--fs-display-xl);
  line-height: var(--lh-display-xl);
  letter-spacing: var(--ls-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.display-l {
  font-family: 'Fraunces', serif;
  font-weight: 300;
  font-size: var(--fs-display-l);
  line-height: var(--lh-display-l);
  letter-spacing: var(--ls-display);
  font-variation-settings: "opsz" 144, "SOFT" 50;
}
.display-s {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-size: var(--fs-display-s);
  line-height: var(--lh-display-s);
  letter-spacing: var(--ls-display-s);
}

/* Italic em inside display headlines = gold accent. */
.display-xl em,
.display-l em,
.display-s em {
  font-style: italic;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
/* Display-class headings get smarter line-balancing so the
   accent em doesn't end up alone on its own short line. */
.display, .display-xl, .display-l, .display-s {
  text-wrap: balance;
}

/* Eyebrow, canonical section kicker */
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--gold);
}

/* ============================================================
 * BUTTONS — canonical rounded style (Manrope, pill)
 *   .btn-primary   — gold fill, main CTAs
 *   .btn-secondary — hairline outline, supporting links
 * ============================================================ */

.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--gap-xs);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-button);
  padding: var(--space-4) var(--space-8);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--duration-base) var(--ease-smooth);
  white-space: nowrap;
}
.btn-primary {
  background: var(--gold);
  color: var(--bg);
  border-color: var(--gold);
}
.btn-primary:hover {
  background: var(--gold-bright);
  border-color: var(--gold-bright);
  transform: translateY(-2px);
  box-shadow: var(--shadow-gold);
}
.btn-secondary {
  background: transparent;
  color: var(--ink);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  border-color: var(--gold);
  color: var(--gold);
}

/* ============================================================
 * BTN-ROW — flex container for button groups
 *   Inline-flex row on desktop; full-width column on mobile.
 *   Buttons stretch to fill the row on narrow screens so
 *   touch targets are comfortably sized.
 * ============================================================ */
.btn-row {
  display: inline-flex;
  gap: var(--gap-sm);
  flex-wrap: wrap;
  align-items: center;
}
@media (max-width: 640px) {
  .btn-row {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .btn-row .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
  }
}

/* ============================================================
 * PAGE BASE — reset, body, typography primitives
 * Previously duplicated inline in every <style> block. One home now.
 * Page-specific tweaks (e.g. about.html's lighter .display weight)
 * are still allowed inline and override these defaults via cascade.
 * ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  font-family: 'Manrope', sans-serif;
  background: var(--bg);
  color: var(--ink);
  line-height: var(--lh-body-small);
  overflow-x: hidden;
}
/* Film-grain overlay — fixed, non-interactive. Fed via tokens. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-grain);
  opacity: var(--opacity-grain);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/></filter><rect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/></svg>");
  mix-blend-mode: overlay;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.display {
  font-family: 'Fraunces', serif;
  font-weight: 400;
  font-variation-settings: "opsz" 144, "SOFT" 50;
  letter-spacing: var(--ls-display);
  line-height: var(--lh-display-xl);
}
.display em {
  font-style: italic;
  font-weight: 400;
  color: var(--gold);
  font-variation-settings: "opsz" 144, "SOFT" 100;
}
.mono { font-family: 'JetBrains Mono', monospace; }
.eyebrow {
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}

.container { max-width: 1360px; margin: 0 auto; padding: 0 2rem; }
@media (max-width: 640px) { .container { padding: 0 1.25rem; } }

/* ============================================================
 * FADE-ON-LOAD UTILITY
 * Pure-CSS fade-in for hero media. Pair with [data-fade-on-load].
 * 100ms delay gives the first frame a beat to paint, then
 * 700ms ease-out fade. `both` keeps the end state.
 * Honours prefers-reduced-motion.
 * ============================================================ */
@keyframes f2-fade-in { from { opacity: 0; } to { opacity: 1; } }
[data-fade-on-load] { animation: f2-fade-in 700ms ease-out 100ms both; }
@media (prefers-reduced-motion: reduce) {
  [data-fade-on-load] { animation: none; }
}

/* ============================================================
 * INTERACTIONS — TEXT POLISH
 * ============================================================ */

/* Skip-to-content link — visually hidden until keyboard-focused.
   First focusable element on every page. Lets keyboard / screen-reader
   users bypass the nav and jump straight to <main id="main">.

   Uses the standard "sr-only" clip pattern instead of transform-based
   hiding because iOS Safari can briefly render transform-translated
   fixed elements during scroll bounce / momentum. Clipping to a 1×1
   point with overflow:hidden is bulletproof across browsers and
   guarantees nothing peeks into view during scrolling. */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
/* On keyboard focus, swap to a fully-styled visible button. */
.skip-link:focus,
.skip-link:focus-visible {
  position: fixed;
  top: var(--space-3);
  left: var(--space-3);
  width: auto;
  height: auto;
  margin: 0;
  padding: var(--space-3) var(--space-5);
  overflow: visible;
  clip: auto;
  clip-path: none;
  z-index: 10001;
  background: var(--gold);
  color: var(--bg);
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-pill);
  outline: none;
}

/* External-link arrow utility — appends a diagonal arrow that is
   forced into TEXT presentation across all platforms.
   The U+FE0E variation selector after U+2197 prevents iOS / Android
   from rendering the arrow as a colored emoji glyph. Use this class
   on any link that goes off-site (or use the literal "↗︎" in source
   text — both produce the same result; same convention applies).
   Reference: emoji-presentation behaviour for U+2197 NORTH EAST ARROW.

   Usage:
     <a href="..." class="link-external">YouTube</a>
   Renders: "YouTube ↗︎" with text-presentation arrow.

   Don't use literal "↗" without VS-15 — iOS Safari will turn it into
   a colored emoji that breaks the brand monochrome aesthetic. */
.link-external::after {
  content: ' \2197\FE0E';
  font-feature-settings: normal;
  letter-spacing: 0;
}

/* Animated link underline: gold hairline expands from left.
   Apply via .link-anim or to bare anchors inside .prose-text. */
.link-anim, a.link-anim {
  position: relative;
  display: inline;
  background-image: linear-gradient(var(--gold), var(--gold));
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0% 1px;
  transition: background-size var(--duration-base) var(--ease-smooth),
              color var(--duration-fast);
  padding-bottom: 2px;
}
.link-anim:hover, a.link-anim:hover {
  background-size: 100% 1px;
  color: var(--gold);
}
@media (hover: none), (pointer: coarse) {
  .link-anim, a.link-anim { background-size: 0% 1px; }
}

/* Em delayed reveal: when an .em-delay element enters view (via
   .reveal.in-view or [data-fade-on-load].is-loaded on a parent),
   the gold em words inside fade in 200ms after the rest. Falls
   back to instant if reveal isn't wired. */
.em-delay em {
  opacity: 0;
  transition: opacity 900ms var(--ease-smooth) 350ms;
}
.em-delay.in-view em,
.em-delay.is-loaded em,
.reveal.in-view .em-delay em,
.em-delay-ready em {
  opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
  .em-delay em { opacity: 1; transition: none; }
}

/* Industry term glossary: dotted underline + popover on hover/tap.
   Mark up: <span class="gloss" data-gloss="GLI is...">GLI</span> */
.gloss {
  position: relative;
  border-bottom: 1px dotted var(--ink-muted);
  cursor: help;
  transition: border-color var(--duration-fast);
}
.gloss:hover, .gloss:focus { border-bottom-color: var(--gold); }
.gloss::after {
  content: attr(data-gloss);
  position: absolute;
  left: 50%; top: calc(100% + 0.6rem);
  transform: translateX(-50%) translateY(4px);
  width: max-content;
  max-width: 260px;
  padding: 0.55rem 0.75rem;
  background: rgba(10,11,13,0.96);
  border: 1px solid var(--gold);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: 0.78rem;
  line-height: 1.45;
  letter-spacing: 0;
  text-transform: none;
  white-space: normal;
  text-align: left;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-fast), transform var(--duration-base) var(--ease-smooth);
  z-index: 50;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.gloss:hover::after, .gloss:focus::after, .gloss.is-open::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .gloss::after { max-width: 220px; font-size: 0.74rem; }
}

/* Country list hover (about stats-note): hovering one country
   highlights it gold and dims the rest. Wrap each country in
   <span class="country">. Compatible with text dot separators. */
.country-list:hover .country { color: var(--ink-dim); transition: color var(--duration-fast); }
.country-list .country:hover { color: var(--gold); }
@media (hover: none), (pointer: coarse) {
  .country-list:hover .country { color: inherit; }
}

/* Counter: fills out from 0 to target on scroll-into-view via JS.
   Mark up: <span data-counter="20" data-counter-suffix="+">0</span> */
[data-counter] { display: inline-block; min-width: 1ch; }

/* Word stagger reveal: applied per <span class="word"> via JS
   that splits a heading. Each word has a small entrance delay. */
.word-stagger .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.4em);
  transition: opacity 500ms var(--ease-smooth),
              transform 500ms var(--ease-smooth);
}
.word-stagger.in-view .word { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .word-stagger .word { opacity: 1; transform: none; transition: none; }
}

/* RGD3 layout slideshow — fade carousel of 8 layout renders.
   Used in place of a video on the homepage spotlight and products card.
   Container sizing (width/height) is set by the parent's existing rules.
   Compound selector .rgd3-slideshow .rgd3-slide is needed to beat
   site-wide cascade rules like ".product-visual img" or ".spotlight-media img"
   that otherwise constrain max-width / set object-fit: contain. */
.rgd3-slideshow {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: block;
}
.rgd3-slideshow .rgd3-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  padding: 0;
  margin: 0;
  object-fit: contain;
  object-position: center;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.rgd3-slideshow .rgd3-slide.is-active { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .rgd3-slideshow .rgd3-slide { transition: none; }
}

/* ============================================================
 * Custom dropdown — JS-replaces any <select data-custom-dropdown>
 * with a fully-styled trigger + popup listbox while keeping the
 * original <select> in the DOM (visually hidden) so form submit
 * still works. Falls back to native if JS disabled.
 * ============================================================ */
.f2-cd-wrap { position: relative; width: 100%; }
.f2-cd-native-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  clip: rect(0 0 0 0);
}
.f2-cd-trigger {
  width: 100%;
  padding: 0.75rem 0.9rem;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--ink);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.4;
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color var(--duration-fast), background var(--duration-fast);
}
.f2-cd-trigger:hover {
  border-color: var(--border-strong);
  background: var(--bg);
}
.f2-cd-trigger:focus-visible {
  outline: none;
  border-color: var(--gold);
  background: var(--bg);
}
.f2-cd-wrap.is-open > .f2-cd-trigger {
  border-color: var(--gold);
  background: var(--bg);
}
.f2-cd-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.f2-cd-chev {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  margin-left: 0.7rem;
  color: var(--ink-muted);
  transition: color var(--duration-fast) ease, transform var(--duration-base) var(--ease-smooth);
}
.f2-cd-chev svg { display: block; }
.f2-cd-wrap.is-open .f2-cd-chev {
  color: var(--gold);
  transform: rotate(180deg);
}
.f2-cd-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 100;
  list-style: none;
  margin: 0;
  padding: 0.4rem 0;
  background: rgba(10, 11, 13, 0.97);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--gold);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
  /* Tall enough that current option lists fit without scroll. If a list
     of options gets long enough to overflow this, the scroll behaviour
     activates and the bottom padding correctly stays inside the scroll
     viewport. */
  max-height: 24rem;
  overflow-y: auto;
  opacity: 0;
  transform: translateY(-4px) scaleY(0.98);
  transform-origin: top center;
  pointer-events: none;
  transition: opacity var(--duration-fast) ease, transform var(--duration-base) var(--ease-smooth);
}
.f2-cd-wrap.is-open .f2-cd-list {
  opacity: 1;
  transform: translateY(0) scaleY(1);
  pointer-events: auto;
}
.f2-cd-option {
  /* Horizontal padding matches the trigger field so the text columns line up.
     Trigger has 0.9rem inline padding; the list has 0 inline padding so this
     value alone determines the visual indent. */
  padding: 0.7rem 0.9rem;
  cursor: pointer;
  color: var(--ink-muted);
  font-family: 'Manrope', sans-serif;
  font-size: var(--fs-body);
  line-height: 1.4;
  position: relative;
  transition: color var(--duration-fast), background var(--duration-fast);
  user-select: none;
}
.f2-cd-option:hover,
.f2-cd-option.is-focused {
  outline: none;
  background: var(--bg-elevated);
  color: var(--ink);
}
.f2-cd-option.is-selected { color: var(--gold); }
.f2-cd-option.is-selected::before {
  content: '';
  position: absolute;
  left: 0; top: 50%;
  width: 2px; height: 1.1em;
  background: var(--gold);
  transform: translateY(-50%);
}
.f2-cd-option.is-selected.is-focused {
  background: var(--bg-elevated);
  color: var(--gold);
}

/* Brochure download toast — appears bottom-right when a .brochure-link is clicked. */
.f2-toast-stack {
  position: fixed;
  bottom: 1.5rem; right: 1.5rem;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  pointer-events: none;
  max-width: calc(100vw - 3rem);
}
.f2-toast {
  pointer-events: auto;
  background: rgba(10,11,13,0.96);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  padding: 0.95rem 1.2rem;
  color: var(--ink);
  font-size: var(--fs-small);
  line-height: 1.4;
  max-width: 22rem;
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-base) var(--ease-smooth),
              transform var(--duration-base) var(--ease-smooth);
}
.f2-toast.is-visible { opacity: 1; transform: translateY(0); }
.f2-toast .toast-title {
  font-family: 'JetBrains Mono', monospace;
  font-size: var(--fs-label);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 0.35rem;
}
.f2-toast a { color: var(--gold); text-decoration: underline; text-underline-offset: 2px; }
.f2-toast a:hover { color: var(--gold-bright); }
@media (max-width: 540px) {
  .f2-toast-stack { bottom: 1rem; right: 1rem; left: 1rem; }
  .f2-toast { max-width: none; }
}