/* =========================================================
   MyTelecom — shared stylesheet
   Premium navy / gold theme
   ========================================================= */

/* Lettertypen worden in includes/header.php geladen via <link rel="preconnect"> + <link>.
   Een @import hier zou het laden vertragen: de browser ontdekt de fonts dan pas
   nadat deze stylesheet volledig is opgehaald en geparsed. */

:root {
  --navy-950: #050a17;
  --navy-900: #0a1330;
  --navy-800: #101c40;
  --navy-700: #172a54;
  --navy-600: #1f3a70;
  --gold: #f2b134;
  --gold-2: #ffd873;
  --gold-ink: #a9700f;
  --blue: #0e6fb4;
  --blue-dark: #0a4d80;
  --blue-light: #e8f3fb;
  --red: #db4a42;
  --ink: #0c1220;
  --ink-soft: #3d4453;
  --paper: #ffffff;
  --mist: #f4f6fa;
  --line: #e6e9f0;
  --radius: 18px;
  --shadow: 0 20px 45px -18px rgba(5, 10, 23, 0.28);
  --shadow-sm: 0 8px 20px -10px rgba(5, 10, 23, 0.2);
  --shadow-lg: 0 40px 80px -25px rgba(5, 10, 23, 0.5);
  --heading-font: 'Poppins', 'Segoe UI', sans-serif;
  --body-font: 'Inter', 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--body-font);
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
/* height:auto is nodig omdat de img-tags een width/height-attribuut hebben (tegen
   layout shift). Zonder deze regel zou dat attribuut de werkelijke hoogte bepalen
   en worden de afbeeldingen uitgerekt. */
img {
  max-width: 100%;
  height: auto;
  display: block;
  /* Afbeeldingen niet naar het bureaublad of een ander tabblad te slepen,
     en niet mee te selecteren met de tekst eromheen. */
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none; /* iOS: geen 'Bewaar afbeelding'-menu bij lang indrukken */
}
/* <picture> mag geen eigen box vormen, anders erven de img-regels hieronder niet door */
picture { display: contents; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 {
  font-family: var(--heading-font);
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .5em;
  color: var(--ink);
}
p { margin: 0 0 1em; color: var(--ink-soft); font-size: 1rem; }
.container {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
}
section { padding: 96px 0; }
.section-tight { padding: 56px 0; }
.text-gold { color: var(--gold-ink); }
.bg-dark .text-gold, .bg-blue .text-gold { color: var(--gold); }

.bg-mist {
  background-color: var(--mist);
  background-image: radial-gradient(rgba(16,28,64,.08) 1.4px, transparent 1.4px);
  background-size: 22px 22px;
}

/* ---------- Premium dark surface ---------- */
.bg-dark {
  position: relative;
  background:
    radial-gradient(1100px 560px at 88% -12%, rgba(242, 177, 52, .16), transparent 60%),
    radial-gradient(900px 520px at -10% 115%, rgba(14, 111, 180, .3), transparent 60%),
    linear-gradient(160deg, var(--navy-950) 0%, var(--navy-900) 45%, var(--navy-800) 100%);
  color: #fff;
  isolation: isolate;
}
.bg-dark::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.09) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 60% at 60% 20%, #000 40%, transparent 90%);
  z-index: -1;
  opacity: .6;
}
.bg-dark p, .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-ink);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: '';
  width: 26px;
  height: 3px;
  border-radius: 3px;
  background: var(--gold-ink);
  display: inline-block;
}
.bg-dark .eyebrow, .bg-blue .eyebrow { color: var(--gold); }
.bg-dark .eyebrow::before, .bg-blue .eyebrow::before { background: var(--gold); }

h1 { font-size: clamp(2.3rem, 4.6vw, 3.75rem); font-weight: 800; }
h2 { font-size: clamp(1.8rem, 3.2vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.2rem; font-weight: 600; }

.section-head { max-width: 820px; margin-bottom: 48px; }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.section-head p { font-size: 1.05rem; }
.section-head-wide { max-width: 1132px; }
/* Meeschalen met het scherm. Een vaste 2.4rem leverde op een telefoon een
   kop van 7 regels op. */
.section-head-wide h2 { font-size: clamp(1.7rem, 5.5vw, 2.4rem); }
.section-head-wide p { max-width: 820px; margin-left: auto; margin-right: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 15px 28px;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary {
  background: linear-gradient(135deg, var(--gold-2) 0%, var(--gold) 55%, #d99a1e 100%);
  color: var(--navy-950);
  box-shadow: 0 14px 28px -10px rgba(242, 177, 52, .55);
}
.btn-primary:hover { box-shadow: 0 18px 32px -8px rgba(242, 177, 52, .7); }
.btn-outline { border-color: rgba(255,255,255,.4); color: #fff; }
.btn-outline:hover { background: rgba(242,177,52,.12); border-color: var(--gold); }
.btn-dark-outline { border-color: var(--ink); color: var(--ink); }
.btn-dark-outline:hover { background: var(--ink); color: #fff; }
.btn-blue { background: linear-gradient(135deg, var(--navy-700), var(--navy-900)); color: #fff; box-shadow: 0 10px 24px -8px rgba(10,19,48,.5); }
.btn-blue:hover { background: var(--navy-900); }
.btn-white { background: #fff; border-color: var(--line); color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-white:hover { border-color: var(--gold); color: var(--gold-ink); }
.btn-block { width: 100%; }
.btn-sm { padding: 10px 18px; font-size: .85rem; }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-950);
  color: #c3cbdb;
  font-size: 0.82rem;
}
.topbar .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 8px;
  padding-bottom: 8px;
  gap: 16px;
  flex-wrap: wrap;
}
.topbar a { color: #c3cbdb; transition: color .15s; }
.topbar a:hover { color: var(--gold); }
.topbar-left { display: flex; gap: 22px; flex-wrap: wrap; }
.topbar-left span { display: inline-flex; align-items: center; gap: 6px; }
.open-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-weight: 600;
  font-size: .78rem;
  color: var(--ink);
  background: #fff;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  line-height: 1.3;
}
.open-status-lg {
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 22px 12px 18px;
  box-shadow: var(--shadow-sm);
}
.open-status-lg .open-dot { width: 11px; height: 11px; }
.open-dot {
  display: inline-block;
  width: 7px; height: 7px;
  flex: none;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .6);
  animation: pulse-dot 2s infinite;
}
@keyframes pulse-dot {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}
.topbar-social { display: flex; gap: 12px; }
.topbar-social a {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: .75rem;
  transition: background .15s, color .15s;
}
.topbar-social a:hover { background: var(--gold); color: var(--navy-950); }

/* ---------- Header / nav ---------- */
header.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.nav-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 0;
  gap: 20px;
}
.brand { display: flex; align-items: center; gap: 10px; }
.brand img { height: 40px; width: auto; }
nav.main-nav ul { display: flex; gap: 34px; align-items: center; }
nav.main-nav a {
  font-family: var(--heading-font);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
}
nav.main-nav a::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--gold);
  transition: width .2s ease;
}
nav.main-nav a:hover::after,
nav.main-nav a.active::after { width: 100%; }
nav.main-nav a.active { color: var(--gold-ink); }

li.has-dropdown { position: relative; }
.nav-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 8px;
  min-width: 160px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 10;
}
li.has-dropdown:hover .nav-dropdown,
li.has-dropdown:focus-within .nav-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-dropdown a {
  display: block;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: .9rem;
}
.nav-dropdown a::after { display: none; }
.nav-dropdown a:hover { background: var(--mist); color: var(--gold-ink); }
.nav-cta { display: flex; align-items: center; gap: 14px; }
.nav-phone {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--navy-800);
}
.nav-whatsapp {
  width: 38px; height: 38px;
  flex: none;
  border-radius: 50%;
  background: #25d366;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  box-shadow: 0 8px 18px -8px rgba(37, 211, 102, .55);
  transition: transform .18s ease, box-shadow .18s ease;
}
.nav-whatsapp:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -8px rgba(37, 211, 102, .7); }
.whatsapp-icon { position: relative; top: 0; }
.nav-whatsapp .whatsapp-icon { width: 19px; height: 19px; }
.topbar-social .whatsapp-icon { width: 15px; height: 15px; }
.footer-social .whatsapp-icon { width: 17px; height: 17px; }
.nav-phone .ico-circle {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-950) 100%);
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-size: 1rem;
  box-shadow: 0 8px 18px -8px rgba(5, 10, 23, .6);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-toggle span { width: 24px; height: 2.5px; background: var(--ink); border-radius: 2px; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  overflow: hidden;
  padding: 70px 0 110px;
}
.hero .container {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  column-gap: 40px;
  row-gap: 0;
  align-items: center;
  position: relative;
  z-index: 1;
}
.hero-badges {
  display: flex;
  gap: 12px;
  margin-top: 30px;
  flex-wrap: wrap;
}
.hero-badges-full {
  grid-column: 1 / -1;
  margin-top: 12px;
}
.hero-badge {
  display: flex;
  align-items: center;
  gap: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.16);
  padding: 10px 18px;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--heading-font);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}
.hero-badge .icon-svg { width: 17px; height: 17px; color: var(--gold); }

.trust-badge {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin-top: 22px;
  padding: 14px 20px;
  border: 1.5px solid var(--gold);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(242,177,52,.14), rgba(242,177,52,.04));
}
.trust-badge-ico {
  flex: none;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
}
.trust-badge-ico svg { width: 22px; height: 22px; }
.trust-badge strong { display: block; font-family: var(--heading-font); font-size: 1rem; color: #fff; letter-spacing: .01em; }
.trust-badge span { display: block; font-size: .82rem; color: rgba(255,255,255,.65); margin-top: 2px; }
.hero-actions { display: flex; gap: 16px; margin-top: 34px; flex-wrap: wrap; }

.hero-trust { display: flex; align-items: center; gap: 14px; margin-top: 34px; }
.hero-trust .stars { font-size: 1rem; }
.hero-trust small { color: rgba(255,255,255,.65); font-size: .82rem; display: block; }

.hero-visual { position: relative; display: flex; align-items: center; justify-content: center; }
.hero-illustration {
  width: 100%;
  max-width: 560px;
  filter: drop-shadow(0 35px 55px rgba(0,0,0,.5));
  animation: float-y 6s ease-in-out infinite;
}
@keyframes float-y {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}
.glass-badge {
  position: absolute;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(14px);
  border-radius: 16px;
  padding: 16px 20px;
  box-shadow: var(--shadow-lg);
  color: #fff;
}
.glass-badge.top { top: 6%; left: -4%; display: flex; align-items: center; gap: 10px; font-size: .8rem; font-weight: 600; font-family: var(--heading-font); }
.glass-badge.top .icon-svg { color: var(--gold); width: 18px; height: 18px; }
/* De openingsstatus staat twee keer in de opmaak: één keer over de afbeelding
   (desktop) en één keer onder de knoppen (telefoon). Er is er altijd precies
   één zichtbaar. Reden: op desktop hangt de badge absoluut boven de
   afbeelding in de rechterkolom, op mobiel hoort hij in de tekstkolom —
   twee verschillende ouders, dus met CSS alleen niet te verplaatsen. */
.hero-open-badge-inline { display: none; }

.hero-open-badge {
  position: absolute;
  top: 6%;
  left: -4%;
  box-shadow: var(--shadow-lg);
  padding: 15px 28px 15px 22px;
  font-size: 0.95rem;
  font-weight: 700;
  gap: 10px;
}
.hero-open-badge .open-dot { width: 10px; height: 10px; }
.glass-badge.bottom {
  bottom: 4%;
  right: -2%;
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: none;
  color: var(--ink);
}
.glass-badge.bottom strong { font-family: var(--heading-font); font-size: 1.5rem; color: var(--ink); display: block; line-height: 1; }
.glass-badge.bottom span { font-size: .78rem; color: var(--ink-soft); }
.glass-badge.bottom .stars { color: var(--gold-ink); }

.rating-badges {
  position: absolute;
  bottom: 4%;
  right: -2%;
  display: flex;
  gap: 14px;
}
.rating-pill {
  position: static;
  background: #fff;
  color: var(--ink);
  border: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
}
.rating-pill span { font-size: .78rem; color: var(--ink-soft); }
.rating-pill .stars { color: var(--gold); }

.hero-decor { position: absolute; border-radius: 50%; opacity: .55; pointer-events: none; }
.hero-decor.d1 { width: 420px; height: 420px; background: radial-gradient(circle, rgba(242,177,52,.25), transparent 70%); top: -160px; right: -140px; }
.hero-decor.d2 { width: 360px; height: 360px; background: radial-gradient(circle, rgba(14,111,180,.3), transparent 70%); bottom: -180px; left: 20%; }

/* ---------- Bento USP grid ---------- */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 22px;
}
.bento-feature {
  grid-column: span 3;
  position: relative;
  border-radius: var(--radius);
  padding: 34px;
  color: #fff;
  background:
    radial-gradient(600px 300px at 100% 0%, rgba(242,177,52,.22), transparent 60%),
    linear-gradient(150deg, var(--navy-900), var(--navy-700));
  display: flex;
  align-items: center;
  gap: 24px;
  overflow: hidden;
  box-shadow: var(--shadow);
}
.bento-feature .stat-num {
  font-family: var(--heading-font);
  font-size: 2.8rem;
  font-weight: 800;
  color: var(--gold);
  line-height: 1;
  flex: none;
}
.bento-feature h4 { color: #fff; margin-bottom: 6px; font-size: 1.05rem; }
.bento-feature p { color: rgba(255,255,255,.75); margin: 0 0 12px; font-size: .9rem; }
.wait-note {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--gold);
}
.wait-note .icon-svg { width: 16px; height: 16px; }
.bento-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bento-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-sm); }
.bento-item .ico {
  width: 50px; height: 50px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
}
.bento-item h4 { font-size: .98rem; margin: 0 0 2px; }
.bento-item p { font-size: 1rem; margin: 0; }

/* ---------- Icon chips (shared) ---------- */
.ico {
  background: linear-gradient(135deg, var(--navy-700) 0%, var(--navy-950) 100%);
  color: var(--gold);
  box-shadow: 0 12px 24px -10px rgba(5, 10, 23, .55);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

/* ---------- Brand marquee ---------- */
.marquee {
  overflow: hidden;
  position: relative;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  padding: 6px 0 18px;
}
.marquee-track {
  display: flex;
  align-items: center;
  gap: 40px;
  width: max-content;
  animation: scroll-x 34s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.brand-tile {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px 14px;
  border-radius: 16px;
  transition: background .25s ease, transform .25s ease;
}
.brand-tile:hover { background: rgba(16,28,64,.05); transform: scale(1.06); }
.brand-tile img {
  max-height: 88px; max-width: 220px; height: auto; width: auto; object-fit: contain;
  filter: grayscale(100%);
  opacity: .65;
  transition: filter .3s ease-in-out, opacity .3s ease-in-out;
}
.brand-tile:hover img { filter: none; opacity: 1; }
@keyframes scroll-x {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ---------- Full-bleed photo banner ---------- */
.photo-banner {
  position: relative;
  min-height: 560px;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 90px 0;
}
.photo-banner-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.photo-banner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(5,10,22,.96) 0%, rgba(6,12,28,.92) 42%, rgba(6,12,28,.62) 68%, rgba(6,12,28,.22) 100%);
}
.photo-banner-content {
  position: relative;
  z-index: 1;
  max-width: 540px;
  color: #fff;
  background: rgba(10, 19, 48, .82);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 24px;
  padding: 40px 44px;
  box-shadow: var(--shadow-lg);
}
.photo-banner-content h2 { color: #fff; }
.photo-banner-content p { color: rgba(255,255,255,.78); }
.photo-banner-content .eyebrow { color: var(--gold); }
.photo-banner-content .eyebrow::before { background: var(--gold); }
.photo-banner-content .check-list li { color: #fff; }
.photo-banner-content .check-list .tick { background: linear-gradient(135deg, var(--gold-2), var(--gold)); color: var(--navy-950); }
.photo-banner-stats { display: flex; gap: 34px; margin-top: 32px; }
.photo-banner-stats strong { font-family: var(--heading-font); font-size: 1.9rem; color: var(--gold); display: block; line-height: 1; }
.photo-banner-stats span { font-size: .8rem; color: rgba(255,255,255,.7); }

/* ---------- About split ---------- */
.split {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 60px;
  align-items: center;
}
.split.reverse { grid-template-columns: 1.1fr 0.9fr; }
.split.align-top { align-items: flex-start; }

/* ---------- Zakelijk hero: full-bleed image right ---------- */
.zakelijk-hero {
  display: grid;
  grid-template-columns: minmax(0, 560px) 1fr;
  align-items: start;
  gap: 40px;
}
.zakelijk-hero-text {
  padding-left: max(24px, calc((100vw - 1180px) / 2 + 24px));
  padding-right: 24px;
}
.zakelijk-hero-media img {
  width: 100%;
  height: auto;
  display: block;
}
@media (max-width: 1024px) {
  /* minmax(0, 1fr) in plaats van 1fr: een grid-item mag standaard niet smaller
     worden dan zijn inhoud, waardoor de kolom hier 448px werd binnen een scherm
     van 390px en de hele hero buiten beeld viel. */
  .zakelijk-hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .zakelijk-hero-text { padding-left: 24px; }
  .zakelijk-hero-media { order: -1; padding: 0 24px; }
}
.split.reverse .split-media { order: 2; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.split-media { position: relative; }
.check-list { margin-top: 22px; display: grid; gap: 14px; }
.check-list li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.check-list .tick {
  flex: none;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-950));
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 1px;
}

.legal-content h2 { margin-top: 2em; font-size: 1.4rem; }
.legal-content h2:first-of-type { margin-top: 0; }
.legal-content ol { margin: 0 0 1.3em; padding-left: 1.2em; display: grid; gap: 10px; }
.legal-content li { color: var(--ink); }

/* ---------- Service cards ---------- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 36px 30px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--gold-ink), var(--gold), var(--gold-2));
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .3s ease;
}
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow); border-color: transparent; }
.card:hover::before { transform: scaleX(1); }
.card .ico {
  width: 58px; height: 58px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 22px;
}
.card h3 { margin-bottom: 10px; font-size: 1.25rem; }
.card p { margin-bottom: 16px; font-size: 1rem; }

.feature-grid { gap: 14px; }
.card.feature-card {
  align-items: flex-start;
  text-align: left;
  padding: 16px 18px 16px 66px;
  position: relative;
}
.feature-head { display: contents; }
.card.feature-card .ico {
  position: absolute;
  top: 16px; left: 18px;
  width: 38px; height: 38px;
  min-width: 38px;
  border-radius: 10px;
  margin-bottom: 0;
  font-size: 1rem;
}
.card.feature-card .ico svg { width: 18px; height: 18px; }
.card.feature-card h3 { margin-bottom: 2px; font-size: 1.05rem; line-height: 1.25; }
.card.feature-card p { margin-bottom: 0; font-size: .92rem; line-height: 1.45; }
.card-link { font-family: var(--heading-font); font-weight: 700; font-size: .88rem; color: var(--gold-ink); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }

/* ---------- Reviews ---------- */
.review-head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.review-score {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px 20px;
  border-radius: 999px;
  box-shadow: var(--shadow-sm);
}
.review-score strong { font-family: var(--heading-font); font-size: 1.1rem; }
.opiness-mark {
  width: 26px; height: 26px;
  border-radius: 7px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-950));
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: .8rem;
  flex: none;
}
.stars { color: var(--gold); letter-spacing: 2px; }
.review-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.review-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 30px 28px 28px;
  overflow: hidden;
}
.review-tag {
  display: inline-block;
  font-family: var(--heading-font);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  color: var(--gold-ink);
  background: rgba(242, 177, 52, .12);
  padding: 5px 12px;
  border-radius: 999px;
  margin-bottom: 14px;
}
.review-card .stars { display: block; margin-bottom: 12px; font-size: .95rem; }
.review-card p { position: relative; font-size: 1rem; color: var(--ink); margin-bottom: 20px; }
.review-person { display: flex; align-items: center; gap: 12px; }
.review-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-950));
  color: var(--gold);
  font-family: var(--heading-font);
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  font-size: .95rem;
}
.review-person small { color: var(--ink-soft); font-size: .78rem; }
.review-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.review-card-top .stars { margin-bottom: 0; }
.review-platform { display: flex; align-items: center; gap: 6px; font-family: var(--heading-font); font-weight: 700; font-size: .82rem; color: var(--ink-soft); }
.review-platform img { width: 16px; height: 16px; }
.review-platform.opiness { color: #0f9d58; }
.review-name-line { font-size: .92rem; color: var(--ink-soft); }
.review-name-line strong { font-family: var(--heading-font); color: var(--ink); font-weight: 700; }

.review-track-scroll {
  display: flex;
  gap: 22px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 10px;
  padding-left: 24px;
  padding-right: 24px;
  scroll-padding-left: 24px;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.review-track-scroll::-webkit-scrollbar { display: none; }
.review-track-scroll .review-card {
  flex: 0 0 380px;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
}
.review-track-scroll .review-name-line { margin-top: auto; padding-top: 16px; }

.card.local-links-card { align-items: flex-start; text-align: left; padding: 36px; }
.local-links-card h3 { font-size: 1.35rem; margin-bottom: 6px; }
.local-links-card > p { color: var(--ink-soft); margin-bottom: 22px; }
.local-link-list { width: 100%; }
.local-link-list li { border-bottom: 1px solid var(--line); }
.local-link-list li:last-child { border-bottom: none; }
.local-link-list a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 0;
  font-family: var(--heading-font);
  font-weight: 700;
  color: var(--ink);
  transition: color .15s ease;
}
.local-link-list a:hover { color: var(--gold-ink); }
.local-link-list .icon-svg { width: 16px; height: 16px; color: var(--gold-ink); flex: none; }

/* ---------- CTA banner ---------- */
.cta-banner {
  border-radius: 24px;
  padding: 56px;
  display: grid;
  grid-template-columns: 1.2fr auto;
  align-items: center;
  gap: 30px;
}
.cta-banner h2 { margin-bottom: 8px; }

/* ---------- Location / map ---------- */
.location-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 40px;
  align-items: stretch;
}
.info-list { display: grid; gap: 20px; margin-top: 24px; }
.info-list .row { display: flex; gap: 14px; align-items: flex-start; }
.info-list .ico {
  flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
}
.info-list h4 { margin: 0 0 4px; font-family: var(--heading-font); font-size: .95rem; }
.info-list p { margin: 0; font-size: 1rem; }
.map-frame {
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  min-height: 340px;
}
.map-frame iframe { width: 100%; height: 100%; min-height: 340px; border: 0; filter: grayscale(.15); }

/* ---------- Contact cards ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.contact-grid + .contact-grid-wide { margin-top: 22px; }
.contact-grid-wide { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }

.card.contact-card {
  align-items: flex-start;
  text-align: left;
  padding: 30px 28px;
}
a.card.contact-card { color: inherit; cursor: pointer; }
.card.contact-card .ico {
  width: 50px; height: 50px;
  border-radius: 14px;
  margin-bottom: 20px;
}
.card.contact-card .ico svg { width: 23px; height: 23px; }
.card.contact-card h3 { font-size: 1.05rem; margin-bottom: 8px; }
.card.contact-card p { font-size: .93rem; margin-bottom: 0; }

.contact-value {
  display: inline-block;
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.12rem;
  color: var(--navy-700);
  margin-bottom: 12px;
  word-break: break-word;
  transition: color .18s ease;
}
a.card.contact-card:hover .contact-value { color: var(--gold-ink); }

.shop-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 14px 0;
  border-top: 1px solid var(--line);
  transition: color .18s ease;
}
.shop-row:first-of-type { border-top: none; padding-top: 2px; }
.shop-row .shop-city { font-family: var(--heading-font); font-weight: 700; font-size: 1.02rem; color: var(--ink); transition: color .18s ease; }
.shop-row .shop-addr { color: var(--ink-soft); font-size: .95rem; margin-left: 10px; }
.shop-row .shop-arrow { color: var(--gold-ink); display: flex; flex: none; transition: transform .18s ease; }
a.card.contact-card:hover .shop-city, a.card.contact-card:hover .shop-addr { color: var(--gold-ink); }
a.card.contact-card:hover .shop-arrow { transform: translateX(4px); }
.shop-row svg { width: 18px; height: 18px; }

.hours-today {
  font-family: var(--heading-font);
  font-weight: 700;
  font-size: 1.25rem;
  color: var(--ink);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 9px;
}

@media (max-width: 900px) {
  .contact-grid, .contact-grid-wide { grid-template-columns: 1fr; }
}

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  padding: 60px 0 76px;
  position: relative;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 1; }
.breadcrumb { font-size: .85rem; color: rgba(255,255,255,.65); margin-bottom: 14px; }
.breadcrumb a { color: var(--gold); font-weight: 600; }
.breadcrumb span { margin: 0 6px; }

/* ---------- Process steps (horizontal, 4-step) ---------- */
.process-steps {
  display: flex;
  justify-content: space-between;
  position: relative;
  gap: 20px;
}
.process-steps::before {
  content: '';
  position: absolute;
  top: 35px;
  left: 12.5%;
  right: 12.5%;
  height: 2px;
  background-image: repeating-linear-gradient(90deg, rgba(255,255,255,.3) 0 10px, transparent 10px 20px);
  z-index: 0;
}
.process-step {
  position: relative;
  z-index: 1;
  flex: 1;
  text-align: center;
}
.process-dot {
  width: 70px; height: 70px;
  border-radius: 50%;
  background: var(--navy-700);
  border: 2px solid rgba(255,255,255,.25);
  color: #fff;
  font-family: var(--heading-font);
  font-weight: 800;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 22px;
}
.process-step.is-active .process-dot {
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--navy-950);
  border-color: var(--gold);
  box-shadow: 0 0 0 7px rgba(242, 177, 52, .15);
}
.process-step h4 { color: #fff; margin-bottom: 8px; font-size: 1.05rem; }
.process-step p { color: rgba(255,255,255,.65); font-size: .92rem; max-width: 230px; margin: 0 auto; }

/* ---------- Timeline (over ons) ---------- */
.timeline { position: relative; padding-left: 34px; display: grid; gap: 34px; }
.timeline::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: linear-gradient(var(--gold-2), var(--line)); }
.timeline .t-item { position: relative; }
.timeline .t-item::before {
  content: '';
  position: absolute; left: -34px; top: 2px;
  width: 24px; height: 24px; border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  border: 4px solid #fff;
  box-shadow: 0 0 0 1px var(--line);
}
.timeline h4 { font-family: var(--heading-font); margin-bottom: 4px; }
.timeline span { color: var(--gold-ink); font-weight: 700; font-size: .82rem; font-family: var(--heading-font); }

/* ---------- Stats ---------- */
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align: center; }
.stat-row strong { display: block; font-family: var(--heading-font); font-size: 2.4rem; font-weight: 800; color: var(--gold); }
.stat-row span { font-size: .85rem; color: rgba(255,255,255,.8); }

/* ---------- Contact form ---------- */
.form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 40px;
  box-shadow: var(--shadow-sm);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-row[hidden] { display: none; }
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--heading-font); font-weight: 600; font-size: .85rem; margin-bottom: 6px; }
.required-tag { color: var(--gold-ink); font-weight: 700; }
.field input, .field select, .field textarea {
  width: 100%;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  font-family: var(--body-font);
  font-size: .95rem;
  background: var(--mist);
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(242,177,52,.18);
}
.field textarea { resize: vertical; min-height: 130px; }
.form-note { font-size: .8rem; color: var(--ink-soft); margin-top: 10px; }
.char-counter { font-size: .78rem; color: var(--ink-soft); text-align: right; margin-top: 6px; }
.char-counter.is-near-limit { color: var(--gold-ink); }
.form-status {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px;
  border-radius: 10px;
  margin-bottom: 22px;
  font-weight: 600;
  font-size: .92rem;
}
.form-status-ok { background: #e8f8ee; border: 1px solid #b7e6c6; color: #1c6b3a; }
.form-status-error { background: #fdeceb; border: 1px solid #f3bcb8; color: #a6332c; }

/* ---------- FAQ ---------- */
.faq-columns { align-items: start; }
.faq-col-head { display: flex; align-items: center; gap: 12px; margin-bottom: 20px; }
.faq-col-head .icon-svg { width: 22px; height: 22px; color: var(--gold-ink); }
.faq-col-head h3 { margin: 0; font-size: 1.2rem; }
.faq-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  margin-bottom: 14px;
  overflow: hidden;
}
.faq-q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  cursor: pointer;
  font-family: var(--heading-font);
  font-weight: 600;
  background: #fff;
}
.faq-q .plus { transition: transform .2s; color: var(--gold-ink); font-size: 1.2rem; }
.faq-item.open .faq-q .plus { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; padding: 0 24px; }
.faq-item.open .faq-a { max-height: 220px; padding: 0 24px 20px; }
.faq-a p { margin: 0; font-size: 1rem; }

/* ---------- Footer ---------- */
footer.site-footer { background: var(--navy-950); color: #97a2b8; padding: 70px 0 0; position: relative; }
footer.site-footer::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.1fr;
  gap: 40px;
  padding-bottom: 50px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.footer-grid > div > img { height: 38px; margin-bottom: 16px; }
.footer-map {
  margin-top: 40px;
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.1);
  height: 220px;
}
.footer-map iframe { width: 100%; height: 100%; border: 0; filter: invert(90%) hue-rotate(180deg) brightness(.95) contrast(.9); }
.footer-grid p { color: #7c869c; font-size: .9rem; }
.footer-grid h4 { color: #fff; font-family: var(--heading-font); font-size: .95rem; margin-bottom: 18px; }
.footer-grid ul { display: grid; gap: 11px; }
.footer-grid a { color: #97a2b8; font-size: .9rem; transition: color .15s; }
.footer-grid a:hover { color: var(--gold); }
.footer-social { display: flex; gap: 10px; margin-top: 18px; }
.footer-legal-nrs { margin-top: 22px; }
.footer-legal-nrs p { margin: 0 0 6px; font-size: .85rem; }
.footer-legal-nrs strong { color: #fff; }
.footer-social a {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.07);
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.footer-social a:hover { background: var(--gold); color: var(--navy-950); }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 22px 0;
  font-size: .82rem;
  color: #6b7488;
  flex-wrap: wrap;
  gap: 10px;
}
.footer-bottom a { color: #97a2b8; }

/* ---------- Back to top ---------- */
.back-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--gold-2), var(--gold));
  color: var(--navy-950);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--shadow-sm);
  opacity: 0;
  pointer-events: none;
  transform: translateY(10px);
  transition: opacity .2s, transform .2s;
  z-index: 90;
  border: none;
  cursor: pointer;
}
.back-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }

/* ---------- Icons (inline svg sizing) ---------- */
.icon-svg { width: 22px; height: 22px; display: block; flex: none; }
.topbar-social svg { width: 15px; height: 15px; }
.ico-circle svg { width: 19px; height: 19px; }
.bento-item .ico svg { width: 24px; height: 24px; }
.card .ico svg { width: 27px; height: 27px; }
.info-list .ico svg { width: 21px; height: 21px; }
.footer-social svg { width: 17px; height: 17px; }
.form-note svg, .field-icon svg { width: 18px; height: 18px; }
.card-link svg { width: 14px; height: 14px; }
.btn svg { width: 17px; height: 17px; }
.faq-a svg, .form-status svg { width: 18px; height: 18px; }

/* ---------- Reveal on scroll ----------
   Standaard zichtbaar. De verborgen begintoestand geldt alleen als JavaScript
   draait (html.js wordt in de <head> gezet). Zonder die voorwaarde zou een
   mislukte JS-load betekenen dat een groot deel van de pagina onzichtbaar
   blijft — dat mag nooit gebeuren met echte inhoud. */
.reveal { opacity: 1; transform: none; }
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.in-view { opacity: 1; transform: translateY(0); }

/* Bezoekers die 'beperk beweging' aan hebben staan — op telefoons een veel
   gebruikte instelling — krijgen de inhoud direct te zien, zonder animatie. */
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; transition: none; }
  .hero-illustration { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- Desktop copy scale-up ---------- */
@media (min-width: 1024px) {
  .card p, .bento-item p, .info-list p, .review-card p, .faq-a p, .photo-banner-content p, .section-head p {
    font-size: 1.125rem;
  }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 1024px) {
  .hero .container { grid-template-columns: 1fr; }
  .hero-visual { order: -1; }
  .glass-badge.top, .hero-open-badge { left: 0; }
  .glass-badge.bottom, .rating-badges { right: 0; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-feature { grid-column: span 2; }
  .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .split, .split.reverse { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
  .review-track { grid-template-columns: repeat(2, 1fr); }
  .location-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .cta-banner { grid-template-columns: 1fr; text-align: center; }
  .photo-banner-content { max-width: 100%; }
}
@media (max-width: 860px) {
  .process-steps { flex-direction: column; gap: 40px; }
  .process-steps::before { display: none; }
  .process-step p { max-width: 100%; }
  nav.main-nav { display: none; }
  .nav-toggle { display: flex; }
  .topbar-left span:nth-child(2) { display: none; }
  nav.main-nav.open {
    display: flex;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: #fff;
    border-bottom: 1px solid var(--line);
    padding: 18px 24px 26px;
    box-shadow: var(--shadow-sm);
  }
  /* align-items:flex-start liet de rijen krimpen tot de breedte van het woord,
     waardoor je precies op de tekst moest tikken. Nu is de hele rij raakbaar. */
  nav.main-nav.open ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    width: 100%;
  }
  nav.main-nav.open li { width: 100%; }
  nav.main-nav.open li + li { border-top: 1px solid var(--line); }

  nav.main-nav.open .nav-dropdown {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    border: none;
    padding: 0;
    margin-top: 0;
    min-width: 0;
    width: 100%;
  }
  nav.main-nav.open li.has-dropdown { display: flex; flex-direction: column; }

  /* Onderliggende pagina's krijgen een inspringing met een streepje ervoor,
     zodat zichtbaar is dat ze onder 'Diensten' vallen. */
  nav.main-nav.open .nav-dropdown a {
    padding-left: 18px;
    border-top: 1px solid var(--line);
    color: var(--ink-soft);
    font-weight: 600;
    position: relative;
  }
  nav.main-nav.open .nav-dropdown a::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    width: 9px;
    height: 1.5px;
    background: var(--line);
  }

  /* De actieve pagina duidelijk markeren. */
  nav.main-nav.open a.active {
    color: var(--gold-ink);
    font-weight: 700;
  }
  nav.main-nav.open a.active::after { display: none; }

  /* Hamburger wordt een kruis zodra het menu openstaat. */
  .nav-toggle span { transition: transform .22s ease, opacity .18s ease; }
  .nav-toggle.is-open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
  .nav-toggle.is-open span:nth-child(2) { opacity: 0; }
  .nav-toggle.is-open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .bento-grid { grid-template-columns: repeat(2, 1fr); }
  .bento-feature { grid-column: span 2; }
}
@media (max-width: 640px) {
  section { padding: 64px 0; }
  .grid-3, .grid-2, .grid-4 { grid-template-columns: 1fr; }
  .review-track { grid-template-columns: 1fr; }
  .bento-grid { grid-template-columns: 1fr; }
  .bento-feature { grid-column: span 1; flex-direction: column; text-align: center; }
  .form-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .form-card { padding: 26px; }
  .nav-phone span.label { display: none; }
  .photo-banner-stats { flex-wrap: wrap; gap: 20px; }

  /* De vaste regelafbreking in de koppen is bedoeld voor brede schermen.
     Op een telefoon breekt de tekst vanzelf al en zorgt hij voor een
     losse, korte laatste regel. */
  .section-head h2 br { display: none; }

  /* Koppen wat compacter zetten zodat ze minder regels innemen. */
  .section-head { margin-bottom: 34px; }
  .section-head h2 { line-height: 1.2; }
  .section-head p { font-size: 1rem; }
}

/* =========================================================
   Mobiele header: alleen een gecentreerd logo en het menu
   ========================================================= */
@media (max-width: 860px) {
  /* De donkere balk met adres en iconen valt weg op telefoonformaat.
     De openingstijden staan al in de hero, de sociale links in de footer. */
  .topbar { display: none; }

  /* De header scrollt mee tot en met de balk 'Vandaag geopend tot …' en
     schuift daarna omhoog uit beeld. Het omschakelpunt wordt in main.js
     bepaald, die zet de klasse hieronder. */
  header.site-header {
    transition: transform .28s ease;
    will-change: transform;
  }
  header.site-header.is-released {
    transform: translateY(-100%);
  }

  /* Geen WhatsApp-icoon meer in de header — die staat in de footer en in het
     contactblok op de homepage. */
  .nav-cta > .nav-whatsapp { display: none; }

  /* Logo in het midden, hamburger rechts. De hamburger staat absoluut,
     zodat het logo precies gecentreerd blijft en niet meeschuift. */
  .nav-wrap { position: relative; justify-content: center; gap: 0; }
  .brand { margin: 0 auto; }
  .nav-cta {
    position: absolute;
    /* .nav-wrap ís het .container-element, dus right:0 zou de padding
       negeren en de knop tegen de schermrand plakken. */
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    gap: 0;
  }
  .nav-phone { display: none; }
}

/* =========================================================
   Mobiele hero: eerst de tekst, dan de USP's, dan pas de
   afbeelding met de beoordelingen eronder
   ========================================================= */
@media (max-width: 860px) {
  .hero { padding: 44px 0 76px; }
  .hero .container { row-gap: 0; }

  .hero-copy       { order: 1; }
  .hero-badges-full { order: 2; margin-top: 22px; }
  .hero-visual     { order: 3; margin-top: 38px; }

  /* De badges liggen op desktop absoluut óver de afbeelding. Zodra ze
     'static' worden, zijn het gewone flex-items — vandaar de kolomrichting,
     anders komen ze náást de afbeelding te staan. */
  .hero-visual {
    flex-direction: column;
    align-items: center;
    width: 100%;
    gap: 18px;
  }

  /* Bel-knop en 'Bekijk diensten' naast elkaar, elk exact de halve breedte.
     minmax(0, ...) in plaats van 1fr, anders duwt de langste knop de verdeling
     scheef en worden de twee ongelijk. */
  .hero-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
  }
  .hero-actions .btn {
    padding: 14px 8px;
    font-size: .88rem;
    white-space: nowrap;
  }
  /* 'Bel: ' weglaten — het telefoonicoontje zegt al genoeg en zo past het
     nummer binnen de halve breedte. */
  .btn-label-long { display: none; }

  /* Daaronder de openingsstatus — de variant die in de tekstkolom staat.
     Vult de volle breedte, net als de twee knoppen erboven samen. */
  .hero-open-badge-inline {
    display: flex;
    position: static;
    justify-content: center;
    width: 100%;
    margin: 12px 0 0;
    padding: 16px 20px;
    font-size: 1.02rem;
    font-weight: 700;
    border-radius: 999px;
    gap: 11px;
  }
  .hero-open-badge-inline .open-dot { width: 11px; height: 11px; }
  /* De variant over de afbeelding verdwijnt hier. */
  .hero-visual > .hero-open-badge { display: none; }

  .hero-illustration { max-width: 300px; margin: 0 auto; }

  .glass-badge {
    position: static;
    display: inline-flex;
    margin: 0;
  }

  /* De twee beoordelingen naast elkaar, gelijk verdeeld over de breedte. */
  .rating-badges {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
  }
  .rating-pill {
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    box-shadow: var(--shadow-sm);
  }
  .rating-pill span { font-size: .74rem; white-space: nowrap; }
  .rating-pill .stars { font-size: .78rem !important; }
}

@media (max-width: 340px) {
  /* Pas op de allersmalste toestellen onder elkaar. Tot en met 360px
     passen ze naast elkaar zonder dat de tekst wordt afgekapt (gemeten). */
  .rating-badges { grid-template-columns: 1fr; max-width: 260px; }
}

/* =========================================================
   Touch / smartphone — bruikbaarheid
   ========================================================= */

/* iOS Safari zoomt automatisch in zodra je een invoerveld aantikt dat kleiner
   is dan 16px. Op telefoonformaat zetten we alle velden daarom op 16px. */
@media (max-width: 860px) {
  .field input, .field select, .field textarea,
  .toolbar input[type="text"], .toolbar select {
    font-size: 16px;
  }
}

/* Tikdoelen: Apple adviseert minimaal 44x44px, Google 48x48.
   Onderstaande elementen waren te klein om betrouwbaar te raken. */
@media (max-width: 860px) {
  .topbar-social { gap: 4px; }
  .topbar-social a {
    width: 44px;
    height: 44px;
    border-radius: 50%;
  }

  .nav-toggle {
    padding: 12px 10px;
    min-width: 44px;
    min-height: 44px;
    justify-content: center;
    align-items: center;
  }

  .nav-whatsapp { width: 44px; height: 44px; }

  /* Links in het uitklapmenu: het tikvlak was maar 17px hoog.
     Let op: alleen boven- en ondermarge zetten. Een shorthand als
     'padding: 12px 0' zou de inspringing van de submenu-items wissen. */
  nav.main-nav.open ul > li > a,
  nav.main-nav.open .nav-dropdown a {
    display: block;
    padding-top: 12px;
    padding-bottom: 12px;
    min-height: 44px;
    line-height: 20px;
  }

  /* Telefoon- en e-mailadressen in de contactblokken. */
  .info-list a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 4px 0;
  }
  .brand { min-height: 44px; }

  /* 'Meer info' / 'Vraag een prijs' onderaan de kaarten. */
  .card-link { min-height: 44px; align-items: center; }

  /* 'Home' in de broodkruimel bovenaan de subpagina's. */
  .breadcrumb a { display: inline-flex; align-items: center; min-height: 44px; }

  /* Let op: telefoonnummers en e-mailadressen die middenin een lopende alinea
     staan, krijgen bewust géén vergroot tikvlak. Dat zou de regelafstand in de
     tekst uit elkaar trekken. Beide staan bovendien elders op de pagina als
     volwaardige knop. */

  /* Footerlinks stonden 11px uit elkaar met een tikvlak van 17px hoog. */
  .footer-grid ul { gap: 2px; }
  .footer-grid ul a {
    display: block;
    padding: 11px 0;
    min-height: 44px;
    line-height: 22px;
  }

  .footer-social a { width: 44px; height: 44px; }

  /* De knop 'Maak afspraak' valt weg in de mobiele header: Contact staat
     al in het uitklapmenu, en zonder die knop past het logo weer heel. */
  .nav-cta > .btn { display: none; }
  .brand { flex: none; }
  .brand img { max-width: none; }
}

/* Hover-effecten alleen op apparaten met een echte muisaanwijzer.
   Op een touchscreen blijft een :hover-status na het tikken 'plakken',
   waardoor een kaart opgetild blijft staan tot je ergens anders tikt. */
@media (hover: none) {
  .card:hover,
  .bento-item:hover,
  .msg-card:hover,
  .btn:hover,
  .nav-whatsapp:hover,
  .brand-tile:hover {
    transform: none;
  }
  .card:hover::before { transform: scaleX(0); }

  /* In plaats daarvan een korte, duidelijke reactie op de tik zelf. */
  .card:active,
  .bento-item:active { transform: scale(.985); }
  .btn:active { transform: scale(.97); }
}

/* =========================================================
   Vaste actiebalk onderaan (alleen telefoon)
   ========================================================= */

/* Standaard verborgen — op desktop en tablet komt de balk nooit in beeld. */
.mobile-bar { display: none; }

@media (max-width: 860px) {
  .mobile-bar {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;

    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 120;

    padding: 8px 10px;
    /* Extra ruimte onderaan voor de home-balk van toestellen zonder knop. */
    padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));

    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px -12px rgba(5, 10, 23, .35);
  }

  .mobile-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;

    min-height: 56px;
    padding: 9px 4px;
    border-radius: 14px;

    color: #fff;
    text-align: center;
    transition: transform .15s ease, filter .15s ease;
  }
  .mobile-bar-item:active { transform: scale(.95); filter: brightness(.94); }

  .mobile-bar-ico { display: flex; }
  .mobile-bar-ico svg { width: 21px; height: 21px; }
  /* WhatsApp gebruikt het witte logo uit content/Symbols in plaats van een
     nagetekend icoon — de width/height-attributen op de <img> moeten hier
     dus overschreven worden. */
  .mobile-bar-ico .whatsapp-icon { width: 21px; height: 21px; }

  .mobile-bar-label {
    font-family: var(--heading-font);
    font-weight: 700;
    font-size: .72rem;
    line-height: 1;
    letter-spacing: .01em;
  }

  /* Elke actie zijn eigen kleur, zodat ze in één oogopslag te onderscheiden
     zijn. WhatsApp houdt bewust zijn eigen herkenbare groen. */
  .mb-bellen   { background: linear-gradient(160deg, var(--navy-700), var(--navy-900)); }
  .mb-whatsapp { background: linear-gradient(160deg, #2ee071, #17a94c); }
  .mb-afspraak { background: linear-gradient(160deg, var(--gold-2), var(--gold) 60%, #d99a1e); color: var(--navy-950); }
  .mb-route    { background: linear-gradient(160deg, #3b9ede, var(--blue)); }

  /* De pagina krijgt onderaan ruimte, anders valt de balk over de laatste
     regels van de footer heen. */
  body { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }

  /* De 'naar boven'-knop schuift boven de balk, anders overlappen ze. */
  .back-top { bottom: calc(90px + env(safe-area-inset-bottom, 0px)); }
}

/* Op de smalste toestellen mag het iets compacter. */
@media (max-width: 360px) {
  .mobile-bar { gap: 6px; padding-left: 7px; padding-right: 7px; }
  .mobile-bar-label { font-size: .66rem; }
  .mobile-bar-ico svg,
  .mobile-bar-ico .whatsapp-icon { width: 19px; height: 19px; }
}

/* Horizontaal scrollen met de vinger soepel laten verlopen. */
.review-track-scroll,
.marquee {
  -webkit-overflow-scrolling: touch;
}

/* Telefoons met een inkeping of afgeronde hoeken (iPhone X en nieuwer).
   Door viewport-fit=cover loopt de pagina tot in die randen, dus houden we
   afstand met de veilige zones die het toestel zelf doorgeeft. */
@supports (padding: max(0px)) {
  .container,
  .admin-header-inner,
  .admin-wrap {
    padding-left: max(24px, env(safe-area-inset-left));
    padding-right: max(24px, env(safe-area-inset-right));
  }
  .back-top {
    right: max(24px, env(safe-area-inset-right));
  }
  /* De onderafstand alleen boven 860px: daaronder staat de vaste actiebalk
     en wordt de knop daar bovenop gezet (zie het mobiele blok hierboven). */
  @media (min-width: 861px) {
    .back-top { bottom: max(24px, env(safe-area-inset-bottom)); }
  }
  .site-footer {
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }
}