.brand img {
  width: 190px;
  max-height: 58px;
  object-fit: contain;
}

/* Alleen zijwaarts knippen: de gloed schuift heen en weer en mag geen
   horizontale scroll geven, maar het mobiele menu klapt ONDER de kop uit.
   Met overflow:hidden viel dat menu weg achter de hero. */
.header { overflow-x: clip; overflow-y: visible; }

.header::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 50%, rgba(24,133,224,.10), transparent 30%),
    radial-gradient(circle at 43% 35%, rgba(145,20,135,.10), transparent 35%),
    radial-gradient(circle at 78% 55%, rgba(244,191,35,.065), transparent 32%);
  opacity: .42;
  animation: gm-header-glow 7s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.header .nav { position: relative; z-index: 1; }

@keyframes gm-header-glow {
  from { opacity: .24; transform: translateX(-1.5%); }
  to { opacity: .58; transform: translateX(1.5%); }
}

.hero-brandmark {
  position: absolute;
  right: clamp(1rem, 5vw, 5rem);
  bottom: 5.5rem;
  z-index: 1;
  width: clamp(150px, 22vw, 310px);
  opacity: .16;
  mix-blend-mode: screen;
  filter: saturate(.78);
  pointer-events: none;
}

.membership {
  padding: 0 0 4rem;
}

.membership-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: 1.35rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
  border-left: 4px solid var(--lime);
}

.membership-copy {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.membership-copy::before {
  content: "✓";
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: 50%;
  color: #fff;
  background: var(--green);
  font-weight: 900;
}

.membership-copy b { display: block; }
.membership-copy span { color: var(--muted); font-size: .9rem; }
.membership-logo {
  width: min(260px, 38vw);
  height: auto;
  /* Eigen kleuren, geen filter: grijs gemaakt oogde het "niet goed" (8 okt). */
}

.footer-brandmark {
  width: 86px;
  margin-top: 1.1rem;
  border-radius: 10px;
  opacity: .82;
}

@media (max-width: 700px) {
  .brand img { width: 160px; max-height: 52px; }
  .hero-brandmark { width: 150px; bottom: 7.5rem; opacity: .1; }
  .membership-card { align-items: flex-start; flex-direction: column; }
  .membership-logo { width: 220px; max-width: 100%; }
}

.machine-reel {
  position: relative;
  overflow: hidden;
  margin-inline: calc((100vw - min(1180px, calc(100vw - 40px))) / -2);
  padding: .5rem 0;
}
/* Zachte randen links en rechts. Was een mask-image over de hele strook, maar
   dat masker moest bij elk beeld opnieuw over 4,6 m strook gerekend worden:
   "in het Duits gaat hij bijna niet vooruit" (19 okt). Nu twee stilstaande
   kleurverlopen bovenop, in de achtergrondkleur van het blok. */
.machine-reel::before,
.machine-reel::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 6%;
  z-index: 3;
  pointer-events: none;
}
.machine-reel::before { left: 0; background: linear-gradient(90deg, var(--dark), rgba(21,23,42,0)); }
.machine-reel::after { right: 0; background: linear-gradient(270deg, var(--dark), rgba(21,23,42,0)); }

/* De strip rekent met 100vw, en dat telt de schuifbalk van de pc mee: zonder
   dit schoof de hele pagina een paar pixels zijwaarts. */
#merken { overflow-x: clip; }

/* "Die balk gaat niet vloeiend op de echte site" (19 okt): de strip krijgt een
   eigen laag op de videokaart (will-change), zodat hij als één plaatje schuift.
   Daarvoor mag er niets in zitten dat per beeld opnieuw uitgerekend moet
   worden: geen backdrop-filter op de labels en geen mix-blend-mode op het
   licht van Oxbo en Pixall -- die twee dwongen de browser elke frame alles
   opnieuw te tekenen. */
.machine-track {
  display: flex;
  width: max-content;
  gap: 1rem;
  animation: machine-scroll 42s linear infinite;
  will-change: transform;
  backface-visibility: hidden;
}

.machine-reel:hover .machine-track { animation-play-state: paused; }

.machine-shot {
  position: relative;
  width: clamp(240px, 28vw, 390px);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 1px solid #47455c;
  border-radius: 18px;
  background: #22243a;
}

.machine-shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}
/* Geen CSS-filter meer op de foto's in de strip: 18 gefilterde foto's die
   bewegen, kostten op een pc zonder sterke videokaart elk beeld rekenwerk. */

.machine-shot:hover img { transform: scale(1.035); }

/* Oxbo en Pixall met licht en schaduw (17 okt: "de foto's een twist geven,
   mooi bewerken met licht en schaduw"). In de opmaak en niet in het bestand:
   zo blijft de foto scherp en is het bij te stellen. De strip haalt standaard
   22% kleur weg; hier juist iets erbij. Het licht valt warm van linksboven
   binnen, de randen lopen donker weg zodat de machine naar voren komt. */
.machine-shot.sfeer::before,
.machine-shot.sfeer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}
.machine-shot.sfeer::before {
  /* was .42 met mix-blend-mode: soft-light; gewoon erover met minder dekking
     geeft bijna hetzelfde warme licht zonder het schokken */
  background: radial-gradient(circle at 18% 10%, rgba(255,214,150,.2), rgba(255,214,150,0) 55%);
}
.machine-shot.sfeer::after {
  background: radial-gradient(ellipse at 55% 50%, rgba(10,8,20,0) 45%, rgba(10,8,20,.55) 100%);
}
.machine-shot span { z-index: 2; }

.machine-shot span {
  position: absolute;
  left: .8rem;
  bottom: .8rem;
  padding: .42rem .7rem;
  border-radius: 999px;
  color: #fff;
  background: rgba(21,23,42,.9);
  font-size: .78rem;
  font-weight: 800;
}

@keyframes machine-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-50% - .5rem), 0, 0); } }

@media (prefers-reduced-motion: reduce) {
  .header::before { animation: none; opacity: .38; }
  .machine-reel { overflow-x: auto; mask-image: none; }
  .machine-track { animation: none; }
}

/* De oogstfoto bij "Klanten aan het woord" met licht en schaduw, net als
   Oxbo en Pixall in de strip ("kan je deze foto ook mooi belichten?").
   De foto is een achtergrond van het vak zelf; een filter op het vak zou de
   witte kaart erop meekleuren. Daarom bewerkt ::before alleen wat erachter
   ligt (backdrop-filter), en legt ::after het licht en het vignet erover. */
.photo-panel::before,
.photo-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.photo-panel::before { backdrop-filter: contrast(1.12) saturate(1.25) brightness(1.05); }
.photo-panel::after {
  background:
    radial-gradient(circle at 15% 8%, rgba(255,210,140,.35), rgba(255,210,140,0) 50%),
    radial-gradient(ellipse at 55% 45%, rgba(10,8,20,0) 50%, rgba(10,8,20,.5) 100%);
}
.photo-note { z-index: 2; }

/* Klikbare praktijkkaart op de homepage */
.photo-note {
  width: min(360px, calc(100% - 2.4rem));
  background: rgba(255, 255, 255, .96);
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}

.photo-note:hover,
.photo-note:focus-visible {
  transform: translateY(-4px);
  background: #fff;
  box-shadow: 0 24px 70px rgba(7, 18, 13, .22);
  outline: none;
}

.photo-note:focus-visible {
  box-shadow: 0 0 0 4px rgba(111, 42, 120, .24), 0 24px 70px rgba(7, 18, 13, .22);
}

.photo-note span {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.photo-note strong {
  color: var(--green);
  font-size: 1.3rem;
  transition: transform .2s ease;
}

.photo-note:hover strong,
.photo-note:focus-visible strong {
  transform: translateX(4px);
}

/* Eigen foto bovenin een dienstkaart: tot aan de rand, de kaart houdt zijn
   ronde hoeken. De kop schuift dan omhoog, anders wordt de kaart te hoog. */
.card-foto {
  display: block;
  width: calc(100% + 4rem);
  max-width: none;
  height: auto; /* anders wint height="597" uit de HTML van aspect-ratio */
  margin: -2rem -2rem 1.3rem;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 17px 17px 0 0;
}
.card-foto ~ h3 { margin-top: .6rem; }

/* Merk zonder eigen foto: een tekstvak in dezelfde maat als de fotokaarten.
   Liever geen beeld dan andermans beeld. */
.machine-tekst {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: .35rem;
  padding: 1.3rem;
  color: #fff;
  background:
    radial-gradient(circle at 85% 15%, rgba(217,178,59,.16), transparent 45%),
    linear-gradient(140deg, #3a2347, #1b1d33 70%);
}
.machine-tekst b { font-size: clamp(1.35rem, 2.2vw, 1.8rem); line-height: 1.05; letter-spacing: -.02em; }
.machine-tekst small { color: var(--lime); font-weight: 700; font-size: .82rem; }

/* Blogkaart met foto: het nummer blijft leesbaar op een verloop. */
.article .cover { position: relative; overflow: hidden; }
.article .cover img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.article .cover::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(transparent 45%, rgba(21,23,42,.72));
}
.article .cover span { position: relative; z-index: 1; }

/* Bovenaan staat de machine links en de tekst rechts over de maïs, zodat de
   cabine vrij blijft. Daarom gaan het donkere verloop en het beeldmerk mee
   naar de andere kant. Op een telefoon staat de tekst toch over de hele
   breedte; daar blijft het zoals het was. */
@media (min-width: 901px) {
  .hero {
    background:
      /* Licht gehouden: "niet te donker maken, dan zie je de mais niet zo goed".
         De leesbaarheid komt van de schaduw op de tekst hieronder. */
      linear-gradient(270deg, rgba(18,15,30,.5) 0%, rgba(18,15,30,.28) 45%, rgba(18,15,30,.06)),
      url('/assets/hero-pixall.jpg') center 40%/cover;
  }
  .hero .hero-content .eyebrow,
  .hero .hero-content h1,
  .hero .hero-content p { text-shadow: 0 2px 14px rgba(10,8,20,.65), 0 1px 3px rgba(10,8,20,.5); }
  .hero .hero-content { max-width: none; padding-left: max(0px, calc(100% - 620px)); }
  /* In de smallere kolom: kop op twee regels, anders vallen de knoppen onder de vouw. */
  .hero .hero-content h1 { font-size: clamp(3rem, 5.2vw, 5.4rem); }
  .hero-brandmark { right: auto; left: clamp(1rem, 5vw, 5rem); }
}

/* Eaton-pagina: de eigen oude tandempomp vaag in de donkere kop ("eaton pagina
   vaag op achtergrond", 18 okt). Rechts, waar geen tekst staat; naar links
   loopt hij weg zodat de kop leesbaar blijft. */
.eaton-hero { position: relative; overflow: hidden; }
.eaton-hero::before {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: min(55%, 640px);
  background: url('/assets/eaton-tandempomp.jpg') center / cover no-repeat;
  opacity: .22;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 45%);
          mask-image: linear-gradient(90deg, transparent, #000 45%);
  pointer-events: none;
}
.eaton-hero > .wrap { position: relative; z-index: 1; }

/* Eaton-pagina: foto naast de tekst, seriekaarten zonder de grote witruimte
   boven de kop die de dienstkaarten op de homepage hebben. */
.eaton-foto { width: 100%; height: auto; border-radius: 24px; box-shadow: var(--shadow); }
.eaton-series { background: #fff; }
.eaton-series .card h3 { margin-top: 1rem; }
.eaton-series .card { min-height: 0; }
.eaton-noot { margin-top: 2.5rem; font-size: .88rem; color: var(--muted); }

/* De eigen 3D-tekening vervaagd achter "Van onderdeel tot complete oplossing"
   ("ergens op de achtergrond, mag vervagen"). multiply: het wit valt weg en
   alleen de lijnen blijven; het masker laat de randen in de achtergrond
   verdwijnen. Strak bijgesneden, zonder iets van het scherm erop. */
#diensten { position: relative; overflow: hidden; }
#diensten::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  right: -4%;
  width: min(62vw, 760px);
  aspect-ratio: 900 / 855;
  background: url('/assets/tekening-achtergrond.jpg') center / contain no-repeat;
  opacity: .14;
  mix-blend-mode: multiply;
  -webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 55%, transparent 100%);
  pointer-events: none;
}
#diensten > .wrap { position: relative; z-index: 1; }

/* Blogartikel: een smalle leeskolom, de foto erboven. */
.artikel { max-width: 760px; }
.artikel h2 { font-size: 1.6rem; line-height: 1.15; margin: 2.2rem 0 .6rem; }
.artikel p, .artikel li { font-size: 1.06rem; }
.artikel-foto { width: 100%; height: auto; border-radius: 20px; margin-bottom: 1.8rem; box-shadow: var(--shadow); }
/* Ronde uitsnede: geen schaduw of afgeronde hoek van een vierkante foto. */
.artikel-foto.rond { width: min(100%, 460px); display: block; margin: 0 auto 1.8rem; border-radius: 50%; box-shadow: none; }
.genummerd { padding-left: 1.3rem; }
.genummerd li { margin: .55rem 0; }
.artikel-vraag { margin: 2.6rem 0 1.4rem; padding: 1.4rem; border: 1px solid var(--line); border-radius: 18px; background: #fff; display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; }
.artikel .maattabel-houder { margin: 1rem 0; }
/* Tipblok in een artikel: valt op, maar rustig, in de goudkleur van de site. */
.artikel .tip { margin: 1.6rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--lime); border-radius: 0 14px 14px 0; background: #fbf6e6; }
/* De site zet links op de tekstkleur; in een artikel moeten ze herkenbaar zijn. */
.artikel p a { color: var(--green); font-weight: 800; }
/* Concept: zichtbaar voor wie nakijkt, en een herinnering dat het nog moet. */
.concept-strook { background: #fff3c4; color: #6b4e00; border-bottom: 1px solid #e8d48a; text-align: center; font-weight: 800; font-size: .88rem; padding: .55rem 1rem; }

/* Maattabel inch-maten: op een smalle telefoon zijwaarts te schuiven, in
   plaats van dat de hele pagina breder wordt. */
.maattabel-houder { overflow-x: auto; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.maattabel { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; min-width: 420px; }
.maattabel th, .maattabel td { padding: .75rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line); }
.maattabel th { font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); background: var(--paper); }
.maattabel tbody tr:last-child td { border-bottom: 0; }
.maattabel td:first-child { font-weight: 800; color: var(--green); }
@media (max-width: 600px) {
  .maattabel { min-width: 0; font-size: .86rem; }
  .maattabel th, .maattabel td { padding: .6rem .45rem; }
  .maattabel th { font-size: .66rem; letter-spacing: .03em; }
}
.inch-verwijzing { margin-top: 1.4rem; text-align: center; }
/* Onder de merkenstrip: andere machine met een bekend merk (17 okt: "schroom
   niet en meld u bij ons, met ons team van specialisten komen we er wel uit"). */
.andere-machine { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; color: #d9d6e2; }
.andere-machine p { margin: 0; max-width: 760px; }
.andere-machine b { color: #fff; }
/* Over Gmotion: het feit over oude machines (oudste in onderhoud: 1986), in
   hetzelfde gouden blok als in blog 06. */
.over-feit { margin: 1.2rem 0; padding: 1rem 1.2rem; border-left: 4px solid var(--lime); border-radius: 0 14px 14px 0; background: #fbf6e6; }
/* Gebruikte machines zoeken (17 okt: "met ons netwerk in de branche gaan we op
   zoek naar een passende machine"): een smalle balk onder de drie diensten,
   geen vierde kaart, zodat het rustig blijft. */
.gebruikt-blok { margin-top: 1rem; padding: 1.3rem 1.6rem; border: 1px solid var(--line); border-left: 4px solid var(--green); border-radius: 18px; background: #fff; display: flex; flex-wrap: wrap; gap: 1rem 2rem; align-items: center; justify-content: space-between; }
.gebruikt-blok b { display: block; font-size: 1.15rem; }
.gebruikt-blok span { color: var(--muted); }
.inch-verwijzing a { font-weight: 800; color: var(--green); }

/* Het briefpapier terug op de site (19 okt 2026: "in het midden zie je 3 pijlen,
   kun je die subtiel ergens terug laten komen", en de streep links: "ja subtiel").
   De pijlen staan licht achter "Over Gmotion" en in het paarse contactblok; de
   streep van het briefpapier (kort paars, dan geel) wordt de linkerrand van de
   gele tipblokken. Het logo zelf blijft zoals het is ("op site is mooier nu"). */
#over { position: relative; overflow: clip; }
#over::before { content: ""; position: absolute; right: -90px; top: 50%; width: 560px; aspect-ratio: 1; transform: translateY(-50%) rotate(-8deg); background: url('/assets/pijlen.png') center/contain no-repeat; opacity: .09; pointer-events: none; }
#over .wrap { position: relative; }
.cta-box { position: relative; overflow: hidden; }
.cta-box::after { content: ""; position: absolute; right: -40px; bottom: -70px; width: 300px; aspect-ratio: 1; background: url('/assets/pijlen.png') center/contain no-repeat; opacity: .16; pointer-events: none; }
.cta-box > * { position: relative; z-index: 1; }
.tip, .over-feit { border-left-color: var(--lime); border-image: linear-gradient(var(--green) 0 26%, var(--lime) 26%) 1; }
/* Lijsten in de artikelen: het vinkje, de vette kop en de uitleg in vaste
   kolommen. Als flex begon de uitleg overal ergens anders, afhankelijk van hoe
   lang de kop was ("lijn dit netjes uit", 19 okt). Op de telefoon staat de
   uitleg onder de kop. */
.artikel .checklist li { display: grid; grid-template-columns: 1.1rem 13rem 1fr; column-gap: .7rem; align-items: start; }
.artikel .checklist li > b { grid-column: 2; }
@media (max-width: 600px) {
  /* geen grid hier: de losse uitleg na de kop is een tekstknoop zonder eigen
     element en viel dan in de smalle vinkjeskolom, een woord per regel */
  .artikel .checklist li { display: block; position: relative; padding-left: 1.8rem; }
  .artikel .checklist li::before { position: absolute; left: 0; top: .8rem; }
  .artikel .checklist li > b { display: block; }
}

/* Ook links langs "Vraag over dit onderwerp?" onder elk artikel (zijn vraag, 19 okt).
   Hier als binnenstreep en niet als rand: dit blok heeft rondom een dunne lijn en
   ronde hoeken, en een border-image zou die allebei weghalen. */
/* "Mis ook op wat andere plekken": dezelfde streep langs de witte blokken met
   een eigen boodschap -- gebruikte machine, Metaalunie, het kaartje op de foto. */
.artikel-vraag, .gebruikt-blok, .membership-card { position: relative; }
/* het kaartje op de foto staat al absoluut: geen relative eroverheen, anders
   valt het uit de foto (gezien 19 okt) */
.artikel-vraag, .gebruikt-blok, .membership-card, .photo-note { overflow: hidden; padding-left: 1.8rem; }
.gebruikt-blok, .membership-card { border-left: 1px solid var(--line); }
.artikel-vraag::before, .gebruikt-blok::before, .membership-card::before, .photo-note::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(var(--green) 0 26%, var(--lime) 26%); }
@media (max-width: 900px) {
  #over::before { width: 380px; right: -120px; top: 72%; }
}

/* Taalkeuze rechtsboven (19 okt 2026: "een taalkeuze in de hoek"). Een
   <details>, dus zonder script; op de telefoon staat hij naast het menu.
   De tip dat de vertaling met AI is gemaakt staat in de lijst en onderaan. */
.navlinks { margin-left: auto; gap: 1.25rem; }
.navlinks a { white-space: nowrap; }
.nav { gap: 1.2rem; }
.brand { flex-shrink: 0; }
/* Met de taalkeuze erbij (en straks Duitse woorden in het menu) past de
   balk onder ~1180 px niet meer op één regel: dan al het ☰-menu, zoals op de
   telefoon, in plaats van een logo dat wordt weggedrukt. */
@media (max-width: 1180px) {
  .navlinks { display: none; }
  .menu { display: block; }
  .taalkeuze { margin-left: auto; margin-right: .6rem; }
}
/* zelfde, maar gezet door script.js als de balk in deze taal niet past */
.nav-smal .navlinks { display: none; }
.nav-smal .menu { display: block; }
.nav-smal .taalkeuze { margin-left: auto; margin-right: .6rem; }
.taalkeuze { position: relative; }
.taalkeuze summary { list-style: none; cursor: pointer; font-weight: 800; font-size: .82rem; letter-spacing: .06em; padding: .45rem .7rem; border: 1px solid var(--line); border-radius: 999px; background: #fff; display: flex; align-items: center; gap: .35rem; }
.taalkeuze summary::-webkit-details-marker { display: none; }
.taalkeuze summary::after { content: ""; width: 6px; height: 6px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-2px) rotate(45deg); }
.taalkeuze[open] summary { border-color: var(--green); color: var(--green); }
.taalkeuze-lijst { position: absolute; right: 0; top: calc(100% + .5rem); z-index: 30; width: 230px; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: .5rem; display: flex; flex-direction: column; }
.taalkeuze-lijst a { padding: .5rem .7rem; border-radius: 9px; font-weight: 650; }
.taalkeuze-lijst a:hover { background: var(--paper); color: var(--green); }
.taalkeuze-lijst a[aria-current] { color: var(--green); font-weight: 800; }
.taalkeuze-lijst small { margin: .4rem .3rem .2rem; padding: .55rem .6rem; border-left: 3px solid var(--lime); background: #fbf6e6; border-radius: 0 9px 9px 0; color: var(--muted); font-size: .76rem; line-height: 1.4; }
.vertaal-tip { padding-top: 1.2rem; color: #8e8895; font-size: .8rem; }
@media (max-width: 900px) {
  .taalkeuze { margin-left: auto; margin-right: .6rem; }
}