: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; max-height: calc(100vh - 150px); overflow-y: auto; -webkit-overflow-scrolling: touch; }
}
@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; }
/* Weinig logo's: geen scroll/duplicatie, maar statisch gecentreerd. */
.ov-marquee-track.is-static { width: 100%; justify-content: center; animation: none; }
.ov-marquee:hover .ov-marquee-track { animation-play-state: paused; }
.ov-marquee-track .ov-logo { height: 40px; flex-shrink: 0; margin: 0 44px;
  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 { height: 40px; width: auto; max-width: 180px; object-fit: contain; display: block; }
.ov-marquee-track .ov-logo:hover { filter: grayscale(0); opacity: 1; }
@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; }

/* ---------- Klantverhaal-body (Markdown-render) ---------- */
.kv-body { color: var(--text-muted); font-size: 16.5px; line-height: 1.75; }
.kv-body > :first-child { margin-top: 0; }
.kv-body h2 { color: var(--dark-slate-grey); font-size: 24px; font-weight: 800; letter-spacing: -.015em; margin: 34px 0 12px; }
.kv-body h3 { color: var(--dark-slate-grey); font-size: 19px; font-weight: 800; margin: 26px 0 10px; }
.kv-body p { margin: 0 0 16px; }
.kv-body ul, .kv-body ol { margin: 0 0 16px; padding-left: 22px; }
.kv-body li { margin: 0 0 8px; }
.kv-body strong { color: var(--dark-slate-grey); font-weight: 700; }
.kv-body a { color: var(--cadet-blue); font-weight: 600; }

/* ---------- Anchor-sprongen niet onder de vaste header ---------- */
html { scroll-padding-top: 130px; }

/* ---------- Footer-onderbalk: op mobiel netjes links wrappen i.p.v. los rechts ---------- */
@media (max-width: 600px) {
  .ov-legalbar { justify-content: center !important; gap: 8px 18px; text-align: center; }
}

/* ---------- Calendly: eigen laad-spinner (3 bolletjes) verbergen ---------- */
.calendly-spinner { display: none !important; }

/* ---------- Gedeelde paginacontainer: 1 breedte sitebreed, responsive padding ---------- */
/* Alle secties EN kaarten leven binnen deze wrap, zodat content en gekleurde blokken exact uitlijnen. */
.ov-wrap { width: 100%; max-width: 1392px; margin-left: auto; margin-right: auto;
  padding-left: clamp(16px, 4vw, 32px); padding-right: clamp(16px, 4vw, 32px);
  box-sizing: border-box; }
@media (max-width: 600px) {
  .ov-wrap { padding-left: 16px; padding-right: 16px; }
}

/* ---------- Homepage hero: kop stabiel houden ---------- */
/* Het roterende woord wisselt van lengte. Zonder vaste afbreking herschikt de hele
   kop elke 1,9 seconde. Vanaf 701px forceren we de breuk, zodat het woord altijd
   regel 2 begint; daaronder mag de kop gewoon natuurlijk afbreken. */
.ov-hero-br { display: inline; }
#hero-word { white-space: nowrap; }

/* ---------- Homepage hero: badge + stats responsive ---------- */
@media (max-width: 700px) {
  /* Microsoft-partner-badge kleiner en niet meer over de hero-tekst */
  .ov-hero-badge { top: 14px !important; right: 14px !important; padding: 6px 12px !important; font-size: 12px !important; gap: 7px !important; }
  /* hero-tekst begint onder de badge */
  .ov-hero-text { padding-top: 78px !important; }
  /* op mobiel: volledige fade over de hele foto voor leesbaarheid */
  .ov-hero-overlay { background: linear-gradient(180deg, rgba(37,69,75,.42) 0%, rgba(37,69,75,.8) 100%) !important; }
}
@media (max-width: 900px) {
  /* statistiekblok: verticale scheidingslijnen weg + gelijke uitlijning (voorkomt scheve 3e kolom op tablet) */
  .ov-stats { gap: 16px 32px; }
  .ov-stats > div { border-left: none !important; padding-left: 0 !important; padding-right: 0 !important; }
}

/* ---------- Klantverhaal: quote-card die op de hero-foto steekt ---------- */
.kv-quote-card { position: absolute; left: 24px; right: 24px; bottom: -36px;
  max-width: 460px;
  background: var(--white); border-radius: 20px 8px 20px 8px;
  box-shadow: 0 18px 50px rgba(30,55,60,.18); padding: 24px 26px; }
@media (max-width: 900px) {
  .kv-quote-card { position: static; left: auto; right: auto; bottom: auto; max-width: none; margin-top: 16px; box-shadow: 0 10px 30px rgba(30,55,60,.10); }
}
.kv-body img { max-width: 100%; height: auto; border-radius: 16px 6px 16px 6px; margin: 10px 0 22px; display: block; }
.kv-body figure { margin: 10px 0 22px; }
.kv-body figcaption { font-size: 13.5px; color: var(--text-faint); margin-top: -12px; }
.kv-body blockquote { margin: 22px 0; padding: 4px 0 4px 20px; border-left: 3px solid var(--orange); color: var(--dark-slate-grey); font-weight: 600; }

/* ---------- Mobiele optimalisaties (klein scherm: minder gestapelde padding, compactere koppen) ---------- */
@media (max-width: 600px) {
  /* iets minder zijpadding op de paginacontainer */
  .ov-wrap { padding-left: 14px; padding-right: 14px; }

  /* gekleurde panelen/kaarten die direct in een sectie staan hebben vaak 48-80px zijpadding;
     op mobiel knijpt dat de tekst dood -> terugbrengen naar iets comfortabels */
  .ov-wrap > div[style*="padding:"] { padding-left: 26px !important; padding-right: 26px !important; }

  /* koppen compacter en mee-schalend (overschrijft de vaste inline-groottes) */
  .ov-main h1 { font-size: clamp(25px, 7.2vw, 31px) !important; line-height: 1.2 !important; }
  .ov-main h2 { font-size: clamp(21px, 5.8vw, 26px) !important; line-height: 1.3 !important; }
  .ov-main h3 { font-size: 17.5px !important; }

  /* body-tekst (de 16.5-17px alinea's) een tikje kleiner */
  .ov-main [style*="font-size:17px"], .ov-main [style*="font-size:16.5px"] { font-size: 15.5px !important; }
}

/* testimonial-spacer op klantverhaal: ruim op desktop, compacter op mobiel */
.kv-quote-gap { height: 64px; }
@media (max-width: 600px) {
  .kv-quote-gap { height: 22px; }
  /* nav-balk wat breder op mobiel (minder zijmarge -> meer ruimte) */
  .ov-header { left: 14px !important; right: 14px !important; }
}