:root {
    --ink:        #201c17;
    --anthra:     #1f2732;   /* logo antraciet-blauw */
    --anthra-2:   #29323f;
    --steel:      #5f6773;
    --steel-2:    #8791a0;
    --line:       #d7dde4;
    --line-2:     #e2e8ef;
    --paper:      #ffffff;
    --grey:       #eef1f5;
    --grey-2:     #e3e7ec;

    --brand:      #245f9e;   /* logo blauw */
    --brand-600:  #1d4f84;
    --brand-700:  #163d66;
    --brand-tint: #e7eef7;

    --ok:         #3a7a4e;
    --star:       #d9a53a;

    --bg: var(--paper);
    --text: var(--ink);
    --muted: #6b7280;
    --surface: var(--paper);
    --panel: var(--grey);
    --border: var(--line);
    --header: #ffffff;

    --sans: system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    --wrap: 1180px;
  }
  @media (prefers-color-scheme: dark) {
    :root {
      --bg: #17140f; --text: #efeada; --muted:#aaa290;
      --surface: #201c15; --panel: #201c15; --border: #342d22; --header: #1b1710;
      --grey: #201c15; --grey-2: #2a251b; --line: #342d22; --line-2: #2a251b;
      --brand: #245f9e; --brand-600: #1d4f84; --brand-700: #163d66; --brand-tint: #182330;
      --ink: #efeada;
    }
  }
  :root[data-theme="light"] {
    --bg:#fff; --text:#201c17; --muted:#6b7280; --surface:#fff; --panel:#eef1f5; --border:#d7dde4; --header:#fff;
    --grey:#eef1f5; --grey-2:#e3e7ec; --line:#d7dde4; --line-2:#e2e8ef;
    --brand:#245f9e; --brand-600:#1d4f84; --brand-700:#163d66; --brand-tint:#e7eef7;
  }
  :root[data-theme="dark"] {
    --bg:#17140f; --text:#efeada; --muted:#aaa290; --surface:#201c15; --panel:#201c15; --border:#342d22; --header:#1b1710;
    --grey:#201c15; --grey-2:#2a251b; --line:#342d22; --line-2:#2a251b;
    --brand:#245f9e; --brand-600:#1d4f84; --brand-700:#163d66; --brand-tint:#182330;
  }

  * { box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } }
  body { margin:0; background:var(--bg); color:var(--text); font-family:var(--sans); font-size:16.5px; line-height:1.6; -webkit-font-smoothing:antialiased; }
  h1,h2,h3,h4 { line-height:1.1; margin:0; font-weight:800; letter-spacing:-.015em; }
  h1 { font-size: clamp(2.1rem, 5vw, 3.35rem); }
  h2 { font-size: clamp(1.65rem, 3.4vw, 2.35rem); }
  h3 { font-size: 1.2rem; font-weight:800; }
  p { margin:0 0 1rem; }
  a { color: var(--brand); }
  img,svg { max-width:100%; }
  .wrap { max-width:var(--wrap); margin:0 auto; padding:0 22px; }
  .kicker { display:inline-block; font-family:var(--mono); font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--brand); margin-bottom:.7rem; }
  .lead { font-size:1.12rem; color:var(--muted); }
  .muted { color:var(--muted); }
  .center { text-align:center; }

  /* buttons */
  .btn { display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; font:inherit; font-weight:700; font-size:.97rem;
    padding:.82rem 1.4rem; border:2px solid transparent; border-radius:2px; text-decoration:none; transition:background .15s,border-color .15s,color .15s,transform .04s; }
  .btn:active { transform:translateY(1px); }
  .btn-brand { background:var(--brand); color:#fff; }
  .btn-brand:hover { background:var(--brand-600); }
  .btn-dark { background:var(--anthra); color:#fff; }
  .btn-dark:hover { background:#000; }
  .btn-out { background:transparent; color:var(--text); border-color:var(--border); }
  .btn-out:hover { border-color:var(--brand); color:var(--brand); }
  .btn-white { background:#fff; color:var(--anthra); }
  .btn-white:hover { background:var(--grey-2); }
  .btn-lg { padding:1rem 1.7rem; font-size:1.02rem; }

  /* ---------- Top utility bar ---------- */
  .topbar { background:var(--anthra); color:#d6cfc3; font-size:.82rem; }
  .topbar .wrap { display:flex; align-items:center; gap:20px; height:40px; }
  .topbar a { color:#ece7dd; text-decoration:none; display:inline-flex; align-items:center; gap:.4rem; }
  .topbar a:hover { color:#fff; }
  .topbar .sep { color:#574f45; }
  .topbar .right { margin-left:auto; display:flex; align-items:center; gap:16px; }
  .topbar .rating b { color:#fff; }
  .topbar .star { color:var(--star); }
  @media (max-width:760px){ .topbar .hide-sm{ display:none; } .topbar .wrap{ gap:14px; } }

  /* ---------- Header ---------- */
  header.site { position:sticky; top:0; z-index:60; background:var(--header); border-bottom:1px solid var(--border); }
  .nav { display:flex; align-items:center; gap:26px; height:76px; }
  .logo { flex-shrink:0; display:flex; align-items:center; text-decoration:none; margin-right:auto; }
  .brandmark { height:58px; width:auto; display:block; }
  @media (max-width:1000px){ .brandmark{ height:46px; } }
  nav.menu { display:flex; gap:2px; }
  nav.menu a { white-space:nowrap; color:var(--text); text-decoration:none; font-weight:600; font-size:.95rem; padding:.55rem .7rem; border-radius:2px; }
  nav.menu a:hover { color:var(--brand); }
  nav.menu a.active { color:var(--brand); }
  nav.menu a.active::after{ content:""; display:block; height:2px; background:var(--brand); margin-top:5px; }
  .nav-right { display:flex; align-items:center; gap:12px; }
  .nav-phone { display:flex; align-items:center; gap:.5rem; text-decoration:none; color:var(--text); font-weight:800; font-size:1.02rem; white-space:nowrap; }
  .nav-phone svg { color:var(--brand); }
  .nav-phone small { display:block; font-size:.62rem; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .burger { display:none; background:none; border:1px solid var(--border); border-radius:2px; padding:.5rem .55rem; color:var(--text); cursor:pointer; }
  .ttoggle { background:none; border:1px solid var(--border); border-radius:2px; width:40px; height:40px; display:grid; place-items:center; color:var(--text); cursor:pointer; }
  .ttoggle:hover{ border-color:var(--brand); color:var(--brand); }

  @media (max-width:1180px){
    .nav-phone small{ display:none; }
    nav.menu { position:absolute; top:76px; left:0; right:0; flex-direction:column; background:var(--surface); border-bottom:1px solid var(--border); padding:8px 22px 16px; display:none; }
    nav.menu.open{ display:flex; }
    nav.menu a{ padding:.85rem .2rem; border-bottom:1px solid var(--line-2); }
    nav.menu a.active::after{ display:none; }
    .burger{ display:inline-flex; }
    .hide-md{ display:none; }
  }

  /* ---------- Pages ---------- */
  
  
  .band { padding:78px 0; }
  .band.sm { padding:52px 0; }
  .s-grey { background:var(--grey); }
  .s-dark { background:var(--anthra); color:#e9e3d7; }
  .s-dark h2,.s-dark h3 { color:#fff; }
  .s-dark .muted { color:#b3ab99; }
  .s-brand { background:var(--brand); color:#fff; }
  .s-brand h2 { color:#fff; }

  .head { max-width:64ch; margin-bottom:36px; }
  .head.center { margin-inline:auto; text-align:center; }

  /* ---------- Photo slots (branded placeholders for real photos) ---------- */
  .shot { position:relative; overflow:hidden; border-radius:3px; background:
      linear-gradient(135deg, var(--anthra) 0%, #3d362d 55%, rgba(82,74,62,.5) 100%); }
  .shot::before { content:""; position:absolute; inset:0;
      background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.045) 0 2px, transparent 2px 16px);
      opacity:.7; }
  .shot .rl { position:absolute; inset:0; opacity:.42; }
  .shot .tag { position:absolute; left:12px; bottom:11px; z-index:2; font-family:var(--mono); font-size:.64rem; letter-spacing:.1em; text-transform:uppercase;
      color:#e6ded0; background:rgba(0,0,0,.4); padding:.3rem .5rem; border-radius:2px; display:inline-flex; align-items:center; gap:.4rem; }
  .shot .tag svg{ opacity:.85; }
  .shot img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }

  /* ---------- Hero ---------- */
  .hero { background:var(--anthra); color:#fff; position:relative; overflow:hidden; border-bottom:4px solid var(--brand); }
  .hero .rl { position:absolute; inset:0; opacity:.5; pointer-events:none; }
  .hero .wrap { position:relative; z-index:2; display:grid; grid-template-columns:1.08fr .92fr; gap:48px; align-items:center; padding:78px 0 82px; }
  .hero h1 { color:#fff; }
  .hero p.sub { color:#cdc5b6; font-size:1.16rem; max-width:48ch; margin-top:1rem; }
  .hero .checks { list-style:none; padding:0; margin:1.5rem 0 0; display:flex; flex-wrap:wrap; gap:.7rem 1.6rem; }
  .hero .checks li { display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:.96rem; color:#eae4d8; }
  .hero .checks svg { color:var(--brand); flex:0 0 auto; }
  .hero .cta { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.9rem; }
  .hero .cta .btn-out { color:#fff; border-color:rgba(255,255,255,.32); }
  .hero .cta .btn-out:hover { border-color:#fff; color:#fff; }
  .hero-shot { min-height:340px; height:100%; border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 60px -28px rgba(0,0,0,.7); }
  @media (max-width:940px){ .hero .wrap{ grid-template-columns:1fr; gap:30px; padding:52px 0 56px; } .hero-shot{ min-height:220px; } }

  /* ---------- USP bar ---------- */
  .uspbar { background:var(--brand); color:#fff; }
  .uspbar .wrap { display:grid; grid-template-columns:repeat(4,1fr); }
  .uspbar .u { display:flex; align-items:center; gap:.7rem; padding:20px 18px; font-weight:700; font-size:.96rem; border-left:1px solid rgba(255,255,255,.2); }
  .uspbar .u:first-child{ border-left:none; }
  .uspbar .u svg{ flex:0 0 auto; }
  @media (max-width:820px){ .uspbar .wrap{ grid-template-columns:1fr 1fr; } .uspbar .u:nth-child(3){ border-left:none; } }
  @media (max-width:460px){ .uspbar .wrap{ grid-template-columns:1fr; } .uspbar .u{ border-left:none; border-top:1px solid rgba(255,255,255,.2); } .uspbar .u:first-child{ border-top:none; } }

  /* ---------- Split ---------- */
  .split { display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center; }
  @media (max-width:860px){ .split{ grid-template-columns:1fr; gap:30px; } }
  .split .shot { min-height:360px; }

  .keur { display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px; }
  .keur .k { display:flex; align-items:center; gap:.55rem; color:var(--muted); font-weight:700; font-size:.9rem; }
  .keur .k svg{ color:var(--steel); }

  /* ---------- Services tiles ---------- */
  .tiles { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
  @media (max-width:860px){ .tiles{ grid-template-columns:1fr 1fr; } }
  @media (max-width:560px){ .tiles{ grid-template-columns:1fr; } }
  .tile { display:block; text-decoration:none; color:inherit; border:1px solid var(--border); border-radius:4px; overflow:hidden; background:var(--surface); transition:box-shadow .15s, transform .1s, border-color .15s; }
  .tile:hover { box-shadow:0 16px 34px -20px rgba(0,0,0,.4); border-color:var(--steel-2); }
  .tile .pic { position:relative; aspect-ratio:16/10; }
  .tile .pic .num { position:absolute; top:12px; left:12px; z-index:2; background:var(--brand); color:#fff; font-family:var(--mono); font-weight:700; font-size:.72rem; padding:.25rem .5rem; border-radius:2px; }
  .tile .in { padding:20px 22px 24px; }
  .tile h3 { margin-bottom:.4rem; }
  .tile p { font-size:.93rem; color:var(--muted); margin:0 0 .8rem; }
  .tile .go { font-weight:800; font-size:.9rem; color:var(--brand); display:inline-flex; align-items:center; gap:.35rem; }
  button.tile { font:inherit; margin:0; padding:0; width:100%; cursor:pointer; appearance:none; -webkit-appearance:none; }

  /* ---------- Lightbox ---------- */
  .lightbox { position:fixed; inset:0; z-index:200; background:rgba(10,8,6,.94); display:none; align-items:center; justify-content:center; padding:60px 90px; }
  .lightbox.open { display:flex; }
  .lb-img { max-width:100%; max-height:100%; object-fit:contain; border-radius:4px; box-shadow:0 30px 80px -20px rgba(0,0,0,.7); }
  .lb-btn { position:fixed; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.25); color:#fff; width:46px; height:46px; border-radius:50%; display:grid; place-items:center; cursor:pointer; transition:background .15s,border-color .15s; }
  .lb-btn:hover { background:rgba(255,255,255,.18); border-color:#fff; }
  .lb-close { top:24px; right:24px; }
  .lb-prev { left:24px; top:50%; transform:translateY(-50%); }
  .lb-next { right:24px; top:50%; transform:translateY(-50%); }
  .lb-count { position:fixed; bottom:22px; left:50%; transform:translateX(-50%); color:#e6ded0; font-family:var(--mono); font-size:.78rem; letter-spacing:.08em; }
  @media (max-width:640px){ .lightbox{ padding:70px 16px; } .lb-prev{ left:8px; } .lb-next{ right:8px; } .lb-close{ top:12px; right:12px; } }

  /* ---------- WhatsApp float ---------- */
  .wa-float { position:fixed; right:20px; bottom:20px; z-index:150; width:58px; height:58px; border-radius:50%; background:#25D366; display:grid; place-items:center; box-shadow:0 6px 18px rgba(0,0,0,.28); transition:transform .15s, box-shadow .15s; }
  .wa-float:hover { transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.34); }
  .wa-float svg { width:32px; height:32px; }
  @media (max-width:640px){ .wa-float{ right:14px; bottom:14px; width:52px; height:52px; } .wa-float svg{ width:28px; height:28px; } }

  /* ---------- Steps ---------- */
  .steps { display:grid; grid-template-columns:repeat(5,1fr); gap:0; }
  @media (max-width:900px){ .steps{ grid-template-columns:1fr 1fr; gap:24px; } }
  @media (max-width:480px){ .steps{ grid-template-columns:1fr; } }
  .stp { padding:0 22px; position:relative; }
  .stp + .stp { border-left:1px solid var(--border); }
  @media (max-width:900px){ .stp + .stp{ border-left:none; } .stp{ padding:0; } }
  .stp .no { width:44px; height:44px; border-radius:50%; background:var(--brand); color:#fff; font-weight:800; display:grid; place-items:center; margin-bottom:14px; }
  .stp h3 { font-size:1.05rem; margin-bottom:.3rem; }
  .stp p { font-size:.9rem; color:var(--muted); margin:0; }
  .s-dark .stp + .stp { border-color:#3d362d; }

  /* ---------- Numbers ---------- */
  .nums { display:grid; grid-template-columns:repeat(4,1fr); gap:24px; text-align:center; }
  @media (max-width:680px){ .nums{ grid-template-columns:1fr 1fr; gap:30px; } }
  .nums b { display:block; font-size:2.7rem; font-weight:900; color:var(--brand); line-height:1; letter-spacing:-.02em; }
  .nums span { font-size:.92rem; color:#b3ab99; margin-top:.4rem; display:block; }

  /* ---------- Reviews ---------- */
  .revsrc { display:grid; grid-template-columns:1fr 1fr; gap:22px; }
  @media (max-width:640px){ .revsrc{ grid-template-columns:1fr; } }
  .revsrc-card { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:32px; text-align:center; }
  .revsrc-card h3 { font-size:1.2rem; margin-bottom:.7rem; }
  .revsrc-stars { font-size:1.5rem; letter-spacing:4px; margin-bottom:.6rem; }
  .revsrc-stars .fs { color:var(--star); }
  .revsrc-stars .fs.half { opacity:.5; }
  .revsrc-stars .fs.empty { opacity:.25; }
  .revsrc-score { font-weight:700; color:var(--muted); margin-bottom:1.1rem; }
  .revsrc-link { display:inline-flex; align-items:center; gap:.4rem; font-weight:800; font-size:.92rem; color:var(--brand); text-decoration:none; }
  .revsrc-link:hover { color:var(--brand-600); }

  /* ---------- Gallery ---------- */
  .gal { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:150px; gap:14px; }
  .gal .g0 { grid-column:span 2; grid-row:span 2; }
  .gal .g3 { grid-column:span 2; }
  .gal .cell { position:relative; }
  @media (max-width:760px){ .gal{ grid-template-columns:1fr 1fr; grid-auto-rows:130px; } .gal .g0{ grid-column:span 2; } .gal .g3{ grid-column:span 2; } }

  /* ---------- Forms ---------- */
  .formwrap { display:grid; grid-template-columns:1.1fr .9fr; gap:46px; align-items:start; }
  @media (max-width:880px){ .formwrap{ grid-template-columns:1fr; gap:30px; } }
  .field { margin-bottom:15px; }
  .field.row2 { display:grid; grid-template-columns:1fr 1fr; gap:15px; }
  @media (max-width:520px){ .field.row2{ grid-template-columns:1fr; } }
  label { display:block; font-weight:700; font-size:.85rem; margin-bottom:.35rem; color:var(--text); }
  label .req { color:var(--brand); }
  input,select,textarea { width:100%; font:inherit; font-size:.96rem; padding:.72rem .8rem; border:1.5px solid var(--border); border-radius:2px; background:var(--bg); color:var(--text); }
  input:focus,select:focus,textarea:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
  textarea { resize:vertical; min-height:110px; }
  .hint { font-size:.8rem; color:var(--muted); margin-top:.3rem; }
  .hp { position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

  .aside { background:var(--panel); border:1px solid var(--border); border-radius:4px; padding:26px; }
  .aside h3{ margin-bottom:.8rem; }
  .cline { display:flex; gap:.65rem; align-items:flex-start; padding:.5rem 0; font-size:.95rem; }
  .cline svg{ color:var(--brand); flex:0 0 auto; margin-top:3px; }
  .cline a{ color:var(--text); text-decoration:none; font-weight:700; }
  .checklist { list-style:none; padding:0; margin:0; }
  .checklist li{ display:flex; gap:.55rem; align-items:flex-start; padding:.4rem 0; font-size:.94rem; color:var(--muted); }
  .checklist svg{ color:var(--ok); flex:0 0 auto; margin-top:3px; }

  .success { display:none; background:var(--surface); border:1.5px solid var(--ok); border-left:5px solid var(--ok); border-radius:4px; padding:26px; }
  .success.show{ display:block; }
  .success h3{ color:var(--ok); display:flex; gap:.5rem; align-items:center; }
  .success .ref{ font-family:var(--mono); font-size:.85rem; color:var(--muted); margin-top:.6rem; }

  .ctaband .wrap { display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
  .ctaband .phone { font-size:1.9rem; font-weight:900; color:#fff; text-decoration:none; white-space:nowrap; letter-spacing:-.02em; }
  .ctaband .phone small{ display:block; font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; opacity:.85; }

  /* ---------- Footer ---------- */
  footer.site { background:var(--anthra); color:#c2bbac; }
  .fgrid { display:grid; grid-template-columns:1.5fr 1fr 1fr 1.3fr; gap:34px; padding:56px 0 36px; }
  @media (max-width:820px){ .fgrid{ grid-template-columns:1fr 1fr; gap:28px; } }
  @media (max-width:480px){ .fgrid{ grid-template-columns:1fr; } }
  footer h2 { color:#fff; font-size:.82rem; letter-spacing:.14em; text-transform:uppercase; margin-bottom:1rem; font-family:var(--mono); }
  footer a { color:#c2bbac; text-decoration:none; display:block; padding:.24rem 0; font-size:.93rem; cursor:pointer; }
  footer a:hover{ color:var(--brand); }
  .fbot { border-top:1px solid #3a332b; padding:18px 0; display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap; font-size:.82rem; color:#968e7e; }
  .fbot a { display:inline; color:#c2bbac; text-decoration:none; }
  .fbot a:hover { color:var(--brand); }
  .legal { max-width:70ch; }
  .legal p { margin:0 0 1rem; }
  .legal h3 { margin:1.7rem 0 .6rem; font-size:1.1rem; }
  .fnote { font-size:.9rem; color:#a89f8d; margin-top:.7rem; max-width:34ch; }
  .flogo .brandmark{ height:56px; }
  .xxl-inline { display:inline-flex; align-items:center; vertical-align:middle; margin-left:.4em; }
  .xxl-inline-mark { height:26px; width:auto; display:block; opacity:.92; }
  .xxl-inline:hover .xxl-inline-mark { opacity:1; }
  .intro-split h2 { margin-bottom:.8rem; }

  /* ---------- Top 30 banner + page ---------- */
  .badge30-banner { display:flex; align-items:center; justify-content:space-between; gap:20px 28px; flex-wrap:wrap;
    background:var(--brand-tint); border:1px solid var(--border); border-radius:6px; padding:24px 30px; }
  .badge30-banner-info { display:flex; align-items:center; gap:18px; }
  .badge30-banner-mark { height:52px; width:auto; display:block; flex-shrink:0; }
  .badge30-banner-info .kicker { display:block; margin-bottom:.2rem; }
  .badge30-banner-info h3 { font-size:1.18rem; margin:0; }
  .badge30-content { display:grid; grid-template-columns:1.5fr 1fr; gap:52px; align-items:start; }
  @media (max-width:820px){ .badge30-content{ grid-template-columns:1fr; } }
  .badge30-content h3 { font-size:1.25rem; margin-bottom:.7rem; }
  .badge30-content p { margin-bottom:1rem; }
  .badge30-card { background:var(--panel); border:1px solid var(--border); border-radius:6px; padding:28px; text-align:center; }
  .badge30-card .badge30-card-mark { height:78px; width:auto; margin:0 auto 14px; display:block; }
  .badge30-card .kicker { display:block; }
  .badge30-card h4 { margin:.3rem 0 1.3rem; font-size:1.05rem; }
  .badge30-checklist { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; text-align:left; }
  .badge30-checklist li { display:flex; align-items:flex-start; gap:.6rem; font-size:.93rem; color:var(--muted); }
  .badge30-checklist svg { flex-shrink:0; margin-top:2px; color:var(--brand); }
  .madeby { text-align:center; padding:14px 0 22px; font-size:.8rem; color:#978e7a; }
  .madeby-mark { height:24px; width:auto; display:inline-block; vertical-align:middle; margin-left:.5em; }

  /* ---------- Scroll reveal ---------- */
  .reveal { opacity:0; transform:translateY(26px); transition:opacity .7s ease, transform .7s cubic-bezier(.16,.7,.3,1); will-change:opacity, transform; }
  .reveal.in { opacity:1; transform:none; }
  @media (prefers-reduced-motion: reduce){ .reveal, .reveal.in { opacity:1 !important; transform:none !important; transition:none !important; } }

/* ---------- Toevoegingen voor de losse pagina's ---------- */
.skip { position:absolute; left:-9999px; top:0; background:var(--brand); color:#fff; padding:.6rem 1rem; z-index:300; }
.skip:focus { left:12px; top:12px; }
.crumbs { background:var(--grey); border-bottom:1px solid var(--border); font-size:.85rem; }
.crumbs ol { list-style:none; margin:0; padding:10px 0; display:flex; flex-wrap:wrap; gap:.3rem; }
.crumbs li { color:var(--muted); }
.crumbs li + li::before { content:"›"; margin-right:.3rem; color:var(--steel-2); }
.crumbs a { color:var(--muted); text-decoration:none; }
.crumbs a:hover { color:var(--brand); }
.pagehead { background:var(--anthra); color:#fff; border-bottom:4px solid var(--brand); }
.pagehead .wrap { display:grid; grid-template-columns:1.15fr .85fr; gap:44px; align-items:center; padding-top:56px; padding-bottom:60px; }
.pagehead h1 { color:#fff; }
.pagehead .sub { color:#cdc5b6; font-size:1.12rem; max-width:52ch; margin-top:1rem; }
.pagehead .cta { display:flex; gap:.7rem; flex-wrap:wrap; margin-top:1.6rem; }
.pagehead .cta .btn-out { color:#fff; border-color:rgba(255,255,255,.32); }
.pagehead .cta .btn-out:hover { border-color:#fff; color:#fff; }
.pagehead .shot { min-height:280px; height:100%; border:1px solid rgba(255,255,255,.12); }
.pagehead.plain .wrap { grid-template-columns:1fr; }
@media (max-width:860px){ .pagehead .wrap{ grid-template-columns:1fr; gap:26px; padding-top:40px; padding-bottom:44px; } .pagehead .shot{ min-height:220px; } }
.content { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:52px; align-items:start; }
@media (max-width:900px){ .content{ grid-template-columns:1fr; gap:34px; } }
.prose { max-width:70ch; }
.prose h2 { font-size:clamp(1.35rem,2.6vw,1.75rem); margin:2.2rem 0 .8rem; }
.prose h2:first-child { margin-top:0; }
.prose h3 { font-size:1.15rem; margin:1.7rem 0 .45rem; }
.prose ul { padding-left:1.2rem; margin:0 0 1rem; }
.prose li { margin:.3rem 0; }
.aside.sticky { position:sticky; top:96px; }
@media (max-width:900px){ .aside.sticky{ position:static; } }
.faq { max-width:78ch; }
.faq details { border:1px solid var(--border); border-radius:4px; background:var(--surface); margin-bottom:10px; }
.faq summary { cursor:pointer; padding:16px 20px; font-weight:800; list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--brand); font-size:1.3rem; line-height:1; }
.faq details[open] summary::after { content:"–"; }
.faq details > div { padding:0 20px 16px; color:var(--muted); }
.faq details > div p:last-child { margin:0; }
.links3 { display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
@media (max-width:860px){ .links3{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .links3{ grid-template-columns:1fr; } }
.chips { display:flex; flex-wrap:wrap; gap:10px; list-style:none; padding:0; margin:0; }
.chips a, .chips span { display:inline-block; padding:.5rem .85rem; border:1px solid var(--border); border-radius:2px; background:var(--surface); color:var(--text); text-decoration:none; font-weight:600; font-size:.93rem; }
.chips a:hover { border-color:var(--brand); color:var(--brand); }
.regios { display:grid; grid-template-columns:repeat(4,1fr); gap:30px 26px; }
@media (max-width:980px){ .regios{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:520px){ .regios{ grid-template-columns:1fr; } }
.regios h3 { font-size:1.05rem; margin-bottom:.6rem; padding-bottom:.5rem; border-bottom:2px solid var(--brand); }
.regios ul { list-style:none; padding:0; margin:0; }
.regios li { padding:.22rem 0; font-size:.95rem; color:var(--muted); }
.regios li a { color:var(--text); font-weight:700; text-decoration:none; }
.regios li a:hover { color:var(--brand); }
.rkaarten { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
@media (max-width:760px){ .rkaarten{ grid-template-columns:1fr; } }
.rkaart { background:var(--surface); border:1px solid var(--border); border-top:4px solid var(--brand); border-radius:4px; padding:24px 26px; display:flex; flex-direction:column; }
.rkaart h3 { font-size:1.25rem; margin-bottom:.35rem; }
.rkaart h3 a { color:var(--text); text-decoration:none; }
.rkaart h3 a:hover { color:var(--brand); }
.rkaart > p { font-size:.93rem; color:var(--muted); margin:0 0 1rem; }
.rkaart .chips { margin-bottom:1.1rem; }
.rkaart .go { margin-top:auto; font-weight:800; font-size:.92rem; color:var(--brand); text-decoration:none; display:inline-flex; align-items:center; gap:.35rem; }
@media (max-width:760px){ .kicker, .tile .pic .num { font-size:.8rem; } }
.rkaart .go { padding:.6rem 0; }
.akaarten { grid-template-columns:repeat(3,minmax(0,1fr)); }
@media (max-width:900px){ .akaarten{ grid-template-columns:1fr; } }
.akaart { text-decoration:none; color:inherit; transition:box-shadow .15s, border-color .15s; }
.akaart:hover { box-shadow:0 16px 34px -20px rgba(0,0,0,.4); }
.akaart h2, .akaart h3 { color:var(--text); }
.chips a.eigen { background:var(--brand); border-color:var(--brand); color:#fff; }
.chips a.eigen:hover { background:var(--brand-600); color:#fff; }
.legenda { display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; font-size:.88rem; color:var(--muted); margin-top:.8rem; }
.legenda i { display:inline-block; width:14px; height:14px; border-radius:2px; vertical-align:-2px; margin-right:.4rem; border:1px solid var(--border); background:var(--surface); }
.legenda i.eigen { background:var(--brand); border-color:var(--brand); }
.pkaarten { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
@media (max-width:980px){ .pkaarten{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px){ .pkaarten{ grid-template-columns:1fr; } }
.pkaart { background:var(--surface); border:1px solid var(--border); border-radius:4px; padding:22px 24px; scroll-margin-top:110px; }
.pkaart h3 { font-size:1.08rem; margin-bottom:.6rem; }
.pkaart p { font-size:.95rem; color:var(--muted); margin:0 0 .6rem; }
.pkaart p:last-child { margin:0; }
.pkaart:target { border-color:var(--brand); box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.gal-btn { display:block; position:relative; width:100%; height:100%; padding:0; border:0; background:none; cursor:zoom-in; }
.fotos { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.fotos .cell { aspect-ratio:3/4; }
@media (max-width:760px){ .fotos{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:680px){ .nums{ grid-template-columns:repeat(2,minmax(0,1fr)); } .nums b{ font-size:2.05rem; } }
.fgrid { grid-template-columns:1.3fr 1fr 1fr 1fr 1.2fr; }
@media (max-width:1040px){ .fgrid{ grid-template-columns:1fr 1fr 1fr; } }
@media (max-width:620px){ .fgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .fgrid{ grid-template-columns:1fr; } }