/* ============================================================
   MINTWURKS LIMITED — shared stylesheet
   Loaded on every page before the page's own stylesheet.
   Tokens, navigation, buttons, ticker, footer, reveal system
   and every component that appears on more than one page.
   ============================================================ */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --ink: #12201E;
  --ink-light: #1d302c;
  --mid: #66706c;
  --rule: #ddd8cc;
  --cream: #FAF8F2;
  --paper: #ffffff;

  --purple: #B8860B;
  --purple-dark: #8a6508;
  --teal: #D4AF37;
  --teal-dark: #1A5F5F;
  --slate: #4a5a78;

  --grad: linear-gradient(135deg, #B8860B 0%, #C79A2E 50%, #D4AF37 100%);
  --grad-subtle: linear-gradient(135deg, rgba(184,134,11,0.12) 0%, rgba(212,175,55,0.08) 100%);
  --paper-95: rgba(255,255,255,0.95);

  /* Deep brand surfaces — the dark sections are tinted with the logo's own
     indigo-to-teal range instead of flat black. Every stop stays dark enough
     for white body text to clear WCAG AA comfortably. */
  --deep-solid: #0D4A4A;              /* small elements: ticker, badges, circles */
  --deep-solid-2: #1A5F5F;            /* teal end, for hover/alternate surfaces */
  --deep: linear-gradient(160deg, #0D4A4A 0%, #114f4a 55%, #1A5F5F 100%);
  --deep-soft: linear-gradient(160deg, #12595a 0%, #16635c 55%, #1d7070 100%); /* hover / raised */
  --deep-line: rgba(255,255,255,0.14);
  /* Tokens the original per-page :root blocks defined; kept here now that the
     stylesheets are shared. Alphas raised for the tinted deep surfaces. */
  --white-55: rgba(255,255,255,0.78);
  --white-45: rgba(255,255,255,0.7);
  --ink-85: rgba(18,32,30,0.85);
  --ink-70: rgba(18,32,30,0.68);

  /* Same hues, darkened, for surfaces that carry white text (buttons, badges).
     White clears 5.2:1 or better on every stop; the bright --grad is kept for
     display type and hairlines where contrast is not a factor. */
  --grad-solid: linear-gradient(135deg, #0D4A4A 0%, #14544c 50%, #1A5F5F 100%);
  /* Gradient-filled TEXT on a deep surface: the standard --grad is too dark to
     read there, so headline type on dark bands uses this brighter version. */
  --grad-bright: linear-gradient(135deg, #F2E2AE 0%, #E8CE7A 50%, #D4AF37 100%);
  /* Brand accents lightened for use on the deep surfaces */
  --purple-on-dark: #E5D5A8;
  --teal-on-dark: #E8CE7A;

  --nav-h: 130px;          /* desktop, top of page */
  --nav-h-compact: 88px;   /* desktop, after scrolling */
  --nav-h-mobile: 76px;

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}

html {
  scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
  /* Guard on BOTH html and body: if only body clips, an overflowing element can still
     widen the layout viewport on Android, pushing the fixed nav's right edge off-screen. */
  overflow-x: hidden; overflow-x: clip;
  width: 100%; max-width: 100%;
}

body {
  font-family: 'Instrument Sans', sans-serif;
  background: var(--paper);
  color: var(--ink);
  overflow-x: hidden; overflow-x: clip;
  width: 100%; max-width: 100%;
  line-height: 1.5;
}

img, svg, video { max-width: 100%; }
img { height: auto; }

:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

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

.skip-link {
  position: absolute; top: -100px; left: 1rem; z-index: 1000;
  background: var(--ink); color: var(--paper); padding: 0.7rem 1.2rem;
  font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

/* ── CURSOR (desktop with a fine pointer only) ── */
.cursor, .cursor-ring { display: none; }
@media (hover: hover) and (pointer: fine) {
  body, a, button, .hero-product, label, summary { cursor: none; }
  input, textarea, select { cursor: auto; }
  .cursor {
    display: block; width: 10px; height: 10px; background: var(--teal); border-radius: 50%;
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999;
    transform: translate(-50%, -50%); transition: transform 0.1s, width 0.3s, height 0.3s;
  }
  .cursor-ring {
    display: block; width: 36px; height: 36px; border: 1px solid rgba(184,134,11,0.45); border-radius: 50%;
    position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9998;
    transform: translate(-50%, -50%); transition: transform 0.18s ease-out, width 0.3s, height 0.3s;
  }
  body:has(a:hover, button:hover, .hero-product:hover) .cursor { width: 16px; height: 16px; background: var(--purple); }
  body:has(a:hover, button:hover, .hero-product:hover) .cursor-ring { width: 50px; height: 50px; border-color: rgba(184,134,11,0.7); }
}

/* ── NAV ── */
nav.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: 0 5%;
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--deep); background-attachment: fixed;
  transition: height 0.35s var(--ease-out), box-shadow 0.35s;
}
/* Brand gradient edge along the bottom of the bar — mirrors the footer's top edge. */
nav.site-nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--grad-bright); }
nav.site-nav.scrolled { height: var(--nav-h-compact); box-shadow: 0 8px 28px rgba(8,40,38,0.28); }

.logo-mark { display: flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.nav-logo {
  height: calc(var(--nav-h) - 18px); width: auto; display: block; object-fit: contain;
  transition: height 0.35s var(--ease-out);
}
nav.site-nav.scrolled .nav-logo { height: calc(var(--nav-h-compact) - 20px); }

.nav-center { display: flex; gap: 2.6rem; list-style: none; position: absolute; left: 50%; transform: translateX(-50%); }
.nav-center a {
  position: relative; display: inline-block;
  font-size: 0.72rem; font-weight: 400; text-transform: uppercase; letter-spacing: 0.14em;
  color: rgba(255,255,255,0.78); text-decoration: none; transition: color 0.2s; padding: 4px 0; white-space: nowrap;
}
.nav-center a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--grad-bright); transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--ease-out);
}
.nav-center a:hover { color: #fff; }
.nav-center a:hover::after { transform: scaleX(1); }
.nav-center a.active, .nav-center a[aria-current="page"] { color: #fff; font-weight: 500; }
.nav-center a.active::after, .nav-center a[aria-current="page"]::after { transform: scaleX(1); }

.nav-right {
  flex-shrink: 0; padding: 0.66rem 1.5rem; background: var(--grad-bright); color: #0D2A2A;
  font-size: 0.68rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em;
  text-decoration: none; white-space: nowrap;
  transition: filter 0.25s, transform 0.2s, box-shadow 0.25s;
}
.nav-right:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px rgba(212,175,55,0.28); }

@media (max-width: 1360px) { .nav-center { gap: 1.8rem; } }

/* ── HAMBURGER & MOBILE MENU ── */
.hamburger {
  display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px;
  background: none; border: none; margin: 0; padding: 0; flex-shrink: 0;
  width: 44px; height: 44px; /* full tap target, never clipped */
}
.hamburger span { width: 24px; height: 2px; background: #fff; display: block; transition: transform 0.3s var(--ease-out), opacity 0.2s, background 0.3s; }
.hamburger.open span { background: #D4AF37; }
.hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  display: none; position: fixed; left: 0; right: 0; top: var(--nav-h-mobile); bottom: 0;
  background: var(--deep); z-index: 199; padding: 1rem 6% 2rem; flex-direction: column;
  overflow-y: auto; overflow-x: hidden; counter-reset: menu;
}
.mobile-menu::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle at 100% 0%, rgba(242,226,174,0.20), transparent 55%),
    radial-gradient(circle at 0% 100%, rgba(212,175,55,0.16), transparent 55%);
}
/* Faint brand mark filling the space beneath the last row */
.mobile-menu::after {
  content: ''; position: fixed; right: -60px; bottom: -40px; width: 320px; height: 320px;
  background: url(../assets/mintwurks-logo-light.png) center/contain no-repeat;
  opacity: 0.08; pointer-events: none;
}
.mobile-menu.open { display: flex; }
.mobile-menu a {
  position: relative; display: flex; align-items: baseline; gap: 1.2rem;
  padding: 1.25rem 0.2rem; border-bottom: 1px solid rgba(255,255,255,0.14);
  font-family: 'Playfair Display', serif; font-size: clamp(1.7rem, 7vw, 2.4rem); font-weight: 700;
  color: #fff; text-decoration: none; transition: color 0.2s, background 0.2s, padding-left 0.2s;
  opacity: 0; transform: translateY(14px);
}
/* Chevron on each row */
.mobile-menu > a:not(.mob-cta) .chev {
  margin-left: auto; align-self: center; width: 9px; height: 9px;
  border-top: 2px solid rgba(255,255,255,0.45); border-right: 2px solid rgba(255,255,255,0.45);
  transform: rotate(45deg); transition: border-color 0.2s, transform 0.2s;
}
.mobile-menu > a:not(.mob-cta):active .chev, .mobile-menu > a[aria-current="page"] .chev { border-color: #D4AF37; transform: rotate(45deg) translate(2px, -2px); }
.mobile-menu.open a { animation: menuIn 0.5s var(--ease-out) forwards; }
.mobile-menu a:nth-child(1) { animation-delay: 0.04s; } .mobile-menu a:nth-child(2) { animation-delay: 0.08s; }
.mobile-menu a:nth-child(3) { animation-delay: 0.12s; } .mobile-menu a:nth-child(4) { animation-delay: 0.16s; }
.mobile-menu a:nth-child(5) { animation-delay: 0.20s; } .mobile-menu a:nth-child(6) { animation-delay: 0.24s; }
.mobile-menu a:nth-child(7) { animation-delay: 0.28s; } .mobile-menu a:nth-child(8) { animation-delay: 0.32s; }
@keyframes menuIn { to { opacity: 1; transform: translateY(0); } }
.mobile-menu > a:not(.mob-cta)::before {
  counter-increment: menu; content: counter(menu, decimal-leading-zero);
  font-family: 'Instrument Sans', sans-serif; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.18em; min-width: 2ch;
  background: var(--grad-bright); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
  padding-bottom: 0.3em; margin-bottom: -0.3em;
}
.mobile-menu > a:hover { color: #D4AF37; }
.mobile-menu > a[aria-current="page"] {
  color: #F2E2AE;
  background: linear-gradient(90deg, rgba(242,226,174,0.22), rgba(212,175,55,0.10) 65%, transparent);
  border-left: 3px solid #D4AF37; padding-left: 0.9rem;
}
.mobile-menu .mob-cta {
  display: flex; align-items: center; justify-content: center;
  margin-top: 1.6rem; padding: 1.05rem 1.2rem; border-bottom: none;
  background: var(--grad-bright); color: #0D2A2A;
  font-family: 'Instrument Sans', sans-serif; font-size: 0.74rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.16em;
}
.mobile-menu .mob-cta:hover { color: #0D2A2A; filter: brightness(1.06); }
.mobile-menu .mob-foot { margin-top: auto; padding-top: 2.5rem; font-size: 0.78rem; color: rgba(255,255,255,0.72); line-height: 1.9; overflow-wrap: anywhere; }
.mobile-menu .mob-foot span { display: block; }
.mobile-menu .mob-foot a { display: inline; font: inherit; color: #fff; padding: 0; border: 0; background: none; opacity: 1; transform: none; animation: none; }
body.menu-open { overflow: hidden; }

/* ── SHARED TYPE HELPERS ── */
.line { display: block; overflow: hidden; padding-bottom: 0.35em; margin-bottom: -0.35em; padding-right: 0.1em; padding-left: 0.05em; }
/* The clip only exists to hide the headline before it slides up. Once the
   intro has run it is released, so italic descenders ("Supply.") are never
   cut off. Kept open from the start when JS is off or motion is reduced. */
html.lines-shown .line, .no-js .line { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .line { overflow: visible; } }

.grad-text, .mark {
  background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block;
}
/* Typographic mark: replaces illustrated icons with the document / standard the item refers to. */
.mark { font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.05rem; letter-spacing: 0.02em; line-height: 1; padding-right: 0.05em; white-space: nowrap; }
.mark-sm { font-size: 0.82rem; }

/* ── BUTTONS ── */
.btn-filled {
  display: inline-block; padding: 0.85rem 2.2rem; background: var(--grad-solid); color: #fff; font-family: 'Instrument Sans', sans-serif;
  font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  transition: opacity 0.25s, transform 0.2s; border: none; border-radius: 0;
}
.btn-filled:hover { opacity: 0.88; transform: translateY(-2px); }
.btn-filled:disabled { opacity: 0.55; transform: none; }
.btn-ghost-light {
  display: inline-block; padding: 0.85rem 2.2rem; border: 1px solid rgba(232,206,122,0.55); color: rgba(255,255,255,0.88);
  font-family: 'Instrument Sans', sans-serif; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  transition: border-color 0.25s, color 0.25s;
}
.btn-ghost-light:hover { border-color: rgba(212,175,55,0.6); color: #fff; }
.btn-ghost-dark {
  display: inline-block; padding: 0.85rem 2.2rem; border: 1px solid var(--purple); color: var(--purple);
  font-family: 'Instrument Sans', sans-serif; font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; text-decoration: none;
  margin-left: 1rem; transition: background 0.25s, color 0.25s;
}
.btn-ghost-dark:hover { background: var(--purple); color: #fff; }

/* ── TICKER ── */
.ticker { background: var(--deep-solid); padding: 0.8rem 0; overflow: hidden; border-top: 1px solid rgba(255,255,255,0.06); }
.ticker-track { display: flex; gap: 5rem; width: max-content; animation: ticker 40s linear infinite; }
.ticker-item { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.18em; color: rgba(255,255,255,0.72); white-space: nowrap; }
.ticker-item b { font-weight: 500; margin-right: 0.5rem; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; }
@keyframes ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── SHARED KEYFRAMES ── */
@keyframes slideUp { to { transform: translateY(0); } }
@keyframes scaleIn { to { transform: scaleX(1); } }
@keyframes fadeIn  { to { opacity: 1; } }

/* ── SCROLL REVEAL ── */
.reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }
.no-js .reveal { opacity: 1; transform: none; }

/* ── PAGE HERO (Process, Global Presence, legal, 404) — mirrors the Standards hero ── */
.page-hero { padding: 15rem 5% 7rem; background: var(--paper); text-align: center; position: relative; overflow: hidden; }
.page-hero.left { text-align: left; padding-left: 8%; padding-right: 8%; }
.page-hero::after { content: ''; position: absolute; top: -160px; right: -160px; width: 520px; height: 520px; background: radial-gradient(circle, rgba(184,134,11,0.10) 0%, transparent 65%); pointer-events: none; }
.ph-eyebrow { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.25em; font-weight: 500; margin-bottom: 2rem; }
.page-hero h1 { font-family: 'Playfair Display', serif; font-size: clamp(3rem, 6vw, 5.6rem); font-weight: 900; line-height: 0.97; color: var(--ink); margin-bottom: 2rem; position: relative; z-index: 1; }
.page-hero h1 .line > span, .page-hero h1 .line > i { display: block; transform: translateY(110%); animation: slideUp 1s var(--ease-out) forwards; }
.page-hero h1 .line:nth-child(1) > * { animation-delay: 0.1s; }
.page-hero h1 .line:nth-child(2) > * { animation-delay: 0.25s; }
.page-hero h1 .line:nth-child(3) > * { animation-delay: 0.4s; }
.page-hero h1 i { font-style: italic; padding-right: 0.1em; }
.page-hero .ph-desc { font-size: 1.05rem; line-height: 1.8; color: var(--mid); max-width: 680px; margin: 0 auto; opacity: 0; animation: fadeIn 1s 0.6s forwards; }
.page-hero.left .ph-desc { margin: 0; }
.page-hero .ph-rule { width: 80px; height: 2px; background: var(--grad); margin: 3rem auto 0; transform: scaleX(0); transform-origin: left; animation: scaleIn 0.8s 0.8s var(--ease-out) forwards; }
.page-hero.left .ph-rule { margin-left: 0; }

/* ── SECTION SHELL used by new sections ── */
.band { padding: 8rem 5%; position: relative; overflow: hidden; }
.band-cream { background: var(--cream); }
.band-ink { background: var(--deep); color: var(--paper); }
.band-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 2rem; margin-bottom: 3.5rem; border-bottom: 1px solid var(--rule); flex-wrap: wrap; }
.band-ink .band-head { border-bottom-color: rgba(255,255,255,0.08); }
.band-head h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--ink); }
.band-ink .band-head h2 { color: var(--paper); }
.band-head h2 i { font-style: italic; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; padding-right: 0.05em; }
.band-head p { font-size: 0.95rem; line-height: 1.75; color: var(--mid); max-width: 460px; margin-top: 0.8rem; }
.band-ink .band-head p { color: rgba(255,255,255,0.62); }
.band-link { font-size: 0.72rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.14em; color: #155c4f; text-decoration: none; border-bottom: 1px solid var(--teal-dark); padding-bottom: 2px; white-space: nowrap; transition: color 0.2s, border-color 0.2s; }
.band-link:hover { color: var(--purple); border-color: var(--purple); }
.band-ink .band-link { color: var(--teal-on-dark); border-color: var(--teal-on-dark); }

/* ── WORLD MAP ── */
.map-figure { position: relative; margin: 0; }
.map-frame { position: relative; overflow: hidden; border: 1px solid var(--rule); background: var(--cream); }
.band-ink .map-frame { border-color: rgba(255,255,255,0.14); background: rgba(8,40,38,0.3); }
.world-map-svg { display: block; width: 100%; height: auto; }

.map-light { --map-land: #e8e3d5; --map-land-stroke: #d3cdbb; --map-land-op: #efe2b8; --map-land-op-stroke: #c9a227; --map-route: #B8860B; --map-route-2: #D4AF37; --map-label: #12201E; --map-label-role: #66706c; --map-halo: rgba(184,134,11,0.22); --map-outline: #FAF8F2; }
.map-dark  { --map-land: #1f4f4a; --map-land-stroke: #2c6a60; --map-land-op: #7a5f12; --map-land-op-stroke: #D4AF37; --map-route: #E8CE7A; --map-route-2: #D4AF37; --map-label: #ffffff; --map-label-role: rgba(255,255,255,0.8); --map-halo: rgba(85,230,207,0.3); --map-outline: #0D4A4A; }

.world-map-svg .land, .world-map-svg .land-src { fill: var(--map-land); stroke: var(--map-land-stroke); stroke-width: 1.1; }
.world-map-svg .land-op { fill: var(--map-land-op); stroke: var(--map-land-op-stroke); stroke-width: 1.4; }
.world-map-svg .route { fill: none; stroke: var(--map-route); stroke-width: 2.2; stroke-dasharray: 9 9; opacity: 0.8; }
.world-map-svg .route-solid { fill: none; stroke: var(--map-route); stroke-width: 2.4; opacity: 0; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-linecap: round; }
.world-map-svg .halo { fill: var(--map-halo); }
.world-map-svg .pin-disc { fill: url(#pinGrad); stroke: var(--map-outline); stroke-width: 2.4; }
.world-map-svg .pin-core { fill: var(--map-outline); }
.world-map-svg .pulse { fill: none; stroke: var(--map-route); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.world-map-svg .pin-name, .world-map-svg .pin-role { font-family: 'Instrument Sans', Arial, sans-serif; paint-order: stroke; stroke: var(--map-outline); stroke-width: 5px; stroke-linejoin: round; }
.world-map-svg .pin-name { font-size: 26px; font-weight: 500; fill: var(--map-label); letter-spacing: 0.02em; }
.world-map-svg .pin-role { font-size: 19px; fill: var(--map-label-role); }
.world-map-svg .hub { fill: none; stroke: var(--map-route-2); stroke-width: 2; opacity: 0.9; }
.world-map-svg .hub-name { font-family: 'Instrument Sans', Arial, sans-serif; font-size: 17px; fill: var(--map-label-role); paint-order: stroke; stroke: var(--map-outline); stroke-width: 4px; letter-spacing: 0.06em; text-transform: uppercase; }

/* Animation: routes draw in order, pins land as each route arrives. Runs once when scrolled into view. */
.world-map-svg.anim-ready .route { opacity: 0; }
.world-map-svg.anim-ready .pin { opacity: 0; transform-box: fill-box; transform-origin: center; transform: scale(0.35); }
.world-map-svg.anim-ready .hubs { opacity: 0; }
.world-map-svg.anim-play .pin { animation: pinIn 0.6s var(--ease-out) forwards; }
.world-map-svg.anim-play .pin-1 { animation-delay: 0.1s; }
.world-map-svg.anim-play .pin-2 { animation-delay: 1.35s; }
.world-map-svg.anim-play .pin-3 { animation-delay: 2.55s; }
.world-map-svg.anim-play .pin-4 { animation-delay: 3.55s; }
.world-map-svg.anim-play .route-solid { animation: drawRoute 1.15s var(--ease-out) forwards, solidOut 0.6s linear forwards; }
.world-map-svg.anim-play .route-solid-1 { animation-delay: 0.35s, 1.55s; }
.world-map-svg.anim-play .route-solid-2 { animation-delay: 1.55s, 2.75s; }
.world-map-svg.anim-play .route-solid-3 { animation-delay: 2.75s, 3.85s; }
.world-map-svg.anim-play .route { animation: fadeIn 0.6s linear forwards; }
.world-map-svg.anim-play .route-1 { animation-delay: 1.5s; }
.world-map-svg.anim-play .route-2 { animation-delay: 2.7s; }
.world-map-svg.anim-play .route-3 { animation-delay: 3.8s; }
.world-map-svg.anim-play .hubs { animation: fadeIn 0.8s linear 4.2s forwards; }
.world-map-svg.anim-play .pulse, .world-map-svg:not(.anim-ready) .pulse { animation: pulse 2.8s ease-out 4.6s infinite; }
@keyframes drawRoute { from { opacity: 1; stroke-dashoffset: 1; } to { opacity: 1; stroke-dashoffset: 0; } }
@keyframes solidOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes pinIn { to { opacity: 1; transform: scale(1); } }
@keyframes pulse { 0% { transform: scale(1); opacity: 0.6; } 70% { transform: scale(3.2); opacity: 0; } 100% { opacity: 0; } }

.map-legend { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; margin-top: 2px; }
.map-legend > div { padding: 1.8rem 1.6rem; border: 1px solid var(--rule); background: var(--paper); }
.band-ink .map-legend > div { border-color: rgba(255,255,255,0.08); background: transparent; }
.ml-city { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--ink); margin-bottom: 0.3rem; }
.band-ink .ml-city { color: var(--paper); }
.ml-role { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--purple); margin-bottom: 0.7rem; }
.band-ink .ml-role { color: var(--teal-on-dark); }
.ml-note { font-size: 0.82rem; line-height: 1.65; color: var(--mid); }
.band-ink .ml-note { color: rgba(255,255,255,0.68); }
.map-legend.legend-hidden > div { opacity: 0; transform: translateY(12px); }
.map-legend.legend-in > div { animation: legendIn 0.7s var(--ease-out) forwards; }
.map-legend.legend-in > div:nth-child(1) { animation-delay: 0.3s; }
.map-legend.legend-in > div:nth-child(2) { animation-delay: 1.5s; }
.map-legend.legend-in > div:nth-child(3) { animation-delay: 2.7s; }
.map-legend.legend-in > div:nth-child(4) { animation-delay: 3.7s; }
@keyframes legendIn { to { opacity: 1; transform: translateY(0); } }
.map-caption { margin-top: 1.6rem; font-size: 0.78rem; letter-spacing: 0.06em; color: var(--mid); display: flex; gap: 2.2rem; flex-wrap: wrap; align-items: baseline; }
.band-ink .map-caption { color: rgba(255,255,255,0.6); }
.map-caption b { font-weight: 500; color: var(--ink); }
.band-ink .map-caption b { color: rgba(255,255,255,0.75); }

/* ── PROCESS (steps) ── */
.steps { border-top: 2px solid var(--ink); }
.step { display: grid; grid-template-columns: 120px minmax(0, 1.1fr) minmax(0, 1fr); gap: 3rem; padding: 3.5rem 0; border-bottom: 1px solid var(--rule); align-items: start; }
.step-num { font-family: 'Playfair Display', serif; font-size: 3.6rem; font-weight: 900; line-height: 0.85; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; padding-right: 0.05em; }
.step h3 { font-family: 'Playfair Display', serif; font-size: 1.55rem; font-weight: 700; color: var(--ink); margin-bottom: 0.9rem; line-height: 1.2; }
.step p { font-size: 0.95rem; line-height: 1.8; color: var(--mid); }
.step-docs { border-left: 1px solid var(--rule); padding-left: 2rem; display: grid; gap: 1.1rem; }
.step-docs div { display: grid; grid-template-columns: 96px 1fr; gap: 1rem; font-size: 0.85rem; line-height: 1.6; color: var(--ink-light); }
.step-docs dt { font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--purple); padding-top: 0.25rem; font-weight: 500; }
.step-docs dd { margin: 0; }
.step-codes { margin-top: 1.4rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.step-codes span { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid var(--rule); padding: 0.25rem 0.6rem; color: var(--mid); border-radius: 2px; }

/* Compact numbered list on the home page */
.steps-compact { list-style: none; counter-reset: s; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.steps-compact li { counter-increment: s; padding: 2.2rem 2rem 2.2rem; background: var(--cream); position: relative; overflow: hidden; }
.steps-compact li::before { content: counter(s, decimal-leading-zero); font-family: 'Playfair Display', serif; font-size: 2.4rem; font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: block; margin-bottom: 1.1rem; }
.steps-compact h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; font-weight: 700; color: var(--ink); margin-bottom: 0.5rem; }
.steps-compact p { font-size: 0.85rem; line-height: 1.65; color: var(--mid); }

/* ── FOUNDER (home summary) ── */
.founder-band { display: grid; grid-template-columns: 380px 1fr; gap: 5rem; align-items: center; padding: 8rem 5%; border-top: 1px solid var(--rule); }
.founder-photo { position: relative; }
.founder-photo img { width: 100%; height: 480px; object-fit: cover; object-position: center 15%; display: block; border-right: 3px solid var(--purple); }
.founder-photo figcaption { margin-top: 1rem; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mid); line-height: 1.7; }
.founder-copy h2 { font-family: 'Playfair Display', serif; font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 700; line-height: 1.1; color: var(--ink); margin-bottom: 1.5rem; }
.founder-copy h2 i { font-style: italic; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; display: inline-block; padding-right: 0.05em; }
.founder-copy p { font-size: 0.95rem; line-height: 1.8; color: var(--mid); margin-bottom: 1.2rem; max-width: 60ch; }
.founder-copy blockquote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.25rem; line-height: 1.5; color: var(--ink); border-left: 2px solid var(--teal); padding-left: 1.5rem; margin: 2rem 0; max-width: 46ch; }
.founder-facts { display: flex; gap: 3rem; margin: 2.2rem 0 2.5rem; flex-wrap: wrap; }
.founder-facts div b { display: block; font-family: 'Playfair Display', serif; font-size: 2rem; font-weight: 900; line-height: 1; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; margin-bottom: 0.4rem; }
.founder-facts div span { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.16em; color: var(--mid); }

/* ── STICKY PRODUCT SUB-NAV (products page) ── */
.sub-nav { position: sticky; top: var(--nav-h-compact); z-index: 150; background: var(--paper-95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--rule); border-top: 1px solid var(--rule); padding: 0 5%; display: flex; gap: 2.4rem; overflow-x: auto; scrollbar-width: none; }
.sub-nav::-webkit-scrollbar { display: none; }
.sub-nav a { padding: 1rem 0; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); text-decoration: none; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.2s, border-color 0.2s; }
.sub-nav a:hover { color: var(--ink); }
.sub-nav a.active { color: var(--ink); border-bottom-color: var(--purple); }
.sub-nav .sn-label { padding: 1rem 0; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); font-weight: 500; white-space: nowrap; margin-right: 0.6rem; }

/* ── INFO CARDS (contact / offices) ── */
.info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 2px; }
.info-card { background: var(--paper); border: 1px solid var(--rule); padding: 3rem 2.5rem; position: relative; }
.info-card .mark { margin-bottom: 1.6rem; }
.info-card h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--ink); margin-bottom: 1.1rem; }
.info-card p, .info-card li { font-size: 0.88rem; line-height: 1.7; color: var(--mid); }
.info-card ul { list-style: none; display: grid; gap: 0.55rem; }
.info-card li::before { content: '—'; color: var(--teal); margin-right: 0.6rem; }
.info-card a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--rule); transition: border-color 0.2s, color 0.2s; }
.info-card a:hover { color: var(--purple); border-color: var(--purple); }
.info-card .ic-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(0,0,0,0.05); font-size: 0.88rem; }
.info-card .ic-row span:first-child { color: var(--mid); }
.info-card .ic-row a { border: 0; }

/* ── FORM STATES ── */
.honeypot { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.field-error { display: block; font-size: 0.78rem; color: #b3261e; margin-top: 0.15rem; }
[aria-invalid="true"] { border-color: #b3261e !important; box-shadow: 0 0 0 3px rgba(179,38,30,0.08) !important; }
.form-status { font-size: 0.9rem; line-height: 1.6; text-align: center; min-height: 1.4em; color: var(--mid); }
.form-status.ok { color: var(--teal-dark); }
.form-status.err { color: #b3261e; }
.form-consent { font-size: 0.8rem; color: var(--mid); line-height: 1.7; text-align: center; max-width: 620px; }
.form-consent a { color: var(--ink); }

/* ── LEGAL PAGES ── */
.legal-wrap { max-width: 780px; margin: 0 auto; padding: 0 5% 8rem; }
.legal-wrap .updated { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); margin: -3rem 0 3.5rem; }
.legal-wrap h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--ink); margin: 3rem 0 1rem; line-height: 1.25; }
.legal-wrap h2:first-of-type { margin-top: 0; }
.legal-wrap p, .legal-wrap li { font-size: 0.98rem; line-height: 1.85; color: var(--ink-light); margin-bottom: 1rem; }
.legal-wrap ul, .legal-wrap ol { padding-left: 1.4rem; margin-bottom: 1rem; }
.legal-wrap li { margin-bottom: 0.5rem; }
.legal-wrap a { color: var(--purple-dark); }
.legal-wrap table { width: 100%; border-collapse: collapse; margin: 1.5rem 0 2rem; font-size: 0.9rem; }
.legal-wrap th, .legal-wrap td { text-align: left; padding: 0.8rem 0.6rem; border-bottom: 1px solid var(--rule); vertical-align: top; line-height: 1.6; }
.legal-wrap th { font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); font-weight: 500; }
.legal-nav { display: flex; gap: 1.6rem; flex-wrap: wrap; justify-content: center; margin: 0 5% 5rem; padding-top: 2rem; border-top: 1px solid var(--rule); }
.legal-nav a { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mid); text-decoration: none; }
.legal-nav a:hover, .legal-nav a[aria-current="page"] { color: var(--ink); }

/* ── FOOTER ── */
footer.site-footer { background: var(--deep); color: var(--paper); padding: 5rem 5% 2.5rem; position: relative; overflow: hidden; }
footer.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--grad); }
.footer-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 3rem; padding-bottom: 4rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.footer-brand-name { font-family: 'Instrument Sans', sans-serif; font-size: 1rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 1rem; }
.footer-brand-name .mint { color: var(--purple-on-dark); }
.footer-brand-name .wurks { color: var(--teal-on-dark); }
.footer-brand p { font-size: 0.82rem; line-height: 1.7; color: rgba(255,255,255,0.72); max-width: 400px; }
.footer-brand p + p { margin-top: 1rem; }
.footer-brand p a { color: rgba(255,255,255,0.6); text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
.footer-brand p a:hover { color: var(--teal-on-dark); border-color: var(--teal-on-dark); }
.fc h5 { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.2em; color: rgba(255,255,255,0.62); margin-bottom: 1.2rem; }
.fc ul { list-style: none; }
.fc li { margin-bottom: 0.6rem; }
.fc a { font-size: 0.85rem; color: rgba(255,255,255,0.78); text-decoration: none; transition: color 0.2s; }
.fc a:hover { color: var(--teal-on-dark); }
.footer-bottom { padding-top: 2rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; }
.footer-bottom p { font-size: 0.72rem; color: rgba(255,255,255,0.6); }
.footer-legal { display: flex; gap: 1.4rem; flex-wrap: wrap; }
.footer-legal a { font-size: 0.72rem; color: rgba(255,255,255,0.72); text-decoration: none; letter-spacing: 0.04em; }
.footer-legal a:hover { color: var(--teal-on-dark); }

/* ── RESPONSIVE (shared) ── */
@media (max-width: 1180px) {
  .nav-center, .nav-right { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 1000px) {
  .map-legend { grid-template-columns: repeat(2, 1fr); }
  .step { grid-template-columns: 80px 1fr; }
  .step-docs { grid-column: 2; border-left: 0; padding-left: 0; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
  .steps-compact { grid-template-columns: repeat(2, 1fr); }
  .founder-band { grid-template-columns: 1fr; gap: 3rem; }
  .founder-photo img { height: 420px; max-width: 380px; }
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  :root { --nav-h: var(--nav-h-mobile); --nav-h-compact: var(--nav-h-mobile); }
  nav.site-nav, nav.site-nav.scrolled { height: var(--nav-h-mobile); padding: 0 12px 0 20px; }
  .nav-logo, nav.site-nav.scrolled .nav-logo { height: 58px; }
  .page-hero { padding: 9rem 5% 5rem; }
  .band { padding: 5rem 5%; }
  .sub-nav { top: var(--nav-h-mobile); gap: 1.6rem; }
}
@media (max-width: 640px) {
  .map-legend { grid-template-columns: 1fr; }
  /* Phones: zoom the map to the span of the four offices (viewBox x≈250–1260) and crop the empty ocean either side.
     Width 150% of the frame, shifted left by 250/1600 of the SVG width. Font sizes and radii are in viewBox units. */
  .map-frame { border-left: 0; border-right: 0; }
  .world-map-svg { width: 150%; max-width: none; margin-left: -23.4%; }
  .world-map-svg .pin-name { font-size: 34px; }
  .world-map-svg .pin-role { font-size: 27px; }
  .world-map-svg .hub-name { display: none; }
  .world-map-svg .pin-disc { r: 13; }
  .world-map-svg .halo { r: 30; }
  .world-map-svg .route { stroke-width: 3; }
  .step { grid-template-columns: 1fr; gap: 1.2rem; padding: 2.6rem 0; }
  .step-docs { grid-column: 1; }
  .step-docs div { grid-template-columns: 1fr; gap: 0.2rem; }
  .steps-compact { grid-template-columns: 1fr; }
  .founder-band { padding: 5rem 5%; }
  .founder-photo img { height: 380px; }
  .btn-ghost-dark { margin-left: 0; margin-top: 0.8rem; }
  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ── REDUCED MOTION ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; animation-delay: 0s !important; transition-delay: 0s !important; }
  .ticker-track { animation: none; }
  .cursor, .cursor-ring { display: none !important; }
  body, a, button { cursor: auto !important; }
  .reveal { opacity: 1; transform: none; }
  .world-map-svg .pulse { animation: none; opacity: 0.25; }
}


/* ── Accents that sit ON the deep surfaces: lightened so they stay legible.
   (Elsewhere the same accents are darkened for light backgrounds.) ── */
.about-eyebrow { color: rgba(255,255,255,0.72) !important; }
.ph-left .ph-badge.active-b { border-color: rgba(229,213,168,0.55); color: var(--purple-on-dark); background: rgba(184,134,11,0.16); }
.ph-left .ph-badge { color: rgba(255,255,255,0.72); border-color: rgba(255,255,255,0.22); }
.prod-row.dark .pr-benefit { background: rgba(184,134,11,0.18); color: #EBD79A; border-color: rgba(229,213,168,0.35); }
.badge, .lc-badge { color: #fff !important; }
.wa-btn { color: #128C40 !important; }
.trading-terms .tc-code, .trading-terms .tt-code { color: var(--teal-on-dark); }
.hero-left .hl-eyebrow, .hero-left .hero-eyebrow { color: rgba(255,255,255,0.72); }
.story .sec-label, .future-block .fb-eyebrow { color: rgba(255,255,255,0.72); }