/* ============================================================
   Geen Probleem Sloten — centrale stylesheet
   Huisstijl: navy (#111d42 / #1B2B5E) + goud (#C49A2A)
   Fonts: Sora (koppen) + Manrope (tekst) — zelf gehost in /fonts
   (AVG: geen verbinding met Google) als variabele fonts, één
   bestand per schriftdeel dekt alle diktes.
   ============================================================ */

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/manrope-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/sora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Sora';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(../fonts/sora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --navy: #1B2B5E;
  --navy-dark: #111d42;
  --navy-deep: #0d1730;
  --gold: #C49A2A;
  --gold-light: #e4b84a;
  --gold-pale: #fdf6e3;
  --gold-ink: #85681C; /* donker goud, alleen voor kleine tekstaccenten op wit (betere leesbaarheid); de tariefsectie gebruikt bewust het heldere goud van de huisstijl */
  --white: #ffffff;
  --offwhite: #f7f6f3;
  --text: #1d2433;
  --text-muted: #5c6473;
  --line: #e8e6e0;
  --green: #1f8a4c;
  --radius: 14px;
  --radius-sm: 8px;
  --shadow: 0 6px 24px rgba(17, 29, 66, 0.08);
  --shadow-lg: 0 14px 40px rgba(17, 29, 66, 0.14);
  --maxw: 1180px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 73px; background: var(--navy-dark); }

body {
  font-family: 'Manrope', system-ui, sans-serif;
  color: var(--text);
  background: var(--white);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { font-family: 'Sora', sans-serif; letter-spacing: -0.02em; line-height: 1.15; color: var(--navy-dark); }
p { margin-bottom: 1em; }
p:last-child { margin-bottom: 0; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--navy); }

.container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; }

/* Toegankelijkheid */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 999;
  background: var(--gold); color: var(--navy-dark); padding: 10px 18px;
  border-radius: 0 0 var(--radius-sm) 0; font-weight: 700; text-decoration: none;
}
.skip-link:focus { left: 0; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============ Pre-launch melding ============ */
.prelaunch-bar {
  background: var(--navy-dark); border-bottom: 1px solid rgba(196, 154, 42, 0.55);
  color: rgba(255, 255, 255, 0.88); text-align: center;
  padding: 12px 20px; font-size: 0.86rem; font-weight: 600; line-height: 1.55;
}
.prelaunch-bar a { color: var(--gold-light); font-weight: 700; white-space: nowrap; }
@media (max-width: 760px) {
  .prelaunch-bar { padding: 12px 16px; font-size: 0.82rem; }
}

/* ============ Navigatie ============ */
.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(17, 29, 66, 0.95);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(196, 154, 42, 0.4);
}
.nav-inner {
  position: relative;
  max-width: var(--maxw); margin: 0 auto; padding: 10px 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.nav-logo img { height: 52px; width: auto; display: block; }
@media (max-width: 760px) {
  .nav-inner { padding: 9px 18px; }
  .nav-logo img { height: 42px; }
  html { scroll-padding-top: 64px; }
}
.nav-links { display: flex; gap: 26px; list-style: none; align-items: center; }
.nav-links a {
  color: rgba(255, 255, 255, 0.85); text-decoration: none;
  font-size: 0.92rem; font-weight: 500; transition: color 0.2s;
}
.nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { color: var(--gold-light); }
.nav-links a[aria-current="page"] { font-weight: 700; }
.nav-cta {
  background: var(--gold); color: var(--navy-dark) !important;
  padding: 10px 20px; border-radius: var(--radius-sm); font-weight: 700 !important;
  transition: background 0.2s, transform 0.2s;
}
.nav-cta:hover { background: var(--gold-light); transform: translateY(-1px); }

.nav-toggle {
  display: none; background: none; border: 0; cursor: pointer; padding: 8px;
}
.nav-toggle span {
  display: block; width: 26px; height: 3px; background: var(--white);
  margin: 5px 0; border-radius: 2px; transition: transform 0.25s, opacity 0.25s;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============ Hero ============ */
.hero {
  position: relative; overflow: hidden;
  background: var(--navy-dark); color: var(--white);
  padding: 90px 0 70px;
}
.hero.hero-home { padding-bottom: 104px; }
.hero::before {
  content: ''; position: absolute; inset: auto 0 0 0; height: 64%;
  background: url('../images/amsterdam-grachtenpanden.svg?v=4') bottom center / cover no-repeat;
  opacity: 0.5; pointer-events: none;
}
.hero::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, var(--navy-dark) 8%, rgba(17, 29, 66, 0.55) 60%, rgba(17, 29, 66, 0.25) 100%);
  pointer-events: none;
}
.hero-glow {
  position: absolute; top: -12%; right: -6%; width: 480px; height: 480px;
  background: radial-gradient(circle, rgba(196, 154, 42, 0.20), transparent 70%);
  pointer-events: none;
}
.hero .container { position: relative; z-index: 2; }
.hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(196, 154, 42, 0.14); border: 1px solid rgba(196, 154, 42, 0.4);
  color: var(--gold-light); padding: 7px 16px; border-radius: 50px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: 24px;
}
.hero h1 {
  color: var(--white); font-weight: 800;
  font-size: clamp(2.1rem, 5vw, 3.6rem); margin-bottom: 18px; max-width: 16ch;
}
.hero h1 span { color: var(--gold); }
.hero-sub {
  font-size: 1.12rem; color: rgba(255, 255, 255, 0.78);
  max-width: 540px; margin-bottom: 30px;
}
.hero-sub strong { color: var(--gold-light); font-weight: 600; }

/* ============ Vertrouwensbalk ============ */
.trust-strip { position: relative; z-index: 5; padding: 0 0 64px; }
.trust-strip-inner {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: var(--shadow-lg); margin-top: -36px;
}
.trust-item {
  display: flex; align-items: center; gap: 14px;
  background: var(--white); padding: 22px 24px;
}
.trust-item svg { width: 22px; height: 22px; flex: none; color: var(--gold); }
.trust-item strong { display: block; font-family: 'Sora', sans-serif; font-size: 0.93rem; color: var(--navy); }
.trust-item span { font-size: 0.8rem; color: var(--text-muted); }

/* ============ Checklist (over mij) ============ */
.check-list { list-style: none; padding: 0; margin: 18px 0 22px; display: grid; gap: 10px; }
.check-list li { display: flex; align-items: baseline; gap: 10px; font-weight: 600; color: var(--navy); }
.check-list li::before { content: '✓'; color: var(--gold-ink); font-weight: 800; }
.check-list li small { display: block; font-weight: 400; color: var(--text-muted); font-size: 0.92rem; }

/* Knoppen */
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-sm);
  font-family: 'Manrope', sans-serif; font-size: 0.98rem; font-weight: 700;
  text-decoration: none; cursor: pointer; border: 1px solid transparent;
  transition: background 0.2s, color 0.2s, transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.btn svg { width: 18px; height: 18px; flex: none; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-gold { background: var(--gold); color: var(--navy-dark); }
.btn-gold:hover { background: var(--gold-light); box-shadow: 0 8px 22px rgba(196, 154, 42, 0.28); }
.btn-whatsapp {
  background: rgba(255, 255, 255, 0.06); color: var(--white);
  border-color: rgba(196, 154, 42, 0.65);
}
.btn-whatsapp svg { color: #25D366; }
.btn-whatsapp:hover {
  background: rgba(255, 255, 255, 0.12); border-color: var(--gold-light);
  box-shadow: 0 8px 22px rgba(13, 23, 48, 0.28);
}
.btn-outline { background: transparent; color: var(--white); border-color: rgba(255, 255, 255, 0.4); }
.btn-outline:hover { border-color: rgba(255, 255, 255, 0.85); background: rgba(255, 255, 255, 0.06); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: var(--navy-dark); box-shadow: 0 8px 22px rgba(13, 23, 48, 0.22); }

/* ============ Secties ============ */
.section { padding: 76px 0; }
.section-alt { background: var(--offwhite); }
.section-dark { background: var(--navy-dark); color: rgba(255, 255, 255, 0.85); }
.section-dark h2, .section-dark h3 { color: var(--white); }

/* Zachte overgang wit → crème: crème-secties vervagen vanuit wit i.p.v. een
   harde naadlijn. De fade verschijnt alleen dáár waar crème aan wit grenst —
   niet tussen twee crème-secties (geen witte tussenband) en niet bij donkere
   secties. */
.section-alt--fade-top,
.section:not(.section-alt):not(.section-dark) + .section-alt {
  background: linear-gradient(to bottom, var(--white), var(--offwhite) 120px);
}
.section-alt:has(+ .section:not(.section-alt):not(.section-dark)) {
  background: linear-gradient(to top, var(--white), var(--offwhite) 120px);
}
.section:not(.section-alt):not(.section-dark) + .section-alt:has(+ .section:not(.section-alt):not(.section-dark)) {
  background:
    linear-gradient(to bottom, var(--white), rgba(255, 255, 255, 0) 120px) top / 100% 100% no-repeat,
    linear-gradient(to top, var(--white), rgba(255, 255, 255, 0) 120px) bottom / 100% 100% no-repeat,
    var(--offwhite);
}
.eyebrow {
  display: block; color: var(--gold); font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; font-size: 0.8rem; margin-bottom: 10px;
}
.section h2 { font-size: clamp(1.6rem, 3.4vw, 2.3rem); margin-bottom: 16px; max-width: 26ch; }
.section-intro { max-width: 640px; color: var(--text-muted); font-size: 1.05rem; margin-bottom: 42px; }
.section-dark .section-intro { color: rgba(255, 255, 255, 0.72); }
.center { text-align: center; }
.center h2, .center .section-intro { margin-left: auto; margin-right: auto; }

/* Kaarten-grids */
.grid { display: grid; gap: 22px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 28px;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(196, 154, 42, 0.5); }
.card-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--gold-pale); border: 1px solid rgba(196, 154, 42, 0.35);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; margin-bottom: 16px;
}
.card h3 { font-size: 1.12rem; margin-bottom: 8px; }
.card p { color: var(--text-muted); font-size: 0.95rem; }
.card .vanaf {
  display: inline-block; margin-top: 14px; color: var(--navy);
  font-weight: 800; font-family: 'Sora', sans-serif; font-size: 1.02rem;
}
.card-link { text-decoration: none; color: inherit; display: block; }
.card-link .meer { color: var(--gold-ink); font-weight: 700; font-size: 0.9rem; margin-top: 12px; display: inline-block; }

/* ============ Over mij ============ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split-photo { position: relative; }
.split-photo img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.photo-tag {
  position: absolute; bottom: 18px; left: 18px;
  background: rgba(17, 29, 66, 0.9); color: var(--white);
  border: 1px solid rgba(196, 154, 42, 0.5); border-radius: var(--radius-sm);
  padding: 10px 16px; font-size: 0.85rem; font-weight: 600;
}
@media (max-width: 760px) {
  /* Op mobiel geen naamblok over of onder de foto */
  .photo-tag { display: none; }
}
.photo-tag strong { color: var(--gold-light); display: block; }
blockquote {
  border-left: 4px solid var(--gold); padding: 6px 0 6px 18px;
  font-style: italic; color: var(--navy); margin: 22px 0; font-weight: 600;
}

/* ============ Klantreviews (citaten van Google) ============ */
/* Iets kleinere bovenmarge: reviews horen visueel bij het "over mij"-blok,
   dus net iets dichter erop dan een volledige sectie-afstand. */
.reviews-section { padding-top: 36px; }
/* Op de donkerblauwe variant blijven de teksten leesbaar; de witte kaartjes
   blijven wit en komen zo mooi uit tegen het blauw. */
.reviews-section.section-dark .review-score { color: #fff; }
.reviews-section.section-dark .review-more a { color: var(--gold-light); }
.review-score {
  display: inline-flex; align-items: baseline; gap: 8px;
  color: var(--navy);
}
.review-score__stars {
  color: var(--gold); font-size: 0.62em; letter-spacing: 2px;
  position: relative; top: -0.12em;
}
/* Reviews lopen in één doorlopende rij voorbij. De rij bevat de zes echte
   reviews twee keer achter elkaar; de animatie schuift precies -50% op, zodat
   de tweede reeks naadloos op het startpunt van de eerste landt. Bij hover of
   toetsenbordfocus staat de rij stil, zodat je een kaart kunt lezen of openen. */
.review-marquee {
  margin-top: 34px;
  /* De track is breder dan het scherm; zonder deze regel duwt hij de pagina
     open en ontstaat horizontale overflow. De mask verbergt alleen visueel. */
  overflow: hidden;
  /* vervagende randen: kaarten lossen op in de achtergrond van de sectie */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
  padding-bottom: 14px; /* ruimte voor de hover-lift en de schaduw */
}
.review-track {
  display: flex; width: max-content;
  animation: review-marquee 60s linear infinite;
}
.review-marquee:hover .review-track,
.review-track:focus-within { animation-play-state: paused; }
@keyframes review-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* 11px aan weerszijden = 22px tussenruimte, gelijk aan het oude raster */
.review-slot { display: flex; padding: 6px 11px; }
.review-card {
  flex: 0 0 330px; width: 330px;
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; text-align: left;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 22px 18px; box-shadow: var(--shadow);
  text-decoration: none; color: inherit;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.review-card:hover, .review-card:focus-visible {
  transform: translateY(-4px); box-shadow: var(--shadow-lg);
  border-color: rgba(196, 154, 42, 0.5);
}
.review-card:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.review-quote {
  width: 34px; height: 34px; color: var(--gold);
  opacity: 0.9; margin-bottom: 14px; flex: 0 0 auto;
  transition: opacity 0.25s;
}
.review-card:hover .review-quote { opacity: 1; }
.review-head { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.review-avatar {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
  background: var(--navy-dark); color: var(--gold-light);
  border: 1px solid rgba(196, 154, 42, 0.55);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.05rem;
}
.review-who { display: flex; flex-direction: column; gap: 2px; }
.review-who strong { font-size: 0.94rem; color: var(--navy); line-height: 1.2; }
.review-stars { color: var(--gold); font-size: 0.72rem; letter-spacing: 2.5px; }
.review-card blockquote {
  border-left: 0; padding: 0; margin: 0 0 18px; flex: 1;
  font-style: normal; font-weight: 400; color: var(--text);
  font-size: 0.92rem; line-height: 1.65;
}
.review-more { text-align: center; margin: 26px 0 0; font-size: 0.92rem; }
.review-more a { color: var(--navy); font-weight: 700; }
/* Mobiel: smallere kaarten en tussenruimte, zodat er altijd een tweede kaart
   half in beeld valt en zichtbaar blijft dat de rij doorloopt. */
@media (max-width: 560px) {
  .review-marquee {
    margin-top: 28px;
    /* Smallere fade: op een klein scherm is maar één kaart tegelijk in beeld,
       een brede fade zou daar te veel van wegnemen. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent);
  }
  .review-slot { padding: 6px 7px; }
  .review-card { flex-basis: 290px; width: 290px; padding: 20px 18px 16px; }
}

/* De globale prefers-reduced-motion-regel bovenaan zet de animatie al stil.
   Hier alleen nog zorgen dat de stilstaande rij dan handmatig scrollbaar is. */
@media (prefers-reduced-motion: reduce) {
  .review-marquee { overflow-x: auto; }
}

/* ============ Stappen ============ */
.steps { counter-reset: stap; }
.step { position: relative; padding-left: 0; }
.step-num {
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--gold); color: var(--navy-dark);
  font-family: 'Sora', sans-serif; font-weight: 800; font-size: 1.15rem;
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px;
}
.step h3 { font-size: 1.08rem; margin-bottom: 8px; }
.step p { color: var(--text-muted); font-size: 0.95rem; }

/* ============ Tarieven ============ */
.price-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 30px 28px; display: flex; flex-direction: column;
  transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card.featured { border: 2px solid var(--gold); position: relative; }
.price-card.featured::before {
  content: 'Meest gebruikelijke'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--gold); color: var(--navy-dark); font-size: 0.74rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; padding: 4px 14px; border-radius: 50px; white-space: nowrap;
}
html[lang="en"] .price-card.featured::before { content: 'Most common'; }
/* Actueel dagdeel (gezet door JS): label toont dat dit tarief nú geldt */
.price-card.is-nu::before { content: 'Nu geldend'; }
.price-card.is-nu .price-amount { color: var(--gold); }
html[lang="en"] .price-card.is-nu::before { content: 'Current rate'; }
.price-card h3 { font-size: 1.05rem; color: var(--text-muted); font-family: 'Manrope', sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.price-amount { font-family: 'Sora', sans-serif; font-size: 2.6rem; font-weight: 800; color: var(--navy-dark); margin: 6px 0 2px; }
.price-amount small { font-size: 1rem; color: var(--text-muted); font-weight: 600; }
.price-time { color: var(--gold); font-weight: 700; font-size: 0.92rem; margin-bottom: 18px; }
.price-list { list-style: none; margin: 0 0 22px; padding: 0; flex: 1; }
.price-list li {
  padding: 9px 0; border-bottom: 1px dashed var(--line);
  font-size: 0.93rem; color: var(--text); display: flex; gap: 9px;
}
.price-list li::before { content: '✓'; color: var(--green); font-weight: 800; flex-shrink: 0; }
.price-note { font-size: 0.85rem; color: var(--text-muted); background: var(--gold-pale); border: 1px solid rgba(196,154,42,0.3); border-radius: var(--radius-sm); padding: 14px 18px; margin-top: 26px; }

/* Knoppen op de tariefkaarten: altijd op één regel houden. Smallere
   zijruimte dan een gewone .btn, en op de krapste breedtes (drie smalle
   kolommen net boven 980px, of smalle telefoons) iets kleinere letter. */
.price-card .btn { white-space: nowrap; padding-left: 14px; padding-right: 14px; }
/* Knopkleur volgt het tariefblok dat als "featured"/"nu geldend" is
   gemarkeerd (zie JS hierboven), ongeacht welke btn-gold/btn-navy
   class er in de HTML op de link staat. */
.price-card.featured .btn { background: var(--gold); color: var(--navy-dark); }
.price-card.featured .btn:hover { background: var(--gold-light); box-shadow: 0 8px 22px rgba(196, 154, 42, 0.28); }
.price-card:not(.featured) .btn { background: var(--navy); color: var(--white); }
.price-card:not(.featured) .btn:hover { background: var(--navy-dark); box-shadow: 0 8px 22px rgba(13, 23, 48, 0.22); }
@media (min-width: 981px) and (max-width: 1080px) {
  .price-card .btn { font-size: 0.88rem; padding-left: 8px; padding-right: 8px; }
}
@media (max-width: 419px) {
  .price-card .btn { font-size: 0.9rem; }
}

/* ============ Werkgebied ============ */
.area-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.area-tag {
  background: var(--white); border: 1px solid var(--line); border-radius: 50px;
  padding: 9px 20px; font-size: 0.92rem; font-weight: 600; color: var(--navy);
  text-decoration: none; transition: border-color 0.2s, background 0.2s, transform 0.2s;
}
a.area-tag:hover { border-color: var(--gold); background: var(--gold-pale); transform: translateY(-2px); }
span.area-tag { cursor: default; }
.area-map { border-radius: var(--radius); box-shadow: var(--shadow); margin-top: 36px; }

/* ============ FAQ ============ */
.faq-list { max-width: 760px; margin: 0 auto; }
.faq-item { border: 1px solid var(--line); border-radius: var(--radius-sm); margin-bottom: 12px; background: var(--white); overflow: hidden; }
.faq-item summary {
  list-style: none; cursor: pointer; padding: 18px 22px;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1rem; color: var(--navy-dark);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
  transition: background 0.2s;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.4rem; color: var(--gold-ink); font-weight: 400;
  transition: transform 0.25s; flex-shrink: 0; line-height: 1;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-item summary:hover { background: var(--gold-pale); }
.faq-item .faq-body { padding: 0 22px 18px; color: var(--text-muted); font-size: 0.96rem; }

/* ============ CTA-banner ============ */
.cta-banner {
  background: linear-gradient(135deg, var(--navy-dark), var(--navy));
  border-radius: var(--radius); padding: 52px 40px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 26px;
  border: 1px solid rgba(196, 154, 42, 0.4);
}
.cta-banner h2 { color: var(--white); margin-bottom: 8px; font-size: clamp(1.4rem, 3vw, 1.9rem); }
.cta-banner p { color: rgba(255, 255, 255, 0.75); margin: 0; max-width: 46ch; }

/* ============ Contact ============ */
.contact-cards .card h3 { display: flex; align-items: center; gap: 10px; }
.contact-cards .card a { color: var(--navy); font-weight: 700; text-decoration: none; }
.contact-cards .card a:hover { color: var(--gold-ink); }

/* ============ Tekstpagina's (voorwaarden/privacy/diensten) ============ */
.prose { max-width: 760px; }
.prose h2 { font-size: 1.5rem; margin: 42px 0 14px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.15rem; margin: 28px 0 10px; }
.prose ul, .prose ol { margin: 0 0 1em 1.3em; }
.prose li { margin-bottom: 6px; }
.prose .updated { color: var(--text-muted); font-size: 0.9rem; }

/* Breadcrumb */
.breadcrumb { font-size: 0.85rem; margin-bottom: 22px; }
.breadcrumb ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.breadcrumb li::after { content: '›'; margin-left: 6px; color: rgba(255,255,255,0.5); }
.breadcrumb li:last-child::after { content: ''; }
.breadcrumb a { color: var(--gold-light); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb [aria-current] { color: rgba(255, 255, 255, 0.75); }

/* ============ Footer ============ */
.site-footer { background: var(--navy-deep); color: rgba(255, 255, 255, 0.72); padding: 64px 0 0; font-size: 0.92rem; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 44px; }
.footer-grid h3 { color: var(--white); font-size: 1rem; margin-bottom: 16px; }
.footer-grid ul { list-style: none; padding: 0; }
.footer-grid li { margin-bottom: 9px; }
.footer-grid a { color: rgba(255, 255, 255, 0.72); text-decoration: none; transition: color 0.2s; }
.footer-grid a:hover { color: var(--gold-light); }
.footer-logo img { height: 56px; width: auto; margin-bottom: 16px; }
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 20px 0;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; font-size: 0.84rem;
}
@media (min-width: 761px) {
  /* Ruimte rechts vrijhouden voor de zwevende contactknoppen */
  .footer-bottom { justify-content: flex-start; gap: 32px; padding-right: 340px; }
}
.footer-bottom a { color: rgba(255, 255, 255, 0.72); }
/* Subtiele social-link in de footer */
.footer-social a {
  display: inline-flex; align-items: center; gap: 7px;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
}
.footer-social a svg { flex: none; opacity: 0.85; }
.footer-social a:hover { color: var(--gold-light); }

/* ============ Mobiele belbalk ============ */
.mobile-callbar {
  display: none; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
  background: var(--navy-dark);
  border-top: 1px solid rgba(196, 154, 42, 0.22);
  box-shadow: 0 -6px 22px rgba(13, 23, 48, 0.18);
  padding: 6px 12px calc(7px + env(safe-area-inset-bottom, 0px));
  gap: 4px 8px; flex-wrap: wrap;
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s;
}
.mobile-callbar.show { opacity: 1; visibility: visible; transform: translateY(0); }
.mobile-callbar .btn {
  flex: 1; min-height: 44px; padding: 0 10px;
  font-size: 0.9rem; border-radius: 10px;
}
.mobile-callbar .btn svg { width: 16px; height: 16px; }

/* ============ Cookiemelding ============ */
.cookie-banner {
  position: fixed; bottom: 18px; left: 18px; right: 18px; z-index: 200;
  max-width: 560px; margin: 0 auto;
  background: var(--white); border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-lg); padding: 22px 24px;
}
.cookie-banner h3 { font-size: 1rem; margin-bottom: 6px; }
.cookie-banner p { font-size: 0.88rem; color: var(--text-muted); margin-bottom: 16px; }
.cookie-banner .btn-row { gap: 10px; }
.cookie-banner .btn { padding: 10px 18px; font-size: 0.9rem; }
.cookie-banner .btn-plain { background: var(--offwhite); color: var(--text); }
.cookie-banner[hidden] { display: none; }

/* ============ Animaties ============ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
.hero h1, .hero-sub, .hero .btn-row, .hero-badge { animation: fadeUp 0.7s ease both; }
.hero-sub { animation-delay: 0.08s; }
.hero .btn-row { animation-delay: 0.16s; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.55s ease, transform 0.55s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ============ Responsive ============ */
@media (max-width: 980px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .trust-strip-inner { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 36px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  .section { padding: 56px 0; }
  .hero { padding: 64px 0 56px; }
  .hero.hero-home { padding-bottom: 84px; }
  .trust-strip { padding-bottom: 48px; }
  .trust-item { padding: 16px 18px; flex-direction: column; align-items: flex-start; gap: 8px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .nav-links {
    position: fixed; inset: 73px 0 auto 0; z-index: 99;
    background: var(--navy-dark); flex-direction: column; align-items: stretch;
    padding: 18px 24px 26px; gap: 4px; border-bottom: 1px solid rgba(196, 154, 42, 0.4);
    transform: translateY(-130%); transition: transform 0.3s ease, visibility 0.3s;
    box-shadow: var(--shadow-lg);
    visibility: hidden; opacity: 0; pointer-events: none;
  }
  .nav-links.open {
    transform: translateY(0);
    visibility: visible; opacity: 1; pointer-events: auto;
  }
  .nav-links a { padding: 12px 6px; font-size: 1.02rem; display: block; }
  .nav-links .nav-cta { text-align: center; margin-top: 10px; }
  .nav-toggle { display: block; }
  .mobile-callbar { display: flex; }
  body { padding-bottom: 92px; }
  .cookie-banner { bottom: 80px; }
  .cta-banner { padding: 36px 26px; }
}

@media (max-width: 560px) {
  .hero .btn-row { flex-direction: column; align-items: stretch; }
  .hero .btn { width: 100%; }
}

@media (max-width: 480px) {
  .grid-4 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .nav-logo img { height: 44px; }
}


/* ============ Zwevende contactknoppen ============ */
.fab-contact {
  position: fixed; right: 18px; bottom: 18px; z-index: 999;
  display: flex; align-items: stretch;
  background: rgba(17, 29, 66, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 154, 42, 0.7);
  border-radius: var(--radius-sm);
  box-shadow: 0 10px 30px rgba(13, 23, 48, 0.35);
  overflow: hidden;
}
.fab-contact a {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; color: var(--white);
  font-weight: 700; font-size: 0.95rem; text-decoration: none;
  white-space: nowrap; transition: background 0.2s ease;
}
.fab-contact a:hover { background: rgba(255, 255, 255, 0.08); }
.fab-contact a + a { border-left: 1px solid rgba(196, 154, 42, 0.45); }
.fab-contact svg { width: 19px; height: 19px; flex: 0 0 auto; }
.fab-whatsapp svg { color: #25D366; }
.fab-bel svg { color: var(--gold-light); }
/* Op mobiel toont de site al een vaste belbalk onderin;
   de zwevende knoppen verbergen we daar om dubbele knoppen te voorkomen */
@media (max-width: 760px) {
  .fab-contact { display: none; }
}


/* ============ Werkgebied: foto + kaart ============ */
.gebied-visual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px;
  margin-top: 36px; align-items: stretch;
}
.visual-card {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  background: var(--navy-dark);
  /* Beide blokken exact dezelfde verhouding als de kaartposter (1180x708),
     zodat de kaart precies past en de foto netjes wordt uitgesneden */
  aspect-ratio: 1180 / 708;
}
.visual-card img {
  width: 100%; height: 100%; display: block;
  object-fit: cover; object-position: center;
}
.visual-foto figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 56px 24px 20px;
  background: linear-gradient(180deg, rgba(17, 29, 66, 0) 0%, rgba(17, 29, 66, 0.55) 45%, rgba(17, 29, 66, 0.92) 100%);
  color: var(--white);
}
.visual-foto figcaption strong {
  display: block; font-size: 1.08rem; font-weight: 800; letter-spacing: 0.01em;
}
.visual-foto figcaption span {
  display: block; margin-top: 4px; font-size: 0.88rem; font-weight: 600;
  color: var(--gold-light);
}
@media (max-width: 860px) {
  .gebied-visual { grid-template-columns: 1fr; gap: 18px; margin-top: 28px; }
  .visual-foto figcaption { padding: 44px 18px 16px; }
}



/* ============ Gouden randlijntje op de foto (1:1 met de poster) ============ */
.visual-foto::after {
  content: ''; position: absolute;
  inset: 0.88% 0.53%;
  border: 1px solid var(--gold);
  border-radius: 7px;
  pointer-events: none;
}

/* ============ beschikbaarheidsbadge bij de contactknoppen ============ */
.fab-badge {
  position: fixed; right: 18px; bottom: 76px; z-index: 999;
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(17, 29, 66, 0.94);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 154, 42, 0.55);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  color: rgba(255, 255, 255, 0.88); font-size: 0.74rem; font-weight: 700;
  letter-spacing: 0.05em; white-space: nowrap;
  transition: opacity 0.35s ease, transform 0.35s ease, visibility 0.35s ease;
}
/* Wachtstand: zolang "bereikbaar" bovenaan de pagina nog in beeld is,
   blijft de zwevende badge verborgen (zie main.js). */
.fab-badge--wacht {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  pointer-events: none;
}
.fab-badge::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(196, 154, 42, 0.25);
}
@media (max-width: 760px) { .fab-badge { display: none; } }

.callbar-badge {
  flex: 1 0 100%; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  color: rgba(255, 255, 255, 0.6); font-size: 0.62rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 1px;
}
.callbar-badge::before {
  content: ''; width: 4px; height: 4px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 2px rgba(196, 154, 42, 0.2);
}

/* ============ beschikbaarheidsregel boven de hero-badge ============ */
.hero-availability {
  display: flex; width: fit-content; align-items: center; gap: 7px;
  margin: 0 0 12px; padding: 0;
  color: var(--gold-light); font-size: 0.78rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
  animation: fadeUp 0.7s ease both;
}
.hero-availability span {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 0 3px rgba(196, 154, 42, 0.25);
}


/* ============ Pulserende beschikbaarheidsstippen ============ */
@keyframes goldpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(196, 154, 42, 0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(196, 154, 42, 0.08); }
}
.hero-availability span,
.fab-badge::before,
.callbar-badge::before {
  animation: goldpulse 2s ease-in-out infinite;
}

/* ============ Live status (gezet via de statusknop, zie main.js) ============
   De badges krijgen via JavaScript een data-live-attribuut zodra Kai een
   status heeft gezet: available (groen), later (oranje) of off (grijs).
   Zonder status blijft alles in het standaardgoud. */
@keyframes groenpulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0.08); }
}
@keyframes oranjepulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(251, 191, 36, 0.25); }
  50%       { box-shadow: 0 0 0 6px rgba(251, 191, 36, 0.08); }
}
.hero-availability[data-live="available"] span,
.fab-badge[data-live="available"]::before,
.callbar-badge[data-live="available"]::before {
  background: #4ade80; animation-name: groenpulse;
}
.hero-availability[data-live="later"] span,
.fab-badge[data-live="later"]::before,
.callbar-badge[data-live="later"]::before {
  background: #fbbf24; animation-name: oranjepulse;
}
.hero-availability[data-live="off"] span,
.fab-badge[data-live="off"]::before,
.callbar-badge[data-live="off"]::before {
  background: #94a3b8; animation: none;
  box-shadow: 0 0 0 3px rgba(148, 163, 184, 0.2);
}
.hero-availability[data-live="available"] { color: #4ade80; }
.hero-availability[data-live="later"] { color: #fbbf24; }
.hero-availability[data-live="off"] { color: rgba(255, 255, 255, 0.75); }
/* Statusstip in de tarieven-pop-up: standaard neutraal goud (zie basis
   .gps-avail__dot); alleen groen zodra er live "beschikbaar" is gezet. */
.gps-avail__status[data-live="available"] .gps-avail__dot {
  background: #4ade80; animation: gpsPulse 2.2s infinite;
}
.gps-avail__status[data-live="later"] .gps-avail__dot {
  background: #fbbf24; animation: none;
  box-shadow: 0 0 0 4px rgba(251, 191, 36, 0.2);
}
.gps-avail__status[data-live="off"] .gps-avail__dot {
  background: #94a3b8; animation: none;
  box-shadow: 0 0 0 4px rgba(148, 163, 184, 0.2);
}

/* ============ Uitgeschakelde taalknop (geen EN-vertaling beschikbaar) ============ */
.nav-lang a.lang-disabled,
.fab-lang a.lang-disabled,
.footer-lang-switch a.lang-disabled {
  opacity: 0.35; cursor: not-allowed; pointer-events: none;
}

/* ============ Taalwissel NL / EN ============ */
/* Zwevende taalknop linksonder — zelfde uitstraling als de
   contactknoppen rechtsonder (navy glas, gouden rand, segmenten). */
.fab-lang {
  /* Uitgeschakeld: de taalwissel staat nu rechtsboven onder de header
     (.nav-lang, op alle schermformaten). Markup blijft staan als fallback. */
  display: none;
  position: fixed; left: 16px; bottom: 16px; z-index: 999;
  align-items: stretch;
  background: rgba(17, 29, 66, 0.9);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 154, 42, 0.45);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(13, 23, 48, 0.28);
  overflow: hidden; opacity: 0.92;
}
.fab-lang:hover { opacity: 1; }
.fab-lang a {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 11px;
  color: rgba(255, 255, 255, 0.72);
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.03em; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.fab-lang a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.fab-lang a + a { border-left: 1px solid rgba(196, 154, 42, 0.35); }
.fab-lang a svg { width: 12px; height: 12px; flex: 0 0 auto; color: var(--gold-light); }
.fab-lang a[aria-current="true"] { background: var(--gold); color: var(--navy-dark); }
.fab-lang a[aria-current="true"]:hover { background: var(--gold-light); }
.fab-lang a[aria-current="true"] svg { color: var(--navy-dark); }
/* Op mobiel staat onderin al de vaste belbalk; daar tonen we
   de taalwissel in de footer i.p.v. zwevend, om overlap te voorkomen. */
@media (max-width: 760px) { .fab-lang { display: none; } }

/* Taalwissel in de footer (zichtbaar op mobiel, nette fallback overal) */
.footer-lang {
  display: flex; align-items: center; gap: 10px;
  flex: 1 0 100%; padding-top: 4px;
}
.footer-lang .footer-lang-label {
  font-size: 0.8rem; color: rgba(255, 255, 255, 0.55);
}
.footer-lang-switch {
  display: inline-flex; align-items: stretch;
  border: 1px solid rgba(196, 154, 42, 0.5);
  border-radius: var(--radius-sm); overflow: hidden;
}
.footer-lang-switch a {
  display: inline-flex; align-items: center;
  padding: 5px 12px;
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 0.74rem; letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.72); text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.footer-lang-switch a + a { border-left: 1px solid rgba(196, 154, 42, 0.4); }
.footer-lang-switch a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.footer-lang-switch a[aria-current="true"] { background: var(--gold); color: var(--navy-dark); }
@media (min-width: 761px) {
  /* Op desktop volstaat de zwevende knop; footer-variant subtieler tonen */
  .footer-lang { flex-basis: auto; }
}

/* ============ Beschikbaarheids-widget (pop-up bij de tarieven) ============ */
/* Opent via de "Doe de test"-knop in de tarievensectie. De tijden/prijzen
   staan in de HTML van de widget, de postcodebereiken onderin js/main.js. */

/* Kopregel tarievensectie: tekst links, testknop rechtsboven */
.tarieven-top {
  display: flex; justify-content: space-between; align-items: center;
  gap: 28px; margin-bottom: 42px;
}
.tarieven-top .section-intro { margin-bottom: 0; }
.gps-open {
  flex: none; text-align: left; cursor: pointer;
  background: var(--gold); color: var(--navy-dark);
  border: none; border-radius: var(--radius);
  padding: 18px 24px;
  box-shadow: 0 14px 30px -14px rgba(196, 154, 42, 0.9);
  transition: transform 0.15s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.gps-open:hover { background: var(--gold-light); transform: translateY(-2px); }
.gps-open:active { transform: translateY(0); }
.gps-open strong {
  display: block; font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.15rem;
}
.gps-open span {
  display: block; margin-top: 3px;
  font-family: 'Manrope', sans-serif; font-weight: 600; font-size: 0.86rem;
  opacity: 0.85;
}
@media (max-width: 760px) {
  .tarieven-top { flex-direction: column; align-items: stretch; gap: 20px; margin-bottom: 36px; }
  .gps-open { width: 100%; }
}
/* Compacte variant in de hero van spoed- en locatiepagina's */
.hero .gps-open { padding: 8px 22px; min-height: 52px; }
.hero .gps-open strong { font-size: 0.98rem; }
.hero .gps-open span { font-size: 0.76rem; margin-top: 1px; }

/* De pop-up (modal) */
.gps-modal {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; padding: 28px 16px;
  overflow-y: auto;
  background: rgba(13, 23, 48, 0.62);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.gps-modal[hidden] { display: none; }
body.gps-modal-open { overflow: hidden; }
.gps-modal .gps-avail { margin: auto; animation: gpsModalIn 0.25s ease both; }
@keyframes gpsModalIn {
  from { opacity: 0; transform: translateY(14px) scale(0.98); }
  to { opacity: 1; transform: none; }
}
.gps-modal__close {
  position: absolute; top: 16px; right: 16px;
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.25);
  color: var(--white); cursor: pointer;
  transition: background 0.15s ease;
}
.gps-modal__close:hover { background: rgba(255, 255, 255, 0.22); }
.gps-modal__close svg { width: 15px; height: 15px; }

.gps-avail {
  width: 100%; max-width: 520px;
  background: var(--offwhite);
  border: 1px solid var(--line); border-radius: 20px;
  overflow: hidden; text-align: left;
  box-shadow: 0 18px 50px -24px rgba(17, 29, 66, 0.4);
}
.gps-avail__head { position: relative; background: var(--navy-dark); color: var(--white); padding: 22px 60px 20px 24px; }
.gps-avail__eyebrow {
  font-family: 'Sora', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light);
}
.gps-avail__title { color: var(--white); font-size: 1.4rem; margin-top: 6px; }
.gps-avail__status {
  display: inline-flex; align-items: center; gap: 9px;
  margin: 14px 0 0; padding: 7px 13px 7px 11px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 999px; font-size: 0.85rem; font-weight: 600;
}
.gps-avail__dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0;
  background: var(--gold); box-shadow: 0 0 0 4px rgba(196, 154, 42, 0.18);
}
@keyframes gpsPulse {
  0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  70% { box-shadow: 0 0 0 9px rgba(74, 222, 128, 0); }
  100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
}
.gps-avail__bands { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 18px 24px 4px; }
.gps-band {
  border: 1px solid var(--line); border-radius: 12px; background: var(--white);
  padding: 11px 8px; text-align: center;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gps-band__label {
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--text-muted); font-weight: 600;
}
.gps-band__time { font-size: 0.66rem; color: var(--text-muted); margin-top: 2px; }
.gps-band__price { font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.15rem; margin-top: 6px; color: var(--navy-dark); }
.gps-band.is-active {
  border-color: var(--gold); background: var(--gold-pale);
  transform: translateY(-3px);
  box-shadow: 0 10px 22px -14px rgba(196, 154, 42, 0.7);
}
.gps-band.is-active .gps-band__price { color: var(--gold); }
.gps-band.is-active .gps-band__label::after { content: ' · nu'; color: var(--gold); }
html[lang="en"] .gps-band.is-active .gps-band__label::after { content: ' · now'; }
.gps-avail__disclaimer { padding: 10px 26px 0; margin: 0; font-size: 0.72rem; line-height: 1.5; color: var(--text-muted); }
.gps-avail__body { padding: 18px 24px 24px; }
.gps-avail__q { font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1rem; color: var(--navy-dark); margin: 0 0 10px; }
.gps-field { display: flex; gap: 8px; }
.gps-field input {
  flex: 1; min-width: 0;
  font-family: 'Manrope', sans-serif; font-size: 1rem; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  padding: 13px 15px; border: 1.5px solid var(--line); border-radius: 12px;
  background: var(--white); color: var(--text);
  transition: border-color 0.15s ease;
}
.gps-field input::placeholder { color: #a7adc0; font-weight: 500; letter-spacing: 0.02em; text-transform: none; }
.gps-field input:focus { outline: none; border-color: var(--gold); }
.gps-field button {
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 0.95rem;
  padding: 0 20px; border: none; border-radius: 12px; cursor: pointer;
  background: var(--navy-dark); color: var(--white);
  transition: background 0.15s ease;
}
.gps-field button:hover { background: var(--navy); }
.gps-result { margin-top: 16px; display: none; }
.gps-result.is-shown { display: block; animation: gpsIn 0.28s ease both; }
@keyframes gpsIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.gps-result__card { border-radius: 14px; padding: 16px 17px; border: 1px solid var(--line); }
.gps-result__card--ok { background: #e6f2ec; border-color: rgba(31, 138, 76, 0.25); }
.gps-result__card--no { background: #fbf1ea; border-color: rgba(180, 90, 40, 0.22); }
.gps-result__line {
  display: flex; align-items: center; gap: 9px;
  font-family: 'Sora', sans-serif; font-weight: 600; font-size: 1.02rem;
}
.gps-result__line svg { flex-shrink: 0; }
.gps-result__line--ok { color: var(--green); }
.gps-result__line--no { color: #b4511e; }
.gps-result__sub { font-size: 0.9rem; color: var(--text-muted); margin: 6px 0 0; line-height: 1.45; }
.gps-result__sub strong { color: var(--text); }
.gps-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 14px; width: 100%;
  font-family: 'Sora', sans-serif; font-weight: 700; font-size: 1.08rem;
  padding: 15px; border-radius: 12px; text-decoration: none;
  background: var(--gold); color: var(--navy-dark);
  transition: transform 0.12s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 10px 24px -12px rgba(196, 154, 42, 0.9);
}
.gps-cta:hover { transform: translateY(-2px); background: var(--gold-light); }
.gps-cta:active { transform: translateY(0); }
.gps-cta svg { width: 20px; height: 20px; flex-shrink: 0; }
.gps-alt {
  display: block; text-align: center; margin-top: 11px;
  font-size: 0.86rem; color: var(--text-muted); text-decoration: none; font-weight: 600;
}
.gps-alt:hover { color: var(--navy-dark); }
.gps-foot {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  padding: 14px 24px 20px; border-top: 1px solid var(--line);
  font-size: 0.74rem; color: var(--text-muted); font-weight: 600;
}
.gps-foot span { display: inline-flex; align-items: center; gap: 5px; }
.gps-foot svg { width: 13px; height: 13px; color: var(--gold); }
@media (max-width: 400px) {
  .gps-avail__bands { gap: 5px; padding: 16px 16px 4px; }
  .gps-band { padding: 9px 6px; }
  .gps-avail__head, .gps-avail__body { padding-left: 18px; padding-right: 18px; }
  .gps-avail__disclaimer { padding-left: 20px; padding-right: 20px; }
}

/* ============ Taalwissel mobiel — zwevend onder de menuknop ============ */
/* Alleen zichtbaar op mobiel. Hangt aan de onderkant van de header,
   rechts uitgelijnd onder de hamburger, en steekt er net onder uit.
   Beweegt automatisch mee met de header (mét of zonder prelaunch-balk),
   dus geen JS nodig voor de positie. Fadet weg zodra de bezoeker scrolt. */
.nav-lang {
  display: inline-flex;
  position: absolute;
  /* Uitgelijnd op de vaste contactknoppen rechtsonder: 18px vanaf de
     schermrand (de header-container is smaller, vandaar de calc). */
  top: calc(100% + 10px); right: calc(50% - 50vw + 18px);
  z-index: 98;
  align-items: stretch;
  background: rgba(17, 29, 66, 0.92);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(196, 154, 42, 0.45);
  border-radius: var(--radius-sm);
  box-shadow: 0 6px 18px rgba(13, 23, 48, 0.3);
  overflow: hidden;
  transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
}
.nav-lang a {
  display: inline-flex; align-items: center;
  padding: 5px 11px;
  color: rgba(255, 255, 255, 0.75);
  font-family: 'Sora', sans-serif; font-weight: 600;
  font-size: 0.72rem; letter-spacing: 0.03em; text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.nav-lang a + a { border-left: 1px solid rgba(196, 154, 42, 0.35); }
.nav-lang a:hover { background: rgba(255, 255, 255, 0.08); color: var(--white); }
.nav-lang a[aria-current="true"] { background: var(--gold); color: var(--navy-dark); }
/* Weggefade-toestand (na scrollen) */
.nav-lang.hide {
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  pointer-events: none;
}


/* ============ Hero: persoonlijke Kai-regel + tarievenlink ============
   Alleen gebruikt op de homepage (nl + en). De avatar toont het gezicht
   uit de bestaande werkfoto via object-position. */
.hero-kai {
  display: flex; align-items: center; gap: 12px;
  margin: -6px 0 26px;
  animation: fadeUp 0.7s ease both; animation-delay: 0.12s;
}
.hero-kai-foto {
  width: 48px; height: 48px; border-radius: 50%; overflow: hidden;
  border: 2px solid var(--gold); flex-shrink: 0;
  position: relative; display: block;
}
.hero-kai-foto img {
  /* close-up van het gezicht uit de liggende werkfoto */
  position: absolute; width: 380px; height: auto; max-width: none;
  left: -166px; top: -22px;
}
.hero-kai span { font-size: 0.98rem; color: rgba(255, 255, 255, 0.82); }
.hero-kai strong { color: var(--gold-light); font-weight: 700; }
.hero-link {
  display: inline-block; margin-top: 18px;
  color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; font-weight: 600;
  text-decoration: underline; text-underline-offset: 4px;
  text-decoration-color: rgba(196, 154, 42, 0.6);
  animation: fadeUp 0.7s ease both; animation-delay: 0.24s;
}
.hero-link:hover, .hero-link:focus-visible { color: var(--gold-light); }