/* i-job template Passage · ported 1:1 from a hand-built one-page immigration advisory site (inline CSS moved here) */
/* ============================================================
   1. DESIGN TOKENS — één set variabelen, twee thema's
   ============================================================ */
:root{
  /* --- Licht (standaard): warm papier, diep bosgroen, brons --- */
  --paper:      #F1ECDD;
  --paper-dim:  #E6DFC9;
  --surface:    #FBF8EE;
  --surface-2:  #FFFFFF;

  --ink:        #15302A;
  --ink-2:      #1F473D;
  --muted:      #5B6E64;

  --gold:       #B8863E;
  --gold-deep:  #8A5F27;   /* tekstveilig op papier */
  --gold-soft:  rgba(184,134,62,.12);
  --canal:      #3D6E68;
  --canal-soft: rgba(61,110,104,.12);

  --line:       rgba(21,48,42,.14);
  --line-2:     rgba(21,48,42,.07);

  --alt-bg:     #15302A;   /* secties met .on-dark */
  --alt-bg-2:   #1F473D;
  --alt-text:   #F1ECDD;
  --alt-muted:  #A9BDB2;
  --alt-line:   rgba(241,236,221,.16);

  --shadow-sm:  0 1px 2px rgba(21,48,42,.06), 0 4px 14px -8px rgba(21,48,42,.18);
  --shadow-md:  0 2px 6px rgba(21,48,42,.06), 0 18px 44px -22px rgba(21,48,42,.34);
  --shadow-lg:  0 30px 70px -34px rgba(21,48,42,.42);
  --img-filter: none;
  --scrim:      linear-gradient(180deg, rgba(9,26,22,.30) 0%, rgba(9,26,22,.42) 45%, rgba(9,26,22,.80) 100%);

  /* --- Routekleuren: de rode draad van de pagina --- */
  --route-kort:  var(--canal);
  --route-samen: var(--gold);

  --font-display: "Fraunces", ui-serif, Georgia, serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --text-xs:   clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem);
  --text-sm:   clamp(0.875rem, 0.84rem + 0.18vw, 0.9375rem);
  --text-base: clamp(1rem, 0.96rem + 0.22vw, 1.0625rem);
  --text-lg:   clamp(1.15rem, 1.06rem + 0.45vw, 1.35rem);
  --text-xl:   clamp(1.5rem, 1.3rem + 0.9vw, 2rem);
  --text-2xl:  clamp(2rem, 1.62rem + 1.9vw, 3.05rem);
  --text-3xl:  clamp(2.4rem, 1.8rem + 3vw, 4.2rem);
  --text-hero: clamp(2.5rem, 1.85rem + 4.6vw, 5.6rem);

  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1.1rem;
  --space-md:  1.75rem;
  --space-lg:  clamp(2.5rem, 2rem + 2vw, 4rem);
  --space-xl:  clamp(4rem, 3rem + 4vw, 7rem);
  --space-2xl: clamp(5.5rem, 4rem + 6vw, 9.5rem);

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-xl: 32px;

  --ease:      cubic-bezier(.22,1,.36,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
  --container: 1220px;
  --gutter:    clamp(1.15rem, 4vw, 3.5rem);
  --header-h:  76px;
}

[data-theme="dark"]{
  /* --- Donker: cinematic inkt met champagnegoud --- */
  --paper:      #0D1420;
  --paper-dim:  #131B2C;
  --surface:    #141D2E;
  --surface-2:  #1A2438;

  --ink:        #F4F1E8;
  --ink-2:      #DCD7C8;
  --muted:      #96A2B2;

  --gold:       #C6A15B;
  --gold-deep:  #DDBE7E;
  --gold-soft:  rgba(198,161,91,.14);
  --canal:      #6FA095;
  --canal-soft: rgba(111,160,149,.14);

  --line:       rgba(198,161,91,.20);
  --line-2:     rgba(255,255,255,.07);

  --alt-bg:     #131B2C;
  --alt-bg-2:   #1A2438;
  --alt-text:   #F4F1E8;
  --alt-muted:  #96A2B2;
  --alt-line:   rgba(255,255,255,.10);

  --shadow-sm:  0 1px 2px rgba(0,0,0,.4), 0 4px 14px -8px rgba(0,0,0,.6);
  --shadow-md:  0 2px 6px rgba(0,0,0,.4), 0 18px 44px -22px rgba(0,0,0,.8);
  --shadow-lg:  0 30px 70px -34px rgba(0,0,0,.9);
  --img-filter: brightness(.86) saturate(.94);
  --scrim:      linear-gradient(180deg, rgba(6,10,17,.52) 0%, rgba(6,10,17,.60) 45%, rgba(6,10,17,.94) 100%);
}

/* ============================================================
   2. RESET & BASIS
   ============================================================ */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:var(--text-base);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  transition:background-color .4s var(--ease-soft), color .4s var(--ease-soft);
}
body.no-scroll{ overflow:hidden; }
img,svg,video{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button,input,select,textarea{ font:inherit; color:inherit; }
button{ background:none; border:none; cursor:pointer; }
ul{ list-style:none; }
::selection{ background:var(--gold); color:var(--paper); }

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-0.015em;
  font-variation-settings:"SOFT" 0, "WONK" 0;
}
h2{ font-size:var(--text-2xl); }
h3{ font-size:var(--text-xl); }
em{ font-style:italic; color:var(--gold-deep); }

:focus-visible{ outline:2.5px solid var(--gold); outline-offset:3px; border-radius:4px; }

.container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:var(--gutter); }
section{ position:relative; }
.section{ padding-block:var(--space-2xl); scroll-margin-top:calc(var(--header-h) + 12px); }
.section-sm{ padding-block:var(--space-xl); }

.on-dark{ background:var(--alt-bg); color:var(--alt-text); }
.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{ color:var(--alt-text); }
.on-dark .lede,.on-dark p{ color:var(--alt-muted); }
.on-dark em{ color:var(--gold); }

.eyebrow{
  display:inline-flex; align-items:center; gap:.65em;
  font-size:var(--text-xs); font-weight:600; letter-spacing:.18em; text-transform:uppercase;
  color:var(--gold-deep); margin-bottom:var(--space-sm);
}
.eyebrow::before{ content:''; width:24px; height:1.5px; background:currentColor; flex:none; }
.on-dark .eyebrow{ color:var(--gold); }

.lede{ font-size:var(--text-lg); color:var(--muted); max-width:56ch; line-height:1.65; }
.section-head{ max-width:none; margin-bottom:var(--space-lg); }
.section-head h2{ max-width:20ch; }
.section-head .lede{ margin-top:var(--space-sm); }
.text-mono{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.06em; }

/* ============================================================
   3. KNOPPEN
   ============================================================ */
.btn{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem;
  padding:.95rem 1.6rem; border-radius:999px;
  font-size:var(--text-sm); font-weight:600; letter-spacing:.01em;
  border:1.5px solid transparent; cursor:pointer; text-align:center;
  transition:transform .25s var(--ease), box-shadow .25s var(--ease),
             background-color .25s var(--ease-soft), color .25s var(--ease-soft),
             border-color .25s var(--ease-soft);
}
.btn svg{ width:17px; height:17px; flex:none; transition:transform .25s var(--ease); }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--gold); color:#1B1206; border-color:var(--gold); }
[data-theme="dark"] .btn-primary{ color:#17110A; }
.btn-primary:hover{ transform:translateY(-2px); box-shadow:0 14px 30px -12px rgba(184,134,62,.7); }
.btn-dark{ background:var(--ink); color:var(--paper); border-color:var(--ink); }
.btn-dark:hover{ transform:translateY(-2px); box-shadow:var(--shadow-md); }
.btn-outline{ border-color:var(--line); color:var(--ink); }
.btn-outline:hover{ border-color:var(--gold); color:var(--gold-deep); transform:translateY(-2px); }
.on-dark .btn-outline{ border-color:var(--alt-line); color:var(--alt-text); }
.on-dark .btn-outline:hover{ border-color:var(--gold); color:var(--gold); }
.btn-ghost{ border-color:rgba(255,255,255,.34); color:#FFF; backdrop-filter:blur(6px); background:rgba(255,255,255,.06); }
.btn-ghost:hover{ border-color:#FFF; background:rgba(255,255,255,.14); transform:translateY(-2px); }
.btn-sm{ padding:.68rem 1.15rem; font-size:var(--text-xs); }
.btn-block{ width:100%; }

/* ============================================================
   4. REVEAL-UTILITY
   ============================================================ */
.reveal{
  opacity:0; transform:translateY(26px);
  transition:opacity .7s var(--ease) calc(var(--i, 0) * 90ms),
             transform .7s var(--ease) calc(var(--i, 0) * 90ms);
}
.reveal.is-visible{ opacity:1; transform:none; }
.reveal-scale{
  opacity:0; transform:scale(.96);
  transition:opacity .8s var(--ease) calc(var(--i, 0) * 90ms),
             transform .8s var(--ease) calc(var(--i, 0) * 90ms);
}
.reveal-scale.is-visible{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  .reveal,.reveal-scale{ opacity:1; transform:none; }
}

/* ============================================================
   5. HEADER / NAVIGATIE
   ============================================================ */
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:1000;
  background:var(--gold); color:#1B1206; padding:.8em 1.2em; border-radius:0 0 8px 0; font-weight:600;
}
.skip-link:focus{ left:0; }

.site-header{
  position:fixed; inset:0 0 auto 0; z-index:400;
  transition:background-color .35s var(--ease-soft), box-shadow .35s var(--ease-soft), border-color .35s;
  border-bottom:1px solid transparent;
}
.site-header.is-stuck{
  background:color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter:blur(16px) saturate(1.4);
  border-bottom-color:var(--line-2);
  box-shadow:0 1px 24px -14px rgba(0,0,0,.5);
}
.header-inner{ display:flex; align-items:center; gap:var(--space-md); min-height:var(--header-h); }

.brand{ display:flex; align-items:center; gap:.6rem; flex:none; }
.brand-mark{
  width:34px; height:34px; flex:none; display:grid; place-items:center; border-radius:10px;
  background:#15302A; color:#B8863E; font-family:var(--font-display); font-size:1.15rem; font-weight:600; line-height:1;
}
.footer-brand .brand-mark{ background:#0F241F; }
.brand-name{ font-family:var(--font-display); font-size:1.02rem; line-height:1.15; font-weight:600; letter-spacing:-.01em; color:#FFF; }
.brand-name span{ display:block; font-family:var(--font-body); font-size:.62rem; font-weight:600; letter-spacing:.16em; text-transform:uppercase; opacity:.72; }
.is-stuck .brand-name, .menu-open .brand-name{ color:var(--ink); }

.main-nav{ margin-left:auto; }
.main-nav ul{ display:flex; gap:clamp(.9rem, 1.4vw, 1.6rem); }
.main-nav a{
  position:relative; font-size:var(--text-sm); font-weight:500; color:rgba(255,255,255,.9);
  padding-block:.35rem; transition:color .25s; white-space:nowrap;
}
.is-stuck .main-nav a{ color:var(--muted); }
.main-nav a::after{
  content:''; position:absolute; left:0; bottom:0; height:1.5px; width:0; background:var(--gold);
  transition:width .3s var(--ease);
}
.main-nav a:hover, .main-nav a.is-active{ color:var(--gold); }
.main-nav a:hover::after, .main-nav a.is-active::after{ width:100%; }

.header-actions{ display:flex; align-items:center; gap:.6rem; flex:none; }
.header-phone{
  display:inline-flex; align-items:center; gap:.45rem; font-size:var(--text-sm); font-weight:600;
  color:rgba(255,255,255,.92); white-space:nowrap;
}
.is-stuck .header-phone{ color:var(--ink); }
.header-phone svg{ width:16px; height:16px; }

.icon-toggle{
  display:inline-flex; align-items:center; justify-content:center; gap:.2rem;
  height:38px; min-width:38px; padding-inline:.55rem;
  border:1.5px solid rgba(255,255,255,.32); border-radius:999px;
  color:rgba(255,255,255,.94); font-size:.72rem; font-weight:700; letter-spacing:.04em;
  transition:border-color .25s, color .25s, background-color .25s;
}
.is-stuck .icon-toggle, .mobile-menu .icon-toggle{ border-color:var(--line); color:var(--ink); }
.icon-toggle:hover{ border-color:var(--gold); color:var(--gold); }
.icon-toggle svg{ width:17px; height:17px; }
.theme-toggle .icon-moon{ display:none; }
[data-theme="dark"] .theme-toggle .icon-sun{ display:none; }
[data-theme="dark"] .theme-toggle .icon-moon{ display:block; }

.nav-toggle{ display:none; width:40px; height:38px; flex-direction:column; justify-content:center; gap:5px; align-items:center; }
.nav-toggle span{ display:block; width:20px; height:1.8px; background:#FFF; border-radius:2px; transition:transform .3s var(--ease), opacity .25s; }
.is-stuck .nav-toggle span, .menu-open .nav-toggle span{ background:var(--ink); }
.menu-open .nav-toggle span:nth-child(1){ transform:translateY(6.8px) rotate(45deg); }
.menu-open .nav-toggle span:nth-child(2){ opacity:0; }
.menu-open .nav-toggle span:nth-child(3){ transform:translateY(-6.8px) rotate(-45deg); }

.mobile-menu{
  position:fixed; inset:0; z-index:390; background:var(--paper); color:var(--ink);
  padding:calc(var(--header-h) + 2rem) var(--gutter) 2rem;
  display:flex; flex-direction:column; justify-content:space-between; gap:2rem;
  transform:translateY(-101%); transition:transform .5s var(--ease); overflow-y:auto;
}
.mobile-menu.is-open{ transform:none; }
.mobile-menu a{ display:flex; align-items:baseline; gap:.9rem; }
.mobile-menu nav ul li{ border-bottom:1px solid var(--line-2); }
.mobile-menu nav a{ padding-block:.85rem; font-family:var(--font-display); font-size:1.55rem; }
.mm-num{ font-family:var(--font-mono); font-size:.7rem; color:var(--gold-deep); }
.mobile-menu-footer{ display:flex; flex-direction:column; gap:.7rem; align-items:flex-start; }
.mobile-menu-contact{ display:contents; }

/* ============================================================
   6. HERO
   ============================================================ */
.hero{
  position:relative; min-height:min(100svh, 900px); display:flex; align-items:flex-end;
  padding-top:calc(var(--header-h) + 3rem);
  padding-bottom:clamp(6rem, 12vw, 9rem);
  overflow:hidden; isolation:isolate;
}
.hero-media{ position:absolute; inset:0; z-index:-2; background:var(--alt-bg); }
.hero-media img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); }
.hero-scrim{ position:absolute; inset:0; z-index:-1; background:var(--scrim); }
.hero-route{ position:absolute; inset:0; z-index:-1; width:100%; height:100%; pointer-events:none; }
.hero-route path{ fill:none; stroke-linecap:round; }
.hero-route .route-dash{ stroke:rgba(255,255,255,.22); stroke-width:1.6; stroke-dasharray:2 12; }
.hero-route .route-solid{
  stroke:var(--gold); stroke-width:2.4; stroke-dasharray:2600; stroke-dashoffset:2600;
  animation:routeDraw 3.4s var(--ease) .5s forwards;
}
@keyframes routeDraw{ to{ stroke-dashoffset:0; } }
.hero-route circle{ fill:var(--gold); opacity:0; animation:routePin .8s var(--ease) forwards; }
@keyframes routePin{ to{ opacity:1; } }

.hero-inner{ position:relative; color:#FFF; }
.hero-badge{
  display:inline-flex; align-items:center; gap:.55rem;
  padding:.45rem 1rem; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.24);
  backdrop-filter:blur(8px);
  font-size:var(--text-xs); font-weight:600; letter-spacing:.05em;
}
.hero-badge svg{ width:15px; height:15px; color:var(--gold); }
.hero h1{
  font-size:var(--text-hero); color:#FFF; margin-top:var(--space-sm); max-width:15ch;
  text-wrap:balance;
}
.hero h1 em{ color:var(--gold); }
.hero-sub{ margin-top:var(--space-sm); max-width:52ch; font-size:var(--text-lg); color:rgba(255,255,255,.9); }
.hero-cta-row{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:var(--space-md); }
.hero-disclaimer{
  display:flex; align-items:flex-start; gap:.5rem; margin-top:var(--space-sm);
  font-size:var(--text-xs); color:rgba(255,255,255,.74); max-width:56ch;
}
.hero-disclaimer svg{ width:14px; height:14px; flex:none; margin-top:3px; }
.hero-stats{
  display:flex; flex-wrap:wrap; gap:clamp(1.4rem, 4vw, 3.2rem);
  margin-top:var(--space-lg); padding-top:var(--space-sm);
  border-top:1px solid rgba(255,255,255,.22);
}
.hero-stat b{ display:block; font-family:var(--font-display); font-size:clamp(1.5rem,2.6vw,2.1rem); font-weight:500; color:var(--gold); }
.hero-stat span{ font-size:var(--text-xs); color:rgba(255,255,255,.78); letter-spacing:.03em; }

/* ============================================================
   7. ROUTEKIEZER — de kern van de pagina
   ============================================================ */
.routes{ margin-top:calc(-1 * clamp(3.5rem, 7vw, 6rem)); position:relative; z-index:5; padding-bottom:var(--space-2xl); }
.routes-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:clamp(1rem, 2vw, 1.6rem); }
.route-card{
  position:relative; display:flex; flex-direction:column;
  background:var(--surface); border:1px solid var(--line); border-top:4px solid var(--accent);
  border-radius:var(--radius-lg); padding:clamp(1.6rem, 3vw, 2.6rem);
  box-shadow:var(--shadow-md);
  transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .3s;
}
.route-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.route-card[data-route="kort"]{ --accent:var(--route-kort); --accent-soft:var(--canal-soft); }
.route-card[data-route="samen"]{ --accent:var(--route-samen); --accent-soft:var(--gold-soft); }
.route-flag{
  position:absolute; top:-1px; right:clamp(1.6rem,3vw,2.6rem); transform:translateY(-50%);
  background:var(--accent); color:#FFF; font-size:var(--text-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.4rem .9rem; border-radius:999px;
}
[data-theme="dark"] .route-flag{ color:#101820; }
.route-icon{
  width:52px; height:52px; border-radius:14px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent); margin-bottom:var(--space-sm);
}
.route-icon svg{ width:26px; height:26px; }
.route-card h3{ font-size:clamp(1.35rem,2.4vw,1.85rem); }
.route-kicker{ font-family:var(--font-mono); font-size:var(--text-xs); letter-spacing:.1em; text-transform:uppercase; color:var(--accent); margin-bottom:.5rem; display:block; }
.route-card > p{ color:var(--muted); margin-top:.6rem; }
.route-points{ margin-top:var(--space-sm); display:grid; gap:.6rem; }
.route-points li{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--text-sm); }
.route-points svg{ width:17px; height:17px; flex:none; margin-top:3px; color:var(--accent); }
.route-foot{
  margin-top:auto; padding-top:var(--space-md);
  display:flex; flex-wrap:wrap; align-items:center; gap:.9rem; justify-content:space-between;
}
.route-price b{ font-family:var(--font-display); font-size:1.6rem; font-weight:500; }
.route-price span{ display:block; font-size:var(--text-xs); color:var(--muted); }
.route-card .btn-primary{ background:var(--accent); border-color:var(--accent); color:#FFF; }
[data-theme="dark"] .route-card .btn-primary{ color:#101820; }

/* ============================================================
   8. VERGELIJKINGSTABELLEN
   ============================================================ */
.table-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius-md); border:1px solid var(--line); background:var(--surface); }
table.compare{ width:100%; border-collapse:collapse; min-width:620px; font-size:var(--text-sm); }
table.compare th, table.compare td{ padding:.95rem 1.1rem; text-align:left; border-bottom:1px solid var(--line-2); vertical-align:top; }
table.compare thead th{
  font-family:var(--font-body); font-size:var(--text-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; background:var(--paper-dim);
  border-bottom:1px solid var(--line);
}
table.compare thead th.col-kort{ color:var(--route-kort); box-shadow:inset 0 -3px 0 var(--route-kort); }
table.compare thead th.col-samen{ color:var(--gold-deep); box-shadow:inset 0 -3px 0 var(--route-samen); }
table.compare tbody th{ font-family:var(--font-body); font-weight:600; font-size:var(--text-sm); width:32%; }
table.compare tr:last-child th, table.compare tr:last-child td{ border-bottom:none; }
table.compare tbody tr:hover{ background:var(--gold-soft); }
.yes{ color:var(--canal); font-weight:700; }
.no{ color:var(--muted); }
.highlight-col{ background:var(--gold-soft); }
.table-note{ margin-top:.8rem; font-size:var(--text-xs); color:var(--muted); }

/* ============================================================
   9. KAARTEN / VOORDELEN
   ============================================================ */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(270px, 1fr)); gap:clamp(1rem,2vw,1.5rem); }
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-md);
  padding:clamp(1.4rem,2.4vw,1.9rem);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .3s;
}
.card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--gold); }
.on-dark .card{ background:var(--alt-bg-2); border-color:var(--alt-line); }
.card-icon{ width:42px; height:42px; border-radius:12px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold-deep); margin-bottom:.9rem; }
.card-icon svg{ width:21px; height:21px; }
.card h3{ font-size:1.12rem; margin-bottom:.4rem; }
.card p{ font-size:var(--text-sm); color:var(--muted); }
.on-dark .card p{ color:var(--alt-muted); }

/* ============================================================
   10. SPLIT-SECTIES (tekst + beeld)
   ============================================================ */
.split{ display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(2rem,5vw,4.5rem); align-items:center; }
.split.reverse .split-media{ order:-1; }
.split-media{ position:relative; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.split-media img{ width:100%; aspect-ratio:4/3.2; object-fit:cover; filter:var(--img-filter); transition:transform 1.1s var(--ease-soft); }
.split-media:hover img{ transform:scale(1.04); }
.split-media-badge{
  position:absolute; left:1.1rem; bottom:1.1rem; right:1.1rem;
  background:color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:var(--radius-md); padding:.9rem 1.1rem;
  font-size:var(--text-sm); display:flex; gap:.7rem; align-items:center;
}
.split-media-badge svg{ width:20px; height:20px; color:var(--gold-deep); flex:none; }
.split-body h2{ max-width:18ch; }
.split-body > p{ margin-top:var(--space-sm); color:var(--muted); }
.on-dark .split-body > p{ color:var(--alt-muted); }

.check-list{ display:grid; gap:.7rem; margin-top:var(--space-md); }
.check-list li{ display:flex; gap:.7rem; align-items:flex-start; font-size:var(--text-sm); }
.check-list svg{ width:18px; height:18px; flex:none; margin-top:3px; color:var(--gold-deep); }
.on-dark .check-list svg{ color:var(--gold); }

.callout{
  margin-top:var(--space-md); display:flex; gap:.9rem; align-items:flex-start;
  padding:1.1rem 1.3rem; border-radius:var(--radius-md);
  background:var(--gold-soft); border-left:3px solid var(--gold);
  font-size:var(--text-sm);
}
.callout svg{ width:20px; height:20px; flex:none; color:var(--gold-deep); margin-top:2px; }
.callout b{ display:block; margin-bottom:.15rem; }
.callout.callout-canal{ background:var(--canal-soft); border-left-color:var(--canal); }
.callout.callout-canal svg{ color:var(--canal); }

.pill-row{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:var(--space-sm); }
.pill{
  font-size:var(--text-xs); font-weight:600; padding:.4rem .85rem; border-radius:999px;
  background:var(--paper-dim); border:1px solid var(--line-2); color:var(--ink);
}
.on-dark .pill{ background:var(--alt-bg-2); border-color:var(--alt-line); color:var(--alt-text); }

/* ============================================================
   11. STAPPENPLAN — scroll-linked routelijn
   ============================================================ */
.route-rail{ position:relative; padding-left:clamp(2.2rem, 5vw, 3.6rem); }
.route-line-track{
  position:absolute; left:clamp(.9rem, 2.2vw, 1.5rem); top:8px; bottom:64px; width:2px;
  background:var(--alt-line); border-radius:2px; overflow:hidden;
}
.route-line-fill{ position:absolute; inset:0 0 auto 0; height:0; background:linear-gradient(var(--gold), var(--canal)); transition:height .12s linear; }
.route-step{ position:relative; padding-bottom:clamp(1.6rem, 3vw, 2.4rem); }
.route-node{
  position:absolute; left:calc(-1 * clamp(2.2rem, 5vw, 3.6rem) + clamp(.9rem, 2.2vw, 1.5rem) - 15px);
  top:2px; width:32px; height:32px; border-radius:50%;
  display:grid; place-items:center;
  font-family:var(--font-mono); font-size:.7rem; font-weight:600;
  background:var(--alt-bg); color:var(--alt-muted);
  border:1.5px solid var(--alt-line);
  transition:background-color .4s var(--ease), color .4s var(--ease), border-color .4s var(--ease), transform .4s var(--ease);
}
.route-step.is-active .route-node{ background:var(--gold); color:#1B1206; border-color:var(--gold); transform:scale(1.08); }
.route-card-step{
  background:var(--alt-bg-2); border:1px solid var(--alt-line); border-radius:var(--radius-md);
  padding:1.1rem 1.3rem; transition:border-color .4s var(--ease), transform .4s var(--ease);
}
.route-step.is-active .route-card-step{ border-color:var(--gold); transform:translateX(4px); }
.route-card-step h3{ font-size:1.08rem; margin-bottom:.25rem; }
.route-card-step p{ font-size:var(--text-sm); color:var(--alt-muted); }
.route-card-step .step-meta{ font-family:var(--font-mono); font-size:var(--text-xs); color:var(--gold); display:block; margin-top:.45rem; }
.route-end{ display:flex; align-items:center; gap:.9rem; margin-top:.4rem; }
.route-end-pin{
  position:absolute; left:calc(-1 * clamp(2.2rem, 5vw, 3.6rem) + clamp(.9rem, 2.2vw, 1.5rem) - 15px);
  width:32px; height:32px; border-radius:50%; background:var(--canal); color:#FFF; display:grid; place-items:center;
}
.route-end-pin svg{ width:16px; height:16px; }
.route-end span{ font-family:var(--font-display); font-size:1.25rem; color:var(--alt-text); }

/* Doorlooptijd-vergelijking */
.timeline-compare{ display:grid; gap:1rem; margin-top:var(--space-lg); }
.tl-row{
  display:grid; grid-template-columns:minmax(150px, 210px) 1fr; gap:1rem; align-items:center;
  padding:1rem 1.2rem; border-radius:var(--radius-md);
  background:var(--alt-bg-2); border:1px solid var(--alt-line);
}
.tl-row b{ font-size:var(--text-sm); }
.tl-row small{ display:block; font-size:var(--text-xs); color:var(--alt-muted); font-weight:400; }
.tl-bar{ position:relative; height:34px; border-radius:8px; background:rgba(255,255,255,.06); overflow:hidden; }
.tl-bar i{
  position:absolute; inset:0 auto 0 0; width:var(--w); border-radius:8px;
  display:flex; align-items:center; padding-inline:.75rem;
  font-family:var(--font-mono); font-size:var(--text-xs); font-style:normal; color:#1B1206; white-space:nowrap;
}
.tl-row.is-good i{ background:linear-gradient(90deg, var(--gold), var(--gold-deep)); }
.tl-row.is-slow i{ background:rgba(255,255,255,.16); color:var(--alt-text); }

/* ============================================================
   12. TARIEVEN
   ============================================================ */
.price-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:clamp(1rem,2vw,1.5rem); align-items:stretch; }
.price-card{
  display:flex; flex-direction:column; position:relative;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.5rem,2.6vw,2.1rem);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.price-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-md); }
.price-card.is-featured{
  border-color:var(--gold); border-width:2px; box-shadow:var(--shadow-lg);
  background:linear-gradient(180deg, var(--gold-soft), var(--surface) 42%);
}
.price-tag{
  position:absolute; top:0; left:50%; transform:translate(-50%,-50%);
  background:var(--gold); color:#1B1206; font-size:var(--text-xs); font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; padding:.35rem .95rem; border-radius:999px; white-space:nowrap;
}
.price-card h3{ font-size:1.22rem; }
.price-card .price-for{ font-size:var(--text-sm); color:var(--muted); margin-top:.35rem; min-height:3em; }
.price-amount{ display:flex; align-items:baseline; gap:.55rem; margin-block:var(--space-sm); flex-wrap:wrap; }
.price-amount b{ font-family:var(--font-display); font-size:clamp(2rem,3.4vw,2.7rem); font-weight:500; line-height:1; }
.price-amount s{ color:var(--muted); font-size:var(--text-sm); }
.price-amount span{ font-size:var(--text-xs); color:var(--muted); }
.price-card ul{ display:grid; gap:.55rem; margin-bottom:var(--space-md); }
.price-card ul li{ display:flex; gap:.55rem; align-items:flex-start; font-size:var(--text-sm); }
.price-card ul svg{ width:16px; height:16px; flex:none; margin-top:3px; color:var(--gold-deep); }
.price-card .btn{ margin-top:auto; }
.price-foot{ margin-top:var(--space-md); font-size:var(--text-xs); color:var(--muted); text-align:center; }

/* ============================================================
   13. REVIEWS
   ============================================================ */
.reviews-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(280px,1fr)); gap:clamp(1rem,2vw,1.5rem); }
.review-card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg);
  padding:clamp(1.4rem,2.4vw,1.9rem); display:flex; flex-direction:column; gap:.9rem;
}
.review-stars{ color:var(--gold); letter-spacing:.14em; font-size:.9rem; }
.route-tag{
  display:inline-flex; align-items:center; gap:.4rem; align-self:flex-start;
  font-family:var(--font-mono); font-size:var(--text-xs); font-weight:600;
  padding:.3rem .7rem; border-radius:999px; background:var(--canal-soft); color:var(--canal);
}
.route-tag svg{ width:13px; height:13px; }
.review-quote{ font-family:var(--font-display); font-size:1.06rem; line-height:1.5; }
.review-name{ margin-top:auto; font-size:var(--text-sm); }
.review-name b{ display:block; }
.review-name span{ color:var(--muted); font-size:var(--text-xs); }
.review-placeholder{ font-size:var(--text-xs); color:var(--muted); font-style:italic; }
.review-score{
  display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:.4rem;
  background:var(--ink); color:var(--paper); border-radius:var(--radius-lg); padding:2rem 1.4rem;
}
[data-theme="dark"] .review-score{ background:var(--surface-2); border:1px solid var(--line); }
.review-score b{ font-family:var(--font-display); font-size:clamp(2.4rem,5vw,3.4rem); font-weight:500; color:var(--gold); line-height:1; }
.review-score span{ font-size:var(--text-sm); opacity:.85; max-width:22ch; }

/* ============================================================
   14. FAQ
   ============================================================ */
.faq-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:clamp(2rem,5vw,4.5rem); align-items:start; }
.faq-head{ position:sticky; top:calc(var(--header-h) + 2rem); }
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item summary{
  display:flex; justify-content:space-between; align-items:center; gap:1.2rem;
  padding:1.15rem 0; cursor:pointer; list-style:none;
  font-weight:600; font-size:var(--text-base);
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ color:var(--gold-deep); }
.faq-icon{ position:relative; width:20px; height:20px; flex:none; }
.faq-icon::before, .faq-icon::after{
  content:''; position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  background:var(--gold-deep);
}
.faq-icon::before{ width:13px; height:1.8px; }
.faq-icon::after{ width:1.8px; height:13px; transition:transform .3s var(--ease); }
.faq-item[open] .faq-icon::after{ transform:translate(-50%,-50%) scaleY(0); }
.faq-answer{ padding-bottom:1.2rem; }
.faq-answer p{ font-size:var(--text-sm); color:var(--muted); max-width:62ch; }
.faq-answer p + p{ margin-top:.6rem; }

/* ============================================================
   15. CONTACT
   ============================================================ */
.cta-contact{ position:relative; overflow:hidden; isolation:isolate; }
.cta-bg{ position:absolute; inset:0; z-index:-2; }
.cta-bg img{ width:100%; height:100%; object-fit:cover; filter:var(--img-filter); }
.cta-scrim{ position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(15,42,35,.94), rgba(15,42,35,.97)); }
[data-theme="dark"] .cta-scrim{ background:linear-gradient(180deg, rgba(8,13,22,.95), rgba(8,13,22,.98)); }
.cta-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:clamp(2rem,5vw,4rem); align-items:start; }
.cta-intro h2{ max-width:16ch; }
.cta-intro > p{ margin-top:var(--space-sm); }
.cta-direct{ display:grid; gap:.7rem; margin-top:var(--space-md); }
.cta-direct-item{
  display:flex; align-items:center; gap:.9rem; padding:.9rem 1.1rem;
  border:1px solid var(--alt-line); border-radius:var(--radius-md);
  transition:border-color .25s, background-color .25s, transform .25s var(--ease);
}
.cta-direct-item:hover{ border-color:var(--gold); background:rgba(255,255,255,.04); transform:translateX(3px); }
.cta-direct-icon{ width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:var(--gold-soft); color:var(--gold); flex:none; }
.cta-direct-icon svg{ width:18px; height:18px; }
.cta-direct-text b{ display:block; font-size:var(--text-sm); color:var(--alt-text); }
.cta-direct-text em{ font-style:normal; font-size:var(--text-xs); color:var(--alt-muted); }

.cta-form-wrap{ background:var(--surface); border-radius:var(--radius-lg); padding:clamp(1.5rem,3vw,2.4rem); box-shadow:var(--shadow-lg); border:1px solid var(--line); }
.form-row{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:.95rem; }
.form-row-2{ display:grid; grid-template-columns:1fr 1fr; gap:.9rem; }
.cta-form label{ font-size:var(--text-xs); font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.cta-form input, .cta-form select, .cta-form textarea{
  width:100%; padding:.8rem 1rem; border-radius:var(--radius-sm);
  border:1.5px solid var(--line); background:var(--surface-2); color:var(--ink);
  font-size:var(--text-sm); transition:border-color .25s, box-shadow .25s;
}
.cta-form textarea{ resize:vertical; min-height:110px; }
.cta-form input:focus, .cta-form select:focus, .cta-form textarea:focus{
  outline:none; border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-soft);
}
.cta-form .is-invalid{ border-color:#C0563C; }
.form-error-msg{ display:none; font-size:var(--text-xs); color:#C0563C; }
.form-row.has-error .form-error-msg{ display:block; }
.form-hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ margin-top:.7rem; font-size:var(--text-xs); color:var(--muted); text-align:center; }
.btn-spinner{ display:none; width:17px; height:17px; animation:spin .7s linear infinite; }
.btn.is-loading .btn-label{ opacity:.5; }
.btn.is-loading .btn-spinner{ display:block; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.ijob-form-success, .ijob-form-errors{ display:flex; flex-direction:column; gap:.3rem; padding:1.1rem 1.2rem; margin-bottom:1rem; border-radius:var(--radius-md); background:var(--canal-soft); color:var(--ink); font-size:var(--text-sm); }
.ijob-form-errors{ background:rgba(192,86,60,.12); list-style:none; }
.ijob-form-errors li{ color:#C0563C; }
.form-feedback{ display:flex; gap:.8rem; align-items:flex-start; padding:1.1rem 1.2rem; border-radius:var(--radius-md); background:var(--canal-soft); font-size:var(--text-sm); }
.form-feedback svg{ width:22px; height:22px; color:var(--canal); flex:none; }
.form-feedback.is-error{ background:rgba(192,86,60,.12); }
.form-feedback.is-error svg{ color:#C0563C; }

/* ============================================================
   16. DISCLAIMER & FOOTER
   ============================================================ */
.disclaimer{ background:var(--paper-dim); }
.disclaimer-inner{
  display:flex; gap:1.2rem; align-items:flex-start;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); padding:clamp(1.3rem,2.6vw,2rem);
}
.disclaimer-inner svg{ width:26px; height:26px; flex:none; color:var(--gold-deep); }
.disclaimer-inner h2{ font-size:1.15rem; margin-bottom:.4rem; }
.disclaimer-inner p{ font-size:var(--text-sm); color:var(--muted); max-width:82ch; }
.disclaimer-inner p + p{ margin-top:.5rem; }

.site-footer{ background:var(--alt-bg); color:var(--alt-text); padding-top:var(--space-xl); }
.footer-top{ display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:2.2rem; padding-bottom:var(--space-lg); }
.footer-brand p{ margin-top:.9rem; font-size:var(--text-sm); color:var(--alt-muted); max-width:34ch; }
.footer-brand .brand-name{ color:var(--alt-text); }
.footer-menu{ display:contents; }
.footer-col h4{ font-family:var(--font-body); font-size:var(--text-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); margin-bottom:.9rem; }
.footer-col li a{ display:block; padding-block:.32rem; font-size:var(--text-sm); color:var(--alt-muted); transition:color .25s; }
.footer-col li a:hover{ color:var(--alt-text); }
.footer-bottom{
  border-top:1px solid var(--alt-line); padding-block:1.3rem;
  display:flex; flex-wrap:wrap; gap:.8rem 1.6rem; justify-content:space-between;
  font-size:var(--text-xs); color:var(--alt-muted);
}
.footer-policy{ display:flex; gap:1.2rem; flex-wrap:wrap; }
.footer-note{ flex-basis:100%; opacity:.8; }

/* ============================================================
   17. MOBIELE CTA-BALK
   ============================================================ */
.mobile-cta-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:380;
  gap:.4rem; padding:.5rem .5rem calc(.5rem + env(safe-area-inset-bottom));
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:blur(14px); border-top:1px solid var(--line);
}
.mcb-item{
  flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem;
  padding:.45rem .3rem; border-radius:var(--radius-sm);
  font-size:.66rem; font-weight:600; color:var(--ink); min-height:48px; text-align:center;
}
.mcb-item svg{ width:19px; height:19px; }
.mcb-primary{ background:var(--gold); color:#1B1206; flex:1.6; }

/* ============================================================
   18. RESPONSIEF
   ============================================================ */
@media (max-width: 1240px){
  .main-nav{ display:none; }
  .header-phone{ display:none; }
  .nav-toggle{ display:flex; }
  .header-actions{ margin-left:auto; }
  .faq-grid{ grid-template-columns:1fr; }
  .faq-head{ position:static; }
  .footer-top{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 860px){
  .routes-grid{ grid-template-columns:1fr; }
  .routes{ margin-top:calc(-1 * 2.5rem); }
  .split{ grid-template-columns:1fr; }
  .split.reverse .split-media{ order:0; }
  .cta-grid{ grid-template-columns:1fr; }
  .price-grid{ grid-template-columns:1fr; }
  .price-card.is-featured{ order:-1; }
  .tl-row{ grid-template-columns:1fr; }
}
@media (max-width: 620px){
  .site-header .header-actions > .btn{ display:none; }
  .brand-name{ font-size:.95rem; }
  .brand-name span{ font-size:.56rem; letter-spacing:.12em; }
}
@media (max-width: 720px){
  .mobile-cta-bar{ display:flex; }
  body{ padding-bottom:78px; }
  .footer-top{ grid-template-columns:1fr; gap:1.8rem; }
  .hero{ min-height:auto; padding-bottom:6rem; }
}