/* ===========================================================================
   Dierenkliniek Kralingen
   Richting: de praktijk zelf. Sloophout en staal uit de wachtkamer, zachte
   salie van de behandelkamerwanden, het groen van de werkkleding en het logo,
   en de papierkleur van het passe-partout uit de opening. Terugkerend motief:
   het museumlabel (mono kapitaal met streepje) en de kartonnen snijrand om
   elk beeld, hetzelfde kader als in de opening.
   =========================================================================== */

:root {
  --inkt: #16211c;
  --inkt-op: #1e2d26;
  --inkt-rand: rgba(243, 239, 230, .16);
  --licht: #f3efe6;
  --licht-zacht: rgba(243, 239, 230, .74);
  --papier: #efe9dc;
  --room: #f8f5ee;
  --salie: #dde5d8;
  --groen: #3a7a28;
  --groen-diep: #2c5c1f;
  --groen-licht: #7cbe55;
  --klei: #c0803f;
  --klei-diep: #8c5620;
  --grijs: #4a5a50;

  --rand: clamp(1.25rem, 5vw, 4rem);
  --gat: clamp(1rem, 2.2vw, 2rem);
  --ritme: clamp(3.75rem, 8vh, 6rem);

  --kader: 0 0 0 1px rgba(22, 33, 28, .18), 0 0 0 7px rgba(255, 255, 255, .45);
  --kader-donker: 0 0 0 1px rgba(243, 239, 230, .22), 0 0 0 7px rgba(243, 239, 230, .08);

  --opening-achtergrond: #16211c;
  --opening-passe: #efe9dc;
  --opening-demping: .5;
}

/* ---- grondslag --------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--papier);
  color: var(--inkt);
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: clamp(1rem, .96rem + .2vw, 1.09rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
h1, h2, h3 { margin: 0; font-weight: 700; }
p, ul, ol, figure, address { margin: 0; }
ul, ol { padding: 0; list-style: none; }
address { font-style: normal; }
a { color: inherit; }

section[id], div[id] { scroll-margin-top: 5.5rem; }

.wrap {
  width: 100%;
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: var(--rand);
}

.sla-over {
  position: absolute;
  left: -999px;
  top: 0;
  z-index: 99;
  background: var(--inkt);
  color: var(--licht);
  padding: .7rem 1.1rem;
  border-radius: 0 0 .5rem 0;
}
.sla-over:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--groen-licht);
  outline-offset: 3px;
}

/* ---- typografische bouwstenen ------------------------------------------ */

.etiket {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--groen-diep);
  display: flex;
  align-items: center;
  gap: .7rem;
  margin-bottom: 1.1rem;
}
.etiket::before {
  content: '';
  width: 1.9rem;
  height: 1px;
  background: currentColor;
  flex: none;
}
.etiket--licht { color: var(--groen-licht); }

.kop2 {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.7rem, 1.1rem + 2.1vw, 2.9rem);
  line-height: 1.1;
  letter-spacing: -.015em;
  max-width: 19ch;
}
.kop2--licht { color: var(--licht); }

.bijschrift {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--grijs);
  margin-top: .85rem;
}

.tekstlink {
  display: inline-block;
  margin-top: .8rem;
  font-weight: 600;
  color: var(--groen-diep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: opacity .2s ease;
}
.tekstlink:hover { opacity: .65; }
.tekstlink--licht { color: var(--groen-licht); }

/* ---- knoppen ----------------------------------------------------------- */

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .82rem 1.4rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: .005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: transform .22s ease, background-color .22s ease, color .22s ease, border-color .22s ease;
}
.knop--vol { background: var(--groen); color: #fff; }
.knop--vol:hover { background: var(--groen-diep); transform: translateY(-2px); }
.knop--lijn { border-color: currentColor; color: var(--inkt); }
.knop--lijn:hover { background: var(--inkt); color: var(--papier); transform: translateY(-2px); }
.knop--klein { padding: .55rem 1rem; font-size: .88rem; }

/* ---- kopbalk ----------------------------------------------------------- */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  transition: background-color .3s ease, box-shadow .3s ease;
}
.kop__binnen {
  max-width: 1240px;
  margin-inline: auto;
  padding: .85rem var(--rand);
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2.5rem);
}
.kop.is-geplakt {
  background: rgba(239, 233, 220, .93);
  backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(22, 33, 28, .12);
}

.kop__merk { display: block; flex: none; line-height: 0; }
.kop__logo {
  height: clamp(30px, 3.4vw, 40px);
  width: auto;
  display: block;
}

.kop__nav {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 1.6vw, 1.6rem);
  margin-left: auto;
  font-size: .9rem;
  font-weight: 500;
}
.kop__nav a {
  text-decoration: none;
  color: var(--inkt);
  padding: .3rem 0;
  position: relative;
  white-space: nowrap;
}
.kop__nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--groen-diep);
  transition: right .28s ease;
}
.kop__nav a:hover::after { right: 0; }

.kop__acties { display: flex; align-items: center; gap: .7rem; margin-left: auto; }
.kop__nav + .kop__acties { margin-left: 0; }

.kop__schakel {
  display: none;
  align-items: center;
  gap: .55rem;
  background: none;
  border: 1px solid rgba(22, 33, 28, .28);
  border-radius: 999px;
  padding: .5rem .85rem;
  font: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--inkt);
  cursor: pointer;
}
.kop__schakel-lijn {
  display: block;
  width: 15px;
  height: 1.5px;
  background: currentColor;
  transition: transform .25s ease, opacity .25s ease;
}
.kop__schakel-lijn + .kop__schakel-lijn { margin-left: -15px; transform: translateY(5px); }
.kop__schakel[aria-expanded="true"] .kop__schakel-lijn:first-child { transform: translateY(2.5px) rotate(45deg); }
.kop__schakel[aria-expanded="true"] .kop__schakel-lijn + .kop__schakel-lijn { transform: translateY(-1px) rotate(-45deg); }

/* ---- de opening: museumlabel onder de lijst ---------------------------- */

.opening__kop {
  text-align: center;
  padding: 0 clamp(1.25rem, 5vw, 3rem) clamp(3.2rem, 6.5svh, 4rem);
  color: var(--inkt);
}
/* Het blikveld van de gevelfoto: naar rechts en omhoog, zodat de volledige
   gevelnaam, het logo en de honden in beeld zijn en de voorbijganger niet
   het centrale, scherpst belichte onderwerp is. */
.opening__foto { object-position: 72% 40%; }

.opening__naam {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.85rem, 1rem + 3.4vw, 3.15rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  color: var(--inkt);
}
.opening__regel {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: clamp(.68rem, .62rem + .22vw, .8rem);
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-top: .85rem;
}
.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin-top: clamp(1.1rem, 2.6svh, 1.7rem);
}

.opening__slot {
  background: linear-gradient(to top, rgba(10, 14, 11, .68), rgba(10, 14, 11, 0) 75%);
  padding-top: clamp(3.5rem, 12svh, 6rem);
}

.opening__slotregel {
  color: #fff;
  text-align: center;
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 500;
  font-size: clamp(1.25rem, .9rem + 1.6vw, 2.1rem);
  line-height: 1.22;
  letter-spacing: -.01em;
  padding: 0 clamp(1.25rem, 6vw, 5rem) clamp(4rem, 12svh, 7rem);
  text-shadow: 0 2px 18px rgba(0, 0, 0, .4);
}

.opening__wenk {
  flex-direction: column;
  align-items: center;
  gap: .4rem;
  bottom: .7rem;
}
.wenk__lijn { display: block; width: 1px; height: 13px; background: rgba(22, 33, 28, .4); }
.wenk__woord {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .62rem;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* ---- de twee bewegingen ------------------------------------------------ */

.donker {
  position: relative;
  z-index: 2;
  background: var(--inkt);
  color: var(--licht);
  margin-top: -1.5rem;
  border-radius: clamp(1.4rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2.25rem) 0 0;
}
.donker .bijschrift { color: var(--licht-zacht); }
.donker--slot { z-index: 4; margin-top: -1.5rem; }

.licht {
  position: relative;
  z-index: 3;
  background: var(--papier);
  border-radius: clamp(1.4rem, 3vw, 2.25rem) clamp(1.4rem, 3vw, 2.25rem) 0 0;
  margin-top: -1.5rem;
  overflow: hidden;
}

/* ---- welkom ------------------------------------------------------------ */

.welkom { padding: calc(var(--ritme) + 1.5rem) 0 0; }

.welkom__raster {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: end;
}

.welkom__lead {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.75rem, 1.05rem + 2.5vw, 3.1rem);
  line-height: 1.11;
  letter-spacing: -.02em;
  max-width: 17ch;
}
.welkom__body {
  margin-top: 1.5rem;
  max-width: 48ch;
  color: var(--licht-zacht);
}

.rail {
  margin-top: 2.4rem;
  border-top: 1px solid var(--inkt-rand);
  max-width: 48ch;
}
.rail__item {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: .6rem 1.5rem;
  padding: .95rem 0;
  border-bottom: 1px solid var(--inkt-rand);
}
.rail__label {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .09em;
  color: var(--licht-zacht);
  max-width: 32ch;
}
.rail__waarde {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: 1.25rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--groen-licht);
  border-bottom: 1px solid transparent;
  transition: border-color .2s ease;
  white-space: nowrap;
}
.rail__waarde:hover { border-color: currentColor; }

.welkom__beeld {
  position: relative;
  z-index: 4;
  margin-bottom: -4rem;
  max-width: 560px;
  justify-self: end;
  width: 100%;
}
.welkom__beeld img {
  width: 100%;
  box-shadow: var(--kader-donker);
}

/* ---- visie ------------------------------------------------------------- */

.visie { padding: calc(var(--ritme) + 4rem) 0 var(--ritme); }

.visie__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.visie__beeld { margin-top: 2.2rem; }
.visie__beeld img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 42%;
  box-shadow: var(--kader-donker);
}

.waarden { display: grid; gap: 0; }
.waarde {
  display: grid;
  grid-template-columns: 3.2rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.6rem 0;
  border-top: 1px solid var(--inkt-rand);
}
.waarde:last-child { border-bottom: 1px solid var(--inkt-rand); }
.waarde__nr {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--klei);
  padding-top: .35rem;
}
.waarde__kop {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.01em;
}
.waarde__tekst {
  grid-column: 2;
  margin-top: .5rem;
  color: var(--licht-zacht);
  font-size: .98rem;
  max-width: 54ch;
}

.citaat {
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 500;
  font-size: clamp(1.6rem, 1rem + 2.6vw, 3.3rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  color: var(--groen-licht);
  max-width: 20ch;
}

/* ---- team -------------------------------------------------------------- */

.team { padding-bottom: 0; }

.team__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
  padding-bottom: clamp(2.2rem, 5vw, 3.5rem);
}
.team__body { margin-top: 1.2rem; color: var(--licht-zacht); max-width: 36ch; }

.team__lijsten {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1.5rem, 3vw, 3rem);
}
.namenlijst__kop {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--groen-licht);
  padding-bottom: .7rem;
  border-bottom: 1px solid var(--inkt-rand);
}
.naam {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: clamp(1rem, .92rem + .4vw, 1.18rem);
  padding: .62rem 0;
  border-bottom: 1px solid var(--inkt-rand);
}

.koppen {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: .55rem;
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
.koppen img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  filter: saturate(.92);
  transition: filter .3s ease, transform .4s ease;
}
.koppen li { overflow: hidden; }
.koppen li:hover img { filter: saturate(1.05); transform: scale(1.04); }

.groepsfoto { position: relative; }
.groepsfoto img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: 50% 42%;
}

/* ---- zorg -------------------------------------------------------------- */

.zorg { padding: calc(var(--ritme) + .5rem) 0 var(--ritme); }

.zorg__intro { max-width: 62rem; }
.zorg__lead {
  margin-top: 1.3rem;
  color: var(--grijs);
  max-width: 54ch;
}

.mozaiek {
  margin-top: clamp(2.2rem, 5vw, 3.5rem);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.6vw, 2.6rem) var(--gat);
}

.dienst { grid-column: span 12; display: flex; flex-direction: column; }
.dienst--4 { grid-column: span 4; }
.dienst--5 { grid-column: span 5; }
.dienst--6 { grid-column: span 6; }
.dienst--7 { grid-column: span 7; }

.dienst__beeld { overflow: hidden; margin-bottom: 1.15rem; background: var(--salie); }
.dienst__beeld img {
  width: 100%;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.2, .7, .3, 1);
}
.dienst__beeld--breed img { aspect-ratio: 16 / 9; }
.dienst__beeld--hoog img { aspect-ratio: 4 / 3; }
.dienst__beeld--vierkant img { aspect-ratio: 5 / 4; }
.dienst:hover .dienst__beeld img { transform: scale(1.035); }

.dienst__etiket {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--groen-diep);
  margin-bottom: .55rem;
}
.dienst__kop {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: clamp(1.15rem, 1rem + .6vw, 1.55rem);
  line-height: 1.16;
  letter-spacing: -.012em;
  max-width: 22ch;
}
.dienst__tekst { margin-top: .75rem; color: var(--grijs); font-size: .97rem; max-width: 56ch; }
.dienst__noot {
  margin-top: 1rem;
  font-size: .9rem;
  color: var(--grijs);
  border-left: 2px solid var(--klei);
  padding-left: 1rem;
  max-width: 52ch;
}

/* de brede band: beeld links, tekst rechts */
.dienst--band {
  grid-column: span 12;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: start;
  background: var(--room);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.dienst--band .dienst__beeld { margin-bottom: 0; }
.dienst__beeld--band img { width: 100%; aspect-ratio: 3 / 2; }
.dienst__inzet {
  margin-top: 1.4rem;
  max-width: 220px;
  overflow: hidden;
}
.dienst__inzet img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }

.dienst--salie {
  background: var(--salie);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.dienst--salie .dienst__kop { max-width: 18ch; }

.dienst--inkt {
  background: var(--inkt);
  color: var(--licht);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.dienst--inkt .dienst__etiket { color: var(--groen-licht); }
.dienst--inkt .dienst__tekst { color: var(--licht-zacht); }

/* ---- cat friendly ------------------------------------------------------ */

.kat { position: relative; padding-bottom: var(--ritme); }
.kat__beeld { position: relative; }
.kat__beeld img {
  width: 100%;
  height: clamp(300px, 52vh, 560px);
  object-fit: cover;
  object-position: 50% 38%;
}

.kat__kaart {
  position: relative;
  margin-top: clamp(-5rem, -6vw, -3rem);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
}
.kat__tekst {
  background: var(--room);
  padding: clamp(1.6rem, 3.5vw, 3rem);
  box-shadow: 0 24px 60px -36px rgba(22, 33, 28, .5);
}
.kat__body { margin-top: 1.1rem; color: var(--grijs); max-width: 60ch; }

.kat__spreekuur {
  margin-top: 1.8rem;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(22, 33, 28, .16);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .4rem 1.5rem;
}
.kat__spreekuur-kop {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--groen-diep);
}
.kat__spreekuur-tekst {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: clamp(1.05rem, .95rem + .5vw, 1.35rem);
}

.kat__inzet { align-self: end; padding-bottom: 1rem; }
.kat__inzet img { width: 100%; box-shadow: var(--kader); }

/* ---- begeleiding ------------------------------------------------------- */

.begeleiding { padding: var(--ritme) 0; }
.begeleiding__raster {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.begeleiding__beeld { margin-top: 2rem; }
.begeleiding__beeld img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  box-shadow: var(--kader);
}

.programma {
  display: grid;
  grid-template-columns: 3.4rem minmax(0, 1fr);
  gap: 0 1.2rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(22, 33, 28, .17);
}
.programma:last-child { border-bottom: 1px solid rgba(22, 33, 28, .17); }
.programma__nr {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--klei-diep);
  padding-top: .3rem;
}
.programma__kop {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem);
  letter-spacing: -.012em;
}
.programma__tekst {
  grid-column: 2;
  margin-top: .5rem;
  color: var(--grijs);
  font-size: .97rem;
  max-width: 58ch;
}

/* ---- actueel ----------------------------------------------------------- */

.actueel { padding-bottom: var(--ritme); }
.actueel__raster { margin-top: clamp(1.8rem, 4vw, 2.8rem); }

.actie {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: start;
  background: var(--inkt);
  color: var(--licht);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  border-radius: clamp(.75rem, 1.4vw, 1.25rem);
}
.actie__maand {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .74rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--klei);
}
.actie__vraag {
  margin-top: 1rem;
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1rem + 1.9vw, 2.5rem);
  line-height: 1.12;
  letter-spacing: -.02em;
  max-width: 20ch;
}
.actie__body { margin-top: 1.1rem; color: var(--licht-zacht); max-width: 56ch; }

.wistudat { margin-top: 1.4rem; display: grid; gap: .7rem; }
.wistudat__item {
  position: relative;
  padding-left: 1.5rem;
  font-size: .95rem;
  color: var(--licht-zacht);
  max-width: 56ch;
}
.wistudat__item::before {
  content: '';
  position: absolute;
  left: 0;
  top: .62em;
  width: .6rem;
  height: 1px;
  background: var(--groen-licht);
}

.actie__prijzen {
  margin-top: 1.8rem;
  padding-top: 1.3rem;
  border-top: 1px solid var(--inkt-rand);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .6rem 2rem;
}
.actie__prijs-oud {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: 1.15rem;
  color: var(--licht-zacht);
  text-decoration: line-through;
}
.actie__prijs-nieuw {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.1rem + 1.1vw, 2rem);
  color: var(--groen-licht);
}
.actie__besparing { flex-basis: 100%; font-size: .92rem; color: var(--licht-zacht); }
.actie .knop { margin-top: 1.8rem; }

.actie__poster { align-self: start; }
.actie__poster img { width: 100%; box-shadow: var(--kader-donker); }

.nieuws {
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
}
.nieuws__item { border-top: 2px solid var(--inkt); padding-top: 1.2rem; }
.nieuws__etiket {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .68rem;
  letter-spacing: .19em;
  text-transform: uppercase;
  color: var(--klei-diep);
  margin-bottom: .6rem;
}
.nieuws__kop {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: clamp(1.15rem, 1rem + .7vw, 1.5rem);
  letter-spacing: -.012em;
  max-width: 22ch;
}
.nieuws__tekst { margin-top: .8rem; color: var(--grijs); font-size: .96rem; max-width: 58ch; }
.nieuws__item .tekstlink { display: block; }

/* ---- tarieven ---------------------------------------------------------- */

.tarieven { padding-bottom: calc(var(--ritme) + 1rem); }
.tarieven__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}
.tarieven__body { margin-top: 1.1rem; color: var(--grijs); max-width: 50ch; }

.prijslijst {
  background: var(--room);
  padding: clamp(1.5rem, 3vw, 2.4rem);
  box-shadow: var(--kader);
}
.prijslijst__kop {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--groen-diep);
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--inkt);
}
.tarief {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0 1.5rem;
  padding: 1rem 0;
  border-bottom: 1px solid rgba(22, 33, 28, .15);
  align-items: baseline;
}
.tarief__wat { font-weight: 600; }
.tarief__noot {
  grid-column: 1;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .04em;
  color: var(--grijs);
  margin-top: .22rem;
  max-width: 40ch;
}
.tarief__bedrag {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.25rem, 1.1rem + .7vw, 1.65rem);
  letter-spacing: -.015em;
  white-space: nowrap;
  align-self: center;
}

/* ---- zorgplan ---------------------------------------------------------- */

.zorgplan { padding: calc(var(--ritme) + 1rem) 0 var(--ritme); }
.zorgplan__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 5vw, 4.5rem);
  align-items: start;
}
.zorgplan__body { color: var(--licht-zacht); max-width: 56ch; }
.zorgplan__body + .zorgplan__body { margin-top: 1.1rem; }
.zorgplan .knop { margin-top: 1.8rem; }

/* ---- praktisch --------------------------------------------------------- */

.praktisch { padding-bottom: var(--ritme); }
.praktisch__lead { margin-top: 1.2rem; color: var(--licht-zacht); max-width: 50ch; }

.groepen {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.25rem, 3vw, 2.5rem);
}
.groep { border-top: 1px solid var(--inkt-rand); padding-top: 1.1rem; }
.groep__code {
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem);
  letter-spacing: -.02em;
  color: var(--groen-licht);
  line-height: 1;
}
.groep__naam { margin-top: .6rem; font-weight: 600; font-size: .98rem; }
.groep__tekst { margin-top: .5rem; color: var(--licht-zacht); font-size: .94rem; }

.praktisch__noot {
  margin-top: 2.2rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--inkt-rand);
  color: var(--licht-zacht);
  font-size: .94rem;
  max-width: 78ch;
}

/* ---- contact ----------------------------------------------------------- */

.contact { padding-bottom: var(--ritme); }
.contact__raster {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: start;
}

.uren { margin-top: 1.8rem; border-top: 1px solid var(--inkt-rand); }
.uur {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1.5rem;
  padding: .72rem 0;
  border-bottom: 1px solid var(--inkt-rand);
}
.uur__dag { font-weight: 500; }
.uur__tijd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .9rem;
  color: var(--licht);
}
.uur--extra .uur__dag, .uur--extra .uur__tijd { color: var(--licht-zacht); }

.contact__spoed-kop {
  margin-top: 1.8rem;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .12em;
  color: var(--licht-zacht);
  max-width: 38ch;
}
.contact__spoed-nr {
  display: inline-block;
  margin-top: .5rem;
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem);
  letter-spacing: -.02em;
  color: var(--klei);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.contact__spoed-nr:hover { border-color: currentColor; }

.contact__naam {
  margin-top: .4rem;
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-weight: 700;
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem);
  letter-spacing: -.015em;
}
.adres { margin-top: .6rem; color: var(--licht-zacht); }
.adres__regel { line-height: 1.5; }

.kanalen { margin-top: 1.8rem; border-top: 1px solid var(--inkt-rand); }
.kanaal {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem 1.5rem;
  padding: .8rem 0;
  border-bottom: 1px solid var(--inkt-rand);
}
.kanaal__label {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .7rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--licht-zacht);
}
.kanaal__waarde {
  text-decoration: none;
  font-weight: 500;
  color: var(--licht);
  border-bottom: 1px solid rgba(243, 239, 230, .35);
  transition: border-color .2s ease, color .2s ease;
  overflow-wrap: anywhere;
}
.kanaal__waarde:hover { color: var(--groen-licht); border-color: currentColor; }

.contact__slot {
  margin-top: 2rem;
  font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', serif;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.4rem);
  color: var(--groen-licht);
  max-width: 24ch;
}

/* ---- voet -------------------------------------------------------------- */

.voet { border-top: 1px solid var(--inkt-rand); padding: clamp(2rem, 4vw, 3rem) 0 clamp(2.5rem, 5vw, 3.5rem); }
.voet__raster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem clamp(1.5rem, 4vw, 3rem);
}
.voet__logo {
  height: 46px;
  width: auto;
  background: var(--licht);
  padding: .4rem .6rem;
  border-radius: .25rem;
}
.voet__nav {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem 1.25rem;
  font-size: .88rem;
}
.voet__nav a { text-decoration: none; color: var(--licht-zacht); }
.voet__nav a:hover { color: var(--groen-licht); }
.voet__regel {
  flex-basis: 100%;
  font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--licht-zacht);
}

/* ---- zwevende belbalk op kleine schermen ------------------------------- */
/* Blijft onzichtbaar tot voorbij de hero gescrold is (zie script.js), zodat
   hij nooit op de inline belknop in de opening gestapeld staat. */

.belbalk { display: none; }

/* ---- onthullingen ------------------------------------------------------ */

html.motie [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .7s cubic-bezier(.2, .7, .3, 1), transform .7s cubic-bezier(.2, .7, .3, 1);
}
html.motie [data-reveal].zichtbaar { opacity: 1; transform: none; }

/* ---- responsief -------------------------------------------------------- */

@media (max-width: 1080px) {
  .koppen { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dienst--7, .dienst--5, .dienst--6 { grid-column: span 12; }
  .dienst--4 { grid-column: span 4; }
  .nieuws { grid-template-columns: minmax(0, 1fr); }
  .tarieven__raster, .zorgplan__raster, .contact__raster { grid-template-columns: minmax(0, 1fr); }
  .kat__kaart { grid-template-columns: minmax(0, 1fr); }
  .kat__inzet { max-width: 220px; padding-bottom: 0; }
}

@media (max-width: 900px) {
  .kop__nav {
    position: fixed;
    inset: 0 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 5.1rem var(--rand) 1.75rem;
    background: var(--papier);
    box-shadow: 0 20px 40px -24px rgba(22, 33, 28, .6);
    transform: translateY(-101%);
    transition: transform .4s cubic-bezier(.2, .7, .3, 1);
    font-size: 1.05rem;
  }
  .kop__nav { z-index: 1; }
  .kop__nav.is-open { transform: none; }
  .kop__merk, .kop__acties { position: relative; z-index: 2; }
  .kop__nav a { padding: .7rem 0; border-bottom: 1px solid rgba(22, 33, 28, .14); }
  .kop__nav a::after { display: none; }
  .kop__acties { margin-left: auto; }
  .kop__schakel { display: inline-flex; }
  .kop { background: rgba(239, 233, 220, .93); backdrop-filter: blur(10px); }

  .welkom__raster,
  .visie__raster,
  .team__raster,
  .begeleiding__raster { grid-template-columns: minmax(0, 1fr); }

  .welkom__beeld { justify-self: start; }
  .groepen { grid-template-columns: minmax(0, 1fr); }
  .dienst--band { grid-template-columns: minmax(0, 1fr); }
  .actie { grid-template-columns: minmax(0, 1fr); }
  .actie__poster { max-width: 300px; }
}

@media (max-width: 640px) {
  :root { --ritme: clamp(3rem, 7vh, 4rem); }
  .koppen { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem; }
  .dienst--4 { grid-column: span 12; }
  .team__lijsten { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .kop2 { max-width: none; }
  .kop__acties .knop--klein { display: none; }

  .belbalk {
    display: flex;
    position: fixed;
    left: 1rem;
    right: 1rem;
    bottom: 1rem;
    z-index: 35;
    align-items: center;
    justify-content: center;
    padding: .9rem 1.25rem;
    border-radius: 999px;
    background: var(--groen);
    color: #fff;
    text-decoration: none;
    font-weight: 600;
    box-shadow: 0 14px 30px -12px rgba(22, 33, 28, .7);
    font-size: .95rem;
    opacity: 0;
    transform: translateY(1.25rem);
    pointer-events: none;
    transition: opacity .3s ease, transform .3s ease;
  }
  .belbalk.is-zichtbaar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
  .voet { padding-bottom: 6rem; }
  .opening__knoppen .knop { width: 100%; }
  .opening__kop { padding-bottom: 5.75rem; }
}

/* ---- rust ------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  html.motie [data-reveal] { opacity: 1; transform: none; }
}