/* ===========================================================================
   Dieselspecialist Jacobs & Gouw, Rotterdam
   Werkplaatsboek: inkt, staal en het signaalrood uit het logo. Eén doorlopende
   rail langs de linkerkant van de pagina, hoofdstuknummers op die rail, en een
   rode streep die elk hoofdstuk aankondigt.
   =========================================================================== */

:root {
  --inkt:        #0d1216;
  --inkt-2:      #141b21;
  --inkt-3:      #1c252c;
  --papier:      #eceeef;
  --papier-2:    #e0e3e5;
  --papier-3:    #d4d8da;
  --rood:        #e8323c;      /* vlakken, lijnen, grote letters */
  --rood-licht:  #f0444e;      /* kleine tekst op inkt */
  --rood-knop:   #cc1a26;      /* knopvlak met witte tekst */
  --rood-diep:   #a8131d;      /* kleine tekst op papier, de band */
  --staal:       #93a3ad;
  --staal-donker:#4b5a65;
  --wit:         #f6f8f8;
  --tekst-licht: #c4ced5;
  --tekst-donker:#1b2227;

  --lijn-ink:    rgba(255,255,255,.14);
  --lijn-papier: rgba(13,18,22,.16);

  --opening-achtergrond: #0d1216;
  --opening-demping: .62;

  --kader: 1240px;
  --rail: 5rem;
  --kop-breed: calc(1240px + 10rem);  /* --kader + 2 * --rail, uitgeschreven */
  --ritme: clamp(4rem, 7.5vw, 6.75rem);

  --display: 'Archivo', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
}

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

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

body {
  margin: 0;
  background: var(--inkt);
  color: var(--tekst-licht);
  font-family: var(--display);
  font-size: clamp(1rem, .96rem + .2vw, 1.0625rem);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

::selection { background: var(--rood); color: #fff; }

.overslaan {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--rood-knop);
  color: #fff;
  padding: .75rem 1.25rem;
  font-weight: 600;
}
.overslaan:focus { left: 0; }

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

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

.titel {
  font-family: var(--display);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.06;
  margin: 0 0 1rem;
  font-size: clamp(1.5rem, 1.15rem + 1.5vw, 2.25rem);
  color: var(--wit);
}
.titel--xl {
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: .98;
  font-size: clamp(2rem, 1.25rem + 3.4vw, 3.9rem);
  max-width: 17ch;
}
.titel--s { font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); }

.eyebrow {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin: 0 0 .9rem;
}

.nr {
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--staal);
  margin: 0 0 1.6rem;
}

.lead {
  font-size: clamp(1.1rem, 1.02rem + .5vw, 1.35rem);
  line-height: 1.45;
  font-weight: 500;
  letter-spacing: -.012em;
}

p { margin: 0 0 1.05em; }
p:last-child { margin-bottom: 0; }

.mini {
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.6;
  letter-spacing: .01em;
}

.tekstlink {
  display: inline-block;
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid var(--rood);
  padding-bottom: .2em;
  transition: color .2s ease, border-color .2s ease;
}
.tekstlink:hover { color: var(--rood-licht); }

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

.knop {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .85rem 1.4rem;
  font-weight: 600;
  font-size: .95rem;
  letter-spacing: -.005em;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .22s ease, color .22s ease, border-color .22s ease, transform .22s ease;
}
.knop svg { width: 1.05em; height: 1.05em; fill: currentColor; flex: 0 0 auto; }
.knop:hover { transform: translateY(-2px); }

.knop--rood { background: var(--rood-knop); color: #fff; }
.knop--rood:hover { background: #fff; color: var(--inkt); }

.knop--leeg { border-color: rgba(255,255,255,.4); color: var(--wit); }
.knop--leeg:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }

.knop--donker { background: var(--inkt); color: var(--wit); }
.knop--donker:hover { background: var(--inkt-3); }

.knop--licht { border-color: rgba(255,255,255,.4); color: var(--wit); }
.knop--licht:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }

/* -------------------------------------------------------------------- kopbalk */

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 60;
  transition: box-shadow .3s ease, border-color .3s ease;
  border-bottom: 1px solid transparent;
  background: linear-gradient(to bottom, rgba(13,18,22,.8) 0%, rgba(13,18,22,.45) 55%, rgba(13,18,22,0) 100%);
}
.kop--vast {
  background: rgba(13,18,22,.95);
  backdrop-filter: blur(10px);
  border-bottom-color: rgba(255,255,255,.1);
}

.kop__in {
  width: min(100% - 2rem, calc(var(--kader) + 2 * var(--rail)));
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: .9rem 0;
}

.merk {
  text-decoration: none;
  display: flex;
  flex-direction: column;
  line-height: 1;
  flex: 0 0 auto;
}
.merk__naam {
  font-weight: 900;
  letter-spacing: -.03em;
  font-size: 1.22rem;
  color: var(--wit);
}
.merk__sub {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin-top: .35rem;
}

.nav {
  display: flex;
  gap: 1.6rem;
  margin-left: auto;
}
.nav a {
  text-decoration: none;
  font-size: .88rem;
  font-weight: 500;
  color: var(--tekst-licht);
  padding: .3rem 0;
  position: relative;
  transition: color .2s ease;
}
.nav a::after {
  content: '';
  position: absolute;
  left: 0; right: 100%; bottom: 0;
  height: 1px;
  background: var(--rood);
  transition: right .28s cubic-bezier(.22,.61,.36,1);
}
.nav a:hover { color: var(--wit); }
.nav a:hover::after { right: 0; }

.kop__bel {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  background: var(--rood-knop);
  color: #fff;
  font-weight: 600;
  font-size: .85rem;
  padding: .6rem 1rem;
  transition: background-color .2s ease, color .2s ease;
}
.kop__bel svg { width: .95em; height: .95em; fill: currentColor; }
.kop__bel:hover { background: #fff; color: var(--inkt); }

.hamburger {
  display: none;
  align-items: center;
  gap: .5rem;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: var(--wit);
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  padding: .55rem .8rem;
  cursor: pointer;
}
.hamburger__streep {
  width: 16px; height: 8px;
  border-top: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transition: transform .25s ease;
}
.hamburger[aria-expanded="true"] .hamburger__streep { transform: rotate(90deg); }

/* -------------------------------------------------------------------- opening */

/* opening.js schrijft zelf transform op .opening__kop en .opening__slot, dus
   die lagen worden niet met translateX gecentreerd maar met kantlijnen.
   De dubbele klasse is nodig omdat opening.css ná dit bestand komt en daar
   `inset: auto 0 0 0` staat. */
.opening .opening__kop,
.opening .opening__slot {
  bottom: clamp(4rem, 11svh, 7.5rem);
  padding-inline: max(1rem, calc((100% - var(--kop-breed)) / 2));
}
.opening-aan .opening__kop { will-change: transform, opacity; }

.opening__opmaat {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #fff;
  opacity: .78;
  margin: 0 0 1.1rem;
  padding-left: 3.25rem;
  position: relative;
}
.opening__opmaat::before {
  content: '';
  position: absolute;
  left: 0;
  top: .52em;
  width: 2.25rem;
  height: 2px;
  background: var(--rood);
}

.opening__titel {
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .92;
  font-size: clamp(2.5rem, 1.1rem + 6.4vw, 6rem);
  color: #fff;
  margin: 0;
  max-width: 14ch;
  text-wrap: balance;
}

.opening__regel {
  margin: 1.15rem 0 0;
  max-width: 44ch;
  color: rgba(255,255,255,.88);
  font-size: clamp(1rem, .95rem + .35vw, 1.15rem);
  line-height: 1.5;
}

.opening__knoppen {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.9rem;
}

.opening__slotregel {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1;
  font-size: clamp(2rem, 1rem + 4.6vw, 4.5rem);
  color: #fff;
}

.opening__raam [data-raam] {
  font-family: var(--display);
  font-weight: 900;
}

/* De kop van de opening staat op dezelfde kolom als de hoofdstukken erna. */
@media (min-width: 1000px) {
  .opening .opening__kop,
  .opening .opening__slot {
    padding-left: calc(max(1rem, (100% - var(--kop-breed)) / 2) + var(--rail));
  }
}

.opening__wenk {
  align-items: center;
  gap: .55rem;
  flex-direction: column;
}
.wenk__t {
  font-family: var(--mono);
  font-size: .62rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: rgba(255,255,255,.75);
}
.wenk__lijn {
  width: 1px;
  height: 2.25rem;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0));
}

/* ----------------------------------------------------------------- hoofdstuk */

.hfd { position: relative; scroll-margin-top: 4.5rem; }

.hfd--ink { background: var(--inkt); color: var(--tekst-licht); --lijn: var(--lijn-ink); }
.hfd--papier { background: var(--papier); color: #3b464e; --lijn: var(--lijn-papier); }
.hfd--papier .titel,
.hfd--papier .titel--xl { color: var(--tekst-donker); }
.hfd--papier .eyebrow { color: var(--rood-diep); }
.hfd--papier .nr { color: var(--staal-donker); }
.hfd--papier .tekstlink { color: var(--tekst-donker); border-bottom-color: var(--rood-diep); }
.hfd--papier .tekstlink:hover { color: var(--rood-diep); }

.hfd__in {
  width: min(100% - 2rem, calc(var(--kader) + 2 * var(--rail)));
  margin-inline: auto;
  padding: var(--ritme) 0;
  position: relative;
}

.hfd__kop { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }
.hfd__lead {
  margin-top: 1.25rem;
  max-width: 54ch;
  font-size: clamp(1.02rem, .98rem + .35vw, 1.2rem);
}

@media (min-width: 1000px) {
  .hfd__in { padding-left: var(--rail); }
  .hfd__in::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 1px;
    background: var(--lijn);
  }
  .hfd__in::after {
    content: '';
    position: absolute;
    left: 0; top: 0;
    width: 1px;
    height: 5.5rem;
    background: var(--rood);
  }
  .hfd__kop .nr {
    position: absolute;
    left: -3.4rem;
    top: 6.5rem;
    margin: 0;
    writing-mode: vertical-rl;
    letter-spacing: .3em;
    font-size: .72rem;
  }
  .hfd__kop { position: relative; }
}

/* ------------------------------------------------------------------ duo-blok */

.duo {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 860px) {
  .duo--intro { grid-template-columns: 1fr .92fr; }
}
.duo__tekst > p { max-width: 58ch; }
.duo__tekst .lead { margin-bottom: 1.3rem; }

figure { margin: 0; }

.duo__beeld img,
.rij__beeld img,
.camper__groot img,
.stalling__beeld img,
.occ__beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.duo__beeld { position: relative; }
.duo__beeld img { aspect-ratio: 4 / 3; }
.duo__beeld figcaption,
.camper__groot figcaption,
.occ__beeld figcaption {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  margin-top: .75rem;
  color: var(--staal);
}
.hfd--papier .duo__beeld figcaption,
.hfd--papier .camper__groot figcaption,
.hfd--papier .occ__beeld figcaption { color: var(--staal-donker); }

/* ------------------------------------------------------------------- kernen */

.kernen {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn);
  border-top: 1px solid var(--lijn);
  border-bottom: 1px solid var(--lijn);
}
@media (min-width: 760px) { .kernen { grid-template-columns: repeat(3, 1fr); } }
.kernen li {
  background: var(--inkt);
  padding: 1.75rem clamp(1rem, 2vw, 1.75rem) 1.9rem;
}
.kernen__nr {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .2em;
  color: var(--rood-licht);
  margin: 0 0 1.1rem;
}
.kernen__kop {
  font-size: 1.2rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--wit);
  margin: 0 0 .55rem;
}
.kernen__tekst { font-size: .95rem; margin: 0; }

/* --------------------------------------------------------------------- rijen */

.rij {
  display: grid;
  gap: clamp(1.5rem, 3.5vw, 3rem);
  align-items: center;
  margin-top: clamp(2.75rem, 6vw, 5rem);
}
@media (min-width: 860px) {
  .rij--beeldlinks { grid-template-columns: .95fr 1fr; }
  .rij--beeldrechts { grid-template-columns: 1fr .95fr; }
}
.rij__beeld img { aspect-ratio: 4 / 3; }
.rij--beeldrechts .rij__beeld img { aspect-ratio: 16 / 10; }
.rij__tekst > p { max-width: 52ch; }

/* ----------------------------------------------------------------- rode band */

.band {
  background: var(--rood-diep);
  color: #fff;
  position: relative;
}
.band__in {
  width: min(100% - 2rem, calc(var(--kader) + 2 * var(--rail)));
  margin-inline: auto;
  padding: clamp(3rem, 6vw, 4.75rem) 0;
  display: grid;
  gap: clamp(1.25rem, 3vw, 3rem);
  align-items: end;
}
@media (min-width: 900px) { .band__in { grid-template-columns: 1.35fr 1fr; } }
.band__zin {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .95;
  font-size: clamp(2.1rem, 1rem + 4.8vw, 4.6rem);
  text-wrap: balance;
}
.band__bij {
  margin: 0;
  font-family: var(--mono);
  font-size: .85rem;
  line-height: 1.75;
  color: rgba(255,255,255,.9);
  border-left: 2px solid rgba(255,255,255,.45);
  padding-left: 1.1rem;
  max-width: 38ch;
}

/* ------------------------------------------------------------- werkplaats 02 */

.werk {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: 1px;
  background: var(--lijn-papier);
  border-top: 1px solid var(--lijn-papier);
  border-bottom: 1px solid var(--lijn-papier);
}
@media (min-width: 900px) { .werk { grid-template-columns: 1fr 1fr; } }

.werk__blok {
  background: var(--papier);
  padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1.25rem, 2.5vw, 2.25rem) clamp(2rem, 3.5vw, 2.75rem);
}
@media (min-width: 900px) { .werk__blok--breed { grid-column: 1 / -1; } }
.werk__blok > p { max-width: 62ch; }
.werk__inleiding { max-width: 70ch; }

.werk__kolommen { display: grid; gap: clamp(1.25rem, 3vw, 2.5rem); }
@media (min-width: 760px) { .werk__kolommen { grid-template-columns: 1fr 1fr; } }
.werk__kolommen p { max-width: 55ch; }

.werk__cta { margin-top: 1.5rem; }

.lijst { margin: .5rem 0 0; padding: 0 0 0 1.1rem; }
.lijst li { margin-bottom: .45rem; }

.ticks {
  list-style: none;
  margin: 1.5rem 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  column-gap: clamp(1.5rem, 3vw, 3rem);
}
@media (min-width: 680px) { .ticks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px) { .ticks { grid-template-columns: repeat(3, 1fr); } }
.ticks li {
  position: relative;
  padding: .7rem 0 .7rem 1.6rem;
  border-top: 1px solid var(--lijn-papier);
  font-size: .95rem;
  line-height: 1.45;
  color: var(--tekst-donker);
}
.ticks li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.25rem;
  width: .55rem;
  height: 2px;
  background: var(--rood-diep);
}

.werk__blok--nota {
  background: var(--papier-3);
  display: grid;
  gap: .5rem clamp(1.5rem, 4vw, 3.5rem);
}
@media (min-width: 820px) {
  .werk__blok--nota { grid-template-columns: 22rem 1fr; align-items: start; }
  .werk__blok--nota .eyebrow { grid-column: 1; grid-row: 1; }
  .werk__blok--nota .titel { grid-column: 1; grid-row: 2; margin: 0; }
  .nota__tekst { grid-column: 2; grid-row: 1 / span 2; align-self: center; max-width: 62ch; }
}

/* --------------------------------------------------------------- chiptuning */

.hfd--tuning { background: var(--papier-2); }
.hfd--tuning .werk__blok { background: var(--papier-2); }

.uitleg {
  background: var(--inkt);
  color: var(--tekst-licht);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  border-top: 3px solid var(--rood);
}
.uitleg__kop {
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin: 0 0 1rem;
}
.uitleg p { font-size: .95rem; }

.cijfers {
  list-style: none;
  margin: clamp(2.5rem, 5vw, 4rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--lijn-papier);
}
@media (min-width: 780px) { .cijfers { grid-template-columns: repeat(3, 1fr); } }
.cijfers li {
  padding: 1.75rem 0 1.9rem;
  border-bottom: 1px solid var(--lijn-papier);
}
@media (min-width: 780px) {
  .cijfers li { padding-right: clamp(1rem, 2.5vw, 2.5rem); }
  .cijfers li + li { border-left: 1px solid var(--lijn-papier); padding-left: clamp(1rem, 2.5vw, 2.5rem); }
}
.cijfers__getal {
  margin: 0 0 .5rem;
  font-weight: 900;
  letter-spacing: -.045em;
  line-height: .92;
  font-size: clamp(2.4rem, 1.2rem + 3.6vw, 4rem);
  color: var(--rood-diep);
}
.cijfers__label {
  margin: 0;
  font-family: var(--mono);
  font-size: .8rem;
  line-height: 1.6;
  color: var(--staal-donker);
  max-width: 26ch;
}

.deel { margin-top: clamp(2.75rem, 5.5vw, 4.25rem); }
.deel .titel { margin-bottom: .6rem; }
.deel__bij { margin: 0; max-width: 56ch; font-size: .98rem; }

.voertuigen {
  list-style: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
@media (min-width: 620px) { .voertuigen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .voertuigen { grid-template-columns: repeat(4, 1fr); } }
.voertuigen img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.85) contrast(1.05);
}
.voertuigen figcaption {
  font-weight: 800;
  letter-spacing: -.02em;
  font-size: 1.05rem;
  color: var(--tekst-donker);
  margin-top: .85rem;
  padding-top: .7rem;
  border-top: 2px solid var(--rood-diep);
}
.voertuigen__tekst {
  margin: .7rem 0 0;
  font-size: .9rem;
  line-height: 1.55;
}

.methoden {
  margin-top: clamp(2.75rem, 5.5vw, 4.25rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
@media (min-width: 980px) { .methoden { grid-template-columns: .62fr 1fr; align-items: start; } }
.methoden__lijst { list-style: none; margin: 0; padding: 0; }
.methoden__lijst li {
  border-top: 1px solid var(--lijn-papier);
  padding: 1.15rem 0 1.25rem;
}
.methoden__lijst li:last-child { border-bottom: 1px solid var(--lijn-papier); }
.methoden__naam {
  margin: 0 0 .4rem;
  font-family: var(--mono);
  font-size: .85rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--rood-diep);
}
.methoden__tekst { margin: 0; font-size: .95rem; max-width: 70ch; }

.stappen {
  list-style: none;
  counter-reset: none;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: var(--lijn-papier);
  border-top: 1px solid var(--lijn-papier);
  border-bottom: 1px solid var(--lijn-papier);
}
@media (min-width: 700px) { .stappen { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .stappen { grid-template-columns: repeat(5, 1fr); } }
.stappen li {
  background: var(--papier-2);
  padding: 1.4rem clamp(.9rem, 1.6vw, 1.35rem) 1.6rem;
}
.stappen__nr {
  margin: 0 0 .9rem;
  font-family: var(--mono);
  font-size: .75rem;
  letter-spacing: .2em;
  color: var(--rood-diep);
}
.stappen__naam {
  margin: 0 0 .55rem;
  font-weight: 800;
  letter-spacing: -.018em;
  font-size: 1.02rem;
  line-height: 1.2;
  color: var(--tekst-donker);
}
.stappen__tekst { margin: 0; font-size: .875rem; line-height: 1.55; }

.offerte {
  margin-top: clamp(2.5rem, 5vw, 3.75rem);
  background: var(--inkt);
  color: var(--tekst-licht);
  padding: clamp(1.75rem, 4vw, 3rem);
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 900px) { .offerte { grid-template-columns: 1fr auto; } }
.offerte .titel { color: var(--wit); }
.offerte .eyebrow { color: var(--rood-licht); }
.offerte p { max-width: 62ch; }
.offerte .mini { color: var(--staal); }
.offerte__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }
.offerte .knop--donker { background: transparent; border-color: rgba(255,255,255,.4); }
.offerte .knop--donker:hover { background: var(--wit); color: var(--inkt); border-color: var(--wit); }

/* ------------------------------------------------------------------- campers */

.camper {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
}
@media (min-width: 880px) { .camper { grid-template-columns: 1.05fr .95fr; } }
.camper__groot img { aspect-ratio: 3 / 2; }
.camper__tekst > p { max-width: 50ch; }

.stalling {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
}
@media (min-width: 880px) {
  .stalling { grid-template-columns: 1.15fr .6fr .9fr; align-items: center; }
}
.stalling__beeld img { aspect-ratio: 3 / 2; }
.stalling__beeld--klein img { aspect-ratio: 3 / 4; }
.stalling__tekst > p { max-width: 42ch; }
.nota {
  border-left: 2px solid var(--rood-diep);
  padding-left: 1rem;
  font-size: .92rem;
  color: var(--tekst-donker);
}

/* ----------------------------------------------------------------- occasions */

.hfd--occasions { background: var(--papier); }
.occ {
  display: grid;
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: start;
}
@media (min-width: 880px) { .occ { grid-template-columns: .92fr 1.08fr; } }
.occ__tekst > p { max-width: 48ch; }
.occ__beeld img { aspect-ratio: 1 / 1; }

@media (min-width: 880px) {
  .occ__beeld {
    position: relative;
    z-index: 2;
    margin-bottom: clamp(-7rem, -6vw, -3.5rem);
  }
  .hfd--historie .hfd__in { padding-top: calc(var(--ritme) + 4.5rem); }
}

/* ------------------------------------------------------------------ historie */

.hfd--historie { background: var(--inkt); }

.archief {
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
  margin-top: clamp(1rem, 2vw, 1.5rem);
}
@media (min-width: 560px) { .archief { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .archief { grid-template-columns: repeat(5, 1fr); } }

.archief__kaart {
  background: #ecebe6;
  padding: .6rem .6rem 0;
  box-shadow: 0 14px 34px rgba(0,0,0,.45);
  transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.archief__kaart img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  filter: saturate(.78) contrast(1.02);
}
.archief__kaart--portret img { object-position: 50% 30%; }
.archief__kaart figcaption {
  font-family: var(--mono);
  font-size: .66rem;
  line-height: 1.5;
  letter-spacing: .02em;
  color: #3f4850;
  padding: .7rem .2rem .85rem;
}
@media (min-width: 900px) {
  .archief__kaart:nth-child(odd) { transform: rotate(-1.4deg); }
  .archief__kaart:nth-child(even) { transform: rotate(1.1deg) translateY(1.25rem); }
  .archief__kaart:hover { transform: rotate(0) translateY(-6px); }
}

.tijdlijn {
  list-style: none;
  margin: clamp(2.75rem, 5.5vw, 4.5rem) 0 0;
  padding: 0;
  border-top: 1px solid var(--lijn-ink);
}
.tijdlijn li {
  display: grid;
  gap: .35rem 2rem;
  padding: 1.15rem 0 1.3rem;
  border-bottom: 1px solid var(--lijn-ink);
  position: relative;
}
@media (min-width: 760px) { .tijdlijn li { grid-template-columns: 12rem 1fr; gap: 0 3rem; } }
.tijdlijn__jaar {
  margin: 0;
  font-family: var(--mono);
  font-size: .95rem;
  letter-spacing: .08em;
  color: var(--rood-licht);
}
.tijdlijn__tekst { margin: 0; max-width: 68ch; }

.slotzin {
  margin: clamp(2.25rem, 4.5vw, 3.25rem) 0 0;
  max-width: 46ch;
  font-size: clamp(1.1rem, 1rem + .6vw, 1.45rem);
  line-height: 1.4;
  font-weight: 500;
  letter-spacing: -.015em;
  color: var(--wit);
  border-left: 2px solid var(--rood);
  padding-left: clamp(1rem, 2vw, 1.6rem);
}

/* ---------------------------------------------------------------------- team */

.hfd--team { background: var(--inkt-2); }

.team {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(1rem, 2.2vw, 1.75rem);
}
@media (min-width: 560px) { .team { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 940px) { .team { grid-template-columns: repeat(4, 1fr); } }
.team img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: 50% 22%;
  filter: grayscale(1) contrast(1.05);
  transition: filter .45s ease;
}
.team li:hover img { filter: grayscale(0) contrast(1); }
.team figcaption {
  margin-top: .85rem;
  padding-top: .65rem;
  border-top: 1px solid var(--lijn-ink);
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--wit);
}

.kantoor {
  list-style: none;
  margin: clamp(2rem, 4vw, 3rem) 0 0;
  padding: 0;
  display: grid;
  gap: 0;
  border-top: 1px solid var(--lijn-ink);
}
@media (min-width: 700px) { .kantoor { grid-template-columns: repeat(2, 1fr); } }
.kantoor li {
  padding: 1.1rem 0 1.2rem;
  border-bottom: 1px solid var(--lijn-ink);
}
@media (min-width: 700px) {
  .kantoor li + li { border-left: 1px solid var(--lijn-ink); padding-left: 2rem; }
}
.kantoor__naam {
  margin: 0 0 .25rem;
  font-weight: 800;
  letter-spacing: -.018em;
  color: var(--wit);
}
.kantoor__rol {
  margin: 0;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--staal);
}

/* ------------------------------------------------------------------- galerij */

.galerij {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(.75rem, 1.6vw, 1.25rem);
}
@media (min-width: 620px) { .galerij { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .galerij { grid-template-columns: repeat(6, 1fr); } }
@media (min-width: 1000px) {
  .galerij__item { grid-column: span 2; }
  .galerij__item--breed { grid-column: span 3; }
  .galerij__item:nth-child(2) { grid-column: span 3; }
}

.galerij__knop {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  border: 0;
  background: var(--inkt-3);
  cursor: pointer;
  overflow: hidden;
  color: #fff;
  text-align: left;
}
.galerij__knop img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .6s cubic-bezier(.22,.61,.36,1), opacity .4s ease;
}
.galerij__item--breed .galerij__knop img { aspect-ratio: 16 / 10; }
.galerij__knop::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(13,18,22,.85) 0%, rgba(13,18,22,0) 55%);
  opacity: .9;
  transition: opacity .35s ease;
}
.galerij__knop:hover img { transform: scale(1.045); }
.galerij__knop:hover::after { opacity: 1; }
.galerij__bij {
  position: absolute;
  left: 1rem;
  right: 1rem;
  bottom: .9rem;
  z-index: 2;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .06em;
  line-height: 1.4;
}

/* ------------------------------------------------------------------- contact */

.hfd--contact { background: var(--inkt); }

.contact {
  display: grid;
  gap: 1px;
  background: var(--lijn-ink);
  border-top: 1px solid var(--lijn-ink);
  border-bottom: 1px solid var(--lijn-ink);
}
@media (min-width: 640px) { .contact { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .contact { grid-template-columns: repeat(4, 1fr); } }

.contact__blok {
  background: var(--inkt);
  padding: 1.6rem clamp(1rem, 2vw, 1.75rem) 1.9rem;
}
.contact__label {
  font-family: var(--mono);
  font-size: .7rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin: 0 0 1.1rem;
}
.contact__label--tweede { margin-top: 1.6rem; }
.contact__regel {
  margin: 0 0 .2rem;
  font-size: 1.08rem;
  font-weight: 600;
  letter-spacing: -.015em;
  color: var(--wit);
}
.contact__regel--s { font-size: .95rem; word-break: break-word; }
.contact__regel--link {
  display: block;
  text-decoration: none;
  width: fit-content;
  border-bottom: 1px solid rgba(255,255,255,.18);
  transition: border-color .2s ease, color .2s ease;
}
.contact__regel--link:hover { color: var(--rood-licht); border-bottom-color: var(--rood-licht); }
.contact__klein {
  margin: 0 0 1.1rem;
  font-family: var(--mono);
  font-size: .72rem;
  line-height: 1.5;
  letter-spacing: .04em;
  color: var(--staal);
}
.contact__klein:last-child { margin-bottom: 0; }

.tijden { margin: 0; }
.tijden dt {
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--staal);
  margin-bottom: .15rem;
}
.tijden dd {
  margin: 0 0 .85rem;
  font-weight: 600;
  color: var(--wit);
  letter-spacing: -.01em;
}
.feest { list-style: none; margin: 0; padding: 0; }
.feest li {
  font-size: .9rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(255,255,255,.08);
}
.feest li:last-child { border-bottom: 0; }

.laatstecta {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  display: grid;
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: center;
}
@media (min-width: 880px) { .laatstecta { grid-template-columns: 1fr auto; } }
.laatstecta__zin {
  margin: 0;
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: .98;
  font-size: clamp(1.9rem, 1.1rem + 3.2vw, 3.4rem);
  color: var(--wit);
}
.laatstecta__knoppen { display: flex; flex-wrap: wrap; gap: .75rem; }

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

.voet {
  background: #090d10;
  color: var(--tekst-licht);
  border-top: 1px solid rgba(255,255,255,.1);
}
.voet__in {
  width: min(100% - 2rem, calc(var(--kader) + 2 * var(--rail)));
  margin-inline: auto;
  padding: clamp(2.5rem, 5vw, 3.75rem) 0 clamp(1.75rem, 3vw, 2.5rem);
  display: grid;
  gap: clamp(1.75rem, 3.5vw, 3rem);
}
@media (min-width: 760px) { .voet__in { grid-template-columns: 1.2fr 1fr 1fr 1.2fr; } }

.voet__merk { align-self: start; }
.voet__logo {
  background: #fff;
  padding: 1rem 1.15rem;
  width: 100%;
  max-width: 17rem;
  height: auto;
}

.voet__label {
  font-family: var(--mono);
  font-size: .68rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin: 0 0 .9rem;
}
.voet__label--tweede { margin-top: 1.6rem; }
.voet__regel { margin: 0 0 .4rem; font-size: .95rem; }
.voet__regel--link {
  display: block;
  width: fit-content;
  text-decoration: none;
  transition: color .2s ease;
}
.voet__regel--link:hover { color: var(--rood-licht); }
.voet__klein {
  margin: 0;
  font-size: .82rem;
  line-height: 1.6;
  color: var(--staal);
  max-width: 36ch;
}
.voet__slot {
  width: min(100% - 2rem, calc(var(--kader) + 2 * var(--rail)));
  margin: 0 auto;
  padding: 1.1rem 0 1.6rem;
  border-top: 1px solid rgba(255,255,255,.1);
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .08em;
  color: var(--staal);
}

/* ---------------------------------------------------------------- lichtbak */

.lichtbak {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(9,13,16,.96);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
}
.lichtbak[hidden] { display: none; }
.lichtbak__fig { max-width: min(96vw, 1180px); }
.lichtbak__fig img {
  width: 100%;
  max-height: 80svh;
  object-fit: contain;
}
.lichtbak__fig figcaption {
  margin-top: .9rem;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--staal);
}
.lichtbak__sluit {
  position: absolute;
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  background: none;
  border: 1px solid rgba(255,255,255,.3);
  color: #fff;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease;
}
.lichtbak__sluit svg { width: 1.1rem; height: 1.1rem; }
.lichtbak__sluit:hover { background: var(--rood); border-color: var(--rood); }

body.geenscroll { overflow: hidden; }

/* ----------------------------------------------------------------- onthullen */

html.js [data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1);
}
html.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* -------------------------------------------------------------- smalle maten */

@media (max-width: 999px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    background: rgba(13,18,22,.98);
    backdrop-filter: blur(10px);
    border-top: 1px solid rgba(255,255,255,.1);
    border-bottom: 1px solid rgba(255,255,255,.1);
    padding: .5rem 1rem 1rem;
    display: none;
  }
  .nav.is-open { display: flex; }
  .nav a { padding: .8rem 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 1rem; }
  .nav a:last-child { border-bottom: 0; }
  .nav a::after { display: none; }
  .hamburger { display: inline-flex; margin-left: auto; }
  .kop__in { position: relative; }
}

@media (max-width: 760px) {
  .kop__beltekst { display: none; }
  .kop__bel { padding: .6rem .7rem; }
  .kop__bel svg { width: 1.1em; height: 1.1em; }
}

@media (max-width: 560px) {
  .opening__titel { max-width: 100%; }
  .opening__knoppen .knop { flex: 1 1 100%; justify-content: center; }
  .archief__kaart { box-shadow: 0 8px 20px rgba(0,0,0,.4); }
}

/* ------------------------------------------------------- minder beweging aan */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.js [data-reveal],
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}