/* ========= Pro Car Body - Dark Theme =========
   Palet:
   - Goud (accent): #D4AF37
   - Zilver (accent 2): #B8C0CC
   - Tekst licht: #E7EAF0
   - Tekst secundair: #A9B2C1
   - Achtergrond 900: #12151B
   - Achtergrond 800: #171B22
   - Paneel/surface: #1C212A
   - Rand subtiel: #2A2F3A
   ============================================ */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700;800&display=swap');

* { font-family: "Poppins", sans-serif; margin: 0; padding: 0; box-sizing: border-box; scroll-padding-top: 2rem; scroll-behavior: smooth; list-style: none; text-decoration: none; }

body a{
  color: var(--main-color);
  transition: color var(--hover-speed) var(--hover-bounce);
}
body a:hover{
  color: var(--link-hover);
}

:root{
  --main-color:#D4AF37;                 /* goud */
  --second-color:#B8C0CC;               /* zilver */
  --text-color:#E7EAF0;                 /* primaire tekst */
  --text-muted:#A9B2C1;                 /* secundaire tekst */
  --bg-900:#12151B;                     /* page background */
  --bg-800:#171B22;                     /* header / hero overlay */
  --surface:#1C212A;                    /* kaarten / panelen */
  --border:#2A2F3A;                     /* subtiele randen */
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  /* Geen gradient meer: maak 'm solid goud zodat alles wat --gradient gebruikt nu effen is */
  --gradient: #D4AF37;
  --hover-scale-bump: 0.03;             /* hoeveel groter hover wordt (additief) */
  --hover-speed: 0.35s;                 /* gedeelde duur voor hover-transforms */
  --hover-bounce: cubic-bezier(.34,1.56,.64,1); /* bounce easing */
  --menu-bounce: cubic-bezier(.34,1.56,.64,1.08); /* bounce voor mobiele nav */
  --accordion-ease: cubic-bezier(.28,1.34,.42,1); /* subtiele Apple-achtige boing */
  --header-height: 88px;
  --header-overscroll-fill: 140px;       /* onzichtbare buffer boven de navbar */
  --page-gutter: clamp(32px, 8vw, 180px);
  --section-pad-y: clamp(60px, 8vw, 130px);
  --page-hero-pad-top: calc(var(--header-height) + 40px);
  --page-hero-pad-bottom: clamp(30px, 5vw, 60px);
  --page-hero-gap: clamp(40px, 6vw, 80px);
  --hero-adjacent-pad-top: 36px;
  --page-hero-min-height: clamp(280px, 45vh, 420px);
  --link-hover: #f5d87f;
}

/* ---------------------------------------------------------------------
 * Additional responsive tweaks to ensure proper scaling on phones and
 * smaller laptops. These declarations adjust layout, centering and
 * sizing purely through CSS. No HTML changes or scripts are required.
 * ------------------------------------------------------------------- */

/* Medium screens (between tablets and small laptops) */
@media (max-width: 992px) {
  /* Constrain the quick appointment form to avoid stretching too wide
     on laptop screens. Center it horizontally and let it grow only to
     the available width. */
  .form-container {
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
  }

  /* Reduce the minimum width of service cards to prevent horizontal
     scrolling on narrow devices. Each card will stack if the viewport
     becomes too small. */
  .services-container {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }
}

/* Small screens (phones and narrow tablets) */
@media (max-width: 768px) {
  /* Center the logo in the header by allowing it to flex and
     automatically fill available space. This pushes the menu icon to
     the right and keeps the brand identity central on mobile. */
  header {
    display: flex;
    align-items: center;
  }
  .logo {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  /* Increase the size of the logo slightly on mobile for better
     visibility and reduce its vertical offset. */
  .logo img {
    width: 55px;
    --logo-offset-y: 0;
    --logo-scale-base: 1;
  }

  /* Hide the call-to-action buttons in the header on mobile to
     minimise clutter and prevent them from pushing the logo off
     centre. Users can still contact or book from the dedicated
     sections. */
  .header-btn {
    display: none;
  }

  /* Always display the navigation menu on mobile by removing the
     collapsed-height restriction. This avoids relying on missing JS to
     toggle the dropdown and ensures all links are accessible without
     horizontal scrolling. */
  .navbar {
    max-height: 600px;
    margin-top: 0.8rem;
  }

  /* Stack all service cards in a single column for narrow viewports to
     avoid horizontal overflow. */
  .services-container {
    grid-template-columns: 1fr;
  }

  .services-container .box,
  .services-container .box:hover,
  .services-container .box:focus,
  .services-container .box:focus-within,
  .services-container .box:active {
    transform: none !important;
    box-shadow: var(--shadow);
  }

  .card-slider {
    width: 100vw;
    max-width: 100vw;
    margin-left: 50%;
    transform: translateX(-50%);
    padding-inline: clamp(12px, 6vw, 32px);
  }

  .card-slider .services-container {
    --slider-card-width: clamp(260px, 82vw, 340px);
    --slider-gap: clamp(14px, 4vw, 24px);
    --slider-side-pad: max(var(--slider-gap), calc((100% - var(--slider-card-width)) / 2));
    display: flex;
    gap: var(--slider-gap);
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scroll-padding-inline: var(--slider-side-pad);
    padding-inline: var(--slider-side-pad);
    padding-block: 0 0.5rem;
    margin: 2rem auto 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }

  .card-slider .services-container::-webkit-scrollbar {
    display: none;
  }

  .card-slider .box {
    flex: 0 0 var(--slider-card-width);
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .card-slider::before,
  .card-slider::after {
    opacity: .95;
  }

  /* Ensure the hero section's appointment form stacks vertically and
     fills the available width on mobile. */
  .form-container form {
    grid-template-columns: 1fr;
  }

  /* Adjust padding for the hero section to keep content centred on
     smaller screens. */
  .home {
    padding: 110px 20px 70px;
    background-position: center;
  }

  /* Slightly reduce the margin above headings to improve vertical
     spacing on mobile. */
  .heading h1 {
    margin-bottom: 1rem;
  }
}

/* Extra small screens (very narrow phones) */
@media (max-width: 576px) {
  /* Further constrain the maximum width of the appointment form and
     centre it. */
  .form-container {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Keep service cards full width and add a little vertical margin to
     separate them. */
  .services-container .box {
    margin-bottom: 1rem;
  }
}

html::-webkit-scrollbar { width: .5rem; }
html::-webkit-scrollbar-track { background: transparent; }
html::-webkit-scrollbar-thumb { background: var(--main-color); border-radius: 5rem; }

html{
  background: var(--bg-800);
}

body{
  position: relative;
  z-index: 0; /* creëert stack-context zodat de top-fill zichtbaar blijft */
  background: var(--bg-900);
  color: var(--text-color);
  overflow-x:hidden;
}

body::before{
  content:"";
  position: fixed;
  left:0;
  right:0;
  top: calc(-1 * (var(--header-overscroll-fill) + 200px));
  height: calc(var(--header-overscroll-fill) + 200px + var(--header-height));
  background: var(--bg-800);
  z-index:-1;
  pointer-events:none;
}

section { padding: var(--section-pad-y) var(--page-gutter); }

/* ===== Header ===== */
header{
  position: fixed; width: 100%; top: 0; right: 0; z-index:1200;
  display:flex; justify-content:space-between; align-items:center;
  /* GEEN blur + solide grijs */
  background: var(--bg-800);
  padding: 15px var(--page-gutter); border-bottom: 1px solid rgba(255,255,255,.04);
  min-height: var(--header-height);
  isolation: isolate; /* laat pseudo-element het bounce-gedeelte vullen */
}

header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top: calc(-1 * var(--header-overscroll-fill));
  bottom: 0;
  background: inherit;
  pointer-events:none;
}

.logo {
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo img {
  width: 50px; /* groter formaat */
  --logo-scale-base: 1.5;
  --logo-scale-active: var(--logo-scale-base);
  --logo-offset-y: 2px;
  transform: translateY(var(--logo-offset-y)) scale(var(--logo-scale-active)); /* iets naar beneden voor perfecte centrering */
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.45));
  transition: transform var(--hover-speed) var(--hover-bounce);
}

/* optioneel: klein hover-effect voor extra polish */
.logo img:hover {
  --logo-scale-active: calc(var(--logo-scale-base) + var(--hover-scale-bump));
}


.navbar{
  display:flex;
  align-items:center;
  justify-content:center;
}
.navbar li{ position:relative; }
.navbar a{
  font-size:1rem; padding:10px 20px; color:var(--text-muted); font-weight:500;
  transition: color .3s ease;
}
.navbar a::after{
  content:''; width:0; height:3px; background:var(--main-color);
  bottom:-4px; left:0; transition:.4s; position:absolute; border-radius:6px;
}
.navbar a:hover{ color:var(--text-color); }
.navbar a:hover::after{ width:100%; }
.navbar a.active,
.navbar a[aria-current="page"]{
  color: var(--text-color);
}
.navbar a.active::after,
.navbar a[aria-current="page"]::after{
  width:100%;
}
.navbar a.active.nav-link--suspended::after,
.navbar a[aria-current="page"].nav-link--suspended::after{
  width:0;
}

header .ri-close-line{ display:none; }
#menu-icon{
  --icon-rotation: 0deg;
  --icon-scale: 1;
  font-size:0;
  color: transparent;
  cursor:pointer;
  z-index:110;
  display:none;
  width:46px;
  height:46px;
  border:none;
  border-radius:1rem;
  background: rgba(23,27,34,0.95);
  position:relative;
  align-items:center;
  justify-content:center;
  box-shadow: none;
  transform-origin: center;
  transform: rotate(var(--icon-rotation)) scale(var(--icon-scale));
  transition-property: background, transform;
  transition-duration: .35s, .55s;
  transition-timing-function: ease, var(--menu-bounce);
  transition-delay: 0s, .12s;
}
#menu-icon:hover{
  
}
#menu-icon:active{
  --icon-scale: 0.95;
  transition-delay: 0s, 0s;
}
body.menu-open #menu-icon{
  
  --icon-rotation: 90deg;
  --icon-scale: 1;
}
#menu-icon .menu-icon__line{
  position:absolute;
  left:13px;
  right:13px;
  top:50%;
  height:3px;
  border-radius:999px;
  background: var(--text-color);
  --offset: 0px;
  --rotation: 0deg;
  transition:
    transform .45s var(--menu-bounce),
    opacity .3s ease;
  transform-origin: center;
  transform: translateY(var(--offset)) rotate(var(--rotation));
}
#menu-icon .menu-icon__line--top{ --offset: -9px; }
#menu-icon .menu-icon__line--middle{ --offset: 0px; }
#menu-icon .menu-icon__line--bottom{ --offset: 9px; }

#menu-icon.is-open .menu-icon__line--top,
body.menu-open #menu-icon .menu-icon__line--top{
  --offset: 0px;
  --rotation: 45deg;
}
#menu-icon.is-open .menu-icon__line--middle,
body.menu-open #menu-icon .menu-icon__line--middle{
  opacity:0;
  transform: scaleX(0.4);
}
#menu-icon.is-open .menu-icon__line--bottom,
body.menu-open #menu-icon .menu-icon__line--bottom{
  --offset: 0px;
  --rotation: -45deg;
}

.header-btn{
  display:flex;
  align-items:center;
  gap:0.75rem;
  position: relative;
  z-index: 1300;
}
.header-btn a{
  padding:10px 20px; color:var(--text-color); font-weight:600;
  border:1px solid transparent; border-radius:.6rem;
}
.header-btn .sign-in{
  background: var(--main-color); color:#111; border-color: transparent; transition:.25s;
}
.header-btn .sign-in:hover{ background:#E0BC55; }

/* ===== Hero (Home) ===== */
.home{
  width:100%; min-height:100vh; position:relative;
  /* GEEN gradient overlay meer, alleen de afbeelding */
  background: url('../images/herobanner.jpg');
  background-repeat:no-repeat; background-position:center right; background-size:cover;
  display:grid; align-items:center; grid-template-columns: repeat(2,1fr);
  padding: calc(var(--header-height) + 40px) var(--page-gutter) clamp(60px, 9vw, 140px);
}

.text h1{ font-size:3.5rem; letter-spacing:1px; line-height:1.1; }
/* Geen gradient text: gewoon goud */
.text span{ color: var(--main-color); }
.text p{ margin:.6rem 0 1rem; font-size:1rem; color:var(--text-muted); }

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.4rem;
  padding:12px 28px;
  border-radius:.8rem;
  background: var(--main-color);
  color:#111;
  font-weight:600;
  border:none;
  transition: transform var(--hover-speed) var(--hover-bounce), filter .25s ease;
}
.btn:hover{
  transform: scale(calc(1 + var(--hover-scale-bump)));
  filter: brightness(1.08);
}
.btn--ghost{
  background: rgba(255,255,255,.08);
  color: var(--text-color);
  border:none;
  border-radius:999px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  backdrop-filter: blur(6px);
}
.btn--ghost:hover{
  filter: brightness(1.15);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}

.app-stores{ display:flex; gap:12px; }
.app-stores img{
  width:100px;
  opacity:.85;
  transition: transform var(--hover-speed) var(--hover-bounce), opacity .25s ease;
}
.app-stores img:hover{
  opacity:1;
  transform: scale(calc(1 + var(--hover-scale-bump)));
}

.form-container form{
  display:flex; flex-wrap:wrap; align-items:center; gap:1rem;
  position:absolute; bottom:4rem; left:var(--page-gutter);
  background: var(--surface); padding:20px; border-radius:.75rem; box-shadow: var(--shadow);
  border:1px solid var(--border);
}
.form-container form .btn{
  flex:1 1 7rem; padding:10px 34px; border:none; border-radius:.6rem;
  background: var(--main-color); color:#111; font-size:1rem; font-weight:700; cursor:pointer;
  margin-top: 3.05%;
}
.form-container form .btn:hover{ filter: brightness(1.07); }
.input-box{ flex:1 1 7rem; display:flex; flex-direction:column; }
.input-box span{ font-weight:600; color:var(--text-muted); margin-bottom:.35rem; }
.input-box input{
  padding:10px 12px; outline:none; border:1px solid var(--border);
  background:#171C24; color:var(--text-color); border-radius:.6rem; font-size:1rem;
}

/* ===== Headings ===== */
.heading{ text-align:center; }
.heading span{ font-weight:700; text-transform:uppercase; letter-spacing:.08em; color:var(--second-color); }
.heading h1{ font-size:2rem; }

/* ===== Werkwijze (Ride) ===== */
.ride-container {
  display: grid;
  align-items: center;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  margin-top: 2rem;
}

.ride-container .box {
  text-align: center;
  padding: 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: var(--shadow);
  transition: transform .3s ease, box-shadow .3s ease;
}

.ride-container .box i {
  font-size: 34px;
  padding: 12px;
  background: #1F2530;
  border-radius: .6rem;
  color: var(--main-color);
  transition: background .3s ease, color .3s ease;
}

.ride-container .box h2 {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 1.1rem 0 .5rem;
}

.ride-container .box p {
  color: var(--text-muted);
}

/* Hover effect op de hele box */
.ride-container .box:hover {
  transform: scale(1.02);
}

/* Icon verandert mee bij hover */
.ride-container .box:hover i {
  background: var(--main-color);
  color: #12151B;
}

/* ===== Services / Projects ===== */
.services-container{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:1rem; margin-top:2rem;
}
.card-slider {
  position: relative;
}
.card-slider::before,
.card-slider::after {
  content: '';
  position: absolute;
  top: clamp(0px, 2vw, 32px);
  bottom: calc(3.5rem + 12px);
  width: clamp(24px, 10vw, 64px);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s ease;
  background: linear-gradient(90deg, rgba(18,21,27,0.95), rgba(18,21,27,0));
}
.card-slider::before { left: 0; }
.card-slider::after {
  right: 0;
  left: auto;
  background: linear-gradient(270deg, rgba(18,21,27,0.95), rgba(18,21,27,0));
}
.slider-progress {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: nowrap;
  gap: 0.45rem;
  margin: 1.25rem auto 0;
  width: 100%;
  position: relative;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.slider-progress::before {
  content: 'Swipe';
  opacity: 0.7;
}
.slider-progress::after {
  content: '→';
  margin-left: 0.25rem;
  opacity: 0.7;
}
.slider-progress__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.35);
  background: transparent;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  transition: transform .35s var(--hover-bounce), background .35s ease, border-color .35s ease, opacity .35s ease;
  opacity: .45;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.slider-progress__dot:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 3px;
}
.slider-progress__dot.is-active {
  background: var(--main-color);
  border-color: var(--main-color);
  opacity: 1;
  transform: scale(1.25);
  box-shadow: 0 0 12px rgba(212,175,55,.65);
}

@media (min-width: 769px) {
  .slider-progress {
    display: none;
  }
}
.services-container .box{
  display:flex;
  flex-direction:column;
  padding:10px;
  border-radius:1rem;
  background:var(--surface);
  box-shadow: var(--shadow);
  border:1px solid var(--border);
  transition: transform var(--hover-speed) var(--hover-bounce), box-shadow var(--hover-speed) ease;
}
/* laat de GPU helpen + zorg dat hover altijd wint als SR toch inline transform zet */
.services-container .box { will-change: transform, box-shadow; }
@media (hover: hover) and (pointer: fine) and (min-width: 769px) {
  .services-container .box:hover {
    transform: scale(calc(1 + var(--hover-scale-bump))) !important;
    box-shadow: 0 16px 40px rgba(0,0,0,.45);
  }
}
.services-container .box .box-img{ width:100%; height:200px; }
.services-container .box .box-img img{
  width:100%; height:100%; border-radius: .8rem; object-fit:cover; object-position:center;
  filter: saturate(1.05) contrast(1.02);
}
/* Service section visuals: slightly smaller, darker frames */
#services .services-container .box .box-img{
  height:180px;
  background:#0f141c;
  border-radius:.8rem;
  overflow:hidden;
  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}
#services .services-container .box .box-img img{
  border-radius:.6rem;
  object-fit:contain;
  filter: saturate(1.02) contrast(1.08) brightness(.72);
}

.services-container .box p{
  padding:0 10px; border:1px solid var(--border); color:var(--second-color);
  width:max-content; border-radius:.5rem; margin:1rem 0 1rem; background:#171C24;
  align-self:flex-start;
}
.services-container .box h3{ font-weight:600; }
.services-container .box h2{
  font-size:1.05rem; font-weight:600; color:var(--text-muted); margin:.25rem 0 .6rem;
}
.services-container .box h2 span{ font-size:.85rem; font-weight:500; color:var(--text-muted); }
.services-container .box .btn{
  display:flex;
  justify-content:center;
  background: var(--main-color);
  color:#111;
  padding:10px;
  border-radius:.6rem;
  transition:.25s;
  font-weight:700;
  margin-top:auto;
}
.services-container .box .btn:hover{ filter: brightness(1.07); }

/* ===== About ===== */
.about-container{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items:center;
  gap:2rem;
  margin-top:1.5rem;
}

.about-media{
  display:flex;
  justify-content:center;
}

.about-media img{
  width: min(100%, 520px);
  border-radius: 5rem;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.255);
}

.about-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:1rem;
  padding:2rem;
  box-shadow: var(--shadow);
  display:flex;
  flex-direction:column;
  gap:1rem;
}

.about-meta{
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.about-chip{
  padding:.4rem .9rem;
  border-radius:999px;
  border:1px solid rgba(212,175,55,.35);
  background:rgba(212,175,55,.08);
  color:var(--second-color);
  font-size:.8rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}

.about-card p{
  margin:0;
  color:var(--text-muted);
  line-height:1.7;
}

.about-card .btn{
  padding:12px 20px;
  background: var(--main-color);
  color:#12151B;
  border-radius:.7rem;
  font-weight:700;
  width:100%;
  text-align:center;
  transition:filter .25s ease, transform var(--hover-speed) var(--hover-bounce);
}

.about-card .btn:hover{
  filter:brightness(1.05);
  transform:scale(calc(1 + var(--hover-scale-bump)));
}

@media (max-width: 992px){
  .about-container{
    grid-template-columns:1fr;
  }
}

@media (max-width: 768px) {
  .about-container{
    gap:1.5rem;
  }

  .about-card{
    padding:1.75rem;
    text-align:center;
    align-items:center;
  }

  .about-meta{
    justify-content:center;
  }

  .about-card p{
    font-size:0.95rem;
  }

  .about-media img{
    max-width:360px;
    width:min(90vw,360px);
  }
}

/* ===== Reviews ===== */
.reviews-container{
  display:grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap:1rem; margin-top:2rem;
}
.reviews-container .box{
  display:flex; flex-direction:column; align-items:center; text-align:center; padding:20px;
  background: var(--surface); border:1px solid var(--border); border-radius:.8rem; box-shadow: var(--shadow);
}
.reviews-container .box h2{ font-size:1.05rem; font-weight:700; margin:.5rem 0 .5rem; }
.reviews-container .box p{ font-style: italic; color:var(--text-muted); }
.reviews-container .box i{ color:var(--main-color); }
.rev-img{ width:70px; height:70px; }
.rev-img img{
  width:100%; height:100%; border-radius:50%; object-fit:cover; object-position:center;
  border:2px solid var(--second-color);
}

/* ===== Contact / Newsletter (hernoemd) ===== */
.newsletter{
  background: var(--bg-800); display:flex; flex-direction:column; align-items:center;
  border-top:1px solid var(--border); border-bottom:1px solid var(--border);
}
.newsletter h2{ color:var(--text-color); font-size:1.8rem; }
.newsletter .box{
  margin-top:1rem; background: var(--surface); border:1px solid var(--border);
  border-radius:.6rem; padding:4px 8px; width:350px; display:flex; justify-content:space-between;
  box-shadow: var(--shadow);
}
.newsletter .box input{
  border:none; outline:none; background:transparent; color:var(--text-color);
}
.newsletter .box .btn{
  background: var(--main-color); color:#111; padding:8px 20px; border-radius:.5rem; font-weight:700;
}

.newsletter__intro{
  color: var(--text-muted);
  margin: .5rem auto 0;
  max-width: 720px;
  text-align: center;
}

.contact-details{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  padding: 36px 32px 32px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  width: calc(100% - clamp(20px, 5vw, 80px));
  max-width: min(860px, calc(100% - clamp(20px, 5vw, 80px)));
  margin: 3.5rem auto 2rem;
}

.contact-details__card h3{
  margin: 0 0 .35rem;
  font-size: 1.2rem;
}

.contact-details__card p{
  margin: 0 0 .35rem;
  color: var(--text-muted);
}

.contact-details__link{
  color: var(--main-color);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.contact-details__link i{
  font-size: 1.1rem;
}

.contact-details__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

.contact-details__list li{
  display: flex;
  gap: .65rem;
  line-height: 1.4;
}

.contact-details__list i{
  font-size: 1.25rem;
  color: var(--main-color);
  margin-top: .15rem;
}

.contact-details__list span{
  display: block;
  color: var(--text-muted);
  font-size: .9rem;
}

.contact-details__list a{
  color: var(--text-color);
  font-weight: 600;
}

.contact-details__hours{
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.contact-details__hours p{
  margin: 0 0 .6rem;
  font-weight: 600;
}

.contact-details__hours ul{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

.contact-details__hours li{
  display: flex;
  justify-content: space-between;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ===== Contact Form (3D toggle) ===== */
.newsletter .contact-form {
  margin: 1.5rem auto 0;
  width: 100%;
  max-width: 640px;
  perspective: 1200px;
  position: relative;
  min-height: 420px;
}

.contact-switch-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.newsletter .contact-form-inner {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 420px;
  transform-style: preserve-3d;
  transition: transform .85s cubic-bezier(.22, .74, .27, .99);
}

#contact-bedrijf:checked ~ .contact-form-inner {
  transform: rotateY(180deg);
}

.newsletter .contact-form .contact-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: 28px 24px;
  margin-bottom: -15px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .75rem;
  box-shadow: var(--shadow);
  backface-visibility: hidden;
  transform-style: preserve-3d;
  pointer-events: none;
  opacity: 0;
  transition: opacity .45s ease;
}

.newsletter .contact-form .contact-face--back {
  transform: rotateY(180deg);
}

#contact-particulier:checked ~ .contact-form-inner .contact-face--front,
#contact-bedrijf:checked ~ .contact-form-inner .contact-face--back {
  opacity: 1;
  pointer-events: auto;
}

.newsletter .contact-form .contact-toggle {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .35rem;
  background: #171C24;
  border: 1px solid var(--border);
  border-radius: .85rem;
  padding: .35rem;
  max-width: 360px;
  width: 100%;
  margin: 0 auto .5rem;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
}

.newsletter .contact-form .contact-toggle label {
  padding: 0.75rem 1rem;
  border-radius: .65rem;
  text-align: center;
  color: var(--text-muted);
  font-weight: 600;
  cursor: pointer;
  transition: all .35s ease;
  background: transparent;
  letter-spacing: .01em;
}

.newsletter .contact-form .contact-toggle label[aria-pressed="true"] {
  background: var(--main-color);
  color: #111;
  box-shadow: 0 12px 30px rgba(212, 175, 55, 0.28);
}

.newsletter .contact-form .contact-toggle label[aria-pressed="false"] {
  opacity: 0.75;
}

.newsletter .contact-form .contact-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.newsletter .contact-form .input-group {
  display: flex;
  flex-direction: column;
}

.newsletter .contact-form .input-group label {
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: .35rem;
}

.newsletter .contact-form .input-group input,
.newsletter .contact-form .input-group textarea {
  padding: 10px 12px;
  background: #171C24;
  border: 1px solid var(--border);
  border-radius: .6rem;
  font-size: 1rem;
  color: var(--text-color);
  resize: vertical;
}

.newsletter .contact-form .input-group textarea {
  min-height: 140px;
}

.newsletter .contact-form .btn {
  align-self: center;
  padding: 10px 30px 10px;
  background: var(--main-color);
  color: #111;
  border: none;
  border-radius: .6rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: filter .25s ease, transform var(--hover-speed) var(--hover-bounce);
}

.newsletter .contact-form .btn:hover {
  filter: brightness(1.17);
  transform: scale(calc(1 + var(--hover-scale-bump)));
}
/* ===== Footer ===== */
.footer {
  background: var(--bg-900);          /* zelfde als header achtergrond */
  color: var(--text-color);          /* lichte tekst */
  border-top: 2px solid var(--main-color);
  padding: clamp(40px,5vw,80px) var(--page-gutter);
}

.footer-container {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2rem;
}

.footer-container .logo {
  color: var(--main-color);
  font-weight: 700;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.footer-container .footer-box {
  display: flex;
  flex-direction: column;
}

.footer-box h3 {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--second-color);        /* zilver accent */
}

.footer-box a,
.footer-box p {
  color: var(--text-muted);          /* zachte grijze tekst */
  margin-bottom: 10px;
  transition: 0.3s;
  font-size: 0.95rem;
}

.footer-box a:hover {
  color: var(--main-color);          /* goud bij hover */
}

.social {
  display: flex;
  align-items: center;
  margin-top: 1rem;
}

.social a {
  font-size: 22px;
  color: var(--text-muted);
  margin-right: 1rem;
  transition: 0.3s;
}

.social a:hover {
  color: var(--main-color);
}

.copyright {
  padding: 20px var(--page-gutter);
  text-align: center;
  color: var(--text-muted);
  background: var(--bg-900);        /* donkerste grijs */
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
}

.copyright a {
  color: var(--second-color);
  transition: 0.3s;
}

.copyright a:hover {
  color: var(--main-color);
}

/* ===== Inner Pages ===== */
.page-hero {
  padding: var(--page-hero-pad-top) var(--page-gutter) var(--page-hero-pad-bottom);
  min-height: var(--page-hero-min-height);
  margin-bottom: var(--page-hero-gap);
  background: linear-gradient(135deg, rgba(23,27,34,0.95), rgba(18,21,27,0.88));
  text-align: center;
  border-bottom: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  isolation: isolate;
  border-radius: 0;
}

.page-hero .heading {
  max-width: 760px;
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.page-hero .heading span {
  letter-spacing: .12em;
}

.page-hero .heading h1 {
  margin-top: .8rem;
  font-size: 2.6rem;
}

.page-hero .heading p {
  margin-top: 1.2rem;
  color: var(--text-muted);
  font-size: 1.05rem;
  line-height: 1.75;
}

.legal-main{
  padding: 0 0 clamp(60px, 7vw, 140px);
}
.legal-main > :not(.page-hero){
  width: 100%;
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--page-gutter);
  padding-right: var(--page-gutter);
}

.page-hero + * {
  margin-top: 0;
}

/* Align the spacing after each hero with the reference Over ons layout */
.page-hero + section {
  padding-top: var(--hero-adjacent-pad-top);
}

/* Ensure older browsers without :is() keep the same hero spacing */
.page-hero + .detail-section,
.page-hero + .faq-section,
.page-hero + .gallery-section,
.page-hero + .story-section,
.page-hero + .team-section,
.page-hero + .map-section,
.page-hero + .b2b-intro,
.page-hero + .b2b-benefits,
.page-hero + .cta-section,
.page-hero + .contact-details,
.page-hero + .legal-highlight,
.page-hero + .legal-sections {
  margin-top: 0;
}

.page-hero__art {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.15;
  pointer-events: none;
  z-index: 0;
}

.page-hero__art svg {
  width: max(100%, 3600px);
  height: auto;
  filter: grayscale(1) contrast(0.85);
}

.scroll-cue {
  position: fixed;
  left: 50%;
  bottom: calc(clamp(6px, 2.2vh, 18px) + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0.3;
  z-index: 2;
  transform: translateX(-50%);
  transition: opacity 0.35s ease;
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.45));
}

.scroll-cue__icon {
  width: clamp(26px, 5.5vw, 40px);
  height: clamp(34px, 7.2vw, 54px);
  color: rgba(255,255,255,0.95);
  animation: scroll-cue-float 1.6s ease-in-out infinite;
}

@keyframes scroll-cue-float {
  0% {
    transform: translateY(-6px);
  }
  50% {
    transform: translateY(8px);
  }
  100% {
    transform: translateY(-6px);
  }
}

.back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 36px);
  bottom: calc(clamp(16px, 3vw, 36px) + env(safe-area-inset-bottom));
  width: clamp(44px, 6vw, 58px);
  height: clamp(44px, 6vw, 58px);
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.08);
  background: var(--bg-900, #12151B);
  color: var(--main-color, #D4AF37);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: var(--shadow, 0 10px 30px rgba(0,0,0,.35));
  cursor: pointer;
  overflow: visible;
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 1300;
}

.back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}

.back-to-top__progress {
  position: absolute;
  inset: -6px;
  width: calc(100% + 12px);
  height: calc(100% + 12px);
  transform: rotate(-90deg);
  pointer-events: none;
}

.back-to-top__track,
.back-to-top__ring {
  fill: none;
  stroke-width: 6;
}

.back-to-top__track {
  stroke: rgba(255,255,255,0.08);
}

.back-to-top__ring {
  stroke: var(--main-color, #D4AF37);
  stroke-linecap: round;
  stroke-dasharray: 0;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.2s linear;
}

.back-to-top__icon {
  width: 18px;
  height: 18px;
  color: var(--main-color, #D4AF37);
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .scroll-cue,
  .scroll-cue__icon {
    animation: none;
  }
}

.detail-section,
.faq-section,
.gallery-section,
.story-section,
.team-section,
.map-section,
.b2b-intro,
.b2b-benefits,
.cta-section {
  max-width: 1100px;
  margin: 0 auto;
}

.detail-section {
  display: grid;
  gap: 2.5rem;
}

.detail-card {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: center;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: var(--shadow);
  transition: transform var(--hover-speed) var(--hover-bounce), border-color .25s ease;
}

.detail-card:hover {
  transform: scale(calc(1 + var(--hover-scale-bump)));
  border-color: rgba(212,175,55,0.35);
}

.detail-card:nth-child(even) .detail-media {
  order: 2;
}

.detail-card:nth-child(even) .detail-text {
  order: 1;
}

.detail-media img {
  width: 100%;
  border-radius: .85rem;
  object-fit: cover;
  filter: saturate(1.05);
}

.detail-text h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.detail-text p {
  margin-bottom: 1.5rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.detail-text .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .4rem;
  padding: .85rem 1.8rem;
  background: var(--main-color);
  color: #111;
  font-weight: 600;
  border-radius: .6rem;
  box-shadow: var(--shadow);
  transition: transform var(--hover-speed) var(--hover-bounce), filter .2s ease;
}

.detail-text .btn:hover {
  transform: scale(calc(1 + var(--hover-scale-bump)));
  filter: brightness(1.05);
}

.faq-section {
  margin-top: 3rem;
}

.faq-list {
  display: grid;
  gap: 1.2rem;
}

.faq-list details {
  /* Container only; visual card styles are applied to summary */
  position: relative; /* enable overlay outline */
}

.faq-list details:hover summary {
  border-color: rgba(212,175,55,0.25);
}

.faq-list details[open] summary {
  border-color: transparent;
  border-top-color: rgba(212,175,55,0.45);
  /* keep header flush with body when open */
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

.faq-list summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1.25rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--text-color);
  font-size: 1.05rem;
  padding: 1.2rem 1.6rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: .9rem;
  box-shadow: var(--shadow);
  transition: border-color .2s ease, transform .2s ease;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary::after {
  content: '+';
  font-size: 1.2rem;
  color: var(--main-color);
  transition: transform .2s ease;
}

.faq-list details[open] summary::after {
  content: '-';
  transform: rotate(180deg);
}

.faq-list summary:focus {
  outline: none;
}

.faq-list summary:focus-visible {
  outline: 2px solid rgba(212,175,55,0.45);
  outline-offset: 4px;
}

.faq-list p {
  margin-top: .9rem;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Content panel under the clickable header */
.faq-list details > :not(summary) {
  padding: 1.2rem 1.6rem;
  border: 1px solid var(--border);
  border-bottom-left-radius: .9rem;
  border-bottom-right-radius: .9rem;
  background: var(--surface);
}

/* Remove unwanted gaps inside the answer panel */
.faq-list details > :not(summary) > *:first-child { margin-top: 0; }
.faq-list details > :not(summary) > *:last-child { margin-bottom: 0; }

/* Seamless join between header and body */
.faq-list details[open] summary {
  border-bottom-color: transparent; /* let body show its top border */
}
.faq-list details[open] > :not(summary) {
  margin-top: -1px; /* overlap to prevent hairline gaps from subpixel rounding */
  /* Keep the divider (top border) grey, but outline sides/bottom gold */
  border-top-color: var(--border);
  border-right-color: rgba(212,175,55,0.45);
  border-bottom-color: rgba(212,175,55,0.45);
  border-left-color: rgba(212,175,55,0.45);
}

/* Overlay outline to ensure gold sides/bottom sit above grey divider */
.faq-list details[open]::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 1px solid rgba(212,175,55,0.45);
  border-top-color: transparent; /* keep internal divider grey */
  border-radius: .9rem;
  pointer-events: none;
  z-index: 1;
}

.faq-list details[data-closing="1"] summary {
  border-bottom-left-radius: .9rem;
  border-bottom-right-radius: .9rem;
}

.gallery-section {
  margin-top: 3rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.8rem;
  grid-auto-flow: dense;
}

.gallery-item {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 1.8rem;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  transition: transform var(--hover-speed) var(--hover-bounce), border-color .25s ease;
}

.gallery-item:hover {
  transform: scale(calc(1 + var(--hover-scale-bump)));
  border-color: rgba(212,175,55,0.35);
}

.gallery-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.gallery-images figure {
  position: relative;
  border-radius: .75rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-800);
  aspect-ratio: 4 / 3;
}

.gallery-images img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), filter .45s cubic-bezier(.4, 0, .2, 1);
  filter: saturate(1.05) contrast(1.03);
}

.gallery-images img:hover {
  transform: scale(1.04);
  filter: saturate(1.1) contrast(1.05);
}

.gallery-images figcaption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: .35rem .75rem;
  font-size: .75rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--second-color);
  background: rgba(18,21,27,0.75);
}

.gallery-item--project {
  gap: 1.5rem;
  grid-column: span 3;
}

@media (max-width: 1200px) {
  .gallery-item--project {
    grid-column: span 2;
  }
}

@media (max-width: 768px) {
  .gallery-item--project {
    grid-column: span 1;
  }
}

.project-gallery {
  --pg-pad-inline: clamp(1rem, 2vw, 1.35rem);
  --pg-viewport-pad: clamp(0.35rem, 1vw, 0.6rem);
  position: relative;
  border: 1px solid var(--border);
  border-radius: 0.9rem;
  padding: var(--pg-pad-inline);
  padding-bottom: 2.75rem;
  background: var(--bg-800);
  overflow: hidden;
}

.project-gallery__viewport {
  position: relative;
  
  min-height: clamp(320px, 35vw, 560px);
  border-radius: 0.75rem;
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-900);
  padding: var(--pg-viewport-pad);
}

.project-gallery__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.45s cubic-bezier(.4, 0, .2, 1);
  border-radius: inherit;
}

.project-gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.project-gallery__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  cursor: zoom-in;
  filter: saturate(1.05) contrast(1.02);
}

.project-gallery__slide figcaption {
  position: absolute;
  left: var(--pg-viewport-pad);
  right: var(--pg-viewport-pad);
  bottom: var(--pg-viewport-pad);
  padding: 0.45rem 1rem;
  background: rgba(18,21,27,0.85);
  border-radius: 0.65rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--second-color);
  text-align: center;
}

.project-gallery__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(18,21,27,0.85);
  color: var(--text-color);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: transform var(--hover-speed) var(--hover-bounce), background 0.3s ease;
  z-index: 2;
}

.project-gallery__nav:hover {
  background: rgba(212,175,55,0.2);
  transform: translateY(-50%) scale(1.08);
}

.project-gallery__nav:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

.project-gallery__nav--prev {
  left: calc(var(--pg-pad-inline) + 0.35rem);
}

.project-gallery__nav--next {
  right: calc(var(--pg-pad-inline) + 0.35rem);
}

.project-gallery__dots {
  position: absolute;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 2;
}

.project-gallery__dot {
  width: 12px;
  height: 12px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.5);
  background: rgba(255,255,255,0.18);
  cursor: pointer;
  padding: 0;
  transition: transform 0.3s ease, background 0.3s ease;
}

.project-gallery__dot.is-active {
  background: var(--main-color);
  border-color: var(--main-color);
  transform: scale(1.1);
}

.project-gallery__dot:focus-visible {
  outline: 2px solid var(--main-color);
  outline-offset: 2px;
}

@media (max-width: 576px) {
  .project-gallery__nav {
    width: 38px;
    height: 38px;
  }
}

.gallery-item h2 {
  font-size: 1.35rem;
  color: var(--text-color);
}

.gallery-item p {
  color: var(--text-muted);
  line-height: 1.65;
}

.gallery-item strong {
  color: var(--second-color);
  font-weight: 600;
}

.story-section {
  margin-top: 3rem;
}

.story-content {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 1.25rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.story-content p {
  margin: 0;
}

.team-section {
  margin-top: 3.5rem;
}

.team-section .heading h2 {
  font-size: 2rem;
}

.team-grid {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.team-member {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2rem 1.5rem;
  text-align: center;
  box-shadow: var(--shadow);
  transition: transform var(--hover-speed) var(--hover-bounce), border-color .25s ease;
}

.team-member:hover {
  transform: scale(calc(1 + var(--hover-scale-bump)));
  border-color: rgba(212,175,55,0.35);
}

.team-member img {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  border: 3px solid var(--border);
  object-fit: cover;
  margin: 0 auto 1rem;
}

.team-member h3 {
  font-size: 1.2rem;
  margin-bottom: .5rem;
  color: var(--text-color);
}

.team-member p {
  font-size: .95rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.map-section {
  margin-top: 3.5rem;
}

.map-wrapper {
  margin-top: 2rem;
  border: 1px solid var(--border);
  border-radius: 1rem;
  overflow: hidden;
  box-shadow: var(--shadow);
}

.map-wrapper iframe {
  display: block;
  width: 100%;
  filter: grayscale(.1);
}

.b2b-intro {
  margin-top: 3rem;
}

.b2b-text {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.5rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 1.25rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.b2b-benefits {
  margin-top: 3rem;
}

.b2b-benefits .heading {
  margin-bottom: 2rem;
}

.b2b-list {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 2.3rem 2.6rem;
  box-shadow: var(--shadow);
  display: grid;
  gap: 1rem;
}

.b2b-list li {
  position: relative;
  padding-left: 1.8rem;
  color: var(--text-muted);
  line-height: 1.7;
}

.b2b-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: .65rem;
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  background: var(--main-color);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.18);
}

.cta-section {
  margin-top: 4rem;
  margin-bottom: 2rem;
}

.cta-box {
  background: radial-gradient(circle at top left, rgba(212,175,55,0.15), transparent 55%), var(--surface);
  border: 1px solid var(--border);
  border-radius: 1rem;
  padding: 3rem;
  text-align: center;
  box-shadow: var(--shadow);
}

.cta-box h2 {
  font-size: 2rem;
  margin-bottom: 1rem;
  color: var(--text-color);
}

.cta-box p {
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.cta-box .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .9rem 2.2rem;
  background: var(--main-color);
  color: #111;
  font-weight: 700;
  border-radius: .65rem;
  box-shadow: var(--shadow);
  transition: transform var(--hover-speed) var(--hover-bounce), filter .2s ease;
}

.cta-box .btn:hover {
  transform: scale(calc(1 + var(--hover-scale-bump)));
  filter: brightness(1.05);
}

/* ===== Responsive ===== */
@media (max-width: 1200px) {
  :root {
    --page-hero-pad-top: calc(var(--header-height) + 32px);
    --page-hero-pad-bottom: clamp(28px, 5vw, 56px);
    --page-hero-gap: clamp(32px, 6vw, 70px);
    --page-hero-min-height: clamp(260px, 42vh, 380px);
  }

  header {
    padding: 15px 60px;
  }

  section {
    padding: 50px 60px;
  }

  .page-hero + section {
    padding-top: var(--hero-adjacent-pad-top);
  }

  .footer {
    padding: 40px 60px;
  }
}

@media (max-width: 992px) {
  :root {
    --page-hero-pad-top: calc(var(--header-height) + 26px);
    --page-hero-pad-bottom: clamp(24px, 6vw, 48px);
    --page-hero-gap: clamp(28px, 7vw, 60px);
    --page-hero-min-height: clamp(240px, 40vh, 340px);
  }

  header {
    padding: 15px 40px;
  }

  section {
    padding: 45px 40px;
  }

  .page-hero + section {
    padding-top: var(--hero-adjacent-pad-top);
  }

  .home {
    grid-template-columns: 1fr;
    padding: 140px 40px 90px;
    row-gap: 2.5rem;
    background-position: center;
  }

  .text {
    max-width: 540px;
  }

  .text h1 {
    font-size: 3rem;
  }

  .text p {
    font-size: 1rem;
  }

  .app-stores {
    justify-content: flex-start;
  }

  .form-container {
    position: static;
  }

  .form-container form {
    position: static;
    width: 100%;
    margin-top: 1.5rem;
    border-radius: 1rem;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  }

  .form-container form .btn {
    margin-top: 0;
    width: 100%;
  }

  .about-container,
  .services-container,
  .ride-container,
  .reviews-container {
    gap: 1.25rem;
  }

  .detail-card {
    grid-template-columns: 1fr;
  }

  .detail-card:nth-child(even) .detail-media {
    order: 0;
  }

  .detail-media img {
    width: 100%;
  }

  .footer {
    padding: 40px 40px;
  }
}

@media (max-width: 768px) {
  :root {
    --page-hero-pad-top: calc(var(--header-height) + 20px);
    --page-hero-pad-bottom: clamp(20px, 7vw, 40px);
    --page-hero-gap: clamp(24px, 7vw, 50px);
    --page-hero-min-height: clamp(220px, 38vh, 300px);
  }

  header {
    padding: 12px 20px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    row-gap: 0;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45);
  }

  header .logo {
    z-index: 200;
    grid-column: 2 / 3;
    justify-self: center;
  }

  #menu-icon {
    display: inline-flex;
    margin-left: 0;
    grid-column: 3 / 4;
    justify-self: end;
    align-self: center;
  }

  .navbar,
  .header-btn {
    grid-column: 1 / -1;
  }

  section {
    padding: 40px 20px;
  }

  .page-hero + section {
    padding-top: var(--hero-adjacent-pad-top);
  }

  .home {
    padding: 120px 20px 70px;
  }

  .text h1 {
    font-size: 2.4rem;
  }

  .text p {
    font-size: 0.95rem;
  }

  .app-stores {
    justify-content: flex-start;
  }

  .form-container form {
    display: grid;
    grid-template-columns: 1fr;
    padding: 1.5rem;
  }

  .form-container form .btn {
    padding: 0.85rem 1.5rem;
  }

  .navbar {
    order: 3;
    width: 100%;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    margin-top: 0;
    overflow: hidden;
    max-height: 0;
    transition:
      max-height .65s var(--menu-bounce),
      transform .65s var(--menu-bounce),
      opacity .45s ease,
      margin-top .65s var(--menu-bounce);
    box-shadow: var(--shadow);
    position: relative;
    transform: translateY(-16px);
    opacity: 0;
    pointer-events: none;
  }

  .navbar li {
    width: 100%;
  }

  .navbar a {
    display: block;
    width: 100%;
    padding: 0.9rem 1.25rem;
    color: var(--text-color);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  }

  .navbar li:last-child a {
    border-bottom: none;
  }

  .navbar a:hover {
    background: rgba(255, 255, 255, 0.06);
  }

  .navbar::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--border);
    opacity: 0;
    transition: opacity .3s ease;
  }

  .navbar.active::after {
    opacity: 1;
  }

  .navbar.active {
    margin-top: 0.85rem;
    max-height: 600px;
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .header-btn {
    order: 4;
    width: 100%;
    display: grid;
    gap: 0.75rem;
    overflow: hidden;
    max-height: 0;
    transition:
      max-height .65s var(--menu-bounce),
      transform .65s var(--menu-bounce),
      opacity .45s ease;
    transform: translateY(-18px);
    opacity: 0;
    pointer-events: none;
  }

  .header-btn a {
    width: 100%;
    text-align: center;
  }

  body.menu-open header .header-btn {
    margin-top: 0.9rem;
    max-height: 220px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.85rem;
    padding: 1rem 1.25rem;
    box-shadow: var(--shadow);
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  body.menu-open header .header-btn .sign-up {
    background: transparent;
    border-color: var(--border);
  }

  body.menu-open header .header-btn .sign-in {
    width: 100%;
  }

  body.menu-open {
    overflow-y: auto;
  }

  .ride-container,
  .services-container,
  .about-container,
  .reviews-container,
  .team-grid,
  .story-content,
  .b2b-text,
  .b2b-list {
    gap: 1.25rem;
  }

  .newsletter .contact-form {
    /* On small screens ensure the contact card does not exceed the viewport width. */
    min-height: 460px;
    max-width: 100%;
  }

  .newsletter .contact-form-inner {
    min-height: 460px;
  }

  .newsletter .contact-form .contact-face {
    padding: 28px 20px;
  }

  .newsletter .contact-form .contact-toggle {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  .footer {
    padding: 40px 20px;
  }

  .footer-container {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.25rem;
  }
}

@media (max-width: 576px) {
  .text h1 {
    font-size: 2.1rem;
  }

  .home {
    padding: 110px 18px 65px;
  }

  .form-container form {
    padding: 1.3rem;
  }

  .page-hero .heading h1 {
    font-size: 2.2rem;
  }

  .page-hero .heading p {
    font-size: 0.95rem;
  }

  .detail-card {
    padding: 1.8rem;
  }

  .detail-text h2 {
    font-size: 1.6rem;
  }

  .reviews-container .box {
    padding: 1.5rem;
  }

  .newsletter h2 {
    font-size: 1.8rem;
  }
}

/* ===== BEFORE/AFTER - ProCarBody stijl ===== */
.gallery-section .ba-row{
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  position: relative;
}
/* gouden middenlijn voor 2-sliders rij */
.gallery-section .ba-row.ba-single{
  grid-template-columns: 1fr;
}
.gallery-section .ba-row.ba-single::after{ display:none; }

.gallery-section .ba-panel{
  display: flex;
  flex-direction: column;
  gap: 0;
}
.gallery-section .ba-copy{
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 0 0 1rem 1rem;
  padding: 1.2rem 1.4rem;
  box-shadow: var(--shadow);
  color: var(--text-muted);
  line-height: 1.6;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: -1px; /* overlap border so it touches the slider */
}
.gallery-section .ba-copy h3{
  font-size: 1.2rem;
  color: var(--text-color);
  margin: 0;
}
.gallery-section .ba-copy p{
  margin: 0;
}

.gallery-section .before-after{
  --pos:50%;
  position:relative;
  aspect-ratio:16/9;
  border-radius:1rem 1rem 0 0;
  overflow:hidden;
  background: var(--bg-800);
  border:1px solid var(--border);
  box-shadow: var(--shadow);
  isolation:isolate;
}
.gallery-section .before-after img{
  position:absolute; inset:0;
  width:100%; height:100%;
  object-fit:cover;
  user-select:none; pointer-events:none;
  image-rendering:-webkit-optimize-contrast;
  image-rendering:optimizeQuality;
  filter:saturate(.98) contrast(.98);
  transform:translateZ(0);
}
.gallery-section .before-after .ba-after{ z-index:0; }
.gallery-section .before-after .ba-before{
  z-index:1;
  clip-path: inset(0 calc(100% - var(--pos)) 0 0);
  will-change: clip-path;
}

/* meelopende verticale lijn */
.gallery-section .before-after::before{
  content:'';
  position:absolute; top:0; bottom:0;
  left: var(--pos);
  width:2px;
  background: rgba(255,255,255,.65);
  box-shadow: 0 0 0 1px rgba(0,0,0,.28);
  z-index:2; pointer-events:none;
  will-change: left;
}

/* ronde knop met ⇆ */
.gallery-section .before-after::after{
  content:'⇆';
  position:absolute; left: var(--pos); top:50%;
  transform: translate(-50%,-50%);
  width:40px; height:40px; border-radius:999px;
  display:grid; place-items:center;
  font-size:18px; line-height:1;
  background: rgba(18,21,27,.92);
  color: var(--text-color);
  border:2px solid var(--border);
  box-shadow: 0 6px 18px rgba(0,0,0,.35), 0 0 0 2px rgba(212,175,55,.22) inset;
  z-index:3; pointer-events:none;
  will-change: left;
}

/* labels */
.gallery-section .ba-label{
  position:absolute; top:.65rem; z-index:4;
  font-size:.75rem; letter-spacing:.08em;
  text-transform:uppercase;
  color: var(--second-color);
  background: rgba(18,21,27,.78);
  border:1px solid var(--border);
  padding:.32rem .6rem; border-radius:.5rem;
  box-shadow: var(--shadow);
}
.gallery-section .ba-label--left{ left:.65rem; }
.gallery-section .ba-label--right{ right:.65rem; }

/* onzichtbare range die wel overal slepen/klikken vangt */
.gallery-section .ba-range{
  position:absolute; inset:0;
  width:100%; height:100%;
  appearance:none; -webkit-appearance:none;
  background:transparent; outline:none;
  cursor: ew-resize;
  opacity:0; /* we tonen onze eigen knob */
  z-index:5;
}

/* responsive */
@media (max-width: 992px){
  .gallery-section .ba-row{ grid-template-columns:1fr; }
  .gallery-section .ba-row::after{ display:none; }
}

.gallery-lightbox{
  position: fixed;
  inset: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(1.5rem, 4vw, 4rem);
  background: rgba(3,5,10,.8);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .45s cubic-bezier(.4,0,.2,1);
  z-index: 999;
}
.gallery-lightbox.is-visible{
  opacity: 1;
  pointer-events: auto;
}
.gallery-lightbox img{
  max-width: min(90vw, 1200px);
  max-height: 85vh;
  border-radius: 1.25rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
  transform: scale(.94);
  transition: transform .5s cubic-bezier(.4,0,.2,1);
}
.gallery-lightbox.is-visible img{
  transform: scale(1);
}
.gallery-lightbox__close{
  position: absolute;
  top: clamp(1rem, 2vw, 2rem);
  right: clamp(1rem, 2vw, 2rem);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: rgba(18,21,27,.9);
  color: var(--text-color);
  font-size: 1.5rem;
  cursor: pointer;
  transition: transform .35s cubic-bezier(.4,0,.2,1), background .35s cubic-bezier(.4,0,.2,1);
}
.gallery-lightbox__close:hover{
  background: rgba(212,175,55,.2);
  transform: scale(1.08);
}
body.lightbox-open{
  overflow: hidden;
}