@charset "utf-8";

@font-face {
  font-family: "Nunito Sans";
  font-style: normal;
  font-weight: 200 1000;
  font-stretch: 75% 125%;
  font-display: swap;
  src: url("/assets/fonts/nunito-sans-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces Variable";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-variable.woff2") format("woff2");
}

@font-face {
  font-family: "Fraunces Variable";
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/fraunces-latin-variable-italic.woff2") format("woff2");
}

/* Familiar Labs — warm, living editorial system
   The site keeps the original paper / pine / rose language, atmospheric color,
   floating chrome, rounded actions, and page-specific composition. */

:root {
  --paper: #f5f0e7;
  --paper-light: #fbf8f1;
  --paper-deep: #ece5da;
  /* The exact value the hero hands to the continuum. Matching the colour is
     not enough on its own: the ground must still be travelling the same
     direction through the join, or the reversal creases along the edge. */
  --hero-settle: #efe9df;
  /* Where the closing invitation settles. The footer continues this exact
     value, so the page's last two surfaces read as one ground. */
  --closing-ground: #f1ebe1;
  --ink: #1b2721;
  /* Supporting prose carries most of the reading on this site, so it is held
     near the primary ink rather than at the lightest tone that still passes a
     contrast check. At 30px the previous #526058 measured 5.3:1 on paper and
     read as tiring over a full page. */
  --dim: #3f4c45;
  --faint: #4c554f;
  --pine: #0d5b3a;
  --pine-deep: #083f29;
  /* Matches the existing deer lockup's baked paper-free background exactly. */
  --pine-ink: #093122;
  --mint: #dcece1;
  --mint-light: #edf5ef;
  --rose: #ead3d0;
  --rose-deep: #c98683;
  --sun: #e5ad75;
  --fl-cobalt: rgb(84,140,247);
  --fl-cobalt-soft: rgba(84,140,247,0.12);
  --fl-cobalt-line: rgba(84,140,247,0.30);
  --rule: rgba(26, 55, 40, 0.14);
  --rule-invert: rgba(255, 255, 255, 0.17);
  --serif: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --sans: "Nunito Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  /* The frame is the 1380px/72px one scaled by 1.25 — the same proportions a
     reader gets at 125% browser zoom. Zoom leaves vw terms alone, so only the
     fixed bounds scale. The 20px floor is kept so phone margins do not grow. */
  --edge: clamp(20px, 4.6vw, 90px);
  --content: 1725px;
  /* The page's two scan rails. On wide screens they preserve the content
     frame; everywhere else they resolve to the responsive edge. */
  --page-rail: max(var(--edge), calc(50vw - 862.5px + var(--edge)));
  /* The primary reading path. Editorial pages can narrow it locally when their
     argument needs a more intimate cadence. */
  --measure: 60rem;
  /* The widest a stacked argument column is allowed to run. */
  --reading-column: 52rem;
  /* Metadata, captions, and definition lists sit beside the reading path rather
     than in it, so they get one smaller size. Prose stays at body size wherever
     it appears — a sales sheet is not a footnote. */
  --secondary: 19px;
  /* A rail is evidence or reference material, never the default reading path.
     Arguments stack; only genuinely independent material earns a second track. */
  --split-gap: clamp(48px, 7vw, 96px);
  --split-research-gap: clamp(46px, 7vw, 98px);
  --split-research: minmax(220px, 0.76fr) minmax(0, 1.24fr);
  /* One family, four steps. Nine bespoke curves had grown for what is really
     a small set of surfaces, so a card on one page met the eye differently
     from the same card on the next. Pills stay pills and circles stay
     circles; these govern everything held in a corner. */
  --radius-chip: 12px;
  --radius-sm: clamp(18px,1.6vw,26px);
  --radius: clamp(24px,2.2vw,36px);
  --radius-lg: clamp(28px,2.5vw,42px);
  --radius-xl: clamp(34px,3.2vw,58px);
  --hex: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* For a turn rather than an arrival: eases in, then a long settle. */
  --ease-grace: cubic-bezier(0.42, 0, 0.18, 1);
}

/* ---- Climate -------------------------------------------------------------
   The fields are light, not pigment: one ground, lit differently depending on
   where you are. Measured before this existed, every hero on the site was
   amber+rose+green and every closing was amber+green+rose — the same three
   hues in the same proportion in every section of every page, which is why the
   site read as one wallpaper. Nothing led.

   These defaults are Home's exact previous values, so Home cannot move. Each
   other page family overrides them, and a subpage inherits its parent's light:
   the offer pages read as Training, the field notes read as Research. */
:root {
  /* The doorway. */
  --air-door-1: #ead3d0;
  --air-door-2: #b9d9c5;
  --air-door-3: rgba(229,173,117,0.65);
  /* The closing invitation. */
  --air-close-1: rgba(178,214,192,0.72);
  --air-close-2: rgba(229,197,193,0.62);
  /* The grounds in between. Slots, not colours: a warm accent light, a cool
     green light, and a pale wash. Every section keeps its own alpha. */
  --air-a: 234,211,208;
  --air-b: 185,217,197;
  --air-c: 220,236,225;
  /* The descent into the footer, and the light inside the footer card. Every
     page lands in the same place; it should arrive carrying the light it came
     from rather than returning to one shared cream. */
  --closing-rise: var(--paper-deep);
  --closing-mid: #eee8de;
  --footer-glow: rgba(167,215,186,0.08);
}
/* Training — warm daylight, a room with people working in it. Amber leads;
   this is where --sun finally does a job instead of sitting in the tokens. */
.hub-page, .offer-page {
  --air-door-1: rgba(233,190,142,0.66);
  --air-door-2: #cfe3cd;
  --air-door-3: rgba(var(--air-a),0.5);
  --air-close-1: rgba(233,196,150,0.6);
  --air-close-2: rgba(178,214,192,0.46);
  --air-a: 235,198,152;
  --air-b: 196,221,201;
  --air-c: 226,238,222;
  --closing-rise: #ece3d2;
  --closing-mid: #f0e7d8;
  --closing-ground: #f3ecdf;
  --footer-glow: rgba(233,196,150,0.1);
}
/* Products — cool, inward light. The one page where the brand's own familiar
   colours mean something, because it is the page about familiars. */
.products-page {
  --air-door-1: rgba(87,179,173,0.5);
  --air-door-2: rgba(149,133,216,0.36);
  --air-door-3: rgba(178,214,192,0.44);
  --air-close-1: rgba(87,179,173,0.5);
  --air-close-2: rgba(149,133,216,0.34);
  --air-a: 158,166,214;
  --air-b: 150,203,198;
  --air-c: 210,231,233;
  --closing-rise: #e3e6ec;
  --closing-mid: #e9ebf0;
  --closing-ground: #eef0f3;
  --footer-glow: rgba(149,133,216,0.13);
}
/* Research — clear, cool morning. Mint leads and the warmth recedes. */
.research-page, .note-page {
  --air-door-1: rgba(178,214,192,0.66);
  --air-door-2: #cbe4d5;
  --air-door-3: rgba(229,173,117,0.3);
  --air-close-1: rgba(178,214,192,0.7);
  --air-close-2: rgba(203,228,213,0.52);
  --air-a: 199,228,210;
  --air-b: 172,211,188;
  --air-c: 214,236,224;
  --closing-rise: #e4ebe4;
  --closing-mid: #eaefe8;
  --closing-ground: #eff3ec;
  --footer-glow: rgba(178,214,192,0.1);
}
/* About — dusk. The most personal page on the site gets the warmest light. */
.about-page {
  --air-door-1: rgba(226,180,175,0.76);
  --air-door-2: rgba(229,173,117,0.46);
  --air-door-3: rgba(196,219,203,0.5);
  --air-close-1: rgba(229,197,193,0.72);
  --air-close-2: rgba(229,173,117,0.38);
  --air-a: 232,192,188;
  --air-b: 226,199,166;
  --air-c: 240,226,214;
  --closing-rise: #eee2dc;
  --closing-mid: #f2e8e2;
  --closing-ground: #f5ede8;
  --footer-glow: rgba(229,197,193,0.12);
}
/* The working pages stay quiet — they are here to be used, not to have a mood. */
.conversion-page, .legal-page, .not-found-page {
  --air-door-1: rgba(178,214,192,0.5);
  --air-door-2: rgba(229,197,193,0.42);
  --air-door-3: rgba(229,173,117,0.26);
  --air-close-1: rgba(178,214,192,0.6);
  --air-close-2: rgba(229,197,193,0.5);
  --air-a: 226,208,204;
  --air-b: 190,216,199;
  --air-c: 224,238,228;
}

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

html { background: var(--paper); }
html[data-restoring-scroll] body { visibility: hidden; }
html[data-restoring-scroll],
html[data-restoring-scroll] * { overflow-anchor: none; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 30px;
  font-weight: 350;
  /* Reading leading, not display leading. 1.42 at 30px packed the lines tightly
     enough that a full page of prose felt dense before it felt small. */
  line-height: 1.54;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body::before {
  position: fixed;
  z-index: 1000;
  inset: 0;
  pointer-events: none;
  content: "";
  opacity: 0.018;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}

[id] { scroll-margin-top: 108px; }
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
button { color: inherit; font: inherit; }
p { max-width: var(--measure); margin: 0; text-wrap: pretty; }
/* A paragraph break has to out-space a line break, or the two read as one
   block. At 1.54 leading, 1em was no longer a visible separation. */
p + p, .stack > * + * { margin-top: 1.25em; }

h1, h2, h3 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 350;
  letter-spacing: -0.026em;
  text-wrap: balance;
}

/* Fraunces defaults to its expressive forms. Structural headings turn WONK
   down; smaller heads and emphasized phrases keep that character. */
h1, h2 { font-optical-sizing: none; font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 0; }
h3 { font-optical-sizing: none; font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 1; }

/* Gateway tier is the default. Home rises above it; leaves and utility pages sit
   below. A tier moves the whole ladder together: a page whose h1 is outranked by
   its own section heads has no hierarchy, only smaller type at the top. */
h1 { font-size: clamp(52px, 6.2vw, 86px); line-height: 1.06; }
h2 { font-size: clamp(40px, 5vw, 76px); line-height: 1.06; }
h3 { font-size: clamp(29px, 2.8vw, 42px); line-height: 1.16; }
h4 { margin: 0; font-size: 22px; font-weight: 560; }
h1 em, h2 em {
  color: var(--pine);
  font-weight: 350;
  font-variation-settings: "opsz" 9, "SOFT" 0, "WONK" 1;
}
/* On Home, a head that opens a full-bleed band carries a short declarative line
   and shares one statement size with the belief, so the page reads as hero then
   statements. Elsewhere a head sits under its own page h1 and inside a reading
   column, where this size flattens the hierarchy and walls the line. */
.home-teams .section-intro h2,
.home-paths-intro h2,
.home-connect-inner h2 { font-size: clamp(42px, 4.6vw, 72px); line-height: 1.04; }
/* A page's type scale governs that page's argument, not the chrome it shares
   with every other page. Unscoped, these reached past `main` and set the
   footer's "EXPLORE" and "RESOURCES" — 18px labels — at display sizes, because
   a bare element selector beats the component's own class. */
/* Leaf tier: the four forwardable offer pages use the same editorial steps as
   Products and About. Their long hero claims keep the mobile cap below the
   gateway tier, but on a wide page the shared h1 is allowed to lead. */
.offer-page main h2 { font-size: clamp(34px, 3vw, 48px); }
.offer-page main h3 { font-size: clamp(29px, 2.35vw, 34px); }
/* Utility tier: inquiry, application, policy, and the missing-page notice. */
.conversion-page main h1, .legal-page main h1, .not-found-page main h1 { font-size: clamp(38px, 3.6vw, 52px); }
.conversion-page main h2, .legal-page main h2, .not-found-page main h2 { font-size: clamp(28px, 2.7vw, 38px); }
.conversion-page main h3, .legal-page main h3, .not-found-page main h3 { font-size: clamp(24px, 2.2vw, 30px); }

/* Selection is a surface too. A pine tint is invisible on the green fields, so
   a dark section states its selection the same way it states its actions. */
::selection { background: var(--select-face, rgba(13,91,58,0.18)); color: var(--select-ink, var(--ink)); }
:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; }
.site-footer :focus-visible, .home-teams :focus-visible, .home-connect :focus-visible,
.hub-forums :focus-visible, .offer-page section:last-child :focus-visible,
.product-feature :focus-visible,
.co-create-page section:nth-of-type(3) :focus-visible, .co-create-page section:last-child :focus-visible {
  outline-color: var(--paper-light);
}

.visually-hidden {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: fixed;
  z-index: 300;
  top: 8px;
  left: 50%;
  padding: 10px 16px;
  border-radius: 999px;
  background: var(--pine-deep);
  color: var(--paper-light);
  font-size: 16px;
  text-decoration: none;
  transform: translate(-50%, -180%);
  transition: transform 220ms var(--ease);
}

.skip-link:focus { transform: translate(-50%, 0); }

/* Floating masthead */
.masthead {
  position: sticky;
  z-index: 100;
  top: 14px;
  height: 0;
}

/* On desktop the wordmark and action terminate the same scan rails used by
   every section below. The pill may float; its contents never float loose. */
.masthead-inner {
  display: grid;
  width: min(calc(100% - 28px), var(--content));
  min-height: 62px;
  align-items: center;
  gap: clamp(18px, 3vw, 38px);
  margin-inline: auto;
  padding: 8px 32px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 999px;
  background: rgba(251, 248, 241, 0.88);
  box-shadow: 0 18px 48px rgba(35, 52, 42, 0.09), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(18px) saturate(0.92);
  grid-template-columns: auto 1fr auto;
}

.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.13em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.wordmark .mark { width: 15px; height: 17px; flex: 0 0 auto; fill: var(--pine); }
.wordmark b { font-weight: 600; }

.nav { display: flex; align-items: center; justify-content: right; padding-right: 24px; gap: clamp(16px, 2.3vw, 30px); }
.nav a { color: var(--dim); font-size: 17px; font-weight: 450; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--pine); }
.nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }

.btn {
  display: inline-flex;
  min-height: 56px;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 9px 17px;
  border: 1px solid var(--action-edge, var(--pine));
  border-radius: 999px;
  background: var(--action-face, var(--pine));
  color: var(--action-ink, var(--paper-light));
  font-size: 18px;
  font-weight: 500;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  transition: transform 260ms var(--ease), background 260ms var(--ease), color 260ms var(--ease);
}

/* The masthead action shares the navigation's readable floor rather than
   shrinking into secondary metadata. Its shape already supplies the hierarchy. */
.btn-nav { min-height: 42px; padding: 9px 10px 9px 18px; gap: 10px; font-size: 17px; }
.btn-nav::after {
  display: grid;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--action-chip, rgba(255,255,255,0.15));
  content: "→";
  font-size: 11px;
  place-items: center;
}
.btn:hover { border-color: var(--action-face-hover, var(--pine-deep)); background: var(--action-face-hover, var(--pine-deep)); color: var(--action-ink-hover, var(--paper-light)); transform: translateY(-1px); }
.btn:active { transform: translateY(1px) scale(0.99); }
.btn span {
  display: grid;
  width: 26px;
  height: 26px;
  margin-block: -2px;
  border-radius: 50%;
  background: var(--action-chip, rgba(255,255,255,0.15));
  font-size: 12px;
  place-items: center;
  transition: transform 260ms var(--ease);
}
.btn:hover span { transform: translate(2px, -1px); }
/* One arrow standard, by destination: → stays on this site, ↗ leaves it — the
   visitor's own email client, or the Co-create product site. Buttons that begin
   an in-page form are immediate actions, so their label stands on its own. */
.btn-secondary { border-color: var(--action-quiet-edge, rgba(13,91,58,0.42)); background: transparent; color: var(--action-quiet-ink, var(--pine)); }
.btn-secondary:hover { border-color: var(--action-face, var(--pine)); background: var(--action-face, var(--pine)); color: var(--action-ink, var(--paper-light)); }
.btn-secondary span { background: var(--action-quiet-chip, rgba(13,91,58,0.1)); }
.btn-secondary:hover span { background: var(--action-chip, rgba(255,255,255,0.15)); }

/* A dark section states its own surface once, and every action inside it reads
   correctly without anyone remembering to add a modifier. This replaces the
   per-surface action classes and the page-scoped recolourings that kept
   reappearing wherever someone forgot them. */
.home-teams, .hub-forums, .offer-decision,
.product-feature, .site-footer {
  --action-face: var(--paper-light);
  --action-ink: var(--pine-deep);
  --action-edge: var(--paper-light);
  --action-face-hover: var(--mint);
  --action-ink-hover: var(--pine-deep);
  --action-chip: rgba(13,91,58,0.1);
  --action-quiet-edge: rgba(255,255,255,0.42);
  --action-quiet-ink: var(--paper-light);
  --action-quiet-chip: rgba(255,255,255,0.15);
  --link-ink: #b8dfc7;
  --select-face: var(--paper-deep);
  --select-ink: var(--pine-deep);
}

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--pine);
  cursor: pointer;
}
.nav-toggle-bars, .nav-toggle-bars::before, .nav-toggle-bars::after {
  display: block;
  width: 16px;
  height: 1px;
  margin-inline: auto;
  background: var(--paper-light);
  transition: transform 220ms var(--ease), opacity 220ms var(--ease);
}
.nav-toggle-bars::before, .nav-toggle-bars::after { content: ""; }
.nav-toggle-bars::before { transform: translateY(-5px); }
.nav-toggle-bars::after { transform: translateY(4px); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before { transform: translateY(1px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after { transform: rotate(-45deg); }

/* Co-create keeps its own corner language. The Familiar Labs bar is a pill,
   but this one holds an 8px icon and a 10px control, and a pill around them
   reads as two design systems meeting in the same bar. */
.masthead-product .masthead-inner { grid-template-columns: auto 1fr auto; border-radius: var(--co-radius-frame); }
.masthead-product .wordmark .mark { fill: var(--rose-deep); }
.product-institution { margin: 0; color: var(--faint); font-size: 14px; letter-spacing: 0.04em; }
/* The maker's name is a real destination sitting inside a 14px line, so it
   carries its own minimum height. Inline-block rather than inline-flex: this
   one sits mid-sentence and must not break the line it belongs to. */
.product-institution a { display: inline-block; min-height: 24px; color: var(--pine); text-underline-offset: 3px; }

/* Shared editorial language */
/* One continuous left/right rail lets a reader scan the whole page without
   re-finding the content column in each section. */
.shell { width: 100%; margin-inline: 0; padding-inline: var(--page-rail); }
/* Fields own content width inside the permanent shell rails. Children inherit
   the field instead of repairing width and centring page by page. */
.field-reading { width: min(100%, var(--reading-column)); }
.field-measure { width: min(100%, var(--measure)); }
/* Home sets the standard, and the standard is that a section resolves its
   alignment against the page: it is either centred on the page or it spans the
   frame rail to rail. A narrow field parked on the left rail with nothing
   opposite it reads as balanced at 1440 and as a half-empty page at 2048, where
   the same column leaves 965px of dead space. These are the two page-resolved
   stages every section picks from; a rail is earned only by genuinely
   independent reference material beside the argument. */
.stage { display: grid; width: min(100%, 64rem); margin-inline: auto; justify-items: center; text-align: center; }
.stage > * { margin-inline: auto; }

.section-pad { padding-block: clamp(104px, 11vw, 185px); }
.label {
  margin: 0 0 22px;
  color: var(--pine);
  font-family: var(--sans);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.19em;
  line-height: 1.5;
  text-transform: uppercase;
}
.label-inverse { color: #a7d7ba; }.lede { color: var(--dim); font-size: clamp(26px, 2.06vw, 31px); line-height: 1.5; }
.dim { color: var(--dim); }
.actions { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.link {
  display: inline;
  color: var(--link-ink, var(--pine));
  font-size: 20px;
  font-weight: 500;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 4px;
}
/* The arrow is an atomic inline box so the label's underline stops at the word.
   As a flex item it inherits the parent's decoration and cannot refuse it, which
   is why the link is a plain inline with its own margin instead. */
.link::after { display: inline-block; margin-left: 8px; content: "→"; }
.link-list { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 24px; }
.prose a, p a { color: var(--pine); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.prose strong, p strong { font-weight: 560; }
.headline-stack > h2 + p, .headline-stack > h1 + p { margin-top: 22px; }

.split-intro { max-width: var(--reading-column); }
.split-intro > * + * { margin-top: 28px; }
.split-intro .btn { margin-top: 28px; }

/* Home */
.home-hero {
  position: relative;
  overflow: hidden;
  min-height: 100dvh;
  /* Air above the headline on a tall window without stealing it from a laptop:
     the ramp is steeper than the viewport, so it holds its floor on a short
     screen instead of scaling both ends together. */
  padding-block: clamp(128px, calc(22vh - 60px), 208px) clamp(104px, 13vh, 156px);
  /* The hero hands the page to the continuum on a horizontal band. A diagonal
     ramp ends on an uneven edge and creases the join; the drifting colour this
     composition needs comes from .hero-atmosphere instead. */
  background: linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 58%, var(--hero-settle) 100%);
}
/* The hero keeps the site's single left edge; its left-anchored character comes
   from the atmospheric field holding the right, not from a wider canvas. */
.home-hero-inner { position: relative; z-index: 2; }
/* Display serif needs room for descenders; below ~1.0 the "y" of one line
   collides with the caps of the next. */
.home-hero h1 { max-width: 960px; font-size: clamp(54px, 6.9vw, 100px); line-height: 1.04; }
/* The kicker belongs to the headline, so it sits close to it; the space it
   gives up goes to separating the actions from the sentence they follow. */
/* Air above the kicker on a tall window without taking it from a laptop. Same
   ramp trick the hero's top padding uses: steeper than the viewport, so it holds
   its floor at 900px tall — where the buttons and the scroll cue were colliding
   — and reaches its full 70px on a taller screen. */
.home-hero .label { margin: clamp(22px, calc(16vh - 116px), 70px) 0 20px; }
.home-hero .lede {
  max-width: 55rem;
  margin-top: clamp(30px,3.8vh,46px);
  font-size: 28px;
  font-weight: 350;
  line-height: 1.52;
}
.home-hero .actions { margin-top: clamp(38px,4.8vh,60px); }
.home-hero .actions .link { margin-left: 8px; }
/* A peripheral field of people and familiars. Its larger, sparse forms drift
   past the edge rather than resolving into a self-contained illustration. */
.hero-network {
  position: absolute;
  z-index: 1;
  top: 49%;
  right: calc(var(--page-rail) - 92px);
  width: min(60vw, 860px);
  height: min(60vw, 780px);
  pointer-events: none;
  transform: translateY(-50%);
}
.home-hero.is-network-participating { cursor: none; }
/* The hero ships visible. This start state exists only while the guard
   attribute does, and the motion releases the attribute before it clears its
   own inline values, so the words can never be taken back.
   The cue's contents, not the cue itself: arrival owns what is inside it and
   the scroll-linked fade owns the element, so the two never write the same
   property on the same node. */
[data-arrival="pending"] .home-hero-inner .label,
[data-arrival="pending"] .home-hero-inner h1,
[data-arrival="pending"] .home-hero-inner .lede,
[data-arrival="pending"] .home-hero-inner .actions,
[data-arrival="pending"] .home-hero .scroll-cue > * { opacity: 0; }
.scroll-cue {
  position: absolute;
  z-index: 2;
  bottom: clamp(28px,4.2vh,46px);
  left: 50%;
  display: grid;
  justify-items: center;
  gap: 10px;
  color: var(--pine);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-decoration: none;
  text-transform: uppercase;
  transform: translateX(-50%);
}
.scroll-cue i { display: grid; width: 28px; height: 28px; border: 1px solid rgba(13,91,58,0.3); border-radius: 50%; font-family: var(--sans); font-size: 16px; font-style: normal; font-weight: 400; line-height: 1; place-items: center; transition: transform 220ms var(--ease), background 220ms var(--ease); }
.scroll-cue:hover i, .scroll-cue:focus-visible i { background: rgba(13,91,58,0.1); transform: translateY(3px); }
/* The belief is the hinge between the Lab's premise and its work: a manifesto
   surface, not a rule-bound afterthought or a contained card. */
.home-continuum {
  overflow: hidden;
  /* Each field's vertical radius is kept smaller than its distance to the
     nearest edge. A radius is measured from the centre, so an ellipse at 16%
     with a 28% radius still hangs 432px past the top and overflow crops it
     into a band across the join. */
  background:
    radial-gradient(ellipse 68% 14% at 94% 16%, rgba(var(--air-c),0.9), transparent 70%),
    radial-gradient(ellipse 52% 24% at 1% 26%, rgba(var(--air-a),0.22), transparent 74%),
    radial-gradient(ellipse 66% 16% at 88% 82%, rgba(var(--air-c),0.62), transparent 72%),
    linear-gradient(180deg, var(--hero-settle) 0%, var(--paper-deep) 10%, #f3eee6 50%, var(--paper-light) 74%, #edf3ee 100%);
}
.home-principle-band {
  position: relative;
  overflow: visible;
  isolation: isolate;
  background: transparent;
}
.principle-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: visible;
  pointer-events: none;
}
.principle-atmosphere i {
  position: absolute;
  display: block;
  width: min(62vw, 980px);
  aspect-ratio: 1.5;
  border-radius: 50%;
  filter: blur(72px);
  opacity: 0.34;
}
/* Clear of the continuum's clip line. At -34% this ellipse's centre sat on the
   hero join, so overflow:hidden cut it at full strength and printed the edge
   as a band across the top of the mission. */
.principle-atmosphere i:first-child {
  right: -24%;
  top: 14%;
  background: var(--mint);
  transform: translate3d(9%, -7%, 0) scale(0.92);
}
.principle-atmosphere i:last-child {
  bottom: -38%;
  left: -25%;
  background: var(--rose-deep);
  opacity: 0.1;
  transform: translate3d(-8%, 8%, 0) scale(0.9);
}
.home-principle {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  min-height: 72svh;
  display: grid;
  align-content: center;
  padding-block: clamp(112px, 12vw, 184px);
}
.home-principle h2 { max-width: 54rem; margin-inline: auto; font-size: clamp(42px,4.6vw,72px); letter-spacing: -0.045em; line-height: 1.04; text-align: center; }
.home-principle h2 > span,
.home-principle h2 em { display: inline-block; }
.home-principle [data-principle-consequence],
.home-principle [data-principle-token] { display: inline-block; }
.home-principle h2 em { color: var(--pine); }
.home-principle p { max-width: 54rem; margin: clamp(34px,4vw,56px) auto 0; color: var(--dim); font-size: clamp(20px,1.75vw,28px); line-height: 1.4; text-align: center; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-principle-value] {
    display: inline-block;
    position: relative;
    isolation: isolate;
    padding: 0 0.08em 0.04em;
    margin: 0 -0.08em -0.04em;
    border-radius: 0.24em;
    /* The word answers the pointer, so it stops offering a text caret. A
       crosshair says the surface is live without promising a click that never
       comes; `pointer` would, and `all-scroll` would promise a drag. */
    cursor: crosshair;
    transition: color 320ms var(--ease), text-shadow 320ms var(--ease), transform 320ms var(--ease);
  }
  [data-principle-value]::before {
    position: absolute;
    z-index: -1;
    inset: -0.08em -0.14em;
    border-radius: inherit;
    background: radial-gradient(circle at var(--principle-x, 50%) var(--principle-y, 50%), rgba(var(--principle-tint, 167,215,186),0.78), rgba(var(--principle-tint, 167,215,186),0.26) 52%, transparent 76%);
    content: "";
    opacity: 0;
    transform: scale(0.9);
    transition: opacity 260ms var(--ease), transform 320ms var(--ease);
  }
  /* One word at a time carries the ambient light. JavaScript chooses the next
     word and interval after the entrance has finished, so attention genuinely
     wanders rather than replaying a disguised CSS sequence. Held on a second
     layer so hover has its own field to grow. */
  [data-principle-value]::after {
    position: absolute;
    z-index: -2;
    inset: 0.04em -0.16em;
    border-radius: inherit;
    background: radial-gradient(ellipse 62% 108% at 50% 52%, rgba(var(--principle-tint, 167,215,186),0.95), rgba(var(--principle-tint, 167,215,186),0.4) 56%, transparent 78%);
    content: "";
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 420ms var(--ease), transform 420ms var(--ease);
  }
  /* Each word introduces its own colour as it arrives, in order. The ambient
     turn does not begin until every word has landed, so the two systems never
     hold the same field at once and no word lights twice. */
  [data-principle-value][data-lit]::after { opacity: 0.6; transform: scale(1.03); }
  [data-principle-settled] [data-principle-value][data-ambient-lit]::after { opacity: 0.6; transform: scale(1.03); }
  [data-principle-token]:nth-child(1) [data-principle-value] { --principle-tint: 167,215,186; }
  [data-principle-token]:nth-child(2) [data-principle-value] { --principle-tint: 233,196,201; }
  [data-principle-token]:nth-child(3) [data-principle-value] { --principle-tint: 240,209,172; }
  [data-principle-token]:nth-child(4) [data-principle-value] { --principle-tint: 228,196,214; }
  [data-principle-token]:nth-child(5) [data-principle-value] { --principle-tint: 182,214,208; }
  /* The ambient field steps aside on hover so the two never stack into one
     muddy wash; the brighter field takes the word instead. */
  [data-principle-value]:hover::after { opacity: 0; }
  [data-principle-value]:hover {
    color: var(--pine);
    text-shadow: 0 8px 24px rgba(13,91,58,0.2);
    transform: translateY(-3px) scale(1.028);
  }
  [data-principle-value]:hover::before {
    opacity: 0.74;
    transform: scale(1);
  }
}
.hero-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.hero-atmosphere i { position: absolute; display: block; border-radius: 50%; filter: blur(58px); opacity: 0.56; }
.hero-atmosphere i:nth-child(1) { width: min(46vw, 660px); aspect-ratio: 1; top: -8%; right: 3%; background: var(--air-door-1); }
.hero-atmosphere i:nth-child(2) { width: min(34vw, 500px); aspect-ratio: 1; top: 19%; right: -3%; background: var(--air-door-2); }
.hero-atmosphere i:nth-child(3) { width: min(25vw, 380px); aspect-ratio: 1; top: 2%; right: 26%; background: var(--air-door-3); }

/* Where the light falls, per page. Hue alone still left every doorway with the
   same shape of light in the same corner; a room is told apart by where its
   window is as much as by the colour coming through it. Desktop only — the
   narrow layout has its own arrangement below, and these must not outrank it.
   Home is deliberately absent: it keeps the original placement. */
@media (min-width: 981px) {
  /* Training — a wide, high band of daylight across the room. */
  .hub-page .hero-atmosphere i:nth-child(1),
  .offer-page .hero-atmosphere i:nth-child(1) { width: min(52vw, 760px); aspect-ratio: 1.3; top: -18%; right: 6%; }
  .hub-page .hero-atmosphere i:nth-child(2),
  .offer-page .hero-atmosphere i:nth-child(2) { width: min(30vw, 440px); aspect-ratio: 1; top: 34%; right: -8%; }
  .hub-page .hero-atmosphere i:nth-child(3),
  .offer-page .hero-atmosphere i:nth-child(3) { width: min(28vw, 420px); aspect-ratio: 1.1; top: -6%; right: 38%; }

  /* Products — two separate cool sources. Overlapped they mixed to grey; apart
     they read as depth. */
  .products-page .hero-atmosphere i:nth-child(1) { width: min(38vw, 560px); aspect-ratio: 1; top: -14%; right: 4%; }
  .products-page .hero-atmosphere i:nth-child(2) { width: min(44vw, 640px); aspect-ratio: 1.15; top: 46%; right: -14%; }
  .products-page .hero-atmosphere i:nth-child(3) { width: min(26vw, 380px); aspect-ratio: 1; top: 8%; right: 34%; }

  /* Research — a crisp high source and open air beneath it. */
  .research-page .hero-atmosphere i:nth-child(1),
  .note-page .hero-atmosphere i:nth-child(1) { width: min(34vw, 500px); aspect-ratio: 1; top: -12%; right: 12%; }
  .research-page .hero-atmosphere i:nth-child(2),
  .note-page .hero-atmosphere i:nth-child(2) { width: min(46vw, 680px); aspect-ratio: 1.25; top: 30%; right: -18%; }
  .research-page .hero-atmosphere i:nth-child(3),
  .note-page .hero-atmosphere i:nth-child(3) { width: min(22vw, 320px); aspect-ratio: 1; top: -4%; right: 44%; }

  /* About — dusk: the warmth sits low and wide, the way late light does. */
  .about-page .hero-atmosphere i:nth-child(1) { width: min(56vw, 820px); aspect-ratio: 1.4; top: 26%; right: -12%; }
  .about-page .hero-atmosphere i:nth-child(2) { width: min(30vw, 440px); aspect-ratio: 1; top: -14%; right: 22%; }
  .about-page .hero-atmosphere i:nth-child(3) { width: min(34vw, 500px); aspect-ratio: 1.1; top: 8%; right: 62%; }
}
/* The closing invitation paints its own ground through `.closing-atmosphere`,
   so the section itself stays out of the way. */
.home-connect { background: transparent; color: rgba(255,255,255,0.78); }
/* The forums used to be a dark card sitting on paper. Opening it to full width
   took the card away and, with it, the only thing painting the ground — which
   left inverse text on paper. It states its own ground now, the way every other
   open dark band on the site does. */
.hub-forums { background: var(--pine-deep); color: rgba(255,255,255,0.78); }
.home-teams {
  background: transparent;
  color: rgba(255,255,255,0.78);
}
.home-teams.section-pad { padding-block: 0 clamp(34px,4vw,64px); }
/* The largest surface on the page is a place with depth rather than a printed
   panel, so its own light gathers as it arrives. Only the ground moves. */
.training-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
}
.training-atmosphere i { position: absolute; display: block; border-radius: 50%; filter: blur(86px); }
.training-atmosphere i:first-child { top: -6%; right: -8%; width: min(46vw,720px); aspect-ratio: 1.25; background: rgba(122,186,146,0.3); }
.training-atmosphere i:last-child { bottom: -10%; left: -6%; width: min(38vw,560px); aspect-ratio: 1.4; background: rgba(167,215,186,0.14); }
.home-training-field {
  position: relative;
  /* Content stages sit on the inner page rail. The floating masthead and footer
     alone use the wider chrome rail. */
  width: calc(100% - 2 * var(--page-rail));
  margin: clamp(44px,4vw,72px) auto 0;
  padding-block: clamp(44px,8vw,120px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 42% 62% at 92% 2%, rgba(80,145,108,0.18), transparent 68%),
    radial-gradient(ellipse 30% 42% at 1% 100%, rgba(201,134,131,0.035), transparent 72%),
    #124936;
  box-shadow: 0 30px 80px rgba(8,63,41,0.14);
}
.home-training-field > .shell { padding-inline: clamp(44px,8vw,120px); }
.home-teams h2, .home-connect h2, .hub-forums h2 { color: var(--paper-light); }
.home-teams h2 { color: var(--paper-deep); }
.home-teams h2 em, .home-connect h2 em, .hub-forums h2 em { color: #a7d7ba; }
.home-offering-pair {
  --band-bleed: clamp(30px,3.6vw,58px);
  display: grid;
  margin-top: clamp(58px,7vw,86px);
  margin-inline: calc(-1 * var(--band-bleed));
  padding-inline: var(--band-bleed);
  border-block: 1px solid var(--rule-invert);
  grid-template-columns: repeat(2,minmax(0,1fr));
}
.home-teams .home-offering-pair {
  align-items: stretch;
  gap: clamp(22px,3vw,48px);
  margin-inline: 0;
  padding-inline: 0;
  border-block: 0;
}
/* Ruled columns, so the gutter belongs between them and never on the outside:
   the first column starts on the page rail and the last ends on it, exactly like
   the heading above and the action below. Outer padding here broke that rail. */
.offering-card {
  display: flex;
  position: relative;
  flex-direction: column;
  padding: clamp(34px,4.5vw,58px) 0;
  color: inherit;
  text-decoration: none;
}
.offering-card:first-child { padding-right: var(--band-bleed); }
.offering-card + .offering-card { border-left: 1px solid var(--rule-invert); padding-left: var(--band-bleed); }
.offering-card .offering-action { margin-top: auto; padding-top: 38px; }
.offering-card > * { position: relative; z-index: 1; }
/* The pointer is only promised once script has actually made the card
   clickable; the action inside it is a real link either way. */
.offering-card.is-card-linked, .path-card.is-card-linked { cursor: pointer; }
.home-offering-pair h3 { color: var(--paper-deep); font-size: 40px; line-height: 1.15; }
.home-offering-pair p { margin-top: 26px; color: rgba(236,229,218,0.8); font-size: 22px; }
.home-offering-pair strong { color: var(--paper-deep); font-size: 1.08em; font-weight: 500; }
/* The index holds its own column so a wrapped line returns to the text edge
   instead of running back under the number. Matches the paragraph type beside
   it, so the two cards still read as one material. */
.home-offering-pair .offering-sessions {
  display: grid;
  gap: 26px;
  margin: 26px 0 0;
  padding: 0;
  color: rgba(236,229,218,0.8);
  font-size: 22px;
  list-style: none;
}
.home-offering-pair .offering-sessions li {
  display: grid;
  align-items: baseline;
  grid-template-columns: auto minmax(0,1fr);
  column-gap: 12px;
}
.offering-session-index { color: rgba(236,229,218,0.55); font-size: 1.08em; font-variant-numeric: tabular-nums; }
/* The name is the thing being named, so it holds its own line. A stack rather
   than display:block on the strong, so the space under the name is authored
   instead of inherited from the line box. */
.offering-session-body { display: grid; gap: 0; }
.home-teams .offering-card {
  min-height: 530px;
  padding: clamp(32px,3.4vw,48px);
  overflow: hidden;
  border: 1px solid rgba(236,229,218,0.1);
  border-radius: var(--radius);
  background: rgba(255,255,255,0.028);
}
.home-teams .offering-card:first-child {
  padding-right: clamp(32px,3.4vw,48px);
  background:
    radial-gradient(ellipse 88% 60% at 4% 4%, rgba(201,134,131,0.07), transparent 72%),
    rgba(255,255,255,0.025);
}
.home-teams .offering-card + .offering-card {
  padding-left: clamp(32px,3.4vw,48px);
  border-left: 1px solid rgba(236,229,218,0.1);
  background:
    radial-gradient(ellipse 88% 62% at 96% 2%, rgba(167,215,186,0.1), transparent 72%),
    rgba(255,255,255,0.025);
}
.home-teams .offering-card::before {
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0);
}
/* Focus now lands on the action inside the card, so the card answers for it. */
.home-teams .offering-card:hover::before,
.home-teams .offering-card:has(.offering-action:focus-visible)::before { background: rgba(255,255,255,0.045); }
.home-teams .home-offering-pair p { max-width: 38rem; font-size: 23px; }
/* Same rebalance as the hero: the title gets room to be a title, the sessions
   sit together as one set, and the action is separated from the prose it
   follows rather than crowding it. */
.home-teams .home-offering-pair .offering-sessions { max-width: 38rem; margin-top: 34px; gap: 28px; font-size: 23px; }
.home-teams .offering-card .offering-action { padding-top: 52px; }

.home-paths { background: transparent; }
/* A single broad lift in the ground under the row. With the cards' shadow gone
   this is what seats them: light gathering where they stand, not an effect
   attached to each card. */
.home-page .home-paths.section-pad {
  padding-block: clamp(132px,14vw,224px);
  background: radial-gradient(ellipse 68% 32% at 50% 60%, rgba(255,255,255,0.46), transparent 74%);
}
.home-paths-intro .label { margin-bottom: 16px; }
/* Roughly two thirds of the band, held in ch rather than a percentage. The cap
   has to scale with the type or `text-wrap: balance` changes its mind: every
   percentage cap that reads right at 1665 flips to a fourth, badly filled line
   by 1440. In ch it holds two well-filled lines at every width. */
.home-paths-intro h2 { max-width: 24.42ch; }
/* A band's intro may carry a supporting line; it sits on the reading measure
   under the heading rather than crowding it. */
.home-paths-intro > p:not(.label) { max-width: var(--measure); margin-top: 24px; color: var(--dim); }
.path-grid {
  --band-bleed: clamp(28px,3.2vw,50px);
  display: grid;
  margin-top: clamp(56px,7vw,88px);
  margin-inline: calc(-1 * var(--band-bleed));
  padding-inline: var(--band-bleed);
  border-block: 1px solid var(--rule);
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.path-card {
  display: flex;
  position: relative;
  min-height: 330px;
  flex-direction: column;
  padding: clamp(34px,4vw,50px) 0;
  color: var(--ink);
  text-decoration: none;
  transition: background 260ms var(--ease);
}
/* Same rail rule as the training band: the gutter lives between the columns, so
   the first card's text starts on the page rail and the last card's ends on it. */
.path-card:first-child { padding-right: var(--band-bleed); }
.path-card + .path-card { border-left: 1px solid var(--rule); padding-inline: var(--band-bleed); }
.path-card:last-child { padding-right: 0; }
/* The hover surface is the whole column, so it needs the same breathing room on
   the rail side that the gutter already gives the text on the inside. Tinting
   the padding box alone left the fill hugging the first and last card's text. */
.path-card::before, .offering-card::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  transition: background 260ms var(--ease);
}
.path-card:first-child::before, .offering-card:first-child::before { left: calc(-1 * var(--band-bleed)); }
.path-card:last-child::before, .offering-card:last-child::before { right: calc(-1 * var(--band-bleed)); }
.path-card:hover::before,
.path-card:has(.path-action:focus-visible)::before { background: rgba(13,91,58,0.035); }
/* A white lift and a paper-light action are answers to a dark ground. Left
   unscoped they also reached the light training cards, where `:hover` outranks
   that band's own pine rule and turned the action white on cream. Both belong
   to the dark field that earns them. */
.home-teams .offering-card:hover::before,
.home-teams .offering-card:has(.offering-action:focus-visible)::before { background: rgba(255,255,255,0.045); }
.home-teams .offering-card:hover .offering-action { color: var(--paper-light); }
.path-research { background: linear-gradient(145deg, var(--mint-light), rgba(var(--air-c),0.22)); }
.path-products, .path-about { background: transparent; }
.path-card > * { position: relative; z-index: 1; }
.path-card h3 { font-size: 40px; line-height: 1.15; }
.path-card p { margin-top: 24px; color: var(--dim); font-size: 22px; }
.path-action { margin-top: auto; padding-top: 42px; }
.home-paths .path-grid {
  --band-bleed: 0px;
  /* One step, and every offset is a whole number of it. The offsets were 54 and
     88 — no shared unit — so the row read as unevenly broken rather than as
     terrain. Equal cards at 0, 1 and 2 steps keep the play and give it a rule. */
  --terrain-step: 44px;
  /* Stretch, so the three destinations are equal because they share a row and
     not because a number was large enough. The terrain offsets ride on
     `translate`, which leaves layout alone and composes with the hover's
     `transform`; the padding gives back the ground the lowest card stands on. */
  align-items: stretch;
  gap: clamp(18px,2.2vw,34px);
  margin-inline: 0;
  padding-inline: 0;
  padding-bottom: calc(var(--terrain-step) * 2);
  border-block: 0;
}
.home-paths .path-card {
  overflow: hidden;
  padding: clamp(34px,3.6vw,52px);
  border: 1px solid rgba(23,37,31,0.1);
  border-radius: var(--radius);
}
.home-paths .path-card::before { inset: 0; border-radius: inherit; }
.home-paths .path-card:hover::before,
.home-paths .path-card:has(.path-action:focus-visible)::before { background: rgba(255,255,255,0.2); }
/* A hover changes the equilibrium of the row rather than lifting one isolated
   tile. The active card gains a little presence while its neighbours answer at
   different depths, like connected water finding a new level. Scale keeps the
   moving card beneath the pointer; reduced-motion and touch retain the terrain. */
@media (min-width: 981px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page .home-paths .path-card {
    transform-origin: center;
    transition: transform 420ms var(--ease), border-color 320ms var(--ease);
  }
  .home-page .home-paths .path-grid:has(.path-card:hover) .path-card:not(:hover) {
    transform: translateY(2px) scale(0.998);
  }
  .home-page .home-paths .path-card:hover {
    z-index: 2;
    border-color: rgba(23,37,31,0.16);
    transform: translateY(-5px) scale(1.01);
  }
  .home-page .home-paths .path-grid:has(.path-card:first-child:hover) .path-card:nth-child(2),
  .home-page .home-paths .path-grid:has(.path-card:last-child:hover) .path-card:nth-child(2) {
    transform: translateY(4px) scale(0.997);
  }
  .home-page .home-paths .path-grid:has(.path-card:first-child:hover) .path-card:last-child,
  .home-page .home-paths .path-grid:has(.path-card:last-child:hover) .path-card:first-child {
    transform: translateY(1px) scale(0.999);
  }
  .home-page .home-paths .path-grid:has(.path-card:nth-child(2):hover) .path-card:not(:hover) {
    transform: translateY(3px) scale(0.998);
  }
}
/* The designed floor for three equal destinations. The row keeps them equal
   above it, so copy that outgrows the floor lifts all three together rather
   than making one card imply an importance the content does not have. */
.home-paths .path-card { min-height: 444px; }
.home-paths .path-products {
  translate: 0 var(--terrain-step);
  background:
    radial-gradient(ellipse 88% 62% at 8% 4%, rgba(201,134,131,0.12), transparent 68%),
    rgba(251,248,241,0.72);
}
.home-paths .path-research {
  background:
    radial-gradient(ellipse 86% 58% at 92% 8%, rgba(255,255,255,0.42), transparent 72%),
    rgba(var(--air-c),0.78);
}
.home-paths .path-about {
  translate: 0 calc(var(--terrain-step) * 2);
  background:
    radial-gradient(ellipse 80% 64% at 4% 96%, rgba(var(--air-b),0.24), transparent 72%),
    rgba(244,235,228,0.66);
}
.home-connect {
  position: relative;
  display: flex;
  min-height: 66svh;
  overflow: hidden;
  align-items: center;
  isolation: isolate;
  /* Keeps the deliberate edge against the continuum's mint, then lifts toward
     the footer so the last quarter of the page is not a flat panel. */
  background: linear-gradient(180deg, var(--paper-deep) 0%, #eee8de 52%, var(--closing-ground) 100%);
  color: var(--ink);
}
.home-connect > .shell { position: relative; z-index: 1; width: 100%; }
.home-connect-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  /* The atmosphere must dissolve before the section edge. Clipping a blurred
     field at the footer printed its final tinted row as a horizontal seam. */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 72%, transparent 100%);
}
.home-connect-atmosphere i {
  position: absolute;
  display: block;
  border-radius: 50%;
  filter: blur(74px);
}
.home-connect-atmosphere i:first-child {
  width: min(58vw,900px);
  aspect-ratio: 1.35;
  top: 2%;
  right: -18%;
  background: var(--air-close-1);
  transform: translate3d(8%,-5%,0) scale(0.92);
}
.home-connect-atmosphere i:last-child {
  width: min(48vw,760px);
  aspect-ratio: 1.5;
  bottom: 3%;
  left: -20%;
  background: var(--air-close-2);
  transform: translate3d(-7%,6%,0) scale(0.9);
}
.home-connect h2 { color: var(--ink); }
.home-connect .label { color: var(--pine); }
.home-connect p { color: var(--dim); }
.home-connect-inner { display: grid; justify-items: center; text-align: center; }
.home-connect-inner h2 { max-width: 18ch; }
.forum-page .home-connect-inner h2 { max-width: 30ch; }
.home-connect-inner > p:not(.label) { max-width: 40rem; margin-top: 32px; font-size: 28px; }
.home-connect-inner .btn { margin-top: 34px; }

/* Hub */
.subpage-hero { position: relative; overflow: hidden; padding-block: clamp(176px,21vh,240px) clamp(92px,10vw,140px); }
.subpage-hero-inner { position: relative; z-index: 2; }
.subpage-hero h1 { max-width: 11ch; }
.hub-mission {
  display: grid;
  min-height: 48svh;
  overflow: hidden;
  align-content: center;
  padding-block: clamp(96px,10vw,156px);
  background:
    radial-gradient(ellipse 54% 46% at 88% 34%, rgba(var(--air-b),0.48), transparent 72%),
    radial-gradient(ellipse 48% 45% at 8% 66%, rgba(var(--air-a),0.4), transparent 74%),
    var(--break-ground);
}
.hub-mission-inner { display: grid; justify-items: center; }
.hub-mission-statement { display: grid; width: 100%; justify-items: center; }
.hub-mission h2 { max-width: 25ch; font-size: clamp(42px,4.6vw,72px); line-height: 1.08; text-align: center; }
.hub-testimonial { position: relative; isolation: isolate; width: min(100%, 60rem); margin-inline: auto; }
.hub-testimonial blockquote { margin: 0; }
/* Someone else's words about the work carry it, so they are stated at the
   scale of a claim rather than set as a caption. */
.hub-testimonial blockquote p { position: relative; z-index: 1; max-width: none; color: var(--ink); font-family: var(--serif); font-size: clamp(30px,2.9vw,44px); font-weight: 350; letter-spacing: -0.018em; line-height: 1.26; }
/* The portrait sits beside the attribution rather than above it, so the person
   and their name read as one line of credit under the quote. */
.hub-testimonial figcaption { position: relative; z-index: 1; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; column-gap: 15px; row-gap: 2px; margin-top: 30px; color: var(--faint); font-size: var(--secondary); line-height: 1.35; }
.hub-testimonial-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  background: rgba(13,91,58,0.08);
}
/* Stands in only until a real photograph is approved. */
.hub-testimonial-initials { display: grid; place-items: center; color: var(--pine); font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0.06em; }
.hub-testimonial-person { display: grid; gap: 2px; }
.hub-testimonial figcaption strong { color: var(--pine); font-weight: 600; }
.hero-atmosphere-soft i { opacity: 0.38; }
.hub-sessions {
  padding-bottom: clamp(54px,5vw,76px);
  background:
    radial-gradient(ellipse 68% 50% at 96% 34%, rgba(var(--air-c),0.9), transparent 67%),
    linear-gradient(180deg, var(--paper) 0%, var(--paper-light) 46%, var(--paper-light) 100%);
}
.hub-sessions .section-intro h2 { max-width: 22ch; }
.hub-session-meta { margin: 30px 0 0; color: var(--pine); font-size: 14px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
/* This page's offer, in the terrain grammar Home uses for its own destinations:
   equal rooms, each gathering its own light, offset so the row reads as ground
   rather than a table. The pair had only been recoloured for paper — it kept the
   ruled-column layout Home's dark field gives it, which left the one section
   selling the training as the flattest thing on the page.
   Stretch and `translate` for the same reason as everywhere else: as a margin
   the offset makes the lower card's own box taller and the two stop matching. */
/* Level, not staggered. This band is three things — two sessions and the
   Practice Lab beneath them — so offsetting one of the two reads as a slip
   rather than terrain. The stagger belongs where a row is the whole thought. */
.hub-training-pair {
  align-items: stretch;
  gap: clamp(22px,3vw,40px);
  margin-block: 58px clamp(22px,3vw,40px);
  border-block: 0;
}
.hub-training-pair .offering-card {
  padding: clamp(34px,3.6vw,52px);
  overflow: hidden;
  border: 1px solid rgba(23,37,31,0.1);
  border-radius: var(--radius);
  color: var(--ink);
  /* A beginning: mint gathering in the corner it opens from. */
  background:
    radial-gradient(ellipse 86% 58% at 6% 4%, rgba(var(--air-b),0.3), transparent 70%),
    rgba(251,248,241,0.78);
}
.hub-training-pair .offering-card + .offering-card {
  border-left: 1px solid rgba(23,37,31,0.1);
  /* Shared company practice, so it carries the warmer ground. */
  background:
    radial-gradient(ellipse 84% 60% at 94% 6%, rgba(201,134,131,0.14), transparent 70%),
    rgba(244,235,228,0.72);
}
.hub-training-pair .offering-card::before { inset: 0; border-radius: inherit; }
.hub-training-pair h3 { color: var(--ink); font-size: clamp(34px,3.4vw,48px); }
.hub-training-pair p { color: var(--dim); font-size: 24px; }
.hub-training-pair .offering-action { color: var(--pine); }
.hub-training-pair .offering-card:hover::before,
.hub-training-pair .offering-card:has(.offering-action:focus-visible)::before { background: rgba(13,91,58,0.035); }
/* The Practice Lab is an add-on to the two sessions, so it belongs to their
   band: same bleed, same rail, same rules, attached directly beneath the pair
   rather than floating beside it as a differently-shaped card. */
/* Stacked, not answered from the opposite column: this was a heading on the
   left track with its own sentence on the right, which is the one composition
   the site does not allow. */
.practice-lab { display: grid; align-items: start; gap: 18px; margin-top: 0; grid-template-columns: minmax(0,1fr); }
.practice-lab .label { margin-bottom: 8px; }
.practice-lab h3 { font-size: clamp(24px, 2.1vw, 30px); }
.practice-lab-copy > p { color: var(--dim); font-size: 24px; line-height: 1.55; }
.practice-lab-copy .link-list { margin-top: 18px; }
/* Between the forums and the research handoff, so it opens and closes on the
   page ground rather than being a flat slab ruled off from both. */
/* A break in the ground, not a card on it. Everywhere else a section sits on
   the page's light. */
.hub-credibility {
  position: relative;
  border-top: 0;
  color: var(--ink);
  padding-block: clamp(96px,10vw,148px);
  /* The page's one defined section. The research hand-off that used to hold this
     ground is gone, and the proof of the practice is what the room is for. */
  background:
    radial-gradient(ellipse 50% 46% at 10% 32%, rgba(var(--air-a),0.24), transparent 72%),
    radial-gradient(ellipse 46% 44% at 92% 74%, rgba(var(--air-b),0.2), transparent 74%),
    var(--break-ground);
}
/* The break is the page's own light at full strength, so each section carries
   its climate rather than a colour of its own. */
:root { --break-ground: var(--paper-deep); }
.hub-credibility-intro { max-width: none; }
.hub-credibility h2 { max-width: 24ch; }
/* Proof is scanned, not clicked through. This was a claim on the left answered
   by a card on the right showing one credential at a time, so the evidence for
   the whole practice was two clicks away and the section read as the split the
   rest of the site refuses. The claim is stated once and every credential
   stands under it, in one look. */
.hub-credential-set {
  display: grid;
  margin: clamp(48px,5vw,76px) 0 0;
  padding: 0;
  gap: clamp(28px,3.4vw,56px);
  grid-template-columns: repeat(3, minmax(0,1fr));
  list-style: none;
}
.hub-credential { display: grid; align-content: start; gap: 14px; color: var(--dim); font-size: 21px; line-height: 1.5; }
/* The index carries the count the old control spent a whole interaction on. */

/* The claim is centred and the evidence turns beneath it. Only the enhanced
   state stacks the three into one cell; the shipped list stays a readable row,
   which is also what a reduced-motion visitor and a printed page get. */
.hub-credibility-inner { display: grid; justify-items: center; text-align: center; }
.hub-credibility-intro { justify-items: center; text-align: center; }
.hub-credential-stage { display: grid; justify-items: center; width: 100%; }
[data-credential-ready] .hub-credential-set { grid-template-columns: minmax(0,1fr); justify-items: center; }
[data-credential-ready] .hub-credential {
  grid-area: 1 / 1;
  max-width: 52rem;
  justify-items: center;
  font-size: clamp(22px,2vw,28px);
  line-height: 1.45;
  visibility: hidden;
}
/* The first statement is short enough that the shared measure leaves it a
   long line and an orphan, so it is given its own narrower one. */
[data-credential-ready] .hub-credential:first-child { max-width: 43rem; }
[data-credential-ready] .hub-credential[data-credential-showing] { visibility: visible; }
/* One indicator for every carousel on the site. A step you are not on is a
   circle; the step showing opens into a track. Where the carousel turns itself,
   that track fills as its time runs down, so the change is announced rather
   than sprung on the reader — and it holds wherever the turning is paused.
   Colour comes from the surface through --turn-ink, so the same indicator works
   on paper and inside a dark room. */
.turn-dots { display: flex; align-items: center; gap: 16px; }
.turn-dots[data-turn-vertical] { flex-direction: column; }
.turn-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  position: relative;
  border: 1.5px solid var(--turn-ink, rgba(13,91,58,0.42));
  border-radius: 999px;
  background: none;
  cursor: pointer;
  transition: width 640ms var(--ease-grace), height 640ms var(--ease-grace), border-color 380ms var(--ease-grace);
}
.turn-dot:hover { border-color: var(--turn-ink-strong, var(--pine)); }
.turn-dot::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}
.turn-dot[aria-current="true"] { width: 38px; border-color: var(--turn-ink-strong, var(--pine)); }
[data-turn-vertical] .turn-dot[aria-current="true"] { width: 11px; height: 38px; }
/* A track filled solid, beside two open rings, reads as a switch someone turned
   on rather than a step counting itself down. The track keeps its outline and
   the count runs as a thin bar inside it: the same information, drawn as time
   passing instead of as a state that was set. */
.turn-dot i {
  display: block;
  position: absolute;
  top: 50%;
  left: 0;
  width: 0;
  height: 100%;
  background: var(--turn-ink-strong, var(--pine));
  border-radius: 999px;
  transform: translateY(-50%);
}
[data-turn-vertical] .turn-dot i { top: 0; left: 50%; width: 100%; height: 0; transform: translateX(-50%); }
/* A step you chose is simply full. Only one that will hand itself on counts down. */
.turn-dot[aria-current="true"] i { width: 100%; height: 100%; }
[data-turn-vertical] .turn-dot[aria-current="true"] i { width: 100%; height: 100%; }
/* The fill sits inside the border box, so a hairline of ground showed between
   it and the track's outline. It bleeds a pixel outward to close that seam —
   and only where there IS a fill: an empty step has zero width and still paints
   a shadow, which drew a mark beside every waiting dot. */
.turn-dot[aria-current="true"] i { box-shadow: 0 0 0 1px var(--turn-ink-strong, var(--pine)); }
[data-turn-timed] .turn-dot[aria-current="true"] i { animation: turn-fill-x var(--turn-span, 5400ms) linear forwards; }
[data-turn-timed][data-turn-vertical] .turn-dot[aria-current="true"] i { animation-name: turn-fill-y; }
[data-turn-timed][data-turn-resting] .turn-dot[aria-current="true"] i { animation-play-state: paused; }
/* Fine pointers keep the compact authored indicator. On touch, its invisible
   hit area reaches 44px and the steps separate far enough not to overlap. */
@media (pointer: coarse) {
  .turn-dots { gap: 33px; }
  .turn-dot::after { inset: -17px; }
  .turn-dot[aria-current="true"]::after { inset: -17px -3px; }
  [data-turn-vertical] .turn-dot[aria-current="true"]::after { inset: -3px -17px; }
}
@keyframes turn-fill-x { from { width: 0; } to { width: 100%; } }
@keyframes turn-fill-y { from { height: 0; } to { height: 100%; } }
.hub-credential-dots { margin-top: clamp(30px,3vw,44px); }
@media (prefers-reduced-motion: no-preference) {
  [data-credential-ready] .hub-credential[data-credential-showing] { animation: credential-enter 720ms var(--ease-grace) both; }
  [data-credential-ready] .hub-credential[data-credential-leaving] { visibility: visible; animation: credential-leave 520ms var(--ease-grace) both; }
  @keyframes credential-enter {
    from { opacity: 0; transform: translateX(-34px); }
    to { opacity: 1; transform: none; }
  }
  @keyframes credential-leave {
    from { opacity: 1; transform: none; }
    to { opacity: 0; transform: translateX(34px); }
  }
}
.hub-forums .home-paths-intro { display: grid; justify-items: start; max-width: var(--hero-field); text-align: left; }

/* Every other kicker on the site sits 22px from its heading; this one was
   inheriting Home's 16, which belongs to an intro with no sentence under it. */
.hub-forums .home-paths-intro .label { margin-bottom: 22px; }
.hub-forums .home-paths-intro h2 { max-width: 19ch; }
/* `:not(.label)` or this catches the kicker too — it is also a `p` — and sets a
   12px uppercase label at 28px in body colour. The base rule already excludes
   it; the override has to as well. */
.hub-forums .home-paths-intro > p:not(.label) { max-width: 48rem; margin-top: clamp(22px, 2.4vw, 36px); color: rgba(255,255,255,0.72); font-size: 28px; }
/* The sentence and its list are one thought, so the list inherits the paragraph's
   size and sits close beneath it rather than starting a second block. */
.hub-forum-outcomes { max-width: 48rem; margin: 12px 0 0; padding-left: 0; font-size: 28px; color: rgba(255,255,255,0.72); line-height: 1.45; list-style: none; }
.hub-forum-outcomes li { display: grid; gap: 0 0.55em; grid-template-columns: auto minmax(0,1fr); }
.hub-forum-outcomes li + li { margin-top: 6px; }
.hub-outcome-index { color: rgba(167,215,186,0.6); font-variant-numeric: tabular-nums; }
/* Two peer rooms inside a dark field read the way Home's training pair does:
   contained surfaces sharing one material, each gathering its own faint light,
   staggered so the row feels like terrain rather than a table. */
.hub-forums .path-grid {
  --band-bleed: 0px;
  /* Same construction as Home's row, with this band's own 58px offset: stretch
     keeps the two rooms equal, the offset rides on `translate` so it cannot
     make one card's box taller, and the padding gives back the ground the
     lower card stands on. This also resets Home's 88px reservation, which
     arrives here because the band shares the `home-paths` class. */
  align-items: stretch;
  gap: clamp(22px,3vw,48px);
  margin-top: 58px;
  margin-inline: 0;
  padding-inline: 0;
  border-block: 0;
}
.hub-forums .path-card {
  /* Two equal rooms, stated once. Unequal cards would imply an importance
     hierarchy the content does not have; only the offset and light change. */
  min-height: 360px;
  padding: clamp(32px,3.4vw,48px);
  overflow: hidden;
  border: 1px solid rgba(236,229,218,0.1);
  border-radius: var(--radius);
  color: var(--paper-light);
  background:
    radial-gradient(ellipse 88% 60% at 4% 4%, rgba(201,134,131,0.07), transparent 72%),
    rgba(255,255,255,0.025);
}
/* No reserved second title line: the stagger already means these two titles
   were never going to sit on one baseline, so the reservation only opened a
   gap between a one-line title and the sentence it belongs to. */
.hub-forums .path-card + .path-card {
  border-left: 1px solid rgba(236,229,218,0.1);
  background:
    radial-gradient(ellipse 88% 62% at 96% 2%, rgba(167,215,186,0.1), transparent 72%),
    rgba(255,255,255,0.025);
}
.hub-forums .path-card::before { inset: 0; border-radius: inherit; }
.hub-forums .path-card:hover::before,
.hub-forums .path-card:has(.path-action:focus-visible)::before { background: rgba(255,255,255,0.045); }
.hub-forums .path-card p { color: rgba(255,255,255,0.68); font-size: 24px; }
.hub-forums .path-action { color: var(--paper-light); }
.hub-forums .route-grid-note { max-width: none; margin-top: 42px; color: rgba(255,255,255,0.68); font-size: 22px; text-align: center; }
.hub-forums .route-grid-note p { margin: 0; max-width: none; padding-top: 32px; }

.hub-inquire h2 { color: var(--ink); }
.hub-inquire .label { color: var(--pine); }
.hub-inquire p { color: var(--dim); }
/* A lighter clearing before the invitation, opened and closed by the ground
   itself. Held flat on paper-light it needed a rule above it and left a step
   below it, because the invitation resolves against the page ground. */
/* The page's second defined ground. Where the research is handed on is a change
   of subject, not a continuation of the offer, so the room changes with it. */

/* Editorial and utility fragments */
.band, .band-open { position: relative; }
.band-open { padding-block: clamp(176px,20vh,230px) clamp(86px,9vw,130px); }
.band { padding-block: clamp(76px,8vw,120px); }

/* Reading system for the long pieces. A page of even paragraphs gives a reader
   nowhere to enter, so the first line is set as an invitation and the account
   proper opens on a drop cap — the oldest signal in print that something is
   worth starting. Fraunces carries both; nothing else changes register. */
.longform { max-width: var(--measure); }
.longform > * + * { margin-top: 1.45em; }
.longform h2 { margin-bottom: 0.7em; }
.longform p { max-width: var(--measure); }
.story-intro { max-width: none; color: var(--ink); font-family: var(--serif); font-size: clamp(25px,2.1vw,33px); font-style: normal; font-weight: 350; line-height: 1.36; }
.story-intro + p { margin-top: 1.1em; }
.story-intro + p::first-letter {
  float: left;
  margin: 0.02em 0.08em 0 0;
  color: var(--pine);
  font-family: var(--serif);
  font-size: 4em;
  font-weight: 350;
  line-height: 0.8;
}

/* A contained surface with its own light, like every other held thing here. As
   a flat rose fill it was the one block on the site with no weather in it. */
.note {
  max-width: 680px;
  margin-top: 34px;
  padding: clamp(26px,2.4vw,34px);
  border: 1px solid rgba(201,134,131,0.28);
  border-radius: var(--radius-sm);
  background:
    radial-gradient(ellipse 86% 64% at 8% 6%, rgba(255,255,255,0.5), transparent 72%),
    var(--rose);
}
.note .label { margin-bottom: 10px; color: var(--pine); }
.note p { color: var(--dim); }
.checks { max-width: 650px; margin: 26px 0 0; padding: 0; list-style: none; }
.checks li { position: relative; padding-left: 26px; color: var(--dim); }
.checks li + li { margin-top: 13px; }
.checks li::before { position: absolute; top: 0.6em; left: 0; width: 8px; height: 9px; background: var(--pine); clip-path: var(--hex); content: ""; }


/* Offer pages: compact sales artifacts with varied, web-native compositions. */
.offer-page main { background: var(--paper-light); }
/* Offer prose is a reading register, not the site's 30px statement register.
   `:where()` keeps this scope light enough for the deliberately smaller
   decision-list copy below to retain its own size. */
.offer-page main :where(p:not(.label, .lede)) { font-size: 24px; }
/* Leaf tier: no atmospheric orbs. A quiet tonal field keeps the warmth without
   repeating the doorway treatment on four sibling pages. */
/* A diagonal ramp ends on an uneven edge and creases the join, so these settle
   vertically like every other doorway on the site, and carry their own light
   rather than a flat wash. */
.offer-hero {
  position: relative;
  overflow: hidden;
  padding-block: clamp(168px,19vh,206px) clamp(76px,8vw,104px);
  background:
    radial-gradient(ellipse 52% 48% at 96% 34%, rgba(var(--air-b),0.4), transparent 70%),
    radial-gradient(ellipse 44% 46% at 2% 66%, rgba(var(--air-a),0.34), transparent 72%),
    linear-gradient(180deg, var(--paper-light) 0%, var(--paper-light) 54%, var(--hero-settle) 100%);
}
.training-page .offer-hero { padding-top: clamp(118px,13vh,166px); }
.offer-hero.forum-hero {
  background:
    radial-gradient(ellipse 54% 48% at 94% 34%, rgba(167,215,186,0.44), transparent 70%),
    radial-gradient(ellipse 42% 46% at 3% 66%, rgba(var(--air-a),0.3), transparent 72%),
    linear-gradient(180deg, var(--mint-light) 0%, var(--paper-light) 56%, var(--hero-settle) 100%);
}
.offer-hero-grid { position: relative; z-index: 2; display: grid; align-items: center; gap: clamp(48px,8vw,112px); grid-template-columns: minmax(0,1.45fr) minmax(280px,0.52fr); }
/* An offer name is still page metadata. Keeping the shared Label contract makes
   the claim—not a second serif headline—the first read. */
.offer-hero-copy .label { margin-bottom: 18px; }
/* 14ch broke a display claim into five short lines and left the right half of
   the column empty. The claim gets a measure it can actually fill. */
.offer-hero-copy h1 { max-width: 19ch; }
.offer-hero-copy .lede { max-width: var(--measure); margin-top: 30px; }
.offer-hero-copy > p:not(.label):not(.lede) { max-width: var(--measure); margin-top: 20px; color: var(--dim); }
.offer-facts { margin: 0; padding-left: clamp(30px,4vw,48px); border-left: 1px solid var(--rule); }
.offer-facts div { padding-block: 20px; }
.offer-facts div + div { border-top: 1px solid var(--rule); }
.offer-facts dt { color: var(--pine); font-size: 14px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; }
.offer-facts dd { margin: 8px 0 0; color: var(--dim); font-size: var(--secondary); line-height: 1.45; }
/* The reference rail gets one compact diagram of the format it describes.
   Foundations brings uneven starting points onto common ground; Playbook gathers
   separate methods into one shared artifact; forums return one subject at two
   discussion times. Facts remain the accessible source of truth. */
.offer-fact-visual { padding-block: 6px 18px; }
.offer-fact-visual svg { display: block; width: 100%; height: auto; overflow: visible; }
.offer-fact-visual path,
.offer-fact-visual circle { vector-effect: non-scaling-stroke; }
.offer-fact-path,
.offer-fact-orbit,
.offer-fact-trail { fill: none; stroke: rgba(13,91,58,0.34); stroke-width: 1.5; }
.offer-fact-orbit-inner { stroke: rgba(13,91,58,0.16); }
.offer-fact-orbit-middle { stroke: rgba(13,91,58,0.24); }
.offer-fact-ring { fill: var(--paper-light); stroke: rgba(13,91,58,0.28); stroke-width: 1; }
.offer-fact-node,
.offer-fact-center { fill: var(--pine); }
.offer-fact-visual-forum .offer-fact-node {
  offset-path: path("M42 59c0-25 53-45 118-45s118 20 118 45-53 45-118 45S42 84 42 59Z");
  offset-distance: 0%;
  offset-rotate: 0deg;
}
.offer-fact-visual-forum .offer-fact-node:nth-of-type(2) { offset-distance: 50%; }
.offer-fact-visual-product-forum .offer-fact-node-outer { offset-path: path("M42 59c0-25 53-45 118-45s118 20 118 45-53 45-118 45S42 84 42 59Z"); offset-distance: 8%; offset-rotate: 0deg; }
.offer-fact-visual-product-forum .offer-fact-node-middle { offset-path: path("M69 59c0-20 41-36 91-36s91 16 91 36-41 36-91 36-91-16-91-36Z"); offset-distance: 43%; offset-rotate: 0deg; }
.offer-fact-visual-product-forum .offer-fact-node-inner { offset-path: path("M100 59c0-12 27-22 60-22s60 10 60 22-27 22-60 22-60-10-60-22Z"); offset-distance: 76%; offset-rotate: 0deg; }
@media (prefers-reduced-motion: no-preference) {
  .offer-fact-visual-forum .offer-fact-node { animation: offer-fact-revolve 48s linear infinite; }
  .offer-fact-visual-forum .offer-fact-node:nth-of-type(2) { animation-delay: -24s; }
  .offer-fact-visual-product-forum .offer-fact-node-outer { animation: offer-fact-revolve 56s linear infinite; }
  .offer-fact-visual-product-forum .offer-fact-node-middle { animation: offer-fact-revolve 48s linear infinite reverse; }
  .offer-fact-visual-product-forum .offer-fact-node-inner { animation: offer-fact-revolve 40s linear infinite; }
}
@keyframes offer-fact-revolve { to { offset-distance: 100%; } }
.offer-foundations-scene { position: relative; height: clamp(150px,12vw,184px); overflow: hidden; }
.offer-fact-participant { position: absolute; z-index: 3; width: 12px; height: 12px; border-radius: 50%; background: var(--pine); box-shadow: 0 0 0 4px var(--paper-light); }
.offer-fact-participant.is-left { bottom: 44px; left: calc(10% - 6px); }
.offer-fact-participant.is-center { bottom: 82px; left: 50%; transform: translateX(-50%); }
.offer-fact-participant.is-right { right: calc(10% - 6px); bottom: 44px; }
.offer-fact-table {
  position: absolute;
  z-index: 2;
  right: 10%;
  bottom: 12px;
  left: 10%;
  height: 76px;
  border: 1.5px solid var(--pine);
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 42%, rgba(255,255,255,0.72), rgba(255,255,255,0.28) 68%, rgba(13,91,58,0.08));
  box-shadow: inset 0 -8px 18px rgba(13,91,58,0.08), 0 13px 22px rgba(27,39,33,0.07);
}
.offer-fact-shared { position: absolute; top: 50%; left: 50%; width: 26px; height: 28px; border: 1.5px solid var(--pine); background: rgba(13,91,58,0.72); clip-path: polygon(50% 0,94% 25%,82% 82%,18% 82%,6% 25%); transform: translate(-50%,-50%); }
.offer-fact-book { fill: rgba(255,255,255,0.42); stroke: var(--pine); stroke-width: 1.5; }
.offer-fact-fold,
.offer-fact-page-line { fill: none; stroke: rgba(13,91,58,0.48); stroke-width: 1.25; }

.offer-case {
  background:
    radial-gradient(ellipse 46% 48% at 4% 34%, rgba(var(--air-b),0.3), transparent 70%),
    linear-gradient(180deg, var(--hero-settle) 0%, var(--paper-light) 42%, var(--paper) 100%);
}
.offer-case-grid { width: 100%; }
.offer-recognition > p:not(.label) { margin-top: 28px; color: var(--dim); }
.offer-case .offer-recognition > p:not(.label) { max-width: 54rem; margin-inline: auto; font-size: clamp(20px,1.75vw,28px); line-height: 1.4; }
.offer-case-detail { max-width: var(--measure); margin-top: 44px; margin-inline: auto; border-block: 1px solid var(--rule); }
.offer-case-detail article { padding-block: clamp(30px,4vw,48px); }
.offer-case-detail article + article { border-top: 1px solid var(--rule); }
.offer-case-detail h3 { max-width: 20ch; }
.offer-case-detail p:not(.label) { margin-top: 22px; color: var(--dim); }

/* What the team leaves with. This is the page's one dark turn: the concrete
   return is separated from the situation before the mechanism opens back into
   daylight. */
.offer-decision { background: var(--pine-deep); }
.offer-decision h2, .offer-decision h3 { color: var(--paper-light); }
.offer-decision-inner > p:not(.label) { max-width: var(--measure); margin-top: 24px; color: rgba(255,255,255,0.72); }
.offer-decision-list {
  display: grid;
  margin: clamp(46px,5vw,68px) 0 0;
  padding: 0;
  border-top: 1px solid var(--rule-invert);
  grid-template-columns: repeat(2,minmax(0,1fr));
  list-style: none;
}
.offer-decision-list li {
  display: grid;
  padding: 32px clamp(28px,4vw,58px) 36px 0;
  border-bottom: 1px solid var(--rule-invert);
  gap: 16px;
  grid-template-columns: auto minmax(0,1fr);
}
.offer-decision-list li:nth-child(even) {
  padding-right: 0;
  padding-left: clamp(28px,4vw,58px);
  border-left: 1px solid var(--rule-invert);
}
.offer-decision-list > li > span {
  color: #b8dfc7;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.1em;
}
.offer-decision-list h3 { max-width: 22ch; }
.offer-decision-list p { margin-top: 14px; color: rgba(255,255,255,0.72); font-size: 24px; line-height: 1.54; }
.offer-mid-action { margin-top: clamp(38px,4.5vw,58px); }

.offer-details {
  background:
    radial-gradient(ellipse 50% 46% at 97% 34%, rgba(var(--air-a),0.34), transparent 72%),
    radial-gradient(ellipse 42% 46% at 2% 66%, rgba(var(--air-b),0.26), transparent 72%),
    linear-gradient(180deg, var(--paper) 0%, #f3efe6 46%, var(--paper) 100%);
}

.offer-details-grid { width: 100%; }
.offer-details h2 { max-width: 19ch; }
/* Late in the page, the compact session plan sits beside its optional extension.
   The fit and FAQ movement changes direction below instead of repeating the same
   two-column silhouette inside one section. */
.offer-detail-pair { display: grid; align-items: start; gap: clamp(34px,3.4vw,54px) clamp(38px,4vw,68px); grid-template-columns: minmax(0,1fr) minmax(0,0.86fr); }
.offer-session-plan { max-width: var(--reading-column); }
.offer-session-plan > p:not(.label) { margin-top: 26px; color: var(--dim); }
.offer-plan-list { margin: 30px 0 0; padding-left: 1.1em; list-style: disc; }
.offer-plan-list li { padding-left: 0.24em; color: var(--dim); font-size: 21px; line-height: 1.48; }
.offer-plan-list li + li { margin-top: 16px; }
.offer-plan-list li::marker { color: var(--pine); font-size: 0.72em; }
.offer-practice-lab {
  padding: clamp(34px,3.6vw,52px);
  overflow: hidden;
  border: 1px solid rgba(23,37,31,0.1);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 86% 58% at 6% 4%, rgba(var(--air-b),0.3), transparent 70%),
    rgba(251,248,241,0.78);
}
.offer-practice-lab .label { margin-bottom: 14px; }
.offer-practice-lab h3 { max-width: 18ch; font-size: clamp(28px,2.6vw,38px); }
.offer-practice-lab .offer-plan-list { margin-top: 24px; }
.offer-buyer-check { display: grid; gap: clamp(50px,6vw,82px); margin-top: clamp(82px,9vw,124px); }
.offer-buyer-check .label { margin-bottom: 14px; }
.offer-faq > h3 { max-width: 22ch; font-size: clamp(24px,2.1vw,32px); }
.offer-faq { width: min(100%,60rem); min-width: 0; justify-self: start; }
.offer-faq details { border-top: 1px solid rgba(32,48,40,0.2); }
.offer-faq details:last-child { border-bottom: 1px solid rgba(32,48,40,0.2); }
.offer-faq summary { display: grid; align-items: center; padding-block: 22px; cursor: pointer; gap: 20px; grid-template-columns: minmax(0,1fr) auto; color: var(--ink); font-family: var(--serif); font-size: 24px; font-weight: 350; line-height: 1.25; list-style: none; }
.offer-faq summary::-webkit-details-marker { display: none; }
.offer-faq summary::after { content: "+"; color: var(--pine); font-family: var(--sans); font-size: 25px; font-weight: 400; line-height: 1; }
.offer-faq details[open] summary::after { content: "−"; }
.offer-faq summary:focus-visible { outline: 2px solid var(--pine); outline-offset: 4px; }
.offer-faq details p { margin: -4px 42px 22px 0; color: var(--dim); }
.offer-faq .offer-fit-answer { max-width: var(--reading-column); padding: 0 42px 24px 0; }
.offer-faq .offer-fit-answer p { margin: -4px 0 22px; }
.offer-faq .offer-fit-answer p + p { margin-top: 18px; }
.offer-close { color: var(--dim); }
.offer-close h2 { color: var(--ink); }
.offer-close .label { color: var(--pine); }
.offer-close p { color: var(--dim); }
.offer-page .offer-close .home-connect-inner > p:not(.label) { font-size: 24px; }
.offer-close .btn { margin-top: 30px; }
/* Placement only. Block rather than flex: as a flex item the arrow stops being
   an atomic inline box and the underline draws straight through it. */
.link-block { display: block; width: max-content; margin-top: 24px; }

.forum-purpose {
  background:
    radial-gradient(ellipse 46% 48% at 4% 34%, rgba(var(--air-b),0.32), transparent 70%),
    linear-gradient(180deg, var(--hero-settle) 0%, var(--paper-light) 42%, var(--paper) 100%);
}
.forum-purpose-grid { width: 100%; }
/* The page's own belief. Every section on an offer page was a 48px head over a
   left-aligned column, so four different jobs wore one shape and nothing ever
   claimed the frame. This is the premise the whole page rests on, so it is
   composed the way Home's belief is — stated once, at statement scale, with the
   room to be read — and the working sections after it stay quiet on purpose
   rather than by accident. */
/* The statement opens on the page's own left edge, like every other section
   heading on the site. Centred, it read as a pull quote floating in a band
   rather than the argument the page turns on. */
/* `start` aligns a grid child left, but it also makes it shrink to its own
   content. The text belongs left; the surfaces still fill the section. */
.forum-purpose-grid, .offer-case-grid { display: grid; justify-items: center; text-align: center; }
/* The statement is centred; the parallel sub-arguments beneath it are prose and
   return to a reading alignment, because two ruled articles set centre read as
   an inscription rather than as something to be read through. */
.offer-case-detail, .forum-room-card { text-align: start; }
.forum-purpose h2, .offer-page .offer-case .offer-recognition h2 {
  /* A capped width with no auto margins centres its text inside a box that is
     still sitting on the left edge, which reads as nearly-aligned rather than
     as centred. The box has to be centred too. */
  margin-inline: auto;
  max-width: none;
  font-size: clamp(42px, 4.6vw, 72px);
  line-height: 1.04;
  letter-spacing: -0.045em;
}
.forum-purpose article, .offer-recognition article { display: grid; justify-items: stretch; width: 100%; }
.forum-purpose article > p:not(.label), .offer-recognition article > p:not(.label) { max-width: 46rem; margin-inline: auto; }
/* The statement is centred; the parallel sub-arguments beneath it are prose and
   return to their own left edge. Centred body copy in two columns is a headline
   treatment applied to reading. */
.offer-case-detail { text-align: left; }
.forum-purpose article > p:not(.label) { margin-top: 24px; color: var(--dim); }

.forum-room,
.forum-experience {
  background:
    radial-gradient(ellipse 50% 46% at 96% 34%, rgba(var(--air-a),0.32), transparent 72%),
    radial-gradient(ellipse 40% 46% at 3% 66%, rgba(var(--air-b),0.24), transparent 72%),
    linear-gradient(180deg, var(--paper) 0%, #f3efe6 48%, var(--paper) 100%);
}
.forum-room-card {
  display: grid;
  width: 100%;
  max-width: none;
  padding: clamp(38px,4.6vw,68px);
  border: 1px solid rgba(23,37,31,0.1);
  border-radius: var(--radius);
  gap: 24px clamp(38px,4vw,68px);
  grid-template-columns: repeat(2,minmax(0,1fr));
  background:
    radial-gradient(ellipse 86% 58% at 6% 4%, rgba(var(--air-b),0.3), transparent 70%),
    rgba(251,248,241,0.78);
}
.forum-room-card > .label,
.forum-room-card > h2 { grid-column: 1 / -1; }
.forum-room-card h2 { max-width: 26ch; }
.forum-room-card p { margin-top: 0; color: var(--dim); }
.forum-experience-grid { display: grid; align-items: start; gap: clamp(44px,6vw,88px); grid-template-columns: minmax(0,1.18fr) minmax(0,0.82fr); }
/* These surfaces are the section's own width, not a reading column sitting in
   it. Something upstream still resolves them to `--reading-column`, so the
   section states it directly where the surface belongs to the section. */
.forum-question-panel .checks { max-width: none; }
.forum-experience h2, .forum-experience h3 { color: var(--ink); }
.forum-experience h2 { max-width: 18ch; }
.forum-experience article > p:not(.label) { margin-top: 24px; color: var(--dim); }
.forum-question-panel {
  max-width: none;
  padding: clamp(34px,3.6vw,52px);
  overflow: hidden;
  border: 1px solid rgba(23,37,31,0.1);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 84% 54% at 94% 6%, rgba(var(--air-a),0.3), transparent 70%),
    rgba(251,248,241,0.8);
}
.forum-question-panel .label { margin-bottom: 14px; }
.forum-question-panel .checks { margin-top: 30px; }
.forum-question-panel .checks li { color: var(--dim); font-size: 24px; }
.forum-question-panel .checks li::before { background: var(--pine); }


/* Editorial routes: one reading line, full-bleed surfaces, one earned contrast. */
/* A doorway settles toward the ground the next section opens on, so the join is
   a change of light rather than a change of colour. */
.product-hero, .research-hero { position: relative; overflow: hidden; padding-block: clamp(186px,21vh,224px) clamp(92px,10vw,132px); background: linear-gradient(180deg, var(--paper-light) 0%, var(--paper-light) 52%, var(--hero-settle) 100%); }
/* Paper-backed doorways carry the atmospheric field; the tinted gateways
   (Research, About) get their weight from the gradient instead. */
.product-hero h1 { max-width: min(100%, 850px); }
.product-hero .lede { max-width: var(--measure); }
.product-hero-inner, .research-hero-inner { display: grid; justify-items: center; text-align: center; }
/* The page's whole argument lives here, and it was the one section with no
   weather in it: flat paper between a lit hero and a lit dark room. The light
   gathers on the left where the claim is made and again low on the right,
   behind the diagram, so the two halves belong to one place. */
/* Co-create is a room because it is a card. This argument is not in a card, so
   the ground has to carry it — the familiar earns the same standing.
   Both fields are anchored to the top and fade out inside their own tile. Sized
   as a share of the section they rescaled when the panel opened, and the one
   anchored to the bottom travelled a thousand pixels down the page; a tile that
   does not fade before its edge prints that edge as a line. */
.product-familiar {
  padding-block: clamp(100px,11vw,152px);
  background:
    radial-gradient(ellipse 66% 44% at 6% 34%, rgba(var(--air-c),0.5), transparent 72%),
    radial-gradient(ellipse 58% 42% at 95% 62%, rgba(var(--air-a),0.32), transparent 74%),
    var(--break-ground);
  background-size: 100% 900px, 100% 1180px, auto;
  background-position: 0 0, 0 0, 0 0;
  background-repeat: no-repeat;
}
.product-familiar-inner { max-width: none; }
.product-layout { display: grid; align-items: start; gap: 30px clamp(32px,4.2vw,64px); grid-template-columns: clamp(84px,8.6vw,124px) minmax(0, 60rem); }
.product-layout-visual { display: grid; width: clamp(84px,8.6vw,124px); min-height: clamp(84px,8.6vw,124px); margin-top: 4px; place-items: start center; }
.product-layout-copy { min-width: 0; }
.products-page .product-layout-copy h2 { max-width: none; text-wrap: balance; }
.product-familiar .product-layout-copy > p:not(.label) { max-width: 100%; }
/* The fields overlap inside one shared edge, like reflected light rather than
   four objects. Their low-opacity blur dissolves into the paper around them. */
/* Co-create carries a bounded product mark, so the familiar carries one at the
   same footprint. Left unbounded, its blur had nothing to bleed against at icon
   scale and read as a smudge beside a crisp neighbour; held in the same frame,
   the two are legible as siblings — one drawn as structure, one as weather. */
.product-orb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  isolation: isolate;
  background: linear-gradient(150deg, #fdfbf6, #f4efe5);
  border-radius: 26%;
  box-shadow: 0 20px 44px rgba(4,28,18,0.16);
  filter: saturate(0.9);
}
.product-orb i { position: absolute; width: 66%; aspect-ratio: 1; border-radius: 50%; filter: blur(clamp(11px,1vw,15px)); opacity: 0.78; }
.product-orb i:nth-child(1) { top: 2%; left: 4%; background: #e09aad; }
.product-orb i:nth-child(2) { top: 10%; right: -4%; background: #edbd8e; }
.product-orb i:nth-child(3) { bottom: -4%; left: 1%; background: #95cbb2; }
.product-orb i:nth-child(4) { right: 2%; bottom: 3%; background: #bca9d4; }
[data-disclosure-toggle] { display: none; margin-top: 34px; white-space: nowrap; }
[data-disclosure-toggle][data-disclosure-ready] { display: inline-flex; }
[data-disclosure-toggle][hidden] { display: none !important; }
.product-familiar-detail[hidden] { display: none; }
.product-familiar-detail { margin-top: 36px; }
/* Opening removes both the button and its collapsed-state breathing room, so
   the next paragraph simply continues the passage. */
.product-familiar-detail[data-disclosure-open] { margin-top: 20px; }
.product-familiar-detail > * + * { margin-top: 20px; }
/* Opens on the colour the familiar's room closes on, so the only edge on this
   page is where the doorway hands over. Compound selector because `.holds-field`
   sets a transparent ground later in the sheet at equal specificity. */
/* Co-create answers Agentic Familiar, so the two products need equal weight and
   unequal light: the familiar is argued on open paper, its workspace in a room
   of its own. The section carries the dark ground its own inverse type, action
   tokens and focus ring were already written for. */
.product-feature { padding-block: clamp(100px,11vw,152px); background: var(--pine-deep); }
.co-create-portal-mark { display: block; width: clamp(84px,8.6vw,124px); margin-top: 4px; }
/* The icon already carries its own rounded silhouette, so it needs no frame —
   only the lift that makes it read as an application sitting in the room. */
.co-create-portal-app-icon { display: block; width: 100%; height: auto; filter: drop-shadow(0 20px 44px rgba(4,28,18,0.42)); }
.co-create-portal-copy { display: grid; gap: 24px; max-width: none; color: rgba(255,255,255,0.74); }
.co-create-portal-copy p { margin: 0; max-width: var(--measure); color: rgba(255,255,255,0.74); line-height: 1.5; }
.product-feature h2 { color: var(--paper-light); }
.co-create-portal-copy > .btn { justify-self: start; margin-top: 12px; }

.research-hero { background: linear-gradient(180deg,var(--paper-light) 0%,var(--paper) 58%,var(--hero-settle) 100%); }
.research-hero h1 { max-width: 13ch; }

.research-close h2 { max-width: 22ch; }
.research-close > .stage > p { max-width: 58rem; margin-top: clamp(22px, 2.4vw, 36px); color: var(--dim); }
.research-close .link-list { justify-content: center; }
/* The two public paths are the same kind of handoff Home makes, so they use the
   same band rather than a second, narrower invention. */
/* The ground opens on the doorway's settle and returns to paper, so the room
   inside it is the only dark thing and the writing below stays on open paper. */
/* The room used to be a card held inside this section. Opening it to full width
   removed the card, so the section became the room and paints the ground itself.
   Its heading, question and position type were already written for dark. */
.research-questions { background: var(--pine-deep); }
.research-questions > .shell { max-width: none; }
.research-field-notes .section-intro h2 { max-width: 20ch; }
.question-heading { display: flex; align-items: start; justify-content: space-between; gap: 24px; }
.question-eyebrow { margin: 0; color: var(--mint); text-align: left; }
/* Before enhancement this is an ordinary reading list. Enhancement places all
   five cards on one horizontal shelf without making the prose depend on JS. */
.question-sequence {
  --question-gap: clamp(34px,3vw,52px);
  --question-inner-offset: 32vw;
  --question-outer-offset: 51vw;
  position: relative;
  margin-top: clamp(28px,3.5vw,50px);
}
.question-viewport {
  position: relative;
  left: 50%;
  width: 100vw;
  overflow: hidden;
  margin-left: -50vw;
}
.question-track { display: grid; gap: 28px; margin: 0; padding: 0; list-style: none; }
.question-slide {
  position: relative;
  display: grid;
  align-content: start;
  gap: 20px;
  min-height: 280px;
  padding: clamp(26px,3vw,42px);
  border: 1px solid rgba(38,31,28,0.1);
  border-radius: clamp(14px,1.5vw,22px);
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: 0 18px 56px rgba(0,0,0,0.08);
  overflow: hidden;
}
.question-slide:nth-child(1) { background: radial-gradient(circle at 84% 12%, rgba(234,211,208,0.9), transparent 42%), var(--paper-light); }
.question-slide:nth-child(2) { background: radial-gradient(circle at 12% 88%, rgba(229,173,117,0.46), transparent 44%), var(--paper-light); }
.question-slide:nth-child(3) { background: radial-gradient(circle at 88% 82%, rgba(196,185,218,0.56), transparent 44%), var(--paper-light); }
.question-slide:nth-child(4) { background: radial-gradient(circle at 14% 14%, rgba(238,189,157,0.58), transparent 42%), var(--paper-light); }
.question-slide:nth-child(5) { background: radial-gradient(circle at 82% 18%, rgba(172,198,224,0.58), transparent 44%), var(--paper-light); }
.question-choice { position: absolute; z-index: 2; inset: 0; width: 100%; padding: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.question-slide:has(.question-choice:hover) { border-color: rgba(38,31,28,0.24); }
.question-slide:has(.question-choice:focus-visible) { outline: 2px solid var(--paper-light); outline-offset: 4px; }
.question-title { position: relative; z-index: 1; max-width: 18ch; color: var(--ink); font-size: clamp(28px,2.6vw,42px); line-height: 1.08; text-wrap: balance; }
.question-answer { position: relative; z-index: 1; align-self: end; }
.question-answer[hidden] { display: none; }
.question-answer p { max-width: 56ch; color: var(--dim); font-size: clamp(18px,1.35vw,21px); line-height: 1.5; }
/* The open card is the one being read, so it carries reading type rather than
   the compact size its neighbours use as titles. */
@media (min-width: 981px) {
  [data-sequence-ready] .question-slide[data-question-active] .question-title { max-width: none; font-size: clamp(36px,3.5vw,56px); }
  [data-sequence-ready] .question-slide[data-question-active] .question-answer p { max-width: none; font-size: clamp(21px,1.65vw,27px); }
}
/* The active card owns twice the visual width of a neighbour. Outer cards sit
   across the rails, so a card visibly leaves one edge before returning at the
   other. Position and disclosure—not a green fill—carry selection. */
[data-sequence-ready] .question-viewport { height: clamp(390px,34vw,500px); }
[data-sequence-ready] .question-track { position: relative; height: 100%; }
[data-sequence-ready] .question-slide {
  position: absolute;
  top: 0;
  left: 50%;
  width: 18vw;
  min-width: 220px;
  height: 100%;
  opacity: 0.64;
  transform: translateX(-50%);
  transition: left 720ms var(--ease), width 720ms var(--ease), opacity 520ms var(--ease), transform 720ms var(--ease);
}
[data-sequence-ready] .question-slide[data-question-slot="-2"] { left: calc(50% - var(--question-outer-offset)); }
[data-sequence-ready] .question-slide[data-question-slot="-1"] { left: calc(50% - var(--question-inner-offset)); }
[data-sequence-ready] .question-slide[data-question-slot="0"] { z-index: 1; left: 50%; width: max(42vw,520px); opacity: 1; transform: translateX(-50%); }
[data-sequence-ready] .question-slide[data-question-slot="1"] { left: calc(50% + var(--question-inner-offset)); }
[data-sequence-ready] .question-slide[data-question-slot="2"] { left: calc(50% + var(--question-outer-offset)); }
[data-sequence-ready] .question-slide[data-question-slot="-3"] { left: calc(50% - var(--question-beyond-offset)); }
[data-sequence-ready] .question-slide[data-question-slot="3"] { left: calc(50% + var(--question-beyond-offset)); }
[data-sequence-ready] .question-slide[data-question-wrapping] { transition: none; }
[data-question-awaiting] .question-track { opacity: 0; }
[data-question-instant] .question-slide,
[data-question-instant] .question-title,
[data-question-instant] .question-answer { transition: none !important; }
[data-question-spinning] .question-track { opacity: 0; transition: opacity 180ms ease; }
[data-question-handoff] .question-track { transition: none; }
.question-spin-window { position: absolute; z-index: 3; inset: 0; overflow: hidden; pointer-events: none; }
.question-spin-track { position: absolute; top: 0; left: 50%; display: flex; height: 100%; align-items: stretch; gap: var(--question-gap); will-change: transform; }
.question-spin-card { flex: 0 0 auto; overflow: hidden; display: grid; align-content: start; gap: calc(var(--open,0) * 20px); opacity: calc(0.64 + var(--open,0) * 0.36); padding: clamp(26px,3vw,42px); border: 1px solid rgba(38,31,28,0.1); border-radius: clamp(14px,1.5vw,22px); color: var(--ink); box-shadow: 0 18px 56px rgba(0,0,0,0.08); }
.question-spin-card[data-question-tone="1"] { background: radial-gradient(circle at 84% 12%, rgba(234,211,208,0.9), transparent 42%), var(--paper-light); }
.question-spin-card[data-question-tone="2"] { background: radial-gradient(circle at 12% 88%, rgba(229,173,117,0.46), transparent 44%), var(--paper-light); }
.question-spin-card[data-question-tone="3"] { background: radial-gradient(circle at 88% 82%, rgba(196,185,218,0.56), transparent 44%), var(--paper-light); }
.question-spin-card[data-question-tone="4"] { background: radial-gradient(circle at 14% 14%, rgba(238,189,157,0.58), transparent 42%), var(--paper-light); }
.question-spin-card[data-question-tone="5"] { background: radial-gradient(circle at 82% 18%, rgba(172,198,224,0.58), transparent 44%), var(--paper-light); }
.question-spin-card .question-title { max-width: calc(18ch + var(--open,0) * 200ch); font-size: calc(clamp(28px,2.6vw,42px) + var(--open,0) * (clamp(36px,3.5vw,56px) - clamp(28px,2.6vw,42px))); line-height: 1.08; text-wrap: balance; opacity: calc(0.82 + var(--open,0) * 0.18); transform: translate3d(0,calc((1 - var(--open,0)) * 8px),0); }
.question-spin-card .question-answer { visibility: visible; overflow: hidden; max-height: calc(var(--open,0) * 60vh); opacity: var(--open,0); transform: none; }
.question-spin-card .question-answer p { max-width: calc(56ch + var(--open,0) * 200ch); margin: 0; color: var(--dim); font-size: calc(clamp(18px,1.35vw,21px) + var(--open,0) * (clamp(21px,1.65vw,27px) - clamp(18px,1.35vw,21px))); line-height: 1.5; }
[data-sequence-ready] .question-track > .question-slide .question-title {
  opacity: 0.82;
  transform: translate3d(0, 8px, 0);
  transition: font-size 720ms var(--ease), opacity 420ms var(--ease), transform 720ms var(--ease);
}
[data-sequence-ready] .question-slide[data-question-active] .question-title { opacity: 1; transform: none; }
[data-sequence-ready] .question-track > .question-slide .question-answer {
  visibility: hidden;
  opacity: 0;
  transform: translate3d(0, 14px, 0);
  transition: visibility 0s linear 220ms, opacity 220ms var(--ease), transform 320ms var(--ease);
}
[data-sequence-ready] .question-slide[data-question-active] .question-answer {
  visibility: visible;
  opacity: 1;
  transform: none;
  transition: visibility 0s linear 240ms, opacity 420ms var(--ease) 240ms, transform 520ms var(--ease) 240ms;
}
.question-controls { display: flex; justify-content: center; margin-top: clamp(28px,3.2vw,44px); }
.question-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
/* Both ways forward are named, so both are shaped like something you read and
   press. Held at the icon circle this control was still sized for a 22px arrow
   while carrying a two-word label, so the words left the button and landed on
   the one beneath it. The named step leads; the second way stays an outline. */
.question-step {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 20px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--paper-light);
  color: var(--pine-deep);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 220ms var(--ease), transform 220ms var(--ease);
}
.question-step:hover { background: #fff; }
.question-step:active { transform: scale(0.96); }
/* The second way in. It carries the step's own hairline and ink so the two
   controls read as one pair, and stays quiet enough that the question leads.
   Without a rule of its own it fell back to the browser's grey system button,
   which on this ground was the only thing on the page not from the world. */
.question-lucky {
  height: 44px;
  padding: 0 18px;
  border: 1px solid rgba(236,229,218,0.28);
  border-radius: 999px;
  background: none;
  color: var(--paper-light);
  font-family: var(--sans);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background 220ms var(--ease), border-color 220ms var(--ease), transform 220ms var(--ease);
}
.question-lucky:hover { border-color: rgba(236,229,218,0.5); background: rgba(255,255,255,0.07); }
.question-lucky:active { transform: scale(0.96); }
/* Disabled only while a spin is running, so the state reads as busy, not gone. */
.question-lucky[aria-disabled="true"], .question-step[aria-disabled="true"] { opacity: 0.5; cursor: wait; }
.question-position { margin: 0; color: rgba(255,255,255,0.72); font-family: var(--sans); font-size: 16px; font-weight: 600; letter-spacing: 0.12em; }
.question-track, .question-controls { position: relative; z-index: 1; }

/* Motion, site-wide. Home states the rule this follows in its own script:
   grounds gather as you arrive and content stays still, with one authored
   moment per page as the only exception. These are the two shared halves of
   that — the doorway arriving, and the grounds gathering as they are reached.
   Each page's own moment is composed where it lives.
   This is deliberately not a scroll reveal. Nothing a visitor reads is ever
   held back from them; only weather moves. */
@keyframes doorway-arrive { from { transform: translate3d(0,22px,0); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes doorway-gather { from { transform: scale(1.06); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: no-preference) {
  .hub-mission-statement[data-authored][data-authored-arrived] > * { animation: mission-capability-arrive 1100ms var(--ease-grace) both; }
  @keyframes mission-capability-arrive { from { opacity: 0; transform: translate3d(0,12px,0) scale(0.992); } to { opacity: 1; transform: none; } }
  /* The words of the doorway, in the order they are read. Home animates its own
     hero through GSAP, so every selector here is a non-Home entrance. */
  .gateway-hero .label,
  .gateway-hero-copy h1,
  .gateway-hero-support,
  .offer-hero-copy .label,
  .offer-hero-copy h1,
  .offer-hero-copy .lede,
  .offer-hero-copy .actions,
  .utility-hero-grid > *,
  .note-open > *,
  .note-archive-open > * { animation: doorway-arrive 820ms var(--ease) both; }
  .gateway-hero-copy h1,
  .offer-hero-copy h1,
  .note-open > *:nth-child(2),
  .note-archive-open > *:nth-child(2),
  .utility-hero-grid > *:nth-child(2) { animation-delay: 90ms; }
  .gateway-hero-support,
  .offer-hero-copy .lede,
  .note-open > *:nth-child(3) { animation-delay: 200ms; }
  .offer-hero-copy .actions { animation-delay: 300ms; }
  /* The field of a doorway settles with it rather than snapping in at full
     strength while every word around it is still easing. */
  .gateway-hero .hero-atmosphere,
  .offer-hero .hero-atmosphere,
  .utility-hero .hero-atmosphere { animation: doorway-gather 2200ms var(--ease) both; }
  /* The cue answers a question the visitor has not asked yet, so it arrives
     last, after the sentence that prompts it. */
  .gateway-hero .scroll-cue { animation: doorway-arrive 900ms var(--ease) 820ms both; }
  /* A ground below the fold is held only until it is reached. The script never
     marks a field that is already on screen: hiding one a visitor is looking at
     and fading it back is worse than not moving it at all. */
  [data-ground] { opacity: 0; transform: scale(1.07); transition: opacity 1700ms var(--ease), transform 2500ms var(--ease); }
  [data-ground][data-ground-settled] { opacity: 1; transform: none; }
  /* The one authored moment a page is allowed. Its parts arrive in the order
     they are read, the way the belief does on Home. Held only while it is still
     below the fold, and only ever once. */
  [data-authored][data-authored-waiting] > * { opacity: 0; }
  [data-authored][data-authored-arrived] > * { animation: doorway-arrive 760ms var(--ease) both; }
  [data-authored][data-authored-arrived] > *:nth-child(2) { animation-delay: 160ms; }
  [data-authored][data-authored-arrived] > *:nth-child(3) { animation-delay: 420ms; }
}
/* Field Notes is a body of writing, so the section is an index into it rather
   than the writing itself. Every note's full text used to render inline inside
   one dark field, which read as a single wall and gave a note no page, link, or
   life of its own. */
/* Writing reads centred wherever it appears. Left-anchored inside a full-width
   band, this list ran its content down the left 55% and left a 500px column of
   nothing beside it for 1500px of height — the same list reads as composed on
   its own page only because there it stands on the reading spine. It also had
   no weather at all, the one section on this page without any. */
.research-field-notes {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62% 46% at 94% 22%, rgba(var(--air-b),0.26), transparent 74%),
    radial-gradient(ellipse 58% 44% at 4% 84%, rgba(var(--air-a),0.3), transparent 76%),
    var(--break-ground);
}
.research-field-notes > .shell {
  position: relative;
  z-index: 1;
  max-width: calc(var(--measure) + 2 * var(--page-rail));
  margin-inline: auto;
}
.research-field-notes .section-intro > p { max-width: var(--measure); margin-top: clamp(22px, 2.4vw, 36px); color: var(--dim); }
/* The archive is a doorway into the writing, so it arrives like one: room above
   the name, and the same weather every other entrance carries. Not a full
   viewport — the list is the point, and it should begin on the first screen. */
.note-archive {
  position: relative;
  overflow: hidden;
  padding-block: clamp(148px,15vh,208px) clamp(96px,10vw,148px);
  background:
    radial-gradient(ellipse 54% 48% at 96% 34%, rgba(var(--air-c),0.6), transparent 70%),
    radial-gradient(ellipse 48% 46% at 2% 66%, rgba(var(--air-a),0.34), transparent 72%),
    linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 58%, var(--paper) 100%);
}
/* The archive stands on the same column its notes are read in, so the front
   door and the rooms behind it share one spine. */
.note-page .note-archive > .shell { max-width: calc(var(--measure) + 2 * var(--page-rail)); margin-inline: auto; }
.note-archive-open { display: grid; justify-items: center; max-width: none; text-align: center; }
.note-archive-open p { max-width: 46ch; margin-top: 20px; color: var(--dim); }
.note-index { display: grid; margin: clamp(52px,6vw,76px) 0 0; padding: 0; gap: 0; list-style: none; }
.note-index-entry { border-top: 1px solid var(--rule); transition: border-color 320ms var(--ease); }
.note-index-entry:last-child { border-bottom: 1px solid var(--rule); }
/* The rules exist to separate one note from the next. As a note gathers its own
   light under the pointer it stops needing them, so the lines that touch it —
   its own, and the one its neighbour draws above itself — step out of the way. */
.note-index-entry:has(.note-index-link:hover),
.note-index-entry:has(.note-index-link:focus-visible),
.note-index-entry:has(.note-index-link:hover) + .note-index-entry,
.note-index-entry:has(.note-index-link:focus-visible) + .note-index-entry { border-top-color: transparent; }
.note-index-entry:last-child:has(.note-index-link:hover),
.note-index-entry:last-child:has(.note-index-link:focus-visible) { border-bottom-color: transparent; }
/* The title is the destination, so the whole entry is one link and the row
   carries no second competing action. */
/* The whole row is the destination, so the whole row answers. Tinting only the
   title left most of a 44px-tall target inert under the pointer. The row bleeds
   past the text edge the way a path card's hover surface does, so the response
   has the same breathing room as the rest of the site's cards. */
.note-index-link {
  display: grid;
  align-items: start;
  grid-template-areas:
    "meta signature"
    "title signature"
    "excerpt signature";
  grid-template-columns: minmax(0,1fr) clamp(120px,18vw,170px);
  margin-inline: calc(-1 * clamp(16px,1.6vw,26px));
  padding: clamp(30px,3.4vw,44px) clamp(16px,1.6vw,26px);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background 260ms var(--ease);
}
.note-index-link:hover, .note-index-link:focus-visible { background: rgba(13,91,58,0.035); }
/* Field Notes carry abstract signals rather than miniature title illustrations.
   Kind chooses a visual grammar; the stable fingerprint variables vary its
   placement and turn without requiring hand art for each imported note. */
.note-index-entry { position: relative; }
.note-index-link { position: relative; isolation: isolate; }
.note-index-field {
  position: relative;
  z-index: 0;
  display: block;
  align-self: center;
  justify-self: end;
  grid-area: signature;
  width: clamp(112px,15vw,156px);
  aspect-ratio: 1.22;
  overflow: visible;
  pointer-events: none;
}
.note-open-field { position: relative; z-index: 0; display: block; width: clamp(124px,14vw,168px); aspect-ratio: 1.22; margin-bottom: 30px; overflow: visible; pointer-events: none; }
.note-art {
  position: absolute;
  inset: 0;
  display: block;
  opacity: 0.84;
  transform: translate3d(0,0,0) rotate(calc((var(--fp-turn) - 90deg) * 0.12));
  transform-origin: center;
  transition: opacity 320ms var(--ease), transform 560ms var(--ease);
}
.note-art > i {
  position: absolute;
  display: block;
}
/* The marks are quietly alive before a pointer ever reaches them. Each piece
   drifts only a few pixels over a long, unequal cycle, so the composition keeps
   its identity rather than performing an illustration. */
@media (prefers-reduced-motion: no-preference) {
  .note-art > i { animation: note-art-drift 19s ease-in-out infinite; }
  .note-art > i:nth-child(1) { --drift-a-x: 3px; --drift-a-y: -4px; --drift-b-x: -2px; --drift-b-y: -1px; --drift-c-x: 1px; --drift-c-y: 3px; animation-duration: 19s; animation-delay: -7s; }
  .note-art > i:nth-child(2) { --drift-a-x: -4px; --drift-a-y: 2px; --drift-b-x: 1px; --drift-b-y: 4px; --drift-c-x: 3px; --drift-c-y: -2px; animation-duration: 23s; animation-delay: -13s; }
  .note-art > i:nth-child(3) { --drift-a-x: 2px; --drift-a-y: 4px; --drift-b-x: 4px; --drift-b-y: -2px; --drift-c-x: -2px; --drift-c-y: -3px; animation-duration: 21s; animation-delay: -4s; }
  .note-art > i:nth-child(4) { --drift-a-x: -2px; --drift-a-y: -3px; --drift-b-x: -4px; --drift-b-y: 1px; --drift-c-x: 2px; --drift-c-y: 2px; animation-duration: 17s; animation-delay: -10s; }
  .note-art > i:nth-child(5) { --drift-a-x: 4px; --drift-a-y: 1px; --drift-b-x: -1px; --drift-b-y: -4px; --drift-c-x: -3px; --drift-c-y: 2px; animation-duration: 25s; animation-delay: -16s; }
  @keyframes note-art-drift {
    0%, 100% { translate: 0 0; }
    27% { translate: var(--drift-a-x) var(--drift-a-y); }
    58% { translate: var(--drift-b-x) var(--drift-b-y); }
    81% { translate: var(--drift-c-x) var(--drift-c-y); }
  }
}
/* Story: soft colour meeting and making a fourth colour between them. */
.note-art-story > i { border-radius: 50%; filter: saturate(1.08); }
.note-art-story > i:nth-child(1) { left: 4%; top: 16%; width: 62%; aspect-ratio: 1; background: rgba(231,155,145,0.72); }
.note-art-story > i:nth-child(2) { right: 0; top: 2%; width: 58%; aspect-ratio: 1; background: rgba(126,175,205,0.68); mix-blend-mode: multiply; }
.note-art-story > i:nth-child(3) { right: 12%; bottom: 0; width: 54%; aspect-ratio: 1; background: rgba(238,190,104,0.68); mix-blend-mode: multiply; }
.note-art-story > i:nth-child(4) { left: 34%; top: 37%; width: 19%; aspect-ratio: 1; background: rgba(251,248,241,0.9); }
.note-art-story > i:nth-child(5) { left: 13%; bottom: 5%; width: 18%; aspect-ratio: 0.42; border-radius: 999px; background: rgba(92,76,142,0.7); transform: rotate(-24deg); }
/* Experiment: a playful set of unlike pieces held in temporary relation. */
.note-art-experiment > i:nth-child(1) { left: 3%; top: 12%; width: 56%; height: 24%; border-radius: 999px; background: #9fd4bf; transform: rotate(-12deg); }
.note-art-experiment > i:nth-child(2) { right: 2%; top: 4%; width: 24%; aspect-ratio: 1; border-radius: 50%; background: #f0a39b; }
.note-art-experiment > i:nth-child(3) { left: 24%; top: 42%; width: 70%; height: 22%; border-radius: 999px; background: #b8afd9; transform: rotate(14deg); }
.note-art-experiment > i:nth-child(4) { left: 6%; bottom: 2%; width: 31%; aspect-ratio: 1; background: #f1c56e; clip-path: var(--hex); transform: rotate(calc(var(--fp-orbit) * 0.18)); }
.note-art-experiment > i:nth-child(5) { right: 10%; bottom: 4%; width: 16%; aspect-ratio: 1; border: 3px solid #5d8cb0; border-radius: 50%; }
/* Thesis: two fields remain distinct while a small third form holds the seam. */
.note-art-thesis > i:nth-child(1) { left: 2%; top: 4%; width: 48%; height: 90%; border-radius: 48% 16% 20% 44%; background: #7eb2c8; transform: rotate(-7deg); }
.note-art-thesis > i:nth-child(2) { right: 2%; top: 10%; width: 48%; height: 84%; border-radius: 18% 48% 42% 16%; background: #e69d94; transform: rotate(8deg); }
.note-art-thesis > i:nth-child(3) { z-index: 1; left: 40%; top: 34%; width: 22%; aspect-ratio: 1; border-radius: 50%; background: #f0c56e; }
.note-art-thesis > i:nth-child(4) { z-index: 2; left: 48%; top: 0; width: 3px; height: 100%; background: rgba(251,248,241,0.78); transform: rotate(4deg); }
.note-art-thesis > i:nth-child(5) { z-index: 2; left: 46%; bottom: 7%; width: 12%; aspect-ratio: 1; background: #604f88; clip-path: var(--hex); }
.note-index-meta { grid-area: meta; }
.note-index-title { grid-area: title; }
.note-index-excerpt { grid-area: excerpt; }
/* Pointing at a note brings its generated mark into clearer view. */
.note-index-link:hover .note-art,
.note-index-link:focus-visible .note-art { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .note-index-link:hover .note-art,
  .note-index-link:focus-visible .note-art { transform: rotate(calc((var(--fp-turn) - 90deg) * 0.16)) scale(1.055); }
}
.note-index-link:hover .note-index-title { color: var(--pine); }
.note-index-meta { display: flex; align-items: center; gap: 14px; margin: 0; color: var(--faint); font-size: 14px; letter-spacing: 0.02em; }
.note-kind { color: var(--pine); font-size: 12px; font-weight: 650; letter-spacing: 0.14em; text-transform: uppercase; }
.note-index-title { max-width: 30ch; margin-top: 14px; font-size: clamp(28px,2.7vw,40px); line-height: 1.1; transition: color 220ms var(--ease); }
/* The title is what a reader scans; the excerpt is what confirms the choice.
   At the inherited body size the two were nearly the same and the index read as
   a stack of paragraphs rather than a list of writing. */
.note-index-excerpt { max-width: 54ch; margin-top: 14px; color: var(--dim); font-size: 23px; line-height: 1.5; }
.note-index-all {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: clamp(28px,3vw,42px);
  padding: clamp(22px,2.4vw,30px) 0;
  border-block: 1px solid var(--rule);
  color: var(--pine);
  font-size: clamp(19px,1.7vw,24px);
  font-weight: 650;
  text-decoration: none;
}
.note-index + .note-index-all { border-top: 0; }
.note-index-all span:last-child { font-size: 28px; transition: transform 220ms var(--ease); }
.note-index-all:hover span:last-child, .note-index-all:focus-visible span:last-child { transform: translateX(6px); }
.note-index-compact .note-index-title { font-size: clamp(22px,2vw,28px); }
.note-index-compact .note-index-link { padding-block: clamp(24px,2.6vw,32px); }

/* A note's own page is a reading surface: the header states what it is, then
   the prose gets the measure and nothing beside it. */
/* Writing is the one part of this site that reads centred. Everywhere else is
   anchored to the left rail; a note is a reading place, and centring it gives
   Field Notes its own identity without leaving the world.
   The header, the prose, and the notes that follow all share one column, so the
   page has a single spine. Before this they had three different left edges —
   the title centred on 22ch, the prose on the measure, and the closing list out
   at the page rail — which is what made the page read as assembled parts. */
.note-open {
  position: relative;
  overflow: hidden;
  padding-block: clamp(176px,18vh,244px) clamp(56px,6vw,88px);
  background:
    radial-gradient(ellipse 62% 46% at 92% 26%, rgba(197,225,207,0.4), transparent 72%),
    radial-gradient(ellipse 58% 44% at 6% 78%, rgba(229,197,193,0.34), transparent 74%),
    linear-gradient(180deg, var(--paper-light) 0%, var(--paper-light) 46%, var(--paper) 100%);
}
.note-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.note-open-inner { position: relative; z-index: 1; display: grid; justify-items: center; max-width: calc(var(--measure) + 2 * var(--page-rail)); margin-inline: auto; text-align: center; }
.note-back { margin-bottom: 26px; color: var(--pine); font-size: 17px; font-weight: 500; text-decoration: none; }
.note-back span { display: inline-block; margin-right: 7px; transition: transform 220ms var(--ease); }
.note-back:hover span, .note-back:focus-visible span { transform: translateX(-4px); }
.note-open-meta { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 24px; color: var(--faint); font-size: 15px; }
.note-open h1 { max-width: 20ch; margin-inline: auto; font-size: clamp(38px,4.4vw,68px); line-height: 1.06; }
/* Calm paper under the reading itself — the one place on the site where an
   unworked ground is the point. It opens on the colour the header closes on. */
.note-body { padding-block: clamp(72px,8vw,110px) clamp(84px,9vw,124px); background: linear-gradient(180deg, var(--paper) 0%, var(--paper) 62%, var(--paper-light) 100%); }
.note-body .longform { max-width: var(--measure); margin-inline: auto; }
.note-more { padding-block: clamp(72px,8vw,112px) clamp(96px,10vw,140px); background: linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 100%); }
.note-more > .shell { display: grid; max-width: calc(var(--measure) + 2 * var(--page-rail)); margin-inline: auto; }
.note-more h2 { font-size: clamp(28px,2.6vw,40px); }

/* A horizontal settle, not a diagonal ramp: a diagonal ends on an uneven edge
   and creases the join with the section beneath it. The rose and mint this
   doorway needs drift in from .hero-atmosphere instead of being painted flat. */
.about-hero { padding-block: clamp(186px,21vh,224px) clamp(72px,7vw,96px); background: linear-gradient(180deg,var(--paper-light) 0%,var(--paper) 56%,var(--paper-light) 100%); }
/* About opens on a single broad statement rather than a column against a void. */
.about-hero h1 { max-width: min(100%, 1060px); }
/* The sentence turns rather than ends: the claim is set in the editorial voice
   and the qualification that completes it arrives in the operating one. It needs
   to read as the same sentence continuing, so it sits close and stays large. */
/* About's opening is one sentence that turns rather than a statement followed by
   explanation, so the second half is a subheading, not body copy: it holds the
   ink weight and enough scale to finish the line the display type began. The
   field is a little wider than the other doorways to give it room. */
/* About is a doorway, so it enters on the same left rail as Products, Research,
   and training. The broad sentence can carry its own width without becoming a
   separate, centred composition. */
.about-hero { --hero-field: min(100%, 60rem); }
/* The story is now a threshold rather than the account itself: why the Lab
   exists, then a way into the whole of it. The full story lives as a field note
   so it can be linked and read on its own. */
/* One statement and a way in. It needs enough air to be the page's turn, not so
   much that a single paragraph floats in a void. */
/* The ground opens on the doorway's settle and returns to the page, so the
   room inside it is the only dark thing between the claim and the founders. */
/* The origin stands between the two people and the story itself: the account on
   open ground, and beside it this page's one room, where the Familiar shows
   itself once. A threshold is exactly where it is allowed to appear. */
/* The same break the training page uses: the ground changes rather than a card
   arriving. See .hub-credibility for why this is the one place hard edges are
   allowed. */
.about-story {
  position: relative;
  overflow: hidden;
  padding-block: clamp(112px,11vw,164px);
  background:
    radial-gradient(ellipse 56% 46% at 86% 22%, rgba(var(--air-c),0.5), transparent 70%),
    radial-gradient(ellipse 54% 44% at 6% 86%, rgba(var(--air-a),0.44), transparent 72%),
    var(--break-ground);
}
.about-story-grid { display: grid; align-items: center; gap: clamp(34px,4vw,72px); grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
.about-story-copy { display: grid; justify-items: start; }
.about-story .label { margin-bottom: 22px; }
.about-story h2 { max-width: 24ch; color: var(--ink); font-size: clamp(30px,3vw,46px); font-weight: 350; line-height: 1.24; }
/* The claim is made in the serif and answered in the sans beneath it. At the
   inherited 30px this paragraph read as a second heading rather than its body. */
.about-story-copy p:not(.label) { max-width: 42ch; margin-top: 22px; color: var(--dim); font-size: 24px; line-height: 1.5; }
.about-story .link { margin-top: 32px; }
/* The room sizes to its column rather than to the page rail, because here it is
   one half of a composition instead of a band standing across the ground. */
.about-story-figure { display: grid; position: relative; width: 100%; min-height: clamp(360px,34vw,480px); place-items: center; }
/* The account's own arc, drawn: something rough and unresolved that becomes
   recognisable through the work. The trail climbs from the lower left as loose
   circles, takes the mark's edges partway along, and arrives as the shape the
   Lab now uses. A trace, not an illustration — and it says the same thing the
   prose beside it says, which is why it can stay this quiet. */
.about-story-trail { position: relative; z-index: 1; display: block; width: min(100%, 480px); aspect-ratio: 1; }
.about-story-trail i {
  position: absolute;
  display: block;
  width: calc(9px + var(--n) * 8px);
  aspect-ratio: 1;
  left: calc(8% + var(--n) * 11.6%);
  bottom: calc(15% + var(--n) * 8.2%);
  transform: translate(-50%, 50%);
  border: 1.5px solid rgba(13,91,58,calc(0.16 + var(--n) * 0.06));
  border-radius: 50%;
}
/* The mark's edges arrive before its substance does. */
.about-story-trail i:nth-child(n+4) { border-radius: 0; clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%); border: 0; background: rgba(13,91,58,calc(0.08 + var(--n) * 0.045)); }
.about-story-trail i:last-child { background: rgba(13,91,58,0.72); }
.about-story-trail i:nth-child(1) { --n: 0; }
.about-story-trail i:nth-child(2) { --n: 1; }
.about-story-trail i:nth-child(3) { --n: 2; }
.about-story-trail i:nth-child(4) { --n: 3; }
.about-story-trail i:nth-child(5) { --n: 4; }
.about-story-trail i:nth-child(6) { --n: 5; }
.about-story-trail i:nth-child(7) { --n: 6; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  /* Each mark breathes on its own count, so the trail never reads as a row of
     objects animating together. */
  .about-story-figure:not([data-orbit-active]):not([data-orbit-returning]) .about-story-trail i { animation: trail-breathe calc(5200ms + var(--n) * 900ms) var(--ease) infinite; animation-delay: calc(var(--n) * -700ms); }
  /* Hover gathers the scattered trace into one recognisable orbit. The resting
     trail remains complete on touch and reduced-motion devices. */
  .about-story-figure[data-orbit-active] .about-story-trail { animation: trail-orbit 14s linear infinite; transform-origin: 50% 50%; }
  .about-story-figure[data-orbit-active] .about-story-trail i { animation: none; }
  /* Seven evenly spaced centers form one calm ring around deliberately empty
     space. The square track rotates from its own midpoint, so the marks orbit
     the blank centre rather than wobbling around the edge of their bounds. */
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(1) { left: 50%; bottom: 89%; }
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(2) { left: 80.5%; bottom: 74.3%; }
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(3) { left: 88%; bottom: 41.3%; }
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(4) { left: 66.9%; bottom: 14.9%; }
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(5) { left: 33.1%; bottom: 14.9%; }
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(6) { left: 12%; bottom: 41.3%; }
  .about-story-figure[data-orbit-active] .about-story-trail i:nth-child(7) { left: 19.5%; bottom: 74.3%; }
}
.about-story-trail { transition: transform 700ms var(--ease); }
.about-story-trail i { transition: left 1200ms var(--ease), bottom 1200ms var(--ease); }
@keyframes trail-breathe {
  0%, 100% { transform: translate(-50%, 50%) translateY(0) }
  50% { transform: translate(-50%, 50%) translateY(-9px) }
}
@keyframes trail-orbit {
  to { transform: rotate(1turn); }
}

/* Two people on the open ground. This is the page's warmest claim and the one
   surface that should not feel institutional, so it is not contained. */
.about-founders { padding-block: clamp(100px,11vw,152px); background: linear-gradient(180deg, var(--paper) 0%, var(--paper-light) 46%, var(--paper) 100%); }
/* The claim and the two sentences under it share one column and one edge. Held
   narrower, the heading wrapped to four lines while its own explanation sat at a
   different width beneath it, so the block read as three stacked things. */
.about-founders-intro { display: grid; justify-items: stretch; max-width: 50ch;
  margin-inline: 0; text-align: left; }
/* `> *` carries no specificity of its own, so the old `.about-founders h2` cap
   outranked this and held the claim two thirds the width of its own
   explanation. Every part of the block now shares one edge. */
.about-founders-intro > *, .about-founders-intro h2 { max-width: none; width: 100%; }
.about-founders-intro .lede { margin-top: clamp(22px, 2.4vw, 36px); }
.about-founders-intro .dim { margin-top: 16px; }
/* Held to the same column as the claim above, so the two share one right edge
   rather than missing it by the width of the intro's own cap. */
.founder-set { display: grid; max-width: 72ch;
  margin-inline: auto; gap: clamp(56px,7vw,92px); margin-top: clamp(64px,7vw,96px); }
/* A person is introduced by portrait, name, role, and a way to reach them; the
   account they wrote sits beside that, not underneath it. */
/* The gap carries the extra width rather than the prose: an account running the
   full remaining track read as a wall of text beside a small portrait. */
/* The portrait holds the left rail and the account ends on the same edge as the
   claim above it, so the section has one outer boundary instead of a wide intro
   sitting over rows that stop short of it. The account keeps its own reading
   measure; the space between them is what absorbs the difference. */
.founder { display: grid; align-items: start; gap: clamp(30px,3.5vw,72px); grid-template-columns: clamp(210px,20vw,268px) minmax(0,1fr); }
.founder-card { display: grid; justify-items: start; }
.founder-portrait { width: 100%; height: auto; aspect-ratio: 5 / 6; border: 1px solid var(--rule); border-radius: var(--radius-sm); object-fit: cover; }
.founder-name { margin-top: 22px; font-size: clamp(26px,2.4vw,34px); line-height: 1.12; }
.founder-role { margin-top: 7px; color: var(--pine); font-size: 17px; font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; }
.founder-linkedin { display: grid; width: 38px; height: 38px; margin-top: 16px; border: 1px solid var(--rule); border-radius: 50%; color: var(--pine); place-items: center; transition: background 220ms var(--ease), border-color 220ms var(--ease); }
.founder-linkedin:hover, .founder-linkedin:focus-visible { border-color: var(--pine); background: rgba(13,91,58,0.08); }
/* The shared claim above is the section's statement at the page's reading size;
   each founder's own account is supporting detail and sits a step below it, at
   the size Home gives its card prose. Left at the inherited body size, a name,
   the claim, and the biography were all the same weight. */
/* Held in rem, not ch: `ch` here would resolve against this element's inherited
   30px rather than the 23px the account is actually set in, which left it a full
   third wider than intended. */
.founder-account { max-width: 48rem; }
.founder-account > * + * { margin-top: 18px; }
.about-founders-intro .lede, .founder-account p { color: var(--dim); font-size: 24px; line-height: 1.55; }

/* A page hero is an entry into an argument, not automatically a manifesto.
    The centered composition stays reserved for Home's belief and final invitation. */
.hub-hero, .product-hero, .research-hero, .about-hero {
  /* A non-Home hero claims three quarters of the available field. The lede
     remains on a reading measure; display type is allowed to balance the page. */
  --hero-field: min(100%, max(60rem, 75%));
}
/* Every doorway clips its own field, the way Home's hero does. Without this an
   atmospheric orb reaches past the frame and the page scrolls sideways. */
/* Every interior doorway holds its statement near the middle of the view rather
   than hanging it from the masthead. The asymmetric padding leaves the words a
   little above centre, which is where they read from, and keeps the floor clear
   for the scroll cue. */
.gateway-hero {
  display: grid;
  position: relative;
  align-content: center;
  overflow: hidden;
  /* One rule for every interior doorway. The floor is deeper than the ceiling so
     the statement lands a little above centre, where reading starts, and the
     cue keeps a clear floor beneath it. */
  padding-block: clamp(140px,16vh,190px) clamp(168px,19vh,226px);
}
.gateway-hero-inner { position: relative; z-index: 2; display: grid; justify-items: start; text-align: left; }
.gateway-hero-copy { width: min(100%, var(--hero-field)); }
.gateway-hero h1 { max-width: none !important; }
.gateway-hero-support { width: min(100%, 52rem); margin-top: 36px; }
.gateway-hero-support > * + * { margin-top: 18px; }
.hub-hero .subpage-hero-inner { display: grid; max-width: none; text-align: left; }
.hub-hero h1 { max-width: var(--hero-field); }
/* The page's one composed moment, the way the belief is Home's. It had been a
   small quote centred in a flat band ruled off at both ends — the least
   designed thing on the page in the place someone vouches for the work. The
   ground now gathers around the words instead of boxing them. */
.hub-testimonial-band {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  min-height: 62svh;
  max-width: none;
  align-content: center;
  padding-block: clamp(128px, 13vw, 200px);
  border-block: 0;
  background:
    radial-gradient(ellipse 58% 49% at 14% 34%, rgba(var(--air-b),0.34), transparent 68%),
    radial-gradient(ellipse 52% 48% at 88% 66%, rgba(var(--air-a),0.34), transparent 70%),
    linear-gradient(180deg, var(--paper-light) 0%, #f7f3ea 54%, var(--paper) 100%);
}
/* Held to the opening line rather than the middle of the figure. Centred on
   the whole quote it moved with the number of lines, so the mark sat somewhere
   different for every testimonial; it belongs beside the words it opens. The
   offset is in `em`, so it keeps its place as the mark scales. */
.hub-testimonial-mark { position: absolute; z-index: -1; top: -0.18em; left: clamp(-32px,-4vw,-72px); color: rgba(13,91,58,0.1); font-family: var(--serif); font-size: clamp(180px,18vw,300px); font-weight: 350; line-height: 0.58; user-select: none; }
/* Stays a contained surface — off the card its text sat on the section rail
   while the sessions' sat on their own inset, and the two edges disagreed.
   It is still not a third session, so it separates by material instead: no
   light of its own, a quieter ground, and a heading well below theirs. */
.practice-lab {
  --band-bleed: 0px;
  margin-inline: 0;
  padding: clamp(32px,3.4vw,48px);
  border: 1px solid rgba(23,37,31,0.08);
  border-radius: var(--radius);
  background: rgba(244,239,230,0.62);
}
.practice-lab > *, .practice-lab-copy > p { max-width: none; }

.product-hero-inner, .research-hero-inner { display: grid; text-align: left; }
.product-hero-inner .gateway-hero-copy, .research-hero-inner .gateway-hero-copy { max-width: var(--hero-field); }
.product-familiar-inner { max-width: none; }
.product-hero h1, .research-hero h1 { max-width: var(--hero-field) !important; }
@media (min-width: 981px) {
  /* Interior entrances keep Home's viewport presence, but they hold their
     statement near the middle of that view rather than hanging it from a fixed
     label offset. The floor stays deeper than the ceiling, so the words settle a
     little above centre and the scroll cue keeps clear ground beneath them. */
  .band-open, .subpage-hero, .offer-hero {
    display: grid;
    min-height: 100dvh;
    align-content: center;
    padding-block: clamp(136px, 15vh, 186px) clamp(164px, 18vh, 222px);
  }
  /* Keep the desktop field broad without turning 981px into a second art
     direction. The floor stays close to the fluid gateway scale below it;
     expansion only becomes pronounced on genuinely wide canvases. */
  .hub-hero .subpage-hero-inner {
    width: 100%;
    max-width: none;
  }
  .hub-hero h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(62px, 6.2vw, 100px);
  }
  /* Headings live inside a copy block that already owns the page field. Making
     them fluid here would resolve against that smaller parent and collapse the
     intended desktop measure. */
  .gateway-hero h1 {
    width: 100% !important;
    max-width: none !important;
    font-size: clamp(62px, 6.2vw, 100px);
  }
}
/* The upstream brand stylesheet gives its generic stack pieces auto margins.
   These are page arguments, so each element has to claim the shared left rail. */
.gateway-hero .label, .gateway-hero h1, .gateway-hero-copy, .gateway-hero-support, .gateway-hero-support p {
  margin-inline: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}
/* The shared brand foundation uses a broadly-targeted auto margin to center
   display pieces. These page-specific selectors must win it, or the text keeps
   its centered geometry while merely changing to left-aligned type. */
/* Every interior doorway opens the way Training does: one reading field, held in
   the middle of the page, with the words left-aligned inside it. The field is
   narrower than Home's because these pages carry less text, so the statement
   keeps a comfortable measure instead of stretching to the page rail. */
/* The inset is capped rather than centred. Centring a fixed 60rem field inside
   a growing page means the inset grows with the window: measured 197px from the
   masthead's edge at 1440, 319px by 1920, where it stops reading as a deliberate
   inset and starts reading as misalignment against the bar above it. Held at the
   value it has on a laptop, the same composition arrives at every width. */
.gateway-hero-inner { justify-items: start; text-align: left; }
.gateway-hero .label,
.gateway-hero-copy {
  width: min(100%, 60rem) !important;
  margin-inline: clamp(0px, calc((100% - 60rem) / 2), 174px) auto !important;
  justify-self: start !important;
}
.gateway-hero-support,
.gateway-hero-support p {
  width: 100%;
  margin-inline: 0 !important;
  justify-self: start !important;
}

/* On a leaf page the argument still stacks on the reading measure, but its
   companion material — the FAQ, the room card, the availability note — is
   reference, not the next paragraph. At 2048 a lone reading column left 585px
   of the page empty; giving reference its earned track fills the frame without
   splitting the argument itself into two columns. */
@media (min-width: 981px) {
  /* Two destinations rather than Home's three. This has to stay inside the
     desktop query: a descendant selector outranks the shared `.path-grid`
     collapse, so declaring it globally kept both cards side by side on a
     phone. */
  .hub-forums .path-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The premise stays on a reading measure. Its companion gets a separate
     section and contained surface rather than competing as a second argument. */
  .offer-prep-copy,
  .forum-purpose-grid > article { max-width: var(--reading-column); }
  /* The situation is followed by its detail, so the detail becomes the band
     beneath it — the same two-up ruled grammar the offering pair uses. */
  .offer-case-grid { width: 100%; }
  .offer-case-grid > .offer-recognition { max-width: 72rem; }
  .offer-case-detail { display: grid; max-width: none; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .offer-case-detail article { padding-right: clamp(28px,4vw,58px); }
  .offer-case-detail article + article { border-top: 0; border-left: 1px solid var(--rule); padding-left: clamp(28px,4vw,58px); }
}

/* Products is an explanation. Its relationship sequence is reference material,
   so it earns a calm rail beside the argument rather than centering below it. */
.co-create-page { --co-ground: #f8f4ee; --co-panel: #eee8e2; --co-accent: var(--fl-cobalt); --co-accent-deep: rgb(61,111,207); --co-ink: #25212b; --co-muted: #696470; --co-rule: rgba(37,33,43,0.1); --co-radius-icon: 8px; --co-radius-control: 10px; --co-radius-frame: 14px; --co-radius-view: 20px; background: var(--co-ground); color: var(--co-ink); font-family: Inter, var(--sans); }
.co-create-page h1, .co-create-page h2 { color: var(--co-ink); font-family: Inter, var(--sans); font-weight: 540; letter-spacing: -0.045em; }
.co-create-page h1 em { color: var(--co-accent); font-style: normal; font-weight: inherit; font-variation-settings: normal; }
.co-create-page .masthead-product { border-color: var(--co-rule); background: color-mix(in srgb, var(--co-ground) 90%, transparent); }
.product-wordmark-icon { display: block; width: 32px; height: 32px; }
.co-create-page .product-wordmark-icon { border-radius: var(--co-radius-icon); }
.co-create-page .product-institution a { color: var(--co-accent); }
.co-create-page .btn { border-color: var(--co-accent); border-radius: var(--co-radius-control); background: var(--co-accent); color: var(--co-ink); font-family: Inter, var(--sans); }
.co-create-page .btn:hover { border-color: var(--co-accent-deep); background: var(--co-accent-deep); color: white; }
.co-create-story { overflow: clip; background: radial-gradient(circle at 83% 19%, rgba(84,140,247,0.14), transparent 25%), radial-gradient(circle at 92% 62%, rgba(105,195,195,0.1), transparent 20%), radial-gradient(circle at 69% 82%, rgba(226,126,158,0.08), transparent 22%), var(--co-ground); }
.co-create-story-stage { position: relative; overflow: hidden; }
.co-create-story-ground { position: absolute; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; }
.co-create-story-ground i { position: absolute; width: min(62vw,880px); aspect-ratio: 1; border-radius: 50%; opacity: 0.16; filter: blur(80px); }
.co-create-story-ground i:first-child { top: -28%; right: -18%; background: var(--fl-cobalt); }
.co-create-story-ground i:last-child { bottom: -42%; left: -20%; background: #7dd0c6; }
.co-create-story-atmosphere { position: absolute; z-index: 0; inset: 0; display: none; background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.82), transparent 47%), radial-gradient(circle at 18% 28%, rgba(149,199,203,0.28), transparent 34%), radial-gradient(circle at 82% 24%, rgba(193,176,224,0.32), transparent 36%), rgb(221,217,224); pointer-events: none; }
.co-create-shell { max-width: calc(83rem + 2 * var(--page-rail)); margin-inline: auto; }
.co-create-opening-copy { position: relative; z-index: 2; display: flex; min-height: calc(100svh - 73px); align-items: flex-end; padding-block: clamp(118px,15vh,180px) clamp(168px,21vh,272px); }
.co-create-opening-copy h1 { max-width: 15.5ch; font-size: clamp(58px,7.5vw,116px); line-height: 0.98; text-wrap: balance; }
.co-create-word, .co-create-actually, [data-near-letter] { display: inline-block; }
/* The break is authored, not negotiated. Both the sentence and the sentence
   with `actually` in it must break in the same place, or the word arriving
   rewraps the line instead of pushing it. */
.co-create-line { display: block; }
.co-create-actually { margin-inline: 0.11em; color: var(--co-accent); font-style: normal; white-space: nowrap; vertical-align: bottom; }
.co-create-workspace-copy { position: relative; z-index: 2; width: min(100%, calc(83rem + 2 * var(--page-rail))); margin-inline: auto; padding: clamp(100px,13vw,180px) var(--page-rail); }
.co-create-workspace-copy h2 { display: grid; gap: 32px; font-size: clamp(48px,6.2vw,94px); line-height: 0.96; }
.co-create-workspace-copy h2 span { display: block; }
.co-create-product-view { position: relative; z-index: 2; max-width: 96rem; margin: 0 auto clamp(90px,10vw,150px); padding-inline: var(--page-rail); }
@media (prefers-reduced-motion: no-preference) {
  html:not(.no-js) .co-create-story:not([data-co-create-ready]) .co-create-opening-copy { visibility: hidden; }
}
.co-create-story .scroll-cue { display: none; color: var(--co-accent-deep); }
.co-create-story .scroll-cue i { border-color: var(--fl-cobalt-line); }
[data-co-create-motion] { height: 420svh; }
[data-co-create-motion] .co-create-story-stage { position: sticky; top: 0; height: 100svh; min-height: 620px; }
[data-co-create-motion] .co-create-story-atmosphere { display: block; }
[data-co-create-motion] .co-create-opening-copy { position: absolute; inset: 0; width: 100%; min-height: 100%; }
[data-co-create-motion] .co-create-workspace-copy { position: absolute; z-index: 3; inset: 0; display: flex; align-items: center; padding-block: clamp(96px,12vh,140px); }
[data-co-create-motion] .co-create-product-view { position: absolute; z-index: 1; inset: 0; max-width: none; margin: 0; padding: 0; }
[data-co-create-motion] .co-create-product-stage { height: 100%; padding: 0; border-radius: 0; background: #fffdf9; filter: drop-shadow(0 24px 64px rgba(37,33,43,0.18)) drop-shadow(0 0 1px rgba(61,111,207,0.62)); }
[data-co-create-motion] .co-create-product-crop { max-width: none; height: 100%; min-height: 0; margin: 0; padding: calc(clamp(92px,11vh,126px) + 16px) calc(clamp(18px,4.6vw,66px) + 62px) 0; border: 0; border-radius: 0; box-shadow: none; }
[data-co-create-motion] .scroll-cue { position: fixed; display: grid; }
.co-create-product-stage { position: relative; overflow: hidden; height: clamp(360px,49vw,720px); padding: clamp(24px,3.5vw,54px) clamp(18px,4vw,64px) 0; border-radius: clamp(22px,2vw,32px); background: radial-gradient(circle at 50% 10%, rgba(255,255,255,0.82), transparent 47%), radial-gradient(circle at 18% 28%, rgba(149,199,203,0.28), transparent 34%), radial-gradient(circle at 82% 24%, rgba(193,176,224,0.32), transparent 36%), #ddd9e0; }
.co-create-product-stage::after { position: absolute; inset: auto 0 0; height: 42%; background: linear-gradient(to bottom, rgba(237,233,229,0), #ede9e5 88%); content: ""; pointer-events: none; }
.co-create-product-crop { position: relative; overflow: hidden; max-width: 76rem; min-height: 620px; margin-inline: auto; border: 1px solid rgba(37,33,43,0.11); border-radius: var(--co-radius-view) var(--co-radius-view) 0 0; background: #f9f5ef; box-shadow: 0 26px 70px rgba(37,33,43,0.16); }
.co-create-preview-bar { display: flex; min-height: 62px; align-items: center; justify-content: flex-end; padding-inline: clamp(20px,3vw,38px); border-bottom: 1px solid var(--co-rule); }
.co-create-preview-bar span { color: var(--co-accent); font-family: "Fira Code", monospace; font-size: 12px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; }
.co-create-preview-activity { height: 2px; background: var(--co-accent); opacity: 0; transform: scaleX(0); transform-origin: left center; }
.co-create-preview-thread { display: grid; max-width: 61rem; margin-inline: auto; padding: clamp(32px,4vw,56px) clamp(22px,5vw,68px) 120px; gap: clamp(22px,2.8vw,34px); }
.co-create-preview-thread p { margin: 0; }
.co-create-preview-entry { display: grid; gap: 9px; max-width: min(82%,44rem); }
.co-create-preview-entry.is-person { justify-self: end; }
.co-create-preview-entry.is-familiar { justify-self: start; }
.co-create-preview-identity { display: flex; align-items: center; gap: 10px; color: var(--co-ink); font-size: 15px; }
.co-create-preview-identity > span { display: grid; width: 30px; height: 30px; place-items: center; border-radius: 9px; background: var(--co-accent); color: var(--co-ink); font-size: 13px; font-weight: 750; }
.co-create-preview-entry.is-familiar .co-create-preview-identity > span { background: #7767ec; color: white; }
.co-create-preview-identity small { color: var(--co-muted); font-size: 13px; font-weight: 500; }
.co-create-preview-message { padding: 14px 18px; border-radius: 18px; color: var(--co-ink); font-size: clamp(16px,1.35vw,19px); line-height: 1.45; }
.co-create-preview-entry.is-person .co-create-preview-message { background: var(--fl-cobalt-soft); }
.co-create-preview-entry.is-familiar .co-create-preview-message { border: 1px solid var(--fl-cobalt-line); background: #faf7f2; }
.co-create-product-view figcaption { max-width: 52rem; margin: clamp(28px,3.5vw,48px) auto 0; color: var(--co-muted); font-size: clamp(22px,1.8vw,26px); line-height: 1.5; text-align: center; }
.co-create-invitation { padding-block: clamp(100px,13vw,190px); background: #292431; }
.co-create-invitation h2 { max-width: 22ch; color: white; font-size: clamp(46px,6vw,86px); line-height: 0.98; }
.co-create-invitation h2 span { display: block; }
.co-create-invitation-detail { max-width: 54rem; margin: clamp(28px,3.5vw,46px) 0 0; color: rgba(255,255,255,0.78); font-size: clamp(20px,1.7vw,25px); line-height: 1.5; }
.co-create-invitation-detail[data-disclosure-open] { animation: co-create-detail-in 480ms cubic-bezier(.22,.8,.22,1) both; }
@keyframes co-create-detail-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.co-create-invitation-actions { display: flex; width: min(100%,54rem); align-items: center; justify-content: flex-start; gap: 16px; margin-top: 38px; }
.co-create-invitation-actions .btn { width: auto; min-height: 56px; height: auto; align-self: center; flex: 0 0 auto; }
.co-create-invitation-actions [data-disclosure-toggle] { margin-top: 0; }
.co-create-invitation .btn-secondary { border-color: rgba(255,255,255,0.48); background: transparent; color: white; }
.co-create-invitation .btn-secondary span { background: rgba(255,255,255,0.12); }
.co-create-invitation .btn-secondary:hover { border-color: white; background: white; color: var(--co-ink); }
.co-create-invitation [data-disclosure-open] + .co-create-invitation-actions { margin-top: 30px; }
.co-create-page .site-footer { padding-block: 0; border-top: 1px solid rgba(255,255,255,0.07); background: #17151d; color: white; }
.co-create-page .footer-inner-product { display: grid; width: 100%; max-width: calc(83rem + 2 * var(--page-rail)); justify-items: center; gap: 18px; margin-inline: auto; padding: 58px var(--page-rail); border: 0; border-radius: 0; background: none; text-align: center; }
.co-create-page .footer-brand { display: grid; justify-items: center; }
.co-create-page .footer-line, .co-create-page .footer-product-visit { margin: 10px 0 0; color: rgba(255,255,255,0.78); font-family: Inter, var(--sans); font-size: 18px; }
.co-create-page .footer-legal { margin: 10px 0 0; padding-top: 0; border: 0; color: rgba(255,255,255,0.62); font-size: 16px; }
/* A standalone navigation target, not a word inside a sentence: its own line
   box is 17px, so it carries a minimum height to reach a real target size
   without the wordmark growing. */
.co-create-page .footer-product-visit { display: inline-flex; align-items: center; min-height: 24px; color: white; font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }

/* Conversion, legal, 404 */
/* Utility tier: these pages serve an action already decided elsewhere. They get a
   compact hero and the smallest headline on the site, on the shared reading line. */
/* These doorways open onto a form or a record rather than an argument, so they
   are shorter — but they hold their words on the same balance as every other
   entrance, a little above the middle of what is showing. */
/* One rule owns the utility doorway: its space and its ground. These four pages
   showed bare body paper, so arriving at one felt like leaving the site. The
   weather is quieter than a narrative doorway's — they are here to be used —
   but it is the same world, and it settles toward what follows. */
.conversion-page .band-open, .legal-page .band-open, .not-found-page .band-open {
  padding-block: clamp(128px,14vh,168px) clamp(150px,16vh,196px);
  background:
    radial-gradient(ellipse 58% 46% at 97% 34%, rgba(var(--air-c),0.55), transparent 72%),
    radial-gradient(ellipse 52% 45% at 2% 66%, rgba(var(--air-a),0.32), transparent 74%),
    linear-gradient(180deg, var(--paper-light) 0%, var(--paper-light) 54%, var(--hero-settle) 100%);
}
.conversion-page .band-open h1, .legal-page .band-open h1, .not-found-page .band-open h1 { max-width: 20ch; }
.conversion-page .band-open .lede, .legal-page .band-open .lede, .not-found-page .band-open .lede { max-width: var(--measure); }
.conversion-page main { padding-bottom: 96px; background: var(--paper-light); }
/* The utility hero stacks like every other argument on the site. When a page
   attaches a boundary note — the price disclosure, the nothing-is-submitted
   promise — that note is a condition rather than the other half of the
   argument, so it earns the second track and stops sitting in the reading path. */
/* The doorway's ground lives with its spacing in the page-tier rule above; this
   only keeps its weather inside its own edges. */
.utility-hero { position: relative; overflow: hidden; }
.utility-hero-grid { width: 100%; }
.utility-hero-grid .note { margin-top: 30px; }
@media (min-width: 981px) {
  .utility-hero-grid:has(> .note) {
    display: grid;
    align-items: start;
    gap: var(--split-gap);
    max-width: none;
    grid-template-columns: minmax(0, 1.4fr) minmax(300px, 0.56fr);
  }
  .utility-hero-grid:has(> .note) > .headline-stack { max-width: var(--reading-column); }
  .utility-hero-grid:has(> .note) > .note { max-width: none; margin-top: 0; }
/* Size belongs to the role, not the component. In the argument's flow a note is
   prose and reads at body scale — that is why `.note p` sets no size. Standing
   in a ~350px rail beside the page's own headline it is reference, and at body
   scale it became 416px of text competing with the claim it annotates. */
.utility-hero-grid:has(> .note) > .note p:not(.label) { font-size: 19px; line-height: 1.55; }
.utility-hero-grid:has(> .note) > .note p + p { margin-top: 14px; }
}
.choice-band {
  position: relative;
  padding-top: clamp(40px,5vw,58px);
  background-image:
    radial-gradient(ellipse 44% 46% at 3% 34%, rgba(var(--air-b),0.26), transparent 72%),
    radial-gradient(ellipse 40% 45% at 97% 66%, rgba(var(--air-a),0.24), transparent 74%);
}
.choice-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0,1fr)); }
.choice-grid-pair { grid-template-columns: repeat(2, minmax(0,1fr)); }
/* A place to choose between, held the way every other contained surface on the
   site is held: a real edge and its own gathered light, not a flat fill with an
   inset hairline. */
.choice-card {
  display: flex;
  padding: clamp(32px,3.4vw,42px);
  border: 1px solid rgba(23,37,31,0.1);
  border-radius: var(--radius);
  background:
    radial-gradient(ellipse 88% 60% at 6% 4%, rgba(var(--air-c),0.44), transparent 70%),
    rgba(251,248,241,0.76);
  flex-direction: column;
}
.choice-card h3 { margin-top: 14px; }
/* A choice page is a routing task: keep the named action beside the reason to
   choose it, rather than pinning all controls below the longest sibling card. */
.choice-card .actions { margin-top: 26px; padding-top: 0; }
.choice-card-fallback { display: none; margin-top: 26px; color: var(--dim); font-size: 18px; }
.choice-card-fallback a { color: var(--pine); font-weight: 750; text-underline-offset: 0.18em; }
.no-js .choice-card .actions { display: none; }
.no-js .choice-card-fallback { display: block; }
.choice-card .dim { margin-top: 30px; }
@media (min-width: 981px) {
  /* The route title and action are the choice. This supporting boundary copy is
     deliberately a quieter register than the page's main reading argument. */
  .choice-card .dim { font-size: 24px; line-height: 1.5; }
}
/* A privacy page should read as one calm document, not alternating colour bands.
   Each policy is a heading paired with its terms, on the shared reading line. */
.legal-page main { padding-bottom: 96px; background: var(--paper-light); }
.legal-page .band { padding-block: 0; }
.legal-page .policy-row { padding-block: clamp(40px,4.4vw,54px); border-top: 1px solid var(--rule); }
.policy-row { width: 100%; }
.policy-head h2 { max-width: 16ch; }
.policy-body { max-width: var(--measure); margin-top: 28px; color: var(--dim); }
.policy-body > * + * { margin-top: 16px; }
.policy-body .dim { max-width: var(--measure); }
.not-found-page main { min-height: 100dvh; background: var(--paper-light); }
.not-found-thread { margin-top: 52px; }
.thread-toggle { display: inline-flex; min-height: 44px; align-items: center; padding: 0; border: 0; background: transparent; color: var(--pine); cursor: pointer; font: inherit; font-size: 14px; font-weight: 600; }
.thread-toggle::before { display: inline-block; margin-right: 9px; color: var(--rose-deep); content: "•"; transition: transform 220ms var(--ease); }
.thread-toggle:hover::before, .thread-toggle:focus-visible::before { transform: translateX(5px); }
.thread-status { margin-top: 12px; color: var(--dim); font-family: var(--serif); font-size: 20px; font-weight: 350; }

/* Contact flows are one shared native dialog in two registers: a conversation
   stands as a room on the right, an application takes the whole surface. Both
   are places in this world, with their own ground and weather — the earlier
   build was a flat panel on a green wash, the only surface on the site that did
   not belong to the page it opened from. */
.contact-modal {
  position: fixed;
  inset: 14px 14px 14px auto;
  width: min(calc(100% - 28px), 620px);
  height: auto;
  max-width: none;
  max-height: none;
  overflow: hidden;
  padding: 0;
  border: 1px solid rgba(23,37,31,0.08);
  border-radius: var(--radius-lg);
  isolation: isolate;
  /* A defined room rather than a lighter panel: it reads on the same deeper
     ground the site gives a section that stands apart, and takes its light from
     the page it was opened from, so a conversation started on Research arrives
     in Research's morning and one started on About in About's dusk. */
  background: var(--break-ground);
  color: var(--ink);
  box-shadow: 0 30px 90px rgba(8, 40, 27, 0.22);
}
/* Fog, not a curtain. The page should recede and stay legible behind the room
   it opened, the way the grounds recede behind a contained field. */
.contact-modal::backdrop { background: rgba(18, 48, 36, 0.34); backdrop-filter: blur(4px) saturate(0.94); }
.contact-atmosphere { position: absolute; z-index: 0; inset: 0; pointer-events: none; }
.contact-atmosphere i { position: absolute; display: block; border-radius: 50%; filter: blur(76px); }
.contact-atmosphere i:first-child { top: -12%; right: -26%; width: min(86%, 460px); aspect-ratio: 1.2; background: rgba(var(--air-b),0.62); }
.contact-atmosphere i:last-child { bottom: -14%; left: -30%; width: min(78%, 420px); aspect-ratio: 1.3; background: rgba(var(--air-a),0.5); }
/* The content sits in the middle of its room. Hung from the top, a short first
   step left a third of the ground empty beneath the button. `safe` centre so a
   long step still starts at the top and scrolls rather than clipping its head. */
.contact-modal-frame { position: relative; z-index: 1; display: grid; height: 100%; align-content: safe center; overflow-y: auto; overscroll-behavior: contain; }
.contact-modal-head { position: relative; padding: clamp(34px, 5vw, 54px) clamp(28px, 5vw, 52px) 26px; }
.contact-modal-mark { display: none; align-items: center; gap: 10px; margin-bottom: 26px; color: var(--pine); font-size: 17px; letter-spacing: 0.02em; }
.contact-modal-mark .mark { width: 15px; height: 15px; fill: currentColor; }
.contact-modal-mark b { font-weight: 650; }
.contact-modal-meta { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; margin-bottom: 12px; }
.contact-modal-eyebrow { margin: 0; }
.contact-progress-count { color: var(--faint); font-size: 14px; line-height: 1.4; white-space: nowrap; }
.contact-progress-count [data-contact-progress-position] { color: var(--pine); font-weight: 650; }
.contact-progress { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; margin-bottom: 24px; }
.contact-progress[hidden], .contact-progress-count[hidden], .contact-progress i[hidden] { display: none; }
.contact-progress i { height: 3px; border-radius: 999px; background: rgba(13,91,58,0.14); transition: background 280ms var(--ease); }
.contact-progress i[data-filled] { background: var(--pine); }
.contact-modal-head h2 { max-width: 15ch; font-size: clamp(30px, 3.4vw, 42px); line-height: 1.08; }
[data-contact-title]:focus { outline: none; }
.contact-modal-intro { max-width: 41rem; margin-top: 16px; color: var(--dim); font-size: 19px; line-height: 1.5; }
/* Pinned to the room's own corner, not to the head — the head now floats in the
   middle of the room, which would carry the way out down with it. */
.contact-modal-close { position: fixed; top: 36px; right: 36px; display: grid; width: 38px; height: 38px; padding: 0 0 3px; border: 1px solid var(--rule); border-radius: 50%; background: rgba(251,248,241,0.6); color: var(--pine); cursor: pointer; font-size: 26px; line-height: 1; place-items: center; transition: background 220ms var(--ease); }
.contact-modal-close:hover { background: var(--paper-light); }
.contact-flow { padding: 0 clamp(28px, 5vw, 52px) clamp(36px, 5vw, 56px); }
.contact-form { display: grid; gap: 22px; }
/* An application takes the whole surface. Applying to a room is a decision, and
   a panel beside the page invites the visitor to treat it as a detour. The mark
   appears here: this is an official channel, not a widget. The column stays
   narrow so one question is in front of them at a time, and the close control
   stays, quietly, because a person must always be able to leave. */
.contact-modal.is-immersive {
  inset: 0;
  width: 100%;
  height: 100dvh;
  border: 0;
  border-radius: 0;
  background: linear-gradient(180deg, var(--paper-light) 0%, var(--paper) 52%, var(--hero-settle) 100%);
}
.contact-modal.is-cocreate {
  --pine: var(--fl-cobalt);
  --pine-deep: rgb(61,111,207);
  --ink: #25212b;
  --dim: #696470;
  --faint: #817b87;
  --rule: rgba(37,33,43,0.12);
  --air-a: 84,140,247;
  --air-b: 184,207,248;
  --action-face: var(--fl-cobalt);
  --action-edge: var(--fl-cobalt);
  --action-face-hover: rgb(61,111,207);
  --action-ink: var(--ink);
  --action-ink-hover: #fff;
  --select-face: var(--fl-cobalt-soft);
  background: linear-gradient(180deg, #faf7f2 0%, #f4f1ee 52%, #e9edf3 100%);
}
.is-immersive .contact-atmosphere i:first-child { top: -18%; right: -14%; width: min(52vw, 780px); filter: blur(90px); }
.is-immersive .contact-atmosphere i:last-child { bottom: -20%; left: -12%; width: min(46vw, 700px); filter: blur(90px); }
.is-immersive .contact-modal-frame { display: grid; align-content: safe center; min-height: 100dvh; padding-block: clamp(56px, 9vh, 104px) clamp(48px, 8vh, 92px); }
.is-immersive .contact-modal-head { width: min(100%, 760px); margin-inline: auto; padding: 0 24px 30px; }
.is-immersive .contact-modal-mark { display: inline-flex; }
.is-immersive .contact-modal-head h2 { max-width: 18ch; font-size: clamp(34px, 3.8vw, 52px); }
.is-immersive .contact-flow { width: min(100%, 760px); margin-inline: auto; padding: 0 24px; }
.is-immersive .contact-modal-close { position: fixed; top: clamp(16px, 2.4vh, 28px); right: clamp(16px, 2.4vw, 32px); border-color: transparent; background: none; color: var(--faint); }
.is-immersive .contact-modal-close:hover { color: var(--pine); }

.form-step { display: grid; gap: 22px; }
.form-step[hidden] { display: none; }
.form-step-controls { display: flex; flex-wrap: wrap; gap: 12px; justify-content: flex-end; }
.form-grid { display: grid; gap: 18px; grid-template-columns: repeat(2, minmax(0,1fr)); }
.form-question-grid { display: grid; gap: 18px; }
.form-field { display: grid; gap: 8px; }
.form-field label, .form-room-choice legend { color: var(--pine-deep); font-size: 15px; font-weight: 600; line-height: 1.35; }
.form-field label span { color: var(--faint); font-weight: 400; }
.form-field input, .form-field select, .form-field textarea {
  width: 100%;
  min-height: 48px;
  padding: 11px 13px;
  border: 1px solid rgba(26,55,40,0.24);
  border-radius: var(--radius-chip);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 17px;
  line-height: 1.42;
}
.form-field textarea { min-height: 118px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: 2px solid var(--pine); outline-offset: 2px; border-color: var(--pine); }
/* Three named starting points. These are buttons, not fields to fill in, so
   they carry the button's shape and chip rather than the input's rectangle.
   Quiet outlines rather than three green pills: one list, three peers, no
   recommended answer among them. */
.form-choice { display: grid; gap: 10px; margin: 0; padding: 0; border: 0; }
.form-choice legend { width: 100%; margin-bottom: 10px; color: var(--dim); font-size: 16px; }
.form-choice label {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 62px;
  padding: 9px 9px 9px 24px;
  border: 1px solid var(--pine);
  border-radius: 999px;
  background: var(--paper-light);
  color: var(--pine-deep);
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.inquiry-router-section { padding-block: clamp(140px,16vw,184px) clamp(78px,10vw,120px); }
.inquiry-router-inner { width: min(100%, 620px); }
.inquiry-router-inner h1 { max-width: 13ch; margin-top: 14px; font-size: clamp(42px,5.2vw,66px); }
.inquiry-router-links { display: grid; gap: 10px; margin-top: 36px; }
.inquiry-router-links a {
  position: relative;
  display: flex;
  min-height: 62px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 9px 9px 9px 24px;
  border: 1px solid var(--pine);
  border-radius: 999px;
  background: var(--paper-light);
  color: var(--pine-deep);
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  transition: background 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease);
}
.inquiry-router-links a::after { display: grid; width: 40px; height: 40px; flex: none; border-radius: 50%; background: rgba(13,91,58,0.09); color: var(--pine); content: "\2192"; font-size: 14px; place-items: center; transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease); }
.inquiry-router-links a:hover { background: var(--pine); color: var(--paper-light); transform: translateY(-1px); }
.inquiry-router-links a:hover::after { background: rgba(255,255,255,0.15); color: var(--paper-light); transform: translateX(2px); }
.inquiry-router-links a:focus-visible { outline: 2px solid var(--pine); outline-offset: 3px; }
.inquiry-router-fallback { display: none; margin-top: 24px; color: var(--dim); }
.no-js .inquiry-router-fallback { display: block; }
.form-choice label::after {
  display: grid;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: rgba(13,91,58,0.09);
  color: var(--pine);
  content: "\2192";
  font-size: 14px;
  place-items: center;
  transition: transform 200ms var(--ease), background 200ms var(--ease), color 200ms var(--ease);
}
.form-choice label:hover { background: var(--pine); color: var(--paper-light); transform: translateY(-1px); }
.form-choice label:hover::after { background: rgba(255,255,255,0.15); color: var(--paper-light); transform: translateX(2px); }
.form-choice label:active { transform: translateY(1px) scale(0.995); }
.form-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.form-choice label:has(:focus-visible) { outline: 2px solid var(--pine); outline-offset: 3px; }
.form-back {
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 16px;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.form-back:hover { color: var(--pine-deep); }
.form-step-controls:has(.form-back) { align-items: center; justify-content: space-between; }
.form-room-choice { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; border: 0; }
.form-room-choice legend { width: 100%; margin-bottom: 2px; }
.form-room-choice label { display: inline-flex; align-items: center; gap: 8px; padding: 10px 13px; border: 1px solid var(--rule); border-radius: 999px; background: var(--paper); color: var(--dim); cursor: pointer; font-size: 16px; line-height: 1.3; }
.form-room-choice input { accent-color: var(--pine); }
/* The room is being offered here, not gated. The price stays plainly visible and
   ahead of every question, but it reads as one fact among the reasons rather
   than a toll booth in front of them. */
/* What the room is and what it costs is the most considered thing on this
   surface, so it is a contained place like every other on the site — not a
   callout bar. */
.form-price { display: grid; gap: 20px; }
.form-forum-benefits { display: grid; gap: 12px; margin: 0; padding-left: 1.15em; color: var(--pine-deep); font-size: 19px; line-height: 1.45; }
.form-forum-benefits li { padding-left: 5px; }
.form-forum-benefits li::marker { color: var(--rose-deep); }
.form-forum-format { color: var(--dim); font-size: 15px; line-height: 1.5; }
.form-forum-leave { color: var(--dim); font-size: 15px; line-height: 1.5; }
.form-price-line { display: flex; flex-wrap: wrap; align-items: baseline; gap: 7px; padding-top: 20px; border-top: 1px solid rgba(13,91,58,0.16); color: var(--dim); font-size: 17px; }
.form-optional summary { width: fit-content; color: var(--pine); cursor: pointer; font-size: 16px; text-decoration: underline; text-underline-offset: 4px; }
.form-optional summary::marker { content: ""; }
.form-optional summary::after { display: inline-block; margin-left: 8px; content: "+"; text-decoration: none; }
.form-optional[open] summary::after { content: "−"; }
.form-optional .form-field { margin-top: 14px; }
.form-price .label { margin-bottom: 6px; font-size: 12px; }
.form-price-amount { display: block; color: var(--pine-deep); font-family: var(--serif); font-size: 26px; font-weight: 350; line-height: 1.2; }
.form-handoff, .form-research-boundary { max-width: 52rem; padding-top: 2px; color: var(--dim); font-size: 15px; line-height: 1.45; }
.form-research-boundary { padding: 14px 16px; border-left: 2px solid var(--rose-deep); background: rgba(var(--air-a),0.38); color: var(--ink); }
.form-status { min-height: 1.4em; margin: -8px 0 0; color: var(--pine); font-size: 15px; line-height: 1.4; }
.contact-form[aria-busy="true"] [type="submit"] { cursor: wait; opacity: 0.66; }
.contact-confirmation { display: grid; gap: 24px; align-content: start; }
.contact-confirmation[hidden] { display: none; }
.contact-confirmation [hidden] { display: none !important; }
.contact-confirmation > p { max-width: 38rem; color: var(--dim); font-size: 19px; line-height: 1.55; }
.contact-confirmation > .btn, .contact-confirmation > .form-back { justify-self: start; }
.contact-confirmation-mark { display: grid; width: 54px; height: 54px; border-radius: 50%; background: var(--pine); color: var(--paper-light); font-size: 23px; place-items: center; }

/* A page that closes on a form, a record, or a dead end has no invitation to
   settle its ground, so it would meet the footer at a hard step. It settles the
   last stretch of the page instead, arriving on the same colour the footer card
   floats in. The offer pages keep their own closing surface and are excluded. */
.conversion-page main,
.legal-page main,
.not-found-page main {
  background-image: linear-gradient(180deg, transparent calc(100% - 300px), var(--closing-ground) 100%);
}

/* Shared world vocabulary
   ------------------------------------------------------------------------
   Home settled two shapes the rest of the site now speaks in. A dark surface
   is a place standing within the ground, not a band cutting across the page.
   And a page ends on an open invitation whose ground settles into the exact
   colour the footer card floats on, so the last two surfaces read as one
   place. These classes carry those shapes; they do not restyle Home. */


/* The closing invitation. It begins on whatever ground the page already had —
   pages arrive here on paper, paper-light, or the ground under a contained
   field, and any fixed starting colour printed a step across the full width.
   It ends on the colour the footer card sits in, which is what removes the
   seam between the last section and the footer. Home keeps its own opening
   edge, which is authored against the continuum's mint. */
.closing-invitation {
  position: relative;
  display: flex;
  min-height: 66svh;
  overflow: hidden;
  align-items: center;
  isolation: isolate;
  border-top: 0;
  background: linear-gradient(180deg, var(--closing-open, transparent) 0%, var(--closing-rise) 34%, var(--closing-mid) 68%, var(--closing-ground) 100%);
  color: var(--ink);
}
.closing-invitation > .shell { position: relative; z-index: 1; width: 100%; }
.closing-invitation h2 { color: var(--ink); }
.closing-invitation .label { color: var(--pine); }
.closing-invitation p { color: var(--dim); }
/* The field dissolves before the boundary. Clipping a blurred colour at the
   footer edge prints its last tinted row as a horizontal seam. */
/* The field has to dissolve before both edges. Home's opening edge is authored,
   so it can clip there; this invitation arrives on continuous ground, and a
   blurred field clipped by `overflow: hidden` prints its last tinted row as a
   rule across the full width — at the top against the page, at the bottom
   against the footer. */
.closing-atmosphere {
  position: absolute;
  z-index: 0;
  inset: 0;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 72%, transparent 100%);
}
.closing-atmosphere i { position: absolute; display: block; border-radius: 50%; filter: blur(74px); }
.closing-atmosphere i:first-child {
  width: min(58vw,900px);
  aspect-ratio: 1.35;
  top: 2%;
  right: -18%;
  background: var(--air-close-1);
  transform: translate3d(8%,-5%,0) scale(0.92);
}
.closing-atmosphere i:last-child {
  width: min(48vw,760px);
  aspect-ratio: 1.5;
  bottom: 3%;
  left: -20%;
  background: var(--air-close-2);
  transform: translate3d(-7%,6%,0) scale(0.9);
}

/* Footer */
/* The closing card floats inside the final invitation rather than sitting on
   the seam between two sections: equal ground above and below it, and the
   invitation gives back the height the card now needs. Every page closes this
   way, so the last thing a visitor sees belongs to the same world on all of
   them rather than only on Home. */
.site-footer {
  background: var(--paper-light);
  color: rgba(255,255,255,0.72);
}
.footer-card-track { padding-block: clamp(32px,4vw,72px); background: var(--closing-ground); }
.footer-inner {
  display: grid;
  width: min(calc(100% - 28px), calc(100% - 2 * (var(--page-rail) - 25px)));
  gap: 48px;
  margin-inline: auto;
  padding: 82px clamp(34px,4.5vw,72px) 34px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 38% 78% at 7% 5%, var(--footer-glow), transparent 72%),
    var(--pine-ink);
  grid-template-columns: 1.5fr 0.72fr 0.72fr;
}
.footer-deer-logo { display: block; width: 80px; text-decoration: none; }
.footer-deer-logo img { width: 100%; height: auto; }
.footer-line { max-width: 30ch; margin-top: 24px; color: rgba(255,255,255,0.78); font-size: 24px; line-height: 1.38; }
.footer-line strong { color: var(--paper-light); font-weight: 650; }
.footer-nav { display: grid; align-content: start; gap: 9px; }
.footer-heading { margin: 0 0 8px; color: rgba(255,255,255,0.68); font-family: var(--sans); font-size: 18px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.footer-nav a { width: max-content; color: rgba(255,255,255,0.8); font-size: 18px; line-height: 1.45; text-decoration: none; }
.footer-nav .footer-link-separated { margin-top: 12px; }
.footer-nav a:hover { color: var(--paper-light); text-decoration: underline; text-underline-offset: 4px; }
.footer-legal { max-width: none; padding-top: 25px; border-top: 1px solid var(--rule-invert); color: rgba(255,255,255,0.68); font-size: 16px; grid-column: 1 / -1; }
.footer-legal a { color: rgba(255,255,255,0.76); text-underline-offset: 3px; }
.footer-responsibility-reveal { display: grid; min-height: min(100svh,740px); place-items: center; padding: clamp(72px,11vw,160px) var(--page-rail); background: var(--paper-light); color: var(--ink); text-align: center; }
.footer-responsibility-copy { max-width: 43rem; }
.footer-responsibility-copy h2 { margin: 0; font-size: clamp(46px,5vw,76px); line-height: 1.02; }
.footer-responsibility-copy p { max-width: 33ch; margin: 28px auto 0; color: var(--dim); font-size: clamp(23px,2vw,30px); line-height: 1.42; }
.footer-responsibility-copy a { color: var(--pine); text-decoration-color: rgba(13,91,58,0.4); text-underline-offset: 4px; }
.footer-responsibility-copy a:hover { text-decoration-color: currentColor; }
.footer-inner-product { grid-template-columns: 1fr 0.6fr; }

/* A reversible final threshold. The enhanced desktop branch measures this track
   like its work deck: the card has a real scroll distance and lifts out of the
   clipped stage, exposing the stationary statement beneath. Without that JS,
   on smaller screens, and for reduced motion, source order remains card then
   complete centred statement. */
@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .site-footer[data-footer-responsibility-measuring],
  .site-footer[data-footer-responsibility-ready] { background: var(--closing-ground); }
  .site-footer[data-footer-responsibility-measuring] .footer-card-track,
  .site-footer[data-footer-responsibility-ready] .footer-card-track { padding: 0; background: var(--closing-ground); }
  .site-footer[data-footer-responsibility-measuring] .footer-responsibility-stage,
  .site-footer[data-footer-responsibility-ready] .footer-responsibility-stage { position: sticky; top: 0; height: 100svh; overflow: clip; background: var(--closing-ground); }
  .site-footer[data-footer-responsibility-measuring] .footer-inner,
  .site-footer[data-footer-responsibility-ready] .footer-inner { position: absolute; z-index: 1; top: var(--footer-card-stage-offset, clamp(32px,4vw,72px)); right: 0; left: 0; will-change: transform; }
  .site-footer[data-footer-responsibility-measuring] .footer-responsibility-reveal,
  .site-footer[data-footer-responsibility-ready] .footer-responsibility-reveal { position: absolute; inset: 0; z-index: 0; height: 100svh; min-height: 0; }
  .site-footer[data-footer-responsibility-measuring] .footer-responsibility-reveal { opacity: 0; }
}

@media (min-width: 981px) {
  .masthead-inner {
    /* Derived from the rail rather than a fixed width, so the wordmark lands on
       the page rail at every viewport: inset the pill by the rail, then give
       back its 1px border and 24px inset. The action is a filled pill, so its
       own padding supplies the optical inset on the right; a literal 24px there
       would read as a gap. */
    width: calc(100% - 2 * (var(--page-rail) - 25px));
    max-width: none;
    margin-inline: auto;
    padding-inline: 24px 8px;
  }
}

@media (max-width: 980px) {
  .masthead { top: 10px; }
  .masthead-inner { width: calc(100% - 20px); grid-template-columns: 1fr auto; }
  .nav { display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 4px 6px; grid-column: 1 / -1; }
  .nav { grid-row: 2; }
  .nav.is-open { display: flex; }
  .nav a { padding: 11px 6px; border-bottom: 1px solid var(--rule); font-size: 16px; }
  .nav a[aria-current="page"] { text-decoration: none; }
  .masthead-inner > .btn-nav { display: none; }
  /* Holding the label and its mark on one line is right where there is room for
     the line. On a narrow screen it makes the control unshrinkable, and a long
     label drove the page 43px sideways at 320. */
  .nav.is-open + .btn-nav { display: inline-flex; width: max-content; margin: 4px 4px 6px; grid-column: 1 / -1; }
  .nav.is-open + .btn-nav { grid-row: 3; }
  .nav-toggle { display: block; grid-column: 2; grid-row: 1; }
  .masthead-inner:has(.nav.is-open) { border-radius: 28px; }
  html.nav-open, body.nav-open { overflow: hidden; }
  .masthead.is-open {
    position: fixed;
    z-index: 200;
    inset: 0;
    height: 100dvh;
    overflow-y: auto;
    background: rgba(6, 47, 32, 0.54);
    backdrop-filter: blur(9px) saturate(0.86);
  }
  .masthead.is-open .masthead-inner { margin-top: 10px; }
  .masthead.is-open .nav { padding: 16px 10px 10px; border-top: 1px solid var(--rule); }
  .masthead.is-open .nav a { padding: 14px 8px; }
  .masthead-product .masthead-inner { grid-template-columns: 1fr auto; }
  .masthead-product .product-institution { display: none; }
  .masthead-product .masthead-inner > .btn-nav { display: inline-flex; }
  .home-paths-intro h2 { max-width: none; }
  /* Single column on small screens, so the band has nowhere to bleed into.
     Zeroing the token retires the rule bleed, the gutters and the hover offsets
     together, instead of unwinding each of them by hand. */
  .home-offering-pair, .path-grid, .practice-lab { --band-bleed: 0px; }
  .path-grid { grid-template-columns: minmax(0,1fr); }
  .path-card { min-height: 340px; }
  .path-card + .path-card { border-top: 1px solid var(--rule); border-left: 0; }
  .home-paths .path-grid { gap: 18px; padding-bottom: 0; }
  /* A stacked column has no terrain to offset. */
  .hub-training-pair .offering-card + .offering-card { border-left: 0; }
  .home-paths .path-card {
    min-height: 360px;
    translate: none;
    border: 1px solid rgba(23,37,31,0.08);
  }
  /* A stacked column has no terrain to offset. Both of these need their own
     reset: each is more specific than the shared `.home-paths` rules above. */
  .hub-forums .path-grid { padding-bottom: 0; }
  .hub-forums .path-card + .path-card { translate: none; }
  /* The credential rail keeps a 360px minimum column, which is wider than a
     phone once the page rails are taken out. It has to collapse like the rest. */
  .hub-credential-set { grid-template-columns: minmax(0,1fr); }
  /* A portrait beside an account needs two columns' worth of room. The portrait
     track holds a 210px floor, which left the account 108px on a phone and any
     long word in a biography pushed the page sideways. The portrait sits above
     the account instead, at a size a face still reads at. */
  .founder { gap: 26px; grid-template-columns: minmax(0,1fr); }
  /* A phone has no room either side of the reading column, so the note's field
     stops bleeding sideways. Its own `overflow: hidden` already holds the light
     inside it, so nothing is lost but the 7px of page that could scroll. */
  .founder-portrait { max-width: 208px; }
  /* A phone has no room for a column beside the icon; the icon leads instead. */
  .co-create-portal { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  .co-create-portal-mark { width: 76px; }
  /* Four lines at the fact copy's 24px/1.28 mobile measure. `lh` here would
     resolve against the smaller inherited container line-height and still let
     the longest fact move the Next control. */
  .practice-lab { grid-template-columns: auto 1fr; }
  .practice-lab-copy { grid-column: 2; }

  .offer-hero-grid, .forum-experience-grid { grid-template-columns: minmax(0,1fr); }
  .offer-facts { max-width: 760px; padding: 28px 0 0; border-top: 1px solid var(--rule); border-left: 0; }
  .offer-agenda-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .offer-agenda-grid.three-up { grid-template-columns: repeat(2,minmax(0,1fr)); }

  .choice-grid, .choice-grid-pair { grid-template-columns: minmax(0,1fr); }
  /* A phone has no room beside the page, so the conversation takes the surface
     the way an application already does. */
  .contact-modal { inset: 0; width: 100%; border: 0; border-radius: 0; }
  .contact-modal-close { top: 20px; right: 20px; }
}

@media (max-width: 1100px) {
  .home-teams .home-offering-pair { gap: 18px; grid-template-columns: minmax(0,1fr); }
  .home-teams .offering-card,
  .home-teams .offering-card + .offering-card {
    min-height: auto;
    margin-top: 0;
  }
}

@media (max-width: 720px) {
  body { font-size: 18px; }
  h1 { font-size: clamp(42px,13.5vw,62px); }
  h2 { font-size: clamp(34px,10.5vw,48px); }
  .question-sequence { --question-gap: 26px; --question-inner-offset: 73vw; --question-outer-offset: 134vw; }
  [data-sequence-ready] .question-viewport { height: 640px; }
  [data-sequence-ready] .question-slide { left: 50%; width: 48vw; min-width: 188px; padding: 24px; }
  [data-sequence-ready] .question-slide[data-question-slot="0"] { left: 50%; width: 84vw; min-width: 0; }
  .question-title { max-width: 16ch; font-size: 28px; }
  .question-slide[data-question-active] .question-title { font-size: clamp(34px,9.6vw,44px); }
  .question-answer p { max-width: 34ch; font-size: 18px; }
  .question-controls { display: flex; justify-content: center; }
  .question-actions { flex-wrap: nowrap; }
  .question-lucky, .question-step { padding-inline: 14px; font-size: 14px; white-space: nowrap; }
  .question-spin-card { padding: 24px; }
  .question-spin-card .question-title { max-width: calc(16ch + var(--open,0) * 200ch); font-size: calc(28px + var(--open,0) * (clamp(34px,9.6vw,44px) - 28px)); }
  .question-spin-card .question-answer p { max-width: calc(34ch + var(--open,0) * 200ch); font-size: 18px; }
  .note-index-link {
    grid-template-areas:
      "meta signature"
      "title title"
      "excerpt excerpt";
    grid-template-columns: minmax(0,1fr) 72px;
  }
  .note-index-field { width: 64px; }
  .section-pad { padding-block: 82px; }
  .home-hero { min-height: 100dvh; padding-top: 148px; }
  .home-hero h1 { max-width: 9.6ch; font-size: clamp(42px, 13.5vw, 58px); }
  .home-hero .label { margin: 24px 0 18px; }
  .home-hero .lede { margin-top: 30px; }
  .hero-atmosphere i:nth-child(1) { width: 110vw; top: 5%; right: -58%; }
  .hero-atmosphere i:nth-child(2) { width: 88vw; top: 25%; right: -46%; }
  .hero-atmosphere i:nth-child(3) { width: 70vw; top: 2%; right: 2%; }
  .home-principle p { font-size: 18px; }
  .offer-case .offer-recognition > p:not(.label) { font-size: 18px; }
  .home-offering-pair { grid-template-columns: minmax(0,1fr); }
  .offering-card + .offering-card { border-top: 1px solid var(--rule-invert); border-left: 0; }
  .home-training-field > .shell { padding-inline: 28px; }
  .home-teams .offering-card,
  .home-teams .offering-card:first-child,
  .home-teams .offering-card + .offering-card { padding: 30px; }
  .home-teams .home-offering-pair p { font-size: 20px; }
  .home-page .home-paths.section-pad { padding-block: 110px; }
  .home-connect { min-height: 82svh; }
  .practice-lab { padding: 26px; grid-template-columns: minmax(0,1fr); }
  .practice-lab-copy { grid-column: 1; }
  .band-open, .subpage-hero { padding-block: 170px 82px; }
  .product-hero, .research-hero, .about-hero { min-height: auto; padding-block: 170px 92px; }
  .band { padding-block: 78px; }
  .product-layout { gap: 24px; grid-template-columns: minmax(0,1fr); }
  .product-layout-visual { width: 104px; min-height: 104px; margin-top: 0; }
  [data-disclosure-toggle] { max-width: 100%; white-space: normal; }
  .co-create-opening-copy { min-height: 100svh; padding-bottom: 150px; }
  .co-create-opening-copy h1 { max-width: 11ch; font-size: clamp(50px,14.8vw,72px); }
  .co-create-workspace-copy { padding-block: 100px; }
  .co-create-workspace-copy h2 { font-size: clamp(46px,12.8vw,62px); }
  .co-create-product-view { padding-inline: 14px; }
  [data-co-create-motion] { height: 440svh; }
  [data-co-create-motion] .co-create-story-stage { min-height: 560px; }
  [data-co-create-motion] .co-create-product-view { inset: 0; }
  [data-co-create-motion] .co-create-product-stage { filter: drop-shadow(0 16px 40px rgba(37,33,43,0.18)) drop-shadow(0 0 1px rgba(61,111,207,0.62)); }
  [data-co-create-motion] .co-create-product-crop { padding: 100px 30px 0; }
  .co-create-preview-identity small { display: none; }
  .co-create-preview-entry { max-width: 91%; }
  .co-create-preview-thread { padding-inline: 18px; }
  .co-create-invitation-actions { display: grid; width: 100%; grid-template-columns: minmax(0,1fr); justify-content: stretch; justify-items: stretch; gap: 12px; }
  .co-create-invitation-actions .btn { width: 100%; }

  .offer-hero { padding-block: 142px 70px; }
  .training-page .offer-hero { padding-top: 126px; }
  .offer-hero-copy { display: flex; flex-direction: column; }
  .offer-hero-copy .label { order: 0; }
  .offer-hero-copy h1 { order: 1; }
  .offer-hero-copy .actions { order: 2; }
  .offer-hero-copy .lede { order: 3; }
  .offer-hero-copy > p:not(.label):not(.lede) { order: 4; }
  .offer-hero-copy h1 { font-size: clamp(40px,11.6vw,56px); }
  .offer-hero-copy .actions { margin-top: 24px; }
  .offer-hero-copy .lede { margin-top: 20px; }
  .forum-question-panel { padding-top: 28px; }
  /* Every surface that splits on a wide screen returns to one column here.
     A phone has no second column to give them, and each of these was wide
     enough on its own to push the page sideways. */
  .forum-room-card,
  .offer-decision-list,
  .offer-detail-pair,
  .offer-buyer-check { grid-template-columns: minmax(0,1fr); }
  /* A phone has no second column, so the account leads and the room follows it. */
  .about-story-grid { gap: 30px; grid-template-columns: minmax(0,1fr); }
  .about-story-figure { min-height: 280px; }
  .conversion-page .band:not(.band-open) { width: calc(100% - 28px); padding: 34px 24px; }
  .contact-modal-head { padding: 34px 28px 24px; }
  .contact-flow { padding: 0 28px 34px; }
  .form-grid, .form-question-grid { grid-template-columns: minmax(0,1fr); }
  .form-room-choice { display: grid; grid-template-columns: minmax(0,1fr); }
  .form-room-choice label { border-radius: var(--radius-chip); }

  .footer-inner, .footer-inner-product { grid-template-columns: minmax(0,1fr); }
  .footer-legal { grid-column: 1; }
}

@media (max-width: 980px) {
  .hero-network { display: none; }
}

/* The product masthead carries a wordmark and a full call to action. Below
   roughly 400px the two together outrun the bar, so the frame gives back its
   own margins before either set of words gives up any size. The wordmark is
   left alone deliberately: a shrunk logo reads as a broken one. */
@media (max-width: 400px) {
  .masthead-product .masthead-inner { gap: 10px; padding-inline: 18px; }
  .masthead-product .masthead-inner > .btn { padding-inline: 12px 10px; font-size: 15px; }
}

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

@media print {
  .masthead, .skip-link, .nav-toggle { display: none !important; }
  body { background: #fff; font-size: 11pt; }
  body::before, .hero-atmosphere { display: none; }
  /* A page can be sent to print before an entrance has finished. Nothing on
     paper may depend on an animation having run. */
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-ground] { opacity: 1 !important; transform: none !important; }
  [data-disclosure-toggle] { display: none !important; }
  .product-familiar-detail[hidden] { display: block !important; }
  .site-footer { background: none; color: #000; }
}

/* Canonical Home company-shape compositions. */
.home-page .home-products {
  --action-face: var(--paper-light);
  --action-ink: var(--pine-deep);
  --action-edge: var(--paper-light);
  --action-face-hover: var(--mint);
  --action-ink-hover: var(--pine-deep);
  background: transparent;
  color: rgba(255,255,255,0.78);
}
.home-page .home-products.section-pad { padding-block: 0 clamp(34px,4vw,64px); }
.home-page .home-products .section-intro h2 { font-size: clamp(42px,4.6vw,72px); line-height: 1.04; }
.home-page .home-product-field {
  position: relative;
  width: calc(100% - 2 * var(--page-rail));
  margin: clamp(44px,4vw,72px) auto 0;
  padding-block: clamp(78px,8vw,124px);
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: var(--radius-xl);
  background:
    radial-gradient(ellipse 52% 66% at 96% 4%, rgba(84,140,247,0.12), transparent 70%),
    radial-gradient(ellipse 44% 54% at 2% 100%, rgba(167,215,186,0.11), transparent 72%),
    #103f30;
  box-shadow: 0 30px 80px rgba(8,63,41,0.14);
}
.home-page .home-product-world { position: relative; z-index: 1; padding-inline: clamp(44px,8vw,120px); }
.home-page .home-product-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 24px 34px; margin-top: clamp(42px,5vw,64px); }
.home-page .home-product-actions .link { color: var(--paper-light); }
.home-page .home-products h2 { color: var(--paper-deep); }
.home-page .home-products h2 em { color: #a7d7ba; }

/* Research is the outer working surface; its live question is a distinct sheet
   within it. The nested material change makes the inquiry read as the object
   being studied rather than another paragraph in the section. */
.home-page .home-research-evidence {
  --action-face: var(--paper-light);
  --action-ink: var(--pine-deep);
  --action-edge: var(--paper-light);
  --action-face-hover: var(--mint);
  --action-ink-hover: var(--pine-deep);
  --action-chip: rgba(13,91,58,0.1);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse 48% 50% at 94% 12%, rgba(80,145,108,0.22), transparent 72%),
    radial-gradient(ellipse 56% 52% at 92% 96%, rgba(201,134,131,0.13), transparent 74%),
    var(--pine-deep);
  color: rgba(255,255,255,0.74);
}
.home-page .home-research-evidence-inner { position: relative; z-index: 1; max-width: none; margin-inline: auto; }
.home-page .home-research-evidence-layout { display: grid; align-items: center; grid-template-columns: minmax(0,3fr) minmax(320px,2fr); gap: clamp(54px,7vw,120px); }
.home-page .home-research-evidence-intro { max-width: none; }
.home-page .home-research-evidence-intro .label { color: #a7d7ba; }
.home-page .home-research-evidence-intro h2 { width: 100%; max-width: none; color: var(--paper-light); font-size: clamp(42px,4.6vw,72px); line-height: 1.04; }
.home-page .home-research-evidence-intro h2 em { color: #a7d7ba; }
.home-page .home-research-evidence-intro > p:not(.label) { max-width: 47rem; margin-top: 28px; color: rgba(255,255,255,0.7); font-size: 24px; line-height: 1.55; }
.home-page .home-research-actions { margin-top: clamp(34px,4vw,52px); }
.home-page .home-research-question {
  width: 100%;
  padding: clamp(38px,3.4vw,56px);
  overflow: hidden;
  border-radius: var(--radius);
  background:
    radial-gradient(circle at 84% 10%, rgba(234,211,208,0.92), transparent 44%),
    var(--paper-light);
  color: var(--ink);
  box-shadow: 0 24px 64px rgba(4,28,18,0.2);
}
.home-page .home-research-question h3 { max-width: none; font-size: clamp(36px,3vw,52px); line-height: 1.08; }

.home-page .home-field-note {
  background:
    radial-gradient(ellipse 62% 46% at 94% 22%, rgba(var(--air-b),0.26), transparent 74%),
    radial-gradient(ellipse 58% 44% at 4% 84%, rgba(var(--air-a),0.3), transparent 76%),
    var(--break-ground);
}
.home-page .home-field-note-inner { max-width: calc(var(--measure) + 2 * var(--page-rail)); margin-inline: auto; }
.home-page .home-field-note-intro h2 { max-width: 19ch; font-size: clamp(42px,4.6vw,72px); line-height: 1.04; }
.home-page .home-field-note-intro > p:not(.label) { max-width: var(--measure); margin-top: 24px; color: var(--dim); font-size: 24px; line-height: 1.55; }
.home-page .home-field-note-preview-wrap { margin-top: clamp(48px,6vw,76px); border-block: 1px solid var(--rule); }
.home-page .home-field-note-preview { margin-inline: calc(-1 * clamp(16px,1.6vw,26px)); }
.home-page .home-field-note-inner > .link { margin-top: 34px; }
.home-page .home-lab-people {
  background:
    radial-gradient(ellipse 48% 50% at 8% 38%, rgba(var(--air-c),0.44), transparent 72%),
    radial-gradient(ellipse 42% 42% at 92% 72%, rgba(var(--air-a),0.16), transparent 74%),
    var(--paper-light);
}
.home-page .home-lab-people-inner { display: grid; justify-items: center; max-width: calc(68rem + 2 * var(--page-rail)); margin-inline: auto; text-align: center; }
.home-page .home-lab-people h2 { max-width: 21ch; font-size: clamp(42px,4.6vw,72px); line-height: 1.04; }
.home-page .home-lab-people > .shell > p:not(.label) { max-width: 48rem; margin-top: 28px; color: var(--dim); font-size: 24px; line-height: 1.55; }
.home-page .home-lab-people .link { margin-top: 30px; }

/* Home's work sequence is a measured deck, not three equal slides. Its static source order
   remains the complete small-screen, reduced-motion, print, and no-JS page. */
.home-work-stack { position: relative; isolation: isolate; }
.home-continuum:has(.home-work-stack) { overflow: visible; }
html:has(.home-work-stack), body:has(.home-work-stack) { overflow-x: clip; }
.home-work-stack-stage { display: grid; gap: clamp(28px,4vw,54px); }
.home-work-stack-card { min-width: 0; }
.home-work-stack .home-work-stack-dots { display: none; }
[data-turn-scroll][data-turn-vertical] .turn-dot[aria-current="true"] i { width: 100%; height: 100%; transform: translateX(-50%) scaleY(var(--turn-progress,0)); transform-origin: 50% 0; box-shadow: none; }

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .home-work-stack[data-home-work-stack-measuring],
  .home-work-stack[data-home-work-stack-ready] { padding-block: clamp(34px,4vw,64px) clamp(92px,9vw,144px); }
  .home-work-stack[data-home-work-stack-ready]::before { position: sticky; z-index: 0; top: 0; display: block; height: 100svh; margin-bottom: -100svh; background: radial-gradient(ellipse 58% 50% at 86% 12%, rgba(var(--air-b),0.2), transparent 74%), radial-gradient(ellipse 52% 46% at 8% 88%, rgba(var(--air-c),0.24), transparent 76%), var(--paper-deep); content: ""; }
  .home-work-stack[data-home-work-stack-measuring] .home-work-stack-track,
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-track { position: relative; z-index: 1; }
  .home-work-stack[data-home-work-stack-measuring] .home-work-stack-stage,
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-stage { --page-rail: clamp(44px,6vw,90px); display: block; width: min(calc(100% - 2 * var(--page-rail)), 1725px); margin-inline: auto; }
  .home-work-stack[data-home-work-stack-measuring] .home-work-stack-viewport { display: grid; gap: 0; }
  .home-work-stack[data-home-work-stack-measuring] .home-work-stack-card,
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card { position: relative; width: 100%; overflow: hidden; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(8,63,41,0.18); }
  .home-work-stack[data-home-work-stack-measuring] .home-work-stack-card + .home-work-stack-card { margin-top: 24px; }
  .home-work-stack[data-home-work-stack-measuring] .home-products.section-pad,
  .home-work-stack[data-home-work-stack-measuring] .home-teams.section-pad,
  .home-work-stack[data-home-work-stack-ready] .home-products.section-pad,
  .home-work-stack[data-home-work-stack-ready] .home-teams.section-pad { padding-block: 0; }
  .home-work-stack[data-home-work-stack-measuring] .home-product-field,
  .home-work-stack[data-home-work-stack-measuring] .home-training-field,
  .home-work-stack[data-home-work-stack-ready] .home-product-field,
  .home-work-stack[data-home-work-stack-ready] .home-training-field { width: 100%; margin: 0; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); box-shadow: 0 20px 48px rgba(8,63,41,0.16); }
  .home-work-stack[data-home-work-stack-measuring] .home-research-evidence.section-pad,
  .home-work-stack[data-home-work-stack-ready] .home-research-evidence.section-pad { padding-block: clamp(92px,9vw,144px); }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-stage { position: sticky; top: var(--home-work-stack-top,90px); height: var(--home-work-stack-stage-height); }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-viewport { position: relative; height: var(--home-work-stack-card-height); overflow: clip; border-radius: var(--radius-xl); box-shadow: 0 30px 80px rgba(8,63,41,0.18); will-change: height, transform; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card { position: absolute; z-index: 1; inset: 0 0 auto; border: 1px solid rgba(255,255,255,0.1); border-radius: var(--radius-xl); box-shadow: 0 20px 48px rgba(8,63,41,0.16); pointer-events: none; will-change: transform; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card > section { min-height: 100%; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card.is-product { z-index: 3; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card.is-research { z-index: 2; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card.is-training { z-index: 1; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-card[data-home-work-active] { pointer-events: auto; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-dots { --turn-ink: rgba(13,91,58,0.34); --turn-ink-strong: var(--pine); display: flex; position: absolute; z-index: 10; top: 0; right: -42px; pointer-events: none; }
  .home-work-stack[data-home-work-stack-ready] .home-work-stack-dots .turn-dot { transition: none; }
  /* The sticky deck ground is allowed to stay stuck one viewport past the deck,
     so every section that follows it must own its paint layer or be painted over. */
  .home-work-stack[data-home-work-stack-ready] ~ section,
  .home-continuum:has(.home-work-stack[data-home-work-stack-ready]) ~ .home-connect { position: relative; z-index: 1; }
}

@media (max-width: 980px) {
  .home-page .home-product-world { padding-inline: 28px; }
  .home-page .home-research-evidence-layout { grid-template-columns: 1fr; gap: 54px; }
  .home-page .home-research-question { padding: 34px; }
  body:has([data-home-work-stack]):not(.site-js) .nav { display: flex; }
  body:has([data-home-work-stack]):not(.site-js) .nav-toggle { display: none; }
  body:has([data-home-work-stack]):not(.site-js) .masthead-inner > .btn-nav { display: inline-flex; width: max-content; margin: 4px 4px 6px; grid-column: 1 / -1; grid-row: 3; }
}

@media print {
  .home-work-stack::before { display: none !important; }
  .home-work-stack-stage, .home-work-stack-viewport { display: grid !important; }
  .home-work-stack-viewport { height: auto !important; overflow: visible !important; gap: 24px; }
  .home-work-stack-card { position: static !important; margin-top: 0 !important; transform: none !important; }
  body:has([data-home-work-stack]) .home-work-stack-card,
  body:has([data-home-work-stack]) .home-work-stack-card section,
  body:has([data-home-work-stack]) .home-work-stack-card article { background: #fff !important; box-shadow: none !important; }
  body:has([data-home-work-stack]) .home-work-stack-card,
  body:has([data-home-work-stack]) .home-work-stack-card * { color: #000 !important; text-shadow: none !important; }
}

/* Follows a defined ground, so the descent starts where that ground ended. */
/* Every page changes ground before it turns to the invitation, so the ask
   reads as a new section rather than the tail of the argument above it. The
   last content section holds the break; the invitation returns to page paper. */

/* About's final argument sits on the defined break before its invitation. */
.about-founders {
  background:
    radial-gradient(ellipse 50% 46% at 10% 30%, rgba(var(--air-a),0.2), transparent 72%),
    radial-gradient(ellipse 46% 44% at 92% 76%, rgba(var(--air-b),0.18), transparent 74%),
    var(--break-ground);
}