/* ============================================================================
   wikiflow international — craft layer (elevated to reference standard)
   Brand, palette, type, copy and structure are frozen (tokens.css).
   This sheet raises execution: atmosphere, depth, rhythm, motion, glass.
   Every motion is guarded by prefers-reduced-motion at the foot of the file.
   ============================================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  color:var(--body);
  /* One continuous flowing field so sections melt into each other rather than
     stacking as blocks. Accent washes drift across it; light panels sit over. */
  background:
    radial-gradient(58% 30% at 100% 10%,var(--mono-wash),transparent 60%),
    radial-gradient(52% 26% at 0% 40%,var(--mono-wash),transparent 60%),
    radial-gradient(56% 30% at 100% 66%,var(--mono-wash),transparent 60%),
    radial-gradient(50% 28% at 0% 90%,var(--mono-wash),transparent 60%),
    var(--grad-field);
  font-family:var(--font);font-size:17px;line-height:1.65;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
h1,h2,h3,h4{color:var(--ink);font-weight:800;letter-spacing:var(--track-head);line-height:var(--lh-head);text-wrap:balance}

.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.eyebrow{
  display:inline-flex;align-items:center;gap:9px;font-size:12px;letter-spacing:var(--track-eyebrow);
  text-transform:uppercase;color:var(--muted);font-weight:700;
}
.eyebrow::before{content:"";width:22px;height:1.5px;background:currentColor;opacity:.5;border-radius:2px}

/* Small technical labels ride IBM Plex Mono (loaded weights 400/500/600) at a
   uniform crisp weight — the combined-site accent system. */
.eyebrow,.phase .pnum,.phase .scope,.pb-kicker,.pb-step-no,
.pb-index,.foot-col h2,.stub-soon,.stat .l,.person .role{
  font-family:var(--font-mono);font-weight:600;
}
.stat .l,.person .role{text-transform:uppercase;letter-spacing:.1em}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--paper);padding:10px 16px;z-index:200;border-radius:0 0 var(--r-sm) 0}
.skip:focus{left:8px;top:8px}

/* ============================================================================
   FROSTED-GLASS SYSTEM — one recipe, token-derived, reused on every glass surface.
   Recipe: a translucent fill (--glass* alpha of the paper field) + backdrop
   blur(--glass-blur) saturate(--glass-sat), a hairline --glass-border, and a
   soft --e-* elevation. Applied ONLY where it earns hierarchy: the sticky header,
   the partner dialog, the leadership cards, and the mobile menu — nothing else.
   Fill strength rises with the darkness behind it so text always holds WCAG AA:
     --glass         .62  header at rest      --glass-card    .55  content cards
     --glass-scrolled .86  header over content --glass-strong  .58  mobile menu
     dialog panel    .86  (pure white, over the dimmed backdrop)
   The @supports gate below every use keeps a solid --paper/-based fallback when
   backdrop-filter is unsupported; no glass surface is ever hidden by JS.
   ============================================================================ */

/* ---------- Header (Apple-style: thin, always-frosted, centred links) ---------- */
header{
  position:sticky;top:0;z-index:80;background:var(--glass);
  border-bottom:1px solid var(--glass-border);
  transition:box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease);
}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{background:var(--glass);-webkit-backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);backdrop-filter:blur(var(--glass-blur)) var(--glass-sat)}
}
header.scrolled{background:var(--glass-scrolled);box-shadow:var(--e-1)}
.nav{display:grid;grid-template-columns:minmax(max-content,1fr) auto minmax(max-content,1fr);align-items:center;height:62px}
@media(max-width:1180px){.nav-links{gap:22px}}
.brand{justify-self:start;display:flex;align-items:center;gap:11px;padding-right:26px;text-decoration:none;color:inherit;border-radius:var(--r-sm)}
.brand:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
.brand img{height:28px;width:auto}
.brand .wm{font-size:19px;font-weight:700;color:var(--ink);letter-spacing:-.01em;white-space:nowrap}
.brand .wm span{font-weight:300;color:var(--muted)}

/* "Back to home" link at the top of each subpage's page-head */
.page-head .back-home{display:flex;width:fit-content;align-items:center;gap:7px;margin-bottom:22px;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color var(--dur-2) var(--ease),gap var(--dur-2) var(--ease)}
.page-head .back-home:hover{color:var(--ink);gap:11px}
.page-head .back-home:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:var(--r-sm)}
.back-home .bh-arrow{font-size:15px;line-height:1;transition:transform var(--dur-2) var(--ease)}
.page-head .back-home:hover .bh-arrow{transform:translateX(-3px)}
.nav-links{justify-self:center;display:flex;gap:38px;align-items:center}
.nav-links a{position:relative;font-size:14px;color:var(--body);font-weight:600;letter-spacing:-.005em;transition:color var(--dur-1) var(--ease)}
.nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:0;right:0;bottom:-7px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.nav-links a:not(.nav-cta):hover{color:var(--ink)}
.nav-links a:not(.nav-cta):hover::after,.nav-links a[aria-current="page"]::after{transform:scaleX(1)}
/* Nav CTA is the mono primary button (type-colour fill, surface text),
   solid so it stays legible over any band that scrolls behind the header,
   and no longer a heavy navy block clashing with the frosted bar. */
.nav-cta{font-size:13.5px;font-weight:700;color:var(--btn-text);background:var(--btn-fill);padding:9px 18px;border-radius:var(--r-pill);box-shadow:var(--e-1);transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),filter var(--dur-2) var(--ease)}
.nav-cta::after{display:none}
.nav-links a.nav-cta{color:var(--btn-text)}   /* out-specify .nav-links a so the context ink wins over --body */
.nav-cta:hover{transform:translateY(-1px);filter:brightness(.95);box-shadow:var(--e-2)}
.menu-btn{justify-self:end;display:none;background:none;border:0;color:var(--ink);font-size:22px;line-height:1;cursor:pointer;padding:8px;border-radius:var(--r-sm)}

/* Slide the bar in from the left on load, with a gentle left-to-right flow.
   Transform-only (opacity untouched) so the bar is never invisible for a frame,
   even if the enhancement class lands after first paint. */
@keyframes slideInLeft{from{transform:translateX(-24px)}to{transform:none}}
.js-anim header .brand{animation:slideInLeft .8s var(--ease) both}
/* Staggered by :nth-of-type, not :nth-child — site.js inserts the drawer header
   and footer into .nav-links, which shifts every child index. */
.js-anim .nav-links a{animation:slideInLeft .8s var(--ease) both}
.js-anim .nav-links a:nth-of-type(1){animation-delay:.1s}
.js-anim .nav-links a:nth-of-type(2){animation-delay:.16s}
.js-anim .nav-links a:nth-of-type(3){animation-delay:.22s}
.js-anim .nav-links .nav-drop-btn{animation:slideInLeft .8s var(--ease) both;animation-delay:.28s}
.js-anim .nav-links .nav-cta{animation-delay:.34s}

/* ===========================================================================
   MOBILE NAVIGATION (<=1080px) — full-height left drawer.

   Gated on html.js-nav, NOT html.js-anim. That distinction is the bug fix:
   .js-anim is the MOTION gate — it is withheld from prefers-reduced-motion
   visitors and stripped by the global error handler — so hanging the nav off
   it meant Reduce-Motion users (and any page with an unrelated script error)
   lost the hamburger entirely and got the desktop nav sprayed across the hero.
   site.js adds .js-nav only after the drawer is built AND wired, so the
   no-JS fallback below still holds whenever the drawer can't actually work.
   =========================================================================== */
@media(max-width:1080px){
  /* --- No JS: links stay visible on their own row under the bar, toggle hidden.
         Same visible-by-default rule as the reveals — navigation must survive
         with scripts off. The bar becomes a wrapping flex row so the links get
         a full-width line of their own instead of overflowing the grid. --- */
  .nav{display:flex;flex-wrap:wrap;align-items:center;height:auto;min-height:62px;padding-block:9px;column-gap:10px}
  .brand{padding-right:0;margin-right:auto}
  .menu-btn{display:none}
  .nav-links{flex:1 0 100%;justify-self:auto;flex-wrap:wrap;gap:10px 22px;padding-top:10px}
  .nav-links a::after{display:none}
  /* The Company list carries the `hidden` attribute in the markup and is opened
     by script, so with scripts off those six pages would be unreachable from the
     bar. Reveal them — the drawer takes over the moment .js-nav lands.
     !important is required, not sloppiness: the HTML Standard's rendering rules
     define [hidden] as `display:none !important`, so no amount of specificity
     alone can win. Scoped to html:not(.js-nav) at this breakpoint only. */
  html:not(.js-nav) .nav-drop-menu[hidden]{display:flex!important}
  html:not(.js-nav) .nav-drop-menu{display:flex;flex-wrap:wrap;gap:10px 22px;padding:0}

  /* --- JS present: collapse into the off-canvas drawer. --- */
  .js-nav .nav{flex-wrap:nowrap;height:62px;min-height:0;padding-block:0;column-gap:0}
  .js-nav .menu-btn{display:flex;align-items:center;justify-content:center;width:42px;height:42px;margin-right:-8px;font-size:20px}

  /* --- Scrim + drawer are position:FIXED, and site.js moves them out of
         <header> into a body-level .nav-host so that actually works. <header>
         is sticky and has a backdrop-filter (a containing block for fixed
         descendants), so anything left inside it inherits the header's position
         and lands at the top of the DOCUMENT once the scroll lock kills the
         sticky scrollport. --- */
  .js-nav .nav-host{position:fixed;inset:0;z-index:200;pointer-events:none}
  .js-nav.nav-open .nav-host{pointer-events:auto}

  .js-nav .nav-scrim{
    position:fixed;inset:0;background:rgba(35,31,32,.38);
    opacity:0;visibility:hidden;
    transition:opacity var(--dur-2) var(--ease),visibility var(--dur-2);
  }
  @supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
    .js-nav .nav-scrim{-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
  }
  .js-nav.nav-open .nav-scrim{opacity:1;visibility:visible}

  /* The drawer: a fixed flex column that never scrolls as a whole. */
  .js-nav .nav-links{
    position:fixed;top:0;left:0;bottom:0;width:min(320px,86vw);
    display:flex;flex-direction:column;align-items:stretch;flex-wrap:nowrap;gap:0;flex:none;
    padding:0;overflow:hidden;
    background:var(--paper);box-shadow:var(--e-3);
    transform:translateX(-100%);visibility:hidden;
    transition:transform var(--dur-2) var(--ease),visibility var(--dur-2);
    animation:none;
  }
  .js-nav.nav-open .nav-links{transform:none;visibility:visible}

  /* Drawer header — fixed height, never scrolls, never sticky. */
  .js-nav .nav-head{
    flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;
    height:62px;padding:0 12px 0 20px;border-bottom:1px solid var(--line-soft);
  }
  /* The wordmark is nowrap, so on a 320px phone it would run under the close
     button — let it shrink with the drawer, and clip rather than collide. */
  .js-nav .nav-head .brand{margin:0;padding:0;min-width:0;overflow:hidden;animation:none!important}
  .js-nav .nav-head .brand .wm{font-size:clamp(14px,4.4vw,17px);overflow:hidden;text-overflow:ellipsis}
  .js-nav .nav-close{
    display:flex;align-items:center;justify-content:center;flex:none;
    width:44px;height:44px;padding:0;border:0;border-radius:var(--r-pill);
    background:none;color:var(--body);font:inherit;cursor:pointer;
    transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  }
  .js-nav .nav-close:hover{background:var(--mono-wash);color:var(--ink)}
  .js-nav .nav-close:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

  /* THE one scroll region. overscroll-behavior:contain stops the scroll chaining
     to the page behind at either end. */
  .js-nav .nav-body{
    flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;padding:14px 0;
  }

  /* Section eyebrows — "Explore" is generated, "Company" is the existing
     dropdown button restyled (it is a static group label at this size). */
  .js-nav .nav-eyebrow,
  .js-nav .nav-drop-btn{
    display:block;font-family:var(--font-mono);font-size:10.5px;font-weight:600;
    letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--muted);
    padding:8px 12px 10px;margin:0 12px;
  }
  .js-nav .nav-drop-btn{cursor:default;pointer-events:none}
  .js-nav .nav-drop-btn:hover{color:var(--muted)}
  .js-nav .nd-plus{display:none}
  .js-nav .nav-drop{display:block;padding-top:14px;margin-top:14px;border-top:1px solid var(--line-soft)}
  .js-nav .nav-drop-menu{padding:0}

  /* Primary links */
  .js-nav .nav-body>a{
    display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:44px;
    margin:1px 12px;padding:13px 12px;border-radius:var(--r-sm);
    font-size:16px;font-weight:600;color:var(--ink);animation:none!important;
    transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  }
  .js-nav .nav-body>a:hover{background:var(--mono-wash)}
  .js-nav .nav-body>a[aria-current="page"]{color:var(--navy);font-weight:700;background:var(--navy-wash)}
  .js-nav .nav-body>a[aria-current="page"]::after{     /* out-specifies the desktop underline */
    content:"";position:static;display:block;flex:none;inset:auto;
    width:6px;height:6px;border-radius:var(--r-pill);background:var(--navy);transform:none;
  }

  /* Secondary (Company) links + the search row */
  .js-nav .nav-drop-menu a,
  .js-nav .nav-search{
    display:flex;align-items:center;justify-content:flex-start;gap:10px;width:auto;min-height:44px;
    margin:1px 12px;padding:11px 12px;border-radius:var(--r-sm);
    font-size:15px;font-weight:500;color:var(--body);text-align:left;
    transition:background var(--dur-1) var(--ease),color var(--dur-1) var(--ease);
  }
  .js-nav .nav-drop-menu a:hover,
  .js-nav .nav-drop-menu a:focus-visible,
  .js-nav .nav-search:hover{background:var(--mono-wash);color:var(--ink)}
  .js-nav .nav-drop-menu a[aria-current="page"]{color:var(--navy);font-weight:600;background:var(--navy-wash)}
  .js-nav .nav-search{position:relative;height:auto;border:0;margin-top:15px}
  .js-nav .nav-search::before{           /* the rule above the search row */
    content:"";position:absolute;left:0;right:0;top:-7px;height:1px;background:var(--line-soft);
  }
  .js-nav .nav-search:focus-visible{outline-offset:-2px}
  .js-nav .ns-label{display:inline}

  /* Footer — CTA + the partner cities. flex:none, so it is simply always there. */
  .js-nav .nav-foot{
    flex:none;display:flex;flex-direction:column;gap:14px;
    padding:16px 20px calc(20px + env(safe-area-inset-bottom));
    border-top:1px solid var(--line-soft);
  }
  .js-nav .nav-links a.nav-cta{
    display:flex;align-items:center;justify-content:center;
    margin:0;height:50px;padding:0 18px;border-radius:var(--r-pill);
    background:var(--grad-cta);color:#FFFFFF;font-size:15px;font-weight:700;
    box-shadow:var(--e-navy);animation:none!important;
  }
  .js-nav .nav-links a.nav-cta:hover{filter:brightness(.95);color:#FFFFFF;background:var(--grad-cta)}
  .js-nav .nav-foot-note{
    font-family:var(--font-mono);font-size:10.5px;font-weight:500;
    letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:center;
  }
}

/* Smallest phones (iPhone SE and friends): the drawer header can't hold the full
   wordmark without truncating it, and "wikiflow internati…" reads worse than the
   symbol plus "wikiflow". The bar's own brand keeps the full name. */
@media(max-width:359px){
  .js-nav .nav-head .brand .wm span{display:none}
}

/* Drawer chrome exists in the DOM at every width — hide it above the breakpoint
   and let the links and the CTA fall back to being direct flex children of the
   nav row. (site.js also moves the nav itself back into the bar up here.) */
@media(min-width:1081px){
  .nav-head,.nav-scrim,.nav-host,.nav-eyebrow,.nav-foot-note,.ns-label{display:none}
  .nav-body,.nav-foot{display:contents}
}

/* The drawer supplies its own motion; honour a Reduce Motion preference. */
@media(prefers-reduced-motion:reduce){
  .js-nav .nav-links,.js-nav .nav-scrim{transition-duration:.01ms}
}

/* ---------- Hero (gallery: header tile + square image + aside quadrant) ---------- */
.hero{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.75fr);grid-template-areas:"header header" "image aside";gap:10px;padding:clamp(10px,1.3vw,16px);background:var(--paper);isolation:isolate}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(2%,-1.5%,0) scale(1.06)}100%{transform:translate3d(-2%,1.5%,0) scale(1.03)}}
.hero .wrap{position:relative;z-index:1}
.hero h1{font-size:var(--fs-display);letter-spacing:var(--track-display);line-height:var(--lh-display);max-width:16ch;margin:.34em 0 .5em;font-weight:800}
/* Keep our teal accent colour on "Perform better." — just add the iPad-air brushed
   sheen (lighter steel highlights over the navy, same hue family, nothing recoloured). */
.hero h1 .accent{background:linear-gradient(100deg,#4E7286 0%,#6B8B9D 20%,#34546A 48%,#648599 74%,#2A4252 100%);-webkit-background-clip:text;background-clip:text;color:var(--navy);-webkit-text-fill-color:transparent}
.hero h1 em{font-style:italic;font-weight:inherit} /* italic-accent word — voice + cadence (§4) */
.hero .lede{font-size:var(--fs-lede);color:var(--body);max-width:50ch;line-height:1.5;font-weight:400}
.hero .lede b{color:var(--ink);font-weight:600}
.hero-actions{display:flex;gap:14px;margin-top:44px;flex-wrap:wrap}

/* Gallery hero — three white-gapped tiles: the header spans the top, then a square
   photo (bottom-left) and the "forty years" copy (bottom-right). */
.hero>*{border-radius:14px}
.hero-copy{grid-area:header;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:clamp(40px,7vh,88px) clamp(24px,4vw,64px);background:linear-gradient(168deg,#FFFFFF 0%,#F0F0F0 100%)}
.hero-copy h1{max-width:24ch;margin:0;font-size:clamp(38px,5.4vw,68px);line-height:1.05}
.hero-figure{grid-area:image;aspect-ratio:1/1;margin:0;position:relative;overflow:hidden;background:#EFEFEF}
.hero-figure img{width:100%;height:100%;object-fit:cover;display:block}
.hero-figure::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(155deg,rgba(35,31,32,.04),transparent 45%,rgba(35,31,32,.10))}
.hero-aside{grid-area:aside;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,4vw,58px);background:linear-gradient(168deg,#FFFFFF 0%,#F0F0F0 100%)}
.hero-aside .lede{margin:0;max-width:40ch;font-weight:500;color:var(--ink);font-size:clamp(18px,1.7vw,24px);line-height:1.35}
.hero-aside .lede b{font-weight:700}
.hero-aside .hero-actions{margin-top:30px}
@media(max-width:860px){
  .hero{grid-template-columns:1fr;grid-template-areas:"header" "image" "aside"}
  .hero-figure{aspect-ratio:16/10}
}

/* On-load hero entrance (staggered, ease-out) — transform-only so the headline
   and copy are never hidden for even a frame; motion is added, not subtracted. */
.js-anim .hero .eyebrow,.js-anim .hero h1,.js-anim .hero .lede,.js-anim .hero-actions{animation:heroRise 1s var(--ease) both}
.js-anim .hero h1{animation-delay:.08s}
.js-anim .hero .lede{animation-delay:.18s}
.js-anim .hero-actions{animation-delay:.28s}
@keyframes heroRise{from{transform:translateY(20px)}to{transform:none}}
@keyframes rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* ---------- Buttons ---------- */
/* === Button colour follows its background — mono: type-colour fill on light, light-on-ink inside dark bands.
   Set --btn-fill / --btn-text once per context; every solid button inherits it,
   so a button added anywhere picks up the right colour automatically. === */
:root{

  --mono-wash:rgba(35,31,32,.05); /* neutral elevation wash */
  --btn-fill:var(--ink);--btn-text:var(--paper); /* mono buttons: type-colour fill, surface-colour text */
}
.cta-band,.cta-tile,.proof,.statement{--btn-fill:var(--paper);--btn-text:#231F20} /* light-on-ink inside dark bands */

.btn-primary,.btn-ghost,.btn-gold{
  display:inline-flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;border-radius:var(--r-sm);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease),background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease),color var(--dur-2) var(--ease),filter var(--dur-2) var(--ease);
}
/* Solid CTAs share one brushed gradient — the colour comes from --btn-fill above. */
.btn-primary,.btn-gold{background:var(--btn-fill);color:var(--btn-text);padding:16px 32px;box-shadow:var(--e-1)}
.btn-primary:hover,.btn-gold:hover{filter:brightness(.95);transform:translateY(-2px);box-shadow:var(--e-2)}
.btn-primary:active,.btn-gold:active{transform:translateY(0)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink);padding:14.5px 28px;background:var(--glass-strong)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.btn-ghost{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);transform:translateY(-2px);box-shadow:var(--e-1)}

/* ---------- Proof (dark band, alive numbers) ---------- */
/* frosted glass over the flowing field (kept opaque enough that text holds AA) */
.proof{position:relative;color:var(--paper);background:rgba(35,31,32,.86)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .proof{background:rgba(35,31,32,.8);-webkit-backdrop-filter:blur(28px) var(--glass-sat);backdrop-filter:blur(28px) var(--glass-sat)}
}
.proof::before{content:"";position:absolute;inset:0;background:radial-gradient(60% 120% at 50% 0,rgba(246,246,246,.05),transparent 60%);pointer-events:none}
.proof-inner{position:relative;display:grid;grid-template-columns:repeat(4,1fr)}
.stat{padding:44px var(--gutter);position:relative;border-left:1px solid rgba(255,255,255,.12)}
.stat:first-child{border-left:0}
.stat .n{font-size:clamp(38px,4.6vw,58px);font-weight:800;color:var(--paper);line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.stat .l{font-size:13.5px;color:rgba(255,255,255,.72);margin-top:14px;letter-spacing:.01em}
.proof-note{position:relative;text-align:center;font-size:13.5px;color:rgba(255,255,255,.68);padding:22px var(--gutter);background:transparent;border-top:1px solid rgba(255,255,255,.12)}
.proof-note b{color:var(--paper);font-weight:600}
@media(max-width:760px){.proof-inner{grid-template-columns:repeat(2,1fr)}.stat{border-left:0}.stat:nth-child(even){border-left:1px solid rgba(255,255,255,.12)}.stat:nth-child(n+3){border-top:1px solid rgba(255,255,255,.12)}}

/* ---------- Section scaffold ---------- */
section.block{padding-block:var(--section-y);position:relative}
.band{background:linear-gradient(180deg,transparent,rgba(255,255,255,.62) 14%,rgba(255,255,255,.62) 86%,transparent);border:0}
.sec-head{max-width:60ch;margin-bottom:clamp(48px,7vw,84px)}
.sec-head .eyebrow{margin-bottom:20px}
.sec-head h2{font-size:var(--fs-h2);letter-spacing:var(--track-head);margin:0 0 18px}
.sec-head p{color:var(--muted);font-size:var(--fs-lede);max-width:54ch;line-height:1.55;font-weight:400}

/* ---------- Journey gallery slide — title tile over the tabs tile, white gaps,
   on the neutral mono wash ---------- */
.journey-slide.block{padding:clamp(10px,1.3vw,16px)}
.journey-slide{display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.jr-head,.jr-body{border-radius:14px;
  background:
    radial-gradient(58% 80% at 12% 18%,var(--mono-wash),transparent 60%),
    radial-gradient(54% 74% at 88% 22%,rgba(246,246,246,.05),transparent 62%),

    linear-gradient(160deg,#FBFCFB,#F1F5F3)}
.jr-head{max-width:none;margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;padding:clamp(46px,7vh,88px) clamp(24px,5vw,72px) clamp(38px,5vh,62px)}
.jr-head h2{margin:0;max-width:22ch;line-height:1.05}
.jr-head>p{margin:22px auto 0;max-width:56ch}
.jr-body{padding:clamp(38px,5vw,66px) clamp(20px,4vw,56px) clamp(42px,6vw,74px)}
/* Title words carry the phase colours with the same brushed sheen as "Perform better." */
.jw{-webkit-background-clip:text;background-clip:text;color:var(--navy);-webkit-text-fill-color:transparent}
.jw-believe{background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150)}
.jw-behave{background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150)}
.jw-become{background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150)}

/* ---------- Playbook carousel — Apple-style horizontal snap slides, peek, dots,
   seamless loop; glass tiles with thin white gaps. Degrades to a scrollable row. ---------- */
.playbook-slide.block{padding:clamp(10px,1.3vw,16px)}
.playbook-slide{background:var(--paper)}
.pb-carousel{position:relative}
.pb-viewport{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch}
.pb-viewport::-webkit-scrollbar{display:none}
.pb-slide{flex:0 0 auto;scroll-snap-align:center;width:min(86%,1120px);min-height:clamp(360px,56vh,600px);border-radius:16px;position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,5vw,80px);background:linear-gradient(158deg,rgba(255,255,255,.9),rgba(238,242,241,.82));border:1px solid var(--glass-border);box-shadow:var(--e-2)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pb-slide{-webkit-backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);backdrop-filter:blur(var(--glass-blur)) var(--glass-sat)}}
.pb-lead .eyebrow{margin-bottom:16px}
.pb-lead h2{margin:0 0 18px;max-width:16ch;font-size:var(--fs-h2)}
.pb-lead h2 .accent{background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150);-webkit-background-clip:text;background-clip:text;color:var(--navy);-webkit-text-fill-color:transparent}
.pb-lead>p{color:var(--muted);font-size:var(--fs-lede);max-width:52ch;line-height:1.5;margin:0}
.pb-hint{display:inline-block;margin-top:30px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--body)}
.pb-phase{background:linear-gradient(158deg,rgba(255,255,255,.92),rgba(238,242,241,.85))}
.pb-numeral{position:absolute;right:clamp(-6px,1vw,26px);bottom:clamp(-30px,-2vw,-10px);font-size:clamp(180px,32vw,420px);font-weight:800;line-height:.8;color:var(--ink);opacity:.07;pointer-events:none;letter-spacing:-.04em}
.pb-slide-in{position:relative}
.pb-phase .pb-kicker{display:inline-block;font-family:var(--font-mono);font-size:13px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.pb-phase h3{font-size:clamp(30px,4.4vw,54px);line-height:1.05;letter-spacing:var(--track-head);max-width:15ch;margin:0;color:var(--ink)}
.pb-phase .pb-desc{margin:20px 0 0;max-width:42ch;color:var(--muted);font-size:clamp(15px,1.35vw,18.5px);line-height:1.5;font-weight:400}
.pb-nav{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:clamp(20px,2.5vw,32px);visibility:hidden}
.js-anim .pb-nav{visibility:visible}
.pb-arrow{width:44px;height:44px;flex:none;border-radius:var(--r-pill);border:1px solid var(--glass-border);background:var(--glass-card);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.pb-arrow{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.pb-arrow:hover{background:var(--mono-wash);transform:translateY(-1px)}
.pb-arrow:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.pb-dots{display:flex;align-items:center;gap:10px}
.pb-dot{position:relative;width:24px;height:24px;border-radius:var(--r-pill);border:0;padding:0;background:transparent;cursor:pointer}
.pb-dot::before{content:"";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:9px;height:9px;border-radius:var(--r-pill);background:var(--line);transition:background var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.pb-dot.is-on::before{background:var(--ink);transform:translate(-50%,-50%) scale(1.25)}
.pb-dot:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
@media(max-width:760px){.pb-slide{width:88%;min-height:clamp(300px,60vh,480px);padding:clamp(28px,7vw,44px)}.pb-phase h3{font-size:clamp(30px,8vw,44px)}}

/* ---------- Proof + thesis — one gallery slide: statement (left), three stat tiles
   (right, stacked), Mercedes line (full-width bottom). Light airbrushed tiles. ---------- */
.proof-slide.block{padding:clamp(10px,1.3vw,16px)}
.proof-slide{background:var(--paper)}
.ps-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);grid-template-areas:"statement s1" "statement s2" "statement s3" "note note";gap:10px}
.ps-grid>*{border-radius:14px;background:radial-gradient(60% 90% at 16% 12%,var(--mono-wash),transparent 62%),linear-gradient(158deg,#F5F6F7,#ECEEF0)}
.ps-statement{grid-area:statement;display:flex;flex-direction:column;justify-content:center;padding:clamp(40px,5vw,74px)}
.ps-statement .eyebrow{margin-bottom:18px}
.ps-statement .statement-h{font-size:clamp(30px,3.8vw,54px);letter-spacing:var(--track-head);line-height:1.07;color:var(--ink);text-wrap:balance;margin:0}
.ps-statement .statement-p{font-size:var(--fs-lede);color:var(--muted);max-width:52ch;margin:24px 0 0;line-height:1.55;font-weight:400}
.ps-grid>.ps-stat:nth-child(2){grid-area:s1}
.ps-grid>.ps-stat:nth-child(3){grid-area:s2}
.ps-grid>.ps-stat:nth-child(4){grid-area:s3}
.ps-stat{display:flex;flex-direction:column;justify-content:center;padding:clamp(22px,3vw,42px)}
.ps-stat .l{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:12.5px;color:var(--muted);margin-top:12px}
.ps-note{grid-area:note;text-align:center;padding:clamp(20px,2.4vw,32px);color:var(--muted);font-size:14px}
.ps-note b{color:var(--ink);font-weight:700}
.ps-stat .n{color:var(--ink)}
.ps-stat .n{font-size:clamp(34px,4vw,52px);font-weight:800;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
@media(max-width:760px){.ps-grid{grid-template-columns:1fr;grid-template-areas:"statement" "s1" "s2" "s3" "note"}}

/* ---------- Leadership gallery slide — centred title tile over the partner tiles ---------- */
.leadership-slide.block{padding:clamp(10px,1.3vw,16px)}
.leadership-slide{display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.ls-head{border-radius:14px;max-width:none;margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;padding:clamp(46px,7vh,86px) clamp(24px,5vw,72px) clamp(38px,5vh,56px);background:radial-gradient(58% 80% at 15% 16%,var(--mono-wash),transparent 60%),linear-gradient(160deg,#FBFCFB,#F1F5F3)}
.ls-head h2{margin:0;max-width:20ch;line-height:1.05}
.ls-head h2 .accent{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--navy);background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150)}
.ls-head>p{margin:22px auto 0;max-width:56ch}
.leadership-slide .people{gap:10px}
.leadership-slide .person{border-radius:14px;box-shadow:none}
/* each partner tile carries a different airbrushed tint from the palette (subtle, kept light) */
.leadership-slide .person{background:radial-gradient(80% 92% at 24% 10%,var(--mono-wash),transparent 64%),linear-gradient(160deg,#FBFCFB,#F1F3F2)}

.leadership-slide .person:hover{box-shadow:var(--e-2)}

/* ---------- Subpage gallery treatment — each section becomes a white-gapped rounded
   tile, keeping its colour (light airbrushed · dark measurement · teal CTA) ---------- */
.gallery-page{background:var(--paper);padding:clamp(10px,1.3vw,16px);display:flex;flex-direction:column;gap:10px}
.gallery-page>*{border-radius:14px;overflow:hidden;position:relative;margin:0}
.gallery-page .page-head,.gallery-page>.block{background:radial-gradient(56% 78% at 14% 14%,var(--mono-wash),transparent 60%),linear-gradient(160deg,#FBFCFB,#F1F5F3)}
.gallery-page .page-head{max-width:none;width:auto;padding:clamp(46px,7vh,84px) clamp(24px,5vw,64px) clamp(30px,4vh,46px)}
.gallery-page .proof{color:var(--paper);background:radial-gradient(80% 120% at 90% 8%,rgba(246,246,246,.05),transparent 55%),linear-gradient(150deg,#2C2A28,#1A1918)}
.gallery-page .proof::before{display:none}
/* CTA is intentionally NOT a tile — it breaks out full-bleed (edge to edge), matching
   the other subpages, using the shared .cta-band background so it looks identical. */
.gallery-page .cta-band{border-radius:0;margin-inline:calc(-1 * clamp(10px,1.3vw,16px));margin-bottom:calc(-1 * clamp(10px,1.3vw,16px))}
/* Leadership: each partner is its own tile, tinted with --pc (mirrors homepage leadership washes). */
.gallery-page .tp-tile{padding-block:clamp(30px,4.2vw,56px);background:radial-gradient(78% 92% at 20% 8%,var(--mono-wash),transparent 64%),linear-gradient(160deg,#FCFDFD,#EDF1F0)}
.gallery-page .tp-tile .tp-row{border:0;padding-block:0;max-width:940px;margin-inline:auto}

/* ---------- The rest of the team — compact member cards (lighter than partner tiles) ---------- */
.gallery-page .team-grid-sec{background:none;padding:0;border-radius:0;overflow:visible}
.team-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(212px,1fr));gap:10px}
.tm-card{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;padding:clamp(26px,3vw,40px) 18px;border-radius:14px;background:radial-gradient(72% 82% at 50% 2%,var(--mono-wash),transparent 62%),linear-gradient(160deg,#FCFDFD,#EFF1F0)}
.tm-photo{width:118px;height:118px;border-radius:50%;object-fit:cover;box-shadow:var(--e-1);background:#E7EDEF;margin-bottom:16px}
/* No-photo placeholder disc — token-based so it reads in BOTH light and dark
   (navy + paper flip together, so it never goes light-on-light or dark-on-dark). */
.tm-initials{display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:32px;font-weight:600;letter-spacing:.04em;color:var(--ink);background:linear-gradient(160deg,color-mix(in srgb,var(--ink) 10%,var(--paper)),color-mix(in srgb,var(--ink) 17%,var(--paper)))}
.tm-name{font-weight:700;font-size:clamp(16px,1.5vw,18px);color:var(--ink);line-height:1.2}
.tm-title{font-family:var(--font-mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);margin-top:6px}
/* Hover/focus popover — each member's real info (published bio where it exists + LinkedIn). team.html only.
   OVERLAYS the card (top:0) and grows DOWNWARD for long bios: never opens above the card (so it can't
   cover the profile above), and sits directly on the card so moving to click the link keeps hover (no gap). */
.tm-card.has-pop{cursor:default;transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.tm-card.has-pop:hover,.tm-card.has-pop:focus-within{transform:translateY(-2px);box-shadow:var(--e-2)}
.tm-card:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.tm-pop{position:absolute;left:0;right:0;top:0;min-height:100%;z-index:30;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:22px 20px;text-align:left;border-radius:14px;border:1px solid var(--line);background:linear-gradient(162deg,#FFFFFF,#F2F5F5);box-shadow:0 18px 44px -16px rgba(22,32,42,.4);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(4px);transition:opacity .16s var(--ease),visibility .16s,transform .2s var(--ease)}
.tm-card:hover .tm-pop,.tm-card:focus-within .tm-pop{opacity:1;visibility:visible;pointer-events:auto;transform:none}
.tm-pop-name{display:block;font-weight:700;font-size:15px;color:var(--ink)}
.tm-pop-bio{display:block;margin:0;font-size:12px;line-height:1.5;color:var(--body)}
.tm-pop-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;font-size:13px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tm-pop-link:hover{opacity:.75}
.tm-pop-link .arr{transition:transform var(--dur-2) var(--ease)}
.tm-pop-link:hover .arr{transform:translate(2px,-2px)}

/* "Meet the rest of the team" link — below the CTA, above the footer, on every page */
.team-outro{display:flex;align-items:center;justify-content:center;gap:9px;background:var(--paper);padding:clamp(22px,3.4vw,40px) 20px;font-weight:600;font-size:clamp(15px,1.55vw,18px);color:var(--body);text-align:center;transition:color var(--dur-2) var(--ease),gap var(--dur-2) var(--ease)}
.team-outro:hover{color:var(--ink);gap:14px}
.team-outro .arr{transition:transform var(--dur-2) var(--ease)}
.team-outro:hover .arr{transform:translate(3px,-3px)}

/* ---------- CTA gallery slide — teal tile with a Celonis-style everflowing marquee ---------- */
.cta-slide{padding:clamp(10px,1.3vw,16px);background:var(--paper)}
.cta-tile{border-radius:14px;overflow:hidden;position:relative;color:var(--paper);padding:clamp(44px,6vw,80px) 0 0;background:radial-gradient(85% 130% at 100% 0,rgba(246,246,246,.06),transparent 55%),linear-gradient(135deg,#2E2929,#221E1F)}
.cta-tile h2{font-size:clamp(30px,4.4vw,58px);letter-spacing:var(--track-head);line-height:1.05;max-width:22ch;margin:0 clamp(28px,5vw,72px) clamp(30px,5vw,52px);color:var(--paper);text-wrap:balance}
.cta-tile h2 .accent{color:var(--paper)}
.cta-marquee{display:block;text-decoration:none;padding:clamp(18px,3vw,34px) 0 clamp(34px,5vw,60px);border-top:1px solid rgba(255,255,255,.14);overflow:hidden}
.cta-mq-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:cta-marquee 28s linear infinite}
.cta-marquee:hover .cta-mq-track{animation-play-state:paused}
.cta-mq-item{display:inline-flex;align-items:center;gap:.45em;font-size:clamp(40px,7vw,104px);font-weight:800;letter-spacing:-.02em;color:var(--paper);padding-right:clamp(30px,4vw,64px)}
.cta-mq-arrow{color:var(--paper);font-weight:400}
@keyframes cta-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.cta-mq-track{animation:none;white-space:normal}}

/* ---------- Signature: Believe / Behave / Become ---------- */
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.phase{
  position:relative;background:var(--paper);border-radius:var(--r-lg);padding:clamp(30px,3vw,42px);
  box-shadow:var(--ring),var(--e-1),inset 0 1px 0 rgba(255,255,255,.7);overflow:hidden;
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .phase{background:var(--glass-card);-webkit-backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);backdrop-filter:blur(var(--glass-blur)) var(--glass-sat)}
}
.phase::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line);z-index:2}
.phase::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(260px circle at var(--mx,80%) var(--my,-20%),color-mix(in srgb,var(--ink) 8%,transparent),transparent 55%);opacity:0;transition:opacity var(--dur-2) var(--ease)}
.phase:hover{transform:translateY(-5px);box-shadow:var(--ring),var(--e-3),inset 0 1px 0 rgba(255,255,255,.7)}
.phase:hover::after{opacity:1}
.phase>*{position:relative}
/* pnum darkened to ink for AA (was sub-AA in accent colour); phase identity
   stays in the coloured top bar and the force bars. */
.phase .pnum{font-size:12px;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--ink)}
.phase h3{font-size:var(--fs-h3);margin:10px 0 3px}
.phase .scope{font-size:12.5px;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-bottom:22px}
.phase p{font-size:15.5px;color:var(--body);line-height:1.6;min-height:5.4em}
.forces{margin-top:26px;display:flex;flex-direction:column;gap:14px}
.force{display:grid;grid-template-columns:92px 1fr;align-items:center;gap:12px}
.force .fl{font-size:12px;color:var(--muted)}
.track{height:7px;background:var(--line);border-radius:var(--r-pill);overflow:hidden}
.fill{height:100%;width:0;border-radius:var(--r-pill);background:var(--ink);box-shadow:none;transition:width var(--dur-4) var(--ease-out)}
.reveal.in .fill{width:var(--w)}
.force:nth-child(1) .fill{transition-delay:.06s}
.force:nth-child(2) .fill{transition-delay:.16s}
.force:nth-child(3) .fill{transition-delay:.26s}
.force:nth-child(4) .fill{transition-delay:.36s}
@media(max-width:860px){.phases{grid-template-columns:1fr}.phase p{min-height:0}}

.proof .eyebrow{color:var(--paper)}
/* Journey progress line — fills as you scroll the journey (mono). */
.journey-line{position:relative;height:30px;margin-bottom:36px}
.jl-track{position:absolute;top:50%;left:8%;right:8%;height:2px;transform:translateY(-50%);background:var(--line);border-radius:2px;overflow:hidden}
.jl-fill{position:absolute;left:0;top:0;bottom:0;width:var(--jfill,0%);background:var(--ink);border-radius:2px;transition:width .12s linear}
.jl-node{position:absolute;top:50%;width:15px;height:15px;border-radius:var(--r-pill);transform:translate(-50%,-50%);background:var(--paper);border:2px solid var(--line);box-shadow:var(--e-1);transition:border-color var(--dur-2) var(--ease),background var(--dur-2) var(--ease),transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.jl-node.n1{left:8%}
.jl-node.n2{left:50%}
.jl-node.n3{left:92%}
.jl-node.on{transform:translate(-50%,-50%) scale(1.2)}
.jl-node.n1.on{border-color:var(--ink);background:var(--ink);box-shadow:0 0 0 6px var(--mono-wash),var(--e-1)}
.jl-node.n2.on{border-color:var(--ink);background:var(--ink);box-shadow:0 0 0 6px var(--mono-wash),var(--e-1)}
.jl-node.n3.on{border-color:var(--ink);background:var(--ink);box-shadow:0 0 0 6px var(--mono-wash),var(--e-1)}
@media(max-width:860px){.journey-line{display:none}}

/* ============================================================================
   The Traditional Playbook — signature scroll-choreographed feature.
   DEFAULT (no-JS / reduced-motion / narrow) = a fully-legible static stack of
   the five phase cards. ENHANCED (.js-anim + motion + width, once JS marks it ready)
   = the stage pins and the phases advance as you scroll: rail fills, panels
   cross-fade, the activity counter climbs. Content is never hidden unless JS is
   actively driving the choreography (.pb-ready). Same palette throughout.
   ============================================================================ */
.playbook{position:relative}
.pb-track{position:relative}
.pb-grid{display:grid;grid-template-columns:1fr;gap:clamp(22px,3vw,32px);align-items:start}

/* --- phase panels: frosted glass cards --- */
.pb-panels{display:grid;gap:20px;min-width:0}
.pb-panel{
  position:relative;border-radius:var(--r-xl);padding:clamp(30px,3.4vw,50px);overflow:hidden;
  background:var(--paper);
  box-shadow:var(--ring),var(--e-2),inset 0 1px 0 rgba(255,255,255,.7);
}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .pb-panel{background:var(--glass-card);-webkit-backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);backdrop-filter:blur(var(--glass-blur)) var(--glass-sat)}
}
.pb-panel::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--line);z-index:2}
.pb-numeral{position:absolute;top:clamp(-26px,-2vw,-10px);right:.05em;font-size:clamp(128px,20vw,250px);font-weight:800;line-height:1;color:var(--ink);opacity:.05;letter-spacing:-.05em;pointer-events:none;z-index:0}
.pb-panel-in{position:relative;z-index:1}
.pb-kicker{display:inline-block;font-size:12px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
/* name-only panels: the phase name is the hero */
.pb-panel h3{font-size:clamp(30px,4.4vw,54px);letter-spacing:var(--track-head);line-height:1.08;margin:16px 0 0;max-width:16ch;text-wrap:balance}

/* per-phase ambient hue — the field behind the glass shifts to the active
   phase's accent as you move through the playbook (wikiflow accent palette). */
.pb-stage{position:relative;isolation:isolate}
.pb-hue{position:absolute;inset:0;z-index:-1;pointer-events:none;background-color:rgba(35,31,32,.08)}

/* rail steps are buttons — click one to move the panel to that phase */
.pb-step{margin:0;font:inherit;color:inherit;text-align:left;background:none;border:0;cursor:pointer;-webkit-appearance:none;appearance:none}

/* rail + meta are scroll-progress UI — only shown in the enhanced pinned mode */
.pb-rail,.pb-meta{display:none}

@media (prefers-reduced-motion:no-preference) and (min-width:761px){
  .js-anim .playbook.pb-ready .pb-track{height:340vh} /* runway resized for the slimmer name-only panels */
  .js-anim .playbook.pb-ready .pb-stage{position:sticky;top:0;height:100vh;display:flex;align-items:center;overflow:hidden}
  .js-anim .playbook.pb-ready .pb-grid{grid-template-columns:minmax(148px,190px) minmax(0,1fr) minmax(140px,178px);gap:clamp(24px,4vw,60px);align-items:center;width:100%}

  /* progress rail */
  .js-anim .playbook.pb-ready .pb-rail{display:flex;flex-direction:column;justify-content:space-between;position:relative;height:min(58vh,392px);padding-left:4px}
  .js-anim .playbook.pb-ready .pb-rail-line{position:absolute;left:11px;top:9px;bottom:9px;width:2px;background:var(--line);border-radius:2px;overflow:hidden}
  .js-anim .playbook.pb-ready .pb-rail-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--ink);border-radius:2px;transition:height .12s linear}
  .js-anim .playbook.pb-ready .pb-step{position:relative;display:flex;align-items:center;gap:12px;padding-left:30px;opacity:.4;transition:opacity var(--dur-2) var(--ease)}
  .js-anim .playbook.pb-ready .pb-step-dot{position:absolute;left:4px;width:16px;height:16px;border-radius:var(--r-pill);background:var(--paper);border:2px solid var(--line);box-shadow:var(--e-1);transition:transform var(--dur-2) var(--ease),background var(--dur-2) var(--ease),border-color var(--dur-2) var(--ease)}
  .js-anim .playbook.pb-ready .pb-step-no{font-size:11.5px;font-weight:800;letter-spacing:.08em;color:var(--body)}
  .js-anim .playbook.pb-ready .pb-step.is-on{opacity:1}
  .js-anim .playbook.pb-ready .pb-step.is-on .pb-step-dot{background:var(--ink);border-color:var(--ink)}
  .js-anim .playbook.pb-ready .pb-step.is-current .pb-step-dot{transform:scale(1.32)}
  .js-anim .playbook.pb-ready .pb-step:hover{opacity:1}
  .js-anim .playbook.pb-ready .pb-step:hover .pb-step-no{color:var(--ink)}
  .js-anim .playbook.pb-ready .pb-step:focus-visible{outline:2px solid var(--ink);outline-offset:4px;border-radius:8px}

  /* panels cross-fade in place */
  .js-anim .playbook.pb-ready .pb-panels{display:block;position:relative;min-height:min(62vh,450px)}
  .js-anim .playbook.pb-ready .pb-panel{position:absolute;top:50%;left:0;right:0;margin:0;opacity:0;transform:translateY(calc(-50% + 26px)) scale(.985);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease);pointer-events:none}
  .js-anim .playbook.pb-ready .pb-panel.is-active{opacity:1;transform:translateY(-50%);pointer-events:auto}

  /* live meta */
  .js-anim .playbook.pb-ready .pb-meta{display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:16px}
  .js-anim .playbook.pb-ready .pb-index{font-size:13px;font-weight:700;letter-spacing:.12em;color:var(--body)}
  .js-anim .playbook.pb-ready .pb-index-n{color:var(--ink)}
}

@media(max-width:760px){.pb-panels{gap:16px}.pb-panel{padding:clamp(26px,7vw,34px)}}

/* ---------- Leadership ---------- */
.people{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.person{
  background:var(--paper);border-radius:var(--r-lg);padding:34px clamp(22px,2.2vw,30px);
  box-shadow:var(--ring),var(--e-1),inset 0 1px 0 rgba(255,255,255,.7);
  transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease);
}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .person{background:var(--glass-card);-webkit-backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);backdrop-filter:blur(var(--glass-blur)) var(--glass-sat)}
}
.person:hover{transform:translateY(-5px);box-shadow:var(--ring),var(--e-2),inset 0 1px 0 rgba(255,255,255,.7)}
.person h3{font-size:19px;font-weight:700}
.person .role{font-size:13px;color:var(--muted);margin-top:5px}
.person-origin{font-size:12.5px;color:var(--muted);margin-top:6px}
.person-origin[hidden]{display:none}
/* Index leadership photo (Alex's link-cards use .avatar, not the initials disc) */
.person{color:inherit;text-decoration:none}
.person .avatar{width:76px;height:76px;border-radius:var(--r-pill);margin-bottom:22px;box-shadow:var(--e-1);object-fit:cover}
@media(max-width:860px){.people{grid-template-columns:repeat(2,1fr)}}
@media(max-width:460px){.people{grid-template-columns:1fr}}

/* Leadership detail page — inline partner profiles (adopted from Alex) */
.page-head{padding-block:clamp(64px,9vw,110px) 0}
.page-head h1{font-size:var(--fs-h1);letter-spacing:var(--track-head);max-width:20ch;margin:18px 0 22px}
.page-head .lede{font-size:var(--fs-lede);color:var(--body);max-width:60ch;line-height:1.55}
.team-profile{max-width:900px}
.tp-row{display:grid;grid-template-columns:132px minmax(0,1fr);gap:clamp(24px,4vw,48px);padding-block:clamp(34px,5vw,52px);border-top:1px solid var(--line)}
.tp-row:last-child{border-bottom:1px solid var(--line)}
.tp-row .avatar{width:132px;height:132px;border-radius:var(--r-pill);box-shadow:var(--e-1);object-fit:cover}
.tp-name{font-size:clamp(22px,2.6vw,28px)}
.tp-role{font-family:var(--font-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-top:7px}
.tp-origin{font-size:13.5px;color:var(--muted);margin-top:5px}
.tp-bio{margin-top:16px;color:var(--body);max-width:70ch}
.tp-bio p{margin-bottom:12px}
.tp-bio p:last-child{margin-bottom:0}
.tp-link{display:inline-block;margin-top:14px;font-weight:600;font-size:14px;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.tp-link:hover{text-decoration:underline}
.cta-sub{flex-basis:100%;margin-top:-16px;color:rgba(255,255,255,.78);font-size:15.5px;max-width:52ch}
@media(max-width:640px){
  .tp-row{grid-template-columns:1fr;gap:18px}
  .tp-row .avatar{width:96px;height:96px}
}

/* ---------- Subpage building blocks (adopted from Alex: section photos + split + phase list + contact card) ---------- */
.figure{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ring),var(--e-2)}
.figure img{width:100%;height:100%;object-fit:cover;filter:saturate(.85) contrast(1.02);transition:transform 1.6s var(--ease)}
.figure:hover img{transform:scale(1.03)}
.figure::after{content:"";position:absolute;inset:0;background:var(--ink);opacity:.08;mix-blend-mode:multiply;pointer-events:none;border-radius:inherit}
.figure.ar-45{aspect-ratio:4/5}
.figure.ar-43{aspect-ratio:4/3}
.figure.ar-32{aspect-ratio:3/2}
.js-anim .figure.reveal:not(.in) img{transform:scale(1.06)}   /* gentle zoom-in on reveal; static without JS */
.split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(36px,5vw,76px);align-items:center}
.split .eyebrow{margin-bottom:18px}
.split h2{font-size:var(--fs-h2);margin-bottom:20px}
.split p{max-width:58ch;margin-bottom:16px}
.split p:last-child{margin-bottom:0}
.split.flip .figure{order:-1}
@media(max-width:760px){
  .split{grid-template-columns:1fr;gap:32px}
  .split.flip .figure{order:0}
}
.phase-list{list-style:none;padding:0}
.phase-li{display:grid;grid-template-columns:76px minmax(0,1fr);gap:clamp(16px,3vw,28px);padding-block:clamp(24px,3.4vw,34px);border-top:1px solid var(--line)}
.phase-li:last-child{border-bottom:1px solid var(--line)}
.phase-li .no{font-family:var(--font-mono);font-size:14px;color:var(--muted);padding-top:5px}
.phase-li h3{font-size:var(--fs-h3);margin-bottom:8px;max-width:26ch}
.phase-li p{max-width:64ch;color:var(--body)}
.phase-list.detailed .phase-li{padding-block:clamp(30px,4vw,44px)}
.phase-foot{margin-top:28px;max-width:64ch}
.phase-foot a{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px}
.phase-foot a:hover{text-decoration:underline}
@media(max-width:640px){.phase-li{grid-template-columns:46px minmax(0,1fr)}}
.contact-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);background:var(--paper);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--ring),var(--e-2)}
.contact-card .figure{border-radius:0;box-shadow:none;height:100%;min-height:280px}
.contact-card .figure::after{border-radius:0}
.cc-body{padding:clamp(30px,4.5vw,52px)}
.cc-body h2{font-size:clamp(24px,2.8vw,32px);margin-bottom:14px}
.cc-body p{max-width:52ch;margin-bottom:14px}
.cc-meta{font-size:14.5px;color:var(--muted);margin-top:22px}
.cc-actions{margin-top:26px}
@media(max-width:760px){
  .contact-card{grid-template-columns:1fr}
  .contact-card .figure{order:-1;min-height:220px}
}

/* ---------- Leadership partner cards (link to the profiles page) ---------- */
.person{cursor:pointer;-webkit-tap-highlight-color:transparent}
.person:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

/* ---------- CTA band ---------- */
/* frosted ink glass (opaque enough that the white marks hold contrast) */
.cta-band{background:rgba(35,31,32,.94);color:var(--paper);position:relative;overflow:hidden}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .cta-band{background:rgba(35,31,32,.88);-webkit-backdrop-filter:blur(26px) var(--glass-sat);backdrop-filter:blur(26px) var(--glass-sat)}
}
.cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(70% 130% at 100% 0,rgba(246,246,246,.05),transparent 55%);pointer-events:none}
.cta-band::after{content:"";position:absolute;inset:0;background-image:var(--grain);background-size:150px;opacity:.28;mix-blend-mode:soft-light;pointer-events:none}
.cta-inner{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:36px;padding-block:clamp(60px,8vw,104px);flex-wrap:wrap}
.cta-inner h2{color:var(--paper);font-size:clamp(30px,4.2vw,50px);letter-spacing:var(--track-head);max-width:18ch}
.cta-inner h2 .accent{color:var(--paper)}

/* ---------- Statement — the wikiflow thesis (dark cinematic band) ---------- */
.statement{position:relative;background:var(--ink);color:var(--paper);padding-block:clamp(96px,15vw,180px);overflow:hidden;text-align:center;isolation:isolate}
.statement .grain{position:absolute;inset:0;z-index:-1;background-image:var(--grain);background-size:150px;opacity:.3;mix-blend-mode:soft-light;pointer-events:none}
.statement::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(58% 68% at 50% 36%,rgba(246,246,246,.05),transparent 70%);pointer-events:none}
.statement-inner{max-width:920px}
.statement .eyebrow{justify-content:center;color:var(--paper)}
.statement .eyebrow::before{background:currentColor}
.statement-h{font-size:clamp(34px,6vw,84px);letter-spacing:var(--track-display);line-height:1.03;text-wrap:balance;color:var(--paper)}
.statement-h .accent,.ps-statement .accent{-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:var(--navy);background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150)}
.statement-p{font-size:var(--fs-lede);color:rgba(255,255,255,.72);max-width:58ch;margin:26px auto 0;line-height:1.55}

/* ---------- Footer — paper (owner inversion 2026-07-18), partner-city globe ---------- */
/* Footer — ink "monument" tile: gallery close, faint wordmark, a flow-wave
   arc travelling between the partner cities, arrowed links. */
footer{position:relative;background:var(--paper);padding:clamp(10px,1.3vw,16px);font-size:14px}
.foot-tile{position:relative;overflow:hidden;border-radius:14px;color:rgba(24,21,21,.75);background:#F6F6F6}
.foot-tile .wrap{position:relative;z-index:1;padding-block:clamp(48px,6vw,80px) clamp(22px,3vw,30px)}
.foot-monument{position:absolute;left:clamp(12px,3vw,52px);bottom:clamp(-16px,-1.6vw,-6px);z-index:0;font-size:clamp(90px,17vw,264px);font-weight:800;letter-spacing:-.045em;line-height:.8;color:rgba(24,21,21,.05);pointer-events:none;user-select:none;white-space:nowrap}
.foot-col a::after{content:" \2197";opacity:.5;font-weight:400}
.foot-col a:hover::after{opacity:.9}
.globe-flow{stroke:#7F9EAC;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-dasharray:7 132;animation:footFlow 3.6s linear infinite;opacity:.95}
@keyframes footFlow{to{stroke-dashoffset:-139}}
@media(prefers-reduced-motion:reduce){.globe-flow{animation:none;stroke-dasharray:none;opacity:.55}}
.foot-top{display:grid;grid-template-columns:minmax(200px,1fr) auto minmax(200px,1fr);gap:40px;align-items:center;padding-bottom:38px;border-bottom:1px solid rgba(24,21,21,.16)}
.foot-info{justify-self:start}
.foot-brand{display:flex;align-items:center;gap:10px}
.foot-brand img{height:26px;width:auto;filter:invert(1)}
.foot-brand .wm{font-size:18px;font-weight:700;color:#231F20}
.foot-brand .wm span{font-weight:300;color:rgba(35,31,32,.55)}
.foot-global{margin-top:14px;max-width:30ch;font-size:13.5px;color:rgba(35,31,32,.6)}
.foot-globe{justify-self:center}
.foot-globe svg{display:block;width:clamp(240px,26vw,330px);height:auto}
.globe-lines{stroke:rgba(24,21,21,.3);stroke-width:1;fill:none}
.globe-callouts{stroke:rgba(24,21,21,.28);stroke-width:1}
.globe-dots{fill:#7F9EAC}
.globe-halo{fill:none;stroke:rgba(127,158,172,.45);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:halo 4.2s var(--ease-io) infinite}
.globe-dots circle:nth-of-type(5){animation-delay:1.4s}
.globe-dots circle:nth-of-type(6){animation-delay:2.8s}
@keyframes halo{0%,100%{opacity:.4;transform:scale(1)}50%{opacity:1;transform:scale(1.3)}}
.globe-labels text{font-family:var(--font-mono);font-weight:500;font-size:11px;letter-spacing:.08em;fill:rgba(35,31,32,.8);text-transform:uppercase}
.foot-cols{display:flex;gap:56px;flex-wrap:wrap;justify-self:end}
.foot-col h2{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:rgba(35,31,32,.8);margin-bottom:15px;font-weight:700}
.foot-col a{display:block;width:fit-content;color:rgba(35,31,32,.66);margin-bottom:11px;transition:color var(--dur-1) var(--ease),transform var(--dur-1) var(--ease)}
.foot-col a:hover{color:#181515;transform:translateX(2px)}
.foot-bottom{padding-top:28px;display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:rgba(35,31,32,.6)}
@media(max-width:760px){
  .foot-top{grid-template-columns:1fr;justify-items:start}
  .foot-globe{justify-self:start;max-width:100%}
  .foot-cols{justify-self:start}
}

/* ---------- Reveal system (scroll-driven, staggered; no-JS safe) ---------- */
.js-anim .reveal{opacity:0;transform:translateY(26px);transition:opacity var(--dur-3) var(--ease),transform var(--dur-3) var(--ease)}
.js-anim .reveal.in{opacity:1;transform:none}
.js-anim .reveal.stagger{opacity:1;transform:none}
.js-anim .stagger>*{opacity:0}
.js-anim .stagger.in>*{animation:rise var(--dur-3) var(--ease) both}
.js-anim .stagger.in>*:nth-child(1){animation-delay:.04s}
.js-anim .stagger.in>*:nth-child(2){animation-delay:.13s}
.js-anim .stagger.in>*:nth-child(3){animation-delay:.22s}
.js-anim .stagger.in>*:nth-child(4){animation-delay:.31s}

/* (The former clip-path "wipe" bands are gone: the statement and CTA bands are
   now plain, always-visible sections. A static band can never flash a void, and
   that risk outweighed the flourish — see the visible-by-default rule below.) */

/* ---------- Stub / "section coming soon" pages (made handsome) ---------- */
.stub-main{position:relative;min-height:calc(100vh - 62px);display:flex;align-items:center;padding-block:var(--section-y);overflow:hidden;isolation:isolate}
.stub-main .mesh{position:absolute;inset:0;z-index:-2;pointer-events:none;overflow:hidden}
.stub-main .mesh::before{content:"";position:absolute;inset:-25%;background:radial-gradient(40% 50% at 82% 32%,var(--mono-wash),transparent 62%),radial-gradient(36% 44% at 92% 84%,var(--mono-wash),transparent 60%);filter:blur(8px);animation:drift 28s var(--ease-io) infinite alternate;will-change:transform}
.stub-main::after{content:"";position:absolute;top:50%;right:clamp(-140px,-5vw,-40px);translate:0 -50%;width:min(58vw,620px);aspect-ratio:1;pointer-events:none;z-index:-1;background:url("../assets/wikiflow-symbol.png") center/contain no-repeat;opacity:.05}
.stub{position:relative;z-index:1;max-width:64ch}
.stub .eyebrow{display:inline-flex;margin-bottom:20px}
.stub h1,.leadership-page .sec-head h1{font-size:clamp(40px,6.6vw,72px);letter-spacing:var(--track-display);line-height:var(--lh-display);max-width:18ch;margin-bottom:26px}
.stub h1 .accent,.leadership-page h1 .accent{background:var(--grad-ink);-webkit-background-clip:text;background-clip:text;color:var(--navy);-webkit-text-fill-color:transparent}
.stub-soon{display:inline-block;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;font-weight:700;color:var(--muted);background:var(--glass-strong);border:1px solid var(--glass-border);border-radius:var(--r-pill);padding:9px 17px;margin:0 0 26px;box-shadow:var(--e-1)}
@supports((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.stub-soon{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}}
.stub p{font-size:var(--fs-lede);color:var(--body);max-width:54ch;line-height:1.55;font-weight:400}
.stub-actions{display:flex;gap:14px;margin-top:40px;flex-wrap:wrap}

/* ============================================================================
   Reduced motion — kill all motion, keep everything legible and complete.
   ============================================================================ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-anim .reveal,.reveal{opacity:1;transform:none}
  .js-anim .stagger>*,.stagger.in>*{opacity:1;transform:none}
  .fill{width:var(--w)!important}
  .hero .eyebrow,.hero h1,.hero .lede,.hero-actions{opacity:1;transform:none}
  .stub-main .mesh::before{animation:none;transform:none}
}

/* ============================================================
   A — PROOF CHIP (homepage, hero-scoped)
   One persistent frosted tile, bottom-right of the hero. Its
   CONTENT rotates every 5s: the stat rolls over per-glyph inside
   an overflow mask, the label crossfades, and a brushed-gold
   glint travels the 1px border once per stat as the timer.
   The tile itself never moves, pops or resizes during rotation;
   it exists ONLY while the hero is on screen. Hover/focus pause
   it (glint freezes); dismiss kills it for the session. Suppressed
   on mobile and under reduced-motion; JS off renders nothing.
   ============================================================ */
@property --wf-a{syntax:'<angle>';inherits:false;initial-value:0turn}
.wf-chip-wrap{position:fixed;right:clamp(20px,2.4vw,32px);bottom:clamp(20px,3vh,32px);z-index:60;width:min(320px,26vw);min-width:250px;opacity:0;transform:translateY(10px) scale(.99);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.wf-chip-wrap.wf-live{opacity:1;transform:none}
.wf-chip-wrap.wf-away{opacity:0;transform:translateY(8px);transition-duration:.35s}
.wf-chip-wrap.wf-gone,.wf-chip-wrap.wf-clash{visibility:hidden}
.wf-chip{position:relative;border-radius:14px;padding:20px 24px 18px;border:1px solid var(--glass-border);background:radial-gradient(60% 90% at 16% 12%,var(--mono-wash),transparent 62%),linear-gradient(158deg,rgba(255,255,255,.72),rgba(246,246,246,.58));-webkit-backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);backdrop-filter:blur(var(--glass-blur)) var(--glass-sat);box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--e-2);transition:box-shadow .25s var(--ease)}
.wf-chip:hover,.wf-chip.is-paused{box-shadow:inset 0 1px 0 rgba(255,255,255,.35),var(--e-3)}
/* grain — the site's premium tactility layer */
.wf-chip::after{content:"";position:absolute;inset:0;border-radius:inherit;background-image:var(--grain);background-size:150px;opacity:.04;mix-blend-mode:soft-light;pointer-events:none}
/* border glint: a mask-composited 1px ring; the conic hot-spot (~10% of the
   perimeter) laps the tile once per 5s stat window — the glint IS the timer */
.wf-chip::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:conic-gradient(from var(--wf-a),transparent 0turn,rgba(127,158,172,.45) .04turn,rgba(54,85,104,.28) .07turn,transparent .1turn);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;pointer-events:none}
.wf-chip.glint-run::before{animation:wf-glint 5s linear infinite}
.wf-chip.is-paused::before{animation-play-state:paused}
.no-glint .wf-chip::before{display:none}
@keyframes wf-glint{to{--wf-a:1turn}}
.wf-chip-eyebrow{font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.14em;color:var(--muted);margin-bottom:10px}
/* stat mask: fixed-height window the glyph rows roll through */
.wf-chip-n{position:relative;overflow:hidden;height:1.08em;font-size:clamp(30px,3.4vw,38px);font-weight:800;line-height:1;letter-spacing:-.025em;font-variant-numeric:tabular-nums}
.wf-row{position:absolute;left:0;top:0;white-space:nowrap}
/* chip number = the hero viewport navy-family moment (matches the h1 accent family)
   — the same ramp as .jw-believe / the statement accent */
.wf-row .g{display:inline-block;color:var(--navy);background-image:linear-gradient(100deg,#456A7E,#5E8698,#2E4E62,#537B90,#274150);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;transition:transform .42s var(--ease),opacity .42s var(--ease)}
.wf-row.out .g{transition:transform .24s var(--ease-io),opacity .24s var(--ease-io)}
.wf-chip-l{font-size:14px;font-weight:500;line-height:1.45;min-height:2.9em;color:var(--body);margin-top:10px;transition:opacity .36s var(--ease),filter .36s var(--ease)}
.wf-chip-l.swap{opacity:0;filter:blur(6px);transition-duration:.18s}
.wf-chip-x{position:absolute;top:8px;right:8px;z-index:1;width:32px;height:32px;display:flex;align-items:center;justify-content:center;padding:0;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:17px;line-height:1;cursor:pointer;transition:background .2s,color .2s}
.wf-chip-x:hover,.wf-chip-x:focus-visible{background:color-mix(in srgb,var(--ink) 9%,transparent);color:var(--ink)}
.wf-chip-x:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.wf-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
/* no backdrop-filter -> the proof band's opaque tile recipe */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .wf-chip{background:radial-gradient(60% 90% at 16% 12%,var(--mono-wash),transparent 62%),linear-gradient(158deg,#F5F6F7,#ECEEF0);border-color:var(--line)}
}
@media (max-height:680px){.wf-chip{padding:16px 20px 14px}.wf-chip-n{font-size:28px}}
@media (max-width:767px){.wf-chip-wrap{display:none}}          /* mobile: suppressed (screen space) */
@media (prefers-reduced-motion:reduce){.wf-chip-wrap{display:none}} /* proof band carries the stats statically */

/* C — Credibility line: quiet close to the thesis band. No box, no icon.
   var(--body) reads AA on the thesis tile in both themes (mono system;
   light steel on the dark tile). */
.credibility-line{margin:22px 0 0;font-family:var(--font-mono);font-size:13px;letter-spacing:.02em;font-weight:600;color:var(--body)}

/* ============================================================
   D — PHASE 3 DETAIL (the-journey). Stat tiles reuse the proof
   gold-number treatment; chips + callout are token-based so they
   hit AA in both themes. .p3-stat is added to the dark-tile list
   in theme-dark.css so its surface flips like the proof tiles.
   ============================================================ */
.p3-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:clamp(22px,3vw,36px)}
.p3-stat{border-radius:14px;padding:clamp(20px,2.6vw,32px);background:radial-gradient(60% 90% at 16% 12%,var(--mono-wash),transparent 62%),linear-gradient(158deg,#F5F6F7,#ECEEF0);border:1px solid var(--line)}
.p3-stat .n{color:var(--ink);font-size:clamp(30px,3.4vw,44px);font-weight:800;line-height:1;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.p3-stat .l{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.1em;font-size:12px;color:var(--muted);margin-top:10px}
.p3-body{font-size:var(--fs-lede);color:var(--body);max-width:74ch;line-height:1.62;margin:clamp(24px,3vw,34px) 0 0}
.p3-body b{color:var(--ink);font-weight:700}
.p3-chips{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-wrap:wrap;gap:10px}
.p3-chip{font-family:var(--font-mono);font-size:12.5px;letter-spacing:.02em;color:var(--ink);background:color-mix(in srgb,var(--ink) 5%,var(--paper));border:1px solid var(--line);border-radius:999px;padding:8px 15px;line-height:1.2}
.p3-callout{margin:clamp(26px,3.4vw,42px) 0 0;border-radius:14px;border:1px solid var(--line);border-left:3px solid var(--navy);padding:clamp(22px,3vw,30px) clamp(24px,3.2vw,34px);background:radial-gradient(70% 120% at 100% 0,var(--mono-wash),transparent 60%),color-mix(in srgb,var(--ink) 4%,var(--paper))}
.p3-callout p{margin:0;font-size:var(--fs-lede);line-height:1.62;color:var(--ink);max-width:82ch}
.phase-detail-link{display:inline-flex;align-items:center;gap:6px;margin-top:15px;font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none;font-weight:600}
/* Post-phase sustaining-habits row (Phase 3) — eyebrow + chip idiom */
.p3-post{margin-top:clamp(26px,3.4vw,42px)}
.p3-post .p3-chips{margin-top:14px}
.phase-detail-link{position:relative}
.phase-detail-link::after,.story-more::after{content:"";position:absolute;left:0;right:0;bottom:-4px;height:2px;border-radius:2px;background:var(--ink);transform:scaleX(0);transform-origin:left;transition:transform var(--dur-2) var(--ease)}
.phase-detail-link:hover::after,.phase-detail-link:focus-visible::after{transform:scaleX(1)}
@media (max-width:680px){.p3-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:420px){.p3-stats{grid-template-columns:1fr}}

/* ============================================================
   E — SUCCESS STORIES RAIL (homepage scaffold, hidden by flag).
   Token-based surfaces => AA in both themes. Renders from the
   STORIES array in site.js; ships with zero cards.
   ============================================================ */
.stories-viewport{position:relative;margin-top:clamp(20px,3vw,34px)}
.stories-rail{list-style:none;margin:0;padding:4px;display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.stories-rail:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:14px}
.story-card{scroll-snap-align:start;flex:0 0 min(340px,82vw);border-radius:14px;border:1px solid var(--line);padding:clamp(22px,2.6vw,30px);background:color-mix(in srgb,var(--ink) 4%,var(--paper));display:flex;flex-direction:column;gap:10px}
.story-client{font-size:clamp(20px,2.2vw,26px);color:var(--ink);margin:6px 0 0;letter-spacing:var(--track-head)}
.story-outcome{color:var(--body);line-height:1.55;margin:0;flex:1}
.story-more{font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink);text-decoration:none;font-weight:600;display:inline-flex;gap:6px;align-items:center}
.story-more{position:relative}
.story-more:hover::after,.story-more:focus-visible::after{transform:scaleX(1)}
.stories-nav{position:absolute;top:42%;transform:translateY(-50%);z-index:2;width:40px;height:40px;border-radius:999px;border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;display:none;align-items:center;justify-content:center;font-size:18px;box-shadow:var(--e-1)}
.stories-nav:hover,.stories-nav:focus-visible{background:color-mix(in srgb,var(--ink) 8%,var(--paper))}
.stories-nav:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.story-card{transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.story-card:hover{transform:translateY(-2px);box-shadow:var(--e-1)}
.stories-nav.prev{left:-6px}
.stories-nav.next{right:-6px}
@media (min-width:761px){.stories-nav{display:flex}}

/* ============================================================
   F — VIDEO FEATURE + MODAL (homepage scaffold, hidden by flag).
   Renders from the VIDEOS array in site.js; ships with no media.
   Play triangle is hardcoded dark so it reads on gold in both themes.
   ============================================================ */
.video-feature{position:relative;display:block;width:100%;margin-top:clamp(20px,3vw,34px);border:1px solid var(--line);border-radius:14px;overflow:hidden;aspect-ratio:16/9;cursor:pointer;background:color-mix(in srgb,var(--ink) 6%,var(--paper));padding:0}
.vf-poster,.vt-poster{position:absolute;inset:0;background-size:cover;background-position:center}
.vf-play{position:absolute;top:50%;left:50%;width:66px;height:66px;transform:translate(-50%,-50%);border-radius:999px;background:var(--ink);box-shadow:var(--e-2)}
.vf-play::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-left:18px solid var(--paper);border-top:12px solid transparent;border-bottom:12px solid transparent}
.vf-meta{position:absolute;left:18px;bottom:16px;display:flex;flex-direction:column;gap:2px;color:#fff;text-shadow:0 1px 8px rgba(0,0,0,.55);text-align:left}
.vf-name{font-weight:700;font-size:18px}
.vf-role{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;text-transform:uppercase;opacity:.92}
.video-rail{list-style:none;margin:16px 0 0;padding:4px;display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:thin}
.video-tile{scroll-snap-align:start;flex:0 0 min(230px,70vw)}
.vt-btn{position:relative;display:block;width:100%;aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;cursor:pointer;background:color-mix(in srgb,var(--ink) 6%,var(--paper));padding:0}
.vt-btn .vf-play{width:46px;height:46px}
.vt-btn .vf-play::after{border-left-width:13px;border-top-width:9px;border-bottom-width:9px}
.vt-name{position:absolute;left:12px;bottom:10px;color:#fff;font-weight:600;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.55)}
.vm-open{overflow:hidden}
.video-modal{position:fixed;inset:0;z-index:120;display:flex;align-items:center;justify-content:center;padding:clamp(16px,4vw,48px)}
.vm-backdrop{position:absolute;inset:0;background:rgba(8,10,14,.72)}
.vm-panel{position:relative;z-index:1;width:min(1000px,100%);aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden;box-shadow:var(--e-3)}
.vm-stage{position:absolute;inset:0}
.vm-stage iframe,.vm-stage video{width:100%;height:100%;border:0;display:block}
.vm-close{position:absolute;top:10px;right:10px;z-index:2;width:38px;height:38px;border-radius:999px;border:0;background:rgba(0,0,0,.55);color:#fff;font-size:20px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vm-close:hover,.vm-close:focus-visible{background:rgba(0,0,0,.82)}
@media (prefers-reduced-motion:no-preference){.vm-backdrop{backdrop-filter:blur(4px)}}

/* HOTFIX: the [hidden] attribute must always win. Author display rules (e.g. the
   video modal's display:flex) silently override the UA's [hidden]{display:none},
   which made the empty film modal cover the homepage on load. */
[hidden]{display:none!important}

/* ============================================================
   PREVIEW MODE (?preview=1) — owner sign-off for hidden features.
   Reveals the stories rail, the video section's VISUAL SHELL, and
   the Phase 1/2 twins as neutral skeletons: shimmer bones and a
   faint brand flow-wave, each block corner-tagged
   "SAMPLE — awaiting content". No fake names, outcomes or stills.
   Inactive without the query param; JS adds noindex when active.
   Order note: stories/videos hide via BOTH [hidden] and a data-flag
   display:none rule (these .pv-on rules sit later, so they win at
   equal specificity); the Phase 1/2 twins hide via [hidden] alone,
   which preview JS removes.
   ============================================================ */
.pv-on[data-stories-live="false"],.pv-on[data-videos-live="false"],
.pv-on[data-phase1-live="false"],.pv-on[data-phase2-live="false"]{display:block}
.pv-skel{position:relative}
.pv-tag{position:absolute;top:10px;right:10px;z-index:2;font-family:var(--font-mono);font-size:10px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);border:1px dashed var(--line);border-radius:999px;padding:4px 10px;background:color-mix(in srgb,var(--paper) 82%,transparent);pointer-events:none}
.pv-bone{display:block;border-radius:6px;background:color-mix(in srgb,var(--ink) 8%,var(--paper));position:relative;overflow:hidden;min-height:12px}
.pv-bone::after{content:"";position:absolute;inset:0;transform:translateX(-100%);background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--paper) 55%,transparent),transparent);animation:pv-shimmer 2s var(--ease) infinite}
@keyframes pv-shimmer{to{transform:translateX(100%)}}
@media (prefers-reduced-motion:reduce){.pv-bone::after{animation:none}}
/* faint flow-wave motif (echoes the footer globe's flow curve; decorative only) */
.pv-wave{position:absolute;left:0;right:0;bottom:0;height:44px;opacity:.5;pointer-events:none}
.pv-wave path{fill:none;stroke:var(--steel);stroke-opacity:.35;stroke-width:2;stroke-linecap:round}
.pv-wave .w2{stroke:var(--navy);stroke-opacity:.3}
/* skeleton video shells reuse the real shells' geometry */
.pv-video-feature{position:relative;width:100%;aspect-ratio:16/9;margin-top:clamp(20px,3vw,34px);border:1px solid var(--line);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
.pv-video-tile{position:relative;flex:0 0 min(230px,70vw);aspect-ratio:16/9;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:color-mix(in srgb,var(--ink) 5%,var(--paper))}
.pv-play{position:absolute;top:50%;left:50%;width:54px;height:54px;transform:translate(-50%,-50%);border-radius:999px;background:color-mix(in srgb,var(--ink) 10%,var(--paper));border:1px solid var(--line)}
.pv-video-tile .pv-play{width:40px;height:40px}

/* ============================================================
   PLAYBOOK COMPARISON (the-journey) — token-based table in the
   site's tile language; the AI column carries a soft gold wash.
   Wrapper scrolls horizontally on narrow screens (no body scroll).
   ============================================================ */
.cmp-vs{font-style:italic;font-weight:500;color:var(--muted);font-size:.6em;vertical-align:middle;padding:0 .35em}
.cmp-wrap{margin-top:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:14px;overflow-x:auto;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.cmp-table{width:100%;min-width:560px;border-collapse:collapse;font-size:15px}
.cmp-table th,.cmp-table td{padding:14px clamp(14px,2vw,24px);text-align:left;border-bottom:1px solid var(--line)}
.cmp-table tbody tr:last-child th,.cmp-table tbody tr:last-child td{border-bottom:0}
.cmp-table thead th{font-family:var(--font-mono);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.cmp-table tbody th{font-family:var(--font-mono);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);white-space:nowrap}
.cmp-table td{color:var(--body)}
.cmp-table .cmp-ai{background:color-mix(in srgb,var(--ink) 6%,transparent);color:var(--ink);font-weight:600}
.cmp-table thead .cmp-ai{color:var(--ink)}
.cmp-principle{display:block;font-family:var(--font-mono);font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin-bottom:10px}

/* ============================================================
   STRUCTURAL ENHANCEMENT — new-page components (mono system).
   FAQ accordion (native details), glossary list, stories grid.
   All surfaces/type from tokens; hierarchy via weight and scale.
   ============================================================ */
.faq-list{display:grid;gap:10px;max-width:74ch}
.faq-item{border:1px solid var(--line);border-radius:14px;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.faq-item summary{display:flex;align-items:baseline;gap:14px;cursor:pointer;list-style:none;padding:18px 22px;color:var(--ink);font-weight:700;font-size:16.5px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";margin-left:auto;font-weight:400;font-size:22px;color:var(--muted);transition:transform var(--dur-2) var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item summary:focus-visible{outline:2px solid var(--ink);outline-offset:2px;border-radius:14px}
.faq-n{font-family:var(--font-mono);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.faq-item p{margin:0;padding:0 22px 20px 0;color:var(--body);line-height:1.62;max-width:66ch;padding-left:calc(22px + 12px + 14px)}
.glossary{margin:0;display:grid;gap:10px;max-width:74ch}
.glo-item{border:1px solid var(--line);border-radius:14px;padding:18px 22px;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.glo-item dt{color:var(--ink);font-weight:700;font-size:16px}
.glo-item dd{margin:6px 0 0;color:var(--body);line-height:1.6;max-width:68ch}
.glo-note{margin-top:26px;color:var(--muted);font-size:14.5px}
.glo-note a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.story-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px}
.story-grid .story-card{display:flex;flex-direction:column;gap:10px;border:1px solid var(--line);border-radius:14px;padding:clamp(22px,2.6vw,30px);background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.story-grid .story-client{font-size:clamp(22px,2.4vw,28px);margin:4px 0 0;color:var(--ink)}
.p3-body a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* S3 — contact form (mono) */
.cc-form{display:grid;gap:14px;margin-top:26px;max-width:52ch}
.cc-form-hp{position:absolute;left:-9999px}
.cc-field{display:grid;gap:6px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cc-field input,.cc-field textarea{font:inherit;font-weight:400;color:var(--ink);background:color-mix(in srgb,var(--ink) 4%,var(--paper));border:1px solid var(--line);border-radius:10px;padding:11px 14px}
.cc-field input:focus-visible,.cc-field textarea:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.cc-form .btn-primary{border:0;cursor:pointer;justify-self:start;font:inherit;font-weight:700}
/* S6 — journey diagram */
.jd-fig{margin:26px 0 0;border:1px solid var(--line);border-radius:14px;padding:clamp(14px,2vw,24px);background:color-mix(in srgb,var(--ink) 4%,var(--paper));overflow-x:auto}
.jd{display:block;width:100%;min-width:560px;height:auto}
.jd-wave{stroke:var(--navy);stroke-width:2.5;stroke-linecap:round;opacity:.75}
.jd-node circle{fill:var(--ink)}
.jd-t{fill:var(--ink);font-weight:700;font-size:20px}
.jd-s{fill:var(--muted);font-family:var(--font-mono);font-size:12px;letter-spacing:.04em}
/* S8 — sticky in-page subnav */
.subnav{position:sticky;top:64px;z-index:40;display:flex;gap:8px;flex-wrap:wrap;padding-top:10px;padding-bottom:10px;margin-top:8px}
.subnav a{font-family:var(--font-mono);font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:999px;padding:7px 14px;background:var(--glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.subnav a:hover,.subnav a:focus-visible{border-color:var(--ink)}
.subnav a:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* F2/F3 — logo wall + quote band (hidden scaffolds; mono) */
.logo-wall[data-logos-live="false"].pv-on,.quote-band[data-quotes-live="false"].pv-on{display:block}
.logo-wall,.quote-band{padding-block:clamp(28px,4vw,44px)}
.logo-row{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,44px);align-items:center;justify-content:center;position:relative}
.logo-row img{height:auto;width:auto;max-height:clamp(30px,3.4vw,44px);max-width:clamp(140px,18vw,200px);object-fit:contain;filter:grayscale(1);opacity:.82;transition:opacity var(--dur-2) var(--ease)}
.logo-row img:hover{opacity:1}
:root[data-theme="dark"] .logo-row img{filter:grayscale(1) invert(1);opacity:.8}
.quote-fig{margin:0;text-align:center;max-width:64ch;margin-inline:auto;position:relative}
.quote-q{margin:0;font-size:clamp(20px,2.6vw,28px);line-height:1.4;color:var(--ink);font-weight:600;text-wrap:balance}
.quote-by{margin-top:14px;font-family:var(--font-mono);font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
/* F20 — cross-nav tiles */
.xnav{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:10px;margin-top:8px;margin-bottom:8px}
.xnav-tile{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:14px;padding:18px 22px;text-decoration:none;background:color-mix(in srgb,var(--ink) 4%,var(--paper));transition:transform var(--dur-2) var(--ease),box-shadow var(--dur-2) var(--ease)}
.xnav-tile:hover{transform:translateY(-2px);box-shadow:var(--e-1)}
.xnav-tile:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.xn-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.xnav-tile strong{color:var(--ink);font-size:16px}
.xn-a{margin-left:auto;color:var(--muted)}
/* F18 — quiet second path in CTA bands */
.cta-alt{margin-top:14px;font-size:14px}
.cta-alt a{color:var(--paper);text-decoration:underline;text-underline-offset:3px;opacity:.85}
.cta-alt a:hover,.cta-alt a:focus-visible{opacity:1}
/* P2 — article template prose */
.prose{max-width:68ch}
.prose h2{font-size:clamp(22px,2.6vw,30px);margin:34px 0 10px;color:var(--ink)}
.prose p{line-height:1.7;margin:0 0 16px}
.pullquote{margin:28px 0;border-left:3px solid var(--navy);padding:6px 0 6px 22px}
.pullquote p{font-size:clamp(19px,2.2vw,24px);color:var(--ink);font-weight:600;margin:0;line-height:1.45}

/* P2 — article share row (template) */
.share-row{display:flex;gap:16px;align-items:center;margin-top:34px;padding-top:18px;border-top:1px solid var(--line);font-size:14px}
.share-row a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* Placeholder devices: assessment stepper + filter row (SAMPLE states) */
.assess{position:relative;border:1px solid var(--line);border-radius:14px;padding:clamp(24px,3vw,36px);max-width:64ch;background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.assess-steps{display:flex;gap:10px}
.as-dot{width:10px;height:10px;border-radius:999px;background:var(--line)}
.as-dot.on{background:var(--ink)}
.assess-opts{display:grid;gap:0;margin-top:4px;max-width:46ch}
.filter-row{position:relative;display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px;padding:14px;border:1px dashed var(--line);border-radius:14px}
.filter-row .pv-bone{border-radius:999px}

/* Parity devices: promo band + story spotlight */
.promo-band{position:relative;border:1px dashed var(--line);border-radius:14px;padding:clamp(24px,3vw,36px);background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.story-spotlight{position:relative;border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:14px;padding:clamp(26px,3.4vw,44px);background:color-mix(in srgb,var(--ink) 4%,var(--paper))}
.story-spotlight h2{margin:10px 0 8px;font-size:clamp(24px,3vw,36px)}
.story-spotlight p{color:var(--body);margin:0 0 14px;max-width:64ch}

/* ============================================================
   HERO V2 (celonis-annotated brief): two-tone headline, discover
   pill, particle-wave canvas stage, photo rotator, scroll cue,
   fuller nav with Company dropdown + site search. Mono system.
   ============================================================ */
.hero-v2{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);grid-template-areas:"header header" "stage aside";gap:10px;align-items:stretch}
.hero-v2 .hero-copy{grid-area:header;text-align:left;align-items:flex-start;gap:12px}
.hero-v2 h1{max-width:none}
.h1-a{color:var(--muted)}
.h1-b{color:var(--ink)}
.discover{display:inline-flex;align-items:center;gap:10px;margin-top:18px;font-weight:600;font-size:15px;color:var(--ink);text-decoration:none;border:1px solid var(--line);border-radius:var(--r-pill);padding:10px 18px;transition:border-color var(--dur-2) var(--ease),transform var(--dur-2) var(--ease)}
.discover:hover{border-color:var(--ink);transform:translateY(-1px)}
.discover:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.disc-dot{width:8px;height:8px;background:var(--navy);border-radius:2px}
.hero-stage{grid-area:stage;position:relative;min-height:clamp(320px,48vh,560px);border-radius:14px;overflow:hidden;background:
  radial-gradient(60% 90% at 20% 10%,var(--mono-wash),transparent 62%),
  linear-gradient(165deg,#2B2727,#242021)}
:root:not([data-theme="dark"]) .hero-stage{background:radial-gradient(60% 90% at 20% 10%,var(--mono-wash),transparent 62%),linear-gradient(165deg,#FBFCFB,#F1F3F2)}
.hero-wave{position:absolute;inset:0;width:100%;height:100%;display:block}
.hero-v2 .hero-aside{display:flex;flex-direction:column;gap:18px;justify-content:flex-start}
.photo-rotator{position:relative;aspect-ratio:4/3;border-radius:14px;overflow:hidden;border:1px solid var(--line);margin-top:auto}
.photo-rotator img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease)}
.photo-rotator img.on{opacity:1}
.scroll-cue{position:absolute;left:clamp(14px,2vw,26px);bottom:clamp(12px,2vh,22px);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border:1px solid var(--line);border-radius:var(--r-pill);color:var(--ink);text-decoration:none;font-size:18px;background:var(--glass-strong);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.scroll-cue:hover{border-color:var(--ink)}
.scroll-cue:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.hero-v2{position:relative}
@media (max-width:860px){.hero-v2{grid-template-columns:1fr;grid-template-areas:"header" "stage" "aside"}.hero-stage{min-height:260px}}
@media (prefers-reduced-motion:reduce){.photo-rotator img{transition:none}}
/* --- nav dropdown --- */
.nav-drop{position:relative;display:flex;align-items:center}
.nav-drop-btn{display:inline-flex;align-items:center;gap:6px;font:inherit;font-size:14px;font-weight:600;letter-spacing:-.005em;color:var(--body);background:none;border:0;cursor:pointer;padding:0}
.nav-drop-btn:hover{color:var(--ink)}
.nav-drop-btn:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:4px}
.nd-plus{font-weight:400;color:var(--muted)}
.nav-drop-menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);min-width:190px;list-style:none;margin:0;padding:8px;background:var(--glass-scrolled);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1px solid var(--line);border-radius:12px;box-shadow:var(--e-2);z-index:120}
.nav-drop-menu a{display:block;padding:9px 12px;border-radius:8px;color:var(--body);font-size:14px;font-weight:600;text-decoration:none}
.nav-drop-menu a:hover,.nav-drop-menu a:focus-visible{background:var(--mono-wash);color:var(--ink)}
/* --- nav search button --- */
.nav-search{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:var(--r-pill);border:1px solid transparent;background:none;color:var(--body);cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.nav-search:hover{color:var(--ink);border-color:var(--line)}
.nav-search:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
/* --- search overlay --- */
.wf-search{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 0}
.ws-backdrop{position:absolute;inset:0;background:rgba(10,8,8,.6);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ws-panel{position:relative;width:min(560px,100%);background:var(--canvas);border:1px solid var(--line);border-radius:14px;box-shadow:var(--e-3);overflow:hidden}
.ws-input{width:100%;font:inherit;font-size:17px;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--line);padding:18px 20px;outline:none}
.ws-results{list-style:none;margin:0;padding:8px;max-height:46vh;overflow:auto}
.ws-results a{display:flex;justify-content:space-between;gap:14px;padding:11px 12px;border-radius:8px;color:var(--body);text-decoration:none;font-size:14.5px}
.ws-results a:hover,.ws-results a:focus-visible{background:var(--mono-wash);color:var(--ink)}
.ws-results .ws-k{font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media (max-width:1080px){
  /* The Company menu is a plain always-open list at this size — in the drawer it
     becomes a labelled section (see the mobile navigation block above), and with
     scripts off it simply sits inline under the bar. */
  .nav-drop-menu{position:static;transform:none;box-shadow:none;border:0;background:none;padding:0 0 0 12px;-webkit-backdrop-filter:none;backdrop-filter:none}
  .nav-drop{flex-direction:column;align-items:flex-start}
}

/* Page scroll lock while the drawer is open. <body> is pinned at the offset
   site.js records (it sets the negative `top`), because overflow:hidden alone
   does not hold on iOS Safari — touch drags still scroll the page behind. Safe
   now that the drawer is fixed to the viewport rather than anchored to the
   sticky header; site.js restores the exact scroll position on close. */
html.wf-noscroll{overflow:hidden}
html.wf-noscroll body{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ============================================================
   HERO V3 — one full-bleed ink canvas in BOTH themes (precedent:
   the proof band stays dark in light theme). Headline overlaid,
   dense particle wave with real presence, floating photo card,
   scroll cue. The statement band below carries the lede.
   ============================================================ */
.hv3{position:relative;min-height:min(92vh,880px);background:#F6F6F6;color:#181515;overflow:hidden;isolation:isolate;display:flex;flex-direction:column}
.hv3-wave{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:0}
.hv3-copy{position:relative;z-index:2;padding:clamp(72px,12vh,140px) clamp(24px,5vw,80px) 0;max-width:1400px}
.hv3-eyebrow{font-family:var(--font-mono);font-size:12.5px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:#6A6B6F}
.hv3 h1{margin:18px 0 0;font-size:clamp(44px,7vw,96px);line-height:1.02;letter-spacing:-.03em;font-weight:800;max-width:none;text-wrap:balance}
.hv3-a{color:#8F8B8A}
.hv3-b{color:#F6F6F6}
.hv3 .discover{margin-top:30px;color:#181515;border-color:rgba(24,21,21,.25)}
.hv3 .discover:hover{border-color:#F6F6F6}
.hv3 .discover:focus-visible{outline-color:#F6F6F6}
.hv3-photo{position:absolute;right:clamp(20px,3.5vw,52px);bottom:clamp(140px,24vh,240px);width:min(300px,24vw);z-index:2;margin:0;box-shadow:var(--e-3);border-color:rgba(246,246,246,.14)}
.hv3 .scroll-cue{color:#181515;border-color:rgba(24,21,21,.25);background:rgba(246,246,246,.55)}
.hv3 .scroll-cue:hover{border-color:#F6F6F6}
@media (max-width:980px){.hv3{min-height:72vh}}
.intro-statement{padding-block:var(--section-y);background:var(--canvas)}
.intro-statement p{margin:0 auto;text-align:center;font-size:clamp(23px,3.2vw,42px);font-weight:600;color:var(--body);max-width:30ch;line-height:1.28;letter-spacing:-.015em;text-wrap:balance}
.intro-statement b{color:var(--ink);font-weight:800}

/* ============================================================
   SUBPAGE HEROES — the v3 standard everywhere (celonis tertiary
   hero): every page-head is a full-bleed ink band in BOTH themes,
   white type, no tile radius or gaps. Content aligns with the
   homepage hero's padding column.
   ============================================================ */
.gallery-page .page-head{max-width:none;margin:calc(-1*clamp(10px,1.3vw,16px)) calc(-1*clamp(10px,1.3vw,16px)) 0;border-radius:0;box-shadow:none;background:#231F20;padding:clamp(76px,11vh,128px) clamp(24px,5vw,80px) clamp(42px,6vh,66px)}
.gallery-page .page-head .eyebrow{color:#A19D9B}
.gallery-page .page-head h1{color:#F6F6F6}
.gallery-page .page-head .lede{color:#C9C5C4}
.gallery-page .page-head .back-home{color:#A19D9B}
.gallery-page .page-head .back-home:hover{color:#F6F6F6}
.gallery-page .page-head .back-home:focus-visible{outline-color:#F6F6F6}
.gallery-page .page-head .btn-ghost{color:#F6F6F6;border-color:rgba(246,246,246,.25);background:transparent}
.gallery-page .page-head .btn-ghost:hover{border-color:#F6F6F6;color:#F6F6F6}

/* ============================================================
   FLAT BAND SYSTEM — the celonis artifact standard, sitewide.
   The hero set the bar; this layer brings every other artifact
   to it: full-width flat bands (no gutters, no rounded outer
   tiles), hairline separators, flat cards with thin borders and
   8px corners, content on the shared column. A deliberate
   override layer: !important is the mechanism, documented here
   and in DESIGN-TEMPLATE.md (card radius rule updated 8px).
   ============================================================ */
/* 1 — bands: every top-level section is a flat, full-width band */
main{padding:0!important;background:var(--canvas)}
main>section,main>.block,main>.wrap,.gallery-page>.block,.gallery-page .page-head{margin:0!important;border-radius:0!important;box-shadow:none!important}
.gallery-page>.block,main>.block{max-width:none;background:var(--canvas);border-top:1px solid var(--line-soft);padding-left:clamp(24px,5vw,80px);padding-right:clamp(24px,5vw,80px)}
main>.wrap{padding-left:clamp(24px,5vw,80px);padding-right:clamp(24px,5vw,80px)}
/* structural wrappers lose their tile dressing entirely */
.jr-head,.jr-body,.ls-head,.pb-slide,.hero-copy,.hero-aside{background:none!important;box-shadow:none!important;border-radius:0!important}
/* 2 — dark bands stay ink in both themes, flat and full-width */
.proof-slide,.cta-slide,.cta-tile,.cta-band,.foot-tile{border-radius:0!important;margin:0!important;box-shadow:none!important}
.cta-tile{background:#231F20!important}
/* 3 — cards: flat surface, hairline border, 8px corners, no gradients */
.phase,.story-card,.p3-stat,.faq-item,.glo-item,.tm-card,.xnav-tile,.cmp-wrap,.contact-card,.band,.stat,.pb-phase,.leadership-slide .person,.gallery-page .tp-tile,.jd-fig,.p3-callout,.story-spotlight,.promo-band,.assess,.pv-video-feature,.pv-video-tile,.tm-pop,.quote-fig{
  background:color-mix(in srgb,var(--ink) 3%,var(--canvas))!important;
  border:1px solid var(--line)!important;
  border-radius:8px!important;
  box-shadow:none!important;
}
.p3-callout{border-left:3px solid var(--navy)!important}
.tm-pop{background:var(--canvas)!important;box-shadow:var(--e-2)!important}
/* proof band stats sit directly on the ink band, divided by hairlines */
.ps-grid{gap:0!important}
.ps-grid>*{background:none!important;border-radius:0!important;box-shadow:none!important;border-left:1px solid rgba(246,246,246,.12)}
.ps-grid>.ps-statement{border-left:0}
/* 4 — chips flatten */
.p3-chip{background:transparent;border-radius:6px}
/* 5 — the gallery gap dies; bands are flush, separated by hairlines */
.gallery-page{padding:0!important}
/* 6 — hover lifts become subtle border emphasis (flat design) */
.phase:hover,.story-card:hover,.tm-card.has-pop:hover,.xnav-tile:hover{transform:none!important;box-shadow:none!important;border-color:var(--ink)!important}

/* Scroll choreography (hero): the ring, photo card and proof chip recede as
   you scroll (scale + fade via --hp set by site.js) and return on the way up.
   Reduced-motion never sets --hp, so everything stays static. */
/* ring shrink-on-scroll now lives in the renderer (keeps it centred + crisp) */

/* chip anchored to the hero: static on the page, recedes with scroll */
.hv3 .wf-chip-wrap{position:absolute;right:clamp(20px,3.5vw,52px);bottom:clamp(18px,4vh,42px);z-index:2}

/* One right-side stack: photo above, results chip below — recedes as ONE unit */
.hv3-stack{position:absolute;right:clamp(20px,3.5vw,52px);bottom:clamp(18px,4vh,42px);width:min(236px,19vw);z-index:2;display:flex;flex-direction:column;gap:10px}
.hv3-stack .photo-rotator{position:relative;inset:auto;width:100%;margin:0}
.hv3-stack .wf-chip-wrap{position:static;width:100%;min-width:0}
@media (max-width:980px){
  /* phones: the desktop composition, miniaturised - anchored bottom-right,
     vertical, swap + entrance unchanged (10px gap stays: swap distance
     is calc(100% + 10px)) */
  .hv3-stack{right:clamp(12px,3.5vw,20px);bottom:clamp(12px,2.5vh,20px);width:clamp(122px,36vw,152px)}
  .hv3-stack .wf-chip{padding:9px 11px}
  .hv3-stack .wf-chip-eyebrow{font-size:8.5px;letter-spacing:.14em}
  .hv3-stack .wf-row .g{font-size:19px}
  .hv3-stack .wf-chip-l{font-size:10px;line-height:1.25}
  .hv3-stack .wf-chip-x{width:18px;height:18px;font-size:12px}
}
@media (max-width:767px){
  .hv3-stack .wf-chip-wrap{display:flex}   /* the old floating-chip mobile kill does not apply inside the hero stack */
}

/* HERO NOTES (owner, 2026-07-18): darker canvas; headline one colour with the
   three key words in vibrant SOLID blue (same hue, glow for vibrancy — no
   brush/gradient); results chip = solid opaque navy card, plain fonts; photo
   and results cards identical in size; both static under scroll. */

.hv3 h1{color:#181515}
.hv3 .hl{color:#365568}
.hv3-stack .photo-rotator{aspect-ratio:4/3}
.hv3-stack .wf-chip-wrap{aspect-ratio:4/3;display:flex}
.hv3-stack .wf-chip{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;background:#8CB1CE!important;border:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important;border-radius:8px!important}
.hv3-stack .wf-chip::before{display:none}
.hv3-stack .wf-chip::after{display:none}
.hv3-stack .wf-chip-eyebrow{color:#231F20!important}
.hv3-stack .wf-chip-l{color:#231F20!important}
.hv3-stack .wf-row .g{background-image:none!important;-webkit-text-fill-color:#231F20!important;color:#231F20!important}
.hv3-stack .wf-chip-x{color:#231F20}
.hv3-stack .wf-chip-x:hover,.hv3-stack .wf-chip-x:focus-visible{color:#231F20;background:rgba(35,31,32,.12)}

/* Card SWAP (photo + results): every cycle the two cards trade places in one
   shared glide (same distance, duration, easing - identical by construction),
   each arriving with new content. Rising card passes in front. */
.photo-rotator img{transition:none}
.photo-rotator img:not(.on){opacity:0}
.hv3-stack .photo-rotator{z-index:2}
.hv3-stack .wf-chip-wrap{position:relative;inset:auto;z-index:1}
.hv3-stack .photo-rotator,.hv3-stack .wf-chip-wrap{transition:transform .62s var(--ease),opacity .6s var(--ease)}
.hv3-stack.swapped .photo-rotator{transform:translateY(calc(100% + 10px))}
.hv3-stack.swapped .wf-chip-wrap{transform:translateY(calc(-100% - 10px));z-index:3}
@media (prefers-reduced-motion:reduce){.hv3-stack .photo-rotator,.hv3-stack .wf-chip-wrap{transition:none;transform:none}}

/* Photo card enters exactly like the results card: same rise, same moment
   (pr-live lands at the same 1400ms as wf-live). js-anim scope = JS-off safe. */
html.js-anim .hv3-stack .photo-rotator:not(.pr-live){opacity:0;transform:translateY(10px) scale(.99)}

/* ============================================================
   FINALE - THE FLOW (unique closing slide on the hero's
   structural template). wikiflow's own metaphor: scattered dots
   stream in from both edges, find one line, and converge into
   the one next step. Ink stage, the fixed type scale, blue
   reserved for the keywords + the travelling pulse.
   ============================================================ */
.fin{position:relative;color:#181515;overflow:hidden;padding:clamp(84px,10vw,140px) 0 clamp(110px,13vw,170px);isolation:isolate;background:linear-gradient(rgba(24,21,21,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(24,21,21,.045) 1px,transparent 1px),linear-gradient(rgba(24,21,21,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(24,21,21,.08) 1px,transparent 1px),#F6F6F6;background-size:36px 36px,36px 36px,180px 180px,180px 180px,auto}
.fin-flow{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.fin-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center}
.fin-eyebrow{display:block;font-family:var(--font-mono);font-size:12px;font-weight:600;letter-spacing:var(--track-eyebrow);text-indent:var(--track-eyebrow);text-transform:uppercase;color:#181515;margin-bottom:clamp(56px,8vw,104px)}


.fin-cta{position:relative;display:inline-flex;align-items:center;gap:14px;color:#181515;font-weight:800;font-size:clamp(21px,2.6vw,32px);letter-spacing:-.01em;text-decoration:none;transition:opacity var(--dur-2) var(--ease)}
.fin-cta:hover{text-decoration:underline;text-underline-offset:5px}







.fin-cta:focus-visible{outline:2px solid #181515;outline-offset:3px}


/* STRIPES - fixed repeated-word rows (deliberately NOT flowing): each row is
   one full-width link; arrow direction alternates row to row. Ink zone
   continues from the finale; hairlines separate the rows. */
.stripes{background:#F6F6F6;border-top:1px solid rgba(24,21,21,.16)}
.stripe{display:block;overflow:hidden;white-space:nowrap;text-align:center;padding:clamp(9px,1.3vw,15px) 0;border-bottom:1px solid rgba(24,21,21,.16);text-decoration:none;color:rgba(24,21,21,.9);font-weight:800;font-size:clamp(15px,1.7vw,22px);letter-spacing:-.02em;line-height:1;transition:color var(--dur-2) var(--ease),background-color var(--dur-2) var(--ease)}
.stripe:hover{color:#181515;background:#ECEAE9}
.stripe:focus-visible{outline:2px solid #181515;outline-offset:-4px}
.stripe .st-arr{color:rgba(24,21,21,.45);margin:0 clamp(12px,1.6vw,24px) 0 clamp(4px,.6vw,9px)}
.stripe:hover .st-arr{color:rgba(24,21,21,.75)}

/* calmer stripes: three instances, centre carries the voice, outers whisper */
.stripe .stripe-row{display:flex;justify-content:center;align-items:baseline;gap:clamp(48px,9vw,150px)}
.stripe .st-item{flex:none}
.stripe .st-item:not(:nth-child(2)){opacity:.34}
.stripe:hover .st-item{opacity:1}
@media(max-width:720px){.stripe .st-item:not(:nth-child(2)){display:none}}



/* THE SCHEMATIC dressing - registration marks + the title block (all static;
   the stream stays the band's single animation) */
.fin-reg{position:absolute;z-index:1;font-family:var(--font-mono);font-size:15px;font-weight:400;color:rgba(35,31,32,.35);pointer-events:none;user-select:none;line-height:1}
.fr-tl{top:14px;left:16px}.fr-tr{top:14px;right:16px}.fr-bl{bottom:12px;left:16px}.fr-br{bottom:12px;right:16px}
.fin-tb{position:absolute;z-index:1;right:clamp(20px,4vw,56px);bottom:clamp(20px,3vw,44px);min-width:min(300px,80vw);border:1px solid rgba(24,21,21,.3);border-radius:8px;overflow:hidden;background:#F6F6F6}
.ftb-row{display:flex;align-items:center;border-bottom:1px solid rgba(24,21,21,.18)}
.ftb-row:last-child{border-bottom:0}
.ftb-k{flex:0 0 88px;padding:8px 12px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(35,31,32,.55);border-right:1px solid rgba(24,21,21,.18)}
.ftb-v{padding:8px 12px;font-family:var(--font-mono);font-size:12px;color:#231F20;text-decoration:none}
a.ftb-v{color:#365568;text-decoration:underline;text-underline-offset:3px}
a.ftb-v:hover{color:#2A4252;background:rgba(54,85,104,.07)}
a.ftb-v:focus-visible{outline:2px solid #181515;outline-offset:-2px}
@media(max-width:880px){.fin-tb{position:static;margin:clamp(44px,7vw,64px) auto 0;width:min(340px,100%)}.fin{padding-bottom:clamp(70px,9vw,110px)}}

/* THE PARTNER GLOBE - drag-to-spin dotted globe (canvas swaps in over the
   static SVG at runtime; SVG remains the no-JS baseline) */
.foot-globe{position:relative}
.foot-globe.fg-live{width:clamp(240px,26vw,330px)}
.foot-globe.fg-live svg{display:none}
.foot-globe canvas{display:block;width:100%;height:auto;cursor:grab;touch-action:pan-y}
.foot-globe canvas.fg-drag{cursor:grabbing}
.globe-chip{position:absolute;z-index:2;pointer-events:none;font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:7px 11px;border:1px solid rgba(24,21,21,.3);border-radius:8px;background:#F6F6F6;color:#231F20;opacity:0;transform:translate(-50%,calc(-100% - 12px));transition:opacity var(--dur-1) var(--ease);white-space:nowrap}
.globe-chip .gc-sub{display:block;color:rgba(35,31,32,.55);letter-spacing:.12em;font-size:9.5px;margin-top:2px}
.globe-chip.on{opacity:1}
:root[data-theme="dark"] .globe-chip{background:#1B1817;border-color:rgba(246,246,246,.28);color:#F6F6F6}
:root[data-theme="dark"] .globe-chip .gc-sub{color:rgba(246,246,246,.55)}
@media(prefers-reduced-motion:reduce){.globe-chip{transition:none}}

/* PARTNER TIME TICKER - a sliding bar along the footer's top edge: live
   times + dates for every partner base, lapping continuously; hover pauses
   the slide (and turns the globe to that city). Built by JS. */
.foot-ticker{position:relative;z-index:1;overflow:hidden;background:#F6F6F6;border-bottom:1px solid rgba(24,21,21,.16)}
.ftk-track{display:inline-flex;white-space:nowrap;will-change:transform;animation:ftk-slide 46s linear infinite}
.foot-ticker:hover .ftk-track,.foot-ticker:focus-within .ftk-track{animation-play-state:paused}
.ftk-set{display:inline-flex}
.ftk-cell{display:inline-flex;align-items:baseline;gap:9px;padding:13px clamp(28px,4vw,60px);font-family:var(--font-mono)}
.ftk-cell:focus-visible{outline:2px solid #181515;outline-offset:-3px;border-radius:4px}
.fc-dot{width:5px;height:5px;background:#365568;align-self:center}
.ftk-name{font-size:10.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:rgba(35,31,32,.6)}
.ftk-time{font-size:13px;font-weight:600;color:#231F20;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.ftk-zone{font-size:9.5px;letter-spacing:.1em;color:rgba(35,31,32,.6)}
.ftk-date{font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:rgba(35,31,32,.62)}
.ftk-cell:hover .ftk-name{color:#365568}
@keyframes ftk-slide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ftk-track{animation:none}}
:root[data-theme="dark"] .foot-ticker{background:#1B1817;border-bottom-color:rgba(255,255,255,.14)}
:root[data-theme="dark"] .ftk-cell:focus-visible{outline-color:#F6F6F6}
:root[data-theme="dark"] .fc-dot{background:#8CB1CE}
:root[data-theme="dark"] .ftk-name{color:rgba(246,246,246,.6)}
:root[data-theme="dark"] .ftk-time{color:#F6F6F6}
:root[data-theme="dark"] .ftk-zone{color:rgba(246,246,246,.6)}
:root[data-theme="dark"] .ftk-date{color:rgba(246,246,246,.62)}
:root[data-theme="dark"] .ftk-cell:hover .ftk-name{color:#8CB1CE}

/* Privacy page prose + footer legal links */
.privacy-prose{max-width:66ch}
.privacy-prose h2{font-size:clamp(21px,2.2vw,28px);letter-spacing:-.02em;margin:34px 0 10px}
.privacy-prose h2:first-child{margin-top:0}
.privacy-prose p{margin:0 0 14px;color:var(--body)}
.privacy-prose ul{margin:0 0 14px;padding-left:20px;color:var(--body)}
.privacy-prose li{margin-bottom:7px}
.privacy-prose a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.privacy-issued{font-family:var(--font-mono);font-size:12px;letter-spacing:.06em;color:var(--muted);margin-top:30px}
.foot-bottom a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.foot-bottom a:hover{color:#181515}
:root[data-theme="dark"] .foot-bottom a:hover{color:#F6F6F6}
.form-fineprint{font-size:12.5px;color:var(--muted);margin-top:12px;max-width:52ch}
.form-fineprint a{color:inherit;text-decoration:underline;text-underline-offset:3px}

/* watermark digits render as pseudo-content: pure decoration, exempt from text-contrast scans */
.pb-numeral::before{content:attr(data-n)}

/* stripe echoes render as pseudo-content (decorative repetition, exempt from text scans) */
.st-item.st-echo::before{content:attr(data-t)}
.promo-band .promo-line{margin:0;font-size:clamp(18px,2.2vw,26px);font-weight:600;letter-spacing:-.01em;line-height:1.4;max-width:34ch}

/* ============================================================
   THE STACK - the operating system as a slowly orbiting six-tier
   diagram (the-system.html). Mono system throughout; the electric
   voice is spent once, on the Core AI tools tier. The stage is a
   JS-built enhancement; .stack-key below it is the real content.
   ============================================================ */
.stack-lede{max-width:60ch;color:var(--body);font-size:clamp(16px,1.5vw,18px);margin:14px 0 0}
   /* phones read the layer breakdown, which is the content anyway */
/* the layer breakdown - the accessible record */
.stack-key{list-style:none;margin:clamp(26px,4vw,44px) 0 0;padding:0;border-top:1px solid var(--line)}
.sk-layer{padding:clamp(18px,2.4vw,26px) 0;border-bottom:1px solid var(--line);display:grid;
  grid-template-columns:minmax(200px,1fr) minmax(0,2.2fr);gap:clamp(14px,3vw,40px);align-items:start}
.sk-lead{display:flex;flex-direction:column;gap:5px}
.sk-n{font-family:var(--font-mono);font-size:10.5px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--navy)}
.sk-layer h3{margin:0;font-size:clamp(19px,2vw,24px);letter-spacing:-.02em}
.sk-desc{margin:0 0 12px;color:var(--body);font-size:14.5px;line-height:1.55;max-width:52ch}
.sk-items{list-style:none;display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:0}
.sk-items li{font-family:var(--font-mono);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--body);
  border:1px solid var(--line);border-radius:20px;padding:4px 11px;display:inline-flex;align-items:center;gap:6px}
.sk-p{font-size:9px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
@media(max-width:820px){.sk-layer{grid-template-columns:1fr;gap:10px}}

/* THE RIBBON - the operating system in the belief figure: one ribbon rising
   from the culture foundation to the experience layer, six annotated
   stations, a charge travelling up it. The canvas is decorative; the layer
   breakdown further down the page is the content of record. */
.sys-fig{position:relative;background:var(--paper)}
.sys-fig::after{display:none}
.sys-ribbon{position:absolute;inset:0;width:100%;height:100%;display:block}

/* Sub-pages keep the footer's information and drop its features: the globe and
   the partner-time ticker are homepage furniture (owner-directed 2026-08-05). */
body:not(.is-home) .foot-globe{display:none}
body:not(.is-home) .foot-top{grid-template-columns:minmax(200px,1fr) auto}

/* Contact tabs: each topic is its own message with its own send button, so a
   visitor deals with one thing at a time instead of composing a single long
   note. Hidden until the module runs, since the tabs do nothing without it. */
.cc-tabs{display:none}
html.js-tabs .cc-tabs{display:block}
.cc-tabs-lead{margin:0 0 9px;font-size:13.5px;font-weight:600;color:var(--ink)}
.cc-tablist{display:flex;flex-wrap:wrap;gap:2px;border-bottom:1px solid var(--line)}
.cc-tab{display:inline-flex;align-items:center;gap:7px;font:inherit;font-size:12px;font-weight:600;letter-spacing:.02em;color:var(--muted);background:none;border:0;border-bottom:2px solid transparent;margin-bottom:-1px;padding:9px 12px;cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.cc-tab:hover{color:var(--ink)}
.cc-tab:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.cc-tab[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--navy)}
.cc-tab-state{display:grid;place-items:center;flex:none;width:15px;height:15px;border:1px solid var(--line);border-radius:50%;font-size:9px;line-height:1;color:var(--muted)}
.cc-tab[data-state="sent"] .cc-tab-state{background:var(--navy);border-color:var(--navy);color:var(--paper)}
.cc-tab[data-state="skipped"]{color:var(--muted)}
.cc-tab[data-state="skipped"] .cc-tab-state{opacity:.55}
/* Swapping tabs changes nothing but the words: opacity only, never position. */
.cc-panel{transition:opacity .16s var(--ease)}
.cc-panel.is-swapping{opacity:0}
/* A fixed height so moving between tabs cannot nudge the page about. */
html.js-tabs .cc-field textarea[name=message]{height:248px;resize:vertical}
html.js-tabs .cc-field textarea[name=message][readonly]{opacity:.62;cursor:default}
/* The status line always holds two lines of room, so a message appearing or
   changing never nudges the page. */
.cc-gate{margin:9px 0 0;min-height:2.9em;font-size:12.5px;line-height:1.45;color:var(--navy)}
.cc-gate[data-tone="warn"]{color:var(--ink)}
.cc-tab-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* The per-tab button only gathers a topic up; the one filled button below
   sends the lot, so the visitor can tell the two apart at a glance. */
.cc-add{display:inline-flex;align-items:center;font:inherit;font-size:12.5px;font-weight:700;letter-spacing:.02em;color:var(--ink);background:transparent;border:1px solid var(--ink);border-radius:999px;padding:10px 18px;cursor:pointer;transition:opacity var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
.cc-add:hover{opacity:.72}
.cc-add:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cc-add[disabled]{opacity:.45;cursor:default;border-color:var(--line)}
.cc-outbox{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
/* two lines held open, so the summary changing never nudges the page */
.cc-outbox-note{display:none;flex:1 1 210px;margin:0;min-height:2.9em;font-size:12.5px;line-height:1.45;color:var(--muted)}
html.js-tabs .cc-outbox-note{display:block}
.cc-outbox .btn-primary{border:0;cursor:pointer;font:inherit;font-weight:700}
.cc-outbox .btn-primary[disabled]{opacity:.45;cursor:default}
.cc-tab-actions{display:none}
html.js-tabs .cc-tab-actions{display:flex}
.cc-skip{display:none;font:inherit;font-size:12.5px;font-weight:600;color:var(--muted);background:none;border:0;border-bottom:1px solid var(--line);padding:4px 1px;cursor:pointer;transition:color var(--dur-1) var(--ease),border-color var(--dur-1) var(--ease)}
html.js-tabs .cc-skip{display:inline-block}
.cc-skip:hover{color:var(--ink);border-bottom-color:var(--ink)}
.cc-skip:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.cc-skip[hidden]{display:none}
/* Stacked on a phone: full width, left aligned with the fields above them.
   The quiet skip button gets a thumb-sized target, its rule moving onto the
   text itself so the extra padding does not push a border away from it. */
@media (max-width:760px){
  .cc-tab{flex:1 1 auto;justify-content:flex-start;padding:11px 12px}
  .cc-skip{padding:12px 2px;border-bottom:0;text-decoration:underline;text-underline-offset:3px}
}
@media (prefers-reduced-motion:reduce){.cc-tab,.cc-skip,.cc-panel{transition:none}}