/* Zelf gehoste lettertypen: geen verbinding met Google Fonts nodig voordat
   de pagina kan tekenen. Latijnse subset, variabele breedte- en gewichtas. */
@font-face{
  font-family:Archivo;src:url("/archivo-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:62% 125%;font-style:normal;font-display:swap;
}
@font-face{
  font-family:Roboto;src:url("/roboto-var.woff2") format("woff2");
  font-weight:100 900;font-stretch:75% 100%;font-style:normal;font-display:swap;
}

/* ===================================================================
   Dionar — shared stylesheet
   Palette: navy surfaces with one bright blue accent, after the design
   examples. No orange.
   Type: Archivo variable (width axis 75–125) for headings, UI and running
   text; Roboto for the hero and page headings. The width axis is used as a
   design device: condensed for small lines, expanded for headlines.
   =================================================================== */

:root{
  --navy-deep:#0A1A2B;
  --navy:#102A42;
  --blue:#154580;
  --blue-mid:#2C5C9E;
  --blue-pale:#E4EAF5;
  --paper:#FFFFFF;
  --paper-soft:#F6F8FB;
  --sky:#EFF3F8;
  --blue-bright:#1A6FD4;
  --text:#233049;
  --text-soft:#55627B;
  /* Accent from the design examples: one bright blue, no orange. */
  --accent:#2E7FE8;
  --accent-soft:#5AA0F5;
  --accent-ink:#1B62C4;

  /* Support colours. Used to tell sections and topics apart; never on
     buttons or links, so the blue accent keeps its meaning as "this is an
     action". */
  --teal:#0F7F8C;
  --indigo:#4A52A6;
  --green:#2E7D5B;
  --teal-pale:#E2F1F3;
  --indigo-pale:#EAEBF7;
  --green-pale:#E4F0EA;

  /* Rounding scale: pills for actions, soft corners for surfaces. */
  --r-pill:999px;
  --r-card:24px;
  --r-sm:14px;

  --grad-accent:linear-gradient(180deg,#3A88EC 0%,#2E7FE8 55%,#2470D6 100%);
  --grad-navy:linear-gradient(160deg,#12304C 0%,#0A1A2B 60%,#060F1A 100%);
  --grad-surface:linear-gradient(180deg,#FFFFFF 0%,#F2F6FC 100%);
  --shadow-soft:0 20px 45px -30px rgba(10,34,73,.45);

  --measure:34rem;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;
  background:var(--paper);
  color:var(--text);
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 100;
  font-size:1.03rem;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}
p{margin:0 0 1rem}
a{color:var(--blue)}
.wrap{width:min(100% - 2.5rem,68rem);margin-inline:auto}
.measure{max-width:var(--measure)}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Font Awesome Free 7.3, uitgesneden tot de 39 iconen die deze
   site gebruikt. Zelf gehost: geen externe CDN, dus geen extra verbinding
   voordat de pagina kan tekenen. */
@font-face{font-family:"fa-solid";font-style:normal;font-weight:900;font-display:swap;src:url("/icons-solid.woff2") format("woff2")}
@font-face{font-family:"fa-brands";font-style:normal;font-weight:400;font-display:swap;src:url("/icons-brands.woff2") format("woff2")}
.fa-solid,.fa-brands{-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:var(--fa-display,inline-block);font-style:normal;font-variant:normal;line-height:1;text-rendering:auto}
.fa-solid{font-family:"fa-solid";font-weight:900}
.fa-brands{font-family:"fa-brands";font-weight:400}
.fa-arrow-right::before{content:"\f061"}
.fa-arrow-up-right-from-square::before{content:"\f08e"}
.fa-bars::before{content:"\f0c9"}
.fa-boxes-stacked::before{content:"\f468"}
.fa-building::before{content:"\f1ad"}
.fa-cart-shopping::before{content:"\f07a"}
.fa-check::before{content:"\f00c"}
.fa-circle-check::before{content:"\f058"}
.fa-clipboard-check::before{content:"\f46c"}
.fa-clock-rotate-left::before{content:"\f1da"}
.fa-comments::before{content:"\f086"}
.fa-cubes::before{content:"\f1b3"}
.fa-desktop::before{content:"\f390"}
.fa-diagram-project::before{content:"\f542"}
.fa-download::before{content:"\f019"}
.fa-envelope::before{content:"\f0e0"}
.fa-graduation-cap::before{content:"\f19d"}
.fa-handshake::before{content:"\f2b5"}
.fa-hard-drive::before{content:"\f0a0"}
.fa-headset::before{content:"\f590"}
.fa-house::before{content:"\f015"}
.fa-industry::before{content:"\f275"}
.fa-landmark::before{content:"\f66f"}
.fa-laptop::before{content:"\f109"}
.fa-location-dot::before{content:"\f3c5"}
.fa-microchip::before{content:"\f2db"}
.fa-network-wired::before{content:"\f6ff"}
.fa-phone::before{content:"\f095"}
.fa-phone-volume::before{content:"\f2a0"}
.fa-plane-up::before{content:"\e22d"}
.fa-shield-halved::before{content:"\f3ed"}
.fa-sitemap::before{content:"\f0e8"}
.fa-suitcase-medical::before{content:"\f0fa"}
.fa-tower-broadcast::before{content:"\f519"}
.fa-truck::before{content:"\f0d1"}
.fa-user-lock::before{content:"\f502"}
.fa-users::before{content:"\f0c0"}
.fa-facebook-f::before{content:"\f39e"}
.fa-linkedin-in::before{content:"\f0e1"}

/* --- Typography ---------------------------------------------------- */
h1,h2,h3,h4,.ui{
  font-family:Archivo,"Helvetica Neue",Arial,sans-serif;
  font-variation-settings:"wdth" 108;
  color:var(--navy-deep);
  margin:0;line-height:1.08;font-weight:700;letter-spacing:-.03em;
}
.micro{
  font-family:Archivo,sans-serif;font-weight:600;font-size:.74rem;
  font-variation-settings:"wdth" 92;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent);margin:0 0 .9rem;
}
.on-dark .micro,.settled .micro{color:var(--accent-soft)}

/* --- Header ---------------------------------------------------------------
   Sits flat and transparent on top of the dark hero, and turns into a
   floating white pill once the page is scrolled (class added by site.js).
   -------------------------------------------------------------------------- */
.site-head{
  position:fixed;top:0;left:0;right:0;z-index:30;
  padding:.35rem 0;transition:padding .25s ease;
}
.site-head .wrap{
  display:flex;align-items:center;gap:1.25rem;min-height:72px;flex-wrap:wrap;
  padding-inline:1rem;border-radius:var(--r-pill);
  background:transparent;box-shadow:none;
  transition:background .25s ease,box-shadow .25s ease,padding .25s ease,width .25s ease;
}
.site-head.floating{padding:.7rem 0}
.site-head.floating .wrap{
  /* Wider than the content column, and translucent so the page shows
     through; the blur keeps the links readable over busy photos. */
  width:min(100% - 1.75rem,82rem);
  background:rgba(255,255,255,.78);
  box-shadow:0 10px 30px -18px rgba(10,34,73,.5);
  backdrop-filter:saturate(1.5) blur(14px);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  padding-inline:1.6rem;
}
/* Browsers without backdrop-filter get a more solid bar instead. */
@supports not (backdrop-filter:blur(4px)){
  .site-head.floating .wrap{background:rgba(255,255,255,.95)}
}
.logo{display:inline-flex}
.logo img{display:block;height:46px;width:auto}
@media (max-width:860px){.logo img{height:38px}}
.nav{margin-left:auto;display:flex;gap:1.4rem;flex-wrap:wrap;align-items:center}
.nav a{
  font-family:Archivo,sans-serif;font-size:.95rem;font-weight:500;
  font-variation-settings:"wdth" 96;
  color:#fff;text-decoration:none;padding:.35rem .1rem;position:relative;
  transition:color .25s ease;
}
.site-head.floating .nav a{color:var(--text)}
.nav a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  border-radius:2px;background:var(--accent);transition:right .25s ease;
}
.nav a:hover::after,.nav a:focus-visible::after,.nav a.active::after{right:0}
.nav a.active{font-weight:600}
.site-head.floating .nav a.active{color:var(--navy-deep)}
.nav a.active::after{background:var(--accent)}
.site-head.floating .nav a.active::after{background:var(--blue)}
.nav a.btn,
.site-head.floating .nav a.btn{color:#fff;font-size:.92rem;padding:.6rem 1.15rem}
.nav a.btn::after{display:none}

/* --- Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;gap:.5rem;
  font-family:Archivo,sans-serif;font-weight:600;font-size:1rem;
  font-variation-settings:"wdth" 100;
  text-decoration:none;padding:.85rem 1.7rem;border:0;cursor:pointer;
  border-radius:var(--r-pill);
  background:var(--accent);
  color:#fff;
  transition:transform .18s ease,background .18s ease;
}
.btn:hover,.btn:focus-visible{
  transform:translateY(-2px);
  background:var(--accent-ink);
}
.btn:active{transform:translateY(0)}
.btn-ghost{
  background-image:none;background-color:rgba(255,255,255,.07);
  color:#fff;box-shadow:none;
  border:1.5px solid rgba(255,255,255,.4);
  backdrop-filter:blur(4px);
}
.btn-ghost:hover,.btn-ghost:focus-visible{
  background-color:rgba(255,255,255,.17);border-color:#fff;box-shadow:none;
}
.btn-line{
  background-image:none;background-color:transparent;color:var(--navy-deep);
  border:1.5px solid rgba(21,69,128,.45);box-shadow:none;
}
.btn-line:hover,.btn-line:focus-visible{background-color:rgba(21,69,128,.07);border-color:var(--blue);box-shadow:none}

/* --- Hero -----------------------------------------------------------
   Two overlapping ellipses echo the oval in the logo.
   -------------------------------------------------------------------- */
/* The photo lives in ::after and the blue overlay in ::before, so the photo
   can blur on scroll while overlay and text stay sharp. */
.hero{
  position:relative;overflow:hidden;isolation:isolate;
  color:#C3D2EA;padding:8.5rem 0 4.5rem;
  background-color:var(--navy-deep);
  --photo:image-set(url("hero-noc.avif") type("image/avif"),url("hero-noc.webp") type("image/webp"),url("hero-noc.jpg") type("image/jpeg"));
}
.hero::after,.page-head-photo::after{
  content:"";position:absolute;inset:-3%;z-index:-2;
  background-image:var(--photo);
  background-repeat:no-repeat;background-size:cover;background-position:center right;
  transform:scale(1.03);
  filter:blur(calc(var(--scroll,0) * 9px));
  will-change:filter;
}
.hero::after{background-position:center center}
.hero::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(0,0,0,.80) 0%,rgba(0,0,0,.70) 34%,rgba(0,0,0,.28) 62%,rgba(0,0,0,0) 82%);
}

.hero .wrap{position:relative}
/* site.js writes --scroll (0 to 1) while the hero is in view. */
.hero-inner{
  transform:translateY(calc(var(--scroll,0) * 5rem));
  opacity:calc(1 - var(--scroll,0) * .85);
  will-change:transform,opacity;
}
@media (prefers-reduced-motion:reduce){
  .hero-inner{transform:none;opacity:1}
  .hero::after,.page-head-photo::after{filter:none}
}
.hero h1{margin-bottom:1.5rem}
/* Hero headings are set in Roboto. Its width axis tops out at 100, so the
   contrast between the two lines comes from width 78 vs 100 plus weight. */
.hero h1 .l1{
  display:block;color:#B8CBE8;font-family:Roboto,Arial,sans-serif;font-weight:600;
  text-shadow:0 1px 14px rgba(6,22,48,.7);
  font-size:clamp(1.1rem,2.4vw,1.6rem);font-variation-settings:"wdth" 78;
  letter-spacing:.02em;margin-bottom:.45rem;
}
.hero h1 .l2{
  display:block;color:#fff;font-family:Roboto,Arial,sans-serif;font-weight:900;
  font-size:clamp(3rem,8.8vw,5.8rem);
  font-variation-settings:"wdth" 100;letter-spacing:-.035em;line-height:.96;
  text-shadow:0 2px 24px rgba(6,22,48,.5);
}
.hero p{font-size:1.15rem;max-width:30rem;text-shadow:0 1px 14px rgba(6,22,48,.75)}
.hero-cta{margin-top:2.25rem;display:flex;gap:1rem;flex-wrap:wrap;align-items:center}
.hero-motto{display:none;
  margin-top:4.25rem;display:flex;flex-wrap:wrap;align-items:baseline;row-gap:.35rem;
  border-top:1px solid rgba(255,255,255,.16);padding:1.35rem 0 2.75rem;
}
.hero-motto span{
  font-family:Archivo,sans-serif;font-weight:700;text-shadow:0 1px 14px rgba(6,22,48,.75);
  font-size:clamp(1.05rem,2.1vw,1.4rem);font-variation-settings:"wdth" 114;
  letter-spacing:-.02em;color:#DCE6F7;
  padding-right:1.5rem;margin-right:1.5rem;border-right:1px solid rgba(255,255,255,.2);
}
.hero-motto span:last-child{
  border-right:0;padding-right:0;margin-right:0;
  background-image:linear-gradient(100deg,#FFC48A 0%,#E9781E 72%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* --- Page header (subpages) ------------------------------------------ */
.page-head{position:relative;overflow:hidden;background:var(--grad-navy);color:#AFC2E0;padding:8rem 0 4.5rem}
.page-head::before{
  content:"";position:absolute;inset:auto -15% -60% 40%;height:120%;
  background:radial-gradient(45% 50% at 50% 50%,rgba(80,132,220,.35),rgba(10,34,73,0) 70%);
}
.page-head .wrap{position:relative}
.page-head h1{
  color:#fff;font-family:Roboto,Arial,sans-serif;font-weight:900;
  font-size:clamp(2.3rem,5.8vw,3.9rem);max-width:18ch;margin-bottom:1rem;
  font-variation-settings:"wdth" 100;letter-spacing:-.035em;
}
.page-head p{font-size:1.12rem;max-width:36rem;margin:0}

/* Photo variant of the page header. The overlay is shared; each page
   supplies its own image through --photo, so adding one is a single rule. */
.page-head-photo{
  position:relative;overflow:hidden;isolation:isolate;
  background-color:var(--navy-deep);
  padding:9rem 0 5.5rem;
}
.page-head-photo::before{
  content:"";display:block;position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,rgba(8,29,62,.96) 0%,rgba(10,34,73,.90) 40%,rgba(14,48,95,.74) 70%,rgba(16,54,105,.60) 100%);
}
.ph-beveiliging{--photo:image-set(url("hero-werkplek.avif") type("image/avif"),url("hero-werkplek.webp") type("image/webp"),url("hero-werkplek.jpg") type("image/jpeg"))}
.ph-beveiliging::after{background-position:center right}
.ph-support{--photo:image-set(url("/hero-werkplek.avif") type("image/avif"),url("/hero-werkplek.webp") type("image/webp"),url("/hero-werkplek.jpg") type("image/jpeg"))}
.ph-support::after{background-position:center}
.ph-branches{--photo:image-set(url("luchtvaart.avif") type("image/avif"),url("luchtvaart.webp") type("image/webp"),url("luchtvaart.jpg") type("image/jpeg"))}
.ph-branches::after{background-position:center right}
.ph-over{--photo:image-set(url("hero-noc.avif") type("image/avif"),url("hero-noc.webp") type("image/webp"),url("hero-noc.jpg") type("image/jpeg"))}
.ph-over::after{background-position:right 45%}
.ph-contact{--photo:image-set(url("hero-pand.avif") type("image/avif"),url("hero-pand.webp") type("image/webp"),url("hero-pand.jpg") type("image/jpeg"))}
.ph-contact::after{background-position:right 62%}
.ph-diensten{--photo:image-set(url("hero-kantoor.avif") type("image/avif"),url("hero-kantoor.webp") type("image/webp"),url("hero-kantoor.jpg") type("image/jpeg"))}
.ph-diensten::after{background-position:center right}

/* --- Sections --------------------------------------------------------- */
section{padding:5.5rem 0}
.tinted{background:var(--sky)}
.section-title{font-size:clamp(1.9rem,3.6vw,2.6rem);max-width:20ch;font-variation-settings:"wdth" 114}
.section-intro{margin-top:1rem;max-width:var(--measure);color:var(--text-soft)}
.close-line{
  font-family:Archivo,sans-serif;font-weight:600;color:var(--accent-ink);
  font-variation-settings:"wdth" 96;
}

/* --- Tiles (home only, so deeper pages keep another rhythm) ----------- */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2.5rem}
@media (max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.tiles{grid-template-columns:1fr}}
.tile{
  position:relative;overflow:hidden;
  background:#fff;
  border:1px solid #DFE8F5;
  border-radius:var(--r-card);
  padding:1.9rem 1.7rem 1.7rem;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.tile:nth-child(4n+1){--accent:var(--blue)}
.tile:nth-child(4n+2){--accent:var(--teal)}
.tile:nth-child(4n+3){--accent:var(--indigo)}
.tile:nth-child(4n+4){--accent:var(--green)}
.tile h3{color:var(--accent,var(--navy-deep))}
.tile:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:#D3DEF0}
.tile h3{font-size:1.2rem;margin-bottom:.4rem;font-variation-settings:"wdth" 104}
.tile p{margin:0;color:var(--text-soft);font-size:1rem}
.tile-more{
  display:inline-block;margin-top:1rem;font-weight:600;font-size:.95rem;
  color:var(--blue-bright);text-decoration:none;
  border-bottom:2px solid var(--accent);padding-bottom:2px;
}
.tile-more:hover,.tile-more:focus-visible{color:var(--accent-ink)}
.tiles-note{margin:2rem 0 0;color:var(--text-soft)}
.tiles-note a{color:var(--blue-bright)}

/* --- Detail blocks (subpages) ----------------------------------------- */
.blocks{margin-top:2.5rem}
/* Keep anchor jumps clear of the fixed header. */
.block[id],section[id]{scroll-margin-top:7.5rem}
.block{
  display:grid;grid-template-columns:17rem minmax(0,1fr);gap:1rem 3rem;
  padding:2.4rem 0 2.2rem;position:relative;
}
.block + .block{border-top:1px solid var(--blue-pale)}
.block::before{
  content:"";position:absolute;top:2.4rem;left:-1.25rem;width:4px;height:1.9rem;
  border-radius:4px;background:var(--accent,var(--blue));
}
@media (max-width:820px){.block::before{left:-.85rem}}
.block:nth-of-type(4n+1){--accent:var(--blue)}
.block:nth-of-type(4n+2){--accent:var(--teal)}
.block:nth-of-type(4n+3){--accent:var(--indigo)}
.block:nth-of-type(4n+4){--accent:var(--green)}
.block .sub{color:var(--accent,var(--blue-mid))}
@media (max-width:820px){.block{grid-template-columns:1fr;gap:.5rem}}
.block h2{font-size:1.7rem;font-variation-settings:"wdth" 112}
.block .icon{margin-bottom:.7rem}
.block .sub{
  font-family:Archivo,sans-serif;font-weight:600;
  font-variation-settings:"wdth" 88;margin:.55rem 0 0;
}
.block ul{margin:0 0 1rem;padding-left:1.1rem}
.block li{margin-bottom:.3rem}
.block p:last-child{margin-bottom:0}

/* --- "Geregeld" block: the one loud moment ---------------------------- */
.settled{position:relative;overflow:hidden;background:var(--paper);color:var(--text)}
.settled::before{
  content:"";position:absolute;inset:-20% -10% auto auto;width:60%;height:140%;
  background:radial-gradient(40% 45% at 70% 40%,rgba(26,111,212,.07),rgba(255,255,255,0) 70%);
}
.settled .wrap{position:relative}
.settled h2{
  color:var(--navy-deep);font-size:clamp(1.9rem,3.8vw,2.7rem);margin-bottom:2.5rem;max-width:22ch;
  font-variation-settings:"wdth" 116;
}
.cases{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
@media (max-width:860px){.cases{grid-template-columns:1fr}}
.case{
  padding:1.8rem 1.6rem;border-radius:var(--r-card);
  background:var(--sky);
  border:1px solid #DCE7F6;
}
.case h3{color:var(--navy-deep);font-size:1.25rem;margin-bottom:.35rem;font-variation-settings:"wdth" 100}
.case p{margin:0;color:var(--text-soft);font-size:1rem}
/* --- Reasons ----------------------------------------------------------- */
.why-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:2rem 3.5rem;margin-top:2.5rem}
@media (max-width:800px){.why-grid{grid-template-columns:1fr}}
.why{padding-left:1.25rem;border-left:3px solid var(--accent,var(--blue));border-radius:2px}
.why:nth-child(4n+1){--accent:var(--blue)}
.why:nth-child(4n+2){--accent:var(--teal)}
.why:nth-child(4n+3){--accent:var(--indigo)}
.why:nth-child(4n+4){--accent:var(--green)}
.why h3{font-size:1.15rem;margin-bottom:.4rem;font-variation-settings:"wdth" 100}
.why p{margin:0;color:var(--text-soft)}

/* --- Oversized figure --------------------------------------------------- */
.figure-row{display:flex;align-items:center;gap:2rem;flex-wrap:wrap;margin-top:.5rem}
.figure{
  font-family:Archivo,sans-serif;font-weight:700;line-height:.8;
  font-size:clamp(4.5rem,13vw,9rem);font-variation-settings:"wdth" 125;letter-spacing:-.05em;
  background-image:linear-gradient(150deg,#2C5C9E 0%,#0A2249 60%);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.figure-note{max-width:24rem;color:var(--text-soft);margin:0}

/* --- Partner slider -------------------------------------------------------
   The logo set is repeated once and the track shifts by exactly half its
   width, so the loop has no visible seam. Pauses on hover and stands still
   for visitors who ask for reduced motion.
   -------------------------------------------------------------------------- */
.partners{background:var(--paper-soft);border-block:1px solid var(--blue-pale);padding:3rem 0}
.partner-slider{
  margin-top:1.5rem;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6rem,#000 calc(100% - 6rem),transparent);
}
.partner-track{display:flex;width:max-content;animation:partner-scroll 32s linear infinite}
.partner-slider:hover .partner-track,
.partner-slider:focus-within .partner-track{animation-play-state:paused}
.partner-set{display:flex;gap:.9rem;padding-right:.9rem}
@keyframes partner-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

.partner{
  display:flex;align-items:center;justify-content:center;flex:none;
  background:#fff;border:1px solid var(--blue-pale);border-radius:var(--r-pill);
  padding:.8rem 1.6rem;min-height:4.1rem;min-width:11rem;
  transition:box-shadow .2s ease,border-color .2s ease;
}
.partner:hover{box-shadow:var(--shadow-soft);border-color:#D3DEF0}
.partner .brand{
  display:block;width:auto;
  filter:grayscale(1) contrast(.85) opacity(.62);
  transition:filter .25s ease;
}
.partner:hover .brand{filter:none}
.brand-ms{height:24px}
.brand-sophos{height:22px}
.brand-cf{height:19px}
.brand-cisco{height:34px}
.brand-lenovo{height:20px}
.brand-veeam{height:22px}
.brand-onepw{height:23px}
.brand-xelion{height:38px}
@media (max-width:600px){
  .partner{padding:.65rem 1.2rem;min-height:3.4rem;min-width:8.5rem}
  .partner-slider{
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
    mask-image:linear-gradient(90deg,transparent,#000 2rem,#000 calc(100% - 2rem),transparent);
  }
  .brand-ms{height:19px}
  .brand-sophos{height:18px}
  .brand-cf{height:15px}
  .brand-cisco{height:27px}
  .brand-lenovo{height:16px}
  .brand-veeam{height:17px}
  .brand-onepw{height:18px}
  .brand-xelion{height:30px}
}
@media (prefers-reduced-motion:reduce){
  .partner-track{animation:none}
  .partner-slider{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
}

/* --- Call to action band -------------------------------------------------- */
.cta-band{padding:0}
.cta-band .wrap{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  background:var(--blue-bright);color:#DCE9FB;
  border-radius:calc(var(--r-card) + 6px);
  padding:2.75rem 2.5rem;margin-block:4.75rem;
  position:relative;overflow:hidden;box-shadow:var(--shadow-soft);
}
/* Oversized ring echoing the oval in the logo, cropped by the card edge. */
.cta-band .shape{
  position:absolute;right:-7rem;bottom:-8.5rem;width:22rem;height:22rem;z-index:0;
  border:3.5rem solid var(--navy-deep);border-radius:50%;
  opacity:.45;pointer-events:none;
}
@media (max-width:820px){.cta-band .shape{right:-12rem;bottom:-12rem;width:18rem;height:18rem}}
.cta-band .wrap > div{position:relative;z-index:1;max-width:34rem}
.cta-band .btn{position:relative;z-index:1}
.cta-band h2{color:#fff;font-size:clamp(1.6rem,3.1vw,2.2rem);max-width:22ch;font-variation-settings:"wdth" 116}
.cta-band p{margin:.65rem 0 0;color:#DCE9FB;max-width:40ch}

/* --- Contact --------------------------------------------------------------- */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:3.5rem}
@media (max-width:820px){.contact-grid{grid-template-columns:1fr;gap:2.5rem}}
.contact-list{list-style:none;margin:1.5rem 0 0;padding:0}
.contact-list li{margin-bottom:1.1rem}
.contact-list strong{
  display:block;font-family:Archivo,sans-serif;font-size:.85rem;color:var(--text-soft);
  font-weight:600;font-variation-settings:"wdth" 86;margin-bottom:.15rem;
}
.contact-list a{color:var(--navy-deep);text-decoration:none;border-bottom:2px solid var(--accent)}
.contact-form{
  background:var(--grad-surface);border:1px solid var(--blue-pale);
  border-radius:var(--r-card);padding:1.75rem;box-shadow:var(--shadow-soft);margin-top:1.5rem;
}
.field{margin-bottom:1.1rem}
.field label{
  display:block;font-family:Archivo,sans-serif;font-weight:600;font-size:.92rem;
  font-variation-settings:"wdth" 94;color:var(--navy-deep);margin-bottom:.35rem;
}
.field input,.field textarea{
  width:100%;font-family:inherit;font-size:1rem;color:var(--text);
  padding:.75rem .9rem;background:#fff;border:1px solid #C9D5E8;border-radius:var(--r-sm);
  transition:border-color .15s ease,box-shadow .15s ease;
}
.field input:focus,.field textarea:focus{
  border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(21,69,128,.14);
}
.field textarea{min-height:8rem;resize:vertical}
.form-note{font-size:.9rem;color:var(--text-soft);margin:.9rem 0 0}
/* Honeypot: onzichtbaar voor bezoekers, wel invulbaar voor bots. */
.field-trap{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-status{margin:1rem 0 0;font-weight:600;font-size:.95rem;display:none}
.form-status.is-ok{display:block;color:#1B7A4B}
.form-status.is-error{display:block;color:#B3261E}
.contact-form.is-sending .btn{opacity:.6;pointer-events:none}

/* --- Icons ---------------------------------------------------------------
   Font Awesome marks, tinted with each block's accent colour so the icon
   reinforces the colour coding instead of adding a second visual system.
   -------------------------------------------------------------------------- */
.icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:2.6rem;height:2.6rem;border-radius:14px;margin-bottom:.85rem;
  font-size:1.05rem;
  color:var(--accent,var(--blue));
  background:var(--blue-pale);
  background:color-mix(in srgb,var(--accent,var(--blue)) 12%,#fff);
}
.why h3 i,.contact-list strong i{color:var(--accent,var(--blue));margin-right:.55rem}
.why h3 i{font-size:.9em}
.contact-list strong i{width:1rem;text-align:center;font-size:.9em}

/* --- Stat row -------------------------------------------------------------
   Three plain facts under the hero, in the spirit of the big-number rows
   that summarise a proposition before the detail starts.
   -------------------------------------------------------------------------- */
.stats{padding:4rem 0 3.5rem}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem}
@media (max-width:820px){.stat-row{grid-template-columns:1fr;gap:1rem}}
.stat{
  background:#fff;border:1px solid #DFE8F5;border-radius:var(--r-card);
  padding:2.1rem 1.9rem 1.9rem;box-shadow:var(--shadow-soft);
}
.stat p{margin:1rem 0 0;color:var(--text);max-width:26ch}
.stat-figure{
  display:flex;align-items:baseline;gap:.4rem;
  font-family:Roboto,Arial,sans-serif;font-weight:900;line-height:.9;
  font-size:clamp(2.8rem,6vw,4rem);letter-spacing:-.04em;
  color:var(--blue-bright);
}
.stat:nth-child(2) .stat-figure{color:var(--teal);font-size:clamp(2rem,4vw,2.7rem)}
.stat:nth-child(3) .stat-figure{color:var(--indigo)}
.stat-small{font-size:.62em;letter-spacing:-.02em}

/* --- FAQ ------------------------------------------------------------------- */
.faq{background:var(--sky)}
.faq-list{margin-top:2.5rem;display:grid;gap:.75rem}
.faq details{
  background:#fff;border:1px solid #DCE7F6;border-radius:var(--r-card);
  padding:1.1rem 1.5rem;transition:border-color .2s ease;
}
.faq details[open]{border-color:#C6D8F0}
.faq summary{
  cursor:pointer;list-style:none;position:relative;padding-right:2.5rem;
  font-family:Archivo,sans-serif;font-weight:600;font-size:1.08rem;
  font-variation-settings:"wdth" 100;color:var(--navy-deep);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.25rem;top:50%;
  width:.7rem;height:.7rem;margin-top:-.45rem;
  border-right:2px solid var(--blue-bright);border-bottom:2px solid var(--blue-bright);
  transform:rotate(45deg);transition:transform .2s ease;
}
.faq details[open] summary::after{transform:rotate(-135deg);margin-top:-.2rem}
.faq details p{margin:.85rem 0 .35rem;color:var(--text-soft);max-width:60ch}

/* --- Check list -----------------------------------------------------------
   Three claims with a tick, used where a card would be too heavy.
   -------------------------------------------------------------------------- */
.checks{display:grid;grid-template-columns:repeat(3,1fr);gap:2.5rem 3rem;margin-top:2.75rem}
@media (max-width:820px){.checks{grid-template-columns:1fr;gap:1.75rem}}
.check h3{
  display:flex;align-items:baseline;gap:.7rem;font-size:1.3rem;
  font-variation-settings:"wdth" 104;margin-bottom:.6rem;
}
.check h3 i{color:var(--blue-bright);font-size:.95rem;flex:none}
.check p{margin:0 0 0 1.95rem;color:var(--text-soft)}
/* Tekst die ná een vinkjesblok komt, hoort duidelijk los te staan. */
.checks + .prose,.checks + p{margin-top:2.75rem}
@media (max-width:820px){.check p{margin-left:1.95rem}}

/* --- Mobile navigation ----------------------------------------------------
   Below 860px the links collapse into a panel behind a toggle, so the bar
   stays one row instead of wrapping over the hero.
   -------------------------------------------------------------------------- */
.nav-toggle{
  display:none;margin-left:auto;
  width:2.9rem;height:2.9rem;border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);color:#fff;font-size:1.1rem;cursor:pointer;
  align-items:center;justify-content:center;
  transition:background .25s ease,color .25s ease;
}
.site-head.floating .nav-toggle{background:rgba(10,34,73,.08);color:var(--navy-deep)}

@media (max-width:860px){
  .site-head{padding:.5rem 0}
  .site-head .wrap{min-height:60px;position:relative}
  .nav-toggle{display:inline-flex}
  .nav{
    display:none;position:absolute;top:calc(100% + .6rem);left:0;right:0;
    flex-direction:column;align-items:stretch;gap:.15rem;
    background:#fff;border-radius:var(--r-card);padding:.9rem;
    box-shadow:0 24px 50px -24px rgba(10,34,73,.5);
  }
  .site-head.menu-open .nav{display:flex}
  .nav a{color:var(--text);padding:.85rem 1rem;border-radius:var(--r-sm);font-size:1.05rem}
  .nav a:hover{background:var(--sky)}
  .nav a::after{display:none}
  .nav a.active{color:var(--blue);background:var(--sky)}
  .nav a.btn,.site-head.floating .nav a.btn{
    justify-content:center;margin-top:.5rem;padding:.85rem 1.2rem;font-size:1rem;
  }
  .site-head.floating .wrap{width:min(100% - 1.25rem,82rem);padding-inline:1.1rem}

  .hero{padding:6.5rem 0 3rem}
  .page-head,.page-head-photo{padding:7rem 0 3.5rem}
  section{padding:3.5rem 0}
  .cta-band .wrap{padding:2rem 1.5rem;margin-block:3.5rem}
  .hero-motto{margin-top:2.75rem;padding-bottom:2rem}
  .hero-motto span{
    font-size:1rem;padding-right:.9rem;margin-right:.9rem;
  }
  .hero-motto{row-gap:.4rem}
  .logo img{height:30px}
}

@media (max-width:420px){
  .wrap{width:min(100% - 1.6rem,68rem)}
  .hero p{font-size:1.05rem}
  .stat-figure{font-size:2.6rem}
  .faq details{padding:.9rem 1.1rem}
  .faq summary{font-size:1rem}
  .partner{padding:.5rem 1rem .5rem .85rem}
}

/* --- Cookie banner --------------------------------------------------------
   Accepting and refusing are one click each and sit side by side, so the
   choice is genuinely free.
   -------------------------------------------------------------------------- */
.cookiebar{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(1.4) blur(10px);
  border-top:1px solid var(--blue-pale);
  box-shadow:0 -18px 40px -30px rgba(10,34,73,.6);
  padding:1.4rem 0;
}
.cookiebar[hidden]{display:none}
.cookiebar-inner{
  display:flex;align-items:center;justify-content:space-between;gap:2rem;flex-wrap:wrap;
}
.cookiebar h2{font-size:1.1rem;margin-bottom:.4rem;font-variation-settings:"wdth" 100}
.cookiebar p{margin:0;max-width:62ch;color:var(--text-soft);font-size:.98rem}
.cookiebar-actions{display:flex;gap:.75rem;flex-wrap:wrap}
.cookiebar .btn{white-space:nowrap}
@media (max-width:700px){
  .cookiebar{padding:1.1rem 0}
  .cookiebar-inner{gap:1rem}
  .cookiebar-actions{width:100%}
  .cookiebar-actions .btn{flex:1;justify-content:center}
}

/* --- Legal pages ----------------------------------------------------------- */
.legal{max-width:46rem}
.legal h2{font-size:1.4rem;margin:2.25rem 0 .75rem;font-variation-settings:"wdth" 104}
.legal h2:first-of-type{margin-top:1.5rem}
.legal ul{padding-left:1.2rem;margin:0 0 1rem}
.legal li{margin-bottom:.5rem}
.legal a{color:var(--blue-bright)}
/* Keurmerken: één rij, verticaal gecentreerd. De twee staande certificaten
   staan op een wit plaatje omdat ze donkere tekst hebben; het NIS2-logo is
   wit en staat daarom rechtstreeks op het donkere vlak. */
.site-foot .cert-row{
  display:flex;align-items:center;gap:1rem;flex-wrap:wrap;
  margin:1.5rem 0 0;padding:0;list-style:none;
}
.site-foot .cert-row li{margin:0;display:flex;align-items:center}
.site-foot .cert-row a{
  display:flex;align-items:center;border-radius:10px;
  transition:transform .2s ease,opacity .2s ease;
}
.site-foot .cert-row a:hover,.site-foot .cert-row a:focus-visible{transform:translateY(-2px);opacity:.88}
.cert-badge{
  display:block;height:72px;width:auto;
  background:#fff;border-radius:8px;padding:.4rem .5rem;box-sizing:content-box;
}
.cert-badge-wide{height:26px;background:none;padding:0;border-radius:0}
@media (max-width:620px){
  .cert-badge{height:62px}
  .cert-badge-wide{height:23px}
}

.site-foot .socials{display:flex;gap:.6rem;margin:1.5rem 0 0;padding:0;list-style:none}
.socials li{margin:0}
.socials a{
  display:flex;align-items:center;justify-content:center;
  width:2.4rem;height:2.4rem;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:#C9D5EA;font-size:.95rem;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}
.socials a:hover,.socials a:focus-visible{background:#fff;color:var(--navy-deep);transform:translateY(-2px)}

/* --- Scroll reveals --------------------------------------------------------
   Elements below the hero rise into place the first time they are seen.
   The class is added by site.js, so nothing is hidden if scripting fails.
   -------------------------------------------------------------------------- */
.reveal{
  opacity:0;transform:translateY(20px);
  transition:opacity .65s ease,transform .65s cubic-bezier(.2,.7,.3,1);
  transition-delay:calc(var(--i,0) * 80ms);
  will-change:opacity,transform;
}
.reveal.is-visible{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .reveal{opacity:1;transform:none;transition:none}
}

/* --- Numbered steps -------------------------------------------------------- */
.steps{
  list-style:none;counter-reset:step;margin:2.5rem 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;
}
@media (max-width:900px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.steps{grid-template-columns:1fr}}
.steps li{
  counter-increment:step;position:relative;
  background:#fff;border:1px solid #DFE8F5;border-radius:var(--r-card);
  padding:1.6rem 1.5rem 1.4rem;
}
.steps li::before{
  content:counter(step);
  display:flex;align-items:center;justify-content:center;
  width:2.1rem;height:2.1rem;margin-bottom:.9rem;border-radius:var(--r-pill);
  background:var(--blue-bright);color:#fff;
  font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:.95rem;
}
.steps h3{font-size:1.12rem;margin-bottom:.35rem;font-variation-settings:"wdth" 102}
.steps p{margin:0;color:var(--text-soft);font-size:1rem}
.contact-grid .micro{margin-bottom:.4rem}
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem 3.5rem;margin-top:2.5rem}
@media (max-width:820px){.split{grid-template-columns:1fr;gap:2rem}}
.split ul{padding-left:1.15rem;margin:0}
.split li{margin-bottom:.45rem}

/* --- Story sections --------------------------------------------------------
   Narrow measure, a lead paragraph and a timeline, so a long history stays
   scannable instead of becoming a wall of text.
   -------------------------------------------------------------------------- */
.lead{
  font-size:1.2rem;line-height:1.55;color:var(--navy-deep);
  max-width:44rem;margin-top:1.25rem;
}
.prose{max-width:42rem;color:var(--text-soft)}

.timeline{list-style:none;margin:2.75rem 0 2rem;padding:0;max-width:46rem}
.timeline li{
  position:relative;display:grid;grid-template-columns:6.5rem 1fr;gap:1.5rem;
  padding:0 0 2rem 0;
}
.timeline li::before{
  content:"";position:absolute;left:6.5rem;top:.9rem;bottom:-.4rem;
  width:2px;background:var(--blue-pale);transform:translateX(-1px);
}
.timeline li:last-child{padding-bottom:0}
.timeline li:last-child::before{display:none}
.timeline .year{
  position:relative;justify-self:end;padding-right:1.6rem;
  font-family:Roboto,Arial,sans-serif;font-weight:900;font-size:1.05rem;
  color:var(--blue-bright);line-height:1.6;white-space:nowrap;
}
.timeline .year::after{
  content:"";position:absolute;right:-.32rem;top:.55rem;
  width:.7rem;height:.7rem;border-radius:50%;
  background:var(--blue-bright);box-shadow:0 0 0 4px #fff;
}
.timeline li:nth-child(2) .year{color:var(--teal)}
.timeline li:nth-child(2) .year::after{background:var(--teal)}
.timeline li:nth-child(3) .year{color:var(--indigo)}
.timeline li:nth-child(3) .year::after{background:var(--indigo)}
.timeline li:nth-child(4) .year{color:var(--green)}
.timeline li:nth-child(4) .year::after{background:var(--green)}
.timeline h3{font-size:1.2rem;margin-bottom:.4rem;font-variation-settings:"wdth" 102}
.timeline p{margin:0;color:var(--text-soft)}
.timeline p + p{margin-top:.65rem}
@media (max-width:640px){
  .timeline li{grid-template-columns:1fr;gap:.35rem;padding-left:1.6rem}
  .timeline li::before{left:.32rem}
  .timeline .year{justify-self:start;padding-right:0;padding-left:0}
  .timeline .year::after{right:auto;left:-1.6rem;top:.5rem}
}

.pullquote{
  margin:2.5rem 0 0;padding:1.6rem 0 0;max-width:42rem;
  border-top:3px solid var(--accent);
}
.pullquote p{
  margin:0;font-family:Archivo,sans-serif;font-weight:600;
  font-variation-settings:"wdth" 104;font-size:1.25rem;line-height:1.4;
  color:var(--navy-deep);
}

/* --- Certification section ------------------------------------------------ */
.cert-layout{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2.5rem 3.5rem;align-items:start}
@media (max-width:900px){.cert-layout{grid-template-columns:1fr}}
.cert-visual img{
  display:block;height:200px;width:auto;background:#fff;
  border-radius:14px;padding:.7rem .85rem;box-sizing:content-box;
  box-shadow:var(--shadow-soft);
}
@media (max-width:900px){.cert-visual img{height:150px}}
.cert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.25rem;margin-top:2rem}
@media (max-width:1000px){.cert-grid{grid-template-columns:1fr 1fr}}
@media (max-width:700px){.cert-grid{grid-template-columns:1fr}}
.cert-item{
  background:#fff;border:1px solid #DFE8F5;border-radius:var(--r-card);
  padding:1.5rem 1.4rem;
}
.cert-item h3{font-size:1.05rem;margin-bottom:.5rem;color:var(--blue-bright)}
.cert-item p{margin:0;color:var(--text-soft);font-size:1rem}
.cert-item{display:flex;flex-direction:column;align-items:flex-start}
.cert-item p{flex:1 0 auto}
/* Link naar het certificaat in het register van de instelling. */
.cert-verify{
  display:inline-flex;align-items:center;gap:.5rem;align-self:flex-start;
  margin-top:1.25rem;padding:.55rem 1rem;border-radius:var(--r-pill);
  border:1.5px solid #BBD2EE;color:var(--accent-ink);
  font-weight:600;font-size:.9rem;text-decoration:none;
  transition:background .2s ease,border-color .2s ease,color .2s ease;
}
.cert-verify i{font-size:.78rem}
.cert-verify:hover,.cert-verify:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
.cert-layout .prose{margin-top:1.75rem}

/* --- Service row (icon strip under the hero) -------------------------------
   Six services in one scannable row: mark, name, one line, link.
   -------------------------------------------------------------------------- */
.service-row{
  display:grid;grid-template-columns:repeat(6,1fr);gap:2rem;
  padding:3.25rem 0;
}
@media (max-width:1100px){.service-row{grid-template-columns:repeat(3,1fr);gap:2.25rem 1.75rem}}
@media (max-width:640px){.service-row{grid-template-columns:repeat(2,1fr);gap:2rem 1.25rem}}
.service-item{display:flex;flex-direction:column;height:100%}
.service-item i{font-size:1.35rem;color:var(--navy-deep);display:block;margin-bottom:1rem}
.service-item h3{font-size:1rem;margin-bottom:.4rem;font-variation-settings:"wdth" 100}
/* The text grows, so every arrow lands on the same baseline across the row. */
.service-item p{margin:0 0 1.25rem;color:var(--text-soft);font-size:.93rem;line-height:1.5;flex:1 0 auto}
.service-item .go{
  display:inline-flex;align-items:center;margin-top:auto;
  color:var(--accent);font-size:1.05rem;text-decoration:none;
  transition:transform .2s ease,color .2s ease;
}
.service-item .go:hover,.service-item .go:focus-visible{transform:translateX(4px);color:var(--accent-ink)}

/* --- Feature blocks: half image, half panel -------------------------------- */
.feature{padding:1.25rem 0}
.services-strip{padding:0;border-bottom:1px solid var(--blue-pale)}
.feature .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;border-radius:var(--r-card)}
@media (max-width:900px){.feature .wrap{grid-template-columns:1fr}}
.feature-media{min-height:22rem;background-size:cover;background-position:center}
.media-luchtvaart{
  background-image:image-set(url("/luchtvaart.avif") type("image/avif"),url("/luchtvaart.webp") type("image/webp"),url("/luchtvaart.jpg") type("image/jpeg"));
  background-position:center right;
}
.media-signage{
  background-image:image-set(url("/cleverdisplay.avif") type("image/avif"),url("/cleverdisplay.webp") type("image/webp"),url("/cleverdisplay.jpg") type("image/jpeg"));
  background-position:center right;
}


.feature-panel{padding:3rem 2.75rem;display:flex;flex-direction:column;justify-content:center}
@media (max-width:560px){.feature-panel{padding:2.25rem 1.5rem}}
.feature-panel h2{font-size:clamp(1.7rem,3vw,2.3rem);max-width:16ch;font-variation-settings:"wdth" 112}
.feature-panel p{margin:1.1rem 0 0;max-width:44ch}
.feature-panel .btn{align-self:flex-start;margin-top:1.75rem}
.feature-dark{background:var(--grad-navy);color:#AFC0D2}
.feature-dark h2{color:#fff}
.feature-light{background:#fff;border:1px solid var(--blue-pale)}
.feature-light p{color:var(--text-soft)}
.feature-light .btn{
  background:transparent;color:var(--accent-ink);border:1.5px solid #BBD2EE;
}
.feature-light .btn:hover,.feature-light .btn:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
.feature .order-first{order:-1}
@media (max-width:900px){.feature .order-first{order:0}}

/* --- Certification band ----------------------------------------------------- */
.cert-band{
  position:relative;overflow:hidden;margin-top:1.25rem;
  background:linear-gradient(140deg,#0C221E 0%,#0A1A2B 60%,#070F18 100%);
  color:#AFC0D2;
}
.cert-band .wrap{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:3rem;align-items:center}
@media (max-width:900px){.cert-band .wrap{grid-template-columns:1fr;gap:2.25rem}}
.cert-band h2{color:#fff;font-size:clamp(1.8rem,3.4vw,2.5rem);max-width:18ch;font-variation-settings:"wdth" 114}
.cert-band p{margin:1.1rem 0 0;max-width:52ch}
.cert-band .btn{margin-top:1.75rem;background:transparent;border:1.5px solid rgba(255,255,255,.35);color:#fff}
.cert-band .btn:hover,.cert-band .btn:focus-visible{background:#fff;border-color:#fff;color:var(--navy-deep)}
.cert-marks{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem}
@media (max-width:1100px){.cert-marks{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.cert-marks{grid-template-columns:1fr}}
.cert-mark i{font-size:1.9rem;color:#fff;display:block;margin-bottom:1rem}
.cert-logo{display:block;height:2.4rem;width:auto;margin-bottom:.9rem}
.cert-mark-media{display:flex;align-items:center;height:6rem;margin-bottom:1.1rem}
.cert-mark-media img{display:block;height:6rem;width:auto}
.cert-mark-media .cert-mark-wide{height:2.3rem}
.cert-item-logo{display:block;height:2.1rem;width:auto;border-radius:6px;margin-bottom:.9rem}
.cert-item-logo-tall{height:3.6rem;border-radius:0}
.cert-row{display:flex;align-items:flex-end;gap:.75rem;flex-wrap:wrap}
.cert-badges a,.cert-row a{display:inline-block;border-radius:12px;transition:transform .2s ease,opacity .2s ease}
.cert-badges a:hover,.cert-row a:hover,
.cert-badges a:focus-visible,.cert-row a:focus-visible{transform:translateY(-2px);opacity:.88}
.cert-mark h3{color:#fff;font-size:1rem;margin-bottom:.45rem;font-variation-settings:"wdth" 100}
.cert-mark p{margin:0;font-size:.95rem;color:#9BADC1}

/* --- Branch cards ----------------------------------------------------------
   Media strip with a floating icon badge, then title, text and arrow.
   The strip carries a gradient until the photography arrives.
   -------------------------------------------------------------------------- */
.branch-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
@media (max-width:1000px){.branch-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.branch-grid{grid-template-columns:1fr}}
.branch{
  display:flex;flex-direction:column;overflow:hidden;
  background:#fff;border:1px solid var(--blue-pale);border-radius:var(--r-card);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.branch:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:#D3DEF0}
.branch-media{
  position:relative;height:10.5rem;
  background:linear-gradient(140deg,#17324E 0%,#0A1A2B 70%);
  background-size:cover;background-position:center;
}
/* Per branche een eigen foto; het verloop blijft als terugval staan. */
.branch-media.media-luchtvaart{background-image:image-set(url("/branche-luchtvaart.avif") type("image/avif"),url("/branche-luchtvaart.webp") type("image/webp"))}
.branch-media.media-zakelijk{background-image:image-set(url("/branche-zakelijk.avif") type("image/avif"),url("/branche-zakelijk.webp") type("image/webp"))}
.branch-media.media-industrie{background-image:image-set(url("/branche-industrie.avif") type("image/avif"),url("/branche-industrie.webp") type("image/webp"))}
.branch-media.media-zorg{background-image:image-set(url("/branche-zorg.avif") type("image/avif"),url("/branche-zorg.webp") type("image/webp"))}
.branch-media.media-retail{background-image:image-set(url("/branche-retail.avif") type("image/avif"),url("/branche-retail.webp") type("image/webp"))}
.branch-media.media-onderwijs{background-image:image-set(url("/branche-onderwijs.avif") type("image/avif"),url("/branche-onderwijs.webp") type("image/webp"))}
.branch-media.media-overheid{background-image:image-set(url("/branche-overheid.avif") type("image/avif"),url("/branche-overheid.webp") type("image/webp"))}
.branch-media.media-logistiek{background-image:image-set(url("/branche-logistiek.avif") type("image/avif"),url("/branche-logistiek.webp") type("image/webp"))}
.branch-icon{
  position:absolute;left:1.25rem;bottom:-1.4rem;
  display:flex;align-items:center;justify-content:center;
  width:3.1rem;height:3.1rem;border-radius:14px;
  background:#fff;color:var(--accent);font-size:1.15rem;
  box-shadow:0 10px 24px -14px rgba(10,26,43,.6);
}
.branch-icon-plain{position:static;box-shadow:none;background:#E7F0FD;margin-bottom:1.25rem}
.branch-body{display:flex;flex-direction:column;flex:1;padding:2.4rem 1.5rem 1.5rem}
.branch-open .branch-body{padding-top:1.75rem}
.branch-body h3{font-size:1.15rem;margin-bottom:.5rem;font-variation-settings:"wdth" 102}
.branch-body p{margin:0 0 1.25rem;color:var(--text-soft);font-size:.97rem;flex:1 0 auto}
.branch-body .go{
  display:inline-flex;align-items:center;margin-top:auto;align-self:flex-start;
  color:var(--accent);font-size:1.05rem;text-decoration:none;
  transition:transform .2s ease,color .2s ease;
}
.branch-body .go:hover,.branch-body .go:focus-visible{transform:translateX(4px);color:var(--accent-ink)}
.branch-open{background:#F3F8FF;border-color:#D7E6FA}
.branch-open .btn{align-self:flex-start;margin-top:auto}

/* --- Accreditation badge row -----------------------------------------------
   Three marks side by side on one baseline, each with a short label. Square
   shields and the wide lockup share the same slot height.
   -------------------------------------------------------------------------- */
.accreditation{border-block:1px solid var(--blue-pale)}

.badge-row{
  display:flex;flex-wrap:wrap;align-items:flex-start;gap:2.5rem;
  margin:2rem 0 0;padding:0;list-style:none;
}
.badge-row li{display:flex;flex-direction:column;align-items:center;gap:.6rem;margin:0}
.badge-row img{display:block;height:3.4rem;width:auto}
.badge-row .badge-wide{height:1.7rem;margin:.85rem 0}
.badge-row span{font-size:.85rem;font-weight:600;color:var(--text-soft)}
@media (max-width:560px){
  .accreditation{border-block:1px solid var(--blue-pale)}

.badge-row{gap:1.75rem}
  .badge-row img{height:2.9rem}
  .badge-row .badge-wide{height:1.45rem;margin:.72rem 0}
}

/* --- Quote band -------------------------------------------------------------- */
.quote-band{background:var(--grad-navy);color:#AFC0D2}
.quote-band .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:3rem;align-items:center}
@media (max-width:900px){.quote-band .wrap{grid-template-columns:1fr;gap:2.5rem}}
.quote-band blockquote{margin:0}
.quote-band blockquote p{
  color:#fff;font-family:Archivo,sans-serif;font-weight:600;
  font-variation-settings:"wdth" 108;font-size:clamp(1.3rem,2.4vw,1.8rem);
  line-height:1.35;margin:0;
}
.quote-band blockquote footer{margin-top:1rem;color:#8FA3BA;font-size:.95rem}
.quote-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;text-align:center}
@media (max-width:560px){.quote-facts{grid-template-columns:1fr;text-align:left}}
.fact i{font-size:1.4rem;color:#fff;display:block;margin-bottom:.75rem}
.fact h3{color:#fff;font-size:1.05rem;margin-bottom:.25rem;font-variation-settings:"wdth" 100}
.fact p{margin:0;font-size:.9rem;color:#8FA3BA}

/* --- Services page ----------------------------------------------------------
   Intro with a ruled aside, a six-card overview, one highlighted service and
   a dark closing band with the phone number.
   -------------------------------------------------------------------------- */
.intro-split{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:3rem}
@media (max-width:900px){.intro-split{grid-template-columns:1fr;gap:1.75rem}}
.intro-aside{border-left:1px solid var(--blue-pale);padding-left:2.5rem;align-self:center}
@media (max-width:900px){.intro-aside{border-left:0;border-top:1px solid var(--blue-pale);padding:1.5rem 0 0}}
.intro-aside p{margin:0;color:var(--text-soft)}

.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-top:3rem}
@media (max-width:1000px){.svc-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:640px){.svc-grid{grid-template-columns:1fr}}
.svc-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--blue-pale);border-radius:var(--r-card);
  padding:1.9rem 1.7rem 1.6rem;
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.svc-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-soft);border-color:#D3DEF0}
.svc-card-lead{background:#F3F8FF;border-color:#D7E6FA}
.svc-card i{font-size:1.6rem;color:var(--accent);display:block;margin-bottom:1.1rem}
.svc-card h3{font-size:1.2rem;margin-bottom:.5rem;font-variation-settings:"wdth" 102}
.svc-card p{margin:0 0 1.4rem;color:var(--text-soft);font-size:.97rem;flex:1 0 auto}
.svc-link{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-top:auto;
  color:var(--accent);font-weight:600;font-size:.95rem;text-decoration:none;
}
.svc-link i{font-size:.95rem;margin:0;transition:transform .2s ease}
.svc-link:hover i,.svc-link:focus-visible i{transform:translateX(4px)}

.spotlight{padding:1.25rem 0}
.spotlight .wrap{display:grid;grid-template-columns:1fr 1fr;gap:0;overflow:hidden;border-radius:var(--r-card);border:1px solid var(--blue-pale)}
@media (max-width:900px){.spotlight .wrap{grid-template-columns:1fr}}
.spotlight-media{min-height:24rem;background-size:cover;background-position:center}
.media-werkplek{background-image:image-set(url("/hero-werkplek.avif") type("image/avif"),url("/hero-werkplek.webp") type("image/webp"),url("/hero-werkplek.jpg") type("image/jpeg"))}
.spotlight-panel{background:#fff;padding:3rem 2.75rem}
@media (max-width:560px){.spotlight-panel{padding:2.25rem 1.5rem}}
.spotlight-panel h2{font-size:clamp(1.7rem,3vw,2.2rem);font-variation-settings:"wdth" 112}
.spotlight-sub{margin:.75rem 0 1rem;font-weight:600;color:var(--navy-deep)}
.spotlight-panel p{color:var(--text-soft)}
.check-list{list-style:none;margin:1.5rem 0 0;padding:0}
.check-list li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:.6rem;color:var(--text)}
.check-list i{color:var(--accent);font-size:1rem;margin-top:.2rem}
.spotlight-actions{display:flex;gap:.75rem;flex-wrap:wrap;margin-top:2rem}

.cta-dark{
  position:relative;overflow:hidden;color:#AFC0D2;
  background:linear-gradient(120deg,#0A1A2B 0%,#102A42 55%,#0A1A2B 100%);
}
.cta-dark .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:2.5rem;align-items:center}
@media (max-width:900px){.cta-dark .wrap{grid-template-columns:1fr;gap:1.75rem}}
.cta-dark h2{color:#fff;font-size:clamp(1.7rem,3.2vw,2.3rem);max-width:20ch;font-variation-settings:"wdth" 114}
.cta-dark p{margin:1rem 0 0;max-width:48ch}
.cta-dark-actions{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.cta-phone{
  display:inline-flex;align-items:center;gap:.6rem;color:#fff;text-decoration:none;
  font-weight:600;font-size:1.05rem;
}
.cta-phone i{color:var(--accent-soft)}
.cta-phone:hover,.cta-phone:focus-visible{color:var(--accent-soft)}

/* --- Hulp op afstand ------------------------------------------------------- */
/* Tegel op de contactpagina die naar hulp op afstand leidt. */
.contact-support{margin-top:.5rem}
.support-tile{
  display:flex;align-items:center;gap:1rem;
  padding:1rem 1.15rem;border-radius:var(--r-sm);
  background:#fff;border:1px solid var(--blue-pale);
  color:var(--navy-deep);text-decoration:none;
  transition:border-color .2s ease,box-shadow .2s ease,transform .2s ease;
}
.support-tile:hover,.support-tile:focus-visible{border-color:#BBD2EE;box-shadow:var(--shadow-soft);transform:translateY(-2px)}
.support-tile-icon{
  display:flex;align-items:center;justify-content:center;flex:none;
  width:2.6rem;height:2.6rem;border-radius:12px;background:var(--accent);color:#fff;
}
.support-tile strong{display:block;font-size:1rem}
.support-tile span span{display:block;font-size:.9rem;color:var(--text-soft)}
.contact-list .support-tile{border:1px solid var(--blue-pale)}
.contact-list .support-tile:hover,.contact-list .support-tile:focus-visible{border-color:#BBD2EE}
.contact-list .support-tile strong{
  display:block;margin:0 0 .15rem;font-size:1rem;font-weight:700;
  color:var(--navy-deep);letter-spacing:0;text-transform:none;
}
.support-tile-arrow{margin-left:auto;color:var(--accent);transition:transform .2s ease}
.support-tile:hover .support-tile-arrow{transform:translateX(3px)}


/* --- Footer --------------------------------------------------------------- */
.site-foot{background:var(--navy-deep);color:#93A6C8;padding:3.25rem 0 2.25rem;font-size:.95rem}
.site-foot .wrap{display:grid;grid-template-columns:1.4fr 1fr 1.1fr .9fr;gap:2.5rem}
@media (max-width:1000px){.site-foot .wrap{grid-template-columns:1fr 1fr;gap:2rem}}
@media (max-width:620px){.site-foot .wrap{grid-template-columns:1fr;gap:1.75rem}}
.site-foot h4{
  font-family:Archivo,sans-serif;font-size:.9rem;color:#fff;margin:0 0 .7rem;
  font-variation-settings:"wdth" 88;letter-spacing:.01em;
}
.site-foot a{color:#C9D5EA;text-decoration:none}
.site-foot a:hover,.site-foot a:focus-visible{color:var(--accent)}
.site-foot ul{list-style:none;margin:0;padding:0}
.site-foot li{margin-bottom:.4rem}
.site-foot p{max-width:30ch}
.foot-logo{display:inline-block;margin-bottom:1rem}
.foot-logo img{display:block;height:48px;width:auto}
.colophon{
  grid-column:1/-1;margin-top:2rem;padding-top:1.15rem;
  border-top:1px solid rgba(255,255,255,.15);font-size:.85rem;
}
.colophon p{margin:0;max-width:none}

/* --- One page-load reveal --------------------------------------------------- */
@keyframes rise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.hero h1,.hero p,.hero-cta,.hero-motto{animation:rise .75s cubic-bezier(.2,.7,.3,1) both}
.hero p{animation-delay:.08s}
.hero-cta{animation-delay:.16s}
.hero-motto{animation-delay:.24s}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important;transition:none !important;scroll-behavior:auto !important}
}