/* Gedeelde stijl voor de Yakin-site. */

/* Raleway staat op onze eigen server in plaats van bij Google: dat scheelt een
   verzoek naar een derde partij bij elk bezoek en maakt de pagina sneller.
   Het is een variabele letter, vandaar één bestand voor alle diktes.
   Bron: Google Fonts, licentie SIL Open Font License 1.1. */
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/raleway-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Raleway";
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url("fonts/raleway-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  --olijf: #7a8074;
  --olijf-knop: #7a8074;
  --bruin: #573028;
  --tekst: #6f6a62;
  --grijs-vlak: #eeeeed;
  --lijn: #e2e1df;
  --fout: #a2453a;
  --wit: #ffffff;
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
/* De vlakken lopen tot aan de rand door. Deze regel op html erbij houdt een
   horizontale schuifbalk weg: overflow op body alleen is niet altijd genoeg.
   `clip` schuift niet mee, `hidden` is de terugval voor oudere browsers. */
html {
  overflow-x: hidden;
  overflow-x: clip;
}
body {
  font-family: "Raleway", "Segoe UI", Arial, sans-serif;
  color: var(--tekst);
  background: var(--wit);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
}

/* Bovenste gedeelte met de decoratieve vlakken */
.hero { position: relative; overflow: hidden; }

.vlak {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}
.vlak-linksboven {
  top: 0; left: 0;
  width: 44vw; max-width: 720px; height: 42vh; min-height: 420px; max-height: 520px;
}
.vlak-rechtsonder {
  bottom: 0; right: 0;
  width: 30vw; max-width: 500px; height: 34vh; min-height: 330px; max-height: 420px;
}
.vlak svg { width: 100%; height: 100%; display: block; }

/* Eén grijstint voor alle vlakken, zonder lagen of strepen erover. */
.tint { fill: var(--grijs-vlak); }

/* Menubalk */
.menu {
  position: absolute;
  top: 36px; left: 24px;
  z-index: 3;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
}
.menu a {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--olijf);
  text-decoration: none;
  padding-bottom: 5px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
}
.menu a:hover { color: var(--bruin); }
.menu a[aria-current="page"] { color: var(--bruin); border-bottom-color: var(--bruin); }

/* Logo */
.logo {
  position: absolute;
  top: 100px; right: 15%;
  z-index: 2;
  width: 330px; max-width: 40vw;
}
.logo img { width: 100%; height: auto; display: block; }

/* Op de binnenpagina's is het logo een link naar de homepage, verder identiek. */
a.logo { display: block; }

/* Inhoud */
main {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 430px 24px 120px;
}
h1 {
  font-size: 30px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--tekst);
  margin: 0 0 34px;
  text-transform: uppercase;
}
h1 strong { color: var(--bruin); font-weight: 800; }
h2 {
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--bruin);
  margin: 0 0 6px;
}
p {
  font-size: 17px;
  line-height: 1.8;
  margin: 0 0 24px;
  max-width: 800px;
}
p strong { color: var(--olijf); font-weight: 700; }
/* De regel direct onder de kop: wat we doen, in één oogopslag. */
.lead {
  font-size: 20px;
  line-height: 1.7;
  font-weight: 600;
  color: var(--bruin);
  margin-bottom: 32px;
}

.knop {
  display: inline-block;
  background: var(--olijf-knop);
  color: var(--wit);
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 13px 40px;
  border-radius: 999px;
  transition: background 0.2s;
}
.knop:hover { background: var(--bruin); }

.kicker {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--olijf);
  margin: 0 0 12px;
}
.ondertitel {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--olijf);
  margin: 0 0 26px;
}
.tekstlink {
  color: var(--bruin);
  text-decoration: none;
  border-bottom: 1px solid var(--lijn);
}
.tekstlink:hover { border-bottom-color: var(--bruin); }

/* Secties: witte sectie en grijze band met schuine bovenrand.
   De zijmarge zit op .inhoud, net als bij main, zodat alle tekst op elke
   pagina op dezelfde lijn begint. De band zelf loopt wel van rand tot rand. */
.sectie {
  position: relative;
  z-index: 1;
  padding: 96px 0 30px;
}
.band {
  position: relative;
  z-index: 1;
  margin-top: 90px;
  padding: 84px 0 104px;
  background: var(--grijs-vlak);
}
.band-rand {
  position: absolute;
  top: -90px; left: 0;
  width: 100%; height: 90px;
  display: block;
}
/* Relatief geplaatst met z-index, zodat de tekst altijd boven de vlakken ligt:
   die zijn absoluut geplaatst en tekst zonder z-index belandt daaronder. */
.inhoud {
  position: relative;
  z-index: 1;
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Binnenpagina's: zelfde kop als de homepage, alleen een kortere staart. */
.pagina-hero { padding: 430px 24px 90px; }
.pagina-hero h1 { color: var(--bruin); font-weight: 800; margin-bottom: 18px; }

.punten {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  max-width: 800px;
}
.punten li {
  position: relative;
  padding-left: 26px;
  font-size: 17px;
  line-height: 1.8;
}
.punten li::before {
  content: "";
  position: absolute;
  left: 0; top: 12px;
  width: 10px; height: 10px;
  background: var(--olijf);
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

/* Vraag en antwoord. De vraag is een h3 en niet een h2, zodat de kop van de
   sectie zwaarder blijft wegen dan de losse vragen eronder. Het lijntje komt
   alleen boven een vraag die op een antwoord volgt, dus niet bij de eerste. */
.vraag {
  font-size: 19px;
  font-weight: 700;
  line-height: 1.55;
  letter-spacing: 0.01em;
  color: var(--bruin);
  max-width: 800px;
  margin: 30px 0 10px;
}
p + .vraag {
  border-top: 1px solid var(--lijn);
  padding-top: 34px;
  margin-top: 34px;
}

.kaarten {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 22px;
  margin-top: 34px;
}
/* Bij vier kaarten twee naast elkaar, anders blijft de vierde alleen achter op
   een eigen regel. Breder ook, zodat een lang woord als stakeholdermanagement past. */
.kaarten-twee { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Een knop onder het kaartenraster krijgt lucht, anders plakt hij tegen de
   onderste kaart aan. */
.kaarten + .knop { margin-top: 40px; }
.kaart {
  background: var(--grijs-vlak);
  padding: 22px 24px 24px;
}
.band .kaart { background: var(--wit); }
/* Kerncijfers bij een referentie: het getal eerst, want daar valt het oog op. */
.cijfers {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 24px;
  margin: 30px 0 28px;
}
.cijfer strong {
  display: block;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: 0.01em;
  color: var(--bruin);
}
.cijfer span {
  display: block;
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--olijf);
}
.periode {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--olijf);
  margin: 0 0 18px;
}

.kaart h3 {
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--bruin);
  margin: 0 0 8px;
  overflow-wrap: break-word;
  hyphens: auto;
}
.kaart p { font-size: 15px; line-height: 1.7; margin: 0; }
.kaart .werkt-met {
  display: block;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--olijf);
}

/* Het embleem als accent boven de koppen: in volle kleur en helemaal heel, want
   groot en vervaagd achter de schuine randen viel het in stukken uiteen. */
.merk {
  display: block;
  height: 46px;
  width: auto;
  margin: 0 0 20px;
}

/* Contactformulier */
.formulier { max-width: 640px; margin-top: 30px; }
.veld { margin-bottom: 20px; }
.veld label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--bruin);
  margin-bottom: 8px;
}
.veld input,
.veld textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;
  line-height: 1.6;
  color: var(--tekst);
  background: var(--wit);
  border: 1px solid var(--lijn);
  border-radius: 0;
  padding: 12px 14px;
}
.band .veld input,
.band .veld textarea { border-color: transparent; }
.veld input:focus,
.veld textarea:focus {
  outline: 2px solid var(--olijf);
  outline-offset: 1px;
}
.veld textarea { min-height: 170px; resize: vertical; }

/* Alleen zichtbaar voor robots die alles invullen. */
.honing {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.knop-verzend {
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.knop-verzend:disabled { opacity: 0.6; cursor: default; }

.melding {
  margin: 22px 0 0;
  padding: 14px 18px;
  background: var(--wit);
  border-left: 4px solid var(--olijf);
  font-size: 15px;
  line-height: 1.7;
  max-width: 640px;
}
.melding-goed { border-left-color: var(--olijf); color: var(--bruin); }
.melding-fout { border-left-color: var(--fout); color: var(--fout); }

.klein {
  font-size: 14px;
  line-height: 1.7;
  color: var(--olijf);
  margin: 26px 0 0;
  max-width: 640px;
}

/* Afsluiting: op elke pagina dezelfde voettekst met de paginalinks en contact. */
.slot {
  border-top: 1px solid var(--lijn);
  margin-top: 90px;
  padding: 54px 0 64px;
}
.slot-inhoud {
  max-width: 820px;
  margin: 0 auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 36px;
}
/* Alle drie de kolommen beginnen met een kop op dezelfde hoogte, en de regels
   eronder delen dezelfde regelafstand. Zo staat alles op één lijn. */
.slot-kolom p { margin: 0 0 10px; font-size: 15px; line-height: 1.9; }
.slot-merk {
  display: inline-block;
  height: 20px;
  width: auto;
  vertical-align: -4px;
  margin-right: 10px;
}
.slot-kop {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--bruin);
  margin: 0 0 14px;
}
.slot-kolom ul { list-style: none; margin: 0; padding: 0; }
.slot-kolom li { font-size: 15px; line-height: 1.9; }
/* De plaats is geen link, dus iets rustiger dan de regels erboven. */
.slot-plaats { color: var(--olijf); }
/* In de voettekst geen streepje onder elke link: dat gaf een rommelig blok.
   De link laat zich bij aanwijzen zien. */
.slot-kolom a:not(.knop) {
  color: var(--tekst);
  text-decoration: none;
  border-bottom: 0;
  transition: color 0.2s;
}
.slot-kolom a:not(.knop):hover { color: var(--bruin); }
/* Het telefoonnummer is de snelste weg naar ons, dus dat mag opvallen. */
/* Iets groter, maar met dezelfde regelhoogte als de rest, anders schuift de
   kolom eronder uit de pas. */
.slot-telefoon { font-size: 18px; line-height: 1.58; }
.slot-kolom .slot-telefoon a { color: var(--bruin); font-weight: 700; letter-spacing: 0.01em; }
.slot .knop {
  margin-top: 24px;
  padding: 11px 28px;
  font-size: 13px;
}
.slot-onder {
  grid-column: 1 / -1;
  margin: 0;
  padding-top: 24px;
  border-top: 1px solid var(--lijn);
  font-size: 14px;
  color: var(--olijf);
}

@media (max-width: 900px) {
  .menu { top: 26px; gap: 6px 20px; }
  .menu a { font-size: 12px; letter-spacing: 0.1em; }
  /* Met vijf menu-items valt de balk op smalle schermen op twee regels. Het logo
     staat daarom lager, anders raakt het de onderste regel. */
  .logo { top: 100px; right: 24px; width: 240px; }
  main { padding-top: 260px; }
  .pagina-hero { padding: 260px 24px 60px; }
  .vlak-linksboven { width: 70vw; height: 300px; min-height: 0; }
  .vlak-rechtsonder { width: 60vw; height: 240px; min-height: 0; }
  .merk { height: 36px; margin-bottom: 16px; }
  h1 { font-size: 24px; }
  h2 { font-size: 24px; }
  p { font-size: 16px; }
  .lead { font-size: 18px; }
  .sectie { padding: 70px 0 14px; }
  .band { margin-top: 56px; padding: 60px 0 76px; }
  .band-rand { top: -56px; height: 56px; }
  .punten li { font-size: 16px; }
  .vraag { font-size: 17px; }
  .kaarten-twee { grid-template-columns: 1fr; }
  .slot { margin-top: 60px; padding: 44px 0 52px; }
  .slot-inhoud { grid-template-columns: 1fr; gap: 30px; }
  .slot-onder { margin-top: 4px; }
}