:root {
  --ink: #0C0A09;
  --ink-soft: #57534E;
  --paper: #FAFAF9;
  --surface: #FFFFFF;
  --line: rgba(12,10,9,0.12);
  --green: #159A1B;
  --green-deep: #0C6E12;
  --green-darker: #084B0C;
  --sans: "Inter", -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --mono: ui-monospace, "SF Mono", "Cascadia Code", Consolas, monospace;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(20px, 4vw, 56px); }

header.site { border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--paper); z-index: 40; }
.nav { display: flex; align-items: center; justify-content: space-between; padding: 18px clamp(20px, 4vw, 56px); }
.wordmark img { height: 36px; width: auto; display: block; }
.navlinks { display: flex; align-items: center; gap: 30px; }
.navlinks a { font-size: 0.92rem; font-weight: 500; color: var(--ink-soft); transition: color 0.2s ease; }
.navlinks a:hover { color: var(--ink); }
.nav-toggle { display: none; }
@media (max-width: 860px) {
  .nav { flex-wrap: wrap; gap: 12px; }
  .wordmark { order: 1; }
  .navcta { order: 2; }
  .nav-toggle {
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 5px; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--surface); cursor: pointer; padding: 0; order: 3; flex-shrink: 0;
  }
  .nav-toggle span { display: block; width: 18px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.2s ease; }
  .nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .navlinks {
    order: 4; flex-direction: column; align-items: stretch; gap: 0;
    width: 100%; max-height: 0; overflow: hidden; opacity: 0;
    transition: max-height 0.3s ease, opacity 0.2s ease, margin-top 0.3s ease;
    margin-top: 0;
  }
  .navlinks.open { max-height: 480px; opacity: 1; margin-top: 14px; }
  .navlinks a { padding: 12px 4px; border-bottom: 1px solid var(--line); width: 100%; }
}
.navcta {
  background: var(--green-deep);
  color: #fff;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 13px 22px;
  border-radius: 999px;
  transition: background 0.2s ease;
}
.navcta:hover { background: var(--green-darker); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.eyebrow::before { content: ""; width: 24px; height: 1px; background: var(--ink-soft); }
.eyebrow.on-dark { color: rgba(250,250,249,0.8); }
.eyebrow.on-dark::before { background: rgba(250,250,249,0.5); }

/* ---------- Home hero ---------- */
.hero-headline-zone { padding: clamp(40px, 6vw, 68px) 0 44px; text-align: center; }
.hero-headline-zone h1 {
  font-family: var(--sans);
  font-weight: 900;
  font-size: clamp(2.6rem, 6.5vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  color: var(--ink);
  margin: 0;
}
.hero-sub { font-size: 1.35rem; font-weight: 600; line-height: 1.5; color: var(--ink); max-width: 40ch; margin: 20px auto 0; }
.hero-actions { display: flex; justify-content: center; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 32px; }
.hero-photo-zone { position: relative; }
.hero-photo-zone > img {
  width: 100%;
  height: min(70vh, 720px);
  object-fit: cover;
  object-position: center 62%;
  display: block;
  filter: contrast(1.02) saturate(0.96);
}

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-primary:hover { background: var(--ink-soft); transform: translateY(-1px); }
.btn-hero-primary {
  background: var(--green);
  color: #fff;
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  display: inline-block;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-hero-primary:hover { background: var(--green-deep); transform: translateY(-1px); }
.btn-secondary {
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1px solid var(--ink);
  display: inline-block;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-secondary:hover { background: var(--ink); color: #fff; }
.btn-secondary.on-dark { color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-secondary.on-dark:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ---------- Vertrouwensband ---------- */
.trust-section { background: var(--paper); color: var(--ink); }
.trust-inner { max-width: 1240px; margin: 0 auto; padding: clamp(48px, 6vw, 76px) clamp(20px, 4vw, 56px); }
.trust-lead {
  font-family: var(--mono);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-soft);
  margin: 0 0 clamp(28px, 4vw, 44px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.trust-lead::before { content: ""; width: 26px; height: 1px; background: rgba(12,10,9,0.3); }
.trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.trust-item { display: flex; flex-direction: column; gap: 16px; padding: 4px clamp(20px, 2.4vw, 34px); border-left: 1px solid var(--line); }
.trust-item:first-child { border-left: none; padding-left: 0; }
.trust-icon { width: 34px; height: 34px; color: var(--ink); stroke-width: 1.4; }
.trust-item h3 { font-size: 1.05rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; line-height: 1.25; color: var(--ink); }
.trust-item p { margin: 0; font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); }
@media (max-width: 900px) {
  .trust-grid { grid-template-columns: repeat(2, 1fr); gap: 40px 0; }
  .trust-item:nth-child(-n+2) { padding-top: 0; }
  .trust-item:nth-child(odd) { border-left: none; padding-left: 0; }
  .trust-item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 480px) {
  .trust-grid { grid-template-columns: 1fr; gap: 32px; }
  .trust-item { border-left: none; padding: 0; }
}

/* ---------- Section shell ---------- */
.section { padding: clamp(64px, 9vw, 120px) 0; border-bottom: 1px solid var(--line); }
.section-head { max-width: 1100px; }

/* Ruimte tussen een sectiekop en wat erop volgt. De kop zelf heeft geen
   ondermarge: in het oorspronkelijke ontwerp kwam die ruimte altijd van een
   .lead of van een raster met een eigen bovenmarge. Blokken die daar direct
   op volgen plakten daardoor tegen de titel.
   De tijdlijn staat hier bewust NIET tussen: die heeft een veel ruimere eigen
   bovenmarge nodig omdat de tekst van stap 02 bóven de lijn uitsteekt. */
.section-head + .content-split,
.section-head + .content-text,
.section-head + .faq-list { margin-top: clamp(26px, 3vw, 38px); }
.section-head h2 { font-size: clamp(1.7rem, 3vw, 2.6rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.1; margin: 20px 0 0; }
.section-head .lead { font-size: 1.06rem; line-height: 1.6; color: var(--ink-soft); margin: 20px 0 0; max-width: 52ch; }

/* ---------- Vloeropbouw doorsnede ---------- */
.buildup { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: stretch; margin-top: clamp(40px, 5vw, 64px); }
.buildup-stack { display: flex; flex-direction: column; gap: 4px; }
.layer-band {
  position: relative;
  display: grid;
  grid-template-columns: 52px 1fr auto;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  cursor: pointer;
  font-family: var(--sans);
  color: var(--ink);
  padding: 0 22px;
  flex: 1 1 0;
  min-height: 64px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 6px;
  transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.layer-band .l-num { font-family: var(--mono); font-size: 0.8rem; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.layer-band .l-name { font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; }
.layer-band .l-plus {
  width: 22px; height: 22px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  color: var(--ink-soft);
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.layer-band .l-plus svg { width: 12px; height: 12px; }
.layer-band:hover { transform: translateX(4px); }
.layer-band[aria-selected="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); box-shadow: 0 18px 40px -18px rgba(12,10,9,0.5); }
.layer-band[aria-selected="true"] .l-num { color: rgba(250,250,249,0.6); }
.layer-band[aria-selected="true"] .l-plus { background: var(--paper); color: var(--ink); border-color: var(--paper); }

.buildup-detail {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px -30px rgba(12,10,9,0.25);
}
.d-photo-wrap { position: relative; }
.d-photo { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; background: var(--line); }
.d-loc-badge { position: absolute; top: 14px; left: 14px; z-index: 2; background: rgba(12,10,9,0.72); color: #fff; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.06em; padding: 6px 12px; border-radius: 20px; }
.d-body { padding: clamp(26px, 3vw, 38px); display: flex; flex-direction: column; flex-grow: 1; }
.d-eyebrow { font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); margin: 0; }
.d-body h3 { font-size: clamp(1.4rem, 2.2vw, 1.85rem); font-weight: 800; letter-spacing: -0.02em; margin: 12px 0 0; }
.d-text { font-size: 1rem; line-height: 1.62; color: var(--ink-soft); margin: 12px 0 0; }
.btn-detail {
  align-self: flex-start;
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--ink);
  color: #fff;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 12px 22px;
  border-radius: 999px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.btn-detail:hover, .btn-detail:focus-visible { background: var(--ink-soft); transform: translateX(2px); }
.btn-detail svg { width: 15px; height: 15px; }
@media (max-width: 860px) { .buildup { grid-template-columns: 1fr; } }
@media (max-width: 700px) {
  .hero-photo-zone img, .page-hero img { height: 340px; }
}

/* ---------- Diensten grid (used on home + related-services) ---------- */
.services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(18px, 2.4vw, 28px); margin-top: clamp(36px, 5vw, 56px); }
.services-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.services-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .services-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .services-grid.cols-4 { grid-template-columns: 1fr; } }
.service-card {
  background: var(--surface);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgba(12,10,9,0.06);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.service-card:hover, .service-card:focus-within { box-shadow: 0 20px 40px -18px rgba(12,10,9,0.3); transform: translateY(-3px); }
.service-card .s-thumb { aspect-ratio: 4/3; overflow: hidden; background: var(--line); }
.service-card .s-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.service-card:hover .s-thumb img { transform: scale(1.05); }
.service-card .s-body { padding: 20px 20px 24px; display: flex; flex-direction: column; gap: 8px; flex-grow: 1; }
.service-card .s-num { font-family: var(--mono); font-size: 0.72rem; color: var(--ink-soft); }
.service-card h3 { font-size: 1.02rem; font-weight: 700; margin: 0; letter-spacing: -0.01em; }
.service-card p { font-size: 0.88rem; line-height: 1.5; color: var(--ink-soft); margin: 0; flex-grow: 1; }
.service-card .s-link { margin-top: 10px; font-size: 0.84rem; font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.service-card .s-link svg { width: 13px; height: 13px; transition: transform 0.2s ease; }
.service-card:hover .s-link svg { transform: translateX(3px); }
@media (max-width: 1024px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .services-grid { grid-template-columns: 1fr; } }

/* Afsluitende kaart die doorverwijst naar de gids — vult de grid tot een
   volledig getal (12 i.p.v. 11 diensten) en oogt daardoor als bedoeld
   i.p.v. als een gat in de laatste rij. */
.service-card.s-more {
  background: var(--green); color: var(--paper);
  padding: clamp(24px, 3vw, 32px);
}
.service-card.s-more .s-more-icon {
  width: 40px; height: 40px; border-radius: 50%;
  background: rgba(250,250,249,0.16); display: grid; place-items: center;
  margin-bottom: 16px; color: var(--paper); flex-shrink: 0;
}
.service-card.s-more .s-more-icon svg { width: 20px; height: 20px; }
.service-card.s-more h3 { color: var(--paper); }
.service-card.s-more p { color: rgba(250,250,249,0.85); }
.service-card.s-more .s-link { color: var(--paper); }
.service-card.s-more:hover { box-shadow: 0 20px 40px -18px rgba(12,106,18,0.55); }

/* ---------- Werkwijze (luxe tijdlijn) ---------- */
.timeline {
  position: relative;
  display: grid;
  /* Kolommen volgen het aantal stappen. Stond hier repeat(6, 1fr), dan drukte
     een tijdlijn van 3 stappen zich in de linkerhelft en liep de lijn leeg
     door naar rechts. Zo verdeelt elke tijdlijn zich over de volle breedte. */
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  margin-top: clamp(90px, 9vw, 130px);
  padding: 100px 0;
}
.timeline::before {
  content: "";
  position: absolute;
  left: 2%; right: 2%;
  top: 50%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line) 8%, var(--line) 92%, transparent);
}
.t-step {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.t-node {
  position: relative;
  z-index: 2;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--paper);
  border: 1.5px solid var(--ink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 0.86rem;
  transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
}
.t-step:hover .t-node {
  background: var(--ink);
  color: var(--paper);
  transform: scale(1.12);
  box-shadow: 0 10px 24px -10px rgba(12,10,9,0.4);
}
.t-content {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 90%;
  text-align: center;
}
.t-content h4 { margin: 0 0 8px; font-size: 1rem; font-weight: 700; letter-spacing: -0.01em; }
.t-content p { margin: 0; font-size: 0.84rem; color: var(--ink-soft); line-height: 1.55; }
.t-step.below .t-content { top: calc(100% + 24px); }
.t-step.above .t-content { bottom: calc(100% + 24px); }

@media (max-width: 860px) {
  .timeline {
    display: flex;
    flex-direction: column;
    padding: 8px 0;
    margin-top: clamp(36px, 5vw, 56px);
    gap: 0;
  }
  .timeline::before {
    left: 22px; right: auto; top: 8px; bottom: 8px;
    width: 1px; height: auto;
    background: var(--line);
  }
  .t-step { justify-content: flex-start; align-items: flex-start; padding: 0 0 40px; }
  .t-step:last-child { padding-bottom: 0; }
  .t-content, .t-step.above .t-content, .t-step.below .t-content {
    position: static;
    transform: none;
    width: auto;
    text-align: left;
    margin-left: 20px;
    padding-top: 10px;
  }
}

/* ---------- Projecten ---------- */
.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.6vw, 28px); margin-top: clamp(36px, 5vw, 56px); }
.project-card { display: flex; flex-direction: column; }
.p-media { position: relative; border-radius: 12px; overflow: hidden; aspect-ratio: 4/5; }
.p-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.project-card:hover .p-media img { transform: scale(1.06); }
.p-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(12,10,9,0.75) 100%); }
.p-tag { position: absolute; left: 16px; bottom: 16px; right: 16px; z-index: 2; color: #fff; }
.p-tag .p-loc { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; }
.p-tag .p-title { font-size: 1.02rem; font-weight: 700; margin: 4px 0 0; }
.p-story { margin: 12px 0 0; font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }
@media (max-width: 860px) { .projects-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .projects-grid { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq-list { margin-top: clamp(32px, 4vw, 48px); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 4px; font-size: 1.04rem; font-weight: 700; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item .f-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  border: 1px solid var(--line);
  display: grid; place-items: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.faq-item .f-icon svg { width: 13px; height: 13px; }
.faq-item[open] .f-icon { transform: rotate(45deg); background: var(--ink); color: #fff; border-color: var(--ink); }
.faq-item p { margin: 0 4px 24px; color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; max-width: 68ch; }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px); margin-top: clamp(36px, 5vw, 56px); align-items: start; }
.contact-info h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 18px; letter-spacing: -0.01em; }
.contact-info .c-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; font-size: 0.96rem; }
.contact-info .c-row svg { width: 18px; height: 18px; color: var(--ink-soft); flex-shrink: 0; }
.contact-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.contact-form .full { grid-column: 1 / -1; }
.contact-form label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 7px; }
.contact-form input, .contact-form textarea, .contact-form select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px 14px;
  font-family: var(--sans);
  font-size: 0.94rem;
  color: var(--ink);
  background: var(--surface);
}
.contact-form input:focus, .contact-form textarea:focus, .contact-form select:focus { outline: 2px solid var(--ink); outline-offset: 1px; }
.contact-form textarea { resize: vertical; min-height: 110px; }
.contact-form .btn-primary { margin-top: 4px; border: none; cursor: pointer; font-family: var(--sans); }
@media (max-width: 860px) { .contact-grid { grid-template-columns: 1fr; } .contact-form { grid-template-columns: 1fr; } }

/* ---------- CTA band ---------- */
.cta-band { background: var(--ink); color: var(--paper); }
.cta-band .wrap { padding: clamp(56px, 8vw, 92px) clamp(20px, 4vw, 56px); display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; max-width: 640px; }
.cta-band .btn-primary { background: var(--paper); color: var(--ink); }
.cta-band .btn-primary:hover { background: #fff; color: var(--ink); }

/* ---------- Footer ---------- */
footer.site { padding: 48px 0 40px; border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: 1.1fr 1fr 1fr 1fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--line); }
.foot-brand { position: relative; overflow: hidden; }
/* Het gedraaide logo staat verticaal in de merkkolom en wordt daarin gecentreerd.
   Eerder hing het aan de onderrand (bottom: -110px), waardoor het meeschoof
   zodra de Diensten-kolom langer werd en het scheef in de kolom kwam te staan.
   Nu: top 50% en daarna een halve eigen breedte terugschuiven — dat blijft
   kloppen bij elke kolomhoogte.
   Volgorde telt: translateX wordt eerst toegepast, daarna de rotatie, waardoor
   de verschuiving op het scherm naar beneden werkt. */
.foot-logo-deco { position: absolute; left: 8px; top: 50%; height: 110px; width: auto; opacity: 0.9; transform: rotate(-90deg) translateX(-50%); transform-origin: left top; pointer-events: none; }
/* Zelfde gedraaide logo als op desktop. In de 2-koloms tussenstand
   (<=860px) leent .foot-brand de rijhoogte van de Diensten-kolom, maar
   in de 1-koloms stand (<=560px) staat hij alleen in zijn rij, dus
   krijgt hij dan expliciet genoeg hoogte om niet afgesneden te worden. */
@media (max-width: 560px) {
  /* In de 1-koloms stand staat het brand-blok alleen en helemaal
     breed, dus valt de gedraaide "spine"-versie te groot en te leeg
     uit. Daar tonen we het logo daarom gewoon klein en rechtop. */
  .foot-brand { min-height: 0; margin-bottom: 6px; }
  .foot-logo-deco { position: static; transform: none; height: 34px; width: auto; opacity: 1; }
}
.foot-col h4 { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 14px; }
.foot-col p, .foot-col a { display: block; font-size: 0.92rem; color: var(--ink-soft); text-decoration: none; padding: 6px 0; margin: 0; }
.foot-col a:hover { color: var(--ink); }
.foot-bottom { display: flex; justify-content: space-between; align-items: center; padding-top: 22px; font-size: 0.8rem; color: var(--ink-soft); flex-wrap: wrap; gap: 12px; }
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .foot-grid { grid-template-columns: 1fr; gap: 26px; } }

/* ---------- Benefit grid (Over ons) ---------- */
.benefit-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(28px, 3vw, 40px); }
.benefit-card { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; padding: clamp(22px, 2.4vw, 28px); }
.benefit-card h4 { margin: 0 0 8px; font-size: 1.04rem; font-weight: 700; letter-spacing: -0.01em; }
.benefit-card p { margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; }
@media (max-width: 860px) { .benefit-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefit-grid { grid-template-columns: 1fr; } }

/* 4 kolommen: voor korte kaarten (titel + één regel) */
.benefit-grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1040px) { .benefit-grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .benefit-grid.cols-4 { grid-template-columns: 1fr; } }

/* Balanced: een onvolledige laatste rij wordt gecentreerd i.p.v. links met een gat */
.benefit-grid.balanced { display: flex; flex-wrap: wrap; justify-content: center; }
.benefit-grid.balanced > * { flex: 0 1 calc((100% - 40px) / 3); }
@media (max-width: 860px) { .benefit-grid.balanced > * { flex: 0 1 calc((100% - 20px) / 2); } }
@media (max-width: 560px) { .benefit-grid.balanced > * { flex: 0 1 100%; } }

.audience-grid { grid-template-columns: repeat(4, 1fr); }
.audience-card .a-tag { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px; }
@media (max-width: 860px) { .audience-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .audience-grid { grid-template-columns: 1fr; } }

.warn-box {
  margin-top: 24px;
  padding: 18px 22px;
  border-left: 3px solid var(--ink);
  background: var(--paper-alt);
  border-radius: 0 8px 8px 0;
  font-size: 0.94rem;
  color: var(--ink);
  line-height: 1.6;
}

/* ---------- Inner-page hero (dienst/werkwijze/etc pages) ---------- */
.page-hero { position: relative; }
.page-hero img { width: 100%; height: min(46vh, 420px); object-fit: cover; display: block; filter: contrast(1.02) saturate(0.96); }
.page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,10,9,0.15) 0%, rgba(12,10,9,0.65) 100%); }
.page-hero-text { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; padding: clamp(28px, 5vw, 56px) 0; color: #fff; }
.page-hero-text .eyebrow { color: rgba(250,250,249,0.8); }
.page-hero-text .eyebrow::before { background: rgba(250,250,249,0.5); }
.page-hero-text h1 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.12; margin: 14px 0 0; max-width: 900px; }

/* Variant voor foto's waarbij het interessante detail onderaan staat
   (bv. de opbouw-doorsnede op Over ons) — tekst dan bovenaan i.p.v.
   onderaan, zodat de foto zelf niet wordt afgedekt. */
.page-hero.text-top::after { background: linear-gradient(180deg, rgba(12,10,9,0.68) 0%, rgba(12,10,9,0.2) 55%, rgba(12,10,9,0) 75%); }
.page-hero.text-top .page-hero-text { top: 0; bottom: auto; }

/* Variant voor foto's met een detail onderaan dat zichtbaar moet blijven
   (bv. de laagopbouw op de vloeropbouw-pagina): tekst blijft onderaan
   staan, maar wordt opgetild zodat hij niet op dat detail valt. */
.page-hero.text-lift .page-hero-text { bottom: clamp(90px, 17vw, 190px); }
.page-hero.text-lift::after { background: linear-gradient(180deg, rgba(12,10,9,0.15) 0%, rgba(12,10,9,0.6) 62%, rgba(12,10,9,0.42) 100%); }

.breadcrumb { padding: 18px clamp(20px, 4vw, 56px); font-size: 0.86rem; color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb span { margin: 0 6px; }

/* ---------- Content block (dienst pages: text + image) ---------- */
.content-split { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(32px, 5vw, 64px); align-items: center; }
.content-split.reverse .content-media { order: -1; }
/* height:auto is nodig omdat de img-tags een height-attribuut hebben (tegen het springen
   tijdens het laden). Zonder deze regel wint dat attribuut en wordt de foto duizenden
   pixels hoog in plaats van de bedoelde 4:3-verhouding. */
.content-media img { width: 100%; height: auto; border-radius: 14px; display: block; aspect-ratio: 4/3; object-fit: cover; }

/* ---------- Werffilmpje in een tekstblok ---------- */
.media-video { margin: 0; }
.media-video video { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; border-radius: 14px; display: block; background: var(--line); }
.media-video figcaption { margin-top: 10px; font-size: 0.86rem; line-height: 1.5; color: var(--ink-soft); }
.content-text h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; letter-spacing: -0.02em; margin: 0 0 16px; }
.content-text p { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); margin: 0 0 14px; }
.content-text ul { margin: 0 0 14px; padding-left: 20px; color: var(--ink-soft); font-size: 0.98rem; line-height: 1.7; }
.content-text li { margin-bottom: 8px; }

/* Tussenkopjes binnen een tekstblok. Zonder deze regel valt h3 terug op de
   standaard van de browser en past hij niet bij de rest van de site. */
.content-text h3 { font-size: 1.12rem; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; margin: 28px 0 8px; }
.content-text h3:first-child { margin-top: 0; }

/* Losse tekstblokken lopen door over de volle breedte van de site (.wrap,
   1240px). Bewuste keuze: geen smalle tekstkolom, geen zin die
   halverwege afbreekt. De inleidende zin erboven krijgt dezelfde breedte,
   zodat beide op precies dezelfde plek afbreken. */
.wrap > .content-text { max-width: none; }
.section-head:has(+ .content-text) .lead { max-width: none; }
/* De foto naast een tekstblok loopt mee met de hoogte van die tekst. Stond hij
   op een vaste 4:3-verhouding, dan oogde hij klein naast een lange alinea.
   De 4:3 blijft de ondergrens voor korte teksten.
   Alleen blokken met een gewone foto: een blok met een video-figuur erin heeft
   zijn eigen opmaak en zou door display:flex platgedrukt worden. */
.content-split { align-items: stretch; }

@media (min-width: 861px) {
  /* De foto wordt absoluut in zijn kolom gelegd. Daardoor telt zijn eigen
     hoogte niet mee voor de rijhoogte: de tekst bepaalt hoe hoog het blok
     wordt en de foto vult dat precies op. Zonder dit duwde een staande foto
     het blok hoger dan de tekst, met een leeg gat eronder. */
  .content-split .content-media:has(> img) { position: relative; min-height: 300px; }
  .content-split .content-media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; }
}

@media (max-width: 860px) {
  .content-split { grid-template-columns: 1fr; align-items: start; }
  .content-split.reverse .content-media { order: 0; }
  /* op gsm staan ze onder elkaar: daar weer gewoon 4:3 */
  .content-split .content-media > img { height: auto; min-height: 0; aspect-ratio: 4/3; }
}

/* ---------- Technische kernpunten (3 losse kaarten) ---------- */
.kp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: clamp(32px, 4vw, 48px);
}
.kp-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(24px, 2.6vw, 30px);
  box-shadow: 0 1px 2px rgba(12,10,9,0.04);
}
.kp-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: rgba(21,154,27,0.1);
  display: grid; place-items: center;
  color: var(--green-deep);
  margin-bottom: 20px;
}
.kp-icon svg { width: 24px; height: 24px; }
.kp-label {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--green-deep); font-weight: 700;
  margin: 0 0 9px;
}
.kp-answer { font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; line-height: 1.3; margin: 0 0 9px; }
.kp-text { font-size: 0.9rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }
@media (max-width: 900px) { .kp-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .kp-grid { grid-template-columns: 1fr; } }

/* ---------- Before/After slider ---------- */
.ba-slider {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 14px;
  overflow: hidden;
  cursor: ew-resize;
  user-select: none;
  touch-action: none;
  background: var(--ink);
}
.ba-slider img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ba-before-wrap { position: absolute; inset: 0; clip-path: inset(0 50% 0 0); }
.ba-handle { position: absolute; top: 0; bottom: 0; left: 50%; width: 3px; background: #fff; transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(12,10,9,0.15); }
.ba-handle::after {
  content: "";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: 0 6px 18px -4px rgba(12,10,9,0.4);
}
.ba-handle::before {
  content: "\2194";
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 18px; z-index: 1; color: var(--ink);
}
.ba-tag {
  position: absolute; top: 14px; z-index: 2;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(12,10,9,0.72); color: #fff; padding: 6px 14px; border-radius: 999px;
}
.ba-tag.before { left: 14px; }
.ba-tag.after { right: 14px; }
.ba-caption { margin: 14px 0 0; font-size: 0.9rem; color: var(--ink-soft); }
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 40px); margin-top: clamp(32px, 4vw, 48px); }
@media (max-width: 700px) { .ba-grid { grid-template-columns: 1fr; } }

/* ---------- Teksthero (contact, faq, offerte) ---------- */
.text-hero {
  padding: clamp(40px, 6vw, 72px) 0 clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--line);
}
.text-hero h1 {
  font-size: clamp(1.8rem, 3.6vw, 2.7rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 10px 0 0;
  max-width: 850px;
}
.text-hero .lead {
  margin-top: 18px;
  max-width: 58ch;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.6vw, 1.12rem);
  line-height: 1.6;
}

/* ---------- Privacynote onder formulieren ---------- */
.form-privacy {
  font-size: 0.84rem;
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 4px;
}
.form-privacy a { text-decoration: underline; }

/* ---------- Achtergrondscroll blokkeren bij open mobiel menu ---------- */
body.nav-open { overflow: hidden; }

/* ---------- Zichtbare focusring (toegankelijkheid) ---------- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Bewegingsvoorkeur respecteren ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Fasegalerij per project ---------- */
.case-block { margin-top: clamp(40px, 5vw, 64px); }
.case-block:first-of-type { margin-top: clamp(28px, 4vw, 44px); }

.case-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 18px; }
.case-head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); font-weight: 800; letter-spacing: -0.01em; margin: 0; }
.case-head .case-loc {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
}
.case-intro { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.6; margin: 0 0 22px; max-width: 68ch; }

.case-stage { position: relative; border-radius: 14px; overflow: hidden; background: var(--ink); aspect-ratio: 4/3; }
.case-stage img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; transition: opacity 0.35s ease;
}
.case-stage img.is-active { opacity: 1; }

.case-phase-label {
  position: absolute; left: 14px; top: 14px; z-index: 2;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  background: rgba(12,10,9,0.72); color: #fff; padding: 6px 14px; border-radius: 999px;
}
.case-counter {
  position: absolute; right: 14px; top: 14px; z-index: 2;
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em;
  background: rgba(12,10,9,0.72); color: #fff; padding: 6px 12px; border-radius: 999px;
}

.case-steps { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.case-step {
  flex: 1 1 0; min-width: 110px; text-align: left; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: 11px 14px; font-family: var(--sans); transition: border-color 0.2s ease, background 0.2s ease;
}
.case-step:hover { border-color: rgba(12,10,9,0.3); }
.case-step[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }
.case-step .s-num {
  display: block; font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em;
  color: var(--ink-soft); margin-bottom: 3px;
}
.case-step .s-txt { display: block; font-size: 0.86rem; font-weight: 600; color: var(--ink); line-height: 1.3; }
.case-step[aria-selected="true"] .s-num { color: rgba(250,250,249,0.6); }
.case-step[aria-selected="true"] .s-txt { color: var(--paper); }

@media (max-width: 600px) {
  .case-steps { gap: 6px; }
  .case-step { min-width: calc(50% - 3px); padding: 9px 11px; }
  .case-step .s-txt { font-size: 0.8rem; }
}

.case-auto-hint {
  display: none; position: absolute; left: 14px; bottom: 14px; z-index: 2;
  align-items: center; gap: 7px;
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase;
  background: rgba(12,10,9,0.72); color: #fff; padding: 6px 13px; border-radius: 999px;
}
.case-block.is-autoplaying .case-auto-hint { display: inline-flex; }
.case-auto-hint .auto-dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--green);
  animation: auto-pulse 1.4s ease-in-out infinite;
}
@keyframes auto-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.4; transform: scale(0.7); }
}

.case-more { margin-top: clamp(24px, 3vw, 34px); }
.case-more a { font-size: 0.96rem; font-weight: 600; color: var(--ink); }
.case-more a:hover { color: var(--green-deep); }

/* ---------- Calculatiepagina ---------- */
.calc-form { max-width: 760px; }
.calc-step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(24px, 3vw, 34px); margin-bottom: 20px;
}
.calc-step .step-num {
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--green-deep); margin: 0 0 8px;
}
.calc-step h2 { font-size: clamp(1.15rem, 2vw, 1.45rem); font-weight: 800; margin: 0 0 6px; letter-spacing: -0.01em; }
.calc-step .step-hint { color: var(--ink-soft); font-size: 0.92rem; line-height: 1.55; margin: 0 0 20px; }

.field { margin-bottom: 18px; }
.field:last-child { margin-bottom: 0; }
.field label, .field-label { display: block; font-size: 0.86rem; font-weight: 600; margin-bottom: 7px; }
.field .opt { font-weight: 400; color: var(--ink-soft); }
.field input:not([type="radio"]):not([type="checkbox"]), .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 9px;
  padding: 12px 14px; font-family: var(--sans); font-size: 0.96rem; background: var(--paper);
}
.field textarea { resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 560px) { .field-row { grid-template-columns: 1fr; gap: 0; } }

.pick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 640px) { .pick-grid { grid-template-columns: 1fr; } }
.pick {
  display: flex; align-items: flex-start; gap: 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 15px;
  background: var(--paper); transition: border-color 0.15s ease, background 0.15s ease;
}
.pick:hover { border-color: rgba(12,10,9,0.28); }
.pick input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green); flex-shrink: 0; }
.pick:has(input:checked) { border-color: var(--green); background: rgba(21,154,27,0.05); }
.pick-title { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.pick-sub { display: block; font-size: 0.8rem; color: var(--ink-soft); line-height: 1.4; margin-top: 2px; }

.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.calc-submit { margin-top: 6px; font-size: 1rem; padding: 15px 30px; }

.form-status { font-size: 0.9rem; padding: 11px 14px; border-radius: 9px; margin: 0 0 14px; }
.form-status.is-error { background: rgba(190,30,30,0.08); color: #8d1f1f; border: 1px solid rgba(190,30,30,0.2); }

.calc-result-card {
  max-width: 760px; margin-top: 28px; background: var(--ink); color: var(--paper);
  border-radius: 16px; padding: clamp(26px, 3.5vw, 40px);
}
.calc-result-card .r-eyebrow {
  font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(250,250,249,0.6); margin: 0;
}
.calc-result-card .r-bedrag {
  font-size: clamp(1.9rem, 4vw, 2.7rem); font-weight: 800;
  margin: 10px 0 22px; font-variant-numeric: tabular-nums; letter-spacing: -0.02em;
}
.r-lijst { list-style: none; padding: 0; margin: 0 0 18px; }
.r-lijst li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 10px 0; border-bottom: 1px solid rgba(250,250,249,0.14);
  font-size: 0.92rem;
}
.r-lijst li:last-child { border-bottom: none; }
.r-lijst li:not(.r-fase) span:last-child { font-variant-numeric: tabular-nums; color: rgba(250,250,249,0.85); }
.r-forfait, .r-mail {
  font-size: 0.86rem; line-height: 1.55; color: rgba(250,250,249,0.75); margin: 0 0 14px;
}
.r-mail { color: #7fe08a; }
.r-disclaimer {
  border-top: 1px solid rgba(250,250,249,0.14); padding-top: 16px; margin-top: 4px;
}
.r-disclaimer p { font-size: 0.82rem; line-height: 1.6; color: rgba(250,250,249,0.6); margin: 0; }
.r-acties { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 22px; }
.r-acties .btn-secondary { background: transparent; color: var(--paper); border-color: rgba(250,250,249,0.35); }

/* ---------- Radiokeuze (renovatie / nieuwbouw) ---------- */
.radio-row { display: flex; gap: 10px; flex-wrap: wrap; }
.radio-row label {
  display: inline-flex; align-items: center; gap: 9px;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 18px; cursor: pointer; background: var(--paper);
  font-size: 0.94rem; font-weight: 500; line-height: 1;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.radio-row label:hover { border-color: rgba(12,10,9,0.28); }
.radio-row input[type="radio"] {
  width: 17px; height: 17px; margin: 0; flex-shrink: 0;
  accent-color: var(--green); cursor: pointer;
}
.radio-row label:has(input:checked) {
  border-color: var(--green);
  background: rgba(21,154,27,0.05);
  font-weight: 600;
}
@media (max-width: 480px) {
  .radio-row { flex-direction: column; }
  .radio-row label { width: 100%; }
}

/* ---------- Twee routes: berekenen of offerte ---------- */
.route-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: clamp(28px, 4vw, 44px); }
@media (max-width: 720px) { .route-grid { grid-template-columns: 1fr; } }

.route-card {
  display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(26px, 3vw, 36px); background: var(--surface);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.route-card:hover { border-color: rgba(12,10,9,0.32); transform: translateY(-2px); }
.route-card.is-primary { border-color: var(--green); background: rgba(21,154,27,0.04); }
.route-card.is-primary:hover { border-color: var(--green-deep); }

.route-card .r-tag {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0 0 10px;
}
.route-card.is-primary .r-tag { color: var(--green-deep); }
.route-card h3 { font-size: clamp(1.2rem, 2vw, 1.45rem); font-weight: 800; margin: 0 0 10px; letter-spacing: -0.01em; }
.route-card .r-text { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.6; margin: 0 0 20px; flex-grow: 1; }
.route-card .r-link { font-size: 0.92rem; font-weight: 600; color: var(--ink); }
.route-card.is-primary .r-link { color: var(--green-deep); }

/* ---------- Vervolgstap na de berekening ---------- */
.r-vervolg {
  border-top: 1px solid rgba(250,250,249,0.14);
  margin-top: 22px; padding-top: 22px;
}
.r-vervolg .v-titel { font-size: 1.05rem; font-weight: 700; margin: 0 0 6px; color: var(--paper); }
.r-vervolg .v-text { font-size: 0.9rem; line-height: 1.6; color: rgba(250,250,249,0.7); margin: 0 0 16px; }

/* ---------- Alternatieve route in een teksthero ---------- */
.hero-alt { margin-top: 14px; font-size: 0.94rem; color: var(--ink-soft); }
.hero-alt a { text-decoration: underline; font-weight: 600; color: var(--ink); }

/* ---------- Dikte-optie in de calculator ---------- */
.dikte-schakelaar {
  display: flex; align-items: flex-start; gap: 12px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 10px;
  padding: 15px 17px; margin-bottom: 16px; background: var(--paper);
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dikte-schakelaar:hover { border-color: rgba(12,10,9,0.28); }
.dikte-schakelaar input { width: 17px; height: 17px; margin-top: 2px; accent-color: var(--green); flex-shrink: 0; }
.dikte-schakelaar:has(input:checked) { border-color: var(--green); background: rgba(21,154,27,0.05); }
.dikte-schakelaar strong { display: block; font-size: 0.92rem; font-weight: 600; line-height: 1.3; }
.dikte-schakelaar em {
  display: block; font-style: normal; font-size: 0.82rem;
  color: var(--ink-soft); line-height: 1.45; margin-top: 3px;
}

.pick { flex-wrap: wrap; }
.pick-dikte {
  display: flex; align-items: center; gap: 8px;
  width: 100%; margin-top: 11px; padding-top: 11px;
  border-top: 1px solid var(--line);
}
.pick-dikte label { font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); margin: 0; }
.pick-dikte input {
  width: 76px; border: 1px solid var(--line); border-radius: 7px;
  padding: 7px 9px; font-family: var(--sans); font-size: 0.88rem; text-align: right;
}
.pick-dikte .eenheid { font-size: 0.82rem; color: var(--ink-soft); }

.r-lijst em { font-style: normal; color: rgba(250,250,249,0.55); font-size: 0.86em; }

/* ---------- Uitklapbare fases in het resultaat ---------- */
.r-hint {
  font-size: 0.84rem; line-height: 1.55;
  color: rgba(250,250,249,0.55); margin: 0 0 12px;
}

.r-lijst li.r-plain { display: flex; justify-content: space-between; gap: 16px; }
.r-lijst li.r-plain .f-bedrag { font-variant-numeric: tabular-nums; color: rgba(250,250,249,0.85); }

.r-lijst li.r-fase { display: block; padding: 0; }
.r-lijst li.r-fase > details > summary {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 12px;
  padding: 12px 30px 12px 0; cursor: pointer; position: relative;
  list-style: none; transition: color 0.15s ease;
}
.r-lijst li.r-fase > details > summary::-webkit-details-marker { display: none; }
.r-lijst li.r-fase > details > summary::after {
  content: ""; position: absolute; right: 4px; top: 50%;
  width: 8px; height: 8px; margin-top: -6px;
  border-right: 2px solid rgba(250,250,249,0.5);
  border-bottom: 2px solid rgba(250,250,249,0.5);
  transform: rotate(45deg); transition: transform 0.2s ease, border-color 0.2s ease;
}
.r-lijst li.r-fase > details[open] > summary::after {
  transform: rotate(-135deg); margin-top: -2px; border-color: #7fe08a;
}
.r-lijst li.r-fase > details > summary:hover::after { border-color: var(--paper); }

.r-lijst .f-naam { flex: 1 1 auto; }
.r-lijst .f-bedrag { font-variant-numeric: tabular-nums; color: rgba(250,250,249,0.85); white-space: nowrap; }
.r-lijst li .f-meer {
  flex-basis: 100%; order: 3;
  font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: rgba(250,250,249,0.45); margin-top: 3px;
}

.f-detail {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 26px; padding: 4px 0 20px;
}
@media (max-width: 620px) { .f-detail { grid-template-columns: 1fr; gap: 16px; } }

.f-blok h5 {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(250,250,249,0.5);
  margin: 0 0 8px; font-weight: 500;
}
.f-blok ul { list-style: none; padding: 0; margin: 0; display: block; }
.f-blok ul li {
  display: block; padding: 0 0 0 16px; border: none;
  position: relative; font-size: 0.86rem; line-height: 1.55;
  color: rgba(250,250,249,0.78); margin-bottom: 5px;
}
.f-blok ul li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: rgba(250,250,249,0.35);
}
.f-blok ul li:last-child { margin-bottom: 0; }

/* ---------- Geschatte uitvoeringsduur ---------- */
.r-duur {
  border: 1px solid rgba(250,250,249,0.16); border-radius: 12px;
  padding: 18px 20px; margin: 4px 0 18px; background: rgba(250,250,249,0.04);
}
.r-duur .d-label {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: rgba(250,250,249,0.55); margin: 0;
}
.r-duur .d-waarde {
  font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em;
  margin: 5px 0 8px; color: var(--paper); font-variant-numeric: tabular-nums;
}
.r-duur .d-noot { font-size: 0.82rem; line-height: 1.6; color: rgba(250,250,249,0.6); margin: 0; }

/* ---------- Vertrouwensblok in het resultaat ---------- */
.r-vertrouwen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 24px;
  border-top: 1px solid rgba(250,250,249,0.14); margin-top: 20px; padding-top: 20px;
}
@media (max-width: 560px) { .r-vertrouwen { grid-template-columns: 1fr; } }
.r-vertrouwen .vt-item { padding-left: 20px; position: relative; }
.r-vertrouwen .vt-item::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 10px; height: 6px; border-left: 2px solid #7fe08a;
  border-bottom: 2px solid #7fe08a; transform: rotate(-45deg);
}
.r-vertrouwen strong { display: block; font-size: 0.9rem; font-weight: 700; color: var(--paper); }
.r-vertrouwen span { display: block; font-size: 0.82rem; line-height: 1.5; color: rgba(250,250,249,0.65); margin-top: 2px; }

/* ---------- Twee knoppen naast elkaar in het resultaat ---------- */
.v-knoppen { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.v-knoppen .btn-secondary {
  background: transparent; color: var(--paper);
  border-color: rgba(250,250,249,0.35);
}
.v-knoppen .btn-secondary:hover { border-color: var(--paper); background: rgba(250,250,249,0.06); }

/* ---------- Tekstkolom in een cta-band ---------- */
.cta-band .cta-tekst { max-width: 46ch; }
.cta-band .cta-tekst h2 { max-width: none; }
.cta-band .cta-sub {
  margin: 12px 0 0; font-size: 0.95rem; line-height: 1.6;
  color: rgba(250,250,249,0.7);
}

/* ---------- Checklist bij de volgende stap ---------- */
.r-vervolg .v-check { list-style: none; padding: 0; margin: 0 0 14px; }
.r-vervolg .v-check li {
  position: relative; padding-left: 18px; margin-bottom: 5px;
  font-size: 0.89rem; line-height: 1.55; color: rgba(250,250,249,0.78);
}
.r-vervolg .v-check li::before {
  content: ""; position: absolute; left: 2px; top: 0.62em;
  width: 5px; height: 5px; border-radius: 50%; background: #7fe08a;
}

/* ---------- hidden-attribuut moet display:flex overrulen ---------- */
.dikte-schakelaar[hidden],
.pick-dikte[hidden],
.calc-result-card[hidden],
[hidden] { display: none !important; }

/* ---------- Afwerkingsopties (tegels & afwerking) ---------- */
.afw-lijst { display: flex; flex-direction: column; gap: 16px; margin-top: clamp(28px, 4vw, 44px); }

.afw-item {
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(22px, 3vw, 32px); background: var(--surface);
}
.afw-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.afw-kop h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.afw-tag {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--green-deep); margin: 0;
  background: rgba(21,154,27,0.08); padding: 4px 11px; border-radius: 999px;
}
.afw-tekst { color: var(--ink-soft); font-size: 0.96rem; line-height: 1.65; margin: 0 0 20px; max-width: 72ch; }

.afw-feiten {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin: 0; padding-top: 18px; border-top: 1px solid var(--line);
}
.afw-feiten dt {
  font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.afw-feiten dd { margin: 0; font-size: 0.9rem; line-height: 1.5; font-weight: 500; }
@media (max-width: 700px) {
  .afw-feiten { grid-template-columns: 1fr; gap: 14px; }
}

.afw-slot {
  margin-top: 24px; font-size: 0.94rem; color: var(--ink-soft);
  line-height: 1.6; max-width: 70ch;
}

/* ---------- Belofte onder de rekenknop ---------- */
.calc-belofte {
  display: flex; align-items: center; gap: 8px;
  margin: 14px 0 0; font-size: 0.88rem; color: var(--green-deep); font-weight: 600;
}
.calc-belofte::before {
  content: ""; flex-shrink: 0;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 6 9 17l-5-5' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/11px no-repeat;
}

/* ---------- Afgeleid dieptveld bij afbraak ---------- */
.pick-dikte.is-afgeleid input {
  background: rgba(21,154,27,0.07);
  border-color: rgba(21,154,27,0.35);
  color: var(--green-deep);
  font-weight: 700;
  cursor: default;
}
.pick-uitleg {
  width: 100%; margin-top: 8px;
  font-size: 0.79rem; line-height: 1.45; color: var(--ink-soft);
}

/* ---------- Hint onder een invoerveld ---------- */
.veld-hint {
  display: block; margin-top: 6px;
  font-size: 0.8rem; line-height: 1.45; color: var(--ink-soft);
}
.veld-hint a { text-decoration: underline; font-weight: 600; color: var(--ink); }

/* ---------- Vloerpas-gids ---------- */
.gids-intro { max-width: 72ch; margin-bottom: clamp(36px, 5vw, 56px); }
.gids-intro h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; margin: 0 0 14px; letter-spacing: -0.01em; }
.gids-intro p { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; margin: 0 0 14px; }
.gids-intro strong { color: var(--ink); }

.gids-lagen { display: flex; flex-direction: column; gap: 2px; }

.gids-laag {
  display: flex; flex-wrap: wrap; gap: clamp(16px, 3vw, 28px);
  border: 1px solid var(--line); border-radius: 14px;
  padding: clamp(22px, 3vw, 30px); background: var(--surface);
  margin-bottom: 14px;
}
.gids-num {
  font-family: var(--mono); font-size: clamp(1.4rem, 3vw, 2rem); font-weight: 700;
  color: var(--green); line-height: 1; flex-shrink: 0; padding-top: 2px;
}
.gids-body { flex: 1; min-width: 240px; }
.gids-thumb { flex: 0 0 180px; align-self: stretch; }
.gids-thumb img { width: 100%; height: 100%; min-height: 150px; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 700px) {
  .gids-thumb { flex: 1 1 100%; order: -1; }
  .gids-thumb img { min-height: 180px; }
}
.gids-kop { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.gids-kop h3 { font-size: clamp(1.1rem, 2vw, 1.35rem); font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.gids-hoogte {
  font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ink-soft); margin: 0;
  background: var(--paper); border: 1px solid var(--line);
  padding: 4px 11px; border-radius: 999px;
}
.gids-wat { color: var(--ink-soft); font-size: 0.97rem; line-height: 1.65; margin: 0 0 18px; }

.gids-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 0 0 16px; }
@media (max-width: 700px) { .gids-detail { grid-template-columns: 1fr; gap: 14px; } }
.gids-detail dt {
  font-family: var(--mono); font-size: 0.65rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ink-soft); margin-bottom: 5px;
}
.gids-detail dd { margin: 0; font-size: 0.9rem; line-height: 1.55; }

.gids-link { font-size: 0.88rem; font-weight: 600; text-decoration: underline; }

.gids-extras { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: clamp(26px, 4vw, 40px); }
@media (max-width: 700px) { .gids-extras { grid-template-columns: 1fr; } }
.gids-extra {
  display: block; border: 1px solid var(--line); border-radius: 12px;
  padding: 22px 24px; background: var(--surface);
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.gids-extra:hover { border-color: rgba(12,10,9,0.3); transform: translateY(-2px); }
.gids-extra h4 { font-size: 1.02rem; font-weight: 700; margin: 0 0 7px; }
.gids-extra p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.55; margin: 0; }

.gids-reken h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); font-weight: 800; margin: 8px 0 14px; letter-spacing: -0.01em; max-width: 66ch; }
.gids-reken p { color: var(--ink-soft); font-size: 1rem; line-height: 1.7; margin: 0 0 16px; max-width: 66ch; }
.gids-som { list-style: none; padding: 0; margin: 0 0 20px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.gids-som li {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 13px 20px; background: var(--surface);
  border-bottom: 1px solid var(--line); font-size: 0.94rem;
}
.gids-som li:last-child { border-bottom: none; }
.gids-som li span:last-child { font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.gids-som .som-totaal { background: var(--ink); color: var(--paper); font-weight: 700; }
.gids-som .som-totaal span:last-child { color: var(--paper); }

.gids-fouten { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: clamp(26px, 4vw, 40px); }
@media (max-width: 800px) { .gids-fouten { grid-template-columns: 1fr; } }
.fout-kaart {
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: 12px; padding: 22px 24px; background: var(--surface);
}
.fout-kaart h4 { font-size: 1rem; font-weight: 700; margin: 0 0 8px; }
.fout-kaart p { color: var(--ink-soft); font-size: 0.9rem; line-height: 1.6; margin: 0; }

/* ---------- Verwijzing naar de gids ---------- */
.gids-knop {
  display: flex; align-items: flex-start; gap: 14px;
  margin-top: 22px; padding: 18px 20px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); max-width: 640px;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.gids-knop:hover { border-color: var(--green); transform: translateY(-2px); }
.gk-icoon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(21,154,27,0.1); position: relative;
}
.gk-icoon::after {
  content: ""; position: absolute; inset: 0;
  background: var(--green);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H10a2 2 0 0 1 2 2v13a1.5 1.5 0 0 0-1.5-1.5h-5A1.5 1.5 0 0 1 4 16z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H14a2 2 0 0 0-2 2v13a1.5 1.5 0 0 1 1.5-1.5h5A1.5 1.5 0 0 0 20 16z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 5.5A1.5 1.5 0 0 1 5.5 4H10a2 2 0 0 1 2 2v13a1.5 1.5 0 0 0-1.5-1.5h-5A1.5 1.5 0 0 1 4 16z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3Cpath d='M20 5.5A1.5 1.5 0 0 0 18.5 4H14a2 2 0 0 0-2 2v13a1.5 1.5 0 0 1 1.5-1.5h5A1.5 1.5 0 0 0 20 16z' fill='none' stroke='black' stroke-width='1.7' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px no-repeat;
}
.gk-tekst strong { display: block; font-size: 0.94rem; font-weight: 700; line-height: 1.35; }
.gk-tekst em {
  display: block; font-style: normal; font-size: 0.86rem;
  color: var(--ink-soft); line-height: 1.5; margin-top: 3px;
}

/* ---------- PUR vs EPS in de gids ---------- */
.iso-keuze { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 4px 0 20px; }
@media (max-width: 700px) { .iso-keuze { grid-template-columns: 1fr; } }

.iso-kaart {
  border: 1px solid var(--line); border-radius: 11px;
  padding: 18px 20px; background: var(--paper);
}
.iso-kop { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.iso-kop h4 { font-size: 1.05rem; font-weight: 800; margin: 0; letter-spacing: -0.01em; }
.iso-tag {
  font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--green-deep); margin: 0;
  background: rgba(21,154,27,0.09); padding: 3px 9px; border-radius: 999px;
}
.iso-kaart p { font-size: 0.89rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 10px; }
.iso-kaart p:last-child { margin-bottom: 0; }
.iso-plus {
  padding-top: 10px; border-top: 1px solid var(--line);
  font-size: 0.85rem !important;
}

/* ---------- Inkoopvoordeel-blok ---------- */
.gids-voordeel {
  border: 1px solid var(--green);
  background: rgba(21,154,27,0.05);
  border-radius: 11px; padding: 16px 19px; margin: 0 0 16px;
}
.gv-tag {
  font-family: var(--mono); font-size: 0.63rem; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--green-deep); margin: 0 0 7px;
}
.gv-tekst { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0; }
.gv-tekst strong { color: var(--ink); font-weight: 700; }

/* ================================================================
   REDESIGN — nieuwe visuele richting, voorlopig enkel op de homepage
   (gescoped onder body.redesign; andere pagina's blijven ongewijzigd
   tot dit is goedgekeurd en sitewide wordt uitgerold)
   ================================================================ */
body.redesign {
  --display: "Space Grotesk", var(--sans);
  --tech: "IBM Plex Mono", var(--mono);
}

/* ---------- Typografie: industrieel display-font voor koppen,
   technisch mono-font voor labels/cijfers ---------- */
body.redesign h1,
body.redesign .section-head h2,
body.redesign .route-card h3,
body.redesign .d-body h3,
body.redesign .trust-item h3,
body.redesign .t-content h4,
body.redesign .cta-band h2 {
  font-family: var(--display);
}
body.redesign .eyebrow,
body.redesign .l-num,
body.redesign .t-node,
body.redesign .d-eyebrow,
body.redesign .r-tag,
body.redesign .trust-lead {
  font-family: var(--tech);
}

/* ---------- Maatlijn: terugkerend "technische tekening"-motief ---------- */
body.redesign .dim-line {
  position: relative; height: 1px; background: var(--line); border: none;
  margin: 0; width: 100%;
}
body.redesign .dim-line::before,
body.redesign .dim-line::after {
  content: ""; position: absolute; top: -4px; width: 1px; height: 9px; background: var(--line);
}
body.redesign .dim-line::before { left: 0; }
body.redesign .dim-line::after { right: 0; }

/* ---------- Blueprint-hoekmarkeringen op foto's ---------- */
body.redesign .blueprint-frame { position: relative; }
body.redesign .blueprint-frame::after {
  content: ""; position: absolute; inset: 16px; pointer-events: none; z-index: 3;
  background:
    linear-gradient(var(--green), var(--green)) 0 0 / 26px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) 0 0 / 2px 26px no-repeat,
    linear-gradient(var(--green), var(--green)) 100% 0 / 26px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) 100% 0 / 2px 26px no-repeat,
    linear-gradient(var(--green), var(--green)) 0 100% / 26px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) 0 100% / 2px 26px no-repeat,
    linear-gradient(var(--green), var(--green)) 100% 100% / 26px 2px no-repeat,
    linear-gradient(var(--green), var(--green)) 100% 100% / 2px 26px no-repeat;
  opacity: 0.9;
}

/* ---------- Eyebrow: dash i.p.v. gewone lijn (groen, zoals de rest van de site) ---------- */
body.redesign .eyebrow { display: flex; align-items: center; gap: 10px; }
body.redesign .eyebrow::before { background: var(--green); width: 22px; }

/* ---------- Hero: entree-animatie bij het laden van de pagina.
   Tekst komt na elkaar omhoog, de foto settelt met een lichte
   inzoom, en de blueprint-hoekmarkeringen "vergrendelen" er als
   laatste bij — geen scroll-koppeling, één keer bij het laden. ---------- */
body.redesign .hero-headline-zone h1 { font-weight: 700; letter-spacing: -0.03em; }
body.redesign .hero-photo-zone { margin-top: 4px; overflow: hidden; position: relative; }

/* Zachte overgang boven- en onderaan de hero-foto i.p.v. een harde
   rand. De foto zelf wordt transparant uitgemaskeerd aan de randen
   (i.p.v. een gekleurde laag erbovenop), zodat er geen naad kan
   ontstaan tussen de foto en een losse overlay. Op grotere schermen
   schuift de foto ook lichtjes omhoog tot onder de knoppenrij (niet
   verder dan dat), zodat hij er half onder vandaan lijkt te komen
   i.p.v. er los onder te hangen. */
body.redesign .hero-photo-zone {
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, black clamp(80px, 12vw, 150px),
    black calc(100% - clamp(70px, 9vw, 110px)), transparent 100%);
  mask-image: linear-gradient(to bottom,
    transparent 0, black clamp(80px, 12vw, 150px),
    black calc(100% - clamp(70px, 9vw, 110px)), transparent 100%);
}
@media (min-width: 900px) {
  body.redesign .hero-headline-zone { position: relative; z-index: 2; }
  body.redesign .hero-photo-zone { z-index: 1; margin-top: -72px; }
}

body.redesign .hero-headline-zone h1,
body.redesign .hero-headline-zone .hero-sub,
body.redesign .hero-headline-zone .hero-actions {
  opacity: 0;
  animation: hero-rise 0.85s cubic-bezier(0.16,1,0.3,1) forwards;
}
body.redesign .hero-headline-zone h1 { animation-delay: 0.05s; }
body.redesign .hero-headline-zone .hero-sub { animation-delay: 0.18s; }
body.redesign .hero-headline-zone .hero-actions { animation-delay: 0.32s; }

body.redesign .hero-photo-zone {
  opacity: 0;
  animation: hero-fade 1s ease-out forwards;
  animation-delay: 0.2s;
}
body.redesign .hero-photo-zone > img {
  animation: hero-settle 1.4s cubic-bezier(0.16,1,0.3,1) forwards;
  animation-delay: 0.2s;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes hero-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes hero-settle {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  body.redesign .hero-headline-zone h1,
  body.redesign .hero-headline-zone .hero-sub,
  body.redesign .hero-headline-zone .hero-actions,
  body.redesign .hero-photo-zone,
  body.redesign .hero-photo-zone > img {
    animation: none; opacity: 1; transform: none;
  }
}

/* ---------- Trust-strip: iets omhoog getrokken, tot op de onderste
   fade van de herofoto, zodat er geen kale strook meer tussen zit ---------- */
body.redesign .trust-section { position: relative; z-index: 2; margin-top: -22px; background: transparent; }
body.redesign .trust-item { position: relative; padding-left: 4px; }
body.redesign .trust-lead::before { background: var(--green); }

/* ---------- Signature-element: de laag-per-laag doorsnede ---------- */
body.redesign #opbouw .buildup { align-items: stretch; }
body.redesign .buildup-stack {
  position: relative; padding-left: 26px;
}
body.redesign .buildup-stack::before {
  content: ""; position: absolute; left: 9px; top: 6px; bottom: 6px; width: 1px;
  background: repeating-linear-gradient(to bottom, var(--line) 0 5px, transparent 5px 11px);
}
body.redesign .layer-band { position: relative; }
body.redesign .layer-band::before {
  content: ""; position: absolute; left: -26px; top: 50%; width: 16px; height: 1px;
  background: var(--line); transition: background 0.2s ease, height 0.2s ease;
}
body.redesign .layer-band[aria-selected="true"]::before { background: var(--green); height: 2px; margin-top: -0.5px; }
body.redesign .layer-band .l-num { color: var(--ink-soft); font-weight: 600; }
body.redesign .layer-band[aria-selected="true"] .l-num { color: var(--green); }
body.redesign .layer-band[aria-selected="true"] { background: var(--ink); border-color: var(--ink); }

body.redesign .d-photo-wrap { position: relative; }
body.redesign .d-eyebrow { color: var(--green-deep); font-weight: 600; }
body.redesign .btn-detail { background: var(--green); }
body.redesign .btn-detail:hover { background: var(--green-deep); }

/* ---------- Diensten-kaarten: groene tick bij hover ---------- */
body.redesign .service-card { position: relative; overflow: hidden; }
body.redesign .service-card::before {
  content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 100%;
  background: var(--green); transform: scaleY(0); transform-origin: top;
  transition: transform 0.3s ease;
}
body.redesign .service-card:hover::before { transform: scaleY(1); }

/* ---------- Scroll-reveal (respecteert prefers-reduced-motion) ---------- */
body.redesign.reveal-ready .reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.65s cubic-bezier(0.16,1,0.3,1), transform 0.65s cubic-bezier(0.16,1,0.3,1);
}
body.redesign.reveal-ready .reveal.is-in { opacity: 1; transform: none; }
body.redesign.reveal-ready .trust-grid .reveal:nth-child(1) { transition-delay: 0ms; }
body.redesign.reveal-ready .trust-grid .reveal:nth-child(2) { transition-delay: 80ms; }
body.redesign.reveal-ready .trust-grid .reveal:nth-child(3) { transition-delay: 160ms; }
body.redesign.reveal-ready .trust-grid .reveal:nth-child(4) { transition-delay: 240ms; }
body.redesign.reveal-ready .route-grid .reveal:nth-child(1) { transition-delay: 0ms; }
body.redesign.reveal-ready .route-grid .reveal:nth-child(2) { transition-delay: 100ms; }
body.redesign.reveal-ready .buildup-stack .reveal:nth-child(1) { transition-delay: 0ms; }
body.redesign.reveal-ready .buildup-stack .reveal:nth-child(2) { transition-delay: 60ms; }
body.redesign.reveal-ready .buildup-stack .reveal:nth-child(3) { transition-delay: 120ms; }
body.redesign.reveal-ready .buildup-stack .reveal:nth-child(4) { transition-delay: 180ms; }
body.redesign.reveal-ready .buildup-stack .reveal:nth-child(5) { transition-delay: 240ms; }
body.redesign.reveal-ready .buildup-stack .reveal:nth-child(6) { transition-delay: 300ms; }
body.redesign.reveal-ready .services-grid .reveal:nth-child(1) { transition-delay: 0ms; }
body.redesign.reveal-ready .services-grid .reveal:nth-child(2) { transition-delay: 40ms; }
body.redesign.reveal-ready .services-grid .reveal:nth-child(3) { transition-delay: 80ms; }
body.redesign.reveal-ready .services-grid .reveal:nth-child(4) { transition-delay: 120ms; }
body.redesign.reveal-ready .services-grid .reveal:nth-child(n+5) { transition-delay: 150ms; }
body.redesign.reveal-ready .benefit-grid .reveal:nth-child(1) { transition-delay: 0ms; }
body.redesign.reveal-ready .benefit-grid .reveal:nth-child(2) { transition-delay: 40ms; }
body.redesign.reveal-ready .benefit-grid .reveal:nth-child(3) { transition-delay: 80ms; }
body.redesign.reveal-ready .benefit-grid .reveal:nth-child(4) { transition-delay: 120ms; }
body.redesign.reveal-ready .benefit-grid .reveal:nth-child(n+5) { transition-delay: 150ms; }
body.redesign.reveal-ready .projects-grid .reveal:nth-child(1) { transition-delay: 0ms; }
body.redesign.reveal-ready .projects-grid .reveal:nth-child(2) { transition-delay: 80ms; }
body.redesign.reveal-ready .projects-grid .reveal:nth-child(3) { transition-delay: 160ms; }

@media (prefers-reduced-motion: reduce) {
  body.redesign.reveal-ready .reveal {
    opacity: 1; transform: none; transition: none;
  }
}

/* ---------- Hover: iets meer beweging, zelfde groene familie ---------- */
body.redesign .btn-hero-primary,
body.redesign .btn-primary {
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
body.redesign .route-card:hover .r-link {
  color: var(--green-deep);
}


/* ---------- Cookiemelding ---------- */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 200;
  background: var(--ink); color: var(--paper);
  padding: 16px clamp(16px, 4vw, 32px);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px;
  box-shadow: 0 -8px 30px rgba(12,10,9,0.18);
}
.cookie-banner p { margin: 0; font-size: 0.88rem; line-height: 1.5; color: rgba(250,250,249,0.82); max-width: 62ch; flex: 1 1 320px; }
.cookie-banner a { color: var(--paper); text-decoration: underline; }
.cookie-banner-actions { display: flex; gap: 10px; flex-shrink: 0; }
.cookie-banner button { font-family: var(--sans); font-size: 0.86rem; font-weight: 600; padding: 10px 18px; border-radius: 999px; border: 1px solid rgba(250,250,249,0.3); cursor: pointer; white-space: nowrap; }
.cookie-banner .cb-accept { background: var(--green); color: var(--paper); border-color: var(--green); }
.cookie-banner .cb-accept:hover { background: var(--green-deep); border-color: var(--green-deep); }
.cookie-banner .cb-decline { background: transparent; color: var(--paper); }
.cookie-banner .cb-decline:hover { border-color: rgba(250,250,249,0.6); }
@media (max-width: 560px) {
  .cookie-banner { padding: 14px 16px; gap: 10px; }
  .cookie-banner p { flex-basis: 100%; font-size: 0.82rem; }
  .cookie-banner-actions { flex: 1 1 100%; }
  .cookie-banner button { flex: 1 1 0; padding: 9px 12px; font-size: 0.82rem; }
}

/* ---------- Vergelijkingstabel vloerafwerkingen ---------- */
.vgl-wrap {
  overflow-x: auto;
  margin: clamp(28px, 4vw, 40px) 0 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--surface);
}
.vgl {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-size: 0.94rem;
}
.vgl th,
.vgl td {
  padding: 14px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: top;
  line-height: 1.5;
}
.vgl thead th {
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  font-weight: 700;
  background: var(--surface-2, rgba(0,0,0,0.02));
  white-space: nowrap;
}
.vgl tbody th {
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.vgl tbody tr:last-child th,
.vgl tbody tr:last-child td { border-bottom: none; }
.vgl td { color: var(--ink-soft); }
.vgl-note {
  margin: 12px 0 0;
  font-size: 0.86rem;
  color: var(--ink-soft);
}