/* =========================================================================
   De Druppel — base.css
   Fonts, reset, typografie, layout en utilities. Alle waarden uit tokens.css.
   ========================================================================= */

/* --- Fonts (zelf gehost, zie assets/fonts) ------------------------------ */
@font-face {
  font-family: "Archivo";
  font-style: normal;
  font-weight: 600 700;
  font-display: swap;
  src: url("../fonts/archivo-var.woff2") format("woff2");
}
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("../fonts/inter-var.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif";
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/instrument-serif-italic.woff2") format("woff2");
}

/* --- Reset --------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Geen smooth scroll: ankerlinks springen direct, de pagina scrollt op browsersnelheid. */
  scroll-padding-top: calc(var(--dd-header-h) + var(--dd-space-4));
}
body {
  min-height: 100dvh;
  background: var(--dd-bg);
  color: var(--dd-fg);
  font-family: var(--dd-font-body);
  font-size: var(--dd-text-body);
  line-height: var(--dd-leading-body);
  font-weight: var(--dd-fw-regular);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
/* Animaties die van opzij binnenkomen mogen nooit horizontale scroll geven.
   Op main, niet op body: body-overflow gaat naar de viewport en werkt daar anders. */
main { overflow-x: clip; }
img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; text-decoration-color: color-mix(in srgb, currentColor 40%, transparent); text-underline-offset: 0.16em; }
a:hover { text-decoration-color: currentColor; }
ul[class], ol[class] { list-style: none; padding: 0; }
p, li, dd { max-width: var(--dd-measure); }
hr { border: 0; border-top: var(--dd-border-hairline) solid var(--dd-border); }
:focus-visible { outline: var(--dd-focus-ring); outline-offset: var(--dd-focus-offset); border-radius: var(--dd-radius-sm); }
::selection { background: var(--dd-brass-500); color: var(--dd-navy-950); }

/* Ruimte onderaan voor de sticky contactbalk op mobiel */
body { padding-bottom: calc(var(--dd-mobilebar-h) + env(safe-area-inset-bottom, 0px)); }
@media (min-width: 900px) { body { padding-bottom: 0; } }

/* --- Typografie ---------------------------------------------------------- */
h1, h2, h3, h4, .h1, .h2, .h3, .h4 {
  font-family: var(--dd-font-display);
  font-weight: var(--dd-fw-bold);
  letter-spacing: var(--dd-tracking-display);
  line-height: var(--dd-leading-tight);
  color: var(--dd-fg);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
h1, .h1 { font-size: var(--dd-text-hero); max-width: 16ch; }
h2, .h2 { font-size: var(--dd-text-h2); max-width: 22ch; line-height: 1.1; }
h3, .h3 { font-size: var(--dd-text-h3); font-weight: var(--dd-fw-semi); line-height: var(--dd-leading-snug); max-width: 28ch; }
h4, .h4 { font-size: var(--dd-text-h4); font-weight: var(--dd-fw-semi); line-height: var(--dd-leading-snug); }
.lead { font-size: var(--dd-text-lead); color: var(--dd-fg-muted); max-width: 60ch; text-wrap: pretty; }
.small { font-size: var(--dd-text-small); }
.muted { color: var(--dd-fg-muted); }
strong, b { font-weight: var(--dd-fw-medium); }
h1 strong, h2 strong { font-weight: inherit; color: var(--dd-accent); }

.eyebrow {
  display: inline-flex; align-items: center; gap: var(--dd-space-3);
  font-family: var(--dd-font-display);
  font-size: var(--dd-text-eyebrow);
  font-weight: var(--dd-fw-semi);
  letter-spacing: var(--dd-tracking-eyebrow);
  text-transform: uppercase;
  color: var(--dd-accent);
  margin-bottom: var(--dd-space-4);
}
.eyebrow::before { content: ""; width: var(--dd-space-5); height: 1px; background: currentColor; opacity: .7; }
.eyebrow--plain::before { display: none; }

/* Serif-accent: slogan en uitgelichte citaten. Hooguit één per scherm. */
.accent {
  font-family: var(--dd-font-accent);
  font-style: italic;
  font-weight: var(--dd-fw-regular);
  letter-spacing: 0;
  color: var(--dd-accent);
}
.slogan { font-family: var(--dd-font-accent); font-style: italic; font-size: 1.3em; line-height: 1.2; color: var(--dd-accent); }

.num { font-variant-numeric: tabular-nums; }
.tel { font-variant-numeric: tabular-nums; white-space: nowrap; }

.prose > * + * { margin-top: var(--dd-space-4); }
.prose h2, .prose h3 { margin-top: var(--dd-space-8); }
.prose h2 + *, .prose h3 + * { margin-top: var(--dd-space-3); }
.prose ul { padding-left: 1.2em; list-style: disc; }
.prose li + li { margin-top: var(--dd-space-2); }

/* --- Layout -------------------------------------------------------------- */
.container {
  width: 100%;
  max-width: calc(var(--dd-container) + 2 * var(--dd-gutter));
  margin-inline: auto;
  padding-inline: var(--dd-gutter);
}
.container--narrow { max-width: calc(45rem + 2 * var(--dd-gutter)); } /* 720px tekstkolom */
.section {
  padding-block: var(--dd-section-y);
  position: relative;
}
.section--tight { padding-block: calc(var(--dd-section-y) * .6); }
.section--flush-top { padding-top: 0; }
.section + .section:not([data-theme]) { border-top: var(--dd-border-hairline) solid var(--dd-border); }

/* Lichte doorbrekende secties */
[data-theme="light"] { background: var(--dd-bg); color: var(--dd-fg); }
[data-theme="dark"] { background: var(--dd-bg); color: var(--dd-fg); }
.section--deep { background: var(--dd-navy-950); }
.section--raised { background: var(--dd-navy-800); }

/* Sectiekop: eyebrow + kop + lead, optioneel met actie rechts */
.section-head { display: grid; gap: var(--dd-space-3); margin-bottom: var(--dd-space-9); align-items: end; }
.section-head .lead { margin-top: var(--dd-space-2); }
@media (min-width: 900px) {
  .section-head--split { grid-template-columns: 1fr auto; column-gap: var(--dd-space-8); }
  .section-head--split > .section-head__actie { grid-column: 2; grid-row: 1 / span 3; align-self: end; }
}

/* Rasters */
.grid { display: grid; gap: var(--dd-space-5); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); }
.grid--4 { grid-template-columns: repeat(2, 1fr); }
@media (min-width: 700px) { .grid--4 { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1100px) { .grid--4 { grid-template-columns: repeat(4, 1fr); } }
.grid > * { min-width: 0; }

.stack > * + * { margin-top: var(--dd-space-4); }
.stack--lg > * + * { margin-top: var(--dd-space-6); }
.cluster { display: flex; flex-wrap: wrap; gap: var(--dd-space-3); align-items: center; }
.cluster--lg { gap: var(--dd-space-4); }
.split { display: grid; gap: var(--dd-space-8); align-items: center; }
.split > *, .hero__inner > *, .dienst__beeld > *, .grid > * { min-width: 0; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; gap: var(--dd-space-10); } }
.split--reverse > :first-child { order: 2; }
@media (max-width: 899.98px) { .split--reverse > :first-child { order: 0; } }

/* --- Beeld --------------------------------------------------------------- */
.foto { position: relative; overflow: hidden; border-radius: var(--dd-radius-lg); background: var(--dd-navy-700); }
.foto picture { display: block; width: 100%; height: 100%; }
.foto img { width: 100%; height: 100%; object-fit: cover; }
.foto--card { aspect-ratio: var(--dd-ratio-card); }
.foto--service { aspect-ratio: var(--dd-ratio-service); }
.foto--wide { aspect-ratio: var(--dd-ratio-wide); }
.foto--xl { border-radius: var(--dd-radius-xl); }
.foto--frame::after {
  content: ""; position: absolute; inset: var(--dd-space-3);
  border: 1px solid color-mix(in srgb, var(--dd-brass-500) 45%, transparent);
  border-radius: calc(var(--dd-radius-lg) - var(--dd-space-2)); pointer-events: none;
}
.foto__label {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: var(--dd-space-8) var(--dd-space-4) var(--dd-space-4);
  background: linear-gradient(to top, rgba(7, 26, 40, .82), rgba(7, 26, 40, 0));
  color: var(--dd-text-on-dark);
  font-size: var(--dd-text-small);
  display: flex; flex-direction: column; gap: 2px;
}
.plaats {
  font-family: var(--dd-font-display); font-size: var(--dd-text-eyebrow); font-weight: var(--dd-fw-semi);
  letter-spacing: var(--dd-tracking-eyebrow); text-transform: uppercase; color: var(--dd-brass-400);
}

/* --- Utilities ----------------------------------------------------------- */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: absolute; left: var(--dd-gutter); top: -100px; z-index: calc(var(--dd-z-header) + 1);
  padding: var(--dd-space-3) var(--dd-space-4); background: var(--dd-brass-500); color: var(--dd-navy-950);
  border-radius: var(--dd-radius-md); font-weight: var(--dd-fw-medium); text-decoration: none;
}
.skip-link:focus { top: var(--dd-space-3); }
.only-mobile { display: block; }
.only-desktop { display: none; }
@media (min-width: 900px) { .only-mobile { display: none; } .only-desktop { display: block; } }
.text-center { text-align: center; }
.mt-4 { margin-top: var(--dd-space-4); } .mt-6 { margin-top: var(--dd-space-6); } .mt-8 { margin-top: var(--dd-space-8); }
.mb-4 { margin-bottom: var(--dd-space-4); } .mb-6 { margin-bottom: var(--dd-space-6); } .mb-8 { margin-bottom: var(--dd-space-8); }

/* Iconen */
.icon { width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icon--fill { fill: currentColor; stroke: none; }

/* Reveals en overige scroll-animaties: zie motion.css */