/* ==========================================================================
   Vloer 't Maar - vloerenlegger Groningen
   Palet en typografie staan bovenaan. Pas je hier iets aan, dan verandert
   het overal mee.
   ========================================================================== */

:root {
  /* Merkkleuren, niet aanpassen zonder reden */
  --cream:      #F4F3F0;
  --green:      #3D6B5A;
  --oak:        #C98A4B;
  --ink:        #22211F;

  /* Afgeleiden. --oak-ink is een donkerdere eik, alleen voor tekst:
     de gewone eik haalt op creme geen leesbaar contrast. */
  --green-dark: #2F5446;
  --green-soft: #EDF1EF;
  --oak-ink:    #8F5A24;
  --muted:      #56544E;
  --surface:    #FFFFFF;
  --surface-alt:#ECEAE4;
  --line:       #E1DED6;

  --font-head: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;

  --radius:    14px;
  --radius-lg: 20px;
  --container: 1100px;
  --gutter:    20px;

  --shadow-sm: 0 1px 2px rgba(34, 33, 31, .04), 0 6px 16px rgba(34, 33, 31, .05);
  --shadow-md: 0 2px 4px rgba(34, 33, 31, .04), 0 16px 36px rgba(34, 33, 31, .08);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* --------------------------------------------------------------------------
   Basis
   -------------------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: 92px;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}

h1 { font-size: clamp(2.25rem, 6.4vw, 3.9rem); }
h2 { font-size: clamp(1.7rem, 4vw, 2.5rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -.01em; }

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--green); }

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

ul, ol { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.lead {
  font-size: clamp(1.05rem, 1.4vw, 1.18rem);
  color: var(--muted);
  max-width: 46ch;
}

/* Scheidingsteken tussen losse feiten */
.dot {
  color: var(--oak);
  padding-inline: .15em;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   Toegankelijkheid
   -------------------------------------------------------------------------- */

.skip-link {
  position: absolute;
  left: 12px;
  top: -100px;
  z-index: 200;
  background: var(--green);
  color: #fff;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius) var(--radius);
  font-weight: 600;
  text-decoration: none;
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 0; }

:focus-visible {
  outline: 3px solid var(--oak-ink);
  outline-offset: 3px;
  border-radius: 4px;
}

/* Het ankerpunt bovenaan vangt de focus op na "naar boven", maar het is een
   blokje van nul hoog. Een rand eromheen is dan een streepje in het niets,
   terwijl je al ziet dat je bovenaan staat. */
#top:focus,
#top:focus-visible { outline: none; }

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease);
}

.site-header.is-scrolled {
  background: rgba(244, 243, 240, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 14px rgba(34, 33, 31, .05);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 72px;
}

.logo {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: var(--ink);
  margin-right: auto;
  flex-shrink: 0;
}

.logo-mark {
  display: block;
  width: 34px;
  height: 34px;
  flex-shrink: 0;
}
.logo-mark svg { width: 100%; height: 100%; }

.logo-text {
  font-family: var(--font-head);
  font-size: 1.18rem;
  font-weight: 600;
  letter-spacing: -.02em;
  white-space: nowrap;
}
.logo-text strong { font-weight: 700; }

.logo-sm .logo-mark { width: 30px; height: 30px; }
.logo-sm .logo-text { font-size: 1.05rem; }

/* Navigatie */
.site-nav ul {
  display: flex;
  align-items: center;
  gap: 1.6rem;
}

.site-nav a {
  color: var(--ink);
  text-decoration: none;
  font-weight: 500;
  font-size: .96rem;
  padding: .35rem 0;
  position: relative;
}

.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--oak);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s var(--ease);
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after { transform: scaleX(1); }

.nav-toggle {
  display: none;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

.nav-toggle-bars {
  display: block;
  width: 18px;
  position: relative;
  height: 12px;
}
.nav-toggle-bars span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: var(--ink);
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle-bars span:nth-child(1) { top: 0; }
.nav-toggle-bars span:nth-child(2) { top: 5px; }
.nav-toggle-bars span:nth-child(3) { top: 10px; }

.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); }

/* --------------------------------------------------------------------------
   Knoppen
   -------------------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .85rem 1.4rem;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: transform .2s var(--ease), background-color .2s var(--ease),
              border-color .2s var(--ease), box-shadow .2s var(--ease), color .2s var(--ease);
}

.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn-icon { width: 20px; height: 20px; flex-shrink: 0; }

.btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.btn-primary:hover { background: var(--green-dark); box-shadow: var(--shadow-md); }

.btn-accent {
  background: var(--oak);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.btn-accent:hover { background: #D8A066; box-shadow: var(--shadow-md); }

.btn-ghost {
  background: transparent;
  color: var(--green);
  border-color: rgba(61, 107, 90, .35);
}
.btn-ghost:hover { border-color: var(--green); background: var(--green-soft); }

.btn-ghost-light {
  background: transparent;
  color: var(--cream);
  border-color: rgba(244, 243, 240, .45);
}
.btn-ghost-light:hover { border-color: var(--cream); background: rgba(244, 243, 240, .1); }

.btn-sm { padding: .6rem 1.05rem; font-size: .92rem; }

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* De hero is een toneel. Onderin ligt het vloervlak, de kop staat erop.
   --vloer is de hoogte van dat vlak, --leg is hoe lang de choreografie duurt;
   beide worden op mobiel kleiner gezet, zie de media queries onderaan. */
.hero {
  --vloer: clamp(250px, 34vw, 470px);
  --planken: 161;          /* houd gelijk aan het aantal polygonen in de hero */
  --plank: 400ms;
  --stap: 9ms;
  --leg: calc(var(--planken) * var(--stap) + var(--plank));
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(6rem, 13vw, 12rem);
}

.hero-stage {
  position: absolute;
  inset: auto 0 0;
  height: var(--vloer);
  z-index: -1;
  pointer-events: none;
}

.hero-inner { display: grid; }
.hero-copy { max-width: min(100%, 47rem); }

/* De kop rust op de vloer: een strak contactschaduwtje plus een zachte
   slagschaduw eronder. Meer is het niet, en meer moet het ook niet zijn. */
.hero-copy h1 {
  margin-bottom: 1.1rem;
  font-size: clamp(2.5rem, 7vw, 5rem);
  letter-spacing: -.035em;
  text-shadow: 0 .03em .04em rgba(34, 33, 31, .11),
               0 .12em .3em rgba(34, 33, 31, .09);
}
.hero-copy .lead { max-width: 34ch; }

/* Speels detail: eiken streep onder de tweede regel van de kop */
/* Streep onder de kop. Als de kop over twee regels breekt krijgt elke regel
   zijn eigen streep, in plaats van een balk die in het niets doorloopt. */
.accent-underline {
  background-image: linear-gradient(rgba(201, 138, 75, .75), rgba(201, 138, 75, .75));
  background-repeat: no-repeat;
  background-size: 100% .055em;
  background-position: 0 calc(100% - .11em);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

.trustline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: .45rem;
  margin-top: 1.75rem;
  font-size: .9rem;
  color: var(--muted);
}
.trust-icon {
  width: 18px;
  height: 18px;
  color: var(--green);
  flex-shrink: 0;
}

/* Het vloervlak. Vier eikentinten rond #C98A4B, de verzadigde alleen als
   accentplank. Alle vier halen ruim 4,5:1 met de inktkleur, dus de tekst
   erop blijft leesbaar waar hij ook valt. */
.floor { display: block; width: 100%; height: 100%; }

.pk {
  stroke: #A9834F;
  stroke-opacity: .3;
}
.t-a { fill: #F2E9DB; }
.t-b { fill: #E8D8C0; }
.t-c { fill: #DAC29B; }
.t-d { fill: #C98A4B; }

/* De planken schuiven van achter naar voren op hun plek en vallen er net op.
   Elke plank schuift over zijn eigen lengterichting, dus verre planken over
   een kortere afstand dan de planken vlak voor je. */
@keyframes plank-in {
  from { opacity: 0; transform: translate(var(--dx, 0), var(--dy, -8px)); }
  to   { opacity: 1; transform: none; }
}
.pk {
  opacity: 0;
  animation: plank-in var(--plank) cubic-bezier(.16, .86, .3, 1) both;
  animation-delay: calc(var(--i) * var(--stap));
}

/* De knoppen komen pas als de laatste plank ligt. Dat kleine moment van
   afronding is waar deze hero om draait. Puur CSS, dus het werkt ook
   zonder JavaScript. */
@keyframes na-de-vloer {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
.hero-copy .btn-row,
.hero-copy .trustline {
  animation: na-de-vloer 520ms var(--ease) both;
  animation-delay: var(--leg);
}
.hero-copy .trustline { animation-delay: calc(var(--leg) + 140ms); }

/* --------------------------------------------------------------------------
   Secties
   -------------------------------------------------------------------------- */

.section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; }

.section-alt {
  background: var(--surface-alt);
  border-block: 1px solid var(--line);
}

.section-head { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 46ch; }
.section-head h2 { margin-bottom: .4rem; }
.section-intro { color: var(--muted); font-size: 1.05rem; }

.eyebrow {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 .75rem;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--oak-ink);
}

/* Miniatuur visgraat als sectiemarkering */
.mini-vis {
  display: block;
  width: 42px;
  color: var(--oak);
  flex-shrink: 0;
}
.mini-vis svg { width: 100%; height: auto; }

/* --------------------------------------------------------------------------
   Diensten
   -------------------------------------------------------------------------- */

.cards {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: #D6D2C8;
}

.card h3 { margin-bottom: .35rem; }
.card p { color: var(--muted); font-size: .97rem; }

.card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1rem;
  border-radius: 12px;
  background: var(--green-soft);
  color: var(--green);
}
.card-icon svg { width: 24px; height: 24px; }

/* De visgraatkaart krijgt de eiken-accentkleur */
.card-accent .card-icon { background: rgba(201, 138, 75, .16); color: var(--oak-ink); }

/* --------------------------------------------------------------------------
   Patronen (Moment 3)
   Elke plank in de minivloer is dezelfde rechthoek. Per patroon staan zijn
   plek, draaiing en verstek klaar als variabelen op het element zelf, dus
   het wisselen is een transitie en geen herberekening.
   -------------------------------------------------------------------------- */

.kiezer { display: grid; gap: 1.25rem; }

/* Zonder JavaScript valt er niets te kiezen, dus dan tonen we de knoppen niet */
.kiezer-knoppen { display: none; flex-wrap: wrap; gap: .5rem; }
.js .kiezer-knoppen { display: flex; }

.patroon-knop {
  padding: .6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: .93rem;
  font-weight: 500;
  cursor: pointer;
  transition: background .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
}
.patroon-knop:hover { border-color: var(--oak); }
.patroon-knop[aria-pressed="true"] {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* Het paneel. De warme ondergrond maakt van de naden tussen de planken
   zichtbare voegen, precies zoals bij een echte vloer. */
.kiezer-vloer {
  max-width: 36rem;
  aspect-ratio: 540 / 320;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #D9C7AB;
}
.kiezer-vloer svg { display: block; width: 100%; height: 100%; }

/* Dezelfde eikentinten als de hero, dezelfde terughoudendheid */
.lp {
  stroke: #A9834F;
  stroke-opacity: .35;
  stroke-width: 1;
  transform-box: view-box;
  transform-origin: 0 0;
  x: -45px; y: -15px; width: 90px; height: 30px;
  transform: translate(var(--vx), var(--vy)) rotate(var(--vr, 0deg)) skewX(var(--vk, 0deg));
  opacity: var(--vo, 1);
  transition: transform 520ms cubic-bezier(.5, 0, .2, 1), opacity 240ms linear,
              x 520ms cubic-bezier(.5, 0, .2, 1), y 520ms cubic-bezier(.5, 0, .2, 1),
              width 520ms cubic-bezier(.5, 0, .2, 1), height 520ms cubic-bezier(.5, 0, .2, 1);
  transition-delay: calc(var(--i) * 2ms);
}
[data-patroon="w"] .lp {
  transform: translate(var(--wx), var(--wy)) rotate(var(--wr, 0deg)) skewX(var(--wk, 0deg));
  opacity: var(--wo, 1);
}

/* De twee tegelverbanden. Dezelfde rechthoek wordt hier een vierkante tegel:
   x, y, width en height zijn in SVG gewone CSS-eigenschappen, dus de plank
   groeit netjes mee in dezelfde overgang als zijn verplaatsing. */
[data-patroon="t"] .lp {
  transform: translate(var(--tx), var(--ty));
  opacity: var(--to, 1);
}
[data-patroon="h"] .lp {
  transform: translate(var(--hx), var(--hy));
  opacity: var(--ho, 1);
}
[data-patroon="t"] .lp,
[data-patroon="h"] .lp { x: -30px; y: -30px; width: 60px; height: 60px; }

.kiezer-bij { margin: 0; color: var(--muted); font-size: .95rem; max-width: 34ch; }

/* --------------------------------------------------------------------------
   Werkwijze
   -------------------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 1.75rem;
  grid-template-columns: 1fr;
  counter-reset: none;
}

.step { position: relative; padding-top: .25rem; }

/* --- De doorsnede ---------------------------------------------------------
   Een vloer van opzij, zoals op een werktekening. Welke laag je ziet hangt
   af van data-fase op de omhullende div. Alles beweegt met transform en
   opacity, dus er komt geen herberekening van de tekening aan te pas. */

.dsn-defs { position: absolute; }
.doorsnede svg { display: block; width: 100%; height: auto; }

/* Wat er al lag voor je binnenkwam */
.dsn-muur { fill: #DEDAD2; }
.dsn-chape { fill: #D2CDC3; }

/* Fase 1: de ruimte als dunne lijn */
.dsn-omtrek {
  fill: none;
  stroke: var(--green);
  stroke-width: 1.6;
  stroke-opacity: .5;
  stroke-linejoin: round;
}

/* Fase 2: maatvoering en het aantal vierkante meters */
.dsn-maat, .dsn-opp { opacity: 0; transition: opacity .4s var(--ease); }
.doorsnede:not([data-fase="1"]) .dsn-maat,
.doorsnede:not([data-fase="1"]) .dsn-opp { opacity: 1; }

.dsn-hulplijn, .dsn-maatlijn {
  fill: none;
  stroke: var(--oak-ink);
  stroke-width: 1;
  stroke-opacity: .55;
}
.dsn-pijl { fill: var(--oak-ink); fill-opacity: .7; }
.dsn-maattekst {
  fill: var(--oak-ink);
  font: 600 15px/1 var(--font-body);
  text-anchor: middle;
}
.dsn-opp rect { fill: var(--surface); stroke: var(--green); stroke-opacity: .25; }
.dsn-oppcijfer {
  fill: var(--green);
  font: 700 21px/1 var(--font-head);
  text-anchor: middle;
}
.dsn-oppcijfer tspan[dy] { font-size: 12px; }

/* Fase 3: egaline vloeit uit, ondervloer rolt uit, planken schuiven in */
.dsn-egaline { fill: #EFEBE2; }
.dsn-ondervloer { fill: #C6D1CA; }
.dsn-plank { stroke: #A9834F; stroke-opacity: .35; stroke-width: .8; }

.dsn-egaline, .dsn-ondervloer {
  transform-box: view-box;
  transform-origin: 58px 0;      /* de binnenkant van de linkermuur */
  transform: scaleX(0);
  transition: transform .62s cubic-bezier(.32, .72, .3, 1);
}
[data-fase="3"] .dsn-egaline,
[data-fase="4"] .dsn-egaline { transform: none; }
[data-fase="3"] .dsn-ondervloer,
[data-fase="4"] .dsn-ondervloer { transform: none; transition-delay: .28s; }

.dsn-plank {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translateX(96px);
  opacity: 0;
  transition: transform .46s cubic-bezier(.2, .8, .3, 1), opacity .2s linear;
}
[data-fase="3"] .dsn-plank,
[data-fase="4"] .dsn-plank {
  transform: none;
  opacity: 1;
  transition-delay: calc(.62s + var(--i) * 55ms);
}

/* Fase 4: de plint klikt erop en er gaat een keer glans over de vloer */
.dsn-plint rect { fill: #F7F2E9; stroke: #C4B69E; stroke-width: .8; }
.dsn-plint {
  transform-box: view-box;
  transform-origin: 0 0;
  transform: translateY(-16px);
  opacity: 0;
  transition: transform .42s cubic-bezier(.3, 1.6, .5, 1), opacity .22s linear;
}
[data-fase="4"] .dsn-plint { transform: none; opacity: 1; }

@keyframes dsn-veeg {
  from { transform: translateX(0); }
  to   { transform: translateX(520px); }
}
.dsn-glans { opacity: 0; transform-box: view-box; transform-origin: 0 0; }
[data-fase="4"] .dsn-glans {
  opacity: 1;
  animation: dsn-veeg 1.5s cubic-bezier(.4, 0, .3, 1) .75s 1 both;
}

/* De legenda vertelt welke laag welke is, zodra die laag er ligt */
.dsn-legenda {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 1.1rem;
  margin: .85rem 0 0;
  padding: 0;
  list-style: none;
  font-size: .82rem;
  color: var(--muted);
}
.dsn-legenda li {
  display: flex;
  align-items: center;
  gap: .45rem;
  opacity: 0;
  transition: opacity .3s var(--ease);
}
.dsn-legenda span {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  border: 1px solid rgba(34, 33, 31, .13);
}
.lg-egaline span { background: #EFEBE2; }
.lg-ondervloer span { background: #C6D1CA; }
.lg-plank span { background: #DAC29B; }
.lg-plint span { background: #F7F2E9; }

[data-fase="3"] .lg-egaline, [data-fase="4"] .lg-egaline,
[data-fase="3"] .lg-ondervloer, [data-fase="4"] .lg-ondervloer,
[data-fase="3"] .lg-plank, [data-fase="4"] .lg-plank,
[data-fase="4"] .lg-plint { opacity: 1; }

/* De meelopende tekening staat in een eigen kolom en die blijft plakken zolang
   je langs de stappen scrollt. Op desktop naast de tekst, op mobiel erboven. */
.doorsnede-kolom { display: block; }

.step-num {
  display: block;
  font-family: var(--font-head);
  font-size: clamp(3rem, 7vw, 4.25rem);
  font-weight: 700;
  line-height: .9;
  margin-bottom: .35rem;
  color: rgba(201, 138, 75, .38);
}

/* Outline-cijfers waar de browser dat kan */
@supports (-webkit-text-stroke: 2px red) {
  .step-num {
    color: transparent;
    -webkit-text-stroke: 2px var(--oak);
  }
}

.step h3 { margin-bottom: .3rem; }
.step p { color: var(--muted); font-size: .97rem; }

/* --------------------------------------------------------------------------
   Over
   -------------------------------------------------------------------------- */

.over-inner {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}

.over-photo img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  /* Polaroid-knipoog: heel licht gedraaid */
  transform: rotate(-1.5deg);
  transition: transform .3s var(--ease);
}
.over-photo img:hover { transform: rotate(0deg); }

.over-copy p { color: var(--muted); max-width: 48ch; }

/* --------------------------------------------------------------------------
   Werk
   -------------------------------------------------------------------------- */

.work-grid {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: 1fr;
}

.work-item figure {
  margin: 0;
  transition: transform .3s var(--ease);
}
.tilt-a figure { transform: rotate(-1.1deg); }
.tilt-b figure { transform: rotate(.9deg); }
.tilt-c figure { transform: rotate(-.5deg); }

.work-item:hover figure { transform: rotate(0deg) translateY(-3px); }

.work-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% var(--focus, 50%);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow-sm);
}

.work-item figcaption {
  margin-top: .7rem;
  font-size: .9rem;
  font-weight: 500;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Reviews
   -------------------------------------------------------------------------- */

.quotes {
  display: grid;
  gap: 1.1rem;
  grid-template-columns: 1fr;
}

.quote-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 1.75rem 1.5rem 1.4rem;
  box-shadow: var(--shadow-sm);
}

.quote-card::before {
  content: "\201C";
  position: absolute;
  top: .1em;
  left: .35em;
  font-family: var(--font-head);
  font-size: 4rem;
  line-height: 1;
  color: var(--oak);
  opacity: .28;
}

.quote-card blockquote { margin: 0; position: relative; }
.quote-card blockquote p { font-size: 1rem; }

.quote-by {
  margin: 1rem 0 0;
  font-size: .88rem;
  font-weight: 600;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */

.contact { padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }

.contact-card {
  display: grid;
  gap: 2rem;
  background: var(--green);
  color: var(--cream);
  border-radius: var(--radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
  box-shadow: var(--shadow-md);
}

.contact-card h2 { color: var(--cream); }
.contact-card .lead { color: rgba(244, 243, 240, .82); }

.contact-note {
  margin-top: 1.5rem;
  font-size: .9rem;
  color: rgba(244, 243, 240, .75);
  max-width: 42ch;
}

.contact-list {
  display: grid;
  gap: 1.1rem;
  align-content: start;
  border-top: 1px solid rgba(244, 243, 240, .2);
  padding-top: 1.75rem;
}

.contact-label {
  display: block;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(244, 243, 240, .6);
  margin-bottom: .1rem;
}

.contact-list a,
.contact-list span:not(.contact-label) {
  color: var(--cream);
  font-size: 1.08rem;
  font-weight: 500;
  text-decoration: none;
}
.contact-list a:hover { text-decoration: underline; text-underline-offset: 3px; }
.contact-list :focus-visible { outline-color: var(--oak); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.site-footer {
  border-top: 1px solid var(--line);
  padding: 2rem 0 2.5rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.footer-meta {
  margin: 0;
  font-size: .88rem;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   Terug naar boven
   Zweeft rechtsonder, maar pas nadat je een scherm of twee naar beneden bent.
   Hij zit onder de header (z-index 100), zodat het uitgeklapte menu er netjes
   overheen valt.
   -------------------------------------------------------------------------- */

.naar-boven {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 90;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(244, 243, 240, .92);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  backdrop-filter: saturate(1.4) blur(10px);
  border: 1px solid var(--line);
  color: var(--green);
  box-shadow: var(--shadow-md);

  /* Weg tot main.js hem tevoorschijn haalt. visibility moet erbij: met alleen
     opacity blijft er een onzichtbare knop staan waar je op klikt en op tabt. */
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s var(--ease), transform .25s var(--ease),
              visibility .25s, background-color .2s var(--ease), color .2s var(--ease);
}

.naar-boven.is-zichtbaar {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.naar-boven svg { width: 21px; height: 21px; }

.naar-boven:hover {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

/* --------------------------------------------------------------------------
   Scroll-reveal
   Alleen actief als JS draait, anders staat alles gewoon zichtbaar.
   Gebruikt `translate` zodat `transform` vrij blijft voor hover en tilt.
   -------------------------------------------------------------------------- */

.js [data-reveal] {
  opacity: 0;
  translate: 0 12px;
  transition: opacity .55s var(--ease), translate .55s var(--ease);
}
.js [data-reveal].is-visible {
  opacity: 1;
  translate: 0 0;
}

/* Kaarten in een rij komen kort na elkaar binnen */
.js .cards [data-reveal]:nth-child(2),
.js .steps [data-reveal]:nth-child(2),
.js .quotes [data-reveal]:nth-child(2),
.js .work-grid [data-reveal]:nth-child(2) { transition-delay: 70ms; }
.js .cards [data-reveal]:nth-child(3),
.js .steps [data-reveal]:nth-child(3),
.js .quotes [data-reveal]:nth-child(3),
.js .work-grid [data-reveal]:nth-child(3) { transition-delay: 140ms; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 819px) {
  .site-nav {
    position: absolute;
    top: calc(100% + 8px);
    right: var(--gutter);
    left: var(--gutter);
    background: var(--surface);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-md);
    padding: .5rem;
    display: none;
  }
  .site-nav.is-open { display: block; }

  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; }
  .site-nav a { padding: .8rem 1rem; border-radius: 10px; }
  .site-nav a:hover { background: var(--green-soft); }
  .site-nav a::after { display: none; }

  .nav-toggle { display: inline-flex; }
}

/* Mobiel: hetzelfde vloervlak, maar kleiner en in minder dan een seconde
   gelegd. Een choreografie van twee seconden op een telefoon voelt traag. */
@media (max-width: 767px) {
  .hero {
    --vloer: clamp(230px, 56vw, 330px);
    --plank: 320ms;
    --stap: 4ms;          /* 161 * 4 + 320 = 964ms, ruim binnen de seconde */
  }
  .hero-copy .lead { max-width: none; }
}

@media (max-width: 419px) {
  .header-cta { display: none; }
}

/* Vanaf tablet blijft de doorsnede links staan terwijl de stappen erlangs
   schuiven. De sticky kolom moet daarvoor even hoog zijn als de lijst, dus
   die rekt gewoon mee met de grid-rij. */
@media (min-width: 768px) {
  .doorsnede-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: clamp(2rem, 5vw, 4.5rem);
  }

  .doorsnede-sticky { position: sticky; top: calc(50vh - 12rem); }

  .doorsnede-layout .steps { grid-template-columns: 1fr; gap: 0; }
  .doorsnede-layout .step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 68vh;
  }

  /* De stap waar je bent staat vol, de rest wacht rustig af.
     Alleen dimmen als de meeloper ook echt draait: zet main.js de klasse
     doorsnede-loopt niet (geen js, of "verminder beweging" aan), dan krijgt
     geen enkele stap ooit is-actief en zou alles blijven staan op 42%. Dat
     haalt bij lange na het contrast niet. */
  .doorsnede-layout.doorsnede-loopt .step { opacity: .42; transition: opacity .45s var(--ease); }
  .doorsnede-layout.doorsnede-loopt .step.is-actief { opacity: 1; }
}

/* Onder 768px hetzelfde idee, maar gestapeld: de tekening bovenaan, de stappen
   schuiven er onderdoor.

   Sticky zit op .doorsnede-kolom en niet op de tekening zelf. Dat is geen
   willekeur: een sticky element kan alleen bewegen binnen zijn eigen ouder, en
   op mobiel is die ouder precies even hoog als de tekening. Dan blijft er niets
   om in te schuiven en staat hij stil. De kolom is wel een direct kind van
   .doorsnede-layout en die is zo hoog als de hele stappenlijst.

   Op desktop werkt het wel op de tekening zelf, want daar is de kolom een
   grid-cel die met de rij meerekt. */
@media (max-width: 767px) {
  .doorsnede-kolom {
    position: sticky;
    top: calc(72px + .4rem);   /* 72px is de hoogte van de plakkende header */
    z-index: 2;

    /* De tekst gaat hier straks onderdoor, dus dit vlak moet dekken. Tot in de
       gutters, anders piept er links en rechts tekst langs. */
    background: var(--cream);
    margin-inline: calc(var(--gutter) * -1);
    padding: 0 var(--gutter) .5rem;
  }

  /* Onderaan geen harde rand maar een zachte overgang */
  .doorsnede-kolom::after {
    content: "";
    position: absolute;
    inset: 100% 0 auto 0;
    height: 1.4rem;
    background: linear-gradient(var(--cream), rgba(244, 243, 240, 0));
    pointer-events: none;
  }

  /* Kleiner dan de volle breedte, anders eet de tekening het halve scherm op
     en komt de tekst van de stap onder de tekening terecht. */
  .doorsnede-kolom .doorsnede { max-width: 19rem; margin-inline: auto; }

  .doorsnede-layout .steps { grid-template-columns: 1fr; gap: 0; }

  /* Korter dan op desktop. De tekst staat midden in zijn eigen vak, dus hoe
     hoger dit vak, hoe groter het gat tussen de tekening en de tekst, en hoe
     verder de tekst reist voor de volgende stap het overneemt. Boven de 45vh
     schuift hij aan het eind achter de tekening. */
  .doorsnede-layout .step {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 40vh;
  }

  /* Zelfde verhaal als op desktop: dimmen mag alleen als de meeloper draait */
  .doorsnede-layout.doorsnede-loopt .step { opacity: .4; transition: opacity .4s var(--ease); }
  .doorsnede-layout.doorsnede-loopt .step.is-actief { opacity: 1; }
}

@media (min-width: 560px) {
  .cards { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.75rem; }
  .work-grid { grid-template-columns: repeat(2, 1fr); }
  .quotes { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 820px) {
  :root { --gutter: 28px; }

  .over-inner { grid-template-columns: .8fr 1.2fr; }

  .cards { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(4, 1fr); }
  .work-grid { grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }

  /* Twee reviews, dus twee kolommen. Komt er een derde bij: maak er 3 van. */
  .quotes { grid-template-columns: repeat(2, 1fr); }

  /* Staalkaart: de minivloer links, de keuzes ernaast onder elkaar */
  .kiezer {
    grid-template-columns: minmax(0, 1.62fr) minmax(13rem, .8fr);
    grid-template-rows: max-content 1fr;
    gap: 1.25rem clamp(2rem, 4vw, 3.25rem);
  }
  .kiezer-vloer   { grid-area: 1 / 1 / 3 / 2; max-width: none; }
  .kiezer-knoppen { grid-area: 1 / 2 / 2 / 3; flex-direction: column; align-items: stretch; }
  .kiezer-bij     { grid-area: 2 / 2 / 3 / 3; align-self: start; }
  .patroon-knop   { text-align: left; }

  .contact-card { grid-template-columns: 1.35fr .65fr; gap: 3rem; }
  .contact-list {
    border-top: 0;
    border-left: 1px solid rgba(244, 243, 240, .2);
    padding-top: 0;
    padding-left: 2.5rem;
  }
}

/* --------------------------------------------------------------------------
   Bewegingsvoorkeur respecteren
   -------------------------------------------------------------------------- */

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

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }

  /* De vloer ligt meteen compleet, de knoppen staan er meteen bij */
  .pk,
  .hero-copy .btn-row,
  .hero-copy .trustline { opacity: 1; transform: none; animation: none !important; }

  /* Het patroon staat er meteen, zonder dat de planken eroverheen schuiven */
  .lp { transition: none !important; }

  .js [data-reveal] { opacity: 1; translate: none; }

  .btn:hover,
  .card:hover,
  .work-item:hover figure { transform: none; }
  .over-photo img:hover { transform: rotate(-1.5deg); }
}

/* --------------------------------------------------------------------------
   Print
   -------------------------------------------------------------------------- */

@media print {
  .site-header, .hero-stage, .nav-toggle { display: none; }
  body { background: #fff; }
  .contact-card { background: #fff; color: var(--ink); border: 1px solid var(--ink); }
  .contact-card h2, .contact-card .lead, .contact-list a { color: var(--ink); }
}