/* =====================================================================
   Relining Advies – opmaak (stylesheet)
   ---------------------------------------------------------------------
   Dit ene bestand bepaalt hoe ALLE pagina's eruitzien.

   Inhoud:
     0. Instellingen (kleuren, lettertypes)
     1. Basis (pagina, tekst, koppen, links)
     2. Bouwstenen voor de indeling (section, container, columns)
     3. Kleine onderdelen die overal terugkomen
        (kopjes, scheidingslijn, knoppen, lijst met pictogrammen, foto's)
     4. Kop van de website (logo + menu)
     5. Voettekst
     6. Paginabanner (grote foto bovenaan elke pagina)
     7. Fotocarrousel (home)
     8. Fotogalerij + vergrote foto (lightbox)
     9. Pagina: Home
    10. Pagina's: Onze dienstverlening / Wat is relining? / Over ons
    11. Pagina: Kwaliteitscontrole
    12. Pagina: Referenties
    13. Pagina: Downloads
    14. Pagina: Contact
    15. Pagina: Privacybeleid

   Schermbreedtes waarop de opmaak verandert:
     - 1024px en smaller : tablet
     -  921px en smaller : menu wordt een "hamburger"-knop
     -  767px en smaller : telefoon (kolommen onder elkaar)
     -  544px en smaller : kleine telefoon
   ===================================================================== */


/* =====================================================================
   0. INSTELLINGEN
   Pas hier een kleur aan en hij verandert op de hele website.
   ===================================================================== */
:root {
  --color-blue:        #0137d2;   /* hoofdkleur: links, knoppen          */
  --color-pink:        #ff0095;   /* accentkleur: aanhalingstekens       */
  --color-heading:     #0a0a0a;   /* kopjes                              */
  --color-text:        #777777;   /* gewone tekst                        */
  --color-background:  #f2f6ff;   /* lichtblauwe achtergrond             */
  --color-white:       #ffffff;
  --color-off-white:   #fbfcff;   /* tekst in de voettekst               */
  --color-line:        rgba(0, 0, 0, 0.2);   /* dunne scheidingslijntjes */

  /* Verloop (blauw naar roze) over de grote foto's bovenaan */
  --gradient-hero: linear-gradient(45deg, var(--color-blue) 50%, var(--color-pink) 100%);
  /* Verloop (blauw naar wit) achter de kleinere foto's */
  --gradient-photo: linear-gradient(45deg, var(--color-blue) 50%, var(--color-white) 100%);

  --font-body:    "Josefin Sans", sans-serif;   /* menu, voettekst        */
  --font-content: Roboto, sans-serif;           /* kopjes en lopende tekst */
}

/* Lettertype Josefin Sans (staat in de map fonts/, dus geen Google) */
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("../fonts/josefin-sans-vietnamese.woff2") format("woff2");
  unicode-range: U+102-103, U+110-111, U+128-129, U+168-169, U+1A0-1A1, U+1AF-1B0, U+300-301, U+303-304, U+308-309, U+323, U+329, U+1EA0-1EF9, U+20AB;
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("../fonts/josefin-sans-latin-ext.woff2") format("woff2");
  unicode-range: U+100-2AF, U+304, U+308, U+329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Josefin Sans";
  font-style: normal;
  font-weight: 400;
  font-display: fallback;
  src: url("../fonts/josefin-sans-latin.woff2") format("woff2");
  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+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


/* =====================================================================
   1. BASIS
   ===================================================================== */
*, *::before, *::after {
  box-sizing: border-box;
}

/* De basisgrootte van alle tekst (1rem) = 17px op de computer */
html {
  font-size: 106.25%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  position: relative;
  overflow-x: hidden;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.85714;
  color: var(--color-text);
  background-color: var(--color-background);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, ul, ol, li, figure, blockquote {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font-weight: inherit;
}

p {
  margin-bottom: 0.5em;
}

/* Koppen: grootte en regelafstand per niveau */
h1, h2, h3, h4, h5, h6 {
  clear: both;
  color: var(--color-heading);
  font-family: var(--font-content);
  font-weight: 600;
}
h1 { font-size: 4.70588rem; line-height: 1.4em; }   /* 80px */
h2 { font-size: 40px;       line-height: 1.3em; }
h3 { font-size: 1.76471rem; line-height: 1.3em; }   /* 30px */
h4 { font-size: 1.47059rem; line-height: 1.2em; }   /* 25px */
h5 { font-size: 1.17647rem; line-height: 1.2em; }   /* 20px */
h6 { font-size: 0.941176rem; line-height: 1.25em; } /* 16px */

a {
  color: var(--color-blue);
  text-decoration: none;
  transition: 0.2s linear;
}
a:hover,
a:focus {
  color: var(--color-pink);
}

img {
  max-width: 100%;
  height: auto;
  border: 0;
  vertical-align: middle;
}

/* Lange woorden mogen afbreken als ze niet op de regel passen */
main {
  overflow-wrap: break-word;
}

strong, b {
  font-weight: 700;
}

::selection {
  color: var(--color-white);
  background-color: var(--color-blue);
}

/* Link "Naar de inhoud" – alleen zichtbaar voor toetsenbordgebruikers */
.skip-link {
  position: absolute;
  top: -10000em;
  left: 5px;
  z-index: 100000;
  padding: 15px 23px 14px;
  font-size: 0.875rem;
  line-height: normal;
  color: #21759b;
  background-color: #f1f1f1;
  border-radius: 2px;
}
.skip-link:focus {
  top: 5px;
}

/* Tekst die alleen voor schermlezers bedoeld is */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  border: 0;
  white-space: nowrap;
}

/* Tablet en telefoon: alle tekst iets kleiner (1rem = 15.5px) */
@media (max-width: 921px) {
  html { font-size: 96.9%; }
  h1 { font-size: 70px; }
  h3 { font-size: 30px; }
  h5 { font-size: 1.05882rem; }
  h6 { font-size: 0.705882rem; }
}
@media (max-width: 544px) {
  h1 { font-size: 56px; }
  h2 { font-size: 35px; }
}


/* =====================================================================
   2. BOUWSTENEN VOOR DE INDELING
   ---------------------------------------------------------------------
   Elke pagina is opgebouwd uit:
     <section class="section">            een horizontale strook
       <div class="container">            centreert de inhoud
         <div class="column">             een kolom met onderdelen

   - "row" is een rij kolommen binnen een kolom.
   - Kolombreedtes: column--half (50%), column--third (33%),
     column--quarter (25%), column--sixth (16%), column--two-thirds (66%)
   - Op een telefoon komen alle kolommen onder elkaar te staan.
   ===================================================================== */
.section {
  position: relative;
}

.container,
.row {
  position: relative;
  display: flex;
  margin-inline: auto;
}
.container {
  max-width: 1140px;
}
.container--narrow { max-width: 700px; }   /* smalle tekstkolom */
.container--medium { max-width: 800px; }
.container--wide   { max-width: 1100px; }
.container--full   { max-width: none; }    /* volle schermbreedte  */

/* Een "subsection" is een blok binnen een kolom met een eigen rij
   kolommen. Het krijgt geen automatische ruimte eronder. */
.subsection {
  position: relative;
}

.column {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  min-height: 1px;
}

/* Alle onderdelen in een kolom zijn even breed als de kolom ... */
.column > *,
.card > *,
.service > * {
  width: 100%;
}
/* ... en hebben 20px ruimte eronder (behalve het laatste, en
   behalve rijen met kolommen) */
.column > :not(:last-child):not(.subsection),
.card > :not(:last-child):not(.subsection),
.service > :not(:last-child) {
  margin-bottom: 20px;
}

.column--sixth      { width: 16.666%; }
.column--quarter    { width: 25%; }
.column--third      { width: 33.333%; }
.column--half       { width: 50%; }
.column--two-thirds { width: 66.666%; }

@media (max-width: 1024px) {
  .container,
  .row {
    flex-wrap: wrap;
  }
  .container       { max-width: 1024px; }
  .container--full { max-width: none; }
  .container--wide { max-width: 1100px; }
  .container--narrow { max-width: 700px; }
  .container--medium { max-width: 800px; }
  .container--wide   { max-width: 1100px; }
}

@media (max-width: 767px) {
  .container         { max-width: 767px; }
  .container--full   { max-width: none; }
  .container--narrow { max-width: 700px; }
  .container--medium { max-width: 800px; }
  .container--wide   { max-width: 1100px; }
  .column,
  .column--sixth,
  .column--quarter,
  .column--third,
  .column--half,
  .column--two-thirds {
    width: 100%;
  }
  /* Onderdelen die op een telefoon verborgen worden */
  .hide-on-phone {
    display: none !important;
  }
}

/* Onderdelen die op een tablet verborgen worden */
@media (min-width: 768px) and (max-width: 1024px) {
  .hide-on-tablet {
    display: none !important;
  }
}

.text-center { text-align: center; }
.text-justify { text-align: justify; }


/* =====================================================================
   3. KLEINE ONDERDELEN DIE OVERAL TERUGKOMEN
   ===================================================================== */

/* --- 3a. Kopjes ---------------------------------------------------- */
/* Klein kopje boven een grote titel, bv. "Relining Advies" */
.eyebrow {
  text-align: center;
}

/* --- 3b. Gewone tekstblokken --------------------------------------- */
.text {
  font-family: var(--font-content);
}

/* --- 3c. Scheidingslijntje (kort streepje in het midden) ------------ */
.divider {
  display: flex;
  justify-content: center;
  padding-block: 5px;
}
.divider::before {
  content: "";
  width: 50px;
  border-top: 1px solid var(--color-line);
}
.divider--white::before {
  border-top-color: var(--color-white);
}

/* --- 3d. Knoppen ---------------------------------------------------- */
.button-row {
  margin: 0;
  text-align: center;
}

.button {
  display: inline-block;
  padding: 16px 30px;
  font-family: var(--font-content);
  font-size: 0.882353rem;        /* 15px */
  font-weight: 500;
  line-height: 1em;
  text-align: center;
  color: var(--color-blue);
  background-color: transparent;
  border: 1px solid var(--color-blue);
  border-radius: 100px;
  transition: 0.3s;
}
.button:hover,
.button:focus {
  color: var(--color-background);
  background-color: var(--color-blue);
  border-color: var(--color-blue);
}

/* Lichte knop zonder rand (op de grote foto van de homepage) */
.button--light {
  color: var(--color-blue);
  background-color: var(--color-background);
  border-width: 0;
}

@media (max-width: 921px) {
  .button {
    padding-right: 18px;
    padding-left: 18px;
  }
}

/* --- 3e. Lijst met een pictogram voor elke regel -------------------- */
.icon-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-family: var(--font-content);
  text-align: center;
}
.icon-list__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon-list__item:not(:last-child) {
  padding-bottom: 2px;
}
.icon-list__item:not(:first-child) {
  margin-top: 2px;
}
.icon-list__icon {
  position: relative;
  display: flex;
  padding-right: 8px;
}
.icon-list__icon svg {
  width: 13px;
  height: 13px;
  margin-right: 3.25px;
  fill: var(--color-text);
}
.icon-list__text {
  align-self: center;
  padding-left: 5px;
  font-size: 15px;
}

/* --- 3f. Telefoonnummer (groot, wit, op de grote foto's) ------------ */
.phone-line {
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-content);
  text-align: center;
}
.phone-line__icon {
  display: flex;
  padding-right: 7px;
}
.phone-line__icon svg {
  width: 18px;
  height: 18px;
  margin-right: 4.5px;
  fill: var(--color-white);
}
.phone-line__number {
  align-self: center;
  padding-left: 5px;
  font-size: 23px;
  color: var(--color-white);
}
a.phone-line__number:hover,
a.phone-line__number:focus {
  color: var(--color-white);
}

/* --- 3g. Foto met blauw verloop erachter ---------------------------- */
.tinted-photo {
  text-align: center;
  background-image: var(--gradient-photo);
}
.tinted-photo img {
  display: inline-block;
  vertical-align: middle;
  opacity: 0.75;
}

/* --- 3h. Groot aanhalingsteken-pictogram ---------------------------- */
.quote-icon {
  text-align: center;
}
.quote-icon__inner {
  display: inline-block;
  font-size: 30px;
  line-height: 1;
  color: var(--color-pink);
}
.quote-icon svg {
  display: block;
  position: relative;
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.quote-icon--white .quote-icon__inner {
  color: var(--color-white);
}

/* --- 3i. Drie foto's naast elkaar --------------------------------- */
.photo-row__item {
  padding: 10px;
}

/* --- 3j. Twee tekstkolommen naast elkaar -------------------------- */
.split__left {
  padding-right: 50px;
}
.split__right {
  padding-left: 50px;
}

/* --- 3k. Kerncijfers ("De cijfers spreken voor zich") -------------- */
.stats__heading {
  align-content: center;
  align-items: center;
}
.stats__box {
  align-items: flex-start;
  padding: 35px 0 25px;
  background-color: var(--color-white);
}
.counter {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.counter__number {
  display: flex;
  font-family: var(--font-content);
  font-size: 69px;
  font-weight: 600;
  line-height: 1;
  text-align: center;
}
.counter__prefix {
  flex-grow: 1;
  text-align: end;
  white-space: pre-wrap;
}
.counter__suffix {
  flex-grow: 1;
  text-align: start;
  white-space: pre-wrap;
}
.counter__label {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Roboto Slab", sans-serif;
  font-size: 19px;
  line-height: 2.5;
}

@media (max-width: 1024px) {
  .stats__heading h2 {
    padding-bottom: 25px;
  }
}
@media (max-width: 767px) {
  .stats__heading {
    padding-bottom: 25px;
    text-align: center;
  }
  .stats__box--first {
    padding: 50px 0 20px;
  }
  .stats__box--second {
    padding: 20px 0;
  }
}

/* --- 3m. Lege ruimte en scheidingslijn links ------------------------ */
.spacer {
  height: 50px;
}
.divider--left {
  justify-content: flex-start;
}

/* --- 3l. Citaat (grote blauwe tekst) -------------------------------- */
.testimonial {
  overflow: hidden;
  text-align: center;
}
.testimonial__text {
  margin-bottom: 20px;
  font-family: var(--font-content);
  font-size: 1.3em;
  color: var(--color-blue);
}
.testimonial--end {
  text-align: end;
}


/* =====================================================================
   4. KOP VAN DE WEBSITE (logo + menu)
   ---------------------------------------------------------------------
   De kop ligt bovenop de grote foto van elke pagina (doorzichtig).
   Computer: logo met daaronder het menu.
   Tablet/telefoon (921px en smaller): logo met daaronder een
   ronde menuknop; het menu klapt uit als je erop tikt.
   ===================================================================== */
.site-header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99;
}

/* Logo */
.site-header__brand {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1180px;
  min-height: 70px;
  margin: 0 auto;
  padding: 0 20px;
}
.site-header__logo {
  display: block;
  padding: 17px 0;
  line-height: 17px;
}
.site-header__logo img {
  display: block;
  width: 400px;
  max-width: 100%;
  height: auto;
}

/* Balk met het menu */
.site-header__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1180px;
  min-height: 60px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Ronde menuknop (alleen op tablet/telefoon) */
.menu-toggle {
  display: none;
}

/* Het menu zelf */
.main-menu {
  padding-right: 20px;
}
.main-menu__list {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
}
.main-menu__item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  line-height: 60px;
}
.main-menu__link {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 17px;
  color: rgba(255, 255, 255, 0.8);
}
.main-menu__item:hover > .main-menu__link,
.main-menu__item.is-current > .main-menu__link,
.main-menu__link:focus {
  color: var(--color-background);
}

/* Pijltje achter "Onze dienstverlening" */
.main-menu__arrow {
  display: block;
  margin-right: -10px;
  padding-right: 10px;
}
.main-menu__arrow svg {
  position: relative;
  width: 10px;
  height: 10px;
  margin-left: 10px;
  fill: currentColor;
}

/* Knop om het submenu te openen (alleen op tablet/telefoon) */
.main-menu__submenu-toggle {
  display: none;
}

/* Submenu (verschijnt als je met de muis over het menu-item gaat) */
.submenu {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 99999;
  width: 240px;
  margin: 0;
  padding: 0;
  list-style: none;
  line-height: 1.45em;
  background-color: rgba(0, 0, 0, 0.09);
  border-top: 2px solid #000;
  box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.1);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease-in-out;
}
/* Onzichtbare strook zodat het submenu open blijft als de muis
   van het menu-item naar het submenu beweegt */
.submenu::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 7px;
}
.main-menu__item:hover > .submenu,
.main-menu__item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
}
.submenu__link {
  display: block;
  padding: 0.9em 1em;
  color: var(--color-off-white);
  overflow-wrap: break-word;
}
.submenu__link:hover,
.submenu__link:focus,
.submenu__item.is-current > .submenu__link {
  color: var(--color-background);
}
.submenu__arrow {
  display: none;
}

/* Variant met een witte balk (pagina's zonder grote foto, zoals het
   privacybeleid): de kop staat dan gewoon bovenaan de pagina */
.site-header--solid {
  position: relative;
}
.site-header--solid .site-header__brand {
  max-width: none;
  background-color: var(--color-white);
}
.site-header--solid .site-header__brand > a {
  max-width: 1140px;
}
.site-header--solid .main-menu__link,
.site-header--solid .submenu__link {
  color: var(--color-heading);
}
.site-header--solid .main-menu__item:hover > .main-menu__link,
.site-header--solid .main-menu__item.is-current > .main-menu__link,
.site-header--solid .main-menu__link:focus,
.site-header--solid .submenu__link:hover,
.site-header--solid .submenu__link:focus {
  color: var(--color-blue);
}
.site-header--solid .submenu {
  background-color: var(--color-background);
}

/* ---- Tablet en telefoon ------------------------------------------- */
@media (max-width: 921px) {
  .site-header__brand {
    max-width: none;
    line-height: 3em;
  }
  .site-header__logo {
    padding: 1em 0;
    line-height: 1em;
  }

  .site-header__bar {
    max-width: none;
    align-content: flex-start;
  }

  .menu-toggle {
    display: flex;
    align-items: center;
    /* verticaal gecentreerd in de 60px hoge balk */
    margin: calc((60px - 1.5rem - 22px) / 2) 0;
    padding: 0.5em;
    font-family: inherit;
    font-size: 1.5rem;
    line-height: 1.85714;
    color: var(--color-background);
    background: transparent;
    border: 1px solid var(--color-background);
    border-radius: 100px;
    cursor: pointer;
  }
  .menu-toggle svg {
    display: block;
    width: 20px;
    height: 20px;
    fill: var(--color-background);
  }
  .menu-toggle .menu-toggle__close,
  .menu-toggle[aria-expanded="true"] .menu-toggle__open {
    display: none;
  }
  .menu-toggle[aria-expanded="true"] .menu-toggle__close {
    display: block;
  }

  /* Uitgeklapt menu: volle breedte onder de knop */
  .main-menu {
    display: none;
    width: calc(100% + 40px);
    margin: 0 -20px;
    padding: 0;
    line-height: 3em;
    text-align: left;
    background-color: var(--color-white);
  }
  .main-menu.is-open {
    display: block;
  }
  .main-menu__list {
    display: block;
    background-color: var(--color-background);
  }
  .main-menu__item {
    display: block;
    line-height: inherit;
  }
  .main-menu__link {
    display: block;
    width: 100%;
    padding: 0 20px;
    color: var(--color-text);
    border-bottom: 1px solid #dddddd;
  }
  .main-menu__item:hover > .main-menu__link,
  .main-menu__item.is-current > .main-menu__link,
  .main-menu__link:focus {
    color: var(--color-blue);
  }
  .main-menu__arrow {
    display: none;
  }

  .main-menu__submenu-toggle {
    position: absolute;
    top: 0;
    right: 20px;
    display: inline-block;
    padding: 0 0.907em;
    font-family: inherit;
    font-size: inherit;
    font-weight: 400;
    line-height: inherit;
    color: var(--color-heading);
    background: none;
    border: 1px dotted transparent;
    cursor: pointer;
  }
  .main-menu__item.is-current > .main-menu__submenu-toggle,
  .main-menu__submenu-toggle:hover {
    color: var(--color-blue);
  }
  .main-menu__submenu-toggle svg {
    position: relative;
    width: 15px;
    height: 13px;
    margin-left: 10px;
    fill: currentColor;
    pointer-events: none;
  }

  .submenu {
    position: static;
    display: none;
    width: auto;
    line-height: 3;
    border: 0;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
  }
  .submenu::before {
    content: none;
  }
  .main-menu__item.is-submenu-open > .submenu {
    display: block;
  }
  .submenu__link {
    padding: 0 20px 0 30px;
    border-bottom: 1px solid #dddddd;
  }
  .submenu__arrow {
    display: inline;
    margin-right: 5px;
  }
  /* Op de witte kop is de menuknop donker, zodat hij zichtbaar is */
  .site-header--solid .menu-toggle {
    color: var(--color-heading);
    border-color: var(--color-heading);
  }
  .site-header--solid .menu-toggle svg {
    fill: var(--color-heading);
  }
  .submenu__arrow svg {
    position: relative;
    top: 0.2em;
    width: 0.65em;
    height: 10px;
    fill: currentColor;
    transform: translate(0, -2px) rotate(270deg);
  }
}


/* =====================================================================
   5. VOETTEKST
   ===================================================================== */
.site-footer {
  background-image: url("../img/footer-achtergrond.jpg");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
}

.site-footer__main {
  padding: 150px 0;
}
.site-footer__inner {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  column-gap: 50px;
  align-items: flex-start;
  max-width: 1140px;
  margin: 0 auto;
}
/* Alles staat in de middelste van de drie kolommen */
.site-footer__content {
  grid-column: 2;
  text-align: center;
  color: var(--color-off-white);
}
.site-footer__logo {
  margin-bottom: 10px;
}
.site-footer__logo img {
  display: inline-block;
}
.site-footer__address {
  margin: 2.8em 0;
}
.site-footer__phone {
  margin: 0 0 2.8em;
}
.site-footer__email {
  margin: 0;
}
.site-footer__phone a,
.site-footer__phone a:hover {
  color: inherit;
}
.site-footer .button {
  font-family: var(--font-body);
  font-weight: 400;
  color: var(--color-background);
}
.site-footer .button:hover,
.site-footer .button:focus {
  color: rgb(161, 186, 243);
  background-color: var(--color-blue);
}

/* Onderste balk met copyright */
.site-footer__bottom {
  display: grid;
  align-content: center;
  min-height: 105px;
  padding: 20px 0;
  background-color: var(--color-background);
}
.site-footer__copyright {
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 1140px;
  min-height: 105px;
  margin: 0 auto;
  text-align: center;
}
.site-footer__copyright p {
  margin: 0;
}

@media (max-width: 921px) {
  .site-footer__main {
    padding: 50px;
  }
  .site-footer__inner {
    grid-template-columns: 1fr;
  }
  .site-footer__content {
    grid-column: 1;
    margin: 10px 0 20px;
  }
  .site-footer__copyright p {
    margin-bottom: 10px;
  }
}


/* =====================================================================
   6. PAGINABANNER
   Grote foto met blauw/roze verloop, titel en telefoonnummer.
   ===================================================================== */
.page-banner {
  background-position: center bottom;
  background-repeat: no-repeat;
  background-size: cover;
}
/* Het gekleurde verloop over de foto heen */
.page-banner__overlay {
  position: absolute;
  inset: 0;
  background-image: var(--gradient-hero);
  opacity: 0.53;
}
.page-banner__title {
  color: var(--color-white);
  text-align: center;
}
.page-banner__divider {
  padding-block: 25px;
}
.page-banner__eyebrow {
  padding-bottom: 20px;
  text-align: center;
  color: var(--color-white);
}
/* Achtergrondfoto's van de banners */
.page-banner--street {
  background-image: url("../img/banner-straat.jpg");
}
.page-banner--office {
  background-image: url("../img/banner-kantoor.jpg");
  background-position: center top;
}
.page-banner--quality {
  background-image: url("../img/banner-kwaliteitscontrole.jpg");
  background-position: center top;
}
.page-banner--quality .page-banner__overlay {
  opacity: 0.5;
}
.page-banner--downloads {
  background-image: url("../img/banner-downloads.jpg");
  background-position: center top;
}
.page-banner--contact {
  background-image: url("../img/banner-contact.jpg");
  background-position: center center;
}
.page-banner--workshop {
  background-image: url("../img/banner-werkplaats.jpg");
  background-position: center top;
}
.page-banner--workshop .page-banner__overlay {
  opacity: 0.5;
}
.page-banner--pipes {
  background-image: url("../img/banner-leidingen.jpg");
  background-position: center top;
}

@media (max-width: 767px) {
  .page-banner__divider {
    padding-block: 10px;
  }
}

@media (min-width: 1025px) {
  /* Foto blijft staan terwijl de pagina eroverheen schuift */
  .page-banner {
    background-attachment: fixed;
  }
}


/* =====================================================================
   7. FOTOCARROUSEL (home)
   ===================================================================== */
.carousel {
  position: relative;
}
.carousel__frame {
  margin-top: -29px;
  box-shadow: 0 18px 10px 0 rgba(0, 0, 0, 0.5);
}
.carousel__viewport {
  position: static;
  z-index: 1;
  width: calc(100% - 60px);
  margin: 0 auto;
  padding-bottom: 30px;
  overflow: hidden;
}
.carousel__track {
  position: relative;
  z-index: 1;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
  transition: transform 0.506s ease;
}
.carousel__slide {
  flex-shrink: 0;
  width: 100%;
  text-align: center;
}
.carousel__arrow {
  position: absolute;
  top: calc(50% - 15px);
  z-index: 1;
  display: inline-flex;
  padding: 0;
  font-size: 11px;
  color: rgba(237, 237, 237, 0.9);
  background: none;
  border: 0;
  cursor: pointer;
  transform: translateY(-50%);
}
.carousel__arrow svg {
  width: 1em;
  height: 1em;
  fill: currentColor;
}
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.carousel__dots {
  position: absolute;
  bottom: 5px;
  left: 0;
  z-index: 10;
  width: 100%;
  text-align: center;
}
.carousel__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  margin: 0 6px;
  padding: 0;
  vertical-align: baseline;
  background: #0f203b;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.carousel__dot.is-active {
  background: #1074ae;
}


/* =====================================================================
   8. FOTOGALERIJ + VERGROTE FOTO (lightbox)
   ===================================================================== */
.gallery {
  display: flex;
  flex-wrap: wrap;
  margin: 0 -10px -10px 0;
}
.gallery__item {
  width: 100%;
  max-width: 33.33%;
  padding: 0 10px 10px 0;
  text-align: center;
  border-radius: 2px;
}
.gallery__item a {
  display: block;
  overflow: hidden;
  border-radius: 2px 2px 0 0;
}
.gallery__item img {
  display: block;
  margin: 0 auto;
}

@media (min-width: 480px) and (max-width: 767px) {
  .gallery__item { max-width: 50%; }
}
@media (max-width: 479px) {
  .gallery__item { max-width: 100%; }
}

/* Vergrote foto over het hele scherm */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 100000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.9);
}
.lightbox.is-open {
  display: flex;
}
.lightbox__image {
  max-width: 90vw;
  max-height: 85vh;
  box-shadow: 0 0 30px rgba(0, 0, 0, 0.3);
}
.lightbox__button {
  position: absolute;
  padding: 10px 15px;
  font-family: var(--font-body);
  font-size: 40px;
  line-height: 1;
  color: rgba(255, 255, 255, 0.8);
  background: none;
  border: 0;
  cursor: pointer;
}
.lightbox__button:hover,
.lightbox__button:focus {
  color: #fff;
}
.lightbox__button--close { top: 10px; right: 10px; }
.lightbox__button--prev  { left: 10px; top: 50%; transform: translateY(-50%); }
.lightbox__button--next  { right: 10px; top: 50%; transform: translateY(-50%); }


/* =====================================================================
   9. PAGINA: HOME
   ===================================================================== */

/* --- 9a. Grote foto bovenaan -------------------------------------- */
.home-hero {
  padding: 400px 30px 300px;
  background-image: url("../img/banner-home.jpg");
  background-position: center top;
  background-repeat: no-repeat;
  background-size: cover;
}
.home-hero__overlay {
  position: absolute;
  inset: 0;
  background-image: var(--gradient-hero);
  opacity: 0.55;
}
.home-hero__eyebrow {
  padding-bottom: 15px;
  text-align: center;
  color: var(--color-white);
}
.home-hero__title {
  text-align: center;
  color: var(--color-white);
}
.home-hero__lead {
  padding: 0 100px;
  text-align: center;
  color: var(--color-white);
}
.home-hero__lead p {
  margin: 0;
}

/* --- 9b. Rioolbeheer, een uitdaging ------------------------------- */
.intro {
  padding: 150px 30px 100px;
}
.intro__text {
  padding-bottom: 15px;
}
.intro__photo {
  padding: 10px;
}
.intro__more {
  padding-top: 30px;
}
.intro__photos-title {
  padding-top: 72px;
}

/* --- 9c. Strook met fotocarrousel ---------------------------------- */
.photo-strip {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 42px 0 72px;
  background-image: url("../img/carrousel-3.jpg");
  background-position: -218px -33px;
  background-size: cover;
}
/* Heel lichte blauwe waas over de achtergrondfoto */
.photo-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: #1074ae;
  opacity: 0.07;
}

/* --- 9d. Onze expertise (drie kaarten) ----------------------------- */
.expertise-heading {
  padding: 100px 30px 0;
}
.expertise {
  padding: 0 30px 150px;
}
/* De kaart vult de hele hoogte van de kolom */
.expertise__column {
  flex-wrap: nowrap;
}
.card {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  margin: 40px 15px;
  padding: 40px 50px;
  background-image: url("../img/kaart-achtergrond.png");
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 6px;
}
/* Middelste kaart: even hoog als de kolom, inhoud verticaal gecentreerd */
.card--centered {
  margin: 0 15px;
  align-content: center;
  align-items: center;
}
.card__list {
  padding-bottom: 15px;
}
.card__button {
  padding-top: 20px;
}

/* --- 9e. Wit aanhalingsteken ------------------------------------- */
.home-quote {
  padding: 0 30px 150px;
}

/* --- 9f. Fotogalerij en negen diensten --------------------------- */
.services {
  padding: 0 10px 10px;
}
.services__title {
  padding-top: 72px;
}
.services__row--1 {
  margin-top: 50px;
  padding-bottom: 26px;
}
.services__row--2 {
  padding-bottom: 25px;
}
.services__row--3 {
  padding-bottom: 94px;
}
.service {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  width: 100%;
  margin: 0 25px;
}
.service__icon {
  text-align: center;
}
.service__icon img {
  display: inline-block;
  width: 60px;
}

/* --- Home op een tablet ------------------------------------------- */
@media (max-width: 1024px) {
  .home-hero {
    padding: 350px 25px 100px;
  }
  .intro {
    padding: 100px 25px 25px;
  }
  .intro__photo--left {
    padding: 0 10px 0 0;
  }
  .intro__photo--right {
    padding: 4px 0 0;
  }
  .photo-strip {
    background-position: 0 0;
  }
  .expertise-heading {
    padding: 70px 25px 0;
  }
  .expertise {
    padding: 0 25px;
  }
  .card,
  .card--centered {
    margin: 0 0 5px 5px;
  }
  .home-quote {
    padding: 70px 25px;
  }
  .services {
    padding: 25px;
  }
  .service {
    padding-bottom: 25px;
  }
  .service > :not(:last-child) {
    margin-bottom: 5px;
  }
  .service__icon {
    padding-bottom: 10px;
    text-align: start;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .expertise__column,
  .services .column--quarter {
    width: 50%;
  }
}

@media (min-width: 1025px) {
  .home-hero {
    background-attachment: fixed;
  }
}

/* --- Home op een telefoon ----------------------------------------- */
@media (max-width: 767px) {
  .home-hero {
    padding: 250px 20px 80px;
  }
  .home-hero__eyebrow {
    padding-bottom: 0;
  }
  .home-hero__lead {
    padding: 0;
  }
  .intro {
    padding: 65px 0 0;
  }
  .intro__text {
    padding: 0 40px;
  }
  .intro__text .column {
    padding-bottom: 15px;
  }
  .intro__photo--left {
    padding: 0 0 10px;
  }
  .intro__photo--right {
    padding: 0;
  }
  .intro__more {
    padding: 25px 40px 0;
  }
  .expertise-heading {
    padding: 60px 20px 0;
  }
  .expertise {
    padding: 20px;
  }
  .card,
  .card--centered {
    margin: 0 0 20px;
    padding: 65px 35px;
  }
  .home-quote {
    padding: 40px 20px 60px;
  }
  .services {
    padding: 20px;
  }
  .service {
    margin: 0 20px;
    padding-bottom: 35px;
  }
  .service,
  .service__icon {
    text-align: center;
  }
  .service__icon {
    padding-bottom: 10px;
  }
  .service__icon img {
    width: 40px;
  }
}


/* =====================================================================
   10. PAGINA'S MET DEZELFDE OPBOUW
       Onze dienstverlening / Wat is relining? / Over ons
   ===================================================================== */
.page-banner {
  padding: 400px 30px 135px;
}
.page-content {
  padding: 150px 30px 100px;
}

/* --- 10a. Onze dienstverlening ----------------------------------- */
.page-onze-dienstverlening .page-content {
  padding-bottom: 101px;
}
.page-onze-dienstverlening .photo-row {
  padding-top: 26px;
}
.page-onze-dienstverlening .split {
  padding-top: 89px;
}
.page-onze-dienstverlening .split__quote-icon {
  margin-top: 25px;
  padding-top: 9px;
}
.page-onze-dienstverlening .split__slogan {
  padding-top: 10px;
}
.page-onze-dienstverlening .stats {
  margin: 21px 0;
  padding-top: 19px;
}

@media (max-width: 1024px) {
  .page-onze-dienstverlening .page-banner {
    padding: 350px 25px 70px;
  }
  .page-onze-dienstverlening .page-content {
    padding: 100px 25px 76px;
  }
  .page-onze-dienstverlening .photo-row__item {
    padding: 0 10px 0 0;
  }
  .page-onze-dienstverlening .photo-row__item .tinted-photo {
    margin-bottom: 10px;
  }
  .page-onze-dienstverlening .photo-row__item:last-child {
    padding: 0;
  }
  .page-onze-dienstverlening .photo-row__item:last-child .tinted-photo {
    margin: 0;
  }
  .page-onze-dienstverlening .split--first .split__left {
    padding: 0 15px 0 0;
  }
  .page-onze-dienstverlening .split--first .split__right {
    padding: 0 0 0 15px;
  }
  .page-onze-dienstverlening .split__right > :not(:last-child) {
    margin-bottom: 10px;
  }
  .page-onze-dienstverlening .stats {
    padding: 0;
  }
  .page-onze-dienstverlening .split--second {
    padding: 0;
  }
  .page-onze-dienstverlening .split--second .split__left,
  .page-onze-dienstverlening .split--second .split__right {
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page-onze-dienstverlening .split__left  { width: 60%; }
  .page-onze-dienstverlening .split__right { width: 40%; }
}

@media (max-width: 767px) {
  .page-onze-dienstverlening .page-banner {
    padding: 350px 20px 65px;
  }
  .page-onze-dienstverlening .page-content {
    padding: 70px 0 1px;
  }
  .page-onze-dienstverlening .photo-row {
    padding: 21px 20px 0;
  }
  .page-onze-dienstverlening .photo-row__item {
    padding: 0 0 10px;
  }
  .page-onze-dienstverlening .photo-row__item:nth-child(2) .tinted-photo {
    margin: 0;
  }
  .page-onze-dienstverlening .split {
    padding: 50px 20px 75px;
  }
  .page-onze-dienstverlening .split h3,
  .page-onze-dienstverlening .split .text,
  .page-onze-dienstverlening .split__slogan {
    text-align: center;
  }
  .page-onze-dienstverlening .split--first .split__right {
    padding: 20px 0 0;
  }
  .page-onze-dienstverlening .split__quote-icon {
    margin: 0;
    padding: 0;
  }
  .page-onze-dienstverlening .split--second .split__right {
    padding: 30px 0 0;
  }
}

/* --- 10b. Wat is relining? --------------------------------------- */
.page-wat-is-relining .lead-block {
  padding-bottom: 25px;
}
.page-wat-is-relining .lead-block__subtitle {
  padding-top: 43px;
}
.page-wat-is-relining .lead-block__last-text {
  padding-bottom: 34px;
}
.page-wat-is-relining .split {
  padding-top: 30px;
}
.page-wat-is-relining .split__left {
  padding: 90px 50px 0 0;
}
.page-wat-is-relining .split__text {
  margin-top: 3px;
  padding: 11px;
}
.page-wat-is-relining .split__text--right {
  margin-top: 0;
}
.page-wat-is-relining .split__slogan {
  padding-top: 10px;
}

/* Lichtblauwe strook met kerncijfers */
.stats-band {
  padding: 100px 0;
  background-color: var(--color-background);
}

/* Vier korte tekstblokken onderaan */
.topic {
  padding: 0 0 7px;
}
.topic--first {
  padding: 11px 0 7px;
}
.topic--last {
  padding: 0 0 61px;
}
.topic .column {
  padding: 10px;
}
.topic__text p {
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .page-wat-is-relining .page-banner {
    padding: 350px 25px 70px;
  }
  .page-wat-is-relining .page-content {
    padding: 100px 25px 75px;
  }
  .page-wat-is-relining .photo-row__item {
    padding: 0 10px 0 0;
  }
  .page-wat-is-relining .photo-row__item:last-child {
    padding: 0 0 0 10px;
  }
  .page-wat-is-relining .split__left {
    padding: 0 15px 0 0;
  }
  .page-wat-is-relining .split__right {
    padding: 0 0 0 15px;
  }
  .page-wat-is-relining .split__right > :not(:last-child) {
    margin-bottom: 10px;
  }
  .stats-band {
    padding: 0 80px;
  }
  .topic--first {
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page-wat-is-relining .split__left  { width: 60%; }
  .page-wat-is-relining .split__right { width: 40%; }
}

@media (max-width: 767px) {
  .page-wat-is-relining .page-banner {
    padding: 350px 20px 65px;
  }
  .page-wat-is-relining .page-content {
    padding: 70px 0 0;
  }
  .page-wat-is-relining .lead-block {
    padding: 0 20px 20px;
  }
  .page-wat-is-relining .lead-block__column {
    padding-bottom: 15px;
  }
  .page-wat-is-relining .photo-row {
    padding: 0 20px;
  }
  .page-wat-is-relining .photo-row__item {
    padding: 0 0 10px;
  }
  .page-wat-is-relining .photo-row__item:last-child {
    padding: 0;
  }
  .page-wat-is-relining .split {
    padding: 50px 20px 75px;
  }
  .page-wat-is-relining .split h4,
  .page-wat-is-relining .split .text {
    text-align: center;
  }
  .page-wat-is-relining .split__right {
    padding: 8px 0 0;
  }
  .page-wat-is-relining .split__divider {
    justify-content: center;
  }
  .stats-band {
    padding: 40px 30px 50px;
  }
  .topic,
  .topic--last {
    padding: 34px 0 60px;
  }
  .topic--first {
    padding: 60px 0;
  }
  .topic__text p {
    margin-bottom: 0.5em;
  }
}

/* --- 10c. Over ons ------------------------------------------------ */
.page-over-ons .page-content {
  padding-bottom: 31px;
}
.page-over-ons .lead-block {
  padding-bottom: 25px;
}

/* Kopje "Wie is wie?" met grote, lichtgrijze tekst op de achtergrond */
.team-heading {
  position: relative;
}
.team-heading::before {
  content: attr(data-bg-text);
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  font-family: var(--font-content);
  font-size: 60px;
  font-weight: 400;
  line-height: 1;
  color: rgba(2, 1, 1, 0.38);
  transform: translateY(-50%);
}
.team-heading__inner {
  margin: 97px 0 12px 69px;
  padding: 76px 0 17px 89px;
}
.team-heading__title {
  position: relative;
  margin-bottom: 15px;
  text-align: left;
}

.team-member--rudi {
  padding: 27px 30px 0;
}
.team-member--wim {
  padding: 0 30px 42px;
}
.team-member__name {
  padding-top: 21px;
}
.page-over-ons .split--wim {
  padding-top: 27px;
}
.page-over-ons .split--rudi .split__right {
  padding-left: 91px;
}
.page-over-ons .split__quote-icon {
  margin-top: 25px;
  padding-top: 9px;
}

@media (max-width: 1024px) {
  .page-over-ons .page-banner {
    padding: 350px 25px 70px;
  }
  .page-over-ons .page-content {
    padding: 100px 25px 75px;
  }
  .page-over-ons .photo-row__item {
    padding: 0 10px 0 0;
  }
  .page-over-ons .photo-row__item:last-child {
    padding: 0 0 0 10px;
  }
  .page-over-ons .split__left {
    padding: 0 15px 0 0;
  }
  .page-over-ons .split__right {
    padding: 0 0 0 15px;
  }
  .page-over-ons .split--rudi .split__right {
    padding: 0 0 0 24px;
  }
  .page-over-ons .split--rudi .split__right > :not(:last-child) {
    margin-bottom: 10px;
  }
  .team-member--rudi,
  .team-member--wim {
    padding: 57px 25px 75px;
  }
  .page-over-ons .stats-band {
    padding: 50px 80px 80px;
  }
  .page-over-ons .stats .row {
    max-width: 592px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .page-over-ons .split__left  { width: 60%; }
  .page-over-ons .split__right { width: 40%; }
}

@media (max-width: 767px) {
  .page-over-ons .page-banner {
    padding: 350px 20px 65px;
  }
  .page-over-ons .page-content {
    padding: 70px 0 0;
  }
  .page-over-ons .lead-block {
    padding: 0 20px 20px;
  }
  .page-over-ons .lead-block__column {
    padding-bottom: 15px;
  }
  .page-over-ons .photo-row {
    padding: 0 20px;
  }
  .page-over-ons .photo-row__item {
    padding: 0 0 10px;
  }
  .page-over-ons .photo-row__item:last-child {
    padding: 0;
  }
  .page-over-ons .split {
    padding: 50px 20px 75px;
  }
  .page-over-ons .split h3,
  .page-over-ons .split .text {
    text-align: center;
  }
  .page-over-ons .split__right {
    padding: 50px 0 0;
  }
  .page-over-ons .split--rudi .split__right {
    padding: 9px 0 0 9px;
  }
  .page-over-ons .split__divider {
    justify-content: center;
  }
  .team-member--rudi,
  .team-member--wim {
    padding: 47px 0 0;
  }
  .page-over-ons .stats-band {
    padding: 40px 30px 50px;
  }
}


/* =====================================================================
   11. PAGINA: KWALITEITSCONTROLE
   ===================================================================== */
.quality {
  padding: 125px 30px 100px;
}
/* Beide kolommen verticaal gecentreerd */
.quality > .container > .column {
  align-content: center;
  align-items: center;
}
.quality__text {
  width: 65%;
  padding-right: 50px;
}
.quality__aside {
  width: 35%;
}
/* In de linkerkolom staan de onderdelen dichter op elkaar */
.quality__text > :not(:last-child):not(.subsection) {
  margin-bottom: 5px;
}
.quality__title {
  padding-bottom: 5px;
  text-align: start;
}
.quality__title--second {
  margin-top: 64px;
  padding-top: 45px;
}
.quality__steps {
  margin: 20px 0;
}
.quality__step--left {
  padding-right: 20px;
}
.quality__step--right {
  padding-left: 20px;
}
.quality__photo {
  text-align: center;
}
.quality__photo img {
  display: inline-block;
  width: 79%;
  border-radius: 4px;
  box-shadow: 0 0 10px 0 rgba(1, 55, 210, 0.14);
}
.quality__quote-icon {
  margin-top: 25px;
  padding-top: 9px;
}

.photo-album {
  padding: 61px 30px 100px;
}
.photo-album__gallery {
  padding-bottom: 25px;
}

@media (max-width: 1024px) {
  .page-kwaliteitscontrole .page-banner {
    padding: 350px 25px 70px;
  }
  .quality {
    padding: 100px 25px;
  }
  .quality__text {
    padding-right: 20px;
  }
  .quality__title {
    padding-bottom: 0;
  }
  .quality__title--second {
    margin-top: 0;
  }
  .quality__steps {
    margin: 20px 0 0;
  }
  .quality__step--left {
    padding: 0;
  }
  .quality__step--right {
    margin-top: 30px;
    padding: 0;
  }
  .photo-album {
    padding: 70px 25px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .quality__text  { width: 60%; }
  .quality__aside { width: 40%; }
  .quality__step  { width: 100%; }
}

@media (max-width: 767px) {
  .page-kwaliteitscontrole .page-banner {
    padding: 350px 20px 70px;
  }
  .quality {
    padding: 50px 20px 60px;
  }
  .quality__text,
  .quality__aside {
    width: 100%;
  }
  .quality__text {
    margin-top: 40px;
    padding: 0;
  }
  .quality__step--right {
    margin-top: 40px;
  }
  .quality__aside {
    margin-top: 33px;
  }
  .photo-album {
    padding: 70px 20px 0;
  }
}


/* =====================================================================
   13. PAGINA: DOWNLOADS
   ===================================================================== */
.downloads-heading {
  padding: 100px 30px 0;
}
/* Kop in de middelste kolom (een derde van de breedte) */
.downloads-heading__column {
  width: 33.333%;
  margin-left: 33.333%;
  margin-bottom: 17px;
}

.downloads {
  padding: 1px 0 70px;
}
.downloads__column {
  padding: 10px;
}
.download-group--forms {
  padding: 40px 30px 30px;
}
.download-group--articles {
  margin-bottom: 42px;
  padding: 40px 30px 82px;
}
.download-group__column {
  padding-right: 25px;
}

/* Lijst met pdf-bestanden, elk met een roze vinkje */
.download-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--font-content);
  font-weight: 500;
}
.download-list__item {
  position: relative;
  display: flex;
  align-items: center;
}
.download-list__link {
  display: flex;
  align-items: center;
  width: 100%;
}
.download-list__icon {
  position: relative;
  display: flex;
}
.download-list__icon svg {
  width: 14px;
  height: 14px;
  margin-right: 3.5px;
  fill: var(--color-pink);
}
.download-list__text {
  align-self: center;
  padding-left: 5px;
}

/* Slogan onderaan (middelste twee derde van de breedte) */
.downloads__quote-column {
  width: 66.666%;
  margin-left: 16.666%;
}
.downloads__quote-column > :not(:last-child):not(.subsection) {
  margin-bottom: 0;
}

@media (max-width: 1024px) {
  .page-downloads .page-banner {
    padding: 350px 25px 70px;
  }
  .downloads-heading {
    padding: 70px 25px 0;
  }
  .download-group__column {
    padding: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .downloads__quote-column {
    width: 90%;
    margin-left: 5%;
  }
}

@media (max-width: 767px) {
  .page-downloads .page-banner {
    padding: 350px 20px 70px;
  }
  .downloads-heading {
    padding: 55px 20px 0;
  }
  /* (de lege kolommen ernaast zijn op een telefoon 1px hoog) */
  .downloads-heading__column {
    width: 100%;
    margin: 1px 0 16px;
  }
  .downloads {
    padding: 0 10px;
  }
  .download-group--forms {
    padding: 0;
  }
  .download-group--articles {
    margin: 0;
    padding: 42px 0 0;
  }
  .downloads__quote {
    padding: 51px 0 76px;
  }
  .downloads__quote-column {
    width: 100%;
    margin-left: 0;
  }
}


/* =====================================================================
   14. PAGINA: CONTACT
   ===================================================================== */
.contact-office {
  padding: 100px 30px;
}
/* Eén kolom met de gegevens van het hoofdkantoor, in het midden */
.contact-office__column {
  margin: 0 auto;
  padding: 0 100px 75px;
}
.contact-office__title {
  padding-top: 72px;
}
.contact-office__details {
  align-content: center;
  align-items: center;
}
.contact-office__details > :not(:last-child):not(.subsection) {
  margin-bottom: 5px;
}
.contact-office__label {
  padding-top: 11px;
  text-align: start;
}
.contact-office__value a,
.person__details a {
  color: inherit;
}
.contact-office__value a:hover,
.contact-office__value a:focus,
.person__details a:hover,
.person__details a:focus {
  color: var(--color-blue);
}

/* Kopje "Contactpersonen:" */
.contact-people-heading {
  padding: 0 10px;
}
.contact-people-heading__inner {
  display: flex;
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 0;
}
.contact-people-heading__title {
  margin: 0 0 15px;
  padding-left: 58px;
  font-size: 29px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
}

/* Vier contactpersonen naast elkaar */
.contact-people {
  padding-bottom: 1px;
}
.contact-people__inner {
  display: flex;
  max-width: 1140px;
  margin: 0 auto;
  padding-bottom: 37px;
}
.person {
  display: flex;
  flex-direction: column;
  width: 25%;
  padding: 10px;
}
.person__card {
  position: relative;
  padding: 10px;
  text-align: center;
}
.person__notch {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.person__notch svg {
  position: relative;
  left: 50%;
  display: block;
  width: calc(100% + 1.3px);
  fill: #fff;
  transform: translateX(-50%);
}
.person__name {
  margin-bottom: 0;
  font-size: 21px;
}
.person__details {
  margin: 0;
  font-family: var(--font-content);
}

@media (max-width: 1024px) {
  .page-contact .page-banner {
    padding: 350px 25px 70px;
  }
  .contact-office {
    padding: 75px 25px;
  }
  .contact-office__column {
    padding: 50px 30px 50px 50px;
  }
  .contact-people-heading__inner,
  .contact-people__inner {
    max-width: 1024px;
  }
}

@media (max-width: 767px) {
  .page-contact .page-banner {
    padding: 350px 20px 70px;
  }
  .page-banner__eyebrow {
    padding-bottom: 0;
  }
  .contact-office {
    padding: 80px 20px 20px;
  }
  .contact-office__column {
    margin: 0;
    padding: 65px 0;
  }
  .contact-office__column h4,
  .contact-office__label {
    text-align: center;
  }
  .contact-office__divider {
    justify-content: center;
  }
  .contact-people-heading__inner,
  .contact-people__inner {
    flex-wrap: wrap;
    max-width: 767px;
  }
  .person {
    width: 100%;
  }
  .person:last-child {
    margin-bottom: 42px;
    padding: 0;
  }
}


/* =====================================================================
   12. PAGINA: REFERENTIES
   ===================================================================== */

/* --- 12a. Vier uitgelichte projecten ------------------------------ */
.projects {
  padding: 70px 0;
}
.projects__column {
  padding: 10px;
}
.projects__row {
  padding-bottom: 25px;
}
.project-column {
  padding: 0 25px;
}
.project {
  text-align: center;
}
.project__image {
  margin-bottom: 15px;
}
.project__name {
  margin-bottom: 5px;
  padding: 0 10px;
}
.project__separator {
  padding-bottom: 7px;
  line-height: 0;
}
.project__separator span {
  display: inline-block;
  width: 20%;
  border-top: 2px solid var(--color-text);
}
.project__summary {
  padding: 0 10px;
  font-family: var(--font-content);
}
.project__link-row {
  margin-top: 5px;
}
/* Vierkant blauw knopje met een roze schakel-pictogram */
.project__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 27px;
  height: 27px;
  padding: 3px;
  font-size: 11px;
  line-height: 27px;
  background-color: #0c05fa;
  border-radius: 10%;
}
.project__link svg {
  display: block;
  width: 21px;
  height: 27px;
  fill: var(--color-pink);
}
.project__link:hover {
  opacity: 0.9;
}
/* Kleine verschillen per project (zoals op de oorspronkelijke site) */
.project--zaandam .project__name    { font-size: 19px; }
.project--zaandam .project__summary { margin-bottom: 81px; }
.project--zaandam .project__link    { background-color: #1507f7; }
.project--heiloo .project__image    { margin-bottom: 14px; }
.project--heiloo .project__name     { margin-bottom: 12px; }
.project--heiloo .project__separator { padding-bottom: 0; }
.project--heiloo .project__summary  { margin-bottom: 47px; }
.project--callantsoog .project__image   { margin-bottom: 14px; }
.project--callantsoog .project__summary { margin-bottom: 13px; }
.project--callantsoog .project__link    { background-color: #0416fe; }
.project--arnhem .project__summary  { margin-bottom: 51px; }
.project--arnhem .project__link     { background-color: #0308fa; }

.project__more {
  margin-top: 29px;
}
.project--callantsoog + .project__more { margin-top: 32px; }
.project--arnhem + .project__more      { margin-top: 33px; }

/* Klein (wit) pictogram rechts in de knop, zichtbaar bij aanwijzen */
.project__button {
  display: inline-flex;
  justify-content: center;
}
.button__icon {
  display: flex;
  margin-left: 10px;
}
.button__icon svg {
  display: block;
  width: 1em;
  height: 1em;
  fill: #fff;
}

/* Kop "Referenties" */
.fancy-heading {
  display: flex;
  flex-direction: column;
  min-height: 157px;
}
.fancy-heading__title {
  width: 100%;
  max-width: 1074px;
  margin: 116px auto 20px;
  padding-left: 275px;
  font-family: var(--font-body);
  text-align: left;
}
.fancy-heading__part {
  font-family: var(--font-content);
}

/* --- 12b. Lijst met alle referenties ------------------------------ */
.reference-list {
  padding: 0 30px 81px;
}
.reference-list > .container > .column {
  align-content: center;
  align-items: center;
}
.reference-list__left {
  padding-bottom: 104px;
}
.reference-list__left-inner {
  padding: 0 30px;
}
.reference-list__left-column {
  padding-right: 16px;
}
.reference-list__right {
  padding: 29px 31px 0 25px;
}
.reference-list__quote-icon {
  margin-top: 23px;
}

/* Uitklaplijst */
.accordion {
  margin-top: 20px;
  text-align: start;
  background-color: rgba(1, 55, 210, 0.04);
}
.accordion__item {
  border: 1px solid var(--color-background);
}
.accordion__item + .accordion__item {
  border-top: none;
}
.accordion__title {
  display: block;
  width: 100%;
  margin: 0;
  padding: 25px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-align: left;
  color: inherit;
  background: none;
  border: 0;
}
.accordion__title[role="button"] {
  cursor: pointer;
}
.accordion__icon {
  display: inline-block;
  float: left;
  width: 1.5em;
  margin-right: 15px;
  text-align: left;
}
.accordion__icon svg {
  width: 1em;
  height: 1em;
  fill: #000;
}
.accordion__icon-opened,
.accordion__item.is-open .accordion__icon-closed {
  display: none;
}
.accordion__item.is-open .accordion__icon-opened {
  display: inline;
}
.accordion__text {
  font-family: var(--font-content);
  font-weight: 600;
  color: var(--color-text);
}
.accordion__content {
  display: none;
  padding: 25px;
  font-family: var(--font-content);
  background-color: var(--color-white);
  border-top: 1px solid var(--color-background);
}
.accordion__item.is-open .accordion__content {
  display: block;
}

/* --- 12c. Zijpaneel met projectdetails ---------------------------- */
.side-panel {
  position: fixed;
  inset: 0;
  z-index: 99999;
  visibility: hidden;
  transition: visibility 0.3s;
}
.side-panel.is-open {
  visibility: visible;
}
.side-panel__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s;
  cursor: pointer;
}
.side-panel.is-open .side-panel__backdrop {
  opacity: 1;
}
.side-panel__box {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: min(760px, calc(100vw - 40px));
  overflow: auto;
  background: var(--color-white);
  transform: translateX(-100%);
  transition: transform 0.3s;
}
.side-panel.is-open .side-panel__box {
  transform: none;
}
.side-panel__close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  padding: 8px;
  line-height: 0;
  background-color: rgba(0, 0, 0, 0.3);
  border: 0;
  cursor: pointer;
}
.side-panel__close svg {
  width: 19px;
  height: 19px;
  fill: #000;
}
.side-panel__content {
  padding: 40px 25px 25px;
  font-family: var(--font-content);
}
.side-panel__content img {
  display: block;
  margin: 0 auto;
}
.side-panel__content h4 {
  margin-bottom: 20px;
}
body.has-open-panel {
  overflow: hidden;
}

@media (max-width: 1024px) {
  .page-referenties .page-banner {
    padding: 350px 25px 70px;
  }
  .projects {
    padding: 0;
  }
  .project-column {
    padding-bottom: 25px;
  }
  .project-column > :not(:last-child):not(.subsection) {
    margin-bottom: 5px;
  }
  .project .project__summary {
    margin-bottom: 0;
  }
  .fancy-heading__title {
    max-width: 1024px;
    padding-left: 58px;
  }
  .reference-list {
    padding: 100px 25px;
  }
  .reference-list__left {
    padding-right: 20px;
  }
  .reference-list__left-column {
    padding: 0;
  }
  .reference-list__right {
    padding: 29px 31px 0 25px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .project-column              { width: 50%; }
  .reference-list__left        { width: 60%; }
  .reference-list__right       { width: 40%; }
}

@media (max-width: 767px) {
  .page-referenties .page-banner {
    padding: 350px 20px 70px;
  }
  .projects {
    padding: 60px 0 0;
  }
  .projects__column {
    padding: 0;
  }
  .project-column {
    padding: 0 20px 35px;
  }
  .fancy-heading__title {
    max-width: 767px;
    padding-left: 41px;
  }
  .reference-list {
    padding: 50px 20px 60px;
  }
  .reference-list__left {
    margin-top: 40px;
    padding: 0;
  }
  .reference-list__left-inner {
    padding: 0;
  }
  .reference-list__right {
    margin-top: 33px;
    padding: 0;
  }
  .accordion__icon {
    width: 1.2em;
  }
}


/* =====================================================================
   15. PAGINA: PRIVACYBELEID
   ===================================================================== */
.legal__inner {
  display: flex;
  flex-direction: column;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 20px;
}
.legal__article {
  margin: 4em 0;
  padding: 5.34em 6.67em;
}
.legal__header {
  margin-bottom: 1.5em;
}
.legal__title {
  margin-bottom: 0.2em;
  font-family: var(--font-body);
  font-size: 1.76471rem;
  font-weight: 400;
  line-height: 1.2;
}
.legal__content h2 {
  margin-bottom: 20px;
  font-family: var(--font-body);
  font-weight: 400;
}
.legal__content h2 strong {
  font-weight: 700;
}
.legal__content > :last-child {
  margin-bottom: 20px;
}

@media (max-width: 921px) {
  .legal__article {
    padding: 1.5em 2.14em;
  }
}
@media (max-width: 544px) {
  .legal__inner {
    padding: 0 0.54em;
  }
  .legal__article {
    padding: 1.5em 1em;
  }
  .legal__header {
    margin-bottom: 1em;
  }
}