:root{
  --paper:#F5F1EA; --sand:#E7DFD2;
  --ink:#1D2A24; --muted:#5F6B64;
  --forest:#1F3A2E; --forest-2:#2A4A3B; --moss:#6E8B5E; --leaf:#D9EBCB;
  --brick:#B4573B; --brick-dark:#9A4630;
  --line:rgba(29,42,36,.14);
  --serif:"Fraunces", Georgia, "Times New Roman", serif;
  --sans:"Hanken Grotesk", "Segoe UI", Helvetica, Arial, sans-serif;
  --r:14px;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{ font-family:var(--sans); color:var(--ink); background:var(--paper); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }
img{ display:block; max-width:100%; }
button{ font:inherit; cursor:pointer; border:0; background:none; color:inherit; }
a{ color:inherit; }
.eyebrow{ font-weight:600; font-size:.72rem; letter-spacing:.22em; text-transform:uppercase; }
.wrap{ width:min(1180px, 100% - 40px); margin-inline:auto; }
:focus-visible{ outline:3px solid var(--brick); outline-offset:3px; }

/* ================= HERO ================= */
.hero{ position:relative; min-height:100svh; display:grid; grid-template-rows:auto 1fr auto; color:#fff; overflow:hidden; isolation:isolate; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:58% 45%; transform:scale(1.06); animation:drift 22s ease-out forwards; }
@keyframes drift{ to{ transform:scale(1); } }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(ellipse 60% 55% at 50% 52%, rgba(10,18,14,.55) 0%, rgba(10,18,14,.25) 60%, rgba(10,18,14,0) 100%),
    linear-gradient(180deg, rgba(15,25,20,.55) 0%, rgba(15,25,20,0) 22%),
    linear-gradient(0deg, rgba(15,25,20,.78) 0%, rgba(15,25,20,.1) 38%, rgba(15,25,20,0) 55%);
}
.topbar{ display:flex; justify-content:space-between; align-items:center; padding:26px 0; }
.tag{ display:inline-flex; align-items:center; gap:10px; border:1px solid rgba(255,255,255,.5); border-radius:99px; padding:7px 14px; background:rgba(255,255,255,.08); backdrop-filter:blur(6px); }
.tag .dot{ width:8px; height:8px; border-radius:50%; background:#9BC48A; box-shadow:0 0 0 4px rgba(155,196,138,.25); }
.topnav{ display:flex; gap:28px; align-items:center; }
.topnav a{ color:rgba(255,255,255,.88); text-decoration:none; font-size:.9rem; font-weight:500; }
.topnav a:hover{ color:#fff; }

.hero-center{ display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 0 40px; text-shadow:0 1px 3px rgba(0,0,0,.25), 0 2px 18px rgba(0,0,0,.35); }
.hero-center > *{ opacity:0; transform:translateY(14px); animation:rise .9s cubic-bezier(.2,.7,.2,1) forwards; }
.hero-center > :nth-child(1){ animation-delay:.15s } .hero-center > :nth-child(2){ animation-delay:.3s }
.hero-center > :nth-child(3){ animation-delay:.45s } .hero-center > :nth-child(4){ animation-delay:.7s }
@keyframes rise{ to{ opacity:1; transform:none; } }
.hero-center .eyebrow{ margin-bottom:18px; }
.hero h1{ font-family:var(--serif); font-weight:300; font-size:clamp(2.8rem, 7.4vw, 6.4rem); line-height:.92; letter-spacing:-.025em; font-variation-settings:"opsz" 144; }
.hero h1 em{ font-style:italic; font-weight:300; color:var(--leaf); }
.hero .addr{ margin-top:18px; font-size:1.05rem; font-weight:500; color:rgba(255,255,255,.9); }

.cta-zone{ margin-top:38px; display:flex; flex-direction:column; align-items:center; gap:14px; text-shadow:none; }
.cta{
  position:relative; display:inline-flex; align-items:center; gap:16px;
  background:var(--brick); color:#fff; border-radius:99px; padding:22px 34px 22px 30px;
  font-size:clamp(1.15rem, 2vw, 1.4rem); font-weight:600; letter-spacing:.01em;
  box-shadow:0 18px 40px -12px rgba(90,30,15,.65), inset 0 1px 0 rgba(255,255,255,.2);
  transition:transform .25s ease, background .25s ease, box-shadow .25s ease;
}
.hero .cta::before{ content:""; position:absolute; inset:-8px; border-radius:99px; border:1.5px solid rgba(255,255,255,.55); animation:ring 2.8s ease-out infinite; }
@keyframes ring{ 0%{ opacity:.9; transform:scale(.96) } 70%,100%{ opacity:0; transform:scale(1.12) } }
.cta:hover{ transform:translateY(-2px); background:var(--brick-dark); box-shadow:0 24px 48px -12px rgba(90,30,15,.75); }
.cta .ico{ width:40px; height:40px; border-radius:50%; background:rgba(255,255,255,.16); display:grid; place-items:center; }
.cta .arr{ transition:transform .25s ease; }
.cta:hover .arr{ transform:translateX(4px); }
.cta-sub{ font-size:.9rem; color:rgba(255,255,255,.88); display:flex; gap:14px; align-items:center; flex-wrap:wrap; justify-content:center; }
.cta-sub i{ width:4px; height:4px; background:rgba(255,255,255,.6); border-radius:50%; }
.next-slot{ display:inline-flex; gap:8px; align-items:center; padding:6px 12px; border-radius:99px; background:rgba(15,25,20,.45); backdrop-filter:blur(6px); font-size:.84rem; border:1px solid rgba(255,255,255,.18); color:#fff; }
.next-slot b{ color:var(--leaf); font-weight:600; }
.next-slot:hover{ background:rgba(15,25,20,.6); }

.hero-foot{ padding-bottom:28px; }
.statbar{
  display:grid; grid-template-columns:repeat(5,1fr) auto; align-items:center;
  background:rgba(20,32,26,.42); backdrop-filter:blur(14px) saturate(1.2); border:1px solid rgba(255,255,255,.16);
  border-radius:18px; padding:18px 10px 18px 26px;
}
.statbar .s{ padding:0 18px; border-left:1px solid rgba(255,255,255,.16); }
.statbar .s:first-child{ border-left:0; padding-left:0; }
.statbar .v{ font-family:var(--serif); font-size:1.9rem; font-weight:400; line-height:1; }
.statbar .v small{ font-size:1rem; margin-left:2px; }
.statbar .k{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.72); margin-top:6px; font-weight:600; }
.epc{ display:inline-flex; align-items:center; justify-content:center; width:34px; height:28px; background:#2E8B45; color:#fff; font-family:var(--sans); font-weight:700; font-size:1.05rem; clip-path:polygon(0 0,72% 0,100% 50%,72% 100%,0 100%); padding-right:6px; vertical-align:middle; }
.price{ background:var(--paper); color:var(--ink); border-radius:12px; padding:12px 20px; text-align:right; }
.price .eyebrow{ color:var(--brick); font-size:.62rem; }
.price .amt{ font-family:var(--serif); font-size:1.75rem; font-weight:500; color:var(--forest); line-height:1.1; }
.price .sub{ font-size:.72rem; color:var(--muted); }

/* ================= CONTENT ================= */
section{ position:relative; }
.intro{ padding:120px 0 90px; display:grid; grid-template-columns:1.1fr 1fr; gap:70px; align-items:center; }
.intro .fig{ position:relative; }
.intro .photo{ position:relative; border-radius:var(--r); overflow:hidden; aspect-ratio:4/3.2; }
.intro .photo img{ width:100%; height:100%; object-fit:cover; }
.intro .photo2{ position:absolute; width:42%; right:-34px; bottom:-40px; aspect-ratio:3/4; border-radius:12px; overflow:hidden; border:6px solid var(--paper); box-shadow:0 20px 40px -20px rgba(0,0,0,.35); }
.intro .photo2 img{ width:100%; height:100%; object-fit:cover; }
.cap{ position:absolute; left:12px; bottom:12px; background:rgba(245,241,234,.93); font-size:.66rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; padding:4px 9px; border-radius:4px; color:var(--ink); }
.intro .eyebrow{ color:var(--brick); }
h2.big{ font-family:var(--serif); font-weight:300; font-size:clamp(2.1rem,4vw,3.3rem); line-height:1.02; letter-spacing:-.02em; color:var(--forest); margin:14px 0 22px; }
h2.big em{ font-style:italic; }
.intro p{ color:#35433C; font-size:1.05rem; max-width:46ch; }
.intro p + p{ margin-top:14px; }
.link-cta{ margin-top:30px; display:inline-flex; gap:12px; align-items:center; font-weight:600; color:var(--forest); border-bottom:1.5px solid var(--forest); padding-bottom:4px; }
.link-cta:hover{ color:var(--brick); border-color:var(--brick); }

.gallery-head{ display:flex; justify-content:space-between; align-items:end; margin-bottom:26px; gap:16px; }
.mosaic{ display:grid; gap:10px; grid-template-columns:1.15fr 1fr 1fr; grid-template-rows:repeat(3, 200px);
  grid-template-areas:"terras zicht zicht" "terras slpk1 slpk2" "bad living slpk2"; }
.mosaic figure{ position:relative; overflow:hidden; border-radius:10px; background:var(--sand); }
.mosaic img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.mosaic figure:hover img{ transform:scale(1.04); }
.m-terras{grid-area:terras} .m-zicht{grid-area:zicht} .m-slpk1{grid-area:slpk1} .m-slpk2{grid-area:slpk2} .m-bad{grid-area:bad} .m-living{grid-area:living}
.m-zicht img{object-position:50% 62%}
.fine{ font-size:.75rem; color:var(--muted); margin-top:10px; }

.cols{ padding:100px 0; display:grid; grid-template-columns:1fr 1.2fr 1fr; gap:48px; }
.col h3{ font-family:var(--serif); font-weight:500; font-size:1.35rem; color:var(--forest); padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line); display:flex; gap:10px; align-items:baseline; }
.col h3 .n{ font-family:var(--sans); font-size:.72rem; color:var(--brick); font-weight:700; letter-spacing:.1em; }
.checks{ list-style:none; display:grid; gap:12px; }
.checks li{ display:grid; grid-template-columns:20px 1fr; gap:10px; font-size:.95rem; line-height:1.4; }
.checks svg{ width:20px; height:20px; margin-top:1px; }
.dist{ list-style:none; }
.dist li{ display:flex; justify-content:space-between; gap:12px; padding:9px 0; border-bottom:1px dashed var(--line); font-size:.95rem; }
.dist li:last-child{ border:0; }
.dist b{ font-family:var(--serif); font-weight:500; color:var(--forest); white-space:nowrap; }
.dist small{ color:var(--muted); margin-left:6px; font-family:var(--sans); font-weight:400; }
.facts{ background:var(--sand); border-radius:var(--r); padding:26px; }
.facts dl{ display:grid; grid-template-columns:auto 1fr; row-gap:6px; column-gap:14px; font-size:.9rem; }
.facts dt{ color:var(--muted); } .facts dd{ font-weight:600; text-align:right; }

/* ================= BOOK BAND ================= */
.band{ background:var(--forest); color:#fff; padding:90px 0; overflow:hidden; }
.band::before{ content:""; position:absolute; inset:0; opacity:.07; background-image:radial-gradient(circle at 1px 1px,#fff 1px,transparent 0); background-size:12px 12px; }
.band .wrap{ position:relative; display:grid; grid-template-columns:1.2fr 1fr; gap:60px; align-items:center; }
.band .eyebrow{ color:#B9D3A8; }
.band h2{ font-family:var(--serif); font-weight:300; font-size:clamp(2.2rem,4.5vw,3.8rem); line-height:1; letter-spacing:-.02em; margin:14px 0 20px; }
.band h2 em{ font-style:italic; color:var(--leaf); }
.band p{ color:rgba(255,255,255,.8); max-width:44ch; }
.band .cta{ margin-top:32px; }
.contact-row{ display:flex; gap:34px; flex-wrap:wrap; margin-top:34px; padding-top:22px; border-top:1px solid rgba(255,255,255,.14); }
.contact-row .lbl{ display:block; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(255,255,255,.6); font-weight:600; margin-bottom:3px; }
.contact-row a{ text-decoration:none; font-weight:600; font-size:1.05rem; }
.contact-row a.big{ font-family:var(--serif); font-weight:400; font-size:1.45rem; }
.contact-row a:hover{ color:var(--leaf); }
.steps{ list-style:none; display:grid; counter-reset:s; }
.steps li{ counter-increment:s; display:grid; grid-template-columns:48px 1fr; gap:16px; padding:18px 0; border-top:1px solid rgba(255,255,255,.14); }
.steps li:last-child{ border-bottom:1px solid rgba(255,255,255,.14); }
.steps li::before{ content:"0" counter(s); font-family:var(--serif); font-size:1.7rem; font-weight:300; color:var(--leaf); line-height:1; }
.steps b{ display:block; font-weight:600; margin-bottom:2px; }
.steps span{ color:rgba(255,255,255,.72); font-size:.93rem; }

footer{ padding:34px 0 110px; font-size:.85rem; color:var(--muted); }
footer .wrap{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center; }
footer .right{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.admin-link{ display:inline-grid; place-items:center; width:26px; height:26px; border-radius:50%; color:var(--muted); opacity:.35; transition:opacity .2s, background .2s; }
.admin-link:hover, .admin-link:focus-visible{ opacity:1; background:var(--sand); }

.sticky{ position:fixed; left:12px; right:12px; bottom:12px; z-index:40; display:none; transition:transform .35s ease, opacity .35s ease; }
.sticky.hide{ transform:translateY(120%); opacity:0; pointer-events:none; }
.sticky .cta{ width:100%; justify-content:center; padding:16px; font-size:1.05rem; }

/* ================= BOOKING DIALOG ================= */
dialog{ border:0; padding:0; background:transparent; max-width:none; max-height:none; width:100%; height:100%; }
dialog::backdrop{ background:rgba(12,20,16,.55); backdrop-filter:blur(4px); }
.sheet{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(880px, calc(100% - 32px)); max-height:calc(100svh - 40px); overflow:auto;
  background:var(--paper); border-radius:22px; box-shadow:0 40px 80px -20px rgba(0,0,0,.5);
  display:grid; grid-template-columns:280px 1fr;
}
dialog[open] .sheet{ animation:pop .45s cubic-bezier(.2,.8,.2,1); }
@keyframes pop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.98) } }
.aside{ background:var(--forest); color:#fff; padding:28px; position:relative; overflow:hidden; border-radius:22px 0 0 22px; display:flex; flex-direction:column; }
.aside .thumb{ border-radius:10px; overflow:hidden; aspect-ratio:4/3; margin:-6px -6px 20px; }
.aside .thumb img{ width:100%; height:100%; object-fit:cover; }
.aside h3{ font-family:var(--serif); font-weight:400; font-size:1.5rem; line-height:1.1; }
.aside h3 em{ font-style:italic; color:var(--leaf); }
.aside .meta{ margin-top:14px; display:grid; gap:9px; font-size:.9rem; color:rgba(255,255,255,.82); }
.aside .meta div{ display:flex; gap:10px; align-items:center; }
.aside .meta a{ text-decoration:none; }
.aside .meta svg{ width:18px; height:18px; flex:none; opacity:.8; }
.aside .chosen{ margin-top:auto; padding-top:20px; }
.aside .chosen .box{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); border-radius:12px; padding:14px; }
.aside .chosen .eyebrow{ color:#B9D3A8; font-size:.62rem; }
.aside .chosen .when{ font-family:var(--serif); font-size:1.25rem; margin-top:4px; line-height:1.2; }
.aside .chosen .when.empty{ color:rgba(255,255,255,.5); font-style:italic; font-size:1rem; }

.main{ padding:26px 30px 28px; display:flex; flex-direction:column; min-height:580px; }
.main-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.progress{ display:flex; gap:6px; align-items:center; font-size:.78rem; color:var(--muted); font-weight:600; }
.progress .p{ display:flex; align-items:center; gap:6px; }
.progress .p i{ width:22px; height:22px; border-radius:50%; border:1.5px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:.7rem; }
.progress .p.on{ color:var(--forest); } .progress .p.on i{ background:var(--forest); border-color:var(--forest); color:#fff; }
.progress .p.done i{ background:var(--moss); border-color:var(--moss); color:#fff; }
.progress .sep{ width:18px; height:1px; background:var(--line); }
.x{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:var(--muted); }
.x:hover{ background:var(--sand); color:var(--ink); }

.step{ display:none; flex-direction:column; flex:1; }
.step.on{ display:flex; }
.step h4{ font-family:var(--serif); font-weight:400; font-size:1.65rem; color:var(--forest); letter-spacing:-.01em; line-height:1.1; }
.step .lead{ color:var(--muted); font-size:.93rem; margin-top:4px; }

.weeknav{ display:flex; justify-content:space-between; align-items:center; margin:20px 0 10px; }
.weeknav .lbl{ font-weight:600; font-size:.95rem; }
.weeknav .btns{ display:flex; gap:6px; }
.weeknav button{ width:34px; height:34px; border-radius:50%; border:1px solid var(--line); display:grid; place-items:center; }
.weeknav button:hover:not(:disabled){ background:var(--sand); }
.weeknav button:disabled{ opacity:.35; cursor:default; }
.days{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.day{ border:1px solid var(--line); border-radius:12px; padding:9px 4px 8px; text-align:center; background:#fff; transition:all .18s ease; }
.day .dn{ font-size:.66rem; letter-spacing:.12em; text-transform:uppercase; font-weight:600; color:var(--muted); }
.day .dd{ font-family:var(--serif); font-size:1.45rem; line-height:1.15; color:var(--ink); }
.day .cnt{ font-size:.68rem; font-weight:600; color:var(--moss); }
.day:hover:not(:disabled){ border-color:var(--forest); }
.day:disabled{ background:transparent; cursor:default; }
.day:disabled .dd, .day:disabled .cnt{ color:#B5B9B2; }
.day.sel{ background:var(--forest); border-color:var(--forest); }
.day.sel .dn,.day.sel .dd{ color:#fff; } .day.sel .cnt{ color:var(--leaf); }
.days.loading{ opacity:.5; pointer-events:none; }

.slots-wrap{ margin-top:18px; flex:1; }
.slot-group + .slot-group{ margin-top:14px; }
.slot-group .eyebrow{ color:var(--muted); font-size:.64rem; margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.slot-group .eyebrow::after{ content:""; flex:1; height:1px; background:var(--line); }
.slots{ display:grid; grid-template-columns:repeat(auto-fill, minmax(84px,1fr)); gap:8px; }
.slot{ border:1.5px solid var(--forest); color:var(--forest); border-radius:10px; padding:10px 0; font-weight:600; font-size:.95rem; transition:all .15s ease; background:#fff; }
.slot:hover:not(:disabled){ background:var(--leaf); }
.slot.sel{ background:var(--brick); border-color:var(--brick); color:#fff; }
.slot:disabled{ border-color:transparent; background:repeating-linear-gradient(-45deg, transparent 0 5px, rgba(29,42,36,.06) 5px 10px); color:#A9AEA7; text-decoration:line-through; cursor:default; }
.empty-day{ text-align:center; color:var(--muted); padding:36px 10px; font-size:.95rem; }
.empty-day a{ color:var(--forest); font-weight:600; }
.tz{ font-size:.75rem; color:var(--muted); margin-top:14px; }

.foot{ display:flex; justify-content:space-between; align-items:center; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); gap:12px; }
.btn{ display:inline-flex; align-items:center; gap:10px; padding:13px 22px; border-radius:99px; font-weight:600; background:var(--forest); color:#fff; transition:background .2s ease, opacity .2s; text-decoration:none; }
.btn:hover:not(:disabled){ background:var(--forest-2); }
.btn:disabled{ opacity:.35; cursor:not-allowed; }
.btn.brick{ background:var(--brick); } .btn.brick:hover:not(:disabled){ background:var(--brick-dark); }
.btn.ghost{ background:transparent; color:var(--muted); padding-inline:6px; }
.btn.ghost:hover{ color:var(--ink); background:transparent; }

.form{ display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:22px; }
.form .full{ grid-column:1/-1; }
.field label{ display:block; font-size:.78rem; font-weight:600; margin-bottom:6px; color:var(--ink); }
.field label span{ color:var(--muted); font-weight:400; }
.field input, .field textarea{ width:100%; font:inherit; font-size:.97rem; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); transition:border-color .15s; }
.field textarea{ resize:vertical; min-height:84px; }
.field input:focus, .field textarea:focus{ outline:none; border-color:var(--forest); box-shadow:0 0 0 4px rgba(31,58,46,.08); }
.hp{ position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.consent{ display:flex; gap:10px; font-size:.84rem; color:var(--muted); align-items:flex-start; }
.consent input{ margin-top:3px; accent-color:var(--forest); }
.notice{ display:flex; gap:12px; background:var(--leaf); color:var(--forest); border-radius:12px; padding:12px 14px; font-size:.88rem; margin-top:16px; text-align:left; }
.notice svg{ flex:none; width:20px; height:20px; margin-top:1px; }
.notice.error{ background:#F6DED5; color:#8B3A22; }
.notice.spam{ background:#FFF3D6; color:#6B4A0E; border:1.5px solid #EBCB82; }
.notice.spam b{ display:block; font-size:.95rem; margin-bottom:2px; }

.done{ text-align:center; padding:6px 6px 0; display:flex; flex-direction:column; align-items:center; flex:1; justify-content:center; }
.seal{ width:80px; height:80px; border-radius:50%; background:var(--leaf); display:grid; place-items:center; margin-bottom:18px; position:relative; }
.seal svg{ width:36px; height:36px; }
.seal::after{ content:""; position:absolute; inset:-10px; border-radius:50%; border:1px dashed var(--moss); animation:spin 18s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg) } }
.done h4{ font-size:2rem; }
.done .lead{ max-width:44ch; margin-inline:auto; margin-top:8px; }
.done .notice.spam{ max-width:500px; margin-top:20px; }
.timeline{ list-style:none; margin:24px auto 4px; display:grid; grid-template-columns:repeat(3,1fr); width:100%; max-width:520px; position:relative; }
.timeline::before{ content:""; position:absolute; top:13px; left:16%; right:16%; height:2px; background:linear-gradient(90deg, var(--moss) 0 50%, var(--line) 50% 100%); }
.timeline li{ position:relative; display:flex; flex-direction:column; align-items:center; gap:8px; font-size:.8rem; color:var(--muted); }
.timeline li i{ width:28px; height:28px; border-radius:50%; background:var(--paper); border:2px solid var(--line); display:grid; place-items:center; font-style:normal; font-size:.72rem; font-weight:700; }
.timeline li.ok{ color:var(--forest); font-weight:600; } .timeline li.ok i{ background:var(--moss); border-color:var(--moss); color:#fff; }
.timeline li.now{ color:var(--brick); font-weight:600; } .timeline li.now i{ border-color:var(--brick); color:var(--brick); animation:pulse 1.6s ease-in-out infinite; }
@keyframes pulse{ 50%{ box-shadow:0 0 0 6px rgba(180,87,59,.15) } }

/* ================= RESPONSIVE ================= */
@media (max-width: 900px){
  .topnav a{ display:none; }
  .statbar{ grid-template-columns:repeat(3,1fr); row-gap:16px; padding:16px; }
  .statbar .s:nth-child(4){ border-left:0; padding-left:0; }
  .price{ grid-column:1/-1; text-align:left; display:flex; justify-content:space-between; align-items:center; }
  .intro{ grid-template-columns:1fr; gap:60px; padding:80px 0 60px; }
  .intro .photo2{ right:-8px; }
  .mosaic{ grid-template-columns:1fr 1fr; grid-template-rows:repeat(4,170px); grid-template-areas:"zicht zicht" "terras slpk1" "terras slpk2" "bad living"; }
  .cols{ grid-template-columns:1fr; padding:70px 0; }
  .band .wrap{ grid-template-columns:1fr; }
  .sheet{ grid-template-columns:1fr; top:auto; bottom:0; transform:translateX(-50%); width:100%; max-height:94svh; border-radius:22px 22px 0 0; }
  dialog[open] .sheet{ animation:slideup .4s cubic-bezier(.2,.8,.2,1); }
  @keyframes slideup{ from{ transform:translate(-50%, 40px); opacity:0 } }
  .aside{ border-radius:22px 22px 0 0; padding:18px 20px; flex-direction:row; gap:14px; align-items:center; }
  .aside .thumb, .aside .meta{ display:none; }
  .aside h3{ font-size:1.1rem; }
  .aside .chosen{ margin:0 0 0 auto; padding:0; }
  .aside .chosen .box{ padding:8px 12px; }
  .aside .chosen .when{ font-size:.95rem; }
  .main{ padding:20px; min-height:0; }
  .progress .p b{ display:none; }
  .days{ gap:4px; } .day .dd{ font-size:1.15rem; }
  .form{ grid-template-columns:1fr; }
  .sticky{ display:block; }
}
@media (max-width: 480px){
  .statbar{ padding:14px 12px; }
  .statbar .s{ padding:0 10px; }
  .statbar .v{ font-size:1.35rem; }
  .statbar .k{ font-size:.58rem; letter-spacing:.08em; }
  .hero .addr{ font-size:.92rem; }
  .cta-sub{ font-size:.8rem; }
  .timeline li{ font-size:.7rem; }
}
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important; transition:none !important; }
  .hero-center > *{ opacity:1; transform:none; }
}