/* Approved desktop hero. Shared by the homepage and review. */
@font-face{font-family:HeroProposalAnton;src:url('/ontwerp/hero-pijlen/anton.woff2') format('woff2');font-display:block}
.hero[data-hero-content] .hero-copy{position:absolute;z-index:2;left:2.7%;bottom:11%;width:48%;color:#fff}
.hero[data-hero-content] .hero-copy h1{font-family:HeroProposalAnton,Impact,sans-serif;font-size:clamp(28px,4.4vw,88px);font-weight:400;font-style:italic;line-height:1.04;letter-spacing:-.025em;margin:0;text-shadow:0 3px 12px #001e6744}
.hero[data-hero-content] .hero-copy h1 span,.hero[data-hero-content] .hero-copy h1 em{display:block;white-space:nowrap}
.hero[data-hero-content] .hero-copy h1 em{color:#d2fa20;font-style:inherit}
.hero[data-hero-content] .hero-copy p{font-size:clamp(12px,1.3vw,24px);font-weight:600;margin:12px 0 16px;white-space:nowrap;color:white}
.hero[data-hero-content] .cta{display:flex;gap:12px;align-items:center}
.hero[data-hero-content] .cta a{display:flex;align-items:center;gap:12px;justify-content:center;padding:14px 25px;border-radius:40px;font-size:clamp(11px,1vw,16px);font-weight:700;text-decoration:none;white-space:nowrap;box-shadow:0 4px 14px #032a7c30}
.hero[data-hero-content] .cta .primary{background:#d2fa20;color:#102b58;border:0}
.hero[data-hero-content] .cta .secondary{background:#f8fbff;color:#102b58;border:0}
.hero[data-hero-content] .arrow{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;flex:none}
.hero[data-hero-content] .fit-card{position:absolute;z-index:3;top:16%;right:2.7%;background:linear-gradient(130deg,#fff,#e9f3ff);border:1px solid #d3e8ff;box-shadow:0 8px 22px #05267825;display:flex;align-items:center;gap:12px;padding:17px 16px;border-radius:17px;text-decoration:none;color:#102b58;max-width:27%}
.hero[data-hero-content] .fit-card strong{display:block;font-size:clamp(12px,1.2vw,21px);white-space:nowrap}
.hero[data-hero-content] .fit-card small{display:block;font-size:clamp(10px,.95vw,16px);line-height:1.5;margin-top:5px;font-weight:600}
.hero[data-hero-content] .fit-card>.arrow{align-self:flex-end;width:17px}
.hero[data-hero-content] .spark{width:30px;height:32px;flex:none;fill:none;stroke:#075bff;stroke-width:2.3;stroke-linejoin:round}
.hero-proposal-note{position:fixed;bottom:6px;right:8px;z-index:9999;background:#fffef5f2;color:#344763;padding:8px 12px;border:1px solid #d9e3ef;border-radius:8px;font:11px Arial;pointer-events:none}

/* Desktop: preserve current hero crop and the approved text position. */
.hero[data-hero-content] .hero-copy{left:0;top:0;bottom:auto;width:38%;height:76%;display:flex;align-items:center;justify-content:center}
.hero[data-hero-content] .hero-message{width:max-content;flex:none}
.hero[data-hero-content] .hero-copy p{margin-bottom:0}
.hero[data-hero-content]>.cta{position:absolute;z-index:2;left:19%;bottom:11%;transform:translateX(-50%)}
.hero[data-hero-content] .fit-card{left:87%;top:20%;right:auto;transform:translate(-50%,-50%)}

@media(max-width:1100px){.hero[data-hero-content] .hero-copy,.hero[data-hero-content]>.cta,.hero[data-hero-content] .fit-card{display:none}}

/* Approved tablet layout. */
@media(min-width:601px) and (max-width:1100px){
 .hero[data-hero-content]{aspect-ratio:auto;height:clamp(240px,31vw,325px);background:#073da5}
 .hero[data-hero-content] .hero-context{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mask-image:none;-webkit-mask-image:none}
 .hero[data-hero-content] .hero-copy{display:flex;left:0;top:0;width:48%;height:68%;padding:0 18px;box-sizing:border-box}
 .hero[data-hero-content] .hero-message{width:100%;text-align:left}
 .hero[data-hero-content] .hero-copy h1{font-size:clamp(28px,4.1vw,45px);line-height:1.06}
 .hero[data-hero-content] .hero-copy p{font-size:clamp(11px,1.7vw,15px);line-height:1.45;white-space:nowrap;margin:10px 0 0;max-width:none}
 .hero[data-hero-content]>.cta{display:flex;left:24%;top:auto;bottom:10%;gap:8px;transform:translateX(-50%)}
 .hero[data-hero-content] .cta a{font-size:clamp(9px,1.35vw,11px);padding:11px 10px;min-height:40px;box-sizing:border-box;gap:6px}
 .hero[data-hero-content] .cta .arrow{width:16px;height:16px}
 .hero[data-hero-content] .fit-card{display:none}
}

/* Approved phone hero — same rules as the approved v7 review. */
@media(max-width:600px){
 .hero[data-hero-content]{aspect-ratio:auto;height:280px;background:#073da5}
 .hero[data-hero-content] .hero-context{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;mask-image:none;-webkit-mask-image:none}
 .hero[data-hero-content] .hero-copy{display:block;left:0;top:13px;width:100%;height:auto;padding:0 16px;box-sizing:border-box}
 .hero[data-hero-content] .hero-message{width:100%;text-align:left}
 .hero[data-hero-content] .hero-copy h1{font-size:clamp(26px,7.8vw,36px);line-height:1.03}
 .hero[data-hero-content] .hero-copy p{font-size:12px;line-height:1.4;white-space:normal;margin:6px 0 0;max-width:none}
 .hero[data-hero-content]>.cta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);left:16px;right:16px;top:auto;bottom:10px;max-width:none;width:auto;transform:none;gap:8px}
 .hero[data-hero-content] .cta a{font-size:11px;min-height:36px;padding:8px 7px;box-sizing:border-box;gap:5px;box-shadow:none}
 .hero[data-hero-content] .cta .arrow{width:14px;height:14px}
 .hero[data-hero-content] .fit-card,.hero-proposal-note{display:none}
}
@media(min-width:401px) and (max-width:600px){.hero[data-hero-content]{height:75vw}}

.hero-choice-mobile{display:none}
@media(max-width:1100px){.hero-choice-desktop{display:none}.hero-choice-mobile{display:inline}}
