/* Hallmark · macrostructure: Poster stack · headline across the top over a text-and-visual hero, then a chip-switched service board, a numbered five-step strip, a proof ledger and one closing band (no alternating diptychs) · nav: N1b, Menu button under 900px · footer: Ft2 inline line
 * theme: custom "Forest poster" · vibe: "forest poster, wide type, plain and calm" · ground: oklch(46.9% 0.097 164) · paper: oklch(97.7% 0.007 81)
 * display: Archivo 900 wdth 112 · body: Archivo 500 wdth 100 · axes: mid (forest ground) / display-wide-sans / chromatic-green · tone: utilitarian, warm · anchor hue: 164
 * enrichment: E5 hand-built flat SVG (five service scenes) · studied: no · pre-emit critique: P4 H4 E4 S5 R4 V4
 * contact page: info cards beside one paper form card (form first on phones) · form: real labels, radio pills, error summary, no placeholders · pre-emit critique: P4 H4 E4 S4 R5 V3
 */

/* ---------- Base ---------- */

html,
body {
  overflow-x: clip;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-ground);
  color: var(--color-on-ground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-body);
  font-stretch: var(--font-width-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

/* Long heading words carry soft hyphens. They stay off at normal size, where every word fits, and
   are switched on only when the text is large for the screen (see "Large text" below). */
h1,
h2,
h3 {
  font-style: normal;
  min-width: 0;
  hyphens: none;
}

h1,
h2 {
  overflow-wrap: anywhere;
}

h3 {
  overflow-wrap: break-word;
}

.nowrap {
  white-space: nowrap;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
}

svg {
  display: block;
}

.icon {
  width: 1.375rem;
  height: 1.375rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.wrap {
  box-sizing: border-box;
  width: 100%;
  max-width: var(--space-page-max);
  margin-inline: auto;
  padding-inline: var(--space-gutter);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ---------- Focus: always visible, never animated ---------- */

:focus-visible {
  outline: var(--rule-thin) solid var(--color-focus-on-ground);
  outline-offset: 2px;
  box-shadow: 0 0 0 6px var(--color-focus-halo);
}

.svc__board :focus-visible,
.how :focus-visible,
.close :focus-visible,
.site-nav.is-panel :focus-visible,
.page :focus-visible {
  outline-color: var(--color-focus-on-surface);
  box-shadow: none;
}

.skip {
  position: absolute;
  z-index: var(--z-skip);
  top: var(--space-xs);
  left: var(--space-gutter);
  display: inline-flex;
  align-items: center;
  min-height: var(--space-tap);
  padding: 0 var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  transform: translateY(-200%);
}

.skip:focus {
  transform: none;
}

main:focus {
  outline: none;
  box-shadow: none;
}

/* ---------- Buttons ---------- */

.btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 3rem;
  padding: 0 var(--space-lg);
  border: var(--rule-thin) solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}

.btn .icon {
  width: 1.125rem;
  height: 1.125rem;
}

/* One hover signal per element: an underline. Pressing nudges 1px. */
.btn:hover,
.chip:hover,
.site-nav a:hover {
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--underline-offset);
}

.btn:active,
.chip:active,
.menu-btn:active {
  transform: translateY(1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .chip,
  .menu-btn {
    transition: none;
  }

  .btn:active,
  .chip:active,
  .menu-btn:active {
    transform: none;
  }
}

.btn--light {
  background: var(--color-surface);
  color: var(--color-mark);
}

.btn--outline {
  border-color: var(--color-on-ground);
  color: var(--color-on-ground);
}

.btn--forest {
  background: var(--color-ground);
  color: var(--color-on-ground);
}

.btn--lg {
  min-height: 3.5rem;
  padding: 0 var(--space-lg);
  font-size: var(--text-base);
}

.btn--xl {
  min-height: 4rem;
  padding: 0 var(--space-xl);
  font-size: var(--text-lg);
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  color: var(--color-on-fill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
  line-height: 1.4;
  white-space: nowrap;
}

/* ---------- Header ---------- */

.site-head {
  position: relative;
  z-index: var(--z-menu);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
  padding-block: var(--space-md);
}

.wordmark {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-tap);
  font-family: var(--font-display);
  font-size: var(--text-wordmark);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  letter-spacing: -0.02em;
  line-height: 1;
  text-decoration: none;
  min-width: 0;
}

/* If the wordmark and the buttons cannot share a line (large text settings), the buttons drop to
   the next line instead of overlapping the wordmark. */
.site-head__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-xs);
  margin-left: auto;
}

.site-nav {
  order: 3;
  flex: 1 1 100%;
}

.site-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-lg);
}

.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-tap);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
  text-decoration: none;
  white-space: nowrap;
}

.menu-btn {
  display: none;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  min-width: 3rem;
  min-height: 3rem;
  padding: 0 var(--space-md) 0 var(--space-sm);
  border: var(--rule-thin) solid var(--color-on-ground);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-on-ground);
  font-family: var(--font-body);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}

.menu-btn[aria-expanded="true"] {
  background: var(--color-surface);
  color: var(--color-mark);
}

/* With JavaScript the links fold into the Menu button; without it they stay as a wrapped row. */
.js .menu-btn {
  display: inline-flex;
}

.js .site-nav {
  display: none;
}

.js .site-nav.is-panel {
  display: block;
  padding: var(--space-xs) var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.js .site-nav.is-panel ul {
  flex-direction: column;
  gap: 0;
}

.js .site-nav.is-panel li + li {
  border-top: var(--rule-hair) solid var(--color-rule-on-surface);
}

.js .site-nav.is-panel a {
  display: flex;
  min-height: 3.25rem;
  font-size: var(--text-base);
  /* With a large text setting a link may wrap inside the panel rather than run past the screen
     edge; at normal size every link fits on one line. */
  white-space: normal;
  overflow-wrap: anywhere;
}

.site-head .btn--light {
  padding: 0 var(--space-md);
}

/* On the landing page, phones show the wordmark and Menu only; the hero carries the main button. */
.site-head .site-head__cta {
  display: none;
}

@media (min-width: 37.5rem) {
  .site-head .site-head__cta {
    display: inline-flex;
  }
}

@media (min-width: 56.25rem) {
  .site-nav,
  .js .site-nav {
    display: block;
    order: 0;
    flex: 1 1 auto;
  }

  .site-nav ul {
    justify-content: center;
    gap: 0 var(--space-xl);
  }

  .site-head__actions {
    margin-left: 0;
  }

  .site-head .btn--light {
    padding: 0 var(--space-lg);
  }

  .js .menu-btn {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  padding-block: clamp(1.5rem, 4.5vw, 4rem) clamp(3.5rem, 7vw, 6.5rem);
}

.hero__kicker {
  margin-bottom: var(--space-md);
  color: var(--color-on-ground-soft);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
}

/* A line of items with drawn separators (·). Each item carries its separator just before it, inside
   the gap; the line is shifted left by one gap and that strip is clipped, so a separator that would
   start a wrapped line is never seen, and none can end a line. */
.seps {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--space-sep));
  clip-path: inset(-0.5em -0.5em -0.5em var(--space-sep));
}

.seps > * {
  position: relative;
  margin-left: var(--space-sep);
}

.seps > * + *::before {
  content: "·";
  position: absolute;
  left: calc(-1 * var(--space-sep));
  width: var(--space-sep);
  text-align: center;
}

.hero__title {
  max-width: 19ch;
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero__grid {
  display: grid;
  gap: var(--space-2xl);
  margin-top: clamp(1.75rem, 4vw, 3.5rem);
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  min-width: 0;
}

.hero__lede {
  max-width: 35rem;
  font-size: var(--text-lg);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  width: 100%;
}

@media (max-width: 29.99rem) {
  .hero .hero__actions .btn {
    flex: 1 1 100%;
  }
}

.hero__facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));
  gap: var(--space-md) var(--space-xl);
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: var(--space-lg);
  border-top: var(--rule-thin) solid var(--color-on-ground);
}

.hero__facts li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-weight: var(--font-weight-strong);
}

.hero__facts .icon {
  margin-top: var(--space-3xs);
}

/* The sign-off visual: a quote, then your yes, then the log line. Real text, not a picture. */

.signoff {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 35rem;
  min-width: 0;
}

.signoff__draft {
  box-sizing: border-box;
  width: 88%;
  padding: var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.signoff__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-sm);
}

.signoff__name {
  font-size: var(--text-base);
  font-weight: var(--font-weight-heading);
}

.signoff__lines {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-md);
}

.signoff__lines span {
  display: block;
  height: 0.625rem;
  border-radius: var(--radius-pill);
  background: var(--color-fill);
}

.signoff__lines span:nth-child(1) { width: 92%; }
.signoff__lines span:nth-child(2) { width: 74%; }
.signoff__lines span:nth-child(3) { width: 84%; }

.signoff__wait {
  display: inline-flex;
  margin-top: var(--space-md);
  padding: var(--space-2xs) var(--space-md);
  border-radius: var(--radius-pill);
  background: var(--color-ground);
  color: var(--color-on-ground);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

.signoff__link {
  display: block;
  width: 0;
  height: 1.75rem;
  margin-left: 20%;
  border-left: var(--rule-drawing) dotted var(--color-on-ground);
}

.signoff__link--late {
  margin-left: 62%;
}

.signoff__yes {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xs) var(--space-xl) var(--space-xs) var(--space-xs);
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: min(clamp(1.5rem, 1.2rem + 1.2vw, 2rem), 18vw);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: 1;
  white-space: nowrap;
}

.signoff__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-ground);
  color: var(--color-on-ground);
}

.signoff__check .icon {
  width: 1.75rem;
  height: 1.75rem;
  stroke-width: 3;
}

.signoff__log {
  box-sizing: border-box;
  align-self: flex-end;
  width: 88%;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-card);
  background: var(--color-fill);
  color: var(--color-on-fill);
}

.signoff__logline {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-log);
  font-weight: var(--font-weight-strong);
}

.signoff__tick {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.875rem;
  height: 1.875rem;
  border-radius: var(--radius-pill);
  background: var(--color-ground);
  color: var(--color-on-ground);
}

.signoff__tick .icon {
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 3;
}

.signoff__bar {
  display: block;
  width: 70%;
  height: 0.625rem;
  margin-left: calc(1.875rem + var(--space-sm));
  border-radius: var(--radius-pill);
  background: var(--color-ground);
}

@media (min-width: 60rem) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;
    gap: var(--space-2xl) var(--space-3xl);
  }

  .signoff {
    justify-self: end;
  }
}

/* One staggered entrance on load, only when motion is welcome. The order is set by class, not
   by an inline style, so the page needs no inline CSS (see the Content-Security-Policy). */
.rise--1 { --i: 1; }
.rise--2 { --i: 2; }
.rise--3 { --i: 3; }
.rise--4 { --i: 4; }

@media (prefers-reduced-motion: no-preference) {
  .hero .rise {
    animation: rise var(--dur-long) var(--ease-out) both;
    animation-delay: calc(var(--i, 0) * 80ms);
  }
}

@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* ---------- Section heads ---------- */

.sec-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-md) var(--space-2xl);
  margin-bottom: var(--space-xl);
}

.sec-head h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: 1;
  letter-spacing: var(--tracking-heading);
}

.sec-head p {
  max-width: 26rem;
  color: var(--color-on-ground-soft);
}

/* ---------- Services ---------- */

.svc {
  padding-block: clamp(2.5rem, 6vw, 5.5rem) var(--space-section);
}

.chips {
  container: chips / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

.chip {
  box-sizing: border-box;
  flex: 1 1 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 3.5rem;
  padding: 0 var(--space-lg) 0 var(--space-md);
  border: var(--rule-thin) solid var(--color-on-ground);
  border-radius: var(--radius-pill);
  background: transparent;
  color: var(--color-on-ground);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--font-weight-strong);
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: transform var(--dur-micro) var(--ease-out);
}

.chip[aria-pressed="true"] {
  background: var(--color-surface);
  color: var(--color-mark);
}

.chip__mark {
  display: none;
}

/* Phones: full-width rows with a check mark on the pressed one, as the mobile comp. */
@media (max-width: 37.49rem) {
  .chip__mark {
    display: block;
    margin-left: auto;
    visibility: hidden;
  }

  .chip[aria-pressed="true"] .chip__mark {
    visibility: visible;
  }
}

@media (min-width: 37.5rem) {
  .chip {
    flex: 0 0 auto;
  }
}

/* Without JavaScript the chips cannot switch panels, so all five panels show and the chips step aside. */
html:not(.js) .chips {
  display: none;
}

html:not(.js) .svc__panel[hidden] {
  display: block;
}

html:not(.js) .svc__panel + .svc__panel {
  margin-top: var(--space-2xl);
  padding-top: var(--space-2xl);
  border-top: var(--rule-thin) solid var(--color-rule-on-surface);
}

.svc__board {
  padding: clamp(1.25rem, 4vw, 3.5rem);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.svc__title {
  overflow-wrap: anywhere;
  padding-bottom: var(--space-lg);
  border-bottom: var(--rule-thin) solid var(--color-rule-on-surface);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: 1.08;
  letter-spacing: var(--tracking-heading);
}

.svc__body {
  display: grid;
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}

.svc__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-xl);
  min-width: 0;
}

.svc__facts {
  max-width: var(--measure);
}

.svc__facts dt {
  color: var(--color-mark);
  font-weight: var(--font-weight-heading);
}

.svc__facts dd {
  margin: var(--space-2xs) 0 0;
}

.svc__facts dd + dt {
  margin-top: var(--space-lg);
}

.svc__lead {
  max-width: 24ch;
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
}

.svc__notes {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  max-width: var(--measure);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-tile);
  background: var(--color-fill);
  color: var(--color-on-fill);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
}

.scene {
  min-width: 0;
  max-width: 40rem;
}

.scene svg {
  width: 100%;
  height: auto;
}

.scene figcaption {
  margin-top: var(--space-sm);
  font-size: var(--text-ui);
}

.scene figcaption .tag {
  white-space: normal;
}

.flow {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  counter-reset: flow;
}

.flow li {
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-pill);
  background: var(--color-fill);
  color: var(--color-on-fill);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

/* Flat drawings: forest, mint and paper only. A 3px forest outline that stays 3px at every size. */
.ill .f { fill: var(--color-forest); }
.ill .m { fill: var(--color-mint); }
.ill .p { fill: var(--color-paper); }
.ill .o,
.ill .o2,
.ill .ln,
.ill .lp {
  vector-effect: non-scaling-stroke;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ill .o { stroke: var(--color-forest); stroke-width: var(--rule-drawing); }
.ill .o2 { stroke: var(--color-forest); stroke-width: var(--rule-thin); }
.ill .ln { fill: none; stroke: var(--color-forest); stroke-width: var(--rule-drawing); }
.ill .lp { fill: none; stroke: var(--color-paper); stroke-width: var(--rule-drawing); }
.ill .hb { fill: none; stroke: var(--color-forest); stroke-width: 10; stroke-linecap: round; }
.ill .hm { fill: none; stroke: var(--color-forest); stroke-width: 5; stroke-linecap: round; }

@media (min-width: 56rem) {
  .svc__body {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    align-items: start;
    gap: var(--space-2xl);
  }
}

/* Phones and tablets lead each panel with its drawing, as the mobile comp does. The drawing holds no
   controls, so keyboard and reading order stay title first. */
@media (max-width: 55.99rem) {
  .svc__panel:not([hidden]),
  html:not(.js) .svc__panel[hidden] {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
  }

  .svc__body {
    display: contents;
  }

  .scene {
    order: -1;
  }
}

/* ---------- How it works: five steps on paper ---------- */

.how {
  background: var(--color-surface);
  color: var(--color-on-surface);
  padding-block: var(--space-section);
}

.how .sec-head {
  margin-bottom: var(--space-2xl);
}

.how .sec-head h2 {
  color: var(--color-mark);
}

.how .sec-head p {
  color: var(--color-on-surface);
}

/* Phone and tablet: a vertical strip runs through the icon column, so nothing can push sideways. */
.step {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  column-gap: var(--space-lg);
  padding-bottom: var(--space-xl);
}

.step::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(1.75rem - var(--rule-strip) / 2);
  width: var(--rule-strip);
  background: var(--color-mark);
}

.step:first-child::before {
  top: 1.75rem;
}

.step:last-child::before {
  bottom: auto;
  height: 1.75rem;
}

.step:last-child {
  padding-bottom: 0;
}

.step__icon {
  position: relative;
  z-index: var(--z-base);
  grid-column: 1;
  grid-row: 1 / span 3;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--radius-pill);
  background: var(--color-ground);
  color: var(--color-on-ground);
  box-shadow: 0 0 0 6px var(--color-surface);
}

.step__icon .icon {
  width: 1.5rem;
  height: 1.5rem;
  stroke-width: 2;
}

.step__num {
  grid-column: 2;
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: var(--text-numeral);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-display);
  line-height: 0.9;
}

.step h3 {
  grid-column: 2;
  letter-spacing: var(--tracking-heading);
  margin: var(--space-sm) 0 var(--space-xs);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-heading);
  line-height: var(--leading-snug);
}

.step > p:last-child {
  grid-column: 2;
  max-width: 34rem;
}

@media (min-width: 80rem) {
  .steps {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }

  .step {
    display: block;
    padding: 0 var(--space-md) 0 0;
    border-top: var(--rule-strip) solid var(--color-mark);
  }

  .step::before {
    content: none;
  }

  .step__icon {
    margin-top: calc(-1.75rem - var(--rule-strip) / 2);
  }

  .step__num {
    margin-top: var(--space-lg);
  }

  .step h3 {
    font-size: var(--text-xl);
  }
}

/* ---------- Proof ledger ---------- */

.proof {
  padding-block: var(--space-section);
}

.ledger__head {
  display: none;
}

.ledger__row {
  padding-block: var(--space-lg);
  border-bottom: var(--rule-hair) solid var(--color-rule-on-ground);
}

.ledger__row:first-child {
  border-top: var(--rule-thin) solid var(--color-on-ground);
}

.ledger__row:last-child {
  border-bottom: var(--rule-thin) solid var(--color-on-ground);
}

.ledger__who {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
}

.ledger__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 3.25rem;
  height: 3.25rem;
  border-radius: var(--radius-tile);
  background: var(--color-surface);
  color: var(--color-mark);
}

.ledger__icon .icon {
  width: 1.625rem;
  height: 1.625rem;
  stroke-width: 2;
}

.ledger__what,
.ledger__how {
  margin-top: var(--space-md);
}

.ledger__label {
  display: block;
  margin-bottom: var(--space-2xs);
  color: var(--color-on-ground-soft);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-strong);
}

.ledger__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-xs);
  font-weight: var(--font-weight-strong);
}

.ledger__check .icon {
  margin-top: var(--space-3xs);
}

@media (min-width: 48rem) and (max-width: 79.99rem) {
  .ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr);
    gap: 0 var(--space-xl);
    padding-block: var(--space-xl);
  }

  .ledger__who {
    grid-row: 1 / span 2;
    align-self: start;
    flex-direction: column;
    align-items: flex-start;
  }

  .ledger__what {
    margin-top: 0;
  }
}

@media (min-width: 80rem) {
  .ledger__head,
  .ledger__row {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.5fr) minmax(0, 1.1fr);
    gap: var(--space-md) var(--space-xl);
  }

  .ledger__head {
    padding-bottom: var(--space-sm);
    border-bottom: var(--rule-thin) solid var(--color-on-ground);
    color: var(--color-on-ground-soft);
    font-size: var(--text-sm);
    font-weight: var(--font-weight-strong);
  }

  .ledger__row {
    align-items: center;
    padding-block: var(--space-xl);
  }

  .ledger__row:first-child {
    border-top: 0;
  }

  .ledger__what,
  .ledger__how {
    margin-top: 0;
  }

  .ledger__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }
}

/* ---------- Closing band: the request on the left, one paper card with the sign rule and support ---------- */

.close {
  background: var(--color-close);
  color: var(--color-on-close);
  padding-block: var(--space-section);
}

.close__grid {
  display: grid;
  gap: var(--space-2xl);
}

.close__start {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
}

.close__title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.close__lede {
  max-width: 32rem;
  margin: var(--space-lg) 0 var(--space-xl);
  font-size: var(--text-lg);
}

.close__card {
  container: card / inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  min-width: 0;
  padding: clamp(var(--fixed-lg), 3.5vw, 2.75rem);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.sign__title {
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
}

.sign__rule {
  display: flex;
  align-items: flex-end;
  height: 3.5rem;
  border-bottom: var(--rule-drawing) solid var(--color-mark);
  color: var(--color-mark);
}

.sign__rule .icon {
  margin: 0 0 var(--space-xs) var(--space-2xs);
  stroke-width: 2.6;
}

.sign p {
  margin-top: var(--space-sm);
}

.close__support {
  min-width: 0;
  padding-top: var(--space-lg);
  border-top: var(--rule-thin) solid var(--color-fill);
}

.close__support h3 {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
}

.close__price {
  margin-top: var(--space-xs);
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
}

.close__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.close__list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  min-width: 0;
}

.close__list .icon {
  margin-top: var(--space-3xs);
  color: var(--color-mark);
}

@media (min-width: 60rem) {
  .close__grid {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: var(--space-3xl);
    align-items: start;
  }
}

/* ---------- Footer: one line on wide screens ----------
   Separators are drawn here, never typed, so none can start or end a line: phones stack the items,
   tablets show two groups on two lines, wide screens show one line. */

.site-foot {
  padding-block: var(--space-lg) var(--space-xl);
}

.foot {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  padding-top: var(--space-lg);
  border-top: var(--rule-thin) solid var(--color-on-ground);
  color: var(--color-on-ground-soft);
  font-size: var(--text-ui);
}

.foot__group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.foot__group > * {
  display: inline-flex;
  align-items: center;
}

/* The footer measures itself in its own text size, so a large text setting gets the stacked or
   two-line layout instead of a wrapped line with a stray separator. */
.site-foot {
  container: foot / inline-size;
}

@container foot (min-width: 26em) {
  .foot__group {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
  }

  .foot__group > * + *::before {
    content: "·";
    margin-inline: var(--space-xs);
    color: var(--color-on-ground-soft);
    font-weight: var(--font-weight-body);
  }
}

@container foot (min-width: 56em) {
  .foot {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
  }

  .foot__group + .foot__group::before {
    content: "·";
    margin-inline: var(--space-xs);
  }
}

.site-foot a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-tap);
  color: var(--color-on-ground);
  font-weight: var(--font-weight-strong);
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--underline-offset);
  white-space: nowrap;
}

/* ---------- Contact page: the request form beside three info cards ----------
   Forest ground. One paper card holds the form; the info cards are drawn with a mint rule. From
   900px the info sits left and the form right; below that (and with large text) the form comes
   first. */

.contact {
  padding-block: var(--space-xl) var(--space-section);
}

.contact__head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

.contact__title {
  font-family: var(--font-display);
  font-size: max(var(--text-3xl), calc(var(--text-wordmark) * 1.15));
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.contact__lede {
  max-width: 36rem;
  margin-top: var(--space-md);
  color: var(--color-on-ground-soft);
  font-size: var(--text-lg);
}

.contact__grid {
  display: grid;
  gap: var(--space-xl);
}

@media (min-width: 56.25rem) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.45fr);
    grid-template-areas: "info form";
    align-items: start;
    gap: var(--space-xl) var(--space-2xl);
  }

  .form-card {
    grid-area: form;
  }

  .contact__info {
    grid-area: info;
  }
}

/* With large text the two columns stack on any screen, form first. */
@container page (max-width: 45em) {
  .contact__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: none;
  }

  .form-card,
  .contact__info {
    grid-area: auto;
  }
}

.form-card {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(var(--fixed-lg), 4vw, 3rem);
  border-radius: var(--radius-panel);
  background: var(--color-surface);
  color: var(--color-on-surface);
}

.form-card :focus-visible {
  outline-color: var(--color-focus-on-surface);
  box-shadow: none;
}

.form-card a {
  color: var(--color-mark);
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--underline-offset);
}

.form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form[hidden] {
  display: none;
}

.form__title,
.notice--sent .notice__title {
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: max(calc(var(--text-base) * 1.04), var(--text-2xl));
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
}

.field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  min-width: 0;
  min-inline-size: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.field__label {
  padding: 0;
  font-size: var(--text-base);
  font-weight: var(--font-weight-strong);
  line-height: var(--leading-snug);
}

legend.field__label {
  margin-bottom: var(--space-xs);
}

.field__hint {
  font-size: var(--text-ui);
}

/* An error is said in words and marked with a bar, never by colour alone. */
.field__error {
  padding-left: var(--space-sm);
  border-left: var(--rule-strip) solid var(--color-mark);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
}

.field__error[hidden] {
  display: none;
}

.field__input {
  box-sizing: border-box;
  width: 100%;
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-thin) solid var(--color-mark);
  border-radius: var(--radius-tile);
  background: var(--color-surface);
  color: var(--color-on-surface);
  font-family: var(--font-body);
  font-size: max(var(--fixed-md), var(--text-base));
  line-height: var(--leading-body);
}

.field__input--area {
  min-height: 9rem;
  resize: vertical;
}

.field__input[aria-invalid="true"] {
  border-width: var(--rule-drawing);
  border-left-width: var(--fixed-xs);
}

/* Choices are real radio buttons; the input covers its pill, so the whole pill is the target. */
.choices {
  container: choices / inline-size;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-top: var(--space-2xs);
}

.choice {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  max-width: 100%;
  min-height: var(--space-tap);
  padding: var(--space-xs) var(--space-md);
  border: var(--rule-thin) solid var(--color-mark);
  /* Half the 44px height: a pill on one line, a rounded box when a label wraps (large text). */
  border-radius: var(--radius-card);
  font-size: var(--text-ui);
  font-weight: var(--font-weight-strong);
  line-height: var(--leading-snug);
  cursor: pointer;
}

.choice input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  opacity: 0;
  appearance: none;
  cursor: pointer;
}

.choice:hover span {
  text-decoration: underline;
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--underline-offset);
}

.choice__mark {
  display: none;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  stroke-width: 3;
}

.choice:has(input:checked) {
  background: var(--color-mark);
  color: var(--color-on-ground);
}

.choice:has(input:checked) .choice__mark {
  display: block;
}

.choice:has(input:focus-visible) {
  outline: var(--rule-thin) solid var(--color-focus-on-surface);
  outline-offset: 3px;
}

.field--choices:has([aria-invalid="true"]) .choice {
  border-width: var(--rule-drawing);
}

/* The honeypot: off the screen and hidden from assistive tech; a person never meets it. */
.form__trap {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__trap input {
  border: 0;
  background: transparent;
  appearance: none;
}

.form__summary,
.form__alert,
.notice--problem {
  padding: var(--space-md) var(--space-lg);
  border-left: var(--rule-strip) solid var(--color-mark);
  border-radius: var(--radius-tile);
  background: var(--color-fill);
  color: var(--color-on-fill);
}

.form__summary[hidden],
.form__alert:empty {
  display: none;
}

.form__summary-title {
  margin-bottom: var(--space-xs);
  font-size: var(--text-base);
  font-weight: var(--font-weight-heading);
}

.form__summary-list {
  display: grid;
  gap: var(--space-2xs);
  padding-left: var(--space-lg);
  list-style: disc;
}

.form-card .form__summary a {
  color: var(--color-on-fill);
}

.form__alert,
.notice--problem .notice__title {
  font-weight: var(--font-weight-strong);
}

.form__send {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.form__button[disabled] {
  cursor: progress;
}

.form__note {
  font-size: var(--text-ui);
}

.form__note a {
  display: inline-flex;
  align-items: center;
  min-height: var(--space-tap);
}

/* The two answers from the server: shown by the address (#sent, #problem) without JavaScript,
   and by a class with it. A sent request hides the form. */
.notice {
  display: none;
}

.notice:target,
.notice.is-shown {
  display: block;
}

.notice--sent p {
  margin-top: var(--space-sm);
}

.notice--problem {
  margin-bottom: var(--space-lg);
}

.notice--sent:target ~ .form {
  display: none;
}

.contact__info {
  display: grid;
  gap: var(--space-md);
  align-content: start;
  min-width: 0;
}

.info-card {
  padding: var(--space-lg);
  border: var(--rule-thin) solid var(--color-rule-on-ground);
  border-radius: var(--radius-card);
}

.info-card__title {
  margin-bottom: var(--space-xs);
  font-family: var(--font-display);
  font-size: max(calc(var(--text-base) * 1.04), var(--text-xl));
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-heading);
}

.next {
  display: grid;
  gap: var(--space-sm);
  counter-reset: next;
}

.next li {
  position: relative;
  padding-left: 1.75em;
  counter-increment: next;
}

.next li::before {
  position: absolute;
  left: 0;
  content: counter(next);
  color: var(--color-on-ground-soft);
  font-family: var(--font-display);
  font-weight: var(--font-weight-heading);
}

/* ---------- Small pages: privacy and terms, not found ---------- */

.page {
  background: var(--color-surface);
  color: var(--color-on-surface);
  padding-block: var(--space-section);
}

.page__body {
  max-width: var(--measure);
}

.page h1 {
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: max(var(--text-3xl), calc(var(--text-wordmark) * 1.15));
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.page h2 {
  margin-top: var(--space-xl);
  color: var(--color-mark);
  font-family: var(--font-display);
  font-size: max(calc(var(--text-base) * 1.02), var(--text-xl));
  font-weight: var(--font-weight-heading);
  font-stretch: var(--font-width-heading);
  line-height: var(--leading-snug);
}

.page p,
.page ul {
  margin-top: var(--space-sm);
}

.page ul {
  padding-left: var(--space-lg);
  list-style: disc;
}

.page li + li {
  margin-top: var(--space-xs);
}

.page__date {
  margin-top: var(--space-md);
  font-weight: var(--font-weight-strong);
}

.page a:not(.btn) {
  color: var(--color-mark);
  font-weight: var(--font-weight-strong);
  text-decoration-thickness: var(--rule-thin);
  text-underline-offset: var(--underline-offset);
}

.lost {
  padding-block: var(--space-section);
}

.lost h1 {
  font-family: var(--font-display);
  font-size: var(--text-display);
  font-weight: var(--font-weight-display);
  font-stretch: var(--font-width-display);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-display);
}

.lost p {
  max-width: 32rem;
  margin-top: var(--space-lg);
  font-size: var(--text-lg);
}

.lost .hero__actions {
  margin-top: var(--space-xl);
}

/* ---------- Large text on phones ----------
   With a bigger text setting, labels may need two lines rather than run past the screen edge, and
   padding and icons keep a fixed size so the words get the room. At normal size every label still
   fits on one line and the sizes match the scale. */
@media (max-width: 30rem) {
  .btn,
  .signoff__yes {
    white-space: normal;
    text-align: center;
  }

  .chip {
    white-space: normal;
    text-align: start;
  }

  .nowrap,
  .site-foot a {
    white-space: normal;
  }

  /* Breaking a word anywhere is only the last resort (hyphenation comes first, see below). */
  body {
    overflow-wrap: anywhere;
  }

  .svc__notes {
    padding: var(--fixed-md) var(--fixed-md);
  }

  /* Wide headings are set at normal width here so a long word fits. */
  .page h2 {
    font-stretch: var(--font-width-body);
  }

  .page ul {
    padding-left: var(--fixed-lg);
  }

  .form-card,
  .info-card {
    padding: var(--fixed-lg) var(--fixed-md);
  }

  .choice {
    padding: var(--fixed-xs) var(--fixed-md);
  }

  .field__input {
    padding: var(--fixed-sm) var(--fixed-md);
  }

  .form__summary,
  .form__alert,
  .notice--problem {
    padding: var(--fixed-md);
  }

  .form__summary-list {
    padding-left: var(--fixed-lg);
  }

  /* Small pills: still round at normal size, a rounded box once their text wraps. */
  .signoff__wait,
  .tag,
  .flow li {
    padding-inline: var(--fixed-sm);
    border-radius: var(--radius-tile);
  }

  .svc__text,
  .svc__facts,
  .svc__notes,
  .ledger__what,
  .ledger__how,
  .ledger__check,
  .hero__facts li,
  .close__list li {
    min-width: 0;
  }

  .icon,
  .btn .icon,
  .chip .icon,
  .ledger__check .icon,
  .close__list .icon,
  .hero__facts .icon {
    width: var(--fixed-icon);
    height: var(--fixed-icon);
  }

  .btn,
  .btn--lg,
  .btn--xl {
    gap: var(--fixed-xs);
    padding-inline: var(--fixed-md);
  }

  .chip {
    gap: var(--fixed-sm);
    min-height: var(--fixed-mark);
    padding: var(--fixed-xs) var(--fixed-sm) var(--fixed-xs) var(--fixed-md);
    border-radius: var(--radius-panel);
  }

  .menu-btn {
    gap: var(--fixed-xs);
    padding-inline: var(--fixed-sm) var(--fixed-md);
  }

  .signoff__draft,
  .signoff__log {
    padding: var(--fixed-md) var(--fixed-lg);
  }

  .signoff__yes {
    gap: var(--fixed-sm);
    padding: var(--fixed-xs) var(--fixed-lg) var(--fixed-xs) var(--fixed-xs);
  }

  .signoff__check {
    width: var(--fixed-mark);
    height: var(--fixed-mark);
  }

  .signoff__check .icon,
  .ledger__icon .icon {
    width: var(--fixed-icon-lg);
    height: var(--fixed-icon-lg);
  }

  .step__icon .icon {
    width: var(--fixed-lg);
    height: var(--fixed-lg);
  }

  .signoff__tick .icon {
    width: var(--fixed-icon-sm);
    height: var(--fixed-icon-sm);
  }

  .signoff__logline {
    gap: var(--fixed-sm);
    overflow-wrap: anywhere;
  }

  .signoff__tick {
    width: var(--fixed-tick);
    height: var(--fixed-tick);
  }

  .signoff__bar {
    margin-left: calc(var(--fixed-tick) + var(--fixed-sm));
  }

  .svc__board {
    padding: var(--fixed-lg);
  }

  .step {
    grid-template-columns: var(--fixed-mark) minmax(0, 1fr);
    column-gap: var(--fixed-lg);
  }

  .step::before {
    left: calc(var(--fixed-mark) / 2 - var(--rule-strip) / 2);
  }

  .step:first-child::before {
    top: calc(var(--fixed-mark) / 2);
  }

  .step:last-child::before {
    height: calc(var(--fixed-mark) / 2);
  }

  .step__icon {
    width: var(--fixed-mark);
    height: var(--fixed-mark);
  }

  .ledger__who {
    gap: var(--fixed-md);
    overflow-wrap: anywhere;
  }

  .ledger__icon {
    width: var(--fixed-mark);
    height: var(--fixed-mark);
  }

  .js .site-nav.is-panel {
    padding: var(--fixed-xs) var(--fixed-lg);
  }
}

/* ---------- Large text, measured against the space it has ----------
   These containers compare their width with their own text size (em), so the rules below apply only
   when the text is large for the space (a big text setting on a phone), never at normal size. */
main {
  container: page / inline-size;
}

.hero {
  container: hero / inline-size;
}

.how {
  container: how / inline-size;
}

.svc__board {
  container: board / inline-size;
}

.close {
  container: close / inline-size;
}

/* With large text the closing band stacks, so neither column turns into a strip. */
@container close (max-width: 50em) {
  .close__grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Wide screens with large text: the panel's text and drawing stack, so the text keeps its width. */
@container board (max-width: 40em) {
  .svc__body {
    grid-template-columns: minmax(0, 1fr);
  }
}

.ledger {
  container: ledger / inline-size;
}

@container hero (max-width: 60em) {
  .hero__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .signoff {
    justify-self: start;
  }
}

@container how (max-width: 60em) {
  .steps {
    display: block;
  }

  .step {
    display: grid;
    padding: 0 0 var(--space-xl);
    border-top: 0;
  }

  .step:last-child {
    padding-bottom: 0;
  }

  .step::before {
    content: "";
  }

  .step__icon {
    margin-top: 0;
  }

  .step__num {
    margin-top: 0;
  }
}

/* Very large text: the step text takes the full width under its icon and number, and the strip
   gives way to a rule between steps. */
@container how (max-width: 17em) {
  .step {
    grid-template-columns: var(--fixed-mark) minmax(0, 1fr);
    column-gap: var(--fixed-lg);
    align-items: center;
  }

  .step__icon {
    width: var(--fixed-mark);
    height: var(--fixed-mark);
  }

  .step__icon .icon {
    width: var(--fixed-lg);
    height: var(--fixed-lg);
  }

  .step + .step {
    padding-top: var(--space-lg);
    border-top: var(--rule-thin) solid var(--color-rule-on-surface);
  }

  .step::before {
    content: none;
  }

  .step__icon {
    grid-row: 1;
  }

  .step h3,
  .step > p:last-child {
    grid-column: 1 / -1;
  }
}

@container ledger (max-width: 36em) {
  .ledger__head {
    display: none;
  }

  .ledger__row {
    display: block;
    padding-block: var(--space-lg);
  }

  .ledger__row:first-child {
    border-top: var(--rule-thin) solid var(--color-on-ground);
  }

  .ledger__who {
    flex-direction: row;
    align-items: center;
  }

  .ledger__what,
  .ledger__how {
    margin-top: var(--space-md);
  }

  .ledger__label {
    position: static;
    width: auto;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
  }
}

/* With large text on any screen, button labels and the "Your yes" pill may wrap instead of running
   past the edge. At normal size they stay on one line (labels fit long before this applies). */
@container page (max-width: 40em) {
  .svc__board {
    padding: var(--fixed-lg);
  }

  .svc__notes {
    padding: var(--fixed-md);
  }

  .btn,
  .signoff__yes {
    white-space: normal;
    text-align: center;
  }

  .chip {
    white-space: normal;
  }

  .nowrap {
    white-space: normal;
  }
}

/* Long words are hyphenated only when the text is large for the screen, never at normal size. */
@container page (max-width: 17em) {
  main > * {
    hyphens: auto;
    hyphenate-limit-chars: 7 3 3;
  }

  /* Headings break only at the soft hyphens written into their long words, never at a guessed
     point. Smaller heads are at least body size here, set at normal width so their words fit. */
  main :is(h1, h2, h3) {
    hyphens: manual;
  }

  main :is(h3, .svc__title, .ledger__who, .close__support h3, .info-card__title, .form__title) {
    font-stretch: var(--font-width-body);
  }

  /* Answer labels and the numbered steps: the browser may hyphenate any long word here. */
  .choice span,
  .next li {
    hyphenate-limit-chars: auto;
  }

  .next li {
    padding-left: 0;
  }

  .next li::before {
    position: static;
    display: block;
  }
}

@container chips (max-width: 14em) {
  .chip {
    font-size: var(--text-sm);
    padding-inline: var(--fixed-md);
  }

  .chip .icon {
    display: none;
  }
}

/* When the answers are tight for their row, their labels use the small size. */
@container choices (max-width: 12em) {
  .choice {
    font-size: var(--text-sm);
  }
}

@container card (max-width: 12em) {
  .close__list .icon {
    display: none;
  }
}

@container ledger (max-width: 14em) {
  .ledger__who {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ---------- Forced colours (Windows contrast themes) ----------
   Fills are replaced by the system background, so every card, bar and marker gets a border, which
   the system then draws in its own text colour. */
@media (forced-colors: active) {
  .signoff__draft,
  .signoff__log,
  .signoff__yes,
  .signoff__wait,
  .signoff__check,
  .signoff__tick,
  .signoff__lines span,
  .signoff__bar,
  .tag,
  .flow li,
  .svc__board,
  .svc__notes,
  .close__card,
  .ledger__icon,
  .step__icon,
  .js .site-nav.is-panel,
  .form-card,
  .form__summary,
  .form__alert,
  .notice--problem {
    border: var(--rule-hair) solid transparent;
  }

  .choice:has(input:checked) {
    border-width: var(--rule-strip);
  }

  .chip[aria-pressed="true"] {
    outline: var(--rule-drawing) solid transparent;
    outline-offset: 3px;
  }

  .step::before {
    border-left: var(--rule-strip) solid transparent;
  }
}


/* ---------- Print ----------
   Ink on white, every service panel shown, no menu or chips, no motion. */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: var(--color-ink) !important;
    box-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }

  html,
  body {
    background: var(--color-white) !important;
  }

  .hero .rise {
    opacity: 1 !important;
    transform: none !important;
  }

  .skip,
  .menu-btn,
  .site-nav,
  .chips {
    display: none !important;
  }

  /* Every panel prints the same way: title, drawing, then text. */
  .svc__panel,
  .svc__panel[hidden] {
    display: flex !important;
    flex-direction: column;
    gap: var(--space-md);
  }

  .svc__body {
    display: contents;
  }

  .svc__title {
    order: 0;
  }

  .scene {
    order: 1;
    max-width: 16rem;
  }

  .svc__text {
    order: 2;
  }

  .svc__panel + .svc__panel {
    margin-top: var(--space-xl);
  }

  /* Tighter section spacing on paper, so no page is left mostly empty. */
  .hero,
  .svc,
  .how,
  .proof,
  .close {
    padding-block: var(--space-xl);
  }

  .site-foot {
    padding-block: var(--space-md);
  }

  h2,
  h3,
  .svc__facts dt {
    break-after: avoid;
  }

  .hero__facts,
  .sec-head,
  .ledger__row,
  .svc__facts dd,
  .close__card {
    break-inside: avoid;
  }

  /* The closing call starts its own page; Chrome would otherwise split its first paragraph. */
  .close {
    break-before: page;
  }

  .btn,
  .tag,
  .signoff__draft,
  .signoff__log,
  .signoff__yes,
  .signoff__wait,
  .signoff__lines span,
  .signoff__bar,
  .svc__board,
  .svc__notes,
  .close__card,
  .ledger__icon,
  .step__icon {
    border: var(--rule-hair) solid var(--color-ink) !important;
  }

  .hero__facts,
  .ledger__row,
  .foot,
  .sign__rule,
  .svc__title {
    border-color: var(--color-ink) !important;
  }

  .signoff,
  .step,
  .ledger__row,
  .close__card,
  .scene,
  .info-card,
  .field {
    break-inside: avoid;
  }

  .form-card {
    border: var(--rule-hair) solid var(--color-ink) !important;
  }

  .info-card,
  .field__input,
  .choice,
  .form__summary,
  .form__alert,
  .notice--problem {
    border-color: var(--color-ink) !important;
  }
}