/* MOORVELD — merkpagina
   Alles hangt aan één gecentreerde container van 80rem met vier kolommen. Het
   rasterveld op de achtergrond gebruikt diezelfde maat, zodat de lijnen langs
   de tekst lopen in plaats van er dwars doorheen. */

/* ---------------------------------------------------------------- basis -- */

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

:root {
  --inkt:    #0A0B0C;
  --vlak:    #101213;
  --bot:     #EEEAE1;
  --beton:   #8A8C88;   /* 5,8:1 op inkt */
  --koper:   #C08552;   /* 6,3:1 op inkt */
  --signaal: #E15B27;

  --lijn:      rgba(238, 234, 225, .07);
  --lijn-fel:  rgba(238, 234, 225, .16);
  --koperlijn: rgba(192, 133, 82, .3);

  --display: "Barlow Condensed", "Arial Narrow", system-ui, sans-serif;
  --tekst:   "Barlow", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;

  --omvat: 80rem;                        /* 1280px, de inhoudskolom */
  --rand: clamp(1.25rem, 4vw, 3.5rem);   /* goot tussen container en scherm */
  --veer: cubic-bezier(.22, .61, .36, 1);
}

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

body {
  margin: 0;
  background: var(--inkt);
  color: var(--bot);
  font-family: var(--tekst);
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; height: auto; }

/* De container. Zonder dit plakt alles op een breed scherm tegen de linkerrand
   en staat de tweede kolom meters verderop. */
.omvat {
  width: 100%;
  max-width: var(--omvat);
  margin-inline: auto;
}

/* ------------------------------------------------------------- sfeerlaag -- */

.sfeer { position: fixed; inset: 0; z-index: 0; pointer-events: none; }
.sfeer__licht, .sfeer__korrel { position: absolute; inset: 0; }

.sfeer__licht {
  background:
    radial-gradient(70% 55% at 78% 8%,  rgba(192, 133, 82, .12), transparent 62%),
    radial-gradient(85% 65% at 12% 92%, rgba(42, 27, 20, .8),    transparent 68%),
    radial-gradient(55% 45% at 50% 35%, rgba(238, 234, 225, .035), transparent 72%);
}

/* Het raster staat precies op de container en verdeelt hem in vier kolommen.
   Daardoor valt elke kolomgrens samen met een lijn en oogt de pagina uitgelijnd
   in plaats van willekeurig doorsneden. */
.sfeer__raster {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: min(100% - 2 * var(--rand), var(--omvat));
  translate: -50% 0;
  background-image:
    linear-gradient(90deg, var(--lijn) 1px, transparent 1px),
    linear-gradient(270deg, var(--lijn) 1px, transparent 1px);
  background-size: calc(100% / 4) 100%, 100% 100%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}

/* Uitvergroot beeldmerk, grotendeels aangesneden; het verloop laat de harde
   randen van de vlakke vorm oplossen. */
.sfeer__merk {
  position: absolute;
  right: -30vmax;
  top: 50%;
  width: 92vmax;
  height: 92vmax;
  translate: 0 -50%;
  opacity: .022;
  background: url("/assets/moorveld-beeldmerk-bot.svg") no-repeat center / contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 55%);
          mask-image: linear-gradient(90deg, transparent, #000 55%);
}

/* Korrel: zonder dit oogt een groot donker vlak digitaal glad. */
.sfeer__korrel {
  opacity: .045;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------------- structuur -- */

.kop, main, .voet { position: relative; z-index: 1; }

/* Al het verticale ritme zit op de container, niet ook nog eens op de sectie:
   anders stapelen twee paddings op elkaar en vallen er gaten van honderden
   pixels tussen de blokken. De scheidingslijn loopt zo ook precies over de
   containerbreedte in plaats van van rand tot rand. */
.sectie { padding: 0 var(--rand); }
.sectie > .omvat { padding-block: clamp(3rem, 5vw, 5.25rem); }
.sectie + .sectie > .omvat { border-top: 1px solid var(--lijn); }

.overslaan {
  position: absolute;
  left: var(--rand);
  top: -100%;
  z-index: 2;
  padding: .6rem 1rem;
  background: var(--bot);
  color: var(--inkt);
  font-size: .75rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-decoration: none;
}
.overslaan:focus { top: 1rem; }

/* ------------------------------------------------------------------ kop -- */

.kop { padding: clamp(1.4rem, 2.4vw, 2rem) var(--rand); }

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

/* Het volledige lockup zonder slogan: dat is het merkteken dat mensen moeten
   herkennen, niet een los icoon met tekst ernaast. */
.kop__merk img { width: clamp(9rem, 13vw, 12.5rem); }

.kop__zij { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }

.meta {
  color: var(--beton);
  font-size: .66rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.kop__contact {
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
}

/* ----------------------------------------------------------------- hero -- */

.hero { padding: 0 var(--rand); }

.hero__binnen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100svh - 11rem);
  padding-block: clamp(2rem, 5vh, 4rem) clamp(3rem, 7vw, 5.5rem);
  gap: clamp(1.25rem, 2.6vh, 2rem);
  text-align: center;
}

.hero__status {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0;
  color: var(--bot);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.stip {
  width: 6px;
  height: 6px;
  flex: none;
  border-radius: 50%;
  background: var(--signaal);
  box-shadow: 0 0 12px rgba(225, 91, 39, .8);
}

/* De kop is het beeld op deze pagina. Gecentreerd, want daarmee staat het merk
   midden in de compositie in plaats van tegen een rand geduwd. */
.hero__titel {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(3rem, 11vw, 9.5rem);
  line-height: .9;
  letter-spacing: -.005em;
  text-transform: uppercase;
}

.hero__regel { display: block; }
.hero__regel--in { color: var(--koper); }

.hero__onder {
  max-width: 52ch;
  margin: 0;
  color: var(--beton);
  font-size: clamp(1rem, 1.4vw, 1.1rem);
  line-height: 1.8;
  text-wrap: balance;
}

.hero__voet { display: flex; flex-wrap: wrap; justify-content: center; gap: .8rem; margin-top: .5rem; }

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

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: .85rem 1.9rem;
  border: 1px solid var(--lijn-fel);
  background: transparent;
  color: var(--bot);
  font-family: var(--tekst);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .24em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s var(--veer), border-color .25s var(--veer), color .25s var(--veer);
}
.knop:hover, .knop:focus-visible { border-color: var(--koper); color: var(--koper); }

.knop--vol { border-color: var(--koper); background: var(--koper); color: var(--inkt); }
.knop--vol:hover, .knop--vol:focus-visible { background: var(--bot); border-color: var(--bot); color: var(--inkt); }

.knop--breed { align-self: flex-start; margin-top: .6rem; }

/* -------------------------------------------------------------- secties -- */

.etiket {
  margin: 0 0 clamp(1.75rem, 3vw, 2.5rem);
  color: var(--koper);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}

.sectie__kop {
  margin: 0;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3.8rem);
  line-height: 1.03;
  text-transform: uppercase;
}

/* Twee kolommen die naast elkaar staan in plaats van uit elkaar getrokken:
   de container begrenst de breedte, de gap regelt de afstand. */
.duo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: start;
}

.lopend { margin: 0; color: var(--beton); font-size: clamp(.97rem, 1.2vw, 1.04rem); line-height: 1.85; text-wrap: pretty; }
.lopend p { margin: 0 0 1.2rem; }
.lopend p:last-child { margin-bottom: 0; }

.noot { margin: 1.75rem 0 0; color: var(--beton); font-size: .82rem; letter-spacing: .03em; }

/* ---------------------------------------------------------------- velden -- */

.velden { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--lijn); }

/* Drie kolommen die op de raster­lijnen vallen: nummer, naam, toelichting. */
.veldje {
  display: grid;
  grid-template-columns: 3rem minmax(0, 1fr) minmax(0, 1fr);
  align-items: baseline;
  gap: clamp(.75rem, 2vw, 2rem);
  padding: clamp(.9rem, 1.8vw, 1.4rem) 0;
  border-bottom: 1px solid var(--lijn);
  transition: border-color .3s var(--veer);
}
.veldje:hover { border-bottom-color: var(--koperlijn); }
.veldje:hover .veldje__naam, .veldje:hover .veldje__nr { color: var(--koper); }

.veldje__nr {
  color: var(--beton);
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: .2em;
  transition: color .3s var(--veer);
}

.veldje__naam {
  font-family: var(--display);
  font-weight: 500;
  font-size: clamp(1.4rem, 3vw, 2.3rem);
  line-height: 1.1;
  letter-spacing: .01em;
  text-transform: uppercase;
  transition: color .3s var(--veer);
}

.veldje__toe { color: var(--beton); font-size: .88rem; line-height: 1.6; }

/* ------------------------------------------------------------ beginselen -- */

.kwartet {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(1.5rem, 2.5vw, 2.25rem);
}

.beginsel { padding-top: 1.3rem; border-top: 1px solid var(--koperlijn); }

.beginsel__kop {
  margin: 0 0 .65rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(1.05rem, 1.6vw, 1.3rem);
  letter-spacing: .1em;
  text-transform: uppercase;
}

.beginsel p { margin: 0; color: var(--beton); font-size: .9rem; line-height: 1.7; text-wrap: pretty; }

/* -------------------------------------------------------------- aanvraag -- */

.sectie--aanvraag { scroll-margin-top: 1rem; }
.duo--aanvraag { align-items: stretch; }

.aanvraag__zij { display: flex; flex-direction: column; }
.aanvraag__zij .sectie__kop { margin-bottom: 1.2rem; }
.aanvraag__zij .lopend { max-width: 42ch; margin-bottom: auto; }

.aanvraag__adres { display: flex; flex-direction: column; gap: .35rem; margin: 2rem 0 0; }

.formulier {
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
  padding: clamp(1.4rem, 2.5vw, 2.25rem);
  border: 1px solid var(--lijn-fel);
  background: var(--vlak);
}

.formulier__rij { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.15rem; }

.veld { display: flex; flex-direction: column; gap: .4rem; margin: 0; }

.veld__naam {
  color: var(--beton);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.veld__optioneel { letter-spacing: .1em; opacity: .7; }

/* Alleen een onderlijn: dat sluit aan op de haarlijnen elders en houdt het
   formulier rustig in plaats van als invulblok te lezen. */
.veld__invoer {
  width: 100%;
  min-height: 44px;
  padding: .5rem 0;
  border: 0;
  border-bottom: 1px solid var(--lijn-fel);
  background: transparent;
  color: var(--bot);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  transition: border-color .3s var(--veer);
}
.veld__invoer--groot { resize: vertical; min-height: 5.5rem; }
.veld__invoer:hover { border-bottom-color: var(--koperlijn); }
.veld__invoer:focus { outline: none; border-bottom-color: var(--koper); }

.honingpot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

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

.voet { padding: clamp(1.3rem, 2.2vw, 1.8rem) var(--rand); border-top: 1px solid var(--lijn); }

.voet__binnen {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem clamp(1rem, 2vw, 1.75rem);
  color: var(--beton);
  font-size: .66rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}

.voet__merk { width: 20px; opacity: .5; }
.voet__regel { margin: 0; }
.voet__regel--midden { margin-right: auto; }

/* -------------------------------------------------------------- schakel -- */

.schakel { position: relative; color: inherit; text-decoration: none; transition: color .25s var(--veer); }
.schakel::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -.28em;
  width: 100%;
  height: 1px;
  background: var(--koper);
  scale: 0 1;
  transform-origin: left;
  transition: scale .4s var(--veer);
}
.schakel:hover, .schakel:focus-visible { color: var(--koper); }
.schakel:hover::after, .schakel:focus-visible::after { scale: 1 1; }

.schakel--groot {
  color: var(--bot);
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
  letter-spacing: .01em;
  text-transform: none;
}

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

/* ------------------------------------------------- lopende tekstpagina's -- */

.pagina { padding: 0 var(--rand); }
.pagina > .omvat { min-height: calc(100svh - 15rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }

.artikel { max-width: 64ch; }
.artikel p { margin: 0 0 1.1rem; color: var(--beton); font-size: .97rem; line-height: 1.85; text-wrap: pretty; }
.artikel .etiket { margin: 2.5rem 0 .85rem; }

.artikel__titel, .melding__kop {
  margin: 0 0 1.25rem;
  font-family: var(--display);
  font-weight: 600;
  font-size: clamp(2rem, 4.6vw, 3.4rem);
  line-height: 1.03;
  text-transform: uppercase;
}

.artikel .artikel__inleiding { color: var(--bot); font-size: 1.06rem; }

.melding { max-width: 56ch; }
.melding p { margin: 0 0 1.1rem; color: var(--beton); font-size: 1.02rem; line-height: 1.8; }
.melding p:last-of-type { margin-bottom: 0; }
.melding__terug { margin-top: 2.25rem; }

/* -------------------------------------------------------------- beweging -- */

@keyframes opkomst {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

/* Kort gehouden: met `both` staat alles vóór zijn beurt op opacity 0, en een
   lange staart betekent dat een vroege screenshot een leeg scherm vangt. */
.kop, .hero__status, .hero__titel, .hero__onder, .hero__voet {
  animation: opkomst .75s var(--veer) both;
}
.kop          { animation-delay: .04s; }
.hero__status { animation-delay: .12s; }
.hero__titel  { animation-delay: .18s; animation-duration: .9s; }
.hero__onder  { animation-delay: .34s; }
.hero__voet   { animation-delay: .44s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .kop, .hero__status, .hero__titel, .hero__onder, .hero__voet { animation: none; }
  .schakel::after, .knop, .veldje, .veld__invoer { transition: none; }
}

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

@media (max-width: 64rem) {
  .duo { grid-template-columns: 1fr; gap: 1.75rem; }
  .kwartet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.75rem 2rem; }
  .veldje { grid-template-columns: 2.5rem minmax(0, 1fr); }
  .veldje__toe { grid-column: 2; }
  .aanvraag__zij .lopend { max-width: none; }
  .aanvraag__adres { margin-top: 1.5rem; }
}

@media (max-width: 40rem) {
  .sfeer__raster { background-size: calc(100% / 2) 100%, 100% 100%; }
  .sfeer__merk { width: 118vmax; height: 118vmax; right: -40vmax; }

  .kop__merk img { width: min(44vw, 10.5rem); }
  .kop__zij .meta { display: none; }

  .hero__binnen { min-height: auto; padding-block: clamp(2.5rem, 10vh, 4rem) clamp(2.5rem, 8vh, 4rem); }
  .hero__voet { width: 100%; }
  .knop { flex: 1 1 100%; }

  .kwartet { grid-template-columns: 1fr; gap: 1.6rem; }

  .veldje { gap: .6rem 1rem; }
  .veldje__nr { font-size: .64rem; }

  .formulier__rij { grid-template-columns: 1fr; }
  .knop--breed { align-self: stretch; }

  .voet__binnen { gap: .45rem 1rem; }
  .voet__merk { display: none; }
  .voet__regel--midden { margin-right: 0; flex-basis: 100%; order: 3; }
  .voet__leus { display: none; }
}