/* ===== responsive.css — tablet & mobiel ===== */
@media (max-width:1100px){
  nav.main{display:none}
  .burger{display:block}
  .grid{grid-template-columns:repeat(2,1fr)}
  .rgrid{grid-template-columns:repeat(2,1fr)}
  .fgrid{grid-template-columns:1fr 1fr}
}
@media (max-width:900px){
  .hero{grid-template-columns:1fr;text-align:center;padding-top:30px;padding-bottom:70px}
  .hero-art{order:-1;width:min(70vw,340px)}
  .hero h1{margin-bottom:28px}
  .about,.two{grid-template-columns:1fr}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .masonry{columns:2}
  .vals{grid-template-columns:1fr;gap:28px}
  .slides{min-height:300px}
}
@media (max-width:560px){
  .logo svg{height:36px}
  .topbar{font-size:10px;letter-spacing:.18em}
  .grid{gap:12px}
  .grid3{gap:12px}
  .grid3 .card h3,.grid .card h3{font-size:14px;letter-spacing:.12em}
  .masonry{columns:1}
  .rgrid{grid-template-columns:1fr}
  .fgrid{grid-template-columns:1fr}
  .ev{grid-template-columns:70px 1fr;gap:16px}
  .ev .btn{grid-column:1/-1;justify-self:start}
  .ev h3{font-size:26px}
  .dt b{font-size:42px}
  .btn{padding:14px 28px}
  .slides{min-height:340px}
  .copy{flex-direction:column}
}
@media (hover:none){
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv,.js .rv-img img,.js .hero .eyebrow,.js .hero .btn,.js .hero h1 .ch,.js .hero-art,.phero h1,.phero .label{opacity:1!important;transform:none!important;clip-path:none!important}
}