@font-face{font-family:Prefere;src:url('fonts/FlPrefere/FLPrefere-Medium.woff2') format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Basis;src:url('fonts/KvSw-Basis/KvSw_Basis-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Basis;src:url('fonts/KvSw-Basis/KvSw_Basis-Bold.woff2') format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Titel;src:url('fonts/KvSw-Titel/KvSw_Titel-Regular.woff2') format('woff2');font-weight:400;font-display:swap}
:root{--blue:#304b9a;--green:#a6a44f;--pink:#f7bfc9;--cream:#e1d8cf;--wine:#8e2427;--red:#e30613;--ink:#171914;--gutter:clamp(22px,5.2vw,100px)}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--blue);background:var(--cream);font:16px/1.65 Basis,Arial,sans-serif}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}a{color:inherit;text-decoration:none}button{cursor:pointer}img{display:block;width:100%;height:100%;object-fit:cover}svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.4}h1,h2,h3,p,figure{margin:0}h1,h2,h3{font-family:Prefere,Georgia,serif;font-weight:500;line-height:1.02;letter-spacing:-.035em}h2{font-size:clamp(46px,6.1vw,98px)}p+p{margin-top:22px}.symbols{position:absolute;width:0;height:0}.skip{position:fixed;top:-100px;left:20px;background:var(--pink);padding:15px;z-index:100}.skip:focus{top:10px}:focus-visible{outline:3px solid var(--red);outline-offset:6px}section[id]{scroll-margin-top:10px}.header{height:90px;background:var(--cream);display:flex;align-items:center;justify-content:space-between;padding:0 var(--gutter);gap:25px;position:sticky;top:0;z-index:20;border-bottom:1px solid #304b9a20}.brand{width:clamp(230px,25vw,385px);flex-shrink:0}.brand img{height:auto}.header nav{display:flex;gap:30px;font-size:13px}.header nav a{padding:10px 0;border-bottom:1px solid transparent}.header nav a:hover,.header nav a.active{border-color:currentColor}.header-cta{display:flex;gap:28px;align-items:center;background:var(--blue);color:var(--cream);padding:13px 20px;font-size:13px}.header-cta:hover{background:var(--wine)}.hero{height:calc(100svh - 90px);min-height:640px;max-height:1150px;position:relative;overflow:hidden;color:var(--cream)}.hero-image,.hero-shade{position:absolute;inset:0}.hero-image img{object-position:50% 55%;transform:scale(1.06)}.hero-shade{background:linear-gradient(90deg,#111d1680,transparent 85%),linear-gradient(0deg,#10281850,transparent 70%)}.hero-copy{position:absolute;left:var(--gutter);top:12%}.eyebrow{font-size:11px;letter-spacing:.14em;text-transform:uppercase;line-height:1.5}.hero-copy .eyebrow{margin-bottom:30px}.hero h1{font-size:clamp(90px,12.5vw,205px);line-height:.91;color:#fff7ec}.hero h1>span{display:block}.hero h1>span+span{padding-left:7vw}.pink-dash{display:inline-block;background:var(--pink);width:.45em;height:.075em;vertical-align:baseline;margin-left:.18em}.hero-scroll{position:absolute;left:var(--gutter);bottom:125px;display:flex;align-items:center;gap:30px;font-size:12px}.hero-scroll svg{transform:rotate(90deg)}.image-caption{position:absolute;right:var(--gutter);bottom:125px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}.landscape-hero{position:absolute;bottom:-2px;left:-5%;width:110%;height:130px}.landscape svg{width:100%;height:100%;stroke:none}.section{padding:95px var(--gutter) 110px}.section-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:65px}.seed{width:10px;height:10px;background:var(--red);border-radius:50%;position:relative}.seed:after{content:'';position:absolute;width:1px;height:35px;background:currentColor;top:17px;left:4px}.intro{background:var(--blue);color:var(--cream)}.intro-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:8vw}.intro h2{font-size:clamp(46px,5.5vw,86px)}.intro-text{font-size:16px;max-width:430px;padding-top:10px}.text-link{display:inline-flex;gap:30px;align-items:center;padding:12px 0;border-bottom:1px solid currentColor;font-size:12px;margin-top:25px}.text-link:hover svg{transform:translateX(5px)}.text-link svg{transition:transform .2s}.intro-pictures{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:12vw;margin:100px 10vw 0}.portrait{max-width:360px;transform:rotate(-3deg)}.portrait img{height:350px;object-position:center}.portrait figcaption{font-size:11px;margin-top:13px}.intro-quote p{font-size:clamp(30px,3.8vw,58px);line-height:1.15;font-family:Prefere,Georgia,serif;color:var(--pink)}.tiny-line{width:55px;height:7px;background:var(--pink);display:block;margin-bottom:32px}.panorama{padding:0;background:var(--blue)}.panorama-frame{position:relative;height:75vw;max-height:850px;min-height:440px;overflow:hidden}.panorama-frame:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#17281c70,transparent 70%)}.panorama-frame img{height:115%;object-position:center}.panorama-label{position:absolute;bottom:75px;left:var(--gutter);color:#fff7ec;z-index:1}.panorama-label h2{margin-top:25px}.panorama .image-caption{bottom:25px;z-index:1;color:white}.qualities{background:var(--green);color:var(--ink)}.qualities h2{max-width:900px}.qualities h2>span{color:var(--blue)}.quality-grid{display:grid;grid-template-columns:1fr 1fr;gap:12vw;margin-top:80px;align-items:center}.quality-copy{max-width:570px}details{border-top:1px solid #17191450;padding:22px 0}details:last-child{border-bottom:1px solid #17191450}summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:18px;gap:20px}summary::-webkit-details-marker{display:none}summary svg{flex-shrink:0;transition:transform .25s}details[open] summary svg{transform:rotate(45deg)}details p{font-size:14px;padding:20px 35px 4px 0;max-width:450px}.quality-image{position:relative;max-width:450px}.quality-image img{height:530px}.quality-image figcaption{font-size:11px;margin-top:14px}.image-tab{position:absolute;width:85px;height:18px;background:var(--pink);right:-25px;top:38px;transform:rotate(6deg)}.wonen{background:var(--cream)}.wonen-heading{display:flex;justify-content:space-between;gap:50px;align-items:end}.wonen-heading>p{max-width:350px;font-size:14px;margin-bottom:8px}.gallery-tools{display:flex;justify-content:space-between;align-items:center;margin:65px 0 30px;gap:15px}.filters{display:flex;gap:8px}.filters button{border:1px solid #304b9a50;background:none;border-radius:100px;padding:10px 18px;color:var(--blue);font-size:12px}.filters button.active{background:var(--blue);color:var(--cream)}.gallery-count{font-size:11px}.homes{display:grid;grid-template-columns:repeat(3,1fr);gap:25px}.home-card{border:0;padding:0;background:none;color:var(--blue);text-align:left;min-width:0}.home-card[hidden]{display:none}.card-image{display:block;height:350px;position:relative;overflow:hidden}.card-image img{transition:transform .6s}.home-card:hover img{transform:scale(1.045)}.card-plus{position:absolute;bottom:16px;right:16px;background:var(--cream);height:42px;width:42px;display:grid;place-items:center}.card-meta{display:flex;justify-content:space-between;gap:5px;margin:17px 0 12px;font-size:9px;text-transform:uppercase;letter-spacing:.08em}.card-meta>span{opacity:.7}.home-card h3{font-size:clamp(26px,2.55vw,40px)}.availability{border-top:1px solid #304b9a40;margin-top:55px;padding-top:25px;display:flex;justify-content:space-between;gap:20px;font-size:12px}.availability a{display:flex;gap:15px;align-items:center}.sketch-story{background:#fff;color:var(--blue);padding:100px var(--gutter) 0;display:grid;grid-template-columns:1fr 1.15fr;align-items:center;overflow:hidden}.sketch-story h2{font-size:clamp(45px,4.7vw,74px);margin:25px 0}.sketch-story p:last-child{font-size:14px;margin-bottom:45px}.sketch-story img{height:auto;align-self:end}.contact{background:var(--pink);color:var(--wine);position:relative;overflow:hidden;padding-top:130px}.contact-ribbon{height:50px;position:absolute;top:0;left:0;width:100%;background:var(--blue);clip-path:polygon(0 0,100% 0,100% 65%,68% 20%,30% 100%,0 30%)}.contact-inner{display:grid;grid-template-columns:1.2fr 1fr;gap:13vw}.contact h2{margin:30px 0;font-size:clamp(50px,6.2vw,96px)}.contact-inner>div>p:not(.eyebrow){max-width:350px;font-size:14px}.contact-mark{display:block;font:100px Titel,Arial,sans-serif;margin-top:45px}.form-note{font-size:11px;border-left:2px solid var(--wine);padding-left:14px;max-width:400px;margin-bottom:30px}label{display:block;font-size:12px;margin:20px 0 4px}input,select{display:block;width:100%;border:0;border-bottom:1px solid #8e242780;padding:12px 0;background:transparent;color:var(--wine);border-radius:0;font-size:15px}input::placeholder{color:#8e2427aa}select option{background:var(--pink)}.submit{display:flex;justify-content:space-between;width:100%;border:0;background:var(--wine);color:var(--pink);padding:20px 24px;margin-top:30px}.submit:hover{background:var(--blue)}#form-status{font-size:13px;margin-top:20px}footer{padding:65px var(--gutter) 30px;background:var(--blue);color:var(--cream)}.footer-wordmark{font:clamp(28px,5.8vw,110px)/1.2 Titel,Arial,sans-serif;display:block;margin-bottom:55px;letter-spacing:-.03em}.footer-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;font-size:10px;border-top:1px solid #e1d8cf50;padding-top:25px}.footer-bottom a{display:flex;align-items:center;gap:14px}dialog{padding:0;border:0;width:min(950px,92vw);max-height:90svh;overflow:auto;color:var(--blue);background:var(--cream)}dialog::backdrop{background:#142245b8;backdrop-filter:blur(6px)}dialog>img{height:44svh}.dialog-close{position:absolute;right:15px;top:15px;border:0;background:var(--cream);width:46px;height:46px;display:grid;place-items:center;z-index:1}.dialog-close svg{transform:rotate(45deg)}.dialog-copy{padding:35px}.dialog-copy h2{font-size:45px;margin:15px 0}.dialog-copy>p:not(.eyebrow){max-width:640px;font-size:14px}body:has(dialog[open]){overflow:hidden}
#intro-dialog{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;background:var(--cream);overflow:hidden;color:var(--blue)}#intro-dialog::backdrop{background:var(--cream)}#intro-video{display:block;width:100%;height:100%;object-fit:contain}.intro-controls{position:absolute;inset:auto var(--gutter) 25px;display:flex;align-items:center;justify-content:space-between;gap:15px;font-size:12px}.intro-controls>span,.intro-controls button{background:var(--cream);padding:10px 15px}.intro-controls button{border:1px solid currentColor;color:var(--blue);font:inherit;display:flex;gap:20px}.replay-intro{color:inherit;border:0;background:none;padding:0;font:inherit;text-decoration:underline;text-underline-offset:4px}
@media(min-width:1600px){.card-image{height:420px}}
@media(max-width:1000px){.header nav{gap:16px}.brand{width:250px}.header-cta{gap:15px}.intro-grid{gap:40px}.intro-pictures{margin:65px 3vw 0;gap:10vw}.quality-grid{gap:50px}.contact-inner{gap:60px}.card-image{height:280px}.home-card h3{font-size:28px}.card-meta{display:block}.card-meta span{display:block}.sketch-story{grid-template-columns:1fr 1fr}}
@media(max-width:760px){html{scroll-padding-top:76px}.header{height:76px;gap:15px}.header nav{display:none}.brand{width:190px}.header-cta{padding:10px 12px;font-size:10px;gap:8px}.header-cta svg{width:17px}.hero{height:calc(90svh - 76px);min-height:570px}.hero-copy{top:15%}.hero h1{font-size:clamp(77px,14vw,110px)}.hero h1>span+span{padding-left:0}.hero-copy .eyebrow{font-size:9px}.hero-image img{object-position:60% center}.hero-scroll{bottom:105px}.hero .image-caption{bottom:78px;font-size:8px}.landscape-hero{height:75px}.section{padding:65px var(--gutter) 75px}.section-meta{margin-bottom:45px}.intro-grid,.quality-grid,.contact-inner{grid-template-columns:1fr;gap:35px}.intro-text{max-width:none}.intro-pictures{margin:55px 0 0;grid-template-columns:1fr 1fr;gap:25px}.portrait img{height:250px}.intro-quote p{font-size:27px}.portrait figcaption{font-size:9px}.panorama-frame{height:70svh;min-height:450px}.panorama-label{bottom:70px}.panorama-label h2{font-size:52px}.qualities h2{font-size:clamp(43px,9vw,66px)}.quality-grid{margin-top:45px}.quality-image{max-width:none}.quality-image img{height:400px}.image-tab{right:-10px}.wonen-heading{display:block}.wonen-heading p{margin-top:25px}.gallery-tools{margin-top:35px;align-items:start;flex-direction:column}.filters{gap:6px}.filters button{padding:9px 12px;font-size:11px}.homes{grid-template-columns:1fr;gap:35px}.card-image{height:360px}.card-meta{display:flex}.home-card h3{font-size:36px}.availability{display:block}.availability a{margin-top:15px}.sketch-story{grid-template-columns:1fr;padding:65px var(--gutter) 0}.sketch-story img{width:calc(100% + 44px);max-width:none;margin-left:-22px}.contact{padding-top:90px}.contact-mark{display:none}.contact-inner{gap:40px}.contact h2{font-size:60px}.footer-bottom{flex-wrap:wrap;font-size:9px}.footer-wordmark{font-size:7vw;margin-bottom:40px}.dialog-copy{padding:25px}.dialog-copy h2{font-size:36px}dialog>img{height:32svh}}
@media(max-width:380px){.brand{width:160px}.header-cta{font-size:9px}.hero h1{font-size:71px}.intro-pictures{grid-template-columns:1fr}.portrait{max-width:280px}.intro-quote{margin-top:25px}.filters button{padding:8px 10px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important;animation:none!important}.hero-image img{transform:none}}

/* ───────────────────────────── versie 3 ─────────────────────────────
   Bovenop v2: het staande logo in de header, en een pagina die met de
   sectie meekleurt. De v2-regels blijven staan; wat hieronder komt wint op
   volgorde, zodat het verschil leesbaar is. */

/* Het staande logo is een gestapeld woordmerk van vier regels; klein gezet
   lopen de letters in elkaar, dus de header krijgt hoogte. Bij het scrollen
   klapt hij in - het merk is dan gezien en de inhoud telt.

   De header staat vast (fixed) en de pagina reserveert zijn volle hoogte.
   Een sticky header die van hoogte verandert duwt de hele pagina 46 px op
   zodra je begint te scrollen: een zichtbare schok, en ScrollTrigger rekent
   dan met verschoven posities. Vast betekent dat het inklappen alleen de
   header zelf raakt. */
.version-three{--kop-vol:132px;--kop:132px;--merk:86px}
.version-three.is-condensed{--kop:86px;--merk:52px}
body.version-three{padding-top:var(--kop-vol)}
.version-three .header{position:fixed;left:0;right:0;top:0;height:var(--kop);transition:height .35s ease,background-color .5s ease,color .5s ease,border-color .5s ease}
.version-three .hero{height:calc(100svh - var(--kop-vol))}
.version-three .brand{width:auto;display:block;color:inherit}
.version-three .brand svg{width:auto;height:var(--merk);display:block;transition:height .35s ease}
html:has(.version-three){scroll-padding-top:104px}

/* Scenes ------------------------------------------------------------
   De secties hebben in deze stand geen eigen achtergrond meer: de body
   draagt de kleur en heeft een lange transition. Daardoor vloeit de hele
   pagina van de ene kleur in de andere in plaats van dat er een rand
   langsschuift - dezelfde opzet als data-scene in vonc v3.

   app.js zet data-scene op de body zodra een sectie de header raakt; elke
   sectie zegt met data-tint welke scene daarbij hoort. --page-bg en
   --page-ink blijven de namen die de header, de skiplink en de actieknop
   al gebruiken, zodat er een paar variabelen is in plaats van twee.

   De scenes hangen aan .scene-on: staat het meekleuren uit, dan vallen ze
   weg en houdt :root de neutrale waarden aan - de header wordt dan weer
   creme en de secties krijgen hun eigen achtergrond terug, zoals in v2. */
:root{--page-bg:var(--cream);--page-ink:var(--blue);--page-line:#304b9a20;--scene-duur:900ms;--scene-ease:cubic-bezier(.4,0,.2,1)}
.scene-on body[data-scene="blue"]{--page-bg:var(--blue);--page-ink:var(--cream);--page-line:#e1d8cf38}
.scene-on body[data-scene="green"]{--page-bg:var(--green);--page-ink:var(--ink);--page-line:#17191438}
.scene-on body[data-scene="pink"]{--page-bg:var(--pink);--page-ink:var(--wine);--page-line:#8e242738}
.scene-on body[data-scene="white"]{--page-bg:#fff;--page-ink:var(--blue);--page-line:#304b9a20}
.scene-on body[data-scene="cream"]{--page-bg:var(--cream);--page-ink:var(--blue);--page-line:#304b9a20}

/* Aan: de body is het kleurvlak, de secties zijn doorzichtig. */
.scene-on body.version-three{background:var(--page-bg);color:var(--page-ink);transition:background-color var(--scene-duur) var(--scene-ease),color calc(var(--scene-duur) - 200ms) var(--scene-ease)}
/* De footer staat er bewust niet bij: die houdt zijn eigen blauwe vlak en
   sluit de pagina af als een eigen band. */
.scene-on .version-three :is(.intro,.panorama,.moments,.scroll-statement,.qualities,.wonen,.sketch-story,.contact){background:transparent;color:inherit}
/* De hero houdt zijn foto en zijn eigen lichte tekst: die staat niet op het
   paginavlak maar op het beeld. */
.scene-on .version-three .hero{background:transparent}

.version-three .header{background:var(--page-bg);color:var(--page-ink);border-bottom-color:var(--page-line);transition:height .35s ease,background-color var(--scene-duur) var(--scene-ease),color calc(var(--scene-duur) - 200ms) var(--scene-ease),border-color var(--scene-duur) var(--scene-ease)}
/* De actieknop draait de twee kleuren om, zodat hij op elk vlak leesbaar
   blijft in plaats van blauw-op-blauw te verdwijnen. */
.version-three .header-cta{background:var(--page-ink);color:var(--page-bg);transition:background-color var(--scene-duur) var(--scene-ease),color var(--scene-duur) var(--scene-ease)}
.version-three .header-cta:hover{background:var(--wine);color:var(--cream);transition:background-color .2s,color .2s}
.version-three .skip{background:var(--page-ink);color:var(--page-bg)}

/* Het paneel rechtsonder: buiten de leesstroom, altijd bereikbaar, en in de
   omgekeerde kleuren van het vlak waar het op ligt. */
.tint-panel{position:fixed;right:22px;bottom:22px;z-index:30;display:flex;align-items:center;gap:6px;padding:6px;border-radius:100px;background:var(--page-ink);color:var(--page-bg);font-size:11px;letter-spacing:.06em;text-transform:uppercase;box-shadow:0 10px 30px #17191428;transition:background-color var(--scene-duur) var(--scene-ease),color var(--scene-duur) var(--scene-ease)}
.tint-toggle{display:inline-flex;align-items:center;gap:9px;border:0;border-radius:100px;padding:9px 14px;background:var(--page-bg);color:var(--page-ink);font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;transition:background-color var(--scene-duur) var(--scene-ease),color var(--scene-duur) var(--scene-ease)}
.tint-toggle:hover .dot{transform:scale(1.15)}
.tint-toggle .dot{width:10px;height:10px;border-radius:50%;background:currentColor;opacity:.3;transition:opacity .3s,background-color .5s,transform .2s}
.tint-toggle[aria-pressed="true"] .dot{opacity:1;background:var(--red)}
.tint-toggle .staat{opacity:.55}
.tint-toggle .staat::after{content:"uit"}
.tint-toggle[aria-pressed="true"] .staat::after{content:"aan"}

/* Bewegingsvoorkeur: de kleur mag wisselen, maar zonder overgang. */
@media (prefers-reduced-motion:reduce){
  .version-three .header,.version-three .brand svg,.scene-on body.version-three,.tint-panel,.version-three .header-cta,.tint-toggle{transition:none}
}
@media(max-width:1080px){
  .version-three{--kop-vol:112px;--kop:112px;--merk:68px}
  .version-three.is-condensed{--kop:78px;--merk:46px}
}
@media(max-width:760px){
  .version-three{--kop-vol:92px;--kop:92px;--merk:54px}
  .version-three.is-condensed{--kop:72px;--merk:42px}
  .version-three .hero{height:calc(90svh - var(--kop-vol))}
  html:has(.version-three){scroll-padding-top:84px}
  .tint-panel{right:12px;bottom:12px;padding:5px}
  .tint-toggle .label{display:none}
}

/* ───────────────────────────── versie 3.1 ────────────────────────────
   Meer afwisseling in de volgorde. Het panorama laat zijn blauwe lijst los
   en neemt de paginakleur aan, zodat het beeld in het vlak komt te liggen
   in plaats van erop. */
.scene-on .version-three-one .panorama{padding:clamp(28px,5vw,70px) var(--gutter)}
@media(max-width:760px){.scene-on .version-three-one .panorama{padding:18px var(--gutter)}}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* De footer -----------------------------------------------------------
   Het liggende woordmerk in plaats van de gezette tekst. Alle vlakken staan
   op currentColor, dus het logo neemt de cremekleur van de footer over - en
   in de sectiepreviews, waar de footer op een ander vlak ligt, klopt het
   vanzelf mee. */
.version-three-one .footer-wordmark{display:block;margin-bottom:55px;width:min(760px,86%)}
.version-three-one .footer-wordmark svg{width:100%;height:auto;display:block}

/* Dezelfde zigzag als onder de hero, nu onderaan de contactsectie: de groene
   en blauwe band leiden het oog naar de blauwe footer. De contactsectie heeft
   al position:relative en overflow:hidden voor het lint bovenin, dus de band
   kan er net zo in liggen als bij de hero. De footer krijgt wat minder
   bovenruimte, anders staat het woordmerk te ver van de knik. */
.version-three-one .landscape-voet{position:absolute;bottom:-2px;left:-5%;width:110%;height:clamp(70px,9vw,120px)}
.version-three-one .contact{padding-bottom:clamp(80px,11vw,150px)}
.version-three-one footer{padding-top:clamp(40px,5vw,58px)}
@media(max-width:760px){
  .version-three-one .footer-wordmark{width:100%;margin-bottom:38px}
  .version-three-one .landscape-voet{height:58px}
}

/* De focusring ------------------------------------------------------
   Was signaalrood, 3 px dik, op 6 px afstand. Om een klein rond kruisje
   leest dat als een foutmelding in plaats van als "hier sta je". Hij volgt
   nu de inktkleur van de scene, dus hij heeft overal contrast met het vlak
   eronder, en ligt dichter op het element.

   Helemaal weghalen kan niet: zonder zichtbare focus kan wie met het
   toetsenbord werkt niet zien waar hij is. Met de muis verschijnt hij al
   niet - :focus-visible laat hem alleen bij toetsenbordbediening zien. */
.version-three :focus-visible{outline:2px solid currentColor;outline-offset:3px}
.version-three .dialog-close:focus-visible,
.version-three .card-plus:focus-visible,
.version-three .tint-toggle:focus-visible{outline-offset:2px}
/* Op de hero staat de tekst op een foto; daar zou een creme ring wegvallen
   tegen een licht deel van het beeld. Een donkere gloed eronder houdt hem
   leesbaar, waar hij ook overheen valt. */
.version-three .hero :focus-visible{box-shadow:0 0 0 5px #10281866}

/* ───────────────────────────── versie 3.2 ────────────────────────────
   De klantcopy is langer dan de conceptcopy van v3.1. Deze regels geven die
   tekst ruimte zonder de compositie van de bestaande versie te veranderen. */
.version-three-two .hero-copy{top:9%;right:var(--gutter)}
.version-three-two .hero h1{font-size:clamp(56px,7.2vw,116px);line-height:.88;max-width:1180px}
.version-three-two .hero h1>span:nth-child(2){padding-left:6vw}
.version-three-two .hero h1>span:nth-child(3){padding-left:18vw}
.version-three-two .hero-scroll{max-width:330px}
.version-three-two .intro h2{font-size:clamp(44px,4.8vw,76px)}
.version-three-two .intro-text{max-width:500px}
.version-three-two .qualities-intro{font:500 clamp(24px,2.4vw,38px)/1.25 Prefere,Georgia,serif;max-width:720px;margin-top:38px}
.version-three-two .quality-grid{align-items:start;gap:9vw}
.version-three-two .quality-copy{max-width:680px}
.version-three-two details p{max-width:620px;padding-right:20px}
.version-three-two .detail-copy{padding:0 20px 4px 0}
.version-three-two .detail-copy p{padding:20px 0 0;max-width:620px}
.version-three-two .quality-image{position:sticky;top:130px}
.version-three-two .wonen-heading{display:block;max-width:1100px}
.version-three-two .wonen-heading h2{font-size:clamp(44px,5.3vw,84px)}
.version-three-two .wonen-intro{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(35px,6vw,90px);margin-top:55px;font-size:15px;max-width:1200px}
.version-three-two .wonen-intro p+p{margin-top:0}

/* Buiten leven als scrollstory. De tekstkolom blijft gewone documentflow;
   alleen het beeldvlak is sticky. Daardoor blijven lange teksten volledig
   bereikbaar en werkt de sectie ook zonder JavaScript. */
.version-three-two .quality-story-heading{max-width:1050px}
.version-three-two .quality-story-layout{display:grid;grid-template-columns:minmax(360px,.88fr) minmax(480px,1.12fr);gap:clamp(55px,8vw,130px);margin-top:clamp(65px,8vw,115px)}
.version-three-two .quality-story-steps{position:relative;padding-left:clamp(30px,4vw,58px)}
.version-three-two .quality-story-rail{position:absolute;left:3px;top:12vh;bottom:12vh;width:1px;background:color-mix(in srgb,var(--ink) 22%,transparent)}
.version-three-two .quality-story-rail i{display:block;width:100%;height:100%;background:var(--blue);transform:scaleY(0);transform-origin:top}
.version-three-two .quality-story-step{min-height:68svh;display:flex;flex-direction:column;justify-content:center;padding:clamp(55px,9vh,105px) 0;opacity:1}
.version-three-two .quality-story.is-story-ready .quality-story-step{opacity:.3;transition:opacity .4s ease}
.version-three-two .quality-story.is-story-ready .quality-story-step.is-active{opacity:1}
.version-three-two .quality-story-index{font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);margin-bottom:24px}
.version-three-two .quality-story-step h3{font-size:clamp(38px,4.2vw,68px);line-height:1;max-width:11ch;text-wrap:balance}
.version-three-two .quality-story-step>p{max-width:52ch;margin-top:25px;font-size:15px}
.version-three-two .quality-story-step>p+p{margin-top:18px}
.version-three-two .quality-step-image{display:none}
.version-three-two .quality-story-stage{position:relative}
.version-three-two .quality-story-visuals{position:sticky;top:116px;height:calc(100svh - 146px);min-height:560px;max-height:820px;overflow:hidden;background:var(--blue)}
.version-three-two .quality-story-visuals figure{position:absolute;inset:0;opacity:0;visibility:hidden;transform:scale(1.055);transition:opacity .55s ease,visibility .55s ease,transform .75s ease}
.version-three-two .quality-story-visuals figure.is-active{opacity:1;visibility:visible;transform:scale(1)}
.version-three-two .quality-story-visuals img{width:100%;height:100%;object-fit:cover}
.version-three-two .quality-story-visuals figure:nth-child(1) img{object-position:center}
.version-three-two .quality-story-visuals figure:nth-child(2) img{object-position:center}
.version-three-two .quality-story-visuals figure:nth-child(3) img{object-position:center 58%}
.version-three-two .quality-story-visuals figure:nth-child(4) img{object-position:center}
.version-three-two .quality-story-visuals figcaption{position:absolute;left:22px;bottom:20px;z-index:2;padding:8px 11px;background:var(--green);color:var(--ink);font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.version-three-two .quality-story-visuals .image-tab{z-index:3;right:24px;top:36px}

@media(max-width:1000px){
  .version-three-two .hero h1{font-size:clamp(54px,8vw,82px)}
  .version-three-two .quality-story-layout{grid-template-columns:minmax(310px,.9fr) minmax(390px,1.1fr);gap:42px}
  .version-three-two .quality-story-step h3{font-size:45px}
}
@media(max-width:900px){
  .version-three-two .quality-story-layout{display:block;margin-top:48px}
  .version-three-two .quality-story-steps{padding-left:0}
  .version-three-two .quality-story-rail,.version-three-two .quality-story-stage{display:none}
  .version-three-two .quality-story-step,.version-three-two .quality-story.is-story-ready .quality-story-step{min-height:0;display:block;padding:48px 0;opacity:1;border-top:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
  .version-three-two .quality-story-step:last-child{border-bottom:1px solid color-mix(in srgb,var(--ink) 25%,transparent)}
  .version-three-two .quality-story-step h3{font-size:clamp(36px,7vw,52px);max-width:14ch}
  .version-three-two .quality-step-image{display:block;height:min(68vw,520px);margin-top:30px;overflow:hidden}
  .version-three-two .quality-step-image img{width:100%;height:100%;object-fit:cover}
}
@media(max-width:760px){
  .version-three-two .hero-copy{top:11%}
  .version-three-two .hero h1{font-size:clamp(48px,13.5vw,72px);line-height:.92}
  .version-three-two .hero h1>span:nth-child(2),
  .version-three-two .hero h1>span:nth-child(3){padding-left:0}
  .version-three-two .hero-scroll{max-width:250px}
  .version-three-two .section-meta .eyebrow{max-width:85%}
  .version-three-two .qualities-intro{font-size:24px}
  .version-three-two .quality-story-step>p{font-size:14px}
  .version-three-two .wonen-intro{grid-template-columns:1fr;gap:0;margin-top:35px}
  .version-three-two .wonen-intro p+p{margin-top:22px}
}
@media(prefers-reduced-motion:reduce){
  .version-three-two .quality-story.is-story-ready .quality-story-step{opacity:1}
  .version-three-two .quality-story-visuals figure{transition:none;transform:none}
}