/* ============================================================
   ITproposal - brand tokens (ORANJE / ZWART ALLEEN)
   ============================================================ */
:root{
  --orange:#F07E10;
  --orange-hover:#C4670A;
  --orange-tint:#FFF5EB;
  --black:#0F0F0F;
  --dark:#242627;
  --body:#3F3F3F;
  --grey:#5F6567;
  --ivory:#FAF7F2;
  --light:#F5F5F5;
  --white:#FFFFFF;
  --border:#EEEEEE;
  --icon-grey:#8F8F8F;

  --shadow-sm:0 2px 8px rgba(15,15,15,.06);
  --shadow-md:0 18px 40px -18px rgba(15,15,15,.22);
  --shadow-orange:0 20px 44px -16px rgba(240,126,16,.45);

  --font-display:'Outfit',system-ui,sans-serif;
  --font-body:'Open Sans',system-ui,sans-serif;

  --maxw:1240px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{
  font-family:var(--font-body);
  color:var(--body);
  background:var(--white);
  line-height:1.6;
  overflow-x:hidden;
  width:100%;
  max-width:100%;
  -webkit-font-smoothing:antialiased;
}
/* height:auto is verplicht nu img's een width/height-attribuut hebben,
   anders vervormen ze zodra de container smaller is dan de intrinsieke breedte.
   Specifiekere regels (.hero-bg img, .slice img) overschrijven dit met height:100%. */
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
::selection{background:var(--orange);color:#fff}

h1,h2,h3,h4,.display{font-family:var(--font-display);color:var(--black);line-height:1.02;letter-spacing:-.02em;font-weight:800}

.shell{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.eyebrow{font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.18em;text-transform:uppercase;color:var(--orange)}
/* 190px boven en onder betekent 380px tussen twee secties. Dat leest als een gat
   in plaats van als rust. 118px houdt de secties nog duidelijk uit elkaar en
   scheelt op een dienstpagina bijna een half scherm aan leegte. */
.section{padding-block:clamp(72px,8.2vw,118px)}

/* ============================================================
   NAV - floating glass pill
   ============================================================ */
.nav-wrap{position:fixed;inset:18px 0 auto 0;z-index:100;display:flex;justify-content:center;pointer-events:none}
.nav{
  pointer-events:auto;
  display:flex;align-items:center;gap:34px;
  width:min(1180px,94vw);
  padding:12px 14px 12px 26px;
  border-radius:999px;
  background:rgba(255,255,255,.72);
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(15,15,15,.07);
  box-shadow:0 10px 40px -20px rgba(15,15,15,.28);
  transition:background .4s ease, box-shadow .4s ease, transform .4s ease;
}
.nav.scrolled{background:rgba(15,15,15,.9);border-color:rgba(255,255,255,.08)}
.nav.scrolled .nav-link,.nav.scrolled .brand-word{color:#fff}
.nav.scrolled .nav-link:hover{color:var(--orange)}
.brand{display:flex;align-items:center;gap:11px;margin-right:auto}
.brand-icon{height:38px;width:auto;display:block;flex:none}
.brand-word-img{height:19px;width:auto;display:block}
.nav-links{display:flex;gap:clamp(17px,2.1vw,30px);align-items:center}
.nav-link{font-weight:600;font-size:.95rem;color:var(--dark);transition:color .25s ease;position:relative;white-space:nowrap}
.nav-link:hover{color:var(--orange)}
/* De spoedlink krijgt een pulserend stipje. Genoeg om op te vallen voor wie
   ernaar zoekt, te klein om de rest van het menu te overstemmen. */
.nav-urgent,.m-urgent{display:inline-flex;align-items:center;gap:8px}
.nav-urgent::before,.m-urgent::before{content:"";width:7px;height:7px;flex:none;border-radius:50%;
  background:var(--orange);box-shadow:0 0 0 0 rgba(240,126,16,.55);animation:pulsedot 2.4s ease-out infinite}
.m-urgent::before{width:11px;height:11px}
@keyframes pulsedot{
  0%{box-shadow:0 0 0 0 rgba(240,126,16,.55)}
  70%{box-shadow:0 0 0 9px rgba(240,126,16,0)}
  100%{box-shadow:0 0 0 0 rgba(240,126,16,0)}
}
@media(prefers-reduced-motion:reduce){.nav-urgent::before,.m-urgent::before{animation:none}}
.nav-cta{
  font-family:var(--font-display);font-weight:700;font-size:.94rem;white-space:nowrap;
  background:var(--orange);color:#fff;padding:12px 24px;border-radius:999px;
  transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease;
  box-shadow:var(--shadow-orange)
}
.nav-cta:hover{background:var(--orange-hover);transform:translateY(-2px)}
.nav-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  background:none;border:0;cursor:pointer;padding:11px;min-width:44px;min-height:44px;z-index:101}
.nav-burger span{width:22px;height:2px;background:currentColor;color:var(--black);display:block;border-radius:2px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1),opacity .25s ease}
.nav.scrolled .nav-burger span{color:#fff}
.nav-burger.active span{color:#fff}
.nav-burger.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-burger.active span:nth-child(2){opacity:0}
.nav-burger.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* mobiel overlay-menu */
.mobile-menu{position:fixed;inset:0;z-index:99;background:rgba(15,15,15,.98);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  display:flex;flex-direction:column;justify-content:center;
  padding:110px clamp(24px,7vw,44px) 48px;
  transform:translateY(-100%);visibility:hidden;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),visibility .5s}
.mobile-menu.open{transform:translateY(0);visibility:visible}
.mobile-menu a{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,7vw,2.4rem);
  color:#fff;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);
  letter-spacing:-.02em;transition:color .3s ease}
.mobile-menu a:hover,.mobile-menu a:focus-visible{color:var(--orange)}
.mobile-menu .m-cta{margin-top:32px;background:var(--orange);color:#fff;border:0;border-radius:999px;
  text-align:center;font-size:1.05rem;padding:18px 28px;box-shadow:var(--shadow-orange)}
.mobile-menu .m-cta:hover{background:var(--orange-hover);color:#fff}
body.menu-open{overflow:hidden}
/* nav-pill verdwijnt zodat het logo direct op het zwarte menu staat */
body.menu-open .nav{background:transparent;border-color:transparent;box-shadow:none;
  -webkit-backdrop-filter:none;backdrop-filter:none}
@media(min-width:921px){.mobile-menu{display:none}}

/* ============================================================
   HERO - cinematic center
   ============================================================ */
/* Kolomrichting, zodat de scrollhint onderaan meetelt in de layout in plaats van
   er met position:absolute overheen te liggen. Bij een venster lager dan ~840px
   groeide het gecentreerde blok anders tot over de hint heen. */
.hero{position:relative;min-height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;overflow:hidden;background:var(--black);padding-bottom:26px}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;filter:contrast(1.12) brightness(.5) saturate(1.1);transform:scale(1.08)}
.hero-bg::after{content:"";position:absolute;inset:0;background:
  radial-gradient(120% 90% at 50% 30%, rgba(15,15,15,.15) 0%, rgba(15,15,15,.82) 62%, var(--black) 100%),
  linear-gradient(180deg, rgba(15,15,15,.4), rgba(15,15,15,.75))}
.hero-glow{position:absolute;z-index:1;width:60vw;height:60vw;max-width:760px;max-height:760px;left:50%;top:38%;transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(240,126,16,.34) 0%, rgba(240,126,16,0) 62%);filter:blur(30px);pointer-events:none}
.hero-grain{position:absolute;inset:0;z-index:2;opacity:.5;pointer-events:none;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}
/* margin-block:auto verdeelt de overgebleven ruimte gelijk boven en onder, dus het
   blok blijft gecentreerd binnen wat de scrollhint overlaat. Is er geen ruimte over,
   dan worden de marges 0 en schuift de hint netjes mee naar beneden. */
.hero-inner{position:relative;z-index:3;padding-top:90px;margin-block:auto}
.hero-tag{display:inline-flex;align-items:center;gap:10px;color:#fff;font-family:var(--font-display);font-weight:600;font-size:.9rem;letter-spacing:.02em;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);padding:9px 18px;border-radius:999px;margin-bottom:30px;backdrop-filter:blur(6px)}
.hero-tag .dot{width:8px;height:8px;border-radius:50%;background:var(--orange);box-shadow:0 0 0 4px rgba(240,126,16,.28)}
.hero h1{color:#fff;font-weight:900;max-width:min(1100px,92vw);margin-inline:auto;font-size:clamp(2.6rem,6vw,5.2rem)}
.hero h1 .accent{color:var(--orange)}
.hero p.lead{color:rgba(255,255,255,.78);font-size:clamp(1.05rem,1.5vw,1.28rem);max-width:640px;margin:28px auto 40px;line-height:1.65}
.hero-cta{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--font-display);font-weight:700;font-size:1rem;padding:16px 32px;border-radius:999px;display:inline-flex;align-items:center;gap:10px;transition:transform .3s cubic-bezier(.2,.8,.2,1),background .3s ease,box-shadow .3s ease,color .3s ease;cursor:pointer;border:0}
.btn-primary{background:var(--orange);color:#fff;box-shadow:var(--shadow-orange)}
.btn-primary:hover{background:var(--orange-hover);transform:translateY(-3px)}
.btn-ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.22)}
.btn-ghost:hover{background:#fff;color:var(--black);transform:translateY(-3px)}
.btn .arw{transition:transform .3s ease}
.btn:hover .arw{transform:translate(4px,-2px)}
/* Spoedpagina: het nummer is de pagina. Groter dan een gewone knop, want wie
   met een storing binnenkomt moet niks hoeven zoeken. */
.btn-call{font-size:clamp(1.15rem,2.4vw,1.55rem);padding:20px 40px;letter-spacing:-.01em}
.btn-call::before{content:"";width:.82em;height:.82em;flex:none;background:currentColor;
  --ico-call:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 0 0 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1A17 17 0 0 1 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2Z'/%3E%3C/svg%3E");
  -webkit-mask:var(--ico-call) center/contain no-repeat;mask:var(--ico-call) center/contain no-repeat}
/* 30px en niet 14: de gloed onder .btn-primary reikt zo'n 26px naar beneden en
   liep anders over deze regel heen. */
.callsub{margin-top:30px;font-size:.95rem;color:rgba(255,255,255,.62)}
.hero-sub .callsub{margin-bottom:0}
.hero-scroll{position:relative;z-index:3;flex:none;margin-top:18px;color:rgba(255,255,255,.5);font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;font-family:var(--font-display);display:flex;flex-direction:column;align-items:center;gap:8px}
.hero-scroll .line{width:1px;height:38px;background:linear-gradient(rgba(255,255,255,.5),transparent);animation:scrollpulse 2s ease-in-out infinite}
@keyframes scrollpulse{0%,100%{opacity:.3;transform:scaleY(.7)}50%{opacity:1;transform:scaleY(1)}}

/* stat band under hero */
.statband{background:var(--black);color:#fff;border-top:1px solid rgba(255,255,255,.08)}
.statband .grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.stat{padding:44px 30px;text-align:center;border-right:1px solid rgba(255,255,255,.08)}
.stat:last-child{border-right:0}
.stat .num{font-family:var(--font-display);font-weight:900;font-size:clamp(2.2rem,3.6vw,3.4rem);color:#fff;line-height:1}
.stat .num .accent{color:var(--orange)}
.stat .lbl{color:rgba(255,255,255,.62);font-size:.9rem;margin-top:10px}
@media(max-width:760px){.statband .grid{grid-template-columns:repeat(2,1fr)}.stat:nth-child(2){border-right:0}.stat{border-bottom:1px solid rgba(255,255,255,.08)}}

/* ============================================================
   SECTION HEAD (shared)
   ============================================================ */
.sec-head{max-width:820px;margin-bottom:64px}
.sec-head.center{margin-inline:auto;text-align:center}
.sec-head h2{font-size:clamp(2rem,4.4vw,3.4rem);margin-top:16px;font-weight:800}
.sec-head p{color:var(--grey);font-size:1.1rem;margin-top:20px;max-width:640px}
.sec-head.center p{margin-inline:auto}
/* Op brede schermen stond de kop in de linkerhelft en bleef de rechterhelft leeg.
   Kop links, inleiding rechts vult die helft met tekst die er toch al staat; de
   inleiding zakt naar de onderlijn van de kop zodat het een blok blijft. */
@media(min-width:1080px){
  .shell > .sec-head:not(.center):has(> p:only-of-type){max-width:none;display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);
    column-gap:clamp(40px,5vw,88px);align-items:end}
  .shell > .sec-head:not(.center):has(> p:only-of-type) > .eyebrow{grid-column:1;justify-self:start}
  .shell > .sec-head:not(.center):has(> p:only-of-type) > h2{grid-column:1;margin-bottom:0}
  .shell > .sec-head:not(.center):has(> p:only-of-type) > p{grid-column:2;grid-row:2;margin-top:0;max-width:52ch;padding-bottom:.4em}
}

/* ============================================================
   DIENSTEN - gapless bento
   ============================================================ */
/* warme ivoren sectie zodat de witte kaarten oplichten */
.services{background:var(--ivory)}
.bento{display:grid;grid-template-columns:repeat(6,1fr);grid-auto-rows:minmax(196px,auto);gap:16px;grid-auto-flow:dense}

.card{
  position:relative;border-radius:24px;overflow:hidden;padding:34px;
  display:flex;flex-direction:column;justify-content:space-between;
  border:1px solid var(--border);background:var(--white);min-height:200px;
  isolation:isolate;
  box-shadow:0 1px 2px rgba(15,15,15,.04);
  transition:transform .5s cubic-bezier(.2,.8,.2,1),box-shadow .5s ease,border-color .5s ease;
}
.card:hover{transform:translateY(-7px);box-shadow:0 26px 54px -22px rgba(15,15,15,.3);border-color:rgba(240,126,16,.35)}
a.card{cursor:pointer}
.card:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.card:not(.feature)>*{position:relative;z-index:1}

/* accentlijn die over de bovenrand inveegt */
.card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;z-index:4;
  background:linear-gradient(90deg,var(--orange),var(--orange-hover));
  transform:scaleX(0);transform-origin:left;
  transition:transform .55s cubic-bezier(.2,.8,.2,1)}
.card:hover::before{transform:scaleX(1)}
.card.promo::before{background:linear-gradient(90deg,#fff,rgba(255,255,255,.45))}

/* zachte oranje spotlight die de cursor volgt */
.card:not(.feature):not(.promo)::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;
  background:radial-gradient(460px circle at var(--mx,50%) var(--my,0%),rgba(240,126,16,.10),transparent 62%);
  transition:opacity .45s ease}
.card:not(.feature):not(.promo):hover::after{opacity:1}

.card h3{font-size:1.55rem;font-weight:800;letter-spacing:-.025em;line-height:1.12}
.card p{color:var(--grey);font-size:.97rem;margin-top:11px;line-height:1.62}
.card .kicker{display:inline-block;font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.15em;text-transform:uppercase;color:var(--orange);margin-bottom:9px}

/* CTA met cirkelpijl die zich vult */
.card .go{margin-top:22px;font-family:var(--font-display);font-weight:700;color:var(--black);
  display:inline-flex;align-items:center;gap:11px;font-size:.94rem}
.card .go .arw{width:30px;height:30px;border-radius:50%;border:1.5px solid rgba(240,126,16,.42);
  display:grid;place-items:center;color:var(--orange);font-size:.88rem;flex:none;line-height:1;
  transition:background .35s ease,color .35s ease,border-color .35s ease,transform .35s ease}
.card:hover .go .arw{background:var(--orange);border-color:var(--orange);color:#fff;transform:translateX(4px)}

/* icoon dat oranje wordt bij hover */
.ic{width:54px;height:54px;border-radius:15px;background:var(--orange-tint);display:grid;place-items:center;
  color:var(--orange);margin-bottom:auto;flex:none;
  transition:background .4s ease,color .4s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.ic svg{width:26px;height:26px}
.card:hover .ic{background:var(--orange);color:#fff;transform:translateY(-3px) rotate(-5deg)}

/* span helpers - 6-col system */
.s2{grid-column:span 2}
.s3{grid-column:span 3}
.s4{grid-column:span 4}
.s6{grid-column:span 6}
.r2{grid-row:span 2}

/* feature (dark) card with image */
.card.feature{background:var(--black);border-color:transparent;color:#fff;justify-content:flex-end}
.card.feature .bgimg{position:absolute;inset:0;z-index:0}
.card.feature .bgimg img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.55);transition:transform .8s ease}
.card.feature:hover .bgimg img{transform:scale(1.06)}
.card.feature .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.15),rgba(15,15,15,.9))}
.card.feature>*{position:relative;z-index:1}
.card.feature h3{color:#fff;font-size:1.85rem}
.card.feature p{color:rgba(255,255,255,.72)}
.card.feature .kicker{color:var(--orange)}
.card.feature .go{color:#fff}
.card.feature .go .arw{border-color:rgba(255,255,255,.42);color:#fff}
.card.feature:hover .go .arw{background:var(--orange);border-color:var(--orange);color:#fff}

/* orange promo card */
.card.promo{background:linear-gradient(150deg,var(--orange),var(--orange-hover));border-color:transparent;color:#fff}
.card.promo h3{color:#fff}
.card.promo p{color:rgba(255,255,255,.9)}
.card.promo .ic{background:rgba(255,255,255,.18);color:#fff}
.card.promo .go{color:#fff}
.card.promo .go .arw{border-color:rgba(255,255,255,.55);color:#fff}
.card.promo:hover .go .arw{background:#fff;border-color:#fff;color:var(--orange)}
.card.promo:hover .ic{background:#fff;color:var(--orange)}

@media(max-width:1000px){
  /* 2 kolommen i.p.v. 4: bij een oneven aantal s2-kaarten liet 4 kolommen
     twee lege cellen achter rechtsonder. Zo vult elk aantal kaarten netjes. */
  .bento{grid-template-columns:repeat(2,1fr)}
  .s3,.s4,.s6{grid-column:span 2}
  .s2{grid-column:span 1}
  .r2{grid-row:span 1}
}
@media(max-width:620px){
  .bento{grid-template-columns:1fr}
  .s2,.s3,.s4,.s6{grid-column:span 1}
}

/* ============================================================
   WAAROM - scrubbing text reveal
   ============================================================ */
.why{background:var(--white)}
/* De tekstkolom hier is ruim twee keer zo hoog als de 4:3-foto ernaast. Gecentreerd
   levert dat ruim 200px leegte boven en onder de foto op. De foto rekt daarom mee
   met de tekstkolom (object-fit vangt de bijsnede op), met een plafond zodat hij
   op korte kolommen niet uit verhouding schiet. */
.why .split{align-items:stretch}
.why .split-media img{aspect-ratio:auto;height:100%}
@media(max-width:860px){.why .split{align-items:center}.why .split-media img{aspect-ratio:4/3}}

/* ============================================================
   SECTOREN - horizontal accordion
   ============================================================ */
.sectors{background:var(--ivory)}
.acc{display:flex;gap:12px;height:540px}
.slice{position:relative;flex:1;min-width:62px;border-radius:22px;overflow:hidden;cursor:pointer;transition:flex .6s cubic-bezier(.2,.8,.2,1);min-width:0}
.slice.active{flex:4.6}
.slice img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.1) brightness(.6);transition:transform .8s ease,filter .6s ease}
.slice.active img{filter:grayscale(.1) contrast(1.05) brightness(.7);transform:scale(1.04)}
.slice::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,15,15,.1),rgba(15,15,15,.86))}
.slice.active::after{background:linear-gradient(180deg,rgba(15,15,15,.05),rgba(15,15,15,.8))}
.slice .body{position:absolute;inset:0;z-index:2;padding:28px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff}
.slice .vlabel{position:absolute;bottom:28px;left:28px;writing-mode:vertical-rl;transform:rotate(180deg);font-family:var(--font-display);font-weight:700;letter-spacing:.06em;font-size:1.08rem;color:#fff;transition:opacity .4s ease;white-space:nowrap;z-index:3}
.slice.active .vlabel{opacity:0}
.slice .content{opacity:0;transform:translateY(14px);transition:opacity .5s ease .12s,transform .5s ease .12s;max-width:440px}
.slice.active .content{opacity:1;transform:none}
.slice .num{font-family:var(--font-display);font-weight:700;color:var(--orange);font-size:.85rem;letter-spacing:.14em}
.slice h3{color:#fff;font-size:1.9rem;margin:8px 0 12px;font-weight:800}
.slice p{color:rgba(255,255,255,.82);font-size:1rem}
@media(max-width:1100px){.acc{height:480px}.slice.active{flex:5.2}}
@media(max-width:820px){
  .acc{flex-direction:column;height:auto;gap:10px}
  /* flex:none is hier nodig, niet cosmetisch. In een kolom bepaalt flex-basis
     de hoogte, en de basiswaarde flex:1 zet die op 0%. Dat won van height:104px,
     waardoor alle niet-actieve sectoren op nul hoogte stonden: op een telefoon
     was alleen Retail te zien en waren de andere zes niet eens aan te tikken. */
  .slice{flex:none;height:104px;min-width:0}
  .slice.active{height:340px;flex:none}
  .slice .vlabel{writing-mode:horizontal-tb;transform:none;top:32px;bottom:auto;left:26px}
}

/* ============================================================
   PARTNERS / CERTIFICERING - trust band
   ============================================================ */
/* Een logobalk is optisch dun. De ruimte die om een tekstsectie prettig voelt
   leest hier als een gat: 187px sectiepadding plus 88px bandpadding gaf ruim
   275px leegte rond een strook van 30px hoog. De band krijgt daarom zelf minder
   lucht, en de secties ernaast houden aan die kant ook in. Dat halveert de
   witruimte rond elke band zonder het ritme tussen de tekstsecties te raken. */
.partners{background:var(--white);padding-block:clamp(36px,4.2vw,56px);border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.section:has(+ .partners){padding-bottom:clamp(52px,6.5vw,96px)}
.partners + .section{padding-top:clamp(52px,6.5vw,96px)}
/* Twee banden achter elkaar hoeven onderling helemaal weinig ruimte. */
.partners + .partners{border-top:0}
/* De kantorenbalk is net zo dun, en loopt zwart-op-zwart door naar de cta.
   Daar stond 331px leegte tussen de balk en de afsluitende kop. */
.offices + .section{padding-top:clamp(52px,6.5vw,110px)}
.partners .cap{text-align:center;color:var(--grey);font-family:var(--font-display);font-weight:600;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:40px}
.pgroup{display:flex;flex-direction:column;align-items:center;gap:20px}
.plabel{font-family:var(--font-display);font-weight:700;font-size:.68rem;letter-spacing:.18em;
  text-transform:uppercase;color:var(--icon-grey)}
.plogos{display:flex;align-items:center;justify-content:center;gap:clamp(28px,4.5vw,56px);flex-wrap:wrap}
.plogos img{width:auto;object-fit:contain}

/* Certificeringen: donkere beeldmerken, dus prima op de lichte achtergrond.
   Ze lopen door in dezelfde marquee als de kantorenbalk; zie OFFICES verderop
   voor het mechaniek. Alleen rustiger: de beeldmerken zijn een stuk smaller dan
   de stadsnamen, dus op 26s ogen ze gehaast.
   .pgroup centreert zijn kinderen met align-items, waardoor de balk anders zou
   krimpen tot de breedte van de logo's; vandaar de expliciete width. */
.certs-marquee{width:100%}
.certs-marquee .marquee-track{animation-duration:40s;
  gap:clamp(28px,4.5vw,56px);padding-right:clamp(28px,4.5vw,56px)}
.certs-marquee img{height:52px;width:auto;flex:none;object-fit:contain;
  filter:grayscale(1) contrast(1.25);opacity:.7;
  transition:filter .4s ease,opacity .4s ease,transform .4s ease}
.certs-marquee img:hover{filter:grayscale(0) contrast(1);opacity:1;transform:translateY(-3px)}

/* Groepen in de partnerband hebben zelf geen marge; alleen .ptech had er een.
   Deze regel geldt voor elke volgende groep, zodat een nieuwe niet tegen de
   vorige aan plakt. Hij wint van .ptech op specificiteit en houdt dezelfde 48px. */
.pgroup + .pgroup{margin-top:48px}

/* De homepage draagt alleen nog de certificeringen. Technologie en hardware
   staan op de pagina's waar die vraag gesteld wordt; deze regel verwijst door
   zonder er een derde logomuur van te maken. */
.pmore{margin-top:40px;text-align:center;color:var(--grey);font-size:.95rem;
  max-width:640px;margin-inline:auto;line-height:1.7}
.pmore a{font-family:var(--font-display);font-weight:700;color:var(--orange);
  display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.pmore a span{transition:transform .3s ease}
.pmore a:hover span{transform:translateX(4px)}

/* Compacte merkenstrip op een dienstpagina: alleen wat op die pagina relevant
   is. .pgroup centreert zijn kinderen, dus ook hier een expliciete breedte. */
.plogos.svc{width:100%}
.plogos.svc img{height:auto;width:auto;max-height:26px;max-width:100px;
  filter:grayscale(1) contrast(1.2);opacity:.55;transition:opacity .35s ease,transform .35s ease}
.plogos.svc img:hover{opacity:1;transform:translateY(-3px)}
.plogos.svc .pbrand{font-size:1.3rem}

/* Hardwarepartners. De beeldmerken komen uit simple-icons en zijn eenkleurig,
   dus ze krijgen dezelfde ingetogen behandeling als de certificaten: gedempt in
   rust, vol bij hover. Yealink zit niet in die set en staat daarom als wordmark
   in de huisstijl; een merklogo namaken is geen optie. */
/* Hardwarepartners lopen door in dezelfde marquee als de kantoren en de
   certificaten. .pgroup centreert zijn kinderen, dus de balk krijgt een
   expliciete breedte; anders krimpt hij tot de breedte van de logo's.
   De halve track is ~2450px en dus ruim breder dan de shell, waardoor er geen
   gat in de lus valt. */
.brand-marquee{width:100%}
.brand-marquee .marquee-track{animation-duration:65s;align-items:center;
  gap:clamp(28px,4.5vw,56px);padding-right:clamp(28px,4.5vw,56px)}
/* Begrensd op hoogte en breedte: een wordmark als NETGEAR is bijna zes keer zo
   breed als hoog en zou anders de balk domineren. */
.brand-marquee img{flex:none;height:auto;width:auto;max-height:28px;max-width:104px;
  opacity:.5;transition:opacity .35s ease}
.brand-marquee img:hover{opacity:1}
/* line-height op 1 en zelf centreren: met de normale regelhoogte kwam het
   wordmark hoger te staan dan de beeldmerken ernaast. */
.pbrand{flex:none;display:inline-flex;align-items:center;line-height:1;
  font-family:var(--font-display);font-weight:700;font-size:1.4rem;
  color:var(--black);opacity:.5;letter-spacing:-.01em;transition:opacity .35s ease}
.pbrand:hover{opacity:1}

/* Technologielogo's staan op een DONKERE band: de aangeleverde bestanden zijn
   witte/lichte varianten (Azure, M365, VMware, Salesforce) die op wit wegvallen.
   brightness(0) invert(1) maakt elk logo een egaal wit beeldmerk, ongeacht de
   originele kleur, zodat ze allemaal even zwaar wegen. */
.ptech{background:var(--black);border-radius:26px;padding:40px clamp(24px,4vw,52px);margin-top:48px}
.ptech .plabel{color:rgba(255,255,255,.42)}
.ptech .plogos img{height:27px;filter:brightness(0) invert(1);opacity:.6;
  transition:opacity .35s ease,transform .35s ease}
.ptech .plogos img:hover{opacity:1;transform:translateY(-3px)}

/* De technologieband loopt door, net als de hardwarepartners. De maskering van
   .marquee werkt op alpha, dus hij doet het ook op dit donkere paneel.
   brightness(0) invert(1) maakt elk beeldmerk egaal wit, ongeacht de
   oorspronkelijke kleur, zodat ze allemaal even zwaar wegen. */
.tech-marquee{width:100%}
.tech-marquee .marquee-track{animation-duration:75s;align-items:center;
  gap:clamp(28px,4.5vw,56px);padding-right:clamp(28px,4.5vw,56px)}
.tech-marquee img{flex:none;height:auto;width:auto;max-height:27px;max-width:110px;
  filter:brightness(0) invert(1);opacity:.6;transition:opacity .35s ease}
.tech-marquee img:hover{opacity:1}

/* ============================================================
   OFFICES marquee
   ============================================================ */
.offices{background:var(--black);color:#fff;padding-block:clamp(60px,9vw,110px);overflow:hidden}
.offices .lead-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap;margin-bottom:56px}
.offices h2{color:#fff;font-size:clamp(1.8rem,3.6vw,2.8rem)}
.offices .lead-row p{color:rgba(255,255,255,.66);max-width:420px}
.marquee{display:flex;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee-track{display:flex;gap:60px;padding-right:60px;flex:none;animation:marq 26s linear infinite}
/* De band staat stil zolang je er met de muis of met het toetsenbord in
   zit, zodat je een merk kunt aanklikken zonder achter een bewegend doel
   aan te gaan. */
.marquee:hover .marquee-track,.marquee:focus-within .marquee-track{animation-play-state:paused}
/* De logo’s verwijzen naar de site van de leverancier. De link mag de
   uitlijning in de band niet veranderen, dus hij gedraagt zich als het
   beeld dat erin zit. */
.plink{display:inline-flex;align-items:center;flex:none;border-radius:8px}
.plink:focus-visible{outline:3px solid var(--orange);outline-offset:5px}
@keyframes marq{to{transform:translateX(-50%)}}
.office{display:flex;align-items:center;gap:16px;flex:none}
.office .country{font-family:var(--font-display);font-weight:800;font-size:clamp(1.5rem,3vw,2.4rem);color:rgba(255,255,255,.9);letter-spacing:-.02em;white-space:nowrap}
.office .meta{font-size:.8rem;color:var(--orange);font-family:var(--font-display);font-weight:700;letter-spacing:.1em}
.office .star{color:var(--orange);font-size:1.4rem}

/* ============================================================
   FINAL CTA
   ============================================================ */
.cta{position:relative;background:var(--black);overflow:hidden}
.cta .glow{position:absolute;width:70vw;height:70vw;max-width:900px;max-height:900px;right:-15%;top:-30%;background:radial-gradient(circle,rgba(240,126,16,.4),transparent 62%);filter:blur(40px)}
.cta .inner{position:relative;z-index:2;text-align:center;max-width:900px;margin-inline:auto}
.cta h2{color:#fff;font-size:clamp(2.2rem,5.5vw,4.4rem);font-weight:900}
.cta h2 .accent{color:var(--orange)}
.cta p{color:rgba(255,255,255,.74);font-size:1.15rem;margin:26px auto 42px;max-width:560px}
.cta-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
/* Zelfde zwart als de cta-sectie erboven, dus een haarlijn markeert de overgang.
   Tegen een lichte sectie valt die lijn vanzelf weg. */
footer{background:var(--black);color:#fff;padding-block:70px 34px;
  border-top:1px solid rgba(255,255,255,.09)}
/* De dienstenkolom telt veertien links en de andere drie er vier. Naast elkaar
   gezet gaf dat een blok leegte van bijna een halve schermhoogte rechtsonder.
   De diensten staan nu over twee kolommen, zodat alle kolommen ongeveer even
   hoog eindigen en de footer op één lijn afsluit. */
.foot-grid{display:grid;grid-template-columns:1.35fr repeat(5,minmax(0,1fr));gap:40px clamp(18px,2.2vw,30px);padding-bottom:52px;border-bottom:1px solid rgba(255,255,255,.09)}
.foot-col.foot-svc{grid-column:span 2}
.foot-col.foot-svc .foot-two{columns:2;column-gap:clamp(18px,2.2vw,30px)}
.foot-col.foot-svc .foot-two a{break-inside:avoid}
/* De laatste kolom draagt naam, adres en telefoon: het blok dat een
   zoekmachine gebruikt om een vestiging te herkennen. Die regels zijn geen
   links, dus krijgen ze dezelfde maat als de links ernaast. */
.foot-col .foot-fact{display:block;color:rgba(255,255,255,.45);padding:6px 0;font-size:.9rem;line-height:1.45}
.foot-col .foot-fact strong{color:rgba(255,255,255,.72);font-weight:600}
.foot-col .foot-fact + .foot-fact{padding-top:0}
.foot-brand .brand{color:#fff;margin-bottom:18px}
.foot-brand .brand .brand-word{color:#fff}
.foot-brand p{color:rgba(255,255,255,.55);max-width:300px;font-size:.95rem}
.foot-col h3{color:#fff;font-family:var(--font-display);font-weight:700;font-size:.85rem;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px}
.foot-col a{display:block;color:rgba(255,255,255,.6);padding:6px 0;font-size:.95rem;transition:color .25s ease}
.foot-col a:hover{color:var(--orange)}
.foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;padding-top:26px;color:rgba(255,255,255,.4);font-size:.85rem}
.foot-bottom a{color:rgba(255,255,255,.55)}
.foot-bottom a:hover{color:var(--orange)}
/* Vijf kolommen houden we vast tot het echt niet meer past. Een tussenstap
   van drie zet de korte kolommen naast de lange dienstenlijst en laat daar
   een gat van een halve schermhoogte achter. */
/* De voettekst telt zes eenheden: merk (1), diensten (2) en drie kolommen. In
   vier kolommen vulde de eerste rij precies en bleef de tweede rij half leeg,
   wat als een zwart gat onder de adresgegevens stond. Drie kolommen delen wel
   op: merk plus diensten vullen de eerste rij, de drie kolommen de tweede. */
@media(max-width:1200px){.foot-grid{grid-template-columns:1.2fr repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.foot-grid{grid-template-columns:1fr 1fr}.foot-brand{grid-column:span 2}
  .foot-col.foot-svc{grid-column:span 2}}
@media(max-width:560px){.foot-col.foot-svc .foot-two{grid-template-columns:1fr}}

/* reveal-on-scroll base */
/* Standaard zichtbaar. Alleen als JavaScript draait zet boot.js de klasse js op
   <html> en mag .rise verborgen starten, want dan is er ook iets dat hem weer
   toont. Valt het animatie-CDN weg, dan haalt site.js de klasse er weer af. */
.rise{opacity:1;transform:none}
html.js .rise{opacity:0;transform:translateY(34px)}

/* De balk klapt eerder in dan vroeger: met de spoedlink erbij passen vijf
   items plus taalwissel en knop niet meer op een regel onder de 1010px. */
@media(max-width:1010px){
  .nav-links,.nav-cta{display:none}
  .nav-burger{display:flex}
}
/* ============================================================
   SUBPAGINA-COMPONENTEN (dienstpagina's)
   ============================================================ */

/* kortere hero voor subpagina's */
.hero-sub{min-height:auto;padding:190px 0 clamp(80px,10vw,130px);text-align:left}
.hero-sub .hero-inner{padding-top:0;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
.hero-sub h1{font-size:clamp(2.3rem,5vw,4.2rem);max-width:16ch;margin-inline:0}
.hero-sub p.lead{margin:26px 0 36px;max-width:60ch}
.hero-sub .hero-cta{justify-content:flex-start}
.hero-sub .hero-bg img{filter:contrast(1.1) brightness(.42) saturate(1.05)}

/* kruimelpad */
.crumb{display:flex;align-items:center;gap:9px;margin-bottom:22px;font-size:.9rem;
  font-family:var(--font-display);font-weight:600;color:rgba(255,255,255,.55)}
.crumb a{color:rgba(255,255,255,.55);transition:color .25s ease}
.crumb a:hover{color:var(--orange)}
.crumb span{color:var(--orange)}

/* leesbare tekstkolom */
.prose{max-width:68ch}
.prose h2{font-size:clamp(1.7rem,3.2vw,2.5rem);margin:56px 0 18px}
.prose h2:first-child{margin-top:0}
.prose h3{font-size:1.28rem;margin:34px 0 12px;font-weight:700}
.prose p{margin-bottom:18px;font-size:1.04rem;line-height:1.75}
.prose ul,.prose ol{margin:0 0 20px 0;padding-left:0;list-style:none}
.prose li{position:relative;padding-left:30px;margin-bottom:11px;line-height:1.7}
.prose ul li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:8px;
  border-radius:50%;background:var(--orange)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n);position:absolute;left:0;top:.05em;width:21px;height:21px;
  border-radius:50%;background:var(--orange-tint);color:var(--orange);
  font-family:var(--font-display);font-weight:700;font-size:.76rem;display:grid;place-items:center}
.prose strong{color:var(--black);font-weight:700}
/* Een leeskolom van 68ch liet op breed scherm de hele rechterhelft leeg. Begint
   het blok met een h2, dan gaat die kop naar een eigen kolom links en loopt de
   tekst rechts door. De regellengte blijft daarmee gelijk, de bladspiegel niet. */
@media(min-width:1080px){
  .shell > .prose:has(> h2:first-child){max-width:none;display:grid;align-items:start;
    grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);column-gap:clamp(48px,6vw,96px)}
  /* De kop loopt over alle rijen zodat hij mee kan blijven staan tijdens het lezen. */
  .shell > .prose:has(> h2:first-child) > h2:first-child{grid-column:1;grid-row:1/span 50;margin:0;
    align-self:start;position:sticky;top:118px}
  .shell > .prose:has(> h2:first-child) > *:not(h2:first-child){grid-column:2;max-width:68ch}
  /* Staat er al een sectiekop boven, dan is er geen kop om links te zetten. Die
     blokken lopen in twee tekstkolommen, zodat de bladspiegel gevuld blijft en
     het blok half zo hoog wordt. */
  .sec-head + .prose{max-width:none;columns:2;column-gap:clamp(48px,6vw,88px);
    column-rule:1px solid var(--border)}
  .sec-head + .prose > *{break-inside:avoid-column}
  /* Een kop onderaan een kolom met zijn tekst in de volgende is een wees. */
  .sec-head + .prose > h3{break-after:avoid-column}
  .sec-head + .prose > p:last-child{margin-bottom:0}
}

/* twee koloms: tekst + beeld */
.split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(34px,5vw,72px);align-items:center}
.split.flip .split-media{order:-1}
.split-media{border-radius:22px;overflow:hidden;box-shadow:var(--shadow-md)}
.split-media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3}
/* Een gridkolom van 1fr krimpt niet onder de min-content-breedte van zijn
   inhoud. Een lang woord als VERVANGINGSRONDE maakte de kolom daardoor
   breder dan de shell en duwde de pagina zijwaarts. min-width:0 geeft de
   kolom toestemming om wel te krimpen. */
@media(max-width:860px){.split{grid-template-columns:1fr}.split>*{min-width:0}.split.flip .split-media{order:0}}

/* Wat we per hardwaremerk leveren. Het beeldmerk staat bovenaan de kaart in
   plaats van naast de tekst: de verhoudingen lopen van vierkant tot bijna zes
   keer zo breed, en naast elkaar zou dat de tekstkolom ongelijk maken. */
.brandmap{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px}
.bcard{display:flex;flex-direction:column;gap:12px;background:var(--white);
  border:1px solid var(--border);border-radius:20px;padding:24px;
  transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(240,126,16,.35)}
/* eigen regel, want in deze kaart is het beeldmerk geen rij-item maar een kop */
.bcard .bmark{height:auto;width:auto;max-height:24px;max-width:92px;opacity:.75;
  align-self:flex-start;font-size:1.15rem}
.bcard:hover .bmark{opacity:1}
.bwhat{color:var(--grey);font-size:.93rem;line-height:1.6;flex:1}
.bsvc{font-family:var(--font-display);font-weight:700;font-size:.85rem;color:var(--orange);
  display:inline-flex;align-items:center;gap:7px}
.bsvc span{transition:transform .3s ease}
.bcard:hover .bsvc span{transform:translateX(4px)}

/* stappenproces */
.steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;counter-reset:s}
.step{position:relative;background:var(--white);border:1px solid var(--border);border-radius:20px;padding:30px;
  counter-increment:s;transition:transform .4s cubic-bezier(.2,.8,.2,1),box-shadow .4s ease,border-color .4s ease}
.step:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(240,126,16,.35)}
.step::before{content:"0" counter(s);font-family:var(--font-display);font-weight:800;font-size:.82rem;
  letter-spacing:.14em;color:var(--orange);display:block;margin-bottom:14px}
.step h3{font-size:1.16rem;margin-bottom:9px;font-weight:700}
.step p{color:var(--grey);font-size:.95rem;line-height:1.65}

/* voordelenlijst met vinkjes */
.checks{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px 30px;list-style:none}
.checks li{position:relative;padding-left:36px;line-height:1.65;color:var(--body)}
.checks li::before{content:"";position:absolute;left:0;top:2px;width:23px;height:23px;border-radius:50%;
  background:var(--orange-tint);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F07E10' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size:13px;background-repeat:no-repeat;background-position:center}
.checks li strong{display:block;color:var(--black);font-family:var(--font-display);font-weight:700;margin-bottom:2px}
/* De shell is breed genoeg voor drie kolommen. Bij vier of acht punten blijft de
   laatste rij dan half leeg staan, en dat leest als een gat naast de tekst. Die
   twee aantallen krijgen twee kolommen, want dat gaat wel op. Drie, zes, negen
   en twaalf punten vullen drie kolommen vanzelf. */
@media(min-width:960px){
  .checks:has(> li:nth-child(4):last-child),
  .checks:has(> li:nth-child(8):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* cijferrij */
.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}
.fig{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:30px;text-align:center}
.fig .n{font-family:var(--font-display);font-weight:900;font-size:clamp(2rem,3.4vw,2.9rem);color:var(--black);line-height:1}
.fig .n em{font-style:normal;color:var(--orange)}
.fig .t{color:var(--grey);font-size:.93rem;margin-top:9px}

/* Volgen twee van deze blokken elkaar direct op, dan plakken ze aan elkaar: ze
   hebben allemaal alleen een interne gap en geen marge naar buiten. Op de
   sectorpagina liep de cijferrij zo tegen de verwante diensten aan, waardoor het
   als een scheef raster oogde. De afstand is bewust ruimer dan de interne gap
   van 14 tot 16px, anders lezen het nog steeds twee rijen van hetzelfde blok.
   Staat er een .sec-head tussen, dan geldt die zijn eigen margin-bottom. */
:is(.figs,.rel,.checks,.steps,.bento) + :is(.figs,.rel,.checks,.steps,.bento){
  margin-top:clamp(28px,4vw,44px)}

/* verwante diensten */
.rel{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px}
.rel a{background:var(--white);border:1px solid var(--border);border-radius:18px;padding:24px;
  display:flex;align-items:center;justify-content:space-between;gap:14px;
  font-family:var(--font-display);font-weight:700;color:var(--black);
  transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.rel a:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-color:rgba(240,126,16,.35)}
.rel a span{color:var(--orange);transition:transform .3s ease}
.rel a:hover span{transform:translateX(4px)}

/* sectie met ivoren achtergrond */
.tint{background:var(--ivory)}

/* ============================================================
   BLOGOVERZICHT
   ============================================================ */
.posts{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.post{background:var(--white);border:1px solid var(--border);border-radius:22px;overflow:hidden;
  display:flex;flex-direction:column;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease}
.post:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:rgba(240,126,16,.35)}
.post .thumb{aspect-ratio:16/10;overflow:hidden;background:var(--ivory)}
.post .thumb img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.post:hover .thumb img{transform:scale(1.05)}
.post .pbody{padding:26px;display:flex;flex-direction:column;gap:10px;flex:1}
.post .meta{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--orange)}
.post h3{font-size:1.16rem;line-height:1.28}
.post p{color:var(--grey);font-size:.94rem;flex:1}
.post .go{margin-top:6px}
.post .tags{display:flex;flex-wrap:wrap;gap:6px}
.post .tag{font-size:.72rem;font-family:var(--font-display);font-weight:600;color:var(--grey);
  border:1px solid var(--border);border-radius:999px;padding:3px 9px;line-height:1.5}

/* ============================================================
   ARTIKEL - leeskolom met meelopende inhoudsopgave
   ============================================================ */
/* De inhoudsopgave staat links en blijft staan tijdens het lezen. Dat vult de
   kolom die naast een leeskolom anders leeg blijft, en het geeft zoekmachines
   een expliciete sectiestructuur van het artikel. */
.artgrid{display:grid;gap:clamp(28px,4vw,64px)}
.arttoc{font-size:.94rem}
.arttoc .tochead{font-family:var(--font-display);font-weight:700;font-size:.76rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--grey);margin-bottom:14px}
.arttoc ol{list-style:none;counter-reset:t;display:grid;gap:2px;margin:0;padding:0}
.arttoc li{counter-increment:t}
.arttoc a{display:grid;grid-template-columns:26px 1fr;gap:6px;padding:7px 10px 7px 0;border-radius:10px;
  color:var(--body);line-height:1.45;transition:color .25s ease,background .25s ease}
.arttoc a::before{content:counter(t,decimal-leading-zero);font-family:var(--font-display);font-weight:700;
  font-size:.74rem;color:var(--orange);padding-top:.22em}
.arttoc a:hover{color:var(--black);background:var(--orange-tint)}
.artbody{min-width:0}
@media(min-width:1080px){
  .artgrid{grid-template-columns:minmax(0,.42fr) minmax(0,1fr)}
  .arttoc{position:sticky;top:112px;align-self:start}
  /* De hoogtebeperking hoort bij een lange inhoudsopgave die zelf mag scrollen.
     Staat er een tekstpaneel in de kolom, dan knipt zij zinnen af zodra het
     venster laag is: op 1366x768 verdween er tot 164px tekst. Alleen beperken
     als er echt een lijst in staat. Kent een browser :has() niet, dan vervalt
     de regel en is de tekst gewoon helemaal zichtbaar. */
  .arttoc:has(ol){max-height:calc(100svh - 150px);overflow:auto}
}

/* het korte antwoord - het blok dat zoekmachines en AI-assistenten citeren */
.answer{background:var(--orange-tint);border:1px solid rgba(240,126,16,.3);border-radius:20px;
  padding:clamp(22px,3vw,32px);margin-bottom:34px}
.answer .alabel{font-family:var(--font-display);font-weight:700;font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--orange);margin-bottom:10px}
.answer p{font-size:1.12rem;line-height:1.62;color:var(--black);margin:0}
.answer p + p{margin-top:12px}

/* vergelijkingstabel */
.tblwrap{overflow-x:auto;margin:0 0 26px;border:1px solid var(--border);border-radius:18px;background:var(--white)}
.tbl{width:100%;border-collapse:collapse;font-size:.95rem;min-width:560px}
.tbl th,.tbl td{text-align:left;padding:13px 18px;border-bottom:1px solid var(--border);vertical-align:top;
  line-height:1.55}
.tbl thead th{font-family:var(--font-display);font-weight:700;font-size:.78rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--grey);background:var(--ivory);white-space:nowrap}
.tbl tbody tr:last-child th,.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody th{font-family:var(--font-display);font-weight:700;color:var(--black);white-space:nowrap}
.tbl caption{caption-side:bottom;padding:12px 18px;font-size:.86rem;color:var(--grey);text-align:left;
  border-top:1px solid var(--border)}

/* veelgestelde vragen */
.faq{display:grid;gap:12px}
.faq details{background:var(--white);border:1px solid var(--border);border-radius:18px;
  transition:border-color .3s ease}
.faq details[open]{border-color:rgba(240,126,16,.4)}
.faq summary{cursor:pointer;list-style:none;padding:20px 24px;font-family:var(--font-display);
  font-weight:700;font-size:1.05rem;color:var(--black);display:flex;gap:14px;align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;margin-left:auto;width:11px;height:11px;margin-top:.35em;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .3s ease}
.faq details[open] summary::after{transform:rotate(-135deg)}
.faq .fbody{padding:0 24px 22px;color:var(--body);line-height:1.72}
.faq .fbody p + p{margin-top:12px}

/* artikelkop: datum, leestijd, bijgewerkt */
.artmeta{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:.88rem;color:rgba(255,255,255,.6);
  font-family:var(--font-display);font-weight:500;margin-top:18px}
.artmeta span{display:inline-flex;align-items:center;gap:7px}
.artmeta span::before{content:"";width:4px;height:4px;border-radius:50%;background:var(--orange)}

/* ============================================================
   TEAM
   ============================================================ */
.team{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:18px}
.member{background:var(--white);border:1px solid var(--border);border-radius:22px;padding:32px;text-align:center;
  transition:transform .45s cubic-bezier(.2,.8,.2,1),box-shadow .45s ease,border-color .45s ease}
.member:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);border-color:rgba(240,126,16,.35)}
.mono{width:74px;height:74px;border-radius:50%;background:var(--orange-tint);color:var(--orange);
  display:grid;place-items:center;margin:0 auto 18px;
  font-family:var(--font-display);font-weight:800;font-size:1.45rem;letter-spacing:.02em}
.member h3{font-size:1.14rem;margin-bottom:5px}
.member .rol{color:var(--orange);font-family:var(--font-display);font-weight:700;font-size:.72rem;
  letter-spacing:.13em;text-transform:uppercase}
.member p{color:var(--grey);font-size:.93rem;margin-top:13px;line-height:1.65}

/* ============================================================
   OFFICES marquee
   ============================================================ */
.offices-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(235px,1fr));gap:16px}
.office-card{background:var(--white);border:1px solid var(--border);border-radius:20px;padding:28px}
.office-card .flag{display:block;font-family:var(--font-display);font-weight:700;font-size:.7rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--orange);margin-bottom:11px}
.office-card h3{font-size:1.06rem;margin-bottom:9px}
.office-card p{color:var(--grey);font-size:.93rem;line-height:1.65}
.office-card a{color:var(--dark);border-bottom:1px solid var(--border);transition:color .25s ease}
.office-card a:hover{color:var(--orange)}

/* ============================================================
   JURIDISCHE PAGINA'S
   ============================================================ */
.legal{max-width:78ch}
.legal h2{font-size:clamp(1.35rem,2.4vw,1.85rem);margin:46px 0 14px}
.legal h2:first-child{margin-top:0}
.legal h3{font-size:1.06rem;margin:28px 0 8px;font-weight:700}
.legal p,.legal li{font-size:.97rem;line-height:1.78}
.legal p{margin-bottom:15px}
.legal ul{list-style:none;margin:0 0 18px}
.legal li{position:relative;padding-left:26px;margin-bottom:9px}
.legal li::before{content:"";position:absolute;left:0;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--orange)}
.legal table{width:100%;border-collapse:collapse;margin:22px 0;font-size:.93rem}
.legal th,.legal td{text-align:left;padding:13px 15px;border-bottom:1px solid var(--border);vertical-align:top}
.legal th{font-family:var(--font-display);font-weight:700;color:var(--black);background:var(--ivory)}
/* De tabel op de juridische pagina's heeft drie kolommen tekst en past op een
   telefoon niet binnen het scherm. Zonder eigen scrollgebied schuift de hele
   pagina zijwaarts mee. Dezelfde tblwrap als bij de artikeltabellen, zodat de
   rand laat zien dat er binnen het kader nog een kolom te halen valt. */
.legal .tblwrap{margin:22px 0}
.legal .tblwrap table{margin:0;min-width:520px}
.updated{color:var(--icon-grey);font-size:.87rem;margin-bottom:30px}
.note{background:var(--orange-tint);border-left:3px solid var(--orange);border-radius:0 14px 14px 0;
  padding:20px 24px;margin:28px 0}
.note p{margin:0;font-size:.94rem;color:var(--dark)}
.note strong{color:var(--black)}

/* ============================================================
   TAALWISSELAAR
   ============================================================ */
/* Vijf talen in plaats van vier: iets krapper zetten zodat de balk niet tegen
   de knoppen aan komt te staan op een laptopscherm. */
/* TAALWISSELAAR
   Vijf codes met schuine strepen ertussen las als een reeks losse knopjes en
   nam veel breedte in de balk. Het is nu een keuzeknop met de huidige taal,
   die een lijst opent met de talen bij hun eigen naam. De knop hangt aan
   dezelfde data-drop-afhandeling als het dienstenmenu, dus Escape sluit hem,
   een klik ernaast ook, en de focus keert terug naar de knop. */
/* Specifieker dan .nav-item, dat bewust op position:static staat omdat het
   brede dienstenmenu zich tegen de balk uitlijnt. Zonder deze regel pakte de
   talenlijst de balk als ankerpunt en klapte hij rechts naast de knop uit,
   tegen de contactknop aan, in plaats van eronder. */
.langsw.nav-item,.langsw{position:relative}
.lang-btn{display:inline-flex;align-items:center;gap:7px;padding:7px 10px;border:1px solid var(--border);
  border-radius:999px;background:none;cursor:pointer;color:var(--body);
  font-family:var(--font-display);font-weight:700;font-size:.82rem;letter-spacing:.06em;
  transition:color .25s ease,border-color .25s ease,background .25s ease}
.lang-btn svg{width:15px;height:15px;opacity:.7}
.lang-btn:hover{color:var(--orange);border-color:var(--orange)}
.lang-btn .caret{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.55;transition:transform .3s ease}
.lang-btn[aria-expanded="true"] .caret{transform:rotate(-135deg) translate(-3px,-3px)}
.lang-btn[aria-expanded="true"]{color:var(--orange);border-color:var(--orange)}

.lang-menu{position:absolute;top:calc(100% + 12px);right:0;z-index:100;min-width:190px;
  display:grid;gap:2px;padding:8px;border-radius:16px;background:var(--white);
  border:1px solid var(--border);box-shadow:var(--shadow-md);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.98);transform-origin:top right;
  transition:opacity .25s ease,transform .25s ease,visibility .25s}
.lang-menu.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.lang-menu a{display:flex;align-items:center;gap:10px;padding:9px 11px;border-radius:10px;
  color:var(--body);font-size:.94rem;transition:color .2s ease,background .2s ease}
.lang-menu a:hover{background:var(--orange-tint);color:var(--black)}
.lang-menu a[aria-current="page"]{color:var(--orange);font-weight:600}
.lang-menu .lcode{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  color:var(--icon-grey);min-width:22px}
.lang-menu a[aria-current="page"] .lcode{color:var(--orange)}

/* de balk wordt donker zodra je scrolt */
.nav.scrolled .lang-btn{color:rgba(255,255,255,.72);border-color:rgba(255,255,255,.2)}
.nav.scrolled .lang-btn:hover,.nav.scrolled .lang-btn[aria-expanded="true"]{color:var(--orange);border-color:var(--orange)}

/* in het mobiele menu is ruimte genoeg: de talen naast elkaar als chips.
   Dat menu is zwart, dus de chips krijgen hier lichte tekst; met de gewone
   tekstkleur stonden ze donkergrijs op zwart en waren ze nauwelijks te lezen. */
.langsw-flat{display:flex;flex-wrap:wrap;gap:8px}
.langsw-flat a{display:inline-flex;align-items:center;gap:7px;padding:9px 13px;border-radius:999px;
  border:1px solid rgba(255,255,255,.2);color:rgba(255,255,255,.82);font-size:.92rem;
  transition:color .25s ease,border-color .25s ease}
.langsw-flat a:hover{color:#fff;border-color:rgba(255,255,255,.45)}
.langsw-flat a[aria-current="page"]{border-color:var(--orange);color:var(--orange)}
.langsw-flat .lcode{font-family:var(--font-display);font-weight:700;font-size:.72rem;letter-spacing:.08em;
  color:rgba(255,255,255,.45)}
.langsw-flat a[aria-current="page"] .lcode{color:var(--orange)}
@media(max-width:920px){ .nav .langsw{display:none} }
@media(prefers-reduced-motion:reduce){ .lang-menu,.lang-btn .caret{transition:none} }

/* in het mobiele menu. De regels voor de oude wisselaar met schuine strepen
   staan hier niet meer: die zetten de tekst op halve dekking, wat op zwart
   nauwelijks te lezen was, en mikten op een <i> dat er niet meer is. */
.mobile-menu .langsw{margin-top:30px;justify-content:center}
.mobile-menu .langsw a{font-family:var(--font-body);font-weight:400;font-size:.95rem}

/* ------------------------------------------------------------
   TAALTIP
   Voor wie via een zoekresultaat op de verkeerde taal binnenkomt. Het is een
   suggestie en geen omleiding: de pagina waar je op klikte blijft staan, en
   wegklikken wordt onthouden. Doorsturen zou hier fout zijn, want een
   zoekmachine crawlt vanuit een ander land dan de lezer.
   ------------------------------------------------------------ */
.langtip{position:fixed;left:50%;transform:translateX(-50%) translateY(140%);
  bottom:18px;z-index:120;display:flex;align-items:center;gap:14px;
  max-width:min(560px,calc(100vw - 32px));padding:12px 14px 12px 18px;
  border-radius:14px;background:var(--black);color:#fff;
  box-shadow:0 18px 46px rgba(0,0,0,.3);font-size:.93rem;line-height:1.4;
  transition:transform .45s cubic-bezier(.22,1,.36,1)}
.langtip.show{transform:translateX(-50%) translateY(0)}
.langtip p{margin:0;color:rgba(255,255,255,.82)}
.langtip a{color:#fff;font-weight:700;border-bottom:1px solid var(--orange);
  white-space:nowrap}
.langtip a:hover{color:var(--orange)}
.langtip button{flex:none;width:30px;height:30px;border:0;border-radius:8px;
  background:rgba(255,255,255,.1);color:#fff;font-size:1.05rem;line-height:1;
  cursor:pointer;transition:background .25s ease}
.langtip button:hover{background:rgba(255,255,255,.2)}
@media(max-width:520px){ .langtip{gap:10px;padding:12px;font-size:.88rem} }
@media(prefers-reduced-motion:reduce){ .langtip{transition:none} }

/* ============================================================
   TAALKEUZE OP DE HOOFDMAP
   ============================================================ */
/* Zodra de voordeur begint door te sturen verdwijnt de taalkeuze uit beeld,
   zodat niemand hem ziet oplichten en weer weggaan. Stond eerder als inline
   stijl in index.html; inline hoeft nu niet meer van het beveiligingsbeleid. */
html.routing .pick{visibility:hidden}
.pick{min-height:100svh;display:flex;align-items:center;justify-content:center;
  background:var(--black);text-align:center;padding:40px 24px;position:relative;overflow:hidden}
.pick .glow{position:absolute;width:70vw;height:70vw;max-width:820px;max-height:820px;
  left:50%;top:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(240,126,16,.3),transparent 62%);filter:blur(40px)}
.pick-inner{position:relative;z-index:2;max-width:520px}
.pick img{height:70px;width:auto;margin:0 auto 34px}
.pick h1{color:#fff;font-size:clamp(1.7rem,4vw,2.6rem);margin-bottom:14px}
.pick p{color:rgba(255,255,255,.65);margin-bottom:36px}
.pick-links{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* ============================================================
   NAV-DROPDOWN (Diensten)
   Opent op KLIK, niet op hover: hover bestaat niet op touch en is
   met een toetsenbord onbereikbaar. De JS zet aria-expanded en
   Escape sluit het paneel weer.
   ============================================================ */
/* Bewust static: het megamenu hangt daardoor onder .nav-wrap (fixed, schermbreed)
   in plaats van onder de knop. Op 921px, waar het menu net verschijnt, valt een
   paneel dat op de knop gecentreerd staat rechts buiten beeld. */
.nav-item{position:static;display:flex;align-items:center}
.nav-drop-btn{font-family:var(--font-body);background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px}
.caret{width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:translateY(-2px) rotate(45deg);transition:transform .3s ease}
[aria-expanded="true"] .caret{transform:translateY(1px) rotate(-135deg)}

/* Het paneel zelf. Dekkend, niet doorschijnend zoals de nav-pil: tekst
   eronder mag niet doorschemeren. */
.nav-mega{
  position:absolute;top:calc(100% + 14px);left:50%;
  transform:translateX(-50%) translateY(-10px) scale(.985);
  transform-origin:top center;
  width:min(960px,94vw);
  display:grid;grid-template-columns:1.15fr .85fr;
  grid-template-areas:"list preview" "foot foot";
  overflow:hidden;border-radius:26px;
  background:var(--white);
  border:1px solid rgba(15,15,15,.07);
  box-shadow:0 40px 90px -40px rgba(15,15,15,.45);
  opacity:0;visibility:hidden;
  transition:opacity .3s ease,transform .38s cubic-bezier(.2,.8,.2,1),visibility .38s}
.nav-mega.open{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0) scale(1)}

/* links: de negen diensten, elk met het icoon van zijn eigen dienstpagina */
.mega-list{grid-area:list;display:grid;grid-template-columns:1fr 1fr;gap:2px;padding:16px}
.mega-item{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:14px;
  transition:background .22s ease}
.mega-item:hover,.mega-item:focus-visible{background:var(--orange-tint);outline:0}
.mega-ico{width:34px;height:34px;flex:none;display:grid;place-items:center;border-radius:11px;
  background:rgba(15,15,15,.05);color:var(--dark);
  transition:background .22s ease,color .22s ease}
.mega-ico svg{width:17px;height:17px}
.mega-item:hover .mega-ico,.mega-item:focus-visible .mega-ico{background:var(--orange);color:#fff}
.mega-name{display:block;font-family:var(--font-display);font-weight:700;font-size:.89rem;
  color:var(--dark);line-height:1.2}
.mega-kick{display:block;font-size:.72rem;color:var(--grey);margin-top:3px;line-height:1.3}

/* rechts: donker voorbeeldvlak dat meeloopt met de rij waar je op staat */
.mega-preview{grid-area:preview;position:relative;display:flex;flex-direction:column;
  background:var(--black);color:#fff}
.mega-shot{width:100%;aspect-ratio:16/10;object-fit:cover;display:block;opacity:.9}
.mega-body{display:flex;flex-direction:column;gap:7px;padding:15px 20px 17px;flex:1}
.mega-title{font-family:var(--font-display);font-weight:800;font-size:1rem;color:#fff;
  letter-spacing:-.01em}
.mega-desc{font-size:.8rem;line-height:1.6;color:rgba(255,255,255,.62);
  display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.mega-go{margin-top:auto;padding-top:6px;color:var(--orange);font-family:var(--font-display);
  font-weight:700;font-size:.84rem;display:inline-flex;align-items:center;gap:7px}
.mega-go:hover{color:var(--orange-hover)}

/* onderrand: waar het werk vandaan komt, in dezelfde volgorde als de kantorenbalk */
/* Het Spaanse en Franse dienstenmenu heeft geen voorbeeldpaneel: die talen
   hebben geen aparte beeldset en een leeg paneel is erger dan geen paneel.
   Twee kolommen links, voettekst eronder, verder identiek. */
.nav-mega.nav-plain{grid-template-columns:1fr;grid-template-areas:"list" "foot";
  width:min(620px,94vw)}
.nav-plain .mega-list{grid-template-columns:1fr 1fr;padding:14px}
.nav-plain .mega-list a{display:block;padding:10px 12px;border-radius:14px;
  font-size:.94rem;font-weight:600;color:var(--dark);transition:background .22s ease,color .22s ease}
.nav-plain .mega-list a:hover,.nav-plain .mega-list a:focus-visible{
  background:var(--orange-tint);color:var(--orange);outline:0}
.nav-plain .mega-list a[aria-current="page"]{color:var(--orange)}
@media(max-width:560px){.nav-plain .mega-list{grid-template-columns:1fr}}

.mega-foot{grid-area:foot;display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;
  padding:11px 20px;border-top:1px solid var(--border);background:rgba(15,15,15,.02)}
.mega-live{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-display);
  font-weight:700;font-size:.69rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dark)}
.mega-live i{width:7px;height:7px;border-radius:50%;background:var(--orange);
  animation:megapulse 2.4s ease-in-out infinite}
@keyframes megapulse{0%,100%{opacity:.3;transform:scale(.75)}50%{opacity:1;transform:scale(1)}}
.mega-countries{font-size:.74rem;color:var(--grey)}
.mega-all{margin-left:auto;font-family:var(--font-display);font-weight:700;font-size:.79rem;
  color:var(--orange);display:inline-flex;align-items:center;gap:6px}
.mega-all:hover{color:var(--orange-hover)}

/* dropdown in het mobiele overlay-menu */
.m-item{display:flex;flex-direction:column}
.m-drop-btn{font-family:var(--font-display);font-weight:700;font-size:clamp(1.7rem,7vw,2.4rem);
  letter-spacing:-.02em;color:#fff;background:none;border:0;cursor:pointer;width:100%;
  padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);
  display:flex;align-items:center;justify-content:space-between;transition:color .3s ease}
.m-drop-btn:hover,.m-drop-btn:focus-visible{color:var(--orange)}
.m-drop-btn .caret{width:12px;height:12px;border-width:3px}
.m-drop{display:grid;max-height:0;overflow:hidden;
  transition:max-height .45s cubic-bezier(.2,.8,.2,1)}
.m-drop.open{max-height:620px}
.mobile-menu .m-drop a{font-family:var(--font-body);font-weight:600;font-size:1rem;
  color:rgba(255,255,255,.7);padding:11px 0 11px 20px;border-bottom:0}
.mobile-menu .m-drop a:first-child{padding-top:18px;color:var(--orange)}
.mobile-menu .m-drop a:last-child{padding-bottom:20px;border-bottom:1px solid rgba(255,255,255,.1)}
.mobile-menu .m-drop a:hover,.mobile-menu .m-drop a:focus-visible{color:var(--orange)}

/* Uitgeklapt menu kan langer worden dan het scherm. "safe" laat de uitlijning
   terugvallen op start zodra dat gebeurt, zodat de bovenkant bereikbaar blijft. */
.mobile-menu{overflow-y:auto;justify-content:safe center}

/* ============================================================
   FORMULIER (contactpagina)
   ============================================================ */
.form{display:grid;gap:20px;margin-top:28px}
.field{display:grid;gap:9px}
.field label{font-family:var(--font-display);font-weight:700;font-size:.88rem;
  letter-spacing:-.01em;color:var(--black)}
.field label .opt{font-weight:500;color:var(--grey);text-transform:none;letter-spacing:0}
.field input,.field select,.field textarea{
  font-family:var(--font-body);font-size:1rem;color:var(--body);line-height:1.5;
  width:100%;padding:14px 17px;background:var(--white);
  border:1px solid var(--border);border-radius:14px;
  transition:border-color .25s ease,box-shadow .25s ease}
.field input:hover,.field select:hover,.field textarea:hover{border-color:var(--icon-grey)}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:0;border-color:var(--orange);box-shadow:0 0 0 4px rgba(240,126,16,.15)}
.field textarea{resize:vertical;min-height:158px}
/* Spamval in de formulieren: voor mensen weg, voor bots zichtbaar genoeg om
   in te vullen. Vult iemand hem in, dan gooit Formspree de inzending weg. */
.hp{display:none}
.field select{cursor:pointer;padding-right:46px;appearance:none;-webkit-appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--body) 50%),
                   linear-gradient(135deg,var(--body) 50%,transparent 50%);
  background-position:calc(100% - 23px) calc(50% + 1px),calc(100% - 18px) calc(50% + 1px);
  background-size:6px 6px,6px 6px;background-repeat:no-repeat}
.field ::placeholder{color:var(--icon-grey)}
.form .btn{justify-self:start}

/* link naar de sectorenhub onder de accordeon op de homepage */
.sectors .cta-row{margin-top:clamp(36px,4vw,56px)}

/* ============================================================
   TOEGANKELIJKHEID - sla de navigatie over met de eerste tab
   ============================================================ */
.skip{position:fixed;left:16px;top:-120px;z-index:300;
  font-family:var(--font-body);font-size:.95rem;font-weight:700;
  padding:13px 22px;border-radius:0 0 14px 14px;
  background:var(--black);color:var(--white);text-decoration:none;
  box-shadow:var(--shadow-md);transition:top .22s ease}
.skip:focus{top:0;outline:3px solid var(--orange);outline-offset:-3px}
main:focus{outline:0}
main{scroll-margin-top:96px}

/* secundaire linkrij op de 404-pagina */
.pick-sub{margin-top:30px;gap:8px 24px}
.pick-sub a{font-family:var(--font-body);font-size:.93rem;font-weight:600;
  color:rgba(255,255,255,.6);text-decoration:none;transition:color .2s ease}
.pick-sub a:hover,.pick-sub a:focus-visible{color:var(--orange)}

/* ============================================================
   TOETSENBORD, AANRAKING EN BEWEGING
   Toegevoegd bij de kwaliteitsronde. Verandert niets aan het ontwerp,
   maakt af wat er nog niet was.
   ============================================================ */

/* Zichtbare focus op alles wat je met Tab kunt bereiken. Stond eerder op een
   handvol elementen, waardoor je met een toetsenbord halverwege de pagina niet
   meer kon zien waar je was. Specifiekere regels hierboven (.card, .nav-drop a)
   houden bewust hun eigen focusstijl. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
  outline:3px solid var(--orange);outline-offset:3px;border-radius:6px}
.btn:focus-visible,.nav-cta:focus-visible,.m-cta:focus-visible{
  outline-offset:4px;border-radius:999px}
.slice:focus-visible{outline:3px solid var(--orange);outline-offset:4px;border-radius:22px}

/* Indrukken mag je voelen. Er was alleen hover, dus op touch gebeurde er niets
   tussen aanraken en de volgende pagina. */
.btn:active,.nav-cta:active,.mobile-menu .m-cta:active{transform:translateY(0) scale(.97)}
.card:active{transform:translateY(-4px) scale(.995)}
.step:active{transform:translateY(-2px)}
.foot-col a:active,.nav-link:active,.crumb a:active{opacity:.7}

/* Huidige pagina aanwijzen in de navigatie. Over 46 pagina's gaf niets aan
   waar je zat, ook niet in de dienstendropdown. */
.nav-link[aria-current="page"],.nav-drop-btn[data-current]{color:var(--orange)}
.nav.scrolled .nav-link[aria-current="page"],
.nav.scrolled .nav-drop-btn[data-current]{color:var(--orange)}
.nav-link[aria-current="page"]::after,.nav-drop-btn[data-current]::after{
  content:"";position:absolute;left:0;right:0;bottom:-8px;height:2px;
  background:var(--orange);border-radius:2px}
.mega-item[aria-current="page"]{background:var(--orange-tint)}
.mega-item[aria-current="page"] .mega-name{color:var(--orange)}
.mega-item[aria-current="page"] .mega-ico{background:var(--orange);color:#fff}
.mobile-menu>a[aria-current="page"],.m-drop-btn[data-current]{color:var(--orange)}
.mobile-menu .m-drop a[aria-current="page"]{color:var(--orange)}
.foot-col a[aria-current="page"]{color:var(--orange)}

/* Cijfers in een proportioneel font springen zijwaarts terwijl de teller loopt.
   Tabellarische cijfers houden elke positie even breed. */
.stat .num,[data-count]{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}

/* Losse woorden op een eigen laatste regel. balance verdeelt koppen over de
   regels, pretty voorkomt een weesregel onder een alinea. */
h1,h2,h3,h4,.card h3,.sec-head h2{text-wrap:balance;overflow-wrap:break-word}
/* Nederlandse samenstellingen als Verwerkingsverantwoordelijke of
   Arbeidsvoorwaarden passen op een telefoon niet op een regel en duwden de
   hele pagina zijwaarts. break-word grijpt alleen in als een woord echt niet
   past, dus koppen die nu al passen veranderen niet. */
p,li,.lead,.sec-head p{text-wrap:pretty}

/* Formuliervelden pas rood-oranje na een echte poging, niet al bij het openen. */
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid{
  border-color:var(--orange-hover);box-shadow:0 0 0 4px rgba(240,126,16,.16)}

/* Wie beweging uitzet, krijgt een stilstaande site. De JavaScript-kant regelde
   alleen GSAP; de marquee, de scrollpuls en alle overgangen liepen gewoon door.
   Een eindeloos schuivende balk is nou juist waar mensen last van hebben. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
  .marquee-track{animation:none;transform:none}
  /* Staat de balk stil, dan heeft een rij van zes dezelfde reeksen geen functie:
     de kopieen eruit en de vier certificaten gewoon gecentreerd terug. */
  .certs-marquee{overflow:visible;-webkit-mask:none;mask:none}
  .certs-marquee .marquee-track{flex-wrap:wrap;justify-content:center;padding-right:0}
  .certs-marquee [aria-hidden="true"]{display:none}
  .brand-marquee{overflow:visible;-webkit-mask:none;mask:none}
  .brand-marquee .marquee-track{flex-wrap:wrap;justify-content:center;padding-right:0}
  .brand-marquee [aria-hidden="true"]{display:none}
  .tech-marquee{overflow:visible;-webkit-mask:none;mask:none}
  .tech-marquee .marquee-track{flex-wrap:wrap;justify-content:center;padding-right:0}
  .tech-marquee [aria-hidden="true"]{display:none}
  .hero-scroll .line{animation:none;opacity:.5;transform:none}
  .card:hover,.step:hover,.btn:hover,.nav-cta:hover{transform:none}
}