/* ===========================================================
   Craivo — het groene systeem.

   Nieuwe basis voor de site: diep dennengroen, porselein en brons,
   op de bestaande merkletters Playfair Display en Inter, met IBM Plex
   Mono als utility-face. Alles is geprefixt met .lx- zodat dit bestand
   naast het bestaande style.css kan bestaan zolang niet elke pagina is
   omgezet. Header, footer en navigatie blijven uit style.css komen.

   Bewuste anti-patronen, hier vastgelegd zodat ze niet terugsluipen:
   geen verlopen als achtergrond (kleurvlakken met een harde rand in
   plaats daarvan), geen rijen met iconen, geen gecentreerde
   standaardsecties, geen crème of terracotta.
   =========================================================== */

.page-lx {
  --lx-forest: #12241d;
  --lx-forest-2: #172c24;
  --lx-forest-3: #1d382e;
  --lx-porcelain: #f1f0ec;
  --lx-porcelain-2: #e8e7e1;
  --lx-brass: #b98f4d;
  --lx-brass-l: #d4ac6d;
  --lx-on-dark: rgba(255, 255, 255, 0.9);
  --lx-on-dark-dim: rgba(255, 255, 255, 0.56);
  --lx-ink: #16211c;
  --lx-ink-dim: rgba(22, 33, 28, 0.64);
  --lx-hair: rgba(185, 143, 77, 0.45);
  --lx-hair-dark: rgba(22, 33, 28, 0.13);
  --lx-hair-light: rgba(255, 255, 255, 0.14);
  background: var(--lx-porcelain);

  /* Grondlaag. De tokens uit tokens.css houden hun naam maar krijgen hier
     een groene waarde, zodat elk bestaand component uit style.css meekleurt
     zonder dat er een regel layout verandert. Zolang een pagina nog niet
     opnieuw is ingericht, is dit wat hem uit het navy haalt. */
  --navy: #12241d;
  --navy-soft: #172c24;
  --navy-softer: #1d382e;
  --navy-deep: #0d1b16;
  --navy-rgb: 18, 36, 29;
  --gold: #b98f4d;
  --gold-light: #d4ac6d;
  --gold-rgb: 185, 143, 77;
  --off-white: #f1f0ec;
  --text: #16211c;
  --text-muted: rgba(22, 33, 28, 0.66);
  --text-on-navy: rgba(255, 255, 255, 0.9);
  --text-on-navy-muted: rgba(255, 255, 255, 0.58);
  --border-soft: rgba(22, 33, 28, 0.12);
  --shadow: 0 20px 50px -25px rgba(18, 36, 29, 0.4);
}
.page-lx main { background: var(--lx-porcelain); overflow-x: clip; }

/* De header is transparant tot je scrollt; op een licht vlak zou de
   witte navigatietekst dan onleesbaar zijn. Hier staat hij meteen dicht. */
.page-lx .site-header { background: var(--lx-forest); }
.page-lx .site-header.scrolled { background: var(--lx-forest); }

.lx-wrap { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 32px; }
.lx-wrap-wide { max-width: 1480px; }

/* ---------- Textuur ---------- */
/* Fijne stippen, dezelfde maat als de dot-grid uit de huisstijl. Geeft
   diepte aan donkere vlakken zonder een verloop te gebruiken. */
.lx-dots { position: relative; }
.lx-dots > * { position: relative; z-index: 1; }
.lx-dots::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 0.6px, transparent 0.6px);
  background-size: 7mm 7mm;
  pointer-events: none;
  z-index: 0;
}

/* ---------- Typografie ---------- */
.lx-eyebrow {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--lx-brass);
}
.lx-display {
  font-family: var(--font-serif);
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.06;
  margin: 0;
}
.lx-h1 { font-size: clamp(2.7rem, 6.2vw, 5rem); }
/* Voor koppen van drie zinnen: een maat kleiner, zodat elke zin op zijn
   eigen regel blijft in plaats van te wikkelen. */
.lx-h1-long { font-size: clamp(2.1rem, 4.4vw, 3.6rem); }
.lx-h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
.lx-h3 { font-size: clamp(1.35rem, 2.2vw, 1.75rem); }
.lx-display em { font-style: italic; color: var(--lx-brass); }
.lx-body {
  font-family: var(--font-sans);
  font-size: clamp(1.02rem, 1.15vw, 1.16rem);
  line-height: 1.85;
  margin: 0;
}
.lx-small {
  font-family: var(--font-sans);
  font-size: 0.94rem;
  line-height: 1.7;
  margin: 0;
}
.lx-rule { width: 64px; height: 1px; background: var(--lx-brass); margin: 0 0 30px; }

.lx-on-dark .lx-display, .lx-on-dark h2, .lx-on-dark h3 { color: #fff; }
.lx-on-dark .lx-body, .lx-on-dark .lx-small { color: var(--lx-on-dark-dim); }
.lx-on-light .lx-display, .lx-on-light h2, .lx-on-light h3 { color: var(--lx-ink); }
.lx-on-light .lx-body, .lx-on-light .lx-small { color: var(--lx-ink-dim); }

/* ---------- Knoppen ---------- */
.lx-cta {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 19px 34px;
  background: var(--lx-brass);
  color: var(--lx-forest);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: 0;
  border-radius: 2px;
  cursor: pointer;
  box-shadow: 0 18px 40px -22px rgba(185, 143, 77, 0.85);
  transition: transform 0.35s cubic-bezier(.2,.8,.2,1), box-shadow 0.35s ease, background 0.25s ease;
}
.lx-cta:hover { background: var(--lx-brass-l); transform: translateY(-2px); box-shadow: 0 24px 50px -20px rgba(185, 143, 77, 0.9); }
.lx-cta:focus-visible { outline: 2px solid var(--lx-brass-l); outline-offset: 4px; }
.lx-cta svg { width: 17px; height: 17px; flex-shrink: 0; }
/* De WhatsApp-knop onder het formulier komt uit style.css en is daar een
   pil. In het groene systeem hebben knoppen een rechte hoek, dus die trekt
   hij hier gelijk met de verstuurknop ernaast. */
.page-lx .whatsapp-btn {
  border-radius: 2px;
  padding: 18px 0;
  border-color: var(--lx-hair);
  color: var(--lx-on-dark);
  font-family: var(--font-sans);
}
.page-lx .whatsapp-btn:hover { border-color: var(--lx-brass); background: rgba(185, 143, 77, 0.08); }
.page-lx .contact-divider { font-family: var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }

.lx-cta-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--lx-brass);
  text-decoration: none;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--lx-hair);
  transition: border-color 0.3s ease, color 0.3s ease;
}
.lx-cta-line:hover { color: var(--lx-brass-l); border-color: var(--lx-brass-l); }
.lx-cta-line svg { width: 16px; height: 16px; }

/* ---------- Hero ---------- */
.lx-hero { position: relative; background: var(--lx-forest); color: var(--lx-on-dark); overflow: hidden; }
/* Rechterhelft staat een haar lichter voor diepte. Geen rand ertussen:
   een lijn dwars door de hero knipt de pagina doormidden. */
.lx-hero::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 56%; right: 0;
  background: rgba(255, 255, 255, 0.018);
}
.lx-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr 0.78fr;
  gap: 72px;
  align-items: center;
  padding: calc(var(--header-height) + 104px) 0 96px;
}
.lx-hero-grid > * { min-width: 0; }
.lx-hero-copy .lx-eyebrow { display: block; margin-bottom: 26px; }
.lx-hero-copy .lx-h1 { color: #fff; margin-bottom: 26px; }
.lx-hero-copy .lx-body { color: var(--lx-on-dark-dim); max-width: 30em; margin-bottom: 40px; }
.lx-hero-actions { display: flex; align-items: center; gap: 26px; flex-wrap: wrap; }
.lx-hero-note { font-family: var(--font-sans); font-size: 0.92rem; color: var(--lx-on-dark-dim); margin: 0; }

.lx-hero-art { position: relative; margin: 0; }
.lx-hero-art::before {
  content: "";
  position: absolute;
  inset: -22px -22px 22px 22px;
  border: 1px solid var(--lx-hair);
  pointer-events: none;
}
.lx-hero-art img, .lx-hero-art video {
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  box-shadow: 0 50px 90px -40px rgba(0, 0, 0, 0.75);
}
.lx-hero-cap {
  position: absolute;
  left: 22px;
  bottom: -34px;
  font-family: var(--font-mono);
  font-size: 0.66rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--lx-on-dark-dim);
}

/* ---------- Hero-carrousel ----------
   Drie kaarten, één per dienst, die langzaam om elkaar heen draaien met
   de titel als pil bovenin. Bewust geen pijlen of bolletjes: de beweging
   is de navigatie en de bezoeker hoeft niets te bedienen.

   Diepte komt van schaal en helderheid, nooit van doorzichtigheid: de
   kaarten mogen niet door elkaar heen schijnen. */
.lx-orbit {
  --orbit-w: 236px;
  /* 1,31 is geen smaak maar rekenwerk: na de 10px rand houdt het beeldvlak
     precies de verhouding van de showcasebeelden over, zodat er niets
     hoeft te worden weggesneden. */
  --orbit-h: calc(var(--orbit-w) * 1.31);
  --orbit-r: 152px;
  position: relative;
  width: 100%;
  max-width: 460px;
  height: calc(var(--orbit-h) + 48px);
  margin: 0 auto;
  perspective: 1300px;
  transform-style: preserve-3d;
}
/* De kaart is geen lijst om een foto, maar een opbouw van drie vlakken die
   in de ruimte uit elkaar staan: een kader dat erachter hangt, de kaart
   zelf, en het beeldpaneel dat er een stuk vóór ligt. Bij het draaien
   schuiven die lagen zichtbaar langs elkaar; daar komt de diepte vandaan,
   niet uit een schaduw die dikte suggereert. */
.lx-orbit-card {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--orbit-w);
  height: var(--orbit-h);
  margin-top: calc(var(--orbit-h) / -2);
  margin-left: calc(var(--orbit-w) / -2);
  border-radius: 26px;
  border: 1px solid rgba(185, 143, 77, 0.26);
  background: var(--lx-forest-2);
  box-shadow: 0 46px 80px -34px rgba(0, 0, 0, 0.82);
  transform-style: preserve-3d;
  animation: lx-orbit 28s linear infinite;
}
/* Het kader dat achter de kaart hangt. */
.lx-orbit-card::before {
  content: "";
  position: absolute;
  inset: -11px;
  border-radius: 34px;
  border: 1px solid rgba(185, 143, 77, 0.2);
  transform: translateZ(-24px);
  pointer-events: none;
}
/* Het beeldpaneel ligt op de kaart, niet erin. */
.lx-orbit-stage {
  position: absolute;
  inset: 10px;
  border-radius: 18px;
  overflow: hidden;
  background: var(--lx-forest);
  box-shadow: 0 20px 34px -20px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(185, 143, 77, 0.16);
  transform: translateZ(14px);
}
/* De hele videokaart is de link naar de productvideopagina. Het klikvlak
   ligt over de kaart in plaats van als knop in het beeld: het bewegende
   beeld hoeft dan niets af te staan aan een bedieningselement. De
   carrousel staat stil zodra je hem aanwijst of er met het toetsenbord in
   komt, anders zou je op een bewegend doel moeten mikken. */
.lx-orbit-hit {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  transform: translateZ(20px);
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}
.lx-orbit-hit:hover { box-shadow: inset 0 0 0 1px var(--lx-brass-l), 0 0 40px -8px rgba(185, 143, 77, 0.55); }
.lx-orbit-hit:focus-visible { outline: 2px solid var(--lx-brass-l); outline-offset: 4px; }
.lx-orbit-card:nth-child(1) { animation-delay: 0s; }
.lx-orbit-card:nth-child(2) { animation-delay: -7s; }
.lx-orbit-card:nth-child(3) { animation-delay: -14s; }
.lx-orbit-card:nth-child(4) { animation-delay: -21s; }
@keyframes lx-orbit {
  0%   { transform: rotateY(0deg)   translateZ(var(--orbit-r)) scale(1);    filter: brightness(1) saturate(1); }
  25%  { transform: rotateY(90deg)  translateZ(var(--orbit-r)) scale(0.74); filter: brightness(0.55) saturate(0.72); }
  50%  { transform: rotateY(180deg) translateZ(var(--orbit-r)) scale(0.56); filter: brightness(0.46) saturate(0.62); }
  75%  { transform: rotateY(270deg) translateZ(var(--orbit-r)) scale(0.74); filter: brightness(0.55) saturate(0.72); }
  100% { transform: rotateY(360deg) translateZ(var(--orbit-r)) scale(1);    filter: brightness(1) saturate(1); }
}
/* Bronzen gloed op de voorste kaart. Alleen opacity animeert, zodat de
   browser er niet elke frame een schaduw voor hoeft te hertekenen. */
.lx-orbit-card::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(185, 143, 77, 0.55), 0 0 40px -10px rgba(185, 143, 77, 0.5);
  opacity: 0;
  pointer-events: none;
  animation: lx-orbit-edge 28s linear infinite;
}
.lx-orbit-card:nth-child(1)::after { animation-delay: 0s; }
.lx-orbit-card:nth-child(2)::after { animation-delay: -7s; }
.lx-orbit-card:nth-child(3)::after { animation-delay: -14s; }
.lx-orbit-card:nth-child(4)::after { animation-delay: -21s; }
@keyframes lx-orbit-edge {
  0% { opacity: 1; } 10% { opacity: 0; } 90% { opacity: 0; } 100% { opacity: 1; }
}
/* Binnen elke kaart wisselen twee of drie beelden elkaar rustig af, zodat
   één ronde meer werk laat zien. De cyclus (21s) staat los van de ronde
   (28s): daardoor valt een wissel nooit steeds op dezelfde plek in de
   draaiing en oogt het minder als een diavoorstelling. */
.lx-orbit-stack {
  position: absolute;
  inset: 0;
}
/* contain, niet cover: het beeld past in zijn geheel in het paneel. Een
   uitsnede die inzoomt op een hoek laat juist niet zien wat wij maken. */
.lx-orbit-stack > * {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  opacity: 0;
}
.lx-orbit-stack > *:first-child { opacity: 1; }
/* Het stilstaande frame ligt onder de videoloop en komt alleen tevoorschijn
   als beweging uitstaat. */
.lx-orbit-stack > .lx-orbit-still { opacity: 0; }
.lx-fade-2 > * { animation: lx-fade-2 21s ease-in-out infinite; }
.lx-fade-2 > *:nth-child(1) { animation-delay: 0s; }
.lx-fade-2 > *:nth-child(2) { animation-delay: -10.5s; }
@keyframes lx-fade-2 {
  0%    { opacity: 1; }
  42%   { opacity: 1; }
  50%   { opacity: 0; }
  92%   { opacity: 0; }
  100%  { opacity: 1; }
}
.lx-fade-3 > * { animation: lx-fade-3 21s ease-in-out infinite; }
.lx-fade-3 > *:nth-child(1) { animation-delay: 0s; }
.lx-fade-3 > *:nth-child(2) { animation-delay: -7s; }
.lx-fade-3 > *:nth-child(3) { animation-delay: -14s; }
@keyframes lx-fade-3 {
  0%    { opacity: 1; }
  26.6% { opacity: 1; }
  33.3% { opacity: 0; }
  93.3% { opacity: 0; }
  100%  { opacity: 1; }
}
/* De pil draait exact tegengesteld aan zijn kaart, zodat de dienstnaam
   naar de kijker blijft staan terwijl de kaart wegdraait. */
.lx-orbit-tag {
  position: absolute;
  top: 20px;
  left: 20px;
  max-width: calc(100% - 40px);
  padding: 5px 11px;
  border-radius: 999px;
  border: 1px solid rgba(185, 143, 77, 0.5);
  background: rgba(18, 36, 29, 0.86);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 1.3;
  color: var(--lx-brass-l);
  animation: lx-orbit-tag 28s linear infinite;
}
@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  .lx-orbit-tag {
    background: rgba(18, 36, 29, 0.55);
    backdrop-filter: blur(12px) saturate(140%);
    -webkit-backdrop-filter: blur(12px) saturate(140%);
  }
}
.lx-orbit-card:nth-child(1) .lx-orbit-tag { animation-delay: 0s; }
.lx-orbit-card:nth-child(2) .lx-orbit-tag { animation-delay: -7s; }
.lx-orbit-card:nth-child(3) .lx-orbit-tag { animation-delay: -14s; }
.lx-orbit-card:nth-child(4) .lx-orbit-tag { animation-delay: -21s; }
@keyframes lx-orbit-tag {
  0%   { transform: rotateY(0deg); }
  25%  { transform: rotateY(-90deg); }
  50%  { transform: rotateY(-180deg); }
  75%  { transform: rotateY(-270deg); }
  100% { transform: rotateY(-360deg); }
}
/* Stil bij hover en zodra de hero uit beeld is. */
.lx-orbit:hover .lx-orbit-card,
.lx-orbit:hover .lx-orbit-card::after,
.lx-orbit:hover .lx-orbit-tag,
.lx-orbit:hover .lx-orbit-stack > *,
.lx-orbit:focus-within .lx-orbit-card,
.lx-orbit:focus-within .lx-orbit-card::after,
.lx-orbit:focus-within .lx-orbit-tag,
.lx-orbit:focus-within .lx-orbit-stack > *,
.lx-orbit.is-paused .lx-orbit-card,
.lx-orbit.is-paused .lx-orbit-card::after,
.lx-orbit.is-paused .lx-orbit-tag,
.lx-orbit.is-paused .lx-orbit-stack > * {
  animation-play-state: paused;
}
/* Feitenregel onderaan de hero: een colofon, geen iconenrij. */
/* Vier feiten op één regel, elk in een eigen kolom. Met flex-wrap gingen
   er drie op de eerste regel en viel de vierde eronder; een raster houdt
   ze gelijk. Geen streep erboven: de hero blijft één vlak. */
.lx-facts {
  position: relative;
  z-index: 2;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 18px 40px;
  padding: 30px 0 34px;
  margin-top: 8px;
}
.lx-fact {
  display: flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-on-dark-dim);
  padding: 6px 0;
}
.lx-fact b { color: var(--lx-brass); font-weight: 600; }

/* ---------- Secties ---------- */
.lx-sec { padding: 118px 0; }
.lx-sec-sm { padding: 92px 0; }
.lx-dark { background: var(--lx-forest); color: var(--lx-on-dark); }
.lx-dark-2 { background: var(--lx-forest-2); color: var(--lx-on-dark); }
.lx-light-2 { background: var(--lx-porcelain-2); }

/* Kop met tekst ernaast: nooit gecentreerd, altijd asymmetrisch. */
/* De kop staat alleen. De korte inleiding die er eerst naast stond, staat
   nu onder de sectie-inhoud als voetnoot: naast de kop vroeg hij evenveel
   aandacht als de kop zelf, terwijl hij een terzijde is. */
.lx-head { margin-bottom: 64px; }
.lx-head > * { min-width: 0; }
.lx-head .lx-body { max-width: 62ch; margin: 22px 0 0; }
.lx-head .lx-eyebrow { display: block; margin-bottom: 18px; }
.lx-head-tight { margin-bottom: 48px; }

/* Voetnoot onder de sectie-inhoud: kleiner corps, gedempt, met een ster in
   de kantlijn zodat de tekst zelf uitgelijnd blijft met de rest. */
.lx-note {
  margin: 30px 0 0;
  padding-left: 1.15em;
  text-indent: -1.15em;
  max-width: 68ch;
  font-family: var(--font-sans);
  font-size: 0.86rem;
  line-height: 1.7;
  color: var(--lx-ink-dim);
  text-wrap: pretty;
}
.lx-note::before { content: "*"; color: var(--lx-brass); margin-right: 0.4em; }
.lx-dark .lx-note, .lx-dark-2 .lx-note { color: var(--lx-on-dark-dim); }

/* ---------- Genummerde index (diensten, opsommingen) ---------- */
.lx-index { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--lx-hair-dark); }
.lx-dark .lx-index, .lx-dark-2 .lx-index { border-top-color: var(--lx-hair-light); }
.lx-index > li { border-bottom: 1px solid var(--lx-hair-dark); }
.lx-dark .lx-index > li, .lx-dark-2 .lx-index > li { border-bottom-color: var(--lx-hair-light); }
.lx-index-row {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 28px;
  align-items: baseline;
  padding: 30px 0;
  text-decoration: none;
  color: inherit;
}
.lx-index-num {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  color: var(--lx-brass);
}
.lx-index-text {
  font-family: var(--font-sans);
  font-size: clamp(1.05rem, 1.5vw, 1.28rem);
  line-height: 1.65;
  margin: 0;
  max-width: 40em;
}
.lx-on-light .lx-index-text { color: var(--lx-ink); }
.lx-dark .lx-index-text, .lx-dark-2 .lx-index-text { color: var(--lx-on-dark); }

/* Klikbare variant met beeld: voor de dienstenindex op de homepage. */
.lx-entry { display: grid; grid-template-columns: 76px 1fr 132px; gap: 28px; align-items: center; padding: 26px 0; text-decoration: none; color: inherit; transition: padding-left 0.4s cubic-bezier(.2,.8,.2,1); }
.lx-entry:hover { padding-left: 12px; }
.lx-entry-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.2; margin: 0 0 6px; }
.lx-entry-text { font-family: var(--font-sans); font-size: 0.98rem; line-height: 1.7; margin: 0; max-width: 46em; }
.lx-dark .lx-entry-title, .lx-dark-2 .lx-entry-title { color: #fff; }
.lx-dark .lx-entry-text, .lx-dark-2 .lx-entry-text { color: var(--lx-on-dark-dim); }
.lx-on-light .lx-entry-title { color: var(--lx-ink); }
.lx-on-light .lx-entry-text { color: var(--lx-ink-dim); }
.lx-entry-thumb { width: 132px; height: 96px; object-fit: cover; display: block; filter: grayscale(0.35); transition: filter 0.5s ease, transform 0.6s cubic-bezier(.2,.8,.2,1); }
.lx-entry:hover .lx-entry-thumb { filter: none; transform: scale(1.04); }
/* Lijn-iconen in plaats van een foto: de rij gaat over de dienst zelf en
   niet over een democase, en vier dunne lijnen leggen minder gewicht in de
   schaal dan vier beelden. Het vak houdt de maat van de oude foto, want
   anders zou de rijhoogte meeveranderen. */
.lx-entry-icon {
  width: 132px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  color: var(--lx-brass);
  transition: color 0.4s ease;
}
.lx-entry-icon svg { width: 38px; height: 38px; display: block; }
.lx-entry:hover .lx-entry-icon { color: var(--lx-brass-l); }

/* ---------- Beeldplaten ---------- */
.lx-plates { display: grid; grid-template-columns: repeat(4, 1fr); gap: 26px; }
.lx-plates-3 { grid-template-columns: repeat(3, 1fr); }
.lx-plate { margin: 0; position: relative; }
/* Om en om verspringen: een raster dat te netjes is, oogt goedkoop. */
.lx-plate:nth-child(even) { transform: translateY(42px); }
.lx-plate-frame { position: relative; overflow: hidden; background: var(--lx-forest-3); }
.lx-plate img, .lx-plate video {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  display: block;
  transition: transform 0.9s cubic-bezier(.2,.8,.2,1);
}
.lx-plate:hover img { transform: scale(1.045); }
.lx-plate figcaption {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 16px;
  padding-top: 12px;
  border-top: 1px solid var(--lx-hair-light);
  font-family: var(--font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--lx-on-dark);
}
.lx-plate figcaption span { color: var(--lx-brass); }
.lx-on-light .lx-plate figcaption { border-top-color: var(--lx-hair-dark); color: var(--lx-ink); }
.lx-plates-foot { margin-top: 92px; display: flex; gap: 28px; align-items: center; flex-wrap: wrap; }

/* ---------- Breed beeld met verspringend kader ---------- */
.lx-showcase { display: grid; grid-template-columns: 1fr 0.9fr; gap: 72px; align-items: center; }
.lx-showcase > * { min-width: 0; }
.lx-showcase-art { position: relative; margin: 0; }
.lx-showcase-art::before {
  content: "";
  position: absolute;
  inset: 22px -22px -22px 22px;
  border: 1px solid var(--lx-hair);
  pointer-events: none;
}
.lx-showcase-art img, .lx-showcase-art video {
  position: relative;
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 9 / 12;
  object-fit: cover;
  box-shadow: 0 50px 90px -46px rgba(0, 0, 0, 0.7);
}

/* Staand beeld houdt zijn eigen verhouding in plaats van in het liggender
   kader te worden gesneden. De procesvideo is 9:16; in het standaardkader
   viel de tekst onderin eruit. De kolom wordt daarom smaller, anders wordt
   de rij onwerkbaar hoog. */
.lx-showcase-art-tall { max-width: 400px; justify-self: end; width: 100%; }
.lx-showcase-art-tall video { aspect-ratio: 9 / 16; }

/* Afwisselende beeld/tekst-rijen: om en om links en rechts, zodat een
   reeks diensten niet als een rij gelijke kaarten leest. */
.lx-showcase + .lx-showcase { margin-top: 104px; }
/* order:-1 zet het beeld vóór de tekst; met order:2 stond het waar het in
   de bronvolgorde toch al stond en wisselde er niets. */
.lx-showcase-flip .lx-showcase-art { order: -1; }
.lx-showcase-flip .lx-showcase-art::before { inset: 22px 22px -22px -22px; }
/* Het icoon staat naast het label en niet erboven: de kolom loopt van
   label naar titel naar tekst naar link, en een extra regel ertussen zou
   het label van zijn titel losweken. Naast het kleinste element leest het
   als de markering ervan in plaats van als versiering. */
.lx-showcase-num {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  color: var(--lx-brass);
  margin-bottom: 16px;
}
/* Kleiner dan op de homepage: daar staat het icoon in een eigen vak van
   132 breed, hier naast letters van nog geen 12 pixels. */
.lx-showcase-icon { width: 22px; height: 22px; flex-shrink: 0; }
@media (max-width: 1024px) {
  .lx-showcase + .lx-showcase { margin-top: 72px; }
  /* Op smal scherm staat de tekst altijd eerst, ook in een geflipte rij. */
  .lx-showcase-flip .lx-showcase-art { order: 0; }
}

/* ---------- Stappen ---------- */
.lx-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; }
.lx-steps-4 { grid-template-columns: repeat(4, 1fr); gap: 36px; }
.lx-step { position: relative; padding-top: 30px; border-top: 1px solid var(--lx-hair-dark); }
.lx-dark .lx-step, .lx-dark-2 .lx-step { border-top-color: var(--lx-hair-light); }
.lx-step::before { content: ""; position: absolute; top: -1px; left: 0; width: 34px; height: 1px; background: var(--lx-brass); }
.lx-step-num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--lx-brass); display: block; margin-bottom: 16px; }
.lx-step h3 { margin-bottom: 12px; }
.lx-step p { font-family: var(--font-sans); font-size: 1rem; line-height: 1.75; margin: 0; }
.lx-on-light .lx-step h3 { color: var(--lx-ink); }
.lx-on-light .lx-step p { color: var(--lx-ink-dim); }
.lx-dark .lx-step h3, .lx-dark-2 .lx-step h3 { color: #fff; }
.lx-dark .lx-step p, .lx-dark-2 .lx-step p { color: var(--lx-on-dark-dim); }

/* ---------- FAQ ---------- */
.lx-faq-item {
  display: grid;
  grid-template-columns: 0.7fr 1fr;
  gap: 48px;
  padding: 34px 0;
  border-top: 1px solid var(--lx-hair-dark);
}
.lx-faq-item:last-child { border-bottom: 1px solid var(--lx-hair-dark); }
.lx-faq-q { font-family: var(--font-serif); font-weight: 500; font-size: 1.28rem; line-height: 1.35; color: var(--lx-ink); margin: 0; }
.lx-faq-a { font-family: var(--font-sans); font-size: 1rem; line-height: 1.8; color: var(--lx-ink-dim); margin: 0; }
.lx-faq-a a { color: var(--lx-ink); text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--lx-hair); }
.lx-faq-a a:hover { text-decoration-color: var(--lx-brass); }

/* ---------- Contact ---------- */
.lx-contact { display: grid; grid-template-columns: 0.9fr 1fr; gap: 80px; align-items: start; }
.lx-contact > * { min-width: 0; }
.lx-contact-mail {
  display: inline-block;
  font-family: var(--font-serif);
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  color: var(--lx-brass);
  text-decoration: none;
  border-bottom: 1px solid var(--lx-hair);
  padding-bottom: 6px;
  margin-top: 32px;
}
.lx-contact-mail:hover { color: var(--lx-brass-l); border-color: var(--lx-brass-l); }
.lx-form-field { margin-bottom: 20px; }
.lx-form-field label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lx-on-dark-dim);
  margin-bottom: 8px;
}
.lx-form-field input,
.lx-form-field textarea {
  width: 100%;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--lx-hair-light);
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--font-sans);
  font-size: 1rem;
  color: #fff;
  resize: vertical;
}
.lx-form-field input::placeholder, .lx-form-field textarea::placeholder { color: rgba(255, 255, 255, 0.34); }
.lx-form-field input:focus, .lx-form-field textarea:focus {
  outline: none;
  border-color: var(--lx-brass);
  background: rgba(255, 255, 255, 0.07);
}
.lx-form-note { font-family: var(--font-sans); font-size: 0.86rem; line-height: 1.6; color: var(--lx-on-dark-dim); margin: 14px 0 0; }

/* ---------- Slot ---------- */
.lx-close { position: relative; background: var(--lx-forest); color: #fff; padding: 128px 0 136px; overflow: hidden; }
.lx-close-grid { display: grid; grid-template-columns: 1fr auto; gap: 64px; align-items: end; }
.lx-close-grid > * { min-width: 0; }
.lx-close .lx-h2 { color: #fff; margin: 0 0 22px; }
.lx-close .lx-body { color: var(--lx-on-dark-dim); max-width: 32em; }
.lx-close-note { font-family: var(--font-sans); font-size: 0.92rem; color: var(--lx-on-dark-dim); margin: 18px 0 0; }

/* ---------- Reveal ----------
   De verborgen starttoestand staat bewust NIET in dit stylesheet. JS zet
   .is-armed pas nadat het zichzelf heeft gecontroleerd; zonder JS, of als
   de observer niet vuurt, blijft alle tekst gewoon staan. */
.lx-rise.is-armed { opacity: 0; transform: translateY(18px); }
.lx-rise.is-in { opacity: 1; transform: none; transition: opacity 0.9s cubic-bezier(.2,.8,.2,1), transform 0.9s cubic-bezier(.2,.8,.2,1); }

/* ---------- Responsief ---------- */
@media (max-width: 1024px) {
  /* Op smal scherm ligt het lichtere vlak onder de tekst in plaats van
     ernaast. Ook hier geen rand: geen streep dwars door de hero. */
  .lx-hero::before { left: 0; top: 62%; }
  .lx-hero-grid { grid-template-columns: 1fr; gap: 56px; padding: calc(var(--header-height) + 72px) 0 24px; }
  .lx-hero-art { max-width: 440px; }
  .lx-showcase, .lx-contact, .lx-close-grid { grid-template-columns: 1fr; gap: 28px; }
  .lx-head { margin-bottom: 40px; }
  .lx-facts { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); }
  .lx-close-grid { gap: 40px; }
  .lx-plates { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .lx-plate:nth-child(even) { transform: none; }
  .lx-steps, .lx-steps-4 { grid-template-columns: 1fr; gap: 36px; }
  .lx-faq-item { grid-template-columns: 1fr; gap: 12px; }
  .lx-entry { grid-template-columns: 60px 1fr; }
  .lx-entry-thumb, .lx-entry-icon { display: none; }
  .lx-sec { padding: 88px 0; }
  .lx-sec-sm { padding: 72px 0; }
}
@media (max-width: 640px) {
  .lx-wrap { padding: 0 22px; }
  .lx-sec { padding: 76px 0; }
  .lx-sec-sm { padding: 64px 0; }
  .lx-close { padding: 88px 0 92px; }
  .lx-hero-art::before { inset: -14px -14px 14px 14px; }
  .lx-index-row, .lx-entry { grid-template-columns: 1fr; gap: 8px; padding: 24px 0; }
  .lx-facts { grid-template-columns: 1fr; gap: 0 24px; margin-top: 44px; }
  .lx-cta { width: 100%; justify-content: center; }
  .lx-plates-foot { margin-top: 64px; }
}
/* Stilstaande variant van de carrousel: dezelfde vier kaarten in hetzelfde
   bronzen kader, in een raster van twee bij twee. Voor plekken waar de
   draaiende versie elders op de site al staat en herhaling zou gaan storen.
   Het resultaat is gelijk aan wat bezoekers zien die beweging hebben
   uitgezet, dus dezelfde regels staan verderop nog een keer in de
   reduced-motion query. */
.lx-orbit-static {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  height: auto;
  perspective: none;
  max-width: 460px;
}
.lx-orbit-static .lx-orbit-card,
.lx-orbit-static .lx-orbit-card::after,
.lx-orbit-static .lx-orbit-tag,
.lx-orbit-static .lx-orbit-stack > * { animation: none; }
/* Het beeldpaneel bepaalt zelf de hoogte, want de kaart heeft er zonder
   baan geen meer. Dezelfde verhouding, dus nog steeds geen uitsnede. */
.lx-orbit-static .lx-orbit-stage {
  position: relative;
  inset: auto;
  margin: 10px;
  aspect-ratio: 216 / 289;
  transform: none;
}
.lx-orbit-static .lx-orbit-stack > *:not(:first-child) { display: none; }
.lx-orbit-static .lx-orbit-card {
  position: relative;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  margin: 0;
  transform: none;
  filter: none;
}
.lx-orbit-static .lx-orbit-card::before,
.lx-orbit-static .lx-orbit-card::after { opacity: 0; }
.lx-orbit-static .lx-orbit-hit { transform: none; }
.lx-orbit-static .lx-orbit-tag {
  transform: none;
  top: 16px;
  left: 16px;
  font-size: 0.54rem;
  letter-spacing: 0.1em;
  padding: 4px 8px;
}

/* Nog niet heringerichte pagina's houden hun oude herolayout, maar het
   verloop gaat eruit: het groene systeem werkt met vlakken met een harde
   rand. */
.page-lx .hero { background: var(--lx-forest); }

@media (prefers-reduced-motion: reduce) {
  .lx-rise, .lx-rise.is-armed, .lx-rise.is-in { opacity: 1; transform: none; transition: none; }
  .lx-plate img, .lx-cta, .lx-entry, .lx-entry-thumb, .lx-entry-icon { transition: none; }
  /* Zonder beweging staan de vier diensten stil in een raster: dezelfde
     kaarten, dezelfde pillen, geen draaiing. */
  .lx-orbit {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    height: auto;
    perspective: none;
    max-width: 460px;
  }
  .lx-orbit-card,
  .lx-orbit-card::after,
  .lx-orbit-tag,
  .lx-orbit-stack > * { animation: none; }
  /* Zonder beweging blijft het eerste beeld van elke kaart staan. */
  .lx-orbit-stack > *:not(:first-child) { display: none; }
  /* De kaart blijft relatief gepositioneerd, anders springt de pil naar
     de rand van het raster in plaats van in zijn eigen kaart te blijven.
     De verhouding verhuist naar het beeldpaneel, zodat de kaart mee kan
     groeien. */
  .lx-orbit-card {
    position: relative;
    /* top/left uit de baanpositie horen hier niet meer bij: met
       position:relative zouden ze de kaart een halve breedte en hoogte
       verschuiven en valt het raster onder de hero uit. */
    top: auto;
    left: auto;
    width: auto;
    height: auto;
    margin: 0;
  }
  .lx-orbit-stage {
    position: relative;
    inset: auto;
    margin: 10px;
    aspect-ratio: 216 / 289;
    transform: none;
  }
  .lx-orbit-card::before,
  .lx-orbit-card::after { opacity: 0; }
  .lx-orbit-hit { transform: none; }
  /* Zonder beweging staat de videoloop uit en blijft het frame staan. Deze
     twee regels komen na de regel die alles behalve het eerste beeld
     verbergt, anders zou het frame daar ook onder vallen. */
  .lx-orbit-stack > video { display: none; }
  /* Even zwaar als de regel in de statische variant die alles behalve het
     eerste beeld verbergt, en hij staat later, dus hij wint. Zonder dit
     bleef de videokaart in het raster op ad-creatives leeg. */
  .lx-orbit .lx-orbit-stack > .lx-orbit-still { display: block; opacity: 1; }
  .lx-orbit-tag {
    transform: none;
    top: 16px;
    left: 16px;
    font-size: 0.54rem;
    letter-spacing: 0.1em;
    padding: 4px 8px;
  }
}