/* ===========================================================================
   Tattoo Polka, Rotterdam
   Richting: "inkt en marmer". Het werk van de studio is zwart-grijs realisme
   van klassieke beeldhouwkunst en fijn lijnwerk; daar hoort een neoklassieke
   didone bij op diep inktzwart, met één signaalrood dat letterlijk uit het
   portfolio komt (de rode verfstreep achter het beeldwerk).
   Terugkerend motief: het stippelraster (polka / dotwork), dat door elke band
   doorloopt, plus een rode haarlijn.
   =========================================================================== */

:root {
  --inkt:        #0c0c0d;
  --inkt-op:     #141416;
  --inkt-diep:   #070708;
  --been:        #ece6dc;
  --been-vlak:   #e7e0d4;
  --been-donker: #15120f;
  --grijs:       #9c968d;
  --grijs-licht: #b7b1a8;
  --rood:        #d6372a;
  --rood-licht:  #e8584a;
  --rood-diep:   #b32a1f;
  --lijn:        rgba(236, 230, 220, .14);
  --lijn-donker: rgba(21, 18, 15, .16);

  --kopletter: Didot, "Bodoni MT", "Hoefler Text", "Noto Serif Display", Georgia, "Times New Roman", serif;
  --tekstletter: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --breed: 1280px;
  --kant: clamp(1.25rem, 5vw, 4rem);
  --gat: clamp(1rem, 2.2vw, 2.1rem);
  --band: clamp(4.25rem, 8.5vw, 7.5rem);

  --stip: radial-gradient(circle at center, rgba(236, 230, 220, .13) 1px, transparent 1.2px);
  --stip-donker: radial-gradient(circle at center, rgba(21, 18, 15, .16) 1px, transparent 1.2px);
  --stipmaat: 16px 16px;

  /* knoppen van de opening */
  --opening-achtergrond: #0c0c0d;
  --opening-demping: .66;
}

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

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--inkt);
  color: var(--been);
  font-family: var(--tekstletter);
  font-size: clamp(1rem, .96rem + .2vw, 1.075rem);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

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

h1, h2, h3 { font-family: var(--kopletter); font-weight: 700; margin: 0; }

p { margin: 0; }

a { color: inherit; }

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

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

.omhulsel {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: var(--kant);
}

main > section[id],
.welkom, .diensten, .werk, .werkwijze, .contact { scroll-margin-top: 5rem; }

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

/* ---- herhaalde onderdelen ---------------------------------------------- */

.label {
  margin: 0 0 1.1rem;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--grijs-licht);
}
.label--licht { color: var(--grijs-licht); }
.label--donker { color: #5e574e; }

.sectiekop {
  font-size: clamp(2.3rem, 5.6vw, 4.1rem);
  line-height: 1.02;
  letter-spacing: -.015em;
  font-weight: 700;
}

.lead {
  margin-top: 1.4rem;
  font-size: clamp(1.08rem, 1rem + .45vw, 1.3rem);
  line-height: 1.55;
  color: var(--been);
  max-width: 46ch;
}
.lead--kort { max-width: 38ch; }

.tekst {
  margin-top: 1.1rem;
  color: var(--grijs-licht);
  max-width: 52ch;
}

.knop {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  padding: .92rem 1.6rem;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: var(--tekstletter);
  font-size: .95rem;
  font-weight: 600;
  letter-spacing: .02em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease;
}
.knop--rood {
  background: var(--rood);
  color: #fff;
}
.knop--rood:hover { background: var(--rood-diep); transform: translateY(-2px); }
.knop--rand {
  border-color: rgba(236, 230, 220, .42);
  color: var(--been);
  background: rgba(12, 12, 13, .25);
  backdrop-filter: blur(4px);
}
.knop--rand:hover { border-color: var(--been); background: rgba(236, 230, 220, .12); transform: translateY(-2px); }
.knop--vol { width: 100%; padding-block: 1.05rem; }

.tekstlink {
  display: inline-block;
  margin-top: 1rem;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--been);
  padding-bottom: .25rem;
  border-bottom: 1px solid var(--rood);
  transition: color .22s ease, border-color .22s ease, letter-spacing .22s ease;
}
.tekstlink:hover { color: var(--rood); letter-spacing: .07em; }

.beeld {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--inkt-diep);
}
.beeld img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(var(--zoom, 1));
  transition: transform 1.1s cubic-bezier(.2, .7, .2, 1);
}
.beeld:hover img { transform: scale(calc(var(--zoom, 1) * 1.035)); }
.beeld figcaption {
  margin-top: .85rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grijs);
}

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

.kop {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 40;
  background: linear-gradient(180deg, rgba(7, 7, 8, .62) 0%, rgba(7, 7, 8, 0) 100%);
  transition: background-color .35s ease, border-color .35s ease;
  border-bottom: 1px solid transparent;
}
.kop--vast {
  background: rgba(12, 12, 13, .9);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--lijn);
}

.kop__binnen {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding: 1.05rem var(--kant);
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.merk {
  position: relative;
  font-family: var(--kopletter);
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .01em;
  text-decoration: none;
  color: var(--been);
  padding-left: 1.1rem;
  white-space: nowrap;
}
.merk::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: .52rem;
  height: .52rem;
  margin-top: -.26rem;
  border-radius: 50%;
  background: var(--rood);
}

.kop__nav {
  margin-left: auto;
  display: flex;
  gap: clamp(1rem, 2.2vw, 2rem);
}
.kop__nav a {
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--grijs-licht);
  padding: .25rem 0;
  border-bottom: 1px solid transparent;
  transition: color .22s ease, border-color .22s ease;
}
.kop__nav a:hover,
.kop__nav a.is-actief { color: var(--been); border-bottom-color: var(--rood); }

.kop__knop { padding: .68rem 1.25rem; font-size: .85rem; }

.kop__schakel {
  display: none;
  margin-left: auto;
  width: 2.6rem;
  height: 2.6rem;
  background: none;
  border: 1px solid var(--lijn);
  border-radius: 50%;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .32rem;
}
.kop__streep {
  display: block;
  width: 1.05rem;
  height: 1.5px;
  background: var(--been);
  transition: transform .25s ease, opacity .25s ease;
}
.kop__schakel[aria-expanded="true"] .kop__streep:first-child { transform: translateY(4px) rotate(45deg); }
.kop__schakel[aria-expanded="true"] .kop__streep:last-child { transform: translateY(-4px) rotate(-45deg); }

/* =========================================================================
   OPENING: kop, knoppen, slotregel, wenk
   ========================================================================= */

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

.opening__kop {
  padding: 0 var(--kant) clamp(3.5rem, 9svh, 6rem);
}
.opening__kopbinnen {
  width: 100%;
  max-width: var(--breed);
  margin: 0 auto;
  padding-inline: 0;
}

.opening__opmaat {
  margin: 0 0 1.1rem;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
  color: rgba(236, 230, 220, .78);
}

.opening__titel {
  margin: 0;
  max-width: 15ch;
  font-size: clamp(2.6rem, 7.2vw, 6rem);
  line-height: .98;
  letter-spacing: -.02em;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 36px rgba(0, 0, 0, .45);
}

.opening__lead {
  margin: 1.2rem 0 0;
  max-width: 40ch;
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  color: rgba(236, 230, 220, .88);
}

.opening__knoppen {
  margin-top: clamp(1.6rem, 3.5svh, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}

.opening__slot {
  padding: 0 var(--kant) clamp(4rem, 11svh, 7rem);
  text-align: center;
}
.opening__slotregel {
  margin: 0;
  font-family: var(--kopletter);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.6rem, 5vw, 3.4rem);
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}

.opening__wenk {
  align-items: center;
  gap: .7rem;
  flex-direction: column;
}
.wenk__woord {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: rgba(236, 230, 220, .72);
}
.wenk__lijn {
  display: block;
  width: 1px;
  height: 2.6rem;
  background: linear-gradient(180deg, rgba(236, 230, 220, .7), rgba(236, 230, 220, 0));
}

/* =========================================================================
   WELKOM
   ========================================================================= */

.welkom {
  position: relative;
  padding-block: clamp(3.5rem, 7vw, 6rem) 0;
  background:
    var(--stip) 0 0 / var(--stipmaat),
    linear-gradient(180deg, var(--inkt) 0%, var(--inkt) 65%, var(--inkt-op) 100%);
}

.welkom__raster {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: var(--gat);
  align-items: start;
}

.welkom__tekst { grid-column: 1 / 7; }

.welkom__kop {
  font-size: clamp(2.2rem, 4.6vw, 3.5rem);
  line-height: 1.04;
  letter-spacing: -.015em;
}

.merkenlijst {
  margin: 2.2rem 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.merkenlijst li {
  padding: .42rem .95rem;
  border: 1px solid var(--lijn);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grijs-licht);
}

/* De fotokolom loopt over de volle hoogte van de tekst door en steekt onder
   de sectie uit, zodat welkom en diensten in elkaar overlopen. */
.welkom__beeld {
  grid-column: 8 / 13;
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 3;
  margin: 0 0 calc(-1 * clamp(2.5rem, 6vw, 5.5rem));
}
.welkom__beeld figcaption {
  margin: 0 0 .85rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grijs);
}
.welkom__kader {
  display: block;
  flex: 1 1 auto;
  min-height: clamp(20rem, 38vw, 32rem);
}
.welkom__kader img { object-position: 50% 30%; }

.welkom__pull {
  grid-column: 1 / 7;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding-top: clamp(1.5rem, 3vw, 2.2rem);
  border-top: 2px solid var(--rood);
}
.pull {
  margin: 0;
  font-family: var(--kopletter);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.7rem, 3.6vw, 2.9rem);
  line-height: 1.12;
  color: var(--been);
}
.pull__onder {
  margin-top: .9rem;
  color: var(--grijs);
  max-width: 40ch;
  font-size: .98rem;
}

/* =========================================================================
   DIENSTEN
   ========================================================================= */

.diensten {
  position: relative;
  padding-block: var(--band);
  background:
    var(--stip) 0 0 / var(--stipmaat),
    linear-gradient(180deg, var(--inkt-op) 0%, var(--inkt-op) 70%, var(--inkt-diep) 100%);
}

.diensten__intro {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: end;
}
.diensten__hoofd { max-width: 54rem; }

.diensten__beeld { margin: 0; aspect-ratio: 4 / 3; }
.diensten__beeld img { object-position: 38% 58%; }
.diensten__beeld figcaption {
  margin-top: .85rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grijs);
}

/* Tijdelijk motief in plaats van een foto die nog niet beschikbaar is:
   zelfde stippelraster en inktzwart als de rest van de site. */
.plekhouder {
  display: flex;
  flex-direction: column;
  margin: 0;
}
.plekhouder__motief {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 8rem;
  background: var(--stip) 0 0 / var(--stipmaat), var(--inkt-diep);
  border: 1px solid var(--lijn);
  font-family: var(--kopletter);
  font-weight: 700;
  font-size: clamp(5rem, 13vw, 9rem);
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 230, 220, .3);
}
.plekhouder--licht .plekhouder__motief {
  background: var(--stip-donker) 0 0 / var(--stipmaat), var(--been-vlak);
  border-color: var(--lijn-donker);
  -webkit-text-stroke: 1px rgba(21, 18, 15, .34);
}

@media (max-width: 760px) {
  .diensten__intro { grid-template-columns: 1fr; }
  .diensten__beeld { max-width: 26rem; }
}

.diensten__raster {
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: 1.08fr .94fr 1fr;
  gap: clamp(1.5rem, 3.5vw, 3.2rem);
}

.dienst {
  position: relative;
  padding-top: 1.6rem;
  border-top: 1px solid var(--lijn);
}
.dienst--b { margin-top: clamp(0rem, 3.5vw, 3.4rem); }
.dienst--c { margin-top: clamp(0rem, 1.8vw, 1.7rem); }

.dienst::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 3.2rem;
  height: 2px;
  background: var(--rood);
  transition: width .4s cubic-bezier(.2, .7, .2, 1);
}
.dienst:hover::before { width: 100%; }

.dienst__index {
  font-family: var(--kopletter);
  font-size: clamp(2.6rem, 5vw, 4rem);
  font-weight: 700;
  line-height: 1;
  color: transparent;
  -webkit-text-stroke: 1px rgba(236, 230, 220, .32);
}

.dienst__kop {
  margin-top: .7rem;
  font-size: clamp(1.45rem, 2.4vw, 1.95rem);
  line-height: 1.1;
  letter-spacing: -.01em;
}

.dienst__kern {
  margin-top: .85rem;
  font-size: 1rem;
  color: var(--been);
}

.dienst__tekst {
  margin-top: .9rem;
  color: var(--grijs);
  font-size: .97rem;
}

/* =========================================================================
   WERK
   ========================================================================= */

.werk {
  position: relative;
  padding-block: var(--band) 0;
  background: var(--inkt-diep);
}
.werk::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 42%;
  background: var(--stip) 0 0 / var(--stipmaat);
  opacity: .55;
  pointer-events: none;
}
.werk > .omhulsel { position: relative; z-index: 1; }

.werk__hoofd { max-width: 50rem; }

.werk__raster {
  margin-top: clamp(2.8rem, 6vw, 4.5rem);
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: clamp(2rem, 4vw, 3.5rem) var(--gat);
  align-items: start;
}

/* Het grote werk vult de volle hoogte van de rechterkolom, zodat de twee
   kolommen op dezelfde voet eindigen in plaats van ragged uit te lopen. */
.werk__a {
  grid-column: 1 / 8;
  grid-row: 1 / 3;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  margin: 0;
}
.werk__a figcaption {
  margin-top: .85rem;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grijs);
}
.werk__kader {
  display: block;
  flex: 1 1 auto;
  min-height: clamp(22rem, 46vw, 40rem);
}
/* Deze foto heeft veel zwarte achtergrond rond de arm; flink inzoomen en naar
   het medaillon met het gezicht schuiven, zodat de tattoo het kader vult in
   plaats van een donkere vlakte. */
.werk__kader img { object-position: 46% 16%; --zoom: 2; transform-origin: 46% 16%; }

.werk__tekst {
  grid-column: 9 / 13;
  grid-row: 1;
  margin-top: clamp(1.5rem, 4vw, 3.5rem);
  padding-top: 1.4rem;
  border-top: 2px solid var(--rood);
}

.werk__b { grid-column: 9 / 13; grid-row: 2; align-self: end; }
.werk__b img { aspect-ratio: 3 / 4; object-position: 50% 34%; }

/* Expliciete aspect-ratio op het figure-element zelf (niet alleen op de
   afbeelding), zodat de maat nooit afhangt van de hoogte van de grid-rij. */
.werk__c { grid-column: 1 / 6; grid-row: 3; min-height: clamp(16rem, 26vw, 24rem); }
.werk__c img { aspect-ratio: 1 / 1; object-position: 50% 40%; --zoom: 1.2; }

.werk__tekst--twee {
  grid-column: 7 / 12;
  grid-row: 3;
  align-self: center;
  margin-top: 0;
}

.werk__subkop {
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  line-height: 1.12;
}

/* ---- de volle band, het full-bleed moment ------------------------------- */

.band {
  position: relative;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  min-height: clamp(19rem, 36vw, 28rem);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.band__foto {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 46% 34%;
}
.band__demping {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(7, 7, 8, .45) 0%, rgba(7, 7, 8, .12) 32%, rgba(7, 7, 8, .9) 100%);
}
/* Tijdelijk: full-bleed moment zonder foto, met dezelfde rode gloed en
   stippeltextuur als de rest van de site. */
.band--vlak {
  background:
    var(--stip) 0 0 / var(--stipmaat),
    radial-gradient(120% 140% at 15% 100%, rgba(214, 55, 42, .32) 0%, transparent 55%),
    var(--inkt-diep);
}
.band__tekst {
  position: relative;
  z-index: 1;
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
.band__regel {
  font-family: var(--kopletter);
  font-style: italic;
  font-weight: 500;
  font-size: clamp(1.5rem, 3.4vw, 2.7rem);
  line-height: 1.14;
  max-width: 22ch;
  color: #fff;
  margin-bottom: 1.6rem;
  text-shadow: 0 2px 28px rgba(0, 0, 0, .5);
}

/* =========================================================================
   WERKWIJZE + VRAGEN  (het lichte, omgekeerde moment)
   ========================================================================= */

.werkwijze {
  position: relative;
  padding-block: var(--band);
  background:
    var(--stip-donker) 0 0 / var(--stipmaat),
    var(--been-vlak);
  color: var(--been-donker);
}

.werkwijze .sectiekop { color: var(--been-donker); }
.werkwijze .lead { color: #3b342c; }

.werkwijze__hoofd { max-width: 46rem; }

.stappen {
  margin: clamp(2.5rem, 5.5vw, 4rem) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(1.25rem, 2.5vw, 2.4rem);
}

.stap {
  position: relative;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(21, 18, 15, .25);
}
.stap::before {
  content: "";
  position: absolute;
  top: -2px;
  left: 0;
  width: 2.4rem;
  height: 3px;
  background: var(--rood);
}

.stap__nr {
  font-family: var(--kopletter);
  font-weight: 700;
  font-size: 1.05rem;
  letter-spacing: .1em;
  color: var(--rood-diep);
}
.stap__kop {
  margin-top: .35rem;
  font-size: clamp(1.3rem, 2vw, 1.65rem);
  line-height: 1.12;
}
.stap__tekst {
  margin-top: .7rem;
  font-size: .95rem;
  color: #463e35;
}

.vragen {
  margin-top: clamp(3.5rem, 7vw, 5.5rem);
  display: grid;
  grid-template-columns: 1fr 1.45fr;
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: start;
}
.vragen__titel {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  line-height: 1.08;
}
.vragen__onder {
  margin-top: .8rem;
  color: #574e44;
  font-size: .95rem;
  max-width: 28ch;
}
.vragen__beeld { margin-top: 1.9rem; aspect-ratio: 4 / 3; max-width: 22rem; }

.vraag {
  border-top: 1px solid rgba(21, 18, 15, .22);
}
.vraag:last-child { border-bottom: 1px solid rgba(21, 18, 15, .22); }

.vraag summary {
  list-style: none;
  cursor: pointer;
  padding: 1.15rem 2.6rem 1.15rem 0;
  position: relative;
  font-family: var(--kopletter);
  font-size: clamp(1.05rem, 1.6vw, 1.28rem);
  font-weight: 700;
  line-height: 1.3;
  color: var(--been-donker);
}
.vraag summary::-webkit-details-marker { display: none; }
.vraag summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 1.65rem;
  width: .85rem;
  height: .85rem;
  border-right: 2px solid var(--rood);
  border-bottom: 2px solid var(--rood);
  transform: rotate(45deg);
  transition: transform .3s ease;
}
.vraag[open] summary::after { transform: rotate(-135deg); top: 1.9rem; }
.vraag__antwoord {
  padding: 0 clamp(1rem, 6vw, 5rem) 1.5rem 0;
  color: #463e35;
  font-size: .97rem;
  max-width: 60ch;
}

/* =========================================================================
   CONTACT
   ========================================================================= */

.contact {
  position: relative;
  padding-top: var(--band);
  background:
    var(--stip) 0 0 / var(--stipmaat),
    linear-gradient(180deg, var(--inkt) 0%, var(--inkt-diep) 100%);
}

.contact__raster {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}

.locatie {
  margin-top: clamp(2rem, 4vw, 2.8rem);
  padding-top: 1.3rem;
  border-top: 1px solid var(--lijn);
}
.locatie__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--rood-licht);
  margin-bottom: .7rem;
}
.locatie__naam {
  font-family: var(--kopletter);
  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.2;
}
.locatie__regel { color: var(--grijs-licht); }

.formulier {
  background: rgba(236, 230, 220, .045);
  border: 1px solid var(--lijn);
  padding: clamp(1.5rem, 3vw, 2.4rem);
}
.formulier__kop {
  font-family: var(--kopletter);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.15;
  margin-bottom: 1.5rem;
}

.veld { margin-bottom: 1.1rem; }
.veld label {
  display: block;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grijs-licht);
  margin-bottom: .45rem;
}
.veld input,
.veld select,
.veld textarea {
  width: 100%;
  padding: .8rem .9rem;
  background: rgba(7, 7, 8, .6);
  border: 1px solid var(--lijn);
  border-radius: 0;
  color: var(--been);
  font-family: var(--tekstletter);
  font-size: .98rem;
  transition: border-color .22s ease, background-color .22s ease;
}
.veld textarea { resize: vertical; min-height: 6rem; }
.veld input::placeholder,
.veld textarea::placeholder { color: #7d776f; }
.veld input:focus,
.veld select:focus,
.veld textarea:focus {
  border-color: var(--rood);
  background: rgba(7, 7, 8, .9);
  outline: none;
}

.formulier__noot {
  margin-top: 1rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--grijs);
}
.formulier__melding {
  margin-top: .9rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--rood);
  background: rgba(214, 55, 42, .12);
  font-size: .9rem;
  color: var(--been);
}

.contact__beeld {
  margin-top: clamp(3rem, 7vw, 5.5rem);
  width: 100%;
}
.contact__beeld img {
  aspect-ratio: 21 / 7;
  object-position: 50% 48%;
  filter: grayscale(.25) contrast(1.05);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 1) 55%, rgba(0, 0, 0, 0) 100%);
}

/* =========================================================================
   VOET
   ========================================================================= */

.voet {
  background: var(--inkt-diep);
  padding-block: clamp(3rem, 6vw, 4.5rem) 2.5rem;
  border-top: 1px solid var(--lijn);
}

.voet__raster {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: clamp(1.5rem, 3vw, 3rem);
  align-items: start;
}

.voet__merk {
  font-family: var(--kopletter);
  font-weight: 700;
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--been);
}

.voet__label {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--grijs);
  margin-bottom: .7rem;
}
.voet__regel { color: var(--grijs-licht); font-size: .95rem; }

.voet__blok { display: flex; flex-direction: column; align-items: flex-start; }
.voet__blok .tekstlink { margin-top: .75rem; }

.voet__slot {
  grid-column: 1 / -1;
  margin-top: clamp(2rem, 4vw, 3rem);
  padding-top: 1.5rem;
  border-top: 1px solid var(--lijn);
  font-family: var(--kopletter);
  font-style: italic;
  font-size: 1.05rem;
  color: var(--grijs);
}

/* =========================================================================
   ONTHULLEN
   ========================================================================= */

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

.js [data-reveal-group] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .7s cubic-bezier(.2, .7, .2, 1), transform .7s cubic-bezier(.2, .7, .2, 1);
  transition-delay: var(--vertraag, 0s);
}
.js [data-reveal-group].is-in > * { opacity: 1; transform: none; }

/* =========================================================================
   RESPONSIVE
   ========================================================================= */

@media (max-width: 1080px) {
  /* Smaller dan drie kolommen worden de diensten een redactionele lijst:
     het indexcijfer links, de tekst ernaast. */
  .diensten__raster { grid-template-columns: 1fr; gap: 0; }
  .dienst {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: clamp(1.25rem, 3vw, 2.5rem);
    padding-block: clamp(1.4rem, 3vw, 2.2rem);
    margin-top: 0;
    max-width: 44rem;
  }
  .dienst__index { grid-row: 1 / span 4; align-self: start; }
  .dienst__kop,
  .dienst__kern,
  .dienst__tekst,
  .dienst .tekstlink { grid-column: 2; }
  .dienst__kop { margin-top: 0; }

  .vragen { grid-template-columns: 1fr; }
  .voet__raster { grid-template-columns: 1fr 1fr 1fr; }
  .voet__merk { grid-column: 1 / -1; }
}

@media (max-width: 920px) {
  .kop__nav {
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    gap: 0;
    background: rgba(9, 9, 10, .97);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--lijn);
    padding: .5rem var(--kant) 1.5rem;
    display: none;
  }
  .kop__nav.is-open { display: flex; }
  .kop__nav a {
    padding: .9rem 0;
    border-bottom: 1px solid var(--lijn);
    font-size: .95rem;
  }
  .kop__knop { display: none; }
  .kop__schakel { display: flex; }
  .kop--vast,
  .kop:has(.kop__nav.is-open) {
    background: rgba(12, 12, 13, .92);
    backdrop-filter: blur(14px);
  }

  .welkom__raster { grid-template-columns: 1fr; }
  .welkom__tekst,
  .welkom__pull { grid-column: 1 / -1; }
  .welkom__beeld {
    grid-column: 1 / -1;
    grid-row: auto;
    order: 3;
    margin-bottom: calc(-1 * clamp(2rem, 6vw, 4rem));
    max-width: 32rem;
  }
  .welkom__kader { min-height: 0; }
  .welkom__kader img { aspect-ratio: 4 / 5; height: auto; }

  .werk__raster { grid-template-columns: repeat(6, 1fr); align-items: start; }
  .werk__a { grid-column: 1 / -1; grid-row: auto; }
  .werk__kader { min-height: 0; }
  .werk__kader img { aspect-ratio: 4 / 3; height: auto; }
  .werk__tekst { grid-column: 1 / 4; grid-row: auto; margin-top: 0; }
  .werk__b { grid-column: 4 / 7; grid-row: auto; align-self: start; }
  .werk__c { grid-column: 1 / 4; grid-row: auto; }
  .werk__tekst--twee { grid-column: 4 / 7; grid-row: auto; align-self: start; }

  .stappen { grid-template-columns: 1fr 1fr; }

  .contact__raster { grid-template-columns: 1fr; }
  .contact__beeld img { aspect-ratio: 16 / 9; }
}

@media (max-width: 620px) {
  :root { --stipmaat: 13px 13px; }

  .diensten__raster { gap: 0; }
  .dienst { display: block; max-width: none; }
  .dienst__index { font-size: 2.2rem; }

  .werk__raster { grid-template-columns: 1fr; }
  .werk__a, .werk__b, .werk__c,
  .werk__tekst, .werk__tekst--twee { grid-column: 1 / -1; }
  .werk__b img { aspect-ratio: 4 / 5; }
  .werk__kader img { aspect-ratio: 1 / 1; }
  .band__regel { max-width: none; }

  .stappen { grid-template-columns: 1fr; gap: 1.6rem; }

  .voet__raster { grid-template-columns: 1fr 1fr; }

  .opening__titel { font-size: clamp(2.1rem, 10vw, 3rem); }
  .opening__kop { padding-bottom: clamp(2.5rem, 7svh, 4rem); }
  .opening__knoppen .knop { flex: 1 1 100%; }
}

/* =========================================================================
   RUSTIGE BEWEGING
   ========================================================================= */

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