/* ==========================================================================
   graylemon.io: home page layer
   Loads after the Ledgerly Design System v2 (core → blueprint → editorial).
   Composes Ledgerly tokens and patterns only: no new colours, type families,
   radii or shadows. Rules here cover page-specific layout and the few
   Graylemon components the system has no equivalent for (the S1
   demonstration, the command palette).
   ========================================================================== */

/* ---------- Utilities ---------- */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip-link{position:fixed;left:var(--s-4);top:var(--s-3);z-index:calc(var(--z-header) + 1);padding:10px 14px;border-radius:var(--r-sm);background:var(--brand-500);color:var(--white);font:500 var(--fs-small)/1 var(--font-sans);transform:translateY(-200%);transition:transform var(--dur-fast) var(--ease-out)}
.skip-link:focus{transform:none}
main:focus{outline:0}
ol,ul{list-style:none}
[hidden]{display:none!important}
/* Progressive enhancement: reveals only hide content when JS is running */
html:not(.js) [data-reveal]{opacity:1;transform:none}
.btn-row{display:flex;flex-wrap:wrap;gap:10px}
.fig-row{display:flex;justify-content:space-between;gap:var(--s-3);margin-top:var(--s-3)}
.section-row{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:var(--s-4) var(--s-12);margin-bottom:var(--s-10)}

/* ---------- Type rhythm: line heights that keep two lines of a heading, label or paragraph clearly apart ---------- */
.t-h1{line-height:1.1}
.t-h2{line-height:1.14}
.t-h3{line-height:1.18}
.t-lead{font-size:var(--fs-small);line-height:1.65}
/* Supporting text under a title is 14px everywhere */
.split--head>.stack>p.body-copy,.split--head>.stack>.body-copy,.venture__line,.next-card p{font-size:var(--fs-small);line-height:1.65}
.t-small{line-height:1.55}
.card__body{line-height:1.6}
.body-copy,.ticks li,.qa p,.qa li,.venture__line,.fw-note,.fw-seq span,.fw-filter span,.fw-layers span,.fw-split p,.stages .phase li{line-height:1.65}
/* Mono labels wrap on narrow cards: give them a real line height, and keep the leading rule on the first line */
.t-index{align-items:flex-start;line-height:1.5}
/* Labels carry no leading rule (the design system draws an 18px line before each one) */
.t-index::before{content:none}
.phase__when{display:block;line-height:1.5}
/* Card titles: the design system's h3 (up to 40px) is sized for sections, not for a card a third of the row wide */
.card .t-h3,.stages .t-h3{font-size:clamp(24px,2.1vw,30px);line-height:1.2;text-wrap:balance}
.services.grid-2 .t-h3{font-size:clamp(26px,2.6vw,34px)}
h1,h2,.t-h1,.t-h2{text-wrap:balance}

/* Section index: "01 ·" counts only the sections that render */
main{counter-reset:sec}
[data-sec]::before{counter-increment:sec;content:counter(sec,decimal-leading-zero) " ·"}
/* Performance (spec section 11): sections below the opening skip rendering until they near the viewport.
   content-visibility also scopes counters to each section (an increment inside starts a new counter),
   so each section sets "sec" from its position among the sections that render and the label only reads it.
   Browsers without both features keep the plain counter. */
@supports (content-visibility:auto) and selector(:nth-child(1 of a)){
  main > .section, .footer{content-visibility:auto;contain-intrinsic-size:auto 1000px}
  /* Jumps to a #section need real heights: the page opts out on those visits and in-page link clicks */
  .cv-off main > .section, .cv-off .footer{content-visibility:visible}
  main [data-sec]::before{counter-increment:none}
  main > section:nth-child(2 of section:not([hidden])){counter-reset:sec 1}
  main > section:nth-child(3 of section:not([hidden])){counter-reset:sec 2}
  main > section:nth-child(4 of section:not([hidden])){counter-reset:sec 3}
  main > section:nth-child(5 of section:not([hidden])){counter-reset:sec 4}
  main > section:nth-child(6 of section:not([hidden])){counter-reset:sec 5}
  main > section:nth-child(7 of section:not([hidden])){counter-reset:sec 6}
  main > section:nth-child(8 of section:not([hidden])){counter-reset:sec 7}
  main > section:nth-child(9 of section:not([hidden])){counter-reset:sec 8}
  main > section:nth-child(10 of section:not([hidden])){counter-reset:sec 9}
  main > section:nth-child(11 of section:not([hidden])){counter-reset:sec 10}
}

/* ---------- Brand ---------- */
/* The wordmark ends in the cube (scripts/brand-marks.py); its viewBox is 4.645 wide to 1 high */
.brand__wordmark{display:block;width:121px;height:26px}
.footer .brand__wordmark{width:144px;height:31px}

/* ---------- Preloader (index.html) ----------
   On arriving from outside the site, the head script adds .gl-preload: the cube rises out of its tile and sinks back
   on a loop while the page loads. graylemon.js takes over from there (.is-live) and plays the finale; if it hasn't
   by 3.2 seconds after the preloader appears, the failsafe clears the screen. The overlay never takes a click. */
.preloader{display:none}
.gl-preload .preloader{position:fixed;inset:0;z-index:calc(var(--z-toast) + 10);display:grid;place-items:center;pointer-events:none;animation:gl-pre-failsafe .3s ease-out 3.2s forwards}
.gl-preload .preloader.is-live{animation:none}
.preloader__ground{position:absolute;inset:0;background:var(--surface)}
.preloader__art{position:relative;width:64px;height:auto;overflow:visible}
.preloader__cube{animation:gl-pre-rise 1.5s infinite}
.preloader__dot,.preloader__ring{transform-box:fill-box;transform-origin:center;opacity:0}
/* While the cube flies to the wordmark, the wordmark's own cube waits for it (graylemon.js adds .gl-landing) */
.gl-landing #gl-wordmark polygon{visibility:hidden}
@keyframes gl-pre-rise{
  0%{transform:translateY(var(--rise));opacity:0}
  8%{transform:translateY(var(--rise));opacity:1;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  38%{transform:none;opacity:1}
  70%{transform:none;opacity:1;animation-timing-function:cubic-bezier(.6,0,.8,.4)}
  90%{transform:translateY(var(--rise));opacity:1}
  100%{transform:translateY(var(--rise));opacity:0}
}
@keyframes gl-pre-failsafe{to{opacity:0;visibility:hidden}}
@media (prefers-reduced-motion:reduce){.preloader__cube{animation:none}}
@media print{.gl-preload .preloader{display:none}}

/* ---------- Header additions ---------- */
/* The auto-hidden header comes back while focus is inside it, so a focused link is never off-screen (WCAG 2.4.11) */
.header.is-hidden:focus-within{transform:none}
/* Resources hub link sits beside Subscribe at the right of the mega footer */
.mega__foot-inner .mega__foot-end{margin-left:0}
/* Command palette trigger: the editorial .search field, as a button */
.palette-trigger{display:inline-flex;align-items:center;gap:var(--s-2);width:200px;height:40px;padding:0 6px 0 var(--s-3);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);font:400 var(--fs-small)/1 var(--font-sans);color:var(--text-muted);transition:border-color var(--dur-instant) var(--ease-standard)}
.palette-trigger:hover{border-color:var(--ink-40)}
.palette-trigger__icon{width:14px;height:14px;flex-shrink:0;color:var(--ink-40)}
.palette-trigger__kbd{margin-left:auto;min-width:20px;height:20px;padding:0 5px;display:grid;place-items:center;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--mist);font:500 10px/1 var(--font-mono);color:var(--text-muted)}
.mega__situation{margin-bottom:4px}
/* Mega menus: a panel sized to what's in it, opened under its own menu item (graylemon.js sets --mega-x),
   with a banner and a call to action on the right */
@media (min-width:1024px){
  .mega{top:var(--header-h);left:0;right:0;border-radius:0;box-shadow:0 24px 40px -28px rgba(2,23,32,.28)}
  .mega__inner{padding-block:var(--s-8);gap:var(--s-10)}
  .mega__cols{flex:1;grid-template-columns:repeat(var(--mega-cols,3),minmax(0,1fr));gap:0 var(--s-8);align-items:start;align-content:start}
  .mega__side--promo{flex:none;width:300px}
}
.mega-banner{min-height:100%}
/* Services and About: each column shares four rows (number, situation, name, link), so every row is one straight line;
   a situation sits on its row's bottom edge, right above the name it describes */
@media (min-width:1024px){
  @supports (grid-template-rows:subgrid){
    #mega-services .mega__hero,#mega-about .mega__hero{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start;margin-bottom:0}
    #mega-services .mega__situation{align-self:end;margin-top:var(--s-2)}
    #mega-about .mega__desc{align-self:start}
  }
}
}
.mega-banner .mega-promo__code{white-space:pre}
.mega-banner__art{display:grid;place-items:center;height:136px;overflow:hidden;border-bottom:1px solid var(--line)}
.mega-banner__art svg.illo{width:auto;height:120px;overflow:hidden}
.mega-promo__cta .btn{margin-top:4px}
.drawer__label{padding:var(--s-5) 0 var(--s-2)}
.drawer__situation{display:block;margin-bottom:2px;font:400 var(--fs-micro)/1.4 var(--font-sans);color:var(--text-muted)}

/* ---------- S1 · Opening: the claim on top, the demonstration below ---------- */
.hero{padding:0 0 var(--s-24)}
/* The claim fills exactly one screen below the header, centred; the demonstration starts at the fold.
   svh keeps the height steady on phones while the address bar shows and hides (vh is the fallback). */
.hero__head{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:calc(100vh - var(--header-h));min-height:calc(100svh - var(--header-h));padding-block:var(--s-10)}
.hero__title{max-width:1040px;margin-inline:auto;text-wrap:balance}
.hero__head .t-lead{font-size:var(--fs-small);text-wrap:balance}
.hero__demo{margin-top:0}

/* ---------- S1 · Demonstration ---------- */
/* Blueprint status stamps are 10px mono text, which needs 4.5:1: the label stays ink and the signal colour
   sits on the dot, so the word carries the meaning and colour is never the only cue (WCAG 1.4.1, 1.4.3) */
.status{color:var(--ink-80)}
.status--paid::before{background:var(--bp-signal)}
.status--held::before{background:var(--bp-hold)}
.status--review::before{background:var(--bp)}
.status--blocked::before{background:var(--bp-stop)}
.demo{margin:0;padding:24px 20px 14px;border-radius:var(--r-md);display:flex;flex-direction:column;gap:var(--s-3);min-width:0}
.demo__top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--s-2) var(--s-4);padding:0 4px}
.demo__tabs{display:none}
.js .demo__tabs{display:flex;gap:var(--s-4);padding:0 4px;max-width:100%}
/* Full width: the six tabs read as one stepper, each timer filling its own segment */
.demo__tabs button{flex:1 1 0;min-width:0;white-space:nowrap}
.demo__tabs button{position:relative;display:inline-flex;align-items:center;gap:var(--s-2)}
.demo__tabs .mono{font-size:var(--fs-mono-sm);color:var(--text-muted);transition:color var(--dur-instant)}
.demo__tabs [aria-selected="true"] .mono{color:var(--bp)}
.demo__timer{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--bp-line);transform:scaleX(0);transform-origin:left;pointer-events:none}
.demo.is-autoplay [aria-selected="true"] .demo__timer{animation:cs-progress var(--demo-dur,4000ms) linear forwards}
.demo__stage{display:grid;gap:var(--s-10);padding:var(--s-8)}
.js .demo__stage{gap:0}
.js .demo__panel{grid-area:1/1;min-width:0}
.js .demo__panel:not(.is-active){visibility:hidden}
/* Each stage: the question and its verdict on the left, the evidence on the right */
.demo__panel{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:var(--s-5) var(--s-12)}
.demo__q{display:flex;flex-direction:column;gap:var(--s-2);min-width:0}
.demo__q>.demo__result,.demo__q>.demo__final{margin-top:auto}
.demo__visual{align-self:center;min-width:0}
.demo__step{display:none}
html:not(.js) .demo__step{display:inline-flex;margin-bottom:var(--s-2)}
.demo__title{font:300 28px/1.18 var(--font-serif);letter-spacing:var(--tracking-heading);color:var(--ink);text-wrap:balance}
.demo__caption{padding:0 4px}
.demo__fig{display:flex;justify-content:space-between;gap:var(--s-3);padding:0 4px}

/* Decide */
.demo__table{margin:0}
.demo__table th:nth-child(1){width:42%}
.demo__table th:nth-child(2){width:23%}
.demo__table--ladder th:nth-child(1){width:30%}
.demo__table--ladder th:nth-child(2){width:17%}
.is-open .demo__idea,.is-open .demo__reason{color:var(--ink-60)}
.demo__table td{vertical-align:top;line-height:1.4}
.demo__table th:first-child,.demo__table td:first-child{padding-left:0}
.demo__idea{font-weight:500}
.demo__reason{color:var(--text-muted)}
.demo .status{min-width:0;text-transform:uppercase;white-space:nowrap}
.is-cut .demo__idea,.is-cut .demo__reason{color:var(--text-muted)}
.is-cut .demo__idea span{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:0 58%;background-size:100% 1px}
.demo__result{display:flex;align-items:center;gap:var(--s-2);padding-top:var(--s-3);border-top:1px solid var(--line);font-size:var(--fs-small)}
.demo__result::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--bp-signal)}

/* Design */
.demo__design{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s-6);align-items:center}
.demo__points{display:grid;gap:var(--s-3)}
.demo__points li{display:grid;grid-template-columns:24px 1fr;gap:6px;font-size:13px;line-height:1.5;color:var(--ink-80)}
.demo__points .mono{font-size:var(--fs-mono-sm);line-height:1.8;color:var(--bp)}
.demo__points b{font-weight:600;color:var(--ink)}
.chat{gap:var(--s-2);padding:var(--s-3)}
.chat__head{padding-bottom:var(--s-2);border-bottom:1px dashed var(--line)}
.chat__log{display:grid;gap:6px;font-size:var(--fs-micro);line-height:1.4}
.chat__msg{justify-self:start;max-width:88%;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.chat__msg--out{justify-self:end;border-color:var(--brand-500);background:var(--brand-500);color:var(--white)}
.chat__slots{display:flex;gap:6px}
.chat__slots .chip{padding:2px 10px;background:var(--white);font-family:var(--font-mono)}
.chat__slots .chip.is-selected{background:var(--brand-100);border-color:var(--brand-100);color:var(--brand-700);font-weight:500}
.chat__btn{pointer-events:none}

/* Ship */
.demo__checks{display:grid;gap:var(--s-3)}
.demo__checks li{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-small);line-height:1.4}
.demo__checks svg{width:18px;height:18px;flex-shrink:0}
.demo__checks rect{fill:var(--success-bg);stroke:var(--success);stroke-width:1}
.demo__checks path{fill:none;stroke:var(--success);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:0}
.demo__rollout-label{padding-bottom:var(--s-3)}
.demo__rollout{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.demo__rollout li{position:relative;padding:22px 6px 0 0;font:500 10px/1.35 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bp)}
.demo__rollout li::before{content:"";position:absolute;left:0;top:2px;z-index:1;width:10px;height:10px;border-radius:50%;background:var(--bp);border:2px solid var(--bp)}
.demo__rollout li:not(:last-child)::after{content:"";position:absolute;left:10px;right:0;top:6px;height:2px;background:var(--bp)}
.demo__rollout li:not(.is-reached){color:var(--text-muted)}
.demo__rollout li:not(.is-reached)::before{background:var(--white);border-color:var(--bp-line)}
.demo__rollout li:not(.is-reached)::after,.demo__rollout li.is-reached:has(+ li:not(.is-reached))::after{background:var(--bp-hair)}
.demo__rollout li.is-reached:last-child{color:var(--ink)}
.demo__rollout li.is-reached:last-child::before{background:var(--bp-signal);border-color:var(--bp-signal)}
.demo__list-label{margin-top:var(--s-6);padding:var(--s-4) 0 var(--s-2);border-top:1px dashed var(--line)}
.demo__recs li{font-size:var(--fs-small)}
.demo__final{display:flex;align-items:center;gap:10px;padding-top:var(--s-2);font-size:var(--fs-small)}

/* Choreography: plays only while a step is replaying; the resting state is always complete */
@keyframes demo-stamp{0%{opacity:0;transform:scale(1.35)}100%{opacity:1;transform:none}}
@keyframes demo-strike{from{background-size:0 1px}to{background-size:100% 1px}}
@keyframes demo-select{from{background:var(--white);border-color:var(--line);color:var(--ink)}to{background:var(--brand-100);border-color:var(--brand-100);color:var(--brand-700)}}
@keyframes demo-check{from{fill:var(--white);stroke:var(--line)}to{fill:var(--success-bg);stroke:var(--success)}}
@keyframes demo-grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.demo__panel.is-playing [data-seq]:not(tr),
.demo__panel.is-playing tr[data-seq]>td{animation:reveal-up var(--dur-slow) var(--ease-expo) both;animation-delay:calc(var(--t) * 1ms);--move-reveal:8px}
.demo__panel.is-playing [data-stamp]{animation:demo-stamp var(--dur-slow) var(--ease-pop) both;animation-delay:calc(var(--t) * 1ms)}
.demo__panel.is-playing [data-strike]{animation:demo-strike var(--dur-slow) var(--ease-draw) both;animation-delay:calc(var(--t) * 1ms)}
.demo__panel.is-playing [data-select]{animation:demo-select var(--dur-fast) var(--ease-out) both;animation-delay:calc(var(--t) * 1ms)}
.demo__panel.is-playing .demo__checks rect{animation:demo-check var(--dur-base) var(--ease-out) both;animation-delay:calc((var(--t) + 250) * 1ms)}
.demo__panel.is-playing .demo__checks path{stroke-dashoffset:1;animation:bp-draw var(--dur-slow) var(--ease-draw) both;animation-delay:calc((var(--t) + 300) * 1ms)}
.demo__panel.is-playing .demo__rollout li::after{transform-origin:left;animation:demo-grow var(--dur-slow) var(--ease-draw) both;animation-delay:calc((var(--t) + 120) * 1ms)}

/* ---------- S2 · Four services ---------- */
.services .t-h3{max-width:16ch}
.services .card__body{max-width:52ch;font-size:var(--fs-body)}
.service__link{margin-top:var(--s-2)}
.service__link::after{content:"";position:absolute;inset:0}
.service__work{position:relative;z-index:1;display:block;margin-top:var(--s-4);transition:border-color var(--dur-fast) var(--ease-out)}
.service__work:hover{border-color:var(--ink)}
.service__work-name{font:300 20px/1 var(--font-serif)}
.services__partner{margin-top:var(--s-10);color:var(--ink-80)}
.services__partner .arrow-link{margin-left:4px;color:var(--ink)}

/* ---------- S3 · Stuck-to-Scale: six stages, one at a time, the figure building the staircase in step ----------
   Two layouts from one set of markup. Flowing (phones, screens too short to pin, and without the script): the stages
   scroll by, each with room of its own, the figure pinned beside them (above them on phones), the stage being read at
   full strength and the rest dimmed by colour, not opacity, so their text still clears 4.5:1 on sand (ink-60 is
   4.7:1). Pinned (desktop, when graylemon.js finds it fits, .is-pinned): the whole section holds still while you
   scroll through it, the stages take turns in one place, and a rail fills as you go. */
.method__pin{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"intro fig" "rail fig" "stages fig" "more fig";column-gap:56px;align-items:start}
.method__intro{grid-area:intro}
.method__intro .t-h1{margin:16px 0 12px}
.method__fig{grid-area:fig;align-self:start;position:sticky;top:max(calc(var(--header-h) + var(--s-6)),calc(50vh + var(--header-h) / 2 - 240px));margin:0}
html:not(.js) .method__fig{display:none}
.method__rail{grid-area:rail;display:none}
.method__stages{grid-area:stages;list-style:none;margin:var(--s-8) 0 0;padding:0;border-bottom:1px solid var(--bp-hair)}
.method__stage{min-height:46vh;border-top:1px solid var(--bp-hair)}
.method__card{display:grid;grid-template-columns:36px minmax(0,1fr);gap:6px 12px;padding:var(--s-8) 0}
.method__card>*{transition:color var(--dur-slow) var(--ease-out)}
html.js .method__stage:not(.is-active) :is(.method__name,.method__q,.method__brief){color:var(--ink-60)}
.method__n{grid-row:1/span 2;padding-top:12px;font-size:var(--fs-mono-sm);color:var(--text-muted);transition:color var(--dur-base)}
.method__of{display:none}
.method__stage.is-active .method__n{color:var(--bp)}
.method__name{grid-column:2;margin:0;font:300 32px/1.15 var(--font-serif);letter-spacing:var(--tracking-heading)}
.method__q{grid-column:2;margin:0;font-size:var(--fs-lead);line-height:1.45;color:var(--ink)}
.method__brief{grid-column:2;margin:var(--s-2) 0 0;max-width:52ch;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.method__cta{grid-column:2;justify-self:start;margin-top:var(--s-4)}
.method__more{grid-area:more;margin-top:var(--s-6)}

/* Pinned: the section holds for one screen plus a stretch of scroll per stage (graylemon.js sets --n) */
.method.is-pinned{height:calc(100vh - var(--header-h) + var(--n,6) * 62vh)}
/* Heading on the left, the intro on the right above the figure, the rail and the stage under the heading */
.method.is-pinned .method__pin{position:sticky;top:var(--header-h);height:calc(100vh - var(--header-h));grid-template-rows:auto auto auto auto;grid-template-areas:"head lead" "rail fig" "stages fig" "more fig";align-content:center;row-gap:0}
.method.is-pinned .method__intro{display:contents}
.method.is-pinned .method__head{grid-area:head;padding-bottom:var(--s-6)}
.method.is-pinned .method__head .t-h1{margin:12px 0 0;font-size:clamp(36px,3.4vw,48px);line-height:1.08}
.method.is-pinned .method__intro .t-lead{grid-area:lead;align-self:end;margin:0;padding-bottom:var(--s-6)}
.method.is-pinned .method__fig{position:static;align-self:center}
.method.is-pinned .method__fig .illo{max-height:calc(100vh - var(--header-h) - 270px);margin-inline:auto;width:auto;max-width:100%}
.method.is-pinned .method__rail{display:block;margin-bottom:var(--s-5)}
.method.is-pinned .method__more{margin-top:var(--s-4)}
/* Pinned, the page stops moving, so a scroll reveal near the bottom edge might never fire: show it in place */
.method.is-pinned [data-reveal]:not(.is-in){opacity:1;transform:none}
.method__rail ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;list-style:none;margin:0;padding:0}
.method__rail button{display:flex;flex-direction:column;align-items:flex-start;gap:6px;width:100%;padding:0 0 12px;font:500 var(--fs-mono-xs)/1.2 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);text-align:left;transition:color var(--dur-base) var(--ease-out)}
.method__rail button:hover,.method__rail button.is-done{color:var(--ink-80)}
.method__rail button.is-active{color:var(--bp)}
.method__rail button:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.method__bar{position:relative;display:block;height:2px;background:var(--bp-hair)}
.method__bar i{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:var(--bp)}
.method.is-pinned .method__stages{position:relative;margin:0;border:0;height:var(--panel-h,300px)}
.method.is-pinned .method__stage{position:absolute;inset:0 0 auto;min-height:0;border:0;transition:opacity 450ms var(--ease-out),transform 700ms var(--ease-expo)}
.method.is-pinned .method__stage.is-next{opacity:0;transform:translateY(36px);pointer-events:none}
.method.is-pinned .method__stage.is-done{opacity:0;transform:translateY(-36px);pointer-events:none}
.method.is-pinned .method__card{grid-template-columns:minmax(0,1fr);gap:8px;padding:0}
.method.is-pinned .method__cta{margin-top:var(--s-3);height:38px}
.method.is-pinned .method__n{grid-row:auto;padding:0;color:var(--bp)}
.method.is-pinned .method__of{display:inline;color:var(--text-muted)}
.method.is-pinned :is(.method__name,.method__q,.method__brief,.method__cta){grid-column:auto}
.method.is-pinned .method__name{font-size:38px}
/* The stage coming in arrives line by line */
.method.is-pinned .method__stage.is-active .method__card>*{animation:method-in 700ms var(--ease-expo) both}
.method.is-pinned .method__stage.is-active .method__card>:nth-child(2){animation-delay:50ms}
.method.is-pinned .method__stage.is-active .method__card>:nth-child(3){animation-delay:100ms}
.method.is-pinned .method__stage.is-active .method__card>:nth-child(4){animation-delay:150ms}
.method.is-pinned .method__stage.is-active .method__card>:nth-child(5){animation-delay:200ms}
@keyframes method-in{from{opacity:0;transform:translateY(14px)}}

/* The figure: steps reached are drawn, the stage being read is solid, later steps rise into place as they're reached */
.method-walk .layer{transition:opacity 500ms var(--ease-out),transform 700ms var(--ease-expo)}
.method-walk .layer.is-next{opacity:0;transform:translateY(18px)}
.method-walk .layer polygon{transition:fill var(--dur-base) var(--ease-out),stroke var(--dur-base) var(--ease-out)}
.method-walk .layer.is-current .face-top{fill:var(--bp);stroke:var(--bp)}
.method-walk .layer.is-current .face-l{fill:#0036d4;stroke:#0036d4}
.method-walk .layer.is-current .face-r{fill:#0030b8;stroke:#0030b8}
.method-walk .layer.is-current text{fill:var(--bp);font-weight:600}
.method-walk .method__climb{fill:none;stroke:var(--bp);stroke-width:1.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:calc(1 - var(--climb,0));transition:stroke-dashoffset 700ms var(--ease-expo)}
.method-walk .method__marker{fill:var(--white);stroke:var(--bp);stroke-width:2;transition:transform 700ms var(--ease-expo)}
/* Pinned, the marker and the climb follow the scroll itself, so they carry no easing of their own */
.method-walk.is-scrubbed :is(.method__climb,.method__marker){transition:none}
.method-walk .method__goal{opacity:0;transition:opacity var(--dur-slow) var(--ease-out)}
.method-walk.is-top .method__goal{opacity:1}
@media (max-width:1023px){
  .method__pin{grid-template-columns:minmax(0,1fr);grid-template-areas:"intro" "fig" "rail" "stages" "more"}
  .method__fig{top:var(--header-h);z-index:2;margin-top:var(--s-6);padding-block:var(--s-3);background:var(--sand);border-bottom:1px solid var(--bp-hair);transition:top var(--dur-base) var(--ease-out)}
  /* The header slides away while scrolling down: the figure moves up with it, so nothing shows through the gap */
  body:has(.header.is-hidden) .method__fig{top:0}
  .method__fig .illo{max-height:34vh;margin-inline:auto;width:auto;max-width:100%}
  .method__stage{min-height:38vh}
  .method__name{font-size:28px}
}
/* Short screens held sideways: no room to pin the figure */
@media (max-width:1023px) and (max-height:599px){.method__fig{position:static}}

/* ---------- S4 · Our ventures ---------- */
.ventures{gap:var(--s-8) var(--s-6)}
.venture{display:flex;flex-direction:column;gap:var(--s-3)}
/* Product screens: Ledgerly .photo, shown in true colour (the photo desaturation is for photography) */
.photo picture{display:contents}
.venture__media,.work__media{aspect-ratio:16/10;border:1px solid var(--line)}
.venture__media img,.work__media img,.mega-promo .photo img{filter:none;object-position:left top}
.venture__live{position:absolute;left:12px;top:12px;z-index:2}
.venture__links{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-6)}
.venture__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3);margin-top:var(--s-2)}
.venture__meta .status{min-width:0;text-transform:uppercase}
.service__work .status{min-width:0;text-transform:uppercase}
.venture__line{max-width:54ch;color:var(--ink-80)}
.venture__services{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px var(--s-4);padding-top:var(--s-3);border-top:1px dashed var(--line);font-size:var(--fs-small)}
.venture__services a{color:var(--ink-80);transition:color var(--dur-instant)}
.venture__services a:hover{color:var(--brand-600)}

/* ---------- S5 · Work ---------- */
.work__head{display:flex;justify-content:space-between;align-items:center;gap:var(--s-4);margin-bottom:var(--s-8);padding-bottom:var(--s-4);border-bottom:1px solid var(--line)}
.empty.work__empty{grid-column:auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:var(--s-3);padding:var(--s-8);text-align:left;color:var(--ink-80)}

/* ---------- S6 · Partners ---------- */
.partners__fig{margin:0;padding:20px 16px 14px;border-radius:var(--r-md)}

/* ---------- S7 · Lab (gated) ---------- */
.lab__item{display:flex;flex-direction:column;gap:var(--s-4);padding:var(--s-8);border-radius:var(--r-sm)}
.lab__input{flex:1;min-width:200px}

/* ---------- S8 · Conviction ---------- */
.conviction__title{max-width:1000px;text-wrap:balance}

/* ---------- S11 · Close ---------- */
.close__promise{display:inline-flex;align-items:center;gap:10px;color:var(--ink-80)}
/* The closing call to action: after a white section it sits close, since that section's own padding already gives
   the space; after a sand section it keeps its top padding, so the card never touches the band */
.section:not(.section--sand) + #close{padding-top:0}

/* ---------- Inner pages (built from pages/ by scripts/build-pages.py) ---------- */
.nav__item.is-current{color:var(--brand-600)}
/* Primary nav: each name is a link to its own page, and hovering it opens its menu. The small toggle beside it
   opens the menu from the keyboard; it stays out of sight until it has focus. */
.nav__group{position:relative;display:flex;align-items:center;height:100%}
.nav__toggle{position:absolute;right:-4px;top:50%;translate:0 -50%;display:grid;place-items:center;width:18px;height:18px;border-radius:4px;color:var(--ink-60);opacity:0;pointer-events:none}
.nav__toggle svg{width:10px;height:10px}
.nav__toggle:focus-visible{opacity:1;pointer-events:auto;outline:2px solid var(--brand-500);outline-offset:1px}
.nav__group:has(.nav__toggle[aria-expanded="true"]) .nav__item{color:var(--brand-600)}
.nav__group:has(.nav__toggle[aria-expanded="true"]) .nav__item::after{transform:translateX(-50%) scale(1)}
.drawer__label--link{display:flex;gap:6px;align-items:center;color:var(--bp)}
/* Page heads use the full container, so breadcrumbs, title and lead line up with the sections below.
   The design system's .article-head is a centred 880px column whose padding shorthand zeroes the gutter. */
.page-head .article-head{max-width:var(--container);padding-inline:var(--gutter);padding-bottom:var(--s-12)}
.page-head .article-head h1{max-width:20ch;line-height:1.08;text-wrap:balance}
.page-head .article-head .t-lead{max-width:640px;font-size:var(--fs-small);line-height:1.65}
.page-head .article-head>.t-index{margin-top:var(--s-8)}
.page-head .article-head h1{margin:var(--s-4) 0 var(--s-5)}
.page-head .btn-row{margin-top:var(--s-8)}
.page-head .t-lead+.t-lead{margin-top:var(--s-4)}
/* A section with its heading on the left and the content on the right */
.split--head{grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:var(--s-16)}
.split--head>.stack .t-h1{font-size:clamp(30px,3.4vw,40px)}
.body-copy{display:grid;gap:var(--s-4);max-width:680px;color:var(--ink-80)}
.body-copy p{margin:0}
.body-copy strong{color:var(--ink);font-weight:600}
.body-copy a:not([class]){color:var(--brand-500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.body-copy a:not([class]):hover{text-decoration-color:transparent}
/* Links in running text: the design system styles these only inside .prose */
main :is(.t-lead,.body-copy,.qa,.ticks,.facts,.fw-note,.dossier__list,.next-card h2,p.t-small,.form__status,.form__privacy) a:not([class]){color:var(--brand-500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color var(--dur-instant)}
main :is(.t-lead,.body-copy,.qa,.ticks,.facts,.fw-note,.next-card h2,p.t-small,.form__status) a:not([class]):hover{text-decoration-color:transparent}
.ticks{display:grid;gap:var(--s-3);max-width:680px}
.ticks li{position:relative;padding-left:var(--s-6);color:var(--ink-80)}
.ticks li::before{content:"";position:absolute;left:1px;top:.6em;width:7px;height:7px;border-radius:50%;background:var(--brand-500)}
.ticks strong{color:var(--ink);font-weight:600}
.ticks--no li::before{background:none;border:1.5px solid var(--ink-40);transform:none;border-radius:50%;width:8px;height:8px}
/* Phases and gates, as design-system phase cards in a grid (no rollout track: there can be more than three) */
.stages{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-4)}
.stages .phase{border:1px solid var(--line);display:flex;flex-direction:column;padding:var(--s-6)}
.stages .phase>.t-h3{margin-top:var(--s-2)}
.stages .phase>p{margin-top:var(--s-3)}
.stages .phase::before{display:none}
.stages .phase ul{display:grid;gap:6px;margin-top:var(--s-3);font-size:var(--fs-small);color:var(--ink-80)}
.stages .phase ul li{padding-left:14px;position:relative}
.stages .phase ul li::before{content:"";position:absolute;left:0;top:.6em;width:5px;height:5px;border-radius:50%;background:var(--bp)}
.stages .phase__gate{margin-top:auto;padding-top:14px;line-height:1.5}
.stages .phase__more{margin-top:var(--s-4);align-self:flex-start}
.stages .phase ul+.phase__gate{margin-top:var(--s-5)}
/* A split section's heading column stays in view until the content beside it ends (like the home page's questions) */
@media (min-width:1024px){
  .split--head>:first-child{position:sticky;top:calc(var(--header-h) + var(--s-10));align-self:start}
}
/* Full-width sections: the alternative to a split, so two splits never sit back to back */
.body-copy--wide{display:block;max-width:none;columns:2 320px;column-gap:var(--s-12)}
.body-copy--wide p{break-inside:avoid;margin:0 0 var(--s-4)}
.qa--grid{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--s-12);max-width:none}
.qa--grid>div:last-child,.qa--grid>li:last-child{border-bottom:0}
.facts--wide{max-width:none;grid-template-columns:repeat(2,minmax(0,180px) minmax(0,1fr));column-gap:var(--s-8)}
/* Misreads: each card names the mistake, then why it's wrong */
.misreads{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4)}
.misreads>li{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto 1fr;column-gap:var(--s-3);row-gap:var(--s-3);padding:var(--s-6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.misreads__tag{grid-row:1;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--danger-bg);color:var(--danger);font:600 12px/1 var(--font-sans)}
.misreads__label{grid-row:1;align-self:center;font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--danger)}
.misreads h3{grid-column:1 / -1;font:500 18px/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.misreads p{grid-column:1 / -1;align-self:start;padding-top:var(--s-3);border-top:1px dashed var(--line);font-size:var(--fs-small);line-height:1.65;color:var(--ink-80)}
.misreads__why{display:block;margin-bottom:2px;font:500 var(--fs-mono-sm)/1.5 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
@supports (grid-template-rows:subgrid){
  .misreads>li{grid-template-rows:subgrid;grid-row:span 3}
}
/* Points: a list as a grid of short cards */
.points{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:var(--s-4)}
.points>li{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.points>li::before{content:"";width:8px;height:8px;margin-bottom:var(--s-3);border-radius:50%;background:var(--brand-500)}
.points--no>li::before{background:none;border:1.5px solid var(--ink-40)}
.points h3{font:500 18px/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.points p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.points>li[data-reveal].is-in::before{animation:tick-in 600ms var(--ease-expo) both;animation-delay:calc(min(var(--i,0),6) * 70ms + 220ms)}
/* What you get: numbered deliverables, each with a rule that draws in when it arrives */
.deliverables{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--s-4);counter-reset:deliv}
.deliverables>li{position:relative;display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-8) var(--s-6) var(--s-6);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;counter-increment:deliv}
.deliverables>li::before{content:counter(deliv,decimal-leading-zero);font:300 44px/1 var(--font-serif);letter-spacing:-.02em;color:var(--bp);margin-bottom:var(--s-4)}
.deliverables>li::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--bp);transform-origin:0 50%}
html.js .deliverables>li[data-reveal]:not(.is-in)::after{transform:scaleX(0)}
.deliverables>li[data-reveal].is-in::after{animation:rule-in 900ms var(--ease-expo) both;animation-delay:calc(min(var(--i,0),6) * 70ms + 200ms)}
@keyframes rule-in{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.deliverables h3{font:500 18px/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
.deliverables p{font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
@supports (grid-template-rows:subgrid){
  .deliverables>li{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--s-2);align-content:start}
  .points>li{display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--s-2);align-content:start}
}
/* FAQ: one sticky list of groups beside every question */
.faq-toc{display:grid;gap:2px;border-left:1px solid var(--line)}
.faq-toc a{display:block;padding:6px 0 6px var(--s-4);margin-left:-1px;border-left:2px solid transparent;font-size:var(--fs-small);color:var(--ink-80);transition:color var(--dur-instant),border-color var(--dur-fast) var(--ease-out)}
.faq-toc a:hover{color:var(--ink)}
.faq-toc a.is-current{border-left-color:var(--bp);color:var(--bp);font-weight:500}
.faq-groups{display:grid;gap:var(--s-16);max-width:760px}
.faq-group{scroll-margin-top:calc(var(--header-h) + 24px)}
.faq-group__title{font:500 var(--fs-mono-sm)/1.5 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp);margin-bottom:var(--s-2)}
@media (max-width:1023px){
  .faq-toc{grid-auto-flow:column;grid-auto-columns:max-content;overflow-x:auto;border-left:0;border-bottom:1px solid var(--line)}
  .faq-toc a{padding:8px 12px;margin:0 0 -1px;border-left:0;border-bottom:2px solid transparent}
  .faq-toc a.is-current{border-bottom-color:var(--bp)}
  .facts--wide{grid-template-columns:minmax(0,180px) minmax(0,1fr)}
}
@media (max-width:640px){
  .qa--grid,.facts--wide{grid-template-columns:minmax(0,1fr)}
}

/* ---------- How it runs: a stage-by-stage walkthrough driven by the scroll ----------
   graylemon.js adds .is-live, builds the rail, and sets --fill (0 to 1) and each card's state:
   .is-done (cleared), .is-active (the stage you're reading) or .is-next. Without it, or with reduced
   motion, the stages stay a plain grid of cards. */
.process__rail{display:none}
.process.is-live .stages>.phase{position:relative;transition:opacity 500ms var(--ease-out),translate 600ms var(--ease-expo),border-color 300ms var(--ease-out),box-shadow 400ms var(--ease-out)}
/* Upcoming stages recede without losing contrast: dashed edge, muted text, an outlined gate */
.process.is-live .phase.is-next{border-style:dashed}
.process.is-live .phase.is-next :is(.t-h3,.phase__when,li,p,.phase__gate){color:var(--ink-60)}
.process.is-live .phase.is-next ul li::before{background:var(--ink-40)}
.process.is-live .phase.is-next .phase__gate .t-tag{background:var(--white);border-color:var(--bp-line);color:var(--ink-60)}
.process.is-live .phase :is(.t-h3,.phase__when,li,p,.phase__gate){transition:color 400ms var(--ease-out)}
.process.is-live .phase.is-active{border-color:var(--bp);box-shadow:var(--shadow-float);translate:0 -6px}
.process.is-live .phase.is-active .phase__when{color:var(--bp)}
.process.is-live .phase.is-active ul li{animation:item-in 500ms var(--ease-expo) both}
.process.is-live .phase.is-active ul li:nth-child(2){animation-delay:90ms}
.process.is-live .phase.is-active ul li:nth-child(3){animation-delay:180ms}
.process.is-live .phase.is-active ul li:nth-child(4){animation-delay:270ms}
.process.is-live .phase.is-active .phase__gate .t-tag{animation:gate-in 600ms var(--ease-expo) 380ms both}
.process.is-live .phase.is-done .phase__gate .t-tag::after{content:"✓";margin-left:4px}
@keyframes item-in{from{opacity:0;translate:12px 0}to{opacity:1;translate:0 0}}
/* Reduced motion: the same stage-by-stage walkthrough, with every change instant */
.process.is-still :is(.phase,.phase *,.process__node b,.process__node span,.process__fill,.process__dot,.stages){transition:none!important;animation:none!important}
.process.is-still .phase.is-active{translate:none}
/* The rail: numbered nodes, a line that fills, and a marker at its head */
.process__nodes{position:relative;display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr))}
.process__node{position:relative;z-index:1;display:grid;justify-items:start;gap:8px;padding-right:var(--s-4)}
.process__node b{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--white);border:1.5px solid var(--line);font:500 11px/1 var(--font-mono);color:var(--text-muted);transition:background-color 300ms var(--ease-out),border-color 300ms var(--ease-out),color 300ms var(--ease-out),box-shadow 300ms var(--ease-out)}
.process__node span{font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-muted);transition:color 300ms var(--ease-out)}
.process__node.is-active b{border-color:var(--bp);color:var(--bp);box-shadow:0 0 0 5px var(--brand-100)}
.process__node.is-done b{background:var(--bp);border-color:var(--bp);color:var(--white)}
.process__node.is-active span,.process__node.is-done span{color:var(--ink)}
.process__line{position:absolute;left:14px;top:13px;height:2px;width:calc(100% * (var(--n,3) - 1) / var(--n,3));background:var(--line)}
.process__fill{position:absolute;inset:0;background:var(--bp);transform-origin:0 50%;transform:scaleX(var(--fill,0))}
.process__dot{position:absolute;top:50%;left:calc(var(--fill,0) * 100%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--bp);box-shadow:0 0 0 5px rgba(0,64,247,.16)}
.process__status{margin-top:var(--s-4);font-size:var(--fs-small);color:var(--text-muted)}
.process__status b{font-weight:500;color:var(--ink)}
/* Desktop: the panel pins while the scroll walks through the stages */
@media (min-width:1024px){
  html.js .process{height:calc(100vh - var(--header-h) + (var(--n,3) - 1) * 50vh)}
  html.js .process__panel{position:sticky;top:var(--panel-top,calc(var(--header-h) + var(--s-8)))}
  html.js .process__rail{display:block;margin-bottom:var(--s-8)}
  .process.is-live .stages>.phase:not(:last-child)::after{content:"";position:absolute;left:100%;top:50%;width:var(--s-4);height:2px;background:repeating-linear-gradient(90deg,var(--bp-line) 0 4px,transparent 4px 7px);transition:background 300ms var(--ease-out)}
  .process.is-live .stages>.phase.is-done:not(:last-child)::after{background:var(--bp)}
  html.js .process--track .process__viewport{overflow:hidden;margin:calc(-1 * var(--s-4)) calc(-1 * var(--s-2));padding:var(--s-4) var(--s-2);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 var(--s-8),#000 calc(100% - var(--s-8)),transparent);mask-image:linear-gradient(90deg,transparent 0,#000 var(--s-8),#000 calc(100% - var(--s-8)),transparent)}
  html.js .process--track .stages{display:flex;width:max-content;gap:var(--s-4);translate:var(--track-x,0px) 0}
  html.js .process--track .stages>.phase{flex:0 0 var(--card-w,320px);display:flex;flex-direction:column}
}
/* Phones and tablets: a vertical timeline that fills as you read down it */
@media (max-width:1023px){
  .process.is-live .stages{position:relative;padding-left:var(--s-10);grid-template-columns:minmax(0,1fr)}
  .process.is-live .stages::before,.process.is-live .stages::after{content:"";position:absolute;left:13px;top:12px;bottom:12px;width:2px;background:var(--line)}
  .process.is-live .stages::after{background:var(--bp);transform-origin:50% 0;transform:scaleY(var(--fill,0))}
  .process.is-live .stages>.phase::before{display:block;content:"";position:absolute;left:calc(-1 * var(--s-10) + 6px);top:26px;width:16px;height:16px;border-radius:50%;background:var(--white);border:2px solid var(--line);z-index:1;transition:background-color 300ms var(--ease-out),border-color 300ms var(--ease-out),box-shadow 300ms var(--ease-out);transition-delay:0s}
  .process.is-live .stages>.phase.is-active::before{border-color:var(--bp);box-shadow:0 0 0 5px var(--brand-100)}
  .process.is-live .stages>.phase.is-done::before{background:var(--bp);border-color:var(--bp)}
}

/* What you get: the deliverables as one written document, a contents list in two columns */
.dossier{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.dossier__bar{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--s-3);padding:var(--s-4) var(--s-8);border-bottom:1px solid var(--line);background:var(--mist)}
.dossier__title{font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
.dossier__list{columns:2 340px;column-gap:var(--s-12);column-rule:1px solid var(--line);padding:var(--s-2) var(--s-8) var(--s-4)}
.dossier__list>li{break-inside:avoid;display:grid;grid-template-columns:36px minmax(0,1fr);column-gap:var(--s-3);padding:var(--s-5) 0;border-bottom:1px dashed var(--line)}
.dossier__list>li:last-child{border-bottom:0}
.dossier__n{grid-row:span 2;font:500 var(--fs-mono-sm)/1.85 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--bp)}
.dossier__list h3{font:500 17px/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.dossier__list p{margin-top:4px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
@media (max-width:640px){
  .dossier__bar,.dossier__list{padding-inline:var(--s-5)}
}
/* Questions everywhere: the home page's accordion, answers at 14px */
.accordion summary{gap:var(--s-6);text-align:left;scroll-margin-top:calc(var(--header-h) + 24px)}
.accordion summary .plus{flex-shrink:0}
.accordion__body>div{font-size:var(--fs-small);line-height:1.65}
.accordion__body>div>p+p{margin-top:var(--s-3)}
.accordion details{scroll-margin-top:calc(var(--header-h) + 24px)}
.accordion details:target{animation:target-flash 2.4s var(--ease-out)}
.split--head .accordion{max-width:760px}
/* Cookie consent: a small card in the corner, never in the way of the page */
.consent{position:fixed;left:var(--s-4);bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px));z-index:calc(var(--z-drawer) - 1);display:grid;gap:var(--s-3);width:min(400px,calc(100vw - 2 * var(--s-4)));padding:var(--s-5);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-float);animation:reveal-up 500ms var(--ease-expo) both}
.consent__title{font:500 var(--fs-body)/1.3 var(--font-sans);color:var(--ink)}
.consent__text{font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.consent__actions{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.footer__consent{padding:0;border:0;background:none;font:inherit;color:inherit;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
@media (max-width:640px){
  .consent{right:var(--s-4);width:auto}
}
/* Questions with the answers in the page */
.qa{display:grid;max-width:760px}
.qa>div,.qa>li{padding:var(--s-6) 0;border-top:1px solid var(--line)}
.qa>div:last-child,.qa>li:last-child{border-bottom:1px solid var(--line)}
.qa h3{font:500 20px/1.3 var(--font-sans);letter-spacing:-.012em;color:var(--ink);text-wrap:balance;scroll-margin-top:calc(var(--header-h) + 24px)}
.qa p,.qa ul{margin-top:var(--s-2);font-size:var(--fs-small);line-height:1.65;color:var(--ink-80);max-width:640px}
/* Framework parts: numbered steps, and the evidence each needs grouped in its own box */
.qa--parts{counter-reset:part}
.qa--parts>div{position:relative;padding-left:var(--s-12);counter-increment:part}
.qa--parts>div::before{content:counter(part,decimal-leading-zero);position:absolute;left:0;top:calc(var(--s-6) + 4px);font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--bp)}
.evidence{margin-top:var(--s-4);padding:var(--s-3) var(--s-4);border-left:2px solid var(--bp);border-radius:0 var(--r-sm) var(--r-sm) 0;background:var(--white)}
.section:not(.section--sand) .evidence{background:var(--sand)}
.evidence__label{display:block;font:500 var(--fs-mono-sm)/1.5 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
.qa .evidence p{margin-top:4px;color:var(--ink)}
.qa ul{display:grid;gap:6px}
.qa ul li{padding-left:16px;position:relative}
.qa ul li::before{content:"";position:absolute;left:2px;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--brand-500)}
/* The design system's own list markers are diamonds too: round them */
.prose ul li::before,.trust span::before{border-radius:50%;transform:none}
/* Cards that lead somewhere next */
.next-card{display:flex;justify-content:space-between;align-items:center;gap:var(--s-6);flex-wrap:wrap;padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.next-card .t-h3{margin-top:6px}
.card-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:var(--s-4)}
.card-list .card{display:flex;flex-direction:column;gap:var(--s-3)}
.card-list .card .arrow-link{margin-top:auto}
.card-list .card__links{margin-top:auto;display:grid;gap:10px;justify-items:start}
.card-list .card__links .arrow-link{margin-top:0}
/* Cards in a row share their rows (label, title, body, call to action), so a label or title that wraps
   never pushes one card's link or gate lower than its neighbour's. --rows is the most children a card in that grid has. */
@supports (grid-template-rows:subgrid){
  .services>.service{display:grid;grid-template-rows:subgrid;grid-row:span 5;row-gap:var(--s-3);align-content:start}
  .services>.service>.service__work{align-self:end}
  .stages>.phase{display:grid;grid-template-rows:subgrid;grid-row:span 4;row-gap:0;align-content:start}
  .stages>.phase>.phase__gate{align-self:start}
  .ventures>.venture{display:grid;grid-template-rows:subgrid;grid-row:span 6;row-gap:var(--s-3);align-content:start}
  .ventures>.venture>.venture__services{align-self:end}
  .card-list>.card:not(:has(>:nth-child(4))){display:grid;grid-template-rows:subgrid;grid-row:span 3;row-gap:var(--s-3);align-content:start}
  .card-list>.card>:last-child{align-self:end}
  .align-rows>*{display:grid;grid-template-rows:subgrid;grid-row:span var(--rows,3);row-gap:var(--s-3);align-content:start}
}
/* Work views as links (the design system's segmented control) */
.views{font-size:var(--fs-small)}
.views a{padding:6px 14px;border-radius:var(--r-xs);color:var(--ink-80);transition:background-color var(--dur-instant)}
.views a:hover{background:var(--sand)}
.views a[aria-current="page"]{background:var(--brand-100);color:var(--brand-700);font-weight:500}
.facts{display:grid;grid-template-columns:minmax(0,220px) minmax(0,1fr);max-width:760px;border-top:1px solid var(--line)}
.facts dt,.facts dd{margin:0;padding:var(--s-4) 0;border-bottom:1px solid var(--line)}
.facts dt{font:500 var(--fs-mono-sm)/1.5 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-muted)}
.facts dd{color:var(--ink)}
.swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:var(--s-4)}
.swatch{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;font-size:var(--fs-small)}
.swatch i{display:block;height:72px}
.swatch span{display:block;padding:10px 12px}
.swatch code{font:500 var(--fs-mono-sm) var(--font-mono);color:var(--text-muted)}
/* At most three across, so the six logo files make two even rows */
.brand-files{display:grid;grid-template-columns:repeat(auto-fill,minmax(max(240px,calc((100% - 2 * var(--s-4)) / 3)),1fr));gap:var(--s-4)}
.brand-file{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:var(--white)}
.brand-file__art{display:grid;place-items:center;height:148px;padding:var(--s-6);background:var(--white)}
.brand-file__art--ink{background:var(--ink)}
.brand-file__art img{max-width:70%;height:auto}
.brand-file__dl{display:flex;gap:var(--s-4);flex-shrink:0}
/* The logo motion's two players (paper and ink), under the logo files */
.brand-motion{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr));gap:var(--s-4);margin-top:var(--s-4)}
.brand-file__art--video{display:block;height:auto;padding:0}
.brand-file__art--video video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.brand-file figcaption{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:12px 14px;border-top:1px solid var(--line);font-size:var(--fs-small);color:var(--ink-80)}
/* Forms on light backgrounds */
.form{display:grid;gap:var(--s-5);max-width:680px}
.form .check{color:var(--ink-80)}
.form fieldset{border:0;padding:0;margin:0;display:grid;gap:10px}
.form legend{font-weight:500;font-size:var(--fs-small);margin-bottom:8px;padding:0}
.form .options{display:flex;flex-wrap:wrap;gap:10px 22px}
.form textarea.input{height:auto;min-height:128px;padding:10px 12px;line-height:1.5;resize:vertical}
.form select.input{padding-right:var(--s-8)}
.form .field__hint{max-width:560px}
.form__row{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.form__privacy{font-size:var(--fs-small);color:var(--text-muted);max-width:560px}
.form-done{max-width:680px;padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--sand)}
.form-done:focus{outline:2px solid var(--brand-500);outline-offset:4px}
/* Framework diagrams: the text is the diagram, so it reads the same to people, screen readers and search */
.fw{margin:0}
.fw__frame{padding:var(--s-8);border-radius:var(--r-md)}
.fw-seq{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--s-3);counter-reset:fw}
.fw-seq>li{position:relative;padding:var(--s-5);background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm);counter-increment:fw}
.fw-seq>li::before{content:counter(fw,decimal-leading-zero);display:block;font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:.08em;color:var(--bp);margin-bottom:10px}
.fw-seq b,.fw-ladder b,.fw-layers b,.fw-filter b{display:block;font:400 22px/1.2 var(--font-serif);color:var(--ink)}
.fw-seq span,.fw-ladder span,.fw-layers span,.fw-filter span{display:block;margin-top:6px;font-size:var(--fs-small);color:var(--ink-80)}
.fw-filter{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:var(--s-3)}
.fw-filter>li{padding:var(--s-5);background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm)}
.fw-filter>li:first-child{border-color:var(--bp);box-shadow:inset 0 0 0 1px var(--bp)}
.fw-flow{font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bp)}
.fw-flow:first-child{margin-bottom:var(--s-4)}
.fw-flow:last-child{margin-top:var(--s-4)}
.fw-layers small,.fw-filter small{display:block;margin-bottom:6px;font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp)}
.fw-ladder{display:grid;gap:var(--s-2);max-width:620px;counter-reset:fw}
.fw-ladder>li{position:relative;padding:var(--s-4) var(--s-5);background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm);counter-increment:fw}
.fw-ladder>li::before{content:"Rung " counter(fw);display:block;font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp);margin-bottom:8px}
.fw-ladder>li:last-child{border-color:var(--bp);box-shadow:inset 0 0 0 1px var(--bp)}
.fw-ladder>li:nth-child(2){margin-left:6%}
.fw-ladder>li:nth-child(3){margin-left:12%}
.fw-ladder>li:nth-child(4){margin-left:18%}
.fw-ladder>li:nth-child(5){margin-left:24%}
.fw-layers{display:grid;gap:4px;max-width:720px}
.fw-layers>li{padding:var(--s-4) var(--s-5);background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm)}
.fw-matrix{width:100%;border-collapse:separate;border-spacing:4px;table-layout:fixed;font-size:var(--fs-small)}
.fw-matrix th{font:500 var(--fs-mono-sm)/1.3 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--bp);text-align:left;padding:8px 10px;vertical-align:bottom}
.fw-matrix tbody th{vertical-align:top}
.fw-matrix td{background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm);padding:12px;color:var(--ink-80);vertical-align:top}
.fw-matrix thead td{background:none;border:0}
.fw-matrix thead td:first-child{width:16%}
.fw-split{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.fw-split>div{padding:var(--s-6);background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm)}
.fw-split h3{font:400 24px/1.2 var(--font-serif);margin:8px 0}
.fw-split p{font-size:var(--fs-small);color:var(--ink-80)}
.fw-map{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:var(--s-3)}
.fw-map>li{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-4);background:var(--white);border:1px solid var(--bp-line);border-radius:var(--r-sm);min-height:180px}
.fw-map h3{font:500 var(--fs-mono-sm)/1.3 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp)}
.fw-map p{font-size:var(--fs-micro);color:var(--text-muted)}
.fw-map ul{display:grid;gap:6px;margin-top:auto}
.fw-map a{display:block;padding:8px 10px;border-radius:var(--r-xs);background:var(--brand-100);color:var(--brand-700);font-size:var(--fs-small);font-weight:500;line-height:1.3}
.fw-map a:hover{background:var(--brand-200)}
.fw-map__none{display:block;padding:8px 10px;border:1px dashed var(--bp-line);border-radius:var(--r-xs);font-size:var(--fs-micro);color:var(--text-muted)}
.fw-meta{display:flex;flex-wrap:wrap;gap:8px}
.page-head .fw-meta{margin-top:var(--s-6)}
.fw-note{max-width:680px;padding:var(--s-5) var(--s-6);border-left:3px solid var(--bp);background:var(--white);color:var(--ink-80)}
.fw-note strong{color:var(--ink);font-weight:600}
.fw-scroll{overflow-x:auto}
.fw-scroll:focus-visible{outline:2px solid var(--brand-500);outline-offset:4px}
.fw-scroll .fw-matrix{min-width:560px}
.fw-dates{margin-top:var(--s-8);font-size:var(--fs-small);color:var(--text-muted)}
.fw-dates a{color:inherit;text-decoration:underline;text-underline-offset:3px}
.fw-dates a:hover{color:var(--ink)}
.filter:not([aria-pressed="true"]) sup{color:var(--ink-60)}
.fw-nav a>span{display:block}
.fw-map a small{display:block;margin-top:2px;font-size:var(--fs-micro);font-weight:400;opacity:.8}
.fw-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.fw-nav a{display:block;padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-sm)}
.fw-nav a:hover{border-color:var(--ink-40)}
.fw-nav .t-h3{margin-top:6px}
.fw-nav a:last-child{text-align:right}
@media (max-width:1023px){
  .split--head{grid-template-columns:minmax(0,1fr);gap:var(--s-8)}
  .fw-map{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:640px){
  .form__row,.fw-split,.fw-nav{grid-template-columns:minmax(0,1fr)}
  .fw-nav a:last-child{text-align:left}
  .facts{grid-template-columns:minmax(0,1fr)}
  .facts dt{border-bottom:0;padding-bottom:0}
  .fw-map{grid-template-columns:minmax(0,1fr)}
  .fw-ladder>li{margin-left:0!important}
  .fw__frame{padding:var(--s-5)}
  .fw-matrix{font-size:var(--fs-micro)}
}

/* ---------- Motion: scroll reveals and micro-interactions ----------
   Reveals come from the design system (data-reveal, written in by scripts/build-pages.py).
   Everything here uses its motion tokens, and the design system's reduced-motion rule turns it all off. */
/* Long lists: stagger the first few items, then let the rest arrive together */
[data-reveal].is-in{animation-delay:calc(min(var(--i,0),6) * 70ms)}
/* The rule before a section label draws in with its heading */
/* List markers turn into place after their line arrives */
.ticks>li[data-reveal].is-in::before{animation:tick-in 600ms var(--ease-expo) both;animation-delay:calc(min(var(--i,0),6) * 70ms + 220ms)}
.ticks--no>li[data-reveal].is-in::before{animation-name:tick-in-round}
@keyframes tick-in{from{transform:scale(0)}60%{transform:scale(1.35)}to{transform:scale(1)}}
@keyframes tick-in-round{from{transform:scale(0)}to{transform:scale(1)}}
/* Gates stamp in once their stage card has arrived */
.stages>.phase.is-in .phase__gate .t-tag{animation:gate-in 500ms var(--ease-expo) both;animation-delay:calc(min(var(--i,0),6) * 70ms + 450ms)}
@keyframes gate-in{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:none}}
/* Clickable cards lift. (translate, not transform, so it never fights the reveal animation) */
.services>.service,a.card,.fw-map a,.brand-file,.next-card,.fw-nav a{transition:translate var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.services>.service:hover,a.card:hover{translate:0 -4px;box-shadow:var(--shadow-float)}
a.card--outline:hover{border-color:var(--ink-40)}
.fw-map a:hover{translate:0 -2px}
.brand-file:hover{translate:0 -3px;box-shadow:var(--shadow-float)}
.brand-file__art img{transition:transform var(--dur-base,400ms) var(--ease-expo)}
.brand-file:hover .brand-file__art img{transform:scale(1.05)}
/* A card with one way out is clickable as a whole */
.next-card{position:relative}
.next-card:not(:has(h2 a)) .arrow-link::after{content:"";position:absolute;inset:0;border-radius:inherit}
.next-card:not(:has(h2 a)):hover{border-color:var(--ink-40);translate:0 -2px;box-shadow:var(--shadow-float)}
.next-card:not(:has(h2 a)):hover .arrow{transform:translateX(var(--move-nudge))}
/* Before and next: the title leans the way it goes */
.fw-nav .t-h3{transition:translate var(--dur-fast) var(--ease-out)}
.fw-nav a:first-child:hover .t-h3{translate:-6px 0}
.fw-nav a:last-child:hover .t-h3{translate:6px 0}
/* Breadcrumbs wrap cleanly on phones, and each link underlines as you point at it */
.crumbs{flex-wrap:wrap;row-gap:4px;line-height:1.5}
.crumbs a{background-image:linear-gradient(currentColor,currentColor);background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;transition:color var(--dur-instant),background-size 400ms var(--ease-expo)}
.crumbs a:hover{background-size:100% 1px}
/* Diagram steps link to their explanation; the explanation flashes when you land on it */
.fw-step{display:block;color:inherit;border-radius:inherit;outline-offset:4px}
.fw-seq>li,.fw-filter>li,.fw-layers>li,.fw-ladder>li{transition:translate var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.fw-seq>li:has(.fw-step:hover),.fw-filter>li:has(.fw-step:hover),.fw-layers>li:has(.fw-step:hover),.fw-ladder>li:has(.fw-step:hover){translate:0 -3px;border-color:var(--bp);box-shadow:var(--shadow-mock)}
.fw-step b::after{content:" ↓";font:500 14px/1 var(--font-sans);color:var(--bp);opacity:0;transition:opacity var(--dur-fast) var(--ease-out)}
.fw-step:hover b::after,.fw-step:focus-visible b::after{opacity:1}
.fw-matrix th a{color:inherit;text-decoration:underline;text-decoration-color:var(--bp-line);text-underline-offset:3px}
.fw-matrix th a:hover{text-decoration-color:currentColor}
.qa>div:has(>h3:target),.qa>li:has(h3:target){animation:target-flash 2.4s var(--ease-out)}
@keyframes target-flash{0%,30%{background:var(--brand-100)}100%{background:transparent}}
.qa>div,.qa>li{scroll-margin-top:calc(var(--header-h) + 24px)}
/* Reading progress on inner pages: a 2px line that tracks the scroll (browsers with scroll-driven animations) */
.read-progress{position:fixed;left:0;right:0;top:0;z-index:calc(var(--z-header) + 1);height:2px;background:var(--bp);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
@supports (animation-timeline:scroll()){
  .read-progress{animation:read-progress linear both;animation-timeline:scroll(root)}
}
@keyframes read-progress{to{transform:scaleX(1)}}
/* Press kit swatches copy their hex code */
.swatch{display:block;width:100%;padding:0;background:var(--white);font:inherit;color:inherit;position:relative;text-align:left;cursor:copy;transition:translate var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.swatch:hover{translate:0 -3px;box-shadow:var(--shadow-float)}
.swatch:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px}
.swatch__done{position:absolute;right:10px;top:10px;padding:2px 8px;border-radius:var(--r-xs);background:var(--ink);color:var(--white);font:500 10px/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;opacity:0;transform:translateY(4px);transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.swatch.is-copied .swatch__done{opacity:1;transform:none}

/* ---------- Framework models (isometric, built in graylemon.js) ---------- */
.fw-model{margin:var(--s-10) 0 0}
.fw-model .fw__frame{display:grid;place-items:center;padding:var(--s-6) var(--s-4)}
.fw-model svg{max-height:440px}
@media (max-width:640px){
  /* Keep the model's labels legible: the frame scrolls sideways instead of shrinking the drawing */
  .fw-model .fw__frame{display:block;overflow-x:auto}
  .fw-model svg{min-width:560px;max-height:none}
}
.fw-model .fw__frame:focus-visible{outline:2px solid var(--brand-500);outline-offset:3px}
.fw-illo .layer{cursor:pointer;transition:transform var(--dur-base) var(--ease-expo)}
.fw-illo .layer .face-top,.fw-illo .layer text{transition:fill var(--dur-fast) var(--ease-out)}
.fw-illo .layer.is-active{transform:translateY(-6px)}
.fw-illo .layer.is-active .face-top{fill:var(--brand-100)}
.fw-illo .fw-plane{fill:var(--brand-100);fill-opacity:.55;stroke:var(--bp);stroke-width:1;stroke-dasharray:3 4}
/* The diagram step that matches the part under the pointer */
.fw-seq>li.is-linked,.fw-filter>li.is-linked,.fw-layers>li.is-linked,.fw-ladder>li.is-linked{translate:0 -3px;border-color:var(--bp);box-shadow:var(--shadow-mock)}
.fw-matrix th.is-linked{color:var(--ink)}

/* ---------- Media slots: where real photos and video go ----------
   A blueprint frame at the final aspect ratio, so the layout already holds the space.
   To fill one, replace .media-slot__frame with an <img> or <video> of the same ratio (README: Media slots). */
.media-slot{margin:0}
.media-slot__frame{position:relative;display:grid;place-items:center;aspect-ratio:var(--ratio,16/9);max-width:100%;border-radius:var(--r-media,var(--r-md));overflow:hidden;animation:slot-drift 9s linear infinite}
.media-slot__inner{display:grid;justify-items:center;gap:12px;padding:var(--s-6);text-align:center}
.media-slot__icon{position:relative;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--white);border:1px solid var(--bp-line);color:var(--bp);transition:transform var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.media-slot__icon::after{content:"";position:absolute;inset:-1px;border-radius:50%;border:1px solid var(--bp);opacity:0;animation:slot-ping 2.8s var(--ease-out) infinite}
.media-slot__kind{font:500 var(--fs-mono-sm)/1.5 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
.media-slot:hover .media-slot__icon{transform:scale(1.08);background:var(--bp);color:var(--white)}
.media-slot figcaption{align-items:baseline}
.page-head__media{padding-bottom:var(--s-16)}
.page-head__media .media-slot{--ratio:21/9}
.service__work--slot{border-style:dashed;box-shadow:none;background:transparent}
/* About: the studio in one run-in paragraph (the heading runs straight into the description), then what we're not */
.run-in{margin-top:var(--s-6);max-width:1080px}
.run-in>*{display:inline;margin:0;font:300 clamp(26px,3vw,40px)/1.24 var(--font-serif);letter-spacing:-.012em}
.run-in__title{color:var(--ink)}
.run-in__body{color:var(--ink-60)}
.run-in__body a{color:inherit;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.14em}
.run-in__body a:hover{color:var(--ink)}
.about-not{display:grid;gap:var(--s-5);margin-top:var(--s-16)}
/* About: the founder. A header row (compact portrait beside the name, role and opening statement), then, under a
   rule, the bio beside an "At a glance" card with the facts and the call to book. */
.founder{display:grid;gap:var(--s-8)}
.founder__head{display:grid;grid-template-columns:220px minmax(0,1fr);grid-template-areas:"photo name" "photo role" "photo lead";grid-template-rows:auto auto 1fr;column-gap:var(--s-10);row-gap:var(--s-3)}
.founder__photo{grid-area:photo;margin:0}
.founder__frame{background:#4a4a4a;line-height:0}
.founder__frame img{display:block;width:100%;height:auto}
.founder__name{grid-area:name;margin:0;line-height:1}
.founder__role{grid-area:role;font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-60)}
.founder__lead{grid-area:lead;margin-top:var(--s-4);font:300 clamp(22px,2.2vw,30px)/1.3 var(--font-serif);letter-spacing:-.01em;color:var(--ink);max-width:40ch;text-wrap:pretty}
.founder__body{display:grid;gap:var(--s-10);padding-top:var(--s-10);border-top:1px solid var(--line)}
.founder__body .body-copy{max-width:680px}
.founder__card{display:grid;gap:var(--s-5);align-content:start;padding:var(--s-8);background:var(--white);border:1px solid var(--line);border-radius:var(--r-md)}
.founder__facts{display:grid;margin:0}
.founder__facts>div{display:grid;gap:2px;padding:var(--s-3) 0;border-bottom:1px solid var(--line)}
.founder__facts>div:first-child{padding-top:0}
.founder__facts dt{font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
.founder__facts dd{margin:0;font-size:var(--fs-small);line-height:1.5;color:var(--ink)}
.founder__cta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4) var(--s-6)}
.press-portrait{margin:var(--s-8) 0 0;max-width:320px}
.press-portrait figcaption a{color:var(--bp);text-decoration:underline;text-underline-offset:3px}
@media (min-width:1024px){
  .founder__body{grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:var(--s-16);align-items:start}
}
@media (max-width:767px){
  .founder__head{grid-template-columns:96px minmax(0,1fr);grid-template-areas:"photo name" "photo role" "lead lead";grid-template-rows:auto 1fr auto;column-gap:var(--s-5)}
  .founder__name{align-self:end}
  .founder__lead{margin-top:var(--s-3)}
  .founder__card{padding:var(--s-6) var(--s-5)}
  .about-not{margin-top:var(--s-12)}
}
.fw+.media-slot{margin-top:var(--s-10)}
.work__slot .media-slot__frame{border:1px solid var(--line)}
.work__slot-note{margin-top:var(--s-2);max-width:40ch}
.service__work--slot .service__work-name{color:var(--ink-80)}
@keyframes slot-drift{to{background-position:23px 23px,23px 23px}}
@keyframes slot-ping{0%{transform:scale(1);opacity:.55}70%,100%{transform:scale(1.6);opacity:0}}
@media (max-width:640px){
  .page-head__media .media-slot__frame{aspect-ratio:4/3}
  .media-slot__icon{width:44px;height:44px}
}

/* ---------- 404 (built from pages/404.html by scripts/build-pages.py) ---------- */
.notfound{min-height:62vh;display:flex;align-items:center}
.notfound .t-display{max-width:16ch}
.notfound__routes{display:flex;flex-wrap:wrap;gap:var(--s-3) var(--s-8)}

/* ---------- Footer ---------- */
.footer .newsletter{margin-bottom:var(--s-16)}
.newsletter form.newsletter__form{display:grid;gap:var(--s-3)}
.newsletter .field label{color:var(--ink)}
.newsletter__row{display:flex;flex-wrap:wrap;gap:var(--s-2)}
.newsletter__row .input{flex:1;min-width:200px}
.newsletter .form__status{color:var(--ink-80)}
.newsletter .input--error{border-color:var(--danger)}
.newsletter .form__status a{color:var(--brand-500);text-decoration:underline;text-underline-offset:3px}
.field__error{color:var(--danger)}
.form__status:empty{display:none}
.check{display:flex;align-items:flex-start;gap:10px;font-size:var(--fs-small);line-height:1.4;color:var(--ink-80);cursor:pointer}
.check input{width:16px;height:16px;margin-top:2px;accent-color:var(--brand-500);flex-shrink:0}
.footer__grid{grid-template-columns:2fr repeat(5,1fr)}
.footer__h{font:600 13px var(--font-sans);margin-bottom:14px}
.footer__social{display:flex;gap:var(--s-2);margin-bottom:0;padding:0;list-style:none}
.footer .footer__social a{display:grid;place-items:center;width:36px;height:36px;margin:0;border:1px solid var(--line);border-radius:var(--r-sm);color:var(--ink-80);transition:color var(--dur-instant),border-color var(--dur-instant)}
.footer .footer__social a:hover{color:var(--brand-600);border-color:var(--ink-40)}
.mega__foot-inner a i svg{display:block}
.footer__legal a{display:inline;margin:0}
/* Links inside running text are underlined, not colour-only (WCAG 1.4.1) */
.footer__legal a,.palette__empty a,.form__status a,.notfound p a{text-decoration:underline;text-underline-offset:2px}

/* ---------- Command palette ---------- */
.palette{width:min(640px,calc(100vw - 32px));max-height:min(580px,calc(100dvh - 96px));margin:12vh auto auto;padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);box-shadow:var(--shadow-float),var(--shadow-md);color:var(--ink);overflow:hidden}
.palette::backdrop{background:rgba(255,255,255,.4);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.palette[open]{animation:reveal-up var(--dur-base) var(--ease-expo);--move-reveal:8px}
.palette__inner{display:flex;flex-direction:column;max-height:inherit}
.palette__top{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:var(--s-3) var(--s-3) 0}
/* Mode switch: the .segmented look, with tab semantics */
.palette__modes{display:inline-flex;gap:2px;padding:2px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:var(--fs-micro)}
.palette__modes button{padding:4px 10px;border-radius:var(--r-xs);transition:background-color var(--dur-instant)}
.palette__modes button[aria-selected="true"]{background:var(--brand-100);color:var(--brand-700);font-weight:500}
.palette__modes:not(.has-idea){border-color:transparent;padding:0}
.palette__modes:not(.has-idea) [data-mode="idea"]{display:none}
.palette__modes:not(.has-idea) > *{padding:0;background:none;color:var(--text-muted);font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;cursor:default}
.palette__close{height:24px;padding:0 6px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--mist);font:500 10px/1 var(--font-mono);color:var(--text-muted);transition:border-color var(--dur-instant)}
.palette__close:hover{border-color:var(--ink)}
.palette__pane{flex:1;min-height:0;overflow:auto;padding:var(--s-3)}
.search.palette__search{flex:none;width:100%}
.palette__search .input{width:100%;height:48px;font-size:var(--fs-body)}
.palette__search .input::-webkit-search-cancel-button{display:none}
.palette__results{display:grid;gap:2px;margin-top:var(--s-2)}
.palette__group{padding:var(--s-3) var(--s-3) 4px;font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--text-muted)}
.palette__opt a{display:flex;justify-content:space-between;align-items:center;gap:var(--s-3);padding:10px var(--s-3);border-radius:var(--r-sm);font:500 var(--fs-small)/1.4 var(--font-sans);transition:background-color var(--dur-instant)}
.palette__opt small{font:400 10px/1 var(--font-mono);letter-spacing:.04em;color:var(--text-muted);white-space:nowrap}
.palette__opt a[aria-selected="true"],.palette__opt a:hover{background:var(--brand-100)}
.palette__opt a[aria-selected="true"]{color:var(--brand-700)}
.palette__empty{padding:var(--s-6) var(--s-3)}
.palette__empty a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.palette__idea textarea.input{height:auto;padding:10px var(--s-3);resize:vertical}
.palette__actions{display:flex;justify-content:flex-end}
.palette__idea .form__status{padding:var(--s-3);border-radius:var(--r-sm);background:var(--sand);font-size:var(--fs-small)}
.palette__idea .form__status.is-error{background:var(--danger-bg);color:var(--danger)}
.palette__idea .form__status a{text-decoration:underline;text-underline-offset:3px}
.palette__idea .form__status>*+*{margin-top:var(--s-2)}
.palette__read-h{font-weight:600;color:var(--ink)}
.palette__qs{margin:0;padding-left:1.25em;display:grid;gap:var(--s-1);list-style:decimal}
.field__hint a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.palette__foot{display:flex;flex-wrap:wrap;gap:var(--s-2) var(--s-5);padding:10px var(--s-4);border-top:1px solid var(--line);background:var(--mist)}
.palette__foot kbd{display:inline-grid;place-items:center;min-width:18px;height:18px;padding:0 4px;margin-right:4px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--white);font:500 10px/1 var(--font-mono)}

/* ---------- Gated-section preview (?preview=gated) ---------- */
.is-preview [data-gated]{position:relative;outline:1px dashed var(--bp-hold);outline-offset:-12px}
.is-preview [data-gated]::before{content:"Preview · hidden until live";position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:2;padding:4px 8px;border-radius:var(--r-xs);background:var(--warning-bg);color:var(--warning);font:600 10px/1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase}

/* ---------- Responsive ---------- */
@media (max-width:1279px){
  .palette-trigger{width:auto}
  .palette-trigger__kbd{display:none}
}
@media (max-width:1023px){
  .demo__stage{padding:var(--s-6)}
  .demo__panel{grid-template-columns:minmax(0,1fr);align-content:start}
  .demo__q>.demo__result,.demo__q>.demo__final{margin-top:var(--s-2)}
  .demo__visual{align-self:start}
  .palette-trigger{width:40px;justify-content:center;padding:0}
  .palette-trigger__label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .palette-trigger__icon{width:16px;height:16px;color:var(--ink)}
  .footer__grid{grid-template-columns:repeat(3,1fr)}
  .footer__grid>:first-child{grid-column:1/-1}
  .empty.work__empty{grid-column:1/-1}
}
@media (max-width:767px){
  .brand__wordmark{width:107px;height:23px}
  .hero{padding:0 0 var(--s-16)}
  .demo{padding:16px 10px 10px}
  .demo__stage{padding:var(--s-4) var(--s-3)}
  .demo__tabs button{flex:0 0 auto}
  .demo__title{font-size:24px}
  .js .demo__tabs{overflow-x:auto;scrollbar-width:none;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}
  .demo__tabs::-webkit-scrollbar{display:none}
  .demo__tabs .tabs__ink{bottom:0}
  .demo__table--ladder th:nth-child(1),.demo__table--ladder th:nth-child(2){width:auto}
  .demo__table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .demo__table,.demo__table tbody{display:block}
  .demo__table tr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-3);padding:10px 0;border-bottom:1px solid var(--ink-05)}
  .demo__table td{display:block;padding:0;border:0}
  .demo__table td.demo__reason{grid-column:1/-1;font-size:var(--fs-micro)}
  .demo__design{grid-template-columns:minmax(0,1fr)}
  .demo__rollout li{font-size:9px;letter-spacing:.03em}
  .demo__fig{flex-direction:column;gap:4px}
  .section-row{margin-bottom:var(--s-8)}
  .footer__grid{grid-template-columns:repeat(2,1fr)}
  .newsletter .t-h1{font-size:34px}
  .palette{margin-top:8vh}
  .palette__modes button{padding:4px 6px}
  .palette__foot{display:none}
}


/* ==========================================================================
   Inquiry forms: a numbered sheet on the left; on the right a panel that
   tracks your answers, says what happens next, and offers a person to talk to
   ========================================================================== */
.intake{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,360px);gap:var(--s-8);align-items:start}
.intake__main{min-width:0}
.intake .form-done{max-width:none;background:var(--white)}
.form--sheet{max-width:none;gap:0;background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.intake__step{display:grid;gap:var(--s-5);padding:var(--s-8);border-bottom:1px dashed var(--line);box-shadow:inset 2px 0 0 transparent;transition:box-shadow var(--dur-fast) var(--ease-out)}
.intake__step.is-current{box-shadow:inset 2px 0 0 var(--brand-500)}
.intake__step--send{border-bottom:0;background:var(--mist)}
.intake__step-head{display:flex;align-items:center;gap:var(--s-3);font:500 17px/1.35 var(--font-sans);letter-spacing:-.01em;color:var(--ink)}
.intake__n{display:inline-grid;place-items:center;flex-shrink:0;width:30px;height:30px;border:1px solid var(--line);border-radius:50%;background:var(--white);font:500 var(--fs-mono-sm)/1 var(--font-mono);letter-spacing:.04em;color:var(--bp);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.intake__step.is-done .intake__n{background:var(--brand-500);border-color:var(--brand-500);color:var(--white)}
.intake__submit{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-6)}
.intake__promise{display:inline-flex;align-items:center;gap:10px;font-size:var(--fs-small);color:var(--ink-80)}
.form--sheet.is-ready .intake__step--send{box-shadow:inset 2px 0 0 var(--brand-500)}

/* Choices as chips: the native control stays visible, so the choice reads without :has() too */
.form .options--chips{gap:8px}
.options--chips .check{align-items:center;gap:8px;padding:8px 14px 8px 11px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);color:var(--ink);font-size:var(--fs-small);line-height:1.3;cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out),translate var(--dur-instant) var(--ease-out)}
.options--chips .check input{margin:0}
.options--chips .check:hover{border-color:var(--ink-40)}
.options--chips .check:active{translate:0 1px}
.options--chips .check:has(input:checked){border-color:var(--brand-500);background:var(--brand-100);color:var(--brand-700)}
.options--chips .check:has(input:focus-visible){outline:2px solid var(--brand-500);outline-offset:2px}
.options--chips .check:has(input[aria-invalid=true]){border-color:var(--danger)}

.intake__aside{position:sticky;top:calc(var(--header-h) + var(--s-6))}
.intake__card{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.intake__block{padding:var(--s-6);border-bottom:1px dashed var(--line)}
.intake__block:last-child{border-bottom:0}
.intake__block--talk{background:var(--mist)}
.intake__label{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s-3);font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
.intake__count{color:var(--ink-60);font-variant-numeric:tabular-nums}
.intake__bar{height:4px;margin-top:var(--s-3);border-radius:var(--r-pill);background:var(--ink-05);overflow:hidden}
.intake__bar>span{display:block;height:100%;width:100%;border-radius:inherit;background:var(--brand-500);transform-origin:left;transform:scaleX(var(--p,0));transition:transform var(--dur-base) var(--ease-expo)}
.intake__steps{display:grid;gap:2px;margin-top:var(--s-4)}
.intake__steps a{display:flex;align-items:center;gap:10px;margin-inline:-8px;padding:7px 8px;border-radius:var(--r-sm);font-size:var(--fs-small);color:var(--ink-80);transition:background-color var(--dur-instant) var(--ease-out),color var(--dur-instant) var(--ease-out)}
.intake__steps a::before{content:"";flex-shrink:0;width:10px;height:10px;border:1.5px solid var(--ink-40);border-radius:50%;transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),scale var(--dur-fast) var(--ease-spring)}
.intake__steps a:hover{background:var(--mist);color:var(--ink)}
.intake__steps .is-current a{color:var(--ink);font-weight:500}
.intake__steps .is-current a::before{border-color:var(--brand-500)}
.intake__steps .is-done a::before{border-color:var(--brand-500);background:var(--brand-500);scale:1.15}
html:not(.js) .intake__progress{display:none}
.intake__next{display:grid;gap:var(--s-4);margin-top:var(--s-4);counter-reset:next}
.intake__next li{display:grid;grid-template-columns:26px minmax(0,1fr);column-gap:var(--s-2)}
.intake__next li::before{counter-increment:next;content:counter(next,decimal-leading-zero);grid-row:span 2;font:500 var(--fs-mono-sm)/1.9 var(--font-mono);color:var(--bp)}
.intake__next b{font-weight:500;font-size:var(--fs-small);line-height:1.5;color:var(--ink)}
.intake__next p{font-size:var(--fs-small);line-height:1.55;color:var(--ink-80)}
.intake__talk-title{font-weight:500;font-size:var(--fs-small);color:var(--ink)}
.intake__talk{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3) var(--s-4);margin-top:var(--s-3)}
.intake__mail{font-size:var(--fs-small);color:var(--ink-80);text-decoration:underline;text-decoration-color:var(--ink-40);text-underline-offset:3px}
.intake__mail:hover{color:var(--ink);text-decoration-color:currentColor}

/* ==========================================================================
   What this is not: each line crossed out, with what you get instead beside it
   ========================================================================== */
.contrast{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.contrast__head,.contrast__list>li{display:grid;grid-template-columns:minmax(0,1fr) 72px minmax(0,1fr);align-items:center;padding-inline:var(--s-8)}
.contrast__head{padding-block:var(--s-4);border-bottom:1px solid var(--line);background:var(--mist);font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-60)}
.contrast__head span:last-child{grid-column:3;color:var(--bp)}
.contrast__list>li{padding-block:var(--s-6);border-bottom:1px dashed var(--line);transition:background-color var(--dur-fast) var(--ease-out)}
.contrast__list>li:last-child{border-bottom:0}
.contrast__list>li:hover{background:color-mix(in srgb,var(--mist) 60%,transparent)}
.contrast__not,.contrast__yes{position:relative;padding-left:22px;font:400 17px/1.5 var(--font-sans);letter-spacing:-.005em;text-wrap:pretty}
.contrast__not{color:var(--ink-60)}
.contrast__yes{color:var(--ink)}
.contrast__not::before,.contrast__yes::before{content:"";position:absolute;left:0;top:.5em;width:10px;height:10px;border-radius:50%}
.contrast__not::before{border:1.5px solid var(--ink-40)}
.contrast__yes::before{background:var(--brand-500)}
.contrast__x{background:linear-gradient(currentColor,currentColor) no-repeat 0 60%/100% 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.contrast__arrow{justify-self:center;font-size:20px;line-height:1;color:var(--bp)}
.contrast__foot{padding:var(--s-5) var(--s-8);border-top:1px solid var(--line);background:var(--mist);font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
@media (prefers-reduced-motion:no-preference){
  html.js .contrast__list>li[data-reveal]:not(.is-in) .contrast__x{background-size:0 1px}
  .contrast__list>li[data-reveal].is-in .contrast__x{animation:strike-in 700ms var(--ease-expo) backwards;animation-delay:calc(min(var(--i,0),6) * 70ms + 320ms)}
  .contrast__list>li[data-reveal].is-in .contrast__arrow{animation:arrow-in 600ms var(--ease-expo) backwards;animation-delay:calc(min(var(--i,0),6) * 70ms + 480ms)}
  .contrast__list>li:hover .contrast__arrow{translate:4px 0;transition:translate var(--dur-fast) var(--ease-out)}
}
@keyframes strike-in{from{background-size:0 1px}to{background-size:100% 1px}}
@keyframes arrow-in{from{opacity:0;translate:-8px 0}to{opacity:1;translate:0 0}}

@media (max-width:1023px){
  .intake{grid-template-columns:minmax(0,1fr)}
  .intake__aside{position:static}
  .intake__progress{display:none}
}
@media (max-width:767px){
  .intake__step{padding:var(--s-6) var(--s-5)}
  .intake__block{padding:var(--s-5)}
  .contrast__head{display:none}
  .contrast__list>li{grid-template-columns:minmax(0,1fr);row-gap:var(--s-2);padding:var(--s-5)}
  .contrast__not,.contrast__yes{font-size:16px}
  .contrast__arrow{justify-self:start;margin-left:0;font-size:16px;rotate:90deg}
  .contrast__foot{padding-inline:var(--s-5)}
}

/* ==========================================================================
   Legal pages (privacy, terms): a readable document beside the sticky contents list
   ========================================================================== */
.legal__meta{margin-top:var(--s-4);font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--ink-60)}
.legal{display:grid;gap:var(--s-12);max-width:760px}
.legal__part{display:grid;gap:var(--s-4);scroll-margin-top:calc(var(--header-h) + 24px)}
.legal p,.legal li,.legal dd{font-size:var(--fs-body);line-height:1.7;color:var(--ink-80)}
.legal strong{font-weight:500;color:var(--ink)}
.legal code{font:500 .86em/1 var(--font-mono);color:var(--ink)}
.legal a:not([class]){color:var(--brand-500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.legal a:not([class]):hover{text-decoration-color:transparent}
.legal ul:not([class]){display:grid;gap:var(--s-2)}
.legal ul:not([class])>li{position:relative;padding-left:22px}
.legal ul:not([class])>li::before{content:"";position:absolute;left:2px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--brand-500)}
.legal__summary{padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--mist)}
.legal__rows{border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);overflow:hidden}
.legal__rows>li{display:grid;grid-template-columns:minmax(0,200px) minmax(0,1fr);gap:var(--s-2) var(--s-6);padding:var(--s-5) var(--s-6);border-bottom:1px dashed var(--line)}
.legal__rows>li:last-child{border-bottom:0}
.legal__rows h3{font:500 var(--fs-small)/1.5 var(--font-sans);color:var(--ink)}
.legal__rows dl{display:grid;grid-template-columns:48px minmax(0,1fr);gap:var(--s-2) var(--s-3)}
.legal__rows dt{font:500 var(--fs-mono-sm)/2.1 var(--font-mono);letter-spacing:var(--tracking-mono);text-transform:uppercase;color:var(--bp)}
.legal__rows dd{margin:0;font-size:var(--fs-small);line-height:1.65}
@media (max-width:767px){
  .legal{gap:var(--s-10)}
  .legal__summary{padding:var(--s-6) var(--s-5)}
  .legal__rows>li{grid-template-columns:minmax(0,1fr);padding:var(--s-5)}
}
.footer__policies{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2) var(--s-5)}
.consent__text a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.newsletter .form__privacy{font-size:var(--fs-micro)}
.newsletter .form__privacy a{color:var(--brand-500);text-decoration:underline;text-underline-offset:3px}
.footer__policies>a,.footer__policies>.footer__consent{color:var(--ink-80)}

/* Newsletter, light: the blueprint paper card, ink text, the standard input and the primary button */
.newsletter--light{border:1px solid var(--line);color:var(--ink)}
.newsletter--light .newsletter__lead{font-size:var(--fs-small);line-height:1.65;color:var(--ink-80)}
.newsletter--light .input{background:var(--white);border-color:var(--line);color:var(--ink)}
.newsletter--light .input::placeholder{color:var(--ink-40)}
.newsletter--light .input:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-100)}
.newsletter--light .newsletter__done{color:var(--ink)}
.newsletter--light .newsletter__done svg path{stroke:var(--brand-500)}
.newsletter.is-done form.newsletter__form{display:none}

/* Journal (IA section 10A): the design system's editorial article, with the site's own pieces around it */
.container.article{padding:var(--s-10) var(--gutter) var(--s-16)}
.article__body{min-width:0}
.article-head__row .post-meta{margin:0}
.author{color:var(--ink)}
img.author__avatar{object-fit:cover;background:#4a4a4a}
.author>span>b{font:500 var(--fs-small)/1.3 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink)}
a.author:hover b{text-decoration:underline;text-underline-offset:3px}
.takeaway--top{margin-bottom:var(--s-8)}
.takeaway>p.t-index{font-size:var(--fs-mono-sm);color:var(--bp)}
.takeaway ul{display:grid;gap:10px;margin-top:4px}
.takeaway ul li{font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
.prose .takeaway{margin-block:1.8em}
.prose .table-wrap{margin-block:1.6em}
.prose table caption{caption-side:top}
.prose th[scope="row"]{font:500 15px/1.5 var(--font-sans);letter-spacing:0;text-transform:none;color:var(--ink);border-bottom:1px solid var(--line);vertical-align:top}
.prose td{vertical-align:top}
.prose .pull p{text-wrap:balance}
.faq-list{display:grid;gap:0;margin-top:1.2em;border-top:1px solid var(--line)}
.faq-list h3{margin-top:0;padding-top:var(--s-6)}
.faq-list p{padding-bottom:var(--s-6);border-bottom:1px solid var(--line)}
.fits{display:flex;justify-content:space-between;align-items:center;gap:var(--s-6);flex-wrap:wrap;margin-top:var(--s-12);padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.fits>div:first-child{flex:1 1 340px}
.fits .t-h3{margin-top:6px;max-width:none;font-size:clamp(22px,2vw,28px);text-wrap:balance}
ul.tags{list-style:none;padding:0}
.rail-note{display:grid;gap:8px;margin-top:var(--s-8);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.rail-note .t-small{color:var(--ink-80)}
.post-card{color:var(--ink)}
.post-card .post-meta{margin:0}
/* The model gets a fixed box under the card's label and fits inside it by width and height (tall models such as
   Brand OS Layers used to overflow the card when only the width was set) */
.post-card .cover svg{position:absolute;left:10%;top:17%;width:80%;height:74%}
.post-card__tags{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0}
@media (max-width:767px){
  .container.article{padding-block:var(--s-6) var(--s-12)}
  .fits{padding:var(--s-6) var(--s-5)}
}
/* Framework Library: the catalogue. The Foundation Matrix leads across the full row (it applies at every stage),
   then six cards, three to a row; the discipline filter needs scripts, so without them the bar stays out of the way. */
.fw-filters{margin-bottom:var(--s-10)}
html:not(.js) .fw-filters{display:none}
.fw-card .post-meta{display:flex;flex-wrap:wrap;gap:6px}
.fw-card__body{display:grid;gap:var(--s-3);align-content:start}
.fw-card__desc{font-size:var(--fs-small);line-height:1.6;color:var(--ink-80);max-width:52ch}
@media (min-width:768px){
  .fw-card--lead{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:var(--s-10);align-items:center}
  .fw-card--lead .post-card__title{font-size:clamp(28px,2.6vw,36px)}
  .fw-card--lead .post-card__excerpt{font-size:var(--fs-body)}
}
/* Journal: the Stuck-to-Scale series. Each stage's Build log ends with all six, in stage order, the current one marked */
.series{display:grid;gap:var(--s-4);margin-top:var(--s-12);padding:var(--s-6);border:1px solid var(--bp-line);border-radius:var(--r-md);background:var(--bp-paper)}
.series__list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-2);list-style:none;margin:0;padding:0}
.series__list a{display:grid;gap:2px;height:100%;padding:var(--s-3) var(--s-4);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out)}
.series__list a:hover{border-color:var(--bp)}
.series__list a[aria-current="page"]{border-color:var(--bp);box-shadow:inset 0 0 0 1px var(--bp)}
.series__n{font:500 var(--fs-mono-sm)/1.4 var(--font-mono);letter-spacing:var(--tracking-mono);color:var(--bp)}
.series__stage{font:400 20px/1.2 var(--font-serif);letter-spacing:-.01em}
.series__q{font-size:13px;line-height:1.45;color:var(--ink-80)}
@media (max-width:767px){.series{padding:var(--s-5)}.series__list{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Journal hub: filters work only with scripts on, so without them the bar stays out of the way */
.journal-filters{margin-bottom:var(--s-10)}
html:not(.js) .journal-filters{display:none}
.journal-grid .post-card__tags{margin-top:auto}
html:not(.js) .loadmore,.loadmore:has([data-loadmore][hidden]){display:none}
.points__then{display:block;margin-top:var(--s-2);font-size:var(--fs-small);color:var(--text-muted)}
@media (min-width:1024px){.points--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.points p a:not([class]){color:var(--brand-500);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.points p a:not([class]):hover{text-decoration-color:transparent}
/* Service pages: the matching Journal article beside "Next in the sequence" */
.next-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.next-pair .next-card{align-items:flex-start;flex-direction:column;justify-content:space-between}
.cap-work{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-6);align-items:start}
.cap-work>.media-slot{margin:0}
@media (max-width:1023px){.cap-work{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:767px){.cap-work{grid-template-columns:minmax(0,1fr)}}
.guide-tpl{margin:0 0 var(--s-6);color:var(--ink-80)}
.guide-tpl a{color:var(--brand-500);text-decoration:underline;text-underline-offset:3px}
.next-pair__lab{grid-column:1/-1;margin:var(--s-2) 0 0;color:var(--ink-80)}
.next-pair__lab a{color:var(--brand-500);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){.next-pair{grid-template-columns:minmax(0,1fr)}}
/* Journal article cover: the article's model on the blueprint grid, beside the title on wide screens and under the lead (and as wide) below 1024px */
.article-head__intro{display:grid;gap:var(--s-8);margin-top:var(--s-8)}
.journal-cover{margin:0;max-width:640px}
.journal-cover img{display:block;width:100%;height:auto;background:var(--bp-paper)}
@media (min-width:1024px){
  .article-head__intro{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:var(--s-12);align-items:start} /* top-aligned: centring moved the title when the fonts swapped in */
  .journal-cover{max-width:none}
}

/* A guide's checklist: numbered decisions, each with an empty box to tick on your own product */
.prose ol.checklist{list-style:none;padding-left:0;counter-reset:check}
.prose ol.checklist>li{position:relative;padding-left:34px;counter-increment:check}
.prose ol.checklist>li::before{content:"";position:absolute;left:0;top:.2em;width:16px;height:16px;border:1.5px solid var(--bp);border-radius:3px;background:var(--white)}

/* ---------- Lab ---------- */
/* The hub's tool: the method's model on the left, what you do on the right, one link */
.lab-tool{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--s-10);align-items:center;padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.lab-tool:hover{border-color:var(--bp-line);box-shadow:var(--shadow-md)}
.lab-tool__art{position:relative;aspect-ratio:4/3;border-radius:var(--r-sm)}
.lab-tool__art svg{position:absolute;left:10%;top:17%;width:80%;height:74%}
.lab-tool__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3)}
.lab-tools{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin:0;padding:0;list-style:none}
.lab-tool--card{grid-template-columns:minmax(0,1fr);gap:var(--s-6);align-items:start;height:100%;padding:var(--s-6)}
.lab-tool--card .lab-tool__art{aspect-ratio:2/1}
.lab-tool--card .lab-tool__body{height:100%}
.lab-tool--card .lab-tool__body p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.lab-tool--card .btn{margin-top:auto}
@media (max-width:767px){ .lab-tools{grid-template-columns:minmax(0,1fr)} }
.lab-tool__body .t-h2{margin:0}
.lab-tool__body .btn{margin-top:var(--s-3)}
/* Home S7 with only Cut It live: its card takes the full row */

/* Cut It: the brief, the six features beside a budget panel that stays in view, then our call */
.cutit__brief{position:relative;display:grid;gap:var(--s-3);max-width:820px;margin-bottom:var(--s-10);padding:var(--s-8);border-radius:var(--r-md)}
.cutit__brief .t-h2{margin:var(--s-2) 0 0}
.cutit{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-8);align-items:start}
.cutit__list{display:grid;gap:var(--s-4)}
.cutit__feature{margin:0;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);transition:border-color var(--dur-fast) var(--ease-out)}
.cutit__feature:has(input:checked){border-color:var(--bp-line)}
.cutit__feature.is-missing{border-color:var(--bp-stop)}
.cutit__feature legend{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;padding:0;float:left;width:100%}
.cutit__name{font:300 24px/1.2 var(--font-serif);letter-spacing:var(--tracking-heading)}
.cutit__cost{font:500 var(--fs-mono-xs)/1 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp)}
.cutit__desc{clear:both;margin:var(--s-2) 0 var(--s-4);font-size:var(--fs-small);color:var(--ink-80)}
.cutit .options{display:flex;flex-wrap:wrap;gap:8px}
.cutit__panel{position:sticky;top:calc(var(--header-h) + var(--s-6));display:grid;gap:var(--s-3);padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--sand)}
.cutit__spent{margin:0;font:300 28px/1.2 var(--font-serif)}
.cutit__spent span{font-variant-numeric:tabular-nums}
.cutit__bar{margin:0}
.cutit.is-over .cutit__bar .progress__bar{background:var(--bp-stop)}
.cutit__status{margin:0;min-height:3em;font-size:var(--fs-small);color:var(--ink-80)}
.cutit.is-over .cutit__status,.cutit__status.is-error{color:var(--bp-stop)}
.cutit__calls{display:grid;gap:var(--s-4);margin:0 0 var(--s-8);padding:0;list-style:none}
.cutit__call{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-6);align-items:start;padding:var(--s-6);border-radius:var(--r-md);background:var(--white)}
.cutit__call h3{margin:0 0 var(--s-2);font:300 22px/1.25 var(--font-serif)}
.cutit__call p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.cutit__tray{justify-self:start;padding:4px 10px;border-radius:var(--r-pill);font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--bp-line);color:var(--bp);background:var(--white)}
.cutit__tray--build{background:var(--bp);border-color:var(--bp);color:var(--white)}
.cutit__tray--cut{color:var(--ink-80);border-color:var(--line)}
.cutit__yours{margin-top:var(--s-3)!important;font-weight:500}
.cutit__yours.is-match{color:var(--ink)!important}
.cutit__yours.is-match::before{content:"✓ ";color:var(--bp-signal)}
.cutit__insight{margin-bottom:var(--s-8)}
.cutit__more{margin-top:var(--s-6)}
@media (max-width:1023px){
  .lab-tool{grid-template-columns:minmax(0,1fr);gap:var(--s-6)}
  .cutit{grid-template-columns:minmax(0,1fr)}
  /* Phones: the budget rides along the bottom of the screen while you sort */
  .cutit__panel{position:sticky;top:auto;bottom:calc(var(--s-3) + env(safe-area-inset-bottom,0px));box-shadow:var(--shadow-md)}
  .cutit__panel{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-4)}
  .cutit__panel>.t-index{display:none}
  .cutit__spent{font-size:20px}
  .cutit__bar,.cutit__status{grid-column:1/-1}
  .cutit__status{min-height:0;font-size:13px}
  .cutit__panel .btn{grid-row:1;grid-column:2}
  .cutit__call{grid-template-columns:minmax(0,1fr);gap:var(--s-3)}
}

/* ==========================================================================
   Lab tools: Launch Check, Client Request Triage, Asset Mapper (questions, a side panel that keeps count,
   a result that waits for the answers) and Spot the Stall puzzles
   ========================================================================== */
.lt-nojs{max-width:760px;padding:var(--s-5) var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);font-size:var(--fs-small)}
html.js .lt-nojs{display:none}
.lt-nojs a,.lt__more a,.pz-card__believe a{color:var(--brand-500);text-decoration:underline;text-underline-offset:3px}
.lt{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s-8);align-items:start}
.lt__steps{display:grid;gap:var(--s-4);min-width:0}
.lt__bar{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-3)}
.lt__q{margin:0;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);transition:border-color var(--dur-fast) var(--ease-out)}
.lt__q:focus-within{border-color:var(--bp-line)}
.lt__q.is-missing{border-color:var(--bp-stop)}
.lt__q>label,.lt__q>legend{display:block;float:left;width:100%;padding:0;font:300 22px/1.3 var(--font-serif);letter-spacing:var(--tracking-heading);color:var(--ink)}
.lt__q>legend+*{clear:both}
.lt__rung{display:block;margin-bottom:6px;font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp)}
.lt__q .field__hint{display:block;clear:both;margin:var(--s-2) 0 var(--s-4);font-size:var(--fs-small);color:var(--ink-60)}
.lt__q .input{width:100%}
.lt__q textarea.input{height:auto;min-height:0;padding:10px 12px;line-height:1.5;resize:vertical}
.lt__q .options{display:flex;flex-wrap:wrap;gap:8px}
.lt__q>legend~.options{margin-top:var(--s-4)}
.lt__q>.field__hint+.options{margin-top:0}
.lt__panel{position:sticky;top:calc(var(--header-h) + var(--s-6));display:grid;gap:var(--s-3);padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--sand)}
.lt__count{margin:0;font:300 28px/1.2 var(--font-serif)}
.lt__count span{font-variant-numeric:tabular-nums}
.lt__progress{margin:0}
.lt__status{margin:0;min-height:3em;font-size:var(--fs-small);color:var(--ink-80)}
.lt__status.is-error{color:var(--bp-stop)}
.lt__more{margin-top:var(--s-6)}
.lt-ladder{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.lt-ladder li{display:grid;grid-template-columns:14px minmax(0,1fr) auto;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white);font-size:var(--fs-small);transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.lt-ladder__mark{width:10px;height:10px;border-radius:50%;border:1.5px solid var(--ink-40);transition:background-color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.lt-ladder__name{font-weight:500;color:var(--ink)}
.lt-ladder__state{font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.lt-ladder li[data-status=weak] .lt-ladder__mark{border-color:var(--bp-hold);background:var(--bp-hold)}
.lt-ladder li[data-status=weak] .lt-ladder__state{color:var(--ink-80)}
.lt-ladder li[data-status=holds]{border-color:var(--bp-line);background:var(--brand-100)}
.lt-ladder li[data-status=holds] .lt-ladder__mark{border-color:var(--bp);background:var(--bp)}
.lt-ladder li[data-status=holds] .lt-ladder__state{color:var(--bp)}
.lt-findings{display:grid;gap:var(--s-3);margin:0 0 var(--s-8);padding:0;list-style:none}
.lt-finding{display:grid;grid-template-columns:120px minmax(0,1fr);gap:var(--s-6);align-items:start;padding:var(--s-5) var(--s-6);border:1px solid transparent;border-radius:var(--r-md);background:var(--white)}
.lt-finding.is-stop{border-color:var(--bp-stop)}
.lt-finding h3{margin:0 0 4px;font:300 22px/1.25 var(--font-serif)}
.lt-finding p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.lt-finding__tag{justify-self:start;padding:4px 10px;border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-80)}
.lt-finding[data-status=holds] .lt-finding__tag{border-color:var(--bp);background:var(--bp);color:var(--white)}
.lt-finding.is-stop .lt-finding__tag{border-color:var(--bp-stop);color:var(--bp-stop)}
.lt-order{display:grid;gap:var(--s-4);margin-bottom:var(--s-8);padding:var(--s-8);border-radius:var(--r-md);background:var(--white)}
.lt-order>.t-index{color:var(--bp)}
.lt-order ol{display:grid;gap:0;margin:0;padding:0;list-style:none;counter-reset:ord}
.lt-order li{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--s-6);padding:var(--s-4) 0;border-top:1px solid var(--line);counter-increment:ord}
.lt-order li:first-child{border-top:0}
.lt-order__step{font:500 var(--fs-mono-sm)/1.6 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-60)}
.lt-order__step::before{content:counter(ord,decimal-leading-zero) " · ";color:var(--bp)}
.lt-order li p{margin:0;font:300 22px/1.35 var(--font-serif);color:var(--ink);overflow-wrap:anywhere}
.lt-order li:first-child p{font-size:28px}
.lt-verdict{max-width:860px;margin-bottom:var(--s-8)}
.lt-verdict .t-h1{margin:var(--s-3) 0 var(--s-4)}
.lt-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin-bottom:var(--s-8);align-items:start}
.lt-cols>.takeaway{margin:0}

/* Asset Mapper result */
.am-held{display:grid;gap:var(--s-3);margin-bottom:var(--s-6)}
.am-held>.t-index{color:var(--bp)}
.am-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.am-chips li{padding:6px 12px;border:1px solid var(--bp-line);border-radius:var(--r-pill);background:var(--white);font-size:var(--fs-small);color:var(--ink)}
.am-chips li.is-struck{border-style:dashed;border-color:var(--line);color:var(--ink-60)}
.am-chips li.is-struck span{font-size:13px}
.am-notes{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.am-notes li{position:relative;padding-left:18px;font-size:var(--fs-small);color:var(--ink-80)}
.am-notes li::before{content:"";position:absolute;left:0;top:.55em;width:8px;height:8px;border-radius:50%;background:var(--bp-hold)}
.am-dirs{display:grid;gap:var(--s-4);margin:0 0 var(--s-8);padding:0;list-style:none}
.am-dir{display:grid;grid-template-columns:56px minmax(0,1fr);gap:var(--s-4);padding:var(--s-6);border-radius:var(--r-md);background:var(--white)}
.am-dir__n{font:300 36px/1 var(--font-serif);color:var(--bp)}
.am-dir__uses{margin:0 0 var(--s-4);font:500 var(--fs-mono-xs)/1.5 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
.am-dir dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5) var(--s-6);margin:0}
.am-dir dt{margin-bottom:4px;font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp)}
.am-dir dd{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ink)}
.am-dir dl>div:nth-child(2) dd{font:300 20px/1.35 var(--font-serif)}
.am-dir__warn{margin:var(--s-4) 0 0;padding-top:var(--s-3);border-top:1px dashed var(--line);font-size:13px;color:var(--ink-80)}

/* Spot the Stall */
.pz-dash{position:relative;display:grid;gap:var(--s-6);margin-bottom:var(--s-10);padding:var(--s-8);border-radius:var(--r-md)}
.pz-dash__head{display:grid;gap:var(--s-3);max-width:760px}
.pz-dash__head .t-h2{margin:var(--s-2) 0 0}
.pz-believe{display:grid;gap:4px;margin:var(--s-2) 0 0;font:300 22px/1.35 var(--font-serif);color:var(--ink)}
.pz-believe .t-index{font-family:var(--font-mono);color:var(--bp)}
.pz-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
.pz-stat{display:flex;flex-direction:column;gap:var(--s-2);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-sm);background:var(--white)}
.pz-stat__label{margin:0;min-height:2.8em;font-size:13px;line-height:1.4;color:var(--ink-80)}
.pz-stat__value{margin:0;font:300 30px/1.1 var(--font-serif);font-variant-numeric:tabular-nums;color:var(--ink)}
.pz-stat__from{font:400 13px/1 var(--font-sans);color:var(--ink-60)}
.pz-chart{display:block;width:100%;height:auto;margin-top:auto;overflow:visible}
.pz-chart text{font:500 8px var(--font-mono);fill:var(--ink-80);font-variant-numeric:tabular-nums}
.pz-chart .pz-axis{fill:var(--ink-60)}
.pz-bar{fill:var(--bp-line)}
.pz-bar--on{fill:var(--bp)}
.pz-notes{display:grid;gap:var(--s-3)}
.pz-notes>.t-index{color:var(--bp)}
.pz-notes ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:0;padding:0;list-style:none}
.pz-notes li{padding:var(--s-4) var(--s-5);border-left:2px solid var(--bp);background:var(--white);font-size:var(--fs-small);line-height:1.55;color:var(--ink)}
.pz-form fieldset{margin:0;padding:0;border:0}
.pz-form legend{float:left;width:100%;padding:0;margin-bottom:var(--s-2)}
.pz-form legend+p{clear:both;margin:0 0 var(--s-5)}
.pz-stages{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3)}
.pz-stage{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s-3);padding:var(--s-5);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);cursor:pointer;transition:border-color var(--dur-fast) var(--ease-out),background-color var(--dur-fast) var(--ease-out)}
.pz-stage:hover{border-color:var(--ink-40)}
.pz-stage input{position:absolute;opacity:0;pointer-events:none}
.pz-stage:has(input:focus-visible){outline:2px solid var(--brand-500);outline-offset:2px}
.pz-stage:has(input:checked){border-color:var(--brand-500);background:var(--brand-100)}
.pz-stage.is-answer{border-color:var(--bp);box-shadow:inset 0 0 0 1px var(--bp)}
.pz-stage.is-wrong{border-color:var(--bp-stop)}
.pz-stage__n{grid-row:span 2;font:300 28px/1 var(--font-serif);color:var(--bp)}
.pz-stage__name{font-weight:600;color:var(--ink)}
.pz-stage__q{font-size:13px;line-height:1.45;color:var(--ink-80)}
.pz-form__foot{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4);margin-top:var(--s-5)}
.pz-form__foot .lt__status{min-height:0}
.pz-you{margin:0;padding:8px 14px;justify-self:start;border:1px solid var(--bp-stop);border-radius:var(--r-pill);background:var(--white);font-size:var(--fs-small);font-weight:500;color:var(--ink)}
.pz-you.is-match{border-color:var(--bp)}
.pz-you.is-match::before{content:"✓ ";color:var(--bp-signal)}
.pz-why{padding:var(--s-6);border-radius:var(--r-md);background:var(--white)}
.pz-why>.t-index{color:var(--bp)}
.pz-why p:last-child{margin:var(--s-2) 0 0;font-size:var(--fs-small);line-height:1.65;color:var(--ink-80)}
#our-read .fw-nav{margin-top:var(--s-8)}
.pz-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4);margin:0;padding:0;list-style:none}
.pz-card{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s-3);height:100%;padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.pz-card:hover{border-color:var(--bp-line);box-shadow:var(--shadow-md)}
.pz-card p{margin:0;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.pz-card .pz-card__believe{font-style:italic}
.pz-card .arrow-link{margin-top:auto}
.pz-fiction{margin-top:var(--s-5)}
.pz-stagelist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-3);margin:0 0 var(--s-8);padding:0;list-style:none}
.pz-stagelist li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px var(--s-3);padding:var(--s-5);border-radius:var(--r-md);background:var(--white)}
.pz-stagelist h3{margin:0;font:600 16px/1.4 var(--font-sans);color:var(--ink)}
.pz-stagelist p{grid-column:2;margin:0;font-size:13px;line-height:1.45;color:var(--ink-80)}

@media (max-width:1023px){
  .lt{grid-template-columns:minmax(0,1fr)}
  /* Phones and tablets: the count rides along the bottom of the screen while you answer */
  .lt__panel{position:sticky;top:auto;bottom:calc(var(--s-3) + env(safe-area-inset-bottom,0px));z-index:2;box-shadow:var(--shadow-md);grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s-2) var(--s-4);padding:var(--s-4)}
  .lt__panel>.t-index{display:none}
  .lt__count{font-size:20px}
  .lt__progress,.lt__status{grid-column:1/-1}
  .lt__status{min-height:0;font-size:13px}
  .lt__panel .btn{grid-row:1;grid-column:2}
  .lt-ladder{grid-column:1/-1;grid-template-columns:repeat(4,minmax(0,1fr))}
  .lt-ladder li{grid-template-columns:minmax(0,1fr);justify-items:center;gap:4px;padding:6px 4px;text-align:center}
  .lt-ladder__name{font-size:12px;line-height:1.2}
  .lt-ladder__state{display:none}
  .lt-ladder{direction:rtl}.lt-ladder li{direction:ltr}
  .pz-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pz-notes ul,.pz-stages,.pz-stagelist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:767px){
  .lt__q{padding:var(--s-5)}
  .lt-finding{grid-template-columns:minmax(0,1fr);gap:var(--s-3);padding:var(--s-5)}
  .lt-order{padding:var(--s-6)}
  .lt-order li{grid-template-columns:minmax(0,1fr);gap:4px}
  .lt-order li p,.lt-order li:first-child p{font-size:20px}
  .lt-cols,.am-dir dl,.pz-cards,.pz-notes ul,.pz-stages,.pz-stagelist{grid-template-columns:minmax(0,1fr)}
  .am-dir{grid-template-columns:minmax(0,1fr);gap:var(--s-2);padding:var(--s-5)}
  .pz-dash{padding:var(--s-5)}
  .pz-stat{padding:var(--s-4)}
  .pz-stat__value{font-size:24px}
  .pz-card{padding:var(--s-6)}
}

/* ==========================================================================
   Newsletter: the archive list, an issue's web version, and the confirm and unsubscribe pages
   ========================================================================== */
#subscribe .newsletter{margin:0}
.issues{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.issue-row{display:grid;grid-template-columns:120px minmax(0,1fr) auto;gap:var(--s-6);align-items:baseline;padding:var(--s-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white);color:inherit;text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),translate var(--dur-fast) var(--ease-out),box-shadow var(--dur-fast) var(--ease-out)}
.issue-row:hover{border-color:var(--ink-40);translate:0 -2px;box-shadow:var(--shadow-float)}
.issue-row__no,.issue-row__date{font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--bp)}
.issue-row__date{color:var(--ink-60)}
.issue-row__body{display:grid;gap:var(--s-2)}
.issue-row__body .t-h3{margin:0}
.issue-row__sum{font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.issue{max-width:680px}
.issue h2{font-size:28px}
.issue__next{max-width:680px;margin-top:var(--s-12)}
.nl-token{position:relative;display:grid;gap:var(--s-4);max-width:680px;padding:var(--s-8);border-radius:var(--r-md)}
.nl-token form{display:grid;justify-items:start;gap:var(--s-3)}
.nl-token .form__status:empty{display:none}
.nl-token__done{display:grid;gap:var(--s-2)}
.nl-token__done:focus{outline:none}
.nl-token__done .t-h3{margin:0}
.nl-token__done a{color:var(--brand-500);text-decoration:underline;text-underline-offset:3px}
@media (max-width:767px){
  .issue-row{grid-template-columns:minmax(0,1fr);gap:var(--s-2)}
}

/* Reachable Market Sizing: the calculator */
.sizer{position:relative;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:var(--s-8);padding:var(--s-8);border-radius:var(--r-md)}
.sizer__inputs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-5)}
.sizer__out{display:grid;align-content:center;gap:var(--s-3);padding:var(--s-6);border:1px solid var(--bp-line);border-radius:var(--r-md);background:var(--white)}
.sizer__out>*{margin:0}
.sizer__num{font:300 clamp(32px,4vw,48px)/1.1 var(--font-serif);color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.sizer__formula{font:500 var(--fs-mono-sm)/1.6 var(--font-mono);color:var(--bp);overflow-wrap:anywhere}
.sizer__share{font-size:var(--fs-small);color:var(--ink-80)}
@media (max-width:1023px){ .sizer{grid-template-columns:minmax(0,1fr)} }
@media (max-width:599px){ .sizer__inputs{grid-template-columns:minmax(0,1fr)} .sizer{padding:var(--s-5)} }

/* Templates: the crawlable preview of each Word file, set like a document on the blueprint grid */
.tpl{position:relative;padding:var(--s-8);border-radius:var(--r-md)}
.tpl__doc{max-width:820px;margin-inline:auto;padding:var(--s-10) var(--s-8);background:var(--white);border:1px solid var(--line);border-radius:var(--r-sm);box-shadow:var(--shadow-md)}
.tpl__doc>*+*{margin-top:var(--s-4)}
.tpl__doc h3{margin-top:var(--s-8);font:400 22px/1.25 var(--font-serif);color:var(--ink)}
.tpl__doc p{font-size:var(--fs-small);line-height:1.65;color:var(--ink-80)}
.tpl__intro{font-size:var(--fs-body)!important}
.tpl__fields{display:grid;gap:0;margin:0;border:1px solid var(--line);border-radius:var(--r-sm)}
.tpl__fields>div{display:grid;grid-template-columns:minmax(0,2fr) minmax(0,3fr);border-top:1px solid var(--line)}
.tpl__fields>div:first-child{border-top:0}
.tpl__fields dt{padding:var(--s-3) var(--s-4);background:var(--sand);font-size:var(--fs-small);font-weight:600;color:var(--ink)}
.tpl__fields dd{margin:0;min-height:2.6em;border-left:1px dashed var(--bp-line)}
.tpl__table{width:100%;border-collapse:collapse;font-size:var(--fs-small)}
.tpl__table th{padding:var(--s-3);background:var(--brand-100);text-align:left;font-weight:600;color:var(--ink);border:1px solid var(--line)}
.tpl__table td{height:2.4em;padding:var(--s-2) var(--s-3);border:1px solid var(--line);color:var(--ink-80)}
.tpl__check{display:grid;gap:var(--s-2);margin:0;padding:0;list-style:none}
.tpl__check li{position:relative;padding-left:28px;font-size:var(--fs-small);color:var(--ink-80)}
.tpl__check li::before{content:"";position:absolute;left:0;top:.2em;width:15px;height:15px;border:1.5px solid var(--bp);border-radius:3px;background:var(--white)}
@media (max-width:767px){
  .tpl{padding:var(--s-3)}
  .tpl__doc{padding:var(--s-6) var(--s-4)}
  .tpl__fields>div{grid-template-columns:minmax(0,1fr)}
  .tpl__fields dd{border-left:0;border-top:1px dashed var(--bp-line)}
}

/* Glossary: the A to Z list, and a term page's reading column */
.gloss__index{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:var(--s-8)}
.gloss__index a{display:inline-grid;place-items:center;min-width:40px;height:40px;padding:0 10px;border:1px solid var(--line);border-radius:var(--r-sm);font:500 var(--fs-mono-sm)/1 var(--font-mono);color:var(--ink);text-decoration:none;transition:border-color var(--dur-fast) var(--ease-out),color var(--dur-fast) var(--ease-out)}
.gloss__index a:hover{border-color:var(--bp);color:var(--bp)}
.gloss{display:grid;gap:var(--s-8)}
.gloss__group{display:grid;grid-template-columns:80px minmax(0,1fr);gap:var(--s-6);padding-top:var(--s-6);border-top:1px solid var(--line);scroll-margin-top:calc(var(--header-h) + 16px)}
.gloss__letter{margin:0;font:300 48px/1 var(--font-serif);color:var(--bp)}
.gloss dl{display:grid;gap:var(--s-5);margin:0}
.gloss dl>div{display:grid;gap:var(--s-2);max-width:760px}
.gloss dt a{font:400 24px/1.25 var(--font-serif);color:var(--ink);text-decoration:none;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size var(--dur-fast) var(--ease-out)}
.gloss dt a:hover{background-size:100% 1px}
.gloss dd{margin:0;font-size:var(--fs-small);line-height:1.65;color:var(--ink-80)}
.term{max-width:720px}
.term h2{font:300 30px/1.2 var(--font-serif)}
.term__related{display:flex;flex-wrap:wrap;gap:8px;padding:0!important;list-style:none}
.term__related li{margin:0!important;padding:0!important}
.term__related li::before{display:none!important}
.term__related a{display:inline-block;padding:8px 14px;border:1px solid var(--line);border-radius:var(--r-pill);font-size:var(--fs-small);color:var(--ink);text-decoration:none}
.term__related a:hover{border-color:var(--bp);color:var(--bp)}
.term__next{max-width:720px;margin-top:var(--s-12)}
.term__dates{margin-top:var(--s-6)}
.term__dates a{color:var(--brand-500)}
@media (max-width:767px){ .gloss__group{grid-template-columns:minmax(0,1fr);gap:var(--s-3)} .gloss__letter{font-size:36px} }

/* Compare: the side-by-side table, the two "choose" columns, and the questions */
.cmp{background:var(--white)}
.cmp table{width:100%;min-width:640px;border-collapse:collapse;font-size:var(--fs-small)}
.cmp th,.cmp td{padding:var(--s-4) var(--s-5);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.cmp thead th{font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60);border-bottom:1px solid var(--ink)}
.cmp thead th:last-child{color:var(--bp)}
.cmp tbody th{width:26%;font-weight:600;color:var(--ink)}
.cmp tbody td{color:var(--ink-80);line-height:1.6}
.cmp tbody td:last-child{background:var(--brand-100);color:var(--ink)}
.cmp tbody tr:last-child>*{border-bottom:0}
.cmp__choose{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4)}
.cmp__col{padding:var(--s-8);border:1px solid var(--line);border-radius:var(--r-md);background:var(--white)}
.cmp__col--us{border-color:var(--bp);box-shadow:inset 0 0 0 1px var(--bp)}
.cmp__col h3{margin:0 0 var(--s-4);font:300 26px/1.2 var(--font-serif)}
.cmp__col ul{display:grid;gap:var(--s-3);margin:0;padding:0;list-style:none}
.cmp__col li{position:relative;padding-left:20px;font-size:var(--fs-small);line-height:1.6;color:var(--ink-80)}
.cmp__col li::before{content:"";position:absolute;left:0;top:.62em;width:6px;height:6px;border-radius:50%;background:var(--bp)}
.cmp__ask{display:grid;gap:var(--s-3);max-width:760px;margin:0 0 var(--s-10);padding:0;list-style:none;counter-reset:ask}
.cmp__ask li{position:relative;padding:var(--s-4) var(--s-5) var(--s-4) 56px;border:1px solid var(--line);border-radius:var(--r-sm);counter-increment:ask;font-size:var(--fs-body);color:var(--ink)}
.cmp__ask li::before{content:counter(ask,decimal-leading-zero);position:absolute;left:var(--s-5);top:var(--s-4);font:500 var(--fs-mono-sm)/1.8 var(--font-mono);color:var(--bp)}
.cmp__faq{max-width:760px}
.cmp__faq h3{font:400 22px/1.3 var(--font-serif);color:var(--ink)}
.cmp__faq p{font-size:var(--fs-small);line-height:1.65;color:var(--ink-80)}
@media (max-width:767px){
  .cmp__choose{grid-template-columns:minmax(0,1fr)} .cmp__col{padding:var(--s-6)}
  .cmp table{min-width:0} .cmp thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .cmp tbody tr{display:block;border-bottom:1px solid var(--line)} .cmp tbody tr:last-child{border-bottom:0}
  .cmp tbody th,.cmp tbody td{display:block;width:auto;border-bottom:0;padding:var(--s-3) var(--s-5)}
  .cmp tbody th{padding-top:var(--s-5)} .cmp tbody td:last-child{margin:0 var(--s-3) var(--s-4);border-radius:var(--r-sm)}
  .cmp tbody td::before{content:attr(data-label);display:block;margin-bottom:2px;font:500 var(--fs-mono-xs)/1.4 var(--font-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-60)}
  .cmp tbody td:last-child::before{color:var(--bp)}
}