/* Definitieve responsive laag: geladen na alle componentstijlen. */
html,body{max-width:100%;overflow-x:hidden}img{max-width:100%}button,input,select,textarea{font:inherit}button,a{-webkit-tap-highlight-color:transparent}.project-card-info strong,.blog-card-copy h3,.faq-item summary span:nth-child(2){overflow-wrap:anywhere}

@media (max-width:1024px){
  .site-header{padding-left:24px;padding-right:24px}.site-header nav{gap:22px}
  .pricing{gap:18px}.price-card{padding:36px 28px}.popular{right:22px}
  .projects-heading{gap:38px}.faq-section{gap:55px}
}

@media (max-width:850px){
  html{scroll-padding-top:72px}.site-header{height:72px;padding:0 18px}.site-header .brand-custom{height:56px;max-width:170px}.site-header .brand-default{transform:scale(1.35)}.site-header .outline-button{min-height:44px;padding:10px 15px;gap:8px}
  .hero{min-height:820px;padding:132px 20px 125px}.hero .eyebrow{margin-bottom:46px;white-space:nowrap}.hero-grid{display:block}.hero-copy{position:relative;width:100%;height:auto}.hero h1{max-width:690px;font-size:clamp(48px,11.5vw,76px);line-height:.96;letter-spacing:-3px}.showcase{width:calc(100% + 40px);height:330px;margin:28px -20px 0;overflow:hidden}.showcase .laptop-custom-image{width:100%;max-width:none;height:310px;right:0;top:0;object-fit:cover;object-position:right center;-webkit-mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.7) 22%,#000 42%);mask-image:linear-gradient(90deg,transparent,rgba(0,0,0,.7) 22%,#000 42%)}.showcase .laptop{width:470px;right:-105px;top:15px}.hero .hero-bottom-cta{bottom:58px;max-width:calc(100% - 40px);min-width:0;width:max-content}.hero .scroll-cue{bottom:18px}
  .services-transition .services{padding-left:20px;padding-right:20px}.services article{padding:28px 0 48px}.services article+article{border-top:1px solid var(--line)}.services h3{margin-top:30px;font-size:31px}
  .pricing-heading{padding-left:20px;padding-right:20px}.pricing{padding-left:20px;padding-right:20px}.price-card{min-height:430px;padding:34px 28px}.price{font-size:56px}
  .services-transition+.intro{padding-left:22px;padding-right:22px}.about-visual{max-width:620px}.about-card{right:0}
  .projects-section{padding-left:20px;padding-right:20px}.projects-heading h2{font-size:clamp(42px,9vw,60px)}.projects-heading>p{max-width:600px}.project-card,.project-card:first-child:nth-last-child(n+3){min-height:380px}
  .faq-section{padding-left:20px;padding-right:20px}.faq-heading>span{max-width:620px}
  .blog-section{padding-left:20px;padding-right:20px}.blog-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.blog-card:last-child:nth-child(odd){grid-column:1/-1}.blog-card{min-height:360px}
  footer{padding:38px 20px}.settings-trigger{right:14px;bottom:14px;min-height:44px}
  .settings-page{width:min(100% - 28px,1180px);padding-top:48px}.settings-page-header{min-height:68px;padding:0 16px}.settings-page-header .brand-custom{max-width:135px}.settings-nav{grid-template-columns:repeat(3,minmax(0,1fr));padding:12px}.settings-nav a{text-align:center;padding:11px 6px}.settings-card{border-radius:18px}.upload-field{padding-left:14px;padding-right:14px;text-align:center}
}

@media (max-width:600px){
  .site-header .brand-custom{height:52px;max-width:145px}.site-header .brand-default{transform:scale(1.2)}.site-header .outline-button{font-size:11px;padding:9px 12px}
  .hero{min-height:760px;padding-top:116px}.hero .eyebrow{font-size:8px;letter-spacing:1.15px}.hero .eyebrow b{margin:0 4px}.hero h1{font-size:clamp(44px,13.2vw,62px);line-height:.98;letter-spacing:-2.5px}.showcase{height:285px}.showcase .laptop-custom-image{height:270px}.showcase .laptop{width:420px;right:-120px}.hero .primary-button{padding:14px 18px;font-size:12px}
  .pricing-heading h2{font-size:36px;letter-spacing:-1.5px}.price-card{min-height:400px;padding:30px 23px}.popular{top:28px;right:20px}.price{margin-top:58px;font-size:52px}.price-copy{font-size:16px}.price-card a{min-height:54px;padding:14px 18px}
  .services-transition+.intro{padding-top:78px;padding-bottom:95px}.about-copy h2{font-size:clamp(47px,14vw,58px);line-height:.98}.about-copy .intro-copy{padding-top:30px}.about-photo{height:min(570px,125vw)}.about-card{width:calc(100% - 12px);margin:-62px 6px 0;padding:25px 21px}.about-card>p{font-size:10px}.about-card h3{font-size:21px}.about-card>div{line-height:1.7}.about-card footer{gap:24px}
  .projects-section{padding-top:75px}.projects-heading{margin-bottom:36px}.projects-heading h2{font-size:40px;line-height:1.05;letter-spacing:-2px}.project-card,.project-card:first-child:nth-last-child(n+3){min-height:300px}.project-card-info{padding:12px 15px}.project-card-info strong{font-size:16px}
  .projects-faq-transition a{grid-template-columns:32px minmax(0,auto) 32px;gap:8px}.projects-faq-transition strong{white-space:normal;text-align:center;line-height:1.5}
  .faq-section{gap:38px;padding-bottom:82px}.faq-heading h2{font-size:42px;letter-spacing:-2px}.faq-heading>span{font-size:15px}.faq-item summary{grid-template-columns:25px minmax(0,1fr) 32px;gap:8px;font-size:16px;line-height:1.35}.faq-answer{padding-left:33px;font-size:15px}
  .contact-section{padding-left:12px;padding-right:12px}.contact-card{padding:28px 20px}.contact-copy h2{font-size:40px}.contact-copy>span{font-size:15px}.contact-actions>a:not(.contact-email){min-height:54px;padding:0 15px}.contact-actions>p{font-size:12px}
  .blog-section{padding-top:72px;padding-bottom:82px}.blog-heading{gap:24px;margin-bottom:30px}.blog-heading h2{font-size:36px}.blog-heading span{display:block;font-size:15px;line-height:1.55}.blog-grid{grid-template-columns:1fr}.blog-card:last-child:nth-child(odd){grid-column:auto}.blog-card{min-height:340px}.blog-card-image{height:205px}
  footer{gap:16px;padding-bottom:95px}footer p{margin:0}.settings-trigger{padding:11px 14px;font-size:12px}
  .settings-page-header .brand-default{transform:none}.settings-page-header .back-link{font-size:13px}.settings-page{width:calc(100% - 20px);padding:38px 0 70px}.settings-intro{margin-bottom:34px}.settings-intro h1{font-size:46px}.settings-intro span{font-size:16px;line-height:1.5}.settings-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}.settings-card{padding:22px 16px}.settings-card>header h2{font-size:29px}.settings-card>header span{display:block;line-height:1.5}.project-form-grid{grid-template-columns:1fr}.profile-reset-row,.control-actions{align-items:stretch;flex-direction:column}.profile-reset-row .reset-button,.control-actions button{min-height:44px}.settings-faq-editor-actions{gap:12px}.settings-faq-editor-actions button{min-height:44px;text-align:left}.settings-blog-item{align-items:flex-start}.settings-message{bottom:8px}.upload-field small{line-height:1.4}
}

@media (max-width:390px){
  .site-header{padding-left:13px;padding-right:13px}.site-header .brand-custom{max-width:118px}.site-header .brand-default{transform:scale(1.05)}.site-header .outline-button{max-width:128px;line-height:1.15;text-align:center}
  .hero{padding-left:16px;padding-right:16px}.hero .eyebrow{font-size:7.5px;letter-spacing:.85px}.hero h1{font-size:43px}.showcase{width:calc(100% + 32px);margin-left:-16px;margin-right:-16px}.hero .hero-bottom-cta{max-width:calc(100% - 28px)}
  .about-copy h2{font-size:45px}.about-card h3{font-size:19px}.about-card footer{justify-content:space-between}
  .faq-heading h2,.contact-copy h2,.blog-heading h2{font-size:36px}.settings-page-header .brand{font-size:16px}.settings-page-header .back-link{font-size:12px}
}

@media (hover:none){.services article:hover,.price-card:hover,.project-card:hover,.blog-card:hover,.contact-card:hover,.about-visual:hover .about-photo,.about-visual:hover .about-card,.settings-trigger:hover{transform:none}.blog-card:hover .blog-card-image{transform:none;filter:none}}