/* ==========================================================================
   Loodgietersbedrijf Niels — stylesheet
   Warm & clean: antraciet + koper + crème, Archivo.
   Desktop-first; the mobile layout kicks in at max-width: 820px.
   ========================================================================== */

/* ---- Design tokens ------------------------------------------------------- */
:root {
  /* kern */
  --ink: #241F1B;            /* antraciet: tekst, donkere vlakken */
  --ink-footer: #201B17;
  --copper: #A8764B;         /* primair accent */
  --copper-light: #C79E74;
  --copper-glow: #DDB287;
  --copper-dark: #8A5E38;
  --cream: #F3EEE7;          /* pagina-achtergrond */
  --cream-card: #FBF9F5;     /* kaart/oppervlak */
  --sand: #EFE6DA;           /* banden/panelen */
  --icon-bg: #F1E4D5;        /* icoon-vak */
  --btn-text: #F7F2EA;

  /* randen */
  --border: #E2D9CD;
  --border-soft: #E7DFD3;
  --border-sand: #E2D6C5;
  --border-strong: #D8CBB9;
  --divider: #E0D3C0;

  /* tekst */
  --text-body: #4C443B;
  --text-body-2: #5C5248;
  --text-muted: #6B5F53;
  --text-meta: #8A7E70;
  --text-on-dark: #C9BCAB;
  --text-on-dark-soft: #A99B8A;

  /* whatsapp (gedempt sage-groen) */
  --wa-bg: #E8EDE6;
  --wa-text: #47614A;
  --wa-border: #CCD7C9;
  --wa-icon: #567A5D;

  /* schaduw */
  --shadow-card: 0 24px 50px -28px rgba(36,31,27,0.4);
  --shadow-soft: 0 16px 36px -22px rgba(36,31,27,0.35);

  --radius-pill: 999px;
  --radius-card: calc(20px * var(--rs-b, 1));
  --radius-frame: calc(28px * var(--rs-b, 1));
  --radius-input: calc(12px * var(--rs-b, 1));

  --gutter: 56px;
  --maxw: 1360px;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Reset & base -------------------------------------------------------- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: clip; }
body {
  margin: 0;
  font-family: "Archivo", Helvetica, Arial, sans-serif;
  background: var(--cream);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding-top: 76px; padding-bottom: 20px; }

.label {
  font-size: 12px; font-weight: 700; letter-spacing: 2px;
  text-transform: uppercase; color: var(--copper); margin: 0;
}
h1, h2, h3 { margin: 0; }
.h2 { font-weight: 900; font-size: 44px; letter-spacing: -1.6px; line-height: 1.05; }

/* ---- Buttons ------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-weight: 700; font-size: 16px; padding: 16px 28px;
  border-radius: var(--radius-pill); border: none; transition: transform .2s var(--ease), background-color .2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--copper); color: var(--btn-text); }
.btn--primary:hover { background: var(--copper-dark); }
.btn--dark { background: var(--ink); color: var(--cream); }
.btn--outline { background: transparent; border: 1.5px solid var(--border-strong); color: var(--ink); }
.btn--whatsapp { background: var(--wa-bg); color: var(--wa-text); border: 1.5px solid var(--wa-border); }
.btn--whatsapp:hover { background: #dfe6dc; }
.btn svg { flex-shrink: 0; }
.btn--block { width: 100%; }

/* ---- Header / nav -------------------------------------------------------- */
.site-header { background: var(--cream); border-bottom: 1px solid var(--border-soft); position: sticky; top: 0; z-index: 50; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 20px 0; }
.nav__logo svg { display: block; height: 56px; width: auto; }
/* animated logo droplet — subtle drip/bob (from logo-kit/logo-niels-geanimeerd) */
#logoDrip { transform-box: fill-box; transform-origin: 50% 20%; animation: niels-drip 2.4s cubic-bezier(.4, 0, .3, 1) .6s 1 both; }
@keyframes niels-drip {
  0%, 70%, 100% { transform: translateY(0) scale(1, 1); }
  82% { transform: translateY(4px) scale(1.01, 0.94); }
  91% { transform: translateY(-1px) scale(0.99, 1.02); }
}
@media (prefers-reduced-motion: reduce) { #logoDrip { animation: none; } }
.nav__links { display: flex; align-items: center; gap: 30px; font-weight: 600; font-size: 15px; color: #3B322A; }
.nav__links a.is-active { color: var(--copper); font-weight: 700; }
.nav__links a:hover { color: var(--copper); }
.nav__cta { display: inline-flex; align-items: center; gap: 9px; background: var(--copper); color: var(--btn-text); font-weight: 700; font-size: 14.5px; padding: 12px 22px; border-radius: var(--radius-pill); }
.nav__toggle { display: none; width: 44px; height: 44px; border-radius: calc(11px * var(--rs-b, 1)); border: 1px solid var(--border); background: var(--cream-card); align-items: center; justify-content: center; }


/* ---- Hero ---------------------------------------------------------------- */
.hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 64px 0 44px; }
.hero__badge {
  display: inline-flex; align-items: center; gap: 8px; background: var(--cream-card);
  border: 1px solid var(--border-soft); color: var(--copper-dark); font-weight: 700; font-size: 13px;
  padding: 8px 15px; border-radius: var(--radius-pill);
}
.hero__badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--copper); }
.hero__title { font-weight: 900; font-size: 64px; line-height: 1.02; letter-spacing: -2.8px; margin-top: 22px; }
.hero__sub { font-size: 18px; line-height: 1.6; color: var(--text-body-2); max-width: 470px; margin-top: 22px; }
.hero__actions { display: flex; align-items: center; gap: 12px; margin-top: 30px; flex-wrap: wrap; }
.hero__trust { display: flex; align-items: center; gap: 18px; margin-top: 32px; flex-wrap: wrap; }
.hero__trust span { display: inline-flex; align-items: center; gap: 7px; font-size: 14px; font-weight: 600; color: #3B322A; }
.hero__media { position: relative; }
.hero__img { border-radius: calc(26px * var(--rs-p, 1)); overflow: hidden; height: 540px; box-shadow: var(--shadow-card); }
.hero__img img { width: 100%; height: 100%; object-fit: cover; object-position: 60% center; }
.float-card {
  position: absolute; left: -28px; bottom: 34px; background: var(--cream-card);
  border: 1px solid var(--border-soft); border-radius: calc(18px * var(--rs-b, 1)); padding: 14px 18px;
  display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-soft);
}
.float-card__icon { width: 44px; height: 44px; border-radius: calc(12px * var(--rs-b, 1)); background: var(--ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.float-card__t { font-weight: 800; font-size: 15px; }
.float-card__s { font-size: 13px; color: var(--text-meta); }
.hero__tag { position: absolute; right: 16px; top: 16px; background: var(--ink); color: var(--cream); border-radius: calc(14px * var(--rs-b, 1)); padding: 12px 18px; display: flex; align-items: center; gap: 9px; box-shadow: 0 16px 30px -16px rgba(36,31,27,0.5); }
.hero__tag .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-glow); box-shadow: 0 0 0 4px rgba(221,178,135,0.25); }
.hero__tag span { font-weight: 700; font-size: 14px; }

/* wordroll animation */
.wordroll { display: inline-block; overflow: hidden; height: 66px; line-height: 66px; vertical-align: bottom; color: var(--copper); }
.wordroll__track { display: block; animation: wordroll 6.5s var(--ease) infinite; }
.wordroll__item { display: block; height: 66px; line-height: 66px; }
@keyframes wordroll {
  0%, 30%   { transform: translateY(-132px); }
  38%, 68%  { transform: translateY(-66px); }
  76%, 100% { transform: translateY(0); }
}

/* ---- USP strip ----------------------------------------------------------- */
.usp {
  display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 20px;
  background: var(--cream-card); border: 1px solid var(--border-soft); border-radius: var(--radius-card); overflow: hidden;
}
.usp__item { padding: 26px 28px; display: flex; align-items: center; gap: 14px; }
.usp__item + .usp__item { border-left: 1px solid #EEE6DA; }
.usp__t { font-weight: 800; font-size: 15.5px; }
.usp__s { font-size: 13px; color: var(--text-meta); }

/* ---- Stats --------------------------------------------------------------- */
.stats { background: var(--sand); border: 1px solid var(--border-sand); border-radius: calc(24px * var(--rs-b, 1)); padding: 36px 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 14px; }
.stat { }
.stat + .stat { border-left: 1px solid var(--divider); padding-left: 24px; }
.stat__n { font-weight: 900; font-size: 46px; letter-spacing: -2px; line-height: 1; }
.stat__l { font-size: 14px; color: var(--text-muted); margin-top: 8px; font-weight: 500; }

/* ---- Section head with intro -------------------------------------------- */
.sec-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; }
.sec-head__intro { font-size: 15px; color: var(--text-muted); max-width: 340px; line-height: 1.6; text-align: right; }
.sec-title { font-weight: 900; font-size: 44px; letter-spacing: -1.6px; margin-top: 10px; }

/* ---- Service cards ------------------------------------------------------- */
.services { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); grid-auto-rows: 1fr; gap: 20px; margin-top: 34px; }
.service {
  background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 30px;
  transition: transform .25s var(--ease); cursor: pointer; display: block;
}
.service:hover { transform: translateY(-3px); }
.service__icon { width: 50px; height: 50px; border-radius: calc(13px * var(--rs-b, 1)); background: var(--icon-bg); display: flex; align-items: center; justify-content: center; transition: background-color .25s var(--ease); }
.service__icon svg { stroke: var(--copper); transition: stroke .25s var(--ease); }
.service:hover .service__icon { background: var(--ink); }
.service:hover .service__icon svg { stroke: var(--copper-glow); }
.service__t { font-weight: 800; font-size: 20px; margin-top: 18px; }
.service__d { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-top: 8px; }
.service__link { display: inline-flex; align-items: center; gap: 6px; color: var(--copper); font-weight: 700; font-size: 14px; margin-top: 16px; }

/* ---- Carousel (recent werk + reviews) ----------------------------------- */
.carousel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.carousel__nav { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.cbtn { width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: opacity .2s; }
.cbtn--prev { border: 1.5px solid var(--border-strong); background: var(--cream-card); }
.cbtn--next { border: 1.5px solid var(--ink); background: var(--ink); }
.cbtn:disabled { opacity: .35; cursor: default; }
.carousel__viewport { overflow: hidden; margin-top: 20px; }
.carousel__track { display: flex; gap: 16px; transition: transform .5s var(--ease); }
.carousel__item { flex: 0 0 calc((100% - 32px) / 3); }
.work { border-radius: calc(18px * var(--rs-p, 1)); overflow: hidden; height: 300px; position: relative; }
.work img { width: 100%; height: 100%; object-fit: cover; }
.work__cap { position: absolute; left: 14px; bottom: 14px; background: rgba(32,27,23,0.72); color: var(--cream); font-weight: 700; font-size: 13px; padding: 7px 13px; border-radius: var(--radius-pill); }
.dots { display: flex; justify-content: center; gap: 8px; margin-top: 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); border: none; padding: 0; }
.dot.is-active { background: var(--ink); }

/* ---- Dark band (lekkage / CTA) ------------------------------------------ */
.band {
  background: linear-gradient(100deg, #201B17 46%, rgba(32,27,23,0.72) 100%), url("../images/loodgieter-afvoer-wastafel.jpg");
  background-size: cover; background-position: center; border-radius: calc(24px * var(--rs-b, 1)); padding: 48px 52px;
  display: flex; align-items: center; justify-content: space-between; gap: 40px; margin-top: 60px;
}
.band__label { display: inline-flex; align-items: center; gap: 9px; color: var(--copper-glow); font-weight: 700; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; }
.band__label .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--copper-glow); box-shadow: 0 0 0 4px rgba(221,178,135,0.25); }
.band__title { font-weight: 900; font-size: 40px; letter-spacing: -1.4px; color: var(--cream); margin-top: 14px; line-height: 1.06; }
.band__text { font-size: 16px; color: var(--text-on-dark); margin-top: 12px; max-width: 460px; }
.band__actions { display: flex; flex-direction: column; gap: 12px; flex-shrink: 0; }
.band__actions .btn { white-space: nowrap; }

/* ---- Frame panel (Over Niels op home) ----------------------------------- */
.frame { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-frame); padding: 28px; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 40px; align-items: center; }
.frame__img { border-radius: calc(20px * var(--rs-p, 1)); overflow: hidden; height: 460px; box-shadow: var(--shadow-soft); }
.frame__img img { width: 100%; height: 100%; object-fit: cover; }
.frame__body { padding: 8px 28px 8px 12px; }
.frame__title { font-weight: 900; font-size: 42px; letter-spacing: -1.4px; margin-top: 10px; line-height: 1.06; }
.frame__p { font-size: 17px; line-height: 1.7; color: var(--text-body); margin-top: 16px; max-width: 500px; }

/* ---- Reviews ------------------------------------------------------------- */
.reviews { background: var(--cream); padding: 64px 0; margin-top: 44px; }
.badge-soft { font-size: 12px; font-weight: 700; color: #B08A63; background: var(--cream-card); border: 1px dashed #D8B78F; padding: 4px 11px; border-radius: var(--radius-pill); }
.review { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 30px; }
.review__stars { color: var(--copper-glow); font-size: 18px; letter-spacing: 2px; }
.review__q { font-weight: 700; font-size: 18px; line-height: 1.5; margin-top: 14px; }
.review__who { display: flex; align-items: center; gap: 11px; margin-top: 20px; }
.review__av { width: 40px; height: 40px; border-radius: 50%; background: var(--copper); color: var(--cream); display: flex; align-items: center; justify-content: center; font-weight: 800; }
.review__name { font-weight: 700; font-size: 14px; }
.review__city { font-size: 12px; color: var(--text-meta); }
.reviews__cta { margin-top: 20px; background: var(--ink); border-radius: var(--radius-card); padding: 26px 32px; display: flex; align-items: center; justify-content: space-between; gap: 24px; color: var(--cream); }

/* ---- Werkgebied ---------------------------------------------------------- */
.werkgebied { background: var(--sand); border: 1px solid var(--border-sand); border-radius: calc(24px * var(--rs-b, 1)); padding: 44px 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; }
.chips { display: flex; flex-wrap: wrap; gap: 12px; }
.chip { background: var(--cream-card); border: 1px solid var(--border); font-weight: 700; font-size: 15px; padding: 11px 20px; border-radius: var(--radius-pill); }
.chip--dark { background: var(--ink); color: var(--cream); border-color: var(--ink); }

/* ---- Contact ------------------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start; }
.contact-row { display: flex; align-items: center; gap: 14px; }
.contact-row > span:last-child { min-width: 0; }
.contact-row__v { overflow-wrap: anywhere; }
.contact-row__icon { width: 44px; height: 44px; border-radius: calc(12px * var(--rs-b, 1)); background: var(--icon-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.contact-row__k { font-size: 13px; color: var(--text-meta); font-weight: 600; }
.contact-row__v { font-weight: 800; font-size: 17px; }
.form-card { background: var(--cream-card); border: 1px solid var(--border); border-radius: calc(22px * var(--rs-b, 1)); padding: 34px 36px; }
.field { width: 100%; font-family: inherit; font-size: 15px; padding: 15px 16px; border-radius: var(--radius-input); border: 1.5px solid var(--border); background: #fff; color: var(--ink); outline: none; }
.field:focus { border-color: var(--copper); }
textarea.field { resize: vertical; min-height: 90px; }
.form-note { font-size: 12px; color: var(--text-meta); text-align: center; }
.form-status { font-size: 14px; font-weight: 600; padding: 12px 14px; border-radius: var(--radius-input); display: none; }
.form-status.ok { display: block; background: #E8EDE6; color: var(--wa-text); }
.form-status.err { display: block; background: #F6E7E4; color: #9B4A38; }

/* ---- Modal (form confirmation) ------------------------------------------ */
.modal { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; padding: 20px; background: rgba(32,27,23,0.55); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.modal.is-open { display: flex; }
.modal__card { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-frame); padding: 44px 38px 36px; max-width: 420px; width: 100%; text-align: center; box-shadow: var(--shadow-card); animation: modalIn .3s var(--ease); }
@keyframes modalIn { from { opacity: 0; transform: translateY(14px) scale(.97); } to { opacity: 1; transform: none; } }
.modal__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--icon-bg); display: flex; align-items: center; justify-content: center; margin: 0 auto 22px; }
.modal__title { font-weight: 900; font-size: 30px; letter-spacing: -1.2px; }
.modal__text { font-size: 16px; line-height: 1.6; color: var(--text-body-2); margin-top: 10px; }
.modal__close { margin-top: 26px; }

/* ---- Map ---------------------------------------------------------------- */
.map { border-radius: calc(24px * var(--rs-p, 1)); overflow: hidden; position: relative; min-height: 340px; border: 1px solid #D6DBCB; }
.map img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.map__pin { position: absolute; left: 50%; top: 34%; transform: translate(-50%,-100%); display: flex; flex-direction: column; align-items: center; }
.map__pin-label { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-pill); padding: 7px 15px; font-weight: 700; font-size: 13px; box-shadow: 0 8px 20px -8px rgba(36,31,27,0.5); white-space: nowrap; }
.map__pin-dot { width: 20px; height: 20px; border-radius: 50%; background: var(--copper); border: 3px solid var(--cream-card); box-shadow: 0 6px 14px -4px rgba(168,118,75,0.9); margin-top: 3px; }
.map__attr { position: absolute; right: 8px; bottom: 8px; background: rgba(251,249,245,0.85); color: var(--text-body-2); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; }

/* ---- Feature blocks (Diensten page) ------------------------------------- */
.feature { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: center; background: var(--cream-card); border: 1px solid var(--border); border-radius: calc(24px * var(--rs-b, 1)); padding: 20px; overflow: hidden; }
.feature__img { border-radius: calc(18px * var(--rs-p, 1)); overflow: hidden; height: 380px; }
.feature__img img { width: 100%; height: 100%; object-fit: cover; }
.feature__body { padding: 20px 34px; }
.feature--rev .feature__img { order: 2; }
.feature--rev .feature__body { order: 1; }
.feature__title { font-weight: 900; font-size: 32px; letter-spacing: -1px; margin-top: 18px; }
.bullet { display: flex; align-items: flex-start; gap: 9px; font-size: 15px; color: var(--text-body); font-weight: 500; }
.bullet svg { flex-shrink: 0; margin-top: 3px; }
.bullets { display: flex; flex-direction: column; gap: 11px; margin-top: 20px; }

/* ---- Diensten page: secondary service cards ----------------------------- */
.svc2 { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 20px; margin-top: 0; }
.svc2 .card { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px; }
.svc2 .card__head { display: flex; align-items: center; gap: 16px; }
.svc2 .card__icon { width: 50px; height: 50px; border-radius: calc(13px * var(--rs-b, 1)); background: var(--icon-bg); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.svc2 .card__t { font-weight: 800; font-size: 22px; }
.svc2 .card__d { font-size: 15px; line-height: 1.6; color: var(--text-muted); margin-top: 14px; }
.page-head { padding-top: 64px; padding-bottom: 8px; }
.page-head__title { font-weight: 900; font-size: 58px; letter-spacing: -2.4px; line-height: 1.02; }
.page-head__grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 40px; align-items: end; margin-top: 12px; }
.page-head__intro { font-size: 17px; line-height: 1.6; color: var(--text-body-2); }
.stack { display: flex; flex-direction: column; gap: 20px; margin-top: 20px; }

/* ---- Values (Over Niels) ------------------------------------------------ */
.values { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 20px; }
.value { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 28px; }
.value__icon { width: 48px; height: 48px; border-radius: calc(12px * var(--rs-b, 1)); background: var(--icon-bg); display: flex; align-items: center; justify-content: center; }
.value__t { font-weight: 800; font-size: 18px; margin-top: 16px; }
.value__d { font-size: 14px; line-height: 1.6; color: var(--text-muted); margin-top: 6px; }
.quote { background: linear-gradient(100deg, rgba(120,82,50,0.95) 46%, rgba(150,105,66,0.85) 100%), url("../images/loodgieter-afvoer-wastafel.jpg"); background-size: cover; background-position: center; border-radius: calc(24px * var(--rs-b, 1)); padding: 52px 56px; }
.quote__mark { font-weight: 900; font-size: 92px; line-height: 1; color: #E6C39A; height: 58px; overflow: hidden; margin-bottom: 6px; }
.quote__t { font-weight: 800; font-size: 34px; line-height: 1.35; letter-spacing: -0.8px; color: var(--cream); max-width: 820px; }
.quote__by { font-size: 15px; color: #EFDCC4; margin-top: 18px; font-weight: 600; }
.steps { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 20px; margin-top: 30px; }
.step { background: var(--cream-card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 32px; }
.step__n { font-weight: 900; font-size: 40px; color: var(--copper-glow); letter-spacing: -1px; }
.step__t { font-weight: 800; font-size: 20px; margin-top: 12px; }
.step__d { font-size: 14.5px; line-height: 1.6; color: var(--text-muted); margin-top: 8px; }

/* ---- Footer -------------------------------------------------------------- */
.site-footer { background: var(--ink-footer); color: var(--text-on-dark); padding: 56px 0 32px; border-radius: calc(28px * var(--rs-b, 1)) calc(28px * var(--rs-b, 1)) 0 0; margin-top: 60px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 36px; padding-bottom: 36px; border-bottom: 1px solid #352E28; }
.footer-grid svg { height: 62px; width: auto; }
.footer__about { font-size: 14.5px; line-height: 1.6; margin-top: 16px; max-width: 280px; color: var(--text-on-dark-soft); }
.footer__col h4 { font-weight: 700; color: var(--cream); font-size: 15px; margin: 0 0 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.footer__bar { display: flex; justify-content: space-between; padding-top: 22px; font-size: 13px; color: #8A7C6C; }

/* ---- Sticky mobile call bar --------------------------------------------- */
.sticky-bar { display: none; }

/* =========================================================================
   MOBILE  (<= 820px)
   ========================================================================= */
@media (max-width: 820px) {
  :root { --gutter: 18px; }
  .section { padding-top: 44px; padding-bottom: 0; }

  /* nav */
  .nav__links, .nav__cta { display: none; }
  .nav__toggle { display: flex; }
  .nav__logo svg { height: 42px; }

  /* hero */
  .hero { grid-template-columns: 1fr; gap: 20px; padding: 24px 0 0; }
  .hero__title { font-size: 38px; letter-spacing: -1.6px; margin-top: 14px; }
  .hero__sub { font-size: 15px; margin-top: 12px; }
  .hero__img { height: 240px; border-radius: calc(20px * var(--rs-p, 1)); }
  .hero__actions .btn { flex: 1; padding: 14px 10px; font-size: 15px; }
  .hero__trust { display: none; }
  .hero__tag { left: 12px; right: auto; top: 12px; padding: 8px 13px; border-radius: calc(11px * var(--rs-b, 1)); }
  .hero__tag span { font-size: 12.5px; }
  .float-card { left: 12px; right: auto; bottom: 12px; margin: 0; width: max-content; max-width: calc(100% - 24px); padding: 12px 16px; border-radius: calc(14px * var(--rs-b, 1)); }
  .wordroll, .wordroll__item { height: 40px; line-height: 40px; }
  @keyframes wordroll { 0%,30%{transform:translateY(-80px);} 38%,68%{transform:translateY(-40px);} 76%,100%{transform:translateY(0);} }

  /* usp: stack */
  .usp { grid-template-columns: 1fr; }
  .usp__item + .usp__item { border-left: none; border-top: 1px solid #EEE6DA; }

  /* stats */
  .stats { padding: 18px 12px; gap: 0; border-radius: calc(18px * var(--rs-b, 1)); text-align: center; }
  .stat { flex: 1; }
  .stat + .stat { border-left: 1px solid var(--divider); padding-left: 0; }
  .stat__n { font-size: 20px; letter-spacing: -0.4px; white-space: nowrap; }
  .stat__l { font-size: 11px; margin-top: 3px; }

  /* section heads */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 8px; }
  .sec-head__intro { text-align: left; }
  .sec-title, .h2 { font-size: 26px; letter-spacing: -1px; }

  /* services: 2-col compact cards */
  .services { grid-template-columns: repeat(2, minmax(0,1fr)); grid-auto-rows: auto; gap: 12px; margin-top: 16px; }
  .service { height: 104px; padding: 18px; display: flex; flex-direction: column; align-items: flex-start; }
  .service__icon { width: 42px; height: 42px; border-radius: calc(11px * var(--rs-b, 1)); }
  .service__t { font-size: 13.5px; margin-top: 10px; line-height: 1.2; }
  .service__d, .service__link { display: none; }

  /* carousel: 1 per view */
  .carousel__track { gap: 0; }
  .carousel__item { flex: 0 0 100%; }
  .work { height: 250px; }
  .carousel__viewport { border-radius: calc(18px * var(--rs-b, 1)); }
  .cbtn { width: 38px; height: 38px; }

  /* band */
  .band { flex-direction: column; align-items: stretch; padding: 26px 22px; border-radius: calc(20px * var(--rs-b, 1)); margin-top: 44px; gap: 18px; }
  .band__title { font-size: 26px; }
  .band__text { font-size: 14px; }
  .band__actions { flex-direction: column; }
  .band__actions .btn { width: 100%; }

  /* frame */
  .frame { grid-template-columns: 1fr; gap: 0; padding: 14px; border-radius: calc(20px * var(--rs-b, 1)); }
  .frame__img { height: 240px; }
  .frame__body { padding: 18px 6px 6px; }
  .frame__title { font-size: 26px; }
  .frame__p { font-size: 15px; margin-top: 12px; }

  /* reviews */
  .reviews { padding: 44px 0; }
  .reviews__cta { flex-direction: column; align-items: flex-start; gap: 14px; padding: 20px 22px; }

  /* werkgebied */
  .werkgebied { grid-template-columns: 1fr; gap: 18px; padding: 24px 22px; border-radius: calc(20px * var(--rs-b, 1)); }
  .chip { font-size: 13px; padding: 8px 14px; }
  .wg-grid { grid-template-columns: 1fr !important; }
  .map { min-height: 260px; }
  .werkgebied .sec-title { font-size: 24px !important; }

  /* contact */
  .contact-grid { grid-template-columns: 1fr; gap: 20px; }
  .form-card { padding: 22px; border-radius: calc(16px * var(--rs-b, 1)); }
  .h2.contact-title { font-size: 26px; }

  /* diensten page */
  .page-head { padding-top: 28px; padding-bottom: 0; }
  .page-head__title { font-size: 34px; letter-spacing: -1.4px; }
  .page-head__grid { grid-template-columns: 1fr; gap: 12px; }
  .page-head__intro { font-size: 15px; }
  .svc2 { grid-template-columns: 1fr; gap: 20px; }
  .svc2 .card { padding: 20px; }
  .svc2 .card__t { font-size: 20px; }
  .svc2 .card__d { font-size: 14px; }
  .stack { gap: 12px; }

  /* feature blocks */
  .feature { grid-template-columns: 1fr; gap: 0; padding: 14px; }
  .feature__img { height: 210px; }
  .feature--rev .feature__img { order: 0; }
  .feature--rev .feature__body { order: 0; }
  .feature__body { padding: 18px 6px 6px; }
  .feature__title { font-size: 26px; }

  /* values + steps */
  .values { grid-template-columns: 1fr 1fr; gap: 12px; }
  .steps { grid-template-columns: 1fr; gap: 12px; }
  .quote { padding: 28px 24px; border-radius: calc(20px * var(--rs-b, 1)); }
  .quote__t { font-size: 23px; }
  .quote__mark { font-size: 72px; height: 44px; }

  /* footer */
  .site-footer { border-radius: calc(24px * var(--rs-b, 1)) calc(24px * var(--rs-b, 1)) 0 0; padding: 32px 0 26px; }
  .footer-grid { grid-template-columns: 1fr; gap: 22px; }
  .footer__bar { flex-direction: column; gap: 8px; }

  /* sticky bar */
  .sticky-bar {
    display: flex; gap: 10px; position: fixed; bottom: 0; left: 0; right: 0; z-index: 60;
    background: rgba(243,238,231,0.94); backdrop-filter: blur(8px);
    border-top: 1px solid var(--border); padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  }
  .sticky-bar .btn { flex: 1; min-width: 0; height: 52px; border-radius: calc(14px * var(--rs-b, 1)); padding: 0; }
  body { padding-bottom: 84px; }
}

@media (max-width: 380px) {
  .stat__n { font-size: 18px; }
}

/* =========================================================================
   SCROLL REVEAL (v40) — only where it means something. Active only with
   <html class="reveal-on"> (set pre-paint, and only when motion is allowed).
   1. hero text fades up once on load
   2. section headings rise line by line (JS splits them into .ln-wrap lines)
   3. photos unmask from a smaller rounded frame and settle from a slight zoom
   Cards, rows and body text are simply there.
   ========================================================================= */
.reveal-on .hero > div:first-child { opacity: 0; }
.reveal-on .hero > div:first-child.in-view { animation: revealUp .8s var(--ease-out) both; }
.reveal-on .hero > div:first-child.done { animation: none; opacity: 1; }
@keyframes revealUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.ln-wrap { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ln-wrap > span { display: block; }
.reveal-on .is-lines .ln-wrap > span { transform: translateY(110%); transition: transform .9s var(--ease-out); }
.reveal-on .is-lines .ln-wrap:nth-child(2) > span { transition-delay: .08s; }
.reveal-on .is-lines .ln-wrap:nth-child(3) > span { transition-delay: .16s; }
.reveal-on .is-lines .ln-wrap:nth-child(4) > span { transition-delay: .24s; }
.reveal-on .is-lines.in-view .ln-wrap > span { transform: none; }

.reveal-on .unmask { clip-path: inset(9% 7% 9% 7% round calc(36px * var(--rs-p, 1))); transition: clip-path 1.15s var(--ease-out); }
.reveal-on .unmask img { scale: 1.1; transition: scale 1.5s var(--ease-out); }
.reveal-on .unmask.in-view { clip-path: inset(0 round var(--unmask-r, calc(24px * var(--rs-p, 1)))); }
.reveal-on .unmask.in-view img { scale: 1; }

/* ---- Motion preferences -------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; scroll-behavior: auto; }
  .wordroll__track { transform: translateY(0); }
  .carousel__track { transition: none; }
}

/* Over Niels hero portrait — slight zoom met gezicht op ~1/3 hoogte */
/* Parallax op foto's (behalve 'recent werk'): basiszoom geeft ruimte, JS zet --py.
   Over Niels-portret: gezicht iets hoger (object-position 50%) en lichte zoom. */
.hero__img img, .frame__img img, .feature__img img { transform: scale(1.16) translateY(var(--py, 0px)); will-change: transform; }
.hero__img--portrait img { object-position: center 50%; transform: scale(1.18) translateY(var(--py, 0px)); transform-origin: center 50%; }
@media (prefers-reduced-motion: reduce) {
  .hero__img img, .frame__img img, .feature__img img { transform: scale(1.16); }
  .hero__img--portrait img { transform: scale(1.18); }
}

/* Badkamerrenovatie-foto: geen extra zoom + uitsnede naar onderen (bad/vloer) */
.feature__img--zoomout img { transform: none !important; object-position: center bottom; }

/* ---- Lightbox / galerij (recent werk) ----------------------------------- */
.carousel .work { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 110; display: none; align-items: center; justify-content: center;
  padding: 64px 24px; background: rgba(28,23,19,0.92); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); }
.lightbox.is-open { display: flex; }
.lightbox__fig { margin: 0; max-width: min(1100px, 92vw); display: flex; flex-direction: column; align-items: center; gap: 16px; animation: lbIn .28s var(--ease); }
.lightbox__img { max-width: 100%; max-height: 80vh; width: auto; height: auto; border-radius: calc(20px * var(--rs-p, 1));
  box-shadow: 0 30px 80px -30px rgba(0,0,0,0.75); background: #0d0b09; }
.lightbox__cap { font-weight: 700; font-size: 14px; color: var(--cream);
  background: rgba(247,242,234,0.12); border: 1px solid rgba(247,242,234,0.2); padding: 8px 16px; border-radius: var(--radius-pill); }
.lightbox__close, .lightbox__nav { position: absolute; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1.5px solid rgba(247,242,234,0.3); background: rgba(247,242,234,0.08); color: var(--cream);
  cursor: pointer; transition: background-color .2s var(--ease), border-color .2s var(--ease); }
.lightbox__close:hover, .lightbox__nav:hover { background: var(--copper); border-color: var(--copper); }
.lightbox__close { top: 20px; right: 22px; width: 46px; height: 46px; }
.lightbox__nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox__nav--prev { left: 22px; } .lightbox__nav--next { right: 22px; }
.lightbox__count { position: absolute; left: 0; right: 0; bottom: 24px; text-align: center;
  font-weight: 600; font-size: 13px; letter-spacing: .08em; color: rgba(247,242,234,0.7); }
@keyframes lbIn { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: none; } }
@media (max-width: 820px) {
  .lightbox { padding: 56px 12px; }
  .lightbox__img { max-height: 74vh; }
  .lightbox__close { top: 12px; right: 12px; width: 42px; height: 42px; }
  .lightbox__nav { width: 44px; height: 44px; }
  .lightbox__nav--prev { left: 10px; } .lightbox__nav--next { right: 10px; }
}
@media (prefers-reduced-motion: reduce) { .lightbox__fig { animation: none; } }

/* Lightbox-knoppen: geen blauwe focus-ring; alleen een subtiele koperen ring bij toetsenbord-focus */
.lightbox__close:focus, .lightbox__nav:focus { outline: none; }
.lightbox__close:focus-visible, .lightbox__nav:focus-visible { outline: 2px solid var(--copper); outline-offset: 3px; }

/* ---- Instagram feed (doorlopende strip) --------------------------------- */
.insta__head { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 24px; flex-wrap: wrap; }
.insta__id { display: flex; align-items: center; gap: 16px; }
.insta__logo { width: 50px; height: 50px; border-radius: calc(14px * var(--rs-b, 1)); display: flex; align-items: center; justify-content: center; color: var(--btn-text); flex-shrink: 0;
  background: linear-gradient(135deg, var(--copper-glow), var(--copper)); }
.insta__title { font-weight: 900; font-size: 26px; letter-spacing: -.8px; line-height: 1.1; }
.insta__handle { font-size: 15px; font-weight: 600; color: var(--text-muted); }
.insta__handle:hover { color: var(--copper); }
.insta__btn svg { flex-shrink: 0; }
.insta__strip { overflow: hidden; }
.insta__track { display: flex; gap: 16px; width: max-content; animation: instaScroll 48s linear infinite; }
.insta__strip:hover .insta__track { animation-play-state: paused; }
.insta__post { position: relative; width: 260px; height: 260px; border-radius: calc(18px * var(--rs-p, 1)); overflow: hidden; flex: 0 0 auto; display: block; }
.insta__post img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--ease); }
.insta__post:hover img { transform: scale(1.05); }
.insta__ov { position: absolute; inset: 0; padding: 14px; display: flex; flex-direction: column; justify-content: space-between; color: #fff;
  background: linear-gradient(to top, rgba(28,23,19,.78), rgba(28,23,19,0) 55%); opacity: 0; transition: opacity .25s var(--ease); }
.insta__post:hover .insta__ov { opacity: 1; }
.insta__cam { align-self: flex-end; }
.insta__cap { font-size: 13px; font-weight: 600; line-height: 1.4; }
@keyframes instaScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (max-width: 820px) { .insta__post { width: 200px; height: 200px; } .insta__title { font-size: 22px; } .insta__btn { width: 100%; justify-content: center; } }
@media (prefers-reduced-motion: reduce) { .insta__track { animation: none; } }

/* =========================================================================
   v40 — STIJL-UPDATE (31 okt 2026)
   Rust, ruimte en een paar gerichte momenten. Palet en teksten ongewijzigd.
   Alles hieronder overschrijft de oudere regels hierboven.
   ========================================================================= */

/* ---- Font: één variabel Archivo-bestand (gewicht 400–900, breedte 62–125) */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 400 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url("../fonts/archivo-latin-var.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* metric-matched fallback so the swap doesn't shift the layout */
@font-face { font-family: "Archivo Fallback"; src: local("Arial"); size-adjust: 104%; ascent-override: 88%; descent-override: 21%; }

:root {
  /* contrast: small copper text and primary buttons use copper-dark (AA) */
  --copper-text: #8A5E38;
  --btn-bg: #8A5E38;
  --btn-bg-hover: #74502F;
  --text-meta: #716558;          /* was #8A7E70 (3.4:1) → 4.9:1 on cream */

  /* spacing scale (8px base) */
  --s1: 8px; --s2: 16px; --s3: 24px; --s4: 32px; --s5: 48px; --s6: 64px; --s7: 96px;
  --section: clamp(80px, 9vw, 128px);

  /* radii: 12 (inputs) · 20–24 (cards, photos) · pill */
  --radius-card: calc(20px * var(--rs-b, 1));
  --radius-photo: calc(24px * var(--rs-p, 1));
  --radius-frame: calc(24px * var(--rs-b, 1));

  /* display type: Archivo, a touch wider */
  --display-wdth: 110;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
}
body { font-family: "Archivo", "Archivo Fallback", Helvetica, Arial, sans-serif; }
h1, h2, h3, .sec-title, .h2, .band__title, .frame__title, .feature__title, .page-head__title, .hero__title, .insta__title, .modal__title { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---- Keyboard focus: one copper ring everywhere ------------------------- */
:focus-visible { outline: 2px solid var(--copper-text); outline-offset: 3px; border-radius: 6px; }
.btn:focus-visible, .nav__cta:focus-visible, .cbtn:focus-visible { outline-offset: 4px; border-radius: 999px; }

/* ---- Display typography --------------------------------------------------- */
.hero__title, .sec-title, .h2, .page-head__title, .frame__title, .band__title, .feature__title,
.quote__t, .insta__title, .modal__title, .stat__n, .step__n {
  font-stretch: calc(var(--display-wdth) * 1%);
  font-variation-settings: "wdth" var(--display-wdth);
}
.hero__title { font-size: clamp(40px, 4.2vw + 18px, 84px); line-height: .98; letter-spacing: -.04em; }
.hero__title--page { font-size: clamp(36px, 3.4vw + 16px, 68px); }
.sec-title, .h2 { font-size: clamp(30px, 2.4vw + 14px, 52px); line-height: 1.02; letter-spacing: -.035em; }
.page-head__title { font-size: clamp(36px, 3.6vw + 14px, 72px); line-height: .98; letter-spacing: -.04em; }
.frame__title, .band__title { font-size: clamp(30px, 2.2vw + 14px, 50px); line-height: 1.02; letter-spacing: -.035em; }
.feature__title { font-size: clamp(26px, 1.4vw + 14px, 36px); letter-spacing: -.03em; }
.sec-title { margin-top: 12px; }
.label { color: var(--copper-text); letter-spacing: .16em; }
.stat__n, .step__n, .contact-row__v { font-variant-numeric: tabular-nums; }
.hero__sub { font-size: clamp(16px, .5vw + 14px, 19px); max-width: 52ch; }
.frame__p, .band__text, .page-head__intro { max-width: 58ch; }

/* word roll in em, so it scales with the fluid headline */
.wordroll, .wordroll__item { height: 1.02em; line-height: 1.02em; }
.wordroll__track { animation-name: wordroll-em; }
@keyframes wordroll-em {
  0%, 30%   { transform: translateY(-2.04em); }
  38%, 68%  { transform: translateY(-1.02em); }
  76%, 100% { transform: translateY(0); }
}

/* ---- Buttons (darker copper passes contrast: 5.0:1) ---------------------- */
.btn { transition: background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out), transform .25s var(--ease-out); }
.btn--primary, .nav__cta { background: var(--btn-bg); }
.btn--primary:hover, .nav__cta:hover { background: var(--btn-bg-hover); }
.nav__cta { transition: background-color .25s var(--ease-out); }
.btn--outline:hover { border-color: var(--ink); }
.btn--dark:hover { background: #3A322B; }
.btn--whatsapp:hover { border-color: #b7c6b3; }
/* phone icon gives one short ring on hover */
a[href^="tel:"] svg { transform-origin: 50% 50%; }
@media (hover: hover) {
  a[href^="tel:"]:hover svg { animation: ring .6s var(--ease-out); }
}
@keyframes ring { 0%,100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(11deg); } 60% { transform: rotate(-7deg); } 80% { transform: rotate(3deg); } }
/* phone hero: short label so the button never wraps */
.show-sm { display: none; }

/* ---- Header: slimmer after scrolling, hides going down, returns going up - */
.site-header { transition: transform .4s var(--ease-out), box-shadow .3s var(--ease-out), background-color .3s; background: rgba(243,238,231,.92); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px); }
.nav { transition: padding .35s var(--ease-out); }
.nav__logo svg { transition: height .35s var(--ease-out); }
.site-header.is-condensed { box-shadow: 0 12px 30px -26px rgba(36,31,27,.55); }
.site-header.is-condensed .nav { padding: 11px 0; }
.site-header.is-condensed .nav__logo svg { height: 44px; }
.site-header.is-hidden { transform: translateY(-100%); }

/* ---- Nav: copper drop glides to the hovered / current item -------------- */
.nav__links { position: relative; }
.nav__links a { transition: color .2s var(--ease-out); padding: 6px 0; }
.nav__links a.is-active, .nav__links a:hover { color: var(--copper-text); }
.nav__drop { position: absolute; left: 0; bottom: -10px; width: 9px; height: 12px; opacity: 0; pointer-events: none;
  transition: transform .45s var(--ease-out), opacity .25s; }
.nav__drop.is-on { opacity: 1; }

/* ---- Links: underline draws in ------------------------------------------- */
.service__link, .footer__col a, .insta__handle, .contact-row__v {
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat;
  transition: background-size .35s var(--ease-out), color .2s;
}
.service__link { color: var(--copper-text); padding-bottom: 2px; }
.service__link svg { stroke: currentColor; transition: transform .3s var(--ease-out); }
a.service__link:hover, .footer__col a:hover, .insta__handle:hover, a.contact-row:hover .contact-row__v,
a.service__link:focus-visible, .footer__col a:focus-visible { background-size: 100% 1.5px; }
a.service__link:hover svg { transform: translateX(4px); }
.footer__col a:hover { color: var(--cream); }
.contact-row__icon { transition: background-color .3s var(--ease-out); }
.contact-row__icon svg { transition: stroke .3s var(--ease-out); }
a.contact-row:hover .contact-row__icon { background: var(--ink); }
a.contact-row:hover .contact-row__icon svg { stroke: var(--copper-glow); }

/* ---- Section rhythm -------------------------------------------------------- */
.section { padding-top: var(--section); padding-bottom: 0; }
#contact.section { padding-bottom: var(--section) !important; }
.sec-head { margin-bottom: 0; }
.site-footer { margin-top: var(--section); }

/* hero */
.hero { padding: clamp(40px, 5vw, 80px) 0 clamp(48px, 5vw, 72px); gap: clamp(32px, 4vw, 64px); }
.hero__img { border-radius: var(--radius-photo); --unmask-r: var(--radius-photo); }

/* USP + stats: one open row, no boxes */
.usp { background: none; border: 0; border-radius: 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); margin-top: 0; overflow: visible; }
.usp__item { padding: 22px 28px 22px 0; }
.usp__item + .usp__item { border-left: 1px solid var(--divider); padding-left: 28px; }
.stats { background: none; border: 0; border-radius: 0; padding: var(--s5) 0 0; margin-top: 0; gap: 0; }
.stat { padding-right: 24px; }
.stat + .stat { border-left: 1px solid var(--divider); padding-left: 28px; }
.stat__n { font-size: clamp(40px, 3.2vw + 12px, 68px); letter-spacing: -.04em; }
.stat__l { font-size: 15px; }

/* Diensten (home): an editorial index with a photo preview on hover */
.services--index { display: block; position: relative; margin-top: var(--s5); border-top: 1px solid var(--divider); }
.services--index .service {
  display: grid; grid-template-columns: 52px minmax(0, 1fr) minmax(0, 1.1fr) auto; align-items: center; gap: 24px;
  background: none; border: 0; border-bottom: 1px solid var(--divider); border-radius: 0; padding: 26px 8px; height: auto;
  transition: padding .4s var(--ease-out), background-color .3s;
}
.services--index .service:hover { transform: none; padding-left: 20px; background: rgba(251,249,245,.6); }
.services--index .service__icon { width: 46px; height: 46px; }
.services--index .service__t { margin: 0; font-size: clamp(22px, 1.4vw + 12px, 34px); font-weight: 900; letter-spacing: -.03em; line-height: 1.05;
  font-variation-settings: "wdth" var(--display-wdth); font-stretch: calc(var(--display-wdth) * 1%); transition: color .25s; }
.services--index .service:hover .service__t { color: var(--copper-text); }
.services--index .service__d { margin: 0; max-width: 46ch; }
.services--index .service__link { margin: 0; white-space: nowrap; }
.services--index .service:hover .service__link svg { transform: translateX(4px); }
.svc-preview { position: absolute; top: 0; left: 33%; width: 200px; height: 260px; border-radius: calc(18px * var(--rs-b, 1)); overflow: hidden; pointer-events: none; z-index: 3;
  opacity: 0; transform: translateY(var(--py, 0px)) rotate(-2.5deg) scale(.94); transition: opacity .3s, transform .5s var(--ease-out);
  box-shadow: 0 30px 60px -30px rgba(36,31,27,.6); }
.svc-preview.is-on { opacity: 1; transform: translateY(var(--py, 0px)) rotate(-2.5deg) scale(1); }
.svc-preview img { width: 100%; height: 100%; object-fit: cover; }
@media (hover: none), (max-width: 1080px) { .svc-preview { display: none; } }

/* Recent werk: photos are buttons, slow zoom + caption lift */
.work { display: block; width: 100%; border: 0; padding: 0; font: inherit; color: inherit; border-radius: calc(20px * var(--rs-p, 1)); background: var(--sand); }
.work img { transition: transform .7s var(--ease-out); }
.work__cap { transform: translateY(4px); transition: transform .35s var(--ease-out), background-color .3s; }
@media (hover: hover) {
  .work:hover img, .work:focus-visible img { transform: scale(1.05); }
  .work:hover .work__cap { transform: none; background: rgba(32,27,23,.86); }
}
.carousel__viewport { scroll-snap-type: x mandatory; }
.cbtn { transition: background-color .25s var(--ease-out), border-color .25s, transform .25s var(--ease-out), opacity .2s; }
.cbtn:not(:disabled):hover { transform: scale(1.06); }
.cbtn--prev:not(:disabled):hover { border-color: var(--ink); }

/* Lekkage band: full-width photo, edge to edge */
.band {
  margin-top: var(--section);
  margin-inline: calc(50% - 50vw);
  padding: clamp(64px, 8vw, 120px) calc(50vw - 50%);
  border-radius: 0;
  background: linear-gradient(100deg, rgba(32,27,23,.96) 30%, rgba(32,27,23,.78) 60%, rgba(32,27,23,.45) 100%), url("../images/loodgieter-afvoer-wastafel.webp");
  background-size: cover; background-position: center 40%;
}
.band__text { font-size: 17px; max-width: 52ch; }

/* Over Niels (home): open, no frame */
.frame { background: none; border: 0; border-radius: 0; padding: 0; gap: clamp(32px, 5vw, 80px); grid-template-columns: 1fr 1fr; }
.frame__img { height: clamp(380px, 38vw, 560px); border-radius: var(--radius-photo); box-shadow: none; --unmask-r: var(--radius-photo); }
.frame__body { padding: 0; }

/* Reviews: the one dark section */
.reviews { background: var(--ink); color: var(--cream); margin-top: var(--section); padding: var(--section) 0; }
.reviews .label { color: var(--copper-glow); }
.reviews .sec-title { color: var(--cream); }
.reviews .badge-soft { color: var(--copper-glow); background: transparent; border-color: rgba(221,178,135,.45); }
.review { background: #2C2621; border-color: #3B332C; }
.review__q { color: var(--cream); font-weight: 600; }
.review__name { color: var(--cream); }
.review__city { color: var(--text-on-dark-soft); }
.reviews .cbtn--prev { background: transparent; border-color: rgba(243,238,231,.3); }
.reviews .cbtn--prev svg { stroke: var(--cream); }
.reviews .cbtn--next { background: var(--cream); border-color: var(--cream); }
.reviews .cbtn--next svg { stroke: var(--ink); }
.reviews .dot { background: #4A4038; }
.reviews .dot.is-active { background: var(--copper-glow); }
.reviews__cta { background: transparent; border: 1px solid #3B332C; }
.reviews + .section { padding-top: var(--section); }

/* Werkgebied: open layout */
.werkgebied { background: none; border: 0; border-radius: 0; padding: 0; gap: clamp(32px, 5vw, 80px); }
.wg-grid .werkgebied { padding: 0; }
.chip { transition: background-color .25s, border-color .25s; }

/* Forms: floating labels + soft copper focus ring */
.form-card { border-radius: var(--radius-frame); }
.fld { position: relative; }
.fld .field { padding: 22px 16px 9px; transition: border-color .2s, box-shadow .2s; }
.fld textarea.field { padding-top: 26px; resize: vertical; }
.fld label { position: absolute; left: 17px; top: 16px; font-size: 15px; color: var(--text-muted); pointer-events: none;
  transform-origin: left top; transition: transform .2s var(--ease-out), color .2s, font-size .2s; }
.field:focus { border-color: var(--copper); box-shadow: 0 0 0 4px rgba(168,118,75,.16); }
.fld .field:focus + label, .fld .field:not(:placeholder-shown) + label { transform: translateY(-9px); font-size: 11.5px; font-weight: 700; color: var(--copper-text); letter-spacing: .02em; }

/* Diensten page */
.feature { border-radius: var(--radius-frame); }
.feature__img { border-radius: calc(20px * var(--rs-p, 1)); --unmask-r: calc(20px * var(--rs-p, 1)); }
[id] { scroll-margin-top: 110px; }

/* Over Niels: values open, quote fills in, steps stack */
.values { gap: 0; border-top: 1px solid var(--divider); }
.value { background: none; border: 0; border-radius: 0; padding: 28px 28px 8px 0; }
.value + .value { border-left: 1px solid var(--divider); padding-left: 28px; }
.quote { border-radius: 0; margin-inline: calc(50% - 50vw); padding: clamp(72px, 9vw, 128px) calc(50vw - 50%); }
.quote__t { font-size: clamp(26px, 2.4vw + 12px, 52px); line-height: 1.15; letter-spacing: -.03em; max-width: 20ch; }
.quote__t .w { transition: opacity .3s linear; }
.reveal-on .quote__t .w { opacity: .26; }
.reveal-on .quote__t .w.on { opacity: 1; }
.werkwijze { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.werkwijze__head { position: sticky; top: 140px; }
.werkwijze .steps { display: flex; flex-direction: column; gap: 18px; margin-top: 0; padding-bottom: 24px; }
.werkwijze .step { position: sticky; background: var(--cream-card); box-shadow: 0 -14px 34px -26px rgba(36,31,27,.45); display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: baseline; padding: 32px 34px; min-height: 180px; }
.werkwijze .step:nth-child(1) { top: 120px; }
.werkwijze .step:nth-child(2) { top: 140px; }
.werkwijze .step:nth-child(3) { top: 160px; }
.werkwijze .step__n { grid-row: span 2; font-size: clamp(40px, 3vw + 10px, 64px); line-height: 1; }
.werkwijze .step__t { margin-top: 0; font-size: 22px; }

/* Instagram: slower, with a pause button */
.insta__strip { position: relative; }
.insta__track { animation-duration: 80s; }
.insta__strip.is-paused .insta__track { animation-play-state: paused; }
.insta__pause { position: absolute; right: 12px; bottom: 12px; z-index: 2; width: 40px; height: 40px; border-radius: 50%; border: 0;
  background: rgba(32,27,23,.72); color: var(--cream); display: grid; place-items: center; cursor: pointer; transition: background-color .2s; }
.insta__pause:hover { background: var(--ink); }
.insta__pause .i-play { display: none; }
.insta__strip.is-paused .insta__pause .i-pause { display: none; }
.insta__strip.is-paused .insta__pause .i-play { display: block; }
.insta__post:focus-visible .insta__ov { opacity: 1; }

/* small badge contrast */
.badge-soft { color: var(--copper-text); border-color: #C9A27C; }

/* ---- Parallax: softer, and in CSS where the browser supports it --------- */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero__img img, .frame__img img, .feature__img:not(.feature__img--zoomout) img {
      animation: niels-px linear both; animation-timeline: view();
    }
  }
}
@keyframes niels-px { from { translate: 0 12px; } to { translate: 0 -12px; } }

/* ---- Page transitions: short cross-fade, header stays put ----------------- */
@view-transition { navigation: auto; }
.site-header { view-transition-name: site-header; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; }

/* ---- Phone ------------------------------------------------------------------ */
@media (max-width: 820px) {
  :root { --display-wdth: 106; --section: 72px; }
  .hero__title { font-size: clamp(36px, 8.6vw, 46px); letter-spacing: -.035em; }
  .hero__title--page { font-size: clamp(32px, 8vw, 40px); }
  .sec-title, .h2 { font-size: clamp(28px, 7vw, 34px); }
  .page-head__title { font-size: clamp(32px, 8.4vw, 42px); }
  .frame__title, .band__title { font-size: clamp(28px, 7vw, 34px); }
  .hide-sm { display: none; }
  .show-sm { display: inline; }
  .hero { padding: 24px 0 32px; }
  .hero__img { height: 280px; }
  .site-header.is-condensed .nav { padding: 10px 0; }
  .site-header.is-condensed .nav__logo svg { height: 36px; }

  .usp__item { padding: 16px 0; }
  .usp__item + .usp__item { border-left: 0; padding-left: 0; border-top: 1px solid var(--divider); }
  .stats { padding: 28px 0 0; text-align: left; display: grid; grid-template-columns: repeat(3, 1fr); }
  .stat { padding-right: 8px; }
  .stat + .stat { padding-left: 14px; }
  .stat__n { font-size: clamp(28px, 8vw, 36px); letter-spacing: -.03em; white-space: nowrap; }
  .stat__l { font-size: 12.5px; }

  .services--index { margin-top: 24px; }
  .services--index .service { grid-template-columns: 42px minmax(0, 1fr) auto; gap: 14px; padding: 18px 2px; height: auto; flex-direction: initial; }
  .services--index .service:hover { padding-left: 2px; }
  .services--index .service__icon { width: 42px; height: 42px; }
  .services--index .service__t { font-size: 21px; }
  .services--index .service__d { display: none; }
  .services--index .service__link { display: inline-flex; font-size: 0; gap: 0; }
  .services--index .service__link svg { width: 18px; height: 18px; }

  .band { margin-top: var(--section); padding: 56px calc(50vw - 50%); border-radius: 0; flex-direction: column; align-items: stretch;
    background: linear-gradient(180deg, rgba(32,27,23,.9), rgba(32,27,23,.97)), url("../images/loodgieter-afvoer-wastafel.webp"); background-size: cover; }
  .frame { grid-template-columns: 1fr; gap: 24px; padding: 0; }
  .frame__img { height: 300px; }
  .frame__body { padding: 0; }
  .reviews { padding: 64px 0; }
  .werkgebied { gap: 24px; padding: 0; }
  .values { grid-template-columns: 1fr 1fr; }
  .value { padding: 20px 14px 4px 0; }
  .value + .value { padding-left: 0; border-left: 0; }
  .value:nth-child(2n) { border-left: 1px solid var(--divider); padding-left: 14px; }
  .value:nth-child(n+3) { border-top: 1px solid var(--divider); }
  .quote { padding: 56px calc(50vw - 50%); }
  .werkwijze { grid-template-columns: 1fr; gap: 24px; }
  .werkwijze__head { position: static; }
  .werkwijze .step { padding: 24px 22px; min-height: 0; column-gap: 16px; }
  .werkwijze .step:nth-child(1) { top: 84px; } .werkwijze .step:nth-child(2) { top: 100px; } .werkwijze .step:nth-child(3) { top: 116px; }
  .werkwijze .step__t { font-size: 19px; }
  .insta__pause { right: 8px; bottom: 8px; }
}

/* ---- Reduced motion: everything calm, everything visible ------------------ */
@media (prefers-reduced-motion: reduce) {
  .site-header, .nav, .nav__logo svg, .nav__drop, .work img, .svc-preview, .services--index .service, .btn, .cbtn { transition: none !important; }
  .site-header.is-hidden { transform: none; }
  @view-transition { navigation: none; }
  .werkwijze .step { position: static; }
  .svc-preview { display: none; }
}

/* =========================================================================
   v41 — HOMEPAGE RONDE 2 (31 okt 2026)
   Hero past op één scherm + intro-animatie (3 varianten), USP's als intro van
   Diensten, cijfers in "Over Niels", lekkage-sectie (3 varianten),
   Over Niels. Gekozen varianten (class op <html>): hero-c (koperen veeg),
   band-b (licht), about-a (collage).
   ========================================================================= */

/* ---- Hero: fits one screen on desktop, calm space around the claims ------ */
@media (min-width: 821px) {
  .hero { min-height: calc(100svh - 97px); align-items: center; padding-block: clamp(24px, 4vh, 56px); }
  .hero__img, .over-niels-hero .hero__img { height: clamp(380px, calc(100svh - 97px - 112px), 640px) !important; }
  .hero__actions { margin-top: clamp(28px, 4vh, 40px); }
  .hero__trust { margin-top: clamp(36px, 6vh, 64px); padding-top: 22px; border-top: 1px solid var(--divider); gap: 12px 32px; }
}
.hero__trust span { color: var(--text-body-2); }
/* the old whole-column fade is replaced by the intro below */
.reveal-on .hero > div:first-child { opacity: 1 !important; animation: none !important; }

/* ---- Hero intro: shared parts ------------------------------------------------ */
.hl-line { display: block; }
.hl-inner { display: inline-block; position: relative; }
.hw { display: inline-block; }
.reveal-on .hero .hi { opacity: 0; }
.reveal-on .hero.hero-go .hi { animation: hFade .9s var(--ease-out) both; animation-delay: var(--d, .5s); }
.reveal-on .hero .float-card, .reveal-on .hero .hero__tag { opacity: 0; }
.reveal-on .hero.hero-go .float-card { animation: hPop .8s var(--ease-out) 1.05s both; }
.reveal-on .hero.hero-go .hero__tag { animation: hPop .8s var(--ease-out) 1.2s both; }
@keyframes hFade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes hPop { from { opacity: 0; transform: translateY(14px) scale(.96); } to { opacity: 1; transform: none; } }



/* C · Koperen veeg: a copper bar sweeps over each line and leaves the text behind */
.hero-c .hl-inner::after { content: ""; position: absolute; inset: .04em -.05em .02em; background: var(--copper); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.reveal-on.hero-c .hero .hl-inner .hw { opacity: 0; }
.reveal-on.hero-c .hero.hero-go .hl-inner::after { animation: hWipe 1.1s cubic-bezier(.7, 0, .2, 1) both; animation-delay: calc(.1s + var(--i) * .15s); }
.reveal-on.hero-c .hero.hero-go .hl-inner .hw { animation: hShow 1.1s linear both; animation-delay: calc(.1s + var(--i) * .15s); }
@keyframes hWipe { 0% { transform: scaleX(0); transform-origin: left; } 48% { transform: scaleX(1); transform-origin: left; } 52% { transform: scaleX(1); transform-origin: right; } 100% { transform: scaleX(0); transform-origin: right; } }
@keyframes hShow { 0%, 49% { opacity: 0; } 50%, 100% { opacity: 1; } }

/* ---- USP's: now the calm intro of the Diensten section -------------------- */
.usp--intro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 4vw, 64px); border: 0 !important; margin: 0 0 var(--section); padding: 0; background: none; }
.usp--intro .usp__item { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; padding: 32px 0 0 !important; border: 0 !important; border-top: 1px solid var(--divider) !important; }
.usp--intro .usp__item > svg { width: 30px; height: 30px; stroke: var(--copper); }
.usp--intro .usp__t { font-size: clamp(21px, .8vw + 13px, 27px); font-weight: 900; letter-spacing: -.025em; line-height: 1.1;
  font-variation-settings: "wdth" var(--display-wdth); font-stretch: calc(var(--display-wdth) * 1%); }
.usp--intro .usp__s { font-size: 15.5px; color: var(--text-muted); margin-top: 6px; }

/* ---- Diensten preview photo: straight ------------------------------------ */
.svc-preview { transform: translateY(var(--py, 0px)) scale(.94); }
.svc-preview.is-on { transform: translateY(var(--py, 0px)) scale(1); }

/* ---- Over Niels (home) ------------------------------------------------------ */
.about__grid { display: grid; gap: 0 clamp(32px, 6vw, 96px); }
.about__img { border-radius: var(--radius-photo); overflow: hidden; --unmask-r: var(--radius-photo); }
.about__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.about__title { margin-top: 12px; }
.about__body .frame__p:first-child { margin-top: 0; }
.about__body .service__link { margin-top: 24px; font-size: 16px; display: inline-flex; }
.about__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; padding: 0; margin: 0; background: none; border: 0; }
.about__stats .stat { padding: 22px 16px 0 0; border: 0 !important; border-top: 1.5px solid var(--ink) !important; margin: 0; }
.about__stats .stat + .stat { padding-left: 0; margin-left: 0; }
.about__stats .stat__n { color: var(--copper); font-size: clamp(44px, 3.4vw + 12px, 80px); line-height: .95; letter-spacing: -.045em; }
.about__stats .stat__l { font-size: 14.5px; color: var(--text-muted); margin-top: 10px; font-weight: 600; }
.about__pill { display: none; }

/* A · Collage: tall photo with a second photo overlapping, numbers under the text */
.about-a .about__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "media head" "media body" "media stats"; align-items: start; }
.about-a .about__media { grid-area: media; position: relative; padding: 0 clamp(32px, 4vw, 64px) clamp(40px, 5vw, 72px) 0; }
.about-a .about__img--main { aspect-ratio: 4 / 5; }
.about-a .about__img--small { position: absolute; right: 0; bottom: 0; width: 44%; aspect-ratio: 4 / 5; border: 8px solid var(--cream); border-radius: calc(26px * var(--rs-p, 1)); box-shadow: 0 30px 60px -30px rgba(36,31,27,.55); }
.about-a .about__img--small img { object-position: 62% center; }
.about-a .about__head { grid-area: head; padding-top: clamp(0px, 3vw, 40px); }
.about-a .about__body { grid-area: body; margin-top: 24px; }
.about-a .about__stats { grid-area: stats; margin-top: clamp(40px, 5vw, 64px); }


/* ---- Lekkage section: three alternatives ------------------------------------ */
.band { display: block; margin-inline: 0; padding: 0; border-radius: 0; background: none; margin-top: var(--section); }
.band__number { display: none; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: -.04em; line-height: .95; white-space: nowrap;
  font-variation-settings: "wdth" var(--display-wdth); font-stretch: calc(var(--display-wdth) * 1%); transition: color .25s var(--ease-out); }
.band__media { display: none; }
.band__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.band__actions { display: flex; flex-direction: row; flex-wrap: wrap; gap: 12px; }


/* B · Licht: calm sand panel, the phone number is the hero */
.band-b .band { background: var(--sand); border-radius: var(--radius-frame); padding: clamp(32px, 5vw, 72px); }
.band-b .band__content { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "copy number" "copy actions"; gap: 24px clamp(32px, 5vw, 80px); align-items: end; }
.band-b .band__copy { grid-area: copy; }
.band-b .band__number { display: block; grid-area: number; color: var(--ink); font-size: clamp(36px, 3.4vw + 8px, 64px); }
.band-b .band__number:hover { color: var(--copper-text); }
.band-b .band__actions { grid-area: actions; }
.band-b .band__title { color: var(--ink); }
.band-b .band__text { color: var(--text-body); }
.band-b .band__label { color: var(--copper-text); }
.band-b .band__label .pulse { background: var(--copper); box-shadow: 0 0 0 4px rgba(168,118,75,.18); }
.band-b .band__actions .btn--primary { display: none; }


@media (max-width: 820px) {
  .usp--intro { grid-template-columns: 1fr; gap: 0; }
  .usp--intro .usp__item { flex-direction: row; align-items: center; gap: 16px; padding: 20px 0 !important; }
  .usp--intro .usp__item > svg { width: 26px; height: 26px; flex-shrink: 0; }

  .about-a .about__grid { grid-template-columns: 1fr; grid-template-areas: "head" "media" "body" "stats"; }
  .about-a .about__head { padding-top: 0; }
  .about-a .about__media { margin-top: 24px; padding: 0 24px 40px 0; }
  .about__body { margin-top: 24px !important; }
  .about__stats .stat__n { font-size: clamp(32px, 9vw, 44px); }
  .about__stats .stat__l { font-size: 12.5px; }

  .band-b .band { padding: 28px 22px; }
  .band-b .band__content { grid-template-columns: 1fr; grid-template-areas: "copy" "number" "actions"; }
  .band__actions .btn { flex: 1 1 100%; }
}
/* v41 fixes */
.about-a .about__grid { grid-template-rows: auto auto 1fr; }
.about-a .about__stats { align-self: start; }
.about-a .about__img--small img { object-position: center; }
@media (max-width: 820px) { .about-a .about__grid { grid-template-rows: none; } }

/* =========================================================================
   v42 — hero fits every laptop/desktop window (sizes follow screen height too)
   ========================================================================= */
@media (min-width: 821px) {
  .hero { padding-block: clamp(16px, 3.5vh, 56px); }
  .hero__title { font-size: clamp(36px, min(4.2vw + 18px, 8vh), 84px); }
  .hero__title--page { font-size: clamp(32px, min(3.4vw + 16px, 6.8vh), 68px); }
  .hero__badge { margin-bottom: 0; }
  .hero__title { margin-top: clamp(12px, 2.4vh, 24px); }
  .hero__sub { margin-top: clamp(12px, 2.4vh, 24px); font-size: clamp(15px, min(.5vw + 14px, 2.3vh), 19px); }
  .hero__actions { margin-top: clamp(18px, 3.6vh, 40px); }
  .hero__trust { margin-top: clamp(20px, 5vh, 64px); padding-top: clamp(14px, 2.2vh, 22px); }
  .hero__img, .over-niels-hero .hero__img { height: clamp(320px, calc(100svh - 97px - 2 * clamp(16px, 3.5vh, 56px) - 24px), 640px) !important; }
}
@media (min-width: 821px) and (max-width: 1100px) {
  .hero { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 32px; }
  .hero__trust { gap: 8px 20px; }
  .hero__trust span { font-size: 13px; }
  .hero__actions .btn { padding: 14px 20px; font-size: 15px; }
}

/* ---- v42 spacing: one rhythm on every page --------------------------------
   between sections: --section (128 → 72 on phones)
   page intro → first block: 64 (40 phones) · stacked related blocks: 24 (16 phones) */
#contact.section { padding-bottom: 0 !important; }
.sec-first { padding-top: clamp(40px, 5vw, 64px); }
.sec-stack { padding-top: 24px; }
.page-head { padding-bottom: 0; }
.quote { margin-top: 0; }
@media (max-width: 820px) { .sec-stack { padding-top: 16px; } }
.sec-stack { padding-top: 34px; }
@media (max-width: 820px) { .sec-stack { padding-top: 26px; } .over-hero + .sec-first, .sec-first { padding-top: 48px; } }

/* ---- v42 mobile menu: full-screen panel ----------------------------------- */
.mobile-menu, .mobile-menu.is-open { display: none; }
@media (max-width: 820px) {
  /* burger → cross */
  .nav__toggle { width: 46px; height: 46px; border-radius: 999px; border: 1px solid var(--border); background: var(--cream-card); display: grid; place-items: center; cursor: pointer; transition: background-color .3s var(--ease-out), border-color .3s; }
  .burger { position: relative; width: 18px; height: 10px; display: block; }
  .burger span { position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background: var(--ink); transition: transform .45s var(--ease-out), top .45s var(--ease-out), background-color .3s; }
  .burger span:first-child { top: 0; }
  .burger span:last-child { top: 8px; }
  .menu-open .nav__toggle { background: var(--ink); border-color: var(--ink); }
  .menu-open .burger span { background: var(--cream); top: 4px; }
  .menu-open .burger span:first-child { transform: rotate(45deg); }
  .menu-open .burger span:last-child { transform: rotate(-45deg); }

  .menu-open { overflow: hidden; } /* root only: overflow on body breaks the sticky header */
  .menu-open .site-header { transform: none !important; background: var(--cream); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .menu-open .sticky-bar { opacity: 0; pointer-events: none; }
  .sticky-bar { transition: opacity .3s; }

  .mobile-menu { display: flex; position: fixed; inset: 0; z-index: 49; flex-direction: column; justify-content: space-between;
    background: var(--cream); padding: 96px max(20px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    overflow-y: auto; overscroll-behavior: contain;
    clip-path: inset(0 0 100% 0); transition: clip-path .55s cubic-bezier(.7, 0, .2, 1); }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu.is-open { display: flex; clip-path: inset(0 0 0 0); }

  .mm__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--divider); }
  .mm__list li { overflow: hidden; border-bottom: 1px solid var(--divider); }
  .mm__link { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 2px 16px; color: var(--ink);
    font-weight: 900; font-size: clamp(34px, 10.5vw, 46px); line-height: 1; letter-spacing: -.04em;
    font-variation-settings: "wdth" var(--display-wdth); font-stretch: calc(var(--display-wdth) * 1%);
    transform: translateY(110%); transition: transform .7s var(--ease-out), color .2s; transition-delay: 0s; }
  .mobile-menu.is-open .mm__link { transform: none; transition-delay: calc(.18s + var(--n) * .06s), 0s; }
  .mm__link .mm__arrow { color: var(--copper); flex-shrink: 0; transition: transform .3s var(--ease-out); }
  .mm__link:active .mm__arrow, .mm__link:hover .mm__arrow { transform: translateX(4px); }
  .mm__link.is-active { color: var(--copper-text); }
  .mm__link.is-active span::after { content: ""; display: inline-block; width: .2em; height: .26em; margin-left: .12em; vertical-align: .55em;
    background: var(--copper); clip-path: path("M5 0C5 0 10 7 10 10.5A5 5 0 0 1 0 10.5C0 7 5 0 5 0Z"); width: 10px; height: 16px; }

  .mm__foot { margin-top: 40px; display: flex; flex-direction: column; gap: 14px; opacity: 0; transform: translateY(12px); transition: opacity .5s var(--ease-out), transform .5s var(--ease-out); }
  .mobile-menu.is-open .mm__foot { opacity: 1; transform: none; transition-delay: .45s; }
  .mm__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 4px; }
  .mm__actions .btn { height: 54px; padding: 0 10px; border-radius: calc(14px * var(--rs-b, 1)); justify-content: center; }
  .mm__mail { font-weight: 700; font-size: 16px; color: var(--ink); margin-top: 6px; }
  .mm__meta { font-size: 14px; color: var(--text-muted); margin: 0; }
}
@media (max-width: 820px) and (prefers-reduced-motion: reduce) {
  .mobile-menu, .mm__link, .mm__foot { transition: none !important; }
  .mm__link { transform: none; }
  .mm__foot { opacity: 1; transform: none; }
}

/* ==== v44 menubalk: schuifpil (Melvin koos E) ==================== */
.nav-e .nav__drop { display: none; }
.nav-e .nav__links { gap: 0; padding: 5px; background: var(--sand); border: 1px solid var(--border-sand); border-radius: 999px; }
.nav-e .nav__links a { position: relative; z-index: 1; padding: 9px 20px; }
.nav-e .nav__links::before { content: ""; position: absolute; top: 5px; bottom: 5px; left: 0; width: var(--pill-w, 0); transform: translateX(var(--pill-x, 0)); border-radius: 999px;
  background: var(--cream-card); box-shadow: 0 6px 16px -10px rgba(36,31,27,.45), 0 0 0 1px var(--border); opacity: 0; transition: transform .45s var(--ease-out), width .45s var(--ease-out), opacity .25s; }
.nav-e .nav__links.pill-on::before { opacity: 1; }
.nav-e .nav__links a:hover, .nav-e .nav__links a.is-active { color: var(--ink); }
.nav-e .nav__links a.is-active { color: var(--copper-text); }


/* ==== v45 Diensten: jump bar, CTAs, cards, cross-fade, FAQ ================ */
/* jump bar: sticky until the end of the services, sits under the header when that is visible */
.svc-area { position: relative; }
.svc-jump { position: sticky; top: 0; z-index: 40; margin-top: clamp(28px, 3.5vw, 44px); padding: 12px 0;
  background: rgba(243,238,231,.94); -webkit-backdrop-filter: saturate(1.2) blur(10px); backdrop-filter: saturate(1.2) blur(10px);
  border-bottom: 1px solid transparent; transition: top .4s var(--ease-out), border-color .3s; }
html:has(.site-header:not(.is-hidden)) .svc-jump { top: var(--hdr-h, 0px); }
.svc-jump.is-stuck { border-bottom-color: var(--border-soft); }
.svc-jump__row { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 2px 0; margin: -2px 0; }
.svc-jump__row::-webkit-scrollbar { display: none; }
.svc-jump a { flex: none; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); background: var(--cream-card); font-size: 14px; font-weight: 600; color: var(--text-body);
  transition: background-color .25s var(--ease-out), color .2s, border-color .25s; white-space: nowrap; }
.svc-jump a:hover { border-color: var(--copper-light); color: var(--ink); }
.svc-jump a.is-on { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.svc-area > section.sec-first { padding-top: 20px; }
.feature[id], .card[id], #vragen, #contact { scroll-margin-top: 150px; }

/* per-service actions */
.feature__cta { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 20px; margin-top: 26px; }
.feature__cta .btn { padding: 13px 22px; font-size: 15px; }
.feature__tel { font-size: 14.5px; font-weight: 600; color: var(--text-muted); background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease-out), color .2s; }
.feature__tel:hover { color: var(--copper-text); background-size: 100% 1.5px; }

/* the four smaller services: photo, bullets, link */
.svc2 .card { display: flex; flex-direction: column; padding: 14px 14px 28px; }
.svc2 .card > :not(.card__img) { margin-left: 18px; margin-right: 18px; }
.card__img { border-radius: calc(14px * var(--rs-p, 1)); overflow: hidden; aspect-ratio: 16 / 9; margin-bottom: 22px; background: var(--sand); }
.card__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease-out); }
.svc2 .card:hover .card__img img { transform: scale(1.04); }
.svc2 .card .bullets { margin-top: 14px; }
.card__cta { margin-top: auto; padding-top: 20px; display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-weight: 700; font-size: 14.5px; color: var(--copper-text); }
.card__cta svg { transition: transform .3s var(--ease-out); }
.card__cta:hover svg { transform: translateX(4px); }

/* bathroom photo cross-fade */
.xfade { position: relative; }
.xfade .xf { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 55%; opacity: 0; transition: opacity 1.1s var(--ease-out); }
.xfade .xf:first-child { position: relative; object-position: center bottom; }
.xfade .xf.is-on { opacity: 1; }
.xf__dots { position: absolute; left: 16px; bottom: 16px; display: flex; gap: 6px; padding: 7px 9px; border-radius: 999px; background: rgba(36,31,27,.45); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); z-index: 2; }
.xf__dots button { width: 8px; height: 8px; border-radius: 50%; border: 0; padding: 0; background: rgba(255,255,255,.55); cursor: pointer; transition: background-color .3s, width .3s var(--ease-out); }
.xf__dots button[aria-pressed="true"] { background: #fff; width: 20px; border-radius: 4px; }
.xf__dots button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* FAQ */
.faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__head { position: sticky; top: 120px; }
.faq__intro { font-size: 16.5px; line-height: 1.6; color: var(--text-body-2); margin: 14px 0 24px; max-width: 380px; }
.faq__list { border-top: 1px solid var(--divider); }
.faq__item { border-bottom: 1px solid var(--divider); }
.faq__item summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 0; cursor: pointer;
  font-weight: 700; font-size: clamp(17px, 1.3vw, 19px); color: var(--ink); transition: color .2s; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { color: var(--copper-text); }
.faq__item summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; border-radius: 6px; }
.faq__icon { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--border); background: var(--cream-card); transition: background-color .3s, border-color .3s, transform .4s var(--ease-out); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; margin: -1px 0 0 -6px; border-radius: 2px; background: var(--ink); transition: transform .4s var(--ease-out), background-color .3s; }
.faq__icon::after { transform: rotate(90deg); }
.faq__item[open] .faq__icon { background: var(--ink); border-color: var(--ink); transform: rotate(180deg); }
.faq__item[open] .faq__icon::before, .faq__item[open] .faq__icon::after { background: var(--cream); }
.faq__item[open] .faq__icon::after { transform: rotate(0deg); }
.faq__a p { margin: 0; padding: 0 56px 24px 0; font-size: 16px; line-height: 1.65; color: var(--text-body-2); max-width: 620px; }
.faq__item[open] .faq__a { animation: faqIn .45s var(--ease-out); }
@keyframes faqIn { from { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 820px) {
  .svc-jump { margin-top: 24px; padding: 10px 0; }
  .svc-jump a { font-size: 13.5px; padding: 8px 14px; }
  .svc-jump .container { padding-right: 0; }
  .feature__cta { margin-top: 22px; }
  .feature__cta .btn { width: 100%; justify-content: center; }
  .svc2 .card { padding: 10px 10px 24px; }
  .svc2 .card > :not(.card__img) { margin-left: 14px; margin-right: 14px; }
  .faq__grid { grid-template-columns: 1fr; gap: 28px; }
  .faq__head { position: static; }
  .faq__a p { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .svc-jump, .xfade .xf, .faq__icon, .faq__icon::before, .faq__icon::after, .card__img img { transition: none !important; }
  .faq__item[open] .faq__a { animation: none; }
}

/* ==== v47 Over Niels quote (Melvin koos A: Redactioneel) ============== */
/* shared */
.quote-sec .quote { background: none; border-radius: 0; margin: 0; padding: 0; }
.quote-sec blockquote { margin: 0; }
.quote-sec .quote__photo { display: none; }
.quote-sec .quote__mark { font-weight: 900; line-height: .8; height: auto; overflow: visible; font-variation-settings: "wdth" 110; }
.quote-sec .quote__t { font-weight: 800; font-variation-settings: "wdth" 110; color: var(--ink); margin: 0; }
.quote-sec .quote__by { display: flex; align-items: center; gap: 14px; margin-top: clamp(24px, 3vw, 40px); font-size: 15px; color: var(--ink); font-weight: 400; }
.quote-sec .quote__by b { display: block; font-weight: 800; font-size: 16px; }
.quote__role { display: block; font-size: 13.5px; color: var(--text-muted); margin-top: 2px; }
.quote__avatar { width: 52px; height: 52px; border-radius: 50%; overflow: hidden; flex: none; box-shadow: 0 0 0 3px var(--cream), 0 0 0 4px var(--copper-light); }
.quote__avatar img { width: 100%; height: 100%; object-fit: cover; }

/* A: Redactioneel. Open cream, centred, big copper mark, thin rules */
.quote-a .quote-sec .quote__body { text-align: center; max-width: 1040px; margin: 0 auto; padding: clamp(48px, 6vw, 88px) 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); position: relative; }
.quote-a .quote-sec .quote__mark { font-size: clamp(120px, 14vw, 220px); color: var(--copper-light); height: .42em; margin-bottom: clamp(12px, 2vw, 28px); }
.quote-a .quote-sec .quote__t { font-size: clamp(30px, 2.6vw + 14px, 60px); line-height: 1.1; letter-spacing: -.035em; max-width: 21ch; margin: 0 auto; }
.quote-a .quote-sec .quote__t .w.hl { color: var(--copper-text); }
.quote-a .quote-sec .quote__by { justify-content: center; text-align: left; }


/* ==== v47 Over Niels: werkwijze timeline ================================ */
.werkwijze__intro { font-size: 16.5px; line-height: 1.6; color: var(--text-body-2); margin-top: 14px; max-width: 340px; }
.tl { position: relative; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(36px, 4.5vw, 64px); --tl-p: 0; }
.tl__line { position: absolute; left: 27px; top: 28px; bottom: 28px; width: 2px; background: var(--divider); border-radius: 2px; overflow: hidden; }
.tl__fill { position: absolute; inset: 0; background: var(--copper); transform-origin: top; transform: scaleY(var(--tl-p)); }
.tl__item { position: relative; display: grid; grid-template-columns: 56px 1fr; column-gap: clamp(20px, 2.5vw, 36px); align-items: start; }
.tl__dot { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--cream); border: 2px solid var(--divider);
  font-weight: 900; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--text-meta); position: relative; z-index: 1;
  transition: background-color .45s var(--ease-out), border-color .45s, color .45s, transform .45s var(--ease-out); }
.tl__item.is-on .tl__dot { background: var(--ink); border-color: var(--ink); color: var(--cream); transform: scale(1.04); }
.tl__body { padding-top: 10px; }
.tl__t { font-weight: 800; font-size: clamp(22px, 1.2vw + 12px, 30px); letter-spacing: -.02em; font-variation-settings: "wdth" 106; margin: 0; }
.tl__d { font-size: 16px; line-height: 1.65; color: var(--text-body-2); margin: 8px 0 0; max-width: 46ch; }
html:not(.reveal-on) .tl { --tl-p: 1; }
html:not(.reveal-on) .tl__item .tl__dot { background: var(--ink); border-color: var(--ink); color: var(--cream); }

@media (max-width: 820px) {
  .tl__line { left: 21px; top: 22px; bottom: 22px; }
  .tl__item { grid-template-columns: 44px 1fr; column-gap: 18px; }
  .tl__dot { width: 44px; height: 44px; font-size: 14px; }
  .tl__body { padding-top: 6px; }
}
@media (prefers-reduced-motion: reduce) { .tl__dot { transition: none; } }

/* ==== v48 Contact: form row, tip, next steps, own map, privacy ========== */
.fld-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fld--select select.field { appearance: none; -webkit-appearance: none; padding-right: 40px; cursor: pointer; color: transparent;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238A5E38' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; }
.fld--select select.field.has-value { color: var(--ink); }
.fld--select select.field option { color: var(--ink); }
.fld--select select.field:focus + label, .fld--select select.field.has-value + label { transform: translateY(-9px); font-size: 11.5px; font-weight: 700; color: var(--copper-text); letter-spacing: .02em; }
.fld--select select.field:not(.has-value):not(:focus) + label { transform: none; font-size: 15px; font-weight: 400; color: var(--text-muted); letter-spacing: 0; }
.form-tip { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: calc(12px * var(--rs-b, 1)); background: var(--wa-bg); border: 1px solid var(--wa-border); color: var(--wa-text); font-size: 13.5px; font-weight: 600; line-height: 1.45; transition: background-color .2s; }
.form-tip svg { flex: none; margin-top: 1px; }
.form-tip:hover { background: #dfe6dc; }
.form-note a { color: var(--copper-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.footer a[href="privacy.html"] { color: inherit; }
.footer a[href="privacy.html"]:hover { color: var(--copper-glow); }

.next { padding: 6px 4px 0; }
.next__t { font-weight: 800; font-size: 17px; margin: 0 0 14px; }
.next__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.next__list li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.5; color: var(--text-body-2); }
.next__list b { color: var(--ink); font-weight: 700; }
.next__n { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--ink); color: var(--cream); font-weight: 800; font-size: 13px; }

.chips__more { align-self: center; font-weight: 600; font-size: 15px; color: var(--text-muted); padding: 0 4px; }

.wgmap { position: relative; border-radius: calc(24px * var(--rs-p, 1)); overflow: hidden; min-height: 380px; background: var(--cream-card); border: 1px solid var(--border); }
.wgmap__svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wgmap__sea { fill: var(--sand); }
.wgmap__coast { fill: none; stroke: var(--border-strong); stroke-width: 2; stroke-linejoin: round; }
.wgmap__sealabel { font-size: 22px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; fill: var(--copper-light); }
.wgmap__ring { fill: rgba(168,118,75,.07); stroke: var(--copper-light); stroke-width: 2; stroke-dasharray: 5 7; }
.wgmap__ring--2 { fill: rgba(168,118,75,.05); stroke: var(--copper-light); }
.mk circle { fill: var(--ink); stroke: var(--cream-card); stroke-width: 4; r: 8; }
.mk text { font-size: 28px; font-weight: 700; fill: var(--ink); paint-order: stroke; stroke: var(--cream-card); stroke-width: 8px; stroke-linejoin: round; }
.mk--home circle { fill: var(--copper); r: 14; stroke-width: 5; }
.mk--home text { font-size: 36px; font-weight: 900; }
.wgmap__link { position: absolute; right: 14px; bottom: 14px; z-index: 1; display: inline-flex; align-items: center; gap: 6px; padding: 9px 14px; border-radius: 999px; background: var(--cream-card); border: 1px solid var(--border); font-size: 13.5px; font-weight: 700; color: var(--ink); box-shadow: 0 10px 24px -16px rgba(36,31,27,.5); transition: border-color .2s, color .2s; }
.wgmap__link:hover { border-color: var(--copper-light); color: var(--copper-text); }
.reveal-on .wgmap .mk, .reveal-on .wgmap .wgmap__ring { opacity: 0; transform-box: fill-box; transform-origin: center; }
.reveal-on .wgmap.is-in .wgmap__ring { animation: wgRing .9s var(--ease-out) forwards; }
.reveal-on .wgmap.is-in .wgmap__ring--2 { animation-delay: .15s; }
.reveal-on .wgmap.is-in .mk { animation: wgPop .5s var(--ease-out) forwards; animation-delay: calc(.35s + var(--i) * .07s); }
@keyframes wgRing { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes wgPop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* privacy page */
.legal { max-width: 760px; }
.legal h2 { font-weight: 800; font-size: clamp(21px, 1vw + 14px, 26px); letter-spacing: -.01em; margin: 44px 0 10px; }
.legal p, .legal li { font-size: 16.5px; line-height: 1.7; color: var(--text-body-2); }
.legal ul { padding-left: 20px; margin: 10px 0; }
.legal a { color: var(--copper-text); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.legal__meta { font-size: 14px; color: var(--text-meta); font-weight: 600; margin-top: 10px; }

@media (max-width: 820px) {
  .fld-row { grid-template-columns: 1fr; }
  .wgmap { min-height: 0; aspect-ratio: 4 / 5; }
  .mk text { font-size: 25px; }
  .mk--home text { font-size: 32px; }
  .chips__more { font-size: 13px; }
}

/* ==== v50 contact section (Melvin koos A: Open) =========================== */
/* calmer WhatsApp tip everywhere: a quiet line, not a box */
.form-tip { background: none; border: 0; padding: 2px 0 0; justify-content: center; font-weight: 600; color: var(--wa-text); }
.form-tip:hover { background: none; text-decoration: underline; text-underline-offset: 3px; }

/* shared structure */
.ct-head__intro { font-size: 18px; line-height: 1.6; color: var(--text-body-2); max-width: 560px; margin-top: 14px; }
.ct__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.ct__k { font-size: 12.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--copper-text); margin: 0 0 10px; }
.ct__num { display: inline-block; font-weight: 900; font-variation-settings: "wdth" 110; font-size: clamp(40px, 3.4vw + 10px, 68px); line-height: 1; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; transition: color .2s; white-space: nowrap; }
.ct__num:hover { color: var(--copper-text); }
.ct__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ct__actions .btn { padding: 14px 24px; }
.ct__list { margin: 36px 0 0; border-top: 1px solid var(--divider); }
.ct__list > div { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-bottom: 1px solid var(--divider); align-items: baseline; }
.ct__list dt { font-size: 12.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--text-meta); }
.ct__list dd { margin: 0; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.ct__list a { color: inherit; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1.5px no-repeat; transition: background-size .35s var(--ease-out), color .2s; }
.ct__list a:hover { color: var(--copper-text); background-size: 100% 1.5px; }

.ct__next { margin-top: clamp(64px, 8vw, 112px); }
.ct__next-t { font-weight: 800; font-size: clamp(24px, 1.2vw + 14px, 32px); letter-spacing: -.02em; font-variation-settings: "wdth" 106; margin: 0 0 clamp(24px, 3vw, 36px); }
.ct__steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 48px); }
.ct__steps li { display: grid; gap: 12px; align-content: start; }
.ct__steps h3 { margin: 0; font-weight: 800; font-size: 19px; }
.ct__steps p { margin: 6px 0 0; font-size: 15.5px; line-height: 1.55; color: var(--text-body-2); }
.ct__n { font-weight: 900; font-variant-numeric: tabular-nums; }

/* A: Open. No boxes on the left, steps under a thin rule with big copper numbers */
.ct-a .ct__info { padding-top: 12px; }
.ct-a .ct__steps li { border-top: 1px solid var(--divider); padding-top: 22px; }
.ct-a .ct__n { font-size: 44px; line-height: 1; color: var(--copper-light); letter-spacing: -.02em; }

@media (max-width: 820px) {
  .ct__grid { grid-template-columns: 1fr; gap: 28px; }
  .ct__num { font-size: clamp(36px, 10vw, 44px); }
  .ct__actions .btn { flex: 1; justify-content: center; padding: 13px 16px; }
  .ct__list > div { grid-template-columns: 80px 1fr; }
  .ct__list dd { font-size: 15.5px; }
  .ct__steps { grid-template-columns: 1fr; gap: 22px; }
}
.ct-head.page-head { padding-bottom: 0; }
.ct.sec-first { padding-top: clamp(32px, 4vw, 48px); }
@media (max-width: 820px) {
  .ct-a .ct__steps li { grid-template-columns: 52px 1fr; gap: 14px; padding-top: 18px; }
  .ct-a .ct__n { font-size: 32px; }
  .ct-a .ct__steps { gap: 18px; }
}

/* v50: calmer left side (no big number) + steps light up while scrolling */
.ct__title { font-weight: 800; font-size: clamp(24px, 1.2vw + 14px, 32px); letter-spacing: -.02em; font-variation-settings: "wdth" 106; margin: 0; }
.ct__lead { font-size: 17px; line-height: 1.6; color: var(--text-body-2); margin: 10px 0 0; }
.ct-a .ct__info { padding-top: 28px; }
.ct__list dd a { font-variant-numeric: tabular-nums; }
.ct-a .ct__steps li { position: relative; border-top-color: var(--divider); }
.ct-a .ct__steps li::before { content: ""; position: absolute; left: 0; right: 0; top: -1px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease-out); }
.ct-a .ct__n, .ct-a .ct__steps h3, .ct-a .ct__steps p { transition: color .5s var(--ease-out), opacity .5s var(--ease-out); }
.reveal-on.ct-a .ct__steps li:not(.is-on) .ct__n { color: var(--divider); }
.reveal-on.ct-a .ct__steps li:not(.is-on) h3, .reveal-on.ct-a .ct__steps li:not(.is-on) p { opacity: .35; }
.ct-a .ct__steps li.is-on::before, html.ct-a:not(.reveal-on) .ct__steps li::before { transform: none; }
.ct-a .ct__steps li.is-on .ct__n { color: var(--copper); }
@media (prefers-reduced-motion: reduce) { .ct-a .ct__steps li::before, .ct-a .ct__n, .ct-a .ct__steps h3, .ct-a .ct__steps p { transition: none; } }

/* v51: werkgebied on phones: smaller map, "en de dorpen eromheen" on its own line */
.chips__more { flex-basis: 100%; padding: 4px 2px 0; }
@media (max-width: 820px) {
  .wgmap { aspect-ratio: 5 / 4; border-radius: calc(20px * var(--rs-p, 1)); }
  .mk text { font-size: 34px; stroke-width: 9px; }
  .mk--home text { font-size: 42px; }
  .mk circle { r: 10; }
  .mk--home circle { r: 17; }
  .wgmap__sealabel { font-size: 28px; }
  .wgmap__link { right: 10px; bottom: 10px; padding: 7px 12px; font-size: 12.5px; }
}

/* v52: stats in ink instead of copper; calmer phone number in the lekkage band */
.about__stats .stat__n { color: var(--ink); }
.band-b .band__number { font-size: clamp(24px, 1vw + 16px, 34px); font-weight: 800; letter-spacing: -.02em; }
@media (max-width: 820px) { .band-b .band__number { font-size: 26px; } }
@media (min-width: 821px) {
  .band-b .band__content { grid-template-rows: 1fr 1fr; row-gap: 16px; align-items: center; }
  .band-b .band__number { align-self: end; }
  .band-b .band__actions { align-self: start; }
}
/* v52: "en de dorpen eromheen" as a dashed outline chip: reads as "and more", not as a button */
.chips__more { flex-basis: auto; display: inline-flex; align-items: center; padding: 10px 18px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-pill); font-size: 14.5px; font-weight: 600; color: var(--text-muted); background: none; cursor: default; }
.chips__more::before { content: "+"; margin-right: 6px; color: var(--copper); font-weight: 800; }
.chips:has(.chips__more)::after { content: none; }
@media (max-width: 820px) { .chips__more { padding: 7px 14px; font-size: 13px; } }

/* v53: Over Niels headline the same size as the Diensten/Contact headline */
.hero__title.hero__title--page { font-size: clamp(36px, 3.6vw + 14px, 72px); line-height: .98; letter-spacing: -.04em; }
@media (max-width: 820px) { .hero__title.hero__title--page { font-size: clamp(32px, 8.4vw, 42px); } }

/* v53/v55: page intro on Contact and Diensten. Headline lines rise into frame (the "Opkomen" option), then text and blocks follow */
.ct-intro .hl-line { display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.ct-intro .hl-inner { display: block; }
.ct-intro .hl-inner::after { content: none !important; }
.reveal-on .ct-intro .hl-inner { transform: translateY(108%); }
.reveal-on .ct-intro.ct-go .hl-inner { animation: hRise 1.05s var(--ease-out) both; animation-delay: calc(.12s + var(--i) * .11s); }
@keyframes hRise { from { transform: translateY(108%); } to { transform: none; } }
.reveal-on .ct-intro .hi, .reveal-on .ct-intro ~ .ct .hi { opacity: 0; }
.reveal-on .ct-go .hi, .reveal-on .ct-go ~ .ct .hi { animation: hFade .9s var(--ease-out) both; animation-delay: var(--d, .5s); }

/* v53: hero photo a bit narrower so the big headline has more room */
@media (min-width: 1101px) {
  .hero { grid-template-columns: minmax(0, 1.28fr) minmax(0, .72fr); }
}

/* v54: home headline clearly bigger, photo column a bit narrower to make room */
@media (min-width: 1101px) { .hero:not(.over-niels-hero .hero):has(.hero__title:not(.hero__title--page)) { grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr); } }
/* v54: home headline never smaller than the Diensten/Contact/Over Niels headline */
@media (min-width: 821px) {
  .hero__title:not(.hero__title--page) { font-size: clamp(36px, max(3.6vw + 14px, min(5vw + 8px, 9vh)), 80px); }
}
@media (max-width: 820px) {
  .hero__title:not(.hero__title--page) { font-size: max(clamp(32px, 8.4vw, 42px), 1em); }
}

/* v55: lekkage band without the big number: call button stacked above WhatsApp */
.band-b .band__number { display: none !important; }
.band-b .band__actions .btn--primary { display: inline-flex; }
.band-b .band__actions { flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: 12px; }
.band-b .band__actions .btn { justify-content: center; width: 100%; }
@media (min-width: 821px) {
  .band-b .band__content { grid-template-areas: "copy actions"; grid-template-rows: auto; align-items: center; }
  .band-b .band__actions { align-self: center; justify-self: end; width: min(100%, 320px); }
}
@media (max-width: 820px) {
  .band-b .band__content { grid-template-areas: "copy" "actions"; grid-template-rows: auto; }
}

/* v56: home werkgebied as its own sand panel with the map, so it reads clearly apart from the contact form below */
.wg-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(32px, 4vw, 64px); align-items: center;
  background: var(--sand); border: 1px solid var(--border-sand); border-radius: var(--radius-frame, 28px); padding: clamp(28px, 4vw, 56px); }
.wg-panel__lead { font-size: 16px; line-height: 1.65; color: var(--text-body-2); margin-top: 14px; max-width: 440px; }
.wg-panel .chips { margin-top: 28px; }
.wg-panel .chip { background: var(--cream-card); }
.wg-panel .wgmap { min-height: 420px; box-shadow: 0 18px 40px -24px rgba(36,31,27,.35); }
@media (max-width: 820px) {
  .wg-panel { grid-template-columns: 1fr; padding: 24px 18px 18px; border-radius: calc(22px * var(--rs-b, 1)); gap: 24px; }
  .wg-panel .wgmap { min-height: 0; }
  .wg-panel .chips { margin-top: 20px; }
}
/* v57: home map zoomed out so the whole circle shows */
.wg-panel .wgmap { min-height: 480px; }
@media (max-width: 820px) { .wg-panel .wgmap { min-height: 0; aspect-ratio: 1 / 1; } }

/* =========================================================================
   v58: service page (badkamerrenovatie.html is the template for the others)
   ========================================================================= */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; letter-spacing: .04em; color: var(--text-meta); }
.crumbs a { color: var(--copper-text); text-decoration: none; }
.crumbs a:hover { text-decoration: underline; text-underline-offset: 3px; }
.crumbs [aria-current] { color: var(--text-muted); }
.svc-head__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* photos: one big, three small */
.svc-gallery { display: grid; grid-template-columns: 1.6fr 1fr 1fr; grid-template-rows: repeat(2, clamp(180px, 17vw, 260px)); gap: 14px; }
.svc-gallery__item { margin: 0; border-radius: calc(24px * var(--rs-p, 1)); overflow: hidden; background: var(--sand); }
.svc-gallery__item img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .8s var(--ease-out); }
.svc-gallery__item:hover img { transform: scale(1.04); }
.svc-gallery__item--0 { grid-row: span 2; }
.svc-gallery__item--1 { grid-column: span 2; }

/* what's included: numbered list */
.svc-split { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.svc-split__head { position: sticky; top: 120px; }
.svc-split__intro { font-size: 16.5px; line-height: 1.6; color: var(--text-body-2); margin-top: 14px; max-width: 380px; }
.svc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid var(--divider); }
.svc-list li { display: flex; gap: 16px; padding: 26px 20px 26px 0; border-bottom: 1px solid var(--divider); }
.svc-list li:nth-child(odd) { border-right: 1px solid var(--divider); }
.svc-list li:nth-child(even) { padding-left: 24px; }
.svc-list__n { font-size: 13px; font-weight: 800; color: var(--copper); letter-spacing: .04em; padding-top: 4px; }
.svc-list h3 { font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.svc-list p { font-size: 15px; line-height: 1.55; color: var(--text-muted); margin-top: 6px; }

/* price factors: calm sand panel */
.svc-price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 80px); align-items: center; background: var(--sand); border: 1px solid var(--border-sand); border-radius: var(--radius-frame); padding: clamp(28px, 4.5vw, 64px); }
.svc-price__text { font-size: 16.5px; line-height: 1.65; color: var(--text-body-2); margin-top: 14px; max-width: 46ch; }
.svc-price__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.svc-price__list li { display: flex; align-items: center; gap: 14px; background: var(--cream-card); border: 1px solid var(--border); border-radius: calc(14px * var(--rs-b, 1)); padding: 15px 18px; font-size: 15.5px; font-weight: 600; }
.svc-price__list svg { flex: none; }

/* werkgebied line + other services */
.svc-area-line { display: flex; align-items: center; justify-content: space-between; gap: 16px 32px; flex-wrap: wrap; padding: 26px 0; border-top: 1px solid var(--divider); border-bottom: 1px solid var(--divider); }
.svc-area-line p { font-size: 16px; line-height: 1.6; color: var(--text-body-2); max-width: 70ch; }
.svc-area-line strong { color: var(--ink); }
.svc-more { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; color: var(--copper-text); text-decoration: none; white-space: nowrap; }
.svc-more:hover svg { transform: translateX(3px); }
.svc-more svg { transition: transform .3s var(--ease-out); }
.svc-others__row { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.svc-others__row a { padding: 11px 18px; border: 1px solid var(--border); border-radius: 999px; background: var(--cream-card); font-weight: 700; font-size: 14.5px; color: var(--ink); text-decoration: none; transition: border-color .2s, color .2s; }
.svc-others__row a:hover { border-color: var(--copper-light); color: var(--copper-text); }

/* link from Diensten to the full page */
.feature__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; font-weight: 700; font-size: 15px; color: var(--copper-text); text-decoration: none; }
.feature__more:hover svg { transform: translateX(3px); }
.feature__more svg { transition: transform .3s var(--ease-out); }

@media (max-width: 820px) {
  .svc-gallery { grid-template-columns: 1fr 1fr; grid-template-rows: 220px 130px 130px; gap: 10px; }
  .svc-gallery__item { border-radius: calc(18px * var(--rs-p, 1)); }
  .svc-gallery__item--0 { grid-column: span 2; grid-row: auto; }
  .svc-gallery__item--1 { grid-column: auto; }
  .svc-gallery__item--3 { grid-column: span 2; }
  .svc-split { grid-template-columns: 1fr; gap: 20px; }
  .svc-split__head { position: static; }
  .svc-list { grid-template-columns: 1fr; }
  .svc-list li:nth-child(n) { padding: 20px 0; border-right: 0; }
  .svc-price { grid-template-columns: 1fr; padding: 24px 18px; border-radius: calc(22px * var(--rs-b, 1)); }
  .svc-head__actions .btn { flex: 1 1 100%; justify-content: center; }
}

/* v59: FAQ intro column sits centred next to the questions and glides up evenly (no longer ends on the last line) */
@media (min-width: 821px) { .faq__head { position: static; align-self: center; } }

/* v59: "Wat valt eronder" items light up one by one while scrolling and stay lit */
.svc-list li > * { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.svc-list__n { transition: color .6s var(--ease-out); }
.reveal-on .svc-list[data-seq] li:not(.is-on) > * { opacity: .28; }
.reveal-on .svc-list[data-seq] li:not(.is-on) .svc-list__n { color: var(--text-meta); }
.reveal-on .svc-list[data-seq] li:not(.is-on) > div { transform: translateY(6px); }
.svc-list li { position: relative; }
.svc-list li::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--copper); transform: scaleX(0); transform-origin: left; transition: transform .8s var(--ease-out); }
.reveal-on .svc-list[data-seq] li.is-on::after { transform: scaleX(1); }
.svc-list li:nth-child(even)::after { left: 24px; }
@media (max-width: 820px) { .svc-list li:nth-child(even)::after { left: 0; } }
@media (prefers-reduced-motion: reduce) { .svc-list li > *, .svc-list li::after { transition: none; } }

/* v60: service page with one photo: photo + "in het kort" card */
.svc-solo { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: 14px; }
.svc-solo__img { margin: 0; border-radius: calc(24px * var(--rs-p, 1)); overflow: hidden; background: var(--sand); height: clamp(320px, 34vw, 520px); }
.svc-solo__img img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.svc-solo__card { display: flex; flex-direction: column; justify-content: center; gap: 22px; background: var(--sand); border: 1px solid var(--border-sand); border-radius: var(--radius-frame); padding: clamp(24px, 3.5vw, 48px); }
.svc-solo__card ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.svc-solo__card li { display: flex; align-items: center; gap: 12px; font-size: clamp(17px, .5vw + 12px, 20px); font-weight: 700; letter-spacing: -.01em; }
.svc-solo__card li svg { flex: none; }
@media (max-width: 820px) {
  .svc-solo { grid-template-columns: 1fr; gap: 10px; }
  .svc-solo__img { height: 300px; border-radius: calc(18px * var(--rs-p, 1)); }
  .svc-solo__card { border-radius: calc(18px * var(--rs-b, 1)); padding: 22px 20px; }
  .svc-solo__card li { font-size: 15.5px; }
}

/* =========================================================================
   v61: service page style variants (class on <html>): sv-a Donker, sv-b Redactioneel, sv-c Kaarten
   Same content, different rhythm, so every service page can look its own.
   ========================================================================= */

/* v63: section-level style atoms on <html>, mixed per page: m-dark/m-float/m-light (photo block), i-cards/i-rows/i-stage (list), s-row/s-cards (steps), p-dark/p-open/p-chips (price) */
/* steps in a row (s-row; s-cards adds cards on top) */
@media (min-width: 821px) {
  .s-row .werkwijze { grid-template-columns: 1fr; gap: 48px; }
  .s-row .werkwijze__head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .s-row .werkwijze__head .label { grid-column: 1 / -1; }
  .s-row .werkwijze__intro { margin: 0 0 6px; justify-self: end; text-align: right; }
  .s-row .tl, .s-cards .tl { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; }
  .s-row .tl__item, .s-cards .tl__item { grid-template-columns: 1fr; row-gap: 22px; }
  .s-row .tl__line, .s-cards .tl__line { left: 28px; right: calc((100% - 96px) / 5 - 28px); top: 27px; bottom: auto; width: auto; height: 2px; }
  .s-row .tl__fill { transform-origin: left; transform: scaleX(var(--tl-p)); }
  .s-row .tl__body { padding-top: 0; }
  .s-row .tl__t { font-size: clamp(19px, .6vw + 13px, 23px); }
  .s-row .tl__d { font-size: 15px; }
  .s-row .tl__item.is-on .tl__dot { transition-delay: calc(var(--n, 0) * .12s); }
}

/* ---- A · Donker: ink accents, cards, horizontal steps ---------------------- */
.m-dark .svc-solo__card { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.m-dark .svc-solo__card .label { color: var(--copper-light); }
.m-dark .svc-solo__card .svc-more { color: var(--copper-light); }
.m-dark .svc-solo__card svg[stroke="#A8764B"] { stroke: var(--copper-light); }
@media (min-width: 821px) {
  .i-cards .svc-split { grid-template-columns: 1fr; gap: 40px; }
  .i-cards .svc-split__head { position: static; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 64px; align-items: end; }
  .i-cards .svc-split__head .label { grid-column: 1 / -1; }
  .i-cards .svc-split__intro { justify-self: end; text-align: right; margin: 0 0 6px; }
  .i-cards .svc-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; border: 0; }
}
.i-cards .svc-list li:nth-child(n) { flex-direction: column; gap: 18px; background: var(--cream-card); border: 1px solid var(--border); border-radius: calc(20px * var(--rs-b, 1)); padding: 26px 24px 28px; }
.i-cards .svc-list li::after { left: 24px !important; right: 24px; bottom: 0; }
.i-cards .svc-list__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--sand); padding: 0; }
.p-dark .svc-price { background: var(--ink); border-color: var(--ink); color: var(--cream); }
.p-dark .svc-price .label { color: var(--copper-light); }
.p-dark .svc-price .sec-title { color: var(--cream); }
.p-dark .svc-price__text { color: rgba(243,238,231,.75); }
.p-dark .svc-price__list li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); color: var(--cream); }
.p-dark .svc-price__list svg { stroke: var(--copper-light); }

/* ---- B · Redactioneel: big photo, list as large rows, open price block ----- */
@media (min-width: 821px) {
  .m-float .svc-head .page-head__grid { grid-template-columns: 1fr; gap: 20px; }
  .m-float .svc-head .page-head__title { max-width: 20ch; }
  .m-float .svc-head .page-head__grid > div { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 40px; align-items: end; }
  .m-float .svc-head .svc-head__actions { margin-top: 0; }
  .m-float .svc-solo { grid-template-columns: 1fr; position: relative; }
  .m-float .svc-solo__img { height: clamp(420px, 44vw, 640px); }
  .m-float .svc-solo__card { position: absolute; right: 28px; bottom: 28px; width: min(400px, 40%); background: var(--cream-card); border-color: var(--border); box-shadow: 0 24px 50px -24px rgba(36,31,27,.45); }
  .i-rows .svc-list { grid-template-columns: 1fr; }
  .i-rows .svc-list li:nth-child(n) { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: baseline; padding: 26px 0; border-right: 0; }
  .i-rows .svc-list li > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 24px; align-items: baseline; }
  .i-rows .svc-list li::after { left: 0 !important; }
  .i-rows .svc-list p { margin-top: 0; }
  .i-rows .svc-list h3 { font-size: clamp(21px, .8vw + 12px, 26px); }
  .i-rows .svc-list__n { font-size: clamp(28px, 1.5vw + 10px, 40px); font-weight: 900; letter-spacing: -.04em; padding: 0; }
}
.p-open .svc-price { background: none; border: 0; border-top: 1px solid var(--divider); border-radius: 0; padding: clamp(32px, 4vw, 56px) 0 0; align-items: start; }
.p-open .svc-price__list { counter-reset: pf; gap: 0; border-top: 1px solid var(--divider); }
.p-open .svc-price__list li { background: none; border: 0; border-bottom: 1px solid var(--divider); border-radius: 0; padding: 18px 0; font-size: 17px; }
.p-open .svc-price__list li svg { display: none; }
.p-open .svc-price__list li::before { counter-increment: pf; content: counter(pf, decimal-leading-zero); font-size: 13px; font-weight: 800; color: var(--copper); min-width: 28px; }

/* ---- C · Kaarten: sand stage for the list, step cards, price as chips ----- */
.m-light .svc-solo__card { background: var(--cream-card); border-color: var(--border); }
.i-stage .svc-split { background: var(--sand); border: 1px solid var(--border-sand); border-radius: var(--radius-frame); padding: clamp(24px, 4vw, 56px); }
.i-stage .svc-split__head { position: static; }
.i-stage .svc-list { gap: 12px; border: 0; }
.i-stage .svc-list li:nth-child(n) { background: var(--cream-card); border: 1px solid var(--border); border-radius: calc(18px * var(--rs-b, 1)); padding: 22px 22px 24px; }
.i-stage .svc-list li::after { left: 22px !important; right: 22px; bottom: 0; }
@media (min-width: 821px) {
  .s-cards .tl__item { background: var(--cream-card); border: 1px solid var(--border); border-radius: calc(20px * var(--rs-b, 1)); padding: 22px 20px 26px; }
  .s-cards .tl__line { top: 49px; left: 48px; right: 48px; }
  .s-cards .tl { gap: 14px; }
}
.p-chips .svc-price { grid-template-columns: 1fr; text-align: center; justify-items: center; background: none; border: 1px solid var(--border); }
.p-chips .svc-price__text { margin-inline: auto; }
.p-chips .svc-price__list { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }
.p-chips .svc-price__list li { border-radius: 999px; padding: 12px 20px; font-size: 15px; }

.i-cards .svc-list { gap: 12px; border: 0; }
@media (max-width: 820px) { .i-cards .svc-list li:nth-child(n) { flex-direction: row; padding: 20px; } }

/* =========================================================================
   v62: more scroll moments on the service pages
   ========================================================================= */
/* generic: children of any [data-seq] list light up one by one and stay lit */
[data-seq]:not(.svc-list) > * { transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), background-color .4s, border-color .4s; }
.reveal-on [data-seq]:not(.svc-list) > :not(.is-on) { opacity: .22; transform: translateY(12px); }
.svc-price__list[data-seq] > .is-on svg, .svc-solo__card [data-seq] > .is-on svg { animation: seqTick .5s var(--ease-out) both; }
@keyframes seqTick { from { transform: scale(.4) rotate(-20deg); opacity: 0; } to { transform: none; opacity: 1; } }

/* photos on service pages: unmask + gentle parallax */
.svc-gallery__item, .svc-solo__img { --unmask-r: calc(24px * var(--rs-p, 1)); }
.svc-gallery__item img, .svc-solo__img img { transform: scale(1.12) translateY(var(--py, 0px)); will-change: transform; }
.svc-gallery__item:hover img { transform: scale(1.12) translateY(var(--py, 0px)); }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .svc-gallery__item img, .svc-solo__img img { animation: niels-px linear both; animation-timeline: view(); }
  }
}
@media (prefers-reduced-motion: reduce) { .svc-gallery__item img, .svc-solo__img img { transform: scale(1.12); } }

/* statement: big sentence that fills word by word while scrolling, and stays filled */
.svc-statement { max-width: 22ch; margin: 0 auto; text-align: center; font-weight: 900; font-size: clamp(32px, 3.2vw + 12px, 64px); line-height: 1.05; letter-spacing: -.035em;
  font-variation-settings: "wdth" var(--display-wdth, 110); font-stretch: calc(var(--display-wdth, 110) * 1%); text-wrap: balance; }
.svc-statement .w { transition: opacity .35s linear, color .35s linear; }
.reveal-on .svc-statement .w { opacity: .18; }
.reveal-on .svc-statement .w.on { opacity: 1; }
.svc-statement .w.hl.on, html:not(.reveal-on) .svc-statement .w.hl { color: var(--copper-text); }
.svc-statement-sec .label { text-align: center; margin-bottom: 18px; }
@media (max-width: 820px) { .svc-statement { font-size: clamp(28px, 8vw, 36px); max-width: none; } }
.card__more { margin: 14px 0 4px; font-size: 14.5px; }

/* v63: more atoms. Statement: st-dark (ink band) / st-left (big, left, with a copper rule). FAQ: f-panel (sand panel) */
.st-dark .svc-statement-wrap { background: var(--ink); border-radius: var(--radius-frame); padding: clamp(56px, 8vw, 112px) clamp(24px, 5vw, 72px); }
.st-dark .svc-statement { color: var(--cream); }
.st-dark .svc-statement-sec .label { color: var(--copper-light); }
.st-dark .svc-statement .w.hl.on, html.st-dark:not(.reveal-on) .svc-statement .w.hl { color: var(--copper-light); }
.reveal-on.st-dark .svc-statement .w { opacity: .2; }
.reveal-on.st-dark .svc-statement .w.on { opacity: 1; }
.st-left .svc-statement { text-align: left; margin: 0; max-width: 20ch; padding-left: clamp(20px, 3vw, 40px); border-left: 4px solid var(--copper); }
.st-left .svc-statement-sec .label { text-align: left; }
.f-panel .faq__grid { background: var(--sand); border: 1px solid var(--border-sand); border-radius: var(--radius-frame); padding: clamp(28px, 4.5vw, 64px); }
.f-panel .faq .faq__item summary .faq__icon { background: var(--cream-card); }
@media (max-width: 820px) {
  .st-dark .svc-statement-wrap { border-radius: calc(22px * var(--rs-b, 1)); padding: 48px 22px; }
  .f-panel .faq__grid { padding: 24px 18px; border-radius: calc(22px * var(--rs-b, 1)); }
}

/* v65: FAQ heading keeps a clear gap from the questions on smaller laptops */
@media (min-width: 821px) and (max-width: 1100px) { .faq__head .sec-title { font-size: clamp(28px, 3.3vw, 40px); } }
/* v67: space between the FAQ and the werkgebied line (the line was glued to the bottom of the FAQ / panel) */
.faq + section > .svc-area-line { margin-top: clamp(48px, 6vw, 88px); }
/* v74: button hover = "optillen" (Melvin, 2026-11-01): copper stays, the button lifts with a soft copper shadow (replaces the dark-brown hover) */
.btn--primary, .nav__cta { transition: background-color .3s var(--ease-out), color .3s var(--ease-out), box-shadow .3s var(--ease-out), transform .3s var(--ease-out); }
.btn--primary:hover, .nav__cta:hover { background: var(--btn-bg); transform: translateY(-2px); box-shadow: 0 12px 24px -10px rgba(138, 94, 56, .65); }
.btn--primary:active, .nav__cta:active { transform: translateY(0); box-shadow: 0 6px 14px -8px rgba(138, 94, 56, .6); }
@media (prefers-reduced-motion: reduce) { .btn--primary:hover, .nav__cta:hover { transform: none; } }
/* v75 (site check): equal button heights side by side (primary/dark get the same 1.5px edge as whatsapp/outline) */
.btn--primary, .btn--dark { border: 1.5px solid transparent; }
/* footer column headings are h2 now (no skipped heading levels); same look as before */
.footer__col .footer__h { font-family: inherit; font-weight: 700; color: var(--cream); font-size: 15px; line-height: 1.4; letter-spacing: 0; margin: 0 0 14px; font-stretch: normal; font-variation-settings: normal; text-transform: none; }
/* home h1: the rolling words are CSS-only, so search engines read "Vakwerk waar u op kunt bouwen." */
.wordroll__item[data-w]::before { content: attr(data-w); }
/* small dots keep their look but get a 24px+ tap area (WCAG 2.5.8) */
.dot, .xf__dots button { position: relative; }
.dot::after, .xf__dots button::after { content: ""; position: absolute; left: 50%; top: 50%; width: 28px; height: 28px; transform: translate(-50%, -50%); }
/* v76: layered parallax (JS sets --plx on desktop; the scroll fade adds to it) */
[data-plx] { translate: 0 var(--plx, 0px); will-change: translate; }
/* v78: radius A "zachter" fixed (Melvin, 2026-11-02): photos and blocks at 0.55 of the old radii; buttons/chips stay pill */
:root { --rs-p: .55; --rs-b: .55; }

/* v81 bereikbaarheid */
.ct__note { display: block; font-size: 14px; font-weight: 500; color: var(--text-meta); margin-top: 2px; }
.footer__col li.footer__hours { opacity: .75; }
/* v81 404 */
.nf__links { display: flex; flex-wrap: wrap; gap: 10px 22px; margin: 18px 0 0; padding: 0; list-style: none; }
.nf__links a { font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-color: var(--divider); text-underline-offset: 4px; }
.nf__links a:hover { color: var(--copper-text); text-decoration-color: currentColor; }
.nf .ct__actions { margin-top: 24px; }
.nf h2 { font-weight: 800; font-size: clamp(21px, 1vw + 14px, 26px); letter-spacing: -.01em; margin: clamp(48px, 5vw, 64px) 0 0; }
.nf__links { margin-bottom: clamp(40px, 6vw, 96px); }
.nf .ct__actions .btn { white-space: nowrap; }
.nf__row { margin-top: 18px; margin-bottom: clamp(40px, 6vw, 96px); }
/* v82: nav hover pill one step darker (page background instead of card white) */
.nav-e .nav__links::before { background: var(--cream); }

/* v85: portrait photo (toilet page): narrower 3:4 frame, no extra zoom, so the 675px photo stays sharp */
.svc-solo--portrait { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
.svc-solo--portrait .svc-solo__img { height: auto; aspect-ratio: 3 / 4; }
.svc-solo--portrait .svc-solo__img img { transform: none !important; animation: none !important; object-position: center; }
@media (max-width: 820px) {
  .svc-solo--portrait { grid-template-columns: 1fr; }
  .svc-solo--portrait .svc-solo__img { width: min(100%, 400px); margin: 0 auto; }
}
/* v86: portrait photos on the float layout too (kokendwaterkranen, riolering): side by side, card no longer floats over the photo */
@media (min-width: 821px) {
  .m-float .svc-solo.svc-solo--portrait { grid-template-columns: minmax(0, 400px) minmax(0, 1fr); }
  .m-float .svc-solo--portrait .svc-solo__img { height: auto; }
  .m-float .svc-solo--portrait .svc-solo__card { position: static; width: auto; box-shadow: none; }
}
/* v86: gallery as one row, every photo in its own shape (Sanitair: 3 portrait + 1 landscape).
   Column widths follow the aspect ratios, so all photos are the same height and nothing is cut off. */
.svc-gallery.svc-gallery--row { grid-template-columns: 9fr 9fr 16fr 9fr; grid-template-rows: none; }
.svc-gallery--row .svc-gallery__item:nth-child(n) { grid-row: auto; grid-column: auto; aspect-ratio: 3 / 4; }
.svc-gallery--row .svc-gallery__item--2:nth-child(n) { aspect-ratio: 4 / 3; }
.svc-gallery--row .svc-gallery__item img { transform: none !important; animation: none !important; }
@media (max-width: 820px) {
  .svc-gallery.svc-gallery--row { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: none; }
  .svc-gallery--row .svc-gallery__item--2:nth-child(n) { order: 4; grid-column: 1 / -1; }
}

/* v89: Over Niels lands like Diensten and Contact: heading lines rise into view (no copper sweep) */
.hero--rise .hl-line { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.hero--rise .hl-inner { display: block; }
.hero-c .hero.hero--rise .hl-inner::after { content: none; animation: none; }
.reveal-on.hero-c .hero.hero--rise .hl-inner .hw,
.reveal-on.hero-c .hero.hero--rise.hero-go .hl-inner .hw { opacity: 1; animation: none; }
.reveal-on .hero.hero--rise .hl-inner { transform: translateY(108%); }
.reveal-on .hero.hero--rise.hero-go .hl-inner { animation: hRise 1.05s var(--ease-out) both; animation-delay: calc(.12s + var(--i) * .11s); }

/* v92: reviews zonder voorbeeld-reviews, alleen oproep tot Google-review */
.reviews:has(.reviews__solo){padding:clamp(48px,6vw,88px) 0}
.reviews__solo{display:flex;align-items:flex-end;justify-content:space-between;gap:32px}
.reviews__solo .sec-title{margin-top:10px}
.reviews__solo-t{margin-top:12px;max-width:52ch;font-size:17px;line-height:1.6;color:rgba(243,238,231,.78)}
.reviews__solo .btn{flex:none}
@media (max-width:820px){.reviews__solo{flex-direction:column;align-items:flex-start;gap:22px}}