/* Hallmark · theme: custom · idea: "een klus in huis, vertel wat er moet gebeuren en vraag je offerte aan" · vibe: "vertrouwd, duidelijk, vakwerk, groen" · genre: modern-minimal · job: hire
 * paper: #f4f8f6 · accent: #2edb84 · field: #0f2f29 · faces: Barlow Semi Condensed, Barlow · hero: dark green panel with a round right end, the photograph as a disc in that end, two buttons under the text, four figures beneath · nav: a floating white bar with round corners, wordmark, home, diensten with a dropdown, werkwijze, over ons, contact, one filled offerte button · footer: deep green, wordmark with a line, three index columns, thin rings bottom right, a lighter legal strip; above it a dark panel with the contact facts and a short form on a white card · imagery: stand-in photographs, Canva AI 6, natural; a drawn van above the work area · signature: the tradesman photograph as a disc in the round end of the dark panel
 * axes: light-led/grotesk-condensed/green-green-mint · posture: committed, dark green head, figure bar and footer, white nav, light sections with white cards; fresh green is for action, mid green is the second half of each section head and the marks; the page order follows a reference site Daniel supplied on 2026-11-12 · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S3 R4 V4 · weakest: S, the photographs and the van are stand-ins and the four figures have no source on the page; real pictures, reviews and a phone number are with the client */
/* Hallmark · answered F4 · three button recipes, each with one place: fresh green for the action, white with a shadow in the phone bar, dark green only on the green tile */
/* Hallmark · answered F8 · two scroll patterns on the homepage · the van that drives past was asked for by Daniel on 2026-11-13 after a reference; the blocks that rise are the quiet baseline on every page */
/* Hallmark · answered F15 · four column gaps · each belongs to one composition: 96 between a text column and a card, 40 in the numbered list, 32 in card grids, 24 in the slide row */
/* Hallmark · waive 80 · a drawn van stands where a photograph belongs · Daniel asked on 2026-11-13 for the van from a reference site; the drawing is a stand-in until the client supplies a cut-out photograph of his own van */
/* Hallmark · waive 49b · five job columns at 1024 wrap Dutch compound names · long job names like Groepenkast uitbreidingen stay readable on two lines in this index */
/* Hallmark · waive 38iii · the second half of each section head is mid green, on every page · Daniel asked on 2026-11-12 to follow a reference site whose heads are set in two colours; the hero head stays one colour */
/* Hallmark · waive 59 · on contact and offerte the dark head meets the footer · those pages are one dark screen with the form in the head; a thin rule separates head and footer */

:root {
  color-scheme: light;
  --space-3xs: 2px; --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px; --space-lg: 24px; --space-xl: 40px; --space-2xl: 64px; --space-3xl: 96px; --space-4xl: 144px;
  --text-xs: 0.8125rem; --text-sm: 0.875rem; --text-md: 1.0625rem; --text-lg: 1.25rem; --text-xl: 1.5625rem; --text-2xl: 1.953rem; --text-3xl: 2.441rem;
  --text-display-s: clamp(2.25rem, 4vw + 0.5rem, 3.75rem); --text-display: clamp(2.75rem, 5vw + 1rem, 5.25rem); --text-hero: clamp(3rem, 5vw + 0.5rem, 5rem);
  --text-section: clamp(2.25rem, 2.6vw + 1.25rem, 3.75rem); --text-title: clamp(1.5rem, 0.6vw + 1.2rem, 1.875rem); --text-lead: clamp(1.125rem, 0.35vw + 1rem, 1.375rem);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --ease-in: cubic-bezier(0.7, 0, 0.84, 0); --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-micro: 120ms; --dur-short: 220ms; --dur-long: 420ms;
  --color-error: oklch(52% 0.19 27); --color-success: oklch(50% 0.12 150);
  --container: 1440px; --gutter: 64px; --gap-columns: 32px; --section-gap-s: 120px; --section-gap: 144px; --section-gap-l: 176px;
  --z-base: 1; --z-raised: 10; --z-dropdown: 100; --z-sticky: 200; --z-sticky-nav: 300; --z-modal: 400; --z-toast: 500; --z-tooltip: 600;
  /* Kleurthema 4, gekozen door Daniel op 13 november 2026: donkergroen met fris groen, in de lijn van het voorbeeld Temper.
     De namen navy, blauw en oranje bleven staan uit de eerste opzet: navy is nu het donkergroen, blauw het middengroen, oranje het frisse actiegroen. */
  --color-navy: #0f2f29; --color-blue: #1c9865; --color-orange: #2edb84; --color-light: #f4f8f6;
  --color-navy-deep: #0a211c; --color-navy-lift: #1e5247; --color-navy-panel: #143c34; --color-blue-deep: #1b5f50;
  /* Op donkere vlakken staat het gekleurde deel van een kop in het frisse groen. */
  --color-blue-on-dark: #2edb84;
  --color-white: #ffffff; --color-brand: var(--color-navy); --color-signal: var(--color-orange);
  --color-paper: var(--color-light); --color-paper-2: #e3eee9; --color-paper-3: #cfe2d9;
  --color-plate: var(--color-white);
  --color-ink: var(--color-navy); --color-ink-2: #20483f; --color-muted: #4a6058;
  --color-rule: #c3d7cd;
  --color-brand-strong: var(--color-navy);
  --color-on-dark: var(--color-light); --color-on-dark-2: #c5d9d1; --color-rule-dark: rgb(244 248 246 / 0.18);
  --color-accent: var(--color-signal); --color-accent-hover: #55e39c; --color-accent-soft: #d9f7e7; --color-accent-ink: var(--color-navy); --color-focus: var(--color-navy);
  --color-mark: var(--color-blue);
  --color-navy-veil: rgb(15 47 41 / 0.58); --color-navy-veil-strong: rgb(15 47 41 / 0.76);
  --font-display: "Barlow Semi Condensed", "Barlow Fallback", ui-sans-serif, sans-serif; --font-body: "Barlow", "Barlow Fallback", ui-sans-serif, sans-serif;
  --radius-card: 12px; --radius-pill: 8px; --radius-btn: 8px; --radius-bar: 20px; --radius-photo: 56px; --radius-end: clamp(56px, 12vw, 200px); --rule-hair: 1px; --rule-bar: 2px;
  --shadow-card: 0 1px 2px rgb(15 47 41 / 0.08), 0 8px 24px rgb(15 47 41 / 0.08); --shadow-lift: 0 2px 4px rgb(15 47 41 / 0.08), 0 20px 40px rgb(15 47 41 / 0.18); --shadow-btn: 0 10px 22px rgb(46 219 132 / 0.3); --shadow-card-hover: 0 0 0 2px var(--color-accent); --shadow-plain: 0 0 0 1px var(--color-rule), 0 2px 10px rgb(15 47 41 / 0.18); --shadow-menu: 0 12px 32px rgb(15 47 41 / 0.28);
  --tracking-display: -0.012em; --display-weight: 700;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { overflow-x: clip; }
html { background: var(--color-navy); scrollbar-color: var(--color-muted) var(--color-paper); scroll-padding-top: var(--space-3xl); }
body { margin: 0; background: var(--color-paper); color: var(--color-ink); font-family: var(--font-body); font-size: var(--text-md); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; caret-color: var(--color-accent); }
::selection { background: color-mix(in oklab, var(--color-accent) 25%, transparent); }
:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.16em; }
h1, h2, h3 { margin: 0; font-family: var(--font-display); font-weight: var(--display-weight, 700); font-synthesis: none; letter-spacing: var(--tracking-display); line-height: 1.1; overflow-wrap: break-word; min-width: 0; text-wrap: balance; }
h1 { max-width: 20ch; font-size: var(--text-display); } h2 { max-width: 30ch; font-size: var(--text-section); } h3 { max-width: 40ch; font-size: var(--text-title); line-height: 1.2; }
.lead { font-size: var(--text-lead); line-height: 1.45; max-width: 52ch; }
p { margin: 0; text-wrap: pretty; }
p:not([class]) { max-width: 60ch; }
img, video { max-width: 100%; height: auto; display: block; }
svg { display: block; }
[hidden] { display: none !important; }
button, input, select, textarea { font: inherit; }
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
[data-slot] { position: relative; overflow: hidden; background: linear-gradient(160deg, var(--color-paper-2, var(--color-paper)), var(--color-paper-3, var(--color-paper))); }
[data-slot] > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; }
[data-slot]:has(> img) > :not(img):not([data-keep]) { display: none !important; }
@media (max-width: 60rem) { :root { --gutter: 24px; --section-gap-s: 80px; --section-gap: 96px; --section-gap-l: 120px; } }
@media (max-width: 40rem) { :root { --gutter: 16px; --section-gap-s: 56px; --section-gap: 72px; --section-gap-l: 96px; --gap-columns: 16px; } }
@media (prefers-reduced-motion: reduce) { *:not(.keep-motion), *:not(.keep-motion)::before, *:not(.keep-motion)::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }
/* photographs: natural con=4 */
[data-slot] > img { filter: contrast(1.04); }


html { scroll-padding-top: var(--space-3xl); }
a { color: var(--color-brand-strong); text-decoration-color: var(--color-rule); }
a:hover { text-decoration-color: var(--color-accent); }
ul, ol { margin: 0; padding: 0; list-style: none; }
/* Koppen in hoofdletters, met het tweede deel in blauw. */
h1, h2 { text-transform: uppercase; letter-spacing: 0; }
/* Op donkere vlakken krijgt het gekleurde deel van de kop een lichtere tint, zodat het goed leesbaar blijft. */
h2 span { color: var(--head-tint, var(--color-blue)); }
.skip { position: absolute; left: var(--space-md); top: calc(-1 * var(--space-3xl)); z-index: var(--z-toast); padding: var(--space-xs) var(--space-md); background: var(--color-ink); color: var(--color-paper); }
.skip:focus-visible { top: var(--space-md); }

/* Controls */
.btn { display: inline-flex; font-weight: 600; align-items: center; justify-content: center; gap: var(--space-xs); min-height: 52px; padding: 0 calc(var(--space-lg) + var(--space-2xs)); border: 0; border-radius: var(--radius-btn); background: var(--color-accent); color: var(--color-accent-ink); font: 600 var(--text-sm)/1.1 var(--font-body); text-transform: uppercase; white-space: nowrap; text-decoration: none; text-box: trim-both cap alphabetic; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), transform var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
.btn:hover { background: var(--color-accent-hover); box-shadow: var(--shadow-btn); }
.btn:active { transform: translateY(1px); box-shadow: none; }
.btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; box-shadow: none; }
.btn[aria-busy="true"] { cursor: progress; }
.btn--quiet { background: transparent; color: var(--color-ink); box-shadow: inset 0 0 0 var(--rule-bar) var(--color-ink); }
.btn--quiet:hover { background: var(--color-ink); color: var(--color-paper); box-shadow: inset 0 0 0 var(--rule-bar) var(--color-ink); }
.btn--wide { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.fill { padding: 0 0.25em; border: 1px dashed var(--color-muted); border-radius: 0; color: var(--color-muted); -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.foot .fill { color: inherit; border-color: currentColor; }

/* Sections */
.sec { padding-block: var(--section-gap-s); }
/* Donkere vlakken: tekst en focus licht. Kaarten erin blijven licht en zetten de focus terug. */
.dark { background: var(--color-navy); color: var(--color-on-dark); }
.dark { --head-tint: var(--color-blue-on-dark); }
.dark .lead { color: var(--color-on-dark-2); }
.dark, .start, .foot { --color-focus: var(--color-light); }
.card { --color-focus: var(--color-navy); }
.well { background: var(--color-paper-2); }
.head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap-columns); align-items: end; margin-bottom: var(--space-2xl); }
.head .lead { color: var(--color-ink-2); }
/* Gecentreerde sectiekop op de homepage: kop, daaronder één zin. */
.head--mid { display: block; text-align: center; }
.head--mid h2 { max-width: none; }
.head--mid .lead { max-width: 60ch; margin: var(--space-md) auto 0; }

/* Hero */
.card { background: var(--color-plate); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
a.card { display: block; color: var(--color-ink); text-decoration: none; transition: box-shadow var(--dur-micro) var(--ease-out); }
a.card:hover { box-shadow: var(--shadow-card-hover); }

/* Index of all jobs */
.index { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--gap-columns); }
.index__col { border-top: var(--rule-bar) solid var(--color-ink); padding-top: var(--space-xs); }
.index__col h3 { font-size: var(--text-lg); margin-bottom: var(--space-2xs); }
.index__col h3 a { display: inline-block; padding-block: var(--space-xs); color: var(--color-ink); text-decoration: none; }
.index__col h3 a:hover { color: var(--color-brand-strong); }
.index__col li a { display: flex; align-items: center; min-height: 40px; color: var(--color-ink); text-decoration: none; line-height: 1.25; }
.index__col li a:hover { text-decoration: underline; text-decoration-color: var(--color-accent); }

/* Link rows */
.rows__links { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-xl); }
.rows__links a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--color-rule); }
.rows__links a:hover { text-decoration-color: var(--color-accent); }
.start .rows__links { margin-top: var(--space-lg); }
.start .rows__links a { color: var(--color-on-dark); text-decoration-color: var(--color-on-dark-2); }

/* Werkwijze-pagina: de vier stappen onder elkaar, nummer links, uitleg rechts. */
.flow { counter-reset: s; border-top: var(--rule-bar) solid var(--color-ink); }
.flow li { counter-increment: s; display: grid; grid-template-columns: auto minmax(0, 4fr) minmax(0, 7fr); gap: var(--space-xl); align-items: center; padding-block: var(--space-2xl); border-bottom: 1px solid var(--color-rule); }
.flow li::before { content: counter(s); display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--color-blue); color: var(--color-navy); font: 700 var(--text-xl)/1 var(--font-display); }
.flow b { font: 700 var(--text-title)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.flow p { max-width: 60ch; color: var(--color-ink-2); font-size: var(--text-lead); line-height: 1.5; }

/* Afsluiter met formulier, naar een voorbeeld van Daniel (13 november 2026): een donker vlak binnen de paginabreedte,
   links de kop en de contactgegevens met dunne lijnen ertussen, rechts het formulier op een witte kaart. Linksonder dunne cirkellijnen. */
.ask__panel { --head-tint: var(--color-blue-on-dark); --color-focus: var(--color-light); position: relative; overflow: clip; display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); grid-template-areas: "head form" "more form"; column-gap: var(--space-3xl); padding: var(--space-3xl) var(--space-2xl); border-radius: var(--radius-photo); background: var(--color-navy); color: var(--color-on-dark); }
.ask__panel::before { content: ""; position: absolute; left: calc(var(--space-4xl) * -1.5); bottom: calc(var(--space-4xl) * -2); width: 640px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 calc(var(--space-lg) - 1px), var(--color-rule-dark) calc(var(--space-lg) - 1px) var(--space-lg)); mask-image: radial-gradient(circle, var(--color-navy) 30%, transparent 70%); pointer-events: none; }
/* Kop linksboven, de rest eronder, het formulier rechts over beide rijen. Samen staan kop en rest midden naast het formulier. */
.ask__head { grid-area: head; align-self: end; position: relative; }
.ask__more { grid-area: more; align-self: start; position: relative; }
.ask .form { grid-area: form; align-self: center; position: relative; }

/* Kort formulier onder de vakken op de homepage: op een breed scherm een rij, met de knop rechts naast de velden. */
.ask h2 { max-width: 16ch; }
.ask .lead { margin-top: var(--space-sm); color: var(--color-on-dark-2); }
.ask__facts { margin: var(--space-xl) 0 0; }
.ask__facts div { padding-block: var(--space-md); }
.ask__facts div + div { border-top: 1px solid var(--color-rule-dark); }
.ask__facts dt { font-size: var(--text-sm); color: var(--color-on-dark-2); }
.ask__facts dd { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.ask__facts a { color: inherit; text-decoration-color: var(--color-accent); }
.ask .fill { color: inherit; border-color: currentColor; }
.ask .form { color: var(--color-ink); box-shadow: var(--shadow-lift); }
.field label small { margin-left: var(--space-2xs); font-weight: 400; }

/* Detail pages */
/* Uitleg van de klus in een lichte kaart, zelfde vorm als de vragen verderop. */
.prose { display: flex; flex-direction: column; justify-content: center; min-height: 17rem; padding: var(--space-xl); font-size: var(--text-lead); line-height: 1.5; }
.split .prose p:first-child { margin-top: 0; }
/* Vragen als uitklaprijen in een lichte kaart op het donkerdere vlak. */
.faq { padding: var(--space-lg) var(--space-xl); }
.faq details + details { border-top: 1px solid var(--color-rule); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: var(--space-md); min-height: 96px; padding-block: var(--space-sm); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; line-height: 1.3; cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--color-paper-2); font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-brand-strong); }
.faq details[open] summary::after { content: "\2212"; }
.faq p { padding-bottom: var(--space-lg); color: var(--color-ink-2); }
/* Dichte antwoorden echt uit de opmaak, ook in browsers die ze alleen verbergen. */
.faq details:not([open]) > p { display: none; }
.sec--near { padding-top: var(--space-2xl); }
/* Lijst met groene vierkantjes, overal dezelfde maat als in het blok Over Royklust op de homepage (14 november 2026): gewone tekstgrootte, dunne lijnen. */
.ticks { border-top: 1px solid var(--color-rule); }
.ticks li { display: flex; align-items: flex-start; gap: var(--space-md); min-height: 52px; padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); font-size: var(--text-md); font-weight: 500; line-height: 1.45; }
.ticks li::before { content: ""; flex-shrink: 0; width: 8px; height: 8px; margin-top: 0.55em; background: var(--color-mark); }
/* Impressies: per vak drie foto's naast elkaar met een onderschrift dat naar de klus linkt. */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.gallery__item { display: grid; gap: var(--space-sm); color: var(--color-ink); font-weight: 600; text-decoration: none; }
.gallery__photo { aspect-ratio: 4 / 3; border-radius: var(--radius-card); overflow: hidden; box-shadow: var(--shadow-card); }
.gallery__item:hover span { color: var(--color-blue); }
/* Vacatures: een regel per vak met kop, korte uitleg en knop. */
.jobs { border-top: var(--rule-bar) solid var(--color-ink); }
.jobs li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-lg); align-items: center; padding-block: var(--space-lg); border-bottom: 1px solid var(--color-rule); }
.jobs h3 { max-width: none; }
.jobs p { max-width: 60ch; margin-top: var(--space-2xs); color: var(--color-ink-2); }
.actions--mid { justify-content: center; }
/* Fotoslider op de vacaturedetailpagina's: twee rijen die langzaam in tegengestelde richting schuiven. Elke rij staat er twee keer in, zodat de lus naadloos is. */
.reel { display: grid; gap: var(--space-lg); padding-bottom: var(--section-gap-s); overflow: hidden; }
.reel__row { display: flex; gap: var(--space-lg); width: max-content; padding-right: var(--space-lg); animation: reel 70s linear infinite; }
.reel__row--back { animation-direction: reverse; animation-duration: 80s; }
.reel:hover .reel__row { animation-play-state: paused; }
.reel__item { flex: 0 0 auto; width: clamp(220px, 24vw, 340px); aspect-ratio: 5 / 4; border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.reel__item img { width: 100%; height: 100%; object-fit: cover; }
@keyframes reel { to { transform: translateX(-50%); } }
/* Vacature-overzicht: twee tekstkolommen ("Zo werken we") en kaarten ("Wat we bieden"). */
.dna { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl) var(--space-3xl); max-width: 64rem; margin-inline: auto; }
.dna h3 { margin-bottom: var(--space-sm); }
.dna p { color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.55; }
.perks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.perks li { display: flex; gap: var(--space-md); align-items: flex-start; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-plate); box-shadow: var(--shadow-card), inset 0 -4px 0 var(--color-navy); }
.perks svg { flex-shrink: 0; width: 24px; height: 24px; color: var(--color-accent); }
.perks b { display: block; font: 700 var(--text-lg)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.perks span { display: block; margin-top: var(--space-2xs); color: var(--color-ink-2); font-size: var(--text-md); line-height: 1.5; }
@media (max-width: 60rem) { .dna { grid-template-columns: minmax(0, 1fr); } .perks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40rem) { .perks { grid-template-columns: minmax(0, 1fr); } }
/* Vacaturedetail: kenmerken onder de kop, intro over de volle breedte, daarna twee kolommen met lijsten. */
.vac__meta, .jobs__meta { display: flex; flex-wrap: wrap; gap: var(--space-2xs) var(--space-md); margin-bottom: var(--space-md); font-size: var(--text-sm); font-weight: 600; }
.jobs__meta { margin: var(--space-xs) 0 0; color: var(--color-ink-2); }
.vac__meta span::before, .jobs__meta span::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: var(--space-xs); background: var(--color-mark); vertical-align: middle; }
.vac { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2xl) var(--space-3xl); }
.vac__intro { grid-column: 1 / -1; }
.vac__intro .lead { max-width: 72ch; }
.vac__col--wide { grid-column: 1 / -1; }
.vac__col h2 { max-width: none; margin-bottom: var(--space-md); font-size: var(--text-xl); }
.jobs h3 a { color: inherit; text-decoration: none; }
.jobs h3 a:hover { color: var(--color-blue); }
@media (max-width: 60rem) { .vac { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); } }
/* Privacyverklaring: lopende tekst in een smalle kolom met kleinere tussenkoppen. */
.legal { max-width: 72ch; font-size: var(--text-md); line-height: 1.55; }
.legal__meta { color: var(--color-muted); font-size: var(--text-sm); }
.legal h2 { max-width: none; margin-top: var(--space-xl); margin-bottom: var(--space-sm); font-size: var(--text-xl); }
.legal p + p, .legal ul + p { margin-top: var(--space-sm); }
.legal ul { display: grid; gap: var(--space-2xs); margin-top: var(--space-sm); padding-left: 1.25em; list-style: disc; }
.legal a { color: var(--color-blue); }
@media (max-width: 60rem) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jobs li { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 40rem) { .gallery { grid-template-columns: minmax(0, 1fr); } }
.split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: start; }
.split p:not([class]) { color: var(--color-ink-2); margin-top: var(--space-lg); }
.others { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); }
.others a { position: relative; display: flex; flex-direction: column; justify-content: flex-end; gap: var(--space-2xs); min-height: 168px; padding: var(--space-lg); border-radius: var(--radius-card); background: var(--color-plate); box-shadow: var(--shadow-card), inset 0 -4px 0 var(--color-navy); color: var(--color-ink); text-decoration: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
/* Bij aanwijzen keert de kaart om: navy met lichte tekst en een oranje rand onderaan. */
.others a:hover { background: var(--color-navy); color: var(--color-on-dark); box-shadow: var(--shadow-card), inset 0 -4px 0 var(--color-accent); }
.others a:hover span { color: var(--color-on-dark-2); }
.others b { font: 700 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.others span { color: var(--color-muted); }
/* Vakpagina: de klussen in groepen. Boven elke groep een kop op volle sectiegrootte, daaronder de kaarten; een dunne lijn tussen de groepen. */
.picks__row { padding-block: var(--space-2xl); border-top: 1px solid var(--color-rule); }
.picks__row:first-child { padding-top: 0; border-top: 0; }
.picks__row:last-child { padding-bottom: 0; }
.picks__row h2 { max-width: 26ch; margin-bottom: var(--space-xl); }
.picks .others li:only-child { grid-column: 1 / -1; }
/* Twee klussen in een groep vullen samen de breedte, zodat er geen leeg derde vak overblijft. */
.picks .others:has(> li:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Keuzekaarten op een vakpagina: hoger, zodat elke klus een eigen vlak heeft. */
.others--pick a { min-height: 168px; }

/* Forms */
.form { padding: var(--space-xl); display: grid; gap: var(--space-md); }
.field { display: grid; gap: var(--space-2xs); min-width: 0; }
.field label { font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 52px; padding: var(--space-sm) var(--space-md); border: 1px solid var(--color-muted); border-radius: var(--radius-pill); background: var(--color-plate); color: var(--color-ink); font-size: var(--text-md); outline: 2px solid transparent; outline-offset: -3px; }
.field textarea { min-height: 96px; resize: vertical; line-height: 1.5; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline-color: var(--color-focus); }
.field [aria-invalid] { border-color: var(--color-error); }
.field small { color: var(--color-muted); }
.grid2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
.form__status { font-size: var(--text-sm); color: var(--color-ink-2); }
.form__status:empty { display: none; }
.form__status[data-state="error"] { color: var(--color-error); }
.form__note { font-size: var(--text-sm); color: var(--color-muted); }
.mini-steps { margin-top: var(--space-xl); counter-reset: s; border-top: var(--rule-bar) solid var(--color-ink); }
.mini-steps li { counter-increment: s; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); padding-block: var(--space-sm); border-bottom: 1px solid var(--color-rule); }
.mini-steps li::before { content: counter(s); font: 600 var(--text-lg)/1.3 var(--font-body); color: var(--color-brand-strong); }
.contact { display: grid; gap: var(--space-sm); margin-top: var(--space-xl); }
.contact dt { font-weight: 600; }
.contact dd { margin: 0 0 var(--space-sm); }
/* Dezelfde lijsten op het navy vlak van een kop. */
.start .mini-steps { border-top-color: var(--color-rule-dark); }
.start .mini-steps li { border-bottom-color: var(--color-rule-dark); }
.start .mini-steps li::before { color: var(--color-blue); }
.start .contact a { color: inherit; text-decoration-color: var(--color-on-dark-2); }
.start .fill { color: inherit; border-color: currentColor; }

@media (max-width: 60rem) {
  /* Smal scherm: tekst boven, formulier eronder; het vlak loopt door tot de schermrand. */
  /* Smal scherm: kop, dan het formulier, dan de stappen en contactgegevens. */
  .ask__panel { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "form" "more"; row-gap: var(--space-xl); margin-inline: calc(var(--gutter) * -1); padding: var(--space-2xl) var(--gutter); border-radius: 0; }
  .ask { padding-bottom: 0; }
  .mini-steps { display: none; }
  .split, .head { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); min-height: 0; }
  .head { gap: var(--space-md); margin-bottom: var(--space-xl); }
  .split { gap: var(--space-lg); }
  .others { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .picks__row { padding-block: var(--space-xl); }
  .picks__row h2 { margin-bottom: var(--space-lg); }
  .others a { min-height: 120px; padding: var(--space-md); }
  .others--pick a { min-height: 120px; }
  .index { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 40rem) {
  .index, .others { grid-template-columns: minmax(0, 1fr); gap: var(--space-2xs); }
  .others { gap: var(--space-md); }
  .form { padding: var(--space-lg); }
  .faq { padding-inline: var(--space-lg); }
  .prose { min-height: 0; padding: var(--space-lg); font-size: var(--text-md); }
  .grid2 { grid-template-columns: minmax(0, 1fr); }
  .flow li { grid-template-columns: auto minmax(0, 1fr); gap: var(--space-xs) var(--space-md); padding-block: var(--space-lg); }
  .flow li::before { width: 48px; height: 48px; }
  .flow p { grid-column: 2; font-size: var(--text-md); }
  h1, h2 { line-height: 1.25; }
}

/* Rustige beweging bij scrollen: blokken schuiven een klein stukje omhoog als ze in beeld komen. Alleen CSS, de inhoud is nooit verborgen. */
@keyframes rise { from { translate: 0 40px; } to { translate: 0 0; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .head, .vakken:not(.vakken--slide) > *, .vakken--slide, .about > *, .flow > li, .picks__row, .reno > *, .ask__panel > *, .area > *, .index__col, .others > li, .faq, .prose, .ticks { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}

@font-face { font-family: "Barlow Semi Condensed"; src: url("/fonts/barlow-semi-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Barlow"; src: url("/fonts/barlow-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Fallback"; src: local("Arial"); size-adjust: 94%; ascent-override: 106%; descent-override: 21%; }

/* Chrome */
/* Menu naar een voorbeeld van Daniel (13 november 2026): een witte balk met ronde hoeken die los boven de pagina zweeft.
   Logo links, de menu-items in het midden, een gevulde knop rechts. De strook rond de balk laat klikken door naar de pagina. */
.nav { position: sticky; top: 0; z-index: var(--z-sticky-nav); padding-block: var(--space-sm); color: var(--color-ink); pointer-events: none;; margin-bottom: calc(var(--nav-h) * -1); }
/* Elke pagina begint met de donkere kop; die loopt door achter de balk, zodat de balk op donker zweeft en er geen lichte strook ontstaat. */
:root { --nav-h: calc(76px + var(--space-sm) * 2); }
.start { padding-top: var(--nav-h); }
.nav__in { position: relative; display: flex; align-items: center; gap: var(--space-lg); min-height: 76px; padding-inline: var(--space-lg) var(--space-sm); border-radius: var(--radius-bar); background: var(--color-plate); box-shadow: 0 0 0 1px var(--color-rule), var(--shadow-lift); pointer-events: auto; }
.logo { display: inline-flex; align-items: center; min-height: 44px; gap: var(--space-xs); font: 700 var(--text-xl)/1 var(--font-display); color: var(--color-ink); text-decoration: none; }
/* Woordmerk: blauwe daklijn, ROY in oranje, KLUST in de tekstkleur van het vlak. */
.logo__mark { flex-shrink: 0; width: 44px; height: auto; color: var(--color-blue); }
/* Het frisse groen is te licht op het witte menu; ROY staat daarom in het middengroen. */
.logo b { color: color-mix(in srgb, var(--color-blue) 75%, var(--color-navy)); font-weight: inherit; }
.nav__links { display: flex; align-self: stretch; gap: var(--space-2xs); margin-inline: auto; }
.nav__links svg { margin-left: var(--space-2xs); }
/* Uitklapmenu onder Diensten: opent bij aanwijzen en bij toetsenbordfocus, werkt zonder script. */
.nav__drop { position: relative; display: flex; }
.nav__sub { --color-focus: var(--color-navy); position: absolute; top: calc(100% + var(--space-xs)); left: 0; z-index: var(--z-dropdown); display: grid; min-width: 15rem; padding: var(--space-xs); border-radius: var(--radius-card); background: var(--color-plate); box-shadow: var(--shadow-menu); visibility: hidden; opacity: 0; transition: opacity var(--dur-micro) var(--ease-out), visibility 0s linear var(--dur-micro); }
.nav__sub::before { content: ""; position: absolute; inset: calc(var(--space-sm) * -1) 0 auto; height: var(--space-sm); }
.nav__drop:hover .nav__sub, .nav__drop:focus-within .nav__sub { visibility: visible; opacity: 1; transition-delay: 0s; }
.nav__links a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-md); color: var(--color-ink); font-weight: 400; white-space: nowrap; text-decoration: none; }
/* Bij aanwijzen een donkere streep onder aan de balk; de pagina waar je bent staat vet met een groene streep. */
.nav__links > a:hover, .nav__drop > a:hover { box-shadow: inset 0 -3px 0 var(--color-ink); }
.nav__links > a[aria-current], .nav__drop > a[aria-current] { font-weight: 600; box-shadow: inset 0 -4px 0 var(--color-accent); }
.nav__sub a { border-radius: var(--radius-pill); }
.nav__sub a:hover { background: var(--color-navy); color: var(--color-on-dark); }
.nav__sub a[aria-current] { box-shadow: inset 4px 0 0 var(--color-accent); }
.nav__end { display: flex; gap: var(--space-xs); }
/* De knop in de balk is gevuld, met een pijl erachter. De knoppen in de belbalk op de telefoon blijven wit met een schaduw rondom. */
.nav .btn { min-height: 52px; padding-inline: var(--space-lg); text-transform: none; font-size: var(--text-md); }
.nav .btn svg { transition: translate var(--dur-short) var(--ease-out); }
.nav .btn:hover svg { translate: 3px 0; }
.callbar .btn { min-height: 44px; background: var(--color-plate); color: var(--color-ink); box-shadow: var(--shadow-plain); }
.callbar .btn:hover { background: var(--color-navy); color: var(--color-on-dark); box-shadow: var(--shadow-plain); }
.btn--line { background: transparent; color: var(--color-on-dark); box-shadow: inset 0 0 0 2px var(--color-on-dark); }
.btn--line:hover { background: var(--color-on-dark); color: var(--color-navy); box-shadow: inset 0 0 0 2px var(--color-on-dark); }
.btn--navy { background: var(--color-navy); color: var(--color-on-dark); --color-focus: var(--color-navy); }
.btn--navy:hover { background: var(--color-navy-lift); box-shadow: var(--shadow-lift); }
.menu { display: none; margin-left: auto; }
/* Menuknop op de telefoon: drie streepjes die een kruis worden. Openen: de buitenste streepjes schuiven naar het midden en draaien daarna.
   Sluiten gaat in omgekeerde volgorde: eerst terugdraaien, dan uit elkaar. Het woord Menu blijft staan voor schermlezers. */
.menu > summary { position: relative; display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--radius-pill); color: var(--color-ink); cursor: pointer; list-style: none; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.menu__icon { position: relative; width: var(--space-lg); height: calc(var(--space-md) + var(--rule-bar) * 1.5); }
.menu__icon i { position: absolute; left: 0; width: 100%; height: calc(var(--rule-bar) * 1.5); border-radius: var(--rule-bar); background: currentColor; transition: translate var(--dur-short) var(--ease-in-out) var(--dur-short), rotate var(--dur-short) var(--ease-in-out), opacity var(--dur-micro) linear var(--dur-short); }
.menu__icon i:nth-child(1) { top: 0; }
.menu__icon i:nth-child(2) { top: var(--space-xs); }
.menu__icon i:nth-child(3) { top: var(--space-md); }
.menu[open] .menu__icon i { transition: translate var(--dur-short) var(--ease-in-out), rotate var(--dur-short) var(--ease-in-out) var(--dur-short), opacity var(--dur-micro) linear var(--dur-short); }
.menu[open] .menu__icon i:nth-child(1) { translate: 0 var(--space-xs); rotate: 45deg; }
.menu[open] .menu__icon i:nth-child(2) { opacity: 0; }
.menu[open] .menu__icon i:nth-child(3) { translate: 0 calc(var(--space-xs) * -1); rotate: -45deg; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] > summary { background: var(--color-navy); color: var(--color-on-dark); }
.menu__panel { position: absolute; inset: calc(100% + var(--space-xs)) 0 auto; max-height: calc(100svh - 112px); overflow-y: auto; padding: var(--space-sm) var(--space-lg) var(--space-lg); border-radius: var(--radius-bar); background: var(--color-plate); color: var(--color-ink); box-shadow: 0 0 0 1px var(--color-rule), var(--shadow-menu); }
.menu__panel a { display: flex; align-items: center; min-height: 52px; white-space: nowrap; color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; text-decoration: none; border-bottom: 1px solid var(--color-rule); }
/* De pagina waar je bent: oranje streep links. */
.menu__panel a[aria-current] { padding-left: var(--space-sm); box-shadow: inset 4px 0 0 var(--color-accent); }
/* Diensten in het telefoonmenu: ingeklapt, opent bij aantikken. Het pijltje draait mee. */
.menu__group summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; border-bottom: 1px solid var(--color-rule); color: var(--color-ink); font-size: var(--text-lg); font-weight: 600; cursor: pointer; list-style: none; }
.menu__group summary[data-current] { padding-left: var(--space-sm); box-shadow: inset 4px 0 0 var(--color-accent); }
.menu__group summary svg { width: 20px; height: 20px; transition: rotate var(--dur-short) var(--ease-out); }
.menu__group[open] summary svg { rotate: 180deg; }
.menu__group summary:focus-visible { outline: 2px solid var(--color-focus); outline-offset: -2px; }
.menu__panel a.menu__sub { min-height: 44px; padding-left: var(--space-md); font-size: var(--text-md); font-weight: 400; }
.callbar { display: none; }

/* First screen */
/* Navy vlak met een ronde rechterkant, daarin de foto als cirkel. Onder de tekst twee knoppen. Eronder drie feiten.
   --start-h is de hoogte van het vlak; de cirkel is die hoogte min de rand eromheen. */
.start { --start-h: clamp(520px, 44vw, 700px); --disc: calc(var(--start-h) - var(--space-lg) * 2); --start-edge: max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)); overflow: clip; background: var(--color-navy-deep); color: var(--color-on-dark); }
.start__panel { position: relative; }
.start__panel::before { content: ""; position: absolute; inset: 0 calc(var(--start-edge) - var(--space-lg)) 0 0; border-radius: 0 9999px 9999px 0; background: var(--color-navy-panel); }
.start__in { position: relative; display: grid; align-content: center; min-height: var(--start-h); padding-block: var(--space-2xl); }
.start__text { position: relative; z-index: var(--z-raised); max-width: calc(100% - var(--start-h) + var(--space-xs)); }
/* Dunne ringen achter de foto: de ronde vorm loopt door in het vlak. Ze vervagen naar buiten. */
.start__in::before { content: ""; position: absolute; top: 50%; right: calc(var(--gutter) - var(--disc) * 0.45); width: calc(var(--disc) * 1.9); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 calc(var(--space-xl) - 1px), var(--color-rule-dark) calc(var(--space-xl) - 1px) var(--space-xl)); mask-image: radial-gradient(circle, var(--color-navy) 38%, transparent 70%); pointer-events: none; }
/* Oranje boog om de foto, linksonder. */
.start__in::after { content: ""; position: absolute; top: 50%; right: calc(var(--gutter) - var(--space-md)); width: calc(var(--disc) + var(--space-md) * 2); aspect-ratio: 1; translate: 0 -50%; border: calc(var(--space-2xs) * 1.5) solid var(--color-accent); border-radius: 50%; mask-image: conic-gradient(from 195deg, var(--color-navy) 0 80deg, transparent 80deg); pointer-events: none; }
.start--plain .start__in::before, .start--plain .start__in::after { display: none; }
/* Kop van de homepage: twee regels ("Klusbedrijf voor" / "elke klus in huis"), met een vaste afbreking in de html.
   De lettergrootte volgt de ruimte naast de foto, zodat de langste regel altijd past. */
.start h1 { max-width: none; font-size: clamp(2.375rem, min(5vw, (min(100vw, var(--container)) - var(--gutter) * 2 - var(--start-h) + var(--space-xs)) / 8.2), 5.5rem); line-height: 0.98; color: var(--color-blue-on-dark); text-wrap: balance; }
.start .lead { max-width: 30em; margin-top: var(--space-md); color: var(--color-on-dark); }
.start .lead b { display: block; margin-top: var(--space-2xs); color: var(--color-accent); font-weight: 600; }
/* De cirkel toont het midden van de foto. Met --left toont hij de linkerkant: voor een brede foto met het onderwerp links, zoals op de homepage. */
.start__photo { position: absolute; top: 50%; right: var(--gutter); width: var(--disc); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: var(--color-navy-lift); }
.start__photo--left > img { object-position: 0 50%; }
/* Subpagina's: dezelfde vorm, lager, met de knoppen onder de zin. */
.start--sub { --start-h: clamp(460px, 39vw, 600px); }
/* De kop van een subpagina is op elke breedte minstens zo groot als een sectiekop eronder. */
.start--sub h1 { max-width: none; font-size: clamp(2.875rem, 4.6vw, 4.5rem); }
.start--job h1 { max-width: 18ch; line-height: 1.05; }
.start .actions { margin-top: var(--space-xl); }
.start--plain .start__text { max-width: 44rem; }
/* Formulierpagina's: tekst links op het vlak, het formulier als witte kaart rechts. */
.start--form .start__in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.start--form .start__text { max-width: none; }
.start--form .form { position: relative; color: var(--color-ink); }
/* Drie feiten onder de hero: bovenste regel licht, onderste regel vet in oranje. */
/* De feiten staan als groep in het midden. De ruimte ertussen groeit mee met het scherm. */
.facts ul { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-lg) clamp(var(--space-xl), 9vw, 160px); padding-block: var(--space-xl); text-align: center; }
.facts li { display: grid; align-content: start; gap: var(--space-xs); max-width: 13rem; font-size: var(--text-md); line-height: 1.3; }
/* Het cijfer groot en groen, de uitleg eronder. */
.facts b { color: var(--color-accent); font: 700 var(--text-3xl)/1 var(--font-display); }
/* Naar het voorbeeld Temper: het donkere vlak van de kop loopt door in de linkerbovenhoek van de sectie eronder, die daar een grote ronde hoek krijgt. Alleen op de homepage, waar de feitenbalk onder de kop staat. */
.start:not(.start--sub) + .sec { position: relative; }
.start:not(.start--sub) + .sec::before { content: ""; position: absolute; top: 0; left: 0; width: var(--radius-end); aspect-ratio: 1; background: radial-gradient(circle at 100% 100%, transparent calc(var(--radius-end) - 1px), var(--color-navy-deep) var(--radius-end)); pointer-events: none; }

/* Trades */
/* Vakkaart: foto met de naam van het vak in een navy band onderaan. In een raster (dienstenpagina) of in een schuifrij. */
.vakken { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-lg); }
.vak { position: relative; display: grid; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-card); background: var(--color-navy); color: var(--color-on-dark); text-decoration: none; }
.vak__photo { position: absolute; inset: 0; }
.vak__text { position: relative; z-index: var(--z-raised); display: grid; align-self: end; align-content: center; justify-items: start; gap: var(--space-2xs); min-height: 7.5rem; padding: var(--space-lg); background: var(--color-navy-veil-strong); }
/* Ronde pijl rechtsboven in de kaart: wordt oranje bij aanwijzen. De foto zoomt dan langzaam in. */
.vak__go { position: absolute; top: var(--space-md); right: var(--space-md); z-index: var(--z-raised); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-navy-veil-strong); box-shadow: inset 0 0 0 var(--rule-bar) var(--color-on-dark); transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out), box-shadow var(--dur-short) var(--ease-out); }
/* Het pijltje is in css getekend, net als de andere pijltjes op de site. */
.vak__go::before { content: ""; width: 10px; height: 10px; margin-right: var(--space-2xs); border-top: var(--rule-bar) solid currentColor; border-right: var(--rule-bar) solid currentColor; transform: rotate(45deg); }
a.vak:hover .vak__go { background: var(--color-accent); color: var(--color-navy); box-shadow: inset 0 0 0 var(--rule-bar) var(--color-accent); }
.vak h3 { max-width: none; font-size: var(--text-title); text-transform: uppercase; letter-spacing: 0; }
.vak--ask { align-content: center; justify-items: start; gap: var(--space-sm); padding: var(--space-lg); background: var(--color-accent); color: var(--color-navy); }

/* Schuifrij: staande kaarten naast elkaar. Je schuift met vinger, trackpad of de pijlen eronder; de rij klikt per kaart vast.
   --slide-w is de breedte van een kaart; de laatste zichtbare kaart steekt half uit, zodat je ziet dat er meer is. */
.vakken.vakken--slide { --edge: max(var(--gutter), (100vw - var(--container)) / 2 + var(--gutter)); --slide-w: calc((100% - 3 * var(--space-lg)) / 3.4); display: flex; gap: var(--space-lg); margin: calc(var(--space-2xs) * -1) calc(var(--edge) * -1) calc(var(--space-2xs) * -1) calc(var(--space-2xs) * -1); padding: var(--space-2xs) var(--edge) var(--space-2xs) var(--space-2xs); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--space-2xs); scrollbar-width: thin; scrollbar-color: var(--color-rule) var(--color-paper); }
.vakken--slide.is-live { scrollbar-width: none; }
.vakken--slide.is-live::-webkit-scrollbar { display: none; }
.vakken--slide > .vak { flex: 0 0 var(--slide-w); aspect-ratio: 3 / 4; scroll-snap-align: start; }
/* De rij loopt rechts door tot de rand van het scherm. */
.more { display: flex; justify-content: center; gap: var(--space-xs); margin-top: var(--space-xl); }
.slide__btn { width: 52px; padding: 0; }
.slide__btn:disabled { box-shadow: inset 0 0 0 var(--rule-bar) var(--color-ink); }

/* Navy blok: links de kop, rechts punten met een oranje vinkje. Op de homepage wat je kunt verwachten, op een dienstpagina wat er in de klus zit. */
.about { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--space-3xl); align-items: center; }
.about .lead { margin-block: var(--space-md) var(--space-xl); }
.expect { counter-reset: punt; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xl); }
.expect li { counter-increment: punt; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-md); align-items: start; padding-top: var(--space-lg); border-top: 1px solid var(--color-rule-dark); }
/* Groot omlijnd cijfer voor elk punt. */
.expect li::before { content: "0" counter(punt); font: 700 var(--text-display-s)/0.85 var(--font-display); color: transparent; -webkit-text-stroke: var(--rule-bar) var(--color-accent); }
.expect b { display: block; font: 700 var(--text-title)/1.15 var(--font-display); letter-spacing: var(--tracking-display); }
.expect span { display: block; margin-top: var(--space-2xs); color: var(--color-on-dark-2); }

/* Renovation */
/* Foto links met een grote ronde hoek, de tekst als witte kaart die over de foto heen valt. */
.reno { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 6fr); align-items: center; }
.reno__photo { aspect-ratio: 5 / 4; border-radius: var(--radius-photo) var(--radius-card) var(--radius-card) var(--radius-card); overflow: hidden; box-shadow: calc(var(--space-md) * -1) var(--space-md) 0 var(--color-mark); }
.reno > :last-child { position: relative; z-index: var(--z-raised); margin-left: calc(var(--space-3xl) * -1); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-plate); box-shadow: var(--shadow-lift); }
.reno .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.reno__list { margin-top: var(--space-lg); }
/* Rustige variant voor het blok Over Royklust op de homepage (14 november 2026): kleinere kop in gewone letters, lichtere lijst, zachtere schaduw. */
.reno--calm > :last-child { padding: var(--space-lg) var(--space-xl); }
.reno--calm h2 { max-width: 24ch; font-size: var(--text-2xl); line-height: 1.15; text-transform: none; letter-spacing: var(--tracking-display); }
.reno--calm .lead { margin-top: var(--space-sm); font-size: var(--text-md); }
.reno--calm .reno__more { margin-top: var(--space-md); }
.reno--calm .reno__photo { box-shadow: calc(var(--space-xs) * -1) var(--space-xs) 0 var(--color-mark); }
.reno__list--solo { max-width: 48rem; margin-inline: auto; }
.reno__more { margin-top: var(--space-lg); }
.reno .ticks { margin-top: var(--space-lg); }
.reno__list li { display: grid; grid-template-columns: 10rem minmax(0, 1fr); align-items: center; gap: var(--space-lg); min-height: 60px; border-top: 1px solid var(--color-rule); }
.reno__list b { font: 700 var(--text-title)/1 var(--font-display); }
.reno__list span { display: flex; flex-wrap: wrap; gap: 0 var(--space-lg); }
/* De links zijn kleine knoppen met een rand: geen streep onder het woord (leest als een spelfout) en geen pijltje erachter. */
.reno__list a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: var(--space-md); border-radius: var(--radius-btn); box-shadow: inset 0 0 0 1px var(--color-rule); font-weight: 600; text-decoration: none; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out); }
.reno__list a:hover { background: var(--color-navy); color: var(--color-on-dark); box-shadow: inset 0 0 0 1px var(--color-navy); }
.index__col { border-top: 4px solid var(--color-navy); }

/* Work area */
/* Werkgebied: links tekst en postcodecheck, rechts de kaart met de plaatsen eronder. */
/* Werkbus: rijdt van links het beeld in als je scrolt, staat stil in het midden en rijdt rechts weer weg. De wielen draaien mee.
   Zonder ondersteuning of bij "verminder beweging" staat de bus stil in het midden. */
.bus { overflow: clip; margin-bottom: var(--space-xl); view-timeline: --bus block; }
/* Bescheiden formaat: de bus is een knipoog, geen blok dat de pagina ophoudt. */
.bus__ride { width: min(520px, 100% - var(--gutter) * 2); margin-inline: auto; }
.bus svg { display: block; width: 100%; height: auto; overflow: visible; }
/* Het logo op de bus volgt de kleuren van de site; de bus zelf heeft zijn eigen grijstinten in de tekening. */
.bus__mark { fill: none; stroke: var(--color-blue); stroke-width: 12; }
.bus__name { fill: var(--color-navy); font: 700 72px/1 var(--font-display); }
.bus__roy { fill: color-mix(in srgb, var(--color-blue) 75%, var(--color-navy)); }
.bus__wheel { transform-box: fill-box; transform-origin: center; }
@keyframes drive { 0% { translate: calc(-50vw - 50%) 0; animation-timing-function: ease-out; } 45%, 58% { translate: 0 0; animation-timing-function: ease-in; } 100% { translate: calc(50vw + 50%) 0; } }
@keyframes roll { 0% { rotate: -1080deg; animation-timing-function: ease-out; } 45%, 58% { rotate: 0deg; animation-timing-function: ease-in; } 100% { rotate: 1080deg; } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .bus__ride { animation: drive linear both; animation-timeline: --bus; animation-range: cover 0% cover 100%; will-change: translate; }
    .bus__wheel { animation: roll linear both; animation-timeline: --bus; animation-range: cover 0% cover 100%; }
  }
}
.area { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--space-3xl); align-items: center; }
.area .lead { margin-top: var(--space-md); color: var(--color-ink-2); }
.pc { display: grid; gap: var(--space-xs); margin-top: var(--space-xl); }
.pc label { font-size: var(--text-lg); font-weight: 600; }
.pc__row { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.pc input { flex: 1 1 9rem; max-width: 15rem; min-width: 0; min-height: 52px; padding: 0 var(--space-lg); border: 1px solid var(--color-muted); border-radius: var(--radius-btn); background: var(--color-plate); color: var(--color-ink); font-size: var(--text-md); text-transform: uppercase; outline: 2px solid transparent; outline-offset: -3px; }
.pc input::placeholder { color: var(--color-muted); text-transform: none; }
.pc input:focus-visible { outline-color: var(--color-focus); }
.pc input[aria-invalid] { border-color: var(--color-error); }
.pc__result { min-height: 3.2em; font-weight: 600; }
.pc__result[data-state="error"] { color: var(--color-error); }
.pc__result a { text-decoration-color: var(--color-ink); text-decoration-thickness: 2px; }
.area__map { display: grid; justify-items: center; gap: var(--space-lg); }
.area__map img { width: min(100%, 540px); }

/* Close */
/* De vier stappen als korte lijst in de afsluiter van de homepage. */
.todo { counter-reset: s; display: grid; gap: var(--space-sm); margin-top: var(--space-lg); }
.todo li { counter-increment: s; display: flex; align-items: center; gap: var(--space-md); font-size: var(--text-lg); font-weight: 600; }
.todo li::before { content: counter(s); display: grid; place-items: center; flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; background: var(--color-blue); color: var(--color-navy); font: 700 var(--text-lg)/1 var(--font-display); }

/* Footer: diepblauw. Onder een afsluiter krijgt hij een ronde hoek linksboven, met het navy van de afsluiter in de hoek. */
/* Footer naar een voorbeeld van Daniel (13 november 2026): donkergroen, logo met korte omschrijving links, drie kolommen, rechtsonder een vlak met dunne cirkellijnen.
   Onderaan een iets lichtere strook met het copyright links en de juridische links rechts. */
.foot { border-top: 1px solid var(--color-rule-dark); background: var(--color-navy-deep); color: var(--color-on-dark); }
.foot__bg { position: relative; overflow: clip; padding-block: var(--space-3xl) var(--space-2xl); background: var(--color-navy-deep); }
.foot__bg::after { content: ""; position: absolute; right: calc(var(--space-4xl) * -1.75); bottom: calc(var(--space-4xl) * -1.75); width: 560px; aspect-ratio: 1; border-radius: 50%; background: repeating-radial-gradient(circle, transparent 0 calc(var(--space-md) - 1px), var(--color-rule-dark) calc(var(--space-md) - 1px) var(--space-md)); mask-image: radial-gradient(circle, var(--color-navy) 30%, transparent 70%); pointer-events: none; }
.foot .container { position: relative; z-index: var(--z-base); }
.foot a { color: inherit; text-decoration: none; transition: color var(--dur-micro) var(--ease-out); }
.foot li a:hover, .foot__legal a:hover { color: var(--color-accent); }
.foot .logo { color: var(--color-on-dark); }
.foot .logo b { color: var(--color-accent); }
.foot__grid { display: grid; grid-template-columns: minmax(0, 4fr) repeat(3, minmax(0, 3fr)); gap: var(--gap-columns); }
/* Kolomkoppen klein en rustig, de links eronder in de gewone tekstmaat. */
.foot h2 { max-width: none; margin-bottom: var(--space-md); font: 600 var(--text-sm)/1.3 var(--font-body); text-transform: none; color: var(--color-on-dark-2); }
.foot li a { display: inline-flex; align-items: center; min-height: 40px; }
.foot__who { display: grid; gap: var(--space-lg); align-content: start; justify-items: start; max-width: 22rem; }
.foot__who p { color: var(--color-on-dark-2); line-height: 1.6; }
.foot__facts { display: grid; gap: var(--space-xs); font-size: var(--text-sm); }
.foot__facts li, .foot__contact li { display: flex; align-items: center; gap: var(--space-sm); }
.foot__facts svg { flex-shrink: 0; width: 16px; height: 16px; color: var(--color-accent); }
.foot__facts b { color: var(--color-accent); }
.foot__contact { display: grid; gap: var(--space-xs); }
.foot__contact li { min-height: 40px; }
.foot__contact svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-on-dark-2); }
.foot__contact a { display: inline; min-height: 0; text-decoration: none; } /* inline, anders breekt het adres niet op de <br>; geen onderstreping op verzoek van Daniel */
.foot .fill { color: inherit; border-color: currentColor; }
.foot__social { display: flex; flex-wrap: wrap; gap: var(--space-sm); margin-top: var(--space-md); }
.foot__social a { display: inline-grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--color-on-dark-2); border-radius: 50%; color: var(--color-on-dark); text-decoration: none; cursor: pointer; transition: background-color var(--dur-micro) var(--ease-out), color var(--dur-micro) var(--ease-out), border-color var(--dur-micro) var(--ease-out); }
.foot__social a:hover { background: var(--color-accent); border-color: var(--color-accent); color: var(--color-navy); }
.foot__social svg { width: 18px; height: 18px; }
.foot__bar { background: var(--color-navy); }
.foot__legal { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-xs) var(--space-xl); min-height: 72px; padding-block: var(--space-md); font-size: var(--text-sm); color: var(--color-on-dark-2); }
.foot__legal p { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-lg); }

/* Smal bureaublad: vijf menu-items naast logo en knop, dus minder lucht per item. */
@media (max-width: 68rem) {
  .nav__in { gap: var(--space-md); }
  .nav__links a { padding: 0 var(--space-xs); }
}
@media (max-width: 60rem) {
  .foot__bg { padding-block: var(--space-2xl); }
  .foot__bar { padding-bottom: 76px; }
  .nav__links, .nav__end { display: none; }
  .nav__in { min-height: 64px; padding-inline: var(--space-md) var(--space-xs); }
  :root { --nav-h: calc(64px + var(--space-sm) * 2); }
  .menu { display: block; }
  .callbar { position: fixed; inset: auto 0 0; z-index: var(--z-sticky); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-xs); padding: var(--space-xs) var(--gutter); background: var(--color-plate); box-shadow: 0 -1px 0 var(--color-rule); }
  /* Smal scherm: foto over de volle breedte bovenaan, daaronder tekst, balk en feiten. */
  .start__panel::before { inset: 0; border-radius: 0; }
  .start__in { display: flex; flex-direction: column; min-height: 0; padding-block: 0 var(--space-xl); }
  .start__text { max-width: none; }
  /* Homepage-kop op smal scherm: de langste regel past tot 320px breed. */
  .start:not(.start--sub) h1 { font-size: clamp(2rem, calc((100vw - 2rem) / 8.2), 2.75rem); }
  .start__photo { order: -1; position: relative; top: auto; right: auto; width: auto; margin: 0 calc(var(--gutter) * -1) var(--space-xl); aspect-ratio: 3 / 2; translate: none; border-radius: 0; }
  .start__photo--left > img { object-position: 8% 50%; }
  .start--plain .start__in { padding-top: var(--space-xl); }
  .start--form .start__in { gap: var(--space-xl); }
  .facts ul { gap: var(--space-md) var(--space-2xl); padding-block: var(--space-lg); }
  .vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); }
  .vakken.vakken--slide { --slide-w: calc((100% - 2 * var(--space-md)) / 2.3); }
  .reno, .area, .about { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .reno { gap: 0; }
  .reno > :last-child { margin: calc(var(--space-2xl) * -1) var(--space-md) 0; padding: var(--space-lg); }
  .start__in::before, .start__in::after { display: none; }
  .area__map img { width: min(100%, 320px); }
  .reno__photo { box-shadow: calc(var(--space-xs) * -1) var(--space-xs) 0 var(--color-mark); }
  .foot__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .foot__who { grid-column: 1 / -1; }
}
@media (max-width: 40rem) {
  .reno > :last-child { margin-inline: 0; padding: var(--space-md); }
  /* Telefoon: de vier cijfers in twee kolommen. */
  .facts ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-lg) var(--space-md); }
  .start--sub h1 { font-size: clamp(2.25rem, 10vw, 2.5rem); }
  /* De kop van het renovatieblok breekt op de telefoon zelf, zonder de vaste afbreking. */
  .reno h2 br { display: none; }
  .vakken, .foot__grid { grid-template-columns: minmax(0, 1fr); }
  .vakken.vakken--slide { --slide-w: 76%; }
  .expect { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
  .reno__list li { grid-template-columns: minmax(0, 1fr); gap: 0; padding-block: var(--space-xs); }
}

/* Binnenkomst van de kop: tekst schuift omhoog, de foto groeit licht en de boog draait op zijn plek. Alleen CSS; de inhoud is nooit verborgen. */
@keyframes up { from { translate: 0 28px; } }
@keyframes pop { from { scale: 0.92; } }
@keyframes swing { from { rotate: -90deg; } }
@media (prefers-reduced-motion: no-preference) {
  .start__text > * { animation: up calc(var(--dur-long) * 2) var(--ease-out) both; }
  .start__text > :nth-child(2) { animation-delay: var(--dur-micro); }
  .start__text > :nth-child(3) { animation-delay: var(--dur-short); }
  .start__in::after { animation: swing calc(var(--dur-long) * 3) var(--ease-out) both; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 60.01rem) {
  .start__photo { animation: pop calc(var(--dur-long) * 2) var(--ease-out) both; }
}