/* ============================================================
   Casa Syro — stijl
   Rustig en verfijnd: diepe zee, messing, oudroze lagune, dennengroen, zout
   ============================================================ */
:root {
  --ink: #13252E;
  --ink-2: #5D6B70;
  --sea: #0E3A4A;
  --sea-2: #2C6E7F;
  --gold: #B08D57;
  --gold-2: #CDB07F;
  --lagoon: #E8CFCB;
  --lagoon-deep: #A8676A;
  --pine: #2F4038;
  --foam: #E9EFED;
  --salt: #F8F5EF;
  --paper: #FFFFFF;
  --line: #E3DCD1;
  --taken: #ECE6DF;
  --danger: #A94432;
  --deep: #0E2A35;
  --light: #FAF8F4;

  --head: "Cormorant Garamond", "Cormorant", Garamond, "Hoefler Text", Baskerville, "Times New Roman", serif;
  --body: "Figtree", "Segoe UI", system-ui, sans-serif;

  --wrap: 1200px;
  --radius: 6px;
  --radius-lg: 10px;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* landschap — site.js past dit aan volgens het uur */
  --sky-top: #7DB3CC; --sky-mid: #BFDDE6; --sky-bottom: #F3EEE3;
  --orb: #FFF1CF; --orb-x: 70%; --orb-y: 30%; --stars: 0;
  --hero-text: var(--deep);
  --sea-far: #3F8AA0; --sea-near: #0E3A4A;
  --wave1: #5C9DB0; --wave2: #3B7F95; --glitter-o: .8;
  --sand-c: #E6DBC8; --dune-back: #D3C3A6; --dune-c: #BFAE8F; --pine-c: #2F4038; --trunk: #4B3C30;
  --lagoon-o: .9;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --ink: #ECF1F2; --ink-2: #A7B6BA; --salt: #0B1C23; --paper: #10252E; --line: #243B44; --foam: #16323C; --taken: #26303A; }
}
:root[data-theme="dark"] { --ink: #ECF1F2; --ink-2: #A7B6BA; --salt: #0B1C23; --paper: #10252E; --line: #243B44; --foam: #16323C; --taken: #26303A; }

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; }
body {
  margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.65;
  color: var(--ink); background: var(--salt); -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 500; line-height: 1.05; letter-spacing: -0.01em; }
h2 { font-size: clamp(2.3rem, 4.4vw, 3.6rem); }
h3 { font-size: 1.6rem; }
h4, legend { font-family: var(--body); }
p { margin: 0 0 1em; }
.wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; }
.muted { color: var(--ink-2); }
.ic { width: 1.2em; height: 1.2em; flex: none; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 3px; }
::selection { background: var(--gold-2); color: var(--deep); }

/* ---------- knoppen ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  padding: .95rem 1.6rem; border: 1px solid var(--deep); border-radius: var(--radius);
  background: var(--deep); color: var(--light);
  font: 500 .98rem/1 var(--body); letter-spacing: .01em; text-decoration: none; cursor: pointer;
  transition: background .35s var(--ease), color .35s var(--ease), border-color .35s var(--ease), transform .35s var(--ease);
}
.btn:hover { background: var(--sea-2); border-color: var(--sea-2); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn-sun { background: var(--gold); border-color: var(--gold); color: #fff; }
.btn-sun:hover { background: #9A7948; border-color: #9A7948; }
.btn-ghost { background: transparent; color: var(--ink); border-color: currentColor; }
.btn-ghost:hover { background: var(--ink); color: var(--salt); border-color: var(--ink); }
.btn-ghost-light { background: transparent; border-color: rgba(250,248,244,.55); color: var(--light); }
.btn-ghost-light:hover { background: var(--light); color: var(--deep); }
.btn-small { padding: .6rem 1.05rem; font-size: .9rem; }
.btn-block { width: 100%; }
.link-btn { background: none; border: 0; padding: 0; font: inherit; color: var(--sea-2); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

/* ---------- topbalk ---------- */
.topbar {
  position: fixed; inset: 0 0 auto; z-index: 50;
  display: flex; align-items: center; gap: 1.8rem;
  padding: 1.1rem clamp(1rem, 3.5vw, 2.8rem);
  color: var(--hero-text);
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease);
}
.topbar.is-stuck {
  padding-block: .7rem;
  background: color-mix(in srgb, var(--salt) 92%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  color: var(--ink);
  box-shadow: 0 1px 0 var(--line);
}
.brand { display: flex; align-items: center; gap: .75rem; text-decoration: none; margin-right: auto; }
.brand .emblem { width: 50px; height: 56px; transition: width .5s var(--ease), height .5s var(--ease); overflow: visible; }
.wordmark { display: grid; line-height: 1; }
.wm-name { font-family: var(--head); font-size: 1.75rem; font-weight: 600; letter-spacing: .015em; }
.wm-sub { font-size: .6rem; letter-spacing: .26em; text-transform: uppercase; opacity: .7; margin-top: .3rem; max-height: 1rem; transition: opacity .4s var(--ease), max-height .4s var(--ease), margin .4s var(--ease); }
.is-stuck .brand .emblem { width: 32px; height: 36px; }
.is-stuck .wm-sub { opacity: 0; max-height: 0; margin-top: 0; }
.brand:hover .em-sun { filter: drop-shadow(0 0 4px var(--gold-2)); }
.nav { display: flex; gap: 1.8rem; }
.nav a { position: relative; text-decoration: none; font-size: .95rem; opacity: .85; }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.nav a:hover { opacity: 1; }
.nav a:hover::after { transform: scaleX(1); }
.langs { display: flex; gap: .15rem; }
.langs a { padding: .3rem .5rem; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-decoration: none; opacity: .6; border-radius: 4px; }
.langs a:hover { opacity: 1; }
.langs a[aria-current] { opacity: 1; box-shadow: inset 0 -1.5px 0 var(--gold); border-radius: 0; }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden; padding: 0;
  /* Bewust 100vh en niet 100svh: op Android klapt de adresbalk van de browser
     weg tijdens het scrollen en wordt het venster ineens ~100 px hoger. Met svh
     bleef de hero op de kleine maat staan en verscheen er een lege kleurband
     onder de foto. Met vh vult ze altijd het hele scherm. */
  min-height: 100vh; min-height: 100lvh;
  color: var(--hero-text);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-mid) 55%, var(--sky-bottom) 100%);
  transition: background 1.2s, color 1.2s;
}
.sky { position: absolute; inset: 0; pointer-events: none; }
.stars {
  position: absolute; inset: 0 0 45% 0; opacity: var(--stars); transition: opacity 1.2s;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 8%, #fff 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 44% 26%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 61% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.6px 1.6px at 76% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 9%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 8% 40%, #fff 50%, transparent 51%), radial-gradient(1.2px 1.2px at 35% 44%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 67% 36%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 94% 38%, #fff 50%, transparent 51%);
}
@media (prefers-reduced-motion: no-preference) {
  .stars { animation: twinkle 6s ease-in-out infinite alternate; }
}
@keyframes twinkle { to { filter: brightness(.55); } }
.orb {
  position: absolute; left: var(--orb-x); top: var(--orb-y);
  width: clamp(70px, 8vw, 120px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 40% 38%, #fff 0%, var(--orb) 55%);
  box-shadow: 0 0 120px 40px color-mix(in srgb, var(--orb) 35%, transparent);
  transform: translate(-50%, -50%);
  transition: left 1.2s, top 1.2s, background 1.2s;
}
.hero-inner {
  position: relative; z-index: 5;
  width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto;
  padding: clamp(5.8rem, 13vh, 8rem) 0 calc(clamp(200px, 33vh, 340px) + .5rem);
}
.hero-copy { max-width: 44rem; }
.place { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; letter-spacing: .04em; margin-bottom: 1rem; opacity: .85; }
.place .ic { width: 1rem; height: 1rem; }
.hero h1 { font-size: clamp(2.8rem, 5.6vw, 5.1rem); line-height: .98; letter-spacing: -0.02em; margin-bottom: 1.2rem; max-width: 14ch; text-wrap: balance; }
.lead { font-size: clamp(1.02rem, 1.3vw, 1.12rem); line-height: 1.65; max-width: 40rem; margin-bottom: 1.8rem; opacity: .9; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 1.2rem 2.2rem; }
.tonight p { margin: 0 0 .5rem; font-size: .78rem; letter-spacing: .04em; opacity: .75; }
.tonight ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.tonight a {
  display: flex; align-items: center; gap: .55rem; padding: .55rem .9rem; border-radius: 999px;
  text-decoration: none; font-size: .88rem;
  background: color-mix(in srgb, #fff 16%, transparent);
  border: 1px solid color-mix(in srgb, #fff 38%, transparent);
  backdrop-filter: blur(10px);
  transition: background .35s var(--ease);
}
.tonight a:hover { background: color-mix(in srgb, #fff 30%, transparent); }
.tonight strong { font-weight: 600; }
.tonight .st { opacity: .75; }
.dot { width: .55rem; height: .55rem; border-radius: 50%; display: inline-block; background: #97A2A6; flex: none; }
[data-color="sea"] { --accent: var(--sea-2); }
[data-color="lagoon"] { --accent: var(--lagoon-deep); }
.is-free .dot { background: #6CC08B; box-shadow: 0 0 0 3px rgba(108,192,139,.28); }
@media (prefers-reduced-motion: no-preference) {
  .is-free .dot { animation: pulse 2.6s ease-in-out infinite; }
}
@keyframes pulse { 50% { box-shadow: 0 0 0 7px rgba(108,192,139,0); } }

/* landschap */
.landscape { position: absolute; left: 0; bottom: -1px; width: 100%; height: clamp(200px, 33vh, 340px); z-index: 1; display: block; }
.landscape .horizon { fill: #fff; opacity: .35; }
.landscape .glitter rect { fill: #fff; opacity: var(--glitter-o); }
.landscape .w1 path { fill: var(--wave1); opacity: .45; }
.landscape .w2 path { fill: var(--wave2); opacity: .45; }
.landscape .foam { stroke: rgba(255,255,255,.7); stroke-width: 2.5; }
.landscape .sand { fill: var(--sand-c); transition: fill 1.2s; }
.landscape .dune-back { fill: var(--dune-back); transition: fill 1.2s; }
.landscape .dune { fill: var(--dune-c); transition: fill 1.2s; }
.landscape .trunk { stroke: var(--trunk); stroke-width: 4; fill: none; stroke-linecap: round; }
.landscape .crown ellipse { fill: var(--pine-c); transition: fill 1.2s; }
.landscape .i2 .crown ellipse { opacity: .8; }
.landscape .lagoon { fill: url(#lagoonGrad); opacity: var(--lagoon-o); }
.landscape .salt { stroke: #fff; stroke-width: 2; opacity: .6; }
.landscape .lay { will-change: transform; }

/* ---------- animaties: intro en onthullen bij scrollen ---------- */
@media (prefers-reduced-motion: no-preference) {
  .landscape .waves { animation: drift 9s linear infinite; }
  .landscape .w2 { animation-duration: 14s; animation-direction: reverse; }
  .landscape .glitter { animation: shimmer 3.5s ease-in-out infinite alternate; }

  .js .hero-copy > *:not(h1) { opacity: 0; transform: translateY(26px); }
  .js .landscape .intro { opacity: 0; transform: translateY(60px); }
  .js .orb { opacity: 0; }
  .is-ready .hero-copy > *:not(h1) { opacity: 1; transform: none; transition: opacity 1.1s var(--ease), transform 1.1s var(--ease); }
  .is-ready .hero-copy > :nth-child(1):not(h1) { transition-delay: .15s; }
  .is-ready .hero-copy > :nth-child(2):not(h1) { transition-delay: .3s; }
  .is-ready .hero-copy > :nth-child(3):not(h1) { transition-delay: .5s; }
  .is-ready .hero-copy > :nth-child(4):not(h1) { transition-delay: .7s; }
  .is-ready .landscape .intro { opacity: 1; transform: none; transition: opacity 1.4s var(--ease), transform 1.6s var(--ease); }
  .is-ready .landscape .i1 { transition-delay: .1s; }
  .is-ready .landscape .i2 { transition-delay: .35s; }
  .is-ready .landscape .i3 { transition-delay: .6s; }
  .is-ready .orb { opacity: 1; transition: opacity 2s .4s ease, left 1.2s, top 1.2s; animation: rise 2.2s .2s var(--ease) both; }

  .js [data-reveal] { opacity: 0; transform: translateY(34px); transition: opacity 1s var(--ease), transform 1.1s var(--ease); }
  .js [data-reveal].in { opacity: 1; transform: none; }

}
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-120px); } }
@keyframes shimmer { from { opacity: .35; } to { opacity: 1; } }
@keyframes rise { from { transform: translate(-50%, 20%); } to { transform: translate(-50%, -50%); } }

/* ---------- secties ---------- */
section { padding: clamp(5rem, 11vw, 9rem) 0; }
.sec-head { max-width: 42rem; margin-bottom: clamp(3rem, 6vw, 5rem); }
.sec-head h2 { margin-bottom: 1rem; }
.sec-head p { color: var(--ink-2); font-size: 1.08rem; margin: 0; }

/* intro */
.intro-sec { padding-bottom: 0; }
.intro-inner { max-width: 60rem; text-align: center; }
.intro-inner h2 { font-size: clamp(2.2rem, 4.6vw, 3.8rem); max-width: 18ch; margin: 0 auto 1.4rem; text-wrap: balance; }
.intro-inner > p { color: var(--ink-2); font-size: 1.12rem; max-width: 40rem; margin: 0 auto; }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: clamp(3rem, 6vw, 4.5rem) 0 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts div { padding: 1.8rem 1rem; display: flex; flex-direction: column-reverse; gap: .3rem; }
.facts div + div { border-left: 1px solid var(--line); }
.facts dd { margin: 0; font-family: var(--head); font-size: clamp(2.4rem, 4.5vw, 3.4rem); line-height: 1; color: var(--gold); }
.facts dt { font-size: .9rem; color: var(--ink-2); }

/* ---------- appartementen ---------- */
.apt { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(2.5rem, 6vw, 6rem); align-items: center; }
.apt + .apt { margin-top: clamp(5rem, 11vw, 9rem); }
.apt-flip { grid-template-columns: 1fr 1.15fr; }
.apt-flip .gallery { order: 2; }
.gallery { position: relative; }
.gallery-main { position: relative; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 5 / 4; background: var(--foam); }
.gallery-main::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(0,0,0,.05); border-radius: inherit; pointer-events: none; }
.gallery-main img { position: relative; top: -8%; width: 100%; height: 116%; object-fit: cover; translate: 0 var(--py, 0px); scale: 1; transition: scale 1.8s var(--ease); }
.gallery-main:hover img { scale: 1.04; }
.gallery::before {
  content: ""; position: absolute; inset: 1.4rem -1.4rem -1.4rem 1.4rem; border: 1px solid var(--accent); border-radius: var(--radius-lg); opacity: .5; z-index: -1;
}
.apt-flip .gallery::before { inset: 1.4rem 1.4rem -1.4rem -1.4rem; }
.thumbs { display: flex; gap: .6rem; margin-top: .9rem; position: relative; }
.thumbs button {
  padding: 0; border: 0; border-radius: 4px; overflow: hidden; cursor: pointer; width: 84px; aspect-ratio: 5 / 4;
  background: var(--foam); opacity: .55; transition: opacity .35s var(--ease); position: relative;
}
.thumbs button::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--accent); transform: scaleX(0); transition: transform .45s var(--ease); }
.thumbs button img { width: 100%; height: 100%; object-fit: cover; }
.thumbs button:hover, .thumbs button[aria-current] { opacity: 1; }
.thumbs button[aria-current]::after { transform: scaleX(1); }

.apt-status { display: inline-flex; align-items: center; gap: .5rem; font-size: .85rem; color: var(--ink-2); margin-bottom: 1rem; }
.apt-body h3 { font-size: clamp(2.6rem, 4.6vw, 3.9rem); line-height: 1; }
.apt-addr { display: flex; align-items: center; gap: .4rem; color: var(--ink-2); margin: .7rem 0 0; font-size: .92rem; }
.apt-addr .ic { width: 1rem; height: 1rem; }
.tagline { font-family: var(--head); font-style: italic; font-size: 1.45rem; color: var(--accent); margin: 1rem 0 1.6rem; }
.specs { list-style: none; padding: 1rem 0; margin: 0 0 1.6rem; display: flex; flex-wrap: wrap; gap: .6rem 1.6rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); font-size: .95rem; }
.specs li { display: flex; align-items: center; gap: .45rem; }
.specs .ic { color: var(--accent); }
.body-copy { font-size: 1.02rem; color: var(--ink-2); max-width: 34rem; }
.amenities { list-style: none; padding: 0; margin: 1.6rem 0 2.2rem; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .65rem 1.4rem; font-size: .93rem; }
.amenities li { display: flex; align-items: center; gap: .6rem; }
.amenities .ic { color: var(--accent); }
.apt-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.2rem; }
.price { margin: 0; display: grid; }
.price strong { font-family: var(--head); font-weight: 500; font-size: 1.7rem; line-height: 1.1; }
.price span { font-size: .85rem; color: var(--ink-2); }
.license { font-size: .78rem; color: var(--ink-2); margin: 1rem 0 0; }

/* ---------- boeken ---------- */
.booking { background: var(--paper); }
.book-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: clamp(2rem, 5vw, 4.5rem); align-items: start; }
.book-steps { min-width: 0; }
.step { border: 0; margin: 0; padding: 0 0 2.4rem; min-width: 0; transition: opacity .4s var(--ease); }
.step + .step { padding-top: 2.4rem; border-top: 1px solid var(--line); }
.step:disabled { opacity: .38; }
.step legend { display: flex; align-items: center; gap: .85rem; font-family: var(--head); font-size: 1.7rem; font-weight: 500; padding: 0; margin-bottom: 1.3rem; float: left; width: 100%; }
.step legend + * { clear: both; }
.step-no { width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--gold); color: var(--gold); font: 600 .9rem/1 var(--body); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.apt-choice { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: .9rem; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice-card {
  display: flex; align-items: center; gap: 1rem; padding: 1rem 1.1rem; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--salt);
  transition: border-color .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease);
}
.choice-card strong { display: block; font-family: var(--head); font-weight: 600; font-size: 1.35rem; line-height: 1.1; }
.choice-card small { color: var(--ink-2); font-size: .85rem; }
.choice:hover .choice-card { border-color: var(--ink-2); }
.choice input:checked + .choice-card { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: var(--paper); }
.choice input:focus-visible + .choice-card { outline: 2px solid var(--gold); outline-offset: 2px; }
.choice-badge { width: 44px; height: 44px; border-radius: 50%; background: var(--accent); flex: none; display: grid; place-items: center; }
.choice-badge svg { width: 30px; height: 30px; }
.choice-badge circle { fill: var(--gold-2); }
.choice-badge path { fill: none; stroke: #fff; stroke-width: 2.5; stroke-linecap: round; }

.cal-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: .5rem 1rem; margin-bottom: .9rem; }
.cal-prompt { margin: 0; font-weight: 500; }
.calendar { position: relative; padding-top: .2rem; }
.cal-nav { position: absolute; top: -.2rem; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); cursor: pointer; display: grid; place-items: center; z-index: 2; transition: border-color .3s; }
.cal-nav:hover:not(:disabled) { border-color: var(--ink); }
.cal-nav:disabled { opacity: .3; cursor: default; }
.cal-nav.prev { left: 0; }
.cal-nav.next { right: 0; }
.cal-months { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.2rem; }
.cal-month h4 { margin: .35rem 0 1rem; text-align: center; font-family: var(--head); font-size: 1.35rem; font-weight: 500; text-transform: capitalize; }
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; }
.cal-wd { text-align: center; font-size: .72rem; color: var(--ink-2); padding-bottom: .35rem; letter-spacing: .04em; }
.cal-day { aspect-ratio: 1; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font: 500 .9rem/1 var(--body); cursor: pointer; position: relative; transition: background .25s, color .25s; }
.cal-day:hover:not(:disabled) { background: var(--foam); }
.cal-day:disabled { cursor: default; }
.cal-day:disabled:not(.is-past):not(.is-taken):not(.is-in) { opacity: .35; }
.cal-day.is-past { color: color-mix(in srgb, var(--ink-2) 45%, transparent); }
.cal-day.is-taken { color: color-mix(in srgb, var(--ink-2) 60%, transparent); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--ink-2) 50%, transparent); }
.cal-day.is-taken.can-out { text-decoration: none; color: var(--ink); }
.cal-day.is-range { background: color-mix(in srgb, var(--gold) 18%, transparent); border-radius: 0; }
.cal-day.is-in, .cal-day.is-out { background: var(--deep) !important; color: var(--light) !important; text-decoration: none; }
:root[data-theme="dark"] .cal-day.is-in, :root[data-theme="dark"] .cal-day.is-out { background: var(--gold) !important; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cal-day.is-in, :root:not([data-theme="light"]) .cal-day.is-out { background: var(--gold) !important; } }
.cal-day.is-today::after { content: ""; position: absolute; left: 50%; bottom: 14%; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); transform: translateX(-50%); }
.cal-empty { aspect-ratio: 1; }
.cal-loading { grid-column: 1 / -1; padding: 3rem 0; text-align: center; color: var(--ink-2); }
.cal-legend { list-style: none; padding: 0; margin: 1.2rem 0 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; font-size: .83rem; color: var(--ink-2); }
.cal-legend li { display: flex; align-items: center; gap: .45rem; }
.sw { width: .85rem; height: .85rem; border-radius: 50%; display: inline-block; }
.sw-free { border: 1px solid var(--line); }
.sw-taken { background: var(--taken); }
.sw-sel { background: var(--deep); }

.fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.3rem; }
.field { display: grid; gap: .4rem; font-size: .85rem; font-weight: 500; color: var(--ink-2); }
.field-wide { grid-column: 1 / -1; }
.field-guests { max-width: 12rem; }
.field input, .field select, .field textarea {
  width: 100%; font: 400 1rem/1.4 var(--body); color: var(--ink);
  padding: .8rem .9rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--salt);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); background: var(--paper); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gold) 22%, transparent); }
.check { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; cursor: pointer; }
.check input { width: 1.1rem; height: 1.1rem; margin-top: .2rem; accent-color: var(--gold); }

.summary { position: sticky; top: 100px; background: var(--deep); color: var(--light); border-radius: var(--radius-lg); padding: 1.8rem; overflow: hidden; }
.summary::before { content: ""; position: absolute; right: -60px; top: -60px; width: 180px; height: 180px; border-radius: 50%; border: 1px solid rgba(205,176,127,.35); pointer-events: none; }
.summary h3 { font-size: 1.9rem; margin-bottom: 1rem; }
.summary .muted { color: rgba(250,248,244,.65); }
.sum-apt { font-family: var(--head); font-size: 1.4rem; margin-bottom: .2rem; color: var(--gold-2); }
.sum-dates { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin: 1rem 0; }
.sum-dates div { border: 1px solid rgba(250,248,244,.15); border-radius: var(--radius); padding: .6rem .75rem; }
.sum-dates small { display: block; opacity: .65; font-size: .75rem; }
.sum-dates strong { font-weight: 500; font-size: .95rem; }
.sum-lines { list-style: none; padding: 0; margin: 0 0 1rem; font-size: .9rem; }
.sum-lines li { display: flex; justify-content: space-between; gap: 1rem; padding: .5rem 0; border-bottom: 1px solid rgba(250,248,244,.12); }
.sum-total { display: flex; justify-content: space-between; align-items: baseline; margin: .6rem 0 1.4rem; }
.sum-total span:first-child { font-size: .95rem; }
.sum-total span:last-child { font-family: var(--head); font-size: 2.1rem; color: var(--gold-2); line-height: 1; }
.summary .form-error { background: rgba(169,68,50,.2); border: 1px solid rgba(230,130,110,.45); color: #FFDCD3; border-radius: var(--radius); padding: .7rem .8rem; font-size: .88rem; }

.success { grid-column: 1 / -1; text-align: center; padding: 3rem 1rem; max-width: 36rem; margin: 0 auto; }
.success:focus { outline: none; }
.success-mark { width: 4.5rem; height: 4.5rem; border-radius: 50%; border: 1px solid var(--gold); color: var(--gold); display: grid; place-items: center; margin: 0 auto 1.4rem; }
.success-mark .ic { width: 2rem; height: 2rem; stroke-width: 1.8; }
@media (prefers-reduced-motion: no-preference) {
  .success:not([hidden]) .success-mark { animation: pop .9s var(--ease) both; }
  .success:not([hidden]) .success-mark path { stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .8s .35s var(--ease) forwards; }
}
@keyframes pop { from { transform: scale(.6); opacity: 0; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
.success h3 { font-size: 2.6rem; margin-bottom: .8rem; }
.success p { color: var(--ink-2); font-size: 1.05rem; }
.ref strong { letter-spacing: .14em; font-weight: 600; color: var(--ink); background: var(--foam); padding: .25rem .6rem; border-radius: 4px; }

/* ---------- praktisch ---------- */
.info { background: var(--pine); color: var(--light); }
.info-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 3.5rem; }
.info-grid h2 { grid-column: 1 / -1; }
.info h3 { font-size: 1.6rem; margin: 0 0 .7rem; color: var(--gold-2); }
.info h3:not(:first-child) { margin-top: 1.8rem; }
.info p { opacity: .85; }
.times { display: grid; gap: 1.5rem; align-content: start; }
.times p { margin: 0; display: grid; }
.times span { opacity: .7; font-size: .92rem; }
.times strong { font-family: var(--head); font-weight: 500; font-size: clamp(3rem, 5.5vw, 4.4rem); line-height: 1; }
.rules { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.rules li { display: flex; gap: .8rem; align-items: baseline; opacity: .9; }
.rules li::before { content: ""; width: 1.1rem; height: 1px; flex: none; background: var(--gold-2); transform: translateY(-.3rem); }

/* ---------- ligging ---------- */
.loc-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
.loc-grid h2 { margin-bottom: 1.2rem; }
.address { display: flex; gap: .5rem; align-items: center; font-weight: 500; font-size: 1.02rem; }
.address .ic { color: var(--gold); }
.loc-copy { color: var(--ink-2); max-width: 34rem; }
.distances { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 1.6rem; margin: 1.6rem 0 2.2rem; }
.distances div { border-top: 1px solid var(--line); padding: .7rem 0; display: flex; justify-content: space-between; align-items: baseline; gap: .6rem; }
.distances dt { font-size: .88rem; color: var(--ink-2); }
.distances dd { margin: 0; font-family: var(--head); font-size: 1.45rem; white-space: nowrap; }
.map { border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 10 / 7; background: var(--foam); box-shadow: 0 30px 60px -30px rgba(14,42,53,.35); }
.map iframe { width: 100%; height: 100%; border: 0; filter: saturate(.6) contrast(1.02); }

/* ---------- contact & footer ---------- */
.contact { background: var(--lagoon); color: var(--deep); }
.contact-inner { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 2rem; }
.contact h2 { margin-bottom: .6rem; }
.contact p { margin: 0; opacity: .85; max-width: 34rem; }
.contact-actions { display: flex; flex-wrap: wrap; gap: .75rem; }
.contact .btn-sun { background: var(--deep); border-color: var(--deep); color: var(--light); }
.contact .btn-sun:hover { background: var(--sea-2); border-color: var(--sea-2); }
.contact .btn-ghost-light { border-color: var(--deep); color: var(--deep); }
.contact .btn-ghost-light:hover { background: var(--deep); color: var(--light); }
.footer { background: #081B22; color: rgba(250,248,244,.7); padding: 3rem 0; font-size: .88rem; }
.footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.footer p { margin: 0; }
.footer strong { font-family: var(--head); font-weight: 600; font-size: 1.3rem; color: var(--light); }

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .nav { display: none; }
  .orb { width: 64px; }
  .apt, .apt-flip { grid-template-columns: 1fr; }
  .apt-flip .gallery { order: 0; }
  .gallery::before, .apt-flip .gallery::before { inset: 1rem -.8rem -.8rem 1rem; }
  .book-grid { grid-template-columns: 1fr; }
  .summary { position: static; }
  .info-grid { grid-template-columns: 1fr 1fr; }
  .loc-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .topbar { gap: .8rem; }
  .brand span { font-size: 1.4rem; }
  .topbar .btn-small { display: none; }
  .hero-inner { padding-bottom: calc(clamp(190px, 30vh, 280px) + 1rem); }
  .landscape { height: clamp(190px, 30vh, 280px); }
  .facts { grid-template-columns: 1fr; }
  .facts div + div { border-left: 0; border-top: 1px solid var(--line); }
  .cal-months { grid-template-columns: 1fr; }
  .fields { grid-template-columns: 1fr; }
  .amenities { grid-template-columns: 1fr; }
  .info-grid { grid-template-columns: 1fr; }
  .distances { grid-template-columns: 1fr; }
  .thumbs button { width: 70px; }
  .contact-actions .btn { flex: 1 1 auto; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition: none !important; animation: none !important; }
}
.topbar .btn-small { background: var(--gold); border-color: var(--gold); color: #fff; }
.topbar .btn-small:hover { background: #9A7948; border-color: #9A7948; }
.gallery { isolation: isolate; }


/* ============================================================
   Embleem (logo)
   ============================================================ */
.emblem { color: currentColor; }
.emblem .em-line { fill: none; stroke: var(--gold); stroke-width: 1.4; stroke-linecap: round; }
.emblem .em-arch-in { stroke-width: .8; opacity: .55; }
.emblem .em-base { stroke-width: 1.1; }
.emblem .em-sun { fill: var(--gold-2); }
.emblem .em-wave { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; }
.emblem .em-wave:nth-child(2) { opacity: .7; }
.emblem .em-wave:nth-child(3) { opacity: .45; }
.emblem .em-pine path { fill: none; stroke: currentColor; stroke-width: 1.1; stroke-linecap: round; }
.emblem .em-pine ellipse { fill: currentColor; }
.emblem .em-star { fill: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  .js .emblem .em-line, .js .emblem .em-wave { stroke-dasharray: 1; stroke-dashoffset: 1; }
  .js .emblem .em-sun { translate: 0 16px; opacity: 0; }
  .js .emblem .em-pine, .js .emblem .em-star { opacity: 0; }
  .js .emblem .em-pine { translate: 0 4px; }
  .draw-on .emblem .em-line, .emblem.draw-on .em-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease); }
  .draw-on .emblem .em-arch-in, .emblem.draw-on .em-arch-in { transition-delay: .25s; }
  .draw-on .emblem .em-base, .emblem.draw-on .em-base { transition-delay: .5s; transition-duration: 1.2s; }
  .draw-on .emblem .em-sun, .emblem.draw-on .em-sun { translate: 0 0; opacity: 1; transition: translate 1.8s .55s var(--ease), opacity 1s .55s ease; }
  .draw-on .emblem .em-wave, .emblem.draw-on .em-wave { stroke-dashoffset: 0; transition: stroke-dashoffset 1.4s var(--ease); }
  .draw-on .emblem .em-wave:nth-child(1), .emblem.draw-on .em-wave:nth-child(1) { transition-delay: .8s; }
  .draw-on .emblem .em-wave:nth-child(2), .emblem.draw-on .em-wave:nth-child(2) { transition-delay: .95s; }
  .draw-on .emblem .em-wave:nth-child(3), .emblem.draw-on .em-wave:nth-child(3) { transition-delay: 1.1s; }
  .draw-on .emblem .em-pine, .emblem.draw-on .em-pine { opacity: 1; translate: 0 0; transition: opacity 1s 1.2s ease, translate 1.2s 1.2s var(--ease); }
  .draw-on .emblem .em-star, .emblem.draw-on .em-star { opacity: 1; transition: opacity 1s 1.5s ease; animation: starGlint 5s 3s ease-in-out infinite; }
  .emblem .em-waves { animation: emWaves 7s linear infinite; }
}
@keyframes emWaves { to { translate: -16px 0; } }
@keyframes starGlint { 0%, 80%, 100% { opacity: 1; } 88% { opacity: .2; } }

/* openingsgordijn */
.curtain {
  position: fixed; inset: 0; z-index: 200; display: grid; place-items: center;
  background: radial-gradient(ellipse at 50% 60%, #143A48 0%, var(--deep) 60%, #06161C 100%);
  color: var(--light); clip-path: inset(0 0 0 0);
  transition: clip-path 1.1s cubic-bezier(.76, 0, .24, 1);
}
.curtain.lift { clip-path: inset(0 0 100% 0); }
.curtain-inner { display: grid; justify-items: center; gap: 1rem; transition: opacity .6s ease, translate .9s var(--ease); }
.curtain.lift .curtain-inner { opacity: 0; translate: 0 -30px; }
.curtain .emblem { width: 120px; height: 135px; }
.curtain .wm-name { font-size: clamp(2.4rem, 6vw, 3.4rem); opacity: 0; translate: 0 12px; transition: opacity 1s .9s ease, translate 1.2s .9s var(--ease); }
.curtain .wm-sub { font-size: .7rem; opacity: 0; transition: opacity 1s 1.3s ease; max-height: none; }
.curtain.show .wm-name { opacity: 1; translate: 0 0; }
.curtain.show .wm-sub { opacity: .7; }

/* ============================================================
   Hero: diepte
   ============================================================ */
.hero::before {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 55%, rgba(4, 16, 22, .28) 100%);
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: .06; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.rays {
  position: absolute; inset: 0; opacity: var(--rays, .5); transition: opacity 1.2s;
  background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), color-mix(in srgb, var(--orb) 55%, transparent) 0, transparent 34%),
    repeating-conic-gradient(from 0deg at var(--orb-x) var(--orb-y), rgba(255,255,255,.035) 0deg 1.2deg, transparent 1.2deg 6deg);
  -webkit-mask: radial-gradient(circle at var(--orb-x) var(--orb-y), #000 0, transparent 42%);
          mask: radial-gradient(circle at var(--orb-x) var(--orb-y), #000 0, transparent 42%);
}
.clouds {
  position: absolute; left: -10%; right: -10%; height: 40%; opacity: var(--clouds, .6); transition: opacity 1.2s; filter: blur(14px);
  background-repeat: repeat-x;
}
.clouds.c1 { top: 12%; background-image:
  radial-gradient(ellipse 180px 34px at 160px 60px, var(--cloud, #fff) 0 60%, transparent 61%),
  radial-gradient(ellipse 120px 26px at 260px 46px, var(--cloud, #fff) 0 60%, transparent 61%),
  radial-gradient(ellipse 220px 30px at 760px 90px, var(--cloud, #fff) 0 60%, transparent 61%),
  radial-gradient(ellipse 140px 22px at 880px 76px, var(--cloud, #fff) 0 60%, transparent 61%);
  background-size: 1200px 100%; }
.clouds.c2 { top: 30%; opacity: calc(var(--clouds, .6) * .6); background-image:
  radial-gradient(ellipse 260px 26px at 420px 40px, var(--cloud, #fff) 0 60%, transparent 61%),
  radial-gradient(ellipse 160px 20px at 1180px 70px, var(--cloud, #fff) 0 60%, transparent 61%);
  background-size: 1600px 100%; }
.birds { position: absolute; top: 20%; left: 0; width: 90px; opacity: calc(var(--birds, .55) * .7); }
.birds svg { width: 100%; overflow: visible; }
.bird { fill: none; stroke: var(--hero-text); stroke-width: 1.6; stroke-linecap: round; transform-box: fill-box; transform-origin: center; }
.landscape .hills-far { fill: var(--hill-far, #8FB0BD); opacity: .55; }
.landscape .hills-near { fill: var(--hill-near, #7299A8); opacity: .6; }
.landscape .cape-r { fill: var(--hill-far, #8FB0BD); opacity: .45; }
.landscape .boat { opacity: var(--boat-o, .9); }
.landscape .boat .sail { fill: #FAF8F4; }
.landscape .boat .sail2 { opacity: .8; }
.landscape .boat .hull { fill: var(--deep); }
.landscape .boat .wake { stroke: #fff; stroke-width: 1; opacity: .5; }
.frond-wrap { position: absolute; bottom: -7%; z-index: 3; width: clamp(220px, 34vw, 540px); pointer-events: none; will-change: transform; }
.frond-l { left: -3%; }
.frond-r { right: -4%; transform-origin: bottom right; }
.frond-r .frond { transform: scaleX(-1); }
.frond { width: 100%; display: block; overflow: visible; }
.frond .rib { fill: none; stroke: var(--frond, #1D2C26); stroke-width: 4; stroke-linecap: round; }
.frond .leaves { fill: var(--frond, #1D2C26); }
.frond { opacity: .94; filter: drop-shadow(0 10px 18px rgba(0,0,0,.18)); }
.frond .sway { transform-origin: 0 0; }
.scroll-cue { position: absolute; left: 50%; bottom: 1.4rem; z-index: 5; width: 1px; height: 54px; background: color-mix(in srgb, #fff 35%, transparent); overflow: hidden; translate: -50% 0; }
.scroll-cue span { position: absolute; left: -1px; width: 3px; height: 16px; border-radius: 2px; background: var(--gold-2); }

@media (prefers-reduced-motion: no-preference) {
  .clouds.c1 { animation: cloudDrift 140s linear infinite; }
  .clouds.c2 { animation: cloudDrift 220s linear infinite reverse; }
  .birds { animation: glide 46s linear infinite; }
  .bird { animation: flap .9s ease-in-out infinite alternate; }
  .bird.b2 { animation-duration: .75s; animation-delay: .2s; }
  .bird.b3 { animation-duration: 1.05s; animation-delay: .4s; }
  .landscape .boat { animation: sail 110s linear infinite; }
  .frond .sway { animation: sway 8s ease-in-out infinite alternate; }
  .frond .sway-2 { animation-duration: 10s; animation-delay: -3s; }
  .scroll-cue span { animation: cue 2.4s var(--ease) infinite; }
  .rays { animation: breathe 9s ease-in-out infinite alternate; }
  .js .frond-wrap { opacity: 0; }
  .is-ready .frond-wrap { opacity: 1; transition: opacity 1.6s .9s ease; }
  .js .scroll-cue { opacity: 0; }
  .is-ready .scroll-cue { opacity: 1; transition: opacity 1s 1.6s ease; }
}
@keyframes cloudDrift { to { transform: translateX(-1200px); } }
@keyframes glide { from { transform: translate(-15vw, 20px); } 50% { transform: translate(55vw, -30px); } to { transform: translate(115vw, 10px); } }
@keyframes flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }
@keyframes sail { from { transform: translateX(-60px); } to { transform: translateX(1500px); } }
@keyframes sway { from { transform: rotate(-2.5deg); } to { transform: rotate(2deg); } }
@keyframes cue { 0% { top: -16px; } 100% { top: 54px; } }
@keyframes breathe { from { filter: brightness(.9); } to { filter: brightness(1.15); } }

/* ============================================================
   Titels woord per woord, galerij, telling, lijsten
   ============================================================ */
.split .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .1em; margin-bottom: -.1em; }
.split .w > span { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
  .js .split .w > span { transform: translateY(110%); transition: transform 1.2s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
  .js .in .split .w > span, .js .split.in .w > span, .js .is-ready .split .w > span { transform: none; }
  .js .hero h1.split { --d: 250ms; }

  .js .apt .gallery-main { clip-path: inset(0 0 100% 0); }
  .js .apt.in .gallery-main { clip-path: inset(0 0 0 0); transition: clip-path 1.5s cubic-bezier(.76, 0, .24, 1) .1s; }
  .js .apt:not(.in) .gallery-main img { scale: 1.2; }
  .js .apt .gallery::before { opacity: 0; translate: -14px -14px; }
  .js .apt.in .gallery::before { opacity: .5; translate: 0 0; transition: opacity 1.2s .9s ease, translate 1.4s .9s var(--ease); }
  .js .apt .thumbs button { opacity: 0; translate: 0 12px; }
  .js .apt.in .thumbs button { opacity: .55; translate: 0 0; transition: opacity .8s ease, translate .9s var(--ease); transition-delay: calc(1.1s + var(--i, 0) * 90ms); }
  .js .apt.in .thumbs button[aria-current], .js .apt.in .thumbs button:hover { opacity: 1; }

  .js [data-reveal] .stagger > * { opacity: 0; translate: 0 14px; }
  .js [data-reveal].in .stagger > * { opacity: 1; translate: 0 0; transition: opacity .8s ease, translate .9s var(--ease); transition-delay: calc(.35s + var(--i, 0) * 60ms); }

  .js .facts::before, .js .facts::after { transform: scaleX(0); }
  .js .in .facts::before, .js .in .facts::after { transform: scaleX(1); transition: transform 1.6s .3s var(--ease); }

  .sum-total span:last-child { animation: bump .6s var(--ease); }
  .cal-day.is-in, .cal-day.is-out { animation: pop .45s var(--ease); }

  .btn-sun { position: relative; overflow: hidden; isolation: isolate; }
  .btn-sun::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%); translate: -120% 0; transition: translate .9s var(--ease); }
  .btn-sun:hover::after { translate: 120% 0; }
}
@keyframes bump { from { opacity: .3; translate: 0 6px; } }
.facts { position: relative; border-top: 0; border-bottom: 0; }
.facts::before, .facts::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--line); transform-origin: left; }
.facts::before { top: 0; }
.facts::after { bottom: 0; transform-origin: right; }

.ornament { width: 54px; height: 61px; margin: 0 auto 1.6rem; display: block; color: var(--sea); }
.info .ornament, .contact .ornament { color: currentColor; }

/* decoraties */
.apartments, .info, .contact, .intro-sec { position: relative; overflow: hidden; }
.deco { position: absolute; pointer-events: none; z-index: 0; will-change: transform; }
.apartments > .wrap, .info > .wrap, .contact > .wrap { position: relative; z-index: 1; }
.deco-arcs { width: min(760px, 90vw); right: -18%; top: 4%; fill: none; stroke: var(--gold); stroke-width: 1; opacity: .22; }
.deco-pine { width: min(720px, 80vw); right: -8%; bottom: -14%; color: #fff; opacity: .05; }
.deco-waves { left: 0; bottom: 0; width: 100%; height: 110px; fill: none; stroke: var(--deep); stroke-width: 1; opacity: .18; }
.deco-waves .dw { transform-box: view-box; }
@media (prefers-reduced-motion: no-preference) {
  .deco-waves .dw0 { animation: drift 16s linear infinite; }
  .deco-waves .dw1 { animation: drift 22s linear infinite reverse; }
  .deco-waves .dw2 { animation: drift 28s linear infinite; }
  .deco-waves .dw3 { animation: drift 34s linear infinite reverse; }
  .deco-arcs circle { transform-origin: 300px 300px; animation: arcs 60s linear infinite; stroke-dasharray: 3 9; }
  .deco-arcs circle:nth-child(even) { animation-direction: reverse; animation-duration: 90s; }
}
@keyframes arcs { to { transform: rotate(360deg); } }

@media (max-width: 980px) {
  .frond-wrap { width: clamp(140px, 34vw, 260px); }
  .birds { top: 16%; }
}
@media (max-width: 640px) {
  .wm-name { font-size: 1.45rem; }
  .brand .emblem { width: 32px; height: 36px; }
  .wm-sub { display: none; }
  .frond-r { display: none; }
  .scroll-cue { display: none; }
}
.gallery-main img { transition: scale 1.8s var(--ease), opacity .3s ease; }

/* ============================================================
   Levende lucht: aura, sterren, maan en zon
   ============================================================ */
.aura { position: absolute; border-radius: 50%; filter: blur(70px); opacity: var(--aura-o, .5); pointer-events: none; transition: background 1.5s, opacity 1.5s; }
.aura.a1 { width: 62vw; height: 42vw; left: -14vw; top: -16vw; background: var(--aura1, #CFE8F2); }
.aura.a2 { width: 52vw; height: 36vw; right: -12vw; top: -6vw; background: var(--aura2, #fff); }
.aura.a3 { width: 70vw; height: 30vw; left: 18vw; top: 26vh; background: var(--aura3, #BFE0EA); opacity: calc(var(--aura-o, .5) * .7); }
.starfield { position: absolute; left: 0; top: 0; width: 100%; height: 75%; opacity: var(--stars); transition: opacity 1.5s; }

.orb {
  width: clamp(92px, 9.5vw, 150px); background: none !important; box-shadow: none !important; border-radius: 0;
}
.orb-svg { position: relative; width: 100%; height: 100%; display: block; overflow: visible; }
.orb .moon { display: none; }
.hero[data-phase="night"] .orb .sun { display: none; }
.hero[data-phase="night"] .orb .moon { display: inline; }
.orb .earthshine { opacity: .1; }
.orb .sun-core { mix-blend-mode: screen; }
.halo { position: absolute; border-radius: 50%; pointer-events: none; }
.halo.h1 { inset: -70%; background: radial-gradient(circle, color-mix(in srgb, var(--orb) 55%, transparent) 0%, transparent 62%); }
.halo.h2 { inset: -190%; background: radial-gradient(circle, color-mix(in srgb, var(--orb) 22%, transparent) 0%, transparent 60%); }
.halo.ring { inset: -120%; border: 1px solid rgba(255, 255, 255, .06); box-shadow: inset 0 0 40px rgba(255,255,255,.03), 0 0 30px rgba(255,255,255,.02); opacity: 0; }
.hero[data-phase="night"] .halo.ring { opacity: 1; }
.hero[data-phase="night"] .halo.h1 { background: radial-gradient(circle, rgba(226, 234, 242, .38) 0%, rgba(160, 190, 215, .12) 38%, transparent 64%); }
.veil { position: absolute; height: 26px; border-radius: 50%; background: var(--veil-c, #C9D6E0); filter: blur(10px); opacity: var(--veil, 0); pointer-events: none; transition: opacity 1.5s; }
.veil.v1 { width: 34vw; top: 17%; right: -40vw; }
.veil.v2 { width: 22vw; top: 25%; right: -30vw; height: 16px; }

@media (prefers-reduced-motion: no-preference) {
  .aura.a1 { animation: aura1 34s ease-in-out infinite alternate; }
  .aura.a2 { animation: aura2 42s ease-in-out infinite alternate; }
  .aura.a3 { animation: aura3 50s ease-in-out infinite alternate; }
  .halo.h1 { animation: haloBreath 7s ease-in-out infinite alternate; }
  .halo.h2 { animation: haloBreath 11s ease-in-out infinite alternate-reverse; }
  .halo.ring { animation: ringFade 16s ease-in-out infinite; }
  .orb-svg { animation: orbFloat 14s ease-in-out infinite alternate; }
  .orb .sun-core { animation: sunPulse 5s ease-in-out infinite alternate; }
  .veil.v1 { animation: veil 95s linear infinite; }
  .veil.v2 { animation: veil 130s linear -40s infinite; }
}
@keyframes aura1 { to { transform: translate(8vw, 5vh) scale(1.15); } }
@keyframes aura2 { to { transform: translate(-10vw, 8vh) scale(.9); } }
@keyframes aura3 { to { transform: translate(-12vw, -4vh) scale(1.2); } }
@keyframes haloBreath { from { transform: scale(.92); opacity: .75; } to { transform: scale(1.08); opacity: 1; } }
@keyframes ringFade { 0%, 100% { opacity: .1; } 50% { opacity: .7; } }
@keyframes orbFloat { from { transform: translate(0, 0) rotate(-1.5deg); } to { transform: translate(3px, -4px) rotate(1.5deg); } }
@keyframes sunPulse { to { opacity: .45; transform: scale(1.06); } }
@keyframes veil { from { transform: translateX(0); } to { transform: translateX(-180vw); } }

/* ============================================================
   Infopaneel in de hero
   ============================================================ */
.hero-info {
  position: absolute; z-index: 5; right: clamp(1rem, 4vw, 3.5rem); bottom: calc(clamp(200px, 33vh, 340px) + 1.6rem);
  min-width: 250px; padding: 1rem 1.2rem; border-radius: var(--radius-lg);
  color: var(--hero-text); font-size: .82rem;
  background: color-mix(in srgb, #fff 12%, transparent);
  border: 1px solid color-mix(in srgb, #fff 26%, transparent);
  backdrop-filter: blur(14px) saturate(1.2);
  box-shadow: 0 20px 50px -30px rgba(0,0,0,.4);
}
.hi-row { display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: .32rem 0; }
.hi-row + .hi-row { border-top: 1px solid color-mix(in srgb, currentColor 14%, transparent); }
.hi-label { opacity: .72; }
.hi-val { font-variant-numeric: tabular-nums; font-weight: 500; display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.hi-clock .hi-val { font-family: var(--head); font-size: 1.55rem; font-weight: 500; line-height: 1; }
.hi-moon svg { width: 16px; height: 16px; }
.mini-dark { fill: color-mix(in srgb, currentColor 18%, transparent); stroke: color-mix(in srgb, currentColor 40%, transparent); stroke-width: 4; }
.mini-lit { fill: var(--gold-2); }
.clock-colon { animation: colon 2s steps(1) infinite; }
@keyframes colon { 50% { opacity: .25; } }
@media (prefers-reduced-motion: no-preference) {
  .js .hero-info { opacity: 0; translate: 20px 0; }
  .is-ready .hero-info { opacity: 1; translate: 0 0; transition: opacity 1.2s 1.2s ease, translate 1.4s 1.2s var(--ease); }
}
@media (max-width: 1100px) { .hero-info { display: none; } }

/* ============================================================
   Kaart met toestemming
   ============================================================ */
.map { position: relative; }
.map-consent { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: .9rem; padding: 2rem; text-align: center; color: var(--ink-2);
  background: radial-gradient(ellipse at 50% 40%, var(--paper) 0%, var(--foam) 100%); }
.map-consent p { max-width: 26rem; margin: 0; font-size: .95rem; }
.map-emblem { width: 46px; height: 52px; color: var(--sea-2); }

/* ============================================================
   Cookiebanner en privacyvenster
   ============================================================ */
.cookie {
  position: fixed; z-index: 150; left: clamp(.75rem, 2vw, 1.5rem); bottom: clamp(.75rem, 2vw, 1.5rem);
  width: min(430px, calc(100% - 1.5rem)); padding: 1.5rem 1.5rem 1.3rem;
  color: var(--light); border-radius: var(--radius-lg);
  background: radial-gradient(ellipse at 0% 0%, #1A4656 0%, var(--deep) 55%, #081B22 100%);
  border: 1px solid rgba(205, 176, 127, .28);
  box-shadow: 0 30px 80px -20px rgba(0, 0, 0, .55);
}
.cookie[hidden] { display: none; }
.ck-head { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.ck-emblem { width: 34px; height: 38px; color: var(--light); flex: none; }
.cookie h2 { font-size: 1.8rem; }
.cookie > p { font-size: .9rem; opacity: .85; margin-bottom: 1.1rem; }
.cookie a { color: var(--gold-2); text-underline-offset: 3px; }
.ck-prefs { display: grid; gap: .6rem; margin-bottom: 1.1rem; }
.ck-opt { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .8rem .9rem; border-radius: var(--radius); border: 1px solid rgba(250,248,244,.14); cursor: default; }
label.ck-opt { cursor: pointer; }
.ck-opt strong { font-weight: 600; font-size: .92rem; }
.ck-opt p { margin: .15rem 0 0; font-size: .8rem; opacity: .7; }
.ck-always { font-size: .75rem; color: var(--gold-2); white-space: nowrap; }
.switch { appearance: none; -webkit-appearance: none; flex: none; width: 42px; height: 24px; border-radius: 999px; background: rgba(250,248,244,.2); position: relative; cursor: pointer; transition: background .3s; margin: 0; }
.switch::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--light); transition: translate .35s var(--ease); }
.switch:checked { background: var(--gold); }
.switch:checked::after { translate: 18px 0; }
.ck-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ck-actions .btn { flex: 1 1 auto; padding: .75rem 1rem; font-size: .9rem; }
.ck-btn { background: transparent; border-color: rgba(250,248,244,.35); color: var(--light); }
.ck-btn:hover { background: var(--light); color: var(--deep); border-color: var(--light); }
@media (prefers-reduced-motion: no-preference) {
  .cookie.is-open { animation: cookieIn .9s var(--ease) both; }
  .cookie.is-closing { animation: cookieOut .5s ease both; }
}
@keyframes cookieIn { from { opacity: 0; translate: 0 30px; scale: .97; } }
@keyframes cookieOut { to { opacity: 0; translate: 0 20px; } }

.modal { position: fixed; inset: 0; z-index: 180; display: grid; place-items: center; padding: 1rem; background: rgba(6, 20, 26, .6); backdrop-filter: blur(6px); }
.modal[hidden] { display: none; }
.modal-card { position: relative; width: min(680px, 100%); max-height: min(86vh, 900px); overflow: auto; background: var(--paper); color: var(--ink); border-radius: var(--radius-lg); padding: clamp(1.6rem, 4vw, 3rem); box-shadow: 0 40px 100px -30px rgba(0,0,0,.5); }
.modal-emblem { width: 40px; height: 45px; color: var(--sea-2); margin-bottom: .8rem; }
.modal-card h2 { margin-bottom: 1.2rem; }
.modal-body h3 { font-size: 1.45rem; margin: 1.6rem 0 .4rem; }
.modal-body p { color: var(--ink-2); font-size: .95rem; }
.modal-close { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--ink); display: grid; place-items: center; cursor: pointer; }
.modal-close:hover { border-color: var(--ink); }
@media (prefers-reduced-motion: no-preference) {
  .modal.is-open { animation: fadeIn .4s ease both; }
  .modal.is-open .modal-card { animation: cardIn .7s var(--ease) both; }
}
@keyframes fadeIn { from { opacity: 0; } }
@keyframes cardIn { from { opacity: 0; translate: 0 24px; } }

/* ============================================================
   Lightbox, terug naar boven, zwevende knop
   ============================================================ */
.gallery-main { cursor: zoom-in; }
.lightbox { position: fixed; inset: 0; z-index: 170; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: clamp(.5rem, 3vw, 2.5rem); background: rgba(5, 16, 21, .94); color: var(--light); }
.lightbox[hidden] { display: none; }
.lb-stage { margin: 0; display: grid; justify-items: center; gap: .9rem; min-width: 0; touch-action: pan-y; }
.lb-stage img { max-width: 100%; max-height: 80vh; border-radius: var(--radius); box-shadow: 0 30px 80px -20px rgba(0,0,0,.6); transition: opacity .35s ease, translate .5s var(--ease); }
.lb-stage figcaption { font-size: .9rem; opacity: .75; font-variant-numeric: tabular-nums; }
.lb-btn { width: 3rem; height: 3rem; border-radius: 50%; border: 1px solid rgba(250,248,244,.3); background: transparent; color: var(--light); display: grid; place-items: center; cursor: pointer; transition: background .3s, border-color .3s; }
.lb-btn:hover { background: rgba(250,248,244,.1); border-color: var(--gold-2); }
.lb-close { position: absolute; top: 1rem; right: 1rem; }
@media (prefers-reduced-motion: no-preference) { .lightbox.is-open { animation: fadeIn .45s ease both; } }
@media (max-width: 640px) {
  .lightbox { grid-template-columns: 1fr; }
  .lb-prev, .lb-next { position: absolute; bottom: 1.2rem; }
  .lb-prev { left: 30%; } .lb-next { right: 30%; }
}

.to-top { position: fixed; z-index: 60; right: clamp(.8rem, 2vw, 1.6rem); bottom: clamp(.8rem, 2vw, 1.6rem); width: 52px; height: 52px; border-radius: 50%; border: 0; padding: 0; cursor: pointer; display: grid; place-items: center; color: var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); box-shadow: 0 10px 30px -12px rgba(0,0,0,.3); transition: opacity .4s ease, translate .5s var(--ease); }
.to-top[hidden] { display: grid; opacity: 0; translate: 0 16px; pointer-events: none; }
.to-top svg:not(.ic) { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.to-top .tt-track { fill: none; stroke: var(--line); stroke-width: 1.5; }
.to-top .tt-ring { fill: none; stroke: var(--gold); stroke-width: 1.8; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--progress, 0)); stroke-linecap: round; }
.to-top .ic { position: relative; width: 1.1rem; height: 1.1rem; }
.topbar::after { content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: calc(var(--progress, 0) * 100%); background: var(--gold); opacity: 0; transition: opacity .4s; }
.topbar.is-stuck::after { opacity: 1; }

.fab-book { display: none; }
@media (max-width: 640px) {
  .fab-book { position: fixed; z-index: 60; left: 50%; bottom: 1rem; translate: -50% 0; display: inline-flex; padding: .85rem 1.6rem; border-radius: 999px; background: var(--gold); color: #fff; text-decoration: none; font-weight: 500; box-shadow: 0 14px 30px -10px rgba(0,0,0,.35); transition: opacity .4s ease, translate .5s var(--ease); }
  .fab-book[hidden] { display: inline-flex; opacity: 0; translate: -50% 20px; pointer-events: none; }
  .to-top { bottom: 1rem; }
  .cookie { bottom: .75rem; }
}
.footer-links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; align-items: center; }
.footer-links a { text-decoration: none; opacity: .8; }
.footer-links a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }
.ck-prefs[hidden], .ck-actions .btn[hidden], .lb-btn[hidden] { display: none; }
.halo.ring { border-color: rgba(255, 255, 255, .045); }

/* ============================================================
   Maan: meer detail
   ============================================================ */
.orb { width: clamp(110px, 11vw, 176px); }
.orb .moon-dark { opacity: .12; }
.halo.corona { inset: -38%; background: radial-gradient(circle, transparent 52%, rgba(180, 205, 235, .10) 60%, rgba(236, 214, 180, .08) 67%, rgba(210, 170, 200, .05) 73%, transparent 80%); opacity: 0; }
.hero[data-phase="night"] .halo.corona { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .halo.corona { animation: coronaSpin 70s linear infinite, haloBreath 9s ease-in-out infinite alternate; }
}
@keyframes coronaSpin { to { rotate: 360deg; } }

/* ============================================================
   Foto's
   ============================================================ */
.gallery-main { aspect-ratio: 4 / 3; }
.photo-badge {
  position: absolute; left: 1rem; bottom: 1rem; z-index: 2; display: inline-flex; align-items: center; gap: .45rem;
  padding: .45rem .75rem; border-radius: 999px; font-size: .78rem; color: #fff;
  background: rgba(10, 30, 38, .45); backdrop-filter: blur(10px); border: 1px solid rgba(255,255,255,.25);
}
.photo-badge svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.photo-soon { background: rgba(255,255,255,.18); }
.photo-zoom {
  position: absolute; right: 1rem; bottom: 1rem; z-index: 2; padding: .45rem .8rem; border-radius: 999px; font-size: .78rem; color: var(--deep);
  background: rgba(255,255,255,.85); opacity: 0; translate: 0 8px; transition: opacity .4s ease, translate .5s var(--ease);
}
.gallery-main:hover .photo-zoom, .gallery-main:focus-visible .photo-zoom { opacity: 1; translate: 0 0; }
.gallery-main::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, transparent 60%, rgba(8, 24, 30, .35) 100%); }
.thumbs { flex-wrap: wrap; }
.thumbs button { width: 74px; aspect-ratio: 4 / 3; }

/* residentie */
.residence { padding-top: clamp(4rem, 9vw, 7rem); position: relative; }
.res-grid {
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-rows: auto auto;
  gap: clamp(1.2rem, 3vw, 2.2rem); align-items: start;
}
.res-a { grid-column: 1 / 8; grid-row: 1 / 3; }
.res-copy { grid-column: 8 / 13; grid-row: 1; align-self: center; padding: 1rem 0 1rem clamp(0rem, 2vw, 1.5rem); }
.res-b { grid-column: 8 / 11; grid-row: 2; margin-top: 1rem; }
.res-c { grid-column: 11 / 13; grid-row: 2; margin-top: 5rem; }
.res-fig { margin: 0; }
.res-img { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--foam); }
.res-a .res-img { aspect-ratio: 4 / 5; }
.res-b .res-img { aspect-ratio: 4 / 5; }
.res-c .res-img { aspect-ratio: 3 / 4; }
.res-img img { position: absolute; left: 0; top: -9%; width: 100%; height: 118%; object-fit: cover; translate: 0 var(--py, 0px); scale: 1; transition: scale 1.8s var(--ease); }
.res-fig:hover .res-img img { scale: 1.035; }
.res-fig figcaption { font-size: .8rem; color: var(--ink-2); margin-top: .6rem; }
.res-name { font-family: var(--head); font-style: italic; font-size: 1.35rem; color: var(--gold); margin-bottom: .6rem; }
.res-copy h2 { font-size: clamp(2.2rem, 3.8vw, 3.2rem); margin-bottom: 1.2rem; }
.res-copy > p { color: var(--ink-2); }
.res-list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: .2rem 1.4rem; }
.res-list li { padding: .6rem 0; border-top: 1px solid var(--line); font-size: .92rem; }
@media (prefers-reduced-motion: no-preference) {
  .js .res-fig .res-img { clip-path: inset(100% 0 0 0); }
  .js .res-fig.in .res-img { clip-path: inset(0 0 0 0); transition: clip-path 1.6s cubic-bezier(.76, 0, .24, 1); }
  .js .res-fig:not(.in) .res-img img { scale: 1.25; }
  .js .res-fig.in .res-img img { transition: scale 2.2s var(--ease); }
  .js .res-b.in .res-img { transition-delay: .2s; }
  .js .res-c.in .res-img { transition-delay: .4s; }
  .js .res-fig figcaption { opacity: 0; }
  .js .res-fig.in figcaption { opacity: 1; transition: opacity 1s 1.2s ease; }
}
@media (max-width: 980px) {
  .res-a { grid-column: 1 / -1; grid-row: auto; }
  .res-a .res-img { aspect-ratio: 4 / 3; }
  .res-copy { grid-column: 1 / -1; grid-row: auto; padding: 0; }
  .res-b { grid-column: 1 / 7; grid-row: auto; margin-top: 0; }
  .res-c { grid-column: 7 / 13; grid-row: auto; margin-top: 3rem; }
}

/* contact met foto */
.contact.has-photo { color: var(--light); background: #0B1F27; padding-block: clamp(7rem, 16vw, 12rem); }
.contact-bg { position: absolute; inset: -18% 0; z-index: 0; }
.contact-bg img { width: 100%; height: 100%; object-fit: cover; }
.contact.has-photo::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(8, 24, 30, .88) 0%, rgba(8, 24, 30, .6) 45%, rgba(8, 24, 30, .15) 100%); }
.contact.has-photo .deco-waves { stroke: #fff; opacity: .12; z-index: 0; }
.contact.has-photo .btn-sun { background: var(--gold); border-color: var(--gold); color: #fff; }
.contact.has-photo .btn-sun:hover { background: #9A7948; border-color: #9A7948; }
.contact.has-photo .btn-ghost-light { border-color: rgba(250,248,244,.55); color: var(--light); }
.contact.has-photo .btn-ghost-light:hover { background: var(--light); color: var(--deep); }
.contact.has-photo h2 { font-size: clamp(2.6rem, 5vw, 4.2rem); max-width: 14ch; }

/* ============================================================
   Openingsgordijn: verfijnd
   ============================================================ */
.curtain { background: none; clip-path: none; transition: none; place-items: center; }
.cp { position: absolute; left: 0; right: 0; height: 50.5%; background: radial-gradient(ellipse 120% 100% at 50% 100%, #15404F 0%, var(--deep) 55%, #051218 100%); transition: translate 1.25s cubic-bezier(.76, 0, .24, 1); }
.cp-top { top: 0; }
.cp-bottom { bottom: 0; background: radial-gradient(ellipse 120% 100% at 50% 0%, #15404F 0%, var(--deep) 55%, #051218 100%); }
.cp::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(205,176,127,.5), transparent); opacity: 0; transition: opacity .6s ease; }
.cp-top::after { bottom: 0; }
.cp-bottom::after { top: 0; }
.curtain.lift .cp::after { opacity: 1; }
.curtain.lift .cp-top { translate: 0 -100%; }
.curtain.lift .cp-bottom { translate: 0 100%; }
.curtain-stars { position: absolute; inset: 0; opacity: 0; transition: opacity 2s ease;
  background-image:
    radial-gradient(1px 1px at 8% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 22% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 36% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 48% 84%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 63% 12%, #fff 50%, transparent 51%), radial-gradient(1.4px 1.4px at 74% 64%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 93% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 14% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 57% 46%, #fff 50%, transparent 51%); }
.curtain.show .curtain-stars { opacity: .5; }
.curtain.lift .curtain-stars { opacity: 0; transition-duration: .5s; }
.curtain-glow { position: absolute; left: 50%; top: 50%; width: 70vmin; height: 70vmin; translate: -50% -50%; border-radius: 50%;
  background: radial-gradient(circle, rgba(205,176,127,.22) 0%, rgba(205,176,127,.06) 35%, transparent 65%); opacity: 0; scale: .6; transition: opacity 2.4s ease, scale 3s var(--ease); }
.curtain.show .curtain-glow { opacity: 1; scale: 1; }
.curtain-inner { position: relative; z-index: 2; gap: 0; }
.curtain.lift .curtain-inner { opacity: 0; translate: 0 0; scale: 1.06; filter: blur(4px); transition: opacity .7s ease, scale 1.2s var(--ease), filter .8s ease; }
.seal { position: relative; width: clamp(200px, 30vmin, 260px); aspect-ratio: 1; display: grid; place-items: center; }
.seal-ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.seal-ring .sr-line { fill: none; stroke: var(--gold); stroke-width: .8; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.2s var(--ease); }
.seal-ring .sr-thin { stroke-width: .5; opacity: .55; transition-delay: .25s; }
.seal-ring .ticks line { stroke: var(--gold-2); stroke-width: .8; opacity: 0; transition: opacity .5s ease; }
.seal-ring .ticks line.major { stroke-width: 1.2; }
.seal-ring .sr-text { font-family: var(--body); font-size: 7.4px; letter-spacing: 2.6px; fill: var(--gold-2); opacity: 0; transition: opacity 1.4s .9s ease; }
.seal-ring .sr-rot { transform-origin: 100px 100px; }
.curtain.show .sr-line { stroke-dashoffset: 0; }
.curtain.show .sr-text { opacity: .85; }
.curtain.show .ticks line { opacity: .7; }
.curtain .emblem { width: 38%; height: auto; position: relative; }
.curtain-name { margin-top: 1.4rem; font-family: var(--head); font-weight: 500; font-size: clamp(2.6rem, 7vw, 4rem); letter-spacing: .02em; line-height: 1; color: var(--light); }
.curtain-name span { display: inline-block; opacity: 0; filter: blur(10px); translate: 0 14px; transition: opacity 1s ease, filter 1.2s ease, translate 1.2s var(--ease); }
.curtain.show .curtain-name span { opacity: 1; filter: blur(0); translate: 0 0; }
.curtain-rule { display: flex; align-items: center; gap: .8rem; margin-top: 1.1rem; width: clamp(220px, 40vmin, 340px); }
.curtain-rule::before, .curtain-rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); transform: scaleX(0); transition: transform 1.4s 1.6s var(--ease); }
.curtain-rule::before { transform-origin: right; }
.curtain-rule::after { background: linear-gradient(90deg, var(--gold), transparent); transform-origin: left; }
.curtain-rule span { width: 5px; height: 5px; rotate: 45deg; border: 1px solid var(--gold-2); opacity: 0; transition: opacity .8s 1.5s ease; }
.curtain.show .curtain-rule::before, .curtain.show .curtain-rule::after { transform: scaleX(1); }
.curtain.show .curtain-rule span { opacity: 1; }
.curtain-sub { margin-top: .9rem; font-size: .66rem; letter-spacing: .34em; text-transform: uppercase; color: var(--light); opacity: 0; transition: opacity 1.2s 2s ease, letter-spacing 2.4s 1.8s var(--ease); }
.curtain.show .curtain-sub { opacity: .7; letter-spacing: .26em; }
@media (prefers-reduced-motion: no-preference) {
  .curtain.show .sr-rot { animation: sealSpin 40s linear infinite; }
}
@keyframes sealSpin { to { rotate: 360deg; } }
.lb-stage figcaption { display: flex; gap: 1.2rem; align-items: baseline; }
.lb-alt { font-family: var(--head); font-size: 1.3rem; opacity: 1; }
.lb-count { font-size: .8rem; opacity: .6; letter-spacing: .08em; }
.orb-svg { will-change: transform; }
.contact.has-photo::before { z-index: 1; }
.contact.has-photo .deco-waves { z-index: 1; }
.contact.has-photo > .wrap { z-index: 2; }
@media (min-width: 981px) {
  .apt { align-items: start; }
  .apt .gallery { position: sticky; top: 110px; }
}
.gallery-main.no-zoom { cursor: default; }

/* ============================================================
   Zon: detail en beweging
   ============================================================ */

.orb .sun-core { transform-box: fill-box; transform-origin: center; }
.orb .sun-rays { mix-blend-mode: normal; filter: drop-shadow(0 0 2px rgba(255, 214, 140, .45)); }
.hero[data-phase="dawn"] .orb .sun-rays, .hero[data-phase="dusk"] .orb .sun-rays { opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
  .orb .sun-rays { animation: spin 90s linear infinite; }
  .orb .sun-surface { animation: spin 140s linear infinite, surfaceBreath 11s ease-in-out infinite alternate; }
  .orb .sun-surface.s2 { animation: spin 210s linear infinite reverse, surfaceBreath 15s ease-in-out infinite alternate-reverse; }
}
@keyframes spin { to { rotate: 360deg; } }
@keyframes surfaceBreath { from { scale: 1; } to { scale: 1.08; } }

/* lensreflecties op de lijn van de zon naar het midden */
.flares { position: absolute; inset: 0; pointer-events: none; opacity: var(--flare, 0); transition: opacity 1.5s; }
.hero[data-phase="night"] .flares { opacity: 0; }
.fl { position: absolute; border-radius: 50%; translate: -50% -50%; mix-blend-mode: screen; }
.fl.f1 { left: calc(var(--orb-x) + (46% - var(--orb-x)) * .38); top: calc(var(--orb-y) + (58% - var(--orb-y)) * .38); width: 26px; height: 26px; background: radial-gradient(circle, rgba(255,240,200,.55), rgba(255,240,200,0) 70%); }
.fl.f2 { left: calc(var(--orb-x) + (46% - var(--orb-x)) * .62); top: calc(var(--orb-y) + (58% - var(--orb-y)) * .62); width: 64px; height: 64px; background: radial-gradient(circle, rgba(170,220,255,0) 40%, rgba(170,220,255,.22) 62%, rgba(170,220,255,0) 72%); }
.fl.f3 { left: calc(var(--orb-x) + (46% - var(--orb-x)) * .82); top: calc(var(--orb-y) + (58% - var(--orb-y)) * .82); width: 14px; height: 14px; background: rgba(255,226,170,.32); filter: blur(1px); }
.fl.f4 { left: calc(var(--orb-x) + (46% - var(--orb-x)) * .2); top: calc(var(--orb-y) + (58% - var(--orb-y)) * .2); width: 110px; height: 110px; background: radial-gradient(circle, rgba(255,200,150,0) 55%, rgba(255,200,150,.12) 66%, rgba(255,200,150,0) 76%); }
@media (prefers-reduced-motion: no-preference) {
  .fl { animation: flare 7s ease-in-out infinite alternate; }
  .fl.f2 { animation-duration: 9s; animation-delay: -3s; }
  .fl.f3 { animation-duration: 5s; animation-delay: -1s; }
  .fl.f4 { animation-duration: 11s; }
}
@keyframes flare { from { opacity: .55; scale: .92; } to { opacity: 1; scale: 1.1; } }

/* ============================================================
   Meeuwen
   ============================================================ */
.birds { display: none; }
.flock { position: absolute; left: 0; top: 0; pointer-events: none; opacity: calc(var(--birds, .55) * 1.4); will-change: transform; transform: translate(-40vw, -40vh); }
.flock svg { width: 100%; height: auto; overflow: visible; display: block; }
.flock-a { width: 150px; }
.flock-b { width: 96px; }
.flock-c { width: 54px; }
.gull .wing, .gull .gbody { fill: var(--bird-c, var(--hero-text)); }
.gull .wing { opacity: .88; }
.gull-bob { transform-box: fill-box; }
@media (prefers-reduced-motion: no-preference) {
  .gull-bob { animation: bob var(--bob, 5s) ease-in-out var(--bd, 0s) infinite alternate; }
  .flock-a { animation: flightA 44s linear 3s infinite; }
  .flock-b { animation: flightB 60s linear 18s infinite; }
  .flock-c { animation: circleC 28s linear infinite; }
}
@keyframes bob { from { translate: 0 -2px; } to { translate: 0 3px; } }
@keyframes flightA {
  0% { transform: translate(104vw, 24vh) scale(.9); }
  22% { transform: translate(88vw, 31vh) scale(.95); }
  48% { transform: translate(74vw, 21vh) scale(1); }
  68% { transform: translate(64vw, 9vh) scale(1.02); }
  84% { transform: translate(58vw, -16vh) scale(1.05); }
  100% { transform: translate(58vw, -16vh) scale(1.05); }
}
@keyframes flightB {
  0% { transform: translate(106vw, 9vh); }
  30% { transform: translate(90vw, 16vh); }
  55% { transform: translate(76vw, 12vh); }
  74% { transform: translate(66vw, 4vh); }
  86% { transform: translate(61vw, -14vh); }
  100% { transform: translate(61vw, -14vh); }
}
@keyframes circleC {
  0% { transform: translate(88vw, 23vh); }
  25% { transform: translate(80vw, 29vh); }
  50% { transform: translate(71vw, 23vh); }
  75% { transform: translate(80vw, 16vh); }
  100% { transform: translate(88vw, 23vh); }
}
@media (max-width: 980px) {
  .flock-a { width: 104px; }
  .flock-b { width: 68px; }
  .flock-c { width: 40px; }
  .flares { display: none; }
  @media (prefers-reduced-motion: no-preference) {
    .flock-a { animation-name: flightAm; animation-duration: 30s; }
    .flock-b { animation-name: flightBm; animation-duration: 40s; }
    .flock-c { animation-name: circleCm; animation-duration: 22s; }
  }
}
@keyframes flightAm { 0% { transform: translate(104vw, 12.5vh); } 45% { transform: translate(52vw, 9vh); } 80% { transform: translate(-35vw, 12vh); } 100% { transform: translate(-35vw, 12vh); } }
@keyframes flightBm { 0% { transform: translate(106vw, 9.5vh); } 50% { transform: translate(44vw, 13vh); } 85% { transform: translate(-25vw, 9vh); } 100% { transform: translate(-25vw, 9vh); } }
@keyframes circleCm { 0% { transform: translate(86vw, 12vh); } 25% { transform: translate(78vw, 14vh); } 50% { transform: translate(70vw, 12vh); } 75% { transform: translate(78vw, 9.5vh); } 100% { transform: translate(86vw, 12vh); } }

/* ============================================================
   Leesbaarheid in de hero
   ============================================================ */
.hero[data-phase="dusk"] .hero-copy, .hero[data-phase="night"] .hero-copy { text-shadow: 0 1px 10px rgba(6, 18, 26, .38); }
.hero[data-phase="dawn"] .hero-copy, .hero[data-phase="day"] .hero-copy { text-shadow: 0 0 10px rgba(255, 255, 255, .3); }
@media (max-width: 980px) {
  .orb { width: 84px; }
  .hero-inner { padding-top: 10rem; }
}
@media (max-width: 640px) {
  .orb { width: 70px; }
  .hero-inner { padding-top: 9.6rem; }
}

/* ============================================================
   Zon: rotatie via SVG rond het exacte middelpunt
   ============================================================ */
.orb .sun-rays, .orb .sun-surface, .orb .sun-surface.s2, .orb .sun-glow, .orb .sun-rays-wrap { animation: none !important; rotate: none; scale: none; transform-box: view-box !important; transform-origin: 0 0 !important; }
.orb .sun-rays-wrap { transform-box: view-box; transform-origin: 0 0; }
@media (max-width: 980px) { .orb .sun-rays-wrap { transform: scale(.8); } }

/* ============================================================
   Tijdreis: een dag in El Raso
   ============================================================ */
.hero-inner { pointer-events: none; }
.hero-inner > * { pointer-events: auto; }
.orb { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; z-index: 3; }
.orb:focus-visible { outline: none; }
.orb:focus-visible .orb-svg { filter: drop-shadow(0 0 0 transparent) drop-shadow(0 0 10px var(--gold-2)); }
.orb-hint { position: absolute; inset: -18%; border-radius: 50%; border: 1px solid color-mix(in srgb, #fff 70%, transparent); opacity: 0; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .is-ready .orb-hint { animation: hint 2.4s 3.2s var(--ease) 3; }
  .orb:hover .orb-svg { scale: 1.04; transition: scale .6s var(--ease); }
}
@keyframes hint { 0% { opacity: 0; scale: .8; } 30% { opacity: .9; } 100% { opacity: 0; scale: 1.6; } }

.tl-clock {
  position: absolute; z-index: 5; left: var(--orb-x); top: var(--orb-y);
  translate: -50% calc(clamp(110px, 11vw, 176px) * .5 + 1.6rem);
  display: grid; justify-items: center; gap: .35rem; pointer-events: none;
  color: var(--hero-text); opacity: 0; transition: opacity .6s ease;
}
.tl-clock span { font-family: var(--head); font-size: clamp(1.6rem, 2.6vw, 2.2rem); line-height: 1; font-variant-numeric: tabular-nums; text-shadow: 0 2px 18px rgba(0,0,0,.25); }
.tl-clock i { display: block; width: 90px; height: 1px; background: color-mix(in srgb, currentColor 30%, transparent); position: relative; overflow: hidden; }
.tl-clock i::after { content: ""; position: absolute; inset: 0; background: var(--gold-2); transform-origin: left; transform: scaleX(var(--tl, 0)); }
.is-timelapse .tl-clock { opacity: 1; }
@media (max-width: 980px) { .tl-clock { translate: -50% calc(84px * .5 + 1rem); } .tl-clock span { font-size: 1.3rem; } }
@media (max-width: 640px) { .tl-clock { translate: -100% -50%; left: calc(var(--orb-x) - 48px); } }

/* tijdens de tijdreis worden kleuren per beeld gezet, zonder vertraging */
.is-timelapse .hero, .is-timelapse .orb, .is-timelapse .starfield, .is-timelapse .aura, .is-timelapse .veil, .is-timelapse .flares,
.is-timelapse .landscape .sand, .is-timelapse .landscape .dune, .is-timelapse .landscape .dune-back, .is-timelapse .landscape .crown ellipse,
.is-timelapse .rays, .is-timelapse .clouds { transition: none !important; }
.is-timelapse .hero::after { opacity: .09; }
.orb .moon, .orb .sun { transition: opacity .8s ease; }

/* ============================================================
   Stabiliteit op mobiel
   ============================================================ */
html { overflow-x: hidden; overflow-x: clip; }
@media (max-width: 980px) { .summary { position: relative; } }

/* ============================================================
   Tellers
   ============================================================ */
.facts dd { font-variant-numeric: tabular-nums lining-nums; }
.facts dd::after { content: ""; display: block; width: 42px; height: 1px; margin: .7rem auto 0; background: var(--gold); transform: scaleX(0); transition: transform 1.2s var(--ease); }
.facts dd.is-counting::after, .facts dd.is-counted::after { transform: scaleX(1); }
.facts div { position: relative; }
.facts div::before { content: ""; position: absolute; left: 50%; top: 42%; width: 120px; height: 120px; translate: -50% -50%; border-radius: 50%; background: radial-gradient(circle, rgba(205, 176, 127, .28), transparent 65%); opacity: 0; scale: .6; pointer-events: none; }
@media (prefers-reduced-motion: no-preference) {
  .facts div:has(dd.is-counted)::before { animation: factGlow 1.6s var(--ease) both; }
  .facts dd.is-counted { animation: numPop .7s var(--ease); }
}
@keyframes factGlow { 0% { opacity: 0; scale: .6; } 35% { opacity: 1; scale: 1.05; } 100% { opacity: 0; scale: 1.4; } }
@keyframes numPop { 50% { text-shadow: 0 0 22px rgba(205, 176, 127, .55); } }
.price strong { font-variant-numeric: tabular-nums; }

/* ============================================================
   Kalender: gouden golf tussen aankomst en vertrek
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .cal-day.is-range.wave { animation: rangeIn .6s var(--ease) both; animation-delay: calc(var(--ri, 0) * 24ms); }
}
@keyframes rangeIn { 0% { background: transparent; scale: .5; } 60% { background: color-mix(in srgb, var(--gold) 40%, transparent); scale: 1.08; } 100% { scale: 1; } }

/* ============================================================
   Rimpeling bij aanraken
   ============================================================ */
.btn, .choice-card, .cal-day, .thumbs button, .lb-btn, .tonight a { position: relative; overflow: hidden; isolation: isolate; }
.ripple { position: absolute; z-index: -1; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; translate: -50% -50%; background: rgba(255, 255, 255, .45); animation: ripple .75s ease-out forwards; }
.btn-ghost .ripple, .choice-card .ripple, .cal-day .ripple, .tonight a .ripple { background: color-mix(in srgb, var(--gold) 40%, transparent); }
@keyframes ripple { to { scale: 36; opacity: 0; } }

/* ============================================================
   Lichtreflex over foto's
   ============================================================ */
.glint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .5) 48%, rgba(255, 246, 225, .15) 56%, transparent 70%); translate: -140% 0; }
@media (prefers-reduced-motion: no-preference) {
  .apt.in .gallery-main .glint { animation: glint 1.8s cubic-bezier(.4, 0, .2, 1) 1.5s both; }
  .res-fig.in .glint { animation: glint 1.8s cubic-bezier(.4, 0, .2, 1) 1.4s both; }
  .res-b.in .glint { animation-delay: 1.7s; }
  .res-c.in .glint { animation-delay: 2s; }
}
@keyframes glint { from { translate: -140% 0; } to { translate: 140% 0; } }

/* ============================================================
   Gouden lijn onder de titels
   ============================================================ */
.sec-head h2::after, .res-copy h2::after, .intro-inner h2::after, .loc-grid h2::after, .info-grid h2::after, .contact h2::after {
  content: ""; display: block; width: 64px; height: 1px; margin-top: 1rem; background: var(--gold); transform-origin: left;
}
.intro-inner h2::after { margin-inline: auto; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] .sec-head h2::after, .js .sec-head[data-reveal] h2::after, .js [data-reveal] h2::after { transform: scaleX(0); transition: transform 1.4s var(--ease) .7s; }
  .js [data-reveal].in h2::after { transform: scaleX(1); }
}

/* ============================================================
   Footer
   ============================================================ */
.footer { position: relative; overflow: hidden; padding-top: 4.5rem; }
.footer .wrap { align-items: flex-start; }
.footer-emblem { width: 40px; height: 45px; color: var(--light); flex: none; }
.footer-waves { position: absolute; left: 0; top: 0; width: 100%; height: 44px; fill: none; stroke: rgba(205, 176, 127, .35); stroke-width: 1; }
.footer-waves .fw1 { opacity: .6; } .footer-waves .fw2 { opacity: .3; }
@media (prefers-reduced-motion: no-preference) {
  .footer-waves .fw { stroke-dasharray: 3000; stroke-dashoffset: 3000; }
  .footer.in .footer-waves .fw { stroke-dashoffset: 0; transition: stroke-dashoffset 2.6s var(--ease); animation: drift 14s linear infinite; }
  .footer.in .footer-waves .fw1 { transition-delay: .2s; animation-duration: 19s; animation-direction: reverse; }
  .footer.in .footer-waves .fw2 { transition-delay: .4s; animation-duration: 25s; }
}
@media (max-width: 640px) { .footer { padding-bottom: 6.5rem; } }

/* ============================================================
   Prijs: discrete verschijning in plaats van teller
   ============================================================ */
.price .amount { background: linear-gradient(var(--gold), var(--gold)) no-repeat 0 100% / 100% 1px; padding-bottom: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .js .apt .price strong { opacity: 0; filter: blur(6px); translate: 0 8px; }
  .js .apt.in .price strong { opacity: 1; filter: blur(0); translate: 0 0; transition: opacity 1.2s ease 1s, filter 1.4s ease 1s, translate 1.4s var(--ease) 1s; }
  .js .apt .price .amount { background-size: 0% 1px; }
  .js .apt.in .price .amount { background-size: 100% 1px; transition: background-size 1.3s var(--ease) 1.9s; }
  .js .apt .price span:not(.amount) { opacity: 0; }
  .js .apt.in .price > span { opacity: 1; transition: opacity 1s ease 1.6s; }
}
.price strong .amount { font-size: inherit; color: inherit; display: inline; }

/* ============================================================
   Prijs: mini-pulsatie in plaats van lijn
   ============================================================ */
.price .amount, .js .apt .price .amount, .js .apt.in .price .amount { background: none !important; padding-bottom: 0; }
.price strong .amount { display: inline-block; transform-origin: center 60%; }
@media (prefers-reduced-motion: no-preference) {
  .js .apt.in .price .amount { animation: pricePulse 1.6s var(--ease) 2s both, pricePulse 1.6s var(--ease) 9s 1 both; }
  .apt:hover .price .amount { animation: pricePulse 1.4s var(--ease) both !important; }
}
@keyframes pricePulse {
  0%   { scale: 1; text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
  22%  { scale: 1.06; color: var(--gold); text-shadow: 0 0 14px rgba(205, 176, 127, .45); }
  45%  { scale: .99; }
  62%  { scale: 1.03; text-shadow: 0 0 8px rgba(205, 176, 127, .25); }
  100% { scale: 1; text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
}

/* ============================================================
   Galerij: kader alleen rond de hoofdfoto, miniaturen op één rij
   ============================================================ */
.gallery::before, .apt-flip .gallery::before, .js .apt .gallery::before, .js .apt.in .gallery::before { content: none; display: none; }
.gallery-frame { position: relative; isolation: isolate; }
.gallery-frame::before {
  content: ""; position: absolute; inset: 1.2rem -1.2rem -1.2rem 1.2rem; z-index: -1;
  border: 1px solid var(--accent); border-radius: var(--radius-lg); opacity: .5; pointer-events: none;
}
.apt-flip .gallery-frame::before { inset: 1.2rem 1.2rem -1.2rem -1.2rem; }
@media (max-width: 980px) {
  .gallery-frame::before, .apt-flip .gallery-frame::before { inset: .8rem -.6rem -.6rem .8rem; }
}
@media (prefers-reduced-motion: no-preference) {
  .js .apt .gallery-frame::before { opacity: 0; translate: -12px -12px; }
  .js .apt.in .gallery-frame::before { opacity: .5; translate: 0 0; transition: opacity 1.2s .9s ease, translate 1.4s .9s var(--ease); }
}
.thumbs {
  display: flex; flex-wrap: nowrap; gap: .55rem; margin-top: 2rem; padding: 2px 0 6px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, #000 0, #000 88%, transparent 100%);
}
.thumbs::-webkit-scrollbar { display: none; }
.thumbs button { flex: 0 0 auto; width: 88px; scroll-snap-align: start; }
.thumbs button:last-child { margin-right: 2.5rem; }
@media (max-width: 640px) { .thumbs button { width: 76px; } .thumbs { margin-top: 1.5rem; } }
.apt > .gallery, .apt > .apt-body, .gallery-frame, .thumbs { min-width: 0; max-width: 100%; }

/* ============================================================
   Prestaties: lagen die de GPU los kan verschuiven
   ============================================================ */
.landscape { overflow: hidden; }
.land, .land > .lay { position: absolute; inset: 0; }
.land-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: hidden; }
.landscape .lay, .frond-wrap, .flock, .aura, .clouds, .veil, .halo, .starfield, .orb-svg { will-change: transform; }
@media (prefers-reduced-motion: no-preference) {
  .js .landscape .intro { opacity: .001; transform: translate3d(0, 60px, 0); }
  .is-ready .landscape .intro { opacity: 1; transform: none; }
  .js .orb { opacity: .001; }
  .js .frond-wrap { opacity: .001; }
  .js .hero-info { opacity: .001; }
}

/* palmbladeren wiegen als geheel (geen hertekening van elk blaadje) */
.frond .sway { animation: none !important; }
.frond { transform-origin: 7.7% 90.5%; }
.frond-r .frond { transform: none; }
.frond-r { scale: -1 1; transform-origin: center; }
@media (prefers-reduced-motion: no-preference) {
  .frond { animation: swayR 8s ease-in-out infinite alternate; will-change: rotate; }
  .frond-2 { animation-duration: 10s; animation-delay: -3s; }
}
@keyframes swayR { from { rotate: -2.5deg; } to { rotate: 2deg; } }

/* zware effecten vervangen door lichtere varianten */
.curtain.lift .curtain-inner { filter: none !important; }
.tonight a { backdrop-filter: none; -webkit-backdrop-filter: none; background: color-mix(in srgb, #fff 20%, transparent); }
.hero[data-phase="night"] .tonight a, .hero[data-phase="dusk"] .tonight a { background: rgba(8, 24, 32, .32); }
.hero::after { mix-blend-mode: normal; opacity: .035; }
.orb .sun-rays { filter: none !important; }
@media (prefers-reduced-motion: no-preference) {
  .rays { animation: raysBreath 9s ease-in-out infinite alternate; }
}
@keyframes raysBreath { from { opacity: calc(var(--rays, .5) * .8); } to { opacity: var(--rays, .5); } }
@media (max-width: 640px) {
  .aura { filter: blur(40px); }
  .frond { filter: none; }
}

/* ============================================================
   Zachte vormen zonder live vervaging (veel lichter om te tekenen)
   ============================================================ */
.aura, .clouds, .veil { filter: none !important; }
.aura { border-radius: 0; background: none !important; }
.aura.a1 { background-image: radial-gradient(closest-side, color-mix(in srgb, var(--aura1, #CFE8F2) 90%, transparent), color-mix(in srgb, var(--aura1, #CFE8F2) 45%, transparent) 45%, transparent) !important; }
.aura.a2 { background-image: radial-gradient(closest-side, color-mix(in srgb, var(--aura2, #fff) 90%, transparent), color-mix(in srgb, var(--aura2, #fff) 45%, transparent) 45%, transparent) !important; }
.aura.a3 { background-image: radial-gradient(closest-side, color-mix(in srgb, var(--aura3, #BFE0EA) 90%, transparent), color-mix(in srgb, var(--aura3, #BFE0EA) 45%, transparent) 45%, transparent) !important; }
.clouds.c1 { background-image:
  radial-gradient(ellipse 200px 46px at 160px 60px, var(--cloud, #fff) 0%, color-mix(in srgb, var(--cloud, #fff) 55%, transparent) 45%, transparent 100%),
  radial-gradient(ellipse 140px 34px at 260px 46px, var(--cloud, #fff) 0%, color-mix(in srgb, var(--cloud, #fff) 55%, transparent) 45%, transparent 100%),
  radial-gradient(ellipse 250px 42px at 760px 90px, var(--cloud, #fff) 0%, color-mix(in srgb, var(--cloud, #fff) 55%, transparent) 45%, transparent 100%),
  radial-gradient(ellipse 160px 32px at 880px 76px, var(--cloud, #fff) 0%, color-mix(in srgb, var(--cloud, #fff) 55%, transparent) 45%, transparent 100%) !important; }
.clouds.c2 { background-image:
  radial-gradient(ellipse 290px 36px at 420px 40px, var(--cloud, #fff) 0%, color-mix(in srgb, var(--cloud, #fff) 55%, transparent) 45%, transparent 100%),
  radial-gradient(ellipse 190px 30px at 1180px 70px, var(--cloud, #fff) 0%, color-mix(in srgb, var(--cloud, #fff) 55%, transparent) 45%, transparent 100%) !important; }
.veil { border-radius: 0; background: radial-gradient(closest-side, var(--veil-c, #C9D6E0), color-mix(in srgb, var(--veil-c, #C9D6E0) 40%, transparent) 50%, transparent) !important; height: 40px; }
.veil.v2 { height: 28px; }
@media (prefers-reduced-motion: no-preference) {
  .is-ready .orb { opacity: 1; }
  .is-ready .frond-wrap { opacity: 1; }
  .is-ready .hero-info { opacity: 1; }
}
.starfield { transition: opacity 1.5s; }

/* prijs: pulsatie start pas als de prijs zelf in beeld komt */
@media (prefers-reduced-motion: no-preference) {
  .js .apt.in .price .amount { animation: none; }
  .js .apt.in .price strong { opacity: .001; filter: blur(6px); translate: 0 8px; transition: none; }
  .js .apt .price.is-seen strong { opacity: 1; filter: blur(0); translate: 0 0; transition: opacity 1s ease, filter 1.1s ease, translate 1.1s var(--ease); }
  .js .apt .price.is-seen .amount { animation: pricePulse 1.6s var(--ease) .7s both, pricePulse 1.6s var(--ease) 7s 1 both; }
  .js .apt.in .price > span { opacity: .001; transition: none; }
  .js .apt .price.is-seen > span { opacity: 1; transition: opacity 1s ease .5s; }
}

/* ============================================================
   Zon in losse lagen: alleen GPU-verschuivingen, geen hertekening
   ============================================================ */
.sun-layers { position: absolute; inset: 0; pointer-events: none; }
.hero[data-phase="night"] .sun-layers { display: none; }
.sun-layer { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; display: block; }
.sun-rays-box { position: absolute; inset: 0; }
.sun-rays-box .sun-layer { will-change: transform, opacity; }
.sun-glow2 { position: absolute; inset: -32%; border-radius: 50%; background: radial-gradient(circle, rgba(255, 246, 221, .9) 0%, rgba(255, 246, 221, .75) 30%, rgba(255, 231, 176, .3) 44%, transparent 64%); will-change: transform; }
.sun-grain { position: absolute; inset: 8.333%; border-radius: 50%; overflow: hidden; }
.sun-grain img { position: absolute; left: -25%; top: -25%; width: 150%; height: 150%; max-width: none; opacity: .38; will-change: transform; }
.sun-grain.g2 img { left: -40%; top: -40%; width: 180%; height: 180%; opacity: .2; }
.sun-hot { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255, 253, 242, .55), transparent 70%); will-change: transform; }
.sun-hot.h-a { width: 26%; height: 26%; left: 26%; top: 24%; }
.sun-hot.h-b { width: 20%; height: 20%; left: 52%; top: 50%; }
.sun-hot.h-c { width: 16%; height: 16%; left: 36%; top: 58%; }
@media (max-width: 980px) { .sun-rays-box { transform: scale(.8); } }
@media (prefers-reduced-motion: no-preference) {
  .rays-a { animation: spin 90s linear infinite, rayFade 5s ease-in-out infinite alternate; }
  .rays-b { animation: spinR 120s linear infinite, rayFade 7s ease-in-out -3s infinite alternate-reverse; }
  .sun-glow2 { animation: glowPulse 6s ease-in-out infinite alternate; }
  .sun-grain.g1 img { animation: spin 140s linear infinite; }
  .sun-grain.g2 img { animation: spinR 210s linear infinite; }
  .sun-hot.h-a { animation: hotA 13s ease-in-out infinite alternate; }
  .sun-hot.h-b { animation: hotB 17s ease-in-out infinite alternate; }
  .sun-hot.h-c { animation: hotA 11s ease-in-out -4s infinite alternate-reverse; }
}
@keyframes spinR { to { rotate: -360deg; } }
@keyframes rayFade { from { opacity: 1; } to { opacity: .45; } }
@keyframes glowPulse { from { scale: .94; opacity: .85; } to { scale: 1.08; opacity: 1; } }
@keyframes hotA { from { translate: 0 0; opacity: .7; } to { translate: 14% 10%; opacity: 1; } }
@keyframes hotB { from { translate: 0 0; opacity: 1; } to { translate: -12% -8%; opacity: .6; } }

/* lagen vooraf klaarzetten zodat de overgang na de intro niet hapert */
.cp { will-change: transform; }
.curtain-inner { will-change: opacity, transform; }
@media (prefers-reduced-motion: no-preference) {
    .js .hero .landscape .intro,
  .js .hero .frond-wrap,
  .js .hero .orb { will-change: transform, opacity; }
}

/* prijs: één animatie met twee zachte pulsen (twee losse animaties overschreven elkaar) */
@media (prefers-reduced-motion: no-preference) {
  .js .apt .price.is-seen .amount { animation: pricePulse2 8s var(--ease) .7s 1 both !important; }
  .apt:hover .price.is-seen .amount { animation: pricePulse 1.4s var(--ease) both !important; }
}
@keyframes pricePulse2 {
  0%   { scale: 1; color: inherit; text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
  4%   { scale: 1.07; color: var(--gold); text-shadow: 0 0 14px rgba(205, 176, 127, .5); }
  9%   { scale: .99; }
  13%  { scale: 1.035; text-shadow: 0 0 8px rgba(205, 176, 127, .3); }
  20%  { scale: 1; color: inherit; text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
  78%  { scale: 1; color: inherit; text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
  82%  { scale: 1.06; color: var(--gold); text-shadow: 0 0 12px rgba(205, 176, 127, .45); }
  87%  { scale: .995; }
  91%  { scale: 1.025; }
  100% { scale: 1; color: inherit; text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
}

/* ============================================================
   Prijs: altijd goud, snelle doorlopende zachte pulsatie
   ============================================================ */
:root { --price-c: #9A7948; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --price-c: #D4B98A; } }
:root[data-theme="dark"] { --price-c: #D4B98A; }
.price strong .amount { color: var(--price-c); }
@media (prefers-reduced-motion: no-preference) {
  .js .apt .price.is-seen strong { transition: opacity .45s ease, filter .5s ease, translate .5s var(--ease) !important; }
  .js .apt .price.is-seen > span { transition: opacity .5s ease .15s !important; }
  .js .apt .price.is-seen .amount,
  .apt:hover .price.is-seen .amount { animation: priceLoop 2.4s ease-in-out .25s infinite both !important; }
}
@keyframes priceLoop {
  0%   { scale: 1;     text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
  30%  { scale: 1.05;  text-shadow: 0 0 14px rgba(205, 176, 127, .55); }
  50%  { scale: .995;  text-shadow: 0 0 6px rgba(205, 176, 127, .25); }
  65%  { scale: 1.015; text-shadow: 0 0 8px rgba(205, 176, 127, .3); }
  100% { scale: 1;     text-shadow: 0 0 0 rgba(205, 176, 127, 0); }
}

/* ============================================================
   Zon: zachte lichtsluiers en een rustige ademhaling
   ============================================================ */
.sun-rays-box { display: none; }
.sun-veils { position: absolute; inset: 0; pointer-events: none; }
.sun-veil {
  position: absolute; inset: -95%; border-radius: 50%; will-change: transform, opacity;
  -webkit-mask: radial-gradient(circle, transparent 17%, #000 22%, rgba(0,0,0,.75) 32%, rgba(0,0,0,.32) 45%, transparent 64%);
          mask: radial-gradient(circle, transparent 17%, #000 22%, rgba(0,0,0,.75) 32%, rgba(0,0,0,.32) 45%, transparent 64%);
}
.sun-veil.v-a {
  background: conic-gradient(from 8deg,
    rgba(255, 222, 160, 0) 0deg, rgba(255, 222, 160, .62) 9deg, rgba(255, 222, 160, 0) 24deg,
    rgba(255, 222, 160, 0) 40deg, rgba(255, 232, 180, .5) 52deg, rgba(255, 232, 180, 0) 70deg,
    rgba(255, 222, 160, 0) 96deg, rgba(255, 222, 160, .58) 108deg, rgba(255, 222, 160, 0) 126deg,
    rgba(255, 222, 160, 0) 150deg, rgba(255, 232, 180, .46) 163deg, rgba(255, 232, 180, 0) 184deg,
    rgba(255, 222, 160, 0) 208deg, rgba(255, 222, 160, .6) 222deg, rgba(255, 222, 160, 0) 240deg,
    rgba(255, 222, 160, 0) 262deg, rgba(255, 232, 180, .48) 276deg, rgba(255, 232, 180, 0) 294deg,
    rgba(255, 222, 160, 0) 318deg, rgba(255, 222, 160, .55) 331deg, rgba(255, 222, 160, 0) 350deg);
}
.sun-veil.v-b {
  inset: -70%;
  background: conic-gradient(from 31deg,
    rgba(255, 250, 235, 0) 0deg, rgba(255, 246, 225, .5) 14deg, rgba(255, 250, 235, 0) 34deg,
    rgba(255, 250, 235, 0) 70deg, rgba(255, 246, 225, .45) 88deg, rgba(255, 250, 235, 0) 110deg,
    rgba(255, 250, 235, 0) 140deg, rgba(255, 246, 225, .52) 158deg, rgba(255, 250, 235, 0) 178deg,
    rgba(255, 250, 235, 0) 214deg, rgba(255, 246, 225, .42) 232deg, rgba(255, 250, 235, 0) 252deg,
    rgba(255, 250, 235, 0) 286deg, rgba(255, 246, 225, .5) 304deg, rgba(255, 250, 235, 0) 326deg);
}
.hero[data-phase="dawn"] .sun-veil, .hero[data-phase="dusk"] .sun-veil { filter: sepia(.35) saturate(1.4); }
.sun-corona { position: absolute; inset: -60%; border-radius: 50%; pointer-events: none; will-change: transform, opacity;
  background: radial-gradient(circle, rgba(255, 244, 214, .5) 0%, rgba(255, 238, 198, .28) 26%, rgba(255, 230, 180, .1) 42%, transparent 62%); }
.sun-glow2 { background: radial-gradient(circle, rgba(255, 248, 228, .95) 0%, rgba(255, 246, 221, .7) 30%, rgba(255, 236, 190, .25) 46%, transparent 66%) !important; }
.sun-edge { position: absolute; inset: 4%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 66%, rgba(255, 240, 205, .5) 71%, rgba(255, 240, 205, .18) 76%, transparent 82%); }
.sun-hot { opacity: .8; }
@media (max-width: 980px) { .sun-veils { transform: scale(.85); } }
@media (prefers-reduced-motion: no-preference) {
  .sun-veil.v-a { animation: spin 260s linear infinite, veilBreath 10s ease-in-out infinite alternate !important; }
  .sun-veil.v-b { animation: spinR 380s linear infinite, veilBreath 13s ease-in-out -5s infinite alternate-reverse !important; }
  .sun-corona { animation: sunBreath 9s ease-in-out infinite alternate !important; }
  .sun-glow2 { animation: sunBreathInner 9s ease-in-out -1.5s infinite alternate !important; }
  .sun-edge { animation: edgeBreath 9s ease-in-out infinite alternate; }
  .sun-hot.h-a { animation: hotA 22s ease-in-out infinite alternate !important; }
  .sun-hot.h-b { animation: hotB 28s ease-in-out infinite alternate !important; }
  .sun-hot.h-c { animation: hotA 19s ease-in-out -6s infinite alternate-reverse !important; }
  .hero:not([data-phase="night"]) .halo.h1 { animation: haloSoft 11s ease-in-out infinite alternate !important; }
  .hero:not([data-phase="night"]) .halo.h2 { animation: haloSoft 14s ease-in-out -4s infinite alternate-reverse !important; }
}
@keyframes veilBreath { from { opacity: .7; scale: .985; } to { opacity: 1; scale: 1.025; } }
@keyframes sunBreath { from { opacity: .75; scale: .97; } to { opacity: 1; scale: 1.04; } }
@keyframes sunBreathInner { from { opacity: .9; scale: .98; } to { opacity: 1; scale: 1.03; } }
@keyframes edgeBreath { from { opacity: .6; } to { opacity: 1; } }
@keyframes haloSoft { from { opacity: .8; scale: .98; } to { opacity: 1; scale: 1.03; } }

/* lichtsluiers als vooraf berekende afbeeldingen: zelfde zachte stralen, veel lichter */
img.sun-veil { position: absolute; width: auto; height: auto; max-width: none; border-radius: 0; background: none !important; -webkit-mask: none !important; mask: none !important; filter: none !important; }
img.sun-veil.v-a { inset: -95%; width: 290%; height: 290%; }
img.sun-veil.v-b { inset: -70%; width: 240%; height: 240%; }
.hero[data-phase="dawn"] img.sun-veil, .hero[data-phase="dusk"] img.sun-veil { filter: none !important; opacity: .9; }
@media (prefers-reduced-motion: no-preference) {
  img.sun-veil.v-a { animation: spin 260s linear infinite, veilFade 10s ease-in-out infinite alternate !important; }
  img.sun-veil.v-b { animation: spinR 380s linear infinite, veilFade 13s ease-in-out -5s infinite alternate-reverse !important; }
}
@keyframes veilFade { from { opacity: .62; } to { opacity: 1; } }

/* minder lagen: één sluier, één ademende gloed (corona + rand samengevoegd) */
.sun-glow2 {
  inset: -60% !important;
  background: radial-gradient(circle,
    rgba(255, 250, 235, .95) 0%, rgba(255, 246, 221, .8) 16%, rgba(255, 240, 205, .62) 22%,
    rgba(255, 236, 195, .42) 27%, rgba(255, 234, 190, .26) 36%, rgba(255, 230, 180, .12) 48%, transparent 66%) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .sun-glow2 { animation: sunBreath 9s ease-in-out infinite alternate !important; }
  img.sun-veil.v-a { animation: spin 300s linear infinite, veilFade 11s ease-in-out infinite alternate !important; }
}

/* ============================================================
   Verschijningen gekoppeld aan het scrollen
   Elk blok krijgt --p (0 → 1) volgens zijn plaats op het scherm.
   Geen vaste duur: stopt als de vinger stopt, keert terug bij teruggaan.
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .sl { --p: 0; }

  /* blokken */
  .js .sec-head[data-reveal], .js .intro-inner[data-reveal], .js .res-copy[data-reveal], .js .book-grid[data-reveal],
  .js .info-grid[data-reveal], .js .loc-grid[data-reveal], .js .contact-inner[data-reveal] {
    opacity: clamp(0, calc(var(--p) * 2.2), 1) !important;
    transform: translate3d(0, calc((1 - var(--p)) * 34px), 0) !important;
    transition: none !important;
  }
  .js .apt[data-reveal], .js .res-fig[data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }

  /* titels woord per woord */
  .js [data-reveal] .split .w > span {
    --wp: clamp(0, calc((var(--p) - var(--wi, 0) * .4) * 2.2), 1);
    transform: translate3d(0, calc((1 - var(--wp)) * 110%), 0) !important;
    transition: none !important;
  }
  .js [data-reveal] h2::after { transform: scaleX(clamp(0, calc(var(--p) * 1.8 - .6), 1)) !important; transition: none !important; }

  /* galerij */
  .js .apt .gallery-main { --pg: clamp(0, calc(var(--p) * 1.8), 1); clip-path: inset(0 0 calc((1 - var(--pg)) * 100%) 0) !important; transition: none !important; }
  .js .apt .gallery-main img { scale: calc(1.18 - var(--pg) * .18) !important; transition: opacity .3s ease !important; }
  .js .apt .gallery-frame::before {
    --pf: clamp(0, calc(var(--p) * 2 - .6), 1);
    opacity: calc(var(--pf) * .5) !important;
    translate: calc((1 - var(--pf)) * -12px) calc((1 - var(--pf)) * -12px) !important;
    transition: none !important;
  }
  .js .apt .gallery-main .glint { animation: none !important; translate: calc(clamp(0, calc((var(--p) - .35) / .65), 1) * 280% - 140%) 0 !important; }

  /* miniaturen en lijsten */
  .js .thumbs > button, .js .stagger > * {
    --pi: clamp(0, calc((var(--p) - var(--si, 0) * .45) * 2.4), 1);
    opacity: var(--pi) !important;
    translate: 0 calc((1 - var(--pi)) * 14px) !important;
    transition: none !important;
  }
  .js .thumbs > button:not([aria-current]):not(:hover) { opacity: calc(var(--pi) * .55) !important; }

  /* residentie */
  .js .res-fig .res-img { --pr: clamp(0, calc(var(--p) * 1.7), 1); clip-path: inset(calc((1 - var(--pr)) * 100%) 0 0 0) !important; transition: none !important; }
  .js .res-fig .res-img img { scale: calc(1.22 - var(--pr) * .22) !important; transition: none !important; }
  .js .res-fig figcaption { opacity: clamp(0, calc(var(--p) * 2 - 1), 1) !important; transition: none !important; }
  .js .res-fig .glint { animation: none !important; translate: calc(clamp(0, calc((var(--p) - .4) / .6), 1) * 280% - 140%) 0 !important; }

  /* kerncijfers: lijnen */
  .js .facts::before, .js .facts::after { transform: scaleX(clamp(0, calc(var(--p) * 1.5), 1)) !important; transition: none !important; }

  /* prijs (de pulsatie zelf blijft doorlopen) */
  .js .apt .price strong, .js .apt .price.is-seen strong {
    opacity: clamp(0, calc(var(--p) * 2.5), 1) !important; filter: none !important;
    translate: 0 calc((1 - var(--p)) * 8px) !important; transition: none !important;
  }
  .js .apt .price > span, .js .apt .price.is-seen > span { opacity: clamp(0, calc(var(--p) * 2.5 - .4), 1) !important; transition: none !important; }

  /* ornament en footer-embleem tekenen mee */
  .js .ornament .em-line, .js .ornament .em-wave, .js .footer-emblem .em-line, .js .footer-emblem .em-wave {
    stroke-dashoffset: calc(1 - clamp(0, calc(var(--p) * 1.8), 1)) !important; transition: none !important;
  }
  .js .ornament .em-sun, .js .footer-emblem .em-sun {
    opacity: clamp(0, calc(var(--p) * 2.2 - .6), 1) !important;
    translate: 0 calc((1 - clamp(0, calc(var(--p) * 2 - .5), 1)) * 16px) !important; transition: none !important;
  }
  .js .ornament .em-pine, .js .ornament .em-star, .js .footer-emblem .em-pine, .js .footer-emblem .em-star {
    opacity: clamp(0, calc(var(--p) * 2.2 - 1.1), 1) !important; translate: 0 0 !important; transition: none !important;
  }
  .js .footer .footer-waves .fw { stroke-dashoffset: calc(3000 - 3000 * clamp(0, calc(var(--p) * 1.6), 1)) !important; transition: none !important; }
}

/* ============================================================
   Rijkere animaties, volledig gekoppeld aan het scrollen
   --p = binnenkomen (0 → 1), --q = doorgang door het scherm (0 → 1)
   ============================================================ */
@media (prefers-reduced-motion: no-preference) {
  .js .sl { --q: .5; }

  /* blokken: omhoog, licht inzoomen */
  .js .sec-head[data-reveal], .js .intro-inner[data-reveal], .js .res-copy[data-reveal], .js .book-grid[data-reveal],
  .js .info-grid[data-reveal], .js .loc-grid[data-reveal], .js .contact-inner[data-reveal] {
    opacity: clamp(0, calc(var(--p) * 2.5), 1) !important;
    transform: translate3d(0, calc((1 - var(--p)) * 70px), 0) scale(calc(.95 + var(--p) * .05)) !important;
  }
  .js .book-grid[data-reveal] { transform: none !important; }

  /* titels: woorden rijzen op met een lichte draai */
  .js [data-reveal] .split .w > span {
    --wp: clamp(0, calc((var(--p) - var(--wi, 0) * .45) * 2), 1);
    transform: translate3d(0, calc((1 - var(--wp)) * 115%), 0) rotate(calc((1 - var(--wp)) * 7deg)) !important;
    transform-origin: 0 100%;
  }
  .js [data-reveal] h2::after { transform: scaleX(clamp(0, calc(var(--p) * 1.6 - .45), 1)) !important; }

  /* appartement: elk onderdeel schuift in vanaf de zijkant */
  .js .apt-body > .sl:not(.stagger) {
    opacity: clamp(0, calc(var(--p) * 2.5), 1) !important;
    transform: translate3d(calc((1 - var(--p)) * 46px), 0, 0) !important;
    transition: none !important;
  }
  .js .apt-flip .apt-body > .sl:not(.stagger) { transform: translate3d(calc((1 - var(--p)) * -46px), 0, 0) !important; }

  /* galerij: onthullen, uitzoomen, kader schuift bij */
  .js .apt .gallery-main { --pg: clamp(0, calc(var(--p) * 1.4), 1); clip-path: inset(0 0 calc((1 - var(--pg)) * 100%) 0) !important; }
  .js .apt .gallery-main img { scale: calc(1.32 - var(--pg) * .32) !important; }
  .js .apt .gallery-frame::before {
    --pf: clamp(0, calc(var(--p) * 1.6 - .4), 1);
    opacity: calc(var(--pf) * .5) !important;
    translate: calc((1 - var(--pf)) * -34px) calc((1 - var(--pf)) * -34px) !important;
  }
  .js .apt .photo-badge { --pb: clamp(0, calc((var(--p) - .45) * 2.5), 1); opacity: var(--pb) !important; translate: calc((1 - var(--pb)) * -30px) 0 !important; transition: none !important; }

  /* miniaturen: cascade vanaf rechts */
  .js .thumbs > button {
    --pi: clamp(0, calc((var(--p) - var(--si, 0) * .5) * 2.2), 1);
    translate: calc((1 - var(--pi)) * 44px) 0 !important;
    scale: calc(.82 + var(--pi) * .18) !important;
  }

  /* lijsten: items schuiven in, iconen draaien mee */
  .js .stagger > * {
    /* iets snellere cascade: ook een half zichtbare lijst leest volledig uit */
    --pi: clamp(0, calc((var(--p) - var(--si, 0) * .4) * 2.6), 1);
    opacity: var(--pi) !important;
    translate: calc((1 - var(--pi)) * -30px) 0 !important;
  }
  .js .stagger > * .ic { rotate: calc((1 - var(--pi)) * -120deg); scale: calc(.4 + var(--pi) * .6); transition: none !important; }
  .js .facts > div { translate: 0 calc((1 - var(--pi)) * 40px) !important; scale: calc(.86 + var(--pi) * .14) !important; }
  .js .apt-choice > * { translate: calc((1 - var(--pi)) * 36px) 0 !important; }
  .js .contact-actions > * { translate: 0 calc((1 - var(--pi)) * 26px) !important; }
  .js .footer .wrap > * { translate: 0 calc((1 - var(--pi)) * 24px) !important; }

  /* prijs */
  .js .apt .price strong, .js .apt .price.is-seen strong { translate: 0 calc((1 - var(--p)) * 18px) !important; }

  /* residentie */
  .js .res-fig .res-img { --pr: clamp(0, calc(var(--p) * 1.35), 1); }
  .js .res-fig .res-img img { scale: calc(1.38 - var(--pr) * .38) !important; }
  .js .res-fig figcaption { translate: calc((1 - clamp(0, calc(var(--p) * 2 - 1), 1)) * -24px) 0; }
  .js .res-copy .res-name { translate: calc((1 - var(--p)) * -40px) 0; transition: none !important; }

  /* praktisch, ligging, boeken */
  .js .times.sl strong { display: inline-block; translate: calc((1 - var(--p)) * -60px) 0; opacity: clamp(0, calc(var(--p) * 2.2), 1); transition: none !important; }
  .js .map.sl { opacity: clamp(0, calc(var(--p) * 2.2), 1) !important; transform: scale(calc(.88 + var(--p) * .12)) rotate(calc((1 - var(--p)) * -3deg)) !important; transition: none !important; }
  .js .step.sl { transform: translate3d(0, calc((1 - var(--p)) * 44px), 0); transition: opacity .4s ease !important; }
  .js .summary.sl { transform: translate3d(calc((1 - var(--p)) * 50px), 0, 0); transition: none !important; }

  /* doorlopende effecten tijdens de hele doorgang */
  .js .contact.sl .contact-bg img { scale: calc(1.16 - var(--q) * .16); transition: none !important; }
  .js .apartments.sl .deco-arcs { rotate: calc(var(--q) * 70deg); }
  .js .info.sl .deco-pine { rotate: calc((var(--q) - .5) * 14deg); scale: calc(.92 + var(--q) * .16); }
  .js .residence.sl .res-a .res-img img { scale: calc(1.08 - var(--q) * .08) !important; }
}

/* ============================================================
   Zon: licht dat naadloos in het blauw overloopt + zachte pulsgolf
   ============================================================ */
/* gloed: van warm wit naar volledig transparant, zonder zichtbare rand */
.sun-glow2 {
  inset: -70% !important;
  background: radial-gradient(circle closest-side,
    rgba(255, 251, 238, .92) 0%, rgba(255, 249, 232, .78) 17%, rgba(255, 247, 229, .56) 27%,
    rgba(255, 247, 232, .36) 37%, rgba(255, 248, 238, .21) 48%, rgba(255, 250, 244, .11) 60%,
    rgba(255, 252, 249, .05) 73%, rgba(255, 254, 252, .018) 86%, rgba(255, 255, 255, 0) 100%) !important;
}
.hero[data-phase="dawn"] .sun-glow2, .hero[data-phase="dusk"] .sun-glow2 {
  background: radial-gradient(circle closest-side,
    rgba(255, 240, 214, .9) 0%, rgba(255, 234, 204, .72) 18%, rgba(255, 228, 196, .48) 29%,
    rgba(255, 226, 196, .28) 41%, rgba(255, 228, 204, .14) 54%, rgba(255, 232, 214, .06) 68%,
    rgba(255, 236, 224, .02) 84%, rgba(255, 240, 230, 0) 100%) !important;
}
/* halo's van de bol overdag: neutraal wit, zeer geleidelijk */
.hero:not([data-phase="night"]) .halo.h1 {
  background: radial-gradient(circle closest-side, rgba(255, 249, 236, .3) 0%, rgba(255, 250, 240, .18) 30%, rgba(255, 251, 245, .08) 58%, rgba(255, 253, 250, .025) 80%, rgba(255, 255, 255, 0) 100%) !important;
}
.hero:not([data-phase="night"]) .halo.h2 {
  background: radial-gradient(circle closest-side, rgba(255, 251, 242, .14) 0%, rgba(255, 252, 246, .07) 40%, rgba(255, 254, 250, .02) 72%, rgba(255, 255, 255, 0) 100%) !important;
}
/* lichtbundel in de lucht: geen gele vlek meer */
.rays { background:
    radial-gradient(circle at var(--orb-x) var(--orb-y), rgba(255, 250, 238, .28) 0, rgba(255, 252, 244, .12) 14%, rgba(255, 255, 255, 0) 32%),
    repeating-conic-gradient(from 0deg at var(--orb-x) var(--orb-y), rgba(255, 255, 255, .03) 0deg 1.2deg, transparent 1.2deg 6deg) !important; }
/* heel fijne, zachte rand rond de schijf */
.sun-layers::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, transparent 82%, rgba(255, 246, 224, .5) 84.5%, rgba(255, 248, 232, .22) 89%, rgba(255, 250, 240, .06) 95%, transparent 100%);
}

/* pulsgolf in plaats van knipperende cirkel: een zachte lichtgolf zonder rand */
.orb-hint {
  inset: -40% !important; border: 0 !important; border-radius: 50%; opacity: 0;
  background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0) 38%, rgba(255, 253, 246, .2) 56%, rgba(255, 253, 248, .08) 72%, rgba(255, 255, 255, 0) 90%);
  will-change: transform, opacity;
}
@media (prefers-reduced-motion: no-preference) {
  .is-ready .orb-hint { animation: sunWave 7.5s cubic-bezier(.25, .6, .3, 1) 2s infinite !important; }
  .hero[data-phase="night"] .orb-hint { animation-duration: 10s !important; }
}
@keyframes sunWave {
  0%   { opacity: 0; scale: .55; }
  18%  { opacity: .85; }
  70%  { opacity: .18; }
  100% { opacity: 0; scale: 1.9; }
}

/* ============================================================
   AFWERKING — zon, vogels, overgangen, rust in de beweging
   ============================================================ */
html { text-rendering: optimizeLegibility; font-kerning: normal; -webkit-tap-highlight-color: transparent; }

/* zon: fijnere oppervlakte en een gloed die over de vogels valt (ze vliegen vóór de zon, maar baden in het licht) */
.sun-grain img { opacity: .28; }
.sun-grain.g1 img { filter: none; }
.sun-bloom {
  position: absolute; left: var(--orb-x); top: var(--orb-y); translate: -50% -50%;
  width: calc(clamp(110px, 11vw, 176px) * 1.9); aspect-ratio: 1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle closest-side, rgba(255, 252, 242, .5) 0%, rgba(255, 251, 240, .32) 24%, rgba(255, 252, 246, .14) 46%, rgba(255, 254, 251, .04) 70%, rgba(255, 255, 255, 0) 100%);
  mix-blend-mode: normal; opacity: .9; will-change: opacity, scale;
}
@media (max-width: 980px) { .sun-bloom { width: 150px; } }
@media (max-width: 640px) { .sun-bloom { width: 124px; } }
.hero[data-phase="night"] .sun-bloom { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .sun-bloom { animation: bloomBreath 9s ease-in-out infinite alternate; }
}
@keyframes bloomBreath { from { opacity: .7; scale: .96; } to { opacity: 1; scale: 1.04; } }

/* twee pulsgolven die elkaar aflossen: een rustig, doorlopend ritme */
.orb-hint-2 { inset: -40% !important; }
@media (prefers-reduced-motion: no-preference) {
  .is-ready .orb-hint { animation: sunWave 8s cubic-bezier(.22, .61, .36, 1) 2s infinite !important; }
  .is-ready .orb-hint-2 { animation: sunWave2 8s cubic-bezier(.22, .61, .36, 1) 6s infinite !important; }
  .hero[data-phase="night"] .orb-hint, .hero[data-phase="night"] .orb-hint-2 { animation-duration: 11s !important; }
}
@keyframes sunWave  { 0% { opacity: 0; scale: .6; } 22% { opacity: .7; } 65% { opacity: .16; } 100% { opacity: 0; scale: 1.85; } }
@keyframes sunWave2 { 0% { opacity: 0; scale: .7; } 25% { opacity: .45; } 70% { opacity: .1; } 100% { opacity: 0; scale: 2.2; } }

/* nevel die de hero zacht in de pagina laat overgaan */
.hero-mist { position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(40px, 7vh, 80px); z-index: 4; pointer-events: none;
  background: linear-gradient(180deg, rgba(248, 245, 239, 0) 0%, rgba(248, 245, 239, .35) 55%, var(--salt) 100%); }

/* lightbox: foto zweeft zacht binnen */
@media (prefers-reduced-motion: no-preference) {
  .lightbox.is-open .lb-stage img { animation: lbIn .7s cubic-bezier(.2, .7, .2, 1) both; }
  .lightbox.is-open .lb-btn { animation: fadeIn .8s .15s ease both; }
}
@keyframes lbIn { from { opacity: 0; scale: .96; } }

/* taalwissel: zachte overgang in plaats van een harde sprong */
html.is-leaving body { opacity: 0; transition: opacity .32s ease; }

/* animaties buiten beeld pauzeren: alles blijft soepel tijdens het scrollen */
html.hero-off .hero *, html.hero-off .hero *::before, html.hero-off .hero *::after,
.anim-off *, .anim-off *::before, .anim-off *::after { animation-play-state: paused !important; }

/* doorlopende scroll-effecten op de elementen zelf (geen herberekening van hele secties) */
@property --q { syntax: '<number>'; inherits: false; initial-value: .5; }
@media (prefers-reduced-motion: no-preference) {
  .js .contact-bg.sl img { scale: 1 !important; }
  .js .contact-bg.sl { scale: calc(1.16 - var(--q) * .16); }
  .js .deco-arcs.sl { rotate: calc(var(--q) * 70deg); }
  .js .deco-pine.sl { rotate: calc((var(--q) - .5) * 14deg); scale: calc(.92 + var(--q) * .16); }
  .js .res-a.sl .res-img img { scale: calc(1.38 - var(--pr) * .38) !important; }
}
@media (prefers-reduced-motion: no-preference) {
  .hero[data-phase="night"] .orb-hint { animation-name: moonWave !important; }
  .hero[data-phase="night"] .orb-hint-2 { animation-name: moonWave !important; }
}
@keyframes moonWave { 0% { opacity: 0; scale: .7; } 25% { opacity: .28; } 70% { opacity: .06; } 100% { opacity: 0; scale: 1.9; } }

/* waarborg en samenwerking */
.sum-deposit { display: flex; justify-content: space-between; gap: 1rem; margin: -.8rem 0 1.2rem; font-size: .85rem; opacity: .75; }
.arrival h3 { font-size: 1.6rem; margin: 0 0 .7rem; color: var(--gold-2); }
.arrival p { opacity: .9; }
.partner { display: grid; gap: .1rem; margin-top: 1.2rem; }
.partner span { font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; opacity: .65; }
.partner strong { font-family: var(--head); font-weight: 500; font-size: 1.8rem; letter-spacing: .01em; }

/* ============================================================
   HERO MET ECHTE FOTO — vervangt het getekende landschap
   ============================================================ */
.hero { background: var(--deep); }
.hero-photo { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero-photo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center 18%;
  transform-origin: center 30%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: heroDrift 34s ease-in-out infinite alternate; }
  .js .hero-photo img { opacity: .001; }
  .is-ready .hero-photo img { opacity: 1; transition: opacity 1.6s ease; }
}
@keyframes heroDrift { from { transform: scale(1.04); } to { transform: scale(1.13) translate3d(0, -1.2%, 0); } }

/* zachte verduistering: links voor de tekst, onderaan voor de overgang */
.hero-shade { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6, 22, 30, .82) 0%, rgba(6, 22, 30, .62) 26%, rgba(6, 22, 30, .22) 52%, rgba(6, 22, 30, .04) 72%, transparent 88%),
    linear-gradient(180deg, rgba(6, 22, 30, .5) 0%, rgba(6, 22, 30, .05) 22%, transparent 45%),
    linear-gradient(0deg, rgba(8, 24, 32, .72) 0%, rgba(8, 24, 32, .28) 16%, transparent 34%);
}
@media (max-width: 980px) {
  .hero-photo img { object-position: center 24%; }
  .hero-shade { background:
    linear-gradient(180deg, rgba(6, 22, 30, .62) 0%, rgba(6, 22, 30, .18) 16%, rgba(6, 22, 30, .3) 42%, rgba(6, 22, 30, .78) 72%, rgba(8, 24, 32, .88) 100%); }
}

/* de lucht ligt nu óver de foto: alleen licht, geen eigen achtergrond meer */
.hero { background-image: none !important; }
.sky { z-index: 1; }
.hero-inner { z-index: 5; }
.hero::before { background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 58%, rgba(4, 16, 22, .3) 100%); }
.aura, .clouds, .veil, .starfield { display: none; }
.rays { opacity: calc(var(--rays, .5) * .55); }

/* de zon zit al in de foto: alleen een gloed op die plek, geen schijf */
.orb { cursor: default; }
.orb-svg, .sun-disk, .sun-grain, .sun-hot, .sun-top, .halo.ring { display: none; }
.hero[data-phase="night"] .orb-svg { display: block; }
.hero[data-phase="night"] .sun-layers { display: none; }
.orb .sun-layers { mix-blend-mode: screen; }
.sun-glow2 { opacity: .85; }
.sun-bloom { mix-blend-mode: screen; opacity: .55; }
.hero[data-phase="night"] .sun-bloom { display: none; }

/* tekst altijd leesbaar op de foto */
.hero-copy { color: var(--light); }
.hero[data-phase="day"] .hero-copy, .hero[data-phase="dawn"] .hero-copy,
.hero[data-phase="dusk"] .hero-copy, .hero[data-phase="night"] .hero-copy {
  text-shadow: 0 1px 2px rgba(4, 16, 22, .45), 0 2px 30px rgba(4, 16, 22, .5);
}
.hero .place, .hero .lead { opacity: .95; }
.hero .tonight a { background: rgba(10, 28, 36, .42); border-color: rgba(255, 255, 255, .28); color: var(--light); }
.hero .tonight a:hover { background: rgba(10, 28, 36, .62); }
.hero-info { color: var(--light); background: rgba(10, 28, 36, .34); border-color: rgba(255, 255, 255, .22); }
.topbar:not(.is-stuck) { color: var(--light); }
.scroll-cue { background: rgba(255, 255, 255, .4); }

/* zachte overgang naar de pagina eronder */
.hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(60px, 10vh, 120px); z-index: 6;
  pointer-events: none; opacity: 1; mix-blend-mode: normal;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--salt) 55%, transparent) 62%, var(--salt) 100%); }

/* ============================================================
   GALERIJ IN PORTRET — de foto's zijn staand
   ============================================================ */
.gallery-main { aspect-ratio: 3 / 4; }
.thumbs button { width: 72px; aspect-ratio: 3 / 4; }
@media (max-width: 640px) { .thumbs button { width: 62px; } }
.apt { align-items: center; }
@media (min-width: 981px) {
  .apt { grid-template-columns: .92fr 1fr; }
  .apt-flip { grid-template-columns: 1fr .92fr; }
}
.res-a .res-img, .res-b .res-img { aspect-ratio: 3 / 4; }
.res-c .res-img { aspect-ratio: 3 / 4; }
.map { aspect-ratio: 10 / 8; }

/* voorzieningen: drie kolommen als er veel zijn */
@media (min-width: 981px) { .amenities { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- hero met foto: alleen een zachte gloed op de echte zon ---- */
.halo, .orb-hint, .sun-veils, .sun-rays-box, .flares, .rays { display: none !important; }
.orb { width: clamp(90px, 9vw, 150px); }
.sun-glow2 { inset: -170% !important; opacity: .5;
  background: radial-gradient(circle closest-side,
    rgba(255, 246, 224, .5) 0%, rgba(255, 242, 214, .3) 22%, rgba(255, 240, 210, .15) 38%,
    rgba(255, 242, 220, .06) 56%, rgba(255, 255, 255, 0) 100%) !important; }
.sun-bloom { width: calc(clamp(90px, 9vw, 150px) * 3.4); opacity: .4;
  background: radial-gradient(circle closest-side, rgba(255, 250, 235, .4) 0%, rgba(255, 248, 230, .18) 30%, rgba(255, 252, 246, .05) 58%, rgba(255,255,255,0) 100%); }
.hero[data-phase="dusk"] .sun-glow2, .hero[data-phase="dawn"] .sun-glow2 { opacity: .62; }
.hero[data-phase="night"] .orb { width: clamp(70px, 7vw, 110px); }
.hero[data-phase="night"] .sun-glow2 { display: none; }
.hero[data-phase="night"] .orb-svg { display: block; }

/* 's nachts wordt de foto koeler en donkerder */
.hero-photo img { filter: saturate(1.02); transition: filter 1.5s; }
.hero[data-phase="night"] .hero-photo img { filter: brightness(.5) saturate(.72) hue-rotate(-8deg); }
.hero[data-phase="dawn"] .hero-photo img { filter: brightness(.92) saturate(1.02); }
.hero[data-phase="dusk"] .hero-photo img { filter: brightness(.86) saturate(1.06); }
.hero[data-phase="night"] .starfield { display: block; opacity: .9; }
.hero[data-phase="night"] .hero-shade { background:
  linear-gradient(100deg, rgba(4, 14, 22, .86) 0%, rgba(4, 14, 22, .7) 30%, rgba(4, 14, 22, .4) 58%, rgba(4, 14, 22, .22) 100%),
  linear-gradient(0deg, rgba(5, 16, 24, .8) 0%, rgba(5, 16, 24, .3) 18%, transparent 36%); }
@media (max-width: 980px) {
  .hero[data-phase="night"] .hero-shade { background:
    linear-gradient(180deg, rgba(4, 14, 22, .7) 0%, rgba(4, 14, 22, .3) 18%, rgba(4, 14, 22, .45) 44%, rgba(5, 16, 24, .86) 74%, rgba(5, 16, 24, .94) 100%); }
}

/* menubalk blijft leesbaar op de foto */
.topbar:not(.is-stuck) { text-shadow: 0 1px 10px rgba(4, 16, 22, .5); }
.topbar:not(.is-stuck)::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(5, 18, 26, .55) 0%, rgba(5, 18, 26, .18) 60%, transparent 100%); }
.topbar { isolation: isolate; }

/* ---- laatste bijwerking van de herofoto ---- */
/* de scherpe rand van de oude zonneschijf mag weg: de zon zit in de foto */
.sun-layers::after { display: none !important; }
.orb-hint, .orb-hint-2 { display: none !important; }

/* op gsm staat de foto rechtop: we snijden het lege gras onderaan weg */
@media (max-width: 980px) {
  .hero-photo img { height: 136%; object-position: center top; }
}
@media (max-width: 980px) and (prefers-reduced-motion: no-preference) {
  .hero-photo img { animation: heroDriftM 38s ease-in-out infinite alternate; }
}
@keyframes heroDriftM { from { transform: scale(1.02); } to { transform: scale(1.1) translate3d(0, -1%, 0); } }
@media (max-width: 980px) {
  .hero-shade { background:
    linear-gradient(180deg, rgba(6, 22, 30, .6) 0%, rgba(6, 22, 30, .3) 14%, rgba(6, 22, 30, .46) 34%, rgba(6, 22, 30, .5) 56%, rgba(6, 22, 30, .74) 78%, rgba(8, 24, 32, .9) 100%); }
}

/* de naam van het appartement is langer geworden: ruimte en nette afbreking */
.apt-body h3 { font-size: clamp(2.1rem, 3.2vw, 3.1rem); line-height: 1.08; text-wrap: balance; margin-bottom: .35rem; }
@media (max-width: 640px) { .apt-body h3 { font-size: clamp(1.9rem, 7.4vw, 2.5rem); } }

/* de sluitknop hoort in de hoek, niet in de rij met de pijlen */
.lightbox .lb-close { position: absolute; top: 1rem; right: 1rem; z-index: 2; }
@media (max-width: 640px) {
  .lightbox .lb-prev, .lightbox .lb-next { position: absolute; bottom: 1.2rem; }
  .lightbox .lb-prev { left: 28%; } .lightbox .lb-next { right: 28%; }
}

/* ============================================================
   MENUBALK — gerookt glas boven de foto, leesbaar van links tot rechts
   ============================================================ */
.topbar:not(.is-stuck) {
  color: #FAF8F4;
  text-shadow: none;
  background: linear-gradient(180deg, rgba(6, 22, 30, .72) 0%, rgba(6, 22, 30, .6) 100%);
  -webkit-backdrop-filter: blur(18px) saturate(1.1);
  backdrop-filter: blur(18px) saturate(1.1);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .12);
}
/* het oude dégradé met zijn harde rand mag weg */
.topbar:not(.is-stuck)::before { display: none; }
.topbar:not(.is-stuck) .nav a { opacity: 1; }
.topbar:not(.is-stuck) .nav a:hover { opacity: 1; }
.topbar:not(.is-stuck) .wm-sub { opacity: .8; }
/* de taalknoppen waren te flauw om nog te lezen */
.topbar:not(.is-stuck) .langs a { opacity: .78; }
.topbar:not(.is-stuck) .langs a:hover,
.topbar:not(.is-stuck) .langs a[aria-current] { opacity: 1; }
.is-stuck .langs a { opacity: .72; }
/* de gouden knop op een gouden zonsondergang: een fijne lichte rand licht hem los */
.topbar:not(.is-stuck) .btn-small {
  border-color: rgba(255, 255, 255, .4);
  box-shadow: 0 6px 20px -10px rgba(4, 16, 22, .9);
}
/* geen browserondersteuning voor blur: dan iets steviger tinten */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar:not(.is-stuck) { background: linear-gradient(180deg, rgba(6, 22, 30, .86) 0%, rgba(6, 22, 30, .78) 100%); }
}

/* De zachte overgang naar de pagina hoort ONDERAAN de hero.
   Een eerdere regel zette inset:0, waardoor "bottom" genegeerd werd en de
   crèmekleurige vervaging bovenaan terechtkwam: de vuile streep onder de menubalk. */
.hero::after { top: auto; bottom: -1px; height: clamp(60px, 10vh, 120px); }

/* ============================================================
   MENUBALK — lager, fijner, en weg bij het naar beneden scrollen
   ============================================================ */
.topbar {
  padding-block: .62rem;
  will-change: transform, opacity;
  /* weggaan mag traag en zacht zijn; terugkomen moet vlot aanvoelen (.is-back) */
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease),
              box-shadow .4s var(--ease),
              transform .78s cubic-bezier(.33, .02, .18, 1),
              opacity .55s cubic-bezier(.4, 0, .5, 1);
}
.topbar.is-stuck { padding-block: .44rem; }
/* glijdt weg in de richting waarin je scrollt, en vervaagt tegelijk */
.topbar.is-away { transform: translate3d(0, -104%, 0); opacity: 0; }
.topbar.is-back {
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease),
              box-shadow .4s var(--ease),
              transform .42s cubic-bezier(.16, .84, .3, 1),
              opacity .3s ease;
}
@media (prefers-reduced-motion: reduce) {
  .topbar { transition: background .4s, color .4s, opacity .3s; }
  .topbar.is-away { transform: none; opacity: 0; visibility: hidden; }
}

/* kleiner embleem, fijnere letters */
.brand .emblem { width: 38px; height: 43px; }
.is-stuck .brand .emblem { width: 27px; height: 30px; }
.wm-name { font-size: 1.32rem; letter-spacing: .005em; }
.wm-sub { font-size: .55rem; letter-spacing: .3em; }
.nav { gap: 1.5rem; }
.nav a { font-size: .86rem; font-weight: 400; letter-spacing: .015em; }
.langs a { font-size: .74rem; font-weight: 500; letter-spacing: .08em; padding: .26rem .42rem; }
.topbar .btn-small { padding: .46rem 1.05rem; font-size: .82rem; letter-spacing: .02em; }
@media (max-width: 980px) {
  .topbar { padding-block: .5rem; }
  .brand .emblem { width: 32px; height: 36px; }
  .wm-name { font-size: 1.18rem; }
}

/* ============================================================
   ALTIJD DEZELFDE LUCHT — zon en vogels, geen maan, geen filter
   ============================================================ */
/* de foto blijft zoals ze is, ook 's avonds en 's nachts */
.hero-photo img,
.hero[data-phase="night"] .hero-photo img,
.hero[data-phase="dawn"] .hero-photo img,
.hero[data-phase="dusk"] .hero-photo img { filter: none; }

/* geen maan en geen sterren meer */
.orb-svg, .moon, .starfield, .hi-moon { display: none !important; }

/* de zon en haar gloed blijven, ook in de nachtstand */
.hero[data-phase="night"] .sun-layers,
.hero[data-phase="night"] .sun-glow2,
.hero[data-phase="night"] .sun-bloom { display: block !important; }
.hero[data-phase="night"] .orb { width: clamp(90px, 9vw, 150px); }

/* de donkere nachtsluier over de foto hoeft niet meer */
.hero[data-phase="night"] .hero-shade { background:
  linear-gradient(100deg, rgba(6, 22, 30, .82) 0%, rgba(6, 22, 30, .62) 26%, rgba(6, 22, 30, .22) 52%, rgba(6, 22, 30, .04) 72%, transparent 88%),
  linear-gradient(180deg, rgba(6, 22, 30, .5) 0%, rgba(6, 22, 30, .05) 22%, transparent 45%),
  linear-gradient(0deg, rgba(8, 24, 32, .72) 0%, rgba(8, 24, 32, .28) 16%, transparent 34%); }
@media (max-width: 980px) {
  .hero[data-phase="night"] .hero-shade { background:
    linear-gradient(180deg, rgba(6, 22, 30, .6) 0%, rgba(6, 22, 30, .3) 14%, rgba(6, 22, 30, .46) 34%, rgba(6, 22, 30, .5) 56%, rgba(6, 22, 30, .74) 78%, rgba(8, 24, 32, .9) 100%); }
}

/* ondernemingsnummers onderaan */
.footer-legal { margin-top: .5rem; display: flex; flex-wrap: wrap; gap: .25rem 1.4rem;
  font-size: .78rem; letter-spacing: .04em; opacity: .55; font-variant-numeric: tabular-nums; }

/* ============================================================
   AANGEPAST AAN HET SCHERM — ook op een laag venster
   De foto's blijven hun kolom vullen, maar hun verhouding volgt de
   hoogte van het venster. Zo zie je ze altijd volledig, zonder gat ernaast.
   ============================================================ */
.gallery-main, .res-a .res-img, .res-b .res-img, .res-c .res-img {
  width: 100%;
  max-width: 100%;
}
.gallery-main img, .res-img img { width: 100%; height: 100%; object-fit: cover; }

/* hoge vensters: staand, zoals de foto's genomen zijn */
@media (min-width: 981px) and (max-height: 920px) {
  .gallery-main { aspect-ratio: 5 / 4; }
  .res-a .res-img, .res-b .res-img, .res-c .res-img { aspect-ratio: 5 / 4; }
}
@media (min-width: 981px) and (max-height: 800px) {
  .gallery-main { aspect-ratio: 4 / 3; }
  .res-a .res-img, .res-b .res-img, .res-c .res-img { aspect-ratio: 4 / 3; }
}
@media (min-width: 981px) and (max-height: 700px) {
  .gallery-main { aspect-ratio: 3 / 2; }
  .res-a .res-img, .res-b .res-img, .res-c .res-img { aspect-ratio: 3 / 2; }
}
/* tablet: één kolom, dus de foto is breed — iets platter dan staand */
@media (min-width: 641px) and (max-width: 980px) {
  .gallery-main { aspect-ratio: 1 / 1; }
  .res-a .res-img, .res-b .res-img, .res-c .res-img { aspect-ratio: 4 / 3; }
}
/* laag gsm-scherm in liggende stand */
@media (max-width: 980px) and (max-height: 560px) {
  .gallery-main, .res-a .res-img, .res-b .res-img, .res-c .res-img { aspect-ratio: 16 / 10; }
}

.map { max-height: min(62svh, 560px); }
.lb-stage img { max-height: 78vh; max-height: 78svh; }

/* titels niet onder de vaste balk bij een sprong vanuit het menu */
section[id], [id] { scroll-margin-top: clamp(68px, 9vh, 96px); }

/* Wat volledig in beeld is gekomen, blijft leesbaar — de hoofdlogica zit in
   site.js; dit is alleen een zachte overgang op het laatste stukje. */
@media (prefers-reduced-motion: no-preference) {
  .js .sl.is-shown.stagger > *, .js .sl.is-shown .stagger > * { transition: opacity .5s ease; }
}

/* De witruimte tussen de secties gaat mee met de hoogte van het venster.
   Op een laag scherm nam 144 px boven én onder een vijfde van het beeld in. */
@media (max-height: 820px) and (min-width: 981px) {
  section { padding-block: clamp(3rem, 7vh, 5.5rem); }
  .contact.has-photo { padding-block: clamp(4rem, 10vh, 8rem); }
  .sec-head { margin-bottom: clamp(1.4rem, 3.5vh, 2.6rem); }
}
@media (max-height: 700px) and (min-width: 981px) {
  section { padding-block: clamp(2.4rem, 5.5vh, 4rem); }
  .contact.has-photo { padding-block: clamp(3rem, 8vh, 6rem); }
}
/* gsm in liggende stand */
@media (max-width: 980px) and (max-height: 560px) {
  section { padding-block: clamp(2rem, 6vh, 3.5rem); }
}

/* Bij een breder uitgesneden kader zakt het beeld naar het gazon.
   Iets hoger uitsnijden houdt het gebouw en het zwembad in beeld. */
@media (min-width: 981px) and (max-height: 920px) {
  .res-img img { object-position: center 38%; }
  .gallery-main img { object-position: center 42%; }
}
@media (min-width: 641px) and (max-width: 980px) {
  .res-img img { object-position: center 40%; }
}

/* ============================================================
   "JOUW VERBLIJF" — meer lucht onder de knop, en niet meer tegen
   de volgende sectie aan. De kaart liep er 20 px overheen.
   ============================================================ */
.summary { padding: 1.8rem 1.8rem 2rem; }
.summary [data-submit] { margin-bottom: .2rem; }
@media (max-width: 980px) {
  .summary { padding: 1.6rem 1.4rem 1.9rem; margin-bottom: 3.2rem; }
  .book-grid { row-gap: 2rem; }
}
/* op gsm stond de kaart pal tegen de contactsectie: een rustige marge eronder */
#book .book-grid { padding-bottom: clamp(.5rem, 2vh, 1.5rem); }

/* Op gsm is de kaart niet meer plakkend; dan hoort de top-afstand ook weg.
   Die 100 px bleef staan en duwde de kaart naar beneden. */
@media (max-width: 980px) {
  .summary { top: auto; }
}
/* De knop "terug naar boven" ging over "Aanvraag versturen" staan.
   Zolang de verzendknop in beeld is, trekt hij zich terug. */
.to-top { transition: opacity .4s ease, translate .5s var(--ease), scale .3s ease; }
body.cta-zichtbaar .to-top { opacity: 0; pointer-events: none; scale: .8; }

/* ============================================================
   KALENDER — vrij in zacht salie, bezet in gedempt terracotta.
   Twee ontzadigde, warme tinten die naast het goud passen; de
   gekozen periode blijft het sterkst in beeld.
   ============================================================ */
:root {
  --vrij: #7FA98B;          /* salie */
  --vrij-vlak: color-mix(in srgb, var(--vrij) 7%, transparent);
  --vrij-rand: color-mix(in srgb, var(--vrij) 30%, transparent);
  --bezet: #B5675A;         /* terracotta */
  --bezet-vlak: color-mix(in srgb, var(--bezet) 15%, transparent);
  --bezet-ink: color-mix(in srgb, var(--bezet) 78%, var(--ink-2));
}
:root[data-theme="dark"], :root:not([data-theme="light"]) {
  --vrij-vlak: color-mix(in srgb, var(--vrij) 12%, transparent);
  --vrij-rand: color-mix(in srgb, var(--vrij) 40%, transparent);
  --bezet-vlak: color-mix(in srgb, var(--bezet) 24%, transparent);
  --bezet-ink: color-mix(in srgb, var(--bezet) 62%, #E7D6D2);
}

/* vrije nachten: een rustig vlak, het cijfer blijft gewoon donker */
.cal-day:not(:disabled):not(.is-past):not(.is-taken):not(.is-in):not(.is-out):not(.is-range) {
  background: var(--vrij-vlak);
  box-shadow: inset 0 0 0 1px var(--vrij-rand);
}
.cal-day:not(:disabled):not(.is-past):not(.is-taken):hover {
  background: color-mix(in srgb, var(--vrij) 30%, transparent);
}

/* bezette nachten: zelfde rust, andere tint — plus de streep, zodat het
   ook zonder kleur te zien is (kleurenblindheid) */
.cal-day.is-taken {
  background: var(--bezet-vlak);
  color: var(--bezet-ink);
  text-decoration-color: color-mix(in srgb, var(--bezet) 55%, transparent);
}
.cal-day.is-taken.can-out {
  background: linear-gradient(135deg, var(--vrij-vlak) 0 48%, var(--bezet-vlak) 52% 100%);
  color: var(--ink);
}

/* de keuze blijft het luidst: goud en diepblauw winnen altijd */
.cal-day.is-range { background: color-mix(in srgb, var(--gold) 22%, transparent); box-shadow: none; }
.cal-day.is-in, .cal-day.is-out { box-shadow: none; }

/* legende in dezelfde tinten */
.sw-free { background: color-mix(in srgb, var(--vrij) 18%, transparent); border: 1px solid var(--vrij); }
.sw-taken { background: var(--bezet-vlak); border: 1px solid var(--bezet); }
.sw-sel { background: var(--deep); border: 1px solid var(--deep); }
/* in de donkere stand is de gekozen periode goud, dus het blokje in de legende ook */
:root[data-theme="dark"] .sw-sel { background: var(--gold); border-color: var(--gold); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sw-sel { background: var(--gold); border-color: var(--gold); }
}

/* "Jouw verblijf" moet meescrollen op pc. Dat lukte niet omdat body
   overflow-x: hidden had: daardoor wordt body zelf een scrollvlak en
   kleeft sticky nergens meer aan. 'clip' snijdt wél af zonder dat effect. */
body { overflow-x: clip; }
@supports not (overflow: clip) {
  body { overflow-x: hidden; }
}
@media (min-width: 981px) {
  .summary { position: sticky; top: clamp(76px, 10vh, 108px); align-self: start; }
}

/* Een liggende foto in het staande galerijkader: het kader neemt dan zelf
   een liggende vorm aan, zodat de foto volledig te zien is zonder grijze randen. */
/* Liggende foto in een staand kader.
   Vroeger werd het kader zelf platter gemaakt. Daardoor sprong alles eronder
   — miniaturen, naam, adres, knop — bijna 300 px op en neer zodra je van foto
   wisselde. Het kader houdt nu altijd dezelfde hoogte: de liggende foto staat
   er volledig in, en de lege ruimte wordt gevuld met een vervaagde kopie van
   diezelfde foto. */
.gallery-main img.gallery-bg {
  position: absolute; inset: 0; z-index: 0; top: 0;
  width: 100%; height: 100%; object-fit: cover;
  filter: blur(26px) saturate(1.15) brightness(.8);
  scale: 1.14; translate: 0 0;
  opacity: 0; transition: opacity .4s ease;
  pointer-events: none;
}
.gallery-main.heel-tonen img.gallery-bg { opacity: 1; }
.gallery-main.heel-tonen img:not(.gallery-bg) {
  position: relative; z-index: 2; top: 0; height: 100%; object-fit: contain;
}
.gallery-main.heel-tonen:hover img:not(.gallery-bg) { scale: 1; }
.gallery-main.heel-tonen::before { opacity: .45; }

/* Nieuwe herofoto van het domein: het zwembad en het gazon moeten in beeld
   blijven, ook wanneer het brede scherm er een band uit snijdt. */
.hero-photo img { object-position: center 34%; }
@media (max-width: 980px) { .hero-photo img { object-position: center top; } }

/* ============================================================
   Hero: tekst rechts, zwembad vrij
   De herofoto heeft het zwembad links. Op een breed scherm zetten we de
   titel, de tekst en de knoppen daarom rechts, en het infopaneel linksonder
   op het gazon. Zo ligt het water volledig vrij in beeld.
   Onder 1101 px blijft alles links staan (het paneel is daar al verborgen).
   ============================================================ */
@media (min-width: 1101px) {
  .hero-copy { margin-left: auto; text-align: right; max-width: 40rem; }
  .hero h1 { max-width: 16ch; margin-left: auto; }
  .lead { margin-left: auto; }
  .hero-actions { flex-direction: row-reverse; justify-content: flex-start; }
  .tonight { text-align: right; }
  .tonight ul { justify-content: flex-end; }
  .hero-info { right: auto; left: clamp(1rem, 4vw, 3.5rem); bottom: clamp(140px, 22vh, 230px); }
}

/* ============================================================
   Controle over 10 schermformaten — correcties
   ============================================================ */

/* 1. Appartementkaart: de foto stond verticaal gecentreerd naast de tekst.
   Omdat de tekstkolom hoger is dan de fotokolom, gaf dat op 1024–1280 px een
   grote lege plek links van de titel. De foto hoort bovenaan te beginnen;
   ze blijft daarna vanzelf meescrollen (sticky). */
@media (min-width: 981px) {
  .apt { align-items: start; }
}

/* 2. Grote domeinfoto: op een hoog scherm (1920 × 1080) werd ze 1 068 px hoog
   en paste ze niet meer in beeld. We begrenzen haar op een deel van de
   schermhoogte; de foto wordt dan iets strakker gekaderd in plaats van
   onderaan af te lopen. */
@media (min-width: 981px) {
  .res-a .res-img { max-height: 74vh; }
  .res-b .res-img, .res-c .res-img { max-height: 46vh; }
}

/* 3. Telefoon in liggende stand (844 × 390) en andere lage vensters: daar is
   maar 390 px hoogte. Zonder begrenzing is elke foto twee tot drie schermen
   hoog. */
@media (max-height: 560px) {
  .res-a .res-img, .res-b .res-img, .res-c .res-img { max-height: 72vh; }
  .gallery-main { max-height: 76vh; }
  .map { max-height: 72vh; }
  .contact .wrap { padding-block: 2.4rem; }
}

/* 4. De zwevende knoppen (Boeken en terug-naar-boven) stonden net over de rij
   miniatuurfoto's, zodat je de middelste niet kon aantikken. */
body.thumbs-onderaan .fab-book,
body.thumbs-onderaan .to-top { opacity: 0; pointer-events: none; }

/* 5. Telefoon in liggende stand: er is maar 390 px hoogte, en de knop
   "Beschikbaarheid bekijken" viel onder de schermrand. We maken de hero
   compacter zodat titel, tekst én knop samen in beeld staan. */
@media (max-height: 560px) {
  .hero-inner { padding-top: 3.4rem; padding-bottom: 2.2rem; }
  .hero h1 { font-size: clamp(1.9rem, 4.2vw, 2.7rem); margin-bottom: .7rem; }
  .hero .lead { font-size: .95rem; line-height: 1.5; margin-bottom: 1.1rem; }
  .hero .place { margin-bottom: .5rem; font-size: .82rem; }
  .hero-actions { gap: .8rem 1.4rem; }
  .scroll-cue { display: none; }
}

/* 6. Kleine telefoon (360 px): het balkje "Penthouse Oasis Beach XIV —
   Vannacht vrij" brak over twee regels en zag er dan scheef uit. */
@media (max-width: 380px) {
  .tonight a { font-size: .8rem; padding: .5rem .8rem; gap: .4rem; }
  .tonight ul { width: 100%; }
  .tonight li { width: 100%; }
  .tonight a { justify-content: flex-start; }
}

/* 7. In liggende stand snijdt het brede venster een smalle band uit de staande
   herofoto. Zonder correctie viel het zwembad er net buiten. */
@media (max-height: 560px) {
  .hero-photo img { object-position: center 52%; }
}

/* 8. Hero op een lage laptop: de sectie werd 10 tot 26 px hoger dan het
   scherm, net genoeg om een streepje van de volgende sectie te tonen. */
@media (min-width: 981px) and (max-height: 780px) {
  .hero-inner { padding-top: clamp(4.4rem, 9vh, 6rem); padding-bottom: clamp(130px, 23vh, 210px); }
}

/* 9. Contactblok: boven en onder de vraag stond op een telefoon meer dan
   100 px lege foto, waardoor het blok hoger werd dan het scherm. */
@media (max-width: 700px) {
  .contact.has-photo { padding-block: clamp(3.4rem, 12vw, 6rem); }
}
@media (max-height: 560px) {
  .contact.has-photo { padding-block: 2.2rem; }
}

/* ============================================================
   Menu op telefoon
   De vier menupunten en de boekknop waren onder 980 px gewoon verborgen:
   een bezoeker op gsm kon geen enkele sectie bereiken. Nu zit er een knop
   in de balk die het menu opent.
   ============================================================ */
.nav-knop { display: none; }
.nav-boek { display: none; }
@media (min-width: 981px) {
  .nav-boek { display: none !important; }
}
@media (max-width: 980px) {
  .nav-knop {
    display: grid; gap: 5px; margin-left: auto; order: 3;
    width: 42px; height: 42px; padding: 11px 9px; border: 0; cursor: pointer;
    background: color-mix(in srgb, currentColor 10%, transparent);
    border-radius: 12px; color: inherit; align-content: center;
    -webkit-tap-highlight-color: transparent;
  }
  .nav-knop span {
    display: block; height: 2px; width: 100%; border-radius: 2px;
    background: currentColor;
    transition: transform .34s var(--ease), opacity .24s ease;
  }
  body.nav-open .nav-knop span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  body.nav-open .nav-knop span:nth-child(2) { opacity: 0; }
  body.nav-open .nav-knop span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

  .topbar .nav {
    display: flex; flex-direction: column; gap: 0;
    position: fixed; left: 0; right: 0; top: 0; z-index: -1;
    padding: calc(var(--balk-h, 62px) + .6rem) clamp(1rem, 5vw, 2rem) 1.4rem;
    background: color-mix(in srgb, var(--deep) 94%, transparent);
    backdrop-filter: blur(20px) saturate(1.15);
    box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .55);
    color: var(--light);
    opacity: 0; translate: 0 -14px; pointer-events: none;
    transition: opacity .3s ease, translate .38s var(--ease);
  }
  body.nav-open .topbar .nav { opacity: 1; translate: 0 0; pointer-events: auto; }
  .topbar .nav a {
    padding: .95rem .2rem; font-size: 1.08rem; text-decoration: none; color: inherit;
    border-bottom: 1px solid color-mix(in srgb, #fff 14%, transparent);
  }
  .topbar .nav a:last-of-type { border-bottom: 0; }
  .topbar .nav .nav-boek {
    display: block; margin-top: 1rem; padding: .85rem 1.4rem; text-align: center;
    background: var(--gold); color: #fff; border-radius: 999px; font-weight: 500;
    border-bottom: 0;
  }
  /* zolang het menu openstaat scrollt de pagina eronder niet mee */
  body.nav-open { overflow: hidden; }
}

/* ============================================================
   Witruimte tussen de secties op een telefoon
   De marges waren op een breed scherm berekend. Op een gsm van 390 px breed
   leverde dat gaten van 230 tot 315 px op — ruim een derde van het scherm
   leeg tussen twee secties. Op een smal scherm mag dat flink minder zijn.
   ============================================================ */
@media (max-width: 700px) {
  section { padding-block: clamp(2.8rem, 9vw, 4.4rem); }
  .sec-head { margin-bottom: 1.6rem; }
  .summary { margin-bottom: 1.6rem; }
  .intro-sec { padding-bottom: 0; }
}

/* ============================================================
   Titels en zwevende knoppen op een telefoon
   ============================================================ */
/* Op een breed scherm rijzen de woorden van een titel één voor één op. Op een
   gsm zie je dan letterlijk "El Raso, Guardamar" staan terwijl "del Segura"
   nog onderweg is. Daar laten we de titel in één keer verschijnen. */
@media (max-width: 700px) {
  .js [data-reveal] .split .w > span {
    --wp: clamp(0, calc(var(--p) * 2.4), 1) !important;
    transform: translate3d(0, calc((1 - var(--wp)) * 110%), 0) !important;
  }
}

/* Twee zwevende knoppen naast elkaar bedekten voortdurend een regel tekst.
   Nu is er er hooguit één tegelijk, en op een gsm wat kleiner. */
body.fab-zichtbaar .to-top { opacity: 0; pointer-events: none; scale: .85; }
@media (max-width: 700px) {
  .to-top { width: 44px; height: 44px; }
  .fab-book { padding: .72rem 1.3rem; font-size: .95rem; }
}

/* ============================================================
   Correcties na de opname op gsm (3 oktober)
   Alles hieronder dat de indeling verandert, zit achter max-width: 700px:
   de versie voor pc blijft ongemoeid. De enige uitzondering is de donkerdere
   achtergrond van de fotoweergave, op uitdrukkelijke vraag ook op groot scherm.
   ============================================================ */

/* 1. FOTOWEERGAVE — de achtergrond was 94 % dekkend. Zes procent klinkt weinig,
   maar daardoor las je de pagina er dwars doorheen: de titel, de adresregel en
   de knop Reserveren stonden over het bijschrift en de pijlen heen. Nu volledig
   dekkend, met een zachte verloop zodat het geen platte zwarte doos is. */
.lightbox {
  background: #040E13;
  background-image: radial-gradient(120% 80% at 50% 0%, #0A212B 0%, #040E13 72%);
}

/* De zwevende knoppen horen niet thuis boven een foto op volle schermgrootte. */
body.lb-open .fab-book, body.lb-open .to-top { opacity: 0 !important; pointer-events: none; }

@media (max-width: 700px) {
  /* Foto, bijschrift en pijlen onder elkaar in plaats van door elkaar. */
  .lightbox {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    align-content: center; justify-items: center;
    row-gap: 1.4rem;
    padding: 3.6rem .9rem 1.6rem;
  }
  .lightbox .lb-stage { grid-column: 1 / -1; grid-row: 1; width: 100%; }
  .lightbox .lb-stage img { max-height: 62svh; }
  /* Naam en nummer stonden onder elkaar, de ene groot in een schreefletter en
     de andere piepklein en bleek. Ze horen op één regel, met maten die bij
     elkaar passen. */
  .lightbox .lb-stage figcaption {
    flex-direction: row; flex-wrap: wrap; justify-content: center;
    align-items: baseline; gap: .2rem .7rem; text-align: center;
    opacity: 1; padding-inline: .6rem;
  }
  .lightbox .lb-alt { font-size: 1rem; line-height: 1.3; opacity: .92; }
  .lightbox .lb-count {
    font-size: .84rem; opacity: .62; letter-spacing: .06em;
    font-variant-numeric: tabular-nums; white-space: nowrap;
  }
  .lightbox .lb-prev,
  .lightbox .lb-next {
    /* relative, niet static: de rimpeling bij het aanraken zoekt de dichtstbijzijnde
       gepositioneerde ouder. Bij static was dat het hele venster, en groeide ze als
       een reuzencirkel uit de linkerbovenhoek. */
    position: relative; grid-row: 2;
    /* een oudere regel zette left/right/bottom voor de absolute plaatsing;
       als relatieve verschuiving zouden die de knoppen over elkaar duwen */
    left: auto; right: auto; top: auto; bottom: auto;
    width: 3.4rem; height: 3.4rem;
    background: rgba(250, 248, 244, .08);
    border-color: rgba(250, 248, 244, .34);
  }
  .lightbox .lb-prev { grid-column: 1; justify-self: end; margin-right: .7rem; }
  .lightbox .lb-next { grid-column: 2; justify-self: start; margin-left: .7rem; }
  /* het kruisje: groter raakvlak en een echte achtergrond, zodat het niet
     wegvalt tegen de foto eronder */
  .lightbox .lb-close {
    top: .75rem; right: .75rem; width: 2.9rem; height: 2.9rem;
    background: rgba(250, 248, 244, .12);
    border-color: rgba(250, 248, 244, .38);
  }
}

/* 2. MENUBALK — ze verdween en kwam terug in een fondu. Tijdens die beweging
   stond er een doorschijnende balk over de tekst. Ze schuift nu gewoon weg,
   zonder te vervagen, en ze doet dat sneller. */
.topbar {
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease),
              box-shadow .4s var(--ease),
              transform .42s cubic-bezier(.33, .02, .18, 1);
}
/* De schaduw onder de balk is ruim twee keer zo hoog als de balk zelf. Schoof
   de balk maar 104 % op, dan bleef die schaduw als een donkere veeg bovenaan
   het scherm staan, zonder balk erin. Ze moet dus verder dan haar eigen hoogte. */
.topbar.is-away { transform: translate3d(0, -235%, 0); opacity: 1; }
.topbar.is-back {
  transition: background .4s var(--ease), color .4s var(--ease), padding .4s var(--ease),
              box-shadow .4s var(--ease),
              transform .32s cubic-bezier(.16, .84, .3, 1);
}
@media (max-width: 700px) {
  /* volledig dekkend: de achtergrondvervaging werkt niet in elke browser,
     en zonder die vervaging zag je de tekst door de balk heen */
  .topbar.is-stuck { background: var(--salt); }
}

/* 3. VOORZIENINGEN — zestien regels onder elkaar liepen over meer dan een
   volledig scherm. Op een gsm staan ze nu in twee kolommen: acht rijen. */
@media (max-width: 700px) {
  .amenities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .6rem .9rem; font-size: .86rem; align-items: start;
    margin-block: 1.2rem 1.8rem;
  }
  .amenities li { align-items: flex-start; gap: .45rem; line-height: 1.32; }
  .amenities .ic { flex: none; margin-top: .14em; }
}

/* 4. ZWEVENDE KNOP — ze stond midden onderaan en viel daardoor altijd over een
   regel tekst heen ("Ping-pong", "La location se fait à partir de 11 jours").
   In de hoek bijt ze hooguit op de marge. */
@media (max-width: 700px) {
  .fab-book { left: auto; right: .9rem; translate: 0 0; padding: .66rem 1.15rem; font-size: .9rem; }
  .fab-book[hidden] { translate: 0 18px; }
}

/* 5. De vervaagde rand rond een liggende foto was een bleke vlek. Donkerder
   gezet, zodat ze leest als een kader en niet als een vlek. */
.gallery-main img.gallery-bg { filter: blur(30px) saturate(.85) brightness(.55); }

/* ============================================================
   De balk bovenaan de foto
   Ze was een donkere rechthoek met een harde onderrand, als een blok dat op de
   foto geplakt is. Dat komt doordat de achtergrondvervaging alleen binnen het
   kader van de balk kan werken — daar zit altijd een scherpe grens aan.
   We laten de vervaging vallen en gebruiken een schaduw die naar beneden toe
   oplost: evenveel leesbaarheid, geen zichtbare rand meer.
   ============================================================ */
.topbar:not(.is-stuck) {
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  box-shadow: none;
  text-shadow: 0 1px 12px rgba(4, 16, 22, .55);
}
.topbar:not(.is-stuck)::before {
  content: ""; display: block;
  position: absolute; left: 0; right: 0; top: 0;
  height: 215%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    rgba(5, 18, 25, .80) 0%,
    rgba(5, 18, 25, .66) 34%,
    rgba(5, 18, 25, .40) 62%,
    rgba(5, 18, 25, .16) 84%,
    rgba(5, 18, 25, 0) 100%);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .topbar:not(.is-stuck) { background: none; }
}

/* De menuknop stond als een lichte blok op de foto; boven de hero volstaat
   een dunne rand. Zodra de balk een achtergrond krijgt, mag het vlak terug. */
@media (max-width: 980px) {
  .topbar:not(.is-stuck) .nav-knop {
    background: color-mix(in srgb, currentColor 7%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 26%, transparent);
  }
}