/*
Theme Name: Speelman & Voogd Mediators
Theme URI: https://www.sv-mediators.nl
Author: gebouwd voor Speelman & Voogd Mediators
Description: Eigen thema voor Speelman & Voogd Mediators. Bevat de volledige huisstijl, de koptekst en voettekst, en blokpatronen voor alle secties van de site, zodat teksten en afbeeldingen in de blokkeneditor aangepast kunnen worden.
Version: 1.0.0
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GPL-2.0-or-later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: sv-mediators
Tags: one-column, custom-logo, custom-menu, block-patterns, editor-style
*/

/* huisstijl van de bestaande site, aangevuld met de koppeling naar de blokken */



  :root{
    --navy-950:#0E192E;
    --navy-900:#15213B;
    --navy-800:#1D2C4B;
    --ink:#16233F;
    --teal:#079BAD;
    --green:#5AC671;
    --gradient:linear-gradient(135deg,#079BAD 0%,#5AC671 100%);
    --logo-green:#3AAA24;
    --btn-gradient:linear-gradient(135deg,#3AAA24 0%,#5AC671 100%);
    --cream:#F6F4EE;
    --paper:#FFFFFF;
    --gray-600:#5B6472;
    --gray-400:#9BA3AE;
    --line-dark:rgba(255,255,255,.14);
    --line-light:#E4E0D5;
    --font-display:'Quicksand', sans-serif;
    --font-body:'Quicksand', sans-serif;
    --maxw:1180px;
  }

  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{
    margin:0;
    font-family:var(--font-body);
    color:var(--ink);
    background:var(--paper);
    -webkit-font-smoothing:antialiased;
    line-height:1.55;
  }
  img,svg{display:block;max-width:100%;}
  a{color:inherit;text-decoration:none;}
  h1,h2,h3{font-family:var(--font-display);font-weight:600;margin:0;letter-spacing:-0.01em;}
  p{margin:0;}
  .wrap{max-width:var(--maxw);margin:0 auto;padding:0 40px;}
  .eyebrow{
    font-family:var(--font-body);
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.16em;
    text-transform:uppercase;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .eyebrow::before{
    content:"";
    width:22px;height:2px;
    background:var(--gradient);
    display:inline-block;
    border-radius:2px;
  }
  .btn{
    display:inline-flex;
    align-items:center;
    gap:8px;
    padding:13px 26px;
    border-radius:10px;
    font-weight:600;
    font-size:14.5px;
    letter-spacing:.01em;
    border:1px solid transparent;
    cursor:pointer;
    transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
  }
  .btn:hover{transform:translateY(-2px);}
  .btn-primary{background:var(--btn-gradient);color:#fff;}
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost-dark{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;}
  .btn-ghost-dark:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);}
  .btn-ghost-light{border-color:rgba(22,35,63,.22);color:var(--ink);}
  .btn-ghost-light:hover{background:rgba(22,35,63,.05);}

  /* ---------- pillar mark (brand motif) ---------- */
  /* ---------- header ---------- */
  .site-header{
    position:fixed;top:0;left:0;right:0;z-index:100;
    padding:22px 0;
    transition:padding .3s ease, background .3s ease, box-shadow .3s ease;
  }
  .site-header.scrolled{
    padding:14px 0;
    background:rgba(14,25,46,.92);
    backdrop-filter:blur(10px);
    box-shadow:0 8px 24px rgba(0,0,0,.14);
  }
  .nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:24px;}
  .logo{display:flex;flex-direction:column;color:#fff;}
  .logo-mark-img{display:block;height:42px;width:auto;}
  .nav-links{display:flex;gap:34px;list-style:none;margin:0;padding:0;}
  .nav-links a{
    color:rgba(255,255,255,.85);font-size:14.5px;font-weight:500;
    position:relative;padding-bottom:4px;
  }
  .nav-links a::after{
    content:"";position:absolute;left:0;bottom:0;width:0;height:1px;
    background:var(--gradient);transition:width .25s ease;
  }
  .nav-links a:hover{color:#fff;}
  .nav-links a:hover::after{width:100%;}
  .nav-actions{display:flex;align-items:center;gap:18px;}
  .nav-toggle{
    display:none;background:none;border:none;cursor:pointer;
    width:32px;height:24px;position:relative;
  }
  .nav-toggle span{
    position:absolute;left:0;right:0;height:2px;background:#fff;border-radius:2px;
    transition:transform .25s ease, opacity .25s ease;
  }
  .nav-toggle span:nth-child(1){top:0;}
  .nav-toggle span:nth-child(2){top:11px;}
  .nav-toggle span:nth-child(3){top:22px;}

  @media (max-width:900px){
    .nav-links{
      position:fixed;top:0;right:0;height:100vh;width:76%;max-width:320px;
      background:var(--navy-950);flex-direction:column;justify-content:center;
      align-items:flex-start;padding:0 44px;gap:26px;
      transform:translateX(100%);transition:transform .35s ease;
    }
    .nav-open .nav-links{transform:translateX(0);}
    .nav-toggle{display:block;z-index:110;}
    .nav-wrap{gap:12px;}
    .nav-cta-vast{padding:8px 16px;font-size:13.5px;margin-left:auto;}
    .nav-open .nav-toggle span:nth-child(1){transform:translateY(11px) rotate(45deg);}
    .nav-open .nav-toggle span:nth-child(2){opacity:0;}
    .nav-open .nav-toggle span:nth-child(3){transform:translateY(-11px) rotate(-45deg);}
  }

  /* ---------- hero ---------- */
  .hero{
    position:relative;
    background:var(--navy-950);
    color:#fff;
    padding:172px 0 120px;
    overflow:hidden;
  }
  .hero::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(120% 100% at 50% 50%, transparent 45%, rgba(14,25,46,.55) 100%),
      radial-gradient(700px 500px at 82% 12%, rgba(90,198,113,.20), transparent 60%),
      radial-gradient(600px 500px at 100% 70%, rgba(7,155,173,.16), transparent 60%),
      url('assets/img/hero-bg.webp') no-repeat center center/cover;
    pointer-events:none;
  }
  .scroll-cue{
    position:absolute;left:50%;bottom:36px;transform:translateX(-50%);
    display:flex;flex-direction:column;align-items:center;gap:8px;
    color:rgba(255,255,255,.65);text-decoration:none;
    font-size:10px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
    z-index:2;
  }
  .scroll-cue svg{animation:scroll-bounce 2s ease-in-out infinite;}
  @keyframes scroll-bounce{
    0%,100%{transform:translateY(0);}
    50%{transform:translateY(6px);}
  }
  @media (prefers-reduced-motion:reduce){
    .scroll-cue svg{animation:none;}
    .process-track .step{animation:none !important;opacity:1 !important;transform:none !important;}
  }
  .hero-inner{
    position:relative;z-index:1;
    display:grid;grid-template-columns:1.4fr 1fr;gap:50px;align-items:end;
  }
  .hero-copy{border-left:2px solid transparent;border-image:var(--gradient) 1;padding-left:34px;}
  .hero-copy h1{
    font-size:clamp(38px,5vw,60px);
    line-height:1.08;
    margin:0 0 26px;
    color:#fff;
    text-wrap:balance;
  }
  .hero-copy .eyebrow{color:rgba(255,255,255,.65);}
  .hero-sub{
    font-size:19px;color:rgba(255,255,255,.65);max-width:480px;margin-bottom:12px;
    font-weight:400;line-height:1.5;
  }
  .hero-voortvarend{
    font-size:16px;font-weight:400;color:rgba(255,255,255,.65);margin:0 0 16px;line-height:1.5;
  }
  .hero-tags{
    display:flex;flex-wrap:wrap;list-style:none;margin:0 0 40px;padding:0;
    font-size:14.5px;font-weight:700;color:#fff;
  }
  .hero-tags li{position:relative;padding-right:16px;margin-right:8px;}
  .hero-tags li:not(:last-child)::after{
    content:"";position:absolute;right:0;top:50%;transform:translateY(-50%);
    width:5px;height:5px;border-radius:50%;background:var(--gradient);
  }
  .hero-ctas{display:flex;gap:14px;flex-wrap:wrap;}

  .hero-visual{display:flex;flex-direction:column;align-items:center;justify-content:center;}
  .hero-slogan{
    max-width:400px;
    font-family:var(--font-display);font-weight:700;
    font-size:clamp(28px,3.4vw,42px);line-height:1.35;
    text-align:center;color:#FF8A00;
    background-image:linear-gradient(100deg,#FF8A00 0%,#FF8A00 45%,#FFFFFF 50%,#FF8A00 55%,#FF8A00 100%);
    background-size:250% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:slogan-shimmer 11s linear 1s infinite;
  }
  @keyframes slogan-shimmer{
    0%{background-position:180% 0;}
    55%{background-position:-80% 0;}
    100%{background-position:-80% 0;}
  }

  @media (prefers-reduced-motion:reduce){
    .hero-slogan{animation:none;background-position:-80% 0;}
    .footer-tagline-accent{animation:none;background-position:-80% 0;}
    html{scroll-behavior:auto;}
  }

  @media (max-width:900px){
    .hero-inner{grid-template-columns:1fr;text-align:left;}
    .hero-visual{margin-top:20px;}
    .hero-slogan{text-align:left;max-width:100%;}
  }

  /* ---------- team ---------- */
  .team{background:var(--paper);padding:0 0 130px;}
  .team-inner{
    display:grid;grid-template-columns:.85fr 1.15fr;gap:70px;align-items:center;
  }
  .team-header{max-width:640px;margin-bottom:60px;border-left:2px solid transparent;border-image:var(--gradient) 1;padding-left:34px;}
  .team-header h2{font-size:clamp(44px,6vw,68px);margin:16px 0 24px;line-height:1.1;text-wrap:balance;}
  .team-intro{color:var(--gray-600);font-size:16.5px;line-height:1.7;text-align:justify;hyphens:auto;}

  .team-row{display:grid;grid-template-columns:.42fr 1fr;gap:50px;align-items:start;margin-bottom:60px;}
  .team-row:last-child{margin-bottom:0;}

  .member-photo{
    aspect-ratio:4/5;
    border:1px solid var(--line-light);
    border-radius:4px;
    overflow:hidden;
    position:relative;
  }
  .member-photo img{width:100%;height:100%;object-fit:cover;display:block;}
  .member-photo::after{
    content:"";position:absolute;inset:0;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
    pointer-events:none;
  }

  .member-bio h3{font-size:19px;font-weight:600;font-family:var(--font-body);margin-bottom:6px;}
  .member-role{font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#057485;font-weight:700;}
  .member-bio p{margin-top:14px;font-size:15px;line-height:1.7;color:var(--gray-600);text-align:justify;hyphens:auto;}

  @media (max-width:900px){
    .team{padding-bottom:90px;}
    .team-row{grid-template-columns:1fr;gap:24px;}
    .member-photo{max-width:280px;}
  }

  /* ---------- process ---------- */
  .process{padding:130px 0;background:var(--paper);}
  .process-head{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin-bottom:70px;flex-wrap:wrap;}
  .process-head > div{border-left:2px solid transparent;border-image:var(--gradient) 1;padding-left:34px;}
  .process-head h2{font-size:clamp(44px,6vw,68px);line-height:1.1;text-wrap:balance;}
  .process-track{
    display:grid;grid-template-columns:repeat(5,1fr);gap:26px;
    position:relative;
  }
  .step{position:relative;padding-top:0;}
  .process-track .step{opacity:0;transform:none;transition:none;}
  .process-track .step.in-view{opacity:0;transform:none;}
  .process-track .step.in-view:nth-child(1){animation:stepLoop 10s ease 0s infinite;}
  .process-track .step.in-view:nth-child(2){animation:stepLoop 10s ease .45s infinite;}
  .process-track .step.in-view:nth-child(3){animation:stepLoop 10s ease .9s infinite;}
  .process-track .step.in-view:nth-child(4){animation:stepLoop 10s ease 1.35s infinite;}
  .process-track .step.in-view:nth-child(5){animation:stepLoop 10s ease 1.8s infinite;}
  @keyframes stepLoop{
    0%{opacity:0;transform:translateY(22px);}
    6%{opacity:1;transform:translateY(0);}
    68%{opacity:1;transform:translateY(0);}
    76%{opacity:0;transform:translateY(-10px);}
    100%{opacity:0;transform:translateY(22px);}
  }
  /* Fasen als traject: de verbindingslijn wordt zwaarder en verkleurt van teal (01)
     naar logogroen (05). Alle vijf kleuren halen >5:1 contrast op wit. Zelfde opzet
     als op de onepager. */
  .step-top{display:flex;align-items:center;gap:14px;margin-bottom:22px;}
  .step-num{
    font-family:var(--font-display);
    font-size:42px;font-weight:700;line-height:1;
    color:currentColor;-webkit-text-fill-color:currentColor;
    display:inline-block;flex:0 0 auto;
  }
  .step-rule{flex:1 1 auto;margin-right:-26px;background:currentColor;border-radius:1px;}
  .process-track .step:last-child .step-rule{display:none;}
  .process-track .step:nth-child(1){color:#057485;}
  .process-track .step:nth-child(2){color:#0E776A;}
  .process-track .step:nth-child(3){color:#187A50;}
  .process-track .step:nth-child(4){color:#227C35;}
  .process-track .step:nth-child(5){color:#2B7F1A;}
  .process-track .step:nth-child(1) .step-rule{height:2px;}
  .process-track .step:nth-child(2) .step-rule{height:3px;}
  .process-track .step:nth-child(3) .step-rule{height:4px;}
  .process-track .step:nth-child(4) .step-rule{height:5px;}
  .step h3{font-size:18px;font-weight:700;margin-bottom:8px;color:var(--ink);}
  .step p{font-size:14px;color:var(--gray-600);}

  @media (max-width:900px){
    .process-track{grid-template-columns:1fr;gap:0;}
    .step{padding:26px 0;border-bottom:1px solid var(--line-light);}
    .step:first-child{padding-top:0;}
    /* onder elkaar heeft een verbindingslijn naar rechts geen betekenis meer */
    .step-rule{display:none;}
    .step-top{margin-bottom:14px;}
  }

  /* ---------- reveal ---------- */
  .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
  .reveal.in-view{opacity:1;transform:translateY(0);}

  /* ---------- footer ---------- */
  footer{background:var(--navy-950);color:#fff;padding:110px 0 40px;}
  .footer-tagline{
    font-family:var(--font-display);font-size:clamp(22px,2.6vw,30px);
    line-height:1.5;font-weight:500;max-width:960px;margin:0 auto 80px;
    text-align:center;color:#fff;
  }
  .footer-tagline-accent{
    background-image:linear-gradient(100deg,#079BAD 0%,#079BAD 42%,#fff 48%,#fff 52%,#5AC671 58%,#5AC671 100%);
    background-size:250% 100%;background-repeat:no-repeat;
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
    animation:footer-shimmer 18s linear infinite;
  }
  @keyframes footer-shimmer{
    0%{background-position:180% 0;}
    80%{background-position:-80% 0;}
    100%{background-position:-80% 0;}
  }
  .footer-grid{
    display:grid;grid-template-columns:repeat(4,1fr);gap:40px;
    padding-bottom:60px;border-bottom:1px solid var(--line-dark);
  }
  .footer-col h4{
    font-size:11px;letter-spacing:.14em;text-transform:uppercase;
    color:rgba(255,255,255,.65);font-weight:700;margin-bottom:16px;
  }
  .footer-col p{font-size:15px;color:rgba(255,255,255,.85);margin-bottom:6px;display:block;}
  .footer-col a{
    font-size:15px;color:rgba(255,255,255,.85);margin-bottom:6px;display:block;
    text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;
  }
  .footer-col a:hover{color:var(--green);text-decoration-color:var(--green);}
  .route-link{
    color:#2B7F1A !important;font-weight:600;font-size:13.5px;
    margin-top:8px;display:inline-flex;align-items:center;gap:4px;
    transition:gap .2s ease;
  }
  .route-link:hover{gap:8px;color:#236F14 !important;}
  footer .route-link{color:var(--green) !important;}
  footer .route-link:hover{color:#fff !important;}
  .footer-credentials{
    display:flex;flex-wrap:wrap;align-items:center;gap:14px;
    padding:28px 0;border-bottom:1px solid var(--line-dark);
  }
  .credential-badge{
    background:#fff;border-radius:4px;
    padding:8px 16px;display:inline-flex;align-items:center;
  }
  .credential-badge img{height:28px;width:auto;display:block;}
  .footer-bottom{
    display:flex;justify-content:space-between;align-items:center;
    padding-top:32px;flex-wrap:wrap;gap:12px;
    font-size:13px;color:rgba(255,255,255,.65);
  }
  .footer-logo{display:block;height:30px;width:auto;opacity:.9;}

  @media (max-width:900px){
    .footer-grid{grid-template-columns:1fr 1fr;}
  }
  @media (max-width:600px){
    .wrap{padding:0 22px;}
    .footer-grid{grid-template-columns:1fr;}
    .approach{padding:80px 0;}
  }

  :focus-visible{outline:2px solid #2B7F1A;outline-offset:3px;}
  .site-header :focus-visible,.hero :focus-visible,.subhero :focus-visible,.duo-band :focus-visible,.notfound :focus-visible,footer :focus-visible{outline-color:var(--green);}

  /* ============ Nieuwe secties (contentstructuur update) ============ */
  .nav-wrap nav{margin-left:auto;}
  .nav-cta-vast{font-size:14.5px;line-height:1;display:inline-flex;align-items:center;flex:0 0 auto;}
  .nav-cta{
    background:var(--btn-gradient) !important;color:#fff !important;
    padding:9px 20px;border-radius:20px;font-weight:600;
  }
  .nav-cta::after{display:none;}
  .nav-cta:hover{color:#fff !important;filter:brightness(1.08);}

  .split{padding:120px 0;}
  .split.bg-paper{background:var(--paper);}
  .split.bg-cream{background:var(--cream);}
  .split-inner{display:grid;grid-template-columns:.4fr 1fr;gap:60px;}
  .split-label{padding-top:6px;color:var(--gray-600);}
  .split-content{border-left:2px solid transparent;border-image:var(--gradient) 1;padding-left:34px;}
  .split-content h2{font-size:clamp(26px,3vw,34px);margin-bottom:24px;line-height:1.2;}
  .split-content.split-emphasis h2{font-size:clamp(44px,6vw,68px);margin-bottom:28px;text-wrap:balance;}
  .split-content p{font-family:var(--font-body);font-size:16.5px;line-height:1.75;color:var(--gray-600);margin-bottom:16px;text-align:justify;hyphens:auto;}
  .split-content p:last-child{margin-bottom:0;}
  .split-content p.lead{
    font-family:var(--font-body);font-size:17px;font-weight:600;color:var(--ink);
    margin-bottom:18px;
  }
  .suit-list{list-style:none;margin:0 0 24px;padding:0;display:flex;flex-direction:column;gap:14px;}
  .suit-list li{position:relative;padding-left:26px;color:var(--ink);font-size:16px;line-height:1.55;}
  .suit-list li::before{
    content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
    border-radius:50%;background:var(--gradient);
  }
  @media (max-width:900px){.split-inner{grid-template-columns:1fr;gap:22px;}}

  /* ---------- FAQ (praktisch) ---------- */
  .faq-header{max-width:640px;margin-bottom:50px;border-left:2px solid transparent;border-image:var(--gradient) 1;padding-left:34px;}
  .faq-header h2{font-size:clamp(32px,4vw,44px);line-height:1.15;margin:0;text-wrap:balance;}
  .faq-list{max-width:820px;}
  .faq-item{border-bottom:1px solid var(--line-light);}
  .faq-item:last-child{border-bottom:none;}
  .faq-question{
    display:flex;align-items:center;justify-content:space-between;gap:20px;
    width:100%;text-align:left;background:none;border:none;cursor:pointer;
    padding:26px 0;font-family:inherit;font-size:18px;font-weight:700;color:var(--ink);
  }
  .faq-question:hover{color:#2B7F1A;}
  .faq-icon{
    flex-shrink:0;width:26px;height:26px;border-radius:50%;
    display:flex;align-items:center;justify-content:center;
    background:var(--cream);color:#2B7F1A;font-size:18px;line-height:1;
    transition:transform .3s ease;
  }
  .faq-item.open .faq-icon{transform:rotate(135deg);}
  .faq-answer-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s ease;}
  .faq-item.open .faq-answer-wrap{grid-template-rows:1fr;}
  .faq-answer-inner{overflow:hidden;}
  .faq-answer-inner p{font-size:15.5px;line-height:1.7;color:var(--gray-600);margin:0 0 28px;}
  @media (prefers-reduced-motion:reduce){
    .faq-answer-wrap{transition:none;}
    .faq-icon{transition:none;}
  }

  .values{background:var(--paper);padding:0 0 130px;}
  .values-intro{max-width:800px;margin-bottom:50px;}
  .values-intro p{color:var(--gray-600);font-size:16.5px;line-height:1.75;margin-bottom:16px;text-align:justify;hyphens:auto;}
  .value-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;}
  .value-card{padding-top:18px;border-top:2px solid transparent;border-image:var(--gradient) 1;}
  .value-card h3{font-size:16px;font-weight:600;margin-bottom:8px;font-family:var(--font-body);}
  .value-card p{font-size:14.5px;color:var(--gray-600);margin:0;}
  @media (max-width:900px){.value-grid{grid-template-columns:repeat(2,1fr);gap:28px;}}
  @media (max-width:600px){.value-grid{grid-template-columns:1fr;}}

  .duo-band{background:var(--navy-950);color:#fff;padding:130px 0;position:relative;overflow:hidden;}
  .duo-band::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(650px 500px at 12% 10%, rgba(90,198,113,.16), transparent 60%),
      radial-gradient(600px 500px at 92% 90%, rgba(7,155,173,.14), transparent 60%);
    pointer-events:none;
  }
  .duo-inner{position:relative;z-index:1;max-width:760px;border-left:2px solid transparent;border-image:var(--gradient) 1;padding-left:34px;}
  .duo-band h2{font-size:clamp(44px,6vw,68px);margin:0 0 14px;color:#fff;line-height:1.1;text-wrap:balance;}
  .duo-band .duo-subtitle{color:rgba(255,255,255,.85);font-size:21px;font-weight:600;margin-bottom:30px;}
  .duo-band p{color:rgba(255,255,255,.85);font-size:16.5px;line-height:1.75;margin-bottom:18px;max-width:660px;text-align:justify;hyphens:auto;}

  .cta-band{background:var(--cream);padding:110px 0;text-align:center;}
  .cta-inner{max-width:600px;margin:0 auto;}
  .cta-inner h2{font-size:clamp(28px,3.4vw,36px);margin-bottom:16px;}
  .cta-inner p{color:var(--gray-600);font-size:16.5px;margin-bottom:4px;}
  .cta-inner .btn{margin-top:28px;}
  .cta-direct{margin-top:20px;font-size:15px;color:var(--gray-600);}
  .cta-direct a{color:var(--ink);font-weight:600;border-bottom:1px solid var(--line);}
  .cta-direct a:hover{border-bottom-color:currentColor;}
  .cta-direct .punt{color:var(--green);margin:0 9px;}
  @media (max-width:600px){.cta-direct{font-size:14.5px;}.cta-direct .punt{display:block;height:0;overflow:hidden;margin:6px 0;}}

  @media (max-width:600px){
    .split{padding:80px 0;}
    .values{padding-bottom:90px;}
    .duo-band{padding:90px 0;}
    .cta-band{padding:80px 0;}
    .process{padding:90px 0;}
  }

  /* ============ Gedeelde subpagina-hero (Contact / Praktisch) ============ */
  .subhero{
    position:relative;background:var(--navy-950);color:#fff;
    padding:168px 0 90px;overflow:hidden;
  }
  .subhero::before{
    content:"";position:absolute;inset:0;
    background:
      radial-gradient(700px 500px at 85% 0%, rgba(90,198,113,.18), transparent 60%),
      radial-gradient(600px 500px at 100% 90%, rgba(7,155,173,.14), transparent 60%);
    pointer-events:none;
  }
  .subhero-inner{position:relative;z-index:1;max-width:660px;}
  .subhero-inner h1{font-size:clamp(34px,4.6vw,50px);line-height:1.1;margin:20px 0 20px;color:#fff;}
  .subhero-inner .eyebrow{color:rgba(255,255,255,.65);}
  @media (max-width:600px){.subhero{padding:150px 0 80px;}}

  /* ============ Contact-pagina (samengevoegde weergave) ============ */
  /* ---------- plan section ---------- */
  .plan-section{background:var(--cream);padding:100px 0 130px;}
  .plan-wrap{max-width:760px;margin:0 auto;padding:0 40px;display:flex;flex-direction:column;gap:44px;}

  .panel{
    background:var(--paper);
    border:1px solid var(--line-light);
    border-radius:4px;
    padding:44px;
  }
  .panel-head{margin-bottom:30px;}
  .panel-head h2{font-size:24px;margin-bottom:8px;}
  .panel-head p{color:var(--gray-600);font-size:15px;}

  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;}
  .hp-field{position:absolute;left:-9999px;top:-9999px;width:1px;height:1px;overflow:hidden;}
  .field{display:flex;flex-direction:column;gap:8px;}
  .field.full{grid-column:1 / -1;}
  .field label{font-size:13px;font-weight:600;color:var(--ink);}
  .field label .opt{color:var(--gray-600);font-weight:500;}
  .field input,.field textarea{
    font-family:var(--font-body);
    font-size:15px;
    padding:12px 14px;
    border:1px solid var(--line-light);
    border-radius:2px;
    background:var(--cream);
    color:var(--ink);
    transition:border-color .2s ease, background .2s ease;
  }
  .field input:focus,.field textarea:focus{
    outline:none;border-color:var(--teal);background:#fff;
    box-shadow:0 0 0 3px rgba(7,155,173,.25);
  }
  .field textarea{resize:vertical;min-height:96px;font-family:var(--font-body);}
  .form-note{
    margin-top:22px;padding-top:20px;border-top:1px solid var(--line-light);
    font-size:13.5px;color:var(--gray-600);display:flex;gap:10px;align-items:flex-start;
  }
  .form-note svg{flex-shrink:0;margin-top:2px;}

  @media (max-width:600px){
    .form-grid{grid-template-columns:1fr;}
    .panel{padding:28px 24px;}
    .plan-wrap{padding:0 22px;}
    .hero{padding:150px 0 80px;}
    .plan-section{padding:70px 0 90px;}
  }

  #viewContact{display:none;}
  #viewPraktisch{display:none;}


  .skip-link{
    position:absolute;left:-9999px;top:0;
    background:#FF8A00;color:#0E192E;
    padding:12px 20px;z-index:9999;
    font-weight:700;border-radius:0 0 4px 0;
    text-decoration:none;
  }
  .skip-link:focus{left:0;}

  /* ---------- 404-pagina ---------- */
  .notfound{
    min-height:70vh;display:flex;align-items:center;justify-content:center;
    text-align:center;background:var(--navy-950);color:#fff;
    padding:160px 24px 100px;position:relative;overflow:hidden;
  }
  .notfound::before{
    content:"";position:absolute;inset:0;
    background:radial-gradient(700px 500px at 82% 12%, rgba(90,198,113,.18), transparent 60%),
               radial-gradient(600px 500px at 10% 80%, rgba(7,155,173,.14), transparent 60%);
  }
  .notfound-inner{position:relative;z-index:1;max-width:560px;}
  .notfound-code{
    font-family:var(--font-display);font-weight:700;
    font-size:clamp(70px,10vw,120px);line-height:1;
    background:var(--gradient);-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;margin-bottom:8px;
  }
  .notfound h1{font-size:clamp(26px,3.4vw,36px);margin-bottom:16px;color:#fff;}
  .notfound p{font-size:16.5px;color:rgba(255,255,255,.65);line-height:1.6;margin-bottom:32px;}

  /* ---------- hero-subtitel op subpagina's (contact/praktisch) ---------- */
  .subhero .hero-sub{margin-bottom:26px;}

  /* ---------- navigatie-verbeteringen (sep 2026) ---------- */
  .logo-mark-img{height:48px;}
  .nav-links a{font-size:15.5px;color:rgba(255,255,255,.85);}
  .nav-links a[aria-current]{color:#fff;}
  .nav-links a[aria-current]::after{width:100%;}
  .nav-cta{background-image:linear-gradient(135deg,#236F14 0%,#2B7F1A 100%) !important;}
  .nav-cta:hover{filter:brightness(.92);}
  .nav-links a.nav-cta{padding:9px 20px;}
  /* groene knoppen: donkerder groen voor voldoende contrast met witte tekst (WCAG AA) */
  :root{--btn-gradient:linear-gradient(135deg,#236F14 0%,#2B7F1A 100%);}
  .btn-primary:hover{filter:brightness(.92);}
  .site-header::before{
    content:"";position:absolute;left:0;right:0;top:0;height:170%;
    background-image:linear-gradient(to bottom,rgba(14,25,46,.62) 0%,rgba(14,25,46,0) 100%);
    pointer-events:none;z-index:-1;transition:opacity .3s ease;
  }
  .site-header.scrolled::before{opacity:0;}

  /* ---------- hero-foto & glans-teksten (sep 2026) ---------- */
  /* uitsnede iets hoger, zodat de gezichten op brede/lage schermen in beeld blijven */
  .hero::before{background-position:0% 0%,0% 0%,0% 0%,center 20%;}
  /* vaste kleur onder de glans: tekst blijft zichtbaar als het verloop naast de tekst ligt */
  .hero-slogan{background-color:#FF8A00;}
  /* footer-regel 2: begint lichtgroen, kleurt na de eerste glans langzaam naar het logogroen (#3AAA24) */
  @property --ft-green{syntax:'<color>';inherits:false;initial-value:#5AC671;}
  .footer-tagline-accent{--ft-green:#5AC671;background-color:var(--ft-green);}
  /* rustige glans: brede lichtbaan met wit hart, ~3,5s overloop + ~3,5s rust (cyclus 7s).
     Posities 100% -> 0% houden het verloop altijd over de hele tekst. */
  .hero-slogan{
    background-image:linear-gradient(100deg,#FF8A00 0%,#FF8A00 34%,#FFFFFF 47%,#FFFFFF 53%,#FF8A00 66%,#FF8A00 100%);
    background-size:300% 100%;background-position:100% 0;
    animation:calm-glow 7s ease-in-out 1s infinite;
  }
  .footer-tagline-accent{
    background-image:linear-gradient(100deg,var(--ft-green) 0%,var(--ft-green) 34%,#FFFFFF 47%,#FFFFFF 53%,var(--ft-green) 66%,var(--ft-green) 100%);
    background-size:300% 100%;background-position:100% 0;
    animation:calm-glow 7s ease-in-out 3s infinite;
  }
  /* zodra de footer in beeld komt (JS zet .to-logo-green): glans start opnieuw,
     daarna kleurt de tekst in 2,5s naar logogroen en blijft zo */
  .footer-tagline-accent.to-logo-green{
    animation:calm-glow-ft 7s ease-in-out .5s infinite, to-logo-green 2.5s ease 4s forwards;
  }
  @keyframes calm-glow-ft{
    0%{background-position:100% 0;}
    50%{background-position:0% 0;}
    100%{background-position:0% 0;}
  }
  @keyframes to-logo-green{ from{--ft-green:#5AC671;} to{--ft-green:#3AAA24;} }
  @keyframes calm-glow{
    0%{background-position:100% 0;}
    50%{background-position:0% 0;}
    100%{background-position:0% 0;}
  }
  /* hero-foto 18% naar rechts: Erin en Najama allebei vrij van de kop (alleen desktop) */
  .hero::before{left:18%;right:-18%;}
  @media (max-width:900px){ .hero::before{left:0;right:0;} }
  /* hero-slogan kleiner, rechtsonder als citaat met oranje streep (optie B) */
  .hero-visual{align-items:flex-end;justify-content:flex-end;}
  .hero-slogan{
    font-size:clamp(20px,2vw,26px);max-width:300px;line-height:1.3;
    text-align:left;padding-left:18px;border-left:3px solid #FF8A00;
  }
  @media (max-width:900px){ .hero-visual{align-items:flex-start;margin-bottom:34px;} }
  /* knoppen en formuliervelden nemen standaard niet het paginalettertype over */
  button,input,textarea,select{font-family:inherit;}
  /* mobiel: links uitlijnen i.p.v. uitvullen (voorkomt grote gaten tussen woorden) */
  @media (max-width:900px){
    .team-intro,.member-bio p,.split-content p,.values-intro p,.duo-band p{text-align:left;hyphens:manual;}
    .member-photo{max-width:340px;}
  }
  /* mobiel: hero-kenmerken onder elkaar met het bolletje ervoor */
  @media (max-width:600px){
    .hero-tags{flex-direction:column;gap:6px;}
    .hero-tags li{padding:0 0 0 15px;margin:0;}
    .hero-tags li::after,.hero-tags li:not(:last-child)::after{
      content:"";position:absolute;left:0;right:auto;top:50%;transform:translateY(-50%);
      width:5px;height:5px;border-radius:50%;background:var(--gradient);
    }
  }
  /* Duo-mediation zonder ondertitel: iets meer ruimte onder de kop */
  .duo-band h2{margin-bottom:28px;}
  /* link naar de algemene voorwaarden onderin */
  .footer-links{display:flex;gap:18px;flex-wrap:wrap;}
  .footer-links a{color:rgba(255,255,255,.65);text-decoration:underline;text-decoration-color:rgba(255,255,255,.35);text-underline-offset:3px;}
  .footer-links a:hover{color:#fff;text-decoration-color:#fff;}
  .form-note a{color:#2B7F1A;text-decoration:underline;text-underline-offset:2px;font-weight:600;}
  /* functietitel niet in hoofdletters: 'MfN' is een merknaam (was MFN) */
  .member-role{text-transform:none;letter-spacing:.02em;font-size:12.5px;}
  /* footer-tekst: geen los woord op de laatste regel */
  .footer-tagline{text-wrap:balance;}
  .footer-tagline-accent{display:block;text-wrap:balance;}
  /* 'minder animaties': staat onderaan zodat hij niet door latere regels wordt overschreven */
  @media (prefers-reduced-motion:reduce){
    .hero-slogan,.footer-tagline-accent,.footer-tagline-accent.to-logo-green{animation:none;background-image:none;}
    .footer-tagline-accent{--ft-green:#3AAA24;}
  }


/* ---------- juridische pagina's ---------- */
.concept-banner strong{text-decoration:underline;}
.legal-hero{background:var(--navy-950);color:#fff;padding:80px 0 60px;}
.legal-hero h1{font-size:clamp(30px,4vw,42px);margin-bottom:14px;}
.legal-hero p{color:rgba(255,255,255,.65);font-size:16px;max-width:640px;}
.legal-body{padding:70px 0 120px;background:var(--paper);}
.legal-body .wrap{max-width:820px;}
.legal-body h2{font-size:24px;margin:48px 0 16px;color:var(--ink);}
.legal-body h2:first-child{margin-top:0;}
.legal-body h3{font-size:16.5px;margin:26px 0 8px;color:var(--ink);}
.legal-body p{font-size:15.5px;line-height:1.75;color:var(--gray-600);margin-bottom:14px;text-align:justify;hyphens:auto;}
.legal-body ul{margin:0 0 14px;padding-left:22px;}
.legal-body li{font-size:15.5px;line-height:1.75;color:var(--gray-600);margin-bottom:6px;}
.legal-note{background:var(--cream);border-left:3px solid #FF8A00;
    padding:14px 18px;margin:16px 0;font-size:14px;color:var(--gray-600);
    border-radius:0 4px 4px 0;}
.legal-note strong{color:var(--ink);}
.av-top{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-bottom:34px;}
.av-versie{font-size:14px;color:var(--gray-600);margin:0;}
.av-download{font-size:14px;padding:11px 22px;}
.av-index{background:var(--cream);border:1px solid var(--line-light);border-radius:4px;padding:26px 30px;margin-bottom:50px;}
.av-index h2{font-size:15px;letter-spacing:.06em;text-transform:uppercase;margin:0 0 14px;}
.av-index ol{margin:0;padding-left:22px;color:var(--gray-600);font-size:15px;line-height:1.9;}
.av-index a{color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-light);text-underline-offset:3px;}
.av-index a:hover{color:#2B7F1A;text-decoration-color:#2B7F1A;}
.av-artikel{margin-bottom:44px;scroll-margin-top:110px;}
.av-artikel h2{font-size:21px;line-height:1.3;margin:0 0 18px;padding-bottom:12px;border-bottom:1px solid var(--line-light);}
.av-nr{display:block;font-family:var(--font-body);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:#057485;font-weight:700;margin-bottom:4px;}
.av-lid{display:grid;grid-template-columns:52px 1fr;gap:0 10px;margin-bottom:14px;}
.av-lid-nr{font-size:14px;font-weight:700;color:var(--gray-600);padding-top:2px;}
.av-lid p{margin:0;color:var(--gray-600);font-size:15.5px;line-height:1.75;}
.av-sublijst{margin:10px 0 0;padding-left:20px;color:var(--gray-600);font-size:15.5px;line-height:1.75;}
.av-sublijst li{margin-bottom:6px;}
.av-intro{color:var(--gray-600);font-size:15.5px;line-height:1.75;margin-bottom:16px;}
.av-definities{margin:0 0 8px;}
.av-definities dt{font-weight:700;color:var(--ink);font-size:15.5px;margin-top:14px;}
.av-definities dd{margin:4px 0 0;color:var(--gray-600);font-size:15.5px;line-height:1.75;}
.av-slot{margin-top:50px;padding-top:22px;border-top:1px solid var(--line-light);font-size:13.5px;color:var(--gray-600);}
@media (max-width:900px){
.legal-body .av-lid p,.legal-body .av-sublijst,.legal-body .av-intro,.legal-body .av-definities dd{text-align:left;hyphens:manual;}
}
@media (max-width:600px){
.av-lid{grid-template-columns:40px 1fr;}
.av-index{padding:20px 22px;}
}

.pv-intro{color:var(--gray-600);font-size:15.5px;line-height:1.75;margin-bottom:16px;}
.pv-contact{background:var(--cream);border:1px solid var(--line-light);border-radius:4px;padding:26px 30px;margin:22px 0 30px;}
.pv-contact-naam{font-size:15.5px;font-weight:700;color:var(--ink);margin:0 0 18px;}
.pv-contact-naam span{display:block;font-weight:500;color:var(--gray-600);font-size:14px;margin-top:2px;}
.pv-contact-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.pv-contact-grid h3{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gray-600);font-weight:700;margin:0 0 6px;font-family:var(--font-body);}
.pv-contact-grid p{margin:0;font-size:14.5px;line-height:1.7;color:var(--ink);}
.pv-contact-grid a{color:#2B7F1A;text-decoration:underline;text-underline-offset:3px;}
.pv-lijst{margin:0 0 16px;padding-left:22px;color:var(--gray-600);font-size:15.5px;line-height:1.8;}
.pv-lijst li{margin-bottom:8px;}
.av-artikel > p{color:var(--gray-600);font-size:15.5px;line-height:1.75;margin:0 0 14px;}
@media (max-width:900px){
.pv-contact-grid{grid-template-columns:1fr 1fr;}
.av-artikel > p,.pv-intro,.pv-lijst{text-align:left;hyphens:manual;}
}
@media (max-width:600px){
.pv-contact-grid{grid-template-columns:1fr;}
.pv-contact{padding:20px 22px;}
}

/* ==========================================================================
   Koppeling met de blokken van de WordPress-editor.
   De opmaak hierboven gaat uit van de oorspronkelijke opmaak van de site;
   de blokken voegen hier en daar een extra omhulsel toe. Dat wordt hier
   rechtgezet, zodat de pagina er precies hetzelfde uitziet.
   ========================================================================== */

.wp-block-group{min-width:0;}

figure.wp-block-image{margin:0;}
.wp-block-image img{display:block;max-width:100%;height:auto;}

.member-photo .wp-block-image{width:100%;height:100%;margin:0;}
.member-photo .wp-block-image img{width:100%;height:100%;object-fit:cover;}

.route-regel{margin:0;}

/* knoppen: de klassen staan op het omhulsel, de opmaak hoort bij de link */
.wp-block-buttons{margin:0;}
.hero-ctas .wp-block-buttons,.cta-inner .wp-block-buttons{margin:0;}
.wp-block-button.btn{display:inline-flex;padding:0;border:0;border-radius:0;background:none;}
.wp-block-button.btn:hover{transform:none;}
.wp-block-button.btn-primary,.wp-block-button.btn-ghost-dark,.wp-block-button.btn-ghost-light{background:none;border-color:transparent;filter:none;}
.wp-block-button.btn>.wp-block-button__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:13px 26px;
  border-radius:10px;
  font-weight:600;
  font-size:14.5px;
  letter-spacing:.01em;
  border:1px solid transparent;
  background:none;
  color:inherit;
  cursor:pointer;
  transition:transform .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.wp-block-button.btn>.wp-block-button__link:hover{transform:translateY(-2px);}
.wp-block-button.btn-primary>.wp-block-button__link{background:var(--btn-gradient);color:#fff;}
.wp-block-button.btn-primary>.wp-block-button__link:hover{filter:brightness(1.06);}
.wp-block-button.btn-ghost-dark>.wp-block-button__link{border-color:rgba(255,255,255,.4);background:rgba(255,255,255,.06);color:#fff;}
.wp-block-button.btn-ghost-dark>.wp-block-button__link:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.6);}
.wp-block-button.btn-ghost-light>.wp-block-button__link{border-color:rgba(22,35,63,.22);color:var(--ink);}
.wp-block-button.btn-ghost-light>.wp-block-button__link:hover{background:rgba(22,35,63,.05);}

/* lijsten houden hun eigen opmaak, ook met de blokklasse erbij */


/* nummering in de algemene voorwaarden staat als alinea in het raster */
.av-lid p.av-lid-nr{font-size:14px;font-weight:700;color:var(--gray-600);margin:0;padding-top:2px;}

/* losse stukken html die een blok zijn geworden */
.wp-block-html{margin:0;}

/* tekstpagina's: de kop scrolt mee met de pagina in plaats van vast te staan */
.sv-tekstpagina .site-header{position:static;background:rgba(14,25,46,.94);backdrop-filter:blur(10px);}
.sv-tekstpagina .site-header::before{display:none;}
.sv-tekstpagina .legal-hero{padding-top:60px;}

/* losse opmaak die in de oude site als style-attribuut in de pagina stond */
.kop-middel{margin:0 0 22px;font-size:clamp(26px,3vw,34px);}
.intro-onder{margin-top:16px;color:var(--gray-600);font-size:16px;max-width:640px;}
.knop-ruimte{margin-top:22px;}

/* onderdelen die van een span een alinea zijn geworden, gedragen zich als voorheen */
.member-bio p.member-role{margin:0;font-size:12.5px;letter-spacing:.02em;text-transform:none;}
.step-top p.step-num{margin:0;font-size:42px;line-height:1;flex:0 0 auto;}
.step-top p.step-rule{margin:0;}
.values-intro p.route-regel,.footer-col p.route-regel{margin:0;}


/* ---------- afdrukken ---------- */
@media print{
    .site-header,footer,.skip-link,.av-download,.av-index,.scroll-cue{display:none !important;}
    body{background:#fff;color:#16233F;}
    .legal-hero{background:#fff !important;color:#16233F;padding:0 0 18px;border-bottom:2px solid #0E192E;}
    .legal-hero h1{color:#16233F;font-size:26px;}
    .legal-hero p{color:#5B6472;}
    .legal-body{padding:18px 0 0;}
    .wrap{padding:0;max-width:none;}
    .av-top{margin-bottom:18px;}
    .av-artikel{margin-bottom:20px;break-inside:avoid;}
    .av-artikel h2{font-size:15px;margin-bottom:10px;}
    .av-nr{color:#057485;}
    .av-lid{margin-bottom:8px;}
    .av-lid p,.av-sublijst,.av-intro,.av-definities dd{font-size:10.5pt;line-height:1.45;color:#16233F;text-align:left;}
    .av-lid-nr{font-size:10pt;color:#5B6472;}
    .av-definities dt{font-size:10.5pt;}
    .av-slot{font-size:9pt;}
    a{color:#16233F;text-decoration:none;}
  }


/* Tekstpagina's: geen vervaging op de kop, anders valt het uitklapmenu op de telefoon buiten het scherm */
.sv-tekstpagina .site-header{-webkit-backdrop-filter:none;backdrop-filter:none}

/* Ingelogde beheerders: kop onder de WordPress-beheerbalk */
body.admin-bar .site-header{top:32px}
@media(max-width:782px){body.admin-bar .site-header{top:46px}}
@media(max-width:600px){body.admin-bar .site-header{top:0}}

/* Knop onderaan de pagina: gecentreerd, zoals in het oorspronkelijke ontwerp */
.cta-inner .wp-block-buttons{justify-content:center}