/* ============================================================
   SHIFT & LIFT — aanvullingen op stijl.css
   Alleen opmaak voor nieuwe onderdelen; kleuren en lettertypen
   komen uit de huisstijl (stijl.css).
   ============================================================ */

/* homepage: plaats onder de kop */
.hero-plaats{display:block; margin-top:14px; font-family:var(--body); font-size:clamp(16px,4.2vw,21px); font-weight:600; text-transform:none; letter-spacing:0; line-height:1.3; color:#c4c1bd}

/* lange woorden in koppen blijven binnen het scherm */
h1,h2{overflow-wrap:break-word}

/* stadspagina's: feitenblok in de donkere kop */
.feiten{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin:24px 0 26px; background:#262626; border:1px solid #262626; border-radius:var(--r); overflow:hidden; max-width:560px}
.feiten div{background:var(--ink-2); padding:12px 14px}
.feiten span{display:block; font-size:12.5px; color:#9a9793; line-height:1.3}
.feiten strong{display:block; font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:17px; color:#fff; line-height:1.15; margin-top:3px}

/* stadspagina's: inhoud */
.sub-h{font-size:22px; margin:30px 0 8px}
.wijkenlijst{color:var(--muted); max-width:66ch}
.let-op{background:var(--white); border:1px solid var(--line); border-left:4px solid var(--orange); border-radius:var(--r); padding:18px 20px; margin:22px 0}
.let-op h3{font-size:20px; margin:0 0 6px}
.let-op p{margin:0; color:var(--ink)}
.nabij{list-style:none; padding:0; margin:18px 0 0; display:flex; flex-wrap:wrap; gap:10px}
.nabij a{display:inline-block; padding:10px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--white); color:var(--ink); font-family:var(--display); font-weight:800; text-transform:uppercase; font-size:18px; text-decoration:none}
.nabij a:hover{border-color:var(--orange)}

/* menu altijd op één regel */
.nav a{white-space:nowrap}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto !important; transition:none !important; animation:none !important} }

/* menu + knop passen naast elkaar op kleinere laptops */
@media (min-width:900px) and (max-width:1240px){ .nav{gap:16px} }
/* ruimte tussen 'Liever bellen' en 'Bekijk onze diensten' */
.cta-call{margin-right:18px}

/* homepage: eigen bus in de hero (zoals op de flyer) */
.hero-bus{margin:26px -8px 0; position:relative; z-index:1}
.hero-bus img{width:100%; height:auto; display:block}
@media (min-width:900px){
  .hero-grid{grid-template-rows:auto auto; row-gap:0}
  .hero-grid > div:first-child{grid-column:1; grid-row:1 / span 2}
  .hero-bus{grid-column:2; grid-row:1; margin:0 -20px -10px 0; align-self:end}
  .cta-block{grid-column:2; grid-row:2; align-self:start}
}
.hero-bus img{-webkit-mask-image:radial-gradient(ellipse 72% 70% at 58% 55%,#000 58%,transparent 100%); mask-image:radial-gradient(ellipse 72% 70% at 58% 55%,#000 58%,transparent 100%)}
@media (min-width:900px) and (max-width:1360px){ .nav{gap:14px} }

/* prijsvoorbeelden: rekensom onder het verhaal */
.reken{margin-top:8px !important; font-size:15px; color:var(--muted)}
.reken strong{font-family:var(--display); font-weight:800; font-size:22px; color:var(--ink); margin-left:4px; white-space:nowrap}