/* Tradius Global — round 9, componenten.
   Bouwt op tokens.css. Eén ontwerptaal voor de homepage en alle subpagina's.
   Twee achtergronden per pagina: paper (--surface-page) en Midnight Sky,
   met witte kaarten ertussen. Oranje blijft spaarzaam. */

/* ============================================================ basis */

body{overflow-x:hidden}
.wrap{max-width:var(--container-max);margin:0 auto;padding:0 var(--container-pad)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--tg-midnight-sky);color:#fff;padding:12px 18px;border-radius:0 0 var(--radius-sm) 0}
.skip:focus{left:0}

section{scroll-margin-top:calc(var(--header-height) + 12px)}

/* donkere secties dragen .dark; die zet de tekstkleuren om */
.dark{background:var(--tg-midnight-sky);color:var(--text-on-inverse)}
.dark h1,.dark h2,.dark h3,.dark h4{color:#fff}
.dark .lede{color:var(--text-on-inverse-soft)}
.dark a{color:#fff}

h2 .hl,h1 .hl,.hl{color:var(--text-accent-warm)}
.dark .hl{color:var(--text-accent-warm-on-dark)}

.lede{font-size:var(--text-lede);line-height:1.6;color:var(--text-body-color);max-width:var(--measure-lede)}

.sec{padding:var(--section-y) 0}
.sec-tight{padding:var(--section-y-tight) 0}

/* scroll-reveal — elk .rv-element komt met een korte vertraging op */
.rv{opacity:0;transform:translateY(18px);transition:opacity .75s var(--ease-out-soft),transform .75s var(--ease-out-soft)}
.rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none}}

/* ============================================================ knoppen */

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-size:var(--text-body-sm);font-weight:var(--weight-bold);
  letter-spacing:-.005em;border-radius:var(--radius-button);border:1.5px solid transparent;
  padding:13px 22px;cursor:pointer;text-decoration:none;white-space:nowrap;
  transition:background var(--dur-base),color var(--dur-base),border-color var(--dur-base),
             transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base)}
.btn:hover{transform:translateY(var(--lift-hover))}
.btn:active{transform:translateY(0)}

.btn-p{background:var(--action-primary-bg);color:var(--action-primary-fg);box-shadow:var(--shadow-cta);font-weight:var(--weight-black)}
.btn-p:hover{background:var(--action-primary-bg-hover);color:#fff}

.btn-s{background:transparent;color:var(--action-secondary-fg);border-color:var(--action-secondary-border)}
.btn-s:hover{background:var(--action-secondary-bg-hover);color:#fff}

.btn-s.on-dark,.dark .btn-s{color:#fff;border-color:rgba(255,255,255,.42)}
.btn-s.on-dark:hover,.dark .btn-s:hover{background:#fff;color:var(--tg-midnight-sky);border-color:#fff}

.btn-xl{padding:16px 28px;font-size:var(--text-body)}
.btn-sm{padding:10px 16px;font-size:var(--text-label)}

/* tekstlink met pijl die meebeweegt */
.arrow{display:inline-flex;align-items:center;gap:8px;font-weight:var(--weight-bold);
  font-size:var(--text-body-sm);color:var(--text-accent);text-decoration:none}
.arrow svg{width:18px;height:18px;transition:transform var(--dur-base) var(--ease-out-soft)}
.arrow:hover svg{transform:translateX(4px)}
.dark .arrow{color:var(--text-accent-warm-on-dark)}

/* ============================================================ header */

/* De balk draagt de huisstijlkleur, niet de foto eronder: donkerblauw op elke
   pagina en in elke staat. Bij scrollen komt er alleen een hairline en schaduw
   bij, zodat de balk los komt van de inhoud. (Feedback 20-08.) */
.hdr{position:fixed;top:0;left:0;right:0;z-index:90;height:var(--header-height);
  display:flex;align-items:center;background:var(--tg-midnight-sky);
  transition:box-shadow var(--dur-slow),border-color var(--dur-slow);
  border-bottom:1px solid transparent}
.hdr .wrap{display:flex;align-items:center;gap:34px;width:100%}
.hdr-logo{display:flex;align-items:center;flex:0 0 auto}
.hdr-logo img{height:46px;width:auto;display:block}

.hdr nav{display:flex;gap:26px;margin-left:auto}
.hdr nav a{font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:rgba(255,255,255,.86);
  text-decoration:none;padding:6px 0;position:relative;transition:color var(--dur-base)}
.hdr nav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:var(--tg-ambition-orange);transition:right var(--dur-base) var(--ease-out-soft)}
.hdr nav a:hover{color:#fff}
.hdr nav a:hover::after{right:0}

/* het menu-item van de sectie waarin je staat: dezelfde oranje lijn, maar vast.
   Op detailpagina's markeert hij de sectie (aria-current="true"), op de
   hoofdpagina zelf de pagina (aria-current="page"). */
.hdr nav a[aria-current]{color:#fff;font-weight:var(--weight-bold)}
.hdr nav a[aria-current]::after{right:0}

.hdr-act{display:flex;align-items:center;gap:16px;flex:0 0 auto}
.hdr-call{font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:#fff;text-decoration:none;white-space:nowrap}
.hdr-call:hover{color:var(--amber-400)}

/* gescrolde staat: dezelfde donkere balk, alleen losgemaakt van de inhoud */
.hdr.stuck{border-bottom-color:var(--border-inverse);box-shadow:0 10px 30px rgba(2,1,46,.34)}

.burger{display:none;background:none;border:0;padding:8px;cursor:pointer;color:#fff}

/* ============================================================ hero */

.hero>.wrap{min-width:0}
.hero{position:relative;min-height:min(86vh,780px);display:flex;align-items:center;
  padding:calc(var(--header-height) + 56px) 0 64px;background:var(--tg-midnight-sky);overflow:hidden;color:#fff}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.5) contrast(1.08) brightness(.78);
  transform-origin:62% 46%;animation:heroPan 34s var(--ease-out-soft) infinite alternate}
/* navy-verloop volgens --gradient-photo-shade, plus een scrim links onder de kop */
.hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(20,69,107,.26) 0%,rgba(4,3,72,.6) 44%,rgba(4,3,72,.82) 78%,rgba(4,3,72,.9) 100%),
             radial-gradient(58% 72% at 4% 46%,rgba(4,3,72,.9) 0%,rgba(4,3,72,.3) 58%,transparent 80%)}
.hero-lanes canvas,.closing-lanes canvas{display:block;width:100%;height:100%}
.hero-lanes{position:absolute;inset:0;z-index:1;opacity:.55;
  -webkit-mask-image:radial-gradient(120% 92% at 76% 42%,#000 8%,transparent 74%);
          mask-image:radial-gradient(120% 92% at 76% 42%,#000 8%,transparent 74%)}
.hero-glow{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(46% 54% at 84% 16%,rgba(254,108,6,.24) 0%,transparent 62%);
  animation:heroGlow 16s ease-in-out infinite alternate}
.hero-top{position:absolute;left:0;right:0;top:0;height:3px;background:var(--gradient-brand);z-index:3}

@keyframes heroPan{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.14) translate3d(-1.6%,-1.2%,0)}}
@keyframes heroGlow{from{opacity:.55}to{opacity:1}}

.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:minmax(0,1.24fr) minmax(0,.76fr);gap:52px;align-items:center}
.hero-grid>*{min-width:0}

/* drie statements, elk op één regel — vandaar deze maat en de <br>'s in de HTML */
.hero h1{font-size:clamp(31px,3.5vw,51px);font-weight:var(--weight-black);line-height:1.06;
  letter-spacing:-.028em;max-width:24ch;margin:0}
.hero h1 .ln{display:inline}
@media (min-width:1100px){.hero h1 .ln{display:block}}
.hero h1 .hl{color:var(--amber-400);display:block}
/* losse woorden in de kop die oranje moeten zijn (feedback 20-08) */
.hero h1 .hw{font-style:normal;color:var(--amber-400)}
.hero .sub{margin:24px 0 0;font-size:var(--text-lede);line-height:1.58;color:#D5D9EE;max-width:50ch;text-wrap:pretty}
.hero-act{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}

.hero-in>*{animation:heroRise .85s var(--ease-out-soft) both}
.hero-in>h1{animation-delay:.08s}
.hero-in>.sub{animation-delay:.2s}
.hero-in>.hero-act{animation-delay:.32s}
@keyframes heroRise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}

/* de opgetilde quote-kaart */
.qcard{background:var(--surface-card);border-radius:var(--radius-2xl);padding:28px 28px 0;
  box-shadow:0 34px 74px rgba(4,3,72,.46),0 0 0 1px rgba(255,255,255,.1);
  color:var(--text-strong);animation:heroRise .85s var(--ease-out-soft) .42s both}
.qcard h2{font-size:var(--text-heading-4);font-weight:var(--weight-black);letter-spacing:-.014em;margin:0}
.qcard>p{margin:8px 0 0;font-size:var(--text-caption);color:var(--text-muted);line-height:1.5}
/* QuickQuoteBar uit het design system: één pill, part number, hairline, qty,
   en de oranje knop tegen de rand aan. */
.qbar{display:flex;margin-top:20px;background:var(--surface-card);
  border:var(--border-regular) solid var(--border-subtle);border-radius:var(--radius-pill);
  overflow:hidden;box-shadow:var(--shadow-1);
  transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.qbar:focus-within{border-color:var(--tg-network-blue);box-shadow:var(--ring-focus),var(--shadow-1)}
.qbar input{flex:1 1 auto;min-width:0;background:none;border:0;outline:0;color:var(--text-strong);
  font-family:var(--font-sans);font-size:var(--text-body-sm);padding:14px 20px}
.qbar input::placeholder{color:var(--neutral-400)}
.qbar input.qty{flex:0 0 82px;border-left:var(--border-hairline) solid var(--border-subtle);
  padding-left:18px;padding-right:10px}
.qbar button{background:var(--action-primary-bg);color:var(--action-primary-fg);border:0;
  font-family:var(--font-sans);font-weight:var(--weight-black);font-size:var(--text-label);
  padding:0 24px;cursor:pointer;white-space:nowrap;transition:background var(--dur-base)}
.qbar button:hover{background:var(--action-primary-bg-hover)}
/* de 30-minutenbelofte hoort bij het formulier, dus staat in de kaartvoet */
.qcard-foot{display:flex;gap:11px;align-items:flex-start;margin:22px -28px 0;padding:16px 28px;
  border-top:1px solid var(--border-subtle);background:var(--neutral-25);
  border-radius:0 0 var(--radius-2xl) var(--radius-2xl);
  font-size:var(--text-caption);color:var(--text-muted);line-height:1.45}
.qcard-foot svg{width:18px;height:18px;flex:0 0 auto;color:var(--text-accent-warm);margin-top:1px}
.qcard-foot b{color:var(--text-strong);font-weight:var(--weight-bold)}

/* ============================================================ promise rail */
/* Verhoudingen uit round-8: 44px icoontegel, het feit op 19px, de toelichting
   eronder. De band draagt sinds de feedback van 20-08 de huisstijlkleur, met
   boven het feit een kort label (Fast / Global / Intelligent / Reliable). */

.rail-sec{background:var(--tg-midnight-sky);color:var(--text-on-inverse);
  border-top:1px solid var(--border-inverse);border-bottom:1px solid var(--border-inverse);
  position:relative;z-index:4}
.rail{position:relative;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  border-bottom:1px solid var(--border-inverse)}
/* boven uitlijnen: sommige feiten lopen over twee regels, en met centreren
   zouden de vier items niet meer op één lijn beginnen */
.ritem{position:relative;display:flex;align-items:flex-start;gap:14px;text-align:left;background:none;
  border:0;cursor:pointer;padding:26px 24px 26px 0;border-left:1px solid var(--border-inverse);
  min-width:0;transition:background var(--dur-base)}
.ritem:first-child{border-left:0}
.ritem:not(:first-child){padding-left:24px}
.ritem:hover{background:rgba(255,255,255,.04)}
.ritem .ric{width:44px;height:44px;margin-top:1px;flex:0 0 auto;border-radius:var(--radius-md);
  background:var(--surface-inverse-panel);color:var(--text-on-inverse-soft);display:flex;align-items:center;
  justify-content:center;transition:background .3s,color .3s,transform .4s var(--ease-out-soft)}
.ritem .ric svg{width:23px;height:23px}
.ritem .lb{display:block;font-size:var(--text-micro);font-weight:var(--weight-black);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-inverse-soft);
  margin-bottom:6px;transition:color .3s}
.ritem b{display:block;font-size:17.5px;font-weight:var(--weight-black);color:rgba(255,255,255,.72);
  letter-spacing:-.01em;line-height:1.15;transition:color .3s}
.ritem i{display:block;font-style:normal;font-size:var(--text-caption);
  color:var(--text-on-inverse-soft);margin-top:3px;line-height:1.35}
.ritem[aria-selected=true] b{color:#fff}
.ritem[aria-selected=true] .lb{color:var(--amber-400)}
.ritem[aria-selected=true] .ric{background:var(--tg-ambition-orange);color:#fff;transform:translateY(-2px)}
.rail-bar{position:absolute;left:0;bottom:-1px;height:3px;background:var(--tg-ambition-orange);width:0;
  transition:left .5s var(--ease-out-rail),width .5s var(--ease-out-rail)}
.rail-say{padding:20px 0 24px;display:flex;align-items:center;gap:13px;font-size:var(--text-body);
  color:var(--text-on-inverse-soft);min-height:70px}
.rail-say svg{width:18px;height:18px;flex:0 0 auto;color:var(--text-accent-warm-on-dark)}

/* ============================================================ hive */

/* Op breed staat de honingraat links en de tekst rechts, precies zoals eerst.
   Op smal wordt .hive-text een display:contents-schil, zodat kop, raat en paneel
   drie losse rijen worden en het paneel ónder de raat komt te staan — wat je
   aantikt verschijnt dan meteen eronder in beeld. */
/* Benoemde gebieden, sinds de aanwijzing onder de raat erbij kwam (27-08-2026).
   Met automatische plaatsing belandde die aanwijzing in kolom 2 en werd de hele
   tekstkolom naar een tweede rij geduwd — zichtbaar kapot, maar alleen als je
   de posities meet. De rijafstand gaat van 64 naar 14: 64 was de kolomafstand
   en werd nooit gebruikt, want er was maar één rij. */
.hive-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.92fr);
  grid-template-areas:"stage text" "hint text";gap:14px 64px;align-items:center}
.hive-text{grid-area:text}
.hive-stage{position:relative;width:100%;max-width:520px;margin:0 auto;aspect-ratio:1/1;grid-area:stage}

/* zeshoek uit Concept 2: clip-path, breedte 33% van het vlak, hoogte 0.866 daarvan */
.hex{position:absolute;width:33%;aspect-ratio:1/.866;transform:translate(-50%,-50%);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  -webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  border:0;padding:8px;cursor:pointer;background:var(--blue-100);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;
  transition:background .28s var(--ease-out-soft),transform .28s var(--ease-out-soft)}
.hex-ic{display:block;color:var(--text-accent);transition:color .28s}
.hex-lbl{font-family:var(--font-sans);font-size:var(--text-caption);font-weight:var(--weight-black);
  letter-spacing:.06em;color:var(--text-strong);transition:color .28s}
.hex[aria-selected=true]{background:var(--tg-ambition-orange);transform:translate(-50%,-50%) scale(1.045)}
.hex[aria-selected=true] .hex-ic,.hex[aria-selected=true] .hex-lbl{color:#fff}

.hex-core{position:absolute;left:50%;top:50%;width:33%;aspect-ratio:1/.866;transform:translate(-50%,-50%);
  clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  -webkit-clip-path:polygon(25% 0%,75% 0%,100% 50%,75% 100%,25% 100%,0% 50%);
  background:var(--tg-midnight-sky);display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:6px;pointer-events:none}
/* alleen het beeldmerk in de kern, zonder woordmerk (feedback 20-08) */
.hex-core img{height:44px;width:auto;display:block}

.hive-detail{padding-left:26px;border-left:3px solid var(--tg-ambition-orange);margin-top:34px}
.hive-detail .hd-idx{margin:0;font-size:var(--text-eyebrow);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent-warm)}
.hive-detail h3{margin:10px 0 0;font-size:var(--text-heading-2)}
.hive-detail p{margin:12px 0 0;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);max-width:44ch;text-wrap:pretty}
.hive-detail .hd-meta{margin:20px 0 0;font-size:var(--text-micro);font-weight:var(--weight-bold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--text-muted)}
.hive-fade{animation:fadeUp .4s var(--ease-out-soft)}
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ============================================================ service cards */

.svc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:44px}
/* zes diensten in twee kolommen — het raster dat Tradius op 20-08 aanwees.
   Drie rijen van twee leest rustiger dan een 3-koloms raster met een halve rij. */
.svc-grid.six{grid-template-columns:repeat(2,minmax(0,1fr))}
.svc{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:24px 24px 22px;text-decoration:none;display:block;
  transition:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base),border-color var(--dur-base)}
.svc:hover{transform:translateY(var(--lift-card));box-shadow:0 24px 52px rgba(4,3,72,.14);border-color:var(--tg-midnight-sky)}
.svc .ic{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  background:var(--blue-100);color:var(--text-accent);
  transition:background var(--dur-slow),color var(--dur-slow),transform var(--dur-slow) var(--ease-out-soft)}
.svc .ic svg{width:23px;height:23px}
.svc:hover .ic{background:var(--tg-ambition-orange);color:#fff;transform:rotate(-6deg) scale(1.06)}
.svc h3{margin:18px 0 0;font-size:var(--text-title);font-weight:var(--weight-black);letter-spacing:-.01em;color:var(--text-strong)}
.svc p{margin:9px 0 0;font-size:var(--text-body-sm);line-height:1.55;color:var(--text-body-color)}
.svc .tag{margin:15px 0 0;font-size:var(--text-micro);font-weight:var(--weight-bold);letter-spacing:.12em;
  text-transform:uppercase;color:var(--text-muted);transition:color var(--dur-base)}
.svc:hover .tag{color:var(--text-accent-warm)}

/* ============================================================ globe band */
/* Opzet uit round-8: de globe vrij op de donkere grond, ernaast één paneel
   waarin de drie regiotabs bovenin zitten. De actieve tab is vol oranje. */

.globe-sec{padding:var(--section-y) 0}
.globe-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:52px;align-items:center;margin-top:44px}
.globe-grid>*{min-width:0}
.globe-stage{display:flex;flex-direction:column;align-items:center;gap:18px}
.globe-canvas-wrap{position:relative;width:100%;max-width:470px;aspect-ratio:1/1}
canvas#globe{width:100%;height:100%;display:block;touch-action:none;cursor:grab}
canvas#globe.dragging{cursor:grabbing}
.globe-hint{display:flex;align-items:center;gap:9px;font-size:var(--text-caption);
  color:var(--text-on-inverse-soft);text-align:center}
.globe-hint svg{width:16px;height:16px;flex:0 0 auto;color:var(--amber-400)}

.gcard{background:var(--surface-inverse-panel);border:1px solid var(--border-inverse);
  border-radius:var(--radius-xl);overflow:hidden}
.gcard-top{display:flex;align-items:stretch;border-bottom:1px solid var(--border-inverse)}
.gtab{flex:1 1 0;min-width:0;background:none;border:0;border-left:1px solid var(--border-inverse);
  color:var(--text-on-inverse-soft);font-family:var(--font-sans);font-size:var(--text-label);
  font-weight:var(--weight-bold);padding:15px 8px;cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast)}
.gtab:first-child{border-left:0}
.gtab:hover{background:rgba(125,177,251,.12);color:#fff}
.gtab[aria-selected=true]{background:var(--tg-ambition-orange);color:#fff;font-weight:var(--weight-black)}

.gcard-body{padding:30px 32px 32px}
.gcard-body h3{margin:0;font-size:var(--text-heading-2)}
.gcard-body>p{margin:10px 0 0;font-size:var(--text-body-sm);line-height:1.6;color:var(--text-on-inverse-soft)}
.gcard-body ul{list-style:none;margin:22px 0 0;display:grid;gap:12px}
.gcard-body li{display:flex;gap:12px;align-items:flex-start;font-size:var(--text-body-sm);color:#fff;line-height:1.45}
.gcard-body li svg{width:17px;height:17px;flex:0 0 auto;color:var(--amber-400);margin-top:3px}
.gmeta{margin-top:24px;padding-top:20px;border-top:1px solid var(--border-inverse);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.gmeta b{display:block;font-size:var(--text-heading-4);font-weight:var(--weight-black);
  letter-spacing:-.012em;color:#fff}
.gmeta span{display:block;margin-top:3px;font-size:var(--text-caption);color:var(--text-on-inverse-soft)}
.gfade{animation:fadeUp .4s var(--ease-out-soft)}

/* ============================================================ statement */

.stmt{position:relative;min-height:clamp(340px,52vh,480px);display:flex;align-items:center;
  overflow:hidden;background:var(--tg-midnight-sky)}
.stmt img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.34) contrast(1.06) brightness(.72)}
.stmt::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,3,72,.86) 0%,rgba(4,3,72,.5) 46%,rgba(4,3,72,.9) 100%)}
.stmt .wrap{position:relative;z-index:2;text-align:center}
.stmt p{margin:0 auto;max-width:26ch;font-size:clamp(25px,3.2vw,42px);font-weight:var(--weight-black);
  line-height:1.14;letter-spacing:-.022em;color:#fff;text-wrap:balance}
.stmt .hl{color:var(--amber-400)}

/* ============================================================ industries */
/* Exact de waarden van IndustryCard uit het design system: in rust bijna grijs
   en licht gedempt, bij hover klaart het beeld juist óp en trekt de overlay
   bovenin bijna helemaal weg. */

/* De kaarten stonden verspringend; sinds de feedback van 20-08 liggen ze in een
   recht raster, zodat de koppen op één lijn staan. */
.ind-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:44px;align-items:stretch}


.ind{position:relative;display:block;text-decoration:none;border-radius:var(--radius-lg);
  overflow:hidden;min-height:300px;background:var(--tg-midnight-sky);
  transition:transform var(--dur-base),box-shadow var(--dur-base)}
.ind:hover{transform:translateY(var(--lift-card));box-shadow:var(--shadow-2)}
.ind img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) contrast(1.04) brightness(.9);
  transition:transform .55s,filter var(--dur-slow)}
.ind:hover img{filter:grayscale(.15) contrast(1.02) brightness(1.02);transform:scale(1.05)}
.ind .shade{position:absolute;inset:0;transition:background var(--dur-slow);
  background:var(--gradient-photo-shade)}
.ind:hover .shade{background:linear-gradient(178deg,rgba(27,34,112,.06) 0%,rgba(4,3,72,.26) 40%,
  rgba(4,3,72,.90) 74%,rgba(4,3,72,.95) 100%)}
.ind-in{position:relative;z-index:2;min-height:300px;display:flex;flex-direction:column;
  justify-content:flex-end;padding:26px 24px}
.ind h3{margin:0;font-size:var(--text-heading-4);font-weight:var(--weight-black);color:#fff}
.ind p{margin:7px 0 0;font-size:var(--text-label);line-height:1.45;color:#E4EBF6}
.ind .tag{margin:14px 0 0;font-size:var(--text-eyebrow);font-weight:var(--weight-bold);
  letter-spacing:.15em;text-transform:uppercase;color:var(--blue-300);white-space:nowrap}
.ind .tag i{font-style:normal;color:var(--tg-dutch-born)}

/* ============================================================ quality: proceslijn */

/* De gebogen lijn is op 20-08 vervangen: Tradius vond hem te licht voor een
   onderwerp dat commercieel zwaar weegt. Nu een strakke, technische ladder —
   één rechte rail, zes genummerde knopen die erop rusten, en per stap een
   eigen kolom met een hairline ertussen. De loop die stap voor stap oplicht is
   gebleven; alleen de vorm is anders.                                        */

.q-head{max-width:var(--measure-lede)}
.qflow{position:relative;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));
  margin-top:64px;border-top:2px solid var(--border-subtle)}
.qrail{position:absolute;left:0;top:-2px;height:2px;width:0;background:var(--gradient-brand);
  transition:width .6s var(--ease-out-rail);z-index:1}
.qcol{position:relative;padding:38px 20px 30px;border-left:1px solid var(--border-subtle);min-width:0;
  transition:background var(--dur-slow)}
.qcol:first-child{border-left:0}
.qcol.lit{background:color-mix(in srgb,var(--tg-ambition-orange) 3%,transparent)}
.qcol .qn{position:absolute;z-index:2;left:20px;top:-17px;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:var(--weight-black);line-height:1;
  background:var(--surface-page-alt);border:2px solid var(--border-default);color:var(--text-muted);
  transition:background var(--dur-slow),border-color var(--dur-slow),color var(--dur-slow)}
.qcol.lit .qn{background:var(--tg-ambition-orange);border-color:var(--tg-ambition-orange);color:#fff}
.qcol.now .qn{box-shadow:0 0 0 6px color-mix(in srgb,var(--tg-ambition-orange) 16%,transparent)}
.qcol .qic{display:block;width:24px;height:24px;color:var(--neutral-400);
  transition:color var(--dur-slow)}
.qcol .qic svg{width:24px;height:24px}
.qcol.lit .qic{color:var(--text-accent-warm)}
.qcol h4{margin:16px 0 0;font-size:var(--text-body-sm);font-weight:var(--weight-black);
  letter-spacing:-.005em;color:var(--text-strong);line-height:1.25}
.qcol p{margin:8px 0 0;font-size:var(--text-caption);line-height:1.5;color:var(--text-muted)}

/* op een donkere band draagt hetzelfde blok de omgekeerde kleuren */
.dark .qflow{border-top-color:var(--border-inverse)}
.dark .qcol{border-left-color:var(--border-inverse)}
.dark .qcol.lit{background:rgba(255,255,255,.04)}
.dark .qcol .qn{background:var(--surface-inverse-panel);border-color:var(--border-inverse);
  color:var(--text-on-inverse-soft)}
.dark .qcol.lit .qn{background:var(--tg-ambition-orange);border-color:var(--tg-ambition-orange);color:#fff}
.dark .qcol .qic{color:var(--text-on-inverse-soft)}
.dark .qcol.lit .qic{color:var(--text-accent-warm-on-dark)}
.dark .qcol h4{color:#fff}
.dark .qcol p{color:var(--text-on-inverse-soft)}

.q-cta{margin-top:60px;display:flex;gap:14px;flex-wrap:wrap;align-items:center}
.q-note{font-size:var(--text-body-sm);color:var(--text-muted)}
.dark .q-note{color:var(--text-on-inverse-soft)}

@media (max-width:1080px){
  .qflow{grid-template-columns:repeat(3,minmax(0,1fr))}
  .qcol:nth-child(4){border-left:0}
  .qcol:nth-child(n+4){border-top:1px solid var(--border-subtle);margin-top:34px}
  .dark .qcol:nth-child(n+4){border-top-color:var(--border-inverse)}
}
@media (max-width:720px){
  .qflow{grid-template-columns:1fr;border-top:0}
  .qrail{display:none}
  .qcol,.qcol:nth-child(4),.qcol:nth-child(n+4){border-left:0;border-top:2px solid var(--border-subtle);
    margin-top:0;padding:34px 0 26px}
  .dark .qcol,.dark .qcol:nth-child(n+4){border-top-color:var(--border-inverse)}
  .qcol .qn{left:0}
}

/* ============================================================ values */

.values{background:var(--surface-page-alt);border-top:1px solid var(--border-subtle);
  border-bottom:1px solid var(--border-subtle);padding:34px 0}
.values .wrap{display:flex;flex-wrap:wrap;gap:13px 28px;justify-content:center}
.chip{display:inline-flex;align-items:center;gap:9px;font-size:var(--text-body-sm);
  font-weight:var(--weight-medium);color:var(--text-body-color)}
.chip .dot{width:6px;height:6px;border-radius:2px;transform:rotate(45deg);background:var(--blue-400)}
.chip:nth-child(3n+1) .dot{background:var(--tg-ambition-orange)}

/* ============================================================ closing */

.closing{position:relative;overflow:hidden;padding:var(--section-y-loose) 0;text-align:center}
.closing-lanes{position:absolute;inset:0;opacity:.38;
  -webkit-mask-image:radial-gradient(78% 122% at 50% 100%,#000 0%,transparent 68%);
          mask-image:radial-gradient(78% 122% at 50% 100%,#000 0%,transparent 68%)}
.closing .wrap{position:relative;z-index:2}
.closing img.mark{height:46px;width:auto;margin:0 auto 26px}
.closing h2{margin:0 auto;max-width:21ch;font-size:var(--text-display-2);line-height:1.12;letter-spacing:-.016em}
.closing p{margin:20px auto 32px;max-width:58ch;color:var(--text-on-inverse-soft);font-size:var(--text-lede)}
.closing .acts{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================ footer */

/* overflow-x:clip omdat de doorlopende lijn hieronder met 100vw rekent; de
   schuifbalkbreedte zou anders een horizontale schuifbalk opleveren. */
.ftr{background:#02012E;color:var(--text-on-inverse);padding:64px 0 0;overflow-x:clip}
/* de industriekolom loopt in twee kolommen en krijgt daarom meer breedte */
.ftr-top{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.85fr) minmax(0,1.5fr) minmax(0,.8fr);gap:44px}
.ftr-brand img{height:34px;width:auto}
.ftr-brand p{margin:20px 0 0;font-size:var(--text-body-sm);line-height:1.6;color:var(--text-on-inverse-soft);max-width:32ch}
.ftr-contact{list-style:none;margin:22px 0 0;display:grid;gap:9px}
.ftr-contact li{display:flex;gap:10px;align-items:flex-start;font-size:var(--text-body-sm);color:var(--text-on-inverse-soft)}
.ftr-contact svg{width:16px;height:16px;flex:0 0 auto;color:var(--tg-ambition-orange);margin-top:3px}
.ftr-contact a{color:var(--text-on-inverse-soft);text-decoration:none}
.ftr-contact a:hover{color:#fff}
.ftr-col h3{font-size:var(--text-micro);font-weight:var(--weight-black);letter-spacing:.16em;
  text-transform:uppercase;color:#fff;margin:0 0 18px}
.ftr-col ul{list-style:none;display:grid;gap:11px}
.ftr-col a{font-size:var(--text-body-sm);color:var(--text-on-inverse-soft);text-decoration:none;
  transition:color var(--dur-base)}
.ftr-col a:hover{color:var(--amber-400)}

/* de lijn die in het concept ontbrak: één regel over de volle breedte,
   vóór de copyrightbalk. Hij staat in de container, dus breken we hem daar met
   negatieve marges uit — de copyright- en legalregel blijven wél uitgelijnd. */
.ftr-rule{margin:52px calc(50% - 50vw) 0;border:0;border-top:1px solid var(--border-inverse)}
.ftr-btm{display:flex;flex-wrap:wrap;gap:14px 32px;align-items:center;justify-content:space-between;
  padding:24px 0 30px;font-size:var(--text-caption);color:var(--neutral-500)}
.ftr-btm nav{display:flex;flex-wrap:wrap;gap:22px}
.ftr-btm a{color:var(--neutral-500);text-decoration:none}
.ftr-btm a:hover{color:#fff}

/* ============================================================ modals */
/* 1-op-1 overgenomen uit round-8 (de eerder goedgekeurde Meridian-vorm),
   met de kleuren en maten van dit design system. */

.modal{position:fixed;inset:0;z-index:120;display:none}
.modal.open{display:block}
.modal-bd{position:absolute;inset:0;background:var(--surface-scrim);
  -webkit-backdrop-filter:var(--blur-scrim);backdrop-filter:var(--blur-scrim)}
.modal-panel{position:relative;background:var(--surface-card);max-width:660px;width:calc(100% - 32px);
  margin:34px auto;border-radius:var(--radius-lg);box-shadow:var(--shadow-modal);
  max-height:calc(100vh - 68px);overflow:auto;animation:modalRise .32s var(--ease-out-soft)}
.modal-panel.narrow{max-width:520px}
@keyframes modalRise{from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none}}

.modal-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;padding:26px 28px 0}
.modal-head h2{font-size:var(--text-heading-3)}
.modal-head p{margin-top:6px;font-size:var(--text-label);color:var(--text-body-color)}
.modal-close{background:var(--surface-page);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);
  width:38px;height:38px;flex:0 0 auto;cursor:pointer;color:var(--text-strong);
  display:flex;align-items:center;justify-content:center;transition:background var(--dur-base)}
.modal-close:hover{background:var(--surface-warm-soft)}

form.quote{padding:22px 28px 30px;display:grid;gap:16px}
form.quote .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
form.quote .fgrid>*{min-width:0}

.field label{display:block;font-size:13px;font-weight:var(--weight-bold);color:var(--text-strong);margin-bottom:6px}
.field .hint{font-weight:var(--weight-medium);color:var(--text-muted);font-size:12.5px}
.field input,.field textarea,.field select{width:100%;min-width:0;font-family:var(--font-sans);
  font-size:var(--text-body-sm);color:var(--text-strong);background:var(--surface-card);
  border:var(--border-regular) solid var(--border-default);border-radius:var(--radius-sm);
  padding:11px 13px;outline:0;transition:border-color var(--dur-base),box-shadow var(--dur-base)}
.field input::placeholder,.field textarea::placeholder{color:var(--neutral-400);opacity:1}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--tg-ambition-orange)}
.field textarea{resize:vertical;min-height:92px}
.field textarea.short{min-height:70px}

.parts{display:grid;gap:10px}
.part-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,120px) 40px;gap:10px;align-items:center}
.part-row>*{min-width:0}
.part-del{width:40px;height:42px;border:var(--border-regular) solid var(--border-default);
  background:var(--surface-card);border-radius:var(--radius-sm);cursor:pointer;color:var(--text-body-color);
  display:flex;align-items:center;justify-content:center;
  transition:border-color var(--dur-base),color var(--dur-base),background var(--dur-base)}
.part-del:hover{border-color:var(--tg-ambition-orange);color:var(--text-accent-warm);background:var(--surface-warm-soft)}
.add-part{justify-self:start;background:var(--surface-warm-soft);border:var(--border-regular) solid transparent;
  color:var(--text-accent-warm);font-family:var(--font-sans);font-weight:var(--weight-bold);
  font-size:var(--text-label);padding:9px 15px;border-radius:var(--radius-sm);cursor:pointer;
  transition:border-color var(--dur-base)}
.add-part:hover{border-color:var(--tg-ambition-orange)}

.err{display:none;background:var(--danger-100);border:1px solid #E4B6C3;color:#8A1E3C;
  border-radius:var(--radius-sm);padding:11px 14px;font-size:var(--text-label);font-weight:var(--weight-semibold)}
.err.show{display:block}
.done{display:none;background:var(--surface-warm-soft);border:1px solid var(--border-subtle);
  color:var(--text-strong);border-radius:var(--radius-md);padding:18px 20px;
  font-size:var(--text-body-sm);margin:0 28px 28px}
.done.show{display:block}

.form-foot{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap}
.form-foot small{font-size:13px;color:var(--text-muted)}

/* keuzeknoppen voor het gewenste moment (belafspraak) */
.seg{display:flex;border:var(--border-regular) solid var(--border-default);
  border-radius:var(--radius-sm);overflow:hidden}
.seg label{flex:1 1 0;min-width:0;position:relative;margin:0}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.seg span{display:block;padding:11px 8px;text-align:center;font-size:var(--text-label);
  font-weight:var(--weight-semibold);color:var(--text-body-color);cursor:pointer;
  transition:background var(--dur-fast),color var(--dur-fast)}
.seg label+label span{border-left:var(--border-regular) solid var(--border-default)}
.seg input:checked+span{background:var(--tg-ambition-orange);color:#fff}
.seg input:focus-visible+span{box-shadow:inset var(--ring-focus)}

/* ============================================================ responsief */

@media (max-width:1080px){
  .hero-grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .qcard{max-width:520px}
  .globe-grid{grid-template-columns:1fr;gap:38px}
  .hive-grid{grid-template-columns:minmax(0,1fr);
    grid-template-areas:"copy" "stage" "hint" "detail";row-gap:36px}
  .hive-text{display:contents}
  .hive-copy{grid-area:copy}
  .hive-stage{grid-area:stage}
  .hive-panel{grid-area:detail}
  .hive-panel .hive-detail{margin-top:0}
  .svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .q-head{grid-template-columns:1fr;gap:26px}
  .ftr-top{grid-template-columns:repeat(2,minmax(0,1fr));gap:38px}
}
@media (max-width:960px){
  .hdr nav,.hdr-call{display:none}
  .hdr .wrap{gap:16px}
  .burger{display:flex;margin-left:auto}
  /* het grotere logo past niet naast de knop en het menu-icoon op smal */
  .hdr-logo img{height:38px}
  .rail{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ritem,.ritem+.ritem{padding:20px 18px;border-left:0;border-top:1px solid var(--border-inverse)}
  .rail-bar{display:none}
  .ritem[aria-selected=true]{background:rgba(255,255,255,.05)}
  .ind-cols{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:460px){
  /* de quick-quote pill wordt te krap voor drie velden naast elkaar */
  .qbar{flex-wrap:wrap;border-radius:var(--radius-lg)}
  .qbar input{flex:1 1 100%}
  .qbar input.qty{flex:1 1 100%;border-left:0;border-top:var(--border-hairline) solid var(--border-subtle);
    padding-left:20px}
  .qbar button{flex:1 1 100%;padding:14px 24px;border-top:var(--border-hairline) solid var(--border-subtle)}
}
@media (max-width:720px){
  :root{--container-pad:var(--container-pad-sm);--section-y:var(--section-y-tight)}
  .hdr .wrap{gap:10px}
  .hdr-logo img{height:32px}
  .hdr-act{gap:8px}
  .rail{grid-template-columns:1fr}
  .svc-grid,.svc-grid.six,.ind-cols{grid-template-columns:1fr}
  .gcard-top{flex-wrap:wrap}
  .gtab{flex:1 0 33.333%}
  .gmeta{grid-template-columns:1fr;gap:16px}
  .gcard-body{padding:24px 22px 26px}
  .ftr-top{grid-template-columns:1fr}
  form.quote .fgrid{grid-template-columns:1fr}
  /* part number op een eigen regel, aantal en verwijderen eronder */
  .part-row{display:flex;flex-wrap:wrap;gap:8px}
  .part-row>*:first-child{flex:1 1 100%}
  .part-row>*:nth-child(2){flex:1 1 auto}
  .part-del{flex:0 0 40px}
  .modal-panel{margin:16px auto;max-height:calc(100vh - 32px)}
  .form-foot{flex-direction:column;align-items:stretch}
  .form-foot .btn{width:100%}
  .hero{min-height:auto}
}

/* ============================================================================
   SUBPAGINA'S — dezelfde taal, kortere hero, en de blokken die de homepage
   niet gebruikt. Alles geport uit de concepten, alleen op de tokens gemapt.
   ========================================================================== */

/* ---- paginakop: dezelfde behandeling als de hero, maar korter ---- */

.phero{position:relative;padding:calc(var(--header-height) + 74px) 0 62px;
  background:var(--tg-midnight-sky);overflow:hidden;color:#fff}
.phero-bg{position:absolute;inset:0;z-index:0}
.phero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 52%;
  filter:grayscale(.58) contrast(1.08) brightness(.58);
  transform-origin:62% 48%;animation:heroPan 40s var(--ease-out-soft) infinite alternate}
.phero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(178deg,rgba(4,3,72,.62) 0%,rgba(4,3,72,.58) 40%,rgba(4,3,72,.86) 80%,rgba(4,3,72,.93) 100%),
             radial-gradient(60% 80% at 4% 50%,rgba(4,3,72,.92) 0%,rgba(4,3,72,.36) 58%,transparent 84%)}
.phero .wrap{position:relative;z-index:2}
.phero h1{font-size:clamp(31px,3.9vw,54px);font-weight:var(--weight-black);line-height:1.05;
  letter-spacing:-.028em;max-width:19ch;margin:0}
.phero .sub{margin:20px 0 0;font-size:var(--text-lede);line-height:1.58;color:#D5D9EE;
  max-width:56ch;text-wrap:pretty}
.phero .acts{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
/* de kop staat op een donkere grond, dus hetzelfde amber-accent als de homepagehero */
.phero h1 .hl,.phero .hl{color:var(--amber-400)}

/* kruimelpad */
.crumbs{display:flex;align-items:center;gap:10px;margin:0 0 22px;
  font-size:var(--text-micro);font-weight:var(--weight-bold);letter-spacing:.14em;
  text-transform:uppercase;color:var(--text-on-inverse-soft)}
.crumbs a{color:var(--text-on-inverse-soft);text-decoration:none}
.crumbs a:hover{color:#fff}
.crumbs svg{width:13px;height:13px;opacity:.6}
.crumbs .here{color:var(--amber-400)}

/* strook toepassingen onderin de kop */
.applies{margin-top:44px;padding-top:22px;border-top:1px solid var(--border-inverse);
  display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.applies .lbl{font-size:var(--text-micro);font-weight:var(--weight-black);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-on-inverse-soft);margin-right:6px}
.applies span.a{display:inline-flex;align-items:center;padding:7px 14px;border-radius:var(--radius-pill);
  border:1px solid var(--border-inverse);background:rgba(255,255,255,.04);
  font-size:var(--text-caption);color:#fff;white-space:nowrap}

/* ---- intro: tekst links, beeld dat rechts de pagina uit loopt (Concept 3) ---- */

.bleed{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:56px;align-items:center}
.bleed-txt h2{margin:0;font-size:clamp(26px,3.1vw,40px);line-height:1.08;letter-spacing:-.024em;
  color:var(--text-strong);max-width:20ch}
.bleed-txt p{margin:20px 0 0;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);max-width:46ch;text-wrap:pretty}
/* de negatieve marge moet de afstand van de containerrand tot de vensterrand
   overbruggen. `50% - 50vw` rekent hier tegen de rasterkolom en schoot 280px
   door, met een horizontale schuifbalk tot gevolg; dit rekent tegen de
   container. De sectie klemt af, zodat afronding op de schuifbalk niets doet. */
.bleedsec{overflow-x:clip}
.bleed-img{position:relative;
  margin-right:calc(-1 * ((100vw - min(var(--container-max),100vw)) / 2 + var(--container-pad)));
  border-radius:var(--radius-2xl) 0 0 var(--radius-2xl);overflow:hidden;
  aspect-ratio:16/10;background:var(--tg-midnight-sky)}
.bleed-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.7) contrast(1.05) brightness(.8)}
.bleed-img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,3,72,.66) 0%,rgba(4,3,72,.12) 58%,transparent 100%)}
.bleed-cap{position:absolute;left:30px;bottom:28px;z-index:2;display:flex;align-items:center;gap:12px}
.bleed-cap .pip{width:9px;height:9px;border-radius:50%;background:var(--amber-500);
  box-shadow:0 0 0 4px rgba(255,155,0,.2)}
.bleed-cap span{font-size:var(--text-micro);font-weight:var(--weight-bold);letter-spacing:.1em;
  text-transform:uppercase;color:#fff}

/* twee korte tekstkolommen onder een kop — regulatory / lead times */
.duo{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:52px;margin-top:40px}
.duo h3{margin:0 0 12px;font-size:var(--text-heading-4)}
.duo p{font-size:var(--text-body);line-height:var(--leading-body);color:var(--text-on-inverse-soft);max-width:48ch}
.duo p+p{margin-top:12px}
.duo .col{padding-top:22px;border-top:2px solid var(--tg-ambition-orange)}
.duo .col+.col{border-top-color:var(--border-inverse)}

/* ---- typische componenten: het geloofwaardigheidsblok ---- */

.parts-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin-top:38px}
.part{display:flex;align-items:center;gap:11px;padding:16px 16px;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-strong);
  transition:border-color var(--dur-base),transform var(--dur-base) var(--ease-out-soft)}
.part:hover{border-color:var(--tg-ambition-orange);transform:translateY(-2px)}
.part .pip{width:7px;height:7px;flex:0 0 auto;border-radius:2px;transform:rotate(45deg);
  background:var(--blue-400);transition:background var(--dur-base)}
.part:hover .pip{background:var(--tg-ambition-orange)}

/* ---- editorial index (Concept 2): nummer, titel die groeit, omschrijving ---- */

.eindex{margin-top:40px}
.erow{display:grid;grid-template-columns:82px minmax(0,1fr);gap:24px;align-items:baseline;
  border-bottom:1px solid var(--border-subtle);padding:26px 0;
  transition:padding var(--dur-base) var(--ease-out-soft),background var(--dur-base)}
.erow:hover{padding:30px 0 32px;padding-left:18px;background:color-mix(in srgb,var(--tg-network-blue) 8%,transparent)}
.erow .n{font-size:var(--text-micro);font-weight:var(--weight-black);letter-spacing:.2em;
  color:var(--text-muted);transition:color var(--dur-base)}
.erow:hover .n{color:var(--tg-ambition-orange)}
.erow h3{margin:0;font-size:clamp(22px,2.4vw,30px);font-weight:var(--weight-black);
  letter-spacing:-.02em;line-height:1.06;color:var(--text-strong);
  transition:font-size var(--dur-base) var(--ease-out-soft)}
.erow:hover h3{font-size:clamp(26px,3vw,38px)}
.erow p{margin:10px 0 0;font-size:var(--text-body);color:var(--text-body-color);
  max-width:56ch;opacity:.72;transition:opacity var(--dur-base)}
.erow:hover p{opacity:1}

/* dezelfde rij op een donker vlak — daar staat hij op 23 van de 24 plekken */
.dark .erow{border-bottom-color:var(--border-inverse)}
.dark .erow:hover{background:color-mix(in srgb,var(--tg-network-blue) 20%,transparent)}
.dark .erow .n{color:var(--text-on-inverse-soft)}
.dark .erow:hover .n{color:var(--amber-400)}
.dark .erow h3{color:#fff}
.dark .erow p{color:var(--text-on-inverse-soft);opacity:.62}
.dark .erow:hover p{opacity:1}
/* de pijl rechts is op 22-08 geschrapt: hij suggereerde een doorklik die er niet is */
.erow .go{display:none}

/* ---- uitdagingen: kaarten met de icoontegel uit Concept 4 ---- */

.ch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:40px}
.ch{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:24px 24px 22px;
  transition:transform var(--dur-base) var(--ease-out-soft),box-shadow var(--dur-base),border-color var(--dur-base)}
.ch:hover{transform:translateY(var(--lift-card));box-shadow:0 24px 52px rgba(4,3,72,.14);
  border-color:var(--tg-midnight-sky)}
.ch .ic{width:44px;height:44px;border-radius:var(--radius-md);display:flex;align-items:center;
  justify-content:center;background:var(--blue-100);color:var(--text-accent);
  transition:background var(--dur-slow),color var(--dur-slow),transform var(--dur-slow) var(--ease-out-soft)}
.ch .ic svg{width:23px;height:23px}
.ch:hover .ic{background:var(--tg-ambition-orange);color:#fff;transform:rotate(-6deg) scale(1.06)}
.ch h3{margin:18px 0 0;font-size:var(--text-title);font-weight:var(--weight-black);
  letter-spacing:-.01em;color:var(--text-strong)}
.ch p{margin:9px 0 0;font-size:var(--text-body-sm);line-height:1.55;color:var(--text-body-color)}
/* dezelfde kaart, maar dan als doorklik — gebruikt op de quality-pagina */
a.ch{display:block;text-decoration:none}
a.ch::after{content:"";display:block;width:19px;height:2px;background:var(--tg-ambition-orange);
  margin-top:16px;transition:width var(--dur-base) var(--ease-out-soft)}
a.ch:hover::after{width:38px}

/* ---- verwante industrieën: dezelfde kaart, drie naast elkaar ---- */

.rel-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:38px}

@media (max-width:1080px){
  .bleed{grid-template-columns:1fr;gap:38px}
  .bleed-img{margin-right:0;border-radius:var(--radius-2xl)}
  .duo{grid-template-columns:1fr;gap:32px}
  .parts-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .ch-grid,.rel-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:720px){
  .phero{padding:calc(var(--header-height) + 48px) 0 46px}
  .parts-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-grid,.rel-grid{grid-template-columns:1fr}
  .erow{grid-template-columns:56px minmax(0,1fr);gap:16px}
  .erow .go{display:none}
  .erow:hover{padding:26px 0;padding-left:0;background:transparent}
  .erow:hover h3{font-size:clamp(22px,2.4vw,30px)}
  .applies{margin-top:32px}
  .applies .lbl{flex:1 0 100%;margin:0 0 2px}
}

/* ---- verspringende rijen (Concept 3) ------------------------------------
   Beeld en tekst wisselen per rij van kant. Het beeld draagt een groot,
   halfdoorzichtig rijnummer; de tekst titel, omschrijving en sub-tagline
   in amber. Hairline tussen de rijen, geen kaartranden.                  */

.rows{display:grid}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  border-top:1px solid var(--border-inverse);align-items:stretch}
.row2:last-child{border-bottom:1px solid var(--border-inverse)}
.row2 .fig{order:1;position:relative;min-height:300px;overflow:hidden;
  background:var(--surface-inverse-panel)}
.row2 .txt{order:2;padding:46px clamp(28px,4vw,64px);display:flex;
  flex-direction:column;justify-content:center}
.row2.flip .fig{order:2}
.row2.flip .txt{order:1}

.row2 .fig img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:grayscale(.85) contrast(1.04) brightness(.78);
  transition:filter var(--dur-slow),transform .8s var(--ease-out-soft)}
.row2:hover .fig img{filter:grayscale(.3) contrast(1.02) brightness(.9);transform:scale(1.03)}
.row2 .fig::after{content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(4,3,72,.72) 0%,rgba(4,3,72,.18) 70%)}
.row2.flip .fig::after{background:linear-gradient(260deg,rgba(4,3,72,.72) 0%,rgba(4,3,72,.18) 70%)}
.row2 .fig .n{position:absolute;top:26px;left:30px;z-index:2;font-size:64px;
  font-weight:var(--weight-black);letter-spacing:-.03em;line-height:1;color:rgba(255,255,255,.16)}
.row2.flip .fig .n{left:auto;right:30px}

.row2 h3{margin:0;font-size:clamp(24px,2.6vw,34px);font-weight:var(--weight-black);
  letter-spacing:-.02em;line-height:1.1;color:#fff}
.row2 .txt>p{margin:14px 0 0;font-size:var(--text-body);line-height:1.6;
  color:var(--text-on-inverse-soft);max-width:46ch}
.row2 .tagline{margin:18px 0 0;font-size:var(--text-micro);font-weight:var(--weight-bold);
  letter-spacing:.14em;text-transform:uppercase;color:var(--amber-400)}
.row2 .more{margin-top:22px}

@media (max-width:860px){
  .row2,.row2.flip{grid-template-columns:1fr}
  .row2 .fig,.row2.flip .fig{order:1;min-height:230px}
  .row2 .txt,.row2.flip .txt{order:2;padding:32px var(--container-pad) 40px}
  .row2 .fig .n{font-size:48px;top:18px;left:22px}
  .row2.flip .fig .n{left:22px;right:auto}
}

/* ---- proceslijn: de bus met knopen (Concept 4, "the spine") -------------
   Geometrie 1-op-1 uit het concept: bus op 33px, knoop gecentreerd op de bus,
   aftakking naar de tekstkolom die op 96px begint. De knoop en zijn aftakking
   kleuren oranje zodra hij de leeslijn passeert; viz.js zet de vullijn.     */

.pgrid{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);gap:56px;align-items:start}
.pgrid-head{position:sticky;top:calc(var(--header-height) + 40px)}

.spine{position:relative;padding-left:96px}
.spine-bus{position:absolute;left:33px;top:0;bottom:0;width:2px;background:var(--border-subtle)}
.spine-bus i{position:absolute;left:0;top:0;width:2px;height:0;background:var(--gradient-brand)}

.station{position:relative;padding-bottom:44px}
.station:last-of-type{padding-bottom:0}
.station .sn{position:absolute;left:-79px;top:-4px;width:34px;height:34px;border-radius:50%;
  border:2.5px solid var(--border-default);background:var(--surface-page);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--text-caption);font-weight:var(--weight-black);color:var(--text-muted);
  transition:background .5s var(--ease-out-soft),border-color .5s var(--ease-out-soft),color .5s}
.station .br{position:absolute;left:-45px;top:12px;width:45px;height:2px;background:var(--border-subtle);
  transition:background .5s var(--ease-out-soft)}
.station.lit .sn{background:var(--tg-ambition-orange);border-color:var(--tg-ambition-orange);color:#fff}
.station.lit .br{background:var(--tg-ambition-orange)}
.station h3{margin:0;font-size:var(--text-heading-4);font-weight:var(--weight-black);
  letter-spacing:-.015em;line-height:1.3;color:var(--text-strong)}
.station p{margin:9px 0 0;font-size:var(--text-body-sm);line-height:1.6;
  color:var(--text-body-color);max-width:52ch}

@media (max-width:860px){
  .pgrid{grid-template-columns:1fr;gap:34px}
  .pgrid-head{position:static}
  .spine{padding-left:62px}
  .spine-bus{left:15px}
  .station .sn{left:-61px;width:30px;height:30px;top:-3px}
  .station .br{left:-31px;width:31px;top:11px}
}

/* ---- contact: formulier op de pagina + gegevenspaneel ------------------- */

.cgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:44px;align-items:start}

/* dezelfde velden als in de modals, maar in een kaart op de pagina */
.pform{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-1);padding:32px;display:grid;gap:16px}
.pform h2{margin:0 0 4px;font-size:var(--text-heading-3);font-weight:var(--weight-black);
  letter-spacing:-.02em;color:var(--text-strong)}
.pform .intro{margin:0;font-size:var(--text-body-sm);line-height:1.6;color:var(--text-body-color)}
.pform .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.pform .fgrid>*{min-width:0}
.opt{display:flex;align-items:flex-start;gap:11px;font-size:var(--text-body-sm);
  color:var(--text-body-color);cursor:pointer}
.opt input{width:18px;height:18px;flex:0 0 auto;margin-top:1px;accent-color:var(--tg-ambition-orange)}

/* gegevens naast het formulier: adres, routes, tijden */
.cinfo{background:var(--surface-page-alt);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);padding:30px}
.cinfo h3{margin:0;font-size:var(--text-title);font-weight:var(--weight-black);
  letter-spacing:-.015em;color:var(--text-strong)}
.cline{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid var(--border-subtle)}
.cline:last-child{border-bottom:0;padding-bottom:0}
.cline .ic{flex:0 0 auto;width:34px;height:34px;border-radius:var(--radius-sm);
  background:var(--surface-warm-soft);color:var(--text-accent-warm);
  display:flex;align-items:center;justify-content:center}
.cline .ic svg{width:18px;height:18px}
.cline .lbl{display:block;font-size:var(--text-eyebrow);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-muted);margin-bottom:5px}
.cline p{margin:0;font-size:var(--text-body-sm);line-height:1.55;color:var(--text-strong)}
.cline a{color:var(--text-link);text-decoration:none;font-weight:var(--weight-semibold)}
.cline a:hover{color:var(--text-link-hover)}
.cline .note{color:var(--text-muted);font-size:var(--text-caption);margin-top:3px}

/* ---- CheckRow uit het design system, 1-op-1 ---------------------------- */

.crow{display:flex;align-items:center;gap:16px;padding:17px 6px;
  border-bottom:var(--border-hairline) solid var(--border-inverse);
  font-size:var(--text-body);font-weight:var(--weight-semibold);color:#fff;
  transition:padding-left .22s var(--ease-out-soft)}
.crow:hover{padding-left:16px}
.crow>svg{flex:0 0 auto;width:19px;height:19px;color:var(--text-accent-warm-on-dark)}
.crow em{font-style:normal;margin-left:auto;font-size:var(--text-micro);font-weight:var(--weight-bold);
  letter-spacing:.16em;text-transform:uppercase;color:var(--text-on-inverse-soft);white-space:nowrap}
.crows{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 44px;margin-top:38px}

/* ---- vestigingen: één actieve, twee die eraan komen -------------------- */

.loc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:40px}
.loc{background:var(--surface-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);
  padding:28px;display:flex;flex-direction:column;gap:12px}
.loc .reg{font-size:var(--text-eyebrow);font-weight:var(--weight-black);letter-spacing:var(--tracking-eyebrow);
  text-transform:uppercase;color:var(--text-muted)}
.loc h3{margin:0;font-size:var(--text-heading-4);font-weight:var(--weight-black);
  letter-spacing:-.015em;color:var(--text-strong)}
.loc p{margin:0;font-size:var(--text-body-sm);line-height:1.6;color:var(--text-body-color)}
.loc.live{border-color:var(--tg-ambition-orange);box-shadow:var(--shadow-1)}
.loc .badge{align-self:flex-start;margin-top:auto;padding:6px 12px;border-radius:var(--radius-pill);
  font-size:var(--text-micro);font-weight:var(--weight-black);letter-spacing:.14em;text-transform:uppercase}
.loc.live .badge{background:var(--surface-warm-soft);color:var(--text-accent-warm)}
.loc.soon .badge{background:var(--surface-page-alt);color:var(--text-muted)}
/* Tweede rij kaarten: de drie 3PL-adressen (03-09). Bewust niet `.live` — die
   oranje rand is het hoofdkantoor en mag niet twee dingen betekenen — en ook niet
   `.soon`, want deze locaties bestaan wél. Een eigen rand in hetzelfde koele blauw
   als het vierkantje in de legenda van de bol, zodat kaart en marker één taal
   spreken. */
.loc-sub{margin:0;font-size:var(--text-heading-3);font-weight:var(--weight-black);
  letter-spacing:-.015em;color:var(--text-strong)}
.loc-note{margin:12px 0 0;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);text-wrap:pretty}
.loc.part{border-color:var(--blue-300)}
/* De kaart centreert zijn inhoud (eyebrow en stad). Het adresblok moet daar niet
   in mee: als de breedste regel korter wordt, schuift anders het hele blok naar het
   midden en lijkt het adres ingesprongen (07-09). Volle breedte, tekst links. */
.loc.part p{align-self:stretch;text-align:left}
.loc.part .badge{background:var(--blue-100);color:var(--text-accent)}

@media (max-width:980px){
  .cgrid{grid-template-columns:1fr;gap:28px}
  /* twee inline rasters stonden vast op twee kolommen en werden op mobiel
     twee stroken van ~150px (bevinding doorloop 21-08) */
  .wrap.rv[style*="minmax(0,1fr) minmax(0,1fr)"],
  .wrap[style*="minmax(0,1.1fr) minmax(0,.9fr)"]{grid-template-columns:1fr !important;gap:26px !important}
  .crows{grid-template-columns:1fr;gap:0;margin-top:30px}
  .loc-grid{grid-template-columns:1fr}
}
@media (max-width:720px){
  .pform{padding:24px 20px}
  .pform .fgrid{grid-template-columns:1fr}
  .cinfo{padding:24px 20px}
}

/* ---- accordeon: FAQ en de vragen onderaan het portaal ------------------ */
/* Native <details>, zodat het zonder JavaScript werkt en de tekst vindbaar
   blijft. De pijl draait; de rij krijgt links een oranje randje als hij openstaat. */

.acc{margin-top:40px;border-top:1px solid var(--border-subtle)}
.acc details{border-bottom:1px solid var(--border-subtle);border-left:2px solid transparent;
  transition:border-color var(--dur-base),background var(--dur-base)}
.acc details[open]{border-left-color:var(--tg-ambition-orange);background:var(--surface-card)}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:20px;
  padding:22px 22px 22px 24px;font-size:var(--text-title);font-weight:var(--weight-bold);
  letter-spacing:-.01em;color:var(--text-strong)}
.acc summary::-webkit-details-marker{display:none}
.acc summary:hover{color:var(--text-accent)}
.acc summary .sign{margin-left:auto;flex:0 0 auto;width:32px;height:32px;border-radius:50%;
  border:1px solid var(--border-default);display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);transition:transform var(--dur-base) var(--ease-out-soft),
  border-color var(--dur-base),color var(--dur-base)}
.acc summary .sign svg{width:16px;height:16px}
.acc details[open] summary .sign{transform:rotate(180deg);border-color:var(--tg-ambition-orange);
  color:var(--text-accent-warm)}
.acc .a{padding:0 60px 26px 24px}
.acc .a p{margin:0 0 12px;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);max-width:var(--measure-body)}
.acc .a p:last-child{margin-bottom:0}

/* ---- leiderschap: kaarten zonder personen ------------------------------ */
/* Namen, foto's en bio's zijn nog niet aangeleverd. Deze kaarten laten de
   plek zien zonder iemand te verzinnen; ze zijn bewust zichtbaar leeg. */

.people-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--card-gap);margin-top:40px}
.person{background:var(--surface-card);border:1px dashed var(--border-default);
  border-radius:var(--radius-lg);padding:26px;display:flex;flex-direction:column;gap:16px}
.person .frame{aspect-ratio:4/5;border-radius:var(--radius-md);background:var(--surface-page-alt);
  display:flex;align-items:center;justify-content:center;color:var(--neutral-400)}
.person .frame svg{width:38px;height:38px}
.person h3{margin:0;font-size:var(--text-title);font-weight:var(--weight-black);color:var(--text-muted)}
.person p{margin:0;font-size:var(--text-body-sm);line-height:1.55;color:var(--text-muted)}
.person .await{align-self:flex-start;padding:5px 11px;border-radius:var(--radius-pill);
  background:var(--surface-page-alt);color:var(--text-muted);
  font-size:var(--text-micro);font-weight:var(--weight-black);letter-spacing:.14em;text-transform:uppercase}

/* ---- hoofdpagina van een hoofdstuk: twee kolommen tekst ---------------- */

.hub-intro{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:52px;align-items:start}
.hub-intro h2{margin:0;font-size:clamp(26px,3.1vw,40px);line-height:1.08;letter-spacing:-.024em;
  color:var(--text-strong);max-width:18ch}
.hub-intro p{margin:0 0 18px;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);max-width:var(--measure-body)}
.hub-intro p:last-child{margin-bottom:0}

@media (max-width:980px){
  .people-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hub-intro{grid-template-columns:1fr;gap:26px}
}
@media (max-width:720px){
  .people-grid{grid-template-columns:1fr}
  .acc summary{padding:18px 16px 18px 18px;gap:14px;font-size:var(--text-body)}
  .acc .a{padding:0 18px 22px 18px}
}

/* ---- globe: legenda en het labelvlaggetje bij de testlaboratoria ---------
   De markers van White Horse Laboratories zijn bewust anders van vorm en kleur
   dan de Tradius-markers, met een legenda eronder: het zijn laboratoria van
   onze testpartner, geen Tradius-vestigingen. (Verzoek 20-08.)             */

.glab{position:absolute;z-index:5;pointer-events:none;transform:translate(-50%,calc(-100% - 16px));
  min-width:210px;max-width:270px;padding:12px 14px;border-radius:var(--radius-md);
  background:var(--surface-inverse-raised,#0A1030);border:1px solid var(--border-inverse);
  box-shadow:0 18px 40px rgba(2,1,46,.5);opacity:0;transition:opacity var(--dur-base)}
.glab.on{opacity:1}
.glab b{display:block;font-size:var(--text-label);font-weight:var(--weight-black);color:#fff}
/* **Naamsbotsing, en die zat er al.** `.loc` op regel 909 is de locatiekaart op
   /contact: witte kaart, rand, 28px padding. De ballon van de globe gebruikt
   dezelfde klassenaam voor één regel plaatsnaam, en omdat `.glab .loc` alleen
   typografie zette, erfde die regel de kaartopmaak — vandaar het witte blok om
   "ROTTERDAM · THE NETHERLANDS". Dat gold al voor het hoofdkantoor en de
   laboratoria; het viel nu pas op. Hier expliciet terugzetten. */
.glab .loc{display:block;margin-top:3px;font-size:var(--text-micro);font-weight:var(--weight-bold);
  letter-spacing:.12em;text-transform:uppercase;color:var(--amber-400);
  background:none;border:0;border-radius:0;padding:0}
.glab .txt{display:block;margin-top:8px;font-size:var(--text-caption);line-height:1.45;
  color:var(--text-on-inverse-soft)}
/* Het volledige adres van een logistieke partner: helderder dan de toelichting
   eronder, want dit is het adres waar zendingen op naam van Tradius aankomen. */
.glab .addr{display:block;margin-top:7px;font-size:var(--text-caption);line-height:1.45;
  color:var(--text-on-inverse)}
/* Scheiding tussen twee locaties in één ballon: Rotterdam ligt op de bol te dicht
   bij Hoofddorp voor een eigen stip, dus staan ze samen in de ballon van het
   hoofdkantoor. De streep zorgt dat het adres van de partner niet leest als dat
   van Tradius. */
.glab .sep{display:block;margin:12px 0;height:1px;background:var(--border-inverse)}

.gkey{list-style:none;margin:6px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;
  justify-content:center;font-size:var(--text-caption);color:var(--text-on-inverse-soft)}
.gkey li{display:flex;align-items:center;gap:9px}
.gkey .k{width:11px;height:11px;flex:0 0 auto}
.gkey .k.reg{border-radius:50%;border:2px solid var(--tg-ambition-orange);
  background:var(--tg-ambition-orange);box-shadow:0 0 0 3px rgba(254,108,6,.22)}
.gkey .k.hq{background:var(--tg-ambition-orange);transform:rotate(45deg)}
.gkey .k.lab{border-radius:50%;border:1.6px solid #92BEF7;background:transparent}
/* Derde merkteken: vierkant, koeler dan het laboratoriumringetje en zonder het
   oranje van Tradius zelf — het zijn partnerlocaties, geen vestigingen. */
.gkey .k.log{border:1.6px solid #C5D1E8;background:transparent}

/* ---- nieuwsbrief: voordelen links, twee velden rechts -------------------
   Idee van Tradius (20-08, verwijzing naar nimani.com). De voordelenlijst is
   de CheckRow uit het design system; de velden zijn dezelfde `.field` als in
   de modals, zodat er geen nieuw formuliervocabulaire bijkomt.             */

.news{background:var(--surface-page-alt);border-top:1px solid var(--border-subtle)}
.news-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:56px;align-items:center}
.news h2{margin:0;font-size:clamp(24px,2.7vw,36px);font-weight:var(--weight-black);
  letter-spacing:-.024em;line-height:1.1;color:var(--text-strong);max-width:18ch}
.news .crow{color:var(--text-strong);border-bottom-color:var(--border-subtle)}
.news .crow>svg{color:var(--text-accent-warm)}
.news .crows{grid-template-columns:1fr;margin-top:26px}
.news-form{background:var(--surface-card);border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl);box-shadow:var(--shadow-1);padding:28px;display:grid;gap:14px}
.news-form .fgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.news-form .fgrid>*{min-width:0}
.news-form .foot{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.news-form .note{font-size:var(--text-caption);color:var(--text-muted);max-width:34ch}

@media (max-width:980px){
  .news-grid{grid-template-columns:1fr;gap:32px}
}
@media (max-width:720px){
  .news-form{padding:22px 20px}
  .news-form .fgrid{grid-template-columns:1fr}
}

/* label boven de nieuwsbriefkop — zonder dit las het blok niet als nieuwsbrief */
.news-lbl{margin:0 0 12px;font-size:var(--text-eyebrow);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent-warm)}

/* een tegel die doorlinkt — gebruikt in de marktenlijst op de industriepagina */
a.part{text-decoration:none}
a.part:hover{border-color:var(--tg-ambition-orange);color:var(--text-accent-warm)}

/* opsommingen binnen een accordeon-antwoord (vacatureteksten) */
.acc .a .joblist{margin:6px 0 14px;padding-left:20px;display:grid;gap:7px;
  max-width:var(--measure-body)}
.acc .a .joblist li{font-size:var(--text-body-sm);line-height:1.55;color:var(--text-body-color)}
.acc .a p b{color:var(--text-strong)}

/* ---- profiel: één persoon uitgelicht, met kerncijfers ------------------- */

.bio{display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);gap:52px;align-items:start;margin-top:44px}
/* Zolang er geen portretten zijn draagt de kolom een merkvlak met de naam. Het
   houdt exact de verhouding van een portret aan, dus zodra de foto's er zijn kan
   hier een <img> in zonder dat de rest van de pagina verandert. */
.bio-frame{position:relative;aspect-ratio:4/5;border-radius:var(--radius-xl);overflow:hidden;
  background:var(--tg-midnight-sky);display:flex;align-items:stretch}
.bio-frame>img.portrait{width:100%;height:100%;object-fit:cover}
.bio-plate{position:relative;z-index:2;display:flex;flex-direction:column;
  justify-content:flex-end;gap:14px;width:100%;padding:30px 30px 28px}
.bio-plate .nm{font-size:clamp(26px,3vw,44px);font-weight:var(--weight-black);
  line-height:1.05;letter-spacing:-.03em;color:var(--tg-dutch-born);white-space:nowrap}
.bio-plate .fn{font-size:var(--text-micro);font-weight:var(--weight-black);letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-on-inverse-soft)}
.bio-frame .wm{position:absolute;right:-46px;bottom:-40px;width:230px;opacity:.16;
  z-index:1;pointer-events:none}
.bio h3{margin:0;font-size:var(--text-heading-3);font-weight:var(--weight-black);
  letter-spacing:-.02em;color:var(--text-strong)}
.bio .role{margin:6px 0 0;font-size:var(--text-eyebrow);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:var(--text-accent-warm)}
.bio p{margin:16px 0 0;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);max-width:var(--measure-body)}
.bio-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px;
  padding:22px 0;border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle)}
.bio-facts b{display:block;font-size:var(--text-heading-4);font-weight:var(--weight-black);
  letter-spacing:-.02em;color:var(--text-strong)}
.bio-facts span{display:block;margin-top:4px;font-size:var(--text-caption);color:var(--text-muted)}
/* Doorklikken naar het profiel van de persoon zelf. Bewust boven de facts en
   niet onder de bio: wie een naam natrekt voor hij een RFQ stuurt, doet dat
   bovenaan de kaart en leest de drie alinea's niet eerst uit. */
/* Naam en functie links, het profiel rechts op dezelfde hoogte. De rij loopt
   over de volle kolombreedte, zodat de link precies uitlijnt met de rechterkant
   van de facts-balk eronder en niet ergens halverwege eindigt. */
.bio-hd{display:flex;align-items:center;justify-content:space-between;gap:28px}
.bio-li{display:inline-flex;align-items:center;gap:8px;flex:0 0 auto;
  font-size:var(--text-body-sm);font-weight:var(--weight-medium);color:var(--text-accent);
  text-decoration:none;transition:color var(--dur-base)}
.bio-li svg{width:16px;height:16px;flex:0 0 auto}
.bio-li:hover{color:var(--text-accent-warm);text-decoration:underline;text-underline-offset:3px}
/* Onder 720px is de kolom te smal om naam en link naast elkaar te zetten zonder
   dat er iets afbreekt; dan weer onder elkaar. */
@media (max-width:720px){
  .bio-hd{display:block}
  .bio-li{margin-top:14px}
}

@media (max-width:860px){
  .bio{grid-template-columns:1fr;gap:28px}
  .bio-frame{max-width:280px;aspect-ratio:1/1}
  .bio-facts{grid-template-columns:1fr;gap:14px}
}

/* ---- het beeldmerk als grafisch element ---------------------------------
   Tradius vroeg om meer te spelen met het beeldmerk (21-08). Drie plekken,
   drie behandelingen: als groot watermerk in de paginakop, als glazen tegel
   op een donkere band, en groter boven de afsluiter.                       */

.phero::before{content:"";position:absolute;z-index:1;right:-6%;bottom:-30%;
  width:min(46vw,520px);aspect-ratio:1/1;pointer-events:none;
  background:url("logo/mark-white-tight.svg") right bottom / contain no-repeat;
  opacity:.11;transform:rotate(-8deg)}

.stmt::before{content:"";position:absolute;z-index:2;left:-4%;top:-18%;
  width:min(34vw,380px);aspect-ratio:1/1;pointer-events:none;
  background:url("logo/mark-white-tight.svg") left top / contain no-repeat;
  opacity:.09}

/* glazen tegel met het beeldmerk, voor donkere banden */
.glass-mark{position:absolute;right:clamp(20px,5vw,64px);top:50%;transform:translateY(-50%);
  width:clamp(96px,11vw,152px);aspect-ratio:1/1;border-radius:var(--radius-2xl);
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 22px 50px rgba(2,1,46,.4)}
.glass-mark img{width:56%;height:auto;display:block;opacity:.92}
@media (max-width:980px){.glass-mark{display:none}}

.closing img.mark{height:clamp(56px,7vw,84px);filter:drop-shadow(0 14px 34px rgba(254,108,6,.28))}

/* Een raster van drie kolommen laat bij vier of vijf kaarten een halve rij leeg.
   Deze varianten verdelen ze gelijk: vier in twee rijen van twee, vijf als
   3 + 2 waarbij de onderste twee breder worden. (UX-doorloop 21-08.)        */
.ch-grid.of-4{grid-template-columns:repeat(2,minmax(0,1fr))}
.ch-grid.of-5{grid-template-columns:repeat(6,minmax(0,1fr))}
.ch-grid.of-5>*{grid-column:span 2}
.ch-grid.of-5>*:nth-child(4),.ch-grid.of-5>*:nth-child(5){grid-column:span 3}
@media (max-width:1080px){
  .ch-grid.of-5,.ch-grid.of-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ch-grid.of-5>*,.ch-grid.of-5>*:nth-child(4),.ch-grid.of-5>*:nth-child(5){grid-column:auto}
}
@media (max-width:720px){
  .ch-grid.of-5,.ch-grid.of-4{grid-template-columns:1fr}
}

/* ---- mobiel menu ---------------------------------------------------------
   Onder 960px verdween de navigatie en deed het hamburgerknopje niets. Nu
   schuift er een paneel onder de balk uit met dezelfde items plus de acties. */

.mnav{position:fixed;left:0;right:0;top:var(--header-height);z-index:89;
  background:var(--tg-midnight-sky);border-bottom:1px solid var(--border-inverse);
  box-shadow:0 24px 50px rgba(2,1,46,.5);
  display:none;max-height:calc(100vh - var(--header-height));overflow-y:auto}
.mnav.open{display:block}
.mnav ul{list-style:none;margin:0;padding:8px 0}
.mnav a{display:block;padding:15px var(--container-pad);color:rgba(255,255,255,.88);
  text-decoration:none;font-size:var(--text-body);font-weight:var(--weight-semibold);
  border-bottom:1px solid var(--border-inverse)}
.mnav a:hover,.mnav a:focus{background:rgba(255,255,255,.06);color:#fff}
.mnav a[aria-current]{color:var(--amber-400);box-shadow:inset 3px 0 0 var(--tg-ambition-orange)}
.mnav .acts{display:grid;gap:10px;padding:18px var(--container-pad) 22px}
.mnav .acts .btn{width:100%}
@media (min-width:961px){.mnav{display:none !important}}
.burger[aria-expanded="true"]{color:var(--amber-400)}

/* juridische regels zijn nog niet geschreven; ze staan er als aankondiging in
   plaats van als link die nergens heen gaat */
.ftr-btm .soon{color:var(--neutral-600);cursor:default}
.ftr-btm .soon::after{content:" (soon)";font-size:var(--text-micro);opacity:.7}

/* Zes of zeven componenttegels in vijf kolommen gaven een rafelige laatste rij.
   Auto-fit vult de rij en houdt de tegels leesbaar breed. */
.parts-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}

/* Drie verwante kaarten werden op 800px 2 + 1; die weeskaart is nu weg. */
@media (min-width:721px) and (max-width:1080px){
  .rel-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rel-grid .ind-in{min-height:250px;padding:20px 18px}
  .rel-grid .ind h3{font-size:var(--text-title)}
  .rel-grid .ind p{font-size:var(--text-caption)}
  .rel-grid .ind .tag{white-space:normal}
}

/* Twee oprichters onder elkaar: de tweede spiegelt, zodat de portretten niet
   in één kolom onder elkaar hangen. */
.bio + .bio{margin-top:60px;padding-top:56px;border-top:1px solid var(--border-subtle)}
.bio.flip{grid-template-columns:minmax(0,1.22fr) minmax(0,.78fr)}
.bio.flip .bio-frame{order:2}
@media (max-width:860px){
  .bio.flip{grid-template-columns:1fr}
  .bio.flip .bio-frame{order:0}
  .bio + .bio{margin-top:44px;padding-top:40px}
}

/* ---- uploadveld in de modal ---------------------------------------------
   Eén of meer bijlagen, met sleepgebied en een lijst van wat er gekozen is.
   Zelfde vormtaal als de andere velden; alleen de gestippelde rand is nieuw. */

.drop{position:relative;border:2px dashed var(--border-default);border-radius:var(--radius-md);
  background:var(--surface-page);padding:26px 20px;text-align:center;cursor:pointer;
  transition:border-color var(--dur-base),background var(--dur-base)}
.drop:hover,.drop.over{border-color:var(--tg-ambition-orange);background:var(--surface-warm-soft)}
.drop input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.drop .ic{width:34px;height:34px;margin:0 auto 10px;color:var(--text-accent);display:block}
.drop b{display:block;font-size:var(--text-body-sm);font-weight:var(--weight-bold);color:var(--text-strong)}
.drop span{display:block;margin-top:5px;font-size:var(--text-caption);color:var(--text-muted)}

.filelist{display:grid;gap:8px;margin-top:12px}
.filelist:empty{display:none}
.filerow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
  background:var(--surface-page-alt);border:1px solid var(--border-subtle)}
.filerow .fi{flex:0 0 auto;width:18px;height:18px;color:var(--text-accent)}
.filerow .nm{flex:1 1 auto;min-width:0;font-size:var(--text-label);color:var(--text-strong);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filerow .sz{flex:0 0 auto;font-size:var(--text-caption);color:var(--text-muted)}
.filerow .rm{flex:0 0 auto;background:none;border:0;cursor:pointer;color:var(--text-muted);
  padding:2px;line-height:0;transition:color var(--dur-base)}
.filerow .rm:hover{color:var(--danger-500)}
.filerow .rm svg{width:16px;height:16px}

/* De chips in de paginakop kunnen ook navigatie zijn — op de kwaliteitspagina
   dragen ze de vijf hoofdstukken sinds het kaartenblok eruit ging. */
.applies a.a{text-decoration:none;transition:background var(--dur-base),border-color var(--dur-base)}
.applies a.a:hover,.applies a.a:focus-visible{background:rgba(255,255,255,.12);
  border-color:var(--tg-ambition-orange);color:#fff}

/* ---- hoofdstukken als tabblad op de pagina zelf -------------------------
   De vijf kwaliteitshoofdstukken stonden op eigen pagina's; sinds 21-08 komen
   ze naar voren op de pagina zelf. Zelfde patroon als de regiokaart bij de
   globe: tabs erboven, één paneel eronder, hover om te bekijken en klik om
   vast te zetten.                                                          */

.ctabs{margin-top:44px;border:1px solid var(--border-subtle);border-radius:var(--radius-xl);
  overflow:hidden;background:var(--surface-card);box-shadow:var(--shadow-1)}
.ctabs-top{display:flex;align-items:stretch;flex-wrap:wrap;border-bottom:1px solid var(--border-subtle);
  background:var(--surface-page-alt)}
.ctab{flex:1 1 0;min-width:150px;background:none;border:0;border-left:1px solid var(--border-subtle);
  padding:18px 16px;cursor:pointer;font-family:var(--font-sans);font-size:var(--text-label);
  font-weight:var(--weight-bold);color:var(--text-muted);text-align:left;line-height:1.3;
  transition:background var(--dur-base),color var(--dur-base)}
.ctab:first-child{border-left:0}
.ctab:hover{color:var(--text-strong);background:var(--surface-card)}
.ctab[aria-selected=true]{background:var(--tg-ambition-orange);color:#fff}
.ctab .n{display:block;font-size:var(--text-micro);font-weight:var(--weight-black);
  letter-spacing:.16em;opacity:.72;margin-bottom:5px}

.ctabs-body{padding:34px clamp(22px,3vw,38px) 36px}
.ctabs-body h3{margin:0;font-size:var(--text-heading-3);font-weight:var(--weight-black);
  letter-spacing:-.02em;color:var(--text-strong)}
.ctabs-body>p{margin:12px 0 0;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color);max-width:var(--measure-body)}
.ctabs-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 34px;margin-top:26px;
  padding-top:22px;border-top:1px solid var(--border-subtle)}
.ctabs-list div{padding:13px 0;border-bottom:1px solid var(--border-subtle)}
.ctabs-list b{display:block;font-size:var(--text-body-sm);font-weight:var(--weight-black);
  color:var(--text-strong)}
.ctabs-list span{display:block;margin-top:3px;font-size:var(--text-caption);line-height:1.5;
  color:var(--text-muted)}

@media (max-width:860px){
  .ctab{flex:1 1 50%;min-width:0;border-top:1px solid var(--border-subtle)}
  .ctabs-list{grid-template-columns:1fr;gap:0}
  .ctabs-body{padding:26px 20px 28px}
}


/* vinkregels op een lichte grond (excess-pagina) */
.crows.news .crow{color:var(--text-strong);border-bottom-color:var(--border-subtle)}
.crows.news .crow>svg{color:var(--text-accent-warm)}
.crows.news .crow em{color:var(--text-muted)}

/* De industriekolom in de footer telt vijftien regels en trok de footer scheef.
   Hij loopt nu in twee kolommen. (Feedback 22-08.) */
.ftr-col.two ul{display:block;columns:2;column-gap:28px}
.ftr-col.two li+li{margin-top:11px}
.ftr-col.two li{break-inside:avoid}
@media (max-width:720px){.ftr-col.two ul{columns:1}}

/* ---- dezelfde globe-band, maar op een licht vlak (contact) --------------
   De bol tekent zijn eigen donkere sfeer op het canvas; alleen de chrome
   eromheen — kaart, tabs, legenda, tooltip — heeft een lichte variant nodig. */
.globe-sec.on-light .globe-hint{color:var(--text-muted)}
.globe-sec.on-light .globe-hint svg{color:var(--tg-ambition-orange)}

.globe-sec.on-light .gcard{background:var(--surface-card);border-color:var(--border-subtle);
  box-shadow:0 18px 44px rgba(4,3,72,.08)}
.globe-sec.on-light .gcard-top{border-bottom-color:var(--border-subtle)}
.globe-sec.on-light .gtab{border-left-color:var(--border-subtle);color:var(--text-muted)}
.globe-sec.on-light .gtab:hover{background:var(--blue-100);color:var(--text-strong)}
.globe-sec.on-light .gtab[aria-selected=true]{background:var(--tg-ambition-orange);color:#fff}
.globe-sec.on-light .gcard-body h3{color:var(--text-strong)}
.globe-sec.on-light .gcard-body>p{color:var(--text-body-color)}
.globe-sec.on-light .gcard-body li{color:var(--text-body-color)}
.globe-sec.on-light .gcard-body li svg{color:var(--tg-ambition-orange)}
.globe-sec.on-light .gmeta{border-top-color:var(--border-subtle)}
.globe-sec.on-light .gmeta b{color:var(--text-strong)}
.globe-sec.on-light .gmeta span{color:var(--text-muted)}

.globe-sec.on-light .gkey{color:var(--text-muted)}
.globe-sec.on-light .gkey .k.lab{border-color:var(--tg-network-blue)}
.globe-sec.on-light .gkey .k.log{border-color:var(--neutral-500)}

.globe-sec.on-light .glab{background:var(--surface-card);border-color:var(--border-subtle);
  box-shadow:0 18px 40px rgba(4,3,72,.16)}
.globe-sec.on-light .glab b{color:var(--text-strong)}
.globe-sec.on-light .glab .loc{color:var(--tg-ambition-orange)}
.globe-sec.on-light .glab .txt{color:var(--text-body-color)}

/* ============================================================ juridische tekstpagina's

   Ronde 9 kent geen doorlopende tekstpagina's: elke pagina is opgebouwd uit
   kaarten, stroken en opsommingen met een eigen klasse. De globale reset zet
   daarom alle marges en opsommingstekens uit, en een kale <p> of <ul> komt
   nergens voor.

   /legal/* is de eerste uitzondering. Dit blok geeft die pagina's lopende tekst
   terug, en staat bewust op één klasse (.legal) zodat het niets aan de 37
   goedgekeurde pagina's kan veranderen. */

.legal{max-width:78ch;color:var(--text-body-color);line-height:1.68}
.legal > p,
.legal > ul,
.legal > ol{margin:0 0 16px}
.legal h2{font-size:var(--text-heading-2);margin:44px 0 14px;color:var(--text-strong)}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:var(--text-heading-4);margin:28px 0 10px;color:var(--text-strong)}
.legal ul,
.legal ol{padding-left:22px}
.legal ul{list-style:disc}
.legal ol{list-style:decimal}
.legal li{margin:0 0 8px}
.legal li::marker{color:var(--text-muted)}
.legal strong{font-weight:var(--weight-bold)}
.legal a{text-decoration:underline}
.legal .stand{font-size:var(--text-micro);color:var(--text-muted);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:8px}
.legal address{font-style:normal;margin:0 0 16px}

/* De spamcontrole op de formulieren. Staat in `interaction-only`, dus meestal is
   dit een lege doos van 0 pixels; alleen als Cloudflare werkelijk iets wil vragen
   verschijnt er een widget. Marge dus alleen als er inhoud is. */
.ts-doos:not(:empty){margin:4px 0 2px}

/* Aanwijzing onder de honeycomb — gevraagd door Tradius op 27 augustus 2026.
   De uitleg stond alleen in de tekstkolom ernaast; aan de kant van de raat zelf
   was er geen enkele aanwijzing dat je erop kunt klikken.

   Zelfde vorm als .globe-hint, maar de honeycomb staat op een lichte achtergrond
   en niet op Midnight Sky, dus de kleuren zijn die van de lichte variant. */
.hive-hint{grid-area:hint;display:flex;align-items:center;justify-content:center;
  gap:9px;font-size:var(--text-caption);color:var(--text-muted)}
.hive-hint svg{width:16px;height:16px;flex:0 0 auto;color:var(--tg-ambition-orange)}

/* 404 — de enige pagina die niet uit designronde 9 komt en ook geen tegenhanger
   daar heeft. Bewust sober: vier kaarten met de routes die mensen zoeken, in de
   vorm die de rest van de site al gebruikt. */
.eyebrow-404{font-size:var(--text-eyebrow);font-weight:var(--weight-black);
  letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;
  color:var(--text-accent-warm-on-dark);margin-bottom:14px}
.nf-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-top:36px}
.nf-card{display:block;padding:24px;background:var(--surface-card);
  border:1px solid var(--border-subtle);border-radius:var(--radius-md);
  text-decoration:none;transition:border-color .2s var(--ease-out-soft),transform .2s var(--ease-out-soft)}
.nf-card:hover{border-color:var(--tg-ambition-orange);transform:translateY(-2px)}
.nf-card h3{font-size:var(--text-heading-4);color:var(--text-strong)}
.nf-card p{margin-top:8px;font-size:var(--text-body);line-height:var(--leading-body);
  color:var(--text-body-color)}
@media (max-width:900px){.nf-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.nf-grid{grid-template-columns:minmax(0,1fr)}}