:root { --ink:#111; --soft:#6a6a66; --line:#e8e8e8; --bg:#fff; --tint:#f5f4f1; --pine:#26382c; }
  * { box-sizing:border-box; }
  .s { font-family:"General Sans", ui-sans-serif, system-ui, sans-serif; color:var(--ink); background:var(--bg); font-size:16px; line-height:1.55; overflow-x:clip; }
  .serif { font-family:Zodiak, Georgia, serif; font-weight:100; letter-spacing:-.02em; line-height:1.02; }
  .mono { font-family:"DM Mono", ui-monospace, monospace; text-transform:uppercase; letter-spacing:.14em; font-size:12px; }
  h1,h2,h3,p { margin:0; }
  .wrap { padding:120px 64px; }
  .eyebrow { color:var(--soft); margin-bottom:28px; display:flex; align-items:center; gap:12px; }
  .eyebrow::before { content:""; width:28px; height:1px; background:currentColor; }
  html { scroll-behavior:smooth; }
  body { margin:0; }
  a { color:inherit; }
  .btn { cursor:pointer; text-decoration:none; background:none; color:inherit; font-family:inherit; line-height:1.2; display:inline-flex; align-items:center; gap:10px; border:1px solid currentColor; border-radius:4px; padding:10px 16px; font-size:15px; font-weight:500; }
  .btn.fill { background:var(--ink); color:#fff; border-color:var(--ink); }
  .arrow { font-size:13px; }
  .muted { color:var(--soft); }

  /* placeholders: cinematic photo/video */
  .media { position:relative; overflow:hidden; background:
      radial-gradient(70% 50% at 50% 35%, rgba(240,200,150,.35), transparent 70%),
      linear-gradient(180deg, #7d8c96 0%, #8f8a84 38%, #3e5040 62%, #1d2a20 100%); }
  .media.int { background: radial-gradient(80% 70% at 70% 20%, #f4e7d3, transparent 60%), linear-gradient(160deg,#d8cbb6,#9d8a70); }
  .media.int2 { background: radial-gradient(80% 70% at 20% 10%, #fbf7f0, transparent 60%), linear-gradient(160deg,#e3dbcf,#b9aa94); }
  .media.forest { background: radial-gradient(60% 60% at 30% 20%, #9fb38a, transparent 60%), linear-gradient(160deg,#4a6a4c,#1c2b1f); }
  .media > img, .hero .media > video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .media .cap { position:absolute; left:16px; bottom:14px; color:#fff; opacity:.85; }

  /* hero */
  .hero { position:relative; height:720px; color:#fff; }
  .hero .media { position:absolute; inset:0; }
  .hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%, transparent 65%, rgba(0,0,0,.45)); }
  .nav { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; padding:32px 64px; }
  .logo { font-family:Zodiak, Georgia, serif; font-weight:300; font-size:24px; letter-spacing:.02em; }
  .logo b { font-weight:400; }
  .links { display:flex; gap:30px; }
  .links a, .navr a { text-decoration:none; }
  .links a:hover { opacity:.7; }
  .navr { justify-self:end; display:flex; gap:22px; align-items:center; }
  .hero-foot { position:absolute; z-index:2; left:64px; right:64px; bottom:36px; display:flex; justify-content:space-between; align-items:flex-end; }
  .scroll { display:flex; flex-direction:column; align-items:center; gap:10px; }
  .scroll i { width:1px; height:44px; background:rgba(255,255,255,.7); }

  /* intro statement */
  .intro h1 { font-size:76px; max-width:1050px; }
  .intro h1 em { font-style:italic; font-weight:300; }
  .introgrid { display:grid; grid-template-columns:1fr 1fr; gap:64px; margin-top:64px; align-items:end; }
  .introgrid p { font-size:19px; max-width:470px; }
  .facts { display:grid; grid-template-columns:repeat(4,1fr); border-top:1px solid var(--line); margin-top:88px; }
  .facts div { padding:26px 0 0; }
  .facts b { display:block; font-family:Zodiak, Georgia, serif; font-weight:100; font-size:48px; line-height:1; margin-bottom:10px; }

  /* reveal */
  .reveal span { opacity:.14; transition:opacity .5s; }
  .reveal.on span { opacity:1; }

  /* who: hover list with image swap */
  .who { display:grid; grid-template-columns:1.15fr .85fr; gap:64px; align-items:center; }
  .wholist { list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
  .wholist li { display:grid; grid-template-columns:52px 1fr auto; align-items:baseline; gap:12px; padding:22px 0; border-bottom:1px solid var(--line); cursor:pointer; transition:padding .3s, color .3s; color:#b4b4ae; }
  .wholist li .serif { font-size:38px; }
  .wholist li.on { color:var(--ink); padding-left:12px; }
  .wholist li .d { font-size:14px; opacity:0; transition:opacity .3s; text-align:right; max-width:220px; }
  .wholist li.on .d { opacity:1; color:var(--soft); }
  .whoimg { aspect-ratio:4/5; border-radius:2px; }
  .whoimg .media { position:absolute; inset:0; opacity:0; transition:opacity .5s; }
  .whoimg .media.on { opacity:1; }

  /* apartment */
  .apt { background:var(--tint); }
  .aptgrid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; align-items:center; }
  .vert { aspect-ratio:9/16; max-width:340px; width:100%; border-radius:2px; }
  .vert .play { position:absolute; inset:0; display:grid; place-items:center; }
  .vert .play span { width:76px; height:76px; border:1px solid #fff; border-radius:50%; display:grid; place-items:center; color:#fff; font-size:20px; padding-left:4px; }
  .apt h2 { font-size:58px; margin-bottom:40px; }
  .spec { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #dcdad4; }
  .spec div { display:flex; justify-content:space-between; gap:12px; padding:16px 0; border-bottom:1px solid #dcdad4; }
  .spec div:nth-child(odd) { padding-right:24px; }
  .spec div:nth-child(even) { padding-left:24px; border-left:1px solid #dcdad4; }
  .spec span:last-child { text-align:right; }

  /* included: three poem columns */
  .incl h2 { font-size:58px; max-width:760px; margin-bottom:72px; }
  .cols { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; }
  .cols h3 { font-family:Zodiak, Georgia, serif; font-weight:300; font-size:26px; line-height:1.15; margin:18px 0 18px; }
  .cols ul { list-style:none; padding:0; margin:0; }
  .cols li { padding:10px 0; border-bottom:1px solid var(--line); }
  .num { color:var(--soft); }

  /* pricing */
  .price { background:var(--ink); color:#fff; }
  .pricegrid { display:grid; grid-template-columns:1fr 1fr; gap:80px; align-items:end; }
  .amount { font-size:150px; }
  .amount small { font-family:"DM Mono", monospace; font-size:14px; letter-spacing:.14em; text-transform:uppercase; opacity:.6; margin-left:10px; }
  .rows { border-top:1px solid #333; }
  .rows div { display:flex; justify-content:space-between; gap:16px; padding:16px 0; border-bottom:1px solid #333; }
  .rows div span:first-child { color:#9a9a95; }
  .fine { color:#8a8a85; font-size:13px; margin-top:22px; }
  .biz { margin-top:72px; display:flex; justify-content:space-between; align-items:center; gap:24px; border:1px solid #333; padding:28px 32px; border-radius:2px; }
  .biz .serif { font-size:32px; font-weight:300; }

  /* location */
  .locgrid { display:grid; grid-template-columns:1.1fr .9fr; gap:72px; align-items:center; }
  .loc h2 { font-size:58px; margin-bottom:36px; }
  .map { position:relative; aspect-ratio:1/1; background:var(--tint); border-radius:2px; overflow:hidden; }
  .map img,.map svg { position:absolute; inset:0; width:100%; height:100%; display:block; }
  .map .lbl { font-family:'DM Mono',monospace; font-size:21px; letter-spacing:2px; fill:#111; paint-order:stroke; stroke:#f2f1ed; stroke-width:6px; stroke-linejoin:round; }
  .map .road rect { fill:#fff; stroke:#bdbab2; stroke-width:1.5; }
  .map .road text { font-family:'DM Mono',monospace; font-size:17px; font-weight:500; fill:#555; }
  .map .name { font-family:Zodiak,Georgia,serif; font-size:40px; fill:#111; paint-order:stroke; stroke:#f2f1ed; stroke-width:8px; stroke-linejoin:round; }
  .map .osm { position:absolute; right:8px; bottom:6px; font-size:10px; color:var(--soft); text-decoration:none; }
  .dist div { display:grid; grid-template-columns:1fr auto; gap:16px; padding:18px 0; border-bottom:1px solid var(--line); align-items:baseline; }
  .dist div:first-child { border-top:1px solid var(--line); }
  .dist .serif { font-size:30px; font-weight:300; }

  /* gallery slider */
  .gal { padding:0 0 120px; }
  .galhead { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; padding:0 64px 40px; }
  .galhead h2 { font-size:58px; }
  .galnav { display:flex; gap:10px; align-items:center; }
  .galnav .mono { margin-right:14px; color:var(--soft); }
  .galnav button { background:none; cursor:pointer; font-family:inherit; color:var(--ink); padding:10px 14px; }
  .slider { display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding:0 64px; padding:0 64px; scrollbar-width:none; }
  .slider::-webkit-scrollbar { display:none; }
  .slide { flex:none; width:min(620px, 78%); margin:0; scroll-snap-align:start; }
  .slide img { width:100%; aspect-ratio:3/2; object-fit:cover; display:block; border-radius:2px; }
  .slide figcaption { display:flex; gap:14px; padding-top:14px; color:var(--soft); }
  .slide figcaption span { color:var(--ink); }

  /* faq */
  .faqgrid { display:grid; grid-template-columns:.7fr 1.3fr; gap:72px; }
  .faq h2 { font-size:58px; }
  .faq details { border-bottom:1px solid var(--line); }
  .faq details:first-child { border-top:1px solid var(--line); }
  .faq summary { list-style:none; cursor:pointer; display:grid; grid-template-columns:52px 1fr auto; gap:12px; padding:22px 0; font-size:19px; }
  .faq summary::-webkit-details-marker { display:none; }
  .faq summary::after { content:"+"; font-family:"DM Mono", monospace; font-size:18px; }
  .faq details[open] summary::after { content:"−"; }
  .faq details p { padding:0 0 24px 64px; color:var(--soft); max-width:620px; }

  /* closing CTA + form */
  .cta { position:relative; color:#fff; text-align:center; padding:150px 64px; }
  .cta .media { position:absolute; inset:0; }
  .cta::after { content:""; position:absolute; inset:0; background:rgba(0,0,0,.4); }
  .cta > *:not(.media) { position:relative; z-index:2; }
  .cta h2 { font-size:84px; margin:0 auto 40px; max-width:900px; }
  .form { display:grid; grid-template-columns:1fr 1fr; gap:0 48px; }
  .full { grid-column:1/-1; }
  .contactgrid { display:grid; grid-template-columns:.7fr 1.3fr; gap:72px; }
  .contactgrid h2 { font-size:58px; margin-bottom:28px; }
  .contactgrid p { margin-bottom:6px; }
  footer { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding:28px 64px; border-top:1px solid var(--line); color:var(--soft); }

  @media (max-width:820px) {
    .wrap { padding:80px 22px; }
    .nav { grid-template-columns:1fr auto; padding:22px; }
    .links { display:none; }
    .hero { height:640px; }
    .hero-foot { left:22px; right:22px; }
    .intro h1 { font-size:44px; }
    .introgrid,.who,.aptgrid,.pricegrid,.locgrid,.faqgrid,.contactgrid,.cols,.form { grid-template-columns:1fr; gap:40px; }
    .facts { grid-template-columns:1fr 1fr; row-gap:28px; }
    .facts b { font-size:38px; }
    /* mobiel: gewone lijst zonder interactie */
    .wholist li, .wholist li.on { grid-template-columns:40px 1fr; row-gap:4px; padding:18px 0; color:var(--ink); cursor:default; }
    .wholist li .serif { font-size:28px; }
    .wholist li .d { grid-column:2; opacity:1; text-align:left; max-width:none; color:var(--soft); }
    .whoimg { display:none; }
    .apt h2,.incl h2,.loc h2,.faq h2,.contactgrid h2 { font-size:40px; }
    .vert { margin:0 auto; }
    .spec { grid-template-columns:1fr; }
    .spec div:nth-child(even) { padding-left:0; border-left:0; }
    .spec div:nth-child(odd) { padding-right:0; }
    .amount { font-size:92px; }
    .biz { flex-direction:column; align-items:flex-start; }
    .galhead { padding:0 22px 28px; }
    .galhead h2 { font-size:40px; }
    .galnav .mono { display:none; }
    .slider { padding:0 22px; scroll-padding:0 22px; }
    .slide { width:86%; }
    .gal { padding-bottom:80px; }
    .cta { padding:100px 22px; }
    .cta h2 { font-size:48px; }
    .faq details p { padding-left:0; }
    footer { padding:24px 22px; }
  }

  /* language switch */
  .lang { display:flex; gap:6px; align-items:center; }
  .lang button { background:none; border:0; padding:4px 2px; color:inherit; font:inherit; letter-spacing:inherit; text-transform:inherit; cursor:pointer; opacity:.55; }
  .lang button[aria-pressed="true"] { opacity:1; text-decoration:underline; text-underline-offset:5px; }

  /* tour video */
  .vert { cursor:pointer; border:0; padding:0; display:block; color:#fff; }
  .vert video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
  .vert .play { z-index:1; }
  .vert:hover .play span { background:rgba(255,255,255,.15); }
  .vert .cap { z-index:1; }
  .modal { position:fixed; inset:0; z-index:50; background:rgba(10,10,10,.88); display:none; align-items:center; justify-content:center; padding:24px; }
  .modal.open { display:flex; }
  .modal video { max-height:calc(100% - 40px); max-width:100%; aspect-ratio:9/16; background:#000; border-radius:2px; }
  .modal .close { position:absolute; top:18px; right:22px; color:#fff; border-color:rgba(255,255,255,.6); }

  /* contact form */
  .form label { display:block; }
  .form .lbl { display:block; color:var(--soft); padding-top:22px; }
  .form input, .form select, .form textarea { width:100%; border:0; border-bottom:1px solid #cfcfca; background:none; padding:8px 0 12px; font:inherit; color:var(--ink); border-radius:0; outline:none; }
  .form textarea { resize:vertical; min-height:110px; }
  .form input:focus, .form select:focus, .form textarea:focus { border-bottom-color:var(--ink); }
  .form select { appearance:none; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23111'/%3E%3C/svg%3E") right 4px center no-repeat; }
  .seg { display:flex; gap:28px; padding:6px 0 4px; border:0; margin:0; }
  .seg label { cursor:pointer; padding-bottom:6px; color:var(--soft); border-bottom:1px solid transparent; }
  .seg input { position:absolute; opacity:0; width:1px; height:1px; }
  .seg label:has(input:checked) { color:var(--ink); border-bottom-color:var(--ink); }
  .seg label:has(input:focus-visible) { outline:1px dashed var(--ink); outline-offset:4px; }
  .bizonly[hidden] { display:none; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
  .formfoot { display:flex; gap:24px; align-items:center; flex-wrap:wrap; margin-top:36px; }
  .status { font-size:14px; }
  .status.ok { color:#2f6f3e; }
  .status.err { color:#a3362a; }
  .btn[disabled] { opacity:.5; cursor:wait; }
  .small { font-size:13px; }
  .slide figcaption i { font-style:normal; }