/* =============================================================================
   Aidgency website, Broadsheet. Mobile build, matched to Marli's
   "Broadsheet Final Mobile" Figma frames (390 px wide).

   UNITS: 1rem = 10 design px. The root size scales with the viewport, so the
   390 px design holds its exact composition on every phone width (a 375 px
   phone shows it at 96%, a 430 px phone at 110%). Every size below is the
   Figma value divided by 10: 1.3rem = 13 px, 5.6rem = 56 px.

   TYPE: four sizes on every page (page title, section heading, lead, body),
   set as tokens on :root (--fs-title and the rest). wide.css redefines the
   tokens, so the sizes change in one place. See "The type scale" below.

   COMPOSITIONS: the argument cards and the Engine wheel are written in --u
   instead of rem. On phones --u is 1rem, so they are exactly the Figma
   values; wide.css enlarges each one as a whole by redefining --u.

   TABLET AND DESKTOP live in wide.css, which only loads from 600 px.
   Between 431 and 599 px this phone layout keeps scaling up.
   ========================================================================== */

@font-face {
  font-family: "Raleway";
  src: url("../fonts/raleway-var-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* The ten figures again as a fixed bold cut, for the big Home 1 2 3. Windows
   works out a variable font's bold outline with rounding that leaves the stem
   of the 1 a fraction off vertical, and at this size that drew as a step in
   the stem and a wobble along its foot. This file has the bold outline worked
   out once, with every edge true. Same shapes and spacing as Raleway (a subset
   of the file above, renamed as the licence asks, hinting removed). */
@font-face {
  font-family: "Broadsheet Figures";
  src: url("../fonts/figures-unhinted.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000000;
  --ink: #0a0a0a;
  --paper: #ffffff;
  --mist: #f2f2f2;          /* grey section background */
  --rule: #dddddd;          /* 1px section dividers */
  --rule-dark: #3d3d3d;     /* divider above black blocks */
  --brief: #2aabe2;         /* engine stage colours, from the pitch deck */
  --build: #f7931e;
  --boost: #8bc63f;
  --font: "Raleway", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* arrivals: fast start, long settle */
  --screen: 100vh;          /* one phone screen; svh = the height with the browser bars showing */
  --gutter: 2rem;           /* the one left/right screen margin: 20px at the 390px design width */
  --text-grey: #656565;     /* body copy grey */
  --label-grey: #999999;    /* section eyebrows */
  --u: 1rem;                /* composition unit (see COMPOSITIONS above) */
  /* The type scale (see TYPE above). Line heights are ratios, except the body's. */
  --fs-title: 3.6rem;  --lh-title: 1.1;
  --fs-head: 2.5rem;   --lh-head: 1.2;
  --fs-lead: 1.7rem;   --lh-lead: 1.5;
  --fs-body: 1.3rem;   --lh-body: 2.4rem;
}
@supports (height: 100svh) { :root { --screen: 100svh; } }

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

html {
  font-size: calc(min(100vw, 600px) / 39);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  background: var(--paper);
  overflow-x: clip;  /* stops body's clip propagating to the viewport, so body clips bleeding type itself */
}

body {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 39rem;
  min-height: 100vh;
  background: var(--paper);
  color: var(--black);
  font-family: var(--font);
  font-size: 1.3rem;
  line-height: 1.5;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "liga" 1, "kern" 1;
  overflow-x: clip;
}

body.menu-open { overflow: hidden; }
::selection { background: var(--black); color: var(--paper); }
a, button { -webkit-tap-highlight-color: transparent; }

h1, h2, h3, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; }
a { color: inherit; text-decoration: none; }
strong, b { font-weight: inherit; }
/* Their italics. The font file has no italic, so the browser slants these few words. */
em { font-style: italic; font-synthesis: style; }
.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; }

/* Keyboard users: first Tab shows a "Skip to content" link above the header. */
.skip-link {
  position: absolute; left: var(--gutter); top: 1rem; z-index: 60;
  padding: 1.2rem 1.6rem; background: var(--black); color: var(--paper);
  font-weight: 600; font-size: 1.3rem; line-height: 1.3rem;
  transform: translateY(calc(-100% - 2rem));
}
.skip-link:focus { transform: none; }

/* Accent colours used inside words ("Brief." with a blue B and full stop) */
.c-brief { color: var(--brief); }
.c-build { color: var(--build); }
.c-boost { color: var(--boost); }

/* ---- The type scale ------------------------------------------------------ */
/* Four sizes and no more (Brian and Jennifer's final notes, 2026-10-20): the
   page title, a section heading, a lead and the body, the same on every page.
   Nothing is bigger than the page title. One style per role: the lead is
   always bold and black, and opens a section (straight after its heading)
   or stands alone; anything after it is body copy, grey and regular. A name in body copy (a quote's source,
   a contact, a portrait caption) is bold and black, the rest stays grey. The Engine wheel on How It Works is
   the one exception and keeps its own type. */
.page-title {
  font-weight: 800; font-size: var(--fs-title); line-height: var(--lh-title);
  letter-spacing: -0.011em; text-transform: uppercase;
}
.h2 {
  font-weight: 800; font-size: var(--fs-head); line-height: var(--lh-head);
  letter-spacing: -0.01em; text-transform: uppercase; text-wrap: balance;
}
.lead { font-weight: 700; font-size: var(--fs-lead); line-height: var(--lh-lead); text-wrap: pretty; }
.body-copy { font-weight: 400; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-grey); }
.body-copy strong { font-weight: 700; color: var(--ink); }

/* ---- Buttons ------------------------------------------------------------ */
/* One button everywhere: solid black, white type, and the same hover. */
.btn {
  display: flex; width: max-content; align-items: flex-start;
  height: 3.741rem;
  padding: 1.205rem 2.25rem 0;
  font-family: var(--font); font-weight: 600; font-size: 1.3rem; line-height: 1.3rem;
  letter-spacing: 0.026rem; white-space: nowrap;
  border: 0; border-radius: 0; cursor: pointer;
  background: var(--black); color: var(--paper);
  transition: background-color 0.2s var(--ease);
}
@media (hover: hover) { .btn:hover { background: #333333; } }
.btn:active { background: #3d3d3d; transition-duration: 0.08s; }
.btn:focus-visible, .menu-toggle:focus-visible, a:focus-visible { outline: 0.2rem solid var(--brief); outline-offset: 0.3rem; }

/* ---- Header ------------------------------------------------------------- */
.site-header {
  position: relative; z-index: 30;
  height: 6.6rem;
  border-bottom: 0.1rem solid var(--rule);
  background: var(--paper); color: var(--black);
}
/* The Aidgency logo (assets/img/aidgency-logo.svg, the paths of the brand file).
   Its capitals are centred on the bar; the g and y hang below them. */
.brand { position: absolute; left: calc(var(--gutter) - 0.004rem); top: 2.58rem; line-height: 0; }
.brand img { width: auto; height: 1.83rem; }
.site-header--dark .brand img { filter: invert(1); }   /* white on the black Thank You page */
.site-nav { display: none; }   /* desktop navigation bar, shown by wide.css */
.menu-toggle {
  position: absolute; right: calc(var(--gutter) - 1rem); top: 1.1rem;
  width: 4.4rem; height: 4.4rem; padding: 0; border: 0;
  background: none; color: inherit; cursor: pointer;
}
.menu-toggle span {
  position: absolute; left: 1rem; width: 2.4rem; height: 0.15rem;
  background: currentColor;
}
.menu-toggle span:first-child { top: 1.75rem; }
.menu-toggle span:last-child { top: 2.5rem; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 2.125rem; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 2.125rem; transform: rotate(-45deg); }

/* dark header (Thank You page: logo and burger sit on the black hero) */
.site-header--dark { position: absolute; left: 0; right: 0; top: 0; background: transparent; color: var(--paper); border-bottom: 0; }

/* Phones and tablets: the header stays within reach. It slides away as the
   reader scrolls down and comes back the moment they scroll up (site.js sets
   .is-away), so the menu never needs a trip back to the top. At the top of the
   page it sits exactly where it always did. Desktop has its own fixed header
   (wide.css). Without the script the header stays in the page as before. */
@media (max-width: 1099.98px) {
  .js .site-header { position: sticky; top: 0; transition: transform 0.3s var(--ease-out); }
  .js .site-header--dark { position: fixed; background: var(--black); }   /* black on the black hero: no change at the top */
  .js .site-header.is-away { transform: translateY(-102%); transition: transform 0.22s cubic-bezier(0.4, 0, 1, 1); }
  .js .site-header:focus-within { transform: none; }   /* a keyboard user tabbing into it always sees it */
}

/* ---- Menu overlay (not in the Figma frames; built in the Broadsheet language) */
.menu {
  position: fixed; top: 0; bottom: 0; left: 50%; z-index: 40;
  width: 100%; max-width: 39rem; transform: translateX(-50%);
  background: var(--paper); color: var(--black);
  padding: 0 var(--gutter) 4rem;
  display: flex; flex-direction: column;
  overflow-y: auto;
  visibility: hidden;
}
.menu.is-open { visibility: visible; }
.menu-bar { position: relative; flex: none; height: 6.6rem; margin: 0 calc(-1 * var(--gutter)) 1.4rem; border-bottom: 0.1rem solid var(--rule); }
/* The bar's icon is the burger while closed, so it turns into the X as the menu opens. */
.menu.is-open .menu-bar .menu-toggle span:first-child { top: 2.125rem; transform: rotate(45deg); }
.menu.is-open .menu-bar .menu-toggle span:last-child { top: 2.125rem; transform: rotate(-45deg); }
.menu-list a {
  display: block; padding: 1.6rem 0 1.5rem;
  border-bottom: 0.1rem solid var(--rule);
  font-weight: 800; font-size: var(--fs-head); line-height: var(--lh-head);
  letter-spacing: -0.01em; text-transform: uppercase; color: var(--black);
}
.menu-list a[aria-current="page"] { color: var(--label-grey); }
.menu-foot { margin-top: auto; font-size: 1.3rem; line-height: 2.2rem; color: #656565; }
.menu-foot a { text-decoration: underline; text-underline-offset: 0.3rem; text-decoration-thickness: 0.1rem; }

/* ---- Footer ------------------------------------------------------------- */
.site-footer {
  height: 23.6rem;
  border-top: 0.1rem solid var(--rule-dark);
  background: var(--ink); color: var(--paper);
  padding: 5.675rem var(--gutter) 0;
}
.footer-tagline { font-weight: 700; font-size: var(--fs-lead); line-height: var(--lh-lead); }
.footer-link { display: inline-block; margin-top: 2.4rem; line-height: 0; }
.footer-link svg { width: 2.4rem; height: 2.4rem; fill: currentColor; }
.footer-link:hover, .footer-link:active { opacity: 0.65; }
.footer-copy { margin-top: 2.771rem; font-size: 1.3rem; line-height: 1.8rem; color: rgba(255, 255, 255, 0.65); }

/* =============================================================================
   PAGE LAYOUT
   One left-aligned column at every width (final notes, 2026-10-20): headline,
   then copy, then button, stacked. Sections are as tall as what they hold;
   none fills the screen. .flow spaces a section's contents the same way on
   every page. Rows of images (the cards, the portraits, the logos, the report
   pages) still run side by side.
   ========================================================================== */
.flow { padding: 4.8rem var(--gutter) 5.6rem; }
.flow > * + * { margin-top: 1.6rem; }
.flow > h1 + *, .flow > .h2 + * { margin-top: 2rem; }
.flow > * + .btn { margin-top: 3.2rem; }
.flow > .btn + * { margin-top: 2.4rem; }
/* The sections that open a page sit a little closer to the header, so the
   first paragraph is on the first screen. */
.hero, .hiw-head, .val-hero, .who-hero { padding-top: 4rem; }
.val-hero { padding-bottom: 4rem; }

/* =============================================================================
   HOME
   ========================================================================== */
/* Their sentence as one title, all at the page-title size, wrapping on its own. */
/* The one section that fills the first screen: the cards only appear once
   the reader scrolls. */
.hero { min-height: calc(var(--screen) - 6.6rem); border-bottom: 0.1rem solid var(--rule); }
.hero-title { text-transform: none; letter-spacing: -0.02em; text-wrap: balance; }
.flow > .hero-lede { margin-top: 3.2rem; }

/* ---- Argument cards (horizontal swipe) ---------------------------------- */
.argument { background: var(--mist); padding: 8rem 0; }

.cards {
  display: flex; gap: calc(1.2 * var(--u));
  padding: 0 var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.cards::-webkit-scrollbar { display: none; }
.cards.is-dragging, .doc-rail.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.cards.is-dragging *, .doc-rail.is-dragging * { pointer-events: none; }

/* The cards duplicate Aidgency's originals (1200 x 1500 artwork, so 1u here is
   42.55 of its pixels): the same 4:5 shape, black to 52.4% of the height, and
   every line in one size and weight, 80px ExtraBold on 100px leading, starting
   120px in. Line breaks are set in the HTML to match. */
.card {
  flex: 0 0 calc(28.2 * var(--u)); height: calc(35.25 * var(--u));
  border: calc(0.2 * var(--u)) solid #363645; border-radius: calc(0.4 * var(--u));
  overflow: hidden; background: var(--paper);
  display: flex; flex-direction: column;
  scroll-snap-align: start;
}
.card-claim, .card-data {
  padding: 0 calc(2.62 * var(--u));
  font-weight: 800; font-size: calc(1.88 * var(--u)); line-height: calc(2.35 * var(--u));
  font-feature-settings: "liga" 0, "kern" 1;   /* the originals join no letters */
  white-space: nowrap;
}
.card-claim { flex: none; height: calc(18.271 * var(--u)); padding-top: calc(2.573 * var(--u)); background: var(--ink); color: var(--paper); }
.card-data {
  flex: 1; padding-bottom: calc(2.554 * var(--u));
  display: flex; flex-direction: column; justify-content: flex-end;
  color: var(--ink);
}

/* Card 2's table: the first row boxed and heavier, three figure columns set
   right, all measured off the original (47.7px Bold rows on a 74px pitch).
   Each row is a grid rather than a table row, because browsers round table
   rows to whole pixels and at phone size that moved the lines. */
.card-table, .card-table tbody { display: block; }
.card-table {
  width: calc(23.195 * var(--u)); margin: 0 0 calc(0.019 * var(--u)) calc(-0.047 * var(--u));
  font-weight: 700; font-size: calc(1.121 * var(--u)); line-height: calc(1.551 * var(--u));
}
.card-table tr {
  display: grid; grid-template-columns: calc(10.317 * var(--u)) calc(4.7 * var(--u)) calc(3.925 * var(--u)) calc(3.854 * var(--u));
  align-items: baseline; padding: 0 calc(0.211 * var(--u)) calc(0.188 * var(--u)) calc(0.188 * var(--u));
}
.card-table td { display: block; padding: 0; text-align: right; white-space: nowrap; }
.card-table td:first-child { text-align: left; }
.card-table tr:first-child {
  border: calc(0.094 * var(--u)) solid currentColor;
  padding: 0 calc(0.117 * var(--u)) calc(0.141 * var(--u)) calc(0.094 * var(--u));
  font-weight: 800; line-height: calc(1.645 * var(--u));
}
.card-table tr:first-child td { font-size: calc(1.128 * var(--u)); }
.card-table tr:first-child td:first-child { font-size: calc(1.269 * var(--u)); }

/* ---- Engine ------------------------------------------------------------- */
/* Three black columns: the number, the stage and what happens in it. The
   numbers are at the page-title size. On phones the block runs the full width
   of the screen and the first column's words sit on the gutter. */
.engine-group { border-top: 0.1rem solid var(--rule); }
.engine {
  display: grid; grid-template-columns: 12.3rem 13.2rem 12.1rem; column-gap: 0.7rem;
  margin-inline: calc(-1 * var(--gutter));
}
.flow > .h2 + .engine, .flow > .engine + * { margin-top: 3.2rem; }
.engine-col { display: flex; flex-direction: column; padding: 1.6rem 0 2.4rem var(--gutter); background: var(--black); color: var(--paper); }
.engine-num { font-family: "Broadsheet Figures", var(--font); font-weight: 700; font-size: var(--fs-title); line-height: 1; margin-left: -0.02em; }
/* The 3 hangs below the line (old-style figures), so it is set a little
   smaller and starts level with the 1 and the 2. */
.engine-col:nth-child(3) .engine-num { font-size: calc(var(--fs-title) * 0.825); margin: calc(var(--fs-title) * 0.045) 0 calc(var(--fs-title) * 0.13); }
.engine-col h3 { margin-top: 9rem; font-weight: 800; font-size: var(--fs-head); line-height: var(--lh-head); white-space: nowrap; }
.engine-col p { margin-top: 1.2rem; font-size: var(--fs-body); line-height: 2.2rem; color: #bdbdc1; white-space: nowrap; }

/* ---- Validation (home) -------------------------------------------------- */
.home-validation { background: var(--mist); border-top: 0.1rem solid var(--rule); }
.flow > .hv-quote { margin-top: 4rem; }
.home-quote { font-weight: 700; font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: -0.01em; }
/* Who said it: the foundation's logo, then her name and the foundation. */
.quote-by { display: flex; align-items: center; gap: 1.2rem; margin-top: 1.6rem; }
.abf-badge { flex: none; width: 3.7rem; height: 3.7rem; border-radius: 50%; overflow: hidden; background: var(--paper); }
.abf-badge img { width: 100%; height: 100%; object-fit: cover; }

/* ---- Pilot (home) ------------------------------------------------------- */
.home-pilot { border-top: 0.1rem solid var(--rule); }   /* white, after the grey validation section */
/* "90 days." at the page-title size, no bigger. */
.ninety { font-weight: 800; font-size: var(--fs-title); line-height: var(--lh-title); letter-spacing: -0.02em; }
.flow > .ninety + * { margin-top: 2.8rem; }
.invite br { display: none; }   /* the lead wraps on its own */
.contact a {
  text-decoration: underline; text-decoration-skip-ink: none;
  text-decoration-thickness: 0.1rem; text-underline-offset: 0.379rem;
  text-decoration-color: rgba(84, 84, 84, 0.78);
}
.contact a:hover { color: var(--black); text-decoration-color: var(--black); }

/* =============================================================================
   HOW IT WORKS
   ========================================================================== */

/* Scroll-driven engine. The first screen is one frame that fills the screen
   under the header: the title and its line, then the stage copy and the wheel,
   which are sized (in --u) to fit what is left, so the whole wheel shows on
   landing. The frame pins from the first scroll, so scrolling turns the wheel
   straight away; the page moves on once Boost is reached. The wheel turns a
   third per stage and the copy swaps. With JS off (or reduced motion) it
   shows stage one, exactly as designed. */
.engine-scroll { position: relative; --stage-scroll: calc(var(--screen) * 0.55); --pin-top: 6.6rem; }
.engine-pin { position: relative; height: calc(var(--screen) - var(--pin-top)); display: flex; flex-direction: column; }
.engine-pin > .hiw-head { flex: none; padding-bottom: 2.4rem; }
.engine-frame {
  position: relative; flex: 1; min-height: 0; container-type: size;
  --u: min(calc(100cqw / 39), calc(100cqh / 49.762));   /* the phone composition, 39 by 49.762 */
}
.js .engine-scroll { height: calc(var(--screen) - var(--pin-top) + var(--stage-scroll) * 2); }
.js .engine-pin { position: sticky; top: var(--pin-top); }

.stages { position: relative; height: calc(15.292 * var(--u)); }
.stage {
  position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0; visibility: hidden;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s;
}
.stage.is-active { opacity: 1; visibility: visible; transition: opacity 0.45s var(--ease) 0.1s, visibility 0s; }
.stage-title { margin-left: var(--gutter); font-weight: 800; font-size: calc(2.5 * var(--u)); line-height: calc(3 * var(--u)); letter-spacing: calc(-0.023 * var(--u)); }
.stage-sub { margin: calc(1.553 * var(--u)) 0 0 var(--gutter); font-size: calc(1.5 * var(--u)); line-height: calc(2 * var(--u)); }
.stage-body { margin: calc(1.24 * var(--u)) 0 0 var(--gutter); max-width: calc(19.2 * var(--u)); font-size: calc(1.3 * var(--u)); line-height: calc(2.4 * var(--u)); color: var(--text-grey); }

.wheel { position: absolute; left: calc(3.12 * var(--u)); top: calc(17.002 * var(--u)); width: calc(32.76 * var(--u)); height: calc(32.76 * var(--u)); }
.wheel-rotor { position: absolute; inset: 0; transition: transform 0.9s var(--ease); }
.wheel-rotor svg { width: 100%; height: 100%; overflow: visible; }
.wheel-rotor path { fill: var(--black); }
/* Stage numbers ride on the rotor and counter-rotate so they stay upright.
   Active: bold white digit + a coloured square full stop sitting on the
   baseline. Inactive: light digit and full stop at 60% white. */
.wheel-num {
  position: absolute; white-space: nowrap;
  font-size: calc(7.5 * var(--u)); line-height: calc(7.5 * var(--u)); font-weight: 300;
  color: rgba(255, 255, 255, 0.6);
  transform-origin: 35% 57%;
  transition: transform 0.9s var(--ease), font-weight 0.5s var(--ease), color 0.5s var(--ease);
}
.wheel-num i { position: relative; font-style: normal; transition: color 0.4s var(--ease); }
.wheel-num b {
  position: absolute; left: 0; bottom: 0.234em; width: calc(1.26 * var(--u)); height: calc(1.08 * var(--u));
  background: var(--dot); opacity: 0; transition: opacity 0.4s var(--ease);
}
.wheel-num.is-active { font-weight: 700; color: var(--paper); }
.wheel-num.is-active i { color: transparent; }
.wheel-num.is-active b { opacity: 1; }
.wheel-num--1 { left: calc(7.434 * var(--u)); top: calc(2.2955 * var(--u)); --dot: var(--brief); }
.wheel-num--2 { left: calc(25.319 * var(--u)); top: calc(11.5595 * var(--u)); --dot: var(--build); }
.wheel-num--3 { left: calc(9.271 * var(--u)); top: calc(21.89 * var(--u)); font-size: calc(7 * var(--u)); line-height: calc(7 * var(--u)); --dot: var(--boost); }
/* The hub is Aidgency's own engine lockup (from their engine graphic): "The"
   small above the logo, "Engine" below, both on the logo's left edge. */
.wheel-hub {
  position: absolute; left: calc(11.18 * var(--u)); top: calc(13.83 * var(--u)); width: calc(10.4 * var(--u));
  display: flex; flex-direction: column; align-items: flex-start;
  font-size: calc(1.15 * var(--u)); line-height: calc(1.25 * var(--u)); color: var(--ink); white-space: nowrap;
}
.wheel-hub img { width: 100%; height: auto; margin: calc(0.3 * var(--u)) 0 calc(0.05 * var(--u)); }
.hub-the, .hub-engine { margin-left: calc(0.15 * var(--u)); }

/* =============================================================================
   VALIDATION
   ========================================================================== */
.who-how { background: var(--mist); }

/* The report, page by page: a sideways rail like the argument cards. Each page
   is an image of the PDF (phone browsers will not show a PDF inside a page).
   On phones and tablets the rail runs the full width of the screen. */
.flow > .doc { margin: 3rem calc(-1 * var(--gutter)) 0; }
.flow > .doc + .btn { margin-top: 2rem; }
.doc-rail {
  display: flex; gap: 1.2rem; padding: 0 var(--gutter);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  cursor: grab;
}
.doc-rail::-webkit-scrollbar { display: none; }
.doc-page {
  flex: 0 0 31rem; aspect-ratio: 4 / 3;
  border: 0.2rem solid #363645; border-radius: 0.4rem;
  overflow: hidden; background: var(--paper);
  scroll-snap-align: start;
}
.doc-page img { width: 100%; height: 100%; object-fit: cover; }
/* Page count and the two arrows. They need the script, so they only show with it. */
.doc-bar { display: none; }
.js .doc-bar { display: flex; align-items: center; margin: 0.6rem calc(var(--gutter) - 1.3rem) 0 var(--gutter); }
.doc-count { order: -1; margin-right: auto; font-weight: 400; font-size: 1.1rem; line-height: 1.3rem; letter-spacing: 0.2077rem; color: #868686; white-space: nowrap; }
.doc-count b { font-weight: 700; color: var(--ink); }
.doc-step { width: 4.4rem; height: 4.4rem; padding: 0; border: 0; background: none; color: var(--black); cursor: pointer; }
.doc-step svg { width: 1.8rem; height: 0.678rem; margin: 0 auto; fill: currentColor; }
.doc-prev svg { transform: scaleX(-1); }
.doc-step:disabled { color: #c9c9c9; cursor: default; }
/* Phones and tablets: tapping a page opens the report over the whole screen
   (site.js builds this). Swipe between pages; the X or the back button closes
   it. Pinch still zooms, and turning the phone sideways fills the screen. */
body.doc-open { overflow: hidden; }
.doc-full { position: fixed; inset: 0; z-index: 50; display: none; background: var(--black); color: var(--paper); }
.doc-full.is-open { display: block; }
.doc-full-rail {
  position: absolute; inset: 0; display: flex;
  overflow-x: auto; overflow-y: hidden; overscroll-behavior: contain;
  scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.doc-full-rail::-webkit-scrollbar { display: none; }
.doc-full-page { flex: 0 0 100%; height: 100%; display: flex; align-items: center; justify-content: center; scroll-snap-align: center; scroll-snap-stop: always; }
.doc-full-page img { width: auto; height: auto; max-width: 100%; max-height: 100%; }
/* The X and the count sit on black squares, so they read over a white page too. */
.doc-close {
  position: absolute; z-index: 1; right: max(0.6rem, env(safe-area-inset-right)); top: max(0.6rem, env(safe-area-inset-top));
  width: 4.4rem; height: 4.4rem; padding: 0; border: 0; background: var(--black); color: var(--paper); cursor: pointer;
}
.doc-close span { position: absolute; left: 1rem; top: 2.125rem; width: 2.4rem; height: 0.15rem; background: currentColor; transform: rotate(45deg); }
.doc-close span:last-child { transform: rotate(-45deg); }
.doc-full-count {
  position: absolute; z-index: 1; left: max(0.6rem, env(safe-area-inset-left)); bottom: max(0.6rem, env(safe-area-inset-bottom));
  padding: 1rem 1.4rem; background: var(--black);
  font-weight: 400; font-size: 1.1rem; line-height: 1.3rem; letter-spacing: 0.2077rem; color: #b5b5b5; white-space: nowrap;
}
.doc-full-count b { font-weight: 700; color: var(--paper); }
.doc-close:focus-visible { outline-color: var(--paper); outline-offset: -0.5rem; }

.val-next { border-top: 0.1rem solid var(--rule); }

/* =============================================================================
   WHO WE ARE
   ========================================================================== */
/* Jennifer and Brian side by side, their introduction under them. */
.founders { --ph: 14.7rem; display: flex; gap: 2.4rem; }
.flow > .founders, .flow > .founders + * { margin-top: 3.2rem; }
.person img { width: var(--ph); height: var(--ph); object-fit: cover; background: var(--paper); }
.person .body-copy { margin-top: 1.2rem; }

.who-partner { background: var(--black); color: var(--paper); }
.flow > .partner { margin-top: 3.2rem; }
.partner-mark { position: relative; width: 14.9rem; height: 14.9rem; border: 0.1rem solid #b9b9b9; background: var(--black); }
.partner-mark img { position: absolute; left: 11.9%; top: 10.2%; width: 74.85%; height: 78.6%; }
.partner .body-copy { margin-top: 1.2rem; }
.who-partner .body-copy, .who-partner .body-copy strong { color: var(--paper); }

.who-quote { font-weight: 700; font-size: var(--fs-head); line-height: var(--lh-head); letter-spacing: -0.01em; }
.who-quote strong { font-weight: 900; }

/* =============================================================================
   THANK YOU (standalone, not in the menu)
   ========================================================================== */
/* The black opening holds the title at the page-title size. The dark header
   sits over its top. */
.ty-top { background: var(--black); color: var(--paper); padding-top: calc(6.6rem + 4rem); padding-bottom: 4rem; }
.ty-title { text-transform: none; letter-spacing: -0.02em; }

.ty-intro { border-bottom: 0.1rem solid #e4e4e6; }
.flow > .logo-wall { margin: 3.2rem calc(-1 * var(--gutter)) 0; }
.logo-wall { position: relative; height: 12.4rem; }
.logo-wall img { position: absolute; }
/* Positioned by each logo's visible ink: left column starts on the left gutter,
   right column ends on the right gutter, middle column centred, rows centred. */
.logo-wall .l-abf { left: 1.26rem; top: -0.075rem; width: 6.4rem; height: 5.5rem; }
.logo-wall .l-badd { left: 16.47rem; top: 0.07rem; width: 6.4rem; height: 5.5rem; }
.logo-wall .l-pwnc { left: 32.65rem; top: 0.105rem; width: 5.2rem; height: 5.5rem; }
.logo-wall .l-wheel { left: 1.68rem; top: 7.215rem; width: 7.3rem; height: 5.1rem; }
.logo-wall .l-teal { left: 16.565rem; top: 7.38rem; width: 6.4rem; height: 5.1rem; }
.logo-wall .l-post { left: 29.13rem; top: 7.315rem; width: 8.3rem; height: 5.1rem; }

.ty-report { background: var(--mist); border-bottom: 0.1rem solid #e4e4e6; }

/* =============================================================================
   NOT FOUND (404.html, served by Netlify for any missing address)
   ========================================================================== */
/* Fills the screen with the content centred, as on desktop, where the
   full-screen section rule in wide.css sets the height. */
.nf { min-height: calc(var(--screen) - 6.6rem); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

/* =============================================================================
   MOTION
   Only where it shows something (final notes, 2026-10-20): the Engine wheel on
   How It Works, and the one button hover above. Nothing else animates, on
   scroll or on arrival.
   ========================================================================== */

/* ---- How It Works: the wheel follows the scroll ------------------------------ */
/* site.js turns the rotor with the scroll position (.is-live) instead of a
   third per stage. The angle is written straight to the transform, with no
   transition: restarting a transition on every scroll frame made the browser
   drop frames. The rotor and numbers keep their own layers (will-change) so
   the first turn does not pay to create them. */
/* The active number's weight switches at once here (its colour still fades):
   animating the weight re-sets the type on every frame, which was the one
   costly thing on this page and stuttered the turn on slower phones. */
.is-live .wheel-rotor { transition: none; will-change: transform; }
.is-live .wheel-num { transition: none; will-change: transform; }
/* The number that reaches the top lights up at once: its weight, its colour and
   its full stop. Fading text colour repaints the type on every frame, and at a
   stage change that was enough to drop frames on a slow phone. Only the
   coloured square fades in, which the browser can do without repainting. */
.is-live .wheel-num i { transition: none; }

/* Better still, where the browser supports it: the turn is tied to the scroll
   position in CSS (.is-timeline, set by site.js with the start and end of the
   pinned stretch), so it runs off the main thread and cannot be held up by
   script. The numbers get the opposite turn to stay upright. */
@keyframes wheel-turn { from { transform: rotate(0deg); } to { transform: rotate(-240deg); } }
@keyframes wheel-turn-back { from { transform: rotate(0deg); } to { transform: rotate(240deg); } }
@supports (animation-timeline: scroll()) {
  .is-timeline .wheel-rotor {
    animation: wheel-turn 1ms linear both;
    animation-timeline: scroll(root block); animation-range: var(--wheel-from) var(--wheel-to);
  }
  .is-timeline .wheel-num {
    animation: wheel-turn-back 1ms linear both;
    animation-timeline: scroll(root block); animation-range: var(--wheel-from) var(--wheel-to);
  }
}

/* Engines keep running: after Boost the wheel idles on, slowly. It uses the
   separate rotate property, so it adds to the scroll-driven turn; the numbers
   counter-rotate to stay upright. Paused while off screen (.is-away). */
@keyframes idle-up { to { rotate: -7.5deg; } }
@keyframes idle { from { rotate: -7.5deg; } to { rotate: -367.5deg; } }
@keyframes idle-up-back { to { rotate: 7.5deg; } }
@keyframes idle-back { from { rotate: 7.5deg; } to { rotate: 367.5deg; } }
.is-idle .wheel-rotor { animation: idle-up 2s cubic-bezier(0.5, 0, 0.75, 0.5) both, idle 48s linear 2s infinite; }
.is-idle .wheel-num { animation: idle-up-back 2s cubic-bezier(0.5, 0, 0.75, 0.5) both, idle-back 48s linear 2s infinite; }
@supports (animation-timeline: scroll()) {   /* the scroll-tied turn and the idle turn together */
  .is-timeline.is-idle .wheel-rotor {
    animation: wheel-turn 1ms linear both, idle-up 2s cubic-bezier(0.5, 0, 0.75, 0.5) both, idle 48s linear 2s infinite;
    animation-timeline: scroll(root block), auto, auto; animation-range: var(--wheel-from) var(--wheel-to), normal, normal;
  }
  .is-timeline.is-idle .wheel-num {
    animation: wheel-turn-back 1ms linear both, idle-up-back 2s cubic-bezier(0.5, 0, 0.75, 0.5) both, idle-back 48s linear 2s infinite;
    animation-timeline: scroll(root block), auto, auto; animation-range: var(--wheel-from) var(--wheel-to), normal, normal;
  }
}
.is-idle.is-away .wheel-rotor, .is-idle.is-away .wheel-num { animation-play-state: paused; }
.is-homing .wheel-rotor { transition: rotate 0.7s var(--ease-out); }
.is-homing .wheel-num { transition: rotate 0.7s var(--ease-out); }

/* Stage names roll like a counter. BRIEF, BUILD and BOOST are all five letters
   starting with B: the B holds and changes colour, the other four roll (site.js
   wraps them in .roll). Earlier stages sit above the line, later ones below. */
.is-live .stage { opacity: 1; visibility: hidden; transition: visibility 0s linear 0.65s; }
.is-live .stage.is-active { visibility: visible; transition: visibility 0s; }
.is-live .stage-title { clip-path: inset(0 -1em); }
/* The B: the three sit on top of each other and hand over with a very short
   cross-fade, so the letter holds still and takes the new colour. (A wipe was
   tried; it repaints every frame, where a fade costs nothing.) */
.is-live .stage-title > [class^="c-"] { display: inline-block; opacity: 0; transition: opacity 0.14s linear; }
.is-live .stage.is-active .stage-title > [class^="c-"] { opacity: 1; }
/* The other letters: the word leaving and the word arriving move together, one
   line apart. A stage that is only passed over stays invisible. */
.roll { position: relative; display: inline-block; opacity: 0; transition: transform 0.5s var(--ease-out) calc(var(--i, 0) * 0.04s), opacity 0s linear 0.7s; }
.stage.is-before .roll { transform: translateY(-105%); }
.stage.is-after .roll { transform: translateY(105%); }
.stage.is-active .roll { transform: none; opacity: 1; transition: transform 0.5s var(--ease-out) calc(var(--i, 0) * 0.04s), opacity 0s; }
.is-live .stage-sub, .is-live .stage-body { opacity: 0; transition: opacity 0.15s linear; }
.is-live .stage.is-active .stage-sub, .is-live .stage.is-active .stage-body { opacity: 1; transition: opacity 0.4s var(--ease) 0.15s; }

/* ---- Reduced motion ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0.01ms !important; transition-delay: 0s !important;
    animation-duration: 0.01ms !important; animation-delay: 0s !important; animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}