/* ============================================================
   Dino Living — stylesheet
   ============================================================ */

:root{
  --ink:        #171512;
  --ink-soft:   #55504a;
  --ink-mute:   #877f75;
  --cream:      #FBF7F0;
  --cream-2:    #F3ECE1;
  --sand:       #E5D9C6;
  --line:       #E2D8C8;

  --green:      #1d3a2f;
  --green-2:    #2c5745;
  --green-soft: #3f7a61;

  --oak:        #C08A4B;
  --oak-deep:   #9A6A33;
  --oak-light:  #E0B87E;

  --radius:   18px;
  --radius-s: 12px;
  --wrap:     1200px;

  --shadow-s: 0 2px 8px rgba(23,21,18,.05), 0 8px 24px rgba(23,21,18,.06);
  --shadow-m: 0 4px 14px rgba(23,21,18,.07), 0 22px 50px -18px rgba(23,21,18,.22);

  --f-display: "Fraunces", Georgia, "Times New Roman", serif;
  --f-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:96px; }
body{
  margin:0; background:var(--cream); color:var(--ink);
  font-family:var(--f-body); font-size:17px; line-height:1.65;
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
img,svg{ max-width:100%; }
a{ color:inherit; }

h1,h2,h3,h4{ font-family:var(--f-display); font-weight:600; line-height:1.1; margin:0; letter-spacing:-.015em; }
h1{ font-size:clamp(2.6rem, 6vw, 4.4rem); }
h2{ font-size:clamp(1.9rem, 3.6vw, 2.9rem); }
h3{ font-size:1.28rem; }
p{ margin:0 0 1rem; }

.wrap{ width:min(100% - 2.5rem, var(--wrap)); margin-inline:auto; }

.skip-link{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--green); color:#fff; padding:.7rem 1.1rem; border-radius:0 0 10px 0;
}
.skip-link:focus{ left:0; }

:focus-visible{ outline:3px solid var(--green-soft); outline-offset:3px; border-radius:6px; }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(22px); transition:opacity .7s cubic-bezier(.2,.7,.3,1) var(--d,0s), transform .7s cubic-bezier(.2,.7,.3,1) var(--d,0s); }
.reveal.is-in{ opacity:1; transform:none; }

/* ============================================================
   Topbar + header
   ============================================================ */
.topbar{ background:var(--green); color:#e7f0ea; font-size:.83rem; }
.topbar__in{ display:flex; gap:1rem; justify-content:space-between; align-items:center; min-height:40px; flex-wrap:wrap; }
.topbar p{ margin:0; }
.topbar a{ text-decoration:none; font-weight:600; }
.topbar a:hover{ text-decoration:underline; }
.topbar__contact{ display:flex; gap:.6rem; align-items:center; }
.dot{
  display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--oak-light);
  margin-right:.35rem; animation:pulse 2.6s ease-in-out infinite;
}
@keyframes pulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.4; transform:scale(.7);} }

.site-header{
  position:sticky; top:0; z-index:100;
  background:rgba(251,247,240,.82); backdrop-filter:blur(14px) saturate(1.4);
  border-bottom:1px solid transparent; transition:border-color .3s, box-shadow .3s;
}
.site-header.is-stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(23,21,18,.5); }
.site-header__in{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:74px; }

.logo{ display:flex; align-items:center; text-decoration:none; flex:none; }
.logo img{
  display:block; width:auto; height:52px;
  transition:transform .45s cubic-bezier(.34,1.56,.64,1);
}
.logo:hover img{ transform:translateY(-3px) rotate(-2deg); }

.nav{ display:flex; align-items:center; gap:.35rem; }
.nav a{
  text-decoration:none; font-size:.95rem; font-weight:500; color:var(--ink-soft);
  padding:.55rem .8rem; border-radius:999px; transition:color .2s, background .2s;
}
.nav a:hover{ color:var(--ink); background:var(--cream-2); }
.nav a.is-current{ color:var(--green); background:var(--cream-2); }
.nav__cta{
  background:var(--green) !important; color:#fff !important; font-weight:600;
  padding:.62rem 1.15rem !important; margin-left:.4rem;
  box-shadow:0 8px 20px -10px rgba(29,58,47,.8);
}
.nav__cta:hover{ background:var(--green-2) !important; transform:translateY(-1px); }

.burger{ display:none; width:44px; height:44px; border:0; background:none; cursor:pointer; padding:10px; }
.burger span{ display:block; height:2px; background:var(--ink); border-radius:2px; transition:transform .3s, opacity .2s; }
.burger span+span{ margin-top:6px; }
.burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(8px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-8px) rotate(-45deg); }

/* ============================================================
   Hero — de kamer beslaat het hele eerste scherm
   ============================================================ */
.hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:min(900px, 94svh);
  /* twee rijen: de wand groeit mee met de tekst, de vloer krijgt de rest.
     Zo botst de kop nooit met de vloer, op geen enkel scherm. */
  display:grid; grid-template-columns:100%;
  grid-template-rows:auto minmax(clamp(260px,38vh,460px), 1fr);
  background:#efe7db;
}
.hero > *{ grid-column:1; }

/* ---------- de wand ---------- */
.hero__wall{
  grid-row:1; position:relative;
  background:linear-gradient(180deg,#fbf7f0 0%,#f4ece0 58%,#e9dfcf 100%);
}
.hero__wall::before{
  content:""; position:absolute; inset:0;
  background:
    radial-gradient(62% 90% at 50% 122%, rgba(23,21,18,.16), transparent 70%),
    radial-gradient(34% 80% at 16% -10%, rgba(255,255,255,.85), transparent 70%);
}
/* de plint sluit de wand af en werpt zijn schaduw op de nieuwe vloer */
.hero__wall::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:14px; z-index:2;
  background:linear-gradient(180deg,#fffdf9 0%,#f2ead9 55%,#dccfba 100%);
  box-shadow:0 6px 16px rgba(23,21,18,.22);
}
.hero__glow{
  position:absolute; left:-10%; right:-10%; top:-14%; bottom:-6%;
  background:
    radial-gradient(46% 62% at 24% 40%, rgba(192,138,75,.22), transparent 70%),
    radial-gradient(42% 58% at 80% 22%, rgba(63,122,97,.16), transparent 70%);
  pointer-events:none;
}

/* ---------- de vloer krijgt de onderste rij ---------- */
.hero__floor{ grid-row:2; position:relative; overflow:hidden; }

/* ---------- de tekst staat op de wand ---------- */
.hero__in{
  grid-row:1; position:relative; z-index:1; align-self:center;
  padding:clamp(2rem,4.5vw,3.4rem) 0 clamp(2.2rem,5vw,3.6rem);
}
.hero__copy{ max-width:min(100%, 34rem); }

.eyebrow{
  font-size:.78rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--oak-deep); margin:0 0 .9rem;
}
.hl{ position:relative; white-space:nowrap; color:var(--green); }
.hl::after{
  content:""; position:absolute; left:-.04em; right:-.04em; bottom:.06em; height:.3em;
  background:linear-gradient(90deg, var(--oak-light), var(--oak));
  opacity:.42; border-radius:.15em; z-index:-1;
  transform-origin:left; animation:swipe 1s cubic-bezier(.2,.7,.3,1) .5s both;
}
@keyframes swipe{ from{ transform:scaleX(0);} to{ transform:scaleX(1);} }
.lead{ font-size:1.09rem; color:var(--ink-soft); max-width:34em; margin-top:1.2rem; }

.hero__actions{ display:flex; flex-wrap:wrap; gap:.75rem; margin:1.7rem 0 0; }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  font:600 .97rem/1 var(--f-body); text-decoration:none; cursor:pointer;
  padding:.95rem 1.5rem; border-radius:999px; border:1.5px solid transparent;
  transition:transform .2s cubic-bezier(.34,1.4,.64,1), box-shadow .25s, background .2s, color .2s;
}
.btn--primary{ background:var(--green); color:#fff; box-shadow:0 12px 26px -14px rgba(29,58,47,.95); }
.btn--primary:hover{ background:var(--green-2); transform:translateY(-2px); box-shadow:0 18px 34px -16px rgba(29,58,47,.95); }
.section--dark .btn--primary{ background:var(--oak); color:#1a1510; box-shadow:0 12px 26px -14px rgba(0,0,0,.7); }
.section--dark .btn--primary:hover{ background:var(--oak-light); }
.btn--ghost{ border-color:var(--sand); color:var(--ink); background:rgba(255,255,255,.55); }
.btn--ghost:hover{ border-color:var(--green-soft); color:var(--green); transform:translateY(-2px); }
.btn--full{ width:100%; }

/* ---------- bediening, staand op de nieuwe vloer ---------- */
.hero__controls{
  grid-row:2; position:relative; z-index:2;
  align-self:end; justify-self:center;
  padding:0 1.25rem clamp(1.4rem,3.4vh,2.6rem);
  display:flex; flex-direction:column; align-items:center; gap:.6rem;
}
.hero__hint{
  margin:0; font-size:.82rem; color:#4a3a28; text-align:center;
  padding:.32rem .9rem; border-radius:999px;
  background:rgba(255,252,246,.78);
}
.hero__hint b{ color:#2c2116; }
.hero__hint span{ opacity:.72; }


/* ============================================================
   DE ANIMATIE — de vloer die zichzelf legt
   ============================================================ */
.stage{
  position:absolute; left:-6%; right:-6%; top:0; bottom:0;
  perspective:clamp(640px, 62vw, 1400px); perspective-origin:50% 0%;
  overflow:hidden;             /* knipt de vloer netjes af bij de plint */
}
.plane{
  position:absolute; inset:0;
  transform-style:preserve-3d;
  transform:rotateX(60deg);
  transform-origin:50% 0%;
}

/* elke plank
   De nerf zit in de achtergrond van de plank zelf: floor.js zet er een
   repeating-linear-gradient bovenop de houttint. Dat scheelt per plank een
   pseudo-element én een mix-blend-mode — met honderden planken op het scherm
   is dat het verschil tussen soepel en stroperig. */
.plank{
  position:absolute; border-radius:2px;
  background:var(--pk-bg,#c9a373);
  box-shadow:inset 0 0 0 .5px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
  opacity:0;
  /* --sx/--sy staan als inline stijl op de plank (de richting waaruit hij
     inschuift); --k schakelt van 1 naar 0 zodra de vloer gelegd wordt. */
  transform:
    translate3d(
      calc(var(--sx,0px) * var(--k,1)),
      calc(var(--sy,0px) * var(--k,1)),
      calc(70px * var(--k,1)))
    rotate(var(--rot,0deg))
    scale(calc(1 - .1 * var(--k,1)));
  transition:
    transform .66s cubic-bezier(.16,1.02,.29,1) var(--pd,0s),
    opacity   .3s  ease                        var(--pd,0s);
}
/* alleen zolang de golf loopt vraagt een plank om een eigen laag; daarna
   haalt floor.js de klasse weg en geeft de browser het geheugen terug */
.plane.is-laying .plank{ will-change:transform,opacity; }
.plane.is-laid .plank{ opacity:1; --k:0; }

.plank--carpet{
  border-radius:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(23,21,18,.13);
}

/* licht over de vloer: donker bij de plint, warm licht in het midden */
.stage::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(23,21,18,.34) 0%, rgba(23,21,18,0) 20%),
    radial-gradient(52% 46% at 50% 6%, rgba(255,252,244,.34), transparent 66%),
    radial-gradient(120% 90% at 50% 8%, transparent 42%, rgba(23,21,18,.26) 100%);
}

/* de dino loopt over de nieuwe vloer */
.dino{
  position:absolute; left:10%; bottom:33%; z-index:1; width:clamp(112px,12.5vw,248px); height:auto;
  color:var(--green-2); opacity:0; pointer-events:none;
  filter:drop-shadow(0 10px 12px rgba(23,21,18,.32));
}
.dino path,.dino rect,.dino ellipse{ fill:currentColor; }
.dino__limb{ fill:none; stroke:currentColor; stroke-width:15; stroke-linecap:round; }
.dino__limb--neck{ stroke-width:18; }
.dino__arm{ fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; }
.dino__eye{ fill:#fff; }
.dino__pupil{ fill:#12241d; }
.dino__spike{ fill:var(--oak); }
.dino__leg--far rect{ fill:var(--green); }   /* verder weg = donkerder */
.dino.is-walking{ animation:dinoWalk 15s linear forwards; }
@keyframes dinoWalk{
  0%   { opacity:0; transform:translateX(0) scaleX(1); }
  4%   { opacity:1; transform:translateX(calc(var(--walk,300px) * .04)) scaleX(1); }
  46%  { opacity:1; transform:translateX(var(--walk,300px)) scaleX(1); }
  50%  { opacity:1; transform:translateX(var(--walk,300px)) scaleX(-1); }
  96%  { opacity:1; transform:translateX(0) scaleX(-1); }
  100% { opacity:0; transform:translateX(0) scaleX(-1); }
}

/* ---------- de loopcyclus ----------
   Opgebouwd als een rig: het svg-element verplaatst zich, de rig veert,
   de poten draaien om de heup en de voeten draaien tegen zodat ze vlak
   op de vloer blijven staan.

   Beide poten draaien om vrijwel hetzelfde heuppunt — één bekken, twee
   poten die elkaar kruisen. De standfase (0→50%) loopt lineair: de voet
   staat stil op de vloer terwijl het lichaam eroverheen schuift. De
   zwaaifase (50→100%) versnelt: de poot zwiept naar voren voor de
   volgende stap. Die twee tempo's zijn wat een pas een pas maakt. */
.dino__leg,.dino__foot,.dino__rig{ transform-box:view-box; }

.dino__rig{ animation:dinoBob .31s ease-in-out infinite; transform-origin:70px 110px; }
/* het lichaam staat het laagst als de poten gespreid staan en het hoogst
   als er één recht onder staat: twee keer veren per pas */
@keyframes dinoBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-3.4px); } }

.dino__leg--near{ transform-origin:73px 64px; animation:dinoStep .62s infinite; }
.dino__leg--far { transform-origin:68.5px 64px; animation:dinoStep .62s infinite -.31s; }
@keyframes dinoStep{
  0%   { transform:rotate(22deg);  animation-timing-function:linear; }
  50%  { transform:rotate(-22deg); animation-timing-function:cubic-bezier(.45,0,.35,1); }
  100% { transform:rotate(22deg); }
}

/* de voet draait precies tegengesteld aan de poot en blijft dus waterpas */
.dino__leg--near .dino__foot{ transform-origin:73px 102px; animation:dinoFoot .62s infinite; }
.dino__leg--far  .dino__foot{ transform-origin:68.5px 101px; animation:dinoFoot .62s infinite -.31s; }
@keyframes dinoFoot{
  0%   { transform:rotate(-22deg); animation-timing-function:linear; }
  50%  { transform:rotate(22deg);  animation-timing-function:cubic-bezier(.45,0,.35,1); }
  100% { transform:rotate(-22deg); }
}

/* het armpje zwaait tegen de poten in, zoals een arm dat doet */
.dino__arm{ transform-box:view-box; transform-origin:93px 57px; animation:dinoArm .62s ease-in-out infinite; }
@keyframes dinoArm{ 0%,100%{ transform:rotate(-9deg); } 50%{ transform:rotate(9deg); } }

/* pootafdrukken */
.tracks{ position:absolute; inset:0; pointer-events:none; }
/* Eén afdruk: drie tenen en een bal, allemaal in procenten van het element,
   zodat de afdruk meeschaalt met de dino. Het element staat met zijn hart op
   het voetpunt, dus de verschuiving zit in de keyframes verwerkt. */
.track{
  position:absolute; width:26px; aspect-ratio:16/13; opacity:0;
  animation:trackFade 2.6s ease-out forwards;
  background:
    radial-gradient(closest-side, rgba(23,21,18,.4) 78%, transparent 80%)   0%   6%/30% 52% no-repeat,
    radial-gradient(closest-side, rgba(23,21,18,.4) 78%, transparent 80%)  50%   0%/30% 60% no-repeat,
    radial-gradient(closest-side, rgba(23,21,18,.4) 78%, transparent 80%) 100%   6%/30% 52% no-repeat,
    radial-gradient(closest-side, rgba(23,21,18,.32) 76%, transparent 80%) 50% 100%/62% 56% no-repeat;
}
@keyframes trackFade{
  0%  { opacity:0; transform:translate(-50%,-50%) rotate(var(--tr,0deg)) scale(.45); }
  12% { opacity:1; transform:translate(-50%,-50%) rotate(var(--tr,0deg)) scale(1); }
  100%{ opacity:0; transform:translate(-50%,-50%) rotate(var(--tr,0deg)) scale(1.06); }
}

/* de keuzeknoppen */
.swatches{
  display:flex; gap:.35rem; padding:.32rem; border-radius:999px;
  background:#fffdf9; border:1px solid rgba(23,21,18,.06);
  box-shadow:var(--shadow-m);
}
.swatch{
  display:inline-flex; align-items:center; gap:.45rem; border:0; cursor:pointer;
  font:600 .86rem/1 var(--f-body); color:var(--ink-soft); background:transparent;
  padding:.62rem .95rem; border-radius:999px; transition:background .25s, color .25s, box-shadow .25s;
}
.swatch:hover{ color:var(--ink); }
.swatch.is-active{ background:var(--green); color:#fff; box-shadow:0 8px 18px -10px rgba(29,58,47,.9); }
.swatch__chip{ width:14px; height:14px; border-radius:4px; flex:none; box-shadow:inset 0 0 0 1px rgba(0,0,0,.14); }
.swatch__chip--laminaat{ background:linear-gradient(135deg,#d9ac74,#a9743c); }
.swatch__chip--visgraat{ background:linear-gradient(135deg,#b9a48d,#7d6a55); }
.swatch__chip--tapijt{ background:linear-gradient(135deg,#cfc4b4,#8d8274); }
/* ============================================================
   USP
   ============================================================ */
.usps{ background:var(--cream-2); border-block:1px solid var(--line); padding:clamp(2.4rem,4vw,3.4rem) 0; }
.usps__grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.6rem; }
.usp svg{ width:26px; height:26px; fill:none; stroke:var(--green-soft); stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; margin-bottom:.7rem; }
.usp h3{ font-size:1.06rem; margin-bottom:.35rem; }
.usp p{ margin:0; font-size:.93rem; color:var(--ink-soft); }

/* ============================================================
   Secties
   ============================================================ */
.section{ padding:clamp(3.4rem,7vw,6rem) 0; }
.section--tight{ padding:clamp(2.6rem,5vw,4rem) 0; }
.section--dark{ background:var(--green); color:#e9f1ec; }
.section--dark .eyebrow{ color:var(--oak-light); }
.section--dark .section__intro{ color:#bed3c8; }

.section__head{ max-width:44rem; margin-bottom:clamp(2rem,4vw,3rem); }
.section__head--row{ display:flex; gap:2.5rem; align-items:end; justify-content:space-between; max-width:none; }
.section__head--row .section__intro{ max-width:30rem; margin:0; }
.section__intro{ color:var(--ink-soft); margin-top:.9rem; }

/* ---------- kaarten ---------- */
/* twee kaarten naast elkaar: de foto krijgt zo bijna dubbel zoveel breedte,
   en met een vaste beeldverhouding groeit de hoogte netjes mee */
.cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.4rem,2vw,1.9rem); }
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  display:flex; flex-direction:column; box-shadow:var(--shadow-s);
  transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s;
}
.card:hover{ transform:translateY(-6px); box-shadow:var(--shadow-m); border-color:var(--sand); }
.card__art{ aspect-ratio:16/10; min-height:180px; max-height:360px; position:relative; overflow:hidden; }
.card__art::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(23,21,18,0) 45%, rgba(23,21,18,.22));
}
/* de kaartkoppen tonen de echte foto's van dino-living.nl */
.card__art{ background:var(--sand); }
.card__art--laminaat  { background-image:url("../img/vloer-laminaat.jpg"); }
.card__art--pvc       { background-image:url("../img/vloer-pvc-visgraat.jpg"); }
.card__art--tapijt    { background-image:url("../img/vloer-tapijt.jpg"); }
.card__art--marmoleum { background-image:url("../img/vloer-marmoleum.jpg"); }
.card__art--parket    { background-image:url("../img/vloer-parket.jpg"); }
.card__art--gordijnen { background-image:url("../img/raamdecoratie.jpg"); }
.card__art[class*="card__art--"]{ background-size:cover; background-position:center; background-repeat:no-repeat; }
.card__art--marmoleum{ background-position:right center; }
.card__art--tapijt{ background-position:center 38%; }

.card__body{ padding:1.35rem 1.4rem 1.6rem; display:flex; flex-direction:column; flex:1; }
.card__price{ font-family:var(--f-display); font-size:1.15rem; color:var(--oak-deep); margin:.3rem 0 .7rem; }
.card__price span{ font-family:var(--f-body); font-size:.82rem; color:var(--ink-mute); }
.card__body>p:not(.card__price){ font-size:.94rem; color:var(--ink-soft); }
.ticks{ list-style:none; margin:auto 0 0; padding:.9rem 0 0; border-top:1px dashed var(--line); font-size:.87rem; color:var(--ink-soft); }
.ticks li{ position:relative; padding-left:1.4rem; margin-top:.4rem; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.42em; width:11px; height:6px;
  border-left:2px solid var(--green-soft); border-bottom:2px solid var(--green-soft);
  transform:rotate(-45deg);
}

/* ---------- diensten ---------- */
.services{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.14); border-radius:var(--radius); overflow:hidden; }
.service{ background:var(--green); padding:1.7rem 1.5rem 1.8rem; transition:background .3s; }
.service:hover{ background:var(--green-2); }
.service__no{ font-family:var(--f-display); font-size:.86rem; color:var(--oak-light); letter-spacing:.08em; }
.service h3{ margin:.5rem 0 .45rem; color:#fff; font-size:1.14rem; }
.service p{ margin:0; font-size:.93rem; color:#bed3c8; }

/* ---------- merkenband ----------
   Eén doorlopend vlak in plaats van losse kaartjes: de logo's verschillen
   sterk in vorm en gewicht, een gedeelde band met haarlijnen ertussen geeft
   ze een gemeenschappelijk ritme. De lijnen lopen als naden tussen vloerdelen.
   De band schuift van rechts naar links, zodat er meer merken in passen dan
   in één beeld staan; site.js dupliceert de rij en translate(-50%) valt dan
   precies samen met het begin — daarom zit de ruimte tussen de merken in de
   padding van elk item en niet in een gap, anders klopt die helft niet. */
.brandbar{
  background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-s);
}
.brandbar__marquee{
  overflow:hidden;
  /* de logo's doven aan de randen uit in plaats van hard af te snijden:
     het oog leest de band dan als doorlopend, niet als een venster */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
}
.brandbar__track{
  list-style:none; margin:0; padding:0;
  display:flex; width:max-content;
  animation:brandbar-scroll var(--brandbar-dur,38s) linear infinite;
}
.brandbar__marquee:hover .brandbar__track{ animation-play-state:paused; }
@keyframes brandbar-scroll{
  from{ transform:translate3d(0,0,0); }
  to  { transform:translate3d(-50%,0,0); }
}
.brandbar__item{
  flex:0 0 auto; width:clamp(170px,15vw,220px);
  display:grid; grid-template-rows:1fr auto; justify-items:center; align-content:center;
  gap:.85rem; padding:1.7rem 1.1rem 1.25rem;
  border-right:1px solid var(--line);
}
.brandbar__logo{ display:grid; place-items:center; height:42px; }
.brandbar__logo img{
  display:block; width:auto; max-width:100%;
  transition:transform .35s cubic-bezier(.34,1.56,.64,1);
}

/* optische correctie: elk logo heeft een eigen intrinsiek gewicht,
   gelijke pixelhoogte zou ze juist ongelijk laten ogen */
.brandbar__logo--quickstep img{ max-height:34px; }  /* beeld- én woordmerk */
.brandbar__logo--forbo     img{ max-height:26px; }  /* breed, laag woordmerk */
.brandbar__logo--bonaparte img{ max-height:34px; }  /* fijn en licht */
.brandbar__logo--parade    img{ max-height:28px; }  /* compact woordmerk */
.brandbar__logo--ahoh      img{ max-height:22px; max-width:92%; }  /* lang en fijn */

.brandbar__for{
  font-size:.68rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-mute);
}
.brandbar__note{
  margin:0; background:#fff; border-top:1px solid var(--line);
  padding:.95rem 1.2rem; text-align:center;
  font-size:.88rem; color:var(--ink-mute);
}

/* ---------- fotogalerij showroom ---------- */
.gallery{
  display:grid; grid-template-columns:1fr 1fr 1fr; gap:1.1rem;
  margin-top:clamp(2rem,4vw,3rem);
}
.gallery__item{
  position:relative; margin:0; overflow:hidden;
  border-radius:var(--radius); box-shadow:var(--shadow-s); background:var(--sand);
}
.gallery__item img{
  display:block; width:100%; height:260px; object-fit:cover;
  transition:transform .6s cubic-bezier(.2,.7,.3,1);
}
.gallery__item--tall img{ object-position:center 32%; }
.gallery__item:hover img{ transform:scale(1.05); }
.gallery__item figcaption{
  position:absolute; inset:auto 0 0 0; padding:1.6rem .95rem .75rem;
  font-size:.85rem; font-weight:500; color:#fff;
  background:linear-gradient(180deg, rgba(23,21,18,0), rgba(23,21,18,.72));
}

/* ---------- showroom + openingstijden ---------- */
.showroom__grid{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.showroom__copy p{ color:var(--ink-soft); }
.showroom__actions{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem; }
.hours{ background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:1.6rem 1.7rem 1.4rem; box-shadow:var(--shadow-s); }
.hours h3{ margin-bottom:.9rem; }
.hours__table{ width:100%; border-collapse:collapse; font-size:.95rem; }
.hours__table th{ text-align:left; font-weight:500; color:var(--ink-soft); padding:.5rem 0; }
.hours__table td{ text-align:right; padding:.5rem 0; font-variant-numeric:tabular-nums; }
.hours__table tr+tr{ border-top:1px dashed var(--line); }
.hours__table tr.is-today th{ color:var(--green); font-weight:700; }
.hours__table tr.is-today td{ font-weight:700; }
.is-closed{ color:var(--ink-mute); }
.hours__now{ margin:1rem 0 0; padding-top:1rem; border-top:1px solid var(--line); font-size:.88rem; font-weight:600; }
.hours__now b{ color:var(--green-soft); }
.hours__now.is-closed-now b{ color:var(--oak-deep); }

/* ---------- werkgebied ---------- */
.werk__grid{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.82fr);
  gap:clamp(2rem,4vw,3.5rem); align-items:center;
}
.places{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:.6rem; }
.places li{
  display:inline-flex; align-items:center; gap:.5rem; cursor:default;
  padding:.65rem 1.25rem; border-radius:999px; background:#fff; border:1px solid var(--line);
  font-weight:600; font-size:.95rem; color:var(--ink-soft);
  transition:transform .25s, color .25s, border-color .25s, box-shadow .25s;
}
.places li:hover,
.places li.is-on{
  transform:translateY(-2px); color:var(--green);
  border-color:var(--green-soft); box-shadow:var(--shadow-s);
}
.places__tag{
  font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  color:#fff; background:var(--green); padding:.2rem .5rem; border-radius:999px;
}
.places__note{ margin-top:1.2rem; color:var(--ink-mute); font-size:.92rem; }

/* de kaart */
.map{
  position:relative; margin:0 0 2.8rem; justify-self:center;
  width:min(100%, 480px); aspect-ratio:612.54/723.62;
}
.map__land{
  width:100%; height:100%; display:block;
  filter:drop-shadow(0 18px 26px rgba(23,21,18,.14));
}
.map__overlay,.map__pins{ position:absolute; inset:0; }
.map__pins{ pointer-events:none; }

/* de routes tekenen zichzelf vanuit Dronten */
.map__routes path{ stroke-dasharray:1; stroke-dashoffset:1; opacity:.85; }
.map.is-in .map__routes path{
  animation:routeDraw .9s cubic-bezier(.3,.8,.4,1) forwards;
  animation-delay:calc(.35s + var(--i,0) * .16s);
}
@keyframes routeDraw{ to{ stroke-dashoffset:0; } }

/* de plaatsen */
.pin{
  position:absolute; left:var(--x); top:var(--y);
  display:flex; align-items:center; gap:.4rem;
  transform:translate(-4px,-50%) scale(.4); opacity:0;
  font:600 .72rem/1 var(--f-body); color:var(--ink-soft); white-space:nowrap;
  transition:color .25s;
}
.pin--left{ flex-direction:row-reverse; transform-origin:right center; transform:translate(calc(-100% + 4px),-50%) scale(.4); }
.map.is-in .pin{ animation:pinPop .5s cubic-bezier(.34,1.5,.5,1) forwards; animation-delay:calc(.75s + var(--i,0) * .1s); }
@keyframes pinPop{ to{ opacity:1; transform:translate(-4px,-50%) scale(1); } }
.map.is-in .pin--left{ animation-name:pinPopLeft; }
@keyframes pinPopLeft{ to{ opacity:1; transform:translate(calc(-100% + 4px),-50%) scale(1); } }

.pin{ pointer-events:auto; }
.pin i{
  position:relative; width:9px; height:9px; border-radius:50%; flex:none;
  background:var(--green-soft); box-shadow:0 0 0 3px rgba(251,247,240,.9);
}
.pin b{
  font-weight:600; padding:.14rem .38rem; border-radius:5px; color:var(--ink);
  background:rgba(251,247,240,.92); box-shadow:0 1px 3px rgba(23,21,18,.12);
}
.pin--home i{
  width:13px; height:13px; background:var(--oak);
  box-shadow:0 0 0 3px rgba(251,247,240,.95), 0 0 0 4px rgba(192,138,75,.45);
}
.pin--home b{ color:var(--green); font-weight:700; }
/* de thuisbasis klopt rustig door */
.pin--home i::after{
  content:""; position:absolute; left:50%; top:50%; width:21px; height:21px; margin:-10.5px 0 0 -10.5px;
  border-radius:50%; border:1.5px solid var(--oak);
  animation:homePulse 2.8s ease-out 1.4s infinite;
}
@keyframes homePulse{
  0%      { transform:scale(.55); opacity:.85; }
  70%,100%{ transform:scale(1.6);  opacity:0; }
}
.pin.is-on{ color:var(--green); }
.pin.is-on i{ background:var(--green); transform:scale(1.35); }
.pin i{ transition:transform .25s, background .25s; }

/* de mascotte kijkt vanaf de zijlijn mee */
.map__dino{
  position:absolute; right:-2%; bottom:2%; width:26%; height:auto;
  color:var(--green-2); transform:scaleX(-1);
  filter:drop-shadow(0 8px 10px rgba(23,21,18,.18));
}
.map__dino path,.map__dino rect,.map__dino ellipse{ fill:currentColor; }
.map__cap{
  position:absolute; left:0; right:0; bottom:-2.6rem;
  font-size:.82rem; color:var(--ink-mute); text-align:center;
}

/* ---------- contact ---------- */
.contact__grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(2rem,4vw,3.5rem); align-items:start; }
.contact__list{ list-style:none; margin:1.8rem 0; padding:0; }
.contact__list li{ display:flex; gap:1.4rem; padding:.9rem 0; border-top:1px solid rgba(255,255,255,.16); }
.contact__k{ flex:0 0 8rem; font-size:.78rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--oak-light); padding-top:.2rem; }
.contact__v{ color:#fff; }
.contact__v a{ text-decoration:none; border-bottom:1px solid rgba(255,255,255,.35); }
.contact__v a:hover{ border-color:#fff; }

.cform{ background:#fff; color:var(--ink); border-radius:var(--radius); padding:1.8rem; box-shadow:var(--shadow-m); }
.cform h3{ margin-bottom:1.2rem; }
.cform__row{ margin-bottom:1rem; }
.cform__two{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cform label{ display:block; font-size:.83rem; font-weight:600; color:var(--ink-soft); margin-bottom:.35rem; }
.cform input,.cform select,.cform textarea{
  width:100%; font:400 .97rem/1.5 var(--f-body); color:var(--ink);
  padding:.75rem .9rem; border:1.5px solid var(--line); border-radius:var(--radius-s);
  background:var(--cream); transition:border-color .2s, background .2s;
}
.cform input:focus,.cform select:focus,.cform textarea:focus{ border-color:var(--green-soft); background:#fff; outline:none; }
.cform textarea{ resize:vertical; }
.cform input.is-error,.cform textarea.is-error{ border-color:#b4472f; background:#fdf3f0; }
.cform__note{ margin:.9rem 0 0; font-size:.88rem; min-height:1.2em; color:var(--green-soft); font-weight:600; }
.cform__note.is-error{ color:#b4472f; }

/* ============================================================
   Footer
   ============================================================ */
.site-footer{ background:var(--ink); color:#c9c2b8; font-size:.92rem; }
.site-footer__in{
  display:grid; grid-template-columns:1.5fr 1fr 1fr 1.1fr; gap:2rem;
  padding:clamp(2.6rem,5vw,4rem) 0 2.5rem;
}

/* ---------- horizon: de contactsectie is de lucht, de footer het land ---------- */
.dl-horizon{ display:block; line-height:0; background:var(--green); }
.dl-horizon__svg{ display:block; width:100%; height:auto; }
/* de basis-reveal zou de hele band laten schuiven; alleen de figuren bewegen */
.dl-horizon.reveal{ opacity:1; transform:none; transition:none; }
.dl-horizon__fig{
  opacity:0; transform:translateY(16px);
  transition:opacity .8s cubic-bezier(.2,.7,.3,1) var(--d,0s),
             transform .8s cubic-bezier(.2,.7,.3,1) var(--d,0s);
}
.dl-horizon.is-in .dl-horizon__fig{ opacity:1; transform:none; }
.site-footer h4{ font-family:var(--f-body); font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#8d857a; margin-bottom:.9rem; }
.site-footer nav{ display:flex; flex-direction:column; gap:.45rem; align-items:start; }
.site-footer a{ text-decoration:none; color:#c9c2b8; transition:color .2s; }
.site-footer a:hover{ color:#fff; }
.site-footer p{ margin:0 0 .5rem; }
.logo--footer img{ height:58px; }
.site-footer__tag{ margin-top:.9rem; color:#8d857a; max-width:22rem; }
.site-footer__bar{
  display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap;
  padding:1.2rem 0 1.6rem; border-top:1px solid #2b2823; font-size:.85rem; color:#7d766c;
}
.site-footer__bar p{ margin:0; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width:1020px){
  .usps__grid{ grid-template-columns:repeat(2,1fr); gap:1.8rem 1.4rem; }
  .services{ grid-template-columns:repeat(2,1fr); }
  .showroom__grid,.contact__grid{ grid-template-columns:1fr; }
  .werk__grid{ grid-template-columns:1fr; gap:2.4rem; }
  .site-footer__in{ grid-template-columns:1fr 1fr; }
  .gallery{ grid-template-columns:1fr 1fr; }
}
@media (max-width:760px){
  body{ font-size:16px; }
  .dl-horizon__svg{ height:120px; }
  .burger{ display:block; }
  .nav{
    position:absolute; inset:100% 0 auto 0; flex-direction:column; align-items:stretch; gap:.15rem;
    background:var(--cream); border-bottom:1px solid var(--line); padding:.8rem 1.25rem 1.2rem;
    box-shadow:0 20px 40px -24px rgba(23,21,18,.6);
    clip-path:inset(0 0 100% 0); opacity:0; pointer-events:none; transition:clip-path .35s, opacity .25s;
  }
  .nav.is-open{ clip-path:inset(0 0 0 0); opacity:1; pointer-events:auto; }
  .nav a{ padding:.8rem .6rem; }
  .nav__cta{ margin:.5rem 0 0; text-align:center; }
  .topbar__msg{ display:none; }
  .topbar__in{ justify-content:center; }
  .cards,.services,.usps__grid,.cform__two{ grid-template-columns:1fr; }
  .section__head--row{ flex-direction:column; align-items:start; gap:1rem; }
  .hero{ min-height:min(760px, 92svh); grid-template-rows:auto minmax(clamp(230px,32vh,360px), 1fr); }
  .swatches{ max-width:100%; justify-content:center; flex-wrap:wrap; }
  .swatch{ padding:.55rem .7rem; font-size:.78rem; }
  .hero__hint span{ display:none; }
  .contact__list li{ flex-direction:column; gap:.2rem; }
  .map{ width:min(100%, 320px); }
  .pin{ font-size:.64rem; }
  .pin b{ padding:.1rem .3rem; }
  .site-footer__in{ grid-template-columns:1fr; }
  .gallery{ grid-template-columns:1fr; }
  .brandbar__item{ width:clamp(150px,42vw,180px); padding:1.4rem .9rem 1.1rem; }
  .logo img{ height:40px; }
}

/* ============================================================
   Toegankelijkheid — beperkte 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;
  }
  .reveal{ opacity:1; transform:none; }
  /* band stil, maar de bezoeker kan er zelf doorheen vegen */
  .brandbar__track{ animation:none !important; transform:none !important; }
  .brandbar__marquee{ overflow-x:auto; -webkit-mask-image:none; mask-image:none; }
  .plank{ opacity:1; transform:rotate(var(--rot,0deg)); }
  .dl-horizon__fig{ opacity:1; transform:none; }
  /* geen loopcyclus, maar wel een pose die klopt: poten gespreid,
     voeten vlak op de vloer */
  .dino{ opacity:1; }
  .dino__rig,.dino__arm{ animation:none !important; transform:none !important; }
  .dino__leg,.dino__foot{ animation:none !important; }
  .dino__leg--near{ transform:rotate(15deg); }
  .dino__leg--far { transform:rotate(-15deg); }
  .dino__leg--near .dino__foot{ transform:rotate(-15deg); }
  .dino__leg--far  .dino__foot{ transform:rotate(15deg); }
}