/* =============================================================================
   Schilders- en afwerkingsbedrijf Franse, herontwerp homepage
   Idee: "Méér dan een kleurtje", de doorsnede.

   Kleurtokens zijn vooraf doorgerekend tegen ELK vlak waar ze op kunnen landen
   (LESSONS regel 1). De uitkomsten, met de WCAG-formule:

     inkt   #191712  op kalk 15.22  kalk2 13.39  papier 17.91  oker 5.87  lood 5.21
     inkt2  #565049  op kalk  6.76  kalk2  5.95  papier  7.96
     blauw  #24348C  op kalk  9.18  kalk2  8.07  papier 10.80   (merkkleur uit het logo)
     opBlauw  #F1ECE3 op blauw 9.18  blauw-diep 11.73
     opBlauw2 #AFB8DE op blauw 5.52  blauw-diep  7.06
     wit    #FFFFFF  op menie 5.68
     inkt   #191712  op zand  9.28

   Het merkblauw is hier wél tekstkleur, en dat is gemeten en niet aangenomen:
   #24348C haalt 9.18 op het krijtwit. Wit op de loodband haalde maar 3.44 en is
   daarom geschrapt; op lood staat inkt.

   De materiaalbanden (oker, menie, lood) zijn inhoud en geen accent: ze zijn de
   lagen van het werk. Het enige accent is het merkblauw.
============================================================================= */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-var.woff2') format('woff2-variations');
  font-weight: 400 800;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Plex Mono';
  src: url('../fonts/plexmono-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

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

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: #F1ECE3;
  color: #191712;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

/* Eén focusring zonder specificiteit, met een tweede ring eromheen zodat hij
   ook op een gevulde knop zichtbaar blijft, waar de eerste ring anders de
   tekstkleur van die knop aanneemt (LESSONS regel 19). */
:where(a, button, summary, input, select, textarea, [tabindex]):focus {
  outline: 2px solid #191712;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(216, 205, 180, .95);
  border-radius: 2px;
}
.fr-erm :where(a, button):focus,
.fr-off :where(a, button):focus,
.fr-foot :where(a, button):focus {
  outline-color: #F1ECE3;
  box-shadow: 0 0 0 5px rgba(16, 22, 60, .95);
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 90;
  background: #191712; color: #F1ECE3;
  padding: 10px 16px; border-radius: 3px;
  font-size: .9rem; text-decoration: none;
  transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

/* ---------------------------------------------------------------- tokens */

.fr {
  --kalk:  #F1ECE3;
  --kalk2: #E5DED1;
  --papier:#FFFFFF;

  --blauw: #24348C;
  --blauwD:#1A2668;

  --oker:  #B98C3E;
  --menie: #9C5240;
  --lood:  #8E8A82;
  --zand:  #C9B999;   /* de onderste band; inkt haalt hierop 9.28 */
  --zand2: #D8CDB4;   /* het vlak van het eerste scherm: pleisterwerk, geen papier.
                         inkt 11.35, inkt2 5.04, blauw 6.84, blauw-diep 8.75 */

  --inkt:  #191712;
  --inkt2: #565049;
  --op-blauw:  #F1ECE3;
  --op-blauw2: #AFB8DE;

  --lijn: rgba(25, 23, 18, .16);
  --lijn2: rgba(25, 23, 18, .34);

  --wrap: 1240px;
  --pad: clamp(20px, 5vw, 56px);

  --sans: 'Archivo', system-ui, sans-serif;
  --mono: 'Plex Mono', ui-monospace, 'SFMono-Regular', Consolas, monospace;
}

.fr-wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--pad);
}

/* ------------------------------------------------------------ typografie */

.fr-h2, .fr-erm__title, .fr-off__title, .fr-say__title {
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 112%;
  letter-spacing: -.022em;
  line-height: 1.08;
  margin: 0;
  text-wrap: balance;
}
.fr-h2 {
  font-size: clamp(1.75rem, 3.5vw, 2.9rem);
  color: var(--inkt);
  margin-top: .3em;
  max-width: 22ch;
}
.fr-lead {
  margin: 1.1rem 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  color: var(--inkt2);
  max-width: 56ch;
}
.fr-eyebrow {
  margin: 0;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--blauw);
}
.fr-eyebrow--licht { color: var(--op-blauw2); }

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

.fr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 12px 26px;
  font-family: var(--sans);
  font-size: .95rem; font-weight: 700; font-stretch: 105%;
  letter-spacing: .005em;
  text-decoration: none;
  border: 2px solid transparent; border-radius: 2px;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.fr-btn--blauw { background: var(--blauw); color: #FFFFFF; }
.fr-btn--blauw:hover { background: var(--blauwD); }
.fr-btn--lijn  { background: transparent; color: var(--blauw); border-color: var(--lijn2); }
.fr-btn--lijn:hover { border-color: var(--blauw); background: rgba(36, 52, 140, .07); }
.fr-btn--wit   { background: var(--kalk); color: var(--blauwD); }
.fr-btn--wit:hover { background: #FFFFFF; }

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

.fr-head {
  position: sticky; top: 0; z-index: 40;
  background: var(--zand2);
  border-bottom: 1px solid var(--lijn);
}
.fr-head__in {
  width: 100%; max-width: var(--wrap); margin-inline: auto;
  padding: 11px var(--pad);
  display: flex; align-items: center; gap: clamp(12px, 3vw, 34px);
}
.fr-brand { flex: 0 0 auto; text-decoration: none; }
.fr-brand__img { width: clamp(140px, 16vw, 190px); height: auto; }
.fr-head__cta { margin-left: auto; min-height: 42px; padding: 8px 18px; font-size: .86rem; }

/* De navigatie is een <details> die in de HTML OPEN staat, zodat er zonder
   script altijd een werkend menu is. Het script klapt hem dicht op smal scherm.
   Dicht moet ook echt dicht zijn: een gesloten <details> waarvan het paneel een
   eigen display houdt, blijft als lege doos in de kop staan en meldt zijn links
   als focusbaar terwijl focus() er nooit kan landen. */
.fr-nav { flex: 1 1 auto; min-width: 0; }
.fr-nav__toggle { display: none; }
.fr-nav:not([open]) .fr-nav__panel { display: none; }
.fr-nav__panel { display: flex; flex-wrap: wrap; gap: clamp(12px, 1.8vw, 26px); }
.fr-nav__panel a {
  color: var(--inkt); text-decoration: none;
  font-size: .93rem; font-weight: 600;
  padding: 6px 0; border-bottom: 2px solid transparent;
}
.fr-nav__panel a:hover { border-bottom-color: var(--blauw); }

@media (max-width: 979px) {
  .fr-nav { flex: 0 0 auto; order: 3; }
  .fr-nav[open] { flex: 1 1 100%; }
  .has-js .fr-nav[open] { flex: 0 0 auto; }
  .fr-head__cta { margin-left: auto; order: 2; }
  .fr-head__in { position: relative; flex-wrap: wrap; }

  .fr-nav__toggle {
    display: inline-flex; align-items: center; gap: 8px;
    min-height: 44px; padding: 6px 10px;
    cursor: pointer; list-style: none;
    font-family: var(--mono);
    font-size: .74rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--inkt);
  }
  .fr-nav__toggle::-webkit-details-marker { display: none; }
  .fr-nav__bars { display: grid; gap: 4px; width: 20px; }
  .fr-nav__bars i { display: block; height: 2px; background: var(--inkt); border-radius: 2px; }

  .fr-nav__panel {
    flex-direction: column; gap: 0; width: 100%;
    margin-top: 8px; padding: 4px 0;
    border-top: 1px solid var(--lijn);
  }
  .fr-nav__panel a { padding: 11px 0; border-bottom: 1px solid var(--lijn); }
  .fr-nav__panel a:last-child { border-bottom: 0; }

  .has-js .fr-nav[open] .fr-nav__panel {
    position: absolute; left: 0; right: 0; top: 100%;
    margin-top: 0; border-top: 0;
    background: var(--zand2);
    border-bottom: 1px solid var(--lijn);
    padding: 4px var(--pad) 16px;
    box-shadow: 0 24px 40px -28px rgba(25, 23, 18, .45);
  }
}
@media (max-width: 439px) {
  .fr-nav__word { display: none; }
  .fr-head__in { gap: 8px; }
  .fr-brand__img { width: 118px; }
  .fr-head__cta { padding: 8px 14px; font-size: .8rem; white-space: nowrap; }
  .fr-nav__toggle { padding: 6px 4px; }
}

/* --------------------------------------------------------- hero, gedeeld */

.fr-hero { background: var(--zand2); }

/* ================================================== hero A: de doorsnede ==
   Het beeld zakt door de materiaalbanden heen, en er hangen drie satellieten
   met echte gegevens overheen. Geen twee kolommen die elkaar ontwijken. */

.fr-heroA { padding-top: clamp(34px, 5.5vh, 64px); }
.fr-heroA__in {
  display: grid;
  grid-template-columns: minmax(0, 1.06fr) minmax(0, .94fr);
  gap: clamp(26px, 4vw, 56px);
  align-items: end;
  padding-bottom: clamp(26px, 4vh, 46px);
}
.fr-heroA__title {
  margin: .34em 0 0;
  font-family: var(--sans);
  font-weight: 700;
  font-stretch: 112%;
  font-size: clamp(1.95rem, 4.2vw, 3.6rem);
  line-height: 1.02;
  letter-spacing: -.032em;
}
.fr-heroA__l1, .fr-heroA__l2 { display: block; }
.fr-heroA__l2 { color: var(--blauw); }
.fr-heroA__lead {
  margin: 1.2rem 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  color: var(--inkt2);
  max-width: 46ch;
}
.fr-heroA__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.7rem 0 0; }

.fr-heroA__fig {
  position: relative;
  z-index: 2;
  margin: 0 0 calc(-1 * clamp(30px, 5vw, 68px));
}
.fr-heroA__fig img { width: 100%; height: auto; }

/* De satellieten. Klein, met een cijfer of een keurmerk, en ze vallen met opzet
   over de rand van de foto heen zodat er echte lagen ontstaan. */
.fr-sat {
  position: absolute;
  margin: 0;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 14px;
  border-radius: 3px;
  box-shadow: 0 18px 34px -20px rgba(25, 23, 18, .55);
  max-width: 210px;
}
.fr-sat b {
  font-family: var(--sans);
  font-weight: 700; font-stretch: 110%;
  font-size: 1.35rem; line-height: 1;
  letter-spacing: -.02em;
}
.fr-sat span {
  font-family: var(--mono);
  font-size: .62rem; line-height: 1.35;
  letter-spacing: .1em; text-transform: uppercase;
}
.fr-sat--erm  { top: 22px; left: -34px; background: var(--blauw); color: #FFFFFF; }
.fr-sat--erm b { color: #FFFFFF; }
.fr-sat--erm span { color: var(--op-blauw2); }
.fr-sat--jaar { bottom: 92px; left: -46px; background: var(--kalk); color: var(--inkt); }
.fr-sat--jaar span { color: var(--inkt2); }
.fr-sat--spec { bottom: 16px; right: -28px; background: var(--oker); color: var(--inkt); }
/* Op het oog gekozen bruin haalde 4.45 op de okerband, net onder de drempel.
   Inkt haalt er 5.87, en de hiërarchie zit toch al in maat en snit. */
.fr-sat--spec span { color: var(--inkt); }

@media (max-width: 999px) {
  .fr-heroA__in { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fr-heroA__fig { margin-bottom: calc(-1 * clamp(24px, 6vw, 44px)); max-width: 460px; }
  .fr-sat--erm  { left: auto; right: -18px; top: 16px; }
  .fr-sat--jaar { left: -18px; bottom: 74px; }
  .fr-sat--spec { right: -14px; bottom: 8px; }
  .fr-heroA__cta { gap: 10px; margin-top: 1.35rem; }
  .fr-heroA__cta .fr-btn { padding: 11px 15px; font-size: .87rem; min-height: 46px; }
  .fr-heroA__lead { margin-top: 1rem; }
}
@media (max-width: 560px) {
  .fr-sat { max-width: 168px; padding: 8px 11px; }
  .fr-sat b { font-size: 1.15rem; }
  .fr-sat span { font-size: .56rem; }
  .fr-sat--erm  { right: -10px; }
  .fr-sat--jaar { left: -10px; bottom: 62px; }
  .fr-sat--spec { right: -8px; }
}

/* ==================================================== hero B: het monument ==
   Full bleed en donker. De kop ligt over het beeld, vier spelden benoemen wat
   er te zien of te bewijzen is, en de doorsnede snijdt onderaan door de foto. */

.fr-heroB { position: relative; isolation: isolate; background: var(--blauwD); }
.fr-heroB__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 42%;
  z-index: 0;
}
/* De plaat staat als background-image op een VOOROUDER van de tekst, want
   alleen dan telt de tekst als "op beeld" en wordt hij met pixelmeting
   gecontroleerd (LESSONS regel 5). */
.fr-heroB__in {
  position: relative; z-index: 2;
  padding: clamp(56px, 9vh, 104px) 0 clamp(84px, 12vh, 128px);
  background-image: linear-gradient(100deg,
      rgba(12, 17, 46, .95) 0%,
      rgba(12, 17, 46, .93) 52%,
      rgba(12, 17, 46, .74) 70%,
      rgba(12, 17, 46, .40) 100%);
}
.fr-heroB__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, auto);
  gap: clamp(24px, 4vw, 56px);
  align-items: end;
}
.fr-heroB__title {
  margin: .3em 0 0;
  font-family: var(--sans);
  font-weight: 700; font-stretch: 116%;
  font-size: clamp(2rem, 4.6vw, 4rem);
  /* Niet strakker dan dit: bij 1.0 hangt de staart van de j uit "kleurtje" tot
     in het vak van de regel eronder. Dat is wit op zand en het las als een
     contrastfout op de foto, terwijl er helemaal geen foto in het spel was. */
  line-height: 1.07;
  letter-spacing: -.034em;
  color: #FFFFFF;
  max-width: 15ch;
}
/* width: fit-content laat het vak om de letters sluiten. Zonder dat loopt de
   lege rechterhelft van een blokregel door tot in het lichte deel van de foto,
   en dan meet de contrastcontrole daar een pixel die geen letter draagt. */
.fr-heroB__title span, .fr-heroB__title em {
  display: block; font-style: normal;
  width: fit-content; max-width: 100%;
}
.fr-heroB__title em { color: var(--zand2); }
.fr-heroB__lead {
  margin: 1.2rem 0 0;
  font-size: clamp(1.02rem, 1.3vw, 1.16rem);
  color: var(--op-blauw);
  max-width: 44ch;
}
.fr-heroB__cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 1.7rem 0 0; }

.fr-heroB__stat {
  margin: 0;
  display: flex; flex-direction: column; gap: 2px;
  padding: 16px 20px;
  background: var(--kalk);
  border-radius: 3px;
  box-shadow: 0 26px 50px -26px rgba(6, 10, 30, .8);
}
.fr-heroB__stat b {
  font-family: var(--sans);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1;
  letter-spacing: -.03em;
  color: var(--blauw);
}
.fr-heroB__stat span {
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .13em; text-transform: uppercase;
  color: var(--inkt2);
}

/* De spelden liggen op het beeld, elk met een eigen plek. Geen decoratie: elk
   speldje noemt iets dat de bron ook echt zegt. */
.fr-pins { list-style: none; margin: 0; padding: 0; position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.fr-pin {
  position: absolute;
  padding: 8px 14px;
  background: rgba(255, 255, 255, .96);
  color: var(--inkt);
  border-radius: 999px;
  font-family: var(--mono);
  font-size: .64rem; letter-spacing: .11em; text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 14px 26px -14px rgba(6, 10, 30, .75);
}
.fr-pin--erm   { top: 15%; right: 6%; }
.fr-pin--toren { top: 33%; right: 20%; background: var(--blauw); color: #FFFFFF; }
.fr-pin--hout  { top: 52%; right: 9%; }
.fr-pin--spec  { top: 70%; right: 22%; }

/* De banden staan hier in de gewone stroom en niet absoluut onderin. Absoluut
   leek logisch, maar dan legt een strook van tweehonderd pixels zich over de
   lead, de knoppen en de statkaart heen. In de flow snijden ze nog steeds door
   de foto, want het beeld beslaat de hele sectie, en ze bedekken niets. */
.fr-cut--b {
  position: relative; z-index: 4;
  display: flex; flex-direction: column;
  background: transparent;
}
.fr-cut--b .fr-cut__band--grond { background: var(--zand); }

@media (max-width: 1099px) {
  .fr-pin--toren { right: 6%; top: 26%; }
  .fr-pin--spec  { right: 6%; top: 62%; }
  .fr-pin--hout  { right: 6%; top: 44%; }
  .fr-pin--erm   { right: 6%; top: 10%; }
}
@media (max-width: 899px) {
  .fr-heroB__grid { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .fr-heroB__in {
    background-image: linear-gradient(178deg,
        rgba(12, 17, 46, .62) 0%,
        rgba(12, 17, 46, .70) 34%,
        rgba(12, 17, 46, .90) 72%,
        rgba(12, 17, 46, .95) 100%);
  }
  .fr-heroB__stat { align-self: flex-start; }
  .fr-heroB__cta { gap: 10px; }
  .fr-heroB__cta .fr-btn { padding: 11px 15px; font-size: .87rem; min-height: 46px; }
  /* Absoluut gepositioneerde spelden vielen op smal scherm precies over de kop
     heen. Hier staan ze in de gewone stroom, in het lege stuk foto onder de
     statkaart: nog steeds op het beeld, maar niets raakt de tekst. */
  .fr-pins {
    position: relative; inset: auto; z-index: 3;
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 0 var(--pad) clamp(24px, 4vh, 40px);
  }
  .fr-pin { position: static; font-size: .58rem; padding: 7px 11px; }
}

/* ------------------------------------------------------- de wisselaar ---- */

.vswitch {
  position: fixed; z-index: 80;
  left: 16px; bottom: 16px;
  display: inline-flex; gap: 2px;
  padding: 3px;
  background: #191712;
  border-radius: 999px;
  box-shadow: 0 14px 30px -16px rgba(0, 0, 0, .7);
}
.vswitch__b {
  min-width: 62px; min-height: 38px;
  padding: 6px 14px;
  border: 0; border-radius: 999px;
  background: transparent;
  color: #D8CDB4;
  font-family: 'Archivo', system-ui, sans-serif;
  font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  cursor: pointer;
}
.vswitch__b[aria-pressed="true"] { background: #D8CDB4; color: #191712; }
.vswitch__b:focus { outline: 2px solid #FFFFFF; outline-offset: 2px; box-shadow: 0 0 0 5px rgba(25, 23, 18, .95); }

@media (max-width: 560px) {
  .vswitch { left: 10px; bottom: 10px; padding: 2px; }
  .vswitch__b { min-width: 52px; min-height: 34px; padding: 5px 10px; font-size: .7rem; }
}

/* ------------------------------------------------------ de doorsnede, hero */

/* De banden lopen van rand tot rand: een doorsnede door de grond stopt niet bij
   een contentkolom. De labels blijven wel op de kolomlijn staan, vandaar de
   max(): binnen de wrap is dat de kolomrand, daarbuiten gewoon de paginamarge. */
.fr-cut { background: var(--kalk2); }
.fr-cut__in { display: flex; flex-direction: column; max-width: none; padding-inline: 0; }
.fr-cut__band {
  display: flex; align-items: center;
  padding-inline: max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)));
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
}
.fr-cut__band b { font-weight: 500; }
.fr-cut__band--verf    { height: 38px; background: var(--blauw); color: var(--op-blauw); }
.fr-cut__band--voor    { height: 32px; background: var(--menie); color: #FFFFFF; }
.fr-cut__band--herstel { height: 40px; background: var(--oker);  color: var(--inkt); }
.fr-cut__band--vlak    { height: 32px; background: var(--lood);  color: var(--inkt); }
.fr-cut__band--grond   { height: 58px; background: var(--zand);  color: var(--inkt); }

/* ------------------------------------------------------- onder de laag (2) */

.fr-onder { background: var(--kalk2); padding: clamp(56px, 9vh, 108px) 0 clamp(60px, 10vh, 116px); }
/* De maatbeperking hoort op de ALINEA en niet op de blockquote: ch rekent met
   de fontgrootte van het element zelf, en op de blockquote is dat nog gewoon
   16px. Daar werd 24ch dus 211px breed en viel de zin uiteen in losse woorden. */
.fr-onder__quote { margin: 0 0 clamp(36px, 6vh, 68px); }
.fr-onder__quote p {
  margin: 0;
  max-width: 26ch;
  font-family: var(--sans);
  font-weight: 700; font-stretch: 108%;
  font-size: clamp(1.7rem, 4vw, 3.2rem);
  line-height: 1.06;
  letter-spacing: -.028em;
  color: var(--inkt);
}
.fr-onder__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}

/* de doorsnede, tweede vorm: nu uitgeschreven, van boven naar beneden */
.fr-lagen { list-style: none; margin: 0; padding: 0; }
.fr-laag {
  display: grid;
  grid-template-columns: 3.1rem minmax(0, 1fr);
  gap: 0 14px;
  align-items: baseline;
  padding: 15px var(--pad) 15px 16px;
  margin-inline: calc(-1 * 16px);
}
.fr-laag__n { font-family: var(--mono); font-size: .72rem; letter-spacing: .1em; }
.fr-laag__b { min-width: 0; font-size: .96rem; }
.fr-laag__b b {
  display: block;
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  font-weight: 700; font-stretch: 106%;
  letter-spacing: -.012em;
  margin-bottom: 2px;
}
.fr-laag--verf    { background: var(--blauw); color: var(--op-blauw); }
.fr-laag--verf .fr-laag__n { color: var(--op-blauw2); }
.fr-laag--voor    { background: var(--menie); color: #FFFFFF; }
.fr-laag--voor .fr-laag__n { color: #FFFFFF; }
.fr-laag--herstel { background: var(--oker);  color: var(--inkt); }
.fr-laag--vlak    { background: var(--lood);  color: var(--inkt); }
.fr-laag--grond   { background: var(--kalk);  color: var(--inkt); padding-bottom: 26px; }

.fr-onder__aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(12px, 2vw, 20px); }
.fr-onder__fig { margin: 0; min-width: 0; }
.fr-onder__fig img { width: 100%; height: auto; }
.fr-onder__fig figcaption,
.fr-shot figcaption,
.fr-werk__breed figcaption,
.fr-huis__fig figcaption {
  margin-top: 9px;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt2);
}
.fr-onder__note { grid-column: 1 / -1; margin: 6px 0 0; font-size: .95rem; color: var(--inkt2); }

@media (max-width: 999px) {
  .fr-onder__grid { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------- diensten (3) */

.fr-dien { background: var(--kalk); padding: clamp(64px, 10vh, 118px) 0; }
.fr-dien__head { max-width: 62ch; }
.fr-dien__list {
  list-style: none; margin: clamp(34px, 5vh, 58px) 0 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2.2vw, 28px);
}
.fr-dienst {
  min-width: 0;
  padding-top: 16px;
  border-top: 6px solid var(--lood);
}
.fr-dienst h3 {
  margin: 0 0 6px;
  font-size: clamp(1.02rem, 1.35vw, 1.2rem);
  font-weight: 700; font-stretch: 106%;
  letter-spacing: -.014em;
  line-height: 1.16;
}
.fr-dienst p { margin: 0; font-size: .92rem; color: var(--inkt2); }
.fr-dienst--verf    { border-top-color: var(--blauw); }
.fr-dienst--voor    { border-top-color: var(--menie); }
.fr-dienst--herstel { border-top-color: var(--oker); }
.fr-dienst--vlak    { border-top-color: var(--lood); }
.fr-dienst--grond   { border-top-color: var(--zand); }

@media (max-width: 1099px) { .fr-dien__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 780px)  { .fr-dien__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 460px)  { .fr-dien__list { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------------- ERM (4) */

.fr-erm { background: var(--blauwD); color: var(--op-blauw); padding: clamp(60px, 9vh, 110px) 0; }
.fr-erm__top {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
}
.fr-erm__title {
  font-size: clamp(1.6rem, 3.1vw, 2.5rem);
  color: var(--op-blauw);
  max-width: 20ch;
}
.fr-erm__stempel {
  display: inline-flex; align-items: center; gap: 10px;
  margin: clamp(18px, 3vh, 28px) 0 0;
  padding: 7px 14px 7px 8px;
  border: 1px solid rgba(241, 236, 227, .34);
  border-radius: 2px;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--op-blauw2);
}
.fr-erm__stempel span {
  padding: 3px 8px;
  background: var(--kalk);
  color: var(--blauwD);
  font-weight: 500; letter-spacing: .1em;
  border-radius: 1px;
}
.fr-erm__body p { margin: 0 0 1rem; color: var(--op-blauw2); max-width: 52ch; }
.fr-erm__body p:last-child { margin-bottom: 0; }

.fr-erm__spec {
  margin-top: clamp(36px, 6vh, 68px);
  padding-top: clamp(24px, 4vh, 40px);
  border-top: 1px solid rgba(241, 236, 227, .26);
}
.fr-erm__speclabel {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .7rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--op-blauw2);
  max-width: 60ch;
}
.fr-erm__woorden {
  margin: 0;
  font-size: clamp(1.2rem, 2.5vw, 2.05rem);
  line-height: 1.32;
  font-weight: 400; font-stretch: 104%;
  letter-spacing: -.014em;
  color: var(--op-blauw);
  max-width: 46ch;
}
.fr-erm__link { margin: 1.6rem 0 0; }
.fr-erm__link a { color: var(--op-blauw); font-weight: 600; text-underline-offset: 4px; }
.fr-erm__link a:hover { color: #FFFFFF; }

@media (max-width: 899px) { .fr-erm__top { grid-template-columns: minmax(0, 1fr); } }

/* --------------------------------------------------------- ons werk (5) */

.fr-werk { background: var(--kalk); padding: clamp(64px, 10vh, 118px) 0; }
.fr-werk__breed { margin: 0; }
.fr-werk__h2 {
  font-family: var(--sans);
  font-weight: 700; font-stretch: 112%;
  font-size: clamp(1.75rem, 3.5vw, 2.9rem);
  line-height: 1.08; letter-spacing: -.022em;
  margin: clamp(26px, 4vh, 44px) 0 clamp(20px, 3vh, 34px);
  max-width: 24ch;
  color: var(--inkt);
  text-wrap: balance;
}
.fr-werk__breed img { width: 100%; height: auto; }
/* Vier beelden op één gedeelde onderlijn. De kolommen krijgen een fr-waarde
   gelijk aan hun eigen beeldverhouding (5:4, 4:3, 3:4, 3:4), dus verdeelt de
   grid de ruimte precies zo dat alle vier op dezelfde hoogte uitkomen, op elke
   breedte. Geen vaste hoogtes, geen croppen in CSS. */
.fr-werk__grid {
  display: grid;
  grid-template-columns: 1.25fr 1.333fr .75fr .75fr;
  gap: clamp(14px, 2vw, 24px);
  margin-top: clamp(14px, 2vw, 24px);
  align-items: end;
}
.fr-shot { margin: 0; min-width: 0; }
.fr-shot img { width: 100%; height: auto; }

@media (max-width: 999px) {
  .fr-werk__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: end; }
}
@media (max-width: 520px) {
  .fr-werk__grid { grid-template-columns: minmax(0, 1fr); }
}

/* ------------------------------------------------------ het bedrijf (6) */

.fr-huis { background: var(--kalk2); padding: clamp(60px, 9vh, 110px) 0; }
.fr-huis__in {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}
.fr-huis__groot {
  margin: .3em 0 1.1rem;
  font-family: var(--sans);
  font-weight: 400; font-stretch: 108%;
  font-size: clamp(1.8rem, 4vw, 3.1rem);
  line-height: 1.06;
  letter-spacing: -.026em;
  color: var(--inkt);
}
.fr-huis__groot b { font-weight: 700; color: var(--blauw); }
.fr-huis__body p { margin: 0 0 1rem; color: var(--inkt2); max-width: 54ch; }
.fr-huis__feiten { margin: clamp(20px, 3vh, 32px) 0 0; }
.fr-huis__feiten > div { padding: 13px 0; border-top: 1px solid var(--lijn); }
.fr-huis__feiten dt {
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blauw);
  margin-bottom: 4px;
}
.fr-huis__feiten dd { margin: 0; font-size: .95rem; color: var(--inkt2); }
.fr-huis__fig { margin: 0; }
.fr-huis__fig img { width: 100%; height: auto; }

@media (max-width: 899px) { .fr-huis__in { grid-template-columns: minmax(0, 1fr); } }

/* -------------------------------------------------------- reacties (7) */

.fr-say { background: var(--papier); padding: clamp(56px, 8vh, 96px) 0; }
.fr-say__title {
  font-size: clamp(1.4rem, 2.2vw, 1.95rem);
  color: var(--inkt);
  margin-bottom: clamp(24px, 4vh, 40px);
}
.fr-say__rail {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: clamp(16px, 2.4vw, 30px);
  align-items: start;
}
.fr-quote { margin: 0; min-width: 0; padding-top: 16px; border-top: 2px solid var(--blauw); }
.fr-quote blockquote { margin: 0; }
.fr-quote blockquote p { margin: 0; font-size: .98rem; color: var(--inkt); }
.fr-quote figcaption {
  margin-top: 12px;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--inkt2);
}

/* --------------------------------------------------------- offerte (8) */

.fr-off { position: relative; isolation: isolate; }
.fr-off__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.fr-off__in {
  position: relative; z-index: 1;
  padding: clamp(72px, 12vh, 138px) 0;
  background-image: linear-gradient(95deg,
      rgba(16, 22, 60, .95) 0%,
      rgba(16, 22, 60, .90) 44%,
      rgba(16, 22, 60, .70) 72%,
      rgba(16, 22, 60, .44) 100%);
}
.fr-off__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr);
  gap: clamp(28px, 5vw, 70px);
  align-items: end;
}
.fr-off__title {
  font-size: clamp(1.9rem, 4.4vw, 3.4rem);
  color: #FFFFFF;
  margin-top: .28em;
  max-width: 16ch;
}
.fr-off__lead { color: var(--op-blauw); font-size: 1.04rem; max-width: 46ch; margin: 1.1rem 0 0; }
.fr-off__cta { margin: 1.8rem 0 0; }
.fr-off__contact { list-style: none; margin: 0; padding: 0; }
.fr-off__contact li {
  display: flex; flex-direction: column; gap: 2px;
  padding: 13px 0; border-top: 1px solid rgba(241, 236, 227, .28);
}
.fr-off__contact span {
  font-family: var(--mono);
  font-size: .66rem; letter-spacing: .17em; text-transform: uppercase;
  color: var(--op-blauw2);
}
.fr-off__contact a {
  color: #FFFFFF; text-decoration: none; font-size: 1.04rem; font-weight: 600;
  align-self: flex-start; border-bottom: 1px solid rgba(255, 255, 255, .4);
}
.fr-off__contact a:hover { border-bottom-color: #FFFFFF; }

@media (max-width: 899px) { .fr-off__grid { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ----------------------------------------------------------------- foot */

.fr-foot { background: var(--inkt); color: var(--kalk); padding: clamp(52px, 8vh, 88px) 0 24px; }
.fr-foot__in {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 52px);
}
.fr-foot__mark {
  margin: 0;
  font-family: var(--sans);
  font-weight: 700; font-stretch: 118%;
  font-size: 2.1rem; line-height: 1; letter-spacing: -.02em;
  color: var(--kalk);
}
.fr-foot__tag {
  margin: 8px 0 0;
  font-family: var(--mono);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: #C4BDB1;
}
.fr-foot__note { margin: 16px 0 0; font-size: .92rem; color: #C4BDB1; max-width: 40ch; }
.fr-foot__col { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.fr-foot__h {
  margin: 0 0 4px;
  font-family: var(--mono);
  font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
  color: #9FAAD8;
}
.fr-foot__col a { color: var(--kalk); text-decoration: none; font-size: .94rem; border-bottom: 1px solid transparent; }
.fr-foot__col a:hover { border-bottom-color: #9FAAD8; }
.fr-foot__addr { margin: 0; font-size: .94rem; color: #C4BDB1; }

.fr-foot__bottom {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  justify-content: space-between; align-items: center;
  margin-top: clamp(36px, 6vh, 60px); padding-top: 18px;
  border-top: 1px solid rgba(241, 236, 227, .2);
}
.fr-foot__bottom p { margin: 0; font-size: .84rem; color: #C4BDB1; }
.fr-credit a { color: var(--kalk); text-decoration: underline; text-underline-offset: 3px; }
.fr-credit a:hover { color: #9FAAD8; }

@media (max-width: 899px) { .fr-foot__in { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .fr-foot__in { grid-template-columns: minmax(0, 1fr); } }

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

/* De verborgen begintoestand hangt aan .anim, en .anim wordt alleen gezet bij
   prefers-reduced-motion: no-preference. Bij motion uit of zonder script staat
   er dus nooit een opacity 0 die niets meer kan onthullen (LESSONS regel 7 en 8).
   Alleen opacity en transform, nooit clip-path. */
.anim .fr-rv {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity .7s cubic-bezier(.22, .61, .36, 1), transform .7s cubic-bezier(.22, .61, .36, 1);
}
.anim .fr-rv.is-in { opacity: 1; transform: none; }

/* ------------------------------------------------------------ smal scherm */

/* De niet-actieve hero staat echt uit. Het slot erop zodat geen enkele regel
   hem per ongeluk terugzet. */
[hidden] { display: none !important; }

@media (max-width: 899px) {
  .fr-cut__band--verf    { height: 32px; }
  .fr-cut__band--voor    { height: 28px; }
  .fr-cut__band--herstel { height: 34px; }
  .fr-cut__band--vlak    { height: 28px; }
  .fr-cut__band--grond   { height: 44px; }
  .fr-cut__band { font-size: .62rem; letter-spacing: .12em; }
}
@media (max-width: 520px) {
  .fr-laag { grid-template-columns: 2.4rem minmax(0, 1fr); gap: 0 10px; }
  .fr-onder__aside { grid-template-columns: minmax(0, 1fr); }
}