/* ============================================================
   Het Bosatelier, design system
============================================================ */
/* Satoshi zelf gehost: Fontshare weigert requests vanaf localhost,
   waardoor lokaal een dikker vervangend font verscheen. */
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  --green: #5E764C;
  --green-700: #4a5e3c;
  --green-300: rgba(94, 118, 76, 0.18);
  --sand: #F2EDED;
  --sand-200: #e6dfdf;
  --gray: #F2EDED;
  --gray-300: #ddd6d6;
  --dark: #1A1A1A;
  --dark-60: rgba(26, 26, 26, 0.6);

  --serif: 'Playfair Display', 'Libre Baskerville', Georgia, serif;
  --sans:  'Satoshi', 'Inter', 'DM Sans', system-ui, -apple-system, sans-serif;

  --radius-pill: 54px;
  --radius-card: 24px;

  /* Hoever de boekingsbalk over de hero heen ligt. Staat hier, want de hero
     rekent er ook mee: zijn tekst moet er net boven eindigen. */
  --bookbar-lift: 37px;

  --shadow-sm: 0 4px 14px rgba(26, 26, 26, 0.06);
  --shadow-md: 0 18px 48px rgba(26, 26, 26, 0.10);
  --shadow-lg: 0 30px 80px rgba(26, 26, 26, 0.30);

  --section-y: clamp(64px, 9vw, 90px);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }
/* De navigatiebalk blijft in beeld staan, dus een sprong vanuit het menu moet
   eronder uitkomen in plaats van erachter. */
section[id],
footer[id] { scroll-margin-top: 110px; }
html.is-locked, html.is-locked body { overflow: hidden; }

body {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--dark);
  background: var(--sand);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

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

a {
  color: var(--green);
  text-decoration: none;
  transition: color .2s ease, opacity .2s ease;
}
a:hover { color: var(--green-700); }

.container {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 28px;
}

/* ============================================================
   Phosphor icons
============================================================ */
.ph {
  display: inline-block;
  vertical-align: -0.14em;
  line-height: 1;
}
.eyebrow .ph,
.link-arrow .ph,
.btn .ph,
.badge .ph,
.footer .ph {
  font-size: 1.05em;
}

/* ============================================================
   Typography
============================================================ */
.display {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(34px, 5.4vw, 64px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--dark);
  /* Lucht onder de kop. Zonder dit plakte de tekst eronder tegen de staarten
     van letters als de g en de j aan. Meegroeien met de kop, want een kop van
     64 pixels heeft meer ruimte nodig dan een van 34. */
  margin-bottom: clamp(16px, 1.9vw, 26px);
}
/* Staat de kop alleen in een gecentreerde sectiekop, dan brengt .section-head
   de ruimte eronder al mee. */
.section-head .display:last-child {
  margin-bottom: 0;
}
.display em {
  font-style: italic;
  color: var(--green);
}

h3 {
  font-family: var(--serif);
  font-weight: 500;
  font-size: 22px;
  line-height: 1.2;
  margin-bottom: 8px;
}
h4 {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  margin-bottom: 14px;
}

.eyebrow {
  font-family: var(--sans);
  font-weight: 500;
  /* Gewoon zoals het geschreven staat, niet in hoofdletters en niet in kleine
     kapitalen. De ruime spatiering hoorde bij die hoofdletters en kan dus ook
     weg. */
  font-size: 14.5px;
  letter-spacing: 0.01em;
  color: var(--green);
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.lede {
  font-size: 19px;
  line-height: 1.6;
  margin-bottom: 18px;
  color: var(--dark);
}

.section-head {
  max-width: 720px;
  margin: 0 auto var(--section-y) auto;
  text-align: center;
}
/* De ruimte tussen de kop en deze regel komt van de kop zelf. */
.section-head .lede { color: var(--dark-60); margin-top: 0; }
.section-head { margin-bottom: 60px; }
.section-head .eyebrow { justify-content: center; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  font-weight: 600;
  color: var(--green);
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease, gap .25s ease;
}
.link-arrow:hover { border-bottom-color: var(--green); gap: 12px; }

/* ============================================================
   Buttons (pill)
============================================================ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px 28px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.01em;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: transform .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease, gap .25s ease;
  white-space: nowrap;
  font-family: var(--sans);
}
.btn--primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 8px 24px rgba(94,118,76,0.28);
}
.btn--primary:hover {
  background: var(--green-700);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 12px 32px rgba(94,118,76,0.36);
  gap: 14px;
}
.btn--ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.6);
}
.btn--ghost:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.btn--light {
  background: rgba(255,255,255,0.92);
  color: var(--green);
  border-color: rgba(255,255,255,0.6);
  backdrop-filter: blur(8px);
}
.btn--light:hover {
  background: #fff;
  color: var(--green-700);
  transform: translateY(-2px);
}
.btn--small { padding: 10px 20px; font-size: 13px; }
.btn--disabled {
  background: var(--gray);
  color: var(--dark-60);
  cursor: not-allowed;
  pointer-events: none;
}

/* ============================================================
   NAV
============================================================ */
.nav {
  position: fixed;
  top: 18px;
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 36px);
  max-width: 1240px;
  z-index: 100;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 60px;
  box-shadow: none;
  transition: top .3s ease,
              max-width .4s cubic-bezier(.4,0,.2,1),
              background .3s ease,
              border-color .3s ease,
              box-shadow .3s ease;
}
.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 12px 36px;
  transition: padding .3s ease;
}
.nav.is-scrolled {
  background: #5E764C;
  border-color: rgba(255,255,255,0.12);
  box-shadow: 0 14px 40px rgba(26,26,26,0.10);
  max-width: 880px;
}
.nav.is-scrolled .nav__inner {
  padding: 9px 12px 9px 24px;
}

/* Compact CTA button inside the nav */
.nav__cta.btn--light {
  padding: 12px 22px;
  font-size: 14px;
  min-height: 0;
}

/* Tighter menu item hover area */
.nav__menu a {
  padding: 6px 0;
  line-height: 1.25;
}

.nav__logo {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  color: #fff;
  text-decoration: none;
  transition: opacity .2s ease, gap .3s ease;
}
.nav.is-scrolled .nav__logo { gap: 0; }
.nav__logo:hover { opacity: 0.92; }

.nav__logo-mark {
  height: 44px;
  width: auto;
  flex-shrink: 0;
  display: block;
  transition: height .3s ease;
}
.nav.is-scrolled .nav__logo-mark { height: 32px; }

.nav__logo-text-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  line-height: 1.05;
  overflow: hidden;
  max-width: 280px;
  transition: max-width .35s cubic-bezier(.4,0,.2,1), opacity .25s ease;
}
.nav.is-scrolled .nav__logo-text-wrap {
  max-width: 0;
  opacity: 0;
}

.nav__logo-wordmark {
  height: 26px;
  width: auto;
  display: block;
}

.nav__logo-tagline {
  display: block;
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.82);
  margin-top: 6px;
  white-space: nowrap;
}
.nav__menu {
  display: flex;
  gap: 26px;
  align-items: center;
}
.nav__menu a {
  color: rgba(255,255,255,0.92);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
}
.nav__menu a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 0;
  height: 1.5px;
  background: #fff;
  transition: width .25s ease, left .25s ease;
}
.nav__menu a:hover { color: #fff; }
.nav__menu a:hover::after { width: 100%; left: 0; }

/* Een dichte groene knop in plaats van een doorschijnend randje. Op een lichte
   foto viel de witte hamburger volledig weg. */
.nav__burger {
  display: none;
  background: var(--green);
  color: #fff;
  border: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 22px;
  box-shadow: 0 6px 18px rgba(26,26,26,0.22);
  transition: background .2s ease;
}
.nav__burger:hover { background: var(--green-700); }
/* Zodra de balk zelf groen wordt, draait de knop om. Groen op groen zie je
   nauwelijks. */
.nav.is-scrolled .nav__burger {
  background: #fff;
  color: var(--green);
  box-shadow: none;
}
.nav.is-scrolled .nav__burger:hover { background: var(--sand-200); }

@media (max-width: 960px) {
  .nav__menu { display: none; }
  .nav__cta { display: none; }
  .nav__burger { display: inline-flex; }
  .nav.is-open .nav__menu {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: absolute;
    top: 78px;
    left: 0;
    right: 0;
    background: rgba(94,118,76,0.96);
    backdrop-filter: blur(18px);
    padding: 24px 28px;
    border-radius: 24px;
    gap: 14px;
  }
}

/* ============================================================
   HERO
============================================================ */
.hero {
  position: relative;
  /* Net geen vol scherm, zodat je meteen ziet dat er meer onder staat. */
  height: 86vh;
  min-height: 600px;
  overflow: hidden;
  color: #fff;
}
.hero__slider { position: absolute; inset: 0; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.4s cubic-bezier(0.625, 0.05, 0, 1), transform 8s cubic-bezier(0.625, 0.05, 0, 1);
}
.hero__slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.hero__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.hero__overlay {
  position: absolute; inset: 0;
  /* Donker aan de kant waar de tekst staat, doorzichtig aan de andere kant,
     zodat de foto zelf zoveel mogelijk vrij blijft. */
  background: linear-gradient(276deg, rgb(0 0 0 / 0%) 0%, rgb(0 0 0 / 67%) 100%);
}
.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  flex-direction: column;
  /* Onderaan in beeld, met genoeg lucht eronder voor de boekingsbalk die er
     half overheen ligt. */
  justify-content: flex-end;
  max-width: 1240px;
  margin: 0 auto;
  /* Dezelfde 28 pixels als .container, zodat de tekst, de boekingsbalk en
     alle secties eronder op precies dezelfde lijn beginnen. Onderaan precies
     zoveel dat de tekst net boven de boekingsbalk eindigt. */
  padding: 0 28px calc(var(--bookbar-lift) + 26px);
}
.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  /* Net als de labeltjes verderop: gewoon zoals het geschreven staat. */
  font-size: 15px;
  letter-spacing: 0.01em;
  font-weight: 500;
  margin-bottom: 22px;
  color: rgba(255,255,255,0.92);
}
.hero__title {
  font-family: var(--serif);
  font-weight: 500;
  font-size: clamp(44px, 7.4vw, 96px);
  line-height: 1;
  letter-spacing: -0.02em;
  margin-bottom: 26px;
  /* Ruim genoeg voor twee regels, en balance verdeelt ze even lang. Zo valt
     er nooit één los woord op een derde regel. */
  max-width: 24ch;
  text-wrap: balance;
}
/* Op een telefoon past het niet in twee regels; daar mag de titel over
   meer regels lopen, wel steeds mooi verdeeld. */
@media (max-width: 720px) {
  .hero__title { max-width: none; }
}
.hero__sub {
  font-size: 18px;
  line-height: 1.6;
  max-width: 560px;
  /* Geen marge eronder meer: die hoorde bij de knoppen die hier stonden, en
     hield de tekst nu onnodig ver van de boekingsbalk af. */
  margin-bottom: 0;
  color: rgba(255,255,255,0.92);
}
/* De bolletjes staan rechtsonder, uit de weg van de tekst die linksonder
   staat. Ze zaten eerst in het midden, waar ze op een telefoon over de
   knoppen heen vielen. */
.hero__dots {
  position: absolute;
  /* In de strook tussen de onderkant van de tekst en de boekingsbalk. */
  bottom: calc(var(--bookbar-lift) + 8px);
  right: 32px;
  display: flex;
  gap: 10px;
  z-index: 3;
}
.hero__dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  border: 0;
  cursor: pointer;
  transition: background .25s ease, transform .25s ease;
  padding: 0;
}
.hero__dots button.is-active {
  background: #fff;
  transform: scale(1.25);
}

/* ============================================================
   Circle photos (clickable)
============================================================ */
.circle-photo {
  position: relative;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-md);
  transition: transform .5s ease, box-shadow .5s ease;
  cursor: pointer;
  outline: none;
}
.circle-photo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px var(--sand), 0 0 0 6px var(--green), var(--shadow-md);
}
.circle-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(26,26,26,0); /* invisible until hover */
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .3s ease;
  pointer-events: none;
}
.circle-photo::before {
  content: "\2295"; /* ⊕ fallback */
  font-family: 'Phosphor';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0;
  color: #fff;
  z-index: 2;
  pointer-events: none;
  transition: font-size .3s ease, opacity .3s ease;
  opacity: 0;
}
@media (hover: hover) {
  .circle-photo:hover { transform: scale(1.025); }
  .circle-photo:hover::after { background: rgba(26,26,26,0.30); }
  .circle-photo:hover::before { font-size: 38px; opacity: 1; }
}
.circle-photo--lg {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
}
.circle-photo--sm {
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: -20px;
  left: -10px;
  border: 8px solid var(--sand);
}
.circle-photo--card {
  /* Groeit mee met de kolom, maar blijft binnen de kaart. */
  width: min(215px, 100%);
  aspect-ratio: 1 / 1;
  height: auto;
  margin: 0 auto 22px;
}
.circle-photo--creatief-lg {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-left: auto;
}
.circle-photo--creatief-sm {
  width: 180px;
  height: 180px;
  position: absolute;
  bottom: -20px;
  left: -10px;
  border: 8px solid var(--sand);
}

/* ============================================================
   INTRO
============================================================ */
.legal {
  padding: calc(var(--section-y) + 60px) 0 var(--section-y) 0;
}
.legal__inner {
  max-width: 720px;
  margin: 0 auto;
}
.legal__inner h3 {
  margin-top: 36px;
}
.legal__inner p,
.legal__inner ul {
  margin-bottom: 14px;
  color: var(--dark-60, inherit);
}
.legal__inner ul {
  padding-left: 20px;
}
.legal__inner li {
  margin-bottom: 6px;
}

.intro {
  padding: var(--section-y) 0;
  background: var(--sand);
}
.intro__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}
.intro__media {
  position: relative;
  padding-bottom: 30px;
}

@media (max-width: 860px) {
  .intro__grid { grid-template-columns: 1fr; }
  /* De breedte moet er expliciet bij. Zonder dat bepaalt de inhoud hem, en
     die inhoud is zelf 100% breed; dan komt er nul uit en verdwenen deze
     twee foto's op een telefoon volledig uit beeld. */
  .intro__media { width: 100%; max-width: 460px; margin: 0 auto; }
  .circle-photo--sm { width: 130px; height: 130px; }
}

/* ============================================================
   TUINHUISJE
============================================================ */
.tuinhuisje {
  padding: var(--section-y) 0;
  background: var(--sand);
}
/* Foto links, tekst rechts: precies andersom als de welkomstsectie, zodat
   beeld en tekst elkaar afwisselen als je naar beneden scrolt. */
.tuinhuisje__grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}
/* Er is geen algemene alineamarge op de site, dus zonder dit plakken de
   alinea's in dit blok aan elkaar. */
.tuinhuisje__text p + p { margin-top: 14px; }
.circle-photo--tuinhuisje {
  width: 100%;
  aspect-ratio: 1 / 1;
  max-width: 460px;
  margin-right: auto;
}

@media (max-width: 860px) {
  .tuinhuisje__grid { grid-template-columns: 1fr; }
  /* Op een telefoon eerst de tekst, dan de foto. De breedte moet er expliciet
     bij: met alleen "margin: 0 auto" bepaalt de inhoud de breedte, en die
     inhoud is zelf 100% breed. Dan komt er nul uit. */
  .tuinhuisje__media { order: 2; width: 100%; max-width: 460px; margin: 0 auto; }
  .tuinhuisje__text { order: 1; }
}

/* ============================================================
   USPS
============================================================ */
.usps {
  padding: var(--section-y) 0;
  background: #F2EDED;
}
.usps__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
.usp-card {
  background: transparent;
  padding: 24px 16px;
  text-align: center;
}
.usp-card p { color: var(--dark-60); font-size: 15.5px; }

@media (max-width: 980px) {
  .usps__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .usps__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOTOSLIDER
============================================================ */
/* Een spoor dat opzij schuift in plaats van een raster met een vast aantal
   plekken. Zo mogen er zoveel foto's bij als Kris wil zonder dat de lay-out
   scheef gaat staan. */
.fotoslider {
  position: relative;
  margin-top: clamp(40px, 5vw, 64px);
}
.fotoslider__spoor {
  display: flex;
  gap: clamp(14px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  /* Ruimte voor de schaduw onder de foto's, anders wordt hij afgeknipt. */
  padding-bottom: 8px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.fotoslider__spoor::-webkit-scrollbar { display: none; }
.fotoslider__foto {
  flex: 0 0 clamp(230px, 30%, 380px);
  aspect-ratio: 4 / 3;
  margin: 0;
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  scroll-snap-align: start;
  cursor: pointer;
  transition: transform .4s ease, box-shadow .4s ease;
}
.fotoslider__foto img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fotoslider__foto:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}
@media (hover: hover) {
  .fotoslider__foto:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
  }
}
.fotoslider__knop {
  position: absolute;
  top: calc(50% - 4px);
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: #fff;
  color: var(--dark);
  box-shadow: var(--shadow-md);
  cursor: pointer;
  transition: background .2s ease, color .2s ease, opacity .2s ease;
  z-index: 2;
}
/* De knoppen staan in de HTML verborgen en komen pas tevoorschijn als het
   script ze aanzet. Zonder deze regel wint display:flex van het hidden. */
.fotoslider__knop[hidden] { display: none; }
.fotoslider__knop:hover { background: var(--green); color: #fff; }
.fotoslider__knop .ph { font-size: 20px; }
.fotoslider__knop--terug { left: -22px; }
.fotoslider__knop--verder { right: -22px; }
.fotoslider__hint {
  margin-top: 20px;
  text-align: center;
  color: var(--dark-60);
  font-size: 15px;
}

@media (max-width: 860px) {
  .fotoslider__foto { flex-basis: 78%; }
  /* Op een telefoon veeg je gewoon, dan zitten de knoppen in de weg. */
  .fotoslider__knop { display: none; }
}

/* ============================================================
   CREATIEF
============================================================ */
.creatief {
  padding: var(--section-y) 0;
  background: var(--sand);
}
/* Tekst links, beeld rechts: andersom als het tuinhuisje erboven. */
.creatief__grid {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(32px, 6vw, 100px);
  align-items: center;
}
.creatief__text p + p { margin-top: 14px; }
.creatief__media {
  position: relative;
  padding-bottom: 30px;
}

@media (max-width: 860px) {
  .creatief__grid { grid-template-columns: 1fr; }
  /* De breedte moet er expliciet bij, net als bij de welkomstsectie: anders
     bepaalt de inhoud hem, en die is zelf 100% breed. */
  .creatief__media { width: 100%; max-width: 460px; margin: 0 auto; }
  .circle-photo--creatief-sm { width: 130px; height: 130px; }
}

/* ============================================================
   ENVIRONMENT
============================================================ */
.environment {
  padding: var(--section-y) 0;
  background: var(--gray);
}
.environment__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.environment__map {
  border-radius: var(--radius-card);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  aspect-ratio: 4 / 5;
  background: var(--sand-200);
  position: sticky;
  top: 110px;
}
.environment__map iframe {
  width: 100%; height: 100%; border: 0;
}

@media (max-width: 860px) {
  .environment__grid { grid-template-columns: 1fr; }
  .environment__map { aspect-ratio: 4 / 3; position: static; }
}

/* ============================================================
   Accordion
============================================================ */
.accordion {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.accordion__item {
  background: #fff;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid var(--gray-300);
  transition: border-color .25s ease, box-shadow .25s ease;
}
.accordion__item.is-open {
  border-color: var(--green-300);
  box-shadow: var(--shadow-sm);
}
.accordion__title {
  width: 100%;
  background: #fff;
  color: var(--dark);
  border: 0;
  padding: 18px 22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 18px;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15.5px;
  text-align: left;
  cursor: pointer;
  transition: background .25s ease;
}
.accordion__title > span:first-child {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.accordion__title > span:first-child .ph {
  font-size: 20px;
  color: var(--green);
}
.accordion__title:hover { background: var(--sand); }
.accordion__icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--gray);
  color: var(--green);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
  transition: transform .25s ease, background .25s ease;
}
.accordion__icon .ph { font-size: 18px; }
.accordion__item.is-open .accordion__icon {
  transform: rotate(45deg);
  background: var(--green);
  color: #fff;
}
.accordion__panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .35s ease;
}
.accordion__item.is-open .accordion__panel {
  max-height: 600px;
}
.accordion__panel p {
  padding: 18px 22px 22px;
  color: var(--dark-60);
  font-size: 15.5px;
}
.accordion--lg .accordion__title { padding: 22px 26px; font-size: 16.5px; }
.accordion--lg .accordion__panel p { padding: 22px 26px 26px; }

/* ============================================================
   GASTENBOEK
============================================================ */
.guestbook {
  padding: var(--section-y) 0;
  background: var(--sand);
}
/* Zonder recensies zet het script het hele blok op verborgen. Deze regel zorgt
   dat dat ook echt gebeurt, wat er verder ook aan .guestbook hangt. */
.guestbook[hidden] { display: none; }
.guestbook__grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
  max-width: 820px;
  margin: 0 auto;
}
.quote-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-card);
  padding: clamp(30px, 5vw, 52px);
  box-shadow: var(--shadow-sm);
}
.quote-card__mark {
  font-size: 40px;
  color: var(--green);
  opacity: 0.35;
  margin-bottom: 14px;
}
.quote-card blockquote p {
  font-family: var(--serif);
  font-size: clamp(18px, 2.1vw, 22px);
  line-height: 1.6;
}
.quote-card blockquote p + p { margin-top: 18px; }
.quote-card__author {
  margin-top: 26px;
  padding-top: 20px;
  border-top: 1px solid var(--gray-300);
  font-weight: 500;
  font-size: 15.5px;
}
.quote-card__author span {
  display: block;
  font-weight: 400;
  color: var(--dark-60);
  font-size: 14px;
}

/* ============================================================
   PRICING
============================================================ */
.pricing { padding: var(--section-y) 0; background: var(--gray); }
.pricing__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 28px;
}
.price-card {
  background: #fff;
  border-radius: var(--radius-card);
  padding: 38px 34px;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
}
.price-card--accent {
  background: var(--green);
  color: #fff;
}
.price-card--accent h3,
.price-card--accent .price-card__price,
.price-card--accent li { color: #fff; }
.price-card h3 {
  font-family: var(--serif);
  font-size: 26px;
  margin-bottom: 6px;
}
.price-card__sub {
  font-size: 14px;
  color: var(--dark-60);
  margin-bottom: 22px;
}
.price-card--accent .price-card__sub { color: rgba(255,255,255,0.78); }
.price-card__price {
  font-family: var(--serif);
  font-size: 44px;
  font-weight: 500;
  line-height: 1;
  margin-bottom: 4px;
}
.price-card__price small {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  opacity: 0.7;
}
.price-card ul {
  list-style: none;
  margin-top: 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 15px;
}
.price-card li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--dark);
}
.price-card li .ph {
  margin-top: 3px;
  flex-shrink: 0;
  color: var(--green);
  font-size: 18px;
}
.price-card--accent li .ph { color: #fff; }
.pricing__notes {
  font-size: 14px;
  color: var(--dark-60);
  text-align: center;
  margin-top: 6px;
}
@media (max-width: 720px) {
  .pricing__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   BOOKING
============================================================ */

/* Booking layout: één kolom onder de beschikbaarheidscheck */
.booking__layout {
  max-width: 720px;
  margin: 0 auto;
}
.booking__col-title {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 500;
  margin-bottom: 18px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.booking__col-title .ph {
  font-size: 22px;
  color: var(--green);
}
.booking__note {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--dark-60);
  display: inline-flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.5;
}

.booking__selection {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  color: var(--dark-60);
  background: var(--sand);
  border-radius: 12px;
  padding: 12px 16px;
}
.booking__selection.is-set { color: var(--dark); }
.booking__selection .ph { color: var(--green); }

.booking__form-wrap {
  background: #fff;
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 36px);
  box-shadow: var(--shadow-sm);
  position: sticky;
  top: 110px;
}
.booking__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.form-field > span {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--dark);
}
.form-field input,
.form-field textarea {
  width: 100%;
  background: var(--sand);
  border: 1.5px solid transparent;
  border-radius: 12px;
  padding: 14px 16px;
  font-family: var(--sans);
  font-size: 16px;
  color: var(--dark);
  transition: border-color .2s ease, background .2s ease;
}
.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--green);
  background: #fff;
}
.form-field textarea {
  resize: vertical;
  min-height: 96px;
  font-family: var(--sans);
}
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  cursor: pointer;
  font-size: 14.5px;
}
.form-checkbox input[type="checkbox"] {
  width: 22px;
  height: 22px;
  accent-color: var(--green);
  cursor: pointer;
}
.booking__submit {
  margin-top: 8px;
  width: 100%;
  padding: 18px 28px;
  font-size: 16px;
}
.form-note {
  margin-top: 10px;
  font-size: 13px;
  color: var(--dark-60);
  display: flex;
  align-items: flex-start;
  gap: 8px;
  line-height: 1.55;
}
.form-note .ph {
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--green);
  font-size: 16px;
}


@media (max-width: 860px) {
  .booking__layout { grid-template-columns: 1fr; }
  .booking__selection {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 14px;
  color: var(--dark-60);
  background: var(--sand);
  border-radius: 12px;
  padding: 12px 16px;
}
.booking__selection.is-set { color: var(--dark); }
.booking__selection .ph { color: var(--green); }

.booking__form-wrap { position: static; }
  }
.booking__steps {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
  counter-reset: step;
}
.booking__steps li {
  position: relative;
  padding-left: 56px;
  counter-increment: step;
  font-size: 15.5px;
  color: var(--dark);
}
.booking__steps li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: -2px;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: var(--serif);
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ============================================================
   FAQ
============================================================ */
.faq { padding: var(--section-y) 0; background: var(--gray); }
.faq__grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(32px, 5vw, 80px);
  align-items: start;
}
.faq__head { position: sticky; top: 110px; }
.faq__head p { color: var(--dark-60); margin-top: 16px; }

@media (max-width: 860px) {
  .faq__grid { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}

/* ============================================================
   FOOTER
============================================================ */
.footer {
  background: var(--green);
  color: rgba(255,255,255,0.86);
  padding: clamp(64px, 8vw, 110px) 0 32px;
}
.footer a { color: #fff; opacity: 0.86; }
.footer a:hover { opacity: 1; color: #fff; }

.nav__logo--footer { color: #fff; margin-bottom: 18px; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 60px);
  padding-bottom: 60px;
}
.footer__brand p {
  font-size: 15px;
  line-height: 1.6;
  max-width: 36ch;
  color: rgba(255,255,255,0.78);
}
.footer__col h4 { color: #fff; margin-bottom: 16px; }
.footer__col p {
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.82);
}
.footer__col p .ph { margin-right: 6px; opacity: 0.7; }
.footer__col p a .ph { margin-right: 6px; }

.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(255,255,255,0.16);
  font-size: 13px;
  color: rgba(255,255,255,0.7);
}

@media (max-width: 860px) {
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 540px) {
  .footer__grid { grid-template-columns: 1fr; }
}

/* ============================================================
   LIGHTBOX
============================================================ */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s ease;
}
.lightbox[hidden] { display: none; }
.lightbox.is-open {
  opacity: 1;
  pointer-events: auto;
}

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 18, 12, 0.92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  cursor: pointer;
}

.lightbox__topbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  padding: 22px clamp(16px, 3vw, 36px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 2;
  pointer-events: none;
}
.lightbox__topbar > * { pointer-events: auto; }

.lightbox__counter {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,0.12);
  color: #fff;
  border-radius: var(--radius-pill);
  padding: 10px 20px;
  font-size: 14px;
  letter-spacing: 0.04em;
  backdrop-filter: blur(8px);
}
.lightbox__counter .ph { font-size: 18px; opacity: 0.8; }
.lightbox__counter strong { font-weight: 700; }

.lightbox__close {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--dark);
  border: 0;
  padding: 14px 22px 14px 18px;
  border-radius: var(--radius-pill);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  min-height: 52px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform .2s ease, background .2s ease;
}
.lightbox__close .ph { font-size: 22px; }
.lightbox__close:hover { transform: translateY(-2px); background: var(--sand); }

.lightbox__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  color: var(--dark);
  border: 0;
  font-size: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
  transition: transform .2s ease, background .2s ease;
}
.lightbox__nav:hover {
  background: #fff;
  transform: translateY(-50%) scale(1.06);
}
.lightbox__nav--prev { left: clamp(16px, 3vw, 36px); }
.lightbox__nav--next { right: clamp(16px, 3vw, 36px); }
.lightbox__nav .ph { font-size: 30px; }

.lightbox__figure {
  position: relative;
  z-index: 1;
  max-width: 92vw;
  max-height: calc(100vh - 200px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.lightbox__img-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 92vw;
  max-height: calc(100vh - 240px);
}
.lightbox__img {
  display: block;
  max-width: 92vw;
  max-height: calc(100vh - 240px);
  width: auto;
  height: auto;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  user-select: none;
  -webkit-user-drag: none;
}
.lightbox__caption {
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  text-align: center;
  max-width: 64ch;
  padding: 0 16px;
  font-style: italic;
  font-family: var(--serif);
}

.lightbox__bottombar {
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  display: none;
  gap: 12px;
  z-index: 2;
}
.btn--lb {
  background: #fff;
  color: var(--dark);
  min-height: 56px;
  padding: 14px 24px;
  font-size: 15px;
  border: 0;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
.btn--lb:hover { background: var(--sand); transform: translateY(-2px); }
.btn--lb .ph { font-size: 20px; }

/* Mobile: hide side nav, show bottom bar */
@media (max-width: 720px) {
  .lightbox__nav { display: none; }
  .lightbox__bottombar { display: inline-flex; }
  .lightbox__figure {
    max-height: calc(100vh - 240px);
    padding-top: 40px;
  }
  .lightbox__img,
  .lightbox__img-wrap {
    max-height: calc(100vh - 280px);
  }
  .lightbox__close span { display: none; }
  .lightbox__close { padding: 14px; min-width: 52px; justify-content: center; }
}

/* ============================================================
   Reveal-on-scroll
============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .8s ease, transform .8s ease;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  .lightbox { transition: none; }
}

/* ============================================================
   A11y, focus styles
============================================================ */
:focus { outline: none; }
/* Hier stond ook border-radius: 4px, om de rand om vierkante dingen wat
   vriendelijker te maken. Alleen geldt dat net zo zwaar als bijvoorbeeld
   .circle-photo en het staat verderop in dit bestand, dus het won: een rond
   fotootje werd vierkant zodra je er met tab op kwam. Een randje mag de vorm
   van iets niet veranderen, dus de rand volgt nu gewoon de vorm die het
   element zelf heeft. */
:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}
.btn:focus-visible,
.nav__menu a:focus-visible,
.nav__burger:focus-visible {
  outline-offset: 4px;
}
.hero__dots button:focus-visible {
  outline-offset: 4px;
}

/* ============================================================
   Booking form status
============================================================ */
.booking__status {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 14px;
  font-size: 15px;
  line-height: 1.5;
}
.booking__status[data-type="success"] {
  background: rgba(94, 118, 76, 0.12);
  color: var(--green-700);
  border: 1px solid rgba(94, 118, 76, 0.32);
}
.booking__status[data-type="error"] {
  background: rgba(180, 60, 60, 0.08);
  color: #8a2a2a;
  border: 1px solid rgba(180, 60, 60, 0.28);
}
.booking__submit[disabled] {
  opacity: 0.7;
  cursor: progress;
}

/* ============================================================
   Beschikbaarheidscheck
============================================================ */
/* De balk ligt half over de hero heen, als eerste wat je doet. */
.bookbar {
  position: relative;
  z-index: 40;
  margin-top: calc(var(--bookbar-lift) * -1);
  margin-bottom: clamp(28px, 4vw, 56px);
  /* De navigatiebalk zweeft erboven, dus laat wat lucht bij het springen. */
  scroll-margin-top: 110px;
}
/* Compacter en links uitgelijnd, op dezelfde lijn als de herotekst erboven,
   in plaats van breed en gecentreerd. */
.bookbar .avail {
  max-width: 660px;
  margin: 0;
}
.avail__book {
  align-self: center;
  white-space: nowrap;
  padding: 16px 26px;
}

.avail {
  position: relative;

  /* De kleur van je keuze volgt het oordeel: groen als het kan,
     oker als het op aanvraag is, rood als het niet lukt. */
  --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --pick: var(--green);
  --pick-soft: var(--green-300);
}
.avail[data-level="request"] {
  --pick: #b98a2f;
  --pick-soft: rgba(185, 138, 47, 0.18);
}
.avail[data-level="error"] {
  --pick: #b0453a;
  --pick-soft: rgba(176, 69, 58, 0.15);
}

.avail__bar {
  display: flex;
  align-items: stretch;
  gap: 4px;
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  padding: 8px;
}

.avail__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: background .2s ease;
}
.avail__field:hover,
.avail__field[aria-expanded="true"] { background: var(--sand); }

.avail__field-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--dark);
}
.avail__field-value { font-size: 15px; color: var(--dark); }
.avail__field-value.is-placeholder { color: var(--dark-60); }

.avail__divider {
  width: 1px;
  background: var(--gray-300);
  margin: 10px 0;
}

.avail__check {
  align-self: center;
  white-space: nowrap;
}

/* popups */
.avail__pop {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  right: 0;
  z-index: 30;
  background: #fff;
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
  padding: 18px;
}
.avail__pop--cal {
  right: auto;
  width: min(680px, 100%);
}
.avail__pop--who {
  left: auto;
  width: min(380px, 100%);
}

/* kalender: kop met aankomst, vertrek en het aantal nachten */
.avail__cal-top {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
}
.avail__cal-fields {
  position: relative;
  display: flex;
  gap: clamp(20px, 4vw, 40px);
  padding-bottom: 8px;
}
.avail__cal-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.avail__cal-field-label {
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--dark-60);
}
.avail__cal-field-value {
  font-family: var(--serif);
  font-size: 16px;
  line-height: 1.2;
  color: var(--dark);
  white-space: nowrap;
}
.avail__cal-field-value.is-placeholder {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--dark-60);
}
/* De streep schuift mee naar het veld dat je nu invult. */
.avail__cal-underline {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--pick);
  transition:
    transform .52s var(--spring),
    width .52s var(--spring),
    background-color .85s ease;
}
.avail__nights {
  align-self: flex-start;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--pick);
  background: var(--pick-soft);
  transition: background-color .85s ease, color .85s ease;
}
.avail__nights[hidden] { display: none; }

.avail__cal-body { position: relative; }
.avail__cal-nav {
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  pointer-events: none;
}
.avail__cal-arrow {
  pointer-events: auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  font-size: 15px;
  transition: background .2s ease;
}
.avail__cal-arrow:hover:not(:disabled) { background: var(--sand); }
.avail__cal-arrow:disabled { opacity: .35; cursor: default; }

.avail__months {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.avail__month-title {
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  margin-bottom: 8px;
  text-transform: capitalize;
}

/* De gekozen periode ligt als losse laag onder de dagen, zodat de
   balk en de bolletjes van keuze naar keuze kunnen doorbewegen. */
.avail__gridwrap { position: relative; }
.avail__fill {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.avail__pill,
.avail__knob {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  transition:
    transform .52s var(--spring),
    width .52s var(--spring),
    height .52s var(--spring),
    opacity .3s ease,
    background-color .85s ease;
}
.avail__pill {
  border-radius: var(--radius-pill);
  background: var(--pick-soft);
}
.avail__knob {
  border-radius: 50%;
  background: var(--pick);
}
.avail__pill.is-on,
.avail__knob.is-on { opacity: 1; }

/* Ook tijdens het aanwijzen kleurt de selectie al mee met het oordeel:
   groen als het kan, oker op aanvraag, rood als het niet past. */
.avail__fill.is-instant .avail__pill,
.avail__fill.is-instant .avail__knob { transition: none; }

.avail__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.avail__dow {
  text-align: center;
  font-size: 11.5px;
  color: var(--dark-60);
  padding-bottom: 6px;
}

.avail__day {
  position: relative;
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  border-radius: 50%;
  font-family: var(--sans);
  font-size: 13.5px;
  color: var(--dark);
  cursor: pointer;
  transition: color .55s ease, background-color .18s ease;
}

.avail__day:hover:not(:disabled) { background: var(--green-300); }
.avail__day:disabled { cursor: default; color: var(--gray-300); }
.avail__day.is-booked { text-decoration: line-through; color: var(--gray-300); }
/* Op je vertrekdag komt de volgende gast pas 's middags aan, dus die
   dag hoort niet doorgestreept te staan. */
.avail__day.is-end { text-decoration: none; }
.avail__day.is-start,
.avail__day.is-end {
  background: var(--green);
  color: #fff;
  font-weight: 600;
}
.avail__day.is-range { background: var(--green-300); border-radius: 0; }

/* Kan de laag zijn plek meten, dan neemt die het tekenen over en
   houden de dagen zelf een doorzichtige achtergrond. */
.avail__gridwrap.is-live .avail__day.is-start,
.avail__gridwrap.is-live .avail__day.is-end,
.avail__gridwrap.is-live .avail__day.is-range { background: transparent; }
.avail__gridwrap.is-live .avail__day:hover:not(:disabled) { background: rgba(94, 118, 76, 0.10); }
.avail__gridwrap.is-live .avail__day.is-start,
.avail__gridwrap.is-live .avail__day.is-end { color: #fff; }
.avail__fill.is-preview ~ .avail__grid .avail__day.is-end { color: var(--dark); }

.avail__cal-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  min-height: 20px;
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--dark-60);
}
.avail__cal-hint i {
  margin-top: 2px;
  color: var(--pick);
  transition: color .85s ease;
}

/* snelkeuzes */
.avail__presets {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-top: 10px;
}
.avail__preset {
  border: 1px solid var(--gray-300);
  background: #fff;
  border-radius: var(--radius-pill);
  padding: 7px 14px;
  font-family: var(--sans);
  font-size: 13px;
  color: var(--dark);
  cursor: pointer;
  transition:
    background-color .7s ease,
    border-color .5s ease,
    color .7s ease,
    transform .4s var(--spring);
}
.avail__preset:hover:not(:disabled) { border-color: var(--dark); }
.avail__preset.is-active {
  background: transparent;
  border-color: transparent;
  color: var(--pick);
  font-weight: 600;
}
.avail__preset:disabled { opacity: .4; cursor: default; }

/* Staat een snelkeuze aan, dan schuiven er pijltjes in de pil waarmee je
   langs alle vrije weekenden of weken loopt. */
.avail__preset-groep {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  transition: background-color .7s ease;
}
.avail__preset-groep.is-active { background: var(--pick-soft); }
.avail__preset-stap {
  display: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 30px;
  border: 0;
  background: transparent;
  color: var(--pick);
  font-size: 13px;
  cursor: pointer;
  transition: color .7s ease, opacity .2s ease;
}
.avail__preset-groep.is-active .avail__preset-stap { display: inline-flex; }
.avail__preset-groep.is-active .avail__preset { padding-left: 4px; padding-right: 4px; }
.avail__preset-stap:hover:not(:disabled) { opacity: .65; }
.avail__preset-stap:disabled { opacity: .28; cursor: default; }
.avail__preset-groep.is-active .avail__preset-stap:first-child { margin-left: 6px; }
.avail__preset-groep.is-active .avail__preset-stap:last-child { margin-right: 6px; }

.avail__cal-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--gray);
}
.avail__legend {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--dark-60);
}
/* De legenda wijst naar wat je in de kalender ziet: doorgestreepte
   dagen, in de kleur die bij hun reden hoort. */
.avail__legend-woord {
  text-decoration: line-through;
  font-weight: 600;
}
.avail__legend-woord--pending { color: #a97f26; }
.avail__legend-woord--booked { color: var(--dark-60); }

/* Dagen waar iemand anders al een aanvraag voor heeft liggen. Nog geen
   boeking, maar wel gereserveerd tot Kris erover beslist. */
.avail__day.is-pending {
  color: #a97f26;
  text-decoration: line-through;
  text-decoration-color: rgba(169, 127, 38, 0.45);
}
.avail__gridwrap .avail__day.is-pending:disabled { color: #c2a163; }

/* Uitleg over de tijdvakken, weggevouwen tot iemand erom vraagt. */
.avail__info {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 12.5px;
  color: var(--green);
  cursor: pointer;
  padding: 0;
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
}
.avail__info:hover { border-bottom-color: var(--green); }
.avail__info[aria-expanded="true"] { font-weight: 600; }

.avail__uitleg {
  margin-top: 12px;
  padding: 16px 18px;
  border-radius: 16px;
  background: var(--sand);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--dark-60);
}
.avail__uitleg[hidden] { display: none; }
.avail__uitleg strong { color: var(--dark); font-weight: 600; }
.avail__uitleg-lead { margin-bottom: 10px; }
.avail__uitleg-lijst {
  list-style: none;
  display: grid;
  gap: 8px;
  margin-bottom: 10px;
}
.avail__uitleg-lijst li {
  padding-left: 16px;
  position: relative;
}
.avail__uitleg-lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green-300);
}
.avail__uitleg-slot { color: var(--dark-60); }

.avail__clear {
  margin-left: auto;
  border: 0;
  background: transparent;
  font-family: var(--sans);
  font-size: 14px;
  text-decoration: underline;
  color: var(--dark);
  cursor: pointer;
}

/* gasten */
.avail__who-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid var(--gray);
}
.avail__who-row:last-of-type { border-bottom: 0; }
.avail__who-row strong { display: block; font-size: 15px; }
.avail__who-row span { font-size: 13px; color: var(--dark-60); }

.avail__counter {
  display: flex;
  align-items: center;
  gap: 14px;
}
.avail__count-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid var(--gray-300);
  background: #fff;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: border-color .2s ease;
}
.avail__count-btn:hover { border-color: var(--dark); }
.avail__count { min-width: 20px; text-align: center; font-weight: 600; }

.avail__who-note {
  margin-top: 12px;
  font-size: 13px;
  color: var(--dark-60);
  display: flex;
  gap: 6px;
  align-items: baseline;
}

/* resultaat */
.avail__result {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 16px;
  padding: 18px 22px;
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-sm);
  font-size: 15px;
}
.avail__result > i { font-size: 22px; margin-top: 2px; }
.avail__result strong { display: block; margin-bottom: 4px; }
.avail__result p { margin-bottom: 6px; color: var(--dark-60); }
.avail__result--ok > i { color: var(--green); }
.avail__result--request > i { color: #b98a2f; }
.avail__result--error > i { color: #b0453a; }

@media (max-width: 720px) {
  :root {
    --bookbar-lift: 34px;
    /* De boekingsbalk staat op een telefoon rechtop en is dus hoog. Met de
       volle pilvorm werden de hoeken daar veel te rond. Knoppen blijven wel
       gewoon rond: 31 pixels is nog altijd meer dan de helft van hun hoogte. */
    --radius-pill: 31px;
  }
  .avail__bar { flex-wrap: wrap; }
  /* Wanneer en Wie onder elkaar over de volle breedte. Naast elkaar was er zo
     weinig ruimte dat "Datums toevoegen" over twee regels brak. */
  .avail__field { flex: 1 1 100%; }
  .avail__book { flex: 1 1 100%; justify-content: center; }
  /* Het streepje ertussen gaat mee van staand naar liggend. */
  .avail__divider { flex: 1 1 100%; width: auto; height: 1px; margin: 2px 16px; }
  .avail__months { grid-template-columns: 1fr; }
  .avail__pop { padding: 18px; }
  .avail__pop--who { width: 100%; }
  .avail__cal-top { flex-wrap: wrap; gap: 10px; }
  .avail__cal-field-value { font-size: 17px; }
  .avail__presets { gap: 6px; }
  .avail__preset { padding: 7px 13px; font-size: 13px; }
}
.avail__result[hidden] { display: none; }

.avail__loading {
  grid-column: 1 / -1;
  text-align: center;
  color: var(--dark-60);
  font-size: 14.5px;
  padding: 28px 12px;
  line-height: 1.6;
}

/* ============================================================
   Boekingspagina
============================================================ */
.page--plain { background: var(--sand); }
.nav--plain {
  position: fixed;
  max-width: 880px;
}
.nav--plain .nav__inner { justify-content: space-between; }
/* Hier schuift niets samen bij het scrollen, dus de naam mag blijven staan. */
.nav--plain.is-scrolled .nav__logo { gap: 14px; }
.nav--plain.is-scrolled .nav__logo-text-wrap { max-width: 280px; opacity: 1; }

.bookpage {
  padding: clamp(130px, 16vh, 190px) 0 clamp(60px, 8vw, 110px);
}
.bookpage__inner {
  max-width: 680px;
}
.bookpage__title { margin-bottom: 18px; }
.bookpage__lede {
  color: var(--dark-60);
  margin-bottom: clamp(28px, 4vw, 40px);
}
.bookpage__problem { margin-bottom: 28px; }
/* De bevestiging staat op de plek van het formulier, dus die mag wat meer
   ruimte innemen dan een melding onderaan een formulier. */
.bookpage__klaar {
  margin-top: 0;
  padding: 26px 28px;
  font-size: 16px;
  line-height: 1.6;
}
.bookpage__klaar strong { display: block; font-size: 19px; margin-bottom: 8px; }
.bookpage__form {
  background: #fff;
  border-radius: var(--radius-card);
  padding: clamp(24px, 3vw, 34px);
  box-shadow: var(--shadow-sm);
}
.bookpage__form[hidden] { display: none; }

/* De gekozen periode, bovenaan vastgezet zodat je ziet waar je ja op zegt. */
.booksum {
  background: #fff;
  border-radius: var(--radius-card);
  padding: clamp(20px, 3vw, 28px);
  box-shadow: var(--shadow-sm);
  margin-bottom: 20px;
}
.booksum[hidden] { display: none; }
.booksum__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 22px;
}
.booksum__label {
  display: block;
  font-size: 12.5px;
  letter-spacing: 0.01em;
  color: var(--dark-60);
  margin-bottom: 2px;
}
.booksum__row strong {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 500;
}
.booksum__arrow { color: var(--green); font-size: 18px; }
.booksum__nights {
  margin-left: auto;
  padding: 6px 14px;
  border-radius: var(--radius-pill);
  background: var(--green-300);
  color: var(--green);
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}
.booksum__who {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--gray-300);
  font-size: 14.5px;
  color: var(--dark-60);
}
.booksum__who .ph { color: var(--green); font-size: 17px; }
.booksum__change {
  display: inline-block;
  margin-top: 10px;
  font-size: 13.5px;
  text-decoration: underline;
}

@media (max-width: 720px) {
  .booksum__nights { margin-left: 0; }
  .nav--plain .nav__cta span { display: none; }
}