/* ==========================================================================
   FREERUN ACHTERHOEK — HOMEPAGE
   Gebouwd op merkboek versie 1, augustus 2026.

   Alles staat binnen .fa-scope zodat het thema en Elementor er niet
   doorheen fietsen, en andersom.

   MERKREGELS DIE HIER IN CODE STAAN
   - Kleur      zwart, wit en drie grijzen. 60 zwart / 30 wit / 10 grijs.
   - Steel      alleen labels, lijnen en grote vlakken. Nooit lopende tekst.
   - Type       Staatliches voor koppen, altijd kapitaal. Montserrat voor tekst.
   - Vorm       altijd 45 graden. Harde snedes, geen verloop, geen ronde hoek.
   - Punt       wijst omhoog of vooruit, nooit omlaag.
   - Tekst      staat altijd recht, nooit schuin mee.
   - Streekgroen komt hier niet voor. Dat is alleen de Achterhoek-editie.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */

/* De variabelen staan bewust OOK op :root.
   Als de wrapper .fa-scope om welke reden dan ook wegvalt — en in een
   pagebuilder gebeurt dat sneller dan je denkt — dan lost var() nergens meer
   op. Het gevolg is geen nette terugval maar een pagina zonder kleuren, zonder
   lettertype en zonder vlakken. Deze regel is dat vangnet. Custom properties
   doen niets zolang niemand ze aanroept, dus dit raakt de rest van de site niet. */
:root {
  --fa-black: #000000;
  --fa-slate: #333333;
  --fa-graphite: #4f4f4f;
  --fa-steel: #7a7a7a;
  --fa-mist: #e6e6e6;
  --fa-white: #ffffff;
  --fa-on-dark: #ededed;
  --fa-on-dark-soft: #a8a8a8;
  --fa-hairline: rgba(255, 255, 255, 0.16);
  --fa-hairline-dark: rgba(0, 0, 0, 0.14);
  --fa-font-display: "Staatliches", "Haettenschweiler", "Arial Narrow", impact, sans-serif;
  --fa-font-text: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --fa-s1: 0.5rem;
  --fa-s2: 1rem;
  --fa-s3: 1.5rem;
  --fa-s4: 2rem;
  --fa-s5: 3rem;
  --fa-s6: 4rem;
  --fa-s7: 6rem;
  --fa-section: clamp(4.5rem, 9vw, 8.5rem);
  --fa-container: 1240px;
  --fa-gutter: clamp(1.25rem, 5vw, 3.5rem);
  --fa-wedge: clamp(72px, 13vw, 240px);
  --fa-wedge-sm: clamp(40px, 7vw, 104px);
  --fa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

.fa-scope {
  /* Merkkleuren, letterlijk uit hoofdstuk 05 */
  --fa-black: #000000;
  --fa-slate: #333333; /* lopende tekst */
  --fa-graphite: #4f4f4f; /* tweede vlak, diagonalen */
  --fa-steel: #7a7a7a; /* labels, lijnen, groot. Nooit tekst */
  --fa-mist: #e6e6e6; /* rustige achtergrond */
  --fa-white: #ffffff;

  /* Afgeleiden voor donkere vlakken. Steel is op zwart wel leesbaar genoeg
     voor labels, maar lopende tekst op zwart krijgt bewust bijna-wit. */
  --fa-on-dark: #ededed;
  --fa-on-dark-soft: #a8a8a8;
  --fa-hairline: rgba(255, 255, 255, 0.16);
  --fa-hairline-dark: rgba(0, 0, 0, 0.14);

  /* Type */
  --fa-font-display: "Staatliches", "Haettenschweiler", "Arial Narrow", impact, sans-serif;
  --fa-font-text: "Montserrat", -apple-system, BlinkMacSystemFont, "Segoe UI", roboto, helvetica, arial, sans-serif;

  /* Ritme. Alles is een veelvoud van 8. */
  --fa-s1: 0.5rem;
  --fa-s2: 1rem;
  --fa-s3: 1.5rem;
  --fa-s4: 2rem;
  --fa-s5: 3rem;
  --fa-s6: 4rem;
  --fa-s7: 6rem;
  --fa-section: clamp(4.5rem, 9vw, 8.5rem);

  /* Maat */
  --fa-container: 1240px;
  --fa-gutter: clamp(1.25rem, 5vw, 3.5rem);

  /* De diagonaal. Vierkant, dus de schuine zijde is exact 45 graden.
     Dit is de enige manier waarop de hoek klopt bij elke schermbreedte. */
  --fa-wedge: clamp(72px, 13vw, 240px);
  --fa-wedge-sm: clamp(40px, 7vw, 104px);

  --fa-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  box-sizing: border-box;
  color: var(--fa-slate);
  font-family: var(--fa-font-text);
  font-size: clamp(1rem, 0.97rem + 0.16vw, 1.0625rem);
  font-weight: 400;
  line-height: 1.7;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.fa-scope *,
.fa-scope *::before,
.fa-scope *::after {
  box-sizing: inherit;
}

/* Elementor en Hello zetten marges op koppen en paragrafen. Binnen onze
   eigen scope zetten we dat platter dan platgeslagen. */
.fa-scope h1,
.fa-scope h2,
.fa-scope h3,
.fa-scope h4,
.fa-scope p,
.fa-scope ul,
.fa-scope ol,
.fa-scope figure,
.fa-scope blockquote {
  margin: 0;
  padding: 0;
}

.fa-scope ul,
.fa-scope ol {
  list-style: none;
}

.fa-scope img,
.fa-scope svg {
  display: block;
  max-width: 100%;
}

/* Alle merktekens en pictogrammen zijn eenkleurig en volgen de tekstkleur.
   Zonder deze regel valt fill terug op zwart, en dan is het witte logo op
   een zwart vlak onzichtbaar. */
.fa-scope svg {
  fill: currentColor;
}

.fa-scope img {
  height: auto;
}

/* Geen ronde hoeken. Nergens. Behalve het ronde icoon, dat mag per merkboek. */
.fa-scope :where(a, button, input, div, section, span, img, figure) {
  border-radius: 0;
}

/* --------------------------------------------------------------------------
   2. TYPOGRAFIE
   -------------------------------------------------------------------------- */

.fa-display,
.fa-scope h1,
.fa-scope h2,
.fa-h2,
.fa-h3 {
  font-family: var(--fa-font-display);
  font-weight: 400; /* Staatliches heeft maar één gewicht */
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.94;
  color: var(--fa-black);
}

.fa-display {
  font-size: clamp(2.85rem, 1.4rem + 7.2vw, 7rem);
  line-height: 0.9;
}

.fa-h2 {
  font-size: clamp(2rem, 1.1rem + 3.4vw, 3.75rem);
}

.fa-h3 {
  font-size: clamp(1.3rem, 1.05rem + 0.95vw, 1.75rem);
  line-height: 1.02;
}

/* Labels: Montserrat Bold, 0,2 em letterafstand. Hoofdstuk 06. */
.fa-label {
  font-family: var(--fa-font-text);
  font-size: clamp(0.6875rem, 0.66rem + 0.12vw, 0.75rem);
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.4;
  /* Het merkboek zegt het zelf: Steel haalt 4,3:1 en zakt onder de norm.
     Graphite is de aangewezen kleur voor alles wat gelezen moet worden. */
  color: var(--fa-graphite);
  margin: 0;
}

.fa-lead {
  font-size: clamp(1.0625rem, 0.98rem + 0.42vw, 1.3125rem);
  line-height: 1.6;
  font-weight: 400;
}

.fa-text-balance {
  text-wrap: balance;
}

.fa-measure {
  max-width: 62ch;
}

.fa-measure-tight {
  max-width: 48ch;
}

/* Op donkere vlakken */
.fa-on-black,
.fa-on-black .fa-h2,
.fa-on-black .fa-h3,
.fa-on-black .fa-display {
  color: var(--fa-white);
}

.fa-on-black p,
.fa-on-black li {
  color: var(--fa-on-dark);
}

.fa-on-black .fa-label {
  color: var(--fa-on-dark-soft);
}

/* --------------------------------------------------------------------------
   3. LAYOUT
   -------------------------------------------------------------------------- */

.fa-scope .fa-container {
  width: 100%;
  max-width: var(--fa-container);
  margin-inline: auto;
  padding-inline: var(--fa-gutter);
}

.fa-section {
  position: relative;
  padding-block: var(--fa-section);
  overflow: hidden; /* houdt de diagonalen binnen het vlak */
}

.fa-section--black {
  background: var(--fa-black);
}

.fa-section--mist {
  background: var(--fa-mist);
}

.fa-section--white {
  background: var(--fa-white);
}

/* Kop van een sectie: label, titel, streep, introzin. Vast stramien. */
.fa-section-head {
  display: flex;
  flex-direction: column;
  gap: var(--fa-s3);
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.fa-section-head__rule {
  height: 4px;
  background: var(--fa-black);
  width: 100%;
  max-width: 100%;
}

.fa-on-black .fa-section-head__rule {
  background: var(--fa-white);
}

.fa-section-head__top {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--fa-s3) var(--fa-s5);
}

.fa-section-head__intro {
  max-width: 46ch;
  margin-left: auto;
  text-align: left;
}

@media (min-width: 900px) {
  .fa-section-head__intro {
    text-align: right;
  }
}

/* --------------------------------------------------------------------------
   4. DE DIAGONAAL
   Vierkante pseudo-elementen met een driehoek-clip. Omdat het vierkant is,
   is de schuine zijde altijd precies 45 graden. Punten wijzen omhoog of
   vooruit, nooit omlaag.
   -------------------------------------------------------------------------- */

.fa-wedge {
  position: absolute;
  width: var(--fa-wedge);
  height: var(--fa-wedge);
  pointer-events: none;
  z-index: 0;
}

/* Rechtsboven, schuine zijde loopt van linksboven naar rechtsonder */
.fa-wedge--tr {
  top: 0;
  right: 0;
  clip-path: polygon(100% 0, 100% 100%, 0 0);
}

/* Linksonder, punt wijst omhoog */
.fa-wedge--bl {
  bottom: 0;
  left: 0;
  clip-path: polygon(0 0, 0 100%, 100% 100%);
}

.fa-wedge--graphite {
  background: var(--fa-graphite);
}

.fa-wedge--steel {
  background: var(--fa-steel);
}

.fa-wedge--mist {
  background: var(--fa-mist);
}

.fa-wedge--black {
  background: var(--fa-black);
}

.fa-wedge--white {
  background: var(--fa-white);
}

/* Zorgt dat inhoud altijd boven de vlakken ligt */
.fa-section > .fa-container {
  position: relative;
  z-index: 1;
}

/* De chevron. Opgebouwd uit 45 graden, wijst vooruit. */
.fa-chevron {
  width: 1em;
  height: 1em;
  flex: none;
  fill: currentColor;
}

/* --------------------------------------------------------------------------
   5. KNOPPEN
   Harde vlakken, geen ronde hoek, geen verloop.
   -------------------------------------------------------------------------- */

.fa-scope .fa-btn {
  --fa-btn-bg: var(--fa-black);
  --fa-btn-fg: var(--fa-white);
  --fa-btn-bd: var(--fa-black);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.7em;
  padding: 1.05em 1.9em;
  border: 2px solid var(--fa-btn-bd);
  background: var(--fa-btn-bg);
  color: var(--fa-btn-fg);
  font-family: var(--fa-font-text);
  font-size: clamp(0.8125rem, 0.79rem + 0.11vw, 0.875rem);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.22s var(--fa-ease), color 0.22s var(--fa-ease),
    border-color 0.22s var(--fa-ease), transform 0.22s var(--fa-ease);
  overflow: hidden;
}

/* De hoek rechtsonder wordt afgesneden onder 45 graden: het merkteken in het klein. */
.fa-scope .fa-btn::after {
  content: "";
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 14px;
  height: 14px;
  background: currentColor;
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: 0.28;
  transition: width 0.22s var(--fa-ease), height 0.22s var(--fa-ease);
}

.fa-scope .fa-btn:hover,
.fa-scope .fa-btn:focus-visible {
  transform: translateY(-2px);
}

.fa-scope .fa-btn:hover::after,
.fa-scope .fa-btn:focus-visible::after {
  width: 22px;
  height: 22px;
}

.fa-scope .fa-btn:active {
  transform: translateY(0);
}

/* Wit op zwart */
.fa-scope .fa-btn--light {
  --fa-btn-bg: var(--fa-white);
  --fa-btn-fg: var(--fa-black);
  --fa-btn-bd: var(--fa-white);
}

.fa-scope .fa-btn--light:hover,
.fa-scope .fa-btn--light:focus-visible {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-white);
}

.fa-scope .fa-btn--dark:hover,
.fa-scope .fa-btn--dark:focus-visible {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-black);
}

/* Lijnvariant op donker */
.fa-scope .fa-btn--ghost {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-white);
  --fa-btn-bd: rgba(255, 255, 255, 0.42);
}

.fa-scope .fa-btn--ghost:hover,
.fa-scope .fa-btn--ghost:focus-visible {
  --fa-btn-bd: var(--fa-white);
  --fa-btn-bg: var(--fa-white);
  --fa-btn-fg: var(--fa-black);
}

/* Lijnvariant op licht */
.fa-scope .fa-btn--outline {
  --fa-btn-bg: transparent;
  --fa-btn-fg: var(--fa-black);
  --fa-btn-bd: var(--fa-black);
}

.fa-scope .fa-btn--outline:hover,
.fa-scope .fa-btn--outline:focus-visible {
  --fa-btn-bg: var(--fa-black);
  --fa-btn-fg: var(--fa-white);
}

.fa-scope .fa-btn--sm {
  padding: 0.85em 1.35em;
  font-size: 0.75rem;
}

.fa-scope .fa-btn--block {
  width: 100%;
}

.fa-btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s2);
}

/* Tekstlink met pijl */
.fa-scope .fa-link {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  color: var(--fa-black);
  font-weight: 700;
  font-size: 0.8125rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--fa-black);
  transition: gap 0.22s var(--fa-ease), color 0.22s var(--fa-ease),
    border-color 0.22s var(--fa-ease);
}

.fa-scope .fa-link:hover,
.fa-scope .fa-link:focus-visible {
  gap: 1em;
}

.fa-on-black .fa-link,
.fa-scope .fa-link--light {
  color: var(--fa-white);
  border-bottom-color: var(--fa-white);
}

/* Zichtbare focus. Nooit weghalen: een deel van je bezoekers navigeert met toetsenbord. */
.fa-scope a:focus-visible,
.fa-scope button:focus-visible {
  outline: 3px solid var(--fa-steel);
  outline-offset: 3px;
}

.fa-on-black a:focus-visible,
.fa-on-black button:focus-visible {
  outline-color: var(--fa-white);
}

/* --------------------------------------------------------------------------
   6. HEADER
   -------------------------------------------------------------------------- */

.fa-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--fa-black);
  border-bottom: 1px solid var(--fa-hairline);
  transition: box-shadow 0.25s var(--fa-ease);
}

.fa-header.is-stuck {
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45);
}

.fa-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s3);
  min-height: 78px;
  padding-block: 0.75rem;
}

/* Logo. Horizontale lockup, minimaal 120 px breed volgens hoofdstuk 03. */
.fa-header__logo {
  display: block;
  flex: none;
  width: clamp(150px, 21vw, 208px);
  color: var(--fa-white);
}

.fa-header__logo svg {
  width: 100%;
  height: auto;
}

.fa-nav {
  display: none;
}

@media (min-width: 1060px) {
  .fa-nav {
    display: flex;
    align-items: center;
    gap: clamp(1rem, 2vw, 2rem);
    margin-left: auto;
  }
}

.fa-scope .fa-nav__link {
  position: relative;
  display: inline-block;
  padding: 0.5rem 0;
  color: var(--fa-on-dark);
  font-size: 0.78125rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 0.2s var(--fa-ease);
}

.fa-scope .fa-nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--fa-white);
  transition: width 0.24s var(--fa-ease);
}

.fa-scope .fa-nav__link:hover,
.fa-scope .fa-nav__link:focus-visible,
.fa-scope .fa-nav__link[aria-current="page"] {
  color: var(--fa-white);
}

.fa-scope .fa-nav__link:hover::after,
.fa-scope .fa-nav__link:focus-visible::after,
.fa-scope .fa-nav__link[aria-current="page"]::after {
  width: 100%;
}

/* Let op de .fa-scope ervoor. Zonder die wint de algemene .fa-scope .fa-btn
   regel op specificiteit en staat deze knop ook op mobiel in beeld. */
.fa-scope .fa-header__cta {
  display: none;
}

@media (min-width: 1060px) {
  .fa-scope .fa-header__cta {
    display: inline-flex;
    flex: none;
  }
}

/* Hamburger */
.fa-burger {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 48px;
  height: 48px;
  padding: 0 11px;
  margin-right: -11px;
  background: none;
  border: 0;
  cursor: pointer;
}

@media (min-width: 1060px) {
  .fa-burger {
    display: none;
  }
}

.fa-burger__bar {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--fa-white);
  transition: transform 0.26s var(--fa-ease), opacity 0.18s var(--fa-ease);
}

.fa-burger[aria-expanded="true"] .fa-burger__bar:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.fa-burger[aria-expanded="true"] .fa-burger__bar:nth-child(2) {
  opacity: 0;
}

.fa-burger[aria-expanded="true"] .fa-burger__bar:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* Mobiel paneel */
.fa-mobile-nav {
  display: block;
  background: var(--fa-black);
  border-top: 1px solid var(--fa-hairline);
  overflow: hidden;
  max-height: 0;
  visibility: hidden;
  transition: max-height 0.32s var(--fa-ease), visibility 0s linear 0.32s;
}

.fa-mobile-nav.is-open {
  max-height: 82vh;
  overflow-y: auto;
  visibility: visible;
  transition: max-height 0.32s var(--fa-ease), visibility 0s;
}

@media (min-width: 1060px) {
  .fa-mobile-nav {
    display: none;
  }
}

.fa-mobile-nav__list {
  padding: var(--fa-s2) 0 var(--fa-s4);
}

.fa-scope .fa-mobile-nav__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--fa-hairline);
  color: var(--fa-white);
  font-family: var(--fa-font-display);
  font-size: 1.5rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-decoration: none;
}

.fa-scope .fa-mobile-nav__link:hover {
  color: var(--fa-on-dark-soft);
}

.fa-mobile-nav__cta {
  margin-top: var(--fa-s3);
}

/* Overslaan-link voor toetsenbord en schermlezers */
.fa-scope .fa-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 1000;
  padding: 1rem 1.5rem;
  background: var(--fa-white);
  color: var(--fa-black);
  font-weight: 700;
  text-decoration: none;
}

.fa-scope .fa-skip:focus {
  left: 0;
}

/* --------------------------------------------------------------------------
   7. HERO — lichte variant

   AFWIJKING VAN HET MERKBOEK, BEWUST EN IN OVERLEG.
   Het merkboek schrijft 60 zwart / 30 wit / 10 grijs voor. Voor de hero is
   dat omgedraaid naar 60 wit / 30 zwart / 10 grijs. Alleen hier. De rest van
   de pagina volgt het merkboek gewoon.

   Opbouw: wit vlak met de kop links, de foto als vlak rechts. De foto levert
   de zwarte massa, één grijze diagonaal is het accent. Hoeken blijven 45
   graden, tekst staat recht, geen verloop op de vlakken.
   -------------------------------------------------------------------------- */

.fa-hero {
  position: relative;
  background: var(--fa-white);
  overflow: hidden;
  isolation: isolate;
}

/* Het beeld. Op mobiel een blok bovenaan, op desktop het rechtervlak. */
.fa-hero__media {
  position: relative;
  width: 100%;
  height: clamp(260px, 46vw, 380px);
}

.fa-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 58% 40%;
}

/* Hoekvlak over de foto. Punt wijst omhoog, zoals overal op de pagina. */
.fa-hero__media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(56px, 11vw, 132px);
  height: clamp(56px, 11vw, 132px);
  background: var(--fa-white);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

@media (min-width: 1024px) {
  .fa-hero__media {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    width: 44%;
    height: auto;
  }

  .fa-hero__media::after {
    width: clamp(96px, 9vw, 168px);
    height: clamp(96px, 9vw, 168px);
  }
}

/* De grijze diagonaal. Het enige grijs in dit vlak: de 10 procent. */
.fa-hero__accent {
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(80px, 14vw, 230px);
  height: clamp(80px, 14vw, 230px);
  background: var(--fa-mist);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
  z-index: 0;
}

.fa-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  padding-block: clamp(3rem, 7vw, 6.5rem);
}

@media (min-width: 1024px) {
  .fa-hero__inner {
    min-height: clamp(600px, 78vh, 820px);
  }
}

.fa-hero__content {
  /* Blijft links van de foto, ook op een breed scherm. */
  max-width: clamp(20rem, 42vw, 38rem);
}

.fa-hero__kicker {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-bottom: var(--fa-s3);
}

.fa-hero__kicker .fa-label {
  color: var(--fa-graphite);
}

.fa-hero__kicker-rule {
  width: clamp(32px, 6vw, 64px);
  height: 3px;
  background: var(--fa-black);
  flex: none;
}

.fa-hero h1 {
  color: var(--fa-black);
  margin-bottom: var(--fa-s3);
}

/* Eigen schaal: de algemene display-maat is bedoeld voor een kop over de
   volle breedte en wordt in deze kolom te grof. */
.fa-hero .fa-display {
  font-size: clamp(2.6rem, 1.35rem + 5.1vw, 5.25rem);
}

.fa-hero__lead {
  color: var(--fa-slate);
  max-width: 34ch;
  margin-bottom: var(--fa-s4);
}

.fa-hero__lead strong {
  color: var(--fa-black);
  font-weight: 700;
}

.fa-hero .fa-btn-row {
  margin-bottom: var(--fa-s5);
}

/* Bewijsregel onder de knoppen */
.fa-hero__proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem clamp(0.85rem, 1.6vw, 1.35rem);
  padding-top: var(--fa-s3);
  border-top: 2px solid var(--fa-black);
}

@media (max-width: 599px) {
  .fa-hero__proof {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem 1rem;
  }
}

.fa-hero__proof li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--fa-graphite);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fa-hero__proof .fa-chevron {
  color: var(--fa-black);
  width: 0.7em;
  height: 0.7em;
}

/* --------------------------------------------------------------------------
   8. CIJFERBALK
   -------------------------------------------------------------------------- */

.fa-stats {
  background: var(--fa-black);
  border-top: 1px solid var(--fa-hairline);
  position: relative;
}

.fa-stats__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--fa-hairline);
  border: 1px solid var(--fa-hairline);
  border-inline: 0;
}

@media (min-width: 820px) {
  .fa-stats__grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fa-stat {
  background: var(--fa-black);
  padding: clamp(1.75rem, 4vw, 2.75rem) clamp(1rem, 2.5vw, 1.75rem);
  text-align: left;
}

.fa-stat__value {
  font-family: var(--fa-font-display);
  font-size: clamp(2.25rem, 1.4rem + 3vw, 3.5rem);
  line-height: 0.9;
  color: var(--fa-white);
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

.fa-stat__label {
  color: var(--fa-on-dark-soft);
}

/* --------------------------------------------------------------------------
   9. STAPPEN — zo werkt een proefles
   -------------------------------------------------------------------------- */

.fa-steps {
  display: grid;
  gap: 1px;
  background: var(--fa-hairline-dark);
  border-block: 1px solid var(--fa-hairline-dark);
}

@media (min-width: 800px) {
  .fa-steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fa-step {
  position: relative;
  background: var(--fa-white);
  padding: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.5rem);
  overflow: hidden;
}

.fa-section--mist .fa-step {
  background: var(--fa-mist);
}

.fa-step__num {
  font-family: var(--fa-font-display);
  font-size: clamp(3rem, 2rem + 4vw, 5rem);
  line-height: 0.8;
  color: var(--fa-mist);
  margin-bottom: var(--fa-s2);
}

.fa-section--mist .fa-step__num {
  color: #d2d2d2;
}

.fa-step h3 {
  margin-bottom: 0.75rem;
}

.fa-step p {
  color: var(--fa-slate);
}

/* --------------------------------------------------------------------------
   10. LOCATIES
   Het belangrijkste blok van de pagina. Ouders zoeken hier als eerste op.
   -------------------------------------------------------------------------- */

.fa-locations {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
}

@media (min-width: 700px) {
  .fa-locations {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .fa-locations {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fa-location {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  padding: clamp(1.5rem, 3vw, 2rem);
  overflow: hidden;
  transition: transform 0.26s var(--fa-ease), box-shadow 0.26s var(--fa-ease);
}

.fa-location:hover {
  transform: translateY(-4px);
  box-shadow: 12px 12px 0 var(--fa-black);
}

/* Hoekvlak rechtsboven in elke kaart. Klein, maar familie van het schild. */
.fa-location::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--fa-wedge-sm);
  height: var(--fa-wedge-sm);
  background: var(--fa-mist);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
  transition: background-color 0.26s var(--fa-ease);
}

.fa-location:hover::before {
  background: var(--fa-black);
}

.fa-location__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--fa-s2);
  margin-bottom: var(--fa-s3);
  position: relative;
  z-index: 1;
}

.fa-location__city {
  font-family: var(--fa-font-display);
  font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.35rem);
  line-height: 0.95;
  text-transform: uppercase;
  color: var(--fa-black);
}

/* Statusvlag */
.fa-status {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  flex: none;
  padding: 0.42em 0.7em;
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
}

.fa-status--open {
  background: var(--fa-black);
  color: var(--fa-white);
}

.fa-status--wait {
  background: var(--fa-mist);
  color: var(--fa-slate);
  border: 1px solid var(--fa-steel);
}

.fa-status__dot {
  width: 6px;
  height: 6px;
  background: currentColor;
  flex: none;
  /* Ruit: een vierkant op zijn punt. Weer 45 graden. */
  transform: rotate(45deg);
}

/* Gegevensregels */
.fa-location__facts {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-fact {
  display: grid;
  grid-template-columns: 5.5rem 1fr;
  gap: var(--fa-s2);
  align-items: baseline;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
}

.fa-fact__key {
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

.fa-fact__val {
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fa-slate);
  line-height: 1.45;
}

.fa-fact__val strong {
  font-weight: 700;
  color: var(--fa-black);
}

.fa-location__foot {
  margin-top: auto;
  padding-top: var(--fa-s1);
}

/* Losse notitie onder het locatieblok */
.fa-note {
  display: flex;
  gap: var(--fa-s2);
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-left: var(--fa-s3);
  border-left: 4px solid var(--fa-black);
  max-width: 68ch;
}

.fa-note p {
  color: var(--fa-slate);
  font-size: 0.9375rem;
}

.fa-note strong {
  color: var(--fa-black);
}

.fa-on-black .fa-note {
  border-left-color: var(--fa-white);
}

.fa-on-black .fa-note p {
  color: var(--fa-on-dark);
}

.fa-on-black .fa-note strong {
  color: var(--fa-white);
}

/* --------------------------------------------------------------------------
   11. AANBOD
   Volgorde van belang: lessen en workshops dragen het bedrijf.
   -------------------------------------------------------------------------- */

.fa-offer {
  display: grid;
  gap: 1px;
  background: var(--fa-hairline);
  border: 1px solid var(--fa-hairline);
}

@media (min-width: 720px) {
  .fa-offer {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1080px) {
  .fa-offer {
    grid-template-columns: repeat(3, 1fr);
  }
}

.fa-scope .fa-offer__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  background: var(--fa-black);
  padding: clamp(1.75rem, 3.5vw, 2.5rem);
  text-decoration: none;
  overflow: hidden;
  transition: background-color 0.26s var(--fa-ease);
  min-height: clamp(220px, 26vw, 300px);
}

.fa-scope .fa-offer__item:hover,
.fa-scope .fa-offer__item:focus-visible {
  background: #0d0d0d;
}

/* Hoekvlak dat opent bij hover. Punt wijst vooruit. */
.fa-offer__item::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 0;
  background: var(--fa-graphite);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  transition: width 0.32s var(--fa-ease), height 0.32s var(--fa-ease);
  pointer-events: none;
}

.fa-scope .fa-offer__item:hover::after,
.fa-scope .fa-offer__item:focus-visible::after {
  width: var(--fa-wedge);
  height: var(--fa-wedge);
}

.fa-offer__index {
  position: relative;
  z-index: 1;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--fa-on-dark-soft);
}

.fa-offer__title {
  position: relative;
  z-index: 1;
  font-family: var(--fa-font-display);
  font-size: clamp(1.5rem, 1.2rem + 1.3vw, 2.1rem);
  line-height: 0.98;
  text-transform: uppercase;
  color: var(--fa-white);
}

.fa-offer__desc {
  position: relative;
  z-index: 1;
  color: var(--fa-on-dark-soft);
  font-size: 0.9375rem;
  line-height: 1.6;
}

.fa-offer__more {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding-top: var(--fa-s2);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  color: var(--fa-white);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.fa-scope .fa-offer__item:hover .fa-offer__more {
  gap: 0.9em;
}

.fa-offer__more .fa-chevron {
  transition: transform 0.26s var(--fa-ease);
}

/* --------------------------------------------------------------------------
   12. TWEEKOLOMS BLOK (voor ouders / over ons / verhuur)
   -------------------------------------------------------------------------- */

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

@media (min-width: 940px) {
  .fa-split {
    grid-template-columns: 1fr 1fr;
  }

  .fa-split--wide-left {
    grid-template-columns: 1.15fr 1fr;
  }

  .fa-split--wide-right {
    grid-template-columns: 1fr 1.15fr;
  }

  /* Beeld rechts zetten zonder de leesvolgorde in de HTML om te gooien */
  .fa-split__media--flip {
    order: 2;
  }
}

.fa-split__media {
  position: relative;
}

.fa-split__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.fa-split__media--tall img {
  aspect-ratio: 3 / 4;
}

/* Hoekvlak over het beeld heen. Punt wijst omhoog.
   Bewust kleiner dan de sectiediagonalen: dit ligt over een foto en mag
   er geen mens uit knippen. */
.fa-split__media::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: clamp(56px, 9vw, 150px);
  height: clamp(56px, 9vw, 150px);
  background: var(--fa-black);
  clip-path: polygon(0 0, 0 100%, 100% 100%);
  pointer-events: none;
}

/* Op een zwart vlak moet het hoekvlak juist licht zijn.
   Merkboek: grijstinten stapelen, donker achter en licht ervoor. */
.fa-on-black .fa-split__media::after,
.fa-split__media--corner-white::after {
  background: var(--fa-white);
}

.fa-split__body > * + * {
  margin-top: var(--fa-s3);
}

/* Kenmerkenlijst met chevrons */
.fa-ticks {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.fa-ticks li {
  display: grid;
  grid-template-columns: 1.5rem 1fr;
  gap: var(--fa-s2);
  align-items: start;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--fa-hairline-dark);
  font-size: 0.9375rem;
  line-height: 1.55;
}

.fa-ticks li:first-child {
  border-top: 1px solid var(--fa-hairline-dark);
}

.fa-on-black .fa-ticks li {
  border-color: var(--fa-hairline);
}

.fa-ticks .fa-chevron {
  width: 0.85rem;
  height: 0.85rem;
  margin-top: 0.42em;
  color: var(--fa-black);
}

.fa-on-black .fa-ticks .fa-chevron {
  color: var(--fa-white);
}

.fa-ticks strong {
  font-weight: 700;
  color: var(--fa-black);
}

.fa-on-black .fa-ticks strong {
  color: var(--fa-white);
}

/* Citaat */
.fa-quote {
  border-left: 4px solid var(--fa-white);
  padding-left: var(--fa-s3);
}

.fa-quote p {
  font-family: var(--fa-font-display);
  font-size: clamp(1.35rem, 1.1rem + 1.1vw, 1.85rem);
  line-height: 1.12;
  text-transform: uppercase;
  color: var(--fa-white);
  margin-bottom: 0.75rem;
}

.fa-quote cite {
  font-style: normal;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--fa-on-dark-soft);
}

/* Diploma's en erkenningen */
.fa-creds {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s2);
}

.fa-cred {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  padding: 0.6em 0.95em;
  border: 1px solid var(--fa-hairline-dark);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fa-slate);
}

.fa-on-black .fa-cred {
  border-color: var(--fa-hairline);
  color: var(--fa-on-dark);
}

.fa-cred .fa-chevron {
  width: 0.65em;
  height: 0.65em;
  color: var(--fa-steel);
}

/* --------------------------------------------------------------------------
   13. VERHUUR (zakelijk blok)
   -------------------------------------------------------------------------- */

.fa-rental {
  position: relative;
  background: var(--fa-graphite);
  color: var(--fa-white);
  padding: clamp(2.25rem, 5vw, 4rem);
  overflow: hidden;
}

.fa-rental::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: var(--fa-wedge);
  height: var(--fa-wedge);
  background: var(--fa-black);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
}

.fa-rental__grid {
  position: relative;
  z-index: 1;
  display: grid;
  gap: clamp(1.75rem, 4vw, 3rem);
  align-items: center;
}

@media (min-width: 900px) {
  .fa-rental__grid {
    grid-template-columns: 1.2fr 1fr;
  }
}

.fa-rental h2,
.fa-rental h3 {
  color: var(--fa-white);
}

.fa-rental p {
  color: #e2e2e2;
}

.fa-rental .fa-label {
  color: #c9c9c9;
}

.fa-rental__list li {
  border-color: rgba(255, 255, 255, 0.22);
}

.fa-rental__list .fa-chevron {
  color: var(--fa-white);
}

.fa-rental__list strong {
  color: var(--fa-white);
}

/* --------------------------------------------------------------------------
   14. MERCH-STROOK
   Klein gehouden. Lessen en workshops dragen het bedrijf, de rest komt daarna.
   -------------------------------------------------------------------------- */

.fa-merch {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  border: 2px solid var(--fa-black);
}

@media (min-width: 820px) {
  .fa-merch {
    grid-template-columns: auto 1fr auto;
  }
}

.fa-merch__mark {
  width: clamp(52px, 8vw, 76px);
  color: var(--fa-black);
  flex: none;
}

.fa-merch__mark svg {
  width: 100%;
  height: auto;
}

.fa-merch h3 {
  margin-bottom: 0.4rem;
}

.fa-merch p {
  font-size: 0.9375rem;
  color: var(--fa-slate);
  max-width: 52ch;
}

/* Uitgebreide merch-sectie: raster met losse artikelen.
   Bewust ingetogen gehouden. Het merkboek is er duidelijk over: lessen en
   workshops dragen het bedrijf, de rest komt daarna. */
.fa-merch-grid {
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 1.75rem);
  grid-template-columns: 1fr;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

@media (min-width: 640px) {
  .fa-merch-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1000px) {
  .fa-merch-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.fa-scope .fa-merch-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  background: var(--fa-white);
  border: 2px solid var(--fa-black);
  padding: clamp(1.25rem, 2.5vw, 1.75rem);
  text-decoration: none;
  overflow: hidden;
  transition: transform 0.26s var(--fa-ease), box-shadow 0.26s var(--fa-ease);
}

.fa-scope .fa-merch-card:hover,
.fa-scope .fa-merch-card:focus-visible {
  transform: translateY(-4px);
  box-shadow: 10px 10px 0 var(--fa-black);
}

/* Hoekvlak rechtsboven. left: auto staat er bewust bij, anders duwt
   Elementor het met zijn eigen overlay-regel naar links. */
.fa-merch-card::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  left: auto;
  bottom: auto;
  width: clamp(32px, 5vw, 56px);
  height: clamp(32px, 5vw, 56px);
  background: var(--fa-mist);
  clip-path: polygon(100% 0, 100% 100%, 0 0);
  pointer-events: none;
  transition: background-color 0.26s var(--fa-ease);
}

.fa-scope .fa-merch-card:hover::before {
  background: var(--fa-black);
}

.fa-merch-card__mark {
  /* display: block is hier geen detail. Een <span> is inline, en op een
     inline-element doet width niets. Zonder deze regel valt de svg terug op
     100% van de kaart en wordt het schild 200 px in plaats van 34. */
  display: block;
  width: 34px;
  height: 36px;
  color: var(--fa-black);
  margin-bottom: 0.35rem;
}

.fa-merch-card__mark svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

.fa-merch-card__title {
  position: relative;
  z-index: 1;
  font-family: var(--fa-font-display);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.4rem);
  line-height: 1;
  text-transform: uppercase;
  color: var(--fa-black);
}

.fa-merch-card__desc {
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--fa-slate);
}

/* De knoppen plakten tegen de notitie erboven. */
.fa-merch-cta {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.fa-merch-card__price {
  margin-top: auto;
  padding-top: 0.9rem;
  border-top: 1px solid var(--fa-hairline-dark);
  font-size: 0.625rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--fa-graphite);
}

/* --------------------------------------------------------------------------
   15. SLOT-CTA
   -------------------------------------------------------------------------- */

.fa-cta {
  position: relative;
  background: var(--fa-black);
  overflow: hidden;
  text-align: left;
}

.fa-cta__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 9vw, 7.5rem);
  max-width: 54rem;
}

.fa-cta h2 {
  color: var(--fa-white);
  margin-bottom: var(--fa-s3);
}

.fa-cta p {
  color: var(--fa-on-dark);
  margin-bottom: var(--fa-s4);
  max-width: 46ch;
}

.fa-cta__phone {
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
  margin-top: var(--fa-s3);
  color: var(--fa-on-dark-soft);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
}

.fa-scope .fa-cta__phone:hover {
  color: var(--fa-white);
}

/* --------------------------------------------------------------------------
   16. FOOTER
   -------------------------------------------------------------------------- */

.fa-footer {
  background: var(--fa-black);
  color: var(--fa-on-dark);
  border-top: 1px solid var(--fa-hairline);
  padding-top: clamp(3rem, 6vw, 5rem);
}

.fa-footer__top {
  display: grid;
  gap: clamp(2.25rem, 5vw, 3.5rem);
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
}

@media (min-width: 760px) {
  .fa-footer__top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1040px) {
  .fa-footer__top {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}

.fa-footer__logo {
  display: block;
  width: clamp(180px, 26vw, 230px);
  color: var(--fa-white);
  margin-bottom: var(--fa-s3);
}

.fa-footer__tagline {
  font-family: var(--fa-font-display);
  font-size: 1.15rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fa-white);
  margin-bottom: var(--fa-s2);
}

.fa-footer__blurb {
  font-size: 0.9375rem;
  color: var(--fa-on-dark-soft);
  max-width: 34ch;
}

.fa-footer__heading {
  margin-bottom: var(--fa-s2);
  padding-bottom: 0.65rem;
  border-bottom: 1px solid var(--fa-hairline);
  color: var(--fa-white);
}

.fa-footer__list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.fa-scope .fa-footer__list a,
.fa-scope .fa-footer__list span {
  color: var(--fa-on-dark-soft);
  font-size: 0.9375rem;
  text-decoration: none;
  transition: color 0.2s var(--fa-ease);
}

.fa-scope .fa-footer__list a:hover,
.fa-scope .fa-footer__list a:focus-visible {
  color: var(--fa-white);
}

.fa-socials {
  display: flex;
  gap: 0.6rem;
  margin-top: var(--fa-s3);
}

.fa-scope .fa-social {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border: 1px solid var(--fa-hairline);
  color: var(--fa-white);
  transition: background-color 0.2s var(--fa-ease), color 0.2s var(--fa-ease);
}

.fa-scope .fa-social:hover,
.fa-scope .fa-social:focus-visible {
  background: var(--fa-white);
  color: var(--fa-black);
}

.fa-social svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}

.fa-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--fa-s2) var(--fa-s4);
  padding-block: var(--fa-s3);
  border-top: 1px solid var(--fa-hairline);
}

.fa-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fa-s1) var(--fa-s3);
}

.fa-scope .fa-footer__legal a,
.fa-footer__copy {
  color: var(--fa-on-dark-soft);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-decoration: none;
}

.fa-scope .fa-footer__legal a:hover {
  color: var(--fa-white);
}

/* --------------------------------------------------------------------------
   17. BEWEGING
   Alles is zichtbaar zonder JavaScript. De klasse wordt pas door JS gezet,
   dus als JS uitvalt of NitroPack het uitstelt, staat er gewoon een pagina.
   -------------------------------------------------------------------------- */

.fa-js .fa-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.62s var(--fa-ease), transform 0.62s var(--fa-ease);
  will-change: opacity, transform;
}

.fa-js .fa-reveal.is-in {
  opacity: 1;
  transform: none;
}

.fa-js .fa-reveal--d1 {
  transition-delay: 0.08s;
}

.fa-js .fa-reveal--d2 {
  transition-delay: 0.16s;
}

.fa-js .fa-reveal--d3 {
  transition-delay: 0.24s;
}

@media (prefers-reduced-motion: reduce) {
  .fa-scope *,
  .fa-scope *::before,
  .fa-scope *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }

  .fa-js .fa-reveal {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   18. PRINT
   -------------------------------------------------------------------------- */

@media print {
  .fa-header,
  .fa-mobile-nav,
  .fa-hero__media,
  .fa-wedge,
  .fa-cta {
    display: none !important;
  }

  .fa-scope {
    color: #000;
  }

  .fa-section {
    padding-block: 1rem;
    background: #fff !important;
  }
}