/* =====================================================================
   AB IMMO — publieke website
   Huisstijl "Het Schietlood": gebroken wit, houtskool, saliegroen en
   steen. Het schietlood — het instrument dat bepaalt wat recht staat —
   is het merkteken; papier, blinddruk en haarlijnen geven het gewicht.

   De klassenamen zijn ongewijzigd gebleven: site.js en alle sjablonen
   blijven werken zoals ze zijn.
   ===================================================================== */

/* --- Lettertypes (lokaal gehost, geen externe verbindingen) --------- */
@font-face{font-family:Metropolis;font-weight:300;font-style:normal;font-display:swap;src:url(../fonts/metropolis-400.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/metropolis-400.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-weight:500;font-style:normal;font-display:swap;src:url(../fonts/metropolis-500.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-weight:600;font-style:normal;font-display:swap;src:url(../fonts/metropolis-600.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/metropolis-700.woff2) format("woff2")}
@font-face{font-family:Metropolis;font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/metropolis-400-italic.woff2) format("woff2")}
/* Libre Caslon — de stem van de site.
   "Display" is getekend voor grote koppen: sterk contrast, fijne haarlijnen.
   "Text" is dezelfde letter, steviger getekend voor kleinere maten, zodat
   die haarlijnen op een scherm niet wegvallen. Elk formaat zijn eigen snede. */
@font-face{font-family:"Caslon Display";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/caslon-display-400.woff2) format("woff2")}
@font-face{font-family:"Caslon Text";font-weight:400;font-style:normal;font-display:swap;src:url(../fonts/caslon-text-400.woff2) format("woff2")}
@font-face{font-family:"Caslon Text";font-weight:700;font-style:normal;font-display:swap;src:url(../fonts/caslon-text-700.woff2) format("woff2")}
@font-face{font-family:"Caslon Text";font-weight:400;font-style:italic;font-display:swap;src:url(../fonts/caslon-text-400-italic.woff2) format("woff2")}

:root{
  /* --- Kleur ---------------------------------------------------------
     Eén accent (salie) op een papieren ondergrond. Steen draagt de rust,
     houtskool draagt de tekst. Meer kleuren zijn er niet.               */
  --paper:        #FAF8F4;   /* ondergrond van de hele site              */
  --paper-deep:   #F2EFE8;   /* rustige tweede ondergrond                */
  --stone:        #C9C2B4;   /* haarlijnen, rustige vlakken              */
  --stone-soft:   #E4E0D6;   /* zachte scheidingslijn                    */
  --stone-edge:   #968C7B;   /* rand van invulvelden (3,1:1, WCAG 1.4.11)*/
  --stone-deep:   #726A5B;   /* bijschriften op papier (5,0:1 / 4,7:1 op
                                het tweede papier — WCAG AA)              */
  --charcoal:     #2A2E2A;   /* titels en sterke tekst                   */
  --charcoal-mid: #4C5049;   /* lopende tekst                            */
  --charcoal-dim: #6E7268;   /* secundaire tekst                         */
  --sage:         #4A5D45;   /* het enige accent: links, knoppen         */
  --sage-deep:    #384733;   /* hover, donkere vlakken                   */
  --sage-light:   #8FA37E;   /* accent op donkere ondergrond             */
  --ink-invert:   #F5F3EE;   /* tekst op donkere vlakken                 */

  --font-sans:  Metropolis, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-display: "Caslon Display", Georgia, "Times New Roman", serif;
  --font-serif:   "Caslon Text", Georgia, "Times New Roman", serif;
  --font-serif-alt: "Caslon Text", Georgia, serif;
  /* Monospace voor meetwaarden, referenties en labels — systeemletter,
     zodat er geen extra bestand geladen moet worden.                    */
  --font-mono:  ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  --wrap: 1240px;      /* breedte van de inhoud                          */
  --measure: 68ch;     /* comfortabele leesbreedte voor lopende tekst    */
  --radius: 2px;       /* scherp en bouwkundig, geen zachte hoeken       */
  --radius-sm: 1px;

  /* Blinddruk in plaats van slagschaduw: een lichte bovenrand en een
     brede, bijna onzichtbare schaduw eronder. Papier, geen glas.        */
  --emboss: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 2px rgba(42,46,42,.05);
  --lift:   inset 0 1px 0 rgba(255,255,255,.6), 0 18px 40px -18px rgba(42,46,42,.28);

  /* --- Beweging -----------------------------------------------------
     Alles verloopt via transform en opacity, met één trage curve die
     uitloopt als een gewicht dat tot stilstand komt.                    */
  --dur-fast:  .2s;
  --dur-base:  .55s;
  --dur-slow:  .9s;
  --ease:      cubic-bezier(.22,.68,.16,1);
  --ease-soft: cubic-bezier(.32,.72,0,1);
  --shift:     20px;
  --stagger:   90ms;
}

/* --- Basis --------------------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:17px;
  font-weight:400;
  line-height:1.68;
  letter-spacing:-.005em;
  color:var(--charcoal-mid);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
}

/* Papierkorrel over de hele site. Vast en niet-aanklikbaar, zodat het
   nooit meescrollt en de GPU niet blijft hertekenen. */
body::after{
  content:"";
  position:fixed;inset:0;z-index:70;pointer-events:none;
  opacity:.5;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

img{max-width:100%;height:auto;display:block}
a{color:var(--sage);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--sage-deep)}
h1,h2,h3,h4{margin:0 0 1rem;font-weight:600;line-height:1.14;color:var(--charcoal);letter-spacing:-.022em;text-wrap:balance}
p{margin:0 0 1.15rem}
p:last-child{margin-bottom:0}
:focus-visible{outline:2px solid var(--sage);outline-offset:3px}
::selection{background:var(--sage);color:var(--paper)}

.wrap{width:min(var(--wrap),calc(100% - 3rem));margin:0 auto}
.section{padding:clamp(4.5rem,9vw,8.5rem) 0}
.section--pale{background:var(--paper-deep)}
.center{text-align:center}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* =====================================================================
   Het schietlood — het merkteken keert terug als scheidingsteken.
   Een haarlijn die eindigt in een klein loodgewicht.
   ===================================================================== */
.plumb{
  display:block;width:1px;margin:0 auto;
  height:56px;background:var(--stone);position:relative;
}
.plumb::after{
  content:"";position:absolute;left:50%;bottom:-9px;transform:translateX(-50%);
  width:0;height:0;
  border-left:5px solid transparent;border-right:5px solid transparent;
  border-top:10px solid var(--sage);
}

/* Klein label in monospace: het "meetstaat"-gevoel van de huisstijl. */
.eyebrow{
  display:block;
  font-family:var(--font-mono);
  font-size:.7rem;font-weight:400;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--stone-deep);
  margin:0 0 1.1rem;
}
.eyebrow--sage{color:var(--sage)}

/* =====================================================================
   Verschijnen bij het scrollen
   De verborgen begintoestand geldt alleen wanneer JavaScript actief is
   (klasse "js" wordt in de <head> gezet). Zonder JavaScript staat alles
   er gewoon; als site.js niet laadt, maakt "no-motion-js" het na drie
   seconden alsnog zichtbaar.
   ===================================================================== */
html.js [data-reveal]{
  opacity:0;
  transform:translateY(var(--shift));
}
html.js [data-reveal].is-in{
  opacity:1;
  transform:none;
  transition:opacity var(--dur-base) var(--ease) var(--reveal-delay,0ms),
             transform var(--dur-base) var(--ease) var(--reveal-delay,0ms);
}
html.no-motion-js [data-reveal]{opacity:1;transform:none}

/* Titels die regel per regel tevoorschijn komen. De extra padding onderaan
   voorkomt dat staarten van letters als g, j en p worden afgesneden. */
.line{
  display:block;
  overflow:hidden;
  padding-bottom:.18em;
  margin-bottom:-.18em;
}
.line__in{display:block}
html.js [data-reveal-lines] .line__in{transform:translateY(110%)}
html.js [data-reveal-lines].is-in .line__in{
  transform:none;
  transition:transform var(--dur-slow) var(--ease) var(--line-delay,0ms);
}
html.js [data-reveal-lines].is-split{opacity:1;transform:none}

/* Trage foto's netjes laten opkomen in plaats van plots verschijnen. */
html.js :is(.hero__media,.card__media,.sold-card__media,.post-item__media,
            .gallery__item,.feature__media,.about__photo,.post__media) img[loading="lazy"]{
  opacity:0;transition:opacity var(--dur-base) var(--ease);
}
html.js :is(.hero__media,.card__media,.sold-card__media,.post-item__media,
            .gallery__item,.feature__media,.about__photo,.post__media) img[loading="lazy"].is-loaded,
html.no-motion-js :is(.hero__media,.card__media,.sold-card__media,.post-item__media,
            .gallery__item,.feature__media,.about__photo,.post__media) img[loading="lazy"]{
  opacity:1;
}

/* --- Titelmaten ----------------------------------------------------
   Groot verschil tussen de titels en de kleine labels: dat contrast
   draagt de hele bladspiegel.                                          */
.title-xl,.title-lg,.title-md{
  font-family:var(--font-display);
  font-weight:400;color:var(--charcoal);margin:0;
}
.title-xl{font-size:clamp(2.4rem,5.6vw,4.4rem);line-height:1.05;letter-spacing:-.017em}
.title-lg{font-size:clamp(1.9rem,3.9vw,3.1rem);line-height:1.08;letter-spacing:-.014em}
.title-md{font-size:clamp(1.5rem,2.5vw,2.05rem);line-height:1.14;letter-spacing:-.01em;margin:0 0 1.5rem}

/* --- Knoppen -------------------------------------------------------
   Rechthoekig en strak: bouwkundig, geen pillen.                       */
.btn{
  display:inline-flex;align-items:center;gap:.85rem;
  padding:15px 30px;
  border:1px solid transparent;
  border-radius:var(--radius-sm);
  font-family:var(--font-mono);
  font-size:.76rem;
  font-weight:400;
  letter-spacing:.13em;
  text-transform:uppercase;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color var(--dur-fast) var(--ease-soft),
             color var(--dur-fast) var(--ease-soft),
             border-color var(--dur-fast) var(--ease-soft),
             transform var(--dur-fast) var(--ease-soft),
             box-shadow var(--dur-base) var(--ease);
}
/* De pijl zit in een eigen vierkant vak tegen de binnenrand aan. */
.btn::after{
  content:"\2192";
  display:inline-flex;align-items:center;justify-content:center;
  width:24px;height:24px;margin:-6px -12px -6px 0;
  font-size:.95rem;letter-spacing:0;
  transition:transform var(--dur-base) var(--ease);
}
.btn:hover::after{transform:translateX(4px)}
.btn:active{transform:translateY(1px)}

.btn--primary{background:var(--sage);border-color:var(--sage);color:var(--paper)}
.btn--primary:hover{background:var(--sage-deep);border-color:var(--sage-deep);color:var(--paper);box-shadow:var(--lift)}
.btn--outline{background:transparent;border-color:var(--stone);color:var(--charcoal)}
.btn--outline:hover{background:transparent;border-color:var(--sage);color:var(--sage)}
.btn--dark{background:var(--charcoal);border-color:var(--charcoal);color:var(--ink-invert)}
.btn--dark:hover{background:var(--sage-deep);border-color:var(--sage-deep);color:var(--ink-invert);box-shadow:var(--lift)}
.btn-row{display:flex;flex-wrap:wrap;gap:1rem;align-items:center}
.btn-row--center{justify-content:center}

/* Tekstlink met pijl, zoals "Bekijk alle panden →" */
/* Wordt zowel op een link als op een knop gebruikt. Een <button> brengt
   zijn eigen achtergrond en randen mee; die worden hier eerst weggenomen,
   anders staat er een grijs kadertje omheen. */
.arrow-link{
  display:inline-flex;align-items:center;gap:.7rem;
  font-family:var(--font-mono);
  font-size:.76rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--sage);
  text-decoration:none;
  background:none;
  border:0;
  padding:0 0 .35rem;
  border-bottom:1px solid var(--stone);
  cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);
}
.arrow-link::after{
  content:"\2192";font-size:1.05em;letter-spacing:0;
  transition:transform var(--dur-base) var(--ease);
}
.arrow-link:hover{color:var(--sage-deep);border-color:var(--sage)}
.arrow-link:hover::after{transform:translateX(5px)}

/* --- Bovenbalk met sociale iconen ---------------------------------- */
.topbar{background:var(--paper);border-bottom:1px solid var(--stone-soft)}
.topbar__inner{display:flex;justify-content:flex-end;align-items:center;gap:1.1rem;height:38px}
.topbar a{display:inline-flex;color:var(--charcoal-dim);text-decoration:none;transition:color var(--dur-fast) var(--ease-soft)}
.topbar a:hover{color:var(--sage)}
.topbar svg{width:15px;height:15px;fill:currentColor}

/* --- Hoofding ------------------------------------------------------ */
.site-header{background:var(--paper);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--stone-soft)}
.site-header__inner{display:flex;align-items:center;justify-content:space-between;gap:1.5rem;height:88px}
.logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.logo img{height:38px;width:auto}
.nav{display:flex;align-items:center;gap:2rem}
.nav a{
  position:relative;
  color:var(--charcoal-mid);
  font-family:var(--font-mono);
  font-size:.74rem;
  letter-spacing:.12em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.35rem 0;
  white-space:nowrap;
  transition:color var(--dur-fast) var(--ease-soft);
}
/* De onderlijn groeit vanaf links in plaats van in één keer te verschijnen. */
.nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1px;
  background:var(--sage);
  transform:scaleX(0);transform-origin:left center;
  transition:transform var(--dur-base) var(--ease);
}
.nav a:hover{color:var(--sage)}
.nav a:hover::after,
.nav a:focus-visible::after{transform:scaleX(1)}
.nav a.is-active{color:var(--charcoal)}
.nav a.is-active::after{transform:scaleX(1)}
.nav-toggle{display:none;background:none;border:0;padding:.5rem;cursor:pointer;color:var(--charcoal)}
.nav-toggle svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5}

/* --- Hero ---------------------------------------------------------- */
.hero{position:relative;display:flex;align-items:flex-end;overflow:hidden;background:var(--charcoal)}
.hero__media{position:absolute;inset:0}
.hero__media img{width:100%;height:100%;object-fit:cover}
/* Heel traag inzoomen geeft diepte aan het bannerbeeld zonder af te leiden. */
@keyframes kenburns{from{transform:scale(1.04)}to{transform:scale(1)}}
html.js .hero.is-ready .hero__media img{animation:kenburns 22s var(--ease-soft) forwards}
/* Verloop van onderaf: de tekst staat op een donkere voet, het beeld
   blijft bovenaan open. */
.hero__media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(24,28,24,.82) 0%,rgba(24,28,24,.42) 42%,rgba(24,28,24,.14) 100%);
}
.hero__inner{position:relative;width:100%}
.hero__title{color:var(--paper);margin:0}
.hero__sub{
  display:flex;align-items:center;gap:1.1rem;
  margin:1.2rem 0 0;color:var(--paper);
  font-family:var(--font-mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;
}
.hero__sub::before{content:"";width:44px;height:1px;background:var(--sage-light);flex:none}
.hero__text{
  color:var(--paper);font-size:clamp(1.05rem,1.7vw,1.4rem);font-weight:400;line-height:1.6;
  max-width:52ch;margin:1.6rem 0 0;
}
.hero__text p{margin:0}

/* Binnenkomst van de hero: titel, tekst en knoppen na elkaar. */
html.js .hero__text,
html.js .hero__sub,
html.js .hero .btn-row{opacity:0;transform:translateY(var(--shift))}
html.js .hero.is-ready .hero__text,
html.js .hero.is-ready .hero__sub,
html.js .hero.is-ready .btn-row{
  opacity:1;transform:none;
  transition:opacity var(--dur-slow) var(--ease) var(--hero-delay,0ms),
             transform var(--dur-slow) var(--ease) var(--hero-delay,0ms);
}
html.js .hero.is-ready .hero__text{opacity:1}
html.js .hero.is-ready .hero__sub{opacity:1}
html.js .hero__text,html.js .hero__sub{--hero-delay:140ms}
html.js .hero .btn-row{--hero-delay:280ms}
html.no-motion-js .hero__text,
html.no-motion-js .hero__sub,
html.no-motion-js .hero .btn-row{opacity:1;transform:none}

/* Homepagina: beeldvullende hero, tekst linksonder */
.hero--home{min-height:min(92vh,860px)}
.hero--home .hero__inner{padding:0 0 clamp(3rem,7vw,6rem)}
.hero--home .hero__title{font-size:clamp(2.7rem,6.6vw,5.6rem);font-weight:600;line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.hero--home .btn-row{margin-top:2.75rem}

/* Binnenpagina's: rustiger banner, titel linksonder */
.hero--page{min-height:clamp(300px,46vh,460px)}
.hero--page .hero__inner{padding:0 0 clamp(2.5rem,5vw,4rem)}
.hero--page .hero__title{font-size:clamp(2.2rem,5vw,3.9rem);font-weight:600;line-height:1.05;letter-spacing:-.03em}

/* --- Pandkaarten --------------------------------------------------- */
.grid{display:grid;gap:clamp(3rem,5vw,4.5rem) clamp(1.6rem,2.6vw,2.6rem)}
.grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid--2{grid-template-columns:repeat(2,minmax(0,1fr))}

.card{display:flex;flex-direction:column}
.card__city{
  color:var(--stone-deep);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 .9rem;
  display:flex;align-items:center;gap:.5rem;
}
.card__city img{opacity:.6}
.card__media{
  display:block;border-radius:var(--radius);overflow:hidden;background:var(--stone-soft);aspect-ratio:4/3;
  transition:box-shadow var(--dur-base) var(--ease);
}
.card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.card:hover .card__media{box-shadow:var(--lift)}
.card:hover .card__media img{transform:scale(1.035)}
.card__title{
  font-family:var(--font-serif);
  font-size:1.22rem;font-weight:400;line-height:1.3;letter-spacing:-.004em;
  margin:1.4rem 0 0;
}
.card__title a{
  color:var(--charcoal);text-decoration:none;
  background-image:linear-gradient(var(--sage),var(--sage));
  background-size:0% 1px;background-position:0 100%;background-repeat:no-repeat;
  transition:background-size var(--dur-base) var(--ease),color var(--dur-fast) var(--ease-soft);
  padding-bottom:2px;
}
.card:hover .card__title a{background-size:100% 1px;color:var(--sage)}
.card__price{
  color:var(--charcoal);font-family:var(--font-mono);font-size:1rem;font-weight:500;
  letter-spacing:.01em;margin:.9rem 0 0;
}
.card__meta{
  display:flex;justify-content:flex-start;align-items:center;gap:1.5rem;
  margin-top:1.15rem;padding-top:1.1rem;border-top:1px solid var(--stone-soft);
  color:var(--charcoal-dim);font-family:var(--font-mono);font-size:.76rem;letter-spacing:.05em;
}
.card__meta span{display:inline-flex;align-items:center;gap:.5rem}
.card__meta img{width:16px;height:16px;opacity:.55}
.card__badge{
  display:inline-block;margin-left:.5rem;padding:.2rem .5rem;border-radius:var(--radius-sm);
  background:var(--charcoal);color:var(--ink-invert);
  font-size:.58rem;font-family:var(--font-mono);
  letter-spacing:.14em;text-transform:uppercase;vertical-align:middle;
}

/* --- Verkochte referenties ----------------------------------------- */
.sold-card__city{
  display:flex;align-items:center;gap:.5rem;
  color:var(--stone-deep);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;
  margin:0 0 .9rem;
}
.sold-card__city img{width:16px;height:16px;opacity:.6}
.sold-card__media{
  position:relative;border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3;background:var(--stone-soft);
  transition:box-shadow var(--dur-base) var(--ease);
}
.sold-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.sold-card:hover .sold-card__media{box-shadow:var(--lift)}
.sold-card:hover .sold-card__media img{transform:scale(1.035)}
.sold-card__label{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1.1rem 1rem;
  font-family:var(--font-serif-alt);font-style:italic;font-weight:400;font-size:1rem;
  color:var(--paper);text-align:left;
  /* Het verloop moet sterk zijn waar de letters staan, niet onderaan het
     vak: die zitten boven de voetmarge. Vandaar de tweede stop. */
  background:linear-gradient(to top,rgba(24,28,24,.88) 0%,rgba(24,28,24,.82) 55%,
                             rgba(24,28,24,.34) 82%,rgba(24,28,24,0) 100%);
}

/* --- Waarden-blokken (homepage) ------------------------------------
   Asymmetrisch: het beeld krijgt meer ruimte dan de tekst, en de tekst
   blijft smal genoeg om comfortabel te lezen.                          */
.feature{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(2.5rem,6vw,5.5rem);align-items:center}
.feature__media{position:relative}
.feature__media img{border-radius:var(--radius);width:100%}
.feature__title{
  font-family:var(--font-display);
  color:var(--charcoal);font-size:clamp(1.45rem,2.4vw,2rem);font-weight:400;
  line-height:1.14;letter-spacing:-.012em;margin-bottom:1.4rem;
}
.feature__body{margin-bottom:2.25rem;max-width:46ch}
.feature__body p{margin-bottom:.9rem}
.feature--reverse .feature__media{order:2}

/* --- Getuigenissen -------------------------------------------------- */
.testimonials{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(2rem,4vw,3.5rem);text-align:left}
.testimonial{
  padding-top:1.6rem;border-top:1px solid var(--stone);
}
.testimonial p{
  margin:0;font-family:var(--font-serif);font-size:1.15rem;line-height:1.55;
  color:var(--charcoal);letter-spacing:-.004em;
}
.testimonial__author{
  margin-top:1.1rem!important;
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-deep);
}

/* --- Terugkerend adviesblok ---------------------------------------- */
/* Het adviesblok en de voettekst stonden allebei op hetzelfde houtskool.
   Nu draagt het accent van de site — salie — het blok dat om actie vraagt,
   en blijft houtskool voor het blok dat enkel informeert. Handelen en
   informeren zien er niet langer hetzelfde uit. */
.cta{background:var(--sage);color:var(--ink-invert);position:relative}
.cta__inner{
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);
  gap:clamp(1.75rem,4vw,3.5rem);align-items:center;
  padding:clamp(3.5rem,7vw,6rem) 0;
}
/* De regellengte hoort op de kop zelf: "ch" rekent daar met de kopletter. */
.cta__text .cta__title{max-width:14ch}
.cta .btn-row{justify-content:flex-end}
.cta__logo{display:flex;justify-content:flex-start}
.cta__title{
  font-family:var(--font-display);
  color:var(--paper);font-size:clamp(1.65rem,3.2vw,2.6rem);font-weight:400;
  line-height:1.1;letter-spacing:-.012em;margin-bottom:2.25rem;
}
/* Op salie is papier de sterkste knop; het lichte groen zou erin wegvallen. */
.cta .btn--primary{background:var(--paper);border-color:var(--paper);color:var(--charcoal)}
.cta .btn--primary:hover{background:var(--charcoal);border-color:var(--charcoal);color:var(--paper);box-shadow:none}
.cta .btn--outline{border-color:rgba(250,248,244,.45);color:var(--ink-invert)}
.cta .btn--outline:hover{border-color:var(--paper);background:rgba(250,248,244,.10);color:var(--paper)}

/* --- Accordeon (Diensten, FAQ) ------------------------------------- */
.accordion{max-width:860px;margin:0 auto}
.accordion__item{border-top:1px solid var(--stone)}
.accordion__item:last-child{border-bottom:1px solid var(--stone)}
.accordion__button{
  display:flex;align-items:flex-start;gap:1.25rem;width:100%;
  padding:1.75rem .25rem;background:none;border:0;cursor:pointer;text-align:left;
  font-family:var(--font-serif);font-size:clamp(1.1rem,1.9vw,1.5rem);font-weight:400;line-height:1.26;
  color:var(--charcoal);letter-spacing:-.005em;
  transition:color var(--dur-fast) var(--ease-soft);
}
.accordion__button:hover{color:var(--sage)}
.accordion__chevron{flex:none;margin-top:.45rem;transition:transform var(--dur-base) var(--ease);color:var(--stone-deep)}
.accordion__chevron svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.5}
.accordion__button[aria-expanded="true"] .accordion__chevron{transform:rotate(90deg);color:var(--sage)}
/* Uitklappen met een echte hoogte-animatie: het raster gaat van 0fr naar
   1fr. De binnenste laag draagt de padding, anders houdt de dichte staat
   nog witruimte over. */
.accordion__panel{
  display:grid;
  grid-template-rows:0fr;
  visibility:hidden;
  transition:grid-template-rows var(--dur-base) var(--ease),
             visibility 0s linear var(--dur-base);
}
.accordion__item.is-open .accordion__panel{
  grid-template-rows:1fr;
  visibility:visible;
  transition:grid-template-rows var(--dur-base) var(--ease),visibility 0s;
}
.accordion__panel-inner{overflow:hidden;min-height:0;padding:0 .25rem 0 2.9rem;max-width:var(--measure)}
.accordion__item.is-open .accordion__panel-inner{padding-bottom:2rem}
.accordion__panel p{margin-bottom:1rem}
.accordion__panel ul{padding-left:1.25rem;margin:0 0 1rem}
.accordion__panel li{margin-bottom:.35rem}
/* Zonder JavaScript blijft alle tekst gewoon leesbaar. */
html:not(.js) .accordion__panel{grid-template-rows:1fr;visibility:visible}
html:not(.js) .accordion__panel-inner{padding-bottom:2rem}

/* =====================================================================
   Panddetail — hier komt het papiergevoel van richting A binnen:
   haarlijnen, kleine kapitalen en meetwaarden in monospace, zodat de
   juridische gegevens lezen als een document en niet als kleine lettertjes.
   ===================================================================== */
.listing-head{padding:clamp(2rem,4vw,3.25rem) 0 0}
.listing-title{
  font-family:var(--font-display);
  color:var(--charcoal);font-size:clamp(1.7rem,3.3vw,2.7rem);font-weight:400;
  line-height:1.08;letter-spacing:-.014em;margin:1.5rem 0 2rem;max-width:24ch;
}
.listing-ident{
  display:flex;flex-wrap:wrap;gap:0 2.5rem;
  margin-bottom:1.5rem;
  color:var(--charcoal);font-family:var(--font-mono);font-weight:400;font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;
}
.listing-keyfacts{
  display:flex;flex-wrap:wrap;gap:.6rem 2.25rem;
  margin-bottom:2.5rem;padding-top:1.25rem;border-top:1px solid var(--stone-soft);
}
.listing-keyfacts div{
  display:flex;align-items:center;gap:.6rem;
  color:var(--charcoal-mid);font-family:var(--font-mono);font-size:.8rem;letter-spacing:.05em;
}
.listing-keyfacts img{width:18px;height:18px;opacity:.55}

/* --- Fotogalerij ----------------------------------------------------
   Een raster met vaste vakken in plaats van een schuivende strook. Dat is
   niet alleen rustiger om naar te kijken: de oude strook liet de breedte
   van een tegel afhangen van de foto zelf, waardoor nog niet ingeladen
   foto's breedte nul kregen en staande foto's smalle repen werden.
   Met vaste vakken en object-fit gedragen liggend en staand zich gelijk,
   en telt een nog niet ingeladen foto niet mee voor de opmaak.          */
.gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:1fr;
  gap:6px;
  /* 3/1 is geen willekeurige keuze: bij vier kolommen en twee rijen komt
     elk vak daarmee precies op 3:2 uit — de verhouding waarin de foto's
     zelf genomen zijn. Er wordt dus nauwelijks iets weggesneden. */
  aspect-ratio:3/1;
  margin-bottom:1.5rem;
}
.gallery__item{
  position:relative;display:block;overflow:hidden;
  border-radius:var(--radius);background:var(--stone-soft);
}
/* De eerste foto is die welke in het beheer bovenaan staat: die opent. */
.gallery__item:first-child{grid-column:span 2;grid-row:span 2}
.gallery__item img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform var(--dur-slow) var(--ease);
}
.gallery__item:hover img{transform:scale(1.03)}

/* Wat er niet in beeld past, staat op de laatste tegel. */
.gallery__more{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(22,26,22,.70);
  color:var(--paper);font-family:var(--font-mono);
  font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;text-align:center;
  transition:background var(--dur-fast) var(--ease-soft);
}
.gallery__item:hover .gallery__more{background:rgba(22,26,22,.66)}

.gallery__all{margin:0 0 2.5rem}

/* Minder dan vijf foto's: het raster past zich aan zodat er geen lege
   vakken overblijven, en elk vak op 3:2 blijft uitkomen. */
.gallery--n1{grid-template-columns:1fr;aspect-ratio:3/2}
.gallery--n2{grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:3/1}
.gallery--n4{grid-template-columns:repeat(2,minmax(0,1fr));aspect-ratio:3/2}
.gallery--n1 .gallery__item:first-child,
.gallery--n2 .gallery__item:first-child,
.gallery--n4 .gallery__item:first-child{grid-column:auto;grid-row:auto}
/* Bij drie foto's blijft de openingsfoto groot: 2×2 van de zes vakken,
   de twee andere vullen de rechterkolom. */
.gallery--n3{grid-template-columns:repeat(3,minmax(0,1fr));aspect-ratio:9/4}

.listing-body{
  display:grid;grid-template-columns:minmax(0,1.72fr) minmax(0,1fr);
  gap:clamp(2.5rem,6vw,5.5rem);padding:clamp(2.5rem,5vw,4rem) 0 clamp(3.5rem,7vw,6rem);align-items:start;
}
.listing-section-title{
  font-family:var(--font-serif);
  color:var(--charcoal);font-size:clamp(1.25rem,2vw,1.6rem);font-weight:400;
  line-height:1.22;letter-spacing:-.006em;margin:3.25rem 0 1.5rem;
  padding-top:1.25rem;border-top:1px solid var(--stone-soft);
}
.listing-section-title--sm{font-size:clamp(1.1rem,1.8vw,1.35rem)}
.listing-section-title:first-child{margin-top:0;padding-top:0;border-top:0}
.listing-desc{max-width:var(--measure)}
.listing-desc p{margin-bottom:1.15rem}

/* De kenmerkenlijst als meetstaat: labels in kleine kapitalen, waarden
   in monospace, uitgelijnd op een haarlijn. */
.spec-list{margin:0}
.spec-row{
  display:flex;justify-content:space-between;align-items:baseline;gap:1.5rem;
  padding:.85rem .1rem;border-bottom:1px solid var(--stone-soft);
}
.spec-row dt{
  color:var(--charcoal-dim);font-family:var(--font-mono);font-weight:400;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase;margin:0;
}
.spec-row dd{
  color:var(--charcoal);margin:0;text-align:right;
  font-family:var(--font-mono);font-size:.85rem;font-weight:500;font-variant-numeric:tabular-nums;
}
.spec-note{margin:1.35rem 0 0;color:var(--charcoal-dim);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;line-height:1.8}
.spec-note span{display:block}

.listing-aside{position:sticky;top:108px}
.aside-box__title{
  color:var(--stone-deep);font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:1rem;
}
.aside-box p{margin-bottom:1.6rem}

.listing-address{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 3rem}
.listing-map{margin-top:2rem;border-radius:var(--radius);overflow:hidden;border:1px solid var(--stone)}
.listing-map iframe{display:block;width:100%;height:360px;border:0;filter:grayscale(1) contrast(.92)}
.listing-video{margin-top:2.5rem;position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius);overflow:hidden}
.listing-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

.status-banner{
  display:inline-block;margin-bottom:1.25rem;padding:.45rem .9rem;border-radius:var(--radius-sm);
  background:var(--charcoal);color:var(--ink-invert);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
}

/* --- Blog ---------------------------------------------------------- */
.post-list{display:flex;flex-direction:column;gap:0}
.post-item{
  display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
  gap:clamp(1.5rem,4vw,3rem);align-items:start;
  padding:clamp(2rem,4vw,3rem) 0;border-top:1px solid var(--stone-soft);
}
.post-item:first-child{border-top:0;padding-top:0}
.post-item__title{font-family:var(--font-serif);font-size:clamp(1.2rem,2vw,1.6rem);font-weight:400;line-height:1.22;letter-spacing:-.006em;margin-bottom:.6rem}
.post-item__title a{
  color:var(--charcoal);text-decoration:none;
  transition:color var(--dur-fast) var(--ease-soft);
}
.post-item__title a:hover{color:var(--sage)}
.post-item__date{
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--stone-deep);margin-bottom:1rem;
}
.post-item__media{
  display:block;border-radius:var(--radius);overflow:hidden;background:var(--stone-soft);aspect-ratio:16/10;
  transition:box-shadow var(--dur-base) var(--ease);
}
.post-item__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--dur-slow) var(--ease)}
.post-item__media:hover{box-shadow:var(--lift)}
.post-item__media:hover img{transform:scale(1.035)}
.post-item__media--video{position:relative}
.post-item__media--video::after,
.post__play::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:56px;height:56px;border-radius:50%;background:rgba(24,28,24,.66);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-size:24px;background-position:center;background-repeat:no-repeat;
}

.post{max-width:var(--measure);margin:0 auto}
.post__title{font-family:var(--font-display);color:var(--charcoal);font-size:clamp(1.7rem,3.1vw,2.5rem);font-weight:400;line-height:1.08;letter-spacing:-.014em;margin-bottom:.6rem}
.post__date{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--stone-deep);margin-bottom:2.5rem}
.post__media{margin-bottom:2.5rem;border-radius:var(--radius);overflow:hidden}
.post__video{position:relative;padding-bottom:56.25%;height:0}
.post__video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
/* Affiche in plaats van de YouTube-speler. De knop draagt zelf geen
   knop-uiterlijk: achtergrond en rand worden weggenomen, anders komt de
   grijze systeemknop door de foto heen. */
.post__play{
  position:absolute;inset:0;display:block;width:100%;height:100%;
  padding:0;border:0;background:none;cursor:pointer;overflow:hidden;
}
.post__play img{width:100%;height:100%;object-fit:cover;display:block;transition:transform var(--dur-slow) var(--ease)}
.post__play:hover img{transform:scale(1.02)}
.post__play:hover::after{background-color:rgba(24,28,24,.82)}
.post__play:focus-visible{outline:2px solid var(--sage);outline-offset:-4px}
.post__body h2,.post__body h3{font-family:var(--font-serif);color:var(--charcoal);font-weight:400;font-size:clamp(1.15rem,1.9vw,1.4rem);line-height:1.28;letter-spacing:-.006em;margin:2.75rem 0 1rem}
.post__body ul{padding-left:1.25rem}
.post__body li{margin-bottom:.4rem}

.share{display:flex;align-items:center;gap:.6rem;margin-top:3.5rem;padding-top:2rem;border-top:1px solid var(--stone-soft);flex-wrap:wrap}
.share a,.share__copy{
  display:inline-flex;align-items:center;gap:.55rem;padding:.55rem 1rem;
  border:1px solid var(--stone-soft);border-radius:var(--radius-sm);
  color:var(--charcoal-mid);font-family:var(--font-mono);font-size:.68rem;
  letter-spacing:.12em;text-transform:uppercase;text-decoration:none;background:transparent;cursor:pointer;
  transition:border-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);
}
.share a:hover,.share__copy:hover{border-color:var(--sage);color:var(--sage)}
.share svg{width:14px;height:14px;fill:currentColor}

/* In de zijkolom van een pandfiche: onder elkaar, zonder scheidingslijn. */
.share--compact{display:block;margin-top:1.5rem;padding-top:0;border-top:0}
.share--compact .share__label{
  color:var(--stone-deep);font-family:var(--font-mono);font-size:.7rem;
  letter-spacing:.16em;text-transform:uppercase;margin-bottom:.85rem;
}
.share--compact a,.share--compact .share__copy{width:100%;margin-bottom:.4rem;justify-content:flex-start}

/* --- Over ons ------------------------------------------------------ */
.about{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,5vw,4.5rem);align-items:start}
.about__title{font-family:var(--font-display);color:var(--charcoal);font-size:clamp(1.45rem,2.5vw,2.1rem);font-weight:400;line-height:1.12;letter-spacing:-.012em;margin-bottom:1.6rem}
.about__body{max-width:var(--measure)}
.about__body p{margin-bottom:1.25rem}
.about__photo img{width:100%;border-radius:var(--radius)}

/* --- Contact ------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2.5rem,6vw,5rem);align-items:start}
.contact-info{list-style:none;margin:0 0 2.5rem;padding:0}
.contact-info li{
  display:flex;align-items:flex-start;gap:1.1rem;
  padding:1.15rem 0;border-bottom:1px solid var(--stone-soft);margin:0;
}
.contact-info li:first-child{padding-top:0}
.contact-info svg{width:19px;height:19px;flex:none;margin-top:.3rem;stroke:var(--stone-deep);fill:none;stroke-width:1.4}
.contact-info strong{
  display:block;color:var(--stone-deep);font-family:var(--font-mono);font-weight:400;
  font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;margin-bottom:.3rem;
}
/* Telefoon en e-mail blijven klikbaar maar zien er uit als lopende tekst. */
.contact-info a{color:var(--charcoal);text-decoration:none;transition:color var(--dur-fast) var(--ease-soft)}
.contact-info a:hover{color:var(--sage)}
.contact-info a.is-link{text-decoration:underline;text-underline-offset:3px}
.contact-map{border-radius:var(--radius);overflow:hidden;border:1px solid var(--stone)}
.contact-map iframe{display:block;width:100%;height:320px;border:0;filter:grayscale(1) contrast(.92)}

.form-title{font-family:var(--font-serif);color:var(--charcoal);font-size:clamp(1.2rem,2vw,1.5rem);font-weight:400;letter-spacing:-.006em;margin-bottom:2rem}
.field{display:grid;grid-template-columns:1fr;gap:.5rem;align-items:start;margin-bottom:1.35rem}
.field > label{
  padding-top:0;text-align:left;color:var(--stone-deep);
  font-family:var(--font-mono);font-size:.68rem;letter-spacing:.15em;text-transform:uppercase;
}
.field input,.field textarea,.field select{
  width:100%;padding:.85rem .9rem;border:1px solid var(--stone-edge);border-radius:var(--radius-sm);
  font-family:var(--font-sans);font-size:1rem;color:var(--charcoal);background:transparent;min-height:48px;
  transition:border-color var(--dur-fast) var(--ease-soft),box-shadow var(--dur-fast) var(--ease-soft);
}
.field textarea{min-height:170px;resize:vertical;line-height:1.65}
.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--sage);box-shadow:0 0 0 3px rgba(74,93,69,.12);
}
.field input::placeholder,.field textarea::placeholder{color:var(--stone-deep)}
.form-actions{display:grid;grid-template-columns:1fr}
.form-actions > :last-child{grid-column:1}
/* Honeypot: onzichtbaar voor bezoekers, wel ingevuld door spambots. */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.alert{
  padding:1.1rem 1.25rem;border-radius:var(--radius-sm);margin-bottom:2rem;font-size:.95rem;
  border-left:2px solid;
}
.alert--success{background:rgba(74,93,69,.07);border-color:var(--sage);color:var(--sage-deep)}
.alert--error{background:rgba(150,60,50,.07);border-color:#9C453B;color:#8A3A31}

/* --- Footer -------------------------------------------------------- */
.site-footer{background:var(--charcoal);color:var(--ink-invert);padding:clamp(3.5rem,7vw,6rem) 0 2rem}
.site-footer a{color:var(--ink-invert);text-decoration:none;transition:color var(--dur-fast) var(--ease-soft)}
.site-footer a:hover{color:var(--sage-light)}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.5fr;gap:clamp(2rem,4vw,3.5rem)}
.footer-logo{margin-bottom:1.75rem}
.footer-social{display:flex;flex-direction:column;gap:.9rem;align-items:flex-start}
.footer-social a{font-family:var(--font-mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase}
.footer-links{list-style:none;margin:0;padding:0}
.footer-links li{margin-bottom:.9rem}
.footer-links a{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;opacity:.82}
.footer-links a:hover{opacity:1}
.footer-contact{font-size:.95rem;line-height:1.7}
.footer-contact strong{
  display:block;margin-bottom:.5rem;font-family:var(--font-mono);font-weight:400;
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;opacity:.62;
}
.footer-contact p{margin-bottom:1.1rem}
.footer-contact a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(245,243,238,.3)}
.footer-legal{
  margin:clamp(3rem,6vw,5rem) 0 0;max-width:78ch;text-align:left;
  padding-top:2rem;border-top:1px solid rgba(245,243,238,.14);
  font-size:.8rem;line-height:1.75;color:rgba(245,243,238,.6);
}
.footer-legal strong{color:rgba(245,243,238,.85);font-weight:500}
.footer-legal a{text-decoration:underline;text-underline-offset:3px}
.footer-bottom{
  margin-top:2rem;padding-top:1.5rem;border-top:1px solid rgba(245,243,238,.14);
  text-align:left;
}
.footer-bottom a{font-family:var(--font-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;opacity:.6}
.footer-bottom a:hover{opacity:1}

/* --- Cookiemelding ------------------------------------------------- */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:60;
  display:flex;gap:1.5rem;align-items:center;justify-content:space-between;flex-wrap:wrap;
  padding:1.25rem 1.75rem;background:var(--charcoal);color:var(--ink-invert);font-size:.88rem;
  border-top:1px solid rgba(245,243,238,.14);
  /* Schuift van onderen in beeld in plaats van er plots te staan. */
  opacity:0;visibility:hidden;transform:translateY(100%);
  transition:opacity var(--dur-base) var(--ease),
             transform var(--dur-base) var(--ease),
             visibility 0s linear var(--dur-base);
}
.cookiebar.is-visible{
  opacity:1;visibility:visible;transform:none;
  transition:opacity var(--dur-base) var(--ease),transform var(--dur-base) var(--ease),visibility 0s;
}
.cookiebar p{margin:0;max-width:64ch;color:rgba(245,243,238,.82)}
.cookiebar .btn{padding:.7rem 1.1rem;font-size:.68rem}
.cookiebar .btn--outline{border-color:rgba(245,243,238,.32);color:var(--ink-invert)}
.cookiebar .btn--outline:hover{border-color:var(--paper);color:var(--paper)}
.cookiebar .btn--primary{background:var(--sage-light);border-color:var(--sage-light);color:var(--charcoal)}
.cookiebar .btn--primary:hover{background:var(--paper);border-color:var(--paper)}

/* --- Paginering ---------------------------------------------------- */
.pagination{display:flex;justify-content:center;gap:.4rem;margin-top:clamp(2.5rem,5vw,4rem);flex-wrap:wrap}
.pagination a,.pagination span{
  min-width:44px;padding:.65rem .8rem;border:1px solid var(--stone-soft);border-radius:var(--radius-sm);
  text-align:center;text-decoration:none;color:var(--charcoal-mid);
  font-family:var(--font-mono);font-size:.78rem;
  transition:border-color var(--dur-fast) var(--ease-soft),color var(--dur-fast) var(--ease-soft);
}
.pagination a:hover{border-color:var(--sage);color:var(--sage)}
.pagination .is-current{background:var(--sage);border-color:var(--sage);color:var(--paper)}

/* --- Foutpagina ---------------------------------------------------- */
.error-page{padding:clamp(5rem,12vw,10rem) 0;text-align:left;max-width:var(--measure)}
.error-page h1{font-family:var(--font-mono);font-size:clamp(3rem,9vw,6rem);color:var(--stone-deep);line-height:1;letter-spacing:.02em;font-weight:400}
.error-page h2{font-family:var(--font-display);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:400;color:var(--charcoal);letter-spacing:-.012em}

/* --- Lightbox ------------------------------------------------------ */
.lightbox{
  position:fixed;inset:0;z-index:100;display:flex;
  align-items:center;justify-content:center;background:rgba(20,24,20,.96);
  opacity:0;visibility:hidden;
  transition:opacity var(--dur-base) var(--ease),visibility 0s linear var(--dur-base);
}
.lightbox.is-open{
  opacity:1;visibility:visible;
  transition:opacity var(--dur-base) var(--ease),visibility 0s;
}
.lightbox > img{
  max-width:92vw;max-height:86vh;width:auto;height:auto;border-radius:var(--radius);
  transform:scale(.97);opacity:0;
  transition:transform var(--dur-base) var(--ease),opacity var(--dur-fast) var(--ease);
}
.lightbox.is-open > img{transform:none}
/* Wordt door site.js gezet zodra de foto geladen is (ook bij het wisselen). */
.lightbox > img.is-shown{opacity:1}
.lightbox__btn{
  position:absolute;background:none;border:0;color:var(--paper);cursor:pointer;
  font-size:2.2rem;line-height:1;padding:.5rem 1rem;opacity:.65;
  transition:opacity var(--dur-fast) var(--ease-soft);
}
.lightbox__btn:hover{opacity:1}
.lightbox__prev{left:1rem;top:50%;transform:translateY(-50%)}
.lightbox__next{right:1rem;top:50%;transform:translateY(-50%)}
.lightbox__close{top:.5rem;right:1rem;font-size:2rem}
.lightbox__count{
  position:absolute;bottom:1.5rem;left:0;right:0;text-align:center;color:var(--paper);
  font-family:var(--font-mono);font-size:.7rem;letter-spacing:.16em;opacity:.6;
}

/* =====================================================================
   Responsief
   ===================================================================== */
@media (max-width:1100px){
  .footer-grid{grid-template-columns:1.4fr 1fr 1fr;gap:2.5rem}
  .footer-contact{grid-column:1/-1}
}

@media (max-width:960px){
  .grid--3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .listing-body{grid-template-columns:1fr;gap:2.5rem}
  .listing-aside{position:static}
  .contact-grid{grid-template-columns:1fr;gap:2.5rem}
  .about{grid-template-columns:1fr;gap:2rem}
  .about__photo{max-width:340px}
  .feature{grid-template-columns:1fr;gap:2rem}
  .feature--reverse .feature__media{order:0}
  .cta__inner{grid-template-columns:1fr;gap:2.5rem}
  .footer-grid{grid-template-columns:1fr 1fr;gap:2.5rem}
  .post-item{grid-template-columns:1fr;gap:1.25rem}
  .post-item__media{order:-1}
  .testimonials{grid-template-columns:1fr;gap:2rem}
}

@media (max-width:760px){
  body{font-size:16.5px}
  .wrap{width:calc(100% - 2.5rem)}
  .site-header__inner{height:72px}
  .listing-address{grid-template-columns:1fr}
  .nav-toggle{display:inline-flex}
  .nav{
    display:flex;position:absolute;left:0;right:0;top:100%;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-top:1px solid var(--stone-soft);
    padding:.5rem 1.25rem 1.25rem;box-shadow:0 20px 30px -20px rgba(42,46,42,.35);
    /* Zakt open in plaats van te springen. */
    opacity:0;visibility:hidden;pointer-events:none;transform:translateY(-8px);
    transition:opacity var(--dur-fast) var(--ease),
               transform var(--dur-fast) var(--ease),
               visibility 0s linear var(--dur-fast);
  }
  .nav.is-open{
    opacity:1;visibility:visible;pointer-events:auto;transform:none;
    transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility 0s;
  }
  /* Zonder JavaScript is er geen knop om te openen: menu altijd tonen. */
  html:not(.js) .nav{opacity:1;visibility:visible;pointer-events:auto;transform:none}
  .nav a{padding:1rem 0;border-bottom:1px solid var(--stone-soft)}
  .nav a::after{display:none}
  .nav a.is-active{border-bottom-color:var(--sage)}
  .grid--3,.grid--2{grid-template-columns:1fr;gap:3rem}
  .hero--home{min-height:auto}
  .hero--home .hero__inner{padding:clamp(9rem,26vw,12rem) 0 3.5rem}
  .footer-grid{grid-template-columns:1fr;gap:2.5rem}
  .cookiebar{flex-direction:column;align-items:flex-start;gap:1.1rem}
  .accordion__panel-inner{padding-left:2.1rem}
  .btn{width:auto}
}

/* =====================================================================
   Bezoekers die minder beweging willen
   Alles blijft zichtbaar en bruikbaar; enkel de beweging verdwijnt.
   ===================================================================== */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    transition-delay:0s!important;
    scroll-behavior:auto!important;
  }
  html.js [data-reveal],
  html.js [data-reveal-lines] .line__in,
  html.js .hero__text,
  html.js .hero__sub,
  html.js .hero .btn-row,
  html.js :is(.hero__media,.card__media,.sold-card__media,.post-item__media,
              .gallery__item,.feature__media,.about__photo,.post__media) img[loading="lazy"]{
    opacity:1!important;transform:none!important;
  }
  .hero__media img{animation:none!important}
  /* Een schaalsprong bij hover duurt met de regel hierboven nul seconden,
     maar springt daardoor juist. Wie minder beweging vraagt, krijgt hem niet. */
  .gallery__item:hover img,
  .card:hover .card__media img,
  .sold-card:hover .sold-card__media img,
  .post-item__media:hover img,
  .post__play:hover img,
  .gallery__item img{transform:none!important}
}

@media print{
  .site-header,.topbar,.site-footer,.cta,.cookiebar,.nav-toggle{display:none!important}
  body{color:#000;background:#fff}
  body::after{display:none}
  [data-reveal],[data-reveal-lines] .line__in{opacity:1!important;transform:none!important}
}

/* =====================================================================
   Merkteken — het monogram van de klant, met het woordmerk ernaast.
   Zijn kleuren liggen vast in de SVG (#333333 / #56984D). Alleen op
   donkere vlakken wisselt de A van kleur; zie .mk-a hieronder.

   De hoogtes zijn op het woordblok gemeten, niet geschat: 28 px naast
   een blok van 27,3 px in de hoofding, 38 px naast 36,5 px in de
   voettekst. Hoger stak het teken boven en onder het woord uit en
   drukte het "Immo" plat.
   ===================================================================== */
.brand{display:inline-flex;align-items:center;gap:.7rem;color:var(--charcoal);text-decoration:none}
.brand__mark{flex:none;height:28px;width:auto;display:block}
.brand__word{display:flex;flex-direction:column;gap:.16rem;line-height:1}
.brand__name{
  font-family:var(--font-sans);font-weight:600;font-size:1.02rem;
  letter-spacing:.01em;text-transform:uppercase;color:currentColor;
}
.brand__tag{
  font-family:var(--font-mono);font-size:.53rem;letter-spacing:.19em;text-transform:uppercase;
  color:var(--stone-deep);white-space:nowrap;
}
.brand--lg .brand__mark{height:38px}
.brand--lg .brand__name{font-size:1.5rem}
.brand--lg .brand__tag{font-size:.62rem;letter-spacing:.2em}

/* Op donkere vlakken: het bijschrift mag niet wegvallen. */
.site-footer .brand,.cta .brand{color:var(--ink-invert)}
.site-footer .brand__tag,.cta .brand__tag{color:rgba(245,243,238,.55)}

/* Zijn grijs haalt 1,09:1 op charcoal en 1,77:1 op salie — meer dan de
   helft van het teken zou verdwijnen. Op donkere vlakken neemt de A dus
   --ink-invert over (12,4:1 op charcoal); het groen blijft van hem. */
.site-footer .brand__mark .mk-a,.cta .brand__mark .mk-a{fill:var(--ink-invert)}

.logo{color:var(--charcoal)}
.logo:hover .brand__mark{opacity:.72}
.brand__mark{transition:opacity var(--dur-fast) var(--ease-soft)}

@media (max-width:760px){
  .brand__tag{display:none}
  .brand__mark{height:24px}
  .brand--lg .brand__mark{height:34px}
  .brand--lg .brand__name{font-size:1.25rem}
}

/* =====================================================================
   Correcties na de eerste proef
   ===================================================================== */

/* De bannerfoto's van de binnenpagina's zijn licht en druk. Eén verloop
   volstond niet om de titel leesbaar te houden, dus ligt er ook een vlakke
   sluier onder. Deze regel geldt voor alle acht de binnenpagina's; de
   homepagina krijgt hieronder haar eigen, lichtere sluier. */
.hero__media::after{
  background:
    linear-gradient(to top,
      rgba(22,26,22,.88) 0%,
      rgba(22,26,22,.80) 34%,
      rgba(22,26,22,.66) 58%,
      rgba(22,26,22,.34) 74%,
      rgba(22,26,22,.06) 100%),
    rgba(22,26,22,.20);
}

/* De homepagina toont sinds 09-2026 het Gravensteen bij valavond. Dat beeld
   is zelf al donker: de sluier hierboven zou het laatste licht eruit halen.
   Deze is lichter en bovenaan open, maar dicht op de band waar de titel en
   de knoppen liggen. Dezelfde waarden als die van de film hieronder, zodat
   er geen sprong zit tussen de foto en de film die haar vervangt.
   De eerste regel van de titel valt over de lichte hemelstrook aan de
   horizon: gemeten 2,41:1, waar WCAG AA er 3:1 vraagt voor grote letters.
   Vandaar de tweede laag, die naar links toe donkerder wordt — daar staat
   de tekst — en rechts helemaal opengaat, waar het kasteel zijn licht
   moet houden. Een gelijkmatig donkerdere sluier zou het beeld dooddoen. */
.hero--home .hero__media::after{
  background:
    linear-gradient(to right,
      rgba(22,26,22,.40) 0%,
      rgba(22,26,22,.22) 38%,
      rgba(22,26,22,0) 66%),
    linear-gradient(to top,
      rgba(22,26,22,.80) 0%,
      rgba(22,26,22,.66) 28%,
      rgba(22,26,22,.44) 52%,
      rgba(22,26,22,.14) 76%,
      rgba(22,26,22,0) 100%);
}

/* Op een smal scherm speelt de film niet en staat de banner rechtop. Het
   beeld schuift dan op naar het kasteel: in het midden ligt enkel water. */
@media (max-width:900px){
  .hero--home .hero__media img{object-position:72% 50%}
}

/* Op een foto moet de tweede knop licht zijn, niet houtskool. */
.hero .btn--outline{border-color:rgba(250,248,244,.45);color:var(--paper)}
.hero .btn--outline:hover{border-color:var(--paper);background:rgba(250,248,244,.10);color:var(--paper)}

/* Saliegroen valt weg op houtskool: daar het lichte accent gebruiken. */
.cta .eyebrow,
.cta .eyebrow--sage{color:rgba(245,243,238,.82)}
.site-footer .eyebrow{color:var(--sage-light)}

/* Terugknop: dezelfde vorm als de andere knoppen, maar de pijl wijst
   naar links en staat vóór de tekst. */
.btn--back{
  background:transparent;border-color:var(--stone-soft);color:var(--charcoal-dim);
  flex-direction:row-reverse;
}
.btn--back::after{content:"\2190";margin:-6px 0 -6px -12px}
.btn--back:hover{border-color:var(--sage);color:var(--sage)}
.btn--back:hover::after{transform:translateX(-4px)}

/* Het portret is een uitgeknipte foto; op papier zweeft die. Een rustig
   steenvlak eronder geeft het gewicht, in de geest van het papierwerk. */
.about__photo{position:relative;padding:1.75rem 1.25rem 0}
.about__photo::before{
  content:"";position:absolute;left:0;right:0;top:0;bottom:6%;
  background:var(--paper-deep);border-radius:var(--radius);z-index:0;
}
.about__photo img{position:relative;z-index:1}

/* =====================================================================
   Diepte in de banner
   Het beeld staat hoger en lager dan de banner zelf, zodat het kan
   schuiven zonder dat de randen in beeld komen. Bovenop het verloop
   ligt een zachte vignettering: samen geven ze drie vlakken diepte.
   ===================================================================== */
.hero__media{top:-14%;height:128%;bottom:auto}
/* Alleen terwijl de banner in beeld is, mag de browser een eigen laag
   aanmaken. Daarbuiten kost dat enkel geheugen. */
.hero.is-moving .hero__media,
.hero.is-moving .hero__inner{will-change:transform}

/* Vignettering: donkerder in de hoeken, open in het midden. */
.hero::after{
  content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(120% 90% at 60% 32%,rgba(22,26,22,0) 38%,rgba(22,26,22,.42) 100%);
}
.hero__inner{z-index:2}

/* Zonder JavaScript staat het beeld gewoon stil en vult het de banner. */
html:not(.js) .hero__media{top:0;height:100%}

@media (prefers-reduced-motion: reduce){
  .hero__media{top:0!important;height:100%!important;transform:none!important}
  .hero__inner{transform:none!important;opacity:1!important}
  .hero::after{background:radial-gradient(120% 90% at 60% 32%,rgba(22,26,22,0) 45%,rgba(22,26,22,.30) 100%)}
}

/* =====================================================================
   De film in de banner
   De foto blijft eronder liggen als vangnet: laadt de film niet, dan is
   er niets aan de hand. De film verschijnt pas als hij klaar is.
   ===================================================================== */
.hero__film{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;pointer-events:none;
  opacity:0;transition:opacity .8s var(--ease);
}
.hero.has-film .hero__film{opacity:1}
/* Terwijl de film loopt draagt hij de beweging: het beeldvlak zelf staat stil. */
.hero.has-film .hero__media{top:0;height:100%;transform:none}

/* Klein teken onderaan dat er iets te scrollen valt — het schietlood zelf,
   dat zakt en weer opveert. Verdwijnt zodra de bezoeker begint. */
.hero__cue{
  position:absolute;left:50%;bottom:1.75rem;transform:translateX(-50%);
  z-index:3;width:1px;height:44px;background:rgba(250,248,244,.45);
  transition:opacity var(--dur-base) var(--ease);
}
.hero__cue::after{
  content:"";position:absolute;left:50%;bottom:-8px;margin-left:-4px;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  border-top:9px solid var(--paper);
  animation:plumbfall 2.6s var(--ease-soft) infinite;
}
@keyframes plumbfall{
  0%,72%,100%{transform:translateY(0);opacity:.9}
  36%{transform:translateY(7px);opacity:1}
}
.hero.is-scrolled .hero__cue{opacity:0}
html:not(.js) .hero__cue{display:none}

@media (max-width:900px){.hero__cue{display:none}}

@media (prefers-reduced-motion: reduce){
  .hero__film{display:none}
  .hero__cue::after{animation:none}
}

/* De film toont dezelfde scène als de foto eronder en is even donker, dus
   draagt hij ook dezelfde sluier: zo verandert er niets aan de leesbaarheid
   op het ogenblik dat de film de foto overneemt. */
.hero.has-film .hero__media::after{
  background:
    linear-gradient(to right,
      rgba(22,26,22,.40) 0%,
      rgba(22,26,22,.22) 38%,
      rgba(22,26,22,0) 66%),
    linear-gradient(to top,
      rgba(22,26,22,.80) 0%,
      rgba(22,26,22,.66) 28%,
      rgba(22,26,22,.44) 52%,
      rgba(22,26,22,.14) 76%,
      rgba(22,26,22,0) 100%);
}
.hero.has-film::after{
  background:radial-gradient(120% 90% at 60% 32%,rgba(22,26,22,0) 44%,rgba(22,26,22,.30) 100%);
}

/* =====================================================================
   Sectiekop — de kop staat niet meer alleen gecentreerd in een lege
   band, maar hoort bij wat eronder komt: bovenschrift, kop, streep,
   uitgelijnd op dezelfde kolom als de rest. Zo leest de pagina als een
   document met hoofdstukken.
   ===================================================================== */
.sec-head{margin:0 0 clamp(2.5rem,4.5vw,3.75rem)}
/* De regellengte hoort bij de kop zelf: "ch" rekent dan met de kopletter
   en niet met de veel kleinere letter van het omhullende blok. */
.sec-head .title-xl{max-width:15ch}
.sec-head .title-lg{max-width:20ch}
.sec-head .title-md{max-width:24ch}
.sec-head--wide .title-lg{max-width:26ch}
.sec-head .eyebrow{margin-bottom:1.1rem}
.sec-head::after{
  content:"";display:block;width:64px;height:1px;
  background:var(--stone);margin-top:clamp(1.4rem,2vw,1.9rem);
}
/* Op een donkere ondergrond mag de streep niet wegvallen. */
.cta .sec-head::after{background:rgba(245,243,238,.3)}

/* De hero draagt dezelfde stem als de rest. */
.hero__title{font-family:var(--font-display);font-weight:400}
.hero--home .hero__title{font-size:clamp(2.5rem,6vw,5rem);line-height:1.03;letter-spacing:-.018em}
.hero--page .hero__title{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1.06;letter-spacing:-.015em}
/* Fijne haarlijnen op een foto: een heel lichte schaduw houdt ze staan,
   zonder dat het als slagschaduw leest. */
.hero__title{text-shadow:0 1px 24px rgba(18,22,18,.34)}

/* "Verkocht" onder een referentie: cursief uit dezelfde familie. */
.sold-card__label{font-family:var(--font-serif-alt);font-style:italic}

/* De drie waardenblokken staan nu onder elkaar binnen één sectie, met veel
   lucht ertussen, in plaats van elk in een eigen wisselende band. */
.feature-stack{display:flex;flex-direction:column;gap:clamp(3.5rem,8vw,6.5rem)}

/* Onder elkaar zodra er te weinig breedte is voor tekst naast knoppen. */
@media (max-width:860px){
  .cta__inner{grid-template-columns:1fr;gap:2rem}
  .cta__text .cta__title{max-width:none}
  .cta .btn-row{justify-content:flex-start}
}

/* --- Galerij op een smal scherm -------------------------------------
   Twee kolommen: de openingsfoto over de volle breedte, de vier andere
   in een blok van twee bij twee eronder. */
@media (max-width:760px){
  /* grid-auto-rows blijft anders op 1fr staan, waardoor elke rij even hoog
     wordt als de openingsfoto en er gaten onder de tegels ontstaan. */
  .gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;aspect-ratio:auto;gap:5px}
  .gallery__item{aspect-ratio:3/2}
  .gallery__item:first-child{grid-column:span 2;grid-row:auto}
  .gallery--n1 .gallery__item:first-child,
  .gallery--n2 .gallery__item:first-child,
  .gallery--n3 .gallery__item:first-child,
  .gallery--n4 .gallery__item:first-child{grid-column:span 2;grid-row:auto}
  .gallery--n1,.gallery--n2,.gallery--n3,.gallery--n4{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:auto;aspect-ratio:auto}
}

/* --- Volledig scherm: rail met alle foto's --------------------------
   De tegels op de pagina tonen er vijf; hier loop je door alle foto's.  */
.lightbox__btn svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;display:block}
.lightbox__close svg{width:22px;height:22px}
.lightbox > img{max-height:74vh}
.lightbox__foot{
  position:absolute;left:0;right:0;bottom:0;
  display:flex;flex-direction:column;align-items:center;gap:.75rem;
  padding:1rem 1rem 1.25rem;
}
.lightbox__rail{
  display:flex;gap:6px;max-width:min(100%,860px);
  overflow-x:auto;scrollbar-width:none;padding:2px;
}
.lightbox__rail::-webkit-scrollbar{display:none}
.lightbox__rail button{
  flex:0 0 auto;width:58px;height:40px;padding:0;border:0;border-radius:var(--radius);
  background:none;cursor:pointer;opacity:.42;outline-offset:2px;
  transition:opacity var(--dur-fast) var(--ease-soft);
}
.lightbox__rail button img{width:100%;height:100%;object-fit:cover;display:block;border-radius:var(--radius)}
.lightbox__rail button:hover{opacity:.75}
.lightbox__rail button[aria-current="true"]{opacity:1;box-shadow:0 0 0 1px var(--paper)}
.lightbox__count{position:static;margin:0}

@media (max-width:760px){
  /* Op een telefoon veeg je; de rail zou alleen ruimte innemen. */
  .lightbox__rail{display:none}
  .lightbox > img{max-height:78vh}
}