/* Globale resets, responsive regels (<=640px) en hover-states */
html,body{margin:0;background:#fff;scroll-behavior:smooth}
body{font-family:'Poppins',sans-serif;color:#18222e;-webkit-font-smoothing:antialiased}
a{color:#1f3a5f;text-decoration:none}
a:hover{text-decoration:underline}
.hf-burger{display:none}
@media (max-width:1023px){.hf-navlink{display:none!important}.hf-burger{display:flex!important}.hf-hdr{padding:10px 16px!important;gap:12px!important}.hf-logo{height:22px!important}.hf-cta{padding:8px 14px!important;font-size:13px!important}.hf-step{padding:16px 0!important;gap:14px!important}.hf-seg{top:60px!important;bottom:-12px!important}.hf-mock{padding-left:56px;max-width:none!important}}
@media (max-width:1023px){
.m-hero{padding:28px 20px 36px!important;gap:28px!important}
.m-photo{aspect-ratio:auto!important;overflow:visible!important;border-radius:0!important}
.m-img{position:relative!important;inset:auto!important;height:300px!important;border-radius:18px!important;display:block}
.m-card{position:relative!important;left:auto!important;right:auto!important;bottom:auto!important;margin:-64px 12px 0 auto!important;max-width:250px!important}
.m-sec1{padding:44px 20px 20px!important;gap:24px!important}
.m-sec1 > div{gap:20px!important}
.m-sec2{padding:36px 20px 16px!important;gap:16px!important}
.m-sec3{padding:36px 20px 40px!important;gap:24px!important}
.m-sec4{padding:0 20px 32px!important;gap:16px!important}
.m-tiles{grid-template-columns:1fr 1fr!important;gap:10px!important}
.m-tiles > div{padding:12px!important}
.m-tiles > div:last-child{grid-column:1 / -1}
.m-pool{padding:22px!important;gap:20px!important;border-radius:16px!important}
.m-wa{padding:24px!important;gap:20px!important;border-radius:16px!important}
.m-wa > a{display:none!important}
.m-foot{padding:20px!important;flex-direction:column!important;align-items:flex-start!important;gap:12px!important}
.m-foot > div{flex-direction:column!important;gap:8px!important}
.m-ftop{flex-direction:column!important;align-items:stretch!important;gap:18px!important}.m-flogo{height:22px!important;align-self:flex-start}.m-ficons{justify-content:flex-start!important;gap:8px!important}.m-fib{width:40px!important;height:40px!important}.m-fchip{margin-left:auto;height:40px!important;padding:0 9px!important;gap:8px!important}.m-fchip img:first-child{height:28px!important}.m-fchip img:last-child{height:21px!important}.m-foot2{padding:36px 20px 28px!important;gap:24px!important}
.m-legal nav{gap:6px 18px!important}
}

/* Hover-states (uit ontwerp) */
footer a[aria-label]{transition:background .15s,border-color .15s,transform .15s}
footer a[aria-label]:hover{background:#f0623a!important;border-color:#f0623a!important;transform:translateY(-2px);text-decoration:none}
footer nav a:hover{color:#fff!important;text-decoration:underline}

#hf-menu[hidden]{display:none!important}

/* Ankers blijven zichtbaar onder de vaste navigatie. */
section[id]{scroll-margin-top:90px}
a:focus-visible,button:focus-visible{outline:2px solid #F0623A;outline-offset:3px}

/* Breedtes blijven begrensd bij roteren; iOS vergroot tekst niet automatisch. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;overflow-x:clip}
body{width:100%;min-width:0;overflow-x:clip}
*,*::before,*::after{box-sizing:border-box}
body>div,.m-hero,.m-sec2{width:100%;min-width:0}
.m-hero>*,.hf-step>*,.m-pool>*,.m-wa>*,.m-sec1>div>*,.m-sec3>div>*{min-width:0}
img{max-width:100%}
@media(max-width:1023px){
  .m-hero,.hf-step,.m-pool,.m-wa{grid-template-columns:minmax(0,1fr)!important}
  .m-sec1>div,.m-sec3>div:not(.m-tiles){grid-template-columns:minmax(0,1fr)!important}
  .m-hdr nav,.hf-hdr nav{gap:12px!important;min-width:0}
  .hf-burger{flex:none}
  .m-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}
/* Liggende telefoon: compacte navigatie, evenwichtige kolommen, geen QR-paneel. */
@media(min-width:700px) and (max-width:1023px) and (max-height:600px){
  .m-hero{grid-template-columns:repeat(2,minmax(0,1fr))!important;align-items:start;gap:28px!important}
  .m-hero h1{font-size:36px!important}
  .m-hero p{font-size:16px!important}
  .m-img{height:270px!important}
  .m-sec1>div,.m-sec3>div:not(.m-tiles){grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .m-sec1 h3,.m-sec3 h3{font-size:18px!important}
  .hf-step{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
  .hf-mock{padding-left:0;max-width:100%!important}
  .m-tiles{grid-template-columns:repeat(5,minmax(0,1fr))!important}
  .m-tiles>div:last-child{grid-column:auto}
  .m-pool{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:24px!important}
}
@media(max-width:374px){
  .hf-hdr{padding:10px 12px!important;gap:8px!important}
  .hf-hdr nav{gap:8px!important}
  .hf-logo{height:18px!important}
  .hf-cta{font-size:12px!important;padding:8px 10px!important}
}