/* ============================================================
   custom.css — additions for the static version of the site,
   plus the place to put your own style overrides.
   Loaded after global.css and pages.css, so rules here win.
   ============================================================ */

/* --- scroll-reveal animation (replaces the old React animation) --- */
.js [data-reveal] {
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
.js [data-reveal].is-visible {
  opacity: 1;
}

/* --- fullscreen menu overlay open/close --- */
.Navigation-module__yDraKW__overlay {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
    visibility 0s linear 0.4s;
}
.Navigation-module__yDraKW__overlay.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.Navigation-module__yDraKW__column {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}
.is-open .Navigation-module__yDraKW__column {
  opacity: 1;
  transform: none;
}
.is-open .Navigation-module__yDraKW__column:nth-child(1) { transition-delay: 0.1s; }
.is-open .Navigation-module__yDraKW__column:nth-child(2) { transition-delay: 0.17s; }
.is-open .Navigation-module__yDraKW__column:nth-child(3) { transition-delay: 0.24s; }

/* ============================================================
   Your own changes go below this line.
   ============================================================ */

/* ============================================================
   SITE-WIDE LIGHT THEME
   The whole palette flips to light-beige backgrounds with dark
   brown text. Photo contexts (heroes, scenes, cards, menu,
   footer) re-pin the original light-on-dark colors below.
   ============================================================ */
:root {
  --bg: #f0e8da;
  --bg-warm: #e9dfcc;
  --bg-card: #f6f0e4;
  --cream: #5c4033;
  --sand: #7a5c4a;
  --cream-dim: #8a7a63;
  --cream-dark: #4a3a28;
  --line: rgba(92, 64, 51, 0.16);
  --line-strong: rgba(92, 64, 51, 0.38);
}
/* photo & dark contexts keep light text */
.Navigation-module__yDraKW__nav,
.Navigation-module__yDraKW__overlay,
.Hero-module___w2HtG__hero,
.Scene-module__0g_vqW__scene,
.loc-card,
.PairGallery-module__C724fq__pair {
  --cream: #f0e8da;
  --sand: #e4d5b5;
  --cream-dim: #9a8d7a;
  --cream-dark: #ddd3c0;
  --line: rgba(240, 232, 218, 0.1);
  --line-strong: rgba(240, 232, 218, 0.22);
}
/* the fullscreen menu keeps its dark panel */
.Navigation-module__yDraKW__overlay {
  background: #231a14;
}
/* footer inverted too: dark brown on warm beige */
.Footer-module__3hUVsW__footer {
  background: var(--bg-warm);
}
.Footer-module__3hUVsW__bottom {
  border-top-color: var(--line);
}
/* the couch mark keeps its cream glyph on the terracotta tile */
.Footer-module__3hUVsW__footer svg {
  --cream: #f0e8da;
}

/* ============================================================
   Structure cleanup on the sub-pages: tighter, more even
   vertical rhythm instead of the huge empty gaps.
   ============================================================ */
.Chapter-module__Gv6q5a__chapter {
  min-height: 0;
  padding: 16vh 24px;
}
.ContactCTA-module__rLNwaW__cta {
  padding: 14vh 24px;
}

/* --- nav: logo + brand name centered, like the reference --- */
.Navigation-module__yDraKW__brand {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
/* the inline links that used to fade in on scroll would overlap the
   centered brand — navigation happens via the burger menu instead */
.Navigation-module__yDraKW__links {
  display: none;
}

/* --- homepage hero: only the three options, big --- */
.hero-mono .Hero-module___w2HtG__services {
  margin-top: 0;
  flex-wrap: wrap;
  justify-content: center;
}
.hero-mono .Hero-module___w2HtG__serviceLink {
  font-size: clamp(34px, 5.2vw, 100px);
  font-style: normal;
  letter-spacing: -0.01em;
  line-height: 1.1;
}
.hero-mono .Hero-module___w2HtG__sep {
  font-size: clamp(26px, 4vw, 78px);
  margin: 0 clamp(12px, 1.8vw, 32px);
  opacity: 0.55;
}

/* --- hero word hover: active word turns italic (cross-fade), and each
   word brings its own background photo. "Stay" is the default. --- */
.hero-mono .hero-bg {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mono .hero-bg.is-active {
  opacity: 1;
}
/* per-photo tuning so the cream text stays readable */
.hero-mono .hero-bg[data-bg="studio"] {
  filter: brightness(0.55) saturate(0.95);
}
.hero-mono .hero-bg[data-bg="story"] {
  filter: brightness(0.78);
}
.hero-mono .Hero-module___w2HtG__serviceLink {
  position: relative;
  display: inline-block;
}
.hero-mono .Hero-module___w2HtG__serviceLink .w-roman,
.hero-mono .Hero-module___w2HtG__serviceLink .w-italic {
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}
.hero-mono .Hero-module___w2HtG__serviceLink .w-italic {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translateX(-50%);
  font-style: italic;
  white-space: nowrap;
  opacity: 0;
}
.hero-mono .Hero-module___w2HtG__serviceLink.is-word-active .w-roman {
  opacity: 0;
}
.hero-mono .Hero-module___w2HtG__serviceLink.is-word-active .w-italic {
  opacity: 1;
}

/* --- overview sections: landscape photos everywhere; on sub-pages
   the photo is capped smaller than the full column --- */
.HomeStudio-module__IMJrKG__photo {
  aspect-ratio: 3/2;
}
.HomeStudio-module__IMJrKG__section:not([id]) .HomeStudio-module__IMJrKG__imageSide {
  max-width: 540px;
}
@media (min-width: 769px) {
  .hs-flip .HomeStudio-module__IMJrKG__imageSide {
    order: -1;
  }
}

/* --- inverted color scheme for the homepage overview sections:
   light beige background, dark brown text. The component colors all
   flow through these variables, so overriding them flips everything
   (titles, text, tabs, buttons) at once. Studio gets a slightly
   darker beige so the sections read as separate screens. --- */
html.snap-home .HomeStudio-module__IMJrKG__section {
  background: #f0e8da;
}
html.snap-home #studio {
  background: #e5d9c2;
}

/* --- small stay/studio/story switcher above each section text
   (Maja-style); links are in-page anchors, snap does the rest --- */
.section-tabs {
  display: flex;
  gap: 22px;
  margin-bottom: 34px;
}
.section-tabs a {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--sand);
  transition: color 0.22s var(--ease);
}
.section-tabs a:hover {
  color: var(--cream);
}
.section-tabs a.is-active {
  color: var(--cream);
  text-decoration: underline;
  text-underline-offset: 6px;
  text-decoration-thickness: 1px;
}

/* --- fullscreen sections + scroll snap on the homepage (desktop),
   same mechanism as the Maja reference: releasing mid-scroll settles
   on the nearest section --- */
@media (min-width: 769px) {
  html.snap-home {
    scroll-snap-type: y mandatory;
  }
  html.snap-home main > section {
    scroll-snap-align: start;
  }
  html.snap-home footer {
    scroll-snap-align: end;
  }
  html.snap-home .HomeStudio-module__IMJrKG__section {
    min-height: 100svh;
    display: flex;
    align-items: center;
  }
  html.snap-home .HomeStudio-module__IMJrKG__inner {
    border-top: none;
    width: 100%;
    padding: 0;
  }
  /* on snap pages content sections become full screens too */
  html.snap-home .Editorial-module__aeivOW__editorial {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  html.snap-home .Editorial-module__aeivOW__wrap {
    width: 100%;
  }
  html.snap-home .ContactCTA-module__rLNwaW__cta {
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
  /* de samenwerkingenbalk wordt op snap-paginas ook een heel scherm */
  html.snap-home .sw-sectie {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}
/* contrast tint ONLY where two light sections touch: a light section
   directly after another light section gets the darker beige; a third
   in a row alternates back to light */
html.snap-home
  :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section)
  + :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section) {
  background-color: #e5d9c2;
}
html.snap-home
  :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section)
  + :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section)
  + :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section) {
  background-color: #f0e8da;
}

/* top bar stays at the top of the page instead of following the scroll */
.Navigation-module__yDraKW__nav {
  position: absolute;
}

/* dimmed hero photo variant for text contrast (used on stay.html) */
.hero-dim {
  filter: brightness(0.55);
}
/* lighter dim for photo scenes that are already dark-ish */
.scene-dim {
  filter: brightness(0.78);
}
/* zachte dim voor het drieluik op collaborations: die foto's zijn zelf al
   warm en donker, met de volle hero-dim vallen ze dicht */
.hero-dim-zacht {
  filter: brightness(0.74);
}
/* black & white hero with strong contrast for the cream text
   (used on studio.html) */
.hero-bw {
  filter: grayscale(1) brightness(0.62) contrast(1.1);
}

/* ============================================================
   BRAND KIT PASS (Brandkit - The Creative Boat.pdf)
   - text in brand Dark Brown #5C4033 ("Diepte, tekst")
   - pillar accents: terracotta / sage / gold mustard
   - ghost numerals, tagline bar, subtle pinstripe texture
   ============================================================ */
:root {
  --cream: #5c4033;
  --sand: #7a5c4a;
  --line: rgba(92, 64, 51, 0.16);
  --line-strong: rgba(92, 64, 51, 0.38);
  --accent: var(--terracotta);
}
#stay { --accent: #c6704b; }     /* Burnt Terracotta — energie, warmte */
#studio { --accent: #5b7553; }   /* Sage Green — natuur, kalmte */
#story { --accent: #c49b3c; }    /* Gold Mustard */

.HomeStudio-module__IMJrKG__roman,
.loc-roman {
  color: var(--accent);
}
/* de knoppen kleuren overal terracotta, niet mee met de sectiekleur:
   een merk hoort één actiekleur te hebben */
.HomeStudio-module__IMJrKG__cta:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
}
.section-tabs a.is-active {
  text-decoration-color: var(--accent);
}

/* ghost background icons: the three brand-pillar icons from the
   brand kit (Texture / Atmosphere / Sound) */
html.snap-home .HomeStudio-module__IMJrKG__section {
  overflow: hidden;
  position: relative;
}

/* ============================================================
   BOEKINGS-HOMEPAGE: stay eerst, dan studio, dan story
   ============================================================ */
.bk-hero {
  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
}
.bk-hero-bg {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
}
.bk-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(26, 20, 16, 0.5) 0%, rgba(26, 20, 16, 0.1) 40%, rgba(26, 20, 16, 0.6) 100%);
}
.bk-hero-content {
  position: absolute;
  inset: 0 24px 26vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  color: #f0e8da;
  z-index: 2;
}
.bk-eyebrow {
  letter-spacing: 0.34em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: #e4d5b5;
  margin: 0 0 26px;
}
.bk-title {
  font-family: var(--serif);
  font-size: clamp(44px, 6.4vw, 96px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.02;
  margin: 0 0 22px;
  color: #f0e8da;
}
.bk-title em {
  color: #e4d5b5;
}
.bk-sub {
  font-size: 18px;
  color: #e4d5b5;
  max-width: 520px;
  margin: 0;
  line-height: 1.6;
}
/* — de zoekbalk: het boekingsplatform-hart van de pagina — */
.bk-bar {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  bottom: clamp(28px, 7vh, 72px);
  z-index: 3;
  display: flex;
  align-items: stretch;
  gap: 0;
  background: #f6f0e4;
  border-radius: 18px;
  padding: 10px;
  box-shadow: 0 24px 60px -12px rgba(26, 20, 16, 0.45);
  width: min(980px, calc(100% - 48px));
}
.bk-field {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px 18px;
  border-right: 1px solid rgba(92, 64, 51, 0.14);
  min-width: 0;
}
.bk-field label {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: #8a7a63;
}
.bk-field select,
.bk-field input {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  color: #5c4033;
  padding: 2px 0;
  outline: none;
  width: 100%;
}
.bk-submit {
  flex: 0 0 auto;
  border: none;
  border-radius: 12px;
  background: var(--terracotta);
  color: #faf7f2;
  font-family: var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 0 30px;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.bk-submit:hover {
  background: var(--orange);
  transform: translateY(-1px);
}
/* — trust-strip — */
.bk-trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 14px 18px;
  background: var(--bg-warm);
  border-bottom: 1px solid var(--line);
  padding: 22px 24px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--sand);
}
.bk-trust i {
  font-style: normal;
  color: var(--terracotta);
}
/* — interieur-galerij — */
.bk-interior {
  background: var(--bg);
  padding: 110px 44px 120px;
}
.bk-interior-head {
  max-width: 1200px;
  margin: 0 auto 56px;
}
.bk-trio {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  align-items: start;
}
.bk-trio-item {
  margin: 0;
}
.bk-trio-item div {
  aspect-ratio: 4/5;
  border-radius: 10px;
  background-position: 50%;
  background-size: cover;
}
.bk-trio-item:nth-child(2) {
  transform: translateY(44px);
}
/* — studio secundair — */
.bk-studio {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  background: #e5d9c2;
  padding: 110px 44px;
}
.bk-studio-text {
  max-width: 520px;
  justify-self: end;
}
.bk-studio-photo {
  aspect-ratio: 3/2;
  max-width: 620px;
  width: 100%;
  border-radius: 10px;
  background-position: 50%;
  background-size: cover;
  animation: bob 7s ease-in-out infinite alternate;
}
/* — story tertiair — */
.bk-story {
  background: var(--bg);
  text-align: center;
  padding: 110px 24px;
}
.bk-story-quote {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 300;
  color: var(--cream);
  max-width: 640px;
  margin: 0 auto 26px;
  line-height: 1.35;
}
.bk-story-quote em {
  color: var(--terracotta);
  font-style: italic;
}
.bk-story-link {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--sand);
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: 4px;
  transition: color 0.22s var(--ease), border-color 0.22s var(--ease);
}
.bk-story-link:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
/* — boek-knop in de afsluiter — */
.bk-btn {
  display: inline-block;
  margin-top: 30px;
  background: var(--terracotta);
  color: #faf7f2;
  border-radius: 999px;
  padding: 17px 44px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.bk-btn:hover {
  background: var(--orange);
  transform: translateY(-2px);
}
/* — sticky boek-balk op mobiel — */
.bk-sticky {
  display: none;
}
@media (max-width: 900px) {
  /* op mobiel klapt de balk in tot alleen de boek-knop */
  .bk-bar {
    width: auto;
    padding: 8px;
    bottom: 26px;
  }
  .bk-field {
    display: none;
  }
  .bk-submit {
    padding: 15px 28px;
  }
  .bk-trio {
    grid-template-columns: 1fr;
  }
  .bk-trio-item:nth-child(2) {
    transform: none;
  }
  .bk-studio {
    grid-template-columns: 1fr;
    gap: 40px;
    padding: 80px 24px;
  }
  .bk-studio-text {
    justify-self: start;
  }
  .bk-interior {
    padding: 80px 24px;
  }
  .bk-sticky.is-on {
    display: block;
  }
  .bk-sticky {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    z-index: 800;
    text-align: center;
    background: var(--terracotta);
    color: #faf7f2;
    border-radius: 999px;
    padding: 16px 20px;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 600;
    box-shadow: 0 12px 30px -8px rgba(26, 20, 16, 0.4);
  }
}

/* ============================================================
   WOONBOOT-REDESIGN: water, drijven en vakmanschap
   ============================================================ */

/* — golvende waterlijn als bovenrand van elke foto-scene — */
.Scene-module__0g_vqW__scene {
  margin-top: -46px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C150,44 290,8 450,22 C610,36 740,6 900,20 C1050,33 1140,16 1200,20 L1200,46 L0,46 Z' fill='black'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 46' preserveAspectRatio='none'%3E%3Cpath d='M0,26 C150,44 290,8 450,22 C610,36 740,6 900,20 C1050,33 1140,16 1200,20 L1200,46 L0,46 Z' fill='black'/%3E%3C/svg%3E"),
    linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: top center, 0 46px;
  mask-position: top center, 0 46px;
  -webkit-mask-size: 100% 46px, 100% calc(100% - 45px);
  mask-size: 100% 46px, 100% calc(100% - 45px);
}
/* de doorschijnende golf toont de kleur van de sectie erboven */
html.snap-home
  :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section)
  + :is(.HomeStudio-module__IMJrKG__section, .Editorial-module__aeivOW__editorial, .ContactCTA-module__rLNwaW__cta, .sw-sectie, .loc-section)
  + .Scene-module__0g_vqW__scene {
  background-color: #e5d9c2;
}

/* — foto's dobberen zachtjes, als een boot op het water — */
@keyframes bob {
  from { transform: translateY(-4px) rotate(-0.25deg); }
  to { transform: translateY(5px) rotate(0.3deg); }
}
.HomeStudio-module__IMJrKG__photo {
  animation: bob 7s ease-in-out infinite alternate;
}



/* — onderstreping tekent zichzelf bij hover — */
.section-tabs a,
.Footer-module__3hUVsW__col ul a {
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: 0% 1px;
  background-position: left calc(100% - 2px);
  transition: background-size 0.35s var(--ease), color 0.22s var(--ease);
}
.section-tabs a:hover,
.Footer-module__3hUVsW__col ul a:hover {
  background-size: 100% 1px;
}

/* — langzame woorden-marquee boven de footer — */
.footer-marquee {
  overflow: hidden;
  border-top: 1px solid var(--line);
  padding: 26px 0;
}
.footer-marquee-track {
  display: flex;
  align-items: center;
  gap: 34px;
  width: max-content;
  animation: marquee 36s linear infinite;
}
.footer-marquee-track span {
  font-family: var(--serif);
  font-style: italic;
  font-size: 24px;
  color: var(--sand);
  white-space: nowrap;
}
.footer-marquee-track i {
  font-style: normal;
  color: var(--terracotta);
  font-size: 18px;
}
@keyframes marquee {
  to { transform: translateX(-50%); }
}

/* — vintage filmkorrel over de hele site (brand kit) — */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.045;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 256px 256px;
}

/* — zachte overgang tussen paginas — */
@keyframes page-enter {
  from { opacity: 0; }
}
body {
  animation: page-enter 0.45s var(--ease);
  transition: opacity 0.24s ease;
}
body.page-exit {
  opacity: 0;
}

/* — rustig aan voor wie dat ingesteld heeft — */
@media (prefers-reduced-motion: reduce) {
  .HomeStudio-module__IMJrKG__photo,
  .loc-card,
  .footer-marquee-track,
  body {
    animation: none;
  }
  .Hero-module___w2HtG__kb {
    animation: none;
  }
}

/* compact CTA title that fits on one line (story page) */
.cta-one-line .ContactCTA-module__rLNwaW__heading {
  font-size: clamp(26px, 2.8vw, 44px);
}

/* two-column list of possibilities on the studio page */
.mogelijkheden-lijst {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 56px;
  list-style: none;
  margin: 36px 0 0;
  padding: 0;
}
.mogelijkheden-lijst li {
  color: var(--sand);
  font-size: 16px;
  line-height: 1.5;
  padding-left: 22px;
  position: relative;
}
.mogelijkheden-lijst li::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--terracotta);
  position: absolute;
  left: 0;
  top: 0.55em;
}
@media (max-width: 560px) {
  .mogelijkheden-lijst {
    grid-template-columns: 1fr;
  }
}

/* tagline bar from the visual identity page */
.brand-tagline {
  background: var(--terracotta);
  color: #faf7f2;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.26em;
  font-size: 11px;
  font-weight: 500;
  padding: 26px 24px;
}

/* subtle horizontal pinstripe texture from the brand kit cover */
.HomeStudio-module__IMJrKG__section,
.Editorial-module__aeivOW__editorial,
.Chapter-module__Gv6q5a__chapter,
.ContactCTA-module__rLNwaW__cta,
.loc-section,
.page-module__EkW4Oq__bookingSection {
  background-image: repeating-linear-gradient(
    0deg,
    rgba(92, 64, 51, 0.03) 0 1px,
    transparent 1px 72px
  );
}

/* center the heading block in centered photo scenes (the original
   left it hugging the left edge) */
.Scene-module__0g_vqW__center .Scene-module__0g_vqW__heading {
  margin: 0 auto;
}

/* --- nav wordmark logo --- */
.Navigation-module__yDraKW__brand img.brand-wordmark {
  height: 30px;
  width: auto;
  display: block;
}

/* --- location chooser (stay.html): big photo cards, one per
   houseboat; the grid wraps automatically when locations are added --- */
.loc-section {
  background: #f0e8da;
  padding: 110px 44px 120px;
}
.loc-card {
  /* inside the photo cards the text sits on a dark gradient,
     so those keep the original light colors */
  --cream: #f0e8da;
  --sand: #e4d5b5;
  --line-strong: rgba(240, 232, 218, 0.4);
}
.loc-head {
  max-width: 1200px;
  margin: 0 auto 56px;
}
.loc-eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--sand);
  font-size: 11px;
  font-weight: 500;
  margin-bottom: 28px;
}
.loc-roman {
  font-family: var(--serif);
  font-style: italic;
  color: var(--terracotta);
  font-size: 14px;
  letter-spacing: 0;
}
.loc-rule {
  width: 48px;
  height: 1px;
  background: var(--line-strong);
}
.loc-title {
  font-family: var(--serif);
  color: var(--cream);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
  margin: 0 0 18px;
}
.loc-sub {
  color: var(--sand);
  font-size: 17px;
  line-height: 1.7;
  max-width: 520px;
  margin: 0;
}
.loc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
}
.loc-card {
  position: relative;
  display: block;
  height: min(68vh, 640px);
  border-radius: 10px;
  overflow: hidden;
  text-decoration: none;
}
.loc-photo {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
}
.loc-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(26, 20, 16, 0) 35%, rgba(26, 20, 16, 0.88) 100%);
}
.loc-info {
  position: absolute;
  left: 36px;
  right: 36px;
  bottom: 32px;
  color: var(--cream);
}
.loc-kicker {
  display: block;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 500;
  color: var(--sand);
  margin-bottom: 8px;
}
.loc-name {
  font-family: var(--serif);
  font-size: clamp(34px, 3.4vw, 52px);
  font-weight: 300;
  letter-spacing: -0.01em;
  margin: 0 0 10px;
}
.loc-meta {
  display: flex;
  gap: 10px;
  color: var(--sand);
  font-size: 14px;
}
.loc-cta {
  display: inline-block;
  margin-top: 20px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 11px 28px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--cream);
  transition: background 0.26s var(--ease), color 0.26s var(--ease),
    border-color 0.26s var(--ease);
}
.loc-card:hover .loc-cta {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: var(--off-white);
}
.loc-badge {
  position: absolute;
  z-index: 2;
  top: 22px;
  right: 22px;
  background: var(--terracotta);
  color: var(--off-white);
  border-radius: 999px;
  padding: 7px 16px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
}
@media (max-width: 768px) {
  .loc-section {
    padding: 80px 24px 90px;
  }
  .loc-card {
    height: 440px;
  }
  .loc-info {
    left: 24px;
    right: 24px;
    bottom: 24px;
  }
}
@media (max-width: 900px) {
  .Navigation-module__yDraKW__brand img.brand-wordmark {
    height: 20px;
  }
}
/* on phones: shorter button label so the centered wordmark fits */
@media (max-width: 640px) {
  .Navigation-module__yDraKW__brand img.brand-wordmark {
    height: 14px;
  }
  .Navigation-module__yDraKW__cta {
    font-size: 0;
    letter-spacing: 0;
    padding: 8px 14px;
  }
  .Navigation-module__yDraKW__cta::after {
    content: "Boeken";
    font-size: 10px;
    letter-spacing: 0.14em;
  }
}

/* — branded datumkiezer — */
.dp-anchor {
  position: relative;
}
.dp-input {
  cursor: pointer;
}
.dp-pop {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  z-index: 60;
  width: 292px;
  background: #f6f0e4;
  border: 1px solid rgba(92, 64, 51, 0.14);
  border-radius: 16px;
  box-shadow: 0 22px 50px -14px rgba(26, 20, 16, 0.35);
  padding: 18px;
  animation: dp-pop-in 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}
.dp-pop.dp-dubbel {
  width: min(620px, calc(100vw - 32px));
}
.dp-pop.dp-rechts {
  left: auto;
  right: 0;
}
.dp-maanden {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 26px;
}
@media (max-width: 680px) {
  .dp-pop.dp-dubbel {
    width: 292px;
  }
  .dp-maanden {
    grid-template-columns: 1fr;
  }
  .dp-maand:nth-child(2) {
    display: none;
  }
}
.dp-info {
  font-size: 12.5px;
  color: #8a7a63;
  letter-spacing: 0.04em;
}
.dp-info em {
  font-style: normal;
  color: var(--terracotta);
  font-weight: 600;
}
.dp-pop.dp-boven {
  top: auto;
  bottom: calc(100% + 12px);
}
@keyframes dp-pop-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(6px);
  }
}
.dp-kop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.dp-titel {
  font-family: var(--serif);
  font-size: 19px;
  color: #5c4033;
  letter-spacing: 0.01em;
}
.dp-titel em {
  color: var(--terracotta);
  font-style: italic;
}
.dp-pijl {
  border: none;
  background: none;
  color: var(--terracotta);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 999px;
  transition: background 0.2s var(--ease);
}
.dp-pijl:hover {
  background: rgba(198, 112, 75, 0.14);
}
.dp-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px 0;
}
.dp-dag {
  text-align: center;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8a7a63;
  padding: 4px 0 8px;
  font-weight: 600;
}
.dp-leeg {
  aspect-ratio: 1;
}
.dp-cel {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 13px;
  color: #5c4033;
  aspect-ratio: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s var(--ease), color 0.18s var(--ease),
    transform 0.18s var(--ease);
}
.dp-cel:hover:not(:disabled) {
  background: rgba(198, 112, 75, 0.16);
  transform: scale(1.08);
}
.dp-cel:disabled {
  color: rgba(92, 64, 51, 0.25);
  cursor: default;
}
.dp-cel.dp-vandaag {
  box-shadow: inset 0 0 0 1px rgba(198, 112, 75, 0.5);
}
.dp-cel.dp-gekozen {
  background: var(--terracotta);
  color: #faf7f2;
}

/* klein terracotta pijltje naar de knop eronder */
.pijl-omlaag {
  display: inline-block;
  color: var(--terracotta);
  font-style: normal;
  animation: pijl-wip 2.2s ease-in-out infinite;
}
@keyframes pijl-wip {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}
@media (prefers-reduced-motion: reduce) {
  .pijl-omlaag { animation: none; }
}

/* ============================================================
   LISTINGPAGINA'S (Airbnb-layout in huisstijl)
   ============================================================ */
.lst-main {
  background: var(--bg);
  padding: 140px 44px 90px;
}
.lst-kop-sectie {
  max-width: 1160px;
  margin: 0 auto;
}
.lst-titel {
  font-family: var(--serif);
  font-size: clamp(32px, 3.6vw, 48px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 6px;
}
.lst-submeta {
  color: var(--sand);
  font-size: 14px;
  margin: 0 0 26px;
}
.lst-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(2, 240px);
  gap: 10px;
  border-radius: 18px;
  overflow: hidden;
  margin-bottom: 54px;
}
.lst-foto {
  background-position: 50%;
  background-size: cover;
}
.lst-foto-groot {
  grid-row: span 2;
}
.lst-grid > .lst-foto:not(.lst-foto-groot) {
  display: none;
}
@media (min-width: 900px) {
  .lst-grid {
    grid-template-columns: 2fr 1fr 1fr;
    grid-template-rows: repeat(2, 230px);
  }
  .lst-grid > .lst-foto:not(.lst-foto-groot) {
    display: block;
  }
}
.lst-kolommen {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
}
@media (min-width: 980px) {
  .lst-kolommen {
    grid-template-columns: 1fr 360px;
  }
}
.lst-plaats {
  font-family: var(--serif);
  font-size: 26px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 4px;
}
.lst-meta {
  color: var(--sand);
  font-size: 15px;
  margin: 0 0 30px;
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.lst-hls {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-bottom: 30px;
  border-bottom: 1px solid var(--line);
}
.lst-hl {
  display: flex;
  flex-direction: column;
}
.lst-hl-titel {
  font-weight: 500;
  color: var(--cream);
  font-size: 15px;
}
.lst-hl-tekst {
  color: var(--sand);
  font-size: 14px;
}
.lst-blok {
  padding: 30px 0;
  border-bottom: 1px solid var(--line);
}
.lst-blok h3 {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 18px;
}
.lst-beschrijving p {
  color: var(--sand);
  font-size: 16px;
  line-height: 1.7;
  margin: 0 0 16px;
}
.lst-beschrijving p:last-child {
  margin-bottom: 0;
}
.lst-slapen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
}
.lst-slaap {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.lst-slaap strong {
  color: var(--cream);
  font-weight: 500;
  font-size: 15px;
}
.lst-slaap span {
  color: var(--sand);
  font-size: 14px;
}
.lst-voorz,
.lst-regels {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px 24px;
}
.lst-voorz li,
.lst-regels li {
  color: var(--sand);
  font-size: 15px;
  padding-left: 20px;
  position: relative;
}
.lst-voorz li::before,
.lst-regels li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
  position: absolute;
  left: 0;
  top: 0.55em;
}
.lst-boek {
  position: sticky;
  top: 90px;
  /* sticky maakt een eigen stapellaag: hoger dan de fotoknop (z-index 2)
     zodat de kalender er nooit achter verdwijnt */
  z-index: 20;
}
.lst-kaart {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 26px;
  box-shadow: 0 18px 44px -18px rgba(26, 20, 16, 0.25);
}
.lst-prijs {
  color: var(--sand);
  font-size: 14px;
  margin: 0 0 18px;
}
.lst-prijs strong {
  font-family: var(--serif);
  font-weight: 400;
  color: var(--cream);
  font-size: 26px;
}
.lst-veld {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 9px 14px;
  margin-bottom: 10px;
  position: relative;
}
.lst-veld label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-dim);
}
.lst-veld input,
.lst-veld select {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--cream);
  outline: none;
  width: 100%;
}
.lst-reserveer {
  width: 100%;
  border: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: #faf7f2;
  font-family: var(--sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  padding: 16px;
  margin-top: 6px;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.lst-reserveer:hover {
  background: var(--orange);
}
.lst-noot {
  color: var(--cream-dim);
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  margin: 14px 0 0;
}
@media (max-width: 900px) {
  .lst-main {
    padding: 120px 24px 70px;
  }
}

/* listingpagina's hebben geen foto-hero: nav in donker bruin */
.lst-body .Navigation-module__yDraKW__nav,
.nav-donker .Navigation-module__yDraKW__nav {
  --cream: #5c4033;
  --sand: #7a5c4a;
  --line: rgba(92, 64, 51, 0.16);
  --line-strong: rgba(92, 64, 51, 0.38);
}

/* range-selectie in de kalender */
.dp-titel {
  text-align: center;
  margin-bottom: 8px;
}
.dp-cel.dp-start,
.dp-cel.dp-eind {
  background: var(--terracotta);
  color: #faf7f2;
}
.dp-cel.dp-tussen {
  background: rgba(198, 112, 75, 0.16);
  border-radius: 0;
}
.dp-cel.dp-start:not(.dp-eind) {
  border-radius: 999px 0 0 999px;
}
.dp-cel.dp-eind:not(.dp-start) {
  border-radius: 0 999px 999px 0;
}
.dp-cel.dp-start.dp-eind {
  border-radius: 999px;
}

/* 'Bekijk alle foto's'-knop op het fotogrid */
.lst-grid {
  position: relative;
}
.lst-allefotos {
  position: absolute;
  right: 16px;
  bottom: 16px;
  z-index: 2;
  border: 1px solid rgba(92, 64, 51, 0.4);
  background: #f6f0e4;
  color: #5c4033;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background 0.2s var(--ease), transform 0.2s var(--ease);
}
.lst-allefotos:hover {
  background: #fff;
  transform: translateY(-1px);
}
/* fullscreen galerij */
.lst-overlay {
  position: fixed;
  inset: 0;
  z-index: 700;
  background: var(--bg);
  overflow-y: auto;
}
.lst-overlay-kop {
  position: sticky;
  top: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
  padding: 18px 24px;
}
.lst-overlay-kop span {
  font-family: var(--serif);
  font-size: 18px;
  color: var(--cream);
}
.lst-overlay-sluit {
  border: none;
  background: none;
  color: var(--cream);
  font-size: 18px;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 999px;
  transition: background 0.2s var(--ease);
}
.lst-overlay-sluit:hover {
  background: rgba(92, 64, 51, 0.1);
}
.lst-overlay-fotos {
  max-width: 960px;
  margin: 0 auto;
  padding: 26px 24px 80px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.lst-overlay-fotos img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
  display: block;
}
.lst-overlay-fotos img:nth-child(3n + 1) {
  grid-column: span 2;
}
@media (max-width: 640px) {
  .lst-overlay-fotos {
    grid-template-columns: 1fr;
  }
  .lst-overlay-fotos img:nth-child(3n + 1) {
    grid-column: auto;
  }
}

/* fototour (Airbnb-stijl) */
.lst-overlay-fotos {
  max-width: 1020px;
  display: block;
}
.lst-tour-nav {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-bottom: 22px;
  margin-bottom: 26px;
  border-bottom: 1px solid var(--line);
}
.lst-tour-thumb {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  flex: 0 0 auto;
  width: 150px;
}
.lst-tour-foto {
  display: block;
  width: 150px;
  height: 100px;
  border-radius: 8px;
  background-position: 50%;
  background-size: cover;
  margin-bottom: 8px;
  transition: opacity 0.2s var(--ease);
}
.lst-tour-thumb:hover .lst-tour-foto {
  opacity: 0.85;
}
.lst-tour-naam {
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 500;
  color: var(--cream);
}
.lst-tour-sectie {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 44px;
  padding: 34px 0;
}
.lst-ruimte {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--cream);
  margin: 0;
  position: sticky;
  top: 86px;
  align-self: start;
}
.lst-ruimte-fotos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  max-width: 720px;
}
.lst-ruimte-fotos img {
  width: 100%;
  aspect-ratio: 3/2;
  object-fit: cover;
  border-radius: 6px;
  display: block;
  cursor: zoom-in;
}
.lst-ruimte-fotos img:nth-child(3n + 1) {
  grid-column: span 2;
  aspect-ratio: 16/9;
}
@media (max-width: 760px) {
  .lst-tour-sectie {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .lst-ruimte {
    position: static;
  }
  .lst-ruimte-fotos {
    grid-template-columns: 1fr;
  }
  .lst-ruimte-fotos img:nth-child(3n + 1) {
    grid-column: auto;
    aspect-ratio: 3/2;
  }
}
.lst-foto {
  cursor: pointer;
}
/* lightbox */
.lst-lightbox[hidden] {
  display: none;
}
.lst-lightbox {
  position: fixed;
  inset: 0;
  z-index: 900;
  background: rgba(26, 20, 16, 0.94);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lst-lightbox img {
  max-width: min(92vw, 1200px);
  max-height: 86vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, 0.6);
}
.lst-lb-sluit {
  position: absolute;
  top: 20px;
  right: 24px;
  border: none;
  background: none;
  color: #f0e8da;
  font-size: 20px;
  cursor: pointer;
  padding: 8px 12px;
}
.lst-lb-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  border: 1px solid rgba(240, 232, 218, 0.4);
  background: rgba(240, 232, 218, 0.08);
  color: #f0e8da;
  font-size: 18px;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.2s var(--ease);
}
.lst-lb-pijl:hover {
  background: rgba(240, 232, 218, 0.2);
}
.lst-lb-vorige { left: 22px; }
.lst-lb-volgende { right: 22px; }
.lst-lb-teller {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  color: #e4d5b5;
  font-size: 13px;
  letter-spacing: 0.12em;
}

/* 'Fototour'-label links van de rondleidingsbalk */
.lst-tour-label {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-right: 22px;
  margin-right: 6px;
  border-right: 1px solid var(--line);
  min-height: 100px;
}
.lst-tour-label-kop {
  font-family: var(--serif);
  font-size: 20px;
  color: var(--cream);
  line-height: 1.1;
}
.lst-tour-label-sub {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--terracotta);
  margin-top: 6px;
}
@media (max-width: 760px) {
  .lst-tour-label {
    min-height: 0;
    padding-right: 16px;
  }
}

/* bezette (geboekte) data: doorgestreept en niet klikbaar */
.dp-cel.dp-bezet {
  color: rgba(92, 64, 51, 0.32);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  cursor: not-allowed;
}
/* prijsopgave onder de datumkeuze */
.lst-prijsopgave {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.lst-prijsregel {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: var(--sand);
  font-size: 14px;
  margin-bottom: 8px;
}
.lst-prijsregel.lst-prijstotaal {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  color: var(--cream);
  font-weight: 500;
  font-size: 15px;
  margin-bottom: 0;
}

/* ============================================================
   BESCHIKBAARHEIDSPAGINA
   ============================================================ */
.bs-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.bs-kop {
  text-align: center;
  margin-bottom: 34px;
}
.bs-eyebrow {
  letter-spacing: 0.3em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--terracotta);
}
.bs-titel {
  font-family: var(--serif);
  font-size: clamp(34px, 4.4vw, 56px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 14px 0 10px;
}
.bs-sub {
  color: var(--sand);
  font-size: 16px;
  margin: 0;
}
/* datumkiezer */
.bs-form {
  display: flex;
  gap: 10px;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 10px;
  max-width: 790px;
  margin: 0 auto 44px;
}
.bs-veld {
  flex: 1 1 auto;
  min-width: 150px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 16px;
  border-right: 1px solid var(--line);
  position: relative;
}
.bs-veld:last-of-type {
  border-right: none;
}
.bs-veld label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-dim);
}
.bs-veld input {
  border: none;
  background: none;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--cream);
  outline: none;
  width: 100%;
}
.bs-knop {
  border: none;
  border-radius: 12px;
  background: var(--terracotta);
  color: #faf7f2;
  font-family: var(--sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  padding: 0 26px;
  cursor: pointer;
  transition: background 0.25s var(--ease);
}
.bs-knop:hover {
  background: var(--orange);
}
/* uitslagkaarten */
.bs-uitslag {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.bs-kaart {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 0;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
}
.bs-kaart.bs-gekozen {
  border-color: rgba(198, 112, 75, 0.55);
  box-shadow: 0 14px 40px -18px rgba(198, 112, 75, 0.5);
}
.bs-foto {
  display: block;
  min-height: 190px;
  background-position: 50%;
  background-size: cover;
}
.bs-kaart.bs-bezet .bs-foto {
  filter: grayscale(0.7) brightness(0.9);
}
.bs-info {
  padding: 26px 28px;
}
.bs-status {
  display: inline-block;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 700;
  color: var(--sage);
  border: 1px solid rgba(91, 117, 83, 0.4);
  border-radius: 999px;
  padding: 4px 12px;
  margin-bottom: 12px;
}
.bs-kaart.bs-bezet .bs-status {
  color: var(--cream-dim);
  border-color: var(--line-strong);
}
.bs-info h2 {
  font-family: var(--serif);
  font-size: 28px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 4px;
}
.bs-plaats {
  color: var(--sand);
  font-size: 14px;
  margin: 0 0 14px;
}
.bs-prijs,
.bs-alt {
  color: var(--sand);
  font-size: 15px;
  margin: 0 0 18px;
}
.bs-prijs strong,
.bs-alt strong {
  color: var(--cream);
  font-weight: 500;
}
.bs-cta {
  display: inline-block;
  background: var(--terracotta);
  color: #faf7f2;
  border-radius: 999px;
  padding: 12px 28px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.25s var(--ease);
}
.bs-cta:hover {
  background: var(--orange);
}
.bs-cta-licht {
  background: none;
  color: var(--cream);
  border: 1px solid var(--line-strong);
}
.bs-cta-licht:hover {
  background: rgba(92, 64, 51, 0.08);
}
.bs-tussenkop {
  text-align: center;
  color: var(--sand);
  font-family: var(--serif);
  font-style: italic;
  font-size: 18px;
  margin: 6px 0;
}
@media (max-width: 700px) {
  .bs-form {
    flex-direction: column;
  }
  .bs-veld {
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .bs-knop {
    padding: 15px;
  }
  .bs-kaart {
    grid-template-columns: 1fr;
  }
  .bs-foto {
    min-height: 200px;
  }
}

/* ============================================================
   MENU-OVERLAY: fotokaders uitlijnen en vullen
   ============================================================ */
/* de kolommen hebben verschillend veel links; door de foto aan de
   onderkant vast te zetten staan alle drie de kaders op één lijn */
.Navigation-module__yDraKW__columnPhoto {
  flex: 0 0 auto;
  height: clamp(140px, 26vh, 260px);
  margin-top: auto;
  background-size: cover;
  background-position: center;
}
/* dezelfde beelden als bij hover op de homepage-hero */
.Navigation-module__yDraKW__columnPhoto.tone-warm {
  background-image: url(../images/hero-water.jpg);
}
.Navigation-module__yDraKW__columnPhoto.tone-water {
  background-image: url(../images/hero-studio.jpg);
}
.Navigation-module__yDraKW__columnPhoto.tone-earth {
  background-image: url(../images/hero-story.jpg);
}

/* slotzin: kleine terzijde die direct achter de laatste zin doorloopt */
.terzijde {
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  color: var(--cream-dim);
  margin-left: 6px;
}

/* kleine inleidende paginatitel boven een tekstpagina */
.pagina-titel {
  font-family: var(--serif);
  font-size: clamp(30px, 3.2vw, 44px);
  font-weight: 300;
  letter-spacing: -0.01em;
  color: var(--cream);
  margin: 0 0 20px;
}

/* dikgedrukte zinsnede in de lopende tekst */
.Editorial-module__aeivOW__text strong {
  font-weight: 600;
  color: var(--terracotta);
}

/* gastenteller in de beschikbaarheidsbalk */
.bs-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-dim);
}
.bs-veld-gasten {
  flex: 0 0 auto;
  min-width: 128px;
}
.bs-stepper {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 1px;
}
.bs-step {
  width: 23px;
  height: 23px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: none;
  color: var(--cream);
  font-family: var(--sans);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease),
    opacity 0.2s var(--ease);
}
.bs-step:hover:not(:disabled) {
  background: rgba(198, 112, 75, 0.14);
  border-color: var(--terracotta);
}
.bs-step:disabled {
  opacity: 0.35;
  cursor: default;
}
.bs-aantal {
  font-size: 14px;
  color: var(--cream);
  min-width: 14px;
  text-align: center;
}

/* melding als geen enkele boot past */
.bs-leeg {
  text-align: center;
  color: var(--sand);
  font-size: 16px;
  padding: 30px 0;
  margin: 0;
}

/* ============================================================
   LOCATIEPAGINA: twee gelijkwaardige kolommen naast elkaar
   ============================================================ */
.loc2-sectie {
  background: var(--bg);
  padding: 118px 44px 90px;
}
.loc2-titel {
  font-family: var(--serif);
  font-size: clamp(38px, 4.6vw, 68px);
  font-weight: 300;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--cream);
  margin: 0 0 34px;
}
.loc2-wrap {
  max-width: 1120px;
  margin: 0 auto;
}
.loc2-intro {
  color: var(--sand);
  font-size: 17px;
  line-height: 1.7;
  max-width: 560px;
  margin: 0 0 56px;
}
/* locatiekiezer: namen als schakelaar, foto ingetogen eronder */
.lc-hint {
  color: var(--cream-dim);
  font-size: 14px;
  letter-spacing: 0.02em;
  margin: -22px 0 30px;
}
.lc-schakel {
  display: flex;
  flex-wrap: wrap;
  gap: 0 clamp(26px, 5vw, 64px);
  border-bottom: 1px solid var(--line);
  padding-bottom: 22px;
  margin-bottom: 34px;
}
.lc-naam {
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0.42;
  transition: opacity 0.3s var(--ease);
}
.lc-naam:hover {
  opacity: 0.75;
}
.lc-naam.is-actief {
  opacity: 1;
}
.lc-naam-titel {
  font-family: var(--serif);
  font-size: clamp(26px, 3.2vw, 42px);
  font-weight: 300;
  letter-spacing: -0.015em;
  line-height: 1.05;
  color: var(--cream);
  position: relative;
}
.lc-naam.is-actief .lc-naam-titel::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: var(--terracotta);
}
.lc-naam-streek {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--terracotta);
}
.lc-beeld {
  position: relative;
  aspect-ratio: 16/9;
  max-width: 860px;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 48px;
}
.lc-foto {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.6s var(--ease);
}
.lc-foto.is-actief {
  opacity: 1;
}
.loc2-info {
  display: none;
  animation: car-in 0.5s var(--ease);
}
.loc2-info.is-actief {
  display: block;
}
.loc2-kolommen {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(30px, 5vw, 64px);
  align-items: start;
}
.loc2-links,
.loc2-rechts {
  min-width: 0;
}
@keyframes car-in {
  from { opacity: 0; transform: translateY(10px); }
}
.loc2-naam {
  font-family: var(--serif);
  font-size: clamp(28px, 3vw, 40px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 4px;
}
.loc2-streek {
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--terracotta);
  margin: 0 0 22px;
}
/* feitenrij: gasten / slaapkamers / prijs */
.lc-hoofd {
  display: grid;
  grid-template-columns: 1fr minmax(150px, 190px);
  gap: clamp(26px, 4vw, 54px);
  align-items: start;
  margin-bottom: 48px;
}
.lc-beeld {
  margin-bottom: 0;
}
.lc-feiten {
  display: none;
}
.lc-feiten.is-actief {
  display: block;
}
.loc2-feiten {
  display: flex;
  flex-direction: column;
}
.loc2-feit {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 13px 0;
  border-bottom: 1px solid var(--line);
}
.loc2-feit:first-child {
  padding-top: 0;
}
.loc2-feit:last-child {
  border-bottom: none;
}
.loc2-feit-waarde {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--cream);
  line-height: 1;
}
.loc2-feit-label {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-dim);
}
.loc2-kop {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 5px;
}
.loc2-tekst {
  color: var(--sand);
  font-size: 15.5px;
  line-height: 1.75;
  margin: 0 0 26px;
}

.loc2-buurt {
  list-style: none;
  margin: 0;
  padding: 0;
}
.loc2-buurt li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  color: var(--sand);
  font-size: 15px;
  line-height: 1.6;
  padding: 11px 0 11px 18px;
  border-top: 1px solid var(--line);
  position: relative;
}
.buurt-naam {
  color: var(--cream);
}
.buurt-tijd {
  flex: 0 0 auto;
  letter-spacing: 0.1em;
  font-size: 12px;
  color: var(--cream-dim);
  white-space: nowrap;
}
.loc2-buurt li:last-child {
  border-bottom: 1px solid var(--line);
}
.loc2-buurt li::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--terracotta);
  position: absolute;
  left: 0;
  top: 19px;
}
.loc2-buurt strong {
  color: var(--cream);
  font-weight: 500;
}
/* knop gecentreerd onder de linkerkolom, gevuld bij hover */
.loc2-knoprij {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
.loc2-knop {
  display: inline-block;
  border: 1px solid var(--line-strong);
  background: none;
  color: var(--cream);
  border-radius: 999px;
  padding: 15px 38px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  transition: background 0.26s var(--ease), border-color 0.26s var(--ease),
    color 0.26s var(--ease);
}
.loc2-knop:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #faf7f2;
}
@media (max-width: 840px) {
  .loc2-sectie {
    padding: 100px 24px 70px;
  }
  .carrousel {
    grid-template-columns: 70px 1fr 70px;
    gap: 12px;
  }
  .loc2-kolommen {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .lc-hoofd {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .loc2-feiten {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0 30px;
  }
  .loc2-feit {
    border-bottom: none;
    padding: 0;
  }
  .car-zij-naam {
    display: none;
  }
}

/* fotokader van de carrousel */
.car-hoofdfoto {
  position: relative;
}


/* fotocarrousel van de omgeving, met pijltjes in de foto zelf */
.fotocar {
  margin-top: 10px;
}
.fotocar-frame {
  position: relative;
  aspect-ratio: 3/2;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 18px 40px -22px rgba(26, 20, 16, 0.5);
}
.fotocar-foto {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.55s var(--ease);
}
.fotocar-foto.is-actief {
  opacity: 1;
}
.fotocar-pijl {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 38px;
  height: 38px;
  border: 1px solid rgba(240, 232, 218, 0.45);
  border-radius: 999px;
  background: rgba(26, 20, 16, 0.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f0e8da;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.3s var(--ease), background 0.25s var(--ease);
}
.fotocar-frame:hover .fotocar-pijl,
.fotocar-pijl:focus-visible {
  opacity: 1;
}
.fotocar-pijl:hover {
  background: rgba(198, 112, 75, 0.85);
}
.fotocar-vorige { left: 14px; }
.fotocar-volgende { right: 14px; }
.fotocar-teller {
  position: absolute;
  right: 14px;
  bottom: 12px;
  background: rgba(26, 20, 16, 0.4);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  color: #f0e8da;
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
}
@media (max-width: 760px) {
  .fotocar-pijl {
    opacity: 1;
    width: 34px;
    height: 34px;
  }
}

/* ============================================================
   CONTACTPAGINA
   ============================================================ */
.ct-sectie {
  background: var(--bg);
  padding: 110px 44px 120px;
}
.ct-wrap {
  max-width: 1060px;
  margin: 0 auto;
}
.ct-kop {
  margin-bottom: 48px;
}
.ct-titel {
  font-family: var(--serif);
  font-size: clamp(30px, 3.6vw, 46px);
  font-weight: 300;
  letter-spacing: -0.015em;
  color: var(--cream);
  margin: 0 0 8px;
}
.ct-sub {
  color: var(--sand);
  font-size: 16px;
  margin: 0;
}
.ct-kolommen {
  display: grid;
  grid-template-columns: 1fr minmax(240px, 300px);
  gap: clamp(32px, 5vw, 70px);
  align-items: start;
}
/* formulier */
.ct-rij {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.ct-veld {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 18px;
}
.ct-veld label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-dim);
}
.ct-veld input,
.ct-veld textarea {
  font-family: var(--sans);
  font-size: 15px;
  color: var(--cream);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  outline: none;
  transition: border-color 0.25s var(--ease);
}
.ct-veld input:focus,
.ct-veld textarea:focus {
  border-color: var(--terracotta);
}
.ct-veld textarea {
  resize: vertical;
  line-height: 1.6;
}
.ct-verstuur {
  border: none;
  border-radius: 999px;
  background: var(--terracotta);
  color: #faf7f2;
  font-family: var(--sans);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 600;
  padding: 16px 40px;
  margin-top: 6px;
  cursor: pointer;
  transition: background 0.25s var(--ease), transform 0.25s var(--ease);
}
.ct-verstuur:hover {
  background: var(--orange);
  transform: translateY(-1px);
}
.ct-bedankt {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 34px;
}
.ct-bedankt h3 {
  font-family: var(--serif);
  font-size: 24px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 8px;
}
.ct-bedankt p {
  color: var(--sand);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
/* zijkolom met WhatsApp */
.ct-zij {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 28px;
}
.ct-zij-kop {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 8px;
}
.ct-zij-tekst {
  color: var(--sand);
  font-size: 15px;
  line-height: 1.65;
  margin: 0 0 22px;
}
.ct-whatsapp {
  display: block;
  text-align: center;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 14px 22px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  color: var(--cream);
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease),
    color 0.25s var(--ease);
}
.ct-whatsapp:hover {
  background: var(--sage);
  border-color: var(--sage);
  color: #faf7f2;
}
.ct-gegevens {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
.ct-gegeven-label {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 9px;
  font-weight: 600;
  color: var(--cream-dim);
  margin-top: 12px;
}
.ct-gegeven-label:first-child {
  margin-top: 0;
}
.ct-gegeven {
  color: var(--cream);
  font-size: 15px;
  border-bottom: 1px solid var(--line);
  align-self: flex-start;
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.ct-gegeven:hover {
  color: var(--terracotta);
  border-color: var(--terracotta);
}
@media (max-width: 820px) {
  .ct-sectie {
    padding: 80px 24px 90px;
  }
  .ct-kolommen,
  .ct-rij {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   DOCUMENTVIEWER (voorwaarden)
   ============================================================ */
.doc-sectie {
  background: var(--bg-warm);
  padding: 90px 44px 110px;
}
.doc-wrap {
  max-width: 900px;
  margin: 0 auto;
}
.doc-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px 30px;
  margin-bottom: 26px;
}
.doc-titel {
  font-family: var(--serif);
  font-size: clamp(24px, 2.6vw, 32px);
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 4px;
}
.doc-sub {
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--cream-dim);
  margin: 0;
}
.doc-download {
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 13px 28px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--cream);
  transition: background 0.26s var(--ease), border-color 0.26s var(--ease),
    color 0.26s var(--ease);
}
.doc-download:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #faf7f2;
}
.doc-frame {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 22px 50px -26px rgba(26, 20, 16, 0.45);
}
.doc-frame iframe {
  display: block;
  width: 100%;
  height: min(78vh, 760px);
  border: none;
  border-radius: 8px;
  background: #f0e8da;
}
.doc-noot {
  text-align: center;
  color: var(--cream-dim);
  font-size: 13px;
  margin: 18px 0 0;
}
.doc-noot a {
  color: var(--terracotta);
  border-bottom: 1px solid currentColor;
}
@media (max-width: 700px) {
  .doc-sectie {
    padding: 70px 20px 80px;
  }
  .doc-frame iframe {
    height: 62vh;
  }
}

/* CTA onder de tekst op de studio-about pagina */
.studio-cta-rij {
  margin-top: 38px;
}
.studio-cta {
  display: inline-block;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  padding: 15px 38px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--cream);
  transition: background 0.26s var(--ease), border-color 0.26s var(--ease),
    color 0.26s var(--ease);
}
.studio-cta:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #faf7f2;
}

/* ============================================================
   STUDIO RENTAL: praktische pagina
   ============================================================ */
.rn-sectie {
  background: var(--bg);
  padding: 130px 44px 110px;
}
.rn-wrap {
  max-width: 820px;
  margin: 0 auto;
}
.rn-intro {
  color: var(--sand);
  font-size: 17px;
  line-height: 1.7;
  margin: 0 0 12px;
}
.rn-kop {
  font-family: var(--serif);
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 300;
  color: var(--cream);
  margin: 48px 0 8px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
}
/* de titel dichter op de eerste scheidingslijn */
.rn-wrap .pagina-titel {
  margin-bottom: 8px;
}
.rn-tekst {
  color: var(--sand);
  font-size: 16px;
  line-height: 1.75;
  margin: 0 0 18px;
}
.rn-tekst strong {
  color: var(--cream);
  font-weight: 500;
}
.rn-link {
  color: var(--terracotta);
  border-bottom: 1px solid currentColor;
  white-space: nowrap;
}
/* dagdelen */
.rn-dagdelen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 14px;
  margin-top: 22px;
}
.rn-dagdeel {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.rn-dagdeel-naam {
  font-family: var(--serif);
  font-size: 19px;
  color: var(--cream);
}
.rn-dagdeel-tijd {
  letter-spacing: 0.14em;
  font-size: 11px;
  font-weight: 600;
  color: var(--terracotta);
}
.rn-dagdeel-tekst {
  color: var(--sand);
  font-size: 13.5px;
  line-height: 1.5;
  margin-top: 4px;
}
/* stappen */
.rn-stappen {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 20px;
}
.rn-stap {
  display: flex;
  gap: 20px;
  align-items: baseline;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.rn-stap:last-child {
  border-bottom: none;
}
.rn-stap-nr {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--terracotta);
  flex: 0 0 auto;
}
.rn-stap-titel {
  font-family: var(--serif);
  font-size: 19px;
  font-weight: 400;
  color: var(--cream);
  margin: 0 0 5px;
}
.rn-stap-tekst {
  color: var(--sand);
  font-size: 15px;
  line-height: 1.7;
  margin: 0;
}
@media (max-width: 700px) {
  .rn-sectie {
    padding: 110px 24px 80px;
  }
}

/* ============================================================
   FOUNDER: tekst links, portret rechts
   ============================================================ */
.fd-sectie {
  background: var(--bg);
  padding: 130px 44px 110px;
}
.fd-wrap {
  /* smallere kolom: meer rustige achtergrond om de tekst heen */
  max-width: 880px;
  margin: 0 auto;
}
.fd-kolommen {
  display: block;
}
/* de foto staat rechtsboven; de tekst loopt ernaast en eronder door */
.fd-foto-zweef {
  float: right;
  width: clamp(240px, 34%, 360px);
  margin: 4px 0 26px clamp(26px, 4vw, 54px);
}
.fd-tekst {
  color: var(--sand);
  font-size: 15px;
  line-height: 1.85;
  margin: 0 0 20px;
}
.fd-kop {
  font-family: var(--serif);
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 400;
  color: var(--cream);
  margin: 40px 0 6px;
}
.fd-rechts {
  position: sticky;
  top: 110px;
}
.fd-foto {
  aspect-ratio: 4/5;
  border-radius: 12px;
  background-position: 50%;
  background-size: cover;
  box-shadow: 0 20px 44px -24px rgba(26, 20, 16, 0.45);
}

/* --- krasvlak over de foto: eerst dicht, je krast hem zelf open --- */
.fd-kras-houder {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}
.fd-kras {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  cursor: crosshair;
  /* zonder dit scrollt de pagina mee zodra je op een telefoon kras */
  touch-action: none;
  transition: opacity 0.55s var(--ease);
}
.fd-kras.is-vrij {
  opacity: 0;
  pointer-events: none;
}
.fd-kras-hint {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: #f0e8da;
  background: rgba(26, 20, 16, 0.32);
  border-radius: 999px;
  padding: 7px 15px;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.fd-kras-hint.is-weg {
  opacity: 0;
}
.fd-onderschrift {
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--cream-dim);
  margin: 14px 0 0;
}
@media (max-width: 860px) {
  .fd-sectie {
    padding: 110px 24px 80px;
  }
  .fd-foto-zweef {
    float: none;
    width: 100%;
    max-width: 320px;
    margin: 0 0 28px;
  }
}

/* WhatsApp-icoon in de contactknop */
.ct-whatsapp {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ct-wa-icoon {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
}

/* accenten in de foundertekst: rustiger dan echt vet, en allemaal in
   dezelfde donkere terracotta zodat de pagina niet speels wordt */
.fd-tekst strong {
  font-weight: 500;
  color: #a85535;
}
.fd-tekst strong.fd-vet {
  color: #a85535;
}

/* ============================================================
   UITGEVULDE TEKST (boxed), zoals op de founder-pagina
   Alle lopende teksten lopen links en rechts tot dezelfde rand,
   waardoor een alinea van een afstandje als een blok leest.
   Afbreken staat aan: zonder afbreken rekt uitvullen de
   woordafstanden op tot er witte rivieren door de tekst lopen.
   Niet toegepast op gecentreerde koppen, korte bijschriften en
   smalle kaartjes: daar levert uitvullen juist gaten op.
   ============================================================ */
.fd-tekst,
.Editorial-module__aeivOW__text,
.HomeStudio-module__IMJrKG__text,
.ServiceGrid-module__ITugwG__intro,
.loc2-tekst,
.rn-intro,
.rn-tekst,
.ab-tekst {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
  hyphenate-limit-chars: 6 3 3;
}
/* op smalle schermen wordt uitvullen snel rommelig: te weinig
   woorden per regel om de ruimte netjes te verdelen */
@media (max-width: 600px) {
  .fd-tekst,
  .Editorial-module__aeivOW__text,
  .HomeStudio-module__IMJrKG__text,
  .ServiceGrid-module__ITugwG__intro,
  .loc2-tekst,
  .rn-intro,
  .rn-tekst,
  .ab-tekst {
    text-align: left;
  }
}

/* ============================================================
   SAMENWERKINGEN: horizontaal scrollende balk op collaborations
   Eén kaart nu, de rest van de baan is een "more coming soon"
   vlak, zodat de balk niet halfleeg oogt.
   ============================================================ */
.sw-sectie {
  background: var(--bg);
  padding: 110px 0 120px;
}
.sw-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 44px;
}
.sw-kop {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 30px;
}
.sw-titel {
  font-family: var(--serif);
  font-size: clamp(26px, 3vw, 38px);
  font-weight: 300;
  color: var(--cream);
  margin: 0;
}
.sw-pijlen {
  display: flex;
  gap: 10px;
  flex: 0 0 auto;
}
.sw-pijl {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  border: 1px solid var(--line-strong);
  color: var(--cream);
  font-size: 15px;
  line-height: 1;
  transition: background 0.24s var(--ease), border-color 0.24s var(--ease),
    color 0.24s var(--ease), opacity 0.24s var(--ease);
}
.sw-pijl:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  color: #faf7f2;
}
.sw-pijl[disabled] {
  opacity: 0.32;
  cursor: default;
}
.sw-pijl[disabled]:hover {
  background: none;
  border-color: var(--line-strong);
  color: var(--cream);
}

/* het kader staat in de kolom, net zo breed als de rest van de
   pagina; het schuiven gebeurt binnenin */
.sw-frame {
  /* eigen achtergrond, zodat je in een oogopslag ziet dat dit een
     apart vak is en niet gewoon de pagina. De lichtste tint, dan valt
     het kader op tegen allebei de sectiekleuren */
  background: var(--bg-card);
  border: 1px solid var(--line-strong);
  border-radius: 18px;
  padding: 22px;
  overflow: hidden;
  box-shadow: inset 0 1px 0 rgba(240, 232, 218, 0.06);
}
.sw-baan {
  display: flex;
  align-items: stretch;
  gap: 18px;
  overflow-x: auto;
  scrollbar-width: none;
}
.sw-baan::-webkit-scrollbar {
  display: none;
}
/* elk blok even breed, zodat ze netjes in het kader vallen */
.sw-kaart,
.sw-binnenkort {
  flex: 0 0 clamp(210px, 22vw, 260px);
}
.sw-kaart {
  display: flex;
  flex-direction: column;
}
.sw-foto {
  aspect-ratio: 4/5;
  border-radius: 14px;
  background-position: 50%;
  background-size: cover;
  box-shadow: 0 20px 44px -26px rgba(26, 20, 16, 0.5);
}
/* zolang de foto er nog niet is: initialen op een warm vlak, zodat
   de kaart al klopt in de lijst */
.sw-foto-leeg {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(150deg, #c6704b 0%, #a85535 55%, #7a4326 100%);
}
.sw-foto-leeg::after {
  content: attr(data-initialen);
  font-family: var(--serif);
  font-size: 54px;
  font-weight: 300;
  color: #f0e8da;
  opacity: 0.85;
}
.sw-info {
  padding: 16px 2px 0;
}
.sw-naam {
  font-family: var(--serif);
  font-size: 22px;
  font-weight: 300;
  color: var(--cream);
  margin: 0 0 4px;
}
.sw-rol {
  color: var(--sand);
  font-size: 14px;
  margin: 0 0 8px;
}
.sw-insta {
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  color: var(--terracotta);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
}
/* de nog lege plekken: zelfde maat als een kaart, zodat het kader
   gevuld oogt en je ziet dat er ruimte is voor meer */
.sw-binnenkort {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 0 16px;
  border: 1px dashed var(--line-strong);
  border-radius: 14px;
}
.sw-binnenkort span {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
  color: var(--cream-dim);
}
@media (max-width: 700px) {
  .sw-sectie {
    padding: 80px 0 90px;
  }
  .sw-wrap {
    padding: 0 24px;
  }
  .sw-frame {
    padding: 14px;
    border-radius: 14px;
  }
  .sw-pijlen {
    display: none;
  }
}

/* ============================================================
   FOTOKOP MET KLEMTOON (homepage)
   Drie gelijke regels lazen als een lijstje. Nu draagt de
   middelste regel de klemtoon: die is groter en cursief, met
   een kleinere aanloop erboven en een rustige slotregel eronder.
   ============================================================ */
.zin {
  display: block;
}
.zin-aanloop,
.zin-accent,
.zin-slot {
  display: block;
}
.zin-aanloop {
  font-size: 0.58em;
  letter-spacing: 0.01em;
  color: var(--sand);
  margin-bottom: 0.12em;
}
/* met de em erbij, anders wint de algemene regel voor cursief in
   fotokoppen en blijft de accentregel dezelfde kleur als de rest */
em.zin-accent {
  font-size: 1.18em;
  font-style: italic;
  color: var(--cream);
  line-height: 1.05;
}
.zin-slot {
  font-family: var(--sans);
  font-size: 0.2em;
  font-weight: 500;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--sand);
  margin-top: 1.5em;
}
@media (max-width: 600px) {
  .zin-slot {
    font-size: 0.24em;
    letter-spacing: 0.26em;
  }
}

/* ============================================================
   LEESBAARHEID VAN TEKST OP FOTOSCENES
   De lichte plekken in een foto (zonlicht op water, een witte
   muur) halen tegenover cremekleurige tekst maar 1,4 tot 1,9 op
   1 aan contrast. Met deze sluier gaat dat naar ruim 5 op 1,
   ruim boven de norm voor grote tekst, terwijl de randen van de
   foto hun kleur houden.
   ============================================================ */
.Scene-module__0g_vqW__ph::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 50% 50%,
      rgba(26, 20, 16, 0.55) 0%, rgba(26, 20, 16, 0) 75%),
    linear-gradient(180deg,
      rgba(26, 20, 16, 0.3) 0%,
      rgba(26, 20, 16, 0.12) 45%,
      rgba(26, 20, 16, 0.38) 100%);
}
/* zachte schaduw onder de letters zelf: scheidt de tekst ook waar
   de foto toevallig licht is */
.Scene-module__0g_vqW__heading,
.Scene-module__0g_vqW__eyebrow {
  text-shadow: 0 2px 22px rgba(26, 20, 16, 0.5);
}

/* de homepage-hero heeft hetzelfde probleem: de woorden staan midden
   op het licht van het water, waar het contrast op 2,3 op 1 uitkomt.
   De bestaande overlay is daar juist doorzichtig, dus komt er een
   sluier in het midden bij: contrast gaat naar ruim 5 op 1 */
.hero-mono .Hero-module___w2HtG__overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(closest-side at 50% 50%,
    rgba(26, 20, 16, 0.5) 0%, rgba(26, 20, 16, 0) 72%);
}
.hero-mono .Hero-module___w2HtG__serviceLink,
.hero-mono .Hero-module___w2HtG__sep {
  text-shadow: 0 2px 24px rgba(26, 20, 16, 0.55);
}

/* --- kaart die nog moet beginnen: duidelijk maken dat er nog niets
   te lezen valt, in plaats van een link die nergens heen gaat --- */
.sw-fotovak {
  position: relative;
}
.sw-wacht .sw-foto {
  filter: brightness(0.82) saturate(0.92);
}
.sw-vlag {
  position: absolute;
  top: 12px;
  left: 12px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  font-size: 9.5px;
  font-weight: 600;
  color: #f0e8da;
  background: rgba(26, 20, 16, 0.62);
  border: 1px solid rgba(240, 232, 218, 0.28);
  border-radius: 999px;
  padding: 6px 12px;
}
.sw-noot {
  color: var(--cream-dim);
  font-size: 12.5px;
  line-height: 1.55;
  margin: 6px 0 10px;
}

/* ============================================================
   EXTRA'S BIJ EEN BOEKING (de sloep bij Sneekermeer)
   ============================================================ */
.lst-extra {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 4px 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.22s var(--ease), background 0.22s var(--ease);
}
.lst-extra:hover {
  border-color: var(--line-strong);
}
.lst-extra-vink {
  margin-top: 2px;
  width: 16px;
  height: 16px;
  accent-color: var(--terracotta);
  flex: 0 0 auto;
  cursor: pointer;
}
.lst-extra-tekst {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--sand);
}
.lst-extra-tekst strong {
  display: block;
  color: var(--cream);
  font-weight: 500;
}
/* de kleine lettertjes */
.lst-extra-klein,
.lst-fijn {
  font-size: 11px;
  color: var(--cream-dim);
}

/* schoonmaak zit bij de prijs in: de normale prijs doorgestreept naast
   de nul, zodat het leest als het voordeel dat gasten bij ons krijgen */
.lst-prijsregel.lst-gratis span:last-child {
  color: var(--terracotta);
  font-weight: 500;
}
.lst-prijsregel.lst-gratis s {
  color: var(--cream-dim);
  font-weight: 400;
  margin-right: 6px;
  text-decoration-thickness: 1px;
}

/* ============================================================
   MERKLETTER: Cubao Narrow uit de brand kit
   Dit is dezelfde letter als het logo, dus de koppen krijgen het
   karakter van het merk in plaats van de standaard boekserif.
   Bodytekst blijft Satoshi, ook uit de brand kit.
   ============================================================ */
@font-face {
  font-family: "Cubao Narrow";
  src: url("../fonts/cubao-narrow.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
  --display: "Cubao Narrow", var(--serif);
}

/* alle koppen op de merkletter. Cubao is smal en stevig, dus de
   krappe letterafstand van de vorige serif gaat eraf */
.Hero-module___w2HtG__title,
.pagina-titel,
.HomeStudio-module__IMJrKG__title,
.Scene-module__0g_vqW__heading,
.ContactCTA-module__rLNwaW__heading,
.Chapter-module__Gv6q5a__word,
.ServiceGrid-module__ITugwG__heading,
.ServiceGrid-module__ITugwG__colTitle,
.TeamIntro-module__-b6QhG__heading,
.TeamIntro-module__-b6QhG__name,
.FAQ-module__uDLo1a__heading,
.Navigation-module__yDraKW__columnTitle,
.page-module__EkW4Oq__bookingHeading,
.bk-title,
.bs-titel,
.bs-info h2,
.bs-tussenkop,
.ct-titel,
.ct-zij-kop,
.ct-bedankt h3,
.doc-titel,
.dp-titel,
.fd-kop,
.lc-naam-titel,
.loc-name,
.loc-title,
.loc2-kop,
.loc2-naam,
.loc2-titel,
.lst-titel,
.lst-plaats,
.lst-blok h3,
.lst-ruimte,
.lst-overlay-kop span,
.lst-tour-label-kop,
.rn-kop,
.rn-dagdeel-naam,
.rn-stap-titel,
.sw-titel,
.sw-naam,
.ContactForm-module__5yGJ1a__success h3,
.PairGallery-module__C724fq__caption h4 {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.005em;
}
/* Cubao heeft geen cursief; een schuingetrokken versie van zo'n
   stevige letter oogt goedkoop, dus accenten binnen een kop staan
   rechtop en vallen op door hun kleur */
.Hero-module___w2HtG__title em,
.Scene-module__0g_vqW__heading em,
.ContactCTA-module__rLNwaW__heading em,
.HomeStudio-module__IMJrKG__title em,
.pagina-titel em,
.loc2-kop em,
.sw-titel em {
  font-style: normal;
}

/* prijzen en getallen naar de bodyletter: Cubao heeft geen euroteken,
   en een losse boekserif tussen de merkletters valt uit de toon */
.lst-prijs strong,
.loc2-feit-waarde,
.page-module__EkW4Oq__infoValue {
  font-family: var(--sans);
  font-weight: 500;
  letter-spacing: -0.01em;
}
/* kleinere koppen krijgen iets meer lucht tussen de letters, want
   Cubao is smal en zet dan snel dicht */
.fd-kop,
.rn-kop,
.lst-blok h3,
.loc2-kop,
.ct-zij-kop,
.sw-naam,
.rn-stap-titel,
.rn-dagdeel-naam,
.bs-info h2 {
  letter-spacing: 0.03em;
}

/* --- tekst die over een foto ligt houdt de oude serif: die lichte,
   open letter leest beter op beeld en geeft de foto's rust. Cubao
   blijft voor de koppen op een egale achtergrond --- */
.Hero-module___w2HtG__hero .Hero-module___w2HtG__title,
.Hero-module___w2HtG__hero .Scene-module__0g_vqW__heading,
.Scene-module__0g_vqW__scene .Scene-module__0g_vqW__heading,
.loc-card .loc-name,
.loc-card .loc-title,
.PairGallery-module__C724fq__pair .PairGallery-module__C724fq__caption h4 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
/* de drie regels van de fotokop op de homepage: de aanloop en de
   slotregel houden hun eigen maat, alleen de letter gaat terug */
.Scene-module__0g_vqW__scene .zin-aanloop,
.Scene-module__0g_vqW__scene em.zin-accent {
  font-family: var(--serif);
}
.Scene-module__0g_vqW__scene em.zin-accent {
  font-style: italic;
}

/* de grote Stay / Studio / Story in het uitklapmenu blijven ook in de
   oude serif: samen met de hero zijn dat de plekken waar die letter
   als bewust accent werkt */
.Navigation-module__yDraKW__overlay .Navigation-module__yDraKW__columnTitle {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}

/* "Kies je plek" hoort bij de fotokaarten eronder, dus die staat ook
   in de oude serif in plaats van de merkletter */
.loc-title {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.015em;
}
/* het kleine bijschrift dichter op de titel van een locatiekaart */
.loc-kicker {
  margin-bottom: 2px;
}
.loc-name {
  margin: 0 0 4px;
}

/* ============================================================
   ALLEEN HOOFDTITELS DRAGEN DE MERKLETTER
   Een tussenkop of bijschrift krijgt de oude serif terug. Zo blijft
   Cubao een echt accent in plaats van de standaardletter voor alles.
   ============================================================ */
.HomeStudio-module__IMJrKG__title,
.fd-kop,
.rn-kop,
.rn-stap-titel,
.rn-dagdeel-naam,
.lst-blok h3,
.lst-plaats,
.lst-ruimte,
.lst-overlay-kop span,
.lst-tour-label-kop,
.loc2-kop,
.loc2-naam,
.ct-zij-kop,
.ct-bedankt h3,
.ContactForm-module__5yGJ1a__success h3,
.bs-info h2,
.bs-tussenkop,
.sw-naam,
.dp-titel,
.lc-naam-titel,
.TeamIntro-module__-b6QhG__name,
.ServiceGrid-module__ITugwG__colTitle,
.PairGallery-module__C724fq__caption h4 {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.01em;
}
/* op de homepage is dit juist wel de hoofdtitel van de sectie */
html.is-home .HomeStudio-module__IMJrKG__title {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.005em;
}

/* de locatiesectie wordt op snap-pagina's ook een heel scherm, zodat
   je er niet halverwege in blijft hangen */
@media (min-width: 769px) {
  html.snap-home .loc-section {
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-top: 0;
    padding-bottom: 0;
  }
}

/* de locatiesectie krijgt de donkere beige, zodat het scherm tussen de
   twee foto's in niet dezelfde kleur heeft als de rest van de site.
   De fotoscene eronder krijgt dezelfde kleur, anders valt de golf op
   de naad in een andere tint uit */
html.snap-home .loc-section,
html.snap-home .loc-section + .Scene-module__0g_vqW__scene {
  background-color: #e5d9c2;
}

/* het naschrift onder de intro: kleiner en rustiger, als een terzijde */
.loc-ps {
  color: var(--cream-dim);
  font-size: 13px;
  line-height: 1.6;
  max-width: 520px;
  margin: 10px 0 0;
}

/* ============================================================
   LOCATIEKIEZER OPNIEUW INGEDEELD
   De sectie is nu één scherm hoog, dus de kop staat naast de tekst
   in plaats van erboven en de kaarten zijn lager. Zo past alles in
   beeld zonder dat de golf van de volgende sectie eroverheen valt.
   ============================================================ */
.loc-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(24px, 5vw, 72px);
  margin: 0 auto 34px;
}
.loc-title {
  margin: 0;
  flex: 0 1 auto;
}
.loc-head-rechts {
  flex: 0 1 480px;
}
.loc-sub {
  font-size: 16px;
  margin: 0;
}
.loc-ps {
  margin: 8px 0 0;
}
.loc-card {
  height: min(52vh, 520px);
}
/* de naam van de woonboot draagt wel de merkletter */
.loc-card .loc-name {
  font-family: var(--display);
  font-weight: 400;
  letter-spacing: 0.02em;
  font-size: clamp(30px, 3vw, 46px);
}
@media (max-width: 900px) {
  .loc-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 18px;
  }
  .loc-card {
    height: min(60vh, 480px);
  }
}

/* ============================================================
   LOCATIEKIEZER, RUSTIGE OPBOUW
   Alles onder elkaar in één kolom: titel, tekst, naschrift, dan de
   kaarten breed eronder. Geen tekstblok naast de titel meer, dat gaf
   twee leesrichtingen tegelijk.
   ============================================================ */
.loc-head {
  display: block;
  max-width: 1440px;
  margin: 0 auto 30px;
}
.loc-title {
  margin: 0 0 12px;
}
.loc-sub,
.loc-ps {
  max-width: 620px;
}
.loc-ps {
  margin: 6px 0 0;
}
.loc-grid {
  max-width: 1440px;
  gap: 20px;
}
.loc-card {
  height: min(46vh, 460px);
}
@media (max-width: 900px) {
  .loc-card {
    height: min(58vh, 440px);
  }
}

/* in een gecentreerde flexkolom krimpt een blok met automatische
   marges naar zijn minimumbreedte; met een volle breedte erbij vullen
   de kop en de kaarten de sectie wel netjes */
html.snap-home .loc-head,
html.snap-home .loc-grid {
  width: 100%;
}

/* de tekst op de locatiekaarten viel weg in de lichte lucht van de
   foto's. De sluier begint nu hoger en loopt dieper door: op het
   lichtste stuk van de foto gaat het contrast van ruim 2 naar 7 op 1 */
.loc-overlay {
  background: linear-gradient(180deg,
    rgba(26, 20, 16, 0) 18%,
    rgba(26, 20, 16, 0.45) 48%,
    rgba(26, 20, 16, 0.82) 78%,
    rgba(26, 20, 16, 0.92) 100%);
}
.loc-info {
  text-shadow: 0 2px 16px rgba(26, 20, 16, 0.55);
}

/* meer lucht om de kop en de kaarten: de sectie krijgt bredere marges
   en de kaarten worden smaller maar hoger, zodat het geheel ademt */
html.snap-home .loc-section {
  padding-left: clamp(44px, 7vw, 110px);
  padding-right: clamp(44px, 7vw, 110px);
}
.loc-head,
.loc-grid {
  max-width: 1180px;
}
.loc-card {
  height: min(52vh, 520px);
}
@media (max-width: 900px) {
  .loc-card {
    height: min(58vh, 440px);
  }
}

/* ============================================================
   FOTO'S BLADEREN OP DE LOCATIEKAARTEN
   Een pijltje rechts in de kaart bladert door de eerste foto's van
   de advertentie. Blijft iemand doorklikken, dan is de interesse er
   en toont de kaart een uitnodiging om de hele advertentie te openen.
   ============================================================ */
.loc-pijl {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 18px;
  transform: translateY(-50%);
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid rgba(240, 232, 218, 0.45);
  background: rgba(26, 20, 16, 0.28);
  color: #f0e8da;
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.28s var(--ease), background 0.24s var(--ease),
    border-color 0.24s var(--ease), transform 0.24s var(--ease);
}
.loc-card:hover .loc-pijl,
.loc-pijl:focus-visible,
.loc-card.is-bladert .loc-pijl {
  opacity: 1;
}
.loc-pijl:hover {
  background: var(--terracotta);
  border-color: var(--terracotta);
  transform: translateY(-50%) scale(1.06);
}
/* de tweede laag waar de volgende foto in vervaagt */
.loc-photo-volgend {
  position: absolute;
  inset: 0;
  background-position: 50%;
  background-size: cover;
  opacity: 0;
  transition: opacity 0.45s var(--ease);
}
.loc-photo-volgend.is-zichtbaar {
  opacity: 1;
}
/* het slot: hele kaart nodigt uit om de advertentie te openen */
.loc-eind {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  text-align: center;
  padding: 24px;
  background: rgba(26, 20, 16, 0.72);
  backdrop-filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s var(--ease);
}
.loc-card.is-eind .loc-eind {
  opacity: 1;
}
.loc-eind-kop {
  font-family: var(--display);
  font-size: clamp(26px, 2.6vw, 38px);
  color: #f0e8da;
  letter-spacing: 0.02em;
}
.loc-eind-knop {
  border-radius: 999px;
  padding: 13px 30px;
  background: var(--terracotta);
  color: #faf7f2;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 500;
}
.loc-card.is-eind .loc-pijl {
  opacity: 0;
  pointer-events: none;
}

/* de titel van een advertentie staat vlak onder het logo in de balk.
   In dezelfde letter en maat vallen ze allebei weg, dus de titel gaat
   hier terug naar de serif */
.lst-titel {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.015em;
}

/* ============================================================
   FOOTER WEER OMGEKEERD: licht op donker
   De rest van de site is beige met bruine tekst; de footer sluit de
   pagina af met het omgekeerde, zoals in het oorspronkelijke ontwerp.
   ============================================================ */
.Footer-module__3hUVsW__footer {
  background: #231a14;
  color: #f0e8da;
  --cream: #f0e8da;
  --sand: #e4d5b5;
  --cream-dim: #9a8d7a;
  --line: rgba(240, 232, 218, 0.14);
  --line-strong: rgba(240, 232, 218, 0.32);
}
.Footer-module__3hUVsW__bottom {
  border-top-color: rgba(240, 232, 218, 0.16);
}
/* de kolomteksten in de footer haalden hun kleur uit de donkere
   variant, die op de donkere achtergrond wegvalt */
.Footer-module__3hUVsW__footer {
  --cream-dark: #e4d5b5;
}

/* spamvangertje: alleen zichtbaar voor bots, niet voor bezoekers */
.ct-bot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* op telefoon passen twee kaarten van minimaal 360 breed niet naast
   elkaar in 375 pixels; ze gaan daar onder elkaar en de sectie krijgt
   smallere marges */
@media (max-width: 700px) {
  html.snap-home .loc-section {
    padding-left: 24px;
    padding-right: 24px;
  }
  .loc-grid {
    grid-template-columns: 1fr;
  }
}

/* op telefoon toont het fotoraster alleen de grote foto, maar hield
   het wel twee kolommen aan; daardoor bleef de rechterhelft leeg.
   Eén kolom, en de foto krijgt een normale liggende verhouding */
@media (max-width: 899px) {
  .lst-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    margin-bottom: 36px;
  }
  .lst-foto-groot {
    grid-row: auto;
    aspect-ratio: 4 / 3;
  }
}

/* op telefoon staat alleen de knop nog in de zoekbalk, maar het witte
   kader rekte door tot beide schermranden. Nu krimpt het kader mee met
   de knop en staat het netjes in het midden */
@media (max-width: 900px) {
  .bk-bar {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    margin: 0;
    width: max-content;
    max-width: calc(100% - 32px);
    border-radius: 999px;
  }
  .bk-submit {
    white-space: nowrap;
  }
}

/* de knop rechtsboven woog op telefoon zwaarder dan het logo, waardoor
   de balk scheef oogde; iets kleiner en strakker */
@media (max-width: 640px) {
  .Navigation-module__yDraKW__cta {
    padding: 7px 12px;
  }
  .Navigation-module__yDraKW__cta::after {
    font-size: 9px;
    letter-spacing: 0.1em;
  }
}

/* de footer werd op telefoon één lange sliert; de kolommen staan nu
   twee naast elkaar, dat scheelt de helft in hoogte */
@media (max-width: 768px) {
  .Footer-module__3hUVsW__columns {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px 24px;
  }
  .Footer-module__3hUVsW__top {
    gap: 34px;
  }
  .Footer-module__3hUVsW__footer {
    padding: 46px 24px 26px;
  }
  .Footer-module__3hUVsW__bottom {
    margin-top: 32px;
  }
}

/* het drieluik: liggend op groot scherm, staand op telefoon. Anders
   snijdt een 16:9-beeld op een staand scherm weg tot alleen het
   middelste paneel */
.hero-collab {
  background-image: url("../images/hero-collaborations.jpg");
}
@media (max-width: 700px) {
  .hero-collab {
    background-image: url("../images/hero-collaborations-mobiel.jpg");
  }
}

/* op telefoon staat er alleen nog een knop in de zoekbalk, dus het
   witte kader eromheen kan weg: je ziet enkel de terracotta knop */
@media (max-width: 900px) {
  .bk-bar {
    background: none;
    box-shadow: none;
    padding: 0;
  }
  .bk-submit {
    box-shadow: 0 18px 40px -14px rgba(26, 20, 16, 0.55);
  }
}

/* de titel op de beschikbaarheidspagina staat vlak onder het logo en
   botst in dezelfde letter met de balk erboven, dus terug naar de serif */
.bs-titel {
  font-family: var(--serif);
  font-weight: 300;
  letter-spacing: -0.015em;
}