/* echte Vanhoye-huisstijl: Eiko (titels/serif) self-hosted uit vastgoedvanhoye.be */
  @font-face{font-family:'Eiko';
    src:url('fonts/eiko.woff2') format('woff2'),url('fonts/eiko.woff') format('woff');
    font-weight:100 900;font-style:normal;font-display:swap}
  :root{
    --ink:#211f1b; --bg:#f3efe7; --bg2:#ece6da; --paper:#faf8f3;
    --sand:#c7ad88; --muted:#7a7468; --line:rgba(33,31,27,.14);
    --serif:'Eiko',Georgia,serif;
    --sans:'Helvetica Neue','HelveticaNeue',Helvetica,Arial,sans-serif;
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{scroll-behavior:auto}
  body{background:var(--bg);color:var(--ink);font-family:var(--sans);
    -webkit-font-smoothing:antialiased;overflow-x:clip}
  img{display:block;max-width:100%}
  .kick{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.32em;
    text-transform:uppercase;color:var(--muted)}
  .serif{font-family:var(--serif)}
  section{position:relative}

  /* ---------- NAV ---------- */
  /* nav = standaard een leesbare, solide balk (werkt over élke achtergrond); over de hero wordt 'ie transparant */
  nav{position:fixed;top:0;left:0;right:0;z-index:50;display:flex;justify-content:space-between;
    align-items:center;padding:20px 48px;color:var(--ink);
    background:rgba(250,248,243,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
    border-bottom:1px solid var(--line);transition:background .4s,color .4s,border-color .4s,padding .4s}
  nav .wm{display:block;line-height:0;color:inherit;text-decoration:none}
  nav .wm .wmlogo{height:46px;width:auto;display:block}   /* echt Vanhoye-woordmerk (Eiko) */
  nav.attop .wm .wmlogo{filter:brightness(0) invert(1)}   /* wit over de donkere hero */
  nav .right{display:flex;gap:34px;align-items:center;font-family:var(--sans);
    font-size:12.5px;letter-spacing:.18em;text-transform:uppercase}
  nav .right a{color:inherit;text-decoration:none;opacity:.78;transition:opacity .3s;
    display:inline-flex;align-items:center;min-height:44px}   /* tikdoel */
  nav .right a:hover{opacity:1}
  /* bovenaan de hero: transparant + lichte tekst + zachte scrim zodat het leesbaar blijft over de lucht */
  nav.attop{background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none;
    border-bottom-color:transparent;color:#fff;padding-top:26px;padding-bottom:26px}
  nav.attop::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:linear-gradient(180deg,rgba(18,16,13,.38),rgba(18,16,13,0))}
  nav.attop .right a{opacity:.92;text-shadow:0 1px 12px rgba(0,0,0,.35)}
  nav.attop .wm{text-shadow:0 1px 16px rgba(0,0,0,.4)}
  /* HERO-contactknop rechtsonder — vouwt uit tot een kleine pop-up (telefoon + e-mail) */
  .herocontact{position:absolute;right:48px;bottom:30px;z-index:4;
    display:flex;flex-direction:column;align-items:flex-end;gap:14px}
  .hc-btn{display:inline-flex;align-items:center;gap:12px;font-family:var(--sans);
    font-size:12.5px;letter-spacing:.2em;text-transform:uppercase;color:#fff;
    background:rgba(255,255,255,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.55);border-radius:100px;padding:15px 26px;cursor:pointer;
    text-shadow:0 1px 12px rgba(0,0,0,.4);transition:background .3s,border-color .3s}
  .hc-btn:hover{background:rgba(255,255,255,.18);border-color:#fff}
  .hc-ic{font-size:17px;line-height:1;transition:transform .35s}
  .herocontact.open .hc-ic{transform:rotate(45deg)}
  .hc-menu{display:flex;flex-direction:column;background:var(--paper);border-radius:11px;
    box-shadow:0 24px 58px rgba(0,0,0,.36);padding:14px 10px 10px;min-width:250px;
    opacity:0;transform:translateY(12px) scale(.98);transform-origin:bottom right;pointer-events:none;
    transition:opacity .3s,transform .3s}
  .herocontact.open .hc-menu{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}
  .hc-menu .hc-t{font-family:var(--sans);font-size:10px;letter-spacing:.2em;text-transform:uppercase;
    color:var(--muted);padding:0 14px 12px}
  .hc-menu a{color:var(--ink);text-decoration:none;font-family:var(--sans);
    padding:12px 14px;border-radius:7px;transition:background .25s}
  .hc-menu a:hover{background:var(--bg2)}
  .hc-menu a[href^="tel"]{font-family:var(--serif);font-size:21px;line-height:1.1}
  .hc-menu a[href^="mailto"]{font-size:13.5px;color:#46423a}
  @media(max-width:820px){ .herocontact{right:22px;bottom:24px} .hc-menu{min-width:0} }

  /* ---------- HERO ---------- */
  .hero{height:100vh;height:100dvh;width:100%;overflow:hidden;position:relative}
  .hero .imgwrap{position:absolute;inset:-14% 0;will-change:transform}
  .hero img{width:100%;height:100%;object-fit:cover;
    animation:ken 24s ease-in-out infinite alternate;transform-origin:60% 60%}
  @keyframes ken{from{transform:scale(1.03)}to{transform:scale(1.14)}}
  .hero .scrim{position:absolute;inset:0;background:
    linear-gradient(180deg,rgba(18,16,13,.40) 0%,rgba(18,16,13,.05) 22%,rgba(18,16,13,.20) 52%,rgba(18,16,13,.62) 80%,rgba(18,16,13,.85) 100%)}
  .hero .inner{position:absolute;inset:0;display:flex;flex-direction:column;
    justify-content:flex-end;padding:0 48px 9vh;color:#fff;z-index:2;
    text-shadow:0 2px 50px rgba(0,0,0,.55),0 1px 14px rgba(0,0,0,.4)}
  .hero .place{font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.34em;
    text-transform:uppercase;margin-bottom:20px;opacity:.92}
  .hero h1{font-family:var(--serif);font-weight:500;font-size:clamp(80px,17vw,250px);
    line-height:.86;letter-spacing:.01em}
  .hero .tag{font-family:var(--serif);font-style:italic;font-size:clamp(22px,3vw,40px);
    margin-top:8px;opacity:.96;font-weight:400}
  [data-hero]{opacity:0;transform:translateY(40px);
    animation:heroIn 1.15s cubic-bezier(.16,.82,.24,1) forwards}
  [data-hero].place{animation-delay:.20s}
  [data-hero]h1,h1[data-hero]{animation-delay:.36s}
  [data-hero].tag{animation-delay:.54s}
  @keyframes heroIn{to{opacity:1;transform:translateY(0)}}
  .cue{position:absolute;bottom:34px;right:48px;z-index:3;color:#fff;
    font-size:11px;letter-spacing:.28em;text-transform:uppercase;opacity:.8;
    display:flex;align-items:center;gap:12px}
  .cue .ln{width:50px;height:1px;background:#fff;display:block;
    animation:cue 2.4s ease-in-out infinite}
  @keyframes cue{0%,100%{transform:scaleX(.4);opacity:.4;transform-origin:left}
    50%{transform:scaleX(1);opacity:1;transform-origin:left}}

  /* ---------- SCROLL-SCRUB VIDEO HERO ---------- */
  /* hero-film loopt over 1 scroll (200vh sticky = 100vh scroll-travel) i.p.v. 2 */
  .scrollhero{height:200vh;position:relative;background:#0d0c0a}
  .scrollhero .sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
  .heroposter{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;z-index:0}
  .scrubvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .scrollhero .scrim{position:absolute;inset:0;z-index:1;background:
    linear-gradient(180deg,rgba(18,16,13,.58) 0%,rgba(18,16,13,.16) 26%,rgba(18,16,13,.20) 52%,rgba(18,16,13,.62) 80%,rgba(18,16,13,.85) 100%)}
  /* extra zachte donkere hoek linksboven zodat het Vanhoye-logo (mix-blend difference) altijd leest, ook achter de takken */
  .scrollhero .scrim::before{content:"";position:absolute;top:0;left:0;width:46%;height:34%;
    background:radial-gradient(120% 120% at 0% 0%,rgba(12,11,9,.5),rgba(12,11,9,0) 70%)}
  /* ---------- FILMBEAT: herbruikbare scroll-scrub sectie (1 klok per beat, geen sync-risico) ---------- */
  .filmbeat{height:240vh;position:relative;background:#0d0c0a}
  .filmbeat .sticky{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden}
  .filmbeat .scrubvid{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
  .filmbeat .scrim{position:absolute;inset:0;z-index:1;background:
    linear-gradient(180deg,rgba(18,16,13,.34) 0%,rgba(18,16,13,.05) 26%,rgba(18,16,13,.22) 60%,rgba(18,16,13,.72) 100%)}
  .beatcap{position:absolute;left:48px;bottom:9vh;z-index:2;color:#fff;max-width:640px;
    text-shadow:0 2px 40px rgba(0,0,0,.5),0 1px 12px rgba(0,0,0,.4);will-change:opacity}
  .beatcap .k{font-size:12px;letter-spacing:.32em;text-transform:uppercase;opacity:.92;margin-bottom:16px}
  .beatcap h3{font-family:var(--serif);font-weight:500;font-size:clamp(34px,5vw,72px);line-height:1.0}
  .beatcap p{font-family:var(--serif);font-style:italic;font-size:clamp(18px,2.4vw,30px);margin-top:14px;opacity:.96}
  /* mobiel: ook scrubben (via prime) -> genoeg lengte om door de clip te scrollen */
  @media(max-width:820px){ .beatcap{left:22px;right:22px} .scrollhero{height:200vh} .filmbeat{height:200vh} }
  /* ---------- INTERIEUR EDITORIAL GALERIJ ---------- */
  .interieurs{background:var(--paper);padding:16vh 48px;border-top:1px solid var(--line)}
  .interieurs .ihead{max-width:1280px;margin:0 auto 6vh;display:grid;grid-template-columns:1.2fr 1fr;gap:40px;align-items:end}
  .interieurs .ihead .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:18px}
  .interieurs .ihead h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,64px);line-height:1.02}
  .interieurs .ihead p{font-size:16.5px;line-height:1.85;color:#46423a;max-width:46ch}
  .igal{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
  .igal figure{position:relative;overflow:hidden;border-radius:3px;margin:0;background:var(--bg2)}
  .igal figure img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.1s cubic-bezier(.16,.82,.24,1)}
  .igal figure:hover img{transform:scale(1.05)}
  .igal figure::after{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;z-index:1;pointer-events:none;
    background:linear-gradient(0deg,rgba(18,15,11,.52),rgba(18,15,11,0))}
  .igal figcaption{position:absolute;left:20px;bottom:18px;color:#fff;font-family:var(--sans);font-size:12px;
    letter-spacing:.16em;text-transform:uppercase;z-index:2;text-shadow:0 1px 20px rgba(0,0,0,.65)}
  .igal .full{grid-column:1 / -1;aspect-ratio:16/7}
  .igal .tall{grid-row:span 2;aspect-ratio:3/4}
  .igal .land{aspect-ratio:3/2}
  .igal .narrow{aspect-ratio:auto}   /* rekt uit tot dezelfde rijhoogte als de bredere buur */
  @media(max-width:820px){
    .interieurs{padding:12vh 22px}
    .interieurs .ihead{grid-template-columns:1fr;gap:16px}
    .igal{grid-template-columns:1fr}
    .igal .tall,.igal .full,.igal .land{grid-row:auto;grid-column:auto;aspect-ratio:3/2}
    .igal .tall{aspect-ratio:3/4}
  }
  .scrollhero .scene{position:absolute;left:48px;bottom:9vh;z-index:3;color:#fff;font-family:var(--serif);
    font-style:italic;font-size:clamp(20px,2.4vw,32px);opacity:0;text-shadow:0 2px 30px rgba(0,0,0,.6);max-width:560px}

  /* ---------- generic reveal ---------- */
  .rv{opacity:0;transform:translateY(34px)}

  /* ---------- MANIFEST ---------- */
  .manifest{padding:18vh 48px;max-width:1280px;margin:0 auto;display:grid;
    grid-template-columns:1fr 1fr;gap:80px;align-items:start}
  .manifest h2{font-family:var(--serif);font-weight:500;font-size:clamp(38px,5vw,72px);
    line-height:1.02;letter-spacing:.005em}
  .manifest h2 em{font-style:italic;color:var(--sand)}
  .manifest .body{padding-top:14px}
  .manifest .body p{font-size:17px;line-height:1.85;color:#46423a;margin-bottom:22px;max-width:46ch;
    text-align:justify;hyphens:auto}
  .manifest .body p:first-child{font-size:19px;color:var(--ink)}

  /* ---------- STATS ---------- */
  .stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);
    max-width:1280px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr)}
  .stats .cell{padding:54px 30px;border-right:1px solid var(--line)}
  .stats .cell:last-child{border-right:none}
  .stats .n{font-family:var(--serif);font-size:clamp(44px,5vw,68px);font-weight:500;line-height:1}
  .stats .l{font-family:var(--sans);font-size:12px;letter-spacing:.18em;text-transform:uppercase;
    color:var(--muted);margin-top:14px}

  /* ---------- FULL IMAGE BANDS ---------- */
  .band{height:100vh;height:100dvh;overflow:hidden;position:relative}
  .band .imgwrap{position:absolute;inset:-18% 0;will-change:transform}
  .band img{width:100%;height:100%;object-fit:cover}
  .band .cap{position:absolute;left:48px;bottom:46px;color:#fff;z-index:2;max-width:560px}
  .band .cap .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;opacity:.9;margin-bottom:16px}
  .band .cap h3{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.4vw,62px);line-height:1.02}
  .band .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15),rgba(0,0,0,.0) 35%,rgba(0,0,0,.45))}

  /* ---------- TWO-UP TEXT/IMG ---------- */
  .feature{max-width:1280px;margin:0 auto;padding:16vh 48px;display:grid;
    grid-template-columns:1fr 1fr;gap:70px;align-items:center}
  /* de twee zwevende highlights dichter bij elkaar (Y ≈ ½ van de zij-witruimte X) */
  .feature:has(+ .feature){padding-bottom:8vh}
  .feature + .feature{padding-top:8vh}
  .feature.rev{direction:rtl}.feature.rev>*{direction:ltr}
  /* iets kleinere titel zodat beide highlights op 2 regels passen */
  .feature .txt h3{font-family:var(--serif);font-weight:500;font-size:clamp(30px,3.3vw,44px);
    line-height:1.06;margin-bottom:26px}
  .feature .txt p{font-size:16.5px;line-height:1.85;color:#46423a;max-width:44ch;margin-bottom:20px;
    text-align:justify;hyphens:auto}
  .feature .img{overflow:hidden;border-radius:3px}
  .feature .img img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;transform:scale(1.06);will-change:transform}
  .tagsmall{font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--sand);
    margin-bottom:18px;font-weight:500}

  /* ---------- PARK (centered statement over img) ---------- */
  .park{min-height:120vh;min-height:120dvh;overflow:hidden;position:relative;display:flex;align-items:center;justify-content:center}
  .park .imgwrap{position:absolute;inset:-18% 0;will-change:transform}
  .park img{width:100%;height:100%;object-fit:cover}
  .park .scrim{position:absolute;inset:0;background:rgba(15,20,12,.34)}
  .park .ctr{position:relative;z-index:2;text-align:center;color:#fff;padding:0 30px;max-width:900px}
  .park .ctr .k{font-size:12px;letter-spacing:.34em;text-transform:uppercase;opacity:.9;margin-bottom:26px}
  .park .ctr h3{font-family:var(--serif);font-weight:500;font-size:clamp(40px,6.5vw,104px);line-height:.98}
  .park .ctr p{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.6vw,34px);margin-top:24px;opacity:.95}

  /* ---------- HORIZONTALE RENDER-GALERIJ (pinned, scroll-scrubbed) ---------- */
  .gallery{height:100vh;height:100dvh;overflow:hidden;background:var(--bg2);position:relative}
  .gallery .track{display:flex;height:100vh;height:100dvh;align-items:center;gap:30px;padding:0 48px;will-change:transform}
  .gallery .intro{flex:0 0 38vw;padding-right:40px}
  .gallery .intro .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:22px}
  .gallery .intro h3{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5vw,76px);line-height:1}
  .gallery .intro p{font-size:15px;color:var(--muted);margin-top:24px;max-width:30ch;line-height:1.7}
  .gallery .slide{position:relative;height:76vh;flex:0 0 auto;overflow:hidden;border-radius:3px}
  .gallery .slide img{height:100%;width:auto;max-width:none;object-fit:cover;display:block}
  .gallery .slide .num{position:absolute;left:22px;bottom:18px;color:#fff;font-family:var(--serif);
    font-size:20px;text-shadow:0 1px 12px rgba(0,0,0,.5)}
  .gallery .prog{position:absolute;left:48px;right:48px;bottom:38px;height:1px;background:rgba(33,31,27,.18);z-index:3}
  .gallery .prog i{position:absolute;left:0;top:0;height:100%;width:0;background:var(--ink)}
  /* op gsm: geen gepinde scrub (hapert/scroll-jackt op touch) → native swipe-carrousel met snap */
  @media(max-width:820px){
    .gallery{height:auto;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
      -webkit-overflow-scrolling:touch;padding:9vh 0;scrollbar-width:none}
    .gallery::-webkit-scrollbar{display:none}
    .gallery .track{height:auto;transform:none !important;padding:0 22px;gap:14px;align-items:stretch;will-change:auto}
    .gallery .intro{flex:0 0 76vw;padding-right:0;display:flex;flex-direction:column;justify-content:center;scroll-snap-align:center}
    .gallery .intro h3{font-size:clamp(38px,11vw,60px)}
    .gallery .slide{height:auto;width:82vw;aspect-ratio:3/4;scroll-snap-align:center}
    .gallery .slide img{width:100%;height:100%}
    .gallery .prog{display:none}
  }

  /* ---------- INTERIORS strip ---------- */
  .inwrap{max-width:1280px;margin:0 auto;padding:16vh 48px}
  .inwrap .head{display:flex;justify-content:space-between;align-items:flex-end;
    border-bottom:1px solid var(--line);padding-bottom:30px;margin-bottom:50px}
  .inwrap .head h3{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.4vw,58px);line-height:1}
  .inwrap .head p{font-size:15px;color:var(--muted);max-width:34ch;text-align:right}
  .ingrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
  .ingrid .cel{overflow:hidden;border-radius:3px}
  .ingrid img{width:100%;aspect-ratio:3/2;object-fit:cover;transform:scale(1.05);will-change:transform}
  .ingrid .note{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-top:14px}

  /* ---------- AANBOD / INTERACTIEVE UNIT-EXPLORER ---------- */
  .explorer{background:var(--paper);padding:16vh 48px;border-top:1px solid var(--line)}
  .exwrap{max-width:1320px;margin:0 auto}
  .extop{text-align:center;margin-bottom:52px}
  .extop .k{margin-bottom:20px}
  .extop h3{font-family:var(--serif);font-weight:500;font-size:clamp(40px,5.5vw,82px);line-height:1}
  .extop p{font-size:16px;line-height:1.8;color:#46423a;max-width:64ch;margin:22px auto 0}
  /* filters */
  .exfilters{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-bottom:34px}
  .chip{font-family:var(--sans);font-size:12px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--muted);background:transparent;border:1px solid var(--line);border-radius:100px;
    padding:11px 22px;cursor:pointer;transition:all .3s;
    min-height:44px;display:inline-flex;align-items:center}   /* tikdoel >=44px */
  .chip:hover{border-color:var(--sand);color:var(--ink)}
  .chip.is-on{background:var(--ink);border-color:var(--ink);color:#f3efe7}
  /* unit tab cards */
  .extabs{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-bottom:40px}
  .utab{text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:4px;
    padding:20px 18px;cursor:pointer;transition:all .35s;font-family:var(--sans)}
  .utab:hover{border-color:var(--sand);transform:translateY(-3px)}
  .utab.is-on{background:var(--ink);border-color:var(--ink)}
  .utab.is-on *{color:#f3efe7 !important}
  .utab .ut{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
  .utab .un{font-family:var(--serif);font-size:23px;font-weight:500;margin:8px 0 2px;color:var(--ink)}
  .utab .um{font-size:12.5px;color:var(--muted)}
  .utab[hidden]{display:none}
  /* main panel — editorial: groot sfeerbeeld + ingelegde plattegrond + thumbs (geen kader-box) */
  .expanel{display:grid;grid-template-columns:1.5fr 1fr;gap:60px;align-items:start;margin-top:4px}
  /* foto-kolom blijft plakken terwijl de plan/tekst-kolom eronderdoor scrolt (sticky) */
  .exstage{position:sticky;top:96px;align-self:start;min-width:0}
  .exframe{position:relative}
  .exhero{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:7px;display:block;cursor:zoom-in;
    box-shadow:0 34px 74px rgba(33,31,27,.20);transition:opacity .45s ease}
  .exArrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;font-size:24px;line-height:1;color:#fff;
    background:rgba(255,255,255,.14);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
    border:1px solid rgba(255,255,255,.55);cursor:pointer;transition:background .3s,border-color .3s}
  .exArrow:hover{background:rgba(255,255,255,.26);border-color:#fff}
  .exArrow.prev{left:16px}
  .exArrow.next{right:16px}
  @media(max-width:860px){ .exArrow{width:38px;height:38px;font-size:20px} .exArrow.prev{left:10px} .exArrow.next{right:10px} }
  /* plattegrond = nette omkaderde kaart in de rechterkolom, naast de foto's */
  .explancard{margin:22px 0 28px;background:#fff;border:1px solid var(--line);border-radius:6px;
    box-shadow:0 16px 38px rgba(33,31,27,.09);padding:16px 16px 12px;overflow:hidden}
  .explancard img{width:100%;height:auto;object-fit:contain;display:block;background:#fff;cursor:zoom-in}
  .explancard figcaption{display:flex;justify-content:space-between;align-items:center;margin-top:11px;
    font-family:var(--sans);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .exzoom{background:none;border:none;color:var(--ink);cursor:pointer;font-family:var(--sans);
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;padding:0;transition:color .3s}
  .exzoom:hover{color:var(--sand)}
  .exshots{display:flex;gap:11px;margin-top:20px;width:100%}
  .exshot{flex:1;aspect-ratio:4/3;border-radius:4px;overflow:hidden;cursor:pointer;padding:0;background:none;
    border:2px solid transparent;opacity:.5;transition:opacity .3s,border-color .3s,transform .3s}
  .exshot img{width:100%;height:100%;object-fit:cover;display:block}
  .exshot.is-on{opacity:1;border-color:var(--sand)}
  .exshot:hover{opacity:1;transform:translateY(-2px)}
  .exdata{display:flex;flex-direction:column;padding-top:2px}
  .exdata .dk{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--sand);margin-bottom:12px}
  .exdata .dn{font-family:var(--serif);font-size:clamp(30px,3.4vw,42px);font-weight:500;line-height:1.02}
  .exdata .dsub{font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.02em}
  .dgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);
    border:1px solid var(--line);border-radius:4px;overflow:hidden;margin:28px 0}
  .dgrid .dc{background:var(--bg);padding:16px 18px}
  .dgrid .dl{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .dgrid .dv{font-family:var(--serif);font-size:26px;font-weight:500;margin-top:5px}
  .drooms{list-style:none;margin:0 0 26px;padding:0;columns:2;column-gap:24px}
  .drooms li{font-size:13.5px;color:#46423a;padding:5px 0 5px 16px;position:relative;break-inside:avoid}
  .drooms li::before{content:"";position:absolute;left:0;top:12px;width:6px;height:6px;
    border-radius:50%;background:var(--sand)}
  .dprice{margin-top:auto;padding-top:22px;border-top:1px solid var(--line)}
  .dprice .pf{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
  .dprice .pr{font-family:var(--serif);font-size:44px;font-weight:500;line-height:1;margin-top:4px}
  .dbtw{display:inline-flex;align-items:center;gap:9px;margin-top:16px;font-size:12.5px;color:#46423a}
  .dbtw b{background:var(--sand);color:#2a2113;padding:6px 13px;border-radius:2px;
    font-family:var(--sans);font-weight:600;letter-spacing:.05em}
  .dcta{display:block;text-align:center;margin-top:24px;background:var(--ink);color:#f3efe7;
    text-decoration:none;font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.12em;
    text-transform:uppercase;padding:17px;border-radius:3px;transition:background .35s}
  .dcta:hover{background:#3a352c}
  .exfoot{text-align:center;margin-top:26px;font-size:12px;color:var(--muted);letter-spacing:.02em}
  /* lightbox */
  .exlb{position:fixed;inset:0;z-index:200;background:rgba(20,18,14,.94);display:none;
    align-items:center;justify-content:center;padding:4vh 4vw;cursor:zoom-out}
  .exlb.open{display:flex}
  .exlb img{max-width:100%;max-height:92vh;object-fit:contain;border-radius:4px}
  .exlb.plan img{background:#fff}
  .exlb .x{position:absolute;top:26px;right:34px;color:#fff;font-size:34px;line-height:1;
    background:none;border:none;cursor:pointer;opacity:.8}
  .exlb .x:hover{opacity:1}
  @media(max-width:860px){
    .exfilters{gap:8px;margin-bottom:26px}
    .chip{font-size:11px;letter-spacing:.08em;padding:9px 15px}
    .extabs{grid-template-columns:1fr 1fr;gap:10px}
    .expanel{grid-template-columns:1fr;gap:30px}
    .exstage{position:static;top:auto}
    .exshots{width:100%}
    .exdata{padding-top:0}
    .drooms{columns:1}
  }

  /* ---------- CTA ---------- */
  .cta{background:var(--ink);color:#f3efe7;padding:18vh 48px;text-align:center}
  .cta .k{color:rgba(243,239,231,.6);margin-bottom:26px}
  .cta h3{font-family:var(--serif);font-weight:500;font-size:clamp(46px,7vw,118px);line-height:.96}
  .cta .sub{font-family:var(--serif);font-style:italic;font-size:clamp(20px,2.4vw,30px);
    margin-top:18px;color:rgba(243,239,231,.85)}
  .cta .btn{display:inline-block;margin-top:54px;background:var(--sand);color:#2a2113;
    text-decoration:none;font-family:var(--sans);font-weight:600;font-size:14px;letter-spacing:.14em;
    text-transform:uppercase;padding:21px 46px;border-radius:2px;transition:transform .35s,background .35s}
  .cta .btn:hover{transform:translateY(-3px);background:#d8c0a0}
  .cta .meta{margin-top:64px;display:flex;justify-content:center;gap:46px;flex-wrap:wrap;
    font-size:13.5px;letter-spacing:.04em;color:rgba(243,239,231,.7)}
  .cta .meta a{color:rgba(243,239,231,.7);text-decoration:none}
  .cta .altlink{display:inline-block;margin-top:30px;color:rgba(243,239,231,.62);
    font-family:var(--sans);font-size:13px;letter-spacing:.05em;text-decoration:none;
    border-bottom:1px solid rgba(243,239,231,.28);padding-bottom:3px;transition:color .3s,border-color .3s}
  .cta .altlink:hover{color:#f3efe7;border-color:rgba(243,239,231,.65)}

  footer{background:var(--ink);color:rgba(243,239,231,.45);
    border-top:1px solid rgba(243,239,231,.12);padding:34px 48px;
    display:flex;justify-content:space-between;align-items:center;font-size:12px;letter-spacing:.06em}
  footer .wm{font-family:var(--serif);font-size:18px;color:rgba(243,239,231,.8);text-decoration:none}
  footer a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s,color .3s}
  footer a:hover{border-color:rgba(243,239,231,.4)}
  footer .wm:hover{color:#f3efe7}

  @media(max-width:860px){
    nav{padding:14px 22px}
    nav.attop{padding-top:18px;padding-bottom:18px}
    nav .wm .wmlogo{height:34px}
    nav .right{gap:20px;font-size:11px;letter-spacing:.14em}
    .manifest,.feature{grid-template-columns:1fr;gap:34px;padding:12vh 22px}
    /* uitvullen geeft op smalle schermen brede woordgaten -> links uitlijnen op gsm */
    .manifest .body p,.feature .txt p,.ligtxt .lead{text-align:left;hyphens:manual}
    .feature.rev{direction:ltr}
    .stats{grid-template-columns:1fr 1fr}
    .stats .cell:nth-child(2){border-right:none}
    .stats .cell{border-bottom:1px solid var(--line)}
    .units{grid-template-columns:1fr}
    .units .u{border-right:none;border-bottom:1px solid var(--line)}
    .ingrid{grid-template-columns:1fr}
    .hero .inner,.band .cap,.park .ctr{padding-left:22px;padding-right:22px}
    .inwrap,.aanbod,.cta{padding-left:22px;padding-right:22px}
    .inwrap .head{flex-direction:column;align-items:flex-start;gap:14px}
    .inwrap .head p{text-align:left}
  }
  /* ---------- LIGGING & KAART (Spuikom als uitvalsbasis) ---------- */
  .ligging{background:var(--paper);padding:16vh 48px;border-top:1px solid var(--line)}
  .ligwrap{max-width:1280px;margin:0 auto;display:grid;grid-template-columns:1fr 1.15fr;gap:64px;align-items:center}
  .ligtxt .k{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--sand);margin-bottom:18px}
  .ligtxt h2{font-family:var(--serif);font-weight:500;font-size:clamp(34px,4.6vw,66px);line-height:1.02}
  .ligtxt .lead{font-size:16.5px;line-height:1.85;color:#46423a;max-width:46ch;margin-top:20px;
    text-align:justify;hyphens:auto}
  .ligfacts{margin-top:34px;border-top:1px solid var(--line)}
  .lf{padding:16px 0;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;align-items:baseline}
  .lfk{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);flex:0 0 auto}
  .lfv{font-family:var(--serif);font-size:clamp(18px,2vw,23px);color:var(--ink);text-align:right}
  .ligchips{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
  .lc{font-family:var(--sans);font-size:12px;letter-spacing:.06em;color:#46423a;background:var(--bg);
    border:1px solid var(--line);border-radius:100px;padding:8px 16px}
  .ligmapwrap{position:relative}
  .nordee-map{width:100%;height:560px;overflow:hidden;position:relative}
  /* Voyager-tiles: cream land + zacht blauw water (zoals de brochure), licht warm getint */
  .nordee-map .leaflet-tile{filter:saturate(1.02) brightness(1.02) contrast(.96) sepia(.04)}
  /* geen kader: paper-gradient-overlay laat de tiles aan de randen oplossen in de achtergrond.
     z-index 500 ligt boven de tiles (200) maar onder de markers (600) en zoomknop (800) → die blijven scherp */
  .nordee-map::after{content:"";position:absolute;inset:-1px;pointer-events:none;z-index:500;
    background:
      linear-gradient(to right,var(--paper) 0,transparent 6%,transparent 94%,var(--paper) 100%),
      linear-gradient(to bottom,var(--paper) 0,transparent 7%,transparent 93%,var(--paper) 100%)}
  .leaflet-container{background:var(--paper);font-family:var(--sans)}
  .nordee-map .leaflet-control-zoom{border:none;box-shadow:none;margin:18px}
  .nordee-map .leaflet-control-zoom a{color:var(--ink);border:1px solid var(--line);
    background:rgba(250,248,243,.88);backdrop-filter:blur(2px)}
  .nordee-pinwrap{position:relative}
  .nordee-pin{position:absolute;left:-9px;top:-9px;width:18px;height:18px;border-radius:50%;
    background:var(--sand);border:3px solid #fff;box-shadow:0 2px 10px rgba(0,0,0,.35)}
  .nordee-pin::after{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px solid var(--sand);
    opacity:.5;animation:pulse 2.6s ease-out infinite}
  @keyframes pulse{0%{transform:scale(.7);opacity:.6}100%{transform:scale(1.8);opacity:0}}
  .nordee-label{position:absolute;left:16px;top:-17px;background:var(--ink);color:#f3efe7;
    font-family:var(--sans);white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.32);
    border-radius:4px;padding:6px 12px;line-height:1.15}
  .nordee-label b{display:block;font-size:12.5px;letter-spacing:.08em;font-weight:600}
  .nordee-label i{display:block;font-size:8.5px;letter-spacing:.28em;font-style:normal;color:var(--sand);text-transform:uppercase}
  /* bestemming-labels (Oostende / De Haan / Strand / E40) — brochure-stijl callouts */
  .nordee-place{transform:translate(-50%,-50%);white-space:nowrap;text-align:center;pointer-events:none}
  .nordee-place .nm{display:block;font-family:var(--serif);font-size:15px;color:var(--ink);
    text-shadow:0 1px 3px rgba(247,244,237,.9),0 0 2px rgba(247,244,237,.9);line-height:1}
  .nordee-place .tm{display:inline-flex;align-items:center;gap:5px;margin-top:5px;
    background:rgba(255,253,248,.92);border:1px solid var(--line);border-radius:100px;
    padding:3px 9px 3px 8px;font-family:var(--sans);font-size:10px;letter-spacing:.12em;
    text-transform:uppercase;color:#46423a;box-shadow:0 2px 8px rgba(33,31,27,.14)}
  .nordee-place .tm svg{display:block;flex:0 0 auto}
  /* context-labels (Spuikom / Noordzee) — subtiel, cartografisch */
  .nordee-ctx{transform:translate(-50%,-50%);font-family:var(--serif);font-style:italic;
    color:#5f757e;font-size:13.5px;letter-spacing:.08em;white-space:nowrap;pointer-events:none;
    text-shadow:0 1px 3px rgba(247,244,237,.75),0 0 2px rgba(247,244,237,.75)}
  .nordee-ctx.sea{color:#7f9aa4;letter-spacing:.34em;text-transform:uppercase;font-size:11px}
  @media(max-width:860px){
    .ligging{padding:12vh 22px}
    .ligwrap{grid-template-columns:1fr;gap:38px}
    .nordee-map{height:400px}
    .lfv{font-size:19px}
  }

  /* ---------- prefers-reduced-motion: decoratieve/oneindige animaties dempen ---------- */
  @media(prefers-reduced-motion: reduce){
    .hero img{animation:none}                                  /* Ken Burns-zoom */
    .cue .ln{animation:none;opacity:.7}                        /* knipperende scroll-cue */
    .nordee-pin::after{animation:none;opacity:0}                /* pulserende kaart-ring */
    [data-hero]{animation-duration:.01ms !important;animation-iteration-count:1 !important}
    *{scroll-behavior:auto !important}
  }

  /* ---------- teaser-knop naar de aparte aanbod-pagina ---------- */
  .exlink{display:inline-block;margin-top:36px;background:var(--ink);color:#f3efe7;
    font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.14em;text-transform:uppercase;
    text-decoration:none;padding:18px 42px;border-radius:2px;transition:transform .35s,background .35s}
  .exlink:hover{transform:translateY(-3px);background:#000}
  /* terug-link boven de aanbod-pagina */
  .exback{display:inline-block;margin-bottom:22px;font-family:var(--sans);font-size:12px;
    letter-spacing:.14em;text-transform:uppercase;color:var(--muted);text-decoration:none;transition:color .3s}
  .exback:hover{color:var(--ink)}