/* ---------- Design tokens ---------- */
  :root{
    --c-bg:#fff; --c-bg-soft:#F4F6FB; --c-bg-dark:#0F2C4A; --c-bg-darker:#0A1F36;
    --c-ink:#1A1F2E; --c-ink-soft:#4A5468; --c-muted:#6B7280; --c-line:#E3E8F0;
    --c-accent:#1E5BBA; --c-accent-ink:#0F2C4A; --c-gold:#C9A45C; --c-success:#1F8F5B;
    --radius-sm:8px; --radius:14px; --radius-lg:22px;
    --shadow-sm:0 1px 2px rgba(15,44,74,.06), 0 1px 1px rgba(15,44,74,.04);
    --shadow:0 10px 30px -12px rgba(15,44,74,.18), 0 2px 6px rgba(15,44,74,.06);
    --shadow-lg:0 30px 60px -20px rgba(15,44,74,.25);
    --container:1180px;
    --font-sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;
    --font-serif:'Source Serif Pro',Georgia,'Times New Roman',serif;
  }

  *,*::before,*::after{ box-sizing:border-box; }
  html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
  body{ margin:0; font-family:var(--font-sans); color:var(--c-ink); background:var(--c-bg); line-height:1.6; font-size:17px; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
  img{ max-width:100%; height:auto; display:block; }
  a{ color:var(--c-accent); text-decoration:none; }
  a:hover{ text-decoration:underline; }
  button{ font:inherit; cursor:pointer; }

  .container{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:clamp(16px,4vw,28px); }
  section{ padding-block: clamp(56px, 9vw, 110px); }
  .eyebrow{ display:inline-block; font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-accent-ink); font-weight:600; padding:6px 12px; border-radius:999px; background:rgba(30,91,186,.08); margin-bottom:18px; }
  h1,h2,h3,h4{ font-family:var(--font-serif); color:var(--c-bg-dark); line-height:1.15; letter-spacing:-.01em; margin:0 0 .5em; font-weight:700; }
  h1{ font-size: clamp(34px, 5.2vw, 58px); }
  h2{ font-size: clamp(28px, 3.6vw, 42px); }
  h3{ font-size: clamp(20px, 2vw, 24px); }
  p{ margin:0 0 1em; color:var(--c-ink-soft); }
  .lede{ font-size: clamp(17px, 1.6vw, 20px); color:var(--c-ink-soft); max-width:60ch; }

  /* Buttons */
  .btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:14px 22px; border-radius:10px; font-weight:600; font-size:15px; letter-spacing:.01em; border:1px solid transparent; transition:transform .15s ease, box-shadow .2s ease, background .2s ease; text-decoration:none; white-space:nowrap; }
  .btn-primary{ background:var(--c-bg-dark); color:#fff; box-shadow:var(--shadow-sm); }
  .btn-primary:hover{ background:var(--c-accent); transform:translateY(-1px); box-shadow:var(--shadow); text-decoration:none; }
  .btn-ghost{ background:transparent; color:var(--c-bg-dark); border-color:var(--c-line); }
  .btn-ghost:hover{ background:var(--c-bg-soft); text-decoration:none; }
  .btn-gold{ background:var(--c-gold); color:#1A1F2E; }
  .btn-gold:hover{ background:#B89146; color:#fff; text-decoration:none; }
  .btn svg{ width:18px; height:18px; }

  /* Header */
  .site-header{ position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92); backdrop-filter:saturate(160%) blur(10px); -webkit-backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--c-line); }
  .nav{ display:flex; align-items:center; justify-content:space-between; height:68px; gap:14px; }
  .brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:700; font-size:22px; color:var(--c-bg-dark); }
  .brand:hover{ text-decoration:none; }
  .brand-mark{ width:34px; height:34px; border-radius:8px; background:linear-gradient(135deg,var(--c-bg-dark),var(--c-accent)); color:#fff; display:grid; place-items:center; font-weight:700; font-size:18px; font-family:var(--font-serif); }
  .nav-links{ display:flex; align-items:center; gap:8px; }
  .nav-links a{ color:var(--c-ink); padding:8px 14px; border-radius:8px; font-weight:500; font-size:15px; }
  .nav-links a:hover{ background:var(--c-bg-soft); text-decoration:none; }
  .nav-cta{ display:flex; align-items:center; gap:10px; }
  .nav-toggle{ display:none; background:none; border:1px solid var(--c-line); width:42px; height:42px; border-radius:10px; }
  .nav-toggle svg{ width:22px; height:22px; }

  /* Language switch */
  .lang-switch{ display:inline-flex; background:var(--c-bg-soft); border:1px solid var(--c-line); border-radius:999px; padding:3px; font-size:13px; font-weight:600; }
  .lang-switch button{ background:transparent; border:none; padding:6px 12px; border-radius:999px; color:var(--c-ink-soft); }
  .lang-switch button.active{ background:var(--c-bg-dark); color:#fff; }

  @media (max-width: 980px){
    .nav-links{ position:absolute; top:68px; left:0; right:0; flex-direction:column; align-items:stretch; background:#fff; border-bottom:1px solid var(--c-line); padding:14px; gap:4px; max-height:0; overflow:hidden; transition:max-height .25s ease, padding .25s ease; }
    .nav-links a{ padding:14px 12px; }
    .nav-cta .btn-ghost{ display:none; }
    .nav-toggle{ display:inline-flex; align-items:center; justify-content:center; }
    body.nav-open .nav-links{ max-height:440px; padding:14px; }
  }
  @media (max-width: 480px){ .nav-cta .btn-primary{ display:none; } }

  /* Hero */
  .hero{ position:relative; overflow:hidden; background: radial-gradient(800px 500px at 88% 10%, rgba(201,164,92,.05), transparent 65%), var(--c-bg-soft); padding-block: clamp(70px, 11vw, 140px); }
  .hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items:center; }
  .hero p.lede{ font-size: clamp(18px, 1.7vw, 21px); }
  .hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-top:28px; }
  .hero-trust{ margin-top:28px; display:flex; flex-wrap:wrap; gap:18px 28px; color:var(--c-ink-soft); font-size:14px; }
  .hero-trust span{ display:inline-flex; align-items:center; gap:8px; }
  .hero-trust svg{ width:16px; height:16px; color:var(--c-success); }

  .hero-card{ position:relative; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); overflow:hidden; }
  .hero-card-bar{ display:flex; gap:6px; padding:12px 16px; background:#F4F6FB; border-bottom:1px solid var(--c-line); }
  .hero-card-bar i{ width:11px; height:11px; border-radius:50%; background:#D6DCE6; display:block; }
  .hero-card-bar i:nth-child(1){ background:#E5736B; } .hero-card-bar i:nth-child(2){ background:#E0B048; } .hero-card-bar i:nth-child(3){ background:#5DBB81; }
  .hero-card-body{ padding: clamp(20px, 3vw, 36px); }
  /* Mini-site preview (kapsalon mockup) */
  .mini-hero{
    background: linear-gradient(160deg, #FDF7EE 0%, #F8E9D3 100%);
    color: var(--c-bg-dark);
    border-radius: var(--radius);
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(201,164,92,.25);
  }
  .mini-nav{
    display: flex; justify-content: space-between; align-items: center;
    padding: 12px 18px;
    background: rgba(255,255,255,.55);
    border-bottom: 1px solid rgba(201,164,92,.2);
    font-size: 11px;
  }
  .mini-brand{ font-family: var(--font-serif); font-style: italic; font-size: 14px; color: var(--c-bg-dark); letter-spacing: .01em; }
  .mini-menu{ color: rgba(15,44,74,.55); letter-spacing: .04em; }
  .mini-content{
    display: grid;
    grid-template-columns: 130px 1fr;
    gap: 18px;
    padding: 22px 22px 18px;
    align-items: center;
  }
  .mini-art{ aspect-ratio: 1; }
  .mini-art svg{ width: 100%; height: 100%; }
  .mini-hero small{
    color: rgba(15,44,74,.6);
    font-family: var(--font-serif);
    font-style: italic;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: none;
  }
  .mini-hero h3{
    color: var(--c-bg-dark);
    font-family: var(--font-serif);
    font-size: clamp(18px, 2.1vw, 24px);
    margin: .35em 0 .35em;
    line-height: 1.15;
  }
  .mini-hero h3 em{
    color: #8C5A3C;
    font-style: italic;
    font-weight: 400;
  }
  .mini-hero p{
    color: rgba(15,44,74,.7);
    margin: 0;
    font-size: 13.5px;
    line-height: 1.5;
  }
  .mini-hero-btn{
    margin-top: 14px;
    display: inline-flex; gap: 6px; align-items: center;
    background: var(--c-bg-dark);
    color: #fff;
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 13px;
    box-shadow: 0 4px 10px -4px rgba(15,44,74,.4);
  }
  .mini-hero-btn svg{ width: 14px; height: 14px; }
  .mini-footer{
    padding: 10px 18px;
    border-top: 1px solid rgba(201,164,92,.25);
    background: rgba(255,255,255,.45);
    font-size: 11px;
    color: rgba(15,44,74,.65);
    letter-spacing: .02em;
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
  }
  @media (max-width: 540px){
    .mini-content{ grid-template-columns: 90px 1fr; gap: 14px; padding: 18px; }
    .mini-menu{ display: none; }
  }
  .mini-list{ list-style:none; padding:0; margin:18px 0 0; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
  .mini-list li{ display:flex; align-items:center; gap:8px; color:var(--c-ink-soft); font-size:14px; }
  .mini-list svg{ width:16px; height:16px; color:var(--c-success); flex-shrink:0; }

  @media (max-width: 880px){ .hero-grid{ grid-template-columns: 1fr; } .mini-list{ grid-template-columns: 1fr; } }

  /* Audience */
  .audience{ background:var(--c-bg-soft); border-block:1px solid var(--c-line); padding-block: 36px; }
  .audience-inner{ display:flex; align-items:center; justify-content:space-between; gap:18px; flex-wrap:wrap; }
  .audience small{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); font-weight:600; }
  .audience-list{ display:flex; flex-wrap:wrap; gap:10px 18px; }
  .audience-list span{ display:inline-flex; align-items:center; gap:8px; color:var(--c-ink); font-weight:500; font-size:15px; }
  .audience-list svg{ width:18px; height:18px; color:var(--c-bg-dark); }

  /* Services, 3 columns desktop (3+3), 2 on tablet, 1 on mobile */
  .services-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap: 22px; margin-top: 44px; }
  @media (max-width: 920px){ .services-grid{ grid-template-columns:repeat(2, 1fr); } }
  @media (max-width: 560px){ .services-grid{ grid-template-columns:1fr; } }
  .card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding: clamp(22px, 2.5vw, 30px); transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
  .card:hover{ transform:translateY(-3px); box-shadow:var(--shadow); border-color:transparent; }
  .icon-tile{ width:48px; height:48px; border-radius:12px; background:rgba(30,91,186,.1); color:var(--c-bg-dark); display:grid; place-items:center; margin-bottom:18px; }
  .icon-tile svg{ width:24px; height:24px; }
  .card h3{ margin-bottom:.4em; font-size:20px; }
  .card p{ margin:0; font-size:15px; }

  /* Build options */
  .options{ background:linear-gradient(180deg,#F7F9FC,#fff); }
  .options-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
  .option-card{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); padding: clamp(26px, 3vw, 38px); position:relative; transition:box-shadow .2s ease, transform .2s ease; }
  .option-card:hover{ box-shadow:var(--shadow); transform:translateY(-3px); }
  .option-tag{ display:inline-block; font-size:12px; letter-spacing:.12em; text-transform:uppercase; font-weight:700; padding:5px 11px; border-radius:999px; }
  .option-tag.classic{ background:rgba(15,44,74,.08); color:var(--c-bg-dark); }
  .option-tag.builder{ background:rgba(201,164,92,.18); color:#8A6E2D; }
  .option-card h3{ font-size:24px; margin-top:14px; }
  .option-card ul{ list-style:none; padding:0; margin: 18px 0 0; display:flex; flex-direction:column; gap:10px; }
  .option-card li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--c-ink-soft); }
  .option-card li svg{ width:18px; height:18px; color:var(--c-success); flex-shrink:0; margin-top:3px; }
  .option-card li.x svg{ color:#D2D7DF; }
  .option-foot{ margin-top:22px; padding-top:18px; border-top:1px solid var(--c-line); font-size:14px; color:var(--c-muted); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:8px; }
  .option-foot strong{ color:var(--c-bg-dark); font-family:var(--font-serif); font-size:20px; font-weight:700; }
  @media (max-width: 760px){ .options-grid{ grid-template-columns: 1fr; } }

  /* Process */
  .process{ background:linear-gradient(180deg,#fff, #F7F9FC); }
  .steps{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 44px; counter-reset: step; }
  .step{ position:relative; padding: 28px 24px 26px; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); }
  .step::before{ counter-increment: step; content: "0" counter(step); position:absolute; top:-18px; left:24px; background:var(--c-bg-dark); color:#fff; font-family:var(--font-serif); font-weight:700; width:42px; height:42px; border-radius:12px; display:grid; place-items:center; font-size:18px; box-shadow:var(--shadow-sm); }
  .step h3{ font-size:18px; margin-top:14px; margin-bottom:.4em; }
  .step p{ font-size:14.5px; margin:0; }
  @media (max-width: 880px){ .steps{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ .steps{ grid-template-columns: 1fr; } }

  /* Portfolio */
  .portfolio-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; }
  .case{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm); transition:transform .2s ease, box-shadow .2s ease; }
  .case:hover{ transform:translateY(-4px); box-shadow:var(--shadow); }
  .case-img{ height: 260px; display:grid; place-items:center; position:relative; overflow:hidden; }
  .case-img svg{ width:100%; height:100%; }
  .case-body{ padding: clamp(20px, 2.5vw, 28px); }
  .case-tag{ font-size:12px; letter-spacing:.14em; text-transform:uppercase; color:var(--c-muted); font-weight:600; }
  .case h3{ font-size:22px; margin:.5em 0 .4em; }
  .case-meta{ display:flex; gap:18px; flex-wrap:wrap; font-size:14px; color:var(--c-ink-soft); margin-top:14px; padding-top:14px; border-top:1px solid var(--c-line); }
  .case-meta strong{ color:var(--c-bg-dark); font-weight:600; }
  .case .btn{ margin-top: 16px; padding: 10px 16px; font-size:14px; }
  @media (max-width: 760px){ .portfolio-grid{ grid-template-columns: 1fr; } }

  /* Pricing */
  .pricing{ background:var(--c-bg-soft); }
  .tabs{ display:inline-flex; background:#fff; border:1px solid var(--c-line); border-radius:999px; padding:4px; margin-top:18px; box-shadow:var(--shadow-sm); }
  .tabs button{ background:transparent; border:none; padding:10px 20px; border-radius:999px; color:var(--c-ink-soft); font-weight:600; font-size:14.5px; }
  .tabs button.active{ background:var(--c-bg-dark); color:#fff; }
  .tabs button:not(.active):hover{ color:var(--c-ink); }
  .tab-note{ margin-top:14px; max-width:60ch; font-size:15px; color:var(--c-ink-soft); }

  .price-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 36px; }
  .price{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); padding: clamp(24px, 2.6vw, 34px); display:flex; flex-direction:column; transition: transform .2s ease, box-shadow .2s ease; }
  .price:hover{ transform: translateY(-4px); box-shadow:var(--shadow); }
  .price.featured{ background:linear-gradient(180deg,#102E50,#0A1F36); border-color:transparent; color:#fff; position:relative; box-shadow:var(--shadow-lg); }
  .price.featured h3{ color:#fff; }
  .price.featured p{ color:#D6E2F1; }
  .price.featured li{ color:#E8EEF7; }
  .price.featured .price-amount{ color:#fff; }
  .price.featured .price-amount small{ color:#A9C2E0; }
  .featured-badge{ position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--c-gold); color:#1A1F2E; font-size:12px; font-weight:700; padding:6px 12px; border-radius:999px; letter-spacing:.04em; }
  .price h3{ font-size:22px; margin-bottom:.15em; }
  /* Kernzin-label per pakket, vat samen waar het pakket om draait */
  .pkg-essence{
    display:inline-block;
    font-family:var(--font-serif);
    font-style:italic;
    font-size:15px;
    color:var(--c-burgundy);
    margin:0 0 12px;
    padding-right: 40px;
  }
  .pkg-essence::before{ content:""; }
  .pkg-essence::after{ content:" "; }
  .price.featured .pkg-essence{ color:var(--c-gold); }
  .price-tagline{ font-size:14px; min-height: 46px; margin-bottom:18px; }
  .price-amount{ font-family:var(--font-serif); font-weight:700; font-size: clamp(40px, 4.5vw, 52px); color:var(--c-bg-dark); line-height:1; }
  .price-amount small{ display:block; font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--c-muted); margin-top:6px; letter-spacing:.04em; }
  .price-includes{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--c-muted); font-weight:700; margin: 22px 0 8px; }
  .price.featured .price-includes{ color:#A9C2E0; }
  .price ul{ list-style:none; padding:0; margin: 4px 0 26px; display:flex; flex-direction:column; gap:10px; }
  .price li{ display:flex; gap:10px; align-items:flex-start; font-size:15px; color:var(--c-ink-soft); }
  .price li svg{ width:18px; height:18px; color:var(--c-success); flex-shrink:0; margin-top:3px; }
  .price.featured li svg{ color:var(--c-gold); }
  .price-extra{ font-size:13.5px; color:var(--c-muted); padding:14px 0 0; border-top:1px solid var(--c-line); margin-top: 8px; margin-bottom: 20px; }
  .price.featured .price-extra{ border-top-color: rgba(255,255,255,.12); color:#A9C2E0; }
  .price-extra strong{ color:var(--c-bg-dark); display:block; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:4px; font-weight:700; }
  .price.featured .price-extra strong{ color:#fff; }
  .price .btn{ margin-top:auto; width:100%; }
  .price-foot{ font-size:13px; color:var(--c-muted); margin-top: 22px; text-align:center; }
  @media (max-width: 920px){ .price-grid{ grid-template-columns: 1fr; max-width:520px; margin-inline:auto; } }

  /* Differences explanation block */
  .diff{ margin-top: 44px; background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow:var(--shadow-sm); }
  .diff h3{ margin-top:0; }
  .diff-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:24px; margin-top: 20px; }
  .diff-item h4{ font-family:var(--font-sans); font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--c-bg-dark); margin: 0 0 12px; font-weight:700; }
  .diff-item p{ font-size:15px; margin:0; }
  .diff-item .pill{ display:inline-block; font-size:12px; padding:4px 12px; border-radius:999px; background:var(--c-bg-soft); color:var(--c-ink-soft); font-weight:600; margin-bottom:18px; letter-spacing:.04em; }
  @media (max-width: 760px){ .diff-grid{ grid-template-columns: 1fr; } }

  /* About */
  .about-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 60px); align-items:center; }
  .about-img{ aspect-ratio: 4 / 5; border-radius:var(--radius-lg); overflow:hidden; background:linear-gradient(135deg,#0F2C4A,#1E5BBA); position:relative; box-shadow:var(--shadow-lg); }
  .about-img svg{ width:100%; height:100%; }
  .stat-row{ display:flex; gap: clamp(20px, 3vw, 40px); margin-top: 28px; flex-wrap:wrap; }
  .stat strong{ font-family:var(--font-serif); font-size: clamp(28px, 3vw, 36px); color:var(--c-bg-dark); display:block; line-height:1; }
  .stat span{ font-size:14px; color:var(--c-muted); }
  @media (max-width: 880px){ .about-grid{ grid-template-columns: 1fr; } .about-img{ max-width:380px; } }

  /* FAQ */
  .faq{ background:#fff; }
  .faq-list{ max-width: 820px; margin: 44px auto 0; display:flex; flex-direction:column; gap:14px; }
  details.faq-item{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius); padding: 4px 22px; transition:border-color .2s ease, box-shadow .2s ease; }
  details.faq-item[open]{ border-color: var(--c-accent); box-shadow:var(--shadow-sm); }
  details.faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:16px; padding: 18px 0; font-weight:600; color:var(--c-bg-dark); font-size:17px; }
  details.faq-item summary::-webkit-details-marker{ display:none; }
  details.faq-item summary::after{ content:""; width:22px; height:22px; flex-shrink:0; background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F2C4A' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); transition: transform .2s ease; }
  details.faq-item[open] summary::after{ transform: rotate(180deg); }
  details.faq-item p{ margin: 0 0 18px; font-size:15.5px; }

  /* Contact */
  .contact{ background:linear-gradient(180deg,#F7F9FC,#fff); }
  .contact-grid{ display:grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items:start; margin-top: 44px; }
  .contact-info{ background:linear-gradient(180deg,#0F2C4A,#0A1F36); color:#fff; padding: clamp(28px, 3.5vw, 44px); border-radius:var(--radius-lg); box-shadow:var(--shadow-lg); }
  .contact-info h3{ color:#fff; }
  .contact-info p{ color:#D6E2F1; }
  .contact-list{ list-style:none; padding:0; margin: 22px 0 0; display:flex; flex-direction:column; gap:16px; }
  .contact-list li{ display:flex; gap:14px; align-items:center; color:#E8EEF7; font-size:15px; }
  .contact-list a{ color:#fff; }
  .contact-list .icon-tile{ background:rgba(255,255,255,.08); color:#fff; width:42px; height:42px; margin:0; }
  .calendly-box{ margin-top: 26px; padding: 18px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--radius); display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
  .calendly-box p{ margin:0; color:#D6E2F1; font-size:14px; flex:1; min-width:160px; }

  form.contact-form{ background:#fff; border:1px solid var(--c-line); border-radius:var(--radius-lg); padding: clamp(24px, 3vw, 36px); box-shadow:var(--shadow-sm); }
  .form-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  @media (max-width: 580px){ .form-row{ grid-template-columns: 1fr; } }
  .field{ display:flex; flex-direction:column; gap:6px; margin-bottom:16px; }
  .field label{ font-size:14px; font-weight:600; color:var(--c-bg-dark); }
  .field input, .field select, .field textarea{ font:inherit; padding:12px 14px; border-radius:10px; border:1px solid var(--c-line); background:#fff; color:var(--c-ink); transition:border-color .15s ease, box-shadow .15s ease; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:none; border-color:var(--c-accent); box-shadow:0 0 0 4px rgba(30,91,186,.12); }
  .field textarea{ resize:vertical; min-height:130px; }
  .form-foot{ font-size:13px; color:var(--c-muted); margin-top: 8px; }
  .form-success{ display:none; padding:14px 16px; background:#E8F6EE; color:#1F6B45; border:1px solid #BFE3CE; border-radius:10px; font-size:14.5px; margin-bottom:14px; }
  .form-success.show{ display:block; }
  @media (max-width: 880px){ .contact-grid{ grid-template-columns: 1fr; } }

  /* Footer */
  footer{ background:var(--c-bg-darker); color:#C8D2E1; padding-block: 56px 28px; }
  .foot-grid{ display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
  footer h4{ color:#fff; font-family:var(--font-sans); font-size:14px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; margin:0 0 14px; }
  footer p{ color:#9AAAC2; font-size:14px; margin:0; }
  footer ul{ list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:10px; }
  footer a{ color:#C8D2E1; font-size:14.5px; }
  footer a:hover{ color:#fff; }
  .foot-brand{ display:flex; align-items:center; gap:10px; font-family:var(--font-serif); font-weight:700; font-size:22px; color:#fff; margin-bottom:12px; }
  .foot-bottom{ margin-top: 40px; padding-top: 22px; border-top:1px solid rgba(255,255,255,.08); display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; color:#8B9BB5; font-size:13px; }
  @media (max-width: 880px){ .foot-grid{ grid-template-columns: 1fr 1fr; } }
  @media (max-width: 560px){ .foot-grid{ grid-template-columns: 1fr; } }

  .skip{ position:absolute; left:-9999px; top:-9999px; }
  .skip:focus{ left:12px; top:12px; background:#0F2C4A; color:#fff; padding:10px 14px; border-radius:8px; z-index:100; }

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

  /* ===== EDITORIAL UPGRADES ===== */
  :root{
    --c-cream: #F8F4EC;
    --c-cream-deep: #EDE6D6;
    --c-burgundy: #6F2929;
  }

  /* Section numerals, large, faint, editorial */
  .numeral{
    position:absolute;
    top: clamp(20px, 4vw, 56px);
    right: clamp(16px, 5vw, 60px);
    font-family: var(--font-serif);
    font-style: italic;
    font-weight: 400;
    font-size: clamp(80px, 14vw, 200px);
    line-height: 1;
    color: rgba(15,44,74,.045);
    pointer-events: none;
    z-index: 0;
    letter-spacing: -.02em;
  }
  section{ position:relative; }
  section > .container{ position:relative; z-index:1; }

  /* On dark sections, lighter numeral */
  .manifest .numeral{ color: rgba(255,255,255,.06); position:static; font-size: clamp(120px, 18vw, 260px); }

  /* Editorial eyebrow variant for dark backgrounds */
  .eyebrow-light{
    background: rgba(201,164,92,.18);
    color: var(--c-gold);
  }

  /* Italic emphasis in hero h1 */
  .hero h1 em{
    font-style: italic;
    color: var(--c-gold);
    font-weight: 400;
  }

  /* ===== HERO TWEAKS ===== */
  .hero-issue{
    display:inline-flex; align-items:center; gap:14px;
    margin-bottom:18px; font-family: var(--font-serif); font-style:italic;
    font-size: 14px; color: var(--c-muted); letter-spacing:.04em;
  }
  .hero-issue::before{
    content:""; display:inline-block; width:36px; height:1px; background: var(--c-bg-dark);
  }

  /* ===== AUDIENCE MARQUEE ===== */
  .audience{ overflow:hidden; padding-block:0; }
  .marquee{
    overflow:hidden;
    padding-block: 22px;
    background: var(--c-cream);
    border-block: 1px solid var(--c-cream-deep);
    position:relative;
  }
  .marquee::before, .marquee::after{
    content:""; position:absolute; top:0; bottom:0; width:80px; z-index:2; pointer-events:none;
  }
  .marquee::before{ left:0; background: linear-gradient(90deg, var(--c-cream), transparent); }
  .marquee::after{ right:0; background: linear-gradient(-90deg, var(--c-cream), transparent); }
  .marquee-track{
    display:flex; gap: 56px; width: max-content;
    animation: marquee 50s linear infinite;
    will-change: transform;
  }
  .marquee-item{
    display:inline-flex; align-items:center; gap:14px;
    font-family: var(--font-serif); font-style: italic; font-size: clamp(20px, 2.4vw, 28px);
    color: var(--c-bg-dark); white-space: nowrap;
  }
  .marquee-item::after{
    content: "✦"; color: var(--c-gold); font-style:normal; font-size: 16px; margin-left: 14px;
  }
  @keyframes marquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  @media (prefers-reduced-motion: reduce){
    .marquee-track{ animation: none; }
  }

  /* ===== MANIFEST SECTION ===== */
  .manifest{
    background: linear-gradient(180deg, #0A1F36 0%, #0F2C4A 100%);
    color: #E8EEF7;
    position: relative;
    overflow: hidden;
  }
  .manifest::before{
    content:""; position:absolute; inset:0;
    background: radial-gradient(800px 500px at 90% 30%, rgba(201,164,92,.10), transparent 60%),
                radial-gradient(600px 400px at 10% 90%, rgba(30,91,186,.16), transparent 60%);
    pointer-events:none;
  }
  .manifest-grid{
    display:grid; grid-template-columns: 200px 1fr; gap: clamp(28px, 5vw, 80px);
    align-items: start; position:relative; z-index:1;
  }
  .manifest-side{
    position: sticky; top: 100px;
    display:flex; flex-direction:column; gap:16px;
  }
  .manifest-side .numeral{ position: static; font-size: clamp(120px, 14vw, 180px); color: rgba(255,255,255,.07); }
  .pullquote{
    margin: 0 0 64px;
    font-family: var(--font-serif);
    font-size: clamp(26px, 3.6vw, 44px);
    line-height: 1.25;
    color: #fff;
    letter-spacing: -.01em;
  }
  .pullquote p{ margin: 0; color: #fff; }
  .pullquote em{ color: var(--c-gold); font-style: italic; }
  .pullquote footer{
    margin-top: 24px; font-family: var(--font-sans); font-size: 14px;
    font-style: normal; color: #A9C2E0; letter-spacing: .04em;
  }
  .manifest-tenets{
    display:grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px;
    padding-top: 36px; border-top: 1px solid rgba(255,255,255,.12);
  }
  .tenet h3{ color:#fff; font-size: 18px; margin: 14px 0 8px; }
  .tenet p{ color: #C8D2E1; font-size: 15px; margin: 0; line-height: 1.55; }
  .tenet-num{
    font-family: var(--font-serif); font-style: italic; font-size: 22px;
    color: var(--c-gold);
  }
  @media (max-width: 880px){
    .manifest-grid{ grid-template-columns: 1fr; }
    .manifest-side{ position: static; flex-direction: row; align-items: baseline; }
    .manifest-tenets{ grid-template-columns: 1fr; gap: 24px; }
  }

  /* ===== PRICING ENHANCEMENTS ===== */
  .price{ position:relative; }
  .price-num{
    position:absolute; top: 22px; right: 22px;
    font-family: var(--font-serif); font-style: italic;
    font-size: 28px; color: var(--c-line); font-weight: 400;
  }
  .price.featured .price-num{ color: rgba(255,255,255,.18); }
  .price h3{ padding-right: 40px; }
  .copy-upsell{
    margin: 0 0 16px;
    padding: 12px 14px;
    background: rgba(201,164,92,.10);
    border-left: 3px solid var(--c-gold);
    border-radius: 4px;
    font-size: 13.5px;
    color: var(--c-ink-soft);
  }
  .copy-upsell strong{ color: var(--c-bg-dark); font-family: var(--font-serif); font-size: 15px; }
  .price.featured .copy-upsell{
    background: rgba(201,164,92,.15);
    color: #E8EEF7;
  }
  .price.featured .copy-upsell strong{ color: var(--c-gold); }
  .price li em{ color: var(--c-bg-dark); font-style: italic; font-family: var(--font-serif); padding-inline: 2px; }
  .price.featured li em{ color: var(--c-gold); }

  /* ===== FAQ within contact ===== */
  .faq-block{
    margin-top: clamp(56px, 9vw, 100px);
    padding-top: clamp(40px, 6vw, 64px);
    border-top: 1px solid var(--c-line);
  }
  .faq-head{ max-width: 60ch; margin-bottom: 36px; }
  .faq-head h3{ font-size: clamp(24px, 2.8vw, 32px); margin: 8px 0 12px; }
  .faq-head p{ color: var(--c-ink-soft); font-size: 16px; margin: 0; }

  /* ===== AUDIENCE, colophon-style scatter ===== */
  .audience-leaf{
    background: var(--c-cream);
    border-block: 1px solid var(--c-cream-deep);
    padding-block: clamp(56px, 8vw, 90px);
    position: relative;
    overflow: hidden;
  }
  .audience-leaf::before, .audience-leaf::after{
    content: "";
    position: absolute;
    left: 0; right: 0;
    height: 1px;
    background: rgba(15,44,74,.06);
  }
  .audience-leaf::before{ top: 14px; }
  .audience-leaf::after{ bottom: 14px; }

  .leaf-header{
    display: flex; align-items: center; justify-content: center;
    gap: 18px; margin-bottom: 8px;
  }
  .leaf-rule{
    flex: 0 1 80px;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--c-bg-dark) 50%, transparent);
  }
  .leaf-label{
    font-size: 12px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--c-bg-dark);
    font-weight: 700;
    white-space: nowrap;
  }
  .leaf-orn{
    text-align: center;
    color: var(--c-gold);
    font-size: 18px;
    margin: 0 0 4px;
    line-height: 1;
  }
  .leaf-orn + * { margin-top: 6px; }

  .leaf-scatter{
    display: flex; flex-wrap: wrap;
    justify-content: center;
    gap: 14px 14px;
    max-width: 880px;
    margin: 24px auto 18px;
    padding-inline: 12px;
  }
  .badge{
    display: inline-flex; align-items: center;
    padding: 10px 20px;
    background: #fff;
    border: 1px solid var(--c-cream-deep);
    border-radius: 999px;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(15px, 1.3vw, 17px);
    color: var(--c-bg-dark);
    transform: rotate(var(--rot, 0deg));
    transition: transform .35s cubic-bezier(.34,1.3,.64,1), background .2s ease, color .2s ease, box-shadow .2s ease, border-color .2s ease;
    box-shadow: 0 1px 0 rgba(15,44,74,.04), 0 4px 10px -4px rgba(15,44,74,.08);
    cursor: default;
    white-space: nowrap;
  }
  .badge::before{
    content: "·";
    color: var(--c-gold);
    margin-right: 8px;
    font-style: normal;
    font-weight: 700;
    font-size: 18px;
    line-height: 0;
  }
  .badge:hover{
    transform: rotate(0deg) translateY(-2px);
    background: var(--c-bg-dark);
    color: #fff;
    border-color: var(--c-bg-dark);
    box-shadow: 0 12px 24px -10px rgba(15,44,74,.35);
  }
  .badge:hover::before{ color: var(--c-gold); }
  .audience-note{
    text-align: center;
    font-family: var(--font-serif);
    font-style: italic;
    font-size: clamp(14px, 1.2vw, 16px);
    color: var(--c-muted);
    max-width: 70ch;
    margin: 8px auto 0;
    padding: 0 20px;
  }
  @media (max-width: 540px){
    .leaf-rule{ flex-basis: 30px; }
    .badge{ padding: 8px 14px; font-size: 14px; }
  }

  /* ===== FORM alignment, labels min-height so inputs align in a row ===== */
  .form-row .field{
    display: flex; flex-direction: column;
  }
  .form-row .field > label{
    min-height: 2.6em;
    display: flex;
    align-items: flex-end;
    margin-bottom: 4px;
    line-height: 1.25;
  }
  @media (max-width: 580px){
    .form-row .field > label{ min-height: 0; }
  }

  /* ===== ABOUT, page-leaf paper aesthetic ===== */
  #over{ background: var(--c-cream); position: relative; }
  #over .numeral{ color: rgba(15,44,74,.06); }
  #over .container.about-grid{
    background: #fff;
    padding: clamp(36px, 5vw, 64px);
    border-radius: 4px;
    position: relative;
    box-shadow:
      0 1px 0 rgba(15,44,74,.04),
      0 18px 40px -20px rgba(15,44,74,.18),
      0 4px 10px -2px rgba(15,44,74,.04);
    /* subtle ruled-paper lines */
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent 39px,
      rgba(15,44,74,.025) 39px,
      rgba(15,44,74,.025) 40px
    );
  }
  /* Page-corner fold */
  #over .container.about-grid::after{
    content: "";
    position: absolute;
    top: 0; right: 0;
    width: 44px; height: 44px;
    background:
      linear-gradient(225deg, var(--c-cream) 50%, transparent 50%),
      linear-gradient(225deg, transparent 48%, rgba(15,44,74,.10) 50%, transparent 52%);
    background-size: 100% 100%, 100% 100%;
  }
  /* Drop cap on first paragraph */
  #over .about-grid > div:last-child > p:first-of-type::first-letter{
    font-family: var(--font-serif);
    float: left;
    font-size: 4.4em;
    line-height: .82;
    margin: .04em .12em -.05em 0;
    color: var(--c-bg-dark);
    font-weight: 700;
    font-style: italic;
  }
  /* Tone the about image background slightly */
  #over .about-img{
    box-shadow: 0 12px 28px -12px rgba(15,44,74,.25), 0 2px 6px rgba(15,44,74,.06);
  }
  /* Margin annotation */
  #over .about-grid > div:last-child::after{
    content: "Mariska, eigenaresse Het WebLoket";
    display: block;
    margin-top: 28px;
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-burgundy);
    font-size: 15px;
    text-align: right;
    letter-spacing: .02em;
  }

  /* ===== Round portrait (small, left of text) ===== */
  #over .about-grid{
    grid-template-columns: 200px 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
  }
  #over .about-img{
    aspect-ratio: 1 / 1;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    overflow: hidden;
    border: 6px solid #fff;
    box-shadow: 0 0 0 1px rgba(201,164,92,.4), 0 14px 30px -10px rgba(15,44,74,.3);
    background: linear-gradient(135deg,#1E3A5F,#3D6FA8);
    flex-shrink: 0;
    position: relative;
    max-width: 200px;
  }
  #over .about-img svg{ width: 100%; height: 100%; }
  @media (max-width: 720px){
    #over .about-grid{ grid-template-columns: 1fr; }
    #over .about-img{ width: 160px; height: 160px; margin: 0 auto; }
  }

  /* ===== WERKWIJZE, dark navy ===== */
  .process{
    background: linear-gradient(180deg, #0F2C4A 0%, #0A1F36 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
  }
  .process::before{
    content:""; position:absolute; inset:0;
    background:
      radial-gradient(900px 500px at 80% 10%, rgba(201,164,92,.10), transparent 60%),
      radial-gradient(700px 400px at 10% 90%, rgba(111,41,41,.12), transparent 60%);
    pointer-events:none;
  }
  .process .container{ position:relative; z-index:1; }
  .process .numeral{ color: rgba(255,255,255,.05); }
  .process .eyebrow{
    background: rgba(201,164,92,.15);
    color: var(--c-gold);
  }
  .process h2{ color: #fff; }
  .process p.lede{ color: #C8D2E1; }
  .process .step{
    background: linear-gradient(180deg, #FDF7EE 0%, #F5EBD8 100%);
    border: 1px solid rgba(201,164,92,.3);
    box-shadow: 0 6px 20px -6px rgba(0,0,0,.3);
  }
  .process .step::before{
    background: var(--c-gold);
    color: var(--c-bg-darker);
    font-style: italic;
  }
  .process .step h3{ color: var(--c-bg-dark); }
  .process .step p{ color: var(--c-ink-soft); }

  /* ===== Paper texture overlay (subtle grain) ===== */
  .audience-leaf, #over{ position: relative; }
  .audience-leaf::before, #over::after{
    content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 0 0.20 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .06; mix-blend-mode: multiply;
  }
  .audience-leaf > *, #over > *{ position: relative; z-index: 1; }

  /* ===== Section dividers (✦) ===== */
  .section-divider{
    background: #fff;
    padding-block: clamp(28px, 4vw, 48px);
    display: flex; align-items: center; justify-content: center;
    gap: 22px;
  }
  .section-divider.on-cream{ background: var(--c-cream); }
  .section-divider .div-rule{
    flex: 0 1 140px; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(15,44,74,.25) 50%, transparent);
  }
  .section-divider .div-orn{
    color: var(--c-gold); font-size: 22px; line-height: 1;
    font-family: var(--font-serif);
    letter-spacing: .4em;
  }

  /* ===== Margin notes, handwritten-ish italic burgundy ===== */
  .margin-note{
    font-family: var(--font-serif);
    font-style: italic;
    color: var(--c-burgundy);
    font-size: 14.5px;
    line-height: 1.45;
    letter-spacing: .01em;
    display: inline-flex; align-items: flex-start; gap: 8px;
    margin: 14px 0 0;
  }
  .margin-note::before{
    content: "↳";
    color: var(--c-burgundy);
    font-style: normal;
    font-size: 16px;
    line-height: 1.2;
    flex-shrink: 0;
  }

  /* ===== Burgundy accent on featured badge ===== */
  .pricing .featured-badge{
    background: var(--c-burgundy);
    color: #fff;
  }
  /* Burgundy on audience label */
  .audience-leaf .leaf-label{ color: var(--c-burgundy); }

  /* ===== Reduce About section top spacing (was too much room) ===== */
  #over{ padding-block: clamp(28px, 5vw, 64px); }

  /* ===== CONTACT, beige/cream (page-leaf stijl, net als Over) ===== */
  .contact{
    background: var(--c-cream);
    color: var(--c-ink);
    position: relative;
    overflow: hidden;
  }
  /* Subtle paper texture (matches Over) */
  .contact::after{
    content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.38 0 0 0 0 0.30 0 0 0 0 0.20 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    opacity: .06; mix-blend-mode: multiply;
  }
  .contact > .container{ position: relative; z-index: 1; }
  .contact .numeral{ color: rgba(15,44,74,.045); }
  /* Contact-info card stays its original dark navy, strong contrast on cream */
  /* (No override needed; the base styles already do this.) */

  /* Labels on dark contact-info card */
  .contact .contact-label-small{ color: #A9C2E0; font-size: 13px; letter-spacing: .02em; }
  .contact .contact-label-val{ color: #fff; }

  /* ===== FAQ block as a witte kaart binnen de cream contact-sectie ===== */
  .contact .faq-block{
    background: #fff;
    border-radius: var(--radius-lg);
    padding: clamp(28px, 4vw, 48px);
    margin-top: clamp(40px, 6vw, 70px);
    border: 1px solid var(--c-line);
    box-shadow: 0 10px 30px -12px rgba(15,44,74,.12);
    padding-top: clamp(28px, 4vw, 48px);
  }
  .contact .faq-head h3{ color: var(--c-bg-dark); }
  .contact .faq-head p{ color: var(--c-ink-soft); }
  .contact .faq-head .eyebrow.eyebrow-light{
    background: rgba(30,91,186,.08); color: var(--c-accent-ink);
  }
  /* FAQ items: subtle border so they're distinct on white card */
  .contact .faq-item{ background: #fff; border-color: var(--c-line); }

  /* ===== BUILDER (Quiz + Configurator) ===== */
  .builder{
    background: linear-gradient(180deg, #fff 0%, var(--c-bg-soft) 100%);
    position: relative;
  }
  .builder h2 em{ color: var(--c-burgundy); font-style: italic; font-weight: 400; }
  .builder-widget{
    margin-top: 44px; background: #fff;
    border-radius: var(--radius-lg); border: 1px solid var(--c-line);
    box-shadow: 0 20px 50px -20px rgba(15,44,74,.15), 0 4px 12px rgba(15,44,74,.06);
    overflow: hidden;
  }
  .builder-steps{
    display: flex; align-items: center;
    background: var(--c-bg-dark); color: rgba(255,255,255,.5);
    padding: 16px clamp(20px, 3vw, 36px); gap: clamp(14px, 3vw, 32px);
    font-size: 13.5px; font-weight: 500; letter-spacing: .02em;
    overflow-x: auto;
  }
  .builder-step{ display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; transition: color .25s; }
  .builder-step .bs-num{
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px; border-radius: 50%;
    background: rgba(255,255,255,.1); font-family: var(--font-serif);
    font-style: italic; font-size: 14px; flex-shrink: 0;
  }
  .builder-step.active{ color: #fff; }
  .builder-step.active .bs-num{ background: var(--c-gold); color: var(--c-bg-darker); }
  .builder-step.done{ color: rgba(255,255,255,.75); }
  .builder-step.done .bs-num{ background: rgba(201,164,92,.3); color: var(--c-gold); }
  .builder-pane{ display: none; padding: clamp(28px, 4vw, 48px); }
  .builder-pane.active{ display: block; }

  /* Step 1, Quiz */
  .quiz-q{ margin-bottom: 32px; }
  .quiz-q h3{ font-size: 19px; margin: 0 0 14px; color: var(--c-bg-dark); }
  .quiz-opts{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
  @media (max-width: 720px){ .quiz-opts{ grid-template-columns: 1fr; } }
  .quiz-opt{
    background: var(--c-bg-soft); color: var(--c-ink);
    border: 1.5px solid var(--c-line); border-radius: 12px;
    padding: 16px 18px; text-align: left;
    font: inherit; font-size: 14.5px; line-height: 1.4; cursor: pointer;
    transition: all .2s ease; font-family: var(--font-sans);
  }
  .quiz-opt:hover{
    border-color: var(--c-bg-dark); background: #fff;
    transform: translateY(-1px); box-shadow: 0 4px 12px -4px rgba(15,44,74,.15);
  }
  .quiz-opt.selected{
    border-color: var(--c-burgundy); background: rgba(111,41,41,.04);
    color: var(--c-bg-dark); box-shadow: 0 0 0 3px rgba(111,41,41,.08);
  }
  .quiz-opt.selected::before{ content: "✓ "; color: var(--c-burgundy); margin-right: 4px; font-weight: 700; }

  .builder-nav{
    display: flex; justify-content: space-between; align-items: center;
    margin-top: 32px; padding-top: 24px; border-top: 1px solid var(--c-line);
    gap: 16px; flex-wrap: wrap;
  }
  .builder-nav .btn:disabled{ opacity: .35; cursor: not-allowed; transform: none; }
  .builder-progress{ flex: 1; height: 4px; background: var(--c-line); border-radius: 999px; overflow: hidden; max-width: 200px; }
  .bp-fill{ display: block; height: 100%; width: 0%; background: var(--c-burgundy); transition: width .35s ease; }

  /* Step 2, Configurator */
  .reco-banner{
    background: linear-gradient(180deg, #FDF7EE, #F5EBD8);
    border-left: 4px solid var(--c-gold);
    padding: 22px 24px; border-radius: 10px; margin-bottom: 32px;
  }
  .reco-eyebrow{
    display: inline-block; font-size: 11px; letter-spacing: .14em;
    text-transform: uppercase; color: var(--c-burgundy); font-weight: 700; margin-bottom: 6px;
  }
  .reco-banner h3{ font-size: 22px; margin: 4px 0 8px; color: var(--c-bg-dark); }
  .reco-banner h3 em{ color: var(--c-burgundy); font-style: italic; }
  .reco-banner p{ margin: 0; color: var(--c-ink-soft); font-size: 15px; }
  .config-block{ border: none; margin: 0 0 24px; padding: 0; }
  .config-block legend{
    font-family: var(--font-serif); font-size: 18px; color: var(--c-bg-dark);
    font-weight: 700; margin-bottom: 14px; padding: 0;
  }
  .config-options{ display: grid; gap: 12px; }
  .config-radios{ grid-template-columns: repeat(3, 1fr); }
  .config-radios.two-col{ grid-template-columns: repeat(2, 1fr); }
  @media (max-width: 720px){ .config-radios, .config-radios.two-col{ grid-template-columns: 1fr; } }
  .config-card{
    display: block; position: relative;
    background: #fff; border: 1.5px solid var(--c-line); border-radius: 12px;
    padding: 16px 18px; cursor: pointer; transition: all .2s ease;
  }
  .config-card input{ position: absolute; opacity: 0; pointer-events: none; }
  .config-card:hover{ border-color: var(--c-bg-dark); transform: translateY(-1px); }
  .config-card:has(input:checked){
    border-color: var(--c-burgundy); background: rgba(111,41,41,.03);
    box-shadow: 0 0 0 3px rgba(111,41,41,.08);
  }
  .config-card-body{ display: flex; flex-direction: column; gap: 4px; }
  .config-card-body strong{ font-family: var(--font-serif); font-size: 17px; color: var(--c-bg-dark); }
  .config-card-body .config-price{ font-family: var(--font-serif); font-style: italic; color: var(--c-gold); font-size: 16px; }
  .config-card-body .config-meta{ color: var(--c-muted); font-size: 13px; line-height: 1.4; }
  .config-checks{ display: flex; flex-direction: column; gap: 10px; }
  .config-check{
    display: flex; align-items: center; gap: 14px;
    background: var(--c-bg-soft); border: 1.5px solid var(--c-line);
    border-radius: 10px; padding: 14px 18px; cursor: pointer; transition: all .2s ease;
  }
  .config-check:hover{ border-color: var(--c-bg-dark); }
  .config-check:has(input:checked){ border-color: var(--c-burgundy); background: rgba(111,41,41,.04); }
  .config-check input{ width: 18px; height: 18px; accent-color: var(--c-burgundy); flex-shrink: 0; }
  .config-check span:first-of-type{ flex: 1; }
  .config-check span:first-of-type strong{ display: block; color: var(--c-bg-dark); font-family: var(--font-serif); font-size: 15px; }
  .config-check span:first-of-type small{ color: var(--c-muted); font-size: 13px; }
  .config-check .extra-price{ font-family: var(--font-serif); font-style: italic; color: var(--c-gold); font-size: 16px; }
  .config-total{
    display: flex; align-items: center; justify-content: space-between;
    background: var(--c-bg-dark); color: #fff;
    padding: 22px 26px; border-radius: 12px; margin-top: 28px;
  }
  .config-total .total-label{ font-family: var(--font-serif); font-size: 18px; font-weight: 700; }
  .config-total small{ display: block; color: rgba(255,255,255,.6); font-size: 12px; margin-top: 2px; }
  .config-total .total-price{ font-family: var(--font-serif); font-size: clamp(28px, 3vw, 38px); color: var(--c-gold); line-height: 1; }

  /* ===== Generieke pagina (Privacyverklaring e.d.) ===== */
  .doc-hero{ background: var(--c-bg-soft); padding-block: clamp(40px, 7vw, 72px); }
  .doc-hero .eyebrow{ color: var(--c-burgundy); background: rgba(111,41,41,.08); }
  .doc-hero h1{ font-size: clamp(30px, 4.5vw, 46px); margin: 0; }
  .prose-page{ padding-block: clamp(40px, 6vw, 64px); }
  .prose-page .container{ max-width: 760px; }
  .prose-page h2{ font-family: var(--font-serif); font-size: 22px; color: var(--c-bg-dark); margin: 2em 0 .5em; }
  .prose-page h2:first-child{ margin-top: 0; }
  .prose-page p{ margin: 0 0 1em; color: var(--c-ink-soft); }
  .prose-page ul, .prose-page ol{ margin: 0 0 1.2em; padding-left: 22px; color: var(--c-ink-soft); }
  .prose-page li{ margin-bottom: 6px; }
  .prose-page strong{ color: var(--c-bg-dark); }
  .prose-page a{ color: var(--c-accent); }

  /* Step 3, Sent */
  .builder-sent{ text-align: center; padding: 20px 0; }
  .builder-sent .check-svg{ width: 60px; height: 60px; color: var(--c-success); margin-bottom: 18px; }
  .builder-sent h3{ font-size: 24px; margin: 0 0 10px; color: var(--c-bg-dark); }
  .builder-sent p{ max-width: 50ch; margin: 0 auto 24px; }

  /* ===== 2-KOLOMS: Verschil (links) + Builder (rechts) ===== */
  .bc-grid{
    display: grid;
    grid-template-columns: 0.92fr 1.08fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: start;
  }
  @media (max-width: 980px){
    .bc-grid{ grid-template-columns: 1fr; }
  }
  .bc-diff h2{ font-size: clamp(23px, 2.6vw, 30px); }
  .bc-diff .lede{ font-size: 16px; }
  .diff-stack{ display: flex; flex-direction: column; gap: 16px; margin-top: 28px; }
  .diff-stack .diff-item{
    background: #fff; border: 1px solid var(--c-line);
    border-radius: var(--radius); padding: 20px 22px;
    box-shadow: 0 4px 12px -6px rgba(15,44,74,.08);
  }
  .bc-builder .builder-widget{ margin-top: 24px; }

  /* Compacte builder in de rechterkolom */
  .bc-builder .builder-pane{ padding: clamp(20px, 2.5vw, 26px); }
  .bc-builder .quiz-opts{ grid-template-columns: 1fr; gap: 9px; }
  .bc-builder .quiz-q{ margin-bottom: 22px; }
  .bc-builder .quiz-q h3{ font-size: 16px; margin-bottom: 11px; }
  .bc-builder .quiz-q h3 small{ font-weight: 400; font-size: 13px; color: var(--c-muted); }
  .bc-builder .quiz-opt{ padding: 12px 15px; font-size: 13.5px; }
  .bc-builder .config-radios,
  .bc-builder .config-radios.two-col{ grid-template-columns: 1fr; }
  .bc-builder .config-card{ padding: 13px 15px; }
  .bc-builder .config-card-body{ flex-direction: row; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
  .bc-builder .config-card-body strong{ font-size: 16px; }
  .bc-builder .config-card-body .config-meta{ flex-basis: 100%; }
  .bc-builder .config-block{ margin-bottom: 20px; }
  .bc-builder .config-block legend{ font-size: 16px; margin-bottom: 11px; }
  .bc-builder .reco-banner{ padding: 16px 18px; margin-bottom: 24px; }
  .bc-builder .reco-banner h3{ font-size: 18px; }
  .bc-builder .reco-banner p{ font-size: 14px; }
  .bc-builder .config-total{ padding: 16px 20px; margin-top: 22px; }
  .bc-builder .config-total .total-price{ font-size: clamp(24px, 3vw, 32px); }
  .bc-builder .builder-steps{ padding: 13px 20px; font-size: 12.5px; gap: 14px; }
  .bc-builder .builder-nav{ margin-top: 24px; padding-top: 20px; }

/* ===== Floating WhatsApp button (verschijnt op elke pagina via footer.php) ===== */
.wa-fab{
  position:fixed; right:22px; bottom:22px; z-index:120;
  width:58px; height:58px; border-radius:50%;
  background:#25D366; color:#fff;
  display:inline-flex; align-items:center; justify-content:center;
  box-shadow:0 8px 22px rgba(37,211,102,.45), 0 2px 6px rgba(0,0,0,.18);
  text-decoration:none;
  transition:transform .2s ease, box-shadow .2s ease;
}
.wa-fab:hover{
  transform:translateY(-2px) scale(1.04);
  box-shadow:0 12px 26px rgba(37,211,102,.55), 0 3px 8px rgba(0,0,0,.22);
  color:#fff;
}
.wa-fab:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.wa-fab-icon{ width:30px; height:30px; }
.wa-fab-tip{
  position:absolute; right:calc(100% + 12px); top:50%; transform:translateY(-50%);
  background:#0F2C4A; color:#fff; padding:8px 12px; border-radius:8px;
  font-family:var(--font-sans, sans-serif); font-size:13px; font-weight:500;
  white-space:nowrap; opacity:0; pointer-events:none;
  transition:opacity .18s ease;
}
.wa-fab:hover .wa-fab-tip, .wa-fab:focus-visible .wa-fab-tip{ opacity:1; }
@media (max-width: 540px){
  .wa-fab{ width:52px; height:52px; right:16px; bottom:16px; }
  .wa-fab-icon{ width:27px; height:27px; }
  .wa-fab-tip{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wa-fab{ transition:none; }
  .wa-fab:hover{ transform:none; }
}

/* ============= MOBILE FIXES ============= */

/* 1. Lang-switch: one switcher in the nav bar, also visible on mobile,
      with a slightly larger tap target. */
@media (max-width: 980px){
  .nav-cta .lang-switch{ padding: 4px; font-size: 14px; }
  .nav-cta .lang-switch button{ padding: 8px 14px; min-height: 36px; }
}

/* 2. Hide the "Bijvoorbeeld voor" branche-strip on mobile. */
@media (max-width: 720px){
  .audience-leaf{ display:none; }
}

/* 3. About section ("Over Het WebLoket") on mobile: drop the white
      page-leaf card, but keep the container's horizontal padding so
      the photo + text line up with the portfolio section below. */
@media (max-width: 720px){
  #over .container.about-grid{
    background: transparent;
    background-image: none;
    box-shadow: none;
    border-radius: 0;
    padding-block: 0;
    padding-inline: clamp(16px, 4vw, 28px);
  }
  #over .container.about-grid::after{ display: none; }
}

/* 4. Builder section ("Stel je website samen") on mobile:
      dark-navy section background. Eyebrow + title + intro turn light.
      The widget keeps its desktop white-card styling and sits inside
      the container with normal padding on the sides (no edge-to-edge),
      so it lines up with the package cards above. */
@media (max-width: 720px){
  .builder{
    background: linear-gradient(180deg, #0F2C4A 0%, #0A1F36 100%);
  }
  .builder .eyebrow{
    background: rgba(255,255,255,.12);
    color: #fff;
  }
  .builder h2{ color: #fff; }
  .builder h2 em{ color: var(--c-gold); }
  .builder .lede{ color: rgba(255,255,255,.85); }
  .builder .numeral{ color: rgba(255,255,255,.06); }
}

/* 5. Contact section on mobile: cream (beige) background.
      "Direct contact" stays a dark-navy card (its desktop styling),
      sitting inside the container so it has normal horizontal padding.
      The contact form is flat (no card) and its content aligns with
      the FAQ below. */
@media (max-width: 720px){
  .contact{ background: var(--c-cream); }
  .contact-grid{ gap: 22px; }
  .contact-form{
    background: transparent;
    border: none;
    box-shadow: none;
    padding-inline: 0;
    padding-block: 0;
  }
}

/* 6. Builder quiz: 3 questions clearly distinct on mobile. */
@media (max-width: 720px){
  .quiz-q{
    margin-bottom: 28px;
    padding-bottom: 24px;
    border-bottom: 1px dashed var(--c-line);
  }
  .quiz-q:last-of-type{ border-bottom: none; padding-bottom: 0; margin-bottom: 0; }
  .quiz-q h3{
    font-size: 17px;
    color: var(--c-bg-dark);
    padding: 10px 14px;
    background: var(--c-bg-soft);
    border-left: 3px solid var(--c-burgundy);
    border-radius: 6px;
    margin-bottom: 14px;
  }
  .quiz-q h3 small{
    display: block; font-weight: 400; font-size: 12.5px;
    margin-top: 2px; color: var(--c-muted);
  }
}

/* 7. Defensive horizontal-fit rules for mobile.
      Prevents any rogue element (long word, wide image, etc.) from pushing
      the page wider than the viewport, which makes cards look misaligned. */
@media (max-width: 720px){
  body{ overflow-x: hidden; }
  .contact-grid > *{ min-width: 0; }
  .contact-info,
  .contact-form,
  .builder-widget{ max-width: 100%; }
}

/* 8. Builder-steps bar on mobile: distribute the 3 steps evenly so the
      last label ("Verstuur") doesn't get cut off, and shrink the typography
      and padding to fit small screens. */
@media (max-width: 720px){
  .builder-steps{
    padding: 14px 12px;
    gap: 6px;
    font-size: 11.5px;
    justify-content: space-between;
    overflow-x: hidden;  /* no horizontal scroll on the bar itself */
  }
  .builder-step{
    flex: 1 1 0;
    justify-content: center;
    min-width: 0;
    gap: 7px;
  }
  .builder-step .bs-num{
    width: 20px; height: 20px;
    font-size: 12px;
    flex-shrink: 0;
  }
}

/* ===== Contactformulier: honeypot + foutmelding ===== */
.hwl-hp{
  position: absolute !important;
  left: -9999px !important;
  top: -9999px !important;
  width: 1px; height: 1px;
  overflow: hidden;
  visibility: hidden;
}
.form-error{
  display: none;
  padding: 14px 16px;
  background: #FDECEE;
  color: #A1283F;
  border: 1px solid #F4C5CD;
  border-radius: 10px;
  font-size: 14.5px;
  margin-bottom: 14px;
}
.form-error.show{ display: block; }
/* English override for the about-section signoff (CSS pseudo-element content) */
html[lang="en"] #over .about-grid > div:last-child::after{
  content: "Mariska, owner of Het WebLoket";
}

/* "Back to website" link in the header on non-front-page (privacy, landings) */
.nav-back{
  font-weight: 500; color: var(--c-bg-dark);
  padding: 8px 4px; border-radius: 8px;
}
.nav-back:hover{ background: var(--c-bg-soft); text-decoration: none; }