/* ─────────────────────────────────────────────────────────────
   Triage Engine landing page (served by Flask at "/").
   Ported from the triage-engine Next.js project, app/(main)/globals.css.
   Only two things differ from the original stylesheet:
     1. the three typefaces are self-hosted here (next/font did this in Next.js);
     2. image paths point at /static/brand/.
   Keep design changes in sync with DESIGN.md in the triage-engine project.
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bungee-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bungee";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/bungee-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yellowtail-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Yellowtail";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/yellowtail-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Archivo, variable: weight 100-900 and width 62-125 (the design uses width 84 and 100). */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin.woff2") format("woff2-variations"), url("../fonts/archivo-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-ext.woff2") format("woff2-variations"), url("../fonts/archivo-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* The variables next/font used to set on <html>. */
:root {
  --font-face: "Bungee";
  --font-script: "Yellowtail";
  --font-text: "Archivo";
}

/* ─────────────────────────────────────────────────────────────
   AgendaX: Lagos Signwriter, black on white.
   Gloss-white boards, full black bands, the logo red as the only colour.
   ───────────────────────────────────────────────────────────── */

:root {
  --white: #fdfdfb;
  --black: #0b0b0b;
  --red: #c5081c;
  --chalk-2: #d8d4ca;
  --ink-2: #3b3a37;
  --placeholder: #6a6964;
  --tint: #f3f1ea;

  --ease: cubic-bezier(0.16, 1, 0.3, 1);

  --bar: 72px;
  --stripes: 16px;
  --logo-h: 92px;
  --nudge: 4px;
  --gutter: clamp(20px, 4vw, 56px);
  --rail: 0px;

  --ground: var(--white);
  --fg: var(--black);
  --fg-2: var(--ink-2);
}

@media (min-width: 900px) {
  :root {
    --bar: 96px;
    --logo-h: 128px;
    --nudge: 7px;
  }
}
@media (min-width: 1100px) {
  :root {
    --rail: 96px;
  }
}

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--bar) + var(--stripes) + 24px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--black);
  font-family: var(--font-text), "Helvetica Neue", Arial, sans-serif;
  font-size: clamp(1.0625rem, 0.3vw + 1rem, 1.1875rem);
  line-height: 1.6;
  font-variation-settings: "wdth" 100;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
  padding: 0;
}
ul,
ol {
  list-style: none;
}
img {
  max-width: 100%;
  display: block;
}
a {
  color: inherit;
}
strong {
  font-weight: 700;
}
::selection {
  background: var(--red);
  color: #fff;
}

:focus-visible {
  outline: 3px solid var(--fg);
  outline-offset: 4px;
}

.skip {
  position: fixed;
  left: 16px;
  top: 12px;
  z-index: 100;
  padding: 12px 18px;
  background: var(--black);
  color: var(--white);
  font-weight: 700;
  text-decoration: none;
  transform: translateY(-200%);
}
.skip:focus-visible {
  transform: none;
  outline-color: var(--red);
}

/* ── Grounds ─────────────────────────────────────────────── */

.field {
  --ground: var(--white);
  --fg: var(--black);
  --fg-2: var(--ink-2);
  background: var(--ground);
  color: var(--fg);
}

.band {
  --ground: var(--black);
  --fg: var(--white);
  --fg-2: var(--chalk-2);
  position: relative;
  margin-block: 26px;
  background-color: var(--ground);
  color: var(--fg);
}
/* The twin stripe: every band is announced and closed by a second, detached stripe. */
.band::before,
.band::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: var(--black);
}
.band::before {
  top: -18px;
}
.band::after {
  bottom: -18px;
}
.foot {
  margin-bottom: 0;
}
.foot::after {
  display: none;
}

.wrap {
  max-width: 1400px;
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-left: calc(var(--gutter) + var(--rail));
}

section {
  padding-block: clamp(96px, 11vw, 176px) clamp(88px, 10vw, 160px);
}

/* ── Lettering ───────────────────────────────────────────── */

.painted {
  --g: var(--ground);
  display: block;
  width: fit-content;
  max-width: 100%;
  /* room for the shade, so the paint-on mask never crops it */
  padding: 0 0.16em 0.16em 0;
  font-family: var(--font-face), "Arial Black", sans-serif;
  font-weight: 400;
  line-height: 1.04;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  color: var(--p-face);
  /* a hair of ground, then the cast shade, stepped finely enough to read as one solid */
  text-shadow:
    0.014em 0.014em 0 var(--g), 0.028em 0.028em 0 var(--g), 0.042em 0.042em 0 var(--g),
    0.056em 0.056em 0 var(--p-shade), 0.068em 0.068em 0 var(--p-shade), 0.08em 0.08em 0 var(--p-shade),
    0.092em 0.092em 0 var(--p-shade), 0.104em 0.104em 0 var(--p-shade), 0.116em 0.116em 0 var(--p-shade),
    0.128em 0.128em 0 var(--p-shade), 0.14em 0.14em 0 var(--p-shade);
}
.painted--ink {
  --p-face: var(--fg);
  --p-shade: var(--red);
}
.painted--red {
  --p-face: var(--red);
  --p-shade: var(--fg);
}

.title {
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  margin-bottom: clamp(48px, 6vw, 88px);
}
.title .painted + .painted {
  margin-top: -0.04em;
}

/* Paint-on: a slanted wet edge sweeps lettering into place.
   The hero letters itself on load in pure CSS. Below the fold, Motion marks only what
   starts off-screen (.will-paint), so nothing is ever hidden unless it can be revealed. */
.hero__title .painted,
.will-paint .slogan__text {
  -webkit-mask-image: linear-gradient(100deg, #000 0 40%, transparent 56%);
  mask-image: linear-gradient(100deg, #000 0 40%, transparent 56%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.hero__title .painted {
  animation: paint-on 1.15s var(--ease) 0.15s both;
}
.hero__title .painted + .painted {
  animation-delay: 0.4s;
}
@keyframes paint-on {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}
.will-paint .slogan__text {
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;
}
.will-paint.is-painted .slogan__text {
  -webkit-mask-position: 0 0;
  mask-position: 0 0;
  transition:
    mask-position 1.15s var(--ease),
    -webkit-mask-position 1.15s var(--ease);
}

/* ── Controls ────────────────────────────────────────────── */

.plate {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 58px;
  padding: 0 28px;
  border: 0;
  border-radius: 0;
  background: var(--fg);
  color: var(--ground);
  font-family: var(--font-face), sans-serif;
  font-size: 1rem;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.3s var(--ease), transform 0.2s var(--ease);
}
.plate::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--red);
  clip-path: polygon(0 0, 0 0, -22% 100%, -22% 100%);
  transition: clip-path 0.55s var(--ease);
}
.plate:hover,
.plate:focus-visible {
  color: #fff;
}
.plate:hover::before,
.plate:focus-visible::before {
  clip-path: polygon(0 0, 122% 0, 100% 100%, -22% 100%);
}
.plate:active {
  transform: translateY(2px);
}
.plate svg {
  flex: none;
  transition: transform 0.4s var(--ease);
}
.plate:hover svg {
  transform: translateX(5px);
}
.plate--small {
  min-height: 44px;
  padding: 0 18px;
  font-size: 0.8125rem;
}
.plate--wide {
  width: 100%;
  justify-content: space-between;
}
.plate--ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--fg);
}
.plate--ghost:hover,
.plate--ghost:focus-visible {
  box-shadow: inset 0 0 0 2px var(--red);
}

.textlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  font-size: 0.875rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.textlink span {
  background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 3px no-repeat;
  padding: 0 2px 5px;
  transition: background-size 0.45s var(--ease), color 0.3s var(--ease);
}
.textlink:hover span {
  background-size: 100% 100%;
  color: #fff;
}
.textlink svg {
  transition: transform 0.4s var(--ease);
}
.textlink:hover svg {
  transform: translateY(4px);
}

/* ── The top board ───────────────────────────────────────── */

.bar {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  --fg: var(--black);
  --ground: var(--white);
  color: var(--black);
}
.bar__board {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 12px;
  height: var(--bar);
  padding-inline: var(--gutter);
  background: var(--white);
}
.bar__logo {
  position: relative;
  flex: none;
  align-self: flex-start;
  width: calc(var(--logo-h) * 1.55);
  height: var(--bar);
  margin-right: auto;
}
/* The logo hangs off the board: the X is too big to sit inside it, so it doesn't. */
.bar__logo img {
  position: absolute;
  top: -3px;
  left: 0;
  width: auto;
  max-width: none;
  height: var(--logo-h);
  pointer-events: none;
}
/* the wordmark sits a little below the board's centre, so its neighbours follow it */
.bar__nav,
.bar__cta,
.bar__menu {
  position: relative;
  top: var(--nudge);
}
/* D. on the first board the hero already carries the action, so the header keeps quiet */
.bar__cta {
  transition:
    opacity 0.35s var(--ease),
    visibility 0s,
    color 0.3s var(--ease),
    transform 0.2s var(--ease);
}
:root[data-at="home"] .bar__cta {
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 0.35s var(--ease),
    visibility 0s linear 0.35s;
}
.bar__nav {
  display: none;
}
.bar__nav ul {
  display: flex;
  gap: clamp(20px, 2.6vw, 40px);
}
.bar__nav a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  color: var(--ink-2);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.25s var(--ease);
}
.bar__nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 6px;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s var(--ease);
}
.bar__nav a:hover,
.bar__nav a[aria-current] {
  color: var(--black);
}
.bar__nav a:hover::after,
.bar__nav a[aria-current]::after {
  transform: scaleX(1);
}

.bar__stripes {
  position: relative;
  z-index: 1;
  height: var(--stripes);
  background: linear-gradient(var(--black) 0 6px, var(--white) 6px 10px, var(--black) 10px 16px);
}
/* Compact widths: the stripe is the route line and the X rides it. */
.bar__marker {
  position: absolute;
  top: -5px;
  /* the track starts clear of the hanging logo */
  --track-start: calc(var(--gutter) + var(--logo-h) * 1.55 + 6px);
  left: calc(var(--track-start) + (100% - var(--track-start) - var(--gutter) - 26px) * var(--route, 0));
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--black);
  background: var(--white) url("../brand/agenda-x-mark-96.png") center / 84% no-repeat;
}

.bar__menu summary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 44px;
  min-height: 44px;
  justify-content: center;
  list-style: none;
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.bar__menu summary::-webkit-details-marker {
  display: none;
}
.bar__menu-label {
  display: none;
}
/* Two stripes that cross into the X when the menu opens. */
.bar__menu-icon {
  position: relative;
  width: 26px;
  height: 14px;
}
.bar__menu-icon::before,
.bar__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--black);
  transition: transform 0.45s var(--ease), background-color 0.3s var(--ease);
}
.bar__menu-icon::before {
  top: 0;
}
.bar__menu-icon::after {
  bottom: 0;
}
.bar__menu[open] .bar__menu-icon::before {
  transform: translateY(5px) rotate(40deg);
  background: var(--red);
}
.bar__menu[open] .bar__menu-icon::after {
  transform: translateY(-5px) rotate(-40deg);
  background: var(--red);
}
.bar__sheet {
  position: absolute;
  top: calc(var(--bar) + var(--stripes));
  left: 0;
  right: 0;
  padding: 20px var(--gutter) 32px;
  background: var(--white);
  border-bottom: 10px solid var(--black);
}
.bar__sheet a {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 56px;
  font-family: var(--font-face), sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
  text-decoration: none;
  border-bottom: 2px solid var(--black);
}
.bar__sheet li:last-child a {
  border-bottom: 0;
}
.bar__sheet a[aria-current]::before {
  content: "";
  width: 24px;
  height: 24px;
  background: url("../brand/agenda-x-mark-96.png") center / contain no-repeat;
}

@media (min-width: 480px) {
  .bar__menu-label {
    display: inline;
  }
  .bar__board {
    gap: 20px;
  }
}
@media (max-width: 419px) {
  .bar .plate--small {
    padding-inline: 12px;
    font-size: 0.75rem;
  }
}
@media (min-width: 900px) {
  .bar__nav {
    display: block;
  }
  .bar__menu {
    display: none;
  }
  .bar__board {
    gap: clamp(24px, 3vw, 48px);
  }
}
@media (min-width: 1100px) {
  .bar__marker {
    display: none;
  }
}

/* ── The route rail (wide screens) ───────────────────────── */

.rail,
.rail-marker {
  display: none;
}
@media (min-width: 1100px) {
  .rail,
  .rail-marker {
    display: block;
    position: fixed;
    left: calc(var(--gutter) - 4px);
    top: calc(50% + (var(--bar) + var(--stripes)) / 2);
    height: min(54vh, 480px);
    transform: translateY(-50%);
  }
  .rail {
    z-index: 40;
    mix-blend-mode: difference;
    color: #fff;
    --fg: #fff;
  }
  .rail ol {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .rail li {
    position: relative;
    flex: 1;
  }
  .rail li:last-child {
    flex: 0 0 26px;
  }
  .rail li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 9px;
    top: 30px;
    bottom: 4px;
    width: 8px;
    border-inline: 2px solid currentColor;
  }
  .rail a {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    height: 26px;
    color: inherit;
    text-decoration: none;
  }
  .rail a::before {
    content: "";
    position: absolute;
    inset: -10px -12px;
  }
  .rail__dot {
    flex: none;
    width: 26px;
    height: 26px;
    border: 3px solid currentColor;
    border-radius: 50%;
    transition: transform 0.4s var(--ease);
  }
  .rail a:hover .rail__dot {
    transform: scale(1.18);
  }
  .rail__name {
    font-size: 0.75rem;
    font-weight: 700;
    font-variation-settings: "wdth" 84;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-6px);
    transition: opacity 0.3s var(--ease), transform 0.4s var(--ease);
  }
  .rail:hover .rail__name,
  .rail:focus-within .rail__name {
    opacity: 1;
    transform: none;
  }
  .rail-marker {
    z-index: 41;
    width: 26px;
    pointer-events: none;
  }
  .rail-marker span {
    position: absolute;
    left: -7px;
    top: calc((100% - 26px) * var(--route, 0) - 7px);
    width: 40px;
    height: 40px;
    background: url("../brand/agenda-x-mark-96.png") center / contain no-repeat;
  }
}

/* ── Home ────────────────────────────────────────────────── */

.hero {
  padding-top: calc(var(--bar) + var(--stripes) + clamp(56px, 7vw, 112px));
  padding-bottom: 0;
}
.hero__grid {
  display: grid;
  gap: 8px;
}
.hero__title {
  font-size: clamp(2.75rem, 14vw, 5rem);
  margin-bottom: clamp(28px, 3.4vw, 48px);
}
.hero__title .painted + .painted {
  margin-top: -0.02em;
}
.hero__title .w {
  display: block;
}
.hero__intro {
  max-width: 35rem;
  color: var(--fg-2);
  font-size: clamp(1.125rem, 1vw + 0.9rem, 1.4375rem);
  line-height: 1.5;
}
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 20px 32px;
  margin-top: clamp(32px, 3.6vw, 48px);
}

.hero__sign {
  position: relative;
  padding-top: 46vw;
}
.xmark {
  position: absolute;
  top: -6vw;
  right: -16vw;
  width: 88vw;
  max-width: 560px;
  aspect-ratio: 1;
}
.xmark__stroke {
  position: absolute;
  inset: 0;
  background: url("../brand/agenda-x-mark-1024.png") center / contain no-repeat;
}
.xmark__stroke--a {
  clip-path: polygon(14% 24% , 36% 1%, 104% 67%, 82% 90%);
}
.xmark__stroke--b {
  clip-path: polygon(12% 100%, -7% 76%, 89% -1%, 108% 23%);
}
.xmark__stroke--a {
  animation: stroke-a 0.6s var(--ease) 0.55s both;
}
.xmark__stroke--b {
  animation: stroke-b 0.7s var(--ease) 1s both;
}
.xmark__stroke--full {
  animation: stroke-settle 0.3s linear 1.7s both;
}
@keyframes stroke-a {
  from {
    clip-path: polygon(14% 24%, 36% 1%, 36% 1%, 14% 24%);
  }
  to {
    clip-path: polygon(14% 24%, 36% 1%, 104% 67%, 82% 90%);
  }
}
@keyframes stroke-b {
  from {
    clip-path: polygon(108% 23%, 89% -1%, 89% -1%, 108% 23%);
  }
  to {
    clip-path: polygon(12% 100%, -7% 76%, 89% -1%, 108% 23%);
  }
}
@keyframes stroke-settle {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.board {
  position: relative;
  --fg: var(--white);
  --fg-2: var(--chalk-2);
  --ground: var(--black);
  padding: 38px 36px 34px;
  background: var(--black);
  color: var(--white);
}
.board::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid currentColor;
  pointer-events: none;
}
.routeboard {
  width: min(100%, 400px);
  transform: rotate(-1.2deg);
}
.routeboard__title {
  width: fit-content;
  margin-bottom: 22px;
  font-family: var(--font-script), cursive;
  font-size: 2.25rem;
  line-height: 1;
}
.swash {
  display: block;
  width: 100%;
  height: 0.3em;
  margin-top: 0.08em;
  color: var(--red);
}
.routeboard ol {
  position: relative;
}
.routeboard li {
  position: relative;
  padding-left: 40px;
}
.routeboard li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 20px;
  height: 20px;
  margin-top: -10px;
  border: 3px solid var(--white);
  border-radius: 50%;
  background: var(--black);
  z-index: 1;
}
.routeboard li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 50%;
  height: 100%;
  width: 8px;
  border-inline: 2px solid var(--white);
}
.routeboard a {
  display: flex;
  align-items: center;
  min-height: 48px;
  font-family: var(--font-face), sans-serif;
  font-size: 0.9375rem;
  line-height: 1.15;
  text-transform: uppercase;
  text-decoration: none;
}
.routeboard a:hover {
  text-decoration: underline;
  text-decoration-thickness: 3px;
  text-decoration-color: var(--red);
  text-underline-offset: 5px;
}
.routeboard__last::before {
  border: 0 !important;
  border-radius: 0 !important;
  width: 30px !important;
  height: 30px !important;
  left: -5px !important;
  margin-top: -15px !important;
  background: url("../brand/agenda-x-mark-96.png") center / contain no-repeat !important;
}
.routeboard__last a {
  gap: 12px;
  margin-top: 6px;
}
.routeboard__last svg {
  transition: transform 0.4s var(--ease);
}
.routeboard__last a:hover svg {
  transform: translateX(5px);
}

.strip {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  margin-top: clamp(56px, 7vw, 104px);
  padding-block: 20px;
  border-top: 2px solid var(--black);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.strip li {
  display: inline-flex;
  align-items: center;
}
.strip li:not(:last-child)::after {
  content: "";
  width: 14px;
  height: 14px;
  margin-inline: 14px;
  background: url("../brand/agenda-x-mark-96.png") center / contain no-repeat;
}

@media (min-width: 900px) {
  .hero__grid {
    grid-template-columns: minmax(0, 7fr) minmax(0, 4fr);
    gap: clamp(24px, 3vw, 64px);
    align-items: end;
  }
  .hero__title {
    font-size: clamp(2.75rem, 5.6vw, 6rem);
  }
  .hero__title .w {
    display: inline;
  }
  .hero__sign {
    align-self: stretch;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    padding-top: 0;
    min-height: 520px;
  }
  .xmark {
    top: -9%;
    right: -14%;
    width: 150%;
    max-width: 640px;
  }
}

/* ── Services ────────────────────────────────────────────── */

.routes {
  display: grid;
  gap: clamp(72px, 8vw, 120px);
}
.route {
  display: grid;
  gap: 20px;
}
.route h3 {
  font-family: var(--font-face), sans-serif;
  font-size: clamp(1.5rem, 2.7vw, 2.375rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}
.route > p {
  max-width: 36rem;
  color: var(--fg-2);
  font-size: 1.125rem;
}
.route__stops {
  position: relative;
  display: grid;
  margin-top: 16px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.09em;
  line-height: 1.3;
  text-transform: uppercase;
}
.route__stops::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 8px;
  bottom: 24px;
  width: 8px;
  border-inline: 2px solid var(--fg);
  transform-origin: top;
}
.route__stops li {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 46px;
  padding-left: 44px;
}
.route__stops li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 3px solid var(--fg);
  border-radius: 50%;
  background: var(--ground);
}
.route__stops li:last-child::before {
  background: var(--red);
}

@media (min-width: 900px) {
  .route {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    column-gap: clamp(32px, 5vw, 96px);
    row-gap: 40px;
    align-items: start;
  }
  .route__stops {
    grid-column: 1 / -1;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 0;
  }
  .route__stops::before {
    left: 8px;
    right: calc(20% - 16px);
    top: 7px;
    bottom: auto;
    width: auto;
    height: 8px;
    border-inline: 0;
    border-block: 2px solid var(--fg);
    transform-origin: left;
  }
  .route__stops li {
    display: block;
    min-height: 0;
    padding: 38px 20px 0 0;
  }
  .route__stops li::before {
    top: 0;
    margin-top: 0;
  }
}

/* The line is drawn, then each stop lands in order. */
.route.will-paint .route__stops::before {
  transform: scaleY(0);
}
.route.will-paint .route__stops li::before {
  transform: scale(0);
}
.route.will-paint.is-painted .route__stops::before {
  transform: none;
  transition: transform 1.1s var(--ease);
}
.route.will-paint.is-painted .route__stops li::before {
  transform: none;
  transition: transform 0.6s var(--ease) calc(0.15s + var(--i, 0) * 0.12s);
}
.route__stops li:nth-child(2) {
  --i: 1;
}
.route__stops li:nth-child(3) {
  --i: 2;
}
.route__stops li:nth-child(4) {
  --i: 3;
}
.route__stops li:nth-child(5) {
  --i: 4;
}
@media (min-width: 900px) {
  .route.will-paint .route__stops::before {
    transform: scaleX(0);
  }
}

/* ── Approach ────────────────────────────────────────────── */

.approach__grid,
.about__grid,
.contact__grid {
  display: grid;
  gap: clamp(56px, 7vw, 96px);
}
.prose {
  max-width: 38rem;
}
.prose p + p {
  margin-top: 1.4em;
}
.prose p {
  color: var(--fg-2);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  line-height: 1.6;
}
.prose strong {
  color: var(--fg);
}

.prose .slogan,
.slogan--band {
  width: fit-content;
  margin-block: clamp(48px, 5vw, 72px) clamp(52px, 5.4vw, 80px);
  color: var(--red);
  font-family: var(--font-script), cursive;
  font-size: clamp(2.75rem, 5.6vw, 4.75rem);
  line-height: 1.02;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.slogan--band {
  margin: clamp(88px, 9vw, 144px) 0 0 auto;
  color: var(--white);
  font-size: clamp(2.5rem, 5vw, 4.25rem);
  transform: rotate(-3deg);
  transform-origin: right center;
}
.slogan.slogan--band .swash {
  color: var(--red);
}
.slogan__text {
  display: block;
  padding-right: 0.15em;
}
.slogan .swash {
  color: var(--fg);
  height: 0.22em;
  margin-top: 0.14em;
}

.signpost {
  position: relative;
  display: grid;
  gap: 22px;
  padding-block: 28px 72px;
  align-content: start;
}
/* the pole */
.signpost::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 22px;
  border-radius: 11px 11px 0 0;
  background: var(--black);
}
.signpost__board {
  position: relative;
  padding: 26px 28px 26px 76px;
  transform-origin: 33px 50%;
}
.signpost__board:nth-child(odd) {
  --fg: var(--white);
  --fg-2: var(--chalk-2);
  margin-right: clamp(0px, 4vw, 48px);
  background: var(--black);
  color: var(--white);
  transform: rotate(-0.7deg);
}
.signpost__board:nth-child(even) {
  --fg: var(--black);
  --fg-2: var(--ink-2);
  background: var(--white);
  color: var(--black);
  box-shadow: inset 0 0 0 3px var(--black);
  transform: rotate(0.6deg);
}
/* the bolts that hold each board to the pole */
.signpost__board::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 0;
  bottom: 0;
  width: 22px;
  background:
    radial-gradient(circle at 50% 18px, var(--fg) 0 5px, transparent 6px),
    radial-gradient(circle at 50% calc(100% - 18px), var(--fg) 0 5px, transparent 6px);
}
.signpost__board h3 {
  margin-bottom: 8px;
  font-family: var(--font-face), sans-serif;
  font-size: clamp(1.125rem, 1.5vw, 1.375rem);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
}
.signpost__board p {
  max-width: 34rem;
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.55;
}
.signpost.will-paint .signpost__board {
  transform: rotate(-9deg);
  clip-path: inset(0 100% 0 0);
}
.signpost.will-paint.is-painted .signpost__board {
  clip-path: inset(-10% -10% -10% -10%);
  transition:
    transform 1s var(--ease) calc(var(--i, 0) * 0.11s),
    clip-path 0.8s var(--ease) calc(var(--i, 0) * 0.11s);
}
.signpost.will-paint.is-painted .signpost__board:nth-child(odd) {
  transform: rotate(-0.7deg);
}
.signpost.will-paint.is-painted .signpost__board:nth-child(even) {
  transform: rotate(0.6deg);
}
.signpost__board:nth-child(2) {
  --i: 1;
}
.signpost__board:nth-child(3) {
  --i: 2;
}
.signpost__board:nth-child(4) {
  --i: 3;
}

@media (min-width: 900px) {
  .approach__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);
    align-items: start;
  }
  .about__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    align-items: start;
  }
  .contact__grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

/* ── About ───────────────────────────────────────────────── */

.about__meta {
  margin-top: 2.4em !important;
  font-size: 0.875rem !important;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.08em;
  line-height: 1.8 !important;
  text-transform: uppercase;
}
.about__meta a {
  text-transform: none;
  letter-spacing: 0.02em;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.founders {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(28px, 3vw, 44px);
}
.portrait__frame {
  --fg: var(--black);
  --ground: var(--white);
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--white);
  color: var(--black);
  overflow: hidden;
}
@media (max-width: 559px) {
  .portrait__frame:has(.portrait__blank) {
    aspect-ratio: 3 / 2;
  }
}
.portrait__frame::after {
  content: "";
  position: absolute;
  inset: 10px;
  border: 2px solid var(--black);
  pointer-events: none;
}
.portrait__frame img {
  object-fit: cover;
}
.portrait:nth-child(odd) .portrait__frame {
  transform: rotate(-0.8deg);
}
.portrait:nth-child(even) .portrait__frame {
  transform: rotate(0.7deg);
}
.portrait__blank {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: repeating-linear-gradient(135deg, transparent 0 15px, rgba(11, 11, 11, 0.07) 15px 17px);
}
.portrait__initials {
  font-size: clamp(2.5rem, 4.6vw, 4rem);
}
.portrait__tag {
  position: absolute;
  left: 50%;
  bottom: 28px;
  transform: translateX(-50%);
  padding: 7px 12px;
  background: var(--black);
  color: var(--white);
  font-size: 0.6875rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}
.portrait figcaption {
  margin-top: 26px;
}
.portrait h3 span {
  white-space: nowrap;
}
.portrait h3 {
  font-family: var(--font-face), sans-serif;
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
}
.portrait__role {
  margin-block: 10px 14px;
  color: var(--fg);
  font-size: 0.75rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.1em;
  line-height: 1.4;
  text-transform: uppercase;
}
.portrait figcaption p:last-child {
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.55;
}

/* ── Contact ─────────────────────────────────────────────── */

.title--contact {
  font-size: clamp(2.25rem, 3.7vw, 3.5rem);
  margin-bottom: clamp(28px, 3vw, 40px);
}
.contact__lede {
  max-width: 30rem;
  color: var(--fg-2);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
}
.details {
  display: grid;
  gap: 22px;
  margin-top: clamp(40px, 4.5vw, 64px);
  padding-top: 28px;
  border-top: 2px solid var(--black);
}
.details dt {
  color: var(--fg-2);
  font-size: 0.75rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.details dd {
  margin-top: 2px;
  font-size: 1.125rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}
.details a {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 5px;
}

.waybill {
  position: relative;
  display: grid;
  gap: 26px;
  padding: clamp(30px, 4vw, 56px);
  background: var(--white);
  box-shadow: inset 0 0 0 3px var(--black);
}
.waybill::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1.5px solid var(--black);
  pointer-events: none;
}
.waybill__row {
  display: grid;
  gap: 26px;
}
@media (min-width: 560px) {
  .waybill__row {
    grid-template-columns: 1fr 1fr;
  }
}
.entry label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.entry input,
.entry select,
.entry textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: 10px 2px 9px;
  border: 0;
  border-bottom: 2px solid var(--black);
  border-radius: 0;
  background: transparent;
  color: var(--black);
  font: inherit;
  font-size: 1.0625rem;
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), border-color 0.25s var(--ease);
}
.entry textarea {
  min-height: 136px;
  line-height: 1.5;
  resize: vertical;
}
.entry select {
  appearance: none;
  padding-right: 36px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' fill='none'%3E%3Cpath d='m4.5 8 6.5 6.5L17.5 8' stroke='%230b0b0b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    right 4px center no-repeat;
  cursor: pointer;
}
.entry select:has(option[value=""]:checked) {
  color: var(--placeholder);
}
.entry ::placeholder {
  color: var(--placeholder);
  opacity: 1;
}
.entry input:hover,
.entry select:hover,
.entry textarea:hover {
  background-color: var(--tint);
}
.entry input:focus-visible,
.entry select:focus-visible,
.entry textarea:focus-visible {
  outline: none;
  border-bottom-color: var(--red);
  box-shadow: 0 3px 0 var(--red);
  background-color: var(--tint);
}
.entry [aria-invalid="true"] {
  border-bottom-color: var(--red);
}
.entry__error {
  margin-top: 8px;
  color: var(--red);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.4;
}

.waybill--ready {
  gap: 20px;
}
.waybill--ready:focus {
  outline: none;
}
.waybill__title {
  font-family: var(--font-face), sans-serif;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 400;
  line-height: 1.1;
  text-transform: uppercase;
}
.waybill--ready p {
  max-width: 34rem;
  color: var(--fg-2);
}
.waybill--ready strong {
  color: var(--fg);
  overflow-wrap: anywhere;
}
.waybill__note {
  padding: 12px 16px;
  background: var(--tint);
}
.waybill__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
}
.waybill__preview {
  max-height: 220px;
  margin: 0;
  padding: 16px 18px;
  overflow: auto;
  background: var(--tint);
  color: var(--black);
  font: inherit;
  font-size: 0.9375rem;
  line-height: 1.55;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.waybill .textlink {
  justify-self: start;
}

/* ── Foot ────────────────────────────────────────────────── */

.foot {
  padding-block: clamp(56px, 6vw, 88px) clamp(40px, 4vw, 56px);
}
.foot__grid {
  display: grid;
  gap: 24px;
  align-items: end;
}
.foot__logo {
  width: auto;
  height: clamp(130px, 14vw, 190px);
  margin-left: -8px;
}
.foot__tagline {
  font-family: var(--font-script), cursive;
  font-size: clamp(2rem, 3.6vw, 3.25rem);
  line-height: 1.05;
}
.foot__copy {
  margin-top: 14px;
  color: var(--fg-2);
  font-size: 0.875rem;
}
@media (min-width: 900px) {
  .foot__grid {
    grid-template-columns: auto 1fr;
    gap: 48px;
  }
  .foot__words {
    text-align: right;
    padding-bottom: 18px;
  }
}

/* ── Reduced motion: everything arrives already painted ──── */

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .hero__title .painted,
  .will-paint .slogan__text {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .route.will-paint .route__stops::before,
  .route.will-paint .route__stops li::before {
    transform: none;
  }
  .signpost.will-paint .signpost__board {
    clip-path: none;
  }
  .signpost.will-paint .signpost__board:nth-child(odd) {
    transform: rotate(-0.7deg);
  }
  .signpost.will-paint .signpost__board:nth-child(even) {
    transform: rotate(0.6deg);
  }
}

/* ─────────────────────────────────────────────────────────────
   Triage Engine (home). Same world, new boards.
   ───────────────────────────────────────────────────────────── */

h4,
blockquote {
  margin: 0;
  padding: 0;
}

/* a condensed plate label, reused by every small heading on this page */
.whynow h4,
.signals h4,
.phases h4,
.sheet h4 {
  color: var(--fg);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.1em;
  line-height: 1.3;
  text-transform: uppercase;
}

/* three-line tagline: the longest line is eleven letters */
.hero__title--three {
  font-size: clamp(2.25rem, 10.4vw, 4rem);
}
@media (min-width: 900px) {
  .hero__title--three {
    font-size: clamp(2.75rem, 5.6vw, 6rem);
  }
}

/* status tags */
.tag {
  display: inline-block;
  width: fit-content;
  padding: 8px 14px 7px;
  font-size: 0.75rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
.tag--done {
  background: var(--red);
  color: #fff;
}
.tag--open {
  color: var(--fg);
  box-shadow: inset 0 0 0 2px var(--fg);
}

/* ── Problem ── */
.problem__grid {
  display: grid;
  gap: clamp(56px, 6vw, 96px);
}
.slogan--band.slogan--problem {
  margin: 0 0 0 auto;
}
.whynow {
  margin-top: clamp(80px, 9vw, 136px);
  padding-top: 32px;
  border-top: 2px solid var(--fg);
}
.whynow__title {
  margin-bottom: clamp(32px, 4vw, 48px);
  font-family: var(--font-face), sans-serif;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  font-weight: 400;
  line-height: 1.15;
  text-transform: uppercase;
}
.whynow__list {
  display: grid;
  gap: 36px;
}
.whynow__list h4 {
  margin-bottom: 10px;
}
.whynow__list p {
  max-width: 26rem;
  color: var(--fg-2);
  font-size: 1.0625rem;
  line-height: 1.55;
}
@media (min-width: 900px) {
  .problem__grid {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
  .whynow__list {
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(32px, 4vw, 72px);
  }
}

/* ── Engine: three boards on one pole ── */
.engine__lede {
  max-width: 40rem;
  margin-top: calc(-1 * clamp(16px, 2.4vw, 40px));
  margin-bottom: clamp(56px, 6vw, 96px);
  color: var(--fg-2);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
}
.mast {
  --pole-x: clamp(8px, 2vw, 32px);
  --pole-w: clamp(16px, 2vw, 28px);
  position: relative;
  display: grid;
  gap: clamp(36px, 4vw, 64px);
  padding-block: 20px clamp(80px, 9vw, 136px);
}
.mast::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pole-x);
  width: var(--pole-w);
  border-radius: 14px 14px 0 0;
  background: var(--black);
}
.stage {
  --pad: clamp(26px, 4.4vw, 68px);
  position: relative;
  padding: var(--pad);
  padding-left: calc(var(--pole-x) + var(--pole-w) + clamp(20px, 3vw, 44px));
  scroll-margin-top: calc(var(--bar) + var(--stripes) + 24px);
  transform-origin: calc(var(--pole-x) + var(--pole-w) / 2) 50%;
}
.stage--black {
  --ground: var(--black);
  --fg: var(--white);
  --fg-2: var(--chalk-2);
  background: var(--black);
  color: var(--white);
}
.stage--white {
  --ground: var(--white);
  --fg: var(--black);
  --fg-2: var(--ink-2);
  background: var(--white);
  color: var(--black);
  box-shadow: inset 0 0 0 3px var(--black);
}
.stage:nth-child(odd) {
  transform: rotate(-0.35deg);
}
.stage:nth-child(even) {
  transform: rotate(0.3deg);
}
/* bolts */
.stage::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--pole-x);
  width: var(--pole-w);
  background:
    radial-gradient(circle at 50% 28px, var(--fg) 0 6px, transparent 7px),
    radial-gradient(circle at 50% calc(100% - 28px), var(--fg) 0 6px, transparent 7px);
}
/* inset rule, clear of the pole */
.stage::after {
  content: "";
  position: absolute;
  inset: 12px 12px 12px calc(var(--pole-x) + var(--pole-w) + 8px);
  border: 2px solid currentColor;
  pointer-events: none;
}
.stage__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px 24px;
  margin-bottom: clamp(22px, 3vw, 40px);
}
.stage__head h3 {
  font-size: clamp(2.25rem, 5vw, 4.25rem);
  font-weight: 400;
}
.stage__body {
  display: grid;
  gap: clamp(36px, 4vw, 64px);
}
.stage__prose {
  display: grid;
  gap: 1.2em;
  align-content: start;
  max-width: 38rem;
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.6;
}
.stage__sources {
  margin-top: clamp(36px, 4vw, 56px);
}
@media (min-width: 900px) {
  .stage__body--split {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    align-items: start;
  }
}

.signals li {
  padding-block: 18px;
  border-top: 2px solid var(--fg);
}
.signals li:last-child {
  border-bottom: 2px solid var(--fg);
}
.signals h4 {
  margin-bottom: 6px;
}
.signals p {
  color: var(--fg-2);
  font-size: 1rem;
  line-height: 1.5;
}

.tiers {
  display: grid;
  gap: 12px;
  margin-top: clamp(36px, 4vw, 56px);
}
.tier {
  display: grid;
  gap: 10px;
  align-content: start;
  padding: 20px 22px 22px;
}
.tier--plain {
  box-shadow: inset 0 0 0 2px var(--fg);
}
.tier--black {
  background: var(--fg);
  color: var(--ground);
}
.tier--red {
  background: var(--red);
  color: #fff;
}
.tier__name {
  font-family: var(--font-face), sans-serif;
  font-size: 1.125rem;
  line-height: 1;
  text-transform: uppercase;
}
.tier__name--red {
  padding: 7px 10px 6px;
  background: var(--red);
  color: #fff;
  font-size: 0.875rem;
}
.tier__body {
  font-size: 1rem;
  line-height: 1.45;
}
@media (min-width: 700px) {
  .tiers {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* the drafted sheet: a synthetic example, labelled as one */
.sheet {
  --ground: var(--white);
  --fg: var(--black);
  --fg-2: var(--ink-2);
  padding: clamp(22px, 2.6vw, 36px);
  background: var(--white);
  color: var(--black);
  transform: rotate(0.8deg);
}
.sheet__label {
  width: fit-content;
  margin-bottom: 22px;
  padding: 7px 12px 6px;
  background: var(--black);
  color: var(--white);
  font-size: 0.75rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.1em;
  line-height: 1.2;
  text-transform: uppercase;
}
.sheet__flag {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  font-size: 0.875rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.sheet__finding {
  margin-block: 12px 24px;
  color: var(--ink-2);
  font-size: 1rem;
  line-height: 1.5;
}
.sheet h4 {
  margin-bottom: 8px;
  color: var(--ink-2);
  font-size: 0.75rem;
}
.sheet blockquote {
  margin-bottom: 24px;
  padding: 16px 18px;
  background: var(--tint);
  font-size: 1.0625rem;
  line-height: 1.5;
}
.sheet__cols {
  display: grid;
  gap: 20px;
}
.sheet__cols li {
  padding-block: 6px;
  border-top: 1.5px solid var(--black);
  font-size: 0.9375rem;
  line-height: 1.35;
}
.sheet__cols ol {
  counter-reset: step;
}
.sheet__cols ol li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 1.4em 1fr;
}
.sheet__cols ol li::before {
  content: counter(step);
  font-weight: 700;
}
@media (min-width: 520px) {
  .sheet__cols {
    grid-template-columns: 1fr 1fr;
  }
}

/* boards swing onto the pole as they arrive */
.stage.will-paint {
  transform: rotate(-3deg);
  clip-path: inset(0 100% 0 0);
}
.stage.will-paint.is-painted {
  clip-path: inset(-5% -5% -5% -5%);
  transition:
    transform 1.1s var(--ease),
    clip-path 0.9s var(--ease);
}
.stage.will-paint.is-painted:nth-child(odd) {
  transform: rotate(-0.35deg);
}
.stage.will-paint.is-painted:nth-child(even) {
  transform: rotate(0.3deg);
}

/* ── Status and roadmap ── */
.standing {
  display: grid;
  gap: 44px;
  margin-bottom: clamp(80px, 9vw, 136px);
}
.standing .tag {
  margin-bottom: 18px;
}
.standing p:not(.tag) {
  max-width: 34rem;
  color: var(--fg-2);
  font-size: clamp(1.125rem, 0.5vw + 1rem, 1.3125rem);
  line-height: 1.55;
}
@media (min-width: 900px) {
  .standing {
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 112px);
  }
}
.phases li {
  display: block;
  min-height: 0;
  padding-bottom: 30px;
}
.phases li::before {
  top: 0;
  margin-top: 0;
}
.phases h4 {
  margin-bottom: 8px;
}
.phases p {
  max-width: 22rem;
  color: var(--fg-2);
  font-size: 1rem;
  font-weight: 400;
  font-variation-settings: "wdth" 100;
  letter-spacing: 0;
  line-height: 1.5;
  text-transform: none;
}
@media (min-width: 900px) {
  .route__stops.phases {
    grid-template-columns: repeat(4, 1fr);
  }
  .route__stops.phases::before {
    right: calc(25% - 16px);
  }
  .phases li {
    padding-bottom: 0;
  }
}

/* ── The maker ── */
.disciplines {
  margin-block: 36px 28px;
  border-top: 2px solid var(--fg);
}
.disciplines li {
  padding-block: 15px 13px;
  border-bottom: 2px solid var(--fg);
  font-family: var(--font-face), sans-serif;
  font-size: 1rem;
  line-height: 1.15;
  text-transform: uppercase;
}
.founders--field .portrait__frame {
  box-shadow: inset 0 0 0 3px var(--black);
}

/* ── Waitlist ── */
.details {
  border-top-color: var(--fg);
}
.waybill {
  --ground: var(--white);
  --fg: var(--black);
  --fg-2: var(--ink-2);
  color: var(--black);
}
.waybill__fine {
  margin-top: -6px;
  color: var(--ink-2);
  font-size: 0.875rem;
}
.waybill__fine a {
  color: var(--black);
  font-weight: 700;
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 4px;
}

/* ── Foot variants ── */
.foot--field {
  margin: 0;
}
.foot__link {
  margin-top: 14px;
  font-size: 0.8125rem;
  font-weight: 700;
  font-variation-settings: "wdth" 84;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}
.foot__link a {
  text-decoration-thickness: 2px;
  text-decoration-color: var(--red);
  text-underline-offset: 5px;
}

@media (prefers-reduced-motion: reduce) {
  .stage.will-paint {
    clip-path: none;
  }
  .stage.will-paint:nth-child(odd) {
    transform: rotate(-0.35deg);
  }
  .stage.will-paint:nth-child(even) {
    transform: rotate(0.3deg);
  }
}

/* ── The team ── */
.team__intro {
  display: grid;
  gap: clamp(56px, 6vw, 96px);
  margin-bottom: clamp(72px, 8vw, 120px);
}
.slogan.slogan--mission {
  width: fit-content;
  margin: 0 0 clamp(36px, 4vw, 52px);
  color: var(--red);
  font-family: var(--font-script), cursive;
  font-size: clamp(2.75rem, 5.2vw, 4.5rem);
  line-height: 1.02;
  transform: rotate(-4deg);
  transform-origin: left center;
}
.mission__line {
  max-width: 28rem;
  color: var(--fg-2);
  font-size: clamp(1.0625rem, 0.4vw + 1rem, 1.25rem);
  line-height: 1.55;
}
@media (min-width: 900px) {
  .team__intro {
    grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);
    align-items: end;
  }
  .founders--three {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* round-two fixes */
.plate--small {
  white-space: nowrap;
}
/* on narrow phones the hero plate and the menu carry the action; the header stays clear */
@media (max-width: 479px) {
  .bar__cta {
    display: none;
  }
}
/* an empty frame should not cost more room than the bio beneath it */
@media (min-width: 900px) {
  .founders--three .portrait__frame:has(.portrait__blank) {
    aspect-ratio: 4 / 3;
  }
}

/* finish-review fixes, home page */

/* 6. one pole, planted: it runs through the gap and the detached stripe into the black band below */
.engine {
  padding-bottom: 0;
}
.mast {
  padding-bottom: clamp(88px, 10vw, 160px);
}
.mast::before {
  bottom: -26px;
}

/* 7. the hero board reads as a sign, not a menu */
.routeboard--sign a {
  min-height: 56px;
  font-size: clamp(1.125rem, 1.7vw, 1.5rem);
}
.routeboard--sign .routeboard__last a {
  font-size: clamp(1rem, 1.3vw, 1.1875rem);
}

/* 8. red means a terminus or Critical; a source list has neither */
.stage__sources li:last-child::before {
  background: var(--ground);
}

/* 5. on phones the drafted statement is the proof moment; give it the width */
@media (max-width: 559px) {
  .stage {
    --pad: 22px;
    padding-right: 20px;
  }
  .stage:nth-child(odd),
  .stage:nth-child(even),
  .stage.will-paint.is-painted:nth-child(odd),
  .stage.will-paint.is-painted:nth-child(even) {
    transform: none;
  }
  .sheet {
    padding: 16px;
    transform: none;
  }
  .sheet blockquote {
    padding: 0;
    background: none;
    font-size: 1.0625rem;
  }
}

/* Boards are content. They are never hidden while waiting: they only hang a little crooked
   and swing true when reached. If no script ever runs, every board is still fully readable. */
.stage.will-paint,
.signpost.will-paint .signpost__board {
  clip-path: none;
}
.stage.will-paint.is-painted,
.signpost.will-paint.is-painted .signpost__board {
  clip-path: none;
}

/* ── Additions for the Flask site (not in the Next.js original) ── */

/* The form hides while its confirmation shows; .waybill sets display: grid, so
   the hidden attribute needs this to win. */
.waybill[hidden] {
  display: none;
}

/* Spam trap: a field people never see or fill in, so bots that fill every field
   give themselves away. Kept off-screen rather than display:none, which some bots skip. */
.waybill__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* While the request is sending. */
.plate[aria-busy="true"] {
  cursor: progress;
  opacity: 0.72;
}

/* Bug fix, also present in the Next.js original: the brushed X bleeds past the
   right edge of the hero on purpose, but on phones and tablets that overflow made
   the browser lay the whole page out wider than the screen and shrink it to fit
   (a 390px phone rendered at 432px, a 768px tablet at 860px). Clipping the hero
   sideways keeps the visible bleed and fixes the width. Apply to globals.css too. */
.hero,
.engine {
  overflow-x: clip;
}
/* Same for Engine: its boards hang a third of a degree off level, and between
   about 560px and 680px wide their corners poked past the screen edge. */

/* Sign-in for existing clients. Not a stop on the page's route, so it is set
   apart: a short rule before it in the desktop nav, a black stripe above it in
   the compact menu, and a text link in the bar on small phones. */
.bar__nav-signin {
  display: flex;
  align-items: center;
  gap: clamp(20px, 2.6vw, 40px);
}
.bar__nav-signin::before {
  content: "";
  width: 2px;
  height: 18px;
  background: var(--black);
}
.bar__nav .bar__nav-signin a {
  color: var(--black);
}
.bar__signin {
  position: relative;
  top: var(--nudge);
  flex: none;
  min-height: 44px;
  font-size: 0.75rem;
}
@media (min-width: 480px) {
  .bar__signin {
    display: none;
  }
}
.bar__sheet .bar__sheet-signin {
  margin-top: 10px;
  border-top: 10px solid var(--black);
}

/* Bug fix, also in the Next.js original: .bar__menu is position: relative (for its
   nudge), so the sheet's left: 0 / right: 0 measured against the 44px menu button
   and the menu opened as a narrow column. Pin the sheet under the header, full width,
   and let it scroll on short screens. Apply to globals.css too. */
.bar__sheet {
  position: fixed;
  max-height: calc(100vh - var(--bar) - var(--stripes));
  max-height: calc(100dvh - var(--bar) - var(--stripes));
  overflow-y: auto;
}