/* pm-services.be, iteration 3: the look of the Webflow template "Carpenters X". Mobile first.
   Shape rule: no radius on photos, cards, form or fields; every button is a pill (96px). No shadows.
   Colour rule: white and light grey pages, warm near-black panels. Amber is the one accent and only
   fills the phone buttons and the call bar, always with ink text on top. */

/* Self-hosted, SIL Open Font License (assets/fonts/LICENSE.txt). Manrope, one variable file for
   weights 400 to 700, latin subset (tools/make-fonts.py). */
@font-face {
  font-family: "Manrope"; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url("/assets/fonts/manrope-400-700.woff2") format("woff2");
}
/* Fallback metrics close to Manrope, so the swap does not shift the layout much. */
@font-face { font-family: "Manrope fallback"; src: local("Arial"); size-adjust: 103%; ascent-override: 104%; descent-override: 29%; }

:root {
  --white: #FFFFFF;
  --grey: #F4F4F4;
  --ink: #1B1311;                    /* rgb(27, 19, 17) */
  --muted: #606062;                  /* rgb(96, 96, 98): 6.3:1 on white; the template's 127 gives 4.0:1 and fails AA at 18px */
  --dark: #1F1914;                   /* rgb(31, 25, 20): hero, sequence, contact, subpage titles */
  --dark-2: #151010;                 /* rgb(21, 16, 16): services and footer */
  --on-dark: #EDEDED;                /* rgb(237, 237, 237) */
  --on-dark-muted: #A8A29C;          /* 6.6:1 on the dark panel; the template grey is too faint there */
  --line: rgba(27, 19, 17, .12);
  --line-dark: rgba(255, 255, 255, .16);
  --accent: #D98A1F;                 /* werklamp amber: phone buttons and the call bar only */
  --accent-hover: #C98019;           /* ink on it 5.4:1 */
  --on-accent: #1B1311;
  --field-border: #85807B;           /* 3.7:1 on white, visible field edge */
  --error: #9B2C12;

  --pill: 96px;
  --f: "Manrope", "Manrope fallback", ui-sans-serif, system-ui, sans-serif;

  --gutter: 20px;
  --max: 1268px;
  --sy: 72px;
  --header-h: 64px;
  --callbar-h: 76px;
  --ease-out: cubic-bezier(.23, 1, .32, 1);
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 900px) { :root { --gutter: 32px; --sy: 120px; --header-h: 72px; } }

/* ---------------------------------------------------------------- base */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 16px; }
body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font: 400 18px/1.65 var(--f);
  -webkit-font-smoothing: antialiased;
  padding-bottom: calc(var(--callbar-h) + env(safe-area-inset-bottom));
}
@media (min-width: 900px) { body { padding-bottom: 0; } }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: .2em; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
address { font-style: normal; }
h1, h2, h3 { margin: 0; font-family: var(--f); font-weight: 600; letter-spacing: normal; text-wrap: balance; }
h1 { font-size: clamp(2.75rem, 1.7rem + 4.4vw, 5.625rem); line-height: 1.08; }
h2 { font-size: clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem); line-height: 1.13; }
h3 { font-size: clamp(1.625rem, 1rem + 1.6vw, 2.375rem); line-height: 1.2; }
.num { font-variant-numeric: tabular-nums; }
.icon { width: 24px; height: 24px; flex: none; }
.icon-sm { width: 20px; height: 20px; }

/* No grey/blue tap box on phones (links, menu, chips, tiles); keyboard focus keeps its ring below. */
html { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.site-header :focus-visible, .hero-paneel :focus-visible, .diensten-donker :focus-visible, .seq :focus-visible,
.contact :focus-visible, .site-footer :focus-visible, .callbar :focus-visible, .pagina-kop :focus-visible { outline-color: var(--white); }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--white); color: var(--ink); padding: 12px 16px;
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: calc(var(--max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.wrap-smal { max-width: calc(760px + 2 * var(--gutter)); }

/* Overline: a 24px hairline and a small uppercase label above a heading. */
.overline {
  display: flex; align-items: center; gap: 12px; margin-bottom: 20px;
  font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted);
}
.overline::before { content: ""; width: 24px; height: 1px; background: currentColor; flex: none; }
.intro { color: var(--muted); max-width: 52ch; margin-top: 20px; text-wrap: pretty; }

/* ---------------------------------------------------------------- buttons: pills */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 18px 24px;
  border: 1px solid transparent; border-radius: var(--pill);
  font: 500 16px/1 var(--f); letter-spacing: .96px; text-transform: uppercase;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .16s var(--ease-out);
}
.btn:active { transform: scale(.97); }
.btn .icon { width: 20px; height: 20px; }
.btn-primary { background: var(--accent); color: var(--on-accent); }   /* the phone */
.btn-light { background: var(--white); color: var(--ink); }            /* primary on dark */
.btn-ink { background: var(--ink); color: var(--white); }              /* primary on light */
.btn-outline { background: transparent; color: inherit; border-color: currentColor; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); }
  .btn-light:hover { background: #E2DEDA; }
  .btn-ink:hover { background: #3A2E2A; }
  .btn-outline:hover { background: rgba(127, 127, 128, .14); }
}
.btn-sm { min-height: 44px; padding: 12px 18px; font-size: 15px; }
.btn-lg { min-height: 56px; }
.btn-blok { width: 100%; white-space: normal; line-height: 1.3; text-align: center; }
.btn-phone .num, .header-phone .num { letter-spacing: .04em; }
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }

/* ---------------------------------------------------------------- header: fixed on every page
   Every page opens on a dark band (hero, page title or contact panel) that carries the header height
   as top padding (.kop-top), so nothing hides under the bar and the hero video runs behind it like the
   template. With JS the bar is transparent with the white hairline at the top and turns dark with a
   full-width hairline past 80 px (html.nav-vast). Without JS it stays dark. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 40;
  background: var(--dark-2); color: var(--on-dark);
  border-bottom: 1px solid var(--line-dark);
  transition: background-color .3s ease, border-color .3s ease;
}
.js .site-header { background-color: transparent; border-bottom-color: transparent; }
.js.nav-vast .site-header, .js.menu-actief .site-header { background-color: var(--dark-2); border-bottom-color: var(--line-dark); }
.header-in { position: relative; display: flex; align-items: center; gap: 12px; height: calc(var(--header-h) - 1px); } /* plus the 1px bottom border */
.header-in::after {
  content: ""; position: absolute; left: var(--gutter); right: var(--gutter); bottom: 0;
  border-top: 1px solid rgba(255, 255, 255, .72); transition: opacity .3s ease;
}
html:not(.js) .header-in::after, .nav-vast .header-in::after, .menu-actief .header-in::after { opacity: 0; }
.brand { display: inline-flex; align-items: center; min-height: 44px; color: var(--white); margin-right: auto; }
.logo-lockup { height: 30px; width: auto; }
.nav { display: flex; align-items: center; order: 3; }
.nav-desk { display: none; }
.menu-btn {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .5); color: var(--white); cursor: pointer; list-style: none;
}
.menu-btn::-webkit-details-marker { display: none; }
.menu-close, .menu[open] .menu-open { display: none; }
.menu[open] .menu-close { display: block; }
/* Full-screen dark panel; it sits under the bar (z-index -1 inside the fixed header) so the logo and
   the close button stay on top. */
.menu-paneel {
  position: fixed; inset: 0; z-index: -1; overflow-y: auto;
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: calc(var(--header-h) + 32px) var(--gutter) calc(32px + env(safe-area-inset-bottom));
  background: var(--dark-2); color: var(--on-dark);
}
.menu-links { display: grid; }
.menu-link {
  display: flex; align-items: center; min-height: 64px;
  font-size: 38px; line-height: 1.15; font-weight: 600; color: var(--white); text-decoration: none;
  border-bottom: 1px solid var(--line-dark);
}
.menu-link[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .2em; }
.menu-voet { display: grid; gap: 20px; }
.menu-voet .btn { width: 100%; }
.menu-adres { color: var(--on-dark-muted); font-size: 16px; line-height: 26px; }
.menu-adres a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); }
html.menu-actief, .menu-actief body { overflow: hidden; }
.header-phone { display: none; }
@media (min-width: 600px) {
  .header-phone { display: inline-flex; order: 2; }
  .logo-lockup { height: 34px; }
}
@media (min-width: 1024px) {
  .header-in { gap: 32px; }
  .menu { display: none; }
  .nav { order: 0; margin-right: auto; }
  .brand { margin-right: 0; }
  .nav-desk { display: flex; gap: 8px; }
  .nav-link {
    display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px;
    font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--white);
  }
  .nav-link:hover, .nav-link[aria-current="page"] { text-decoration: underline; text-decoration-color: var(--white); text-underline-offset: .45em; }
  .nav-link[aria-current="page"] { text-decoration-thickness: 2px; }
  .header-phone { order: 3; }
}
/* The first dark band on every page starts under the fixed bar. */
.kop-top { padding-top: calc(var(--header-h) + 48px) !important; }
@media (min-width: 900px) { .kop-top { padding-top: calc(var(--header-h) + 88px) !important; } }

/* Scroll-to-top: round, dark, above the call bar on phones. */
.totop {
  position: fixed; right: var(--gutter); bottom: calc(88px + env(safe-area-inset-bottom)); z-index: 35;
  display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border-radius: 50%;
  background: var(--dark-2); color: var(--white); border: 1px solid var(--line-dark); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s ease, visibility .3s ease, transform .3s var(--ease-out), background-color .15s ease;
}
.totop.is-on { opacity: 1; visibility: visible; transform: none; }
.totop:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; box-shadow: 0 0 0 2px var(--white); }
html:not(.js) .totop { display: none; }
/* On a phone the button sits over the right edge of the form fields; out of the way while typing. */
body:has(input:is([type=text], [type=tel], [type=email]):focus, textarea:focus) .totop { opacity: 0; visibility: hidden; }
@media (hover: hover) and (pointer: fine) { .totop:hover { background: #2C2422; } }
@media (min-width: 900px) { .totop { bottom: 32px; right: 32px; } }

/* ---------------------------------------------------------------- hero: split
   Dark panel left with the headline; the video right, bleeding off the edge and 100px below the
   panel into the white section. Phones stack the panel above the video with the same overlap.
   The poster is the LCP image; site.js attaches the clip after load (never under reduced motion or
   Save-Data). */
.hero {
  --hero-ov: 88px;
  position: relative;
  background: linear-gradient(180deg, var(--dark) 0, var(--dark) calc(100% - var(--hero-ov)), var(--white) calc(100% - var(--hero-ov)));
}
.hero-paneel { background: var(--dark); color: var(--on-dark); padding-top: var(--header-h); }
.hero-in { position: relative; z-index: 2; padding-block: 40px 40px; }
.hero h1 { color: var(--white); max-width: 12ch; }
.hero-sub { margin-top: 20px; max-width: 36ch; color: var(--on-dark-muted); text-wrap: pretty; }
.hero-knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.hero-knoppen .btn { flex: 1 1 100%; }
.hero-media {
  position: relative; margin-left: var(--gutter); aspect-ratio: 4 / 3; overflow: hidden;
  background: #2A2119 url("/assets/video/hero-poster.webp") center / cover no-repeat;
}
.hero-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-veil { display: none; }
@media (min-width: 560px) {
  .hero-knoppen .btn { flex: 0 0 auto; }
}
@media (min-width: 900px) {
  .hero { --hero-ov: 100px; background: var(--white); }
  .hero-paneel {
    position: relative; display: flex; align-items: center;
    min-height: clamp(620px, 82svh, 780px); background: var(--dark);
  }
  .hero-paneel > .wrap { width: 100%; }
  .hero-in { padding-block: 72px 96px; }
  .hero-sub, .hero-knoppen { max-width: min(44%, 560px); }
  .hero-media {
    position: absolute; z-index: 1; top: 0; right: 0; left: 50%; bottom: calc(-1 * var(--hero-ov));
    margin: 0; aspect-ratio: auto;
  }
  /* A soft dark edge on the left, where the long headline runs onto the picture. */
  .hero-veil {
    display: block; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(31, 25, 20, .55) 0%, rgba(31, 25, 20, 0) 32%);
  }
}

/* ---------------------------------------------------------------- stats row */
.stats-sectie { padding-block: 56px 72px; }
.stats {
  --stat: clamp(3rem, 2.4rem + 1.6vw, 4rem);
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px 20px;
  padding-bottom: 48px; border-bottom: 1px solid var(--line);
}
.stat { display: flex; flex-direction: column; gap: 12px; }
@media (max-width: 899px) { .stat:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.stat-num {
  display: flex; align-items: flex-end; height: var(--stat);
  font-size: var(--stat); line-height: 1; font-weight: 600; color: var(--ink);
}
.stat-leeg { font-size: 18px; line-height: 1.2; font-weight: 500; color: var(--muted); }
.stat-label { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
@media (min-width: 900px) {
  /* The video hangs 100px into this section on the right; the numbers start below it. */
  .stats-sectie { padding-block: 96px; }
  .stats-na-hero { padding-top: calc(100px + 88px); }
  .stats { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 32px; padding-bottom: 64px; }
  .stat-leeg { font-size: 22px; }
}

/* ---------------------------------------------------------------- sections */
.sectie { padding-block: var(--sy); }
.sectie-grijs { background: var(--grey); }
.sectie h2 { margin-bottom: 0; }
.pagina-titel { font-size: clamp(2.25rem, 1.4rem + 3.9vw, 4.75rem); }
/* Long Dutch compounds (winkelinrichting, vochtprobleem) on a 320 px phone: hyphenate, and break as a last resort. */
h1, h2 { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: break-word; }
@media (min-width: 768px) { h1, h2 { hyphens: manual; -webkit-hyphens: manual; } }

/* Subpages: the title sits in a dark band under the dark header. */
.pagina-kop { background: var(--dark); color: var(--on-dark); padding-block: 48px 64px; }
.pagina-kop h1 { color: var(--white); }
.pagina-kop .overline, .pagina-kop .intro { color: var(--on-dark-muted); }
@media (min-width: 900px) { .pagina-kop { padding-block: 88px 112px; } }

/* ---------------------------------------------------------------- Wat ik doe
   A dark panel; the first row of cards starts on it and ends on white (--ov is how far the dark runs
   into the photos, about half the photo height). */
.diensten-sectie { --ov: clamp(110px, 10vw, 160px); padding-bottom: var(--sy); }
.diensten-donker { background: var(--dark-2); color: var(--on-dark); padding-block: var(--sy) calc(var(--ov) + 56px); }
.diensten-kop { display: grid; gap: 24px; }
.diensten-kop h2, .diensten-kop h1 { color: var(--white); }
.diensten-kop .overline { color: var(--on-dark-muted); }
.diensten-partners { color: var(--on-dark-muted); max-width: 46ch; text-wrap: pretty; }
.diensten { position: relative; display: grid; gap: 48px 32px; margin-top: calc(-1 * var(--ov)); }
.dienst-link { display: block; height: 100%; padding-bottom: 28px; border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none; }
.dienst-foto { aspect-ratio: 4 / 3; overflow: hidden; background: #2A2119; }
.dienst-foto img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.dienst-kop { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-top: 24px; }
.dienst-pijl { width: 24px; height: 24px; margin-top: .4em; stroke-width: 1.25; transition: transform .25s var(--ease-out); }
.dienst-link p { margin-top: 12px; color: var(--muted); font-size: 17px; line-height: 28px; max-width: 44ch; }
@media (hover: hover) and (pointer: fine) {
  .dienst-link:hover .dienst-foto img { transform: scale(1.03); }
  .dienst-link:hover .dienst-pijl { transform: translateX(4px); }
  .dienst-link:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
}
@media (min-width: 640px) { .diensten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) {
  .diensten-kop { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: end; }
  .diensten-partners { justify-self: end; }
}
@media (min-width: 1000px) { .diensten { grid-template-columns: repeat(3, 1fr); gap: 64px 32px; } }

/* ---------------------------------------------------------------- Realisaties (home): masonry
   Two columns, photos of different heights, the heading block first in the left column. */
.masonry { columns: 1; column-gap: 48px; }
.masonry > * { break-inside: avoid; margin-bottom: 48px; }
.masonry-kop { padding-bottom: 8px; }
.sociaal { margin-top: 24px; color: var(--muted); font-size: 16px; }
@media (min-width: 760px) {
  .masonry { columns: 2; column-gap: 32px; }
  .masonry > * { margin-bottom: 56px; }
}
@media (min-width: 1100px) { .masonry { column-gap: 64px; } .masonry-kop { padding: 24px 0 40px; } }

.real-media { position: relative; overflow: hidden; aspect-ratio: 4 / 3; background: var(--grey); }
.real-media img { width: 100%; height: 100%; object-fit: cover; }
.real-hoog .real-media { aspect-ratio: 4 / 5; }
.real-vierkant .real-media { aspect-ratio: 1 / 1; }
.real-leeg .real-media {
  display: grid; place-items: center;
  outline: 1px dashed rgba(27, 19, 17, .3); outline-offset: -12px;
}
.real-media > svg:not(.icon) { position: absolute; width: 46%; color: var(--ink); opacity: .07; }
.real-volgt {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 8px 16px; border-radius: var(--pill); background: var(--white);
  font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--ink);
}
.real-label {
  position: absolute; left: 0; top: 0; padding: 6px 12px;
  background: var(--ink); color: var(--white);
  font-size: 12px; line-height: 18px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase;
}
.real-cap { display: flex; flex-direction: column; gap: 2px; padding-top: 16px; }
.real-link { display: block; color: var(--ink); text-decoration: none; }
.real-link .real-media img { transition: transform .7s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .real-link:hover .real-media img { transform: scale(1.03); }
  .real-link:hover .real-titel { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
}
.real-titel { font-size: 20px; line-height: 28px; font-weight: 600; }
.real-plaats { color: var(--muted); font-size: 15px; line-height: 22px; }

/* Realisaties page: the same masonry, filtered by the chips (display: none on hidden items). */
.sectie-filter { padding-top: 48px; }
.real-grid { columns: 1; column-gap: 32px; }
.real-grid > .real-item { break-inside: avoid; margin-bottom: 40px; }
@media (min-width: 560px) { .real-grid { columns: 2; column-gap: 20px; } }
@media (min-width: 1100px) { .real-grid { columns: 3; column-gap: 32px; } .real-grid > .real-item { margin-bottom: 56px; } }

/* ---------------------------------------------------------------- Hoe het gaat: scroll sequence
   Default (no JS, reduced motion): a dark section with the last frame as a still and the four steps
   as a list. With .seq-on (set by site.js) the section grows by the pin length, the inner block
   sticks to the viewport and the canvas is scrubbed by scroll; each step fades in at its own point. */
.seq { position: relative; background: var(--dark); color: var(--on-dark); }
.seq-beeld { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #2A2119; }
.seq-still { width: 100%; height: 100%; object-fit: cover; }
.seq-canvas { display: none; }
.seq-in { position: relative; padding-block: 48px var(--sy); }
.seq-tekst .overline { color: var(--on-dark-muted); }
.seq-tekst h2 { color: var(--white); }
.seq-intro { margin-top: 16px; color: var(--on-dark-muted); max-width: 40ch; }
.seq-stappen { display: grid; gap: 16px; margin-top: 32px; }
.seq-stap {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: start; align-content: start;
  padding-top: 16px; border-top: 1px solid var(--line-dark);
}
.seq-num { padding-top: 5px; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; color: var(--on-dark-muted); }
.seq-stap h3 { font-size: 22px; line-height: 30px; color: var(--white); }
.seq-stap p { margin-top: 4px; color: rgba(237, 237, 237, .84); font-size: 17px; line-height: 26px; max-width: 36ch; }
.seq-balk { display: none; }
@media (min-width: 800px) {
  .seq-stappen { grid-template-columns: repeat(4, 1fr); gap: 32px; }
  .seq-stap { grid-template-columns: 1fr; gap: 8px; padding-top: 20px; }
  .seq-num { padding-top: 0; }
  .seq-stap h3 { font-size: 26px; line-height: 34px; }
}

.seq-on .seq { height: calc(100svh + 120vh); }
.seq-on .seq-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.seq-on .seq-beeld { position: absolute; inset: 0; aspect-ratio: auto; }
.seq-on .seq-still { display: none; }
.seq-on .seq-canvas { display: block; width: 100%; height: 100%; }
.seq-on .seq-beeld::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(31, 25, 20, .10) 0%, rgba(31, 25, 20, .45) 30%, rgba(31, 25, 20, .88) 54%, rgba(31, 25, 20, .96) 100%);
}
.seq-on .seq-in {
  position: absolute; left: 0; right: 0; bottom: 0; margin-inline: auto;
  padding-block: 24px calc(var(--callbar-h) + 20px + env(safe-area-inset-bottom));
}
.seq-on .seq-intro { display: none; }
.seq-on .seq-stappen { gap: 10px; margin-top: 20px; }
.seq-on .seq-stap { padding-top: 10px; opacity: 0; transform: translateY(10px); transition: opacity .35s ease-out, transform .35s var(--ease-out); }
.seq-on .seq-stap.is-on { opacity: 1; transform: none; }
.seq-on .seq-stap p { font-size: 16px; line-height: 24px; }
.seq-on .seq-balk { display: block; height: 2px; margin-top: 22px; background: var(--line-dark); overflow: hidden; }
.seq-on .seq-balk span { display: block; height: 100%; background: var(--white); transform-origin: left; transform: scaleX(0); }
@media (min-width: 900px) {
  .seq-on .seq { height: calc(100svh + 150vh); }
  .seq-on .seq-in { padding-block: 32px 64px; }
  .seq-on .seq-stap { padding-top: 20px; }
  .seq-on .seq-beeld::after {
    background:
      linear-gradient(180deg, rgba(31, 25, 20, .05) 0%, rgba(31, 25, 20, .35) 45%, rgba(31, 25, 20, .9) 78%, rgba(31, 25, 20, .96) 100%),
      linear-gradient(90deg, rgba(31, 25, 20, .5) 0%, rgba(31, 25, 20, 0) 60%);
  }
  .seq-on .seq-intro { display: block; }
}

/* ---------------------------------------------------------------- Wie ik ben: photo left, text right */
.over { display: grid; gap: 40px; }
.over-tekst h2 { margin-bottom: 28px; }
.over-tekst p + p { margin-top: 16px; }
.over-tekst > p:not(.overline) { max-width: 54ch; }
.van-wrap { background: var(--grey); padding: 0; }
.van-wrap img { width: 100%; height: auto; display: block; }
.over-van figcaption { margin-top: 16px; color: var(--muted); font-size: 16px; line-height: 26px; max-width: 44ch; }
@media (min-width: 900px) {
  .over { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: center; }
  .van-wrap { padding: 0; }
}

/* ---------------------------------------------------------------- FAQ */
.faq-wrap { display: grid; gap: 32px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 72px; padding: 18px 0; cursor: pointer; list-style: none;
  font-weight: 600; font-size: 20px; line-height: 28px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-chev { stroke-width: 1.25; transition: transform .2s var(--ease-out); }
.faq-item[open] .faq-chev { transform: rotate(180deg); }
.faq-item p { padding: 0 40px 24px 0; color: var(--muted); max-width: 60ch; }
@media (min-width: 900px) {
  .faq-wrap { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; align-items: start; }
}

/* ---------------------------------------------------------------- contact: dark panel, white form card */
.contact { background: var(--dark); color: var(--on-dark); padding-block: var(--sy); }
.contact-in { display: grid; gap: 48px; }
.contact-tekst .overline { color: var(--on-dark-muted); }
.contact-tekst h2, .contact-tekst h1 { margin-bottom: 20px; max-width: 14ch; color: var(--white); }
.contact-tekst > p:not(.overline) { color: var(--on-dark-muted); max-width: 40ch; }
.contact-phone {
  display: inline-flex; align-items: center; gap: 16px; margin-top: 32px;
  min-height: 64px; color: var(--white); text-decoration: none;
  font-size: clamp(2rem, 1.5rem + 2.2vw, 3.25rem); line-height: 1; font-weight: 600;
}
.contact-phone .icon {
  width: 26px; height: 26px; box-sizing: content-box; padding: 15px; border-radius: 50%;
  background: var(--accent); color: var(--on-accent);
}
@media (hover: hover) and (pointer: fine) {
  .contact-phone:hover .num { text-decoration: underline; text-underline-offset: .15em; text-decoration-thickness: 2px; }
}
.contact-lijst { display: grid; gap: 4px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line-dark); }
.contact-lijst li { display: flex; align-items: center; gap: 12px; }
.contact-lijst .icon { color: var(--on-dark-muted); stroke-width: 1.5; }
.contact-lijst a { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark); }

.form-kaart { background: var(--white); color: var(--ink); padding: 32px 20px; display: grid; gap: 20px; }
.form-kaart :focus-visible { outline-color: var(--ink); }
.form-kaart .form-titel { font-size: clamp(1.625rem, 1.2rem + 1vw, 2rem); }
.veld { display: grid; gap: 8px; }
.veld-rij { display: grid; gap: 20px; }
.veld label { font-weight: 600; font-size: 16px; line-height: 24px; }
.veld input, .veld textarea {
  width: 100%; min-height: 56px; padding: 14px 16px;
  font: 400 18px/1.4 var(--f); color: var(--ink);
  background: var(--white); border: 1px solid var(--field-border); border-radius: 0;
}
.veld textarea { min-height: 132px; resize: vertical; }
.veld input:focus-visible, .veld textarea:focus-visible { outline: 2px solid var(--ink); outline-offset: 0; border-color: var(--ink); }
.veld [aria-invalid="true"] { border-color: var(--error); }
.hulp { color: var(--muted); font-size: 15px; line-height: 22px; }
.form-fout { color: var(--error); font-weight: 600; font-size: 16px; }
@media (min-width: 560px) {
  .veld-rij { grid-template-columns: 1fr 1fr; }
  .form-kaart { padding: 48px; }
}
@media (min-width: 900px) {
  .contact-in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 80px; align-items: start; }
}
.contact-kort { padding-block: 64px; }
.contact-kort-in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 32px; }
.contact-kort h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); margin: 0; color: var(--white); }
.contact-kort .contact-phone { margin-top: 0; }

/* ---------------------------------------------------------------- footer, three columns */
.site-footer {
  position: relative; overflow: hidden;
  background: var(--dark-2); color: var(--on-dark-muted);
  padding-block: 64px 48px; font-size: 16px; line-height: 26px;
}
.footer-in { position: relative; z-index: 1; display: grid; gap: 32px; }
.footer-lockup { height: 34px; width: auto; color: var(--white); margin-bottom: 16px; }
.site-footer a { color: var(--on-dark); display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; }
.footer-col { padding-top: 20px; border-top: 1px solid var(--line-dark); }
.footer-col > * + * { margin-top: 12px; }
.footer-copy { font-size: 14px; line-height: 22px; }
.footer-watermark {
  position: absolute; right: -40px; bottom: -60px; width: 320px; height: 320px;
  color: var(--white); opacity: .04; pointer-events: none;
}
@media (min-width: 900px) {
  .site-footer { padding-block: 96px 64px; }
  .footer-in { grid-template-columns: 2fr 1fr 1fr; gap: 48px; }
  .footer-col { padding-top: 0; border-top: 0; padding-left: 32px; border-left: 1px solid var(--line-dark); }
  .footer-watermark { width: 440px; height: 440px; right: 4%; bottom: -120px; }
}

/* ---------------------------------------------------------------- mobile call bar */
.callbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  display: flex; gap: 8px;
  padding: 10px var(--gutter) calc(10px + env(safe-area-inset-bottom));
  background: var(--dark-2); color: var(--on-dark); border-top: 1px solid var(--line-dark);
}
.callbar-phone { flex: 1; min-height: 56px; font-size: 18px; }
.callbar-mail { width: 56px; min-height: 56px; padding: 0; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------------------------------------------------------------- realisaties page filter */
.f-radio { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; border: 0; margin: 0 0 40px; padding: 0; min-width: 0; }
.chips legend {
  width: 100%; padding: 0; margin-bottom: 12px;
  font-size: 14px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
.chip {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 18px;
  border: 1px solid var(--line); border-radius: var(--pill); background: transparent; color: var(--ink);
  font-size: 16px; font-weight: 500; cursor: pointer; user-select: none;
  transition: background-color .15s ease, border-color .15s ease;
}
.chip-check { display: none; width: 18px; height: 18px; }
@media (hover: hover) and (pointer: fine) { .chip:hover { border-color: var(--ink); } }

/* ---------------------------------------------------------------- text pages and 404 */
.tekstpagina .placeholder-tekst { padding: 24px; background: var(--grey); font-weight: 600; }
.bedrijf-regel { margin-top: 24px; color: var(--muted); font-size: 16px; }
.nf-in { display: grid; gap: 32px; align-items: center; }
.nf-mark { width: 140px; color: var(--on-dark); }
@media (min-width: 800px) { .nf-in { grid-template-columns: 220px 1fr; gap: 56px; } .nf-mark { width: 220px; } }

/* ---------------------------------------------------------------- breadcrumbs (detail pages) */
.crumbs { margin-bottom: 20px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; font-size: 14px; line-height: 20px; color: var(--on-dark-muted); }
.crumbs li { display: inline-flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; opacity: .6; }
.crumbs a { display: inline-flex; align-items: center; min-height: 44px; min-width: 44px; color: var(--on-dark); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- detail pages (service, realisatie)
   The big photo starts on the dark title band and ends on white, like the service cards. */
.detail { --ov2: clamp(72px, 12vw, 200px); }
.kop-kruis { padding-bottom: calc(var(--ov2) + 48px); }
.detail-beeld { position: relative; margin-top: calc(-1 * var(--ov2)); }
.detail-beeld img, .detail-beeld .real-media { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.detail-beeld .real-media img { aspect-ratio: auto; height: 100%; }
.detail-body { padding-top: 56px; }
.detail-grid { display: grid; gap: 48px; }
.detail-tekst p + p { margin-top: 20px; }
.detail-tekst p { max-width: 62ch; text-wrap: pretty; }
.detail-tekst p:first-child { font-size: 20px; line-height: 32px; }
.detail-aside { padding-top: 24px; border-top: 1px solid var(--line); align-self: start; }
.aside-titel { font-size: 28px; line-height: 36px; margin-bottom: 24px; }
.aside-mail { margin-top: 8px; }
.aside-mail a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
.detail-feiten { margin: 0; align-self: start; border-bottom: 1px solid var(--line); }
.detail-feiten > div { display: grid; gap: 4px; padding: 16px 0; border-top: 1px solid var(--line); }
.detail-feiten dt { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.detail-feiten dd { margin: 0; font-weight: 500; }
.detail-feiten a { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
@media (min-width: 900px) {
  .detail-body { padding-top: 88px; }
  .detail-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 96px; }
  .detail-aside { position: sticky; top: calc(var(--header-h) + 32px); }
}

.vorig-volgend {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px;
  margin-top: 64px; padding-top: 32px; position: relative;
}
.vorig-volgend::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--line); }
.vv-link { display: inline-flex; align-items: center; gap: 16px; min-height: 56px; color: var(--ink); text-decoration: none; }
.vv-link > span { display: grid; }
.vv-volgend { text-align: right; flex-direction: row-reverse; }
.vv-label { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.vv-titel { font-weight: 600; }
.vv-link .icon { stroke-width: 1.25; transition: transform .2s var(--ease-out); }
.vv-alle { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); }
@media (hover: hover) and (pointer: fine) {
  .vv-vorig:hover .icon { transform: translateX(-4px); }
  .vv-volgend:hover .icon { transform: translateX(4px); }
}
@media (max-width: 699px) {
  .vorig-volgend { flex-direction: column; align-items: stretch; }
  .vv-volgend { justify-content: flex-end; }
  .vv-alle { order: 3; }
}

/* "Zo gaat het": three steps on grey. */
.stappen { display: grid; gap: 32px; margin-top: 48px; }
.stap { padding-top: 20px; border-top: 1px solid var(--line); }
.stap-num { display: block; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
.stap h3 { margin-top: 12px; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.75rem); }
.stap p { margin-top: 8px; color: var(--muted); max-width: 36ch; }
@media (min-width: 800px) { .stappen { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* Related realisaties on a service page. */
.verwant-kop { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 48px; }
.verwant-grid { display: grid; gap: 40px 32px; }
@media (min-width: 640px) { .verwant-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .verwant-grid { grid-template-columns: repeat(3, 1fr); } }

/* Services overview: the partner line under the cards. */
.partners-regel {
  display: flex; gap: 16px; align-items: flex-start; margin-top: 64px; padding: 28px 0;
  border-block: 1px solid var(--line); font-size: clamp(1.125rem, 1rem + .4vw, 1.375rem); line-height: 1.5;
}
.partners-regel .icon { width: 28px; height: 28px; margin-top: 2px; color: var(--muted); stroke-width: 1.5; }
.partners-regel span { max-width: 62ch; }

/* Over mij */
.partners-blok h2.overline { font-family: var(--f); }
.partners-groot { font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.375rem); line-height: 1.3; font-weight: 500; max-width: 34ch; text-wrap: pretty; }

/* Contact page */
.contact.kop-top .contact-titel, .contact-titel { font-size: clamp(2.25rem, 1.5rem + 2.9vw, 3.75rem); line-height: 1.13; }
.contact-uren { display: inline-flex; align-items: center; min-height: 44px; color: var(--on-dark-muted); }
.contact .crumbs { margin-top: -12px; }
.werkgebied { display: grid; gap: 32px; }
/* A plain list, not pills: these are places, not buttons. */
.werkgebied-lijst { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); column-gap: 24px; margin-top: 24px; }
.werkgebied-lijst li { padding-block: 10px; border-bottom: 1px solid var(--line); font-size: 17px; line-height: 24px; }
.adres-blok { margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--line); }
@media (min-width: 900px) { .werkgebied { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; } }

/* Footer bottom row */
.footer-onder { position: relative; z-index: 1; margin-top: 48px; }
.footer-onder p { padding-top: 24px; border-top: 1px solid var(--line-dark); }

/* ---------------------------------------------------------------- iteration 4 blocks */
/* Placeholder Peter still has to fill: visible on purpose, dashed underline, never amber. */
.ph { border-bottom: 1px dashed currentColor; white-space: nowrap; }
.faq-item p.faq-volgt { font-style: italic; }

/* Home: Over mij right under the stats (the stats row already closes with a hairline). */
.sectie-over { padding-top: 24px; }
@media (min-width: 900px) { .sectie-over { padding-top: 32px; } }

/* Services header on home: intro and the "Alle diensten" pill on the right. */
.diensten-rechts { display: grid; gap: 24px; justify-items: start; }
.diensten-rechts .btn { color: var(--white); }
@media (min-width: 900px) { .diensten-rechts { justify-self: end; max-width: 46ch; } }

/* Voor wie: three plain columns on grey. */
.wie-lijst { display: grid; gap: 32px; margin-top: 48px; }
.wie { padding-top: 24px; border-top: 1px solid var(--line); }
.wie-num { display: block; font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; color: var(--muted); }
.wie h3 { margin-top: 12px; font-size: clamp(1.5rem, 1.2rem + .8vw, 1.75rem); }
.wie p { margin-top: 12px; color: var(--muted); max-width: 38ch; }
@media (min-width: 800px) { .wie-lijst { grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; } }

/* Home masonry: chips in the heading block. */
.masonry-kop .chips { margin: 32px 0 0; }
.masonry-kop .knoppen { margin-top: 24px; }

/* Werkgebied (home and contact). */
.wg-kop { font-size: 14px; line-height: 20px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.wg-kop + .werkgebied-lijst { margin-top: 16px; }
.werkgebied-lijst + .wg-kop { margin-top: 40px; }
.werkgebied-groot li { font-size: 20px; line-height: 28px; font-weight: 500; color: var(--ink); }
.wg-verder { margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--line); font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.4; font-weight: 500; }
.werkgebied .intro { max-width: 40ch; }
@media (min-width: 900px) { .werkgebied { align-items: start; } }

/* Partners line between werkgebied and FAQ. */
.partners-strip { padding-block: 0 var(--sy); }
.partners-strip-in { display: grid; gap: 8px; padding-top: 48px; border-top: 1px solid var(--line); }
@media (min-width: 900px) {
  .partners-strip-in { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 80px; padding-top: 64px; align-items: start; }
  .partners-strip-in .overline { margin-top: 10px; }
}

/* Service page: FAQ on white after the related work, the other services on grey. */
.sectie-lijn { position: relative; }
.verwant + .sectie-lijn { padding-top: 0; }
.verwant + .sectie-lijn .faq-wrap { padding-top: var(--sy); border-top: 1px solid var(--line); }
.andere-diensten { display: grid; gap: 48px 32px; }
@media (min-width: 640px) { .andere-diensten { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1000px) { .andere-diensten { grid-template-columns: repeat(3, 1fr); } }
.andere-diensten .dienst-link { border-bottom-color: rgba(27, 19, 17, .16); }

/* Over: the timeline on a dark band. */
.sectie-donker { background: var(--dark); color: var(--on-dark); }
.sectie-donker h2 { color: var(--white); }
.sectie-donker .overline { color: var(--on-dark-muted); }
.sectie-donker :focus-visible { outline-color: var(--white); }
.tijdlijn { position: relative; display: grid; gap: 40px; margin-top: 48px; }
.tl-stap { position: relative; padding-top: 28px; border-top: 1px solid var(--line-dark); }
.tl-stap::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--white); }
.tl-wanneer { display: block; font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem); line-height: 1.1; font-weight: 600; color: var(--white); }
.tl-stap h3 { margin-top: 16px; font-size: 22px; line-height: 30px; color: var(--on-dark); }
.tl-stap p { margin-top: 8px; color: var(--on-dark-muted); max-width: 36ch; }
@media (min-width: 800px) { .tijdlijn { grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 64px; } }

/* A plain list of service links (over page, 404). */
.sectie-kort { padding-bottom: 0; }
.dienst-lijst { border-top: 1px solid var(--line); }
.dl-link {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px;
  border-bottom: 1px solid var(--line); color: var(--ink); text-decoration: none;
  font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem); line-height: 1.3; font-weight: 600;
}
.dl-pijl { stroke-width: 1.25; transition: transform .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .dl-link:hover .dl-pijl { transform: translateX(4px); } .dl-link:hover span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; } }
.nf-links-titel { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); }

/* Contact page: how to reach me best. */
.bereiken { display: grid; gap: 32px; margin-top: 48px; }
.ber { padding-top: 24px; border-top: 1px solid var(--line); }
.ber h3 { font-size: clamp(1.5rem, 1.2rem + .8vw, 1.75rem); }
.ber p { margin-top: 8px; color: var(--muted); max-width: 36ch; }
@media (min-width: 800px) { .bereiken { grid-template-columns: repeat(3, 1fr); gap: 48px; } }

/* Honeypot: off screen, out of the tab order (tabindex -1) and hidden from screen readers. */
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* ---------------------------------------------------------------- motion (dial 3)
   Fade-up on section entry. Scroll-driven where supported; elsewhere the "io" class (set in <head>
   only when JS runs and motion is allowed) hides the start state and site.js reveals it once. */
@keyframes fade-up {
  from { opacity: 0; transform: translateY(24px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .reveal { animation: fade-up linear both; animation-timeline: view(); animation-range: entry 0% entry 40%; }
  }
  .io .reveal { opacity: 0; transform: translateY(24px); transition: opacity .5s ease-out, transform .5s var(--ease-out); }
  .io .reveal.is-in { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation: none !important; }
  .btn:active { transform: none; }
}