/* Countrysteel — gedeelde basisstijl
   Mobile-first, geen build-stap. Rust, ruimte, ambacht. */

/* Webfonts, self-hosted in /fonts (voorheen via fonts.googleapis.com).
   De @font-face-regels zijn identiek aan wat Google serveerde, alleen nu
   same-origin. Dat scheelt een render-blockend request van ruim 1 seconde.
   Alleen latin + latin-ext: dekt alle tekens die deze site gebruikt. */
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/inter-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:500;font-display:swap;src:url(/fonts/playfair-display-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:600;font-display:swap;src:url(/fonts/playfair-display-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/playfair-display-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  /* De hele site is donker. Zonder deze regel tekent de browser zijn eigen
     onderdelen (scrollbar, keuzelijsten, autofill-velden) in de lichte
     systeemstijl, wat midden in de donkere huisstijl blijft afsteken. */
  color-scheme:dark;

  --bg:#111114;              /* basis — bijna zwart */
  --bg-soft:#191920;         /* iets opgelicht vlak (afwisselende secties) */
  --surface:#202027;         /* kaarten / inputs */
  --ink:#0b0b0d;             /* diepste zwart — footer, plaques */
  --ink-2:#141417;
  --heading:#f1efeb;         /* koppen op donkere achtergrond */
  --text:#e4e2dd;            /* lopende tekst */
  --text-muted:#a2a09a;      /* gedempt grijs (≈ logo-grijs) */
  --text-on-dark:#f1efeb;
  --text-on-dark-muted:#a2a09a;

  /* Twee tinten van hetzelfde logo-oranje, elk voor een eigen taak.
     --accent is de logokleur en blijft voor tekst, randen en lijnen op
     donker: 7,3:1 op de pagina-achtergrond.
     --accent-fill ligt op dezelfde hue (24°) iets dieper, zodat witte tekst
     er wél WCAG AA haalt (4,8:1). Op #d16d25 haalt wit maar 3,5:1, en dat is
     te weinig voor de knoptekst op 13-16px. */
  --accent:#d16d25;          /* Countrysteel-oranje (uit logo) */
  --accent-fill:#b8571a;     /* gevulde vlakken met witte tekst */
  --accent-deep:#9d470f;     /* nog dieper — hover van gevulde knoppen */
  --accent-on-dark:#e68a3f;  /* helderder oranje — tekst op donker */

  /* Eén radius-schaal voor de hele site; geen losse waarden meer in de
     componenten. 50% blijft voor ronde elementen (avatars, ronde knoppen). */
  --r-xs:2px;                /* inline code, technische labels */
  --r-sm:8px;                /* invoervelden, kleine vlakken, menu-items */
  --r-md:12px;               /* kaarten, panelen, foto's, carrousel */
  --r-pill:999px;            /* pillen (hero-CTA's, indicatoren) */

  --line:rgba(255,255,255,.12);
  --line-soft:rgba(255,255,255,.07);
  --line-dark:rgba(255,255,255,.12);
  --whatsapp:#25D366;
  --maxw:1180px;
  --gap:28px;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-size:16.5px;
  line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-weight:600;
  line-height:1.18;
  letter-spacing:-.01em;
  margin:0 0 .5em;
  color:inherit;
  text-wrap:balance;
}
p{margin:0 0 1em;}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 24px;
}
@media (min-width:640px){
  .wrap{padding:0 40px;}
}

/* Alleen voor schermlezers */
.sr-only{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
/* Toetsenbordgebruikers kunnen de navigatie overslaan. Het linkje staat buiten
   beeld en komt tevoorschijn zodra het focus krijgt. */
.skip-link{
  position:fixed;
  top:0;left:-9999px;
  z-index:200;
  padding:12px 20px;
  background:var(--accent-fill);
  color:#fff;
  font-weight:600;
  border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;}
/* Haalt de vertraging weg die mobiele browsers bij een tik inbouwen, zonder
   dubbeltik-zoomen of knijpzoomen te blokkeren. */
a, button, summary, label, input, select, textarea{touch-action:manipulation;}

.eyebrow{
  text-transform:uppercase;
  letter-spacing:.16em;
  font-size:.74rem;
  font-weight:600;
  color:var(--accent);
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:16px 32px;
  border-radius:var(--r-xs);
  font-size:.95rem;
  font-weight:600;
  letter-spacing:.02em;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease;
  border:1px solid transparent;
  white-space:nowrap;
}
.btn-primary{
  background:var(--accent-fill);
  color:#fff;
  transition:background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-primary:hover{
  background:var(--accent-deep);
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(209,109,37,.35);
}
.btn-ghost-light{
  border-color:var(--line-dark);
  color:var(--text-on-dark);
}
.btn-ghost-light:hover{border-color:var(--text-on-dark);}
.btn-ghost-dark{
  border-color:var(--line);
  color:var(--text);
}
.btn-ghost-dark:hover{border-color:var(--text);background:var(--surface);}

.ico-wa{
  width:18px;height:18px;flex:none;
  color:var(--whatsapp);
}

/* Header */
.site-header{
  background:rgba(15,15,18,.85);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
  position:sticky;
  top:0;
  z-index:100;
}
.site-header .wrap{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  padding-top:11px;
  padding-bottom:11px;
  transition:padding .25s ease;
}
.site-header.is-scrolled .wrap{
  padding-top:8px;
  padding-bottom:8px;
}
.logo{
  display:inline-flex;
  align-items:center;
}
.logo img{
  height:40px;
  width:auto;
  transition:height .25s ease;
}
.site-header.is-scrolled .logo img{
  height:32px;
}
.site-nav{
  display:none;
}
.site-nav > ul{
  display:flex;
  align-items:center;
  gap:40px;
}

/* Dropdown "Diensten" */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{
  display:inline-flex;
  align-items:center;
  gap:6px;
}
.nav-caret{
  width:9px;height:6px;
  color:var(--accent);
  transition:transform .2s ease;
}
.nav-dropdown:hover .nav-caret,
.nav-dropdown:focus-within .nav-caret{transform:rotate(180deg);}
.nav-dropdown-menu{
  position:absolute;
  top:100%;
  left:0;
  margin-top:14px;
  min-width:230px;
  background:var(--ink-2);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  box-shadow:0 20px 45px rgba(0,0,0,.5);
  padding:8px;
  opacity:0;
  visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease, transform .18s ease, visibility .18s;
}
.nav-dropdown-menu::before{
  content:"";
  position:absolute;
  left:0;right:0;
  top:-14px;
  height:14px;
}
.nav-dropdown:hover .nav-dropdown-menu,
.nav-dropdown:focus-within .nav-dropdown-menu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.nav-dropdown-menu li + li{margin-top:2px;}
.nav-dropdown-menu a{
  display:block;
  padding:10px 14px;
  border-radius:var(--r-xs);
  font-size:.92rem;
  color:var(--text-muted);
  white-space:nowrap;
}
.nav-dropdown-menu a:hover{
  color:var(--text-on-dark);
  background:var(--surface);
}
/* Toegangspoorten is de hoofddienst: die staat bovenaan, met de drie
   poorttypen eronder ingesprongen. De rest volgt na een scheidslijn. */
.nav-dropdown-menu .nav-menu-head a{
  color:var(--text-on-dark);
  font-weight:600;
}
.nav-dropdown-menu .nav-menu-sub a{
  padding-left:30px;
  font-size:.86rem;
}
.nav-dropdown-menu .nav-menu-sep{
  margin-top:8px;
  padding-top:8px;
  border-top:1px solid var(--line-soft);
}
.header-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.header-whatsapp{
  display:inline-flex;
  align-items:center;
  gap:8px;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  padding:8px 12px;
  font-size:.84rem;
  font-weight:600;
  color:var(--text);
  white-space:nowrap;
}
.header-whatsapp:hover{border-color:var(--whatsapp);color:var(--accent-on-dark);}
.header-whatsapp .wa-label{display:none;}
@media (min-width:520px){
  .header-whatsapp .wa-label{display:inline;}
}
.header-whatsapp .wa-number{display:none;}
.header-cta{
  display:none;
  padding:9px 16px;
  font-size:.8rem;
}
@media (min-width:640px){
  .header-cta{display:inline-flex;}
}
.nav-toggle{
  color:var(--text);
}
.nav-toggle summary{
  cursor:pointer;
  list-style:none;
  padding:8px 2px;
  display:flex;
  align-items:center;
}
.nav-toggle summary::-webkit-details-marker{display:none;}
.nav-toggle summary::before{
  content:"";
  display:block;
  width:22px;height:14px;
  background:
    linear-gradient(var(--text),var(--text)) top/100% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) center/100% 2px no-repeat,
    linear-gradient(var(--text),var(--text)) bottom/100% 2px no-repeat;
  transition:transform .15s ease;
}
.nav-toggle[open] summary::before{
  background:
    linear-gradient(var(--text),var(--text)) center/100% 2px no-repeat;
  transform:rotate(45deg);
}
.nav-toggle-panel{
  position:absolute;
  left:0;right:0;
  top:100%;
  background:var(--surface);
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  box-shadow:0 18px 34px rgba(0,0,0,.45);
  padding:8px 0 18px;
}
.nav-toggle-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:16px 24px 20px;
  border-bottom:1px solid var(--line-soft);
}
.nav-toggle-actions .btn{width:100%;}
.btn-whatsapp-panel{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:1px solid var(--line);
  border-radius:var(--r-xs);
  padding:15px 20px;
  font-size:.95rem;
  font-weight:600;
  color:var(--text);
}
.btn-whatsapp-panel:hover{border-color:var(--whatsapp);}
.nav-toggle-panel ul{
  display:flex;
  flex-direction:column;
}
.nav-toggle-panel a{
  display:block;
  padding:14px 24px;
  font-size:1.02rem;
  border-bottom:1px solid var(--line-soft);
}
.nav-toggle-panel a:hover{color:var(--accent);}
.nav-toggle-subnav a{
  padding-left:44px;
  font-size:.92rem;
  color:var(--text-muted);
}
.nav-toggle-subsub a{
  padding-left:62px;
  font-size:.86rem;
}
@media (min-width:640px){
  .wrap{position:relative;}
}
@media (min-width:900px){
  .nav-toggle{display:none;}
  .site-nav{
    display:flex;
  }
  .site-nav a{
    font-size:.94rem;
    font-weight:500;
    color:var(--text-muted);
  }
  .site-nav a:hover{color:var(--text);}
  .header-whatsapp .wa-number{display:inline;}
}

/* Hero */
.hero{
  background:var(--bg-soft);
  color:var(--text);
  padding:clamp(56px,9vw,104px) 0 clamp(64px,9vw,104px);
}
.hero .wrap{
  display:flex;
  flex-direction:column;
  gap:44px;
}
.hero-text{max-width:620px;}
.hero-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:4px;
}
.hero-text h1{
  font-size:clamp(2rem,5vw,2.9rem);
  color:var(--heading);
  margin-top:16px;
}
.hero-text p{
  color:var(--text-muted);
  font-size:1.12rem;
  max-width:46ch;
  margin-bottom:32px;
}
.hero-note{
  margin:14px 0 0;
  font-size:.85rem;
  color:var(--text-muted);
}
.hero-photo{
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
}
.hero-photo img{
  width:100%;
  height:auto;
  transition:transform .5s ease;
}
.hero-photo:hover img{transform:scale(1.05);}
@media (min-width:900px){
  .hero .wrap{flex-direction:row;align-items:center;gap:64px;}
  .hero-text{flex:1 1 46%;}
  .hero-photo{flex:1 1 54%;}
}

/* Begrensde hero-foto (staaldesign) */
.hero-photo-compact{max-height:420px;}
.hero-photo-compact img{height:420px;max-height:420px;object-fit:cover;}
@media (max-width:899px){
  .hero-photo-compact img{height:300px;}
}

/* Compacte portret-foto (over-ons) */
.hero-photo-portrait{
  max-width:320px;
  margin:0 auto;
}
.hero-photo-portrait img{
  aspect-ratio:3/4;
  width:100%;
  object-fit:cover;
}
@media (min-width:900px){
  .hero-photo-portrait{flex:0 0 320px;width:320px;margin:0;}
}
/* Twee portretfoto's naast elkaar (over-ons) */
.hero-photo-pair{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
  width:100%;
  max-width:560px;
  margin:0 auto;
}
.hero-photo-pair .hero-photo-portrait{max-width:none;width:auto;margin:0;}
@media (min-width:900px){
  .hero-photo-pair{flex:0 0 520px;width:520px;margin:0;}
}

/* Korte over-ons-sectie (home) */
.over-kort{background:var(--bg-soft);}
.over-kort .wrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:36px;
}
.over-kort-photo{
  width:100%;
  max-width:300px;
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
}
.over-kort-photo img{width:100%;aspect-ratio:4/5;object-fit:cover;}
.over-kort-text{max-width:560px;}
.over-kort-text h2{color:var(--heading);margin-top:12px;}
.over-kort-text p{color:var(--text-muted);margin-bottom:26px;}
@media (min-width:800px){
  .over-kort .wrap{flex-direction:row;justify-content:center;gap:64px;}
  .over-kort-photo{flex:0 0 300px;}
}

/* Trust-balk (home) */
.trust-bar{
  background:var(--ink);
  border-bottom:1px solid var(--line-soft);
}
.trust-list{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding:18px 0;
}
.trust-item{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:.88rem;
  color:var(--text-muted);
}
.trust-item svg{flex:none;width:16px;height:16px;margin-top:2px;color:var(--accent);}
.trust-item strong{color:var(--heading);font-weight:600;}
/* Op mobiel verborgen, zodat de hero direct onder de header begint */
@media (max-width:767px){
  .trust-bar{display:none;}
}
@media (min-width:768px){
  .trust-list{
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    gap:36px;
    padding:9.5px 0;
  }
  .trust-item{align-items:center;}
}

/* Hero (home) */
.hero-home{
  position:relative;
  overflow:hidden;
  color:var(--text);
  display:flex;
  align-items:flex-start;
  min-height:calc(100vh - 109px);
  min-height:calc(100svh - 109px);
  padding:0;
}
/* De hero-afbeelding is een echte <img> in plaats van een CSS-achtergrond.
   Zo staat hij al in de HTML (geen wachttijd meer tot de CSS geparseerd is),
   kan de browser fetchpriority=high honoreren en kiezen uit srcset. De uitsnede
   blijft gelijk: object-fit:cover met object-position:center doet precies
   hetzelfde als background-size:cover met background-position:center. */
.hero-home-bg{
  position:absolute;inset:0;
}
.hero-home-bg picture{
  display:block;
  width:100%;height:100%;
}
.hero-home-bg img{
  display:block;
  width:100%;height:100%;
  object-fit:cover;
  object-position:center;
}
.hero-home-overlay{
  position:absolute;inset:0;
  background:linear-gradient(180deg, rgba(10,10,12,.85) 0%, rgba(10,10,12,.55) 45%, rgba(10,10,12,.25) 100%);
}
.hero-home-inner{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:40px;
  padding-top:clamp(24px,4vw,40px);
  padding-bottom:clamp(24px,4vw,40px);
  width:100%;
}
.hero-home-text{max-width:600px;}
.hero-home-text .eyebrow{
  color:var(--accent-on-dark);
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
/* Eén kleine, zichtbare en inhoudelijke H1, gevolgd door de grote emotionele herotekst.
   De grote tekst is bewust geen tweede H1: zo blijft de kopstructuur helder. */
.hero-home-text h1.hero-seo-h1{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-size:.74rem;
  font-weight:600;
  line-height:1.5;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--accent-on-dark);
  margin:0;
  text-shadow:0 1px 10px rgba(0,0,0,.5);
}
.hero-home-text p.hero-home-display{
  font-family:'Playfair Display',Georgia,'Times New Roman',serif;
  font-size:clamp(2rem,4vw,2.7rem);
  font-weight:600;
  line-height:1.08;
  letter-spacing:-.01em;
  color:var(--heading);
  max-width:none;
  margin:16px 0 .5em;
  text-wrap:balance;
  text-shadow:0 2px 18px rgba(0,0,0,.6);
}
.hero-home-text .hero-home-display .accent-text{color:var(--accent-on-dark);}
.hero-home-text p{
  font-size:1rem;
  max-width:46ch;
  margin-bottom:20px;
  text-shadow:0 1px 12px rgba(0,0,0,.6);
}
.hero-home-actions{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
}
.btn-whatsapp-solid{
  background:var(--whatsapp);
  color:#fff;
  transition:background-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-whatsapp-solid .ico-wa{color:#fff;}
.btn-whatsapp-solid:hover{
  background:#1ebd5b;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(37,211,102,.35);
}
.btn-outline-accent{
  background:transparent;
  border:2px solid var(--accent);
  color:var(--accent-on-dark);
  transition:background-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn-outline-accent:hover{
  background:var(--accent-fill);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 12px 26px rgba(209,109,37,.35);
}
.hero-home-actions .btn{border-radius:var(--r-pill);padding:14px 26px;}
/* Het adviesformulier zit op desktop ín de hero, rechts naast de tekst. Op
   mobiel en tablet is het verborgen: daar staat het contactformulier onderaan
   de pagina (.contact-block--formulier), zodat de hero-foto vrij zicht houdt
   en er geen tweede formulier in beeld komt. */
.hero-home-form{width:100%;}
.hero-form-card{
  background:rgba(17,17,21,.90);
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  padding:16px;
  backdrop-filter:blur(6px);
}
.hero-form-card h2{
  font-size:1.25rem;
  color:var(--heading);
  margin-bottom:12px;
}
.hero-form{display:grid;gap:6px;}
.hero-form .form-row{gap:4px;}
.hero-form .form-row label{font-size:.72rem;}
.hero-form .form-row input,
.hero-form .form-row textarea{padding:7px 10px;font-size:.9rem;}
.hero-form .form-row textarea{resize:vertical;height:40px;min-height:40px;}
.hero-form-submit{width:100%;padding:12px 20px;margin-top:8px;}
@media (max-width:899px){
  .hero-home-form-section{display:none;}
}
@media (min-width:900px){
  .hero-home-overlay{
    background:linear-gradient(90deg, rgba(10,10,12,.90) 0%, rgba(10,10,12,.66) 32%, rgba(10,10,12,.12) 56%, rgba(10,10,12,.30) 100%);
  }
  .hero-home{align-items:center;}
  .hero-home-inner{
    flex-direction:row;
    align-items:center;
    gap:48px;
  }
  .hero-home-text{flex:1 1 auto;}

  /* Het formulier ligt op desktop weer over de hero, rechts naast de tekst.
     Hero en formuliersectie delen dezelfde grid-cel, zodat de hero de hoogte
     bepaalt en het formulier verticaal gecentreerd blijft. De eerste kolom
     reserveert de ruimte van de hero-tekst (max. 600px + 48px tussenruimte),
     precies zoals de oude flex-opstelling. */
  .hero-home-shell{
    display:grid;
    grid-template-columns:1fr;
  }
  .hero-home-shell > .hero-home,
  .hero-home-shell > .hero-home-form-section{grid-area:1 / 1;}
  .hero-home-form-section{
    position:relative;
    z-index:2;
    padding:0;
    /* Klikken gaan door naar de hero eronder; alleen het formulier zelf niet. */
    pointer-events:none;
  }
  .hero-home-form-section .wrap{
    display:grid;
    grid-template-columns:minmax(0,600px) 310px;
    gap:48px;
    align-content:center;
    height:100%;
  }
  .hero-home-form{
    grid-column:2;
    width:310px;
    pointer-events:auto;
  }
}

/* Section rhythm */
section{padding:clamp(64px,9vw,112px) 0;}
/* Opgelicht sectievlak, voor secties die zelf geen achtergrondregel hebben. */
.section-soft{background:var(--bg-soft);}
.section-head{
  max-width:640px;
  margin:0 auto clamp(40px,6vw,64px);
  text-align:center;
}
.section-head h2{font-size:clamp(1.6rem,3.4vw,2.3rem);}
.section-head p{color:var(--text-muted);margin-bottom:0;}

/* Propositie */
.propositie{text-align:center;}
/* Compacte intro bovenaan subpagina's, zodat de inhoud eerder in beeld komt */
.page-intro{padding-top:clamp(32px,4vw,48px);padding-bottom:clamp(16px,2vw,24px);}
.page-intro + section{padding-top:clamp(24px,2.5vw,32px);}
.page-intro .wrap{max-width:860px;}
.page-intro h1{font-size:clamp(1.8rem,3.2vw,2.3rem);margin-bottom:.35em;}
.propositie.page-intro p{font-size:1.05rem;margin-bottom:0;}
.propositie .wrap{max-width:740px;}
.propositie p{
  font-size:1.15rem;
  color:var(--text-muted);
}
.propositie p.lead{
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(1.5rem,3vw,2rem);
  line-height:1.45;
  color:var(--heading);
  font-weight:500;
}

/* Waarom Countrysteel (home): foto links, info rechts */
.waarom{padding:clamp(48px,6vw,72px) 0;}
.waarom .wrap{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  align-items:center;
}
.waarom-photo{
  border-radius:var(--r-md);
  overflow:hidden;
  border:1px solid var(--line);
}
.waarom-photo img{width:100%;height:100%;aspect-ratio:4/3;object-fit:cover;}
.waarom-text h2{
  font-size:clamp(1.6rem,3.2vw,2.2rem);
  color:var(--heading);
  margin-bottom:14px;
}
.waarom-intro{color:var(--text-muted);margin-bottom:24px;}
.waarom-list{display:grid;gap:18px;margin-bottom:28px;}
.waarom-list li{display:flex;align-items:flex-start;gap:14px;}
.waarom-ico{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;height:40px;
  border-radius:var(--r-sm);
  background:rgba(209,109,37,.12);
  border:1px solid rgba(230,138,63,.3);
  color:var(--accent-on-dark);
}
.waarom-ico svg{
  width:20px;height:20px;
  fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;
}
.waarom-list h3{
  font-family:'Inter',system-ui,-apple-system,Segoe UI,Arial,sans-serif;
  font-size:1rem;
  font-weight:700;
  letter-spacing:0;
  color:var(--heading);
  margin:0 0 2px;
}
.waarom-list p{color:var(--text-muted);font-size:.92rem;line-height:1.55;margin:0;}
.waarom-actions{display:flex;flex-wrap:wrap;gap:12px;}
.waarom-actions .btn{border-radius:var(--r-pill);padding:14px 26px;}
@media (min-width:900px){
  .waarom .wrap{grid-template-columns:1fr 1fr;gap:56px;}
  .waarom-photo{align-self:stretch;}
  .waarom-photo img{aspect-ratio:auto;min-height:420px;max-height:560px;}
}

/* Reviews (home) */
.reviews{background:var(--bg);}
.review-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
  max-width:900px;
  margin:0 auto;
}
.review-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:22px;
}
.review-head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.review-avatar{
  flex:none;
  width:40px;height:40px;
  border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--accent-fill);
  color:#fff;
  font-weight:600;
  font-size:1.05rem;
}
.review-meta{flex:1 1 auto;line-height:1.3;}
.review-name{font-weight:600;color:var(--heading);font-size:.95rem;}
.review-time{font-size:.8rem;color:var(--text-muted);}
.review-g{flex:none;width:20px;height:20px;}
.review-stars{color:#fbbc04;font-size:1rem;letter-spacing:2px;line-height:1;margin-bottom:10px;}
.review-card p{color:var(--text);font-size:.93rem;line-height:1.6;margin:0;}
.reviews-cta{text-align:center;margin-top:32px;}
@media (min-width:700px){
  .review-grid{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));}
}

/* Projecten */
.projecten{background:var(--bg-soft);}
.project-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
}
.project-card{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
/* Hover-lift via 'translate', zodat de transform van scroll-reveal hem niet overschrijft. */
.project-card,
.js .project-card.reveal{
  transition:opacity .7s ease, transform .7s ease, translate .25s ease,
    box-shadow .25s ease, border-color .25s ease, background-color .25s ease;
}
.project-card:hover{
  translate:0 -5px;
  box-shadow:0 20px 44px rgba(0,0,0,.35);
  border-color:var(--accent);
}
.project-card .photo{
  aspect-ratio:4/3;
  background:var(--bg-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.project-card .photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.project-card:hover .photo img{transform:scale(1.05);}
@media (prefers-reduced-motion: reduce){
  .project-card:hover{translate:none;}
}
/* Dienstkaart: de hele kaart is een link */
.service-card{display:block;cursor:pointer;color:inherit;}
.service-card:hover{background:#26262e;}
.service-card:hover h3{color:var(--accent-on-dark);}
.service-card:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
.project-card .info{padding:24px 26px 28px;}
.project-card .place{
  font-size:.75rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  color:var(--accent);
  font-weight:600;
}
.project-card h3{font-size:1.15rem;margin-top:8px;margin-bottom:6px;}
.project-card p{color:var(--text-muted);font-size:.92rem;margin-bottom:0;}
.projecten-cta{text-align:center;margin-top:52px;}
@media (min-width:700px){
  .project-grid{grid-template-columns:repeat(3,1fr);}
}
/* Twee kaarten naast elkaar, zodat er geen lege derde kolom ontstaat. */
@media (min-width:640px){
  .project-grid--duo{grid-template-columns:repeat(2,1fr);}
}
/* Link naar de bijbehorende dienstpagina onder een projectkaart. */
.project-card .dienst-link{
  display:inline-block;
  margin-top:12px;
  font-size:.88rem;
  font-weight:600;
  color:var(--accent-on-dark);
}
.project-card .dienst-link:hover{color:var(--accent);}
/* De titel van een projectkaart linkt naar de projectpagina. */
.project-card h3 a{color:inherit;}
.project-card:hover h3 a{color:var(--accent-on-dark);}
/* Categorieën op het projectoverzicht: de projecten staan per soort onder
   elkaar, met een kop en een haarstreep als scheiding. Bewust geen tabs of
   filters, zodat alles gewoon onder elkaar te scrollen blijft. */
.project-categorie + .project-categorie{margin-top:clamp(44px,5.5vw,68px);}
.project-categorie-titel{
  font-size:clamp(1.2rem,2.3vw,1.5rem);
  color:var(--heading);
  padding-bottom:14px;
  margin-bottom:24px;
  border-bottom:1px solid var(--line);
}

/* Projectdetail: één brede kaart met links de tekst en rechts de carrousel,
   in dezelfde kaartstijl als het projectoverzicht. Op mobiel zakken de twee
   kolommen onder elkaar, tekst eerst. */
.project-detail{padding:clamp(24px,3.5vw,40px) 0 0;}
.project-detail-card{
  display:grid;
  gap:clamp(24px,3vw,40px);
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(20px,3vw,36px);
}
.project-detail-text .eyebrow{margin-bottom:10px;}
.project-detail-text h1{font-size:clamp(1.5rem,2.8vw,2rem);margin-bottom:.4em;}
.project-detail-intro{color:var(--text-muted);margin-bottom:22px;}
.project-kenmerken{display:grid;gap:10px;margin-bottom:24px;}
.project-kenmerken li{
  padding-left:20px;position:relative;
  font-size:.92rem;color:var(--text);
}
.project-kenmerken li::before{
  content:"";position:absolute;left:0;top:.8em;
  width:11px;height:1px;background:var(--accent);
}
.project-detail-dienst{font-size:.9rem;color:var(--text-muted);margin-bottom:0;}
@media (min-width:900px){
  .project-detail-card{
    grid-template-columns:minmax(0,42fr) minmax(0,58fr);
    align-items:stretch;
  }
  /* De carrousel volgt de hoogte van de kaart, zodat er onder de foto geen
     leeg vlak overblijft. Naar boven toe is de hoogte begrensd, zodat een
     lang tekstblok de foto niet buitenproportioneel maakt; de ondergrens
     voorkomt een platgedrukte foto bij een kort tekstblok. */
  .project-detail-media{display:flex;}
  .project-detail-media .carousel{
    flex:1 1 auto;
    min-height:clamp(320px,26vw,420px);
    max-height:clamp(420px,38vw,600px);
  }
  .project-detail-media .carousel-track,
  .project-detail-media .carousel-slide{height:100%;}
}
/* Eén knop onder een projectpagina: dan is de gewone sectiepadding te ruim. */
.projecten-cta--slim{padding:clamp(24px,3.5vw,40px) 0;margin-top:0;}
/* De sjabloonmelding staat boven de projectkaart en mag daar wat lucht van. */
.project-detail .template-notice{margin-bottom:22px;}

/* Tekstlink midden in lopende tekst, bijvoorbeeld naar een verwante dienst. */
.text-link{
  color:var(--accent-on-dark);
  font-weight:600;
  border-bottom:1px solid rgba(230,138,63,.45);
}
.text-link:hover{color:var(--accent);border-bottom-color:currentColor;}

/* Uitgelicht dienstblok: foto naast tekst. Gebruikt voor toegangspoorten,
   de hoofddienst, op de homepage en op het dienstenoverzicht. */
.dienst-primary{
  display:grid;
  gap:clamp(28px,4vw,48px);
  align-items:center;
}
@media (min-width:860px){
  .dienst-primary{grid-template-columns:1.02fr 1fr;}
}
.dienst-primary-photo{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:4/3;
  background:var(--bg-soft);
}
.dienst-primary-photo img{width:100%;height:100%;object-fit:cover;}
.dienst-primary-text h2{margin-bottom:.45em;}
.dienst-primary-text p{color:var(--text-muted);}
.dienst-primary-actions{margin-top:24px;display:flex;flex-wrap:wrap;gap:12px;}
.dienst-primary .feature-list{margin-top:6px;}

/* Klein aanvullend dienstblok: één regel met tekst en een link ernaast. */
.dienst-mini{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:22px;
  padding:26px 28px;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  background:var(--surface);
}
.dienst-mini-text{max-width:62ch;}
.dienst-mini h2,
.dienst-mini h3{font-size:1.15rem;margin-bottom:6px;}
/* Zet een los .dienst-mini-blok onder een kaartraster in dezelfde sectie. */
.mini-row{margin-top:clamp(32px,4vw,48px);}
.dienst-mini p{color:var(--text-muted);margin-bottom:0;}
/* max-width + normale spatiëring: een langere knoptekst wikkelt op smalle
   schermen in plaats van buiten het blok te lopen (.btn staat op nowrap). */
.dienst-mini .btn{flex:0 0 auto;max-width:100%;white-space:normal;text-align:center;}

/* Werkwijze */
.werkwijze-steps{
  display:grid;
  grid-template-columns:1fr;
  gap:24px;
}
.werkwijze-step{
  text-align:center;
  padding:16px 14px 20px;
  border:1px solid transparent;
  border-radius:var(--r-md);
}
/* Hover: box licht op en komt iets omhoog. 'translate' staat los van de
   transform die scroll-reveal gebruikt, dus die twee zitten elkaar niet dwars. */
.werkwijze-step,
.js .werkwijze-step.reveal{
  transition:opacity .7s ease, transform .7s ease, translate .25s ease,
    background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.werkwijze-step:hover{
  background:var(--surface);
  border-color:rgba(209,109,37,.45);
  translate:0 -4px;
  box-shadow:0 16px 34px rgba(0,0,0,.35);
}
@media (prefers-reduced-motion: reduce){
  .werkwijze-step:hover{translate:none;}
}
.werkwijze-step .num{
  font-family:'Playfair Display',Georgia,serif;
  font-size:1.9rem;
  color:var(--accent);
  margin-bottom:8px;
}
.werkwijze-step h3{font-size:1.05rem;margin-bottom:8px;}
.werkwijze-step p{color:var(--text-muted);font-size:.92rem;margin-bottom:0;}
.werkwijze-photo{
  margin:0 0 16px;
  width:100%;
  aspect-ratio:4/3;
  max-height:170px;
  border-radius:var(--r-md);
  background:var(--bg-soft);
  border:1px solid var(--line);
  overflow:hidden;
}
.werkwijze-photo img{width:100%;height:100%;object-fit:cover;}
@media (min-width:700px){
  .werkwijze-steps{grid-template-columns:repeat(4,1fr);}
}

/* Contactblok */
.contact-block{
  text-align:center;
  border-top:1px solid var(--line-soft);
  border-bottom:1px solid var(--line-soft);
  background:var(--bg-soft);
}
.contact-block h2{color:var(--heading);}
.contact-block p{
  color:var(--text-muted);
  max-width:52ch;
  margin-left:auto;
  margin-right:auto;
}
.contact-block .contact-actions{max-width:720px;margin:28px auto 0;}
/* Variant met het contactformulier erin (onderaan de homepage). Het formulier
   en de directe contactgegevens zijn linkse tekst in kaarten, net als op
   /contact/; alleen de sectiekop blijft gecentreerd (.section-head zet dat
   zelf). */
.contact-block--formulier{text-align:left;}

/* Contactknoppen (inc/contact-buttons.php): gelijk van vorm, eigen kleuraccent */
.contact-actions{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
}
.contact-actions--3{grid-template-columns:repeat(3,1fr);}
@media (min-width:640px){
  .contact-actions--4{grid-template-columns:repeat(4,1fr);}
}
.contact-btn{
  --tone:var(--text-muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 12px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:rgba(255,255,255,.03);
  color:var(--text);
  font-size:.86rem;
  font-weight:600;
  white-space:nowrap;
  transition:border-color .2s ease, background-color .2s ease, color .2s ease;
}
.contact-btn svg{width:17px;height:17px;flex:none;color:var(--tone);}
.contact-btn:hover{border-color:var(--tone);background:rgba(255,255,255,.07);color:var(--heading);}
.contact-btn--accent{--tone:var(--accent-on-dark);border-color:rgba(230,138,63,.45);}
.contact-btn--wa{--tone:var(--whatsapp);border-color:rgba(37,211,102,.4);}
.contact-btn--muted{--tone:var(--text-muted);}

/* Footer */
.site-footer{
  background:var(--ink);
  color:var(--text-on-dark-muted);
  padding:64px 0 32px;
  font-size:.92rem;
}
.footer-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:40px;
  padding-bottom:40px;
  border-bottom:1px solid var(--line-dark);
}
/* Het footerlogo is het merkanker onderaan elke pagina en staat daarom een
   stuk groter dan in de header (die blijft zoals hij is). De hoogte loopt mee
   met de schermbreedte; de bronwebp is ruim 2x zo groot, dus hij blijft ook
   op een retina-scherm scherp. */
.footer-brand img{height:clamp(60px,8vw,88px);width:auto;margin-bottom:18px;}
.footer-brand p{max-width:32ch;}
.site-footer h4{
  color:var(--text-on-dark);
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.1em;
  margin-bottom:16px;
}
.footer-contact .contact-actions{margin-bottom:18px;max-width:360px;}
.site-footer address{font-style:normal;line-height:1.8;}
.footer-social{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:14px;
}
.footer-social a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:40px;
  height:40px;
  color:var(--text-on-dark-muted);
  transition:color .2s ease;
}
.footer-social a:hover{color:var(--accent);}
.footer-social svg{width:24px;height:24px;}
.footer-nav a{display:block;padding:6px 0;}
.footer-nav a:hover{color:var(--text-on-dark);}
.footer-bottom{
  padding-top:24px;
  display:flex;
  flex-direction:column;
  gap:6px;
  font-size:.8rem;
}
@media (min-width:640px){
  .footer-bottom{flex-direction:row;justify-content:space-between;}
}
@media (min-width:700px){
  .footer-grid{grid-template-columns:1.3fr 1fr 1fr;}
}

/* Feature-lijst (dienstpagina's) */
.feature-list{display:grid;gap:14px;max-width:640px;}
.feature-list li{padding-left:22px;position:relative;color:var(--text-muted);}
.feature-list li::before{
  content:"";position:absolute;left:0;top:.7em;
  width:12px;height:1px;background:var(--accent);
}

/* Galerij (dienstpagina's) */
.gallery-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--gap);
}
.gallery-photo{
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
  aspect-ratio:4/3;
}
.gallery-photo img{
  width:100%;height:100%;object-fit:cover;
  transition:transform .5s ease;
}
.gallery-photo:hover img{transform:scale(1.05);}
@media (min-width:640px){
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
}
@media (min-width:1000px){
  .gallery-grid{grid-template-columns:repeat(3,1fr);}
}
/* Compacte variant: kleine foto's, vanaf tablet altijd drie naast elkaar */
.gallery-grid--compact{gap:16px;}
@media (min-width:640px){
  .gallery-grid--compact{grid-template-columns:repeat(3,1fr);}
}

/* Twee-koloms infoblok (bv. garantie / onderhoud) */
.info-grid{display:grid;gap:32px;}
.info-grid h2,
.info-grid h3{color:var(--heading);}
.info-grid p{color:var(--text-muted);margin-bottom:0;}
.info-grid .feature-list{margin-top:14px;}
@media (min-width:700px){
  .info-grid{grid-template-columns:1fr 1fr;}
}

/* FAQ (accordion) */
.faq .wrap{max-width:760px;}
.faq-list{display:grid;gap:14px;}
.faq-item{
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  padding:0 24px;
  transition:border-color .2s ease;
}
.faq-item summary{
  cursor:pointer;
  list-style:none;
  padding:20px 28px 20px 0;
  position:relative;
  font-weight:600;
  color:var(--heading);
  font-size:1rem;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:0;
  top:18px;
  font-size:1.3rem;
  line-height:1;
  color:var(--accent);
  transition:transform .2s ease;
}
.faq-item[open] summary::after{transform:rotate(45deg);}
.faq-item[open]{border-color:var(--accent);}
.faq-item[open] summary{color:var(--accent-on-dark);}
.faq-item p{
  color:var(--text-muted);
  margin:0;
  padding-bottom:22px;
}

/* Sjabloon-melding */
.template-notice{
  border:1px dashed var(--accent);
  background:var(--bg-soft);
  padding:16px 20px;
  font-size:.85rem;
  color:var(--text-muted);
  margin-bottom:8px;
}
.template-notice strong{color:var(--heading);}
.template-notice code{
  background:var(--surface);
  border:1px solid var(--line);
  padding:1px 6px;
  border-radius:var(--r-xs);
  font-size:.82em;
}

/* Carousel (projectdetail). Bewust een vaste hoogte in plaats van een vaste
   verhouding: staande en liggende foto's krijgen zo hetzelfde kader, zonder
   vervorming. object-fit dekt het kader af en de lightbox toont de hele foto.
   overflow:hidden op de container houdt de naastliggende slides binnen, zodat
   er geen horizontale scroll ontstaat. */
.carousel{
  position:relative;overflow:hidden;
  border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--bg-soft);
}
.carousel-track{display:flex;transition:transform .35s ease;}
.carousel-slide{flex:0 0 100%;height:clamp(250px,58vw,420px);margin:0;}
.carousel-slide img{width:100%;height:100%;object-fit:cover;}
@media (prefers-reduced-motion: reduce){
  .carousel-track{transition:none;}
}
.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:44px;height:44px;border-radius:50%;
  background:var(--surface);border:1px solid var(--line);
  display:flex;align-items:center;justify-content:center;
  color:var(--text);cursor:pointer;
  transition:border-color .2s ease,color .2s ease;
}
.carousel-btn svg{width:22px;height:22px;}
.carousel-prev{left:14px;}
.carousel-next{right:14px;}
.carousel-btn:hover{border-color:var(--accent);color:var(--accent);}
.carousel-btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
.carousel-status{
  position:absolute;right:14px;bottom:14px;
  padding:4px 11px;border-radius:var(--r-pill);
  background:rgba(11,11,13,.72);
  color:var(--text-on-dark);
  font-size:.78rem;font-weight:600;letter-spacing:.04em;
  font-variant-numeric:tabular-nums;
  pointer-events:none;
}

/* Contactpagina: compacte kop, formulier links, direct contact rechts */
section.contact-page{padding:clamp(28px,4vw,48px) 0 clamp(56px,8vw,96px);}
.contact-head{margin-bottom:clamp(20px,3vw,28px);max-width:820px;}
.contact-head h1{font-size:clamp(1.8rem,3.2vw,2.3rem);color:var(--heading);margin:10px 0 .3em;}
.contact-head p{color:var(--text-muted);margin:0;}
.contact-layout{display:grid;gap:28px;align-items:start;}
.contact-main,
.contact-direct{
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  padding:clamp(20px,3vw,28px);
}
.contact-main h2,
.contact-direct h2{font-size:1.2rem;color:var(--heading);margin-bottom:16px;}
.contact-main .contact-form{gap:14px;}
.contact-main .form-row{gap:6px;}
.form-pair{display:grid;gap:14px;}
@media (min-width:600px){
  .form-pair{grid-template-columns:1fr 1fr;}
}
.contact-main .form-row input,
.contact-main .form-row textarea{padding:10px 12px;background:var(--bg-soft);}
.contact-lines{display:grid;gap:6px;margin-bottom:18px;}
.contact-lines a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  margin:0 -10px;
  border-radius:var(--r-sm);
  color:var(--text);
  font-weight:600;
  transition:background-color .2s ease;
}
.contact-lines a:hover{background:rgba(255,255,255,.05);}
.contact-lines small{
  display:block;
  font-size:.72rem;
  font-weight:500;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.contact-ico{
  flex:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;height:38px;
  border-radius:50%;
  border:1px solid var(--line);
  color:var(--text-muted);
}
.contact-ico svg{width:17px;height:17px;}
.contact-ico--accent{color:var(--accent-on-dark);border-color:rgba(230,138,63,.45);}
.contact-ico--wa{color:var(--whatsapp);border-color:rgba(37,211,102,.4);}
.contact-direct address{
  font-style:normal;
  color:var(--text-muted);
  line-height:1.7;
  padding-top:16px;
  border-top:1px solid var(--line);
}
@media (min-width:860px){
  .contact-layout{grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);}
}

/* Contactformulier */
.contact-form{display:grid;gap:20px;}
.form-row{display:flex;flex-direction:column;gap:8px;}
.form-row label{font-size:.85rem;font-weight:600;color:var(--heading);}
.form-row input,
.form-row select,
.form-row textarea{
  font:inherit;
  font-size:.96rem;
  padding:13px 14px;
  border:1px solid var(--line);
  border-radius:var(--r-sm);
  background:var(--surface);
  color:var(--text);
}
/* Een veld waar je in typt moet duidelijk te zien zijn. Alleen de rand een
   andere kleur geven is te subtiel; de ring eromheen maakt hetzelfde beeld als
   de focusstijl van de knoppen en links elders op de site. */
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(209,109,37,.28);
}
.form-row textarea{resize:vertical;}
.contact-form .btn{justify-self:start;}
.hp-field{
  position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden;
}

/* Placeholder beeld (tot echte poortfoto's beschikbaar zijn) */
.placeholder-shot{
  position:relative;
  background:var(--bg-soft);
  display:flex;
  align-items:center;
  justify-content:center;
}
/* Beeld klein en gecentreerd, ook binnen kaders die img normaal volledig
   laten vullen (galerij, dienstblok): anders valt de illustratie weg. */
.placeholder-shot img{
  width:56%;
  height:auto;
  object-fit:contain;
  opacity:.8;
}
.placeholder-shot .label{
  position:absolute;
  bottom:14px;
  left:14px;
  right:14px;
  font-size:.68rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--text-muted);
  opacity:.85;
  text-align:center;
}

/* Actieve navigatie (aria-current) */
.site-nav a[aria-current="page"]{color:var(--accent-on-dark);}
.nav-toggle-panel a[aria-current="page"]{color:var(--accent-on-dark);}

/* Zwevende WhatsApp-knop */
.wa-float{
  position:fixed;
  right:20px;
  bottom:20px;
  width:56px;
  height:56px;
  border-radius:50%;
  background:var(--whatsapp);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 12px 28px rgba(0,0,0,.4);
  z-index:150;
  transition:opacity .3s ease, transform .3s ease, background-color .2s ease;
}
.wa-float .ico-wa{width:28px;height:28px;color:#fff;}
.wa-float:hover{background:#1ebd5b;}
.js .wa-float{
  opacity:0;
  visibility:hidden;
  transform:translateY(14px);
}
.js .wa-float.is-visible{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}

/* Scroll-reveal (progressive enhancement, zie js/enhance.js) */
.js .reveal{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .7s ease, transform .7s ease;
}
.js .reveal.is-visible{
  opacity:1;
  transform:translateY(0);
}

/* Voorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .js .reveal{opacity:1;transform:none;}
}

/* Lightbox (js/lightbox.js) */
.lb-zoomable{cursor:pointer;}
.lb-zoomable:focus-visible{outline:2px solid var(--accent);outline-offset:3px;}
html.lightbox-open{overflow:hidden;}
.lightbox{
  position:fixed;inset:0;
  z-index:1000;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:56px 16px 24px;
  background:rgba(8,8,10,.92);
  opacity:0;
  transition:opacity .2s ease;
}
.lightbox[hidden]{display:none;}
.lightbox.is-open{opacity:1;}
.lightbox-figure{
  margin:0;
  max-width:min(1200px,100%);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.lightbox-img{
  max-width:100%;
  max-height:calc(100vh - 140px);
  max-height:calc(100svh - 140px);
  width:auto;height:auto;
  object-fit:contain;
  border-radius:var(--r-sm);
  box-shadow:0 24px 60px rgba(0,0,0,.6);
  cursor:default;
}
.lightbox-caption{
  font-size:.88rem;
  color:var(--text-muted);
  text-align:center;
}
.lightbox-close{
  position:absolute;
  top:12px;right:16px;
  width:44px;height:44px;
  border:1px solid var(--line);
  border-radius:50%;
  background:rgba(255,255,255,.06);
  color:var(--text-on-dark);
  font-size:1.8rem;
  line-height:1;
  cursor:pointer;
  transition:background-color .2s ease, border-color .2s ease;
}
.lightbox-close:hover{background:rgba(255,255,255,.12);border-color:var(--accent);}
.lightbox-close:focus-visible{outline:2px solid var(--accent);outline-offset:2px;}
@media (prefers-reduced-motion: reduce){
  .lightbox{transition:none;}
}

/* 404-pagina */
.error-actions{display:flex;flex-wrap:wrap;gap:16px;margin-top:24px;}

/* Cookiebanner. Blijft verborgen tot js/consent.js hem opent (.is-open); zonder
   JavaScript wordt er ook geen analytics geladen, dus valt er niets te vragen.
   Geen externe library, geen extra request: alleen deze regels en een klein
   uitgesteld script. */
.cookie-banner{
  display:none;
  position:fixed;
  left:0;right:0;bottom:0;
  z-index:200;
  background:var(--surface);
  border-top:1px solid var(--line);
  box-shadow:0 -12px 30px rgba(0,0,0,.35);
}
.cookie-banner.is-open{display:block;}
.cookie-banner-inner{
  display:flex;
  flex-direction:column;
  gap:16px;
  padding-top:20px;
  padding-bottom:20px;
}
.cookie-banner-text h2{
  font-size:1rem;
  margin:0 0 6px;
  color:var(--heading);
}
.cookie-banner-text p{
  margin:0;
  font-size:.88rem;
  color:var(--text-muted);
  max-width:72ch;
}
.cookie-banner-text a{color:var(--accent-on-dark);}
.cookie-banner-actions{display:flex;flex-wrap:wrap;gap:12px;}
.cookie-banner-actions .btn{padding:12px 24px;font-size:.9rem;}
@media (min-width:768px){
  .cookie-banner-inner{
    flex-direction:row;
    align-items:center;
    justify-content:space-between;
    gap:32px;
  }
  .cookie-banner-actions{flex:none;}
}
/* Zolang de banner staat, schuift de zwevende WhatsApp-knop erboven in plaats
   van erachter. consent.js zet --consent-height op de gemeten bannerhoogte. */
.consent-open .wa-float{bottom:calc(20px + var(--consent-height, 0px));}

/* Juridische links onderaan de footer. */
.footer-legal{display:flex;flex-wrap:wrap;gap:4px 18px;}
.footer-legal a{color:var(--text-muted);}
.footer-legal a:hover{color:var(--accent-on-dark);}

/* ---------------------------------------------------------------------------
   Vergelijkingspagina schuifpoorten (vrijdragend vs. op rail) + poortmotoren.
   Nieuwe bouwstenen, op dezelfde tokens als de rest van de site.
   --------------------------------------------------------------------------- */

/* Subtitel direct onder een H1 (vergelijkingspagina). */
.hero-sub{
  color:var(--text);
  font-size:1.06rem;
  font-weight:600;
  margin:-10px 0 18px;
}

/* Twee uitvoeringen naast elkaar, met foto en korte uitleg. */
.compare-duo{display:grid;gap:var(--gap);}
@media (min-width:700px){
  .compare-duo{grid-template-columns:1fr 1fr;}
}
.compare-card{
  display:flex;
  flex-direction:column;
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.compare-card .photo{
  display:flex;
  align-items:center;
  justify-content:center;
  aspect-ratio:4/3;
  background:var(--bg-soft);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.compare-card .photo img{width:100%;height:100%;object-fit:cover;}
/* Placeholder in plaats van een echte foto: beeld klein en gecentreerd. */
.compare-card .photo.placeholder-shot img{width:56%;height:auto;object-fit:contain;}
.compare-card-body{padding:24px 26px 28px;}
.compare-card-body h3{font-size:1.15rem;margin-bottom:8px;}
.compare-card-body > p{color:var(--text-muted);font-size:.94rem;margin-bottom:0;}
.compare-card-body .feature-list{margin-top:16px;}
.compare-card-body .feature-list li{font-size:.9rem;}

/* Vergelijkingstabel met de criteria. Op mobiel klapt elke rij om naar een
   kaartje met het criterium als kop, zodat er niets horizontaal wegloopt. */
.cmp-table{
  width:100%;
  border-collapse:separate;
  border-spacing:0;
  border:1px solid var(--line);
  border-radius:var(--r-md);
  overflow:hidden;
}
.cmp-table th,
.cmp-table td{
  text-align:left;
  vertical-align:top;
  padding:15px 18px;
  border-bottom:1px solid var(--line-soft);
}
.cmp-table thead th{
  background:var(--surface);
  color:var(--heading);
  font-weight:600;
  font-size:.92rem;
}
.cmp-table tbody th{
  width:20%;
  color:var(--heading);
  font-weight:600;
  font-size:.95rem;
}
.cmp-table td{color:var(--text-muted);font-size:.92rem;}
.cmp-table tbody tr:last-child th,
.cmp-table tbody tr:last-child td{border-bottom:0;}
@media (max-width:699px){
  .cmp-table{border:0;border-radius:0;overflow:visible;}
  /* Kopregel blijft voor schermlezers staan, maar verdwijnt uit het beeld. */
  .cmp-table thead{
    position:absolute;
    width:1px;height:1px;
    overflow:hidden;
    clip:rect(0 0 0 0);
    white-space:nowrap;
  }
  .cmp-table tbody,
  .cmp-table tr,
  .cmp-table th,
  .cmp-table td{display:block;width:auto;}
  .cmp-table tbody tr{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--r-md);
    margin-bottom:14px;
  }
  .cmp-table tbody tr:last-child{margin-bottom:0;}
  .cmp-table tbody th{
    padding:15px 18px 2px;
    border-bottom:0;
    font-size:1rem;
  }
  .cmp-table td{padding:10px 18px 15px;border-bottom:0;}
  .cmp-table td + td{border-top:1px solid var(--line-soft);}
  .cmp-table td::before{
    content:attr(data-label);
    display:block;
    margin-bottom:4px;
    font-size:.7rem;
    letter-spacing:.09em;
    text-transform:uppercase;
    font-weight:600;
    color:var(--accent);
  }
}

/* Kleine toelichting onder een adviesblok. */
.advies-note{
  margin-top:22px;
  padding:15px 20px;
  border-left:3px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--bg-soft);
}
.advies-note p{margin:0;color:var(--text-muted);font-size:.9rem;}

/* Motorblokken (poortmotoren): foto naast uitleg, om en om gespiegeld. */
.motor-list{display:grid;gap:clamp(36px,5vw,60px);}
.dienst-primary--flip .dienst-primary-photo{order:2;}
@media (max-width:859px){
  .dienst-primary--flip .dienst-primary-photo{order:0;}
}
.motor-points{display:grid;gap:22px;margin-top:22px;}
@media (min-width:560px){
  .motor-points{grid-template-columns:1fr 1fr;}
}
.motor-points h3{
  margin-bottom:10px;
  font-size:.74rem;
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--accent);
}
.motor-points .feature-list{margin-top:0;}
.motor-points .feature-list li{font-size:.9rem;}
/* Aandachtspunten iets ingetogener dan de voordelen. */
.feature-list--muted li::before{background:var(--text-muted);}

/* Placeholder als hero-beeld: houdt dezelfde verhouding als een echte foto. */
.hero-photo.placeholder-shot{aspect-ratio:4/3;}


/* Kennisbank CountrySteel: rustige redactionele pagina's in dezelfde huisstijl. */
.kb-wrap{padding:clamp(58px,7vw,100px) 0;background:#f6f4f0;color:#242323}
.kb-wrap h1,.kb-wrap h2{color:#1d1b1b}.kb-wrap p{color:#504c47}.kb-crumb{margin-bottom:26px;font-size:14px}.kb-crumb a{color:#6e4931;text-decoration:underline}
.kb-kicker{text-transform:uppercase;letter-spacing:.13em;font-weight:700;font-size:12px;color:#855c3e!important}.kb-wrap h1{font-size:clamp(36px,5vw,63px);max-width:18ch;line-height:1.08}.kb-lead{font-size:clamp(17px,1.8vw,21px);max-width:75ch;line-height:1.65;margin:22px 0 40px}
.kb-cols{display:grid;grid-template-columns:minmax(0,1fr) 285px;gap:clamp(24px,5vw,72px)}.kb-block{padding-bottom:24px;margin-bottom:22px;border-bottom:1px solid #ded8d0}.kb-block h2{font-size:clamp(24px,2.4vw,32px)}.kb-block p{max-width:75ch;line-height:1.85}
.kb-caveat{font-size:13px!important}.kb-side{padding:26px;background:#fff;border:1px solid #e1d8ce;height:max-content}.kb-side h2{font-size:24px}.kb-side>a{display:block;margin:13px 0;color:#69462d;text-decoration:underline}.kb-side .kb-cta{padding:13px 16px;background:#242323;color:white;text-align:center;text-decoration:none}
.kb-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.kb-card{background:#fff;padding:30px;border:1px solid #e1d8ce}.kb-card h2{font-size:clamp(22px,2.1vw,29px)}.kb-card p{line-height:1.75}.kb-card a{color:#68442e;text-decoration:underline}
@media(max-width:780px){.kb-cols{grid-template-columns:1fr}.kb-grid{grid-template-columns:1fr}.kb-card{padding:23px}}

/* Werkwijze: volledige ontwerp- en plaatsingsfoto's, met rustige bediening. */
.werkwijze-photo--ontwerp img{object-fit:contain;}
.werkwijze-photo--werkplaats img{object-position:center top;}