/* Ported from SRG_Home_blocky.html (tools/port-home.mjs). Tokens are in tokens.css. */
/* Blocky Alt homepage. Ruled 4-column grid (4 × 360 at 1440), 24px cell padding, 1px inside rules per cell.
   Light = Figma 68:2, dark = Figma 81:2 (recoloured clone). Gold cells use the test gold #ceb36b (Dom, 24 Sep);
   the token gold #c4ab66 stays on the blur word, the arrow tile and the 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 .band, .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): the page glides to a stop after each wheel or trackpad movement, on an expo ease */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* grid primitives. Sections are opaque, because pinned blocks sit underneath the ones that slide over them.
   Cells clip rather than hide their overflow: overflow: hidden would make every cell a scroll container
   and stop the sticky elements inside it from sticking to the page. */
.sec { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); isolation: isolate; background: var(--bg); }
/* single rules where blocks meet: every block draws its top and left rule inside its own edge and its
   bottom and right rule 1px outside, on the very pixel where the neighbour draws its top or left rule, so
   a shared edge is one line, not two. The page's right-hand frame is drawn inside (.edge-r, set by script),
   and a block that moves (the stats, Credentials) still carries a full outline over whatever it passes.
   --rc is the rule colour (transparent while a block loads); --rr is the right-hand frame. */
.cell, .band, .mpanel { --rc: var(--rule); --rr: transparent;
  --rules: inset 1px 1px 0 0 var(--rc), inset -1px 0 0 0 var(--rr), 1px 1px 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 (v2, after the reference site) ----------
   .w     a word inside a clip line; its inner span rises into place (scroll-scrubbed or on entry)
   .rise  headings that rise word by word once they enter view
   .fword a word in a paragraph that fills from faint to full as the paragraph scrolls through
   .odo   a rolling digit column in the stats */
.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; }
.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: every block wipes in from its top edge, the way the gold hover sweep falls. The wipe
   travels the block's own height (capped at 1.2 screens, --to, set by script) so short cells and tall
   panels open at a similar pace; the clip is dropped once it has finished. */
@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: any part already scrolled past */
.blk:not(.done), .ready .blk:not(.done) { transition: --reveal 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; }
/* no outline while a box loads: its rule is held back during the wipe and fades in once the box has landed */
.blk:not(.done) { --rc: transparent; }
.blk.done, .ready .blk.done { transition: background-color .45s ease, color .45s ease, box-shadow 1s ease; }
/* see-through windows have nothing to wipe but their rule, and a rule drawing itself over the rings reads
   as a bare outline; so a window's rule stays hidden and fades in once the boxes around it have landed */
.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); }

/* loader: the SRG crest spins like a coin on an ink screen while fonts and fields get ready; a hairline
   gold rule fills beneath it; then the screen lifts away upwards and the blocks wipe in */
.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; }
.loader .spin { perspective: 700px; display: flex; flex-direction: column; align-items: center; gap: 36px; }
.loader svg { width: 154px; height: 79px; animation: coin 1.8s cubic-bezier(.65, 0, .35, 1) infinite; }
@keyframes coin { from { transform: rotateY(0); } to { transform: rotateY(360deg); } }
.loader .bar { width: 120px; height: 1px; background: rgba(244, 242, 237, .18); overflow: hidden; }
.loader .bar i { display: block; height: 100%; background: var(--gold); transform: scaleX(var(--load, 0)); transform-origin: 0 50%; transition: transform .4s ease; }
.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; }
.link:hover .ar, .cta-block:hover .ar { transform: translateX(4px); }
.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; transition: transform .5s var(--ease); }

/* gold sweep: on hover a gold layer drops in from the top edge; on leave it carries on downwards and leaves
   through the bottom edge. Every block link uses it, as the header Contact and hero Speak with us do (Dom, 15 Oct):
   the sectors rows, Services rows and cards, article cards, topic filter, pager, form button and "More insights" */
:is(.sweep, .srow, .rc a.rc-title, .aud a.cell, .card-post, .filter a.cell:not(.on), .pager a.cell:not(.on), .subnav a.cell:not(.on), a.cell.more, .srg-form button)::before {
  content: ""; position: absolute; inset: 1px; z-index: -1; background: var(--gold-cell);   /* 1px in: the cell keeps its own rule */
  transform: scaleY(0); transform-origin: 50% 100%; transition: transform .85s var(--ease-io); }
:is(.sweep, .srow, .rc a.rc-title, .aud a.cell, .card-post, .filter a.cell:not(.on), .pager a.cell:not(.on), .subnav a.cell:not(.on), a.cell.more, .srg-form button):is(:hover, :focus-visible)::before {
  transform: scaleY(1); transform-origin: 50% 0; }
.ready :is(.sweep, .srow, .rc a.rc-title, .aud a.cell, .card-post, .filter a.cell, .pager a.cell, .subnav a.cell, a.cell.more, .srg-form button) { transition: color .3s ease .06s, background-color .45s ease; }
:is(.sweep, .srow, .rc a.rc-title, .aud a.cell, .card-post, .filter a.cell:not(.on), .pager a.cell:not(.on), .subnav a.cell:not(.on), a.cell.more, .srg-form button):is(:hover, :focus-visible) { color: var(--on-gold); }
:is(.srow, .aud a.cell, .card-post, a.cell.more):is(:hover, :focus-visible) :is(.go, .t-p, .dim, .mono) { color: var(--on-gold); opacity: 1; }
.srg-form button { position: relative; isolation: isolate; }
/* tall cards: the text at the foot changes colour as the gold reaches it (on the way in and on the way out),
   so it never sits dark on dark while the sweep is still travelling down the card */
.ready :is(.aud a.cell .foot, .card-post .cp-foot, .author a.more .go) :is(*, .go) { transition: color .25s ease .45s, opacity .25s ease .45s, transform .4s var(--ease); }

/* vertical roll: every letter is the front face of a small cube; on hover the cube turns over
   (top edge away from you) and the copy on its lower face comes round to the front, letter by letter */
.roll { display: inline-flex; perspective: 600px; --rh: 1.34em; }
.roll .ch { display: inline-block; position: relative; white-space: pre; transform-style: preserve-3d;
            transform-origin: 50% 50% calc(var(--rh) / -2); transition: transform .95s var(--ease) calc(var(--i) * 34ms); }
.roll .ch::after { content: attr(data-c); position: absolute; left: 0; top: 0;
                   transform-origin: 50% 50% calc(var(--rh) / -2); transform: rotateX(-90deg); }
:is(a, button):is(:hover, :focus-visible) .roll .ch { transform: rotateX(90deg); }
/* only the face at the front is ever drawn: the one waiting underneath appears as it turns in, and the one that
   turned away disappears once it has gone over, so neither leaves a sliver above or below the line (Dom, 15 Oct) */
.roll .ch { transition: transform .95s var(--ease) calc(var(--i) * 34ms), -webkit-text-fill-color 0s; }
.roll .ch::after { -webkit-text-fill-color: currentColor; opacity: 0; transition: opacity 0s linear calc(.95s + var(--i) * 34ms); }
:is(a, button):is(:hover, :focus-visible) .roll .ch { -webkit-text-fill-color: transparent;
  transition: transform .95s var(--ease) calc(var(--i) * 34ms), -webkit-text-fill-color 0s linear calc(.95s + var(--i) * 34ms); }
:is(a, button):is(:hover, :focus-visible) .roll .ch::after { opacity: 1; transition-delay: 0s; }

/* typed section labels: a terminal line 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; }
@keyframes blink { 50% { opacity: 0; } }

/* 00 · header */
.header { grid-template-columns: 92px 1fr auto 25%; 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; }
.header nav.cell { padding: 0 24px; gap: 24px; font-size: 14px; letter-spacing: -0.02em; white-space: nowrap; }
.header .contact { justify-content: space-between; padding: 0 24px; }

/* 01 · hero: the wordmark is cropped by its cell, and the cell is a window: as the page scrolls the word
   slides up through it (1.9× scroll speed), revealing "Risk" and "Group". A literally fixed word would empty the window. */
.hero { grid-template-rows: 600px 360px; --hero-h: 960px; }
/* v2: the hero pins once its bottom edge meets the viewport, and the band slides up over its lower row */
.pin-hero > .hero { position: sticky; top: min(var(--hh), calc(100vh - var(--hero-h))); z-index: 0; }
.a1 { grid-column: 1 / 3; }
.a1 .wm { position: absolute; left: 24px; top: 282.6px; 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: 18px; }
.b3 p { margin: 0; max-width: 312px; }
.cta-block { display: flex; align-items: flex-end; justify-content: space-between; }

/* band below the hero (uppercase band; blurred gold word is homepage only) */
.band { height: 360px; display: flex; align-items: center; justify-content: space-between; padding: 0 calc(51 * var(--s)) 0 calc(48 * var(--s));
        font-size: calc(122 * var(--s)); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; box-shadow: var(--rules);
        position: relative; z-index: 2; background: var(--bg); }
/* v2: BLURS. lands sharp, then blurs as the band scrolls on up the page (scripted; 6px is the Figma value) */
.band .blur { color: var(--gold); filter: blur(0); will-change: filter; }

/* 02 · about */
.about { height: 960px; }
.about .text { grid-column: 3 / 5; }
/* v2: the label and the twin illustration pin while the text fills in beside them */
.about .label-c .label { position: sticky; top: calc(var(--hh) + 24px); display: flex; width: max-content; }
.about .illo { position: sticky; top: var(--hh); align-self: start; height: min(600px, calc(100vh - var(--hh))); }
.about .lead { margin: 0; font-size: 32px; line-height: 1.45; letter-spacing: -0.02em; max-width: 672px; }
.about .body { margin: 36px 0 0; font-size: 18px; max-width: 480px; }
.about .illo { padding: 0; }
[data-illo] canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* 03 · stats. The three stat blocks start aligned to the top of the section (Dom, 28 Sep; they used to
   start on rows 1, 3 and 5 and assemble the staircase on scroll). They pin under the header together and
   stay as the section scrolls, the Figma staircase (480 / 360 / 240) hanging from one line; the section's
   bottom edge then pushes them off one by one, tallest first. The empty cells below scroll underneath. */
.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 (Dom's reworked layout, Figma 127:573, 28 Sep). One dark panel pins under the header
   while the section scrolls past it: the five steps light one at a time, the lit step's description rises in
   beneath them, and the ring animation along the bottom morphs from one capability into the next (no step
   identifier on it). The section's height is the scroll track: a hold on each step, then a morph to the next. */
.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: repeat(4, 1fr); grid-template-rows: minmax(min-content, 46%) 1fr; }
.mtitle { grid-column: 1 / 3; margin: 0; padding: 24px; font-weight: 400; font-size: clamp(96px, 8.9vw, 128px);   /* 128 at 1440 (Dom, 28 Sep; was 96) */ line-height: 1; letter-spacing: -0.04em; }
.mcopy { grid-column: 3 / 5; padding: 36px 24px 32px 19px; display: flex; flex-direction: column; min-width: 0; }
/* type per Dom's Figma (SRG 28 Sep, 1:7616): the steps get their own 32px line, unlit ones in a dim ink rather
   than faded; intro and description in a softer paper; 62px between intro, steps and description */
.mintro, .msteps, .mdesc { letter-spacing: -0.02em; line-height: 1.55; }
.mintro { margin: 24px 0 0; max-width: 501px; font-size: 18px; color: var(--m-soft); }
.msteps { margin: 62px 0 0; font-size: 32px; }
.msteps span { color: var(--m-dim); transition: color .7s var(--ease); }
.msteps span.on { color: var(--m-ink); }
.mdesc { position: relative; margin-top: 62px; min-height: 80px; font-size: 14px; color: var(--m-soft); }
/* centre divider (Dom, 28 Sep): a 1px rule down the middle of the panel, between the title / ring half and the copy
   half; it replaced the rule under the five steps */
.mpanel::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; background: var(--m-rule); z-index: 2; pointer-events: none; }
.mdesc p { position: absolute; top: 0; left: 0; max-width: 336px; margin: 0; opacity: 0; transition: opacity .35s ease; }
.mdesc p.on { opacity: 1; transition: opacity .5s ease .1s; }
.mcopy .link { align-self: flex-start; margin-top: auto; }
/* the ring animation takes the left half, under the title (Dom, 28 Sep); the copy column keeps the right */
.mstage { grid-column: 1 / 3; position: relative; min-height: 240px; }
/* autoplay progress: five gold segments along the top of the stage, one per step, filled by the playhead */
.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%; }

/* 05 · sectors header and 06 · list */
.sectors-h { height: 360px; }
/* v2: the Sectors header pins and the list slides up 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: 18px; max-width: 312px; }
.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 h4 { margin: 0; font-weight: 400; font-size: 32px; 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:hover .go { opacity: 1; transform: none; }

/* 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); }
/* Hayley's portrait is pinned to its top edge so she is never cropped; its scroll motion is a slow zoom from that edge */
.portrait img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; transform-origin: 50% 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: 32px; line-height: 1.45; letter-spacing: -0.02em; max-width: 640px; }
.quote .who { margin-top: auto; }
.quote .who strong { display: block; font-weight: 400; font-size: 20px; margin-bottom: 8px; }
.creds { grid-column: 4; grid-row: 1; } .fw { grid-column: 4; grid-row: 2; }
/* v2: the gold Credentials block is sticky at the top (under the header) and moves down its column as the
   page scrolls, over the ring window and uncovering the rings behind it, until it meets the section floor. */
.creds { position: sticky; top: var(--hh); align-self: start; height: 300px; z-index: 2; }
.creds .mono + .mono { margin-top: 12px; }
.creds .list-m { margin-top: 32px; }

/* CTA · word tiles over the ring field: "Start a confidential conversation" (Dom, 28 Sep; was "A confidential
   conversation"). Three rows at 140 / 360 / 580, the same 140 margins and 80 gap as the two-row version. */
.cta { height: calc(860 * var(--s)); min-height: 360px; display: block; overflow: hidden; overflow: clip; }
.tile { will-change: transform; }
.tiles { position: relative; display: block; z-index: 1; width: calc(1440 * var(--s)); height: 100%; margin: 0 auto; }
.tile { position: absolute; height: calc(140 * var(--s)); display: flex; align-items: center; padding: 0 calc(19 * var(--s));
        font-size: calc(120 * var(--s)); line-height: 1; letter-spacing: -0.04em; white-space: nowrap; box-shadow: inset 0 0 0 1px var(--rule); }
.t-start { left: calc(48 * var(--s)); top: calc(140 * var(--s)); background: var(--tile-b); color: var(--tile-b-ink); }
.t-a { left: calc(445 * var(--s)); top: calc(140 * var(--s)); background: var(--tile-a); color: var(--tile-a-ink); }
.t-conf { left: calc(170 * var(--s)); top: calc(360 * var(--s)); background: var(--tile-b); color: var(--tile-b-ink); }
.t-conv { left: calc(240 * var(--s)); top: calc(580 * var(--s)); background: var(--tile-a); color: var(--tile-a-ink); }
.t-arrow { left: calc(1162 * var(--s)); top: calc(580 * var(--s)); width: calc(140 * var(--s)); justify-content: center;
           background: var(--gold); color: #0a0d10; box-shadow: none; font-size: calc(96 * var(--s)); }
.t-arrow span { transition: transform .5s var(--ease); }
.cta-link:hover .t-arrow span { transform: translateX(10%); }

/* footer. v2: it waits pinned to the bottom of the viewport, 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: 32px; max-width: 312px; line-height: 1.45; }
.footer nav { display: flex; flex-direction: column; gap: 6px; }
.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 { grid-template-columns: 1fr 1fr; height: 48px; }
.micro .cell { padding: 0 24px; display: flex; align-items: center; }
.micro .cell:last-child { justify-content: flex-end; }

/* light / dark switch: a header cell with the theme it switches to ("Dark" or "Light") and a 2x2 chessboard.
   No gold sweep (Dom, 15 Oct): on hover the word rolls and the board turns a quarter, so its dark squares move
   to the other diagonal, a preview of the switch; switching leaves it turned. */
.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; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr;
                       transition: transform .95s var(--ease-io); }
.theme-toggle .glyph i { box-shadow: inset 0 0 0 1px currentColor; }
.theme-toggle .glyph i:nth-child(1), .theme-toggle .glyph i:nth-child(4) { background: currentColor; }
:root[data-theme="dark"] .theme-toggle .glyph { transform: rotate(90deg); }
.theme-toggle:is(:hover, :focus-visible) .glyph { transform: rotate(90deg); }
:root[data-theme="dark"] .theme-toggle:is(:hover, :focus-visible) .glyph { transform: rotate(180deg); }
.theme-toggle:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }

/* 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: 1fr 1fr; }
  .header { grid-template-columns: 72px 1fr auto auto; }
  .header nav { overflow-x: auto; scrollbar-width: none; }
  .header .contact { gap: 24px; }
  .hero { grid-template-rows: 480px 300px 300px; --hero-h: 1080px; }
  .a1, .a2 { grid-column: 1 / 3; }
  .a2 { display: none; }
  .a1 .wm { position: absolute; top: auto; bottom: -140px; font-size: min(200px, 26vw); }
  .hero { grid-template-rows: 480px 300px 300px; }
  .band { font-size: 8.4vw; padding: 0 24px; height: 240px; }
  .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; }
  .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; }
  .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; }
  .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); }
  .mpanel { grid-template-rows: auto auto 1fr; min-height: 0; }
  .mtitle { grid-column: 1 / 5; font-size: 64px; padding-bottom: 0; }
  .mcopy { grid-column: 1 / 5; padding: 20px 24px 24px; }
  .msteps { margin-top: 32px; font-size: 26px; }
  .mdesc { margin-top: 33px; }
  .mpanel::after { display: none; }   /* one column on narrow screens: no centre rule */
  .mcopy .link { margin-top: 16px; }
  .mstage { grid-column: 1 / 5; min-height: 160px; }
}
@media (max-width: 700px) {
  .sec, .footer, .micro { grid-template-columns: 1fr; }
  .header { grid-template-columns: 64px 1fr auto; }
  .header nav.cell { display: none; }
  .header .contact { grid-column: 2; grid-row: 1; }
  .header .theme-toggle { grid-column: 3; grid-row: 1; }
  .hero { grid-template-rows: 420px 260px 220px 220px; }
  .pin-hero > .hero, .pin-sectors > .sectors-h, footer { position: relative; top: auto; bottom: auto; }
  .about .label-c .label { position: static; }
  .a1 { grid-column: 1; }
  .hero .b1, .hero .b2 { display: none; }
  .band { font-size: 10vw; flex-direction: column; justify-content: center; align-items: flex-start; gap: 8px; height: 280px; }
  .about .text, .about .illo { grid-column: 1; grid-row: auto; }
  .about .illo { min-height: 420px; }
  .about .lead { font-size: 26px; }
  .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; }
  .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; }
  .srow h4 { font-size: 26px; }
  .sectors .intro { grid-column: 1; }
  .quote { grid-column: 1; }
  .quote blockquote { font-size: 24px; }
  .quote .who { margin-top: 48px; }
  .mtitle { font-size: 48px; }
  .mintro { font-size: 16px; }
  .msteps { font-size: 22px; }
  .mdesc { font-size: 14px; min-height: 100px; }
  .cta { height: 388px; min-height: 0; }
  .tiles { width: 100%; }
  .tile { height: 56px; font-size: 44px; padding: 0 10px; }
  .t-start { left: 16px; top: 64px; } .t-a { left: 169px; top: 64px; } .t-conf { left: 16px; top: 132px; }
  .t-conv { left: 16px; top: 200px; } .t-arrow { left: auto; right: 16px; top: 268px; width: 56px; font-size: 36px; }
  .footer .cell { min-height: 0; }
  .micro { height: auto; }
  .micro .cell { height: 48px; }
  .micro .cell:last-child { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .label i { animation: none; }
  .msteps span, .mdesc p, .ar, .t-arrow span, .fword, .rise .w > span, .art-side .toc a::before,
  :is(.sweep, .srow, .rc a.rc-title, .aud a.cell, .card-post, .filter a.cell, .pager a.cell, .subnav a.cell, a.cell.more, .srg-form button)::before { transition: none; }
  :is(a, button):is(:hover, :focus-visible) .roll .ch { transform: none; }
  :is(a, button):is(:hover, :focus-visible) .roll .ch { -webkit-text-fill-color: currentColor; }
  :is(a, button):is(:hover, :focus-visible) .roll .ch::after { opacity: 0; }
  .pin-sectors > .sectors-h { position: relative; top: auto; }  /* its word is only pushed clear by the scroll script */
  .loader svg { animation: none; }
  .theme-toggle .glyph { transition: none; }
  .loader { transition: opacity .3s ease; }
  .loader.out { clip-path: none; opacity: 0; }
}