/* Reisregie website · huisstijl-tokens en basisopmaak
   Licht thema, vergrendeld. Eén accent (goud), één hoekradius (8px). */

:root {
  --navy: #0f1f4b;
  --navy-2: #1a3068;
  --navy-soft: #24407a;
  --gold: #c9a84c;
  --gold-ink: #856413;
  --gold-soft: rgba(201, 168, 76, 0.16);
  --canvas: #f6f5f9;
  --canvas-2: #eeedf3;
  --surface: #ffffff;
  --ink: #0d1224;
  --ink-mid: rgba(13, 18, 36, 0.66);
  --ink-dim: rgba(13, 18, 36, 0.60);
  --line: rgba(18, 32, 70, 0.10);
  --line-2: rgba(18, 32, 70, 0.18);
  --on-navy: #f6f5f9;
  --on-navy-mid: rgba(246, 245, 249, 0.72);
  --shadow: 0 1px 2px rgba(15, 31, 75, 0.06), 0 12px 32px -12px rgba(15, 31, 75, 0.22);
  --shadow-lg: 0 2px 4px rgba(15, 31, 75, 0.06), 0 32px 64px -24px rgba(15, 31, 75, 0.35);
  --r: 8px;
  --font-display: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "DM Mono", ui-monospace, monospace;
  --max: 1200px;
  --gutter: 16px;
  --nav-h: 68px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }
/* display:flex op een element wint van de standaardregel voor [hidden]; dit zet dat recht. */
[hidden] { display: none !important; }
/* De nav is sticky; ankers moeten daaronder uitkomen. */
[id] { scroll-margin-top: calc(var(--nav-h) + 16px); }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
p a, li a, .link { color: var(--navy); text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
/* Op de donkere band moet een tekstlink juist licht zijn. Knoppen houden hun
   eigen kleur, en binnen een witte kaart op die band blijft de link donker. */
.band p a:not(.btn), .band li a:not(.btn), .band .link:not(.btn),
.cta-band p a:not(.btn), .cta-band li a:not(.btn) { color: #fff; text-decoration-color: var(--gold); }
.band .card p a:not(.btn), .band .card li a:not(.btn), .band .card .link:not(.btn),
.cta-band .card p a:not(.btn), .cta-band .card li a:not(.btn), .cta-band .card .link:not(.btn) { color: var(--navy); }
strong, b { font-weight: 500; }
::selection { background: var(--gold-soft); }
:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; border-radius: 3px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.wrap-narrow { max-width: 820px; }

/* ---- typografie ---- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; color: var(--navy); margin: 0; letter-spacing: -0.01em; line-height: 1.08; }
h1 { font-size: clamp(38px, 5.4vw, 64px); }
h2 { font-size: clamp(30px, 3.6vw, 44px); }
h3,
.reis-kop, .dank-kop, .form-kop { font-size: clamp(22px, 2.2vw, 28px); line-height: 1.2; }
/* Deze drie zijn h2 voor een nette koppenstructuur, maar lezen als een h3. */
h4 { font-size: 20px; line-height: 1.3; }
h1 em, h2 em { font-style: italic; font-weight: 500; color: var(--gold-ink); }
p { margin: 0 0 1em; max-width: 65ch; }
p:last-child { margin-bottom: 0; }
.lead { font-size: 20px; line-height: 1.5; color: var(--ink-mid); }
.small { font-size: 14px; color: var(--ink-mid); }
/* Een label dat ook een link naar de prijzen is. */
.label-link { text-decoration: none; border-bottom: 1px solid rgba(133,100,19,.35); padding-bottom: 2px; transition: border-color .2s, color .2s; width: fit-content; }
.label-link:hover { border-bottom-color: var(--gold-ink); }
.band .label-link { border-bottom-color: rgba(201,168,76,.45); }
.band .label-link:hover { border-bottom-color: var(--gold); }
.label { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold-ink); font-weight: 400; display: block; margin-bottom: 14px; }
.num { font-variant-numeric: tabular-nums; }
ul.clean { list-style: none; margin: 0; padding: 0; }
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 26px; margin: 0 0 8px; }
.ticks li::before { content: ""; position: absolute; left: 0; top: 10px; width: 12px; height: 7px; border-left: 2px solid var(--gold-ink); border-bottom: 2px solid var(--gold-ink); transform: rotate(-45deg); }

/* ---- knoppen ---- */
.btn { touch-action: manipulation; display: inline-flex; align-items: center; justify-content: center; gap: 10px; white-space: nowrap; min-height: 48px; padding: 0 22px; border-radius: var(--r); font-family: var(--font-body); font-weight: 400; font-size: 16px; border: 1px solid transparent; cursor: pointer; transition: transform .18s var(--ease), background .18s, border-color .18s, color .18s; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--navy); color: #fff; border-color: var(--navy); }
.btn-primary:hover { background: var(--navy-2); border-color: var(--navy-2); }
.btn-ghost { background: transparent; color: var(--navy); border-color: var(--line-2); }
.btn-ghost:hover { border-color: var(--navy); }
.btn-light { background: #fff; color: var(--navy); border-color: #fff; }
.btn-light:hover { background: var(--canvas); }
.btn-outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.45); }
.btn-outline-light:hover { border-color: #fff; }
.btn-sm { min-height: 40px; padding: 0 16px; font-size: 15px; }
.btn .arrow { width: 16px; height: 16px; flex: none; }

/* ---- strook voor wie al is ingelogd (alleen zichtbaar met een sessie) ---- */
.ingelogd { display: none; background: var(--navy); color: var(--on-navy); font-size: 14.5px; }
html.sessie .ingelogd { display: block; }
.ingelogd .wrap { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding-top: 9px; padding-bottom: 9px; }
.ingelogd p { margin: 0; color: var(--on-navy-mid); }
.ingelogd a { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; font-weight: 400; }

/* ---- navigatie ---- */
.nav { position: sticky; top: 0; z-index: 50; height: var(--nav-h); background: rgba(246, 245, 249, 0.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }
.nav .wrap { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav .logo img { height: 30px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; }
.nav-links .menu-cta { display: none; }   /* alleen in het uitklapmenu op smalle schermen */
.nav-links a { text-decoration: none; font-size: 15.5px; font-weight: 400; color: var(--ink-mid); padding: 6px 0; border-bottom: 1px solid transparent; transition: color .15s, border-color .15s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); border-bottom-color: var(--gold); }
.nav-actions { display: flex; align-items: center; gap: 12px; }
.nav-actions .login { font-size: 15px; color: var(--navy); border: 1px solid var(--line-2); border-radius: var(--r); padding: 9px 16px; min-height: 40px; display: inline-flex; align-items: center; white-space: nowrap; transition: border-color .15s, background .15s; }
.nav-actions .login:hover { border-color: var(--navy); background: rgba(255,255,255,.6); }
.nav-toggle { touch-action: manipulation; display: none; background: none; border: 1px solid var(--line-2); border-radius: var(--r); width: 44px; height: 44px; align-items: center; justify-content: center; cursor: pointer; }
.nav-toggle span { display: block; width: 18px; height: 1.5px; background: var(--navy); position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--navy); }
.nav-toggle span::before { top: -6px; } .nav-toggle span::after { top: 6px; }
@media (max-width: 900px) {
  .nav-links { display: none; }
  .nav-toggle { display: inline-flex; }
  /* Dit is een acquisitiesite, dus de demo-knop blijft ook op een telefoon
     zichtbaar. Inloggen wordt daarnaast een tekstlink zonder omlijning,
     anders staan er twee knoppen te concurreren. */
  .nav-actions { gap: 10px; }
  .nav-actions .btn-primary { display: inline-flex; padding: 0 14px; min-height: 40px; font-size: 15px; }
  .nav-actions .login { border: 0; padding: 9px 2px; color: var(--ink-mid); }
  .nav.open .nav-links .menu-cta { display: none; }   /* staat al in de balk */
  .nav.open .nav-links { display: flex; flex-direction: column; align-items: stretch; gap: 4px; position: absolute; left: 0; right: 0; top: var(--nav-h); background: var(--surface); padding: 12px var(--gutter) 20px; border-bottom: 1px solid var(--line); box-shadow: var(--shadow); }
  .nav.open .nav-links a { display: block; width: 100%; padding: 12px 0; font-size: 17px; border-bottom: 1px solid var(--line); }
  .nav.open .nav-links li:last-child a { border-bottom: 0; }
  .nav.open .nav-links .menu-cta { display: block; }
  .nav.open .nav-links .menu-cta a.btn { width: 100%; margin-top: 14px; padding: 0 22px; border-bottom: 0;
    color: #fff; text-decoration: none; font-size: 16px; }
}
@media (max-width: 420px) {
  .nav-actions .login { padding: 9px 6px; font-size: 14.5px; }
  .nav-actions .btn-primary { padding: 0 11px; font-size: 14.5px; }
  .nav .logo img { height: 26px; }
}

/* ---- secties ---- */
.section { padding: clamp(64px, 9vw, 120px) 0; }
.section-tight { padding: clamp(40px, 6vw, 72px) 0; }
.section-head { max-width: 640px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head p { margin-top: 16px; font-size: 18px; color: var(--ink-mid); }
.band { background: var(--navy); color: var(--on-navy); }
.band h2, .band h3 { color: #fff; }
.band h1 em, .band h2 em, .band h3 em, .cell-navy h3 em { color: var(--gold); }  /* goudinkt is te donker op navy */
.band p { color: var(--on-navy-mid); }
.band .label { color: var(--gold); }
.band-soft { background: var(--canvas-2); }
.hairline { border: 0; border-top: 1px solid var(--line); margin: 0; }

/* ---- hero ---- */
.hero { padding: clamp(40px, 6vw, 72px) 0 clamp(48px, 7vw, 96px); overflow: hidden; }
.hero .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero-copy h1 { margin-bottom: 22px; }
.hero-copy .lead { max-width: 30ch; margin-bottom: 30px; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-note { margin-top: 16px; font-size: 15px; color: var(--ink-dim); }
.hero-visual { position: relative; min-height: 380px; }
.device { position: relative; border-radius: var(--r); overflow: hidden; background: var(--surface); box-shadow: var(--shadow-lg); border: 1px solid var(--line); }
.device-laptop { width: 100%; aspect-ratio: 16 / 10; }
.device-phone { position: absolute; right: -6px; bottom: -28px; width: 27%; min-width: 130px; aspect-ratio: 9 / 19.2; border-radius: 22px; border: 6px solid #0b1436; background: #0b1436; box-shadow: var(--shadow-lg); }
.device-phone img, .device-phone video { border-radius: 16px; height: 100%; width: 100%; object-fit: cover; object-position: top; }
.device-laptop img, .device-laptop video { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
@media (max-width: 900px) {
  .hero .wrap { grid-template-columns: 1fr; }
  .hero-copy .lead { max-width: 40ch; }
  .hero-visual { margin-top: 8px; margin-right: 24px; }
}

/* ---- vertrouwensregel ---- */
/* Cijfers onder de opening. Vier harde getallen, zonder kaders: de gouden
   haarlijn boven elk cijfer doet het scheidingswerk. */
.cijfers { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 44px 0 38px; }
.cijfer-rij { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 34px; }
.cijfer-rij li { position: relative; padding-top: 20px; }
.cijfer-rij li::before {
  content: ""; position: absolute; left: 0; top: 0;
  width: 34px; height: 2px; background: var(--gold);
}
.cijfer-rij .getal {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(38px, 4.2vw, 52px);
  line-height: 1;
  color: var(--navy);
  letter-spacing: -0.01em;
  font-variant-numeric: lining-nums tabular-nums;
}
.cijfer-rij .bij {
  display: block;
  margin-top: 12px;
  font-size: 15px;
  line-height: 1.5;
  color: var(--ink-mid);
  max-width: 26ch;
}
.cijfer-voet { margin-top: 34px; text-align: center; font-size: 15px; color: var(--ink-dim); max-width: none; }

@media (max-width: 900px) {
  .cijfer-rij { grid-template-columns: repeat(2, 1fr); gap: 28px 24px; }
}
@media (max-width: 480px) {
  .cijfers { padding: 34px 0 30px; }
  .cijfer-rij { gap: 24px 18px; }
  .cijfer-rij .getal { font-size: 34px; }
  .cijfer-rij .bij { font-size: 14.5px; }
  .cijfer-voet { margin-top: 26px; font-size: 14.5px; }
}

/* ---- stappen met sticky beeld ---- */
.steps { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.steps-list { display: flex; flex-direction: column; gap: 6px; }
.step { display: block; width: 100%; text-align: left; font: inherit; color: inherit; background: none; border: 1px solid transparent; cursor: pointer; padding: 22px 22px 22px 64px; border-radius: var(--r); position: relative; border: 1px solid transparent; transition: background .25s, border-color .25s; cursor: default; }
.step::before { content: attr(data-n); position: absolute; left: 22px; top: 24px; font-family: var(--font-display); font-size: 26px; line-height: 1; color: var(--gold-ink); }
.step h3 { margin-bottom: 8px; }
.step p { color: var(--ink-mid); font-size: 16px; }
.step.active { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
.steps-media { position: sticky; top: calc(var(--nav-h) + 24px); }
.steps-media .frame { position: relative; aspect-ratio: 16 / 10.5; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); }
.steps-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top left; opacity: 0; transition: opacity .45s var(--ease); }
.steps-media img.show { opacity: 1; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; }
  /* De stappen zijn hier geen knoppen meer (zie site.js), dus ook niet zo tonen. */
  .step { cursor: default; background: none !important; border-color: transparent !important; padding-left: 52px; }
  .step.active { box-shadow: none; }
  .steps-media { position: static; order: -1; }
  .step { padding: 18px 18px 18px 56px; }
  .step::before { left: 18px; }
}

/* ---- documentencollage (navy band) ---- */
.fan { display: grid; grid-template-columns: 2.4fr 5.6fr 4fr; gap: 20px; align-items: stretch; margin-top: 44px; }
.fan figure { margin: 0; border-radius: var(--r); overflow: hidden; background: #fff; box-shadow: var(--shadow-lg); }
.fan figure img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
/* Bijschriften waren verborgen, waardoor je niet kon zien welk document wat
   was. Ze staan nu als klein label in de hoek van elk beeld. Binnen het kader,
   want de figuren hebben een vaste verhouding en een afgeronde rand. */
.fan figure { position: relative; }
.fan figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 22px 14px 10px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: linear-gradient(to top, rgba(11, 20, 54, .96) 0%, rgba(11, 20, 54, .88) 45%, rgba(11, 20, 54, 0) 100%);
  text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  pointer-events: none;
}
.fan .f3 { grid-column: 1; grid-row: 1 / span 2; border-radius: 20px; border: 6px solid #0b1436; align-self: center; max-height: 100%; }
.fan .f3 img { border-radius: 14px; }
.fan .f4 { grid-column: 2; grid-row: 1 / span 2; aspect-ratio: 16 / 10; align-self: center; }
.fan .f1 { grid-column: 3; grid-row: 1; aspect-ratio: 4 / 3; }
.fan .f2 { grid-column: 3; grid-row: 2; aspect-ratio: 4 / 3; }
.fan-legend { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 30px; font-size: 15px; color: var(--on-navy-mid); }
.fan-legend b { color: #fff; font-weight: 400; }
@media (max-width: 900px) {
  .fan { grid-template-columns: 1fr 1fr; gap: 14px; }
  .fan figcaption { font-size: 9.5px; letter-spacing: .1em; padding: 16px 10px 8px; }
  .fan .f3 { grid-column: 1; grid-row: 1; }
  .fan .f4 { grid-column: 2; grid-row: 1; aspect-ratio: 4 / 3; }
  .fan .f1 { grid-column: 1; grid-row: 2; }
  .fan .f2 { grid-column: 2; grid-row: 2; }
}

/* ---- modules-bento ---- */
.bento { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; align-items: start; }
.cell { touch-action: manipulation; position: relative; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: transform .25s var(--ease), box-shadow .25s; }
.cell:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.cell .shot { flex: 0 0 auto; aspect-ratio: 16 / 9; overflow: hidden; border-bottom: 1px solid var(--line); background: var(--canvas-2); }
.cell .shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; }
.cell .txt { flex: none; padding: 20px 22px 22px; background: var(--surface); }
.cell h3 { font-size: 23px; margin-bottom: 6px; }
.cell p { font-size: 15.5px; color: var(--ink-mid); max-width: 46ch; }
.cell .price { display: inline-block; margin-top: 12px; font-size: 12.5px; color: var(--gold-ink); font-family: var(--font-mono); letter-spacing: 0.06em; }
.cell-lg { grid-column: span 8; }
.cell-lg .shot { aspect-ratio: 16 / 10; }
.cell-lg h3 { font-size: 30px; }
.cell-lg p { font-size: 17px; }
.cell-md { grid-column: span 4; }
.cell-wide { grid-column: span 6; }
.cell-sm { grid-column: span 4; }
.cell-sm h3 { font-size: 20px; }
.cell-sm p { font-size: 14.5px; }
.cell-navy .txt { background: var(--navy); color: var(--on-navy); }
.cell-navy h3 { color: #fff; } .cell-navy p { color: var(--on-navy-mid); } .cell-navy .price { color: var(--gold); }
.cell-navy .shot { border-bottom-color: rgba(255,255,255,0.12); }
@media (max-width: 1000px) {
  .cell-lg { grid-column: 1 / -1; }
  .cell-md, .cell-sm, .cell-wide { grid-column: span 6; }
}
@media (max-width: 720px) {
  .bento { grid-template-columns: 1fr; }
  .cell-lg, .cell-md, .cell-sm, .cell-wide { grid-column: 1 / -1; }
}

/* ---- video ---- */
.player-grid { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: 24px; align-items: start; }
.player { position: relative; aspect-ratio: 16 / 9; border-radius: var(--r); overflow: hidden; background: var(--navy); box-shadow: var(--shadow-lg); }
.player video, .player img { width: 100%; height: 100%; object-fit: cover; }
.player .play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: linear-gradient(180deg, rgba(15,31,75,0.1), rgba(15,31,75,0.45)); border: 0; cursor: pointer; color: #fff; }
.player .play span { display: inline-flex; align-items: center; gap: 12px; padding: 12px 20px 12px 16px; background: rgba(15,31,75,0.82); backdrop-filter: blur(8px); border: 1px solid rgba(255,255,255,0.4); border-radius: var(--r); font-size: 16px; }
.player .play svg { width: 18px; height: 18px; }
.chapters { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.chapters button { touch-action: manipulation; width: 100%; text-align: left; background: transparent; border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; font-family: var(--font-body); font-size: 15.5px; color: var(--ink); cursor: pointer; display: flex; justify-content: space-between; gap: 12px; transition: border-color .15s, background .15s; }
.chapters button:hover { border-color: var(--navy); }
.chapters button[aria-current="true"] { background: var(--surface); border-color: var(--navy); }
.chapters button .t { color: var(--ink-dim); font-family: var(--font-mono); font-size: 12px; }
.chapters button.soon { color: var(--ink-dim); cursor: default; }
.chapters button.soon:hover { border-color: var(--line); }
@media (max-width: 900px) { .player-grid { grid-template-columns: 1fr; } }

/* ---- prijsrekenaar ---- */
.calc { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px; align-items: start; }
/* De rekenmachine kent nu twee hoofdkeuzes (Offerte & Reisplan, Dashboard) en
   modules die alleen bij het dashboard horen. Staat het dashboard uit, dan
   worden die modules zichtbaar grijs en niet aanklikbaar. */
.calc-kop { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-dim); margin: 4px 0 2px; }
.calc-kop:not(:first-child) { margin-top: 18px; }
.opt.uit { opacity: .45; cursor: not-allowed; }
.opt.uit input { pointer-events: none; }
.calc-hint { font-size: 14px; color: var(--ink-dim); margin-top: 10px; }

.calc-options { display: flex; flex-direction: column; gap: 8px; }
.opt { display: grid; grid-template-columns: 24px 1fr auto; gap: 14px; align-items: start; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); cursor: pointer; transition: border-color .15s; }
.opt:hover { border-color: var(--line-2); }
.opt.base { cursor: default; background: var(--canvas-2); }
.opt input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--navy); }
.opt b { display: block; font-weight: 500; color: var(--navy); }
.opt small { display: block; color: var(--ink-mid); font-size: 14.5px; line-height: 1.45; margin-top: 2px; }
.opt .p { font-family: var(--font-mono); font-size: 14px; color: var(--ink-mid); white-space: nowrap; padding-top: 3px; }
.opt.soon { opacity: 0.6; cursor: default; }
.calc-total { position: sticky; top: calc(var(--nav-h) + 24px); background: var(--navy); color: var(--on-navy); border-radius: var(--r); padding: 28px; box-shadow: var(--shadow-lg); }
.calc-total .label { color: var(--gold); }
.calc-total .amount { font-family: var(--font-display); font-size: 56px; line-height: 1; color: #fff; }
.calc-total .amount small { font-family: var(--font-body); font-size: 16px; color: var(--on-navy-mid); margin-left: 6px; }
.calc-total ul { list-style: none; margin: 18px 0 0; padding: 18px 0 0; border-top: 1px solid rgba(255,255,255,0.14); display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
.calc-total li { display: flex; justify-content: space-between; gap: 12px; color: var(--on-navy-mid); }
.calc-total li b { color: #fff; font-weight: 400; }
.calc-total .note { margin-top: 18px; font-size: 13.5px; color: var(--on-navy-mid); }
.calc-total .btn { margin-top: 20px; width: 100%; }
@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
  /* Het totaal gaat bovenaan staan en blijft plakken, anders zie je het bedrag
     niet veranderen terwijl je onder in de lijst aan het aanvinken bent. */
  .calc-total { position: sticky; top: calc(var(--nav-h) + 8px); order: -1; z-index: 2; padding: 20px 22px; }
  .calc-total .amount { font-size: 42px; }
  .calc-total ul { margin-top: 14px; padding-top: 14px; }
  .calc-total .note { font-size: 14px; }
}

/* ---- quotes ---- */
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.quote { margin: 0; padding: 30px 30px 26px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); }
.quote p { font-family: var(--font-display); font-size: 26px; line-height: 1.35; color: var(--navy); }
.quote footer { margin-top: 14px; font-size: 14.5px; color: var(--ink-mid); }
.quote footer b { color: var(--ink); font-weight: 500; }

/* ---- veiligheidsband: eigen accent, geen tweede navy vlak ---- */
.eu-band { background: linear-gradient(180deg, var(--canvas-2) 0%, var(--canvas) 100%); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.eu-kop { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 18px; margin-bottom: 10px; }
.eu-merk { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-ink); }
.eu-merk svg { width: 17px; height: 17px; flex: none; }
.eu-punten { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin-top: 34px; border-top: 1px solid var(--line); }
.eu-punt { padding: 26px 26px 26px 0; border-bottom: 1px solid var(--line); }
.eu-punt + .eu-punt { border-left: 1px solid var(--line); padding-left: 26px; }
.eu-punt h3 { font-size: 21px; margin-bottom: 8px; }
.eu-punt p { font-size: 15.5px; color: var(--ink-mid); }
.eu-voet { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 28px; }
@media (max-width: 900px) {
  .eu-punten { grid-template-columns: 1fr 1fr; }
  .eu-punt:nth-child(3) { border-left: 0; padding-left: 0; }
}
@media (max-width: 560px) {
  .eu-punten { grid-template-columns: 1fr; }
  .eu-punt + .eu-punt { border-left: 0; padding-left: 0; }
}

/* ---- feiten (veiligheid teaser) ---- */
.facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--line); }
.fact { padding: 26px 24px 26px 0; border-bottom: 1px solid var(--line); }
.fact + .fact { border-left: 1px solid var(--line); padding-left: 24px; }
.fact h4 { margin-bottom: 8px; }
.fact p { font-size: 15.5px; color: var(--ink-mid); }
@media (max-width: 900px) { .facts { grid-template-columns: 1fr 1fr; } .fact:nth-child(3) { border-left: 0; padding-left: 0; } }
@media (max-width: 560px) { .facts { grid-template-columns: 1fr; } .fact + .fact { border-left: 0; padding-left: 0; } }

/* ---- faq ---- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { touch-action: manipulation; list-style: none; cursor: pointer; padding: 20px 44px 20px 0; position: relative; font-weight: 400; font-size: 18px; color: var(--navy); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 8px; top: 50%; width: 10px; height: 10px; border-right: 1.5px solid var(--gold-ink); border-bottom: 1.5px solid var(--gold-ink); transform: translateY(-70%) rotate(45deg); transition: transform .2s; }
.faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.faq details > div { padding: 0 0 22px; color: var(--ink-mid); max-width: 65ch; }
.faq details > div p { margin-bottom: 0.6em; }

/* ---- formulier ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.form-grid .full { grid-column: 1 / -1; }
.field label { display: block; font-size: 14.5px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
.field input, .field textarea, .field select { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--surface); font: inherit; font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(15,31,75,0.35); }
.field input:focus, .field textarea:focus { border-color: var(--navy); }
.field input::placeholder, .field textarea::placeholder { color: var(--ink-dim); }
.field .hint { font-size: 13.5px; color: var(--ink-mid); margin-top: 6px; }
.checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px 16px; }
.checks label { display: flex; align-items: center; gap: 10px; font-size: 15.5px; padding: 8px 0; cursor: pointer; }
.checks input { width: 18px; height: 18px; accent-color: var(--navy); margin: 0; }
.checks.rij { display: flex; flex-wrap: wrap; gap: 0 28px; }
.form-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 8px; }
.form-foot .small { max-width: 44ch; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
@media (max-width: 640px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- cta-band ---- */
.cta-band .wrap { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: start; }
.cta-band .card { background: var(--surface); color: var(--ink); border-radius: var(--r); padding: clamp(22px, 3vw, 36px); box-shadow: var(--shadow-lg); }
.cta-band .card h3, .cta-band .card .form-kop { color: var(--navy); margin-bottom: 18px; }
.cta-band .card p, .cta-band .card label, .cta-band .card li { color: var(--ink-mid); }
.cta-band .card .small { color: var(--ink-mid); }
.cta-band .contact { margin-top: 28px; font-size: 16px; color: var(--on-navy-mid); }
.cta-band .contact a { color: #fff; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; }
@media (max-width: 900px) { .cta-band .wrap { grid-template-columns: 1fr; } }

/* ---- footer ---- */
.footer { padding: 48px 0 40px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-mid); }
.footer .wrap { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 32px; }
.footer img { height: 26px; width: auto; margin-bottom: 14px; }
.footer h4 { font-family: var(--font-body); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-dim); font-weight: 400; margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a:hover { color: var(--navy); }
.footer .fine { grid-column: 1 / -1; padding-top: 24px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-dim); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px; }
@media (max-width: 900px) { .footer .wrap { grid-template-columns: 1fr 1fr; } .footer .brand { grid-column: 1 / -1; } }

/* ---- generiek: split-secties, galerij ---- */
.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.rev > :first-child { order: 2; }
.split .shot { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-lg); background: var(--surface); }
.split .shot img { width: 100%; height: auto; }
.split h2, .split h3 { margin-bottom: 14px; }
.split p { color: var(--ink-mid); }
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } .split.rev > :first-child { order: 0; } }

.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.gallery article { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); display: flex; flex-direction: column; }
.gallery .cover { aspect-ratio: 16 / 10; overflow: hidden; background: var(--canvas-2); }
.gallery .cover img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.gallery article:hover .cover img { transform: scale(1.02); }
.gallery .body { padding: 22px 24px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.gallery .body h3 { font-size: 26px; }
.gallery .meta { font-size: 14px; color: var(--ink-dim); }
.gallery .body p { color: var(--ink-mid); font-size: 15.5px; }
.gallery .actions { margin-top: auto; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 720px) { .gallery { grid-template-columns: 1fr; } }

.downloads { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 18px; }
.dl { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; transition: box-shadow .2s, transform .2s var(--ease); }
.dl:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.dl .thumb { aspect-ratio: 1 / 1.3; background: var(--canvas-2); overflow: hidden; border-bottom: 1px solid var(--line); }
.dl .thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.dl .body { padding: 16px 18px 18px; }
.dl b { display: block; font-weight: 500; color: var(--navy); }
.dl span { display: block; font-size: 14px; color: var(--ink-mid); margin-top: 4px; }

/* Een brede tabel schuift zijwaarts. De schaduw rechts laat zien dat er meer
   staat; die verdwijnt zodra je aan het einde bent. */
.table-scroll {
  width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, var(--surface) 30%, rgba(255,255,255,0)) left center,
    linear-gradient(to left,  var(--surface) 30%, rgba(255,255,255,0)) right center,
    radial-gradient(farthest-side at 0 50%, rgba(13,18,36,.14), rgba(13,18,36,0)) left center,
    radial-gradient(farthest-side at 100% 50%, rgba(13,18,36,.14), rgba(13,18,36,0)) right center;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 14px 100%, 14px 100%;
  background-attachment: local, local, scroll, scroll;
}
@media (max-width: 760px) {
  .table-scroll::after {
    content: "Veeg opzij voor de hele tabel";
    display: block; margin-top: 10px;
    font-size: 13.5px; color: var(--ink-dim);
  }
}
.table { width: 100%; border-collapse: collapse; font-size: 16px; }
@media (max-width: 640px) {
  .table { font-size: 15px; }
  .table th, .table td { padding: 12px 10px; }
  .table td.p { white-space: normal; }
}
.table th, .table td { text-align: left; padding: 14px 16px; border-bottom: 1px solid var(--line); vertical-align: top; }
.table th { font-weight: 400; color: var(--ink-dim); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; }
.table td.p { font-family: var(--font-mono); white-space: nowrap; }
.table tbody tr:hover { background: rgba(255,255,255,0.6); }

.prose h2 { margin: 48px 0 14px; font-size: 30px; }
.prose h3 { margin: 32px 0 10px; }
.prose p, .prose li { color: var(--ink-mid); }
.prose ul { padding-left: 20px; }
.prose li { margin-bottom: 6px; }
.callout { background: var(--surface); border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--r); padding: 22px 24px; margin: 24px 0; color: var(--ink); box-shadow: var(--shadow); }
.callout .ticks li { color: var(--ink); }

/* ---- motion ---- */
/* Zonder JavaScript blijft alles gewoon zichtbaar; de class .js zet de reveal pas aan. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ---- toegankelijkheid ---- */
.skip { position: absolute; left: -9999px; top: 8px; background: var(--navy); color: #fff; padding: 10px 14px; border-radius: var(--r); z-index: 100; }
.skip:focus { left: 8px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }


/* Onder de 350px passen "Inloggen" en "Plan een demo" niet meer naast elkaar.
   De demo-knop wordt daar korter; de volledige tekst staat nog in het menu. */
@media (max-width: 349px) {
  .nav-actions .btn-primary { font-size: 0; padding: 0 12px; }
  .nav-actions .btn-primary::after { content: "Demo"; font-size: 14.5px; }
}