/* ============================================================
   WLS Techniek — editorial premium one-pager
   Paper white · black ink · monochrome
   Archivo / Inter / Space Grotesk
   ============================================================ */

@font-face { font-family: "Archivo"; font-style: normal; font-weight: 400 700; font-display: swap; src: url("fonts/archivo.woff2") format("woff2"); }
@font-face { font-family: "Archivo"; font-style: italic; font-weight: 400 700; font-display: swap; src: url("fonts/archivo-italic.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400 600; font-display: swap; src: url("fonts/inter.woff2") format("woff2"); }
@font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 300 700; font-display: swap; src: url("fonts/spacegrotesk.woff2") format("woff2"); }

:root {
  /* Paper — white base, subtle greys for layered surfaces */
  --ink:        #ffffff;   /* page surface */
  --ink-2:      #f7f7f5;
  --ink-3:      #f2f1ee;
  --ink-4:      #e9e8e4;

  /* Lines */
  --line:       rgba(10, 10, 11, 0.10);
  --line-2:     rgba(10, 10, 11, 0.20);
  --line-warm:  rgba(10, 10, 11, 0.32);

  --ivory:      #0a0a0b;   /* primary text — black ink */
  --muted:      #55534f;   /* AA on all paper layers */
  --muted-2:    #6d6a65;   /* AA for small text */
  --faint:      #6f6c66;   /* AA on paper */

  /* Ink accent — monochrome */
  --accent:     #0a0a0b;
  --accent-2:   #000000;
  --accent-deep:#6f6c66;
  --glow:       rgba(10, 10, 11, 0.22);

  /* Neutral secondary */
  --steel:      #2f2e2c;
  --steel-soft: rgba(10, 10, 11, 0.10);

  --f-display: "Archivo", system-ui, -apple-system, sans-serif;
  --f-body: "Inter", system-ui, sans-serif;
  --f-mono: "Space Grotesk", ui-monospace, monospace;

  --maxw: 1240px;
  --pad: clamp(1.25rem, 5vw, 5.5rem);
  --radius: 4px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-soft: cubic-bezier(0.16, 1, 0.3, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  background: var(--ink);
  color: var(--ivory);
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  overflow-wrap: break-word;
}
::selection { background: var(--accent); color: #ffffff; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

h1, h2, h3 {
  font-family: var(--f-display); font-weight: 600; line-height: 1.06;
  letter-spacing: -0.022em;
}
em { font-style: italic; color: var(--accent-2); }

/* Focus */
:focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 2px; }
:focus:not(:focus-visible) { outline: none; }

/* Skip link */
.skip-link {
  position: fixed; top: 0; left: 50%; transform: translate(-50%, -120%);
  z-index: 2000; background: var(--ivory); color: #ffffff; font-family: var(--f-mono);
  font-size: 0.85rem; padding: 0.7rem 1.2rem; border-radius: 0 0 4px 4px; transition: transform .2s var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0); }

/* Film grain */
.grain {
  position: fixed; inset: 0; z-index: 1000; pointer-events: none; opacity: 0.035; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll progress (GPU-composited) */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: linear-gradient(90deg, #9a9791, var(--accent-2) 55%, #2f2e2c);
  z-index: 1001; transition: transform 0.1s linear;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  font-family: var(--f-mono); font-weight: 500; font-size: 0.86rem;
  letter-spacing: 0.01em; padding: 0.95em 1.55em; border-radius: 2px;
  cursor: pointer; border: 1px solid transparent; white-space: nowrap;
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease);
}
.btn__arrow { transition: transform 0.35s var(--ease); }
.btn:hover .btn__arrow { transform: translateX(4px); }
.btn--solid { background: var(--ivory); color: #ffffff; box-shadow: 0 1px 0 rgba(10,10,11,0.12); }
.btn--solid:hover {
  background: var(--accent-2); transform: translateY(-1px);
  box-shadow: 0 10px 30px -12px var(--glow), inset 0 1px 0 rgba(255,255,255,0.18);
}
.btn--ghost { border-color: var(--line-2); color: var(--ivory); }
.btn--ghost:hover {
  border-color: var(--accent); color: var(--accent-2); background: rgba(10,10,11,0.04);
  box-shadow: 0 0 0 1px var(--line-warm), 0 6px 24px -16px var(--glow);
}
.btn--block { width: 100%; justify-content: center; margin-top: 0.4rem; }

/* ---------- Navigation ---------- */
.nav { position: fixed; inset: 0 0 auto 0; z-index: 100; border-bottom: 1px solid transparent;
  transition: background .4s var(--ease), border-color .4s var(--ease), backdrop-filter .4s; }
.nav.is-scrolled { background: rgba(255,255,255,0.78); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); border-bottom-color: var(--line); }
.nav__inner { max-width: var(--maxw); margin: 0 auto; padding: 1.05rem var(--pad); display: flex; align-items: center; justify-content: space-between; gap: 1rem; }

.brand { display: inline-flex; align-items: center; gap: 0.6rem; }
.brand__logo { height: 46px; width: auto; display: block; }
.brand__logo--footer { height: 56px; flex: none; margin-top: 0.1rem; }
.brand__name { font-family: var(--f-mono); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.06em; }
.brand__sub { color: var(--muted); margin-left: 0.4em; }

.nav__links { display: flex; gap: 2.2rem; }
.nav__links a { font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.02em; color: var(--muted);
  background-image: linear-gradient(var(--accent-2), var(--accent-2)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat;
  padding-bottom: 3px; transition: background-size .4s var(--ease), color .25s; }
.nav__links a span { color: var(--faint); margin-right: 0.35em; font-size: 0.72rem; font-variant-numeric: tabular-nums; }
.nav__links a:hover { color: var(--ivory); background-size: 100% 1px; }

.nav__toggle { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; min-width: 44px; min-height: 44px; }
.nav__toggle span { width: 24px; height: 2px; background: var(--ivory); border-radius: 2px; transition: transform .3s var(--ease); }
.nav__toggle[aria-expanded="true"] span:first-child { transform: translateY(3.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:last-child { transform: translateY(-3.5px) rotate(-45deg); }
.nav__mobile[hidden] { display: none; }
.nav__mobile { display: flex; flex-direction: column; gap: 0.2rem; padding: 0 var(--pad) 1.5rem; background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); border-bottom: 1px solid var(--line); }
.nav__mobile a { padding: 0.9rem 0; font-family: var(--f-mono); font-size: 0.95rem; border-bottom: 1px solid var(--line); color: var(--muted); }
.nav__mobile a:last-child { border: none; margin-top: 0.8rem; color: #ffffff; justify-content: center; }

/* ---------- Hero ---------- */
.hero { position: relative; min-height: 100svh; display: flex; align-items: center; padding: 8rem var(--pad) 2rem; overflow: hidden;
  background:
    radial-gradient(90% 70% at 5% 100%, rgba(10,10,11,0.035), transparent 55%),
    var(--ink); }
.hero::before { /* breathing brass glow */
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(120% 80% at 88% 0%, rgba(10,10,11,0.055), transparent 55%);
  animation: glowBreath 9s ease-in-out infinite;
}
.hero::after { /* fade into next section */
  content: ""; position: absolute; inset: auto 0 0 0; height: 22%; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, transparent, var(--ink));
}
@keyframes glowBreath { 0%,100% { opacity: .6; } 50% { opacity: 1; } }
.hero__grid { position: absolute; inset: 0; z-index: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 72px 72px; -webkit-mask-image: radial-gradient(85% 75% at 75% 25%, #000 15%, transparent 78%); mask-image: radial-gradient(85% 75% at 75% 25%, #000 15%, transparent 78%); opacity: 0.5; will-change: transform; }
.hero__inner { position: relative; z-index: 1; max-width: var(--maxw); width: 100%; margin: 0 auto;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.98fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.hero__copy { min-width: 0; }

/* Hero-beeld */
.hero__media { position: relative; margin: 0; min-width: 0; overflow: hidden; }
/* Kader en gordijn horen op de <picture>, niet op de <figure>: de figure is
   hoger door het bijschrift, en een vaste afstand vanaf de onderkant raadde
   die hoogte mis, waardoor de rand net boven de foto eindigde. */
.hero__media picture { display: block; position: relative; }
.hero__media img { width: 100%; height: auto; aspect-ratio: 3/4; max-height: min(66svh, 600px); object-fit: cover; display: block;
  border-radius: var(--radius); background: var(--ink-3); }
.hero__media picture::after { /* fijne rand, houdt het beeld op wit vastgezet */
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius);
  box-shadow: inset 0 0 0 1px rgba(10,10,11,0.10), 0 40px 80px -60px rgba(10,10,11,0.55); }
.hero__caption { display: flex; align-items: center; gap: 0.7rem; margin-top: 0.9rem;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted-2); }
.hero__caption-line { flex: 0 0 22px; height: 1px; background: var(--accent); }
/* LCP-gordijn: het beeld zelf blijft altijd zichtbaar, alleen het dekkende vlak schuift weg */
.js .hero__media picture::before { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2; background: var(--ink);
  border-radius: var(--radius); animation: heroCurtain 0.9s var(--ease-soft) .25s forwards; }
@keyframes heroCurtain { to { transform: translateY(-101%); } }

.hero__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 2rem; flex-wrap: wrap; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.eyebrow--muted { color: var(--muted-2); }
.eyebrow__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 var(--glow); animation: pulse 2.6s ease-out infinite; }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 var(--glow); } 70% { box-shadow: 0 0 0 8px rgba(10,10,11,0); } 100% { box-shadow: 0 0 0 0 rgba(10,10,11,0); } }

.hero__title { font-size: clamp(2.15rem, 5vw, 4.4rem); font-weight: 600; letter-spacing: -0.035em; margin-bottom: 2rem; text-wrap: balance;
  line-height: 1.04; }
.hero__title em { font-weight: 600; }
.hero__title .line { display: block; overflow: hidden; padding-block: 0.08em 0.2em; margin-block: -0.08em -0.2em; }
.js .hero__title .line > span { display: block; transform: translateY(110%); animation: lineRise 1s var(--ease-soft) forwards; }
.hero__title .line:nth-child(1) > span { animation-delay: .12s; }
.hero__title .line:nth-child(2) > span { animation-delay: .24s; }
.hero__title .line:nth-child(3) > span { animation-delay: .36s; }
@keyframes lineRise { to { transform: translateY(0); } }

.js .hero__top, .js .hero__bottom { opacity: 0; animation: heroFade .9s var(--ease-soft) forwards; }
.js .hero__top { animation-delay: .05s; }
.js .hero__bottom { animation-delay: .5s; }
@keyframes heroFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

.hero__bottom { display: grid; grid-template-columns: 1fr; gap: 1.6rem; align-items: start; padding-bottom: 0; }
.hero__lede { font-size: clamp(1.02rem, 1.5vw, 1.2rem); line-height: 1.5; color: var(--muted); max-width: 52ch; text-wrap: pretty; }
.hero__actions { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 0.9rem; }

/* ---------- USP-strook ----------
   Het enige zwarte vlak van de pagina. De rest is papier, dus deze band is
   het rustpunt tussen hero en diensten en tegelijk de plek waar de belofte
   zwart op wit staat. Per punt een claim (Archivo) en een concrete regel
   eronder (Inter), gescheiden door hairlines in plaats van door lege ruimte. */
.usp-strip { background: var(--ivory); color: #ffffff; }
.usp-strip__list {
  max-width: var(--maxw); margin: 0 auto;
  padding: clamp(1.8rem, 3.2vw, 2.6rem) var(--pad);
  list-style: none; display: grid; grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto; gap: 0;
}
/* Subgrid houdt claim en detailregel over alle vier de kolommen op één lijn,
   ook als één claim over twee regels breekt. */
.usp-strip__list li {
  display: grid; grid-row: span 2; grid-template-rows: subgrid;
  align-content: start; gap: 0.3rem;
  padding-inline: clamp(0.9rem, 2vw, 1.8rem);
}
.usp-strip__list li:first-child { padding-inline-start: 0; }
.usp-strip__list li:last-child { padding-inline-end: 0; }
.usp-strip__list li + li { border-left: 1px solid rgba(255, 255, 255, 0.17); }
.usp-strip__claim {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(0.98rem, 1.35vw, 1.12rem); letter-spacing: -0.016em;
  line-height: 1.22; text-wrap: balance;
}
.usp-strip__detail {
  font-size: 0.865rem; line-height: 1.45; color: rgba(255, 255, 255, 0.64); text-wrap: pretty;
}

/* ---------- Section scaffolding ---------- */
.section { max-width: var(--maxw); margin: 0 auto; padding-block: clamp(3.5rem, 7vw, 6rem); padding-inline: var(--pad); }
.section--dark { max-width: none; position: relative; border-block: 1px solid var(--line);
  background: radial-gradient(90% 60% at 50% -10%, rgba(10,10,11,0.035), transparent 60%), linear-gradient(180deg, var(--ink-2), #efeeea); }
.section--dark::after { content: ""; position: absolute; inset: auto 0 0 0; height: 40%; pointer-events: none; background: linear-gradient(180deg, transparent, rgba(10,10,11,0.05)); }
.section--dark > * { position: relative; max-width: var(--maxw); margin-inline: auto; }
.section__head { max-width: 70ch; margin-bottom: clamp(2rem, 3.5vw, 3rem); }
.section__kicker { font-family: var(--f-mono); font-size: 0.76rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); display: inline-flex; align-items: center; gap: 0.7rem; margin-bottom: 1.4rem; }
.section__kicker span { color: var(--accent-deep); font-variant-numeric: tabular-nums; padding-right: 0.7rem; border-right: 1px solid var(--line-2); }
.section__title { font-size: clamp(1.9rem, 4.2vw, 3.1rem); font-weight: 600; max-width: 26ch; letter-spacing: -0.028em; text-wrap: balance; line-height: 1.08; }
.section__intro { color: var(--muted); font-size: 1.075rem; line-height: 1.6; margin-top: 1.4rem; max-width: 60ch; text-wrap: pretty; }

/* ---------- Diensten — editorial index ---------- */
.index { border-top: 1px solid var(--line-2); }
.index__row { border-bottom: 1px solid var(--line); position: relative; }
.index__row::before { content: ""; position: absolute; left: -0.85rem; top: 0; bottom: 0; width: 2px; background: var(--accent); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); }
.index__row:hover::before, .index__row[open]::before { transform: scaleY(1); }
.index__row summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 4rem 1fr auto 2rem; align-items: center; gap: 1.5rem; padding: 1.8rem 0.5rem 1.8rem 0; transition: padding .4s var(--ease); }
.index__row summary::-webkit-details-marker { display: none; }
.index__row:hover summary { padding-left: 1rem; }
.index__no { font-family: var(--f-mono); font-size: 0.85rem; color: var(--muted-2); font-variant-numeric: tabular-nums; }
.index__name { font-family: var(--f-display); font-size: clamp(1.4rem, 3vw, 2.1rem); font-weight: 600; letter-spacing: -0.025em; overflow-wrap: anywhere; transition: color .3s; }
.index__row:hover .index__name, .index__row[open] .index__name { color: var(--accent-2); }
.index__hint { font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted-2); }
.index__icon { position: relative; width: 18px; height: 18px; justify-self: end; }
.index__icon::before, .index__icon::after { content: ""; position: absolute; background: var(--muted); transition: transform .4s var(--ease), background .3s; }
.index__icon::before { top: 50%; left: 0; width: 100%; height: 1.5px; transform: translateY(-50%); }
.index__icon::after { left: 50%; top: 0; width: 1.5px; height: 100%; transform: translateX(-50%); }
.index__row[open] .index__icon::after { transform: translateX(-50%) scaleY(0); }
.index__row[open] .index__icon::before { background: var(--accent-2); }
/* Accordion height animation (JS-enhanced; native fallback without .js) */
.js .index__body { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .5s var(--ease), opacity .45s var(--ease); }
.js .index__body > * { min-height: 0; }
.js .index__row.is-open .index__body { grid-template-rows: 1fr; opacity: 1; }
.index__inner { overflow: hidden; padding: 0 0 2.2rem calc(4rem + 1.5rem); max-width: 70ch; }
.index__inner--media { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
.index__text { min-width: 0; max-width: 62ch; }
.index__figure { margin: 0; position: relative; align-self: stretch; }
.index__figure picture { display: block; height: 100%; }
.index__figure img { width: 100%; height: 100%; max-height: 260px; object-fit: cover; display: block; border-radius: var(--radius); background: var(--ink-3); }
.index__figure::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: var(--radius); box-shadow: inset 0 0 0 1px rgba(10,10,11,0.10); }
.index__body p { color: var(--muted); font-size: 1.075rem; line-height: 1.6; text-wrap: pretty; }
.index__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.3rem; }
.index__tags li { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.04em; color: var(--ivory); border: 1px solid var(--line-2); border-radius: 100px; padding: 0.35rem 0.9rem; }
.index__cta { display: inline-flex; align-items: center; gap: 0.6rem; margin-top: 2rem; font-family: var(--f-mono); font-size: 0.9rem; color: var(--accent-2); }
.index__cta span { transition: transform .3s var(--ease); }
.index__cta:hover span { transform: translateX(4px); }

/* ---------- FAQ (compacte index-variant, geen foto/hint-kolom) ---------- */
.index--faq .index__row summary { grid-template-columns: 1fr 1.75rem; gap: 1rem; padding: 1.3rem 0.5rem 1.3rem 0; }
.index--faq .index__row:hover summary { padding-left: 0.5rem; }
.index--faq .index__name { font-size: clamp(1.05rem, 2vw, 1.3rem); }
.index--faq .index__inner { padding: 0 0.5rem 1.6rem 0; max-width: 62ch; }
.index--faq .index__inner p { font-size: 1rem; }

/* ---------- Split (over ons) ---------- */
.section--split { padding-block: clamp(4rem, 8vw, 6.5rem); }
.split__grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; }
/* min-width: 0 voorkomt dat de intrinsieke fotobreedte de gridkolom oprekt */
.split__grid > * { min-width: 0; }
.split__body { max-width: 760px; }
.split__media { margin: 0; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); align-self: stretch; max-height: 640px; }
.split__media img { display: block; width: 100%; max-width: 100%; height: 100%; object-fit: cover; }
.split__body .section__title { margin: 1rem 0 1.5rem; max-width: 24ch; }
.split__body .lead { font-family: var(--f-display); font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.015em; color: var(--ivory); margin-bottom: 1.2rem; }
.split__body p { color: var(--muted); margin-bottom: 1.2rem; max-width: 62ch; line-height: 1.65; text-wrap: pretty; }
.split__body strong { color: var(--ivory); font-weight: 500; }
.values { list-style: none; margin-top: 1.6rem; display: grid; gap: 0.9rem; }
.values li { display: flex; align-items: center; gap: 0.85rem; font-family: var(--f-mono); font-size: 0.92rem; }
.values li span { flex: 0 0 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-2); color: var(--accent-2); font-size: 0.72rem; }

/* ---------- Steps (editorial outline numbers) ---------- */
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.6rem); }
.step { position: relative; padding-top: 2.6rem; transition: transform .4s var(--ease); }
/* Knooppunt op de tijdlijn */
.step__dot { position: absolute; top: 0; left: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--accent);
  box-shadow: 0 0 0 5px var(--ink-3), 0 0 0 6px var(--line); z-index: 1; transition: transform .4s var(--ease); }
/* Verbindingslijn naar het volgende knooppunt */
.step:not(:last-child)::before { content: ""; position: absolute; top: 7px; left: 14px; width: calc(100% + clamp(1.5rem, 3vw, 2.6rem) - 14px); height: 1.5px;
  background: var(--line-2); transform: scaleX(1); transform-origin: left; }
.step:hover .step__dot { transform: scale(1.25); }
.step:hover { transform: translateY(-3px); }
.step__no { font-family: var(--f-mono); font-weight: 500; font-size: 0.82rem; line-height: 1; letter-spacing: 0.18em; color: var(--muted-2); display: block; margin-bottom: 0.9rem; font-variant-numeric: tabular-nums; transition: color .35s var(--ease); }
.step:hover .step__no { color: var(--accent); }
.step h3 { font-size: 1.25rem; margin-bottom: 0.7rem; letter-spacing: -0.01em; }
.step p { color: var(--muted); font-size: 0.95rem; text-wrap: pretty; max-width: 30ch; }

/* ---------- Projects ---------- */
.projects { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; perspective: 1000px; }
.project--wide { grid-column: 1 / -1; }
.project--wide .project__img { aspect-ratio: 2/1; }
.project { position: relative; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--ink-2); transition: transform .4s var(--ease), border-color .4s, box-shadow .4s; transform-style: preserve-3d; }
.project__badge { position: absolute; top: 0.9rem; left: 0.9rem; z-index: 2; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: #ffffff; background: rgba(10,10,11,0.82); backdrop-filter: blur(4px); border-radius: 100px; padding: 0.35rem 0.75rem; pointer-events: none; }
.project:hover { border-color: var(--line-warm); box-shadow: 0 26px 60px -36px rgba(10,10,11,0.35); }
.project:hover .project__img { transform: scale(1.05); }
.project__img { display: block; aspect-ratio: 4/3; overflow: hidden; transition: transform .7s var(--ease); }
.project__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.project__meta { padding: 1.4rem 1.5rem 1.7rem; }
.project__meta span { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--accent); }
.project__meta h3 { font-size: 1.3rem; margin-top: 0.5rem; letter-spacing: -0.005em; }
.project__meta p { margin-top: 0.55rem; color: var(--muted); font-size: 0.95rem; line-height: 1.5; }

/* ---------- Contact ---------- */
.section--contact { max-width: none; border-top: 1px solid var(--line);
  background: radial-gradient(100% 80% at 82% 0%, rgba(10,10,11,0.04), transparent 55%), var(--ink-2); }
.contact { max-width: var(--maxw); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 6vw, 5rem); align-items: start; }
.contact__details { list-style: none; margin: 1.8rem 0; display: grid; gap: 1.1rem; }
.contact__details li { display: grid; grid-template-columns: 92px 1fr; align-items: baseline; gap: 1rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.contact__label { font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); }
.contact__details a { overflow-wrap: anywhere; transition: color .25s; }
.contact__details a:hover { color: var(--ivory); }

.hours { margin-top: 2rem; }
.hours__head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.2rem; }
.hours__head h3 { font-size: 1.2rem; }
.hours__badge { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); border: 1px solid var(--line-2); border-radius: 100px; padding: 0.35rem 0.8rem; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--muted-2); flex: none; }
.dot.is-open { background: #2c7a55; box-shadow: 0 0 0 3px rgba(44,122,85,0.15); }
.dot.is-closed { background: #b0453a; }
.hours__rows { margin-top: 0.9rem; }
.hours__rows > div { display: flex; justify-content: space-between; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.hours__rows dt { color: var(--muted); }
.hours__rows dd { font-family: var(--f-mono); font-size: 0.9rem; font-variant-numeric: tabular-nums; }
.hours__rows .closed dd { color: var(--muted-2); }

.area { margin-top: 2rem; padding-top: 1.6rem; border-top: 1px solid var(--line); }
.area__label { font-family: var(--f-mono); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-2); margin-bottom: 0.7rem; }
.area__text { color: var(--muted); font-size: 0.98rem; line-height: 1.6; max-width: 46ch; text-wrap: pretty; }

.contact__form { border: 1px solid var(--line-2); border-radius: var(--radius); padding: clamp(1.6rem, 3vw, 2.6rem); display: grid; gap: 1.25rem; background: #ffffff; box-shadow: 0 34px 80px -56px rgba(10,10,11,0.4);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent 40%), var(--ink-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 50px -30px rgba(10,10,11,0.35); }
.form__head { display: grid; gap: 0.3rem; padding-bottom: 1.1rem; border-bottom: 1px solid var(--line); }
.form__head strong { font-family: var(--f-display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; }
.form__head p { font-size: 0.9rem; color: var(--muted); }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; }
.field { display: grid; gap: 0.45rem; }
.field label { font-family: var(--f-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); }
.field label span { color: var(--accent); }
.field input, .field textarea, .field select { background: #fdfdfc; border: 1px solid var(--line-2); border-radius: 8px; padding: 0.85rem 1rem; color: var(--ivory); font-family: var(--f-body); font-size: 1rem; resize: vertical; transition: border-color .25s, box-shadow .25s, background .25s; }
.field input:hover, .field textarea:hover, .field select:hover { border-color: var(--muted-2); }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); opacity: 1; }
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--ivory); background: #ffffff; box-shadow: 0 0 0 3px rgba(10,10,11,0.08); }
.field input:user-invalid { border-color: #b0453a; }
.field select {
  appearance: none; -webkit-appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2355534f' stroke-width='1.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.4rem;
}
.form__note { font-size: 0.78rem; color: var(--muted-2); line-height: 1.5; }
.form__status { font-size: 0.82rem; color: #2c7a55; min-height: 1em; }
.form__status.is-fout { color: #a1281f; }           /* 5.9:1 op de formulierachtergrond */
.form__status.is-fout a { color: inherit; text-underline-offset: 3px; }

/* Verborgen lokaas voor bots. Niet display:none: een deel van de bots slaat
   velden over die zo verstopt zijn, en dan vangt het niets. */
.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Bevestiging, komt in de plaats van het formulier */
.form__gelukt {
  border: 1px solid var(--line-2); border-radius: var(--radius);
  padding: clamp(1.8rem, 3.5vw, 2.8rem);
  background: linear-gradient(180deg, rgba(255,255,255,0.9), transparent 40%), var(--ink-3);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8), 0 18px 50px -30px rgba(10,10,11,0.35);
  align-self: start;
}
.form__vink {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--ivory); color: #ffffff; margin-bottom: 1.2rem;
}
.form__gelukt h3 {
  font-family: var(--f-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2;
}
.form__gelukt p { color: var(--muted); font-size: 0.98rem; margin-top: 0.7rem; max-width: 42ch; text-wrap: pretty; }
.form__gelukt-sub { font-size: 0.86rem !important; }
.form__gelukt:focus { outline: none; }
.form__gelukt:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ---------- Footer ---------- */
.footer { background: var(--ink); border-top: 1px solid var(--line); }
.footer__cta { max-width: var(--maxw); margin: 0 auto; padding: clamp(2.75rem, 5vw, 4rem) var(--pad); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; border-bottom: 1px solid var(--line); }
.footer__big { font-family: var(--f-display); font-weight: 600; font-size: clamp(1.85rem, 5vw, 3.5rem); letter-spacing: -0.03em; text-wrap: balance; line-height: 1.06; }
.footer__inner { max-width: var(--maxw); margin: 0 auto; padding: 2.5rem var(--pad) 2rem; display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 2.5rem; }
.footer__brand { display: flex; gap: 1rem; align-items: flex-start; }
.footer__brand strong { font-family: var(--f-mono); font-weight: 500; font-size: 1.05rem; letter-spacing: 0.04em; }
.footer__brand p { color: var(--muted); font-size: 0.95rem; margin-top: 0.3rem; max-width: 32ch; }
.footer__nav { display: grid; gap: 0.7rem; align-content: start; }
.footer__nav a { font-family: var(--f-mono); color: var(--muted); font-size: 0.88rem; transition: color .25s; }
.footer__nav a:hover { color: var(--ivory); }
.footer__contact { display: grid; gap: 0.7rem; align-content: start; color: var(--muted); font-size: 0.92rem; }
.footer__contact a { transition: color .25s; }
.footer__contact a:hover { color: var(--ivory); }
.footer__ig { display: inline-flex; align-items: center; gap: 0.5rem; }
.footer__ig svg { flex: none; }
.footer__bar { max-width: var(--maxw); margin: 0 auto; padding: 1.5rem var(--pad); border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.6rem; font-family: var(--f-mono); font-size: 0.76rem; color: var(--muted-2); }
.footer__bar span { font-variant-numeric: tabular-nums; }
/* Credit: rustig genoeg om niet te concurreren met de klant zijn eigen naam,
   duidelijk genoeg om aanklikbaar te zijn. */
.footer__maker { color: var(--muted-2); text-decoration: none; transition: color .3s var(--ease); }
.footer__maker strong { font-weight: 500; color: var(--ivory); }
.footer__maker:hover { color: var(--ivory); }
.footer__maker:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.footer__maker:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; }

/* ---------- Reveal ---------- */
.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .9s var(--ease-soft), transform .9s var(--ease-soft); transition-delay: var(--reveal-delay, 0s); }
.reveal.is-in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) { .nav__links { gap: 1.5rem; } }
@media (max-width: 980px) {
  .nav__links { display: none; }
  .nav__toggle { display: flex; }
  .hero { min-height: auto; padding: 6.5rem var(--pad) 3rem; align-items: start; }
  .hero__top { flex-direction: column; align-items: flex-start; gap: 0.5rem; }
  .hero__inner { grid-template-columns: 1fr; gap: 2.25rem; }
  .hero__media { order: 2; }
  .hero__media img { aspect-ratio: 4/3; }
  .hero__bottom { grid-template-columns: 1fr; gap: 1.5rem; }
  .hero__actions { flex-direction: row; flex-wrap: wrap; }
  .split__grid { grid-template-columns: 1fr; }
  .split__media { max-width: 460px; max-height: none; }
  .split__media img { aspect-ratio: 3/4; }
  .index__inner--media { grid-template-columns: 1fr; }
  .index__figure { order: -1; max-width: 460px; }
  .index__figure img { max-height: 220px; }
  /* USP-strook op tablet: twee kolommen, de scheiding loopt alleen tussen de
     kolommen door, niet dwars over een rijovergang heen. */
  .usp-strip__list { grid-template-columns: 1fr 1fr; row-gap: clamp(1.4rem, 3vw, 1.9rem); }
  .usp-strip__list li:nth-child(odd) { padding-inline-start: 0; border-left: none; }
  .usp-strip__list li:nth-child(even) { padding-inline-end: 0; }
  .steps { grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 2.6rem); }
  .step:not(:last-child)::before { display: none; }
  .projects { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .steps { grid-template-columns: 1fr; gap: 2.2rem; }
  /* Verticale tijdlijn op mobiel */
  .step { padding-top: 0; padding-left: 2.2rem; }
  .step__dot { top: 4px; left: 0; }
  .step:not(:last-child)::before { display: block; top: 18px; left: 6px; width: 1.5px; height: calc(100% + 2.2rem); }
  .step__no { margin-bottom: 0.6rem; }
  .index__row summary { grid-template-columns: 2.5rem 1fr 1.5rem; gap: 0.75rem; }
  .index__hint { display: none; }
  .index__inner { padding-left: 0; }
  .index--faq .index__row summary { grid-template-columns: 1fr 1.5rem; }
  /* USP-strook mobiel: één kolom, punten gescheiden door een hairline.
     De drie selectors zijn nodig om de kolomranden van tablet te overrulen. */
  .usp-strip__list { grid-template-columns: 1fr; row-gap: 0; padding-block: 1.1rem; }
  .usp-strip__list li,
  .usp-strip__list li:nth-child(odd),
  .usp-strip__list li:nth-child(even) { padding: 1rem 0; border-left: none; }
  .usp-strip__list li + li { border-top: 1px solid rgba(255, 255, 255, 0.17); }
  .field-row { grid-template-columns: 1fr; }
  /* Footer mobiel: brand-rij op één lijn, links en contact als nette blokken met hairlines */
  .footer__inner { grid-template-columns: 1fr; gap: 1.6rem; padding-top: 2rem; }
  .footer__brand { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 0.85rem; }
  .footer__brand > div { display: contents; }
  .brand__logo--footer { height: 38px; margin-top: 0; }
  .footer__brand strong { font-size: 1rem; letter-spacing: 0.05em; }
  .footer__brand p { grid-column: 1 / -1; margin-top: 0.9rem; font-size: 0.88rem; max-width: none; }
  .footer__nav { grid-template-columns: 1fr 1fr; gap: 0.95rem 1rem; padding-top: 1.5rem; border-top: 1px solid var(--line); }
  .footer__nav a { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.1em; }
  .footer__contact { padding-top: 1.5rem; border-top: 1px solid var(--line); font-size: 0.88rem; }
  .project--wide .project__img { aspect-ratio: 16/10; }
}
@media (max-height: 560px) and (min-width: 700px) { .hero { min-height: auto; padding-top: 6rem; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero__title .line > span { transform: none !important; }
  .js .hero__top, .js .hero__bottom { opacity: 1 !important; }
  .js .index__body { grid-template-rows: 1fr; opacity: 1; }
  .js .hero__media::before { display: none; }
}