/* =========================================================
   kasthulp.nl — sierlijk, ruim, ouderen-vriendelijk
   ========================================================= */

/* Forceer hidden-attribuut: startscherm en wizard mogen elkaar
   nooit overlappen of beide tegelijk in de scroll staan. */
[hidden] { display: none !important; }

/* Lichaam toont óf intro óf wizard, nooit beide */
body.is-intro #wizard { display: none !important; }
body.is-wizard #intro,
body.is-wizard #siteHeader { display: none !important; }

:root {
  --bg:        #F6F1E8;
  --bg-soft:   #EFE8DB;
  --surface:   #FFFFFF;
  /* Beige off-white voor de wizard-kaarten — witter dan de omgeving,
     warmer dan puur wit. */
  --card-bg:   #FBF6ED;
  /* Heldere beige voor de balk op de startpagina */
  --bar-beige: #f3dbbc;
  --ink:       #1F2A37;
  --ink-soft:  #475569;
  --line:      #E2D9C7;
  --line-soft: #EDE5D3;
  --accent:    #1F2A37;
  --accent-2:  #B07A2C;
  --accent-2-soft: #F4E7CF;
  --ikea-blue:      #0058A3;
  --ikea-blue-soft: #E5F0FA;
  --ikea-yellow:    #FFDB00;
  --ikea-yellow-soft: #FFF7C7;
  --success:   #2F6B4F;
  --danger:    #B23A3A;

  /* Stap-kleuren */
  --step1: #FFDB00;   /* IKEA-geel */
  --step1-soft: #FFF6BF;
  --step2: #0058A3;   /* IKEA-blauw */
  --step2-soft: #E5F0FA;
  --step3: #B07A2C;   /* warm amber */
  --step3-soft: #F4E7CF;
  --step4: #2F6B4F;   /* groen */
  --step4-soft: #E1EFE7;

  --font-serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-sans:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  --radius:    14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(31,42,55,.05), 0 1px 1px rgba(31,42,55,.04);
  --shadow:    0 6px 24px rgba(31,42,55,.08), 0 2px 6px rgba(31,42,55,.06);

  --container: 1080px;
  --container-narrow: 760px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 19px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-text-size-adjust: 100%;
  min-height: 100vh;
  min-height: 100dvh;          /* iOS-veilig — geen sprong door adresbalk */
  overflow-x: hidden;          /* voorkom horizontale scroll door 100vw-balk */
}

/* In wizard-modus: rustige achtergrond */
body.is-wizard { background: var(--bg); }

img, svg { display: block; max-width: 100%; }

a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--accent-2); }

.skip-link { position: absolute; left: -9999px; top: auto; }
.skip-link:focus {
  position: fixed; left: 16px; top: 16px;
  background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 8px; z-index: 100;
}

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

/* =========================================================
   HEADER — alleen op de intro, logo gecentreerd
   ========================================================= */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  padding: 18px 0;
}
.header-inner {
  display: flex;
  justify-content: center;
  align-items: center;
}
body.is-wizard .site-header { display: none; }

.brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  color: var(--ink);
}

/* ------------------------------------------------------
   Logo — sierlijke schreef "kasthulp" op donkerblauwe
   plaat, met ".nl" in IKEA-geel als signatuur.
   ------------------------------------------------------ */
.brand-mark {
  display: inline-flex;
  align-items: baseline;
  background: var(--ink);
  padding: 14px 22px;
  border-radius: 12px;
  font-family: var(--font-sans);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.015em;
  font-size: 36px;
  box-shadow: 0 2px 8px rgba(31,42,55,.18);
  border: 1px solid rgba(255,255,255,.08);
}
.brand-mark-name {
  color: #F8EFD8;
}
.brand-mark-tld {
  color: var(--ikea-yellow);
  text-shadow: 0 1px 0 rgba(0,0,0,.25);
  margin-left: 2px;
}
.brand-mark-sm { font-size: 22px; padding: 9px 14px; border-radius: 9px; }

/* =========================================================
   INTRO / LANDINGSPAGINA
   ========================================================= */
.intro {
  text-align: center;
  background:
    radial-gradient(1100px 360px at 50% -10%, var(--bg-soft), transparent 70%),
    var(--bg);
}
.intro-landing {
  min-height: calc(100vh - 110px);
  min-height: calc(100dvh - 110px);
  display: flex;
  align-items: stretch;
  justify-content: center;
  /* Bovenkant ademt; onderaan ruimte zodat de Start hier-knop
     net iets boven de schermrand zweeft. */
  padding: 6vh 0 8vh;
}
.intro-landing .container { width: 100%; }

.eyebrow {
  display: inline-block;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin: 0 0 18px;
}
.intro h1 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(36px, 5.2vw, 56px);
  line-height: 1.15;
  margin: 0 auto 22px;
  max-width: 28ch;
  letter-spacing: -.01em;
}
.intro .lead {
  font-size: 21px;
  max-width: 64ch;
  margin: 0 auto 32px;
  color: var(--ink-soft);
}
/* Tekst bovenaan, "Start hier" onderaan op het startscherm */
.intro-landing .container {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
.intro-landing .eyebrow,
.intro-landing h1,
.intro-landing .lead { text-align: center; }
#startBtn {
  display: inline-flex;
  margin-top: auto;   /* duwt knop + telefoon naar onderkant */
}

/* =========================================================
   BUTTONS
   ========================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 18px 28px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 18px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform .04s ease, background .15s ease, color .15s ease, border-color .15s ease;
  min-height: 56px;
}
.btn:active { transform: translateY(1px); }
.btn-xl { padding: 20px 32px; font-size: 19px; min-height: 64px; }

.btn-primary {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.btn-primary:hover { background: #14202B; color: #fff; }

.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line);
}
.btn-ghost:hover { background: var(--bg-soft); color: var(--ink); border-color: #D5C9AE; }

.btn-outline {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}
.btn-outline:hover { background: var(--ink); color: #fff; }

.btn-pay {
  background: var(--ikea-blue);
  color: #fff;
  border-color: var(--ikea-blue);
}
.btn-pay:hover { background: #004A8B; color: #fff; }

.btn-bell {
  background: var(--ikea-yellow);
  color: var(--ink);
  border-color: var(--ikea-yellow);
}
.btn-bell:hover { background: #FFE54A; color: var(--ink); }

/* =========================================================
   WIZARD — vol scherm, geen scroll, logo's links en rechts
   ========================================================= */
.wizard-section {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 24px 32px;
  background: var(--bg);
}
@media (max-width: 1180px) {
  .wizard-section { padding: 16px 16px 24px; }
}

/* Tablet portret (720-880px): progressbalk horizontaal boven de kaart. */
@media (max-width: 880px) {
  .wizard-stage {
    grid-template-columns: 1fr;
    grid-template-areas:
      "prog"
      "card"
      "foot";
    column-gap: 0;
  }
  .wizard-stage > .progress { align-self: stretch; }
  .progress {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
  }
  .progress-step {
    flex: 1;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .progress-step .label { text-align: center; }
  .progress-step + .progress-step::before {
    top: 22px;
    left: -50%;
    width: 100%;
    height: 2px;
  }
}

/* Stage = grid met links progress (alleen naast de kaart),
   rechts kaart + footer eronder */
.wizard-stage {
  display: grid;
  grid-template-columns: 130px 1fr;
  grid-template-areas:
    "prog card"
    ".    foot";
  column-gap: 28px;
  row-gap: 14px;
  width: 100%;
  max-width: 940px;
  align-items: stretch;
}
.wizard-stage > .progress     { grid-area: prog; align-self: stretch; height: 100%; }
.wizard-stage > .wizard-card  { grid-area: card; }
.wizard-stage > .wizard-foot  { grid-area: foot; }

/* Voortgangsbalk — verticaal, groeit mee met de hoogte van de wizard-kaart */
.progress {
  list-style: none;
  margin: 0;
  padding: 18px 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  height: 100%;
  min-height: 280px;
  counter-reset: step;
}
.progress-step {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  position: relative;
  min-width: 0;
  width: 100%;
  cursor: pointer;
  user-select: none;
  transition: transform .15s;
}
.progress-step:hover { transform: translateX(2px); }
.progress-step.is-disabled {
  cursor: not-allowed;
  opacity: .55;
}
.progress-step.is-disabled:hover { transform: none; }
.progress-step + .progress-step::before {
  content: '';
  position: absolute;
  left: 22px;
  bottom: 100%;
  width: 2px;
  height: calc((100% - 44px) / 1 + 16px);
  background: var(--line);
  z-index: 0;
}
/* Lijn loopt vanaf de bolletjes naar elkaar — uitrekken tot de volgende stap */
.progress {
  position: relative;
}
.progress::before {
  content: '';
  position: absolute;
  left: 21px;
  top: 34px;
  bottom: 34px;
  width: 2px;
  background: var(--line);
  z-index: 0;
}
.progress-step + .progress-step::before { display: none; }
.progress-step .dot {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--surface);
  border: 2px solid var(--line);
  color: var(--ink-soft);
  display: grid; place-items: center;
  font-weight: 600; font-size: 18px;
  position: relative; z-index: 1;
  transition: background .2s, color .2s, border-color .2s;
}
.progress-step .label {
  font-size: 14px;
  color: var(--ink-soft);
  text-align: left;
  letter-spacing: .04em;
}
.progress-step.is-active .dot {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}
.progress-step.is-active .label { color: var(--ink); font-weight: 600; }
.progress-step.is-done .dot {
  background: var(--accent-2);
  color: #fff;
  border-color: var(--accent-2);
}
.progress-step.is-done + .progress-step::before { background: var(--accent-2); }

/* Wizard kaart — off-white beige */
.wizard-card {
  background: var(--card-bg);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.step {
  display: none;
  border: 0;
  margin: 0;
  padding: 32px 38px;
}
.step.is-active { display: block; }
.step legend { display: contents; }

.step-eyebrow {
  display: block;
  font-size: 13px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-2);
  font-weight: 600;
  margin-bottom: 8px;
}
.step h2 {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 3.6vw, 36px);
  line-height: 1.2;
  margin: 0 0 10px;
  color: var(--ink);
  letter-spacing: -.005em;
}
.step-help {
  margin: 0 0 20px;
  color: var(--ink-soft);
  font-size: 18px;
}

/* Stappen 1-4: dubbele maat, met kleur */
.step-big {
  padding: 24px 36px 22px;
}
.step-big h2 {
  font-size: clamp(36px, 4.4vw, 52px);
  margin: 0 0 6px;
}
.step-big .step-help {
  font-size: 22px;
  margin-bottom: 18px;
}

/* Per-stap kleurmarkering: een kleurband bovenaan de kaart */
.step-color-1 { box-shadow: inset 0 8px 0 var(--step1); }
.step-color-2 { box-shadow: inset 0 8px 0 var(--step2); }
.step-color-3 { box-shadow: inset 0 8px 0 var(--step3); }
.step-color-4 { box-shadow: inset 0 8px 0 var(--step4); }

.step-color-1 h2::after,
.step-color-2 h2::after,
.step-color-3 h2::after,
.step-color-4 h2::after {
  content: '';
  display: block;
  width: 56px;
  height: 5px;
  border-radius: 3px;
  margin-top: 6px;
  margin-bottom: 2px;
}
.step-color-1 h2::after { background: var(--step1); }
.step-color-2 h2::after { background: var(--step2); }
.step-color-3 h2::after { background: var(--step3); }
.step-color-4 h2::after { background: var(--step4); }

/* Route-waarschuwing */
.route-notice {
  margin: 4px 0 18px;
  padding: 18px 22px;
  background: #FFF7DA;
  border: 2px solid var(--ikea-yellow);
  border-radius: var(--radius-sm);
  color: var(--ink);
}
.route-notice .route-title {
  display: block;
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 12px;
  color: var(--ink);
  font-family: var(--font-serif);
  letter-spacing: .01em;
}
.route-notice .route-list {
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.route-notice .route-row {
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 12px;
  align-items: baseline;
  font-size: 16px;
  line-height: 1.4;
}
.route-notice .route-row dt {
  margin: 0;
  color: var(--ink-soft);
  font-weight: 500;
  text-transform: lowercase;
}
.route-notice .route-row dd {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}
.route-notice .route-row-total {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px dashed rgba(31,42,55,.25);
  font-size: 17px;
}
.route-notice .route-row-total dd { color: #0058A3; font-weight: 700; }

.btn.is-loading { opacity: .75; cursor: progress; }
.btn:disabled { opacity: .6; cursor: not-allowed; }

/* Choice list (radio cards) — groter, kleur-accent op hover/checked */
.choice-list {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
}
.choice {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 22px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.choice:hover { border-color: var(--step1); background: var(--step1-soft); }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice::before {
  content: '';
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid #C8BCA1;
  background: var(--surface);
  transition: border-color .15s, box-shadow .15s, background .15s;
}
.choice:has(input:checked) {
  border-color: var(--ink);
  background: var(--step1-soft);
  box-shadow: 0 0 0 4px var(--step1);
}
.choice:has(input:checked)::before {
  border-color: var(--ink);
  background: radial-gradient(circle at center, var(--ink) 0 7px, transparent 8px);
}
.choice-body {
  display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0;
}
.choice-title { font-size: 21px; font-weight: 600; color: var(--ink); }
.choice-sub   { font-size: 15px; color: var(--ink-soft); }
.choice-price {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 21px;
  color: var(--ink);
  white-space: nowrap;
}

/* Check list (extras) */
.check-list {
  display: grid;
  gap: 12px;
  margin-bottom: 20px;
}
.check-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 22px;
  border: 2px solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.check-row:hover { border-color: var(--step2); background: var(--step2-soft); }
.check-row input { position: absolute; opacity: 0; pointer-events: none; }
.check-row::before {
  content: '';
  flex: 0 0 26px;
  width: 26px; height: 26px;
  border-radius: 6px;
  border: 2px solid #C8BCA1;
  background: var(--surface);
  transition: border-color .15s, background .15s;
}
.check-row:has(input:checked) {
  border-color: var(--ink);
  background: var(--step2-soft);
  box-shadow: 0 0 0 4px rgba(0,88,163,.18);
}
.check-row:has(input:checked)::before {
  background: var(--ink) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/16px 16px no-repeat;
  border-color: var(--ink);
}
.check-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }
.check-title { font-size: 21px; font-weight: 600; color: var(--ink); }
.check-sub   { font-size: 15px; color: var(--ink-soft); }
.check-price {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: 20px;
  color: var(--ink);
  white-space: nowrap;
}

/* Velden */
.single-field { margin-bottom: 22px; }
.form-grid { display: grid; gap: 14px; margin-bottom: 18px; }
.form-grid-tight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 14px;
}
@media (max-width: 720px) {
  .form-grid-tight { grid-template-columns: 1fr; }
}

.big-field { display: flex; flex-direction: column; gap: 6px; }
.big-field-wide { grid-column: 1 / -1; }
.big-field-label { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: .01em; }
.big-field-label em { font-style: normal; font-weight: 400; color: var(--ink-soft); }
.big-field input,
.big-field textarea {
  font-family: var(--font-sans);
  font-size: 24px;
  padding: 18px 20px;
  border: 2px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
  transition: border-color .15s, box-shadow .15s;
}
.big-field input:focus,
.big-field textarea:focus {
  outline: none;
  border-color: var(--ink);
  box-shadow: 0 0 0 4px rgba(31,42,55,.08);
}
.big-field textarea { resize: vertical; min-height: 80px; }
.big-field-hint { font-size: 15px; color: var(--ink-soft); }

/* Stap 3 zonder subtitel: geef het veld extra ademruimte */
.step-color-3 .single-field { margin-top: 12px; }
.step-color-3 .big-field input { font-size: 32px; padding: 22px 24px; text-align: center; letter-spacing: .15em; }

/* Summary */
.summary {
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin-bottom: 18px;
}
.summary-tight { padding: 14px 18px; margin-bottom: 12px; }
.summary h3 {
  font-family: var(--font-serif);
  font-size: 22px;
  font-weight: 600;
  margin: 0 0 8px;
}
.summary dl { margin: 0; display: grid; gap: 4px; }
.summary dl > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 4px 0;
  border-bottom: 1px dashed var(--line);
}
.summary dl > div:last-of-type { border-bottom: 0; }
.summary dt { color: var(--ink-soft); font-size: 16px; }
.summary dd { margin: 0; font-weight: 600; font-size: 17px; text-align: right; }
.summary-total dt,
.summary-total dd {
  font-family: var(--font-serif);
  font-size: 22px !important;
  color: var(--ink) !important;
  font-weight: 600;
}

/* Step navigation */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  border-top: 1px solid var(--line-soft);
  padding-top: 18px;
}
.step-nav > span:empty { flex: 1; }
.step-nav .btn { min-height: 56px; padding: 14px 26px; font-size: 18px; }

/* Wizard footer onder de kaart: alleen copyright */
.wizard-foot {
  display: flex;
  justify-content: center;
  text-align: center;
}
.wizard-copyright {
  color: var(--ink-soft);
  font-size: 14px;
}

/* Vaste contactknoppen rechtsboven, uitgelijnd op de bovenkant
   van de wizard. Bel-knop boven, e-mail-knop daaronder. */
.contact-stack {
  position: fixed;
  top: 24px;
  right: 24px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
}
/* Op het startscherm staat de witte header bovenin; de zwevende
   contactknoppen schuiven daaronder zodat ze niet over het logo vallen. */
body.is-intro .contact-stack {
  top: 130px;
}

.bel-floating,
.mail-floating {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: .01em;
  text-decoration: none;
  border-radius: 999px;
  border: 2px solid transparent;
  box-shadow: 0 6px 18px rgba(31,42,55,.16), 0 2px 4px rgba(31,42,55,.08);
  transition: transform .15s, box-shadow .15s, background .15s, color .15s;
  white-space: nowrap;
}
.bel-floating svg,
.mail-floating svg { flex-shrink: 0; }

.bel-floating {
  background: var(--ikea-yellow);
  color: var(--ink);
  border-color: var(--ikea-yellow);
}
.bel-floating:hover,
.bel-floating:focus-visible {
  background: #FFE54A;
  color: var(--ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(31,42,55,.20), 0 3px 6px rgba(31,42,55,.10);
}

.mail-floating {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--ink);
}
.mail-floating:hover,
.mail-floating:focus-visible {
  background: var(--ink);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(31,42,55,.20), 0 3px 6px rgba(31,42,55,.10);
}

/* Op kleine schermen: kleinere variant of alleen icoon */
@media (max-width: 720px) {
  .contact-stack {
    top: 12px;
    right: 12px;
    gap: 8px;
  }
  body.is-intro .contact-stack {
    top: 92px;
  }
  .bel-floating,
  .mail-floating {
    padding: 11px 13px;
    font-size: 14px;
    gap: 8px;
  }
  .bel-floating span,
  .mail-floating span {
    display: none;
  }
}

/* =========================================================
   STAP "KLAAR" — factuur / offerte
   ========================================================= */
.step-done {
  padding: 24px 28px;
  display: none;
}
.step-done.is-active { display: block; }
.step-done .step-eyebrow { color: var(--success); }
.step-done h2 { font-size: 28px; margin: 0 0 6px; }
.step-done .step-help { font-size: 17px; margin-bottom: 14px; }

.step-done .done-actions {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 10px;
}

.invoice {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 30px;
  margin: 0 0 14px;
  color: var(--ink);
  font-size: 15px;
  line-height: 1.5;
}
.invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 2px solid var(--ink);
  padding-bottom: 16px;
  margin-bottom: 16px;
}
.invoice-head .brand-mark { font-size: 22px; padding: 9px 14px; }
.invoice-meta { text-align: right; }
.invoice-meta h3 {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 600;
  margin: 0 0 6px;
  color: var(--ink);
  letter-spacing: .08em;
  text-transform: uppercase;
}
.invoice-meta p { margin: 1px 0; font-size: 13px; color: var(--ink-soft); }
.invoice-meta strong { color: var(--ink); font-weight: 600; }

/* 2 kolommen x 2 rijen - Aan/Telefoon, E-mail/Postcode */
.invoice-customer {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 32px;
  row-gap: 10px;
  margin: 0 0 16px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.invoice-customer p {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 15px;
}
.invoice-customer .il {
  display: block;
  color: var(--ink-soft);
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-weight: 500;
}
.invoice-customer strong { color: var(--ink); font-weight: 600; font-size: 16px; }
@media (max-width: 520px) {
  .invoice-customer { grid-template-columns: 1fr; }
}

.invoice-table { width: 100%; border-collapse: collapse; margin: 6px 0 12px; }
.invoice-table th {
  text-align: left;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-soft);
  padding: 8px 0;
  border-bottom: 1px solid var(--line);
}
.invoice-table th.amount,
.invoice-table td.amount { text-align: right; white-space: nowrap; }
.invoice-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
  vertical-align: top;
}
.invoice-table td strong { display: inline; font-weight: 600; color: var(--ink); }
.invoice-table .inv-sub {
  display: inline;
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}
.invoice-table tbody tr:last-child td { border-bottom: 1px solid var(--line); }
.invoice-table tfoot td { border: 0; padding: 8px 0; font-size: 15px; color: var(--ink-soft); }
.invoice-table tfoot td.amount { color: var(--ink); }
.invoice-table tfoot tr:first-child td { padding-top: 14px; }
.invoice-total td {
  font-family: var(--font-serif);
  font-size: 20px !important;
  font-weight: 600;
  color: var(--ink) !important;
  border-top: 1px solid var(--line) !important;
  padding-top: 12px !important;
}

.invoice-foot {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--ink-soft);
}
.invoice-foot p { margin: 3px 0; }
.invoice-signature { margin-top: 8px !important; font-size: 14px; color: var(--ink) !important; }

/* Form status */
.form-status {
  margin: 8px 36px 24px;
  padding: 14px 18px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  display: none;
}
.form-status.is-error {
  display: block;
  background: #FCEEEE;
  color: var(--danger);
  border: 1px solid #F4C7C7;
}

/* Focus rings */
:focus-visible {
  outline: 3px solid var(--accent-2);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =========================================================
   INTRO-BALK - heldere beige strook tussen lead en Start-knop
   ========================================================= */
.intro-bar {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  margin-top: 25px;
  margin-bottom: 25px;
  background-color: var(--bar-beige);
  background-image: url('montage.png');
  background-repeat: no-repeat;
  background-position: calc(50% - 25px) calc(50% - 10px);
  background-size: auto 90%;
  min-height: 180px;
  border-radius: 0;
}
.intro-landing:has(.intro-bar) #startBtn { margin-top: 0; }

/* =========================================================
   GEKLEURDE SLEUTELWOORDEN IN DE KOPPEN
   ========================================================= */
.hl,
.hl-1, .hl-2, .hl-3, .hl-4, .hl-done {
  font-style: normal;
}
.hl       { color: #B07A2C; }
.hl-1     { color: #B58A00; }
.hl-2     { color: var(--ikea-blue); }
.hl-3     { color: #B07A2C; }
.hl-4     { color: var(--success); }
.hl-done  { color: var(--success); }

/* =========================================================
   INLINE VELD-VALIDATIE
   ========================================================= */
.field-error {
  display: none;
  margin-top: 4px;
  color: var(--danger);
  font-size: 15px;
  font-weight: 500;
}
.big-field.is-invalid .field-error { display: block; }
.big-field.is-invalid input,
.big-field.is-invalid textarea {
  border-color: var(--danger) !important;
  background: #FCEEEE;
}
.big-field.is-invalid input:focus,
.big-field.is-invalid textarea:focus {
  box-shadow: 0 0 0 4px rgba(178,58,58,.15) !important;
}

/* =========================================================
   STAP 5 - intro-balkje + "Begin opnieuw"-knop
   ========================================================= */
.done-intro {
  background: var(--accent-2-soft);
  border: 1px solid #E8D2A8;
  border-left: 6px solid var(--accent-2);
  border-radius: var(--radius);
  padding: 18px 22px;
  margin: 0 0 18px;
}
.done-intro h2 {
  margin: 0 0 6px !important;
}
.done-intro .step-help {
  margin: 0 !important;
  font-size: 17px;
}

.restart-area {
  display: none;
  justify-content: center;
  align-items: center;
  padding: 12px 0;
}
.wizard-stage.is-final .restart-area { display: flex; }
.wizard-stage.is-final > .progress { display: none; }
.wizard-stage.is-final {
  grid-template-columns: 130px 1fr;
  grid-template-areas:
    "rest card"
    ".    foot";
}
.wizard-stage > .restart-area { grid-area: rest; align-self: center; }

@media (max-width: 880px) {
  .wizard-stage.is-final {
    grid-template-columns: 1fr;
    grid-template-areas:
      "rest"
      "card"
      "foot";
  }
  .restart-area { padding: 4px 0 12px; }
  /* Op stap 5 geen dot-overlap nodig, dus de kaart niet omhoogtrekken */
  .wizard-stage.is-final .wizard-card { margin-top: 0; }
}

.btn-restart {
  background: var(--surface);
  color: var(--ink);
  border: 2px solid var(--ink);
  border-radius: 22px;
  padding: 16px 22px;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.25;
  cursor: pointer;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  transition: background .15s, color .15s;
}
.btn-restart svg {
  flex-shrink: 0;
}
.btn-restart:hover {
  background: var(--ink);
  color: #fff;
}

/* =========================================================
   MOBIEL (<=720px) — full-screen wizard, alles past op 1 scherm,
   geen progress-balk, compacte inhoud, knoppen vastgekleefd onderaan.
   ========================================================= */
@media (max-width: 720px) {
  body { font-size: 16px; }

  /* INTRO blijft normaal (header zichtbaar) */
  .brand-mark { font-size: 28px; padding: 11px 18px; }
  .site-header { padding: 14px 0; }

  .intro { padding: 24px 0 16px; }
  .intro-landing {
    min-height: calc(100vh - 100px);
    min-height: calc(100dvh - 100px);
    padding: 3vh 0 4vh;
  }
  .intro h1 {
    font-size: clamp(28px, 7vw, 40px);
    margin-bottom: 14px;
  }
  .intro .lead { font-size: 18px; margin-bottom: 22px; }
  .intro-bar {
    min-height: 140px;
    background-size: auto 80%;
  }

  /* === WIZARD: FULL-SCREEN MOBIELE MODUS === */
  body.is-wizard .site-header { display: none; }

  .wizard-section {
    padding: 0;
    min-height: 100vh;
    min-height: 100dvh;
    align-items: stretch;
  }

  .wizard-stage {
    grid-template-columns: 1fr;
    grid-template-areas: "card" "foot";
    column-gap: 0;
    row-gap: 0;
    max-width: none;
    width: 100%;
  }

  /* Progress-balk volledig weg op mobiel */
  .wizard-stage > .progress { display: none; }

  /* Kaart vult de hele schermhoogte */
  .wizard-card {
    margin: 0;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: var(--card-bg);
    display: flex;
    flex-direction: column;
    min-height: 100dvh;
  }

  /* Step vult de kaart, knoppen blijven onderaan */
  .step, .step-big {
    padding: 18px 18px 14px;
  }
  .step.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }

  /* Kleurenband boven de kaart blijft, maar dunner; lijntje onder h2 weg */
  .step-color-1 { box-shadow: inset 0 5px 0 var(--step1); }
  .step-color-2 { box-shadow: inset 0 5px 0 var(--step2); }
  .step-color-3 { box-shadow: inset 0 5px 0 var(--step3); }
  .step-color-4 { box-shadow: inset 0 5px 0 var(--step4); }
  .step-color-1 h2::after,
  .step-color-2 h2::after,
  .step-color-3 h2::after,
  .step-color-4 h2::after { display: none; }

  /* Compacte koppen */
  .step-eyebrow {
    font-size: 11px;
    letter-spacing: .14em;
    margin-bottom: 4px;
  }
  .step h2 {
    font-size: 22px;
    line-height: 1.15;
    margin: 0 0 4px;
  }
  .step-big h2 {
    font-size: clamp(22px, 6vw, 28px);
    line-height: 1.15;
    margin: 0 0 4px;
  }
  .step-help, .step-big .step-help {
    font-size: 14px;
    line-height: 1.4;
    margin: 0 0 12px;
  }

  /* Keuze- en check-rijen compact */
  .choice-list, .check-list {
    gap: 6px;
    margin-bottom: 10px;
  }
  .choice, .check-row {
    padding: 9px 12px;
    gap: 10px;
    border-radius: 10px;
    border-width: 2px;
  }
  .choice::before, .check-row::before {
    flex: 0 0 18px;
    width: 18px;
    height: 18px;
  }
  .choice-title, .check-title {
    font-size: 15px;
    line-height: 1.2;
  }
  .choice-sub, .check-sub {
    font-size: 12px;
    line-height: 1.3;
  }
  .choice-price, .check-price { font-size: 14px; }

  /* Form-velden — input >=16px om iOS-autozoom te voorkomen */
  .single-field { margin-bottom: 12px; }
  .form-grid { gap: 10px; margin-bottom: 10px; }
  .form-grid-tight { grid-template-columns: 1fr; gap: 10px; margin-bottom: 10px; }
  .big-field { gap: 3px; }
  .big-field-label { font-size: 13px; }
  .big-field input, .big-field textarea {
    font-size: 17px;
    padding: 11px 13px;
  }
  .big-field-hint { font-size: 12px; }
  .step-color-3 .big-field input {
    font-size: 22px;
    padding: 13px 16px;
    letter-spacing: .12em;
  }

  /* Reisnotice compact */
  .route-notice {
    padding: 10px 12px;
    margin: 0 0 10px;
  }
  .route-notice .route-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  .route-notice .route-row {
    grid-template-columns: 1fr;
    gap: 0;
    font-size: 12px;
  }
  .route-notice .route-row dd { margin-bottom: 2px; }
  .route-notice .route-row-total {
    font-size: 14px;
    padding-top: 6px;
    margin-top: 4px;
  }

  /* Samenvatting compact */
  .summary {
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .summary h3 { font-size: 16px; margin: 0 0 4px; }
  .summary dt { font-size: 13px; }
  .summary dd { font-size: 14px; }
  .summary-total dt, .summary-total dd { font-size: 17px !important; }

  /* Knoppen vastgekleefd onderaan */
  .step-nav {
    margin-top: auto;
    padding-top: 10px;
    gap: 8px;
    border-top: 1px solid var(--line-soft);
    flex-wrap: nowrap;
  }
  .step-nav .btn {
    flex: 1;
    min-height: 46px;
    padding: 10px 12px;
    font-size: 15px;
    min-width: 0;
    gap: 6px;
  }

  /* Wizard-footer (copyright) verbergen op mobiel */
  .wizard-foot { display: none; }

  /* Stap 5 (offerte) — mag scrollen, geen full-height beperking */
  .step-done {
    padding: 18px 16px 24px;
  }
  .step-done.is-active {
    display: flex;
    flex-direction: column;
    flex: 1;
  }
  .step-done h2 { font-size: 22px; margin: 0 0 4px; }
  .step-done .step-help { font-size: 14px; margin-bottom: 10px; }

  /* Done-intro balkje */
  .done-intro {
    padding: 12px 14px;
    border-left-width: 5px;
    margin-bottom: 12px;
  }
  .done-intro h2 { margin: 0 0 4px !important; }
  .done-intro .step-help { font-size: 13px; }

  /* Offerte */
  .invoice {
    padding: 14px 14px;
    font-size: 13px;
    border-radius: 10px;
  }
  .invoice-head {
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    flex-direction: column;
    align-items: flex-start;
  }
  .invoice-head .brand-mark { font-size: 18px; padding: 7px 11px; }
  .invoice-meta { text-align: left; }
  .invoice-meta h3 { font-size: 18px; }
  .invoice-meta p { font-size: 11px; }
  .invoice-customer {
    grid-template-columns: 1fr;
    column-gap: 10px;
    row-gap: 8px;
  }
  .invoice-customer p { font-size: 13px; }
  .invoice-customer strong { font-size: 14px; }
  .invoice-customer .il { font-size: 10px; }
  .invoice-table th { font-size: 10px; }
  .invoice-table td { font-size: 13px; padding: 8px 0; }
  .invoice-table .inv-sub { font-size: 12px; }
  .invoice-total td { font-size: 16px !important; padding-top: 10px !important; }
  .invoice-foot { font-size: 11px; padding-top: 10px; margin-top: 10px; }

  /* Knoppen onder de offerte stapelen */
  .done-actions {
    gap: 8px;
    flex-direction: column;
    margin-top: 8px;
  }
  .done-actions .btn { width: 100%; min-height: 46px; }

  /* Restart-knop compacter */
  .restart-area { padding: 4px 0 10px; }
  .btn-restart {
    padding: 8px 14px;
    font-size: 13px;
    gap: 4px;
    border-radius: 16px;
  }
  .btn-restart svg { width: 32px; height: 32px; }

  /* Floating contact-knoppen kleiner, alleen iconen */
  .contact-stack {
    top: 8px;
    right: 8px;
    gap: 6px;
  }
  body.is-intro .contact-stack { top: 92px; }
  .bel-floating, .mail-floating {
    padding: 9px 11px;
    font-size: 13px;
    gap: 6px;
  }
  .bel-floating span, .mail-floating span { display: none; }
}

/* =========================================================
   IPHONE / SMALLE TELEFOONS (<=480px) — extra inkrimping voor
   alleen het intro-scherm. De wizard zelf zit al volledig
   geconfigureerd in het 720px-blok hierboven.
   ========================================================= */
@media (max-width: 480px) {
  .container { padding: 0 16px; }

  /* Logo iets verder krimpen */
  .brand-mark { font-size: 24px; padding: 9px 14px; border-radius: 10px; }
  .site-header { padding: 12px 0; }

  /* Intro */
  .intro h1 { font-size: clamp(24px, 7.5vw, 32px); }
  .intro .lead { font-size: 16px; }
  .eyebrow { font-size: 12px; margin-bottom: 14px; }

  /* Beige balk: plaatje gewoon mooi gecentreerd, geen offset */
  .intro-bar {
    min-height: 120px;
    background-size: auto 80%;
    background-position: center 48%;
    margin-top: 16px;
    margin-bottom: 16px;
  }

  /* Step-inhoud nóg iets compacter op iPhone */
  .step, .step-big { padding: 14px 14px 12px; }
  .step h2 { font-size: 20px; }
  .step-big h2 { font-size: clamp(20px, 5.6vw, 24px); }
  .step-help, .step-big .step-help { font-size: 13px; margin-bottom: 10px; }
  .step-eyebrow { font-size: 10px; }

  /* Choice/check nog kleiner op iPhone */
  .choice, .check-row { padding: 8px 11px; gap: 9px; border-radius: 9px; }
  .choice-title, .check-title { font-size: 14px; }
  .choice-sub, .check-sub { font-size: 11px; }
  .choice-price, .check-price { font-size: 13px; }

  /* Reisnotice nóg compacter */
  .route-notice { padding: 8px 11px; margin-bottom: 8px; }
  .route-notice .route-title { font-size: 13px; margin-bottom: 4px; }
  .route-notice .route-row { font-size: 11px; }

  /* Step-nav iets kleiner */
  .step-nav .btn { min-height: 44px; font-size: 14px; padding: 9px 10px; }

  /* Floating contact-knoppen nóg kleiner zodat ze niet overlappen met logo */
  .contact-stack { top: 8px; right: 8px; gap: 5px; }
  body.is-intro .contact-stack { top: 76px; }
  .bel-floating, .mail-floating { padding: 8px 10px; }
  .bel-floating svg, .mail-floating svg { width: 18px; height: 18px; }
}

/* =========================================================
   HONEYPOT — onzichtbaar veld voor anti-spam.
   Echte bezoekers zien dit niet (positionering buiten beeld,
   geen tabstop). Bots vullen het wel automatisch in, en
   worden dan stilzwijgend afgewezen door zowel JS als PHP.
   We gebruiken bewust GEEN display:none of visibility:hidden,
   omdat slimmere bots die juist herkennen en overslaan.
   ========================================================= */
.hp-veld {
  position: absolute !important;
  left: -10000px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
0; padding: 0; font-size: 14px; color: var(--ink-soft); }

/* =========================================================
   SEO-content blok onder de wizard
   - Zichtbaar voor bezoekers op de intro-pagina
   - Verborgen wanneer de wizard actief is (geen afleiding)
   - Altijd in de DOM, dus altijd leesbaar voor Google
   ========================================================= */
body.is-wizard .seo-block { display: none \!important; }

.seo-block {
  background: var(--bg-soft);
  border-top: 1px solid var(--line);
  padding: 56px 0 40px;
  margin-top: 24px;
}

.seo-block .container {
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 20px;
}

.seo-title {
  font-family: var(--font-serif);
  font-weight: 600;
  font-size: clamp(28px, 4vw, 40px);
  line-height: 1.2;
  margin: 0 0 12px;
  color: var(--ink);
}
.seo-title .hl {
  background: linear-gradient(transparent 60%, var(--ikea-yellow-soft) 60%);
  padding: 0 4px;
}

.seo-lead {
  font-size: 18px;
  line-height: 1.7;
  color: var(--ink-soft);
  max-width: 760px;
  margin: 0 0 32px;
}

.seo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
}

.seo-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.seo-card-wide { grid-column: 1 / -1; }

.seo-card h3 {
  font-family: var(--font-serif);
  font-size: 24px;
  font-weight: 600;
  margin: 0 0 12px;
  color: var(--ink);
}

.seo-card-lead {
  margin: 0 0 14px;
  color: var(--ink-soft);
  line-height: 1.6;
}

.seo-list,
.seo-steps {
  margin: 0;
  padding-left: 20px;
  line-height: 1.65;
}
.seo-list li,
.seo-steps li { margin-bottom: 6px; }

.seo-cities {
  font-size: 16px;
  line-height: 1.8;
  color: var(--ink);
  margin: 0;
}

.seo-card-foot {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px dashed var(--line-soft);
  color: var(--ink-soft);
  font-size: 15px;
}

.seo-faq {
  border-bottom: 1px solid var(--line-soft);
  padding: 12px 0;
}
.seo-faq:last-of-type { border-bottom: none; }
.seo-faq summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink);
  list-style: none;
  position: relative;
  padding-right: 28px;
}
.seo-faq summary::-webkit-details-marker { display: none; }
.seo-faq summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 22px;
  color: var(--accent-2);
  line-height: 1;
}
.seo-faq[open] summary::after { content: "–"; }
.seo-faq p {
  margin: 10px 0 4px;
  color: var(--ink-soft);
  line-height: 1.65;
}

.seo-reviews {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
  margin-top: 6px;
}
.seo-review {
  background: var(--card-bg);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm);
  padding: 0;
  margin: 0;
  overflow: hidden;
}
.seo-review-gallery {
  display: grid;
  grid-template-columns: 2fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 3px;
  aspect-ratio: 4 / 3;
}
.seo-review-gallery.two-photos {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr;
  aspect-ratio: 4 / 3;
}
.seo-review-gallery img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
}
.seo-review-gallery img:first-child {
  grid-row: 1 / 3;
}
.seo-review-gallery.two-photos img:first-child {
  grid-row: 1;
}
.seo-review-body {
  padding: 16px 18px;
}
.seo-review blockquote {
  margin: 0 0 8px;
  font-family: var(--font-serif);
  font-size: 18px;
  line-height: 1.5;
  color: var(--ink);
}
.seo-review blockquote p { margin: 0; }
.seo-review figcaption {
  font-size: 14px;
  color: var(--ink-soft);
  font-style: italic;
}
.seo-review-title {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--ink-soft);
  margin: 0 0 8px;
}

.seo-foot {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.7;
}
.seo-foot a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.seo-foot a:hover { color: var(--accent-2); }