:root{--raam-vh:8px}@media (max-width:47.99rem){:root{--raam-vh:8.44px}}/* Base element styles use :where() (zero specificity) so component classes
   always win over them.

   One stylesheet for every tenant. The theme sets colour and type tokens on
   .site (theme.ts); the trade's look (.site[data-look], also theme.ts) draws
   that trade's artefact: the letterboard, the job card and plate, the
   installation drawing, the bouwbord, the paint chips, the plant labels, the
   cleaning rota, the appointment and price cards. See
   docs/design-direction.md ("Template plans"). No tenant gets its own CSS.

   Fonts: self-hosted OFL fonts, Latin subset, woff2. Every host serves them
   at /fonts/<file> (apps/sites/public/fonts, copied into the app; the static
   export rewrites the URLs to its own fonts/ folder). Licences:
   apps/sites/public/fonts/FONTS-LICENSES.txt. A browser only downloads the faces a
   page actually uses; each "… fallback" face is a local font scaled to the
   web font's metrics (computed with fontTools), so swapping in the web font
   barely moves anything. */

@font-face { font-family: "Rubik"; src: url(/fonts/rubik.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow Condensed"; src: url(/fonts/barlow-condensed-700.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-400.woff2) format("woff2"); font-weight: 300 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Barlow"; src: url(/fonts/barlow-600.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url(/fonts/ibm-plex-sans-400.woff2) format("woff2"); font-weight: 300 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; src: url(/fonts/ibm-plex-sans-600.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Mono"; src: url(/fonts/ibm-plex-mono-500.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo"; src: url(/fonts/archivo.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Public Sans"; src: url(/fonts/public-sans.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Young Serif"; src: url(/fonts/young-serif.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Karla"; src: url(/fonts/karla.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Source Sans 3"; src: url(/fonts/source-sans-3.woff2) format("woff2"); font-weight: 200 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Serif"; src: url(/fonts/instrument-serif.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Instrument Sans"; src: url(/fonts/instrument-sans.woff2) format("woff2"); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; src: url(/fonts/overpass-800.woff2) format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Overpass"; src: url(/fonts/overpass-400.woff2) format("woff2"); font-weight: 300 600; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Atkinson Hyperlegible Next without its digits (its zero is slashed, which turns phone numbers into Ø): the figures come from Overpass, next in the stack. */
@font-face { font-family: "Atkinson Hyperlegible Next"; src: url(/fonts/atkinson-hyperlegible-next.woff2) format("woff2"); font-weight: 200 800; font-display: swap; unicode-range: U+0000-002F, U+003A-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Big Shoulders Display"; src: url(/fonts/big-shoulders-display-800.woff2) format("woff2"); font-weight: 700 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Archivo Narrow"; src: url(/fonts/archivo-narrow-700.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Kalam"; src: url(/fonts/kalam-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Caveat Brush"; src: url(/fonts/caveat-brush-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Red Hat Display"; src: url(/fonts/red-hat-display.woff2) format("woff2"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Courier Prime"; src: url(/fonts/courier-prime-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Petrona"; src: url(/fonts/petrona-600.woff2) format("woff2"); font-weight: 500 800; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Lexend"; src: url(/fonts/lexend.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Recursive Casual"; src: url(/fonts/recursive-casual-700.woff2) format("woff2"); font-weight: 600 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Recursive"; src: url(/fonts/recursive-linear-400.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Recursive Mono"; src: url(/fonts/recursive-mono-500.woff2) format("woff2"); font-weight: 400 600; font-display: swap; unicode-range: U+0020-007E, U+00A0, U+00B2, U+00B7, U+00D7, U+00E8-00EB, U+00EF, U+00F6, U+2013-2014, U+2019, U+2026, U+20AC; }
@font-face { font-family: "Hanken Grotesk"; src: url(/fonts/hanken-grotesk.woff2) format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "DM Mono"; src: url(/fonts/dm-mono-400.woff2) format("woff2"); font-weight: 300 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Alfa Slab One: the barber's sign-writer slab and the club pairing's headings (theme.ts clubhouse). */
@font-face { font-family: "Alfa Slab One"; src: url(/fonts/alfa-slab-one.woff2) format("woff2"); font-weight: 400; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

@font-face { font-family: "Rubik fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 100.7%; ascent-override: 92.8%; descent-override: 24.8%; line-gap-override: 0%; }
@font-face { font-family: "Barlow Condensed fallback"; src: local("Arial"), local("Liberation Sans"); size-adjust: 82.3%; ascent-override: 121.5%; descent-override: 24.3%; line-gap-override: 0%; }
@font-face { font-family: "Barlow fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 96.4%; ascent-override: 103.7%; descent-override: 20.7%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Sans fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 97.6%; ascent-override: 105%; descent-override: 28.2%; line-gap-override: 0%; }
@font-face { font-family: "IBM Plex Mono fallback"; src: local("Courier New"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 102.5%; descent-override: 27.5%; line-gap-override: 0%; }
@font-face { font-family: "Archivo fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 102.2%; ascent-override: 85.9%; descent-override: 20.5%; line-gap-override: 0%; }
@font-face { font-family: "Public Sans fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 102.3%; ascent-override: 92.9%; descent-override: 22%; line-gap-override: 0%; }
@font-face { font-family: "Young Serif fallback"; src: local("Times New Roman"), local("Liberation Serif"); size-adjust: 121.3%; ascent-override: 86.2%; descent-override: 30.2%; line-gap-override: 0%; }
@font-face { font-family: "Karla fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 96.7%; ascent-override: 94.8%; descent-override: 26.1%; line-gap-override: 0%; }
@font-face { font-family: "Source Sans 3 fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 89.5%; ascent-override: 114.4%; descent-override: 44.7%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Serif fallback"; src: local("Times New Roman"), local("Liberation Serif"); size-adjust: 78.2%; ascent-override: 126.6%; descent-override: 39.6%; line-gap-override: 0%; }
@font-face { font-family: "Instrument Sans fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 102.5%; ascent-override: 94.7%; descent-override: 24.4%; line-gap-override: 0%; }
@font-face { font-family: "Overpass fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 107.5%; ascent-override: 82.1%; descent-override: 35.6%; line-gap-override: 0%; }
@font-face { font-family: "Atkinson Hyperlegible Next fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 100%; ascent-override: 98.4%; descent-override: 31.6%; line-gap-override: 0%; }
@font-face { font-family: "Big Shoulders Display fallback"; src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial"), local("Liberation Sans"); size-adjust: 85.2%; ascent-override: 115.5%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Archivo Narrow fallback"; src: local("Arial Narrow"), local("Liberation Sans Narrow"), local("Arial"), local("Liberation Sans"); size-adjust: 88.7%; ascent-override: 116.7%; descent-override: 35.2%; line-gap-override: 0%; }
@font-face { font-family: "Kalam fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 98.5%; ascent-override: 107.9%; descent-override: 53.9%; line-gap-override: 0%; }
@font-face { font-family: "Caveat Brush fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 82%; ascent-override: 117%; descent-override: 36.6%; line-gap-override: 0%; }
@font-face { font-family: "Red Hat Display fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 98.9%; ascent-override: 102.9%; descent-override: 30.8%; line-gap-override: 0%; }
@font-face { font-family: "Courier Prime fallback"; src: local("Courier New"), local("Liberation Mono"); size-adjust: 99.9%; ascent-override: 78.2%; descent-override: 34.2%; line-gap-override: 0%; }
@font-face { font-family: "Petrona fallback"; src: local("Times New Roman"), local("Liberation Serif"); size-adjust: 111.5%; ascent-override: 77%; descent-override: 24.2%; line-gap-override: 0%; }
@font-face { font-family: "Lexend fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 110.6%; ascent-override: 90.4%; descent-override: 22.6%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Casual fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 115.2%; ascent-override: 82.5%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Recursive fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 115.2%; ascent-override: 82.5%; descent-override: 21.7%; line-gap-override: 0%; }
@font-face { font-family: "Recursive Mono fallback"; src: local("Courier New"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }
@font-face { font-family: "Hanken Grotesk fallback"; src: local("Arial"), local("Helvetica Neue"), local("Liberation Sans"); size-adjust: 101.5%; ascent-override: 98.5%; descent-override: 29.8%; line-gap-override: 0%; }
@font-face { font-family: "DM Mono fallback"; src: local("Courier New"), local("Liberation Mono"); size-adjust: 100%; ascent-override: 99.2%; descent-override: 31%; line-gap-override: 0%; }
/* A bold Times scaled to the slab's width and line metrics (fontTools), so a headline barely moves on swap. */
@font-face { font-family: "Alfa Slab One fallback"; src: local("Times New Roman Bold"), local("TimesNewRomanPS-BoldMT"), local("Liberation Serif Bold"), local("LiberationSerif-Bold"); font-weight: 400; size-adjust: 122.7%; ascent-override: 84.4%; descent-override: 27.1%; line-gap-override: 0%; }

/* --- Tokens --------------------------------------------------------------
   Colour, fonts, radius and density come from the theme (inline on .site),
   the artefact colours from the look. Type scale, spacing, widths shared. */

.site {
  --wrap: 72rem;
  --gap: clamp(1rem, 3.2vw, 2rem);
  --fs-sm: 0.9375rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.1rem, 1.03rem + 0.3vw, 1.25rem);
  --fs-h3: calc(clamp(1.1rem, 1.04rem + 0.3vw, 1.3rem) * var(--heading-scale, 1));
  --fs-h2: calc(clamp(1.75rem, 1.4rem + 1.6vw, 2.6rem) * var(--heading-scale, 1));
  --fs-h1: calc(clamp(2.3rem, 1.5rem + 3.6vw, 4.4rem) * var(--heading-scale, 1));
  --space: clamp(1.5rem, 3.5vw, 2.5rem);
  --ink-line: 1.5px solid var(--text);
  background: var(--bg);
  color: var(--text);
  color-scheme: light;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.6;
  min-height: calc(100 * var(--raam-vh));
  display: flex;
  flex-direction: column;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-kerning: normal;
}
:where(.site) *, :where(.site) *::before, :where(.site) *::after { box-sizing: border-box; }
:where(.site) main { flex: 1; }
:where(.site) img { max-width: 100%; height: auto; display: block; }
:where(.site) a { color: inherit; text-underline-offset: 0.2em; text-decoration-thickness: 1px; }
:where(.site) a:hover { text-decoration-thickness: 2px; }
:where(.site) strong, :where(.site) b { font-weight: var(--strong); }
:where(.site) h1, :where(.site) h2, :where(.site) h3 {
  font-family: var(--font-heading);
  font-weight: var(--heading-weight);
  text-transform: var(--heading-case);
  letter-spacing: var(--heading-tracking);
  line-height: 1.08;
  margin: 0 0 0.5em;
  text-wrap: balance;
}
:where(.site) h1 { font-size: var(--fs-h1); line-height: 1.02; }
:where(.site) h2 { font-size: var(--fs-h2); }
:where(.site) h3, :where(.site) .h3 { font-size: var(--fs-h3); line-height: 1.2; }
:where(.site) p { margin: 0 0 1em; text-wrap: pretty; }
:where(.site) ul { margin: 0; padding: 0; list-style: none; }
:where(.site) ::selection { background: var(--text); color: var(--bg); }
:where(.site) :focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* Approval snapshots stored before the trade looks still contain inline line
   icons, and the admin review shows them with this stylesheet: keep them
   small and stroked. New markup has no icons. */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.wrap { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.s { padding-block: var(--section-pad); position: relative; scroll-margin-top: 5rem; }
/* Sections are divided by a rule, not by alternating coloured bands. */
main > .s + .s { border-top: 1px solid var(--border); }
.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--muted); max-width: 38rem; }
/* A subpage starts with its own section: the weight of a page header. */
main > .s:first-child:not(.s-hero) { padding-top: clamp(3rem, 7vw, 5.5rem); }
main > .s:first-child:not(.s-hero) > .wrap h1 { font-size: var(--fs-h1); }

.skip { position: absolute; left: -999px; top: 0; background: var(--text); color: var(--bg); padding: 0.75rem 1rem; z-index: 50; }
.skip:focus { left: 1rem; top: 1rem; }
.sr-only, .hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Dark band (footer, quick bar): text tokens re-pointed at the preset's
   fixed, contrast-tested deep palette; the customer colour never becomes text. */
.site-footer {
  --bg: var(--deep);
  --surface: var(--deep);
  --text: var(--on-deep);
  --muted: var(--deep-muted);
  --border: color-mix(in srgb, var(--on-deep) 22%, transparent);
  background: var(--deep);
  color: var(--text);
}

/* --- Buttons: the customer's colour fills them, text is auto black/white. */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.7rem 1.3rem;
  border-radius: var(--radius); border: 2px solid var(--primary);
  font: inherit; font-weight: var(--strong); line-height: 1.2;
  text-decoration: none; cursor: pointer; white-space: nowrap;
}
.btn-primary { background: var(--primary); color: var(--on-primary); }
.btn-outline { background: transparent; color: inherit; border-color: currentColor; }
.btn-ghost { background: transparent; color: var(--text); border-color: var(--text); }
.btn:hover { text-decoration: underline; text-underline-offset: 0.2em; }
/* The hero's one button, and the second channel as a sentence beside it. */
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.4rem; margin: 1.75rem 0 0; }
.cta-alt { font-weight: var(--strong); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.25em; padding-block: 0.6rem; }

/* --- Header ------------------------------------------------------------- */
.site-header { border-bottom: 1px solid var(--border); background: var(--bg); position: relative; z-index: 30; }
.header-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 2rem; padding-block: 0.85rem; min-height: 4.5rem; }
.brand {
  display: inline-flex; align-items: center; margin-right: auto;
  font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking);
  font-size: calc(1.25rem * var(--heading-scale)); line-height: 1.1; text-decoration: none;
}
.site-header nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; }
.site-header nav a { text-decoration: none; padding: 0.5rem 0; display: inline-block; font-weight: 500; }
.site-header nav a:hover { text-decoration: underline; }
.site-header nav a[aria-current='page'] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.4em; font-weight: var(--strong); }
.site-header .btn { min-height: 44px; padding: 0.5rem 1rem; }
@media (min-width: 52rem) { .site-header { position: sticky; top: 0; } }
@media (max-width: 40rem) {
  /* A menu wider than the phone scrolls sideways; its right edge fades out
     so the cut-off item reads as "more this way", not as a broken word. */
  .site-header nav { order: 3; overflow-x: auto; margin-inline: calc(-1 * var(--gap)); padding-inline: var(--gap) 2.5rem; width: calc(100% + 2 * var(--gap)); scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent calc(100% - 0.25rem)); mask-image: linear-gradient(to right, #000 calc(100% - 2.75rem), transparent calc(100% - 0.25rem)); }
  .site-header nav ul { flex-wrap: nowrap; white-space: nowrap; gap: 1.25rem; }
  .site-header .cta-detail { display: none; }
  .header-inner { column-gap: 1rem; min-height: 3.75rem; }
  .brand { flex: 1 1 0; min-width: 0; overflow-wrap: break-word; line-height: 1.2; font-size: calc(1.08rem * var(--heading-scale)); }
  .brand-name { min-width: 0; hyphens: auto; }
  /* The quick-contact bar carries the actions on phones; the name gets the room. */
  .site:has(.quickbar) .site-header .btn { display: none; }
  .site-header .btn { flex: none; padding-inline: 0.85rem; font-size: 0.95rem; }
}

/* --- Hero ---------------------------------------------------------------- */
.s-hero { padding-block: clamp(2.5rem, 6vw, 5.5rem); overflow: clip; }
.hero-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.hero-text { min-width: 0; }
.s-hero h1, .s-hero h2 { margin-bottom: 0.35em; max-width: 16ch; }
/* A big name or headline never breaks inside a word (bits.tsx Fit): the type
   gets smaller until the longest piece (--longest letters, between spaces,
   hyphens and compound joints) fits the box. --heading-fit is the heading
   face's widest letter width in em (theme.ts). */
.s-hero h1:has(> .fit), .fit-box { container-type: inline-size; }
.fit { display: block; font-size: min(1em, calc(100cqi / (var(--longest, 8) * var(--heading-fit, 0.62)))); overflow-wrap: normal; word-break: normal; hyphens: manual; }
.s-hero h1:has(> .fit), .fit-box, .fit-box > span:has(> .fit) { overflow-wrap: normal; word-break: normal; }
.s-hero .lead { margin-bottom: 0; }
.hero-media { position: relative; min-width: 0; }
.hero-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
@media (min-width: 52rem) {
  .hero-split .hero-inner, .hero-slanted .hero-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
  .hero-split .hero-img, .hero-slanted .hero-img { aspect-ratio: 4 / 5; max-height: 38rem; }
}
/* Headline across the page, the photo as a wide strip underneath. */
.hero-editorial :is(h1, h2) { max-width: 20ch; }
@media (min-width: 52rem) { .hero-editorial .hero-img { aspect-ratio: 21 / 9; } }
/* No photo: the headline alone, left-aligned like every other heading. */
.hero-centered { padding-block: clamp(3.5rem, 9vw, 7rem); }
/* Full-bleed photo; the text on a solid panel, readable over any photo. */
.hero-image_full:not(.hero-board):has(.hero-media) { padding: 0; }
.hero-image_full:not(.hero-board):has(.hero-media) .hero-inner { position: relative; min-height: clamp(30rem, calc(78 * var(--raam-vh)), 46rem); align-items: end; padding-block: clamp(10rem, calc(30 * var(--raam-vh)), 18rem) clamp(2rem, 5vw, 3.5rem); grid-template-columns: minmax(0, 40rem); }
.hero-image_full:not(.hero-board):has(.hero-media) .hero-media { position: absolute; inset: 0; z-index: 0; width: 100vw; left: 50%; margin-left: -50vw; }
.hero-image_full:not(.hero-board):has(.hero-media) .hero-img { width: 100%; height: 100%; aspect-ratio: auto; }
.hero-image_full:not(.hero-board):has(.hero-media) .hero-text { position: relative; z-index: 1; background: var(--bg); padding: clamp(1.4rem, 3.5vw, 2.5rem); }
@media (max-width: 51.99rem) { .hero-image_full:not(.hero-board):has(.hero-media) .hero-inner { min-height: 0; padding-top: clamp(7rem, calc(22 * var(--raam-vh)), 12rem); } }

/* --- Trust strip: the customer's own claims as one plain line. ------------ */
.s-trust { padding-block: 1.1rem; }
main > .s + .s-trust, main > .s-trust + .s { border-top: 1px solid var(--border); }
.trust-list { display: flex; flex-wrap: wrap; gap: 0.25rem 0; font-weight: var(--strong); }
/* The separator ends a claim, so a wrapped line never starts with one. */
.trust-list li:not(:last-child)::after { content: '/'; margin-inline: 0.85rem; color: var(--muted); font-weight: 400; }

/* --- Services: a ruled list by default; each look turns it into its artefact. */
.sheet-head { max-width: 44rem; }
.sheet-head .lead { margin-bottom: 0; }
.sheet-cols { display: none; }
.card-fields { display: none; }
.service-list { margin-top: var(--space); border-top: var(--ink-line); }
.service { border-bottom: 1px solid var(--border); padding-block: 1.15rem; }
.service-body > :last-child { margin-bottom: 0; }
.service :is(h2, h3) { margin: 0; overflow-wrap: break-word; hyphens: auto; }
.price-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; }
.price-row .leader { flex: 1 1 1rem; }
.price { margin: 0; font-weight: var(--strong); font-family: var(--font-figures); font-variant-numeric: tabular-nums; white-space: nowrap; }
.price-amount { white-space: nowrap; }
.service-note { color: var(--muted); margin: 0.35rem 0 0; max-width: 40rem; }
.sheet-foot { margin: 1rem 0 0; color: var(--muted); font-size: var(--fs-sm); }
.chip { display: none; }
.stake { display: none; }

/* --- About ---------------------------------------------------------------- */
.about-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.about-text { max-width: 38rem; }
.about-text > p:first-of-type { font-size: var(--fs-lead); line-height: 1.5; }
.about-img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
@media (max-width: 51.99rem) { .about-img { max-height: 28rem; } }
@media (min-width: 52rem) {
  .about-image_left .about-inner, .about-image_right .about-inner { grid-template-columns: 1fr 1fr; }
  .about-image_left .about-media { order: -1; }
}

/* --- Gallery: plain crops ------------------------------------------------- */
.gallery-items { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); margin-top: var(--space); }
.gallery-items li { background: var(--surface); }
.gallery-items img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 40rem) { .gallery-items li:first-child:nth-last-child(odd) { grid-column: 1 / -1; } }
@media (min-width: 52rem) {
  .gallery-grid .gallery-items { grid-template-columns: repeat(3, 1fr); }
  .gallery-grid .gallery-items li:first-child:nth-last-child(3) { grid-column: span 2; grid-row: span 2; }
  .gallery-grid .gallery-items li:first-child:nth-last-child(3) img { height: 100%; }
  .gallery-grid .gallery-items li:last-child:nth-child(3n + 2) { grid-column: span 2; }
  .gallery-grid .gallery-items li:last-child:nth-child(3n + 2) img { aspect-ratio: 8 / 3; }
  .gallery-grid .gallery-items li:last-child:nth-child(3n + 1):not(:first-child) { grid-column: 1 / -1; }
  .gallery-grid .gallery-items li:last-child:nth-child(3n + 1):not(:first-child) img { aspect-ratio: 4 / 1; }
}
.gallery-masonry .gallery-items { display: block; columns: 14rem; column-gap: 0.5rem; }
.gallery-masonry .gallery-items li { break-inside: avoid; margin-bottom: 0.5rem; }
.gallery-masonry .gallery-items img { aspect-ratio: auto; }
.plate { display: none; }

/* --- Testimonials: plain quotes under a rule, the name below. ------------- */
.quote-list { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); margin-top: var(--space); }
.quote-list figure { margin: 0; padding-block: 1.25rem 1.5rem; border-top: var(--ink-line); }
.quote-list blockquote { margin: 0 0 0.85rem; font-size: 1.15rem; line-height: 1.5; }
.quote-list blockquote p { margin: 0; }
.quote-list figcaption { color: var(--muted); font-weight: var(--strong); font-size: var(--fs-sm); }
.testimonials-single .quote-list { grid-template-columns: minmax(0, 46rem); }
.testimonials-single .quote-list blockquote { font-size: clamp(1.3rem, 1.1rem + 1vw, 1.85rem); line-height: 1.4; }

/* --- Service area ----------------------------------------------------------- */
.area-body { max-width: 40rem; }
ul.area-list { display: flex; flex-wrap: wrap; gap: 0.25rem 0; margin-top: 1.25rem; font-size: var(--fs-lead); font-weight: 500; }
/* The separator ends a place, so a wrapped line never starts with one. */
ul.area-list li { white-space: nowrap; }
ul.area-list li:not(:last-child)::after { content: '·'; margin-inline: 0.6rem; color: var(--muted); }
.area-places { font-size: var(--fs-lead); max-width: 44rem; }

/* --- Opening hours: the sign on the door ---------------------------------- */
.hours-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hours-place { color: var(--muted); max-width: 28rem; }
.hours-place a, .hours-call a { color: var(--text); font-weight: var(--strong); white-space: nowrap; }
.hours-call { font-size: var(--fs-lead); }
.hours-card { max-width: 28rem; }
.hours-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours-table th, .hours-table td { padding: 0.7rem 0; border-bottom: 1px solid var(--border); vertical-align: baseline; }
.hours-table th { position: relative; text-align: left; font-weight: var(--strong); padding-right: 1rem; white-space: nowrap; }
.hours-table td { text-align: right; font-family: var(--font-figures); }
.hours-table .is-closed :is(th, td) { color: var(--muted); font-weight: 400; }
/* Today: <html data-today> is set by the live site's todayScript. Every row
   reserves the badge's room (hidden), so marking today moves nothing. */
.hours-table th::after {
  content: attr(data-today-label); visibility: hidden; display: inline-block; margin-left: 0.6rem; padding: 0.05rem 0.45rem;
  background: var(--text); color: var(--bg); font-size: 0.72rem; font-weight: var(--strong); letter-spacing: 0.06em; text-transform: uppercase; vertical-align: 0.12em; line-height: 1.5;
}
html[data-today="mon"] .hours-table [data-days~="mon"] th::after,
html[data-today="tue"] .hours-table [data-days~="tue"] th::after,
html[data-today="wed"] .hours-table [data-days~="wed"] th::after,
html[data-today="thu"] .hours-table [data-days~="thu"] th::after,
html[data-today="fri"] .hours-table [data-days~="fri"] th::after,
html[data-today="sat"] .hours-table [data-days~="sat"] th::after,
html[data-today="sun"] .hours-table [data-days~="sun"] th::after { visibility: visible; }
html[data-today="mon"] .hours-table [data-days~="mon"] th::before,
html[data-today="tue"] .hours-table [data-days~="tue"] th::before,
html[data-today="wed"] .hours-table [data-days~="wed"] th::before,
html[data-today="thu"] .hours-table [data-days~="thu"] th::before,
html[data-today="fri"] .hours-table [data-days~="fri"] th::before,
html[data-today="sat"] .hours-table [data-days~="sat"] th::before,
html[data-today="sun"] .hours-table [data-days~="sun"] th::before { content: ''; position: absolute; left: -0.9rem; top: 0.55rem; bottom: 0.55rem; width: 4px; background: var(--text); }

/* --- FAQ ------------------------------------------------------------------ */
.faq-items { max-width: 46rem; margin-top: var(--space); }
.faq-items details { border-bottom: 1px solid var(--border); }
.faq-items details:first-child { border-top: var(--ink-line); }
.faq-items summary { cursor: pointer; font-weight: var(--strong); min-height: 3.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; list-style: none; font-size: 1.075rem; }
.faq-items summary::-webkit-details-marker { display: none; }
.faq-items summary::after { content: '+'; flex: none; font-weight: 400; font-size: 1.4rem; line-height: 1; }
.faq-items details[open] summary::after { content: '\2212'; }
.faq-items details p { margin: 0 0 1.25rem; color: var(--muted); max-width: 42rem; }
.faq-items dt { font-weight: var(--strong); margin-top: 1.25rem; }
.faq-items dd { margin: 0.25rem 0 0; color: var(--muted); }

/* --- Call to action: a quiet ruled block, not a coloured slab. ------------ */
.cta-inner { display: flex; flex-wrap: wrap; gap: 1.25rem 3rem; align-items: end; justify-content: space-between; }
.cta-inner > div { max-width: 40rem; }
.cta-inner :is(h1, h2) { margin-bottom: 0.25em; }
.cta-inner p { margin: 0; font-size: var(--fs-lead); color: var(--muted); }
.cta-inner .btn { min-height: 52px; padding-inline: 1.6rem; }

/* --- Contact: large plain links ------------------------------------------- */
.contact-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 52rem) { .contact-form_and_details .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); } }
.contact-list { margin-top: 1.5rem; border-top: var(--ink-line); }
.contact-list li { border-bottom: 1px solid var(--border); }
.contact-link { display: grid; gap: 0.1rem; padding-block: 0.9rem; text-decoration: none; }
.contact-link:hover .contact-value { text-decoration: underline; text-decoration-thickness: 2px; }
/* An email address (EmailValue in sections.tsx): it breaks after the "@",
   inside a word only when nothing else fits, and a long one is set smaller
   whatever size the look gives its contact values. */
.contact-link[href^="mailto:"] .contact-value { overflow-wrap: break-word !important; }
.contact-link[href^="mailto:"] .contact-value[data-long] { font-size: clamp(1.15rem, 0.95rem + 1vw, 1.75rem) !important; line-height: 1.2 !important; }
.contact-label { font-size: var(--fs-sm); color: var(--muted); }
.contact-value { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1.35rem, 1.1rem + 1.1vw, 2rem); line-height: 1.15; overflow-wrap: anywhere; letter-spacing: var(--heading-tracking); }
.contact-note { font-size: var(--fs-sm); text-decoration: underline; text-underline-offset: 0.2em; }
.contact-also { display: inline-flex; align-items: center; min-height: 44px; margin-top: -0.6rem; font-size: var(--fs-sm); text-underline-offset: 0.2em; }
@media (min-width: 52rem) {
  .contact-details_only .contact-details { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); column-gap: clamp(2rem, 5vw, 4rem); align-items: start; }
  .contact-details_only .contact-details > :not(.contact-list) { grid-column: 1; }
  .contact-details_only .contact-list { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
}

/* --- Forms (contact form, request form, booking) ------------------------- */
:where(.site form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) {
  font: inherit; color: var(--text); background: var(--bg); width: 100%;
  border: 1.5px solid var(--muted); border-radius: var(--radius); padding: 0.65rem 0.8rem; min-height: 48px;
}
:where(.site form) :is(input, textarea, select):focus-visible { outline: 3px solid var(--text); outline-offset: 1px; border-color: var(--text); }
:where(.site form) textarea { min-height: 8rem; resize: vertical; }
:where(.site form) label, :where(.site form) legend { font-weight: var(--strong); }
.contact-form, .request-form { display: grid; border-top: 3px solid var(--text); padding-top: 1.5rem; }
.contact-form { gap: 0.4rem; }
.contact-form label { margin-top: 0.6rem; }
.contact-form label:first-of-type { margin-top: 0; }
.form-note { font-size: 0.9em; color: var(--muted); margin: 0.75rem 0; }
.contact-form .btn, .request-form .btn { justify-self: start; min-height: 52px; padding-inline: 1.6rem; }
@media (max-width: 40rem) { .contact-form .btn, .request-form .btn { justify-self: stretch; } }
/* Shown only when the URL fragment names it (redirect after sending; no JS). */
.form-notice { display: none; margin: 0 0 0.5rem; padding: 0.75rem 1rem; background: var(--surface); border-left: 4px solid var(--text); scroll-margin-top: 6rem; }
.form-notice:target { display: block; }
.form-notice-error { border-left-color: #b42318; }

/* Request form (database tier): the intro beside the form on wide screens. */
.request-inner { display: grid; gap: 0 clamp(2rem, 5vw, 4rem); align-content: start; }
@media (min-width: 52rem) {
  .request-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .request-inner > :not(form) { grid-column: 1; }
  .request-inner > form { grid-column: 2; grid-row: 1 / span 3; }
}
.request-form { gap: 1rem; }
.request-form .field { display: grid; gap: 0.35rem; }
.request-form .opt { font-weight: 400; color: var(--muted); }
.request-form fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.request-form .field-group { display: grid; gap: 0.45rem; }
.request-form .field-check { display: flex; align-items: center; gap: 0.6rem; min-height: 44px; }
.request-form .field-check input { width: 1.25rem; height: 1.25rem; margin: 0; flex: none; accent-color: var(--text); }
.request-form .field-check label { font-weight: 400; }
.request-form .field-check .field-help { flex-basis: 100%; }
.request-form .field-help { margin: 0; font-size: 0.9em; color: var(--muted); }
.request-form .address-row { display: grid; gap: 0.6rem; }
@media (min-width: 30rem) { .request-form .address-row { grid-template-columns: 1fr 2fr; } }
.request-form .address-row > div { display: grid; gap: 0.35rem; }
.request-step { display: grid; gap: 1rem; }
.request-step + .request-step { border-top: 1px solid var(--border); padding-top: 1.5rem; }
.request-step > legend { font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking); font-size: calc(1.3rem * var(--heading-scale)); margin-bottom: 0.5rem; }

/* Bookings (section, flow page, manage page): ruled rows, not cards. */
.booking-inner { max-width: 46rem; }
/* The section keeps the page's left edge; only its list is narrow. */
.s-booking .booking-inner { max-width: var(--wrap); }
.s-booking .booking-inner > * { max-width: 46rem; }
.booking-services { list-style: none; margin: 1.25rem 0 0; padding: 0; border-top: var(--ink-line); }
.booking-services li { border-bottom: 1px solid var(--border); }
.booking-services a { display: grid; grid-template-columns: 1fr auto; gap: 0.1rem 1rem; align-items: center; min-height: 44px; padding: 0.85rem 0; color: var(--text); text-decoration: none; }
.booking-services a:hover .booking-name { text-decoration: underline; }
.booking-services a[aria-current] .booking-name, .booking-choices a[aria-current] { font-weight: 700; }
.booking-services a[aria-current] { box-shadow: inset 4px 0 0 var(--text); padding-left: 1rem; }
.booking-name { font-weight: var(--strong); }
.booking-meta { grid-column: 1; font-size: 0.9em; color: var(--muted); font-family: var(--font-figures); }
.booking-go { grid-column: 2; grid-row: 1 / span 2; color: var(--text); font-weight: var(--strong); white-space: nowrap; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.booking-compact .booking-go { grid-row: 1; }
.booking-step { margin-top: 1.75rem; }
.booking-step h2, .booking-form h2 { font-size: calc(1.25rem * var(--heading-scale)); }
.booking-choices { list-style: none; margin: 0.5rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr)); gap: 0.4rem; }
.booking-choices a { display: flex; align-items: center; justify-content: center; text-align: center; min-height: 44px; padding: 0.5rem; border: 1px solid var(--muted); border-radius: var(--radius); background: var(--bg); color: var(--text); text-decoration: none; font-family: var(--font-figures); font-variant-numeric: tabular-nums; }
.booking-choices a:hover { border-color: var(--text); }
.booking-choices a[aria-current] { border: 2px solid var(--text); background: var(--surface); }
.booking-form { margin-top: 1.75rem; }
.booking-summary { margin: 0; }
/* Shown on render (the booking pages are dynamic, no fragment needed). */
.booking-notice { display: block; }
.booking-details { display: grid; gap: 0.5rem; margin: 1rem 0; }
.booking-details dt { font-weight: 600; font-size: 0.9em; color: var(--muted); }
.booking-details dd { margin: 0; }
.booking-cancel { display: grid; gap: 0.5rem; justify-items: start; margin: 1rem 0; }

/* --- Legal pages (privacy): readable prose in the site's own look. ------- */
.legal { max-width: 44rem; padding-block: clamp(2.5rem, 7vw, 5rem); }
.legal-back { font-size: var(--fs-sm); margin-bottom: 2rem; }
.legal-back a { color: var(--muted); }
.legal h1 { font-size: var(--fs-h2); margin-bottom: 0.6em; }
.legal h2 { font-size: calc(var(--fs-h3) * 1.15); margin: 2em 0 0.6em; }
.legal ul { list-style: disc; padding-left: 1.25rem; }
.legal li { margin-bottom: 0.75em; }
.legal li::marker { color: var(--muted); }

/* --- Footer ----------------------------------------------------------------- */
.site-footer { padding-block: clamp(2.75rem, 6vw, 4rem) 0; font-size: 0.95rem; }
.footer-inner { display: grid; gap: 2rem 3rem; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); }
@media (min-width: 52rem) { .footer-inner { grid-template-columns: 1.6fr repeat(auto-fit, minmax(10rem, 1fr)); } }
.footer-inner p { margin: 0 0 0.35rem; color: var(--muted); }
.footer-brand .footer-name {
  margin-bottom: 0.75rem; color: var(--text);
  font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking);
  font-size: calc(1.45rem * var(--heading-scale)); line-height: 1.15;
}
.footer-title { font-size: var(--fs-sm); font-weight: var(--strong); }
.footer-col ul { display: grid; gap: 0.1rem; }
.footer-col a { display: inline-block; padding-block: 0.3rem; text-decoration: none; overflow-wrap: anywhere; }
.footer-col a:hover { text-decoration: underline; }
.footer-bottom { margin-top: clamp(2rem, 5vw, 3rem); padding-block: 1.1rem; border-top: 1px solid var(--border); }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.25rem 1.5rem; font-size: 0.875rem; }
.footer-links a { display: inline-block; padding-block: 0.4rem; }
.credit, .footer-links .report { color: var(--muted); }

/* Phones: the two quickest ways to reach the business, in thumb reach.
   Sticky as the last child of .site: it sticks to the bottom while scrolling
   and rests after the footer at the end, so it never covers content. Each
   look restyles it in its own material. */
.quickbar { display: none; }
@media (max-width: 51.99rem) {
  .quickbar {
    display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
    position: sticky; z-index: 40; bottom: 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--deep); border-top: 1px solid var(--deep);
  }
  .quick {
    display: flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.5rem;
    color: var(--on-deep); font-weight: var(--strong); text-decoration: none; text-align: center; line-height: 1.15;
  }
  .quick + .quick { border-left: 1px solid color-mix(in srgb, var(--on-deep) 25%, transparent); }
  .quick-primary { background: var(--primary); color: var(--on-primary); }
  .quick:focus-visible { outline-color: var(--on-deep); outline-offset: -4px; }
}

/* ===========================================================================
   The trades. Each block draws one artefact; everything else stays quiet.
   =========================================================================== */

/* --- Garage: the werkorder and the kenteken plate ------------------------ */
/* The name on a Dutch number plate: yellow, black rim, blue EU band. */
.plate { display: inline-flex; align-items: stretch; background: var(--plate); color: var(--on-plate); border: 2px solid #111; border-radius: 5px; box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px #111; overflow: hidden; }
.plate-eu { display: flex; align-items: flex-end; justify-content: center; min-width: 1.7em; padding: 0.3em 0.3em 0.35em; background: var(--eu); color: var(--on-eu); font-family: var(--font-body); font-size: 0.55em; font-weight: 600; letter-spacing: 0.02em; }
.plate .brand-name { padding: 0.3em 0.65em 0.22em; line-height: 1.05; }

/* --- Installateur: the installation drawing ------------------------------ */
/* The sheet: a frame line, a margin with zone marks, the drawing border. */
/* The sheet keeps the page's width: the margin with the zone marks takes
   1.75rem on the left and top, so the drawing border shifts right by half. */
.zones { position: absolute; inset: -1.75rem 0 0 -1.75rem; pointer-events: none; font-family: var(--font-figures); font-size: 0.68rem; color: var(--muted); }
.zones-x { position: absolute; left: 1.75rem; right: 0; top: 0; height: 1.75rem; display: flex; }
.zones-x span { flex: 1; display: grid; place-items: center; border-left: 1px solid var(--text); }
.zones-y { position: absolute; top: 1.75rem; bottom: 0; left: 0; width: 1.75rem; display: flex; flex-direction: column; }
.zones-y span { flex: 1; display: grid; place-items: center; border-top: 1px solid var(--text); }
.zones-x span:first-child { border-left: 0; }
.zones-y span:first-child { border-top: 0; }
/* The margin strips close at their far ends, as on a printed sheet. */
.zones-x span:last-child { border-right: 1px solid var(--text); }
.zones-y span:last-child { border-bottom: 1px solid var(--text); }
/* The photo's own description as a callout with a leader line. */
.callout { position: relative; margin: 0.9rem 0 0 2.6rem; font-family: var(--font-figures); font-size: 0.78rem; line-height: 1.4; color: var(--muted); max-width: 26rem; }
.callout::before { content: ''; position: absolute; left: -2.4rem; top: -1.9rem; width: 1.4rem; height: 2.6rem; border-left: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.callout::after { content: ''; position: absolute; left: -2.62rem; top: -2.1rem; width: 7px; height: 7px; border-radius: 50%; background: var(--text); }
/* NEN 3050 legend: three pipe runs with their colour and code. */
.pipes { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; font-family: var(--font-figures); font-size: 0.75rem; color: var(--muted); }
.pipes figcaption { margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.08em; }
.pipes ul { display: grid; gap: 0.55rem; }
.pipe { display: grid; grid-template-columns: minmax(0, 1fr) 11rem; align-items: center; gap: 1rem; }
.pipe::before { content: ''; height: 7px; grid-column: 1; grid-row: 1; }
.pipe > span:first-child { grid-column: 2; grid-row: 1; color: var(--text); }
.pipe-code { grid-column: 2; grid-row: 1; justify-self: end; }
.pipe-water::before { background: var(--pipe-water); }
.pipe-gas::before { background: var(--pipe-gas); }
.pipe-power::before { height: 0; border-top: 2px dashed var(--text); }
/* Services: a spec sheet. */
/* Footer: the drawing's title block, a grid of boxed fields. */

/* --- Aannemer: the bouwbord ------------------------------------------------ */
.hero-board { padding: 0; background: var(--surface); }
.hero-board .hero-inner { display: block; position: relative; z-index: 1; padding-top: clamp(2.5rem, 6vw, 4rem); }
.hero-board:has(.hero-media) .hero-media { position: absolute; inset: 0 0 auto 0; height: clamp(16rem, 52vw, 24rem); }
.hero-board:has(.hero-media) .hero-img { width: 100%; height: 100%; aspect-ratio: auto; }
.hero-board:has(.hero-media) .hero-inner { padding-top: clamp(12rem, 42vw, 18rem); }
@media (min-width: 52rem) {
  .hero-board:has(.hero-media) .hero-media { inset: 0; height: auto; }
  .hero-board:has(.hero-media) .hero-inner { padding-top: clamp(4rem, calc(10 * var(--raam-vh)), 7rem); min-height: clamp(36rem, calc(86 * var(--raam-vh)), 50rem); display: flex; align-items: flex-end; }
}
.bouwbord { width: min(100%, 40rem); }
.board-panel { --text: var(--on-board); --muted: var(--board-muted); background: var(--board); color: var(--on-board); border: 3px solid var(--on-board); }
.board-band { background: var(--primary); color: var(--on-primary); padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.75rem); border-bottom: 3px solid var(--on-board); }
.board-band :is(h1, h2) { margin: 0; font-size: clamp(2rem, 1.4rem + 2.8vw, 3.5rem); line-height: 0.98; max-width: none; color: inherit; }
.board-lead { margin: 0; padding: 1rem clamp(1rem, 3vw, 1.75rem); font-size: var(--fs-lead); line-height: 1.45; border-bottom: 2px solid var(--on-board); }
.board-fields { margin: 0; }
.board-fields > div { display: grid; grid-template-columns: minmax(7.5rem, 0.42fr) minmax(0, 1fr); border-bottom: 1px solid var(--on-board); }
.board-fields dt { padding: 0.6rem clamp(1rem, 3vw, 1.75rem); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); border-right: 1px solid var(--on-board); align-self: stretch; }
.board-fields dd { margin: 0; padding: 0.55rem 1rem; font-weight: 800; font-size: 1.05rem; line-height: 1.3; }
.board-fields a { text-decoration: none; }
.board-panel .actions { margin: 0; padding: 1rem clamp(1rem, 3vw, 1.75rem) 1.2rem; }
.board-posts { display: block; height: clamp(2.5rem, calc(9 * var(--raam-vh)), 5.5rem); background: linear-gradient(90deg, transparent 14%, var(--post) 14% 17.5%, transparent 17.5% 82.5%, var(--post) 82.5% 86%, transparent 86%); }
@media (max-width: 51.99rem) { .board-posts { height: 1.75rem; } }


/* The stake: outline colour cut to shape, the label's white inset by 1px. */
.stake { position: relative; flex: none; width: 2.6rem; height: 4.75rem; margin-top: -1px; background: #c3cab8; clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }
.stake::before { content: ''; position: absolute; inset: 0 1px 2px; background: var(--label); clip-path: polygon(0 0, 100% 0, 100% 72%, 50% 100%, 0 72%); }

/* --- Beauty: the treatment price card and the appointment card ------------ */
/* The appointment card: printed name, blank date and time lines. */
.cta-card { background: var(--surface); }
.cta-card .cta-inner { display: block; }
.appt-card { --text: var(--on-card); --muted: var(--card-muted); color: var(--on-card); background: var(--card); border: 1px solid var(--border); width: min(100%, 30rem); padding: clamp(1.4rem, 4vw, 2.2rem); }
.appt-name { margin: 0; font-family: var(--font-heading); font-size: 1.6rem; line-height: 1.1; }
.appt-meta { margin: 0.3rem 0 1.4rem; font-size: 0.82rem; color: var(--muted); padding-bottom: 1rem; border-bottom: 1px solid var(--border); }
.appt-meta span { display: block; }
.appt-card :is(h1, h2) { font-size: calc(1.6rem * var(--heading-scale)); margin-bottom: 0.3em; }
.appt-card > p:not(.appt-name):not(.appt-meta) { color: var(--muted); }
.appt-lines { display: grid; gap: 1rem; margin: 1.25rem 0 1.5rem; font-size: 0.8rem; color: var(--muted); }
.appt-lines span { display: flex; gap: 0.75rem; align-items: baseline; }
.appt-lines span::after { content: ''; flex: 1; border-bottom: 1px solid var(--text); }

/* ===========================================================================
   The next eight trades (docs/design-direction.md, "Next templates"). Same
   rule: one artefact per trade, everything around it quiet.
   =========================================================================== */

/* Shared: a fourth heading level (inside the roofer's columns), the minutes
   of a treatment, a quiet list label. */
:where(.site) h4, :where(.site) .h4 { font-family: var(--font-heading); font-weight: var(--heading-weight); text-transform: var(--heading-case); letter-spacing: var(--heading-tracking); font-size: calc(var(--fs-h3) * 0.94); line-height: 1.2; margin: 0; }
.minutes { font-family: var(--font-figures); font-size: 0.92em; color: var(--muted); white-space: nowrap; }
.list-label { margin: 1.75rem 0 0; font-weight: var(--strong); }
.sample { display: none; }

/* --- Boekhouder: the aangifte calendar and the ledger --------------------- */
.deadlines { margin: clamp(2.25rem, 5vw, 3.5rem) 0 0; padding: 1.1rem 0 clamp(2rem, 4.5vw, 3rem); border-top: 2px solid var(--on-sheet); }
.deadlines figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1.25rem; margin-bottom: 1.1rem; }
.deadlines-title { font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.deadlines-note { color: var(--muted); font-size: 0.92rem; }
.deadline-months { display: none; }
.deadline-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--on-sheet); }
.deadline { position: relative; display: grid; grid-template-columns: minmax(8.5rem, 0.6fr) minmax(0, 1.4fr); gap: 0.1rem 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--ruling); }
.deadline-date { font-family: var(--font-figures); font-size: 0.92rem; font-weight: 500; color: var(--deadline); font-variant-numeric: tabular-nums; }
.deadline-what { font-weight: 500; }
/* The next deadline: <html data-deadline> is set by todayScript (live site,
   gallery preview). Every item reserves the tab's room, so nothing moves. */
.deadline::after {
  content: attr(data-next-label); visibility: hidden; justify-self: start; grid-column: 2;
  background: var(--deadline); color: var(--on-deadline); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; padding: 0.1rem 0.45rem; line-height: 1.5;
}
html[data-deadline="d1"] .deadline[data-key="d1"]::after,
html[data-deadline="d2"] .deadline[data-key="d2"]::after,
html[data-deadline="d3"] .deadline[data-key="d3"]::after,
html[data-deadline="d4"] .deadline[data-key="d4"]::after,
html[data-deadline="d5"] .deadline[data-key="d5"]::after,
html[data-deadline="d6"] .deadline[data-key="d6"]::after,
html[data-deadline="d7"] .deadline[data-key="d7"]::after,
html[data-deadline="d8"] .deadline[data-key="d8"]::after { visibility: visible; }
html[data-deadline="d1"] .deadline[data-key="d1"],
html[data-deadline="d2"] .deadline[data-key="d2"],
html[data-deadline="d3"] .deadline[data-key="d3"],
html[data-deadline="d4"] .deadline[data-key="d4"],
html[data-deadline="d5"] .deadline[data-key="d5"],
html[data-deadline="d6"] .deadline[data-key="d6"],
html[data-deadline="d7"] .deadline[data-key="d7"],
html[data-deadline="d8"] .deadline[data-key="d8"] { box-shadow: inset 4px 0 0 var(--deadline); padding-left: 0.9rem; }
@media (min-width: 52rem) {
  /* The year as a ruler of twelve months: VAT on one lane, the other
     returns on the next (--lane, set per item); each rule stands on its day. */
  .deadline-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0; font-family: var(--font-figures); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); border-bottom: 2px solid var(--on-sheet); }
  .deadline-months span { padding: 0.3rem 0.5rem; border-left: 1px solid var(--ruling); }
  .deadline-months span:first-child { border-left-color: var(--on-sheet); }
  .deadline-list { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); border-top: 0; background: linear-gradient(90deg, var(--ruling) 1px, transparent 1px) 0 0 / calc(100% / 12) 100%; }
  .deadline { grid-column: var(--from) / var(--to); grid-row: var(--lane, 1); display: flex; flex-direction: column; align-items: flex-start; gap: 0.15rem; border-bottom: 0; border-left: 2px solid var(--deadline); margin-left: -1px; padding: 0.75rem 0.5rem 0.9rem 0.7rem; min-width: 0; }
  /* A deadline at a month's end: the rule on the right, the caption ending
     at it, so "31 januari" reads under JAN, not FEB. */
  .deadline-by { align-items: flex-end; text-align: right; border-left: 0; border-right: 2px solid var(--deadline); margin: 0 -1px 0 0; padding: 0.75rem 0.7rem 0.9rem 0.5rem; }
  /* The caption on paper, so the month lines don't run through the words. */
  .deadline > span { background: var(--bg); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding-inline: 0.15rem; }
  .deadline::after { margin-top: 0.35rem; }
  html[data-deadline] .deadline-from { padding-left: 0.7rem; }
  html[data-deadline="d1"] .deadline[data-key="d1"],
  html[data-deadline="d2"] .deadline[data-key="d2"],
  html[data-deadline="d3"] .deadline[data-key="d3"],
  html[data-deadline="d4"] .deadline[data-key="d4"],
  html[data-deadline="d5"] .deadline[data-key="d5"],
  html[data-deadline="d6"] .deadline[data-key="d6"],
  html[data-deadline="d7"] .deadline[data-key="d7"],
  html[data-deadline="d8"] .deadline[data-key="d8"] { box-shadow: none; }
  html[data-deadline="d1"] .deadline-from[data-key="d1"],
  html[data-deadline="d2"] .deadline-from[data-key="d2"],
  html[data-deadline="d3"] .deadline-from[data-key="d3"],
  html[data-deadline="d4"] .deadline-from[data-key="d4"],
  html[data-deadline="d5"] .deadline-from[data-key="d5"],
  html[data-deadline="d6"] .deadline-from[data-key="d6"],
  html[data-deadline="d7"] .deadline-from[data-key="d7"],
  html[data-deadline="d8"] .deadline-from[data-key="d8"] { border-left-width: 5px; margin-left: -2px; padding-left: 0.6rem; }
  html[data-deadline="d1"] .deadline-by[data-key="d1"],
  html[data-deadline="d2"] .deadline-by[data-key="d2"],
  html[data-deadline="d3"] .deadline-by[data-key="d3"],
  html[data-deadline="d4"] .deadline-by[data-key="d4"],
  html[data-deadline="d5"] .deadline-by[data-key="d5"],
  html[data-deadline="d6"] .deadline-by[data-key="d6"],
  html[data-deadline="d7"] .deadline-by[data-key="d7"],
  html[data-deadline="d8"] .deadline-by[data-key="d8"] { border-right-width: 5px; margin-right: -2px; padding-right: 0.6rem; }
}

/* --- Rijschool: the dakbord over the road ---------------------------------- */
.site[data-look="drivingschool"] .site-header { border-bottom: 3px solid var(--text); }
.site[data-look="drivingschool"] .hero-image_full:not(.hero-board):has(.hero-media) .hero-inner { padding-top: clamp(13rem, calc(36 * var(--raam-vh)), 20rem); }
@media (max-width: 51.99rem) { .site[data-look="drivingschool"] .hero-image_full:not(.hero-board):has(.hero-media) .hero-inner { padding-top: clamp(9rem, calc(24 * var(--raam-vh)), 13rem); } }
.site[data-look="drivingschool"] .hero-image_full:not(.hero-board):has(.hero-media) .hero-text,
.site[data-look="drivingschool"] .hero-centered .hero-text {
  --bg: var(--asphalt); --text: var(--on-asphalt); --muted: var(--asphalt-muted);
  background: var(--asphalt); color: var(--on-asphalt); position: relative;
  border-top: 4px solid var(--asphalt);
  /* The lane line: yellow dashes along the top edge of the road. */
  background-image: linear-gradient(90deg, var(--lane) 0 2.25rem, transparent 2.25rem 3.75rem);
  background-size: 3.75rem 4px; background-repeat: repeat-x; background-position: 0 0.9rem;
  padding-top: clamp(2.5rem, 5vw, 3.25rem);
}
.site[data-look="drivingschool"] .hero-text .lead { color: var(--asphalt-muted); }
.site[data-look="drivingschool"] .hero-text .cta-alt { color: var(--on-asphalt); }
.site[data-look="drivingschool"] .hero-text :is(h1, h2) { font-size: calc(var(--fs-h1) * 0.92); }
/* The roof sign: a white panel with sloped ends, a band in the school's
   colour with the number, two magnet feet. */
.dakbord { display: grid; justify-items: center; width: fit-content; max-width: 100%; margin: calc(-1 * clamp(5.75rem, 11vw, 7.75rem)) 0 clamp(1.5rem, 3vw, 2rem); }
.dakbord-name {
  margin: 0; background: var(--sign); color: var(--on-sign); text-align: center;
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1;
  font-size: clamp(1.3rem, 0.95rem + 1.7vw, 2.1rem); padding: 0.7rem clamp(1.6rem, 4vw, 2.6rem) 0.55rem;
  border-top: 5px solid var(--primary);
  clip-path: polygon(clamp(0.9rem, 2.2vw, 1.4rem) 0, calc(100% - clamp(0.9rem, 2.2vw, 1.4rem)) 0, 100% 100%, 0 100%);
  overflow-wrap: anywhere;
}
.dakbord-band { margin: 0; width: 100%; background: var(--primary); color: var(--on-primary); text-align: center; padding: 0.25rem 1rem 0.3rem; font-family: var(--font-figures); font-weight: 700; font-size: 1.05rem; letter-spacing: 0.04em; }
.dakbord-band a { color: inherit; text-decoration: none; }
.dakbord-feet { display: block; width: 100%; height: 6px; background: linear-gradient(90deg, transparent 12%, #111 12% 24%, transparent 24% 76%, #111 76% 88%, transparent 88%); }
/* Lespakketten: a table to compare, the exams under a red rule. */
.lessons { width: 100%; border-collapse: collapse; margin-top: var(--space); font-variant-numeric: tabular-nums; }
.lessons thead th { text-align: right; padding: 0.55rem 0.75rem; background: var(--asphalt); color: var(--on-asphalt); font-family: var(--font-heading); font-weight: 800; font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.lessons thead th:first-child { text-align: left; }
.lessons tr { border-bottom: 1px solid var(--border); }
.lessons tbody th { text-align: left; font-weight: inherit; padding: 0.85rem 0.75rem; vertical-align: top; }
.lessons td { text-align: right; padding: 0.85rem 0.75rem; vertical-align: top; font-family: var(--font-figures); font-size: 1.15rem; white-space: nowrap; }
.lessons td.price { font-weight: 700; }
.lesson-name { margin: 0; font-size: 1.15rem; }
.lessons .service-note { margin: 0.2rem 0 0; font-size: 0.95rem; }
.lessons-divider th { padding: 1.4rem 0.75rem 0.4rem !important; border-bottom: 3px solid var(--exam); color: var(--exam); font-family: var(--font-heading); font-weight: 800 !important; font-size: 0.8rem; letter-spacing: 0.06em; text-transform: uppercase; }
@media (max-width: 40rem) {
  .lessons thead th, .lessons tbody th, .lessons td { padding-inline: 0.4rem; }
  .lessons td { font-size: 1rem; }
  .lesson-name { font-size: 1.02rem; }
}
@media (max-width: 24rem) {
  .lessons thead th, .lessons tbody th, .lessons td { padding-inline: 0.3rem; }
  .lessons thead th { font-size: 0.7rem; letter-spacing: 0.02em; }
  .lessons td { font-size: 0.95rem; }
}
/* The places where lessons start, as blue town signs. */
.site[data-look="drivingschool"] ul.area-list { gap: 0.5rem; }
.site[data-look="drivingschool"] ul.area-list li { background: var(--kombord); color: var(--on-kombord); border: 2px solid var(--kombord); box-shadow: inset 0 0 0 2px var(--on-kombord); border-radius: 4px; padding: 0.3rem 0.85rem; font-family: var(--font-heading); font-weight: 800; }
.site[data-look="drivingschool"] ul.area-list li::after { content: none !important; }

/* --- Dakdekker: the roofline and the two roofs ------------------------------ */
.roofline { display: block; width: 100%; height: clamp(2.25rem, 6vw, 5rem); overflow: visible; }
.roofline-stroke { stroke: var(--text); stroke-width: 3px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.roofline-sky { fill: none; }
.roofline-hero { position: absolute; top: -1px; left: 0; z-index: 2; height: clamp(3rem, 10vw, 8rem); }
.roofline-hero .roofline-sky { fill: var(--bg); }
.roof-cols { display: grid; gap: 2.5rem clamp(2rem, 5vw, 4rem); }
@media (min-width: 52rem) { .roof-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.roof-col > :is(h2, h3) { margin: 0.75rem 0 0; font-size: calc(var(--fs-h2) * 0.85); }
.roof-col .service-list, .roof-any .service-list { margin-top: 0.75rem; border-top-width: 3px; }
.roof-col .service :is(h3, h4), .roof-any .service :is(h2, h3, h4) { font-family: var(--font-body); text-transform: none; letter-spacing: 0; font-weight: 650; font-size: 1.12rem; }
.roof-section { margin: 1rem 0 0; }
.roof-section svg { display: block; width: 100%; max-width: 25rem; height: auto; }
.roof-lines :is(rect, path) { fill: none; stroke: var(--text); stroke-width: 1.2; }
.roof-lines .roof-cover { stroke-width: 2.4; }
.roof-lines .roof-insulation { fill: color-mix(in srgb, var(--zinc) 55%, transparent); stroke-width: 1; }
.roof-lines .roof-thin { stroke: var(--text); stroke-width: 1; }
.roof-leader { stroke: var(--lead); stroke-width: 0.8; }
.roof-section text { font-family: var(--font-body); font-size: 11.5px; fill: var(--muted); }
.roof-any { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.roof-any > :is(h2, h3) { margin: 0; font-size: calc(var(--fs-h2) * 0.85); }

/* --- Klusjesman: the duimstok and the klussenlijst --------------------------- */
.duimstok {
  --cm: 0.6rem; position: relative; margin-top: clamp(2.25rem, 5vw, 3.5rem);
  background: var(--rule); color: var(--on-rule); border-block: 2px solid var(--on-rule); padding-top: 2.7rem; overflow: hidden;
}
.duimstok-scale {
  position: absolute; left: 0; right: 0; top: 0; height: 2.6rem;
  background-image: linear-gradient(90deg, var(--on-rule) 1px, transparent 1px), linear-gradient(90deg, var(--on-rule) 1px, transparent 1px);
  background-size: var(--cm) 0.55rem, calc(var(--cm) * 5) 0.95rem; background-repeat: repeat-x;
}
.duimstok-scale .cm { position: absolute; top: 0; left: calc(var(--at) * var(--cm)); transform: translateX(-50%); padding-top: 1.35rem; font-family: var(--font-heading); font-weight: 700; font-size: 0.82rem; line-height: 1; }
.duimstok-scale .cm::before { content: ''; position: absolute; top: 0; left: 50%; width: 2px; height: 1.2rem; margin-left: -1px; background: var(--mark); }
.duimstok-print { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0 1.5rem; padding-bottom: 0.55rem; }
.duimstok-name { margin: 0; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.25rem, 0.95rem + 1.4vw, 1.9rem); line-height: 1.15; }
.duimstok-phone { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.25rem, 0.95rem + 1.4vw, 1.9rem); text-decoration: none; letter-spacing: 0.02em; white-space: nowrap; }
.site[data-look="handyman"] .s-hero { padding-bottom: 0; }
.site[data-look="handyman"] .hero-img { border: 2px solid var(--text); }
/* The klussenlijst: squared paper with a red margin line. */
.site[data-look="handyman"] .s-services .sheet {
  --text: var(--on-paper); --muted: var(--paper-muted); --border: transparent; color: var(--on-paper);
  position: relative; max-width: 54rem; background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 1.5rem 1.5rem; background-position: -1px -1px; border: 1px solid var(--grid);
  padding: 1.5rem clamp(1rem, 4vw, 2.5rem) 1.5rem clamp(2.75rem, 8vw, 5rem);
}
.site[data-look="handyman"] .s-services .sheet::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(1.9rem, 5.5vw, 3.6rem); border-left: 2px solid var(--mark); }
.site[data-look="handyman"] .sheet-head > :is(h1, h2) { font-family: var(--font-hand); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(2.1rem, 1.5rem + 2.2vw, 3rem); line-height: 1; margin-bottom: 0.25em; }
.site[data-look="handyman"] .service-list { border-top: 0; margin-top: 1.5rem; }
.site[data-look="handyman"] .service { padding: 0.45rem 0 0.6rem; border-bottom: 1.5px solid color-mix(in srgb, var(--on-paper) 70%, transparent); }
.site[data-look="handyman"] .service:last-child { border-bottom: 0; }
.site[data-look="handyman"] .service :is(h2, h3) { font-family: var(--font-body); font-weight: 650; font-size: 1.15rem; text-transform: none; }
.site[data-look="handyman"] .price { font-size: 1.15rem; }
.site[data-look="handyman"] .price-row .leader { border-bottom: 2px dotted color-mix(in srgb, var(--on-paper) 45%, transparent); align-self: end; margin-bottom: 0.4em; }
.site[data-look="handyman"] .hand-note { margin-top: 1.25rem; font-family: var(--font-hand); font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.7rem); line-height: 1.2; color: var(--on-paper); }
.site[data-look="handyman"] .hand-note a { text-decoration-thickness: 2px; text-underline-offset: 0.18em; white-space: nowrap; }
.site[data-look="handyman"] ul.area-list li:not(:last-child)::after { content: '/'; }
.site[data-look="handyman"] :is(.contact-form, .request-form) { border-top: 4px solid var(--rule); }

/* --- Taxi: the plate and the ritbon ------------------------------------------- */
.taxi-plate {
  display: inline-flex; align-items: stretch; margin: 1.5rem 0 0; text-decoration: none;
  background: var(--plate); color: var(--on-plate); border: 2px solid #0b1430; border-radius: 6px;
  box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px var(--on-plate); overflow: hidden;
}
.taxi-plate .plate-eu { display: flex; align-items: flex-end; justify-content: center; min-width: 1.9rem; padding: 0.3rem 0.3rem 0.4rem; background: #0b1f52; color: #ffffff; font-family: var(--font-body); font-size: 0.72rem; font-weight: 700; }
.taxi-plate .plate-number { padding: 0.35rem 0.95rem 0.3rem; font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.06em; font-size: clamp(1.6rem, 1.15rem + 2vw, 2.5rem); line-height: 1.1; white-space: nowrap; }
.taxi-plate:hover .plate-number { text-decoration: underline; text-decoration-thickness: 2px; }
.taxi-plate + .actions { margin-top: 1rem; }
.site[data-look="taxi"] .s-hero h1 { letter-spacing: -0.03em; }
.site[data-look="taxi"] .hero-img { background: var(--night); }
/* The rides on a ritbon, on the night band. */
.site[data-look="taxi"] .s-services { --text: var(--on-night); --muted: var(--night-muted); --border: color-mix(in srgb, var(--on-night) 22%, transparent); background: var(--night); color: var(--on-night); }
.site[data-look="taxi"] main > .s-services + .s, .site[data-look="taxi"] main > .s + .s-services { border-top: 0; }
.site[data-look="taxi"] .s-services .sheet { display: grid; gap: 2rem clamp(2rem, 6vw, 5rem); }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .s-services .sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); align-items: center; }
  .site[data-look="taxi"] .s-services .ritbon { grid-column: 2; grid-row: 1 / span 2; }
  /* The heading beside the middle of the receipt, not alone at the top of an empty half. */
  .site[data-look="taxi"] .s-services .sheet-head { grid-column: 1; grid-row: 1 / span 2; align-self: center; }
  .site[data-look="taxi"] .s-services .sheet-head :is(h1, h2) { font-size: calc(var(--fs-h2) * 1.3); }
}
.ritbon {
  --text: var(--on-receipt); --muted: var(--receipt-muted); --border: transparent; --zz: 7px;
  width: 100%; max-width: 30rem; background: var(--receipt); color: var(--on-receipt); font-family: var(--font-figures);
  padding: 1.6rem clamp(1rem, 4vw, 1.4rem) 1.8rem;
  -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
  mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / calc(2 * var(--zz)) 51% repeat-x, conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / calc(2 * var(--zz)) 51% repeat-x;
}
.ritbon-head { text-align: center; text-transform: uppercase; font-size: 0.88rem; line-height: 1.45; padding-bottom: 0.8rem; border-bottom: 1px dashed var(--on-receipt); }
.ritbon-head p { margin: 0; }
.ritbon-name { font-size: 1.12rem; letter-spacing: 0.08em; margin-bottom: 0.2rem !important; }
.ritbon .service-list { border-top: 0; margin-top: 0.6rem; }
.ritbon .service { border: 0; padding: 0.5rem 0; }
.ritbon .price-row { flex-wrap: nowrap; align-items: flex-end; align-items: last baseline; gap: 0 0.5rem; }
.ritbon .service :is(h2, h3) { font-family: var(--font-figures); font-weight: 400; font-size: 0.98rem; text-transform: uppercase; letter-spacing: 0.01em; line-height: 1.35; min-width: 0; hyphens: manual; }
/* Leaders the way the printer makes them: a row of full stops in the receipt's own type. */
.ritbon .price-row .leader { flex: 1 1 1rem; min-width: 1rem; overflow: hidden; white-space: nowrap; contain: inline-size; font-size: 0.98rem; line-height: 1.35; }
.ritbon .price-row .leader::before { content: '................................................................................................................'; letter-spacing: 0.05em; }
.ritbon .price { font-weight: 400; font-size: 0.98rem; }
.ritbon .service-note { font-size: 0.85rem; margin-top: 0.1rem; line-height: 1.4; }
.ritbon-foot { margin: 0.6rem 0 0; padding-top: 0.8rem; border-top: 1px dashed var(--on-receipt); text-align: center; text-transform: uppercase; font-size: 0.88rem; }
.ritbon-foot a { white-space: nowrap; }
.site[data-look="taxi"] .contact-list li:nth-child(-n + 2) .contact-value { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); }
.site[data-look="taxi"] .hours-table { font-size: 0.95rem; }

/* --- Pedicure: the cliëntkaart, one size up ---------------------------------- */
.foot-card { margin: 0; background: var(--chart); color: var(--on-chart); --text: var(--on-chart); --muted: var(--chart-muted); border: 1.5px solid var(--outline); padding: clamp(1rem, 3vw, 1.75rem); }
.foot-card-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.2rem 1rem; padding-bottom: 0.8rem; margin-bottom: 1rem; border-bottom: 1px solid var(--outline); }
.foot-card-name { font-family: var(--font-heading); font-weight: 600; font-size: 1.2rem; line-height: 1.2; }
.foot-card-head a { font-family: var(--font-figures); font-weight: 600; text-decoration: none; white-space: nowrap; }
.foot-chart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(10rem, 19rem) minmax(0, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); column-gap: 0.4rem; }
.foot-chart svg { grid-column: 2; grid-row: 1 / span 3; display: block; width: 100%; height: auto; overflow: visible; }
.foot :is(path, ellipse) { fill: var(--linen); stroke: var(--outline); stroke-width: 2.5; }
.foot-leader polyline { stroke: var(--care); stroke-width: 1.6; }
.foot-leader circle { fill: var(--care); }
.foot-label { grid-row: var(--row); align-self: center; margin: 0; color: var(--care); font-weight: 600; font-size: 1.05rem; line-height: 1.25; hyphens: manual; }
.foot-left { grid-column: 1; text-align: right; }
.foot-right { grid-column: 3; }
@media (max-width: 30rem) { .foot-label { font-size: 0.86rem; } .foot-chart { grid-template-columns: minmax(0, 1fr) minmax(6.5rem, 8.5rem) minmax(0, 1fr); } }
@media (max-width: 24rem) { .foot-label { font-size: 0.8rem; } .foot-chart { grid-template-columns: minmax(0, 1fr) minmax(5.5rem, 7rem) minmax(0, 1fr); } .foot-card { padding-inline: 0.75rem; } }

/* --- Trimsalon: the trimkaart and the price chart by size --------------------- */
.trimkaart { --text: var(--on-manila); --muted: var(--manila-muted); background: var(--manila); color: var(--on-manila); border: 1px solid var(--manila-line); padding: clamp(1.25rem, 4vw, 2.25rem); }
.trim-fields { margin: 0 0 1.4rem; border-top: 2px solid var(--on-manila); }
.trim-fields > div { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); align-items: baseline; gap: 0.75rem; padding: 0.35rem 0; border-bottom: 1px solid var(--manila-line); }
.trim-fields dt { font-family: var(--font-figures); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.trim-fields dd { margin: 0; font-weight: 600; }
.trim-name dd { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.2rem); line-height: 1.1; }
.trimkaart :is(h1, h2) { font-size: calc(var(--fs-h1) * 0.78); }
.trim-blank { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin: 1.25rem 0 0; font-family: var(--font-figures); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.trim-blank span { display: flex; gap: 0.6rem; align-items: baseline; }
.trim-blank span::after { content: ''; flex: 1; border-bottom: 1px solid var(--on-manila); }
.size-matrix { width: 100%; max-width: 56rem; border-collapse: collapse; margin-top: var(--space); }
.size-matrix thead th { background: var(--rinse); color: var(--on-rinse); font-family: var(--font-heading); font-weight: 700; font-size: 1.05rem; text-align: center; padding: 0.6rem 0.5rem; border: 1px solid var(--border); vertical-align: bottom; }
.size-matrix thead th:first-child { text-align: left; }
.size-kg { display: block; font-family: var(--font-figures); font-weight: 400; font-size: 0.78rem; color: var(--muted); }
.size-matrix tbody th { text-align: left; font-weight: inherit; padding: 0.8rem; border: 1px solid var(--border); vertical-align: top; }
.size-matrix td { text-align: center; padding: 0.8rem 0.5rem; border: 1px solid var(--border); font-family: var(--font-figures); font-size: 1.12rem; white-space: nowrap; vertical-align: top; }
.size-name { margin: 0; font-size: 1.12rem; }
.size-matrix .service-note { margin: 0.2rem 0 0; font-size: 0.92rem; }
@media (max-width: 40rem) {
  .size-matrix tbody th { padding: 0.6rem 0.45rem; }
  .size-matrix td { padding-inline: 0.3rem; font-size: 0.98rem; }
  .size-matrix thead th { font-size: 0.92rem; padding-inline: 0.3rem; }
  .size-name { font-size: 1rem; }
}

/* --- Stukadoor: the stalenbord -------------------------------------------- */
.sample-board { --text: var(--on-board); --muted: var(--board-muted); background: var(--board); color: var(--on-board); border: 1px solid var(--gypsum); margin-top: var(--space); padding: clamp(1rem, 3vw, 1.75rem); }
.sample-board .service-list { margin: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 1.75rem clamp(0.75rem, 2vw, 1.25rem); }

/* The quick bar in the next eight trades' material. */
@media (max-width: 51.99rem) {
  .site:is([data-look="bookkeeper"], [data-look="pedicure"], [data-look="plasterer"], [data-look="groomer"]) .quickbar { --on-deep: var(--text); background: var(--bg); border-top: 1px solid var(--border); }
  .site[data-look="bookkeeper"] .quickbar { border-top: 3px double var(--text); }
  .site[data-look="handyman"] .quickbar { --on-deep: var(--on-rule); background: var(--rule); border-top: 2px solid var(--on-rule); }
  .site[data-look="handyman"] .quick + .quick { border-left-color: var(--on-rule); }
  .site[data-look="drivingschool"] .quickbar { --on-deep: var(--on-asphalt); background: var(--asphalt); }
  .site[data-look="taxi"] .quickbar { --on-deep: var(--on-night); background: var(--night); }
}

/* --- Motion: none on load; only the reduced-motion-safe smooth scroll. ---- */
@media (prefers-reduced-motion: no-preference) {
  .site { scroll-behavior: smooth; }
}

/* --- Tuning after the first screenshots --------------------------------- */
@media (max-width: 40rem) {
  .board-fields > div { grid-template-columns: minmax(0, 1fr); }
  .board-fields dt { border-right: 0; padding-bottom: 0; }
  .board-fields dd { padding: 0.1rem clamp(1rem, 3vw, 1.75rem) 0.55rem; }
}
/* Booking on a sign or card: the card itself is narrow, on the page's left edge. */
.site:is([data-look="barber"], [data-look="beauty"]) .s-booking .booking-inner { width: min(100% - 2 * var(--gap), 46rem); margin-left: max(var(--gap), (100% - var(--wrap)) / 2); }
/* Reviews: two quotes side by side at most (three in a row reads as a
   testimonial strip). */
@media (min-width: 52rem) { .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* The quick bar in each trade's material (barber, garage, installer above). */
@media (max-width: 51.99rem) {
  .site:is([data-look="contractor"], [data-look="gardener"], [data-look="cleaner"], [data-look="beauty"], [data-look="painter"]) .quickbar { --on-deep: var(--text); background: var(--bg); }
}

/* Long business names (hyphenate.ts): headings and names break only at the
   compound joints marked with a soft hyphen, never mid-syllable
   ("Installatie-bedrijf", not "Installa-tiebedrijf"; funnel audit M5).
   :root:root outranks the looks' own hyphens rules. */
:root:root .site :is(h1, h2, .brand-name, .footer-name, .dakbord-name, .duimstok-name, .ritbon-name, .foot-card-name) { hyphens: manual; }
/* Last resort for a compound that's still wider than its column after the
   soft hyphens (e.g. "Verkeersopleidings-" in a narrow two-column about):
   break it rather than let it run out of the box (template review 2026-10-09). */
:root:root .site :is(h1, h2, h3, .brand-name, .footer-name, .dakbord-name, .duimstok-name, .ritbon-name, .foot-card-name) { overflow-wrap: break-word; }

/* Phones: section spacing capped at 3rem. The trade looks' airy desktop
   rhythm (up to 4.5rem a side) ran pages to 9–10,000 px on a phone; the
   content stays, only the gaps shrink (template review 2026-10-09). The
   theme sets --section-pad inline, so the cap needs !important. */
@media (max-width: 40rem) {
  .site { --section-pad: clamp(2.5rem, 10vw, 3rem) !important; }
}

/* Text outside the site wrapper (injected bars, noscript, error states)
   rendered in the browser's default serif; give the page a sans fallback. */
body { font-family: ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; }