/* fonts.css */
/* css/fonts.css — generated by internal/perf/subset-fonts.py. Do not edit by hand.
   Two families, self-hosted and subset (design system §3). Both draw the rupee
   sign; the build fails if either loses it. The -fallback faces carry metric
   overrides measured against Georgia and Helvetica so font-display: swap costs
   no layout shift. */

@font-face {
  font-family: 'Rozha One'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/rozha-one.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+20B9;
}

@font-face {
  font-family: 'Rozha One fallback'; font-style: normal; font-weight: 400;
  src: local('Georgia'), local('Bodoni 72'), local('Didot');
  size-adjust: 95.55%; ascent-override: 104.45%; descent-override: 44.17%; line-gap-override: 0.0%;
}

@font-face {
  font-family: 'Anek Latin'; font-style: normal; font-weight: 300 700; font-stretch: 75% 125%; font-display: swap;
  src: url('/fonts/anek-latin.woff2') format('woff2');
  unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+20B9;
}

@font-face {
  font-family: 'Anek Latin'; font-style: normal; font-weight: 300 700; font-stretch: 75% 125%; font-display: swap;
  src: url('/fonts/anek-latin-ext.woff2') format('woff2');
  unicode-range: U+00A1-0131, U+0134-0148, U+014A-017E, U+2039-203A, U+20AC;
}

/* Engines without variable-font support get the 600 instance for labels. */
@supports not (font-variation-settings: 'wght' 600) {
  @font-face {
    font-family: 'Anek Latin'; font-style: normal; font-weight: 600; font-display: swap;
    src: url('/fonts/anek-latin-600.woff2') format('woff2');
    unicode-range: U+0020-007E, U+00A0, U+00B7, U+00D7, U+2013-2014, U+2018-2019, U+201C-201D, U+2026, U+20B9;
  }
}

@font-face {
  font-family: 'Anek Latin fallback'; font-style: normal; font-weight: 300 700;
  src: local('Helvetica Neue'), local('Segoe UI'), local('Arial');
  size-adjust: 93.51%; ascent-override: 96.25%; descent-override: 21.39%; line-gap-override: 0.0%;
}

/* tokens.css */
/* css/tokens.css — the design system's single source of colour, type and space.
   DESIGN-SYSTEM.md §2-4. Nothing outside this file invents a value.

   The concept is "the counter board": a cool pale ground, plain text, small
   photographs, and one bold element — the cast-iron station board with its name
   in a Didone shaped for Indian signage. No black-and-gold, no gradients, no
   shadows, no icon set. */

:root {
  color-scheme: light;

  /* Colour. Contrast ratios against their intended grounds are in the comments;
     every pair used in the CSS below is AA or better (DESIGN-SYSTEM §2). */
  --ground: #EDEFEA;      /* page background: a cool pale stone, not cream */
  --paper: #FBFBF8;       /* cards, form surfaces, sticky bar */
  --ink: #2A1B18;         /* all body and heading text  (14.30 on ground) */
  --ink-soft: #5A4A45;    /* secondary text, captions   (7.25 on ground) */
  --kokum: #8A1C3F;       /* the action colour          (7.82 on ground) */
  --kokum-deep: #6E1432;  /* hover and pressed          (11.20 under paper) */
  --gulkand: #F5D5DB;     /* soft accent surface */
  --iron: #2F3539;        /* station boards, footer, dark bands */
  --pudina: #CFE8D8;      /* tags and markers on dark surfaces only */
  --line: #6B726D;        /* input borders and meaningful dividers (3:1) */
  --line-soft: #C9CEC8;   /* decorative hairlines only */
  --error: #A3261B;
  --success: #1F6B45;

  /* Space. Nothing between these steps. */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 72px; --s-9: 112px; --s-10: 160px;

  /* Layout */
  --measure: 64ch;
  --max: 1200px;
  --gutter: 24px;
  --section: var(--s-9);
  --header-h: 64px;
  --bar-h: 0px;           /* set to 64px by the mobile query below */
  --radius: 2px;

  /* Type */
  --display-face: 'Rozha One', 'Rozha One fallback', Georgia, 'Bodoni 72', Didot, serif;
  --text-face: 'Anek Latin', 'Anek Latin fallback', 'Segoe UI', system-ui, -apple-system, sans-serif;

  --t-display: 60px;   --lh-display: 1.05;
  --t-h1: 44px;        --lh-h1: 1.1;
  --t-h2: 34px;        --lh-h2: 1.15;
  --t-h3: 24px;        --lh-h3: 1.25;
  --t-board: 40px;     --lh-board: 1;
  --t-lead: 21px;      --lh-lead: 1.55;
  --t-body: 18px;      --lh-body: 1.65;
  --t-small: 15px;     --lh-small: 1.5;

  --ease: cubic-bezier(.2, .6, .2, 1);
}

@media (max-width: 900px) {
  :root {
    --gutter: 16px;
    --section: var(--s-8);
    --bar-h: 64px;
    --t-display: 36px;  --lh-display: 1.1;
    --t-h1: 32px;       --lh-h1: 1.15;
    --t-h2: 26px;       --lh-h2: 1.2;
    --t-h3: 21px;       --lh-h3: 1.3;
    --t-board: 30px;    --lh-board: 1.05;
    --t-lead: 19px;
    --t-body: 17px;
  }
}

/* base.css */
/* css/base.css — document, type scale, links, layout wrappers.
   DESIGN-SYSTEM.md §3-4. Sentence case everywhere; no all-caps labels, no
   tracked-out eyebrows, no monospace. Nothing is centred except the station
   boards' own names and the 404 page. */

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

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

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--text-face);
  font-size: var(--t-body);
  line-height: var(--lh-body);
  font-variant-numeric: lining-nums;
  overflow-x: hidden;
  /* The sticky mobile bar never sits on top of content or a focused field. */
  padding-bottom: var(--bar-h);
  scroll-padding-top: calc(var(--header-h) + var(--s-4));
  scroll-padding-bottom: calc(var(--bar-h) + var(--s-4));
}

img, picture, svg, video { max-width: 100%; }
img { height: auto; display: block; }

/* ---- headings ---------------------------------------------------------- */
h1, h2, h3, h4 { margin: 0 0 var(--s-4); font-weight: 400; text-wrap: balance; }
h1 { font-family: var(--display-face); font-size: var(--t-h1); line-height: var(--lh-h1); letter-spacing: -0.01em; }
h2 { font-family: var(--display-face); font-size: var(--t-h2); line-height: var(--lh-h2); }
h3 { font-family: var(--text-face); font-size: var(--t-h3); line-height: var(--lh-h3); font-weight: 600; }
h4 { font-family: var(--text-face); font-size: var(--t-body); line-height: 1.35; font-weight: 600; }
.display { font-family: var(--display-face); font-size: var(--t-display); line-height: var(--lh-display); letter-spacing: -0.015em; }

p, ul, ol, dl, table, figure { margin: 0 0 var(--s-4); }
p, li { max-width: var(--measure); }
.lead { font-size: var(--t-lead); line-height: var(--lh-lead); }
.small, figcaption, .credit { font-size: var(--t-small); line-height: var(--lh-small); color: var(--ink-soft); }
b, strong { font-weight: 600; }
.num { font-variant-numeric: lining-nums tabular-nums; }

/* ---- links ------------------------------------------------------------- */
a { color: var(--kokum); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--kokum-deep); }
a:focus-visible,
button:focus-visible,
summary:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--kokum);
  outline-offset: 2px;
  border-radius: 1px;
}
.on-iron a:focus-visible, .on-iron button:focus-visible, .on-iron summary:focus-visible { outline-color: var(--gulkand); }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

.skip {
  position: absolute; left: var(--s-4); top: calc(var(--s-4) * -6);
  z-index: 100; background: var(--paper); color: var(--kokum);
  padding: var(--s-3) var(--s-4); border: 1.5px solid var(--kokum); border-radius: var(--radius);
  transition: top 120ms var(--ease);
}
.skip:focus { top: var(--s-3); }

/* ---- layout ------------------------------------------------------------ */
.wrap {
  width: 100%;
  max-width: var(--max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section); }
.section-tight { padding-block: var(--s-8); }
.band-paper { background: var(--paper); }
.band-ground { background: var(--ground); }
.band-gulkand { background: var(--gulkand); }
.band-iron { background: var(--iron); color: var(--paper); }
.band-iron h1, .band-iron h2, .band-iron h3 { color: var(--paper); }
.band-iron a { color: var(--gulkand); }
.band-iron a:hover { color: var(--pudina); }
.band-iron .small, .band-iron figcaption, .band-iron .credit,
.on-iron .small, .on-iron figcaption, .on-iron .credit { color: var(--pudina); }

/* Asymmetric measure: text sits on seven of twelve columns, left-aligned.
   On a .wrap the measure limits the CHILDREN, not the wrapper, so the column
   stays left in the page grid instead of centring itself (nothing on this site
   is centred except the station board names and the 404). */
.col-7 { max-width: 62ch; }
.col-8 { max-width: 72ch; }
.wrap.col-7, .wrap.col-8 { max-width: var(--max); }
.wrap.col-7 > * { max-width: 62ch; }
.wrap.col-8 > * { max-width: 72ch; }

.split {
  display: grid;
  gap: var(--s-7);
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  align-items: start;
}
.split-even { display: grid; gap: var(--s-7); grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.grid-3 { display: grid; gap: var(--s-5); grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-2 { display: grid; gap: var(--s-5); grid-template-columns: repeat(2, minmax(0, 1fr)); }

@media (max-width: 900px) {
  .split, .split-even, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); gap: var(--s-5); }
}

/* ---- lists ------------------------------------------------------------- */
.plain { list-style: none; padding: 0; }
.rule-list { list-style: none; padding: 0; margin: 0; }
.rule-list > li {
  padding-block: var(--s-3);
  border-top: 1px solid var(--line-soft);
  max-width: var(--measure);
}
.rule-list > li:last-child { border-bottom: 1px solid var(--line-soft); }

.eyebrow {
  font-size: var(--t-small);
  font-weight: 600;
  font-stretch: 87.5%;
  color: var(--ink-soft);
  margin-bottom: var(--s-2);
}

.crumbs { font-size: var(--t-small); color: var(--ink-soft); margin-bottom: var(--s-5); }
.crumbs a { color: var(--ink-soft); }

/* Tables (the pricing arithmetic) scroll inside a focusable container. */
.scroller { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 420px; font-variant-numeric: lining-nums tabular-nums; }
th, td { text-align: left; padding: var(--s-3) var(--s-4); border-bottom: 1px solid var(--line-soft); }
th { font-weight: 600; font-size: var(--t-small); }
caption { text-align: left; padding-bottom: var(--s-2); }

hr { border: 0; border-top: 1px solid var(--line-soft); margin-block: var(--s-6); }

/* components.css */
/* css/components.css — header, buttons, form fields, station boards, cards,
   evidence block, accordion, sticky bar, footer. DESIGN-SYSTEM.md §6.
   No shadows anywhere: depth comes from ground changes and 1px hairlines. */

/* ---- header ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  background: var(--paper);
  border-bottom: 1px solid var(--line-soft);
}
.header-row {
  min-height: var(--header-h);
  display: flex; align-items: center; gap: var(--s-5);
}
.brand { display: flex; align-items: baseline; gap: var(--s-2); text-decoration: none; color: var(--ink); padding-block: var(--s-2); }
.brand-word { font-family: var(--display-face); font-size: 26px; line-height: 1; letter-spacing: .01em; }
.brand-tag { font-size: var(--t-small); font-weight: 600; font-stretch: 87.5%; color: var(--ink-soft); }
.nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.nav a { color: var(--ink); text-decoration: none; font-size: 16px; display: inline-flex; align-items: center; min-height: 44px; }
.nav a:hover { color: var(--kokum); text-decoration: underline; }
.nav a[aria-current="page"] { color: var(--kokum); box-shadow: inset 0 -2px 0 var(--kokum); }
.nav a.btn { color: var(--paper); padding: 10px 20px; }
.nav a.btn[aria-current="page"] { box-shadow: none; }
.nav-toggle { display: none; }

@media (max-width: 900px) {
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    margin-left: auto; min-width: 44px; min-height: 44px;
    background: transparent; border: 1.5px solid var(--line); border-radius: var(--radius);
    color: var(--ink); font: inherit; font-size: var(--t-small); font-weight: 600;
    padding-inline: var(--s-3); cursor: pointer;
  }
  .nav {
    position: fixed; inset: var(--header-h) 0 0; z-index: 39;
    margin: 0; padding: var(--s-5) var(--gutter) var(--s-8);
    background: var(--paper);
    flex-direction: column; align-items: stretch; gap: 0;
    overflow-y: auto;
  }
  .nav[data-open="false"] { display: none; }
  .nav a { min-height: 56px; border-bottom: 1px solid var(--line-soft); font-size: 19px; }
  .nav a.btn { margin-top: var(--s-5); border-bottom: 0; justify-content: center; }
}

/* ---- buttons ----------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 14px 24px;
  border: 1.5px solid transparent; border-radius: var(--radius);
  font: inherit; font-size: 17px; font-weight: 600; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background-color 120ms var(--ease), color 120ms var(--ease), transform 60ms var(--ease);
}
.btn-primary { background: var(--kokum); color: var(--paper); border-color: var(--kokum); }
.btn-primary:hover { background: var(--kokum-deep); border-color: var(--kokum-deep); color: var(--paper); }
.btn-secondary { background: transparent; color: var(--kokum); border-color: var(--kokum); }
.btn-secondary:hover { background: var(--gulkand); color: var(--kokum-deep); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn[aria-disabled="true"] { background: var(--line-soft); border-color: var(--line-soft); color: var(--ink-soft); cursor: not-allowed; transform: none; }
.on-iron .btn-secondary { color: var(--paper); border-color: var(--paper); }
.on-iron .btn-secondary:hover { background: var(--paper); color: var(--iron); }
.actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); }

/* ---- photographs ------------------------------------------------------- */
/* An 8px paper mount, like a photo pinned to a board. No filters, no wash. */
.shot { background: var(--paper); padding: 8px; }
.shot img { width: 100%; }
.shot-3x2 img { aspect-ratio: 3 / 2; object-fit: cover; }
.shot-4x5 img { aspect-ratio: 4 / 5; object-fit: cover; }
.shot-16x9 img { aspect-ratio: 16 / 9; object-fit: cover; }
figure { margin: 0; }
figcaption { margin-top: var(--s-2); }
.credit a { color: inherit; }

/* The drawn board, used where no photograph exists. It is never a grey box and
   never a stand-in photo: iron ground, a painted inset rule, the station name in
   the display face and an honest note. It has to read as a board in its own
   right, not as an image that failed to load. */
.is-photo-placeholder {
  background: var(--iron);
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  padding: var(--s-6) var(--s-5);
}
.is-photo-placeholder::after {
  content: ""; position: absolute; inset: 12px; border: 1px solid var(--pudina); pointer-events: none;
}
.is-photo-placeholder > * { position: relative; }
.shot-4x5 .is-photo-placeholder { aspect-ratio: 4 / 5; }
.shot-3x2 .is-photo-placeholder, .shot-16x9 .is-photo-placeholder { aspect-ratio: 3 / 2; }
.is-photo-placeholder > span { font-size: var(--t-small); font-weight: 600; color: var(--pudina); line-height: 1.5; }

.board-plate .board-name { margin: 0; }
.board-plate .board-rule { margin: var(--s-4) auto var(--s-4); }
.plate-short {
  color: var(--paper); font-size: 17px; line-height: 1.45;
  max-width: 24ch; margin: 0;
}
.plate-note {
  color: var(--pudina); font-size: var(--t-small); font-weight: 600;
  margin: var(--s-6) 0 0; padding-top: var(--s-4);
  border-top: 1px solid rgba(207, 232, 216, .5);
  min-width: 104px;
}

/* ---- the station board ------------------------------------------------- */
.board { display: flex; flex-direction: column; background: var(--paper); }
.board-photo img, .board-photo .is-photo-placeholder { width: 100%; }
.board-body { background: var(--iron); color: var(--paper); padding: var(--s-5); flex: 1; }
.board-name {
  font-family: var(--display-face);
  font-size: var(--t-board); line-height: var(--lh-board);
  color: var(--paper); margin: 0; text-align: center;
}
.board-rule { width: 24px; height: 2px; background: var(--pudina); margin: var(--s-4) auto; }
.board-body dl { margin: 0; font-size: 17px; line-height: 1.5; }
.board-body dt {
  font-size: var(--t-small); font-weight: 600; font-stretch: 87.5%;
  color: var(--pudina); float: left; margin-right: var(--s-2);
}
.board-body dd { margin: 0 0 var(--s-3); }
.board-body dd::after { content: ""; display: block; clear: both; }
.board-check { font-size: var(--t-small); color: var(--pudina); margin: 0; }
.board-pending { font-size: var(--t-small); color: var(--pudina); margin: var(--s-3) 0 0; }
.board-foot { padding: var(--s-4); background: var(--iron); }

/* "Add to my enquiry" — a toggle, not a cart. */
.add-station {
  width: 100%; min-height: 44px;
  background: transparent; color: var(--paper);
  border: 1.5px solid var(--paper); border-radius: var(--radius);
  font: inherit; font-size: var(--t-small); font-weight: 600; cursor: pointer;
  transition: background-color 60ms var(--ease), color 60ms var(--ease);
}
.add-station:hover { background: var(--paper); color: var(--iron); }
.add-station[aria-pressed="true"] { background: var(--pudina); border-color: var(--pudina); color: var(--iron); }
.add-station[aria-pressed="true"]::before { content: "\2713\00a0"; }

/* ---- inner-page hero aside ---------------------------------------------
   The five columns the intro does not use. A hairline and a list, never a card,
   so the page keeps its left-aligned, flat look while the first real section
   moves up the page. */
.hero-aside { border-top: 1px solid var(--line-soft); padding-top: var(--s-4); }
.hero-aside h2 {
  font-family: var(--text-face); font-size: var(--t-small);
  font-weight: 600; font-stretch: 87.5%; color: var(--ink-soft);
  margin-bottom: var(--s-3);
}
.hero-aside .rule-list > li { max-width: none; }
.hero-aside .price-figure { font-size: var(--t-h1); line-height: 1.1; margin-bottom: var(--s-2); }
.hero-aside .small { max-width: 40ch; }
.aside-group { margin: 0 0 var(--s-4); font-size: 16px; line-height: 1.6; max-width: none; }
.aside-group b {
  display: block; font-size: var(--t-small); font-stretch: 87.5%;
  color: var(--ink-soft); margin-bottom: 2px;
}
.aside-group a { margin-right: 2px; }

/* ---- cards and routes -------------------------------------------------- */
.card { background: var(--paper); border: 1px solid var(--line-soft); border-radius: var(--radius); padding: var(--s-5); }
.card h3 { margin-bottom: var(--s-2); }
.card p:last-child { margin-bottom: 0; }

.route { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5); align-items: start; padding-block: var(--s-6); border-top: 1px solid var(--line-soft); }
.route:last-of-type { border-bottom: 1px solid var(--line-soft); }
.route h3 { font-family: var(--display-face); font-weight: 400; font-size: var(--t-h2); line-height: var(--lh-h2); }
.route-links { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-size: 17px; }
@media (max-width: 900px) { .route { grid-template-columns: minmax(0, 1fr); } }

/* ---- collection block -------------------------------------------------- */
.collection { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-5) var(--s-7); padding-block: var(--s-6); border-top: 1px solid var(--line-soft); }
.collection:last-of-type { border-bottom: 1px solid var(--line-soft); }
.collection h3 { font-family: var(--display-face); font-weight: 400; font-size: var(--t-h2); line-height: var(--lh-h2); margin-bottom: var(--s-2); }
.collection-note { background: var(--gulkand); color: var(--ink); padding: var(--s-3) var(--s-4); font-size: var(--t-small); margin: var(--s-4) 0 0; max-width: none; }
@media (max-width: 900px) { .collection { grid-template-columns: minmax(0, 1fr); } }

/* ---- evidence block ---------------------------------------------------- */
.evidence h3 { font-size: var(--t-h3); }
.evidence ul { list-style: none; padding: 0; }
.evidence li { padding-block: var(--s-3); border-top: 1px solid rgba(42, 27, 24, .18); }

/* ---- FAQ accordion ----------------------------------------------------- */
.faq { border-top: 1px solid var(--line-soft); max-width: 72ch; }
.faq details { border-bottom: 1px solid var(--line-soft); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  min-height: 48px; padding-block: var(--s-3);
  font-size: var(--t-body); font-weight: 600; cursor: pointer; list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 12px; height: 12px; margin-right: var(--s-2);
  border-right: 2px solid var(--kokum); border-bottom: 2px solid var(--kokum);
  transform: rotate(45deg) translateY(-3px);
  transition: transform 160ms var(--ease);
}
.faq details[open] > summary::after { transform: rotate(225deg) translateY(-3px); }
.faq details[open] { border-left: 2px solid var(--kokum); padding-left: var(--s-4); }
.faq details > div { padding-bottom: var(--s-4); }
.faq details > div > p:last-child { margin-bottom: 0; }

/* ---- sticky mobile action bar ------------------------------------------ */
.actionbar { display: none; }
@media (max-width: 900px) {
  .actionbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 38;
    display: flex; gap: var(--s-2); align-items: center;
    min-height: var(--bar-h);
    padding: var(--s-2) var(--gutter);
    padding-bottom: calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
    background: var(--paper); border-top: 1px solid var(--line-soft);
  }
  .actionbar[hidden] { display: none; }
  .actionbar .btn { flex: 1; }
}

/* ---- footer ------------------------------------------------------------ */
.site-footer { background: var(--iron); color: var(--paper); padding-block: var(--s-8); }
.site-footer a { color: var(--gulkand); }
.site-footer a:hover { color: var(--pudina); }
.footer-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 3fr) minmax(0, 4fr); gap: var(--s-7); }
.site-footer h2 { font-family: var(--text-face); font-size: var(--t-small); font-weight: 600; font-stretch: 87.5%; color: var(--pudina); margin-bottom: var(--s-3); }
.site-footer ul { list-style: none; padding: 0; }
.site-footer li { padding-block: var(--s-1); }
.site-footer address { font-style: normal; line-height: 1.6; }
.footer-base { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid rgba(251, 251, 248, .2); font-size: var(--t-small); color: var(--pudina); }
.footer-base p { max-width: 72ch; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* ---- credits ----------------------------------------------------------- */
.credits { border-top: 1px solid var(--line-soft); padding-block: var(--s-6); font-size: var(--t-small); color: var(--ink-soft); }
.credits h2 { font-family: var(--text-face); font-size: var(--t-small); font-weight: 600; margin-bottom: var(--s-2); }
.credits li { padding-block: 2px; max-width: none; }

/* templates.css */
/* css/templates.css — page-level arrangements: hero, station reel, price band,
   the enquiry form and its states, 404. DESIGN-SYSTEM.md §5, §6, §8, §11. */

/* ---- hero -------------------------------------------------------------- */
.hero { padding-block: var(--s-8) var(--s-7); }
.hero h1 { margin-bottom: var(--s-4); }
.hero .lead { margin-bottom: var(--s-5); max-width: 54ch; }
.hero-figure { margin-top: var(--s-7); }
.page-hero { padding-block: var(--s-7); }
.page-hero .lead { max-width: 60ch; }
/* An inner page should not open with a tall empty band: the first section after
   a hero sits closer than the standard section rhythm. */
.page-hero + .section, .page-hero + .section-tight { padding-top: var(--s-8); }
@media (max-width: 900px) {
  .page-hero + .section, .page-hero + .section-tight { padding-top: var(--s-7); }
}

/* ---- station reel ------------------------------------------------------ */
.reel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
.station-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-5); }
/* Between 620 and 900 the boards stay two-up: one board across a 768px screen
   makes the photo, and the drawn board, absurdly tall. */
@media (max-width: 900px) {
  .station-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-4); }
  /* The reel becomes a snapping scroller with the next card showing. */
  .reel {
    display: flex; gap: var(--s-4);
    overflow-x: auto; scroll-snap-type: x mandatory;
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    padding-bottom: var(--s-3);
  }
  .reel > * { flex: 0 0 78%; scroll-snap-align: start; }
}

/* ---- price band -------------------------------------------------------- */
.price-figure {
  font-family: var(--display-face);
  font-size: var(--t-display); line-height: 1.1;
  font-variant-numeric: lining-nums tabular-nums;
  margin: 0 0 var(--s-3);
}
.price-note { font-size: var(--t-body); max-width: 56ch; }

/* ---- steps ------------------------------------------------------------- */
.steps { list-style: none; padding: 0; counter-reset: step; }
.steps > li {
  counter-increment: step;
  position: relative;
  padding: var(--s-4) 0 var(--s-4) var(--s-8);
  border-top: 1px solid var(--line-soft);
  max-width: 72ch;
}
.steps > li:last-child { border-bottom: 1px solid var(--line-soft); }
.steps > li::before {
  content: counter(step);
  position: absolute; left: 0; top: var(--s-4);
  font-family: var(--display-face); font-size: 28px; line-height: 1;
  color: var(--kokum);
}

/* ---- the enquiry form -------------------------------------------------- */
/* The form sits on a readable measure, so a row of chips never runs the full
   width of the page. */
.enquiry-form { max-width: 760px; }
.form-grid { display: grid; gap: var(--s-5); max-width: 560px; }
.field { display: grid; gap: var(--s-2); }
.field label, .group-legend { font-size: var(--t-small); font-weight: 600; font-stretch: 87.5%; }
/* "(optional)" and the inline hints inside a label stay quiet. */
.field label .small, .group-legend .small { font-weight: 400; font-stretch: 100%; color: var(--ink-soft); }
.field .hint { font-size: var(--t-small); color: var(--ink-soft); margin: 0; }
.field input, .field select, .field textarea {
  width: 100%; min-height: 48px; padding: var(--s-3) var(--s-4);
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  font: inherit; font-size: 17px;
}
.field textarea { min-height: 88px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--kokum); }
.field [aria-invalid="true"] { border-width: 2px; border-color: var(--error); }
.field-error { font-size: var(--t-small); color: var(--error); margin: 0; }
.field-error:empty { display: none; }

fieldset { border: 0; padding: 0; margin: var(--s-6) 0 var(--s-5); }
fieldset:first-of-type { margin-top: 0; }
legend { padding: 0; margin-bottom: var(--s-3); }
.form-group { padding-block: var(--s-6); border-top: 1px solid var(--line-soft); }
.form-group:first-of-type { border-top: 0; padding-top: 0; }
.form-group > h2 { font-size: var(--t-h3); font-family: var(--text-face); font-weight: 600; }

/* Chips: a real radio or checkbox, visually hidden, with a styled label. */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); list-style: none; padding: 0; margin: 0; }
.chips li { max-width: none; }
.chip input {
  position: absolute; width: 1px; height: 1px; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.chip span {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--s-2) var(--s-4);
  background: var(--paper); color: var(--ink);
  border: 1.5px solid var(--line); border-radius: var(--radius);
  font-size: 16px; cursor: pointer;
  transition: background-color 60ms var(--ease);
}
.chip span:hover { background: var(--gulkand); }
.chip input:checked + span { background: var(--gulkand); border-color: var(--kokum); border-width: 1.5px; font-weight: 600; }
.chip input:checked + span::before { content: "\2713\00a0"; color: var(--kokum); }
.chip input:focus-visible + span { outline: 3px solid var(--kokum); outline-offset: 2px; }

.interest-group { margin-bottom: var(--s-5); }
.interest-group h3 { font-size: var(--t-small); font-weight: 600; font-stretch: 87.5%; color: var(--ink-soft); margin-bottom: var(--s-2); }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-status { margin: var(--s-4) 0 0; font-weight: 600; }
.form-status:empty { display: none; }
.form-status[data-state="error"] { color: var(--error); }
.form-status[data-state="success"] { color: var(--success); }

.form-success { background: var(--gulkand); padding: var(--s-6); max-width: 640px; }
.form-success h2 { font-size: var(--t-h2); }
.form-success p:last-child { margin-bottom: 0; }
.form-success[hidden] { display: none; }

/* The compact home-page form sits on paper inside a ground band. */
.enquiry-compact { background: var(--paper); padding: var(--s-6); }

/* ---- 404 --------------------------------------------------------------- */
.page-404 { text-align: center; padding-block: var(--s-9); }
.page-404 p, .page-404 ul { margin-inline: auto; }
.page-404 .chips { justify-content: center; }

@media (max-width: 620px) {
  .station-grid { grid-template-columns: minmax(0, 1fr); }
}

/* The month select appears only when the date isn't fixed. Pure CSS, so it
   still works with JS off and costs no layout shift on load. */
.date-unsure { margin: var(--s-2) 0 0; }
.date-unsure .chip { display: inline-block; }
.field:has(.date-toggle:not(:checked)) .date-month { display: none; }

/* motion.css */
/* css/motion.css — DESIGN-SYSTEM.md §7.

   One orchestrated moment, home page only: the three boards in the hero reel
   raise their names from 92% to 100% opacity in sequence, 120ms apart, once.
   Nothing animates on scroll. No parallax, no carousel, no counters ticking up.
   Everything else in the system is a 60–200ms response to an action, declared
   beside its component. */

.page-home .reel .board-name {
  opacity: .92;
  animation: board-lift 220ms var(--ease) forwards;
}
.page-home .reel > *:nth-child(1) .board-name { animation-delay: 0ms; }
.page-home .reel > *:nth-child(2) .board-name { animation-delay: 120ms; }
.page-home .reel > *:nth-child(3) .board-name { animation-delay: 240ms; }

@keyframes board-lift { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .page-home .reel .board-name { opacity: 1; }
}