/* Grozlan Studios: website. Nog zonder huisstijl (komt met Falko): alleen de basis. */
:root {
  --bg: #111111;
  --vlak: #1b1b1b;
  --lijn: #2c2c2c;
  --tekst: #f2f2f0;
  --zacht: #a3a3a0;
  --accent: #f2f2f0;
  --breed: 1120px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--tekst);
  font: 17px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
a { color: inherit; }
img { display: block; max-width: 100%; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5em; font-weight: 700; letter-spacing: -.01em; }
h1 { font-size: clamp(40px, 8vw, 84px); }
h2 { font-size: clamp(26px, 4vw, 38px); }
h3 { font-size: 20px; }

/* kop */
.kop {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 14px max(16px, calc((100% - var(--breed)) / 2 + 16px)); background: rgba(17,17,17,.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--lijn);
}
.merk { font-weight: 800; text-decoration: none; letter-spacing: .02em; }
.kop nav { display: flex; align-items: center; gap: 18px; }
.kop nav a:not(.knop) { text-decoration: none; color: var(--zacht); }
.kop nav a:not(.knop):hover, .kop nav a[aria-current] { color: var(--tekst); }

/* knoppen */
.knoppen { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.knop {
  display: inline-block; padding: 13px 22px; border-radius: 999px; text-decoration: none; font-weight: 600;
  background: var(--accent); color: var(--bg); border: 1px solid var(--accent);
}
.knop.licht { background: transparent; color: var(--tekst); border-color: rgba(255,255,255,.45); }
.knop.klein { padding: 8px 16px; font-size: 15px; }
.knop:hover { opacity: .88; }

/* held */
.held {
  min-height: min(86vh, 760px); display: flex; align-items: flex-end; padding: 0 16px 56px;
  background: linear-gradient(to top, rgba(0,0,0,.85), rgba(0,0,0,.15) 65%), var(--foto) center / cover no-repeat, #222;
}
.held.laag { min-height: min(56vh, 480px); }
.held-tekst { width: 100%; max-width: var(--breed); margin: 0 auto; }
.held-tekst p { font-size: clamp(18px, 2.4vw, 22px); max-width: 34em; color: #e2e2df; margin: 0; }

/* blokken */
.blok { max-width: var(--breed); margin: 0 auto; padding: 64px 16px 8px; }
.intro { color: var(--zacht); max-width: 38em; font-size: 19px; margin: 0; }

.fotos { display: grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.fotos img { width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; background: var(--vlak); }
.fotos img:first-child { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
@media (min-width: 760px) {
  .fotos { grid-template-columns: 2fr 1fr 1fr; grid-template-rows: auto auto; }
  .fotos img:first-child { grid-column: 1; grid-row: 1 / 3; aspect-ratio: auto; }
}

.kenmerken { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
.kenmerken li { padding: 6px 14px; border: 1px solid var(--lijn); border-radius: 999px; color: var(--zacht); font-size: 15px; }

.stappen { list-style: none; counter-reset: s; padding: 0; margin: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .stappen { grid-template-columns: repeat(3, 1fr); } }
.stappen li { counter-increment: s; background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; padding: 20px; }
.stappen li::before { content: counter(s); display: block; font-size: 32px; font-weight: 800; color: var(--zacht); margin-bottom: 8px; }
.stappen b { display: block; margin-bottom: 4px; }
.stappen span { color: var(--zacht); font-size: 16px; }

/* diensten */
.groep { margin-top: 40px; }
.groep > h3 { color: var(--zacht); font-size: 14px; text-transform: uppercase; letter-spacing: .12em; margin-bottom: 14px; }
.kaarten { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .kaarten { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 980px) { .kaarten { grid-template-columns: repeat(3, 1fr); } }
.kaart { background: var(--vlak); border: 1px solid var(--lijn); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.kaart img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; background: #222; }
.kaart div { padding: 18px 20px 22px; }
.kaart h4 { margin: 0 0 6px; font-size: 19px; }
.kaart p { margin: 0; color: var(--zacht); font-size: 16px; }
.kaart small { display: block; margin-top: 12px; color: var(--tekst); font-size: 14px; opacity: .75; }

/* voet */
.voet {
  max-width: var(--breed); margin: 72px auto 0; padding: 28px 16px 40px; border-top: 1px solid var(--lijn);
  display: flex; flex-wrap: wrap; gap: 8px 24px; color: var(--zacht); font-size: 15px;
}
.voet span { margin-right: auto; color: var(--tekst); font-weight: 700; }
.voet a { text-decoration: none; }
.voet a:hover { color: var(--tekst); }