/* Aanpassingen op de kloon, volgens concept-website.md (30 okt 2026). Geordend per sectie. */

/* 0. Beweging: één curve, twee duren, en stil voor wie beweging heeft uitgezet */
:root { --omd-curve: cubic-bezier(.2, .8, .2, 1); --omd-kort: 300ms; --omd-lang: 600ms; --omd-lijn: rgba(45, 45, 129, .3); }
/* Inschuiven: een fractie dramatischer dan de oude site (40px in plaats van 32px) */
.js-reveal-up { transform: translateY(2.5rem); }
.js-reveal-up.revealed { transform: translateY(0); }
.js-reveal-up.revealed { transition: opacity var(--omd-lang) var(--omd-curve), transform var(--omd-lang) var(--omd-curve) !important; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; animation-iteration-count: 1 !important; }
  .js-reveal-up, .js-reveal-header { opacity: 1 !important; transform: none !important; }
}

/* 1. Intro-scherm, eigen cursor en zwevende knop weg */
#cursor, .cursor, #call-to-action-modal, #call-to-action-toggle { display: none !important; }
html, body { cursor: auto !important; }
/* Op alles waar je kunt klikken worden het de roze oogjes uit het logo (zoals de oude site); bij klikken knipperen ze dicht.
   Op roze vlakken indigo. Knoppen met oogjes erin houden het gewone handje. */
a, button, [onclick], label, select, summary { cursor: url("cursor/oogjes-groot.svg") 28 13, pointer !important; }
a:active, button:active, [onclick]:active, label:active, summary:active { cursor: url("cursor/oogjes-groot-dicht.svg") 28 13, pointer !important; }
.bg-pink a, .bg-pink button, .bg-pink [onclick], .omd-menuknop, .roze a {
  cursor: url("cursor/oogjes-groot-indigo.svg") 28 13, pointer !important; }
.bg-pink a:active, .bg-pink button:active, .bg-pink [onclick]:active, .omd-menuknop:active, .roze a:active {
  cursor: url("cursor/oogjes-groot-indigo-dicht.svg") 28 13, pointer !important; }
a.btn:has(.omd-oogjes), button.btn:has(.omd-oogjes) { cursor: pointer !important; }

/* 2. Kop: menu altijd zichtbaar op laptop, groene balk na scrollen */
header.js-reveal-header { transition: background-color var(--omd-lang) var(--omd-curve), padding var(--omd-lang) var(--omd-curve), opacity var(--omd-lang), transform var(--omd-lang), translate var(--omd-lang) var(--omd-curve); }
header.js-reveal-header.omd-gescrold { background-color: var(--color-green); }
/* Logo en oogjes houden de maat van de oude site (h-24) en vervagen zacht in elkaar. De kop krimpt niet: logo en menu blijven op hun plek, alleen de groene achtergrond komt erbij */
header.omd-gescrold:not(.omd-menu-open) svg,
header.omd-gescrold:not(.omd-menu-open) .text-blue { color: var(--color-pink) !important; }
header.omd-gescrold:not(.omd-menu-open) a.text-blue:hover { color: var(--color-creme) !important; }
header.omd-menu-open { background-color: transparent !important; }
/* Pagina's met een groen kopvlak: het menu bovenaan in roze, net als op de homepage */
body:has(.omd-paginakop) header.js-reveal-header:not(.omd-menu-open) .text-blue { color: var(--color-pink) !important; }
body:has(.omd-paginakop) header.js-reveal-header:not(.omd-menu-open) a.text-blue:hover { color: var(--color-mint) !important; }
@media (min-width: 1024px) {
  header.js-reveal-header ul { opacity: 1 !important; transform: none !important; translate: none !important; pointer-events: auto !important; margin-right: 0 !important; gap: 2.25rem !important; }
  #menu-toggle { display: none !important; }
}
.omd-menuknop {
  display: inline-block; padding: .5rem 1.1rem; background: var(--color-pink); color: var(--color-blue) !important;
  font-weight: 700; font-size: 1.125rem; transition: background-color var(--omd-kort) var(--omd-curve), color var(--omd-kort) var(--omd-curve);
}
.omd-menuknop:hover { background: var(--color-mint); }

/* 3. Kleur en knoppen: geen bruin, één rechthoekige knopvorm */
.text-brown { color: var(--color-blue) !important; }
footer.bg-brown { background-color: var(--color-green) !important; }
footer.bg-brown, footer.bg-brown .text-blue, footer.bg-brown .textfield, footer.bg-brown .textfield a { color: var(--color-creme) !important; }
footer.bg-brown a.text-blue:hover, footer.bg-brown .textfield a:hover { color: var(--color-pink) !important; }
footer.bg-brown img[alt="BNO Lid"], footer.bg-brown img[alt="Sortlist Verified"] { filter: brightness(0) invert(1); }
.omd-bno { display: block; margin-top: .5rem; font-size: 1rem; color: var(--color-creme); }
.btn, .omd-menuknop { border-radius: 0 !important; }
.btn { font-weight: 700; transition: background-color var(--omd-kort) var(--omd-curve), color var(--omd-kort) var(--omd-curve) !important; }
.btn.btn-primary:hover { background-color: var(--color-mint); }
.btn.omd-groot { font-size: 1.25rem; padding: 1.15rem 2.25rem; display: inline-flex; align-items: center; }
.btn.omd-donker { background-color: var(--color-blue); color: var(--color-creme); }
.btn.omd-donker:hover { background-color: var(--color-green); }
.btn.omd-rand { background: var(--color-mint); color: var(--color-blue); }
.btn.omd-rand:hover { background: var(--color-blue); color: var(--color-creme); }
.omd-link { color: var(--color-blue); font-size: 1.25rem; text-decoration: underline; text-underline-offset: 6px; text-decoration-color: var(--color-pink); transition: text-decoration-color var(--omd-kort) var(--omd-curve); }
.omd-link:hover { text-decoration-color: var(--color-blue); }
.omd-tekstlinks { display: flex; flex-wrap: wrap; gap: .5rem 1.75rem; font-size: 1.25rem; color: var(--color-blue); }
.omd-tekstlinks a { text-decoration: none; }
.omd-tekstlinks a:hover { text-decoration-color: var(--color-creme); }

/* 4. Tekstmaten en vaste hiërarchie: label met roze bol, grote kop, inhoud */
@media (min-width: 1024px) { .textfield p { font-size: 1.5rem; line-height: 1.5; } }
.omd-label { display: flex; align-items: center; gap: .75rem; font-size: 1rem; font-weight: 400; color: var(--color-blue); margin-bottom: 1.5rem; }
.omd-label::before { content: ""; width: .75rem; height: .75rem; border-radius: 999px; background: var(--color-pink); }
.omd-h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.1; font-weight: 700; color: var(--color-blue); max-width: 22ch; text-wrap: balance; }
.omd-intro { font-size: 1.25rem; line-height: 1.65; color: var(--color-blue); max-width: 50ch; margin-top: 2rem; }
.omd-slotregel { margin-top: 2.5rem; font-size: 1.25rem; line-height: 1.5; color: var(--color-blue); }
.omd-sectie { margin-top: 11rem; }
.omd-grotequote { margin-top: 5rem; max-width: 52rem; color: var(--color-blue); }
.omd-grotequote p { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.1; font-weight: 400; }
.omd-grotequote cite { display: block; margin-top: 1.25rem; font-style: normal; font-size: 1.25rem; }

/* 5. Hero: zoals het was, met de knop en de tekstlink */
section.bg-green.h-dvh { height: auto; min-height: 100dvh; padding-top: 11rem; padding-bottom: 8rem; }
section.bg-green h1 { font-size: clamp(2.75rem, 5.6vw, 5.5rem); line-height: 1.05; max-width: 22ch; }
.omd-hero-label { font-size: 1.25rem; color: var(--color-mint); margin-bottom: 1.5rem; }
.omd-hero-links { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 4rem; }
.omd-hero-links .omd-link { color: var(--color-pink); text-decoration-color: var(--color-pink); }
.omd-hero-links .omd-link:hover { color: var(--color-mint); text-decoration-color: var(--color-mint); }

/* Blok 1b. Logoregel op crème, direct onder de hero */
.omd-logos { display: flex; flex-wrap: wrap; align-items: center; gap: 1.25rem 3rem; padding-top: 3rem; color: var(--color-blue); }
.omd-logos p { font-size: 1rem; margin: 0; }
.omd-logos ul { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; list-style: none; margin: 0; padding: 0; }
.omd-logos img { display: block; height: 1.75rem; width: auto; }
.omd-logos .omd-logo--hoog img { height: 2.75rem; }

/* Blok 2. Zes momenten met een meelopend beeld */
.omd-momenten { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 5rem; align-items: start; margin-top: 4rem; }
.omd-momenten__lijst { display: flex; flex-direction: column; border-top: 1px solid var(--omd-lijn); }
.omd-momenten__lijst a { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 2rem 0; border-bottom: 1px solid var(--omd-lijn); color: var(--color-blue); text-decoration: none; }
.omd-momenten__lijst b { display: block; font-size: 1.875rem; line-height: 1.1; font-weight: 700; }
.omd-momenten__lijst small { display: block; font-size: 1.0625rem; line-height: 1.45; margin-top: .4rem; }
.omd-momenten__lijst svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .55rem; transition: transform var(--omd-kort) var(--omd-curve); }
.omd-momenten__lijst a:hover svg, .omd-momenten__lijst a:focus-visible svg { transform: translateX(.3rem); }
.omd-momenten__mini { display: none; }
.omd-momenten__beeld { position: sticky; top: 7rem; aspect-ratio: 5 / 4; overflow: hidden; background: var(--color-mint); }
.omd-momenten__beeld figure { position: absolute; inset: 0; margin: 0; opacity: 0; transition: opacity var(--omd-kort) var(--omd-curve); }
.omd-momenten__beeld figure.is-actief { opacity: 1; }
.omd-momenten__beeld img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.omd-momenten__beeld figcaption { position: absolute; left: 0; bottom: 0; max-width: 88%; padding: .55rem .9rem .6rem; background: var(--color-green); color: var(--color-creme); font-size: .9375rem; line-height: 1.4; }
.omd-momenten__beeld figcaption b { font-weight: 700; margin-right: .35rem; }
@media (max-width: 1023px) {
  .omd-momenten { grid-template-columns: 1fr; }
  .omd-momenten__beeld { display: none; }
  .omd-momenten__lijst a { align-items: center; }
  .omd-momenten__mini { display: block; flex: none; width: 5rem; height: 4rem; object-fit: cover; }
  .omd-momenten__lijst a > span { flex: 1 1 auto; }
  .omd-momenten__lijst b { font-size: 1.5rem; }
}

/* Blok 3. Het bewijsvlak: crème, en één keer groen zodra je het bereikt */
.omd-bewijs { margin-top: 11rem; padding: 8rem 0; background: var(--color-creme); color: var(--color-blue); transition: background-color var(--omd-lang) var(--omd-curve), color var(--omd-lang) var(--omd-curve); }
.omd-bewijs h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem); line-height: 1.05; font-weight: 700; max-width: 22ch; }
.omd-bewijs__cijfers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 5.5rem; margin-top: 4.5rem; }
.omd-bewijs__cijfers a { display: block; color: inherit; text-decoration: none; border-top: 2px solid currentColor; padding-top: 1.25rem; }
.omd-bewijs__cijfers b { display: block; font-size: clamp(2.5rem, 3.4vw, 3.75rem); line-height: 1; font-weight: 700; white-space: nowrap; transition: color var(--omd-lang) var(--omd-curve); }
.omd-bewijs__cijfers span { display: block; margin-top: .75rem; font-size: 1.125rem; line-height: 1.45; }
.omd-bewijs__citaat { display: flex; gap: 1.75rem; align-items: center; margin-top: 5rem; max-width: 60rem; }
.omd-bewijs__citaat img { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; flex: none; }
.omd-bewijs__citaat p { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.omd-bewijs__citaat cite { display: block; font-style: normal; font-size: 1rem; margin-top: .4rem; }
.omd-bewijs__citaat cite a { color: inherit; text-decoration: underline; text-underline-offset: 5px; margin-left: 1rem; }
.omd-bewijs.is-groen { background: var(--color-green); color: var(--color-creme); }
.omd-bewijs.is-groen .omd-bewijs__cijfers b { color: var(--color-pink); }
.omd-bewijs.is-groen .omd-bewijs__cijfers a:hover b { color: var(--color-mint); }
.omd-bewijs:not(.is-groen) .omd-bewijs__cijfers a:hover b { color: var(--color-green); }

/* Blok 4. Werk: één groot, twee klein, roze lijn onder de naam bij aanwijzen */
.omd-werk { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4.5rem 2.5rem; margin-top: 4rem; }
.omd-werk a { display: block; color: var(--color-blue); text-decoration: none; }
.omd-werk a.is-groot { grid-column: 1 / -1; }
.omd-werk img { display: block; width: 100%; object-fit: cover; }
.omd-werk a.is-groot img { aspect-ratio: 16 / 9; max-height: 60vh; }
.omd-werk a:not(.is-groot) img { aspect-ratio: 4 / 3; }
.omd-werk small { display: block; margin-top: 1.25rem; font-size: 1rem; }
.omd-werk b { display: block; font-size: 1.5rem; line-height: 1.2; margin-top: 1.25rem; padding-bottom: .7rem; border-bottom: 1px solid var(--omd-lijn); transition: border-color var(--omd-kort) var(--omd-curve); }
.omd-werk small + b { margin-top: .5rem; }
.omd-werk a:hover b, .omd-werk a:focus-visible b { border-bottom-color: var(--color-pink); }
.omd-werk p { font-size: 1.25rem; line-height: 1.5; margin-top: .9rem; max-width: 50ch; }

/* Blok 5. Foto met de mensen */
.omd-mensen__foto { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; object-fit: cover; object-position: 0% 50%; }
.omd-mensen__tekst { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 3rem; margin-top: 4rem; align-items: end; }
.omd-mensen__tekst p { font-size: 1.25rem; line-height: 1.65; max-width: 50ch; margin-top: 1.75rem; color: var(--color-blue); }
.omd-mensen__links { display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; }

/* Blok 6. Contactblok: gezichten, één knop met de oogjes bij aanwijzen */
.omd-gezichten { display: flex; margin-bottom: 1rem; }
.omd-gezichten img { flex: none; width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; margin-left: .4rem; }
.omd-gezichten > img:first-child, .omd-gezichten > picture:first-child img { margin-left: 0; }
.omd-oogjes { width: 0; height: 1em; opacity: 0; fill: var(--color-pink); flex: none; margin-right: 0; transition: width var(--omd-kort) var(--omd-curve), opacity var(--omd-kort) var(--omd-curve), margin var(--omd-kort) var(--omd-curve); }
.btn:hover .omd-oogjes, .btn:focus-visible .omd-oogjes { width: 2em; opacity: 1; margin-right: .6em; }
.omd-kom-langs { font-size: 1.25rem; color: var(--color-blue); }

/* Dienstenpagina: momenten met zin, en de vakgebieden als rustige lijst */
.omd-moment { display: flex; flex-direction: column; gap: .5rem; }
.omd-moment small { font-size: 1.0625rem; line-height: 1.45; font-weight: 400; color: var(--color-blue); }
a:has(.omd-moment) { align-items: flex-start !important; padding-bottom: 1.25rem !important; }
a:has(.omd-moment) svg { margin-top: .6rem; }
.omd-momenten-kop { margin-top: 6rem; }
.omd-momenten-kop h2 { font-size: clamp(2.25rem, 4.2vw, 3.75rem) !important; line-height: 1.05; }
.omd-momenten-kop ~ section > header { margin-top: 4rem !important; }
.omd-momenten-kop ~ section > header h2 { font-size: clamp(1.5rem, 2.4vw, 2rem) !important; }
.omd-momenten-kop ~ section > header p { font-size: 1.125rem !important; }
.omd-momenten-kop ~ section > header picture { display: none !important; }
.omd-momenten-kop ~ section article[style] { background: transparent !important; color: var(--color-blue) !important; padding: 1.5rem 0 !important; border-top: 1px solid var(--omd-lijn); }
.omd-momenten-kop ~ section article[style] h3, .omd-momenten-kop ~ section article[style] h2 { font-size: 1.375rem !important; margin-bottom: .5rem; }
.omd-momenten-kop ~ section article[style] p { font-size: 1.0625rem !important; line-height: 1.5; }
.omd-momenten-kop ~ section article[style]:hover { background: transparent !important; color: var(--color-blue) !important; }
.omd-momenten-kop ~ section .grid.gap-8 { column-gap: 3rem; row-gap: 0; margin-top: 1rem; }

/* Telefoon */
@media (max-width: 767px) {
  main .mt-32 { margin-top: 5rem; }
  main .mt-24 { margin-top: 3.5rem; }
  .pt-56 { padding-top: 9rem; }
  .omd-sectie, .omd-bewijs { margin-top: 7rem; }
  .omd-momenten-kop { margin-top: 4rem; }
  section.bg-green.h-dvh { padding-top: 8rem; padding-bottom: 5rem; }
  .omd-hero-links { margin-top: 2.5rem; }
  .omd-logos { padding-top: 2rem; }
  .omd-logos ul { display: grid; grid-template-columns: repeat(3, auto); gap: 1rem 1.5rem; justify-content: start; }
  .omd-logos img { height: 1.375rem; }
  .omd-logos .omd-logo--hoog img { height: 2.125rem; }
  .omd-bewijs { padding: 5rem 0; }
  .omd-bewijs__cijfers { grid-template-columns: 1fr; gap: 2rem; }
  .omd-bewijs__cijfers b { font-size: 3rem; }
  .omd-bewijs__citaat { flex-direction: column; align-items: flex-start; }
  .omd-werk { grid-template-columns: 1fr; gap: 2.5rem; }
  .omd-werk a.is-groot img, .omd-werk a:not(.is-groot) img { aspect-ratio: 4 / 3; max-height: none; }
  .omd-mensen__foto { aspect-ratio: 3 / 2; max-height: none; object-position: 62% 50%; }
  .omd-mensen__tekst { grid-template-columns: 1fr; gap: 1.5rem; }
  .omd-gezichten img { width: 2.75rem; height: 2.75rem; margin-left: .3rem; }
  .btn.omd-groot { width: 100%; justify-content: center; }
}

/* Momentpagina (sjabloon vanaf Tender winnen): groene paginakop, lopende tekst, open stappen, één cijfer, drie portretten, directieblok */
.omd-paginakop { background: var(--color-green); color: var(--color-creme); padding: 13rem 0 8rem; min-height: 60vh; display: flex; align-items: flex-end; }
.omd-paginakop h1 { font-size: clamp(2.5rem, 5vw, 4.75rem); line-height: 1.05; font-weight: 700; color: var(--color-pink); max-width: 22ch; text-wrap: balance; }
.omd-paginakop__regel { margin-top: 2.25rem; font-size: 1.25rem; line-height: 1.6; color: var(--color-mint); max-width: 50ch; }
.omd-paginakop .omd-hero-links { margin-top: 3.5rem; }
.omd-tekst { max-width: 50ch; margin-top: 3rem; color: var(--color-blue); }
.omd-tekst p { font-size: 1.25rem; line-height: 1.65; }
.omd-tekst p + p { margin-top: 1.75rem; }
.omd-tekst__slot { font-weight: 700; margin-top: 3rem !important; }
.omd-stappen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4rem; margin-top: 4rem; list-style: none; padding: 0; color: var(--color-blue); }
.omd-stappen b { display: block; font-size: 4.5rem; line-height: 1; font-weight: 700; color: var(--color-pink); }
.omd-stappen h3 { font-size: 1.5rem; font-weight: 700; margin-top: 1.5rem; }
.omd-stappen p { font-size: 1.125rem; line-height: 1.6; margin-top: .75rem; }
.omd-bewijs--een { margin-top: 11rem; }
.omd-bewijs__een { display: block; color: inherit; text-decoration: none; max-width: 60rem; }
.omd-bewijs__een b { display: block; font-size: clamp(4.5rem, 8vw, 7rem); line-height: .9; font-weight: 700; transition: color var(--omd-lang) var(--omd-curve); }
.omd-bewijs__een span { display: block; margin-top: 2rem; font-size: 1.25rem; line-height: 1.5; }
.omd-bewijs.is-groen .omd-bewijs__een b { color: var(--color-pink); }
.omd-bewijs.is-groen .omd-bewijs__een:hover b { color: var(--color-mint); }
.omd-mensen-drie { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; margin-top: 4rem; list-style: none; padding: 0; color: var(--color-blue); }
.omd-mensen-drie img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.omd-mensen-drie b { display: block; margin-top: 1.25rem; font-size: 1.25rem; }
.omd-mensen-drie span { display: block; margin-top: .25rem; font-size: 1.0625rem; line-height: 1.45; }
.omd-directie { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; align-items: center; margin-top: 3rem; }
.omd-directie p { font-size: 1.25rem; line-height: 1.65; color: var(--color-blue); max-width: 50ch; }
@media (max-width: 1023px) { .omd-stappen, .omd-mensen-drie, .omd-directie { grid-template-columns: 1fr; } .omd-stappen { gap: 3.5rem; } .omd-directie { gap: 2rem; } }
@media (max-width: 767px) { .omd-paginakop { padding: 10rem 0 5rem; min-height: 0; } .omd-stappen b { font-size: 3.5rem; } .omd-bewijs--een { margin-top: 7rem; } .omd-tekst { margin-top: 2rem; } .omd-h2 { line-height: 1.15; } .omd-bewijs__een b { font-size: 4.5rem; } }

/* Momentpagina: caseblok en citaat op crème */
.omd-case { display: block; color: var(--color-blue); text-decoration: none; margin-top: 4rem; }
.omd-case img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; object-fit: cover; }
.omd-case small { display: block; margin-top: 1.25rem; font-size: 1rem; }
.omd-case b { display: inline-block; position: relative; font-size: 2.25rem; line-height: 1.1; margin-top: .25rem; }
.omd-case b::after { content: ""; position: absolute; left: 0; right: 0; bottom: -.15rem; height: 3px; background: var(--color-pink); transform: scaleX(0); transform-origin: left; transition: transform var(--omd-kort) var(--omd-curve); }
.omd-case:hover b::after, .omd-case:focus-visible b::after { transform: scaleX(1); }
.omd-case p { font-size: 1.25rem; line-height: 1.5; margin-top: .5rem; max-width: 50ch; }
.omd-case .omd-link { display: inline-block; margin-top: .75rem; font-size: 1rem; }
.omd-citaat { display: flex; gap: 1.75rem; align-items: center; margin-top: 4.5rem; max-width: 60rem; color: var(--color-blue); }
.omd-citaat img { width: 4.5rem; height: 4.5rem; border-radius: 999px; object-fit: cover; flex: none; }
.omd-citaat p { font-size: 1.5rem; font-weight: 700; line-height: 1.3; }
.omd-citaat cite { display: block; font-style: normal; font-size: 1rem; margin-top: .4rem; }
@media (max-width: 767px) { .omd-case img { aspect-ratio: 4 / 3; max-height: none; } .omd-citaat { flex-direction: column; align-items: flex-start; } }

/* Contactblok: eigen afstanden, los van de Tailwind-bundel */
#contact-options .bg-pink { padding: 3rem 2rem 3.5rem; }
#contact-options .bg-pink > * + * { margin-top: 2.5rem; }
#contact-options .textfield h2 { padding-top: 0; }
#contact-options .textfield p { margin-top: 1.25rem; }
.omd-gezichten { margin-bottom: 0; }
.omd-tekstlinks { gap: .9rem 1.75rem; }
@media (min-width: 640px) { #contact-options .bg-pink { padding: 4rem 4rem 4.5rem; } }
@media (max-width: 767px) { #contact-options .bg-pink > * + * { margin-top: 2rem; } }

/* Werkoverzicht en casepagina's */
.omd-paginakop--kort { padding: 12rem 0 5rem; min-height: 0; }
.omd-sectorlinks { display: flex; flex-wrap: wrap; gap: .75rem 2rem; margin-top: 2.5rem; }
.omd-sectorlinks .omd-link { color: var(--color-mint); text-decoration-color: var(--color-mint); }
.omd-sectorlinks .omd-link:hover { color: var(--color-pink); text-decoration-color: var(--color-pink); }
.omd-beeld-breed { margin-top: 3rem; }
.omd-beeld-breed img { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 60vh; object-fit: cover; }
.omd-casegegevens { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 4rem; align-items: start; }
.omd-casegegevens dl { display: flex; flex-direction: column; gap: 1.5rem; color: var(--color-blue); margin: 0; }
.omd-casegegevens dt { font-size: 1rem; }
.omd-casegegevens dd { font-size: 1.125rem; line-height: 1.5; font-weight: 700; margin: .25rem 0 0; }
.omd-casegegevens .omd-tekst { margin-top: 0; }
.omd-galerij { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem; }
.omd-galerij .is-groot { grid-column: 1 / -1; }
.omd-galerij img { display: block; width: 100%; object-fit: cover; }
.omd-galerij .is-groot img { aspect-ratio: 16 / 9; max-height: 60vh; }
.omd-galerij div:not(.is-groot) img { aspect-ratio: 4 / 3; }
.omd-citaat--groot { max-width: 60rem; }
.omd-citaat--groot p { font-size: clamp(1.5rem, 2.4vw, 2.25rem); }
.omd-citaat--groot img { width: 6rem; height: 6rem; }
.omd-tekstlinks--groot { font-size: 1.5rem; align-items: baseline; }
.omd-tekstlinks--groot a { font-weight: 700; }
.omd-tekstlinks--groot a:hover { text-decoration-color: var(--color-blue); }
@media (max-width: 1023px) { .omd-casegegevens { grid-template-columns: 1fr; gap: 2.5rem; } }
@media (max-width: 767px) {
  .omd-paginakop--kort { padding: 10rem 0 4rem; }
  .omd-galerij { grid-template-columns: 1fr; gap: 1.5rem; }
  .omd-galerij .is-groot img, .omd-galerij div:not(.is-groot) img { aspect-ratio: 4 / 3; max-height: none; }
  .omd-beeld-breed img { aspect-ratio: 4 / 3; max-height: none; }
  .omd-tekstlinks--groot { font-size: 1.25rem; }
}

/* Over ons: foto die over het groene kopvlak schuift, en het team */
.omd-paginakop--over { padding-bottom: 13rem; }
/* Elk kopvlak met een beeld over de rand houdt 5rem lucht tussen de laatste regel en het beeld (4rem op telefoon) */
.omd-paginakop:has(+ .omd-beeld-over) { padding-bottom: 13rem; }
@media (max-width: 767px) { .omd-paginakop:has(+ .omd-beeld-over) { padding-bottom: 8rem; } }
.omd-beeld-over { margin-top: -8rem; position: relative; }
.omd-team { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2.5rem 1.5rem; margin-top: 4rem; list-style: none; padding: 0; color: var(--color-blue); }
.omd-team img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; }
.omd-team b { display: block; margin-top: 1rem; font-size: 1.125rem; line-height: 1.3; }
.omd-team span { display: block; margin-top: .2rem; font-size: 1rem; }
.omd-lidmaatschap { margin-top: 3.5rem; font-size: 1.125rem; color: var(--color-blue); }
@media (max-width: 1023px) { .omd-team { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767px) { .omd-team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 1rem; } .omd-paginakop--over { padding-bottom: 8rem; } .omd-beeld-over { margin-top: -4rem; } }

/* Woorden breken nooit midden in (Frans, 13 nov 2026). Geen overflow-wrap: anywhere of hyphens: auto meer;
   past een woord niet, dan gaat de opmaak mee (zie onderaan: woordafbreking). */

/* Tablet: de drie grote cijfers passen niet naast elkaar */
@media (max-width: 1023px) {
    .omd-bewijs__cijfers { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* Stap 9: de momenttitel glijdt naar de kop van de momentpagina, en terug (Chrome en Safari; Firefox laadt gewoon).
   Alleen tussen de momentenlijst (home, diensten) en een momentpagina; elke andere overgang slaat het script over. */
@view-transition { navigation: auto; }
::view-transition-group(*) { animation-duration: var(--omd-lang); animation-timing-function: var(--omd-curve); }
::view-transition-group(root) { animation-duration: var(--omd-kort); }
::view-transition-old(moment-titel), ::view-transition-new(moment-titel),
::view-transition-old(moment-zin), ::view-transition-new(moment-zin) { block-size: 100%; object-fit: contain; object-position: left top; }
.omd-direct { transition: none !important; }
/* Proefstand: open een pagina met ?traag erachter en elke overgang duurt 4 seconden; ?snel zet het terug */
html.omd-traag::view-transition-group(*) { animation-duration: 4s; }
@media (prefers-reduced-motion: reduce) {
    ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* Mensen in de site: hero met sessiefoto, drie gezichten bij het bewijs, foto van het werk op momentpagina's */
section.omd-hero-vlak { height: auto; min-height: 100dvh; padding: 9rem 0 5rem; }
.omd-hero { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: center; }
.omd-hero__tekst h1 { font-size: clamp(2.25rem, 3.6vw, 3.5rem) !important; line-height: 1.05; max-width: 22ch; }
.omd-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
/* De foto houdt zijn eigen verhouding: er wordt niemand afgesneden */
.omd-hero__beeld { margin: 0; }
.omd-hero__beeld img { display: block; width: 100%; height: auto; }
.omd-bewijs__citaten { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 4rem; margin-top: 5rem; }
.omd-bewijs__citaten .omd-bewijs__citaat { flex-direction: column; align-items: flex-start; gap: 1.25rem; margin-top: 0; max-width: none; }
.omd-bewijs__citaten .omd-bewijs__citaat p { font-size: 1.25rem; line-height: 1.35; }
.omd-bewijs__citaten .omd-bewijs__citaat cite a { display: block; margin: .5rem 0 0; width: max-content; }
.omd-beeld-mensen { margin-top: 6rem; }
.omd-beeld-mensen img { aspect-ratio: 16 / 9; max-height: 70vh; }
@media (max-width: 1023px) {
    section.omd-hero-vlak { height: auto; min-height: 100dvh; padding: 9rem 0 4rem; }
    .omd-hero { grid-template-columns: 1fr; gap: 3rem; }
    .omd-bewijs__citaten { grid-template-columns: 1fr; gap: 2.5rem; }
    .omd-beeld-mensen { margin-top: 4rem; }
}

/* Dienstenpagina: elke groep (denken, maken, groeien) met een foto van het werk ernaast */
.omd-dienstgroep { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 4.5rem; align-items: start; }
.omd-dienstgroep--rechts .omd-dienstgroep__beeld { order: 2; }
.omd-dienstgroep__beeld { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; position: sticky; top: 7rem; }
.omd-dienstgroep__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.omd-dienstgroep__tekst .omd-intro { margin-top: 1.5rem; }
.omd-dienstgroep__lijst { list-style: none; padding: 0; margin: 2.5rem 0 0; border-top: 1px solid var(--omd-lijn); color: var(--color-blue); }
.omd-dienstgroep__lijst li { border-bottom: 1px solid var(--omd-lijn); padding: 1.25rem 0; }
.omd-dienstgroep__lijst a { display: block; color: inherit; text-decoration: none; }
.omd-dienstgroep__lijst b { display: block; font-size: 1.25rem; line-height: 1.3; }
.omd-dienstgroep__lijst span { display: block; margin-top: .35rem; font-size: 1.0625rem; line-height: 1.5; max-width: 50ch; }
.omd-dienstgroep__lijst a:hover b, .omd-dienstgroep__lijst a:focus-visible b { text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (max-width: 1023px) {
    .omd-dienstgroep { grid-template-columns: 1fr; gap: 2rem; }
    .omd-dienstgroep--rechts .omd-dienstgroep__beeld { order: 0; }
    .omd-dienstgroep__beeld { aspect-ratio: 4 / 3; position: static; }
}

/* Contactpagina */
.omd-contactwijzen { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 2rem; margin-top: 2.5rem; }
.omd-contactwijzen .omd-link { color: var(--color-pink); text-decoration-color: var(--color-pink); }
.omd-contactwijzen .omd-link:hover { color: var(--color-mint); text-decoration-color: var(--color-mint); }
.omd-adres { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem 5rem; margin-top: 3rem; color: var(--color-blue); max-width: 60rem; }
.omd-adres h3 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; }
.omd-adres h3:first-child { margin-top: 0; }
.omd-adres p { margin-top: .5rem; font-size: 1.125rem; line-height: 1.6; }
.omd-formulier { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 3rem; max-width: 52rem; color: var(--color-blue); }
.omd-formulier label { display: block; font-size: 1rem; }
.omd-formulier input, .omd-formulier textarea { display: block; width: 100%; margin-top: .5rem; padding: .85rem 1rem; font: inherit; font-size: 1.0625rem; color: var(--color-blue); background: #fff; border: 0; border-radius: 0; }
.omd-formulier input:focus, .omd-formulier textarea:focus { outline: 0; background: var(--color-mint); }
.omd-formulier__breed, .omd-formulier button { grid-column: 1 / -1; }
.omd-formulier button { justify-self: start; }
.omd-formulier__verborgen { position: absolute; left: -9999px; }
.omd-formulier__dank { margin-top: 2rem; font-size: 1.25rem; font-weight: 700; color: var(--color-blue); }
@media (max-width: 767px) {
    .omd-adres, .omd-formulier { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Momentpagina, nieuwe opbouw: herkenning met foto, mensen bij de stappen, wat je krijgt in beeld */
.omd-herken { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; align-items: center; }
.omd-herken__beeld { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; }
.omd-herken__beeld img { display: block; width: 100%; height: 100%; object-fit: cover; }
.omd-bewijs--een .omd-bewijs__citaat { margin-top: 3.5rem; }
.omd-stappen--mensen li img { display: block; width: 5.5rem; height: 5.5rem; border-radius: 999px; object-fit: cover; margin-top: 1.25rem; }
.omd-stappen--mensen small, .omd-stappen small { display: block; margin-top: 1rem; font-size: 1.125rem; line-height: 1.6; color: var(--color-blue); }
.omd-krijgt { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem 2rem; margin-top: 3rem; }
.omd-krijgt figure { margin: 0; }
.omd-krijgt img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.omd-krijgt figcaption { margin-top: .75rem; font-size: 1rem; line-height: 1.4; color: var(--color-blue); }
@media (max-width: 1023px) {
    .omd-herken { grid-template-columns: 1fr; gap: 2.5rem; }
    .omd-herken__beeld { aspect-ratio: 4 / 3; }
    .omd-krijgt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.omd-bewijs--een h2 + .omd-bewijs__citaat { margin-top: 3rem; }
.omd-bewijs--een div.omd-bewijs__een { cursor: default; }

/* Bewijsvlak op de momentpagina als één blok (1 nov 2026): cijfer links, tekst ernaast, bovenaan gelijk.
   Maten op de schaal van 1,618 vanaf 1,25rem: cijfer 5,3rem, zin 2rem, citaat en naam 1,25rem. */
.omd-bewijs--een .container { display: grid; grid-template-columns: max-content minmax(0, 1fr); column-gap: 5rem; align-items: start; }
.omd-bewijs--een h2 { grid-column: 1; font-size: 1.25rem; line-height: 1.6; font-weight: 400; max-width: none; margin: 0 0 .75rem; }
.omd-bewijs--een.is-groen h2 { color: var(--color-mint); }
.omd-bewijs--een .omd-bewijs__een { grid-column: 1 / -1; display: grid; grid-template-columns: subgrid; max-width: none; align-items: start; }
.omd-bewijs--een .omd-bewijs__een b { grid-column: 1; font-size: 5.3rem; line-height: .85; white-space: nowrap; }
.omd-bewijs--een .omd-bewijs__een span { grid-column: 2; margin-top: 0; font-size: 2rem; line-height: 1.3; max-width: 34ch; text-wrap: pretty; }
.omd-bewijs--een .omd-bewijs__citaat { grid-column: 2; margin-top: 3.25rem; max-width: 34em; align-items: flex-start; gap: 1.25rem; }
.omd-bewijs--een h2 + .omd-bewijs__citaat { margin-top: 0; }
.omd-bewijs--een .omd-bewijs__citaat img { width: 3.25rem; height: 3.25rem; }
.omd-bewijs--een .omd-bewijs__citaat p { font-size: 1.25rem; line-height: 1.6; font-weight: 400; }
.omd-bewijs--een .omd-bewijs__citaat cite { font-size: 1.25rem; line-height: 1.6; margin-top: .25rem; }
.omd-bewijs--een.is-groen .omd-bewijs__citaat cite { color: var(--color-mint); }
.omd-bewijs--een .omd-bewijs__citaat cite a { color: var(--color-creme); }
.omd-bewijs--een .omd-bewijs__citaat cite a:hover { color: var(--color-pink); }
@media (max-width: 1279px) {
  .omd-bewijs--een .container { grid-template-columns: minmax(0, 1fr); }
  .omd-bewijs--een h2, .omd-bewijs--een .omd-bewijs__een b, .omd-bewijs--een .omd-bewijs__een span, .omd-bewijs--een .omd-bewijs__citaat { grid-column: 1; }
  .omd-bewijs--een .omd-bewijs__een { grid-template-columns: minmax(0, 1fr); }
  .omd-bewijs--een .omd-bewijs__een b { font-size: 3.25rem; white-space: normal; }
  .omd-bewijs--een .omd-bewijs__een span { margin-top: 1.25rem; font-size: 1.25rem; line-height: 1.6; }
  .omd-bewijs--een .omd-bewijs__citaat { margin-top: 2rem; }
}

/* Hele site: een tekstregel telt nooit meer dan 15 woorden (afspraak 1 nov 2026). Lopende tekst krijgt een maximale breedte. */
/* Regelbreedte (1 nov, Frans: regels waren te kort): 50ch, artikeltekst 41ch (veel korte woorden); gemeten binnen 15 woorden per regel */
main p, main li, main blockquote, main figcaption, footer p, footer li, .textfield p, .textfield li { max-width: 50ch; }
.text-center p, .text-center blockquote, p.text-center { margin-inline: auto; }
@media (min-width: 768px) { .md\:text-left p, .md\:text-left blockquote { margin-inline: 0; } }

/* Secundaire link (keuze Frans 1 nov 2026, variant E): tekst met een dunne roze pijl die bij aanwijzen langer wordt.
   Ook voor contactgegevens (1 nov). Alleen de sectorsprongen op werk.html blijven onderstreept. */
.omd-link:not(.omd-sectorlinks a), .omd-tekstlinks a,
.omd-bewijs__citaat cite a {
  display: inline-flex; align-items: center; gap: .75rem; text-decoration: none;
}
.omd-link:not(.omd-sectorlinks a)::after, .omd-tekstlinks a::after,
.omd-bewijs__citaat cite a::after {
  content: ""; flex: none; width: 2rem; height: .75rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%23ed95ed' stroke-width='2'/%3E%3C/svg%3E") right center / .5rem .75rem no-repeat,
    linear-gradient(var(--color-pink), var(--color-pink)) left center / calc(100% - 1px) 2px no-repeat;
  transition: width var(--omd-lang) var(--omd-curve);
}
.omd-link:not(.omd-sectorlinks a):hover::after, .omd-tekstlinks a:hover::after,
.omd-link:not(.omd-sectorlinks a):focus-visible::after, .omd-tekstlinks a:focus-visible::after,
.omd-bewijs__citaat cite a:hover::after, .omd-bewijs__citaat cite a:focus-visible::after { width: 6rem; }
/* In het citaat staat de link onder de naam, zodat hij bij een lange naam niet los inspringt */
.omd-bewijs__citaat cite a { display: flex; width: max-content; margin: .75rem 0 0; }
.omd-bewijs--een .omd-bewijs__citaat cite a, .omd-bewijs--een .omd-bewijs__citaat cite a:hover { color: var(--color-creme); }
/* Op het roze contactblok is de pijl indigo, zoals de tekst */
.bg-pink .omd-tekstlinks a::after, .bg-pink .omd-link::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%232d2d81' stroke-width='2'/%3E%3C/svg%3E") right center / .5rem .75rem no-repeat,
    linear-gradient(var(--color-blue), var(--color-blue)) left center / calc(100% - 1px) 2px no-repeat;
}

/* Het laatste blok voor de footer krijgt onder net zoveel lucht als erboven (behalve het roze contactblok, dat heeft zijn eigen ruimte) */
main .omd-sectie:last-child:not(#contact-options) { padding-bottom: 10.5rem; }
@media (max-width: 767px) { main .omd-sectie:last-child:not(#contact-options) { padding-bottom: 9.5rem; } }

/* Over ons, missie: tekst links, de illustratie met de twee O's rechts */
.omd-missie { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4.5rem; align-items: center; }
.omd-missie .omd-h2 { max-width: 16ch; }
.omd-missie__beeld { margin: 0; }
.omd-missie__beeld img { display: block; width: 100%; height: auto; }
@media (max-width: 1023px) { .omd-missie { gap: 2.5rem; } }
@media (max-width: 767px) { .omd-missie { grid-template-columns: 1fr; } .omd-missie__beeld { max-width: 20rem; } }
/* De kop loopt over de volle breedte; de illustratie staat naast de lopende tekst, bovenkanten gelijk */
.omd-missie { align-items: start; row-gap: 0; }
.omd-missie > div { display: contents; }
.omd-missie .omd-h2 { grid-column: 1 / -1; max-width: 22ch; }
.omd-missie .omd-tekst { grid-column: 1; grid-row: 2; }
.omd-missie__beeld { grid-column: 2; grid-row: 2; margin-top: 3rem; }
@media (max-width: 767px) { .omd-missie__beeld { grid-column: 1; grid-row: 3; margin-top: 2.5rem; } }

/* Kleinste telefoons: vijf ronde gezichten passen naast elkaar */
@media (max-width: 359px) { .omd-gezichten img { width: 2.125rem; height: 2.125rem; } }

/* De pijl groeit zonder ruimte in te nemen: de tekst breekt niet af en buren schuiven niet op */
.omd-link:not(.omd-sectorlinks a)::after, .omd-tekstlinks a::after, .omd-bewijs__citaat cite a::after { margin-right: 0; transition: width var(--omd-lang) var(--omd-curve), margin-right var(--omd-lang) var(--omd-curve); }
.omd-link:not(.omd-sectorlinks a):hover::after, .omd-tekstlinks a:hover::after, .omd-bewijs__citaat cite a:hover::after,
.omd-link:not(.omd-sectorlinks a):focus-visible::after, .omd-tekstlinks a:focus-visible::after, .omd-bewijs__citaat cite a:focus-visible::after { margin-right: -4rem; }
/* Ruimte zodat de langere pijl niet over de volgende link valt */
.omd-tekstlinks { column-gap: 4.5rem; }
.omd-contactwijzen { column-gap: 4.5rem; }
.omd-bewijs__citaat cite a { white-space: nowrap; }

/* Werk: het uitgelichte blok per sector als beeld (twee derde) met de tekst ernaast */
@media (min-width: 768px) {
  .omd-werk a.is-groot { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 2.5rem; align-items: end; }
  .omd-werk a.is-groot img { grid-row: 1 / span 3; aspect-ratio: 3 / 2; max-height: none; }
  .omd-werk a.is-groot b, .omd-werk a.is-groot small, .omd-werk a.is-groot p { grid-column: 2; }
}
.omd-werk a:focus:not(:focus-visible) { outline: none; }

/* Werk: de sprongen naar een sector krijgen een roze pijl naar beneden; bij aanwijzen zakt de pijl een stukje */
.omd-sectorlinks a.omd-link { display: inline-flex; align-items: center; gap: .6rem; text-decoration: none; color: var(--color-mint); }
.omd-sectorlinks a.omd-link::after {
  content: ""; flex: none; width: .75rem; height: 1.25rem;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23ed95ed' stroke-width='2'/%3E%3C/svg%3E") center bottom / .75rem .5rem no-repeat,
    linear-gradient(var(--color-pink), var(--color-pink)) center top / 2px calc(100% - 2px) no-repeat;
  transition: transform var(--omd-kort) var(--omd-curve);
}
.omd-sectorlinks a.omd-link:hover::after, .omd-sectorlinks a.omd-link:focus-visible::after { transform: translateY(.3rem); }
.omd-sectorlinks a.omd-link:hover { color: var(--color-pink); }

/* Een link midden in een lopende zin is gewoon onderstreept, zonder pijl */
.omd-adres p a { color: inherit; text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--color-pink); }

/* Casepagina's: uitklapbare tekst. Een tekstregel met een roze plus, geen knop met rand; de plus draait naar een kruis */
.omd-uitklap { all: unset; display: inline-flex; align-items: center; gap: .75rem; margin-top: 1.75rem; cursor: url("cursor/oogjes-groot.svg") 28 13, pointer; font-size: 1.25rem; color: var(--color-blue); }
.omd-uitklap:focus-visible { outline: 2px solid var(--color-pink); outline-offset: 4px; }
.omd-uitklap__plus { position: relative; flex: none; width: 1.25rem; height: 1.25rem; transition: transform var(--omd-lang) var(--omd-curve); }
.omd-uitklap__plus::before, .omd-uitklap__plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 1.25rem; height: 2px; background: var(--color-pink); transform: translate(-50%, -50%); }
.omd-uitklap__plus::after { transform: translate(-50%, -50%) rotate(90deg); }
.omd-uitklap[aria-expanded="true"] .omd-uitklap__plus { transform: rotate(135deg); }
.omd-uitklap__tekst { background: linear-gradient(var(--color-pink), var(--color-pink)) left bottom / 0 2px no-repeat; padding-bottom: 2px; transition: background-size var(--omd-lang) var(--omd-curve); }
.omd-uitklap:hover .omd-uitklap__tekst { background-size: 100% 2px; }
.omd-uitklap__rest { overflow: hidden; transition: height var(--omd-lang) var(--omd-curve), opacity var(--omd-lang) var(--omd-curve); }
.omd-uitklap__rest > p:first-child { margin-top: 1.75rem; }
.omd-uitklap__rest > p + p { margin-top: 1.75rem; }

/* Cases: het verhaal in de groene kop. Label met naam, resultaat of belofte als kop, links het verhaal en rechts de gegevens */
.omd-kopverhaal .omd-hero-label { font-weight: 700; }
.omd-kopverhaal h1 { max-width: 30ch; }
.omd-kopraster { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); column-gap: 4rem; align-items: start; margin-top: 3rem; }
.omd-kopverhaal .omd-tekst { color: var(--color-creme); }
.omd-kopverhaal .omd-tekst p { color: var(--color-creme); }
/* In de kop mag de tekst breder dan 42ch: gemeten blijft het binnen 15 woorden per regel */
.omd-kopraster .omd-tekst { margin-top: 0; max-width: 50ch; }
.omd-kopraster .omd-tekst p { max-width: 50ch; }
.omd-kopverhaal .omd-uitklap { color: var(--color-mint); }
.omd-kopverhaal .omd-uitklap:hover .omd-uitklap__tekst { color: var(--color-creme); }
.omd-kopgegevens { display: flex; flex-direction: column; gap: 1.5rem; margin: 0; }
.omd-kopgegevens dt { font-size: 1.25rem; font-weight: 700; color: var(--color-mint); }
.omd-kopgegevens dd { font-size: 1.25rem; line-height: 1.6; color: var(--color-creme); margin: .25rem 0 0; max-width: 30ch; }
@media (max-width: 1023px) { .omd-kopraster { grid-template-columns: 1fr; row-gap: 3rem; } }
/* Het eerste beeld en de galerij vormen één reeks, met dezelfde ruimte als tussen de galerijbeelden */
.omd-beeld-breed + .omd-sectie:has(> .omd-galerij) { margin-top: 2.5rem; }
@media (max-width: 767px) { .omd-beeld-breed + .omd-sectie:has(> .omd-galerij) { margin-top: 1.5rem; } }
/* Slot: slotzin, citaat en volgende case als één aflopende reeks */
.omd-slotzin { font-size: clamp(2rem, 3.2vw, 2.78rem); line-height: 1.15; font-weight: 700; color: var(--color-blue); max-width: 22ch; margin-bottom: 4rem; text-wrap: balance; }
.omd-volgende__label { font-size: 1.25rem; color: var(--color-blue); margin-bottom: 1.5rem; }
.omd-volgende { margin-top: 7rem; }
.omd-volgende .omd-werk { margin-top: 0; }
.omd-volgende .omd-tekstlinks { margin-top: 2.5rem; }
.omd-volgende + #contact-options { margin-top: 7rem; }
@media (max-width: 767px) { .omd-slotzin { margin-bottom: 2.5rem; } .omd-volgende, .omd-volgende + #contact-options { margin-top: 4.5rem; } }
/* Casebeelden zoals op de oude site: elk beeld in zijn eigen verhouding (nooit bijgesneden), los over de volle breedte of als paar naast elkaar */
.omd-beelden { margin-top: 3rem; display: flex; flex-direction: column; gap: 4rem; }
.omd-beelden figure { margin: 0; }
.omd-beelden img, .omd-beelden video { display: block; width: 100%; height: auto; }
.omd-beeldraster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; align-items: start; }
.omd-beelden figcaption { margin-top: 1rem; font-size: 1rem; line-height: 1.5; color: var(--color-blue); }
@media (min-width: 768px) { .omd-beeldraster { gap: 4rem; } }
/* Werkkaarten zoals op de oude site: twee per rij, elk beeld in zijn eigen verhouding, verticaal op elkaar uitgelijnd */
.omd-werk--oud { gap: 4rem; align-items: center; }
.omd-werk--oud img, .omd-werk--oud video { display: block; width: 100%; height: auto; aspect-ratio: auto !important; max-height: none !important; object-fit: fill; }
.omd-werk--volgende a.is-groot { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 4rem; align-items: center; }
@media (max-width: 767px) { .omd-werk--oud { grid-template-columns: 1fr; gap: 3rem; } }
.omd-slotzin:last-child { margin-bottom: 0; }
/* Werk: sectoren als filters. Eén lijst in de volgorde van de oude site; een knop toont alleen die sector */
.omd-filters button { background: none; border: 0; padding: 0; font: inherit; cursor: inherit; }
.omd-filters .omd-link[aria-pressed="true"] { color: var(--color-pink); text-decoration-color: var(--color-pink); }
.omd-werk[data-filterbaar] > a { transition: opacity var(--omd-kort) var(--omd-curve); }
.omd-werk[data-filterbaar] > a.is-uit { opacity: 0; }
.omd-werk[data-filterbaar] { scroll-margin-top: 10rem; }
/* Filterknoppen: geen pijl (ze gaan nergens heen), mint; de gekozen sector roze en onderstreept */
.omd-filters button.omd-link { display: inline-block; color: var(--color-mint); text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 8px; transition: color var(--omd-kort) var(--omd-curve), text-decoration-color var(--omd-kort) var(--omd-curve); }
.omd-filters button.omd-link::after { content: none !important; display: none !important; }
.omd-filters button.omd-link:hover, .omd-filters button.omd-link:focus-visible { color: var(--color-pink); }
.omd-filters button.omd-link[aria-pressed="true"] { color: var(--color-pink); text-decoration-color: var(--color-pink); }
/* Over ons: de link onder de stappen als grote, vette tekstlink (geen tweede knop) */
.omd-slotregel--groot { font-size: 1.5rem; max-width: none; }
.omd-slotregel--groot .omd-link { font-weight: 700; font-size: inherit; text-wrap: balance; }

/* Kop schuift weg bij omlaag scrollen en komt terug bij omhoog scrollen, zoals op de oude site; zo schuift er nooit tekst onder het logo */
header.js-reveal-header.omd-kop-weg:not(.omd-menu-open) { translate: 0 -100%; }
/* Wat het van de klant vraagt: één heldere regel onder de stappen, in plaats van een vage regel per stap */
.omd-vanjou { margin-top: 3rem; font-size: 1.25rem; line-height: 1.6; color: var(--color-blue); }
.omd-vanjou b { font-weight: 700; }
/* Over ons: de link onder de stappen in tekstmaat en niet vet, zodat hij niet met de kopjes vecht; vaste roze onderstreping maakt hem herkenbaar */
.omd-slotregel--groot { font-size: 1.25rem; margin-top: 2rem; }
.omd-slotregel--groot a.omd-link { font-weight: 400; text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 2px; text-underline-offset: 6px; }
/* Diensten: 'Wat we maken' is de overkoepelende kop. Denken, Maken en Groeien een stap kleiner (60/1,618), en de kop staat dicht op het eerste deel */
.omd-dienstgroep .omd-h2 { font-size: clamp(1.39rem, 2.6vw, 2.32rem); }
.omd-groepkop + .omd-dienstgroep { margin-top: 4.5rem; }
@media (max-width: 767px) { .omd-groepkop + .omd-dienstgroep { margin-top: 3rem; } }
/* Diensten: de dienstlijst gebouwd als de momentenlijst op de homepage (lijnen over de volle breedte, titel en zin, roze pijl rechts).
   De pijl staat alleen bij items die een link zijn; titels een stap kleiner dan Denken/Maken/Groeien (37/1,618) */
.omd-dienstgroep__lijst li { max-width: none; padding: 1.5rem 0; }
.omd-dienstgroep__lijst li:has(> a) { padding: 0; }
.omd-dienstgroep__lijst a { display: flex; align-items: flex-start; justify-content: space-between; gap: 1.25rem; padding: 1.5rem 0; }
.omd-dienstgroep__lijst b { font-size: 1.43rem; line-height: 1.2; }
.omd-dienstgroep__lijst .omd-dl-tekst { display: block; margin: 0; font-size: inherit; max-width: none; }
.omd-dienstgroep__lijst svg { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .3rem; transition: transform var(--omd-kort) var(--omd-curve); }
.omd-dienstgroep__lijst a:hover svg, .omd-dienstgroep__lijst a:focus-visible svg { transform: translateX(.3rem); }
.omd-dienstgroep__lijst a:hover b, .omd-dienstgroep__lijst a:focus-visible b { text-decoration: none; }
/* Citaat direct onder de beelden van 'Wat je krijgt', zodat het aansluit op wat je net zag */
.omd-citaat--onder-beeld { margin-top: 4rem; }
/* Instapblok (zoals de Merk-Check) en het aanboddocument dichter op elkaar */
.omd-instap + .omd-sectie { margin-top: 7rem; }

.textfield p, .textfield li { max-width: 41ch; }

/* Ritme (1 nov, Frans: pagina's voelden leeg): ruimte tussen blokken een stap kleiner op de 1,618-schaal, 11rem → 6.8rem (mobiel 7rem → 4.3rem) */
.omd-sectie, .omd-bewijs, .omd-bewijs--een { margin-top: 6.8rem; }
@media (max-width: 767px) { .omd-sectie, .omd-bewijs, .omd-bewijs--een { margin-top: 4.3rem; } }
/* Lijn onder de sectiekop, zoals op de oude site ('Bekijk meer werk'): 1px indigo over de volle breedte; bindt de kop aan wat eronder komt */
.omd-sectie { container-type: inline-size; }
.omd-sectie > .omd-h2::after { content: ""; display: block; width: 100cqw; height: 1px; margin-top: 2.5rem; background: var(--color-blue); }
/* 'Wat het van jou vraagt' sluit het stappenblok af */
.omd-vanjou { margin-top: 2rem; }
/* Aanbod op papier ('Iets om door te sturen naar je directie'): een eigen mint vlak, want het is een aanbod voor een andere lezer.
   Geen lijn onder de kop (het vlak scheidt al) en een tekstlink, zodat 'Plan een gesprek' de enige knop in beeld blijft */
.omd-aanbodvlak { background: var(--color-mint); padding: 3.5rem 4rem 4rem; }
.omd-aanbodvlak .omd-directie { margin-top: 2rem; }
.omd-aanbodvlak .omd-link { color: var(--color-blue); font-weight: 700; white-space: nowrap; }
.omd-aanbodvlak a.omd-link::after {
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 12'%3E%3Cpath d='M1 1l5 5-5 5' fill='none' stroke='%232d2d81' stroke-width='2'/%3E%3C/svg%3E") right center / .5rem .75rem no-repeat,
    linear-gradient(var(--color-blue), var(--color-blue)) left center / calc(100% - 1px) 2px no-repeat;
}
@media (max-width: 767px) { .omd-aanbodvlak { padding: 2.25rem 1.5rem 2.5rem; } .omd-aanbodvlak .omd-link { white-space: normal; } }
/* Aanbodvlak met beeld: tekst en crème knop links, een nagemaakte omslag van het aanboddocument rechts.
   Crème knop: duidelijk een aanvraag, en anders dan de indigo 'Plan een gesprek' in het roze blok */
.omd-aanbodvlak { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4rem; align-items: center; }
.omd-aanbodvlak__tekst p { font-size: 1.25rem; line-height: 1.65; color: var(--color-blue); margin-top: 2rem; }
.omd-aanbodvlak__tekst .btn { margin-top: 2.5rem; }
.btn.omd-creme { background-color: var(--color-creme); color: var(--color-blue); }
.btn.omd-creme:hover, .btn.omd-creme:focus-visible { background-color: var(--color-blue); color: var(--color-creme); }
.omd-omslag { padding: 1.5rem 2rem 1.5rem 0; }
.omd-omslag__vel { width: 15rem; aspect-ratio: 1 / 1.414; background: var(--color-creme); padding: 2rem 1.75rem; display: flex; flex-direction: column; transform: rotate(-4deg); box-shadow: 0 1.75rem 3rem rgba(45, 45, 129, .18); }
.omd-omslag__logo { width: 3.25rem; height: auto; fill: var(--color-pink); }
.omd-omslag__sub { margin-top: auto; font-size: .77rem; color: var(--color-blue); }
.omd-omslag__titel { margin-top: .35rem; font-size: 1.25rem; line-height: 1.15; font-weight: 700; color: var(--color-blue); }
.omd-omslag__voet { margin-top: 1.5rem; font-size: .77rem; color: var(--color-blue); }
@media (max-width: 767px) { .omd-aanbodvlak { grid-template-columns: 1fr; gap: 2.5rem; } .omd-omslag { padding: 0 0 .5rem; justify-self: center; } .omd-omslag__vel { width: 11rem; padding: 1.5rem 1.25rem; } } 
@media (max-width: 767px) { .omd-aanbodvlak .omd-omslag { order: -1; } .omd-aanbodvlak__tekst .btn { width: 100%; justify-content: center; text-align: center; padding-left: 1.25rem; padding-right: 1.25rem; } }
/* Naamgeving: namen die we bedachten, als typografische wand (echte tekst, met link naar de case waar die er is) */
.omd-namen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3rem 4rem; margin-top: 3rem; color: var(--color-blue); }
.omd-namen__naam { display: block; color: inherit; text-decoration: none; }
.omd-namen__naam b { display: block; font-size: clamp(1.75rem, 3vw, 2.32rem); line-height: 1.1; font-weight: 700; }
.omd-namen__naam span { display: block; margin-top: .4rem; font-size: 1.25rem; line-height: 1.4; }
a.omd-namen__naam b { background: linear-gradient(var(--color-pink), var(--color-pink)) left bottom / 0 3px no-repeat; transition: background-size var(--omd-lang) var(--omd-curve); }
a.omd-namen__naam:hover b, a.omd-namen__naam:focus-visible b { background-size: 100% 3px; }
@media (max-width: 767px) { .omd-namen { grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } }
/* Twee manieren naast elkaar */
.omd-twee { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; margin-top: 3rem; color: var(--color-blue); }
.omd-twee h3 { font-size: 1.43rem; line-height: 1.2; font-weight: 700; }
.omd-twee p { margin-top: 1rem; font-size: 1.25rem; line-height: 1.65; }
@media (max-width: 767px) { .omd-twee { grid-template-columns: 1fr; gap: 2.5rem; } }
.omd-herken__beeld.omd-herken__beeld--heel { aspect-ratio: auto !important; align-self: center; }
.omd-herken__beeld--heel img { aspect-ratio: auto !important; height: auto !important; object-fit: contain !important; }
@media (max-width: 767px) { .omd-namen__naam b { font-size: 1.43rem; } .omd-namen__naam span { font-size: 1.0625rem; } }
.omd-beelden--los { margin-top: 3rem; }
/* Naamgeving: de namen als grote lijst; wie een naam aanwijst, ziet rechts het beeld van dat merk (zoals de momentenlijst op de homepage) */
.omd-namenlijst { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 4rem; align-items: start; margin-top: 3rem; }
.omd-namenlijst__lijst { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--omd-lijn); }
.omd-namenlijst__lijst li { max-width: none; border-bottom: 1px solid var(--omd-lijn); }
.omd-namenlijst__naam { display: flex; align-items: center; justify-content: space-between; gap: 1.25rem; padding: 1.25rem 0; color: var(--color-blue); text-decoration: none; outline-offset: 4px; }
.omd-namenlijst__naam b { display: inline; font-size: 1.875rem; line-height: 1.1; font-weight: 700; margin-right: 1rem; }
.omd-namenlijst__naam small { font-size: 1.0625rem; line-height: 1.45; }
.omd-namenlijst__naam svg { flex: none; width: 1.25rem; height: 1.25rem; transition: transform var(--omd-kort) var(--omd-curve); }
a.omd-namenlijst__naam:hover svg, a.omd-namenlijst__naam:focus-visible svg { transform: translateX(.3rem); }
.omd-namenlijst__naam.is-actief b { color: var(--color-blue); text-decoration: underline; text-decoration-color: var(--color-pink); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.omd-namenlijst__beeld { position: sticky; top: 9rem; aspect-ratio: 1 / 1; }
.omd-namenlijst__beeld figure { position: absolute; inset: 0; margin: 0; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity var(--omd-kort) var(--omd-curve); }
.omd-namenlijst__beeld figure.is-actief { opacity: 1; }
.omd-namenlijst__beeld img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.omd-namenlijst__vlak { background: var(--color-blue); flex-direction: column; padding: 2.5rem; text-align: center; }
.omd-namenlijst__vlak b { color: var(--color-pink); font-size: 2.78rem; line-height: 1.1; font-weight: 700; }
.omd-namenlijst__vlak span { margin-top: 1rem; color: var(--color-creme); font-size: 1.25rem; line-height: 1.4; max-width: 22ch; }
@media (max-width: 1023px) { .omd-namenlijst { grid-template-columns: 1fr; } .omd-namenlijst__beeld { display: none; } .omd-namenlijst__naam b { font-size: 1.43rem; display: block; margin: 0 0 .25rem; } .omd-namenlijst__naam { align-items: flex-start; } }
/* 'Waar je nu staat' strakker: tekst en foto even breed, foto liggend */
.omd-herken--breed { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4rem; }
.omd-herken--breed .omd-herken__beeld { aspect-ratio: 4 / 3; }
@media (max-width: 1023px) { .omd-herken--breed { grid-template-columns: 1fr; gap: 2.5rem; } }
/* Campagnes: twee resultaten met hun eigen campagnebeeld, in eigen verhouding */
.omd-twee figure { margin: 0 0 1.75rem; }
.omd-twee figure img { display: block; width: 100%; height: auto; }
/* LinkedIn: korte regel onder het bewijs, over andere klanten zonder cijfers */
.omd-bewijs__ook { margin-top: 3rem; font-size: 1.25rem; line-height: 1.5; }

/* Letterschaal op 1,618 (2 nov 2026). Lopende tekst is de basismaat; niets kleiner, alleen omhoog in stappen van 1,618.
   20 / 32,4 / 52,4 / 84,8 px. Op de telefoon gaan koppen en grote cijfers één stap omlaag. */
:root { --omd-t0: 20px; --omd-t1: 32.4px; --omd-t2: 52.4px; --omd-t3: 84.8px; }
/* Basis: lopende tekst, onderschriften, afzenders, rollen en labels */
.omd-formulier label, main cite, main cite a, .omd-logos p, .omd-filters .omd-link, .omd-krijgt figcaption,
.omd-team li span, .omd-team li b, .omd-dienstgroep__lijst li span, .omd-dienstgroep__lijst li b,
.omd-namenlijst__naam small, .omd-moment small, .omd-momenten__lijst small, .omd-dl-tekst span, .omd-dl-tekst b,
.omd-mensen-drie li span, .omd-adres p, .omd-adres p a, .omd-bewijs__cijfers a span, .omd-stappen li p,
.omd-werk--oud a b, .textfield p, .textfield li, main figcaption, main li > a {
  font-size: var(--omd-t0) !important; line-height: 1.6 !important; }
.textfield p, .textfield li { max-width: 40rem; }
/* Stap 1: tussenkoppen, stappen, citaten, titels van momenten en namen */
.omd-stappen li h3, .omd-namenlijst__naam b, .omd-moment > span, .omd-momenten__lijst a > span > b,
.omd-bewijs__een span, .textfield h3, .textfield blockquote p, main blockquote p.text-3xl, .omd-citaat--groot p, .omd-twee h3 {
  font-size: var(--omd-t1) !important; line-height: 1.25 !important; }
/* Stap 2: sectiekoppen en grote zinnen */
main h2, .omd-h2, .omd-grotequote p, .omd-slotzin, .omd-namenlijst__vlak b, .omd-hero__tekst h1, .omd-hero__tekst h1 span,
.omd-bewijs__cijfers a b, .textfield h2 {
  font-size: var(--omd-t2) !important; line-height: 1.12 !important; }
/* Stap 3: paginatitels en grote cijfers */
.omd-paginakop h1, .omd-stappen li > b, .omd-bewijs__een b {
  font-size: var(--omd-t3) !important; line-height: 1.02 !important; }
@media (max-width: 767px) {
  main h2, .omd-h2, .omd-grotequote p, .omd-slotzin, .omd-namenlijst__vlak b, .omd-hero__tekst h1, .omd-hero__tekst h1 span,
  .omd-bewijs__cijfers a b, .textfield h2 { font-size: var(--omd-t1) !important; line-height: 1.2 !important; }
  .omd-paginakop h1, .omd-stappen li > b, .omd-bewijs__een b { font-size: var(--omd-t2) !important; line-height: 1.08 !important; }
}

/* Pijl onder de hero, zoals op de oude site: roze, stuitert, klik scrolt één scherm (2 nov 2026).
   De hero houdt onderaan ruimte vrij zodat de pijl nooit tegen de link of de foto staat; op de telefoon geen pijl. */
@media (min-width: 768px) { section.omd-hero-vlak { padding-bottom: 10.5rem !important; } }
#page-jump { cursor: pointer; }
@media (max-width: 767px) { .omd-pagejump { display: none; } }

/* Wat je krijgt met twee beelden (Bedrijf verkopen: geen campagne op straat, 2 nov 2026) */
.omd-krijgt--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Homepage: 'Branding agency in Rotterdam' staat in de h1 (zoekwoord), maar ziet eruit als het kleine label erboven (2 nov 2026) */
.omd-hero__tekst h1 .omd-hero-label { display: block; font-size: var(--omd-t0) !important; line-height: 1.6 !important; font-weight: 400; color: var(--color-mint); margin-bottom: 1.5rem; }

/* Hero: altijd minstens 52px lucht tussen logo en het regeltje 'Branding agency in Rotterdam' (logo eindigt op 128px) */
section.omd-hero-vlak { padding-top: 11.25rem !important; }

/* Bewijsvlak homepage: drie cijfers met één korte regel, daaronder één citaat groot (2 nov 2026) */
.omd-bewijs__citaten--een { grid-template-columns: 1fr; margin-top: 6rem; }
.omd-bewijs__citaten--een .omd-bewijs__citaat { flex-direction: row; align-items: center; gap: 2.5rem; max-width: 56rem; }
.omd-bewijs__citaten--een .omd-bewijs__citaat img { width: 8.5rem; height: 8.5rem; }
.omd-bewijs__citaten--een .omd-bewijs__citaat p { font-size: var(--omd-t1) !important; line-height: 1.25 !important; }
@media (max-width: 767px) { .omd-bewijs__citaten--een .omd-bewijs__citaat { flex-direction: column; align-items: flex-start; gap: 1.5rem; } .omd-bewijs__citaten--een .omd-bewijs__citaat img { width: 5.5rem; height: 5.5rem; } }

/* 'Bekijk de case' onder citaten: ook in het citatenblok van de homepage de pijl-link (de blokregel hierboven verborg de pijl) */
.omd-bewijs__citaten .omd-bewijs__citaat cite a { display: flex; align-items: center; gap: .75rem; }

/* Diensten: de blokkoppen blijven 52,4; de fasekoppen Denken, Maken en Groeien een stap kleiner (32,4) voor de rangorde (3 nov 2026; 84,8 was te veel) */
main .omd-dienstgroep__tekst h2.omd-h2 { font-size: var(--omd-t1) !important; line-height: 1.2 !important; }
@media (max-width: 767px) { main .omd-dienstgroep__tekst h2.omd-h2 { font-size: var(--omd-t1) !important; } }

/* Diensten: 'Denken, maken, groeien.' groot in drie regels (3 nov 2026) */
/* Denken, maken, groeien: zelfde maat als de andere sectiekoppen zoals Zes momenten (feedback Esther, 11 nov 2026) */

/* Landingspagina's: het label boven de paginatitel staat in de h1 (zoekwoord), maar ziet eruit als het kleine label (3 nov 2026) */
.omd-paginakop h1 .omd-hero-label { display: block; font-size: var(--omd-t0) !important; line-height: 1.6 !important; font-weight: 400; color: var(--color-mint); margin-bottom: 1.5rem; }

/* Contact: gegevens groot bovenaan, daarna één knop (3 nov 2026) */
.omd-contactgroot { display: grid; gap: .35rem; margin-top: 2.5rem; }
.omd-contactgroot a { font-size: var(--omd-t1) !important; line-height: 1.25 !important; font-weight: 700; color: var(--color-creme); text-decoration: none; width: max-content; max-width: 100%; transition: color var(--omd-kort) var(--omd-curve); }
.omd-contactgroot a:hover, .omd-contactgroot a:focus-visible { color: var(--color-pink); }
.omd-paginakop .omd-contactwijzen { margin-top: 1.5rem; }
.omd-contact-afspraak { margin-top: 3rem !important; }
.omd-contactknop { margin-top: 1.5rem; }
.omd-contact-snel { margin-top: 1.5rem !important; }
@media (max-width: 767px) { .omd-contactgroot a { font-size: var(--omd-t0) !important; line-height: 1.6 !important; width: auto; } }
/* 'Of plan direct…' sluit zonder witregel aan op de regel erboven */
.omd-paginakop .omd-contact-afspraak { margin-top: .25rem !important; }

/* Contact: de vier contactwegen met de roze pijl van de tekstlinks, zodat ze klikbaar voelen (3 nov 2026) */
.omd-contactgroot a.omd-link { display: inline-flex; align-items: center; gap: .75rem; color: var(--color-creme) !important; text-decoration: none; }
.omd-contactgroot a.omd-link:hover, .omd-contactgroot a.omd-link:focus-visible { color: var(--color-pink) !important; }

/* Huisstijl: stylescapes Zpot en collage (3 nov 2026) */
.omd-stylescapes { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2.5rem; margin-top: 3rem; }
.omd-stylescapes figure, .omd-stylescape__strook { min-width: 0; max-width: 100%; }
.omd-stylescapes figure { margin: 0; }
.omd-stylescape__strook img { display: block; width: 100%; height: auto; }
.omd-stylescapes figcaption { margin-top: .75rem; color: var(--color-blue); }
.omd-collage { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 15rem; grid-auto-flow: dense; gap: .75rem; margin-top: 3rem; }
.omd-collage figure { margin: 0; overflow: hidden; }
.omd-collage img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.omd-collage figure:hover img { transform: scale(1.04); }
.omd-collage__groot { grid-column: span 2; grid-row: span 2; }
.omd-collage__hoog { grid-row: span 2; }
.omd-collage__breed { grid-column: span 2; }
@media (max-width: 767px) {
  .omd-stylescapes { gap: 1.5rem; }
  .omd-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 9.5rem; gap: .5rem; }
}
.omd-collage__links img { object-position: left center; }
/* Collage schaalt mee: rijhoogte volgt de tegelbreedte (3 nov 2026) */
.omd-collage { grid-auto-rows: auto !important; }
.omd-collage figure { aspect-ratio: 4 / 3; }
.omd-collage .omd-collage__groot, .omd-collage .omd-collage__hoog { aspect-ratio: auto; }
@media (max-width: 767px) {
  .omd-collage .omd-collage__groot { aspect-ratio: 4 / 3; }
}
/* Logoregel: tussenmaat voor logo's met beeldmerk (3 nov 2026) */
.omd-logos .omd-logo--midden img { height: 2.25rem; }
@media (max-width: 767px) { .omd-logos .omd-logo--midden img { height: 1.75rem; } }
.omd-logos .omd-logo--klein img { height: 1.375rem; }
@media (max-width: 767px) { .omd-logos .omd-logo--klein img { height: 1.125rem; } }

/* Logoregel als lichtkrant, van rechts naar links (3 nov 2026) */
.omd-logos { display: block !important; }
.omd-logos p { margin-bottom: 1.5rem !important; }
.omd-logos__band { display: flex; overflow: hidden; width: 100%; }
.omd-logos ul.omd-logos__spoor { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 0 4rem !important; padding-right: 4rem !important; flex-shrink: 0; grid-template-columns: none !important; animation: omd-lichtkrant 40s linear infinite; }
.omd-logos__band:hover .omd-logos__spoor { animation-play-state: paused; }
@keyframes omd-lichtkrant { from { transform: translateX(0); } to { transform: translateX(-100%); } }
@media (max-width: 767px) { .omd-logos ul.omd-logos__spoor { gap: 0 2.5rem !important; padding-right: 2.5rem !important; animation-duration: 30s; } }
@media (prefers-reduced-motion: reduce) { .omd-logos ul.omd-logos__spoor { animation: none; } .omd-logos__band { overflow-x: auto; } }
.omd-logos__band { -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%); }

/* Logoregel: onder uitgelijnd, elk logo ongeveer even zwaar: vlak en inkt gelijk (3 nov 2026) */
.omd-logos ul.omd-logos__spoor { align-items: flex-end !important; }
.omd-logos .omd-logos__spoor li { display: flex; align-items: flex-end; }
.omd-logos .omd-logos__spoor img[src$="/dormakaba.png"] { height: 1.500rem !important; }
.omd-logos .omd-logos__spoor img[src$="/rijkswaterstaat.png"] { height: 1.692rem !important; }
.omd-logos .omd-logos__spoor img[src$="/van-oord.png"] { height: 1.582rem !important; }
.omd-logos .omd-logos__spoor img[src$="/prodrive.png"] { height: 1.742rem !important; }
.omd-logos .omd-logos__spoor img[src$="/boskalis.png"] { height: 2.544rem !important; }
.omd-logos .omd-logos__spoor img[src$="/sweco.png"] { height: 2.570rem !important; }
.omd-logos .omd-logos__spoor img[src$="/vorm.png"] { height: 1.471rem !important; }
.omd-logos .omd-logos__spoor img[src$="/volkerwessels.png"] { height: 1.510rem !important; }
.omd-logos .omd-logos__spoor img[src$="/bpd.png"] { height: 2.000rem !important; }
@media (max-width: 767px) {
  .omd-logos .omd-logos__spoor img[src$="/dormakaba.png"] { height: 1.200rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/rijkswaterstaat.png"] { height: 1.354rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/van-oord.png"] { height: 1.266rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/prodrive.png"] { height: 1.393rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/boskalis.png"] { height: 2.035rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/sweco.png"] { height: 2.056rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/vorm.png"] { height: 1.176rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/volkerwessels.png"] { height: 1.208rem !important; }
  .omd-logos .omd-logos__spoor img[src$="/bpd.png"] { height: 1.600rem !important; }
}

/* BPD: tekst op de onderlijn, beeldmerk en p steken eronder uit (3 nov 2026) */
.omd-logos .omd-logos__spoor img[src$="/bpd.png"] { margin-bottom: calc(-2rem * 0.336) !important; }
@media (max-width: 767px) { .omd-logos .omd-logos__spoor img[src$="/bpd.png"] { margin-bottom: calc(-1.6rem * 0.336) !important; } }
.omd-logos__band { padding-bottom: 1rem; margin-bottom: -1rem; }

/* Rijkswaterstaat: letters op de onderlijn, j steekt eronder uit (3 nov 2026) */
.omd-logos .omd-logos__spoor img[src$="/rijkswaterstaat.png"] { margin-bottom: calc(-1.692rem * 0.224) !important; }
@media (max-width: 767px) { .omd-logos .omd-logos__spoor img[src$="/rijkswaterstaat.png"] { margin-bottom: calc(-1.354rem * 0.224) !important; } }
/* Momentenlijst: beeld en pijl bovenaan gelijk met de kop, ook bij een onderzin van twee regels (3 nov 2026) */
.omd-momenten__lijst a { align-items: flex-start !important; }
.omd-momenten__lijst .omd-momenten__mini { margin-top: .35rem; }
/* Lichtkrant rustiger (3 nov 2026) */
.omd-logos ul.omd-logos__spoor { animation-duration: 75s !important; }
@media (max-width: 767px) { .omd-logos ul.omd-logos__spoor { animation-duration: 55s !important; } }

/* Links in lopende tekst en in de dienstenlijst van cases herkenbaar (3 nov 2026) */
main p a:not([class]):not([href^="tel"]):not([href^="mailto"]), main li > a:not([class]):not(:only-child), .omd-casegegevens dd a, main dd a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
main p a:not([class]):hover, main dd a:hover { text-decoration-thickness: 2px; }

/* Artikelen: beeld bovenaan en halverwege de tekst (3 nov 2026) */
.omd-artikelbeeld { margin: 0 0 2.5rem; }
.textfield .omd-artikelbeeld:not(:first-child) { margin: 2.5rem 0; }
.omd-artikelbeeld img { display: block; width: 100%; height: auto; }

/* Artikelen in de opbouw van de andere pagina's: groen kopvlak, rustige tekstkolom (3 nov 2026) */
.omd-artikel { display: block !important; }
.omd-artikel > div { max-width: 46rem; }
.omd-artikel .textfield h2, .omd-artikel .textfield h3 { font-size: var(--omd-t1) !important; line-height: 1.2 !important; font-weight: 700; color: var(--color-blue); margin: 3.5rem 0 1.25rem; text-wrap: balance; }
.omd-artikel .textfield p, .omd-artikel .textfield li { font-size: var(--omd-t0) !important; line-height: 1.6 !important; }
.omd-artikel .textfield p + p { margin-top: 1.25rem; }
.omd-artikel .textfield ul, .omd-artikel .textfield ol { margin: 1.25rem 0; }
@media (max-width: 767px) { .omd-artikel .textfield h2, .omd-artikel .textfield h3 { font-size: var(--omd-t0) !important; margin-top: 2.5rem; } }
/* Artikelen met de oude blokken: alles in één kolom (3 nov 2026) */
body:has(.omd-artikel) main article .grid.lg\:grid-cols-2 { display: block !important; max-width: 46rem; }
body:has(.omd-artikel) main article .grid.lg\:grid-cols-2 > * + * { margin-top: 2.5rem; }
body:has(.omd-artikel) main article .md\:max-w-3xl { max-width: 46rem !important; }
body:has(.omd-artikel) main article .container > figure { max-width: 46rem; }
body:has(.omd-artikel) main article .textfield i { font-style: normal; }
body:has(.omd-artikel) main article .omd-slotregel { margin-top: 1.5rem; }
body:has(.omd-artikel) main article .textfield p, body:has(.omd-artikel) main article .textfield li { font-size: var(--omd-t0) !important; line-height: 1.6 !important; }
body:has(.omd-artikel) main article .textfield h2, body:has(.omd-artikel) main article .textfield h3 { font-size: var(--omd-t1) !important; line-height: 1.2 !important; font-weight: 700; margin: 3.5rem 0 1.25rem; }
@media (max-width: 767px) { body:has(.omd-artikel) main article .textfield h2, body:has(.omd-artikel) main article .textfield h3 { font-size: var(--omd-t0) !important; margin-top: 2.5rem; } }

/* Pijlen bij links optisch gecentreerd op de kleine letters, niet op de regelhoogte (3 nov 2026) */
.omd-link:not(.omd-sectorlinks a)::after, .omd-tekstlinks a::after, .omd-bewijs__citaat cite a::after, .omd-aanbodvlak a.omd-link::after { position: relative; top: .14em; }

/* Webp met jpg als terugval: de picture-laag telt niet mee in de opmaak */
picture.omd-webp { display: contents; }
picture.omd-webp > source { display: none; }

/* Feedbackronde 10 nov 2026 (Francien, Marloes, Esther, Jakob) */
/* Gezichten in het contactblok half over elkaar: een illustratie van het team, geen keuzeknop */
.omd-gezichten img { margin-left: -1.25rem; box-shadow: 0 0 0 3px var(--color-pink); pointer-events: none; }
.omd-gezichten > img:first-child, .omd-gezichten > picture:first-child img { margin-left: 0; }
@media (max-width: 767px) { .omd-gezichten img { margin-left: -.8rem; box-shadow: 0 0 0 2px var(--color-pink); } }
@media (max-width: 359px) { .omd-gezichten img { margin-left: -.6rem; } }
/* Ronding 12px alleen op knoppen (variant 6, Frans 10 nov); vlakken en foto's blijven recht */
.btn, .omd-menuknop { border-radius: 12px !important; }
/* Al het werk: los van de laatste kaart, als eigen regel onder het raster */
.omd-slotregel--werk { margin-top: 5.2rem; }
.omd-slotregel--werk a.omd-link { font-weight: 700; }
@media (max-width: 767px) { .omd-slotregel--werk { margin-top: 3.25rem; } }
/* Zes momenten op Diensten: onderlijnen in elke rij op één hoogte */
.omd-waar-sta-je ul > li { display: flex; }
.omd-waar-sta-je ul > li > a { flex: 1; }
/* Over ons: drie illustraties bij de drie stappen (onderzoeken, bouwen, gezien worden); missie zonder beeld */
.omd-stap-illu { margin: 0 0 2rem; }
.omd-stap-illu img { display: block; width: 100%; max-width: 20rem; height: auto; }
.omd-missie .omd-tekst { grid-column: 1 / -1; }
/* Over ons: regel onder de stappen niet tegen de stappen aan */
#werkwijze .omd-vanjou { margin-top: 4.25rem; }
@media (max-width: 1023px) { .omd-stap-illu img { max-width: 16rem; } #werkwijze .omd-vanjou { margin-top: 3rem; } }
/* Diensten: kopfoto lager op grote schermen, zodat de pagina eerder begint (Francien) */
@media (min-width: 768px) { .omd-beeld-laag img { max-height: 45vh; } }
/* Home, Wie het werk doet: links onder de alinea in plaats van zwevend rechts (Esther, Marloes) */
.omd-mensen__tekst { grid-template-columns: 1fr; gap: 2rem; }
.omd-mensen__links { flex-direction: row; flex-wrap: wrap; gap: .75rem 3rem; }
/* Citaat: naam en 'Bekijk de case' duidelijk uit elkaar (Esther) */
.omd-bewijs__citaat cite a, .omd-bewijs__citaten .omd-bewijs__citaat cite a { display: block; width: max-content; margin: 1.25rem 0 0; font-weight: 700; }
/* Aanbodvlak: echte omslag van het aanboddocument in plaats van het nagemaakte vel */
.omd-omslag--echt img { display: block; width: 22rem; height: auto; transform: rotate(-3deg); box-shadow: 0 1.75rem 3rem rgba(45, 45, 129, .22); }
@media (max-width: 767px) { .omd-omslag--echt img { width: 16rem; } }
/* Aanbodvlak: foto van het lookbook op een bureau (mock-up), recht en zonder schaduw */
.omd-omslag--foto { padding: 0; }
.omd-omslag--foto img { display: block; width: 28rem; height: auto; }
@media (max-width: 767px) { .omd-omslag--foto img { width: 100%; } }
/* Aanbodvlak met foto: tekstkolom houdt altijd ruimte; onder 1280px beeld boven de tekst */
.omd-aanbodvlak:has(.omd-omslag--foto) { grid-template-columns: minmax(0, 1fr) minmax(0, 28rem); }
.omd-omslag--foto img { width: 100%; max-width: 28rem; }
@media (max-width: 1279px) {
  .omd-aanbodvlak:has(.omd-omslag--foto) { grid-template-columns: 1fr; gap: 2.5rem; }
  .omd-aanbodvlak .omd-omslag--foto { order: -1; }
  .omd-aanbodvlak .omd-omslag--foto { justify-self: stretch; width: 100%; }
  .omd-omslag--foto img { max-width: 36rem; }
}
/* Stappen met portret: op smallere schermen staat het portret naast het cijfer */
@media (max-width: 1023px) {
  .omd-stappen--mensen li { display: grid; grid-template-columns: auto 1fr; column-gap: 1.75rem; align-items: center; }
  .omd-stappen--mensen li > * { grid-column: 1 / -1; }
  .omd-stappen--mensen li > b { grid-column: 1; }
  .omd-stappen--mensen li img { grid-column: 2; margin-top: 0; }
}
/* Aanbodvlak: een echte pagina uit het lookbook (variant 3, Frans 10 nov) */
.omd-omslag--foto img { box-shadow: 0 1.5rem 3rem rgba(45, 45, 129, .18); }
.omd-omslag__onder { margin-top: 1rem; font-size: 1.25rem; line-height: 1.65; color: var(--color-blue); }
/* Aanbodvlak: foto van de open brochure (Frans 10 nov), zonder schaduw en zonder onderschrift */
.omd-omslag--foto img { box-shadow: none; }
/* Lookbookformulier in het mint aanbodvlak (10 nov 2026): één kolom, witte velden zonder rand, labels op tekstmaat */
.omd-lookbookform { grid-template-columns: 1fr; gap: 1.25rem; margin-top: 2.25rem; max-width: 30rem; }
.omd-lookbookform label { font-size: 1.25rem; line-height: 1.4; }
.omd-lookbookform label span { font-weight: 400; }
.omd-lookbookform input { font-size: 1.25rem; padding: .8rem 1rem; }
.omd-lookbookform input:focus { background: var(--color-creme); }
.omd-lookbookform .btn { margin-top: .75rem; }
.omd-lookbookform__melding { font-size: 1.25rem; line-height: 1.5; font-weight: 700; color: var(--color-blue); margin: 0 !important; }
.omd-lookbookform--klaar label, .omd-lookbookform--klaar button { display: none; }
@media (max-width: 767px) { .omd-lookbookform .btn { width: 100%; justify-content: center; } }
/* Nooit één los woord op de laatste regel (Frans, 10 nov 2026): vaste spatie in de html plus betere afbreekregels */
p, li, figcaption, cite, dd, small { text-wrap: pretty; }
h1, h2, h3, h4 { text-wrap: balance; }
/* Telefoon: "Wat je krijgt" in één kolom, zodat bijschriften van twee woorden op één regel passen */
@media (max-width: 479px) { .omd-krijgt { grid-template-columns: 1fr; } }
.omd-heel { white-space: nowrap; }
/* Paginatitels één stap kleiner op tablet en telefoon (Frans, 10 nov 2026): lange woorden in grote koppen
   ("beoordelaar onthoudt.", "marketingbureau?") passen anders niet en geven een los woord of steken uit. */
@media (min-width: 768px) and (max-width: 1023px) {
  .omd-paginakop h1 { font-size: var(--omd-t2) !important; line-height: 1.08 !important; }
}
@media (max-width: 767px) {
  .omd-paginakop h1 { font-size: var(--omd-t1) !important; line-height: 1.15 !important; }
  .textfield h3 { font-size: var(--omd-t0) !important; line-height: 1.4 !important; }
}

/* Wat je krijgt bij Tender winnen: vier onderdelen in tekst, lijn als scheiding boven elk onderdeel (Frans, 10 nov) */
.omd-krijgt--tekst { margin-top: 3.5rem; gap: 2.5rem 2.5rem; }
.omd-krijgt--tekst > div { border-top: 2px solid var(--color-blue); padding-top: 1.25rem; color: var(--color-blue); }
.omd-krijgt--tekst h3 { font-size: var(--omd-t0, 1.25rem); line-height: 1.3; font-weight: 700; margin: 0; }
.omd-krijgt--tekst p { font-size: var(--omd-t0, 1.25rem); line-height: 1.5; margin: .6rem 0 0; }
/* Grote opdrachten in het bewijsvlak: kleur volgt het vlak (crème of groen) */
.omd-bewijs .omd-opdrachten > div { color: inherit; border-top-color: currentColor; }
.omd-bewijs .omd-opdrachten { width: 100%; margin-top: 4.5rem; }
.omd-bewijs .container:has(.omd-opdrachten) { display: block !important; }
/* Vier tekstonderdelen: twee kolommen tot 1280 breed, zodat namen als VolkerWessels Logistics heel blijven */
@media (min-width: 480px) and (max-width: 1279px) { .omd-krijgt--tekst { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .omd-krijgt--tekst { grid-template-columns: 1fr; } }

/* Bijschriften "Wat je krijgt" (12 nov 2026, Frans): tussen 1024 en 1279 px twee kaarten per rij, zodat elk bijschrift op één regel past. */
@media (min-width: 1024px) and (max-width: 1279px) { .omd-krijgt:not(.omd-krijgt--tekst) { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 480px) and (max-width: 579px) { .omd-krijgt:not(.omd-krijgt--tekst) { grid-template-columns: 1fr; } }

/* Woordafbreking (Frans, 13 nov 2026): woorden breken nooit midden in, ook niet op 320 px.
   Momentenlijst op telefoon: beeld boven, kop en onderzin over de volle breedte met de pijl ernaast,
   zodat "Zorgcontract binnenhalen" en "beoordelaar onthoudt." heel blijven zonder kleinere letter. */
html, body, main { overflow-wrap: normal; word-break: normal; hyphens: manual; }
@media (max-width: 599px) {
  .omd-momenten__lijst a { display: grid !important; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "beeld beeld" "tekst pijl"; gap: 1rem 1.25rem; align-items: start !important; }
  .omd-momenten__lijst a > picture, .omd-momenten__lijst a > .omd-momenten__mini { grid-area: beeld; }
  .omd-momenten__lijst .omd-momenten__mini { margin-top: 0; }
  .omd-momenten__lijst a > span { grid-area: tekst; }
  .omd-momenten__lijst a > svg { grid-area: pijl; }
}
/* Contactblok op telefoon: het roze vlak loopt tot de schermrand, zodat hallo@onwijsmooiedingen.nl heel op één regel past
   zonder kleinere letter. Op heel smalle schermen (onder 340 px) schuift alleen het pijltje onder het adres. */
@media (max-width: 429px) {
  .bg-pink:has(> .omd-tekstlinks) { margin-inline: -2rem; padding-inline: 1.5rem; }
  .omd-tekstlinks a[href^="mailto:"], .omd-contactgroot a[href^="mailto:"] { flex-wrap: wrap; row-gap: .25rem; }
}
/* Geen los woord op de laatste regel, ook niet in kopjes, knoppen, labels en citaten die geen p/h zijn (13 nov 2026) */
body { text-wrap: pretty; }
/* Korte regels (koppen in lijsten, vragen, knoppen, links) verdelen hun woorden evenwichtig over de regels */
:is(a, button, summary, label, b, strong, cite, dt) { text-wrap: balance; }
/* Heel smalle telefoons (onder 360 px): de zijmarge gaat mee in plaats van de letter, zodat "marketingbureau?" in een kop past */
@media (max-width: 359px) {
  .container { padding-left: 1rem !important; padding-right: 1rem !important; }
  .bg-pink:has(> .omd-tekstlinks) { margin-inline: -1rem; }
}
/* Sitemap en juridische pagina's: paginatitel op telefoon op dezelfde maat als alle andere paginatitels (t1) */
@media (max-width: 767px) { main h1.text-4xl { font-size: var(--omd-t1) !important; line-height: 1.15 !important; } }
/* Woordpaar dat bij elkaar hoort (tegen een los slotwoord): heel vanaf 480 px, op smalle telefoons mag het breken
   als het samen niet past. Vervangt   waar het paar breder is dan een telefoonscherm (13 nov 2026). */
.omd-paar { white-space: nowrap; }
@media (max-width: 479px) { .omd-paar { white-space: normal; } }