/* Shared layout and the homepage blocks. Tokens are in tokens.css. */
/* 4-column ruled grid (4 × 360 at 1440), 24px cell padding, 1px rules inside each cell.
   Gold: #ceb36b on gold cells; #c4ab66 on the blur word, arrow tile and Equestrian arrow */
* { box-sizing: border-box; }
html { background: var(--bg); }
body { margin: 0; background: var(--bg); color: var(--ink); font: 16px/1.55 "Stack Sans Text", system-ui, sans-serif;
       letter-spacing: -0.02em; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
.mono { font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 18px; letter-spacing: 0; text-transform: uppercase; }
.ready body, .ready .sec, .ready main, .ready .cell, .ready .row, .ready .tile, .ready .mpanel { transition: background-color .45s ease, color .45s ease, box-shadow .45s ease; }

/* smooth scroll (Lenis) */
html.lenis, html.lenis body { height: auto; }
/* scrollbar: site colours, space always kept so the page doesn't shift when the loader lifts */
html { scrollbar-gutter: stable; scrollbar-color: var(--muted) var(--bg); }
html:not(.no-loader):has(> body > .loader) { scrollbar-color: var(--block) var(--block); }
::-webkit-scrollbar { width: 10px; height: 10px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--muted); }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
/* no overflow lock while Lenis is stopped: it hid the scrollbar and the page shifted when the loader lifted */
.lenis.lenis-smooth iframe { pointer-events: none; }

/* grid primitives. Sections are opaque (pinned blocks sit under the ones that slide over); cells clip rather than hide
   overflow, as overflow: hidden would stop sticky children sticking to the page */
.sec { position: relative; display: grid; grid-template-columns: var(--c4); isolation: isolate; background: var(--bg); }
/* single rules: each block draws top/left inside its edge and bottom/right 1px outside, on the neighbour's own pixel,
   so a shared edge is one line. --rc is the rule colour; --rr the right-hand frame */
.cell, .mpanel { --rc: var(--rule); --rr: transparent;
  --rules: inset var(--hair) var(--hair) 0 0 var(--rc), inset calc(-1 * var(--hair)) 0 0 0 var(--rr), var(--hair) var(--hair) 0 0 var(--rc); }
.edge-r { --rr: var(--rc); }
.cell { position: relative; background: var(--bg); box-shadow: var(--rules); padding: 24px; overflow: hidden; overflow: clip; z-index: 1; }

/* ---------- motion ----------
   .w word in a clip line, .rise heading rising by word, .fword paragraph word filling on scroll, .odo rolling digit */
.w { display: inline-block; vertical-align: top; overflow: hidden; overflow: clip; padding-bottom: .14em; margin-bottom: -.14em; }
.w > span { display: inline-block; will-change: transform; }
.rise .w > span { transform: translateY(112%); transition: transform 1.5s var(--ease) var(--d, 0s); }
.rise.in .w > span { transform: none; }
.fword { transition: opacity .6s ease; }
.focus-in .fword { display: inline-block; transition: none; }   /* About lead phrase blurs on scroll (site.js leadBlur) */
.nw { display: inline-block; }   /* keep the last two words of a split line together unless wider than the line */
.odo, .oc { display: inline-block; height: 1em; line-height: 1; vertical-align: top; overflow: hidden; overflow: clip; text-align: center; }
.odo > span { display: block; will-change: transform; }
.odo > span > span { display: block; height: 1em; }

/* block reveal: wipes in from the top edge; --to (height, capped at 1.2 screens) and --wd (duration) are set by script */
@property --reveal { syntax: '<length>'; inherits: false; initial-value: 0px; }
.blk { clip-path: inset(0 0 max(0px, calc(100% - var(--off, 0px) - var(--reveal))) 0); }  /* --off: part already scrolled past */
.blk:not(.done), .ready .blk:not(.done) { transition: --reveal var(--wd, 1.6s) var(--ease-io) var(--bd, 0s); }  /* outranks the theme-fade rule until done */
.blk.in { --reveal: var(--to, 100vh); }
.blk.done { clip-path: none; }
/* rule held back during the wipe, fades in after */
.blk:not(.done) { --rc: transparent; }
.blk.done, .ready .blk.done { transition: background-color .45s ease, color .45s ease, box-shadow 1s ease; }
/* window cells have nothing to wipe, so their rule fades in once the boxes around them land */
.blk.glass { clip-path: none; --rc: transparent; }
.blk.glass:not(.done), .ready .blk.glass:not(.done) { transition: box-shadow 1.1s ease var(--bd, 0s); }
.blk.glass.in { --rc: var(--rule); }
/* rules.js draws an arriving block's rules on a canvas above pinned blocks (z-index 2) and below a hovered one (3);
   the block's own rule stays hidden (.rl) until it finishes */
.rl, .blk.glass.in.rl { --rc: transparent; }
canvas.srg-rules { position: absolute; left: 0; top: 0; z-index: 3; pointer-events: none; }   /* top: set by rules.js */
.pin-hero, .method { isolation: isolate; }   /* keeps the hero's and the Method panel's canvas inside their own layer */

/* loader: crest of chequer squares (site.js fills #crest-tiles) and loading bar; site.js breaks it away with board.js tiles (.out fades it under reduced motion) */
.loader { position: fixed; inset: 0; z-index: 100; background: var(--block); color: var(--block-ink);
          display: grid; place-items: center; transition: clip-path 1.4s var(--ease-io); clip-path: inset(0 0 0 0); }
.loader.out { clip-path: inset(0 0 100% 0); pointer-events: none; }
html.no-loader .loader { display: none; }   /* first page in a tab (inc/setup.php) */
.loader .spin { display: flex; flex-direction: column; align-items: center; gap: 36px; }
.loader svg { width: 154px; height: 79px; }
@media (prefers-reduced-motion: no-preference) { .loader use { clip-path: url(#crest-tiles); } }
/* loading bar, filled by --f (site.js) */
.loader .bar { position: relative; width: 288px; height: 2px; background: rgba(244, 242, 237, .14); }
.loader .bar::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--f, 0)); transform-origin: left; }
.cell.win { background: transparent; }
.cell.ink { background: var(--block); color: var(--block-ink); }
.cell.gold { background: var(--gold-cell); color: var(--on-gold); }
.field { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; pointer-events: none; }
.link { display: inline-flex; gap: 24px; padding-bottom: 5px; border-bottom: 1px solid currentColor; white-space: pre; }
.ico { width: 1em; height: 1em; display: inline-block; vertical-align: -0.14em; overflow: visible;
       fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: butt; stroke-linejoin: miter; stroke-miterlimit: 10; }
.ar { display: inline-block; }
/* arrow swap (srg_arrow): on hover the arrow leaves up and right and its copy enters from the bottom left */
.swap { position: relative; display: inline-block; width: 1em; height: 1em; vertical-align: -0.14em; overflow: hidden; overflow: clip; }
.swap > .ico { display: block; width: 100%; height: 100%; }
.ready .swap > .ico { transition: color .35s var(--ease), transform 350ms steps(16, end); }   /* one pixel cell at a time */
.swap > .ico + .ico { position: absolute; inset: 0; transform: translate(-100%, 100%); }
:is(a, button):is(:hover, :focus-visible) .swap > .ico:first-child { transform: translate(100%, -100%); }
:is(a, button):is(:hover, :focus-visible) .swap > .ico + .ico { transform: none; }
/* Previous arrow mirrors it */
.swap.nw > .ico + .ico { transform: translate(100%, 100%); }
:is(a, button):is(:hover, :focus-visible) .swap.nw > .ico:first-child { transform: translate(-100%, -100%); }

/* hovers: assets/css/hover.css */
.srg-form button { position: relative; isolation: isolate; }
.ready :is(.aud a.cell .foot, .card-post .cp-foot, .author a.more .go) :is(*, .go):not(.ico) { transition: color .35s var(--ease), opacity .35s var(--ease), transform .4s var(--ease); }

/* typed section labels with a trailing block cursor */
.label { display: inline-flex; align-items: center; gap: 2px; min-height: 16px; white-space: pre; }
.label i { width: 7px; height: 12px; background: currentColor; flex: none; animation: blink 1.1s steps(1) infinite; }
.label i.typing { animation: none; }
.label[data-type] { display: inline-grid; align-items: center; }
.label[data-type] > * { grid-area: 1 / 1; }
.label .ty-ghost { visibility: hidden; }
.label .ty-ghost::after { content: ""; display: inline-block; width: 9px; }.label .ty-live { display: inline-flex; align-items: center; gap: 2px; }
@keyframes blink { 50% { opacity: 0; } }

/* 00 · header */
.header { grid-template-columns: 92px minmax(0, 1fr) auto var(--c4-last); height: var(--hh); position: sticky; top: 0; z-index: 30; }
main { position: relative; z-index: 1; background: var(--bg); }
.header .cell { padding: 0; display: flex; align-items: center; }
.header .logo { justify-content: center; background: var(--block); }
.header .logo svg { width: 44px; height: 23px; transition: transform .6s var(--ease); }
.header .logo:is(:hover, :focus-visible) svg { transform: scale(1.18); }
/* header crest in four parts (template-parts/sprites.php), played by site.js; .lg-in is the play-in, the rules without it the play-back.
   Static without script or under reduced motion */
.crest-anim use { transform-box: view-box; }
.cr-wl { transform-origin: 55px 50px; } .cr-wr { transform-origin: 98px 50px; }.cr-crown { transform-origin: 76.6px 13px; } .cr-shield { transform-origin: 76.6px 52px; }
.logo.lg :is(.cr-wl, .cr-wr) { opacity: 0; transition: transform 1.1s var(--ease-io), opacity .2s linear 1s; }
.logo.lg .cr-wl { transform: translateX(26px) scaleX(.5); }
.logo.lg .cr-wr { transform: translateX(-26px) scaleX(.5); }
.logo.lg .cr-crown { opacity: 0; transform: translateY(-7px); transition: transform .8s var(--ease-io) .85s, opacity .6s ease .85s; }
.logo.lg .cr-shield { opacity: 0; transform: translateY(5px) scale(.92); transition: transform .8s var(--ease-io) 1.1s, opacity .6s ease 1.1s; }
.logo.lg.lg-in :is(.cr-wl, .cr-wr, .cr-crown, .cr-shield) { opacity: 1; transform: none; }
.logo.lg.lg-in .cr-shield { transition: transform 1.2s var(--ease), opacity .8s ease; }
.logo.lg.lg-in .cr-crown { transition: transform 1.2s var(--ease) .25s, opacity .8s ease .25s; }
.logo.lg.lg-in :is(.cr-wl, .cr-wr) { transition: transform 1.6s var(--ease) .8s, opacity .25s linear .8s; }
.header nav.cell { padding: 0 24px; gap: 24px; white-space: nowrap;                   font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: 12px; line-height: 18px; letter-spacing: 0; text-transform: uppercase; }
/* inactive links muted; current, hovered and focused links in full ink */
.header nav a { color: var(--muted); transition: color .35s ease; }
.header nav a:is([aria-current], :hover, :focus-visible) { color: var(--ink); }
.header .contact { justify-content: space-between; padding: 0 24px; }

/* hero: the wordmark is cropped by its cell and slides up through it at 1.9× scroll speed (a fixed word would empty the window) */
/* hero is the viewport height (small viewport where supported) less the header, min 720px; the wordmark window takes the rest */
.hero { --vh: 100vh; --hero-h: max(720px, calc(var(--vh) - var(--hh))); height: var(--hero-h); grid-template-rows: minmax(0, 1fr) 360px; }
@supports (height: 100svh) { .hero { --vh: 100svh; } }
/* the hero pins under the header and About slides over it */
.pin-hero > .hero { position: sticky; top: min(var(--hh), calc(100vh - var(--hero-h))); z-index: 0; }
.pin-hero > .about { z-index: 1; }
.a1 { grid-column: 1 / 3; }
/* first line sits 317.4px above the window foot so the next line shows under it */
.a1 .wm { position: absolute; left: 24px; top: calc(100% - 317.4px); will-change: transform; margin: 0; font-weight: 400; font-size: 200px; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.a2 { grid-column: 3 / 5; }
.b3 { font-size: var(--t-md); }
.b3 p { margin: 0; max-width: 532px; line-height: 1.65; }
.cta-block { display: flex; align-items: flex-end; justify-content: space-between; }
:is(.hero, .cap-hero) .cta-block { align-items: flex-start; }
/* 02 · about */
.about { height: 960px; }
.about .text { grid-column: 3 / 5; }
.about .text .stick { position: sticky; top: calc(var(--hh) + 24px); }   /* holds under the header; the phrase blurs across the sticky travel (site.js ABOUT) */
/* the label rides above the text; the illustration pins while the text fills in */
.about .stick .label { display: grid; width: max-content; margin-bottom: 40px; }
.about .illo { position: sticky; top: var(--hh); align-self: start; height: min(600px, calc(100vh - var(--hh))); }
.about .lead { margin: 0; font-size: var(--t-lg); line-height: 1.45; letter-spacing: -0.02em; max-width: 824px; color: var(--tx-2); }
.about .illo { padding: 0; }
[data-illo] canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 03 · stats. The stat blocks pin under the header together (staircase 480 / 360 / 240) and the section foot pushes them off, tallest first */
.stats { grid-template-rows: repeat(10, 120px); }
.stat { display: flex; flex-direction: column; justify-content: space-between; position: sticky; top: var(--hh); z-index: 2; }
.stat b { font-weight: 400; line-height: 1; letter-spacing: -0.04em; white-space: nowrap; }
.stat p { margin: 0; max-width: 312px; }
.s30 { grid-column: 1; grid-row: 1 / 5; } .s30 b { font-size: 120px; }
.s2018 { grid-column: 2; grid-row: 1 / 4; } .s2018 b, .s5 b { font-size: 96px; }
.s5 { grid-column: 3; grid-row: 1 / 3; }
.stats .win { grid-column: 4; grid-row: 1 / 11; }
.stats .e1 { grid-column: 1; grid-row: 5 / 11; } .stats .e2 { grid-column: 2; grid-row: 4 / 11; } .stats .e3 { grid-column: 3; grid-row: 3 / 11; }

/* 04 · the Sloane Method. One dark panel pins while the section scrolls: steps light in turn, the description rises in,
   the rings morph to the next capability. The section height is the scroll track */
.method { position: relative; height: calc(100vh - var(--hh) + 330vh); background: var(--m-bg); }
.mpanel { position: sticky; top: var(--hh); height: calc(100vh - var(--hh)); min-height: 620px; overflow: hidden; overflow: clip;
          background: var(--m-bg); color: var(--m-ink); box-shadow: var(--rules);
          display: grid; grid-template-columns: var(--c4); grid-template-rows: minmax(min-content, 46%) 1fr; }
.mtitle { grid-column: 1 / 3; grid-row: 1; margin: 0; padding: 24px; font-weight: 400; font-size: clamp(96px, 8.9vw, 128px); line-height: 1; letter-spacing: -0.04em; }
.mcopy { grid-column: 3 / 5; grid-row: 1; padding: 36px 24px 32px 19px; display: flex; flex-direction: column; min-width: 0; }
/* steps on their own 32px line, unlit ones dimmed; description on the stage row, Speak with us in column 4 */
.mintro, .msteps, .mdesc { letter-spacing: -0.02em; line-height: 1.55; }
.mintro { margin: 24px 0 0; max-width: 501px; font-size: var(--t-md); color: var(--m-soft); }
.msteps { margin: 62px 0 0; font-size: var(--t-lg); white-space: nowrap; }   /* one line; site.js shrinks it to fit */
.msteps span { color: var(--m-dim); transition: color .7s var(--ease); }
.msteps span.on { color: var(--m-ink); }
.mdesc { grid-column: 3; grid-row: 2; align-self: start; position: relative; margin: 0 24px 0 19px; min-height: 80px; font-size: var(--t-p); color: var(--m-quiet); }
.mcta { grid-column: 4; grid-row: 2; align-self: start; justify-self: start; margin-left: 24px; }
/* centre divider between the title/ring half and the copy half */
.mpanel::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--c4-mid); width: var(--hair); background: var(--m-rule); z-index: 2; pointer-events: none; }
.mdesc p { position: absolute; top: 0; left: 0; right: 0; margin: 0; opacity: 0; transition: opacity .35s ease; }
.mdesc p.on { opacity: 1; transition: opacity .5s ease .1s; }
/* rings take the left half, under the title */
.mstage { grid-column: 1 / 3; grid-row: 2; position: relative; min-height: 240px; }
/* autoplay progress: five gold segments, one per step */
.mbar { position: absolute; top: 0; left: 24px; right: 24px; z-index: 1; display: flex; gap: 6px; height: 4px; pointer-events: none; }
.mbar i { flex: 1; position: relative; background: var(--m-track); }
.mbar i::after { content: ""; position: absolute; inset: 0; background: var(--gold); transform: scaleX(var(--f, 0)); transform-origin: 0 50%; }
/* autoplay pause/play square under the progress bar; hidden under reduced motion */
.mpause { position: absolute; top: 16px; left: 24px; z-index: 1; width: 32px; height: 32px; padding: 0; margin: 0; border: 0; display: grid; place-items: center;
          background: var(--m-bg); color: var(--m-ink); box-shadow: inset 0 0 0 var(--hair) var(--m-rule); cursor: pointer;
          -webkit-appearance: none; appearance: none; transition: color .25s ease, box-shadow .25s ease, background-color .45s ease; }
.mpause svg { width: 12px; height: 12px; fill: currentColor; }
.mpause .pl, .mpause[aria-pressed="true"] .pa { display: none; }
.mpause[aria-pressed="true"] .pl { display: inline; }
.mpause:hover { color: var(--gold); box-shadow: inset 0 0 0 var(--hair) var(--gold); }
.mpause:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.mpause[hidden] { display: none; }

/* 05 · sectors header and 06 · list */
.sectors-h { height: 360px; }
/* Sectors header pins, the list slides over it */
.pin-sectors > .sectors-h { position: sticky; top: var(--hh); z-index: 0; }
.pin-sectors > .sectors { z-index: 1; }
.sectors-h .word { grid-column: 1 / 3; display: flex; align-items: flex-end; padding-bottom: 0; }
.sectors-h .word span { font-size: calc(180 * var(--s)); line-height: .98; letter-spacing: -0.04em; transform: translateY(6%); }
.sectors-h .win { grid-column: 3 / 5; background: var(--win-ink); }
.sectors-h .win canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.sectors { grid-template-rows: repeat(6, 120px); }
.sectors .intro { grid-row: 1 / 7; display: flex; flex-direction: column; }
.sectors .intro p { margin: auto 0 38px; font-size: var(--t-md); color: var(--tx-2); }
.sectors .intro .link { align-self: flex-start; }
.srow { grid-column: 2 / 5; display: grid; grid-template-columns: 360px 1fr auto; align-items: center; padding: 0 24px; }
.srow h3, .srow h4 { margin: 0; font-weight: 400; font-size: var(--t-lg); letter-spacing: -0.02em; }
.srow .go { color: var(--gold); font-size: 32px; opacity: 0; transform: translateX(-8px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.srow:is(:hover, .hv-hold) .go { opacity: 1; transform: none; }
/* row hover (.roll from site.js): heading words leave through the clip line and rise back; tags decode (hover.js) */
@keyframes srow-roll {
  0% { transform: none; animation-timing-function: cubic-bezier(.77, 0, .18, 1); }
  25% { transform: translateY(-112%); }
  25.01% { transform: translateY(112%); animation-timing-function: cubic-bezier(.16, 1, .3, 1); }
  100% { transform: none; }
}
:is(.srow h3, .aud h2).roll .w > span { animation: srow-roll 1.2s var(--d, 0s) both; }   /* .aud: the Services audience cards */

/* 07 · founder */
.founder { height: 600px; grid-template-rows: 300px 300px; z-index: 2; }  /* above the CTA, so its blocks' bottom rules (drawn 1px outside) stay on top of the ring field */
.portrait { grid-row: 1 / 3; padding: 0; background: var(--card); }
/* portrait pinned to the top edge so the head isn't cropped, centred on the face (52%) when the sides trim; slow zoom on scroll */
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 52% 0; transform-origin: 52% 0; transform: scale(1.02); will-change: transform; }
.quote { grid-column: 2 / 4; grid-row: 1 / 3; display: flex; flex-direction: column; }
.quote blockquote { margin: 24px 0 0; font-size: var(--t-ml); line-height: 1.45; letter-spacing: -0.02em; max-width: 624px; }
.quote .who { margin-top: auto; }
.quote .who strong { display: block; font-weight: 400; font-size: var(--t-md); margin-bottom: 8px; }
.creds { grid-column: 4; grid-row: 1; } .fw { grid-column: 4; grid-row: 2; }
/* Credentials block is sticky under the header and moves down its column over the ring window */
.creds { position: sticky; top: var(--hh); align-self: start; height: 300px; z-index: 2; }
/* credentials marquee (site.js): badges run right to left, copies made by script; a still wrapped row under reduced motion */
.creds { display: flex; flex-direction: column; }
.mq { margin: auto -24px 0; padding-left: 24px; overflow: hidden; overflow: clip; }
.mq-track { display: flex; width: max-content; }
.mq.run .mq-track { animation: mq var(--mq-dur, 30s) linear infinite; }
@keyframes mq { to { transform: translateX(calc(-1 * var(--mq-w, 0px))); } }
.mq-set { display: flex; flex: none; align-items: center; gap: 32px; margin: 0; padding: 0 32px 0 0; list-style: none; }
.mq-set li { flex: none; display: flex; }
.mq img { display: block; width: auto; height: calc(var(--h, 48) * .75px); }   /* --h: each badge's height for equal area (inc/helpers.php), scaled down */
.mq .tb { display: flex; align-items: center; height: 48px; padding: 0 12px; white-space: nowrap; box-shadow: inset 0 0 0 var(--hair) currentColor; }
/* on a block in the page colour (About) the badges follow the theme: ink in light, their light twins in dark */
.mq.flip .bd-dk, :root[data-theme="dark"] .mq.flip .bd-lt { display: none; }
:root[data-theme="dark"] .mq.flip .bd-dk { display: block; }

/* CTA word tiles over the ring field; only the gold box is a link */
.cta { height: calc(860 * var(--s)); min-height: 360px; display: block; overflow: hidden; overflow: clip; }
.cta::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;  box-shadow: inset var(--hair) var(--hair) 0 0 var(--rule), inset calc(-1 * var(--hair)) 0 0 0 var(--rule); }
.tiles { position: relative; display: block; z-index: 1; width: calc(1440 * var(--s)); height: 100%; margin: 0 auto; }
.cta-link { pointer-events: none; }
.trow { position: absolute; display: flex; gap: calc(7 * var(--s)); }
.tile { position: absolute; height: calc(104 * var(--s)); display: flex; align-items: center; padding: 0 calc(14 * var(--s));
        font-size: calc(90 * var(--s)); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; box-shadow: inset 0 0 0 var(--hair) var(--rule); }
.trow .tile { position: relative; }
.r1 { left: calc(48 * var(--s)); top: calc(158 * var(--s)); }
.r3 { left: calc(240 * var(--s)); top: calc(598 * var(--s)); gap: calc(8 * var(--s)); }
.t-start { background: var(--tile-b); color: var(--tile-b-ink); }
.t-a { background: var(--tile-a); color: var(--tile-a-ink); }
.t-conf { left: calc(170 * var(--s)); top: calc(378 * var(--s)); background: var(--tile-b); color: var(--tile-b-ink); }
.t-conv { background: var(--tile-a); color: var(--tile-a-ink); }
.t-arrow { width: calc(104 * var(--s)); justify-content: center; pointer-events: auto; cursor: pointer;
           background: var(--gold); color: #0a0d10; box-shadow: none; font-size: calc(60 * var(--s)); }
.t-arrow .ico { stroke-width: 2.8; }
.t-arrow > span { display: flex; }

/* footer waits pinned under the page and is uncovered as the CTA scrolls away */
footer { position: sticky; bottom: 0; z-index: 0; }
.footer { height: 360px; }
.footer .sign { margin: 0; font-size: var(--t-lg); max-width: 9.75em; line-height: 1.45; color: var(--tx-2); }
.footer nav { display: flex; flex-direction: column; }
.footer nav.cell { padding-block: 16px; }   /* the links' own padding keeps the first and last on the other cells' 24px line */
.footer nav a { padding-block: 8px; }
.footer .contact a { display: block; margin-top: 6px; }
.footer .contact .label { margin-bottom: 18px; }
.mark { background: var(--block); color: var(--sign); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; }
.mark .crest { width: 153px; height: 79px; }
.mark .sloane { width: 231px; height: 44px; }
.mark .rg { font: 700 12.26px/1 "Stack Sans Headline", "Stack Sans Text", sans-serif; letter-spacing: 0.4em; margin-right: -0.4em; }
/* micro row: the legal line takes the full width; items stay on one line, wrapping whole items when narrow */
.micro { grid-template-columns: minmax(0, 1fr) auto; min-height: 48px; }
.micro .cell { padding: 0 24px; display: flex; align-items: center; }
.micro .cell:last-child { justify-content: flex-end; }
.micro .cell:empty { display: none; }
.micro .cell:first-of-type { grid-column: 1 / -1; }   /* the legal line spans the row at every width (of-type: the rules canvas can come first) */
.micro .legal { display: flex; flex-wrap: wrap; line-height: 1.5; padding: 15px 0; color: var(--tx-3); }
.micro .legal .li { white-space: nowrap; }
.micro .legal .li + .li::before { content: "|"; content: "|" / ""; padding: 0 1.2em; opacity: .5; }

/* theme switch cell: shows the theme it switches to; the moon and sun icons morph into each other */
.header .theme-toggle { justify-content: space-between; gap: 18px; padding: 0 24px; border: 0; margin: 0; font: inherit; color: var(--ink);
                        background: var(--bg); cursor: pointer; -webkit-appearance: none; appearance: none; }
.theme-toggle .mono { line-height: 16px; }
.theme-toggle .glyph { width: 18px; height: 18px; flex: none; }
.theme-toggle .glyph svg { display: block; width: 18px; height: 18px; }
/* pixel moon and sun (header.php): .a pixels are on in light, .b in dark; they flip one by one in --k order */
.theme-toggle .glyph path { opacity: 0; transition: opacity 1ms linear calc(var(--k) * 40ms); }
.theme-toggle .glyph .a { opacity: 1; }
:root[data-theme="dark"] .theme-toggle .glyph .a:not(.b) { opacity: 0; }
:root[data-theme="dark"] .theme-toggle .glyph .b { opacity: 1; }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* menu (below 1080): 3x3 glyph cell and a panel of page blocks copied in by site.js;
   --mtop is the header's bottom edge, set by site.js (the admin bar moves it) */
.header .menu-btn { display: none; justify-content: space-between; gap: 18px; padding: 0 24px; border: 0; margin: 0; font: inherit;
                    color: var(--ink); background: var(--bg); cursor: pointer; -webkit-appearance: none; appearance: none; }
.menu-btn .mono { line-height: 16px; }
/* Menu glyph (srg_menu_glyph): a pixel plus while closed, a cross while open (the menu, the article contents bar), flipping pixel by pixel */
.mglyph { width: 18px; height: 18px; flex: none; }
.mglyph svg { display: block; width: 18px; height: 18px; }
.mglyph path { fill: currentColor; opacity: 0; transition: opacity 1ms linear calc(var(--k) * 40ms); }
.mglyph .a { opacity: 1; }
:is(.menu-btn, .toc-m-btn)[aria-expanded="true"] .mglyph .a:not(.b) { opacity: 0; }
:is(.menu-btn, .toc-m-btn)[aria-expanded="true"] .mglyph .b { opacity: 1; }
.mnav { position: fixed; left: 0; right: 0; top: var(--mtop, var(--hh)); z-index: 29; max-height: calc(100dvh - var(--mtop, var(--hh))); overflow-y: auto; overscroll-behavior: contain;
        background: var(--bg); clip-path: inset(0 0 100% 0); visibility: hidden; transition: clip-path .7s var(--ease-io), visibility 0s linear .7s; }
.mnav.open { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .7s var(--ease-io); }
.mnav .sec { grid-template-columns: 1fr; overflow: clip; }   /* the hover layers' 1px bleed (hover.css) made the panel scroll a pixel each way */
.mnav a.cell { display: flex; justify-content: space-between; align-items: center; min-height: 76px; padding: 0 24px;
               font-size: 28px; line-height: 1.2; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; }
.mnav a.cell .go { font-size: 22px; }
.mnav a.cell.ink { color: var(--block-ink); }
.mnav a.cell.ink .mono { font-size: 12px; }

/* the switch transition itself ("the board") is drawn by assets/js/board.js, which brings its own styles */
/* below 1080: a two-column grid; below 700: a single column */
@media (max-width: 1080px) {
  .sec { grid-template-columns: var(--c2); }
  .header { grid-template-columns: 72px 1fr auto auto; }
  .header nav.cell { display: none; }
  .header .menu-btn { display: flex; grid-column: 2; grid-row: 1; }
  .header .contact { gap: 24px; }
  .hero { grid-template-rows: minmax(480px, 1fr) 300px 300px; --hero-h: max(1080px, calc(var(--vh) - var(--hh))); }   /* at least the screen */
  .a1, .a2 { grid-column: 1 / 3; }
  .a2 { display: none; }
  .a1 .wm { position: absolute; top: auto; bottom: -140px; font-size: min(200px, 26vw); }
  .about { height: auto; }
  .about .label-c { display: none; }
  .about .illo { min-height: 480px; position: relative; top: auto; height: auto; }
  .about .text { grid-column: 2 / 3; grid-row: 1; }
  .about .text .stick { position: static; }
  .stats { grid-template-rows: repeat(4, 110px); }
  .stats .win { display: none; }
  .stat { position: relative; top: auto; }
  .s30 { grid-column: 1; grid-row: 1 / 5; } .s2018 { grid-column: 2; grid-row: 1 / 3; } .s5 { grid-column: 2; grid-row: 3 / 5; }
  .stats .e1, .stats .e2, .stats .e3 { display: none; }
  /* the globe's window keeps a full-width row of its own under the stats, where the stats field shows through */
  .stats .win[data-globe] { display: block; grid-column: 1 / 3; grid-row: 5; height: 480px; }
  .sectors-h .word span { font-size: 22vw; }
  .sectors-h .win { display: none; }
  .sectors-h .word { grid-column: 1 / 3; }
  .sectors { grid-template-rows: auto; }
  .sectors .intro { grid-column: 1 / 3; grid-row: auto; min-height: 280px; }
  .sectors .intro p { margin-top: 64px; }
  .srow { grid-column: 1 / 3; grid-template-columns: 1fr 1fr auto; height: 110px; }
  .founder { height: auto; grid-template-rows: auto; }
  .portrait { grid-row: auto; min-height: 520px; }
  .quote { grid-column: 2; grid-row: auto; }
  .quote blockquote { max-width: none; margin-top: 40px; }
  .quote { padding-block: 40px; }
  .quote .who { padding-top: 64px; }   /* stacked, the name keeps its distance from the quote */
  .sectors .intro p { max-width: 400px; }
  .creds, .fw { grid-column: auto; grid-row: auto; }
  .creds { position: relative; top: auto; height: auto; }
  .creds, .founder .win { min-height: 260px; }
  .cta { height: calc(860 * var(--s)); }
  .footer { height: auto; }
  .footer .cell { min-height: 300px; }
}
@media (max-width: 900px) {
  .method { height: calc(100vh - var(--hh) + 300vh); }
  /* one column: title, copy, the description, Speak with us, then the stage */
  .mpanel { grid-template-rows: auto auto auto auto 1fr; min-height: 0; }
  .mtitle { grid-column: 1 / 5; font-size: 64px; padding-bottom: 0; white-space: nowrap; }
  .mtitle br { display: none; }
  .mcopy { grid-column: 1 / 5; grid-row: 2; padding: 20px 24px 0; }
  .msteps { margin-top: 32px; }
  .mintro { max-width: none; margin-bottom: 16px; }
  .mdesc p { max-width: 388px; }
  .about .text { padding-bottom: 96px; }
  .mdesc { grid-column: 1 / 5; grid-row: 3; margin: 33px 24px 0; }
  .mpanel::after { display: none; }   /* one column on narrow screens: no centre rule */
  .mcta { grid-column: 1 / 5; grid-row: 4; margin: 16px 24px 24px; }
  .mstage { grid-column: 1 / 5; grid-row: 5; min-height: 160px; }
}
@media (max-width: 700px) {
  .sec, .footer, .micro { grid-template-columns: minmax(0, 1fr); }   /* minmax: the badge marquee's strip would widen a plain 1fr */
  .header { grid-template-columns: 64px 1fr auto; }
  .header nav.cell { display: none; }
  .header .contact { display: none; }      /* in the menu */
  .header .theme-toggle { grid-column: 3; grid-row: 1; }
  .hero { grid-template-rows: minmax(420px, 1fr) 260px 220px; --hero-h: max(900px, calc(var(--vh) - var(--hh))); }   /* no empty ring row under Speak with us */
  .pin-hero > .hero, .pin-sectors > .sectors-h, footer { position: relative; top: auto; bottom: auto; }
  .a1 { grid-column: 1; }
  .hero .b1, .hero .b2 { display: none; }
  .about .text, .about .illo { grid-column: 1; grid-row: auto; }
  .about .illo { min-height: 420px; }
  .stats { grid-template-rows: none; }
  .s30, .s2018, .s5 { grid-column: 1; grid-row: auto; min-height: 240px; }
  .s30 b { font-size: 96px; } .s2018 b, .s5 b { font-size: 80px; }
  .stats .win[data-globe] { grid-column: 1; grid-row: auto; height: auto; aspect-ratio: 1; }
  .sectors-h { height: 220px; }
  .sectors-h .word { grid-column: 1; }
  .srow { grid-column: 1; grid-template-columns: 1fr auto; height: auto; padding: 24px; gap: 8px; }
  .srow .mono { grid-row: 2; }
  .srow .go { grid-row: 1 / 3; grid-column: 2; }
  .sectors .intro { grid-column: 1; }
  .quote { grid-column: 1; }
  .portrait { min-height: 0; aspect-ratio: 823 / 1000; max-height: 640px; }   /* full width: the photo's own shape, so nothing is trimmed until it is very wide */
  /* phones: compact type above so the rings keep 40% of the screen height */
  .mpanel { grid-template-rows: auto auto auto auto minmax(24vh, 30vh); align-content: space-between; }   /* rings ~30% of the screen; spare height spaces out the copy */
  .mtitle { font-size: 32px; padding-top: 16px; white-space: nowrap; }
  .mtitle br { display: none; }
  .mcopy { padding-top: 20px; }
  .mintro { margin-top: 16px; font-size: var(--t-p); }   /* compact on phones so the rings keep their share */
  .msteps { margin-top: 28px; }
  .msteps span { display: inline-block; filter: blur(4px); opacity: .2; transition: color .7s var(--ease), filter .7s var(--ease), opacity .7s var(--ease); }   /* steps blur-fade in as the cycle reaches them */
  .msteps span.on, .msteps span.past { filter: none; opacity: 1; }
  .mdesc { margin-top: 24px; font-size: var(--t-sm); min-height: 60px; }
  .mcta { justify-self: stretch; margin: 20px 24px 24px; }   /* full width, like the other buttons on phones */
  .mstage { min-height: 0; }
  .cta { height: 388px; min-height: 0; }
  .tiles { width: 100%; }
  .tile { height: 46px; font-size: 34px; padding: 0 8px; }
  .trow { gap: 6px; }
  .r1 { left: 16px; top: 72px; } .t-conf { left: 16px; top: 130px; }
  .r3 { left: 16px; right: 16px; top: 188px; flex-wrap: wrap; row-gap: 12px; }   /* the arrow drops to its own row, on the right */
  .t-arrow { width: 46px; margin-left: auto; font-size: 28px; }
  .footer .cell { min-height: 0; }
  .micro { height: auto; }
  .micro .cell { min-height: 48px; }
  .micro .cell:last-child { justify-content: flex-start; }
  /* the legal line runs down the page, one item to a line */
  .micro .legal { flex-direction: column; gap: 10px; padding: 20px 0; }
  .micro .legal .li + .li::before { content: none; }
}
@media (prefers-reduced-motion: reduce) {
  .label i { animation: none; }
  .msteps span, .mdesc p, .ar, .fword, .rise .w > span, .art-side .toc a::before { transition: none; }
  .msteps span { filter: none; opacity: 1; }
  .swap > .ico + .ico { display: none; }
  :is(a, button):is(:hover, :focus-visible) .swap > .ico:first-child { transform: none; }
  .pin-sectors > .sectors-h { position: relative; top: auto; }  /* its word is only pushed clear by the scroll script */
  .mq { margin-left: 0; margin-right: 0; padding-left: 0; }
  .mq-track { width: auto; }
  .mq-set { flex: 1; flex-wrap: wrap; gap: 16px 24px; padding: 0; }
  .mq .tb { height: 32px; }
  .mq img { height: calc(var(--h, 48) * .55px); }
  .loader .bar::after { transform: none; opacity: var(--f, 0); }
  .theme-toggle .glyph path, .mglyph path { transition: none; }
  .logo.lg :is(.cr-wl, .cr-wr, .cr-crown, .cr-shield) { opacity: 1; transform: none; transition: none; }
  .mnav, .mnav.open { transition: none; }
  .loader { transition: opacity .3s ease; }
  .loader.out { clip-path: none; opacity: 0; }
}