:root{--raam-vh:8px}@media (max-width:47.99rem){:root{--raam-vh:8.44px}}/* GENERATED by packages/sections/scripts/build-css.mjs from base.css + looks/*.css. Do not edit. */
/* 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: "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; }

@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: "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%; }

/* --- 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; }
.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; }
.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="jan"] .deadline[data-key="jan"]::after,
html[data-deadline="apr"] .deadline[data-key="apr"]::after,
html[data-deadline="mei"] .deadline[data-key="mei"]::after,
html[data-deadline="jul"] .deadline[data-key="jul"]::after,
html[data-deadline="okt"] .deadline[data-key="okt"]::after { visibility: visible; }
html[data-deadline="jan"] .deadline[data-key="jan"],
html[data-deadline="apr"] .deadline[data-key="apr"],
html[data-deadline="mei"] .deadline[data-key="mei"],
html[data-deadline="jul"] .deadline[data-key="jul"],
html[data-deadline="okt"] .deadline[data-key="okt"] { box-shadow: inset 4px 0 0 var(--deadline); padding-left: 0.9rem; }
@media (min-width: 52rem) {
  /* The year as a ruler of twelve months: btw on one lane, the
     inkomstenbelasting on the other; each deadline's 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: 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-ib { grid-row: 2; }
  .deadline::after { margin-top: 0.35rem; }
  html[data-deadline] .deadline-from { padding-left: 0.7rem; }
  html[data-deadline="jan"] .deadline[data-key="jan"],
  html[data-deadline="apr"] .deadline[data-key="apr"],
  html[data-deadline="mei"] .deadline[data-key="mei"],
  html[data-deadline="jul"] .deadline[data-key="jul"],
  html[data-deadline="okt"] .deadline[data-key="okt"] { box-shadow: none; }
  html[data-deadline="mei"] .deadline-from[data-key="mei"] { border-left-width: 5px; margin-left: -2px; padding-left: 0.6rem; }
  html[data-deadline="jan"] .deadline-by[data-key="jan"],
  html[data-deadline="apr"] .deadline-by[data-key="apr"],
  html[data-deadline="jul"] .deadline-by[data-key="jul"],
  html[data-deadline="okt"] .deadline-by[data-key="okt"] { 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; }

/* ---- looks/barber.css ---- */
/* The barber look: everything here is scoped to .site[data-look="barber"]. Appended after base.css (bun run --filter @platform/sections css).

   A Dutch kapsalon on a street corner (looks/barber.tsx), in the spirit of the
   old Rotterdam shops: the shopfront painted grachtengroen with the name
   sign-written on the fascia (header); the big shop window with the barber at
   work behind the glass and the headline painted on it, the moulded panel
   under the window and the bluestone step (hero); inside, the felt
   letterboard with push-in letters on white glazed tiles (prices); the brick
   facade with the shop door, its hours in cut vinyl, the hanging sign and the
   enamel address plate (hours); the chair and an enamel year plaque, then one
   wide photo of the work (about); what customers say on the barber's red; the
   address on a blue enamel street sign (contact); and the granito floor with
   its brass strips under the green footer.

   Type: Alfa Slab One (OFL), the sign-writer's slab, for the display lines,
   always with the one hard 2px shade a sign-writer paints; Rubik (OFL) for
   text and as the moulded plastic letters of the board and the door vinyl. */

/* The local stand-in while the slab loads: a bold Times scaled to its width
   and line metrics (fontTools), so the hero 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%; }
@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; }

.site[data-look="barber"] {
  --bb-sign: "Alfa Slab One", "Alfa Slab One fallback", Rockwell, "Roboto Slab", Georgia, serif;
  --bb-ink: #171717;
  --bb-tile: #f4f3ef;
  --bb-tile-grout: #d6d2c9;
  /* Grachtengroen: the near-black green of Dutch shopfronts and doors. */
  --bb-green: #1d2a23;
  --bb-green-deep: #121b16;
  --bb-green-lit: #2b3b32;
  /* The sign-writer's cream and his shade. */
  --bb-cream: #f3ecda;
  --bb-cream-muted: #c9c3b2;
  --bb-shade: #0a0f0c;
  --bb-red: #b3261e;
  --bb-enamel-blue: #1d3f73;
  --bb-glass: #101615;
  --bb-brick: #7b3a2c;
  --bb-mortar: #b9b1a5;
  --bb-stone: #4d5457;
  --fs-base: clamp(1.0625rem, 1rem + 0.2vw, 1.1875rem);
  --bb-head: 5.25rem;
  /* White glazed tiles (2:1, running bond): grout lines, the glaze catching
     light on each row's top edge, a little shade at its foot. */
  --bb-tiles:
    linear-gradient(to bottom, var(--bb-tile-grout) 0 2px, rgb(255 255 255 / 0.85) 2px 4px, transparent 4px 25px, rgb(0 0 0 / 0.028) 25px 32px),
    conic-gradient(at 2px 32px, transparent 0 270deg, var(--bb-tile-grout) 0),
    conic-gradient(at 2px 32px, transparent 0 270deg, var(--bb-tile-grout) 0);
  --bb-tiles-size: 100% 32px, 64px 64px, 64px 64px;
  --bb-tiles-pos: 0 0, 0 0, 32px 32px;
  /* The same tiles in black glaze (the dado under the board). */
  --bb-black-tiles:
    linear-gradient(to bottom, #2b2b2c 0 2px, rgb(255 255 255 / 0.09) 2px 4px, transparent 4px 25px, rgb(0 0 0 / 0.25) 25px 32px),
    conic-gradient(at 2px 32px, transparent 0 270deg, #2b2b2c 0),
    conic-gradient(at 2px 32px, transparent 0 270deg, #2b2b2c 0);
  /* Granito (terrazzo) floor: chips of black, brick, white and grey in a
     warm grey cement, at sizes that don't repeat in step; brass strips. */
  --bb-granito:
    radial-gradient(ellipse 3px 2.2px at 22% 31%, #2a2927 98%, transparent),
    radial-gradient(ellipse 2.6px 3.4px at 71% 64%, #8a3a2b 98%, transparent),
    radial-gradient(ellipse 4.2px 3px at 43% 82%, #f4f1ea 98%, transparent),
    radial-gradient(ellipse 5px 3.6px at 86% 17%, #6a665e 98%, transparent),
    radial-gradient(ellipse 1.6px 1.4px at 57% 41%, #2a2927 98%, transparent),
    radial-gradient(ellipse 3.6px 4.4px at 12% 70%, #aaa397 98%, transparent),
    radial-gradient(ellipse 2px 1.6px at 64% 12%, #7d3326 98%, transparent),
    radial-gradient(ellipse 6px 4px at 33% 52%, #3a3835 98%, transparent);
  --bb-granito-size: 37px 41px, 53px 47px, 61px 43px, 89px 73px, 23px 29px, 71px 83px, 31px 37px, 113px 97px;
  background: var(--bb-tile);
}
.site[data-look="barber"] main > .s + .s { border-top: 0; }

/* Headings: the sign-writer's slab, big; ink on the tiles. */
.site[data-look="barber"] :is(h1, h2):not(.h3) { font-family: var(--bb-sign); font-weight: 400; letter-spacing: -0.005em; text-transform: none; line-height: 1; }
.site[data-look="barber"] h2:not(.h3) { font-size: clamp(2.3rem, 1.3rem + 3.3vw, 4.6rem); margin-bottom: 0.45em; }
.site[data-look="barber"] main > .s:first-child:not(.s-hero, .s-services, .s-request, .s-contact, .s-booking) > .wrap h1 { font-size: clamp(2.6rem, 1.4rem + 4.4vw, 5.6rem); }
.site[data-look="barber"] :is(h1, h2, h3) { hyphens: manual; overflow-wrap: break-word; }
.site[data-look="barber"] .lead { color: var(--muted); }
.site[data-look="barber"] p { font-size: var(--fs-base); }

/* Buttons: an enamel sign with a hard edge under it; it lifts on hover. */
.site[data-look="barber"] .btn {
  border-radius: 0; min-height: 54px; padding: 0.7rem 1.6rem;
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; font-size: 0.95rem;
  border: 2px solid var(--bb-ink); box-shadow: 0 4px 0 var(--bb-ink);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.site[data-look="barber"] .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 6px 0 var(--bb-ink); }
.site[data-look="barber"] .btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--bb-ink); }
.site[data-look="barber"] .cta-alt { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }

/* --- Header: the fascia over the window, sign-written, with a coach line. -- */
.site[data-look="barber"] .site-header {
  --text: var(--bb-cream); --bg: var(--bb-green); --muted: var(--bb-cream-muted);
  background-color: var(--bb-green); color: var(--bb-cream); border-bottom: 0;
  /* The coach lines a sign-writer pulls along the board's edges, and the
     moulding under it. */
  background-image: linear-gradient(rgb(243 236 218 / 0.55), rgb(243 236 218 / 0.55)), linear-gradient(rgb(243 236 218 / 0.55), rgb(243 236 218 / 0.55));
  background-size: calc(100% - 2 * var(--gap)) 1px, calc(100% - 2 * var(--gap)) 1px;
  background-position: 50% 7px, 50% calc(100% - 14px);
  background-repeat: no-repeat;
  box-shadow: inset 0 -6px 0 var(--bb-green-deep);
}
.site[data-look="barber"] .header-inner { min-height: var(--bb-head); padding-block: 0.75rem calc(0.75rem + 14px); }
.site[data-look="barber"] .brand { flex: 1 1 18rem; min-width: 0; overflow-wrap: break-word; line-height: 1.1; font-family: var(--bb-sign); font-weight: 400; text-transform: none; letter-spacing: 0.01em; font-size: clamp(1.25rem, 0.95rem + 1vw, 1.9rem); color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade); }
.site[data-look="barber"] .site-header nav a { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--bb-cream); }
.site[data-look="barber"] .site-header .btn { box-shadow: 0 3px 0 var(--bb-shade); border-color: var(--bb-shade); min-height: 46px; }
.site[data-look="barber"] .site-header .btn:hover { transform: none; }

/* --- Hero: the shop window in the green front. --------------------------- */
.site[data-look="barber"] .s-hero[data-bb-hero] { padding: 0; background: var(--bb-green); position: relative; overflow: clip; }
.site[data-look="barber"] .bb-front {
  display: grid; grid-template-rows: minmax(0, 1fr) auto;
  /* Capped, so a preview frame that grows to its page can't grow the hero. */
  min-height: min(calc(calc(100 * var(--raam-vh)) - var(--bb-head)), 62rem);
  padding: clamp(10px, 1.3vw, 20px) clamp(10px, 1.3vw, 20px) 0;
}
/* The glass: the photo behind it, the shop's own dusk inside, a reflection. */
.site[data-look="barber"] .bb-window {
  position: relative; overflow: hidden; min-height: 20rem; isolation: isolate;
  background-color: var(--bb-glass);
  background-image: linear-gradient(160deg, rgb(16 22 21 / 0.8), rgb(16 22 21 / 0.9) 60%, rgb(8 11 10 / 0.95)), var(--bb-tiles);
  background-size: 100% 100%, var(--bb-tiles-size); background-position: 0 0, var(--bb-tiles-pos); background-color: var(--bb-tile);
  /* The rebate where the glass sits in the frame. */
  box-shadow: 0 0 0 3px var(--bb-green-deep), 0 0 0 4px rgb(255 255 255 / 0.08);
}
.site[data-look="barber"] .bb-window .hero-img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; max-height: none; filter: brightness(1.08) saturate(1.05); }
/* Dusk inside the shop on the side the sign-writing sits, so the cream reads. */
.site[data-look="barber"] .bb-window::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(100deg, rgb(10 15 12 / 0.8) 0%, rgb(10 15 12 / 0.5) 34%, rgb(10 15 12 / 0.06) 58%, transparent 70%);
}
/* The street reflected in the glass: two soft diagonal bands. */
.site[data-look="barber"] .bb-window::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(118deg, transparent 0 56%, rgb(255 255 255 / 0.05) 56% 62%, transparent 62% 64%, rgb(255 255 255 / 0.035) 64% 66%, transparent 66%);
}
.site[data-look="barber"] .bb-glass-line {
  display: flex; flex-wrap: wrap; row-gap: 1em; height: 1.6em; overflow: hidden; line-height: 1.6; margin: 0 0 clamp(1.25rem, calc(3 * var(--raam-vh)), 2.25rem); max-width: 46rem;
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.22em; font-size: clamp(0.8rem, 0.7rem + 0.35vw, 1.05rem);
  color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade);
}
.site[data-look="barber"] .bb-glass-line span { white-space: nowrap; }
.site[data-look="barber"] .bb-glass-line span + span::before { content: '\00B7'; margin-inline: 0.7em; }
.site[data-look="barber"] .bb-glass-text {
  position: relative; z-index: 1; height: 100%; display: flex; flex-direction: column; justify-content: center;
  padding: clamp(2rem, calc(6 * var(--raam-vh)), 5rem) clamp(1.5rem, 4vw, 4.5rem);
  padding-left: max(clamp(1.5rem, 4vw, 4.5rem), (100vw - var(--wrap)) / 2 - clamp(10px, 1.3vw, 20px));
}
/* The headline painted on the inside of the glass: cream, one hard shade. */
.site[data-look="barber"] .s-hero[data-bb-hero] :is(h1, h2) {
  font-size: clamp(3rem, 1rem + 6.4vw, 8.75rem); line-height: 0.93; letter-spacing: -0.01em; max-width: 9.5ch; margin: 0;
  color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade);
}
.site[data-look="barber"] .s-hero[data-bb-long] :is(h1, h2) { font-size: clamp(2.5rem, 1rem + 4.6vw, 6.25rem); max-width: 13ch; }
.site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-front { min-height: min(calc(calc(100 * var(--raam-vh)) - var(--bb-head)), 46rem); }
/* The moulded panel under the window: the lead and the one button. */
.site[data-look="barber"] .bb-riser { padding: clamp(10px, 1.3vw, 20px) 0; position: relative; }
.site[data-look="barber"] .bb-riser-panel {
  --text: var(--bb-cream); --muted: var(--bb-cream-muted);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.25rem 3rem;
  padding: clamp(1.4rem, 3vw, 2.4rem) clamp(1.25rem, 4vw, 4.5rem);
  padding-left: max(clamp(1.25rem, 4vw, 4.5rem), (100vw - var(--wrap)) / 2 - clamp(10px, 1.3vw, 20px));
  color: var(--bb-cream);
  /* Raised field inside a sunk moulding. */
  background: linear-gradient(180deg, rgb(255 255 255 / 0.035), rgb(0 0 0 / 0.12));
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.45), inset 0 0 0 8px var(--bb-green), inset 0 0 0 9px rgb(255 255 255 / 0.07), inset 0 0 0 10px rgb(0 0 0 / 0.35);
}
.site[data-look="barber"] .s-hero[data-bb-hero] .lead { margin: 0; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.55rem); line-height: 1.45; max-width: 36rem; color: var(--bb-cream); }
.site[data-look="barber"] .s-hero[data-bb-hero] .actions { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 0.9rem 1.6rem; }
.site[data-look="barber"] .s-hero[data-bb-hero] .actions .btn { box-shadow: 0 4px 0 var(--bb-shade); border-color: var(--bb-shade); min-height: 58px; padding-inline: 2rem; font-size: 1rem; }
.site[data-look="barber"] .s-hero[data-bb-hero] .cta-alt { color: var(--bb-cream); }
/* The bluestone step in front of the shop. */
.site[data-look="barber"] .s-hero[data-bb-hero]::after {
  content: ''; display: block; height: clamp(12px, 1.4vw, 18px);
  background: linear-gradient(to bottom, #737b7e 0 2px, var(--bb-stone) 2px calc(100% - 3px), #2c3133 calc(100% - 3px));
}
@media (max-width: 51.99rem) {
  .site[data-look="barber"] { --bb-head: 3.9rem; }
  /* The window fills the screen above the quick bar. */
  .site[data-look="barber"] .bb-front { min-height: min(calc(calc(100 * var(--raam-vh)) - var(--bb-head) - 58px - 14px - var(--vb-bar, 0px)), 54rem); }
  .site[data-look="barber"] .bb-window { min-height: clamp(17rem, calc(47 * var(--raam-vh)), 27rem); }
  .site[data-look="barber"] .bb-window::before { background: linear-gradient(to top, rgb(10 15 12 / 0.9) 0%, rgb(10 15 12 / 0.55) 42%, rgb(10 15 12 / 0.05) 72%); }
  .site[data-look="barber"] .bb-glass-text { justify-content: flex-end; padding: 1.25rem 1.1rem 1.4rem; }
  .site[data-look="barber"] .s-hero[data-bb-hero] :is(h1, h2) { font-size: clamp(2.6rem, 1.2rem + 7.2vw, 5.25rem); max-width: 11ch; }
  .site[data-look="barber"] .s-hero[data-bb-long] :is(h1, h2) { font-size: clamp(1.9rem, 1rem + 4.4vw, 3rem); max-width: 14ch; }
  .site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-window { min-height: 0; }
  .site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-front { min-height: 0; }
  .site[data-look="barber"] .header-inner { padding-block: 0.7rem calc(0.7rem + 12px); }
  .site[data-look="barber"] .s-hero[data-bb-hero="glass"] .bb-glass-text { padding-top: 3rem; }
  .site[data-look="barber"] .bb-riser-panel { padding: 1.3rem 1.1rem 1.5rem; }
  .site[data-look="barber"] .s-hero[data-bb-hero] .lead { font-size: 1.08rem; }
}

/* --- Prices: the felt letterboard on the tiles, over a black dado. -------- */
.site[data-look="barber"] .bb-prices {
  padding-block: clamp(4rem, 9vw, 7.5rem);
  background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos);
}
.site[data-look="barber"] .bb-prices::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 40%;
  background-color: #141414; background-image: var(--bb-black-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos);
  border-top: 10px solid #9da1a6; box-shadow: inset 0 3px 0 #e6e8ea, 0 -2px 0 #5d6166;
}
.site[data-look="barber"] .bb-board {
  position: relative; max-width: 60rem; margin-inline: auto; padding: clamp(9px, 1.1vw, 14px);
  /* Brushed aluminium frame. */
  background: linear-gradient(135deg, #eef0f2, #a4a8ae 38%, #dfe1e4 55%, #8a8e94);
  box-shadow: 0 34px 40px -26px rgb(0 0 0 / 0.65), 0 2px 3px rgb(0 0 0 / 0.25), inset 0 0 0 1px rgb(255 255 255 / 0.5);
}
.site[data-look="barber"] .bb-board.is-long { max-width: 78rem; }
/* Board screws in the frame's corners. */
.site[data-look="barber"] .bb-board::before, .site[data-look="barber"] .bb-board::after {
  content: ''; position: absolute; top: 3px; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #7d8187 70%);
}
.site[data-look="barber"] .bb-board::before { left: 3px; }
.site[data-look="barber"] .bb-board::after { right: 3px; }
/* The felt: a groove every 8px, each a dark slot with a lit lip under it. */
.site[data-look="barber"] .bb-felt {
  --text: var(--on-felt); --muted: var(--felt-muted);
  --bb-groove: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.72) 0 1px, rgb(255 255 255 / 0.075) 1px 2px, transparent 2px 8px);
  --bb-large: clamp(1.15rem, 0.92rem + 0.95vw, 1.8rem);
  --bb-small: 0.86rem;
  position: relative; isolation: isolate;
  color: var(--on-felt);
  background-color: var(--felt); background-image: var(--bb-groove);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.7), inset 0 0 70px rgb(0 0 0 / 0.6);
  padding: clamp(1.75rem, 5vw, 4rem) clamp(1.1rem, 5vw, 4.5rem) clamp(2rem, 5vw, 4.25rem);
  font-family: var(--font-body); text-transform: uppercase; font-weight: 500;
}
/* The grooves show faintly across the letters too: each letter's tab sits
   in a groove, and the felt's ribs catch the light around it. */
.site[data-look="barber"] .bb-felt::after {
  content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background-image: repeating-linear-gradient(to bottom, rgb(0 0 0 / 0.16) 0 1px, transparent 1px 8px);
}
/* A push-in letter: white moulded plastic, a little thickness on its lower
   edge and a shadow on the felt. Each word sits a hair off level. */
.site[data-look="barber"] .bb-felt :is(h1, h2, h3, .price, .service-note, .bb-board-intro) {
  color: #f4f2ec;
  text-shadow: 0 1px 0 #c9c5bb, 0 2px 0 #8b877e, 0 3px 3px rgb(0 0 0 / 0.9), 0 0 1px rgb(255 255 255 / 0.4);
}
.site[data-look="barber"] .bb-felt .bb-w { display: inline-block; transform: translateY(var(--y, 0)); transition: transform 0.18s ease, text-shadow 0.18s ease; }
.site[data-look="barber"] .bb-board-head { text-align: center; margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
.site[data-look="barber"] main .bb-felt .bb-board-head :is(h1, h2) {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase;
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.9rem); letter-spacing: 0.24em; margin: 0 -0.24em 0.4em 0; line-height: 1.1;
}
.site[data-look="barber"] .bb-board-intro { margin: 0 auto; max-width: 38rem; font-size: clamp(0.86rem, 0.82rem + 0.2vw, 1rem); letter-spacing: 0.14em; line-height: 2; color: #dedad0; }
.site[data-look="barber"] .bb-felt .service-list { border: 0; margin: 0; display: grid; column-gap: clamp(2.5rem, 5vw, 4.5rem); }
@media (min-width: 64rem) { .site[data-look="barber"] .is-long .bb-felt .service-list { grid-template-columns: 1fr 1fr; } }
/* One row per service. The row sets its own letter size so name and price
   fit on one line: the large letters when they fit, smaller ones for a long
   name (as a board comes with two sizes). Below the smallest size a name
   wraps between words, never inside one. */
.site[data-look="barber"] .bb-felt .service { container-type: inline-size; border: 0; padding-block: clamp(0.5rem, 1.1vw, 0.8rem); }
.site[data-look="barber"] .bb-felt .service .price-row {
  display: grid; grid-template-columns: minmax(min-content, 1fr) auto; align-items: baseline; gap: 1.1em;
  font-size: clamp(var(--bb-small), min(100cqi / (var(--nb, 20) * 0.68 + 1.6), 100cqi / (var(--n, 20) * 0.68 + 1.6)), var(--bb-large));
  letter-spacing: 0.09em; line-height: 1.3;
}
.site[data-look="barber"] .bb-felt .service :is(h2, h3) {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; font-size: 1em; letter-spacing: inherit; line-height: inherit; margin: 0;
  hyphens: none; overflow-wrap: break-word; word-break: normal;
}
.site[data-look="barber"] .bb-felt .service .price { margin: 0; font-size: 1em; font-weight: 500; font-variant-numeric: tabular-nums; text-align: right; white-space: normal; }
.site[data-look="barber"] .bb-felt .service .price-amount { white-space: nowrap; }
.site[data-look="barber"] .bb-felt .service .price-from, .site[data-look="barber"] .bb-felt .service .price-unit { font-size: 0.72em; letter-spacing: 0.1em; }
.site[data-look="barber"] .bb-felt .service .service-note { font-size: clamp(0.84rem, 0.8rem + 0.2vw, 0.98rem); letter-spacing: 0.12em; line-height: 1.6; margin: 0.15rem 0 0; max-width: 38rem; color: var(--felt-muted); text-shadow: 0 1px 0 #77746c, 0 2px 2px rgb(0 0 0 / 0.9); }
.site[data-look="barber"] .bb-felt .service:hover .bb-w { transform: translateY(calc(var(--y, 0px) - 2px)); text-shadow: 0 1px 0 #c9c5bb, 0 2px 0 #8b877e, 0 7px 6px rgb(0 0 0 / 0.85); }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="barber"] .bb-felt .service .bb-w { animation: bb-push linear both; animation-timeline: view(); animation-range: entry 10% entry 80%; }
  }
}
@keyframes bb-push { from { opacity: 0; transform: translateY(-0.35em) scale(1.04); } }
@media (max-width: 40rem) {
  .site[data-look="barber"] .bb-felt { --bb-large: 1.15rem; --bb-small: 0.8rem; padding-inline: 1rem; }
  .site[data-look="barber"] .bb-felt .service .price-row { letter-spacing: 0.06em; gap: 0.8em; }
  .site[data-look="barber"] .bb-felt .bb-w { transform: none; }
}
@media (min-width: 64rem) {
  .site[data-look="barber"] .is-long .bb-felt { --bb-large: clamp(1rem, 0.75rem + 0.45vw, 1.3rem); }
}

/* --- Hours: the shop door in the brick facade. ---------------------------- */
.site[data-look="barber"] .bb-facade {
  padding-block: clamp(3.5rem, 8vw, 6.5rem) 0;
  /* Dutch brick, running bond, light mortar; a few bricks a shade darker. */
  background-color: var(--bb-brick);
  background-image:
    linear-gradient(to bottom, var(--bb-mortar) 0 3px, transparent 3px),
    conic-gradient(at 3px 21px, transparent 0 270deg, var(--bb-mortar) 0),
    conic-gradient(at 3px 21px, transparent 0 270deg, var(--bb-mortar) 0),
    linear-gradient(to bottom, transparent 0 21px, rgb(0 0 0 / 0.07) 21px 42px, rgb(255 255 255 / 0.04) 42px 63px, transparent 63px 84px, rgb(0 0 0 / 0.11) 84px 105px);
  background-size: 100% 21px, 150px 42px, 150px 42px, 100% 105px;
  background-position: 0 0, 0 0, 75px 21px, 0 0;
  box-shadow: inset 0 14px 18px -12px rgb(0 0 0 / 0.5);
}
/* The bluestone step the door stands on runs the width of the facade. */
.site[data-look="barber"] .bb-facade::after {
  content: ''; display: block; height: clamp(14px, 1.6vw, 20px);
  background: linear-gradient(to bottom, #737b7e 0 2px, var(--bb-stone) 2px calc(100% - 3px), #2c3133 calc(100% - 3px));
}
.site[data-look="barber"] .bb-facade-inner { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: end; }
@media (min-width: 52rem) { .site[data-look="barber"] .bb-facade-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
/* The door: a green frame, the glass, an aluminium kick plate. */
.site[data-look="barber"] .bb-door {
  position: relative; background: var(--bb-green); padding: clamp(12px, 1.6vw, 22px) clamp(12px, 1.6vw, 22px) 0;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.5), inset 0 0 0 7px var(--bb-green), inset 0 0 0 8px rgb(255 255 255 / 0.07), -10px 0 0 -4px var(--bb-green-deep), 10px 0 0 -4px var(--bb-green-deep);
  max-width: 40rem;
}
.site[data-look="barber"] .bb-door-glass {
  --text: #f6f5f1; --muted: #aeb6b3; --border: rgb(246 245 241 / 0.3);
  position: relative; color: #f6f5f1;
  padding: clamp(2rem, 5vw, 4rem) clamp(3.25rem, 6vw, 5.5rem) clamp(2rem, 4.5vw, 3.5rem) clamp(1.25rem, 4vw, 3.25rem);
  background:
    linear-gradient(112deg, transparent 0 20%, rgb(255 255 255 / 0.06) 20% 28%, transparent 28% 31%, rgb(255 255 255 / 0.045) 31% 33%, transparent 33%),
    linear-gradient(170deg, #1d2826, var(--bb-glass) 55%, #090c0c);
  box-shadow: 0 0 0 3px var(--bb-green-deep);
}
/* Cut white vinyl on the glass: the sans of a door sticker, not the slab. */
.site[data-look="barber"] main .bb-door-glass :is(h1, h2) {
  font-family: var(--font-body); font-weight: 500; text-transform: uppercase; letter-spacing: 0.2em; color: #f6f5f1;
  font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem); line-height: 1.2; margin: 0 0 1.4em;
  padding-bottom: 0.9em; border-bottom: 2px solid rgb(246 245 241 / 0.85);
}
.site[data-look="barber"] .bb-door-glass .hours-table { font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.35rem); max-width: 30rem; }
.site[data-look="barber"] .bb-door-glass .hours-table :is(th, td) { padding-block: 0.6rem; border-bottom: 0; color: #f6f5f1; }
.site[data-look="barber"] .bb-door-glass .hours-table th { text-transform: uppercase; letter-spacing: 0.14em; font-weight: 500; font-size: 0.82em; }
.site[data-look="barber"] .bb-door-glass .hours-table td { font-family: var(--font-body); font-weight: 500; letter-spacing: 0.04em; white-space: nowrap; }
.site[data-look="barber"] .bb-door-glass .hours-table .is-closed :is(th, td) { color: #aeb6b3; }
.site[data-look="barber"] .bb-door-glass .hours-table th::after { background: var(--bb-red); color: #fff; }
.site[data-look="barber"] .bb-door-glass .hours-table th::before { background: var(--bb-red) !important; width: 6px !important; left: -1rem !important; }
/* The push bar on the door. */
.site[data-look="barber"] .bb-door-bar {
  position: absolute; right: clamp(1rem, 2vw, 1.75rem); top: 28%; height: 44%; width: 12px; border-radius: 6px;
  background: linear-gradient(to right, #6c7076, #f5f6f7 35%, #b6babf 60%, #5b5f64);
  box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
}
.site[data-look="barber"] .bb-door-kick {
  display: block; height: clamp(3rem, 6vw, 5rem); margin-top: clamp(12px, 1.6vw, 22px);
  background: repeating-linear-gradient(to bottom, rgb(255 255 255 / 0.06) 0 1px, transparent 1px 3px), linear-gradient(to bottom, #c7cbcf, #8f9499 60%, #a9adb2);
  box-shadow: inset 0 1px 0 #eef0f2, inset 0 -1px 0 #5d6166;
}
.site[data-look="barber"] .bb-street { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-content: end; padding-bottom: clamp(2rem, 4vw, 3.5rem); }
/* The hanging sign: an iron arm out of the brick, the board on two rings,
   sign-written like the fascia. */
.site[data-look="barber"] .bb-blade { position: relative; margin: 0; padding-top: 2.6rem; justify-self: start; max-width: 100%; font-size: inherit; }
.site[data-look="barber"] .bb-blade::before { content: ''; position: absolute; top: 0; left: -1.5rem; right: -1rem; height: 6px; background: #111; border-radius: 3px; box-shadow: 0 2px 0 rgb(0 0 0 / 0.3); }
.site[data-look="barber"] .bb-blade::after { content: ''; position: absolute; top: 6px; left: 1.6rem; right: 1.6rem; height: calc(2.6rem - 6px); border-inline: 3px dotted #111; }
.site[data-look="barber"] .bb-blade-board {
  display: block; padding: 1.15rem 1.7rem 1.25rem; background: var(--bb-green); color: var(--bb-cream);
  font-family: var(--bb-sign); font-size: clamp(1.35rem, 1rem + 1.3vw, 2.2rem); line-height: 1.05; overflow-wrap: break-word; hyphens: manual;
  text-shadow: 2px 2px 0 var(--bb-shade);
  box-shadow: inset 0 0 0 6px var(--bb-green), inset 0 0 0 7px rgb(243 236 218 / 0.6), 0 16px 18px -12px rgb(0 0 0 / 0.65);
}
/* Address and phone on a white enamel plate on the brick. */
.site[data-look="barber"] .bb-plate {
  --text: var(--bb-ink); --muted: #4f4d48;
  background: #fff; color: var(--bb-ink); border-radius: 0.6rem; padding: clamp(1.25rem, 2.6vw, 2rem);
  box-shadow: inset 0 0 0 4px #fff, inset 0 0 0 6px var(--bb-ink), 0 14px 18px -12px rgb(0 0 0 / 0.6);
}
.site[data-look="barber"] .bb-plate p { margin: 0; }
.site[data-look="barber"] .bb-plate .hours-place { color: var(--bb-ink); max-width: none; display: grid; gap: 0.1rem; }
.site[data-look="barber"] .bb-plate-line { font-family: var(--bb-sign); font-size: clamp(1.25rem, 1rem + 0.9vw, 1.75rem); line-height: 1.15; overflow-wrap: anywhere; }
.site[data-look="barber"] .bb-plate .hours-place a { margin-top: 0.6rem; justify-self: start; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site[data-look="barber"] .bb-plate .hours-call { margin-top: 1rem; padding-top: 1rem; border-top: 2px solid var(--bb-ink); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); }
.site[data-look="barber"] .bb-plate .hours-call:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.site[data-look="barber"] .bb-plate .hours-call a { text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
@media (max-width: 30rem) {
  .site[data-look="barber"] .bb-door-glass .hours-table { font-size: 1rem; }
  .site[data-look="barber"] .bb-door-glass .hours-table th { letter-spacing: 0.08em; white-space: normal; }
  .site[data-look="barber"] .bb-door-glass .hours-table th::after { margin-left: 0.4rem; }
  .site[data-look="barber"] .bb-door-glass { padding-right: 2.5rem; }
  .site[data-look="barber"] .bb-door-bar { right: 0.85rem; width: 9px; }
}

/* --- About: the chair, the year on an enamel plaque; one wide photo. ------- */
.site[data-look="barber"] .bb-about { padding: 0; background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); }
.site[data-look="barber"] .bb-about-grid { display: grid; }
.site[data-look="barber"] .bb-about-photo { position: relative; min-height: clamp(18rem, 70vw, 28rem); background: var(--bb-ink); }
.site[data-look="barber"] .bb-about-photo .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; max-height: none; }
.site[data-look="barber"] .bb-about-text { padding: clamp(3rem, 7vw, 6rem) var(--gap); max-width: 46rem; }
.site[data-look="barber"] .bb-about-body p { font-size: var(--fs-base); line-height: 1.65; max-width: 36rem; }
.site[data-look="barber"] .bb-about-body p:first-child { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.65rem); line-height: 1.42; }
@media (min-width: 52rem) {
  .site[data-look="barber"] .bb-about.has-photo .bb-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(46rem, calc(88 * var(--raam-vh))); }
  .site[data-look="barber"] .bb-about-photo { min-height: 0; border-right: 6px solid var(--bb-ink); }
  .site[data-look="barber"] .bb-about:not(.is-left) .bb-about-photo { order: 2; border-right: 0; border-left: 6px solid var(--bb-ink); }
  .site[data-look="barber"] .bb-about.has-photo .bb-about-text { align-self: center; padding-inline: clamp(2.5rem, 5vw, 5rem) max(var(--gap), (100vw - var(--wrap)) / 2); }
  .site[data-look="barber"] .bb-about.has-photo:not(.is-left) .bb-about-text { padding-inline: max(var(--gap), (100vw - var(--wrap)) / 2) clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="barber"] .bb-about:not(.has-photo) .bb-about-text { margin-left: max(var(--gap), (100vw - var(--wrap)) / 2); padding-left: 0; }
}
@media (min-width: 90rem) {
  .site[data-look="barber"] .bb-about.has-photo .bb-about-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .site[data-look="barber"] .bb-about.has-photo.is-left .bb-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); }
}
.site[data-look="barber"] .bb-plaque {
  display: inline-flex; align-items: baseline; gap: 0.55em; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0.7em 1.15em 0.6em; border-radius: 0.5rem; background: #fff; color: var(--bb-ink);
  box-shadow: inset 0 0 0 3px #fff, inset 0 0 0 5px var(--bb-enamel-blue), 0 10px 14px -10px rgb(0 0 0 / 0.5);
  text-transform: uppercase; letter-spacing: 0.16em; font-weight: 600; font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1.1rem);
}
.site[data-look="barber"] .bb-plaque strong { font-family: var(--bb-sign); font-weight: 400; font-size: 2.4em; letter-spacing: 0.02em; line-height: 1; color: var(--bb-enamel-blue); }
/* One wide photo of the work, edge to edge. */
.site[data-look="barber"] .bb-wide { border-top: 6px solid var(--bb-ink); background: var(--bb-ink); overflow: hidden; }
.site[data-look="barber"] .bb-wide img { display: block; width: 100%; height: clamp(15rem, 38vw, 34rem); object-fit: cover; max-height: none; aspect-ratio: auto; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="barber"] .bb-wide img { animation: bb-pan linear both; animation-timeline: view(); }
  }
}
@keyframes bb-pan { from { transform: scale(1.08) translateY(-2%); } to { transform: scale(1.02) translateY(2%); } }

/* --- Reviews: big set quotes on the barber's red. ------------------------- */
.site[data-look="barber"] .bb-reviews {
  --text: var(--on-primary); --muted: var(--on-primary);
  background: var(--primary); color: var(--on-primary); padding-block: clamp(4.5rem, 10vw, 8rem); overflow: clip;
}
.site[data-look="barber"] .bb-reviews :is(h1, h2) { color: var(--on-primary); position: relative; text-shadow: 2px 2px 0 rgb(0 0 0 / 0.35); }
.site[data-look="barber"] .bb-quotes { gap: clamp(2.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 5.5rem); margin-top: clamp(1.75rem, 3.5vw, 3rem); position: relative; }
.site[data-look="barber"] .bb-quotes figure { border-top: 3px solid currentColor; padding-top: 1.5rem; }
.site[data-look="barber"] .bb-quotes blockquote { font-size: clamp(1.4rem, 1.05rem + 1.25vw, 2.25rem); line-height: 1.32; font-weight: 500; letter-spacing: -0.01em; }
.site[data-look="barber"] .bb-quotes blockquote p { font-size: inherit; text-indent: -0.42em; }
.site[data-look="barber"] .bb-quotes figcaption { color: var(--on-primary); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.88rem; font-weight: 600; margin-top: 1.25rem; }
.site[data-look="barber"] .bb-reviews.is-single .bb-quotes { grid-template-columns: minmax(0, 56rem); }
.site[data-look="barber"] .bb-reviews.is-single blockquote { font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3.2rem); line-height: 1.25; }

/* --- Contact: big links on the tiles; the address on a street sign. ------- */
.site[data-look="barber"] .s-contact { background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); padding-block: clamp(4rem, 9vw, 7rem); }
.site[data-look="barber"] .s-contact .lead { color: #3c3a36; }
.site[data-look="barber"] .contact-list { border-top: 3px solid var(--bb-ink); margin-top: 0; }
.site[data-look="barber"] .contact-list li { border-bottom: 2px solid var(--bb-ink); background: rgb(244 243 239 / 0.82); }
.site[data-look="barber"] .contact-link { padding: 1.1rem 0.25rem; }
.site[data-look="barber"] .contact-label { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; font-weight: 600; color: #3c3a36; }
.site[data-look="barber"] .contact-value { font-family: var(--bb-sign); font-weight: 400; letter-spacing: 0; font-size: clamp(1.7rem, 1.1rem + 2.4vw, 3.3rem); line-height: 1.05; transition: transform 0.15s ease; display: inline-block; }
.site[data-look="barber"] .contact-link:hover .contact-value { text-decoration: none; transform: translateX(0.15em); }
.site[data-look="barber"] .contact-also { margin: -0.4rem 0 0.6rem 0.25rem; font-weight: 600; text-decoration-thickness: 2px; }
/* The address: a blue enamel street-name sign with a white rim. */
.site[data-look="barber"] .contact-list li:has(> .contact-link[href^="https://www.google.com/maps"]) { border-bottom: 0; background: none; padding-top: 1.75rem; }
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] {
  --text: #fff; --muted: #fff;
  display: inline-grid; max-width: 100%; padding: 1.1rem 1.6rem 1rem; border-radius: 0.7rem; background: var(--bb-enamel-blue); color: #fff;
  box-shadow: inset 0 0 0 5px var(--bb-enamel-blue), inset 0 0 0 8px #fff, 0 14px 18px -12px rgb(0 0 0 / 0.55);
}
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] .contact-label { color: #fff; }
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] .contact-value { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.25rem, 1rem + 1vw, 1.9rem); line-height: 1.2; }
.site[data-look="barber"] .contact-link[href^="https://www.google.com/maps"] .contact-note { color: #fff; margin-top: 0.35rem; }
@media (min-width: 52rem) {
  .site[data-look="barber"] .contact-details_only .contact-details { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); }
  .site[data-look="barber"] .s-contact :is(h1, h2) { font-size: clamp(2.2rem, 1rem + 2.6vw, 3.8rem); }
}

/* --- Footer: the granito floor with its brass strips, then the green. ----- */
.site[data-look="barber"] .site-footer {
  --deep: var(--bb-green); --on-deep: var(--bb-cream); --deep-muted: var(--bb-cream-muted);
  background: var(--bb-green); color: var(--bb-cream); position: relative; padding-top: calc(clamp(3rem, 6vw, 4.5rem) + clamp(4.5rem, 9vw, 7rem));
}
.site[data-look="barber"] .site-footer::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: clamp(4.5rem, 9vw, 7rem);
  background-color: #d3cdc0;
  background-image: linear-gradient(to right, transparent calc(100% - 3px), #b08d4a calc(100% - 3px)), var(--bb-granito);
  background-size: 18rem 100%, var(--bb-granito-size);
  border-bottom: 10px solid var(--bb-stone); box-shadow: inset 0 3px 0 #b08d4a, inset 0 12px 16px -12px rgb(0 0 0 / 0.35);
}
.site[data-look="barber"] .footer-brand .footer-name { font-family: var(--bb-sign); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.6rem); line-height: 1.02; color: var(--bb-cream); text-shadow: 2px 2px 0 var(--bb-shade); overflow-wrap: break-word; hyphens: manual; max-width: 22ch; }
.site[data-look="barber"] .footer-title { text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.8rem; }

/* --- The rest of the page in the same shop. -------------------------------- */
/* Trust strip: one line under the fascia, in its paint. */
.site[data-look="barber"] .s-trust { background: var(--bb-green); color: var(--bb-cream); padding-block: 1rem; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
.site[data-look="barber"] .s-trust .trust-list li:not(:last-child)::after { content: '\00B7'; color: var(--bb-cream-muted); margin-inline: 0.6rem; }
/* Gallery: photos tight together like the mirror wall, no gaps. */
.site[data-look="barber"] .s-gallery { background: var(--bb-ink); color: var(--bb-tile); --text: var(--bb-tile); }
.site[data-look="barber"] .s-gallery :is(h1, h2) { color: var(--bb-tile); }
.site[data-look="barber"] .gallery-items { gap: 6px; }
.site[data-look="barber"] .gallery-items li { background: #000; overflow: hidden; }
.site[data-look="barber"] .gallery-items img { transition: transform 0.6s ease; }
.site[data-look="barber"] .gallery-items li:hover img { transform: scale(1.03); }
/* Call to action: black tiles, the slab in white. */
.site[data-look="barber"] .s-cta {
  --text: var(--bb-tile); --muted: #c9c6be;
  background-color: #141414; background-image: var(--bb-black-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); color: var(--bb-tile);
}
.site[data-look="barber"] .s-cta .btn { box-shadow: 0 4px 0 #000; border-color: #000; }
/* Service area: the places in big slab letters. */
.site[data-look="barber"] .s-area ul.area-list { font-family: var(--bb-sign); font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); font-weight: 400; gap: 0.2rem 0; line-height: 1.2; }
.site[data-look="barber"] .s-area ul.area-list li { white-space: normal; }
.site[data-look="barber"] .s-area ul.area-list li:not(:last-child)::after { content: '\00B7'; color: var(--bb-red); margin-inline: 0.5rem; }
.site[data-look="barber"] .area-places { font-family: var(--bb-sign); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.3rem); line-height: 1.25; }
/* FAQ: heavy rules, the question in Rubik, a red plus. */
.site[data-look="barber"] .faq-items details { border-bottom: 2px solid var(--bb-ink); }
.site[data-look="barber"] .faq-items details:first-child { border-top: 3px solid var(--bb-ink); }
.site[data-look="barber"] .faq-items summary { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); min-height: 4rem; }
.site[data-look="barber"] .faq-items summary::after { font-family: var(--bb-sign); color: var(--bb-red); font-size: 1.8rem; }
.site[data-look="barber"] .faq-items details p { color: #3c3a36; font-size: var(--fs-base); }
/* Booking and request forms: a white enamel card on the tiles. */
.site[data-look="barber"] :is(.s-booking, .s-request, .s-faq, .s-area) { background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); }
.site[data-look="barber"] .s-booking .booking-inner, .site[data-look="barber"] .request-form, .site[data-look="barber"] .contact-form {
  background: #fff; border: 3px solid var(--bb-ink); box-shadow: 0 8px 0 var(--bb-ink); padding: clamp(1.25rem, 4vw, 2.5rem);
}
.site[data-look="barber"] .s-booking .booking-inner { max-width: 50rem; }
.site[data-look="barber"] .booking-services { border-top: 3px solid var(--bb-ink); }
.site[data-look="barber"] .booking-name { font-size: 1.1rem; }
.site[data-look="barber"] .booking-go { color: var(--bb-ink); }
.site[data-look="barber"] :where(form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-radius: 0; border: 2px solid var(--bb-ink); background: #fff; }
/* Narrow columns (forms, contact, booking): the slab one size down, so a
   word like "aanvragen" never breaks. */
.site[data-look="barber"] main :is(.s-request, .s-contact, .s-booking, .s-booking-flow) :is(h1, h2):not(.h3) { font-size: clamp(2rem, 1rem + 2.4vw, 3.6rem); }

/* --- The booking flow page (SiteFrame): a white enamel card on the tiles. - */
.site[data-look="barber"] .s-booking-flow { background-color: var(--bb-tile); background-image: var(--bb-tiles); background-size: var(--bb-tiles-size); background-position: var(--bb-tiles-pos); }
.site[data-look="barber"] .s-booking-flow .booking-inner { background: #fff; border: 3px solid var(--bb-ink); box-shadow: 0 8px 0 var(--bb-ink); padding: clamp(1.25rem, 4vw, 2.75rem); max-width: 50rem; }
.site[data-look="barber"] .s-booking-flow .booking-inner > p:first-child a { font-weight: 600; text-decoration-thickness: 2px; text-underline-offset: 0.3em; }
.site[data-look="barber"] main .s-booking-flow :is(.booking-step, .booking-form) h2 { font-family: var(--font-body); font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; font-size: 1rem; }
.site[data-look="barber"] .booking-choices a { border-radius: 0; border: 2px solid var(--bb-ink); font-weight: 600; font-variant-numeric: tabular-nums; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.site[data-look="barber"] .booking-choices a:hover { transform: translateY(-2px); box-shadow: 0 3px 0 var(--bb-ink); }
.site[data-look="barber"] .booking-choices a[aria-current] { background: var(--bb-ink); color: var(--bb-tile); border-color: var(--bb-ink); }
.site[data-look="barber"] .booking-services a[aria-current] { box-shadow: inset 6px 0 0 var(--bb-red); }
.site[data-look="barber"] .s-booking-flow form { border: 0; box-shadow: none; padding: 0; background: none; }
.site[data-look="barber"] .s-booking-flow .booking-form { border-top: 3px solid var(--bb-ink); padding-top: 1.5rem; }

/* --- Phones: the quick bar is the shopfront again. ------------------------ */
@media (max-width: 51.99rem) {
  .site[data-look="barber"] .quickbar { background: var(--bb-green); border-top: 2px solid var(--bb-green-deep); box-shadow: inset 0 3px 0 rgb(243 236 218 / 0.45); }
  .site[data-look="barber"] .quick { color: var(--bb-cream); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; }
  .site[data-look="barber"] .quick-primary { color: #fff; }
  .site[data-look="barber"]:has(.quickbar) .site-header .btn { display: none; }
}

/* ---- looks/beauty.css ---- */
/* The beauty look: everything here is scoped to .site[data-look="beauty"]. Appended after base.css (bun run --filter @platform/sections css).

   One material: the salon's own paper stock. The afsprakenkaartje, its back
   with the hours and the cards the reviews are written on are white laid
   stock cut with a deckle edge, lying flat (a hairline, no lift) on the
   salon's grey-green board; the behandelkaart lies open on the dark desk.
   Around them, hands and the nail table in photographs.
   Contrast (WCAG, checked with theme.ts contrast()): muted #55535b on card
   #fff 7.57:1, on paper #f8f7f4 7.06:1, on board #e4e7e1 6.06:1 (ink on board
   13.41:1); on the desk #232420: #f4f2ec 13.95:1, #bcbab2 8.04:1. The laid
   lines and deckle never sit under text darker than 4% ink. */

.site[data-look="beauty"] {
  --room: #e4e7e1;
  --desk: #232420;
  --on-desk: #f4f2ec;
  --desk-muted: #bcbab2;
  --hair: #d9d6cf;
  --card-edge: 0 0 0 1px rgb(30 29 34 / 0.07), 0 1px 1px rgb(30 29 34 / 0.08);
  --card-lie: var(--card-edge), 0 2px 4px -1px rgb(30 29 34 / 0.12), 0 22px 44px -22px rgb(30 29 34 / 0.45);
  /* The board: chain lines every 2.4rem and fine laid lines, as in laid paper. */
  --board: repeating-linear-gradient(90deg, rgb(30 29 34 / 0.035) 0 1px, transparent 1px 2.4rem), repeating-linear-gradient(0deg, rgb(255 255 255 / 0.32) 0 1px, transparent 1px 4px), var(--room);
  /* The card stock: white, its laid lines barely there. */
  --stock: repeating-linear-gradient(0deg, rgb(30 29 34 / 0.018) 0 1px, transparent 1px 3px), var(--card);
  --deckle: polygon(0.6px 0.4px, 2.5% 1.2px, 5.0% 1.5px, 7.5% 2.2px, 10.0% 1.3px, 12.5% 1.4px, 15.0% 1.5px, 17.5% 0.7px, 20.0% 1.4px, 22.5% 1.6px, 25.0% 2.0px, 27.5% 0.5px, 30.0% 0.9px, 32.5% 0.5px, 35.0% 2.0px, 37.5% 1.8px, 40.0% 0.4px, 42.5% 2.4px, 45.0% 2.3px, 47.5% 1.7px, 50.0% 1.6px, 52.5% 0.6px, 55.0% 0.3px, 57.5% 1.4px, 60.0% 0.4px, 62.5% 0.7px, 65.0% 0.8px, 67.5% 0.4px, 70.0% 1.3px, 72.5% 1.2px, 75.0% 2.1px, 77.5% 1.4px, 80.0% 1.6px, 82.5% 1.3px, 85.0% 1.7px, 87.5% 1.3px, 90.0% 0.9px, 92.5% 2.4px, 95.0% 2.4px, 97.5% 2.1px, calc(100% - 0.4px) 0.7px, calc(100% - 1.8px) 4.17%, calc(100% - 1.0px) 8.33%, calc(100% - 0.8px) 12.5%, calc(100% - 0.9px) 16.67%, calc(100% - 0.4px) 20.83%, calc(100% - 1.9px) 25.0%, calc(100% - 1.1px) 29.17%, calc(100% - 2.1px) 33.33%, calc(100% - 1.1px) 37.5%, calc(100% - 2.3px) 41.67%, calc(100% - 2.1px) 45.83%, calc(100% - 0.3px) 50.0%, calc(100% - 0.7px) 54.17%, calc(100% - 2.2px) 58.33%, calc(100% - 1.3px) 62.5%, calc(100% - 2.4px) 66.67%, calc(100% - 1.1px) 70.83%, calc(100% - 0.5px) 75.0%, calc(100% - 1.6px) 79.17%, calc(100% - 1.9px) 83.33%, calc(100% - 0.9px) 87.5%, calc(100% - 0.5px) 91.67%, calc(100% - 1.0px) 95.83%, calc(100% - 0.7px) calc(100% - 0.4px), 97.5% calc(100% - 2.3px), 95.0% calc(100% - 1.9px), 92.5% calc(100% - 0.5px), 90.0% calc(100% - 0.8px), 87.5% calc(100% - 0.5px), 85.0% calc(100% - 0.4px), 82.5% calc(100% - 2.0px), 80.0% calc(100% - 0.7px), 77.5% calc(100% - 1.5px), 75.0% calc(100% - 1.2px), 72.5% calc(100% - 0.7px), 70.0% calc(100% - 1.8px), 67.5% calc(100% - 0.6px), 65.0% calc(100% - 1.7px), 62.5% calc(100% - 0.5px), 60.0% calc(100% - 1.2px), 57.5% calc(100% - 0.7px), 55.0% calc(100% - 0.9px), 52.5% calc(100% - 2.3px), 50.0% calc(100% - 2.0px), 47.5% calc(100% - 0.9px), 45.0% calc(100% - 2.2px), 42.5% calc(100% - 0.7px), 40.0% calc(100% - 1.1px), 37.5% calc(100% - 2.1px), 35.0% calc(100% - 1.6px), 32.5% calc(100% - 0.5px), 30.0% calc(100% - 2.4px), 27.5% calc(100% - 0.7px), 25.0% calc(100% - 0.8px), 22.5% calc(100% - 1.9px), 20.0% calc(100% - 1.0px), 17.5% calc(100% - 0.9px), 15.0% calc(100% - 0.5px), 12.5% calc(100% - 0.5px), 10.0% calc(100% - 1.5px), 7.5% calc(100% - 0.8px), 5.0% calc(100% - 1.6px), 2.5% calc(100% - 1.1px), 0.4px calc(100% - 0.6px), 1.3px 95.83%, 2.3px 91.67%, 1.3px 87.5%, 1.5px 83.33%, 2.1px 79.17%, 0.7px 75.0%, 0.6px 70.83%, 2.2px 66.67%, 2.0px 62.5%, 0.8px 58.33%, 0.7px 54.17%, 1.9px 50.0%, 2.3px 45.83%, 0.7px 41.67%, 2.3px 37.5%, 2.2px 33.33%, 1.6px 29.17%, 1.2px 25.0%, 0.5px 20.83%, 0.4px 16.67%, 2.3px 12.5%, 0.8px 8.33%, 1.8px 4.17%);
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --wrap: 76rem;
  font-size: var(--fs-base);
  line-height: 1.6;
  hyphens: manual;
}
@media (min-width: 52rem) { .site[data-look="beauty"] { --fs-base: 1.125rem; } }
.site[data-look="beauty"] main > .s + .s { border-top: 0; }
.site[data-look="beauty"] :is(h1, h2) { letter-spacing: -0.01em; line-height: 0.98; }
.site[data-look="beauty"] h2 { font-size: calc(clamp(2.4rem, 1.6rem + 3.2vw, 4.6rem) * var(--heading-scale)); }
.site[data-look="beauty"] .lead { color: var(--muted); }

/* The printed card: white stock. On its own (the price card on the desk)
   it casts a shadow; cut from the stock (.bh-stock) it lies flat with a
   deckle edge, the wrapper drawing the hairline that follows the edge. */
.site[data-look="beauty"] .bh-card {
  --text: var(--on-card); --muted: var(--card-muted);
  position: relative; color: var(--on-card); background: var(--stock);
  box-shadow: var(--card-lie); border-radius: 3px;
}
.site[data-look="beauty"] .bh-stock { filter: drop-shadow(0 0 0.5px rgb(30 29 34 / 0.55)) drop-shadow(0 1px 0.5px rgb(30 29 34 / 0.1)); }
.site[data-look="beauty"] .bh-stock > .bh-card { box-shadow: none; border-radius: 0; clip-path: var(--deckle); }
/* Picked up off the board a little on hover, as a card is. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .site[data-look="beauty"] :is(.bh-appt-stock, .bh-rev-stock, .bh-back-stock) > .bh-card { transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .site[data-look="beauty"] :is(.bh-appt-stock, .bh-rev-stock, .bh-back-stock):hover > .bh-card { transform: translateY(-3px) rotate(-0.25deg); }
}
.site[data-look="beauty"] .bh-card-name {
  margin: 0; font-family: var(--font-heading); font-weight: var(--heading-weight); letter-spacing: var(--heading-tracking);
  font-size: calc(1.45rem * var(--heading-scale)); line-height: 1.05; overflow-wrap: break-word; hyphens: auto;
}

/* Buttons: the customer's colour, set like a printed label. */
.site[data-look="beauty"] .btn { min-height: 52px; padding: 0.85rem 1.6rem; border-radius: 2px; letter-spacing: 0.02em; transition: background-color 0.2s, transform 0.2s, box-shadow 0.2s; }
.site[data-look="beauty"] .btn-primary:hover { text-decoration: none; background: color-mix(in srgb, var(--primary) 86%, #000); border-color: color-mix(in srgb, var(--primary) 86%, #000); transform: translateY(-1px); box-shadow: 0 6px 14px -8px rgb(30 29 34 / 0.6); }

/* --- Header: the letterhead ------------------------------------------- */
.site[data-look="beauty"] .site-header { background: var(--bg); border-bottom: 1px solid var(--hair); }
.site[data-look="beauty"] .brand { font-size: calc(1.6rem * var(--heading-scale)); letter-spacing: -0.005em; }
.site[data-look="beauty"] .site-header nav a { font-size: 1rem; }
.site[data-look="beauty"] .site-header .btn { min-height: 44px; padding: 0.55rem 1.1rem; }

/* --- Hero: hands at the nail table; the appointment card on the board - */
.site[data-look="beauty"] .bh-hero { padding: 0; overflow: clip; display: grid; background: var(--board); }
.site[data-look="beauty"] .bh-hero-photo { position: relative; overflow: clip; background: var(--room); }
.site[data-look="beauty"] .bh-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.site[data-look="beauty"] .bh-hero-board { display: flex; flex-direction: column; justify-content: space-between; gap: clamp(1.5rem, calc(4 * var(--raam-vh)), 3rem); min-width: 0; }
.site[data-look="beauty"] .bh-hero h1,
.site[data-look="beauty"] .bh-hero h2 {
  font-size: calc(clamp(2.75rem, 1.1rem + 4.2vw, 6.4rem) * var(--heading-scale));
  line-height: 0.92; letter-spacing: -0.02em; max-width: 10ch; margin: 0 0 0.3em;
  overflow-wrap: break-word; hyphens: auto; text-wrap: balance;
}
.site[data-look="beauty"] .bh-hero .lead { max-width: 34rem; margin: 0; color: var(--text); }

/* The appointment card: landscape, as printed, big enough to read. */
.site[data-look="beauty"] .bh-appt-stock { width: min(100%, 36rem); }
.site[data-look="beauty"] .bh-appt { padding: clamp(1.25rem, 2.6vw, 2rem) clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 2.4vw, 1.75rem); }
.site[data-look="beauty"] .bh-appt-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1.5rem; padding-bottom: 0.8rem; border-bottom: 1px solid var(--on-card); }
.site[data-look="beauty"] .bh-appt .bh-card-name { font-size: calc(clamp(1.6rem, 1.3rem + 1vw, 2.1rem) * var(--heading-scale)); min-width: 0; }
.site[data-look="beauty"] .bh-appt-addr { display: flex; flex-direction: column; margin: 0; font-size: 0.85rem; line-height: 1.4; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }
.site[data-look="beauty"] .bh-appt-title { margin: 0.9rem 0 0; font-family: var(--font-heading); font-size: calc(1.3rem * var(--heading-scale)); line-height: 1.1; }
.site[data-look="beauty"] .bh-appt-grid { display: grid; grid-template-columns: 0.8fr 1.2fr 0.8fr; column-gap: 1.1rem; margin-top: 0.5rem; font-size: 0.8rem; color: var(--muted); }
.site[data-look="beauty"] .bh-appt-line { height: 2.2rem; border-bottom: 1px solid color-mix(in srgb, var(--on-card) 45%, transparent); }
.site[data-look="beauty"] .bh-appt .actions { margin-top: 1.4rem; gap: 0.4rem 1.2rem; }
@media (max-height: 61rem), (max-width: 51.99rem) { .site[data-look="beauty"] .bh-appt .bh-appt-line:nth-child(n + 7) { display: none; } }
.site[data-look="beauty"] .bh-appt .cta-alt { font-size: 0.95rem; }
.site[data-look="beauty"] .bh-appt .cta-detail { white-space: nowrap; }

@media (min-width: 52rem) {
  .site[data-look="beauty"] .bh-hero { grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); min-height: max(40rem, min(calc(calc(100 * var(--raam-vh)) - 4.6rem - var(--vb-bar, 0px)), 64rem)); }
  .site[data-look="beauty"] .bh-hero-board { padding: clamp(2rem, calc(5 * var(--raam-vh)), 5rem) max(var(--gap), 50vw - var(--wrap) / 2) clamp(2rem, calc(5 * var(--raam-vh)), 4rem) clamp(2.5rem, 4.5vw, 5rem); }
  .site[data-look="beauty"] .bh-hero-bare { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="beauty"] .bh-hero-bare .bh-hero-board { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); padding-inline: max(var(--gap), 50vw - var(--wrap) / 2); }
  .site[data-look="beauty"] .bh-hero-bare .bh-hero-text { align-self: center; }
  .site[data-look="beauty"] .bh-hero-bare :is(h1, h2) { max-width: 12ch; }
}
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .bh-hero-photo { height: clamp(9rem, calc(calc(24 * var(--raam-vh)) - var(--vb-bar, 0px)), 20rem); }
  .site[data-look="beauty"] .bh-hero-board { padding: 1.25rem var(--gap) 2.5rem; gap: 1.25rem; }
  .site[data-look="beauty"] .bh-hero .lead { font-size: var(--fs-base); }
  .site[data-look="beauty"] .bh-appt-head { padding-bottom: 0.6rem; }
  .site[data-look="beauty"] .bh-hero-bare .bh-hero-board { padding-top: 3rem; }
  .site[data-look="beauty"] .bh-hero :is(h1, h2) { max-width: none; margin-bottom: 0.25em; }
  .site[data-look="beauty"] .bh-appt-title { margin-top: 0.7rem; }
  .site[data-look="beauty"] .bh-appt .actions { margin-top: 1.1rem; }
}
@media (max-width: 26rem) {
  .site[data-look="beauty"] .bh-appt-addr { text-align: left; flex-direction: row; flex-wrap: wrap; column-gap: 0.75rem; }
}

/* --- Services: the behandelkaart on the dark desk --------------------- */
.site[data-look="beauty"] .s-services { background: var(--desk); padding-block: clamp(3.5rem, 9vw, 8rem); }
.site[data-look="beauty"] .bh-menu { max-width: 44rem; margin-inline: auto; padding: clamp(1.75rem, 5vw, 4.25rem) clamp(1.25rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.site[data-look="beauty"] .bh-menu.is-folded { max-width: 72rem; }
/* The fold down the middle of the opened card. */
@media (min-width: 60rem) {
  .site[data-look="beauty"] .bh-menu.is-folded { background-image: linear-gradient(90deg, transparent 0 44%, rgb(30 29 34 / 0.045) 49.85%, rgb(30 29 34 / 0.09) 50%, rgb(255 255 255 / 0) 50.15%, rgb(30 29 34 / 0.025) 52%, transparent 58%); }
  .site[data-look="beauty"] .bh-menu.is-folded .bh-menu-body { columns: 2; column-gap: clamp(5rem, 9vw, 9rem); }
  .site[data-look="beauty"] .bh-menu .service { break-inside: avoid; }
}
.site[data-look="beauty"] .bh-menu-head { break-inside: avoid; padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="beauty"] .bh-menu-head .bh-card-name { margin-bottom: clamp(1.25rem, 3vw, 2.25rem); }
.site[data-look="beauty"] .bh-menu-head :is(h1, h2) { font-size: calc(clamp(2.4rem, 1.7rem + 2.6vw, 4.2rem) * var(--heading-scale)); margin: 0; text-wrap: wrap; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="beauty"] .bh-menu-intro { margin: 1rem 0 0; color: var(--muted); max-width: 34rem; }
.site[data-look="beauty"] .bh-group { break-inside: avoid; padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="beauty"] .bh-group-name {
  display: flex; align-items: baseline; gap: 1rem; margin: 0 0 0.35rem;
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(1.55rem * var(--heading-scale)); line-height: 1.1;
}
.site[data-look="beauty"] .bh-group-name::after { content: ''; flex: 1; border-bottom: 1px solid var(--on-card); transform: translateY(-0.3em); }
.site[data-look="beauty"] .bh-menu .service-list { margin: 0; border: 0; }
.site[data-look="beauty"] .bh-menu .service { border: 0; padding-block: 0.6rem; }
.site[data-look="beauty"] .bh-menu .price-row { flex-wrap: nowrap; gap: 0 0.75rem; }
.site[data-look="beauty"] .bh-menu .service :is(h2, h3, h4) { font-family: var(--font-body); font-weight: 600; font-size: 1.08rem; line-height: 1.35; letter-spacing: 0; text-transform: none; min-width: 0; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="beauty"] .bh-menu .leader { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 1px dotted color-mix(in srgb, var(--on-card) 55%, transparent); transform: translateY(-0.3em); transition: border-color 0.2s; }
.site[data-look="beauty"] .bh-menu .price { font-family: var(--font-figures); font-weight: 600; font-size: 1.08rem; font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="beauty"] .bh-menu .price-from { font-weight: 400; font-size: 0.85em; color: var(--muted); }
.site[data-look="beauty"] .bh-menu .service-note { margin: 0.15rem 0 0; font-size: 0.95rem; line-height: 1.45; color: var(--muted); max-width: 30rem; }
.site[data-look="beauty"] .bh-min { font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--on-card); }
.site[data-look="beauty"] .bh-menu .service:hover .leader { border-bottom-style: solid; border-bottom-color: var(--on-card); }
@media (max-width: 30rem) { .site[data-look="beauty"] .bh-menu .leader { flex-basis: 0.75rem; min-width: 0.75rem; } }
.site[data-look="beauty"] .bh-menu-foot { display: flex; flex-wrap: wrap; gap: 0.4rem 1.75rem; align-items: baseline; margin-top: clamp(0.5rem, 2vw, 1.25rem); padding-top: 1.1rem; border-top: 1px solid var(--hair); font-size: 0.95rem; color: var(--muted); }
.site[data-look="beauty"] .bh-menu-foot a { color: var(--on-card); }
.site[data-look="beauty"] .bh-menu-book { margin-left: auto; font-weight: 600; text-decoration-thickness: 1.5px; }

/* --- About: the room, full bleed, beside the words -------------------- */
.site[data-look="beauty"] .s-about:has(.about-media) { padding: 0; background: var(--bg); }
.site[data-look="beauty"] .s-about:has(.about-media) .about-inner { width: 100%; max-width: none; gap: 0; align-items: stretch; }
.site[data-look="beauty"] .about-img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--surface); }
.site[data-look="beauty"] .about-text { max-width: none; }
.site[data-look="beauty"] .about-text :is(h1, h2) { margin-bottom: 0.45em; }
.site[data-look="beauty"] .about-text > p { max-width: 34rem; }
.site[data-look="beauty"] .about-text > p:first-of-type { font-family: var(--font-heading); font-size: calc(clamp(1.45rem, 1.2rem + 1vw, 2.05rem) * var(--heading-scale)); line-height: 1.25; letter-spacing: -0.005em; }
@media (min-width: 52rem) {
  .site[data-look="beauty"] .s-about:has(.about-media) .about-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(calc(88 * var(--raam-vh)), 52rem); }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-img { aspect-ratio: auto; }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-text { align-self: center; padding: clamp(3.5rem, 8vw, 7rem) max(var(--gap), 50vw - var(--wrap) / 2) clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 6vw, 6rem); }
  .site[data-look="beauty"] .about-image_right .about-text { padding: clamp(3.5rem, 8vw, 7rem) clamp(2.5rem, 6vw, 6rem) clamp(3.5rem, 8vw, 7rem) max(var(--gap), 50vw - var(--wrap) / 2); }
}
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .s-about:has(.about-media) .about-media { order: -1; }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-img { max-height: 24rem; }
  .site[data-look="beauty"] .s-about:has(.about-media) .about-text { padding: 2.5rem var(--gap) 3rem; }
}

/* --- Reviews: one set large on the board, the rest on appointment cards */
.site[data-look="beauty"] .bh-reviews { background: var(--board); padding-block: clamp(4rem, 9vw, 7.5rem); }
.site[data-look="beauty"] .bh-rev { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 6rem); align-items: start; }
.site[data-look="beauty"] .bh-rev > :is(h1, h2) { margin: 0; }
@media (min-width: 60rem) {
  .site[data-look="beauty"] .bh-reviews:is(.bh-reviews-2, .bh-reviews-3) .bh-rev { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-rows: auto 1fr; row-gap: clamp(2rem, 4vw, 3.25rem); }
  .site[data-look="beauty"] .bh-reviews:is(.bh-reviews-2, .bh-reviews-3) .bh-rev-cards { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
}
.site[data-look="beauty"] .bh-rev-lead { margin: 0; }
.site[data-look="beauty"] .bh-rev-lead blockquote { margin: 0; font-family: var(--font-heading); font-size: calc(clamp(1.9rem, 1.1rem + 2.7vw, 3.9rem) * var(--heading-scale)); line-height: 1.08; letter-spacing: -0.015em; max-width: 22ch; }
.site[data-look="beauty"] .bh-reviews-1 .bh-rev-lead blockquote { max-width: 26ch; }
.site[data-look="beauty"] .bh-rev blockquote p { margin: 0; text-wrap: pretty; }
.site[data-look="beauty"] .bh-q-open { margin-left: -0.3em; }
@media (max-width: 30rem) { .site[data-look="beauty"] .bh-q-open { margin-left: 0; } }
.site[data-look="beauty"] .bh-rev-lead figcaption { margin-top: 1.1rem; font-size: 1rem; color: var(--text); }
.site[data-look="beauty"] .bh-rev-lead figcaption::before { content: '– '; }
.site[data-look="beauty"] .bh-rev-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1.25rem, 2.5vw, 1.75rem); }
@media (min-width: 46rem) { .site[data-look="beauty"] .bh-reviews-4 .bh-rev-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site[data-look="beauty"] .bh-rev-card { margin: 0; padding: clamp(1.25rem, 2.6vw, 1.75rem) clamp(1.25rem, 3vw, 2rem); }
.site[data-look="beauty"] .bh-rev-card .bh-card-name { font-size: calc(1.15rem * var(--heading-scale)); padding-bottom: 0.6rem; border-bottom: 1px solid var(--on-card); }
.site[data-look="beauty"] .bh-rev-card blockquote { margin: 0.9rem 0 0; font-family: var(--font-heading); font-size: calc(clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem) * var(--heading-scale)); line-height: 1.22; }
.site[data-look="beauty"] .bh-rev-card figcaption { display: flex; align-items: baseline; gap: 0.75rem; margin-top: 1.1rem; }
.site[data-look="beauty"] .bh-rev-label { font-size: 0.8rem; color: var(--muted); }
.site[data-look="beauty"] .bh-rev-who { flex: 1; min-width: 0; padding: 0 0 0.2rem 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--on-card) 45%, transparent); font-weight: 600; overflow-wrap: anywhere; }

.site[data-look="beauty"] .bh-rev-cards > li { display: flex; }
.site[data-look="beauty"] .bh-rev-stock { flex: 1; display: flex; }
.site[data-look="beauty"] .bh-rev-card { flex: 1; }

/* --- Opening hours: the back of the appointment card ------------------ */
.site[data-look="beauty"] .bh-hours { background: var(--board); padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="beauty"] .bh-hours-inner { display: grid; gap: 2.5rem clamp(2rem, 6vw, 6rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="beauty"] .bh-hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.site[data-look="beauty"] .bh-hours-intro .hours-place { font-size: var(--fs-lead); line-height: 1.5; color: var(--text); margin: 0 0 1.25rem; }
.site[data-look="beauty"] .bh-hours-intro .hours-place a { display: inline-block; margin-top: 0.25rem; font-size: var(--fs-base); }
.site[data-look="beauty"] .bh-late { margin: 0 0 1.5rem; padding: 0.9rem 0; border-block: 1px solid color-mix(in srgb, var(--text) 30%, transparent); font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.35rem, 1.15rem + 0.8vw, 1.85rem) * var(--heading-scale)); line-height: 1.2; max-width: 26rem; }
.site[data-look="beauty"] .bh-hours-intro .hours-call a { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.6rem, 1.3rem + 1.2vw, 2.4rem) * var(--heading-scale)); text-decoration-thickness: 1px; }
.site[data-look="beauty"] .bh-back-stock { max-width: 36rem; width: 100%; justify-self: end; }
.site[data-look="beauty"] .bh-card-back { padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.25rem, 4vw, 2.8rem); }
.site[data-look="beauty"] .bh-card-back .bh-card-name { text-align: center; padding-bottom: 1rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--hair); }
.site[data-look="beauty"] .bh-card-back .hours-table { font-size: 1.08rem; }
.site[data-look="beauty"] .bh-card-back .hours-table :is(th, td) { padding: 0.62rem 0; border-bottom: 1px dotted color-mix(in srgb, var(--on-card) 35%, transparent); }
.site[data-look="beauty"] .bh-card-back .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="beauty"] .bh-card-back .hours-table th { font-weight: 600; padding-left: 1.1rem; }
.site[data-look="beauty"] .bh-card-back .hours-table th::before { left: 0 !important; top: 50% !important; bottom: auto !important; width: 0.5rem !important; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--primary) !important; box-shadow: 0 0 0 1px var(--on-card); }
.site[data-look="beauty"] .bh-card-back .hours-table th::after { background: var(--on-card); color: var(--card); border-radius: 1px; }

/* --- FAQ ---------------------------------------------------------------- */
.site[data-look="beauty"] .s-faq { padding-block: clamp(3.5rem, 7vw, 6rem); }
@media (min-width: 60rem) {
  .site[data-look="beauty"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .site[data-look="beauty"] .s-faq .faq-items { margin-top: 0.4rem; }
}
.site[data-look="beauty"] .faq-items { max-width: none; }
.site[data-look="beauty"] .faq-items details:first-child { border-top: 1px solid var(--text); }
.site[data-look="beauty"] .faq-items summary { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.35rem, 1.15rem + 0.7vw, 1.8rem) * var(--heading-scale)); min-height: 4.5rem; padding-block: 0.85rem; line-height: 1.15; }
.site[data-look="beauty"] .faq-items summary::after { font-family: var(--font-body); font-weight: 300; font-size: 1.6rem; transition: transform 0.25s; }
.site[data-look="beauty"] .faq-items summary:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
.site[data-look="beauty"] .faq-items details p { color: var(--text); font-size: var(--fs-base); max-width: 38rem; }
.site[data-look="beauty"] .faq-items dt { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.5rem; }

/* --- Call to action: a card left on the nail table ------------------- */
.site[data-look="beauty"] .bh-cta { position: relative; overflow: clip; background: var(--room); padding-block: clamp(4rem, 10vw, 9rem); }
.site[data-look="beauty"] .bh-cta.has-photo { min-height: min(calc(80 * var(--raam-vh)), 46rem); display: grid; align-items: center; }
.site[data-look="beauty"] .bh-cta-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="beauty"] .bh-cta-inner { position: relative; }
.site[data-look="beauty"] .bh-cta-stock { width: min(100%, 34rem); }
@media (min-width: 52rem) { .site[data-look="beauty"] .bh-cta.has-photo .bh-cta-stock { margin-left: auto; } }
.site[data-look="beauty"] .bh-cta-card { padding: clamp(1.6rem, 4.5vw, 3.25rem); }
.site[data-look="beauty"] .bh-cta-card :is(h1, h2) { font-size: calc(clamp(2.3rem, 1.6rem + 2.6vw, 4rem) * var(--heading-scale)); margin-bottom: 0.35em; }
.site[data-look="beauty"] .bh-cta-body { color: var(--muted); font-size: var(--fs-lead); margin: 0 0 1.5rem; }

/* --- Gallery: the room and its products, edge to edge ----------------- */
.site[data-look="beauty"] .s-gallery { padding-block: clamp(3rem, 6vw, 5rem) 0; }
.site[data-look="beauty"] .s-gallery > .wrap { width: 100%; max-width: none; }
.site[data-look="beauty"] .s-gallery > .wrap > :is(h1, h2) { padding-inline: max(var(--gap), (100% - var(--wrap)) / 2); }
.site[data-look="beauty"] .s-gallery .gallery-items { margin-top: clamp(1.5rem, 4vw, 3rem); gap: 4px; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: dense; }
.site[data-look="beauty"] .s-gallery .gallery-items li { background: var(--room); overflow: clip; grid-column: auto; grid-row: auto; }
.site[data-look="beauty"] .s-gallery .gallery-items li img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.site[data-look="beauty"] .s-gallery .gallery-items li:hover img { transform: scale(1.03); }
@media (min-width: 52rem) {
  .site[data-look="beauty"] .s-gallery .gallery-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site[data-look="beauty"] .s-gallery .gallery-items li:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .site[data-look="beauty"] .s-gallery .gallery-items li:nth-child(5n + 1) img { aspect-ratio: auto; }
  .site[data-look="beauty"] .s-gallery .gallery-items li:last-child:nth-child(5n + 1) { grid-column: 1 / -1; grid-row: auto; }
  .site[data-look="beauty"] .s-gallery .gallery-items li:last-child:nth-child(5n + 1) img { aspect-ratio: 3 / 1; }
}
@media (max-width: 51.99rem) { .site[data-look="beauty"] .s-gallery .gallery-items li:first-child:nth-last-child(odd) { grid-column: 1 / -1; } }
/* Two or three photos (hands, the table): tall crops edge to edge, the middle one wider. */
@media (min-width: 52rem) {
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr) minmax(0, 1fr); }
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(2):last-child) { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
  .site[data-look="beauty"] .gallery-grid .gallery-items:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(2):last-child)) li { grid-column: auto; grid-row: auto; }
  .site[data-look="beauty"] .gallery-grid .gallery-items:is(:has(> li:nth-child(3):last-child), :has(> li:nth-child(2):last-child)) img { aspect-ratio: auto; height: clamp(24rem, calc(68 * var(--raam-vh)), 44rem); }
}
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) li:first-child { grid-column: 1 / -1; }
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) li:first-child img { aspect-ratio: 4 / 3; }
  .site[data-look="beauty"] .gallery-grid .gallery-items:has(> li:nth-child(3):last-child) li:not(:first-child) img { aspect-ratio: 3 / 4; }
}
.site[data-look="beauty"] .gallery-masonry .gallery-items { display: block; columns: 3 16rem; column-gap: 4px; }
.site[data-look="beauty"] .gallery-masonry .gallery-items li { margin-bottom: 4px; }
.site[data-look="beauty"] .gallery-masonry .gallery-items img { aspect-ratio: auto; }

/* --- Claims and places: one printed line ------------------------------ */
.site[data-look="beauty"] .s-trust { background: var(--room); padding-block: 1.3rem; }
.site[data-look="beauty"] .trust-list { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(1.35rem * var(--heading-scale)); }
.site[data-look="beauty"] .trust-list li:not(:last-child)::after { content: '·'; margin-inline: 0.8rem; }
.site[data-look="beauty"] .s-area { padding-block: clamp(3.5rem, 8vw, 6rem); }
.site[data-look="beauty"] ul.area-list, .site[data-look="beauty"] .area-places { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(1.6rem, 1.2rem + 1.6vw, 2.6rem) * var(--heading-scale)); line-height: 1.2; max-width: none; }

/* --- Contact: big plain lines ----------------------------------------- */
.site[data-look="beauty"] .s-contact { padding-block: clamp(4rem, 9vw, 8rem); }
.site[data-look="beauty"] .contact-list { border-top: 1px solid var(--text); }
.site[data-look="beauty"] .contact-list li { border-bottom: 1px solid var(--hair); }
.site[data-look="beauty"] .contact-link { padding-block: 1.1rem; grid-template-columns: minmax(0, 1fr); }
.site[data-look="beauty"] .contact-label { font-size: 0.95rem; }
.site[data-look="beauty"] .contact-value { font-weight: var(--heading-weight); font-size: calc(clamp(1.7rem, 1.3rem + 1.8vw, 3rem) * var(--heading-scale)); letter-spacing: -0.01em; line-height: 1.05; transition: transform 0.25s; }
.site[data-look="beauty"] .contact-link:hover .contact-value { text-decoration-thickness: 1px; }
.site[data-look="beauty"] .contact-list li:first-child .contact-value { font-size: calc(clamp(2.1rem, 1.5rem + 2.6vw, 4rem) * var(--heading-scale)); }
.site[data-look="beauty"] .contact-also { margin-top: -0.5rem; }
.site[data-look="beauty"] .contact-form { border-top: 1px solid var(--text); }

/* --- Request form (module): filled in on the card stock, on the board -- */
.site[data-look="beauty"] .s-request { background: var(--board); }
.site[data-look="beauty"] .request-form { --text: var(--on-card); --muted: var(--card-muted); color: var(--on-card); background: var(--stock); border: 0; padding: clamp(1.25rem, 4vw, 2.75rem); filter: drop-shadow(0 0 0.5px rgb(30 29 34 / 0.55)); clip-path: var(--deckle); }
.site[data-look="beauty"] .request-form :is(input, select, textarea) { border: 0; border-bottom: 1px solid color-mix(in srgb, var(--on-card) 55%, transparent); border-radius: 0; background: transparent; }
.site[data-look="beauty"] .request-form :is(input, select, textarea):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.site[data-look="beauty"] .request-form textarea { border: 1px solid color-mix(in srgb, var(--on-card) 35%, transparent); }

/* --- Booking (module): on the appointment card's stock ----------------- */
.site[data-look="beauty"] .booking-inner { --bg: var(--card); --text: var(--on-card); --muted: var(--card-muted); color: var(--on-card); background: var(--card); box-shadow: var(--card-lie); border-radius: 3px; padding: clamp(1.25rem, 4vw, 2.75rem); }
.site[data-look="beauty"] .s-booking { background: var(--room); }
.site[data-look="beauty"] .booking-services { border-top: 1px solid var(--on-card); }
.site[data-look="beauty"] .booking-name { font-weight: 600; }

/* --- Footer: the name as the shop sign -------------------------------- */
.site[data-look="beauty"] .site-footer { --deep: var(--desk); --on-deep: var(--on-desk); --deep-muted: var(--desk-muted); background: var(--desk); padding-top: clamp(3.5rem, 8vw, 6rem); }
@media (min-width: 52rem) {
  .site[data-look="beauty"] .footer-inner { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-flow: row dense; row-gap: 0.35rem; }
  .site[data-look="beauty"] .footer-brand { display: contents; }
  .site[data-look="beauty"] .footer-brand .footer-name { grid-column: 1 / -1; }
  .site[data-look="beauty"] .footer-brand > p:not(.footer-name) { grid-column: 1; }
  .site[data-look="beauty"] .footer-col { grid-row: 2 / span 3; }
  .site[data-look="beauty"] .footer-col:nth-child(2) { grid-column: 2; }
  .site[data-look="beauty"] .footer-col:nth-child(3) { grid-column: 3; }
  .site[data-look="beauty"] .footer-col:nth-child(4) { grid-column: 4; }
}
.site[data-look="beauty"] .footer-brand .footer-name { font-size: calc(clamp(3rem, 1.5rem + 7vw, 9rem) * var(--heading-scale)); line-height: 0.9; letter-spacing: -0.02em; margin-bottom: 1.5rem; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="beauty"] .bh-foot[data-name="mid"] .footer-name { font-size: calc(clamp(2.6rem, 1.4rem + 5vw, 7rem) * var(--heading-scale)); }
.site[data-look="beauty"] .bh-foot[data-name="long"] .footer-name { font-size: calc(clamp(2rem, 1.2rem + 3.2vw, 4.6rem) * var(--heading-scale)); line-height: 1; hyphens: manual; max-width: 22ch; }
.site[data-look="beauty"] .footer-title { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(1.3rem * var(--heading-scale)); }

/* --- Phones: the quick bar on card stock ------------------------------ */
@media (max-width: 51.99rem) {
  .site[data-look="beauty"] .quickbar { --on-deep: var(--on-card); background: var(--card); border-top: 1px solid var(--hair); }
  .site[data-look="beauty"] .quick { font-family: var(--font-heading); font-weight: 400; font-size: 1.25rem; }
}

/* --- Motion: cards settle onto the desk as they come into view --------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes bh-settle { from { opacity: 0; transform: translateY(2.5rem); box-shadow: var(--card-edge), 0 40px 60px -30px rgb(30 29 34 / 0.5); } }
  @keyframes bh-lay { from { opacity: 0; transform: translateY(0.75rem); } }
  @supports (animation-timeline: view()) {
    .site[data-look="beauty"] :is(.bh-menu) { animation: bh-settle linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
  @supports (animation-timeline: view()) {
    .site[data-look="beauty"] :is(.bh-back-stock, .bh-cta-stock, .bh-rev-stock) { animation: bh-lay linear forwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
  }
  .site[data-look="beauty"] .bh-appt-stock { animation: bh-lay 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.15s both; }
}

/* ---- looks/bookkeeper.css ---- */
/* The bookkeeper look: everything here is scoped to .site[data-look="bookkeeper"]. Appended after base.css (bun run --filter @platform/sections css).

   An administratiekantoor's paper world (looks/bookkeeper.tsx): kasboek
   paper with green ruling and the red double margin, the year's deadlines as
   binder divider tabs, the price list as a punched kasboek page, reviews
   signed "voor akkoord", ordners on an archive shelf, a window envelope, the
   foot of the letterhead. Type: IBM Plex Sans, Plex Mono for every figure.
   Colours: paper #fff, ink #1b2430, ledger green #1f5e3b, ruling #dbe9df,
   deadline red #b3261e (deadlines only), the paper's own pale red margin
   rule, the envelope's blue, a pale desk green and aluminium for the door
   plate. Text pairs checked >= 4.5:1. */

.site[data-look="bookkeeper"] {
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-h2: calc(clamp(2.1rem, 1.35rem + 2.7vw, 3.9rem) * var(--heading-scale, 1));
  --fs-h3: calc(clamp(1.12rem, 1.06rem + 0.25vw, 1.3rem) * var(--heading-scale, 1));
  --margin-rule: #e3a39b;
  --envelope: #2b5687;
  --on-envelope: #ffffff;
  --envelope-muted: #d5e0ee;
  --desk: #e8eee9;
  --plate: #dfe3e2;
  --wrap: 76rem;
  hyphens: manual;
}
@media (max-width: 40rem) { .site[data-look="bookkeeper"] { --fs-base: 1.0625rem; } }
.site[data-look="bookkeeper"] main > .s + .s { border-top: 0; }
.site[data-look="bookkeeper"] :is(h1, h2) { letter-spacing: -0.028em; font-weight: 600; }
.site[data-look="bookkeeper"] h2 { line-height: 1.04; margin-bottom: 0.45em; }
.site[data-look="bookkeeper"] :is(h1, h2, h3) { hyphens: auto; overflow-wrap: break-word; }

/* --- Header: the letterhead, under a double green rule ---------------------- */
.site[data-look="bookkeeper"] .site-header { border-bottom: 3px double var(--ledger); }
.site[data-look="bookkeeper"] .brand { font-weight: 600; letter-spacing: -0.02em; font-size: calc(1.3rem * var(--heading-scale)); }
.site[data-look="bookkeeper"] .site-header nav a { font-weight: 400; }
.site[data-look="bookkeeper"] .site-header nav a[aria-current='page'] { text-decoration-color: var(--ledger); text-decoration-thickness: 3px; font-weight: 600; }

/* Buttons: the customer's colour (ledger green by default); pressed like a stamp. */
.site[data-look="bookkeeper"] .btn { min-height: 52px; padding: 0.75rem 1.4rem; font-weight: 600; transition: transform 0.12s ease, box-shadow 0.12s ease; box-shadow: 0 3px 0 color-mix(in srgb, var(--primary) 55%, #000); }
.site[data-look="bookkeeper"] .btn:hover { text-decoration: none; transform: translateY(1px); box-shadow: 0 2px 0 color-mix(in srgb, var(--primary) 55%, #000); }
.site[data-look="bookkeeper"] .btn:active { transform: translateY(3px); box-shadow: none; }
.site[data-look="bookkeeper"] .site-header .btn { min-height: 44px; box-shadow: none; }
.site[data-look="bookkeeper"] .cta-alt { font-weight: 500; text-decoration-color: var(--ledger); text-decoration-thickness: 2px; }

/* --- Hero: a sheet of kasboek paper beside the desk ------------------------------ */
.site[data-look="bookkeeper"] .bk-hero {
  padding: 0; overflow: clip;
  /* The ruling step: the headline's line height is three steps, the lead's one. */
  --h1: clamp(2.6rem, 0.9rem + 5.6vw, 6.6rem);
  --step: calc(var(--h1) / 3);
  --pad-x: max(calc(var(--gap) + 1.5rem), calc((100vw - var(--wrap)) / 2));
}
@media (max-width: 51.99rem) { .site[data-look="bookkeeper"] .bk-hero { --h1: clamp(2.35rem, 1.2rem + 6.2vw, 3.6rem); --step: calc(var(--h1) / 2); } }
.site[data-look="bookkeeper"] .bk-hero-grid { display: grid; }
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .bk-hero-grid { min-height: min(calc(calc(100 * var(--raam-vh)) - 4.6rem), 62rem); }
  .site[data-look="bookkeeper"] .bk-hero.has-photo .bk-hero-grid { grid-template-columns: minmax(0, 1.42fr) minmax(0, 1fr); }
}
.site[data-look="bookkeeper"] .bk-sheet {
  position: relative; min-width: 0; isolation: isolate;
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--step) * 1.5) var(--gap) calc(var(--step) * 1.5) var(--pad-x);
  background-color: var(--sheet);
  /* The red double margin rule; the green ruling is drawn from the text block (below), so the lines meet the words. */
  background-image: linear-gradient(90deg, transparent calc(var(--pad-x) - 1.35rem), var(--margin-rule) 0 calc(var(--pad-x) - 1.35rem + 1px), transparent 0 calc(var(--pad-x) - 1.35rem + 4px), var(--margin-rule) 0 calc(var(--pad-x) - 1.35rem + 5px), transparent 0);
  color: var(--on-sheet);
}
.site[data-look="bookkeeper"] .bk-hero-text::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  top: calc(var(--step) * -40); bottom: calc(var(--step) * -40); left: -100vw; right: -100vw;
  background: repeating-linear-gradient(to bottom, transparent 0 calc(var(--step) - 1px), var(--ruling) calc(var(--step) - 1px) var(--step));
}
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .bk-sheet { overflow: clip; }
  /* The stamp beside the buttons, in its own column, so it never covers words. */
  .site[data-look="bookkeeper"] .bk-hero-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 2rem; }
  .site[data-look="bookkeeper"] .bk-hero-text > :not(.actions, .bk-stamp) { grid-column: 1 / -1; }
  .site[data-look="bookkeeper"] .bk-hero .actions { min-height: 7rem; }
}
@media (max-width: 51.99rem) {
  /* Phones: the sheet is as tall as its words, so it carries the ruling itself. */
  .site[data-look="bookkeeper"] .bk-hero-text::before { display: none; }
  .site[data-look="bookkeeper"] .bk-sheet { background-image: linear-gradient(90deg, transparent calc(var(--pad-x) - 1.35rem), var(--margin-rule) 0 calc(var(--pad-x) - 1.35rem + 1px), transparent 0 calc(var(--pad-x) - 1.35rem + 4px), var(--margin-rule) 0 calc(var(--pad-x) - 1.35rem + 5px), transparent 0), repeating-linear-gradient(to bottom, transparent 0 calc(var(--step) - 1px), var(--ruling) calc(var(--step) - 1px) var(--step)); }
}
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .bk-hero.has-photo .bk-sheet { padding-right: clamp(2rem, 4vw, 4rem); }
}
.site[data-look="bookkeeper"] .bk-hero-text { max-width: 54rem; position: relative; }
.site[data-look="bookkeeper"] .bk-hero h1,
.site[data-look="bookkeeper"] .bk-hero .bk-hero-text > h2 {
  font-size: var(--h1); line-height: calc(var(--step) * 3); max-width: 15ch; margin: 0 0 var(--step);
  letter-spacing: -0.045em; font-weight: 600; hyphens: auto; hyphenate-limit-chars: 12 5 5;
}
@media (max-width: 51.99rem) { .site[data-look="bookkeeper"] .bk-hero h1, .site[data-look="bookkeeper"] .bk-hero .bk-hero-text > h2 { line-height: calc(var(--step) * 2); hyphens: auto; } }
.site[data-look="bookkeeper"] .bk-hero .lead { font-size: var(--fs-lead); line-height: var(--step); max-width: 34rem; color: var(--on-sheet); margin: 0; }
@media (min-width: 52rem) { .site[data-look="bookkeeper"] .bk-hero .lead { line-height: max(1.6em, calc(var(--step) * 0.75)); } }
.site[data-look="bookkeeper"] .bk-hero .actions { margin-top: calc(var(--step) * 0.75); gap: 0.75rem 1.5rem; }
.site[data-look="bookkeeper"] .bk-hero .actions .btn { font-size: 1.1rem; min-height: 56px; padding-inline: 1.6rem; }
.site[data-look="bookkeeper"] .bk-hero .hero-media { position: relative; min-height: 15rem; background: var(--desk); }
.site[data-look="bookkeeper"] .bk-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; border: 0; }
@media (max-width: 51.99rem) {
  /* The first screen: header, hero and the quick bar fill the phone exactly; the photo takes what the words leave. */
  .site[data-look="bookkeeper"] .bk-hero-grid { min-height: calc(calc(100 * var(--raam-vh)) - 3.75rem - 52px - var(--vb-bar, 0px)); grid-template-rows: minmax(11rem, 1fr) auto; }
  .site[data-look="bookkeeper"] .bk-hero.no-photo .bk-hero-grid { grid-template-rows: 1fr; }
  .site[data-look="bookkeeper"] .bk-hero .hero-media { order: -1; height: auto; min-height: 11rem; max-height: 26rem; }
  .site[data-look="bookkeeper"] .bk-sheet { padding-top: calc(var(--step) * 1); padding-bottom: calc(var(--step) * 2); --pad-x: calc(var(--gap) + 1.1rem); }
}

/* The next deadline, stamped on the sheet. Only when todayScript has said
   which one it is (html[data-deadline]); without it there is no stamp. */
.site[data-look="bookkeeper"] .bk-stamp {
  display: none; position: relative; z-index: 2; justify-self: end; align-self: center; width: max-content;
  margin: 0; padding: 0.55rem 0.95rem 0.6rem; transform: rotate(-5deg);
  border: 3px solid var(--deadline); outline: 1.5px solid var(--deadline); outline-offset: 3px;
  color: var(--deadline); font-family: var(--font-figures); text-transform: uppercase; letter-spacing: 0.08em; text-align: center; line-height: 1.2;
  background: color-mix(in srgb, var(--sheet) 80%, transparent);
  mix-blend-mode: multiply;
}
.site[data-look="bookkeeper"] .bk-stamp::before { content: attr(data-next-label); display: block; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.16em; padding-bottom: 0.3rem; margin-bottom: 0.35rem; border-bottom: 1.5px solid currentColor; }
.site[data-look="bookkeeper"] .bk-stamp-item { display: none; }
.site[data-look="bookkeeper"] .bk-stamp-what { display: block; font-size: 0.82rem; }
.site[data-look="bookkeeper"] .bk-stamp-date { display: block; font-size: clamp(1.35rem, 1rem + 1vw, 1.9rem); font-weight: 600; letter-spacing: 0.02em; }
:root[data-deadline] .site[data-look="bookkeeper"] .bk-stamp { display: block; }
:root[data-deadline="jan"] .site[data-look="bookkeeper"] .bk-stamp-item[data-key="jan"],
:root[data-deadline="apr"] .site[data-look="bookkeeper"] .bk-stamp-item[data-key="apr"],
:root[data-deadline="mei"] .site[data-look="bookkeeper"] .bk-stamp-item[data-key="mei"],
:root[data-deadline="jul"] .site[data-look="bookkeeper"] .bk-stamp-item[data-key="jul"],
:root[data-deadline="okt"] .site[data-look="bookkeeper"] .bk-stamp-item[data-key="okt"] { display: block; }
@media (max-width: 51.99rem) {
  /* Phones: the stamp sits on the photo's lower edge, clear of the text. */
  .site[data-look="bookkeeper"] .bk-hero.has-photo .bk-stamp { position: absolute; top: auto; bottom: calc(100% + var(--step) + 0.9rem); right: 0; background: var(--sheet); mix-blend-mode: normal; padding: 0.4rem 0.75rem 0.45rem; }
  .site[data-look="bookkeeper"] .bk-hero.has-photo .bk-stamp-date { font-size: 1.25rem; }
  .site[data-look="bookkeeper"] .bk-hero.no-photo .bk-stamp { position: relative; display: none; right: auto; bottom: auto; margin-top: calc(var(--step) * 1.25); margin-left: 0.4rem; }
  :root[data-deadline] .site[data-look="bookkeeper"] .bk-hero.no-photo .bk-stamp { display: block; }
}

/* --- The aangiftekalender: divider tabs pulled from the binder ----------------- */
:root .site[data-look="bookkeeper"] .deadlines {
  margin: 0; border: 0; padding: clamp(3rem, 7vw, 5.5rem) 0 clamp(3.25rem, 7vw, 6rem);
  background: var(--deep); color: var(--on-deep);
}
.site[data-look="bookkeeper"] .bk-cal-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.5rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="bookkeeper"] .bk-cal-title { font-size: var(--fs-h2); color: var(--on-deep); margin: 0; }
.site[data-look="bookkeeper"] .bk-cal-note { margin: 0; color: var(--deep-muted); max-width: 26rem; font-size: 1rem; }
/* The year as a ruler: twelve months, the deadline months in white. */
.site[data-look="bookkeeper"] .bk-year { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); margin: 0 0 clamp(2.5rem, 4vw, 3.25rem); border-top: 1px solid color-mix(in srgb, var(--on-deep) 35%, transparent); font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--deep-muted); }
.site[data-look="bookkeeper"] .bk-year span { position: relative; padding: 0.55rem 0 0 0.45rem; border-left: 1px solid color-mix(in srgb, var(--on-deep) 18%, transparent); }
.site[data-look="bookkeeper"] .bk-year span:is(.tick-start, .tick-end) { color: var(--on-deep); }
.site[data-look="bookkeeper"] .bk-year span:is(.tick-start, .tick-end)::before { content: ''; position: absolute; top: -0.65rem; height: 1.3rem; width: 3px; background: var(--on-deep); }
.site[data-look="bookkeeper"] .bk-year span.tick-start::before { left: -2px; }
.site[data-look="bookkeeper"] .bk-year span.tick-end::before { right: -2px; }
@media (max-width: 40rem) { .site[data-look="bookkeeper"] .bk-year { display: none; } }

:root .site[data-look="bookkeeper"] .deadline-list { display: grid; gap: clamp(0.6rem, 1.2vw, 1rem); grid-template-columns: repeat(5, minmax(0, 1fr)); border: 0; background: none; margin: 0; padding: 0; }
:root .site[data-look="bookkeeper"] .deadline {
  --tab-w: 4.6rem;
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; grid-column: auto; grid-row: auto; min-width: 0;
  margin: 2.15rem 0 0; padding: 1.15rem 1.15rem 1.25rem; border: 0; border-radius: 0 0 2px 2px;
  background-color: var(--sheet); color: var(--on-sheet); text-align: left; box-shadow: none;
  background-image: repeating-linear-gradient(to bottom, transparent 0 1.95rem, var(--ruling) 1.95rem 2rem);
  background-position: 0 0.4rem;
  transition: transform 0.25s cubic-bezier(0.2, 0.8, 0.3, 1);
}
:root .site[data-look="bookkeeper"] .deadline > span { background: none; padding-inline: 0; }
/* The tab: where its month falls in the year, as the tabs of a jan–dec set stagger. */
.site[data-look="bookkeeper"] .bk-tab {
  position: absolute; bottom: 100%; left: calc((var(--m) - 1) / 11 * (100% - var(--tab-w)));
  width: var(--tab-w); height: 2.15rem; border-radius: 7px 7px 0 0; background: var(--sheet) !important;
  font-family: var(--font-figures); font-size: 0.86rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; line-height: 2.25rem; text-align: center; color: var(--on-sheet);
}
.site[data-look="bookkeeper"] .bk-date { display: grid; grid-template-columns: auto; align-items: end; column-gap: 0.5rem; color: var(--deadline); font-family: var(--font-figures); }
@media (min-width: 75rem) { .site[data-look="bookkeeper"] .bk-date { grid-template-columns: auto 1fr; } }
.site[data-look="bookkeeper"] .bk-by { grid-column: 1 / -1; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site[data-look="bookkeeper"] .bk-day { font-size: clamp(3.4rem, 2.4rem + 2.6vw, 4.6rem); line-height: 0.95; font-weight: 500; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; }
.site[data-look="bookkeeper"] .bk-month { font-size: 1.05rem; padding-bottom: 0.35rem; font-weight: 500; }
:root .site[data-look="bookkeeper"] .deadline-date { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
:root .site[data-look="bookkeeper"] .deadline-what { margin-top: auto; padding-top: 1.6rem; font-weight: 600; font-size: clamp(0.95rem, 0.85rem + 0.2vw, 1.02rem); line-height: 1.35; hyphens: auto; hyphenate-limit-chars: 12 5 5; overflow-wrap: break-word; }
/* The next one: pulled up out of the binder, its tab red, stamped. */
:root .site[data-look="bookkeeper"] .deadline::after { display: none; }
:root[data-deadline="jan"] .site[data-look="bookkeeper"] .deadline[data-key="jan"],
:root[data-deadline="apr"] .site[data-look="bookkeeper"] .deadline[data-key="apr"],
:root[data-deadline="mei"] .site[data-look="bookkeeper"] .deadline[data-key="mei"],
:root[data-deadline="jul"] .site[data-look="bookkeeper"] .deadline[data-key="jul"],
:root[data-deadline="okt"] .site[data-look="bookkeeper"] .deadline[data-key="okt"] { transform: translateY(-1.1rem); padding: 1.15rem 1.15rem 0; }
:root[data-deadline="jan"] .site[data-look="bookkeeper"] .deadline[data-key="jan"] .bk-tab,
:root[data-deadline="apr"] .site[data-look="bookkeeper"] .deadline[data-key="apr"] .bk-tab,
:root[data-deadline="mei"] .site[data-look="bookkeeper"] .deadline[data-key="mei"] .bk-tab,
:root[data-deadline="jul"] .site[data-look="bookkeeper"] .deadline[data-key="jul"] .bk-tab,
:root[data-deadline="okt"] .site[data-look="bookkeeper"] .deadline[data-key="okt"] .bk-tab { background: var(--deadline) !important; color: var(--on-deadline); }
:root[data-deadline="jan"] .site[data-look="bookkeeper"] .deadline[data-key="jan"]::after,
:root[data-deadline="apr"] .site[data-look="bookkeeper"] .deadline[data-key="apr"]::after,
:root[data-deadline="mei"] .site[data-look="bookkeeper"] .deadline[data-key="mei"]::after,
:root[data-deadline="jul"] .site[data-look="bookkeeper"] .deadline[data-key="jul"]::after,
:root[data-deadline="okt"] .site[data-look="bookkeeper"] .deadline[data-key="okt"]::after {
  display: block; visibility: visible; position: static; grid-column: 1 / -1; justify-self: stretch; margin: 1.1rem -1.15rem 0; padding: 0.5rem 1.15rem;
  background: var(--deadline); color: var(--on-deadline); border: 0; outline: 0; transform: none;
  font-family: var(--font-figures); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.14em; line-height: 1.4;
}
@media (max-width: 51.99rem) {
  :root .site[data-look="bookkeeper"] .deadline-list { grid-template-columns: minmax(0, 1fr); }
  :root .site[data-look="bookkeeper"] .deadline { display: grid; grid-template-columns: 5.6rem minmax(0, 1fr); align-items: center; column-gap: 0.9rem; margin-top: 1.95rem; padding: 0.7rem 1rem 0.75rem; }
  .site[data-look="bookkeeper"] .bk-tab { height: 1.95rem; line-height: 2rem; --tab-w: 4rem; }
  :root .site[data-look="bookkeeper"] .deadline-list { gap: 0.25rem; }
  .site[data-look="bookkeeper"] .bk-date { grid-template-columns: auto; }
  .site[data-look="bookkeeper"] .bk-by { display: none; }
  :root .site[data-look="bookkeeper"] .deadline-what { padding-top: 0; }
  .site[data-look="bookkeeper"] .bk-day { font-size: 2.6rem; }
  .site[data-look="bookkeeper"] .bk-month { padding-bottom: 0; font-size: 0.95rem; }
  :root[data-deadline="jan"] .site[data-look="bookkeeper"] .deadline[data-key="jan"],
  :root[data-deadline="apr"] .site[data-look="bookkeeper"] .deadline[data-key="apr"],
  :root[data-deadline="mei"] .site[data-look="bookkeeper"] .deadline[data-key="mei"],
  :root[data-deadline="jul"] .site[data-look="bookkeeper"] .deadline[data-key="jul"],
  :root[data-deadline="okt"] .site[data-look="bookkeeper"] .deadline[data-key="okt"] { transform: none; padding: 0.7rem 1rem 0; }
  :root[data-deadline] .site[data-look="bookkeeper"] .deadline::after { margin: 0.7rem -1rem 0; padding-inline: 1rem; }
}

/* --- Services: a kasboek page, punched for the ordner --------------------------- */
.site[data-look="bookkeeper"] .s-services { background: var(--desk); }
.site[data-look="bookkeeper"] .bk-ledger {
  position: relative; max-width: 62rem; margin-inline: auto;
  padding: clamp(1.75rem, 4.5vw, 3.75rem) clamp(1.1rem, 4vw, 3.75rem) clamp(2.25rem, 5vw, 4rem) clamp(3rem, 7.5vw, 6.5rem);
  background-color: var(--sheet); color: var(--on-sheet);
  /* The punched margin: the red double rule along the holes. */
  background-image: linear-gradient(90deg, transparent calc(clamp(3rem, 7.5vw, 6.5rem) - 1.1rem), var(--margin-rule) 0 calc(clamp(3rem, 7.5vw, 6.5rem) - 1.1rem + 1px), transparent 0 calc(clamp(3rem, 7.5vw, 6.5rem) - 1.1rem + 4px), var(--margin-rule) 0 calc(clamp(3rem, 7.5vw, 6.5rem) - 1.1rem + 5px), transparent 0);
  box-shadow: 0 1px 1px rgb(27 36 48 / 0.08), 0 24px 40px -28px rgb(27 36 48 / 0.45);
}
/* Two ordner holes, 8 cm apart, in the margin. */
.site[data-look="bookkeeper"] .bk-holes { position: absolute; left: clamp(0.85rem, 2.6vw, 2.2rem); top: clamp(4rem, 30%, 16rem); width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--desk); box-shadow: inset 0 2px 2px rgb(27 36 48 / 0.28); }
.site[data-look="bookkeeper"] .bk-holes::after { content: ''; position: absolute; left: 0; top: 7.5rem; width: 100%; height: 100%; border-radius: 50%; background: var(--desk); box-shadow: inset 0 2px 2px rgb(27 36 48 / 0.28); }
.site[data-look="bookkeeper"] .bk-ledger .sheet-head { max-width: 46rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="bookkeeper"] .bk-ledger .sheet-head > :is(h1, h2) { margin-bottom: 0.25em; }
.site[data-look="bookkeeper"] .bk-ledger .sheet-head .lead { color: var(--sheet-muted); }
/* The columns: dienst | bedrag (to the cent; vanaf and the unit with it). */
.site[data-look="bookkeeper"] .bk-ledger { --cols: minmax(0, 1fr); }
.site[data-look="bookkeeper"] .bk-ledger.has-prices { --cols: minmax(0, 1fr) 9rem; }
.site[data-look="bookkeeper"] .bk-ledger :is(.sheet-cols, .service) { display: grid; grid-template-columns: var(--cols); }
.site[data-look="bookkeeper"] .bk-ledger .sheet-cols {
  margin: 0; border-top: 3px double var(--on-sheet); border-bottom: 1.5px solid var(--on-sheet);
  font-family: var(--font-figures); font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sheet-muted);
}
.site[data-look="bookkeeper"] .bk-ledger .sheet-cols span { padding: 0.5rem 0.75rem 0.45rem 0; }
.site[data-look="bookkeeper"] .bk-ledger .sheet-cols .bk-col-amount { text-align: right; padding-left: 0.75rem; border-left: 3px double var(--ruling); }
.site[data-look="bookkeeper"] .bk-ledger .service-list { margin: 0; border: 0; }
.site[data-look="bookkeeper"] .bk-ledger .service { padding: 0; border-bottom: 1px solid var(--ruling); transition: background-color 0.15s ease; }
.site[data-look="bookkeeper"] .bk-ledger .service:last-child { border-bottom: 3px double var(--on-sheet); }
.site[data-look="bookkeeper"] .bk-ledger .service:hover { background-color: color-mix(in srgb, var(--ruling) 40%, transparent); }
.site[data-look="bookkeeper"] .bk-ledger .service-body { padding: 1rem 1.25rem 1.05rem 0; min-width: 0; }
.site[data-look="bookkeeper"] .bk-ledger .service :is(h2, h3) { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.01em; margin: 0; }
.site[data-look="bookkeeper"] .bk-ledger .service-note { margin: 0.25rem 0 0; color: var(--sheet-muted); font-size: 1rem; }
.site[data-look="bookkeeper"] .bk-amount { margin: 0; padding: 0.95rem 0.75rem 0.9rem; border-left: 3px double var(--ruling); text-align: right; }
.site[data-look="bookkeeper"] .bk-fig { display: grid; justify-items: end; font-family: var(--font-figures); font-variant-numeric: tabular-nums; color: var(--ledger); }
.site[data-look="bookkeeper"] .bk-num { font-weight: 500; font-size: 1.2rem; line-height: 1.3; white-space: nowrap; }
.site[data-look="bookkeeper"] :is(.bk-from, .bk-per) { font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--sheet-muted); line-height: 1.2; white-space: nowrap; }
.site[data-look="bookkeeper"] .bk-from { margin-bottom: 0.15rem; }
.site[data-look="bookkeeper"] .bk-per { margin-top: 0.15rem; }
@media (max-width: 40rem) {
  .site[data-look="bookkeeper"] .bk-ledger.has-prices { --cols: minmax(0, 1fr) 6.4rem; }
  .site[data-look="bookkeeper"] .bk-ledger { margin-inline: calc(-1 * var(--gap)); padding-left: 2.6rem; padding-right: 0.9rem; background-image: linear-gradient(90deg, transparent 2rem, var(--margin-rule) 0 calc(2rem + 1px), transparent 0 calc(2rem + 4px), var(--margin-rule) 0 calc(2rem + 5px), transparent 0); }
  .site[data-look="bookkeeper"] .bk-holes { left: 0.55rem; width: 0.9rem; height: 0.9rem; }
  .site[data-look="bookkeeper"] .bk-ledger .service-body { padding-right: 0.75rem; }
  .site[data-look="bookkeeper"] .bk-amount { padding-inline: 0.5rem 0; }
  .site[data-look="bookkeeper"] .bk-num { font-size: 1.05rem; }
}

/* --- About: the desk, cut to the edge of the page ------------------------------ */
.site[data-look="bookkeeper"] .s-about { padding-block: 0; overflow: clip; --bleed: calc(-1 * (100vw - min(100vw - 2 * var(--gap), var(--wrap))) / 2); }
.site[data-look="bookkeeper"] .about-inner { gap: 0 clamp(2rem, 6vw, 6rem); align-items: stretch; }
.site[data-look="bookkeeper"] .about-text { padding-block: var(--section-pad); align-self: center; max-width: 36rem; }
.site[data-look="bookkeeper"] .about-text > p { font-size: 1.15rem; }
.site[data-look="bookkeeper"] .about-text > p:first-of-type { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.4; letter-spacing: -0.01em; }
.site[data-look="bookkeeper"] .about-img { aspect-ratio: auto; height: 100%; min-height: 22rem; }
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .about-image_right .about-media { margin-right: var(--bleed); }
  .site[data-look="bookkeeper"] .about-image_left .about-media { margin-left: var(--bleed); }
  .site[data-look="bookkeeper"] .about-media { min-height: 34rem; position: relative; }
  .site[data-look="bookkeeper"] .about-media .about-img { position: absolute; inset: 0; }
}
@media (max-width: 51.99rem) {
  .site[data-look="bookkeeper"] .about-media { margin-inline: calc(-1 * var(--gap)); }
  .site[data-look="bookkeeper"] .about-img { min-height: 0; aspect-ratio: 4 / 3; max-height: 26rem; }
  .site[data-look="bookkeeper"] .about-text { padding-bottom: calc(var(--section-pad) * 0.6); }
  .site[data-look="bookkeeper"] .s-about:has(.about-media) { padding-bottom: 0; }
}

/* --- Reviews: signed "voor akkoord" ----------------------------------------------- */
.site[data-look="bookkeeper"] .bk-reviews { background: var(--deep); color: var(--on-deep); --text: var(--on-deep); --muted: var(--deep-muted); }
.site[data-look="bookkeeper"] .bk-reviews .quote-list { gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.site[data-look="bookkeeper"] .bk-reviews[data-count="1"] .quote-list { grid-template-columns: minmax(0, 52rem); }
@media (min-width: 52rem) { .site[data-look="bookkeeper"] .bk-reviews[data-count="3"] .quote-list > li:first-child { grid-column: 1 / -1; max-width: 56rem; } }
.site[data-look="bookkeeper"] .bk-reviews .quote-list figure { border: 0; padding: 0; display: flex; flex-direction: column; height: 100%; }
.site[data-look="bookkeeper"] .bk-reviews blockquote { margin: 0 0 1.75rem; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.95rem); line-height: 1.35; letter-spacing: -0.015em; }
.site[data-look="bookkeeper"] .bk-reviews .quote-list > li:first-child blockquote { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.5rem); }
.site[data-look="bookkeeper"] .bk-reviews blockquote p { text-indent: -0.42em; }
/* The signature block: "voor akkoord", room to sign, the line, the typed name. */
.site[data-look="bookkeeper"] .bk-reviews figcaption { margin-top: auto; display: grid; grid-template-rows: auto 2.4rem auto; width: min(100%, 21rem); color: var(--text); font-weight: 400; font-size: 1rem; }
.site[data-look="bookkeeper"] .bk-sign-label { font-family: var(--font-figures); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.site[data-look="bookkeeper"] .bk-sign-name { grid-row: 3; border-top: 1.5px solid var(--text); padding-top: 0.45rem; font-weight: 600; }

/* --- Werkgebied: ordners on the archive shelf, one per place ---------------------- */
.site[data-look="bookkeeper"] .bk-area { background: var(--desk); overflow: clip; }
.site[data-look="bookkeeper"] .bk-area-inner { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 5rem); align-items: end; }
@media (min-width: 64rem) { .site[data-look="bookkeeper"] .bk-area-inner { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.5fr); } }
.site[data-look="bookkeeper"] .bk-area-text { align-self: center; }
.site[data-look="bookkeeper"] .bk-area .area-body { color: var(--muted); max-width: 30rem; }
.site[data-look="bookkeeper"] .bk-shelf {
  --spine: #1f2731; --plank: 0.85rem;
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: calc(var(--plank) + 1.75rem) 0.3rem; padding: 0 0.5rem calc(var(--plank)); margin: 0;
}
.site[data-look="bookkeeper"] .bk-ordner {
  position: relative; display: flex; flex-direction: column; align-items: center;
  width: clamp(3.9rem, 5.4vw, 4.9rem); height: clamp(15rem, 24vw, 20rem); padding: 1.35rem 0 0;
  background: var(--spine); border-radius: 3px 3px 1px 1px;
  /* Cloth over board: a lighter edge left, a shadow right. */
  box-shadow: inset 2px 0 0 rgb(255 255 255 / 0.14), inset -3px 0 0 rgb(0 0 0 / 0.35);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.site[data-look="bookkeeper"] .bk-ordner:nth-child(5n + 3) { --spine: var(--ledger); }
/* The shelf plank under each ordner (they meet into one board). */
.site[data-look="bookkeeper"] .bk-ordner::after { content: ''; position: absolute; left: -0.3rem; right: 0; top: 100%; height: var(--plank); background: #8b9592; box-shadow: inset 0 2px 0 rgb(255 255 255 / 0.35), 0 6px 8px -6px rgb(0 0 0 / 0.5); }
.site[data-look="bookkeeper"] .bk-ordner:last-child::after { right: -0.5rem; }

/* The finger hole, a metal ring near the foot. */
.site[data-look="bookkeeper"] .bk-ordner::before { content: ''; position: absolute; bottom: 1.4rem; left: 50%; width: 1.85rem; height: 1.85rem; margin-left: -0.925rem; border-radius: 50%; background: #0d1116; box-shadow: 0 0 0 3px #b9c0c3, 0 0 0 4px rgb(0 0 0 / 0.4), inset 0 3px 4px rgb(0 0 0 / 0.7); }
.site[data-look="bookkeeper"] .bk-spine-label {
  display: flex; align-items: center; justify-content: center;
  width: 72%; height: 62%; padding: 0.6rem 0.2rem; overflow: hidden;
  background: var(--sheet); color: var(--on-sheet); border-radius: 1px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08), 0 0 0 2px rgb(255 255 255 / 0.12);
  /* Read from the foot up, as spines are in the Netherlands. */
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-weight: 600; font-size: 1.08rem; line-height: 1.1; letter-spacing: -0.01em; overflow-wrap: anywhere;
}
@media (hover: hover) { .site[data-look="bookkeeper"] .bk-ordner:hover { transform: translateY(-0.6rem); } }
@media (max-width: 40rem) {
  /* Phones: the ordners lie in a stack, the labels read across. */
  .site[data-look="bookkeeper"] .bk-shelf { flex-direction: column; align-items: stretch; gap: 3px; padding: 0; }
  .site[data-look="bookkeeper"] .bk-ordner { width: auto; height: auto; min-height: 3.6rem; flex-direction: row; padding: 0.55rem 3.4rem 0.55rem 0.6rem; border-radius: 2px; }
  .site[data-look="bookkeeper"] .bk-ordner::after { display: none; }
  .site[data-look="bookkeeper"] .bk-ordner::before { bottom: auto; top: 50%; left: auto; right: 1rem; margin: -0.8rem 0 0; width: 1.6rem; height: 1.6rem; }
  .site[data-look="bookkeeper"] .bk-spine-label { writing-mode: horizontal-tb; transform: none; width: 100%; height: auto; min-height: 2.5rem; padding: 0.35rem 0.75rem; }
}

/* --- Kantoortijden: the plate beside the office door ------------------------------ */
.site[data-look="bookkeeper"] .s-hours { background: var(--sheet); }
.site[data-look="bookkeeper"] .hours-inner { align-items: center; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .site[data-look="bookkeeper"] .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 40rem) { .site[data-look="bookkeeper"] .hours-table th { white-space: normal; } .site[data-look="bookkeeper"] .hours-table td { white-space: nowrap; } }
.site[data-look="bookkeeper"] .hours-place { color: var(--muted); }
.site[data-look="bookkeeper"] .hours-call { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }
.site[data-look="bookkeeper"] .hours-call a { text-decoration-color: var(--ledger); text-decoration-thickness: 2px; font-weight: 600; }
.site[data-look="bookkeeper"] .hours-card {
  position: relative; max-width: 30rem; width: 100%; justify-self: center;
  padding: clamp(1.75rem, 4vw, 2.6rem) clamp(1.6rem, 4.5vw, 3rem);
  border-radius: 3px; color: #1b2430;
  /* Brushed aluminium with four screws. */
  background:
    radial-gradient(circle at 1.1rem 1.1rem, #8a9294 0 0.3rem, #f4f6f6 0.32rem 0.42rem, transparent 0.44rem),
    radial-gradient(circle at calc(100% - 1.1rem) 1.1rem, #8a9294 0 0.3rem, #f4f6f6 0.32rem 0.42rem, transparent 0.44rem),
    radial-gradient(circle at 1.1rem calc(100% - 1.1rem), #8a9294 0 0.3rem, #f4f6f6 0.32rem 0.42rem, transparent 0.44rem),
    radial-gradient(circle at calc(100% - 1.1rem) calc(100% - 1.1rem), #8a9294 0 0.3rem, #f4f6f6 0.32rem 0.42rem, transparent 0.44rem),
    repeating-linear-gradient(90deg, rgb(255 255 255 / 0.22) 0 1px, transparent 1px 3px),
    linear-gradient(170deg, #eceff0, var(--plate) 45%, #cfd5d5);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.8), inset 0 -1px 0 rgb(0 0 0 / 0.12), 0 1px 2px rgb(0 0 0 / 0.25), 0 18px 30px -22px rgb(27 36 48 / 0.6);
}
.site[data-look="bookkeeper"] .hours-table { font-size: 1.05rem; }
.site[data-look="bookkeeper"] .hours-table :is(th, td) { border-bottom: 1px solid rgb(27 36 48 / 0.18); padding-block: 0.6rem; }
.site[data-look="bookkeeper"] .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="bookkeeper"] .hours-table td { font-size: 1rem; white-space: nowrap; padding-left: 1rem; }
.site[data-look="bookkeeper"] .bk-plate-name { margin: 0 0 0.9rem; padding-bottom: 0.8rem; border-bottom: 1.5px solid rgb(27 36 48 / 0.55); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.55rem); letter-spacing: -0.015em; line-height: 1.15; color: #1b2430; text-shadow: 0 1px 0 rgb(255 255 255 / 0.7); hyphens: auto; overflow-wrap: break-word; }
.site[data-look="bookkeeper"] .hours-table .is-closed :is(th, td) { color: #4a5563; }
.site[data-look="bookkeeper"] .hours-table th::after { background: var(--ledger); color: #fff; }
.site[data-look="bookkeeper"] .hours-table th::before { background: var(--ledger) !important; }

/* --- Contact: the business's window envelope ------------------------------------------- */
.site[data-look="bookkeeper"] .bk-contact { background: var(--desk); }
/* Never two desk-green bands in a row. */
.site[data-look="bookkeeper"] :is(.s-services, .s-area, .s-request, .s-faq) + :is(.bk-contact, .s-area, .s-request, .s-faq) { background: var(--sheet); }
.site[data-look="bookkeeper"] .bk-contact .contact-inner { align-items: center; }
.site[data-look="bookkeeper"] .bk-contact .contact-details { display: block; }
.site[data-look="bookkeeper"] .bk-contact .contact-list { margin-top: 1.75rem; }
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .bk-contact .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); }
  .site[data-look="bookkeeper"] .bk-contact.has-form .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; }
  .site[data-look="bookkeeper"] .bk-contact.has-form .contact-form { grid-column: 2; grid-row: 1 / span 2; }
}
.site[data-look="bookkeeper"] .bk-contact .contact-list { border-top: 3px double var(--text); margin-top: 1.75rem; }
.site[data-look="bookkeeper"] .bk-contact .contact-list li { border-bottom: 1px solid color-mix(in srgb, var(--text) 18%, transparent); }
.site[data-look="bookkeeper"] .bk-contact .contact-label { font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.site[data-look="bookkeeper"] .bk-contact .contact-value { font-weight: 600; letter-spacing: -0.02em; }
.site[data-look="bookkeeper"] .bk-contact .contact-list li:first-child .contact-value { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); font-family: var(--font-figures); letter-spacing: -0.04em; font-weight: 500; }
.site[data-look="bookkeeper"] .bk-contact .contact-link:hover .contact-value { text-decoration-color: var(--ledger); }
.site[data-look="bookkeeper"] .bk-envelope {
  position: relative; aspect-ratio: 229 / 162; width: 100%; max-width: 40rem; justify-self: end;
  background: var(--envelope); color: var(--on-envelope); overflow: hidden;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.15), 0 30px 40px -30px rgb(27 36 48 / 0.7);
  transform: rotate(1.2deg);
  transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.3, 1);
}
@media (hover: hover) { .site[data-look="bookkeeper"] .bk-envelope:hover { transform: rotate(0deg) translateY(-4px); } }
/* The flap folded behind, seen as faint diagonals through the paper. */
.site[data-look="bookkeeper"] .bk-flap { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to bottom right, transparent calc(50% - 1px), rgb(0 0 0 / 0.07) 50%, transparent calc(50% + 1px)) left top / 50% 62% no-repeat, linear-gradient(to bottom left, transparent calc(50% - 1px), rgb(0 0 0 / 0.07) 50%, transparent calc(50% + 1px)) right top / 50% 62% no-repeat; }
.site[data-look="bookkeeper"] .bk-window {
  position: absolute; z-index: 1; left: 8.5%; top: 44%; width: 50%; min-height: 30%;
  padding: 0.9rem 1.1rem; border-radius: 5px; background: #fbfcfd; color: var(--on-sheet);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08);
}
.site[data-look="bookkeeper"] .bk-window p { margin: 0; line-height: 1.35; }
.site[data-look="bookkeeper"] .bk-window-name { font-weight: 600; font-size: clamp(0.95rem, 0.8rem + 0.6vw, 1.15rem); overflow-wrap: break-word; hyphens: auto; }
.site[data-look="bookkeeper"] .bk-window-address { font-family: var(--font-figures); font-size: clamp(0.82rem, 0.75rem + 0.3vw, 0.95rem); }
.site[data-look="bookkeeper"] .bk-window-address a { text-decoration: none; }
.site[data-look="bookkeeper"] .bk-window-address a:hover { text-decoration: underline; }
.site[data-look="bookkeeper"] .bk-window-address span { display: block; }
.site[data-look="bookkeeper"] .bk-envelope-route { position: absolute; z-index: 1; right: 6%; bottom: 7%; margin: 0; font-size: 0.95rem; }
.site[data-look="bookkeeper"] .bk-envelope-route a { color: var(--on-envelope); text-decoration-thickness: 1.5px; text-underline-offset: 0.25em; font-weight: 500; display: inline-flex; min-height: 44px; align-items: center; }
.site[data-look="bookkeeper"] .bk-kix { display: block; margin-top: 0.55rem; height: 0.85rem; width: auto; max-width: 100%; fill: var(--on-sheet); }
@media (max-width: 51.99rem) {
  .site[data-look="bookkeeper"] .bk-envelope { justify-self: stretch; aspect-ratio: auto; min-height: 15rem; max-width: none; transform: none; }
  .site[data-look="bookkeeper"] .bk-window { position: relative; left: auto; top: auto; width: auto; margin: 5.5rem 1rem 1rem; }
  .site[data-look="bookkeeper"] .bk-envelope-route { position: relative; right: auto; bottom: auto; margin: 0 1rem 0.75rem; }
}
.site[data-look="bookkeeper"] .bk-contact .contact-form { background: var(--sheet); padding: clamp(1.25rem, 3vw, 2rem); border-top: 3px double var(--text); }

/* --- Forms (request form, booking): a printed form, tinted fields ------------------ */
.site[data-look="bookkeeper"] .s-request { background: var(--desk); }
.site[data-look="bookkeeper"] .s-booking { background: var(--sheet); }
.site[data-look="bookkeeper"] .request-form { background: var(--sheet); padding: clamp(1.25rem, 3.5vw, 2.5rem); border-top: 3px double var(--text); box-shadow: 0 24px 40px -30px rgb(27 36 48 / 0.45); }
.site[data-look="bookkeeper"] form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { background: #f3f7f4; border: 0; border-bottom: 1.5px solid var(--text); border-radius: 0; }
.site[data-look="bookkeeper"] form label, .site[data-look="bookkeeper"] form legend { font-weight: 600; }
.site[data-look="bookkeeper"] .request-step > legend { font-size: 1.35rem; }
.site[data-look="bookkeeper"] .booking-services { border-top: 3px double var(--text); background: var(--sheet); }
.site[data-look="bookkeeper"] .booking-services li { border-bottom-color: var(--ruling); }
.site[data-look="bookkeeper"] .booking-services a { padding-inline: 1rem; }
.site[data-look="bookkeeper"] .booking-services a:hover { background: color-mix(in srgb, var(--ruling) 40%, transparent); }
.site[data-look="bookkeeper"] .booking-go { color: var(--ledger); text-decoration-color: var(--ledger); }
.site[data-look="bookkeeper"] .booking-choices a { border-color: var(--ruling); border-width: 1.5px; }

/* --- FAQ and the call-to-action band ------------------------------------------------ */
/* FAQ: index cards from the card box (systeemkaarten): a rose header rule,
   pale blue lines, the question on the header, the answer on the lines. */
.site[data-look="bookkeeper"] .s-faq { background: var(--desk); }
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.45fr); gap: 0 clamp(2rem, 6vw, 5rem); align-items: start; }
  .site[data-look="bookkeeper"] .s-faq > .wrap > :is(h1, h2) { position: sticky; top: 7rem; }
  .site[data-look="bookkeeper"] .s-faq .faq-items { margin-top: 0.4rem; max-width: none; }
}
.site[data-look="bookkeeper"] .faq-items { display: grid; gap: 0.6rem; }
.site[data-look="bookkeeper"] .faq-items details,
.site[data-look="bookkeeper"] .faq-items details:first-child {
  --line: 1.85rem;
  --lines: repeating-linear-gradient(to bottom, transparent 0 calc(var(--line) - 1px), #d7e3ee calc(var(--line) - 1px) var(--line));
  border: 0; background: var(--sheet); color: var(--on-sheet);
  padding: 0 clamp(1rem, 3vw, 1.75rem);
  box-shadow: 0 1px 1px rgb(27 36 48 / 0.08), 0 10px 18px -14px rgb(27 36 48 / 0.4);
  transition: transform 0.2s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.site[data-look="bookkeeper"] .faq-items summary { font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); min-height: 4.1rem; padding-block: 0.7rem 0.6rem; line-height: 1.35; border-bottom: 2px solid var(--margin-rule); }
.site[data-look="bookkeeper"] .faq-items details:not([open])::after { content: ''; display: block; height: 2.3rem; background: var(--lines); }
.site[data-look="bookkeeper"] .faq-items details p { font-size: 1.05rem; line-height: var(--line); margin: 0.12rem 0 0; padding: 0 0 var(--line); color: var(--sheet-muted); max-width: none; background: var(--lines); }
.site[data-look="bookkeeper"] .faq-items summary::after { font-family: var(--font-figures); color: var(--ledger); font-size: 1.6rem; }
@media (hover: hover) { .site[data-look="bookkeeper"] .faq-items details:not([open]):hover { transform: translateY(-3px); } }
.site[data-look="bookkeeper"] .s-cta { background: var(--envelope); color: var(--on-envelope); --text: var(--on-envelope); --muted: var(--envelope-muted); }
.site[data-look="bookkeeper"] .s-cta .cta-inner p { color: var(--envelope-muted); }
.site[data-look="bookkeeper"] .s-cta .btn { box-shadow: 0 3px 0 rgb(0 0 0 / 0.35); border-color: var(--on-envelope); }

/* --- Gallery: the customer's photos on a ruled sheet, each with its caption ---------------- */
.site[data-look="bookkeeper"] .bk-gallery { background: var(--desk); }
.site[data-look="bookkeeper"] .bk-sheetgrid {
  display: grid; gap: 0; margin-top: clamp(1.5rem, 3vw, 2.25rem); columns: auto;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
  background: var(--sheet); border-top: 3px double var(--on-sheet); border-bottom: 3px double var(--on-sheet);
  box-shadow: 0 24px 40px -30px rgb(27 36 48 / 0.45);
}
.site[data-look="bookkeeper"] .bk-sheetgrid li { margin: 0; background: none; break-inside: auto; padding: clamp(0.75rem, 1.6vw, 1.1rem); border-right: 1px solid var(--ruling); border-bottom: 1px solid var(--ruling); }
.site[data-look="bookkeeper"] .bk-sheetgrid figure { margin: 0; display: flex; flex-direction: column; height: 100%; }
.site[data-look="bookkeeper"] .bk-sheetgrid img { width: 100%; aspect-ratio: 4 / 3; height: auto; object-fit: cover; background: var(--desk); }
.site[data-look="bookkeeper"] .bk-sheetgrid figcaption { margin-top: 0.65rem; padding-top: 0.5rem; border-top: 1px solid var(--ruling); font-family: var(--font-figures); font-size: 0.82rem; line-height: 1.4; color: var(--sheet-muted); overflow-wrap: break-word; }
@media (min-width: 52rem) {
  .site[data-look="bookkeeper"] .bk-sheetgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  /* Three or five photos: the first one large, across two columns and rows. */
  .site[data-look="bookkeeper"] .bk-gallery:is([data-count="3"], [data-count="5"]) .bk-sheetgrid li:first-child { grid-column: span 2; grid-row: span 2; }
  .site[data-look="bookkeeper"] .bk-gallery:is([data-count="3"], [data-count="5"]) .bk-sheetgrid li:first-child img { aspect-ratio: 4 / 3; }
  .site[data-look="bookkeeper"] .bk-gallery[data-count="1"] .bk-sheetgrid { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="bookkeeper"] .bk-gallery[data-count="1"] .bk-sheetgrid img { aspect-ratio: 16 / 7; }
  .site[data-look="bookkeeper"] .bk-gallery:is([data-count="2"], [data-count="4"]) .bk-sheetgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Footer: the foot of the letterhead ------------------------------------------- */
.site[data-look="bookkeeper"] .bk-footer { padding-top: clamp(3.5rem, 8vw, 6rem); border-top: 0; }
.site[data-look="bookkeeper"] .bk-footer .footer-name {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); color: var(--on-deep);
  font-family: var(--font-heading); font-weight: 600; letter-spacing: -0.04em; line-height: 0.98;
  font-size: clamp(2.3rem, 1rem + 5.4vw, 6.25rem); max-width: 18ch; hyphens: auto; overflow-wrap: break-word;
}
.site[data-look="bookkeeper"] .bk-letterfoot { display: flex; flex-wrap: wrap; gap: 0.4rem 0; padding-top: 1rem; border-top: 3px double color-mix(in srgb, var(--on-deep) 45%, transparent); font-family: var(--font-figures); font-size: 0.92rem; color: var(--on-deep); }
.site[data-look="bookkeeper"] .bk-letterfoot li { padding-right: 1.1rem; margin-right: 1.1rem; border-right: 1px solid color-mix(in srgb, var(--on-deep) 30%, transparent); overflow-wrap: anywhere; }
.site[data-look="bookkeeper"] .bk-letterfoot li:last-child { border-right: 0; margin-right: 0; }
.site[data-look="bookkeeper"] .bk-letterfoot a { text-decoration: none; display: inline-block; padding-block: 0.3rem; }
.site[data-look="bookkeeper"] .bk-letterfoot a:hover { text-decoration: underline; }
.site[data-look="bookkeeper"] .bk-footer-nav ul { display: flex; flex-wrap: wrap; gap: 0.25rem 1.6rem; margin-top: 1.5rem; }
.site[data-look="bookkeeper"] .bk-footer-nav a { display: inline-block; padding-block: 0.45rem; color: var(--deep-muted); text-decoration: none; }
.site[data-look="bookkeeper"] .bk-footer-nav a:hover { color: var(--on-deep); text-decoration: underline; }
@media (max-width: 40rem) { .site[data-look="bookkeeper"] .bk-letterfoot { flex-direction: column; } .site[data-look="bookkeeper"] .bk-letterfoot li { border: 0; margin: 0; padding: 0; } }

/* --- Quick bar (phones): paper under a double green rule ---------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="bookkeeper"] .quickbar { --on-deep: var(--text); background: var(--bg); border-top: 3px double var(--ledger); }
  .site[data-look="bookkeeper"] .quick { font-weight: 600; }
  .site[data-look="bookkeeper"] .quick + .quick { border-left-color: var(--ruling); }
}

/* --- Motion: small, and only for those who want it --------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  :root[data-deadline] .site[data-look="bookkeeper"] .bk-stamp { animation: bk-stamp 0.45s cubic-bezier(0.3, 1.4, 0.5, 1) 0.5s both; }
  @keyframes bk-stamp { from { transform: rotate(-11deg) scale(1.5); opacity: 0; } to { transform: rotate(-5deg) scale(1); opacity: 1; } }
  @media (hover: hover) {
    :root .site[data-look="bookkeeper"] .deadline:hover { transform: translateY(-0.45rem); }
  }
  @supports (animation-timeline: view()) {
    .site[data-look="bookkeeper"] .bk-ordner { animation: bk-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .site[data-look="bookkeeper"] .bk-ordner:nth-child(even) { animation-range: entry 0% entry 70%; }
    @keyframes bk-rise { from { translate: 0 1.2rem; } to { translate: 0 0; } }
  }
}
@media (prefers-reduced-motion: reduce) { .site[data-look="bookkeeper"] * { transition: none !important; } }

/* ---- looks/cleaner.css ---- */
/* The cleaner look: everything here is scoped to .site[data-look="cleaner"]. Appended after base.css (bun run --filter @platform/sections css).
   The world: the schoonmaakrooster (a printed schedule grid, ink rules, column
   heads), the werkkast (a laminate cupboard door with the weekrooster in a
   punched plastic sleeve), the four-colour cloth code (rood sanitair, geel
   keuken, blauw interieur, groen vloer) only where it means something: the
   zone squares on the rooster and the cloth rack. Surfaces: paper (--bg),
   floor (--surface with tile joints), laminate (the door), steel (the key
   cabinet), white wall tiles (reviews), night (--deep: the cloth rack, after
   hours). The cloth colours are fills only: no text ever sits on them. */

.site[data-look="cleaner"] {
  --cl-rood: #d3262e;
  --cl-geel: #f2c200;
  --cl-blauw: #1d5fd0;
  --cl-groen: #1e8a4b;
  --cl-lam: #e3e5e0;
  --cl-lam-edge: #c9ccc6;
  --cl-rule: color-mix(in srgb, var(--text) 26%, transparent);
  --cl-ink: 2px solid var(--text);
  --cl-pad: clamp(1rem, 2.2vw, 1.5rem);
  --fs-base: 1.125rem;
  --fs-sm: 1rem;
  --wrap: 78rem;
}
@media (max-width: 40rem) { .site[data-look="cleaner"] { --fs-base: 1.0625rem; --fs-sm: 0.95rem; } }
.site[data-look="cleaner"] :is(h1, h2, h3) { font-weight: 800; letter-spacing: -0.025em; }
/* A customer may pick a pairing whose display face has one weight only: no faux bold. */
.site[data-look="cleaner"] :is(h1, h2, h3, .brand, .footer-name, .contact-value) { font-synthesis-weight: none; }
.site[data-look="cleaner"] main > .s + .s { border-top: 0; }
.site[data-look="cleaner"] main > .s :is(h1, h2) { font-size: clamp(2.3rem, 1.35rem + 3vw, 4.25rem); line-height: 0.98; letter-spacing: -0.035em; max-width: 18ch; }
.site[data-look="cleaner"] .lead { color: var(--text); font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.45; }
.site[data-look="cleaner"] :where(p, li, dd) { hyphens: auto; }
.site[data-look="cleaner"] .cl-notes-list blockquote p { hyphens: manual; }

/* --- Surfaces: night and floor bands by section type; a band never sits
   against one of its own kind (the second falls back to paper). ----------- */
.site[data-look="cleaner"] main > :is(.s-gallery, .cl-rack-band):not(:is(.s-gallery, .cl-rack-band) + *) {
  --bg: var(--deep);
  --text: var(--on-deep);
  --muted: var(--deep-muted);
  --border: color-mix(in srgb, var(--on-deep) 24%, transparent);
  --cl-rule: color-mix(in srgb, var(--on-deep) 30%, transparent);
  background: var(--deep);
  color: var(--on-deep);
}
.site[data-look="cleaner"] main > :is(.s-services, .s-area, .s-contact, .s-cta, .s-request, .s-booking):not(:is(.s-services, .s-area, .s-contact, .s-cta, .s-request, .s-booking) + *) {
  --cl-joint: color-mix(in srgb, var(--text) 9%, transparent);
  background-color: var(--surface);
  /* Large floor tiles (60 x 60), drawn as their joints. */
  background-image: linear-gradient(var(--cl-joint) 1px, transparent 1px), linear-gradient(90deg, var(--cl-joint) 1px, transparent 1px);
  background-size: 9rem 9rem;
  background-position: -1px -1px;
}
.site[data-look="cleaner"] main > :is(.s-services, .s-area, .s-contact, .s-cta, .s-request, .s-booking) + :is(.s-services, .s-area, .s-contact, .s-cta, .s-request, .s-booking) + :is(.s-services, .s-area, .s-contact, .s-cta, .s-request, .s-booking) {
  --cl-joint: color-mix(in srgb, var(--text) 9%, transparent);
  background-color: var(--surface);
  background-image: linear-gradient(var(--cl-joint) 1px, transparent 1px), linear-gradient(90deg, var(--cl-joint) 1px, transparent 1px);
  background-size: 9rem 9rem;
  background-position: -1px -1px;
}
/* Two paper sections in a row: an ink rule between them, like the rooster's. */
.site[data-look="cleaner"] main > :is(.s-testimonials, .s-faq, .s-about, .s-hero) + :is(.s-testimonials, .s-faq, .s-about) { border-top: 1px solid var(--cl-rule); }

/* --- Header: the name in ink over an ink rule. ---------------------------- */
.site[data-look="cleaner"] .site-header { border-bottom: var(--cl-ink); }
.site[data-look="cleaner"] .brand { font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); }
.site[data-look="cleaner"] .site-header nav a { font-weight: 650; }

/* --- Buttons: square, heavy; on hover a squeegee stroke wipes across. ---- */
.site[data-look="cleaner"] .btn { position: relative; overflow: hidden; isolation: isolate; min-height: 54px; padding: 0.8rem 1.5rem; font-weight: 750; font-size: 1.08rem; letter-spacing: -0.005em; border-radius: 0; }
.site[data-look="cleaner"] .btn::after { content: ''; position: absolute; inset: 0; z-index: -1; background: currentColor; opacity: 0.16; transform: translateX(-101%); }
.site[data-look="cleaner"] .btn:hover { text-decoration: none; }
.site[data-look="cleaner"] .btn:hover::after, .site[data-look="cleaner"] .btn:focus-visible::after { transform: translateX(0); }
.site[data-look="cleaner"] .site-header .btn { min-height: 46px; padding: 0.55rem 1.1rem; font-size: 1rem; }
.site[data-look="cleaner"] .cta-alt { font-size: 1.08rem; text-decoration-thickness: 2px; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="cleaner"] .btn::after { transition: transform 0.38s cubic-bezier(0.3, 0.7, 0.2, 1); }
}

/* --- Hero: the headline at full scale, the photo to the page edge, the
   rooster's head across the bottom. --------------------------------------- */
.site[data-look="cleaner"] .cl-hero { padding: 0; display: grid; grid-template-rows: 1fr auto; container-type: inline-size; }
.site[data-look="cleaner"] .cl-hero-grid { display: grid; min-width: 0; }
.site[data-look="cleaner"] .cl-hero .hero-text { min-width: 0; align-self: center; padding: clamp(2.5rem, calc(7 * var(--raam-vh)), 5.5rem) var(--gap) clamp(2.5rem, calc(6 * var(--raam-vh)), 4.5rem); }
.site[data-look="cleaner"] .cl-hero :is(h1, h2) { max-width: 14ch; margin: 0 0 0.3em; font-weight: 800; line-height: 0.93; letter-spacing: -0.04em; text-wrap: balance; hyphens: manual; overflow-wrap: break-word; }
.site[data-look="cleaner"] .cl-hero[data-size="xl"] :is(h1, h2) { font-size: clamp(3.4rem, 1rem + 7.4vw, 9.5rem); max-width: 10ch; }
.site[data-look="cleaner"] .cl-hero[data-size="l"] :is(h1, h2) { font-size: clamp(3rem, 1rem + 5.2vw, 7.25rem); max-width: 13ch; }
.site[data-look="cleaner"] .cl-hero[data-size="m"] :is(h1, h2) { font-size: clamp(2.6rem, 1.3rem + 3.7vw, 5.5rem); max-width: 16ch; }
.site[data-look="cleaner"] .cl-hero[data-size="s"] :is(h1, h2) { font-size: clamp(2.2rem, 1.2rem + 2.7vw, 4.25rem); max-width: 20ch; }
.site[data-look="cleaner"] .cl-hero .lead { max-width: 34rem; margin: 0; }
.site[data-look="cleaner"] .cl-hero .actions { margin-top: clamp(1.5rem, calc(3.5 * var(--raam-vh)), 2.5rem); }
.site[data-look="cleaner"] .cl-hero .hero-media { position: relative; min-width: 0; overflow: hidden; background: var(--surface); }
.site[data-look="cleaner"] .cl-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-hero { min-height: min(calc(calc(100 * var(--raam-vh)) - 9rem), 62rem); }
  .site[data-look="cleaner"] .cl-hero-grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  .site[data-look="cleaner"] .cl-hero .hero-text { padding-left: max(var(--gap), (100cqw - var(--wrap)) / 2); padding-right: clamp(2rem, 4vw, 4.5rem); }
  .site[data-look="cleaner"] .cl-hero .hero-media { min-height: 26rem; border-left: var(--cl-ink); }
}
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .cl-hero .hero-text { padding-top: clamp(2rem, calc(6 * var(--raam-vh)), 3rem); padding-bottom: 2rem; }
  .site[data-look="cleaner"] .cl-hero .hero-media { aspect-ratio: 16 / 10; max-height: calc(40 * var(--raam-vh)); width: 100%; border-top: var(--cl-ink); }
  .site[data-look="cleaner"] .cl-hero .actions .btn { flex: 1 1 auto; max-width: 22rem; }
}
/* No photo: the rooster card on the floor beside the headline. */
.site[data-look="cleaner"] .cl-hero-floor { --cl-joint: color-mix(in srgb, var(--text) 9%, transparent); display: grid; place-items: center; padding: clamp(2rem, 5vw, 4rem); background-color: var(--surface); background-image: linear-gradient(var(--cl-joint) 1px, transparent 1px), linear-gradient(90deg, var(--cl-joint) 1px, transparent 1px); background-size: 9rem 9rem; }
.site[data-look="cleaner"] .cl-hero-floor .cl-card { position: static; width: min(100%, 28rem); font-size: 1.1rem; }
@media (max-width: 51.99rem) { .site[data-look="cleaner"] .cl-hero-floor { display: none; } }
@media (min-width: 52rem) { .site[data-look="cleaner"] .cl-hero.text-only .cl-hero-grid { grid-template-columns: minmax(0, 1fr); } .site[data-look="cleaner"] .cl-hero.text-only :is(h1, h2) { max-width: 18ch; } }

/* A folded cloth: the colour, a darker fold near the top, the weave. */
.site[data-look="cleaner"] .cl-tab {
  display: block; position: relative; background: var(--cloth);
  background-image: linear-gradient(to bottom, transparent 0 30%, rgb(0 0 0 / 0.16) 30% calc(30% + 2px), transparent 0), repeating-linear-gradient(90deg, rgb(255 255 255 / 0.07) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 -1px 0 rgb(0 0 0 / 0.25);
}
.site[data-look="cleaner"] [data-cloth="rood"] { --cloth: var(--cl-rood); }
.site[data-look="cleaner"] [data-cloth="geel"] { --cloth: var(--cl-geel); }
.site[data-look="cleaner"] [data-cloth="blauw"] { --cloth: var(--cl-blauw); }
.site[data-look="cleaner"] [data-cloth="groen"] { --cloth: var(--cl-groen); }

/* The rooster's head: the printed fields at the top of a schedule. */
.site[data-look="cleaner"] .cl-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); margin: 0; border-top: var(--cl-ink); background: var(--bg); }
.site[data-look="cleaner"] .cl-head > div { min-width: 0; padding: 0.95rem var(--cl-pad) 1.05rem; border-left: 1px solid var(--cl-rule); }
.site[data-look="cleaner"] .cl-head dt { font-size: 0.86rem; font-weight: 650; color: var(--muted); line-height: 1.3; }
.site[data-look="cleaner"] .cl-head dd { margin: 0.15rem 0 0; font-weight: 700; font-size: 1.06rem; line-height: 1.3; font-variant-numeric: tabular-nums; overflow-wrap: break-word; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-head { display: flex; padding-inline: max(var(--gap), (100cqw - var(--wrap)) / 2); }
  .site[data-look="cleaner"] .cl-head > div { flex: 1 1 0; }
  .site[data-look="cleaner"] .cl-head > div:first-child { padding-left: 0; border-left: 0; flex-grow: 1.2; }
  .site[data-look="cleaner"] .cl-head > [data-field="area"] { flex-grow: 2; }
  .site[data-look="cleaner"] .cl-head > [data-field="since"] { flex: 0 0 auto; }
  .site[data-look="cleaner"] .cl-head > [data-field="hours"] { flex-grow: 1.6; }
}
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .cl-head dd { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; overflow: hidden; }
  .site[data-look="cleaner"] .cl-head > div { border-top: 1px solid var(--cl-rule); }
  .site[data-look="cleaner"] .cl-head > div:first-child { border-top: 0; }
  /* The name is in the header just above. */
  .site[data-look="cleaner"] .cl-head > [data-field="by"] { display: none; }
  .site[data-look="cleaner"] .cl-head > [data-field="by"] + div { border-top: 0; }
}

/* The corner of the rooster beside a headline without a photo. */
.site[data-look="cleaner"] .cl-card { width: min(23rem, calc(100% - 2.5rem)); background: var(--bg); color: var(--text); border: var(--cl-ink); font-size: 1rem; }
.site[data-look="cleaner"] .cl-card-title { margin: 0; padding: 0.45rem 0.9rem; background: var(--text); color: var(--bg); font-weight: 700; font-size: 0.92rem; }
.site[data-look="cleaner"] .cl-card ul { margin: 0; }
.site[data-look="cleaner"] .cl-card li { display: grid; grid-template-columns: 3.6rem minmax(0, 1fr); align-items: center; border-top: 1px solid var(--cl-rule); }
.site[data-look="cleaner"] .cl-card li:first-child { border-top: 0; }
.site[data-look="cleaner"] .cl-card .cl-zones { padding: 0.6rem 0.55rem 0.6rem 0.9rem; gap: 3px; min-height: 100%; border-right: 1px solid var(--cl-rule); align-items: center; }
.site[data-look="cleaner"] .cl-card .cl-tab { width: 0.6rem; height: 0.85rem; }
.site[data-look="cleaner"] .cl-card-name { padding: 0.55rem 0.9rem; font-weight: 700; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site[data-look="cleaner"] .cl-card.no-zones li { grid-template-columns: minmax(0, 1fr); }
.site[data-look="cleaner"] .cl-hero-floor .cl-card-name { white-space: normal; overflow-wrap: break-word; padding-block: 0.7rem; }
@media (max-width: 51.99rem) { .site[data-look="cleaner"] .cl-card { display: none; } }

/* --- Services: the rooster. ---------------------------------------------- */
.site[data-look="cleaner"] .cl-rooster { --cl-cols: minmax(0, 1fr) minmax(0, 1.55fr); background: var(--bg); border: var(--cl-ink); }
.site[data-look="cleaner"] .cl-rooster.has-prices { --cl-cols: minmax(0, 1fr) minmax(0, 1.55fr) minmax(9.5rem, 0.6fr); }
.site[data-look="cleaner"] .cl-rooster.has-zones { --cl-cols: 6.25rem minmax(0, 1fr) minmax(0, 1.55fr); }
.site[data-look="cleaner"] .cl-rooster.has-zones.has-prices { --cl-cols: 6.25rem minmax(0, 1fr) minmax(0, 1.55fr) minmax(9.5rem, 0.6fr); }
.site[data-look="cleaner"] .cl-rooster-head { max-width: none; padding: clamp(1.5rem, 3.5vw, 2.75rem) var(--cl-pad) clamp(1.25rem, 3vw, 2rem); border-bottom: var(--cl-ink); }
.site[data-look="cleaner"] .cl-rooster-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 1rem 3rem; }
.site[data-look="cleaner"] .cl-rooster-head :is(h1, h2) { margin: 0; }
.site[data-look="cleaner"] .cl-doc { display: grid; margin: 0; padding-left: 1rem; border-left: 1px solid var(--cl-rule); font-size: 0.95rem; line-height: 1.4; color: var(--muted); font-variant-numeric: tabular-nums; }
.site[data-look="cleaner"] .cl-doc-title { color: var(--text); font-weight: 750; font-size: 1.05rem; }
@media (max-width: 40rem) { .site[data-look="cleaner"] .cl-doc { display: none; } }
.site[data-look="cleaner"] .cl-rooster-head .lead { margin-top: 0.75rem; max-width: 44rem; }
.site[data-look="cleaner"] .cl-cols { display: none; }
.site[data-look="cleaner"] .cl-rows { margin: 0; border: 0; }
.site[data-look="cleaner"] .cl-row { padding: 0; border-bottom: 1px solid var(--cl-rule); transition: background-color 0.2s; }
.site[data-look="cleaner"] .cl-row:last-child { border-bottom: 0; }
.site[data-look="cleaner"] .cl-row:hover { background: color-mix(in srgb, var(--text) 3.5%, var(--bg)); }
.site[data-look="cleaner"] .cl-row .cl-name { margin: 0; font-size: clamp(1.25rem, 1.05rem + 0.75vw, 1.7rem); line-height: 1.12; letter-spacing: -0.02em; hyphens: auto; overflow-wrap: break-word; }
.site[data-look="cleaner"] .cl-row .service-note { margin: 0; max-width: none; color: var(--text); font-size: 1.0625rem; line-height: 1.5; }
.site[data-look="cleaner"] .cl-row .price { margin: 0; font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); font-weight: 750; white-space: normal; font-variant-numeric: tabular-nums lining-nums; line-height: 1.25; }
.site[data-look="cleaner"] .cl-row :is(.price-from, .price-unit) { font-weight: 450; font-size: 0.78em; color: var(--muted); }
.site[data-look="cleaner"] .cl-row .price-from { display: block; }
.site[data-look="cleaner"] .cl-empty { color: var(--muted); }
.site[data-look="cleaner"] .cl-zones { display: flex; gap: 4px; align-items: flex-start; }
.site[data-look="cleaner"] .cl-tab { flex: none; width: 1rem; height: 1.35rem; transition: transform 0.2s cubic-bezier(0.3, 0.7, 0.2, 1); }
.site[data-look="cleaner"] .cl-row:hover .cl-tab { transform: translateY(-4px); }
.site[data-look="cleaner"] .cl-row:hover .cl-tab:nth-child(2) { transition-delay: 0.04s; }
.site[data-look="cleaner"] .cl-row:hover .cl-tab:nth-child(3) { transition-delay: 0.08s; }
.site[data-look="cleaner"] .cl-row:hover .cl-tab:nth-child(4) { transition-delay: 0.12s; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-cols { display: grid; grid-template-columns: var(--cl-cols); margin: 0; background: var(--text); color: var(--bg); font-weight: 700; font-size: 0.95rem; }
  .site[data-look="cleaner"] .cl-cols span { padding: 0.6rem var(--cl-pad); }
  .site[data-look="cleaner"] .cl-cols span + span { border-left: 1px solid color-mix(in srgb, var(--bg) 30%, transparent); }
  .site[data-look="cleaner"] .cl-cols .cl-col-price { text-align: right; }
  .site[data-look="cleaner"] .cl-row { display: grid; grid-template-columns: var(--cl-cols); }
  .site[data-look="cleaner"] .cl-row > * { padding: 1.3rem var(--cl-pad) 1.4rem; }
  .site[data-look="cleaner"] .cl-row > * + * { border-left: 1px solid var(--cl-rule); }
  .site[data-look="cleaner"] .cl-row .price { text-align: right; }
  .site[data-look="cleaner"] .cl-zones { padding-top: 1.55rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .cl-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "zones zones" "name price" "note note"; column-gap: 1rem; row-gap: 0.4rem; padding: 1.1rem var(--cl-pad) 1.2rem; align-items: start; }
  .site[data-look="cleaner"] .cl-row .cl-zones { grid-area: zones; }
  .site[data-look="cleaner"] .cl-zones:empty { display: none; }
  .site[data-look="cleaner"] .cl-row .cl-name { grid-area: name; }
  .site[data-look="cleaner"] .cl-row .price { grid-area: price; text-align: right; max-width: 8.5rem; }
  .site[data-look="cleaner"] .cl-row .price:has(> .cl-empty:only-child) { display: none; }
  .site[data-look="cleaner"] .cl-row .service-note { grid-area: note; }
  .site[data-look="cleaner"] .cl-row .cl-empty.service-note { display: none; }
  .site[data-look="cleaner"] .cl-tab { width: 0.8rem; height: 1.05rem; }
}
/* The key to the colours, at the foot of the sheet. */
.site[data-look="cleaner"] .cl-code { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.75rem; padding: 1rem var(--cl-pad) 1.1rem; border-top: var(--cl-ink); font-size: 0.98rem; }
.site[data-look="cleaner"] .cl-code p { margin: 0; color: var(--muted); }
.site[data-look="cleaner"] .cl-code ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; }
.site[data-look="cleaner"] .cl-code li { display: inline-flex; align-items: center; gap: 0.5rem; }
.site[data-look="cleaner"] .cl-code li span:not(.cl-tab) { font-weight: 700; }
.site[data-look="cleaner"] .cl-code .cl-tab { width: 0.85rem; height: 1.1rem; }

/* --- About: text beside a tall photo that runs to the page edge. -------- */
.site[data-look="cleaner"] .cl-about, .site[data-look="cleaner"] main > .cl-about:first-child { padding-block: 0; container-type: inline-size; }
.site[data-look="cleaner"] main > .cl-about { max-width: none; margin-inline: 0; }
.site[data-look="cleaner"] .cl-about-grid { display: grid; }
.site[data-look="cleaner"] .cl-about .about-text { max-width: none; padding: var(--section-pad) var(--gap); }
.site[data-look="cleaner"] .cl-about .about-text > p:first-of-type { font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.75rem); line-height: 1.35; font-weight: 600; letter-spacing: -0.01em; max-width: 30ch; }
.site[data-look="cleaner"] .cl-about .about-text > p { max-width: 38rem; }
.site[data-look="cleaner"] .cl-about .about-media { position: relative; min-height: 22rem; overflow: hidden; background: var(--surface); }
.site[data-look="cleaner"] .cl-about .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.site[data-look="cleaner"] .cl-year { display: grid; gap: 0.35rem; margin: clamp(2rem, 5vw, 3.5rem) 0 0; padding-top: 0.75rem; border-top: var(--cl-ink); max-width: 22rem !important; }
.site[data-look="cleaner"] .cl-year span { font-size: 1rem; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.site[data-look="cleaner"] .cl-year strong { font-weight: 800; }
.site[data-look="cleaner"] .cl-year strong { font-size: clamp(4rem, 2.4rem + 5vw, 7.5rem); letter-spacing: -0.05em; line-height: 0.85; font-variant-numeric: lining-nums; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-about.has-photo .cl-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(52rem, calc(88 * var(--raam-vh))); }
  .site[data-look="cleaner"] .cl-about .about-text { padding-left: max(var(--gap), (100cqw - var(--wrap)) / 2); padding-right: clamp(2rem, 5vw, 5rem); align-self: center; }
  .site[data-look="cleaner"] .cl-about.about-image_left .about-media { order: -1; }
  /* No photo: the founding year set large beside the text. */
  .site[data-look="cleaner"] .cl-about:not(.has-photo) .about-text { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: clamp(3rem, 8vw, 8rem); align-items: start; padding-right: max(var(--gap), (100cqw - var(--wrap)) / 2); }
  .site[data-look="cleaner"] .cl-about:not(.has-photo) .about-text > :not(.cl-year) { grid-column: 1; }
  .site[data-look="cleaner"] .cl-about:not(.has-photo) .cl-year { grid-column: 2; grid-row: 1 / span 6; align-self: end; margin: 0; }
  .site[data-look="cleaner"] .cl-about.about-image_left .about-text { padding-left: clamp(2rem, 5vw, 5rem); padding-right: max(var(--gap), (100cqw - var(--wrap)) / 2); }
}
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .cl-about .about-media { min-height: 0; aspect-ratio: 4 / 3; max-height: 30rem; }
}

/* --- Gallery: photos edge to edge at night, rows that always fill. ------- */
.site[data-look="cleaner"] .s-gallery .gallery-items { display: flex; flex-wrap: wrap; gap: 4px; }
.site[data-look="cleaner"] .s-gallery .gallery-items li { flex: 1 1 18rem; height: clamp(14rem, 24vw, 22rem); overflow: hidden; background: color-mix(in srgb, var(--on-deep) 8%, var(--deep)); }
.site[data-look="cleaner"] .s-gallery .gallery-items li:first-child { flex-basis: 34rem; flex-grow: 2; }
.site[data-look="cleaner"] .s-gallery .gallery-items img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform 0.6s cubic-bezier(0.3, 0.7, 0.2, 1); }
.site[data-look="cleaner"] .s-gallery .gallery-items li:hover img { transform: scale(1.03); }
@media (max-width: 40rem) { .site[data-look="cleaner"] .s-gallery .gallery-items li { flex-basis: 100%; height: auto; aspect-ratio: 4 / 3; } }

/* --- Reviews: the aftekenlijst on a clipboard, on a wall of white tiles. */
.site[data-look="cleaner"] main > .cl-notes { --cl-grout: color-mix(in srgb, var(--text) 10%, transparent); background-color: var(--bg); background-image: linear-gradient(var(--cl-grout) 1px, transparent 1px), linear-gradient(90deg, var(--cl-grout) 1px, transparent 1px); background-size: 4.5rem 4.5rem; background-position: center top; border-top: 0; }
.site[data-look="cleaner"] .cl-clipboard { position: relative; max-width: 66rem; margin-inline: auto; padding: clamp(2.25rem, 4vw, 3rem) clamp(0.6rem, 1.6vw, 1.1rem) clamp(0.6rem, 1.6vw, 1.1rem); background: #1d262d; border-radius: 10px; box-shadow: 0 1px 0 rgb(255 255 255 / 0.08) inset, 0 18px 30px -22px rgb(0 0 0 / 0.55); }
/* The steel clip. */
.site[data-look="cleaner"] .cl-clipboard::before { content: ''; position: absolute; z-index: 2; top: -0.9rem; left: 50%; width: min(14rem, 46%); height: 3.4rem; transform: translateX(-50%); border-radius: 0.6rem 0.6rem 0.35rem 0.35rem; background: linear-gradient(180deg, #e9edf0 0%, #b4bcc2 45%, #8f989f 52%, #c9d0d5 100%); box-shadow: 0 2px 0 rgb(0 0 0 / 0.35), inset 0 -2px 0 rgb(0 0 0 / 0.15); }
.site[data-look="cleaner"] .cl-clipboard::after { content: ''; position: absolute; z-index: 3; top: -0.35rem; left: 50%; width: 2.4rem; height: 1rem; transform: translateX(-50%); border-radius: 1rem; background: #1d262d; box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.6); }
.site[data-look="cleaner"] .cl-paper { --bg: #ffffff; position: relative; background: #ffffff; color: var(--text); padding: clamp(2.75rem, 5vw, 4rem) clamp(1.25rem, 4vw, 3.25rem) clamp(1.5rem, 4vw, 3rem); box-shadow: 0 1px 2px rgb(0 0 0 / 0.3); }
.site[data-look="cleaner"] .cl-paper > :is(h1, h2) { max-width: none; }
.site[data-look="cleaner"] .cl-notes-list { display: block; margin-top: clamp(1.25rem, 3vw, 2rem); border-top: var(--cl-ink); }
.site[data-look="cleaner"] .cl-notes-list li { border-bottom: 1px solid var(--cl-rule); }
.site[data-look="cleaner"] .cl-notes-list li:last-child { border-bottom: 0; }
.site[data-look="cleaner"] .cl-notes-list figure { margin: 0; padding: clamp(1.25rem, 3vw, 2rem) 0; border: 0; display: grid; gap: 0.75rem 3rem; }
.site[data-look="cleaner"] .cl-notes-list blockquote { margin: 0; font-size: clamp(1.35rem, 1rem + 1.25vw, 2.2rem); font-weight: 650; line-height: 1.24; letter-spacing: -0.022em; max-width: 40ch; hyphens: manual; text-wrap: pretty; }
.site[data-look="cleaner"] .cl-notes-list figcaption { color: var(--text); font-size: 1rem; font-weight: 700; }
@media (min-width: 52rem) {
  /* The name in the first column, where the list has its initials. */
  .site[data-look="cleaner"] .cl-notes-list figure { grid-template-columns: minmax(9rem, 0.28fr) minmax(0, 1fr); align-items: start; gap: 0; padding: 0; }
  .site[data-look="cleaner"] .cl-notes-list figcaption { grid-column: 1; grid-row: 1; padding: clamp(1.5rem, 3vw, 2.25rem) 1.25rem 1.25rem 0; font-size: 1.05rem; }
  .site[data-look="cleaner"] .cl-notes-list blockquote { grid-column: 2; grid-row: 1; padding: clamp(1.25rem, 3vw, 2rem) 0 clamp(1.5rem, 3vw, 2.25rem) clamp(1.25rem, 2.5vw, 2.25rem); border-left: 1px solid var(--cl-rule); }
  .site[data-look="cleaner"] .cl-notes-list blockquote p { text-indent: -0.42em; }
}

/* --- Werkgebied: key tags on the hooks of the key cabinet. -------------- */
.site[data-look="cleaner"] ul.cl-places { --cl-steel: #c8cfd4; display: flex; flex-wrap: wrap; width: fit-content; max-width: 100%; gap: clamp(1.25rem, 2.5vw, 1.75rem) clamp(0.75rem, 1.6vw, 1.25rem); margin-top: clamp(1.5rem, 4vw, 2.5rem); padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 3vw, 2.25rem) clamp(1.5rem, 3.5vw, 2.5rem); background-color: var(--cl-steel); background-image: radial-gradient(circle, rgb(0 0 0 / 0.16) 1.6px, transparent 2.2px); background-size: 1.25rem 1.25rem; border: clamp(8px, 1vw, 12px) solid #9aa4ab; box-shadow: inset 0 2px 6px rgb(0 0 0 / 0.18); font-weight: 750; letter-spacing: -0.015em; line-height: 1.1; }
.site[data-look="cleaner"] ul.cl-places[data-size="l"] { font-size: clamp(1.4rem, 1rem + 1.9vw, 2.5rem); }
.site[data-look="cleaner"] ul.cl-places[data-size="m"] { font-size: clamp(1.2rem, 1rem + 1vw, 1.8rem); }
.site[data-look="cleaner"] ul.cl-places[data-size="s"] { font-size: clamp(1.02rem, 0.95rem + 0.4vw, 1.25rem); }
.site[data-look="cleaner"] ul.cl-places li { position: relative; display: flex; align-items: center; white-space: normal; min-width: 0; max-width: 100%; padding-top: 0.9em; transform-origin: 50% 0; transition: transform 0.3s cubic-bezier(0.3, 0.7, 0.2, 1); }
.site[data-look="cleaner"] ul.cl-places li:nth-child(3n + 1) { transform: rotate(-1.5deg); }
.site[data-look="cleaner"] ul.cl-places li:nth-child(3n + 2) { transform: rotate(1deg); }
.site[data-look="cleaner"] ul.cl-places li:hover { transform: rotate(0deg) translateY(-2px); }
/* The hook and the split ring. */
.site[data-look="cleaner"] ul.cl-places li::before { content: ''; position: absolute; top: 0; left: 0.74em; width: 0.42em; height: 0.42em; border-radius: 50%; background: #5d676e; box-shadow: 0 1px 0 rgb(255 255 255 / 0.5); }
.site[data-look="cleaner"] ul.cl-places li::after { content: ''; position: absolute; z-index: 1; top: 0.14em; left: 0.52em; width: 0.86em; height: 1.85em; border: 2px solid #6f7a81; border-radius: 50%; }
.site[data-look="cleaner"] ul.cl-places li span { display: block; min-width: 0; padding: 0.42em 0.85em 0.42em 1.95em; background: #ffffff; color: var(--text); border-radius: 0.55em 0.25em 0.25em 0.55em; box-shadow: 0 2px 0 rgb(0 0 0 / 0.18), 0 0 0 1px rgb(0 0 0 / 0.08); overflow-wrap: anywhere; background-image: radial-gradient(circle at 0.95em 50%, var(--cl-steel) 0 0.24em, rgb(0 0 0 / 0.25) 0.25em 0.3em, transparent 0.31em); }
.site[data-look="cleaner"] ul.cl-places li:not(:last-child)::after { content: ''; margin: 0; }
.site[data-look="cleaner"] .cl-area .area-body { font-size: var(--fs-lead); max-width: 40rem; }

/* --- The werkkast: a laminate cupboard door to the page edge (light grey
   melamine, a darker edge band and the gap to the next door, a long steel
   bar handle), the weekrooster in a punched plastic sleeve held by two
   magnets, the tiles photo beside it. Used by the trust strip and, when the
   week isn't drawn there, by the hours section. --------------------------- */
.site[data-look="cleaner"] main > .cl-kast-band { padding: 0; border-top: 0; container-type: inline-size; background: var(--cl-lam); }
.site[data-look="cleaner"] .cl-kast { display: grid; }
.site[data-look="cleaner"] .cl-door {
  position: relative; min-width: 0; padding: clamp(2.5rem, 6vw, 5rem) var(--gap) clamp(2.75rem, 6vw, 5rem);
  background-color: var(--cl-lam);
  /* The melamine's soft sheen from the window side, and a fine pore. */
  background-image: linear-gradient(100deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 38%, rgb(0 0 0 / 0.025) 100%), repeating-linear-gradient(0deg, rgb(0 0 0 / 0.012) 0 1px, transparent 1px 3px);
  /* Edge band and the gap to the next door. */
  box-shadow: inset -7px 0 0 var(--cl-lam-edge), inset -10px 0 0 #8c918b;
}
.site[data-look="cleaner"] .cl-door-inner { position: relative; display: grid; gap: clamp(1.75rem, 4vw, 2.5rem); justify-items: start; }
/* The bar handle: brushed steel on two standoffs, near the opening edge. */
.site[data-look="cleaner"] .cl-handle { position: absolute; top: 50%; right: clamp(1.6rem, 3vw, 2.6rem); width: 0.8rem; height: clamp(9rem, 22vw, 15rem); transform: translateY(-50%); border-radius: 0.4rem; background: linear-gradient(90deg, #8d969b 0%, #eef1f2 38%, #c3c9cc 55%, #7d868b 100%); box-shadow: 3px 4px 6px rgb(0 0 0 / 0.18); }
.site[data-look="cleaner"] .cl-handle::before, .site[data-look="cleaner"] .cl-handle::after { content: ''; position: absolute; left: 50%; width: 0.55rem; height: 0.9rem; transform: translateX(-50%); background: linear-gradient(90deg, #7d868b, #c3c9cc, #7d868b); }
.site[data-look="cleaner"] .cl-handle::before { top: 0.8rem; }
.site[data-look="cleaner"] .cl-handle::after { bottom: 0.8rem; }
.site[data-look="cleaner"] .cl-kast-head { display: grid; gap: 0.75rem; max-width: 40rem; }
.site[data-look="cleaner"] .cl-kast-head :is(h1, h2) { margin: 0; }
.site[data-look="cleaner"] .cl-kast-media { position: relative; overflow: hidden; min-height: 18rem; background: var(--surface); }
.site[data-look="cleaner"] .cl-kast-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-kast.has-photo { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .site[data-look="cleaner"] .cl-door { padding-left: max(var(--gap), (100cqw - var(--wrap)) / 2); padding-right: clamp(5rem, 9vw, 8rem); }
}
/* No photo beside it: the cupboard's other door, its handle by the gap. */
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-kast:not(.has-photo) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
  .site[data-look="cleaner"] .cl-kast:not(.has-photo)::after {
    content: ''; background-color: var(--cl-lam);
    background-image: linear-gradient(90deg, #8d969b 0%, #eef1f2 38%, #c3c9cc 55%, #7d868b 100%), linear-gradient(100deg, rgb(255 255 255 / 0.5), rgb(255 255 255 / 0) 38%, rgb(0 0 0 / 0.025) 100%);
    background-size: 0.8rem clamp(9rem, 22vw, 15rem), auto; background-position: clamp(1.6rem, 3vw, 2.6rem) 50%, 0 0; background-repeat: no-repeat;
    box-shadow: inset 7px 0 0 var(--cl-lam-edge);
  }
}
@media (min-width: 52rem) and (max-width: 72rem) {
  .site[data-look="cleaner"] .cl-kast.has-photo { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
  .site[data-look="cleaner"] .cl-door { padding-right: 4.25rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .cl-door { padding-right: calc(var(--gap) + 1.6rem); box-shadow: inset -6px 0 0 var(--cl-lam-edge); }
  .site[data-look="cleaner"] .cl-handle { right: 0.85rem; width: 0.55rem; height: 7rem; top: 7rem; transform: none; }
  .site[data-look="cleaner"] .cl-kast-media { min-height: 0; aspect-ratio: 16 / 10; }
}

/* The sleeve: clear PVC, a punched strip on the left, one flat sheen. */
.site[data-look="cleaner"] .cl-sleeve { --hole: color-mix(in srgb, var(--cl-lam) 80%, #000); position: relative; width: min(100%, 44rem); padding: 0.55rem 0.55rem 0.55rem 2.1rem; background: rgb(255 255 255 / 0.32); border: 1px solid rgb(16 35 45 / 0.2); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.55), 0 10px 18px -14px rgb(0 0 0 / 0.45); }
.site[data-look="cleaner"] .cl-sleeve::before { content: ''; position: absolute; left: 0.55rem; top: 0.9rem; bottom: 0.9rem; width: 1rem; background: radial-gradient(circle, var(--hole) 0 0.24rem, rgb(16 35 45 / 0.25) 0.25rem 0.3rem, transparent 0.32rem) center top / 1rem 2.15rem repeat-y; }
.site[data-look="cleaner"] .cl-sleeve::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(225deg, rgb(255 255 255 / 0.55) 0 4.5rem, transparent 4.5rem 5.25rem, rgb(255 255 255 / 0.3) 5.25rem 5.6rem, transparent 5.6rem), linear-gradient(45deg, rgb(255 255 255 / 0.4) 0 2.5rem, transparent 2.5rem); }
.site[data-look="cleaner"] .cl-sheet { --bg: #ffffff; position: relative; padding: clamp(1.25rem, 3vw, 2rem) clamp(1rem, 3vw, 2rem) clamp(1.25rem, 3vw, 1.75rem); background: #ffffff; color: var(--text); }
/* Two magnets at the top. */
.site[data-look="cleaner"] .cl-sheet::before, .site[data-look="cleaner"] .cl-sheet::after { content: ''; position: absolute; z-index: 2; top: -1.15rem; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #5b656b 0 18%, #2a3236 45%, #1a2023 100%); box-shadow: 0 3px 4px rgb(0 0 0 / 0.3); }
.site[data-look="cleaner"] .cl-sheet::before { left: 18%; }
.site[data-look="cleaner"] .cl-sheet::after { right: 18%; }
.site[data-look="cleaner"] .cl-sheet-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1.5rem; margin: 0 0 1rem; padding-bottom: 0.65rem; border-bottom: var(--cl-ink); }
.site[data-look="cleaner"] .cl-sheet-title { font-weight: 800; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: -0.03em; line-height: 1; }
.site[data-look="cleaner"] .cl-sheet-name { font-weight: 650; font-size: 0.95rem; color: var(--muted); overflow-wrap: anywhere; }

/* The grid: days down, day parts across, 1px rules, the stretches filled. */
.site[data-look="cleaner"] .cl-rota { width: 100%; border-collapse: collapse; table-layout: fixed; font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="cleaner"] .cl-rota :is(th, td) { padding: 0.55rem 0.6rem; border: 1px solid var(--grid-line); text-align: left; vertical-align: middle; line-height: 1.2; }
.site[data-look="cleaner"] .cl-rota thead :is(th, td) { border-top: 0; padding-block: 0.4rem 0.5rem; font-size: 0.95rem; font-weight: 700; background: var(--grid-head); color: var(--on-grid-head); }
.site[data-look="cleaner"] .cl-rota thead td { background: transparent; border-left: 0; }
.site[data-look="cleaner"] .cl-rota thead td { width: 30%; }
.site[data-look="cleaner"] .cl-rota tbody th { font-weight: 700; font-size: 1.02rem; border-left: 0; }
.site[data-look="cleaner"] .cl-rota :is(th, td):last-child { border-right: 0; }
.site[data-look="cleaner"] .cl-rota tbody tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="cleaner"] .cl-rota td { font-size: 1rem; font-weight: 650; }
.site[data-look="cleaner"] .cl-rota td.is-on { background: color-mix(in srgb, var(--primary) 17%, #ffffff); }
/* One stretch reads as one bar: no rule between filled neighbours. */
.site[data-look="cleaner"] .cl-rota td.is-on + td.is-on { border-left-color: color-mix(in srgb, var(--primary) 17%, #ffffff); }
.site[data-look="cleaner"] .cl-rota .cl-off { color: var(--muted); font-weight: 500; background-image: repeating-linear-gradient(-45deg, color-mix(in srgb, var(--grid-line) 45%, transparent) 0 1px, transparent 1px 9px); }
.site[data-look="cleaner"] .cl-rota .is-closed th { color: var(--muted); font-weight: 600; }
.site[data-look="cleaner"] .cl-day-short { display: none; }
.site[data-look="cleaner"] .cl-rota-day::after { content: attr(data-today-label); display: none; margin-left: 0.45rem; padding: 0.05rem 0.4rem; background: var(--text); color: #ffffff; font-size: 0.78rem; font-weight: 700; vertical-align: 0.1em; }
html[data-today="mon"] .site[data-look="cleaner"] .cl-rota [data-days~="mon"] .cl-rota-day::after,
html[data-today="tue"] .site[data-look="cleaner"] .cl-rota [data-days~="tue"] .cl-rota-day::after,
html[data-today="wed"] .site[data-look="cleaner"] .cl-rota [data-days~="wed"] .cl-rota-day::after,
html[data-today="thu"] .site[data-look="cleaner"] .cl-rota [data-days~="thu"] .cl-rota-day::after,
html[data-today="fri"] .site[data-look="cleaner"] .cl-rota [data-days~="fri"] .cl-rota-day::after,
html[data-today="sat"] .site[data-look="cleaner"] .cl-rota [data-days~="sat"] .cl-rota-day::after,
html[data-today="sun"] .site[data-look="cleaner"] .cl-rota [data-days~="sun"] .cl-rota-day::after { display: inline-block; }
@media (max-width: 40rem) {
  .site[data-look="cleaner"] .cl-door { padding-inline: 0.75rem 1.4rem; }
  .site[data-look="cleaner"] .cl-sleeve { padding: 0.4rem 0.4rem 0.4rem 1.5rem; }
  .site[data-look="cleaner"] .cl-sleeve::before { left: 0.3rem; width: 0.9rem; }
  .site[data-look="cleaner"] .cl-sheet { padding-inline: 0.75rem; }
  .site[data-look="cleaner"] .cl-rota :is(th, td) { padding: 0.5rem 0.3rem; font-size: 0.86rem; }
  .site[data-look="cleaner"] .cl-rota td { font-size: 0.82rem; hyphens: auto; overflow-wrap: break-word; }
  .site[data-look="cleaner"] .cl-rota thead :is(th, td) { font-size: 0.82rem; }
  .site[data-look="cleaner"] .cl-rota thead td { width: 2.2rem; }
  .site[data-look="cleaner"] .cl-day-long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .site[data-look="cleaner"] .cl-day-short { display: inline; }
.site[data-look="cleaner"] .cl-rota-day::after { display: none !important; }
}
/* The section's variant class (hours-table) would pull in the shared
   door-sign marks; these tables mark today their own way. */
.site[data-look="cleaner"] .cl-rota tr[data-days] th::before, .site[data-look="cleaner"] .cl-rota tr[data-days] th::after, .site[data-look="cleaner"] .cl-sign tr[data-days] th::before { content: none; }
/* The highlights at the foot of the sheet. */
.site[data-look="cleaner"] .cl-sheet-notes { margin-top: 1.1rem; padding-top: 0.75rem; border-top: 1px solid var(--grid-line); }
.site[data-look="cleaner"] .cl-notes-label { margin: 0 0 0.35rem; font-size: 0.9rem; font-weight: 700; color: var(--muted); }
.site[data-look="cleaner"] .cl-sheet-notes ul { display: grid; gap: 0; }
.site[data-look="cleaner"] .cl-sheet-notes li { padding: 0.35rem 0; border-bottom: 1px dotted var(--grid-line); font-size: 1.08rem; font-weight: 650; line-height: 1.3; }
.site[data-look="cleaner"] .cl-sheet-notes li:last-child { border-bottom: 0; }
.site[data-look="cleaner"] .cl-sheet-notes.is-only { margin: 0; padding: 0; border: 0; }
.site[data-look="cleaner"] .cl-sheet-notes.is-only li { padding: 0.7rem 0; font-size: clamp(1.3rem, 1rem + 1vw, 1.85rem); font-weight: 750; letter-spacing: -0.02em; border-bottom-style: solid; }

/* --- Hours beside the rota: the door sign on a night band, and the cloth
   rack: the four colours on a steel rail, each with its zone on a tag. --- */
.site[data-look="cleaner"] .cl-rack-band { container-type: inline-size; }
.site[data-look="cleaner"] .cl-rack-grid { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="cleaner"] .cl-rack-grid:has(.cl-rack) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.25fr); } }
.site[data-look="cleaner"] .cl-rack-text :is(h1, h2) { margin: 0 0 clamp(1.25rem, 3vw, 2rem); }
.site[data-look="cleaner"] .cl-sign { width: 100%; max-width: 32rem; border-collapse: collapse; border-top: 2px solid var(--text); font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="cleaner"] .cl-sign :is(th, td) { padding: 0.8rem 0; border-bottom: 1px solid var(--cl-rule); text-align: left; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); line-height: 1.2; }
.site[data-look="cleaner"] .cl-sign th { font-weight: 650; padding-right: 1.5rem; }
.site[data-look="cleaner"] .cl-sign td { font-weight: 800; letter-spacing: -0.01em; text-align: right; }
.site[data-look="cleaner"] .cl-sign .is-closed :is(th, td) { color: var(--muted); font-weight: 500; }
.site[data-look="cleaner"] .cl-sign th::after { content: attr(data-today-label); display: none; margin-left: 0.6rem; padding: 0.05rem 0.45rem; background: var(--text); color: var(--bg); font-size: 0.8rem; font-weight: 700; vertical-align: 0.2em; }
html[data-today="mon"] .site[data-look="cleaner"] .cl-sign [data-days~="mon"] th::after,
html[data-today="tue"] .site[data-look="cleaner"] .cl-sign [data-days~="tue"] th::after,
html[data-today="wed"] .site[data-look="cleaner"] .cl-sign [data-days~="wed"] th::after,
html[data-today="thu"] .site[data-look="cleaner"] .cl-sign [data-days~="thu"] th::after,
html[data-today="fri"] .site[data-look="cleaner"] .cl-sign [data-days~="fri"] th::after,
html[data-today="sat"] .site[data-look="cleaner"] .cl-sign [data-days~="sat"] th::after,
html[data-today="sun"] .site[data-look="cleaner"] .cl-sign [data-days~="sun"] th::after { display: inline-block; }
.site[data-look="cleaner"] .cl-week-links { margin-top: 1.25rem; }
.site[data-look="cleaner"] .cl-week-links p { margin: 0.35rem 0 0; }
.site[data-look="cleaner"] .hours-call a { font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 800; text-decoration-thickness: 2px; }
.site[data-look="cleaner"] .hours-place { color: var(--muted); }
.site[data-look="cleaner"] .hours-place a { color: var(--text); }

.site[data-look="cleaner"] .cl-rack { position: relative; margin: 0; padding: 0 clamp(0.5rem, 2vw, 1.5rem); }
/* The rail on its two wall brackets. */
.site[data-look="cleaner"] .cl-rack-rail { position: relative; z-index: 2; height: 0.8rem; margin: 0 -0.5rem; border-radius: 0.4rem; background: linear-gradient(180deg, #f2f4f5 0%, #b7bfc4 45%, #6f797f 100%); box-shadow: 0 3px 5px rgb(0 0 0 / 0.4); }
.site[data-look="cleaner"] .cl-rack-rail::before, .site[data-look="cleaner"] .cl-rack-rail::after { content: ''; position: absolute; top: -0.9rem; width: 0.9rem; height: 1.6rem; border-radius: 0.2rem; background: linear-gradient(90deg, #6f797f, #c9cfd3, #6f797f); }
.site[data-look="cleaner"] .cl-rack-rail::before { left: 0.4rem; }
.site[data-look="cleaner"] .cl-rack-rail::after { right: 0.4rem; }
.site[data-look="cleaner"] .cl-rack-cloths { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 1.6vw, 1.1rem); margin: -1.15rem 0 0; padding: 0 clamp(0.6rem, 2vw, 1.4rem); }
.site[data-look="cleaner"] .cl-rack-cloths li { position: relative; display: grid; justify-items: center; transform-origin: 50% 0; transition: transform 0.5s cubic-bezier(0.3, 0.7, 0.2, 1); }
/* A microfibre cloth folded over the rail: the back flap shows above it,
   the front hangs a little shorter; the weave, an overlocked edge in a
   darker thread, a soft sag at the hem. */
.site[data-look="cleaner"] .cl-cloth {
  --shade: color-mix(in srgb, var(--cloth) 72%, #000);
  display: block; width: 100%; aspect-ratio: 1 / 1.05; background-color: var(--cloth);
  background-image: linear-gradient(180deg, var(--shade) 0 0.75rem, rgb(0 0 0 / 0.35) 0.75rem calc(0.75rem + 3px), rgb(255 255 255 / 0.1) calc(0.75rem + 3px) 2.2rem, transparent 2.2rem), linear-gradient(90deg, rgb(0 0 0 / 0.1), transparent 12%, rgb(255 255 255 / 0.08) 30%, transparent 44%, rgb(0 0 0 / 0.08) 62%, transparent 75%, rgb(255 255 255 / 0.06) 88%, rgb(0 0 0 / 0.12)), repeating-linear-gradient(45deg, rgb(255 255 255 / 0.09) 0 1px, transparent 1px 3px), repeating-linear-gradient(-45deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 3px);
  border-radius: 0.6rem 0.6rem 2px 2px; box-shadow: inset 0 0 0 3px var(--shade), inset 0 0 0 4px rgb(255 255 255 / 0.12), 0 12px 16px -12px rgb(0 0 0 / 0.7);
  clip-path: polygon(0 0, 100% 0, 99% 97%, 85% 99.5%, 55% 98.4%, 25% 100%, 1% 98%);
}
.site[data-look="cleaner"] .cl-cloth { position: relative; z-index: 1; }
/* The back half of the fold, hanging a little longer and to one side. */
.site[data-look="cleaner"] .cl-rack-cloths li::before { content: ''; position: absolute; top: 0.4rem; left: 5%; right: -4%; height: calc(100% - 3.4rem); background: color-mix(in srgb, var(--cloth) 62%, #000); border-radius: 0.5rem 0.5rem 2px 2px; clip-path: polygon(0 0, 100% 0, 100% 100%, 70% 98%, 40% 100%, 0 99%); }
.site[data-look="cleaner"] .cl-rack-cloths li:nth-child(even)::before { left: -4%; right: 5%; }
.site[data-look="cleaner"] .cl-rack-cloths li:nth-child(2) .cl-cloth { aspect-ratio: 1 / 0.95; }
.site[data-look="cleaner"] .cl-rack-cloths li:nth-child(3) .cl-cloth { aspect-ratio: 1 / 1.12; }
.site[data-look="cleaner"] .cl-rack-cloths li:nth-child(4) .cl-cloth { aspect-ratio: 1 / 1; }
/* The tag: ink on white card, pinned to the cloth's hem. */
.site[data-look="cleaner"] .cl-hangtag { --bg: #ffffff; position: relative; z-index: 1; margin-top: -2.4rem; padding: 0.4rem 0.55rem 0.45rem; min-width: 0; max-width: calc(100% - 0.75rem); background: #ffffff; color: #10232d; font-size: clamp(0.85rem, 0.8rem + 0.25vw, 1rem); font-weight: 600; line-height: 1.15; text-align: center; box-shadow: 0 2px 3px rgb(0 0 0 / 0.3); overflow-wrap: anywhere; }
.site[data-look="cleaner"] .cl-hangtag b { display: block; font-weight: 800; text-transform: lowercase; }
.site[data-look="cleaner"] .cl-rack figcaption { margin-top: 1.5rem; color: var(--muted); font-size: 0.98rem; max-width: 34rem; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="cleaner"] .cl-rack-cloths li:hover { transform: rotate(2.5deg); }
  .site[data-look="cleaner"] .cl-rack-cloths li:nth-child(even):hover { transform: rotate(-2.5deg); }
}
@media (max-width: 40rem) {
  .site[data-look="cleaner"] .cl-rack-cloths { gap: 0.45rem; padding: 0 0.4rem; }
  .site[data-look="cleaner"] .cl-hangtag { padding: 0.3rem 0.25rem; font-size: 0.8rem; }
}

/* --- FAQ: the question list beside its heading, square toggles. --------- */
.site[data-look="cleaner"] .s-faq .faq-items { max-width: none; margin-top: 0; }
.site[data-look="cleaner"] .s-faq .faq-items details:first-child, .site[data-look="cleaner"] .s-faq dl.faq-items { border-top: var(--cl-ink); }
.site[data-look="cleaner"] .s-faq .faq-items details { border-bottom: 1px solid var(--cl-rule); }
.site[data-look="cleaner"] .s-faq .faq-items summary { min-height: 4.75rem; padding-block: 0.9rem; font-size: clamp(1.15rem, 1.05rem + 0.45vw, 1.45rem); font-weight: 750; letter-spacing: -0.015em; line-height: 1.25; }
.site[data-look="cleaner"] .s-faq .faq-items summary::after { content: '+'; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border: 1.5px solid var(--text); font-size: 1.4rem; font-weight: 500; transition: background-color 0.15s; }
.site[data-look="cleaner"] .s-faq .faq-items details[open] summary::after { content: '\2212'; background: var(--text); color: var(--bg); }
.site[data-look="cleaner"] .s-faq .faq-items summary:hover::after { background: color-mix(in srgb, var(--text) 10%, transparent); }
.site[data-look="cleaner"] .s-faq .faq-items details p { color: var(--text); font-size: 1.0625rem; max-width: 46rem; margin-bottom: 1.5rem; }
.site[data-look="cleaner"] .s-faq dl.faq-items > div { padding-block: 1rem; border-bottom: 1px solid var(--cl-rule); }
.site[data-look="cleaner"] .s-faq .faq-items dt { margin: 0; font-size: 1.25rem; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-faq:not(.has-photo) .cl-faq-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="cleaner"] .cl-faq-side { position: sticky; top: 7rem; }
  .site[data-look="cleaner"] .cl-faq.has-photo .cl-faq-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); min-height: 36rem; }
  .site[data-look="cleaner"] .cl-faq.has-photo .cl-faq-text { align-self: center; padding: var(--section-pad) clamp(2rem, 5vw, 5rem) var(--section-pad) max(var(--gap), (100cqw - var(--wrap)) / 2); }
}

.site[data-look="cleaner"] .cl-faq.has-photo { padding-block: 0; container-type: inline-size; }
.site[data-look="cleaner"] .cl-faq-text :is(h1, h2) { margin-bottom: 0.7em; }
.site[data-look="cleaner"] .cl-faq-media { position: relative; overflow: hidden; background: var(--surface); }
.site[data-look="cleaner"] .cl-faq-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .cl-faq-text { padding: var(--section-pad) var(--gap); }
  .site[data-look="cleaner"] .cl-faq-media { aspect-ratio: 16 / 9; }
}

/* --- Call to action: a floor band, big heading, the button. ------------- */
.site[data-look="cleaner"] .s-cta .cta-inner { align-items: center; }
.site[data-look="cleaner"] .s-cta .cta-inner p { color: var(--text); }

/* --- Contact: the numbers large, the form as a sheet on the floor. ------ */
.site[data-look="cleaner"] .contact-list { border-top: var(--cl-ink); }
.site[data-look="cleaner"] .contact-list li { border-bottom: 1px solid var(--cl-rule); }
.site[data-look="cleaner"] .contact-link { padding-block: 1rem 1.1rem; }
.site[data-look="cleaner"] .contact-label { font-weight: 650; font-size: 0.95rem; }
.site[data-look="cleaner"] .contact-value { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.5rem); letter-spacing: -0.03em; font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="cleaner"] .contact-list li:first-child .contact-value { font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.4rem); }
.site[data-look="cleaner"] :is(.contact-form, .request-form) { --bg: #ffffff; background: var(--bg); border: var(--cl-ink); border-top-width: 2px; padding: clamp(1.25rem, 3vw, 2rem); }
.site[data-look="cleaner"] :where(.site form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-radius: 0; border: 1.5px solid color-mix(in srgb, var(--text) 45%, transparent); min-height: 52px; }
.site[data-look="cleaner"] .contact-form label, .site[data-look="cleaner"] .request-form :is(label, legend) { font-weight: 700; }
.site[data-look="cleaner"] .request-step > legend { font-weight: 800; letter-spacing: -0.02em; }
.site[data-look="cleaner"] .request-step + .request-step { border-top: 1px solid var(--cl-rule); }

/* --- Booking: the bookable services as rooster rows. -------------------- */
.site[data-look="cleaner"] .booking-services { border-top: var(--cl-ink); background: var(--bg); }
.site[data-look="cleaner"] .s-booking .booking-services { border: var(--cl-ink); }
.site[data-look="cleaner"] .s-booking .booking-services a { padding: 1rem var(--cl-pad); }
.site[data-look="cleaner"] .booking-name { font-size: 1.2rem; font-weight: 750; }
.site[data-look="cleaner"] .booking-services li { border-bottom-color: var(--cl-rule); }
.site[data-look="cleaner"] .booking-services li:last-child { border-bottom: 0; }

/* --- Footer: the glass entrance door at night (white vinyl lettering, an
   aluminium frame, a steel push bar), then the footer on the same night. --- */
.site[data-look="cleaner"] .cl-entrance { background: var(--deep); color: var(--on-deep); padding-top: clamp(3.5rem, 8vw, 6rem); overflow: hidden; }
.site[data-look="cleaner"] .cl-glass-front { display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; }
.site[data-look="cleaner"] :is(.cl-pane, .cl-glass-plain) { display: none; }
@media (min-width: 52rem) {
  .site[data-look="cleaner"] .cl-glass-front { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.25fr) minmax(0, 1.25fr) minmax(0, 0.8fr); }
  .site[data-look="cleaner"] :is(.cl-pane, .cl-glass-plain) { display: block; }
  .site[data-look="cleaner"] .cl-glass + .cl-glass { border-left-width: 0.3rem; }
  .site[data-look="cleaner"] .cl-glass-front > .cl-glass:first-of-type { border-right-width: 0.3rem; }
  .site[data-look="cleaner"] .cl-pane { align-self: stretch; margin-top: 3rem; border: 0.65rem solid #4f5b61; border-bottom: 0; background: linear-gradient(155deg, transparent 0 40%, rgb(255 255 255 / 0.06) 40% 52%, transparent 52%), color-mix(in srgb, var(--deep) 88%, #000); }
  .site[data-look="cleaner"] .cl-pane:first-child { border-right: 0; }
  .site[data-look="cleaner"] .cl-pane:last-child { border-left: 0; }
}
.site[data-look="cleaner"] .site-footer .footer-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.site[data-look="cleaner"] .cl-glass {
  position: relative; width: 100%; min-height: clamp(19rem, 34vw, 25rem); padding: clamp(2rem, 4vw, 2.75rem) clamp(1.5rem, 3vw, 2.25rem) 3rem;
  border: 0.65rem solid #4f5b61; border-bottom: 0; color: #f2f8fa;
  background: linear-gradient(155deg, rgb(255 255 255 / 0.09) 0 22%, rgb(255 255 255 / 0.02) 22% 34%, transparent 34% 62%, rgb(255 255 255 / 0.05) 62% 66%, transparent 66%), color-mix(in srgb, var(--deep) 82%, #000);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.12);
}
.site[data-look="cleaner"] .cl-glass-name { margin: 0 0 1.5rem; max-width: 16ch; font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1vw, 2.1rem); line-height: 1.04; letter-spacing: -0.03em; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="cleaner"] .cl-glass-name.is-long { font-size: clamp(1.3rem, 1.1rem + 0.5vw, 1.6rem); }
.site[data-look="cleaner"] .cl-glass-hours { display: grid; gap: 0.2rem; margin: 0 0 1.25rem; font-variant-numeric: tabular-nums lining-nums; font-size: 1.05rem; }
.site[data-look="cleaner"] .cl-glass-hours div { display: flex; gap: 1rem; }
.site[data-look="cleaner"] .cl-glass-hours dt { min-width: 4.25rem; font-weight: 600; }
.site[data-look="cleaner"] .cl-glass-hours dd { margin: 0; font-weight: 700; }
.site[data-look="cleaner"] .cl-glass-phone { margin: 0; font-weight: 800; font-size: 1.2rem; font-variant-numeric: tabular-nums lining-nums; }
/* The push bar across the door, brushed steel on two feet. */
.site[data-look="cleaner"] .cl-glass-bar { position: absolute; left: 1.25rem; right: 1.25rem; bottom: 2.2rem; height: 0.7rem; border-radius: 0.35rem; background: linear-gradient(180deg, #e8ecee, #9aa3a8 55%, #6c757a); }
.site[data-look="cleaner"] .site-footer { position: relative; padding-top: clamp(2.5rem, 5vw, 3.5rem); border-top: 0.65rem solid #3a454b; }
.site[data-look="cleaner"] .footer-brand .footer-name { font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem); overflow-wrap: break-word; hyphens: auto; }
.site[data-look="cleaner"] .footer-title { font-weight: 700; color: var(--text); }
.site[data-look="cleaner"] .footer-col a { font-size: 1.05rem; }

/* --- Phones: the quick bar on paper, an ink rule on top. ---------------- */
@media (max-width: 51.99rem) {
  .site[data-look="cleaner"] .quickbar { border-top: var(--cl-ink); }
  .site[data-look="cleaner"] .quick { font-weight: 750; font-size: 1.05rem; }
  .site[data-look="cleaner"] .quick + .quick { border-left-color: var(--text); }
}

/* --- Motion: a squeegee stroke. Rows of the rooster and the week wipe in
   as they scroll into view; the hero photo settles once on load. Only
   where scroll timelines exist and motion is welcome; without them every
   row is simply there. ----------------------------------------------------- */
@keyframes cl-wipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes cl-rise { from { transform: translateY(0.3em); } to { transform: none; } }
@keyframes cl-settle { from { transform: scale(1.05); } to { transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="cleaner"] .cl-hero .hero-img { animation: cl-settle 1.4s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="cleaner"] .cl-hero .hero-text > * { animation: cl-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="cleaner"] .cl-hero .hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .site[data-look="cleaner"] .cl-hero .hero-text > :nth-child(3) { animation-delay: 0.16s; }
  @supports (animation-timeline: view()) {
    .site[data-look="cleaner"] :is(.cl-row, .cl-rota tbody tr, .cl-notes-list li) { animation: cl-wipe linear forwards; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}

/* ---- looks/contractor.css ---- */
/* The contractor look: everything here is scoped to .site[data-look="contractor"]. Appended after base.css (bun run --filter @platform/sections css).

   The whole page stands on a Dutch building site (looks/contractor.tsx):
   bouwbord, funderingsbalk, steiger against kalkzandsteen, plywood
   hoarding, yellow route signs on asphalt, the gate sign on the bouwhek,
   the banner on the fence, and a brick facade with gevelsteen and trasraam.
   Materials are drawn (CSS gradients and small inline SVG tiles), never
   photos, so nothing passes for the business's own work. Type: Archivo
   (heavy capitals, as on the board) with Archivo Narrow for the markings. */

.site[data-look="contractor"] {
  --ct-ink: #141414;
  --ct-white: #ffffff;
  --ct-concrete: #e8e6e0;
  --ct-steel: linear-gradient(90deg, #6f777d, #d9dee1 38%, #a3aaaf 62%, #6d7479);
  --ct-steel-h: linear-gradient(180deg, #6f777d, #d9dee1 38%, #a3aaaf 62%, #6d7479);
  /* Steigerhout: the pale spruce of a scaffold board. */
  --ct-plank: #d8c194;
  --ct-on-plank: #17140f;
  --ct-plank-muted: #4a3d29;
  /* Underlayment plywood of the hoarding. */
  --ct-ply: #e3cba1;
  --ct-on-ply: #17140f;
  --ct-ply-muted: #4f4129;
  /* Yellow temporary route signs, black letters. */
  --ct-sign: #f5c400;
  --ct-on-sign: #111111;
  --ct-asphalt: #26272a;
  --ct-on-asphalt: #f3f2ee;
  --ct-asphalt-muted: #bdbcb6;
  /* Poured concrete of the funderingsbalk. */
  --ct-beam: #4a4946;
  --ct-on-beam: #f6f5f1;
  /* Gevelsteen: a carved sandstone plaque. */
  --ct-stone: #ddd5c4;
  --ct-on-stone: #221e18;
  --ct-stone-muted: #4f483c;
  --ct-narrow: "Archivo Narrow", "Archivo Narrow fallback", "Arial Narrow", var(--font-body);
  /* Kalkzandsteen lijmblokken in half bond: thin glue joints, pale blocks
     with a faint difference in tone. Drawn with gradients (the stylesheet
     carries no url() but fonts); the brick facade's tiles are inline SVG
     on the footer itself (looks/contractor.tsx). */
  --ct-kzs:
    linear-gradient(#cfccc4 0 3px, transparent 3px) 0 0 / 100% 100px,
    conic-gradient(at 3px 100px, transparent 0 270deg, #cfccc4 0) 0 0 / 220px 200px,
    conic-gradient(at 3px 100px, transparent 0 270deg, #cfccc4 0) 110px 100px / 220px 200px,
    linear-gradient(90deg, rgb(0 0 0 / 0.018) 0 220px, transparent 0) 0 0 / 660px 100px,
    linear-gradient(90deg, rgb(255 255 255 / 0.25) 0 220px, transparent 0) 330px 100px / 880px 200px,
    #e6e4de;
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.2rem, 1.08rem + 0.45vw, 1.45rem);
  --fs-h2: clamp(2.35rem, 1.3rem + 3.6vw, 5rem);
  --fs-h3: clamp(1.25rem, 1.05rem + 0.75vw, 1.85rem);
  --wrap: 78rem;
  font-feature-settings: "kern";
  hyphens: manual;
}
@media (max-width: 40rem) { .site[data-look="contractor"] { --fs-base: 1.0625rem; } }
.site[data-look="contractor"] main > .s + .s { border-top: 0; }
.site[data-look="contractor"] :is(h1, h2) { font-weight: 900; letter-spacing: -0.02em; line-height: 0.95; }
.site[data-look="contractor"] :is(h3, .h3) { font-weight: 800; letter-spacing: -0.005em; }
.site[data-look="contractor"] .lead { color: var(--muted); }
.site[data-look="contractor"] :focus-visible { outline: 3px solid var(--ct-ink); outline-offset: 3px; box-shadow: 0 0 0 6px var(--ct-sign); }

/* Buttons: heavy capitals, a hard edge that presses in like a stamp. */
.site[data-look="contractor"] .btn {
  min-height: 56px; padding: 0.85rem 1.5rem; border: 3px solid var(--ct-ink);
  font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; font-size: 1.05rem;
  box-shadow: 4px 4px 0 var(--ct-ink);
}
.site[data-look="contractor"] .btn:hover { text-decoration: none; }
.site[data-look="contractor"] .btn:active { box-shadow: 0 0 0 var(--ct-ink); translate: 4px 4px; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .btn { transition: translate 0.12s ease, box-shadow 0.12s ease; }
  .site[data-look="contractor"] .btn:hover { translate: -2px -2px; box-shadow: 6px 6px 0 var(--ct-ink); }
}
.site[data-look="contractor"] .cta-alt { font-weight: 700; text-decoration-thickness: 2px; }

/* --- Header: the name on a small board, an orange top band. ------------- */
.site[data-look="contractor"] .site-header { background: var(--bg); border-bottom: 3px solid var(--ct-ink); }
.site[data-look="contractor"] .brand { font-weight: 900; letter-spacing: -0.01em; }
.site[data-look="contractor"] .brand-name { display: inline-block; background: var(--ct-white); border: 2px solid var(--ct-ink); border-top: 7px solid var(--primary); padding: 0.3rem 0.6rem 0.25rem; }
.site[data-look="contractor"] .site-header nav a { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.05rem; }
.site[data-look="contractor"] .site-header .btn { min-height: 46px; padding: 0.45rem 1rem; box-shadow: 3px 3px 0 var(--ct-ink); font-size: 0.95rem; }

/* --- Hero: the bouwbord in front of the site photo ----------------------- */
.site[data-look="contractor"] .ct-hero { padding: 0; position: relative; overflow: clip; background: var(--ct-kzs); }
.site[data-look="contractor"] .ct-hero-photo { position: absolute; inset: 0; }
.site[data-look="contractor"] .ct-hero-photo .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; background: var(--surface); }
.site[data-look="contractor"] .ct-hero-inner { position: relative; z-index: 1; display: flex; align-items: flex-end; min-height: calc(calc(100 * var(--raam-vh)) - 4.6rem); padding-top: clamp(1.5rem, calc(5 * var(--raam-vh)), 4rem); }
.site[data-look="contractor"] .ct-board { width: min(100%, 52rem); filter: drop-shadow(0 18px 24px rgb(0 0 0 / 0.28)); }
.site[data-look="contractor"] .ct-board-panel {
  --text: var(--on-board); --muted: var(--board-muted);
  container-type: inline-size;
  background: var(--board); color: var(--on-board); border: 4px solid var(--on-board);
}
.site[data-look="contractor"] .ct-board-band { background: var(--primary); color: var(--on-primary); padding: clamp(1rem, 3.4cqi, 1.8rem) clamp(1rem, 4cqi, 2.2rem) clamp(0.9rem, 2.8cqi, 1.5rem); border-bottom: 4px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-band :is(h1, h2) {
  margin: 0; max-width: none; color: inherit;
  font-size: clamp(2.5rem, 11.4cqi, 6.4rem); line-height: 0.88; letter-spacing: -0.035em; font-weight: 900;
  overflow-wrap: break-word; hyphens: auto; word-spacing: 0.06em;
}
.site[data-look="contractor"] .ct-board-band.is-long :is(h1, h2) { font-size: clamp(2.1rem, 8.4cqi, 4.6rem); line-height: 0.92; }
.site[data-look="contractor"] .ct-board-lead { margin: 0; padding: 0.85rem clamp(1rem, 4cqi, 2.2rem); font-size: clamp(1.1rem, 0.95rem + 0.4vw, 1.25rem); line-height: 1.4; border-bottom: 2px solid var(--on-board); max-width: none; }
.site[data-look="contractor"] .ct-board-fields { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.site[data-look="contractor"] .ct-board-fields > div { display: grid; align-content: start; gap: 0.1rem; padding: 0.5rem clamp(1rem, 4cqi, 2.2rem) 0.6rem; border-bottom: 1px solid var(--on-board); min-width: 0; }
.site[data-look="contractor"] .ct-board-fields > div:nth-child(even) { border-left: 1px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] { grid-column: 1 / -1; border-left: 0; }
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] ~ div:nth-child(even) { border-left: 0; }
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] ~ div:nth-child(odd) { border-left: 1px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-fields dt { font-family: var(--ct-narrow); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.site[data-look="contractor"] .ct-board-fields dd { margin: 0; font-weight: 800; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); line-height: 1.25; overflow-wrap: break-word; }
.site[data-look="contractor"] .ct-board-fields [data-field="name"] dd { font-size: clamp(1.35rem, 5cqi, 2.1rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; line-height: 1.05; hyphens: auto; }
.site[data-look="contractor"] .ct-board-fields [data-field="phone"] dd { font-variant-numeric: tabular-nums; white-space: nowrap; }
.site[data-look="contractor"] .ct-board-fields a { text-decoration: none; }
/* An odd number of half-width fields: the last one runs across. */
.site[data-look="contractor"] .ct-board-fields > [data-field="name"] ~ div:last-child:nth-child(even) { grid-column: 1 / -1; border-left: 0; }
.site[data-look="contractor"] .ct-board-fields:not(:has([data-field="name"])) > div:last-child:nth-child(odd) { grid-column: 1 / -1; border-left: 0; }
.site[data-look="contractor"] .ct-board .actions { margin: 0; padding: 1rem clamp(1rem, 4cqi, 2.2rem) 1.15rem; }
/* The customer's highlights: one more field, across the board. */
.site[data-look="contractor"] .ct-board-notes { display: grid; gap: 0.1rem; padding: 0.5rem clamp(1rem, 4cqi, 2.2rem) 0.6rem; border-bottom: 1px solid var(--on-board); }
.site[data-look="contractor"] .ct-board-notes-label { margin: 0; font-family: var(--ct-narrow); font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.site[data-look="contractor"] .ct-board-notes-text { margin: 0; max-width: none; font-weight: 800; font-size: clamp(1rem, 0.94rem + 0.3vw, 1.2rem); line-height: 1.3; overflow-wrap: break-word; }
/* Two galvanised posts down to the ground. */
.site[data-look="contractor"] .ct-posts {
  display: block; height: clamp(2rem, calc(6 * var(--raam-vh)), 5rem); margin-inline: 12%;
  background: var(--ct-steel) left / 18px 100% no-repeat, var(--ct-steel) right / 18px 100% no-repeat;
}
.site[data-look="contractor"] .ct-hero:not(.has-photo) .ct-hero-inner { min-height: 0; padding-top: clamp(3rem, 8vw, 6rem); }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .ct-board-panel { animation: ct-hoist 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  @keyframes ct-hoist { from { translate: 0 2.5rem; } }
}
@media (max-width: 51.99rem) {
  .site[data-look="contractor"] .ct-hero-photo { position: relative; height: calc(31 * var(--raam-vh)); min-height: 13rem; }
  .site[data-look="contractor"] .ct-hero-inner { min-height: 0; padding-top: 0; margin-top: -4.5rem; }
  .site[data-look="contractor"] .ct-hero:not(.has-photo) .ct-hero-inner { margin-top: 0; padding-top: 2rem; }
  .site[data-look="contractor"] .ct-board { filter: drop-shadow(0 10px 14px rgb(0 0 0 / 0.25)); }
  .site[data-look="contractor"] .ct-board-panel { border-width: 3px; }
  .site[data-look="contractor"] .ct-board-band { border-bottom-width: 3px; }
  .site[data-look="contractor"] .ct-board-band :is(h1, h2) { font-size: clamp(2.3rem, 12.5cqi, 4rem); }
  .site[data-look="contractor"] .ct-board-lead { font-size: 1.05rem; padding-block: 0.75rem; }
  .site[data-look="contractor"] .ct-board-fields > div { padding-block: 0.45rem 0.5rem; }
  .site[data-look="contractor"] .ct-board-fields dt { font-size: 0.72rem; }
  .site[data-look="contractor"] .ct-board-fields dd { font-size: 0.98rem; }
  .site[data-look="contractor"] .ct-board .actions { padding-block: 0.9rem 1rem; gap: 0.5rem 1rem; }
  .site[data-look="contractor"] .ct-posts { height: 1.5rem; }
  /* On a phone the call comes first, the board's details under it. */
  .site[data-look="contractor"] .ct-board-panel { display: flex; flex-direction: column; }
  .site[data-look="contractor"] .ct-board-fields { order: 3; border-top: 2px solid var(--on-board); }
  .site[data-look="contractor"] .ct-board .actions { order: 2; }
  .site[data-look="contractor"] .ct-board-fields > div:last-child { border-bottom: 0; }
  .site[data-look="contractor"] .ct-board-notes { order: 4; border-bottom: 0; border-top: 1px solid var(--on-board); padding-block: 0.45rem 0.6rem; }
  .site[data-look="contractor"] .ct-board-notes-label { font-size: 0.72rem; }
  .site[data-look="contractor"] .ct-board-notes-text { font-size: 0.98rem; }
  .site[data-look="contractor"] .ct-scaffold { --std: 12px; --bay-pad: 0.85rem; }
  .site[data-look="contractor"] .ct-plank { padding-inline: 1.6rem; }
  .site[data-look="contractor"] .ct-plank::before, .site[data-look="contractor"] .ct-plank::after { width: 0.75rem; }
}

/* --- Trust strip: only on a page without a hero (else the claims are on the
   bouwbord): one plain line on the funderingsbalk. --------------------------- */
.site[data-look="contractor"] .ct-foundation {
  padding-block: clamp(1.1rem, 2.5vw, 1.8rem);
  background:
    linear-gradient(180deg, #6a6864 0 3px, transparent 3px),
    repeating-linear-gradient(180deg, transparent 0 22px, rgb(0 0 0 / 0.09) 22px 23px),
    var(--ct-beam);
  color: var(--ct-on-beam);
  border-top: 0 !important;
}
.site[data-look="contractor"] .ct-claims { display: flex; flex-wrap: wrap; gap: 0.25rem 2rem; font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.3; }

/* --- Services: steigerplanken on a scaffold against kalkzandsteen ---------- */
.site[data-look="contractor"] .ct-wall { background: var(--ct-kzs); padding-block: clamp(4rem, 9vw, 7.5rem) 0; overflow: clip; }
.site[data-look="contractor"] .ct-wall-head { max-width: 50rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.site[data-look="contractor"] .ct-wall-head :is(h1, h2) { margin-bottom: 0.25em; }
.site[data-look="contractor"] .ct-wall-head .lead { margin: 0; color: #3b3a36; }
.site[data-look="contractor"] .ct-scaffold {
  --std: 18px; --bay-pad: clamp(1.4rem, 3vw, 2.6rem); --brace: linear-gradient(to top right, transparent calc(50% - 8px), #7c8389 calc(50% - 8px), #cfd4d7 calc(50% - 2px), #8e959a calc(50% + 6px), transparent calc(50% + 6px));
  position: relative; padding: 0 var(--bay-pad) clamp(3rem, 7vw, 5rem);
  /* The diagonal brace (schoor) across the bay, behind the planks. */
  background: var(--brace) var(--std) 0 / calc(100% - 2 * var(--std)) 100% no-repeat;
}
.site[data-look="contractor"] .ct-two-bays { background: var(--brace) 0 0 / 50% 100% no-repeat, var(--brace) 100% 0 / 50% 100% no-repeat; }
/* The standards (staanders), with a base plate on the ground. */
.site[data-look="contractor"] .ct-scaffold::before {
  content: ''; position: absolute; inset: -1.25rem 0 0 0; pointer-events: none;
  background: var(--ct-steel) 0 0 / var(--std) 100% no-repeat, var(--ct-steel) 100% 0 / var(--std) 100% no-repeat;
}
.site[data-look="contractor"] .ct-scaffold::after { content: ''; position: absolute; left: -12px; right: -12px; bottom: 0; height: 12px; background: linear-gradient(90deg, #2d2c29 0 42px, transparent 42px calc(100% - 42px), #2d2c29 calc(100% - 42px)); }
.site[data-look="contractor"] .ct-two-bays::before { background: var(--ct-steel) 0 0 / var(--std) 100% no-repeat, var(--ct-steel) 50% 0 / var(--std) 100% no-repeat, var(--ct-steel) 100% 0 / var(--std) 100% no-repeat; }
.site[data-look="contractor"] .ct-lifts { display: grid; gap: clamp(1.6rem, 3vw, 2.4rem) 0; margin: 0; border: 0; }
.site[data-look="contractor"] .ct-lift { position: relative; padding: 0 0 11px; border: 0; }
/* The ledger (the horizontal tube) under each plank, clamped to the standards. */
.site[data-look="contractor"] .ct-lift::after {
  content: ''; position: absolute; left: calc(-1 * var(--bay-pad)); right: calc(-1 * var(--bay-pad)); bottom: 0; height: 12px;
  background:
    linear-gradient(90deg, #2f3336 0 26px, transparent 26px calc(100% - 26px), #2f3336 calc(100% - 26px)) center / 100% 70% no-repeat,
    var(--ct-steel-h);
}
.site[data-look="contractor"] .ct-plank {
  --text: var(--on-plank); --muted: var(--ct-plank-muted);
  position: relative; display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.4rem 2rem;
  padding: clamp(0.95rem, 2vw, 1.4rem) clamp(2.2rem, 4vw, 3rem) clamp(1.1rem, 2.2vw, 1.55rem);
  color: var(--ct-on-plank);
  background:
    repeating-linear-gradient(178.6deg, transparent 0 9px, rgb(110 78 30 / 0.07) 9px 10px, transparent 10px 23px, rgb(110 78 30 / 0.05) 23px 25px),
    repeating-linear-gradient(181.2deg, transparent 0 31px, rgb(90 60 20 / 0.06) 31px 33px),
    linear-gradient(90deg, rgb(255 255 255 / 0.12), transparent 30%, rgb(0 0 0 / 0.04) 70%, rgb(255 255 255 / 0.08)),
    var(--ct-plank);
  box-shadow: inset 0 -6px 0 #b39563, inset 0 1px 0 rgb(255 255 255 / 0.45);
}
/* The galvanised end bands of a scaffold board, with their rivets. */
.site[data-look="contractor"] .ct-plank::before,
.site[data-look="contractor"] .ct-plank::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: clamp(0.9rem, 1.6vw, 1.25rem);
  background: radial-gradient(circle, #5e6569 0 2px, transparent 2.5px) 50% 30% / 100% 40% no-repeat, radial-gradient(circle, #5e6569 0 2px, transparent 2.5px) 50% 70% / 100% 40% no-repeat, var(--ct-steel-h);
}
.site[data-look="contractor"] .ct-plank::before { left: 0; }
.site[data-look="contractor"] .ct-plank::after { right: 0; }
.site[data-look="contractor"] .ct-plank-text { flex: 1 1 22rem; min-width: 0; }
.site[data-look="contractor"] .ct-plank :is(h2, h3) { margin: 0; font-size: clamp(1.35rem, 1.05rem + 1.1vw, 2.15rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.015em; line-height: 1; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .ct-plank .service-note { margin: 0.45rem 0 0; color: var(--ct-plank-muted); font-size: 1.02rem; line-height: 1.45; max-width: 44rem; }
.site[data-look="contractor"] .ct-plank .price { flex: none; margin: 0; font-family: var(--ct-narrow); font-weight: 700; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); letter-spacing: 0.01em; font-variant-numeric: tabular-nums; white-space: normal; text-align: right; }
.site[data-look="contractor"] .ct-plank .price-from, .site[data-look="contractor"] .ct-plank .price-unit { font-size: 0.72em; color: var(--ct-plank-muted); text-transform: uppercase; letter-spacing: 0.06em; }
@media (min-width: 52rem) {
  .site[data-look="contractor"] .ct-two-bays .ct-lifts { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: calc(2 * var(--bay-pad)); }
  .site[data-look="contractor"] .ct-two-bays .ct-lift::after { left: calc(-1 * var(--bay-pad)); right: calc(-1 * var(--bay-pad)); }
  .site[data-look="contractor"] .ct-two-bays .ct-plank { flex-direction: column; align-items: stretch; height: 100%; }
  .site[data-look="contractor"] .ct-two-bays .ct-plank-text { flex: 1 1 auto; }
  .site[data-look="contractor"] .ct-two-bays .ct-plank .price { text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .ct-plank { transition: transform 0.2s ease, box-shadow 0.2s ease; }
  .site[data-look="contractor"] .ct-lift:hover .ct-plank { transform: translateY(-4px); box-shadow: inset 0 -6px 0 #b39563, inset 0 1px 0 rgb(255 255 255 / 0.45), 0 6px 0 rgb(0 0 0 / 0.12); }
  @supports (animation-timeline: view()) {
    .site[data-look="contractor"] .ct-plank { animation: ct-slide linear forwards; animation-timeline: view(); animation-range: entry 0% entry 80%; }
    @keyframes ct-slide { from { translate: -1.25rem 0; } }
  }
}

/* --- About: photo full-bleed, text on schoon beton ------------------------ */
.site[data-look="contractor"] .ct-about { max-width: none; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--ct-concrete); }
.site[data-look="contractor"] .ct-about-photo { min-width: 0; }
.site[data-look="contractor"] .ct-about-photo .about-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; min-height: 22rem; max-height: none; }
.site[data-look="contractor"] .ct-about-text {
  padding: clamp(3rem, 7vw, 6.5rem) max(var(--gap), (100vw - var(--wrap)) / 2);
  /* Fair-faced concrete: formwork panel joints and the tie holes. */
  background:
    radial-gradient(circle, #a19e97 0 4px, #bdbab3 4px 5.5px, transparent 6px) -30px -30px / 360px 240px,
    linear-gradient(90deg, rgb(0 0 0 / 0.08) 1px, transparent 1px) 0 0 / 360px 100%,
    linear-gradient(180deg, rgb(0 0 0 / 0.08) 1px, transparent 1px) 0 0 / 100% 240px,
    linear-gradient(180deg, #d3d1cb, #cbc9c2);
  color: var(--ct-ink);
}
.site[data-look="contractor"] .ct-about-text > * { max-width: 38rem; }
.site[data-look="contractor"] .ct-about-text :is(h1, h2) { margin-bottom: 0.45em; }
.site[data-look="contractor"] .ct-about-text p { color: #26251f; }
.site[data-look="contractor"] .ct-about-text > p:first-of-type { font-size: clamp(1.35rem, 1.05rem + 1vw, 1.9rem); line-height: 1.3; font-weight: 600; color: var(--ct-ink); letter-spacing: -0.01em; }
@media (min-width: 52rem) {
  .site[data-look="contractor"] .ct-about.has-photo { grid-template-columns: 1fr 1fr; min-height: 38rem; }
  .site[data-look="contractor"] .ct-about.has-photo .ct-about-text { padding-inline: clamp(2.5rem, 5vw, 5rem) max(var(--gap), (100vw - var(--wrap)) / 2); align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
  .site[data-look="contractor"] .about-image_right.has-photo .ct-about-photo { order: 2; }
  .site[data-look="contractor"] .about-image_right.has-photo .ct-about-text { padding-inline: max(var(--gap), (100vw - var(--wrap)) / 2) clamp(2.5rem, 5vw, 5rem); }
}
@media (max-width: 51.99rem) { .site[data-look="contractor"] .ct-about-photo .about-img { height: 62vw; min-height: 14rem; } }

/* --- Reviews: painted on the plywood hoarding ------------------------------ */
.site[data-look="contractor"] .ct-hoarding {
  --text: var(--ct-on-ply); --muted: var(--ct-ply-muted);
  color: var(--ct-on-ply);
  padding-block: clamp(4rem, 8vw, 7rem);
  background:
    radial-gradient(circle, #6d6a63 0 2.5px, transparent 3px) -0.9rem 1.4rem / 30.5rem 9rem,
    linear-gradient(90deg, rgb(70 48 18 / 0.35) 2px, transparent 2px) -1px 0 / 30.5rem 100%,
    repeating-linear-gradient(91deg, transparent 0 17px, rgb(150 105 45 / 0.08) 17px 19px, transparent 19px 53px),
    repeating-linear-gradient(88.7deg, transparent 0 41px, rgb(120 80 30 / 0.07) 41px 44px, transparent 44px 97px),
    repeating-linear-gradient(90.4deg, transparent 0 7px, rgb(255 255 255 / 0.12) 7px 8px, transparent 8px 29px),
    var(--ct-ply);
}
.site[data-look="contractor"] .ct-hoarding :is(h1, h2) { max-width: 20ch; }
.site[data-look="contractor"] .ct-boards { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); quotes: '„' '”' '‚' '’'; }
@media (min-width: 52rem) { .site[data-look="contractor"] .ct-hoarding:not(.is-single) .ct-boards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.site[data-look="contractor"] .ct-boards figure { margin: 0; padding: 0; border: 0; }
.site[data-look="contractor"] .ct-boards blockquote { margin: 0 0 1.25rem; font-size: clamp(1.45rem, 1.05rem + 1.5vw, 2.45rem); line-height: 1.16; font-weight: 800; letter-spacing: -0.015em; text-wrap: pretty; }
.site[data-look="contractor"] .ct-hoarding.is-single blockquote { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.6rem); max-width: 30ch; }
.site[data-look="contractor"] .ct-boards blockquote p { margin: 0; }
.site[data-look="contractor"] .ct-boards blockquote p::before { content: open-quote; }
.site[data-look="contractor"] .ct-boards blockquote p::after { content: close-quote; }
.site[data-look="contractor"] .ct-boards figcaption { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.05rem; color: var(--ct-ply-muted); }
.site[data-look="contractor"] .ct-boards figcaption::before { content: ''; display: inline-block; width: 2.2rem; height: 3px; background: currentColor; vertical-align: 0.3em; margin-right: 0.7rem; }

/* --- Werkgebied: yellow route signs on the asphalt ------------------------ */
.site[data-look="contractor"] .ct-route {
  --text: var(--ct-on-asphalt); --muted: var(--ct-asphalt-muted);
  color: var(--ct-on-asphalt);
  padding-block: clamp(4rem, 8vw, 6.5rem) clamp(5rem, 9vw, 7.5rem);
  background:
    repeating-linear-gradient(90deg, #ecebe6 0 3.5rem, transparent 3.5rem 6rem) 0 calc(100% - 1.6rem) / 100% 10px no-repeat,
    var(--ct-asphalt);
}
.site[data-look="contractor"] .ct-route-inner { display: grid; gap: 2rem clamp(2rem, 5vw, 5rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="contractor"] .ct-route-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); } }
.site[data-look="contractor"] .ct-route .area-body { color: var(--ct-asphalt-muted); font-size: var(--fs-lead); max-width: 30rem; }
/* The signs on one mast, pointing either way; a long list of places
   (eight or more) is set as a row of loose signs instead. */
.site[data-look="contractor"] .ct-signs { --tip: 1.5rem; position: relative; display: grid; gap: 0.75rem; margin: 0; padding: 0.5rem 0 3.5rem; font-size: 1rem; }
.site[data-look="contractor"] .ct-signs::before { content: ''; position: absolute; top: -1rem; bottom: 0; left: calc(50% - 9px); width: 18px; background: var(--ct-steel); }
.site[data-look="contractor"] .ct-signs li { position: relative; min-width: 0; justify-self: start; max-width: calc(50% + 0.5rem); margin-left: calc(50% - 0.5rem); padding: 4px; background: var(--ct-on-sign); clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
.site[data-look="contractor"] .ct-signs li::after { content: none !important; }
.site[data-look="contractor"] .ct-signs span {
  display: block; padding: 0.6rem calc(var(--tip) + 0.7rem) 0.55rem 1.1rem;
  background: var(--ct-sign); color: var(--ct-on-sign);
  clip-path: polygon(0 0, calc(100% - var(--tip) + 2px) 0, calc(100% - 3px) 50%, calc(100% - var(--tip) + 2px) 100%, 0 100%);
  font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; font-size: clamp(1.35rem, 1rem + 1.2vw, 2.1rem); line-height: 1.05; overflow-wrap: anywhere; white-space: normal;
}
.site[data-look="contractor"] .ct-signs li:nth-child(even) { justify-self: end; margin-left: 0; margin-right: calc(50% - 0.5rem); clip-path: polygon(var(--tip) 0, 100% 0, 100% 100%, var(--tip) 100%, 0 50%); }
.site[data-look="contractor"] .ct-signs li:nth-child(even) span { padding: 0.6rem 1.1rem 0.55rem calc(var(--tip) + 0.7rem); clip-path: polygon(calc(var(--tip) - 2px) 0, 100% 0, 100% 100%, calc(var(--tip) - 2px) 100%, 3px 50%); }
@media (max-width: 40rem) {
  .site[data-look="contractor"] .ct-signs::before { left: 0.6rem; }
  .site[data-look="contractor"] .ct-signs li, .site[data-look="contractor"] .ct-signs li:nth-child(even) { justify-self: start; margin: 0 0 0 1.1rem; max-width: calc(100% - 1.1rem); clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%); }
  .site[data-look="contractor"] .ct-signs li:nth-child(even) span { padding: 0.6rem calc(var(--tip) + 0.7rem) 0.55rem 1.1rem; clip-path: polygon(0 0, calc(100% - var(--tip) + 2px) 0, calc(100% - 3px) 50%, calc(100% - var(--tip) + 2px) 100%, 0 100%); }
}
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8)) { display: flex; flex-wrap: wrap; gap: 0.8rem; padding-bottom: 1rem; }
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8))::before { content: none; }
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8)) li { margin: 0 !important; max-width: 100%; clip-path: polygon(0 0, calc(100% - var(--tip)) 0, 100% 50%, calc(100% - var(--tip)) 100%, 0 100%) !important; }
.site[data-look="contractor"] .ct-signs:has(> li:nth-child(8)) li span { padding: 0.5rem calc(var(--tip) + 0.6rem) 0.45rem 0.9rem !important; clip-path: polygon(0 0, calc(100% - var(--tip) + 2px) 0, calc(100% - 3px) 50%, calc(100% - var(--tip) + 2px) 100%, 0 100%) !important; font-size: clamp(1.1rem, 0.95rem + 0.5vw, 1.4rem); }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="contractor"] .ct-signs li { transition: translate 0.18s ease; }
  .site[data-look="contractor"] .ct-signs li:hover { translate: 0.4rem 0; }
}

/* --- Hours: the sign at the gate, wired to the bouwhek mesh ---------------- */
.site[data-look="contractor"] .ct-gate {
  padding-block: clamp(3.5rem, 7vw, 6rem);
  background:
    linear-gradient(90deg, #8b9297 2px, transparent 2px) 0 0 / 1.6rem 100%,
    linear-gradient(180deg, #8b9297 2px, transparent 2px) 0 0 / 100% 4.4rem,
    var(--ct-concrete);
}
.site[data-look="contractor"] .ct-gate-inner { display: grid; gap: 2rem clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="contractor"] .ct-gate-inner { grid-template-columns: minmax(0, 36rem) minmax(0, 26rem); } }
.site[data-look="contractor"] .ct-gate-sign {
  container-type: inline-size; position: relative; background: var(--ct-white); color: var(--ct-ink); border: 4px solid var(--ct-ink);
  padding: 0 clamp(1.1rem, 3vw, 2rem) 0.8rem;
}
/* Binders twisted round the mesh at the sign's corners. */
.site[data-look="contractor"] .ct-gate-sign::before,
.site[data-look="contractor"] .ct-gate-sign::after { content: ''; position: absolute; top: -10px; width: 8px; height: 22px; background: #1d1d1d; border-radius: 2px; }
.site[data-look="contractor"] .ct-gate-sign::before { left: 1.2rem; }
.site[data-look="contractor"] .ct-gate-sign::after { right: 1.2rem; }
.site[data-look="contractor"] .ct-gate-sign :is(h1, h2) { margin: 0 calc(-1 * clamp(1.1rem, 3vw, 2rem)) 0.4rem; padding: 0.8rem clamp(1.1rem, 3vw, 2rem) 0.7rem; background: var(--primary); color: var(--on-primary); border-bottom: 4px solid var(--ct-ink); font-size: clamp(1.6rem, 8.5cqi, 3rem); overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .ct-gate .hours-table { font-size: 1.2rem; }
.site[data-look="contractor"] .ct-gate .hours-table th { font-weight: 800; text-transform: uppercase; font-size: 1rem; letter-spacing: 0.02em; }
.site[data-look="contractor"] .ct-gate .hours-table td { font-family: var(--ct-narrow); font-weight: 700; font-size: 1.25rem; }
.site[data-look="contractor"] .ct-gate .hours-table :is(th, td) { border-bottom-color: #c9c6be; }
.site[data-look="contractor"] .ct-gate .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="contractor"] .ct-gate .hours-table th::after { background: var(--primary); color: var(--on-primary); }
.site[data-look="contractor"] .ct-gate .hours-table th::before { background: var(--primary) !important; width: 6px !important; }
@media (max-width: 40rem) {
  .site[data-look="contractor"] .ct-gate .hours-table th { white-space: normal; }
  .site[data-look="contractor"] .ct-gate .hours-table th::after { display: block; width: fit-content; margin: 0.3rem 0 0; }
  .site[data-look="contractor"] .ct-gate .hours-table td { white-space: nowrap; font-size: 1.1rem; }
}
.site[data-look="contractor"] .ct-gate-note { position: relative; justify-self: start; background: var(--ct-white); color: var(--ct-ink); padding: 1.25rem clamp(1.1rem, 3vw, 1.75rem); border: 4px solid var(--ct-ink); max-width: 30rem; }
.site[data-look="contractor"] .ct-gate-note::before, .site[data-look="contractor"] .ct-gate-note::after { content: ''; position: absolute; top: -10px; width: 8px; height: 22px; background: #1d1d1d; border-radius: 2px; }
.site[data-look="contractor"] .ct-gate-note::before { left: 1.2rem; }
.site[data-look="contractor"] .ct-gate-note::after { right: 1.2rem; }
.site[data-look="contractor"] .ct-gate-note .hours-place { color: #3b3a36; margin-bottom: 0.75rem; }
.site[data-look="contractor"] .ct-gate-note .hours-call { margin: 0; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); font-weight: 900; }
.site[data-look="contractor"] .ct-gate-note .hours-call a { text-decoration: none; }

/* --- FAQ: on the bestektekening, heavy rules, the plus on a yellow nut --- */
.site[data-look="contractor"] .s-faq {
  background:
    linear-gradient(90deg, rgb(40 70 90 / 0.1) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(180deg, rgb(40 70 90 / 0.1) 1px, transparent 1px) 0 0 / 6rem 6rem,
    linear-gradient(90deg, rgb(40 70 90 / 0.045) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem,
    linear-gradient(180deg, rgb(40 70 90 / 0.045) 1px, transparent 1px) 0 0 / 1.2rem 1.2rem,
    #f7f7f4;
  padding-block: clamp(4rem, 8vw, 7rem);
}
.site[data-look="contractor"] .s-faq .faq-items { max-width: 58rem; }
@media (min-width: 60rem) {
  .site[data-look="contractor"] .s-faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="contractor"] .s-faq .wrap > :is(h1, h2) { position: sticky; top: 7rem; }
  .site[data-look="contractor"] .s-faq .faq-items { margin-top: 0; }
}
.site[data-look="contractor"] .s-faq details { border-bottom: 3px solid var(--ct-ink); }
.site[data-look="contractor"] .s-faq details:first-child { border-top: 6px solid var(--ct-ink); }
.site[data-look="contractor"] .s-faq summary { min-height: 4.5rem; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; padding-block: 0.9rem; line-height: 1.25; }
.site[data-look="contractor"] .s-faq summary::after {
  content: '+'; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; font-weight: 800; font-size: 1.6rem;
  background: var(--ct-sign); color: var(--ct-on-sign);
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
}
.site[data-look="contractor"] .s-faq details[open] summary::after { content: '\2212'; }
.site[data-look="contractor"] .s-faq details p { color: #3b3a36; font-size: 1.1rem; }
.site[data-look="contractor"] .s-faq dt { font-size: 1.3rem; font-weight: 800; margin-top: 1.6rem; padding-top: 1rem; border-top: 3px solid var(--ct-ink); }
.site[data-look="contractor"] .s-faq dd { color: #3b3a36; }

/* --- Call to action: the banner on the bouwhekken -------------------------- */
.site[data-look="contractor"] .ct-fence { padding: clamp(9rem, 22vw, 17rem) 0 0; position: relative; overflow: clip; background: #9fb4c2; }
.site[data-look="contractor"] .ct-fence-behind { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="contractor"] .ct-fence-run {
  position: relative; padding-block: 1.4rem 0;
  /* The fence: galvanised mesh between top and bottom rails, posts per panel. */
  background:
    var(--ct-steel-h) 0 0 / 100% 10px no-repeat,
    linear-gradient(90deg, #b9c0c4 0 8px, transparent 8px) -4px 0 / clamp(14rem, 25vw, 22rem) 100%,
    linear-gradient(90deg, rgb(205 211 214 / 0.9) 1.5px, transparent 1.5px) 0 0 / 1.6rem 100%,
    linear-gradient(180deg, rgb(205 211 214 / 0.9) 1.5px, transparent 1.5px) 0 0 / 100% 4.4rem,
    rgb(40 42 44 / 0.25);
}
.site[data-look="contractor"] .ct-banner {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem 3rem;
  padding: clamp(1.75rem, 4vw, 3.25rem) clamp(1.25rem, 4vw, 3.5rem);
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 6px 0 rgb(0 0 0 / 0.18);
}
/* Tie wraps along the edges of the banner. */
.site[data-look="contractor"] .ct-banner::before,
.site[data-look="contractor"] .ct-banner::after { content: ''; position: absolute; left: 0; right: 0; height: 12px; background: radial-gradient(circle, #1b1b1b 0 4px, transparent 4.5px) 1rem 50% / 6rem 100% repeat-x; }
.site[data-look="contractor"] .ct-banner::before { top: 0.35rem; }
.site[data-look="contractor"] .ct-banner::after { bottom: 0.35rem; }
.site[data-look="contractor"] .ct-banner-text { max-width: 44rem; min-width: 0; }
.site[data-look="contractor"] .ct-banner :is(h1, h2) { margin: 0 0 0.3em; color: inherit; font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5.4rem); line-height: 0.92; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .ct-banner p { margin: 0; font-size: var(--fs-lead); color: inherit; }
.site[data-look="contractor"] .ct-banner .btn { background: var(--ct-ink); color: var(--ct-white); border-color: var(--ct-ink); box-shadow: 4px 4px 0 rgb(0 0 0 / 0.35); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); min-height: 64px; padding-inline: 1.75rem; white-space: normal; text-align: left; }
.site[data-look="contractor"] .ct-banner .cta-detail { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* The concrete feet the fence panels stand in. */
.site[data-look="contractor"] .ct-feet {
  display: block; height: 2.6rem; margin-top: 1.4rem;
  background:
    linear-gradient(180deg, #8d8b86, #6e6c67) -3rem 100% / clamp(14rem, 25vw, 22rem) 1.6rem repeat-x;
  -webkit-mask: linear-gradient(90deg, transparent 0 calc(50% - 3.2rem), #000 calc(50% - 3.2rem) calc(50% + 3.2rem), transparent 0) 0 0 / clamp(14rem, 25vw, 22rem) 100%;
  mask: linear-gradient(90deg, #000 0 6.4rem, transparent 6.4rem) -3.2rem 0 / clamp(14rem, 25vw, 22rem) 100%;
}
.site[data-look="contractor"] .ct-fence-run::after { content: ''; display: block; height: 0.9rem; background: #3a3936; }

/* --- Contact: the bouwbord again, the number as its biggest field ------- */
.site[data-look="contractor"] .s-contact { background: var(--ct-kzs); padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="contractor"] .s-contact .contact-details { container-type: inline-size; display: block; background: var(--ct-white); color: var(--ct-ink); border: 4px solid var(--ct-ink); box-shadow: 0 16px 24px -12px rgb(0 0 0 / 0.3); min-width: 0; }
.site[data-look="contractor"] .s-contact .contact-details > :is(h1, h2) { margin: 0; padding: clamp(1rem, 2.5vw, 1.6rem) clamp(1rem, 3vw, 2.2rem) clamp(0.85rem, 2vw, 1.3rem); background: var(--primary); color: var(--on-primary); border-bottom: 4px solid var(--ct-ink); font-size: clamp(2.4rem, 1.2rem + 4.6vw, 6.2rem); line-height: 0.9; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="contractor"] .s-contact .contact-details > .lead { margin: 0; padding: 1rem clamp(1rem, 3vw, 2.2rem); max-width: none; color: #3b3a36; border-bottom: 2px solid var(--ct-ink); }
.site[data-look="contractor"] .s-contact .contact-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; border: 0; }
.site[data-look="contractor"] .s-contact .contact-list li:last-child:nth-child(even) { grid-column: 1 / -1; border-left: 0 !important; }
.site[data-look="contractor"] .s-contact .contact-list li { padding-inline: clamp(1rem, 3vw, 2.2rem); border-bottom: 0; border-top: 1px solid var(--ct-ink); min-width: 0; }
.site[data-look="contractor"] .s-contact .contact-list li:first-child { grid-column: 1 / -1; border-top: 0; }
.site[data-look="contractor"] .s-contact .contact-list li:nth-child(odd):not(:first-child) { border-left: 1px solid var(--ct-ink); }
.site[data-look="contractor"] .s-contact .contact-link { padding-block: 1rem 1.15rem; }
.site[data-look="contractor"] .s-contact .contact-label { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: #4a4843; }
.site[data-look="contractor"] .s-contact .contact-value { font-weight: 900; letter-spacing: -0.02em; font-size: clamp(1.3rem, 1.05rem + 1vw, 2rem); }
.site[data-look="contractor"] .s-contact .contact-list li:first-child .contact-value { white-space: nowrap; font-size: clamp(1.9rem, 11.5cqi, 6.4rem); line-height: 0.95; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; }
.site[data-look="contractor"] .s-contact .contact-also, .site[data-look="contractor"] .s-contact .contact-note { font-weight: 700; }
.site[data-look="contractor"] .s-contact .contact-also { margin-top: -0.6rem; margin-bottom: 0.7rem; }
@media (max-width: 40rem) { .site[data-look="contractor"] .s-contact .contact-list { grid-template-columns: minmax(0, 1fr); } .site[data-look="contractor"] .s-contact .contact-list li { border-left: 0 !important; } }
@media (min-width: 52rem) {
  .site[data-look="contractor"] .contact-form_and_details .contact-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .site[data-look="contractor"] .contact-form_and_details .contact-list { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="contractor"] .contact-form_and_details .contact-list li { border-left: 0 !important; grid-column: 1 / -1; }
}

/* After the request form (also on the wall), the contact board stands on plain concrete. */
.site[data-look="contractor"] .s-request + .s-contact { background: var(--ct-concrete); }
.site[data-look="contractor"] .ct-banner.is-long :is(h1, h2) { font-size: clamp(2rem, 1.1rem + 2.8vw, 3.8rem); }

/* --- Forms (contact form, request form, booking): the werkbon on a board -- */
.site[data-look="contractor"] :is(.contact-form, .request-form) {
  background: var(--ct-white); --bg: var(--ct-white); color: var(--ct-ink);
  border: 4px solid var(--ct-ink); border-top: 18px solid var(--primary); box-shadow: inset 0 3px 0 var(--ct-ink);
  padding: clamp(1.25rem, 3.5vw, 2.25rem);
}
.site[data-look="contractor"] :where(.site form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 2px solid var(--ct-ink); border-radius: 0; }
.site[data-look="contractor"] :is(.contact-form, .request-form) label, .site[data-look="contractor"] .request-form legend { font-weight: 800; }
.site[data-look="contractor"] .request-step > legend { font-weight: 900; text-transform: uppercase; }
.site[data-look="contractor"] .s-request { background: var(--ct-kzs); padding-block: clamp(4rem, 8vw, 6.5rem); }
.site[data-look="contractor"] .s-booking { background: var(--ct-concrete); }
.site[data-look="contractor"] .s-booking .booking-services { background: var(--ct-white); border: 4px solid var(--ct-ink); border-top: 18px solid var(--primary); padding-inline: clamp(1rem, 3vw, 1.75rem); }
.site[data-look="contractor"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="contractor"] .booking-name { font-weight: 800; text-transform: uppercase; font-size: 1.1rem; }

/* --- Projects (the customer's own photos): each with its plate ------------- */
.site[data-look="contractor"] .ct-projects .gallery-items { gap: clamp(1rem, 2.5vw, 2rem); }
.site[data-look="contractor"] .ct-projects .gallery-items li { background: none; }
.site[data-look="contractor"] .ct-projects figure { margin: 0; height: 100%; display: flex; flex-direction: column; }
.site[data-look="contractor"] .ct-projects img { border: 4px solid var(--ct-ink); border-bottom: 0; flex: 1; object-fit: cover; }
.site[data-look="contractor"] .ct-plate { margin: 0; padding: 0.65rem 0.9rem; background: var(--ct-white); color: var(--ct-ink); border: 4px solid var(--ct-ink); border-top-width: 3px; font-weight: 800; text-transform: uppercase; font-size: 0.85rem; letter-spacing: 0.02em; line-height: 1.3; }

/* --- Footer: brick facade, gevelsteen, trasraam ----------------------------- */
.site[data-look="contractor"] .ct-facade { padding: 0; background: var(--deep); font-size: 1rem; }
.site[data-look="contractor"] .ct-brick { padding-block: clamp(3.5rem, 8vw, 6.5rem); background: var(--ct-brick, none) 0 0 / 396px 108px, #8a3a22; }
.site[data-look="contractor"] .ct-stone {
  --text: var(--ct-on-stone); --muted: var(--ct-stone-muted);
  width: fit-content; max-width: 100%; margin-inline: auto; text-align: center;
  padding: clamp(1.25rem, 3.5vw, 2.25rem) clamp(1.5rem, 5vw, 3.5rem);
  color: var(--ct-on-stone);
  background: linear-gradient(160deg, #e6dfcf, #d4cbb8);
  box-shadow: 0 0 0 5px #bdb5a6, inset 0 0 0 6px #e9e3d5, inset 0 0 0 8px #a69d8b, 0 10px 18px rgb(0 0 0 / 0.35);
}
.site[data-look="contractor"] .ct-stone p { margin: 0; color: var(--ct-on-stone); text-shadow: 0 1px 0 rgb(255 255 255 / 0.55); }
.site[data-look="contractor"] .ct-stone .footer-name { font-family: var(--font-heading); font-weight: 900; text-transform: uppercase; letter-spacing: 0.06em; font-size: clamp(1.35rem, 1rem + 1.4vw, 2.2rem); line-height: 1.1; color: var(--ct-on-stone); overflow-wrap: break-word; hyphens: auto; margin-bottom: 0.15em; }
.site[data-look="contractor"] .ct-anno { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.5rem); }
.site[data-look="contractor"] .ct-stone-small { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.1rem 1.2rem; margin-top: 0.8rem !important; padding-top: 0.7rem; border-top: 1px solid #a69d8b; font-size: 0.95rem; color: var(--ct-stone-muted) !important; }
.site[data-look="contractor"] .ct-tras { position: relative; padding-top: calc(60px * 0.6 + clamp(2rem, 5vw, 3rem)); }
.site[data-look="contractor"] .ct-tras::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: calc(60px * 0.6); background: var(--ct-tras, none) 0 0 / 396px 36px, #3b2a26; border-bottom: 4px solid #6f6a61; }
.site[data-look="contractor"] .ct-facade .footer-inner { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
.site[data-look="contractor"] .ct-facade .footer-title { font-family: var(--ct-narrow); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--deep-muted); }
.site[data-look="contractor"] .ct-facade .footer-col a { font-weight: 600; font-size: 1.05rem; }

/* --- Phones: the quick bar in ink and orange --------------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="contractor"] .quickbar { --on-deep: var(--ct-white); background: var(--ct-ink); border-top: 3px solid var(--ct-ink); }
  .site[data-look="contractor"] .quick { font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; color: var(--ct-white); }
  .site[data-look="contractor"] .quick-primary { color: var(--on-primary); }
}
/* Narrow phones: the board's fields one under the other. */
@media (max-width: 30rem) {
  .site[data-look="contractor"] .ct-board-fields { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="contractor"] .ct-board-fields > div { border-left: 0 !important; grid-column: 1 / -1; }
}

/* ---- looks/drivingschool.css ---- */
/* The drivingschool look: everything here is scoped to .site[data-look="drivingschool"]. Appended after base.css (bun run --filter @platform/sections css).
   The page is the road: the hero and the lespakketten are the two lanes of
   one asphalt road (dashed centre line between them), the reviews hang as
   onderborden on a post in the verge, the towns are komborden, the contact
   starts at the haaientanden, the footer is the name painted on the road.
   Markings are road white (Dutch markings are white); the blue is the sign
   blue of the L, the komborden and the wegwijzers; red only for the exams. */

.site[data-look="drivingschool"] {
  --wrap: 80rem;
  --fs-base: 1.0625rem;
  --fs-lead: clamp(1.125rem, 1.05rem + 0.35vw, 1.3rem);
  --fs-h2: clamp(2.3rem, 1.35rem + 3.4vw, 4.6rem);
  --fs-h3: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem);
  --road-ink: #1a1c1f;
  --steel: #8a9097;
  --verge: #557a35;
  --verge-dark: #46672b;
  --concrete: #e7e6e0;
  --paint: var(--on-asphalt);
  --asphalt-lift: #2d3035;
  /* Asphalt: the aggregate as three offset speckle grids, only on asphalt bands (gradients, no image files: the export ships only fonts). */
  --asphalt-tex: radial-gradient(rgb(255 255 255 / 0.035) 0.6px, transparent 1.1px), radial-gradient(rgb(0 0 0 / 0.16) 0.7px, transparent 1.2px), radial-gradient(rgb(255 255 255 / 0.03) 0.8px, transparent 1.3px);
  --asphalt-size: 5px 5px, 7px 7px, 11px 11px;
  --asphalt-pos: 0 0, 3px 4px, 6px 2px;
  /* Haaientanden: give-way triangles, pointing at the one who gives way. */
  --teeth: conic-gradient(from -33deg at 50% 100%, var(--paint) 0 66deg, transparent 66deg);
  --dash: 3rem;
  --gap-dash: 6rem;
  line-height: 1.6;
}
.site[data-look="drivingschool"] main > .s + .s { border-top: 0; }
.site[data-look="drivingschool"] :is(h1, h2) { letter-spacing: -0.025em; line-height: 0.98; }
.site[data-look="drivingschool"] h2 { font-size: var(--fs-h2); margin-bottom: 0.45em; max-width: 18ch; }
.site[data-look="drivingschool"] .lead { max-width: 36rem; }

/* Asphalt bands re-point the text tokens at the road palette. */
.site[data-look="drivingschool"] :is(.ds-lane, .ds-header, .ds-contact, .ds-roadname) {
  --bg: var(--asphalt); --text: var(--on-asphalt); --muted: var(--asphalt-muted); --border: color-mix(in srgb, var(--on-asphalt) 28%, transparent);
  background-color: var(--asphalt); color: var(--on-asphalt);
}
.site[data-look="drivingschool"] :is(.ds-lane, .ds-contact, .ds-roadname, .site-footer) { background-image: var(--asphalt-tex); background-size: var(--asphalt-size); background-position: var(--asphalt-pos); }
.site[data-look="drivingschool"] :is(.ds-lane, .ds-header, .ds-contact, .ds-roadname) :focus-visible { outline-color: var(--lane); }

/* --- The blue L (also in the header) --------------------------------------- */
.site[data-look="drivingschool"] .ds-l {
  display: inline-grid; place-items: center; flex: none;
  background: var(--kombord); color: var(--on-kombord);
  font-family: var(--font-heading); font-weight: 800; line-height: 1;
  border-radius: 0.12em; box-shadow: inset 0 0 0 0.06em var(--kombord), inset 0 0 0 0.11em var(--on-kombord);
}

/* --- Header: a strip of asphalt -------------------------------------------- */
.site[data-look="drivingschool"] .ds-header { border-bottom: 0; }
.site[data-look="drivingschool"] .ds-header .brand { gap: 0.6rem; font-weight: 800; letter-spacing: -0.01em; font-size: 1.3rem; }
.site[data-look="drivingschool"] .ds-l-mini { width: 1.9rem; height: 1.9rem; font-size: 1.3rem; padding-top: 0.12em; }
.site[data-look="drivingschool"] .ds-header nav a { color: var(--on-asphalt); }
.site[data-look="drivingschool"] .ds-header .btn { font-family: var(--font-heading); font-weight: 800; letter-spacing: 0.01em; }

/* --- Buttons ------------------------------------------------------------------ */
.site[data-look="drivingschool"] .btn { border-radius: 4px; font-family: var(--font-heading); font-weight: 800; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.site[data-look="drivingschool"] .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 3px 0 var(--road-ink); }
.site[data-look="drivingschool"] .ds-lane .btn:hover, .site[data-look="drivingschool"] .ds-header .btn:hover { box-shadow: 0 3px 0 var(--paint); }

/* --- Hero: the road ahead and our lane ------------------------------------------ */
.site[data-look="drivingschool"] .ds-hero {
  padding: 0; display: grid; grid-template-rows: minmax(clamp(12rem, calc(42 * var(--raam-vh)), 30rem), 1fr) auto;
  min-height: calc(calc(100 * var(--raam-vh)) - 4.5rem); background: var(--asphalt); overflow: clip;
}
.site[data-look="drivingschool"] .ds-hero:not(.has-photo) { grid-template-rows: clamp(9rem, calc(22 * var(--raam-vh)), 13rem) auto; min-height: 0; }
.site[data-look="drivingschool"] .ds-hero-photo { position: relative; min-height: 0; }
.site[data-look="drivingschool"] .ds-hero-photo .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; object-position: 50% 62%; }
.site[data-look="drivingschool"] .ds-lane-hero {
  position: relative; grid-row: 2;
  /* The solid edge line just inside the asphalt edge. */
  background-image: linear-gradient(var(--paint), var(--paint)), var(--asphalt-tex);
  background-size: 100% clamp(5px, 0.45vw, 8px), var(--asphalt-size); background-position: 0 clamp(0.6rem, 1.1vw, 1rem), var(--asphalt-pos); background-repeat: no-repeat, repeat, repeat, repeat;
  padding-block: 0 clamp(3rem, 5.5vw, 4.75rem);
}
.site[data-look="drivingschool"] .ds-hero-inner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-items: end; column-gap: clamp(2rem, 5vw, 5rem); padding-top: clamp(2.2rem, 4vw, 3.2rem); }
.site[data-look="drivingschool"] .ds-hero h1, .site[data-look="drivingschool"] .ds-hero h2 {
  font-size: clamp(2.65rem, 1rem + 5vw, 6.4rem); line-height: 0.93; letter-spacing: -0.035em; max-width: 17ch; margin: 0 0 0.25em; color: var(--paint);
}
.site[data-look="drivingschool"] .ds-hero .lead { color: var(--asphalt-muted); font-size: var(--fs-lead); max-width: 34rem; }
.site[data-look="drivingschool"] .ds-hero .actions { margin-top: clamp(1.3rem, 2.4vw, 1.9rem); }
.site[data-look="drivingschool"] .ds-hero .btn { min-height: 3.5rem; padding: 0.8rem 1.7rem; font-size: 1.2rem; }
.site[data-look="drivingschool"] .ds-hero .cta-alt { color: var(--paint); font-size: 1.1rem; }
.site[data-look="drivingschool"] .ds-arrow { display: none; }
@media (min-width: 64rem) {
  /* The headline across the lane, the lead and the button beside its foot. */
  .site[data-look="drivingschool"] .ds-hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(18rem, 0.8fr); grid-template-rows: 1fr auto auto; }
  .site[data-look="drivingschool"] .ds-hero-inner > :is(h1, h2) { grid-column: 1; grid-row: 1 / span 3; margin-bottom: 0; align-self: end; }
  .site[data-look="drivingschool"] .ds-hero-inner > .lead { grid-column: 2; grid-row: 2; align-self: end; margin: 1.5rem 0 0; }
  .site[data-look="drivingschool"] .ds-hero-inner > .actions { grid-column: 2; grid-row: 3; align-self: end; }
  /* A lane arrow painted ahead in the lane, pointing the way the road runs. */
  .site[data-look="drivingschool"] .ds-arrow { display: block; grid-column: 2; grid-row: 1; align-self: start; justify-self: end; width: clamp(10rem, 17vw, 16rem); height: auto; fill: var(--paint); opacity: 0.85; }
}
/* The dashed centre line between our lane and the other (the services). */
.site[data-look="drivingschool"] .ds-centreline {
  position: absolute; left: 0; right: 0; bottom: 0; height: clamp(6px, 0.5vw, 9px); z-index: 2;
  background: linear-gradient(90deg, var(--paint) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--gap-dash))) 0 0 / calc(var(--dash) + var(--gap-dash)) 100% repeat-x;
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="drivingschool"] .ds-centreline { animation: ds-drive 2.4s cubic-bezier(0.2, 0.7, 0.3, 1) 0.2s both; }
  @keyframes ds-drive { from { background-position: calc(-6 * (var(--dash) + var(--gap-dash))) 0; } to { background-position: 0 0; } }
}

/* --- The dakbord ---------------------------------------------------------------- */
.site[data-look="drivingschool"] .ds-dakbord { margin: 0; display: grid; justify-items: stretch; width: fit-content; max-width: 100%; filter: drop-shadow(0 2px 0 rgb(0 0 0 / 0.35)); }
.site[data-look="drivingschool"] .ds-dakbord-hero { position: absolute; left: 0; bottom: calc(100% - clamp(0.6rem, 1.1vw, 1rem)); max-width: min(100%, 46rem); z-index: 3; }
.site[data-look="drivingschool"] .ds-dak-panel {
  --slope: clamp(1rem, 2.4vw, 2.2rem);
  display: flex; align-items: center; gap: clamp(0.7rem, 1.4vw, 1.1rem);
  background: var(--sign); color: var(--on-sign);
  padding: clamp(0.6rem, 1.1vw, 0.95rem) calc(var(--slope) + clamp(0.6rem, 1.2vw, 1rem)) clamp(0.55rem, 1vw, 0.85rem);
  clip-path: polygon(var(--slope) 0, calc(100% - var(--slope)) 0, 100% 100%, 0 100%);
  border-top: clamp(4px, 0.5vw, 7px) solid var(--primary);
}
.site[data-look="drivingschool"] .ds-dakbord .ds-l { width: 1.25em; height: 1.25em; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.6rem); padding-top: 0.1em; }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-name {
  margin: 0; padding: 0; background: none; clip-path: none; border: 0; text-align: left; color: var(--on-sign);
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.005em; line-height: 0.95;
  font-size: clamp(1.45rem, 0.85rem + 2.3vw, 3.1rem); overflow-wrap: anywhere; hyphens: auto; text-wrap: balance;
}
.site[data-look="drivingschool"] .ds-dakbord.fit-m .dakbord-name { font-size: clamp(1.3rem, 0.8rem + 1.9vw, 2.6rem); }
.site[data-look="drivingschool"] .ds-dakbord.fit-l .dakbord-name { font-size: clamp(1.1rem, 0.75rem + 1.4vw, 2.05rem); }
.site[data-look="drivingschool"] .ds-dakbord.fit-xl .dakbord-name { font-size: clamp(1rem, 0.7rem + 1.05vw, 1.65rem); }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-band {
  margin: 0; padding: 0.3rem 1rem 0.35rem; text-align: center; background: var(--primary); color: var(--on-primary);
  font-family: var(--font-figures); font-weight: 800; font-size: clamp(1rem, 0.85rem + 0.6vw, 1.45rem); letter-spacing: 0.06em; line-height: 1.2;
}
.site[data-look="drivingschool"] .ds-dakbord .dakbord-band a { color: inherit; text-decoration: none; }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-band a:hover { text-decoration: underline; }
.site[data-look="drivingschool"] .ds-dakbord .dakbord-feet { height: clamp(6px, 0.7vw, 10px); background: linear-gradient(90deg, transparent 10%, #0d0e10 10% 22%, transparent 22% 78%, #0d0e10 78% 90%, transparent 90%); }

/* --- Services: the other lane --------------------------------------------------- */
.site[data-look="drivingschool"] .ds-services { padding: 0; }
.site[data-look="drivingschool"] .ds-lane-services {
  padding-block: clamp(4rem, 8vw, 7rem) clamp(4.5rem, 9vw, 8rem);
  background-image: linear-gradient(var(--paint), var(--paint)), var(--asphalt-tex);
  background-size: 100% clamp(5px, 0.45vw, 8px), var(--asphalt-size); background-position: 0 calc(100% - clamp(0.6rem, 1.1vw, 1rem)), var(--asphalt-pos); background-repeat: no-repeat, repeat, repeat, repeat;
}
.site[data-look="drivingschool"] .ds-head h2, .site[data-look="drivingschool"] .ds-head h1 { color: var(--paint); }
.site[data-look="drivingschool"] .ds-head .lead { color: var(--asphalt-muted); }

/* The route to the exam: a strip of road, each step a blue wegwijzer on a
   post beside it, its number in a yellow route shield (as N-roads have). */
.site[data-look="drivingschool"] .ds-route { margin: clamp(2.5rem, 5vw, 4rem) 0 0; }
.site[data-look="drivingschool"] .ds-route figcaption { font-family: var(--font-heading); font-weight: 800; font-size: 1.05rem; color: var(--asphalt-muted); margin-bottom: 1.1rem; }
.site[data-look="drivingschool"] .ds-route ol { position: relative; display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.site[data-look="drivingschool"] .ds-stop { position: relative; display: grid; }
.site[data-look="drivingschool"] .ds-stop-sign {
  position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.6rem; width: fit-content; max-width: 100%;
  background: var(--kombord); color: var(--on-kombord); border-radius: 6px;
  box-shadow: inset 0 0 0 3px var(--kombord), inset 0 0 0 5px var(--on-kombord);
  padding: 0.6rem 1.05rem 0.55rem 0.7rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.1rem, 0.7rem + 0.75vw, 1.65rem); line-height: 1.1; overflow-wrap: anywhere;
  transition: transform 0.18s ease;
}
.site[data-look="drivingschool"] .ds-stop:hover .ds-stop-sign { transform: translateY(-3px); }
.site[data-look="drivingschool"] .ds-stop-no {
  flex: none; display: grid; place-items: center; min-width: 1.9em; padding: 0.12em 0.3em 0; border-radius: 3px;
  background: var(--lane); color: var(--on-sign); box-shadow: inset 0 0 0 2px var(--on-sign);
  font-family: var(--font-figures); font-size: 0.8em; line-height: 1.35;
}
@media (min-width: 56rem) {
  /* The road runs across; the signs stand on both verges, by turns, each
     on its post, so a long name has the room of two stops. */
  .site[data-look="drivingschool"] .ds-route ol { --zone: 5.4rem; --road: 3.1rem; grid-template-columns: repeat(var(--stops), minmax(0, 1fr)); }
  .site[data-look="drivingschool"] .ds-route ol::before {
    content: ''; position: absolute; left: 0; right: 0; top: var(--zone); height: var(--road); background: var(--asphalt-lift);
    border-block: 3px solid color-mix(in srgb, var(--paint) 70%, transparent);
  }
  .site[data-look="drivingschool"] .ds-route ol::after {
    content: ''; position: absolute; left: 0; right: 0; top: calc(var(--zone) + var(--road) / 2 - 1.5px); height: 3px;
    background: linear-gradient(90deg, color-mix(in srgb, var(--paint) 80%, transparent) 0 1.4rem, transparent 1.4rem 3.2rem) 0 0 / 3.2rem 100% repeat-x;
  }
  .site[data-look="drivingschool"] .ds-stop { display: flex; flex-direction: column; align-items: flex-start; height: calc(2 * var(--zone) + var(--road)); }
  .site[data-look="drivingschool"] .ds-stop-sign { max-width: 190%; white-space: nowrap; }
  .site[data-look="drivingschool"] .ds-stop::after { content: ''; flex: 1 0 0.6rem; width: 5px; margin-left: 1.3rem; background: var(--steel); }
  .site[data-look="drivingschool"] .ds-stop:nth-child(odd) { padding-bottom: calc(var(--zone) + var(--road)); }
  .site[data-look="drivingschool"] .ds-stop:nth-child(even) { flex-direction: column-reverse; padding-top: calc(var(--zone) + var(--road)); }
  /* The last stop keeps its sign inside the road's end. */
  .site[data-look="drivingschool"] .ds-stop:last-child:not(:first-child) { align-items: flex-end; }
  .site[data-look="drivingschool"] .ds-stop:last-child:not(:first-child)::after { margin-left: 0; margin-right: 1.3rem; }
}
@media (max-width: 55.99rem) {
  .site[data-look="drivingschool"] .ds-route ol { gap: 1rem; padding-left: 3.1rem; }
  .site[data-look="drivingschool"] .ds-route ol::before { content: ''; position: absolute; left: 0; top: -0.8rem; bottom: -0.8rem; width: 3.1rem; background: var(--asphalt-lift); border-inline: 3px solid color-mix(in srgb, var(--paint) 70%, transparent); }
  .site[data-look="drivingschool"] .ds-route ol::after { content: ''; position: absolute; left: calc(1.55rem - 1.5px); top: -0.8rem; bottom: -0.8rem; width: 3px; background: linear-gradient(color-mix(in srgb, var(--paint) 80%, transparent) 0 1.2rem, transparent 1.2rem 2.6rem) 0 0 / 100% 2.6rem repeat-y; }
  .site[data-look="drivingschool"] .ds-stop { grid-template-columns: 1.2rem minmax(0, 1fr); align-items: center; }
  .site[data-look="drivingschool"] .ds-stop::before { content: ''; height: 5px; background: var(--steel); }
}

/* The lespakketten: every row a lane, dashed lines between them. */
.site[data-look="drivingschool"] .ds-lessons { margin-top: clamp(3rem, 6vw, 4.5rem); color: var(--paint); font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="drivingschool"] .ds-lessons thead th {
  background: none; color: var(--asphalt-muted); font-family: var(--font-heading); font-weight: 800; font-size: 0.82rem; letter-spacing: 0.09em; text-transform: uppercase;
  padding: 0 0.9rem 0.8rem; border-bottom: clamp(4px, 0.4vw, 6px) solid var(--paint);
}
.site[data-look="drivingschool"] .ds-lessons thead th:first-child { padding-left: 0; }
.site[data-look="drivingschool"] .ds-lessons tr { border-bottom: 0; }
.site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider) {
  background: linear-gradient(90deg, color-mix(in srgb, var(--paint) 72%, transparent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + 2rem)) 0 100% / calc(var(--dash) + 2rem) 3px repeat-x;
  transition: background-color 0.2s ease;
}
.site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider):last-child { background: none; }
.site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider):hover { background-color: var(--asphalt-lift); }
.site[data-look="drivingschool"] .ds-lessons tbody th { padding: clamp(1.2rem, 2vw, 1.7rem) 0.9rem clamp(1.2rem, 2vw, 1.7rem) 0; vertical-align: middle; }
.site[data-look="drivingschool"] .ds-lessons .lesson-name { max-width: none; color: var(--paint); font-size: clamp(1.3rem, 1.05rem + 0.9vw, 1.95rem); line-height: 1.08; letter-spacing: -0.015em; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="drivingschool"] .ds-lessons .service-note { color: var(--asphalt-muted); font-size: 1.0625rem; margin-top: 0.35rem; max-width: 34rem; }
.site[data-look="drivingschool"] .ds-lessons td {
  padding: 1.2rem 0.9rem; vertical-align: middle; font-family: var(--font-figures); font-weight: 800; color: var(--paint);
  font-size: clamp(1.5rem, 1.05rem + 1.4vw, 2.5rem); letter-spacing: -0.02em; line-height: 1;
}
.site[data-look="drivingschool"] .ds-lessons td.price { font-weight: 800; padding-right: 0; }
.site[data-look="drivingschool"] .ds-lessons td.is-empty { color: color-mix(in srgb, var(--asphalt-muted) 60%, transparent); font-weight: 400; }
.site[data-look="drivingschool"] .ds-lessons .price-from, .site[data-look="drivingschool"] .ds-lessons .price-unit { font-size: 0.45em; letter-spacing: 0; font-weight: 800; color: var(--asphalt-muted); }
/* The exams: haaientanden across the road, then the red tab. */
.site[data-look="drivingschool"] .ds-lessons .lessons-divider th { padding: clamp(2.2rem, 4vw, 3rem) 0 0.6rem !important; border: 0; color: inherit; font-size: inherit; letter-spacing: 0; text-transform: none; }
.site[data-look="drivingschool"] .ds-teeth { --th: clamp(1.3rem, 2vw, 1.8rem); display: block; height: var(--th); background: var(--teeth) 0 0 / calc(var(--th) * 1.67) var(--th) space no-repeat; }
.site[data-look="drivingschool"] .ds-exam-tab {
  display: inline-block; margin-top: 1.3rem; padding: 0.4rem 0.8rem 0.35rem; background: var(--exam); color: #ffffff;
  font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.site[data-look="drivingschool"] .ds-ask { margin-top: clamp(2rem, 4vw, 3rem); color: var(--asphalt-muted); font-size: 1.1rem; }
.site[data-look="drivingschool"] .ds-ask a { color: var(--paint); font-family: var(--font-figures); font-weight: 800; white-space: nowrap; }
@media (max-width: 40rem) {
  /* Phones: each lespakket a lane of its own, the figures labelled. */
  .site[data-look="drivingschool"] .ds-lessons thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site[data-look="drivingschool"] .ds-lessons tbody tr:not(.lessons-divider) { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: baseline; column-gap: 1.1rem; padding-block: 1.15rem 1.25rem; }
  .site[data-look="drivingschool"] .ds-lessons tbody th { grid-column: 1 / -1; padding: 0 0 0.6rem; }
  .site[data-look="drivingschool"] .ds-lessons td { padding: 0; font-size: 1.45rem; }
  .site[data-look="drivingschool"] .ds-lessons td.is-empty { display: none; }
  .site[data-look="drivingschool"] .ds-lessons td.price { grid-column: -2; justify-self: end; font-size: 1.75rem; }
  .site[data-look="drivingschool"] .ds-lessons.has-lessons td.lesson-num:nth-child(2)::after { content: var(--u-lessons); font-size: 0.6em; letter-spacing: 0; color: var(--asphalt-muted); }
  .site[data-look="drivingschool"] .ds-lessons.has-lessons.has-minutes td.lesson-num:nth-child(3)::after,
  .site[data-look="drivingschool"] .ds-lessons.has-minutes:not(.has-lessons) td.lesson-num:nth-child(2)::after { content: var(--u-minutes); font-size: 0.6em; letter-spacing: 0; color: var(--asphalt-muted); }
  .site[data-look="drivingschool"] .ds-lessons .lessons-divider { display: block; }
  .site[data-look="drivingschool"] .ds-lessons .lessons-divider th { display: block; }
}

/* --- About: the lesauto from the inside ----------------------------------------- */
.site[data-look="drivingschool"] .ds-about { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.site[data-look="drivingschool"] .ds-about-photo { position: relative; aspect-ratio: 4 / 3; background: var(--road-ink); }
.site[data-look="drivingschool"] .ds-about-photo .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.site[data-look="drivingschool"] .ds-about-text { padding: clamp(3rem, 7vw, 7rem) var(--gap); max-width: 44rem; align-self: center; }
.site[data-look="drivingschool"] .ds-about-text > p:first-of-type { font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem); line-height: 1.4; font-family: var(--font-heading); font-weight: 800; letter-spacing: -0.01em; }
.site[data-look="drivingschool"] .ds-since { margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; display: flex; align-items: baseline; gap: 0.6rem; font-family: var(--font-figures); font-weight: 800; font-size: clamp(3.4rem, 2rem + 5vw, 7rem); line-height: 0.8; letter-spacing: -0.04em; }
.site[data-look="drivingschool"] .ds-since span { font-family: var(--font-heading); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text { margin-inline: auto; width: min(100% - 2 * var(--gap), var(--wrap)); max-width: none; padding-inline: 0; }
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .ds-about.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, calc(82 * var(--raam-vh)), 50rem); }
  .site[data-look="drivingschool"] .ds-about-photo { aspect-ratio: auto; min-height: 100%; }
  .site[data-look="drivingschool"] .ds-about-image_right .ds-about-photo { order: 2; }
  .site[data-look="drivingschool"] .ds-about.has-photo .ds-about-text { padding-inline: clamp(2.5rem, 6vw, 7rem); }
}

/* --- Gallery: in the car, a dark band, the photos edge to edge ------------------ */
.site[data-look="drivingschool"] .s-gallery { --text: var(--on-asphalt); --muted: var(--asphalt-muted); background: var(--road-ink); color: var(--on-asphalt); padding-bottom: 0; }
.site[data-look="drivingschool"] .s-gallery .gallery-items { width: 100vw; margin-left: calc(50% - 50vw); gap: 6px; margin-top: clamp(1.75rem, 3vw, 2.5rem); }
.site[data-look="drivingschool"] .s-gallery .gallery-items li { background: #000000; overflow: hidden; }
.site[data-look="drivingschool"] .s-gallery .gallery-items img { transition: transform 0.4s ease; }
.site[data-look="drivingschool"] .s-gallery .gallery-items li:hover img { transform: scale(1.03); }
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .gallery-grid .gallery-items li:first-child:nth-last-child(3) img { aspect-ratio: auto; height: 100%; min-height: clamp(26rem, calc(60 * var(--raam-vh)), 40rem); }
}

/* --- Reviews: onderborden on one post, beside the polder road -------------------- */
.site[data-look="drivingschool"] .ds-reviews { background: var(--concrete); padding-bottom: calc(var(--section-pad) + 2.6rem); overflow: clip; }
.site[data-look="drivingschool"] .ds-reviews-inner { display: grid; gap: 0 clamp(2rem, 6vw, 6rem); }
.site[data-look="drivingschool"] .ds-post { position: relative; display: grid; justify-items: center; padding-top: 1rem; }
/* The pole runs down into the verge. */
.site[data-look="drivingschool"] .ds-post::before {
  content: ''; position: absolute; top: 0; bottom: calc(-1 * var(--section-pad) - 2.6rem); left: 50%; width: 12px; margin-left: -6px;
  background: linear-gradient(90deg, #6f757c, #b7bcc2 45%, #7c8289);
}
.site[data-look="drivingschool"] .ds-plates { position: relative; display: grid; grid-template-columns: minmax(0, 46rem); gap: 1.4rem; margin: 0; width: 100%; justify-content: center; }
.site[data-look="drivingschool"] .ds-plates figure {
  margin: 0; border: 0; padding: clamp(1.4rem, 3vw, 2.1rem) clamp(1.4rem, 3vw, 2.3rem);
  background: #ffffff; color: var(--road-ink); border-radius: 12px;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 8px var(--road-ink), 0 2px 0 rgb(0 0 0 / 0.18);
}
.site[data-look="drivingschool"] .ds-plates blockquote { margin: 0 0 0.9rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.35rem, 1.05rem + 1vw, 2.05rem); line-height: 1.16; letter-spacing: -0.015em; }
.site[data-look="drivingschool"] .ds-plates blockquote p::before { content: '„'; }
.site[data-look="drivingschool"] .ds-plates blockquote p::after { content: '”'; }
.site[data-look="drivingschool"] .ds-plates figcaption { color: #4f545a; font-size: 1rem; font-weight: 700; }
.site[data-look="drivingschool"] .ds-reviews-road { display: none; }
.site[data-look="drivingschool"] .ds-verge {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2.6rem;
  background: repeating-linear-gradient(100deg, var(--verge) 0 7px, var(--verge-dark) 7px 9px);
  border-top: 5px solid #c9c8c0;
}
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .ds-reviews-inner { grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); }
  .site[data-look="drivingschool"] .ds-reviews-inner > :is(h1, h2) { grid-column: 1 / -1; }
  .site[data-look="drivingschool"] .ds-reviews-road { display: block; grid-column: 2; grid-row: 2; position: relative; margin-bottom: calc(-1 * var(--section-pad) - 2.6rem); margin-right: calc(-1 * max(var(--gap), (100vw - var(--wrap)) / 2)); }
  .site[data-look="drivingschool"] .ds-reviews-road img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 75%; }
}

/* --- Werkgebied: komborden -------------------------------------------------------- */
.site[data-look="drivingschool"] .ds-komborden {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.5rem), 1fr)); gap: 0 clamp(0.8rem, 2vw, 1.75rem); margin-top: var(--space);
}
@media (min-width: 40rem) { .site[data-look="drivingschool"] .ds-komborden { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.site[data-look="drivingschool"] .ds-komborden li {
  position: relative; display: grid; place-items: center; min-height: clamp(5rem, 9vw, 8rem); padding: 1rem 1.1rem 0.95rem; margin-bottom: clamp(2.8rem, 4.5vw, 4rem); text-align: center;
  background: var(--kombord); color: var(--on-kombord); border-radius: 10px;
  box-shadow: inset 0 0 0 5px var(--kombord), inset 0 0 0 8px var(--on-kombord);
  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1.6vw, 2.75rem); line-height: 1.02; letter-spacing: -0.015em;
  overflow-wrap: anywhere; hyphens: auto; transition: transform 0.18s ease;
}
/* Two posts under each sign. */
.site[data-look="drivingschool"] .ds-komborden li::after {
  content: ''; position: absolute; top: 100%; left: 22%; right: 22%; height: clamp(2.8rem, 4.5vw, 4rem);
  background: linear-gradient(90deg, var(--steel) 0 7px, transparent 7px calc(100% - 7px), var(--steel) calc(100% - 7px));
}
.site[data-look="drivingschool"] .ds-komborden li:hover { transform: translateY(-4px); }
.site[data-look="drivingschool"] .ds-area { padding-bottom: 0; }
/* The verge and the kerb the posts stand in. */
.site[data-look="drivingschool"] .ds-area::after { content: ''; display: block; height: 1.2rem; background: repeating-linear-gradient(100deg, var(--verge) 0 7px, var(--verge-dark) 7px 9px); border-bottom: 6px solid #c9c8c0; }
.site[data-look="drivingschool"] .ds-area .area-body { font-size: var(--fs-lead); max-width: 36rem; }

/* --- Contact: from the haaientanden on ------------------------------------------- */
/* Haaientanden and the stop line: here you stop and get in touch. */
.site[data-look="drivingschool"] .ds-contact { padding-top: clamp(3rem, 6vw, 5rem); }
.site[data-look="drivingschool"] .ds-contact-teeth { --th: clamp(2rem, 3.4vw, 3rem); display: block; height: var(--th); background: var(--teeth) 0 0 / calc(var(--th) * 1.67) var(--th) space no-repeat; }
.site[data-look="drivingschool"] .ds-contact .s-contact { padding-top: clamp(1rem, 3vw, 2.5rem); }
.site[data-look="drivingschool"] .ds-contact .s-contact :is(h1, h2) { color: var(--paint); }
.site[data-look="drivingschool"] .ds-contact .contact-list { border-top: clamp(4px, 0.4vw, 6px) solid var(--paint); }
.site[data-look="drivingschool"] .ds-contact .contact-list li { border-bottom: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--paint) 60%, transparent) 0 var(--dash), transparent var(--dash) calc(var(--dash) + 2rem)) 0 100% / calc(var(--dash) + 2rem) 3px repeat-x; }
.site[data-look="drivingschool"] .ds-contact .contact-link { padding-block: 1.1rem 1.2rem; }
.site[data-look="drivingschool"] .ds-contact .contact-label { color: var(--asphalt-muted); font-family: var(--font-heading); font-weight: 800; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site[data-look="drivingschool"] .ds-contact .contact-value { font-weight: 800; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.4rem); color: var(--paint); }
.site[data-look="drivingschool"] .ds-contact .contact-list li:first-child .contact-value { font-size: clamp(2.3rem, 1.2rem + 4.2vw, 5rem); letter-spacing: -0.03em; }
.site[data-look="drivingschool"] .ds-contact .contact-also { color: var(--paint); }

/* --- Footer: the name painted on the road ----------------------------------------- */
.site[data-look="drivingschool"] .ds-roadname { position: relative; overflow: hidden; padding-block: clamp(4rem, 8vw, 6.5rem) 0; }
.site[data-look="drivingschool"] .ds-roadname .ds-edge { position: absolute; left: 0; right: 0; top: clamp(1.2rem, 2.5vw, 2rem); height: clamp(6px, 0.5vw, 9px); background: linear-gradient(90deg, var(--paint) 0 var(--dash), transparent var(--dash) calc(var(--dash) + var(--gap-dash))) 0 0 / calc(var(--dash) + var(--gap-dash)) 100% repeat-x; }
.site[data-look="drivingschool"] .ds-roadname p {
  margin-block: 0; color: color-mix(in srgb, var(--paint) 92%, transparent); white-space: nowrap;
  font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; line-height: 0.8;
  /* One line, as wide as the road allows: the size follows the name's length. */
  --size: min(11rem, calc((min(100vw, var(--wrap)) - 2 * var(--gap)) / (var(--chars) * 0.66)));
  font-size: var(--size);
  /* Road lettering is drawn long, to be read at speed and at an angle. */
  transform: scaleY(1.8); transform-origin: 50% 0; margin-bottom: calc(var(--size) * 0.8 * 0.8 + clamp(1.5rem, 3vw, 2.5rem));
}
.site[data-look="drivingschool"] .site-footer { font-size: 1.0625rem; }

/* --- Phones: the quick bar on asphalt ---------------------------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="drivingschool"] .quickbar { --on-deep: var(--on-asphalt); background: var(--asphalt); border-top: 4px solid var(--paint); }
  .site[data-look="drivingschool"] .quick { font-family: var(--font-heading); font-weight: 800; }
  /* The road takes what the words leave, so the button clears the quick bar. */
  .site[data-look="drivingschool"] .ds-hero { min-height: calc(calc(100 * var(--raam-vh)) - 3.75rem - 3.6rem - var(--vb-bar, 0px)); grid-template-rows: minmax(clamp(10rem, calc(calc(30 * var(--raam-vh)) - var(--vb-bar, 0px)), 22rem), 1fr) auto; }
}

/* --- Motion: signs come up as you drive past -------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="drivingschool"] :is(.ds-stop, .ds-komborden li, .ds-plates li) {
      animation: ds-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 70%;
    }
    /* translate, not transform: the hover lift stays free. */
    @keyframes ds-rise { from { translate: 0 1.25rem; } to { translate: 0 0; } }
  }
}

/* --- FAQ: each question behind a blue sign that turns when it opens ---------------- */
.site[data-look="drivingschool"] .s-faq .wrap { display: grid; gap: 0 clamp(2rem, 6vw, 6rem); }
@media (min-width: 52rem) {
  .site[data-look="drivingschool"] .s-faq .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .site[data-look="drivingschool"] .s-faq .faq-items { margin-top: 0.4rem; }
}
.site[data-look="drivingschool"] .faq-items { max-width: 48rem; }
.site[data-look="drivingschool"] .faq-items details { border-bottom: 0; background: linear-gradient(90deg, var(--text) 0 1.6rem, transparent 1.6rem 2.8rem) 0 100% / 2.8rem 2px repeat-x; }
.site[data-look="drivingschool"] .faq-items details:first-child { border-top: 5px solid var(--text); }
.site[data-look="drivingschool"] .faq-items summary { min-height: 4.4rem; padding-block: 0.9rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.2; letter-spacing: -0.01em; }
/* The round blue sign with a white arrow (verplichte rijrichting). */
.site[data-look="drivingschool"] .faq-items summary::after {
  content: ''; width: 2.4rem; height: 2.4rem; border-radius: 50%; flex: none;
  /* The white arrow: a shaft and a head, drawn. */
  background:
    conic-gradient(from 240deg at 100% 50%, #ffffff 0 60deg, transparent 0) 76% 50% / 30% 44% no-repeat,
    linear-gradient(#ffffff, #ffffff) 30% 50% / 36% 14% no-repeat,
    var(--kombord);
  box-shadow: inset 0 0 0 2px var(--kombord), inset 0 0 0 4px #ffffff; transition: transform 0.2s ease;
}
.site[data-look="drivingschool"] .faq-items details[open] summary::after { content: ''; transform: rotate(90deg); }
.site[data-look="drivingschool"] .faq-items summary:hover::after { transform: translateX(3px); }
.site[data-look="drivingschool"] .faq-items details[open] summary:hover::after { transform: rotate(90deg); }
.site[data-look="drivingschool"] .faq-items details p { color: var(--text); font-size: 1.0625rem; max-width: 40rem; margin-bottom: 1.5rem; }
.site[data-look="drivingschool"] .faq-items dt { font-family: var(--font-heading); font-weight: 800; font-size: 1.3rem; }
.site[data-look="drivingschool"] .faq-items dd { color: var(--text); }

/* A table with names only (no counts, no prices) needs no column heads. */
.site[data-look="drivingschool"] .ds-lessons.is-plain thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.site[data-look="drivingschool"] .ds-lessons.is-plain tbody:first-of-type { border-top: clamp(4px, 0.4vw, 6px) solid var(--paint); }

/* No hero photo: the polder drawn flat, sky over a strip of meadow. */
.site[data-look="drivingschool"] .ds-hero:not(.has-photo)::before {
  content: ''; grid-row: 1; grid-column: 1;
  background: linear-gradient(to bottom, #dce7ec 0, #eef2ef 72%, #7d9a52 72%, #6b8a43 88%, #5a7a37 100%);
}

/* --- Booking: each bookable lesson a blue wegwijzer --------------------------------- */
.site[data-look="drivingschool"] .s-booking .booking-services { border-top: 0; display: grid; gap: 0.75rem; margin-top: var(--space); }
.site[data-look="drivingschool"] .s-booking .booking-services li { border-bottom: 0; }
.site[data-look="drivingschool"] .s-booking .booking-services a {
  background: var(--kombord); color: var(--on-kombord); border-radius: 8px; padding: 1rem 1.3rem 1rem 1.4rem; min-height: 4.5rem;
  box-shadow: inset 0 0 0 4px var(--kombord), inset 0 0 0 6px var(--on-kombord); transition: transform 0.18s ease;
}
.site[data-look="drivingschool"] .s-booking .booking-services a:hover { transform: translateX(6px); }
.site[data-look="drivingschool"] .s-booking .booking-services a:hover .booking-name { text-decoration: none; }
.site[data-look="drivingschool"] .s-booking .booking-services a { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 30rem) {
  .site[data-look="drivingschool"] .s-booking .booking-services a { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="drivingschool"] .s-booking .booking-go { grid-column: 1; grid-row: auto; margin-top: 0.4rem; }
}
.site[data-look="drivingschool"] .s-booking .booking-name { overflow-wrap: anywhere; hyphens: auto;  font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.15; }
.site[data-look="drivingschool"] .s-booking .booking-meta { color: var(--on-kombord); opacity: 0.9; font-size: 1rem; }
.site[data-look="drivingschool"] .s-booking .booking-go { color: var(--on-kombord); text-decoration: none; font-family: var(--font-heading); font-weight: 800; font-size: 1.1rem; }
.site[data-look="drivingschool"] .s-booking .booking-services a:focus-visible { outline: 3px solid var(--text); outline-offset: 3px; }

/* --- Request form: the proefles form on a white card with a strip of road on top ---- */
.site[data-look="drivingschool"] .s-request { background: var(--concrete); }
.site[data-look="drivingschool"] .s-request .lead { color: var(--text); }
.site[data-look="drivingschool"] :is(.request-form, .contact-form) {
  --text: var(--road-ink); --bg: #ffffff; --muted: #4f545a;
  background: #ffffff; color: var(--road-ink); border-top: 0; padding: 0 clamp(1.25rem, 3vw, 2.25rem) clamp(1.5rem, 3vw, 2.25rem);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.08);
}
.site[data-look="drivingschool"] :is(.request-form, .contact-form)::before {
  content: ''; display: block; height: 1.6rem; margin: 0 calc(-1 * clamp(1.25rem, 3vw, 2.25rem)) 1.5rem;
  background: linear-gradient(90deg, var(--paint) 0 1.6rem, transparent 1.6rem 3.4rem) 0 50% / 3.4rem 3px repeat-x, var(--asphalt);
}
.site[data-look="drivingschool"] :is(.request-form, .contact-form) :is(label, legend) { font-family: var(--font-heading); font-weight: 800; }
.site[data-look="drivingschool"] form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 2px solid var(--road-ink); border-radius: 3px; background: #ffffff; color: var(--road-ink); }
.site[data-look="drivingschool"] form :is(input, textarea, select):focus-visible { outline: 3px solid var(--kombord); outline-offset: 1px; border-color: var(--kombord); }
.site[data-look="drivingschool"] :is(.request-form, .contact-form) .btn { font-size: 1.15rem; min-height: 3.4rem; }

/* --- Hours: an onderbord (white plate, black rim), like the times under a sign ---- */
.site[data-look="drivingschool"] .s-hours .hours-card {
  background: #ffffff; color: var(--road-ink); border-radius: 12px; padding: 1.2rem 1.6rem 1.3rem;
  box-shadow: inset 0 0 0 5px #ffffff, inset 0 0 0 8px var(--road-ink);
}
.site[data-look="drivingschool"] .s-hours .hours-table :is(th, td) { border-bottom: 0; padding-block: 0.35rem; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; }
.site[data-look="drivingschool"] .s-hours .hours-table .is-closed :is(th, td) { color: #5c6168; font-weight: 400; }
.site[data-look="drivingschool"] .s-hours .hours-table th::after { background: var(--kombord); color: var(--on-kombord); }
.site[data-look="drivingschool"] .s-hours .hours-table th::before { background: var(--kombord); }

/* --- Trust strip: the customer's own claims, painted along the kerb ---------------- */
.site[data-look="drivingschool"] .s-trust { background: var(--concrete); border-block: 0; padding-block: 1.3rem; }
.site[data-look="drivingschool"] .trust-list { font-family: var(--font-heading); font-weight: 800; font-size: 1.15rem; }
.site[data-look="drivingschool"] .trust-list li:not(:last-child)::after { content: ''; display: inline-block; width: 1.6rem; height: 4px; margin: 0 1rem 0.3rem; background: currentColor; vertical-align: middle; }

/* --- CTA band: a large wegwijzer ---------------------------------------------------- */
.site[data-look="drivingschool"] .s-cta .cta-inner {
  background: var(--kombord); color: var(--on-kombord); border-radius: 12px; padding: clamp(1.75rem, 4vw, 3rem);
  box-shadow: inset 0 0 0 6px var(--kombord), inset 0 0 0 9px var(--on-kombord); align-items: center;
}
.site[data-look="drivingschool"] .s-cta .cta-inner :is(h1, h2) { color: var(--on-kombord); font-size: clamp(1.9rem, 1.2rem + 2.4vw, 3.4rem); }
.site[data-look="drivingschool"] .s-cta .cta-inner p { color: var(--on-kombord); }
.site[data-look="drivingschool"] .s-cta .cta-inner .btn { background: #ffffff; color: var(--road-ink); border-color: #ffffff; }

/* --- Subpages: the full-bleed bands start right under the header. ---------------- */
.site[data-look="drivingschool"] main > :is(.ds-services, .ds-about):first-child { padding-top: 0; }
@media (min-width: 52rem) {
  /* About without a photo: the heading on the left, the story beside it. */
  .site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 6vw, 6rem); align-items: start; }
  .site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text > :is(h1, h2) { grid-row: 1 / span 4; }
  .site[data-look="drivingschool"] .ds-about:not(.has-photo) .ds-about-text > :not(h1, h2) { grid-column: 2; }
}

/* ---- looks/garage.css ---- */
/* The garage look: everything here is scoped to .site[data-look="garage"]. Appended after base.css (bun run --filter @platform/sections css).
   The page walks through one independent workshop: the street front with the
   name on its kenteken plate, the brug, the werkorder clipped to the
   pegboard, the glass door in the brick front, the two-tone painted wall,
   the concrete floor with its painted line, the key cabinet, the red tool
   cabinet, the sectional door. All materials drawn in CSS/SVG. */

.site[data-look="garage"] {
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.06rem + 0.4vw, 1.4rem);
  --g-ink: #17181a;
  --g-steel: #262b2f;          /* the front's painted steel fascia, RAL 7016-ish */
  --g-asphalt: #1a1c1f;
  --g-on-dark: #f3f3f1;
  --g-on-dark-muted: #b9bec3;
  --g-paper: #fbfbf7;          /* werkorder paper */
  --g-rule: #2b3a52;           /* the form's printed rules */
  --g-peg: #c49f6d;            /* hardboard pegboard */
  --g-peg-hole: #4a3622;
  --g-board: #5d3d20;          /* clipboard */
  --g-concrete: #a6a49e;
  --g-line: #f2c230;           /* painted floor line */
  --g-wall-low: #c9ccc8;       /* lower wall paint, RAL 7035 */
  --g-wall-stripe: #2f3b43;
  --g-cab: #a5231b;            /* tool cabinet red */
  --g-door: #e2e3df;           /* sectional door panels */
  --g-glass: #14171a;
  --g-alu: #a9aeb1;
  --g-pen: #1d3f8f;            /* ballpoint blue */
  font-size: var(--fs-base);
}
@media (max-width: 40rem) { .site[data-look="garage"] { --fs-base: 1rem; } }
.site[data-look="garage"] main > .s + .s { border-top: 0; }
.site[data-look="garage"] :is(h1, h2) { line-height: 0.92; letter-spacing: 0; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="garage"] .g-long { --g-k: 0.78; }
.site[data-look="garage"] .g-xlong { --g-k: 0.6; }

/* --- Header: the painted steel fascia over the front, the name on its plate. */
.site[data-look="garage"] .site-header { --text: var(--g-on-dark); background: var(--g-steel); color: var(--g-on-dark); border-bottom: 4px solid #0d0e10; }
.site[data-look="garage"] .header-inner { min-height: 4.75rem; }
.site[data-look="garage"] .brand { font-size: clamp(1.15rem, 0.95rem + 0.9vw, 1.7rem); letter-spacing: 0.05em; }
.site[data-look="garage"] .plate { box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px #111, 0 2px 0 rgb(0 0 0 / 0.5); }
.site[data-look="garage"] .site-header nav a { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.1rem; }
.site[data-look="garage"] .site-header nav a[aria-current='page'] { text-decoration-color: var(--plate); text-decoration-thickness: 3px; }
.site[data-look="garage"] .btn { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem; border-radius: 3px; }
.site[data-look="garage"] .site-header .btn { font-size: 1.05rem; }
.site[data-look="garage"] .btn-primary { box-shadow: 0 3px 0 rgb(0 0 0 / 0.45); transition: transform 0.12s, box-shadow 0.12s; }
.site[data-look="garage"] .btn-primary:hover { transform: translateY(1px); box-shadow: 0 2px 0 rgb(0 0 0 / 0.45); }
.site[data-look="garage"] .btn-primary:active { transform: translateY(3px); box-shadow: none; }

/* --- Hero: the brug. The photo bleeds right; the headline runs across it on
   dark strips, like the lettering on the fascia. ------------------------- */
.site[data-look="garage"] .g-hero {
  --bg: var(--g-asphalt); --text: var(--g-on-dark); --muted: var(--g-on-dark-muted);
  padding: 0; display: grid; background: var(--g-asphalt); color: var(--g-on-dark);
  min-height: calc(calc(100 * var(--raam-vh)) - 4.75rem);
}
.site[data-look="garage"] .g-hero-photo { position: relative; min-height: 0; background: #0b0c0d; }
.site[data-look="garage"] .g-hero-photo .hero-img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; background: #0b0c0d; }
.site[data-look="garage"] .g-hero-apk { position: relative; z-index: 1; padding: 1.5rem var(--gap) 1.75rem; background: var(--g-asphalt); }
.site[data-look="garage"] .g-hero-panel {
  position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; gap: clamp(2rem, calc(5 * var(--raam-vh)), 3.5rem);
  padding: clamp(2rem, calc(6 * var(--raam-vh)), 4.5rem) var(--gap) clamp(2rem, calc(5 * var(--raam-vh)), 3.5rem);
}
.site[data-look="garage"] .g-hero h1, .site[data-look="garage"] .g-hero h2 {
  font-size: calc(clamp(3.4rem, 0.6rem + 7.6vw, 9rem) * var(--g-k, 1)); line-height: 1.01; max-width: none; margin: 0 0 0.35em; color: var(--g-on-dark);
  overflow-wrap: break-word; hyphens: manual; text-wrap: balance;
}
.site[data-look="garage"] .g-hero .lead { color: var(--g-on-dark-muted); max-width: 30rem; font-size: var(--fs-lead); }
.site[data-look="garage"] .g-hero .actions { margin-top: 1.75rem; }
.site[data-look="garage"] .g-hero .cta-alt { color: var(--g-on-dark); text-decoration-color: var(--plate); text-decoration-thickness: 2px; }
.site[data-look="garage"] .g-hero .btn { min-height: 56px; font-size: 1.3rem; padding-inline: 1.5rem; }
@media (max-width: 51.99rem) {
  /* Phones: the photo a band on top, the text on the dark front below; the
     whole first screen above the quick bar. */
  .site[data-look="garage"] .g-hero { min-height: calc(calc(100 * var(--raam-vh)) - 3.75rem - 52px); grid-template-rows: minmax(9rem, calc(28 * var(--raam-vh))) 1fr; }
  .site[data-look="garage"] .g-hero:not(.g-has-photo) { grid-template-rows: 1fr; }
  .site[data-look="garage"] .g-hero-panel { justify-content: flex-start; padding-top: 1.75rem; }
}
@media (min-width: 52rem) {
  .site[data-look="garage"] .g-hero.g-has-photo { grid-template-columns: minmax(0, 47fr) minmax(0, 53fr); grid-template-rows: minmax(0, 1fr) auto; }
  .site[data-look="garage"] .g-hero-photo { grid-column: 2; grid-row: 1 / span 2; }
  .site[data-look="garage"] .g-hero-panel { grid-column: 1; grid-row: 1 / span 2; padding-left: max(var(--gap), (100vw - var(--wrap)) / 2); padding-right: clamp(2rem, 4vw, 4rem); }
  /* The APK check across the foot of the photo, on the dark of the front. */
  .site[data-look="garage"] .g-has-photo .g-hero-apk { grid-column: 2; grid-row: 2; padding: 1.1rem max(var(--gap), (100vw - var(--wrap)) / 2) 1.75rem clamp(1.5rem, 3vw, 2.5rem); border-top: 4px solid var(--plate); }
  .site[data-look="garage"] .g-hero:not(.g-has-photo) .g-hero-apk { padding-left: max(var(--gap), (100vw - var(--wrap)) / 2); }
  /* The headline runs on into the photo, each line on its own dark strip. */
  .site[data-look="garage"] .g-hero.g-has-photo :is(h1, h2) { margin-right: -90%; text-wrap: wrap; }
  .site[data-look="garage"] .g-hero.g-has-photo :is(h1, h2) > span { background: var(--g-asphalt); box-decoration-break: clone; -webkit-box-decoration-break: clone; padding: 0.04em 0.16em 0 0; }
  .site[data-look="garage"] .g-hero:not(.g-has-photo) .g-hero-panel { padding-right: max(var(--gap), (100vw - var(--wrap)) / 2); }
  .site[data-look="garage"] .g-hero:not(.g-has-photo) :is(h1, h2) { max-width: 20ch; }
}

/* The APK check: the kenteken typed onto a yellow plate. */
.site[data-look="garage"] .g-apk { max-width: 40rem; }
.site[data-look="garage"] .g-apk-title { margin: 0 0 0.75rem; font-family: var(--font-heading); text-transform: uppercase; font-size: 1.45rem; letter-spacing: 0.03em; line-height: 1.1; }
.site[data-look="garage"] .g-apk-row { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: stretch; }
.site[data-look="garage"] .g-apk-plate {
  flex: 1 1 11rem; display: flex; align-items: stretch; min-width: 0; max-width: 20rem;
  background: var(--plate); color: var(--on-plate); border: 2px solid #111; border-radius: 6px; overflow: hidden;
  box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px #111;
}
.site[data-look="garage"] .g-apk-plate .plate-eu { font-size: 0.85rem; min-width: 2.1rem; padding-bottom: 0.45rem; }
.site[data-look="garage"] .g-apk-plate { text-decoration: none; }
.site[data-look="garage"] .g-apk-plate-text {
  flex: 1; min-width: 0; min-height: 58px; display: flex; align-items: center; padding: 0.2rem 0.7rem 0; color: var(--on-plate);
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.2rem, 1rem + 1vw, 1.7rem); letter-spacing: 0.06em; text-transform: uppercase;
}
.site[data-look="garage"] .g-apk-plate:hover .g-apk-plate-text { text-decoration: underline; text-underline-offset: 0.2em; }
.site[data-look="garage"] .g-apk-plate:focus-visible { outline: 3px solid var(--g-on-dark); outline-offset: 3px; }
.site[data-look="garage"] .g-apk-note { margin: 0.6rem 0 0; color: var(--g-on-dark-muted); font-size: 0.95rem; }
@media (min-width: 52rem) {
  /* Wide: the question beside the plate, one row along the foot of the photo. */
  .site[data-look="garage"] .g-apk { max-width: 36rem; }
  .site[data-look="garage"] .g-apk-title { font-size: 1.25rem; margin-bottom: 0.6rem; }
  .site[data-look="garage"] .g-apk-row { flex-wrap: nowrap; }
  .site[data-look="garage"] .g-apk-note { display: none; }
}

/* --- Dymo labels (the FAQ drawers); the trust strip's fallback line on the
   aluminium checker plate (a page without the werkorder). ------------------ */
.site[data-look="garage"] .dymo {
  display: inline; padding: 0.28em 0.7em 0.22em; background: #121212; color: #fff; border-radius: 2px;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; line-height: 2;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
  text-shadow: 0 -1px 0 rgb(0 0 0 / 0.9), 0 1px 0 rgb(255 255 255 / 0.18);
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.14), 0 1px 2px rgb(0 0 0 / 0.45);
}
.site[data-look="garage"] .g-mat { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
.site[data-look="garage"] .g-tread { padding-block: 1.1rem; background: #a7acaf; border-block: 2px solid #6d7377; }
.site[data-look="garage"] .g-claims { position: relative; z-index: 1; margin-block: 0; font-weight: 700; font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); line-height: 1.35; color: #111; }

/* --- Services: the werkorder, clipped to a board on the pegboard. -------- */
.site[data-look="garage"] .g-peg {
  overflow: clip;
  padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(4rem, 8vw, 6.5rem);
  background-color: var(--g-peg);
  background-image: radial-gradient(circle, var(--g-peg-hole) 0 2.4px, rgb(74 54 34 / 0.35) 2.9px, transparent 3.4px);
  background-size: 25px 25px; background-position: 12px 12px;
  box-shadow: inset 0 14px 18px -14px rgb(0 0 0 / 0.45);
}
.site[data-look="garage"] .g-peg { position: relative; }
.site[data-look="garage"] .g-shadow { display: none; }
@media (min-width: 78rem) {
  .site[data-look="garage"] .g-shadow { display: block; position: absolute; inset: clamp(4.5rem, 9vw, 7.5rem) 0 auto; height: 0; }
  .site[data-look="garage"] .g-shadow svg { position: absolute; top: 2rem; width: clamp(7rem, 9vw, 9.5rem); height: auto; fill: #2a1f14; opacity: 0.82; }
  .site[data-look="garage"] .g-shadow-left { left: max(1.5rem, (100vw - 62rem) / 4 - 4.75rem); }
  .site[data-look="garage"] .g-shadow-right { right: max(1.5rem, (100vw - 62rem) / 4 - 4.75rem); top: 6rem !important; }
}
.site[data-look="garage"] .g-clipboard {
  position: relative; max-width: 62rem; margin-inline: auto;
  padding: 3.1rem clamp(0.5rem, 1.6vw, 1rem) clamp(0.5rem, 1.6vw, 1rem);
  background: var(--g-board); border-radius: 12px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35), inset 0 2px 0 rgb(255 255 255 / 0.12), 0 22px 30px -20px rgb(0 0 0 / 0.75);
}
/* The pegboard hook it hangs on, and the clip. */
.site[data-look="garage"] .g-hook { position: absolute; left: 50%; top: -2.6rem; width: 5px; height: 3.4rem; margin-left: -2.5px; border-radius: 3px; background: linear-gradient(90deg, #6f7478, #c7cbce, #6f7478); }
.site[data-look="garage"] .g-clip {
  position: absolute; left: 50%; top: -0.9rem; z-index: 2; width: clamp(8rem, 22vw, 11rem); height: 3.6rem; transform: translateX(-50%);
  border-radius: 8px 8px 22px 22px; background: linear-gradient(#f0f2f3, #b8bec2 55%, #8d9498);
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.25), 0 3px 4px rgb(0 0 0 / 0.45);
}
.site[data-look="garage"] .g-clip::after { content: ''; position: absolute; left: 50%; top: 0.7rem; width: 2.2rem; height: 1.1rem; margin-left: -1.1rem; border-radius: 1rem 1rem 0.3rem 0.3rem; background: var(--g-board); box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.6); }
.site[data-look="garage"] .g-order {
  --bg: var(--g-paper); --text: var(--g-ink); --muted: #45474b; --border: color-mix(in srgb, var(--g-rule) 32%, transparent);
  position: relative; z-index: 1; background: var(--g-paper); color: var(--g-ink);
  border: 1.5px solid var(--g-rule);
  /* The carbon copies under it: yellow, then pink. */
  box-shadow: 0 5px 0 -1px #f2e39a, 0 5px 0 0 rgb(0 0 0 / 0.12), 0 10px 0 -2px #efc2c9, 0 10px 0 -1px rgb(0 0 0 / 0.12);
}
.site[data-look="garage"] .g-order .sheet-head { max-width: none; display: grid; }
.site[data-look="garage"] .g-order-title {
  margin: 0; padding: 0.55rem clamp(1rem, 3vw, 1.75rem); border-bottom: 1.5px solid var(--g-rule);
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.3em; font-size: 1rem; color: var(--g-rule);
}
.site[data-look="garage"] .g-order .sheet-head > :is(h1, h2) { margin: 0; padding: clamp(1rem, 3vw, 1.6rem) clamp(1rem, 3vw, 1.75rem) 0.2em; font-size: calc(clamp(3rem, 1.6rem + 5vw, 6.5rem) * var(--g-k, 1)); }
.site[data-look="garage"] .g-order .sheet-head > .lead { margin: 0; padding: 0 clamp(1rem, 3vw, 1.75rem) 1.2rem; max-width: 46rem; color: #45474b; }
.site[data-look="garage"] .g-order .card-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); margin: 0; border-top: 1.5px solid var(--g-rule); }
.site[data-look="garage"] .g-order .card-fields > div { padding: 0.45rem clamp(1rem, 3vw, 1.75rem) 0.6rem; border-right: 1px solid var(--g-rule); border-bottom: 1px solid var(--g-rule); min-width: 0; }
.site[data-look="garage"] .g-order .card-fields > div:last-child { border-right: 0; }
.site[data-look="garage"] .g-order .card-fields dt, .site[data-look="garage"] .g-remarks-label, .site[data-look="garage"] .g-order .sheet-cols {
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.82rem; color: var(--g-rule);
}
.site[data-look="garage"] .g-order .card-fields dd { margin: 0.1rem 0 0; font-weight: 600; font-size: 1.1rem; overflow-wrap: anywhere; }
/* Opmerkingen: the customer's highlights, written on the order. */
.site[data-look="garage"] .g-remarks { margin: 0; max-width: none; padding: 0.55rem clamp(1rem, 3vw, 1.75rem) 0.7rem; border-bottom: 1.5px solid var(--g-rule); font-weight: 600; font-size: 1.1rem; line-height: 1.4; }
.site[data-look="garage"] .g-remarks-label { display: block; margin-bottom: 0.1rem; }
.site[data-look="garage"] .g-order .sheet-cols { display: grid; grid-template-columns: minmax(0, 1fr) clamp(7rem, 20vw, 11rem); margin: 0; border-bottom: 1.5px solid var(--g-rule); background: color-mix(in srgb, var(--g-rule) 7%, var(--g-paper)); }
.site[data-look="garage"] .g-order:not(.has-prices) .sheet-cols { grid-template-columns: minmax(0, 1fr); }
.site[data-look="garage"] .g-order .sheet-cols span { padding: 0.45rem clamp(1rem, 3vw, 1.75rem); }
.site[data-look="garage"] .g-order .sheet-cols span:first-child { padding-left: calc(clamp(1rem, 3vw, 1.75rem) + 2.2rem); }
.site[data-look="garage"] .g-order .sheet-cols span + span { border-left: 1.5px solid var(--g-rule); text-align: right; }
.site[data-look="garage"] .g-order .service-list { margin: 0; border: 0; }
.site[data-look="garage"] .g-order .service {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) clamp(7rem, 20vw, 11rem); padding: 0;
  border-bottom: 1px solid var(--border); padding-left: clamp(1rem, 3vw, 1.75rem);
}
.site[data-look="garage"] .g-order:not(.has-prices) .service { grid-template-columns: 2.2rem minmax(0, 1fr); }
.site[data-look="garage"] .g-order .service:last-child { border-bottom: 0; }
.site[data-look="garage"] .g-order .service-body { padding: 0.95rem 1.25rem 1rem 0; min-width: 0; }
.site[data-look="garage"] .g-order .service :is(h2, h3) { font-family: var(--font-body); font-weight: 600; text-transform: none; letter-spacing: 0; font-size: clamp(1.15rem, 1.05rem + 0.35vw, 1.35rem); line-height: 1.25; }
.site[data-look="garage"] .g-order .service-note { margin: 0.25rem 0 0; color: #45474b; font-size: 1.0625rem; max-width: 40rem; }
.site[data-look="garage"] .g-order .service .price {
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; align-content: start; gap: 0 0.35rem;
  padding: 0.85rem clamp(1rem, 3vw, 1.75rem) 0.8rem 0.75rem; border-left: 1.5px solid var(--g-rule); text-align: right;
  font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.45rem, 1.2rem + 0.8vw, 1.9rem); line-height: 1.1; white-space: normal;
}
.site[data-look="garage"] .g-order .price-from, .site[data-look="garage"] .g-order .price-unit { font-family: var(--font-body); font-weight: 600; font-size: 0.85rem; text-transform: lowercase; color: #45474b; }
/* The tick box the monteur ticks off: a ballpoint tick on hover. */
.site[data-look="garage"] .g-box { position: relative; align-self: start; width: 1.15rem; height: 1.15rem; margin-top: 1.25rem; border: 1.5px solid var(--g-rule); }
.site[data-look="garage"] .g-box::after {
  content: ''; position: absolute; left: 0.28rem; top: -0.3rem; width: 0.5rem; height: 1.05rem;
  border: solid var(--g-pen); border-width: 0 2.5px 2.5px 0; transform: rotate(40deg) scale(0); transform-origin: 50% 80%; opacity: 0;
}
.site[data-look="garage"] .g-order .service:hover .g-box::after { transform: rotate(40deg) scale(1); opacity: 1; }
.site[data-look="garage"] .g-order .sheet-foot {
  margin: 0; padding: 1rem clamp(1rem, 3vw, 1.75rem); border-top: 1.5px solid var(--g-rule); color: var(--g-ink);
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem;
}
.site[data-look="garage"] .g-order .sheet-foot a { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: 0.03em; text-decoration-thickness: 2px; text-decoration-color: var(--plate); text-underline-offset: 0.15em; white-space: nowrap; }
@media (max-width: 40rem) {
  .site[data-look="garage"] .g-order .service { grid-template-columns: 1.7rem minmax(0, 1fr) auto; padding-left: 0.85rem; }
  .site[data-look="garage"] .g-order .sheet-cols { grid-template-columns: minmax(0, 1fr) auto; }
  .site[data-look="garage"] .g-order .sheet-cols span:first-child { padding-left: calc(0.85rem + 1.7rem); }
  .site[data-look="garage"] .g-order .service-body { padding-right: 0.6rem; }
  .site[data-look="garage"] .g-order .service .price { flex-direction: column; align-items: flex-end; padding-right: 0.85rem; padding-left: 0.6rem; min-width: 4.75rem; max-width: 6.5rem; font-size: 1.35rem; }
  .site[data-look="garage"] .g-order .service .price .price-from { line-height: 1.2; }
  .site[data-look="garage"] .g-glass .hours-table td { white-space: nowrap; font-size: 1.15rem; }
  .site[data-look="garage"] .g-glass .hours-table th { font-size: 1.05rem; }
}

/* --- Opening hours: the glass door in the brick front, hours in vinyl. --- */
.site[data-look="garage"] .g-brick {
  --text: var(--g-on-dark); --muted: #e4dcd4;
  padding-bottom: 0; background: #5c2b20; color: var(--g-on-dark);
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.65);
}
.site[data-look="garage"] .g-brick .hours-inner { align-items: end; }
.site[data-look="garage"] .g-brick .hours-intro { padding-bottom: clamp(2rem, 6vw, 5rem); }
.site[data-look="garage"] .g-brick .hours-intro :is(h1, h2) { font-size: calc(clamp(2.8rem, 1.4rem + 4.4vw, 5.75rem) * var(--g-k, 1)); max-width: 14em; }
.site[data-look="garage"] .g-brick .hours-place { color: var(--g-on-dark); max-width: 26rem; font-size: var(--fs-lead); line-height: 1.45; }
.site[data-look="garage"] .g-brick .hours-place a, .site[data-look="garage"] .g-brick .hours-call a { color: var(--g-on-dark); text-decoration-color: var(--plate); text-decoration-thickness: 2px; }
.site[data-look="garage"] .g-brick .hours-call { font-family: var(--font-heading); text-transform: uppercase; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); letter-spacing: 0.03em; }
.site[data-look="garage"] .g-door {
  position: relative; justify-self: end; width: min(100%, 30rem);
  padding: 1rem 1rem 0; background: linear-gradient(90deg, #8e9497, #c3c8cb 12%, #a5abae 50%, #c3c8cb 88%, #8e9497);
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.4), 0 0 0 6px #3e2219;
  text-shadow: none;
}
.site[data-look="garage"] .g-glass {
  --text: var(--g-on-dark); --muted: var(--g-on-dark-muted); --border: rgb(255 255 255 / 0.2);
  position: relative; max-width: none; min-height: clamp(26rem, calc(60 * var(--raam-vh)), 36rem);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.25rem, 3.5vw, 2.25rem) 5.5rem;
  background: linear-gradient(118deg, transparent 0 58%, rgb(255 255 255 / 0.05) 58% 66%, transparent 66%), var(--g-glass);
  box-shadow: inset 0 0 0 2px #0a0b0c;
}
/* The kick plate at the foot of the door. */
.site[data-look="garage"] .g-brick .hours-inner { position: relative; z-index: 1; }
.site[data-look="garage"] .g-kick { position: absolute; left: 0; right: 0; bottom: 0; height: 3.75rem; overflow: hidden; border-top: 2px solid #70767a; background: #a7acaf; }
.site[data-look="garage"] .g-door-bar { position: absolute; top: 38%; left: 1.9rem; width: 0.9rem; height: 9rem; border-radius: 0.45rem; background: linear-gradient(90deg, #7f8589, #e1e4e6 45%, #8c9296); box-shadow: 0 3px 4px rgb(0 0 0 / 0.5); }
.site[data-look="garage"] .g-door-name { margin: 0 0 1.4rem; padding-left: 2rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 1.3rem; line-height: 1.15; color: var(--g-on-dark); overflow-wrap: break-word; }
.site[data-look="garage"] .g-glass .hours-table { margin-left: 2rem; width: calc(100% - 2rem); font-size: 1.15rem; }
.site[data-look="garage"] .g-glass .hours-table th { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.2rem; }
.site[data-look="garage"] .g-glass .hours-table td { font-family: var(--font-heading); font-weight: 700; font-size: 1.3rem; letter-spacing: 0.03em; }
.site[data-look="garage"] .g-glass .hours-table .is-closed :is(th, td) { color: var(--g-on-dark-muted); font-weight: 700; }
.site[data-look="garage"] .g-glass .hours-table th::after { background: var(--plate); color: var(--on-plate); font-family: var(--font-body); }
.site[data-look="garage"] .g-glass .hours-table th::before { width: 6px !important; left: -0.9rem !important; background: var(--plate) !important; }
@media (max-width: 51.99rem) {
  .site[data-look="garage"] .g-door { justify-self: stretch; width: auto; margin-inline: 0.25rem; }
  .site[data-look="garage"] .g-glass { min-height: 0; }
  .site[data-look="garage"] .g-door-bar { display: none; }
  .site[data-look="garage"] .g-door-name, .site[data-look="garage"] .g-glass .hours-table { padding-left: 0; margin-left: 0; width: 100%; }
}

/* --- About: the two-tone workshop wall, the photo edge to edge. ---------- */
.site[data-look="garage"] .g-wall {
  padding: 0; display: grid;
  /* White above, the painted dado below with its stripe: a workshop wall. */
  background: linear-gradient(to top, var(--g-wall-low) 0 clamp(4.5rem, 9vw, 7rem), var(--g-wall-stripe) clamp(4.5rem, 9vw, 7rem) calc(clamp(4.5rem, 9vw, 7rem) + 6px), var(--bg) calc(clamp(4.5rem, 9vw, 7rem) + 6px));
}
.site[data-look="garage"] .g-wall .about-media { min-height: 0; }
.site[data-look="garage"] .g-wall .about-img { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
.site[data-look="garage"] .g-wall .about-text { max-width: 40rem; padding: clamp(3.5rem, 8vw, 6.5rem) var(--gap) calc(clamp(4.5rem, 9vw, 7rem) + clamp(2.5rem, 5vw, 4rem)); }
.site[data-look="garage"] .g-wall .about-text > p:not(:first-of-type) { font-size: var(--fs-base); }
.site[data-look="garage"] .g-wall .about-text :is(h1, h2) { font-size: calc(clamp(2.6rem, 1.4rem + 4.2vw, 5.6rem) * var(--g-k, 1)); max-width: 9em; }
.site[data-look="garage"] .g-wall .about-text > p { max-width: 36rem; }
.site[data-look="garage"] .g-wall .about-text > p:first-of-type { font-size: var(--fs-lead); }
@media (max-width: 51.99rem) {
  .site[data-look="garage"] .g-wall .about-media { aspect-ratio: 4 / 3; }
}
@media (min-width: 52rem) {
  .site[data-look="garage"] .g-wall.g-has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 36rem; }
  .site[data-look="garage"] .g-wall.g-has-photo .about-text { max-width: none; }
  .site[data-look="garage"] .about-image_left.g-has-photo .about-text { padding-left: clamp(2.5rem, 5vw, 5rem); padding-right: max(var(--gap), (100vw - var(--wrap)) / 2); }
  .site[data-look="garage"] .about-image_right.g-has-photo .about-media { order: 2; }
  .site[data-look="garage"] .about-image_right.g-has-photo .about-text { justify-self: end; padding-left: max(var(--gap), (100vw - var(--wrap)) / 2); padding-right: clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="garage"] .g-wall:not(.g-has-photo) .about-text { width: min(100% - 2 * var(--gap), var(--wrap)); max-width: none; margin-inline: auto; padding-inline: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="garage"] .g-wall:not(.g-has-photo) .about-text > :not(:is(h1, h2)) { grid-column: 2; }
  .site[data-look="garage"] .g-wall:not(.g-has-photo) .about-text > :is(h1, h2) { grid-row: 1 / span 4; }
}

/* --- Gallery: the workshop edge to edge, dark seams. --------------------- */
.site[data-look="garage"] .g-strip { --text: var(--g-on-dark); background: var(--g-asphalt); color: var(--g-on-dark); padding-bottom: 0; }
.site[data-look="garage"] .g-strip :is(h1, h2) { font-size: calc(clamp(2.6rem, 1.4rem + 4vw, 5.5rem) * var(--g-k, 1)); }
.site[data-look="garage"] .g-strip .gallery-items { margin-top: 1.5rem; gap: 4px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); grid-auto-flow: dense; }
.site[data-look="garage"] .g-strip .gallery-items li { background: #000; }
.site[data-look="garage"] .g-strip .gallery-items img { aspect-ratio: 3 / 2; height: 100%; }
@media (min-width: 52rem) {
  .site[data-look="garage"] .g-strip .gallery-items { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site[data-look="garage"] .g-strip .gallery-items li:nth-child(5n + 1) { grid-column: span 2; grid-row: span 2; }
  .site[data-look="garage"] .g-strip .gallery-items li:first-child:nth-last-child(2), .site[data-look="garage"] .g-strip .gallery-items li:first-child:nth-last-child(2) ~ li { grid-column: span 2; grid-row: auto; }
}

/* --- Reviews: under the brug, big quotes on the concrete floor. ---------- */
.site[data-look="garage"] .g-floor {
  --text: var(--g-ink); --muted: #26282b;
  padding-top: 0; overflow: clip; color: var(--g-ink);
  background-color: var(--g-concrete);
  background-image:
    linear-gradient(90deg, rgb(0 0 0 / 0.13) 1.5px, rgb(255 255 255 / 0.12) 1.5px 2.5px, transparent 2.5px),
    linear-gradient(rgb(0 0 0 / 0.13) 1.5px, rgb(255 255 255 / 0.12) 1.5px 2.5px, transparent 2.5px),
    radial-gradient(rgb(0 0 0 / 0.07) 0.8px, transparent 1.2px),
    radial-gradient(rgb(255 255 255 / 0.12) 0.8px, transparent 1.2px);
  background-size: 640px 640px, 640px 640px, 7px 9px, 11px 13px;
  background-position: -40px 0, 0 -60px, 0 0, 3px 5px;
}
.site[data-look="garage"] .g-floor:not(.g-has-lift) { padding-top: var(--section-pad); }
.site[data-look="garage"] .g-lift { height: clamp(14rem, 34vw, 30rem); background: #0b0c0e; }
.site[data-look="garage"] .g-lift img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42% !important; }
.site[data-look="garage"] .g-floor-inner { position: relative; z-index: 1; padding-top: clamp(3rem, 6vw, 5rem); }
.site[data-look="garage"] .g-floor:not(.g-has-lift) .g-floor-inner { padding-top: 0; }
.site[data-look="garage"] .g-floor :is(h1, h2) { font-size: calc(clamp(2.6rem, 1.4rem + 4vw, 5.5rem) * var(--g-k, 1)); margin-bottom: 0; }
/* The painted line on the floor, running off the page. */
.site[data-look="garage"] .g-floor-inner::after { content: ''; position: absolute; left: 0; right: calc(-50vw + 50%); top: calc(clamp(3rem, 6vw, 5rem) - 1.6rem); height: 12px; background: var(--g-line); box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.08); opacity: 0.95; }
.site[data-look="garage"] .g-floor:not(.g-has-lift) .g-floor-inner::after { top: -1.6rem; }
.site[data-look="garage"] .g-quotes { margin-top: clamp(2rem, 4vw, 3rem); gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem); max-width: 60rem; }
.site[data-look="garage"] .g-quotes figure { border-top: 3px solid var(--g-ink); padding-top: 1rem; }
.site[data-look="garage"] .g-quotes blockquote { margin-bottom: 1rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.55rem, 1.25rem + 1vw, 2.15rem); line-height: 1.12; text-transform: none; }
.site[data-look="garage"] .g-quotes figcaption { color: var(--g-ink); font-size: 1rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; }
.site[data-look="garage"] .g-quotes > li:first-child:not(:last-child) { grid-column: 1 / -1; }
.site[data-look="garage"] .g-quotes > li:first-child blockquote { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.7rem); line-height: 1.02; max-width: 22ch; }
.site[data-look="garage"] .g-quotes-1 > li:first-child blockquote { max-width: 26ch; }
.site[data-look="garage"] .g-tyres { position: absolute; right: max(var(--gap), (100vw - var(--wrap)) / 2 - 7rem); bottom: 0; width: clamp(11rem, 17vw, 16rem); height: auto; display: none; filter: drop-shadow(-10px 4px 10px rgb(0 0 0 / 0.25)); }
.site[data-look="garage"] .g-tyre { fill: #222426; }
.site[data-look="garage"] .g-tyre-tread { stroke: #0d0e0f; stroke-width: 3.2; stroke-linecap: round; fill: none; }
.site[data-look="garage"] .g-tyre-groove { stroke: #0d0e0f; stroke-width: 3; }
.site[data-look="garage"] .g-tyre-edge { fill: none; stroke: #3b3e41; stroke-width: 1.2; }
@media (min-width: 64rem) {
  .site[data-look="garage"] .g-tyres { display: block; }
  .site[data-look="garage"] .g-floor { padding-bottom: calc(var(--section-pad) + 2rem); }
}

/* --- Werkgebied: the key cabinet, a tag per place. ----------------------- */
.site[data-look="garage"] .g-keys { background: var(--bg); }
.site[data-look="garage"] .g-keys-inner { display: grid; gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="garage"] .g-keys-inner { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.4fr); } }
.site[data-look="garage"] .g-keys :is(h1, h2) { font-size: calc(clamp(2.4rem, 1.4rem + 3.6vw, 4.8rem) * var(--g-k, 1)); }
.site[data-look="garage"] .g-keys .area-body { font-size: var(--fs-lead); color: var(--muted); }
.site[data-look="garage"] ul.g-keyboard {
  display: flex; flex-wrap: wrap; gap: 1.9rem 1.1rem; margin: 0; padding: 1.6rem clamp(1rem, 3vw, 2rem) 2.25rem;
  background: #dfe1de; border: 12px solid #4b545b; border-radius: 4px; font-size: inherit; font-weight: 400;
  box-shadow: inset 0 3px 6px rgb(0 0 0 / 0.25), 0 14px 22px -16px rgb(0 0 0 / 0.6);
}
.site[data-look="garage"] ul.g-keyboard li { position: relative; white-space: normal; padding-top: 1.55rem; display: flex; flex-direction: column; align-items: center; }
.site[data-look="garage"] ul.g-keyboard li::after { content: none; }
/* The hook, and the ring the tag hangs on. */
.site[data-look="garage"] ul.g-keyboard li::before { content: ''; position: absolute; top: 0; left: 50%; width: 0.6rem; height: 0.6rem; margin-left: -0.3rem; border-radius: 50%; background: #6c7378; box-shadow: 0 2px 0 rgb(0 0 0 / 0.35); }
.site[data-look="garage"] .g-tag {
  --tag: #ffffff; --on-tag: var(--g-ink);
  position: relative; display: block; min-width: 7rem; max-width: 11rem; padding: 1.7rem 0.9rem 0.95rem; text-align: center;
  background: var(--tag); color: var(--on-tag); border-radius: 0.6rem 0.6rem 0.9rem 0.9rem;
  font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); line-height: 1.05;
  overflow-wrap: break-word; hyphens: auto;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.18), 0 3px 4px -1px rgb(0 0 0 / 0.35);
  transform-origin: 50% -0.9rem; transition: transform 0.35s cubic-bezier(0.3, 1.6, 0.5, 1);
}
/* The tag's eyelet and its split ring over the hook. */
.site[data-look="garage"] .g-tag::before { content: ''; position: absolute; top: 0.45rem; left: 50%; width: 0.75rem; height: 0.75rem; margin-left: -0.375rem; border-radius: 50%; background: #dfe1de; box-shadow: inset 0 0 0 2px #9aa0a4; }
.site[data-look="garage"] .g-tag::after { content: ''; position: absolute; top: -1.35rem; left: 50%; width: 1.1rem; height: 2.1rem; margin-left: -0.55rem; border: 2.5px solid #8b9196; border-radius: 50%; }
.site[data-look="garage"] ul.g-keyboard li:nth-child(4n + 1) .g-tag { --tag: var(--plate); --on-tag: #111; }
.site[data-look="garage"] ul.g-keyboard li:nth-child(4n + 2) .g-tag { --tag: #ffffff; --on-tag: var(--g-ink); }
.site[data-look="garage"] ul.g-keyboard li:nth-child(4n + 3) .g-tag { --tag: #1f5aa6; --on-tag: #ffffff; }
.site[data-look="garage"] ul.g-keyboard li:nth-child(4n + 4) .g-tag { --tag: #b42b22; --on-tag: #ffffff; }
.site[data-look="garage"] ul.g-keyboard li:nth-child(odd) .g-tag { transform: rotate(-2deg); }
.site[data-look="garage"] ul.g-keyboard li:nth-child(3n) .g-tag { transform: rotate(2.5deg); }
.site[data-look="garage"] ul.g-keyboard li:hover .g-tag { transform: rotate(-7deg); }

/* --- FAQ: the red tool cabinet; each question is a drawer's Dymo label. -- */
.site[data-look="garage"] .g-cabinet-band { --text: var(--g-on-dark); background: var(--g-asphalt); color: var(--g-on-dark); padding-bottom: calc(var(--section-pad) + 1.5rem); }
.site[data-look="garage"] .g-cabinet-inner { display: grid; gap: 2rem clamp(2rem, 5vw, 4.5rem); align-items: start; }
@media (min-width: 52rem) { .site[data-look="garage"] .g-cabinet-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); } }
.site[data-look="garage"] .g-cabinet-band :is(h1, h2) { font-size: calc(clamp(2.4rem, 1.4rem + 3.6vw, 4.8rem) * var(--g-k, 1)); color: var(--g-on-dark); }
.site[data-look="garage"] .faq-items.g-cabinet {
  position: relative; max-width: none; margin: 0 0 1.6rem; padding: 1.6rem 0.9rem 0.9rem;
  background: var(--g-cab); border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.35), inset 0 -6px 0 rgb(0 0 0 / 0.2), 0 24px 30px -22px #000;
}
/* The rubber mat on top, the wheels underneath. */
.site[data-look="garage"] .g-cabinet::before { content: ''; position: absolute; left: -0.4rem; right: -0.4rem; top: -0.5rem; height: 1rem; border-radius: 3px; background: #101010; box-shadow: 0 2px 0 rgb(0 0 0 / 0.5); }
.site[data-look="garage"] .g-cabinet::after { content: ''; position: absolute; bottom: -1.5rem; left: 1.5rem; right: 1.5rem; height: 1.5rem; background: radial-gradient(circle at 0.75rem 0.6rem, #2a2a2a 0 0.55rem, #555 0.6rem 0.75rem, transparent 0.8rem) left / 1.5rem 1.5rem no-repeat, radial-gradient(circle at 0.75rem 0.6rem, #2a2a2a 0 0.55rem, #555 0.6rem 0.75rem, transparent 0.8rem) right / 1.5rem 1.5rem no-repeat; }
.site[data-look="garage"] .g-cabinet details.g-drawer { border: 0; margin-top: 0.55rem; border-radius: 3px; background: linear-gradient(#b7291f, #a1211a); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.22), inset 0 -2px 0 rgb(0 0 0 / 0.25), 0 2px 0 rgb(0 0 0 / 0.4); }
.site[data-look="garage"] .g-cabinet details.g-drawer:first-child { border-top: 0; margin-top: 0; }
.site[data-look="garage"] .g-cabinet summary { min-height: 4.25rem; padding: 0.85rem 1rem; gap: 1.25rem; font-size: 1.05rem; color: #fff; }
.site[data-look="garage"] .g-cabinet summary .dymo { font-size: clamp(0.95rem, 0.88rem + 0.3vw, 1.12rem); letter-spacing: 0.1em; line-height: 2.05; }
/* The drawer's handle in place of the plus sign. */
.site[data-look="garage"] .g-cabinet summary::after { content: ''; flex: none; width: clamp(3.5rem, 9vw, 6rem); height: 0.8rem; border-radius: 0.4rem; background: linear-gradient(#eef0f1, #9fa5a9); box-shadow: 0 2px 2px rgb(0 0 0 / 0.5); }
.site[data-look="garage"] .g-cabinet details[open] summary::after { content: ''; }
.site[data-look="garage"] .g-cabinet summary:focus-visible { outline: 3px solid #fff; outline-offset: -3px; }
/* Opened: the foam insert inside the drawer. */
.site[data-look="garage"] .g-cabinet details p { margin: 0 0.6rem 0.6rem; padding: 1rem 1.15rem 1.1rem; max-width: none; color: var(--g-on-dark); background: #2b2e31; border-radius: 2px; box-shadow: inset 0 3px 6px rgb(0 0 0 / 0.55); font-size: 1.05rem; line-height: 1.55; }

/* --- Call to action: the sectional door, lifting off the floor. ---------- */
.site[data-look="garage"] .g-sectional {
  --gap-h: clamp(3rem, 7vw, 5.5rem);
  padding: 0 0 var(--gap-h); overflow: clip; background: linear-gradient(to bottom, #050607 30%, #2a2c2e); color: var(--g-ink);
}
/* Under the door: the workshop light on the floor, and its painted line. */
.site[data-look="garage"] .g-door-gap { position: absolute; left: 0; right: 0; bottom: 0; height: var(--gap-h); background: radial-gradient(ellipse 60% 120% at 50% 100%, rgb(255 238 200 / 0.28), transparent 70%), linear-gradient(to bottom, #050607, #24262a); }
/* The window row in the door's top panel. */
.site[data-look="garage"] .g-panels::before {
  content: ''; position: absolute; left: max(var(--gap), (100% - var(--wrap)) / 2); right: max(var(--gap), (100% - var(--wrap)) / 2);
  top: calc(var(--gap-h) + clamp(1.2rem, 2vw, 1.7rem)); height: clamp(2.6rem, 4.5vw, 3.6rem);
  background: repeating-linear-gradient(90deg, #1e262b 0 calc(100% / 6 - 1.25rem), transparent calc(100% / 6 - 1.25rem) calc(100% / 6));
  border-top: 3px solid #a7acad; border-bottom: 2px solid #fff;
}
.site[data-look="garage"] .g-panels {
  --text: var(--g-ink); --muted: #3a3c40;
  position: relative; z-index: 1; margin-top: calc(-1 * var(--gap-h));
  padding: calc(var(--gap-h) + clamp(6.5rem, 11vw, 9.5rem)) 0 clamp(3.5rem, 7vw, 5.5rem);
  background:
    linear-gradient(to bottom, transparent calc(100% - 7px), #1c1c1c calc(100% - 7px)),
    repeating-linear-gradient(to bottom, transparent 0 10px, rgb(0 0 0 / 0.045) 10px 11px, rgb(255 255 255 / 0.5) 11px 12px),
    repeating-linear-gradient(to bottom, var(--g-door) 0 calc(clamp(5.5rem, 9vw, 7.5rem) - 4px), #9fa3a3 calc(clamp(5.5rem, 9vw, 7.5rem) - 4px) calc(clamp(5.5rem, 9vw, 7.5rem) - 2px), #fbfbf9 calc(clamp(5.5rem, 9vw, 7.5rem) - 2px) clamp(5.5rem, 9vw, 7.5rem));
  box-shadow: 0 6px 10px rgb(0 0 0 / 0.5);
}
.site[data-look="garage"] .g-panels .cta-inner { align-items: center; }
.site[data-look="garage"] .g-panels .cta-inner > div { max-width: 48rem; }
.site[data-look="garage"] .g-panels :is(h1, h2) { font-size: calc(clamp(3rem, 1.4rem + 6vw, 7.5rem) * var(--g-k, 1)); margin-bottom: 0.15em; }
.site[data-look="garage"] .g-panels .cta-inner p { color: #2c2e31; font-size: var(--fs-lead); font-weight: 500; }
.site[data-look="garage"] .g-panels .btn { min-height: 68px; font-size: clamp(1.4rem, 1.2rem + 0.8vw, 1.9rem); padding-inline: 2rem; }

/* --- Contact: big plain links, beside the tool wall. --------------------- */
.site[data-look="garage"] .g-contact { background: var(--bg); }
.site[data-look="garage"] .g-contact .s-contact :is(h1, h2) { font-size: calc(clamp(2.6rem, 1.4rem + 4vw, 5.5rem) * var(--g-k, 1)); max-width: 9em; }
.site[data-look="garage"] .g-contact .contact-list { border-top: 4px solid var(--g-ink); }
.site[data-look="garage"] .g-contact .contact-list li { border-bottom: 1.5px solid var(--g-ink); }
.site[data-look="garage"] .g-contact .contact-link { padding-block: 1rem 1.1rem; }
.site[data-look="garage"] .g-contact .contact-label { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.9rem; color: var(--muted); }
.site[data-look="garage"] .g-contact .contact-value { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.7rem); text-transform: none; }
.site[data-look="garage"] .g-contact .contact-list li:first-child .contact-value { font-size: clamp(2.6rem, 1.5rem + 4vw, 5rem); text-transform: uppercase; letter-spacing: 0.01em; }
.site[data-look="garage"] .g-contact .contact-link:hover .contact-value { text-decoration-color: var(--plate); text-decoration-thickness: 4px; }
.site[data-look="garage"] .g-contact .contact-note, .site[data-look="garage"] .g-contact .contact-also { font-weight: 600; }
@media (min-width: 52rem) {
  .site[data-look="garage"] .g-contact.g-has-wall { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .site[data-look="garage"] .g-contact-wall img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 40% !important; }
  .site[data-look="garage"] .g-has-wall .s-contact .wrap { width: auto; margin: 0; padding-inline: clamp(2.5rem, 5vw, 5rem) max(var(--gap), (100vw - var(--wrap)) / 2); }
  .site[data-look="garage"] .g-has-wall .contact-details_only .contact-details { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="garage"] .g-has-wall .contact-details_only .contact-list { grid-column: 1; grid-row: auto; margin-top: 1.5rem; }
}
@media (max-width: 51.99rem) { .site[data-look="garage"] .g-contact-wall { display: none; } }

/* --- Forms (contact form, request form, booking): a blank werkorder. ----- */
.site[data-look="garage"] :is(.contact-form, .request-form) {
  --bg: var(--g-paper); --text: var(--g-ink); --muted: #45474b;
  background: var(--g-paper); color: var(--g-ink); border: 1.5px solid var(--g-rule); border-top: 6px solid var(--g-rule);
  padding: clamp(1.1rem, 3vw, 2rem); box-shadow: 0 5px 0 -1px #f2e39a, 0 5px 0 0 rgb(0 0 0 / 0.12), 0 10px 0 -2px #efc2c9, 0 10px 0 -1px rgb(0 0 0 / 0.12);
}
.site[data-look="garage"] :is(.contact-form, .request-form) label, .site[data-look="garage"] .request-form legend:not(.request-step > legend) { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; color: var(--g-rule); }
.site[data-look="garage"] :where(.site form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-width: 0 0 1.5px; border-color: var(--g-rule); border-radius: 0; background: transparent; padding-inline: 0.2rem; }
.site[data-look="garage"] :is(.contact-form, .request-form) textarea { border: 1.5px solid var(--g-rule); background: repeating-linear-gradient(to bottom, transparent 0 1.9rem, color-mix(in srgb, var(--g-rule) 25%, transparent) 1.9rem calc(1.9rem + 1px)); line-height: 1.9rem; padding: 0 0.5rem; }
.site[data-look="garage"] .s-request { background: var(--g-peg); background-image: radial-gradient(circle, var(--g-peg-hole) 0 2.4px, rgb(74 54 34 / 0.35) 2.9px, transparent 3.4px); background-size: 25px 25px; }
.site[data-look="garage"] .s-request .request-inner > :not(form) { background: var(--g-paper); padding: 1rem 1.25rem; justify-self: start; }
.site[data-look="garage"] .s-request :is(h1, h2) { font-size: calc(clamp(2.2rem, 1.4rem + 3vw, 4rem) * var(--g-k, 1)); }
.site[data-look="garage"] .request-step > legend { font-size: 1.6rem; }

/* Booking: the planbord, the services on magnet strips. */
.site[data-look="garage"] .s-booking { background: var(--g-wall-low); }
.site[data-look="garage"] .s-booking .booking-inner > * { max-width: 52rem; }
.site[data-look="garage"] .s-booking :is(h1, h2) { font-size: calc(clamp(2.4rem, 1.4rem + 3.4vw, 4.5rem) * var(--g-k, 1)); }
.site[data-look="garage"] .booking-services { border-top: 0; padding: 1rem; background: #fdfdfb; border: 10px solid var(--g-alu); border-radius: 3px; box-shadow: inset 0 0 0 1px rgb(0 0 0 / 0.15), 0 14px 20px -16px rgb(0 0 0 / 0.6); }
.site[data-look="garage"] .booking-services li { border-bottom: 0; margin-top: 0.5rem; }
.site[data-look="garage"] .booking-services li:first-child { margin-top: 0; }
.site[data-look="garage"] .booking-services a { padding: 0.75rem 1rem; background: #fff; border: 1.5px solid var(--g-ink); border-left: 10px solid var(--g-line); }
.site[data-look="garage"] .booking-services a:hover { background: color-mix(in srgb, var(--g-line) 22%, #fff); }
.site[data-look="garage"] .booking-name { font-family: var(--font-heading); text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.03em; }
.site[data-look="garage"] .booking-go { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.04em; }
.site[data-look="garage"] .s-booking-flow .booking-choices a { font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; }

/* --- Footer: the workshop floor at night; the name on its plate again. --- */
.site[data-look="garage"] .site-footer { background: var(--g-asphalt); border-top: 10px solid var(--g-line); }
.site[data-look="garage"] .footer-brand .footer-name {
  position: relative; display: inline-block; max-width: 100%; padding: 0.22em 0.6em 0.14em 2.15em;
  background: var(--plate); color: var(--on-plate); border: 2px solid #111; border-radius: 6px; box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 3.5px #111;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.2rem); letter-spacing: 0.05em; overflow-wrap: break-word; overflow: hidden;
}
.site[data-look="garage"] .footer-brand .footer-name::before { content: 'NL'; position: absolute; left: 0; top: 0; bottom: 0; width: 1.6em; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0.3em; background: var(--eu); color: var(--on-eu); font-family: var(--font-body); font-size: 0.42em; width: 3.4em; font-weight: 600; letter-spacing: 0.02em; }
.site[data-look="garage"] .footer-title { font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; }

/* --- Phones: the quick bar in the plate's yellow and the fascia's steel. -- */
@media (max-width: 51.99rem) {
  .site[data-look="garage"] .quickbar { background: var(--g-steel); border-top: 3px solid #0d0e10; }
  .site[data-look="garage"] .quick { font-family: var(--font-heading); text-transform: uppercase; font-size: 1.2rem; letter-spacing: 0.04em; }
}

/* --- Motion: only the workshop's own, and only when wanted. ------------- */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="garage"] .g-box::after { transition: transform 0.18s ease-out, opacity 0.12s; }
  .site[data-look="garage"] .g-cabinet details[open] p { animation: g-drawer 0.28s ease-out; }
  @keyframes g-drawer { from { transform: translateY(-0.6rem); opacity: 0; } }
  @supports (animation-timeline: view()) {
    /* The werkorder is put on the board; the door lifts as it comes into view. */
    .site[data-look="garage"] .g-clipboard { animation: g-hang linear forwards; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    @keyframes g-hang { from { transform: translateY(3rem) rotate(-1.2deg); } to { transform: none; } }
    .site[data-look="garage"] .g-panels { animation: g-lift linear forwards; animation-timeline: view(); animation-range: entry 0% cover 45%; }
    @keyframes g-lift { from { transform: translateY(var(--gap-h)); } to { transform: none; } }
  }
}

/* --- Robustness: long headings, no photo. ------------------------------- */
.site[data-look="garage"] :is(.g-long, .g-xlong) :is(.about-text, .hours-intro, .s-contact) :is(h1, h2) { max-width: 20ch; }
.site[data-look="garage"] .g-hero:not(.g-has-photo) .g-hero-panel { justify-content: center; }
.site[data-look="garage"] .g-hero-tyres { display: none; }
@media (min-width: 64rem) {
  .site[data-look="garage"] .g-hero:not(.g-has-photo) { position: relative; }
  .site[data-look="garage"] .g-hero:not(.g-has-photo) .hero-text { max-width: calc(100% - clamp(15rem, 22vw, 21rem)); }
  .site[data-look="garage"] .g-hero-tyres { display: block; right: max(var(--gap), (100vw - var(--wrap)) / 2); width: clamp(13rem, 20vw, 19rem); filter: none; }
  .site[data-look="garage"] .g-hero-tyres .g-tyre-edge { stroke: #5a5e62; }
}
/* Narrow phones: the door keeps to the screen; today is the yellow tab alone. */
.site[data-look="garage"] .g-brick .hours-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .site[data-look="garage"] .g-brick .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 26rem) {
  .site[data-look="garage"] .g-glass { padding-inline: 1rem; }
  .site[data-look="garage"] .g-glass .hours-table th::after { display: none; }
  .site[data-look="garage"] .g-glass .hours-table th { padding-right: 0.5rem; }
}

/* ---- looks/gardener.css ---- */
/* The gardener look: everything here is scoped to .site[data-look="gardener"]. Appended after base.css (bun run --filter @platform/sections css).
   The page is a walk through a garden: the planting full-bleed, a big
   kwekerij label pushed into a strip of soil, steeketiketten with price
   stickers and month strips, the drawing table with a beplantingsplan, a
   mown lawn, stepping stones in gravel, and a clipped hedge at the foot. */

.site[data-look="gardener"] {
  /* Materials. Text on each was checked for 4.5:1 (see the report). */
  --gd-label: #ffffff;
  --gd-paper: #f5f7f0;
  --gd-leaf: #e9eedf;
  --gd-ink: #18231b;
  --gd-ink-soft: #3f4c43;
  --gd-name: #2f6b3a;
  --gd-hedge: #1f3326;
  --gd-hedge-lit: #2b4a34;
  --gd-hedge-dark: #142219;
  --gd-soil: #3a2a1f;
  --gd-soil-lit: #5a4331;
  --gd-soil-dark: #231810;
  --gd-on-soil: #f4efe6;
  --gd-on-soil-soft: #dccfbd;
  --gd-gravel: #dcd7cb;
  --gd-stone: #cbc7bc;
  --gd-sticker: #ffd23f;
  --gd-lawn-a: #2c5b36;
  --gd-lawn-b: #336a3e;
  --gd-on-green: #f3f7ee;
  --gd-on-green-soft: #d6e4cf;
  --gd-line: #c9d2bf;
  --gd-plan-ink: #2f4a36;

  /* Drawn materials, reused by several sections: one crumb, pebble or leaf per
     gradient layer, each on its own prime-sized tile, so no repeat shows. */
  --gd-soil-tex:
    radial-gradient(2.0px 2.4px at 50% 69%, #1f150e 80%, #0000) 0 0 / 67px 109px,
    radial-gradient(1.8px 2.8px at 41% 20%, #6b5240 80%, #0000) 0 0 / 41px 103px,
    radial-gradient(3.3px 2.9px at 46% 87%, #241810 80%, #0000) 0 0 / 73px 29px,
    radial-gradient(2.1px 1.5px at 29% 72%, #7a604b 80%, #0000) 0 0 / 109px 157px,
    radial-gradient(1.9px 1.6px at 83% 50%, #1b120c 80%, #0000) 0 0 / 29px 149px,
    radial-gradient(3.7px 3.0px at 68% 18%, #241810 80%, #0000) 0 0 / 31px 73px,
    radial-gradient(4.4px 3.3px at 17% 49%, #1f150e 80%, #0000) 0 0 / 101px 151px,
    radial-gradient(2.6px 1.8px at 12% 69%, #1b120c 80%, #0000) 0 0 / 37px 53px,
    radial-gradient(1.4px 2.3px at 46% 26%, #2a1d14 80%, #0000) 0 0 / 71px 131px,
    radial-gradient(2.7px 2.9px at 31% 67%, #7a604b 80%, #0000) 0 0 / 103px 101px,
    radial-gradient(3.3px 3.0px at 80% 45%, #7a604b 80%, #0000) 0 0 / 139px 41px,
    radial-gradient(3.8px 4.6px at 39% 29%, #241810 80%, #0000) 0 0 / 97px 61px,
    radial-gradient(1.5px 2.3px at 72% 85%, #5c4533 80%, #0000) 0 0 / 47px 79px,
    radial-gradient(1.4px 2.5px at 57% 88%, #1b120c 80%, #0000) 0 0 / 107px 107px,
    radial-gradient(4.5px 3.7px at 89% 16%, #1f150e 80%, #0000) 0 0 / 137px 37px,
    radial-gradient(4.3px 3.7px at 81% 60%, #7a604b 80%, #0000) 0 0 / 131px 139px,
    radial-gradient(2.9px 1.7px at 17% 34%, #241810 80%, #0000) 0 0 / 83px 97px,
    radial-gradient(3.3px 4.6px at 86% 16%, #241810 80%, #0000) 0 0 / 149px 59px,
    radial-gradient(1.1px 1.8px at 56% 88%, #4b382a 80%, #0000) 0 0 / 127px 67px,
    radial-gradient(1.3px 2.0px at 42% 54%, #1b120c 80%, #0000) 0 0 / 151px 31px,
    radial-gradient(1.9px 3.1px at 69% 71%, #1f150e 80%, #0000) 0 0 / 59px 113px,
    radial-gradient(2.7px 1.6px at 43% 71%, #5c4533 80%, #0000) 0 0 / 79px 89px,
    radial-gradient(3.2px 2.1px at 56% 28%, #4b382a 80%, #0000) 0 0 / 23px 43px,
    radial-gradient(3.9px 2.6px at 21% 43%, #1b120c 80%, #0000) 0 0 / 61px 23px,
    radial-gradient(3.0px 4.3px at 79% 74%, #1b120c 80%, #0000) 0 0 / 157px 163px,
    radial-gradient(3.6px 2.8px at 34% 40%, #7a604b 80%, #0000) 0 0 / 53px 47px,
    radial-gradient(3.9px 2.5px at 55% 13%, #4b382a 80%, #0000) 0 0 / 163px 127px,
    radial-gradient(3.0px 4.0px at 87% 54%, #1f150e 80%, #0000) 0 0 / 89px 71px,
    var(--gd-soil);
  --gd-hedge-tex:
    radial-gradient(1.9px 3.7px at 82% 23%, #1b3022 80%, #0000) 0 0 / 83px 23px,
    radial-gradient(1.1px 2.2px at 12% 10%, #152619 80%, #0000) 0 0 / 151px 149px,
    radial-gradient(1.5px 2.5px at 60% 63%, #2b4a34 80%, #0000) 0 0 / 101px 97px,
    radial-gradient(3.2px 1.5px at 53% 21%, #335a3d 80%, #0000) 0 0 / 137px 31px,
    radial-gradient(2.7px 1.8px at 25% 27%, #152619 80%, #0000) 0 0 / 163px 29px,
    radial-gradient(1.4px 3.6px at 72% 32%, #122016 80%, #0000) 0 0 / 139px 139px,
    radial-gradient(1.7px 3.2px at 26% 63%, #122016 80%, #0000) 0 0 / 97px 47px,
    radial-gradient(2.8px 1.4px at 10% 44%, #3b6644 80%, #0000) 0 0 / 103px 53px,
    radial-gradient(1.7px 2.7px at 60% 87%, #122016 80%, #0000) 0 0 / 47px 107px,
    radial-gradient(1.3px 3.3px at 66% 43%, #2b4a34 80%, #0000) 0 0 / 43px 163px,
    radial-gradient(1.8px 3.7px at 19% 19%, #2b4a34 80%, #0000) 0 0 / 131px 83px,
    radial-gradient(1.4px 2.5px at 57% 57%, #3b6644 80%, #0000) 0 0 / 89px 67px,
    radial-gradient(1.9px 3.0px at 83% 27%, #1b3022 80%, #0000) 0 0 / 109px 113px,
    radial-gradient(2.4px 1.1px at 88% 41%, #122016 80%, #0000) 0 0 / 37px 131px,
    radial-gradient(2.4px 1.4px at 35% 59%, #1b3022 80%, #0000) 0 0 / 149px 127px,
    radial-gradient(1.7px 3.3px at 14% 75%, #335a3d 80%, #0000) 0 0 / 41px 103px,
    radial-gradient(1.5px 2.5px at 86% 72%, #335a3d 80%, #0000) 0 0 / 31px 41px,
    radial-gradient(3.1px 2.0px at 26% 39%, #1b3022 80%, #0000) 0 0 / 29px 89px,
    radial-gradient(3.2px 2.0px at 45% 37%, #152619 80%, #0000) 0 0 / 59px 109px,
    radial-gradient(1.5px 3.6px at 41% 17%, #2b4a34 80%, #0000) 0 0 / 67px 101px,
    radial-gradient(2.4px 1.2px at 26% 21%, #335a3d 80%, #0000) 0 0 / 23px 137px,
    radial-gradient(1.2px 2.3px at 76% 84%, #152619 80%, #0000) 0 0 / 113px 73px,
    radial-gradient(2.1px 3.3px at 55% 49%, #2b4a34 80%, #0000) 0 0 / 53px 79px,
    radial-gradient(1.1px 2.0px at 49% 50%, #152619 80%, #0000) 0 0 / 157px 37px,
    radial-gradient(4.2px 1.8px at 15% 26%, #335a3d 80%, #0000) 0 0 / 71px 59px,
    radial-gradient(2.8px 1.6px at 63% 13%, #1b3022 80%, #0000) 0 0 / 127px 71px,
    radial-gradient(1.8px 3.3px at 84% 11%, #3b6644 80%, #0000) 0 0 / 73px 157px,
    radial-gradient(0.9px 2.2px at 42% 63%, #122016 80%, #0000) 0 0 / 79px 61px,
    radial-gradient(closest-side, rgb(80 130 85 / 0.16), transparent) 0 0 / 260px 190px, radial-gradient(closest-side, rgb(5 15 8 / 0.28), transparent) 120px 80px / 330px 240px,
    var(--gd-hedge);
  --gd-gravel-tex:
    radial-gradient(3.6px 5.0px at 53% 13%, #8f887a 80%, #0000) 0 0 / 53px 43px,
    radial-gradient(5.3px 6.6px at 51% 79%, #a0998a 80%, #0000) 0 0 / 103px 137px,
    radial-gradient(5.6px 3.7px at 83% 44%, #8f887a 80%, #0000) 0 0 / 101px 103px,
    radial-gradient(3.6px 2.7px at 71% 21%, #f6f3ed 80%, #0000) 0 0 / 41px 29px,
    radial-gradient(4.3px 5.9px at 47% 64%, #bcb4a4 80%, #0000) 0 0 / 71px 61px,
    radial-gradient(6.2px 3.8px at 15% 58%, #f6f3ed 80%, #0000) 0 0 / 107px 157px,
    radial-gradient(4.4px 5.1px at 40% 14%, #8f887a 80%, #0000) 0 0 / 89px 23px,
    radial-gradient(3.2px 2.0px at 35% 62%, #8f887a 80%, #0000) 0 0 / 109px 59px,
    radial-gradient(3.4px 5.3px at 53% 50%, #f6f3ed 80%, #0000) 0 0 / 157px 89px,
    radial-gradient(5.6px 6.5px at 68% 76%, #bcb4a4 80%, #0000) 0 0 / 31px 107px,
    radial-gradient(5.4px 4.2px at 89% 74%, #8f887a 80%, #0000) 0 0 / 137px 73px,
    radial-gradient(3.8px 4.7px at 48% 65%, #8f887a 80%, #0000) 0 0 / 23px 79px,
    radial-gradient(3.8px 5.0px at 63% 84%, #f6f3ed 80%, #0000) 0 0 / 131px 109px,
    radial-gradient(3.3px 2.6px at 17% 90%, #f6f3ed 80%, #0000) 0 0 / 59px 83px,
    radial-gradient(3.8px 4.8px at 45% 72%, #b4ad9e 80%, #0000) 0 0 / 163px 41px,
    radial-gradient(4.6px 5.2px at 57% 42%, #7f786b 80%, #0000) 0 0 / 37px 97px,
    radial-gradient(3.3px 4.2px at 33% 50%, #f6f3ed 80%, #0000) 0 0 / 139px 163px,
    radial-gradient(6.1px 4.1px at 23% 13%, #efebe3 80%, #0000) 0 0 / 151px 149px,
    radial-gradient(4.3px 2.8px at 40% 51%, #efebe3 80%, #0000) 0 0 / 97px 131px,
    radial-gradient(4.4px 5.5px at 86% 51%, #f6f3ed 80%, #0000) 0 0 / 79px 31px,
    radial-gradient(5.5px 3.7px at 31% 20%, #f6f3ed 80%, #0000) 0 0 / 73px 53px,
    radial-gradient(5.7px 3.8px at 44% 38%, #a0998a 80%, #0000) 0 0 / 47px 37px,
    radial-gradient(2.9px 3.3px at 83% 33%, #8f887a 80%, #0000) 0 0 / 127px 113px,
    radial-gradient(3.7px 4.4px at 89% 54%, #efebe3 80%, #0000) 0 0 / 29px 151px,
    radial-gradient(4.6px 3.5px at 69% 54%, #bcb4a4 80%, #0000) 0 0 / 43px 127px,
    radial-gradient(3.2px 4.2px at 62% 29%, #cdc6b8 80%, #0000) 0 0 / 67px 67px,
    radial-gradient(3.2px 2.8px at 75% 65%, #cdc6b8 80%, #0000) 0 0 / 83px 47px,
    radial-gradient(3.3px 2.4px at 76% 46%, #f6f3ed 80%, #0000) 0 0 / 61px 139px,
    radial-gradient(6.2px 5.3px at 46% 25%, #cdc6b8 80%, #0000) 0 0 / 113px 101px,
    radial-gradient(3.4px 2.9px at 35% 65%, #b4ad9e 80%, #0000) 0 0 / 149px 71px,
    var(--gd-gravel);
  --gd-grid:
    linear-gradient(rgb(47 107 58 / 0.13) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(90deg, rgb(47 107 58 / 0.13) 1px, transparent 1px) 0 0 / 120px 120px,
    linear-gradient(rgb(47 107 58 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(90deg, rgb(47 107 58 / 0.06) 1px, transparent 1px) 0 0 / 24px 24px,
    var(--gd-paper);

  /* A broken top edge (clods of soil, the hedge's clipped leaves). */
  --gd-edge:
    radial-gradient(ellipse 52% 100% at 50% 100%, #000 94%, #0000) 0px 4px / 19px 11px repeat-x, radial-gradient(ellipse 52% 100% at 50% 100%, #000 94%, #0000) 7px 0px / 31px 15px repeat-x, radial-gradient(ellipse 52% 100% at 50% 100%, #000 94%, #0000) 13px 2px / 43px 13px repeat-x, radial-gradient(ellipse 52% 100% at 50% 100%, #000 94%, #0000) 5px 6px / 26px 9px repeat-x, radial-gradient(ellipse 52% 100% at 50% 100%, #000 94%, #0000) 21px 1px / 57px 14px repeat-x, radial-gradient(ellipse 52% 100% at 50% 100%, #000 94%, #0000) 11px 3px / 23px 12px repeat-x, linear-gradient(#000, #000) 0 12px / 100% 100% no-repeat;
  --fs-base: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --gd-h2: calc(clamp(2.5rem, 1.55rem + 4vw, 5.5rem) * var(--heading-scale, 1));
  position: relative;
  background: var(--gd-paper);
  color: var(--gd-ink);
}
.site[data-look="gardener"] main > .s + .s { border-top: 0; }
/* Dutch compounds are long ("bedrijfsterreinen"): headings break them at a
   hyphen rather than mid-letter. */
.site[data-look="gardener"] :is(h1, h2) { overflow-wrap: break-word; hyphens: auto; hyphenate-limit-chars: 10 4 4; }
.site[data-look="gardener"] main > .s + .s-trust, .site[data-look="gardener"] main > .s-trust + .s { border-top: 0; }
.site[data-look="gardener"] h2 { font-size: var(--gd-h2); line-height: 0.98; letter-spacing: -0.02em; }
.site[data-look="gardener"] main > .s:first-child:not(.s-hero) > .wrap :is(h1, h2):first-child,
.site[data-look="gardener"] main > .s:first-child:not(.s-hero) .gd-services-head h1 { font-size: var(--gd-h2); }
.site[data-look="gardener"] .lead { color: var(--gd-ink-soft); font-size: clamp(1.1rem, 1rem + 0.45vw, 1.35rem); line-height: 1.5; }
.site[data-look="gardener"] .btn { border-radius: 0.45rem; font-weight: 700; transition: transform 0.2s ease, box-shadow 0.2s ease; }
.site[data-look="gardener"] .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 6px 0 -2px rgb(24 35 27 / 0.25); text-decoration: none; }
.site[data-look="gardener"] :focus-visible { outline-color: currentColor; }

/* --- Header: over the planting on the home page, a strip of hedge elsewhere */
.site[data-look="gardener"] .site-header { --text: var(--gd-on-green); --bg: var(--gd-hedge); background: var(--gd-hedge-tex); color: var(--gd-on-green); border-bottom: 0; }
.site[data-look="gardener"] .brand { font-size: calc(clamp(1.2rem, 1rem + 0.6vw, 1.6rem) * var(--heading-scale)); }
.site[data-look="gardener"] .site-header nav a { color: var(--gd-on-green); font-weight: 600; }
.site[data-look="gardener"] .site-header .btn-primary { background: var(--gd-label); color: var(--gd-hedge); border-color: var(--gd-label); }
.site[data-look="gardener"]:has(> main > .gd-hero.has-photo:first-child) > .site-header { position: absolute; inset: 0 0 auto; background: transparent; text-shadow: 0 1px 12px rgb(0 0 0 / 0.45); }
.site[data-look="gardener"]:has(> main > .gd-hero.has-photo:first-child) > .site-header .btn { text-shadow: none; }

/* --- Hero: the garden, the big label, the soil ------------------------------ */
.site[data-look="gardener"] .gd-hero {
  --soil-h: clamp(4.25rem, 3rem + 3vw, 5.75rem);
  position: relative; isolation: isolate; padding: 0;
  min-height: calc(100 * var(--raam-vh)); display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--gd-hedge-tex);
}
.site[data-look="gardener"] .gd-hero-photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.site[data-look="gardener"] .gd-hero-img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.site[data-look="gardener"] .gd-hero-hedge { position: absolute; inset: 0; background: var(--gd-hedge-tex); }
/* Shade under the header so its white name reads on any planting. */
.site[data-look="gardener"] .gd-hero.has-photo .gd-hero-photo::after { content: ''; position: absolute; inset: 0 0 auto; height: 10rem; background: linear-gradient(rgb(12 22 15 / 0.55), rgb(12 22 15 / 0)); }
.site[data-look="gardener"] .gd-hero-inner { position: relative; z-index: 2; padding-top: clamp(6rem, calc(14 * var(--raam-vh)), 10rem); }
.site[data-look="gardener"] .gd-tag {
  --pt: clamp(1.25rem, 0.8rem + 2.2vw, 3rem); --px: clamp(1.25rem, 0.8rem + 2.6vw, 3.25rem);
  --sw: clamp(3.75rem, 2rem + 6vw, 7.5rem); --taper: clamp(1.25rem, 0.5rem + 2.5vw, 3rem);
  display: flex; flex-direction: column; align-items: flex-start; width: min(100%, 54rem);
  filter: drop-shadow(0 28px 26px rgb(8 16 10 / 0.42));
}
/* One piece of white plastic: the printed top tapering into the stake. */
.site[data-look="gardener"] .gd-tag-card {
  position: relative; width: 100%;
  background: var(--gd-label); color: var(--gd-ink);
  border-radius: 1.6rem 1.6rem 0 0;
  padding: var(--pt) var(--px) calc(clamp(1rem, 0.6rem + 1.4vw, 1.9rem) + var(--taper));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--taper)), calc(50% + var(--sw) / 2) 100%, calc(50% - var(--sw) / 2) 100%, 0 calc(100% - var(--taper)));
}
/* The punched hole at the top of a kwekerij label. */
.site[data-look="gardener"] .gd-tag-card::before { content: ''; position: absolute; z-index: 1; top: 0.95rem; right: calc(var(--px) * 0.6); width: 1rem; height: 1rem; border-radius: 50%; background: var(--gd-hedge-dark); box-shadow: 0 0 0 2px rgb(255 255 255 / 0.85); }
/* The grower's printed band across the top of the label. */
.site[data-look="gardener"] .gd-tag-imprint {
  display: block; margin: calc(-1 * var(--pt)) calc(-1 * var(--px)) clamp(1rem, 2.5vw, 1.75rem); padding: 0.75rem calc(var(--px) + 2rem) 0.7rem var(--px);
  background: var(--gd-name); color: #ffffff; border-radius: inherit;
  font-weight: 700; font-size: clamp(0.88rem, 0.82rem + 0.25vw, 1.02rem); letter-spacing: 0.05em; font-variant-numeric: tabular-nums;
}
.site[data-look="gardener"] .gd-hero h1 {
  font-size: calc(clamp(2.6rem, 1.3rem + 5.6vw, 7.25rem) * var(--heading-scale, 1));
  line-height: 0.95; letter-spacing: -0.025em; margin: 0 0 0.3em; color: var(--gd-ink); max-width: none;
}
.site[data-look="gardener"] .gd-hero.is-long h1 { font-size: calc(clamp(2.2rem, 1.3rem + 3.6vw, 5rem) * var(--heading-scale, 1)); line-height: 1; }
.site[data-look="gardener"] .gd-tag-care { font-size: clamp(1.08rem, 1rem + 0.45vw, 1.4rem); line-height: 1.45; color: var(--gd-ink-soft); max-width: 36rem; margin: 0; }
.site[data-look="gardener"] .gd-hero .actions { margin-top: clamp(1.1rem, 2.5vw, 2rem); }
.site[data-look="gardener"] .gd-hero .btn { min-height: 54px; padding-inline: 1.6rem; font-size: 1.08rem; }
.site[data-look="gardener"] .gd-hero .cta-alt { color: var(--gd-ink); }
/* The stake: the label's own plastic narrowing to a point, into the soil. */
.site[data-look="gardener"] .gd-stake {
  display: block; flex: none; align-self: center; position: relative; z-index: 0;
  width: 2.75rem; height: 4.5rem; margin-top: -1px;
  background: linear-gradient(90deg, #e7ece0, #ffffff 30%, #ffffff 65%, #dfe6d7);
  clip-path: polygon(0 0, 100% 0, 100% 74%, 50% 100%, 0 74%);
}
.site[data-look="gardener"] .gd-tag .gd-stake { width: var(--sw); height: calc(var(--soil-h) + 2.75rem); margin-top: -1px; margin-bottom: calc(-1 * var(--soil-h) + 0.6rem); background: var(--gd-label); clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%); }
/* Soil: crumbly, its top edge broken into clods. */
.site[data-look="gardener"] .gd-soil { background: var(--gd-soil-tex); }
.site[data-look="gardener"] .gd-hero-soil {
  position: relative; z-index: 3; height: var(--soil-h); margin-top: -0.75rem;
  -webkit-mask: var(--gd-edge); mask: var(--gd-edge);
}

/* --- Claims: small labels stuck in the soil ----------------------------------- */
.site[data-look="gardener"] .gd-trust { background: var(--gd-soil-tex); color: var(--gd-ink); padding-block: 0.25rem clamp(1.75rem, 4vw, 2.75rem); margin-top: -1px; }
.site[data-look="gardener"] .gd-pegs { display: flex; flex-wrap: wrap; gap: 1.6rem clamp(1rem, 2.5vw, 2rem); align-items: flex-end; }
.site[data-look="gardener"] .gd-pegs li { display: flex; flex-direction: column; align-items: center; }
.site[data-look="gardener"] .gd-peg {
  display: block; background: var(--gd-label); color: var(--gd-ink);
  padding: 0.55rem 1rem 0.5rem; border-radius: 0.6rem 0.6rem 0.2rem 0.2rem;
  font-weight: 700; font-size: 1.02rem; line-height: 1.25; text-align: center;
}
.site[data-look="gardener"] .gd-pegs li::after { content: ''; width: 0.9rem; height: 1.2rem; background: linear-gradient(#ffffff 35%, rgb(255 255 255 / 0)); clip-path: polygon(0 0, 100% 0, 100% 70%, 50% 100%, 0 70%); }
.site[data-look="gardener"] .gd-pegs li:nth-child(odd) { rotate: -1.5deg; }
.site[data-look="gardener"] .gd-pegs li:nth-child(3n) { rotate: 1.2deg; }

/* --- Services: the nursery bed of steeketiketten ----------------------------- */
.site[data-look="gardener"] .gd-services { background: var(--gd-leaf); padding-bottom: 0; }
.site[data-look="gardener"] .gd-services-head { display: grid; gap: 1rem clamp(2rem, 5vw, 5rem); align-items: end; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.site[data-look="gardener"] .gd-services-head :is(h1, h2) { margin: 0; }
@media (min-width: 64rem) { .site[data-look="gardener"] .gd-services-head { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="gardener"] .gd-services-intro .lead { margin-bottom: 1rem; }
.site[data-look="gardener"] .gd-key { margin: 0; font-size: 0.95rem; color: var(--gd-ink-soft); max-width: 36rem; }
.site[data-look="gardener"] .gd-key-marks { display: inline-flex; flex-wrap: wrap; gap: 0.3rem 1rem; margin-top: 0.4rem; font-weight: 700; }
.site[data-look="gardener"] :is(.gd-key-best, .gd-key-also)::before { content: ''; display: inline-block; width: 0.85rem; height: 0.85rem; margin-right: 0.4rem; vertical-align: -0.08rem; border-radius: 2px; background: var(--gd-name); }
.site[data-look="gardener"] .gd-key-also::before { background: #b5d0a4; }
.site[data-look="gardener"] .gd-bed { padding-bottom: clamp(3rem, 6vw, 5rem); }
.site[data-look="gardener"] .gd-labels {
  display: grid; gap: clamp(3rem, 5vw, 4rem) clamp(1.25rem, 2.2vw, 2rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr));
  padding-top: 1rem;
}
.site[data-look="gardener"] .gd-bed { overflow-x: clip; }
.site[data-look="gardener"] .gd-labels.is-few { grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 24rem)); }
.site[data-look="gardener"] .gd-label {
  --tilt: -2.5deg; position: relative; display: flex; flex-direction: column; align-items: center; padding-bottom: 0.6rem;
  /* Labels from different trays: white, cream and black plastic, a round
     or an arched top, pushed into the soil at different depths. */
  --tag: var(--gd-label); --tag-edge: var(--gd-line); --tag-name: var(--gd-name); --tag-soft: var(--gd-ink-soft); --tag-ink: var(--gd-ink);
  --cut: 1rem 1rem 0.3rem 0.3rem; --depth: 4.25rem;
}
.site[data-look="gardener"] .gd-label:nth-child(even) { --tilt: 2deg; --cut: 50% 50% 0.3rem 0.3rem / 1.5rem 1.5rem 0.3rem 0.3rem; --depth: 3.25rem; }
.site[data-look="gardener"] .gd-label:nth-child(3n) { --tilt: -1.2deg; --tag: var(--label-black); --tag-edge: #101812; --tag-name: var(--label-black-name); --tag-soft: var(--label-black-soft); --tag-ink: var(--label-black-ink); --depth: 5rem; }
.site[data-look="gardener"] .gd-label:nth-child(3n + 2) { --tag: var(--label-cream); --tag-edge: #d8cca8; --tag-name: var(--label-cream-name); --tag-soft: var(--label-cream-soft); --tag-ink: var(--label-cream-ink); }
.site[data-look="gardener"] .gd-label:nth-child(5n + 4) { --depth: 2.75rem; }
.site[data-look="gardener"] .gd-label-piece { flex: 1; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; transform-origin: 50% 100%; transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
/* One row of soil across the page under each row of labels (each label
   draws the whole row; the bed clips it at the page edge). */
.site[data-look="gardener"] .gd-label::after {
  content: ''; position: absolute; z-index: 1; left: -100vw; right: -100vw; bottom: 0; height: 2.4rem;
  background: var(--gd-soil-tex); -webkit-mask: var(--gd-edge); mask: var(--gd-edge);
}
.site[data-look="gardener"] .gd-label-card {
  position: relative; width: 100%; display: flex; flex-direction: column;
  background: var(--tag); color: var(--tag-ink);
  border-radius: var(--cut); padding: 1.5rem 1.35rem 1.25rem;
  /* The plastic's own edge and thickness, no soft drop shadow. */
  box-shadow: 0 0 0 1px var(--tag-edge), inset 0 -3px 0 rgb(0 0 0 / 0.07);
}
.site[data-look="gardener"] .gd-label .gd-stake { height: var(--depth); background: linear-gradient(90deg, color-mix(in srgb, var(--tag) 86%, #000), var(--tag) 30%, var(--tag) 65%, color-mix(in srgb, var(--tag) 88%, #000)); }
.site[data-look="gardener"] .gd-label:hover .gd-label-piece { transform: translateY(-0.7rem); }
.site[data-look="gardener"] .gd-label-card:has(.gd-sticker) { padding-top: 2.75rem; }
.site[data-look="gardener"] .gd-label-name {
  font-family: var(--font-body); font-weight: 800; letter-spacing: -0.01em; text-transform: none;
  font-size: clamp(1.35rem, 1.2rem + 0.4vw, 1.6rem); line-height: 1.12; color: var(--tag-name); margin: 0 0 0.55rem;
  overflow-wrap: break-word;
}
.site[data-look="gardener"] .gd-label-care { font-size: 1.0625rem; line-height: 1.5; color: var(--tag-soft); margin: 0 0 1rem; }
.site[data-look="gardener"] .gd-sticker {
  position: absolute; top: -0.95rem; right: 1rem; z-index: 1; margin: 0;
  display: grid; justify-items: center; min-width: 5.5rem; max-width: 7.5rem; padding: 0.45rem 0.6rem 0.5rem;
  background: var(--gd-sticker); color: var(--gd-ink); border-radius: 0.35rem; rotate: 4deg;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.12), 0 6px 10px -6px rgb(0 0 0 / 0.35);
  font-weight: 800; font-size: 1.2rem; line-height: 1.05; text-align: center; font-variant-numeric: tabular-nums;
}
.site[data-look="gardener"] .gd-sticker :is(.price-from, .price-unit) { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.site[data-look="gardener"] .gd-sticker .price-amount { white-space: nowrap; }
/* The month strip, as printed for flowering time on a nursery label. */
.site[data-look="gardener"] .gd-months { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2px; margin-top: auto; padding-top: 0.25rem; }
.site[data-look="gardener"] .gd-months span { display: block; padding: 0.22rem 0 0.18rem; text-align: center; font-size: 0.7rem; font-weight: 700; line-height: 1; background: #eef1e8; color: #4d5a51; }
.site[data-look="gardener"] .gd-months span:first-child { border-radius: 3px 0 0 3px; }
.site[data-look="gardener"] .gd-months span:last-child { border-radius: 0 3px 3px 0; }
.site[data-look="gardener"] .gd-months .is-best { background: var(--gd-name); color: #ffffff; }
.site[data-look="gardener"] .gd-months .is-also { background: #b5d0a4; color: var(--gd-ink); }

/* --- Gallery: a walk through the garden ------------------------------------ */
.site[data-look="gardener"] .s-gallery { background: var(--gd-hedge-tex); color: var(--gd-on-green); padding-bottom: 0; }
.site[data-look="gardener"] .gd-gallery-head :is(h1, h2) { color: var(--gd-on-green); margin-bottom: clamp(1.75rem, 4vw, 3rem); }
.site[data-look="gardener"] .s-gallery .gallery-items { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(10rem, 4rem + 13vw, 17rem); grid-auto-flow: dense; gap: 6px; }
.site[data-look="gardener"] .s-gallery .gallery-items li { position: relative; overflow: hidden; grid-column: span 4; grid-row: span 2; background: var(--gd-hedge-dark); }
.site[data-look="gardener"] .s-gallery .gallery-items img { width: 100%; height: 100%; max-width: none; object-fit: cover; transition: scale 0.8s ease; }
.site[data-look="gardener"] .s-gallery .gallery-items li:hover img { scale: 1.04; }
.site[data-look="gardener"] .gallery-items li:nth-child(6n + 1) { grid-column: span 7; }
.site[data-look="gardener"] .gallery-items li:nth-child(6n + 2), .site[data-look="gardener"] .gallery-items li:nth-child(6n + 3) { grid-column: span 5; grid-row: span 1; }
.site[data-look="gardener"] .s-gallery[data-count="2"] .gallery-items li { grid-column: span 6; }
.site[data-look="gardener"] .s-gallery[data-count="4"] .gallery-items li:nth-child(4) { grid-column: span 12; }
.site[data-look="gardener"] .s-gallery[data-count="5"] .gallery-items li:nth-child(n + 4) { grid-column: span 6; }
.site[data-look="gardener"] .s-gallery[data-count="many"] .gallery-items li:nth-child(n + 7) { grid-column: span 4; grid-row: span 1; }
/* The photo's description on a kwekerij hang tag: notched end, punched hole. */
.site[data-look="gardener"] .gd-hangtag {
  position: absolute; left: clamp(0.75rem, 2vw, 1.25rem); bottom: clamp(0.75rem, 2vw, 1.25rem); max-width: calc(100% - 2.5rem);
  padding: 0.4rem 0.8rem 0.4rem 1.75rem; background: var(--gd-label); color: var(--gd-ink);
  font-weight: 700; font-size: 0.92rem; line-height: 1.25;
  clip-path: polygon(0.75rem 0, 100% 0, 100% 100%, 0.75rem 100%, 0 50%);
  rotate: -2deg; transform-origin: 0 50%; transition: rotate 0.4s ease;
}
.site[data-look="gardener"] .gd-hangtag::before { content: ''; position: absolute; left: 0.7rem; top: 50%; width: 0.5rem; height: 0.5rem; margin-top: -0.25rem; border-radius: 50%; background: var(--gd-hedge); }
.site[data-look="gardener"] .s-gallery li:hover .gd-hangtag { rotate: 1deg; }

/* --- About: the drawing table ----------------------------------------------- */
.site[data-look="gardener"] .gd-about { background: var(--gd-grid); padding-top: 0; }
.site[data-look="gardener"] .gd-about:not(.has-photo) { padding-top: var(--section-pad); }
.site[data-look="gardener"] .gd-about-photo { height: clamp(15rem, 6rem + 30vw, 36rem); overflow: hidden; }
.site[data-look="gardener"] .gd-about-img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.site[data-look="gardener"] .gd-about-inner { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.site[data-look="gardener"] .gd-about.has-photo .gd-about-inner { padding-top: clamp(2.5rem, 5vw, 4rem); }
@media (min-width: 64rem) {
  .site[data-look="gardener"] .gd-about-inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .site[data-look="gardener"] .gd-about.has-photo .gd-plan { margin-top: clamp(-14rem, -12vw, -6rem); }
}
.site[data-look="gardener"] .gd-about-text p { font-size: clamp(1.06rem, 1rem + 0.25vw, 1.2rem); line-height: 1.6; max-width: 34rem; }
.site[data-look="gardener"] .gd-about-text p:first-of-type { font-size: clamp(1.2rem, 1.05rem + 0.55vw, 1.5rem); line-height: 1.45; color: var(--gd-ink); }
.site[data-look="gardener"] .gd-plan { position: relative; margin: 0; background: #ffffff; padding: clamp(0.75rem, 2vw, 1.5rem); box-shadow: 0 0 0 1px #c6cfbd, 0 40px 60px -40px rgb(24 35 27 / 0.55); }
.site[data-look="gardener"] .gd-plan-drawing { display: block; width: 100%; height: auto; font-family: var(--font-body); }
.site[data-look="gardener"] .gd-plan-drawing :is(.pl-edge) { fill: none; stroke: var(--gd-plan-ink); stroke-width: 1.5; }
.site[data-look="gardener"] .gd-plan-drawing pattern :is(line, path) { stroke: var(--gd-plan-ink); stroke-width: 0.7; fill: none; }
.site[data-look="gardener"] .gd-plan-drawing .pl-house { stroke: var(--gd-plan-ink); stroke-width: 1.6; }
.site[data-look="gardener"] .gd-plan-drawing .pl-terrace { stroke: var(--gd-plan-ink); stroke-width: 1.2; }
.site[data-look="gardener"] .gd-plan-drawing .pl-lawn { stroke: var(--gd-plan-ink); stroke-width: 1; }
.site[data-look="gardener"] .gd-plan-drawing .pl-hedge { stroke: var(--gd-plan-ink); stroke-width: 1.1; }
.site[data-look="gardener"] .gd-plan-drawing .pl-tree { fill: rgb(47 107 58 / 0.12); stroke: var(--gd-plan-ink); stroke-width: 1.2; }
.site[data-look="gardener"] .gd-plan-drawing .pl-trunk { fill: var(--gd-plan-ink); }
.site[data-look="gardener"] .gd-plan-drawing .pl-group circle { fill: rgb(47 107 58 / 0.1); stroke: var(--gd-plan-ink); stroke-width: 0.8; }
.site[data-look="gardener"] .gd-plan-drawing .pl-group:nth-of-type(odd) circle { fill: rgb(122 92 160 / 0.14); }
.site[data-look="gardener"] .gd-plan-drawing circle.pl-code-ring { fill: #ffffff; stroke: var(--gd-plan-ink); stroke-width: 1; }
.site[data-look="gardener"] .gd-plan-drawing .pl-code { font-size: 10px; font-weight: 800; text-anchor: middle; fill: var(--gd-plan-ink); }
.site[data-look="gardener"] .gd-plan-drawing .pl-label { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; text-anchor: middle; fill: #4b5a4f; }
.site[data-look="gardener"] .gd-plan-drawing .pl-label-small { font-size: 9px; }
.site[data-look="gardener"] .gd-plan-drawing .pl-north path { fill: var(--gd-plan-ink); }
.site[data-look="gardener"] .gd-plan-drawing :is(.pl-north, .pl-scale) text { font-size: 10px; font-weight: 700; text-anchor: middle; fill: var(--gd-plan-ink); }
.site[data-look="gardener"] .gd-plan-drawing .pl-scale path { stroke: var(--gd-plan-ink); stroke-width: 1.2; fill: none; }
.site[data-look="gardener"] .gd-plan-foot { display: grid; gap: 1rem 1.5rem; margin-top: 1rem; align-items: start; }
@media (min-width: 40rem) { .site[data-look="gardener"] .gd-plan-foot { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="gardener"] .gd-plan-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; font-size: 0.92rem; line-height: 1.25; }
.site[data-look="gardener"] .gd-plan-legend li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.5rem; align-items: start; }
.site[data-look="gardener"] .gd-plan-legend li > span:last-child { display: grid; }
.site[data-look="gardener"] .gd-plan-legend i { font-weight: 700; }
.site[data-look="gardener"] .gd-plan-common { color: var(--gd-ink-soft); }
.site[data-look="gardener"] .gd-plan-code { display: inline-grid; place-items: center; width: 1.35rem; height: 1.35rem; border: 1px solid var(--gd-plan-ink); border-radius: 50%; font-size: 0.72rem; font-weight: 800; vertical-align: 0.05rem; }
.site[data-look="gardener"] .gd-cartouche { margin: 0; border: 1.5px solid var(--gd-plan-ink); font-size: 0.9rem; line-height: 1.3; }
.site[data-look="gardener"] .gd-cartouche div { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); }
.site[data-look="gardener"] .gd-cartouche div + div { border-top: 1px solid var(--gd-plan-ink); }
.site[data-look="gardener"] .gd-cartouche dt { padding: 0.35rem 0.55rem; border-right: 1px solid var(--gd-plan-ink); font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gd-ink-soft); }
.site[data-look="gardener"] .gd-cartouche dd { margin: 0; padding: 0.35rem 0.55rem; font-weight: 700; overflow-wrap: break-word; hyphens: auto; font-variant-numeric: tabular-nums; }
.site[data-look="gardener"] .gd-cartouche div:first-child dd { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: 1.1rem; }

/* --- Reviews: set large on the mown lawn ------------------------------------ */
.site[data-look="gardener"] .gd-reviews {
  --text: var(--gd-on-green); color: var(--gd-on-green);
  background:
    radial-gradient(circle at 30% 40%, rgb(255 255 255 / 0.05) 0 1px, transparent 1.6px) 0 0 / 7px 9px,
    radial-gradient(circle at 70% 70%, rgb(0 0 0 / 0.08) 0 1.2px, transparent 1.8px) 3px 2px / 9px 8px,
    repeating-linear-gradient(90deg, var(--gd-lawn-a) 0 clamp(4.5rem, 10vw, 9rem), var(--gd-lawn-b) clamp(4.5rem, 10vw, 9rem) clamp(9rem, 20vw, 18rem));
  padding-block: clamp(4rem, 9vw, 8rem);
}
.site[data-look="gardener"] .gd-reviews :is(h1, h2) { color: var(--gd-on-green); margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.site[data-look="gardener"] .gd-quotes { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem); }
@media (min-width: 52rem) { .site[data-look="gardener"] .gd-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site[data-look="gardener"] .gd-quotes > li:first-child { grid-column: 1 / -1; } }
.site[data-look="gardener"] .gd-quotes figure { margin: 0; }
.site[data-look="gardener"] .gd-quotes blockquote { margin: 0; }
.site[data-look="gardener"] .gd-quotes blockquote p { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1.45rem, 1.15rem + 1.2vw, 2.2rem); line-height: 1.22; letter-spacing: -0.01em; margin: 0 0 1.1rem; text-indent: -0.4em; }
.site[data-look="gardener"] .gd-quotes > li:first-child blockquote p { font-size: clamp(1.8rem, 1.1rem + 2.9vw, 4rem); line-height: 1.1; max-width: 24em; }
.site[data-look="gardener"] .gd-quotes blockquote p::before { content: '„'; }
.site[data-look="gardener"] .gd-quotes blockquote p::after { content: '”'; }
.site[data-look="gardener"] .gd-quotes figcaption {
  display: inline-block; padding: 0.3rem 0.8rem 0.3rem 0.7rem; background: var(--gd-label); color: var(--gd-ink);
  border-radius: 0.3rem; font-weight: 700; font-size: 0.98rem;
}

/* --- Werkgebied: stepping stones through the gravel ------------------------- */
.site[data-look="gardener"] .gd-area { background: var(--gd-gravel-tex); color: var(--gd-ink); padding-block: clamp(4rem, 8vw, 7rem); overflow: clip; }
.site[data-look="gardener"] .gd-area-inner { display: grid; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
@media (min-width: 64rem) { .site[data-look="gardener"] .gd-area-inner { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); } }
/* The text on the lawn's edge, behind a strip of wooden edging. */
.site[data-look="gardener"] .gd-area-text { position: relative; background: var(--gd-paper); box-shadow: 0 0 0 100vmax var(--gd-paper); clip-path: inset(-100vmax -100vmax calc(-1 * clamp(2rem, 5vw, 4rem) + 0.5rem) -100vmax); padding-bottom: 0.5rem; }
.site[data-look="gardener"] .gd-area-text::after { content: ''; position: absolute; left: -100vmax; right: -100vmax; bottom: calc(-1 * clamp(2rem, 5vw, 4rem) + 0.5rem); height: 0.6rem; background: linear-gradient(#8a6a4a, #5f4630); }
@media (min-width: 64rem) {
  .site[data-look="gardener"] .gd-area-text { clip-path: inset(-100vmax calc(-1 * clamp(2rem, 5vw, 4rem) / 2) -100vmax -100vmax); padding-bottom: 0; }
  .site[data-look="gardener"] .gd-area-text::after { left: auto; right: calc(-1 * clamp(2rem, 5vw, 4rem) / 2); top: -100vmax; bottom: -100vmax; width: 0.6rem; height: auto; background: linear-gradient(90deg, #8a6a4a, #5f4630); }
}
.site[data-look="gardener"] .gd-area-text .lead { margin: 0; color: var(--gd-ink); }
.site[data-look="gardener"] .gd-area-text :is(h1, h2) { font-size: calc(clamp(2.4rem, 1.6rem + 3vw, 4.5rem) * var(--heading-scale, 1)); }
.site[data-look="gardener"] .gd-stones { display: flex; flex-wrap: wrap; gap: 0.6rem clamp(0.9rem, 1.8vw, 1.5rem); align-items: flex-start; }
.site[data-look="gardener"] .gd-stone { filter: drop-shadow(0 3px 0 rgb(70 62 50 / 0.35)) drop-shadow(0 8px 10px rgb(40 32 20 / 0.3)); }
.site[data-look="gardener"] .gd-stone span {
  --shape: polygon(4% 18%, 22% 3%, 51% 0, 80% 5%, 97% 22%, 100% 58%, 90% 88%, 62% 100%, 30% 97%, 8% 86%, 0 52%);
  display: block; clip-path: var(--shape);
  padding: clamp(1rem, 2vw, 1.5rem) clamp(1.4rem, 2.6vw, 2.25rem);
  background: linear-gradient(160deg, var(--stone-hi, #d8d6ce), var(--stone, #c0bdb3) 55%, var(--stone-lo, #aeaba1));
  font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1.15rem, 1rem + 0.7vw, 1.65rem); line-height: 1.1; text-align: center;
  color: var(--gd-ink);
}
.site[data-look="gardener"] .gd-stone:nth-child(4n + 2) { margin-top: 1.4rem; --stone-hi: #cfd3d2; --stone: #b6bcbc; --stone-lo: #a3aaab; }
.site[data-look="gardener"] .gd-stone:nth-child(4n + 2) span { --shape: polygon(0 30%, 12% 6%, 45% 0, 76% 3%, 96% 16%, 100% 50%, 94% 84%, 70% 98%, 36% 100%, 10% 92%, 2% 68%); }
.site[data-look="gardener"] .gd-stone:nth-child(4n + 3) { margin-top: 0.4rem; --stone-hi: #ddd4c2; --stone: #c9bea8; --stone-lo: #b8ac94; }
.site[data-look="gardener"] .gd-stone:nth-child(4n + 3) span { --shape: polygon(6% 10%, 34% 0, 68% 4%, 92% 0, 100% 34%, 97% 72%, 84% 96%, 50% 100%, 18% 94%, 0 70%, 2% 36%); }
.site[data-look="gardener"] .gd-stone:nth-child(4n) { margin-top: 1rem; }
.site[data-look="gardener"] .gd-stone:nth-child(4n) span { --shape: polygon(0 20%, 20% 0, 58% 6%, 88% 0, 100% 28%, 98% 66%, 86% 100%, 48% 94%, 14% 100%, 0 76%); }
.site[data-look="gardener"] .gd-stone.is-home span { font-size: clamp(1.45rem, 1.1rem + 1.5vw, 2.5rem); padding: clamp(1.2rem, 2.4vw, 1.9rem) clamp(1.8rem, 3.6vw, 3.2rem); }

/* --- Questions: on label paper, each answer under a row of plants ----------- */
.site[data-look="gardener"] .s-faq { background: var(--gd-label); }
@media (min-width: 64rem) {
  .site[data-look="gardener"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="gardener"] .s-faq > .wrap > :is(h1, h2) { position: sticky; top: 2rem; }
}
.site[data-look="gardener"] .faq-items { max-width: none; margin-top: 0; }
.site[data-look="gardener"] .faq-items :is(details, dl > div) {
  border: 0; padding-top: 0.25rem;
  background: radial-gradient(circle, var(--gd-name) 0 3px, transparent 3.5px) 0 0 / 1.1rem 0.5rem repeat-x;
}
.site[data-look="gardener"] .faq-items details:first-child { border-top: 0; }
.site[data-look="gardener"] .faq-items summary { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem); line-height: 1.2; padding-block: 1.1rem; min-height: 4rem; }
.site[data-look="gardener"] .faq-items summary::after {
  content: ''; width: 2.2rem; height: 2.2rem; border-radius: 50%; border: 1.5px solid var(--gd-name);
  background: linear-gradient(var(--gd-name), var(--gd-name)) center / 0.9rem 2px no-repeat, linear-gradient(var(--gd-name), var(--gd-name)) center / 2px 0.9rem no-repeat;
  transition: transform 0.3s ease;
}
.site[data-look="gardener"] .faq-items details[open] summary::after { content: ''; transform: rotate(45deg); }
.site[data-look="gardener"] .faq-items summary:hover { color: var(--gd-name); }
.site[data-look="gardener"] .faq-items details p, .site[data-look="gardener"] .faq-items dd { color: var(--gd-ink-soft); font-size: 1.0625rem; max-width: 40rem; }
.site[data-look="gardener"] .faq-items dt { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.6rem); padding-top: 1.1rem; }
.site[data-look="gardener"] .faq-items dd { margin-bottom: 1.25rem; }

/* --- Hours: the hang tag ------------------------------------------------------ */
.site[data-look="gardener"] .s-hours { background: var(--gd-leaf); }
@media (min-width: 52rem) { .site[data-look="gardener"] .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 26rem); align-items: center; } }
.site[data-look="gardener"] .hours-call { font-family: var(--font-heading); font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); }
.site[data-look="gardener"] .hours-card {
  position: relative; max-width: 26rem; width: 100%; justify-self: center;
  background: var(--gd-label); color: var(--gd-ink); padding: 3.6rem clamp(1.25rem, 3vw, 2rem) 1.5rem;
  border-radius: 1.3rem 1.3rem 0.4rem 0.4rem; rotate: -1.5deg;
  box-shadow: 0 0 0 1px var(--gd-line), 0 30px 40px -30px rgb(24 35 27 / 0.5);
}
.site[data-look="gardener"] .hours-card::before { content: ''; position: absolute; top: 1.2rem; left: 50%; width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; border-radius: 50%; background: var(--gd-leaf); box-shadow: inset 0 0 0 2px #a8b49e; }
.site[data-look="gardener"] .hours-card::after { content: ''; position: absolute; bottom: calc(100% - 1.75rem); left: 50%; width: 2px; height: 4rem; background: #8a7a5c; transform-origin: bottom; rotate: 12deg; }
.site[data-look="gardener"] .hours-table th, .site[data-look="gardener"] .hours-table td { border-bottom-color: var(--gd-line); font-size: 1.05rem; }
.site[data-look="gardener"] .hours-table td { white-space: nowrap; }
.site[data-look="gardener"] .hours-table th::before { background: var(--gd-name) !important; }
.site[data-look="gardener"] .hours-table th::after { background: var(--gd-name) !important; color: #ffffff !important; }
.site[data-look="gardener"] .hours-place { font-size: 1.0625rem; color: var(--gd-ink-soft); }
.site[data-look="gardener"] .hours-table th { white-space: normal; }

/* --- Call to action: in front of the clipped hedge ---------------------------- */
.site[data-look="gardener"] .gd-cta { position: relative; isolation: isolate; overflow: hidden; background: var(--gd-hedge-tex); padding-block: clamp(4rem, 10vw, 9rem); }
.site[data-look="gardener"] .gd-cta-img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 35% 50%; }
.site[data-look="gardener"] .gd-cta-card { max-width: 40rem; background: var(--gd-label); color: var(--gd-ink); padding: clamp(1.5rem, 4vw, 3rem); border-radius: 1.3rem 1.3rem 0.35rem 0.35rem; }
.site[data-look="gardener"] .gd-cta-card :is(h1, h2) { font-size: calc(clamp(2rem, 1.4rem + 2.4vw, 3.6rem) * var(--heading-scale, 1)); }
.site[data-look="gardener"] .gd-cta-card p { font-size: var(--fs-lead); color: var(--gd-ink-soft); }
.site[data-look="gardener"] .gd-cta-card .btn { min-height: 52px; }

/* --- Contact: on the soil, the request on a white sheet -------------------- */
.site[data-look="gardener"] .s-contact {
  --text: var(--gd-on-soil); --muted: var(--gd-on-soil-soft); --border: rgb(244 239 230 / 0.25); --ink-line: 1.5px solid rgb(244 239 230 / 0.6);
  background: var(--gd-soil-tex); color: var(--gd-on-soil); padding-block: clamp(4rem, 8vw, 7rem) clamp(4rem, 7vw, 6rem);
}
.site[data-look="gardener"] .s-contact .contact-details > :is(h1, h2) { color: var(--gd-on-soil); }
.site[data-look="gardener"] .s-contact .lead { color: var(--gd-on-soil-soft); }
.site[data-look="gardener"] .s-contact .contact-value { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.6rem); }
.site[data-look="gardener"] .s-contact .contact-list li:first-child .contact-value { font-size: clamp(2rem, 1.2rem + 3.2vw, 4rem); }
.site[data-look="gardener"] .s-contact .contact-label { font-weight: 700; letter-spacing: 0.04em; }
.site[data-look="gardener"] :is(.contact-form, .request-form) {
  --text: var(--gd-ink); --muted: var(--gd-ink-soft); --bg: var(--gd-label); --surface: var(--gd-leaf);
  color: var(--gd-ink); background: var(--gd-label); border: 0; border-radius: 1.3rem 1.3rem 0.35rem 0.35rem;
  padding: clamp(1.25rem, 3.5vw, 2.5rem);
  box-shadow: 0 0 0 1px var(--gd-line), 0 40px 60px -40px rgb(0 0 0 / 0.6);
}
.site[data-look="gardener"] :is(.contact-form, .request-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 0; border-bottom: 2px solid #7d8a80; border-radius: 0; background: var(--gd-paper); }
.site[data-look="gardener"] :is(.contact-form, .request-form) :is(input, textarea, select):focus-visible { border-bottom-color: var(--gd-name); outline: 3px solid var(--gd-name); outline-offset: 1px; }
.site[data-look="gardener"] :is(.contact-form, .request-form) .btn-primary { min-height: 54px; }
.site[data-look="gardener"] .s-request { background: var(--gd-grid); }
.site[data-look="gardener"] .s-request .request-form { box-shadow: 0 0 0 1px #c6cfbd, 0 40px 60px -40px rgb(24 35 27 / 0.45); }

/* --- Booking: the plants on the bench, each a label line --------------------- */
.site[data-look="gardener"] .s-booking { background: var(--gd-leaf); }
.site[data-look="gardener"] .booking-services { border-top: 0; display: grid; gap: 0.6rem; }
.site[data-look="gardener"] .booking-services li { border: 0; }
.site[data-look="gardener"] .booking-services a { background: var(--gd-label); padding: 0.9rem 1.2rem; border-radius: 0.8rem 0.8rem 0.25rem 0.25rem; box-shadow: 0 0 0 1px var(--gd-line); transition: transform 0.25s ease; color: var(--gd-ink); }
.site[data-look="gardener"] .booking-services a:hover { transform: translateY(-3px); }

/* --- Footer: the clipped hedge ------------------------------------------------- */
.site[data-look="gardener"] .gd-footer { --deep: var(--gd-hedge); position: relative; z-index: 1; background: var(--gd-hedge-tex); padding-top: clamp(3rem, 6vw, 5rem); }
.site[data-look="gardener"] .gd-hedge-top { position: absolute; left: 0; right: 0; bottom: calc(100% - 1px); height: 1.1rem; background: var(--gd-hedge-tex); -webkit-mask: var(--gd-edge); mask: var(--gd-edge); }
.site[data-look="gardener"] .gd-footer-name { font-family: var(--font-heading); font-weight: var(--heading-weight); font-size: calc(clamp(2.2rem, 1.2rem + 4.4vw, 6.5rem) * var(--heading-scale, 1)); line-height: 0.98; letter-spacing: -0.025em; margin: 0 0 clamp(2rem, 4vw, 3rem); color: var(--gd-on-green); overflow-wrap: break-word; hyphens: auto; max-width: 16em; }
.site[data-look="gardener"] .gd-footer-cols { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); padding-bottom: 2.5rem; }
.site[data-look="gardener"] .gd-footer .footer-title { font-size: 0.85rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--gd-on-green-soft); margin-bottom: 0.6rem; }
.site[data-look="gardener"] .gd-footer .footer-col ul { display: grid; gap: 0.35rem; }
.site[data-look="gardener"] .gd-footer .footer-col a { color: var(--gd-on-green); }
.site[data-look="gardener"] .gd-footer .footer-col li { color: var(--gd-on-green); overflow-wrap: anywhere; font-size: 1.0625rem; }
.site[data-look="gardener"] .gd-footer .footer-bottom { border-top: 1px solid rgb(240 244 234 / 0.2); }

/* --- Quick bar on phones: a strip of label --------------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="gardener"] .quickbar { --on-deep: var(--gd-ink); background: var(--gd-label); border-top: 4px solid var(--gd-soil); }
  .site[data-look="gardener"] .quick { font-weight: 800; font-size: 1.05rem; }
  .site[data-look="gardener"] .quick-primary { background: var(--gd-name); color: #ffffff; }
}

/* --- Phones ------------------------------------------------------------------- */
@media (max-width: 40rem) {
  .site[data-look="gardener"] .gd-hero { --soil-h: 3.75rem; }
  .site[data-look="gardener"] .gd-hero-inner { padding-top: 5.5rem; }
  .site[data-look="gardener"] .gd-tag-card { border-radius: 1.1rem 1.1rem 0.3rem 0.3rem; }
  .site[data-look="gardener"] .gd-tag-card::before { top: 0.85rem; right: 0.9rem; width: 0.7rem; height: 0.7rem; }
  .site[data-look="gardener"] .gd-tag-imprint { font-size: 0.8rem; margin-right: 1.5rem; }
  .site[data-look="gardener"] .gd-hero .actions { gap: 0.25rem 1rem; }
  .site[data-look="gardener"] .gd-hero .btn { width: 100%; }
  .site[data-look="gardener"] .s-gallery .gallery-items { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 8.25rem; gap: 4px; }
  .site[data-look="gardener"] .s-gallery .gallery-items li { grid-column: span 1 !important; grid-row: span 1 !important; }
  .site[data-look="gardener"] .s-gallery .gallery-items li:nth-child(3n + 1) { grid-column: span 2 !important; grid-row: span 2 !important; }
  .site[data-look="gardener"] .gd-hangtag { font-size: 0.8rem; padding-left: 1.5rem; }
  .site[data-look="gardener"] .s-gallery li:not(:nth-child(3n + 1)) .gd-hangtag { display: none; }
  .site[data-look="gardener"] .gd-cartouche div { grid-template-columns: 5.5rem minmax(0, 1fr); }
  .site[data-look="gardener"] .gd-pegs { gap: 1rem 0.75rem; }
  .site[data-look="gardener"] .gd-peg { font-size: 0.95rem; padding: 0.45rem 0.8rem; }
  /* Phones: the labels stand in the bed left and right of a path, shorter
     stakes, less soil between them. */
  .site[data-look="gardener"] .gd-labels { gap: 1.25rem; padding-top: 0.5rem; }
  .site[data-look="gardener"] .gd-label { width: 88%; padding-bottom: 0.3rem; }
  .site[data-look="gardener"] .gd-label:nth-child(even) { justify-self: end; }
  .site[data-look="gardener"] .gd-label .gd-stake { height: calc(var(--depth) * 0.55); width: 2.25rem; }
  .site[data-look="gardener"] .gd-label::after { height: 1.6rem; }
  .site[data-look="gardener"] .gd-label-card { padding: 1.2rem 1.1rem 0.6rem; }
  .site[data-look="gardener"] .gd-label-card:has(.gd-sticker) { padding-top: 2.3rem; }
  .site[data-look="gardener"] .gd-label-care { margin-bottom: 0.5rem; }
  .site[data-look="gardener"] .gd-bed { padding-bottom: 2.5rem; }
  .site[data-look="gardener"] .gd-plan-legend { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.45rem 0.75rem; }
  .site[data-look="gardener"] .gd-quotes { gap: 2rem; }
  .site[data-look="gardener"] .gd-quotes > li:not(:first-child) blockquote p { font-size: 1.25rem; }
}

/* --- Life: labels rise from the soil as they come into view ---------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    /* Never hidden before they move: a page shown without scrolling (the
       gallery frames) sees them a little crooked, never missing. */
    .site[data-look="gardener"] .gd-label-piece { animation: gd-straighten linear forwards; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    .site[data-look="gardener"] .gd-stone { animation: gd-settle linear forwards; animation-timeline: view(); animation-range: entry 0% cover 35%; }
  }
}
@keyframes gd-straighten { from { rotate: var(--tilt, -2deg); } to { rotate: 0deg; } }
@keyframes gd-settle { from { scale: 0.92; } to { scale: 1; } }

/* ---- looks/groomer.css ---- */
/* The groomer look: everything here is scoped to .site[data-look="groomer"]. Appended after base.css (bun run --filter @platform/sections css).

   The trimsalon itself: rinse blue of the wash room, the clipper-blue price
   chart that hangs behind the counter, the trimkaart (a manila index card
   with blue rules), the steel comb, the door with its hours sticker. Dogs
   are the photography. No paw prints, no bones. */

.site[data-look="groomer"] {
  --g-ink: #23211d;
  --g-towel: #ffffff;
  --g-rinse: #e8f0f7;
  --g-rinse-deep: #d3e1ee;
  --g-clipper: #2c5aa0;
  --g-clipper-deep: #234a86;
  --g-on-clipper: #ffffff;
  --g-clipper-muted: #dbe5f3;
  --g-manila: #f1e2b8;
  --g-manila-line: #a8956a;
  --g-card-rule: #a9bdd6;
  --g-card-red: #c4553f;
  --g-steel: #9aa2a9;
  --g-glass: #262b30;
  --g-on-glass: #ffffff;
  --g-glass-muted: #b8c0c8;
  --g-muted: #4f4b44;
  --g-mat: #262a28;
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.45vw, 1.4rem);
  --fs-h2: clamp(2.4rem, 1.5rem + 3.4vw, 4.6rem);
  --section-pad: clamp(4rem, 9vw, 8rem);
  --muted: var(--g-muted);
  background: var(--g-towel);
}
@media (max-width: 40rem) { .site[data-look="groomer"] { --fs-base: 1.0625rem; } }
.site[data-look="groomer"] main > .s + .s { border-top: 0; }
.site[data-look="groomer"] :is(h1, h2) { letter-spacing: -0.025em; line-height: 0.98; }
.site[data-look="groomer"] :is(p, li, dd, td, th, figcaption) { hyphens: auto; }

/* --- Buttons: the button rises off the table on hover. -------------------- */
.site[data-look="groomer"] .btn { border-radius: 999px; transition: transform 160ms ease, box-shadow 160ms ease; }
.site[data-look="groomer"] .btn:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 4px 0 var(--g-ink); }
.site[data-look="groomer"] .btn:active { transform: none; box-shadow: none; }
.site[data-look="groomer"] .cta-alt { text-decoration-thickness: 2px; }

/* --- Header ------------------------------------------------------------- */
.site[data-look="groomer"] .site-header { background: var(--g-towel); border-bottom: 1px solid var(--g-rinse-deep); }
.site[data-look="groomer"] .brand { font-size: clamp(1.25rem, 1.05rem + 0.6vw, 1.6rem); letter-spacing: -0.02em; }
.site[data-look="groomer"] .site-header nav a { font-weight: 400; }

/* --- Hero: the dog, large; the trimkaart lying on the photo. ------------- */
.site[data-look="groomer"] .g-hero { padding: 0; background: var(--g-rinse); }
.site[data-look="groomer"] .g-hero-grid { display: grid; }
.site[data-look="groomer"] .g-hero h1, .site[data-look="groomer"] .g-hero h2 {
  font-size: clamp(2.7rem, 1.2rem + 5vw, 7.25rem); line-height: 0.94; letter-spacing: -0.035em; max-width: 11ch; margin: 0 0 0.3em; text-wrap: balance;
}
.site[data-look="groomer"] .g-hero.g-len-l :is(h1, h2) { font-size: clamp(2.4rem, 1.2rem + 3.8vw, 5.6rem); max-width: 14ch; }
.site[data-look="groomer"] .g-hero.g-len-xl :is(h1, h2) { font-size: clamp(2.05rem, 1.1rem + 2.9vw, 4.3rem); max-width: 18ch; line-height: 0.98; }
.site[data-look="groomer"] .g-lead { font-size: var(--fs-lead); line-height: 1.45; max-width: 31rem; margin: 0; hyphens: manual; }
.site[data-look="groomer"] .g-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="groomer"] .g-hero .btn { min-height: 3.6rem; padding-inline: 1.9rem; font-size: 1.15rem; }
.site[data-look="groomer"] .g-hero-photo { position: relative; overflow: hidden; background: var(--g-rinse-deep); }
.site[data-look="groomer"] .g-hero-img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-hero-grid {
    grid-template-columns: minmax(var(--gap), 1fr) minmax(0, calc(var(--wrap) * 0.53)) minmax(0, calc(var(--wrap) * 0.47)) minmax(var(--gap), 1fr);
    grid-template-rows: 1fr auto;
    min-height: min(calc(calc(100 * var(--raam-vh)) - 4.5rem), 62rem);
  }
  .site[data-look="groomer"] .g-hero-copy { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: clamp(3rem, calc(7 * var(--raam-vh)), 5rem) clamp(2rem, 4vw, 4rem) clamp(3rem, calc(7 * var(--raam-vh)), 5rem) 0; }
  .site[data-look="groomer"] .g-hero-photo { grid-column: 3 / 5; grid-row: 1 / span 2; }
  .site[data-look="groomer"] .g-hero-img { position: absolute; inset: 0; }
  .site[data-look="groomer"] .g-hero.has-photo { overflow: visible; z-index: 2; }
  .site[data-look="groomer"] .g-hero.has-photo + .s:not(.g-about) { padding-top: calc(var(--section-pad) + 3rem); }
  /* The card lies across the seam between the hero and the next band. */
  .site[data-look="groomer"] .g-hero-card { grid-column: 3; grid-row: 2; z-index: 1; align-self: end; justify-self: start; width: min(100%, 25rem); margin: 0 0 0 clamp(-3.5rem, -3vw, -1rem); translate: 0 clamp(2rem, 5vw, 4.5rem); }
  /* No photo: the card stands beside the headline on the rinse wall. */
  .site[data-look="groomer"] .g-hero.no-photo .g-hero-grid { min-height: 0; grid-template-rows: auto; }
  .site[data-look="groomer"] .g-hero.no-photo .g-hero-copy { grid-row: 1; padding-block: clamp(4rem, calc(10 * var(--raam-vh)), 7rem); }
  .site[data-look="groomer"] .g-hero.no-photo .g-hero-card { grid-row: 1; align-self: center; margin: 0; justify-self: end; }
}
@media (max-width: 51.99rem) {
  .site[data-look="groomer"] .g-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="groomer"] .g-hero-photo { order: -1; height: clamp(13rem, calc(32 * var(--raam-vh)), 30rem); }
  .site[data-look="groomer"] .g-hero h1, .site[data-look="groomer"] .g-hero h2 { max-width: none; }
  .site[data-look="groomer"] .g-hero-copy { padding: clamp(1.5rem, 5vw, 2.5rem) var(--gap) 2rem; }
  .site[data-look="groomer"] .g-hero-card { padding: 0 var(--gap) 2.5rem; max-width: 30rem; }
  .site[data-look="groomer"] .g-hero.has-photo .g-hero-card { margin-top: 0.5rem; }
}
@media (min-width: 40rem) and (max-width: 51.99rem) {
  .site[data-look="groomer"] .g-hero-photo { height: clamp(16rem, calc(34 * var(--raam-vh)), 30rem); }
  .site[data-look="groomer"] .g-lead { max-width: 40rem; }
}

/* The trimkaart: a manila index card, red top rule, blue rules. */
.site[data-look="groomer"] .g-card {
  --text: var(--on-manila); --muted: var(--manila-muted);
  position: relative; background: var(--g-manila); color: var(--on-manila);
  padding: 0.9rem clamp(1.1rem, 2.5vw, 1.6rem) 1.2rem; border-radius: 3px;
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.08), 0 18px 30px -18px rgb(35 33 29 / 0.55);
}
.site[data-look="groomer"] .g-card-head { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 0.35rem; padding-bottom: 0.45rem; border-bottom: 2px solid var(--g-card-red); font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--manila-muted); }
.site[data-look="groomer"] .g-card-no { letter-spacing: 0.04em; }
.site[data-look="groomer"] .g-card-fields { margin: 0; }
.site[data-look="groomer"] .g-card-fields > div { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); align-items: baseline; gap: 0.6rem; padding: 0.4rem 0 0.3rem; border-bottom: 1px solid var(--g-card-rule); }
.site[data-look="groomer"] .g-card-fields dt, .site[data-look="groomer"] .g-k { font-family: var(--font-figures); font-size: 0.74rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--manila-muted); }
.site[data-look="groomer"] .g-card-fields dd { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.site[data-look="groomer"] .g-card-fields dd a { text-decoration: none; }
.site[data-look="groomer"] .g-card-fields dd a:hover { text-decoration: underline; }
.site[data-look="groomer"] .g-card-name dd { font-size: clamp(1.45rem, 1.2rem + 0.9vw, 1.9rem); line-height: 1.05; letter-spacing: -0.02em; }
.site[data-look="groomer"] .g-card-blank p { display: grid; grid-template-columns: 5.4rem minmax(0, 1fr); gap: 0.6rem; align-items: baseline; margin: 0; padding: 0.55rem 0 0.35rem; border-bottom: 1px solid var(--g-card-rule); }
.site[data-look="groomer"] .g-line { display: block; }
.site[data-look="groomer"] .g-opts { display: flex; flex-wrap: wrap; gap: 0.15rem 0.9rem; font-family: var(--font-figures); font-size: 0.86rem; color: var(--on-manila); }

/* --- Prices: the chart that hangs behind the counter, on clipper blue. --- */
.site[data-look="groomer"] .g-prices { --text: var(--g-on-clipper); --muted: var(--g-clipper-muted); background: var(--g-clipper); color: var(--g-on-clipper); }
.site[data-look="groomer"] .g-prices-inner { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 5rem); }
@media (min-width: 72rem) {
  .site[data-look="groomer"] .g-prices.is-matrix .g-prices-inner, .site[data-look="groomer"] .g-prices.is-list .g-prices-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); align-items: start; }
  .site[data-look="groomer"] .g-prices-head { position: sticky; top: 7rem; }
}
.site[data-look="groomer"] .g-prices-head h1, .site[data-look="groomer"] .g-prices-head h2 { font-size: var(--fs-h2); margin-bottom: 0.4em; }
.site[data-look="groomer"] .g-intro { font-size: var(--fs-lead); line-height: 1.5; margin: 0; max-width: 30rem; }
.site[data-look="groomer"] .g-chart {
  --text: var(--g-ink); --muted: var(--g-muted); --border: #d5dbe3;
  position: relative; background: var(--g-towel); color: var(--g-ink);
  border-radius: 14px; padding: clamp(1.75rem, 4vw, 3rem) clamp(1rem, 3.5vw, 2.75rem) clamp(1.25rem, 3vw, 2.25rem);
  box-shadow: 0 2px 0 rgb(0 0 0 / 0.1), 0 40px 60px -40px rgb(10 25 50 / 0.7);
}
.site[data-look="groomer"] .g-prices-cta { margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; }
.site[data-look="groomer"] .g-prices .btn-primary { background: var(--g-towel); color: var(--g-ink); border-color: var(--g-towel); min-height: 3.4rem; padding-inline: 1.7rem; font-size: 1.1rem; }

/* Hung on a nail through a punched hole. */
.site[data-look="groomer"] .g-chart-hole { position: absolute; top: 0.85rem; left: 50%; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: var(--g-clipper); box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 3px #e6eaf0; }
.site[data-look="groomer"] .g-chart-hole::after { content: ''; position: absolute; left: 4px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #e4e7ea, #7b848c 70%); }

.site[data-look="groomer"] .g-matrix { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.site[data-look="groomer"] .g-matrix thead th { vertical-align: bottom; padding: 0 0.5rem 0.7rem; border-bottom: 3px solid var(--g-ink); font-weight: 700; }
.site[data-look="groomer"] .g-col-name { text-align: left; font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--g-muted); padding-left: 0 !important; }
.site[data-look="groomer"] .g-size { text-align: center; white-space: nowrap; width: 16%; }
.site[data-look="groomer"] .g-size-word { display: block; font-family: var(--font-heading); line-height: 1; letter-spacing: -0.02em; }
/* The size words grow from klein to groot. */
.site[data-look="groomer"] .g-size-klein .g-size-word { font-size: 1.15rem; }
.site[data-look="groomer"] .g-size-middel .g-size-word { font-size: 1.6rem; }
.site[data-look="groomer"] .g-size-groot .g-size-word { font-size: 2.2rem; }
.site[data-look="groomer"] .g-kg { display: block; margin-top: 0.35rem; font-family: var(--font-figures); font-weight: 400; font-size: 0.8rem; color: var(--g-muted); }
.site[data-look="groomer"] .g-matrix tbody th { text-align: left; font-weight: 400; padding: 1rem 0.75rem 1rem 0; vertical-align: top; }
.site[data-look="groomer"] .g-matrix tbody :is(th, td) { border-bottom: 1px solid var(--border); }
.site[data-look="groomer"] .g-matrix tbody tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="groomer"] .g-treat { margin: 0; font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.15; letter-spacing: -0.015em; overflow-wrap: break-word; }
.site[data-look="groomer"] .g-note { margin: 0.3rem 0 0; color: var(--g-muted); font-size: 0.95rem; line-height: 1.45; max-width: 34rem; }
.site[data-look="groomer"] .g-price { text-align: center; vertical-align: top; padding: 1.05rem 0.4rem; font-family: var(--font-figures); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); white-space: nowrap; }
.site[data-look="groomer"] .g-price .price-from { display: block; font-size: 0.7em; color: var(--g-muted); }
.site[data-look="groomer"] .g-price-any { text-align: center; }
.site[data-look="groomer"] .g-any { font-size: 0.72em; letter-spacing: 0.06em; color: var(--g-muted); margin-right: 0.6rem; }
.site[data-look="groomer"] .g-matrix tbody tr { transition: background-color 120ms ease; }
.site[data-look="groomer"] .g-matrix tbody tr:hover { background: var(--g-rinse); }
@media (max-width: 40rem) {
  .site[data-look="groomer"] .g-matrix, .site[data-look="groomer"] .g-matrix tbody { display: block; }
  .site[data-look="groomer"] .g-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .site[data-look="groomer"] .g-matrix tbody tr { display: grid; grid-template-columns: repeat(var(--g-cols, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--border); padding-block: 0.9rem; }
  .site[data-look="groomer"] .g-matrix[data-cols="2"] tbody tr { --g-cols: 2; }
  .site[data-look="groomer"] .g-matrix[data-cols="1"] tbody tr { --g-cols: 1; }
  .site[data-look="groomer"] .g-matrix tbody tr:last-child { border-bottom: 0; }
  .site[data-look="groomer"] .g-matrix tbody :is(th, td) { border: 0; padding: 0; }
  .site[data-look="groomer"] .g-matrix tbody th { grid-column: 1 / -1; padding-bottom: 0.6rem; }
  .site[data-look="groomer"] .g-matrix td.g-price { text-align: left; padding-right: 0.5rem; }
  .site[data-look="groomer"] .g-matrix td.g-price-any { grid-column: 1 / -1; }
  .site[data-look="groomer"] .g-matrix td[data-size]::before { content: attr(data-size); display: block; font-family: var(--font-heading); font-weight: 700; font-size: 0.95rem; color: var(--g-muted); margin-bottom: 0.1rem; }
  .site[data-look="groomer"] .g-any { display: block; margin: 0 0 0.1rem; }
}

/* The chart without sizes: name, dotted leader, price. */
.site[data-look="groomer"] .g-list { margin: 0; }
.site[data-look="groomer"] .g-list li { padding: 1rem 0; border-bottom: 1px solid var(--border); break-inside: avoid; }
.site[data-look="groomer"] .g-list li:last-child { border-bottom: 0; }
.site[data-look="groomer"] .g-list-row { display: flex; align-items: baseline; gap: 0.75rem; }
.site[data-look="groomer"] .g-list-row .g-treat { flex: 0 1 auto; min-width: 0; }
.site[data-look="groomer"] .g-dots { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted var(--g-steel); transform: translateY(-0.3em); }
.site[data-look="groomer"] .g-list.no-prices .g-treat { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.9rem); }
.site[data-look="groomer"] .g-list .g-amount { margin: 0; font-family: var(--font-figures); font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.3rem); white-space: nowrap; font-variant-numeric: tabular-nums; }
.site[data-look="groomer"] .g-list .g-amount .price-from { font-size: 0.75em; color: var(--g-muted); }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-list.is-long { columns: 2; column-gap: clamp(2rem, 4vw, 3.5rem); }
  .site[data-look="groomer"] .g-list.is-long li:last-child { border-bottom: 1px solid var(--border); }
  .site[data-look="groomer"] .g-list.no-prices.is-long { columns: 2; column-gap: 3rem; }
}

/* --- About: the trimtafel, the photo bleeding off the page. -------------- */
.site[data-look="groomer"] .g-about { padding: 0; background: var(--g-towel); }
.site[data-look="groomer"] .g-about-text h1, .site[data-look="groomer"] .g-about-text h2 { font-size: var(--fs-h2); margin-bottom: 0.45em; max-width: 12ch; }
.site[data-look="groomer"] .g-about-text > p { max-width: 34rem; }
.site[data-look="groomer"] .g-about-text > p:first-of-type { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="groomer"] .g-about-photo { position: relative; overflow: hidden; background: var(--g-rinse); }
.site[data-look="groomer"] .g-about-img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-about-grid { display: grid; grid-template-columns: minmax(var(--gap), 1fr) minmax(0, calc(var(--wrap) * 0.5)) minmax(0, calc(var(--wrap) * 0.5)) minmax(var(--gap), 1fr); min-height: clamp(34rem, calc(80 * var(--raam-vh)), 52rem); }
  .site[data-look="groomer"] .g-about-text { grid-column: 2; grid-row: 1; align-self: center; padding: var(--section-pad) clamp(2rem, 5vw, 5rem) var(--section-pad) 0; }
  .site[data-look="groomer"] .g-about-photo { grid-column: 3 / 5; grid-row: 1; }
  .site[data-look="groomer"] .g-about-img { position: absolute; inset: 0; }
  .site[data-look="groomer"] .g-about.photo-left .g-about-text { grid-column: 3; padding: var(--section-pad) 0 var(--section-pad) clamp(2rem, 5vw, 5rem); }
  .site[data-look="groomer"] .g-about.photo-left .g-about-photo { grid-column: 1 / 3; }
  .site[data-look="groomer"] .g-about.no-photo .g-about-grid { min-height: 0; }
  .site[data-look="groomer"] .g-about.no-photo .g-about-text { grid-column: 2 / 4; columns: 2 20rem; column-gap: 4rem; }
  .site[data-look="groomer"] .g-about.no-photo .g-about-text > :is(h1, h2) { column-span: all; }
}
@media (max-width: 51.99rem) {
  .site[data-look="groomer"] .g-about-photo { aspect-ratio: 4 / 3; max-height: calc(70 * var(--raam-vh)); }
  .site[data-look="groomer"] .g-about-text { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; padding-block: var(--section-pad); }
}

/* --- Gallery: the wall of dogs fresh off the table, on ink. -------------- */
.site[data-look="groomer"] .g-gallery { --text: var(--on-deep); --muted: var(--deep-muted); background: var(--g-mat) repeating-linear-gradient(90deg, rgb(255 255 255 / 0.035) 0 2px, transparent 2px 7px); color: var(--on-deep); }
.site[data-look="groomer"] .g-gallery h1, .site[data-look="groomer"] .g-gallery h2 { font-size: var(--fs-h2); margin-bottom: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="groomer"] .g-wall { display: grid; gap: clamp(0.5rem, 1.2vw, 1rem); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(9rem, 42vw, 16rem); }
.site[data-look="groomer"] .g-wall li { position: relative; overflow: hidden; background: #34312b; border-radius: 4px; }
.site[data-look="groomer"] .g-wall img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.site[data-look="groomer"] .g-wall li:hover img { transform: scale(1.03); }
.site[data-look="groomer"] .g-wall li:first-child { grid-column: 1 / -1; grid-row: span 2; }
.site[data-look="groomer"] .g-wall li:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .g-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 19vw, 19rem); }
  .site[data-look="groomer"] .g-wall li { grid-column: span 4; }
  .site[data-look="groomer"] .g-wall li:first-child { grid-column: span 7; grid-row: span 2; }
  .site[data-look="groomer"] .g-wall li:nth-child(2), .site[data-look="groomer"] .g-wall li:nth-child(3) { grid-column: span 5; }
  /* After the first three, rows of three; a row left with one photo runs wide, with two they share it. */
  .site[data-look="groomer"] .g-wall li:last-child:nth-child(3n + 4) { grid-column: 1 / -1; }
  .site[data-look="groomer"] .g-wall li:last-child:nth-child(3n + 5), .site[data-look="groomer"] .g-wall li:nth-last-child(2):nth-child(3n + 4) { grid-column: span 6; }
  .site[data-look="groomer"] .g-n2 .g-wall li { grid-column: span 6 !important; grid-row: span 2; }
}

/* --- Hours: the sticker on the salon door. ------------------------------- */
/* The salon wall: square rinse-blue tiles with white grout; the door stands on the floor. */
.site[data-look="groomer"] .g-hours {
  --g-floor: 2.75rem;
  padding-bottom: var(--g-floor);
  background-color: var(--g-rinse);
  background-image:
    linear-gradient(to top, #b9bfc4 0 var(--g-floor), #8e969d var(--g-floor) calc(var(--g-floor) + 6px), transparent calc(var(--g-floor) + 6px)),
    linear-gradient(#f8fbfd 2px, transparent 2px),
    linear-gradient(90deg, #f8fbfd 2px, transparent 2px);
  background-size: 100% 100%, 64px 64px, 64px 64px;
  background-position: 0 0, 0 0, 0 0;
}
.site[data-look="groomer"] .g-hours-inner { display: grid; gap: clamp(2.5rem, 6vw, 5rem); align-items: end; }
.site[data-look="groomer"] .g-hours-intro { align-self: center; padding-bottom: clamp(0rem, 4vw, 3rem); }
@media (max-width: 51.99rem) { .site[data-look="groomer"] .g-hours-intro { padding-bottom: 0; } }
@media (min-width: 52rem) { .site[data-look="groomer"] .g-hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="groomer"] .g-hours-intro h1, .site[data-look="groomer"] .g-hours-intro h2 { font-size: var(--fs-h2); max-width: 10ch; }
.site[data-look="groomer"] .g-hours-place { font-size: var(--fs-lead); line-height: 1.5; margin: 1.5rem 0 0; }
.site[data-look="groomer"] .g-hours-place a, .site[data-look="groomer"] .g-hours-call a { font-weight: 700; text-decoration-thickness: 2px; }
.site[data-look="groomer"] .g-hours-call { font-size: var(--fs-lead); margin: 1rem 0 0; }
.site[data-look="groomer"] .g-door { position: relative; justify-self: center; width: min(100%, 30rem); padding: 14px; background: linear-gradient(90deg, #c9ced3, #eef0f2 30%, #d7dbdf 70%, #bfc5cb); border-radius: 6px 6px 0 0; box-shadow: 0 -2px 30px -18px rgb(20 30 45 / 0.45); }
.site[data-look="groomer"] .g-door-glass {
  --text: var(--g-on-glass); --bg: var(--g-glass); --muted: var(--g-glass-muted); --border: rgb(255 255 255 / 0.18);
  background: var(--g-glass); color: var(--g-on-glass);
  padding: clamp(2rem, 6vw, 3.25rem) clamp(1.25rem, 5vw, 2.5rem) clamp(6rem, 14vw, 8rem);
}
.site[data-look="groomer"] .g-door-name { margin: 0 0 1.75rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.5vw, 2.3rem); line-height: 1.05; letter-spacing: -0.02em; text-align: center; overflow-wrap: anywhere; }
.site[data-look="groomer"] .g-door-hours { width: 100%; }
.site[data-look="groomer"] .g-door-hours th, .site[data-look="groomer"] .g-door-hours td { padding: 0.55rem 0; border-bottom: 1px solid var(--border); }
.site[data-look="groomer"] .g-door-hours th { font-family: var(--font-heading); font-weight: 700; font-size: 1.1rem; }
.site[data-look="groomer"] .g-door-hours td { font-size: 1.05rem; white-space: nowrap; padding-left: 0.75rem; }
.site[data-look="groomer"] .g-door-hours :is(th, td) { hyphens: manual; }
.site[data-look="groomer"] .g-door-hours th { white-space: normal; }
.site[data-look="groomer"] .g-door-hours .is-closed :is(th, td) { color: var(--g-glass-muted); }
.site[data-look="groomer"] .g-door-hours th::after { background: var(--g-towel); color: var(--g-ink); }
.site[data-look="groomer"] .g-door-hours th::before { background: var(--g-towel) !important; }
/* The push bar across the glass, on two mounts. */
.site[data-look="groomer"] .g-door-glass { position: relative; }
.site[data-look="groomer"] .g-door-bar { position: absolute; left: 12%; right: 12%; bottom: clamp(2rem, 5vw, 3rem); height: 14px; border-radius: 7px; background: linear-gradient(180deg, #f2f4f5, #a9b1b8 55%, #7f878f); box-shadow: 0 6px 8px rgb(0 0 0 / 0.45); }
.site[data-look="groomer"] .g-door-bar::before, .site[data-look="groomer"] .g-door-bar::after { content: ''; position: absolute; top: 3px; width: 10px; height: 22px; border-radius: 3px; background: #8d959c; z-index: -1; }
.site[data-look="groomer"] .g-door-bar::before { left: 8%; }
.site[data-look="groomer"] .g-door-bar::after { right: 8%; }
@media (max-width: 24rem) { .site[data-look="groomer"] .g-door-hours td { font-size: 0.95rem; } .site[data-look="groomer"] .g-door-hours th { font-size: 1rem; } }

/* --- Reviews: set large; the first one largest. ------------------------- */
/* Reviews on a towel: the woven blue border bands at its top and bottom. */
.site[data-look="groomer"] .g-reviews {
  background-color: var(--g-towel);
  background-image: linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper));
  background-size: 100% 7px, 100% 3px, 100% 3px, 100% 7px;
  background-position: 0 18px, 0 31px, 0 calc(100% - 31px), 0 calc(100% - 18px);
  background-repeat: no-repeat;
}
.site[data-look="groomer"] .g-reviews h1, .site[data-look="groomer"] .g-reviews h2 { font-size: var(--fs-h2); max-width: 14ch; }
.site[data-look="groomer"] .g-quotes { display: grid; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem); margin-top: clamp(2rem, 5vw, 3.5rem); }
@media (min-width: 52rem) { .site[data-look="groomer"] .g-reviews-many .g-quotes { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site[data-look="groomer"] .g-reviews-many .g-quotes li:first-child { grid-column: 1 / -1; } }
.site[data-look="groomer"] .g-quotes figure { margin: 0; }
.site[data-look="groomer"] .g-quotes blockquote { margin: 0; }
.site[data-look="groomer"] .g-quotes blockquote p { margin: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.25; letter-spacing: -0.015em; }
.site[data-look="groomer"] .g-quotes li:first-child blockquote p { font-size: clamp(1.7rem, 1.1rem + 2.6vw, 3.4rem); line-height: 1.1; letter-spacing: -0.025em; max-width: 26ch; }
.site[data-look="groomer"] .g-q { color: var(--g-clipper); margin-left: -0.45em; }
.site[data-look="groomer"] .g-quotes figcaption { margin-top: 1rem; font-size: 1rem; color: var(--g-muted); }
.site[data-look="groomer"] .g-quotes figcaption::before { content: '— '; }

/* --- FAQ: questions at the counter. ------------------------------------- */
.site[data-look="groomer"] .s-faq { background: var(--g-rinse); }
@media (min-width: 52rem) {
  .site[data-look="groomer"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="groomer"] .s-faq .faq-items { margin-top: 0; }
}
.site[data-look="groomer"] .s-faq h1, .site[data-look="groomer"] .s-faq h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] .faq-items details { background: var(--g-towel); border: 0; border-radius: 10px; margin-bottom: 0.6rem; padding-inline: clamp(1rem, 3vw, 1.6rem); }
.site[data-look="groomer"] .faq-items details:first-child { border-top: 0; }
.site[data-look="groomer"] .faq-items summary { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); min-height: 4.25rem; letter-spacing: -0.01em; }
.site[data-look="groomer"] .faq-items summary::after { content: ''; width: 1.1rem; height: 1.1rem; flex: none; background: linear-gradient(var(--g-clipper), var(--g-clipper)) center / 100% 2.5px no-repeat, linear-gradient(var(--g-clipper), var(--g-clipper)) center / 2.5px 100% no-repeat; transition: transform 200ms ease; }
.site[data-look="groomer"] .faq-items details[open] summary::after { content: ''; transform: rotate(45deg); }
.site[data-look="groomer"] .faq-items details p { color: var(--g-ink); padding-bottom: 0.25rem; }
.site[data-look="groomer"] .faq-items dt { font-family: var(--font-heading); font-size: 1.3rem; }
.site[data-look="groomer"] .faq-items dd { color: var(--g-ink); }

/* --- Contact: the back of the index card, ruled. ----------------------- */
.site[data-look="groomer"] .s-contact {
  --text: var(--on-manila); --muted: var(--manila-muted); --border: var(--g-card-rule);
  background-color: var(--g-manila); color: var(--on-manila);
  background-image: linear-gradient(var(--g-card-red), var(--g-card-red)), repeating-linear-gradient(to bottom, transparent 0 calc(2.25rem - 1px), color-mix(in srgb, var(--g-card-rule) 55%, transparent) calc(2.25rem - 1px) 2.25rem);
  background-size: 100% 2px, 100% 100%; background-position: 0 clamp(3rem, 6vw, 4.5rem), 0 0; background-repeat: no-repeat, repeat;
}
.site[data-look="groomer"] .s-contact h1, .site[data-look="groomer"] .s-contact h2 { font-size: var(--fs-h2); max-width: 10ch; }
.site[data-look="groomer"] .s-contact .lead { color: var(--on-manila); }
.site[data-look="groomer"] .contact-list { border-top: 3px solid var(--on-manila); }
.site[data-look="groomer"] .contact-list li { border-bottom: 1px solid var(--g-manila-line); }
.site[data-look="groomer"] .contact-link { padding-block: 1.1rem; }
.site[data-look="groomer"] .contact-label { font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--manila-muted); }
.site[data-look="groomer"] .contact-value { font-size: clamp(1.4rem, 1.15rem + 1vw, 2.1rem); letter-spacing: -0.02em; }
.site[data-look="groomer"] .contact-list li:first-child .contact-value { font-size: clamp(2.1rem, 1.3rem + 3.2vw, 4.4rem); line-height: 1; }
.site[data-look="groomer"] .contact-also, .site[data-look="groomer"] .contact-note { font-weight: 700; }
.site[data-look="groomer"] .contact-form { --bg: var(--g-towel); background: var(--g-towel); color: var(--g-ink); --text: var(--g-ink); --muted: var(--g-muted); border-top: 0; padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: 10px; box-shadow: 0 20px 40px -30px rgb(35 33 29 / 0.6); }

/* --- Request form: filled in like a trimkaart. -------------------------- */
.site[data-look="groomer"] .s-request { background: var(--g-towel); }
.site[data-look="groomer"] .s-request h1, .site[data-look="groomer"] .s-request h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] .request-form {
  --text: var(--on-manila); --muted: var(--manila-muted); --bg: #fbf4de;
  background: var(--g-manila); color: var(--on-manila); border-top: 0; padding: clamp(1.25rem, 4vw, 2.25rem); border-radius: 3px;
  box-shadow: inset 0 2px 0 var(--g-card-red), 0 20px 40px -30px rgb(35 33 29 / 0.6);
}
.site[data-look="groomer"] .request-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border-color: var(--g-manila-line); }

/* --- Booking: the appointment book. -------------------------------------- */
.site[data-look="groomer"] .s-booking { background: var(--g-rinse); }
.site[data-look="groomer"] .s-booking h1, .site[data-look="groomer"] .s-booking h2 { font-size: var(--fs-h2); }
@media (min-width: 64rem) {
  .site[data-look="groomer"] .s-booking .booking-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="groomer"] .s-booking .booking-inner > * { grid-column: 1; max-width: none; }
  .site[data-look="groomer"] .s-booking .booking-inner > .booking-services { grid-column: 2; grid-row: 1 / span 4; margin-top: 0; }
}
.site[data-look="groomer"] .booking-services { background: var(--g-towel); border-top: 0; border-radius: 12px; padding: 0.5rem clamp(1rem, 3vw, 1.75rem); }
.site[data-look="groomer"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="groomer"] .booking-name { font-family: var(--font-heading); font-size: 1.2rem; }
.site[data-look="groomer"] .booking-go { color: var(--g-clipper); }

/* --- CTA band: clipper blue, the button towel white. -------------------- */
.site[data-look="groomer"] .s-cta { --text: var(--g-on-clipper); --muted: var(--g-clipper-muted); background: var(--g-clipper); color: var(--g-on-clipper); }
.site[data-look="groomer"] .s-cta h1, .site[data-look="groomer"] .s-cta h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] .s-cta .cta-inner p { color: var(--g-on-clipper); }
.site[data-look="groomer"] .s-cta .btn-primary { background: var(--g-towel); color: var(--g-ink); border-color: var(--g-towel); min-height: 3.6rem; font-size: 1.15rem; }

/* --- Trust strip and service area: towel stripes, big place names. ------- */
.site[data-look="groomer"] .s-trust { background: var(--g-towel); border-block: 0; padding-block: 1.6rem; background-image: linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)), linear-gradient(var(--g-clipper), var(--g-clipper)); background-size: 100% 4px, 100% 2px, 100% 2px, 100% 4px; background-position: 0 6px, 0 14px, 0 calc(100% - 14px), 0 calc(100% - 6px); background-repeat: no-repeat; }
.site[data-look="groomer"] .trust-list { font-family: var(--font-heading); font-size: clamp(1.1rem, 1rem + 0.5vw, 1.35rem); justify-content: center; }
.site[data-look="groomer"] .s-area { background: var(--g-rinse); }
.site[data-look="groomer"] .s-area h1, .site[data-look="groomer"] .s-area h2 { font-size: var(--fs-h2); }
.site[data-look="groomer"] ul.area-list { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1.1rem + 2.2vw, 3rem); line-height: 1.15; letter-spacing: -0.02em; gap: 0.2rem 0; }
.site[data-look="groomer"] ul.area-list li:not(:last-child)::after { color: var(--g-clipper); }
.site[data-look="groomer"] .area-places { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.4rem); line-height: 1.2; }

/* --- Subpages: their first section carries the page title. -------------- */
.site[data-look="groomer"] main > .s:first-child:not(.s-hero) > .wrap h1 { font-size: clamp(2.6rem, 1.4rem + 4.5vw, 6rem); }

/* --- Footer: ink, with the steel comb lying across its top edge. -------- */
.site[data-look="groomer"] .site-footer { position: relative; padding-top: clamp(4.5rem, 8vw, 6rem); }
.site[data-look="groomer"] .site-footer::before, .site[data-look="groomer"] .site-footer::after { content: ''; position: absolute; left: 50%; width: min(78vw, 30rem); transform: translateX(-50%); pointer-events: none; }
/* The spine, steel. */
.site[data-look="groomer"] .site-footer::before { top: -14px; height: 10px; z-index: 1; border-radius: 5px; background: linear-gradient(#eef0f2, #aab2b9 50%, #7d868e); box-shadow: 0 5px 6px rgb(0 0 0 / 0.35); }
/* The teeth: coarse on one half, fine on the other, like a greyhound comb. */
.site[data-look="groomer"] .site-footer::after {
  top: -6px; height: 18px; width: calc(min(78vw, 30rem) - 10px);
  background: repeating-linear-gradient(90deg, #a3abb2 0 3px, transparent 3px 7px) left / 50% 100% no-repeat, repeating-linear-gradient(90deg, #a3abb2 0 1.6px, transparent 1.6px 3.5px) right / 50% 100% no-repeat;
}
.site[data-look="groomer"] .footer-brand .footer-name { font-size: clamp(1.8rem, 1.3rem + 2vw, 3rem); line-height: 1; letter-spacing: -0.025em; overflow-wrap: anywhere; }

/* --- Quick bar (phones): towel white, the main action clipper blue. ---- */
@media (max-width: 51.99rem) {
  .site[data-look="groomer"] .quickbar { --on-deep: var(--g-ink); background: var(--g-towel); border-top: 1px solid var(--g-rinse-deep); }
  .site[data-look="groomer"] .quick { font-family: var(--font-heading); font-size: 1.1rem; }
}

/* --- Motion: the card lands; the chart, door, photos and quotes rise a little as they come into view. */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="groomer"] .g-hero-card .g-card { animation: g-land 700ms cubic-bezier(0.2, 0.8, 0.2, 1) 200ms both; }
  @supports (animation-timeline: view()) {
    .site[data-look="groomer"] :is(.g-chart, .g-door, .g-wall li, .g-quotes li, .faq-items details) { animation: g-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 45%; }
  }
}
@keyframes g-land { from { opacity: 0; transform: translateY(1.5rem) rotate(-1.5deg); } to { opacity: 1; transform: none; } }
/* Movement only, never hidden: a page captured without scrolling (a
   full-page screenshot, a framed preview) still shows everything. */
@keyframes g-rise { from { transform: translateY(1.5rem); } to { transform: none; } }

/* ---- looks/handyman.css ---- */
/* The handyman look: everything here is scoped to .site[data-look="handyman"]. Appended after base.css (bun run --filter @platform/sections css).
   The klusjesman's workshop: plywood wall, pegboard, squared paper, masking tape,
   the yellow duimstok and the bus. Every surface is drawn here; no images but
   the photos the page shows. */

.site[data-look="handyman"] {
  --ink: #1a1a1a;
  --ply: #e8d1a2;
  --ply-deep: #c9a465;
  --board: #7d5434;
  --board-hole: #24160c;
  --bench: #45301f;
  --on-bench: #fbf7ee;
  --bench-muted: #d9ccb6;
  --manila: #ecd49c;
  --tape: rgb(238 228 196 / 0.9);
  --wall: #e6e3dc;
  --road: #2e2f31;
  --graphite: #33312d;
  --cm: max(0.75rem, 1vw);
  /* Grain for wood surfaces: long stretched noise, tinted brown. */
  /* Wood grain, drawn in CSS only (the stylesheet loads nothing but fonts):
     fine fibres and broad bands at slightly different angles. */
  --grain: repeating-linear-gradient(179.4deg, rgb(130 85 35 / 0.07) 0 1px, transparent 1px 6px), repeating-linear-gradient(180.7deg, rgb(140 92 40 / 0.07) 0 2px, transparent 2px 17px), repeating-linear-gradient(178.6deg, rgb(255 250 235 / 0.16) 0 11px, transparent 11px 38px), repeating-linear-gradient(181.3deg, rgb(120 78 30 / 0.06) 0 16px, transparent 16px 71px);
  --squares: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  font-size: 1.0625rem;
  hyphenate-limit-chars: 10 4 4;
}
.site[data-look="handyman"] main > .s + .s { border-top: 0; }
.site[data-look="handyman"] .s { padding-block: calc(var(--section-pad) * 1.35); }
.site[data-look="handyman"] :is(h1, h2) { letter-spacing: -0.015em; line-height: 0.98; }
.site[data-look="handyman"] h2 { font-size: clamp(2.5rem, 1.2rem + 3.6vw, 5rem); }
.site[data-look="handyman"] .lead { color: var(--text); font-size: clamp(1.15rem, 1rem + 0.5vw, 1.4rem); line-height: 1.45; }
/* The few handwritten bits: pencil on paper. */
.site[data-look="handyman"] .pencil { font-family: var(--font-hand); font-weight: 400; letter-spacing: 0; color: var(--graphite); }

/* --- Buttons: a block that lifts off the wall. --------------------------- */
.site[data-look="handyman"] .btn { min-height: 52px; padding: 0.8rem 1.5rem; font-size: 1.1rem; font-weight: 700; letter-spacing: 0.005em; box-shadow: 0 0 0 0 var(--ink); transition: transform 0.15s ease, box-shadow 0.15s ease; }
.site[data-look="handyman"] .btn:is(:hover, :focus-visible) { text-decoration: none; transform: translate(-3px, -3px); box-shadow: 3px 3px 0 0 var(--ink); }
.site[data-look="handyman"] .btn:active { transform: none; box-shadow: none; }
.site[data-look="handyman"] .cta-alt { text-decoration-thickness: 2px; text-underline-offset: 0.3em; font-size: 1.05rem; }
.site[data-look="handyman"] .cta-alt:hover { text-decoration-color: var(--mark); }

/* --- Header: paper, a strip of the rule along the top. -------------------- */
.site[data-look="handyman"] .site-header {
  background:
    linear-gradient(90deg, var(--ink) 1px, transparent 1px) 0 0 / var(--cm) 5px repeat-x,
    linear-gradient(90deg, var(--mark) 2px, transparent 2px) 0 0 / calc(var(--cm) * 10) 9px repeat-x,
    linear-gradient(var(--rule), var(--rule)) 0 0 / 100% 9px no-repeat,
    var(--paper);
  padding-top: 9px; border-bottom: 2px solid var(--ink);
}
.site[data-look="handyman"] .brand { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.55rem); text-transform: uppercase; letter-spacing: 0.01em; }
.site[data-look="handyman"] .site-header nav a { font-weight: 600; }
.site[data-look="handyman"] .site-header nav a[aria-current='page'] { text-decoration-color: var(--mark); text-decoration-thickness: 3px; }

/* --- Hero: the plywood wall, the photo pinned to it, the duimstok across.
   On a short phone the photo gives way, so the duimstok with the name and
   number still shows above the quick bar at first paint. --- */
.site[data-look="handyman"] .s-hero {
  padding: 0; display: flex; flex-direction: column;
  min-height: min(56rem, max(34rem, calc(calc(100 * var(--raam-vh)) - 9.25rem)));
  background: var(--grain), linear-gradient(100deg, #ead5a8, var(--ply) 45%, #e2c793);
}
.site[data-look="handyman"] .hm-hero-grid { flex: 1; display: grid; padding-left: max(var(--gap), calc((100% - var(--wrap)) / 2)); }
.site[data-look="handyman"] .s-hero .hero-text { align-self: center; padding-block: clamp(2.5rem, calc(7 * var(--raam-vh)), 6rem); padding-right: clamp(1.5rem, 4vw, 4rem); }
.site[data-look="handyman"] .s-hero h1,
.site[data-look="handyman"] .s-hero h2 { font-size: clamp(2.7rem, 0.9rem + 5.4vw, 7.5rem); line-height: 0.92; letter-spacing: -0.025em; max-width: 13ch; margin-bottom: 0.32em; hyphens: manual; overflow-wrap: break-word; text-wrap: balance; }
.site[data-look="handyman"] .s-hero .lead { max-width: 33rem; }
/* A long headline (the field takes 80 characters) steps down, so the button stays in the first screen. */
.site[data-look="handyman"] .s-hero[data-length="long"] :is(h1, h2) { font-size: clamp(2.3rem, 0.9rem + 3.5vw, 5.25rem); max-width: 20ch; }
.site[data-look="handyman"] .s-hero .actions { margin-top: 2.25rem; }
.site[data-look="handyman"] .s-hero .hero-media { position: relative; min-height: 20rem; border-left: 3px solid var(--ink); }
.site[data-look="handyman"] .s-hero .hero-img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; border: 0; }
/* The first places, in pencil on a strip of masking tape stuck over the photo's edge. */
.site[data-look="handyman"] .tape-note {
  position: absolute; z-index: 2; left: -1.6rem; bottom: clamp(2rem, calc(7 * var(--raam-vh)), 4rem); margin: 0; max-width: calc(100% - 1rem);
  padding: 0.45rem 1.3rem 0.35rem; background: var(--tape); color: var(--graphite);
  font-family: var(--font-hand); font-size: clamp(1.15rem, 0.95rem + 0.6vw, 1.5rem); line-height: 1.2;
  transform: rotate(-2.2deg); box-shadow: 0 1px 2px rgb(0 0 0 / 0.18);
  clip-path: polygon(1.5% 6%, 99% 0, 100% 28%, 98.4% 52%, 100% 78%, 99% 100%, 1% 95%, 0 72%, 1.6% 48%, 0 22%);
}
.site[data-look="handyman"] .hm-no-photo :is(h1, h2) { max-width: 13ch; }
.site[data-look="handyman"] .s-hero .hm-rule-art { display: none; border: 0; min-height: 0; }
@media (min-width: 52rem) {
  .site[data-look="handyman"] .hm-no-photo .hm-hero-grid { grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); padding-right: max(var(--gap), calc((100% - var(--wrap)) / 2)); }
  .site[data-look="handyman"] .s-hero .hm-rule-art { display: block; align-self: center; padding-block: 2.5rem; }
  .site[data-look="handyman"] .hm-rule-art svg { width: 100%; height: auto; max-height: 30rem; filter: drop-shadow(0 14px 14px rgb(60 40 10 / 0.35)); }
}
@media (min-width: 52rem) {
  .site[data-look="handyman"] .hm-has-photo .hm-hero-grid { grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr); }
}
@media (max-width: 51.99rem) {
  .site[data-look="handyman"] .s-hero { min-height: 0; }
  .site[data-look="handyman"] .hm-hero-grid { padding-right: var(--gap); }
  .site[data-look="handyman"] .hm-has-photo .hero-media { order: -1; min-height: 0; height: clamp(5rem, min(calc(22 * var(--raam-vh)), calc(100 * var(--raam-vh)) - 35rem - var(--vb-bar, 0px)), 16rem); margin: 0 calc(-1 * var(--gap)); border: 0; border-bottom: 3px solid var(--ink); }
  .site[data-look="handyman"] .s-hero .hero-text { padding: 2rem 0 2.25rem; }
  .site[data-look="handyman"] .s-hero .lead { font-size: 1.08rem; }
  .site[data-look="handyman"] .s-hero .actions { margin-top: 1.4rem; }
  .site[data-look="handyman"] .tape-note { left: var(--gap); bottom: -1.1rem; }
  .site[data-look="handyman"] .hm-has-photo .hero-text { padding-top: 2.6rem; }
}

/* The duimstok: yellow lacquer, a tick per cm, longer every 5, the red mark
   and number every 10, a hinge with its rivet every 20 cm. */
.site[data-look="handyman"] .duimstok {
  --cm: max(0.75rem, 1vw);
  margin-top: 0; padding-top: 2.55rem; border-block: 3px solid var(--ink);
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.28), transparent 18%, transparent 80%, rgb(80 50 0 / 0.14)),
    radial-gradient(circle at 1px 1.3rem, #8c6a17 0 3px, #f7d969 3.5px 4.5px, transparent 5px) calc(var(--cm) * 20 - 0px) 0 / calc(var(--cm) * 20) 100% repeat-x,
    linear-gradient(90deg, rgb(70 45 0 / 0.2) 0 1px, rgb(255 255 255 / 0.3) 1px 2px, transparent 2px) 0 0 / calc(var(--cm) * 20) 100% repeat-x,
    var(--rule);
  box-shadow: 0 -10px 24px -14px rgb(0 0 0 / 0.5);
}
.site[data-look="handyman"] .duimstok-scale {
  height: 2.6rem;
  background:
    linear-gradient(90deg, var(--ink) 1.5px, transparent 1.5px) 0 0 / var(--cm) 0.55rem repeat-x,
    linear-gradient(90deg, var(--ink) 1.5px, transparent 1.5px) 0 0 / calc(var(--cm) * 5) 0.9rem repeat-x,
    linear-gradient(90deg, var(--mark) 3px, transparent 3px) -0.75px 0 / calc(var(--cm) * 10) 1.15rem repeat-x;
}
.site[data-look="handyman"] .duimstok-scale :is(.n, .cm) { position: absolute; top: 0; left: calc(var(--at) * var(--cm)); transform: translateX(-50%); font-family: var(--font-heading); font-weight: 700; line-height: 1; }
.site[data-look="handyman"] .duimstok-scale .n { padding-top: 1.05rem; font-size: 0.6rem; letter-spacing: -0.04em; }
.site[data-look="handyman"] .duimstok-scale .cm { padding-top: 1.3rem; font-size: 1.2rem; color: var(--mark); letter-spacing: -0.02em; }
.site[data-look="handyman"] .duimstok-scale .cm::before { display: none; }
.site[data-look="handyman"] .duimstok-print { padding-block: 0.15rem 0.7rem; gap: 0.1rem 2rem; }
.site[data-look="handyman"] .duimstok-name,
.site[data-look="handyman"] .duimstok-phone { font-size: clamp(1.35rem, 0.9rem + 1.9vw, 2.6rem); line-height: 1.05; letter-spacing: 0.01em; }
.site[data-look="handyman"] .duimstok-name { min-width: 0; overflow-wrap: break-word; }
.site[data-look="handyman"] .duimstok-phone { font-variant-numeric: tabular-nums; }
.site[data-look="handyman"] .duimstok-phone:hover { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 3px; }
@media (max-width: 40rem) {
  .site[data-look="handyman"] .duimstok-scale .n:nth-child(odd) { visibility: hidden; }
}

/* --- Services: the klussenlijst taped to the pegboard, the rates on a tag. -- */
.site[data-look="handyman"] .s-services {
  background:
    radial-gradient(circle at 50% 50%, var(--board-hole) 0 3.5px, rgb(255 230 200 / 0.16) 4px 5px, transparent 5.5px) 0 0 / 2rem 2rem,
    linear-gradient(160deg, #86593a, var(--board) 50%, #714a2c);
  background-color: var(--board);
}
.site[data-look="handyman"] .hm-board { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem); align-items: start; }
.site[data-look="handyman"] .s-services:not(.hm-with-tag) .hm-board { justify-items: center; }
@media (min-width: 68rem) { .site[data-look="handyman"] .hm-with-tag .hm-board { grid-template-columns: minmax(0, 1fr) minmax(16rem, 21rem); } }
.site[data-look="handyman"] .s-services .sheet {
  --text: var(--on-paper); --muted: var(--paper-muted); --border: transparent; color: var(--on-paper);
  position: relative; width: 100%; max-width: 56rem; margin: 0;
  background-color: var(--paper); background-image: var(--squares); background-size: 1.75rem 1.75rem; background-position: -1px -1px;
  border: 0; padding: clamp(2rem, 4vw, 3rem) clamp(1.25rem, 4vw, 3.25rem) clamp(2rem, 4vw, 3rem) clamp(3rem, 8vw, 6.25rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.2), 0 24px 34px -20px rgb(0 0 0 / 0.75);
}
.site[data-look="handyman"] .s-services .sheet::before { content: ''; position: absolute; top: 0; bottom: 0; left: clamp(2rem, 5.5vw, 4.4rem); border-left: 2px solid var(--mark); }
.site[data-look="handyman"] .tape { position: absolute; z-index: 2; width: 7.5rem; height: 1.9rem; background: var(--tape); box-shadow: 0 1px 2px rgb(0 0 0 / 0.2); clip-path: polygon(2% 0, 98% 6%, 100% 32%, 97.5% 56%, 100% 80%, 98% 100%, 3% 95%, 0 70%, 2.5% 46%, 0 20%); }
.site[data-look="handyman"] .tape-l { top: -0.85rem; left: 1.5rem; transform: rotate(-4deg); }
.site[data-look="handyman"] .tape-r { top: -0.8rem; right: 1.25rem; transform: rotate(3deg); }
.site[data-look="handyman"] .s-services .sheet-head { max-width: none; }
.site[data-look="handyman"] .s-services .sheet-head > :is(h1, h2) { font-family: var(--font-hand); font-weight: 400; text-transform: none; letter-spacing: 0; font-size: clamp(2.8rem, 1.6rem + 3.6vw, 4.8rem); line-height: 1; margin: 0 0 0.15em; transform: rotate(-1deg); transform-origin: left; }
.site[data-look="handyman"] .s-services .sheet-head .lead { font-size: 1.15rem; max-width: 40rem; }
.site[data-look="handyman"] .s-services .service-list { border-top: 0; margin-top: 1.75rem; }
.site[data-look="handyman"] .s-services .service { padding: 0.85rem 0 0.95rem; border-bottom: 1.5px solid color-mix(in srgb, var(--on-paper) 75%, transparent); }
.site[data-look="handyman"] .s-services .service:last-child { border-bottom: 0; }
.site[data-look="handyman"] .s-services .service :is(h2, h3) { font-family: var(--font-body); font-weight: 650; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.3; letter-spacing: -0.005em; text-transform: none; hyphens: auto; }
.site[data-look="handyman"] .s-services .price { font-family: var(--font-body); font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); font-weight: 650; font-variant-numeric: tabular-nums lining-nums; }
.site[data-look="handyman"] .s-services .price .price-from,
.site[data-look="handyman"] .s-services .price .price-unit { font-weight: 450; color: var(--paper-muted); font-size: 0.85em; }
.site[data-look="handyman"] .s-services .price-row { flex-wrap: nowrap; }
.site[data-look="handyman"] .s-services .price-row > :first-child { min-width: 0; flex: 0 1 auto; }
.site[data-look="handyman"] .s-services .price-row .leader { flex: 1 1 1.5rem; min-width: 1.5rem; border-bottom: 2px dotted color-mix(in srgb, var(--on-paper) 45%, transparent); align-self: end; margin-bottom: 0.45em; }
.site[data-look="handyman"] .s-services .service-note { color: var(--paper-muted); font-size: 1.02rem; margin-top: 0.2rem; }
/* A rate line left on the list (no tag): circled in red pencil. */
.site[data-look="handyman"] .s-services .is-rate .price { position: relative; }
.site[data-look="handyman"] .s-services .is-rate .price::after { content: ''; position: absolute; inset: -0.45rem -0.75rem -0.4rem -0.8rem; border: 2.5px solid var(--mark); border-radius: 50%; transform: rotate(-3deg); pointer-events: none; }
.site[data-look="handyman"] .s-services .hand-note { margin-top: 1.5rem; font-family: var(--font-hand); font-size: clamp(1.45rem, 1.15rem + 1vw, 2rem); line-height: 1.2; color: var(--graphite); transform: rotate(-1deg); transform-origin: left; }
.site[data-look="handyman"] .s-services .hand-note a { color: var(--mark); text-decoration-thickness: 2px; text-underline-offset: 0.2em; white-space: nowrap; }
@media (max-width: 40rem) {
  .site[data-look="handyman"] .s-services .price-row { flex-wrap: wrap; }
  .site[data-look="handyman"] .s-services .price-row .leader { display: none; }
  .site[data-look="handyman"] .s-services .price { flex-basis: 100%; }
  .site[data-look="handyman"] .s-services .sheet { padding-left: 2.75rem; }
  .site[data-look="handyman"] .s-services .sheet::before { left: 1.65rem; }
}

/* The manila tag on a string from a peg, with the rates people look for first. */
.site[data-look="handyman"] .hm-side { display: grid; gap: 3rem; justify-items: center; }
@media (min-width: 68rem) { .site[data-look="handyman"] .hm-side { position: sticky; top: 7rem; } }
.site[data-look="handyman"] .price-tag {
  position: relative; width: min(100%, 19rem); margin-top: 3.25rem;
  transform-origin: 50% -2.6rem; transform: rotate(-2.5deg); transition: transform 0.6s cubic-bezier(0.3, 1.6, 0.5, 1);
}
.site[data-look="handyman"] .price-tag:hover { transform: rotate(1.5deg); }
.site[data-look="handyman"] .price-tag dl {
  margin: 0; padding: 3.4rem 1.6rem 1.7rem; color: var(--ink);
  background: radial-gradient(circle at 50% 1.6rem, transparent 0 9px, #c7a45c 9.5px 13px, transparent 13.5px), var(--manila);
  background-color: var(--manila);
  clip-path: polygon(22% 0, 78% 0, 100% 13%, 100% 100%, 0 100%, 0 13%);
  -webkit-mask: radial-gradient(circle at 50% 1.6rem, transparent 8.5px, #000 9px); mask: radial-gradient(circle at 50% 1.6rem, transparent 8.5px, #000 9px);
  filter: drop-shadow(0 10px 12px rgb(0 0 0 / 0.45));
}
.site[data-look="handyman"] .price-tag dl > div + div { margin-top: 1.1rem; padding-top: 1.1rem; border-top: 1.5px dashed rgb(26 26 26 / 0.5); }
.site[data-look="handyman"] .price-tag dt { font-weight: 650; font-size: 1.05rem; line-height: 1.25; }
.site[data-look="handyman"] .price-tag dd { margin: 0.15rem 0 0; font-variant-numeric: tabular-nums lining-nums; line-height: 1.05; }
.site[data-look="handyman"] .price-tag dd .price-amount,
.site[data-look="handyman"] .price-tag dd:not(:has(.price-amount)) { font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.6rem, 1.8rem + 2vw, 3.4rem); letter-spacing: -0.02em; }
.site[data-look="handyman"] .price-tag dd :is(.price-unit, .price-from) { font-size: 1.05rem; font-weight: 600; }
/* The string runs from the peg down through the eyelet. */
.site[data-look="handyman"] .tag-string { position: absolute; z-index: 1; left: 50%; top: -3.2rem; width: 2px; height: 5rem; margin-left: -1px; background: #3a2a18; border-radius: 1px; }
.site[data-look="handyman"] .tag-string::before { content: ''; position: absolute; top: -0.5rem; left: 50%; width: 1.1rem; height: 1.1rem; margin-left: -0.55rem; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8d8d4, #8d8d88 60%, #5d5d58); box-shadow: 0 3px 4px rgb(0 0 0 / 0.5); }
.site[data-look="handyman"] .hm-print { width: min(100%, 17rem); aspect-ratio: 4 / 5; object-fit: cover; border: 0.6rem solid #f6f3ea; border-bottom-width: 1.8rem; box-shadow: 0 16px 22px -14px rgb(0 0 0 / 0.7); }
@media (max-width: 67.99rem) {
  .site[data-look="handyman"] .hm-print { display: none; }
  .site[data-look="handyman"] .price-tag { margin-top: 1.5rem; }
}

/* --- About: the bench photo full-bleed beside the story. ------------------- */
.site[data-look="handyman"] main > .s-about:first-child { padding-top: 0; }
.site[data-look="handyman"] .s-about { padding: 0; background: var(--paper); border-block: 3px solid var(--ink); }
.site[data-look="handyman"] .hm-about-grid { display: grid; }
.site[data-look="handyman"] .s-about .about-media { margin: 0; position: relative; min-height: 18rem; }
.site[data-look="handyman"] .s-about .about-img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; }
.site[data-look="handyman"] .s-about .hm-about-grid > .about-text { max-width: 40rem; padding: clamp(3.5rem, 7vw, 7rem) var(--gap); }
.site[data-look="handyman"] .s-about .hm-about-grid > .about-text :is(h1, h2) { margin-bottom: 0.25em; }
.site[data-look="handyman"] .s-about .hm-about-grid > .about-text p.hm-since { margin: -0.1em 0 1.1rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1; color: var(--mark); transform: rotate(-2deg); transform-origin: left; display: inline-block; }
.site[data-look="handyman"] .s-about .hm-first { font-weight: 500; }
.site[data-look="handyman"] .s-about .hm-about-grid > .about-text p { max-width: 36rem; font-size: 1.15rem; line-height: 1.6; }
.site[data-look="handyman"] .s-about .hm-about-grid > .about-text p.hm-first { font-size: clamp(1.3rem, 1.05rem + 0.8vw, 1.7rem); line-height: 1.4; }
.site[data-look="handyman"] .s-about .tape-note { left: auto; right: clamp(1rem, 4vw, 3rem); bottom: clamp(1.25rem, 4vw, 2.5rem); max-width: min(80%, 26rem); transform: rotate(1.6deg); }
.site[data-look="handyman"] .s-about.hm-no-photo .hm-about-grid { width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; }
.site[data-look="handyman"] .s-about.hm-no-photo .hm-about-grid > .about-text { padding-inline: 0; }
@media (min-width: 52rem) {
  .site[data-look="handyman"] .s-about.hm-has-photo .hm-about-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: 36rem; }
  .site[data-look="handyman"] .s-about.hm-has-photo .about-media { border-right: 3px solid var(--ink); }
  .site[data-look="handyman"] .s-about.hm-has-photo .hm-about-grid > .about-text { align-self: center; padding-left: clamp(2.5rem, 5vw, 5rem); padding-right: max(var(--gap), calc((100vw - var(--wrap)) / 2)); max-width: none; }
  .site[data-look="handyman"] .about-image_right .about-media { order: 2; border-right: 0 !important; border-left: 3px solid var(--ink); }
  .site[data-look="handyman"] .about-image_right.hm-has-photo .hm-about-grid > .about-text { padding-left: max(var(--gap), calc((100vw - var(--wrap)) / 2)); padding-right: clamp(2.5rem, 5vw, 5rem); }
}
@media (max-width: 51.99rem) { .site[data-look="handyman"] .s-about .about-media { border-bottom: 3px solid var(--ink); aspect-ratio: 4 / 3; min-height: 0; } }

/* --- Reviews: set large on the yellow of the rule. ------------------------ */
.site[data-look="handyman"] .s-testimonials { background: var(--rule); color: var(--on-rule); --text: var(--on-rule); --muted: var(--on-rule); padding-top: clamp(5rem, 9vw, 8rem); }
.site[data-look="handyman"] .rule-edge {
  position: absolute; left: 0; right: 0; top: 0; height: 1.6rem; border-top: 3px solid var(--ink);
  background:
    linear-gradient(90deg, var(--ink) 1.5px, transparent 1.5px) 0 0 / var(--cm) 0.6rem repeat-x,
    linear-gradient(90deg, var(--ink) 1.5px, transparent 1.5px) 0 0 / calc(var(--cm) * 5) 1rem repeat-x,
    linear-gradient(90deg, var(--mark) 3px, transparent 3px) -0.75px 0 / calc(var(--cm) * 10) 1.4rem repeat-x;
}
.site[data-look="handyman"] .s-testimonials :is(h1, h2) { margin-bottom: 0.6em; }
.site[data-look="handyman"] .s-testimonials .quote-list { margin-top: 0; gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem); grid-template-columns: minmax(0, 1fr); }
.site[data-look="handyman"] .s-testimonials .quote-list figure { border-top: 3px solid var(--ink); padding-block: 1.4rem 0; }
.site[data-look="handyman"] .s-testimonials blockquote { margin: 0 0 1rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.3rem); line-height: 1.12; letter-spacing: -0.01em; }
.site[data-look="handyman"] .s-testimonials blockquote p { text-indent: -0.42em; }
.site[data-look="handyman"] .s-testimonials blockquote p::before { content: '„'; }
.site[data-look="handyman"] .s-testimonials blockquote p::after { content: '”'; }
.site[data-look="handyman"] .s-testimonials figcaption { font-size: clamp(1.35rem, 1.15rem + 0.6vw, 1.7rem); line-height: 1.2; color: var(--on-rule); font-weight: 400; }
.site[data-look="handyman"] .s-testimonials figcaption::before { content: '— '; }
@media (min-width: 52rem) {
  .site[data-look="handyman"] .s-testimonials .quote-list { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); align-items: start; }
  .site[data-look="handyman"] .s-testimonials .quote-list li:first-child { grid-row: span 3; }
  .site[data-look="handyman"] .s-testimonials .quote-list li:first-child blockquote { font-size: clamp(2.3rem, 0.9rem + 3.3vw, 4.4rem); line-height: 1.02; }
  .site[data-look="handyman"] .s-testimonials[data-count="1"] .quote-list { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="handyman"] .s-testimonials[data-count="1"] .quote-list li:first-child blockquote { max-width: 24ch; }
}

/* --- Werkgebied: the side of the bus, on the street. ---------------------- */
.site[data-look="handyman"] .s-area {
  /* A painted brick wall, running bond: bed joints every course, head joints offset per course. */
  --joint: rgb(60 50 40 / 0.13);
  padding-bottom: 0; background-color: var(--wall);
  background-image: linear-gradient(var(--joint) 2px, transparent 0), conic-gradient(at 2px 2.5rem, transparent 0 270deg, var(--joint) 0), conic-gradient(at 2px 2.5rem, transparent 0 270deg, var(--joint) 0);
  background-size: 100% 2.5rem, 7.5rem 5rem, 7.5rem 5rem; background-position: 0 0, 0 0, 3.75rem 2.5rem;
}
.site[data-look="handyman"] .hm-area { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
.site[data-look="handyman"] .hm-area-head { max-width: 44rem; }
.site[data-look="handyman"] .hm-area-head .area-body { font-size: clamp(1.15rem, 1rem + 0.5vw, 1.35rem); margin: 0; }
.site[data-look="handyman"] .bus {
  --wheel: clamp(3.6rem, 2.4rem + 4vw, 6.4rem); --cab: clamp(5.5rem, 3rem + 10vw, 13rem);
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) var(--cab);
  padding-bottom: calc(var(--wheel) / 2); width: 100%; max-width: 66rem; margin-left: auto;
}
.site[data-look="handyman"] .bus-side {
  position: relative; min-width: 0; background: #fdfdfb; color: var(--ink);
  border: 3px solid var(--ink); border-right-width: 2px; border-radius: 0.9rem 0 0 0.5rem;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.25rem, 3.5vw, 3rem) calc(var(--wheel) / 2 + 2.6rem);
  box-shadow: inset 0 -10px 0 -6px rgb(0 0 0 / 0.06);
}
/* The livery: a strip of duimstok along the bottom of the side. */
.site[data-look="handyman"] .bus-side::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: calc(var(--wheel) / 2 + 0.5rem); height: 1.25rem; border-block: 2px solid var(--ink);
  background:
    linear-gradient(90deg, var(--ink) 1.5px, transparent 1.5px) 0 0 / var(--cm) 0.4rem repeat-x,
    linear-gradient(90deg, var(--mark) 3px, transparent 3px) 0 0 / calc(var(--cm) * 10) 0.75rem repeat-x,
    var(--rule);
}
.site[data-look="handyman"] .bus-name { margin: 0 0 0.6rem; font-family: var(--font-heading); font-weight: 700; text-transform: uppercase; font-size: clamp(1.8rem, 1rem + 2.8vw, 3.6rem); line-height: 0.95; letter-spacing: -0.01em; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="handyman"] ul.bus-places { margin: 0; font-size: clamp(1.1rem, 0.95rem + 0.6vw, 1.45rem); font-weight: 650; line-height: 1.35; }
.site[data-look="handyman"] ul.bus-places li:not(:last-child)::after { content: '·'; margin-inline: 0.5em; color: var(--mark); }
.site[data-look="handyman"] .bus[data-places="many"] ul.bus-places { font-size: clamp(1rem, 0.9rem + 0.4vw, 1.2rem); }
.site[data-look="handyman"] .bus-phone { display: inline-block; margin-top: 0.9rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.6rem, 1rem + 2vw, 2.8rem); line-height: 1; text-decoration: none; font-variant-numeric: tabular-nums; }
.site[data-look="handyman"] .bus-phone:hover { text-decoration: underline; text-decoration-color: var(--mark); text-decoration-thickness: 3px; }
/* The cab: sloped windscreen, side window, door seam, mirror, light. */
.site[data-look="handyman"] .bus-cab {
  position: relative; background: #fdfdfb;
  border: 3px solid var(--ink); border-left: 0; border-radius: 0 100% 0.7rem 0 / 0 46% 0.7rem 0;
}
.site[data-look="handyman"] .bus-cab::before {
  content: ''; position: absolute; top: 0.8rem; left: 0.8rem; right: 34%; height: 30%;
  background: linear-gradient(155deg, #c8d6de 0 40%, #a9bcc7 40% 55%, #c2d1d9 55%); border: 3px solid var(--ink); border-radius: 0.3rem 100% 0.3rem 0.3rem / 0.3rem 80% 0.3rem 0.3rem;
}
.site[data-look="handyman"] .bus-cab::after {
  content: ''; position: absolute; right: -3px; bottom: calc(var(--wheel) / 2 + 1rem); width: 0.9rem; height: 0.55rem; background: #f3e9b8; border: 2px solid var(--ink); border-radius: 0.3rem 0 0 0.3rem;
}
.site[data-look="handyman"] .bus-wheel {
  position: absolute; bottom: 0; width: var(--wheel); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, #d3d3cf 0 18%, #77776f 19% 24%, #2a2a2a 25% 60%, #161616 61%);
  box-shadow: 0 0 0 0.45rem var(--wall), 0 0 0 calc(0.45rem + 3px) var(--ink);
  clip-path: inset(-1rem -1rem 0 -1rem);
}
.site[data-look="handyman"] .bus-wheel-back { left: clamp(1.5rem, 9%, 7rem); }
.site[data-look="handyman"] .bus-wheel-front { right: calc(var(--cab) * 0.32); }
.site[data-look="handyman"] .hm-road { display: block; height: clamp(3rem, 6vw, 4.5rem); border-top: 3px solid var(--ink); background: linear-gradient(90deg, #f1efe9 0 55%, transparent 55%) 0 62% / 4rem 4px repeat-x, linear-gradient(#a9a69e, #a9a69e) 0 0 / 100% 0.6rem no-repeat, var(--road); }
@media (max-width: 40rem) {
  .site[data-look="handyman"] .bus-cab::before { left: 0.5rem; right: 18%; top: 0.6rem; }
}

/* --- Opening hours: the times on squared paper, taped to the wall. --------- */
.site[data-look="handyman"] .s-hours { background: var(--grain), var(--ply); background-color: var(--ply); }
.site[data-look="handyman"] .s-hours .hours-place,
.site[data-look="handyman"] .s-hours .hours-place a { color: var(--ink); }
.site[data-look="handyman"] .hours-card {
  position: relative; max-width: 30rem; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.25rem;
  background-color: var(--paper); background-image: var(--squares); background-size: 1.5rem 1.5rem; color: var(--on-paper); --text: var(--on-paper); --border: color-mix(in srgb, var(--on-paper) 60%, transparent);
  box-shadow: 0 18px 26px -18px rgb(0 0 0 / 0.6);
}
.site[data-look="handyman"] .hours-card::before { content: ''; position: absolute; top: -0.8rem; left: 50%; width: 7rem; height: 1.8rem; margin-left: -3.5rem; background: var(--tape); transform: rotate(-3deg); clip-path: polygon(2% 0, 98% 6%, 100% 32%, 97.5% 56%, 100% 80%, 98% 100%, 3% 95%, 0 70%, 2.5% 46%, 0 20%); }
.site[data-look="handyman"] .hours-table th { font-weight: 650; }
.site[data-look="handyman"] .hours-inner > * { min-width: 0; }
@media (max-width: 40rem) {
  .site[data-look="handyman"] .hours-card { padding-inline: 1rem; }
  .site[data-look="handyman"] .hours-table th { white-space: normal; }
  .site[data-look="handyman"] .hours-table th::after { margin-left: 0.35rem; }
}
.site[data-look="handyman"] .hours-table td { font-family: var(--font-body); font-variant-numeric: tabular-nums; white-space: nowrap; }
.site[data-look="handyman"] .hours-table .is-closed :is(th, td) { color: var(--paper-muted); }
.site[data-look="handyman"] .hours-table th::after { background: var(--mark); color: #fff; }
.site[data-look="handyman"] .hours-table th::before { background: var(--mark) !important; }

/* --- FAQ: a page of squared paper with the red margin. --------------------- */
.site[data-look="handyman"] .s-faq { background-color: var(--paper); background-image: var(--squares); background-size: 1.75rem 1.75rem; background-position: -1px -1px; color: var(--on-paper); --text: var(--on-paper); --muted: var(--paper-muted); }
.site[data-look="handyman"] .s-faq::before { content: ''; position: absolute; top: 0; bottom: 0; left: max(0.6rem, calc((100% - var(--wrap)) / 2 - 2.25rem)); border-left: 2px solid var(--mark); }
.site[data-look="handyman"] .s-faq .faq-items { max-width: 52rem; }
@media (min-width: 60rem) {
  .site[data-look="handyman"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 0 clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="handyman"] .s-faq > .wrap > :is(h1, h2) { position: sticky; top: 7rem; }
  .site[data-look="handyman"] .s-faq .faq-items { margin-top: 0.6rem; }
}
.site[data-look="handyman"] .faq-items details { border-bottom: 1.5px solid var(--ink); }
.site[data-look="handyman"] .faq-items details:first-child { border-top: 3px solid var(--ink); }
.site[data-look="handyman"] .faq-items summary { min-height: 4.25rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.75rem); line-height: 1.15; padding-block: 0.6rem; }
.site[data-look="handyman"] .faq-items summary::after { content: '+'; font-family: var(--font-hand); font-size: 2.2rem; color: var(--mark); transition: transform 0.2s ease; }
.site[data-look="handyman"] .faq-items details[open] summary::after { content: '+'; transform: rotate(45deg); }
.site[data-look="handyman"] .faq-items summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site[data-look="handyman"] .faq-items details p,
.site[data-look="handyman"] .faq-items dd { color: var(--on-paper); font-size: 1.1rem; }
.site[data-look="handyman"] .faq-items dt { font-family: var(--font-heading); font-size: 1.4rem; }

/* --- Call to action: a band in the red of the rule's marks. ---------------- */
.site[data-look="handyman"] .s-cta { background: var(--mark); color: #ffffff; --text: #ffffff; --muted: #ffffff; border-block: 3px solid var(--ink); }
.site[data-look="handyman"] .s-cta .cta-inner p { color: #ffffff; }
.site[data-look="handyman"] .s-cta .btn { background: var(--paper); color: var(--ink); border-color: var(--ink); }

/* --- Gallery: prints taped to the dark workbench. -------------------------- */
.site[data-look="handyman"] .s-gallery { background: var(--grain), linear-gradient(170deg, #4f3824, var(--bench)); background-color: var(--bench); color: var(--on-bench); --text: var(--on-bench); --muted: var(--bench-muted); }
.site[data-look="handyman"] .s-gallery .gallery-items { gap: clamp(1.25rem, 3vw, 2.25rem); }
.site[data-look="handyman"] .s-gallery .gallery-items li { position: relative; background: #f6f3ea; padding: 0.55rem; box-shadow: 0 14px 20px -12px rgb(0 0 0 / 0.8); }
.site[data-look="handyman"] .s-gallery .gallery-items li::before { content: ''; position: absolute; z-index: 1; top: -0.7rem; left: 50%; width: 5.5rem; height: 1.5rem; margin-left: -2.75rem; background: var(--tape); transform: rotate(-2deg); clip-path: polygon(2% 0, 98% 6%, 100% 32%, 97.5% 56%, 100% 80%, 98% 100%, 3% 95%, 0 70%, 2.5% 46%, 0 20%); }
.site[data-look="handyman"] .s-gallery .gallery-items img { height: 100%; }

/* --- Request form: a werkbon pad on the plywood. -------------------------- */
.site[data-look="handyman"] .s-request { background: var(--grain), var(--ply); background-color: var(--ply); }
.site[data-look="handyman"] .s-request .lead { color: var(--ink); }
.site[data-look="handyman"] .request-form,
.site[data-look="handyman"] .s-contact .contact-form {
  position: relative; background: #fdfdfa; border: 0; border-top: 1.1rem solid var(--ink); padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.25), 0 3px 0 -1px #f1eee6, 0 5px 0 -2px rgb(0 0 0 / 0.2), 0 22px 30px -18px rgb(0 0 0 / 0.65);
}
/* Two staples through the top of the pad. */
.site[data-look="handyman"] .request-form::before,
.site[data-look="handyman"] .s-contact .contact-form::before { content: ''; position: absolute; top: -0.75rem; left: 18%; right: 18%; height: 0.35rem; background: linear-gradient(90deg, #b9bcbf 0 2.2rem, transparent 2.2rem calc(100% - 2.2rem), #b9bcbf calc(100% - 2.2rem)); }
.site[data-look="handyman"] :where(.request-form, .contact-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), select) { border: 0; border-bottom: 2px solid var(--ink); border-radius: 0; background: transparent; padding-inline: 0.15rem; }
.site[data-look="handyman"] form:is(.request-form, .contact-form) textarea:not([hidden]) { border: 0; border-radius: 0; background-color: transparent; background-image: linear-gradient(transparent calc(2rem - 1.5px), var(--grid) calc(2rem - 1.5px) 2rem); background-size: 100% 2rem; line-height: 2rem; padding: 0 0.15rem; border-bottom: 2px solid var(--ink); }
.site[data-look="handyman"] :where(.request-form, .contact-form) :is(input, textarea, select):focus-visible { outline: 3px solid var(--rule); outline-offset: 2px; background-color: #fffbe6; }
.site[data-look="handyman"] .request-step > legend { font-size: clamp(1.4rem, 1.2rem + 0.6vw, 1.8rem); }
.site[data-look="handyman"] .request-step + .request-step { border-top: 1.5px dashed var(--ink); }
.site[data-look="handyman"] .request-form .field-check input { accent-color: var(--mark); }

/* --- Booking: the jobs to plan, each a line to pick. ---------------------- */
.site[data-look="handyman"] .s-booking { background: var(--grain), var(--ply); background-color: var(--ply); }
.site[data-look="handyman"] .s-booking .lead { color: var(--ink); }
.site[data-look="handyman"] .s-booking .booking-inner > * { max-width: 56rem; }
.site[data-look="handyman"] .booking-services { background-color: var(--paper); background-image: var(--squares); background-size: 1.75rem 1.75rem; border-top: 0; padding: 0.75rem clamp(1rem, 3vw, 2rem); box-shadow: 0 18px 26px -18px rgb(0 0 0 / 0.6); }
.site[data-look="handyman"] .booking-services li { border-bottom: 1.5px solid var(--ink); }
.site[data-look="handyman"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="handyman"] .booking-services a { min-height: 3.5rem; }
.site[data-look="handyman"] .booking-name { font-size: 1.2rem; }
.site[data-look="handyman"] .booking-go { color: var(--mark); }

/* --- Contact: the hammer on the bench beside the numbers. ------------------ */
.site[data-look="handyman"] .s-contact { background: var(--paper); }
.site[data-look="handyman"] .contact-list { border-top: 3px solid var(--ink); }
.site[data-look="handyman"] .contact-list li { border-bottom: 1.5px solid var(--ink); }
.site[data-look="handyman"] .contact-link { padding-block: 1.1rem 1.2rem; }
.site[data-look="handyman"] .contact-label { font-size: 1rem; font-weight: 650; color: var(--text); }
.site[data-look="handyman"] .contact-value { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.5rem); }
.site[data-look="handyman"] .contact-list li:first-child .contact-value { justify-self: start; margin-top: 0.4rem; padding: 0.3rem 1.1rem 0.15rem 0.9rem; background: var(--tape); box-shadow: 0 1px 2px rgb(0 0 0 / 0.18); clip-path: polygon(1% 4%, 99% 0, 100% 30%, 98.6% 55%, 100% 82%, 99% 100%, 1.4% 96%, 0 70%, 1.2% 45%, 0 20%); transform: rotate(-1.2deg); font-size: clamp(2.2rem, 1rem + 4vw, 4.6rem); line-height: 1; letter-spacing: -0.02em; }
.site[data-look="handyman"] .contact-link:hover .contact-value { text-decoration-color: var(--mark); text-decoration-thickness: 3px; }
.site[data-look="handyman"] .contact-also { font-size: 1rem; font-weight: 600; }
.site[data-look="handyman"] .hm-contact { background: var(--paper); border-top: 3px solid var(--ink); }
.site[data-look="handyman"] .hm-contact-photo { display: none; }
@media (min-width: 52rem) {
  .site[data-look="handyman"] .hm-contact { display: grid; grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); }
  .site[data-look="handyman"] .hm-contact-photo { display: block; width: 100%; height: 100%; min-height: 30rem; object-fit: cover; object-position: 78% 40% !important; border-right: 3px solid var(--ink); }
  .site[data-look="handyman"] .hm-contact .s-contact { align-self: center; }
  .site[data-look="handyman"] .hm-contact .s-contact .wrap { width: auto; margin: 0; padding-inline: clamp(2.5rem, 5vw, 5rem) max(var(--gap), calc((100vw - var(--wrap)) / 2)); }
  .site[data-look="handyman"] .hm-contact .contact-details { display: block; }
  .site[data-look="handyman"] .hm-contact .contact-list { margin-top: 2rem; }
}

/* --- Footer: the dark bench, its plywood edge on top. ---------------------- */
.site[data-look="handyman"] .site-footer { background: repeating-linear-gradient(178.5deg, rgb(255 255 255 / 0.025) 0 2px, transparent 2px 11px), repeating-linear-gradient(181deg, rgb(0 0 0 / 0.08) 0 1px, transparent 1px 7px), linear-gradient(175deg, #4c3522, #3a281a); background-color: #3a281a; --bg: #3a281a; --deep: #3a281a; }
.site[data-look="handyman"] .site-footer { position: relative; border-top: 0; padding-top: calc(clamp(2.75rem, 6vw, 4rem) + 14px); font-size: 1rem; }
.site[data-look="handyman"] .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: repeating-linear-gradient(to bottom, #ead3a4 0 2px, #b98e55 2px 3.5px); border-bottom: 2px solid #000; }
.site[data-look="handyman"] .footer-brand .footer-name { font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.4rem); text-transform: uppercase; line-height: 1; }

/* --- Quick bar on phones: the rule, already in base; heavier type. --------- */
@media (max-width: 51.99rem) {
  .site[data-look="handyman"] .quick { font-family: var(--font-heading); font-size: 1.15rem; letter-spacing: 0.01em; }
  .site[data-look="handyman"] .quickbar { border-top-width: 3px; }
}

/* --- Motion: the rule unfolds segment by segment; things settle in as they come into view. */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="handyman"] .duimstok { animation: hm-unfold 1.2s steps(6, jump-start) 0.15s both; }
  .site[data-look="handyman"] .s-hero .hero-text > * { animation: hm-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="handyman"] .s-hero .hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .site[data-look="handyman"] .s-hero .hero-text > :nth-child(3) { animation-delay: 0.16s; }
  @supports (animation-timeline: view()) {
    .site[data-look="handyman"] :is(.s-services .sheet, .price-tag, .hm-print, .s-testimonials .quote-list li, .s-about .hm-about-grid > .about-text, .faq-items, .hours-card, .request-form, .contact-list) {
      animation: hm-settle linear; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
    .site[data-look="handyman"] .bus { animation: hm-drive linear; animation-timeline: view(); animation-range: entry 0% cover 45%; }
  }
}
@keyframes hm-unfold { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes hm-rise { from { opacity: 0; translate: 0 1.75rem; } }
@keyframes hm-drive { from { translate: -18% 0; } }
/* Scroll-driven: movement only and no fill, so before an element comes into view (or in a static
   full-page render) it sits exactly where it belongs. */
@keyframes hm-settle { from { translate: 0 1.75rem; } }

/* ---- looks/installer.css ---- */
/* The installer look: everything here is scoped to .site[data-look="installer"]. Appended after base.css (bun run --filter @platform/sections css).
   The page as an installation drawing: the sheet on grid paper with zone
   marks, the NEN 3050 legend, a spec sheet, details of photos, the
   warning-yellow call sign, the groepenkast, the time switch, the werkbon and
   the title block. Colour is functional: pipe codes in the legend, the
   customer's colour on what you press, okergeel (RAL 1004) for the call sign. */

.site[data-look="installer"] {
  --ins-grid: #edf1f4;
  --ins-grid-major: #dde4ea;
  --ins-signal: #e4a010;
  --ins-on-signal: #111417;
  --ins-kast: #cbd0cc;
  --ins-plate: #eceeeb;
  --ins-module: #f6f6f3;
  --ins-module-edge: #9aa09b;
  --ins-slip: #fbf3c9;
  --ins-slip-2: #f9dfe4;
  --ins-gutter: max(var(--gap), (100vw - var(--wrap)) / 2);
  --fs-h1: calc(clamp(2.6rem, 0.5rem + 6.6vw, 8rem) * var(--heading-scale, 1));
  --fs-h2: calc(clamp(2.1rem, 1.2rem + 3vw, 4.4rem) * var(--heading-scale, 1));
  --fs-h3: calc(clamp(1.2rem, 1.1rem + 0.4vw, 1.45rem) * var(--heading-scale, 1));
  --mono: var(--font-figures);
}
.site[data-look="installer"] :is(h1, h2) { letter-spacing: -0.035em; line-height: 0.98; font-weight: 600; hyphens: auto; overflow-wrap: break-word; }
.site[data-look="installer"] main > .s + .s { border-top: 0; }
.site[data-look="installer"] .lead { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.45; color: var(--muted); }

/* --- Header: the sheet's top edge --------------------------------------- */
.site[data-look="installer"] .site-header { border-bottom: 2px solid var(--text); }
.site[data-look="installer"] .brand { font-weight: 600; letter-spacing: -0.02em; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); }
.site[data-look="installer"] .site-header nav a { font-family: var(--mono); font-size: 0.9rem; letter-spacing: 0.02em; }
.site[data-look="installer"] .site-header .btn { font-variant-numeric: tabular-nums; }

/* --- Hero: the drawing sheet on grid paper ------------------------------- */
.ins-hero { padding: 0; overflow: clip; }
.ins-sheet {
  position: relative; display: grid;
  background-color: var(--bg);
  background-image:
    linear-gradient(var(--ins-grid-major) 1px, transparent 1px),
    linear-gradient(90deg, var(--ins-grid-major) 1px, transparent 1px),
    linear-gradient(var(--ins-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--ins-grid) 1px, transparent 1px);
  background-size: 6rem 6rem, 6rem 6rem, 1.2rem 1.2rem, 1.2rem 1.2rem;
  background-position: -1px -1px;
}
/* Zone marks: the drawing border with numbered and lettered margins. */
.ins-zones { position: absolute; inset: 0.75rem; border: 1.5px solid var(--text); pointer-events: none; z-index: 2; font-family: var(--mono); font-size: 0.68rem; color: var(--muted); }
.ins-zones-x { position: absolute; top: 0; left: 1.25rem; right: 0; height: 1.25rem; display: flex; border-bottom: 1px solid var(--text); border-left: 1px solid var(--text); }
.ins-zones-y { position: absolute; top: 1.25rem; bottom: 0; left: 0; width: 1.25rem; display: flex; flex-direction: column; border-right: 1px solid var(--text); }
.ins-zones-x span { flex: 1; display: grid; place-items: center; background: var(--bg); }
.ins-zones-x span + span { border-left: 1px solid var(--text); }
.ins-zones-y span { flex: 1; display: grid; place-items: center; background: var(--bg); }
.ins-zones-y span + span { border-top: 1px solid var(--text); }
.ins-hero-text { container-type: inline-size; position: relative; z-index: 1; min-width: 0; padding: clamp(2.5rem, 6vw, 5.5rem) clamp(1.5rem, 4vw, 3.5rem) clamp(2.5rem, 5vw, 4.5rem) calc(var(--ins-gutter) + 1rem); align-self: center; }
.ins-hero h1 { font-size: min(var(--fs-h1), 15cqi); max-width: 12.5ch; margin-bottom: 0.32em; hyphens: auto; overflow-wrap: break-word; }
.ins-hero-text[data-length="l"] h1 { font-size: min(calc(clamp(2.4rem, 0.6rem + 5vw, 6.25rem) * var(--heading-scale, 1)), 12cqi); max-width: 14ch; }
.ins-hero-text[data-length="xl"] h1 { font-size: min(calc(clamp(2.2rem, 0.8rem + 3.4vw, 4.6rem) * var(--heading-scale, 1)), 10cqi); max-width: 17ch; }
.ins-hero .lead { max-width: 34rem; color: var(--text); }
.ins-hero .actions { margin-top: 2.25rem; }
.ins-hero .actions .btn { min-height: 56px; padding-inline: 1.6rem; font-size: 1.1rem; }

/* The number itself is the call: big, measured with a dimension line. */
.ins-hero-call { margin-top: clamp(2rem, 4vw, 3.25rem); display: grid; justify-items: start; gap: 0.25rem; }
.ins-hero-call .actions { margin: 0.35rem 0 0; }
.ins-dial { display: inline-grid; color: var(--text); text-decoration: none; max-width: 100%; }
.ins-dial-num {
  font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.15rem, 0.4rem + 8.6vw, 5.9rem); line-height: 1; letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums; white-space: nowrap;
  text-decoration: underline; text-decoration-color: var(--primary); text-decoration-thickness: 0.09em; text-underline-offset: 0.14em;
}
.ins-dial:hover .ins-dial-num { text-decoration-thickness: 0.16em; }
.ins-dial:focus-visible { outline-offset: 8px; }
.ins-dim { position: relative; display: block; height: 1.5rem; margin-bottom: 0.6rem; }
/* The dimension line, its extension lines and the slashed ticks of a Dutch drawing. */
.ins-dim::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid var(--text); }
.ins-dim::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(var(--text), var(--text)) left center / 1px 100% no-repeat,
    linear-gradient(var(--text), var(--text)) right center / 1px 100% no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--text) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) left center / 0.75rem 0.75rem no-repeat,
    linear-gradient(135deg, transparent calc(50% - 1px), var(--text) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)) right center / 0.75rem 0.75rem no-repeat;
}
.ins-dim-label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1; padding: 0 0.6rem; background: var(--bg); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; white-space: nowrap; }

/* The photo, framed inside the drawing border as detail A. */
.ins-hero-media { position: relative; margin: 0; min-width: 0; }
.ins-hero-media .ins-detail-img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }

@media (min-width: 52rem) {
  .ins-sheet { min-height: max(34rem, calc(calc(100 * var(--raam-vh)) - 4.6rem - 7.25rem)); }
  .ins-hero.has-media .ins-sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 0.74fr); }
  .ins-hero .ins-hero-media { margin: calc(0.75rem + 1.25rem + 1px) calc(0.75rem + 1.5px) calc(0.75rem + 1.5px) 0; border-left: 1.5px solid var(--text); }
  .ins-hero-media .ins-detail-img { position: absolute; inset: 0; }
}
@media (max-width: 51.99rem) {
  .ins-sheet { grid-template-columns: minmax(0, 1fr); }
  .ins-zones { inset: 0.5rem; }
  .ins-zones-x span:nth-child(n + 5) { display: none; }
  .ins-zones-y span:nth-child(n + 3) { display: none; }
  .ins-hero .ins-hero-media { order: -1; height: clamp(11rem, calc(30 * var(--raam-vh)), 17rem); margin: calc(0.5rem + 1.25rem + 1px) calc(0.5rem + 1.5px) 0 calc(0.5rem + 1.5px); border-bottom: 1.5px solid var(--text); }
  .ins-hero-media .ins-detail-img { position: absolute; inset: 0; }
  .ins-hero.has-media .ins-zones-y { display: none; }
  .ins-hero-text { padding: 1.6rem calc(var(--gap) + 0.5rem) 2.25rem calc(var(--gap) + 1.25rem); }
  .ins-hero:not(.has-media) .ins-hero-text { padding-top: 3.5rem; }
}

/* No photo: the riser diagram fills the sheet's second column. */
.ins-drawing { position: relative; z-index: 1; min-width: 0; display: grid; place-items: center; padding: 2.5rem clamp(1.5rem, 4vw, 4rem) 2rem 0; }
.ins-drawing svg { width: 100%; max-width: 34rem; height: auto; max-height: calc(calc(100 * var(--raam-vh)) - 14rem); overflow: visible; font-family: var(--mono); }
.ins-drawing :is(line, path, rect, circle) { fill: none; stroke: var(--text); stroke-width: 1.5; }
.ins-drawing .d-floor line { stroke: var(--muted); stroke-width: 1; stroke-dasharray: 18 4 2 4; }
.ins-drawing .d-box { stroke-width: 2; fill: var(--bg); }
.ins-drawing .d-thin { stroke-width: 1; fill: var(--bg); }
.ins-drawing .d-water { stroke: var(--pipe-water); stroke-width: 4; stroke-linejoin: round; }
.ins-drawing .d-gas { stroke: var(--pipe-gas); stroke-width: 4; }
.ins-drawing .d-cv { stroke-width: 2.5; stroke-linejoin: round; }
.ins-drawing .d-return { stroke-dasharray: 10 3 2 3; }
.ins-drawing .d-power { stroke-dasharray: 6 4; stroke-width: 1.5; }
.ins-drawing .d-valve { fill: var(--text); stroke: none; }
.ins-drawing .d-rad rect { fill: var(--bg); stroke-width: 2; }
.ins-drawing .d-rad line { stroke-width: 1; }
.ins-drawing .d-dim :is(line, path) { stroke-width: 1; }
.ins-drawing text { fill: var(--muted); font-size: 11px; letter-spacing: 0.04em; stroke: none; }
.ins-drawing .d-label { fill: var(--text); font-size: 10px; text-transform: uppercase; letter-spacing: 0.1em; }
.ins-drawing .d-dim text { fill: var(--text); text-anchor: middle; }
@media (min-width: 52rem) { .ins-hero.has-drawing .ins-sheet { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
@media (max-width: 51.99rem) { .ins-drawing { padding: 0 calc(var(--gap) + 0.5rem) 2.5rem calc(var(--gap) + 1.25rem); } .ins-drawing svg { max-height: 22rem; } }
@media (prefers-reduced-motion: no-preference) {
  .ins-drawing :is(.d-water, .d-gas, .d-cv) { stroke-dasharray: 1200; animation: ins-pipe 2.2s cubic-bezier(0.3, 0.6, 0.2, 1) both 0.2s; }
  .ins-drawing .d-return { animation: none; }
}
@keyframes ins-pipe { from { stroke-dashoffset: 1200; } to { stroke-dashoffset: 0; } }

/* --- Details: a photo with its reference bubble and description ----------- */
.ins-detail { margin: 0; position: relative; }
.ins-detail-img { display: block; width: 100%; object-fit: cover; background: var(--surface); }
.ins-bubble {
  display: inline-grid; place-items: center; flex: none; width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1.5px solid var(--text); background: var(--bg); color: var(--text);
  font-family: var(--mono); font-weight: 600; font-size: 1rem; line-height: 1;
}
.ins-detail figcaption { display: flex; align-items: center; gap: 0.75rem; margin-top: 0.75rem; font-size: 0.95rem; line-height: 1.35; color: var(--muted); }
.ins-detail-text { display: grid; gap: 0.1rem; min-width: 0; }
.ins-detail-name { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text); }
/* In the hero the caption sits on the photo, on a paper label. */
.ins-hero-media figcaption { position: absolute; left: 0; bottom: 0; z-index: 1; margin: 0; max-width: min(100%, 26rem); padding: 0.65rem 1rem 0.65rem 0.65rem; background: var(--bg); border-top: 1.5px solid var(--text); border-right: 1.5px solid var(--text); }
@media (max-width: 51.99rem) { .ins-hero-media figcaption { font-size: 0.85rem; padding: 0.45rem 0.75rem 0.45rem 0.45rem; } .ins-hero-media .ins-bubble { width: 2.1rem; height: 2.1rem; font-size: 0.85rem; } .ins-hero-media .ins-detail-alt { display: none; } }

/* --- NEN 3050: three pipe runs across the page ------------------------------ */
.ins-legend { margin: 0; padding: 1rem 0 1.4rem; background: var(--bg); border-top: 1.5px solid var(--text); border-bottom: 1.5px solid var(--text); font-family: var(--mono); font-size: 0.78rem; }
.ins-legend figcaption { margin-bottom: 0.55rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ins-legend ul { display: grid; gap: 0.3rem; }
.ins-run { position: relative; display: flex; align-items: center; min-height: 1.6rem; padding-left: calc(var(--ins-gutter) + 2.5rem); }
.ins-run::before { content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 9px; margin-top: -4.5px; transform-origin: left center; }
.ins-run-water::before { background: linear-gradient(rgb(255 255 255 / 0.35), transparent 45%, rgb(0 0 0 / 0.22)), var(--pipe-water); }
.ins-run-gas::before { background: linear-gradient(rgb(255 255 255 / 0.4), transparent 45%, rgb(0 0 0 / 0.18)), var(--pipe-gas); }
.ins-run-power::before { height: 0; margin-top: -1px; border-top: 2px dashed var(--text); }
.ins-tag { position: relative; z-index: 1; display: inline-flex; gap: 0.75rem; padding: 0.1rem 0.6rem; background: var(--bg); border: 1px solid var(--text); color: var(--text); white-space: nowrap; }
.ins-code { color: var(--muted); }
.ins-run:nth-child(2) { padding-left: calc(var(--ins-gutter) + 12rem); }
.ins-run:nth-child(3) { padding-left: calc(var(--ins-gutter) + 21.5rem); }
@media (max-width: 40rem) {
  .ins-run:nth-child(n) { padding-left: calc(var(--gap) + 1rem); }
}

/* --- Trust strip: the drawing's general note, under the legend ---------------- */
.ins-trust { padding-block: clamp(1.25rem, 2.5vw, 1.75rem); border-bottom: 1.5px solid var(--text); }
.ins-note { margin-block: 0; max-width: none; font-size: clamp(1.05rem, 1rem + 0.25vw, 1.2rem); line-height: 1.45; }
.ins-note-label { margin-right: 0.6rem; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* Headings beside an artefact: sized so a long Dutch word stays whole. */
@media (min-width: 64rem) {
  :is(.ins-spec-head, .ins-hours .hours-intro, .ins-area-text, .ins-faq-inner) > :is(h1, h2) { font-size: calc(clamp(2.1rem, 0.9rem + 2.4vw, 3.6rem) * var(--heading-scale, 1)); }
}

/* --- Services: the spec sheet ------------------------------------------------- */
.ins-services { background: var(--surface); padding-block: clamp(4rem, 9vw, 8rem); }
.ins-spec { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 5rem); }
.ins-spec-head h1, .ins-spec-head h2 { margin-bottom: 0.4em; }
.ins-spec-head .lead { margin: 0; }
/* The heading above the sheet, its lead beside it; the sheet runs across
   the page as a three-column schedule (work, what it is, rate). */
@media (min-width: 64rem) {
  .ins-spec-head { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr); gap: 0 clamp(2.5rem, 5vw, 5rem); align-items: end; }
  .ins-spec-head h1, .ins-spec-head h2 { margin-bottom: 0; }
  .ins-spec-row { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr) auto; align-items: baseline; }
  .ins-spec-sheet:not(.has-prices) .ins-spec-row { grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr); }
  .ins-spec-body { display: contents; }
  .ins-spec-note { margin: 0; }
  .ins-spec-sheet.has-prices .ins-spec-price { grid-column: 3; grid-row: 1; }
}
.ins-spec-sheet { background: var(--bg); border: 1.5px solid var(--text); }
.ins-spec-cols { display: flex; justify-content: space-between; gap: 1rem; margin: 0; padding: 0.6rem clamp(1rem, 2.5vw, 1.75rem); background: var(--text); color: var(--bg); font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }
.ins-spec-row { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0.35rem clamp(1.25rem, 3vw, 2.5rem); padding: clamp(1.15rem, 2.2vw, 1.6rem) clamp(1rem, 2.5vw, 1.75rem); border-top: 1px solid var(--border); transition: background-color 0.2s; }
.ins-spec-row:first-child { border-top: 0; }
.ins-spec-sheet:not(.has-prices) .ins-spec-row { grid-template-columns: minmax(0, 1fr); }
.ins-spec-row::before { content: ''; position: absolute; left: -1.5px; top: -1px; bottom: -1px; width: 5px; background: var(--text); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; }
.ins-spec-row:hover { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); }
.ins-spec-row:hover::before { transform: scaleY(1); }
.ins-spec-row :is(h2, h3) { margin: 0; font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; overflow-wrap: break-word; hyphens: auto; }
.ins-spec-note { margin: 0.4rem 0 0; color: var(--muted); max-width: 40rem; }
.ins-spec-price { margin: 0; text-align: right; font-family: var(--mono); font-weight: 500; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); line-height: 1.2; font-variant-numeric: tabular-nums; min-width: 6.5rem; }
.ins-spec-price :is(.price-from, .price-unit) { display: block; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }
.ins-spec-price .price-amount { white-space: nowrap; }
.ins-spec-none { color: var(--muted); }
/* Phones: the rate beside the name, the description under both. */
@media (max-width: 40rem) {
  .ins-spec-row { grid-template-columns: minmax(0, 1fr) auto; column-gap: 1rem; }
  .ins-spec-body { display: contents; }
  .ins-spec-row :is(h2, h3) { grid-column: 1; grid-row: 1; align-self: center; }
  .ins-spec-note { grid-column: 1 / -1; margin-top: 0.1rem; }
  .ins-spec-price { grid-column: 2; grid-row: 1; min-width: 0; }
  .ins-spec-none { display: none; }
}

/* --- Gallery: the details sheet ------------------------------------------------ */
.ins-gallery { padding-block: clamp(4rem, 8vw, 7rem); }
.ins-details { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem); grid-template-columns: repeat(12, minmax(0, 1fr)); margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.ins-details li { grid-column: span 6; min-width: 0; }
.ins-details .ins-detail-img { aspect-ratio: 4 / 3; border: 1.5px solid var(--text); }
@media (min-width: 52rem) {
  .ins-gallery:is([data-count="1"], [data-count="5"]) .ins-details li:first-child { grid-column: 1 / -1; }
  .ins-gallery:is([data-count="1"], [data-count="5"]) .ins-details li:first-child .ins-detail-img { aspect-ratio: 21 / 9; }
  .ins-gallery[data-count="3"] .ins-details li:first-child { grid-column: span 7; grid-row: span 2; display: flex; }
  .ins-gallery[data-count="3"] .ins-details li:first-child .ins-detail { display: flex; flex-direction: column; flex: 1; }
  .ins-gallery[data-count="3"] .ins-details li:first-child .ins-detail-img { flex: 1; aspect-ratio: auto; min-height: 20rem; }
  .ins-gallery[data-count="3"] .ins-details li:not(:first-child) { grid-column: span 5; }
}
@media (max-width: 51.99rem) {
  .ins-details li { grid-column: 1 / -1; }
}
/* Phones: the first detail across, the others two by two with their letter only. */
@media (max-width: 40rem) {
  .ins-details { gap: 1rem 0.75rem; }
  .ins-details li:not(:first-child) { grid-column: span 6; }
  .ins-details li:nth-child(2):last-child { grid-column: 1 / -1; }
  .ins-details li:not(:first-child) .ins-detail-alt { display: none; }
  .ins-details .ins-detail figcaption { margin-top: 0.5rem; }
}

/* --- Call to action: the call sign in warning yellow ---------------------------- */
.ins-cta { --text: var(--ins-on-signal); --muted: var(--ins-on-signal); --bg: var(--ins-signal); background: var(--ins-signal); color: var(--ins-on-signal); padding-block: clamp(3.5rem, 8vw, 7rem); border-block: 3px solid var(--ins-on-signal); }
.ins-cta-inner { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: end; }
@media (min-width: 64rem) { .ins-cta-inner { grid-template-columns: minmax(0, 1fr) auto; } }
.ins-cta h1, .ins-cta h2 { font-size: calc(clamp(2.5rem, 1rem + 5vw, 6.5rem) * var(--heading-scale, 1)); margin-bottom: 0.25em; max-width: 14ch; overflow-wrap: break-word; hyphens: auto; }
.ins-cta-text p { margin: 0; font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem); line-height: 1.45; max-width: 36rem; }
.ins-hero .ins-dial-num { font-size: clamp(2rem, 12cqi, 5.9rem); }
.ins-dial-cta .ins-dial-num { font-size: clamp(2.15rem, 0.4rem + 8.6vw, 5.25rem); text-decoration-color: var(--ins-on-signal); }
.ins-cta .btn { min-height: 56px; padding-inline: 1.6rem; font-size: 1.1rem; border-color: var(--ins-on-signal); }

/* --- Service area: the groepenkast --------------------------------------------- */
.ins-area { background: var(--ins-kast); color: #111417; --text: #111417; --muted: #3a3f44; padding-block: clamp(4rem, 8vw, 7rem); }
.ins-area-inner { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 64rem) { .ins-area-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr); } }
.ins-area .area-body { color: var(--muted); max-width: 30rem; font-size: 1.1rem; }
/* The cover plate with the row(s) of groups behind its cut-out. */
.ins-kast { position: relative; padding: clamp(1.25rem, 3vw, 2rem); background: var(--ins-plate); border: 1px solid var(--ins-module-edge); border-radius: 6px; box-shadow: inset 0 1px 0 #fff, 0 1px 0 rgb(0 0 0 / 0.12), 0 22px 40px -30px rgb(0 0 0 / 0.55); }
.ins-groups { display: flex; flex-wrap: wrap; align-items: flex-end; row-gap: 1.5rem; }
.ins-group { position: relative; display: flex; flex-direction: column; width: clamp(6rem, 4.6rem + 3vw, 7.75rem); }
/* Each group writes its place on the label strip above it, as in any meterkast. */
.ins-group-label {
  display: grid; place-items: center; min-height: 3rem; margin: 0 0.15rem 0.6rem; padding: 0.3rem 0.4rem;
  background: #fff; border: 1px solid var(--ins-module-edge); color: #111417;
  font-family: var(--mono); font-size: 0.85rem; line-height: 1.2; text-align: center; overflow-wrap: anywhere; hyphens: auto;
}
/* The DIN rail runs behind the modules. */
.ins-group::before { content: ''; position: absolute; left: 0; right: 0; bottom: 2.4rem; height: 1.2rem; background: linear-gradient(#c9cdc9, #a7aca8 40%, #d8dbd8 60%, #9fa49f); border-block: 1px solid #8c918c; }
.ins-breaker { position: relative; z-index: 1; height: 7rem; margin-inline: 1px; background: linear-gradient(90deg, #e4e5e1, var(--ins-module) 18%, var(--ins-module) 82%, #e1e2de); border: 1px solid var(--ins-module-edge); border-radius: 2px 2px 3px 3px; }
.ins-breaker::before { content: ''; position: absolute; left: 50%; top: 1.15rem; width: 1.55rem; height: 2.7rem; transform: translateX(-50%); background: #3a3f44; border-radius: 2px; box-shadow: inset 0 2px 3px rgb(0 0 0 / 0.5); }
.ins-lever { position: absolute; left: 50%; top: 1.15rem; width: 1.35rem; height: 1.45rem; margin-left: -0.675rem; background: linear-gradient(#5d646b, #2b2f33); border-radius: 2px; box-shadow: 0 2px 0 rgb(0 0 0 / 0.35); transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.ins-breaker::after { content: ''; position: absolute; left: 22%; right: 22%; bottom: 1.1rem; height: 0.45rem; border-block: 1px solid #c4c7c3; }
.ins-group:hover .ins-lever { transform: translateY(-2px); }
.ins-group:hover .ins-group-label { border-color: #111417; }

/* --- Opening hours: the time switch's week programme ---------------------------- */
.ins-hours { background: var(--surface); padding-block: clamp(4rem, 8vw, 7rem); }
.ins-hours-inner { display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 64rem) { .ins-hours-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr); } }
.ins-hours .hours-place { font-size: 1.05rem; }
.ins-hours .hours-call { margin-top: 1.25rem; font-size: 1.25rem; }
.ins-clock { --day: 12.5rem; --time: 8.5rem; background: var(--bg); border: 1.5px solid var(--text); padding: 1.25rem clamp(1rem, 2.5vw, 1.75rem) 0.75rem; min-width: 0; }
.ins-clock-axis { position: relative; height: 1.1rem; margin: 0 var(--time) 0.35rem var(--day); font-family: var(--mono); font-size: 0.72rem; color: var(--muted); }
.ins-clock-axis span { position: absolute; top: 0; transform: translateX(-50%); }
.ins-clock-table { table-layout: fixed; }
.ins-clock-table th { width: var(--day); white-space: normal; padding-right: 0.75rem; }
.ins-clock-table td.ins-clock-time { width: var(--time); font-size: 1rem; white-space: normal; padding-left: 0.75rem; }
.ins-clock-table th, .ins-clock-table td { border-bottom-color: var(--border); }
.ins-clock-table tr:last-child :is(th, td) { border-bottom: 0; }
.ins-range { white-space: nowrap; }
.ins-clock-bar { padding-inline: 0 !important; vertical-align: middle !important; }
.ins-track {
  position: relative; display: block; height: 1rem;
  background: repeating-linear-gradient(90deg, var(--border) 0 1px, transparent 1px calc(100% / 24)) 0 0 / 100% 100%, color-mix(in srgb, var(--surface) 60%, var(--bg));
  border: 1px solid var(--muted);
}
.ins-on { position: absolute; top: -1px; bottom: -1px; background: var(--primary); border: 1px solid var(--text); }
@media (max-width: 40rem) {
  .ins-area { padding-block: 3.5rem; }
  .ins-kast { padding: 1rem; }
  .ins-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 1rem; }
  .ins-group { width: auto; }
  .ins-group-label { min-height: 2.6rem; margin-bottom: 0.45rem; padding-inline: 0.2rem; }
  .ins-breaker { height: 4.75rem; }
  .ins-breaker::before, .ins-lever { top: 0.75rem; }
  .ins-breaker::before { height: 2.1rem; }
  .ins-breaker::after { bottom: 0.7rem; }
  .ins-group::before { bottom: 1.6rem; height: 0.9rem; }
  .ins-hours, .ins-services, .ins-gallery { padding-block: 3.5rem; }
  .ins-spec-row { padding-block: 1rem; }
  .ins-clock { --day: auto; --time: 7.25rem; }
  .ins-clock-table td.ins-clock-time { font-size: 0.95rem; text-align: right; }
  .ins-group-label { font-size: 0.78rem; }
  .ins-clock-axis, .ins-clock-bar { display: none; }
  .ins-clock-table th { width: auto; }
}

/* --- About: a detail beside the text, facts in boxed fields ----------------------- */
.ins-about { padding: 0; display: grid; }
.ins-about-text { padding: clamp(3.5rem, 8vw, 7rem) var(--ins-gutter); max-width: calc(46rem + 2 * var(--gap)); }
.ins-about-text > p { max-width: 38rem; }
.ins-about-text > p:first-of-type { font-size: clamp(1.15rem, 1.05rem + 0.4vw, 1.35rem); line-height: 1.5; }
.ins-about-media .ins-detail-img { width: 100%; height: 100%; aspect-ratio: 4 / 3; }
.ins-about-media figcaption { position: absolute; left: 1rem; top: 1rem; margin: 0; }
.ins-about-media .ins-detail-text { display: none; }
@media (min-width: 52rem) {
  .ins-about.has-media { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ins-about.has-media .ins-about-text { padding-left: clamp(2.5rem, 5vw, 5rem); padding-right: var(--ins-gutter); align-self: center; }
  .ins-about.about-image_right .ins-about-media { order: 2; }
  .ins-about.about-image_right .ins-about-text { padding-left: var(--ins-gutter); padding-right: clamp(2.5rem, 5vw, 5rem); justify-self: end; }
  .ins-about-media { position: relative; min-height: 34rem; border-right: 1.5px solid var(--text); }
  .ins-about.about-image_right .ins-about-media { border-right: 0; border-left: 1.5px solid var(--text); }
  .ins-about-media .ins-detail-img { position: absolute; inset: 0; aspect-ratio: auto; }
}
.ins-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr)); margin: 2rem 0 0; border-top: 1px solid var(--text); border-left: 1px solid var(--text); max-width: 38rem; }
.ins-facts div { padding: 0.6rem 0.9rem 0.75rem; border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); }
.ins-facts dt { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ins-facts dd { margin: 0.15rem 0 0; font-size: 1.25rem; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }

/* --- Reviews: the customer's note on the werkbon (carbon copies) -------------------- */
.ins-reviews { background: var(--surface); padding-block: clamp(4rem, 8vw, 7rem); }
.ins-slips { display: grid; gap: clamp(1.5rem, 3vw, 2.5rem); grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); margin-top: clamp(1.5rem, 3vw, 2.5rem); align-items: start; }
.ins-slips[data-count="1"] { grid-template-columns: minmax(0, 48rem); }
.ins-slip { --text: #111417; --muted: #4b525a; position: relative; padding: 1.5rem clamp(1.25rem, 3vw, 2rem) 1.6rem; background: var(--ins-slip); color: var(--text); box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 18px 30px -24px rgb(0 0 0 / 0.55); transition: translate 0.3s ease; }
.ins-slip:nth-child(2n) { background: var(--ins-slip-2); }
/* The perforated edge where it was torn off the pad. */
.ins-slip::before { content: ''; position: absolute; left: 0; right: 0; top: -5px; height: 10px; background: radial-gradient(circle at 7px 5px, var(--surface) 3.5px, transparent 4px) 0 0 / 14px 10px repeat-x; }
.ins-slip:hover { translate: 0 -4px; }
.ins-slip-head { display: flex; justify-content: space-between; gap: 1rem; margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1.5px solid var(--text); font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.1em; text-transform: uppercase; }
.ins-slip-firm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); letter-spacing: 0.04em; }
.ins-slip figure { margin: 0; }
.ins-slip-field { margin: 0; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.ins-slip blockquote { margin: 0.4rem 0 1rem; }
.ins-slip blockquote p {
  margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); line-height: 1.5; letter-spacing: -0.01em;
  background: repeating-linear-gradient(transparent 0 calc(1.5em - 1px), rgb(17 20 23 / 0.2) calc(1.5em - 1px) 1.5em);
}
.ins-slip figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; padding-top: 0.65rem; border-top: 1px dotted var(--text); }
.ins-slip-name { font-weight: 600; font-size: 1.05rem; }

/* --- FAQ: each answer behind a valve ------------------------------------------------ */
.ins-faq { padding-block: clamp(4rem, 8vw, 7rem); }
.ins-faq-inner { display: grid; gap: clamp(1.5rem, 3vw, 2rem) clamp(2.5rem, 5vw, 5rem); align-items: start; }
@media (min-width: 64rem) { .ins-faq-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr); } .ins-faq-inner > :is(h1, h2) { position: sticky; top: 7rem; } }
.ins-faq .faq-items { margin-top: 0; max-width: none; }
.ins-faq .faq-items details { border-bottom: 1px solid var(--text); }
.ins-faq .faq-items details:first-child { border-top: 2px solid var(--text); }
.ins-faq .faq-items summary { min-height: 4.5rem; padding-block: 1rem; font-size: clamp(1.1rem, 1.02rem + 0.35vw, 1.3rem); line-height: 1.3; gap: 1.5rem; }
.ins-faq .faq-items summary::after { content: none; }
.ins-faq .faq-items summary:hover > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
.ins-faq .faq-items details p { color: var(--muted); font-size: 1.0625rem; max-width: 44rem; padding-right: 3rem; }
/* The valve symbol on its pipe: filled while closed, open (hollow) with the handle along the pipe. */
.ins-valve { position: relative; flex: none; width: 3rem; height: 1.6rem; background: linear-gradient(var(--text), var(--text)) left 62% / 100% 1.5px no-repeat; }
.ins-valve::before, .ins-valve::after { content: ''; position: absolute; left: 0.6rem; right: 0.6rem; top: 0.45rem; bottom: 0; clip-path: polygon(0 0, 100% 100%, 100% 0, 0 100%); }
.ins-valve::before { background: var(--text); }
.ins-valve::after { background: var(--bg); transform: scale(0.55); opacity: 0; transition: opacity 0.2s; }
.ins-valve-handle { position: absolute; left: 50%; top: 0; width: 1.2rem; height: 0.9rem; margin-left: -0.6rem; border-top: 2px solid var(--text); background: linear-gradient(var(--text), var(--text)) center / 1.5px 100% no-repeat; transform-origin: 50% 100%; transform: rotate(90deg) translateX(-0.2rem); transition: transform 0.3s ease; }
.ins-faq details[open] .ins-valve::after { opacity: 1; }
.ins-faq details[open] .ins-valve-handle { transform: none; }
.ins-faq dl.faq-items > div { padding-block: 1.25rem; border-top: 1px solid var(--text); }
.ins-faq dl.faq-items dt { margin: 0; font-size: 1.2rem; }

/* --- Contact: dark, the number first and big; the form on a white sheet ---------- */
.site[data-look="installer"] .s-contact {
  --bg: var(--deep); --surface: var(--deep); --text: var(--on-deep); --muted: var(--deep-muted); --border: color-mix(in srgb, var(--on-deep) 28%, transparent);
  background-color: var(--deep); color: var(--on-deep); padding-block: clamp(4rem, 8vw, 7rem);
  background-image: linear-gradient(color-mix(in srgb, var(--on-deep) 6%, transparent) 1px, transparent 1px), linear-gradient(90deg, color-mix(in srgb, var(--on-deep) 6%, transparent) 1px, transparent 1px);
  background-size: 1.2rem 1.2rem;
}
.site[data-look="installer"] .s-contact .lead { color: var(--muted); }
.site[data-look="installer"] .contact-list { border-top: 2px solid var(--text); }
.site[data-look="installer"] .contact-label { font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; }
.site[data-look="installer"] .contact-value { font-weight: 600; letter-spacing: -0.025em; }
.site[data-look="installer"] .contact-list li:first-child .contact-value { font-size: clamp(2.3rem, 0.9rem + 4.6vw, 5rem); letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.site[data-look="installer"] .contact-list li:first-child .contact-link { padding-block: 1.25rem 1.4rem; }
.site[data-look="installer"] .contact-also { margin-top: -0.9rem; }
.site[data-look="installer"] .s-contact :is(h1, h2) { max-width: 14ch; }
/* Forms (contact, request) on a white sheet with the drawing border. */
.site[data-look="installer"] :is(.contact-form, .request-form) {
  --bg: var(--sheet); --surface: var(--sheet); --text: var(--on-sheet); --muted: var(--sheet-muted); --border: #c7ccd1;
  background: var(--sheet); color: var(--on-sheet); border: 1.5px solid var(--on-sheet); outline: 1px solid var(--on-sheet); outline-offset: 5px; padding: clamp(1.25rem, 3vw, 2rem);
}
.site[data-look="installer"] .s-contact :is(.contact-form) { outline-color: var(--deep-muted); }
.site[data-look="installer"] :is(.contact-form, .request-form) label { font-family: var(--mono); font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; }
.site[data-look="installer"] :is(.contact-form, .request-form) :is(.field-check label, .opt) { font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; }
.site[data-look="installer"] :is(.contact-form, .request-form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 0; border-bottom: 1.5px solid var(--on-sheet); background: color-mix(in srgb, #eef2f5 70%, #fff); }
.site[data-look="installer"] .request-step > legend { font-weight: 600; letter-spacing: -0.02em; }
.site[data-look="installer"] .s-request { background: var(--surface); padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="installer"] .s-booking { padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="installer"] .s-booking .booking-services { margin-top: 2rem; border: 1.5px solid var(--text); border-top-width: 6px; background: var(--bg); position: relative; }
.site[data-look="installer"] .s-booking .booking-services li { padding-inline: clamp(1rem, 2.5vw, 1.75rem); }
.site[data-look="installer"] .s-booking .booking-services li:last-child { border-bottom: 0; }
.site[data-look="installer"] .booking-meta { font-size: 0.85rem; letter-spacing: 0.02em; }
.site[data-look="installer"] .booking-name { font-size: var(--fs-h3); letter-spacing: -0.015em; }
.site[data-look="installer"] .booking-go { font-family: var(--mono); font-size: 0.9rem; text-decoration-color: var(--primary); text-decoration-thickness: 3px; }
.site[data-look="installer"] .s-booking-flow .booking-choices a { border-radius: 0; }

/* A subpage opens on its first section, set as the sheet's title. */
.site[data-look="installer"] main > .s:first-child:not(.s-hero) { border-top: 0; }
.site[data-look="installer"] main > .s:first-child:not(.s-hero) h1 { font-size: calc(clamp(2.6rem, 1rem + 4.6vw, 6.25rem) * var(--heading-scale, 1)); max-width: 14ch; }
.site[data-look="installer"] main > .ins-about.has-media:first-child h1 { font-size: calc(clamp(2.4rem, 1rem + 3.4vw, 4.75rem) * var(--heading-scale, 1)); }

/* --- Footer: the title block ------------------------------------------------------ */
.site[data-look="installer"] .ins-footer {
  --bg: var(--sheet); --surface: var(--sheet); --text: var(--on-sheet); --muted: var(--sheet-muted); --border: var(--on-sheet);
  background: var(--sheet); color: var(--on-sheet); border-top: 2px solid var(--on-sheet); padding-block: clamp(2.5rem, 5vw, 4rem) 1.5rem; font-size: 1rem;
}
.ins-block { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 13.5rem), 1fr)); border: 2px solid var(--text); outline: 1px solid var(--text); outline-offset: 5px; }
.ins-field { min-width: 0; padding: 0.7rem 1rem 0.9rem; border-right: 1px solid var(--text); border-bottom: 1px solid var(--text); margin: 0 -1px -1px 0; }
.ins-field-name { grid-column: 1 / -1; padding-block: 1rem 1.25rem; }
.ins-field-wide { grid-column: span 2; }
@media (max-width: 40rem) {
  .ins-field-wide { grid-column: 1 / -1; }
  /* Phones: the short fields two by two, so the title block stays a block. */
  .ins-block { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ins-field[data-field="email"] { grid-column: 1 / -1; }
  .ins-field { padding: 0.6rem 0.75rem 0.75rem; }
}
.ins-field-label { margin: 0 0 0.3rem; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.ins-field-value :is(p, ul) { margin: 0; }
.ins-field-value a { text-decoration: none; }
.ins-field-value a:hover { text-decoration: underline; }
.ins-field-value { overflow-wrap: anywhere; }
.ins-footer .footer-name { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.9rem, 1rem + 3.4vw, 4.5rem); letter-spacing: -0.04em; line-height: 1; overflow-wrap: break-word; hyphens: auto; color: var(--text); }
.ins-footer-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.5rem; font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.ins-footer-links a { display: inline-flex; min-height: 44px; align-items: center; }

/* --- Quick bar (phones): a strip of the drawing --------------------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="installer"] .quickbar { --on-deep: var(--text); background: var(--bg); border-top: 2px solid var(--text); }
  .site[data-look="installer"] .quick { font-size: 1.05rem; }
  .site[data-look="installer"] .quick + .quick { border-left-color: var(--text); }
}

/* --- Motion: pipes drawn in, sections set down as you scroll ------------------------- */
@media (prefers-reduced-motion: no-preference) {
  .ins-run::before { animation: ins-draw 1.1s cubic-bezier(0.25, 0.8, 0.25, 1) both; }
  .ins-run:nth-child(2)::before { animation-delay: 0.15s; }
  .ins-run:nth-child(3)::before { animation-delay: 0.3s; }
  @supports (animation-timeline: view()) {
    .site[data-look="installer"] main > .s:not(.ins-hero) > .wrap > *,
    .ins-about-text,
    .ins-slip, .ins-group {
      animation: ins-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 35%;
    }
  }
}
@keyframes ins-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes ins-rise { from { opacity: 0; transform: translateY(1.5rem); } to { opacity: 1; transform: none; } }

/* --- Rhythm: a heading-beside-artefact section that follows another one is
   mirrored (artefact left), so no two neighbours share a layout, whatever
   order the customer chose. A third in a row turns back, a fourth mirrors. */
@media (min-width: 64rem) {
  :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) :is(.ins-area-inner, .ins-hours-inner, .ins-faq-inner) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr); }
  :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) :is(.ins-area-inner, .ins-hours-inner, .ins-faq-inner) > :first-child { order: 2; }
  :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) :is(.ins-area-inner, .ins-hours-inner, .ins-faq-inner) { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.45fr); }
  :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) :is(.ins-area-inner, .ins-hours-inner, .ins-faq-inner) > :first-child { order: 0; }
  :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) :is(.ins-area-inner, .ins-hours-inner, .ins-faq-inner) { grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.9fr); }
  :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) + :is(.ins-services, .ins-area, .ins-hours, .ins-faq) :is(.ins-area-inner, .ins-hours-inner, .ins-faq-inner) > :first-child { order: 2; }
}
/* Reviews: two werkbonnen side by side at most. */
@media (min-width: 52rem) { .ins-slips:not([data-count="1"]) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- looks/painter.css ---- */
/* The painter look: everything here is scoped to .site[data-look="painter"]. Appended after base.css (bun run --filter @platform/sections css).
   The world of the kleurwaaier: painted fields that print their RAL code in a
   corner, the fan's blades for the services, masking tape, an aluminium
   ladder, Dutch gevels. Colours of a field come in as --field / --on-field
   (inline, black or white chosen by contrast in painter.tsx). */

.site[data-look="painter"] {
  --tape: #e7dcb8;
  --tape-ink: #2b2720;
  --alu: #a1a1a0;
  --alu-hi: #d9dad6;
  --hand: "Kalam", "Kalam fallback", "Comic Sans MS", cursive;
  --fs-base: 1.0625rem;
  --fs-h2: clamp(2.25rem, 1.35rem + 3vw, 4.25rem);
  --fs-h3: clamp(1.3rem, 1.05rem + 0.9vw, 1.85rem);
  --fs-h1: clamp(2.6rem, 1.5rem + 4.4vw, 5.5rem);
  --pt-edge: max(var(--gap), (100cqw - var(--wrap)) / 2);
}
@media (min-width: 64rem) { .site[data-look="painter"] { --fs-base: 1.125rem; } }
.site[data-look="painter"] :is(h1, h2) { font-weight: 820; letter-spacing: -0.035em; line-height: 0.98; }
.site[data-look="painter"] h3, .site[data-look="painter"] .h3 { font-weight: 760; letter-spacing: -0.02em; }
.site[data-look="painter"] main > .s + .s { border-top: 0; }
/* Full-bleed fields line their text up with .wrap: measured on main, so a classic scrollbar doesn't shift it. */
.site[data-look="painter"] main { container-type: inline-size; }
.site[data-look="painter"] p { hyphens: auto; }

/* --- The print on a painted field: code and name, in a corner ------------ */
.site[data-look="painter"] .pt-label {
  display: flex; flex-wrap: wrap; gap: 0 0.6em; margin: 0;
  font-size: 0.78rem; line-height: 1.3; letter-spacing: 0.01em; color: var(--on-field);
}
.site[data-look="painter"] .pt-label-code { font-weight: 750; }

/* --- Masking tape: crepe paper, torn ends ------------------------------- */
.site[data-look="painter"] .pt-tape,
.site[data-look="painter"] .pt-tape-note,
.site[data-look="painter"] .pt-trust li {
  background-color: var(--tape);
  background-image:
    repeating-linear-gradient(90deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(80 60 20 / 0.07));
}

/* --- Header ----------------------------------------------------------------- */
.site[data-look="painter"] .site-header { border-bottom: 0; }
.site[data-look="painter"] .brand { font-weight: 850; letter-spacing: -0.03em; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); }

/* --- Hero: a painted field, the photo, the fan across the seam ----------- */
.site[data-look="painter"] .pt-hero { padding: 0; display: grid; position: relative; overflow: clip; background: var(--bg); }
.site[data-look="painter"] .pt-hero-field {
  position: relative; display: flex; flex-direction: column; justify-content: flex-end;
  background: var(--field); color: var(--on-field);
  --text: var(--on-field); --muted: color-mix(in srgb, var(--on-field) 84%, var(--field));
  padding: clamp(4.5rem, 9vw, 7rem) clamp(2.5rem, 5vw, 6rem) clamp(4rem, 7vw, 6rem) var(--pt-edge);
}
.site[data-look="painter"] .pt-hero h1, .site[data-look="painter"] .pt-hero h2 {
  font-size: clamp(3rem, 1.4rem + 5.6vw, 7.25rem); line-height: 0.92; letter-spacing: -0.045em; font-weight: 860;
  max-width: 11ch; margin-bottom: 0.3em; overflow-wrap: break-word; hyphens: auto;
}
.site[data-look="painter"] .pt-hero.pt-len-m :is(h1, h2) { font-size: clamp(2.5rem, 1.3rem + 4.2vw, 5.75rem); max-width: 13ch; }
.site[data-look="painter"] .pt-hero.pt-len-l :is(h1, h2) { font-size: clamp(2.1rem, 1.2rem + 3vw, 4.25rem); max-width: 17ch; line-height: 0.98; }
.site[data-look="painter"] .pt-hero .lead { color: var(--muted); max-width: 34rem; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.35rem); }
.site[data-look="painter"] .pt-hero .btn-primary { box-shadow: 0 0 0 2px var(--on-field); min-height: 56px; padding-inline: 1.7rem; font-size: 1.08rem; }
.site[data-look="painter"] .pt-hero .cta-alt { color: var(--on-field); }
.site[data-look="painter"] .pt-hero-media { position: relative; min-height: 22rem; background: var(--surface); }
.site[data-look="painter"] .pt-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="painter"] .pt-tape-hero { position: absolute; left: 0; right: 0; bottom: 0; height: 1.5rem; z-index: 3; box-shadow: 0 -1px 0 rgb(0 0 0 / 0.08); }
@media (min-width: 52rem) {
  .site[data-look="painter"] .pt-hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); min-height: min(calc(calc(100 * var(--raam-vh)) - 4.5rem), 62rem); }
  .site[data-look="painter"] .pt-hero-media { min-height: 0; }
  /* Text sits in the middle of the field, so the button clears the first screen even under the gallery's demo bar. */
  .site[data-look="painter"] .pt-hero-field { justify-content: center; padding-block: clamp(3.5rem, 6vw, 5.5rem); }
}
@media (max-width: 51.99rem) {
  .site[data-look="painter"] .pt-hero { min-height: calc(calc(100 * var(--raam-vh)) - 3.75rem - 52px - var(--vb-bar, 0px)); grid-template-rows: auto 1fr; }
  .site[data-look="painter"] .pt-hero-media { order: -1; height: clamp(9rem, calc(calc(30 * var(--raam-vh)) - var(--vb-bar, 0px)), 16rem); min-height: 0; }
  @media (min-width: 40rem) { .site[data-look="painter"] .pt-hero-media { height: calc(34 * var(--raam-vh)); max-height: 24rem; } }
  .site[data-look="painter"] .pt-hero-field { padding-top: 2rem; padding-bottom: 3.25rem; }
  .site[data-look="painter"] .pt-hero.no-photo .pt-hero-media { height: clamp(7rem, calc(calc(18 * var(--raam-vh)) - var(--vb-bar, 0px)), 10rem); min-height: 0; }
  .site[data-look="painter"] .pt-hero .actions { margin-top: 1.25rem; }
}

/* The fan: blades round one bolt, half open. */
.site[data-look="painter"] .pt-fan {
  --blade: clamp(2.4rem, 3.2vw, 3.4rem); --len: clamp(13rem, 24vw, 24rem);
  position: absolute; z-index: 2; left: calc(var(--blade) * -0.5); bottom: 5.5rem; width: 0; height: 0;
}
.site[data-look="painter"] .pt-fan-blade {
  position: absolute; left: calc(var(--blade) / -2); bottom: calc(var(--blade) / -2);
  width: var(--blade); height: var(--len);
  background: var(--field); color: var(--on-field);
  border-radius: 0.35rem 0.35rem calc(var(--blade) / 2) calc(var(--blade) / 2);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.12), 0 2px 6px rgb(0 0 0 / 0.18);
  transform-origin: 50% calc(100% - var(--blade) / 2);
  rotate: calc(var(--i) * 8deg);
  display: flex; justify-content: center; padding-top: 0.7rem;
}
.site[data-look="painter"] .pt-fan-blade span { writing-mode: vertical-rl; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; white-space: nowrap; hyphens: manual; }
/* The hero field's own colour, pulled out past the others: longer, on top, its full name printed. */
.site[data-look="painter"] .pt-fan-blade.is-pulled { rotate: 76deg; height: calc(var(--len) * 1.1); z-index: 1; box-shadow: 0 0 0 1px rgb(255 255 255 / 0.55), 0 6px 14px rgb(0 0 0 / 0.32); }
.site[data-look="painter"] .pt-fan-blade.is-pulled { align-items: flex-start; padding-top: 0.9rem; }
.site[data-look="painter"] .pt-fan-blade.is-pulled span { font-size: 0.8rem; letter-spacing: 0.02em; rotate: 180deg; }
.site[data-look="painter"] .pt-fan-bolt {
  position: absolute; left: -0.55rem; bottom: -0.55rem; width: 1.1rem; height: 1.1rem; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #f2f2ee, #8d8e8b 70%); box-shadow: 0 1px 2px rgb(0 0 0 / 0.5);
}
.site[data-look="painter"] .pt-hero.no-photo .pt-hero-media { background: var(--bg); min-height: 20rem; }
.site[data-look="painter"] .pt-hero.no-photo .pt-fan { --len: clamp(15rem, 30vw, 30rem); --blade: clamp(2.6rem, 3.6vw, 3.8rem); left: clamp(3rem, 8vw, 7rem); bottom: 3.5rem; }
@media (max-width: 51.99rem) {
  .site[data-look="painter"] .pt-fan { --len: clamp(8rem, calc(21 * var(--raam-vh)), 12rem); --blade: 1.9rem; left: 2.25rem; bottom: 1.4rem; }
  .site[data-look="painter"] .pt-fan-blade span { font-size: 0.62rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="painter"] .pt-fan-blade { animation: pt-fan-open 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) both; animation-delay: 0.15s; }
}
@keyframes pt-fan-open { from { rotate: 0deg; } }

/* --- Services: the fan opened flat; each service a blade ------------------ */
.site[data-look="painter"] .pt-services { overflow: clip; padding-top: clamp(4.5rem, 9vw, 8rem); }
.site[data-look="painter"] .pt-head { display: grid; gap: 0.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.site[data-look="painter"] .pt-head :is(h1, h2) { margin: 0; max-width: 14ch; }
.site[data-look="painter"] .pt-head .lead { margin: 0; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="painter"] .pt-blades { margin-top: clamp(2rem, 4vw, 3.5rem); border: 0; display: grid; gap: 0.45rem; }
.site[data-look="painter"] .pt-blade {
  --muted: var(--on-field); --text: var(--on-field);
  position: relative; display: grid; align-items: center;
  grid-template-columns: 3.25rem minmax(0, 9.5rem) minmax(0, 1fr) auto;
  gap: 0.25rem clamp(1rem, 2.4vw, 2.25rem);
  min-height: clamp(6.5rem, 8vw, 8rem); padding: 1.1rem clamp(1.1rem, 3vw, 2.5rem) 1.1rem 0;
  background: var(--field); color: var(--on-field); border: 0;
  border-radius: 3.5rem 0.5rem 0.5rem 3.5rem;
  transform-origin: 1.65rem 50%;
}
.site[data-look="painter"] .pt-blade-hole {
  justify-self: center; width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--bg);
  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.45), 0 0 0 3px color-mix(in srgb, var(--on-field) 22%, transparent);
}
.site[data-look="painter"] .pt-blade .chip {
  display: grid; align-content: center; gap: 0.1rem; align-self: stretch;
  font-size: 0.8rem; line-height: 1.25; padding-right: 1rem;
  border-right: 1px solid color-mix(in srgb, var(--on-field) 28%, transparent);
}
.site[data-look="painter"] .pt-blade .chip-code { font-weight: 760; font-size: 0.86rem; }
.site[data-look="painter"] .pt-blade :is(.chip-code, .chip-name) { white-space: nowrap; hyphens: manual; }
.site[data-look="painter"] .pt-blade :is(h2, h3) { font-size: clamp(1.3rem, 1rem + 1.1vw, 2rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin: 0; }
.site[data-look="painter"] .pt-blade .service-note { color: var(--muted); margin-top: 0.3rem; max-width: 44rem; }
@media (max-width: 47.99rem) { .site[data-look="painter"] .pt-services.is-long .pt-blade .service-note { font-size: 1rem; } }
.site[data-look="painter"] .pt-blade .price { font-variant-numeric: tabular-nums; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.6rem); font-weight: 780; text-align: right; font-family: var(--font-figures); letter-spacing: -0.01em; }
.site[data-look="painter"] .pt-blade :is(.price-from, .price-unit) { font-size: 0.68em; font-weight: 500; }
.site[data-look="painter"] .pt-services.is-long .pt-blade { min-height: 5rem; padding-block: 0.8rem; }
.site[data-look="painter"] .pt-services.is-long .pt-blade :is(h2, h3) { font-size: clamp(1.15rem, 1rem + 0.6vw, 1.45rem); }
.site[data-look="painter"] .pt-services .sheet-foot { margin-top: 1.25rem; }
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .pt-blade { grid-template-columns: 2.5rem minmax(0, 1fr); padding: 1rem 1.1rem 1.1rem 0; border-radius: 2.5rem 0.5rem 0.5rem 2.5rem; transform-origin: 1.25rem 2rem; align-items: start; }
  .site[data-look="painter"] .pt-blade-hole { grid-row: 1; margin-top: 0.15rem; width: 1rem; height: 1rem; }
  .site[data-look="painter"] .pt-blade .chip { grid-column: 2; display: flex; gap: 0.5em; border: 0; padding: 0; font-size: 0.78rem; }
  .site[data-look="painter"] .pt-blade .service-body { grid-column: 2; }
  .site[data-look="painter"] .pt-blade .price { grid-column: 2; text-align: left; margin-top: 0.4rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="painter"] .pt-blade { transition: rotate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
  .site[data-look="painter"] .pt-blade:hover { rotate: -1.4deg; }
  @supports (animation-timeline: view()) {
    .site[data-look="painter"] .pt-blade { animation: pt-blade-open linear; animation-fill-mode: none; animation-timeline: view(); animation-range: entry 10% cover 30%; }
  }
}
@keyframes pt-blade-open { from { rotate: calc(-2deg - var(--i) * 1.2deg); } to { rotate: 0deg; } }

/* --- Gallery: photos on an antraciet wall, notes on tape ------------------ */
.site[data-look="painter"] .pt-gallery {
  background: var(--field); color: var(--on-field); --text: var(--on-field); --muted: color-mix(in srgb, var(--on-field) 84%, var(--field));
  padding-block: clamp(4.5rem, 9vw, 8rem);
}
.site[data-look="painter"] .pt-gallery :is(h1, h2) { max-width: 16ch; }
.site[data-look="painter"] .pt-wall { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 2.2vw, 2rem) clamp(0.75rem, 1.5vw, 1.25rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
.site[data-look="painter"] .pt-wall li { position: relative; background: none; min-width: 0; }
.site[data-look="painter"] .pt-wall img { width: 100%; height: 100%; min-height: 14rem; max-height: 22rem; aspect-ratio: auto; object-fit: cover; background: color-mix(in srgb, var(--on-field) 12%, var(--field)); }
@media (max-width: 47.99rem) {
  /* Phones: a strip to swipe through, the next photo peeking in. */
  .site[data-look="painter"] .pt-wall { display: flex; gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(-1 * var(--gap)); padding: 0 var(--gap) 1.5rem; scroll-padding-inline: var(--gap); scrollbar-width: thin; }
  .site[data-look="painter"] .pt-wall li { flex: 0 0 84%; scroll-snap-align: start; }
  .site[data-look="painter"] .pt-wall img { height: 17rem; min-height: 0; }
  .site[data-look="painter"] .pt-tape-note { font-size: 0.95rem; }
}
@media (min-width: 48rem) {
  /* Six to a wall: one large, two beside it, three under them; short walls close their own row. */
  .site[data-look="painter"] .pt-wall { grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(12rem, 17vw, 16.5rem); grid-auto-flow: dense; }
  .site[data-look="painter"] .pt-wall img { min-height: 0; max-height: none; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 1) { grid-column: span 7; grid-row: span 2; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 2), .site[data-look="painter"] .pt-wall li:nth-child(6n + 3) { grid-column: span 5; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 4), .site[data-look="painter"] .pt-wall li:nth-child(6n + 5), .site[data-look="painter"] .pt-wall li:nth-child(6n) { grid-column: span 4; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 1):last-child { grid-column: span 12; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 2):last-child { grid-row: span 2; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 4):last-child { grid-column: span 12; }
  .site[data-look="painter"] .pt-wall li:nth-child(6n + 4):nth-last-child(2), .site[data-look="painter"] .pt-wall li:nth-child(6n + 5):last-child { grid-column: span 6; }
}
.site[data-look="painter"] .pt-tape-note {
  position: absolute; left: clamp(0.75rem, 2vw, 1.5rem); bottom: -0.85rem; max-width: min(calc(100% - 2rem), 30rem); margin: 0;
  padding: 0.35rem 1.1rem 0.3rem; color: var(--tape-ink); font-family: var(--hand); font-size: 1rem; line-height: 1.3;
  rotate: -1.2deg; box-shadow: 0 1px 2px rgb(0 0 0 / 0.35);
  clip-path: polygon(0 6%, 2% 0, 98% 4%, 100% 0, 99% 50%, 100% 96%, 97% 100%, 2% 95%, 0 100%, 1% 50%);
}
@media (max-width: 79.99rem) { .site[data-look="painter"] .pt-tape-note { font-size: 0.9rem; padding-inline: 0.8rem; max-width: calc(100% - 1.5rem); } }
.site[data-look="painter"] .pt-wall li:nth-child(even) .pt-tape-note { rotate: 0.9deg; left: auto; right: clamp(0.75rem, 2vw, 1.5rem); }

/* --- About: the photo to the page edge, text beside it -------------------- */
.site[data-look="painter"] .pt-about { padding: 0; display: grid; max-width: none; }
.site[data-look="painter"] .pt-about.no-photo { background: var(--surface); }
.site[data-look="painter"] .pt-about-media { position: relative; min-height: 20rem; }
.site[data-look="painter"] .pt-about-media .about-img { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.site[data-look="painter"] .pt-about-text { padding: var(--section-pad) var(--pt-edge); max-width: 46rem; align-self: center; }
.site[data-look="painter"] .pt-about-text > p:first-of-type { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="painter"] .pt-about.no-photo .pt-about-text { max-width: none; width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; padding-inline: 0; }
@media (min-width: 52rem) {
  .site[data-look="painter"] .pt-about.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, calc(72 * var(--raam-vh)), 48rem); }
  .site[data-look="painter"] .pt-about.has-photo .pt-about-text { padding: var(--section-pad) var(--pt-edge) var(--section-pad) clamp(2.5rem, 5vw, 5.5rem); }
  .site[data-look="painter"] .about-image_right .pt-about-media { order: 2; }
  .site[data-look="painter"] .about-image_right.has-photo .pt-about-text { padding: var(--section-pad) clamp(2.5rem, 5vw, 5.5rem) var(--section-pad) var(--pt-edge); }
}
.site[data-look="painter"] .pt-year {
  position: relative; display: inline-grid; margin-top: 1.5rem; min-width: 13rem;
  padding: 1rem 1.4rem 2.6rem; background: var(--field); color: var(--on-field);
  box-shadow: 0 0 0 0.45rem #ffffff, 0 0 0 calc(0.45rem + 1px) var(--border);
}
.site[data-look="painter"] .pt-year > p { margin: 0; display: grid; line-height: 1; }
.site[data-look="painter"] .pt-year-word { font-size: 0.95rem; font-weight: 650; }
.site[data-look="painter"] .pt-year-num { font-size: clamp(3.2rem, 2rem + 4vw, 5.5rem); font-weight: 860; letter-spacing: -0.05em; }
.site[data-look="painter"] .pt-year .pt-label { position: absolute; left: 1.4rem; bottom: 0.8rem; }

/* --- Reviews: sample cards laid out on the stofkleed (the painter's cotton
   dust sheet): drawn weave, two soft folds, a few old spatters. --------- */
.site[data-look="painter"] .pt-quotes {
  --sheet: #e9e4d8;
  padding-block: clamp(4.5rem, 9vw, 8rem); position: relative; overflow: clip;
  background-color: var(--sheet);
  background-image:
    radial-gradient(ellipse 1.1rem 0.75rem at 91% 3.5%, rgb(89 25 31 / 0.82) 0 60%, transparent 64%),
    radial-gradient(circle at 89.2% 5.6%, rgb(89 25 31 / 0.82) 0 0.14rem, transparent 0.17rem),
    radial-gradient(circle at 92.6% 1.6%, rgb(89 25 31 / 0.82) 0 0.09rem, transparent 0.12rem),
    radial-gradient(ellipse 1.7rem 1.1rem at 95% 90%, rgb(247 249 239 / 0.92) 0 60%, transparent 63%),
    radial-gradient(circle at 92.8% 87.5%, rgb(247 249 239 / 0.92) 0 0.16rem, transparent 0.19rem),
    radial-gradient(ellipse 0.8rem 0.55rem at 3.5% 97%, rgb(17 66 50 / 0.8) 0 60%, transparent 64%),
    radial-gradient(circle at 5.2% 95.6%, rgb(17 66 50 / 0.8) 0 0.1rem, transparent 0.13rem),
    linear-gradient(97deg, transparent 31%, rgb(255 255 255 / 0.4) 32.2%, rgb(90 75 50 / 0.1) 33.6%, transparent 35.5%),
    linear-gradient(84deg, transparent 69%, rgb(90 75 50 / 0.09) 70.4%, rgb(255 255 255 / 0.35) 71.6%, transparent 73.5%),
    repeating-linear-gradient(0deg, rgb(90 75 50 / 0.05) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgb(90 75 50 / 0.045) 0 1px, transparent 1px 3px);
}
.site[data-look="painter"] .pt-samples { gap: clamp(1rem, 2.4vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); }
.site[data-look="painter"] .pt-samples li { position: relative; display: flex; background: #ffffff; padding: 0.55rem; border: 0; box-shadow: 0 1px 0 rgb(90 75 50 / 0.18), 0 10px 22px -12px rgb(60 45 20 / 0.45); }
/* Two pieces of masking tape hold each card down on the sheet. */
.site[data-look="painter"] .pt-samples li::before,
.site[data-look="painter"] .pt-samples li::after {
  content: ''; position: absolute; top: -0.7rem; width: 4.5rem; height: 1.4rem; z-index: 1;
  background-color: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(80 60 20 / 0.07));
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
  clip-path: polygon(0 8%, 4% 0, 96% 6%, 100% 0, 98% 50%, 100% 94%, 95% 100%, 3% 92%, 0 100%, 2% 50%);
}
.site[data-look="painter"] .pt-samples li::before { left: 1.25rem; rotate: -4deg; }
.site[data-look="painter"] .pt-samples li::after { right: 1.25rem; rotate: 3deg; }
.site[data-look="painter"] .pt-samples figure { display: flex; flex-direction: column; flex: 1; margin: 0; padding: 0; border: 0; }
.site[data-look="painter"] .pt-samples blockquote {
  flex: 1; margin: 0; padding: clamp(1.5rem, 3.5vw, 3rem); min-height: clamp(14rem, 22vw, 20rem);
  background: var(--field); color: var(--on-field);
  font-size: clamp(1.3rem, 1rem + 1vw, 1.9rem); line-height: 1.28; font-weight: 600; letter-spacing: -0.015em;
}
.site[data-look="painter"] .pt-samples figcaption {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1rem;
  padding: 0.9rem clamp(0.9rem, 2.5vw, 2.4rem) 0.45rem; color: #1b1d1e; font-size: 1rem; font-weight: 700;
}
.site[data-look="painter"] .pt-quote-code { color: #4f5254; font-weight: 500; font-size: 0.82rem; align-self: center; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-quotes.is-single .pt-samples { grid-template-columns: minmax(0, 1fr); } }

/* --- Werkgebied: the towns between the rungs of a ladder ----------------- */
.site[data-look="painter"] .pt-area { background: var(--field); }
.site[data-look="painter"] .pt-area-head { display: grid; gap: 0.5rem clamp(2rem, 5vw, 5rem); align-items: end; }
.site[data-look="painter"] .pt-area-head :is(h1, h2) { margin: 0; }
.site[data-look="painter"] .pt-area-head .area-body { margin: 0; font-size: var(--fs-lead); line-height: 1.5; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-area-head { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="painter"] .pt-ladders { margin-top: clamp(2rem, 4vw, 3.25rem); display: grid; }
.site[data-look="painter"] .pt-ladder {
  --rail: 0.85rem; --rung: 0.55rem; --metal: linear-gradient(180deg, var(--alu-hi), var(--alu) 55%, #7d7e7b);
  position: relative; display: grid; border: 0; margin: 0;
}
.site[data-look="painter"] .pt-ladder li {
  font-size: clamp(1.15rem, 1rem + 0.7vw, 1.6rem); font-weight: 780; letter-spacing: -0.02em; line-height: 1.15;
  overflow-wrap: anywhere; hyphens: auto; white-space: normal; min-width: 0; color: var(--text);
}
.site[data-look="painter"] .pt-ladder li::after { content: none; }
/* Phones: one ladder standing up, the towns between its rungs. */
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .pt-ladders { width: min(100%, 20rem); padding-inline: var(--rail, 0.85rem); background: linear-gradient(90deg, var(--alu-hi), var(--alu) 55%, #7d7e7b) left / 0.85rem 100% no-repeat, linear-gradient(90deg, var(--alu-hi), var(--alu) 55%, #7d7e7b) right / 0.85rem 100% no-repeat; padding-block: 1.25rem; }
  .site[data-look="painter"] .pt-ladder li { padding: 0.95rem 1.1rem; border-bottom: var(--rung) solid var(--alu); }
  .site[data-look="painter"] .pt-ladder:first-child li:first-child { border-top: var(--rung) solid var(--alu); }
}
/* Wider: ladders lying flat, four towns each, the rails running past the last rung. */
@media (min-width: 48rem) {
  .site[data-look="painter"] .pt-ladders { gap: 1.5rem; }
  .site[data-look="painter"] .pt-ladder {
    grid-template-columns: repeat(var(--k), minmax(0, 1fr)); width: max(calc(var(--k) / 4 * (100% - 3rem) + 3rem), min(100%, calc(var(--k) * 16rem)));
    padding: var(--rail) 1.5rem;
    background:
      linear-gradient(90deg, #2b2b2b 0.55rem, transparent 0.55rem calc(100% - 0.55rem), #2b2b2b 0) top / 100% var(--rail) no-repeat,
      linear-gradient(90deg, #2b2b2b 0.55rem, transparent 0.55rem calc(100% - 0.55rem), #2b2b2b 0) bottom / 100% var(--rail) no-repeat,
      var(--metal) top / 100% var(--rail) no-repeat,
      var(--metal) bottom / 100% var(--rail) no-repeat;
  }
  .site[data-look="painter"] .pt-ladder li { padding: 1.4rem 1.25rem; border-left: var(--rung) solid var(--alu); }
  .site[data-look="painter"] .pt-ladder li:last-child { border-right: var(--rung) solid var(--alu); }
}

/* --- Claims on strips of tape -------------------------------------------- */
.site[data-look="painter"] .pt-trust { padding-block: clamp(1.75rem, 3vw, 2.5rem); }
.site[data-look="painter"] .pt-trust .trust-list { gap: 0.9rem 1.25rem; }
.site[data-look="painter"] .pt-trust li { padding: 0.4rem 1.1rem; font-family: var(--hand); font-weight: 400; font-size: 1.15rem; color: var(--tape-ink); rotate: -0.8deg; box-shadow: 0 1px 2px rgb(0 0 0 / 0.25); }
.site[data-look="painter"] .pt-trust li:nth-child(even) { rotate: 0.7deg; }
.site[data-look="painter"] .pt-trust li::after { content: none; }

/* --- Call to action: a zandgeel field ------------------------------------ */
.site[data-look="painter"] .pt-cta { background: var(--field); color: var(--on-field); --text: var(--on-field); --muted: color-mix(in srgb, var(--on-field) 82%, var(--field)); padding-block: clamp(4rem, 8vw, 7rem); }
.site[data-look="painter"] .pt-cta :is(h1, h2) { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); max-width: 15ch; }
.site[data-look="painter"] .pt-cta .btn-primary { box-shadow: 0 0 0 2px var(--on-field); }

/* --- FAQ ----------------------------------------------------------------- */
.site[data-look="painter"] .s-faq .wrap { display: grid; gap: 1rem clamp(2rem, 5vw, 5rem); }
@media (min-width: 52rem) {
  .site[data-look="painter"] .s-faq .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: start; }
  .site[data-look="painter"] .s-faq .wrap > :is(h1, h2) { position: sticky; top: 6rem; }
}
/* The questions on scaffold planks (steigerplanken: pine with galvanised end
   bands), laid across two standards of the steiger. */
.site[data-look="painter"] .s-faq .faq-items {
  --tube: linear-gradient(90deg, #8d9093, #e1e3e3 40%, #a5a8aa 70%, #7c7f82);
  margin-top: 0; max-width: none; display: grid; gap: 0.9rem; padding: 1.25rem 0;
  background: var(--tube) left 1.6rem top / 0.95rem 100% no-repeat, var(--tube) right 1.6rem top / 0.95rem 100% no-repeat;
}
.site[data-look="painter"] .s-faq .faq-items > :is(details, div) {
  --plank: #e3c99a; --band: 1.5rem;
  position: relative; margin: 0; border: 0; color: #1b1d1e; --text: #1b1d1e; --muted: #1b1d1e;
  background-color: var(--plank);
  background-image:
    linear-gradient(90deg, #a9adaf 0, #dfe1e1 calc(0.4 * var(--band)), #9ea2a4 var(--band), transparent var(--band) calc(100% - var(--band)), #9ea2a4 calc(100% - var(--band)), #dfe1e1 calc(100% - 0.6 * var(--band)), #a9adaf 100%),
    repeating-linear-gradient(178.6deg, rgb(130 85 35 / 0.09) 0 1.5px, transparent 1.5px 11px),
    linear-gradient(180deg, rgb(255 255 255 / 0.25), transparent 30%, rgb(120 80 30 / 0.12));
  box-shadow: 0 2px 0 rgb(80 55 20 / 0.35);
}
.site[data-look="painter"] .s-faq .faq-items details:first-child { border-top: 0; }
.site[data-look="painter"] .faq-items summary { font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); min-height: 4.5rem; padding: 0.6rem calc(1.5rem + 1rem); }
.site[data-look="painter"] .faq-items details p, .site[data-look="painter"] .faq-items :is(dt, dd) { color: #1b1d1e; padding-inline: calc(1.5rem + 1rem); }
.site[data-look="painter"] .faq-items details p { margin: 0; padding-bottom: 1.25rem; max-width: none; }
.site[data-look="painter"] .faq-items dt { margin: 0; padding-top: 1.1rem; }
.site[data-look="painter"] .faq-items dd { margin: 0.25rem 0 0; padding-bottom: 1.1rem; }
/* The plus on a tin lid; it turns to a cross when the answer is open. */
.site[data-look="painter"] .faq-items summary::after {
  content: '+'; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: radial-gradient(circle, #4a5257 0 52%, #383e42 53% 60%, #5b6469 61%); color: #f7f9ef; font-size: 1.5rem; font-weight: 500;
}
.site[data-look="painter"] .faq-items details[open] summary::after { content: '+'; rotate: 45deg; }
@media (prefers-reduced-motion: no-preference) { .site[data-look="painter"] .faq-items summary::after { transition: rotate 0.25s; } }
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .s-faq .faq-items { background-position: left 0.9rem top, right 0.9rem top; background-size: 0.7rem 100%; }
  .site[data-look="painter"] .s-faq .faq-items > :is(details, div) { --band: 0.9rem; }
  .site[data-look="painter"] .faq-items summary, .site[data-look="painter"] .faq-items details p, .site[data-look="painter"] .faq-items :is(dt, dd) { padding-inline: 1.6rem; }
}

/* --- Contact: details on a dennengroen field, the form on the wall -------- */
.site[data-look="painter"] .s-contact { --field: #27352a; --on-field: #f7f9ef; padding-block: 0; }
.site[data-look="painter"] .contact-inner { gap: 0; }
.site[data-look="painter"] .contact-details {
  --text: var(--on-field); --muted: #c9d2c9; --border: rgb(247 249 239 / 0.28);
  color: var(--text); background: var(--field); padding-block: var(--section-pad);
  box-shadow: 0 0 0 100vmax var(--field); clip-path: inset(0 -100vmax);
}
.site[data-look="painter"] .contact-details { position: relative; }
.site[data-look="painter"] .contact-details :is(h1, h2) { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.75rem); }
.site[data-look="painter"] .contact-list { border-top: 2px solid var(--text); }
.site[data-look="painter"] .contact-form { padding-block: var(--section-pad); border-top: 0; }
@media (min-width: 52rem) {
  .site[data-look="painter"] .contact-form_and_details { background: linear-gradient(90deg, var(--field) 50%, var(--bg) 50%); }
  .site[data-look="painter"] .contact-form_and_details .contact-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="painter"] .contact-form_and_details .contact-details { box-shadow: none; clip-path: none; padding-right: clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="painter"] .contact-form_and_details .contact-form { padding-left: clamp(2.5rem, 5vw, 5rem); }
  .site[data-look="painter"] .contact-form_and_details::before {
    content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.8rem); width: 1.6rem; z-index: 1;
    background-color: var(--tape);
    background-image: repeating-linear-gradient(0deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px);
  }
}
.site[data-look="painter"] :is(.contact-form, .request-form) .btn { min-height: 56px; }

/* --- Forms elsewhere (request form, booking) ------------------------------ */
.site[data-look="painter"] .request-form { border-top: 0; background: #ffffff; padding: clamp(1.25rem, 3vw, 2.25rem); border: 1px solid var(--border); --bg: #ffffff; }
.site[data-look="painter"] .request-form { position: relative; box-shadow: 0 10px 22px -14px rgb(60 45 20 / 0.45); }
.site[data-look="painter"] .request-form::before,
.site[data-look="painter"] .request-form::after {
  content: ''; position: absolute; top: -0.7rem; width: 5rem; height: 1.4rem;
  background-color: var(--tape);
  background-image: repeating-linear-gradient(90deg, rgb(80 60 20 / 0.06) 0 1px, transparent 1px 4px), linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(80 60 20 / 0.07));
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.18);
  clip-path: polygon(0 8%, 4% 0, 96% 6%, 100% 0, 98% 50%, 100% 94%, 95% 100%, 3% 92%, 0 100%, 2% 50%);
}
.site[data-look="painter"] .request-form::before { left: 1.5rem; rotate: -3deg; }
.site[data-look="painter"] .request-form::after { right: 1.5rem; rotate: 2.5deg; }

/* --- Footer: gitzwart ---------------------------------------------------- */
.site[data-look="painter"] .site-footer { --deep: #0e0e10; --deep-muted: #c3c6c3; background: #0e0e10; }
.site[data-look="painter"] .site-footer .footer-name { font-weight: 850; letter-spacing: -0.03em; }

/* --- Phones: the quick bar on the wall, a tape line on top -------------- */
@media (max-width: 51.99rem) {
  .site[data-look="painter"] .quickbar { --on-deep: var(--text); background: var(--bg); border-top: 0; box-shadow: 0 -0.4rem 0 var(--tape); }
}

/* --- The street: Dutch gevels in their classic colours, above the footer -- */
.site[data-look="painter"] .pt-street { overflow: clip; padding-top: clamp(3rem, 6vw, 5rem); background: var(--bg); }
.site[data-look="painter"] .pt-houses { display: flex; justify-content: center; align-items: flex-end; }
.site[data-look="painter"] .pt-house { flex: none; width: min(calc(100vw / 8), 15rem); display: flex; flex-direction: column; }
@media (min-width: 48rem) and (max-width: 79.99rem) {
  .site[data-look="painter"] .pt-house { width: calc(100vw / 6); }
  .site[data-look="painter"] .pt-house:nth-child(n + 7) { display: none; }
}
.site[data-look="painter"] .pt-house svg { display: block; width: 100%; height: auto; }
.site[data-look="painter"] .pt-house-label {
  margin: 0; padding: 0.9rem 0.6rem 0.4rem; height: 5.2rem; overflow: hidden; background: #0e0e10; color: #f7f9ef;
  display: grid; align-content: start; gap: 0.3rem; font-size: 0.72rem; line-height: 1.25; letter-spacing: 0.01em;
}
.site[data-look="painter"] .pt-house-label span { display: grid; grid-template-columns: 0.8rem minmax(0, 1fr); gap: 0.4rem; align-items: start; }
.site[data-look="painter"] .pt-house-label span::before { content: ''; height: 0.8rem; margin-top: 0.05rem; background: var(--sw); box-shadow: 0 0 0 1px rgb(247 249 239 / 0.45); }
@media (max-width: 47.99rem) {
  .site[data-look="painter"] .pt-house { width: calc(100vw / 3); }
  .site[data-look="painter"] .pt-house:nth-child(n + 4) { display: none; }
  .site[data-look="painter"] .pt-house-label { font-size: 0.68rem; padding-inline: 0.4rem; height: 5.6rem; }
}

/* --- Booking: the bookable jobs as sample cards ------------------------- */
.site[data-look="painter"] .s-booking { background: var(--surface); }
.site[data-look="painter"] .s-booking .booking-inner > * { max-width: none; }
.site[data-look="painter"] .s-booking .booking-inner > :is(h1, h2, .lead) { max-width: 40rem; }
.site[data-look="painter"] .booking-services { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); border: 0; margin-top: clamp(1.5rem, 3vw, 2.5rem); }
.site[data-look="painter"] .booking-services li { border: 1px solid var(--border); background: #ffffff; }
.site[data-look="painter"] .booking-services a { --text: #1b1d1e; padding: 1.1rem 1.25rem; min-height: 5.5rem; border-top: 1.6rem solid var(--chip, #27352a); }
.site[data-look="painter"] .booking-services li:nth-child(6n + 1) { --chip: #e9e0d2; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 2) { --chip: #27352a; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 3) { --chip: #383e42; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 4) { --chip: #59191f; }
.site[data-look="painter"] .booking-services li:nth-child(6n + 5) { --chip: #1a2b3c; }
.site[data-look="painter"] .booking-services li:nth-child(6n) { --chip: #5d7a5a; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="painter"] .booking-services li { transition: translate 0.2s; }
  .site[data-look="painter"] .booking-services li:hover { translate: 0 -0.25rem; }
}
.site[data-look="painter"] .booking-name { font-size: 1.15rem; font-weight: 760; letter-spacing: -0.015em; }
.site[data-look="painter"] .booking-meta { color: #4f5254; }

/* --- Opening hours: the label on a paint tin ------------------------------ */
.site[data-look="painter"] .pt-hours { padding-block: clamp(4.5rem, 9vw, 8rem); background: var(--surface); }
.site[data-look="painter"] .pt-hours-inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 3rem clamp(2rem, 6vw, 6rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="painter"] .pt-hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="painter"] .pt-hours-intro :is(h1, h2) { margin-top: 0; }
.site[data-look="painter"] .pt-hours-intro .hours-place { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="painter"] .pt-hours-intro .hours-call a { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.1rem); font-weight: 800; letter-spacing: -0.02em; color: var(--text); text-underline-offset: 0.18em; text-decoration-thickness: 2px; }
.site[data-look="painter"] .pt-tin { position: relative; width: min(100%, 28rem); justify-self: center; padding-top: 3.6rem; }
/* The bail: a wire handle in an arc over the lid. */
.site[data-look="painter"] .pt-tin-bail {
  position: absolute; top: 0; left: 6%; right: 6%; height: 5.4rem;
  border: 3px solid #7d8083; border-bottom: 0; border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.site[data-look="painter"] .pt-tin-body {
  --text: #1b1d1e; --muted: #4f5254; color: var(--text);
  position: relative; padding: 3.4rem 0 3.2rem; border: 0; border-radius: 0.5rem / 0.35rem;
  background: linear-gradient(90deg, #8a8d8f, #d9dbd9 18%, #f2f3f1 30%, #c4c7c6 58%, #9a9d9f 82%, #7a7d80);
  box-shadow: 0 18px 30px -18px rgb(0 0 0 / 0.55);
}
/* The rim of the lid and the bottom seam. */
.site[data-look="painter"] .pt-tin-body::before,
.site[data-look="painter"] .pt-tin-body::after {
  content: ''; position: absolute; left: -0.35rem; right: -0.35rem; height: 1rem; border-radius: 0.4rem;
  background: linear-gradient(90deg, #6f7275, #c9cbca 18%, #ffffff 30%, #b3b6b6 58%, #868a8c 82%, #63666a);
  box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2);
}
.site[data-look="painter"] .pt-tin-body::before { top: -0.5rem; }
.site[data-look="painter"] .pt-tin-body::after { bottom: -0.35rem; height: 0.7rem; }
.site[data-look="painter"] .pt-tin-label { background: #f7f9ef; margin-inline: -0.01rem; padding: 1.5rem 1.75rem 1.4rem; box-shadow: inset 0 1px 0 rgb(0 0 0 / 0.08), inset 0 -1px 0 rgb(0 0 0 / 0.08); }
.site[data-look="painter"] .pt-tin-name { margin: 0 0 0.7rem; font-weight: 860; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.7rem); line-height: 1.02; letter-spacing: -0.035em; overflow-wrap: break-word; hyphens: manual; }
.site[data-look="painter"] .pt-tin-band { margin: 0 -1.75rem 1rem; padding: 2.4rem 1.75rem 0.5rem; background: var(--field); color: var(--on-field); font-size: 0.85rem; font-weight: 700; white-space: nowrap; }
.site[data-look="painter"] .pt-tin .hours-table { width: 100%; font-variant-numeric: tabular-nums; }
.site[data-look="painter"] .pt-tin .hours-table :is(th, td) { padding: 0.45rem 0; border-color: rgb(27 29 30 / 0.15); }
.site[data-look="painter"] .pt-tin .hours-table td { text-align: right; white-space: nowrap; }
.site[data-look="painter"] .pt-tin .hours-table { font-size: 1.05rem; }
.site[data-look="painter"] .pt-tin .hours-table th { white-space: normal; }
.site[data-look="painter"] .pt-tin .hours-table th::after { margin-left: 0.4rem; }
@media (max-width: 29.99rem) {
  .site[data-look="painter"] .pt-tin-label { padding-inline: 1.1rem; }
  .site[data-look="painter"] .pt-tin-band { margin-inline: -1.1rem; padding-inline: 1.1rem; }
  .site[data-look="painter"] .pt-tin .hours-table { font-size: 1rem; }
}

/* --- The quote form: fields like taped-off panels, focus a stroke of paint */
.site[data-look="painter"] .contact-form :is(input, textarea) { border: 2px solid #1b1d1e; border-radius: 0; background: #ffffff; padding: 0.75rem 0.9rem; font-size: 1.05rem; }
.site[data-look="painter"] .contact-form :is(input, textarea):focus { outline: 0; border-color: #114232; box-shadow: inset 0 -0.35rem 0 #114232; }
.site[data-look="painter"] .contact-form label { font-weight: 750; }
@media (max-width: 47.99rem) { .site[data-look="painter"] .pt-samples blockquote { min-height: 0; } }
@media (max-width: 51.99rem) { .site[data-look="painter"] .pt-hero.no-photo .pt-fan { --len: clamp(5.5rem, calc(13 * var(--raam-vh)), 8rem); --blade: 1.6rem; left: 2rem; bottom: 1rem; } }

/* ---- looks/pedicure.css ---- */
/* The pedicure look: everything here is scoped to .site[data-look="pedicure"]. Appended after base.css (bun run --filter @platform/sections css).
   The page is the practice: linen and white, care green, ink. The cliëntkaart
   in the hero, the tarievenkaart with the appointment book's quarter hours,
   the name plate on the green practice door, the home-visit round, the
   appointment card. Everything one size up: many clients are older. */

.site[data-look="pedicure"] {
  --wrap: 80rem;
  --fs-base: 1.1875rem;
  --fs-sm: 1.03rem;
  --fs-lead: clamp(1.25rem, 1.12rem + 0.45vw, 1.5rem);
  --fs-h1: clamp(3.5rem, 1.9rem + 5vw, 6.4rem);
  --fs-h2: clamp(2.35rem, 1.55rem + 2.9vw, 4.5rem);
  --fs-h3: 1.3rem;
  --ped-pad: clamp(4.25rem, 9vw, 8.5rem);
  --ped-hair: color-mix(in srgb, var(--text) 16%, transparent);
  --ped-header: 5.25rem;
  /* Linen, as the towel on the treatment chair: a fine cross weave. */
  --ped-weave: repeating-linear-gradient(0deg, rgb(30 42 51 / 0.028) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgb(30 42 51 / 0.022) 0 1px, transparent 1px 4px);
  line-height: 1.62;
  hyphens: manual;
}
@media (max-width: 40rem) {
  .site[data-look="pedicure"] { --fs-base: 1.125rem; --fs-sm: 1rem; --ped-header: 3.9rem; }
}
.site[data-look="pedicure"] :is(h1, h2) { letter-spacing: -0.025em; line-height: 1.02; }
.site[data-look="pedicure"] h2 { margin-bottom: 0.45em; }
.site[data-look="pedicure"] main > .s + .s { border-top: 0; }
.site[data-look="pedicure"] .s { padding-block: var(--ped-pad); }
.site[data-look="pedicure"] .lead { color: var(--text); }
.site[data-look="pedicure"] :focus-visible { outline-color: var(--care); }

/* Buttons: the practice's green, big enough for any hand. */
.site[data-look="pedicure"] .btn { min-height: 3.6rem; padding: 0.85rem 1.7rem; border-radius: 999px; font-size: 1.15rem; transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease; }
.site[data-look="pedicure"] .btn-primary:hover { text-decoration: none; transform: translateY(-2px); box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--primary) 80%, black); }
.site[data-look="pedicure"] .btn .cta-detail { font-variant-numeric: tabular-nums; }
.site[data-look="pedicure"] .cta-alt { font-weight: 500; }

/* --- Header: the name, and the number to ring ------------------------------- */
.site[data-look="pedicure"] .ped-header { background: var(--bg); border-bottom: 1px solid var(--ped-hair); }
.site[data-look="pedicure"] .ped-header .header-inner { min-height: var(--ped-header); gap: 0.5rem 2.5rem; }
.site[data-look="pedicure"] .ped-header .brand { font-size: clamp(1.2rem, 1rem + 0.6vw, 1.6rem); letter-spacing: -0.015em; }
.site[data-look="pedicure"] .ped-header nav a { font-size: 1.05rem; }
.site[data-look="pedicure"] .ped-header-call { display: grid; justify-items: end; text-decoration: none; line-height: 1.15; padding-block: 0.3rem; }
.site[data-look="pedicure"] .ped-header-call-label { font-size: 1rem; color: var(--muted); }
.site[data-look="pedicure"] .ped-header-call-number { font-size: 1.4rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.site[data-look="pedicure"] .ped-header-call:hover .ped-header-call-number { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; }
@media (max-width: 40rem) {
  .site[data-look="pedicure"]:has(.quickbar) .ped-header-call { display: none; }
}

/* --- Hero: the cliëntkaart on the linen of the treatment chair ---------------- */
.site[data-look="pedicure"] .ped-hero {
  background-color: var(--surface); background-image: var(--ped-weave);
  min-height: min(calc(calc(100 * var(--raam-vh)) - var(--ped-header)), 58rem); display: flex; align-items: center;
  padding-block: clamp(2.25rem, 5vw, 4.5rem);
}
.site[data-look="pedicure"] .ped-hero .hero-inner { width: min(100% - 2 * var(--gap), var(--wrap)); gap: clamp(2.25rem, 5vw, 5.5rem); }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-hero-card .hero-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); }
}
.site[data-look="pedicure"] .ped-hero h1 { font-size: var(--fs-h1); max-width: 11ch; line-height: 0.96; letter-spacing: -0.035em; margin-bottom: 0.32em; text-wrap: balance; overflow-wrap: break-word; hyphens: manual; }
.site[data-look="pedicure"] .ped-hero .lead { font-size: var(--fs-lead); max-width: 30rem; }
.site[data-look="pedicure"] .ped-hero .actions { margin-top: 2.1rem; }
.site[data-look="pedicure"] .ped-hero-where { display: flex; flex-wrap: wrap; gap: 0.3rem 2rem; margin-top: 2.4rem; padding-top: 1.1rem; border-top: 1px solid var(--ped-hair); max-width: 30rem; font-size: var(--fs-sm); }
.site[data-look="pedicure"] .ped-where-label { color: var(--muted); }
/* Phones: the headline, the words and the call button fill the first
   screen above the quick bar; the card waits just below. */
@media (max-width: 59.99rem) {
  .site[data-look="pedicure"] .ped-hero { min-height: 0; display: block; padding-block: clamp(2rem, 7vw, 3.5rem); }
}
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-hero .actions .btn { width: 100%; }
}

/* The card itself: white card stock, the form's green header printed on it. */
.site[data-look="pedicure"] .ped-card {
  --text: var(--on-chart); --muted: var(--chart-muted);
  container-type: inline-size; margin: 0; padding: 0; overflow: hidden;
  background: var(--chart); color: var(--on-chart); border: 1px solid var(--outline); border-radius: 6px;
  box-shadow: 0 1px 1px rgb(30 42 51 / 0.05), 0 28px 50px -30px rgb(30 42 51 / 0.45);
}
.site[data-look="pedicure"] .ped-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 1rem; margin: 0; padding: 0.85rem clamp(1rem, 4cqi, 1.6rem); border-bottom: 3px double var(--outline); }
.site[data-look="pedicure"] .ped-card-form { flex-basis: 100%; color: var(--care); font-weight: 600; font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; }
.site[data-look="pedicure"] .ped-card .foot-card-name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.15rem, 4cqi, 1.5rem); line-height: 1.15; margin-right: auto; min-width: 0; overflow-wrap: break-word; }
.site[data-look="pedicure"] .ped-card-phone { font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none; white-space: nowrap; font-size: 1.05rem; }
.site[data-look="pedicure"] .ped-card-phone:hover { text-decoration: underline; }
.site[data-look="pedicure"] .ped-card-fields { display: grid; grid-template-columns: 1.6fr 1fr; gap: 1.5rem; margin: 0; padding: 0.9rem clamp(1rem, 4cqi, 1.6rem) 0; color: var(--chart-muted); font-size: 0.85rem; }
.site[data-look="pedicure"] .ped-card-fields span { display: flex; gap: 0.5rem; align-items: baseline; }
.site[data-look="pedicure"] .ped-card-fields span::after { content: ''; flex: 1; border-bottom: 1px dotted var(--outline); }

/* The chart: wide (two feet, labels both sides) by default. */
.site[data-look="pedicure"] .ped-chart { display: block; position: relative; aspect-ratio: 640 / 380; margin: clamp(0.75rem, 3cqi, 1.5rem) clamp(0.75rem, 3cqi, 1.6rem) clamp(1rem, 3cqi, 1.6rem); }
.site[data-look="pedicure"] .ped-chart svg { position: absolute; inset: 0; grid-column: 1 / -1; grid-row: 1 / -1; width: 100%; height: 100%; overflow: visible; }
.site[data-look="pedicure"] .ped-narrow { display: none; }
.site[data-look="pedicure"] .ped-sole, .site[data-look="pedicure"] .ped-toe { fill: var(--linen); stroke: var(--outline); stroke-width: 2.2; stroke-linejoin: round; }
.site[data-look="pedicure"] .ped-crease { fill: none; stroke: var(--outline); stroke-width: 1.2; stroke-dasharray: 2 5; stroke-linecap: round; }
.site[data-look="pedicure"] .ped-side { fill: var(--chart-muted); font-family: var(--font-body); font-size: 13px; letter-spacing: 0.06em; }
.site[data-look="pedicure"] .ped-leader polyline { fill: none; stroke: var(--care); stroke-width: 1.6; stroke-linejoin: round; }
.site[data-look="pedicure"] .ped-leader circle { fill: var(--chart); stroke: var(--care); stroke-width: 2.5; }
.site[data-look="pedicure"] .ped-chart .foot-label {
  position: absolute; width: calc(24.7% - 0.45rem); margin: 0; transform: translateY(-50%);
  color: var(--care); font-weight: 600; font-size: clamp(0.82rem, 2.55cqi, 1.08rem); line-height: 1.22; hyphens: manual; overflow-wrap: break-word;
}
.site[data-look="pedicure"] .ped-chart .foot-left { left: 0; text-align: right; }
.site[data-look="pedicure"] .ped-chart .foot-right { right: 0; text-align: left; }
/* The label heights are the leader heights in chart.tsx (y / 380). */
.site[data-look="pedicure"] .ped-chart .foot-label[style*="--row:1"] { top: 5.79%; transform: translateY(-62%); }
.site[data-look="pedicure"] .ped-chart .foot-left[style*="--row:2"] { top: 37.37%; }
.site[data-look="pedicure"] .ped-chart .foot-right[style*="--row:2"] { top: 57.89%; }
.site[data-look="pedicure"] .ped-chart .foot-label[style*="--row:3"] { top: 84.74%; }
/* Narrow card: one foot, every label on its outer side, one row each. */
@container (max-width: 33rem) {
  .site[data-look="pedicure"] .ped-chart { display: grid; grid-template-columns: 51.8% minmax(0, 1fr); grid-template-rows: repeat(var(--n), minmax(0, 1fr)); aspect-ratio: 340 / 380; }
  .site[data-look="pedicure"] .ped-wide { display: none; }
  .site[data-look="pedicure"] .ped-narrow { display: block; }
  .site[data-look="pedicure"] .ped-chart .foot-label { position: static; grid-column: 2; grid-row: auto; align-self: center; width: auto; transform: none !important; text-align: left !important; padding-left: 0.45rem; font-size: clamp(0.9rem, 4.6cqi, 1.1rem); }
}

/* The pen lies across the card's lower corner (wide screens only). */
.site[data-look="pedicure"] .ped-hero-card .hero-media { position: relative; }
.site[data-look="pedicure"] .ped-pen { display: none; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-pen { display: block; position: absolute; right: 7%; bottom: -0.9rem; width: 42%; height: auto; transform: rotate(-11deg); transform-origin: center; filter: drop-shadow(0 10px 8px rgb(30 42 51 / 0.22)); pointer-events: none; }
}
.site[data-look="pedicure"] .ped-pen-body { fill: var(--on-chart); }
.site[data-look="pedicure"] .ped-pen-grip { fill: #3a4852; }
.site[data-look="pedicure"] .ped-pen-tip { fill: #b9c2c6; }
.site[data-look="pedicure"] .ped-pen-band { fill: #c9d0d3; }
.site[data-look="pedicure"] .ped-pen-clip { fill: #dfe4e6; stroke: #9aa5aa; stroke-width: 1; }

/* Photo hero (the customer's own): the photo to the page's right edge. */
.site[data-look="pedicure"] .ped-hero-photo { position: relative; overflow: clip; }
.site[data-look="pedicure"] .ped-hero-photo .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; max-height: none; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-hero-photo .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="pedicure"] .ped-hero-photo .hero-media { position: absolute; top: 0; right: 0; bottom: 0; width: 50%; }
  .site[data-look="pedicure"] .ped-hero-photo .hero-text { padding-right: clamp(1rem, 3vw, 3rem); }
}
@media (max-width: 59.99rem) {
  .site[data-look="pedicure"] .ped-hero-photo .hero-media { margin-inline: calc(-1 * var(--gap)); }
  .site[data-look="pedicure"] .ped-hero-photo .hero-img { aspect-ratio: 4 / 3; height: auto; max-height: calc(70 * var(--raam-vh)); }
}

/* --- Services: the tarievenkaart -------------------------------------------- */
.site[data-look="pedicure"] .ped-services { background: var(--bg); }
.site[data-look="pedicure"] .ped-services-inner { display: grid; gap: clamp(2.5rem, 6vw, 6.5rem); align-items: start; }
@media (min-width: 60rem) {
  .site[data-look="pedicure"] .ped-services-inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .site[data-look="pedicure"] .ped-services-side { position: sticky; top: calc(var(--ped-header) + 2rem); }
}
.site[data-look="pedicure"] .ped-services .sheet-head { max-width: 30rem; }
.site[data-look="pedicure"] .ped-services .sheet-head .lead { margin-top: 1.2rem; }
.site[data-look="pedicure"] .ped-services-photo { margin-top: clamp(2rem, 4vw, 3rem); }
.site[data-look="pedicure"] .ped-photo { width: 100%; object-fit: cover; border-radius: 4px; background: var(--surface); }
.site[data-look="pedicure"] .ped-services-photo .ped-photo { aspect-ratio: 5 / 4; max-height: calc(46 * var(--raam-vh)); }
@media (max-width: 59.99rem) { .site[data-look="pedicure"] .ped-services-photo { display: none; } }
.site[data-look="pedicure"] .ped-tarieven { min-width: 0; }
.site[data-look="pedicure"] .ped-tarieven .service-list { margin: 0; border-top: 2px solid var(--text); }
.site[data-look="pedicure"] .ped-tarieven .service { position: relative; padding: clamp(1.15rem, 2.2vw, 1.6rem) 0; border-bottom: 1px solid var(--ped-hair); transition: background-color 200ms ease, padding 200ms ease; }
@media (hover: hover) {
  .site[data-look="pedicure"] .ped-tarieven .service:hover { background: var(--surface); padding-inline: 1rem; }
}
.site[data-look="pedicure"] .ped-tarieven .price-row { display: grid; grid-template-columns: minmax(0, auto) auto auto minmax(1rem, 1fr) auto; align-items: baseline; column-gap: 0.85rem; }
.site[data-look="pedicure"] .ped-tarieven .price-row > :is(h2, h3) { font-family: var(--font-body); font-weight: 600; font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.42rem); letter-spacing: -0.01em; line-height: 1.25; text-wrap: pretty; }
.site[data-look="pedicure"] .ped-tarieven .price-row:not(:has(.minutes)) { grid-template-columns: minmax(0, auto) minmax(1rem, 1fr) auto; }
.site[data-look="pedicure"] .ped-tarieven .minutes { color: var(--muted); font-size: 1rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.site[data-look="pedicure"] .ped-tarieven .leader { align-self: center; border-bottom: 1.5px dotted var(--outline); height: 0; }
.site[data-look="pedicure"] .ped-tarieven .price { font-size: clamp(1.2rem, 1.1rem + 0.35vw, 1.42rem); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; text-align: right; }
.site[data-look="pedicure"] .ped-tarieven .price-from { font-size: 0.8em; font-weight: 400; color: var(--muted); }
.site[data-look="pedicure"] .ped-tarieven .service-note { color: var(--muted); font-size: 1.05rem; max-width: 34rem; margin-top: 0.35rem; }
/* The quarter hours a treatment takes in the appointment book. */
.site[data-look="pedicure"] .ped-quarters { display: inline-flex; align-self: center; border: 1.5px solid var(--outline); border-radius: 3px; overflow: hidden; }
.site[data-look="pedicure"] .ped-quarters i { width: 0.8rem; height: 0.95rem; background: var(--chart); }
.site[data-look="pedicure"] .ped-quarters i + i { border-left: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-quarters i:nth-child(4n + 1):not(:first-child) { border-left: 1.5px solid var(--chart-muted); }
.site[data-look="pedicure"] .ped-quarters i.is-on { background: var(--care); }
.site[data-look="pedicure"] .ped-tarieven .price-row:not(:has(.price)) { grid-template-columns: minmax(0, auto) auto auto 1fr; }
.site[data-look="pedicure"] .ped-tarieven .price-row:not(:has(.price)):not(:has(.minutes)) { display: block; }
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-tarieven .price-row:is(*, :not(:has(.minutes)), :not(:has(.price))) { display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 0.25rem; }
  .site[data-look="pedicure"] .ped-tarieven .price-row > :is(h2, h3) { grid-column: 1; }
  .site[data-look="pedicure"] .ped-tarieven .price { grid-column: 2; grid-row: 1; }
  .site[data-look="pedicure"] .ped-tarieven .minutes { grid-column: 1; grid-row: 2; display: inline-flex; gap: 0.6rem; }
  .site[data-look="pedicure"] .ped-tarieven .ped-quarters { grid-column: 1; grid-row: 2; justify-self: start; margin-left: 4.6rem; }
  .site[data-look="pedicure"] .ped-tarieven .leader { display: none; }
}
/* Home visits: their own panel on the card. */
.site[data-look="pedicure"] .ped-home { margin-top: clamp(2rem, 4vw, 3rem); padding: clamp(1.25rem, 3vw, 2rem) clamp(1.1rem, 3vw, 2rem) clamp(0.5rem, 1.5vw, 1rem); background-color: var(--surface); background-image: var(--ped-weave); border-radius: 6px; }
.site[data-look="pedicure"] .ped-home .list-label { margin: 0 0 0.9rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem); letter-spacing: -0.02em; line-height: 1.1; color: var(--text); }
.site[data-look="pedicure"] .ped-home .service-list { border-top-width: 1px; }
.site[data-look="pedicure"] .ped-home .service:last-child { border-bottom: 0; }
@media (hover: hover) { .site[data-look="pedicure"] .ped-home .service:hover { background: var(--bg); } }

/* --- Hours: the name plate on the green practice door ------------------------- */
.site[data-look="pedicure"] .ped-hours {
  --text: var(--on-primary); --muted: var(--on-primary);
  background-color: var(--primary); color: var(--on-primary);
  /* The door's vertical boards. */
  background-image: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.07) 0 1px, transparent 1px 7.5rem), linear-gradient(90deg, rgb(255 255 255 / 0.05), transparent 60%);
}
.site[data-look="pedicure"] .ped-hours .hours-inner { align-items: center; }
@media (min-width: 52rem) { .site[data-look="pedicure"] .ped-hours .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.site[data-look="pedicure"] .ped-hours .hours-place { color: inherit; font-size: var(--fs-lead); line-height: 1.45; max-width: 26rem; }
.site[data-look="pedicure"] .ped-hours .hours-place a, .site[data-look="pedicure"] .ped-hours .hours-call a { color: inherit; }
.site[data-look="pedicure"] .ped-hours .hours-place a { font-size: var(--fs-base); }
.site[data-look="pedicure"] .ped-hours .hours-call { font-size: clamp(1.35rem, 1.1rem + 0.9vw, 1.8rem); font-weight: 600; margin-top: 1.75rem; }
.site[data-look="pedicure"] .ped-hours-home { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid color-mix(in srgb, currentColor 35%, transparent); max-width: 26rem; }
/* The plate: white acrylic, four screws, the practice's name engraved. */
.site[data-look="pedicure"] .ped-plate {
  --text: var(--on-chart); --muted: var(--chart-muted); --border: color-mix(in srgb, var(--outline) 70%, transparent);
  position: relative; justify-self: end; width: 100%; max-width: 34rem;
  background: var(--chart); color: var(--on-chart); border-radius: 8px;
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1.4rem, 4vw, 3rem) clamp(1.25rem, 3vw, 2rem);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.9), inset 0 -2px 0 rgb(30 42 51 / 0.06), 0 2px 0 rgb(0 0 0 / 0.12), 0 30px 50px -30px rgb(0 0 0 / 0.55);
}
.site[data-look="pedicure"] .ped-plate::before {
  content: ''; position: absolute; inset: 0.9rem; pointer-events: none;
  background:
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) top left / 0.9rem 0.9rem no-repeat,
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) top right / 0.9rem 0.9rem no-repeat,
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) bottom left / 0.9rem 0.9rem no-repeat,
    radial-gradient(circle at 0.45rem 0.45rem, #8d989d 0 0.18rem, #c9d0d3 0.19rem 0.42rem, transparent 0.44rem) bottom right / 0.9rem 0.9rem no-repeat;
}
.site[data-look="pedicure"] .ped-plate-name { margin: 0 0 1.1rem; padding: 0 1.4rem 1rem; border-bottom: 1px solid var(--outline); text-align: center; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.25rem, 1.05rem + 0.8vw, 1.65rem); line-height: 1.15; color: var(--care); text-wrap: balance; overflow-wrap: break-word; }
.site[data-look="pedicure"] .ped-plate .hours-table { font-size: 1.12rem; }
.site[data-look="pedicure"] .ped-plate .hours-table th, .site[data-look="pedicure"] .ped-plate .hours-table td { padding-block: 0.62rem; }
.site[data-look="pedicure"] .ped-plate .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="pedicure"] .ped-plate .hours-table th::before { background: var(--care) !important; left: -0.75rem; }
.site[data-look="pedicure"] .ped-plate .hours-table th::after { background: var(--care); color: var(--chart); border-radius: 999px; padding-inline: 0.55rem; letter-spacing: 0.04em; }
@media (max-width: 40rem) {
  .site[data-look="pedicure"] .ped-plate .hours-table { font-size: 1.02rem; }
  .site[data-look="pedicure"] .ped-plate .hours-table td { white-space: nowrap; }
  .site[data-look="pedicure"] .ped-plate .hours-table th { white-space: normal; }
}
@media (max-width: 24rem) {
  .site[data-look="pedicure"] .ped-plate { padding-inline: 1.1rem; }
  .site[data-look="pedicure"] .ped-plate .hours-table { font-size: 0.97rem; }
  .site[data-look="pedicure"] .ped-plate .hours-table th { padding-right: 0.5rem; }
}

/* --- About: the practice, the photo to the page's edge ------------------------ */
.site[data-look="pedicure"] .ped-about { background: var(--bg); max-width: none; }
.site[data-look="pedicure"] .ped-about .about-inner > .about-text { max-width: 36rem; }
.site[data-look="pedicure"] .ped-about .about-inner > .about-text > p { font-size: var(--fs-base); }
.site[data-look="pedicure"] .ped-about .about-inner > .about-text > h1 + p, .site[data-look="pedicure"] .ped-about .about-inner > .about-text > h2 + p { font-size: var(--fs-lead); line-height: 1.5; }
.site[data-look="pedicure"] .ped-since { margin: 2rem 0 0 !important; padding-top: 1.1rem; border-top: 1px solid var(--ped-hair); font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.6rem, 1.3rem + 1vw, 2.2rem) !important; letter-spacing: -0.02em; color: var(--care); }
.site[data-look="pedicure"] .ped-about.has-photo { padding: 0; display: grid; }
.site[data-look="pedicure"] .ped-about.has-photo .about-media { min-height: 22rem; }
.site[data-look="pedicure"] .ped-about.has-photo .about-img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; background: var(--surface); }
.site[data-look="pedicure"] .ped-about.has-photo .about-inner { display: block; width: auto; margin: 0; padding: var(--ped-pad) var(--gap); }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-about.has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: min(52rem, calc(92 * var(--raam-vh))); }
  .site[data-look="pedicure"] .ped-about.has-photo.about-image_right .about-media { order: 2; }
  .site[data-look="pedicure"] .ped-about.has-photo .about-inner { align-self: center; padding-inline: clamp(2.5rem, 6vw, 7rem) max(var(--gap), calc((100vw - var(--wrap)) / 2)); }
  .site[data-look="pedicure"] .ped-about.has-photo.about-image_right .about-inner { padding-inline: max(var(--gap), calc((100vw - var(--wrap)) / 2)) clamp(2.5rem, 6vw, 7rem); }
}
@media (max-width: 51.99rem) { .site[data-look="pedicure"] .ped-about.has-photo .about-media { aspect-ratio: 4 / 3; min-height: 0; } }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner { display: block; }
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner > .about-text { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); column-gap: clamp(2.5rem, 6vw, 6rem); }
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner > .about-text > * { grid-column: 2; max-width: 38rem; }
  .site[data-look="pedicure"] .ped-about:not(.has-photo) .about-inner > .about-text > :is(h1, h2) { grid-column: 1; grid-row: 1 / span 9; }
}

/* --- Reviews: set large, in Dutch quotes, on linen ---------------------------- */
/* On ink: the one dark band in the page before the footer, the quotes in white. */
.site[data-look="pedicure"] .ped-reviews { --text: var(--on-deep); --muted: var(--deep-muted); background: var(--deep); color: var(--on-deep); }
.site[data-look="pedicure"] .ped-reviews .quote-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(2.5rem, 6vw, 6rem); margin-top: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-reviews .quote-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="pedicure"] .ped-reviews .quote-list > li:first-child { grid-column: 1 / -1; }
  .site[data-look="pedicure"] .ped-reviews .quote-list > li:first-child:nth-last-child(2) + li { grid-column: 1 / -1; padding-left: 33%; }
}
.site[data-look="pedicure"] .ped-reviews figure { margin: 0; padding: 0; border: 0; }
.site[data-look="pedicure"] .ped-reviews blockquote { margin: 0 0 1rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.15rem); line-height: 1.24; letter-spacing: -0.015em; text-wrap: pretty; }
.site[data-look="pedicure"] .ped-reviews li:first-child blockquote { font-size: clamp(1.75rem, 1.15rem + 2.4vw, 3.4rem); line-height: 1.14; letter-spacing: -0.025em; max-width: 26ch; }
.site[data-look="pedicure"] .ped-reviews blockquote p { position: relative; }
/* Hanging punctuation: the opening quote stands in the margin. */
.site[data-look="pedicure"] .ped-q { position: absolute; right: 100%; padding-right: 0.06em; color: var(--outline); }
@media (max-width: 40rem) { .site[data-look="pedicure"] .ped-q { position: static; padding: 0; } }
.site[data-look="pedicure"] .ped-reviews figcaption { font-size: 1.05rem; font-weight: 500; color: var(--muted); }
.site[data-look="pedicure"] .ped-reviews figcaption::before { content: '— '; }

/* --- Service area: the home-visit round, footsteps between the stops ------- */
.site[data-look="pedicure"] .ped-area { background: var(--bg); }
.site[data-look="pedicure"] .ped-area-inner { display: grid; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
@media (min-width: 52rem) { .site[data-look="pedicure"] .ped-area.has-photo .ped-area-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="pedicure"] .ped-area .area-body { font-size: var(--fs-lead); line-height: 1.5; max-width: 32rem; }
.site[data-look="pedicure"] ul.ped-round {
  position: relative; display: grid; gap: 0; margin-top: clamp(1.75rem, 3vw, 2.5rem); padding-left: 3.6rem; font-size: inherit; font-weight: inherit;
}
/* The trail: a pair of footprints from each stop to the next (inline SVG). */
.site[data-look="pedicure"] .ped-steps { position: absolute; left: -3.1rem; top: calc(50% + 1rem); width: 1.5rem; height: calc(100% - 2rem); fill: var(--outline); overflow: visible; }
.site[data-look="pedicure"] ul.ped-round li { position: relative; padding-block: 1.45rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.7rem, 1.3rem + 1.5vw, 2.6rem); line-height: 1.15; letter-spacing: -0.02em; white-space: normal; overflow-wrap: break-word; }
.site[data-look="pedicure"] ul.ped-round li::after { display: none; }
.site[data-look="pedicure"] ul.ped-round li::before { content: ''; position: absolute; left: -3.05rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; border-radius: 50%; background: var(--bg); border: 3px solid var(--care); box-shadow: 0 0 0 5px var(--bg); }
.site[data-look="pedicure"] ul.ped-round li:first-child::before { background: var(--care); }
@media (min-width: 40rem) {
  .site[data-look="pedicure"] ul.ped-round.is-long { grid-template-columns: repeat(2, minmax(0, max-content)); column-gap: 4.5rem; padding-left: 0; }
  .site[data-look="pedicure"] ul.ped-round.is-long .ped-steps { display: none; }
  .site[data-look="pedicure"] ul.ped-round.is-long li { padding-left: 1.9rem; font-size: clamp(1.45rem, 1.2rem + 0.9vw, 2rem); }
  .site[data-look="pedicure"] ul.ped-round.is-long li::before { left: 0; }
}
.site[data-look="pedicure"] .ped-area .area-places { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); line-height: 1.3; max-width: 36rem; }
.site[data-look="pedicure"] .ped-area-photo .ped-photo { aspect-ratio: 4 / 5; max-height: 40rem; object-position: 60% 45%; }
@media (max-width: 51.99rem) { .site[data-look="pedicure"] .ped-area-photo .ped-photo { aspect-ratio: 16 / 10; } }

/* --- FAQ: the questions people ask on the phone ------------------------------ */
.site[data-look="pedicure"] .ped-faq { background-color: var(--surface); background-image: var(--ped-weave); }
.site[data-look="pedicure"] .ped-faq-inner { display: grid; gap: clamp(1.5rem, 4vw, 4rem); align-items: start; }
@media (min-width: 52rem) {
  .site[data-look="pedicure"] .ped-faq-inner { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); }
  .site[data-look="pedicure"] .ped-faq-head { position: sticky; top: calc(var(--ped-header) + 2rem); }
}
.site[data-look="pedicure"] .ped-faq-call { font-size: var(--fs-lead); line-height: 1.45; max-width: 22rem; }
.site[data-look="pedicure"] .ped-faq-call a { font-weight: 600; white-space: nowrap; }
.site[data-look="pedicure"] .ped-faq .faq-items { margin: 0; max-width: none; border-top: 2px solid var(--text); }
.site[data-look="pedicure"] .ped-faq .faq-items details { border-bottom: 1px solid var(--ped-hair); }
.site[data-look="pedicure"] .ped-faq .faq-items details:first-child { border-top: 0; }
.site[data-look="pedicure"] .ped-faq .faq-items summary { min-height: 4.75rem; padding-block: 1.1rem; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 1.12rem + 0.6vw, 1.7rem); line-height: 1.2; letter-spacing: -0.015em; }
.site[data-look="pedicure"] .ped-faq .faq-items summary::after {
  content: ''; flex: none; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1.5px solid var(--outline);
  background: linear-gradient(var(--care), var(--care)) center / 0.9rem 2px no-repeat, linear-gradient(var(--care), var(--care)) center / 2px 0.9rem no-repeat, var(--bg);
  transition: transform 200ms ease, background-color 200ms ease;
}
.site[data-look="pedicure"] .ped-faq .faq-items details[open] summary::after { content: ''; background: linear-gradient(var(--care), var(--care)) center / 0.9rem 2px no-repeat, var(--bg); transform: rotate(180deg); }
.site[data-look="pedicure"] .ped-faq .faq-items summary:hover::after { border-color: var(--care); }
.site[data-look="pedicure"] .ped-faq .faq-items details p { color: var(--text); font-size: var(--fs-base); max-width: 38rem; margin: -0.2rem 0 1.6rem; }
.site[data-look="pedicure"] .ped-faq dl.faq-items > div { padding-block: 1.25rem; border-bottom: 1px solid var(--ped-hair); }
.site[data-look="pedicure"] .ped-faq dl.faq-items dt { margin: 0; font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.3rem, 1.12rem + 0.6vw, 1.7rem); line-height: 1.2; }
.site[data-look="pedicure"] .ped-faq dl.faq-items dd { margin: 0.5rem 0 0; color: var(--text); max-width: 38rem; }

/* --- Contact: ring first; the appointment card to take home -------------------- */
.site[data-look="pedicure"] .ped-contact { background: var(--bg); }
.site[data-look="pedicure"] .ped-contact .contact-inner { align-items: center; gap: clamp(2.5rem, 6vw, 6rem); }
@media (min-width: 52rem) { .site[data-look="pedicure"] .ped-contact .contact-inner { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="pedicure"] .ped-contact .contact-details { display: block; }
.site[data-look="pedicure"] .ped-contact .lead { max-width: 30rem; }
.site[data-look="pedicure"] .ped-contact .contact-list { margin-top: clamp(1.5rem, 3vw, 2.25rem); border-top: 2px solid var(--text); }
.site[data-look="pedicure"] .ped-contact .contact-list li { border-bottom-color: var(--ped-hair); }
.site[data-look="pedicure"] .ped-contact .contact-link { padding-block: 1rem; }
.site[data-look="pedicure"] .ped-contact .contact-label { font-size: 1.02rem; }
.site[data-look="pedicure"] .ped-contact .contact-value { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); letter-spacing: -0.015em; }
.site[data-look="pedicure"] .ped-contact .ped-contact-call .contact-value { font-size: clamp(2.5rem, 1.5rem + 3.4vw, 4.6rem); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: lining-nums; color: var(--care); }
.site[data-look="pedicure"] .ped-contact .ped-contact-call .contact-link { padding-block: 1.25rem 1.4rem; }
.site[data-look="pedicure"] .ped-contact .contact-also { margin-top: -0.9rem; }
/* The desk the card lies on, and the card. */
.site[data-look="pedicure"] .ped-contact-card { display: grid; place-items: center; padding: clamp(2rem, 6vw, 4.5rem) clamp(1rem, 4vw, 3.5rem); background-color: var(--surface); background-image: var(--ped-weave); border-radius: 6px; }
.site[data-look="pedicure"] .ped-appt {
  --text: var(--on-chart); --muted: var(--chart-muted);
  width: min(100%, 30rem); display: flex; flex-direction: column;
  padding: clamp(1.2rem, 3.5vw, 1.8rem) clamp(1.1rem, 3.5vw, 2rem) clamp(1rem, 3vw, 1.5rem);
  background: var(--chart); color: var(--on-chart); border: 1px solid var(--outline); border-radius: 10px;
  box-shadow: 0 1px 1px rgb(30 42 51 / 0.05), 0 22px 40px -26px rgb(30 42 51 / 0.45);
}
.site[data-look="pedicure"] .ped-appt p { margin: 0; }
.site[data-look="pedicure"] .ped-appt-name { font-family: var(--font-heading); font-weight: 600; font-size: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); line-height: 1.12; color: var(--care); overflow-wrap: break-word; }
.site[data-look="pedicure"] .ped-appt-meta { display: flex; flex-wrap: wrap; gap: 0 1rem; margin-top: 0.35rem !important; font-size: 0.9rem; color: var(--chart-muted); }
.site[data-look="pedicure"] .ped-appt-next { margin-top: 1.4rem !important; padding-top: 0.75rem; border-top: 3px double var(--outline); font-size: 0.95rem; font-weight: 600; }
.site[data-look="pedicure"] .ped-appt-table { display: grid; grid-template-columns: 1fr 1.2fr 0.9fr; margin-top: 0.5rem !important; font-size: 0.8rem; color: var(--chart-muted); }
.site[data-look="pedicure"] .ped-appt-table span { padding: 0.15rem 0 0.2rem 0.4rem; border-bottom: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-appt-table span:not(:nth-child(3n + 1)) { border-left: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-appt-table i { height: 2.1rem; border-bottom: 1px solid var(--outline); }
.site[data-look="pedicure"] .ped-appt-table i:not(:nth-child(3n + 1)) { border-left: 1px solid var(--outline); }
@media (max-width: 51.99rem) { .site[data-look="pedicure"] .ped-contact-card { margin-inline: calc(-1 * var(--gap)); border-radius: 0; } }
/* With the contact form: the form is the card. */
.site[data-look="pedicure"] .ped-contact .contact-form { align-self: start; border: 1px solid var(--outline); border-top: 4px solid var(--care); border-radius: 6px; padding: clamp(1.25rem, 3vw, 2rem); background: var(--bg); }

/* --- Call to action: a green band ------------------------------------------- */
.site[data-look="pedicure"] .ped-cta { --text: var(--on-primary); --muted: var(--on-primary); background: var(--primary); color: var(--on-primary); padding-block: clamp(3.5rem, 7vw, 6rem); }
.site[data-look="pedicure"] .ped-cta .cta-inner { align-items: center; }
.site[data-look="pedicure"] .ped-cta p { color: inherit; }
.site[data-look="pedicure"] .ped-cta .btn-primary { background: var(--deep); color: var(--on-deep); border-color: var(--deep); }

/* --- Request form and booking: on the linen, the form as a card ------------- */
.site[data-look="pedicure"] :is(.s-request, .s-booking) { background-color: var(--surface); background-image: var(--ped-weave); }
.site[data-look="pedicure"] .request-form { border: 1px solid var(--outline); border-top: 4px solid var(--care); border-radius: 6px; padding: clamp(1.25rem, 3.5vw, 2.25rem); background: var(--bg); gap: 1.15rem; }
.site[data-look="pedicure"] .request-step > legend { font-size: 1.55rem; }
.site[data-look="pedicure"] :where(form) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { min-height: 3.25rem; font-size: 1.1rem; border-color: var(--chart-muted); border-radius: 4px; }
.site[data-look="pedicure"] .s-booking .booking-services { border-top: 2px solid var(--text); background: var(--bg); }
.site[data-look="pedicure"] .s-booking .booking-services a { padding: 1.15rem 1rem; transition: background-color 160ms ease; }
.site[data-look="pedicure"] .s-booking .booking-services a:hover { background: var(--chart); }
.site[data-look="pedicure"] .s-booking .booking-name { font-size: 1.25rem; }
.site[data-look="pedicure"] .s-booking .booking-go { color: var(--care); }
.site[data-look="pedicure"] .booking-choices a { min-height: 3.25rem; font-size: 1.1rem; }

/* --- Gallery: the customer's own photos -------------------------------------- */
.site[data-look="pedicure"] .s-gallery { background: var(--bg); }
.site[data-look="pedicure"] .gallery-items { gap: 0.75rem; }
.site[data-look="pedicure"] .gallery-items li { border-radius: 4px; overflow: hidden; }

/* --- Footer: the practice's name, large, on ink -------------------------------- */
.site[data-look="pedicure"] .ped-footer { padding-top: clamp(3.5rem, 7vw, 6rem); font-size: 1.02rem; }
.site[data-look="pedicure"] .ped-footer .footer-name { margin: 0 0 clamp(2rem, 4vw, 3rem); max-width: 18ch; font-family: var(--font-heading); font-weight: 600; font-size: clamp(2.3rem, 1.4rem + 3.6vw, 5.2rem); line-height: 1; letter-spacing: -0.03em; color: var(--text); overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.site[data-look="pedicure"] .ped-footer .footer-inner { grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); padding-top: 1.5rem; border-top: 1px solid var(--border); }
.site[data-look="pedicure"] .ped-footer .footer-title { color: var(--text); }

/* --- Quick bar: white, the call in green, larger words ---------------------- */
@media (max-width: 51.99rem) {
  .site[data-look="pedicure"] .quick { font-size: 1.15rem; min-height: 56px; }
}

/* --- Motion: the card is filled in; the rest comes up as it scrolls in ------- */
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="pedicure"] .ped-card { animation: ped-lay 700ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="pedicure"] .ped-leader polyline { stroke-dasharray: 1; stroke-dashoffset: 1; animation: ped-draw 700ms ease-out forwards; animation-delay: calc(500ms + var(--i, 0) * 140ms); }
  .site[data-look="pedicure"] .ped-chart .foot-label { animation: ped-nudge 500ms ease-out both; animation-delay: calc(700ms + var(--row, 1) * 120ms); }
  @supports (animation-timeline: view()) {
    .site[data-look="pedicure"] :is(.ped-tarieven .service, .ped-reviews .quote-list > li, ul.ped-round li, .ped-faq .faq-items > *, .ped-plate, .ped-appt) {
      animation: ped-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 55%;
    }
  }
}
@keyframes ped-lay { from { transform: translateY(18px); } to { transform: none; } }
@keyframes ped-draw { to { stroke-dashoffset: 0; } }
@keyframes ped-nudge { from { translate: 0 8px; } to { translate: 0 0; } }
@keyframes ped-rise { from { transform: translateY(26px); } to { transform: none; } }

/* ---- looks/plasterer.css ---- */
/* The plasterer look: everything here is scoped to .site[data-look="plasterer"]. Appended after base.css (bun run --filter @platform/sections css).

   The stukadoor's world, drawn: a fresh wall in raking light with the
   trowel's arcs in it, raw grey gypsum, a wall drying from grey to white,
   strips of afplaktape, the black specie kuip flecked with plaster, and the
   galvanised corner bead (hoekprofiel) where two surfaces meet. Every
   surface is CSS gradients (the stylesheet may load nothing but fonts); the
   trowel arcs are inline SVG in the markup (looks/plasterer/surfaces.tsx) and
   the finish samples on the stalenbord come from finishes.ts. Orange only on
   buttons. */

.site[data-look="plasterer"] {
  /* Raw gypsum: a fine speckle (dots on co-prime grids, so no pattern shows) over soft clouds. */
  --pl-gypsum:
    radial-gradient(circle, rgb(40 36 30 / 0.08) 0 0.7px, transparent 1.1px) 0 0 / 13px 17px,
    radial-gradient(circle, rgb(255 255 255 / 0.22) 0 0.8px, transparent 1.2px) 2px 9px / 23px 13px,
    radial-gradient(circle, rgb(40 36 30 / 0.07) 0 1.1px, transparent 1.6px) 11px 5px / 29px 31px,
    radial-gradient(ellipse 40% 30% at 18% 24%, rgb(255 255 255 / 0.16), transparent 70%),
    radial-gradient(ellipse 34% 40% at 82% 70%, rgb(60 54 46 / 0.09), transparent 70%),
    radial-gradient(ellipse 30% 22% at 55% 40%, rgb(255 255 255 / 0.1), transparent 70%),
    radial-gradient(ellipse 26% 34% at 30% 88%, rgb(60 54 46 / 0.07), transparent 70%);
  /* A wall drying: darker wet patches left where the plaster is thickest. */
  --pl-drying:
    radial-gradient(ellipse 22% 30% at 12% 70%, rgb(120 116 108 / 0.22), transparent 70%),
    radial-gradient(ellipse 30% 22% at 46% 18%, rgb(120 116 108 / 0.16), transparent 70%),
    radial-gradient(ellipse 18% 26% at 78% 58%, rgb(120 116 108 / 0.2), transparent 70%),
    radial-gradient(ellipse 26% 18% at 64% 92%, rgb(120 116 108 / 0.14), transparent 70%),
    radial-gradient(ellipse 14% 20% at 92% 12%, rgb(120 116 108 / 0.14), transparent 70%);
  /* The kuip's rubber, flecked with dried plaster. */
  --pl-flecks:
    radial-gradient(ellipse 4px 2.5px, rgb(217 214 206 / 0.18), transparent) 40px 70px / 410px 290px,
    radial-gradient(ellipse 12px 1.4px, rgb(217 214 206 / 0.12), transparent) 10px 140px / 530px 370px,
    radial-gradient(ellipse 2.5px 2px, rgb(217 214 206 / 0.16), transparent) 220px 20px / 370px 430px;
  /* Cross-head screws at the four corners of a board (a background stack). */
  --pl-screw-head: radial-gradient(circle closest-side at 42% 40%, #e4e6e8, #a2a7ab 45%, #6a6f74 82%, #4f5459 92%, transparent 100%);
  --pl-screw-bar: linear-gradient(#34383c, #34383c);
  --pl-screws:
    var(--pl-screw-bar) left 12.5px top 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) left 16.2px top 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) left 10px top 10px / 14px 14px no-repeat,
    var(--pl-screw-bar) right 12.5px top 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) right 16.2px top 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) right 10px top 10px / 14px 14px no-repeat,
    var(--pl-screw-bar) left 12.5px bottom 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) left 16.2px bottom 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) left 10px bottom 10px / 14px 14px no-repeat,
    var(--pl-screw-bar) right 12.5px bottom 16.2px / 9px 1.6px no-repeat, var(--pl-screw-bar) right 16.2px bottom 12.5px / 1.6px 9px no-repeat, var(--pl-screw-head) right 10px bottom 10px / 14px 14px no-repeat;
  /* Two screws per sample, top left and bottom right. */
  --pl-screws-2:
    var(--pl-screw-bar) left 9.5px top 13px / 8px 1.4px no-repeat, var(--pl-screw-bar) left 12.8px top 9.7px / 1.4px 8px no-repeat, var(--pl-screw-head) left 7px top 7px / 13px 13px no-repeat,
    var(--pl-screw-bar) right 9.5px bottom 13px / 8px 1.4px no-repeat, var(--pl-screw-bar) right 12.8px bottom 9.7px / 1.4px 8px no-repeat, var(--pl-screw-head) right 7px bottom 7px / 13px 13px no-repeat;
  --pl-wall: #f4f3ef;
  --pl-wall-low: #e8e6e0;
  --pl-gyp: #bdbab2;
  --pl-dry: #d9d6cf;
  --pl-ink: #22201c;
  --pl-steel: #6f7478;
  --pl-tub: #1b1b1a;
  --pl-on-tub: #f2f0ea;
  --pl-tub-muted: #c4c1b9;
  --pl-tape: #e6dfca;
  --pl-board: #ffffff;
  /* Raking light from the window on the left: a wall is lighter where the light comes from. */
  --pl-rake: linear-gradient(100deg, rgb(255 255 255 / 0.75), rgb(255 255 255 / 0) 42%, rgb(70 60 50 / 0.06) 100%);
  /* The corner bead: a galvanised nose with perforated wings, seen face-on. */
  --pl-bead-x: linear-gradient(90deg, #8a8f93, #dfe2e4 18%, #a3a8ac 34%, #f6f7f8 46%, #c9cdd0 50%, #f6f7f8 54%, #a3a8ac 66%, #dfe2e4 82%, #8a8f93);
  --pl-bead-holes: radial-gradient(circle, rgb(40 40 40 / 0.55) 0 2.2px, transparent 2.6px);
  --wrap: 84rem;
  --fs-base: 1.125rem;
  --fs-lead: clamp(1.15rem, 1.05rem + 0.4vw, 1.4rem);
  --fs-h2: clamp(2.5rem, 1.5rem + 3.6vw, 5.2rem);
  --fs-h3: clamp(1.2rem, 1.1rem + 0.35vw, 1.4rem);
  background: var(--pl-wall);
  font-feature-settings: 'kern';
  hyphenate-limit-chars: 10 4 4;
}
@media (max-width: 40rem) { .site[data-look="plasterer"] { --fs-base: 1.0625rem; } }

.site[data-look="plasterer"] :is(h1, h2) { font-weight: 800; letter-spacing: -0.045em; line-height: 0.95; overflow-wrap: break-word; hyphens: manual; }
.site[data-look="plasterer"] h2 { margin-bottom: 0.4em; }
.site[data-look="plasterer"] :is(h3, .h3) { font-weight: 700; letter-spacing: -0.02em; }
.site[data-look="plasterer"] main > .s + .s { border-top: 0; }
.site[data-look="plasterer"] .lead { color: var(--pl-ink); max-width: 36rem; }

/* --- Buttons: mark orange, black letters, pressed in like a trowel. ------------ */
.site[data-look="plasterer"] .btn { min-height: 3.5rem; padding: 0.75rem 1.7rem; font-size: 1.1rem; font-weight: 750; letter-spacing: -0.01em; border: 0; box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.2); transition: transform 0.12s ease, box-shadow 0.12s ease; }
.site[data-look="plasterer"] .btn:hover { text-decoration: none; transform: translateY(2px); box-shadow: inset 0 -2px 0 rgb(0 0 0 / 0.2); }
.site[data-look="plasterer"] .btn:active { transform: translateY(4px); box-shadow: none; }
/* Phone numbers in Hanken's tabular figures: DM Mono's slashed zero turns "06 00" into "Ø6 ØØ". */
.site[data-look="plasterer"] .cta-detail { font-weight: 600; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .cta-alt { font-size: 1.05rem; text-decoration-thickness: 2px; text-decoration-color: var(--pl-steel); }
.site[data-look="plasterer"] .cta-alt:hover { text-decoration-color: currentColor; }

/* The corner bead, a vertical strip where one surface meets the next. */
.site[data-look="plasterer"] .pl-bead { position: absolute; z-index: 2; top: 0; bottom: 0; left: -9px; width: 18px; background: var(--pl-bead-holes) 0 0 / 6px 9px repeat-y, var(--pl-bead-holes) 12px 4.5px / 6px 9px repeat-y, var(--pl-bead-x); box-shadow: 2px 0 6px rgb(30 25 20 / 0.25); }

/* --- Header: the name on the wall. ------------------------------------------------ */
.site[data-look="plasterer"] .site-header { background: var(--pl-wall); border-bottom: 1px solid #dad7cf; }
.site[data-look="plasterer"] .brand { font-weight: 800; font-size: clamp(1.15rem, 1rem + 0.5vw, 1.45rem); letter-spacing: -0.035em; }
.site[data-look="plasterer"] .site-header .btn { min-height: 2.9rem; font-size: 1rem; padding-inline: 1.2rem; }

/* --- Hero: the wall in raking light, the photo around the corner. -------------- */
.site[data-look="plasterer"] .pl-hero { display: grid; padding: 0; min-height: clamp(36rem, calc(calc(100 * var(--raam-vh)) - 4.6rem), 58rem); background: var(--pl-wall); }
.site[data-look="plasterer"] .pl-hero-wall { display: flex; align-items: center; min-width: 0; padding: clamp(2rem, 6vw, 5.5rem) var(--gap) clamp(2.25rem, 5vw, 4.5rem); position: relative; isolation: isolate; background: var(--pl-rake), var(--pl-wall); }
.site[data-look="plasterer"] .pl-arcs { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; }
.site[data-look="plasterer"] .pl-hero-text { container-type: inline-size; width: 100%; max-width: 54rem; }
.site[data-look="plasterer"] .pl-hero h1, .site[data-look="plasterer"] .pl-hero h2 {
  /* Big, but never wider than the longest word allows (--hl, set in the markup). */
  font-size: min(8.4rem, 15.5cqi, calc(100cqi / (var(--hl, 10) * 0.6)));
  line-height: 0.9; letter-spacing: -0.05em; max-width: none; margin: 0 0 0.3em; text-wrap: balance;
}
.site[data-look="plasterer"] .pl-hero .lead { font-size: var(--fs-lead); max-width: 34rem; margin: 0; }
.site[data-look="plasterer"] .pl-hero .actions { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.site[data-look="plasterer"] .pl-hero-photo { position: relative; min-height: 16rem; background: var(--pl-gyp); }
.site[data-look="plasterer"] .pl-hero-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* No photo: one big sample plate of the first finish, screwed to the wall. */
.site[data-look="plasterer"] .pl-hero-plate { display: grid; place-items: center; padding: clamp(1.5rem, 4vw, 4rem) var(--gap); background: var(--pl-rake), var(--pl-wall-low); }
.site[data-look="plasterer"] .pl-plate { position: relative; display: block; width: min(100%, 34rem); aspect-ratio: 1; background-color: #ebe8e1; background-size: cover; box-shadow: 0 0 0 1px rgb(34 32 28 / 0.14), 0 30px 50px -30px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] .pl-plate::after { content: ''; position: absolute; inset: 0; background: var(--pl-screws); }
.site[data-look="plasterer"] .pl-plate-label { position: absolute; left: 1.4rem; bottom: 2.6rem; padding: 0.3rem 0.8rem; background: var(--pl-tape); font-family: var(--font-figures); font-size: 1rem; rotate: -1.5deg; box-shadow: 0 1px 2px rgb(0 0 0 / 0.15); }
@media (min-width: 52rem) { .site[data-look="plasterer"] .pl-has-plate.pl-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); } }
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-hero-plate { order: -1; padding: 1.25rem var(--gap); }
  .site[data-look="plasterer"] .pl-plate { width: auto; height: clamp(10rem, calc(26 * var(--raam-vh)), 16rem); }
}
@media (min-width: 52rem) {
  .site[data-look="plasterer"] .pl-has-photo.pl-hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }
  .site[data-look="plasterer"] .pl-hero-wall { padding-left: max(var(--gap), (100vw - var(--wrap)) / 2); padding-right: clamp(2rem, 4vw, 4rem); }
  .site[data-look="plasterer"] .pl-no-photo .pl-hero-text { max-width: 72rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-hero { min-height: 0; }
  .site[data-look="plasterer"] .pl-hero-photo { order: -1; height: clamp(12rem, calc(30 * var(--raam-vh)), 22rem); min-height: 0; }
  .site[data-look="plasterer"] .pl-hero-photo .pl-bead { inset: auto 0 -9px 0; width: auto; height: 18px; background: var(--pl-bead-holes) 0 0 / 9px 6px repeat-x, var(--pl-bead-holes) 4.5px 12px / 9px 6px repeat-x, linear-gradient(180deg, #8a8f93, #dfe2e4 18%, #a3a8ac 34%, #f6f7f8 46%, #c9cdd0 50%, #f6f7f8 54%, #a3a8ac 66%, #dfe2e4 82%, #8a8f93); }
  .site[data-look="plasterer"] .pl-hero h1, .site[data-look="plasterer"] .pl-hero h2 { font-size: min(5.2rem, 16cqi, calc(100cqi / (var(--hl, 10) * 0.6))); }
  .site[data-look="plasterer"] .pl-hero-wall { padding-top: 2rem; }
}

/* The lowest price per m², with a small drawn sample of that finish. */
.site[data-look="plasterer"] .pl-from { display: inline-flex; align-items: center; gap: 0.85rem; margin-top: clamp(1.75rem, 4vw, 3rem); padding: 0.45rem 1.1rem 0.45rem 0.45rem; background: var(--pl-board); color: var(--pl-ink); text-decoration: none; box-shadow: 0 0 0 1px rgb(34 32 28 / 0.12), 0 10px 24px -18px rgb(34 32 28 / 0.6); }
.site[data-look="plasterer"] .pl-from-sample { flex: none; width: 3.25rem; height: 3.25rem; background-size: cover; background-color: #ebe8e1; box-shadow: inset 0 0 0 1px rgb(34 32 28 / 0.12); }
.site[data-look="plasterer"] .pl-from-text { font-family: var(--font-figures); font-size: 0.95rem; line-height: 1.2; }
.site[data-look="plasterer"] .pl-from-amount { font-family: var(--font-body); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.035em; }
.site[data-look="plasterer"] .pl-from:hover .pl-from-what { text-decoration: underline; text-underline-offset: 0.2em; }

/* --- Services: the stalenbord, screwed to raw grey gypsum. ------------------------ */
.site[data-look="plasterer"] .pl-services { padding-block: clamp(4rem, 9vw, 8.5rem); background: var(--pl-gypsum), var(--pl-gyp); color: var(--pl-ink); }
.site[data-look="plasterer"] .pl-services .sheet-head { max-width: 62rem; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.site[data-look="plasterer"] .pl-services .sheet-head .lead { color: var(--pl-ink); }
.site[data-look="plasterer"] .pl-board { --text: var(--on-board); --muted: var(--board-muted); position: relative; background: var(--pl-board); color: var(--on-board); padding: clamp(1.25rem, 3.5vw, 3.25rem); padding-top: clamp(1rem, 2.5vw, 1.75rem);
  box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 30px 50px -30px rgb(40 34 26 / 0.55);
  background: var(--pl-screws), var(--pl-board); }
.site[data-look="plasterer"] .pl-board-print { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.25rem 1.5rem; margin: 0 1.5rem clamp(1.5rem, 3vw, 2.5rem); padding-bottom: 0.9rem; border-bottom: 1px solid #e3e0d9; font-family: var(--font-figures); font-size: 0.85rem; letter-spacing: 0.02em; color: var(--board-muted); }
.site[data-look="plasterer"] .pl-board-phone { font-family: var(--font-body); font-weight: 600; font-size: 0.95rem; letter-spacing: 0.01em; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .pl-board .sample-board { background: none; border: 0; margin: 0; padding: 0; }
.site[data-look="plasterer"] .pl-board .service-list { margin: 0; border: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: clamp(2rem, 4vw, 3.5rem) clamp(1.25rem, 2.6vw, 2.5rem); }
@media (min-width: 64rem) {
  .site[data-look="plasterer"] .pl-board[data-size="some"] .service-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site[data-look="plasterer"] .pl-board[data-size="many"] .service-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .site[data-look="plasterer"] .pl-board[data-size="few"] .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 52rem; }
}
@media (max-width: 30rem) {
  .site[data-look="plasterer"] .pl-board { padding-inline: 0.9rem; padding-bottom: 2.75rem; }
  .site[data-look="plasterer"] .pl-board-print { margin-inline: 1.6rem; }
  .site[data-look="plasterer"] .pl-board .price-unit { display: block; }
  .site[data-look="plasterer"] .pl-board .price-amount { font-size: 1.6rem; }
  .site[data-look="plasterer"] .pl-board .service-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 0.9rem; }
  .site[data-look="plasterer"] .pl-board[data-size="few"] .service-list { grid-template-columns: minmax(0, 1fr); }
}
.site[data-look="plasterer"] .service { display: flex; flex-direction: column; border: 0; padding: 0; }
/* Each sample a drawn finish on a square plate, two screws, its name on tape. */
.site[data-look="plasterer"] .sample { display: block; position: relative; aspect-ratio: 1; background-color: #ebe8e1; background-size: cover; background-position: center; overflow: hidden; box-shadow: 0 0 0 1px rgb(34 32 28 / 0.14), 0 3px 0 -1px rgb(34 32 28 / 0.12); transition: transform 0.25s ease, box-shadow 0.25s ease; }
.site[data-look="plasterer"] .sample::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: var(--pl-screws-2); }
/* The light rakes across the sample when you look closer. */
.site[data-look="plasterer"] .sample::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgb(255 255 255 / 0.4) 48%, transparent 66%) 120% 0 / 250% 100% no-repeat; opacity: 0; transition: opacity 0.3s ease, background-position 0.9s ease; }
.site[data-look="plasterer"] .service:hover .sample { transform: translateY(-4px); box-shadow: 0 0 0 1px rgb(34 32 28 / 0.14), 0 14px 22px -14px rgb(34 32 28 / 0.55); }
.site[data-look="plasterer"] .service:hover .sample::before { opacity: 1; background-position: -20% 0; }
.site[data-look="plasterer"] .sample-label { position: absolute; left: 0.7rem; bottom: 0.8rem; max-width: calc(100% - 1.4rem); padding: 0.2rem 0.55rem; background: var(--pl-tape); color: var(--on-board); font-family: var(--font-figures); font-size: 0.78rem; letter-spacing: 0.01em; line-height: 1.4; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; rotate: -1.2deg; box-shadow: 0 1px 1px rgb(0 0 0 / 0.12);
  clip-path: polygon(0 6%, 4% 0, 9% 7%, 15% 1%, 100% 0, 98% 30%, 100% 62%, 97% 100%, 6% 100%, 2% 94%, 0 70%); }
.site[data-look="plasterer"] .service-body { padding-top: 1rem; }
.site[data-look="plasterer"] .service .price-row { display: flex; flex-direction: column; align-items: flex-start; gap: 0.3rem; }
.site[data-look="plasterer"] .service :is(h2, h3) { margin: 0; font-size: var(--fs-h3); line-height: 1.15; hyphens: auto; text-wrap: pretty; }
.site[data-look="plasterer"] .price { margin: 0; font-family: var(--font-figures); font-weight: 400; font-size: 0.92rem; letter-spacing: -0.02em; color: var(--board-muted); white-space: normal; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .price-amount { font-family: var(--font-body); font-weight: 700; font-size: 1.95rem; letter-spacing: -0.035em; color: var(--on-board); line-height: 1.1; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .price:not(:has(.price-amount)) { font-family: var(--font-body); font-weight: 700; font-size: 1.95rem; letter-spacing: -0.035em; color: var(--on-board); }
.site[data-look="plasterer"] .service-note { margin: 0.45rem 0 0; font-size: 0.98rem; line-height: 1.5; color: var(--board-muted); max-width: 30ch; }
.site[data-look="plasterer"] .pl-services .sheet-foot { margin: 1.5rem 0 0; font-family: var(--font-figures); font-size: 0.85rem; color: var(--pl-ink); }

/* --- About: the photo off the page edge, the text on the wall. ------------------- */
.site[data-look="plasterer"] .pl-about { display: grid; padding: 0; max-width: none; background: var(--pl-rake), var(--pl-wall); }
.site[data-look="plasterer"] .pl-about-photo { position: relative; min-height: 22rem; background: var(--pl-gyp); }
.site[data-look="plasterer"] .pl-about-photo .about-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.site[data-look="plasterer"] .pl-about-photo .pl-bead { left: auto; right: -9px; }
.site[data-look="plasterer"] .pl-about-text { align-self: center; padding: clamp(3.5rem, 8vw, 7.5rem) var(--gap); max-width: 46rem; }
.site[data-look="plasterer"] .pl-since { margin: -0.2rem 0 1.5rem; font-family: var(--font-figures); font-size: 1rem; color: var(--muted); }
.site[data-look="plasterer"] .pl-since span { font-family: var(--font-body); font-weight: 800; font-size: 1.7rem; color: var(--pl-ink); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.site[data-look="plasterer"] .pl-prose p { font-size: clamp(1.1rem, 1.02rem + 0.3vw, 1.3rem); line-height: 1.55; max-width: 36rem; }
@media (min-width: 52rem) {
  .site[data-look="plasterer"] .pl-about.pl-has-photo { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(34rem, calc(72 * var(--raam-vh)), 50rem); }
  .site[data-look="plasterer"] .about-image_right .pl-about-photo { order: 2; }
  .site[data-look="plasterer"] .about-image_right .pl-about-photo .pl-bead { right: auto; left: -9px; }
  .site[data-look="plasterer"] .pl-about-text { padding-inline: clamp(2.5rem, 6vw, 6rem) var(--gap); }
  .site[data-look="plasterer"] .pl-no-photo .pl-about-text { max-width: var(--wrap); width: min(100% - 2 * var(--gap), var(--wrap)); margin-inline: auto; padding-inline: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 4rem; }
}
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-about-photo { height: clamp(16rem, 70vw, 26rem); min-height: 0; }
  .site[data-look="plasterer"] .pl-about-photo .pl-bead { display: none; }
}

/* --- Reviews: big set quotes on a wall that is drying, grey to white. ------------ */
.site[data-look="plasterer"] .pl-reviews { padding-block: clamp(4.5rem, 10vw, 9rem); background: var(--pl-drying), var(--pl-dry); color: var(--pl-ink); }
.site[data-look="plasterer"] .pl-reviews h2 { max-width: 14ch; }
.site[data-look="plasterer"] .pl-reviews .quote-list { display: grid; gap: clamp(2.5rem, 5vw, 4.5rem) clamp(2rem, 5vw, 5rem); margin-top: clamp(1.5rem, 4vw, 3rem); }
.site[data-look="plasterer"] .pl-reviews figure { margin: 0; }
.site[data-look="plasterer"] .pl-reviews blockquote { margin: 0; }
.site[data-look="plasterer"] .pl-reviews blockquote p { margin: 0; font-size: clamp(1.45rem, 1.15rem + 1.1vw, 2.1rem); font-weight: 600; line-height: 1.2; letter-spacing: -0.025em; text-wrap: pretty; }
.site[data-look="plasterer"] .pl-reviews li:first-child blockquote p { font-size: clamp(1.9rem, 1.2rem + 2.8vw, 4rem); font-weight: 700; line-height: 1.08; letter-spacing: -0.035em; max-width: 24ch; }
.site[data-look="plasterer"] .pl-q { margin-left: -0.42em; }
.site[data-look="plasterer"] .pl-reviews figcaption { margin-top: 1rem; font-family: var(--font-figures); font-size: 0.95rem; }
.site[data-look="plasterer"] .pl-reviews figcaption::before { content: '— '; }
@media (min-width: 52rem) {
  .site[data-look="plasterer"] .pl-reviews .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site[data-look="plasterer"] .pl-reviews:not([data-count="2"]) li:first-child { grid-column: 1 / -1; }
  .site[data-look="plasterer"] .pl-reviews[data-count="2"] li:first-child blockquote p { font-size: clamp(1.7rem, 1.2rem + 1.6vw, 2.8rem); }
  .site[data-look="plasterer"] .pl-reviews[data-count="2"] li:nth-child(2) { padding-top: 5rem; }
  .site[data-look="plasterer"] .pl-reviews[data-count="3"] li:nth-child(3) { padding-top: 3rem; }
}

/* --- FAQ: the questions down a smooth wall, a corner bead between them. --------- */
.site[data-look="plasterer"] .pl-on-wall { position: relative; isolation: isolate; background: var(--pl-wall); }
.site[data-look="plasterer"] .s-faq { padding-block: clamp(4rem, 9vw, 8rem); background: var(--pl-rake); }
.site[data-look="plasterer"] .s-faq .faq-items { max-width: none; margin-top: 0; }
.site[data-look="plasterer"] .faq-items :is(details, dl > div) { position: relative; border: 0; padding-top: 0.5rem; }
.site[data-look="plasterer"] .faq-items :is(details, dl > div)::before { content: ''; display: block; height: 7px; margin-bottom: 0.4rem; background: radial-gradient(circle, rgb(40 40 40 / 0.45) 0 1.3px, transparent 1.7px) 0 0 / 7px 7px repeat-x, linear-gradient(180deg, #9aa0a4, #e7e9eb 30%, #b4b9bc 48%, #f2f3f4 52%, #b4b9bc 70%, #9aa0a4); opacity: 0.7; }
.site[data-look="plasterer"] .faq-items details:first-child { border-top: 0; }
.site[data-look="plasterer"] .faq-items summary { min-height: 4.5rem; font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; padding-block: 0.6rem; }
.site[data-look="plasterer"] .faq-items summary::after { content: ''; width: 1.6rem; height: 1.6rem; background: linear-gradient(currentColor, currentColor) center / 100% 3px no-repeat, linear-gradient(currentColor, currentColor) center / 3px 100% no-repeat; transition: rotate 0.2s ease; }
.site[data-look="plasterer"] .faq-items details[open] summary::after { content: ''; rotate: 45deg; }
.site[data-look="plasterer"] .faq-items summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site[data-look="plasterer"] .faq-items details p, .site[data-look="plasterer"] .faq-items dd { color: var(--pl-ink); font-size: 1.1rem; max-width: 40rem; margin-bottom: 1.6rem; }
.site[data-look="plasterer"] .faq-items dt { font-size: clamp(1.2rem, 1.05rem + 0.6vw, 1.6rem); letter-spacing: -0.02em; }
@media (min-width: 60rem) {
  .site[data-look="plasterer"] .s-faq .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 0 clamp(3rem, 6vw, 6rem); align-items: start; }
  .site[data-look="plasterer"] .s-faq h2 { position: sticky; top: 6.5rem; }
}

/* --- Werkgebied: each place on a strip of afplaktape, on bare plasterboard
       (gipsplaat, 60 cm wide, its joints filled, rows of screws). ------------- */
.site[data-look="plasterer"] .pl-area { padding-block: clamp(4rem, 8vw, 7rem); color: var(--pl-ink);
  background:
    radial-gradient(ellipse 7px 5px, rgb(255 255 255 / 0.75) 0 3px, transparent 5px) calc(50% - 15rem) 1.4rem / 30rem 3rem,
    linear-gradient(90deg, transparent calc(50% - 4rem), rgb(255 255 255 / 0.32) calc(50% - 1.2rem), rgb(255 255 255 / 0.32) calc(50% + 1.2rem), transparent calc(50% + 4rem)) calc(50% - 15rem) 0 / 30rem 100%,
    linear-gradient(90deg, transparent calc(50% - 0.5px), rgb(70 72 74 / 0.18) 0, rgb(70 72 74 / 0.18) calc(50% + 0.5px), transparent 0) calc(50% - 15rem) 0 / 30rem 100%,
    var(--pl-gypsum), #d6d5d0; }
.site[data-look="plasterer"] .pl-area .area-list li::after, .site[data-look="plasterer"] .pl-area .area-list li::before { content: none; }
.site[data-look="plasterer"] .pl-area-inner { display: grid; gap: 2rem clamp(3rem, 6vw, 6rem); align-items: start; }
@media (min-width: 60rem) { .site[data-look="plasterer"] .pl-area-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }
.site[data-look="plasterer"] .pl-area .area-body { max-width: 30rem; font-size: 1.1rem; }
.site[data-look="plasterer"] .pl-tapes { display: flex; flex-wrap: wrap; gap: 1.1rem 0.9rem; padding-top: 0.5rem; }
.site[data-look="plasterer"] .pl-tapes li { position: relative; padding: 0.55rem 1.4rem 0.6rem; font-weight: 700; font-size: clamp(1.15rem, 1rem + 0.75vw, 1.75rem); letter-spacing: -0.02em; line-height: 1.15; color: var(--pl-ink);
  background: repeating-linear-gradient(90deg, rgb(0 0 0 / 0.025) 0 1px, transparent 1px 3px), linear-gradient(180deg, rgb(255 255 255 / 0.35), transparent 40%, rgb(0 0 0 / 0.04)), var(--pl-tape);
  box-shadow: 0 1px 2px rgb(40 30 20 / 0.18);
  clip-path: polygon(0 4%, 2% 0, 4% 6%, 6% 1%, 8% 5%, 100% 0, 98.5% 14%, 100% 30%, 98% 48%, 100% 66%, 98.5% 84%, 100% 100%, 7% 100%, 5% 95%, 3% 100%, 1% 96%, 0 100%, 1.5% 80%, 0 60%, 1.5% 40%, 0 20%); }
.site[data-look="plasterer"] .pl-tapes li:nth-child(3n + 1) { rotate: -0.8deg; }
.site[data-look="plasterer"] .pl-tapes li:nth-child(3n + 2) { rotate: 0.6deg; translate: 0 3px; }
.site[data-look="plasterer"] .pl-tapes li:nth-child(5n) { rotate: -0.3deg; translate: 0 -2px; }

/* --- Hours: a white board screwed to the wall, the days in DM Mono. -------------- */
/* A wall just trowelled: the plaster still wet and dark grey, a sheen where the spaan went. Ink only (6.5:1). */
.site[data-look="plasterer"] .pl-hours .s-hours { --muted: var(--pl-ink); --border: rgb(34 32 28 / 0.25); padding-block: clamp(4rem, 8vw, 7rem); color: var(--pl-ink);
  background: linear-gradient(112deg, transparent 30%, rgb(255 255 255 / 0.14) 46%, rgb(255 255 255 / 0.05) 58%, transparent 70%), var(--pl-gypsum), #a8a49b; }
.site[data-look="plasterer"] .s-hours .hours-call { font-size: clamp(1.4rem, 1.1rem + 1.2vw, 2.2rem); font-weight: 800; letter-spacing: -0.035em; }
.site[data-look="plasterer"] .s-hours .hours-call a { text-decoration-thickness: 3px; text-underline-offset: 0.18em; }
.site[data-look="plasterer"] .s-hours .hours-place { color: var(--pl-ink); }
.site[data-look="plasterer"] .hours-card { --muted: var(--board-muted); --border: #e3e0d9; max-width: 32rem; padding: 1.75rem 2.25rem; background: var(--pl-screws), var(--pl-board); box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 24px 40px -30px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] .hours-table :is(th, td) { padding-block: 0.8rem; border-bottom-color: #e3e0d9; font-size: 1.05rem; }
.site[data-look="plasterer"] .hours-table tr:last-child :is(th, td) { border-bottom: 0; }
.site[data-look="plasterer"] .hours-table td { font-family: var(--font-body); font-weight: 600; font-variant-numeric: tabular-nums; font-size: 1.1rem; letter-spacing: 0; }
.site[data-look="plasterer"] .hours-table .is-closed td { font-family: var(--font-figures); font-weight: 400; }
.site[data-look="plasterer"] .s-hours .hours-inner { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .site[data-look="plasterer"] .s-hours .hours-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
@media (max-width: 30rem) {
  .site[data-look="plasterer"] .hours-card { padding: 1.25rem 1.4rem; }
  .site[data-look="plasterer"] .hours-table th { white-space: normal; }
  .site[data-look="plasterer"] .hours-table th::after { display: block; width: fit-content; margin: 0.3rem 0 0; }
}
.site[data-look="plasterer"] .hours-table th::after { background: var(--pl-ink); color: var(--pl-wall); font-family: var(--font-figures); font-weight: 400; font-size: 0.75rem; border-radius: 0; }

/* --- Call to action: the specie kuip, black rubber flecked with plaster, and the
       round tub of grey plaster beside the words. ---------------------------- */
.site[data-look="plasterer"] .pl-cta { --text: var(--pl-on-tub); --muted: var(--pl-tub-muted); position: relative; overflow: clip; padding-block: clamp(4.5rem, 10vw, 9rem); background: var(--pl-flecks), var(--pl-tub); color: var(--pl-on-tub); }
/* The kuip from above: a thick rim, the black inner wall sloping down, the
   grey plaster in it smoothed by one pull of the trowel, and the stucspaan
   laid across the rim. */
.site[data-look="plasterer"] .pl-tub { --d: clamp(22rem, 42vw, 40rem); position: absolute; z-index: 0; width: var(--d); aspect-ratio: 1; right: calc(-0.2 * var(--d)); top: 50%; translate: 0 -50%; pointer-events: none; }
.site[data-look="plasterer"] .pl-tub::before, .site[data-look="plasterer"] .pl-tub::after { content: ''; position: absolute; border-radius: 50%; }
.site[data-look="plasterer"] .pl-tub::before { inset: 0; background: radial-gradient(circle, transparent 0 66%, #0d0d0c 66.5%, #262624 75%, #1a1a19 86%, #3a3a37 87%, #2c2c2a 92%, #444441 99%, transparent 100%); }
.site[data-look="plasterer"] .pl-tub::after { inset: 17%; background: linear-gradient(118deg, transparent 38%, rgb(255 255 255 / 0.2) 44%, rgb(255 255 255 / 0.08) 56%, transparent 62%), radial-gradient(circle at 40% 35%, rgb(255 255 255 / 0.16), transparent 60%), var(--pl-gypsum), #9e9a91; box-shadow: inset 0 10px 24px rgb(0 0 0 / 0.55); }
.site[data-look="plasterer"] .pl-trowel { position: absolute; z-index: 1; width: 56%; left: -6%; top: 22%; rotate: -28deg; filter: drop-shadow(10px 16px 10px rgb(0 0 0 / 0.55)); }
.site[data-look="plasterer"] .pl-cta-inner { position: relative; z-index: 1; display: grid; gap: 2rem; }
.site[data-look="plasterer"] .pl-cta-text { max-width: 44rem; }
.site[data-look="plasterer"] .pl-cta h2 { font-size: clamp(2.6rem, 1.4rem + 4.6vw, 6.2rem); color: var(--pl-on-tub); }
.site[data-look="plasterer"] .pl-cta p { font-size: var(--fs-lead); color: var(--pl-tub-muted); max-width: 34rem; margin: 0; }
.site[data-look="plasterer"] .pl-cta-act { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; }
.site[data-look="plasterer"] .pl-cta-number { font-weight: 800; font-variant-numeric: tabular-nums; font-size: clamp(2rem, 1.2rem + 3vw, 4rem); letter-spacing: -0.045em; white-space: nowrap; color: var(--pl-on-tub); text-decoration: none; }
.site[data-look="plasterer"] .pl-cta-number:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.site[data-look="plasterer"] .pl-cta :focus-visible { outline-color: var(--pl-on-tub); }
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .pl-tub { --d: 20rem; right: -5rem; top: auto; bottom: -8rem; translate: none; }
  .site[data-look="plasterer"] .pl-cta { padding-bottom: 14rem; }
}

/* --- Contact: the number at the size of the wall. ------------------------------- */
.site[data-look="plasterer"] .s-contact { padding-block: clamp(4rem, 9vw, 8rem); background: var(--pl-rake); }
.site[data-look="plasterer"] .contact-inner { display: grid; gap: 3rem clamp(3rem, 6vw, 6rem); align-items: start; }
@media (min-width: 60rem) { .site[data-look="plasterer"] .contact-inner:has(.contact-form) { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); } }
.site[data-look="plasterer"] .contact-list { display: grid; gap: 0; margin-top: 1.5rem; border-top: 0; }
.site[data-look="plasterer"] .contact-list li { border-top: 1px solid #d3d0c8; padding-block: 1rem; border-bottom: 0; }
.site[data-look="plasterer"] .contact-link { display: grid; gap: 0.1rem; text-decoration: none; }
.site[data-look="plasterer"] .contact-label { font-family: var(--font-figures); font-size: 0.85rem; color: var(--muted); }
.site[data-look="plasterer"] .contact-value { font-weight: 700; font-size: clamp(1.25rem, 1.1rem + 0.6vw, 1.7rem); letter-spacing: -0.025em; overflow-wrap: anywhere; }
.site[data-look="plasterer"] .contact-link:hover .contact-value { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; }
.site[data-look="plasterer"] .contact-list li:first-child { border-top: 0; padding-top: 0; }
.site[data-look="plasterer"] .contact-list li:first-child .contact-value { font-weight: 800; font-size: clamp(2.6rem, 1.2rem + 5.6vw, 6.8rem); letter-spacing: -0.06em; line-height: 0.95; }
.site[data-look="plasterer"] .contact-note, .site[data-look="plasterer"] .contact-also { font-size: 0.95rem; }
.site[data-look="plasterer"] .contact-also { display: inline-block; margin-top: 0.5rem; }
/* The form on a white board, screwed to the wall. */
.site[data-look="plasterer"] :is(.contact-form, .request-form) { --text: var(--on-board); --muted: var(--board-muted); position: relative; border-top: 0; padding: clamp(1.5rem, 3.5vw, 2.75rem); background: var(--pl-screws), var(--pl-board); box-shadow: 0 1px 0 rgb(0 0 0 / 0.1), 0 30px 50px -34px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] :is(.contact-form, .request-form) label { font-weight: 650; }
.site[data-look="plasterer"] :is(.contact-form, .request-form) :is(input:not([type="checkbox"], [type="radio"]), textarea, select) { border: 0; border-bottom: 2px solid var(--pl-ink); border-radius: 0; background: #f4f3ef; padding: 0.8rem 0.9rem; font: inherit; color: var(--pl-ink); }
.site[data-look="plasterer"] :is(.contact-form, .request-form) :is(input, textarea, select):focus-visible { outline: 3px solid var(--pl-ink); outline-offset: 2px; background: #fff; }
.site[data-look="plasterer"] .form-note { font-size: 0.92rem; }

/* --- Request form and booking (the inmeten visit). --------------------------- */
.site[data-look="plasterer"] :is(.s-request, .s-booking, .s-booking-flow) { padding-block: clamp(4rem, 9vw, 8rem); background: var(--pl-gypsum), var(--pl-gyp); color: var(--pl-ink); }
/* The booking list on the plain wall, so it never sits on the same grey as the form above it. */
.site[data-look="plasterer"] .s-booking { background: var(--pl-rake), var(--pl-wall-low); }
.site[data-look="plasterer"] :is(.s-request, .s-booking) .lead { color: var(--pl-ink); }
.site[data-look="plasterer"] .request-step > legend { font-weight: 800; letter-spacing: -0.03em; font-size: 1.5rem; }
.site[data-look="plasterer"] .request-step + .request-step { border-top-color: #e3e0d9; }
.site[data-look="plasterer"] .s-booking .booking-inner > :is(ul, div, form, p:not(.lead)) { background-color: var(--pl-board); }
.site[data-look="plasterer"] .booking-services { border-top: 0; padding: 0.5rem clamp(1.25rem, 3vw, 2rem); box-shadow: 0 30px 50px -34px rgb(40 34 26 / 0.6); }
.site[data-look="plasterer"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="plasterer"] .booking-name { font-size: 1.25rem; font-weight: 750; letter-spacing: -0.02em; }
.site[data-look="plasterer"] .booking-choices a { border-radius: 0; background: var(--pl-board); }
.site[data-look="plasterer"] .booking-services a { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 30rem) {
  .site[data-look="plasterer"] .booking-services a { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="plasterer"] .booking-go { grid-column: 1; grid-row: auto; justify-self: start; margin-top: 0.3rem; }
}
.site[data-look="plasterer"] .booking-choices a[aria-current] { background: var(--pl-ink); color: var(--pl-wall); border-color: var(--pl-ink); }

/* --- Trust strip: the customer's own claims, one line on tape. ---------------- */
.site[data-look="plasterer"] .s-trust { padding-block: 1.4rem; background: var(--pl-wall-low); }
.site[data-look="plasterer"] .trust-list { font-size: 1.1rem; font-weight: 650; }
.site[data-look="plasterer"] .trust-list li:not(:last-child)::after { color: var(--pl-steel); }

/* --- Gallery: the customer's own work, large and plain. --------------------------- */
.site[data-look="plasterer"] .s-gallery { padding-block: clamp(4rem, 9vw, 8rem); }
.site[data-look="plasterer"] .s-gallery .gallery-items { display: grid; gap: clamp(0.75rem, 1.5vw, 1.25rem); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 2rem; }
.site[data-look="plasterer"] .s-gallery .gallery-items li:first-child, .site[data-look="plasterer"] .s-gallery .gallery-items li:last-child:nth-child(even) { grid-column: 1 / -1; }
@media (max-width: 30rem) { .site[data-look="plasterer"] .s-gallery .gallery-items { grid-template-columns: minmax(0, 1fr); } }
.site[data-look="plasterer"] .s-gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: var(--pl-gyp); }
@media (min-width: 52rem) { .site[data-look="plasterer"] .s-gallery .gallery-items li:first-child img { aspect-ratio: 21 / 9; } }

/* --- Subpages: their first section carries the page's h1 at hero scale. --------- */
.site[data-look="plasterer"] main > .s:first-child:not(.s-hero) > .wrap h1,
.site[data-look="plasterer"] main > .s:first-child:not(.s-hero) h1 { font-size: clamp(3rem, 1.6rem + 6vw, 7.5rem); letter-spacing: -0.05em; }

/* --- Footer: the floor under the wall, a corner bead along its top. ------------- */
.site[data-look="plasterer"] .site-footer { position: relative; padding-top: clamp(3.5rem, 7vw, 6rem); background: var(--deep); }
.site[data-look="plasterer"] .site-footer::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 14px; background: var(--pl-bead-holes) 0 1px / 9px 6px repeat-x, var(--pl-bead-holes) 4.5px 8px / 9px 6px repeat-x, linear-gradient(180deg, #8a8f93, #dfe2e4 18%, #a3a8ac 34%, #f6f7f8 46%, #c9cdd0 50%, #f6f7f8 54%, #a3a8ac 66%, #dfe2e4 82%, #8a8f93); }
.site[data-look="plasterer"] .footer-brand .footer-name { font-weight: 800; font-size: clamp(1.8rem, 1.2rem + 2.4vw, 3.4rem); letter-spacing: -0.045em; line-height: 0.98; max-width: 16ch; }
.site[data-look="plasterer"] .site-footer { font-size: 1rem; }
.site[data-look="plasterer"] .footer-title { font-family: var(--font-figures); font-weight: 400; color: var(--muted); }

/* --- Quick bar (phones): the kuip's black, the button orange. ----------------- */
@media (max-width: 51.99rem) {
  .site[data-look="plasterer"] .quickbar { --on-deep: var(--pl-on-tub); background: var(--pl-tub); border-top: 0; }
  .site[data-look="plasterer"] .quick { font-size: 1.05rem; font-weight: 750; }
}

/* --- Motion: samples are hung, tape is stuck on, quotes come up. Only with motion allowed. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="plasterer"] .pl-board .service { animation: pl-hang linear forwards; animation-timeline: view(); animation-range: entry 0% entry 55%; }
    .site[data-look="plasterer"] .pl-tapes li { animation: pl-tape linear forwards; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    .site[data-look="plasterer"] .pl-reviews li { animation: pl-rise linear forwards; animation-timeline: view(); animation-range: entry 0% entry 50%; }
  }
  @keyframes pl-hang { from { translate: 0 28px; } }
  @keyframes pl-tape { from { scale: 0.86 1; } }
  @keyframes pl-rise { from { translate: 0 24px; } }
  .site[data-look="plasterer"] .pl-hero-text > * { animation: pl-rise 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
  .site[data-look="plasterer"] .pl-hero-text > :nth-child(2) { animation-delay: 0.08s; }
  .site[data-look="plasterer"] .pl-hero-text > :nth-child(3) { animation-delay: 0.16s; }
  .site[data-look="plasterer"] .pl-hero-text > :nth-child(4) { animation-delay: 0.24s; }
}

/* ---- looks/roofer.css ---- */
/* The roofer look: everything here is scoped to .site[data-look="roofer"]. Appended after base.css (bun run --filter @platform/sections css).
   The page lives on the roof: sky, the drawn roofline, a zinc gutter, the boeiboord with the number, the two doorsneden,
   standing-seam zinc, Hollandse pannen, a street of rooftops. Fixed artefact colours: --roof (anthracite), --on-roof,
   --roof-muted, --lead, --zinc, --clay (theme.ts); the light sections follow the preset. */

.site[data-look="roofer"] {
  --rf-bitumen: #1f2124;
  --rf-insulation: #efe2a2;
  --rf-zinc-ink: #3d4247;
  --fs-h2: calc(clamp(2.05rem, 1.45rem + 2.5vw, 3.75rem) * var(--heading-scale, 1));
  --fs-base: 1.0625rem;
}
.site[data-look="roofer"] main > .s + .s { border-top: 0; }
.site[data-look="roofer"] :is(h1, h2, h3) { line-height: 0.95; overflow-wrap: break-word; hyphens: auto; }

/* --- Header: the anthracite fascia, the number lettered on it ------------- */
.site[data-look="roofer"] .site-header { --bg: var(--roof); --text: var(--on-roof); --muted: var(--roof-muted); --border: rgb(244 246 248 / 0.16); background: var(--roof); color: var(--on-roof); border-bottom: 0; }
.site[data-look="roofer"] .header-inner { min-height: 4.6rem; padding-block: 0.6rem; }
.site[data-look="roofer"] .brand { font-size: calc(1.45rem * var(--heading-scale)); letter-spacing: 0.02em; }
.site[data-look="roofer"] .site-header nav a { font-weight: 600; }
.site[data-look="roofer"] .site-header nav a[aria-current='page'] { text-decoration-color: var(--clay); text-decoration-thickness: 3px; }
.site[data-look="roofer"] .site-header .btn { background: transparent; border: 0; padding: 0.35rem 0; min-height: 44px; color: var(--on-roof); font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.15rem; }
.site[data-look="roofer"] .site-header .btn .cta-detail { font-size: 1.55rem; letter-spacing: 0.02em; }
.site[data-look="roofer"] .site-header .btn:hover { text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 3px; text-underline-offset: 0.3em; }

/* --- Hero: sky, the roofline, the photo under it, gutter, boeiboord ------- */
.site[data-look="roofer"] .rf-hero { padding: 0; display: grid; grid-template-rows: minmax(0, 1fr) auto auto; min-height: calc(calc(100 * var(--raam-vh)) - 10.5rem); background: var(--bg); overflow: clip; }
.site[data-look="roofer"] .rf-house { position: relative; display: grid; grid-template-rows: auto minmax(clamp(7rem, calc(19 * var(--raam-vh)), 15rem), 1fr); }
.site[data-look="roofer"] .rf-house .hero-media { position: absolute; inset: 0; left: 0; width: auto; margin: 0; z-index: 0; background: var(--lead); }
.site[data-look="roofer"] .rf-house .hero-img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; max-height: none; }
.site[data-look="roofer"] .rf-sky { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
.site[data-look="roofer"] .rf-sky-text {
  container-type: inline-size; position: relative; align-self: stretch; display: flex; align-items: flex-end;
  background: var(--bg); border-bottom: 6px solid var(--text);
  padding: clamp(2.5rem, calc(7 * var(--raam-vh)), 5rem) clamp(1rem, 3vw, 2.5rem) clamp(0.9rem, calc(2.2 * var(--raam-vh)), 1.6rem) max(var(--gap), (100vw - var(--wrap)) / 2);
}
.site[data-look="roofer"] .rf-gable { position: relative; display: block; width: 100%; height: clamp(15rem, calc(36 * var(--raam-vh)), 25rem); min-height: 100%; overflow: visible; }
.site[data-look="roofer"] .rf-gable-sky { fill: var(--bg); }
.site[data-look="roofer"] .rf-gable-line { fill: none; stroke: var(--text); stroke-width: 6px; vector-effect: non-scaling-stroke; stroke-linejoin: miter; }
.site[data-look="roofer"] .rf-plain .rf-house { grid-template-rows: auto 0; }
.site[data-look="roofer"] .rf-gable-cell { position: relative; min-width: 0; }
.site[data-look="roofer"] .rf-plain .rf-gable-cell { background: var(--clay); }
.site[data-look="roofer"] .rf-pannen { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }

.site[data-look="roofer"] .rf-h { margin: 0; max-width: none; line-height: 0.86; letter-spacing: 0.005em; overflow-wrap: break-word; hyphens: auto; text-wrap: balance; }
.site[data-look="roofer"] .rf-h > span { display: block; font-size: min(1em, 100cqw / (var(--rf-word) * 0.5)); }
.site[data-look="roofer"] .rf-h-xl { font-size: clamp(4.6rem, 1rem + 9vw, 10rem); }
.site[data-look="roofer"] .rf-h-l { font-size: clamp(4rem, 1rem + 7vw, 8.25rem); }
.site[data-look="roofer"] .rf-h-m { font-size: clamp(3rem, 1rem + 4.6vw, 5.8rem); }
.site[data-look="roofer"] .rf-h-s { font-size: clamp(2.3rem, 1rem + 3vw, 4.3rem); line-height: 0.92; }

/* The zinc half-round gutter on its brackets, and its downpipe. */
.site[data-look="roofer"] .rf-gutter {
  position: relative; z-index: 2; height: clamp(1.45rem, 2.4vw, 2rem);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(7.5rem - 6px), rgb(46 49 53 / 0.6) calc(7.5rem - 6px) calc(7.5rem - 2px), transparent calc(7.5rem - 2px) 7.5rem),
    linear-gradient(180deg, #f5f7f8 0 10%, #8d959c 10% 15%, #e3e7ea 15% 24%, #c9ced3 45%, #a5acb3 75%, #7c848b 100%);
  box-shadow: 0 7px 9px -6px rgb(0 0 0 / 0.5);
}
.site[data-look="roofer"] .rf-gutter-lip { position: absolute; inset: 0 0 auto; height: 3px; background: #fbfcfd; box-shadow: 0 1px 0 #6f777e; }
.site[data-look="roofer"] .rf-fascia { position: relative; z-index: 1; background: var(--roof); color: var(--on-roof); --text: var(--on-roof); --muted: var(--roof-muted); --bg: var(--roof); padding-block: clamp(1.6rem, calc(3.6 * var(--raam-vh)), 2.75rem) clamp(1.6rem, calc(3.6 * var(--raam-vh)), 2.5rem); }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .rf-phone { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 1.1rem; }
  .site[data-look="roofer"] .rf-phone-label { font-size: clamp(1.6rem, 0.8rem + 1.5vw, 2.6rem); }
  .site[data-look="roofer"] .rf-gutter-pipe::after {
    content: ''; position: absolute; top: 55%; right: max(1.25rem, (100vw - var(--wrap)) / 4); width: 1.5rem; height: 30rem; z-index: -1;
    background:
      linear-gradient(180deg, transparent 0 4.5rem, rgb(46 49 53 / 0.7) 4.5rem 5rem, transparent 5rem 13rem, rgb(46 49 53 / 0.7) 13rem 13.5rem, transparent 13.5rem),
      linear-gradient(90deg, #7c848b, #e3e7ea 30%, #c4cad0 55%, #8d959c 100%);
  }
  .site[data-look="roofer"] .rf-hero { position: relative; }
}
.site[data-look="roofer"] .rf-fascia-inner { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.25rem clamp(2rem, 5vw, 5rem); }
.site[data-look="roofer"] .rf-phone { display: grid; gap: 0.3rem; color: var(--on-roof); text-decoration: none; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; line-height: 0.86; min-width: 0; }
.site[data-look="roofer"] .rf-phone-label { font-size: clamp(1.35rem, 1rem + 1.1vw, 2.1rem); color: var(--roof-muted); letter-spacing: 0.03em; }
.site[data-look="roofer"] .rf-phone-number { font-size: clamp(3rem, 0.6rem + 6.2vw, 6.75rem); letter-spacing: 0.015em; white-space: nowrap; font-variant-numeric: tabular-nums; text-decoration: underline 0.07em transparent; text-underline-offset: 0.12em; transition: text-decoration-color 0.2s; }
.site[data-look="roofer"] .rf-phone:hover .rf-phone-number, .site[data-look="roofer"] .rf-phone:focus-visible .rf-phone-number { text-decoration-color: var(--clay); }
.site[data-look="roofer"] .rf-fascia-side { max-width: 31rem; flex: 1 1 18rem; }
.site[data-look="roofer"] .rf-fascia .lead { color: var(--on-roof); margin: 0; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); }
.site[data-look="roofer"] .rf-fascia .actions { margin-top: 1rem; }
.site[data-look="roofer"] .rf-fascia .cta-alt { color: var(--on-roof); }
.site[data-look="roofer"] .rf-fascia .btn { min-height: 56px; font-size: 1.15rem; padding-inline: 1.5rem; }

@media (max-width: 51.99rem) {
  .site[data-look="roofer"] .rf-hero { min-height: 0; }
  .site[data-look="roofer"] .rf-house { grid-template-rows: auto clamp(7rem, 24vw, 12rem); }
  .site[data-look="roofer"] .rf-sky { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto clamp(5rem, 22vw, 9rem); }
  .site[data-look="roofer"] .rf-sky-text { border-bottom: 0; padding: clamp(2rem, 8vw, 3rem) var(--gap) 1.25rem; }
  .site[data-look="roofer"] .rf-plain .rf-sky { grid-template-rows: auto clamp(4rem, 16vw, 7rem); }
  .site[data-look="roofer"] .rf-gable { height: 100%; }
}

/* --- Services: the two doorsneden, then zinc for every roof -------------- */
.site[data-look="roofer"] .rf-services { padding-bottom: 0; background: var(--bg); }
.site[data-look="roofer"] .rf-services .sheet-head { max-width: 52rem; }
.site[data-look="roofer"] .rf-services .sheet-head .lead { color: var(--muted); font-size: var(--fs-lead); }
.site[data-look="roofer"] .roof-cols { display: grid; gap: 3.5rem clamp(2rem, 5vw, 4.5rem); margin-top: clamp(2.25rem, 5vw, 3.75rem); }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .roof-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site[data-look="roofer"] .roof-cols.rf-one { grid-template-columns: minmax(0, 40rem); }
}
.site[data-look="roofer"] .roof-col > :is(h2, h3).rf-col-head { margin: 1.4rem 0 0; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); line-height: 0.95; }
.site[data-look="roofer"] .roof-col .service-list { margin-top: 0.9rem; border-top: 6px solid var(--text); }

/* The drawing sheet: white, framed, the layers in thin lines. */
.site[data-look="roofer"] .dw { margin: 0; background: #fff; border: 1.5px solid var(--roof); padding: clamp(0.5rem, 1.5vw, 1rem) clamp(0.5rem, 1.5vw, 1rem) 0.25rem; }
.site[data-look="roofer"] .dw svg { display: block; width: 100%; max-width: none; height: auto; overflow: visible; }
.site[data-look="roofer"] .dw text { font-family: var(--font-body); font-size: 15px; font-weight: 600; fill: var(--roof); }
.site[data-look="roofer"] .dw .dw-aside { font-weight: 400; font-style: italic; fill: #51575e; }
.site[data-look="roofer"] .dw-layers path { fill: none; stroke: var(--roof); stroke-width: 1.3; stroke-linejoin: round; }
.site[data-look="roofer"] .dw-layers .dw-bitumen { fill: var(--rf-bitumen); }
.site[data-look="roofer"] .dw-layers .dw-insulation { fill: var(--rf-insulation); }
.site[data-look="roofer"] .dw-layers .dw-hatch { stroke-width: 0.9; }
.site[data-look="roofer"] .dw-layers .dw-foil { stroke-dasharray: 7 4; stroke-width: 1.1; }
.site[data-look="roofer"] .dw-layers :is(.dw-timber, .dw-joist) { fill: #fff; }
.site[data-look="roofer"] .dw-layers .dw-grain { stroke-width: 0.6; stroke-dasharray: 22 9; }
.site[data-look="roofer"] .dw-layers .dw-batten { fill: #d9c49a; stroke-width: 1; }
.site[data-look="roofer"] .dw-layers .dw-tile { fill: var(--clay); stroke: var(--rf-bitumen); stroke-width: 1.1; }
.site[data-look="roofer"] .dw-layers .dw-gutter { fill: var(--zinc); stroke-width: 1.6; }
.site[data-look="roofer"] .dw-layers .dw-trim { stroke: var(--lead); stroke-width: 4; stroke-linejoin: miter; }
.site[data-look="roofer"] .dw-layers .dw-thin { stroke-width: 1; }
.site[data-look="roofer"] .dw-layers .dw-wall { stroke-width: 1.3; }
.site[data-look="roofer"] .dw-notes .dw-leader { fill: none; stroke: var(--roof); stroke-width: 1; }
.site[data-look="roofer"] .dw-notes .dw-dot { fill: var(--roof); }
@media (max-width: 40rem) { .site[data-look="roofer"] .dw text { font-size: 19px; } }

/* Service lines: name and price large, a clay mark on hover. */
.site[data-look="roofer"] .rf-services .service { position: relative; padding-block: 1.15rem 1.2rem; border-bottom: 1px solid var(--border); }
.site[data-look="roofer"] .rf-services .service::before { content: ''; position: absolute; left: calc(-1 * clamp(0.6rem, 1.4vw, 1rem)); top: 1.15rem; bottom: 1.2rem; width: 5px; background: var(--clay); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; }
.site[data-look="roofer"] .rf-services .service:hover::before { transform: scaleY(1); }
.site[data-look="roofer"] .rf-services .service :is(h2, h3, h4) { margin: 0; font-family: var(--font-body); text-transform: none; letter-spacing: -0.005em; font-weight: 700; font-size: 1.24rem; line-height: 1.25; }
.site[data-look="roofer"] .rf-services .price-row { flex-wrap: nowrap; align-items: baseline; }
.site[data-look="roofer"] .rf-services .price-row .leader { flex: 1 1 1.5rem; min-width: 1rem; border-bottom: 2px dotted color-mix(in srgb, var(--text) 35%, transparent); transform: translateY(-0.3em); }
.site[data-look="roofer"] .rf-services .price { font-family: var(--font-body); font-weight: 700; font-size: 1.15rem; text-align: right; white-space: normal; }
.site[data-look="roofer"] .rf-services .price-from, .site[data-look="roofer"] .rf-services .price-unit { font-weight: 500; font-size: 0.85em; color: var(--muted); }
.site[data-look="roofer"] .rf-services .service-note { font-size: 1.04rem; margin-top: 0.3rem; color: var(--muted); }
@media (max-width: 40rem) {
  .site[data-look="roofer"] .rf-services .price-row { flex-wrap: wrap; }
  .site[data-look="roofer"] .rf-services .price-row .leader { display: none; }
  .site[data-look="roofer"] .rf-services .price { flex-basis: 100%; text-align: left; margin-top: 0.15rem; }
}

/* The zinc band: standing seams, every roof's work on it. */
.site[data-look="roofer"] .rf-zinc {
  --text: var(--roof); --muted: var(--rf-zinc-ink); --border: rgb(46 49 53 / 0.3); --seam: clamp(4.25rem, 8vw, 7rem);
  color: var(--roof); margin-top: clamp(3.5rem, 8vw, 6rem); padding-block: clamp(2.75rem, 6vw, 4.75rem) clamp(3rem, 7vw, 5.5rem);
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(var(--seam) - 5px), rgb(255 255 255 / 0.7) calc(var(--seam) - 5px) calc(var(--seam) - 3px), rgb(46 49 53 / 0.3) calc(var(--seam) - 3px) calc(var(--seam) - 1px), transparent calc(var(--seam) - 1px) var(--seam)),
    linear-gradient(100deg, #d2d6da 0%, #c3c9ce 38%, #d7dbdf 55%, #bec4c9 100%);
}
.site[data-look="roofer"] .rf-zinc > .wrap > :is(h2, h3) { margin: 0; font-size: clamp(2.2rem, 1.6rem + 2vw, 3.4rem); }
/* The work sits on one flat sheet laid over the seams (a calm surface for
   the text); only the heading stands on the standing seams themselves. */
.site[data-look="roofer"] .rf-zinc .service-list {
  margin-top: 1rem; border-top: 6px solid var(--roof); display: grid; column-gap: clamp(2rem, 5vw, 4.5rem);
  padding: clamp(0.5rem, 1.5vw, 1rem) clamp(1.1rem, 3vw, 2.25rem) clamp(0.75rem, 2vw, 1.5rem);
  background: linear-gradient(100deg, #e3e6e9, #dadee2 60%, #e1e4e7);
  box-shadow: 0 0 0 1px rgb(46 49 53 / 0.22), 0 3px 0 rgb(46 49 53 / 0.16);
}
@media (min-width: 52rem) { .site[data-look="roofer"] .rf-zinc .service-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="roofer"] .rf-services-plain .rf-zinc { margin-top: clamp(2rem, 5vw, 3.5rem); }
.site[data-look="roofer"] .rf-zinc .service-note { color: var(--rf-zinc-ink); }
.site[data-look="roofer"] .rf-zinc .price-from, .site[data-look="roofer"] .rf-zinc .price-unit { color: var(--rf-zinc-ink); }
/* A leak: the first thing on the zinc, the number with it. */
@media (min-width: 52rem) { .site[data-look="roofer"] .rf-zinc .rf-leak { grid-column: 1 / -1; } }
.site[data-look="roofer"] .rf-zinc .rf-leak :is(h2, h3, h4) { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); letter-spacing: 0.01em; line-height: 0.95; }
.site[data-look="roofer"] .rf-now { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.4rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: 1.45rem; color: var(--roof); text-decoration: underline; text-decoration-color: var(--clay); text-decoration-thickness: 3px; text-underline-offset: 0.25em; }

/* --- About: the photo to the page edge, the year big ------------------------ */
.site[data-look="roofer"] .rf-about { padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); background: var(--bg); }
.site[data-look="roofer"] .rf-about.about-text { max-width: none; }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .rf-about.rf-about-text .about-text { max-width: none; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="roofer"] .rf-about.rf-about-text .about-text > * { grid-column: 2; max-width: 38rem; }
  .site[data-look="roofer"] .rf-about.rf-about-text .about-text > p.rf-since { grid-column: 1; grid-row: 1 / span 4; }
}
.site[data-look="roofer"] .rf-about .about-media { min-height: 18rem; }
.site[data-look="roofer"] .rf-about .about-img { width: 100%; height: 100%; aspect-ratio: auto; max-height: none; object-fit: cover; }
.site[data-look="roofer"] .rf-about .about-inner { display: block; padding-block: var(--section-pad); }
.site[data-look="roofer"] .rf-about .about-text { max-width: 36rem; }
.site[data-look="roofer"] .rf-about .about-text > p { font-size: 1.12rem; }
.site[data-look="roofer"] .rf-about .about-text > p:first-of-type { font-size: clamp(1.2rem, 1.05rem + 0.5vw, 1.45rem); line-height: 1.45; }
.site[data-look="roofer"] .rf-about .about-text > p.rf-since { margin: 0 0 1.5rem; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; line-height: 0.8; font-size: clamp(5rem, 2.5rem + 8vw, 10rem); letter-spacing: 0.01em; color: var(--text); }
.site[data-look="roofer"] .rf-since span { display: block; font-size: 0.24em; letter-spacing: 0.04em; line-height: 1; margin-bottom: 0.2em; }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .rf-about:not(.rf-about-text) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(32rem, calc(70 * var(--raam-vh)), 44rem); }
  .site[data-look="roofer"] .rf-about .about-media { grid-row: 1; grid-column: 2; }
  .site[data-look="roofer"] .rf-about.about-image_left .about-media { grid-column: 1; }
  .site[data-look="roofer"] .rf-about:not(.rf-about-text) .about-inner { grid-row: 1; grid-column: 1; width: auto; margin: 0; align-self: center; padding-inline: max(var(--gap), (100vw - var(--wrap)) / 2) clamp(2rem, 5vw, 5rem); }
  .site[data-look="roofer"] .rf-about.about-image_left .about-inner { grid-column: 2; padding-inline: clamp(2rem, 5vw, 5rem) max(var(--gap), (100vw - var(--wrap)) / 2); }
}

/* --- Gallery: on bitumen, the photos large, lead lines between ----------- */
.site[data-look="roofer"] .s-gallery { --text: var(--on-roof); --muted: var(--roof-muted); background: var(--rf-bitumen); color: var(--on-roof); }
.site[data-look="roofer"] .s-gallery .gallery-items { display: grid; gap: 6px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: clamp(1.75rem, 4vw, 2.75rem); }
.site[data-look="roofer"] .s-gallery .gallery-items li { background: var(--roof); overflow: hidden; grid-column: auto; grid-row: auto; }
.site[data-look="roofer"] .s-gallery .gallery-items img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform 0.5s ease; }
.site[data-look="roofer"] .s-gallery .gallery-items li:hover img { transform: scale(1.035); }
.site[data-look="roofer"] .s-gallery .gallery-items li:first-child { grid-column: 1 / -1; }
.site[data-look="roofer"] .s-gallery .gallery-items li:first-child img { aspect-ratio: 16 / 9; }
@media (max-width: 51.99rem) { .site[data-look="roofer"] .s-gallery .gallery-items li:last-child:nth-child(even) { grid-column: 1 / -1; } .site[data-look="roofer"] .s-gallery .gallery-items li:last-child:nth-child(even) img { aspect-ratio: 16 / 9; } }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .s-gallery .gallery-items { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site[data-look="roofer"] .s-gallery .gallery-items li:first-child { grid-column: span 2; grid-row: span 2; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:first-child:only-child { grid-column: 1 / -1; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:first-child:nth-last-child(2) { grid-row: auto; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:first-child:nth-last-child(2) img { aspect-ratio: 4 / 3; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:last-child:nth-child(3n + 1):not(:first-child) { grid-column: 1 / -1; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:last-child:nth-child(3n + 1):not(:first-child) img { aspect-ratio: 3 / 1; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:last-child:nth-child(3n + 2):not(:nth-child(2)) { grid-column: span 2; }
  .site[data-look="roofer"] .s-gallery .gallery-items li:last-child:nth-child(3n + 2):not(:nth-child(2)) img { aspect-ratio: 8 / 3; }
}

/* --- Reviews: set large on Hollandse pannen (shading only darkens) ------- */
.site[data-look="roofer"] .rf-reviews {
  --text: #ffffff; --muted: #ffffff; color: #ffffff;
  position: relative; background: var(--clay);
  padding-block: clamp(4rem, 9vw, 7.5rem);
}
.site[data-look="roofer"] .rf-reviews > .wrap { position: relative; }
.site[data-look="roofer"] .rf-reviews .quote-list { margin-top: clamp(1.5rem, 4vw, 2.5rem); display: grid; gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 5vw, 4.5rem); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 52rem) { .site[data-look="roofer"] .rf-reviews > .wrap { position: relative; }
.site[data-look="roofer"] .rf-reviews .quote-list { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.site[data-look="roofer"] .rf-reviews .quote-list li:first-child { grid-column: 1 / -1; }
.site[data-look="roofer"] .rf-reviews .quote-list figure { margin: 0; padding: 0; border: 0; }
.site[data-look="roofer"] .rf-reviews blockquote { margin: 0 0 1rem; }
.site[data-look="roofer"] .rf-reviews blockquote p { margin: 0; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); font-weight: 600; line-height: 1.35; text-wrap: pretty; }
.site[data-look="roofer"] .rf-reviews li:first-child blockquote p { font-size: clamp(1.75rem, 1.1rem + 2.5vw, 3.25rem); line-height: 1.16; letter-spacing: -0.01em; max-width: 28ch; }
.site[data-look="roofer"] .rf-reviews blockquote p::before { content: '\201E'; }
.site[data-look="roofer"] .rf-reviews blockquote p::after { content: '\201D'; }
.site[data-look="roofer"] .rf-reviews figcaption { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.25rem; color: #ffffff; }

/* --- Werkgebied: a street of rooftops ---------------------------------------- */
.site[data-look="roofer"] .rf-area { background: var(--bg); padding-bottom: clamp(3rem, 7vw, 5rem); }
.site[data-look="roofer"] .rf-area .area-body { font-size: var(--fs-lead); color: var(--muted); }
.site[data-look="roofer"] ul.rf-street { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 9.75rem), 1fr)); align-items: end; gap: 2.25rem 0; margin-top: clamp(2rem, 5vw, 3rem); font-size: inherit; font-weight: inherit; }
.site[data-look="roofer"] ul.rf-street li { position: relative; min-width: 0; white-space: normal; padding: 3.5rem 0.4rem 0; border-bottom: 5px solid var(--text); }
.site[data-look="roofer"] ul.rf-street li::after { content: none; }
.site[data-look="roofer"] ul.rf-street li::before { content: ''; position: absolute; top: 0.15rem; left: 0; right: 0; height: 3.45rem; background: var(--roof); transition: background-color 0.2s; clip-path: polygon(0 100%, 50% 0, 100% 100%); }
.site[data-look="roofer"] ul.rf-street li:nth-child(even)::before { background: var(--clay); }
.site[data-look="roofer"] ul.rf-street li:hover::before { background: var(--lead); }
.site[data-look="roofer"] ul.rf-street .rf-house-flat::before { clip-path: polygon(0 62%, 100% 62%, 100% 100%, 0 100%); }
.site[data-look="roofer"] ul.rf-street .rf-house-mono::before { clip-path: polygon(0 100%, 0 20%, 100% 72%, 100% 100%); }
.site[data-look="roofer"] ul.rf-street .rf-house-hip::before { clip-path: polygon(0 100%, 26% 18%, 74% 18%, 100% 100%); }
.site[data-look="roofer"] ul.rf-street .rf-house-step::before { clip-path: polygon(0 100%, 0 72%, 14% 72%, 14% 44%, 28% 44%, 28% 16%, 72% 16%, 72% 44%, 86% 44%, 86% 72%, 100% 72%, 100% 100%); }
.site[data-look="roofer"] ul.rf-street .rf-house-dormer::before { clip-path: polygon(0 100%, 30% 22%, 40% 22%, 40% 4%, 62% 4%, 62% 48%, 100% 100%); }
.site[data-look="roofer"] ul.rf-street li span { display: block; margin-inline: 0.35rem; padding: 1.1rem 0.5rem 1.2rem; text-align: center; background: #ffffff; color: var(--roof); border: 2px solid var(--roof); border-bottom: 0; font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; font-size: clamp(1.1rem, 0.95rem + 0.45vw, 1.4rem); line-height: 1.05; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="roofer"] ul.rf-street li:nth-child(3n + 2) span { padding-block: 1.6rem 1.4rem; }
.site[data-look="roofer"] ul.rf-street li:nth-child(4n + 3) span { padding-block: 1.3rem 2rem; }

/* --- FAQ, hours, call to action, trust, request form, booking -------------- */
.site[data-look="roofer"] .s-faq { background: var(--surface); }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .s-faq > .wrap { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="roofer"] .s-faq .faq-items { margin-top: 0.4rem; }
}
.site[data-look="roofer"] .faq-items { max-width: none; }
.site[data-look="roofer"] .faq-items details:first-child { border-top: 6px solid var(--text); }
.site[data-look="roofer"] .faq-items summary { font-size: 1.2rem; font-weight: 700; min-height: 4rem; padding-block: 0.9rem; }
.site[data-look="roofer"] .faq-items summary::after { font-family: var(--font-heading); font-weight: 800; font-size: 2rem; color: var(--text); }
.site[data-look="roofer"] .faq-items details p, .site[data-look="roofer"] .faq-items dd { font-size: 1.08rem; color: var(--muted); }

.site[data-look="roofer"] .hours-card { position: relative; background: var(--zinc); color: var(--roof); padding: 0.75rem 1.5rem; --text: var(--roof); --muted: var(--rf-zinc-ink); --border: rgb(46 49 53 / 0.3); box-shadow: inset 0 0 0 2px rgb(46 49 53 / 0.25); }
.site[data-look="roofer"] .hours-table th::before { background: var(--clay) !important; }

.site[data-look="roofer"] .s-cta {
  --text: var(--on-roof); --muted: var(--roof-muted); color: var(--on-roof);
  background: repeating-linear-gradient(104deg, transparent 0 22px, rgb(244 246 248 / 0.06) 22px 23px), var(--roof);
}
.site[data-look="roofer"] .s-cta h2, .site[data-look="roofer"] .s-cta h1 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 5rem); }
.site[data-look="roofer"] .s-cta .btn { min-height: 58px; font-size: 1.2rem; }

.site[data-look="roofer"] .s-trust { --text: var(--on-roof); --muted: var(--roof-muted); background: var(--roof); color: var(--on-roof); padding-block: 1.1rem; }
.site[data-look="roofer"] .s-trust .trust-list { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.3rem; }

.site[data-look="roofer"] .s-request { background: var(--surface); }
.site[data-look="roofer"] .request-form { background: #ffffff; --bg: #ffffff; border: 2px solid var(--roof); border-top: 12px solid var(--roof); padding: clamp(1.25rem, 3vw, 2.25rem); color: var(--roof); }
.site[data-look="roofer"] .request-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 2px solid var(--roof); border-radius: 0; }
.site[data-look="roofer"] .request-form .btn { font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.03em; font-size: 1.3rem; }
.site[data-look="roofer"] .request-step > legend { font-size: 1.9rem; }
/* Beside the werkbon, low in the empty column: the number, for whoever would rather call. */
.site[data-look="roofer"] .rf-request { position: relative; background: var(--surface); }
.site[data-look="roofer"] .rf-request-call { padding-bottom: var(--section-pad); }
.site[data-look="roofer"] .rf-request-call .rf-phone { color: var(--text); }
.site[data-look="roofer"] .rf-request-call .rf-phone-label { color: var(--muted); font-size: clamp(1.3rem, 1rem + 0.8vw, 1.8rem); }
.site[data-look="roofer"] .rf-request-call .rf-phone-number { font-size: clamp(2.6rem, 1.4rem + 2.6vw, 4.2rem); }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .rf-request-call { position: absolute; left: 0; right: 0; bottom: 0; pointer-events: none; }
  .site[data-look="roofer"] .rf-request-call .rf-phone { pointer-events: auto; display: grid; width: calc((100% - clamp(2rem, 5vw, 4rem)) * 0.4); }
  .site[data-look="roofer"] .rf-request-call .rf-phone-label { font-size: clamp(1.3rem, 1rem + 0.8vw, 1.8rem); }
}

.site[data-look="roofer"] .s-booking { background: var(--surface); }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .s-booking .booking-inner { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(2rem, 5vw, 5rem); align-items: start; }
  .site[data-look="roofer"] .s-booking .booking-inner > * { grid-column: 1; max-width: none; }
  .site[data-look="roofer"] .s-booking .booking-inner > .booking-services { grid-column: 2; grid-row: 1 / span 3; margin-top: 0.4rem; }
}
.site[data-look="roofer"] .booking-services { border-top: 6px solid var(--text); }
.site[data-look="roofer"] .booking-services a { min-height: 4rem; }
.site[data-look="roofer"] .booking-name { font-size: 1.2rem; font-weight: 700; }
.site[data-look="roofer"] .booking-go { font-family: var(--font-heading); text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.03em; text-decoration-color: var(--clay); text-decoration-thickness: 3px; }

/* --- Contact: under the gutter again, the boeiboord and a storm sky ------- */
.site[data-look="roofer"] .rf-close { --bg: var(--roof); --surface: var(--rf-bitumen); --text: var(--on-roof); --muted: var(--roof-muted); --border: rgb(244 246 248 / 0.2); position: relative; background: var(--roof); color: var(--on-roof); }
.site[data-look="roofer"] .rf-close-inner { position: relative; }
.site[data-look="roofer"] .rf-close .s-contact { position: relative; z-index: 1; padding-block: clamp(3.5rem, 8vw, 6.5rem); }
.site[data-look="roofer"] .rf-close .contact-list { border-top: 6px solid var(--on-roof); }
.site[data-look="roofer"] .rf-close .contact-list li:first-child .contact-value { font-size: clamp(2.75rem, 1rem + 5.2vw, 6rem); line-height: 0.9; }
.site[data-look="roofer"] .rf-close .contact-value { font-size: clamp(1.5rem, 1.1rem + 1.2vw, 2.3rem); }
.site[data-look="roofer"] .rf-close .contact-label { font-size: 1rem; }
.site[data-look="roofer"] .rf-close .contact-link:hover .contact-value { text-decoration-color: var(--clay); text-decoration-thickness: 4px; }
.site[data-look="roofer"] .rf-close .lead { color: var(--on-roof); }
.site[data-look="roofer"] .rf-close-photo { display: none; }
@media (min-width: 52rem) {
  .site[data-look="roofer"] .rf-close-photo { display: block; position: absolute; inset: 0 0 0 auto; width: 36%; }
  .site[data-look="roofer"] .rf-close-photo img { width: 100%; height: 100%; object-fit: cover; }
  .site[data-look="roofer"] .rf-close:has(.rf-close-photo) .s-contact .contact-inner { padding-right: 38%; }
  .site[data-look="roofer"] .rf-close:has(.contact-form_and_details) .rf-close-photo { display: none; }
  .site[data-look="roofer"] .rf-close:has(.contact-form_and_details) .s-contact .contact-inner { padding-right: 0; }
  .site[data-look="roofer"] .rf-close .contact-details_only .contact-details { grid-template-columns: minmax(0, 1fr); }
  .site[data-look="roofer"] .rf-close .contact-details_only .contact-list { grid-column: 1; grid-row: auto; margin-top: 1.5rem; }
}

/* --- Footer: bitumen under the boeiboord ---------------------------------------- */
.site[data-look="roofer"] .site-footer { --deep: var(--rf-bitumen); background: var(--rf-bitumen); }
.site[data-look="roofer"] .site-footer { position: relative; border-top: 4px solid var(--lead); box-shadow: inset 0 1px 0 rgb(244 246 248 / 0.25); }
.site[data-look="roofer"] .footer-brand .footer-name { font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4.75rem); line-height: 0.9; letter-spacing: 0.01em; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="roofer"] .footer-title { font-family: var(--font-heading); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; font-size: 1.15rem; color: var(--on-roof); }
.site[data-look="roofer"] .footer-col a { font-size: 1.02rem; }
.site[data-look="roofer"] .footer-col a:hover { text-decoration-color: var(--clay); text-decoration-thickness: 3px; }

/* --- Phones: the quick bar is the boeiboord ------------------------------------ */
@media (max-width: 51.99rem) {
  .site[data-look="roofer"] .quickbar { --on-deep: var(--on-roof); background: var(--roof); border-top: 4px solid var(--zinc); }
  .site[data-look="roofer"] .quick { font-family: var(--font-heading); text-transform: uppercase; font-size: 1.3rem; letter-spacing: 0.03em; font-weight: 800; }
}

/* --- Motion: the doorsneden draw themselves, the street rises ------------- */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="roofer"] .dw svg { animation: rf-draw ease-out forwards; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    .site[data-look="roofer"] ul.rf-street li { animation: rf-rise ease-out forwards; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes rf-draw { from { transform: translateY(0.9rem) scale(0.985); } to { transform: none; } }
@keyframes rf-rise { from { transform: translateY(1.25rem); } to { transform: none; } }

/* ---- looks/taxi.css ---- */
/* The taxi look: everything here is scoped to .site[data-look="taxi"]. Appended after base.css (bun run --filter @platform/sections css).
   A ride at night: the road through the windscreen, the departures board, the
   ritbon from the meter, the plate's light blue. Colours: night and asphalt
   for the road, receipt white for paper, the RDW plate blue (black on light
   blue) as the page's own colour, the customer's button colour (signal amber
   by default) for the roof sign and buttons only. */

.site[data-look="taxi"] {
  --t-night: #0b0f16;
  --t-asphalt: #1a1e26;
  --t-lane: #f5f5f1;
  --t-board: #0d1219;
  --t-tile: #222936;
  --t-band: #1a3e8c;
  --t-on-dark: #f5f5f1;
  --t-dark-muted: #b4bccb;
  --t-ink: #0b0f16;
  --t-header: 4.5rem;
  --fs-h2: clamp(2.25rem, 1.25rem + 3.2vw, 4.5rem);
  --fs-lead: clamp(1.15rem, 1.02rem + 0.45vw, 1.4rem);
  hyphens: manual;
}
@media (min-width: 52rem) { .site[data-look="taxi"] { --fs-base: 1.125rem; } }
/* Red Hat Display at 900 closes its word spaces when tracked tight: keep
   the tracking light and the spaces open. */
.site[data-look="taxi"] :is(h1, h2) { font-weight: 900; letter-spacing: -0.02em; word-spacing: 0.04em; line-height: 1.02; }
.site[data-look="taxi"] main > .s + .s { border-top: 0; }

/* --- Header: a night bar; the button is the roof sign. ------------------ */
.site[data-look="taxi"] .site-header {
  --bg: var(--t-night); --text: var(--t-on-dark); --muted: var(--t-dark-muted); --border: #232b39;
  background: var(--t-night); color: var(--t-on-dark); border-bottom: 1px solid #232b39;
}
.site[data-look="taxi"] .brand { font-weight: 900; font-size: 1.35rem; letter-spacing: -0.03em; }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .header-inner { flex-wrap: nowrap; }
  .site[data-look="taxi"] .brand { flex: 0 1 auto; min-width: 0; max-width: 24rem; line-height: 1.1; text-wrap: balance; }
  .site[data-look="taxi"] .site-header nav { margin-left: auto; }
  .site[data-look="taxi"] .site-header nav ul { flex-wrap: nowrap; column-gap: 1.3rem; }
  .site[data-look="taxi"] .site-header .btn { flex: none; }
}
.site[data-look="taxi"] .site-header .btn {
  border-radius: 1.1rem 1.1rem 3px 3px; padding: 0.55rem 1.15rem 0.5rem; border: 0;
  box-shadow: inset 0 -3px 0 rgb(0 0 0 / 0.22); font-weight: 800; letter-spacing: 0.01em;
}
.site[data-look="taxi"] .site-header .btn:hover { text-decoration: none; transform: translateY(-1px); }

/* --- Hero: the road through the windscreen, full screen. ------------------- */
.site[data-look="taxi"] .taxi-hero {
  --text: var(--t-on-dark); --muted: var(--t-dark-muted);
  position: relative; isolation: isolate; overflow: clip; padding: 0;
  display: grid; align-items: end;
  min-height: max(34rem, calc(calc(100 * var(--raam-vh)) - var(--t-header)));
  background: var(--t-night); color: var(--t-on-dark);
}
.site[data-look="taxi"] .taxi-hero-media { position: absolute; inset: 0; z-index: -1; }
.site[data-look="taxi"] .taxi-hero-media :is(.hero-img, .taxi-road) { width: 100%; height: 100%; max-height: none; aspect-ratio: auto; object-fit: cover; display: block; background: var(--t-night); }
.site[data-look="taxi"] .taxi-hero-media::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(8 11 18 / 0.9) 0%, rgb(8 11 18 / 0.66) 38%, rgb(8 11 18 / 0.18) 72%, rgb(8 11 18 / 0.35) 100%),
    linear-gradient(0deg, rgb(8 11 18 / 0.85) 0%, rgb(8 11 18 / 0) 50%);
}
.site[data-look="taxi"] .taxi-hero-inner { display: grid; gap: 2.5rem clamp(2rem, 5vw, 5rem); align-items: end; padding-block: clamp(3rem, calc(10 * var(--raam-vh)), 7rem) clamp(2rem, calc(6 * var(--raam-vh)), 4rem); }
.site[data-look="taxi"] .taxi-hero h1 {
  font-size: min(calc(clamp(2.9rem, 0.9rem + 5.6vw, 6.6rem) * var(--h1k, 1)), calc(calc(11 * var(--raam-vh)) * var(--h1k, 1))); line-height: 1; letter-spacing: -0.02em; word-spacing: 0.04em;
  max-width: 12.5ch; margin: 0 0 0.35em; color: #ffffff; overflow-wrap: break-word; hyphens: auto;
}
.site[data-look="taxi"] .taxi-hero[data-headline="l"] { --h1k: 0.82; }
.site[data-look="taxi"] .taxi-hero[data-headline="xl"] { --h1k: 0.68; }
.site[data-look="taxi"] .taxi-hero[data-headline="xl"] h1 { max-width: 15ch; }
.site[data-look="taxi"] .taxi-hero .lead { color: #d3d8e2; max-width: 34rem; font-size: clamp(1.15rem, 1rem + 0.55vw, 1.5rem); line-height: 1.4; }
.site[data-look="taxi"] .taxi-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.8rem 1.6rem; margin-top: clamp(1.5rem, calc(4 * var(--raam-vh)), 2.5rem); }
.site[data-look="taxi"] .taxi-hero-actions .taxi-plate { margin: 0; }
.site[data-look="taxi"] .taxi-hero-actions .btn { min-height: 56px; padding-inline: 1.6rem; font-size: 1.15rem; border-radius: 1.1rem 1.1rem 3px 3px; border: 0; }
.site[data-look="taxi"] .taxi-hero .cta-alt { color: #ffffff; font-size: 1.1rem; text-decoration-thickness: 2px; }
@media (min-width: 64rem) {
  .site[data-look="taxi"] .taxi-hero-inner { grid-template-columns: minmax(0, 1.5fr) minmax(19rem, 1fr); }
}

/* The plate: light blue with black characters and the black rim (RDW). */
.site[data-look="taxi"] .taxi-plate {
  border: 3px solid #05070b; border-radius: 8px; transition: transform 0.15s ease, box-shadow 0.15s ease;
  box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 4px #05070b, 0 0 0 transparent;
}
.site[data-look="taxi"] .taxi-plate .plate-eu { min-width: 2.3rem; background: #0b2a7a; font-size: 0.8rem; padding-bottom: 0.5rem; }
.site[data-look="taxi"] .taxi-plate .plate-number { font-weight: 800; letter-spacing: 0.05em; padding: 0.3rem 1.1rem 0.25rem; }
.site[data-look="taxi"] .taxi-hero .taxi-plate .plate-number { font-size: clamp(1.85rem, 1.1rem + 2.6vw, 3.3rem); }
.site[data-look="taxi"] .taxi-plate:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 2px var(--plate), inset 0 0 0 4px #05070b, 0 6px 0 #05070b; }
.site[data-look="taxi"] .taxi-plate:hover .plate-number { text-decoration: none; }
.site[data-look="taxi"] .taxi-plate:focus-visible { outline: 3px solid #ffffff; outline-offset: 4px; }

/* The departures board: split-flap tiles, the destinations and fares. */
.site[data-look="taxi"] .taxi-board {
  background: #080b11; color: var(--t-on-dark);
  border: 1px solid #2a3242; border-radius: 6px; padding: 1rem clamp(0.9rem, 2vw, 1.4rem) 1.1rem;
  box-shadow: 0 40px 70px -40px #000000, inset 0 1px 0 #2b3445;
}
.site[data-look="taxi"] .board-title { margin: 0 0 0.7rem; font-weight: 900; font-size: 1.05rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--plate); }
.site[data-look="taxi"] .board-head { display: flex; justify-content: space-between; margin: 0; padding-bottom: 0.45rem; border-bottom: 1px solid #2a3242; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--t-dark-muted); }
.site[data-look="taxi"] .board-rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 0.4rem 1rem; padding-block: 0.55rem; border-bottom: 1px solid #1d2431; }
.site[data-look="taxi"] .board-rows li > .sr-only { position: absolute; }
.site[data-look="taxi"] .flaps { display: flex; flex-wrap: wrap; gap: 0.32em 0.5em; min-width: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.95rem, 0.8rem + 0.35vw, 1.12rem); line-height: 1; text-transform: uppercase; perspective: 30em; }
.site[data-look="taxi"] .flap-word { display: inline-flex; gap: 1px; }
.site[data-look="taxi"] .flap {
  display: inline-grid; place-items: center; width: 0.94em; height: 1.42em; border-radius: 2px;
  background: linear-gradient(#3b4557 0 49%, #06080c 49% 53%, #2f3848 53%); color: #ffffff; box-shadow: 0 1px 0 #000000;
}
.site[data-look="taxi"] .board-price { font-weight: 800; font-size: 1.1rem; color: var(--plate); font-variant-numeric: tabular-nums; white-space: nowrap; line-height: 1.42; }
.site[data-look="taxi"] .board-price .price-from { font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--t-dark-muted); }
.site[data-look="taxi"] .board-more { display: inline-flex; align-items: center; min-height: 44px; margin-top: 0.35rem; color: #ffffff; font-weight: 700; text-underline-offset: 0.25em; }
.site[data-look="taxi"] .board-more::after { content: '\2193'; margin-left: 0.45rem; }
@media (prefers-reduced-motion: no-preference) {
  .site[data-look="taxi"] .flap { animation: taxi-flap 0.5s cubic-bezier(0.3, 0.7, 0.4, 1) both; animation-delay: calc(0.25s + var(--i, 0) * 28ms + var(--r, 0) * 110ms); transform-origin: 50% 50%; }
  .site[data-look="taxi"] .board-rows li:nth-child(2) { --r: 1; }
  .site[data-look="taxi"] .board-rows li:nth-child(3) { --r: 2; }
  .site[data-look="taxi"] .board-rows li:nth-child(4) { --r: 3; }
  .site[data-look="taxi"] .board-rows li:nth-child(5) { --r: 4; }
}
@keyframes taxi-flap { 0% { transform: rotateX(90deg); color: transparent; } 60% { transform: rotateX(-12deg); } 100% { transform: rotateX(0); } }

/* Phones: the text at the foot of the photo (above the quick bar), the board under it. */
@media (max-width: 51.99rem) {
  /* The fold: the screen minus the header (taller with a menu row or a long
     name) and the quick bar, with room to spare. */
  .site[data-look="taxi"] { --t-header: 3.75rem; --t-fold: max(24rem, calc(calc(100 * var(--raam-vh)) - var(--t-header) - var(--t-name, 0rem) - 64px - 2.5rem)); }
  .site[data-look="taxi"]:has(.site-header nav) { --t-header: 6.5rem; }
  .site[data-look="taxi"]:has(.taxi-hero[data-long-name]) { --t-name: 1.6rem; }
  .site[data-look="taxi"] .taxi-hero { min-height: 0; display: block; }
  .site[data-look="taxi"] .taxi-hero-media { position: relative; inset: auto; z-index: auto; height: var(--t-fold); }
  .site[data-look="taxi"] .taxi-hero-media::after { background: linear-gradient(0deg, rgb(8 11 18 / 0.97) 0%, rgb(8 11 18 / 0.8) 45%, rgb(8 11 18 / 0.15) 80%); }
  .site[data-look="taxi"] .taxi-hero-inner { display: block; position: relative; margin-top: calc(-1 * var(--t-fold)); padding: 0 0 2.5rem; }
  .site[data-look="taxi"] .taxi-hero .hero-text { min-height: var(--t-fold); display: flex; flex-direction: column; justify-content: flex-end; padding-block: 5rem 1.75rem; }
  .site[data-look="taxi"] .taxi-hero h1 { max-width: 13ch; }
}

/* --- Services: the ritbon from the meter's printer, on the asphalt. -------- */
.site[data-look="taxi"] .s-services.taxi-services {
  --text: var(--t-on-dark); --muted: var(--t-dark-muted);
  background: var(--t-asphalt); color: var(--t-on-dark); padding-block: clamp(4rem, 9vw, 7.5rem); overflow-x: clip;
}
.site[data-look="taxi"] .taxi-services .sheet { display: grid; gap: 2.5rem clamp(2rem, 6vw, 6rem); }
.site[data-look="taxi"] .taxi-services .sheet-head :is(h1, h2) { font-size: var(--fs-h2); margin-bottom: 0.4em; }
.site[data-look="taxi"] .taxi-services .sheet-head .lead { color: #cdd3de; }
.site[data-look="taxi"] .taxi-services-call { margin: 2rem 0 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.3rem 1rem; font-size: 1.15rem; }
.site[data-look="taxi"] .taxi-services-call a:first-child { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); letter-spacing: -0.02em; text-decoration: none; border-bottom: 3px solid var(--plate); line-height: 1.15; }
.site[data-look="taxi"] .taxi-services-call a:first-child:hover { border-bottom-width: 5px; }
.site[data-look="taxi"] .taxi-services-call .taxi-services-app { font-weight: 700; text-underline-offset: 0.25em; }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .taxi-services .sheet { grid-template-columns: minmax(0, 1fr) minmax(0, 34rem); align-items: start; }
  .site[data-look="taxi"] .taxi-services .sheet-head { grid-column: 1; grid-row: 1; align-self: start; position: sticky; top: calc(var(--t-header) + 3rem); }
  .site[data-look="taxi"] .taxi-services .taxi-printer { grid-column: 2; grid-row: 1; }
}
.site[data-look="taxi"] .taxi-services-dash { display: none; }
@media (min-width: 52rem) {
  /* The motorway at night under the heading, beside the receipt. */
  .site[data-look="taxi"] .taxi-services-dash { display: block; margin: clamp(2.5rem, 5vw, 4rem) 0 0 calc((100vw - min(100vw - 2 * var(--gap), var(--wrap))) / -2); }
  .site[data-look="taxi"] .taxi-services-dash img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: 60% 70%; -webkit-mask-image: linear-gradient(#0000, #000 40%); mask-image: linear-gradient(#0000, #000 40%); }
}
/* The printer's slot the ritbon comes out of. */
.site[data-look="taxi"] .taxi-printer { position: relative; max-width: 34rem; }
.site[data-look="taxi"] .printer-slot {
  position: relative; z-index: 1; display: block; height: 1.6rem; margin: 0 -0.9rem -0.55rem; border-radius: 0.5rem;
  background: linear-gradient(#2c323d, #12161d); box-shadow: inset 0 -0.5rem 0 -0.2rem #030405, 0 10px 18px -8px #000000;
}
.site[data-look="taxi"] .taxi-services .ritbon {
  max-width: none; --zz: 8px; padding: 1.8rem clamp(1.1rem, 4vw, 1.9rem) 2.1rem;
  background: linear-gradient(90deg, #ecebe4 0%, var(--receipt) 7%, var(--receipt) 93%, #ecebe4 100%);
}
.site[data-look="taxi"] .taxi-services .ritbon-head { font-size: 0.95rem; padding-bottom: 1rem; }
.site[data-look="taxi"] .taxi-services .ritbon-name { font-size: 1.5rem; letter-spacing: 0.1em; line-height: 1.2; }
.site[data-look="taxi"] .taxi-services .ritbon .service { padding-block: 0.65rem; }
.site[data-look="taxi"] .taxi-services .ritbon .service :is(h2, h3) { font-size: 1.12rem; font-weight: 400; }
.site[data-look="taxi"] .taxi-services .ritbon .price-row .leader { font-size: 1.12rem; }
.site[data-look="taxi"] .taxi-services .ritbon .price { font-size: 1.12rem; font-weight: 400; }
.site[data-look="taxi"] .taxi-services .ritbon .service-note { font-size: 0.95rem; color: #3f3f3f; }
.site[data-look="taxi"] .taxi-services .ritbon-foot { font-size: 0.95rem; padding-top: 1rem; }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="taxi"] .taxi-printer .ritbon { animation: taxi-print linear forwards; animation-timeline: view(); animation-range: entry 0% entry 90%; }
  }
}
@keyframes taxi-print { from { clip-path: inset(0 0 70% 0); transform: translateY(-3rem); } to { clip-path: inset(0 0 0 0); transform: none; } }

@media (max-width: 40rem) {
  .site[data-look="taxi"] .taxi-services .ritbon .service :is(h2, h3), .site[data-look="taxi"] .taxi-services .ritbon .price-row .leader, .site[data-look="taxi"] .taxi-services .ritbon .price { font-size: 0.98rem; }
  .site[data-look="taxi"] .taxi-services .ritbon-name { font-size: 1.2rem; }
}

/* --- About: the back seat to the page's edge. ------------------------------ */
.site[data-look="taxi"] .taxi-about { overflow-x: clip; padding-block: 0; background: var(--bg); }
.site[data-look="taxi"] .taxi-about.no-photo .about-inner { grid-template-columns: minmax(0, 1fr); }
.site[data-look="taxi"] .taxi-about.no-photo .about-text { max-width: 44rem; }
.site[data-look="taxi"] .taxi-about .about-inner { align-items: stretch; gap: 0 clamp(2rem, 6vw, 6rem); }
.site[data-look="taxi"] .taxi-about .about-text { max-width: 36rem; padding-block: clamp(3.5rem, 8vw, 7rem); }
.site[data-look="taxi"] .taxi-about .about-text :is(h1, h2) { font-size: var(--fs-h2); margin-bottom: 0.5em; }
.site[data-look="taxi"] .taxi-about .about-text > p:first-of-type { font-size: clamp(1.25rem, 1.05rem + 0.7vw, 1.6rem); line-height: 1.4; font-weight: 500; letter-spacing: -0.01em; }
.site[data-look="taxi"] .taxi-about-meta {
  display: flex; flex-wrap: wrap; gap: 0.2rem 0; margin-top: 2rem; padding-top: 0.9rem; border-top: 1px dashed var(--text);
  font-family: var(--font-figures); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.04em;
}
.site[data-look="taxi"] .taxi-about-meta span:not(:last-child)::after { content: '\2014'; margin-inline: 0.7rem; }
.site[data-look="taxi"] .taxi-about .about-media { margin-inline: calc(-1 * var(--gap)); }
.site[data-look="taxi"] .taxi-about .about-img { width: 100%; height: 100%; min-height: 22rem; max-height: none; aspect-ratio: auto; object-fit: cover; }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .taxi-about .about-media { margin: 0 calc((100vw - min(100vw - 2 * var(--gap), var(--wrap))) / -2) 0 0; min-height: 38rem; }
  .site[data-look="taxi"] .taxi-about.about-image_left .about-media { margin: 0 0 0 calc((100vw - min(100vw - 2 * var(--gap), var(--wrap))) / -2); }
}

/* --- Reviews: set large over a rainy windscreen. ----------------------------- */
.site[data-look="taxi"] .taxi-reviews {
  --text: var(--t-on-dark); --muted: var(--t-dark-muted);
  isolation: isolate; overflow: clip; background: var(--t-night); color: var(--t-on-dark);
  padding-block: clamp(5rem, 11vw, 9rem);
}
.site[data-look="taxi"] .taxi-reviews-media { position: absolute; inset: 0; z-index: -1; }
.site[data-look="taxi"] .taxi-reviews-img { width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.site[data-look="taxi"] .taxi-reviews-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 11 18 / 0.9) 0%, rgb(8 11 18 / 0.62) 55%, rgb(8 11 18 / 0.2) 100%); }
.site[data-look="taxi"] .taxi-reviews :is(h1, h2) { font-size: clamp(1.5rem, 1.2rem + 1vw, 2.1rem); letter-spacing: -0.02em; font-weight: 800; color: var(--plate); margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.site[data-look="taxi"] .taxi-reviews .quote-list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2.5rem, 5vw, 4rem) clamp(2rem, 5vw, 5rem); margin: 0; }
.site[data-look="taxi"] .taxi-reviews .quote-list figure { border: 0; padding: 0; }
.site[data-look="taxi"] .taxi-reviews blockquote { margin: 0 0 1rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.85rem); line-height: 1.3; letter-spacing: -0.015em; }
.site[data-look="taxi"] .taxi-reviews blockquote p { text-indent: -0.42em; }
.site[data-look="taxi"] .taxi-reviews .quote-list li:first-child blockquote { font-size: clamp(1.9rem, 1rem + 3.2vw, 4rem); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; max-width: 22ch; }
.site[data-look="taxi"] .taxi-reviews figcaption { color: #ffffff; font-size: 0.95rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.site[data-look="taxi"] .taxi-reviews figcaption::before { content: ''; display: inline-block; width: 1.6rem; height: 0.55rem; margin-right: 0.7rem; vertical-align: 0.12em; background: var(--plate); border: 2px solid #05070b; border-radius: 2px; }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .taxi-reviews .quote-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site[data-look="taxi"] .taxi-reviews .quote-list li:first-child { grid-column: 1 / -1; }
  .site[data-look="taxi"] .taxi-reviews .quote-list li:not(:first-child) { max-width: 34rem; }
}

/* --- Werkgebied: the pickup towns as stops on one route line. --------------- */
.site[data-look="taxi"] .taxi-area { background: var(--bg); padding-block: clamp(4rem, 9vw, 7rem); }
.site[data-look="taxi"] .taxi-area-inner { display: grid; gap: 2.5rem clamp(2rem, 6vw, 6rem); }
.site[data-look="taxi"] .taxi-area-head :is(h1, h2) { font-size: var(--fs-h2); }
.site[data-look="taxi"] .taxi-area .area-body { color: var(--muted); font-size: var(--fs-lead); line-height: 1.45; max-width: 30rem; }
.site[data-look="taxi"] .taxi-route { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.site[data-look="taxi"] .taxi-route li { position: relative; padding: 0 0 1.35rem 2.6rem; font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.4rem, 1.05rem + 1.3vw, 2.3rem); line-height: 1.05; letter-spacing: -0.025em; overflow-wrap: break-word; hyphens: auto; }
.site[data-look="taxi"] .taxi-route li::before { content: ''; position: absolute; left: calc(0.65rem - 4px); top: 0.5em; bottom: -0.5em; width: 8px; background: var(--t-band); }
.site[data-look="taxi"] .taxi-route li:last-child::before { display: none; }
.site[data-look="taxi"] .taxi-route li::after { content: ''; position: absolute; left: 0; top: 0.5em; translate: 0 -50%; width: 1.3rem; height: 1.3rem; border-radius: 50%; background: #ffffff; border: 5px solid var(--t-band); }
.site[data-look="taxi"] .taxi-route li:first-child::after { background: var(--t-band); }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .taxi-area-inner { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.3fr); align-items: start; }
  .site[data-look="taxi"] .taxi-route { flex-direction: row; flex-wrap: wrap; row-gap: 2.4rem; padding-top: 0.6rem; }
  .site[data-look="taxi"] .taxi-route li { padding: 2.2rem 2.75rem 0 0; font-size: clamp(1.5rem, 0.9rem + 1.2vw, 2.4rem); }
  .site[data-look="taxi"] .taxi-route li::before { display: block; left: 0; right: 0; top: calc(0.65rem - 4px); bottom: auto; width: auto; height: 8px; }
  .site[data-look="taxi"] .taxi-route li:last-child::before { right: auto; width: 0.6rem; }
  .site[data-look="taxi"] .taxi-route li::after { top: 0.65rem; }
}

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .site[data-look="taxi"] .taxi-route li::before { transform-origin: 0 0; animation: taxi-drive linear forwards; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes taxi-drive { from { transform: scale(0); } to { transform: none; } }

/* --- Hours: the dashboard display. ------------------------------------------ */
.site[data-look="taxi"] .s-hours { --text: var(--t-on-dark); --muted: var(--t-dark-muted); --border: #283041; background: #10141c; color: var(--t-on-dark); }
.site[data-look="taxi"] .s-hours :is(h1, h2) { font-size: var(--fs-h2); }
.site[data-look="taxi"] .s-hours .hours-call a { font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.3rem); letter-spacing: -0.02em; text-decoration: none; border-bottom: 3px solid var(--plate); }
.site[data-look="taxi"] .s-hours .hours-card {
  --bg: #05070b; max-width: 32rem; padding: 1.2rem clamp(1rem, 3vw, 1.8rem) 1.4rem; border-radius: 14px;
  background: #05070b; border: 1px solid #262e3c; box-shadow: inset 0 2px 0 #1b212c, 0 30px 60px -35px #000000;
}
.site[data-look="taxi"] .s-hours .hours-table { font-size: 1.05rem; }
.site[data-look="taxi"] .s-hours .hours-table td { font-family: var(--font-figures); color: #9fd0f2; font-size: 1.15rem; }
.site[data-look="taxi"] .s-hours .hours-table .is-closed td { color: var(--t-dark-muted); }
.site[data-look="taxi"] .s-hours .hours-table th::after { background: var(--plate); color: #05070b; }

/* --- FAQ: questions before the ride, ruled like the receipt. ----------------- */
.site[data-look="taxi"] .s-faq { background: #ffffff; }
.site[data-look="taxi"] .s-faq > .wrap { display: grid; gap: 1.5rem clamp(2rem, 6vw, 6rem); }
.site[data-look="taxi"] .s-faq :is(h1, h2) { font-size: var(--fs-h2); }
.site[data-look="taxi"] .faq-items { margin-top: 0; max-width: 44rem; }
.site[data-look="taxi"] .faq-items details { border-bottom: 1px dashed var(--text); }
.site[data-look="taxi"] .faq-items details:first-child { border-top: 2px solid var(--text); }
.site[data-look="taxi"] .faq-items summary { min-height: 4.6rem; font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); font-weight: 800; letter-spacing: -0.01em; }
.site[data-look="taxi"] .faq-items summary::after { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--text); border-radius: 50%; font-size: 1.3rem; transition: transform 0.2s ease, background 0.2s ease; }
.site[data-look="taxi"] .faq-items summary:hover::after { background: var(--plate); }
.site[data-look="taxi"] .faq-items details p { font-size: 1.08rem; color: var(--text); }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .s-faq > .wrap { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.3fr); align-items: start; }
  .site[data-look="taxi"] .s-faq > .wrap > :is(h1, h2) { position: sticky; top: calc(var(--t-header) + 2rem); }
}

/* --- Booking: the departures board, a ride per row, the time to pick. -------- */
.site[data-look="taxi"] .s-booking {
  padding-block: clamp(4rem, 9vw, 7rem);
  /* The terminal wall the board hangs on: large panels with fine joints. */
  background-color: #ecece6;
  background-image: linear-gradient(#d9d9d1 1px, transparent 1px), linear-gradient(90deg, #d9d9d1 1px, transparent 1px);
  background-size: 100% 9rem, 14rem 100%;
}
.site[data-look="taxi"] .s-booking .booking-inner { display: grid; gap: 2rem clamp(2rem, 6vw, 6rem); }
.site[data-look="taxi"] .s-booking .booking-inner > * { max-width: none; }
.site[data-look="taxi"] .s-booking :is(h1, h2) { font-size: var(--fs-h2); margin: 0; }
.site[data-look="taxi"] .s-booking .lead { margin: 0; }
.site[data-look="taxi"] .booking-services {
  --text: var(--t-on-dark); --muted: var(--t-dark-muted);
  margin: 0; border: 1px solid #2a3242; border-radius: 6px; padding: 0.4rem clamp(0.9rem, 2.5vw, 1.5rem);
  background: #080b11; color: var(--t-on-dark); box-shadow: 0 40px 70px -45px #000000;
}
.site[data-look="taxi"] .booking-services li { border-bottom: 1px solid #1d2431; }
.site[data-look="taxi"] .booking-services li:last-child { border-bottom: 0; }
.site[data-look="taxi"] .booking-services a { color: var(--t-on-dark); padding-block: 0.95rem; }
.site[data-look="taxi"] .booking-name { font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; font-size: 1.02rem; line-height: 1.25; overflow-wrap: break-word; min-width: 0; }
.site[data-look="taxi"] .booking-meta { color: #9fd0f2; font-size: 1rem; }
.site[data-look="taxi"] .booking-go {
  color: #05070b; background: var(--plate); text-decoration: none; padding: 0.35rem 0.7rem; border-radius: 3px;
  box-shadow: inset 0 0 0 2px #05070b; font-size: 0.95rem; transition: transform 0.15s ease;
}
.site[data-look="taxi"] .booking-services a:hover .booking-go { transform: translateY(-2px); }
.site[data-look="taxi"] .booking-services a:hover .booking-name { text-decoration: none; color: var(--plate); }
@media (min-width: 52rem) {
  .site[data-look="taxi"] .s-booking .booking-inner { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); align-items: start; }
  .site[data-look="taxi"] .s-booking .booking-inner > :not(ul) { grid-column: 1; }
  .site[data-look="taxi"] .s-booking .booking-services { grid-column: 2; grid-row: 1 / span 3; }
}
@media (max-width: 30rem) { .site[data-look="taxi"] .booking-go { font-size: 0; padding: 0.35rem 0.6rem; } .site[data-look="taxi"] .booking-go::after { content: '\2192'; font-size: 1.1rem; } }

/* --- Request form: the ride slip, pickup and destination on a route. ---------- */
.site[data-look="taxi"] .s-request { --text: var(--t-on-dark); --muted: var(--t-dark-muted); background: var(--t-asphalt); color: var(--t-on-dark); padding-block: clamp(4rem, 9vw, 7rem); }
.site[data-look="taxi"] .s-request .request-inner > :is(h1, h2) { font-size: var(--fs-h2); }
.site[data-look="taxi"] .s-request .lead { color: #cdd3de; }
.site[data-look="taxi"] .request-form {
  --text: var(--on-receipt); --muted: var(--receipt-muted); --bg: #ffffff; --border: #bdbcb4; --zz: 8px;
  border: 0; padding: 2rem clamp(1.1rem, 4vw, 2.2rem) 2.4rem; background: var(--receipt); color: var(--on-receipt);
  -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;
}
.site[data-look="taxi"] .request-form :is(label, legend) { font-family: var(--font-figures); font-weight: 400; text-transform: uppercase; letter-spacing: 0.04em; font-size: 0.95rem; }
.site[data-look="taxi"] .request-form .field-check label { text-transform: none; font-family: var(--font-body); letter-spacing: 0; font-size: 1rem; }
.site[data-look="taxi"] .request-form .request-step > legend { font-family: var(--font-heading); font-weight: 900; text-transform: none; letter-spacing: -0.02em; font-size: 1.5rem; }
.site[data-look="taxi"] .request-step + .request-step { border-top: 1px dashed var(--on-receipt); }
.site[data-look="taxi"] .request-form :is(input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), textarea, select) { border: 1.5px solid #3a3a3a; border-radius: 3px; background: #ffffff; }
.site[data-look="taxi"] .request-form .form-note { color: var(--receipt-muted); }
.site[data-look="taxi"] .request-form .btn { border: 0; border-radius: 1.1rem 1.1rem 3px 3px; font-weight: 800; }
/* Pickup (a ring) and destination (a block) on the default ride form. */
.site[data-look="taxi"] .request-form :is(.field-group:has(input[name$="ophaaladres.street"]) > legend, .field:has(> input[name="f.bestemming"]) > label)::before {
  content: ''; display: inline-block; width: 0.85rem; height: 0.85rem; margin-right: 0.55rem; vertical-align: -0.08em; border: 3px solid var(--t-band); border-radius: 50%;
}
.site[data-look="taxi"] .request-form .field:has(> input[name="f.bestemming"]) > label::before { background: var(--t-band); border-radius: 2px; }
@media (min-width: 52rem) { .site[data-look="taxi"] .s-request .request-inner > :not(form) { position: sticky; top: calc(var(--t-header) + 2rem); } }

/* --- Gallery: the view through the side window, a strip of frames. ----------- */
.site[data-look="taxi"] .s-gallery { background: #ffffff; overflow-x: clip; }
.site[data-look="taxi"] .s-gallery :is(h1, h2) { font-size: var(--fs-h2); }
.site[data-look="taxi"] .s-gallery .gallery-items {
  display: flex; gap: 6px; overflow-x: auto; scroll-snap-type: x mandatory; columns: auto; margin-inline: calc(-1 * var(--gap)); padding: 0 var(--gap) 0.75rem;
  scrollbar-color: #9aa1ad transparent;
}
.site[data-look="taxi"] .s-gallery .gallery-items li { flex: 0 0 min(82vw, 30rem); scroll-snap-align: start; margin: 0; background: var(--t-night); grid-column: auto; grid-row: auto; }
.site[data-look="taxi"] .s-gallery .gallery-items img { width: 100%; height: clamp(18rem, 40vw, 30rem); aspect-ratio: auto; object-fit: cover; }
@media (min-width: 52rem) { .site[data-look="taxi"] .s-gallery .gallery-items li:first-child:nth-last-child(-n + 3), .site[data-look="taxi"] .s-gallery .gallery-items li:first-child:nth-last-child(-n + 3) ~ li { flex: 1 1 0; } }

/* --- Call to action: the roof sign over the night road. ----------------------- */
.site[data-look="taxi"] .taxi-cta { --text: var(--t-on-dark); --muted: var(--t-dark-muted); isolation: isolate; overflow: clip; background: var(--t-night); color: var(--t-on-dark); padding-block: clamp(5rem, 11vw, 9rem); }
.site[data-look="taxi"] .taxi-cta-media { position: absolute; inset: 0; z-index: -1; opacity: 0.55; }
.site[data-look="taxi"] .taxi-cta-media .taxi-road { width: 100%; height: 100%; }
.site[data-look="taxi"] .taxi-cta .cta-inner { display: grid; justify-items: start; gap: 1.5rem; }
.site[data-look="taxi"] .taxi-cta :is(h1, h2) { font-size: var(--fs-h2); max-width: 16ch; }
.site[data-look="taxi"] .taxi-cta p { color: #d3d8e2; }
.site[data-look="taxi"] .taxi-cta .taxi-plate .plate-number { font-size: clamp(1.7rem, 1.1rem + 2vw, 2.8rem); }
.site[data-look="taxi"] .taxi-cta .btn { min-height: 56px; font-size: 1.15rem; border: 0; border-radius: 1.1rem 1.1rem 3px 3px; }
/* The roof sign: a lit box, rounded on top, the word on it. */
.site[data-look="taxi"] .taxi-roof {
  margin: 0; padding: 0.35rem 1.4rem 0.3rem; border-radius: 1.4rem 1.4rem 4px 4px;
  background: var(--primary); color: var(--on-primary); font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.4rem, 1rem + 1.2vw, 2rem); letter-spacing: 0.22em; text-transform: uppercase;
  box-shadow: inset 0 -4px 0 rgb(0 0 0 / 0.25), 0 6px 0 -2px #05070b;
}

/* --- Contact: the plate's own blue, the number at plate size. ---------------- */
.site[data-look="taxi"] .s-contact {
  --text: #05070b; --muted: #1b2638; --border: rgb(5 7 11 / 0.3); --bg: var(--plate);
  background: var(--plate); color: #05070b; padding-block: clamp(4.5rem, 10vw, 8rem);
  box-shadow: inset 0 0 0 clamp(8px, 1.2vw, 14px) var(--plate), inset 0 0 0 calc(clamp(8px, 1.2vw, 14px) + 3px) #05070b;
}
.site[data-look="taxi"] .s-contact :is(h1, h2) { font-size: clamp(2.6rem, 1.2rem + 4.6vw, 6rem); line-height: 0.92; }
.site[data-look="taxi"] .s-contact .lead { color: #05070b; }
.site[data-look="taxi"] .contact-list { border-top: 3px solid #05070b; }
.site[data-look="taxi"] .contact-list li { border-bottom: 1px solid rgb(5 7 11 / 0.3); }
.site[data-look="taxi"] .contact-label { color: #05070b; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.85rem; }
.site[data-look="taxi"] .contact-value { font-weight: 900; letter-spacing: -0.03em; }
.site[data-look="taxi"] .contact-list li:first-child .contact-value { font-size: clamp(2.3rem, 1rem + 4.6vw, 5.4rem); letter-spacing: -0.02em; line-height: 1; }
.site[data-look="taxi"] .contact-list li:nth-child(2) .contact-value { font-size: clamp(1.4rem, 1rem + 1.6vw, 2.4rem); }
.site[data-look="taxi"] .contact-also { font-weight: 700; font-size: 1.05rem; }
.site[data-look="taxi"] .s-contact .contact-form { border-top: 3px solid #05070b; }
.site[data-look="taxi"] .s-contact .contact-form :is(input, textarea) { background: #ffffff; border: 2px solid #05070b; border-radius: 3px; }
.site[data-look="taxi"] .s-contact .contact-form .btn { border-radius: 1.1rem 1.1rem 3px 3px; border: 2px solid #05070b; font-weight: 800; }

/* --- Footer: the night after the ride. --------------------------------------- */
.site[data-look="taxi"] .site-footer {
  --deep: var(--t-night); background-color: var(--t-night); padding-top: clamp(4rem, 8vw, 6rem);
  /* The road goes on: a dashed lane line along the top. */
  background-image: repeating-linear-gradient(90deg, rgb(245 245 241 / 0.75) 0 3.5rem, transparent 3.5rem 6rem);
  background-size: 100% 5px; background-repeat: no-repeat; background-position: 0 clamp(1.5rem, 3vw, 2rem);
}
.site[data-look="taxi"] .footer-brand .footer-name { font-weight: 900; font-size: clamp(1.7rem, 1.2rem + 1.4vw, 2.6rem); letter-spacing: -0.04em; line-height: 0.98; max-width: 16ch; text-wrap: balance; }
.site[data-look="taxi"] .footer-title { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.8rem; color: var(--plate); }

/* --- Quick bar on phones: the plate to call, then the message. --------------- */
@media (max-width: 51.99rem) {
  .site[data-look="taxi"] .quickbar { --on-deep: var(--t-on-dark); background: var(--t-night); gap: 6px; padding: 6px 6px calc(6px + env(safe-area-inset-bottom, 0px)); border-top: 1px solid #232b39; }
  .site[data-look="taxi"] .quick { border-radius: 6px; font-size: 1.05rem; font-weight: 800; }
  .site[data-look="taxi"] .quick + .quick { border-left: 0; }
  .site[data-look="taxi"] .quick[href^="tel:"] { background: var(--plate); color: #05070b; box-shadow: inset 0 0 0 2px #05070b; }
  .site[data-look="taxi"] .quick:not([href^="tel:"]):not(.quick-primary) { box-shadow: inset 0 0 0 1.5px #4a5466; }
}