/* ============================================================================
   site.css : the styles every page shares, served once at /site.css and cached.

   What is here names no page. What belongs to one page lives in that page's own
   file under pages/, inside the page's #page-<name> wrapper, so it cannot reach
   another page. Every page-scoped selector carries that id, so it outranks every
   rule here whatever the order, which is why this file can load first.

   Split out of the one-document index.html on 23 Sep 2026 in source order; the
   "from <style id=...>" markers say which of its style blocks each run came from.
   ========================================================================== */

/* ==================== from <style id="main"> ==================== */
/* ===== SHELL ===== */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --cream:#f3f5f7;--tc:#f06d59;--tc-dark:#eb3d23;--tc-light:#f59f92;
  --forest:#1a1a1a;--white:#ffffff;--black:#000000;
  --silver:rgba(243,245,247,.58);--silver-faint:rgba(243,245,247,.30);
  --txt:rgba(243,245,247,.95);--txt-2:rgba(243,245,247,.7);--txt-3:rgba(243,245,247,.46);
  --ease:cubic-bezier(.16,1,.3,1);--ease-struct:cubic-bezier(.4,0,.2,1);
}
html{color-scheme:dark;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
body{background:#000000;color:var(--txt-2);font-family:'Open Sans',system-ui,sans-serif;overflow-x:hidden}

/* ===== VIEW SYSTEM  (mechanism lifted from the reference mini-site) ===== */
.page{opacity:0;pointer-events:none;position:absolute;top:0;left:0;width:100%;min-height:100vh;display:none}
.page.is-active{opacity:1;pointer-events:auto;position:relative;display:block}
@keyframes gwRead{
  0%{opacity:var(--rest,.15);color:var(--txt-3);text-shadow:none}
  52%{opacity:1;color:var(--lit,#ffffff);text-shadow:0 0 24px rgba(255,255,255,.4)}
  100%{opacity:1;color:var(--lit,#ffffff);text-shadow:none}}
@keyframes heroDiag{
  0%{opacity:0;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  31%{opacity:1;animation-timing-function:linear}
  67%{opacity:1;animation-timing-function:cubic-bezier(.45,0,.55,1)}
  97%{opacity:0}
  100%{opacity:0}
}
@keyframes heroCentreIn{
  0%{opacity:0}
  100%{opacity:1}
}
@keyframes fadeIn{to{opacity:1}}
@keyframes u{to{opacity:1;transform:translateY(0)}}
@keyframes arrowPulse{0%,100%{opacity:.15}50%{opacity:.4}}
@keyframes gentlePulse{0%,100%{opacity:.7;height:40px}50%{opacity:1;height:44px}}
@keyframes convPulse{0%,100%{box-shadow:0 0 24px rgba(255,255,255,.35),0 0 48px rgba(243,245,247,.2),0 0 80px rgba(243,245,247,.1)}50%{box-shadow:0 0 36px rgba(255,255,255,.45),0 0 64px rgba(243,245,247,.3),0 0 100px rgba(243,245,247,.14)}}
@keyframes convSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@keyframes convGH{0%,100%{box-shadow:0 0 16px rgba(245,165,152,.25)}50%{box-shadow:0 0 28px rgba(245,165,152,.5),0 0 56px rgba(245,165,152,.12)}}
@keyframes convGA{0%,100%{box-shadow:0 0 16px rgba(180,185,200,.2)}50%{box-shadow:0 0 28px rgba(180,185,200,.4),0 0 56px rgba(180,185,200,.08)}}
@keyframes convPR{0%{width:44px;height:44px;opacity:.6}60%{opacity:.2}100%{width:var(--pr-target,160px);height:var(--pr-target,160px);opacity:0}}
@keyframes theatreGlow{0%,100%{opacity:.6;transform:translateX(-50%) scale(1)}50%{opacity:1;transform:translateX(-50%) scale(1.05)}}
@keyframes corePulse{0%,100%{transform:scale(1);opacity:.88}50%{transform:scale(1.13);opacity:1}}
@keyframes pulseTravel{0%{stroke-dashoffset:0;opacity:0}12%{opacity:.95}80%{opacity:.95}100%{stroke-dashoffset:-94;opacity:0}}
@keyframes litHead{
  0%{opacity:.34;text-shadow:none;}
  45%{opacity:1;text-shadow:0 0 26px rgba(255,255,255,.3);}
  100%{opacity:1;text-shadow:none;}}
.nav-link.is-current,.nav-panel-link.is-current{cursor:default}

/* ===== THE VERTICAL CONNECTORS BREATHE ON COLLABORATION TOO =====
   THE RULE IS THE DEVICE, NOT THE PAGE: wherever a vertical hairline marks a join and
   says "there is more below", it breathes. Approach has twelve of them; Collaboration
   had four sitting static. Founders is left alone deliberately — its rules are
   HORIZONTAL, framing a note rather than connecting sections, and a horizontal line
   that grew would read as a glitch.

   Same 3s ease-in-out cycle and same ~10% growth as Approach, but driven by scaleY
   rather than by animating height: these two have their own clamped sizes and one
   carries a translateX, so scaling from the centre grows them symmetrically without
   touching layout. Reduced-motion is already handled by the page's own blanket rule. */
@keyframes fwpJoinBreathe{
  0%,100%{opacity:.72;transform:scaleY(1)}
  50%{opacity:1;transform:scaleY(1.1)}}
@keyframes fwpBridgeBreathe{
  0%,100%{opacity:.5;transform:translateX(-50%) scaleY(1)}
  50%{opacity:.78;transform:translateX(-50%) scaleY(1.1)}}



/* =====================================================================
   v28 — 4 September 2026
   THE BOUNCE-TO-GATEWAY BUG.
   Scrolling on a Mac trackpad with any sideways component is read by Chrome
   as the Back gesture. That navigated history, fired popstate, and the router
   read the resulting empty hash as "go to the gateway" — so changing scroll
   direction threw the reader out of the page. The router no longer acts on an
   empty hash; this stops the gesture from navigating at all.
   Shell only: overscroll-behavior on a wrapper div does nothing for the
   document, and the overflow family must not migrate onto the .page wrappers.
   ===================================================================== */
html,body{overscroll-behavior-x:none}

/* ==================== from <style id="fwp-mark-styles"> ==================== */
/* ===== FWP GLOBE MARK + SERIF WORDMARK (nav) ===== */
.logo{display:flex;align-items:center;gap:12px;white-space:nowrap;text-decoration:none}
.logo .fwp-mark{width:36px;height:36px;border-radius:50%;flex:none;display:block}
.logo .dot{display:none}
.logo .fw,.logo .fp{font-family:'Unbounded',sans-serif;font-weight:600;letter-spacing:-.01em;white-space:nowrap}
.logo .fp{color:var(--tc)}
@media (max-width:640px){
  .logo{gap:10px}
  .logo .fwp-mark{width:30px;height:30px}
}

/* Mobile fixes: full wordmark in the header, centred footer lockup */
.cta-short{display:none}

/* Gateway closing line on phones (the .m-br break only exists on phones) */
.m-br{display:none}
/* Gateway closing line on phones: let each sentence break as a balanced pair rather than orphaning one word */
@media (max-width:600px){
  .m-br{display:inline}
}
/* Contact modal: the [hidden] attribute must beat the flex layout, otherwise the form stays visible after sending */
.contact-body[hidden],.contact-success[hidden]{display:none!important}

/* Mobile readability: floor the smallest labels, and make the modal close a proper tap target */
@media (max-width:640px){
  .contact-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center;top:8px!important;right:8px!important}
  .contact-label{font-size:12px!important}
}

.nav-mask{position:fixed;top:0;left:0;right:0;height:88px;z-index:99;
  pointer-events:none}
/* DEFECTS.md D6. The rule above had no closing brace and the comment below it had
   lost its opening, so everything from here to the end of its style block was read
   as part of .nav-mask and thrown away: the browser has never applied it. Kept as
   text, not as CSS, because switching it on changes the Founders and Partnerships
   wordmark rule (colour, margins, hidden under 760px), and that is a design
   decision rather than a repair.

   Partnerships and Founders now carry it too, matching
   on desktop and hidden on mobile exactly as Our Approach is.
   =====================================================================
#page-partnerships .logo .rule,#page-founders .logo .rule{display:block;flex:none;height:1px;
  min-height:1px;width:100%;min-width:100%;background:#4a4f57;margin:5px 0 4px}
@media(max-width:760px){
  #page-partnerships .logo .rule,#page-founders .logo .rule{display:none}
}
*/

/* ==================== from <style id="fwp-theme"> ==================== */
/* ============================================================
   FWP THEME — Option C  (charcoal field · coral light · Unbounded)
   One field. One light source. Sections paint nothing themselves.
   ============================================================ */
:root{
  --field:#000000;            /* the black. everything sits on this */
  --ink:#f2f5f7;              /* primary text */
  --ink-2:#a9acaf;            /* secondary text */
  --coral:#eb3d23;            /* the accent: vibrant orange */
  --coral-rgb:235,61,35;
  --coral-2:#f59f92;          /* secondary, lighter: eyebrows and framing lines */
  --mark:#f06d59;             /* wordmark + logo mark: softer than the accent, so the
                                 header sits back and the orange stays for actions */
  --glass:rgba(255,255,255,.035);
  --glass-line:rgba(255,255,255,.08);
}

/* ---- field -------------------------------------------------- */
html,body{background:var(--field)}
.page{background:
  radial-gradient(70% 40% at 50% 0%,rgba(var(--coral-rgb),.09),transparent 70%),
  var(--field)}

.nav-mask{background:linear-gradient(var(--field) 0,var(--field) 74px,transparent)}

/* ---- light: one source, fixed to the viewport, travelling with the scroll -------
   .fwp-light is a single radial behind every page. JS moves its origin from one side
   of the screen to the other as you scroll, so the light crosses the page with the reader
   instead of restarting in every section. Sections paint nothing. */
.fwp-light{position:fixed;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(48% 62% at var(--lx,-10%) var(--ly,50%),
    rgba(var(--coral-rgb),.20),rgba(var(--coral-rgb),.07) 42%,transparent 72%);
  transition:none}
.fwp-dust{position:fixed;inset:0;z-index:0;pointer-events:none;opacity:.9}
.page{background:transparent;position:relative;z-index:1}

/* ---- type ---------------------------------------------------- */
/* Unbounded runs ~30% wider than the serif it replaced: sizes come down, tracking tightens,
   forced line breaks are released so the browser sets the lines, and words never hyphenate */
h1,.hero-line{font-weight:700;font-size:clamp(24px,3.2vw,42px);line-height:1.12;letter-spacing:-.025em}
h2,.h2,.approach-h2,.theatre-h2,.contact-title{font-weight:600;font-size:clamp(20px,2.3vw,30px);line-height:1.2;letter-spacing:-.02em}
h3,.opp-head,.method-name{font-weight:600;font-size:clamp(17px,1.7vw,22px);line-height:1.25}
.stat-num{font-size:clamp(26px,2.9vw,38px)}
h1,h2,h3,.h2,.hero-line,.theatre-key,.outcome-line,.challenge-line,.conv-thesis,.bridge{hyphens:none;overflow-wrap:normal;word-break:keep-all;text-wrap:balance}
p{text-wrap:pretty}
em{color:var(--coral)}

/* ---- wordmark: caps, flat colour, the mark's glow ------------ */
.logo,.logo .name,.footer-brand{font-family:'Unbounded',sans-serif;font-weight:700}
/* one lockup: "Pathways" in the accent on every page and on the gateway; the rule always shows;
   the strapline is fitted to the wordmark's width by the site's own script and sits in silver */
.logo .fp,.footer-brand{color:var(--mark)}
.logo .rule,
.footer-brand .rule{display:block;height:1px;background:rgba(197,203,208,.35);margin:4px 0 3px}
.logo small{display:block;width:0;min-width:100%;font-family:'Open Sans',sans-serif;font-weight:500;font-size:8.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#c5cbd0;text-align:center;white-space:nowrap}
/* footer carries the same lockup, one size up */
.footer-brand{width:max-content;font-size:13px}
.footer-brand .name{font-family:'Unbounded',sans-serif;font-weight:700;font-size:13px;text-transform:uppercase;letter-spacing:.08em;line-height:1.3;white-space:nowrap}
.footer-brand .fw{color:var(--ink)}
.footer-brand .fp{color:var(--mark)}
.footer-brand small{display:block;width:0;min-width:100%;font-family:'Open Sans',sans-serif;font-weight:500;font-size:8.5px;line-height:1;letter-spacing:.16em;text-transform:uppercase;color:#c5cbd0;text-align:center;white-space:nowrap}
.logo .name,.footer-brand{text-transform:uppercase;letter-spacing:.08em;font-size:clamp(9px,.7vw,11px);line-height:1.2;white-space:nowrap}
.logo small{text-transform:uppercase}
.logo .brand{width:max-content}
.logo .fwp-mark{width:30px;height:30px}
.logo .fw{color:var(--ink);text-shadow:0 0 18px rgba(var(--coral-rgb),.41)}
.logo .fp,.footer-brand{color:var(--coral);text-shadow:0 0 14px rgba(var(--coral-rgb),.50),0 0 34px rgba(var(--coral-rgb),.50)}
.logo small{font-family:'Open Sans',sans-serif}
.logo .dot{box-shadow:0 0 12px rgba(240,109,89,.6)}

/* ---- one orange ---------------------------------------------------
   coral is the accent. eyebrows use it at 80% so they sit behind headings.
   the old three-shade set (tc / tc-light / tc-dark) collapses onto it. */
:root{--tc:var(--coral);--tc-light:var(--coral-2);--tc-dark:var(--coral)}
/* ---- eyebrows ------------------------------------------------ */
.eyebrow,[class*="eyebrow"]{font-family:'Open Sans',sans-serif;font-size:11px;letter-spacing:.16em;font-weight:600;color:var(--coral-2);opacity:1}

/* ---- type scale: one scale for every page, page-prefixed so it beats the per-page rules --
   display  = section titles          (h2 family)
   lead     = set-piece statements    (theatre-key, negation, thesis, built, outcome)
   body     = paragraphs
   Measure: headings 24-30ch, leads 34-44ch, body 55-62ch. Headings balance, paragraphs "pretty". */
:root{--t-display:clamp(20px,2.3vw,30px);--t-lead:clamp(16px,1.6vw,21px);--t-body:clamp(15px,1.2vw,17px)}
/* mobile: headings run the full column, leads and body take the width */
@media (max-width:640px){
  :root{--t-display:clamp(21px,6.2vw,26px);--t-lead:clamp(16px,4.4vw,18px);--t-body:15px}
}

/* ---- motion ---------------------------------------------------------
   Infinite pulse animations on bridge lines and orbit glows added a low-level
   shimmer across the page. Lines are static; the diagram keeps only its spin. */
/* the pulses are declared inline on the elements, so the keyframes themselves are
   redefined here to hold still — one place, no !important, nothing else changes */
@keyframes gentlePulse{0%,100%{opacity:.85}}
@keyframes convGH{0%,100%{box-shadow:0 0 18px rgba(var(--coral-rgb),.22)}}
@keyframes convGA{0%,100%{box-shadow:0 0 18px rgba(180,185,200,.18)}}
@keyframes convPulse{0%,100%{box-shadow:0 0 24px rgba(255,255,255,.25)}}
@keyframes convPR{0%,100%{opacity:0}}
@keyframes corePulse{0%,100%{opacity:.9}}
@keyframes theatreGlow{0%,100%{opacity:1}}
@keyframes pulseTravel{0%,100%{opacity:.6}}
@keyframes convSpin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}
}
/* Surfaces: thinner glass so the dust reads through the panels */
.stat-item,.qt-goldcard,.method-lead-card,.theatre-card,.stat-meta,.note-panel,.founder-card,.spec-block,.pf-card{background:rgba(255,255,255,.022)}
/* Nav mask hides with the nav */
.nav-mask{transition:opacity .6s var(--ease)}
.nav-mask.is-hidden{opacity:0}

/* ---- feedback 16 Sep ---------------------------------------- */
/* Evidence: quieter headline numbers, balanced stat copy */
.stat-num{font-size:clamp(23px,2.4vw,32px)}
.stat-text{text-wrap:balance}

/* ---- buttons ------------------------------------------------- */
.btn,.btn-primary,.btn-ghost,.nav-cta,.cta-short,.cta-long{border-radius:999px;font-weight:700}
.btn-primary,.nav-cta{background:var(--coral);color:#fff;border-color:var(--coral)}
.btn-primary:hover,.nav-cta:hover{background:#f04f36}

/* ==================== from <style id="fwp-news"> ==================== */
@keyframes npPulse{0%{box-shadow:0 0 0 0 rgba(var(--coral-rgb),.45)}70%{box-shadow:0 0 0 8px rgba(var(--coral-rgb),0)}100%{box-shadow:0 0 0 0 rgba(var(--coral-rgb),0)}}
@keyframes npFade{from{opacity:0}to{opacity:1}}
@keyframes npRise{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}

/* ==================== from <style id="fwp-mobile-nav"> ==================== */
/* A no-break phrase in the Challenge headings is wider than a 360px phone and
   pushes the whole homepage 3px sideways, which shows as a horizontal scroll.
   Below 400px the nicety yields rather than the page.
   The first attempt at this used a bare .nbr and lost to a page-scoped rule, so it
   only appeared fixed against whichever caption happened to be on screen. Scoped
   per page, and last in the cascade, so it actually wins. */
@media(max-width:400px){
  .nbr{white-space:normal}
}
@media(max-width:560px){
  .np-panel-cta{margin-top:6px;border-top:1px solid rgba(255,255,255,.10);color:var(--coral-2)}
}

/* ==================== the fade between pages ==================== */
/* Until 23 Sep 2026 the sections were one document and the router faded between
   them: the page went out over 520ms, the next came in over 980ms, both on
   cubic-bezier(.33,0,.2,1). They are real pages now, so the browser's own
   cross-document view transition does it, with the same two timings as a root
   cross-fade. A browser without view transitions simply loads the next page, and
   under reduced motion nothing opts in, so no transition runs at all. Every page
   that loads this file opts in; both ends of a navigation have to. */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
}
::view-transition-old(root){animation-duration:.52s;animation-timing-function:cubic-bezier(.33,0,.2,1)}
::view-transition-new(root){animation-duration:.98s;animation-timing-function:cubic-bezier(.33,0,.2,1)}