/* ============================================================
   TOKENS — tricolore: verde, bianco, rosso
   ============================================================ */
:root{
  --paper:    #ECEDE7;  /* bianco, iets van de zon af           */
  --card:     #F7F8F3;  /* opgelicht vlak                       */
  --white:    #FFFFFF;  /* volle witte vlakken, ter afwisseling */
  --ink:      #14201A;  /* groenzwart, alle tekst               */
  --verde:    #0E6B3C;  /* labels, links, rustige accenten      */
  --verde-lt: #4FA97A;  /* verde op donkere achtergrond         */
  --rosso:    #C02A32;  /* acties, actieve staat                */
  --rosso-lt: #E4676D;  /* rosso op donkere achtergrond         */
  --mute:     #5E6A62;
  --ster:     #F2B32E;  /* Google-sterren                       */
  --line:     rgba(20,32,26,.14);

  --ff-display: "Newsreader", Georgia, "Times New Roman", serif;
  --ff-body:    "Archivo", system-ui, -apple-system, sans-serif;
  --ff-mono:    "IBM Plex Mono", ui-monospace, monospace;

  --max:  1180px;
  --gut:  clamp(20px, 5vw, 48px);
  --rail: 64px;

  --head-h: 77px;                        /* balkhoogte inclusief randje   */
  --hero-h: clamp(460px, 58vw, 680px);   /* hoogte van de herofoto        */

  --r:    3px;
  --ease: cubic-bezier(.2,.7,.3,1);

  --tricolore: linear-gradient(90deg,
    var(--verde) 0 33.333%, #F7F8F3 33.333% 66.666%, var(--rosso) 66.666%);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--ff-body); font-size:17.5px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block}
a{color:inherit}
a[href^="tel:"]{white-space:nowrap}   /* nummer nooit middenin afbreken */
h1,h2,h3{margin:0; font-family:var(--ff-display); font-weight:600; line-height:1.06; letter-spacing:-.012em}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--rosso); outline-offset:3px; border-radius:2px}

.wrap{max-width:var(--max); margin-inline:auto; padding-inline:var(--gut)}
.section{padding-block:clamp(64px,9vw,124px)}
.band--light{background:var(--white)}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--ink); color:var(--paper); padding:10px 16px}
.sprite{position:absolute; width:0; height:0; overflow:hidden}   /* icoonbron, nooit zichtbaar */

/* driekleur-streepje als merkteken --------------------------- */
.foot__flag{
  display:inline-block; width:30px; margin-left:10px; vertical-align:middle;
  height:3px; border-radius:1px; background:var(--tricolore);
}

/* scheidingslijn met driekleur-kop --------------------------- */
.rule{position:relative; height:1px; border:0; margin:0; background:var(--line)}
.rule::before{
  content:""; position:absolute; left:0; top:-1px; width:120px; height:3px;
  background:var(--tricolore);
}

/* eyebrow ---------------------------------------------------- */
.eyebrow{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--verde); margin:0 0 18px;
  display:flex; align-items:center; gap:10px;
}
.eyebrow::before{content:""; width:26px; height:2px; background:var(--rosso); flex:none}

/* ============================================================
   MEETLINT-RAIL  (signature) — smal, labels staan verticaal
   ============================================================ */
.rail{position:fixed; left:0; top:0; bottom:0; width:var(--rail); z-index:40;
  pointer-events:none; display:none}
.rail__tape{
  position:absolute; right:0; top:0; bottom:0; width:26px;
  background:
    repeating-linear-gradient(180deg, rgba(20,32,26,.45) 0 1px, transparent 1px 9px) right/8px 100% no-repeat,
    repeating-linear-gradient(180deg, rgba(20,32,26,.55) 0 1px, transparent 1px 45px) right/16px 100% no-repeat,
    #F7F8F3;
  border-right:1px solid var(--line);
}
.rail__mark{
  position:absolute; right:32px; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed; white-space:nowrap;
  font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--mute); opacity:.68;
  transition:color .25s var(--ease), opacity .25s var(--ease);
}
.rail__mark.is-active{color:var(--rosso); opacity:1; font-weight:500}
.rail__cursor{
  position:absolute; right:0; width:26px; height:4px; background:var(--tricolore);
  transform:translateY(-50%);
  /* loopt de scrollpositie iets achterna, zodat een snelheidsverschil bij een
     sectiegrens uitgesmeerd wordt in plaats van als schokje aan te komen */
  transition:top .35s var(--ease);
}
.progress{position:fixed; inset:0 0 auto 0; height:3px; background:var(--tricolore);
  transform-origin:0 50%; transform:scaleX(0); z-index:60}
@media (min-width:1100px){
  .rail{display:block}
  .progress{display:none}
  body{padding-left:var(--rail)}
}

/* ============================================================
   HEADER
   ============================================================ */
.site-head{
  position:sticky; top:0; z-index:50;
  background:rgba(236,237,231,.9); backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
  transition:background-color .4s ease-in-out, box-shadow .4s ease-in-out;
}
.head-in{display:flex; align-items:center; gap:24px; min-height:76px}
.brand{display:flex; flex-direction:column; text-decoration:none; line-height:1; margin-right:auto}
.brand b{font-family:var(--ff-display); font-weight:700; font-size:25px; letter-spacing:-.015em;
  text-shadow: 0 1px 4px rgba(20,32,26,.3), 0 0 1px rgba(20,32,26,.2)}
.brand__c1{color:#2B7D53}
.brand__c2{color:var(--white)}
.brand__c3{color:#C8444B}
.brand__sub{font-family:var(--ff-mono); font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:var(--verde); margin-top:8px}

/* De balk houdt één hoogte — de afmetingen veranderen niet bij het scrollen,
   want dan zou de inhoud eronder mee op en neer schuiven. Alleen de
   achtergrond wordt dekkender en er komt een schaduw bij. */
.site-head.is-compact{background:rgba(236,237,231,.96); box-shadow:0 1px 12px rgba(20,32,26,.10)}
.nav{display:flex; align-items:center; gap:28px}
.nav a{font-size:15.5px; text-decoration:none; padding:6px 0; position:relative}
.nav a::after{content:""; position:absolute; left:0; right:100%; bottom:0; height:2px;
  background:var(--rosso); transition:right .3s var(--ease)}
.nav a:hover::after{right:0}
.nav__cta{display:none}          /* alleen zichtbaar in het mobiele menu */
.nav__cta::after{display:none}

.btn{
  display:inline-flex; align-items:center; gap:9px; text-decoration:none;
  font-size:15.5px; font-weight:500; padding:12px 20px; border-radius:var(--r);
  border:1.5px solid var(--ink); background:var(--ink); color:var(--paper);
  cursor:pointer; font-family:inherit;
  transition:transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease);
}
.btn:hover{transform:translateY(-2px); background:var(--verde); border-color:var(--verde)}
.btn--ghost{background:transparent; color:var(--ink)}
.btn--ghost:hover{background:var(--ink); color:var(--paper); border-color:var(--ink)}
.btn--rosso{background:var(--rosso); border-color:var(--rosso)}
.btn--rosso:hover{background:#9C1F26; border-color:#9C1F26}

.burger{display:none; width:44px; height:44px; border:1.5px solid var(--ink); background:none;
  border-radius:var(--r); cursor:pointer; padding:0; position:relative}
.burger i{position:absolute; left:11px; right:11px; height:2px; background:var(--ink); transition:.25s var(--ease)}
.burger i:nth-child(1){top:14px} .burger i:nth-child(2){top:20px} .burger i:nth-child(3){top:26px}
.burger[aria-expanded="true"] i:nth-child(1){top:20px; transform:rotate(45deg)}
.burger[aria-expanded="true"] i:nth-child(2){opacity:0}
.burger[aria-expanded="true"] i:nth-child(3){top:20px; transform:rotate(-45deg)}

@media (max-width:880px){
  .burger{display:block}
  .head__cta{display:none}
  .nav{
    position:absolute; top:100%; left:0; right:0; flex-direction:column;
    align-items:stretch; gap:0; background:var(--card);
    border-bottom:1px solid var(--line); padding:8px var(--gut) 22px; display:none;
  }
  .nav.is-open{display:flex}
  .nav a:not(.btn){padding:15px 0; border-bottom:1px solid var(--line); font-size:17.5px}
  .nav__cta{display:inline-flex; justify-content:center; margin-top:18px}

  .site-head{transition:transform .3s var(--ease),
             background-color .4s ease-in-out, box-shadow .4s ease-in-out}
  .site-head.is-hidden{transform:translateY(-100%)}
}

/* ============================================================
   HERO
   ============================================================ */
/* De hero plakt onder de balk en de rest van de pagina schuift er als één blad
   overheen. De foto blijft staan, de tekst beweegt mee omhoog en vervaagt
   (zie heroParallax in js/main.js). */
.hero{position:sticky; top:var(--head-h); z-index:0}
.after-hero{position:relative; z-index:1; background:var(--paper)}

.hero-banner{position:relative; overflow:hidden; background:#DFE1DA}
.hero-photo{margin:0; position:relative}
.hero-photo img{
  display:block; width:100%; height:var(--hero-h);
  object-fit:cover; object-position:center 38%;
}
.hero-scrim{
  position:absolute; inset:0;
  background:linear-gradient(0deg,
    rgba(20,32,26,.88) 0%, rgba(20,32,26,.62) 40%, rgba(20,32,26,.08) 75%, rgba(20,32,26,0) 100%);
}
.hero-content{
  position:absolute; left:0; right:0; bottom:0;
  padding-block:clamp(28px,5vw,56px) clamp(32px,5vw,64px);
  color:var(--paper);
  will-change:transform, opacity;
}
.hero h1{font-size:clamp(40px,7vw,84px); letter-spacing:-.028em; color:var(--paper)}
.hero h1 em{font-style:italic; color:var(--verde-lt)}
.hero .lead{font-size:clamp(16.5px,1.5vw,19px); max-width:46ch; color:rgba(247,248,243,.88); margin-top:22px}
.hero-cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:28px}
.hero-cta .btn{background:var(--paper); color:var(--ink); border-color:var(--paper)}
.hero-cta .btn:hover{background:var(--verde-lt); border-color:var(--verde-lt)}
.hero-cta .btn--ghost{background:transparent; color:var(--paper); border-color:rgba(247,248,243,.6)}
.hero-cta .btn--ghost:hover{background:var(--paper); color:var(--ink); border-color:var(--paper)}

/* scroll-hint: een pulserend lijntje, zie index.html ------------------------ */
.hero__scroll-line{display:none}

@media (max-width:880px){
  :root{--hero-h:clamp(280px,72vw,420px)}

  /* De hero is hier hoger dan het scherm — foto plus een dekkend tekstblok. Bleef
     hij plakken, dan schoof .after-hero over de onderkant heen voordat je daar
     was: de knoppen waren simpelweg onbereikbaar. Dus loopt de hero gewoon mee in
     de flow, en blijft alleen de fóto staan terwijl het tekstblok eroverheen
     schuift. Het kader mag daarvoor niet meer clippen: een voorouder met
     overflow:hidden wordt de scroll-container van een sticky kind, en dan plakt
     het niet meer aan het scherm. Op deze breedte valt er niets te clippen — de
     scrim staat uit en het tekstblok staat in de flow. */
  .hero{position:static}
  .hero-banner{overflow:visible}
  .hero-photo{position:sticky; top:var(--head-h)}

  /* Zonder z-index schuift het tekstblok ónder de foto door: die is nu sticky en
     dus 'positioned', en wordt standaard bóven zijn in-flow buren getekend.
     Onderin extra lucht, anders staat het scroll-lijntje strak tegen de rand. */
  .hero-content{
    position:relative; z-index:1;
    background:var(--ink); will-change:auto;
    padding-bottom:clamp(40px,8vw,64px);
  }
  .hero-scrim{display:none}

  /* Staat onder de knoppen tegen de donkere achtergrond: wit beginnen en naar
     beneden uitvloeien. */
  .hero__scroll-line{
    display:block; width:1px; height:36px; margin:30px auto 0;
    background:linear-gradient(180deg, var(--paper), rgba(247,248,243,0));
    animation:scroll-pulse 2s ease-in-out infinite;
  }
}

/* Het lijntje krimpt vanuit het midden en vervaagt, en veert dan terug — de
   puls zoals op socialiang.nl. Alleen transform en opacity, dus het draait op
   de compositor en telt niet mee in de layout van het hero-blok. */
@keyframes scroll-pulse{
  0%,100%{opacity:1;  transform:scaleY(1)}
  50%    {opacity:.2; transform:scaleY(.5)}
}

/* ============================================================
   FOTOKADER — rechte hoeken, foto beweegt binnen het kader
   ============================================================ */
.frame{margin:0}
/* Het venster bepaalt de uitsnede; de foto is expres hoger en schuift erbinnen.
   --play is die speelruimte aan één kant: de foto loopt van -play naar +play
   terwijl hij door het beeld trekt, en komt dus nooit buiten zijn venster. */
.frame__win{
  --play:38px;
  position:relative; overflow:hidden; aspect-ratio:4/5; background:#DFE1DA;
}
.frame img{
  position:absolute; top:calc(-1 * var(--play)); left:0;
  width:100%; height:calc(100% + 2 * var(--play));
  object-fit:cover; object-position:center 42%;
  transform:translate3d(0, var(--shift, 0px), 0);   /* terugval, zie js/main.js */
  transition:scale .6s var(--ease);
}
.frame:hover img{scale:1.03}

/* Kent de browser scroll-gestuurde animaties, dan doet de CSS het werk: dat
   draait op de compositor, dus ook op een telefoon loopt het niet achter bij
   het doorzwiepen. Zo niet, dan blijft de foto stil staan (of neemt het script
   het over op desktop). */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* De tijdlijn hangt aan het kader, niet aan de foto zelf: die zit in een
       venster met overflow:hidden, en dat telt als scrollblok — een tijdlijn
       daarbinnen staat stil. */
    .frame{view-timeline:--frame block}
    .frame img{
      animation:frame-drift linear both;
      animation-timeline:--frame;
      animation-range:cover 0% cover 100%;
    }
  }
}
@keyframes frame-drift{
  from{translate:0 calc(-1 * var(--play))}
  to  {translate:0 var(--play)}
}
.frame__ph{
  position:absolute; inset:0;
  display:flex; align-items:center; justify-content:center;
  background:
    repeating-linear-gradient(45deg, rgba(14,107,60,.08) 0 10px, transparent 10px 20px), #E3E6DE;
  border:1px dashed rgba(14,107,60,.45);
  font-family:var(--ff-mono); font-size:12px; color:var(--verde); line-height:1.6;
}
.frame__ph strong{font-weight:500}

/* ============================================================
   DIENSTEN
   ============================================================ */
.head-2{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,44ch);
  gap:clamp(24px,4vw,64px); align-items:end; margin-bottom:clamp(36px,5vw,64px)}
.head-2 h2{font-size:clamp(34px,5vw,58px)}
.head-2 p{margin:0; color:#2E3A32}
@media (max-width:800px){.head-2{grid-template-columns:1fr}}

.head-1{margin-bottom:clamp(36px,5vw,64px)}
.head-1 h2{font-size:clamp(34px,5vw,58px); margin-bottom:16px}
.head-1 p{margin:0; color:#2E3A32; max-width:56ch}

/* Per dienst één strook: label over de volle breedte, daaronder beeld en tekst
   naast elkaar. De tweede strook staat gespiegeld, maar alleen visueel — de
   volgorde in de HTML blijft beeld, dan tekst. */
.spread{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:"tag tag" "beeld tekst";
  gap:clamp(26px,3.4vw,56px);
  align-items:start;
}
.spread--flip{
  grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
  grid-template-areas:"tag tag" "tekst beeld";
}
.spread + .spread{margin-top:clamp(56px,8vw,110px)}
.spread .frame{grid-area:beeld}
.spread__body{grid-area:tekst}
/* De stomerij heeft één rij tegels; met een lager beeld blijven de twee kolommen
   ongeveer even hoog eindigen. */
.spread--flip .frame__win{aspect-ratio:4/3}

.spread__tag{
  grid-area:tag; display:flex; align-items:center; gap:14px; margin:0;
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; color:var(--mute);
}
.spread__tag::after{content:""; flex:1; height:1px; background:var(--line)}
.spread__tag span{color:var(--rosso); font-weight:500}

.spread h3{font-size:clamp(30px,3.6vw,46px); margin-bottom:14px}
.spread__intro{color:#2E3A32; max-width:52ch; margin-bottom:clamp(24px,3vw,34px)}

/* Pictogramraster: de lijnen zijn de gap, niet een rand per tegel — zo blijft
   elke lijn precies één pixel, ook als het raster omklapt. */
.picto{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px; background:var(--line); border:1px solid var(--line);
}
.picto__item{
  position:relative; background:var(--white);
  padding:clamp(16px,1.8vw,22px);
  transition:background .25s var(--ease);
}
.picto__item::after{
  content:""; position:absolute; left:0; right:0; top:0; height:2px;
  background:var(--rosso); transform:scaleX(0); transform-origin:0 50%;
  transition:transform .3s var(--ease);
}
.picto__item:hover{background:var(--card)}
.picto__item:hover::after{transform:scaleX(1)}
.picto__ic{
  display:block; width:30px; height:30px; margin-bottom:14px;
  fill:none; stroke:currentColor; stroke-width:1.5;
  stroke-linecap:round; stroke-linejoin:round;
  color:var(--ink); transition:color .25s var(--ease);
}
.picto__item:hover .picto__ic{color:var(--rosso)}
.picto__item h4{
  margin:0 0 6px; font-family:var(--ff-body); font-size:15.5px; font-weight:600;
  line-height:1.3; letter-spacing:-.005em;
}
.picto__item p{margin:0; font-size:14px; line-height:1.55; color:var(--mute)}

.chips-block{margin-top:clamp(56px,7vw,88px); padding-top:clamp(26px,3vw,38px);
  border-top:1px solid var(--line)}
.chips-group + .chips-group{margin-top:26px}
.chips-group__title{
  font-family:var(--ff-mono); font-size:12px; letter-spacing:.11em;
  text-transform:uppercase; font-weight:400; color:#2E3A32; margin:0 0 12px;
}
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chip{
  font-family:var(--ff-mono); font-size:13px; padding:8px 14px;
  border:1px solid var(--line); border-radius:var(--r); background:transparent;
  transition:.22s var(--ease);
}
.chip:hover{background:var(--verde); color:var(--card); border-color:var(--verde)}
.chip--more{border-style:dashed; color:var(--verde)}
.chip--more:hover{background:transparent; color:var(--verde); border-color:var(--verde)}

@media (max-width:900px){
  /* Eén kolom, in beide stroken dezelfde volgorde: label, beeld, tekst. */
  .spread, .spread--flip{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:"tag" "beeld" "tekst";
    gap:clamp(28px,5vw,40px);
  }
  .spread .frame{margin-inline:calc(var(--gut) * -1)}
  /* Het kader is hier veel lager, dus met dezelfde speelruimte zou je de
     beweging nauwelijks zien; iets minder verschuiving voelt hier hetzelfde. */
  .frame__win{aspect-ratio:16/10; --play:26px}
  .picto{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:900px){
  .spread--flip .frame__win{aspect-ratio:16/10}
}
@media (max-width:520px){
  /* Onder elkaar is een icoon boven de tekst zonde van de hoogte: naast elkaar. */
  .picto{grid-template-columns:minmax(0,1fr)}
  .picto__item{
    display:grid; grid-template-columns:30px minmax(0,1fr);
    column-gap:16px; align-items:start;
  }
  .picto__ic{margin-bottom:0; grid-row:1 / span 2}
  .picto__item h4{grid-column:2; margin-bottom:4px}
  .picto__item p{grid-column:2}
}

/* ============================================================
   WERKWIJZE — echte volgorde, dus nummering draagt betekenis
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,40px); counter-reset:s}
.step{padding-top:24px; border-top:3px solid var(--ink); counter-increment:s}
.step:nth-child(1){border-top-color:var(--verde)}
.step:nth-child(2){border-top-color:#fff}
.step:nth-child(3){border-top-color:var(--rosso)}
.step::before{
  content:counter(s,decimal-leading-zero);
  font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.12em; color:var(--mute);
  display:block; margin-bottom:14px;
}
.step h3{font-size:clamp(23px,2.4vw,29px); margin-bottom:10px}
.step p{color:#2E3A32; margin:0; font-size:16.5px}
@media (max-width:800px){
  .steps{grid-template-columns:1fr}
  .step{border-top-width:0; padding-top:0; padding-bottom:24px; border-bottom:3px solid var(--ink)}
  .step:nth-child(1){border-bottom-color:var(--verde)}
  .step:nth-child(2){border-bottom-color:#fff}
  .step:nth-child(3){border-bottom-color:var(--rosso)}
}

/* ============================================================
   REVIEWS — compacte donkere band
   ============================================================ */
.reviews-band{
  background:var(--ink); color:#DCE4DD;
  padding-block:clamp(38px,4.5vw,58px);
}
.reviews-head{margin:0 0 clamp(20px,2.4vw,28px); color:var(--paper)}
.reviews-head::before{background:var(--rosso-lt)}

.reviews{display:grid; grid-template-columns:repeat(3,1fr); gap:clamp(20px,3vw,44px)}
.review{margin:0; min-width:0}
.review__stars{color:var(--ster); font-size:13.5px; letter-spacing:.16em; line-height:1; margin-bottom:12px}
.review blockquote{margin:0}
.review blockquote p{
  margin:0; font-family:var(--ff-display); font-size:clamp(17px,1.5vw,19.5px);
  line-height:1.45; color:var(--paper);
}
.review figcaption{
  margin-top:10px; font-family:var(--ff-mono); font-size:12px;
  letter-spacing:.08em; text-transform:uppercase; color:#95A79B;
}
@media (max-width:800px){
  .reviews{grid-template-columns:1fr; gap:26px}
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:1fr 1fr; gap:clamp(28px,4vw,64px); align-items:start}
.contact-grid > *{min-width:0}
.contact-grid .maps{margin-top:28px}
@media (max-width:900px){
  .contact-grid{grid-template-columns:1fr}
  .contact-grid .maps{margin-top:0}
}

.hours{width:100%; border-collapse:collapse; font-family:var(--ff-mono); font-size:15px}
.hours th{text-align:left; font-weight:400; padding:12px 0; border-bottom:1px solid var(--line)}
.hours td{text-align:right; padding:12px 0; border-bottom:1px solid var(--line);
  font-variant-numeric:tabular-nums}
.hours tr.is-today th,.hours tr.is-today td{color:var(--rosso); font-weight:500}
.hours tr.is-today th::after{content:" ← vandaag"; font-size:11.5px; letter-spacing:.06em}

.info{list-style:none; padding:0; margin:0 0 30px}
.info li{padding:15px 0; border-bottom:1px solid var(--line)}
.info small{display:block; font-family:var(--ff-mono); font-size:11.5px; letter-spacing:.12em;
  text-transform:uppercase; color:var(--mute); margin-bottom:6px}
.info a{font-size:19px; text-decoration:none; color:var(--verde);
  border-bottom:2px solid rgba(14,107,60,.3); padding-bottom:2px}
.info a:hover{color:var(--rosso); border-color:var(--rosso)}

/* --- kaart & street view --- */
.maps{border:1px solid var(--line); border-radius:var(--r); background:var(--card); overflow:hidden}
.maps__tabs{display:flex; border-bottom:1px solid var(--line)}
.maps__tab{
  flex:1; font-family:var(--ff-mono); font-size:12.5px; letter-spacing:.1em;
  text-transform:uppercase; padding:15px 10px; background:none; border:0; cursor:pointer;
  color:var(--mute); border-bottom:3px solid transparent; margin-bottom:-1px;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.maps__tab:hover{color:var(--ink)}
.maps__tab[aria-selected="true"]{color:var(--ink); border-bottom-color:var(--rosso)}
.maps__panel{position:relative; aspect-ratio:4/3; min-height:340px}
.maps__panel[hidden]{display:none}
.maps__panel iframe{position:absolute; inset:0; width:100%; height:100%; border:0; display:block}
.maps__foot{
  display:flex; flex-wrap:wrap; gap:8px 18px; justify-content:space-between; align-items:center;
  padding:15px 18px; border-top:1px solid var(--line);
  font-family:var(--ff-mono); font-size:12.5px; color:var(--mute);
}
.maps__foot a{color:var(--verde); text-decoration:none; border-bottom:2px solid rgba(14,107,60,.3)}
.maps__foot a:hover{color:var(--rosso); border-color:var(--rosso)}
.maps__note{margin:22px 0 0; color:#2E3A32}

/* ============================================================
   FOOTER
   ============================================================ */
.site-foot{background:var(--ink); color:#B7C3BB; padding-block:56px 40px; font-size:15px}
.foot-in{display:flex; flex-wrap:wrap; gap:24px; align-items:center; justify-content:space-between}
.site-foot b{font-family:var(--ff-display); color:var(--paper); font-size:23px; font-weight:700}
.site-foot a{color:var(--paper); text-decoration:none; border-bottom:1px solid var(--verde-lt)}
.site-foot a:hover{color:var(--verde-lt)}
@media (max-width:600px){
  .foot__sep{display:none}
  .foot__addr{display:block}
  .foot__tel{display:inline-block; margin-top:6px}
}

/* ============================================================
   MOTION
   ============================================================ */
.reveal{opacity:0; transform:translateY(22px)}
.reveal.is-in{opacity:1; transform:none;
  transition:opacity .7s var(--ease), transform .7s var(--ease)}

/* Beeld komt niet aandrijven maar wordt opengeveegd, van onder naar boven. */
.reveal--wipe{opacity:1; transform:none; clip-path:inset(0 0 101% 0)}
.reveal--wipe.is-in{clip-path:inset(0 0 0 0); transition:clip-path .9s var(--ease)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important}
  .reveal{opacity:1; transform:none}
  .reveal--wipe{clip-path:none}
}