/* Speed, cockpit — Speed, clean inside a cockpit outline: one hairline stroke, same colours.
   The outline is drawn by hero.js on the scene canvas, so it wipes with everything else. */

@font-face { font-family: "Inter Tight"; src: url("./assets/fonts/inter-tight-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/fonts/JetBrainsMono-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/fonts/JetBrainsMono-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: block; }
@font-face { font-family: "JetBrains Mono"; src: url("./assets/fonts/JetBrainsMono-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: block; }

:root {
  /* the module: everything is a multiple of this */
  --u: min(calc(100vw / 160), calc(100vh / 88));
  --cols: 148;

  /* off: the flat silver-grey of a VHS box, near-black ink. No colour at all. */
  --ground: #bcbfc1;
  --ink: #141414;
  --ink-rgb: 20, 20, 20;
  --paper: #f3f0e2;

  --rule: rgba(var(--ink-rgb), .32);
  --mute: rgba(var(--ink-rgb), .66);
  --pill: #141414;
}
/* on: the whole page cuts to brand green, dark green ink, and one acid accent */
:root[data-state="on"] { --ground: #6aaa58; }

/* the page exists twice, once in each set of colours; hero.js wipes between them from the horizon */
.hero__frame.layer { position: absolute; z-index: 2; top: 0; left: 50%; transform: translateX(-50%); pointer-events: none; }
.layer--off {
  --ground: #bcbfc1; --ink: #141414; --ink-rgb: 20, 20, 20; --pill: #141414;
  --rule: rgba(20, 20, 20, .32); --mute: rgba(20, 20, 20, .66);
  --thumb: #141414; --word: #141414;
}
.layer--on {
  --ground: #6aaa58; --ink: #0d2411; --ink-rgb: 13, 36, 17; --pill: #0d2411;
  --rule: rgba(13, 36, 17, .32); --mute: rgba(13, 36, 17, .66);
  --acid: #e2ff00;
  --thumb: var(--acid); --word: var(--acid);
}
/* the original stays on top, invisible: it carries the semantics, the focus and the clicks */
.hero__frame.layer--real { z-index: 3; opacity: 0; }
.is-focus { outline: 2px solid currentColor; outline-offset: calc(var(--u) * .8); }

@media (max-width: 767px) {
  :root { --u: calc(100vw / 64); --cols: 56; }
}

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

html, body { margin: 0; background: var(--ground); }
body {
  font-family: "JetBrains Mono", ui-monospace, Menlo, monospace;
  font-weight: 500;
  color: var(--ink);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
  font-variant-ligatures: none;
}
a { color: inherit; text-decoration: none; }
p { margin: 0; }

/* ---------------------------------------------------------------- hero */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  overflow: hidden;
  background: var(--ground);
  isolation: isolate;
}
.hero__scene { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
.hero__unit { position: absolute; left: 0; top: 0; width: calc(var(--u) * 100); height: 1px; pointer-events: none; visibility: hidden; }

.hero__frame {
  position: relative;
  width: calc(var(--u) * var(--cols));
  margin: 0 auto;
  display: flex; flex-direction: column;
}
/* the first screen: header, headline, the scene, and the instruments along its bottom edge */
.first {
  /* the dash runs a little below the fold, so the terrain keeps its room in the windscreen */
  min-height: calc(100vh + var(--u) * 6);
  min-height: calc(100svh + var(--u) * 6);
  display: flex; flex-direction: column;
  padding: calc(var(--u) * 2.2) 0 calc(var(--u) * 2.8);
}

/* ---------------------------------------------------------------- top row */

.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: calc(var(--u) * 3);
}

.eyebrow {
  font-size: calc(var(--u) * 1.4);
  line-height: 1;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.eyebrow--b { text-align: right; }

.pill {
  display: flex; align-items: center;
  gap: calc(var(--u) * 3.2);
  height: calc(var(--u) * 5);
  padding: 0 calc(var(--u) * 2.6);
  border-radius: calc(var(--u) * 2.5);
  background: var(--pill);
  color: #f3f0e2;
  font-size: calc(var(--u) * 1.4);
  line-height: 1;
  white-space: nowrap;
}
.pill__lockup { font-weight: 700; }
.pill__x { font-weight: 400; opacity: .6; margin: 0 .15em; }
.pill__nav { display: flex; gap: calc(var(--u) * 2.4); }
.pill__nav a { color: rgba(243, 240, 226, .66); transition: color .15s ease; }
.pill__nav a:hover, .pill__nav a:focus-visible { color: #f3f0e2; }

/* ---------------------------------------------------------------- headline */

.headline {
  margin: calc(var(--u) * 4.2) 0 0;
  padding: 0 calc(var(--u) * 7);           /* clear of the windscreen's slanted sides */
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  color: var(--ink);
  white-space: nowrap;
}
.headline span { display: block; width: max-content; letter-spacing: -.032em; }
/* sizes here are first guesses; hero.js fits each line to the measure exactly */
.headline__a { font-size: calc(var(--u) * 33); line-height: .78; margin-left: -.035em; color: var(--word); }
.headline__b { font-size: calc(var(--u) * 16.4); line-height: .8; margin-top: calc(var(--u) * 2.4); margin-left: -.02em; letter-spacing: -.026em; word-spacing: .05em; }

.horizon { display: block; height: 0; margin-top: calc(var(--u) * 3.8); }

.gap { flex: 1 1 auto; min-height: calc(var(--u) * 6); }

/* ---------------------------------------------------------------- instruments, then the words */

.instruments {
  /* the dash is drawn on the scene canvas; this reserves its height and holds the switch's hit area */
  position: relative;
  height: calc(var(--u) * 24);
}

.lower { position: relative; padding-bottom: calc(var(--u) * 2.6); border-top: 1px solid var(--rule); }

.readout { position: relative; height: calc(var(--u) * 14.5); max-width: calc(var(--u) * 50); }
.readout__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* the one control: a lever drawn in the dash (hero.js). The button is its hit area, laid over the channel. */
.switch {
  appearance: none; -webkit-appearance: none;
  position: absolute; left: 0; top: 0; width: 0; height: 0;
  padding: 0; margin: 0; border: 0; background: none;
  border-radius: calc(var(--u) * 2);
  cursor: inherit; touch-action: none; -webkit-tap-highlight-color: transparent;
}
.switch > * { display: none; }

.switch:focus { outline: none; }
.switch:focus-visible, .cta:focus-visible, .pill a:focus-visible {
  outline: 2px solid currentColor; outline-offset: calc(var(--u) * .8);
}

/* the words */
.brief {
  display: grid; grid-template-columns: 1fr auto; align-items: end;
  column-gap: calc(var(--u) * 10);
  padding-top: calc(var(--u) * 5);
}
.brief__text {
  max-width: calc(var(--u) * 92);
  font-family: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
  font-size: calc(var(--u) * 2.9);
  line-height: 1.24;
  font-weight: 500;
  letter-spacing: -.012em;
  color: var(--ink);
  text-wrap: pretty;
}
.cta {
  display: inline-flex; align-items: center; gap: calc(var(--u) * 2);
  height: calc(var(--u) * 6.4);
  padding: 0 calc(var(--u) * 3.2);
  border-radius: calc(var(--u) * 3.2);
  background: var(--ink);
  color: var(--ground);
  font-size: calc(var(--u) * 1.6);
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.cta__arrow { display: inline-block; transition: transform .2s ease; }
.cta:hover .cta__arrow { transform: translateY(calc(var(--u) * .4)); }

.foot {
  display: flex; justify-content: space-between;
  margin-top: calc(var(--u) * 7);
  padding-top: calc(var(--u) * 1.5);
  border-top: 1px solid var(--rule);
  font-size: calc(var(--u) * 1.3); line-height: 1; letter-spacing: .02em;
  color: var(--mute);
}

/* ---------------------------------------------------------------- phone */

@media (max-width: 767px) {
  .first { padding: calc(var(--u) * 2.8) 0 calc(var(--u) * 4); min-height: calc(100svh + var(--u) * 5); }

  .top { grid-template-columns: 1fr 1fr; grid-template-rows: auto auto; height: auto; row-gap: calc(var(--u) * 3.6); column-gap: 0; }
  .top .pill { margin-top: 0; }
  .pill { grid-row: 2; grid-column: 1 / -1; justify-self: center; height: calc(var(--u) * 7.6); padding: 0 calc(var(--u) * 4); border-radius: calc(var(--u) * 3.8); font-size: calc(var(--u) * 2.15); }
  .pill__nav { display: none; }
  .eyebrow { font-size: calc(var(--u) * 1.75); letter-spacing: .06em; }
  .eyebrow--a { grid-row: 1; grid-column: 1; }
  .eyebrow--b { grid-row: 1; grid-column: 2; }

  .headline { margin-top: calc(var(--u) * 4.6); padding: 0 calc(var(--u) * 2.4); }
  .headline__a { font-size: calc(var(--u) * 12.5); }
  .headline__b { font-size: calc(var(--u) * 6.2); margin-top: calc(var(--u) * 1.2); }
  .horizon { margin-top: calc(var(--u) * 3.4); }

  .gap { min-height: calc(var(--u) * 30); }

  .lower { padding-bottom: calc(var(--u) * 5); }

  .instruments { height: calc(var(--u) * 20); }



  .brief { grid-template-columns: 1fr; row-gap: calc(var(--u) * 5); padding-top: calc(var(--u) * 6); }
  .brief__text { font-size: calc(var(--u) * 3.5); line-height: 1.26; max-width: none; }
  .cta { height: calc(var(--u) * 9); border-radius: calc(var(--u) * 4.5); justify-content: space-between; padding: 0 calc(var(--u) * 4.4); font-size: calc(var(--u) * 2.3); }

  .foot { flex-direction: column; gap: calc(var(--u) * 1.6); margin-top: calc(var(--u) * 7); padding-top: calc(var(--u) * 2.4); font-size: calc(var(--u) * 1.75); line-height: 1.3; }
}

/* ---------------------------------------------------------------- cursor
   Over the hero the pointer is a plain ring: a click anywhere throws the switch.
   It fills acid when the partnership is on. Links keep the ordinary pointer. */
@media (hover: hover) and (pointer: fine) {
  .hero { cursor: none; }
  .hero a, .hero .pill { cursor: pointer; }
}
.cursor {
  position: absolute; left: 0; top: 0; z-index: 10;
  pointer-events: none;
  opacity: 0; transition: opacity .15s ease;
  --r: calc(var(--u) * 1.3);
}
.cursor.is-live { opacity: 1; }
.cursor.is-hidden { opacity: 0; }
.cursor__ring {
  position: absolute; left: calc(var(--r) * -1); top: calc(var(--r) * -1);
  width: calc(var(--r) * 2); height: calc(var(--r) * 2);
  border: max(1.5px, calc(var(--u) * .2)) solid var(--ink);
  border-radius: 50%;
  transition: transform .18s cubic-bezier(.3, 1.6, .5, 1), background-color .15s ease;
}

:root[data-state="on"] .cursor__ring { background: #e2ff00; }
.cursor.is-press .cursor__ring { animation: press .32s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes press { 0% { transform: scale(.55); } 100% { transform: scale(1); } }
.cursor__label { display: none; }


/* ================================================================ tilt transition (this copy only)
   The hero is a fixed first screen. Scrolling out of it plays a short move: the scene's nose drops,
   the windscreen grows past the screen, and the page (grid paper and a route line, plain CSS) swings
   down from a matching angle. The two are swapped mid-move. */

:root { --g: calc(var(--u) * 6); --green: #6aaa58; --ink-d: #0d2411; --acid: #e2ff00; }
@media (max-width: 767px) { :root { --g: calc(var(--u) * 4); } }

html.is-hero, html.is-moving { overflow: hidden; }
html, body { background: var(--green); }

.hero { position: fixed; inset: 0; z-index: 5; height: 100vh; height: 100svh; min-height: 0; }
.hero.is-gone { visibility: hidden; pointer-events: none; }
.hero__scene { height: 100%; }

/* leaving: the headline lifts away with the horizon */
.headline { transform: translateY(calc(var(--tilt, 0) * -42vh)); opacity: calc(1 - var(--tilt, 0) * 2.6); }
.eyebrow { opacity: calc(1 - var(--tilt, 0) * 3); }

/* the nav pill stays where it is through the move: this copy sits under the hero's, in the same place */
.bar { position: fixed; left: 0; right: 0; top: 0; z-index: 4; pointer-events: none; }
.bar .top { width: calc(var(--u) * var(--cols)); margin: 0 auto; padding-top: calc(var(--u) * 2.2); }
.bar .eyebrow { visibility: hidden; }
.bar .pill { pointer-events: auto; background: #0d2411; }
@media (max-width: 767px) { .bar .top { padding-top: calc(var(--u) * 2.8); } }

.stage { position: relative; z-index: 1; }
.page {
  position: relative; min-height: 100vh;   /* not clipped: the paper and road run on above the page for the tipped view */
  color: var(--ink-d);
  --ink: #0d2411;
}
.paper {
  position: absolute; left: 0; right: 0; top: calc(var(--g) * -70); bottom: 0;
  background:
    linear-gradient(to right, rgba(13, 36, 17, .2) 1px, transparent 1px) 0 0 / var(--g) var(--g),
    linear-gradient(to bottom, rgba(13, 36, 17, .2) 1px, transparent 1px) 0 0 / var(--g) var(--g),
    var(--green);
}
.road {
  position: absolute; top: calc(var(--g) * -70); bottom: 0; left: calc(var(--g) * 2); width: var(--g);
  background: var(--ink-d);
}
.road::before {   /* edge lines */
  content: ""; position: absolute; top: 0; bottom: 0; left: 12%; right: 12%;
  border-left: max(1px, calc(var(--g) * .035)) solid var(--green); border-right: max(1px, calc(var(--g) * .035)) solid var(--green);
}
.road::after {    /* centre dashes */
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(2px, calc(var(--g) * .08)); transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, rgba(106, 170, 88, .55) 0 calc(var(--g) * .5), transparent calc(var(--g) * .5) var(--g));
}
/* the travelled part: the same dashes, lit */
.road__done {
  position: absolute; z-index: 1; top: 0; left: 50%; width: max(2px, calc(var(--g) * .08)); transform: translateX(-50%);
  height: calc(var(--g) * 70 + 50vh);
  background: repeating-linear-gradient(to bottom, var(--acid) 0 calc(var(--g) * .5), var(--ink-d) calc(var(--g) * .5) var(--g));
}

/* ---------------------------------------------------------------- the sections
   One column on the G grid. Every size and gap is a multiple of G, so type sits on the paper's lines.
   The road is the spine: each label is a stop on it. */

.page {
  --h2: calc(var(--g) * 1.72); --h2l: calc(var(--g) * 2);
  --h3: calc(var(--g) * .82);  --h3l: var(--g);
  --big: calc(var(--g) * .56); --bigl: calc(var(--g) * .75);
  --txt: calc(var(--g) * .38); --txtl: calc(var(--g) * .5);
  --lab: calc(var(--g) * .26);
  --pad: calc(var(--g) * 4);                 /* content's left edge */
  --spine: calc(var(--g) * 2.5);             /* centre of the road */
  --hair: max(1px, calc(var(--u) * .16));
  --sans: "Inter Tight", "Helvetica Neue", Arial, sans-serif;
}
.content { position: relative; padding: calc(var(--g) * 3) var(--g) calc(var(--g) * 3) var(--pad); }
.content :where(h2, h3, h4, p, ol, ul, li) { margin: 0; padding: 0; list-style: none; }   /* :where, so the spacing rules below win */
.content :is(h2, h3, h4, .body, .big, .lead, strong) { font-family: var(--sans); color: var(--ink-d); }
.block { padding-bottom: calc(var(--g) * 5); scroll-margin-top: calc(var(--u) * 11); }
.block > * + * { margin-top: calc(var(--g) * 2); }
.block > .label + *, .block > .imprint + .aside { margin-top: calc(var(--g) * .5); }
.block > .imprint { margin-top: var(--g); }

.lead { max-width: calc(var(--g) * 15); font-weight: 500; font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; text-wrap: pretty; }
.go {
  display: inline-flex; align-items: center; gap: calc(var(--g) * .3);
  margin-top: var(--g) !important; height: var(--g); padding: 0 calc(var(--g) * .55);
  border-radius: calc(var(--g) * .5); background: var(--ink-d); color: var(--green);
  font-size: calc(var(--g) * .28); font-weight: 700; letter-spacing: .02em;
}

.head > * + * { margin-top: var(--g); }
.content h2 { max-width: calc(var(--g) * 19); font-weight: 800; font-size: var(--h2); line-height: var(--h2l); letter-spacing: -.03em; text-wrap: balance; }
.content h3 { max-width: calc(var(--g) * 16); font-weight: 800; font-size: var(--h3); line-height: var(--h3l); letter-spacing: -.022em; }
.content h4 { max-width: calc(var(--g) * 14); font-weight: 700; font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; }
.body { max-width: calc(var(--g) * 12); font-weight: 500; font-size: var(--txt); line-height: var(--txtl); text-wrap: pretty; }
.big { max-width: calc(var(--g) * 15); font-weight: 500; font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; text-wrap: pretty; }
.label { font-size: var(--lab); line-height: calc(var(--g) * .5); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-d); }
.aside { font-size: var(--lab); line-height: calc(var(--g) * .5); letter-spacing: .02em; color: rgba(13, 36, 17, .72); }
.aside + .aside { margin-top: 0; }
.n { font-size: var(--lab); font-weight: 700; letter-spacing: .1em; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.item > * + *, .case > * + *, .note > * + * { margin-top: calc(var(--g) * .5); }
.item > h3 + .body, .case > h4 + .body { margin-top: calc(var(--g) * .5); }
.item--on { padding: var(--g); max-width: calc(var(--g) * 19); box-sizing: border-box; background: var(--ink-d); border-radius: calc(var(--g) * .3); }
.item--on :is(.label, h3, .body) { color: var(--green); }
.item--on h3 { color: var(--acid); }
.note { padding-top: var(--g); border-top: var(--hair) solid var(--ink-d); max-width: calc(var(--g) * 19); }

/* a label and its value, side by side: the one place two columns are allowed */
.pair { display: grid; grid-template-columns: calc(var(--g) * 4) 1fr; column-gap: var(--g); max-width: calc(var(--g) * 16); padding-top: calc(var(--g) * .5); margin-top: calc(var(--g) * .5) !important; border-top: var(--hair) solid rgba(13, 36, 17, .45); }
.pair > :last-child { font-family: var(--sans); font-weight: 600; font-size: var(--txt); line-height: var(--txtl); color: var(--ink-d); }

/* numbered rows on the grid lines */
.rows { max-width: calc(var(--g) * 19); border-bottom: var(--hair) solid var(--ink-d); }
.rows > li { position: relative; padding: var(--g) 0 var(--g) calc(var(--g) * 2); border-top: var(--hair) solid var(--ink-d); }
.rows > li > .n { position: absolute; left: 0; top: var(--g); line-height: var(--h3l); }
.rows > li > * + * { margin-top: calc(var(--g) * .5); }
.rows--plain > li { padding-top: calc(var(--g) * .5); padding-bottom: calc(var(--g) * .5); }
.rows--plain > li > .n { top: calc(var(--g) * .5); }
.rows h3 .label { display: block; font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; font-weight: 500; letter-spacing: .1em; }

.imprint { display: flex; flex-wrap: wrap; gap: 0 var(--g); font-size: var(--lab); line-height: calc(var(--g) * .5); letter-spacing: .1em; text-transform: uppercase; }
.logos { display: block; width: 100%; max-width: calc(var(--g) * 19); height: auto; margin-top: var(--g) !important; filter: brightness(0); opacity: .88; }

.count { display: flex; }
.count .big { max-width: calc(var(--g) * 9); margin: 0; }

/* cases */
.case { padding-top: var(--g); border-top: var(--hair) solid var(--ink-d); max-width: calc(var(--g) * 19); }
.case .label .n { margin-right: .8em; }
.case__name { font-size: var(--h2) !important; line-height: var(--h2l) !important; letter-spacing: -.03em !important; margin-top: 0 !important; }
.case__sub { font-family: var(--sans); font-weight: 500; font-size: var(--big); line-height: var(--bigl); margin-top: 0 !important; }
.case h4 { margin-top: var(--g) !important; }
details { margin-top: var(--g) !important; max-width: calc(var(--g) * 16); border-top: var(--hair) solid rgba(13, 36, 17, .45); }
summary {
  display: flex; justify-content: space-between; align-items: center; height: var(--g); cursor: pointer; list-style: none;
  font-size: var(--lab); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
summary::-webkit-details-marker { display: none; }
summary span { font-size: calc(var(--g) * .5); font-weight: 500; transition: transform .2s ease; }
details[open] summary span { transform: rotate(45deg); }
.details { padding-bottom: calc(var(--g) * .5); }
.details > * + * { margin-top: calc(var(--g) * .5); }
.caveat { max-width: calc(var(--g) * 12); font-size: var(--lab); line-height: calc(var(--g) * .5); letter-spacing: .02em; color: rgba(13, 36, 17, .72); }

.list > li { position: relative; max-width: calc(var(--g) * 12); padding-left: calc(var(--g) * .5); font-family: var(--sans); font-weight: 500; font-size: var(--txt); line-height: var(--txtl); }
.list > li::before { content: ""; position: absolute; left: 0; top: calc(var(--txtl) / 2 - var(--g) * .06); width: calc(var(--g) * .12); height: calc(var(--g) * .12); background: var(--ink-d); }
.item--phase > .label--days + h3 { margin-top: calc(var(--g) * .5); }
.measures { display: flex; flex-wrap: wrap; gap: calc(var(--g) * .25); }
.measures li { display: flex; align-items: center; gap: calc(var(--g) * .25); height: calc(var(--g) * .75); padding: 0 calc(var(--g) * .35); border: var(--hair) solid var(--ink-d); border-radius: calc(var(--g) * .375); font-family: var(--sans); font-weight: 600; font-size: var(--txt); }
.measures li::before { content: ""; width: calc(var(--g) * .22); height: calc(var(--g) * .22); border-radius: 50%; background: var(--acid); border: var(--hair) solid var(--ink-d); }

.end { padding-top: var(--g); border-top: var(--hair) solid var(--ink-d); max-width: calc(var(--g) * 19); }
.end > * + * { margin-top: calc(var(--g) * .5); }
.wordmark { font-family: var(--sans); font-weight: 800; font-size: var(--h3); line-height: var(--h3l); letter-spacing: -.022em; }
.end__actions { display: flex; gap: var(--g); margin-top: var(--g) !important; }
.end__actions :is(a, button) { appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--ink-d); font: inherit; font-size: var(--lab); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; line-height: calc(var(--g) * .5); border-bottom: var(--hair) solid var(--ink-d); }

@media (max-width: 767px) {
  .road { left: calc(var(--g) * .5); }
  .page {
    --h2: calc(var(--g) * 1.5); --h2l: calc(var(--g) * 1.75);
    --h3: calc(var(--g) * 1.05); --h3l: calc(var(--g) * 1.25);
    --big: calc(var(--g) * .8); --bigl: var(--g);
    --txt: calc(var(--g) * .68); --txtl: var(--g);
    --lab: calc(var(--g) * .48);
    --pad: calc(var(--g) * 2.25); --spine: var(--g);
  }
  .content { padding: calc(var(--g) * 5) calc(var(--g) * .75) calc(var(--g) * 3) var(--pad); }
  .block { padding-bottom: calc(var(--g) * 4); }
  .label, .aside, .caveat, .imprint { line-height: var(--g); }
  .go { height: calc(var(--g) * 2); border-radius: var(--g); padding: 0 var(--g); font-size: calc(var(--g) * .6); }
  .pair { grid-template-columns: 1fr; row-gap: 0; }
  .item--on { padding: calc(var(--g) * .75); }
  .count { flex-direction: column; align-items: flex-start; gap: var(--g); }
  .measures li { height: calc(var(--g) * 1.5); border-radius: calc(var(--g) * .75); padding: 0 calc(var(--g) * .6); }
  summary { height: calc(var(--g) * 2); }
}

@media print {
  .hero, .bar, .road { display: none !important; }
  html, body { overflow: visible !important; }
  .content { opacity: 1 !important; transform: none !important; }
}

.rows + .note { border-top: 0; padding-top: 0; }

/* ================================================================ second pass
   On the grid: tilt.js nudges every block down to the next grid line, so rules and panels sit on the paper's lines.
   Nothing sits on the road. One band opens each section. Acid marks what is live. */

.block { padding-bottom: calc(var(--g) * 6); }
.block:last-of-type { padding-bottom: calc(var(--g) * 4); }

/* a section opens with one acid band across the measure */
.band {
  display: block; height: var(--g); line-height: var(--g); padding: 0 calc(var(--g) * .4);
  max-width: calc(var(--g) * 19); box-sizing: border-box;
  background: var(--acid); color: #0d2411;
  font-size: var(--lab); font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.go { background: var(--acid); color: #0d2411; }

/* rows without their numbers */
.rows > li { padding-left: 0; }
.note--acid { padding: var(--g); border-top: 0; background: var(--acid); box-sizing: border-box; }
.note--acid :is(.label, .big) { color: #0d2411; }

/* ---------------------------------------------------------------- seven-segment digit (the dash's) */
.digit { --s: var(--g); --t: calc(var(--s) * .2); position: relative; display: inline-block; flex: none; width: calc(var(--s) * 1.1); height: calc(var(--s) * 2); transform: skewX(-6deg); }
.digit i { position: absolute; background: var(--lit, #e2ff00); transition: opacity .08s linear; }
.digit .a, .digit .d, .digit .g { left: calc(var(--t) * .7); right: calc(var(--t) * .7); height: var(--t); }
.digit .a { top: 0; } .digit .d { bottom: 0; } .digit .g { top: calc(50% - var(--t) / 2); }
.digit .b, .digit .c, .digit .e, .digit .f { width: var(--t); height: calc(50% - var(--t) * 1.2); }
.digit .f, .digit .b { top: calc(var(--t) * .55); } .digit .e, .digit .c { bottom: calc(var(--t) * .55); }
.digit .f, .digit .e { left: 0; } .digit .b, .digit .c { right: 0; }
.digit[data-d="0"] .g,
.digit[data-d="1"] :is(.a, .d, .e, .f, .g),
.digit[data-d="2"] :is(.c, .f),
.digit[data-d="3"] :is(.e, .f),
.digit[data-d="4"] :is(.a, .d, .e),
.digit[data-d="5"] :is(.b, .e),
.digit[data-d="6"] .b,
.digit[data-d="7"] :is(.d, .e, .f, .g),
.digit[data-d="9"] .e,
.digit[data-d=""] i { opacity: .13; }

/* ---------------------------------------------------------------- the team count: an eight-speed gate */
.count { align-items: stretch; gap: var(--g); }
.count .big { align-self: center; }
.gate { position: relative; flex: none; display: block; width: calc(var(--g) * 9); height: calc(var(--g) * 5); background: #0d2411; border-radius: calc(var(--g) * .35); }
.gate svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.gate .slot { fill: none; stroke: rgba(106, 170, 88, .5); stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
.gate .num { font: 700 5.4px "JetBrains Mono", ui-monospace, Menlo, monospace; fill: rgba(106, 170, 88, .75); text-anchor: middle; transition: fill .12s linear; }
.gate .num.is-lit { fill: var(--acid); }
.gate .knob { fill: var(--acid); stroke: #0d2411; stroke-width: 1.2; }

/* ---------------------------------------------------------------- 03: the shift
   A pinned screen. In grey, the four steps click up through the gears and the road gives out in dots.
   Then the partnership comes on: the same wipe as the hero, and the road runs on. */
.shift { position: relative; height: 450vh; margin-left: calc(var(--pad) * -1); margin-right: calc(var(--g) * -1); }
.shift__stage { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.shift__layer {
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, var(--line) 1px, transparent 1px) 0 0 / var(--g) var(--g),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px) 0 0 / var(--g) var(--g),
    var(--green);
  --line: rgba(13, 36, 17, .2);
}
.shift__layer--off { --green: #bcbfc1; --ink-d: #141414; --line: rgba(20, 20, 20, .16); --lit: #bcbfc1; }
.shift__layer--on { clip-path: inset(50% 0); transition: clip-path .3s cubic-bezier(.3, 0, .2, 1); --lit: var(--acid); }
.shift.is-on .shift__layer--on { clip-path: inset(0 0); }
.shift__edge { position: absolute; left: 0; right: 0; top: 50%; height: max(2px, calc(var(--u) * .28)); margin-top: calc(max(2px, calc(var(--u) * .28)) / -2); background: var(--acid); opacity: 0; }
.shift.is-on .shift__edge { animation: edge .3s cubic-bezier(.3, 0, .2, 1) both; }
.shift.is-on .shift__edge--b { animation-name: edge-b; }
@keyframes edge { 0% { opacity: 1; transform: translateY(0); } 99% { opacity: 1; } 100% { opacity: 0; transform: translateY(-50vh); } }
@keyframes edge-b { 0% { opacity: 1; transform: translateY(0); } 99% { opacity: 1; } 100% { opacity: 0; transform: translateY(50vh); } }

.shift__road { position: absolute; top: 0; bottom: 0; left: calc(var(--g) * 2); width: var(--g); background: var(--ink-d); }
.shift__road::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: max(2px, calc(var(--g) * .08)); transform: translateX(-50%); background: repeating-linear-gradient(to bottom, var(--lit) 0 calc(var(--g) * .5), transparent calc(var(--g) * .5) var(--g)); }
/* in grey the road gives out: solid, then three bands of shrinking dots, then nothing */
.shift__layer--off .shift__road {
  --p: calc(var(--g) / 5);
  bottom: auto; height: 78%;
  background:
    linear-gradient(var(--ink-d), var(--ink-d)) 0 0 / 100% 55% no-repeat,
    radial-gradient(circle, var(--ink-d) 46%, transparent 49%) 0 55% / var(--p) var(--p),
    transparent;
  -webkit-mask-image: linear-gradient(to bottom, #000 0 55%, rgba(0,0,0,.95) 55% 70%, rgba(0,0,0,.6) 70% 85%, rgba(0,0,0,.28) 85% 100%);
          mask-image: linear-gradient(to bottom, #000 0 55%, rgba(0,0,0,.95) 55% 70%, rgba(0,0,0,.6) 70% 85%, rgba(0,0,0,.28) 85% 100%);
}
.shift__layer--off .shift__road::after { bottom: 45%; }

.shift__inner { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--g); padding: calc(var(--g) * 2) var(--g) var(--g) var(--pad); }   /* the cluster sits in the same cells in both layers */
.cluster { display: flex; align-items: center; gap: var(--g); width: calc(var(--g) * 9); height: calc(var(--g) * 4); padding: 0 var(--g); box-sizing: border-box; background: var(--ink-d); border-radius: calc(var(--g) * .35); flex: none; }
.digit--gear { --s: calc(var(--g) * 1.1); }
.ramp { flex: 1; align-self: stretch; display: flex; align-items: flex-end; gap: calc(var(--g) * .09); padding: calc(var(--g) * .8) 0; }
.ramp i { flex: 1; background: var(--lit); opacity: .14; transition: opacity .1s linear; }
.ramp i:nth-child(1) { height: 16%; } .ramp i:nth-child(2) { height: 21%; } .ramp i:nth-child(3) { height: 27%; } .ramp i:nth-child(4) { height: 32%; }
.ramp i:nth-child(5) { height: 38%; } .ramp i:nth-child(6) { height: 43%; } .ramp i:nth-child(7) { height: 49%; } .ramp i:nth-child(8) { height: 54%; }
.ramp i:nth-child(9) { height: 60%; } .ramp i:nth-child(10) { height: 66%; } .ramp i:nth-child(11) { height: 71%; } .ramp i:nth-child(12) { height: 77%; }
.ramp i:nth-child(13) { height: 83%; } .ramp i:nth-child(14) { height: 88%; } .ramp i:nth-child(15) { height: 94%; } .ramp i:nth-child(16) { height: 100%; }
.ramp i.is-lit, .ramp--full i { opacity: 1; }
.lamp { flex: none; width: calc(var(--g) * 1.1); height: calc(var(--g) * 1.1); border-radius: 50%; background: var(--acid); box-shadow: 0 0 0 calc(var(--g) * .12) #0d2411, 0 0 0 calc(var(--g) * .2) var(--acid); }

.shift__steps { display: grid; }
.shift__steps > li { grid-area: 1 / 1; opacity: 0; transform: translateY(var(--g)); transition: opacity .18s ease, transform .3s cubic-bezier(.2, .8, .2, 1); pointer-events: none; }
.shift__steps > li.is-active { opacity: 1; transform: none; pointer-events: auto; }
.shift__steps > li.is-past { transform: translateY(calc(var(--g) * -1)); }
.shift__steps > li > * + *, .shift__text > * + * { margin-top: calc(var(--g) * .5); }
.shift__steps h3, .shift__text h3 { font-size: var(--h2); line-height: var(--h2l); letter-spacing: -.03em; max-width: calc(var(--g) * 19); }
.shift__steps .body, .shift__text .body { font-size: var(--big); line-height: var(--bigl); max-width: calc(var(--g) * 15); }

/* ---------------------------------------------------------------- 05: six exits off the route */
.jobs { max-width: calc(var(--g) * 19); }
.jobs > li { padding-bottom: var(--g); }
.jobs > li > * + * { margin-top: calc(var(--g) * .5); }
/* each job is a side road leaving the route; the one you are passing is lit */
.exit {
  position: relative; display: flex; align-items: center; min-height: calc(var(--g) * 2); box-sizing: border-box;
  margin-left: calc(var(--g) * -1); padding: 0 calc(var(--g) * .5) 0 var(--g); max-width: none !important;
  background: #0d2411; color: var(--green) !important;
  border-radius: 0 calc(var(--g) * .3) calc(var(--g) * .3) 0;
  transition: background-color .2s ease, color .2s ease;
}
.jobs > li.is-active .exit { background: var(--acid); color: #0d2411 !important; }

/* ---------------------------------------------------------------- 06: the trip counter */
.trip { position: relative; display: grid; grid-template-columns: calc(var(--g) * 16) calc(var(--g) * 4); column-gap: var(--g); }
.trip > .item { grid-column: 1; }
.trip > .item + .item { margin-top: calc(var(--g) * 2); }
.odo { grid-column: 2; grid-row: 1 / span 3; align-self: start; position: sticky; top: calc(var(--u) * 12); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--g) * .3); height: calc(var(--g) * 3); background: #0d2411; border-radius: calc(var(--g) * .35); }
.odo__digits { display: flex; gap: calc(var(--g) * .22); }
.odo .digit { --s: calc(var(--g) * .8); }
.odo__unit { font-size: var(--lab); letter-spacing: .1em; text-transform: uppercase; color: var(--acid); line-height: 1; }
.label--days { display: inline-block; padding: 0 calc(var(--g) * .3); background: #0d2411; color: var(--acid); }

@media (max-width: 767px) {
  .page { --pad: calc(var(--g) * 2); }
  .content { padding-right: var(--g); }
  .gate { width: calc(var(--g) * 12); height: calc(var(--g) * 7); }
  .cluster { width: calc(var(--g) * 11); height: calc(var(--g) * 5); padding: 0 calc(var(--g) * .8); gap: calc(var(--g) * .8); }
  .digit--gear { --s: calc(var(--g) * 1.5); }
  .lamp { width: calc(var(--g) * 1.5); height: calc(var(--g) * 1.5); }
  .shift__inner { padding-top: calc(var(--g) * 4); }
  .exit { margin-left: calc(var(--g) * -.5); padding-left: calc(var(--g) * .5); min-height: calc(var(--g) * 3); }
  .trip { grid-template-columns: 1fr; }
  .odo { grid-column: 1; grid-row: auto; position: sticky; top: calc(var(--u) * 13); z-index: 2; justify-self: end; width: calc(var(--g) * 5); height: calc(var(--g) * 3.5); margin-bottom: var(--g); }
  .odo .digit { --s: var(--g); }
}

.road { z-index: 0; }   /* its lit dashes stay under the content */
.content { z-index: 1; }

.shift__text h3 { font-size: calc(var(--h2) * .8); line-height: calc(var(--g) * 1.5); }
@media (max-height: 760px) and (min-width: 768px) { .cluster { height: calc(var(--g) * 3); } }
@media (max-width: 767px) {
  .shift__road { left: calc(var(--g) * .5); }
  .shift__inner { padding-top: calc(var(--g) * 5); }
}

.end { margin-bottom: calc(var(--g) * 2); }
.end { max-width: calc(var(--g) * 19); margin-bottom: 0; }
.block:last-of-type { padding-bottom: calc(var(--g) * 3); }

/* ================================================================ third pass: hierarchy and length
   Three levels, one style each.
     Chapter  the six sections in the nav: acid band + the giant headline.
     Item     a thing inside a chapter: one mid-size heading, always the same.
     Detail   labels, outputs, evidence, caveats: one mono label + body text.
   A hairline separates items. Nothing else gets a rule. */

.block { padding-bottom: calc(var(--g) * 4); }
.block > * + * { margin-top: var(--g); }
.block > .head + * { margin-top: calc(var(--g) * 2); }

/* the introduction is not a chapter: a plain label and a smaller headline */
.head--minor > h2 { font-size: calc(var(--g) * 1.12); line-height: calc(var(--g) * 1.5); letter-spacing: -.026em; max-width: calc(var(--g) * 16); }
.head--minor > * + * { margin-top: calc(var(--g) * .5); }
.block--intro2 { padding-bottom: calc(var(--g) * 3); }

/* items: one heading size everywhere */
.case__name { font-size: var(--h3) !important; line-height: var(--h3l) !important; letter-spacing: -.022em !important; }
.case__sub { font-size: var(--txt); line-height: var(--txtl); }
.body--lead { font-weight: 700; font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; max-width: calc(var(--g) * 14); margin-top: calc(var(--g) * .5) !important; }
.label--days { display: block; padding: 0; background: none; color: var(--ink-d); }

/* rules: items only */
.pair { border-top: 0; padding-top: 0; }
.note { border-top: 0; padding-top: 0; }
.note--acid { padding: var(--g); }
details { border-top: 0; }
.case details { margin-top: calc(var(--g) * .5) !important; border-top: var(--hair) solid rgba(13, 36, 17, .45); }

/* the three opening points and the six capabilities: compact rows */
.rows > li { padding: calc(var(--g) * .5) 0; }
.rows--compact > li { display: grid; grid-template-columns: calc(var(--g) * 7) 1fr; column-gap: var(--g); align-items: baseline; }
.rows--compact > li > * + * { margin-top: 0; }
.rows--compact h3 { font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; font-weight: 700; }

/* ---------------------------------------------------------------- 03: four gears, then the combined opportunity */
.gears { max-width: calc(var(--g) * 19); border-bottom: var(--hair) solid var(--ink-d); }
.gears > li { position: relative; padding: var(--g) 0 var(--g) calc(var(--g) * 3); border-top: var(--hair) solid var(--ink-d); min-height: calc(var(--g) * 2); }
.gears > li > * + * { margin-top: calc(var(--g) * .5); }
.gears > li { isolation: isolate; }
.gears .digit--gear { position: absolute; left: calc(var(--g) * .66); top: calc(var(--g) * 1.38); --s: calc(var(--g) * .62); --lit: var(--acid); }
.gears .digit--gear::before { content: ""; position: absolute; z-index: -1; inset: calc(var(--g) * -.38) calc(var(--g) * -.66); background: #0d2411; border-radius: calc(var(--g) * .25); transform: skewX(6deg); }
.gears .pair { margin-top: calc(var(--g) * .5) !important; }

.item--on { margin-top: calc(var(--g) * 2) !important; }

/* ---------------------------------------------------------------- 05: six exits, one open at a time */
.jobs > li { padding-bottom: calc(var(--g) * .25); }
.jobs details { margin-top: 0 !important; max-width: none; border: 0; }
.jobs summary.exit { height: auto; min-height: calc(var(--g) * 1.5); justify-content: space-between; cursor: pointer; text-transform: none; letter-spacing: 0; }
.jobs summary.exit h3 { color: inherit; font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; font-weight: 700; }
.jobs summary.exit span { font-family: "JetBrains Mono", ui-monospace, Menlo, monospace; }
.jobs details[open] summary.exit, .jobs > li.is-active summary.exit { background: var(--acid); color: #0d2411 !important; }
.exit__body { padding: calc(var(--g) * .5) 0 var(--g); }
.exit__body > .pair { margin-top: calc(var(--g) * .5) !important; }

@media (max-width: 767px) {
  .head--minor > h2 { font-size: calc(var(--g) * 1.2); line-height: calc(var(--g) * 1.5); }
  .rows--compact > li { grid-template-columns: 1fr; }
  .gears > li { padding-left: 0; padding-top: calc(var(--g) * 3.5); }
  .gears .digit--gear { --s: calc(var(--g) * .8); left: calc(var(--g) * .8); top: calc(var(--g) * 1.3); }
  .jobs summary.exit { min-height: calc(var(--g) * 2); }
}
.block > .count + .item, .block > .item + .rows, .block > .trip + .note { margin-top: calc(var(--g) * 2); }
.content .item--on h3 { color: var(--acid); }
.content .item--on :is(.label, .body) { color: var(--green); }

/* ---------------------------------------------------------------- 05 as a table: six jobs, three columns, all of it visible */
.jobs { max-width: calc(var(--g) * 19); border-bottom: var(--hair) solid var(--ink-d); }
.jobs > li { display: grid; grid-template-columns: calc(var(--g) * 5) calc(var(--g) * 7) calc(var(--g) * 7); padding: calc(var(--g) * .5) 0; border-top: var(--hair) solid var(--ink-d); align-items: start; }
.jobs > li > * { margin: 0 !important; padding-right: var(--g); box-sizing: border-box; }
.jobs > li > :last-child { padding-right: 0; }
.jobs h3 { font-size: var(--big); line-height: var(--bigl); letter-spacing: -.012em; font-weight: 800; }
.jobs .cell { font-family: var(--sans); font-weight: 500; font-size: var(--txt); line-height: var(--txtl); color: var(--ink-d); text-wrap: pretty; }
.jobs > li .label { display: none; }                 /* the column heads say it once */
.jobs > li.jobs__head { border-top: 0; padding: 0; background: var(--acid); height: var(--g); align-items: center; }
.jobs > li.jobs__head .label { display: block; padding-left: calc(var(--g) * .4); color: #0d2411; font-weight: 700; line-height: var(--g); }
.jobs > li.jobs__head .label + .label { padding-left: 0; }
@media (max-width: 767px) {
  .jobs > li { grid-template-columns: 1fr; row-gap: calc(var(--g) * .5); padding: var(--g) 0; }
  .jobs > li > * { padding-right: 0; }
  .jobs > li .label { display: block; }
  .jobs h3 .label { display: none; }
  .jobs > li.jobs__head { display: none; }
}

/* a headline that has not arrived yet */
.head > h2.is-waiting { opacity: 0; }
@media print { .head > h2.is-waiting { opacity: 1; } }

/* ================================================================ fourth pass: the hero's parts, below the hero */

/* ---------------------------------------------------------------- panels: a plate with the dash's bold line and a screw
   in each corner. For the page's statements only. */
.panel {
  --pc: #0d2411; --pbg: var(--green); --screw: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='7.4' fill='none' stroke='%230d2411' stroke-width='2.4'/%3E%3Cpath d='M5.8 12.5L14.2 7.5' stroke='%230d2411' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E");
  position: relative; box-sizing: border-box; max-width: calc(var(--g) * 19);
  padding: calc(var(--g) * 1.25) calc(var(--g) * 1.5) var(--g);
  border: max(1.8px, calc(var(--u) * .3)) solid var(--pc); border-top-width: max(1.8px, calc(var(--u) * .3));
  border-radius: calc(var(--g) * .45);
  background:
    var(--screw) left calc(var(--g) * .3) top calc(var(--g) * .3) / calc(var(--g) * .44) calc(var(--g) * .44) no-repeat,
    var(--screw) right calc(var(--g) * .3) top calc(var(--g) * .3) / calc(var(--g) * .44) calc(var(--g) * .44) no-repeat,
    var(--screw) left calc(var(--g) * .3) bottom calc(var(--g) * .3) / calc(var(--g) * .44) calc(var(--g) * .44) no-repeat,
    var(--screw) right calc(var(--g) * .3) bottom calc(var(--g) * .3) / calc(var(--g) * .44) calc(var(--g) * .44) no-repeat,
    var(--pbg);
}
.panel > * { position: relative; }
/* one colourway for every panel: the ground, with ink line, screws and type */
.content .panel :is(.label, .big, .body, h3) { color: #0d2411; }
.block > .panel { margin-top: calc(var(--g) * 2); }

/* ---------------------------------------------------------------- 01: the dash's bar ramp, one per contribution */
.meter { display: flex; align-items: flex-end; gap: calc(var(--g) * .07); width: calc(var(--g) * 8); height: calc(var(--g) * 2); padding: calc(var(--g) * .35) calc(var(--g) * .45); box-sizing: border-box; background: #0d2411; border-radius: calc(var(--g) * .3); box-shadow: 0 calc(var(--g) * .1) 0 rgba(13, 36, 17, .4); }
.meter i { flex: 1; background: var(--acid); opacity: .14; transition: opacity .1s linear; }
.meter i.is-lit { opacity: 1; }
.item > .meter + .label { margin-top: var(--g); }

/* ---------------------------------------------------------------- pines beside the route, and the deer by the logos */
.block { position: relative; }
.grove { position: absolute; left: calc(var(--pad) * -1); top: calc(var(--g) * -1); width: calc(var(--g) * 2); height: calc(var(--g) * 4); pointer-events: none; overflow: visible; }
.fauna { position: absolute; left: calc(var(--g) * 19.3); bottom: calc(var(--g) * 3); width: calc(var(--g) * 2.3); height: calc(var(--g) * 3); margin: 0 !important; pointer-events: none; }
.fauna svg, .grove svg { display: block; width: 100%; height: 100%; overflow: visible; }

/* ---------------------------------------------------------------- 04: the hero's lever opens each case */
summary .tog { position: relative; flex: none; width: calc(var(--g) * 1.3); height: calc(var(--g) * .8); font-size: 0; transform: none !important; }
.tog::before { content: ""; position: absolute; left: 50%; bottom: 0; width: calc(var(--g) * .56); height: calc(var(--g) * .56); margin-left: calc(var(--g) * -.28); box-sizing: border-box; border: max(1.5px, calc(var(--u) * .24)) solid #0d2411; border-radius: 50%; background: radial-gradient(circle, #0d2411 34%, transparent 36%); }
.tog::after {
  content: ""; position: absolute; left: 50%; bottom: calc(var(--g) * .28); width: calc(var(--g) * .4); height: calc(var(--g) * .62); margin-left: calc(var(--g) * -.2);
  background:
    radial-gradient(circle at 50% calc(var(--g) * .2), var(--ball, var(--green)) calc(var(--g) * .12), #0d2411 calc(var(--g) * .13), #0d2411 calc(var(--g) * .19), transparent calc(var(--g) * .2)),
    linear-gradient(#0d2411, #0d2411) 50% 100% / calc(var(--g) * .13) 70% no-repeat;
  transform-origin: 50% 100%; transform: rotate(-52deg); transition: transform .18s cubic-bezier(.3, 1.7, .5, 1);
}
details[open] > summary .tog::after { transform: rotate(52deg); --ball: var(--acid); }

@media (max-width: 767px) {
  .panel { padding: calc(var(--g) * 1.75) var(--g) var(--g); }
  .grove, .fauna { display: none; }
  .meter { width: 100%; height: calc(var(--g) * 3); }
  summary .tog { width: calc(var(--g) * 2); height: calc(var(--g) * 1.4); }
  .tog::before { width: var(--g); height: var(--g); margin-left: calc(var(--g) * -.5); }
  .tog::after { bottom: calc(var(--g) * .5); width: calc(var(--g) * .7); height: calc(var(--g) * 1.05); margin-left: calc(var(--g) * -.35);
    background: radial-gradient(circle at 50% calc(var(--g) * .35), var(--ball, var(--green)) calc(var(--g) * .2), #0d2411 calc(var(--g) * .22), #0d2411 calc(var(--g) * .33), transparent calc(var(--g) * .35)), linear-gradient(#0d2411, #0d2411) 50% 100% / calc(var(--g) * .22) 70% no-repeat; }
}

/* ---------------------------------------------------------------- the client logos, with Wells Fargo leading the row */
.logowall { display: flex; align-items: center; gap: calc(var(--g) * .5); max-width: calc(var(--g) * 19); }
.logowall .logos { flex: 1; min-width: 0; margin: 0 !important; }
/* its red-and-yellow mark, set in the page's one ink: the square goes dark and the lettering takes the ground */
.logos__wf { flex: none; display: block; width: calc(var(--g) * 1.75); height: auto; filter: grayscale(1) contrast(4); mix-blend-mode: multiply; opacity: .88; }
@media (max-width: 767px) { .logos__wf { width: calc(var(--g) * 2); } .logowall { gap: calc(var(--g) * .25); } }