/* confirmation-card: the family stylesheet, one file for every page type.
   Ported from the Waterloo Roadside design, "The Confirmation Card" (a two-colour QSL card;
   ic-roadside-key/corridor-sites/waterloo-roadside, steps 05-design and 06-build, 2026-11-01).
   Every page is a stack of cards lying on a cool desk: card stock ruled in ink, turquoise printed
   in whole fields and in display type of 30px or more at weight 900 (smaller teal text always uses
   --teal-ink), the black call box as the heaviest mass in view, and one rose box per page (the
   Price row of the call card). Light only. Brands re-skin it through design.vars on :root. */

/* == faces: Big Shoulders Display 800/900, Hanken Grotesk 400/600/700 (SIL OFL 1.1, latin, self-hosted) == */
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Big Shoulders Display"; src: url("/assets/fonts/big-shoulders-display-900.woff2") format("woff2"); font-weight: 900; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-400.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-600.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("/assets/fonts/hanken-grotesk-700.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

/* == tokens (a brand overrides any of these with brands/<id>.json design.vars) == */
:root {
  --stock: #f7f5ee;          /* card stock: the ground of every card, plate and tick box */
  --desk: #d6dedb;           /* the cool desk under the cards; a card never shares its colour */
  --teal: #0a9396;           /* the second colour: whole fields, route lines, display type >= 30px / 900 */
  --teal-ink: #05605f;       /* turquoise for any smaller text: labels, keys, hovers (6.8:1 on stock) */
  --teal-tint: #cfe8e5;      /* a 20% screen: hover wash on ruled lines, step boxes */
  --teal-light: #6fd6d2;     /* turquoise reversed out of ink: the call box and dock icon and underline */
  --rose: #e85d75;           /* the one confirmed Price box per page; ink tick on it 5.6:1 */
  --ink: #121212;            /* text, 2px rules, the call box, masthead call and dock */
  --ink-2: #33332f;          /* secondary text on stock */
  --ink-deep: #000;          /* the hover of ink buttons only */
  --rule: rgba(18, 18, 18, .22);
  --err: #9b1c2c;           /* an invalid form field only */

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --text: "Hanken Grotesk", "Segoe UI", sans-serif;
  --fs-body: 1.0625rem;
  --fs-small: .9rem;
  --fs-label: .8125rem;      /* field keys: 13px is the floor */

  --max: 1440px;
  --gutter: clamp(16px, 2.2vw, 32px);
  --pad: clamp(18px, 2.4vw, 34px);
  --band-gap: clamp(18px, 2.4vw, 32px);
  --radius-card: 7px;
  --radius-call: 4px;
  --radius-part: 3px;
  --line: 2px;
  --tap: 44px;
  --header-h: 64px;
  --dock-h: min(4.5rem, 72px + 4vw);
  --half: clamp(24px, 2.4vw, 36px);  /* the gap on each side of a card's 2px half rule */

  --ease: cubic-bezier(.16, 1, .3, 1);
  --screen-ink: radial-gradient(circle at 50% 50%, var(--ink) 0 1.2px, transparent 1.5px) 0 0 / 6px 6px;
  --screen-teal: radial-gradient(circle at 50% 50%, var(--teal) 0 1.5px, transparent 1.8px) 0 0 / 7px 7px;
  --shadow-card: 0 1px 0 rgba(18, 18, 18, .06), 0 18px 40px -26px rgba(18, 18, 18, .45);
  --tick-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7' fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='square'/%3E%3C/svg%3E");
  color-scheme: light;
}

/* == base == */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scrollbar-color: var(--teal-ink) var(--desk); scroll-padding-bottom: calc(var(--dock-h) + 16px); }
body {
  margin: 0; background: var(--desk); color: var(--ink);
  font: 400 var(--fs-body)/1.55 var(--text);
  overflow-x: clip; caret-color: var(--teal-ink);
  font-variant-numeric: tabular-nums;
}
::selection { background: var(--teal); color: var(--ink); }
img { display: block; max-width: 100%; height: auto; }
svg { display: block; }
a { color: inherit; text-underline-offset: .2em; text-decoration-thickness: 1.5px; }
:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; border-radius: 2px; }
h1, h2, h3, h4, p, ul, ol, figure, figcaption { margin: 0; }
h1, h2, h3, h4 { text-wrap: balance; }
h2, h3, h4 { overflow-wrap: break-word; }
p { text-wrap: pretty; }
ul, ol { padding: 0; list-style: none; }
strong, b { font-weight: 700; }
[hidden] { display: none !important; }
.vh { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25rem; height: 1.25rem; flex: none; }
main [id] { scroll-margin-top: 16px; }
/* the {{phone}} token in copy: a plain number, set in the text face, never the display face */
a.tel { font-weight: 700; white-space: nowrap; text-decoration: underline; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
a.tel:hover { color: var(--teal-ink); text-decoration-color: var(--teal-ink); }

/* == skip link == */
.skip {
  position: absolute; left: 12px; top: -80px; z-index: 60; max-width: calc(100vw - 24px);
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 16px;
  background: var(--ink); color: var(--stock); font-weight: 700; text-decoration: none; border-radius: var(--radius-call);
}
.skip:focus { top: 12px; }
.skip:focus-visible { outline-color: var(--teal-ink); }

/* == masthead: the name with its ringed dot, the nav, and (900px and up) the call == */
.masthead__in {
  max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter);
  display: flex; align-items: center; gap: 4px 28px; flex-wrap: wrap; min-height: var(--header-h);
}
.masthead__name {
  display: inline-flex; align-items: center; min-height: var(--tap);
  font: 900 1.65rem/1 var(--display); text-transform: uppercase; letter-spacing: .02em; text-decoration: none; color: var(--ink);
}
.masthead__name::before {
  content: ""; flex: none; width: 14px; height: 14px; margin-right: 10px; background: var(--teal); border-radius: 50%;
  box-shadow: 0 0 0 3px var(--desk), 0 0 0 5px var(--teal);
}
.masthead__nav { margin-left: auto; }
.masthead__nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
.masthead__nav a {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 12px; position: relative;
  font-weight: 600; font-size: .98rem; text-decoration: none;
}
.masthead__nav a::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: 7px; height: 3px;
  background: var(--teal-ink); transform: scaleX(0); transform-origin: left;
}
.masthead__nav a:hover::after, .masthead__nav a[aria-current]::after { transform: scaleX(1); }
.masthead__nav a[aria-current] { font-weight: 700; }
@media (prefers-reduced-motion: no-preference) { .masthead__nav a::after { transition: transform .35s var(--ease); } }
.masthead__call {
  display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px;
  background: var(--ink); color: var(--stock); text-decoration: none; border-radius: var(--radius-call);
  font: 900 1.35rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em;
  transition: background-color .2s var(--ease), opacity .2s var(--ease), visibility 0s;
}
.masthead__call .icon { color: var(--teal-light); }
.masthead__call:hover { background: var(--ink-deep); }
.masthead__call:active { transform: translateY(1px); }
.masthead__call:focus-visible { outline-color: var(--teal-ink); }
/* one black call per screen (the inline script): while an in-page call box is the call the masthead
   call fades in its place, and its slot collapses only on first paint or while the masthead is off screen */
.callbox-in-view .masthead__call,
.dock-js:not(.masthead-call-in-view) .masthead__call { opacity: 0; visibility: hidden; transition: opacity .2s var(--ease), visibility 0s linear .2s; }
@media (prefers-reduced-motion: reduce) { .masthead__call, .callbox-in-view .masthead__call, .dock-js:not(.masthead-call-in-view) .masthead__call { transition: none; } }
@media (min-width: 900px) and (max-width: 979px) {
  .masthead__in { column-gap: 18px; }
  .masthead__nav a { padding: 0 10px; }
  .masthead__nav a::after { left: 10px; right: 10px; }
  .masthead__call { padding: 0 14px; }
}

/* == card: each part of a page is one face of the card, lying on the desk == */
.card {
  width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter));
  margin: 0 auto var(--band-gap); padding: var(--pad); position: relative;
  background: var(--stock); border: var(--line) solid var(--ink); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
/* clip, not hidden: a hidden overflow would make the card a scroll container */
.card--teal { background: var(--teal); overflow: clip; }
.card--headed { padding-top: 0; overflow: clip; }
/* a solid turquoise field bleeding to the card's edges, its foot screened with a fading ink halftone */
.band-head {
  margin: 0 calc(-1 * var(--pad)); padding: clamp(22px, 3vw, 40px) var(--pad) clamp(30px, 3.6vw, 52px);
  background: var(--teal); border-bottom: var(--line) solid var(--ink); position: relative;
}
.band-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; pointer-events: none;
  background: var(--screen-ink); opacity: .5;
  -webkit-mask: linear-gradient(transparent, #000); mask: linear-gradient(transparent, #000);
}
.band-head > * { position: relative; z-index: 1; }
.h2 { font: 900 clamp(2.2rem, 1.6rem + 2vw, 3.2rem)/.92 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
/* a picture in an ink frame with stock around the print; the desk shows until it loads */
.plate { border: var(--line) solid var(--ink); padding: 8px; background: var(--stock); border-radius: var(--radius-part); }
.plate img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: var(--desk); filter: saturate(.9) contrast(1.02); }
.plate figcaption { margin-top: 8px; font-size: var(--fs-label); line-height: 1.4; color: var(--ink-2); }

/* == call box: the one dominant action. The label is display type; the number stays in the
   text face (the Plain Number Rule), whole on one line, sized against the box (container units). == */
.callbox {
  display: grid; gap: 10px; align-content: center; min-height: 120px; padding: 20px 24px 22px;
  position: relative; overflow: hidden; container-type: inline-size;
  background: var(--ink); color: var(--stock); text-decoration: none; border-radius: var(--radius-call);
  transition: background-color .25s var(--ease);
}
.callbox::after {
  content: ""; position: absolute; right: -10px; top: -10px; bottom: -10px; width: 42%; pointer-events: none;
  background: var(--screen-teal); opacity: .7; transition: opacity .3s var(--ease);
  -webkit-mask: linear-gradient(90deg, transparent, #000 85%); mask: linear-gradient(90deg, transparent, #000 85%);
}
.callbox:hover { background: var(--ink-deep); }
.callbox:hover::after { opacity: 1; }
.callbox:active { transform: translateY(1px); }
.callbox:focus-visible { outline-color: var(--ink); }
.callbox__label { position: relative; z-index: 1; font: 900 min(clamp(3rem, 2.4rem + 2.2vw, 4.4rem), 25cqi)/.85 var(--display); text-transform: uppercase; letter-spacing: .01em; }
.callbox__num {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: .48em; white-space: nowrap;
  font: 600 min(1.3rem, 10.6cqi)/1.2 var(--text); letter-spacing: .01em; color: var(--stock);
  text-decoration: underline; text-decoration-color: var(--teal-light); text-decoration-thickness: 2px; text-underline-offset: .22em;
}
.callbox__num .icon { width: 1.06em; height: 1.06em; color: var(--teal-light); }
@container (max-width: 13rem) {
  .callbox__num { font-size: min(1.3rem, 13.4cqi); }
  .callbox__num .icon { display: none; }
}

/* == address lines: a ruled list of display-face links, each row at least 56px, an arrow at its end */
.addr-lines { border-top: var(--line) solid var(--ink); }
.addr-lines li { border-bottom: 1px solid var(--rule); }
.addr-lines a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 3.5rem; padding-block: 8px;
  font: 800 clamp(1.4rem, 1.2rem + .8vw, 1.9rem)/1.02 var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
}
.addr-lines a:hover { color: var(--teal-ink); background: var(--teal-tint); }
.addr-lines .icon { width: 1.375rem; height: 1.375rem; }
@media (prefers-reduced-motion: no-preference) {
  .addr-lines a { transition: background-color .25s var(--ease); }
  .addr-lines .icon { transition: transform .3s var(--ease); }
  .addr-lines a:hover .icon { transform: translateX(4px); }
}

/* == the confirmation grid (signature): a ruled form already filled in. A turquoise head, then
   rows with a key column (label style, --teal-ink), a value and a tick box. The Price row is the
   page's one rose box. Pointing at or focusing the call box beside it fills every box. == */
.grid { border: var(--line) solid var(--ink); border-radius: var(--radius-part); background: var(--stock); }
.grid__h {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px 12px;
  font: 900 min(1.65rem, 9.5vw)/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
  background: var(--teal); color: var(--ink); border-bottom: var(--line) solid var(--ink);
}
/* the halftone tail runs out the head's free room, and steps out whole under 48px of room */
.grid__h::after {
  content: ""; flex: 1; height: 22px; align-self: center; min-width: 0;
  background: var(--screen-ink); opacity: .55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 70%), linear-gradient(90deg, transparent calc((48px - 100%) * 9999), #000 0);
  -webkit-mask-composite: source-in;
  mask: linear-gradient(90deg, transparent, #000 70%) intersect, linear-gradient(90deg, transparent calc((48px - 100%) * 9999), #000 0);
}
.grid__rows { container-type: inline-size; }
.row { display: grid; grid-template-columns: 6em minmax(0, 1fr) 2.25rem; gap: 0 14px; align-items: start; padding: 0 14px 0 0; }
.row + .row { border-top: 1px solid var(--rule); }
.row__k {
  align-self: stretch; padding: calc(12px + .2em) 8px 12px 14px; border-right: 1px solid var(--rule);
  font: 700 var(--fs-label)/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink);
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
}
.row__v, .row .tickbox { margin-block: 12px; }
.row__v { min-width: 0; font-size: var(--fs-small); line-height: 1.45; color: var(--ink-2); overflow-wrap: break-word; }
.row__v > strong { display: block; margin-bottom: 1px; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.tickbox {
  display: grid; place-items: center; width: 2.125rem; height: 2.125rem;
  border: var(--line) solid var(--ink); border-radius: var(--radius-part); background: var(--stock);
  transition: background-color .3s var(--ease);
}
.tickbox svg { width: 1.625rem; height: 1.625rem; }
.tick { fill: none; stroke: var(--teal-ink); stroke-width: 3.2; stroke-linecap: square; stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke .3s var(--ease); }
.row--confirmed .tickbox { background: var(--rose); }
.row--confirmed .tick { stroke: var(--ink); stroke-width: 3.6; }
.confirm:has(.callbox:hover, .callbox:focus-visible) .grid .tickbox { background: var(--teal); }
.confirm:has(.callbox:hover, .callbox:focus-visible) .grid .row--confirmed .tickbox { background: var(--rose); }
.confirm:has(.callbox:hover, .callbox:focus-visible) .grid .tick { stroke: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .grid .row:nth-child(2) .tickbox { transition-delay: .06s; }
  .grid .row:nth-child(3) .tickbox { transition-delay: .12s; }
  .grid .row:nth-child(4) .tickbox { transition-delay: .18s; }
  .grid .row .tick { animation: tick .7s var(--ease) both; }
  .grid .row:nth-child(1) .tick { animation-delay: .35s; }
  .grid .row:nth-child(2) .tick { animation-delay: .5s; }
  .grid .row:nth-child(3) .tick { animation-delay: .65s; }
  .grid .row:nth-child(4) .tick { animation-delay: .8s; }
}
@media (prefers-reduced-motion: reduce) { .tickbox, .tick { transition: none; } }
@keyframes tick { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }

/* the Price row: the from-price set large, the other from-prices ruled under it */
.row--price .row__k { padding-top: calc(16px + .35em); }
.row--price .row__v, .row--price .tickbox { margin-block: 14px 12px; }
.pname { display: block; font-weight: 700; font-size: 1rem; line-height: 1.3; color: var(--ink); }
.pbig { display: block; font: 900 min(2.3rem, 10vw)/.95 var(--display); text-transform: uppercase; letter-spacing: .02em; color: var(--ink); overflow-wrap: normal; }
.pmore { margin-top: 10px; border-top: 1px solid var(--rule); }
.pmore li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0 12px; padding: 6px 0; border-bottom: 1px solid var(--rule); }
.pmore li:last-child { border-bottom: 0; padding-bottom: 0; }
.pmore li > span:last-child { font-weight: 700; color: var(--ink); white-space: nowrap; }
/* the price note under every price, as the call card's foot */
.slip__note { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); max-width: 60ch; }

/* phones: the tick box moves under its key, so the value keeps its width */
@media (max-width: 479px) {
  .row { grid-template-columns: min(5.8em, 42%) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 0 12px; padding-right: 12px; }
  .row__k { grid-column: 1; grid-row: 1; padding-bottom: 6px; border-right: 0; }
  .row .tickbox { grid-column: 1; grid-row: 2; margin: 0 0 12px 14px; width: 2rem; height: 2rem; }
  .row__v { grid-column: 2; grid-row: 1 / span 2; }
  .row::before { content: ""; grid-column: 1; grid-row: 1 / span 2; border-right: 1px solid var(--rule); pointer-events: none; }
}
/* a large text setting on a narrow screen: the key and its box head the entry, the value runs full width */
@container (max-width: 12rem) {
  .row { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; gap: 0 12px; padding: 0 12px 0 0; }
  .row::before { content: none; }
  .row__k { grid-column: 1; grid-row: 1; border-right: 0; padding-right: 0; padding-bottom: 4px; white-space: normal; letter-spacing: .06em; }
  .row .tickbox { grid-column: 2; grid-row: 1; margin: 10px 0 0; }
  .row__v { grid-column: 1 / -1; grid-row: 2; margin: 0 0 12px 14px; }
}

/* == the closing call card: solid turquoise, the message and the black call box, no halftone == */
.cta-card { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
/* the message is the brand's ask, which can run to 15 words: a wider measure keeps it to about four lines */
.cta__h { font: 900 clamp(1.8rem, 1.2rem + 1.8vw, 3rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .005em; max-width: 22ch; text-wrap: balance; color: var(--ink); }
.cta__line { margin-top: 16px; max-width: 52ch; font-size: 1.15rem; font-weight: 600; color: var(--ink); }
.cta-card .callbox { min-height: 150px; }
.cta-card .callbox::after { display: none; }
.cta-card .callbox__label { font-size: min(clamp(3.4rem, 2.4rem + 3.2vw, 6.4rem), 22cqi); }
@media (min-width: 820px) {
  .cta-card { grid-template-columns: minmax(0, 1fr) minmax(320px, .9fr); align-items: center; gap: 0 clamp(28px, 3.4vw, 56px); }
  .cta-card .callbox { min-height: 220px; padding: 26px 30px 30px; }
}
@media (min-width: 820px) and (max-height: 820px) { .cta__h { font-size: clamp(1.8rem, 1.1rem + 1.2vw, 2.3rem); } }

/* == breadcrumb, on the desk above the first card == */
.crumbs { width: calc(100% - 2 * var(--gutter)); max-width: calc(var(--max) - 2 * var(--gutter)); margin: 0 auto 6px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; }
.crumbs li { display: inline-flex; align-items: center; font-size: .92rem; color: var(--ink-2); }
.crumbs li + li::before { content: "/"; padding: 0 2px; }
.crumbs a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; font-weight: 600; text-decoration-color: var(--teal-ink); text-decoration-thickness: 2px; }
.crumbs li:first-child a { margin-left: -8px; }
.crumbs a:hover { color: var(--teal-ink); }
.crumbs [aria-current="page"] { padding: 0 8px; font-weight: 700; color: var(--ink); }

/* == footer (slug), on the desk == */
.slug__in {
  max-width: var(--max); margin: 0 auto; padding: 8px var(--gutter) 40px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; font-size: .92rem;
}
.slug__name { font: 900 1.3rem/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.slug__area { color: var(--ink-2); max-width: 60ch; }
.slug__links { display: flex; flex-wrap: wrap; gap: 0 4px; }
.slug__links a { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 8px; font-weight: 600; text-decoration: underline; }
.slug__links a:hover { color: var(--teal-ink); }
.slug__links a[aria-current] { font-weight: 700; text-decoration-color: var(--teal-ink); text-decoration-thickness: 3px; text-underline-offset: .3em; }
.slug__copy { flex-basis: 100%; color: var(--ink-2); }
/* the slug's service lines: a ruled list of display-face links, as the address lines but compact */
.slug__svc { flex-basis: 100%; min-width: 0; margin-block: 10px 6px; }
.slug__h { margin-bottom: 6px; font: 700 var(--fs-label)/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); }
.slug__svc-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); column-gap: 28px; border-top: var(--line) solid var(--ink); }
.slug__svc-list li { border-bottom: 1px solid var(--rule); }
.slug__svc-list a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: var(--tap); padding-block: 6px;
  font: 800 1.2rem/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none;
}
.slug__svc-list a:hover { color: var(--teal-ink); background: var(--teal-tint); }
.slug__svc-list a[aria-current] { text-decoration: underline; text-decoration-color: var(--teal-ink); text-decoration-thickness: 3px; text-underline-offset: .2em; }
.slug__svc-list .icon { width: 1.125rem; height: 1.125rem; }
@media (max-width: 899px) { .slug__svc { align-self: stretch; } }

/* == key takeaways: a small card of ticked lines under a turquoise head, between the call card and the sheet == */
.card.sum { padding: 0; overflow: clip; }
.sum__h {
  padding: 12px var(--pad) 10px; background: var(--teal); border-bottom: var(--line) solid var(--ink);
  font: 900 clamp(1.5rem, 1.25rem + .9vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink);
}
.sum .takeaways { padding: 2px var(--pad) 6px; }
.sum .takeaways li { position: relative; max-width: 72ch; padding: 12px 0 12px 2.75rem; line-height: 1.45; overflow-wrap: break-word; }
.sum .takeaways li + li { border-top: 1px solid var(--rule); }
.sum .takeaways li::before {
  content: ""; position: absolute; left: 0; top: 9px; width: 1.875rem; height: 1.875rem;
  border: var(--line) solid var(--ink); border-radius: var(--radius-part); background: var(--stock);
}
.sum .takeaways li::after {
  content: ""; position: absolute; left: .375rem; top: calc(9px + .375rem); width: 1.125rem; height: 1.125rem; background: var(--teal-ink);
  -webkit-mask: var(--tick-mask) center / contain no-repeat; mask: var(--tick-mask) center / contain no-repeat;
}
.sum .takeaways a { font-weight: 700; }
@media (forced-colors: active) { .sum .takeaways li::after { forced-color-adjust: none; background: CanvasText; } }
@media (max-width: 899px) {
  .slug__in { flex-direction: column; align-items: flex-start; gap: 2px; }
  .slug__name { margin-bottom: 6px; }
  .slug__links { margin-left: -8px; }
  .slug__copy { margin-top: 8px; }
}

/* == the dock: the fixed bottom call bar. On phones it always stays; from 900px it is a slimmer bar
   that shows (with the inline script) only while no call box and no masthead call is the call. == */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: stretch; justify-content: center; max-height: 45svh; overflow: hidden;
  min-height: var(--dock-h); padding: 0 0 env(safe-area-inset-bottom);
  background: var(--ink); color: var(--stock); border-top: 4px solid var(--teal);
}
.dock__call {
  flex: 1 1 auto; min-width: 0; padding: 6px 16px;
  display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; gap: 2px min(14px, 3vw);
  color: var(--stock); text-decoration: none;
}
.dock__label { display: inline-flex; align-items: center; gap: .32em; white-space: nowrap; font: 900 min(1.9rem, 9.5vw)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.dock__label .icon { width: .72em; height: .72em; color: var(--teal-light); }
.dock__num { white-space: nowrap; font: 600 min(1.1rem, 5.2vw)/1.2 var(--text); letter-spacing: .01em; text-decoration: underline; text-decoration-color: var(--teal-light); text-decoration-thickness: 2px; text-underline-offset: .22em; }
.dock__call:active { background: var(--ink-deep); }
.dock__call:focus-visible { outline-offset: -5px; outline-color: var(--teal-light); }
@media (max-width: 899px) {
  body { padding-bottom: calc(var(--dock-h) + 12px + env(safe-area-inset-bottom)); }
  .masthead__call { display: none; }
  .masthead__in { row-gap: 0; padding-block: 6px 4px; }
  .masthead__nav { margin-left: 0; flex-basis: 100%; }
  .masthead__nav ul { margin-left: -10px; }
  .masthead__nav a { padding: 0 10px; }
  .masthead__nav a::after { left: 10px; right: 10px; }
}
@media (max-width: 420px) {
  .masthead__in { column-gap: 12px; }
  .masthead__name { font-size: 1.3rem; }
  .masthead__name::before { width: 10px; height: 10px; margin-right: 8px; }
  .masthead__nav ul { margin-left: -8px; }
  .masthead__nav a { padding: 0 min(8px, 1.6vw); font-size: .95rem; }
  .masthead__nav a::after { left: min(8px, 1.6vw); right: min(8px, 1.6vw); }
}
@media (min-width: 900px) {
  :root { --dock-h: min(3.75rem, 60px + 1.5vw); }
  .dock { display: none; }
  .dock-js .dock { display: flex; padding: 0 var(--gutter); }
  .dock__call { flex: 0 1 auto; padding: 6px 18px 8px; gap: 2px 18px; }
  .dock__label { font-size: 1.6rem; }
  .dock-js .dock__call:hover { background: var(--ink-deep); }
  html.dock-js body { padding-bottom: calc(var(--dock-h) + 12px); }
  .mcall-off .masthead__call { display: none; }
  .callbox-in-view .dock, .masthead-call-in-view .dock { transform: translateY(100%); visibility: hidden; }
  .dock-ready .dock { transition: transform .32s var(--ease), visibility 0s linear .32s; }
  .dock-ready:not(.callbox-in-view):not(.masthead-call-in-view) .dock { transition: transform .32s var(--ease), visibility 0s; }
}
@media (prefers-reduced-motion: reduce) { .dock-ready .dock, .dock-ready:not(.callbox-in-view):not(.masthead-call-in-view) .dock { transition: none; } }

/* == hub: the front of the card. Call sign, 24/7 stamp, h1 and lead with the picture on one side;
   the confirmation grid and the call box on the other, divided by a 2px ink rule (1100px and up).
   Under 1100px the call box leads the confirm column. == */
.hf__in { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "sign" "confirm" "pic"; gap: 28px; }
.hf__sign { grid-area: sign; position: relative; }
.hf__pic { grid-area: pic; }
.hf__confirm { grid-area: confirm; display: flex; flex-direction: column; gap: 18px; }
/* the call sign: the brand name in turquoise display; --cs-k (set per brand) keeps its longest word whole */
.callsign { font: 900 min(calc(21.5vw * var(--cs-k, 1)), 6rem)/.8 var(--display); text-transform: uppercase; letter-spacing: -.005em; color: var(--teal); margin-left: -.03em; text-wrap: balance; }
.callsign span { display: inline-block; }
.stamp247 { display: inline-block; margin: 16px 0 2px; transform: rotate(-4deg); }
.stamp247 span {
  display: block; padding: 6px 16px 4px; font: 900 2.4rem/1 var(--display); letter-spacing: .01em; color: var(--ink);
  background: var(--stock); border: 3px solid var(--ink); border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--stock), inset 0 0 0 5px var(--ink);
}
.hf__h1 { margin-top: 16px; max-width: 34ch; font: 700 clamp(1.25rem, 1.1rem + .7vw, 1.7rem)/1.22 var(--text); color: var(--ink); text-wrap: balance; }
.hf__lead { margin-top: 12px; max-width: 60ch; font-size: 1.02rem; line-height: 1.55; color: var(--ink-2); }
.hf__lead > * + * { margin-top: .6em; }
.hf__pic .plate img { object-position: 40% 55%; }
/* source order is grid, note, call box (so the price note reads as its own sentence); the note shows last */
.hf__confirm > .slip__note { order: 1; }
@media (max-width: 1099px) { .hf__confirm > .callbox { order: -1; } }
@media (max-width: 389px) {
  .hf__in { gap: 18px; }
  .stamp247 { margin: 10px 0 0; }
  .stamp247 span { font-size: 2rem; padding: 5px 14px 3px; }
  .hf__h1 { margin-top: 12px; }
  .hf__lead { margin-top: 8px; line-height: 1.45; }
}
@media (min-width: 640px) { .callsign { font-size: min(calc(14vw * var(--cs-k, 1)), 8rem); } }
@media (min-width: 1100px) {
  .hf { min-height: calc(100svh - var(--header-h) - 16px); display: flex; flex-direction: column; }
  .hf__in {
    flex: 1; gap: 16px 0;
    grid-template-columns: minmax(0, 1fr) minmax(420px, .62fr); grid-template-rows: auto 1fr;
    grid-template-areas: "sign confirm" "pic confirm";
  }
  .hf__sign, .hf__pic { padding-right: var(--half); }
  .hf__pic { align-self: start; }
  .hf__confirm { padding-left: var(--half); box-shadow: inset 2px 0 0 var(--ink); }
  .callsign { font-size: min(calc(8.6vw * var(--cs-k, 1)), 9rem); padding-right: 9.5rem; }
  .stamp247 { position: absolute; right: var(--half); top: 4px; margin: 0; transform: rotate(-6deg); }
  .stamp247 span { font-size: 3.4rem; padding: 8px 20px 6px; }
  .hf__confirm > .callbox { flex: 1 0 auto; min-height: 168px; padding: 22px 28px 26px; }
  .hf__confirm .callbox__label { font-size: min(clamp(4.6rem, 2.6rem + 2.6vw, 5.6rem), 25cqi); }
  .hf__confirm .callbox__num { font-size: min(1.45rem, 14cqi); }
}
/* desktops narrower than 1400 or shorter than the card: the call box leads, so it is always in the first view */
@media (min-width: 1100px) and (max-width: 1399px), (min-width: 1100px) and (max-height: 880px) {
  .hf__confirm > .callbox { order: -1; flex: 0 0 auto; }
}
@media (min-width: 1100px) and (max-height: 860px) {
  .callsign { font-size: min(calc(8.2vw * var(--cs-k, 1)), 7.75rem); }
  .hf__confirm > .callbox { min-height: 132px; padding-block: 16px 18px; }
  .hf__confirm .callbox__label { font-size: min(clamp(4rem, 2.4rem + 2.2vw, 5rem), 25cqi); }
}

/* == every other page: the front card. The h1 and the lead in the turquoise field (the cost
   design's answer band), then the call box, the confirmation grid and the price note beside the
   picture. The card is a size container, so a larger text setting gets the stacked face. == */
.front { container: front / inline-size; }
.front__head { padding-bottom: clamp(28px, 3.2vw, 44px); }
.front__h1 {
  max-width: 24ch; overflow-wrap: normal;
  font: 900 min(clamp(2.3rem, 1.5rem + 2.2vw, 3.7rem), 12.5vw)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink);
}
.front__lead { margin-top: clamp(12px, 1.4vw, 18px); max-width: 66ch; font-size: clamp(1.0625rem, 1rem + .2vw, 1.15rem); line-height: 1.5; color: var(--ink); }
.front__lead > * + * { margin-top: .6em; }
.front__lead a { font-weight: 700; text-decoration-color: var(--ink); text-decoration-thickness: 2px; }
.front__lead a:hover { color: var(--ink); text-decoration-thickness: 3px; }
.front__lead a.tel { text-decoration-color: var(--ink); }
.front__face { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; padding-top: clamp(20px, 2.4vw, 32px); }
.front__confirm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; align-content: start; }
.front__pic img { object-position: 45% 50%; }
@container front (min-width: 50rem) {
  .front__face { grid-template-columns: minmax(22rem, 34rem) minmax(0, 1fr); gap: 0; }
  .front__confirm { padding-right: var(--half); }
  .front__confirm > .callbox { min-height: 150px; }
  .front__what { display: flex; padding-left: var(--half); box-shadow: inset 2px 0 0 var(--ink); }
  .front__pic { flex: 1; display: flex; flex-direction: column; }
  /* the print fills its column to the foot of the call card, cropped on its focal point */
  .front__pic:not(:has(figcaption)) { position: relative; min-height: 14rem; }
  .front__pic:not(:has(figcaption)) img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); aspect-ratio: auto; }
  /* no picture: the call box and the note on one side, the grid on the other */
  .front--nopic .front__face { grid-template-columns: minmax(0, 1fr); }
  .front--nopic .front__confirm {
    padding-right: 0; column-gap: clamp(24px, 3vw, 48px); align-items: start;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); grid-template-rows: auto 1fr; grid-template-areas: "call grid" "note grid";
  }
  .front--nopic .front__confirm > .callbox { grid-area: call; }
  .front--nopic .front__confirm > .grid { grid-area: grid; }
  .front--nopic .front__confirm > .slip__note { grid-area: note; }
}
@container front (min-width: 80rem) { .front__face { grid-template-columns: 34rem minmax(0, 1fr); } }

/* == the sheet: the long-form back of the card. One ruled row per section: the heading in the
   left column (display), the body in a calm reading column. == */
.sheet { padding-block: 0; container: sheet / inline-size; }
.sheet__row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; padding-block: clamp(24px, 3vw, 40px) clamp(26px, 3vw, 40px); }
.sheet__row + .sheet__row { border-top: var(--line) solid var(--ink); }
.sheet__h { max-width: 16ch; overflow-wrap: normal; font: 900 clamp(1.8rem, 1.4rem + 1.4vw, 2.6rem)/.95 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); }
.sheet__body { min-width: 0; }
@container sheet (min-width: 50rem) {
  .sheet__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 0 clamp(28px, 4vw, 64px); align-items: start; }
  .sheet__row--plain .sheet__body { grid-column: 1 / -1; }
}

/* prose from the copy: paragraphs, ### subheads, ruled lists with tick boxes, numbered steps */
.prose > * + * { margin-top: 1em; }
.prose p { max-width: 66ch; }
.prose h3 { margin-top: 1.5em; font: 800 clamp(1.35rem, 1.2rem + .6vw, 1.75rem)/1.02 var(--display); text-transform: uppercase; letter-spacing: .03em; }
.prose h4 { margin-top: 1.3em; font: 700 1.05rem/1.3 var(--text); }
.prose > :first-child { margin-top: 0; }
.prose a:not(.tel) { font-weight: 600; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.prose a:not(.tel):hover { color: var(--teal-ink); text-decoration-color: var(--teal-ink); }
.prose ul, .prose ol { max-width: 66ch; border-top: var(--line) solid var(--ink); }
.prose ul > li { position: relative; padding: 12px 0 13px 2.75rem; border-bottom: 1px solid var(--rule); }
/* each item is a ticked field: a stock tick box with a teal-ink tick */
.prose ul > li::before, .prose ul > li::after {
  content: ""; position: absolute; left: 0; top: calc(12px + .775em - .8125rem); width: 1.625rem; height: 1.625rem;
}
.prose ul > li::before { border: var(--line) solid var(--ink); border-radius: var(--radius-part); background: var(--stock); }
.prose ul > li::after { background: var(--teal-ink); -webkit-mask: var(--tick-mask) center / 1.15rem no-repeat; mask: var(--tick-mask) center / 1.15rem no-repeat; }
.prose li > strong:first-child { font: 800 1.2em/1.1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
/* numbered steps: big turquoise numerals (display 900, over 30px) in a ruled key column. The item
   stays one text flow (the markdown puts links, {{phone}} and bold straight into the li), so the
   numeral is drawn beside it, not as a grid cell. */
.prose ol { counter-reset: step; }
.prose ol > li {
  counter-increment: step; position: relative; min-height: 3.75rem;
  padding: 14px 0 14px 4.25rem; border-bottom: 1px solid var(--rule); font-weight: 600;
}
.prose ol > li::before {
  content: counter(step); position: absolute; left: 0; top: 0; bottom: 0; width: 3rem;
  display: flex; align-items: center; border-right: 1px solid var(--rule);
  font: 900 2.4rem/1 var(--display); color: var(--teal);
}

/* road pages (roads, exit, stretch, segment): a list is a timetable column. A 6px turquoise route
   line with ink keylines runs down it through filled tick boxes, with ink T-caps at both ends. */
:is(.t-roads, .t-exit, .t-stretch, .t-segment) .prose > ul { position: relative; }
:is(.t-roads, .t-exit, .t-stretch, .t-segment) .prose > ul::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: .1875rem; width: 1.25rem; pointer-events: none;
  background:
    linear-gradient(var(--ink), var(--ink)) top / 100% 4px no-repeat,
    linear-gradient(var(--ink), var(--ink)) bottom / 100% 4px no-repeat,
    linear-gradient(90deg, transparent calc(50% - 4.5px), var(--ink) 0 calc(50% - 3px), var(--teal) 0 calc(50% + 3px), var(--ink) 0 calc(50% + 4.5px), transparent 0);
}
:is(.t-roads, .t-exit, .t-stretch, .t-segment) .prose > ul > li { padding-left: 2.9rem; }
:is(.t-roads, .t-exit, .t-stretch, .t-segment) .prose > ul > li::before { background: var(--teal); z-index: 1; }
:is(.t-roads, .t-exit, .t-stretch, .t-segment) .prose > ul > li::after { background: var(--ink); z-index: 2; }
/* the towns index: each town is an address line */
.t-towns .prose > ul > li > a:first-child { font: 800 clamp(1.35rem, 1.15rem + .7vw, 1.8rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; text-decoration: none; }
.t-towns .prose > ul > li > a:first-child:hover { color: var(--teal-ink); text-decoration: underline; }

/* == the price card (hub and cost): the confirmation grid's form as a table. A turquoise head,
   one ruled row per service with its from-price, no ticks (a from-price is not a confirmed price);
   the price note closes it inside the same ink border. == */
.pcard { max-width: 46rem; border: var(--line) solid var(--ink); border-radius: var(--radius-part); background: var(--stock); container: pcard / inline-size; }
.pcard__t { width: 100%; border-collapse: collapse; }
.pcard__t caption {
  position: relative; padding: 14px 16px 12px; text-align: left; overflow: hidden;
  font: 900 min(1.65rem, 9.5vw)/1 var(--display); text-transform: uppercase; letter-spacing: .04em;
  background: var(--teal); color: var(--ink); border-bottom: var(--line) solid var(--ink);
}
.pcard__t caption::after {
  content: ""; position: absolute; top: 50%; right: 16px; width: 45%; height: 22px; margin-top: -11px;
  background: var(--screen-ink); opacity: .55;
  -webkit-mask: linear-gradient(90deg, transparent, #000 70%); mask: linear-gradient(90deg, transparent, #000 70%);
}
.pcard__t th, .pcard__t td { padding: 12px 16px; text-align: left; vertical-align: baseline; }
.pcard__t thead th { padding-block: 10px 8px; font: 700 var(--fs-label)/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); border-bottom: 1px solid var(--rule); }
.pcard__t tbody tr + tr { border-top: 1px solid var(--rule); }
.pcard__t tbody th { font: 800 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.pcard__t tbody th a { text-decoration: none; display: inline-flex; align-items: center; gap: .4em; min-height: var(--tap); margin-block: -10px; }
.pcard__t tbody th a .icon { width: 1.1rem; height: 1.1rem; }
.pcard__t tbody th a:hover { color: var(--teal-ink); text-decoration: underline; text-decoration-thickness: 2px; }
.pcard__t td:last-child, .pcard__t thead th:last-child { text-align: right; }
.pcard__t td { font: 700 1.05rem/1.3 var(--text); white-space: nowrap; color: var(--ink); }
.pcard__note { padding: 12px 16px 14px; border-top: 1px solid var(--rule); font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.pcard__checked { margin-top: 12px; font: 700 var(--fs-label)/1.3 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); }
@container pcard (max-width: 20rem) {
  .pcard__t tbody tr { display: grid; }
  .pcard__t tbody th, .pcard__t tbody td { text-align: left; }
  .pcard__t tbody td { padding-top: 0; }
  .pcard__t thead { display: none; }
}

/* == questions: a ruled Q&A sheet with every answer printed == */
.faqs__h { font-size: min(clamp(2rem, 1.3rem + 1.8vw, 3rem), 11vw); }
.faq { display: grid; container: faq / inline-size; }
.qa { display: grid; gap: 8px; padding-block: clamp(18px, 2.2vw, 28px); }
.qa + .qa { border-top: 1px solid var(--rule); }
.qa:first-child { padding-top: clamp(22px, 2.6vw, 34px); }
.qa:last-child { padding-bottom: 4px; }
.qa__q { max-width: 30ch; font: 800 clamp(1.3rem, 1.15rem + .7vw, 1.85rem)/1.05 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.qa__a { max-width: 64ch; color: var(--ink-2); }
.qa__a > * + * { margin-top: .7em; }
.qa__a a:not(.tel) { color: var(--ink); font-weight: 600; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.qa__a a.tel { color: var(--ink); }
.qa__a ul > li { padding-left: 1.1em; position: relative; }
.qa__a ul > li::before { content: ""; position: absolute; left: 0; top: .62em; width: .45em; height: .45em; background: var(--teal); }
@container faq (min-width: 50rem) {
  .qa { grid-template-columns: minmax(0, .85fr) minmax(0, 1fr); gap: 0 clamp(28px, 3.4vw, 56px); align-items: start; }
  .qa__a { padding-top: .2em; }
}

/* == nearby and related: address lines, with the place postmarked where there is one == */
.rel { display: grid; gap: 16px; container: rel / inline-size; }
.rel__h { font-size: clamp(2rem, 1.5rem + 1.4vw, 2.7rem); }
.rel--pm .rel__h { padding-right: 8.5rem; min-height: 4.5rem; }
@container rel (min-width: 50rem) {
  .rel .addr-lines { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 22rem), 1fr)); column-gap: clamp(28px, 3.4vw, 56px); }
}
/* the postmark: the place, stamped in the second colour (decorative, aria-hidden; the page says it) */
.postmark {
  /* stamped across the card's top edge, clear of the heading (its padding) and the first line */
  position: absolute; top: -.9rem; right: calc(var(--pad) + .25rem); z-index: 1;
  display: grid; place-items: center; width: 8.2em; aspect-ratio: 1; border-radius: 50%;
  font: 900 .86rem/.95 var(--display); transform: rotate(-10deg); pointer-events: none;
  background: var(--stock); border: 3px solid var(--teal);
  box-shadow: inset 0 0 0 .35em var(--stock), inset 0 0 0 .5em var(--teal);
}
.postmark span { max-width: 6.2em; padding: .3em 0; text-align: center; text-transform: uppercase; letter-spacing: .03em; color: var(--teal-ink); border-block: 2px solid var(--teal-ink); overflow-wrap: anywhere; }
.postmark b { display: block; font-weight: 900; font-size: 1.45em; letter-spacing: .08em; }
@container rel (max-width: 24rem) {
  .rel--pm .rel__h { padding-right: 0; min-height: 0; }
  .rel .postmark { display: none; }
}

/* == the request form: the generator's Netlify form drawn in the card's look. It sits below a
   call, never above or beside it; ruled labels in the grid's small caps, ink-ruled controls. == */
.req { display: grid; gap: 18px; align-content: start; container: req / inline-size; }
.req__h { font-size: clamp(1.8rem, 1.3rem + 1.4vw, 2.4rem); }
.rform { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 22px; max-width: 46rem; }
.rform__field { display: grid; gap: 6px; align-content: start; }
.rform__field label { font: 700 var(--fs-label)/1.3 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); }
.rform input:not([type="hidden"]), .rform select, .rform textarea {
  width: 100%; min-height: var(--tap); padding: 10px 12px; margin: 0;
  font: 600 1rem/1.4 var(--text); color: var(--ink);
  background: #fcfbf7; border: var(--line) solid var(--ink); border-radius: var(--radius-part);
  -webkit-appearance: none; appearance: none;
}
.rform select {
  padding-right: 42px;
  background: #fcfbf7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23121212' stroke-width='2.4' stroke-linecap='square'/%3E%3C/svg%3E") right 12px center / 18px no-repeat;
}
.rform textarea { min-height: 6.5rem; resize: vertical; }
.rform input:hover, .rform select:hover, .rform textarea:hover { background-color: #fff; }
.rform :is(input, select, textarea):focus-visible { outline: 3px solid var(--teal-ink); outline-offset: 1px; }
.rform :is(input, select, textarea):user-invalid { border-color: var(--err); box-shadow: inset 0 0 0 1px var(--err); }
.rform__note { font-size: var(--fs-small); line-height: 1.5; color: var(--ink-2); }
.rform__submit {
  justify-self: start; min-height: var(--tap); padding: 0 26px; cursor: pointer;
  font: 700 1rem/1.2 var(--text); color: var(--ink);
  background: transparent; border: var(--line) solid var(--ink); border-radius: var(--radius-part);
}
.rform__submit:hover { background: var(--teal-tint); }
@container req (min-width: 34rem) {
  .rform { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rform__field:has(textarea), .rform__note, .rform__submit { grid-column: 1 / -1; }
}

/* == sources: small print, ruled == */
.srcs { padding-block: clamp(16px, 2vw, 24px); font-size: var(--fs-small); color: var(--ink-2); }
.srcs__h { margin-bottom: 10px; font: 700 var(--fs-label)/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); }
.srcs__list { border-top: var(--line) solid var(--ink); max-width: 72ch; }
.srcs__list li { padding: 8px 0 9px; border-bottom: 1px solid var(--rule); }
.srcs__list a { color: var(--ink); font-weight: 600; text-decoration-color: var(--teal); text-decoration-thickness: 2px; overflow-wrap: anywhere; }
.srcs__list a:hover { color: var(--teal-ink); }
.srcs__checked { margin-top: 10px; font-weight: 700; color: var(--ink); }

/* == contact: the address side of the card. A message half (heading, intro, grid, picture) and an
   address half (the call box where the address goes, the request form under it), split by a 2px
   ink rule from 900px. The whole card is the confirm scope, so the call box ticks the grid. == */
.addr-side { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; }
.contact-h { font: 900 min(clamp(2.8rem, 1.7rem + 3.6vw, 4.6rem), 14vw)/.88 var(--display); text-transform: uppercase; letter-spacing: .005em; color: var(--ink); overflow-wrap: normal; }
.contact-h__sign { color: var(--teal); }
.contact-intro { margin-top: 18px; max-width: 46ch; font: 600 clamp(1rem, .93rem + .45vw, 1.3rem)/1.45 var(--text); color: var(--ink-2); }
.contact-intro > * + * { margin-top: .6em; }
.contact-intro a { color: var(--ink); }
.addr-side__call { display: flex; }
.addr-side__call .callbox { flex: 1; min-height: 136px; }
.addr-side__grid { display: grid; gap: 14px; align-content: start; }
.addr-side__pic img { object-position: 70% 50%; }
@media (max-width: 899px) { .contact-h { font-size: min(2.6rem, 12vw); line-height: .9; } }
@media (min-width: 900px) {
  .addr-side {
    --split: clamp(24px, 2.6vw, 40px);
    grid-template-columns: minmax(0, 1fr) minmax(360px, .85fr); grid-template-rows: auto auto 1fr;
    grid-template-areas: "head call" "grid form" "pic form"; gap: 0;
  }
  .addr-side__head { grid-area: head; padding: 0 var(--split) 28px 0; align-self: end; }
  .addr-side__call { grid-area: call; padding: 0 0 28px var(--split); box-shadow: inset var(--line) 0 0 var(--ink); }
  .addr-side__form { grid-area: form; padding: 0 0 6px var(--split); box-shadow: inset var(--line) 0 0 var(--ink); }
  .addr-side__grid { grid-area: grid; padding: 0 var(--split) 28px 0; }
  .addr-side__pic { grid-area: pic; padding-right: var(--split); }
  .addr-side__call .callbox { min-height: 200px; padding: 24px 30px 28px; }
  .addr-side__call .callbox__label { font-size: min(clamp(4.8rem, 2.8rem + 2.8vw, 6rem), 25cqi); }
  .addr-side__call .callbox__num { font-size: min(2rem, 9cqi); }
}

/* == privacy and terms: the card's fine print. Turquoise band head, a numbered index, and ruled
   clauses whose numbers stand in the grid's key column. == */
.legal { container-type: inline-size; }
.legal__head { padding-bottom: clamp(34px, 4vw, 58px); }
.legal__h { font: 900 clamp(2.6rem, 1.6rem + 3.6vw, 5rem)/.9 var(--display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); overflow-wrap: break-word; }
.legal__dek { margin-top: 16px; max-width: 58ch; font-size: 1.1rem; font-weight: 600; line-height: 1.45; color: var(--ink); }
.legal__body { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; padding-top: clamp(22px, 3.4vw, 48px); padding-bottom: clamp(4px, 1vw, 12px); }
.legal__index { border-top: var(--line) solid var(--ink); padding-top: 12px; }
.legal__index-h { margin-bottom: 4px; font: 700 var(--fs-label)/1.2 var(--text); text-transform: uppercase; letter-spacing: .08em; color: var(--teal-ink); }
.legal__index ol { counter-reset: idx; margin-top: 8px; }
.legal__index li { counter-increment: idx; border-top: 1px solid var(--rule); }
.legal__index a { display: flex; align-items: center; position: relative; min-height: var(--tap); padding: 6px 0 6px 1.75em; font-weight: 600; font-size: .98rem; line-height: 1.3; text-decoration: none; }
.legal__index a::before { content: counter(idx); position: absolute; left: 0; top: 50%; transform: translateY(-50%); font: 700 var(--fs-label)/1 var(--text); letter-spacing: .08em; color: var(--teal-ink); }
.legal__index a:hover { color: var(--teal-ink); text-decoration: underline; text-decoration-color: var(--teal-ink); text-decoration-thickness: 3px; text-underline-offset: .3em; }
.legal__col { min-width: 0; }
.clauses { counter-reset: clause; border-top: var(--line) solid var(--ink); max-width: 40rem; }
.clause { counter-increment: clause; display: grid; grid-template-columns: 2.4em minmax(0, 1fr); column-gap: clamp(14px, 1.8vw, 22px); scroll-margin-top: 16px; }
.clause + .clause { border-top: 1px solid var(--rule); }
.clause::before {
  content: counter(clause); grid-column: 1; grid-row: 1 / span 2; align-self: stretch;
  padding: calc(24px + .45em) 0 0 2px; border-right: 1px solid var(--rule);
  font: 700 var(--fs-label)/1.2 var(--text); letter-spacing: .08em; color: var(--teal-ink);
}
.clause--plain { counter-increment: none; }
.clause--plain::before { content: ""; }
.clause__h { grid-column: 2; padding-top: 22px; font: 800 clamp(1.45rem, 1.2rem + .9vw, 2rem)/1 var(--display); text-transform: uppercase; letter-spacing: .03em; color: var(--ink); }
.clause__body { grid-column: 2; padding: 12px 0 26px; max-width: 56ch; line-height: 1.62; }
.clause--plain .clause__body { padding-top: 22px; }
.clause__body > * + * { margin-top: .8em; }
.clause__body ul > li { position: relative; padding-left: 1.1em; }
.clause__body ul > li::before { content: ""; position: absolute; left: 0; top: .65em; width: .45em; height: .45em; background: var(--teal); }
.clause__body ol { list-style: decimal; padding-left: 1.3em; }
.clause__body a { font-weight: 600; overflow-wrap: break-word; text-decoration-color: var(--teal); text-decoration-thickness: 2px; }
.clause__body a:hover { color: var(--teal-ink); text-decoration-color: var(--teal-ink); }
.clause:target { background: var(--teal-tint); }
@container (max-width: 30em) {
  .clause { grid-template-columns: 1.6em minmax(0, 1fr); column-gap: 10px; }
  .clause::before { padding: calc(18px + .5em) 0 0; }
  .clause__h { padding-top: 18px; }
  .clause__body { padding: 10px 0 22px; }
  .legal__dek { font-size: 1rem; }
  .legal__head { padding-bottom: 26px; }
  .legal__body { gap: 16px; padding-top: 14px; }
}
@container (min-width: 50em) {
  .legal__body { grid-template-columns: minmax(12rem, 16rem) var(--line) minmax(0, 40rem); column-gap: clamp(28px, 3.4vw, 56px); justify-content: start; }
  .legal__body::before { content: ""; grid-column: 2; grid-row: 1; background: var(--ink); }
  .legal__index { grid-column: 1; grid-row: 1; position: sticky; top: 24px; align-self: start; }
  .legal__col { grid-column: 3; grid-row: 1; }
  .legal__body--solo { grid-template-columns: minmax(0, 40rem); }
  .legal__body--solo::before { content: none; }
  .legal__body--solo .legal__col { grid-column: 1; }
}

/* == print: the card without the furniture == */
@media print {
  .dock, .masthead__call, .skip { display: none !important; }
  body { background: #fff; padding: 0; }
  .card { box-shadow: none; break-inside: avoid-page; }
}

/* Sources fold (2026-11-08): closed by default, opens on tap */
.src-fold>summary{display:list-item;list-style:disclosure-closed inside;cursor:pointer;font-weight:700}
.src-fold[open]>summary{list-style-type:disclosure-open;margin-bottom:.5em}
.src-fold>summary::-webkit-details-marker{display:revert}