@media (max-width: 800px) {
  .shell { width: min(100% - 28px, 1120px); }
  nav { height: 76px; }
  .brand { font-size: 21px; }
  .hero { min-height: 625px; padding: 31px 22px 35px; align-items: end; }
  .hero:before { background: linear-gradient(0deg, rgba(10,38,66,.94) 0%, rgba(10,38,66,.72) 48%, rgba(10,38,66,.18) 100%), url("assets/nl-verduurzaamt-installateur.png") 72% center / cover; }
  .hero:after { width: 260px; height: 260px; right: -95px; top: -95px; }
  .hero h1, .page-hero h1 { font-size: 43px; line-height: 1.01; }
  .hero p, .page-hero p { font-size: 16px; margin: 18px 0 23px; }
  .hero .button, .cta .button, .quote .button { width: 100%; }
  .trust { display: grid; gap: 7px; margin-top: 20px; font-size: 12px; }
  .intro, .form-wrap { grid-template-columns: 1fr; padding: 68px 0 55px; gap: 25px; }
  .intro h2, .lead h2 { font-size: 38px; }
  .intro p { font-size: 16px; }
  .services { padding: 20px 0 65px; }
  .card { min-height: 240px; padding: 23px; }
  .card h3 { font-size: 27px; }
  .process, .journey { padding: 37px 22px; border-radius: 14px; }
  .process h2, .journey h2 { font-size: 37px; }
  .steps { gap: 28px; margin-top: 32px; }
  .journey { margin-bottom: 68px; }
  .stage { grid-template-columns: 67px 1fr; gap: 14px; padding: 24px 0; }
  .stage h3 { font-size: 24px; }
  .lead { margin: 68px auto 55px; padding: 0 3px; }
  .numbers { margin-bottom: 68px; }
  .number { padding: 27px; }
  .quote { padding-bottom: 68px; }
  .quote-photo { min-height: 265px; }
  .quote blockquote { font-size: 34px; }
  .form-wrap .intro { padding: 0; }
  .form-box { padding: 27px 21px; }
  .page-hero { min-height: 490px; padding: 31px 22px; }
  .page-hero:before { background: linear-gradient(0deg, rgba(10,38,66,.94) 0%, rgba(10,38,66,.68) 50%, rgba(10,38,66,.16) 100%), url("assets/nl-verduurzaamt-installateur.png") 72% center / cover; }
  .cta { padding: 68px 12px; }
  footer { padding: 29px 0 38px; }
  footer p { margin-top: 16px; line-height: 1.6; }
}