/* Revive Media
   Source of truth: design.md in the repo root. Read it before changing anything here.
   Stage: Step 2, structure and motion. Pages are built from src/ by tools/build.mjs. */

/* Fonts: self hosted, latin subset, SIL OFL (see fonts/OFL.txt) */
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("fonts/barlow-condensed-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Fraunces"; src: url("fonts/fraunces-var-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-500.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "IBM Plex Mono"; src: url("fonts/plex-mono-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }

:root {
  color-scheme: light;

  /* Core palette. Hex from the brief in comments. */
  --ink: oklch(20.5% 0.014 243.6);          /* #12181d */
  --paper: oklch(96.5% 0.005 117.9);        /* #f3f4f0 */
  --paper-warm: oklch(96.3% 0.010 72.7);    /* #f7f2ec */
  --hivis: oklch(85.9% 0.176 89);           /* #ffc900 accent trades */
  --coral: oklch(70.6% 0.188 32.9);         /* #ff6a4d accent street */
  --petrol: oklch(30.1% 0.043 228.9);       /* #14323f */

  /* Derived. Neutrals lean to the ink or paper hue, never pure grey. */
  --ink-2: oklch(26.5% 0.016 243.6);
  --ink-soft: oklch(40% 0.018 243.6);
  --ink-faint: oklch(50% 0.016 243.6);
  --ink-line: oklch(36% 0.016 243.6);
  --line: oklch(86.5% 0.008 110);
  --line-strong: oklch(62% 0.012 243.6);
  --paper-2: oklch(93.5% 0.007 112);
  --paper-soft: oklch(78% 0.012 117.9);
  --card: oklch(98.5% 0.003 110);
  --paper-warm-2: oklch(93% 0.014 70);
  --line-warm: oklch(86.5% 0.016 70);
  --hivis-deep: oklch(81% 0.16 86);
  --coral-deep: oklch(64.5% 0.19 32.9);
  --coral-text: oklch(53% 0.17 32.9);
  --petrol-2: oklch(36% 0.045 228.9);
  --petrol-soft: oklch(82% 0.022 228.9);
  --petrol-line: oklch(45% 0.045 228.9);

  /* Skin: trades and shared pages (default) */
  --bg: var(--paper);
  --bg-sunk: var(--paper-2);
  --fg: var(--ink);
  --fg-soft: var(--ink-soft);
  --fg-faint: var(--ink-faint);
  --rule: var(--line);
  --accent: var(--hivis);
  --accent-press: var(--hivis-deep);
  --accent-text: var(--ink);
  --focus: var(--ink);

  /* Type */
  --font-display: "Barlow Condensed", "Arial Narrow", "Roboto Condensed", sans-serif;
  --font-body: "Barlow", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --step-hero: clamp(3rem, 0.8rem + 12vw, 9rem);
  --step-hero-split: clamp(3rem, 0.8rem + 12vw, 6.75rem);
  --step-hero-page: clamp(2.75rem, 1rem + 7.4vw, 5.75rem);
  --step-5: clamp(2.5rem, 1.5rem + 4.2vw, 5.25rem);
  --step-4: clamp(1.9rem, 1.4rem + 2.2vw, 3.25rem);
  --step-3: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem);
  --step-2: clamp(1.25rem, 1.1rem + 0.7vw, 1.6rem);
  --step-1: clamp(1.125rem, 1.08rem + 0.2vw, 1.25rem);
  --step-0: 1.0625rem;
  --step--1: 0.9375rem;
  --step--2: 0.8125rem;

  /* Space and shape */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --gutter: clamp(1rem, 0.6rem + 2vw, 2.5rem);
  --gap: clamp(1rem, 0.75rem + 1vw, 1.75rem);
  --section-pad: clamp(4rem, 2.5rem + 6vw, 8rem);
  --page-max: 76rem;
  --r-1: 2px;
  --r-2: 4px;

  /* Motion (design.md section 7) */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
}

/* Skin: high street pages set data-skin="street" on <html> */
[data-skin="street"] {
  --bg: var(--paper-warm);
  --bg-sunk: var(--paper-warm-2);
  --rule: var(--line-warm);
  --accent: var(--coral);
  --accent-press: var(--coral-deep);
  --accent-text: var(--coral-text);
}

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

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.6;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

a { color: inherit; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }

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

::selection {
  background: var(--fg);
  color: var(--bg);
}

.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip {
  position: absolute;
  left: var(--gutter);
  top: -4rem;
  z-index: 100;
  padding: var(--s-3) var(--s-4);
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  border-radius: var(--r-2);
}
.skip:focus { top: var(--s-3); }

/* Layout */
.wrap {
  width: 100%;
  max-width: calc(var(--page-max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--section-pad); }
.section--sunk { background: var(--bg-sunk); }
.section--tight { padding-block: clamp(3rem, 2rem + 4vw, 5.5rem); }

.band--ink {
  background: var(--ink);
  color: var(--paper);
  --fg: var(--paper);
  --fg-soft: var(--paper-soft);
  --fg-faint: var(--paper-soft);
  --rule: var(--ink-line);
  --focus: var(--accent);
}

.band--petrol {
  background: var(--petrol);
  color: var(--paper);
  --fg: var(--paper);
  --fg-soft: var(--petrol-soft);
  --fg-faint: var(--petrol-soft);
  --rule: var(--petrol-line);
  --focus: var(--accent);
}

.band--accent {
  background: var(--accent);
  color: var(--ink);
  --fg: var(--ink);
  --fg-soft: var(--ink);
  --fg-faint: var(--ink);
  --rule: var(--ink);
}

.section-head {
  display: grid;
  gap: var(--s-4);
  max-width: 44rem;
  margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4.5rem);
}

/* Type */
.eyebrow {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--2);
  line-height: 1.3;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-faint);
}

.h2,
.h3,
.h4 {
  font-family: var(--font-display);
  text-transform: uppercase;
  text-wrap: balance;
}
.h2 { font-weight: 800; font-size: var(--step-5); line-height: 0.9; letter-spacing: -0.005em; }
.h3 { font-weight: 800; font-size: var(--step-4); line-height: 0.95; }
.h4 { font-weight: 700; font-size: var(--step-3); line-height: 1; }

.intro {
  max-width: 60ch;
  font-size: var(--step-1);
  line-height: 1.5;
  color: var(--fg-soft);
  text-wrap: pretty;
}

.lede {
  max-width: 34ch;
  font-size: var(--step-2);
  line-height: 1.4;
  text-wrap: pretty;
}

.lede--wide { max-width: 52ch; font-size: var(--step-1); line-height: 1.5; }

.prose { display: grid; gap: var(--s-4); max-width: 64ch; align-content: start; }
.prose p { text-wrap: pretty; }
.prose h2:not([class]) { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); text-transform: uppercase; line-height: 1; margin-top: var(--s-5); }

.mono {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  letter-spacing: 0.04em;
}

.wordmark {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.125rem;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
}
@media (min-width: 64rem) {
  .wordmark { font-size: 1.25rem; }
}

/* Icons are drawn inline (the font subset has no arrows) */
.icon { width: 1.1em; height: 1.1em; flex: none; }
.icon--arrow { transition: transform 160ms var(--ease); }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55em;
  min-height: 3rem;
  padding: 0.7em 1.15em;
  border: 2px solid var(--ink);
  border-radius: var(--r-2);
  background: transparent;
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: transform 160ms var(--ease), background-color 160ms var(--ease);
}
.btn:hover { transform: translateY(-1px); }
.btn:hover .icon--arrow { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); }
.btn--primary:hover,
.btn--primary:active { background: var(--accent-press); }
.btn--dark { background: var(--ink); color: var(--paper); }
.btn--dark:hover { background: var(--ink-2); }
.btn--sm { min-height: 2.5rem; padding: 0.55em 0.9em; font-size: 1rem; }
.btn--mail { gap: 0.5em; }
.band--ink .btn:not(.btn--primary),
.band--petrol .btn:not(.btn--primary) { border-color: var(--paper); color: var(--paper); }

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.link-arrow:hover { text-decoration-thickness: 4px; }
.link-arrow:hover .icon--arrow { transform: translateX(3px); }
[data-skin="street"] .link-arrow { text-decoration-color: var(--coral-text); }

.contact-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  min-height: 3rem;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.25em;
}
.contact-link:hover { text-decoration-thickness: 4px; }
[data-skin="street"] .contact-link { text-decoration-color: var(--coral-text); }
.contact-link__addr { font-family: var(--font-mono); font-weight: 500; font-size: 0.9em; letter-spacing: 0; text-transform: none; }

/* Header */
.site-head {
  position: relative;
  z-index: 40;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
}

.site-head__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  min-height: 4.25rem;
}

.nav { margin-left: auto; }
.nav__list { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.nav__list a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid transparent;
}
.nav__list a:hover { border-bottom-color: var(--accent); }
.nav__list a[aria-current="page"] { border-bottom-color: var(--ink); }

.site-head__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-left: auto;
}

.head-mail {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  text-decoration: none;
  white-space: nowrap;
}
.head-mail:hover { text-decoration: underline; text-decoration-color: var(--accent); }

.menu-btn {
  display: none;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9em;
  border: 2px solid var(--ink);
  border-radius: var(--r-2);
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}

/* Phones and tablets: wordmark, email, menu. Without JavaScript the links simply wrap below. */
@media (max-width: 74.99rem) {
  .site-head__in { flex-wrap: wrap; }
  .site-head .btn--sm { display: none; }
  .head-mail__addr { display: none; }
  .head-mail {
    padding: 0 0.8em;
    border: 2px solid var(--ink);
    border-radius: var(--r-2);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
  }
  .nav { order: 3; flex-basis: 100%; margin-left: 0; padding-bottom: var(--s-3); }
  .menu-btn { display: inline-flex; }
  .nav { display: none; }
  .site-head.is-open .nav { display: block; }
  .site-head.is-open .nav__list {
    flex-direction: column;
    gap: 0;
    border-top: 1px solid var(--rule);
  }
  .site-head.is-open .nav__list a {
    width: 100%;
    min-height: 3.25rem;
    border-bottom: 1px solid var(--rule);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.375rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
  }
}
@media (min-width: 75rem) {
  .site-head { position: sticky; top: 0; }
  .head-mail__label { display: none; }
}
@media (min-width: 75rem) and (max-width: 84.99rem) {
  .head-mail__addr { display: none; }
  .head-mail__label { display: inline; }
}

/* Hazard stripe: under every hero, inside open flyer slots, nowhere else */
.hazard {
  height: 12px;
  background: repeating-linear-gradient(-45deg, var(--accent) 0 12px, var(--ink) 12px 24px);
}
@media (min-width: 64rem) {
  .hazard { height: 16px; }
}

/* Heroes */
.hero { padding-block: clamp(2.5rem, 1.5rem + 4vw, 5.5rem) clamp(3rem, 2rem + 4vw, 6rem); }
.hero__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); align-items: center; }
.hero__copy { display: grid; gap: clamp(1.25rem, 0.9rem + 1.2vw, 2rem); min-width: 0; }
.hero__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-hero-page);
  line-height: 0.88;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  text-wrap: balance;
}
.hero--home .hero__title { font-size: var(--step-hero-split); line-height: 0.86; }
.hero__tag { color: var(--fg-faint); }
.hero__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-5); }
.hero__hours { color: var(--fg-faint); }

@media (min-width: 64rem) {
  .hero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .hero--page .hero__grid { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .hero--text .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero--text .hero__title { max-width: 18ch; }
  .hero--home .hero__title { font-size: clamp(4rem, 0.5rem + 5.6vw, 6.75rem); }
}

/* Hero photo with a soft parallax (trades and high street). JS moves the inner layer. */
.hero-photo {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  max-height: 44rem;
  width: 100%;
  border-radius: var(--r-1);
  background: var(--bg-sunk);
}
.hero-photo__img {
  position: absolute;
  inset: -7% 0;
  background-size: cover;
  background-position: center;
}
.hero-photo--wide { aspect-ratio: 3 / 2; }
@media (max-width: 63.99rem) {
  .hero-photo { aspect-ratio: 3 / 2; }
}

.photo-caption {
  margin-top: var(--s-2);
  color: var(--fg-faint);
}

/* The Local Run flyer mockup */
.flyer-wrap { display: grid; justify-items: center; gap: var(--s-4); }
.flyer {
  width: min(100%, 27rem);
  aspect-ratio: 1 / 1.414;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 0.6rem;
  padding: 0.9rem;
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-1);
  box-shadow: 0 1px 0 oklch(20.5% 0.014 243.6 / 0.08), 0 24px 44px -24px oklch(20.5% 0.014 243.6 / 0.5);
  transform: rotate(-2deg);
  transition: transform 260ms var(--ease);
}
.flyer-wrap:hover .flyer,
.flyer:focus-within { transform: rotate(0deg) translateY(-4px); }

.flyer__mast {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 2px solid var(--ink);
}
.flyer__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.1rem);
  line-height: 0.9;
  text-transform: uppercase;
}
.flyer__meta { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--ink-faint); }

.flyer__panels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  gap: 0.5rem;
  min-height: 0;
}
.flyer__panels > li { display: flex; min-height: 0; }

.panel {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-content: start;
  gap: 0.25rem;
  width: 100%;
  min-height: 0;
  padding: 0.6rem;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--card);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 160ms var(--ease);
}
.panel:hover,
.panel[aria-pressed="true"] { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.panel__tag {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.panel__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.2rem);
  line-height: 0.95;
  text-transform: uppercase;
}
.panel__foot {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}
.qr {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  background: var(--ink);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v7H0zM1 1v5h5V1zM2 2h3v3H2zM14 0h7v7h-7zm1 1v5h5V1zm1 1h3v3h-3zM0 14h7v7H0zm1 1v5h5v-5zm1 1h3v3H2zM9 0h2v2H9zm0 3h1v3H9zm2 2h2v1h-2zM8 8h3v1H8zm4 0h2v2h-2zm-3 2h2v2H9zM0 9h2v1H0zm3 0h3v1H3zm11 2h3v1h-3zm4-2h3v2h-3zM9 13h1v3H9zm2 1h3v1h-3zm4 0h1v2h-1zm2 0h4v1h-4zm-6 3h2v4h-2zm3 1h2v1h-2zm3 0h1v3h-1zm2 2h2v1h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 21 21' shape-rendering='crispEdges'%3E%3Cpath d='M0 0h7v7H0zM1 1v5h5V1zM2 2h3v3H2zM14 0h7v7h-7zm1 1v5h5V1zm1 1h3v3h-3zM0 14h7v7H0zm1 1v5h5v-5zm1 1h3v3H2zM9 0h2v2H9zm0 3h1v3H9zm2 2h2v1h-2zM8 8h3v1H8zm4 0h2v2h-2zm-3 2h2v2H9zM0 9h2v1H0zm3 0h3v1H3zm11 2h3v1h-3zm4-2h3v2h-3zM9 13h1v3H9zm2 1h3v1h-3zm4 0h1v2h-1zm2 0h4v1h-4zm-6 3h2v4h-2zm3 1h2v1h-2zm3 0h1v3h-1zm2 2h2v1h-2z'/%3E%3C/svg%3E") center / contain no-repeat;
}

.panel--open {
  place-items: center;
  grid-template-rows: 1fr;
  border-color: var(--ink);
  background: repeating-linear-gradient(-45deg, var(--accent) 0 9px, var(--ink) 9px 18px);
}
.panel__label {
  display: grid;
  gap: 0.15rem;
  padding: 0.45rem 0.6rem;
  background: var(--card);
  border-radius: var(--r-1);
  text-align: center;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1rem;
  line-height: 1;
  text-transform: uppercase;
}
.panel__label small {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
}

.flyer__fold {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--ink-faint);
}

.flyer__info {
  width: min(100%, 27rem);
  min-height: 4.5rem;
  font-size: var(--step--1);
  line-height: 1.5;
  color: var(--fg-soft);
}
.flyer__info strong { color: var(--fg); font-weight: 600; }
.flyer__info a { font-weight: 600; text-decoration-color: var(--accent); }

/* Problem: one line and two figures */
.problem__line {
  max-width: 27ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 0.98;
  text-transform: uppercase;
  text-wrap: balance;
}
.problem__sums {
  display: grid;
  margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem);
  border-top: 2px solid var(--ink);
}
.sum { display: grid; gap: var(--s-2); padding-block: var(--s-5); }
.sum + .sum { border-top: 1px solid var(--rule); }
.sum__figure {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(4rem, 2rem + 8vw, 8.5rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.sum--old .sum__figure { color: var(--fg-faint); }
.sum__figure mark {
  background: linear-gradient(transparent 58%, var(--accent) 58% 92%, transparent 92%);
  color: inherit;
  padding-inline: 0.04em;
}
.sum__label { max-width: 30ch; color: var(--fg-soft); }
.sum__label strong { color: var(--fg); font-weight: 600; }
.problem__foot { display: grid; gap: var(--s-4); max-width: 60ch; }
@media (min-width: 48rem) {
  .problem__sums { grid-template-columns: 1fr 1fr; }
  .sum + .sum { border-top: 0; border-left: 1px solid var(--rule); padding-left: var(--gap); }
}

/* Process: a delivery route with four stops */
.route {
  position: relative;
  display: grid;
  gap: var(--s-6);
  counter-reset: stop;
}
.route__stop {
  position: relative;
  display: grid;
  gap: var(--s-2);
  align-content: start;
  padding-left: 2.75rem;
}
.route__stop::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.15rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 3px solid var(--ink);
  border-radius: 50%;
  background: var(--bg);
}
.route__stop:last-child::before { background: var(--accent); }
.route::before {
  content: "";
  position: absolute;
  left: calc(0.625rem - 1px);
  top: 1rem;
  bottom: 1rem;
  border-left: 2px dashed var(--ink);
}
.route__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.route__verb { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 0.9; text-transform: uppercase; }
.route__stop p:last-child { color: var(--fg-soft); max-width: 34ch; }
@media (min-width: 64rem) {
  .route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--gap); }
  .route__stop { padding-left: 0; padding-top: 2.75rem; }
  .route__stop::before { top: 0; }
  .route::before { left: 0.6rem; right: 0; top: calc(0.625rem - 1px); bottom: auto; border-left: 0; border-top: 2px dashed var(--ink); }
}

/* Journeys chooser: trades first, so it gets the wider card */
.journeys__grid { display: grid; gap: var(--gap); }
.path {
  position: relative;
  display: grid;
  grid-template-rows: auto 1fr;
  border: 2px solid var(--rule);
  border-radius: var(--r-1);
  background: var(--bg);
  transition: transform 200ms var(--ease), border-color 200ms var(--ease);
}
.path--street { background: var(--paper-warm); }
.path:hover,
.path:focus-within { transform: translateY(-4px); border-color: var(--ink); }
.path__photo { aspect-ratio: 16 / 9; background-size: cover; background-position: center; }
.path__body { display: grid; gap: var(--s-3); align-content: start; padding: clamp(1.25rem, 1rem + 1vw, 2rem); }
.path__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 0.95; text-transform: uppercase; }
.path__link { text-decoration: none; }
.path__link::after { content: ""; position: absolute; inset: 0; }
.path__link:focus-visible { outline: none; }
.path:focus-within { outline: 3px solid var(--focus); outline-offset: 3px; }
.path__text { color: var(--fg-soft); max-width: 46ch; }
.path__go { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.path:hover .icon--arrow { transform: translateX(3px); }
@media (min-width: 64rem) {
  .journeys__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  .path--trades .path__photo { aspect-ratio: 16 / 8; }
  .path--street .path__photo { aspect-ratio: 16 / 11.2; }
}

/* The connected loop: a cycle, not a line */
.loop { position: relative; }
.loop__steps { display: grid; gap: 3.25rem; padding-right: 2.75rem; }
.loop__step { position: relative; display: grid; gap: var(--s-2); align-content: start; }
/* Step order for the staggered reveal (set here, not inline, so the CSP can forbid inline styles). */
.loop__step:nth-child(1) { --i: 0; }
.loop__step:nth-child(2) { --i: 1; }
.loop__step:nth-child(3) { --i: 2; }
.loop__step:nth-child(4) { --i: 3; }
.loop__name {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--step-4);
  line-height: 0.9;
  text-transform: uppercase;
  color: var(--accent);
}
.loop__title { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.loop__text { color: var(--fg-soft); max-width: 32ch; }
.loop__arrow {
  position: absolute;
  left: 0;
  bottom: -2.75rem;
  width: 2rem;
  height: 2rem;
  color: var(--petrol-soft);
  transform: rotate(90deg);
}
.loop__return {
  position: absolute;
  right: 0;
  top: 1rem;
  bottom: 1.6rem;
  width: 1.5rem;
  border: 2px solid var(--petrol-soft);
  border-left: 0;
  border-radius: 0 1rem 1rem 0;
}
.loop__return::before {
  content: "";
  position: absolute;
  left: -0.35rem;
  top: -0.42rem;
  border: 0.42rem solid transparent;
  border-right-color: var(--petrol-soft);
  border-left: 0;
}
.loop__chip-row { position: relative; z-index: 1; display: flex; justify-content: flex-end; margin-top: var(--s-4); }
.loop__chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.55rem 1rem;
  border: 2px solid var(--accent);
  border-radius: 999px;
  background: var(--petrol);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--paper);
}
.loop__chip .icon { color: var(--accent); }
@media (min-width: 64rem) {
  .loop__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3.5rem; padding-right: 0; }
  .loop__arrow { left: auto; right: -2.75rem; top: 0.35rem; bottom: auto; transform: none; }
  .loop__return {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    width: auto;
    height: 3.25rem;
    margin-top: var(--s-5);
    margin-inline: calc((100% - 3 * 3.5rem) / 8);
    border: 2px solid var(--petrol-soft);
    border-top: 0;
    border-radius: 0 0 1.75rem 1.75rem;
  }
  .loop__return::before {
    left: -0.47rem;
    top: -0.4rem;
    border: 0.42rem solid transparent;
    border-bottom-color: var(--petrol-soft);
    border-top: 0;
  }
  .loop__chip-row { justify-content: center; margin-top: -1.35rem; }
}

/* Proof: founding clients, real photos, numbers as they come in */
.proof__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.proof__copy { display: grid; gap: var(--s-5); align-content: start; }
.perks { display: grid; gap: var(--s-4); }
.perks div { display: grid; gap: var(--s-1); padding-top: var(--s-4); border-top: 1px solid var(--rule); }
.perks dt { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.perks dd { color: var(--fg-soft); }
.proof__board { display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1fr); }
.proof__board .photo-frame { grid-column: 1 / -1; }
@media (min-width: 40rem) {
  .proof__board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .proof__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .proof__board--row { grid-template-columns: minmax(0, 6fr) repeat(2, minmax(0, 3fr)); align-items: stretch; }
  .proof__board--row .photo-frame { grid-column: auto; }
}

.stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-6) var(--gap);
  margin-top: clamp(3rem, 2rem + 3vw, 5rem);
  padding-top: var(--s-6);
  border-top: 2px solid var(--ink);
}
.stat { display: grid; gap: var(--s-2); }
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.75rem, 1.8rem + 3.6vw, 5rem);
  line-height: 0.85;
  font-variant-numeric: tabular-nums;
}
.stat__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
@media (min-width: 64rem) {
  .stats { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Photos and asset slots */
.photo { background-color: var(--bg-sunk); background-size: cover; background-position: center; }
.photo-frame { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--s-2); }
.photo-frame .photo { width: 100%; aspect-ratio: 3 / 2; border-radius: var(--r-1); }
.photo-frame--tall .photo { aspect-ratio: 3 / 4; }
.photo-frame figcaption { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.04em; color: var(--fg-faint); }
.photo--marlow { background-position: center 35%; }
.photo--workers { background-position: center 30%; }

/* Photo slot shapes, from the slot partial's ratio parameter. */
.slot[data-ratio="3 / 2"] { --ratio: 3 / 2; }
.slot[data-ratio="4 / 3"] { --ratio: 4 / 3; }
.slot[data-ratio="3 / 4"] { --ratio: 3 / 4; }
.slot[data-ratio="auto"] { --ratio: auto; }
.slot {
  position: relative;
  display: grid;
  align-content: end;
  gap: var(--s-2);
  min-height: 11rem;
  aspect-ratio: var(--ratio, 3 / 2);
  padding: var(--s-4);
  border: 2px dashed var(--line-strong);
  border-radius: var(--r-1);
  background: var(--bg-sunk);
  color: var(--fg);
}
.slot__tag {
  position: absolute;
  top: var(--s-4);
  left: var(--s-4);
  padding: 0.2rem 0.45rem;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.slot__name { font-weight: 600; font-size: var(--step-1); line-height: 1.3; max-width: 30ch; text-wrap: balance; }
.slot__note { font-size: var(--step--1); color: var(--fg-soft); max-width: 38ch; }
.slot--quote { --ratio: auto; min-height: 13rem; }
.band--petrol .slot,
.band--ink .slot { border-color: var(--petrol-soft); background: oklch(100% 0 0 / 0.04); }

/* Credentials: the founder note as a letter, credentials as a ledger */
.cred__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.founder-note { display: grid; gap: var(--s-5); align-content: start; }
.founder-note blockquote {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: var(--step-2);
  line-height: 1.45;
  font-optical-sizing: auto;
  max-width: 38ch;
}
.founder-note blockquote p + p { margin-top: var(--s-4); }
.founder-note blockquote p:first-child::first-line { font-weight: 560; }
.founder-note figcaption { display: grid; gap: var(--s-1); }
.sig { font-family: var(--font-serif); font-style: italic; font-weight: 500; font-size: clamp(2rem, 1.6rem + 1.4vw, 2.5rem); line-height: 1; }
.cred__list { display: grid; gap: var(--s-5); align-content: start; }
.cred__items { display: grid; border-top: 2px solid var(--ink); }
.cred__items li { display: grid; gap: var(--s-1); padding-block: var(--s-4); border-bottom: 1px solid var(--rule); }
.cred__k { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.cred__v { color: var(--fg-soft); }
@media (min-width: 64rem) {
  .cred__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Straight rules: terms, set big */
.rules__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.rules__grid .section-head { margin-bottom: 0; }
.rules__list { display: grid; border-top: 2px solid var(--ink); }
.rule { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.rule dt { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.rule dd { color: var(--fg-soft); max-width: 56ch; }
@media (min-width: 48rem) {
  .rule { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); align-items: baseline; }
}
@media (min-width: 64rem) {
  .rules__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* Coverage check */
.coverage__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.coverage__grid .section-head { margin-bottom: 0; }
.check { display: grid; gap: var(--s-3); }
.check label { font-weight: 600; }
.check__row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
.check__row input { flex: 1 1 14rem; min-width: 0; }
.check__result { min-height: 3.2em; font-size: var(--step-1); line-height: 1.45; }
.check__result strong { font-weight: 600; }
.check__result a { font-weight: 600; text-decoration-color: var(--accent); }
.towns { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.towns a {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 2px solid var(--ink);
  border-radius: var(--r-2);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  text-decoration: none;
}
.towns a:hover { background: var(--accent); }
.towns a[data-flyers="ask"]::after {
  content: "Web + Google";
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  color: var(--fg-faint);
}
@media (min-width: 64rem) {
  .coverage__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* Booking band: audit, call, hours, service area, map */
.booking { padding-block: var(--section-pad); }
.booking__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.booking__main { display: grid; gap: var(--s-5); align-content: start; }
.booking__lede { max-width: 54ch; font-size: var(--step-1); line-height: 1.5; }
.checklist { display: grid; gap: var(--s-2) var(--gap); }
.checklist li {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: 0.9375rem;
  letter-spacing: 0.02em;
}
.checklist li::before {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h14v14H1z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 8.2l2.7 2.7L12.2 5.4' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M1 1h14v14H1z' fill='none' stroke='black' stroke-width='2'/%3E%3Cpath d='M4 8.2l2.7 2.7L12.2 5.4' fill='none' stroke='black' stroke-width='2.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
@media (min-width: 40rem) {
  .checklist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.checklist.checklist--one { grid-template-columns: minmax(0, 1fr); }
.booking__side { display: grid; gap: var(--s-5); align-content: start; }
.facts { display: grid; gap: var(--s-4); }
.facts div { display: grid; gap: var(--s-1); padding-top: var(--s-3); border-top: 2px solid var(--ink); }
.facts dt { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; }
.facts dd { font-weight: 500; }
@media (min-width: 64rem) {
  .booking__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Service area map */
.map {
  display: grid;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-1);
}
.map svg { width: 100%; height: auto; overflow: visible; }
.map__area { fill: var(--accent); stroke: var(--accent); opacity: 0.35; }
.map__river { fill: none; stroke: var(--line-strong); stroke-width: 3; stroke-linecap: round; }
.map__river-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; fill: var(--ink-faint); text-transform: uppercase; }
.map__dot { fill: var(--ink); }
.map__ring { fill: var(--card); stroke: var(--ink); stroke-width: 2.5; }
.map__base { fill: var(--accent); stroke: var(--ink); stroke-width: 3; }
.map__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; fill: var(--ink); text-transform: uppercase; letter-spacing: 0.02em; }
.map__name--on { font-weight: 800; font-size: 20px; }
.map__halo { fill: none; stroke: var(--ink); stroke-width: 2; stroke-dasharray: 3 4; }
.map__tick { stroke: var(--ink); stroke-width: 2; }
.map__small { font-family: var(--font-mono); font-size: 11px; fill: var(--ink-faint); letter-spacing: 0.08em; }
.map__legend { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-soft); }
.map__legend span { display: inline-flex; align-items: center; gap: 0.45em; }
.map__legend span::before { content: ""; width: 0.75rem; height: 0.75rem; border-radius: 50%; background: var(--ink); }
.map__legend span.is-ring::before { background: var(--card); border: 2px solid var(--ink); }
@media (max-width: 39.99rem) {
  .map__name { font-size: 21px; }
  .map__name--on { font-size: 23px; }
  .map__small,
  .map__river-label { font-size: 14px; }
}

/* Products: three equal things, ruled, not boxed */
.products__grid { display: grid; border-top: 2px solid var(--ink); }
.product { display: grid; gap: var(--s-3); align-content: start; padding-block: var(--s-6); border-bottom: 1px solid var(--rule); }
.product__tag { display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center; }
.product__start { padding: 0.1rem 0.45rem; background: var(--accent); color: var(--ink); }
.product__start:empty { display: none; }
.product__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 0.95; text-transform: uppercase; }
.product p:not([class]) { color: var(--fg-soft); max-width: 44ch; }
.product__price { display: flex; align-items: baseline; gap: 0.45rem; margin-top: var(--s-2); }
.product__price b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; }
@media (min-width: 64rem) {
  .products__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .product { padding: var(--s-6) var(--gap) var(--s-6) 0; border-bottom: 0; }
  .product + .product { padding-left: var(--gap); border-left: 1px solid var(--rule); }
}

/* Photo strip: one even row like a contact sheet, mixed widths, scrolls sideways on phones */
.strip__scroller { overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: var(--s-3); }
.strip__list { display: grid; gap: var(--gap); grid-template-columns: 15rem 19rem 15rem 17rem; }
.strip__list > li { display: grid; scroll-snap-align: start; }
.strip__list .photo-frame { grid-template-rows: 1fr auto; }
.strip__list .photo-frame .photo,
.strip__list .slot { aspect-ratio: auto; height: clamp(20rem, 16rem + 10vw, 27rem); min-height: 0; }
.strip__list .photo-frame:has(figcaption) .photo { height: calc(clamp(20rem, 16rem + 10vw, 27rem) - 1.75rem); }
@media (min-width: 64rem) {
  .strip__scroller { overflow: visible; }
  .strip__list { grid-template-columns: 4fr 5fr 4fr 5fr; }
}

/* Who it is for */
.who__grid { display: grid; gap: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.who__grid .section-head { margin-bottom: 0; }
.who__list { display: flex; flex-wrap: wrap; gap: 0.15em 0.6em; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3.4rem); line-height: 1.05; text-transform: uppercase; }
.who__list li { display: inline-flex; align-items: center; gap: 0.6em; }
.who__list li:not(:last-child)::after { content: ""; width: 0.28em; height: 0.28em; background: var(--accent); outline: 2px solid var(--ink); }
.who__points { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.who__points li { padding-top: var(--s-3); border-top: 1px solid var(--rule); color: var(--fg-soft); }
.who__points strong { color: var(--fg); font-weight: 600; }
@media (min-width: 48rem) {
  .who__points { grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--gap); }
}
@media (min-width: 64rem) {
  .who__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); align-items: start; }
}

/* Rulebook (flyers): numbered because the rules are named that way */
.rulebook__list { display: grid; border-top: 2px solid var(--ink); }
.rulebook__rule { display: grid; gap: var(--s-2); padding-block: var(--s-6); border-bottom: 1px solid var(--rule); }
.rulebook__num { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.rulebook__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 0.95; text-transform: uppercase; }
.rulebook__rule p:last-child { color: var(--fg-soft); max-width: 58ch; }
@media (min-width: 64rem) {
  .rulebook__rule { grid-template-columns: minmax(0, 2fr) minmax(0, 4fr) minmax(0, 6fr); gap: var(--gap); align-items: baseline; }
}

/* Spec list (websites, google): what is included, ruled */
.spec { display: grid; border-top: 2px solid var(--ink); }
.spec__item { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.spec__label { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.spec__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.spec__item p { color: var(--fg-soft); max-width: 58ch; }
.spec__price { font-weight: 600; color: var(--fg) !important; }
@media (min-width: 64rem) {
  .spec { grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--rule); }
  .spec__item { padding: var(--s-6) var(--gap) var(--s-6) 0; border-bottom: 0; }
  .spec__item + .spec__item { padding-left: var(--gap); border-left: 1px solid var(--rule); }
}

.ticks { display: grid; gap: var(--s-5) var(--gap); }
.ticks li { display: grid; gap: var(--s-1); padding-left: 2rem; position: relative; }
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.2em;
  width: 1.15rem;
  height: 0.6rem;
  border-left: 3px solid var(--ink);
  border-bottom: 3px solid var(--ink);
  transform: rotate(-45deg);
}
.ticks b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.ticks span { color: var(--fg-soft); max-width: 40ch; }
@media (min-width: 48rem) {
  .ticks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 64rem) {
  .ticks--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Quote slips (prices) */
.slip {
  display: grid;
  gap: var(--s-4);
  padding: clamp(1.25rem, 1rem + 1vw, 2rem);
  background: var(--card);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
}
.slip__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--s-2);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--step--2);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.slip__lines { display: grid; }
.slip__line { display: grid; gap: var(--s-2); padding-block: var(--s-4); border-bottom: 1px dashed var(--line-strong); }
.slip__item { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.slip__desc { color: var(--ink-soft); max-width: 54ch; }
.slip__price { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; white-space: nowrap; font-variant-numeric: tabular-nums; }
.slip__price small { font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: 0.04em; text-transform: none; color: var(--ink-faint); }
.slip__terms { font-family: var(--font-mono); font-size: var(--step--2); line-height: 1.6; color: var(--ink-soft); }
@media (min-width: 48rem) {
  .slip__line { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: var(--gap); }
  .slip__what { display: grid; gap: var(--s-2); }
}

/* Plans (pricing bundles) */
.plans { display: grid; gap: var(--gap); }
.plan { display: grid; gap: var(--s-4); align-content: start; }
.plan--best { border: 2px solid var(--ink); }
.plan__name { font-family: var(--font-display); font-weight: 800; font-size: var(--step-4); line-height: 0.95; text-transform: uppercase; }
.plan__price { display: flex; align-items: baseline; gap: 0.4rem; }
.plan__price b { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.5rem, 2rem + 2vw, 3.5rem); line-height: 0.9; }
.plan__list { display: grid; gap: var(--s-2); }
.plan__list li { display: flex; gap: 0.6rem; }
.plan__list li::before { content: ""; flex: none; width: 0.5rem; height: 0.5rem; margin-top: 0.55em; background: var(--ink); }
.plan__note { color: var(--ink-soft); font-size: var(--step--1); }
.plan .btn { justify-self: start; }
.best-tag { justify-self: start; padding: 0.15rem 0.5rem; background: var(--accent); color: var(--ink); font-family: var(--font-mono); font-weight: 600; font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; }
@media (min-width: 64rem) {
  .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
  .plan--best { margin-top: -1rem; }
}
.plans__heading { margin-bottom: var(--s-4); }
.js .plans__heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.toggle {
  display: inline-flex;
  margin-bottom: var(--s-6);
  border: 2px solid var(--ink);
  border-radius: var(--r-2);
}
.toggle__btn {
  min-height: 3rem;
  padding: 0 1.25rem;
  border: 0;
  background: transparent;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--step-1);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.toggle__btn + .toggle__btn { border-left: 2px solid var(--ink); }
.toggle__btn[aria-pressed="true"] { background: var(--ink); color: var(--paper); }

/* FAQ */
.faq { display: grid; border-top: 2px solid var(--ink); max-width: 52rem; }
.faq__item { border-bottom: 1px solid var(--rule); }
.faq__q {
  position: relative;
  display: block;
  padding: var(--s-5) 3rem var(--s-5) 0;
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before,
.faq__q::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: 50%;
  width: 1.1rem;
  height: 3px;
  background: var(--ink);
  transition: transform 200ms var(--ease);
}
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] .faq__q::after { transform: rotate(0deg); }
.faq__a { padding-bottom: var(--s-5); max-width: 62ch; color: var(--fg-soft); }

/* Forms */
.form { display: grid; gap: var(--s-5); align-content: start; }
.form__notice {
  display: grid;
  gap: var(--s-1);
  padding: var(--s-4);
  border: 2px dashed var(--ink);
  border-radius: var(--r-1);
  background: var(--card);
}
.form__notice strong { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.form__grid { display: grid; gap: var(--s-5) var(--gap); }
.field { display: grid; gap: var(--s-2); }
.field label { font-weight: 600; }
.field .optional { font-weight: 400; color: var(--fg-faint); }
.field input,
.field select,
.field textarea,
.check input {
  width: 100%;
  min-height: 3rem;
  padding: 0.65rem 0.8rem;
  border: 2px solid var(--line-strong);
  border-radius: var(--r-2);
  background: var(--card);
  font-size: var(--step-0);
}
.field textarea { min-height: 8rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible,
.check input:focus-visible { border-color: var(--ink); outline: 3px solid var(--focus); outline-offset: 1px; }
.field--trap { position: absolute; left: -100vw; }
.form__small { font-size: var(--step--1); color: var(--fg-soft); }
.form__error { display: grid; gap: var(--s-1); padding: var(--s-4); border: 2px solid var(--ink); border-radius: var(--r-1); background: var(--card); }
.form__error strong { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.form.is-sending button[type="submit"] { opacity: 0.6; cursor: progress; }
.form__result { display: grid; gap: var(--s-3); padding: var(--s-5); border: 2px solid var(--ink); border-radius: var(--r-1); background: var(--accent); color: var(--ink); }
.form__result strong { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
@media (min-width: 48rem) {
  .form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field--full { grid-column: 1 / -1; }
}

.contact__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.contact__aside { display: grid; gap: var(--s-6); align-content: start; }
.big-mail { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1.1; overflow-wrap: anywhere; text-decoration-color: var(--accent); text-decoration-thickness: 4px; text-underline-offset: 0.12em; }
@media (min-width: 64rem) {
  .contact__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

/* Town pages */
.local { display: grid; gap: var(--s-4); align-content: start; }
.local__facts { display: grid; border-top: 2px solid var(--ink); }
.local__facts div { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr); gap: var(--s-3); padding-block: var(--s-3); border-bottom: 1px solid var(--rule); }
.local__facts dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); padding-top: 0.2em; }
.local__facts dd { font-weight: 500; }

/* Story (about) */
.story__grid { display: grid; gap: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
@media (min-width: 64rem) {
  .story__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}
.principles { display: grid; border-top: 2px solid var(--ink); }
.principles li { display: grid; gap: var(--s-2); padding-block: var(--s-5); border-bottom: 1px solid var(--rule); }
.principles b { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.principles span { color: var(--fg-soft); max-width: 56ch; }
@media (min-width: 48rem) {
  .principles li { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--gap); align-items: baseline; }
}

/* Footer */
.site-foot { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem) var(--s-6); }
.foot__grid { display: grid; gap: var(--s-7) var(--gap); }
.foot__brand { display: grid; gap: var(--s-3); align-content: start; max-width: 30rem; }
.foot__brand .wordmark { font-size: 1.5rem; }
.foot__brand p { color: var(--paper-soft); }
.foot__contact a { color: var(--paper); font-weight: 600; text-decoration-color: var(--accent); }
.foot__head { margin-bottom: var(--s-3); font-family: var(--font-mono); font-weight: 500; font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--paper-soft); }
.foot__col ul { display: grid; gap: var(--s-1); }
.foot__col a { display: inline-flex; min-height: 2.25rem; align-items: center; text-decoration: none; }
.foot__col a:hover { text-decoration: underline; text-decoration-color: var(--accent); }
.foot__base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--ink-line); font-family: var(--font-mono); font-size: var(--step--2); color: var(--paper-soft); }
.foot__base a { color: var(--paper); }
@media (min-width: 48rem) {
  .foot__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .foot__brand { grid-column: 1 / -1; }
}
@media (min-width: 64rem) {
  .foot__grid { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); }
  .foot__brand { grid-column: auto; }
}

/* Phone action bar: phones only, after the hero has scrolled away */
.actionbar { display: none; }
@media (max-width: 47.99rem) {
  .actionbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 50;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-2);
    padding: var(--s-2) var(--s-3) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    background: var(--ink);
  }
  .actionbar:not(.is-on) { display: none; }
  .actionbar a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    min-height: 3rem;
    border: 2px solid var(--paper);
    border-radius: var(--r-2);
    color: var(--paper);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 1.125rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    text-decoration: none;
  }
  .actionbar a.is-primary { background: var(--accent); border-color: var(--accent); color: var(--ink); }
  .has-actionbar .site-foot { padding-bottom: calc(var(--s-6) + 4.5rem); }
}

/* Home hero: the whole system in one picture. The website, the Google listing and the flyer, all pointing to
   one tracked number. Sized from its own width, so it scales as one piece. */
.system {
  position: relative;
  container-type: inline-size;
  width: min(100%, 34rem);
  aspect-ratio: 1 / 0.92;
  justify-self: center;
  color: var(--ink);
}
.sys-card {
  position: absolute;
  background: var(--card);
  border: 2px solid var(--ink);
  border-radius: var(--r-1);
  box-shadow: 0 22px 40px -26px oklch(20.5% 0.014 243.6 / 0.55);
  transform: rotate(var(--r, 0deg));
  transition: transform 320ms var(--ease);
}
.sys-tag {
  position: absolute;
  top: -1.25em;
  left: 0.8em;
  padding: 0.15em 0.5em;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: max(0.6875rem, 2.4cqi);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.sys-web { --r: -1.5deg; top: 4%; left: 0; width: 70%; }
.sys-web__bar { display: flex; align-items: center; gap: 1.2cqi; padding: 1.6cqi 2cqi; border-bottom: 2px solid var(--ink); }
.sys-dot { width: 1.6cqi; height: 1.6cqi; border-radius: 50%; border: 1.5px solid var(--ink); }
.sys-web__url { margin-left: 1cqi; font-family: var(--font-mono); font-size: max(0.625rem, 2.2cqi); color: var(--ink-soft); }
.sys-web__body { display: grid; gap: 1.8cqi; padding: 3.2cqi 3.2cqi 3.6cqi; }
.sys-web__title { font-family: var(--font-display); font-weight: 800; font-size: 6.4cqi; line-height: 0.9; text-transform: uppercase; }
.sys-line { display: block; height: 1.4cqi; background: var(--line); }
.sys-line--short { width: 62%; }
.sys-web__row { display: flex; gap: 1.6cqi; margin-top: 0.6cqi; }
.sys-btn { padding: 1.2cqi 2cqi; background: var(--accent); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 700; font-size: max(0.6875rem, 2.6cqi); text-transform: uppercase; line-height: 1; }
.sys-btn--ghost { background: transparent; }
.sys-web__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4cqi; }
.sys-web__photos span { aspect-ratio: 4 / 3; background: var(--paper-2); border: 1.5px solid var(--line-strong); }
.sys-google { --r: 2deg; top: 40%; right: 0; width: 54%; overflow: visible; }
.sys-g__map { position: relative; height: 15cqi; background: var(--paper-2); border-bottom: 2px solid var(--ink); overflow: hidden; }
.sys-g__road { position: absolute; left: -10%; right: -10%; top: 45%; height: 1.6cqi; background: var(--card); transform: rotate(-12deg); }
.sys-g__road--b { top: 10%; left: 40%; right: auto; width: 1.6cqi; height: 140%; transform: rotate(18deg); }
.sys-g__pin { position: absolute; left: 50%; top: 22%; width: 4.4cqi; height: 4.4cqi; background: var(--accent); border: 2px solid var(--ink); border-radius: 50% 50% 50% 0; transform: rotate(-45deg); }
.sys-g__body { display: grid; gap: 1.2cqi; padding: 2.6cqi 3cqi 3.2cqi; }
.sys-g__name { font-family: var(--font-display); font-weight: 800; font-size: 4.6cqi; line-height: 1; text-transform: uppercase; }
.sys-g__meta { font-size: max(0.6875rem, 2.4cqi); color: var(--ink-soft); }
.sys-g__chips { display: flex; flex-wrap: wrap; gap: 1.2cqi; }
.sys-g__chips span { padding: 0.8cqi 1.6cqi; border: 1.5px solid var(--ink); border-radius: 999px; font-size: max(0.625rem, 2.2cqi); font-weight: 600; }
.sys-flyer { --r: -6deg; bottom: 2%; left: 8%; width: 30%; aspect-ratio: 1 / 1.414; display: grid; grid-template-rows: auto 1fr; gap: 1.4cqi; padding: 3cqi 2cqi 2cqi; }
.sys-f__mast { font-family: var(--font-display); font-weight: 800; font-size: 3.6cqi; line-height: 1; text-transform: uppercase; border-bottom: 2px solid var(--ink); padding-bottom: 1cqi; }
.sys-f__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: 1cqi; }
.sys-f__grid span { border: 1.5px solid var(--line-strong); }
.sys-f__grid .is-you { display: grid; place-items: center; background: var(--accent); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 3cqi; text-transform: uppercase; }
.sys-pill {
  position: absolute;
  right: 2%;
  bottom: 3%;
  max-width: 52%;
  padding: 1.4cqi 2.4cqi;
  background: var(--ink);
  color: var(--paper);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: max(0.6875rem, 2.4cqi);
  line-height: 1.3;
}
.system:hover .sys-web { transform: rotate(-3deg) translate(-1.5%, -2%); }
.system:hover .sys-google { transform: rotate(3.5deg) translate(2%, 1%); }
.system:hover .sys-flyer { transform: rotate(-9deg) translate(-3%, 2%); }
@media (prefers-reduced-motion: no-preference) {
  .sys-card, .sys-pill { animation: sys-in 700ms var(--ease) backwards; }
  .sys-google { animation-delay: 140ms; }
  .sys-flyer { animation-delay: 280ms; }
  .sys-pill { animation-delay: 520ms; }
}
@keyframes sys-in {
  from { opacity: 0; transform: translateY(28px) rotate(0deg); }
}

/* Home problem: the three pieces that never talk to each other */
.pieces { display: grid; gap: var(--gap); margin-block: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-top: 2px solid var(--ink); }
.piece { display: grid; gap: var(--s-2); padding-top: var(--s-5); max-width: 36ch; color: var(--fg-soft); }
.piece__k { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; color: var(--fg); }
@media (min-width: 48rem) {
  .pieces { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Flyer story (flyers page). One camera inside a customer's home: the back of the front door, the mat, the fridge.
   Five scenes; main.js only picks the scene from the scroll position, and every move between scenes is a smooth
   eased transition, so it never jitters and plays backwards when you scroll up. The stage is a size container, so
   the whole drawing scales as one piece. Without JavaScript or with reduced motion it rests on scene 5. */
.story__pin { display: grid; gap: var(--s-4); }
.story.is-live .story__run { height: 260vh; }
.story.is-live .story__run[data-scenes="3"] { height: 190vh; }
.story.is-live .story__pin { position: sticky; top: max(1rem, 8vh); }

.rs {
  --fw: min(36cqw, 30cqh);
  --fh: calc(var(--fw) * 1.414);
  --t: 1000ms;
  --e: cubic-bezier(0.65, 0, 0.2, 1);
  --fx: 0cqw;
  --fy: calc(42cqh - var(--fh));
  --fr: 0deg;
  --fs: 1;
  position: relative;
  container-type: size;
  width: min(100%, calc(60vh * 16 / 9));
  aspect-ratio: 16 / 9;
  margin-inline: auto;
  overflow: hidden;
  border-radius: var(--r-1);
  background: var(--petrol);
}
.rs[data-scene="1"] { --fy: calc(42cqh - var(--fh) * 0.42); --fr: -1.5deg; }
.rs[data-scene="2"] { --fy: calc(64cqh - var(--fh) * 0.5); --fr: -11deg; --fs: 0.92; }
.rs[data-scene="3"] { --fy: calc(50cqh - var(--fh) * 0.5); --fr: 2deg; }
.rs[data-scene="4"] { --fy: calc(50cqh - var(--fh) * 0.5); --fx: -10cqw; --fs: 1.45; }
.rs[data-scene="5"] { --fy: calc(50cqh - var(--fh) * 0.5); --fx: -22cqw; --fr: -2deg; --fs: 0.95; }

.rs-set { position: absolute; inset: 0; transition: transform var(--t) var(--e); }

/* The back of the front door, in two pieces either side of the letterbox, so the flyer comes out of the slot */
.rs-door, .rs-door-top { background: var(--petrol-2); }
.rs-door-top { bottom: auto; height: 42cqh; z-index: 3; }
.rs-door { top: 42cqh; z-index: 1; }
.rs[data-scene="2"] :is(.rs-door, .rs-door-top),
.rs[data-scene="3"] :is(.rs-door, .rs-door-top),
.rs[data-scene="4"] :is(.rs-door, .rs-door-top),
.rs[data-scene="5"] :is(.rs-door, .rs-door-top) { transform: translateY(-110cqh); }
.rs-mould { position: absolute; left: 14cqw; right: 14cqw; border: 0.5cqw solid var(--petrol-line); }
.rs-mould--high { top: 8cqh; height: 22cqh; }
.rs-mould--low { top: 14cqh; height: 34cqh; }
.rs-plate { position: absolute; left: 50%; width: calc(var(--fw) + 10cqw); height: 5cqh; transform: translateX(-50%); background: var(--accent); border: 3px solid var(--ink); }
.rs-plate--high { bottom: 0; border-bottom: 0; }
.rs-plate--high::after, .rs-plate--low::after { content: ""; position: absolute; left: 3cqw; right: 3cqw; height: 1.6cqh; background: var(--ink); }
.rs-plate--high::after { bottom: 0; }
.rs-plate--low { top: 0; border-top: 0; }
.rs-plate--low::after { top: 0; }

/* The hall floor and the mat */
.rs-mat { z-index: 1; transform: translateY(110cqh); background: repeating-linear-gradient(90deg, var(--paper-2) 0 calc(14cqw - 3px), var(--line) 0 14cqw); }
.rs[data-scene="2"] .rs-mat { transform: none; }
.rs[data-scene="3"] .rs-mat,
.rs[data-scene="4"] .rs-mat,
.rs[data-scene="5"] .rs-mat { transform: translateX(-110cqw); }
.rs-mat__rug {
  position: absolute;
  left: 22cqw;
  right: 22cqw;
  top: 38cqh;
  bottom: 6cqh;
  border-radius: 1cqw;
  background: repeating-linear-gradient(0deg, var(--ink-2) 0 4px, var(--ink) 4px 7px);
  box-shadow: inset 0 0 0 1.4cqw var(--ink-soft);
}

/* The fridge */
.rs-fridge { z-index: 1; transform: translateX(110cqw); }
.rs[data-scene="3"] .rs-fridge { transform: none; }
.rs[data-scene="4"] .rs-fridge { transform: translateX(-10cqw) scale(1.45); }
.rs[data-scene="5"] .rs-fridge { transform: translateX(-22cqw) scale(0.95); }
.rs-fridge__door { position: absolute; left: 31cqw; width: 38cqw; top: -4cqh; bottom: -4cqh; background: var(--card); border: 3px solid var(--ink); border-radius: 2cqw; }
.rs-fridge__seam { position: absolute; left: 0; right: 0; top: 24%; border-top: 3px solid var(--ink); }
.rs-fridge__handle { position: absolute; left: 2.4cqw; top: 32%; width: 1.2cqw; height: 26cqh; border-radius: 1cqw; background: var(--line-strong); }

/* The flyer: the Local Run, trades and high street side by side */
.rs-flyer {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 0;
  width: var(--fw);
  height: var(--fh);
  display: grid;
  grid-template-rows: auto 1fr;
  gap: calc(var(--fw) * 0.04);
  padding: calc(var(--fw) * 0.06);
  background: var(--card);
  color: var(--ink);
  border-radius: var(--r-1);
  box-shadow: 0 1px 0 oklch(20.5% 0.014 243.6 / 0.1), 0 2cqh 4cqh -1cqh oklch(20.5% 0.014 243.6 / 0.55);
  transform: translateX(-50%) translate(var(--fx), var(--fy)) rotate(var(--fr)) scale(var(--fs));
  transition: transform var(--t) var(--e);
}
.rs-flyer__mast { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--fw) * 0.12); line-height: 0.95; text-transform: uppercase; padding-bottom: calc(var(--fw) * 0.03); border-bottom: 2px solid var(--ink); }
.rs-flyer__grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(3, 1fr); gap: calc(var(--fw) * 0.03); min-height: 0; }
.rs-flyer__grid li {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--fw) * 0.03);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: calc(var(--fw) * 0.052);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: background-color 400ms var(--ease), border-color 400ms var(--ease);
}
.rs-you b { font-family: var(--font-display); font-weight: 800; font-size: calc(var(--fw) * 0.075); line-height: 0.95; letter-spacing: 0; color: var(--ink); }
.rs-qr { position: relative; align-self: flex-end; width: calc(var(--fw) * 0.1); aspect-ratio: 1; background: var(--ink); box-shadow: inset 0 0 0 calc(var(--fw) * 0.018) var(--ink), inset 0 0 0 calc(var(--fw) * 0.032) var(--card); }
.rs[data-scene="4"] .rs-you,
.rs[data-scene="5"] .rs-you { background: var(--accent); border: 2px solid var(--ink); }
.rs-you .rs-qr::after { content: ""; position: absolute; inset: 0; border: 2px solid var(--ink); opacity: 0; }
.rs[data-scene="4"] .rs-you .rs-qr::after { animation: rs-ping 1100ms var(--ease) 700ms 3; }
@keyframes rs-ping {
  from { opacity: 1; transform: scale(1); }
  to { opacity: 0; transform: scale(3.2); }
}
.rs-magnet { position: absolute; left: 50%; top: calc(var(--fw) * -0.05); width: calc(var(--fw) * 0.14); aspect-ratio: 1; border-radius: 50%; background: var(--accent); border: 2px solid var(--ink); transform: translateX(-50%) scale(0); transition: transform 380ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.rs[data-scene="3"] .rs-magnet,
.rs[data-scene="4"] .rs-magnet,
.rs[data-scene="5"] .rs-magnet { transform: translateX(-50%) scale(1); transition-delay: 820ms; }

/* What happens next: the weeks pass, the phone rings, the bookings come in */
.rs-later, .rs-call, .rs-slip { opacity: 0; transition: opacity 500ms var(--ease), transform var(--t) var(--e); }
.rs-later {
  position: absolute;
  z-index: 4;
  left: 4cqw;
  top: 7cqh;
  padding: 0.6cqw 1.4cqw;
  background: var(--ink);
  color: var(--paper);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 4.6cqw;
  line-height: 1;
  text-transform: uppercase;
  transform: translateY(3cqh);
}
.rs[data-scene="3"] .rs-later { opacity: 1; transform: none; transition-delay: 600ms; }
.rs-call {
  position: absolute;
  z-index: 4;
  right: 5cqw;
  bottom: 9cqh;
  width: 30cqw;
  display: grid;
  gap: 0.6cqw;
  padding: 2cqw 2.2cqw;
  border-radius: 1.6cqw;
  background: var(--ink);
  color: var(--paper);
  transform: translateY(30cqh);
}
.rs[data-scene="4"] .rs-call { opacity: 1; transform: none; transition-delay: 500ms; }
.rs-call__dot { width: 1.6cqw; aspect-ratio: 1; border-radius: 50%; background: var(--accent); }
.rs[data-scene="4"] .rs-call__dot { animation: rs-ring 900ms var(--ease) 900ms 3; }
@keyframes rs-ring {
  50% { box-shadow: 0 0 0 1.2cqw oklch(85.9% 0.176 89 / 0.25); }
}
.rs-call__k { font-family: var(--font-display); font-weight: 800; font-size: 3.4cqw; line-height: 1; text-transform: uppercase; }
.rs-call__v { font-size: 1.6cqw; line-height: 1.35; color: var(--petrol-soft); }
.rs-slips { position: absolute; z-index: 4; right: 6cqw; top: 12cqh; width: 34cqw; display: grid; gap: 2.4cqh; }
.rs-slip { padding: 1.4cqw 1.8cqw; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-1); transform: translateX(46cqw) rotate(6deg); }
.rs-slip__k { font-family: var(--font-mono); font-size: 1.4cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rs-slip__v { font-family: var(--font-display); font-weight: 800; font-size: 2.9cqw; line-height: 1; text-transform: uppercase; }
:is(.rs[data-scene="5"], .rs--web[data-scene="3"]) .rs-slip { opacity: 1; transform: rotate(-1.5deg); transition-delay: 350ms; }
:is(.rs[data-scene="5"], .rs--web[data-scene="3"]) .rs-slip:nth-child(2) { transform: rotate(1.2deg) translateX(2cqw); transition-delay: 500ms; }
:is(.rs[data-scene="5"], .rs--web[data-scene="3"]) .rs-slip:nth-child(3) { transform: rotate(-0.6deg); transition-delay: 650ms; }

/* Phones: a taller stage, so the flyer stays big */
@media (max-width: 40rem) {
  .rs { width: 100%; aspect-ratio: 4 / 5; --fw: min(44cqw, 30cqh); }
  .rs-mould { left: 8cqw; right: 8cqw; }
  .rs-mat__rug { left: 8cqw; right: 8cqw; }
  .rs-fridge__door { left: 12cqw; width: 76cqw; }
  .rs[data-scene="4"] { --fx: 0cqw; --fy: calc(40cqh - var(--fh) * 0.5); --fs: 1.3; }
  .rs[data-scene="4"] .rs-fridge { transform: scale(1.3); }
  .rs[data-scene="5"] { --fx: -24cqw; --fy: calc(50cqh - var(--fh) * 0.5); --fs: 0.8; }
  .rs[data-scene="5"] .rs-fridge { transform: translateX(-30cqw); }
  .rs-later { font-size: 7cqw; left: 5cqw; top: 5cqh; }
  .rs-call { left: 7cqw; right: 7cqw; width: auto; bottom: 6cqh; gap: 1cqw; padding: 4cqw; border-radius: 3cqw; }
  .rs-call__dot { width: 3cqw; }
  .rs-call__k { font-size: 7cqw; }
  .rs-call__v { font-size: 3.6cqw; }
  .rs-slips { right: 4cqw; top: 26cqh; width: 50cqw; gap: 2cqh; }
  .rs-slip { padding: 2.4cqw 3cqw; }
  .rs-slip__k { font-size: 2.8cqw; }
  .rs-slip__v { font-size: 5cqw; }
}

/* Website story (websites page): a phone, from a search to your site to a call. Same stage and timing as the flyer story. */
.rw-phone {
  --px: 0cqw;
  --py: 62cqh;
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 7cqh;
  height: 86cqh;
  aspect-ratio: 9 / 19;
  padding: 1.4cqh;
  border-radius: 4.4cqh;
  background: var(--ink);
  box-shadow: 0 2cqh 5cqh -2cqh oklch(20.5% 0.014 243.6 / 0.6);
  transform: translateX(-50%) translate(var(--px), var(--py));
  transition: transform var(--t) var(--e);
}
.rs--web[data-scene="1"] .rw-phone,
.rs--web[data-scene="2"] .rw-phone { --py: 0cqh; }
.rs--web[data-scene="3"] .rw-phone { --py: 0cqh; --px: -18cqw; }
.rw-screen { position: relative; height: 100%; overflow: hidden; border-radius: 3cqh; background: var(--card); color: var(--ink); }
.rw-search, .rw-site, .rw-calling { position: absolute; inset: 0; transition: transform var(--t) var(--e), opacity 500ms var(--ease); }
.rw-search { display: grid; align-content: start; gap: 1.2cqh; padding: 2.4cqh 1.8cqh; }
.rw-bar { padding: 1cqh 1.8cqh; border: 2px solid var(--ink); border-radius: 999px; font-size: 2.2cqh; }
.rw-result { display: grid; gap: 0.8cqh; padding: 1.4cqh; border-bottom: 1px solid var(--line); transition: background-color 400ms var(--ease); }
.rw-result__name { font-family: var(--font-display); font-weight: 800; font-size: 2.8cqh; line-height: 1; text-transform: uppercase; }
.rw-result__url { font-family: var(--font-mono); font-size: 1.6cqh; color: var(--ink-soft); }
.rs--web[data-scene="1"] .rw-result--you { background: var(--accent); transition-delay: 700ms; }
.rw-line { display: block; height: 1.1cqh; background: var(--line); }
.rw-line--title { width: 62%; height: 1.6cqh; background: var(--line-strong); }
.rw-line--short { width: 58%; }
.rw-line--light { background: oklch(96.5% 0.005 117.9 / 0.55); }
.rw-site { display: flex; flex-direction: column; overflow: hidden; background: var(--card); transform: translateX(105%); }
.rs--web[data-scene="2"] .rw-site,
.rs--web[data-scene="3"] .rw-site { transform: none; }
.rs--web[data-scene="2"] .rw-search,
.rs--web[data-scene="3"] .rw-search { transform: translateX(-35%); visibility: hidden; transition: transform var(--t) var(--e), visibility 0s linear var(--t); }
.rw-site__scroll { display: grid; gap: 1.3cqh; padding-top: 1.3cqh; padding-bottom: 10cqh; transition: transform 1600ms var(--e); }
.rw-site__scroll > .rw-line, .rw-site__k, .rw-site__photos { margin-inline: 1.8cqh; }
.rs--web[data-scene="2"] .rw-site__scroll,
.rs--web[data-scene="3"] .rw-site__scroll { transform: translateY(-12cqh); transition-delay: 800ms; }
.rw-site__head { position: relative; z-index: 1; flex: none; background: var(--card); padding: 1.6cqh 1.8cqh 1.2cqh; border-bottom: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 2.6cqh; text-transform: uppercase; }
.rw-site__hero { margin-top: -1.3cqh; display: grid; align-content: end; gap: 1cqh; height: 17cqh; padding: 1.8cqh; background: var(--petrol); }
.rw-site__photos { display: grid; grid-template-columns: 1fr 1fr; gap: 1cqh; }
.rw-site__photos span { aspect-ratio: 4 / 3; background: var(--paper-2); border: 1.5px solid var(--line-strong); }
.rw-site__k { margin-top: 0.6cqh; font-family: var(--font-mono); font-size: 1.6cqh; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rw-site__call { position: absolute; left: 1.8cqh; right: 1.8cqh; bottom: 1.8cqh; padding: 1.3cqh; background: var(--accent); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 2.4cqh; text-align: center; text-transform: uppercase; }
.rw-calling { display: grid; place-content: center; justify-items: center; gap: 1.4cqh; background: var(--ink); color: var(--paper); opacity: 0; }
.rs--web[data-scene="3"] .rw-calling { opacity: 1; transition-delay: 900ms; }
.rw-calling .rs-call__dot { width: 2.6cqh; }
.rs--web[data-scene="3"] .rw-calling .rs-call__dot { animation: rs-ring 900ms var(--ease) 1300ms 3; }
.rw-calling__k { font-family: var(--font-display); font-weight: 800; font-size: 4.4cqh; line-height: 1; text-transform: uppercase; }
.rw-calling__v { font-size: 2.2cqh; color: var(--petrol-soft); }
.rw-tap { position: absolute; z-index: 3; width: 7cqh; aspect-ratio: 1; border-radius: 50%; border: 2px solid var(--ink); background: oklch(96.5% 0.005 117.9 / 0.6); opacity: 0; transform: translate(-50%, -50%); }
.rs--web[data-scene="1"] .rw-tap { top: 31cqh; left: 62%; animation: rs-tap-a 900ms var(--ease) 1100ms both; }
.rs--web[data-scene="3"] .rw-tap { top: calc(100% - 6.5cqh); left: 50%; animation: rs-tap-b 900ms var(--ease) 300ms both; }
@keyframes rs-tap-a { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
@keyframes rs-tap-b { 0% { opacity: 0; transform: translate(-50%, -50%) scale(0.6); } 30% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(1.6); } }
.rs--web .rs-slips { top: 18cqh; }

/* Google story (google page): a map of choices, your pin picked, then a review and your reply. */
.rg-map { position: absolute; inset: 0; overflow: hidden; background: var(--paper-2); }
.rg-road, .rg-river { position: absolute; }
.rg-road { background: var(--card); box-shadow: 0 0 0 2px var(--line-strong); }
.rg-road--a { left: -10%; right: -10%; top: 40cqh; height: 4cqh; transform: rotate(-8deg); }
.rg-road--b { top: -10%; bottom: -10%; left: 30cqw; width: 3.2cqw; transform: rotate(14deg); }
.rg-road--c { top: -10%; bottom: -10%; left: 64cqw; width: 2.4cqw; transform: rotate(-22deg); }
.rg-river { left: -10%; right: -10%; top: 76cqh; height: 7cqh; border-radius: 99px; background: var(--petrol-soft); transform: rotate(4deg); }
.rg-pin { position: absolute; z-index: 1; width: 4.4cqw; aspect-ratio: 1; border-radius: 50% 50% 50% 0; background: var(--card); border: 2px solid var(--ink); transform: rotate(-45deg) scale(0); transition: transform 520ms cubic-bezier(0.3, 1.5, 0.5, 1), opacity 400ms var(--ease), background-color 400ms var(--ease); }
.rg-pin--1 { left: 18cqw; top: 22cqh; }
.rg-pin--2 { left: 40cqw; top: 58cqh; }
.rg-pin--3 { left: 72cqw; top: 26cqh; }
.rg-pin--4 { left: 84cqw; top: 60cqh; }
.rg-pin--you { left: 52cqw; top: 30cqh; z-index: 2; }
.rs--map:not([data-scene="0"]) .rg-pin { transform: rotate(-45deg) scale(1); }
.rs--map:not([data-scene="0"]) .rg-pin--2 { transition-delay: 120ms; }
.rs--map:not([data-scene="0"]) .rg-pin--you { transition-delay: 240ms; }
.rs--map:not([data-scene="0"]) .rg-pin--3 { transition-delay: 360ms; }
.rs--map:not([data-scene="0"]) .rg-pin--4 { transition-delay: 480ms; }
.rs--map:is([data-scene="2"], [data-scene="3"]) .rg-pin { opacity: 0.4; transition-delay: 0ms; }
.rs--map:is([data-scene="2"], [data-scene="3"]) .rg-pin--you { opacity: 1; background: var(--accent); transform: rotate(-45deg) scale(1.6); }
.rg-search { position: absolute; z-index: 3; left: 4cqw; top: 5cqh; width: 32cqw; padding: 1.1cqw 2.2cqw; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: 999px; font-size: 1.8cqw; transition: opacity 400ms var(--ease); }
.rg-card, .rg-review { position: absolute; z-index: 3; bottom: 6cqh; width: 33cqw; display: grid; gap: 0.9cqw; padding: 1.6cqw; background: var(--card); color: var(--ink); border: 2px solid var(--ink); border-radius: var(--r-1); box-shadow: 0 2cqh 4cqh -2cqh oklch(20.5% 0.014 243.6 / 0.5); transition: transform var(--t) var(--e), opacity 500ms var(--ease); }
.rg-card { right: 4cqw; transform: translateY(80cqh); }
.rs--map[data-scene="2"] .rg-card { transform: none; transition-delay: 450ms; }
.rs--map[data-scene="3"] .rg-card { transform: translateX(-38cqw); }
.rg-card__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7cqw; }
.rg-card__photos span { aspect-ratio: 4 / 3; background: var(--paper-2); border: 1.5px solid var(--line-strong); }
.rg-card__name { font-family: var(--font-display); font-weight: 800; font-size: 2.8cqw; line-height: 1; text-transform: uppercase; }
.rg-card__meta { font-size: 1.5cqw; color: var(--ink-soft); }
.rg-card__chips { display: flex; flex-wrap: wrap; gap: 0.7cqw; }
.rg-card__chips span { padding: 0.4cqw 1cqw; border: 1.5px solid var(--ink); border-radius: 999px; font-size: 1.3cqw; font-weight: 600; }
.rg-review { right: 4cqw; opacity: 0; transform: translateX(45cqw); }
.rs--map[data-scene="3"] .rg-review { opacity: 1; transform: rotate(1deg); transition-delay: 450ms; }
.rg-review .rw-line { height: 1.1cqh; }
.rg-review__k { font-family: var(--font-mono); font-size: 1.3cqw; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.rg-review__k--reply { margin-top: 0.6cqw; }
.rg-review__done { justify-self: start; padding: 0.4cqw 0.9cqw; background: var(--accent); border: 2px solid var(--ink); font-family: var(--font-display); font-weight: 800; font-size: 1.6cqw; text-transform: uppercase; transform: scale(0); transition: transform 380ms cubic-bezier(0.3, 1.6, 0.5, 1); }
.rs--map[data-scene="3"] .rg-review__done { transform: scale(1); transition-delay: 1400ms; }

@media (max-width: 40rem) {
  .rw-phone { top: 6cqh; height: 80cqh; }
  .rs--web[data-scene="3"] .rw-phone { --px: -25cqw; }
  .rs--web .rs-slips { right: 3cqw; width: 46cqw; top: 22cqh; }
  .rg-pin { width: 8cqw; }
  .rg-search { width: 62cqw; font-size: 3.6cqw; padding: 2cqw 4cqw; }
  .rg-card, .rg-review { left: 5cqw; right: 5cqw; width: auto; bottom: 5cqh; gap: 1.8cqw; padding: 3.2cqw; }
  .rs--map[data-scene="3"] .rg-card { transform: translateY(-50cqh); }
  .rs--map[data-scene="3"] .rg-search { opacity: 0; }
  .rg-card__photos { gap: 1.4cqw; }
  .rg-card__name { font-size: 5.6cqw; }
  .rg-card__meta { font-size: 3cqw; }
  .rg-card__chips { gap: 1.4cqw; }
  .rg-card__chips span { font-size: 2.8cqw; padding: 0.8cqw 2cqw; }
  .rg-review__k { font-size: 2.6cqw; }
  .rg-review__done { font-size: 3.2cqw; padding: 0.8cqw 1.8cqw; }
}

.story__steps { display: grid; gap: var(--s-4); counter-reset: story; }
.story__step { display: grid; gap: var(--s-1); align-content: start; padding-top: var(--s-3); border-top: 2px solid var(--rule); color: var(--fg-soft); transition: border-color 240ms var(--ease), color 240ms var(--ease); }
.story__step::before { counter-increment: story; content: "Step " counter(story) " of 5"; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.story__k { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; color: var(--fg); }
.story.is-live .story__step.is-on { border-top-color: var(--accent); color: var(--fg); }
.story__steps--3 .story__step::before { content: "Step " counter(story) " of 3"; }
@media (min-width: 64rem) {
  .story__steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap); }
  .story__steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .story.is-live .story__step p:last-child { font-size: var(--step--1); }
}
/* On phones only the step in view shows while the story plays; the others stay readable to screen readers. */
@media (max-width: 63.99rem) {
  .story.is-live .story__pin { top: max(1rem, 6vh); }
  .story.is-live .story__step:not(.is-on) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* The flyers page hero card lands like a flyer on a mat */
@media (prefers-reduced-motion: no-preference) {
  .hero--flyer .flyer { animation: flyer-land 700ms var(--ease) backwards; }
}
@keyframes flyer-land {
  from { opacity: 0; transform: translateY(-36px) rotate(-11deg); }
}

/* The route draws itself as the process section comes in */
.motion .reveal .route::before { transform: scaleY(0); transform-origin: top; transition: transform 900ms var(--ease) 200ms; }
.motion .reveal.is-in .route::before { transform: none; }
@media (min-width: 64rem) {
  .motion .reveal .route::before { transform: scaleX(0); transform-origin: left; }
}

/* Guides: long reads set like a trade handbook */
.guides { display: grid; gap: var(--gap); }
.guide-card { display: grid; gap: var(--s-3); align-content: start; padding-top: var(--s-4); border-top: 2px solid var(--ink); }
.guide-card__k { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-faint); }
.guide-card__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; text-wrap: balance; }
.guide-card__title a { text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 3px; text-underline-offset: 0.12em; }
.guide-card p:last-child { color: var(--fg-soft); max-width: 46ch; }
@media (min-width: 48rem) {
  .guides { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.guide-list, .guide-steps { display: grid; gap: var(--s-3); padding-left: 1.25em; }
.guide-list { list-style: square; }
.guide-list li::marker { color: var(--fg); }
.guide-steps { list-style: decimal; }
.guide-steps li::marker { font-family: var(--font-display); font-weight: 800; }
.guide-note { padding: var(--s-4); background: var(--bg-sunk); font-size: var(--step--1); color: var(--fg-soft); }
.prose .table-wrap { overflow-x: auto; }
.guide-table { width: 100%; min-width: 30rem; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.guide-table caption { padding-bottom: var(--s-3); text-align: left; font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-faint); }
.guide-table th, .guide-table td { padding: var(--s-3) var(--s-3) var(--s-3) 0; border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.guide-table thead th { border-bottom: 2px solid var(--ink); font-family: var(--font-mono); font-size: var(--step--2); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-faint); }
.guide-table tbody th { font-weight: 600; }

.calc { display: grid; gap: var(--s-3); padding: var(--s-5); border: 2px solid var(--ink); background: var(--card); }
.calc__title { font-family: var(--font-display); font-weight: 800; font-size: var(--step-3); line-height: 1; text-transform: uppercase; }
.calc__row { display: grid; gap: var(--s-3); }
@media (min-width: 40rem) { .calc__row { grid-template-columns: 1fr 1.4fr; } }
.calc__out { font-family: var(--font-display); font-weight: 800; font-size: var(--step-2); line-height: 1.15; text-transform: uppercase; padding: var(--s-3) var(--s-4); background: var(--accent); border: 2px solid var(--ink); }
.calc__small { font-size: var(--step--1); color: var(--fg-soft); }

/* Error page */
.notfound { min-height: 50vh; display: grid; align-content: center; }

/* Motion. Everything is visible without JavaScript; .motion is only set when it is allowed. */
.motion .reveal .reveal-item {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 480ms var(--ease), transform 480ms var(--ease);
  transition-delay: calc(var(--i, 0) * 70ms);
}
.motion .reveal.is-in .reveal-item { opacity: 1; transform: none; }

.motion .loop:not(.is-in) .loop__step,
.motion .loop:not(.is-in) .loop__arrow,
.motion .loop:not(.is-in) .loop__return,
.motion .loop:not(.is-in) .loop__chip { opacity: 0; }
.motion .loop:not(.is-in) .loop__step { transform: translateY(14px); }
.motion .loop .loop__step,
.motion .loop .loop__arrow,
.motion .loop .loop__return,
.motion .loop .loop__chip { transition: opacity 420ms var(--ease), transform 420ms var(--ease); }
.motion .loop.is-in .loop__step { transition-delay: calc(var(--i) * 360ms); }
.motion .loop.is-in .loop__arrow { transition-delay: calc(var(--i) * 360ms + 200ms); }
.motion .loop.is-in .loop__return { transition-delay: 1300ms; }
.motion .loop.is-in .loop__chip { transition-delay: 1550ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
  .flyer { transform: rotate(-2deg) !important; }
  .hero-photo__img { transform: none !important; }
}