/* Mobiele optimalisatie: desktop blijft ongewijzigd. */
.menu-toggle{display:none}.visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

@media (max-width:720px){
  body{overflow-x:hidden}
  .container{padding-right:20px;padding-left:20px}
  .topbar{padding:8px 20px;font-size:12px;text-align:left}
  .nav{height:72px}
  .nav-inner{min-height:72px;gap:8px}
  .brand{min-width:0}
  .brand img{width:128px;height:44px}
  .nav-cta{margin-left:auto;padding:10px 11px;border-radius:10px;font-size:12px;line-height:1.2;white-space:nowrap}
  .menu-toggle{display:grid;flex:0 0 44px;width:44px;height:44px;padding:11px 10px;place-content:center;gap:5px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--forest);cursor:pointer}
  .menu-toggle span:not(.visually-hidden){display:block;width:21px;height:2px;border-radius:2px;background:currentColor;transition:transform .18s ease,opacity .18s ease}
  .nav-links{position:absolute!important;z-index:30;top:calc(100% + 8px);right:20px;left:20px;display:flex!important;flex-direction:column;align-items:stretch;gap:0;padding:8px;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 36px rgba(11,56,36,.16);opacity:0;visibility:hidden;transform:translateY(-8px);pointer-events:none;transition:opacity .18s ease,transform .18s ease,visibility .18s}
  .nav.nav-open .nav-links{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}
  .nav.nav-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.nav-open .menu-toggle span:nth-child(2){opacity:0}
  .nav.nav-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .nav-links a{display:flex;align-items:center;min-height:48px;padding:12px 14px;border-bottom:1px solid var(--line);border-radius:9px;font-size:15px}
  .nav-links a:last-child{border-bottom:0}
  .nav-links a.active{background:#f1f7ee;border-bottom-color:transparent}
  .home-hero,.page-hero{padding:46px 0 42px}
  .home-layout,.hero-layout{gap:28px}
  .home-hero h1,.page-hero h1{margin:13px 0 16px;font-size:clamp(40px,12vw,52px);line-height:1.05;letter-spacing:-.055em}
  .lead{margin:0;font-size:17px;line-height:1.55}
  .actions{gap:10px;margin-top:24px}
  .actions .button{min-height:50px}
  .hero-shape{min-height:238px;border-radius:20px}
  .hero-card{right:16px;bottom:16px;left:16px;max-width:none;padding:15px 16px}
  .section,.home-page .section,.results-page .section,.services-page .section,.about-page .section{padding:48px 0}
  .section-tight,.results-page .section-tight{padding:26px 0}
  .section-head{margin-bottom:24px}
  .section h2{font-size:32px}
  .section-head p{font-size:16px}
  .grid-4,.grid-3,.detail-grid,.result-grid{gap:16px}
  .card{padding:21px 18px}
  .service-image{height:170px;margin:-3px -3px 18px}
  .detail-banner,.services-page .detail-banner{height:188px}
  .detail-content,.services-page .detail-content{padding:22px 18px}
  .detail-content h3{font-size:22px}
  .mini-steps{gap:14px;margin-bottom:22px}
  .mini-step{grid-template-columns:25px 1fr;gap:9px}
  .price-note{padding:14px}
  .seo-benefits{padding:0}
  .seo-benefits-grid,.home-page .seo-benefits-grid,.services-page .service-assurances .seo-benefits-grid{grid-template-columns:1fr!important;border-radius:0}
  .seo-benefits-grid article,.home-page .seo-benefits-grid article,.services-page .service-assurances .seo-benefits-grid article{padding:18px 20px!important;border-right:0!important;border-bottom:1px solid var(--line)!important}
  .seo-benefits-grid article:last-child{border-bottom:0!important}
  .seo-benefit-icon{flex-basis:40px;width:40px;height:40px}
  .work-area-compact,.home-page .work-area-compact{margin-top:28px;padding:22px 20px}
  .area-tags{gap:7px}
  .area-tags span{padding:7px 10px}
  .quick-cta{gap:16px;padding:20px}
  .quick-cta .button{min-height:50px;margin-top:0}
  .pill-row{padding:0;border-radius:14px}
  .pill,.pill:nth-child(n+3){padding:16px 18px}
  .result-card{border-radius:16px}
  .result-compare--single{aspect-ratio:16/10}
  .result-card-content{padding:19px}
  .package-grid{gap:16px}
  .pakket-section .package{min-height:292px;padding-top:22px}
  .pakket-section .package.featured{padding-top:48px}
  .feature-band{padding:28px 22px;border-radius:20px;gap:24px}
  .feature-band h2{font-size:31px}
  .footer{padding:38px 0 22px}
  .footer-grid{gap:22px}
  .footer-bottom{margin-top:24px;padding-top:15px}
}
@media (max-width:390px){
  .brand img{width:112px}
  .nav-cta{padding:9px 8px;font-size:11px}
  .menu-toggle{flex-basis:40px;width:40px;height:40px}
}

/* Mobiele correcties: geen horizontale overflow en een rustige header. */
.whatsapp-float{display:none}
@media (max-width:720px){
  html,body{width:100%;max-width:100%;overflow-x:hidden}
  @supports (overflow:clip){html,body{overflow-x:clip}}
  main,section,.container,.home-layout,.hero-layout,.package-grid,.pakket-section .package{min-width:0;max-width:100%}
  .nav-cta{display:none!important}
  .menu-toggle{margin-left:auto}
  .home-layout,.hero-layout{grid-template-columns:minmax(0,1fr)}
  .home-hero h1,.page-hero h1,.section h2,.package h3{max-width:100%;overflow-wrap:anywhere}
  .section,.home-page .section,.results-page .section,.services-page .section,.about-page .section{padding-top:42px;padding-bottom:42px}
  .section.soft,.services-page .section.soft{padding-top:36px;padding-bottom:36px}
  .quick-cta{margin-top:0}
  .package-page .page-hero h1{font-size:clamp(38px,10.5vw,48px)}
  .pakket-section .package-grid{width:100%;grid-template-columns:minmax(0,1fr)!important}
  .pakket-section .package{display:flex!important;width:100%;min-height:0!important;padding:22px 16px 0!important;overflow:hidden}
  .pakket-section .package.featured{padding-top:52px!important;transform:none!important}
  .pakket-section .package h3{order:1;min-height:0!important;margin:0 0 16px!important}
  .pakket-section .package .package-icon{order:2;width:100%;height:128px!important;margin:0 0 18px!important;overflow:visible}
  .pakket-section .package .package-icon img{display:block;width:100%;height:100%;object-fit:contain}
  .pakket-section .package .price-placeholder{position:static!important;right:auto!important;bottom:auto!important;left:auto!important;order:3;margin:0 0 24px!important}
  .pakket-section .package .package-footer{position:static!important;right:auto!important;bottom:auto!important;left:auto!important;order:4;width:auto;height:48px!important;margin:auto -16px 0!important;border-radius:0;place-items:center}
  .pakket-section .package.featured .package-tag{top:0!important;right:0!important;left:0!important;border-radius:11px 11px 0 0}
  .whatsapp-float{position:fixed;z-index:80;right:max(16px,env(safe-area-inset-right));bottom:max(18px,env(safe-area-inset-bottom));display:block;filter:drop-shadow(0 10px 18px rgba(5,39,24,.28));touch-action:pan-y;transition:opacity .2s ease,transform .2s ease}
  .whatsapp-float.is-dismissed{opacity:0;transform:translate(82px,18px) scale(.8);pointer-events:none}
  .whatsapp-float__link{display:grid;width:60px;height:60px;place-items:center;border:2px solid #fff;border-radius:50%;background:#25d366;color:#fff}
  .whatsapp-float__link svg{width:31px;height:31px;fill:currentColor}
  .whatsapp-float__dismiss{position:absolute;top:-8px;right:-6px;z-index:2;display:grid;width:25px;height:25px;padding:0;place-items:center;border:2px solid #fff;border-radius:50%;background:var(--forest);color:#fff;font:700 16px/1 Arial,sans-serif;cursor:pointer}
}
@media (max-width:390px){
  .package-page .page-hero h1{font-size:38px}
}

/* Definitieve mobiele ritme-correcties: pakketkaarten en WhatsApp-CTA. */
@media (max-width:720px){
  /* Een lange pakkettitel blijft als geheel leesbaar, zonder losse interpunctie. */
  .package-page .page-hero h1{
    font-size:clamp(31px,9.8vw,48px);
    line-height:1.04;
    overflow-wrap:normal;
    word-break:normal;
    hyphens:none;
  }
  .package-page .page-hero h1 em{
    display:inline-block;
    white-space:nowrap;
    letter-spacing:-.045em;
  }

  /* Vaste verticale volgorde: titel, illustratie, prijs en onderbalk. */
  .pakket-section .package{
    display:flex!important;
    flex-direction:column!important;
    min-height:0!important;
  }
  .pakket-section .package h3{
    flex:0 0 auto;
    margin:0 0 18px!important;
  }
  .pakket-section .package .package-icon{
    position:static!important;
    flex:0 0 150px;
    width:100%;
    height:150px!important;
    margin:0 0 26px!important;
    overflow:hidden;
  }
  .pakket-section .package .package-icon img{
    position:static!important;
    display:block;
    width:100%;
    height:100%;
    object-fit:contain;
    object-position:center;
  }
  .pakket-section .package .price-placeholder{
    position:static!important;
    flex:0 0 auto;
    width:100%;
    margin:0 0 32px!important;
    padding:8px 0 0;
    line-height:1.1;
    text-align:center;
    clear:both;
  }
  .pakket-section .package .price-placeholder:after{
    margin-top:7px;
  }
  .pakket-section .package .package-footer{
    position:static!important;
    flex:0 0 48px;
    width:auto;
    height:48px!important;
    margin:auto -16px 0!important;
  }

  /* Elke WhatsApp-knop krijgt lucht ten opzichte van de begeleidende tekst. */
  .quick-cta .button{
    margin-top:16px!important;
  }
}


/* Uniforme mobiele hero-uitlijning en typografie. */
@media (max-width:720px){
  .home-hero .container,
  .page-hero .container,
  .home-hero .home-layout,
  .page-hero .hero-layout{
    text-align:left!important;
  }
  .home-hero .eyebrow,
  .page-hero .eyebrow,
  .home-hero .lead,
  .page-hero .lead{
    margin-right:0!important;
    margin-left:0!important;
    text-align:left!important;
  }
  .home-hero h1,
  .page-hero h1,
  .package-page .page-hero h1{
    margin:13px 0 16px;
    font-size:clamp(32px,10vw,44px)!important;
    line-height:1.06!important;
    letter-spacing:-.05em;
    text-align:left!important;
  }
  .home-hero .actions,
  .page-hero .actions{
    justify-content:flex-start!important;
  }
}


/* Extra ademruimte voor prijsblokken in mobiele onderhoudspakketten. */
@media (max-width:720px){
  .pakket-section .package .package-icon{
    margin-bottom:40px!important;
  }
  .pakket-section .package .price-placeholder{
    margin-bottom:46px!important;
    padding-top:10px;
  }
}


/* Mobiele bankillustraties volledig zichtbaar houden. */
@media (max-width:720px){
  .pakket-section .package .package-icon{
    overflow:visible!important;
  }
  .pakket-section .package .package-icon img{
    object-fit:contain!important;
    object-position:center!important;
  }
}