:root {
  --text-muted: #565f61; /* iets donkerder dan de token-default #686868 */
  --white-smoke: #f4f4f6; /* paginabg één tandje donkerder dan de token-default #f5f5f7 */
}

/* Overse: site-brede aanvullingen op het design system.
   Eén bron voor responsive nav, input-styling en mobiele veiligheid.
   Het design system (_ds/tokens) blijft leidend; hier alleen wat de
   inline-stijlen niet kunnen (media-queries, :focus, ::placeholder). */

/* ---------- Mobiele veiligheid ---------- */
html, body { max-width: 100%; overflow-x: hidden; }
img, svg, video { max-width: 100%; }

/* ---------- Klikbare kaarten: schone hover-lift (geen DS-interactive-rand) ---------- */
.ov-liftcard { display: block; height: 100%; transition: transform .2s cubic-bezier(0.22,1,0.36,1); }
.ov-liftcard:hover { transform: translateY(-4px); }
/* Kaart binnen de lift-anchor vult de volledige rijhoogte -> alle diensten-cards even hoog. */
.ov-liftcard > * { height: 100% !important; }

/* ---------- Knoppen volgen consistent de P1-grootte ----------
   DS-knoppen zetten hun fontgrootte inline (lg=18px, sm=14px); custom pills 16px.
   Deze regel trekt alle knoppen gelijk naar de basis-tekstgrootte (16px). */
button:not(.ov-burger) { font-size: var(--text-base) !important; line-height: 1.2 !important; }
/* Header-CTA en footer-knoppen mogen compacter (kleiner font dan de P1-knoppen). */
.ov-cta-header button, footer button:not(.ov-burger) { font-size: var(--text-sm) !important; }
/* Formulier-elementen erven de site-font (Montserrat) niet vanzelf. */
button, input, textarea, select { font-family: inherit !important; }

/* ---------- Navigatie: desktop vs mobiel ---------- */
.ov-burger { display: none; }
.ov-drawer { display: none; }

@media (max-width: 900px) {
  .ov-nav-desktop { display: none !important; }
  .ov-megamenu    { display: none !important; }
  .ov-cta-header  { display: none !important; }
  .ov-burger      { display: inline-flex !important; }
  .ov-drawer.open { display: block !important; }
}
@media (min-width: 901px) {
  .ov-drawer { display: none !important; }
}

/* ---------- Inputs: rustig, oranje focus, geen ring ---------- */
.ov-input, .ov-textarea {
  width: 100%; box-sizing: border-box;
  border: 1.5px solid var(--neutral-200);
  background: var(--white);
  border-radius: var(--radius-input, 12px);
  padding: 13px 15px;
  font-family: var(--font-body); font-size: 15px; color: var(--text-body);
  transition: border-color .16s ease, background-color .16s ease;
}
.ov-textarea { min-height: 140px; resize: vertical; line-height: 1.6; }
.ov-input::placeholder, .ov-textarea::placeholder { color: var(--text-faint); }
.ov-input:focus, .ov-textarea:focus {
  outline: none; box-shadow: none;
  border-color: var(--orange);
  background: var(--orange-50);
}

/* ---------- Logo-marquee (vertrouwd door) ---------- */
.ov-marquee { overflow: hidden; position: relative; }
.ov-marquee::before, .ov-marquee::after { content: ""; position: absolute; top: 0; bottom: 0;
  width: 8%; z-index: 2; pointer-events: none; }
.ov-marquee::before { left: 0; background: linear-gradient(90deg, var(--white-smoke), transparent); }
.ov-marquee::after { right: 0; background: linear-gradient(270deg, var(--white-smoke), transparent); }
.ov-marquee-track { display: flex; align-items: center; width: max-content;
  animation: ov-marquee 45s linear infinite; will-change: transform; }
.ov-marquee:hover .ov-marquee-track { animation-play-state: paused; }
.ov-marquee-track .ov-logo { height: 44px; width: 128px; flex-shrink: 0; margin: 0 28px;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  filter: grayscale(1); opacity: .55; transition: filter .22s ease, opacity .22s ease, transform .22s ease; }
.ov-marquee-track .ov-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.ov-marquee-track .ov-logo:hover { filter: grayscale(0); opacity: 1; transform: translateY(-2px); }
@keyframes ov-marquee { from { transform: translate3d(0,0,0); } to { transform: translate3d(-50%,0,0); } }
@media (prefers-reduced-motion: reduce) { .ov-marquee-track { animation: none; flex-wrap: wrap; justify-content: center; } }


/* ---------- 4-koloms grid dat nooit 1 blok alleen laat (4 -> 2x2 -> 1) ---------- */
.ov-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
@media (max-width: 920px) { .ov-grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ov-grid-4 { grid-template-columns: 1fr; } }


/* ---------- Case/klantverhaal-kaart (gedeeld, overal identiek) ---------- */
.ov-case-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 24px; }
.ov-case { display: flex; flex-direction: column; height: 100%; background: var(--white); border: 1px solid var(--neutral-200); border-radius: 36px 12px 36px 12px; overflow: hidden; text-decoration: none; transition: transform .2s cubic-bezier(0.22,1,0.36,1), box-shadow .2s ease; }
.ov-case:hover { transform: translateY(-3px); box-shadow: 0 14px 32px rgba(30,55,60,.10); }
.ov-case.ov-case--alt { border-radius: 12px 36px 12px 36px; }
.ov-case-media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; flex-shrink: 0; }
.ov-case-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.ov-case-cat { position: absolute; left: 16px; top: 16px; background: var(--white); color: var(--dark-slate-grey); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 6px 12px; border-radius: 12px 4px 12px 4px; }
.ov-case-logo { position: absolute; right: 16px; bottom: 16px; background: var(--white); border-radius: 16px 6px 16px 6px; padding: 0 16px; box-shadow: 0 8px 20px rgba(30,55,60,.14); display: flex; align-items: center; height: 56px; }
.ov-case-logo img { max-height: 32px; max-width: 140px; object-fit: contain; }
.ov-case-body { padding: 26px 28px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.ov-case-body h3 { margin: 0; font-size: 19px; line-height: 1.35; color: var(--black); }
.ov-case-body p { margin: 0; color: var(--text-muted); font-size: 15px; line-height: 1.6; flex: 1; }
.ov-case-link { color: var(--orange); font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 4px; }