/* CVI GLOBAL GROUP, de eenpaginasite.
   Opbouw overgenomen van `efluxer` (handgeschreven HTML en CSS, geen framework,
   geen JavaScript). Het palet is NIET van efluxer overgenomen maar gemeten uit
   het aangeleverde logo op 19-08-2026; de waarden en hun contrast staan in
   README.md. Waar efluxer alleen een hero heeft, staan hier ook een
   dienstenblok en een contactformulier. */

@font-face {
  font-family: "Inter Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url(/fonts/inter-latin.woff2) format("woff2-variations");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "EB Garamond Variable";
  font-style: normal;
  font-display: swap;
  font-weight: 400 800;
  src: url(/fonts/eb-garamond-latin.woff2) format("woff2-variations");
  unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC,
    U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212,
    U+2215, U+FEFF, U+FFFD;
}

/* Het palet is uit het logo gemeten en niet uit een ontwerp overgenomen, dus
   staat het in sRGB-hex en niet in oklch: dat is de ruimte waarin gemeten is,
   en een conversie zou een afrondingslaag toevoegen zonder iets op te lossen.
   Het contrast van elke waarde tegen zwart staat erachter. */
:root {
  --surface: #000000;
  --surface-card: #121215;      /* doos om het formulier, decoratief */
  --surface-field: #0c0c0e;     /* invoervelden */
  --border: #35353b;            /* 1,72 - decoratieve scheidingslijnen */
  --border-strong: #616168;     /* 3,42 - randen van bedienbare elementen, eis 3,0 */
  --text: #f2f2f3;              /* 18,77 - het zilver uit het monogram */
  --text-muted: #9a9a9e;        /*  7,49 */
  --accent: #b4b4b5;            /* 10,14 - de donkere kant van het zilververloop */
  --brand: #d6b452;             /* 10,51 - het goud van GLOBAL GROUP */
  --brand-mid: #c69f47;         /*  8,45 */
  --brand-licht: #fbe68d;       /* 16,81 - de kern van de gouden letters */
  --brand-donker: #896e30;      /*  4,34 - alleen als verloopstop op grote tekst */
  --on-brand: #141312;          /*  7,47 op --brand-mid, 14,85 op --brand-licht */

  /* Het knopverloop stopt bij --brand-mid en gaat niet door naar
     --brand-donker: op die donkerste stop haalt de knoptekst 3,83 en dat is
     onder de 4,5 die tekst van deze grootte vraagt. Nu is de laagste 7,47. */
  --goud-verloop: linear-gradient(135deg, var(--brand-licht) 0%, var(--brand) 45%, var(--brand-mid) 100%);
  --zilver-verloop: linear-gradient(135deg, #f2f2f3 0%, #b4b4b5 48%, #77757a 100%);

  --font-sans: "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --font-serif: "EB Garamond Variable", Georgia, "Times New Roman", serif;
}

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

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

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

/* Drie zachte ellipsen over het zwart, zodat de achtergrond niet vlak is. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 45% at 20% 24%,
      color-mix(in oklab, var(--brand) 12%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse 45% 40% at 78% 55%,
      color-mix(in oklab, var(--brand) 8%, transparent),
      transparent 60%
    ),
    radial-gradient(
      ellipse 35% 30% at 50% 92%,
      color-mix(in oklab, var(--accent) 6%, transparent),
      transparent 60%
    );
}

@supports not (color: color-mix(in oklab, red, blue)) {
  body::before {
    background: radial-gradient(ellipse 60% 45% at 20% 24%, #d6b4521f, transparent 60%);
  }
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

::selection {
  background: var(--brand);
  color: var(--on-brand);
}

.wrap {
  width: 100%;
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 clamp(1.25rem, 4vw, 3rem);
}

/* Overslaanlink: zonder menubalk is de sprong naar de inhoud kort, maar een
   toetsenbordgebruiker moet de taalkeuze wel kunnen overslaan. */
.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 10;
  padding: 0.75rem 1.25rem;
  background: var(--brand);
  color: var(--on-brand);
  font-weight: 600;
  text-decoration: none;
}

.overslaan:focus {
  left: 1rem;
  top: 1rem;
}

/* Kop: alleen de taalkeuze, geen menubalk. */

.top {
  padding: 1.75rem 0 0;
}

.top .wrap {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
}

.taal {
  display: inline-flex;
  gap: 0.15rem;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.taal a,
.taal span {
  padding: 0.3rem 0.55rem;
  text-decoration: none;
  color: var(--text-muted);
}

.taal a:hover {
  color: var(--text);
}

.taal [aria-current="true"] {
  color: var(--brand);
  font-weight: 600;
}

/* Hero */

.hero-blok {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: clamp(2.5rem, 7vh, 5rem) 0 clamp(3rem, 8vh, 5.5rem);
  min-height: min(46rem, 82svh);
}

/* Het bollenveld: gouden bollen die van links naar rechts door het beeld
   stromen. Vijf lagen met een eigen tegelbreedte en snelheid, elk een
   herhalende rij bollen; door de verschillende breedtes valt de herhaling niet
   samen en oogt het veld onregelmatig. Elke bol is een radiaal verloop met de
   lichtplek links-boven van het midden, waardoor hij als een belichte bol
   leest en niet als een platte stip.

   Overgenomen uit efluxer, met het goud van CVI en eigen posities. Die zijn
   gegenereerd met de seed 1535497 (het BOIP-nummer), dus dezelfde uitvoer bij
   elke herbouw, en staan hieronder letterlijk uitgeschreven. Geen canvas en
   geen WebGL, want deze site draait op `script-src 'none'`. */

.bollen {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

.bollen span {
  position: absolute;
  inset: 0;
  background-repeat: repeat-x;
  will-change: background-position;
}

.bollen span:nth-child(1) {
  --o: 0.85;
  background-image:
    radial-gradient(4px 4px at 53.6% 87.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 60.3% 28.9%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(8px 8px at 72.2% 83.1%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(5px 5px at 93.3% 87.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(7px 7px at 22.4% 30.6%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(7px 7px at 82.1% 63.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 70.4% 23.6%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(7px 7px at 52.6% 25.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 53.6% 9.6%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(8px 8px at 2.6% 44.9%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(4px 4px at 0.2% 5.5%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(9px 9px at 38.0% 72.7%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(8px 8px at 53.8% 35.5%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(8px 8px at 95.7% 16.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(4px 4px at 22.9% 79.5%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 5.3% 27.0%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%);
  background-size: 720px 100%;
  opacity: var(--o);
  animation: stroom 46s linear infinite, adem 9s ease-in-out infinite;
  animation-delay: 0s, 0s;
}

.bollen span:nth-child(2) {
  --o: 0.7;
  background-image:
    radial-gradient(3px 3px at 17.5% 51.1%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 94.8% 42.3%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 30.3% 71.3%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(4px 4px at 41.6% 95.0%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 17.1% 15.8%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(5px 5px at 67.7% 12.0%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 10.1% 49.3%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 55.0% 34.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 43.8% 77.4%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(5px 5px at 77.4% 6.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 77.7% 66.4%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(5px 5px at 92.5% 66.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 27.6% 68.9%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(4px 4px at 79.8% 38.0%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 24.7% 82.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 64.0% 78.9%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 58.8% 72.4%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(6px 6px at 7.5% 31.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%);
  background-size: 530px 100%;
  opacity: var(--o);
  animation: stroom 34s linear infinite, adem 7s ease-in-out infinite;
  animation-delay: 0s, -2s;
}

.bollen span:nth-child(3) {
  --o: 0.6;
  background-image:
    radial-gradient(9px 9px at 60.9% 25.4%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(13px 13px at 30.3% 26.5%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(10px 10px at 67.6% 98.7%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(11px 11px at 12.9% 76.9%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(10px 10px at 35.9% 20.0%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(11px 11px at 31.3% 84.5%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(10px 10px at 62.8% 38.7%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(9px 9px at 56.0% 12.7%, rgba(255, 252, 235, 0.92), #d6b452 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%);
  background-size: 940px 100%;
  opacity: var(--o);
  animation: stroom 62s linear infinite, adem 11s ease-in-out infinite;
  animation-delay: 0s, -4s;
}

.bollen span:nth-child(4) {
  --o: 0.55;
  background-image:
    radial-gradient(3px 3px at 45.3% 35.5%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 8.0% 68.1%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 55.3% 7.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 37.6% 18.0%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 90.8% 82.8%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 65.5% 51.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 35.4% 67.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 66.9% 9.4%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 17.7% 92.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 41.8% 97.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 59.2% 1.6%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 50.0% 9.6%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 89.9% 9.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 85.6% 41.3%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 90.0% 5.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 50.1% 1.2%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 94.9% 84.8%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 85.6% 23.5%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(2px 2px at 84.1% 22.9%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%),
    radial-gradient(3px 3px at 11.5% 96.7%, rgba(255, 252, 235, 0.92), #d6b452 38%, rgba(137, 110, 48, 0.3) 68%, transparent 72%);
  background-size: 410px 100%;
  opacity: var(--o);
  animation: stroom 26s linear infinite, adem 6s ease-in-out infinite;
  animation-delay: 0s, -1s;
}

.bollen span:nth-child(5) {
  --o: 0.4;
  background-image:
    radial-gradient(14px 14px at 72.7% 95.9%, rgba(255, 252, 235, 0.7), rgba(214, 180, 82, 0.85) 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(16px 16px at 41.2% 94.2%, rgba(255, 252, 235, 0.7), rgba(214, 180, 82, 0.85) 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(13px 13px at 13.2% 21.3%, rgba(255, 252, 235, 0.7), rgba(214, 180, 82, 0.85) 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(15px 15px at 86.2% 8.8%, rgba(255, 252, 235, 0.7), rgba(214, 180, 82, 0.85) 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%),
    radial-gradient(16px 16px at 82.7% 4.8%, rgba(255, 252, 235, 0.7), rgba(214, 180, 82, 0.85) 34%, rgba(137, 110, 48, 0.3) 62%, transparent 66%);
  background-size: 1180px 100%;
  opacity: var(--o);
  animation: stroom 84s linear infinite, adem 13s ease-in-out infinite;
  animation-delay: 0s, -6s;
}
@keyframes stroom {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 100vw 0;
  }
}

@keyframes adem {
  0%,
  100% {
    opacity: calc(var(--o) * 0.7);
  }
  50% {
    opacity: calc(var(--o) * 1.15);
  }
}

/* Zonder deze regel blijft het veld schuiven voor wie beweging heeft
   uitgezet. Bij efluxer staat alleen de lichtveeg op de koppen erin; dit veld
   is groter en beweegt continu, dus het hoort er hier ook onder. */
@media (prefers-reduced-motion: reduce) {
  .bollen span {
    animation: none;
    opacity: calc(var(--o) * 0.85);
  }
}

/* De inhoud staat boven het bollenveld. */
.hero-blok > .wrap {
  position: relative;
  z-index: 1;
}

.hero {
  display: grid;
  align-items: center;
  gap: clamp(2.5rem, 6vw, 4rem);
}

@media (min-width: 62rem) {
  .hero {
    grid-template-columns: 1.05fr 0.95fr;
  }
}

/* Micro-label met gouden streepje ervoor */

.label {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.5rem;
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.label::before {
  content: "";
  width: 2rem;
  height: 1px;
  flex: none;
  background: var(--goud-verloop);
}

h1 {
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.75rem, 6vw, 5.25rem);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Beide regels van de kop zijn metaal: de eerste goud, de tweede zilver, met
   een lichtveeg die er langzaam overheen trekt. Het verloop is breder dan de
   tekst (background-size 250%) zodat het schuiven van de positie de veeg
   verplaatst in plaats van het hele verloop te vervormen.

   De donkerste stops zijn goud 4,34 en zilver 4,61 tegen zwart. Dat is onder
   de 4,5 die gewone tekst vraagt, maar deze kop is minimaal 44 px en valt dus
   onder de eis voor grote tekst (3,0). Zet dit verloop nergens anders op. */

h1 .glans-goud,
h1 .glans-zilver {
  display: block;
}

h1 .glans-goud {
  color: var(--brand);
}

h1 .glans-zilver {
  font-style: italic;
  color: var(--accent);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1 .glans-goud,
  h1 .glans-zilver {
    background-size: 250% 100%;
    background-position: 100% 0;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
  }

  h1 .glans-goud {
    background-image: linear-gradient(
      100deg,
      #896e30 0%,
      #d6b452 20%,
      #fdf3c4 36%,
      #d6b452 52%,
      #896e30 74%,
      #d6b452 100%
    );
  }

  h1 .glans-zilver {
    background-image: linear-gradient(
      100deg,
      #77757a 0%,
      #b4b4b5 20%,
      #ffffff 36%,
      #b4b4b5 52%,
      #77757a 74%,
      #b4b4b5 100%
    );
  }
}

@media (prefers-reduced-motion: no-preference) {
  h1 .glans-goud,
  h1 .glans-zilver {
    animation: glans 8s linear infinite;
  }

  h1 .glans-zilver {
    animation-delay: -4s;
  }
}

@keyframes glans {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: 0 0;
  }
}

.lead {
  margin: 0 0 2.25rem;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  line-height: 1.7;
  color: var(--accent);
}

/* Kerncijfers. Hier staan alleen feiten die te controleren zijn: het aantal
   diensten dat op deze pagina staat, en het merkregistratienummer. Nooit een
   omzet-, groei- of klantaantal, want daar is geen meting van. */

.cijfers {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 1.25rem 2rem;
  margin: 0;
  padding: 0;
}

.cijfers > div {
  display: flex;
  align-items: stretch;
  gap: 2rem;
}

.cijfers > div + div::before {
  content: "";
  width: 1px;
  flex: none;
  background: var(--border);
}

.cijfers dt {
  font-size: clamp(1.375rem, 2.4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  background: var(--goud-verloop);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.cijfers dd {
  margin: 0.25rem 0 0;
  font-size: 0.6875rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

@media (max-width: 40rem) {
  .cijfers {
    gap: 1.5rem;
  }
  .cijfers > div + div::before {
    display: none;
  }
  .cijfers > div {
    gap: 0;
  }
}

/* Het beeld staat vrij in de kolom: geen kader, geen randen, zodat de bollen
   er zichtbaar achter doorstromen. De gloed komt van het logo zelf. */

.plek {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: 0;
}

.plek-logo {
  display: block;
  width: min(100%, 24rem);
  height: auto;
  filter: drop-shadow(0 0 2.5rem rgba(214, 180, 82, 0.28));
}

/* Knoppen */

.knoppen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.875rem;
  margin-top: 1.75rem;
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.875rem 1.75rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  white-space: nowrap;
  transition: box-shadow 0.3s ease, transform 0.2s ease, border-color 0.2s ease,
    color 0.2s ease;
}

.knop-goud {
  background: var(--goud-verloop);
  color: var(--on-brand);
}

.knop-goud:hover {
  box-shadow: 0 0 2rem color-mix(in oklab, var(--brand) 45%, transparent);
  transform: translateY(-1px);
}

@supports not (color: color-mix(in oklab, red, blue)) {
  .knop-goud:hover {
    box-shadow: 0 0 2rem #d6b45273;
  }
}

.knop-rand {
  border-color: var(--border-strong);
  color: var(--text);
}

.knop-rand:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.knop svg {
  width: 1.05rem;
  height: 1.05rem;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .knop-goud:hover {
    transform: none;
  }
}

/* Secties onder de hero */

.sectie {
  padding: clamp(3.5rem, 9vh, 6rem) 0;
  border-top: 1px solid var(--border);
}

.sectie-kop {
  max-width: 44rem;
  margin: 0 0 clamp(2.5rem, 5vw, 3.5rem);
}

.sectie-kop h2 {
  margin: 0 0 1rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(1.875rem, 3.4vw, 2.75rem);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--brand);
}

.sectie-kop p {
  margin: 0;
  max-width: 40rem;
  color: var(--accent);
}

/* Diensten. Een raster van kaarten met een gouden streepje boven de titel.
   Geen beloftes over wat het oplevert, alleen wat er gedaan wordt. */

.diensten {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--border);
  border: 1px solid var(--border);
}

@media (min-width: 40rem) {
  .diensten {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .diensten {
    grid-template-columns: repeat(4, 1fr);
  }
}

.diensten li {
  padding: 1.75rem 1.5rem;
  background: var(--surface);
  transition: background 0.25s ease;
}

.diensten li:hover {
  background: var(--surface-card);
}

.diensten h3 {
  display: flex;
  align-items: baseline;
  gap: 0.7rem;
  margin: 0 0 0.6rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.diensten h3::before {
  content: "";
  width: 1.25rem;
  height: 2px;
  flex: none;
  border-radius: 2px;
  background: var(--goud-verloop);
}

.diensten p {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Contact: links de gegevens, rechts het formulier. */

.contact {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: start;
}

@media (min-width: 62rem) {
  .contact {
    grid-template-columns: 0.85fr 1.15fr;
  }
}

.gegevens {
  margin: 0;
}

.gegevens div + div {
  margin-top: 1.75rem;
}

.gegevens dt {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.gegevens dd {
  margin: 0.4rem 0 0;
  color: var(--text);
}

.gegevens a {
  color: var(--brand);
  text-decoration: none;
  text-underline-offset: 0.25em;
}

.gegevens a:hover {
  text-decoration: underline;
}

/* Formulier. Geen JavaScript: het post rechtstreeks naar de formulierdienst,
   die de mail verstuurt en daarna omleidt naar de bedankpagina. */

.formulier {
  border: 1px solid var(--border);
  background: var(--surface-card);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

.rij {
  display: grid;
  gap: 1.25rem;
}

@media (min-width: 34rem) {
  .rij-twee {
    grid-template-columns: 1fr 1fr;
  }
}

/* De onderlinge afstand geldt alleen tussen de blokken die DIRECT in het
   formulier staan. Zonder `.formulier >` pakt `.veld + .veld` ook het tweede
   veld binnen een rij van twee, en dan zakt de rechterkolom een regel omlaag
   ten opzichte van de linker. Gezien in de browser op 19-08-2026; uit de CSS
   alleen is dat niet af te lezen. */
.formulier > .veld + .veld,
.formulier > .rij + .veld,
.formulier > .veld + .rij,
.formulier > .rij + .rij {
  margin-top: 1.25rem;
}

.veld label,
.rij label {
  display: block;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.veld label .optie,
.rij label .optie {
  font-weight: 400;
  letter-spacing: 0.08em;
  text-transform: none;
}

.veld input,
.veld select,
.veld textarea,
.rij input,
.rij select,
.rij textarea {
  display: block;
  width: 100%;
  margin-top: 0.5rem;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--border-strong);
  border-radius: 0;
  background: var(--surface-field);
  color: var(--text);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  color-scheme: dark;
}

.veld textarea {
  min-height: 8rem;
  resize: vertical;
}

.veld input:focus,
.veld select:focus,
.veld textarea:focus,
.rij input:focus,
.rij select:focus,
.rij textarea:focus {
  border-color: var(--brand);
  outline: none;
}

.veld input::placeholder,
.veld textarea::placeholder {
  color: #8e8e93;
}

/* Een select erft de systeempijl; die staat op een donkere grond vaak fout.
   Een eigen pijl als achtergrondbeeld kost geen JavaScript en geen extra
   verzoek, want het is een data-URI in deze stylesheet. */
.veld select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6b452' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.85rem center;
  background-size: 1.1rem 1.1rem;
}

/* De spamval. Verborgen voor mensen, zichtbaar voor bots. Komt hier iets
   binnen, dan gooit de formulierdienst de inzending weg. Niet met
   `display: none`: sommige bots slaan die velden juist over. */
.val {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.akkoord {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

.akkoord input {
  width: 1.05rem;
  height: 1.05rem;
  margin: 0.3rem 0 0;
  flex: none;
  accent-color: var(--brand);
}

.akkoord label {
  font-size: 0.875rem;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  line-height: 1.6;
  color: var(--text-muted);
}

.verstuur {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.75rem;
  padding: 0.875rem 2rem;
  border: 0;
  border-radius: 999px;
  background: var(--goud-verloop);
  color: var(--on-brand);
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  cursor: pointer;
  transition: box-shadow 0.3s ease, transform 0.2s ease;
}

.verstuur:hover {
  box-shadow: 0 0 2rem color-mix(in oklab, var(--brand) 45%, transparent);
  transform: translateY(-1px);
}

@supports not (color: color-mix(in oklab, red, blue)) {
  .verstuur:hover {
    box-shadow: 0 0 2rem #d6b45273;
  }
}

@media (prefers-reduced-motion: reduce) {
  .verstuur:hover {
    transform: none;
  }
}

.klein {
  margin: 1rem 0 0;
  font-size: 0.8125rem;
  line-height: 1.6;
  color: var(--text-muted);
}

/* Voet */

footer {
  border-top: 1px solid var(--border);
  padding: 1.5rem 0 2rem;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

footer .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  justify-content: space-between;
}

footer p {
  margin: 0;
}

footer a {
  color: var(--text-muted);
}

footer a:hover {
  color: var(--brand);
}

@media (prefers-reduced-motion: no-preference) {
  .hero > * {
    animation: op 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
  }
  .hero > div:first-child {
    animation-delay: 0.05s;
  }
  .beeld-kolom {
    animation-delay: 0.25s;
  }
}

@keyframes op {
  from {
    opacity: 0;
    transform: translateY(0.75rem);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Losse pagina's: 404 en de bedankpagina. Smallere tekstkolom, logo bovenaan
   omdat er geen hero is waar het al in staat. */

body.los main {
  flex: 1;
  display: flex;
  align-items: center;
  padding: clamp(3rem, 10vh, 6rem) 0;
}

body.los .wrap {
  max-width: 46rem;
}

body.los h1 {
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--text);
}

body.los p {
  max-width: 62ch;
}

body.los a:not(.knop) {
  color: var(--brand);
  text-underline-offset: 0.25em;
}

.logo {
  display: block;
  width: min(100%, 15rem);
  height: auto;
  margin: 0 0 2.25rem;
  filter: drop-shadow(0 0 2rem rgba(214, 180, 82, 0.22));
}

.status {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 1.25rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid color-mix(in oklab, var(--brand) 40%, transparent);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

@supports not (color: color-mix(in oklab, red, blue)) {
  .status {
    border-color: #d6b45266;
    background: #d6b4521a;
  }
}

.status::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--brand-licht);
  box-shadow: 0 0 0.5rem var(--brand);
}

.regel {
  width: 100%;
  max-width: 46rem;
  height: 1px;
  margin: 2.5rem 0;
  border: 0;
  background: linear-gradient(90deg, var(--brand), var(--accent) 45%, transparent);
}

/* Op de losse pagina's staan de knoppen links en niet gecentreerd. Dit is een
   klasse en geen `style`-attribuut: de CSP van deze site heeft geen
   `unsafe-inline` bij `style-src`, dus een inline stijl wordt geblokkeerd en
   dan staan de knoppen stil verkeerd zonder dat er iets foutmeldt. */
.knoppen-links {
  justify-content: flex-start;
}