/* TJAM HOLDING, de eenpaginasite.
   Opbouw overgenomen van `cviglobalgroup`, dat op zijn beurt van `efluxer`
   komt: handgeschreven HTML en CSS, geen framework, geen JavaScript, geen
   bouwstap. Wat in `src/` staat is wat er op de server komt.

   TWEE DINGEN WIJKEN BEWUST AF VAN CVI, en allebei om dezelfde reden: EPOWER,
   EFLUXER en CVI zijn alle drie goud op zwart, en CVI doet ook investeringen.
   Nog een vierde goud-op-zwart-site uit dezelfde koker maakt ze onderling
   onherkenbaar.

   1. Het palet is staalblauw en platina in plaats van goud. Alle waarden en
      hun gemeten contrast staan in README.md; meet opnieuw met
      `node scripts/contrast.mjs` zodra je er een aanraakt.
   2. De achtergrond is een puntenraster met een lichtveeg, niet CVI's veld met
      stromende bollen. Rustiger, en het hoort bij een investeringsmaatschappij
      in plaats van bij een internationale handelsgroep. */

@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 staat in sRGB-hex en niet in oklch, zodat `scripts/contrast.mjs`
   het rechtstreeks uit dit blok kan lezen en er nooit een tweede lijst
   kleurwaarden naast ontstaat. Het gemeten contrast van elke waarde tegen
   zwart staat erachter; de volledige tabel met paringen staat in README.md. */
:root {
  --surface: #000000;
  --surface-card: #101318;      /* doos om het formulier, decoratief */
  --surface-field: #0a0c10;     /* invoervelden */
  --border: #2f3339;            /* 1,65 - decoratieve scheidingslijnen */
  --border-strong: #5c636d;     /* 3,46 - randen van bedienbare elementen */
  --text: #f1f3f6;              /* 18,89 - koppen en lopende tekst */
  --text-muted: #99a0aa;        /*  7,96 - labels en bijschriften */
  --accent: #b3bcc7;            /* 10,93 - platina, de lead en de inleidingen */
  --brand: #7fa8d8;             /*  8,50 - staalblauw, het merkaccent */
  --brand-mid: #5f8cc2;         /*  6,02 - donkerste stop van het knopverloop */
  --brand-licht: #cfe0f5;       /* 15,63 - lichtste stop van het verloop */
  --brand-donker: #3d5f8a;      /*  3,20 - ALLEEN als verloopstop op de H1 */
  --on-brand: #0a0f16;          /*  5,51 op --brand-mid, 7,77 op --brand */

  /* Het knopverloop stopt bij --brand-mid en loopt niet door naar
     --brand-donker: op die donkerste stop haalt de knoptekst 2,93 en dat is
     onder de 4,5 die tekst van deze grootte vraagt. Nu is de laagste 5,51. */
  --staal-verloop: linear-gradient(135deg, var(--brand-licht) 0%, var(--brand) 45%, var(--brand-mid) 100%);
  --platina-verloop: linear-gradient(135deg, #f1f3f6 0%, #b3bcc7 48%, #7d8794 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;
}

/* Twee 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 58% 45% at 18% 22%,
      color-mix(in oklab, var(--brand) 13%, transparent),
      transparent 62%
    ),
    radial-gradient(
      ellipse 42% 38% at 82% 62%,
      color-mix(in oklab, var(--accent) 7%, transparent),
      transparent 60%
    );
}

@supports not (color: color-mix(in oklab, red, blue)) {
  body::before {
    background: radial-gradient(ellipse 58% 45% at 18% 22%, #7fa8d821, transparent 62%);
  }
}

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);
}

.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: de merknaam links, twee ankerlinks rechts. Geen uitklapmenu, want er
   is maar een pagina; op een smal scherm vallen de links onder de naam. */

.top {
  position: relative;
  z-index: 2;
  padding: 1.5rem 0 0;
}

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

.merk {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  color: var(--text);
}

.merk svg {
  width: 1.6rem;
  height: 1.52rem;
  flex: none;
}

.merk-naam {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1;
}

.merk-naam span {
  font-weight: 400;
  color: var(--text-muted);
}

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

.top nav a {
  text-decoration: none;
  color: var(--text-muted);
}

.top nav a:hover {
  color: var(--brand);
}

/* 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(44rem, 80svh);
}

/* Het puntenraster met de lichtveeg. Geen canvas en geen WebGL: deze site
   draait op `script-src 'none'`, dus alles wat beweegt is CSS.

   Twee lagen. De onderste is een vast raster van punten, met een masker zodat
   het naar de randen uitdooft in plaats van hard af te snijden. De bovenste is
   een schuine lichtveeg die er langzaam overheen trekt; die geeft het raster
   diepte zonder dat er iets rondvliegt. Bewust rustiger dan CVI's veld met
   stromende bollen: dit is een investeringsmaatschappij. */

.raster {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.raster::before,
.raster::after {
  content: "";
  position: absolute;
}

.raster::before {
  inset: 0;
  background-image: radial-gradient(circle at center, #7fa8d84d 1.1px, transparent 1.2px);
  background-size: 36px 36px;
  -webkit-mask-image: radial-gradient(ellipse 72% 62% at 32% 42%, #000 0%, transparent 72%);
  mask-image: radial-gradient(ellipse 72% 62% at 32% 42%, #000 0%, transparent 72%);
}

.raster::after {
  inset: -30%;
  background: linear-gradient(
    108deg,
    transparent 38%,
    #7fa8d826 47%,
    #cfe0f51f 50%,
    #7fa8d826 53%,
    transparent 62%
  );
  animation: veeg 16s linear infinite;
}

@keyframes veeg {
  from {
    transform: translateX(-55%);
  }
  to {
    transform: translateX(55%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .raster::after {
    animation: none;
    transform: none;
    opacity: 0.55;
  }
}

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

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

@media (min-width: 62rem) {
  /* 1,25 tegen 0,75 en niet gelijker verdeeld: de eerste regel van de H1
     ("Investeren in bedrijven") moet op EEN regel passen, anders blijft het
     woord "bedrijven" alleen achter op een eigen regel. Gemeten in de browser
     op 09-09-2026: bij 1,1fr was de tekstkolom 509 px terwijl de regel er 528
     nodig had. De grens ligt bij 8,7 keer de lettergrootte; daar is de clamp
     van de H1 hieronder op afgestemd. Verander je er een van, meet dan de
     ander opnieuw. */
  .hero {
    grid-template-columns: 1.25fr 0.75fr;
  }
}

/* Micro-label met 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(--staal-verloop);
}

h1 {
  margin: 0 0 1.5rem;
  font-family: var(--font-serif);
  font-weight: 500;
  font-size: clamp(2.625rem, 5.4vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -0.015em;
  color: var(--text);
}

/* Beide regels van de kop zijn metaal: de eerste platina, de tweede staalblauw
   cursief, 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 platina 5,77 en staal 3,20 tegen zwart. Die 3,20 is
   onder de 4,5 die gewone tekst vraagt, maar deze kop is minimaal 42 px en
   valt dus onder de eis voor grote tekst (3,0). Zet dit verloop nergens
   anders op. */

h1 .glans-platina,
h1 .glans-staal {
  display: block;
}

h1 .glans-platina {
  color: var(--accent);
}

h1 .glans-staal {
  font-style: italic;
  color: var(--brand);
}

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

  h1 .glans-platina {
    background-image: linear-gradient(
      100deg,
      #7d8794 0%,
      #b3bcc7 20%,
      #ffffff 36%,
      #b3bcc7 52%,
      #7d8794 74%,
      #b3bcc7 100%
    );
  }

  h1 .glans-staal {
    background-image: linear-gradient(
      100deg,
      #3d5f8a 0%,
      #7fa8d8 20%,
      #e2eefc 36%,
      #7fa8d8 52%,
      #3d5f8a 74%,
      #7fa8d8 100%
    );
  }
}

@media (prefers-reduced-motion: no-preference) {
  h1 .glans-platina,
  h1 .glans-staal {
    animation: glans 9s linear infinite;
  }

  h1 .glans-staal {
    animation-delay: -4.5s;
  }
}

@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);
}

/* HIER STAAT BEWUST GEEN CIJFERBLOK.
   CVI heeft er een met het aantal diensten en het merkregistratienummer, maar
   dat zijn twee feiten die je op die pagina kunt natellen. Voor TJAM Holding
   bestaat geen enkel controleerbaar cijfer: de BV is nog niet opgericht, er is
   geen KvK-nummer, geen portefeuille en geen jaartal. Een blok met "10+ jaar
   ervaring" of "x deelnemingen" zou verzonnen zijn. Komen die feiten er, dan
   is dit de plek; tot die tijd staat er niets. */

/* Het beeldmerk staat vrij in de kolom, zonder kader, zodat het raster er
   zichtbaar achter doorloopt. */

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

.plek svg {
  display: block;
  width: min(100%, 19rem);
  height: auto;
  filter: drop-shadow(0 0 2.5rem rgba(127, 168, 216, 0.3));
}

/* Knoppen */

.knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: 0.875rem;
}

.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-staal {
  background: var(--staal-verloop);
  color: var(--on-brand);
}

.knop-staal: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-staal:hover {
    box-shadow: 0 0 2rem #7fa8d873;
  }
}

.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-staal:hover {
    transform: none;
  }
}

/* Secties onder de hero */

.sectie {
  position: relative;
  z-index: 1;
  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);
}

/* Wat we doen. Een raster van kaarten met een streepje boven de titel.
   Elke kaart beschrijft wat er gebeurt, nooit wat het oplevert. */

.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(--staal-verloop);
}

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

/* Hoe het gaat. Vier stappen met een genummerde ruit ervoor, dezelfde vorm als
   in het beeldmerk. De nummering staat in de HTML als tekst en niet als
   CSS-teller: verdwijnt de stylesheet, dan staan de stappen er nog op volgorde. */

.stappen {
  display: grid;
  gap: 1.75rem 2rem;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}

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

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

.stappen li {
  position: relative;
  padding-top: 3.5rem;
}

.stap-nr {
  position: absolute;
  top: 0;
  left: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--brand);
  background: color-mix(in oklab, var(--brand) 10%, transparent);
  color: var(--brand);
  font-size: 0.8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  transform: rotate(45deg);
}

.stap-nr span {
  display: block;
  transform: rotate(-45deg);
}

@supports not (color: color-mix(in oklab, red, blue)) {
  .stap-nr {
    background: #7fa8d81a;
  }
}

.stappen h3 {
  margin: 0 0 0.5rem;
  font-size: 0.9375rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
}

.stappen 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. Overgenomen uit CVI, waar dat in de browser
   gezien is op 19-08-2026; uit de CSS alleen is het 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: #8b929c;
}

/* 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='%237fa8d8' 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;
}

.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(--staal-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 #7fa8d873;
  }
}

@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 {
  position: relative;
  z-index: 1;
  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, beeldmerk
   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%, 11rem);
  height: auto;
  margin: 0 0 2.25rem;
  filter: drop-shadow(0 0 2rem rgba(127, 168, 216, 0.24));
}

.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: #7fa8d866;
    background: #7fa8d81a;
  }
}

.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);
}