/* =========================================================================
   Bosrank 55, Assen  ·  css/style.css

   Opbouw van dit bestand:
     1.  Lettertypes
     2.  Ontwerpvariabelen (kleur, ruimte, typografie)
     3.  Basis en hulpmiddelen
     4.  Animatie bij het scrollen
     5.  Knoppen
     6.  Navigatie
     7.  Hero
     8.  Kerncijfers
     9.  Tekstsecties en foto's in het verhaal
     10. Gesplitste sectie (keuken)
     11. Showcase (tuin)
     12. Kamerraster
     13. Comfort
     14. Woninggegevens
     15. Galerij
     16. Oproep tot actie en voettekst
     17. Lightbox
     18. Cookiemelding (alleen zichtbaar met een analytics-id)

   Het ontwerp is mobile-first: de basisregels gelden voor telefoons,
   de media queries daaronder verruimen het naar tablet en desktop.
   ========================================================================= */


/* 1. LETTERTYPES ---------------------------------------------------------

   Dezelfde aanpak als apple.com: op een Mac, iPhone of iPad pakt de browser
   het systeemlettertype San Francisco (SF Pro), precies wat Apple zelf
   gebruikt. Dat lettertype mag je niet meeleveren op een website, dus voor
   Windows en Android staat Inter lokaal in /fonts. Die twee lijken sterk op
   elkaar: allebei strak, hoge x-hoogte, neutraal.

   Inter heeft een as voor optische grootte (opsz 14 tot 32). Daardoor
   krijgen grote koppen vanzelf een strakkere, smallere snit, net als
   SF Pro Display. Dat regelt de browser zelf via font-optical-sizing. */

@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* 2. ONTWERPVARIABELEN --------------------------------------------------- */

:root {
  /* Kleuren. Gebroken wit en zand als ondergrond, warm antraciet voor tekst,
     een rustig natuurlijk groen als enige accent. De foto's geven de kleur. */
  --paper:    #fbf9f5;
  --paper-2:  #f2ede4;
  --sand:     #e7dfd1;
  --ink:      #232420;
  --ink-2:    #55574d;
  --ink-3:    #6a6c62;   /* 5,1:1 op --paper en 4,6:1 op --paper-2, dus ook klein leesbaar */
  --moss:     #47543f;
  --moss-2:   #5c6b52;

  /* De actiekleur van Funda, afgelezen van hun eigen knop "Neem contact op",
     met witte letters erop zoals Funda die knop ook opmaakt.
     Let op: wit op dit oranje haalt 2,1:1 contrast. Wil je de knop beter
     leesbaar maken met behoud van de witte letters, zet --funda dan op een
     diepere tint, bijvoorbeeld #e07800 (3,1:1) of #b06000 (4,7:1). */
  --funda:      #ff9b21;
  --funda-dark: #ea8608;
  --line:     rgba(35, 36, 32, .13);
  --line-2:   rgba(35, 36, 32, .08);

  /* Een lettertype voor de hele site. -apple-system staat vooraan, zodat een
     Mac of iPhone het echte SF Pro pakt; de rest krijgt Inter uit /fonts. */
  --font-body: -apple-system, BlinkMacSystemFont, 'Inter', 'Segoe UI', Roboto,
               'Helvetica Neue', Arial, sans-serif;
  --font-display: var(--font-body);

  /* Maten die met het scherm meeschalen */
  --gutter: clamp(1.25rem, 5vw, 3.5rem);
  --measure: 40rem;    /* leesbreedte van de tekstkolom  */
  --wide: 64rem;       /* breedte van de grote foto's    */

  --space-sec: clamp(4.5rem, 11vw, 9rem);   /* ruimte tussen de secties */
  --space-blk: clamp(1.75rem, 4vw, 2.75rem); /* ruimte tussen blokken   */

  --nav-h: 4.25rem;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --radius: 2px;
}

@media (min-width: 64rem) {
  :root { --nav-h: 5.25rem; }
}


/* 3. BASIS --------------------------------------------------------------- */

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

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: clamp(1rem, .95rem + .28vw, 1.0938rem);
  line-height: 1.68;
  font-weight: 400;
  letter-spacing: -.011em;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

body.is-locked { overflow: hidden; }

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

a { color: inherit; }

/* Koppen in halfvet met strakke letterafstand: de opmaak die Apple gebruikt
   en die dit lettertype op groot formaat op zijn best laat uitkomen. */
h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.028em;
  text-wrap: balance;
  margin: 0;
}

h2 {
  font-size: clamp(1.85rem, 1.2rem + 2.6vw, 3.05rem);
  margin-bottom: .7em;
}

h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.4rem);
  letter-spacing: -.02em;
  margin-bottom: .6em;
}

p { margin: 0 0 1.35em; }
p:last-child { margin-bottom: 0; }

/* Kleine bovenkop boven een sectiekop */
.eyebrow {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 1.25em;
}
.eyebrow--light {
  color: #fff;
  text-shadow: 0 1px 3px rgba(20, 21, 18, .75), 0 2px 18px rgba(20, 21, 18, .55);
}

/* Eerste alinea van een sectie: iets groter en rustiger */
.lead {
  font-size: clamp(1.15rem, 1.05rem + .55vw, 1.4rem);
  line-height: 1.52;
  letter-spacing: -.018em;
  color: var(--ink);
}

.quote {
  margin: clamp(2.5rem, 6vw, 4rem) 0;
  padding: 0;
  border: 0;
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 1.05rem + 1.35vw, 1.9rem);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.026em;
  color: var(--moss);
  text-wrap: balance;
}

/* Zichtbaar alleen voor schermlezers, tot je ernaartoe tabt */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--ink);
  color: var(--paper);
  padding: .75rem 1.25rem;
  font-size: .875rem;
}
.skip-link:focus { left: .5rem; top: .5rem; }

:focus-visible {
  outline: 2px solid var(--moss);
  outline-offset: 3px;
}


/* 4. ANIMATIE BIJ HET SCROLLEN ------------------------------------------- */

/* Alles is standaard zichtbaar. Pas als JavaScript werkt (dan staat de klasse
   "js" op <html>) wordt het verborgen en laten we het bij het scrollen
   binnenkomen. Zo blijft de pagina leesbaar als JavaScript niet laadt. */

.js .reveal {
  opacity: 0;
  transform: translateY(1.25rem);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in {
  opacity: 1;
  transform: none;
}

/* Foto's komen heel licht ingezoomd binnen en zakken terug naar normaal */
.js .reveal picture { display: block; overflow: hidden; }
.js .reveal picture img {
  transform: scale(1.045);
  transition: transform 1.6s var(--ease);
  transition-delay: var(--delay, 0ms);
}
.js .reveal.is-in picture img { transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .js .reveal picture img { transform: none; transition: none; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}


/* 5. KNOPPEN ------------------------------------------------------------- */

.btn {
  display: inline-block;
  padding: .95rem 1.9rem;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  transition: background-color .35s var(--ease), color .35s var(--ease),
              border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

/* De bezichtigingsknop in de Funda-kleur, met witte letters, precies zoals
   Funda de knop zelf opmaakt. Dat is de enige felle kleur op de site: alleen
   op de knoppen, zodat de rest van de pagina rustig blijft. */
.btn--primary {
  background: var(--funda);
  color: #fff;
  border-color: var(--funda);
  font-weight: 600;
}
.btn--primary:hover { background: var(--funda-dark); border-color: var(--funda-dark); }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .55); }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

/* Dezelfde knop, maar dan in de donkere sectie onderaan. Aparte klasse zodat
   je die desgewenst los kunt aanpassen. */
.btn--light {
  background: var(--funda);
  color: #fff;
  border-color: var(--funda);
  font-weight: 600;
}
.btn--light:hover { background: var(--funda-dark); border-color: var(--funda-dark); }


/* 6. NAVIGATIE ----------------------------------------------------------- */

.nav {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  color: #fff;
  transition: background-color .4s var(--ease), color .4s var(--ease),
              box-shadow .4s var(--ease);
}

/* Zodra je voorbij de hero scrolt wordt de balk licht */
.nav.is-scrolled {
  background: rgba(251, 249, 245, .93);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line-2);
}

.nav__inner {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1.5rem;
}

.nav__brand {
  text-decoration: none;
  display: flex;
  align-items: baseline;
  gap: .55rem;
  white-space: nowrap;
}
.nav__brand-name {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: -.022em;
}
.nav__brand-city {
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  opacity: .7;
}

.nav__links { display: none; }

.nav__cta { position: relative; }

/* Menuknop op mobiel */
.nav__toggle {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: none;
  border: 0;
  padding: .7rem 0;
  min-height: 44px;
  color: inherit;
  font: inherit;
  font-size: .8rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
}
.nav__burger {
  display: block;
  width: 22px;
  height: 10px;
  position: relative;
}
.nav__burger i {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transition: transform .35s var(--ease), opacity .25s var(--ease);
}
.nav__burger i:first-child { top: 0; }
.nav__burger i:last-child { bottom: 0; }

.nav.is-open .nav__burger i:first-child { transform: translateY(4.5px) rotate(45deg); }
.nav.is-open .nav__burger i:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Uitgeklapt menu op mobiel */
@media (max-width: 63.999rem) {
  .nav.is-open {
    background: var(--ink);
    color: var(--paper);
    box-shadow: none;
  }
  .nav__links {
    position: fixed;
    inset: var(--nav-h) 0 0 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .35rem;
    padding: 0 var(--gutter) 6rem;
    background: var(--ink);
    color: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-.75rem);
    transition: opacity .35s var(--ease), transform .35s var(--ease), visibility .35s;
  }
  .nav.is-open .nav__links {
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav__links a {
    font-family: var(--font-display);
    font-size: clamp(1.7rem, 7.5vw, 2.35rem);
    font-weight: 600;
    letter-spacing: -.03em;
    line-height: 1.55;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid rgba(251, 249, 245, .12);
    padding: .35em 0;
  }
  .nav__links a:last-child { border-bottom: 0; }
  .nav__links a[aria-current="true"] { color: var(--sand); }
}

/* Menu op desktop */
@media (min-width: 64rem) {
  .nav__toggle { display: none; }
  .nav__links {
    display: flex;
    align-items: baseline;
    gap: clamp(1.5rem, 2.5vw, 2.5rem);
  }
  .nav__links a {
    text-decoration: none;
    font-size: .875rem;
    letter-spacing: .02em;
    position: relative;
    padding-bottom: .25rem;
  }
  /* Rustig streepje onder de link waar je nu bent, of waar je overheen gaat */
  .nav__links a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: currentColor;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s var(--ease);
  }
  .nav__links a:hover::after,
  .nav__links a[aria-current="true"]::after { transform: scaleX(1); }

  .nav__links .nav__cta {
    border: 1px solid currentColor;
    border-radius: var(--radius);
    padding: .55rem 1.1rem;
    transition: background-color .35s var(--ease), color .35s var(--ease);
  }
  .nav__links .nav__cta::after { display: none; }
  .nav__links .nav__cta:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
  .nav:not(.is-scrolled) .nav__links .nav__cta:hover { background: #fff; color: var(--ink); border-color: #fff; }
}


/* 7. HERO ---------------------------------------------------------------- */

.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: -8% 0 -8% 0;   /* extra hoogte, zodat de parallax geen rand toont */
  z-index: -2;
  will-change: transform;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
}
/* Op een telefoon wordt een aparte, staande uitsnede geladen (zie index.html).
   Die is al op de woning gesneden, dus hier gewoon centreren. */
@media (max-width: 47.999rem) {
  .hero__media img { object-position: center center; }
  /* De extra hoogte is er alleen voor de parallax, en die staat op een
     telefoon uit. Weglaten scheelt inzoomen op de foto. */
  .hero__media { inset: 0; }
}

/* Donker verloop zodat de tekst altijd leesbaar is */
.hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(to bottom, rgba(20, 21, 18, .5) 0%, rgba(20, 21, 18, 0) 32%),
    linear-gradient(to top, rgba(20, 21, 18, .84) 0%, rgba(20, 21, 18, .5) 36%, rgba(20, 21, 18, 0) 70%);
}

.hero__body {
  width: 100%;
  max-width: 84rem;
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(5rem, 14vh, 9rem);
}

.hero__title {
  font-size: clamp(2.3rem, 1.25rem + 4.9vw, 5rem);
  line-height: 1.05;
  letter-spacing: -.038em;
  max-width: 16em;
  margin-bottom: .5em;
  text-shadow: 0 1px 24px rgba(20, 21, 18, .3);
}

.hero__sub {
  max-width: 34rem;
  font-size: clamp(1rem, .95rem + .35vw, 1.175rem);
  line-height: 1.65;
  color: rgba(255, 255, 255, .92);
  margin-bottom: 2.25rem;
  text-shadow: 0 1px 16px rgba(20, 21, 18, .35);
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .85rem;
  margin: 0;
}

/* Klein pijltje onderaan de hero */
.hero__scroll {
  position: absolute;
  left: 50%;
  bottom: 1.75rem;
  transform: translateX(-50%);
  width: 2.5rem;
  height: 2.5rem;
  display: none;
  align-items: center;
  justify-content: center;
}
.hero__scroll span {
  width: 10px;
  height: 10px;
  border-right: 1px solid rgba(255, 255, 255, .8);
  border-bottom: 1px solid rgba(255, 255, 255, .8);
  transform: rotate(45deg);
  animation: nudge 2.6s var(--ease) infinite;
}
@keyframes nudge {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: .55; }
  50%      { transform: rotate(45deg) translate(3px, 3px); opacity: 1; }
}
@media (min-width: 64rem) and (min-height: 40rem) {
  .hero__scroll { display: flex; }
}


/* 8. KERNCIJFERS --------------------------------------------------------- */

.facts {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: var(--nav-h);
}
.facts__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2.75rem, 6vw, 4.5rem) var(--gutter);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.75rem, 5vw, 3rem);
}
@media (min-width: 48rem) {
  .facts__inner { grid-template-columns: repeat(4, 1fr); }
}

.facts__item {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
/* Dunne scheidingslijn in plaats van een kaart */
@media (min-width: 48rem) {
  .facts__item + .facts__item {
    padding-left: clamp(1.75rem, 4vw, 3rem);
    margin-left: calc(-1 * clamp(1.75rem, 4vw, 3rem) / 2);
    border-left: 1px solid var(--line);
  }
}

.facts__value {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -.032em;
}
.facts__label {
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}


/* 9. TEKSTSECTIES EN FOTO'S IN HET VERHAAL -------------------------------

   De opbouw is bewust eenvoudig:
     .section        tekstkolom, gecentreerd op de leesbreedte
     .fig--wide      foto die breder is dan de tekst
     .fig--full      foto over de volle schermbreedte
   Zo wisselen tekst en beeld elkaar af zonder dat er blokken of kaarten
   nodig zijn.                                                            */

.section {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--space-sec) var(--gutter);
  scroll-margin-top: var(--nav-h);
}
.section--airy { padding-block: clamp(5.5rem, 13vw, 11rem); }

/* Alles binnen een sectie staat standaard op leesbreedte */
.section > * {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}
/* Behalve de brede elementen */
.section > .duo,
.section > .fig--wide,
.section > .rooms { max-width: none; }

/* Twee opeenvolgende secties zonder foto ertussen niet dubbel laten ademen */
.section + .section { padding-top: 0; }

/* Foto's ------------------------------------------------------------- */

.fig { margin: 0; }

.fig img {
  width: 100%;
  border-radius: var(--radius);
}

.fig figcaption {
  margin-top: .9rem;
  font-size: .8125rem;
  line-height: 1.6;
  color: var(--ink-3);
  letter-spacing: .01em;
}

/* Brede foto: breekt uit de tekstkolom, blijft binnen de sectie */
.fig--wide {
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
/* Als hij los tussen twee secties staat, zelf centreren */
main > .fig--wide {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
  margin-block: 0;
}

/* Beeldvullende foto over de hele breedte */
main > .fig--full {
  margin: 0;
  scroll-margin-top: var(--nav-h);
}
main > .fig--full img { border-radius: 0; }
main > .fig--full figcaption {
  max-width: var(--wide);
  margin: .9rem auto 0;
  padding-inline: var(--gutter);
}

/* Twee foto's naast elkaar */
.duo {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.5rem);
  margin-block: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 40rem) {
  .duo { grid-template-columns: 1fr 1fr; align-items: start; }
}


/* 10. GESPLITSTE SECTIE (KEUKEN) ----------------------------------------

   Op desktop blijft de tekst staan terwijl de foto's erlangs schuiven.
   Op mobiel gewoon onder elkaar.                                       */

.split {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--space-sec) var(--gutter);
  scroll-margin-top: var(--nav-h);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
}

.split__media {
  display: grid;
  gap: clamp(.75rem, 2vw, 1.5rem);
}

@media (min-width: 64rem) {
  .split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr);
    gap: clamp(3rem, 6vw, 5rem);
    align-items: start;
  }
  .split__sticky {
    position: sticky;
    top: calc(var(--nav-h) + 3.5rem);
  }
}


/* 11. SHOWCASE (TUIN) ---------------------------------------------------

   Bijna schermvullende foto met de kop eroverheen.                     */

.showcase {
  position: relative;
  min-height: 78vh;
  min-height: 78svh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  color: #fff;
  isolation: isolate;
  scroll-margin-top: 0;
}
.showcase__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.showcase__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.showcase::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(to top, rgba(20, 21, 18, .82) 0%,
                                      rgba(20, 21, 18, .4) 44%,
                                      rgba(20, 21, 18, 0) 74%);
}
.showcase__body {
  width: 100%;
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter) clamp(3rem, 8vw, 5rem);
}
.showcase__title {
  font-size: clamp(1.95rem, 1.2rem + 3.3vw, 3.85rem);
  letter-spacing: -.034em;
  margin-bottom: 0;
  text-shadow: 0 1px 24px rgba(20, 21, 18, .3);
}


/* 12. KAMERRASTER -------------------------------------------------------

   Verspringend raster: de middelste kolom zakt iets weg, zodat het
   geen strak blok wordt.                                               */

.rooms {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.25rem);
  scroll-margin-top: var(--nav-h);
}
@media (min-width: 40rem) {
  .rooms { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 64rem) {
  .rooms { grid-template-columns: repeat(3, 1fr); }
  /* De tweede en derde kolom zakken iets weg, zodat het geen strak blok wordt.
     De verspringing is per kolom, dus hij loopt door over alle rijen. */
  .rooms > .rooms__b,
  .rooms > .rooms__e,
  .rooms > .rooms__h { margin-top: clamp(2rem, 5vw, 4rem); }
  .rooms > .rooms__c,
  .rooms > .rooms__f { margin-top: clamp(1rem, 2.5vw, 2rem); }
}


/* 12b. PLATTEGRONDEN ----------------------------------------------------

   Drie staande tekeningen naast elkaar. Het zijn documenten, geen foto's,
   dus ze staan op wit met een haarlijn eromheen in plaats van beeldvullend.
   Klikken opent dezelfde lightbox als de galerij.                        */

.plans {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  gap: clamp(1rem, 2.5vw, 1.75rem);
  scroll-margin-top: var(--nav-h);
}
@media (min-width: 40rem) {
  .plans { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

.plan {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: zoom-in;
}
.plan picture {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
.plan img {
  width: 100%;
  transition: transform .7s var(--ease);
}
.plan:hover img { transform: scale(1.02); }

.plan__label {
  display: block;
  margin-top: .9rem;
  font-size: .8125rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.plans__bron {
  max-width: var(--wide);
  margin: clamp(1.5rem, 3vw, 2.25rem) auto 0;
  padding: 0 var(--gutter);
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-3);
}


/* 13. COMFORT ----------------------------------------------------------- */

.comfort {
  background: var(--paper-2);
  margin-top: var(--space-sec);
}
.comfort__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--space-sec) var(--gutter);
}
.comfort__inner > .eyebrow,
.comfort__inner > h2 {
  max-width: var(--measure);
  margin-left: auto;
  margin-right: auto;
}

.comfort__list {
  list-style: none;
  margin: clamp(2rem, 5vw, 3rem) 0 0;
  padding: 0;
  max-width: var(--measure);
  margin-inline: auto;
  border-top: 1px solid var(--line);
}
.comfort__list li {
  border-bottom: 1px solid var(--line);
  padding: 1.15rem .25rem;
  font-family: var(--font-display);
  font-size: clamp(1.05rem, .95rem + .6vw, 1.35rem);
  font-weight: 500;
  letter-spacing: -.018em;
}


/* 14. WONINGGEGEVENS ---------------------------------------------------- */

.specs {
  background: var(--paper-2);
  scroll-margin-top: var(--nav-h);
}
.specs__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--space-sec) var(--gutter);
}
.specs__inner > .eyebrow,
.specs__inner > h2 {
  max-width: var(--measure);
  margin-inline: auto;
}

.specs__cols {
  display: grid;
  gap: 0 clamp(2rem, 5vw, 4rem);
  margin-top: clamp(1.5rem, 4vw, 2.5rem);
}
@media (min-width: 48rem) {
  .specs__cols { grid-template-columns: 1fr 1fr; align-items: start; }
}

.specs__list { margin: 0; }
.specs__list > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: .1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 30rem) {
  .specs__list > div {
    grid-template-columns: 10rem 1fr;
    gap: 1rem;
    align-items: baseline;
  }
}
.specs__list dt {
  font-size: .8125rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.specs__list dd {
  margin: 0;
  font-size: .9375rem;
  line-height: 1.6;
}

.specs__note {
  margin-top: clamp(2rem, 5vw, 3rem);
  max-width: var(--measure);
  margin-inline: auto;
  font-size: .8125rem;
  line-height: 1.7;
  color: var(--ink-3);
}
.specs__note a { color: var(--moss); }


/* Lijstje "in de buurt" bij de locatiesectie */
.nearby {
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
}
.nearby__title {
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-family: var(--font-body);
  font-weight: 500;
  color: var(--ink-3);
  margin-bottom: 1.25rem;
}
.nearby__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nearby__list li {
  padding: .7rem 0;
  border-bottom: 1px solid var(--line-2);
  font-size: .9375rem;
  line-height: 1.6;
}
.nearby__map { margin: 1.5rem 0 0; }
.nearby__map a {
  font-size: .9375rem;
  color: var(--moss);
  text-underline-offset: .25em;
}


/* 15. GALERIJ ----------------------------------------------------------- */

.gallery {
  max-width: var(--wide);
  margin: 0 auto;
  padding: var(--space-sec) var(--gutter);
  scroll-margin-top: var(--nav-h);
}
.gallery__head {
  max-width: var(--measure);
  margin: 0 auto clamp(2rem, 5vw, 3rem);
}

.gallery__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(.5rem, 1.5vw, 1rem);
}
@media (min-width: 48rem) {
  .gallery__grid { grid-template-columns: repeat(3, 1fr); }
}

.gallery__item {
  position: relative;
  display: block;
  padding: 0;
  border: 0;
  background: var(--sand);
  border-radius: var(--radius);
  overflow: hidden;
  cursor: zoom-in;
  aspect-ratio: 3 / 2;
}
.gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease), opacity .4s var(--ease);
}
.gallery__item:hover img { transform: scale(1.045); }

.gallery__noscript {
  font-size: .875rem;
  color: var(--ink-3);
  max-width: var(--measure);
  margin-inline: auto;
}


/* 15b. KLEINE OPROEP TUSSEN DE SECTIES ----------------------------------

   Een rustige uitnodiging halverwege het verhaal: een haarlijn, een korte
   regel en de knop. Bewust geen gekleurd blok, zodat het niet als een
   advertentie tussen het verhaal gaat staan.                            */

.cta-inline {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.25rem) var(--gutter);
}
.cta-inline__inner {
  max-width: var(--measure);
  margin: 0 auto;
  padding-top: clamp(1.75rem, 4vw, 2.5rem);
  border-top: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.15rem;
}
@media (min-width: 40rem) {
  .cta-inline__inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1.75rem;
  }
}
.cta-inline__text {
  margin: 0;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.25rem);
  line-height: 1.4;
  letter-spacing: -.018em;
  color: var(--ink);
  text-wrap: balance;
}
.cta-inline .btn { flex: none; }

/* Dezelfde regel, maar dan los binnen een sectie die al een eigen kader heeft */
.cta-inline__inner--los { margin-top: clamp(2rem, 4vw, 3rem); }


/* 16. OPROEP TOT ACTIE EN VOETTEKST -------------------------------------- */

.cta {
  background: var(--ink);
  color: var(--paper);
  scroll-margin-top: var(--nav-h);
}
.cta__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: clamp(5rem, 13vw, 9rem) var(--gutter);
  text-align: center;
}
.cta__title {
  font-size: clamp(1.85rem, 1.2rem + 2.75vw, 3.3rem);
  letter-spacing: -.032em;
  margin-bottom: .55em;
}
.cta__text {
  max-width: 32rem;
  margin: 0 auto 2.5rem;
  color: rgba(251, 249, 245, .78);
}
.cta__meta {
  margin-top: 2.75rem;
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(251, 249, 245, .58);
}

.footer {
  background: var(--ink);
  color: rgba(251, 249, 245, .5);
  border-top: 1px solid rgba(251, 249, 245, .1);
}
.footer__inner {
  max-width: var(--wide);
  margin: 0 auto;
  padding: 2.75rem var(--gutter) 3.25rem;
  display: grid;
  gap: 1rem;
}
@media (min-width: 48rem) {
  .footer__inner {
    grid-template-columns: auto 1fr;
    gap: 3rem;
    align-items: start;
  }
}
.footer__brand {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: -.02em;
  color: rgba(251, 249, 245, .85);
  margin: 0;
  white-space: nowrap;
}
.footer__note {
  margin: 0;
  font-size: .8125rem;
  line-height: 1.7;
  max-width: 44rem;
}
.footer__note a { color: rgba(251, 249, 245, .8); }


/* 17. LIGHTBOX ----------------------------------------------------------- */

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 19, 16, .94);
  cursor: zoom-out;
}

.lightbox__figure {
  position: relative;
  margin: 0;
  max-width: min(100%, 96rem);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .9rem;
}
.lightbox__stage {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}
.lightbox__stage img {
  max-width: 100%;
  max-height: calc(100vh - 9rem);
  max-height: calc(100svh - 9rem);
  width: auto;
  object-fit: contain;
  border-radius: var(--radius);
}
.lightbox__caption {
  margin: 0;
  color: rgba(251, 249, 245, .72);
  font-size: .8125rem;
  text-align: center;
  max-width: 40rem;
}

.lightbox__btn {
  position: absolute;
  z-index: 2;
  background: rgba(251, 249, 245, .1);
  border: 0;
  color: var(--paper);
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s var(--ease);
}
.lightbox__btn:hover { background: rgba(251, 249, 245, .22); }
.lightbox__btn--close { top: clamp(.75rem, 2vw, 1.5rem); right: clamp(.75rem, 2vw, 1.5rem); }
.lightbox__btn--prev { left: clamp(.5rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); }
.lightbox__btn--next { right: clamp(.5rem, 2vw, 1.75rem); top: 50%; transform: translateY(-50%); }

.lightbox__count {
  position: absolute;
  bottom: clamp(.75rem, 2vw, 1.5rem);
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-size: .75rem;
  letter-spacing: .14em;
  color: rgba(251, 249, 245, .5);
}

/* Op smalle schermen de pijlen onderaan, zodat ze de foto niet bedekken */
@media (max-width: 40rem) {
  .lightbox__btn--prev { left: calc(50% - 4.25rem); top: auto; bottom: .75rem; transform: none; }
  .lightbox__btn--next { right: calc(50% - 4.25rem); top: auto; bottom: .75rem; transform: none; }
  .lightbox__count { bottom: 4.5rem; }
  .lightbox__stage img { max-height: calc(100svh - 13rem); }
}


/* 18. COOKIEMELDING ------------------------------------------------------

   Deze balk verschijnt alleen als er in js/main.js daadwerkelijk een
   analytics-id is ingevuld. Staat er niets, dan wordt er ook niets
   geladen en ziet de bezoeker geen melding.                            */

.consent {
  position: fixed;
  left: clamp(.75rem, 3vw, 1.5rem);
  right: clamp(.75rem, 3vw, 1.5rem);
  bottom: clamp(.75rem, 3vw, 1.5rem);
  z-index: 140;
  max-width: 34rem;
  background: var(--ink);
  color: rgba(251, 249, 245, .8);
  padding: 1.5rem;
  border-radius: var(--radius);
  box-shadow: 0 20px 60px rgba(18, 19, 16, .3);
  font-size: .875rem;
  line-height: 1.65;
  transform: translateY(1rem);
  opacity: 0;
  transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.consent.is-in { opacity: 1; transform: none; }
.consent p { margin: 0 0 1.1rem; }
.consent__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.consent__btn {
  font: inherit;
  padding: .6rem 1.2rem;
  border-radius: var(--radius);
  border: 1px solid rgba(251, 249, 245, .35);
  background: none;
  color: var(--paper);
  cursor: pointer;
  transition: background-color .3s var(--ease), color .3s var(--ease);
}
.consent__btn--yes { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.consent__btn--yes:hover { background: var(--sand); border-color: var(--sand); }
.consent__btn--no:hover { background: rgba(251, 249, 245, .12); }


/* Printen: geen navigatie, geen lightbox, alles op een rij */
@media print {
  .nav, .hero__scroll, .lightbox, .consent, .cta { display: none !important; }
  .js .reveal { opacity: 1 !important; transform: none !important; }
  body { background: #fff; }
}