/* goodlocalgov.com: the stylesheet for the four main pages (Home, Services,
   About Us and Vision). It began as the Lab's Drafting Table (W3·V2, the
   announcement round of 2026-10-01) and went live the same day; the pages
   are generated by scripts/site/build_pages.py.

   What survived of the drafting language, and why:

   1. THE PAPER. One major grid in navy at low alpha, no minor grid. The
      drawings sit on it and the copy sits on near-plain paper.
   2. ONE INSTRUMENT ON THE COVER. The parallel rule reveals the drawing and
      one dimension measures it. The footer keeps the one title block, with
      the north arrow and the sheet's own dimension, as the reward for
      reading to the end.
   3. RULED LISTS, NOT BOXES. Rows are ruled top and bottom; the corner-
      ticked frame is the only panel style, used for the contract and the
      form.
   4. EMBER IS THE ACTION. Buttons and inline links only. Labels are ink.
   5. PRECISE MOTION. Headings are ruled in, drawings wipe in once, nothing
      bounces, and under reduced motion everything is simply there. */

:root {
  --ease-draw: var(--glg-ease-draw);
  --ease-set: cubic-bezier(0.3, 0, 0.16, 1);
  --ease-blade: cubic-bezier(0.7, 0, 0.3, 1);

  --gut: clamp(1rem, 5vw, 4.5rem);
  --hdr-h: 5.25rem;
  --board: 12px;

  --line: color-mix(in srgb, var(--glg-navy) 62%, transparent);
  --line-2: color-mix(in srgb, var(--glg-navy) 30%, transparent);
  --grid-major: color-mix(in srgb, var(--glg-navy) 10%, transparent);
  --cell-major: 96px;

  /* The review's A6: the shared muted ink read 4.51:1 on the paper and fell
     under 4.5:1 where a grid line crossed it. This page carries a darker one
     (5.2:1 on paper) without touching the shared tokens. */
  --muted: #56687f;
  --field: var(--line);

  --fig-blend: multiply;
  --fig-filter: none;
}
:root[data-theme="dark"] {
  --line: color-mix(in srgb, var(--glg-navy) 70%, transparent);
  --line-2: color-mix(in srgb, var(--glg-navy) 36%, transparent);
  --grid-major: color-mix(in srgb, var(--glg-navy) 12%, transparent);
  --muted: var(--glg-muted);
  --fig-blend: screen;
  --fig-filter: invert(1) hue-rotate(180deg);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --line: color-mix(in srgb, var(--glg-navy) 70%, transparent);
    --line-2: color-mix(in srgb, var(--glg-navy) 36%, transparent);
    --grid-major: color-mix(in srgb, var(--glg-navy) 12%, transparent);
    --muted: var(--glg-muted);
    --fig-blend: screen;
    --fig-filter: invert(1) hue-rotate(180deg);
  }
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 1rem); }
body {
  margin: 0; color: var(--glg-body);
  font-family: var(--glg-font-body); font-size: 1.0625rem; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip; position: relative;
  background-color: var(--glg-bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: var(--cell-major) var(--cell-major);
}
h1, h2, h3 { font-family: var(--glg-font-display); font-weight: 600; line-height: 1.12; color: var(--glg-ink); }
h2 { font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); letter-spacing: -0.02em; margin: 0 0 1rem; text-wrap: balance; }
h3 { font-size: 1.125rem; margin: 0 0 0.35rem; }
p { margin: 0 0 1rem; }
p, li, h3 { text-wrap: pretty; }
a { color: var(--glg-ember); }
img, svg, video { max-width: 100%; }
.wrap { width: min(74rem, 100%); margin-inline: auto; padding-inline: var(--gut); }
.measure { max-width: 44rem; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip {
  position: absolute; left: 0.75rem; top: -4rem; z-index: 400;
  background: var(--glg-ink); color: var(--glg-bg); padding: 0.7rem 1rem;
  border-radius: 3px; text-decoration: none;
  transition: top var(--glg-dur-fast) var(--ease-set);
}
.skip:focus { top: 1.25rem; }
:focus-visible { outline: 2px solid var(--glg-ember); outline-offset: 3px; border-radius: 2px; }

/* Labels: one mono voice, 12 px at the smallest (the review's B1 and M8). */
.eyebrow, .fine, .tb, .dim-v, .f label, .mail, .foot-end, .steps-line, .fig-n, .tag {
  font-family: var(--glg-font-mono);
}
.eyebrow {
  font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--muted); margin: 0 0 0.7rem;
}
.lead { font-size: clamp(1.0625rem, 1rem + 0.4vw, 1.25rem); color: var(--glg-body); }
.serif { font-family: var(--glg-font-serif); font-style: italic; font-weight: 400; }
.fine { font-size: 0.75rem; color: var(--muted); }

/* ── The board's edge ──────────────────────────────────────────────────── */
.board {
  position: fixed; inset: var(--board); z-index: 305; pointer-events: none;
  border: 1px solid var(--line-2);
}
.board::before, .board::after {
  content: ""; position: absolute; width: 14px; height: 14px;
  border: 0 solid var(--line);
}
.board::before { left: -1px; top: -1px; border-width: 1px 0 0 1px; }
.board::after { right: -1px; bottom: -1px; border-width: 0 1px 1px 0; }

/* ── Buttons and links ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem;
  min-height: 2.75rem; padding: 0.7rem 1.15rem; border-radius: 3px;
  font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9375rem;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background-color var(--glg-dur-fast) var(--ease-set),
              border-color var(--glg-dur-fast) var(--ease-set),
              color var(--glg-dur-fast) var(--ease-set);
}
.btn-primary { background: var(--glg-ember); color: var(--glg-on-action); }
.btn-primary:hover { background: var(--glg-ember-hover); }
.btn-secondary { background: transparent; border-color: var(--glg-navy); color: var(--glg-ink); }
.btn-secondary:hover { background: var(--glg-navy); color: var(--glg-bg); }
.btn-lg { min-height: 3.1rem; padding-inline: 1.4rem; font-size: 1rem; }
.arr { transition: transform var(--glg-dur-base) var(--ease-set); }
.btn:hover .arr, .go:hover .arr, .row-link:hover .arr { transform: translateX(3px); }
/* The one text-link style: display face, ember, an arrow. */
.go {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 2.75rem;
  font-family: var(--glg-font-display); font-weight: 600; text-decoration: none;
}
.go:hover { text-decoration: underline; text-underline-offset: 4px; }

/* ── Header ────────────────────────────────────────────────────────────── */
.hdr {
  position: fixed; inset-inline: 0; top: 0; z-index: 200;
  min-height: var(--hdr-h);
  display: flex; align-items: center; gap: 1.5rem;
  padding-inline: var(--gut); padding-block: calc(var(--board) + 0.5rem) 0.6rem;
  color: var(--glg-ink); background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color 420ms var(--ease-set), border-color 420ms var(--ease-set);
}
.hdr.solid {
  background: color-mix(in srgb, var(--glg-bg) 90%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom-color: var(--line-2);
}
.hdr-logo { display: inline-grid; align-items: center; justify-items: start; flex: none; }
.hdr-logo svg { grid-area: 1 / 1; display: block; width: auto; }
.logo-full { height: 4rem; transform-origin: left center; transition: height 420ms var(--ease-set), opacity 240ms var(--ease-set), transform 420ms var(--ease-set); }
.hdr.solid .logo-full { height: 3.2rem; }
/* Past the cover the stacked logo gives way to the horizontal GLG mark, and
   comes back on the way up (Jordan, 2026-10-01). */
.logo-mark { height: 2.15rem; opacity: 0; transform: translateY(0.5rem) scale(0.92); transform-origin: left center; pointer-events: none;
  transition: opacity 300ms 90ms var(--ease-set), transform 460ms var(--ease-set); }
.lm-letters { fill: #fff; }
.lm-heart { fill: var(--glg-heart); }
.hdr.compact .logo-full { height: 2.15rem; opacity: 0; transform: scale(0.82); }
.hdr.compact .logo-mark { opacity: 1; transform: none; }
/* The banner lights up blue (Jordan, 2026-10-01): past the cover the
   logo's blue tile grows across the whole header, behind the white GLG
   mark, and folds back into the tile on the way up. The script measures the
   tile into --tile-*; the layer is visible only while it is growing,
   spread, or shrinking back. */
.hdr::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #2b4b71;
  clip-path: inset(var(--tile-t, 0px) var(--tile-r, 100%) var(--tile-b, 100%) var(--tile-l, 0px) round 3px);
  opacity: 0;
  transition: clip-path 560ms var(--ease-set), opacity 0ms linear 560ms;
}
.hdr.compact::before { clip-path: inset(0 0 0 0 round 0); opacity: 1; transition: clip-path 560ms var(--ease-set), opacity 0ms; }
.hdr.compact { color: #fff; border-bottom-color: transparent; transition: color 220ms 300ms var(--ease-set), border-color 420ms var(--ease-set); }
/* On the way back the words stay white until the blue has folded past them. */
.hdr:not(.compact) { transition: background-color 420ms var(--ease-set), border-color 420ms var(--ease-set), color 200ms 380ms var(--ease-set); }
.hdr.compact .menu { color: #fff; border-color: rgb(255 255 255 / 0.45); }
.hdr.compact .hdr-cta { box-shadow: 0 0 0 1px rgb(255 255 255 / 0.12); }
.hdr-nav { display: none; gap: 1.6rem; align-items: center; margin-inline-start: auto; }
@media (min-width: 62em) { .hdr-nav { display: flex; } }
.hdr-nav a { font-size: 0.9375rem; color: inherit; text-decoration: none; position: relative; padding-block: 0.7rem; }
.hdr-nav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform var(--glg-dur-base) var(--ease-draw);
}
.hdr-nav a:hover::after, .hdr-nav a[aria-current="page"]::after { transform: scaleX(1); }
.hdr-tools { display: flex; align-items: center; gap: 0.6rem; margin-inline-start: auto; }
@media (min-width: 62em) { .hdr-tools { margin-inline-start: 0; } }
.hdr-cta .cta-short { display: none; }
@media (max-width: 47.99em) {
  .logo-full { height: 3.5rem; }
  .hdr.solid .logo-full { height: 3rem; }
  .logo-mark { height: 1.9rem; }
  .hdr.compact .logo-full { height: 1.9rem; }
  .hdr-cta { padding-inline: 0.85rem; }
  .hdr-cta .cta-long { display: none; }
  .hdr-cta .cta-short { display: inline; }
}
.theme {
  width: 2.75rem; height: 2.75rem; border-radius: 3px; flex: none;
  display: grid; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--line-2);
  transition: border-color var(--glg-dur-fast) var(--ease-set);
}
.theme:hover { border-color: var(--glg-ember); }
.theme-disc {
  width: 1rem; height: 1rem; border-radius: 999px;
  background: linear-gradient(90deg, var(--glg-ink) 50%, transparent 50%);
  border: 1.5px solid var(--glg-ink);
}
.foot .theme { border-color: color-mix(in srgb, var(--glg-on-navy) 40%, transparent); }
.foot .theme-disc { background: linear-gradient(90deg, var(--glg-on-navy) 50%, transparent 50%); border-color: var(--glg-on-navy); }
.menu {
  width: 2.75rem; height: 2.75rem; border-radius: 3px; flex: none;
  display: none; place-items: center; cursor: pointer;
  background: none; border: 1px solid var(--line-2); color: var(--glg-ink);
  transition: border-color var(--glg-dur-fast) var(--ease-set);
}
.menu:hover, .menu[aria-expanded="true"] { border-color: var(--glg-ember); }
.menu-rule { position: relative; display: block; width: 1.1rem; height: 1px; background: currentColor; }
.menu-rule::before, .menu-rule::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--glg-ink);
  transition: transform var(--glg-dur-fast) var(--ease-set);
}
.menu-rule::before { top: -5px; }
.menu-rule::after { top: 5px; }
.menu[aria-expanded="true"] .menu-rule { background: transparent; }
.menu[aria-expanded="true"] .menu-rule::before { transform: translateY(5px) rotate(45deg); }
.menu[aria-expanded="true"] .menu-rule::after { transform: translateY(-5px) rotate(-45deg); }
@media (max-width: 61.99em) { .menu { display: grid; } }
.menu-panel {
  position: fixed; left: 1rem; right: 1rem; top: calc(var(--hdr-h) + 0.4rem); z-index: 210;
  padding: 0.3rem 1.1rem 1.1rem; background: var(--glg-bg); border: 1px solid var(--line-2); border-radius: 3px;
  box-shadow: 0 16px 40px rgba(20, 35, 55, 0.18);
}
.menu-panel[hidden] { display: none; }
.menu-panel nav a, .menu-theme {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; min-height: 2.75rem;
  margin: 0; padding: 0.5rem 0; border-bottom: 1px solid var(--line-2);
  font-size: 1.0625rem; color: var(--glg-ink); text-decoration: none;
}
.menu-theme { font-size: 0.9375rem; color: var(--muted); }
.menu-theme[hidden] { display: none; }
.menu-panel .btn { width: 100%; margin-top: 1rem; }

/* ── Sections ──────────────────────────────────────────────────────────── */
.sheet { position: relative; border-bottom: 1px solid var(--line-2); }
.scene { position: relative; padding-block: clamp(3rem, 7vw, 5rem); }
.split.mid { align-items: center; }
.split { display: grid; gap: 2.5rem; align-items: start; }
@media (min-width: 60em) {
  .split { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 4.5rem; }
  .split.rev > :first-child { order: 2; }
}

/* ── Reveals ───────────────────────────────────────────────────────────── */
html.js .reveal { opacity: 0; }
html.js .reveal.in { opacity: 1; transition: opacity 480ms var(--ease-draw); transition-delay: calc(var(--i, 0) * 60ms); }
html.js .reveal.wipe { opacity: 1; }
.wipe-in { display: block; }
html.js .reveal.wipe .wipe-in { clip-path: inset(0 100% 0 0); }
html.js .reveal.wipe.in .wipe-in { clip-path: inset(0 0 0 0); transition: clip-path 760ms var(--ease-draw); }
html.js .reveal.now { transition: none !important; }

/* ── Cover ─────────────────────────────────────────────────────────────── */
/* The drawing multiplies onto the grid, so the cover takes no isolation. */
.hero { min-height: 100svh; overflow: hidden; display: flex; flex-direction: column; }
.hero-in { position: relative; z-index: 3; padding-block: calc(var(--hdr-h) + 3.5rem) 3rem; flex: 1; pointer-events: none; }
.title-card { pointer-events: auto; max-width: 33rem; }
@media (min-width: 60em) { .title-card { max-width: 37rem; } }
.hero h1 {
  font-size: clamp(1.95rem, 1rem + 3.2vw, 3.4rem);
  letter-spacing: -0.03em; color: var(--glg-ink); margin: 0 0 1.3rem;
}
.hero h1 .line { display: block; }
.hero h1 .hl { color: var(--glg-ember); }
.for-narrow { display: none; }
.hero-lead { max-width: 32rem; color: var(--glg-ink); margin-bottom: 1.6rem; }
.ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.25rem; }
.cost { margin: 0; font-family: var(--glg-font-mono); font-size: 0.8125rem; letter-spacing: 0.02em; color: var(--muted); }

/* The stage: the drawing (or the film), the parallel rule and the one
   dimension, in one box sitting inside the board's right rule. */
.hero-stage {
  position: absolute;
  right: calc(var(--board) + 1.25rem); bottom: 6.5rem; width: min(80vw, 96rem);
  aspect-ratio: 2000 / 1131;
}
.fig.hero-art { position: absolute; inset: 0; margin: 0; }
/* The drawings drift a little slower than the page (Jordan, 2026-10-01:
   "take that all the way through the website"); the script sets the
   offsets, never under reduced motion. */
.hero-stage { transform: translate3d(0, calc(var(--hero-drift, 0) * 1px), 0); }
.fig:not(.hero-art) .frame img { transform: translate3d(0, calc(var(--drift, 0) * 1px), 0); will-change: transform; }
.frame.hero-frame { position: absolute; inset: 0; z-index: 0; }
.frame.hero-frame img, .frame.hero-frame video { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.cover {
  position: absolute; inset: 0; z-index: 2; background: #fff;
  animation: wipe 1800ms 260ms var(--ease-blade) both;
}
@keyframes wipe { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(100% 0 0 0); } }
.tsq {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  animation: tsqMove 1800ms 260ms var(--ease-blade) both, tsqFade 360ms 2060ms var(--ease-set) both;
}
@keyframes tsqMove { from { transform: translateY(0); } to { transform: translateY(100%); } }
@keyframes tsqFade { to { opacity: 0; } }
.tsq-blade {
  position: absolute; top: -0.4rem; right: -1.25rem; left: -120vw; height: 0.8rem;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  background: color-mix(in srgb, var(--glg-navy) 7%, transparent);
}
.tsq-head {
  position: absolute; top: -1rem; right: -1.7rem; width: 0.9rem; height: 2rem;
  border: 1px solid var(--line); border-radius: 2px;
  background: color-mix(in srgb, var(--glg-navy) 12%, transparent);
}
.tsq-head::after { content: ""; position: absolute; left: 50%; top: 0.3rem; bottom: 0.3rem; width: 1px; background: var(--line); }

/* The film's controls, built by the script only when a film is wired: a
   44 px play and pause mark on the frame, and the dimension becomes its
   scrubber. */
.film-btn {
  position: absolute; z-index: 5; left: 1rem; bottom: 1rem;
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; padding: 0 1rem 0 0.8rem;
  border: 0; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--glg-navy) 88%, transparent); color: #fff;
  font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9375rem;
}
.film-btn svg { width: 1rem; height: 1rem; fill: currentColor; }
.dim-hero.scrub { pointer-events: auto; cursor: pointer; }
/* A film is a picture to the edges, not a drawing on paper: the stage
   narrows to the right half of the cover, clear of the headline, and the
   film sits in the corner-ticked frame without the paper blend. */
@media (min-width: 48em) {
  .hero-stage.has-film { width: min(46vw, 52rem); aspect-ratio: 16 / 9; bottom: 9rem; }
}
.has-film .fig.hero-art { mix-blend-mode: normal; border: 1px solid var(--line); background: var(--glg-surface); }

@media (max-width: 47.99em) {
  /* Phones (Jordan, 2026-10-01): the words sit at the top of the first
     screen, in front of the drawing, and the button is on that screen. The
     drawing fills the screen behind and below them, fading into the paper
     under the words, and drifts a little slower than the page as it scrolls
     away (the script sets --hero-drift; never under reduced motion). */
  .hero { min-height: 100svh; position: relative; }
  .hero-stage {
    position: absolute; left: 0; right: 0; bottom: 0; width: 100%; order: 0;
    height: 60svh; margin: 0; aspect-ratio: auto;
  }
  .hero-stage::after {
    content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
    background: linear-gradient(to bottom, var(--glg-bg) 0%, color-mix(in srgb, var(--glg-bg) 82%, transparent) 20%, transparent 46%);
  }
  .fig.hero-art { overflow: hidden; }
  .frame.hero-frame img, .frame.hero-frame video { inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 80% 100%; }
  .hero-in { position: relative; z-index: 4; padding-block: calc(var(--hdr-h) + 1.1rem) 1rem; flex: none; }
  /* Paper behind the words, fading out just below them, so the drawing
     shows around the text and never under it. */
  .hero-in::before {
    content: ""; position: absolute; inset: 0 0 -2.75rem 0; z-index: -1; pointer-events: none;
    background: linear-gradient(to bottom, var(--glg-bg) 0, var(--glg-bg) calc(100% - 3.25rem), transparent 100%);
  }
  .hero h1 { font-size: clamp(2rem, 1.2rem + 4.2vw, 2.4rem); margin-bottom: 0.8rem; }
  .hero-lead { margin-bottom: 1.1rem; }
  .ctas .btn { width: 100%; }
  .tsq, .dim-hero { display: none; }
}
@media (max-width: 47.99em) { .for-wide { display: none; } .for-narrow { display: inline; } }

/* ── Dimension lines ───────────────────────────────────────────────────── */
.dim { position: absolute; pointer-events: none; color: var(--line); }
.dim-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.dim-ext { stroke: currentColor; stroke-width: 1; transform-box: fill-box; transform-origin: center; }
.dim-line { stroke: currentColor; stroke-width: 1; stroke-dasharray: 1; stroke-dashoffset: 0; }
.dim-arr path { fill: currentColor; }
.dim-x { left: 0; right: 0; height: 12px; }
.dim-y { top: 0; bottom: 0; width: 12px; }
.dim-v {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  padding: 0.1rem 0.45rem; white-space: nowrap;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--glg-ink); background: var(--glg-bg);
  display: inline-flex; gap: 0.45rem; align-items: baseline;
}
.dim-k { color: var(--muted); }
.dim-n { font-variant-numeric: tabular-nums; }
.dim-n:empty::before { content: "\2014"; color: var(--muted); }
html:not(.js) .dim-n:empty::before { content: "N.T.S."; }
.dim-y .dim-v { writing-mode: vertical-rl; transform: translate(-50%, -50%) rotate(180deg); padding: 0.45rem 0.1rem; }
html.js .dim:not(.drawn) .dim-line { stroke-dashoffset: 1; }
html.js .dim:not(.drawn) .dim-ext { transform: scaleY(0); }
html.js .dim-y:not(.drawn) .dim-ext { transform: scaleX(0); }
html.js .dim:not(.drawn) .dim-arr, html.js .dim:not(.drawn) .dim-v { opacity: 0; }
html.js .dim.drawn .dim-line { stroke-dashoffset: 0; transition: stroke-dashoffset 900ms var(--ease-draw); }
html.js .dim.drawn .dim-ext { transform: none; transition: transform 300ms var(--ease-draw); }
html.js .dim.drawn .dim-arr, html.js .dim.drawn .dim-v { opacity: 1; transition: opacity 200ms var(--ease-set); }
html.js .dim.drawn .dim-arr:last-of-type { transition-delay: 800ms; }
.dim-hero { top: 100%; margin-top: 0.8rem; }
html.js .dim-hero:not(.drawn) .dim-line { animation: dash 900ms 2200ms var(--ease-draw) both; }
html.js .dim-hero:not(.drawn) .dim-ext { animation: extIn 300ms 2200ms var(--ease-draw) both; }
html.js .dim-hero:not(.drawn) .dim-arr, html.js .dim-hero:not(.drawn) .dim-v { animation: fadeIn 200ms 2200ms var(--ease-set) both; }
html.js .dim-hero:not(.drawn) .dim-arr:last-of-type { animation-delay: 3000ms; }
@keyframes dash { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes extIn { from { transform: scaleY(0); } to { transform: none; } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
/* The sheet's own dimension: the whole document, drawn when the footer
   arrives, white under a difference blend so it reads on paper and navy. */
.dim-sheet { top: 0; bottom: 0; right: calc(var(--board) + 0.55rem); z-index: 2; }
.dim-sheet .dim-svg { mix-blend-mode: difference; color: rgb(255 255 255 / 0.62); }
.dim-sheet .dim-v {
  top: auto; bottom: 1.5rem; transform: translate(-50%, 0) rotate(180deg);
  color: var(--glg-on-navy); background: var(--glg-footer-bottom);
  border: 1px solid color-mix(in srgb, var(--glg-on-navy) 30%, transparent);
}
.dim-sheet .dim-k { color: color-mix(in srgb, var(--glg-on-navy) 70%, transparent); }
@media (max-width: 61.99em) { .dim-sheet { display: none; } }

/* ── Drawings ──────────────────────────────────────────────────────────── */
.fig { margin: 0; position: relative; mix-blend-mode: var(--fig-blend); }
.frame { position: relative; filter: var(--fig-filter); }
.frame img { display: block; width: 100%; height: auto; }
html.js .fig:not(.hero-art) .frame img { clip-path: inset(0 0 100% 0); }
html.js .fig.in:not(.hero-art) .frame img { clip-path: inset(0 0 0 0); transition: clip-path 1100ms var(--ease-blade); }
html.js .fig.in.done:not(.hero-art) .frame img { clip-path: none; }
.fig-n { margin: 0.8rem 0 0; font-size: 0.75rem; letter-spacing: 0.04em; color: var(--muted); }
.fig-side { max-width: 26rem; width: 100%; justify-self: center; }

/* The corner-ticked frame: the one panel on these pages. */
.tick { position: relative; border: 1px solid var(--line); background: var(--glg-surface); }
.tick::before, .tick::after { content: ""; position: absolute; width: 0.7rem; height: 0.7rem; border: 0 solid var(--line); }
.tick::before { left: -1px; top: -1px; border-width: 2px 0 0 2px; }
.tick::after { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }

/* ── Ruled rows (the work, the services, the modes) ────────────────────── */
.rows { list-style: none; margin: 1.8rem 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.rows > li { border-bottom: 1px solid var(--line-2); }
.row-link {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.3rem 1.5rem; align-items: baseline;
  padding: 1.15rem 0.2rem; color: inherit; text-decoration: none;
  transition: background-color var(--glg-dur-fast) var(--ease-set);
}
.row-link:hover { background: color-mix(in srgb, var(--glg-navy) 5%, transparent); }
.row-link h3 { margin: 0; font-size: 1.1875rem; }
.row-link p { grid-column: 1; margin: 0; color: var(--muted); font-size: 0.9875rem; }
.row-link .arr { grid-column: 2; grid-row: 1 / 3; align-self: center; color: var(--glg-ember); font-size: 1.15rem; }
/* The practice an offering sits in, as a drawing reference under its line. */
.row-k { display: block; margin-top: 0.35rem; font-family: var(--glg-font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--muted); }
.analogy { font-family: var(--glg-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--glg-ink); margin: 0 0 0.4rem; }
.after-rows { margin-top: 1.2rem; }

/* ── Software ──────────────────────────────────────────────────────────── */
.prod-h .wipe-in { display: flex; align-items: center; gap: 0.75rem; }
.prod-mark { width: clamp(1.4rem, 2.6vw, 1.9rem); height: auto; flex: none; color: #1e4434; }
:root[data-theme="dark"] .prod-mark { color: #7fc9a8; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prod-mark { color: #7fc9a8; } }
.prod-still { margin: 0; }
.prod-still .tick { padding: 0.5rem; }
.prod-still img { display: block; width: 100%; height: auto; }
.prod-still figcaption { margin: 0.6rem 0 0; font-family: var(--glg-font-mono); font-size: 0.75rem; color: var(--muted); }
:root[data-theme="dark"] .prod-still .tick { filter: brightness(0.94); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .prod-still .tick { filter: brightness(0.94); } }
.status { border-left: 2px solid var(--line-2); padding-left: 1rem; color: var(--muted); font-size: 0.9375rem; }
.status-loud { border-left-color: var(--glg-ember); color: var(--glg-ink); }

/* ── Pricing and the contract ──────────────────────────────────────────── */
/* Three ways to work with us: numbered, read left to right, joined by a
   ruled line from one number to the next (Jordan, 2026-10-01). On a phone
   the row slides sideways, the next card showing at the edge. */
.ways-h { margin: clamp(2rem, 4vw, 2.6rem) 0 0; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.45rem); }
.ways {
  list-style: none; margin: 1.3rem 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 3vw, 2.25rem);
}
.ways:focus-visible { outline: 2px solid var(--glg-ember); outline-offset: 4px; }
.ways li { position: relative; display: flex; flex-direction: column; gap: 0.35rem; }
.ways-n {
  position: relative; z-index: 1; display: inline-grid; place-items: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: 0.55rem; border: 1px solid var(--line); border-radius: 50%;
  background: var(--glg-bg); color: var(--glg-ink);
  font-family: var(--glg-font-display); font-weight: 600; font-size: 1.15rem;
}
.ways li:not(:last-child)::after {
  content: ""; position: absolute; top: 1.3rem; left: 2.6rem; right: calc(-1 * clamp(1.25rem, 3vw, 2.25rem));
  height: 1px; background: var(--line);
}
.ways li:not(:last-child)::before {
  content: ""; position: absolute; top: calc(1.3rem - 3.5px); right: calc(-1 * clamp(1.25rem, 3vw, 2.25rem));
  width: 0; height: 0; border-left: 7px solid var(--line); border-top: 4px solid transparent; border-bottom: 4px solid transparent;
}
.ways b { font-family: var(--glg-font-display); font-weight: 600; font-size: 1.0625rem; line-height: 1.3; color: var(--glg-ink); }
.ways-l { color: var(--muted); font-size: 0.9375rem; }
@media (max-width: 47.99em) {
  .ways:not(.ways-v) {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%; gap: 1.1rem;
    overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
    margin-inline: calc(-1 * var(--gut)); padding: 0.2rem var(--gut) 0.8rem; scroll-padding-inline: var(--gut);
    scrollbar-width: thin;
  }
  .ways:not(.ways-v) li { scroll-snap-align: start; }
  .ways:not(.ways-v) li:not(:last-child)::after, .ways:not(.ways-v) li:not(:last-child)::before { right: -1.1rem; }
}
.pricing-contract { margin-top: clamp(2rem, 4vw, 2.8rem); max-width: 38rem; }
.fee { margin-top: 1.2rem; }
.contract { padding: clamp(1.4rem, 3vw, 2.2rem); }
.contract h3 { font-size: clamp(1.35rem, 1.1rem + 1vw, 1.75rem); margin-bottom: 0.4rem; }
.promises { list-style: none; margin: 1.2rem 0; padding: 0; counter-reset: p; }
.promises li { position: relative; padding: 0.85rem 0 0.85rem 2.4rem; border-top: 1px solid var(--line-2); counter-increment: p; font-family: var(--glg-font-display); font-weight: 600; font-size: 1.125rem; color: var(--glg-ink); line-height: 1.35; }
.promises li::before {
  content: counter(p); position: absolute; left: 0; top: 0.85rem;
  width: 1.6rem; height: 1.6rem; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--glg-ember); color: var(--glg-ember);
  font-family: var(--glg-font-mono); font-size: 0.75rem; font-weight: 500;
}
.promises + p { margin: 0; color: var(--glg-ink); }
/* Each promise carries its reason (Jordan, 2026-10-01). */
.pr-t { display: block; }
.pr-why { display: block; margin-top: 0.4rem; font-family: var(--glg-font-body); font-weight: 400; font-size: 0.9375rem; line-height: 1.55; color: var(--muted); }
.pull { font-size: clamp(1.25rem, 1rem + 1.2vw, 1.75rem); color: var(--glg-ink); line-height: 1.3; }

/* ── The conversation ──────────────────────────────────────────────────── */
/* The conversation: every line of its words at one size (Jordan,
   2026-10-01: "all those fonts are different sizes"). Headings stay
   headings and labels stay labels; the rest reads at the body size. */
#talk .lead, #talk p:not(.eyebrow), #talk li, #talk legend, #talk legend span, #talk .pick-o b { font-size: 1.0625rem; }
.asks-h { margin: 1.4rem 0 0.5rem; font-family: var(--glg-font-display); font-weight: 600; color: var(--glg-ink); }
.asks { margin: 0 0 1.4rem; padding-left: 1.3rem; }
.asks li { color: var(--glg-ink); padding: 0.2rem 0 0.2rem 0.2rem; }
.asks li::marker { color: var(--glg-ember); }
.steps-line { font-family: var(--glg-font-body); color: var(--muted); border-top: 1px solid var(--line-2); padding-top: 1rem; margin-top: 1.6rem; }
.share { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin-top: 1.4rem; }
.share p { margin: 0; flex: 1 1 18rem; color: var(--glg-body); }
.share-note { font-family: var(--glg-font-mono); font-size: 0.75rem; color: var(--muted); min-width: 6rem; }
@media (max-width: 63.99em) { .steps-line { display: none; } }
.ask { padding: 1.6rem 1.7rem 1.8rem; }
.lead h3 { font-size: 1.25rem; margin-bottom: 1.1rem; }
.f { display: grid; gap: 0.35rem; margin: 0 0 0.95rem; }
.f label { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.f input, .f textarea {
  width: 100%; min-height: 2.9rem; padding: 0.6rem 0.75rem;
  font: inherit; font-size: 1rem; color: var(--glg-ink);
  background: var(--glg-surface); border: 1px solid var(--field); border-radius: 2px;
  transition: border-color var(--glg-dur-fast) var(--ease-set), box-shadow var(--glg-dur-fast) var(--ease-set);
}
.f textarea { resize: vertical; min-height: 7rem; }
.f input:focus, .f textarea:focus { border-color: var(--glg-ember); box-shadow: inset 0 0 0 1px var(--glg-ember); outline: none; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.not-us { margin: 1.2rem 0 1rem; color: var(--glg-ink); }
.f-send .btn { width: 100%; }
.f-note { margin: 0.8rem 0 0; font-size: 0.875rem; color: var(--glg-ember); min-height: 1.2em; }
.lead-done { animation: setDown 520ms var(--ease-set) both; }
@keyframes setDown { from { opacity: 0; transform: translateY(6px); } }
#lead-done:target { display: block; }
#lead-done:target ~ #lead { display: none; }

/* ── Inner pages (Services, About Us, Vision) ──────────────────────────── */
.page-head { padding-block: calc(var(--hdr-h) + 3.5rem) clamp(2.5rem, 6vw, 4rem); }
.page-head h1 { font-size: clamp(2.1rem, 1.2rem + 3.4vw, 3.6rem); letter-spacing: -0.03em; margin: 0 0 1.2rem; max-width: 22ch; text-wrap: balance; }
.page-head .lead { max-width: 40rem; color: var(--glg-ink); }
.page-head .aside { max-width: 44rem; }
.toc { display: flex; flex-wrap: wrap; gap: 0.2rem 1.4rem; margin-top: 1.4rem; padding: 0; list-style: none; }
.toc a { display: inline-block; padding-block: 0.7rem; font-family: var(--glg-font-display); font-weight: 600; text-decoration: none; }
.toc a:hover { text-decoration: underline; text-underline-offset: 4px; }
.aside { border-left: 1px solid var(--line-2); padding-left: 1.1rem; font-size: 0.9375rem; color: var(--muted); }
.offers { list-style: none; margin: 1.6rem 0 0; padding: 0; border-top: 1px solid var(--line-2); }
.offers li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.25rem 1.5rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--line-2); }
.offers h3 { margin: 0; font-size: 1.0625rem; }
.offers p { margin: 0; grid-column: 1; color: var(--muted); font-size: 0.9375rem; }
.offers .ask-link { grid-column: 2; grid-row: 1 / 3; }
@media (max-width: 39.99em) {
  .offers li { grid-template-columns: minmax(0, 1fr); }
  .offers .ask-link { grid-column: 1; grid-row: auto; justify-self: start; }
}
.ask-link {
  display: inline-flex; align-items: center; gap: 0.35rem; min-height: 2.75rem;
  font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9375rem; text-decoration: none; white-space: nowrap;
}
.ask-link:hover { text-decoration: underline; text-underline-offset: 4px; }
.cat-line { color: var(--glg-ink); }
/* Services: each practice is a pitch, a hook and a paragraph and one button. */
/* The title block: practice and app, the drawing sheet's own convention. */
.ptb { display: inline-grid; grid-template-columns: auto auto; margin: 0 0 1.5rem; border: 1px solid var(--line); background: var(--glg-surface); max-width: 100%; }
.ptb-cell { padding: 0.5rem 1rem 0.6rem; min-width: 0; }
.ptb-cell + .ptb-cell { border-left: 1px solid var(--line); }
.ptb-k { display: block; font-family: var(--glg-font-mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ptb-v { margin: 0.1rem 0 0; font-family: var(--glg-font-display); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.6rem); line-height: 1.2; letter-spacing: -0.01em; color: var(--glg-ink); display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem 0.6rem; }
/* Status, drawn: a solid outline is built, a dashed one is not yet. */
.st { font-family: var(--glg-font-mono); font-size: 0.6875rem; font-weight: 400; letter-spacing: 0.04em; line-height: 1; padding: 0.3rem 0.45rem; border: 1px solid var(--line); border-radius: 2px; color: var(--glg-ink); white-space: nowrap; }
.st-soon { border-style: dashed; color: var(--muted); }
.pitch .hook { font-family: var(--glg-font-display); font-weight: 600; font-size: clamp(1.75rem, 1.2rem + 2.4vw, 2.9rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--glg-ink); margin: 0 0 1rem; max-width: 18ch; text-wrap: balance; }
.pitch .hook-2 { color: var(--glg-ink); max-width: 34rem; }
.pitch > p:not(.eyebrow):not(.ctas) { max-width: 36rem; }
.pitch .ctas { margin-top: 1.6rem; }

.ladder { margin-top: 2rem; }
.ladder h3 { font-size: 1rem; }
.cta-band { padding-block: clamp(3rem, 7vw, 5rem); }
.cta-band h2 { max-width: 20ch; }
.cta-band .ctas { margin-top: 1.4rem; }
.orgs { display: grid; gap: 2rem; margin-top: 1.6rem; align-items: start; }
@media (min-width: 52em) { .orgs { grid-template-columns: 1fr 1fr; gap: 3rem; } }
.org { padding: clamp(1.3rem, 3vw, 2rem); }
.org h3 { font-size: 1.375rem; }
.both { margin-top: 2rem; font-family: var(--glg-font-display); font-weight: 600; font-size: clamp(1.15rem, 1rem + 0.7vw, 1.45rem); color: var(--glg-ink); max-width: 40rem; }
.byline { font-family: var(--glg-font-mono); font-size: 0.8125rem; color: var(--muted); }

/* ── The Collective: the people, from the live site's PEOPLE ──────────────
   Portraits are the live site's own files (/collective/*.webp, one flat
   brand-blue backdrop), so the frame needs no object-position. The full bio
   is a native <details>: it opens without script, on a phone, in print. */
.people {
  list-style: none; margin: clamp(2rem, 4vw, 2.8rem) 0 0; padding: 0;
  display: grid; gap: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: minmax(0, 1fr);
}
@media (min-width: 36em) { .people { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .people { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.person { border-top: 1px solid var(--line); padding-top: 1rem; scroll-margin-top: calc(var(--hdr-h) + 1rem); }
.portrait { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 2px; background: var(--glg-brand-blue, #2b4b71); outline: 1px solid var(--line-2); outline-offset: 3px; }
.portrait img { display: block; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 35.99em) { .portrait { max-width: 22rem; } }
.person h3 { margin: 1.1rem 0 0.2rem; font-size: 1.25rem; line-height: 1.25; }
.person .role { margin: 0; font-size: 0.9375rem; font-weight: 600; color: var(--glg-ink); }
.person .practice { margin: 0.2rem 0 0; font-family: var(--glg-font-mono); font-size: 0.8125rem; color: var(--muted); }
.person .pline { margin: 0.7rem 0 0; font-size: 0.9375rem; color: var(--glg-body, var(--glg-ink)); }
.bio { margin-top: 0.4rem; }
.bio summary {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 2.75rem; cursor: pointer; list-style: none;
  font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9375rem;
}
.bio summary::-webkit-details-marker { display: none; }
.bio summary::before {
  content: "+"; display: inline-grid; place-items: center; width: 1.25rem; height: 1.25rem;
  border: 1px solid var(--line); border-radius: 2px; font-family: var(--glg-font-mono); font-weight: 400; line-height: 1;
}
.bio[open] summary::before { content: "\2212"; }
.bio summary:hover { text-decoration: underline; text-underline-offset: 4px; }
.bio p { margin: 0.2rem 0 0.8rem; font-size: 0.9375rem; color: var(--glg-body, var(--glg-ink)); border-left: 1px solid var(--line-2); padding-left: 0.9rem; }
.join {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.6rem 2rem;
  margin-top: clamp(2.2rem, 5vw, 3rem); padding-top: 1.1rem; border-top: 1px solid var(--line);
}
.join p { margin: 0; flex: 1 1 22rem; color: var(--muted); font-size: 0.9375rem; }
.join strong { color: var(--glg-ink); font-family: var(--glg-font-display); }

/* The home page's way in: the six, full width, names and titles under
   each (Jordan, 2026-10-01). Six across from 48em, three by two below. */
.faces { padding-bottom: clamp(2.5rem, 6vw, 4rem); }
.faces-row { list-style: none; margin: 0.9rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem 0.9rem; }
@media (min-width: 48em) { .faces-row { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.25rem; } }
/* Each portrait is a card (Jordan, 2026-10-01: "rounded edges ... like
   the buttons ... take the fill all the way down below the words"): the
   portraits' own flat blue runs on under the name and title, in white. */
.faces-row a {
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border-radius: 6px; background: #2b4b70; color: #fff; text-decoration: none;
  box-shadow: 0 16px 30px -24px rgb(10 20 35 / 0.7);
  transition: transform var(--glg-dur-base) var(--ease-set), box-shadow var(--glg-dur-base) var(--ease-set);
}
.faces-row a:hover { transform: translateY(-3px); box-shadow: 0 22px 36px -24px rgb(10 20 35 / 0.75); }
.face-ph { display: block; aspect-ratio: 1; overflow: hidden; background: #2b4b70; }
.face-ph img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 420ms var(--ease-set); }
.faces-row a:hover .face-ph img { transform: scale(1.04); }
.faces-row b { padding: 0.7rem 0.8rem 0; font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9875rem; line-height: 1.25; color: #fff; }
.faces-row span:not(.face-ph) { padding: 0.2rem 0.8rem 0.85rem; font-size: 0.8125rem; line-height: 1.35; color: #dce5ef; }
.faces .after-rows { margin-top: 1.4rem; }

/* ── Footer: the last sheet, at night ──────────────────────────────────── */
.foot {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(180deg, var(--glg-footer-top), var(--glg-footer-bottom));
  color: var(--glg-on-navy); padding-block: clamp(3rem, 7vw, 5rem) 0;
}
.foot a { color: var(--glg-on-navy); }
.night {
  position: absolute; z-index: 0; margin: 0; pointer-events: none;
  right: -6%; bottom: 2.5rem; width: min(68rem, 92%);
  opacity: 0.5; mix-blend-mode: screen;
  -webkit-mask-image: linear-gradient(180deg, transparent 18%, #000 60%);
          mask-image: linear-gradient(180deg, transparent 18%, #000 60%);
}
.night img { display: block; width: 100%; height: auto; filter: invert(1) hue-rotate(180deg); }
.foot .wrap { position: relative; z-index: 1; }
.foot-top { display: grid; gap: 2rem; }
@media (min-width: 56em) { .foot-top { grid-template-columns: 1fr auto; align-items: start; } }
.foot-logo { height: 5rem; width: auto; color: var(--glg-on-navy); display: block; }
.fh-outline { fill: none; stroke: var(--glg-on-navy); stroke-width: 10; opacity: 0.55; }
.fh-fill { fill: var(--glg-heart); clip-path: inset(100% 0 0 0); transition: clip-path 1100ms var(--ease-draw); }
.foot-logo.filled .fh-fill { clip-path: inset(0 0 0 0); }
.tagline { margin-top: 1rem; font-size: 1.125rem; color: var(--glg-on-navy); opacity: 0.9; }
.foot-contact { display: grid; gap: 0.9rem; justify-items: start; }
.mail { font-size: 0.875rem; display: inline-block; padding-block: 0.7rem; margin-block: -0.7rem; }
.foot-theme { display: flex; align-items: center; gap: 0.8rem; font-family: var(--glg-font-mono); font-size: 0.75rem; opacity: 0.85; }
@media (max-width: 47.99em) { .foot-theme { display: none; } }
.foot-nav { display: grid; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid color-mix(in srgb, var(--glg-on-navy) 22%, transparent); }
@media (min-width: 48em) { .foot-nav { grid-template-columns: repeat(2, minmax(0, 18rem)); } }
.foot-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.1rem; font-size: 0.9375rem; }
.foot-nav a { display: inline-block; padding-block: 0.7rem; }
.foot-notes { margin-top: 2rem; display: grid; gap: 0.5rem; max-width: 46rem; font-size: 0.875rem; opacity: 0.85; }
.foot-notes p { margin: 0; }
.soon { font-family: var(--glg-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; margin-left: 0.5rem; padding: 0.1rem 0.4rem; border: 1px solid color-mix(in srgb, var(--glg-on-navy) 35%, transparent); }
.foot-end { margin-top: 2.4rem; min-height: 5.6rem; display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem 2rem; font-size: 0.75rem; }
.foot-end p { margin: 0 0 0.8rem; opacity: 0.75; align-self: flex-start; }
.tb {
  display: flex; flex-wrap: wrap; border: 1px solid var(--line-2); border-bottom: 0;
  font-size: 0.75rem; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1.3;
}
.tb-c { display: grid; gap: 0.15rem; padding: 0.45rem 0.8rem 0.5rem; border-left: 1px solid var(--line-2); min-width: 5.5rem; }
.tb-c:first-child { border-left: 0; }
.tb-c b { font-weight: 400; font-size: 0.75rem; }
.tb-name { min-width: 12rem; }
html.js .tb { clip-path: inset(0 100% 0 0); }
html.js .foot.ruled .tb { clip-path: inset(0 0 0 0); transition: clip-path 900ms var(--ease-draw); }
.tb-foot { --line-2: color-mix(in srgb, var(--glg-on-navy) 30%, transparent); color: var(--glg-on-navy); background: color-mix(in srgb, var(--glg-footer-bottom) 60%, transparent); }
.tb-foot .tb-c b { color: color-mix(in srgb, var(--glg-on-navy) 70%, transparent); }
.tb-foot .tb-name b { color: var(--glg-heart); }
.tb-north { min-width: 0; padding-right: 0.7rem; }
.north { width: 1.8rem; height: 1.8rem; display: block; color: var(--glg-on-navy); transition: transform 600ms var(--ease-draw); }
.north.down { transform: rotate(180deg); }
@media (max-width: 63.99em) { .tb-foot { margin-right: 1.5rem; } }
@media (max-width: 47.99em) {
  .tb-foot { width: 100%; margin-right: 0; }
  .tb-foot .tb-c { flex: 1 1 35%; min-width: 0; }
}

/* ── Phones ────────────────────────────────────────────────────────────── */
@media (max-width: 47.99em) {
  .scene { padding-block: 3rem; }
  .page-head { padding-block: calc(var(--hdr-h) + 1.6rem) 2.2rem; }
  .ask { padding: 1.4rem 1.1rem 1.5rem; }
  .contract { padding: 1.3rem 1.1rem; }
  .fig-side { max-width: none; }
}

/* ── Reduced motion: complete and finished ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; transition-delay: 0ms !important; }
  html { scroll-behavior: auto; }
  html.js .reveal, html.js .reveal.wipe { opacity: 1; }
  html.js .reveal.wipe .wipe-in { clip-path: none; }
  .cover, .tsq { display: none; }
  html.js .fig .frame img { clip-path: none; }
  html.js .dim .dim-line { stroke-dashoffset: 0; animation: none; }
  html.js .dim .dim-ext { transform: none; animation: none; }
  html.js .dim .dim-arr, html.js .dim .dim-v { opacity: 1; animation: none; }
  html.js .tb { clip-path: none; }
  .north { transition: none; }
}

@media print {
  .board, .tsq, .cover, .hdr, .night, .dim-sheet, .menu-panel, .film-btn { display: none !important; }
  .frame img { clip-path: none !important; }
  .bio::details-content { content-visibility: visible; display: block; }
  .bio summary { display: none; }
}

/* ── The apps: icon tiles, the shelf, product screens, the picker ─────────
   Added 2026-10-01. A tile is the app's own mark on its own colour, the
   rounded square a phone home screen uses. */
.appi {
  --c: #1f4e5f;
  display: inline-grid; place-items: center; flex: none;
  width: 2.9rem; height: 2.9rem; border-radius: 24%;
  background: linear-gradient(165deg, color-mix(in srgb, var(--c) 78%, #fff) 0%, var(--c) 58%);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.2), 0 6px 14px -8px rgb(10 20 35 / 0.55);
  color: #f4efe6;
}
.appi svg { width: 74%; height: 74%; display: block; overflow: visible; }
.appi-s { width: 2rem; height: 2rem; border-radius: 25%; }
.appi-onegoodgov { --c: #1f4e5f; }
.appi-goodai { --c: #3d82c9; }
.appi-turbocap { --c: #1e4535; color: #e6efe3; }
.appi-turbodev { --c: #23476b; }

.st-cohort { border-color: var(--glg-ember); color: var(--glg-ember); }
.ptb-v .appi-s { margin-inline-end: 0.1rem; }

.shelf-form { margin: 1.5rem 0 1rem; max-width: 36rem; }
.shelf-lead { margin: 0 0 0.8rem; font-size: 0.9375rem; color: var(--muted); }
.shelf-lead b { color: var(--glg-ink); font-family: var(--glg-font-display); font-weight: 600; }
.shelf { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.75rem; grid-template-columns: minmax(0, 1fr); }
/* A card is one big checkbox: tap it to pick the app. */
.appc { position: relative; border: 1px solid var(--line-2); border-radius: 3px; background: var(--glg-surface); transition: border-color var(--glg-dur-fast) var(--ease-set), box-shadow var(--glg-dur-fast) var(--ease-set); }
.appc:has(.appc-x:checked) { border-color: var(--glg-ember); box-shadow: 0 0 0 1px var(--glg-ember); }
.appc:has(.appc-x:focus-visible) { outline: 2px solid var(--glg-ember); outline-offset: 2px; }
.appc-l { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 0.2rem 0.85rem; align-items: start; padding: 0.9rem 0.95rem; cursor: pointer; min-height: 2.75rem; }
.appc-x { position: absolute; opacity: 0; width: 1px; height: 1px; }
.appc-t { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.45rem; }
.appc-t b { font-family: var(--glg-font-display); font-weight: 600; font-size: 1.0625rem; color: var(--glg-ink); flex-basis: 100%; }
.appc-p { font-family: var(--glg-font-mono); font-size: 0.75rem; color: var(--muted); }
.appc-tick { width: 1.4rem; height: 1.4rem; border: 1.5px solid var(--line); border-radius: 50%; display: grid; place-items: center; transition: background-color var(--glg-dur-fast) var(--ease-set), border-color var(--glg-dur-fast) var(--ease-set); }
.appc-x:checked ~ .appc-tick { background: var(--glg-ember); border-color: var(--glg-ember); }
.appc-x:checked ~ .appc-tick::after { content: ""; width: 0.38rem; height: 0.7rem; border: solid #fff; border-width: 0 2px 2px 0; transform: translateY(-1px) rotate(45deg); }
.appc-demo { margin: -0.4rem 0.95rem 0.6rem calc(0.95rem + 2.9rem + 0.85rem); font-size: 0.9375rem; min-height: 2.5rem; }
.shelf-go { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 1rem; margin: 1rem 0 0; }
.shelf-all-btn { min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--glg-ink); font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9375rem; cursor: pointer; }
.shelf-all-btn[aria-pressed="true"] { background: var(--glg-navy); border-color: var(--glg-navy); color: var(--glg-bg); }
.shelf-form.nudge .appc { border-color: var(--glg-ember); }
@media (max-width: 35.99em) { .shelf-go .btn { width: 100%; } }


/* A product screen: a plain window frame around a short or a still. */
.screen { margin: 0; align-self: center; }
.screen-win { border: 1px solid var(--line); border-radius: 6px; overflow: hidden; background: var(--glg-surface); box-shadow: 0 18px 40px -26px rgb(10 20 35 / 0.45); }
.screen-bar { display: flex; align-items: center; gap: 0.35rem; height: 1.9rem; padding: 0 0.7rem; border-bottom: 1px solid var(--line-2); background: color-mix(in srgb, var(--glg-navy) 5%, var(--glg-surface)); }
.screen-bar i { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: color-mix(in srgb, var(--glg-navy) 22%, transparent); }
.screen-bar span { margin-inline-start: 0.6rem; font-family: var(--glg-font-mono); font-size: 0.6875rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.screen-body { position: relative; }
.screen-body video, .screen-body img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--glg-bg); }
.screen figcaption { margin: 0.65rem 0 0; font-family: var(--glg-font-mono); font-size: 0.75rem; color: var(--muted); }
.screen-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.screen-tabs button { min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--line-2); border-radius: 999px; background: transparent; color: var(--glg-ink); font-family: var(--glg-font-display); font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.screen-tabs button[aria-pressed="true"] { background: var(--glg-navy); border-color: var(--glg-navy); color: var(--glg-bg); }
.screen-play {
  position: absolute; left: 0.6rem; bottom: 0.6rem; z-index: 2;
  display: inline-flex; align-items: center; gap: 0.4rem; min-height: 2.75rem; padding: 0 0.85rem 0 0.7rem;
  border: 0; border-radius: 3px; cursor: pointer;
  background: color-mix(in srgb, var(--glg-navy) 86%, transparent); color: #fff;
  font-family: var(--glg-font-display); font-weight: 600; font-size: 0.8125rem;
}
.screen-play svg { width: 0.9rem; height: 0.9rem; fill: currentColor; }

/* The picker: register interest in any or all of the apps. */
.pick { border: 1px solid var(--line-2); border-radius: 3px; margin: 0.4rem 0 1rem; padding: 0.8rem 0.9rem 0.9rem; }
.pick legend { padding: 0 0.35rem; font-family: var(--glg-font-display); font-weight: 600; font-size: 0.9375rem; color: var(--glg-ink); }
.pick legend span { display: block; font-family: var(--glg-font-body); font-weight: 400; font-size: 0.8125rem; color: var(--muted); }
.pick-o { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.4rem 0.7rem; min-height: 3.2rem; padding: 0.4rem 0.2rem; cursor: pointer; border-bottom: 1px solid var(--line-2); }
.pick-o:last-of-type { border-bottom: 0; }
.pick-o input { width: 1.15rem; height: 1.15rem; accent-color: var(--glg-ember); flex: none; margin: 0; }
.pick-n { display: flex; align-items: center; gap: 0.65rem; min-width: 0; }
.pick-st { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.3rem; }
@media (max-width: 29.99em) { .pick-o { grid-template-columns: auto minmax(0, 1fr); } .pick-st { grid-column: 2; justify-content: flex-start; } }
.pick-o b { font-family: var(--glg-font-display); font-weight: 600; color: var(--glg-ink); }
.pick-all { margin-top: 0.5rem; min-height: 2.5rem; padding: 0 0.9rem; border: 1px solid var(--line); border-radius: 3px; background: transparent; color: var(--glg-ink); font-family: var(--glg-font-display); font-weight: 600; font-size: 0.875rem; cursor: pointer; }
.pick-all[aria-pressed="true"] { background: var(--glg-navy); color: var(--glg-bg); border-color: var(--glg-navy); }

/* The Collective + the app (Jordan, 2026-10-01). */
.appi-collective { --c: #2b4b71; color: #f4efe6; }
.appi-xs { width: 1.5rem; height: 1.5rem; border-radius: 26%; box-shadow: none; }
.team { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.45rem; margin-top: 0.55rem; font-family: var(--glg-font-display); font-weight: 600; font-size: 0.875rem; letter-spacing: 0; color: var(--glg-ink); }
.team .st { margin-inline-start: 0.2rem; }
.team-plus { color: var(--glg-ember); font-weight: 700; padding-inline: 0.05rem; }
.row-k .team { margin-top: 0.5rem; }
/* In the services title block the team cell reads as one line where it
   fits: "The Collective + TurboDev", each name kept whole with its icon. */
.ptb-team { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem); gap: 0.4rem 0.55rem; }
.ptb-team .tv { display: inline-flex; align-items: center; gap: 0.45rem; white-space: nowrap; }
.ptb-team .appi-s { width: 1.75rem; height: 1.75rem; }
.ptb-team .team-plus { color: var(--glg-ember); font-weight: 700; }
.ptb:not(.ptb-wide):has(.ptb-team) { display: grid; grid-template-columns: 1fr; width: min(100%, 32rem); }
.ptb:not(.ptb-wide):has(.ptb-team) .ptb-cell + .ptb-cell { border-left: 0; border-top: 1px solid var(--line); }

/* ── The second batch of 2026-10-01 ───────────────────────────────────────
   The welcome, the cover's sheet, the practices as cards, the app sections
   and the cohort, the services title blocks and screens, the hiring list,
   the Local Marketplace and the newsletter. */

/* The welcome (Jordan: "an animated logo welcoming new people ... click to
   enter, the heart fills up, and then there is a fade"). First visit only:
   the inline head script adds html.intro before first paint, and the header
   logo asks for it again. Without script it never shows, and the head
   script takes it away after four seconds if this sheet's script never
   arrives. Under reduced motion it is simply there, finished. */
.splash { display: none; }
html.intro { overflow: hidden; }
html.intro .splash {
  position: fixed; inset: 0; z-index: 300; overflow: auto;
  display: grid; place-items: center; padding: 4.5rem 1.5rem 3rem;
  background-color: var(--glg-bg);
  background-image:
    linear-gradient(var(--grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-major) 1px, transparent 1px);
  background-size: var(--cell-major) var(--cell-major);
}
.splash:focus { outline: none; }
.splash-in { display: grid; justify-items: center; text-align: center; width: min(100%, 30rem); }
.splash-eyebrow {
  margin: 0 0 1.3rem; font-family: var(--glg-font-mono); font-size: 0.75rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted); animation: spIn 600ms 120ms var(--ease-set) both;
}
.splash-logo { position: relative; width: clamp(8.5rem, 30vmin, 13.5rem); }
.splash-logo svg { display: block; width: 100%; height: auto; overflow: visible; }
/* The heart is painted first, the letters over it (the brand rule). */
.sp-letters { fill: var(--glg-ink); clip-path: inset(0 0 100% 0); animation: spLetters 1100ms 300ms var(--ease-blade) forwards; }
.sp-outline { fill: none; stroke: var(--glg-heart); stroke-width: 12; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: spDash 1000ms 1250ms var(--ease-draw) forwards; }
.sp-fill { fill: var(--glg-heart); clip-path: inset(100% 0 0 0); transition: clip-path 900ms var(--ease-draw); }
.splash.entering .sp-fill { clip-path: inset(0 0 0 0); }
.splash-logo:has(.splash-heart:hover) .sp-outline, .splash-logo:has(.splash-heart:focus-visible) .sp-outline { stroke-width: 22; }
.splash-rule {
  position: absolute; left: -14%; right: -14%; top: 0; height: 1px; background: var(--line);
  animation: spRule 1100ms 300ms var(--ease-blade) both, spOut 260ms 1400ms var(--ease-set) both;
}
.splash-heart { position: absolute; padding: 0; border: 0; border-radius: 42%; background: transparent; cursor: pointer; }
.splash-heart:focus-visible { outline: 2px solid var(--glg-ember); outline-offset: 6px; }
.splash-tag {
  margin: 1.5rem 0 0; font-family: var(--glg-font-display); font-weight: 600; line-height: 1.2;
  font-size: clamp(1.35rem, 1rem + 1.7vw, 2rem); letter-spacing: -0.015em; color: var(--glg-ink);
}
.splash-tag span { display: inline-block; animation: spIn 650ms var(--ease-set) both; }
.splash-tag span:first-child { animation-delay: 1700ms; }
.splash-tag span:last-child { animation-delay: 1950ms; color: var(--glg-ember); }
.splash-go { margin-top: 1.9rem; animation: spIn 550ms 2300ms var(--ease-set) both; }
.splash-hint { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--muted); animation: spIn 550ms 2450ms var(--ease-set) both; }
.splash-skip {
  position: absolute; top: calc(var(--board) + 0.75rem); right: calc(var(--board) + 0.75rem);
  min-height: 2.75rem; padding: 0 1rem; border: 1px solid var(--line-2); border-radius: 3px; background: var(--glg-bg);
  color: var(--glg-ink); font-family: var(--glg-font-display); font-weight: 600; font-size: 0.875rem; cursor: pointer;
}
.splash-skip:hover { border-color: var(--glg-ember); }
.splash.leaving { opacity: 0; transition: opacity 650ms var(--ease-set); }
/* The cover waits behind the welcome, then plays. */
html.intro .hero .cover, html.intro .hero .tsq, html.intro .dim-hero, html.intro .dim-hero * { animation-play-state: paused; }
@keyframes spLetters { to { clip-path: inset(0 0 0 0); } }
@keyframes spDash { to { stroke-dashoffset: 0; } }
@keyframes spRule { from { top: 0; } to { top: 100%; } }
@keyframes spOut { to { opacity: 0; } }
@keyframes spIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* The cover's sheet (Jordan: "the white of the picture cuts halfway through
   the text ... extend that left so it extends a bit beyond the text"). The
   drawing's paper is pure white, so a white sheet behind it, reaching a
   little past the words on the left and above the first line, reads as one
   sheet on the board. */
@media (min-width: 48em) {
  .hero-stage::before {
    content: ""; position: absolute; pointer-events: none;
    right: 0; bottom: 0;
    left: calc(-1 * (100vw - var(--board) - 1.25rem - min(80vw, 96rem) - max(0px, (100vw - 74rem) / 2) - var(--gut) + 2.5rem));
    top: min(0px, calc(var(--hdr-h) + 2.25rem - (100svh - 6.5rem - min(80vw, 96rem) * 0.5655)));
    background: #fff; filter: var(--fig-filter);
  }
}

/* The practices (Jordan: "a little bit bigger ... horizontal cards ... over
   the top of that photo, where the photo can kind of fade into the back").
   From 62em the three cards run side by side across the section, over the
   lower part of the drawing, which fades back behind them. */
.cons-grid { display: grid; gap: 2rem; }
.cons-text { max-width: 40rem; }
.cons-text .analogy { margin-bottom: 0; }
.cards3 { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); order: 2; }
@media (min-width: 48em) { .cards3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; } }
.cons-fig { max-width: 22rem; order: 3; }
.pcard {
  position: relative; display: flex; flex-direction: column; gap: 0.55rem; height: 100%;
  padding: clamp(1.3rem, 2.4vw, 1.9rem) clamp(1.2rem, 2vw, 1.7rem) clamp(1.15rem, 2vw, 1.5rem);
  background: var(--glg-surface); color: inherit; text-decoration: none;
  border: 1px solid var(--line-2); border-radius: 6px;
  box-shadow: 0 24px 46px -32px rgb(10 20 35 / 0.55);
  transition: transform var(--glg-dur-base) var(--ease-set), box-shadow var(--glg-dur-base) var(--ease-set), border-color var(--glg-dur-fast) var(--ease-set);
}
.pcard:hover { transform: translateY(-3px); border-color: var(--glg-ember); box-shadow: 0 30px 52px -32px rgb(10 20 35 / 0.6); }
.pcard h3 { margin: 0; padding-right: 2rem; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.15rem); letter-spacing: -0.02em; }
.pcard p { margin: 0; font-size: 1.0625rem; line-height: 1.45; color: var(--glg-ink); }
.pcard .team { margin-top: auto; padding-top: 0.7rem; }
.pcard > .arr { position: absolute; top: clamp(1.4rem, 2.5vw, 2rem); right: clamp(1.2rem, 2vw, 1.7rem); color: var(--glg-ember); font-size: 1.4rem; line-height: 1; }
.pcard:hover > .arr { transform: translateX(3px); }
@media (min-width: 62em) {
  .cons-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); grid-template-rows: auto auto; column-gap: 3rem; row-gap: 0; }
  .cons-text { grid-column: 1; grid-row: 1; align-self: start; padding-bottom: 2.75rem; }
  .cons-fig {
    grid-column: 2; grid-row: 1 / 3; justify-self: end; align-self: end; width: min(100%, 27rem); max-width: none; margin-bottom: 2.5rem;
    -webkit-mask-image: linear-gradient(to bottom, #000 34%, rgb(0 0 0 / 0.38) 66%, rgb(0 0 0 / 0.22) 100%);
            mask-image: linear-gradient(to bottom, #000 34%, rgb(0 0 0 / 0.38) 66%, rgb(0 0 0 / 0.22) 100%);
  }
  .cards3 { grid-column: 1 / -1; grid-row: 2; position: relative; z-index: 1; align-self: end; }
}

/* The apps: the screen on the left, the name, the summary and what makes it
   different on the right (Jordan, 2026-10-01). */
.app-split .screen { max-width: none; }
.app-h { display: flex; align-items: center; gap: 0.9rem; margin-bottom: 0.7rem; }
.app-h .appi { width: clamp(3rem, 2.4rem + 2vw, 3.75rem); height: clamp(3rem, 2.4rem + 2vw, 3.75rem); }
.app-st { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 1.1rem; }
.app-copy .lead { color: var(--glg-ink); }
.app-pts { list-style: none; margin: 1.3rem 0 1.5rem; padding: 0; border-top: 1px solid var(--line-2); }
.app-pts li { position: relative; padding: 0.7rem 0 0.7rem 1.6rem; border-bottom: 1px solid var(--line-2); font-size: 0.9875rem; line-height: 1.5; }
.app-pts li::before { content: ""; position: absolute; left: 0.15rem; top: 1.2rem; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--glg-ember); }
.app-pts b { font-family: var(--glg-font-display); font-weight: 600; color: var(--glg-ink); }
.app-copy .ctas { margin: 0; }
@media (min-width: 60em) {
  .app-split { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(2.5rem, 4vw, 4rem); }
}
.appi-market { --c: #6a4c93; }

/* The first cohort, full width: one card per app, each one big checkbox. */
.cohort .shelf-form { max-width: none; margin-top: 1.8rem; }
.cohort .shelf { gap: 1rem; }
@media (min-width: 36em) { .cohort .shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 62em) { .cohort .shelf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cohort .appc { border-radius: 6px; }
.cohort .appc-p { flex-basis: 100%; }
/* Side by side, each card stands up: the tile, then the name. On a phone
   the cards stay the compact rows above. */
@media (min-width: 36em) {
  .cohort .appc-l { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr; gap: 1rem 0.75rem; height: 100%; padding: 1.2rem 1.15rem 1.25rem; }
  .cohort .appc-l > .appi { grid-column: 1; grid-row: 1; width: 3.4rem; height: 3.4rem; }
  .cohort .appc-tick { grid-column: 2; grid-row: 1; }
  .cohort .appc-t { grid-column: 1 / -1; grid-row: 2; align-content: start; }
  .cohort .appc-t b { font-size: 1.25rem; }
}
.cohort .shelf-go { margin-top: 1.4rem; }

/* Services: the title block runs the whole width, and the practice's screen
   is the larger column (Jordan: "extend that rectangle to align with the
   right side of the TurboDev screen, and make the screen larger"). */
.ptb-wide { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); width: 100%; margin-bottom: clamp(1.6rem, 3vw, 2.4rem); }
.ptb-wide .ptb-cell { padding: 0.7rem 1.2rem 0.8rem; }
.ptb-wide .ptb-cell + .ptb-cell { border-left: 1px solid var(--line); border-top: 0; }
@media (max-width: 47.99em) {
  .ptb-wide { grid-template-columns: minmax(0, 1fr); }
  .ptb-wide .ptb-cell + .ptb-cell { border-left: 0; border-top: 1px solid var(--line); }
}
.pitch-split .screen, .pitch-split .fig-side { max-width: none; }
@media (min-width: 60em) {
  .pitch-split { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2.5rem, 4vw, 3.75rem); }
  .pitch-split.rev { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .pitch-split .screen { align-self: start; }
}

/* Services, how you hire the office: the three ways read down the left
   column, under the title; the quote and the contract start level with the
   title on the right (Jordan, 2026-10-01). */
@media (min-width: 60em) {
  .price-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2.5rem, 5vw, 4.5rem); }
}
.price-split .pull { margin-top: 0; }
.price-split h2 { margin-top: 0; }
.ways-v { grid-template-columns: minmax(0, 1fr); gap: 1.5rem; margin-top: 1.2rem; }
.ways-v li { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); column-gap: 1rem; row-gap: 0.2rem; align-items: start; }
.ways-v .ways-n { grid-row: 1 / 3; margin: 0; }
.ways-v b { padding-top: 0.45rem; }
.ways-v li:not(:last-child)::after { top: 2.6rem; bottom: -1.5rem; left: 1.3rem; right: auto; width: 1px; height: auto; }
.ways-v li:not(:last-child)::before { top: auto; bottom: -1.5rem; left: calc(1.3rem - 4px); right: auto; border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 7px solid var(--line); border-bottom: 0; }

/* The circles fill with the action colour as each one is seen, and stay
   (Jordan, 2026-10-01: on a phone, as the row slides; everywhere, as the
   list arrives). The fill rises from the bottom of the circle. */
.ways-n {
  background-image: linear-gradient(to top, var(--glg-ember) 50%, var(--glg-bg) 50%);
  background-size: 100% 200%; background-position: 0 0;
  transition: background-position 700ms var(--ease-draw), color 300ms 250ms var(--ease-set), border-color 300ms var(--ease-set);
}
.ways li.seen .ways-n { background-position: 0 100%; border-color: var(--glg-ember); color: var(--glg-on-action); }
.ways li.seen:has(+ li.seen)::after { background: var(--glg-ember); transition: background-color 400ms var(--ease-set); }
.ways:not(.ways-v) li.seen:has(+ li.seen)::before { border-left-color: var(--glg-ember); }
.ways-v li.seen:has(+ li.seen)::before { border-top-color: var(--glg-ember); }

/* The Local Marketplace (Jordan, 2026-10-01). */
#marketplace .status { margin-top: 1.2rem; }

/* The newsletter: left-aligned beside its wordmark (Jordan: "for some reason
   centred ... should be left-aligned ... include the logo of HTLG"). The
   wordmark is drawn here, after the one Jordan sent: dark ground, a gold
   question mark, "with" in a grey serif italic. */
#n-h .htlg-q { color: #9a6a12; }
#n-h .serif { font-weight: 400; color: var(--muted); }
:root[data-theme="dark"] #n-h .htlg-q { color: #e3b252; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) #n-h .htlg-q { color: #e3b252; } }
.nl-split .pull { margin-bottom: 1rem; }
.htlg {
  margin: 0; display: grid; place-content: center; justify-items: center; gap: 0.9rem;
  aspect-ratio: 16 / 10; width: 100%; max-width: 30rem; justify-self: center;
  padding: 1.5rem; border-radius: 14px; background: #10161f; color: #f4efe6; container-type: inline-size;
  box-shadow: 0 26px 50px -32px rgb(10 20 35 / 0.7);
}
.htlg-mark { margin: 0; font-family: var(--glg-font-display); font-weight: 700; font-size: 13.5cqi; letter-spacing: -0.035em; line-height: 1; white-space: nowrap; }
.htlg-mark .htlg-q { color: #e3b252; }
.htlg-w { font-family: var(--glg-font-serif); font-style: italic; font-weight: 400; letter-spacing: 0; color: #9ba5b1; margin-left: 0.12em; }
.htlg-by { font-family: var(--glg-font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: #9ba5b1; }