/* ==========================================================================
   Van Paassen Hovenier — basisstijl
   ========================================================================== */

:root {
  --color-green: #66d483;
  --color-green-dark: #4caf50;
  --color-green-darker: #00504c;
  --color-black: #111111;
  --color-white: #ffffff;
  --color-bg-light: #e6f0e6;
  --color-bg-soft: #fbfcfc;
  --color-text: #1a1a1a;
  --color-text-muted: #555555;
  --color-green-text: #1f7a3a;
  --color-border: #e8eee8;
  --color-footer-text: #d7d7d7;
  --color-error: #a32222;
  --color-whatsapp: #25d366;
  --font-heading: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --font-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --container-width: 1140px;
  /* Tekstgroottes: één schaal voor de hele site (audit 19-9, punt 26) */
  --tekst-xs: 0.8rem;     /* fototeller */
  --tekst-s: 0.875rem;    /* kruimels, labels, kleine regels, meta */
  --tekst-m: 0.95rem;     /* knoppen, tekstlinks, formuliermeldingen */
  --tekst-basis: 1rem;    /* lopende tekst, velden, menu */
  --tekst-l: 1.1rem;      /* intro's, ondertitels, FAQ-vragen */
  --tekst-xl: 1.25rem;    /* kaarttitels, mobiel menu */
  --kop-s: 1.5rem;        /* kleine kop (contactkaart) */
  --kop-m: 1.8rem;        /* paginakop op subpagina's, welkomlabel */
  --kop-l: 2.2rem;        /* sectiekoppen, banner, mobiele hero */
  --kop-xl: 2.7rem;       /* grote sectiekop op desktop */
  --kop-hero: clamp(2.4rem, 5vw, 4rem);
  --sectie-ruimte: 96px;
  --radius-pill: 999px;
  --radius-card: 8px;
  --shadow-card: 0 10px 25px rgba(0, 0, 0, 0.08);
  --duur-reveal: 0.45s;
  --ease-reveal: cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h: 101px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--color-text);
  background: var(--color-bg-soft);
  line-height: 1.6;
}

img {
  max-width: 100%;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 24px;
}

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

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-pill);
  font-weight: 400;
  font-size: var(--tekst-m);
  border: none;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--color-green);
  color: var(--color-black);
}

.btn-primary:hover {
  background: var(--color-green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(76, 175, 80, 0.35);
}

.btn-outline {
  background: transparent;
  color: var(--color-white);
  border: 2px solid var(--color-white);
}

.btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
}

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

.site-header {
  position: sticky;
  top: 0;
  z-index: 90;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  padding-bottom: 14px;
  gap: 24px;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo img {
  height: 72px;
  width: auto;
}

.main-nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.main-nav > ul {
  display: flex;
  align-items: center;
  gap: 36px;
}

.main-nav a.nav-link {
  font-weight: 500;
  font-size: var(--tekst-basis);
  color: var(--color-text);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.main-nav a.nav-link:hover {
  color: var(--color-green-dark);
}

.has-dropdown {
  position: relative;
}

/* Diensten: de tekst is een gewone link, de chevron een aparte knop die het
   submenu opent (op desktop ook via hover/focus-within). */

.nav-dienst {
  display: flex;
  align-items: center;
  gap: 2px;
}

.nav-uitklap {
  background: none;
  border: 0;
  padding: 6px;
  margin: -6px 0;
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: 50%;
}

.has-dropdown .chevron {
  width: 10px;
  height: 10px;
  transition: transform 0.15s ease;
}

.has-dropdown:hover .chevron, .has-dropdown.is-open .chevron {
  transform: rotate(180deg);
}

.dropdown-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--color-white);
  box-shadow: var(--shadow-card);
  border-radius: var(--radius-card);
  min-width: 220px;
  padding: 10px 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease, top 0.15s ease;
  z-index: 50;
}

.has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu, .has-dropdown.is-open .dropdown-menu {
  opacity: 1;
  visibility: visible;
  top: calc(100% + 8px);
}

.dropdown-menu li a {
  display: block;
  padding: 10px 22px;
  font-size: var(--tekst-m);
  white-space: nowrap;
}

.dropdown-menu li a:hover {
  background: var(--color-bg-light);
  color: var(--color-green-dark);
}

.header-cta .btn {
  padding: 13px 26px;
}

.header-cta svg {
  width: 16px;
  height: 16px;
}

.nav-toggle {
  display: none;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  cursor: pointer;
}

.nav-toggle span {
  width: 100%;
  height: 2px;
  background: var(--color-black);
  border-radius: 2px;
}

/* ---------- Section headings ---------- */

.section-kicker {
  display: block;
  text-align: center;
  color: var(--color-green);
  font-weight: 400;
  font-size: var(--tekst-basis);
  margin-bottom: 8px;
}

.section-title {
  text-align: center;
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--kop-xl);
  margin: 0 0 44px;
  position: relative;
  display: block;
}

.section-title em, .section-title .accent {
  font-style: italic;
  position: relative;
  display: inline-block;
}

.section-title .accent::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 8px;
  border-bottom: 4px solid var(--color-green);
  border-radius: 50%;
}

.section-heading {
  text-align: center;
  margin-bottom: 48px;
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  display: flex;
  overflow: hidden;
  background: #1c1c1c;
  min-height: min(100svh, 960px);
  align-items: center;
}

@media (max-width: 992px) {
  .hero {
    min-height: 480px;
  }

}

@media (max-width: 600px) {
  .hero {
    min-height: 520px;
  }

}

.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.6s ease;
  display: flex;
  align-items: center;
}

/* De herofoto is een <img> met srcset: de browser kiest zelf de scherpste maat
   voor de schermbreedte en pixeldichtheid (telefoon krijgt een staande uitsnede). */

.hero-foto, .hero-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.hero-slide.is-active {
  opacity: 1;
}

.hero-slide::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Bovenin donkerder: de herofoto's hebben een lichte lucht en daar staan het witte logo en het menu op */
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.35) 22%, rgba(0, 0, 0, 0.15) 45%, rgba(0, 0, 0, 0.2) 65%, rgba(0, 0, 0, 0.6) 100%);
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--color-white);
  width: 100%;
  padding-bottom: 0;
  padding-top: 20px;
  text-align: center;
}

.hero-content h1, .hero-content .hero-title {
  font-family: var(--font-heading);
  text-transform: uppercase;
  display: inline-block;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.02em;
  font-size: var(--kop-hero);
  line-height: 1.08;
  border-bottom: 0;
  padding-bottom: 0;
  margin: 0 0 14px;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.35);
}

.hero-content p {
  font-style: normal;
  font-size: var(--tekst-xl);
  margin: 0 0 30px;
  opacity: 0.95;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 3;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease;
}

.hero-arrow:hover {
  background: rgba(255, 255, 255, 0.3);
}

.hero-arrow.prev {
  left: 24px;
}

.hero-arrow.next {
  right: 24px;
}

.hero-arrow svg {
  width: 22px;
  height: 22px;
}

/* Telefoon: tekst linksonder in het donkere deel, kleinere kop, geen pijlen (stipjes i.p.v.) */

@media (max-width: 600px) {
  .hero-content {
    padding-bottom: 56px;
    text-align: left;
  }

  .hero-content h1, .hero-content .hero-title {
    font-size: var(--kop-l);
  }

  .hero-content p {
    font-size: var(--tekst-l);
    max-width: 30ch;
  }

  .hero-arrow {
    display: none;
  }

  .hero-slide::after {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.05) 0%, rgba(0, 0, 0, 0.25) 45%, rgba(0, 0, 0, 0.72) 100%);
  }

}

.hero-dots {
  position: absolute;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  bottom: 22px;
  gap: 0;
  align-items: center;
}

.hero-dots button {
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.hero-dots button.is-active {
  background: var(--color-white);
  transform: scale(1.25);
}

@media (max-width: 600px) {
  .hero-dots {
    justify-content: flex-start;
    padding-left: 24px;
  }

}

/* ---------- Welkom sectie ---------- */

.welcome {
  padding: var(--sectie-ruimte) 0 calc(var(--sectie-ruimte) - 24px);
  background: var(--color-bg-light);
  position: relative;
  overflow: hidden;
}

.welcome-shape-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 40px;
  line-height: 0;
}

.welcome-shape-bottom svg {
  width: 100%;
  height: 100%;
  display: block;
  transform: rotate(180deg);
}

.welcome-shape-bottom path {
  fill: var(--color-bg-soft);
}

.welcome .container {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: center;
}

/* Het kader zelf is maximaal 452px breed, zodat label en knop (absolute
   gepositioneerd) altijd binnen de foto blijven — ook als de sectie op
   tablet/mobiel één kolom wordt en breder is dan de foto. */

.welcome-image {
  position: relative;
  width: 100%;
  max-width: 452px;
  margin: 0 auto;
  border-radius: var(--radius-card);
  overflow: hidden;
}

.welcome-image img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  height: auto;
  object-fit: cover;
}

.welcome-image-label {
  position: absolute;
  left: 40px;
  bottom: 90px;
  color: var(--color-white);
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--kop-m);
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

.welcome-image .btn {
  position: absolute;
  left: 40px;
  bottom: 32px;
}

.welcome-text .section-kicker {
  text-align: left;
}

.welcome-text h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--kop-xl);
  margin: 0 0 24px;
  position: relative;
  display: inline-block;
}

.welcome-text h2::after {
  content: '';
  display: block;
  height: 6px;
  border-bottom: 4px solid var(--color-green);
  border-radius: 50%;
  margin-top: 8px;
}

.welcome-text p {
  color: var(--color-text-muted);
  margin-bottom: 22px;
}

.welcome-text a.inline-link {
  color: var(--color-green-dark);
  font-weight: 600;
}

.welcome-text a.inline-link:hover {
  text-decoration: underline;
}

/* ---------- Cards (diensten / projecten) ---------- */

.card-section {
  padding: calc(var(--sectie-ruimte) - 32px) 0 var(--sectie-ruimte);
  position: relative;
}

.card-carousel {
  position: relative;
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}

/* Slider: zodra er meer kaarten zijn dan er naast elkaar passen, wordt het
   rooster een horizontale strook die om de paar seconden automatisch
   doorschuift (en met de vinger te swipen is). Geen pijlen, wel stipjes. */

.card-carousel.is-slider .card-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding: 6px 6px 14px;
  margin: -6px -6px -14px;
  position: relative;
}

.card-carousel.is-slider .card-grid::-webkit-scrollbar {
  display: none;
}

.card-carousel.is-slider .card {
  flex: 0 0 calc((100% - 2 * 32px) / 3);
  scroll-snap-align: start;
}

.card-dots {
  display: flex;
  justify-content: center;
  gap: 2px;
  margin-top: 18px;
}

.card-dots button {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #c6d6ca;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.2s ease;
}

.card-dots button.is-active {
  background: var(--color-green-dark);
  transform: scale(1.2);
}

/* Kaart: de foto vult de hele kaart, de titel staat onderin op een donker
   verloop. De omschrijving (of plaats · dienst) en de pijl-link klappen
   omhoog bij hover of toetsenbordfocus; op aanraakschermen (geen hover)
   staan ze altijd open, anders zou de tekst onbereikbaar zijn. */

.card {
  position: relative;
  isolation: isolate;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  background: var(--color-green-darker);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

.card:hover, .card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 18px 36px rgba(0, 0, 0, 0.18);
}

.card-image {
  position: absolute;
  inset: 0;
  z-index: -1;
  display: block;
  background: var(--color-bg-light);
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.7s ease;
}

.card:hover .card-image img, .card:focus-within .card-image img {
  transform: scale(1.06);
}

.card-body {
  padding: 96px 24px 22px;
  text-align: left;
  color: var(--color-white);
  background: linear-gradient(to top, rgba(6, 26, 16, 0.94) 0%, rgba(6, 26, 16, 0.7) 50%, rgba(6, 26, 16, 0) 100%);
}

.card-body h3 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--tekst-xl);
  line-height: 1.3;
  margin: 0;
  color: var(--color-white);
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}

.card-body h3 a {
  color: inherit;
}

/* Uitklapdeel: van 0fr naar 1fr zodat de hoogte meeanimeert zonder vaste maat */

.card-meer {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows 0.4s var(--ease-reveal), opacity 0.3s ease;
}

.card-meer > div {
  min-height: 0;
  overflow: hidden;
}

.card:hover .card-meer, .card:focus-within .card-meer {
  grid-template-rows: 1fr;
  opacity: 1;
}

@media (hover: none) {
  .card-meer {
    grid-template-rows: 1fr;
    opacity: 1;
  }

  .card-body {
    padding-top: 72px;
  }

}

.card-meta {
  color: var(--color-white);
  font-size: var(--tekst-s);
  line-height: 1.5;
  margin: 8px 0 0;
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

.card-link {
  margin-top: 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-green);
  font-weight: 600;
  font-size: var(--tekst-m);
}

.card-link svg {
  width: 16px;
  height: 16px;
  transition: transform 0.2s ease;
}

.card:hover .card-link svg {
  transform: translateX(4px);
}

/* Het hele kaartje is klikbaar via de titel-link (::after over de kaart) */

.card-body h3 a::after {
  content: '';
  position: absolute;
  inset: 0;
}

@media (prefers-reduced-motion: reduce) {
  .card:hover .card-image img, .card:focus-within .card-image img, .card:hover .card-link svg {
    transform: none;
  }

  .card-meer {
    transition: none;
  }

}

/* ---------- Donkergroen banner ---------- */

.banner {
  background: var(--color-green-darker);
  color: var(--color-white);
  padding: var(--sectie-ruimte) 0 calc(var(--sectie-ruimte) - 16px);
  position: relative;
}

.section-shape-top-arrow {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  height: 15px;
  line-height: 0;
  z-index: 2;
}

.section-shape-top-arrow svg {
  width: 100%;
  height: 100%;
  display: block;
}

.section-shape-top-arrow path {
  fill: var(--color-bg-soft);
}

/* De pijl "komt uit" de sectie erboven: kies de variant met die kleur */

.section-shape-top-arrow.arrow-from-green path {
  fill: var(--color-green-darker);
}

.section-shape-top-arrow.arrow-from-soft path {
  fill: var(--color-bg-soft);
}

.section-shape-top-arrow.arrow-from-light path {
  fill: var(--color-bg-light);
}

.banner .container {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 60px;
  align-items: center;
}

.banner h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--kop-l);
  margin: 0;
}

.banner p {
  margin: 0;
  font-size: var(--tekst-l);
}

.banner a {
  color: var(--color-green);
  text-decoration: underline;
}

/* ---------- Projecten sectie ---------- */

.projects-section {
  padding: var(--sectie-ruimte) 0;
  background: var(--color-bg-soft);
  position: relative;
}

.section-more {
  text-align: center;
  margin-top: 44px;
}

/* ---------- Contact CTA ---------- */

.contact-cta {
  position: relative;
  isolation: isolate;
  padding: calc(var(--sectie-ruimte) + 16px) 0;
  background: var(--color-green-darker);
  text-align: center;
  color: var(--color-white);
  overflow: hidden;
}

/* Foto als <img> met srcset (geen CSS-achtergrond), donker vlak erover */

.contact-cta-foto img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.contact-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(10, 30, 20, 0.72);
}

.contact-cta-content {
  position: relative;
  z-index: 2;
}

.contact-cta h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--kop-l);
  margin: 0 0 14px;
}

.contact-cta p {
  font-size: var(--tekst-l);
  margin: 0 0 34px;
  opacity: 0.9;
}

.contact-cta-buttons {
  display: flex;
  gap: 18px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ---------- Footer ---------- */

.site-footer {
  background: var(--color-black);
  color: var(--color-white);
  padding: calc(var(--sectie-ruimte) - 16px) 0 24px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
}

.footer-logo img {
  height: 90px;
  width: auto;
  margin-bottom: 10px;
}

.footer-col h3 {
  font-size: var(--tekst-l);
  font-weight: 700;
  margin: 0 0 22px;
}

.footer-col ul li {
  margin-bottom: 14px;
}

.footer-col ul li a, .footer-contact li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-footer-text);
}

.footer-contact li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--color-green);
}

.footer-contact li a {
  color: inherit;
  text-decoration: none;
}

.footer-contact li a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.footer-col ul li a:hover {
  color: var(--color-green);
}

.footer-col ul li a svg {
  width: 16px;
  height: 16px;
  color: var(--color-green);
}

.footer-bottom {
  margin-top: 50px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
  font-size: var(--tekst-s);
  color: #999;
}

/* ---------- Paginabanner (interne pagina's) ---------- */

.page-hero {
  position: relative;
  background: var(--color-green-darker) url('../images/decor/page-hero-bg.jpg') center / cover no-repeat;
  color: var(--color-white);
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: calc(260px + var(--header-h));
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 40, 38, 0.82) 0%, rgba(0, 80, 76, 0.6) 40%, rgba(0, 40, 38, 0.75) 100%);
}

.page-hero .container {
  position: relative;
  z-index: 1;
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--kop-l);
  line-height: 1.25;
  margin: 0;
}

@media (max-width: 600px) {
  .page-hero {
    min-height: 180px;
  }

  .page-hero h1 {
    font-size: var(--kop-m);
  }

}

.placeholder-content {
  padding: 90px 0;
  text-align: center;
  color: var(--color-text-muted);
}

.placeholder-content h2 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--color-text);
}

/* ---------- Content blocks (Over ons / dienst-detailpagina's) ---------- */

.content-block {
  padding: var(--sectie-ruimte) 0;
  position: relative;
}

.content-block:nth-child(even) {
  background: var(--color-bg-soft);
}

.content-block .section-kicker {
  text-align: left;
}

.content-block h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--kop-l);
  margin: 0 0 22px;
  position: relative;
  display: inline-block;
}

.content-block h2::after {
  content: '';
  display: block;
  height: 6px;
  border-bottom: 4px solid var(--color-green);
  border-radius: 50%;
  margin-top: 8px;
}

.content-block p {
  color: var(--color-text-muted);
  max-width: 820px;
}

.content-block p + p {
  margin-top: 18px;
}

.check-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 32px;
  margin-top: 28px;
  max-width: 820px;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text);
  font-weight: 500;
}

.check-list svg {
  width: 18px;
  height: 18px;
  color: var(--color-green-dark);
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .check-list {
    grid-template-columns: 1fr;
  }

}

/* ---------- Donkergroene tekstsectie ---------- */

.content-block.donkergroen {
  background: var(--color-green-darker);
  color: var(--color-white);
}

.content-block.donkergroen h2, .content-block.donkergroen p, .content-block.donkergroen .check-list li {
  color: var(--color-white);
}

.content-block.donkergroen .section-kicker {
  text-align: left;
  color: var(--color-green);
}

.content-block.donkergroen .check-list svg {
  color: var(--color-green);
}

.content-block.donkergroen .inline-link {
  color: var(--color-green);
}

/* ---------- Tekst met fotorooster ernaast ---------- */

.text-gallery-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

/* ---------- Fotoslider (dienstpagina's): één kader, foto's vloeien over ---------- */

.foto-slider {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  background: var(--color-bg-light);
  cursor: zoom-in;
}

.foto-slider img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
  pointer-events: none;
}

.foto-slider img.is-active {
  opacity: 1;
  pointer-events: auto;
}

.foto-slider .foto-teller {
  position: absolute;
  right: 14px;
  bottom: 12px;
  z-index: 2;
  background: rgba(8, 20, 16, 0.72);
  color: var(--color-white);
  font-size: var(--tekst-xs);
  font-weight: 600;
  padding: 5px 11px;
  border-radius: 999px;
  pointer-events: none;
}

.foto-slider-wrap .card-dots {
  margin-top: 18px;
}

.text-gallery-row .gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.text-gallery-row .gallery-grid img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Rooster altijd vol (initGalerijRooster in main.js): bij 3 kolommen krijgt
   een liggende foto twee kolommen (.half, 3:2) met een staande foto ernaast
   die meerekt tot dezelfde hoogte; bij 2 kolommen mag één foto de volle
   breedte (.breed). Nooit een foto over drie kolommen: dan wordt de
   800/1400-px-versie opgeblazen en wazig. */

.gallery-grid {
  grid-auto-flow: dense;
}

/* Alleen de buur van een brede foto rekt mee tot de rijhoogte (object-fit
   snijdt bij); de andere rijen blijven strak 4:3. */

.gallery-grid img.buur {
  align-self: stretch;
}

.gallery-grid img.half, .gallery-grid img.breed {
  align-self: start;
}

.gallery-grid img.breed {
  grid-column: 1 / -1;
  aspect-ratio: 3 / 2;
}

.gallery-grid img.half {
  grid-column: span 2;
  aspect-ratio: 3 / 2;
}

.gallery-grid img.half.half-laag {
  aspect-ratio: 16 / 9;
}

.contact-kaart .btn-outline {
  color: var(--color-green-darker);
  border-color: var(--color-green-darker);
}

.contact-kaart .btn-outline:hover {
  background: var(--color-green-darker);
  color: var(--color-white);
}

/* Klikbare foto's (lightbox) */

.gallery-grid img {
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.gallery-grid img:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

@media (max-width: 900px) {
  .text-gallery-row {
    grid-template-columns: 1fr;
    gap: 32px;
  }

}

/* ---------- Donkergroen blok: checklist + contactkaart ---------- */

.checklist-row {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
}

.contact-kaart {
  background: var(--color-white);
  color: var(--color-text);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 38px 36px;
}

.contact-kaart h3 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--kop-s);
  margin: 0 0 14px;
  color: var(--color-text);
}

.content-block.donkergroen .contact-kaart p {
  color: var(--color-text-muted);
  margin: 0 0 24px;
}

.contact-kaart .contact-kaart-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.contact-kaart .btn svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
}

@media (max-width: 900px) {
  .checklist-row {
    grid-template-columns: 1fr;
    gap: 36px;
  }

}

/* ---------- Lightbox ---------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(8, 20, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.lightbox.is-open {
  opacity: 1;
}

.lightbox-figure {
  margin: 0;
  max-width: 92vw;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.lightbox-figure img {
  max-width: 92vw;
  max-height: 78vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-card);
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.6);
  background: #111;
}

.lightbox-caption {
  color: var(--color-footer-text);
  font-size: var(--tekst-s);
  text-align: center;
  display: flex;
  gap: 14px;
  align-items: center;
}

.lightbox-counter {
  color: var(--color-green);
  font-weight: 600;
}

.lightbox-btn {
  position: absolute;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--color-green);
  color: var(--color-black);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
  transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-btn:hover {
  background: var(--color-green-dark);
  transform: scale(1.06);
}

.lightbox-btn svg {
  width: 22px;
  height: 22px;
}

.lightbox-close {
  top: 20px;
  right: 20px;
}

.lightbox-prev {
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-next {
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
}

.lightbox-prev:hover, .lightbox-next:hover {
  transform: translateY(-50%) scale(1.06);
}

body.lightbox-open {
  overflow: hidden;
}

@media (max-width: 600px) {
  .lightbox-btn {
    width: 42px;
    height: 42px;
  }

  .lightbox-close {
    top: 12px;
    right: 12px;
  }

  .lightbox-prev {
    left: 8px;
  }

  .lightbox-next {
    right: 8px;
  }

  .lightbox-figure img {
    max-height: 70vh;
  }

}

/* ---------- Tekst met foto ernaast (Over ons / diensten) ---------- */

.text-image-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.text-image-row.reverse .text-image-text {
  order: 2;
}

.text-image-media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

@media (max-width: 900px) {
  .text-image-row, .text-image-row.reverse {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .text-image-row.reverse .text-image-text {
    order: 0;
  }

}

/* ---------- Contactformulier ---------- */

.contact-layout {
  display: grid;
  grid-template-columns: 1fr 1.3fr;
  gap: 60px;
  align-items: start;
}

.contact-info .section-kicker {
  text-align: left;
}

.contact-info h2 {
  font-family: var(--font-heading);
  font-style: italic;
  font-weight: 700;
  font-size: var(--kop-l);
  margin: 0 0 18px;
}

.contact-info p {
  color: var(--color-text-muted);
}

.contact-info-list {
  margin-top: 28px;
}

.contact-info-list li {
  color: var(--color-text);
  margin-bottom: 14px;
}

.contact-info-list a {
  color: var(--color-text);
}

.contact-info-list a:hover {
  color: var(--color-green-dark);
}

.contact-socials {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}

.contact-socials a {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-card);
  background: var(--color-green);
  display: flex;
  align-items: center;
  justify-content: center;
}

.contact-socials a:hover {
  background: var(--color-green-dark);
}

.contact-socials svg {
  width: 18px;
  height: 18px;
  fill: var(--color-white);
}

.contact-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--color-bg-light);
  padding: 36px;
  border-radius: var(--radius-card);
}

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}

.contact-form input, .contact-form textarea {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-body);
  font-size: var(--tekst-basis);
  padding: 12px 16px;
  border: 1px solid #d8e0dc;
  border-radius: var(--radius-card);
  background: var(--color-white);
  color: var(--color-text);
  resize: vertical;
}

.contact-form input:focus, .contact-form textarea:focus {
  outline: 2px solid var(--color-green);
  outline-offset: 1px;
}

.contact-form button {
  margin-top: 8px;
  justify-content: center;
  width: 100%;
  border: none;
}

.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.form-message {
  padding: 14px 18px;
  border-radius: var(--radius-card);
  font-size: var(--tekst-m);
  margin-bottom: 10px;
}

.form-message-success {
  background: #e4f7e9;
  color: #1a6b32;
}

.form-message-error {
  background: #fbe6e6;
  color: var(--color-error);
}

@media (max-width: 900px) {
  .contact-layout {
    grid-template-columns: 1fr;
  }

}

@media (max-width: 600px) {
  .contact-form .form-row {
    grid-template-columns: 1fr;
  }

  .contact-form {
    padding: 22px 18px;
  }

}

/* ---------- Projectdetail galerij ---------- */

/* ---------- Projectpagina ---------- */

.page-hero-project {
  min-height: calc(300px + var(--header-h));
}

.kruimels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: var(--tekst-s);
  color: rgba(255, 255, 255, 0.8);
  margin-bottom: 12px;
}

.kruimels a {
  color: rgba(255, 255, 255, 0.85);
}

.kruimels a:hover {
  color: var(--color-white);
  text-decoration: underline;
}

.kruimels span:last-child {
  color: var(--color-white);
}

.project-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}

.project-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 999px;
  font-size: var(--tekst-s);
  font-weight: 600;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.35);
  color: var(--color-white);
  text-decoration: none;
  transition: background 0.2s ease;
}

.project-label svg {
  width: 15px;
  height: 15px;
}

.project-label-plaats {
  background: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-black);
}

a.project-label:hover {
  background: var(--color-white);
  color: var(--color-green-darker);
}

.project-over .text-image-text p + p {
  margin-top: 18px;
}

.project-knoppen {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 22px;
  margin-top: 28px;
}

.project-knoppen .btn svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: -3px;
}

.project-knoppen .inline-link {
  color: var(--color-green-dark);
  font-weight: 600;
}

.project-knoppen .inline-link:hover {
  text-decoration: underline;
}

.project-kaartfoto img {
  cursor: zoom-in;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.project-kaartfoto img:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.18);
}

.project-gallery {
  padding: var(--sectie-ruimte) 0;
  background: var(--color-bg-light);
  position: relative;
}

.project-gallery .gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.project-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  height: auto;
  object-fit: cover;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}

/* Rooster zonder gaten: zie .gallery-grid img.half/.breed hierboven (initGalerijRooster). */

.project-gallery .gallery-grid:has(img:only-child) {
  grid-template-columns: 1fr;
  max-width: 760px;
  margin: 0 auto;
}

.project-gallery .gallery-grid img:only-child {
  aspect-ratio: 4 / 3;
}

.project-meer {
  padding: var(--sectie-ruimte) 0;
}

@media (max-width: 992px) {
  .project-gallery .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

@media (max-width: 700px) {
  .project-gallery .gallery-grid {
    grid-template-columns: 1fr;
  }

  .project-gallery img.breed, .project-gallery img.half {
    aspect-ratio: 4 / 3;
  }

  .page-hero-project {
    min-height: 220px;
  }

}

/* ---------- Cookiebanner ---------- */

.cookie-banner {
  position: fixed;
  left: 20px;
  right: 20px;
  bottom: 20px;
  z-index: 200;
  background: var(--color-black);
  color: var(--color-white);
  border-radius: var(--radius-card);
  padding: 20px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
  max-width: 900px;
  margin: 0 auto;
}

.cookie-banner p {
  margin: 0;
  font-size: var(--tekst-s);
  color: var(--color-footer-text);
}

.cookie-banner a {
  color: var(--color-green);
  text-decoration: underline;
}

.cookie-banner .cookie-buttons {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.cookie-banner .btn {
  flex-shrink: 0;
  padding: 10px 22px;
}

/* "Weigeren" moet net zo opvallen als "Akkoord" (AP-richtlijn cookiebanners) */

.cookie-banner .btn-outline {
  color: var(--color-white);
  border-color: var(--color-white);
}

.cookie-banner .btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
}

/* ---------- Responsive ---------- */

@media (max-width: 992px) {
  .welcome .container {
    grid-template-columns: 1fr;
  }

  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-carousel.is-slider .card {
    flex-basis: calc((100% - 32px) / 2);
  }

  .banner .container {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }

}

@media (max-width: 767px) {
  .section-title, .welcome-text h2 {
    font-size: var(--kop-l);
  }

  .logo img {
    height: 76px;
  }

}

@media (max-width: 768px) {
  .main-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--color-white);
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 24px 24px 36px;
    box-shadow: 0 16px 30px rgba(0, 0, 0, 0.12);
    z-index: 100;
  }

  .main-nav.is-open {
    display: flex;
  }

  .main-nav > ul {
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
  }

  .has-dropdown {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    display: none;
    padding-left: 0;
    min-width: 0;
    text-align: center;
    margin-top: 16px;
  }

  .has-dropdown.is-open .dropdown-menu {
    display: block;
  }

  .header-cta .btn {
    padding: 10px 16px;
    font-size: var(--tekst-s);
  }

  .nav-toggle {
    display: flex;
    position: relative;
    z-index: 101;
  }

  .nav-toggle span {
    transition: transform 0.2s ease, opacity 0.2s ease;
  }

  .nav-toggle.is-active span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
  }

  .nav-toggle.is-active span:nth-child(2) {
    opacity: 0;
  }

  .nav-toggle.is-active span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
  }

  .card-grid {
    grid-template-columns: 1fr;
  }

  .card-carousel.is-slider .card {
    flex-basis: 100%;
  }

  .footer-grid {
    grid-template-columns: 1fr;
  }

}

/* ==========================================================================
   Professionalisering (16-9-2026): toegankelijkheid, beweging, sticky header,
   USP-strook, WhatsApp, kaart, formulierlabels
   ========================================================================== */

/* Kickers en inline-links in leesbaar groen; knoppen houden het lichte groen (zwarte tekst) */

.section-kicker, .welcome-text a.inline-link, .project-knoppen .inline-link, .content-block.donkergroen .section-kicker {
  color: var(--color-green-text);
}

.content-block.donkergroen .section-kicker, .content-block.donkergroen .inline-link {
  color: var(--color-green);
}

/* ---------- Skip-link en focus ---------- */

.skip-link {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 1000;
  background: var(--color-green-darker);
  color: var(--color-white);
  padding: 12px 20px;
  border-radius: var(--radius-pill);
  font-weight: 600;
  transition: top 0.15s ease;
}

.skip-link:focus {
  top: 16px;
}

:focus-visible {
  outline: 3px solid var(--color-green-dark);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible {
  outline-offset: 4px;
}

.main-nav a[aria-current="page"], .main-nav a.nav-link:hover, .dropdown-menu li a:hover {
  color: var(--color-green-text);
}

.main-nav a[aria-current="page"] {
  font-weight: 600;
}

/* ---------- Scroll-reveal ---------- */

.js .reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--duur-reveal) var(--ease-reveal), transform var(--duur-reveal) var(--ease-reveal);
  transition-delay: var(--reveal-vertraging, 0s);
  will-change: opacity, transform;
}

.js .reveal.is-zichtbaar {
  opacity: 1;
  transform: none;
}

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

  .hero-slide, .foto-slider img, .card, .btn {
    transition: none;
  }

}

.site-header .container, .logo img {
  transition: padding 0.2s ease, height 0.2s ease;
}

.site-header.is-compact {
  background: var(--color-white);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

.site-header.is-compact .container {
  padding-top: 8px;
  padding-bottom: 8px;
}

.site-header.is-compact .logo img {
  height: 56px;
}

/* ---------- USP-strook onder de hero ---------- */

.usp-strook {
  background: var(--color-white);
  border-bottom: 1px solid #eef2ee;
  padding: 28px 0;
}

.usp-strook .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.usp {
  display: flex;
  align-items: center;
  gap: 14px;
  font-weight: 600;
  font-size: var(--tekst-m);
  color: var(--color-text);
}

.usp-icoon {
  flex-shrink: 0;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-bg-light);
  color: var(--color-green-darker);
  display: flex;
  align-items: center;
  justify-content: center;
}

.usp-icoon svg {
  width: 22px;
  height: 22px;
}

.usp small {
  display: block;
  font-weight: 400;
  color: var(--color-text-muted);
  font-size: var(--tekst-s);
}

@media (max-width: 992px) {
  .usp-strook .container {
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
  }

}

@media (max-width: 600px) {
  .usp-strook {
    padding: 20px 0;
  }

  .usp-strook .container {
    grid-template-columns: 1fr;
    gap: 14px;
  }

}

/* Hero: twee knoppen + scrollhint */

.hero-knoppen {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}

.hero-knoppen .btn-outline {
  color: var(--color-white);
  border-color: rgba(255, 255, 255, 0.8);
}

.hero-knoppen .btn-outline:hover {
  background: var(--color-white);
  color: var(--color-black);
}

@media (max-width: 600px) {
  .hero-knoppen {
    justify-content: flex-start;
  }

}

/* ---------- WhatsApp ---------- */

.btn-whatsapp {
  background: var(--color-whatsapp);
  color: var(--color-black);
}

.btn-whatsapp:hover {
  background: #1fb958;
  transform: translateY(-2px);
}

.btn svg.icoon-whatsapp {
  width: 18px;
  height: 18px;
}

.whatsapp-zwevend {
  display: none;
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 95;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-whatsapp);
  color: var(--color-white);
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.whatsapp-zwevend svg {
  width: 28px;
  height: 28px;
}

body.cookiebanner-open .whatsapp-zwevend {
  opacity: 0;
  pointer-events: none;
}

@media (max-width: 768px) {
  .whatsapp-zwevend {
    display: flex;
  }

}

/* ---------- Kaart op de contactpagina ---------- */

.kaart {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  background: var(--color-bg-light);
  margin-top: 40px;
}

.kaart iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.kaart-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  text-align: center;
  padding: 24px;
  background: linear-gradient(180deg, rgba(230, 240, 230, 0.6), rgba(230, 240, 230, 0.95)), url('/images/contact/kaart-maasdijk.jpg') center / cover no-repeat;
}

.kaart-placeholder p {
  margin: 0;
  color: var(--color-text-muted);
  max-width: 34ch;
}

.kaart-placeholder .kaart-knoppen {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

.contact-info-list li.contact-openingstijden {
  align-items: flex-start;
}

/* ---------- Formulier met labels ---------- */

.contact-form label {
  display: block;
  font-weight: 600;
  font-size: var(--tekst-s);
  margin-bottom: 6px;
}

.contact-form label .verplicht {
  color: var(--color-green-text);
}

.contact-form .veld {
  margin-bottom: 16px;
}

.contact-form .form-row .veld {
  margin-bottom: 0;
}

.contact-form .veld-fout {
  display: none;
  color: var(--color-error);
  font-size: var(--tekst-s);
  margin-top: 6px;
}

.contact-form .veld.is-fout .veld-fout {
  display: block;
}

.contact-form .veld.is-fout input, .contact-form .veld.is-fout textarea {
  border-color: var(--color-error);
}

.form-message:focus {
  outline: none;
}

/* ---------- Footer-extra's ---------- */

.footer-contact li[hidden] {
  display: none;
}

.footer-social {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}

.footer-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-white);
  transition: background 0.2s ease;
}

.footer-social a:hover {
  background: var(--color-green);
  color: var(--color-black);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.btn-outline-groen {
  background: transparent;
  color: var(--color-green-darker);
  border: 2px solid var(--color-green-darker);
}

.btn-outline-groen:hover {
  background: var(--color-green-darker);
  color: var(--color-white);
}

/* <picture> (WebP + JPEG) mag de layout niet beïnvloeden: roosters zien de <img>.
   Let op: <source> is in Chrome display: block, en wordt door display: contents
   een onzichtbaar rooster-item dat een cel inneemt (foto's verspringen). */

picture {
  display: contents;
}

picture > source {
  display: none;
}

/* ==========================================================================
   Samenhang + hero (16-9, ronde 2): glazen header over de banner, Ken Burns,
   één pijl-linkstijl voor alle inline-links
   ========================================================================== */

/* ---------- Eén pijl-link voor alle "lees verder"-links ---------- */

.welcome-text a.inline-link, .project-knoppen .inline-link, .banner a, .content-block .inline-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-green-text);
  font-weight: 600;
  text-decoration: none;
}

.welcome-text a.inline-link::after, .project-knoppen .inline-link::after, .banner a::after, .content-block .inline-link::after {
  content: '';
  width: 14px;
  height: 14px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform 0.2s ease;
}

.welcome-text a.inline-link:hover::after, .project-knoppen .inline-link:hover::after, .banner a:hover::after, .content-block .inline-link:hover::after {
  transform: translateX(4px);
}

.banner a, .content-block.donkergroen .inline-link {
  color: var(--color-green);
}

.welcome-text a.inline-link:hover, .inline-link:hover {
  text-decoration: none;
}

/* Mobiel menu (dropdown onder de header) moet dekkend blijven */

@media (max-width: 768px) {
  .main-nav {
    background: var(--color-white);
  }

}

/* ---------- Ken Burns: de actieve herofoto zoomt heel langzaam in ---------- */

@keyframes kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08); }
}

@keyframes hero-tekst {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: none; }
}

.hero-slide .hero-foto img, .hero-slide img.hero-foto {
  transform-origin: center;
}

.hero-slide.is-active .hero-foto img, .hero-slide.is-active img.hero-foto {
  animation: kenburns 9s ease-out forwards;
}

.hero-slide.is-active .hero-content {
  animation: hero-tekst 0.7s var(--ease-reveal) both;
  animation-delay: 0.15s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-slide.is-active .hero-foto img, .hero-slide.is-active img.hero-foto, .hero-slide.is-active .hero-content {
    animation: none;
  }

}

.header-cta {
  display: flex;
  align-items: center;
  gap: 22px;
}

.header-tel {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
}

.header-tel svg {
  width: 17px;
  height: 17px;
  color: var(--color-green-text);
}

.header-tel:hover {
  color: var(--color-green-text);
}

@media (max-width: 992px) {
  .header-tel span {
    display: none;
  }

  .header-tel {
    width: 44px;
    height: 44px;
    justify-content: center;
    border-radius: 50%;
    background: var(--color-bg-light);
  }

  .header-tel svg {
    width: 19px;
    height: 19px;
  }

}

/* Op de telefoon blijft de belknop (icoon, 44 px) staan: bellen is één tik */

@media (max-width: 480px) {
  .header-cta {
    gap: 8px;
  }

}

/* ==========================================================================
   Transparante header over de banner + schermvullende hero (16-9, ronde 3)
   ========================================================================== */

.logo-wit {
  display: none;
}

.site-header:not(.is-compact):not(.menu-open) .main-nav a.nav-link, .site-header:not(.is-compact):not(.menu-open) .header-tel, .site-header:not(.is-compact):not(.menu-open) .nav-toggle span {
  color: var(--color-white);
}

.site-header:not(.is-compact):not(.menu-open) .nav-toggle span {
  background: var(--color-white);
}

.site-header:not(.is-compact):not(.menu-open) .main-nav a.nav-link:hover, .site-header:not(.is-compact):not(.menu-open) .main-nav a[aria-current="page"] {
  color: var(--color-green);
}

.site-header:not(.is-compact):not(.menu-open) .header-tel svg {
  color: var(--color-green);
}

.site-header:not(.is-compact):not(.menu-open) .logo-donker {
  display: none;
}

.site-header:not(.is-compact):not(.menu-open) .logo-wit {
  display: block;
}

.site-header:not(.is-compact):not(.menu-open) .header-cta .btn-primary {
  background: transparent;
  color: var(--color-white);
  border: 2px solid rgba(255, 255, 255, 0.85);
}

.site-header:not(.is-compact):not(.menu-open) .header-cta .btn-primary:hover {
  background: var(--color-white);
  color: var(--color-black);
  box-shadow: none;
}

.site-header.is-compact, .site-header.menu-open {
  background: var(--color-white);
  border-bottom-color: var(--color-border);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.07);
}

/* Het mobiele menu (uitgeklapt) is altijd wit met donkere tekst */

@media (max-width: 768px) {
  .site-header:not(.is-compact):not(.menu-open) .main-nav.is-open a.nav-link, .site-header:not(.is-compact):not(.menu-open) .main-nav.is-open .dropdown-menu a {
    color: var(--color-text);
  }

}

/* Banners lopen onder de header door; een donker verloop bovenin houdt de header leesbaar */

.hero, .page-hero {
  margin-top: calc(-1 * var(--header-h));
  padding-top: var(--header-h);
}

/* Scroll-hint onderin */

@keyframes hero-scroll-wenk {
  0%, 100% { transform: translate(-50%, 0); }
  50% { transform: translate(-50%, 8px); }
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 56px;
  z-index: 3;
  width: 44px;
  height: 44px;
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.85;
  animation: hero-scroll-wenk 2s ease-in-out infinite;
}

.hero-scroll svg {
  width: 28px;
  height: 28px;
}

@media (prefers-reduced-motion: reduce) {
  .hero-scroll {
    animation: none;
  }

}

@media (max-width: 600px) {
  /* Op de telefoon niet schermvullend: 480 px foto + de header erboven */

  .hero {
    min-height: calc(480px + var(--header-h));
  }

  .hero-content {
    text-align: center;
    padding-bottom: 0;
  }

  .hero-content h1, .hero-content .hero-title {
    font-size: var(--kop-l);
  }

  .hero-content p {
    max-width: none;
    font-size: var(--tekst-l);
  }

  .hero-knoppen {
    justify-content: center;
  }

  .hero-dots {
    justify-content: center;
    padding-left: 0;
  }

  .hero-scroll {
    display: none;
  }

  .page-hero {
    min-height: calc(200px + var(--header-h));
  }

  .page-hero-project {
    min-height: calc(240px + var(--header-h));
  }

}

/* ==========================================================================
   Mobiel menu: paneel over het scherm met grote links, contact onderin
   ========================================================================== */

.nav-extra {
  display: none;
}

@media (max-width: 768px) {
  .main-nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    text-align: left;
    padding: 12px 24px 32px;
    background: var(--color-white);
    box-shadow: none;
    overflow-y: auto;
    z-index: 100;
  }

  .main-nav.is-open {
    display: flex;
    animation: menu-in 0.25s var(--ease-reveal) both;
  }

  @keyframes menu-in {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
  }

  .main-nav > ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }

  .main-nav > ul > li {
    border-bottom: 1px solid var(--color-border);
  }

  .main-nav a.nav-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 0;
    font-size: var(--tekst-xl);
    font-weight: 600;
    color: var(--color-text);
  }

  .main-nav a[aria-current="page"] {
    color: var(--color-green-text);
  }

  .has-dropdown {
    display: block;
  }

  .has-dropdown .chevron {
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
  }

  .has-dropdown.is-open .chevron {
    transform: rotate(180deg);
  }

  .dropdown-menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    display: none;
    padding: 0 0 12px 16px;
    margin: 0;
    min-width: 0;
    text-align: left;
  }

  .has-dropdown.is-open .dropdown-menu {
    display: block;
  }

  .dropdown-menu li a {
    padding: 10px 0;
    font-size: var(--tekst-l);
    color: var(--color-text-muted);
  }

  .dropdown-menu li a:hover {
    background: none;
  }

  .nav-extra {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: auto;
    padding-top: 28px;
  }

  .nav-extra .btn {
    justify-content: center;
    padding: 15px 24px;
    font-size: var(--tekst-l);
  }

  /* Volle rij van minstens 48 px: dit zijn de snelste contactpaden in het menu */

  .nav-extra-link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 48px;
    padding: 6px 0;
    font-weight: 600;
    font-size: var(--tekst-l);
    color: var(--color-text);
  }

  .nav-extra-link svg {
    width: 20px;
    height: 20px;
    color: var(--color-green-text);
  }

  /* Header-knop en telefoon verbergen zolang het menu open is (staan in het menu zelf) */

  .site-header.menu-open .header-cta {
    visibility: hidden;
  }

  body.menu-open {
    overflow: hidden;
  }

  body.menu-open .whatsapp-zwevend {
    display: none;
  }

}

/* ---------- Raakdoelen op aanraakschermen (18-9) ----------
   Stipjes van sliders zijn visueel 9–11 px, maar de knop eromheen is ~40 px
   (doorzichtige padding, background-clip houdt de stip klein). Links in
   footer, kruimelpad en contactlijst krijgen op de telefoon extra hoogte. */

.hero-dots button, .card-dots button, .hero-dots button.is-active, .card-dots button.is-active, .hero-dots button.is-active {
  box-sizing: content-box;
  padding: 15px;
  background-clip: content-box;
}

@media (max-width: 768px) {
  .footer-col ul li a, .footer-contact li a, .kruimels > *, .contact-info-list a {
    padding: 8px 0;
  }

  .footer-col ul li {
    margin-bottom: 4px;
  }

}

/* Kruimelpad op de projectpagina: de eigen titel niet op de telefoon
   herhalen (staat er als kop direct onder); kop iets kleiner op mobiel. */

@media (max-width: 600px) {
  .kruimels .kruimel-huidig {
    display: none;
  }

  .page-hero-project h1 {
    font-size: var(--kop-m);
    line-height: 1.2;
  }

}

@media (max-width: 768px) {
  .nav-dienst {
    justify-content: space-between;
    width: 100%;
  }

  .nav-dienst .nav-link {
    flex: 1;
  }

  .nav-uitklap {
    padding: 14px;
    margin: 0;
  }

  .has-dropdown:hover .dropdown-menu, .has-dropdown:focus-within .dropdown-menu {
    display: none;
  }

  .has-dropdown.is-open .dropdown-menu {
    display: block;
  }

}

/* Hero: pauzeknop naast de stipjes; bij 'minder beweging' wisselt de slider
   niet vanzelf (JS) en toont de knop 'Afspelen'. */

.hero-dots .slider-pauze, .card-dots .slider-pauze {
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-left: 4px;
  background-clip: border-box;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  color: var(--color-white);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.hero-dots .slider-pauze svg, .card-dots .slider-pauze svg {
  width: 14px;
  height: 14px;
}

/* Op de lichte achtergrond van de kaartensliders: groen vlak, wit icoon */

.card-dots .slider-pauze {
  background: var(--color-green-darker);
  color: var(--color-white);
  margin-left: 10px;
}

.card-dots .slider-pauze:hover {
  background: var(--color-green-text);
}

.hero-dots .slider-pauze:hover {
  background: rgba(255, 255, 255, 0.32);
}

.kaart-fout {
  position: absolute;
  inset: auto 16px 16px;
  margin: 0;
  padding: 12px 16px;
  background: var(--color-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  font-size: var(--tekst-m);
}

.form-uitleg {
  margin: 0 0 4px;
  font-size: var(--tekst-s);
  color: var(--color-text-muted);
}

/* Tablet (601–992 px): geen telefoonindeling. Kaarten in twee kolommen en
   een hero die niet het hele scherm vult, zodat de inhoud in beeld blijft. */

@media (min-width: 601px) and (max-width: 992px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .card-carousel.is-slider .card {
    flex-basis: calc((100% - 32px) / 2);
  }

  .hero {
    min-height: min(78svh, 720px);
  }

  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
  }

}

.project-terug {
  margin: 18px 0 0;
}

/* ---------- Veelgestelde vragen (dienstpagina's) ---------- */

.faq {
  background: var(--color-bg-light);
}

.faq .section-kicker {
  display: block;
  text-align: center;
}

.faq-lijst {
  max-width: 760px;
  margin: 0 auto;
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item summary {
  cursor: pointer;
  list-style: none;
  padding: 18px 44px 18px 0;
  font-weight: 600;
  font-size: var(--tekst-l);
  position: relative;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  content: '';
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-green-text);
  border-bottom: 2px solid var(--color-green-text);
  transform: translateY(-70%) rotate(45deg);
  transition: transform 0.2s ease;
}

.faq-item[open] summary::after {
  transform: translateY(-30%) rotate(225deg);
}

.faq-item p {
  margin: 0 0 18px;
  color: var(--color-text-muted);
}

/* Sectieritme op kleinere schermen */

@media (max-width: 768px) {
  :root {
    --sectie-ruimte: 64px;
  }

}

@media (max-width: 600px) {
  :root {
    --sectie-ruimte: 56px;
  }

  .section-heading {
    margin-bottom: 32px;
  }

}

/* ---------- Dienstenpagina: intro + drie tekst/foto-rijen ---------- */

.content-block.licht {
  background: var(--color-bg-light);
}

.section-intro {
  max-width: 680px;
  margin: 18px auto 0;
  color: var(--color-text-muted);
  font-size: var(--tekst-l);
}

.text-image-text .check-list {
  grid-template-columns: 1fr;
  gap: 10px;
  margin: 20px 0 28px;
}

.text-image-text .btn {
  margin-top: 4px;
}

/* Dienstenpagina: intro met drie snelkoppelingen naar de secties eronder */

.diensten-intro .section-kicker {
  display: block;
  text-align: center;
}

.diensten-intro .section-heading {
  margin-bottom: 40px;
}

.dienst-snel {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.dienst-snel-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 20px;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  color: var(--color-text);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.dienst-snel-item:hover, .dienst-snel-item:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
  border-color: var(--color-green);
}

.dienst-snel-tekst {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}

.dienst-snel-tekst strong {
  font-size: var(--tekst-l);
}

.dienst-snel-tekst small {
  color: var(--color-text-muted);
  font-size: var(--tekst-s);
  line-height: 1.4;
}

.dienst-snel-pijl {
  width: 18px;
  height: 18px;
  color: var(--color-green-text);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.dienst-snel-item:hover .dienst-snel-pijl {
  transform: translateX(4px);
}

@media (max-width: 992px) {
  .dienst-snel {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }

}

/* Ankers (bv. /diensten/#tuinonderhoud) landen niet onder de vaste header */

section[id] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

/* Contactpagina: bel- en WhatsApp-knop onder de gegevens */
.contact-knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.contact-knoppen .btn svg {
  width: 18px;
  height: 18px;
  margin-right: 8px;
}

/* Wit logo en witte menutekst op de foto: schaduw voor leesbaarheid bij een lichte lucht */
.site-header:not(.is-compact):not(.menu-open) .logo-wit {
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.55));
}

.site-header:not(.is-compact):not(.menu-open) .main-nav a.nav-link,
.site-header:not(.is-compact):not(.menu-open) .header-tel,
.site-header:not(.is-compact):not(.menu-open) .header-cta .btn-outline {
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}