/* ============================================================
   Spoke Safety — SHARED DESIGN SYSTEM + CHROME
   Tokens, fonts, reset, glass, orbs, reveal, nav, footer.
   Shared across pages. Page-specific section CSS stays inline.
   ============================================================ */

/* ============================================================
   FONTS
   ============================================================ */
@font-face {
  font-family: 'BCNovaticaSpoke';
  src: url('assets/fonts/BCNovaticaSpoke-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BCNovaticaSpoke';
  src: url('assets/fonts/BCNovaticaSpoke-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'BCNovaticaSpoke';
  src: url('assets/fonts/BCNovaticaSpoke-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ============================================================
   TOKENS
   ============================================================ */
:root {
  --spoke-orange:#F47920;
  --spoke-orange-light:#FF9A4D;
  --spoke-orange-deep:#d96813;   /* real deep orange — CTA hover + accents */
  --spoke-red:#E2534F;           /* RESERVED for error states only — never an accent */

  --ink:#0E0E10;
  --ink-soft:#3A3A40;
  --ink-mute:#6B6B73;

  --paper:#FFFFFF;
  --paper-2:#F7F6F4;
  --paper-3:#F0EEEA;
  --grey:#ededed;

  --line:rgba(14,14,16,0.08);

  /* Glass (light) */
  --glass-bg:rgba(255,255,255,0.55);
  --glass-border:rgba(255,255,255,0.7);
  --glass-hi:rgba(255,255,255,0.9);
  --glass-shadow:0 8px 32px rgba(14,14,16,0.10), 0 2px 8px rgba(14,14,16,0.06);

  --font-display:'BCNovaticaSpoke', sans-serif;
  --font-body:'DM Sans', sans-serif;

  --nav-h:84px;
  --maxw:1240px;
  --ease:cubic-bezier(0.16,1,0.3,1);

  /* ---- Consolidated scale tokens ---- */
  --sec-pad: clamp(96px, 14vh, 150px);          /* standard full section rhythm */
  --sec-pad-tight: clamp(72px, 11vh, 130px);    /* interior page sections + closer */

  --h2-display: clamp(2.4rem, 5.4vw, 4.2rem);   /* viz-adjacent display heads (platform, zone) */
  --h2-lg: clamp(2rem, 4.6vw, 3.4rem);          /* grand statement (vision) */
  --h2: clamp(1.9rem, 4vw, 3rem);               /* standard section H2 + interior .ip-title */

  --eyebrow-size:12px;
  --eyebrow-track:0.22em;
  --cardtag-size:11px;
  --cardtag-track:0.16em;

  --lead: clamp(1rem, 1.4vw, 1.12rem);          /* lead / sub paragraphs (mission stays larger) */

  --tile-title: clamp(1.15rem, 1.6vw, 1.4rem);  /* value/solution tile headings */
  --card-title: 1.2rem;                          /* news + related teaser titles */

  --r-card-sm:12px;                              /* small media thumbnails */
  --r-card-lg:24px;                              /* large card surfaces */
}

/* Canonical orange eyebrow + small card tag (consolidated) */
.eyebrow {
  display:block; font-family:var(--font-body); font-weight:500;
  font-size:var(--eyebrow-size); letter-spacing:var(--eyebrow-track);
  text-transform:uppercase; color:var(--spoke-orange); margin-bottom:16px;
}
.card-tag {
  display:inline-block; font-family:var(--font-body); font-weight:600;
  font-size:var(--cardtag-size); letter-spacing:var(--cardtag-track);
  text-transform:uppercase; color:var(--spoke-orange);
}
/* Official Toyota brand red, applied only to the word "Toyota" */
.toyota-red { color:#EB0A1E; }

/* ============================================================
   RESET / GLOBAL
   ============================================================ */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
::selection { background:var(--spoke-orange); color:#fff; }
/* Visually hidden but exposed to screen readers + the accessibility tree */
.sr-only {
  position:absolute !important;
  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;
}

html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; }

body {
  font-family:var(--font-body);
  background:var(--paper);
  color:var(--ink);
  line-height:1.6;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
input { font-family:inherit; }

/* Very subtle film-grain overlay for texture */
body::after {
  content:"";
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  opacity:0.025;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============================================================
   CTA BUTTON SYSTEM: two flat tiers, no glass.
   PRIMARY (.btn-primary): solid Spoke orange. Reserved for the key
     conversion CTAs only (Get in touch + the contact form submit).
   SECONDARY (.btn-secondary):
     solid ink / charcoal, white text. Every other button on the site.
   A faint light hairline border keeps the ink pill defined on both
   dark imagery (hero, news slides) and light pages.
   Glass is kept only on the toggles, the video control bar, the news
   dots, the sol-card panels and the nav/mega + mobile menu panels.
   ============================================================ */
.btn-secondary {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:14px 26px;
  border-radius:999px;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:600;
  letter-spacing:0.02em;
  line-height:1;
  cursor:pointer;
  color:#fff;
  background:#1d1d20;                         /* flat ink / charcoal */
  border:1px solid rgba(255,255,255,0.14);    /* defines the pill on dark backgrounds */
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  transition:background 0.22s var(--ease), color 0.22s var(--ease);
}
/* subtle color-shift hover only: no lift, no movement */
.btn-secondary:hover { background:#2b2b30; color:#fff; }
@media (prefers-reduced-motion: reduce){
  .btn-secondary { transition:none; }
}

/* ============================================================
   REUSABLE: REVEAL ON SCROLL
   ============================================================ */
/* Global content load-in: a calm, near-still fade (small 8px travel, gentle 1s ease).
   This is the site-wide reveal (rolled out from the approved Platform pilot). */
.reveal {
  opacity:0;
  transform:translateY(8px);
  transition:opacity 1s var(--ease), transform 1s var(--ease);
}
.reveal.visible { opacity:1; transform:none; }
.reveal-d1 { transition-delay:0.12s; }
.reveal-d2 { transition-delay:0.24s; }
.reveal-d3 { transition-delay:0.36s; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
  html { scroll-behavior:auto; }
}

/* ============================================================
   LAYOUT HELPERS
   ============================================================ */
.container { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* Skip-to-content link — first focusable element (injected by site.js); hidden until focused */
.skip-link {
  position:fixed; top:12px; left:12px; z-index:3000;
  transform:translateY(-160%);
  background:var(--ink); color:#fff;
  padding:11px 20px; border-radius:10px;
  font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.01em;
  box-shadow:0 8px 24px rgba(14,14,16,0.3);
  transition:transform 0.2s var(--ease);
}
.skip-link:focus { transform:translateY(0); outline:2px solid var(--spoke-orange); outline-offset:2px; }

/* Global keyboard focus ring — visible on every interactive element (keyboard only) */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline:2px solid var(--spoke-orange);
  outline-offset:2px;
  border-radius:3px;
}

/* ============================================================
   NAV
   ============================================================ */
.nav {
  position:fixed;
  top:0; left:0; right:0;
  z-index:1000;
  height:var(--nav-h);
  display:flex;
  align-items:center;
  transition:background 0.5s var(--ease), box-shadow 0.5s var(--ease),
             border-color 0.5s var(--ease), backdrop-filter 0.5s var(--ease),
             height 0.4s var(--ease);
  background:transparent;
  border-bottom:1px solid transparent;
}
.nav__inner {
  width:100%;
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 32px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* Logo */
.nav__logo { display:flex; align-items:center; position:relative; }
.nav__logo img {
  height:52px;
  width:auto;
  display:block;
  transition:opacity 0.5s var(--ease);
}
/* Color version is stacked on top of the white one and crossfades in */
.nav__logo .logo-color {
  position:absolute;
  top:0; left:0;
  opacity:0;
}
/* Over hero: white shows, color hidden */
.nav__logo .logo-white { opacity:1; }

/* Links */
.nav__links {
  display:flex;
  align-items:center;
  gap:34px;
  list-style:none;
}
.nav__link {
  font-size:13.5px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.92);
  transition:color 0.2s var(--ease);
  padding:4px 0;
}
/* Active / hover indicated by Spoke orange text (no pill) */
.nav__link:hover,
.nav__link[aria-current="page"] { color:var(--spoke-orange); }

/* Solutions is the only nav item with a dropdown: a subtle caret signals the mega menu.
   It flips when the mega opens (aria-expanded toggled by the nav JS). */
.nav__item--menu .nav__link { display:inline-flex; align-items:center; gap:5px; }
.nav__caret { width:9px; height:9px; flex:0 0 auto; opacity:0.7; transition:transform 0.3s var(--ease), opacity 0.2s var(--ease); }
.nav__item--menu .nav__link:hover .nav__caret { opacity:1; }
.nav__link[aria-expanded="true"] .nav__caret { transform:rotate(180deg); opacity:1; }
@media (prefers-reduced-motion: reduce){ .nav__caret { transition:none; } }

/* SCROLLED STATE — glass bar, dark logo/links */
.nav.scrolled {
  height:72px;
  background:rgba(255,255,255,0.72);
  -webkit-backdrop-filter:blur(20px) saturate(180%);
  backdrop-filter:blur(20px) saturate(180%);
  border-bottom:1px solid var(--line);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(255,255,255,0.06), 0 8px 32px rgba(14,14,16,0.08);
}
.nav.scrolled .nav__logo .logo-white { opacity:0; }
.nav.scrolled .nav__logo .logo-color { opacity:1; }
.nav.scrolled .nav__link { color:var(--ink-soft); }
/* Scrolled (white bar): hover/active still go Spoke orange (legible on white) */
.nav.scrolled .nav__link:hover,
.nav.scrolled .nav__link[aria-current="page"] { color:var(--spoke-orange); }

/* Hamburger */
.nav__burger {
  display:none;
  width:44px; height:44px;
  position:relative;
  z-index:1200;
}
.nav__burger span {
  position:absolute;
  left:11px;
  width:22px; height:2px;
  background:#fff;
  border-radius:2px;
  transition:transform 0.4s var(--ease), opacity 0.3s var(--ease), background 0.4s var(--ease);
}
.nav__burger span:nth-child(1) { top:16px; }
.nav__burger span:nth-child(2) { top:22px; }
.nav__burger span:nth-child(3) { top:28px; }
.nav.scrolled .nav__burger span { background:var(--ink); }
body.menu-open .nav__burger span { background:#fff; }
body.menu-open .nav__burger span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
body.menu-open .nav__burger span:nth-child(2) { opacity:0; }
body.menu-open .nav__burger span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }

/* ============================================================
   MOBILE MENU OVERLAY
   ============================================================ */
.mobile-menu {
  position:fixed;
  inset:0;
  z-index:1100;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding:0 40px;
  background:rgba(14,14,16,0.75);
  -webkit-backdrop-filter:blur(28px) saturate(160%);
  backdrop-filter:blur(28px) saturate(160%);
  opacity:0;
  visibility:hidden;
  transition:opacity 0.5s var(--ease), visibility 0.5s var(--ease);
}
.mobile-menu.open { opacity:1; visibility:visible; }

.mobile-menu__links {
  list-style:none;
  display:flex;
  flex-direction:column;
  gap:6px;
  position:relative;
  z-index:2;
}
.mobile-menu__links li {
  opacity:0;
  transform:translateY(24px);
  transition:opacity 0.6s var(--ease), transform 0.6s var(--ease);
}
.mobile-menu.open .mobile-menu__links li { opacity:1; transform:none; }
.mobile-menu.open .mobile-menu__links li:nth-child(1) { transition-delay:0.10s; }
.mobile-menu.open .mobile-menu__links li:nth-child(2) { transition-delay:0.16s; }
.mobile-menu.open .mobile-menu__links li:nth-child(3) { transition-delay:0.22s; }
.mobile-menu.open .mobile-menu__links li:nth-child(4) { transition-delay:0.28s; }
.mobile-menu.open .mobile-menu__links li:nth-child(5) { transition-delay:0.34s; }
.mobile-menu.open .mobile-menu__links li:nth-child(6) { transition-delay:0.40s; }
.mobile-menu__link {
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(2rem, 9vw, 3.4rem);
  letter-spacing:0.01em;
  color:#fff;
  display:inline-block;
  padding:4px 0;
  transition:color 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-menu__link:hover { color:var(--spoke-orange); transform:translateX(8px); }
.mobile-menu__foot {
  position:absolute;
  bottom:46px; left:40px;
  font-size:13px;
  letter-spacing:0.08em;
  color:rgba(255,255,255,0.5);
  z-index:2;
}

/* ============================================================
   FOOTER (DARK)
   ============================================================ */
.footer {
  position:relative;
  background:var(--ink);
  color:rgba(255,255,255,0.7);
  overflow:hidden;
  padding:88px 0 32px;
}
/* Faint embossed white Spoke icon watermark bleeding off the bottom-left corner */
.footer__mark {
  position:absolute;
  left:-7%;
  bottom:calc(-14% - 80px);
  width:min(46vw, 540px);
  height:auto;
  opacity:0.05;
  pointer-events:none;
  user-select:none;
  z-index:0;
}
.footer .container { position:relative; z-index:2; }

.footer__top {
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.4fr;
  gap:48px;
  padding-bottom:56px;
  border-bottom:1px solid rgba(255,255,255,0.10);
}
.footer__brand img { height:52px; width:auto; margin-bottom:22px; }
.footer__blurb {
  font-size:14.5px;
  line-height:1.7;
  color:rgba(255,255,255,0.62);
  max-width:340px;
  margin-bottom:26px;
}
.footer__socials { display:flex; gap:14px; }
.footer__socials a {
  width:40px; height:40px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  border:1px solid rgba(255,255,255,0.16);
  color:#fff;
  transition:all 0.35s var(--ease);
}
.footer__socials a:hover {
  color:var(--spoke-orange);
  border-color:var(--spoke-orange);
  transform:translateY(-3px);
}
.footer__socials svg { width:18px; height:18px; }

.footer__col h4 {
  font-family:var(--font-display);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:20px;
}
.footer__col ul { list-style:none; display:flex; flex-direction:column; gap:13px; }
.footer__col a {
  font-size:14.5px;
  color:rgba(255,255,255,0.62);
  transition:color 0.3s var(--ease), padding-left 0.3s var(--ease);
}
.footer__col a:hover { color:var(--spoke-orange); padding-left:5px; }

/* Newsletter */
.footer__news h4 {
  font-family:var(--font-display);
  font-weight:500;
  font-size:13px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:#fff;
  margin-bottom:18px;
}
.footer__form {
  display:flex;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.16);
  border-radius:999px;
  padding:5px 5px 5px 18px;
  margin-bottom:14px;
  transition:border-color 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
/* Clean, subtle focus: a soft orange ring on the whole pill, no jarring inner outline */
.footer__form:focus-within { border-color:rgba(255,255,255,0.42); box-shadow:0 0 0 3px rgba(244,121,32,0.16); }
.footer__form input {
  flex:1;
  background:none;
  border:none;
  color:#fff;
  font-size:14px;
}
.footer__form input::placeholder { color:rgba(255,255,255,0.4); }
.footer__form input:focus-visible { outline:none; }   /* the pill conveys focus; avoid the inner rectangle */
.footer__form input:disabled { cursor:not-allowed; }
.footer__form button {
  padding:11px 22px;
  border-radius:999px;
  background:var(--spoke-orange);
  color:#fff;
  font-size:13px;
  font-weight:600;
  letter-spacing:0.04em;
  white-space:nowrap;
  transition:background 0.3s var(--ease), transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.footer__form button:hover { background:var(--spoke-orange-deep); }
.footer__form button:disabled { opacity:0.45; cursor:not-allowed; transform:none; }
.footer__form button:disabled:hover { background:var(--spoke-orange); transform:none; }

/* Consent checkbox: real input (visually hidden) + custom on-brand box */
.footer__check {
  display:flex;
  align-items:flex-start;
  gap:10px;
  cursor:pointer;
  font-size:12px;
  line-height:1.6;
  color:rgba(255,255,255,0.5);
  max-width:330px;
}
.footer__check input { position:absolute; width:1px; height:1px; opacity:0; margin:0; }
.footer__check-box {
  flex:0 0 auto;
  width:18px; height:18px;
  margin-top:1px;
  border-radius:5px;
  border:1px solid rgba(255,255,255,0.32);
  background:rgba(255,255,255,0.06);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.footer__check-box svg { width:12px; height:12px; color:#fff; opacity:0; transform:scale(0.6); transition:opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.footer__check input:checked + .footer__check-box { background:var(--spoke-orange); border-color:var(--spoke-orange); }
.footer__check input:checked + .footer__check-box svg { opacity:1; transform:scale(1); }
.footer__check input:focus-visible + .footer__check-box { outline:2px solid var(--spoke-orange); outline-offset:2px; }

/* Inline success state (replaces the form on submit) */
.footer__success {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  color:#fff;
  margin-bottom:14px;
}
.footer__success svg { flex:0 0 auto; width:20px; height:20px; color:var(--spoke-orange); }
.footer__error {
  display:flex;
  align-items:center;
  gap:9px;
  font-size:14px;
  line-height:1.5;
  font-weight:500;
  color:var(--spoke-red);
  margin-bottom:14px;
}
.footer__error svg { flex:0 0 auto; width:20px; height:20px; color:var(--spoke-red); }
.footer__form[hidden], .footer__check[hidden], .footer__success[hidden], .footer__error[hidden] { display:none; }

.footer__bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:16px;
  padding-top:28px;
}
.footer__legal { display:flex; gap:26px; }
.footer__legal a { font-size:13px; color:rgba(255,255,255,0.5); transition:color 0.3s var(--ease); }
.footer__legal a:hover { color:var(--spoke-orange); }
.footer__copy { font-size:13px; color:rgba(255,255,255,0.45); }

/* ============================================================
   RESPONSIVE (shared chrome)
   ============================================================ */
@media (max-width:980px){
  .footer__top { grid-template-columns:1fr 1fr; gap:40px; }
  .footer__brand { grid-column:1 / -1; }
}
@media (max-width:860px){
  .nav__links, .nav__cta { display:none; }
  .nav__burger { display:block; }
}
@media (max-width:560px){
  .container, .nav__inner { padding:0 22px; }
  .nav__logo img { height:46px; }   /* mobile only (+~20%); desktop/tablet stays 52px */
  .footer__top { grid-template-columns:1fr; }
  .footer__bottom { flex-direction:column; align-items:flex-start; }
}

/* ============================================================
   INTERIOR PAGES — shared building blocks
   Interior hero, nav light state, section rhythm, cards,
   people/tile grids, quote, logo wall, placeholders, closer.
   Used by all interior pages (about, community, news, contact,
   and the three sector pages). Page-unique layout stays inline.
   ============================================================ */

/* ---- NAV light state (white interior hero: dark logo, ink links) ---- */
.nav--light .nav__logo .logo-white { opacity:0; }
.nav--light .nav__logo .logo-color { opacity:1; }
.nav--light .nav__link { color:var(--ink-soft); }
.nav--light .nav__link:hover,
.nav--light .nav__link[aria-current="page"] { color:var(--spoke-orange); }
.nav--light .nav__burger span { background:var(--ink); }

/* ---- INTERIOR HERO (full-bleed image, dark scrim, white centered text) ----
   Per-page image set via inline --hero-img on the .s-hero section; #0E0E10
   fallback so it degrades to a clean dark band until the photo drops in. */
.s-hero {
  position:relative;
  min-height:65vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:var(--nav-h) 0 0;
  background:#0E0E10 var(--hero-img, none) center center / cover no-repeat;
  overflow:hidden;
}
.s-hero__scrim {
  position:absolute; inset:0; z-index:1;
  /* center-biased radial darken behind the centered title + a raised base scrim so
     white copy holds up over bright daytime photos */
  background:
    radial-gradient(ellipse 78% 72% at 50% 50%, rgba(14,14,16,0.55) 0%, rgba(14,14,16,0) 72%),
    linear-gradient(180deg, rgba(14,14,16,0.55) 0%, rgba(14,14,16,0.68) 100%);
  pointer-events:none;
}
.s-hero__inner {
  position:relative; z-index:2;
  width:100%; max-width:var(--maxw);
  margin:0 auto; padding:0 32px;
}
.s-hero__title {
  font-family:var(--font-display);
  font-weight:700;
  font-size:clamp(2.4rem, 6vw, 4.6rem);
  line-height:1.05; letter-spacing:-0.02em;
  color:#ffffff;
  margin:0 auto; max-width:20ch;
  text-shadow:0 2px 24px rgba(0,0,0,0.5);
}
.s-hero__sub {
  font-family:var(--font-body);
  font-weight:400;
  font-size:clamp(1.02rem, 1.5vw, 1.2rem);
  line-height:1.7; color:rgba(255,255,255,0.92);
  max-width:640px;
  margin:clamp(20px, 3vh, 30px) auto 0;
  text-shadow:0 2px 24px rgba(0,0,0,0.5);
}

/* ---- SECTION RHYTHM ---- */
.ip-section { position:relative; padding:var(--sec-pad-tight) 0; background:var(--paper); }
.ip-section--grey { background:var(--grey); }
.ip-section--compact { padding-block:clamp(56px, 8vh, 92px); }   /* sparse top sections */
.ip-head { max-width:780px; margin:0 0 clamp(34px, 5vh, 58px); }
.ip-head--center { margin-left:auto; margin-right:auto; text-align:center; }
.ip-eyebrow {
  display:block; font-family:var(--font-body);
  font-weight:500; font-size:var(--eyebrow-size);
  letter-spacing:var(--eyebrow-track); text-transform:uppercase;
  color:var(--spoke-orange); margin-bottom:16px;
}
.ip-title {
  font-family:var(--font-display); font-weight:700;
  font-size:var(--h2);
  line-height:1.08; letter-spacing:-0.015em;
  color:var(--ink); margin:0;
}
.ip-lead {
  font-family:var(--font-body);
  font-size:var(--lead);
  line-height:1.7; color:var(--ink-soft);
  margin:22px 0 0; max-width:720px;
}
.ip-head--center .ip-lead { margin-left:auto; margin-right:auto; }

/* ---- FLOATING CARD (white, lifts off grey) ---- */
.ip-card {
  position:relative;
  background:#fcfcfc;
  border-radius:20px;
  box-shadow: inset 0 1px 0 #fff, 0 22px 50px -26px rgba(14,14,16,0.24), 0 6px 16px -10px rgba(14,14,16,0.10);
  padding:clamp(24px, 2.4vw, 34px);
}

/* ---- TODO PLACEHOLDER MEDIA ---- */
.ip-ph {
  position:relative; overflow:hidden;
  border-radius:var(--r-card-sm);
  background:
    radial-gradient(120% 90% at 28% 18%, rgba(14,14,16,0.05), transparent 58%),
    linear-gradient(150deg, var(--paper-2) 0%, var(--paper-3) 100%);
  display:flex; align-items:center; justify-content:center;
}
.ip-ph img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center top; }
.ip-ph__label {
  position:relative; z-index:1;
  font-family:var(--font-body); font-size:12px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--ink-mute); text-align:center; padding:14px;
}
/* When a real image has been swapped in (src present), drop the placeholder
   gradient + label so only the photo shows. Unfilled blocks keep data-todo-src
   (no src) and render as the labelled placeholder. */
.ip-ph:has(img[src]) { background:#0E0E10; }
.ip-ph:has(img[src]) .ip-ph__label { display:none; }

/* ---- SPLIT (text + media) ---- */
.ip-split {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:clamp(28px, 4vw, 64px);
  align-items:center;
}
.ip-split--wide-media { grid-template-columns:1fr 1.15fr; }

/* ---- TILE GRID (value cards, sub-solutions, points) ---- */
.ip-tiles {
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(230px, 1fr));
  gap:clamp(16px, 1.8vw, 24px);
}
.ip-tile { display:flex; flex-direction:column; gap:12px; }
.ip-tile__index {
  font-family:var(--font-display); font-weight:700;
  font-size:14px; letter-spacing:0.04em;
  color:var(--spoke-orange);
}
.ip-tile__title {
  font-family:var(--font-display); font-weight:700;
  font-size:var(--tile-title);
  line-height:1.2; letter-spacing:-0.01em; color:var(--ink);
}
.ip-tile__body { font-size:14.5px; line-height:1.65; color:var(--ink-soft); }

/* ---- PEOPLE GRID (team, ambassadors) ---- */
.ip-people {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(232px, 1fr));
  gap:clamp(20px, 2.2vw, 30px);
}
.ip-group { margin-bottom:clamp(40px, 6vh, 68px); }
.ip-group__label {
  font-family:var(--font-body); font-weight:500;
  font-size:12px; letter-spacing:0.2em; text-transform:uppercase;
  color:var(--ink-mute); margin:0 0 24px;
  padding-bottom:14px; border-bottom:1px solid var(--line);
}
.ip-person__photo { aspect-ratio:1 / 1; border-radius:var(--r-card-sm); margin-bottom:16px; }
.ip-person__name {
  font-family:var(--font-display); font-weight:700;
  font-size:1.1rem; line-height:1.2; color:var(--ink);
}
.ip-person__role {
  font-size:12.5px; letter-spacing:0.04em;
  color:var(--spoke-orange); margin-top:4px; font-weight:500;
}
.ip-person__bio { font-size:13.5px; line-height:1.6; color:var(--ink-soft); margin-top:11px; }
.ip-person__link {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12.5px; font-weight:500; letter-spacing:0.02em;
  color:var(--ink); margin-top:13px;
  transition:gap 0.3s var(--ease), color 0.3s var(--ease);
}
.ip-person__link:hover { color:var(--spoke-orange); gap:10px; }

/* ---- QUOTE / TESTIMONIAL ---- */
.ip-quote {
  display:grid;
  grid-template-columns:300px 1fr;
  gap:clamp(28px, 4vw, 60px);
  align-items:center;
}
.ip-quote__portrait { aspect-ratio:4 / 5; border-radius:20px; }
.ip-quote__mark {
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.5rem, 2.6vw, 2.2rem);
  line-height:1.18; letter-spacing:-0.015em;
  color:var(--ink); margin:0 0 22px;
}
.ip-quote__body { font-size:clamp(1rem, 1.2vw, 1.08rem); line-height:1.7; color:var(--ink-soft); }
.ip-quote__attr { margin-top:22px; font-size:14px; }
.ip-quote__attr strong { color:var(--ink); font-weight:600; }
.ip-quote__attr span { color:var(--ink-mute); }

/* ---- INTERIOR RESPONSIVE ---- */
@media (max-width:860px){
  .ip-split, .ip-split--wide-media { grid-template-columns:1fr; }
  .ip-quote { grid-template-columns:1fr; }
  .ip-quote__portrait { max-width:300px; }
}
@media (max-width:560px){
  .s-hero__inner { padding:0 22px; }
  .s-hero__title { font-size:clamp(2rem, 8.5vw, 3.1rem); max-width:18ch; }
  .ip-people { grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ============================================================
   NAV — flat orange CTA + Solutions mega-menu (Section 1)
   ============================================================ */
/* Flat solid orange CTA in every nav state (no glass, no glow, no ring) */
.nav__cta,
.nav--light .nav__cta,
.nav.scrolled .nav__cta {
  background:var(--spoke-orange);
  color:#fff;
  border:1px solid transparent;
  box-shadow:none;
  -webkit-backdrop-filter:none;
  backdrop-filter:none;
  font-size:13px;
  font-weight:500;
  letter-spacing:0.02em;
  padding:11px 24px;
  border-radius:999px;
  transition:background 0.22s var(--ease), color 0.22s var(--ease);
}
.nav__cta:hover,
.nav--light .nav__cta:hover,
.nav.scrolled .nav__cta:hover {
  background:var(--spoke-orange-deep);
  color:#fff;
  box-shadow:none;
  transform:none;   /* match the other buttons: subtle color shift, no lift */
}

/* ============================================================
   Solutions mega-menu — the nav BAR expands into ONE continuous,
   full-bleed white sheet (AP "Our World" style). The sheet is a
   single white element behind the bar + panel, so there is no seam
   to hide: bar and panel are literally the same surface.
   ============================================================ */
.nav__item { position:relative; display:flex; align-items:center; }

/* THE SINGLE SURFACE — one white element covering bar + panel.
   z below .nav__inner (bar content rides on top). Grows on open.
   Bottom-only shadow lifts the whole sheet off the dimmed page;
   never any border/shadow/line between the bar and the panel. */
.nav__sheet {
  position:absolute; top:0; left:0;
  width:100%;
  height:auto; overflow:hidden;
  background:#ffffff;
  z-index:1;
  pointer-events:none;
  visibility:hidden;
  box-shadow:0 28px 48px -22px rgba(14,14,16,0.32);
  /* Reveal is driven by clip-path, NOT height: the white surface is laid out once
     at its full natural height and simply un-clipped top->down. No per-frame reflow,
     no scrollHeight read, and the tile images are already laid out + decoded — so the
     FIRST open is as smooth as later ones. (height:auto is inert: the sheet is
     position:absolute, so its full height never affects flow; clip-path hides it.) */
  -webkit-clip-path:inset(0 0 100% 0);
  clip-path:inset(0 0 100% 0);
  transition:clip-path 0.34s var(--ease), -webkit-clip-path 0.34s var(--ease), visibility 0s linear 0.34s;
}
.nav__sheet.is-open { -webkit-clip-path:inset(0 0 0 0); clip-path:inset(0 0 0 0); pointer-events:auto; visibility:visible; transition:clip-path 0.34s var(--ease), -webkit-clip-path 0.34s var(--ease), visibility 0s; }
/* reserves the bar's height at the top of the sheet (the panel sits below the bar) */
.nav__sheet-pad { height:var(--nav-h); }
.nav.scrolled .nav__sheet-pad { height:72px; }

/* bar content rides above the sheet */
.nav__inner { position:relative; z-index:2; }

/* OPEN STATE: kill the bar's own seam-making chrome (border/shadow) so the
   white comes purely from the one sheet; recolor the bar to ink INSTANTLY so
   the incoming white never sits under white text/logo. */
.nav.mega-open { box-shadow:none; border-bottom-color:transparent; }
.nav.mega-open .nav__logo .logo-white { opacity:0; transition:none; }
.nav.mega-open .nav__logo .logo-color { opacity:1; transition:none; }
.nav.mega-open .nav__link { color:var(--ink-soft); transition:none; }
.nav.mega-open .nav__link:hover,
.nav.mega-open .nav__link[aria-current="page"] { color:var(--spoke-orange); }

/* PANEL — tall, calm, content constrained to site width and centered */
.nav__mega { width:100%; }
.nav__mega-inner {
  width:100%; max-width:var(--maxw); margin:0 auto;
  padding:clamp(40px, 5.2vh, 76px) 32px clamp(48px, 6vh, 88px);
  display:grid; grid-template-columns:0.6fr 2fr; gap:clamp(28px, 4vw, 76px); align-items:start;
}
/* left index rail — quiet, refined */
.nav__mega-rail { padding-top:4px; }
.nav__mega-kicker { display:block; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); }
.nav__mega-title { font-family:var(--font-display); font-weight:700; font-size:clamp(1.5rem, 2vw, 1.95rem); line-height:1.1; letter-spacing:-0.015em; color:var(--ink); margin:16px 0 0; }
.nav__mega-desc { font-family:var(--font-body); font-size:14px; line-height:1.6; color:var(--ink-soft); margin:14px 0 22px; max-width:34ch; }
.nav__mega-all { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:13px; font-weight:600; letter-spacing:0.02em; color:var(--ink); transition:gap 0.25s var(--ease), color 0.25s var(--ease); }
.nav__mega-all svg { width:15px; height:15px; color:var(--spoke-orange); }
.nav__mega-all:hover { color:var(--spoke-orange); gap:12px; }
/* right — three large sector image tiles */
.nav__mega-cards { display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(16px, 1.8vw, 30px); }
.nav__mega-card { display:block; }
.nav__mega-card-img { display:block; position:relative; overflow:hidden; border-radius:var(--r-card-sm); aspect-ratio:4 / 3; margin-bottom:14px; background:var(--paper-3); }
.nav__mega-card-img img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); }
.nav__mega-card:focus-visible .nav__mega-card-img img { transform:scale(1.02); }
@media (hover: hover) and (pointer: fine) {
  .nav__mega-card:hover .nav__mega-card-img img { transform:scale(1.02); }   /* standard card hover: subtle slow zoom */
}
.nav__mega-card-name { display:block; font-family:var(--font-display); font-weight:700; font-size:1.12rem; line-height:1.2; letter-spacing:-0.01em; color:var(--ink); transition:color 0.25s var(--ease); }
.nav__mega-card:hover .nav__mega-card-name,
.nav__mega-card:focus-visible .nav__mega-card-name { color:var(--spoke-orange); }
.nav__mega-card-label { display:block; font-family:var(--font-body); font-size:13px; line-height:1.45; color:var(--ink-mute); margin-top:5px; }
.nav__mega-card:focus-visible { outline:2px solid var(--spoke-orange); outline-offset:4px; border-radius:var(--r-card-sm); }

/* DIM-BEHIND BACKDROP — above the page, below the header sheet */
.nav__backdrop {
  position:fixed; inset:0; z-index:990;
  background:rgba(14,14,16,0.42);
  opacity:0; visibility:hidden;
  transition:opacity 0.34s var(--ease), visibility 0.34s var(--ease);
}
.nav__backdrop.is-open { opacity:1; visibility:visible; }

/* desktop/focus only — mobile uses the flyout, never the sheet */
@media (max-width:860px){
  .nav__sheet, .nav__backdrop { display:none; }
}
@media (max-width:980px){
  .nav__mega-inner { grid-template-columns:1fr; gap:26px; }
}
@media (prefers-reduced-motion: reduce){
  .nav__sheet { transition:none; }
  .nav__backdrop { transition:none; }
  .nav__mega-card-img img { transition:none; }
}

/* ============================================================
   MOBILE FLYOUT — bg image + scrim + glass + accordion (Section 2)
   ============================================================ */
.mobile-menu__bg { position:absolute; inset:0; z-index:0; overflow:hidden; }
.mobile-menu__bg img { width:100%; height:100%; object-fit:cover; }
.mobile-menu__scrim {
  position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(14,14,16,0.72) 0%, rgba(14,14,16,0.84) 100%);
}
.mobile-menu__panel { position:relative; z-index:2; width:100%; }
.mobile-menu__close {
  position:absolute; top:22px; right:22px; z-index:3;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.12);
  border:1px solid rgba(255,255,255,0.30);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.5), inset 0 0 0 1px rgba(255,255,255,0.12);
  color:#fff;
  transition:background 0.3s var(--ease), transform 0.3s var(--ease);
}
.mobile-menu__close:hover { background:rgba(255,255,255,0.22); transform:rotate(90deg); }
.mobile-menu__close svg { width:20px; height:20px; }
.mobile-menu__group { display:flex; flex-direction:column; }
.mobile-menu__acc {
  display:inline-flex; align-items:center; gap:12px;
  background:none; border:none; cursor:pointer; text-align:left;
}
.mobile-menu__acc svg { width:22px; height:22px; transition:transform 0.35s var(--ease); }
.mobile-menu__group.is-open .mobile-menu__acc svg { transform:rotate(180deg); }
.mobile-menu__sub {
  display:grid; grid-template-rows:0fr;
  transition:grid-template-rows 0.4s var(--ease);
}
.mobile-menu__group.is-open .mobile-menu__sub { grid-template-rows:1fr; }
.mobile-menu__sub-inner { overflow:hidden; min-height:0; padding-left:6px; }
.mobile-menu__sub a {
  display:block;
  font-family:var(--font-body);
  font-size:1.06rem;
  color:rgba(255,255,255,0.78);
  padding:9px 0;
  transition:color 0.25s var(--ease), transform 0.25s var(--ease);
}
.mobile-menu__group.is-open .mobile-menu__sub a:first-child { padding-top:14px; }
.mobile-menu__sub a:hover { color:var(--spoke-orange); transform:translateX(6px); }
@media (prefers-reduced-motion: reduce) {
  .mobile-menu__sub { transition:none; }
  .mobile-menu__acc svg, .mobile-menu__close:hover { transition:none; }
}

/* ============================================================
   PRIMARY CTA — flat solid orange pill (no glass, no glow)
   ============================================================ */
.btn-primary {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  padding:15px 30px; border-radius:999px;
  background:var(--spoke-orange); color:#fff;
  font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.02em;
  line-height:1; border:1px solid transparent; cursor:pointer;
  transition:background 0.22s var(--ease), color 0.22s var(--ease);
}
.btn-primary:hover { background:var(--spoke-orange-deep); color:#fff; }
.btn-primary svg { width:15px; height:15px; }
@media (prefers-reduced-motion: reduce){ .btn-primary { transition:none; } }

/* ============================================================
   LEGAL / UTILITY PAGES — calm, contained reading column
   (privacy, cookie, EULA, california). Not a full-bleed hero.
   ============================================================ */
.legal { background:var(--paper); padding:calc(var(--nav-h) + clamp(36px,6vh,72px)) 0 clamp(64px,10vh,120px); }
.legal__wrap { width:100%; max-width:820px; margin:0 auto; padding:0 32px; }
.legal__head { margin-bottom:clamp(30px,4.5vh,48px); padding-bottom:clamp(22px,3vh,30px); border-bottom:1px solid var(--line); }
.legal__title { font-family:var(--font-display); font-weight:700; font-size:clamp(2rem,4.5vw,3rem); line-height:1.08; letter-spacing:-0.02em; color:var(--ink); margin:0; }
.legal__meta { margin-top:14px; font-family:var(--font-body); font-size:13px; letter-spacing:0.04em; color:var(--ink-mute); }
.legal__body { font-family:var(--font-body); font-size:16px; line-height:1.8; color:var(--ink-soft); }
.legal__body h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.2vw,1.6rem); line-height:1.22; letter-spacing:-0.01em; color:var(--ink); margin:clamp(34px,5vh,50px) 0 14px; }
.legal__body h3 { font-family:var(--font-display); font-weight:700; font-size:1.1rem; line-height:1.3; color:var(--ink); margin:26px 0 10px; }
.legal__body p { margin:0 0 18px; }
.legal__body ul, .legal__body ol { margin:0 0 18px; padding-left:24px; }
.legal__body li { margin-bottom:8px; }
.legal__body a { color:var(--spoke-orange); text-decoration:underline; text-underline-offset:2px; }
.legal__body strong { color:var(--ink); font-weight:600; }
.legal__body address { font-style:normal; }
.legal__links { margin-top:clamp(46px,7vh,76px); padding-top:clamp(22px,3vh,30px); border-top:1px solid var(--line); display:flex; flex-wrap:wrap; gap:10px 24px; }
.legal__links a { font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink-soft); transition:color 0.25s var(--ease); }
.legal__links a:hover { color:var(--spoke-orange); }
.legal__links a[aria-current="page"] { color:var(--spoke-orange); font-weight:600; }

/* ============================================================
   NEWS ARTICLE — premium editorial article template
   ============================================================ */
.article-hero {
  position:relative; min-height:clamp(420px,62vh,620px);
  display:flex; align-items:flex-end;
  padding:var(--nav-h) 0 clamp(40px,6vh,72px);
  background:#0E0E10 var(--hero-img,none) center center / cover no-repeat;
  overflow:hidden;
}
.article-hero__scrim { position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,14,16,0.28) 0%, rgba(14,14,16,0.55) 52%, rgba(14,14,16,0.9) 100%); }
.article-hero__inner { position:relative; z-index:1; width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }
.article-back { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:0.02em; color:rgba(255,255,255,0.85); margin-bottom:clamp(20px,4vh,40px); transition:gap 0.25s var(--ease), color 0.25s var(--ease); }
.article-back svg { width:15px; height:15px; transform:rotate(180deg); }
.article-back:hover { color:#fff; gap:11px; }
.article-hero__cat { display:block; font-family:var(--font-body); font-size:11.5px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--spoke-orange); }
.article-hero__title { font-family:var(--font-display); font-weight:700; font-size:clamp(1.9rem,4.4vw,3.4rem); line-height:1.06; letter-spacing:-0.02em; color:#fff; margin:14px 0 0; max-width:22ch; text-shadow:0 2px 24px rgba(0,0,0,0.5); }
.article-hero__meta { margin-top:16px; font-family:var(--font-body); font-size:13.5px; color:rgba(255,255,255,0.78); }

.article-body { background:var(--paper); padding:clamp(48px,7vh,88px) 0 clamp(56px,8vh,96px); }
.article-body__wrap { width:100%; max-width:780px; margin:0 auto; padding:0 32px; font-family:var(--font-body); font-size:17px; line-height:1.8; color:var(--ink-soft); }
.article-body__wrap > p.article-lead { font-size:19px; line-height:1.7; color:var(--ink); }
.article-body__wrap h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.4vw,1.85rem); line-height:1.22; letter-spacing:-0.015em; color:var(--ink); margin:clamp(36px,5vh,52px) 0 16px; }
.article-body__wrap p { margin:0 0 20px; }
.article-body__wrap ul { margin:0 0 20px; padding-left:22px; }
.article-body__wrap li { margin-bottom:9px; }
.article-body__wrap a { color:var(--spoke-orange); text-decoration:underline; text-underline-offset:2px; }
.article-pullquote { font-family:var(--font-display); font-weight:700; font-size:clamp(1.4rem,2.6vw,2rem); line-height:1.32; letter-spacing:-0.015em; color:var(--ink); margin:clamp(36px,5vh,52px) 0; padding-left:clamp(20px,2.4vw,30px); border-left:3px solid var(--spoke-orange); }

.article-related { background:var(--grey); padding:clamp(56px,8vh,96px) 0; }
.article-related__head { font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); margin:0 0 clamp(24px,3vh,34px); }
.article-related__grid { display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,2.6vw,36px); }
.article-rel { display:flex; flex-direction:column; }
.article-rel__media { position:relative; overflow:hidden; border-radius:var(--r-card-sm); aspect-ratio:3 / 2; margin-bottom:14px; }
.article-rel__media .ip-ph { position:absolute; inset:0; border-radius:0; }
.article-rel__media img { width:100%; height:100%; object-fit:cover; transition:transform 0.8s var(--ease); }
.article-rel:focus-visible { outline:2px solid var(--spoke-orange); outline-offset:4px; border-radius:var(--r-card-sm); }
.article-rel:focus-visible .article-rel__media img { transform:scale(1.02); }
@media (hover: hover) and (pointer: fine) {
  .article-rel:hover .article-rel__media img { transform:scale(1.02); }   /* standard card hover: subtle slow zoom */
}
.article-rel__cat { font-family:var(--font-body); font-size:11px; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--spoke-orange); }
.article-rel__title { font-family:var(--font-display); font-weight:700; font-size:var(--card-title); line-height:1.24; letter-spacing:-0.01em; color:var(--ink); margin:9px 0 6px; }
.article-rel__meta { font-size:12.5px; color:var(--ink-mute); }
@media (max-width:760px){ .article-related__grid { grid-template-columns:1fr; gap:28px; } }
@media (prefers-reduced-motion: reduce){ .article-rel__media img, .article-back, .article-rel { transition:none; } }

/* ============================================================
   TEAM MEMBER PROFILE — calm, portrait-led interior page.
   Reusable template (.profile-*); one file per member.
   ============================================================ */
.profile { background:var(--paper); padding:calc(var(--nav-h) + clamp(30px,5vh,60px)) 0 clamp(64px,10vh,112px); }
.profile__wrap { width:100%; max-width:var(--maxw); margin:0 auto; padding:0 32px; }

/* Mobile gutter parity: match the 22px global container gutter on narrow screens */
@media (max-width:560px){
  .legal__wrap, .article-body__wrap, .profile__wrap, .faq__wrap { padding-left:22px; padding-right:22px; }
}
.profile__back { display:inline-flex; align-items:center; gap:7px; font-family:var(--font-body); font-size:13px; font-weight:500; letter-spacing:0.02em; color:var(--ink-soft); margin-bottom:clamp(28px,5vh,52px); transition:gap 0.25s var(--ease), color 0.25s var(--ease); }
.profile__back svg { width:15px; height:15px; transform:rotate(180deg); }
.profile__back:hover { color:var(--spoke-orange); gap:11px; }
.profile__top { display:grid; grid-template-columns:0.82fr 1fr; gap:clamp(32px,5vw,76px); align-items:center; margin-bottom:clamp(40px,7vh,80px); }
.profile__portrait { aspect-ratio:4 / 5; border-radius:20px; }
.profile__category { display:block; font-family:var(--font-body); font-size:12px; font-weight:600; letter-spacing:0.18em; text-transform:uppercase; color:var(--ink-mute); }
.profile__name { font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,4.6vw,3.4rem); line-height:1.04; letter-spacing:-0.02em; color:var(--ink); margin:14px 0 10px; }
.profile__role { font-family:var(--font-body); font-size:clamp(1rem,1.4vw,1.15rem); font-weight:600; letter-spacing:0.01em; color:var(--spoke-orange); }
.profile__linkedin { display:inline-flex; align-items:center; gap:9px; margin-top:26px; font-family:var(--font-body); font-size:13.5px; font-weight:500; color:var(--ink); transition:color 0.25s var(--ease); }
.profile__linkedin svg { width:20px; height:20px; }
.profile__linkedin:hover { color:var(--spoke-orange); }
.profile__bio { max-width:790px; font-family:var(--font-body); font-size:17px; line-height:1.8; color:var(--ink-soft); }
.profile__bio p { margin:0 0 20px; }
.profile__bio p:last-child { margin-bottom:0; }
.profile__bio h2 { font-family:var(--font-display); font-weight:700; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.2; letter-spacing:-0.01em; color:var(--ink); margin:clamp(32px,5vh,48px) 0 14px; }
.profile__closer { border-top:1px solid var(--line); margin-top:clamp(48px,7vh,80px); padding-top:clamp(30px,4vh,46px); }
.profile__closer-link { display:inline-flex; align-items:center; gap:8px; font-family:var(--font-body); font-size:14px; font-weight:600; letter-spacing:0.01em; color:var(--ink); transition:gap 0.25s var(--ease), color 0.25s var(--ease); }
.profile__closer-link svg { width:15px; height:15px; color:var(--spoke-orange); }
.profile__closer-link:hover { color:var(--spoke-orange); gap:12px; }
@media (max-width:820px){
  .profile__top { grid-template-columns:1fr; gap:28px; }
  .profile__portrait { max-width:400px; }
}
@media (prefers-reduced-motion: reduce){
  .profile__back, .profile__linkedin, .profile__closer-link { transition:none; }
}

/* ============================================================
   ARTICLE READING-PROGRESS BAR (injected by site.js on article pages only)
   ============================================================ */
.article-progress { position:fixed; top:0; left:0; width:100%; height:3px; z-index:1100; background:transparent; pointer-events:none; }
.article-progress__bar { width:100%; height:100%; background:var(--spoke-orange); transform:scaleX(0); transform-origin:left center; will-change:transform; }

/* ============================================================
   PARTNER MARQUEE - calm, seamless auto-scroll (count-agnostic).
   Full-bleed white band; logos glide edge to edge (hard clip, no
   fade and no edge dimming); grayscale at rest, full color on hover;
   pauses on hover; freezes to a static centered row under reduced motion.
   ============================================================ */
.marquee {
  position:relative;
  width:100vw;
  margin-left:calc(50% - 50vw);            /* break out of the centered container -> full-bleed */
  margin-top:clamp(40px, 6vh, 76px);
  padding:clamp(30px, 4.4vh, 52px) 0;
  overflow:hidden;                         /* one continuous surface: shares the section bg, no band; hard clip (no fade/dim) */
}
.marquee__track {
  display:flex;
  align-items:center;
  width:max-content;
  animation:marquee-scroll 60s linear infinite;
  will-change:transform;
}
.marquee:hover .marquee__track { animation-play-state:paused; }   /* pause to read a logo */
@keyframes marquee-scroll {
  from { transform:translateX(0); }
  to   { transform:translateX(-50%); }     /* exactly one set; the set is duplicated -> seamless */
}
.marquee__logo {
  flex:0 0 auto;
  display:flex; align-items:center; justify-content:center;
  height:92px;
  width:clamp(160px, 17vw, 232px);
  margin-right:clamp(48px, 5.5vw, 96px);   /* per-item spacing (not flex gap) keeps -50% seamless */
}
.marquee__logo img {
  display:block; width:auto; height:auto;
  max-height:54px; max-width:86%;
  object-fit:contain;
  filter:grayscale(1);
  opacity:0.85;
  transition:filter 0.4s var(--ease), opacity 0.4s var(--ease);
}
.marquee__logo:hover img { filter:grayscale(0); opacity:1; }
/* Viiala ships white-on-transparent: invert so it reads as a muted grey wordmark at rest */
.marquee__logo--invert img { filter:grayscale(1) invert(1); }
.marquee__logo--invert:hover img { filter:invert(1); opacity:1; }
/* Optical balancing by perceived weight: square marks taller, wide wordmarks shorter */
.marquee__logo[data-logo="audi"] img     { max-height:62px; }                 /* thin rings: need height to read */
.marquee__logo[data-logo="qualcomm"] img { max-height:52px; max-width:98%; }  /* thinnest wordmark: biggest bump + width */
.marquee__logo[data-logo="brembo"] img   { max-height:84px; }                 /* mark has internal padding: fill far more */
.marquee__logo[data-logo="aws"] img      { max-height:54px; }
.marquee__logo[data-logo="tmobile"] img  { max-height:34px; }
.marquee__logo[data-logo="bird"] img     { max-height:64px; opacity:0.9; }
.marquee__logo[data-logo="viiala"] img   { max-height:30px; }
@media (max-width:560px){
  .marquee { margin-top:clamp(30px,5vh,48px); padding:clamp(26px,7vw,40px) 0; }
  .marquee__logo { height:72px; width:clamp(128px,40vw,170px); margin-right:clamp(30px,9vw,52px); }
  .marquee__logo img                       { max-height:44px; }
  .marquee__logo[data-logo="audi"] img     { max-height:50px; }
  .marquee__logo[data-logo="qualcomm"] img { max-height:40px; max-width:98%; }
  .marquee__logo[data-logo="brembo"] img   { max-height:66px; }
  .marquee__logo[data-logo="aws"] img      { max-height:44px; }
  .marquee__logo[data-logo="tmobile"] img  { max-height:28px; }
  .marquee__logo[data-logo="bird"] img     { max-height:52px; }
  .marquee__logo[data-logo="viiala"] img   { max-height:25px; }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track {
    animation:none;
    width:100%;
    flex-wrap:wrap;
    justify-content:center;
    column-gap:clamp(36px, 5vw, 72px);
    row-gap:clamp(22px, 3.5vh, 36px);
  }
  .marquee__logo { margin-right:0; }
  .marquee__logo[data-dup] { display:none; }   /* show one evenly-spaced static row */
}

/* ============================================================
   PRINT — drop fixed chrome + film grain so legal / FAQ / article pages print clean
   ============================================================ */
@media print {
  .nav, .footer, .skip-link, .article-progress, .mobile-menu, .news { display:none !important; }
  body::after { display:none !important; }   /* film-grain overlay */
  body { background:#fff !important; color:#000 !important; }
  a { color:#000 !important; }
}

/* ============================================================
   FORCED COLORS (Windows High Contrast) — restore background-only state cues
   ============================================================ */
@media (forced-colors: active) {
  .viz__seg.is-active { outline:2px solid Highlight; }
  .news__dot.active { outline:2px solid Highlight; }
  .footer__check input:checked + .footer__check-box {
    forced-color-adjust:none;
    background:Highlight;
    border-color:Highlight;
  }
  .footer__check input:checked + .footer__check-box svg { color:HighlightText; }
}