/* M. van de Haar Handel · Verhuur · Transport — every colour below is in palette.json */

:root {
  --leisteen-700: #34505D;
  --leisteen-600: #4A6D7E;
  --leisteen-500: #5C7F90;
  --leisteen-400: #6A787F;
  --leisteen-100: #DCE5E9;

  --asfalt-900: #1E242A;
  --asfalt-800: #283038;
  --asfalt-700: #3A444D;
  --asfalt-600: #5D656C;

  --zwaai-500: #E49B34;
  --zwaai-600: #9A5E12;
  --zwaai-100: #F6E2C0;

  --zand-50: #FBF9F5;
  --zand-100: #F1EDE5;
  --zand-200: #E6E0D5;
  --zand-300: #CFC7B9;

  --signaalrood: #B3432F; /* reserve: a wrongly filled field */

  --wa: #25D366;
  --wa-glyph: #FFFFFF;

  --scrim: 30, 36, 42; /* asfalt-900 as rgb, for photo scrims and shadows */

  --display: clamp(36px, 3.2vw + 24px, 70px);
  --h2: clamp(32px, 2.2vw + 22px, 54px);
  --klus: clamp(18px, .7vw + 15px, 25px);
  --pad: clamp(20px, 3.4vw, 48px);
  --maxw: 1440px;
  --r: 8px;
  --head-h: 72px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: "Mulish", system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--asfalt-900);
  background: var(--zand-100);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; }
h1, h2, h3 { margin: 0; font-weight: 800; line-height: 1.04; letter-spacing: -.018em; }
b, strong { font-weight: 800; }

:focus-visible { outline: 3px solid var(--zwaai-500); outline-offset: 3px; border-radius: 4px; }

.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--asfalt-900); color: var(--zand-100);
  padding: 10px 16px; border-radius: 6px; font-weight: 800; text-decoration: none;
}
.skip:focus { top: 12px; }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad); }

section[id], [id="materieel"] { scroll-margin-top: calc(var(--head-h) + 12px); }

/* ---------- Buttons: rectangles with the mark's small corner ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 22px;
  border: 2px solid transparent; border-radius: 6px;
  font: inherit; font-weight: 800; font-size: 16.5px; line-height: 1.1;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s, transform .15s, box-shadow .15s;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn:active { transform: translateY(1px); }

.btn-call, .btn-primary { background: var(--leisteen-600); color: var(--zand-50); }
.btn-call:hover, .btn-primary:hover { background: var(--leisteen-700); }

.btn-wa { background: var(--wa); color: var(--wa-glyph); }
.btn-wa:hover { box-shadow: 0 6px 18px -6px rgba(var(--scrim), .45); transform: translateY(-1px); }
.btn-wa-inv { background: transparent; color: var(--wa); border-color: var(--wa); }
.btn-wa-inv:hover { box-shadow: inset 0 0 0 1px var(--wa); }

.btn-quiet { background: transparent; color: var(--asfalt-900); border-color: var(--zand-300); }
.btn-quiet:hover { border-color: var(--asfalt-900); }

.btn-light { background: var(--zand-50); color: var(--asfalt-900); }
.btn-light:hover { background: var(--zand-100); }

.on-dark .btn-quiet { color: var(--zand-100); border-color: var(--asfalt-700); }
.on-dark .btn-quiet:hover { border-color: var(--zand-100); }

.pair { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 559px) { .pair .btn { flex: 1 1 auto; } }

/* ---------- Header ---------- */

.site-head {
  position: sticky; top: 0; z-index: 60;
  background: var(--zand-100);
  border-bottom: 1px solid var(--zand-300);
}
.head-in {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  min-height: var(--head-h);
  display: flex; align-items: center; gap: 20px;
}
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-right: auto; }
.brand-mark { width: 46px; }
.brand-words { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name { font-weight: 800; font-size: 19px; letter-spacing: -.01em; }
.brand-tag { font-weight: 400; font-size: 12.5px; color: var(--asfalt-600); margin-top: 3px; }

.nav-list { list-style: none; display: flex; align-items: center; gap: 2px; }
.nav-list > li > a, .drop-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-weight: 700; font-size: 15.5px; color: var(--asfalt-900);
  text-decoration: none; cursor: pointer;
}
.nav-list > li > a:hover, .drop-btn:hover { background: var(--zand-200); }
.drop-btn svg { width: 16px; height: 16px; transition: transform .2s; }
.drop-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

.has-drop { position: relative; }
.drop {
  list-style: none; display: none;
  position: absolute; top: 100%; left: 0; min-width: 250px; padding: 8px;
  background: var(--zand-50); border: 1px solid var(--zand-300); border-radius: var(--r);
  box-shadow: 0 18px 40px -18px rgba(var(--scrim), .35);
}
.drop a {
  display: block; padding: 11px 14px; border-radius: 5px;
  font-weight: 700; text-decoration: none;
}
.drop a:hover { background: var(--leisteen-100); }
.drop-btn[aria-expanded="true"] + .drop { display: block; }
@media (hover: hover) {
  .has-drop:hover .drop { display: block; }
}

.nav-call { display: none; }

.head-call { display: flex; align-items: center; gap: 8px; }
.head-tel {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 44px; padding: 0 16px; border-radius: 6px;
  background: var(--leisteen-600); color: var(--zand-50);
  font-weight: 800; font-size: 16px; text-decoration: none;
}
.head-tel:hover { background: var(--leisteen-700); }
.head-tel svg { width: 18px; height: 18px; }
.head-wa {
  display: grid; place-items: center; width: 44px; height: 44px; border-radius: 6px;
  background: var(--wa); color: var(--wa-glyph);
}
.head-wa svg { width: 22px; height: 22px; }

.menu-btn {
  display: none; align-items: center; gap: 10px;
  min-height: 44px; padding: 0 14px; border: 2px solid var(--asfalt-900); border-radius: 6px;
  background: none; font: inherit; font-weight: 800; font-size: 15px; color: var(--asfalt-900); cursor: pointer;
}
.menu-bars, .menu-bars::before, .menu-bars::after {
  display: block; width: 18px; height: 2.5px; background: currentColor; border-radius: 1px; position: relative;
}
.menu-bars::before, .menu-bars::after { content: ""; position: absolute; left: 0; }
.menu-bars::before { top: -6px; }
.menu-bars::after { top: 6px; }

@media (max-width: 1099px) {
  .menu-btn { display: inline-flex; }
  .nav {
    display: none;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--zand-50); border-bottom: 1px solid var(--zand-300);
    padding: 12px var(--pad) 22px;
    box-shadow: 0 24px 40px -24px rgba(var(--scrim), .35);
    max-height: calc(100vh - var(--head-h)); overflow-y: auto;
  }
  .nav.open { display: block; }
  .nav-list { flex-direction: column; align-items: stretch; }
  .nav-list > li > a, .drop-btn { width: 100%; justify-content: space-between; padding: 14px 8px; font-size: 18px; border-radius: 0; border-bottom: 1px solid var(--zand-200); }
  .drop { position: static; box-shadow: none; border: 0; background: none; padding: 4px 0 8px 12px; min-width: 0; }
  .has-drop:hover .drop { display: none; }
  .drop-btn[aria-expanded="true"] + .drop { display: block; }
  .drop a { font-size: 17px; }
  .nav-call { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
}
@media (max-width: 599px) {
  .head-call { display: none; }
  .brand-mark { width: 40px; }
  .brand-name { font-size: 17px; }
  .brand-tag { font-size: 11.5px; }
  :root { --head-h: 64px; }
}

/* ---------- The fold ---------- */

.fold { padding: clamp(20px, 2.2vw, 30px) 0 clamp(32px, 3.4vw, 52px); }

.fold-grid {
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--pad);
  display: grid; gap: 14px;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-areas:
    "lock  lock  lock  lock  lock  lock  lock  head   head   head   head   head"
    "kraan kraan kraan kraan kraan kraan kraan panel  panel  panel  panel  panel"
    "kraan kraan kraan kraan kraan kraan kraan kipper kipper kipper kipper kipper"
    "grond grond grond grond bulk  bulk  bulk  bulk   glad   glad   glad   glad";
  grid-template-rows: auto minmax(440px, auto) 290px 310px;
}

.lockup {
  grid-area: lock; align-self: end; margin-bottom: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--display) * .28);
}
/* the mark stands as tall as the name and its small line together */
.lockup-mark { width: calc(var(--display) * 1.9); }
.lockup-name {
  font-weight: 800; font-size: var(--display); line-height: .96; letter-spacing: -.028em;
}
.lockup-tag {
  font-weight: 400; font-size: calc(var(--display) * .345); line-height: 1.2;
  color: var(--asfalt-600); margin-top: calc(var(--display) * .14);
}
/* the name and its small line are the page's h1 */
.lockup-words { font-size: inherit; letter-spacing: normal; }
.lockup-name, .lockup-tag { display: block; }

/* the owner, in the question's old place: a round portrait, his line in a speech bubble */
.own {
  grid-area: head; align-self: end; margin-bottom: 12px;
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: calc(var(--display) * .38); align-items: center;
}
.own-pic {
  position: relative; display: block; overflow: hidden; background: var(--zand-200);
  width: calc(var(--display) * 1.8); aspect-ratio: 1; border-radius: 50%;
  box-shadow: 0 0 0 4px var(--zand-100), 0 0 0 6px var(--leisteen-500);
}
.own-pic img { position: absolute; max-width: none; height: auto; width: 420%; left: -71.8%; top: -15.7%; }
.own-body {
  position: relative;
  background: var(--zand-50); border: 1px solid var(--zand-300); border-radius: 16px;
  padding: 22px 26px 20px;
}
.own-body::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 16px; height: 16px;
  background: var(--zand-50); border-left: 1px solid var(--zand-300); border-bottom: 1px solid var(--zand-300);
  transform: translateY(-50%) rotate(45deg);
}
.own-line { margin: 0; }
.own-line p {
  font-size: clamp(21px, .8vw + 14px, 27px); line-height: 1.14;
  font-weight: 800; letter-spacing: -.016em; text-wrap: balance;
}
.own-line p span { display: block; }  /* a sentence to a line */
.own-who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin-top: 10px; font-size: 16px; line-height: 1.25; }
.own-who b { font-weight: 800; }
.own-who span {
  font-size: 12.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--leisteen-600);
}

/* the five pictures */
.tile {
  position: relative; display: block; overflow: hidden; isolation: isolate;
  border-radius: var(--r); background: var(--asfalt-800);
  color: var(--zand-50); text-decoration: none;
  min-height: 200px;
}
.tile img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transition: transform .7s cubic-bezier(.2, .7, .2, 1);
}
.tile:hover img { transform: scale(1.035); }
.tile::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(var(--scrim), .86) 0%, rgba(var(--scrim), .42) 30%, rgba(var(--scrim), 0) 56%);
}
.tile-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 20px 22px 22px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: 16px;
}
.tile-klus { grid-column: 1; font-size: 15px; font-weight: 600; line-height: 1.3; color: var(--zand-100); margin-bottom: 4px; }
.tile-name { grid-column: 1; font-size: clamp(22px, .9vw + 14px, 30px); font-weight: 800; letter-spacing: -.012em; line-height: 1.05; }
.tile-go {
  grid-column: 2; grid-row: 1 / span 2; align-self: end;
  width: 44px; height: 44px; border-radius: 6px;
  display: grid; place-items: center;
  background: var(--zand-50); color: var(--asfalt-900);
  transition: background-color .2s, color .2s;
}
.tile-go svg { width: 22px; height: 22px; }
.tile:hover .tile-go { background: var(--zwaai-500); }

.tile-kraan { grid-area: kraan; }
.tile-kraan .tile-cap { padding: 30px 32px 32px; }
.tile-kraan .tile-klus { font-size: 18px; }
.tile-kraan .tile-name { font-size: clamp(30px, 1.8vw + 16px, 46px); }
.tile-kraan .tile-go { width: 56px; height: 56px; }
.tile-kraan img { object-position: 62% 50%; }

.tile-kipper { grid-area: kipper; }
.tile-kipper img { object-position: 50% 42%; }
.tile-grond { grid-area: grond; }
.tile-grond img { object-position: 50% 48%; }
.tile-bulk { grid-area: bulk; }
.tile-bulk img { object-position: 58% 55%; }
.tile-glad { grid-area: glad; }
.tile-glad img { object-position: 45% 52%; }

/* the card below him: the words at the top, call, WhatsApp and the rating at the foot */
.fold-panel {
  grid-area: panel;
  background: var(--zand-50); border: 1px solid var(--zand-300); border-radius: var(--r);
  padding: 32px 34px 30px;
  display: flex; flex-direction: column; justify-content: space-between; gap: 28px;
}
.fold-sub { font-size: clamp(19px, .45vw + 14.5px, 22px); line-height: 1.5; }
.sub-lead { font-weight: 700; }
.panel-act { display: flex; flex-direction: column; gap: 26px; }
.fold-panel .pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 214px), 1fr)); gap: 12px; }
.fold-panel .pair .btn { min-height: 60px; padding: 0 16px; font-size: 18.5px; }
.fold-panel .g-rate { gap: 16px; padding-top: 24px; border-top: 1px solid var(--zand-300); }
.fold-panel .g-logo { width: 44px; height: 44px; }
.fold-panel .g-score { font-size: 36px; }
.fold-panel .stars { font-size: 24px; }
.fold-panel .g-count { font-size: 16px; }

/* the Google rating element */
.g-rate { display: flex; align-items: center; gap: 14px; }
.g-logo { width: 34px; height: 34px; flex: none; }
.g-rate-body { display: flex; flex-direction: column; gap: 3px; }
.g-rate-top { display: flex; align-items: center; gap: 10px; }
.g-score { font-size: 28px; font-weight: 900; line-height: 1; letter-spacing: -.01em; }
.g-count { font-size: 14.5px; font-weight: 600; color: var(--asfalt-600); line-height: 1.2; }
.g-count b { color: var(--asfalt-900); }

.stars { position: relative; display: inline-flex; font-size: 19px; line-height: 1; }
.stars svg { width: 1em; height: 1em; flex: none; margin-right: 2px; }
.stars-base { display: flex; color: var(--zand-300); }
.stars-top { position: absolute; top: 0; left: 0; bottom: 0; width: var(--fill); overflow: hidden; display: flex; color: var(--zwaai-500); }

/* fold: tablet */
@media (max-width: 1179px) {
  .fold-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    grid-template-areas:
      "lock   lock   lock   lock   lock   lock"
      "head   head   head   head   head   head"
      "kraan  kraan  kraan  kraan  kraan  kraan"
      "panel  panel  panel  panel  panel  panel"
      "kipper kipper kipper grond  grond  grond"
      "bulk   bulk   bulk   glad   glad   glad";
    grid-template-rows: auto auto clamp(340px, 52vw, 540px) auto 300px 300px;
  }
  .own { justify-self: start; max-width: 760px; margin-bottom: 18px; }
  .fold-panel {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px 36px; align-items: end;
  }
  .fold-sub { grid-column: 1; grid-row: 1; align-self: start; }
  .panel-act { grid-column: 2; grid-row: 1; }
}

@media (max-width: 519px) {
  .lockup { grid-template-columns: minmax(0, 1fr); }
  .lockup-mark { width: calc(var(--display) * 1.75); margin-bottom: calc(var(--display) * .22); }
}

/* fold: phone */
@media (max-width: 759px) {
  .fold-grid {
    column-gap: 10px; row-gap: 10px;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    /* on a phone: the name, the owner speaking, the big picture, then the card */
    grid-template-areas:
      "lock   lock"
      "head   head"
      "kraan  kraan"
      "panel  panel"
      "kipper grond"
      "bulk   glad";
    grid-template-rows: auto auto clamp(280px, 82vw, 420px) auto 236px 236px;
  }
  .own { margin: 4px 0 8px; max-width: none; justify-self: stretch; column-gap: 18px; padding-left: 6px; }
  .own-pic { width: 64px; }
  .own-body { padding: 14px 16px 13px; border-radius: 14px; }
  .own-line p { font-size: 19px; }
  .own-who { font-size: 14.5px; margin-top: 7px; }
  .own-who span { font-size: 11.5px; }
  .fold-panel { display: flex; flex-direction: column; align-items: stretch; gap: 20px; margin: 4px 0 6px; padding: 20px 18px; }
  .fold-sub { margin: 0; font-size: 17.5px; }
  .fold-panel .pair { grid-template-columns: 1fr; margin: 0; gap: 10px; }
  .fold-panel .g-rate { margin: 0; padding-top: 16px; }
  .panel-act { gap: 18px; }
  .fold-panel .g-score { font-size: 30px; }
  .fold-panel .stars { font-size: 21px; }
  .tile { min-height: 0; }
  .tile-cap { padding: 14px 14px 15px; }
  .tile-klus { font-size: 13px; }
  .tile-name { font-size: 18px; hyphens: manual; }
  .tile-go { display: none; }
  .tile-kraan .tile-cap { padding: 20px 20px 22px; }
  .tile-kraan .tile-klus { font-size: 15px; }
  .tile-kraan .tile-name { font-size: 28px; }
  .tile-kraan .tile-go { display: grid; width: 48px; height: 48px; }
}

/* ---------- The trust strip: a piece of road with two lanes ---------- */

.trust { padding: 0 var(--pad) clamp(48px, 6vw, 88px); }
.trust-road {
  position: relative;
  max-width: 1180px; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.25fr); align-items: center; gap: 40px;
  padding: 36px clamp(24px, 4vw, 56px);
  background: var(--asfalt-900); color: var(--zand-100);
  border-radius: var(--r);
}
.trust-road::before, .trust-road::after {
  content: ""; position: absolute; left: 16px; right: 16px; height: 2px;
  background: var(--zand-100); opacity: .8;
}
.trust-road::before { top: 12px; }
.trust-road::after { bottom: 12px; }
.trust-lane { display: flex; align-items: center; gap: 24px; min-width: 0; }
.trust-lane-b { justify-content: space-between; flex-wrap: wrap; row-gap: 14px; }
.trust-mark { width: 82px; flex: none; }
.trust-fact { display: flex; flex-direction: column; }
.trust-small {
  font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
  color: var(--zwaai-500);
}
.trust-big {
  font-size: clamp(34px, 1.9vw + 18px, 56px); font-weight: 800; line-height: 1; letter-spacing: -.022em;
  margin-top: 6px;
}
.trust-divider {
  align-self: stretch; width: 5px; margin: -8px 0;
  background: repeating-linear-gradient(180deg, var(--zwaai-500) 0 16px, transparent 16px 30px);
}
.trust-go {
  display: inline-flex; align-items: center; gap: 8px;
  font-weight: 800; font-size: 15.5px; color: var(--leisteen-100);
  text-decoration: none; border-bottom: 2px solid var(--asfalt-700); padding-bottom: 3px;
}
.trust-go:hover { color: var(--zand-50); border-color: var(--zwaai-500); }
.trust-go svg { width: 18px; height: 18px; }

@media (max-width: 859px) {
  .trust-road { grid-template-columns: 1fr; gap: 24px; padding: 38px 26px; }
  .trust-divider {
    width: auto; height: 5px; margin: 0 -6px;
    background: repeating-linear-gradient(90deg, var(--zwaai-500) 0 16px, transparent 16px 30px);
  }
  .trust-mark { width: 66px; }
}

/* ---------- How a section announces itself: the klus first, then the kopwoord, on the H's stem ---------- */

.announce { position: relative; padding-left: 26px; margin-bottom: clamp(26px, 3vw, 40px); }
.announce::before {
  content: ""; position: absolute; left: 0; top: .18em; bottom: .12em; width: 9px; border-radius: 2px;
  background: linear-gradient(to bottom, var(--leisteen-500) 0 66%, transparent 66% 69%, var(--leisteen-400) 69% 100%);
}
.klus {
  font-size: var(--klus); font-weight: 700; font-style: italic; line-height: 1.25;
  color: var(--leisteen-600); margin-bottom: 8px;
}
.announce h2 { font-size: min(var(--h2), 8.2vw); } /* 'Gladheidsbestrijding' stays one word on a 360px phone */
.announce h2 a { text-decoration: none; background: linear-gradient(currentColor, currentColor) 0 100% / 0 3px no-repeat; transition: background-size .25s; }
.announce h2 a:hover { background-size: 100% 3px; }
.on-dark .klus { color: var(--leisteen-100); }

.lead { font-size: 19px; line-height: 1.55; }

/* ---------- Services ---------- */

.svc { padding: clamp(64px, 8vw, 120px) 0; }

.svc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-rows: auto auto 1fr;
  grid-template-areas: "ann fig" "body fig" "cta fig";
  column-gap: clamp(36px, 5vw, 88px);
}
.svc-grid.fig-left {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  grid-template-areas: "fig ann" "fig body" "fig cta";
}
.svc-grid-short { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
.svc-grid .announce { grid-area: ann; }
.svc-body { grid-area: body; display: flex; flex-direction: column; gap: 20px; }
.svc-cta { grid-area: cta; display: flex; flex-wrap: wrap; gap: 10px; margin-top: 32px; align-self: start; }
.svc-fig { grid-area: fig; align-self: center; }

.fig { position: relative; overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 3; background: var(--zand-200); }
.fig img { width: 100%; height: 100%; object-fit: cover; }
.fig-tall { aspect-ratio: 5 / 4; }
.fig-wide { aspect-ratio: 16 / 9; }

.label {
  position: absolute; left: 14px; bottom: 14px;
  padding: 5px 9px; border-radius: 4px;
  background: rgba(var(--scrim), .72); color: var(--zand-100);
  font-size: 12.5px; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
}

.scope { list-style: none; display: flex; flex-direction: column; }
.scope li { position: relative; padding: 11px 0 11px 26px; border-top: 1px solid var(--zand-300); line-height: 1.4; }
.scope li:last-child { border-bottom: 1px solid var(--zand-300); }
.scope li::before {
  content: ""; position: absolute; left: 0; top: 18px; width: 11px; height: 11px; border-radius: 2px;
  background: var(--leisteen-500);
}

.runin { font-size: 15.5px; line-height: 1.6; color: var(--asfalt-600); }
.runin-h {
  display: inline-block; margin-right: 8px;
  font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--leisteen-600);
}
.on-dark .runin { color: var(--zand-300); }
.on-dark .runin-h { color: var(--zwaai-500); }

@media (max-width: 899px) {
  .svc-grid, .svc-grid.fig-left, .svc-grid-short {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "ann" "fig" "body" "cta";
  }
  .svc-fig { margin-bottom: 26px; }
  .svc-cta { margin-top: 28px; }
}

/* kraanverhuur: the card that carries the business */
.svc-kraan { background: var(--leisteen-100); }
.kcard {
  background: var(--zand-50); border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 1px rgba(var(--scrim), .08), 0 30px 70px -38px rgba(var(--scrim), .45);
}
.kcard-photo { position: relative; aspect-ratio: 21 / 8; }
.kcard-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.kcard-photo .label { top: 16px; bottom: auto; left: 16px; }
.kcard-body {
  position: relative; z-index: 1;
  margin: -120px clamp(14px, 3vw, 40px) clamp(14px, 3vw, 40px);
  padding: clamp(24px, 3vw, 40px) clamp(22px, 3.2vw, 44px) clamp(24px, 2.6vw, 34px);
  background: var(--zand-50); border-radius: 10px;
}
.kcard-head {
  display: flex; align-items: center; justify-content: space-between; gap: 18px 30px; flex-wrap: wrap;
  padding-bottom: 24px; border-bottom: 2px solid var(--asfalt-900);
}
.kcard-head h3 { font-size: clamp(24px, 1vw + 16px, 32px); max-width: 14em; }

.gwent {
  display: grid; grid-template-columns: auto auto; align-items: center; gap: 8px 14px;
  padding: 12px 18px 12px 14px; border-radius: 8px;
  background: var(--zand-100); border: 1px solid var(--zand-300);
}
.gwent-say { grid-column: 1 / -1; font-size: 12.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--asfalt-600); }
.avatars { display: flex; }
.av {
  display: grid; place-items: center; flex: none;
  width: 36px; height: 36px; border-radius: 50%;
  font-weight: 800; font-size: 15px; color: var(--zand-50);
  background: var(--leisteen-600); box-shadow: 0 0 0 2.5px var(--zand-100);
}
.avatars .av + .av { margin-left: -9px; }
.av-2 { background: var(--asfalt-800); }
.av-3 { background: var(--zwaai-600); }
.av-4 { background: var(--leisteen-400); }
.av-5 { background: var(--leisteen-700); }
.gwent-g { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.gwent-g .g-logo { width: 26px; height: 26px; }
.gwent-g .g-score { font-size: 24px; }
.gwent-g .stars { font-size: 16px; }

.kcard-cols {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(26px, 4vw, 64px);
  padding: 28px 0 30px;
}
.kcard-copy { display: flex; flex-direction: column; gap: 16px; font-size: 18px; }
.list-h { font-size: 12.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--leisteen-600); margin-bottom: 10px; }
.scope-big li { font-size: 18.5px; font-weight: 700; padding: 13px 0 13px 30px; }
.scope-big li::before { width: 13px; height: 13px; top: 19px; }
.kcard-foot {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding-top: 24px; border-top: 1px solid var(--zand-300);
}

@media (max-width: 559px) {
  .gwent { grid-template-columns: minmax(0, 1fr); }
  .gwent-g .g-count { flex-basis: 100%; }
  .kcard-body { margin: -48px 10px 10px; padding: 22px 16px 20px; }
  /* the two actions stay side by side on a phone */
  .kcard-foot, .svc-cta { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .kcard-foot .btn, .svc-cta .btn { white-space: normal; text-align: center; padding: 8px 10px; font-size: 15.5px; }
  .kcard-foot .btn svg, .svc-cta .btn svg { display: none; }
}
@media (max-width: 859px) {
  .kcard-photo { aspect-ratio: 4 / 3; }
  .kcard-body { margin-top: -56px; }
  .kcard-cols { grid-template-columns: minmax(0, 1fr); padding: 24px 0; }
  .kcard-copy { font-size: 17px; }
  .scope-big li { font-size: 17px; }
}

/* kipper huren: on the asphalt */
.svc-kipper { background: var(--asfalt-900); color: var(--zand-100); }
.spec { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.spec tr { border-top: 1px solid var(--asfalt-700); }
.spec tr:last-child { border-bottom: 1px solid var(--asfalt-700); }
.spec th { text-align: left; font-weight: 800; padding: 14px 20px 14px 0; vertical-align: top; white-space: nowrap; }
.spec td { padding: 14px 0; color: var(--zand-200); }
@media (max-width: 479px) {
  .spec th, .spec td { display: block; padding: 0; }
  .spec th { padding-top: 12px; }
  .spec td { padding-bottom: 12px; }
}

/* grondverzet */
.svc-grond { background: var(--zand-200); }
.svc-grond .scope li { border-color: var(--zand-300); }
.altijd {
  position: relative;
  padding: 22px 22px 18px; border: 2px solid var(--asfalt-900); border-radius: 6px;
  background: var(--zand-50);
}
.altijd-h {
  position: absolute; top: -12px; left: 16px;
  padding: 2px 10px; background: var(--asfalt-900); color: var(--zand-100); border-radius: 3px;
  font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
}
.altijd ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.altijd li { font-weight: 700; line-height: 1.4; padding-left: 22px; position: relative; }
.altijd li::before { content: ""; position: absolute; left: 0; top: 9px; width: 10px; height: 3px; background: var(--leisteen-600); }

/* one breath: voor thuis */
.band-thuis { background: var(--zwaai-100); }
.band-in {
  display: flex; align-items: center; justify-content: space-between; gap: 14px 40px; flex-wrap: wrap;
  padding-top: 30px; padding-bottom: 30px;
}
.band-in p { font-size: 18.5px; max-width: 52em; line-height: 1.5; }
.band-go {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  font-weight: 800; color: var(--zwaai-600); text-decoration: none;
  border-bottom: 2px solid currentColor; padding-bottom: 2px;
}
.band-go svg { width: 18px; height: 18px; }

/* bulktransport: shorter */
.svc-bulk { background: var(--zand-50); padding: clamp(56px, 6.5vw, 96px) 0; }
.vakken { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.vakken li {
  padding: 16px 14px 14px; border-radius: 4px;
  background: var(--zand-100); border-top: 6px solid var(--asfalt-900);
  font-weight: 800; font-size: 17px; line-height: 1.15;
}
.vakken-note { font-weight: 700; margin-top: -8px; }
@media (max-width: 479px) {
  .vakken { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* gladheidsbestrijding: the winter night */
.svc-glad { background: var(--leisteen-700); color: var(--zand-100); padding: clamp(52px, 6vw, 88px) 0; }
.svc-glad .announce::before { background: linear-gradient(to bottom, var(--leisteen-100) 0 66%, transparent 66% 69%, var(--leisteen-500) 69% 100%); }
.svc-glad .runin { color: var(--leisteen-100); }
.svc-glad .btn-quiet { border-color: var(--leisteen-500); }
.svc-glad .btn-primary { background: var(--zand-50); color: var(--asfalt-900); }
.svc-glad .btn-primary:hover { background: var(--zand-200); }

/* staat uw klus er niet bij? */
.nietbij { padding: clamp(56px, 7vw, 104px) 0; border-top: 3px solid var(--asfalt-900); border-bottom: 3px solid var(--asfalt-900); }
.nietbij-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px clamp(36px, 5vw, 88px); align-items: center; }
.nietbij h2 { font-size: var(--h2); }
.nietbij-body { display: flex; flex-direction: column; gap: 22px; }
.nietbij-body p { font-size: 19px; }
@media (max-width: 859px) { .nietbij-in { grid-template-columns: minmax(0, 1fr); } }

/* one breath: the werkgebied-lint, a piece of road */
.lint { position: relative; background: var(--asfalt-900); color: var(--zand-100); padding: 30px 0; }
.lint::before, .lint::after {
  content: ""; position: absolute; left: 0; right: 0; height: 2px; background: var(--zand-100); opacity: .8;
}
.lint::before { top: 10px; }
.lint::after { bottom: 10px; }
.lint-in { display: flex; align-items: center; gap: 12px 28px; }
.lint-lead { flex: none; font-size: 12.5px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: var(--zwaai-500); }
.lint-clip { overflow: hidden; min-width: 0; }
.lint-list { list-style: none; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 0; margin-left: -48px; }
.lint-list li { display: flex; align-items: center; font-weight: 800; font-size: 17px; }
.lint-list li::before {
  content: ""; display: block; width: 20px; height: 4px; margin: 0 14px; border-radius: 1px;
  background: var(--zwaai-500);
}
@media (max-width: 759px) {
  .lint-in { flex-direction: column; align-items: flex-start; }
  .lint-list li { font-size: 16px; }
}

/* the owner */
.owner { background: var(--zand-50); padding: clamp(64px, 8vw, 120px) 0; }
.owner-grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 104px); align-items: center; }
.owner-photo { overflow: hidden; border-radius: var(--r); aspect-ratio: 4 / 5; background: var(--zand-200); }
.owner-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 30% 30%; }
.owner-text { display: flex; flex-direction: column; gap: 18px; max-width: 38em; }
.owner-text .announce { margin-bottom: 8px; }
.owner-first { font-size: clamp(21px, .6vw + 17px, 26px); font-weight: 700; line-height: 1.4; }
.owner-text .pair { margin-top: 14px; }
@media (max-width: 859px) {
  .owner-grid { grid-template-columns: minmax(0, 1fr); }
  .owner-photo { max-width: 460px; }
}

/* over ons + werkgebied: one ground each, a road edge between */
.about { background: var(--asfalt-900); color: var(--zand-100); padding: clamp(64px, 8vw, 120px) 0 clamp(56px, 6vw, 88px); }
.about-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: clamp(32px, 5vw, 88px); align-items: center; margin-bottom: clamp(40px, 5vw, 72px); }
.about-text { display: flex; flex-direction: column; gap: 16px; }
.about-text .announce { margin-bottom: 10px; }
.about-fig { aspect-ratio: 16 / 9; }
@media (max-width: 899px) { .about-top { grid-template-columns: minmax(0, 1fr); } }

.materieel { width: 100%; border-collapse: collapse; font-size: 16.5px; }
.materieel caption {
  text-align: left; padding-bottom: 14px;
  font-size: clamp(24px, 1vw + 16px, 32px); font-weight: 800; letter-spacing: -.012em;
}
.materieel thead th {
  text-align: left; padding: 0 0 10px; font-size: 12px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  color: var(--zwaai-500); border-bottom: 2px solid var(--zand-100);
}
.materieel .grp th {
  text-align: left; padding: 22px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--leisteen-100);
}
.materieel tbody tr:not(.grp) { border-bottom: 1px solid var(--asfalt-700); }
.materieel th[scope="row"] { width: 40%; text-align: left; font-weight: 800; padding: 14px 32px 14px 0; vertical-align: top; }
.materieel td { padding: 14px 0; color: var(--zand-200); vertical-align: top; font-variant-numeric: tabular-nums; }
@media (max-width: 719px) {
  .materieel thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .materieel th[scope="row"], .materieel td { display: block; width: auto; padding: 0; }
  .materieel th[scope="row"] { padding-top: 14px; }
  .materieel td { padding: 4px 0 14px; }
}

.sec-cta { display: flex; align-items: center; gap: 12px 22px; flex-wrap: wrap; margin-top: clamp(32px, 4vw, 52px); }
.sec-cta p { font-size: 19px; font-weight: 700; }
.sec-cta .btn { white-space: normal; text-align: center; }

.area {
  position: relative; background: var(--asfalt-800); color: var(--zand-100);
  padding: clamp(64px, 7vw, 104px) 0;
}
.area::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: repeating-linear-gradient(90deg, var(--zwaai-500) 0 28px, transparent 28px 50px);
}
.area-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.area-text { display: flex; flex-direction: column; gap: 22px; }
.area-text .announce { margin-bottom: 0; }
.area-text .sec-cta { margin-top: 4px; }
.places { list-style: none; counter-reset: p; columns: 2; column-gap: 24px; }
.places li { counter-increment: p; break-inside: avoid; padding: 6px 0; border-bottom: 1px solid var(--asfalt-700); font-weight: 700; }
.places li:first-child { color: var(--zwaai-500); }
.area-fig { aspect-ratio: 3 / 2; }
.area-map { position: sticky; top: calc(var(--head-h) + 20px); }
.map {
  height: clamp(380px, 44vw, 620px); border-radius: var(--r); overflow: hidden;
  background: var(--asfalt-900); box-shadow: 0 0 0 1px var(--asfalt-700);
}
@media (max-width: 899px) {
  .area-grid { grid-template-columns: minmax(0, 1fr); }
  .area-map { position: static; order: -1; }
  .map { height: 360px; }
}

/* leaflet, in the page's inks */
.map .leaflet-container, .map.leaflet-container { font-family: "Mulish", system-ui, sans-serif; background: var(--asfalt-900); }
.map .leaflet-tile-pane { filter: grayscale(1) contrast(1.05); }
.map .leaflet-tint-pane { mix-blend-mode: color; pointer-events: none; }
.map-wash { position: absolute; left: -50000px; top: -50000px; width: 100000px; height: 100000px; background: var(--leisteen-500); opacity: .85; }
.map .leaflet-control-attribution { background: rgba(var(--scrim), .78); color: var(--zand-300); font-size: 10.5px; }
.map .leaflet-control-attribution a { color: var(--zand-100); }
.map .leaflet-bar a { background: var(--asfalt-900); color: var(--zand-100); border-bottom-color: var(--asfalt-700); }
.map .leaflet-bar a:hover { background: var(--asfalt-700); }
.map .leaflet-bar { border: 1px solid var(--asfalt-700); box-shadow: none; }
.pin-dot { width: 14px; height: 14px; border-radius: 50%; background: var(--zwaai-500); box-shadow: 0 0 0 3px var(--asfalt-900); }
.pin-home { width: 46px; height: 38px; padding: 5px; border-radius: 6px; background: var(--zand-50); box-shadow: 0 6px 18px -6px rgba(var(--scrim), .8); }
.pin-home img { width: 36px; height: auto; }
.leaflet-tooltip.place-tip {
  background: var(--asfalt-900); color: var(--zand-100); border: 0; border-radius: 4px;
  box-shadow: none; font-weight: 800; font-size: 12.5px; padding: 2px 7px;
}
.leaflet-tooltip.place-tip::before { display: none; }
.leaflet-tooltip.place-home { background: var(--zand-50); color: var(--asfalt-900); font-size: 13.5px; }

/* reviews */
.reviews { background: var(--zand-200); padding: clamp(64px, 8vw, 120px) 0; }
.reviews-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(26px, 3vw, 40px); }
.reviews-head .announce { margin-bottom: 0; }
.g-badge { display: flex; align-items: center; gap: 14px; padding: 4px 0; }
.g-badge .g-logo { width: 44px; height: 44px; }
.g-badge-body { display: flex; flex-direction: column; gap: 2px; }
.g-word { font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.g-badge .g-score { font-size: 20px; font-weight: 800; }
.g-badge .stars { font-size: 16px; }
.g-badge .g-count { font-size: 14px; }

.rcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.rcard {
  display: flex; flex-direction: column; gap: 14px;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--zand-50); border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(var(--scrim), .07), 0 18px 40px -30px rgba(var(--scrim), .5);
}
.rcard-head { display: flex; align-items: center; gap: 14px; }
.rcard .av { width: 46px; height: 46px; font-size: 19px; background: var(--leisteen-600); box-shadow: none; }
.rcard-who { display: flex; flex-direction: column; line-height: 1.25; margin-right: auto; }
.rcard-who b { font-size: 17.5px; }
.rcard-who span { font-size: 14.5px; color: var(--asfalt-600); }
.g-mini { width: 22px; height: 22px; flex: none; }
.rcard-meta { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: var(--asfalt-600); }
.stars-own { font-size: 21px; }
.rcard-text { font-size: 17.5px; line-height: 1.55; }
@media (max-width: 759px) { .rcards { grid-template-columns: 1fr; } }

/* one breath: bel-band */
.belband { background: var(--leisteen-600); color: var(--zand-50); }
.belband-in { display: flex; align-items: center; justify-content: space-between; gap: 18px 40px; flex-wrap: wrap; padding-top: 30px; padding-bottom: 30px; }
.belband-say { display: flex; align-items: baseline; gap: 6px 22px; flex-wrap: wrap; }
.belband-say > span { font-size: 17px; font-weight: 700; color: var(--leisteen-100); }
.belband-num { font-size: clamp(30px, 1.6vw + 18px, 44px); font-weight: 900; letter-spacing: -.01em; text-decoration: none; line-height: 1; }
.belband-num:hover { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 6px; }

/* faq */
.faq { background: var(--zand-100); padding: clamp(64px, 8vw, 120px) 0; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 0 clamp(36px, 6vw, 104px); align-items: start; }
.faq-cta { grid-column: 2; }
.faq-list { border-top: 2px solid var(--asfalt-900); }
.faq details { border-bottom: 1px solid var(--zand-300); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  padding: 20px 0; cursor: pointer; list-style: none;
  font-size: 19px; font-weight: 800; line-height: 1.3;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 22px; height: 22px; flex: none; color: var(--leisteen-600); transition: transform .2s; }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding: 0 0 22px; max-width: 40em; font-size: 17.5px; }
@media (max-width: 899px) {
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .faq-cta { grid-column: 1; }
}

/* contact */
.contact { background: var(--zand-50); padding: clamp(64px, 8vw, 120px) 0; }
.contact-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(36px, 6vw, 104px); align-items: start; }
.contact-text { display: flex; flex-direction: column; gap: 24px; }
.contact-text .announce { margin-bottom: 0; }
.facts { display: flex; flex-direction: column; border-top: 1px solid var(--zand-300); }
.facts > div { display: grid; grid-template-columns: 14em minmax(0, 1fr); gap: 4px 20px; padding: 14px 0; border-bottom: 1px solid var(--zand-300); }
.facts dt { font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--asfalt-600); padding-top: 3px; }
.facts dd { font-weight: 700; }
.facts a { text-decoration-thickness: 2px; text-underline-offset: 3px; }

.form {
  display: flex; flex-direction: column; gap: 18px;
  padding: clamp(24px, 3vw, 40px);
  background: var(--zand-100); border-radius: 10px; border: 1px solid var(--zand-300);
}
.form-h { font-size: clamp(22px, .8vw + 16px, 28px); font-weight: 800; letter-spacing: -.01em; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
.field label { font-weight: 800; font-size: 15px; }
.opt { font-weight: 600; color: var(--asfalt-600); font-size: 13.5px; margin-left: 6px; }
.field input, .field textarea {
  width: 100%; padding: 14px 14px; border: 2px solid var(--zand-300); border-radius: 6px;
  background: var(--zand-50); color: var(--asfalt-900);
  font: inherit; font-size: 17px;
  transition: border-color .15s;
}
.field textarea { resize: vertical; min-height: 140px; }
.field input::placeholder, .field textarea::placeholder { color: var(--asfalt-600); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--leisteen-600); box-shadow: 0 0 0 3px var(--leisteen-100); }
.field input:user-invalid, .field textarea:user-invalid { border-color: var(--signaalrood); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.btn-send { align-self: flex-start; min-width: 200px; }
.form-note { font-size: 14.5px; color: var(--asfalt-600); }
@media (max-width: 899px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 559px) {
  .field-row { grid-template-columns: 1fr; }
  .facts > div { grid-template-columns: 1fr; }
  .btn-send { align-self: stretch; }
}

/* footer */
.foot { position: relative; background: var(--asfalt-900); color: var(--zand-100); padding: clamp(56px, 6vw, 88px) 0 0; }
.foot::before {
  content: ""; position: absolute; left: 0; right: 0; top: 14px; height: 2px; background: var(--zand-100); opacity: .8;
}
.foot-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) repeat(3, minmax(0, 1fr)); gap: 36px 40px; padding-bottom: 48px; }
.foot-mark { width: 84px; margin-bottom: 16px; }
.foot-name { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -.02em; }
.foot-tag { font-size: 14.5px; color: var(--zand-300); margin-top: 6px; }
.foot-place { margin-top: 16px; font-weight: 700; color: var(--leisteen-100); }
.foot-h { font-size: 12.5px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--zwaai-500); margin-bottom: 14px; }
.foot-col ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.foot-col a { text-decoration: none; font-weight: 700; }
.foot-col ul a:hover { text-decoration: underline; text-underline-offset: 3px; }
.pair-stack { flex-direction: column; align-items: flex-start; }
.foot-mail { margin-top: 16px; }
.foot-mail a { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; word-break: break-all; }
.foot-base { border-top: 1px solid var(--asfalt-700); padding-top: 22px; padding-bottom: 26px; font-size: 14px; color: var(--zand-300); }
@media (max-width: 979px) { .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 559px) { .foot-grid { grid-template-columns: 1fr; } }

/* sticky call + WhatsApp, phones only */
.sticky { display: none; }
@media (max-width: 759px) {
  .sticky {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: var(--asfalt-900);
    box-shadow: 0 -10px 24px -12px rgba(var(--scrim), .6);
  }
  .sticky .btn { min-height: 50px; padding: 0 12px; }
  body { padding-bottom: calc(66px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; }
}

/* bedankt */
.thanks { min-height: calc(100vh - var(--head-h)); display: grid; align-items: center; padding: clamp(48px, 8vw, 120px) 0; }
.thanks-card {
  max-width: 720px; display: flex; flex-direction: column; gap: 20px;
  padding: clamp(28px, 4vw, 56px); background: var(--zand-50); border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(var(--scrim), .08), 0 30px 70px -38px rgba(var(--scrim), .45);
}
.thanks-card h1 { font-size: var(--h2); }
.thanks-card .announce { margin-bottom: 6px; }
.thanks-back a { font-weight: 800; text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* ---------- The fold on a phone: the road ----------
   Below 760px the fold is laid on the asphalt: the name, its small line and the slogan centred on the
   road, all five services as bands under one tab (Wat we doen · 5 diensten), then Bel / WhatsApp. Michael and the rating leave the fold and make
   the seam: one card, half on the road and half on the page below. The strip of road under the fold
   steps aside. At the very top the header steps aside too and only Menu shows; the small name comes
   back once the big one has scrolled under it (the classes at-top and name-in-view, kept by script.js). */

.lockup-mark-dark, .lockup-slogan, .wat, .seam { display: none; }

@media (max-width: 759px) {
  :root { --band: clamp(78px, calc((100svh - 66px - 330px) / 5 - 5px), 124px); }

  .site-head { transition: background-color .2s, border-color .2s; }
  .at-top .site-head:not(:has(.nav.open)) { background: transparent; border-bottom-color: transparent; }
  .at-top .site-head:not(:has(.nav.open)) .menu-btn { color: var(--zand-50); border-color: var(--zand-50); }
  .brand, .head-call { transition: opacity .2s, visibility .2s; }
  .name-in-view .brand, .name-in-view .head-call { opacity: 0; visibility: hidden; }

  .fold {
    position: relative; margin-top: calc(-1px - var(--head-h)); padding: 0 0 34px;
    background: var(--asfalt-900); color: var(--zand-100);
  }
  .fold::before, .fold::after {   /* the road's two edge lines, running down the phone */
    content: ""; position: absolute; top: 0; bottom: 0; width: 2px; background: var(--zand-100); opacity: .8;
  }
  .fold::before { left: 8px; }
  .fold::after { right: 8px; }
  .fold-grid {
    row-gap: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: none;
    grid-template-areas: "lock" "wat" "kraan" "kipper" "grond" "bulk" "glad" "panel";
  }

  .fold .lockup {
    grid-area: lock; display: flex; flex-direction: column; align-items: center; text-align: center;
    margin: 0; padding: 8px 0 20px;
  }
  .fold .lockup-mark { display: none; }
  .fold .lockup-mark-dark { display: block; width: 62px; margin: 0 0 16px; }
  .fold .lockup-name { font-size: 42px; line-height: .98; color: var(--zand-50); }
  .fold .lockup-tag { font-size: 15px; margin-top: 7px; color: var(--zand-300); }
  .fold .lockup-slogan { display: block; margin-top: 16px; font-size: 19px; font-weight: 700; line-height: 1.3; color: var(--zand-100); }
  .fold .lockup-slogan span { display: block; }   /* the comma is the line break */

  .fold .own, .fold .fold-sub, .fold .fold-panel .g-rate { display: none; }
  .fold .fold-panel { margin: 16px 0 0; padding: 0; gap: 0; background: none; border: 0; color: var(--asfalt-900); }
  .trust { display: none; }

  /* all five services, one band each: the words on the left, the picture fading in from the right */
  .fold .tile { height: var(--band); margin: 0 -8px 5px; border-radius: 5px; background: var(--asfalt-800); }
  .fold .tile img {
    left: auto; width: 68%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 52%); mask-image: linear-gradient(90deg, transparent 0%, #000 52%);
  }
  .fold .tile::after { background: linear-gradient(90deg, rgba(var(--scrim), .55) 0%, rgba(var(--scrim), .25) 50%, rgba(var(--scrim), 0) 70%); }
  .fold .tile-klus { text-shadow: 0 1px 8px rgba(var(--scrim), .9); }
  .fold .tile-name { text-shadow: 0 1px 10px rgba(var(--scrim), .8); }
  .fold .tile .tile-cap, .fold .tile-kraan .tile-cap { top: 0; padding: 0 12px 0 16px; align-content: center; }
  .fold .tile .tile-klus, .fold .tile-kraan .tile-klus { font-size: 13px; margin-bottom: 3px; color: var(--zand-200); }
  .fold .tile .tile-name, .fold .tile-kraan .tile-name { font-size: 23px; }
  .fold .tile .tile-go, .fold .tile-kraan .tile-go { display: grid; width: 38px; height: 38px; align-self: center; }
  .fold .tile .tile-go svg { width: 19px; height: 19px; }
  .fold .tile-kraan img { object-position: 66% 62%; }
  .fold .tile-kipper img { object-position: 50% 58%; }
  .fold .tile-grond img { object-position: 50% 62%; }
  .fold .tile-bulk img { object-position: 60% 62%; }
  .fold .tile-glad img { object-position: 50% 55%; }

  /* the title over the five: a tab on the first band, in the band's own shade, so the five read as one list */
  .fold .wat {
    grid-area: wat; justify-self: start; display: flex; align-items: baseline; gap: 12px; margin: 4px -8px 0; padding: 12px 18px 10px 16px;
    background: linear-gradient(90deg, rgba(var(--scrim), .55) 0%, rgba(var(--scrim), .25) 50%, rgba(var(--scrim), 0) 70%) 0 0 / calc(100vw - 2 * var(--pad) + 16px) 100% no-repeat, var(--asfalt-800);
    border-top: 3px solid var(--zwaai-500); border-radius: 5px 5px 0 0;
    font-size: 17px; line-height: 1.1; letter-spacing: 0; color: var(--zand-50);
  }
  .fold .wat-n { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--zand-300); }
  .fold .tile-kraan { border-top-left-radius: 0; }

  /* the seam: Michael and the rating, one card across the road's end */
  .seam {
    display: block; position: relative; padding: 0 var(--pad);
    background: linear-gradient(to bottom, var(--asfalt-900) 0 50%, var(--leisteen-100) 50% 100%);
  }
  .seam::before, .seam::after {   /* the road's edge lines, down to the card */
    content: ""; position: absolute; top: 0; height: 50%; width: 2px; background: var(--zand-100); opacity: .8;
  }
  .seam::before { left: 8px; }
  .seam::after { right: 8px; }
  .seam-card {
    position: relative; background: var(--zand-50); border-radius: 14px; padding: 20px 18px 18px;
    box-shadow: 0 0 0 1px rgba(var(--scrim), .06), 0 22px 44px -24px rgba(var(--scrim), .6);
  }
  .seam-own {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 16px;
    padding-bottom: 18px; border-bottom: 1px solid var(--zand-300);
  }
  .seam-pic { width: 64px; grid-row: 1 / span 2; align-self: center; box-shadow: 0 0 0 4px var(--asfalt-900), 0 0 0 6px var(--leisteen-500); }
  .seam-line { margin: 0; grid-column: 2; align-self: end; }
  .seam-line p { font-size: 19px; line-height: 1.16; font-weight: 800; letter-spacing: -.016em; text-wrap: balance; }
  .seam-line p span { display: block; }
  .seam-who { grid-column: 2; align-self: start; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-top: 6px; font-size: 14.5px; line-height: 1.25; }
  .seam-who b { font-weight: 800; }
  .seam-who span { font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--leisteen-600); }
  .seam-rate { padding-top: 16px; }
  .seam-rate .g-logo { width: 38px; height: 38px; }
  .seam-rate .g-score { font-size: 28px; }
  .seam-rate .stars { font-size: 20px; }
}

/* ---------- Buttons on a phone ----------
   Below 760px every button runs the full width, its words centred, one under the other; the sticky
   bar at the bottom keeps its two halves. The service cards' pairs get the full button back (size and
   arrow), which they gave up to sit side by side. */
@media (max-width: 759px) {
  .btn { width: 100%; white-space: normal; text-align: center; }
  .pair, .nav-call, .svc-cta, .kcard-foot, .sec-cta, .pair-stack { display: flex; flex-direction: column; align-items: stretch; }
  .kcard-foot .btn, .svc-cta .btn { padding: 0 22px; font-size: 16.5px; }
  .kcard-foot .btn svg, .svc-cta .btn svg { display: block; }
  .btn-send { align-self: stretch; min-width: 0; }
  .belband .pair { flex: 1 1 100%; }   /* on its own line under the number */
}


/* ── sample view: the form sends nothing ──────────────────────────────
   This demo is disconnected from the server: no /contact, no /wa, no /bel. The
   notice below appears as soon as someone presses send, so the button does not
   feel dead. It goes the day this page is the real site. */
.form-demo{
  margin:0;padding:12px 14px;border-left:3px solid var(--zwaai-500);
  background:var(--zand-100);color:var(--asfalt-900);
  font:400 16px/1.5 "Mulish", system-ui, sans-serif;
}
.form-demo a{color:var(--leisteen-700)}