@font-face{font-family:Outfit;src:url('assets/outfit-latin.woff2') format('woff2');font-display:optional;font-weight:100 900}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:6rem}body{margin:0;background:var(--neutral-0);color:var(--neutral-900);font:400 1rem/1.65 var(--font-body)}img{display:block;max-width:100%;height:auto}a{color:inherit}h1,h2,h3,p{margin-top:0}h1,h2,h3{font-family:var(--font-display)}
/* RESIDUAL-ONLY CSS START — use after native-design.json class controls. */

/* Keyboard and pointer feedback */
.skip-link:focus{top:1rem}
a:focus-visible,button:focus-visible{outline:3px solid var(--secondary-500);outline-offset:4px}
.site-menu a:hover,.footer-nav a:hover,.text-link:hover,.service-link:hover{color:var(--primary-600)}
.site-menu .nav-cta:hover{background:var(--primary-600);color:var(--neutral-0)}
.button{transition:background-color .2s,color .2s,transform .2s}
.button:hover{transform:translateY(-2px)}
.button-primary:hover{background:var(--primary-700)}
.story-chapter .text-link,.founder-copy>a,.section-more{ text-decoration-thickness:1px;text-underline-offset:.25rem }

/* Hero overlay keeps copy legible while the destination remains visible. */
.hero:after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,41,43,.82) 0%,rgba(3,41,43,.48) 42%,rgba(3,41,43,.06) 100%),linear-gradient(0deg,rgba(3,41,43,.24),transparent 52%)}

/* Desktop story: JavaScript enables this only above 1024px with motion allowed. */
.story-frame{grid-area:1/1;visibility:hidden;opacity:0;transition:opacity .6s ease,visibility .6s ease}
.story-enhanced .story-visual{position:sticky;top:calc((100svh - 35rem)/2);min-height:35rem;display:grid}
.story-enhanced .story-static-image{display:none}
.story-enhanced .story-frame{visibility:hidden;opacity:0}
.story-enhanced[data-active-scene="ontstaan"] .story-frame-samen,.story-enhanced[data-active-scene="reisvoorbeeld"] .story-frame-bereik{visibility:visible;opacity:1}

/* Native contact-form integration */
.contact-form-embed,.contact-form-embed form{min-width:0;max-width:100%}
.contact-form-embed form{display:grid;gap:1rem}
.contact-form-embed .jet-form-builder-row{display:block;min-width:0;max-width:100%}
.contact-form-embed .jet-form-builder__label,.contact-form-embed .jet-form-builder__field-wrap{display:block;width:100%;min-width:0;max-width:100%}
.contact-form-embed label{display:block;margin-bottom:.3rem}
.contact-form-embed input,.contact-form-embed textarea,.contact-form-embed select{box-sizing:border-box;width:100%;min-width:0;max-width:100%;min-height:3rem;padding:.8rem 1rem;border:1px solid var(--primary-100);background:var(--neutral-0);color:var(--neutral-900);font:inherit}
.contact-form-embed textarea{min-height:8rem}
.contact-form-embed button,.contact-form-embed input[type=submit]{width:max-content;min-height:3.2rem;padding:.8rem 1.4rem;border:0;background:var(--secondary-500);color:var(--neutral-900);font:500 1rem var(--font-body);cursor:pointer}

@media(max-width:700px){
  .site-menu.is-open{display:flex}
  .menu-toggle{display:flex;width:2.8rem;height:2.8rem;flex-direction:column;align-items:center;justify-content:center;gap:.38rem;border:1px solid var(--neutral-100);background:transparent}
  .menu-toggle span{width:1.1rem;height:1px;background:var(--primary-700)}
  .site-menu a{padding:.75rem 0}
  .site-menu .nav-cta{margin-top:.4rem;padding:.8rem 1rem;text-align:center}
  .hero:after{background:linear-gradient(90deg,rgba(3,41,43,.84),rgba(3,41,43,.35)),linear-gradient(0deg,rgba(3,41,43,.55),transparent 72%)}
  .journey-point{font-size:.8rem}
}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition-duration:.01ms!important;scroll-behavior:auto!important}
  .button:hover{transform:none}
}

/* Structural state only; all base geometry lives in CrocoBuilder class styles. */
.story-enhanced .story-layout{display:grid}
/* Contact copy uses the light neutral surface defined by the native contact class. */
.contact .contact-copy h1,.contact .contact-copy p{color:var(--neutral-900)}
.contact .contact-copy h1{max-inline-size:16ch;line-height:1.04}
.contact .contact-copy .detail-lead{max-inline-size:45ch}
.detail-step-links { & a {text-decoration:none; text-underline-offset:.25em} & a:hover{text-decoration:underline} }
.footer-nav { & a {text-decoration:none} & a:hover{text-decoration:underline} }
@media(max-width:1024px){.story-layout{display:block}.story-chapter{max-inline-size:none;min-block-size:0;margin-block-end:3rem}.story-static-image{margin-block-end:1.5rem}.story-route-progress{display:none}}

/* Small details that need pseudo-elements or interaction state. Base geometry is in native-design.json. */
.service-route span+span:before{content:'→';padding-right:.55rem;color:var(--secondary-500)}
.detail-step-links a{padding:.35rem 0;border-left:2px solid transparent;transition:color .2s,border-color .2s,padding .2s}
.detail-step-links a.is-active{padding-left:.7rem;border-color:var(--secondary-500);color:var(--primary-700);font-weight:600}
@media(max-width:700px){.service-route span+span:before{padding-right:.3rem}.detail-step-links a.is-active{padding-left:.45rem}}
@media(prefers-reduced-motion:reduce){.detail-step-links a{transition:none}}