
/* Layout: donkere Westeros-site; per onderdeel een eigen accentkleur uit de kleurkaart, Baskerville voor koppen, Montserrat voor tekst */
:root{
  --ground:#141311;
  --surface:#1D1B18;
  --line:#35322C;
  --text:#F1ECE3;
  --muted:#ABA69C;
  --brass:#BF8F00;      /* Westeros goud */
  --brass-hi:#E2B81C;
  --sand:#CBBCA3;       /* Westeros zand */
  --copper:#C06200;     /* Westeros oranje */
  --grey:#878787;       /* Westeros grijs */
  --scrim:rgba(8,8,7,.93);
  --display:"Libre Baskerville","Baskerville","Baskerville Old Face",Georgia,serif;
  --sans:"Montserrat","Helvetica Neue",Helvetica,system-ui,sans-serif;
  color-scheme:dark;
  box-sizing:border-box;
  background:var(--ground);
}
:root[data-theme="light"],:root[data-theme="dark"]{color-scheme:dark}
*,*::before,*::after{box-sizing:inherit}
html{scroll-behavior:smooth;scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px)}
body{margin:0;background:var(--ground);color:var(--text);font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.7;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.wrap{width:100%;max-width:1180px;margin:0 auto;padding-inline:24px}

/* Header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:rgba(20,19,17,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;gap:.8rem;text-decoration:none}
.brand .mark{height:26px;width:auto;display:block}
.brand .word{height:16px;width:auto;display:block}
.foot-logo{width:240px;max-width:100%;height:auto;display:block}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{text-decoration:none;color:var(--muted);font-size:.98rem;transition:color .2s}
.nav a:hover{color:var(--text)}
.nav .btn{color:var(--ground)}
.menu-toggle{display:none;background:none;border:1px solid var(--line);color:var(--text);width:44px;height:44px;border-radius:2px;cursor:pointer}
.menu-toggle svg{display:block;margin:auto}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 1.4rem;border-radius:2px;font-family:var(--sans);font-weight:600;font-size:.98rem;text-decoration:none;cursor:pointer;border:1px solid var(--brass);background:var(--brass);color:var(--ground);transition:background .2s,border-color .2s}
.btn:hover{background:var(--brass-hi);border-color:var(--brass-hi)}
.btn.ghost{background:transparent;color:var(--text);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--brass);background:transparent}

/* Hero */
.hero{padding-block:96px 0;overflow:hidden}
.hero h1{font-family:var(--display);font-weight:400;font-size:clamp(2.5rem,6.4vw,5.4rem);line-height:1.06;letter-spacing:-.01em;margin:0;max-width:12ch}
.hero .tagline{display:block;font-family:var(--sans);font-weight:300;letter-spacing:.32em;text-transform:uppercase;color:var(--grey);font-size:.82rem;margin-bottom:1.75rem}
.hero p.lead{color:var(--muted);font-size:clamp(1.05rem,1.6vw,1.25rem);max-width:46ch;margin:2rem 0 0}
.hero .actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:2.25rem}
.skyline{display:block;width:100%;height:auto;margin-top:72px}
.skyline path{fill:none;stroke:var(--brass);stroke-width:1.4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.skyline .ground{stroke:var(--line)}
.skyline .draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s cubic-bezier(.6,.1,.2,1) forwards}
.skyline .d2{animation-delay:.25s}.skyline .d3{animation-delay:.5s}.skyline .d4{animation-delay:.75s}
.skyline .detail{stroke:var(--brass);opacity:0;animation:appear 1s ease forwards 2s}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes appear{to{opacity:.55}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .skyline .draw{animation:none;stroke-dashoffset:0}
  .skyline .detail{animation:none;opacity:.55}
}

/* Sections */
section{padding-block:112px}
.section-head{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:end;margin-bottom:64px}
h2{font-family:var(--display);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.15;margin:0}
.section-head p{color:var(--muted);margin:0;max-width:48ch}
.eyebrow{display:block;color:var(--brass);font-size:.85rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:1rem}

/* Divisions */
#groep{border-top:1px solid var(--line)}
.divisions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--brass)}
.division{padding:40px 32px 8px 0}
.division + .division{padding-left:32px;border-left:1px solid var(--line)}
.division h3{font-family:var(--sans);font-weight:700;font-size:1.05rem;letter-spacing:.12em;text-transform:uppercase;margin:0 0 .35rem}
.division h3 span{font-weight:300}
.division .role{color:var(--brass);font-size:.98rem;margin:0 0 1.25rem}
.role-toggle{all:unset;cursor:pointer;color:var(--brass)}
.role-toggle::after{content:" +"}
.role-toggle[aria-expanded="true"]::after{content:" \2013"}
.role-toggle:hover{color:var(--brass-hi)}
.role-toggle:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.division p{color:var(--muted);margin:0;max-width:36ch}
.stake{margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--line);max-width:36ch}
.stake dt{color:var(--brass);font-size:.78rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:.35rem}
.stake dd{margin:0;color:var(--muted);font-size:.95rem}
.stake dd+dd{margin-top:.35rem}
.stake-link{text-decoration:none}
.stake-link:hover strong{color:var(--brass-hi)}
.stake strong{color:var(--text);font-weight:600}

/* Statement */
.statement{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.statement blockquote{margin:0;font-family:var(--display);font-style:italic;font-size:clamp(1.7rem,4vw,3.2rem);line-height:1.25;max-width:24ch}
.statement .by{display:block;margin-top:2rem;color:var(--muted);font-family:var(--sans);font-size:1rem}

/* Projects */
.projects{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:56px 40px}
.project{display:flex;flex-direction:column;min-width:0}
.project .elev{border:1px solid var(--line);background:var(--surface);aspect-ratio:5/3;max-width:100%;display:flex;align-items:flex-end;padding:24px 20px 0}
.project .elev svg{width:100%;height:auto;display:block}
.project .elev path{fill:none;stroke:var(--brass);stroke-width:1.3;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.project .elev .ground{stroke:var(--line)}
.project .photo{display:block;border:1px solid var(--line);aspect-ratio:5/3;max-width:100%;overflow:hidden;background:var(--surface)}
.project .photo img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.project .photo:hover img{transform:scale(1.03)}
.project h3{font-family:var(--display);font-weight:400;font-size:1.5rem;margin:24px 0 0}
.project .place{color:var(--brass);margin:.15rem 0 1rem}
.project p.desc{color:var(--muted);margin:0 0 1.25rem}
.project dl{margin:auto 0 0;display:grid;grid-template-columns:auto 1fr;gap:.4rem 1.25rem;border-top:1px solid var(--line);padding-top:1rem;font-size:.95rem}
.project dt{color:var(--muted)}
.project dd{margin:0}
.project .more{margin-top:1rem;font-size:.95rem;color:var(--brass);text-decoration:none;font-weight:600}
.project .more:hover{color:var(--brass-hi)}

/* Uitgelicht: KaagWagt */
.feature{background:var(--surface);border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feature-title{display:flex;flex-wrap:wrap;align-items:baseline;gap:.5rem 1.25rem}
.feature-title .place{color:var(--brass);font-size:1.15rem}
.lead-img{margin:0 0 56px}
.lead-img button,.gallery button{all:unset;display:block;cursor:zoom-in;width:100%;height:100%}
.lead-img button:focus-visible,.gallery button:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px}
.lead-img img{display:block;width:100%;aspect-ratio:16/9;max-width:100%;object-fit:cover;border:1px solid var(--line)}
figcaption{color:var(--muted);font-size:.9rem;margin-top:.6rem}
.feature-body{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:72px;margin-bottom:72px}
.feature-body .text p{margin:0 0 1.25rem;max-width:60ch}
.feature-body .text p:first-child{font-size:1.2rem;color:var(--text)}
.feature-body .text p+p{color:var(--muted)}
.facts{margin:0;display:grid;grid-template-columns:auto 1fr;gap:.85rem 1.5rem;border-top:1px solid var(--brass);padding-top:1.5rem;font-size:.98rem;align-content:start}
.facts dt{color:var(--muted)}
.facts dd{margin:0}
.facts + .btn{margin-top:2rem}
.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:clamp(180px,22vw,290px);gap:16px;grid-template-areas:"kop kop hoek" "gevel gevel hoek" "metsel imp imp" "metsel bouw bouw"}
.gallery figure{margin:0;position:relative;overflow:hidden;border:1px solid var(--line);min-width:0}
.gallery img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.gallery figure:hover img{transform:scale(1.03)}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;margin:0;padding:2.5rem 1rem .8rem;color:var(--text);background:linear-gradient(to top,rgba(8,8,7,.85),rgba(8,8,7,0));pointer-events:none}
.g-kop{grid-area:kop}.g-hoek{grid-area:hoek}.g-gevel{grid-area:gevel}.g-metsel{grid-area:metsel}.g-imp{grid-area:imp}.g-bouw{grid-area:bouw}
@media (prefers-reduced-motion:reduce){.gallery img,.project .photo img{transition:none}}

.feature.alt{background:var(--ground);border-top:none}
.gallery-g{grid-template-areas:none}
.gallery-g .w2{grid-column:span 2}

/* Hallen: plattegrond + prijslijst */
.halls{margin-bottom:72px;border-top:1px solid var(--line);padding-top:48px}
.halls-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:.5rem 2rem;margin-bottom:32px}
.halls-head h3{font-family:var(--display);font-weight:400;font-size:clamp(1.5rem,2.8vw,2rem);margin:0}
.halls-head p{margin:0;color:var(--muted);font-size:.95rem}
.halls-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start}
.plan{margin:0;min-width:0}
.plan svg{display:block;width:100%;height:auto}
.hall{cursor:pointer;outline:none}
.hall rect{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:fill .2s}
.hall text{fill:var(--text);font-family:var(--sans);font-size:13px;font-weight:600;text-anchor:middle;pointer-events:none}
.hall text.sub{fill:var(--muted);font-size:11px;font-weight:400}
.hall:hover rect,.hall.is-active rect{fill:var(--brass)}
.hall:hover text,.hall.is-active text,.hall:hover text.sub,.hall.is-active text.sub{fill:var(--ground)}
.hall:focus-visible rect{stroke:var(--brass-hi);stroke-width:3}
.hall.sold rect{fill:var(--ground);stroke-dasharray:4 3}
.hall.sold text{fill:var(--muted)}
.hall-table tr.sold td{color:var(--muted)}
.hall-table tr.sold td:nth-child(5){color:var(--copper);font-weight:600}
.table-wrap{overflow-x:auto;min-width:0}
.hall-table{width:100%;border-collapse:collapse;font-size:.95rem;font-variant-numeric:tabular-nums;white-space:nowrap}
.hall-table th{color:var(--muted);font-weight:500;text-align:left;padding:0 .9rem .7rem 0;border-bottom:1px solid var(--brass)}
.hall-table td{padding:.75rem .9rem .75rem 0;border-bottom:1px solid var(--line)}
.hall-table .num{text-align:right}
.hall-table th:last-child,.hall-table td:last-child{padding-right:0}
.hall-table tbody tr{cursor:pointer;transition:background .2s;outline:none}
.hall-table tbody tr:hover,.hall-table tbody tr.is-active{background:var(--surface)}
.hall-table tbody tr.is-active td:first-child{color:var(--brass);font-weight:600}
.hall-table tbody tr:focus-visible{box-shadow:inset 0 0 0 2px var(--brass-hi)}
.note{color:var(--muted);font-size:.9rem;max-width:80ch;margin:24px 0 0}


/* Compacte projectopzet */
.project{text-decoration:none;color:inherit}
.project .card-meta{display:flex;flex-direction:column;gap:.15rem;margin-top:16px}
.project .card-name{font-family:var(--display);font-size:1.45rem}
.project .card-sub{color:var(--muted);font-size:.92rem}
.project:hover .card-name{color:var(--brass-hi)}
.proj-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 48px;margin-bottom:32px}
.proj-top h2{margin:.1rem 0 .2rem}
.proj-top .place{color:var(--brass)}
.proj-line{margin:0;color:var(--muted);max-width:42ch}
.lead-img{margin:0 0 32px}
.keyfacts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:0 0 32px;border-top:1px solid var(--brass)}
.keyfacts div{padding:16px 20px 0 0;min-width:0}
.keyfacts div+div{padding-left:20px;border-left:1px solid var(--line)}
.keyfacts dt{color:var(--muted);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;margin-bottom:.2rem}
.keyfacts dd{margin:0;font-weight:500}
.proj-actions{display:flex;flex-wrap:wrap;gap:12px}
.more-toggle::after{content:"+";margin-left:.6rem;font-weight:400}
.more-toggle[aria-expanded="true"]::after{content:"–"}
.more-panel{margin-top:48px}
.more-text{color:var(--muted);max-width:62ch;margin:0 0 48px}
@media (max-width:760px){
  .keyfacts{grid-template-columns:1fr 1fr}
  .keyfacts div,.keyfacts div+div{padding:14px 12px 14px 0;border-left:none;border-bottom:1px solid var(--line)}
}

/* Lightbox */
.lightbox{border:none;padding:0;background:transparent;max-width:min(1400px,calc(100vw - 32px));max-height:calc(100vh - 32px);color:var(--text)}
.lightbox::backdrop{background:var(--scrim)}
.lightbox img{display:block;max-width:100%;max-height:calc(100vh - 140px);margin:0 auto;object-fit:contain}
.lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:12px}
.lb-bar p{margin:0;color:var(--muted);font-size:.95rem;min-width:0}
.lb-btns{display:flex;gap:8px;flex-shrink:0}
.lb-btns button{background:var(--ground);border:1px solid var(--line);color:var(--text);width:44px;height:44px;border-radius:2px;cursor:pointer;font:inherit;font-size:1.1rem}
.lb-btns button:hover{border-color:var(--brass)}

/* Contact */
#contact{border-top:1px solid var(--line)}
.feature + #contact{border-top:none}
.type-table td:nth-child(6),.type-table td:nth-child(7){color:var(--muted)}
.type-table tbody tr{cursor:default}
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px}
.contact-intro p{color:var(--muted);max-width:40ch}
.details{margin-top:2.5rem;display:grid;gap:1.25rem}
.details div span{display:block;color:var(--muted);font-size:.92rem}
.details a{text-decoration:none;border-bottom:1px solid var(--line)}
.details a:hover{border-color:var(--brass)}
form{display:grid;gap:20px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:20px}
label{display:block;font-size:.92rem;color:var(--muted);margin-bottom:.4rem}
input,textarea{width:100%;font:inherit;color:var(--text);background:var(--surface);border:1px solid var(--line);border-radius:2px;padding:.8rem .9rem;min-height:48px}
input:focus,textarea:focus{outline:none;border-color:var(--brass)}
textarea{min-height:150px;resize:vertical}
.hidden-field{position:absolute;left:-9999px}
.form-status{margin:0;font-size:.95rem;color:var(--brass-hi);min-height:1.5em}

/* Footer */
footer{border-top:1px solid var(--line);padding-block:56px 40px;color:var(--muted);font-size:.95rem}
.foot{display:grid;grid-template-columns:2fr 1fr 1fr;gap:40px}
.foot h4{font-family:var(--sans);font-weight:600;color:var(--text);font-size:.98rem;margin:0 0 .75rem}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.4rem}
.foot a{text-decoration:none}
.foot a:hover{color:var(--text)}
.legal{margin-top:48px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px}

/* Responsive */
@media (max-width:900px){
  .section-head{grid-template-columns:1fr;gap:20px}
  .divisions{grid-template-columns:1fr}
  .division,.division + .division{padding:32px 0;border-left:none}
  .division + .division{border-top:1px solid var(--line)}
  .projects{grid-template-columns:1fr;gap:56px}
  .feature-body{grid-template-columns:1fr;gap:40px}
  .gallery{grid-template-columns:1fr 1fr;grid-auto-rows:auto;grid-template-areas:"kop kop" "hoek metsel" "gevel gevel" "imp imp" "bouw bouw"}
  .gallery figure{aspect-ratio:16/10}
  .g-hoek,.g-metsel{aspect-ratio:3/4!important}
  .gallery-g{grid-template-areas:none}
  .gallery-g .m2{grid-column:span 2}
  .halls-grid{grid-template-columns:1fr;gap:32px}
  .plan{max-width:520px}
  .nav{gap:1.4rem}
  .contact-grid{grid-template-columns:1fr;gap:48px}
  .foot{grid-template-columns:1fr 1fr}
  .foot > div:first-child{grid-column:1 / -1}
}
@media (max-width:760px){
  .menu-toggle{display:block}
  .nav{position:absolute;top:72px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--ground);border-bottom:1px solid var(--line);padding:8px 24px 24px;display:none}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav .btn{margin-top:16px;border-bottom:none}
  section{padding-block:80px}
  .hero{padding-block:64px 0}
  .row{grid-template-columns:1fr}
  .wrap{padding-inline:16px}
  .gallery{gap:10px}
  .gallery figcaption{font-size:.82rem;padding:2rem .7rem .55rem}
}

/* Onderdelen: eigen accentkleur per pagina */
.t-groep{--brass:#BF8F00;--brass-hi:#DDAD1E}
.t-dev{--brass:#7F5F3F;--brass-hi:#B8916A}
.t-invest{--brass:#BFBF9D;--brass-hi:#D8D8BC}
.t-part{--brass:#BE4600;--brass-hi:#E2692A}
:root{--c-groep:#BF8F00;--c-dev:#7F5F3F;--c-invest:#BFBF9D;--c-part:#BE4600}

/* Woordmerk */
.brand .mark{height:28px;width:auto;display:block}
.wm{font-family:var(--sans);font-size:1.02rem;letter-spacing:.05em;font-weight:300;color:var(--text);white-space:nowrap}
.wm b{font-weight:700}
.nav a[aria-current="page"]{color:var(--text)}

/* Lockup bovenaan een onderdeelpagina */
.entity-hero{padding-block:88px 72px;text-align:center;border-bottom:1px solid var(--line)}
.lockup{display:inline-flex;flex-direction:column;align-items:center;gap:18px}
.lockup img{width:clamp(96px,14vw,150px);height:auto}
.lockup .wm{font-size:clamp(1.5rem,4.2vw,2.6rem);letter-spacing:.04em;white-space:normal}
.lockup .tag{font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:var(--muted);margin-right:-.42em}
.entity-hero .intro{margin:32px auto 0;max-width:44ch;color:var(--muted);font-size:1.05rem}

/* Ingangen op de groepspagina */
.entries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.entry{display:flex;flex-direction:column;gap:20px;padding:32px 28px 28px;background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--c);text-decoration:none;color:inherit;transition:border-color .2s,transform .2s;min-width:0}
.entry:hover{border-color:var(--c);transform:translateY(-2px)}
.entry img{height:44px;width:auto;align-self:flex-start}
.entry .wm{font-size:1.1rem;white-space:normal}
.entry .role{color:var(--c-text,var(--c));margin:0;font-size:.95rem}
.entry .go{margin-top:auto;font-size:.9rem;color:var(--muted)}
.entry:hover .go{color:var(--text)}
@media (prefers-reduced-motion:reduce){.entry{transition:none}.entry:hover{transform:none}}

/* Kaarten voor beleggingen en participaties */
.tiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px}
.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit;min-width:0}
.tile .face{aspect-ratio:16/10;max-width:100%;border:1px solid var(--line);background:var(--surface);display:flex;align-items:center;justify-content:center;overflow:hidden}
.tile .face img.wmark{width:72px;opacity:.18}
.tile .name{font-family:var(--display);font-size:1.45rem;margin-top:16px}
.tile .sub{color:var(--muted);font-size:.92rem}
a.tile:hover .name{color:var(--brass-hi)}
.face.salt{background:#DACEB7;color:#3A2A20;flex-direction:column;gap:6px}
.face.salt span{font-family:"Italiana",Georgia,serif;font-size:clamp(2rem,5vw,3.2rem);letter-spacing:.3em;margin-right:-.3em;line-height:1}
.face.salt svg{width:46%;height:auto}
.face.salt svg path{fill:none;stroke:#B8664A;stroke-width:1.5}
.face.salt svg .gem{fill:#B8664A;stroke:none}
.face.stol span{font-family:var(--sans);font-weight:700;letter-spacing:.2em;font-size:clamp(1.2rem,3vw,1.8rem);margin-right:-.2em}

@media (max-width:900px){.entries{grid-template-columns:1fr}}
@media (max-width:760px){.tiles{grid-template-columns:1fr}.brand .wm{font-size:.9rem}}

.entity-hero .logo-full{display:block;margin:0 auto;width:min(560px,100%);height:auto}
.t-dev .btn:not(.ghost){color:var(--text)}
.entry[href="development.html"] .role{color:#B8916A}

/* Menu: alle items dezelfde kleur, contact als rustige omlijnde knop */
.nav a,.nav a:hover,.nav a[aria-current="page"]{color:var(--text)}
.nav a:not(.btn){position:relative}
.nav a[aria-current="page"]:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--brass)}
.nav a:not(.btn):hover{opacity:.75}
.nav .btn,.t-dev .nav .btn,.t-part .nav .btn{background:transparent;color:var(--text);border-color:var(--line)}
.nav .btn:hover{background:transparent;border-color:var(--brass)}
@media (max-width:760px){.nav a[aria-current="page"]:not(.btn)::after{display:none}}

/* Menu: lijntje onder elk item in de kleur van dat onderdeel */
.nav a[href="index.html"]{--c:var(--c-groep)}
.nav a[href="invest.html"]{--c:var(--c-invest)}
.nav a[href="development.html"]{--c:var(--c-dev)}
.nav a[href="partners.html"]{--c:var(--c-part)}
.nav a:not(.btn)::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--c,var(--brass));opacity:.7;transition:height .2s,opacity .2s}
.nav a:not(.btn):hover::after,.nav a[aria-current="page"]:not(.btn)::after{height:2px;opacity:1}
.nav a:not(.btn):hover{opacity:1}
@media (max-width:760px){
  .nav a:not(.btn){border-bottom-color:var(--line)}
  .nav a:not(.btn)::after{display:block;bottom:-1px;left:0;right:auto;width:28px}
}

/* Lijntekening: per onderdeel de eigen kleur */
.skyline .s-invest path{stroke:var(--c-invest)}
.skyline .s-dev path{stroke:#A88262}
.skyline .s-part path{stroke:var(--c-part)}
.skyline .d2{animation-delay:.35s}.skyline .d3{animation-delay:.7s}
.skyline .sk-name{fill:#A88262;stroke:none;font-family:var(--display);font-size:15px;letter-spacing:.04em}

/* Menu zonder lijntjes */
.nav a:not(.btn)::after{display:none!important}

/* Menu: kleur van het onderdeel alleen bij aanwijzen */
.nav a:not(.btn){transition:color .2s}
.nav a:not(.btn):hover{color:var(--c,var(--brass))!important;opacity:1}
.nav a[href="development.html"]{--c:#A88262}


/* Hero: eerst de contouren, daaronder de kop */
.hero-v2{padding-block:120px 96px;border-bottom:1px solid var(--line)}
.hero-v2 .skyline{margin-top:0}
.hero-v2 h1{margin-top:56px;max-width:none;font-size:clamp(2rem,4.6vw,3.8rem)}
@media (max-width:760px){.hero-v2{padding-block:72px 64px}.hero-v2 h1{margin-top:36px}}

/* Persoonlijke noot bij een project */
.note{margin:0 0 48px;padding-left:24px;border-left:2px solid var(--brass);max-width:62ch}
.note p{margin:0;font-family:var(--display);font-style:italic;font-size:1.15rem;line-height:1.6;color:var(--text)}

/* Brochure-viewer */
.pdfview{border:none;padding:0;width:min(1140px,calc(100vw - 32px));height:calc(100vh - 32px);max-width:none;max-height:none;background:var(--surface);color:var(--text);display:none;flex-direction:column}
.pdfview[open]{display:flex}
.pdfview::backdrop{background:var(--scrim)}
.pdf-bar{display:flex;align-items:center;gap:16px;padding:12px 16px;border-bottom:1px solid var(--line);flex-shrink:0}
.pdf-bar #pdf-title{font-family:var(--display);font-size:1.2rem}
.pdf-status{color:var(--muted);font-size:.9rem;margin-right:auto}
.pdf-bar button{background:var(--ground);border:1px solid var(--line);color:var(--text);width:40px;height:40px;border-radius:2px;cursor:pointer;font-size:1.2rem}
.pdf-pages{overflow:auto;padding:16px;display:flex;flex-direction:column;align-items:center;gap:16px;flex:1;min-height:0}
.pdf-pages canvas{width:100%;max-width:1100px;height:auto;background:#fff;box-shadow:0 2px 12px rgba(0,0,0,.4)}

/* Verkochte units: alleen de prijs doorgestreept */
.hall-table tr.sold td{color:inherit}
.price-sold{text-decoration:line-through;text-decoration-color:var(--brass);color:var(--muted)}
.sold-tag{display:inline-block;margin-left:.5rem;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass-hi)}
.soldout{margin:20px 0 0;font-family:var(--display);font-size:1.4rem;color:var(--brass-hi)}

.tile .face.photo-face img{width:100%;height:100%;object-fit:cover;display:block}

/* Invest: beknopte info per pand */
.tile .tile-more{align-self:flex-start;margin-top:14px;min-height:38px;padding:0 1rem;font-size:.9rem}
.tile-facts{margin:16px 0 0;display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;border-top:1px solid var(--brass);padding-top:12px;font-size:.95rem}
.tile-facts[hidden]{display:none}
.tile-facts div{display:contents}
.tile-facts dt{color:var(--muted)}
.tile-facts dd{margin:0}

/* Juridische pagina's */
.legal-page{padding-block:96px}
.legal-page .wrap{max-width:780px}
.legal-page h1{font-family:var(--display);font-weight:400;font-size:clamp(2rem,4vw,2.8rem);margin:0 0 .5rem}
.legal-date{color:var(--muted);font-size:.9rem;margin:0 0 48px}
.legal-page h2{font-family:var(--sans);font-weight:600;font-size:1.05rem;letter-spacing:.02em;margin:40px 0 .6rem}
.legal-page p,.legal-page li{color:var(--muted);max-width:68ch}
.legal-page ul{padding-left:1.2rem;margin:0 0 1rem}
.form-consent{margin:0;font-size:.88rem;color:var(--muted)}
.form-consent a{color:var(--text)}

/* Logo wisselt: bovenaan Groep, bij scrollen het onderdeel */
.brand-wrap{position:relative;display:flex;align-items:center;min-width:0}
.brand-wrap .brand{transition:opacity .25s,transform .25s}
.brand-wrap .brand-entity{position:absolute;left:0;top:50%;transform:translateY(-35%);opacity:0;pointer-events:none}
.brand-wrap .brand-groep{transform:translateY(0)}
.is-scrolled .brand-wrap .brand-groep{opacity:0;transform:translateY(-35%);pointer-events:none}
.is-scrolled .brand-wrap .brand-entity{opacity:1;transform:translateY(-50%);pointer-events:auto}
@media (prefers-reduced-motion:reduce){.brand-wrap .brand{transition:none}}

/* Beschikbaarheid op projectkaart */
.avail{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.avail-bar{display:block;height:3px;background:var(--line);border-radius:2px;overflow:hidden;max-width:260px}
.avail-bar span{display:block;height:100%;background:var(--brass)}
.avail-txt{font-size:.82rem;color:var(--muted)}

/* Blijf op de hoogte */
.updates{border-top:1px solid var(--line)}
.updates-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:72px;align-items:start}
.updates-grid p{color:var(--muted);max-width:40ch}
.updates-form{display:grid;gap:20px}
@media (max-width:900px){.updates-grid{grid-template-columns:1fr;gap:32px}}

/* Brochure-aanvraag */
.brochure-dlg{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:32px;width:min(520px,calc(100vw - 32px));border-radius:2px}
.brochure-dlg::backdrop{background:var(--scrim)}
.brochure-dlg h2{font-size:1.8rem;margin:0 0 .5rem}
.bd-intro{color:var(--muted);margin:0 0 24px}
.brochure-dlg form{display:grid;gap:16px}
.bd-close{position:absolute;top:12px;right:12px;background:none;border:1px solid var(--line);color:var(--text);width:36px;height:36px;cursor:pointer;font-size:1.1rem}

.bd-thanks{text-align:center;padding:16px 4px 4px}
.bd-thanks h2{margin:20px 0 12px}
.bd-thanks p{color:var(--muted);margin:0 auto 28px;max-width:36ch}
.bd-thanks a{color:var(--text)}
.bd-check{width:64px;height:64px;display:block;margin:0 auto}
.bd-check circle,.bd-check path{fill:none;stroke:var(--brass);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bd-check circle{stroke-dasharray:189;stroke-dashoffset:189;animation:bd-draw .7s ease-out forwards}
.bd-check path{stroke-dasharray:40;stroke-dashoffset:40;animation:bd-draw .4s .6s ease-out forwards}
@keyframes bd-draw{to{stroke-dashoffset:0}}
@media (prefers-reduced-motion:reduce){.bd-check circle,.bd-check path{animation:none;stroke-dashoffset:0}}
.brochure-dlg [hidden]{display:none!important}
