/* Stylesheet van de VCO-site (frontend).
   Bron: het prototype in public_html/prototype/public_html/assets/css/style.css
   (gebouwd door _build/build.py). Klassennamen zijn gelijk aan die van het
   prototype: de sjablonen (hero, kaarten, FAQ, ...) rekenen erop.
   De lettertypes (Poppins, Source Sans 3) staan zelf gehost in
   /assets/fonts/fonts.css, dat header.ini vóór dit bestand laadt
   (vernieuwen: php scripts/haal-frontend-fonts.php); geen Google Fonts-import.
   (let op: // is geen CSS-commentaar en slokt de eerstvolgende regel op) */

/* Beelden uit de responsiveImg-viewhelper dragen width/height voor een
   stabiele layout (geen CLS); zonder height:auto zou een smaller vak ze
   vervormen. Geldt voor alle beelden: schaal mee, behoud de verhouding. */
img {
    max-width: 100%;
    height: auto;
}

/* Balk boven een voorbeeld voor dashboardgebruikers (partials/voorbeeldbalk.phtml,
   Vco_Service_Voorbeeld). Bewust een kleur buiten de huisstijl: het is geen
   onderdeel van de site maar een waarschuwing die opvalt. */
.voorbeeldbalk {
    position: sticky;
    top: 0;
    z-index: 1100;
    background: #ffd54a;
    color: #222;
    font-size: 14px;
    line-height: 1.4;
    padding: 8px 16px;
}

.voorbeeldbalk__inhoud {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 24px;
    max-width: 1320px;
    margin: 0 auto;
}

.voorbeeldbalk a {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    white-space: nowrap;
}

/* Voorbeeldbalk boven de vaste navigatie: de .nav is position: fixed op top 0
   en zou de (sticky) balk anders bedekken. */
.voorbeeldbalk ~ .nav { top: 36px; }

/* Taalkeuze in de navigatie (alleen bij meer dan één frontend-taal;
   partials/header.phtml). Bewust sober, in de stijl van .nav-phone. */
.taal-switch__lijst { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.taal-switch__link { display: block; padding: 6px 8px; border-radius: 999px; color: #dfe5f5; font: 500 13px/1 var(--display); text-transform: uppercase; }
.taal-switch__link:hover, .taal-switch__link.active { color: #fff; background: rgba(255,255,255,.1); }
@media (max-width: 680px) { .taal-switch { display: none; } }

/* ============================================================================
   Prototype
   ========================================================================= */
  /* ============ Huisstijl ============ */
  :root {
    --navy: #0A1329;       /* Achtergrond blauw */
    --navy-2: #111c3a;
    --grey: #F4F6F9;       /* Achtergrond grijs */
    --blue: #1A3A8F;       /* Logo blauw */
    --blue-2: #1F44A0;     /* Logo blauw lichter */
    --red: #DE2D2F;        /* Logo rood */
    --ink: #0A1329;
    --muted: #5b6478;
    --line: rgba(10, 19, 41, .1);
    --line-dark: rgba(255, 255, 255, .12);
    /* Kleuren exact gemeten uit de V van het logo, schuin van linksboven (blauw) naar rechtsonder (rood) */
    --grad: linear-gradient(150deg, #1F44A0 0%, #1F44A0 20%, #2D4297 28%, #663C71 44%, #963752 59%, #BB333A 75%, #D3312A 91%, #DE2D2F 100%);
    --radius: 28px;
    --display: "Poppins", system-ui, sans-serif;
    --body: "Source Sans 3", system-ui, sans-serif;
    --wrap: 1240px;
  }

  *, *::before, *::after { box-sizing: border-box; }
  html { scroll-behavior: smooth; overflow-x: clip; }
  body {
    margin: 0;
    font-family: var(--body);
    font-size: 17px;
    line-height: 1.65;
    color: var(--ink);
    background: var(--grey);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }
  img { max-width: 100%; display: block; }
  a { color: inherit; text-decoration: none; }
  h1, h2, h3, h4 { font-family: var(--display); line-height: 1.02; margin: 0; letter-spacing: -.02em; }
  p { margin: 0; }
  .wrap { width: min(var(--wrap), 100% - 40px); margin-inline: auto; }
  .grad-text { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
  .eyebrow {
    display: inline-flex; align-items: center; gap: 10px;
    font: 600 13px/1 var(--body); letter-spacing: .14em; text-transform: uppercase;
    color: var(--blue-2);
  }
  .eyebrow::before { content: ""; width: 26px; height: 8px; border-radius: 8px; background: var(--grad); }
  .dark .eyebrow, .hero .eyebrow, .contact .eyebrow { color: #9fb3ea; }

  /* ============ Knoppen ============ */
  .btn {
    position: relative; display: inline-flex; align-items: center; gap: 12px;
    padding: 16px 26px; border-radius: 999px;
    font: 600 16px/1 var(--display); letter-spacing: .01em;
    transition: transform .3s cubic-bezier(.2,.8,.2,1), background .3s, color .3s, box-shadow .3s;
    cursor: pointer; border: 0;
  }
  .btn .arrow { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgba(255,255,255,.18); transition: transform .3s; }
  .btn:hover { transform: translateY(-2px); }
  .btn:hover .arrow { transform: rotate(-45deg); }
  .btn-red { background: var(--red); color: #fff; box-shadow: 0 12px 30px -12px rgba(222,45,47,.7); }
  .btn-red:hover { background: #c92325; }
  .btn-ghost { color: #fff; border: 1px solid var(--line-dark); }
  .btn-ghost:hover { background: rgba(255,255,255,.08); }
  .btn-dark { background: var(--navy); color: #fff; }
  .btn-dark:hover { background: var(--blue); }

  /* ============ Navigatie ============ */
  .nav {
    position: fixed; inset: 0 0 auto; z-index: 50;
    padding: 22px 0; transition: padding .3s;
  }
  .nav.scrolled { padding: 12px 0; background: rgba(10,19,41,.78); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border-bottom: 1px solid var(--line-dark); }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
  .nav .logo img { height: 46px; width: auto; transition: height .3s; }
  .nav.scrolled .logo img { height: 38px; }
  .nav-links { display: flex; align-items: center; gap: 6px; list-style: none; margin: 0; padding: 6px; border-radius: 999px; background: rgba(255,255,255,.06); border: 1px solid var(--line-dark); }
  .nav-links a { display: block; padding: 10px 18px; border-radius: 999px; color: #dfe5f5; font: 500 15px/1 var(--display); transition: background .25s, color .25s; }
  .nav-links a:hover { background: rgba(255,255,255,.1); color: #fff; }
  .nav-cta { display: flex; align-items: center; gap: 18px; }
  .nav-phone { color: #dfe5f5; font: 500 15px var(--display); }
  .nav-phone:hover { color: #fff; }
  .nav .btn { padding: 13px 20px; font-size: 15px; }
  .burger { display: none; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-dark); background: transparent; cursor: pointer; position: relative; }
  .burger span { position: absolute; left: 14px; right: 14px; height: 2px; background: #fff; border-radius: 2px; transition: transform .3s, top .3s; }
  .burger span:nth-child(1) { top: 19px; } .burger span:nth-child(2) { top: 27px; }
  .menu-open .burger span:nth-child(1) { top: 23px; transform: rotate(45deg); }
  .menu-open .burger span:nth-child(2) { top: 23px; transform: rotate(-45deg); }

  /* ============ Hero ============ */
  .hero {
    position: relative; min-height: clamp(640px, 100vh, 1000px); min-height: clamp(640px, 100svh, 1000px);
    display: flex; align-items: center;
    background: var(--navy); color: #fff; overflow: hidden;
    padding: 150px 0 120px;
  }
  .hero::before { /* subtiel raster */
    content: ""; position: absolute; inset: 0;
    background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
    background-size: 80px 80px; opacity: .35;
    mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
    -webkit-mask-image: radial-gradient(ellipse at 70% 40%, #000 0%, transparent 70%);
  }
  .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .55; pointer-events: none; }
  .orb-blue { width: 560px; height: 560px; background: var(--blue-2); top: -160px; right: -80px; animation: float 14s ease-in-out infinite; }
  .orb-red { width: 380px; height: 380px; background: var(--red); bottom: -140px; right: 22%; opacity: .4; animation: float 18s ease-in-out infinite reverse; }
  .cursor-glow { position: absolute; width: 500px; height: 500px; border-radius: 50%; background: radial-gradient(circle, rgba(31,68,160,.35), transparent 65%); transform: translate(-50%, -50%); pointer-events: none; left: 60%; top: 40%; transition: left .4s ease-out, top .4s ease-out; }
  @keyframes float { 0%,100% { transform: translate(0,0); } 50% { transform: translate(-40px, 30px); } }

  /* Signatuur: de 'V-streep' uit het logo */
  .stroke {
    position: absolute; width: 150px; height: 560px; border-radius: 120px;
    background: var(--grad); right: 12%; top: 50%;
    transform: translateY(-50%) rotate(-26deg);
    box-shadow: 0 40px 100px -30px rgba(222,45,47,.18);
    animation: strokeIn 1.4s cubic-bezier(.2,.8,.2,1) both;
  }
  .stroke.s2 { width: 70px; height: 300px; right: 30%; top: 26%; opacity: .35; animation-delay: .2s; filter: blur(1px); }
  @keyframes strokeIn { from { opacity: 0; transform: translateY(-30%) rotate(-26deg) scale(.85); } }

  .hero-inner { position: relative; z-index: 2; max-width: 860px; }
  .hero h1 { font-size: clamp(54px, 9vw, 132px); font-weight: 800; margin: 26px 0 28px; }
  .hero h1 .line { display: block; overflow: hidden; }
  .hero h1 .line > span { display: inline-block; animation: rise 1s cubic-bezier(.2,.8,.2,1) both; }
  .hero h1 .line:nth-child(2) > span { animation-delay: .12s; }
  @keyframes rise { from { transform: translateY(105%); } }
  .hero .lead { font-size: clamp(18px, 1.6vw, 22px); color: #c7d0e8; max-width: 560px; }
  .hero .lead strong { color: #fff; font-weight: 600; }
  .hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
  .hero-meta { position: absolute; z-index: 2; left: 0; right: 0; bottom: 34px; }
  .hero-meta .wrap { display: flex; justify-content: space-between; align-items: center; color: #8d99bb; font-size: 14px; }
  .scroll-hint { display: flex; align-items: center; gap: 12px; }
  .scroll-hint i { width: 22px; height: 36px; border: 2px solid #4a5677; border-radius: 12px; position: relative; }
  .scroll-hint i::after { content: ""; position: absolute; left: 50%; top: 6px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--red); animation: wheel 1.8s infinite; }
  @keyframes wheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(12px); } }

  /* ============ Marquee ============ */
  .marquee { background: var(--blue); color: #fff; overflow: hidden; padding: 26px 0; transform: rotate(-1.5deg); margin: -28px -20px 0; position: relative; z-index: 3; box-shadow: 0 20px 60px -30px rgba(10,19,41,.8); }
  .marquee-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
  .marquee span, .marquee a { font: 700 clamp(26px, 3vw, 40px)/1 var(--display); padding-inline: 28px; white-space: nowrap; display: flex; align-items: center; gap: 56px; color: inherit; text-decoration: none; }
  .marquee span::after, .marquee a::after { content: ""; width: 14px; height: 34px; border-radius: 10px; background: linear-gradient(var(--grey), var(--red)); transform: rotate(-26deg); }
  .marquee span:nth-child(even), .marquee a:nth-child(even) { color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.85); }
  @keyframes marquee { to { transform: translateX(-50%); } }

  /* ============ Secties ============ */
  section { position: relative; }
  .section { padding: clamp(90px, 12vw, 160px) 0; }
  .section-head { display: flex; justify-content: space-between; align-items: end; gap: 40px; margin-bottom: 60px; flex-wrap: wrap; }
  .section-head h2 { font-size: clamp(40px, 5.6vw, 76px); font-weight: 800; margin-top: 18px; max-width: 760px; }
  .section-head p { max-width: 420px; color: var(--muted); }
  .dark { background: var(--navy); color: #fff; }
  .dark .section-head p { color: #aab4d0; }

  /* Over ons */
  .about-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: 80px; align-items: center; }
  .about h2 { font-size: clamp(40px, 5.4vw, 72px); font-weight: 800; margin: 18px 0 28px; }
  .about p { color: var(--muted); font-size: 18px; }
  .about p + p { margin-top: 16px; }
  .about .btn { margin-top: 36px; }
  .about-card {
    position: relative; aspect-ratio: 4/5; border-radius: 36px; overflow: hidden;
    background: var(--navy); color: #fff; padding: 40px; display: flex; flex-direction: column; justify-content: end;
  }
  .about-card .stroke { position: absolute; width: 120px; height: 440px; right: 18%; top: 42%; animation: none; }
  .about-card .quote { position: relative; font: 700 clamp(26px, 2.6vw, 34px)/1.15 var(--display); }
  .about-card .who { position: relative; margin-top: 20px; display: flex; align-items: center; gap: 14px; color: #aab4d0; font-size: 15px; }
  .about-card .who b { display: block; color: #fff; font-family: var(--display); font-size: 17px; }
  .avatar { width: 52px; height: 52px; border-radius: 50%; background: var(--grad); display: grid; place-items: center; font: 800 18px var(--display); }
  .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 100px; padding-top: 50px; border-top: 1px solid var(--line); }
  .stat b { display: block; font: 800 clamp(40px, 4.4vw, 60px)/1 var(--display); letter-spacing: -.03em; }
  .stat span { color: var(--muted); font-size: 15px; }

  /* Diensten — bento */
  .bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 20px; }
  .card {
    position: relative; grid-column: span 2; padding: 36px; border-radius: var(--radius);
    background: #fff; border: 1px solid var(--line); overflow: hidden;
    transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s, border-color .4s;
    display: flex; flex-direction: column; min-height: 320px;
  }
  .card:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(10,19,41,.35); border-color: transparent; }
  .card .num { font: 600 14px var(--display); color: var(--muted); letter-spacing: .1em; }
  .card .ico { width: 64px; height: 64px; border-radius: 20px; display: grid; place-items: center; background: var(--grey); color: var(--blue-2); margin: 26px 0 28px; transition: background .4s, color .4s, transform .4s; }
  .card:hover .ico { background: var(--grad); color: #fff; transform: rotate(-8deg); }
  .card h3 { font-size: 28px; font-weight: 700; margin-bottom: 12px; }
  .card p { color: var(--muted); font-size: 16px; }
  .card .more { margin-top: auto; padding-top: 26px; font: 600 15px var(--display); color: var(--blue-2); display: inline-flex; align-items: center; gap: 8px; }
  .card .more svg { transition: transform .3s; }
  .card:hover .more svg { transform: translateX(6px); }
  .card.big { grid-column: span 4; background: var(--navy); color: #fff; border: 0; }
  .card.big p { color: #aab4d0; max-width: 460px; }
  .card.big h3 { font-size: clamp(32px, 3.4vw, 46px); }
  .card.big .ico { background: rgba(255,255,255,.08); color: #fff; }
  .card.big .more { color: #fff; }
  .card.big .stroke { width: 110px; height: 420px; right: 8%; top: 50%; opacity: .9; animation: none; }
  .card.accent { background: var(--red); color: #fff; border: 0; }
  .card.accent p, .card.accent .num { color: rgba(255,255,255,.8); }
  .card.accent .ico { background: rgba(255,255,255,.16); color: #fff; }
  .card.accent .more { color: #fff; }
  .card.wide { grid-column: span 3; }

  /* Wist u dat */
  .facts { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
  .fact { padding: 50px; border-radius: var(--radius); border: 1px solid var(--line-dark); background: linear-gradient(180deg, rgba(255,255,255,.04), transparent); position: relative; overflow: hidden; }
  .fact .big { font: 800 clamp(90px, 11vw, 160px)/.85 var(--display); letter-spacing: -.05em; margin-bottom: 26px; }
  .fact h3 { font-size: clamp(24px, 2.4vw, 32px); font-weight: 600; line-height: 1.2; max-width: 440px; }

  /* Werkwijze */
  .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: step; }
  .step { position: relative; padding: 34px 30px 36px; border-top: 2px solid var(--line); transition: border-color .4s; }
  .step::before { content: ""; position: absolute; left: 0; top: -2px; height: 2px; width: 0; background: var(--grad); transition: width .8s cubic-bezier(.2,.8,.2,1); }
  .step.in::before { width: 100%; }
  .step .n { font: 800 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--blue-2); margin-bottom: 22px; }
  .step h3 { font-size: 24px; font-weight: 700; margin-bottom: 10px; }
  .step p { color: var(--muted); font-size: 16px; }

  /* Klanten */
  .clients { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
  .client {
    position: relative; aspect-ratio: 4/3; border-radius: 24px; padding: 26px;
    background: var(--navy-2); border: 1px solid var(--line-dark); overflow: hidden;
    display: flex; flex-direction: column; justify-content: space-between;
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .client::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .45s; }
  .client:hover { transform: translateY(-4px); }
  .client:hover::before { opacity: 1; }
  .client > * { position: relative; }
  .client .tag { font-size: 13px; color: #8d99bb; transition: color .4s; }
  .client:hover .tag { color: rgba(255,255,255,.85); }
  .client h4 { font-size: clamp(20px, 1.8vw, 26px); font-weight: 700; }
  .client .go { position: absolute; top: 22px; right: 22px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; transition: transform .4s, background .4s; }
  .client:hover .go { background: #fff; color: var(--navy); transform: rotate(-45deg); }
  .clients-foot { margin-top: 50px; display: flex; justify-content: center; }

  /* Blog */
  .posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
  .post { display: flex; flex-direction: column; gap: 18px; }
  .post .thumb { aspect-ratio: 1; border-radius: 24px; overflow: hidden; position: relative; background: var(--navy); }
  .post .thumb::after { content: ""; position: absolute; width: 34%; height: 130%; left: 33%; top: -15%; border-radius: 999px; background: var(--grad); transform: rotate(-26deg); transition: transform .6s cubic-bezier(.2,.8,.2,1); }
  .post:nth-child(2) .thumb { background: var(--blue); }
  .post:nth-child(3) .thumb { background: var(--red); }
  .post:nth-child(3) .thumb::after { background: linear-gradient(160deg, #fff, var(--navy)); opacity: .5; }
  .post:nth-child(4) .thumb { background: var(--blue-2); }
  .post:hover .thumb::after { transform: rotate(-10deg) scale(1.08); }
  .post .thumb span { position: absolute; z-index: 1; left: 16px; top: 16px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); font: 600 12px var(--display); letter-spacing: .06em; text-transform: uppercase; }
  .post h3 { font-size: 22px; font-weight: 700; line-height: 1.2; transition: color .3s; }
  .post:hover h3 { color: var(--blue-2); }
  .post small { color: var(--muted); font-size: 14px; }

  /* Contact */
  .contact { background: var(--navy); color: #fff; overflow: hidden; }
  .contact .orb-blue { top: auto; bottom: -260px; left: -200px; right: auto; }
  .contact-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; }
  .contact h2 { font-size: clamp(48px, 7vw, 104px); font-weight: 800; margin: 20px 0 28px; }
  .contact .lead { color: #aab4d0; font-size: 19px; max-width: 460px; }
  .contact-list { list-style: none; padding: 0; margin: 46px 0 0; display: grid; gap: 4px; }
  .contact-list a, .contact-list div { display: flex; align-items: center; gap: 18px; padding: 18px 0; border-bottom: 1px solid var(--line-dark); font: 500 20px var(--display); transition: color .3s, padding .3s; }
  .contact-list a:hover { color: #fff; padding-left: 8px; }
  .contact-list .k { width: 44px; height: 44px; border-radius: 14px; background: rgba(255,255,255,.07); display: grid; place-items: center; flex: none; color: #9fb3ea; }
  form { background: #fff; color: var(--ink); border-radius: 36px; padding: clamp(28px, 4vw, 50px); align-self: start; box-shadow: 0 40px 100px -40px rgba(0,0,0,.6); }
  form h3 { font-size: 30px; font-weight: 700; margin-bottom: 8px; }
  form > p { color: var(--muted); font-size: 15px; margin-bottom: 30px; }
  .field { position: relative; margin-bottom: 16px; }
  .field input, .field textarea {
    width: 100%; padding: 26px 20px 12px; border-radius: 16px; border: 1px solid var(--line);
    background: var(--grey); font: 500 16px var(--body); color: var(--ink); transition: border-color .3s, background .3s; resize: vertical;
  }
  .field textarea { min-height: 140px; }
  .field label { position: absolute; left: 21px; top: 19px; color: var(--muted); font-size: 16px; pointer-events: none; transition: transform .2s, font-size .2s, top .2s; }
  .field input:focus, .field textarea:focus { outline: none; border-color: var(--blue-2); background: #fff; }
  .field input:focus + label, .field input:not(:placeholder-shown) + label,
  .field textarea:focus + label, .field textarea:not(:placeholder-shown) + label { top: 9px; font-size: 12px; color: var(--blue-2); }
  form .row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
  form .btn { width: 100%; justify-content: center; margin-top: 10px; padding: 20px; }
  form .privacy { font-size: 13px; color: var(--muted); margin-top: 16px; text-align: center; }
  .form-msg { display: none; margin-top: 16px; padding: 14px 18px; border-radius: 14px; background: #eaf0ff; color: var(--blue); font-weight: 500; text-align: center; }
  .form-msg.show { display: block; }

  /* Footer */
  footer { background: #060c1c; color: #8d99bb; padding: 90px 0 36px; overflow: hidden; }
  .foot-top { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 50px; padding-bottom: 70px; }
  .foot-top img { height: 54px; width: auto; margin-bottom: 22px; }
  .foot-top h4 { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 18px; letter-spacing: 0; }
  .foot-top ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
  .foot-top a:hover { color: #fff; }
  .socials { display: flex; gap: 10px; margin-top: 24px; }
  .socials a { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-dark); display: grid; place-items: center; color: #dfe5f5; transition: background .3s, border-color .3s; }
  .socials a:hover { background: var(--red); border-color: var(--red); color: #fff; }
  .foot-giant { font: 900 clamp(70px, 15vw, 240px)/.8 var(--display); letter-spacing: -.05em; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.14); white-space: nowrap; text-align: center; margin-bottom: 40px; user-select: none; }
  .foot-giant span { background: var(--grad); -webkit-background-clip: text; background-clip: text; -webkit-text-stroke: 0; }
  .foot-bottom { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 16px; font-size: 14px; padding-top: 28px; border-top: 1px solid var(--line-dark); }
  .foot-bottom nav { display: flex; gap: 24px; flex-wrap: wrap; }
  .foot-bottom a:hover { color: #fff; }

  /* Reveal-animaties */
  .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s cubic-bezier(.2,.8,.2,1), transform 1s cubic-bezier(.2,.8,.2,1); }
  .reveal.in { opacity: 1; transform: none; }
  .d1 { transition-delay: .08s; } .d2 { transition-delay: .16s; } .d3 { transition-delay: .24s; }

  /* WhatsApp-knop */
  .wa { position: fixed; right: 22px; bottom: 22px; z-index: 40; width: 60px; height: 60px; border-radius: 50%; background: #25D366; color: #fff; display: grid; place-items: center; box-shadow: 0 14px 30px -10px rgba(0,0,0,.4); transition: transform .3s; }
  .wa:hover { transform: scale(1.08) rotate(-8deg); }

  /* ============ Responsive ============ */
  @media (max-width: 1080px) {
    .nav-links, .nav-phone { display: none; }
    .burger { display: block; }
    .nav-links.mobile {
      display: flex; flex-direction: column; position: fixed; inset: 0; z-index: -1;
      justify-content: center; align-items: center; gap: 8px; border-radius: 0; border: 0;
      background: var(--navy); padding: 0;
    }
    .nav-links.mobile a { font-size: 34px; font-weight: 700; padding: 14px 24px; }
    .about-grid, .contact-grid { grid-template-columns: 1fr; gap: 60px; }
    .about-card { aspect-ratio: 16/11; }
    .bento { grid-template-columns: repeat(2, 1fr); }
    .card, .card.big, .card.wide { grid-column: span 1; }
    .card.big { grid-column: span 2; }
    .steps, .posts { grid-template-columns: repeat(2, 1fr); }
    .clients { grid-template-columns: repeat(3, 1fr); }
    .foot-top { grid-template-columns: 1fr 1fr; }
    .stroke { right: -4%; opacity: .7; }
  }
  @media (max-width: 680px) {
    body { font-size: 16px; }
    .nav .btn { display: none; }
    .hero { padding-top: 130px; }
    .stroke { width: 100px; height: 380px; right: -50px; top: 30%; opacity: .5; }
    .stroke.s2 { display: none; }
    .hero-meta .wrap span:first-child { display: none; }
    .stats { grid-template-columns: 1fr 1fr; gap: 34px 20px; margin-top: 70px; }
    .bento, .facts, .steps, .posts, form .row { grid-template-columns: 1fr; }
    .card.big { grid-column: span 1; }
    .card.big .stroke { opacity: .3; }
    .clients { grid-template-columns: 1fr 1fr; }
    .fact { padding: 34px; }
    .foot-top { grid-template-columns: 1fr; }
    .foot-bottom { flex-direction: column; }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
    .reveal { opacity: 1; transform: none; }
  }

/* =====================================================================
   Subpagina's
   ===================================================================== */

/* Actieve navigatie + dropdown diensten */
.nav-links a.active { background: rgba(255,255,255,.12); color: #fff; }
.nav-links .has-sub { position: relative; }
.nav-links .sub {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translate(-50%, 8px);
  min-width: 260px; list-style: none; margin: 0; padding: 10px;
  background: #fff; border-radius: 22px; box-shadow: 0 30px 60px -20px rgba(10,19,41,.45);
  opacity: 0; visibility: hidden; transition: opacity .25s, transform .25s, visibility .25s;
}
.nav-links .sub::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px; }
.nav-links .has-sub:hover .sub, .nav-links .has-sub:focus-within .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.nav-links .sub a { color: var(--ink); border-radius: 14px; padding: 12px 16px; display: flex; justify-content: space-between; gap: 12px; }
.nav-links .sub a:hover { background: var(--grey); color: var(--blue-2); }
.nav-links .sub a::after { content: "\2192"; opacity: 0; transition: opacity .2s, transform .2s; transform: translateX(-4px); }
.nav-links .sub a:hover::after { opacity: 1; transform: none; }

/* Pagina-hero */
.page-hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding: 190px 0 110px; }
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px);
  background-size: 80px 80px; opacity: .3;
  mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 65%);
  -webkit-mask-image: radial-gradient(ellipse at 80% 30%, #000 0%, transparent 65%);
}
.page-hero .orb-blue { width: 480px; height: 480px; top: -200px; right: -100px; }
.page-hero .stroke { width: 110px; height: 420px; right: 9%; top: 58%; }
.page-hero .wrap { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(46px, 7.4vw, 108px); font-weight: 800; margin: 22px 0 26px; max-width: 980px; }
.page-hero .lead { font-size: clamp(18px, 1.5vw, 21px); color: #c7d0e8; max-width: 640px; }
.page-hero .hero-actions { margin-top: 36px; }
.page-hero .eyebrow { color: #9fb3ea; }
.page-hero.compact { padding-bottom: 80px; }
.page-hero.compact h1 { font-size: clamp(40px, 5.6vw, 76px); }
.page-hero.with-visual { padding-bottom: 150px; }

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-size: 14px; color: #8d99bb; }
.crumbs li + li::before { content: "/"; margin-right: 8px; opacity: .5; }
.crumbs a:hover { color: #fff; }
.crumbs [aria-current] { color: #dfe5f5; }

/* Tekstpagina's */
.prose { max-width: 760px; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { font-size: clamp(28px, 3vw, 40px); font-weight: 700; margin-top: 1.8em; }
.prose h3 { font-size: 24px; font-weight: 700; margin-top: 1.6em; }
.prose > h2:first-child, .prose > h3:first-child { margin-top: 0; }
.prose p, .prose li { color: #3b4459; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: .5em; }
.prose li::marker { color: var(--red); }
.prose a { color: var(--blue-2); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose .lead-p { font-size: 21px; line-height: 1.55; color: var(--ink); font-weight: 500; }
.prose blockquote { margin: 2em 0; padding: 26px 30px; border-radius: 22px; background: #fff; border-left: 6px solid var(--red); font: 600 22px/1.4 var(--display); color: var(--ink); }

/* Content + zijkolom */
.split { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 80px; align-items: start; }
.aside { position: sticky; top: 110px; display: grid; gap: 20px; }
.aside-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 32px; position: relative; overflow: hidden; }
.aside-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 14px; }
.aside-card p { color: var(--muted); font-size: 15px; }
.aside-card.dark-card { background: var(--navy); color: #fff; border: 0; }
.aside-card.dark-card p { color: #aab4d0; }
.aside-card.dark-card .btn { margin-top: 22px; }
.aside-card.dark-card .stroke { width: 70px; height: 260px; right: -10px; top: 20%; opacity: .5; animation: none; }
.aside-card.dark-card > *:not(.stroke) { position: relative; z-index: 1; }
.aside-card ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.aside-card ul a { display: flex; justify-content: space-between; padding: 12px 0; border-bottom: 1px solid var(--line); font: 500 16px var(--display); transition: color .2s, padding .2s; }
.aside-card ul a:hover, .aside-card ul a[aria-current] { color: var(--blue-2); padding-left: 6px; }
.aside-card ul a::after { content: "\2192"; color: var(--red); }

/* Checklijst */
.checks { list-style: none; padding: 0 !important; display: grid; gap: 14px; }
.checks li { display: flex; gap: 14px; align-items: flex-start; }
.checks li + li { margin-top: 0; }
.checks li::before { content: "\2713"; flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 14px; font-weight: 700; margin-top: 1px; }
.checks.two { grid-template-columns: 1fr 1fr; gap: 16px 30px; }

/* Waarden / USP's */
.values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.value { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 36px; }
.value .n { display: inline-grid; place-items: center; width: 54px; height: 54px; border-radius: 18px; background: var(--grad); color: #fff; font: 800 20px var(--display); margin-bottom: 26px; }
.value h3 { font-size: 26px; font-weight: 700; margin-bottom: 12px; }
.value p { color: var(--muted); font-size: 16px; }
.dark .value { background: var(--navy-2); border-color: var(--line-dark); }
.dark .value p { color: #aab4d0; }

/* CTA-band */
.cta-band { position: relative; overflow: hidden; border-radius: 40px; padding: clamp(44px, 7vw, 90px); background: var(--grad); color: #fff; display: flex; justify-content: space-between; align-items: center; gap: 40px; flex-wrap: wrap; }
.cta-band::after { content: ""; position: absolute; width: 200px; height: 700px; border-radius: 200px; background: rgba(255,255,255,.1); right: 10%; top: -40%; transform: rotate(-26deg); }
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { font-size: clamp(34px, 5vw, 68px); font-weight: 800; max-width: 680px; }
.cta-band p { color: rgba(255,255,255,.88); margin-top: 14px; max-width: 520px; }
.cta-band .btn { background: #fff; color: var(--navy); }
.cta-band .btn .arrow { background: var(--grey); }
.cta-section { padding: 0 0 clamp(90px, 12vw, 150px); }

/* FAQ */
.faq { display: grid; gap: 12px; max-width: 900px; }
.faq details { background: #fff; border: 1px solid var(--line); border-radius: 22px; padding: 0 28px; transition: box-shadow .3s; }
.faq details[open] { box-shadow: 0 20px 50px -30px rgba(10,19,41,.35); }
.faq summary { list-style: none; cursor: pointer; padding: 24px 0; font: 600 19px/1.3 var(--display); display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--grey); color: var(--blue-2); font-size: 22px; transition: transform .3s, background .3s, color .3s; }
.faq details[open] summary::after { transform: rotate(45deg); background: var(--red); color: #fff; }
.faq details p { color: var(--muted); padding-bottom: 24px; }

/* Case-kaarten met screenshot */
.cases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 34px 24px; }
.cases.two { grid-template-columns: repeat(2, 1fr); }
.case-card { display: flex; flex-direction: column; gap: 18px; }
.case-card .shot { position: relative; border-radius: 28px; overflow: hidden; background: var(--navy-2); aspect-ratio: 16/11; display: grid; place-items: center; padding: 7%; isolation: isolate; }
.case-card .shot::before { content: ""; position: absolute; inset: 0; background: var(--grad); opacity: 0; transition: opacity .5s; z-index: -1; }
.case-card .shot::after { content: ""; position: absolute; width: 30%; height: 140%; border-radius: 999px; background: var(--grad); opacity: .35; transform: rotate(-26deg); right: -6%; top: -20%; z-index: -1; transition: opacity .5s; }
.case-card:hover .shot::before { opacity: 1; }
.case-card:hover .shot::after { opacity: 0; }
.case-card .shot img { width: 100%; height: auto; transition: transform .6s cubic-bezier(.2,.8,.2,1); filter: drop-shadow(0 20px 30px rgba(0,0,0,.35)); }
.case-card:hover .shot img { transform: scale(1.05) translateY(-4px); }
.case-card .meta { display: flex; justify-content: space-between; align-items: start; gap: 16px; }
.case-card h3 { font-size: 24px; font-weight: 700; }
.case-card small { color: var(--muted); font-size: 14px; display: block; margin-top: 4px; }
.dark .case-card small { color: #8d99bb; }
.case-card .go { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .4s, background .4s, color .4s, border-color .4s; }
.dark .case-card .go { border-color: var(--line-dark); }
.case-card:hover .go { background: var(--red); border-color: var(--red); color: #fff; transform: rotate(-45deg); }
.case-card.hidden { display: none; }

/* Filter-chips en tags */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 44px; }
.chip { padding: 11px 20px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 15px var(--display); color: var(--ink); cursor: pointer; transition: background .25s, color .25s, border-color .25s; }
.chip:hover { border-color: var(--blue-2); color: var(--blue-2); }
.chip.on { background: var(--navy); color: #fff; border-color: var(--navy); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-pill { padding: 7px 14px; border-radius: 999px; background: var(--grey); font-size: 14px; color: var(--ink); }
a.tag-pill:hover { background: var(--navy); color: #fff; }

/* Case-detail */
.case-visual { margin-top: -90px; position: relative; z-index: 3; }
.case-visual .frame { border-radius: 40px; background: linear-gradient(160deg, #13204a, var(--navy)); padding: clamp(24px, 6vw, 80px); position: relative; overflow: hidden; box-shadow: 0 40px 100px -50px rgba(10,19,41,.7); }
.case-visual .frame::after { content: ""; position: absolute; width: 22%; height: 160%; border-radius: 999px; background: var(--grad); opacity: .5; right: 6%; top: -30%; transform: rotate(-26deg); }
.case-visual img { position: relative; z-index: 1; width: 100%; filter: drop-shadow(0 30px 40px rgba(0,0,0,.4)); }
.facts-list { display: grid; gap: 24px; margin: 0; }
.facts-list dt { font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; }
.facts-list dd { margin: 0; }
.facts-list dd a.site { font: 600 18px var(--display); color: var(--blue-2); word-break: break-all; }

/* Blog */
.posts.three { grid-template-columns: repeat(3, 1fr); }
.post .thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; transition: transform .6s cubic-bezier(.2,.8,.2,1); }
.post .thumb.has-img::after { display: none; }
.post:hover .thumb img { transform: scale(1.06); }
.post .excerpt { color: var(--muted); font-size: 15px; }
.post.featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; }
.post.featured .thumb { aspect-ratio: 16/10; }
.post.featured h3 { font-size: clamp(30px, 3.4vw, 46px); margin: 6px 0 14px; }
.article-meta { display: flex; flex-wrap: wrap; gap: 20px; color: #aab4d0; font-size: 15px; }
.article-cover { margin-top: -90px; position: relative; z-index: 3; }
.article-cover img { width: 100%; aspect-ratio: 21/9; object-fit: cover; border-radius: 36px; box-shadow: 0 40px 100px -50px rgba(10,19,41,.7); }

/* Vorige/volgende */
.pager { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-top: 70px; }
.pager a { background: #fff; border: 1px solid var(--line); border-radius: 24px; padding: 26px 30px; transition: border-color .3s, transform .3s; }
.pager a:hover { border-color: var(--blue-2); transform: translateY(-3px); }
.pager small { display: block; color: var(--muted); font-size: 13px; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 6px; }
.pager b { font: 700 19px/1.3 var(--display); }
.pager .next { text-align: right; grid-column: 2; }

/* Contactpagina */
.contact-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.contact-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; display: flex; flex-direction: column; gap: 6px; transition: transform .3s, box-shadow .3s; }
a.contact-card:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -30px rgba(10,19,41,.3); }
.contact-card .k { width: 54px; height: 54px; border-radius: 18px; background: var(--grad); color: #fff; display: grid; place-items: center; margin-bottom: 16px; }
.contact-card small { color: var(--muted); text-transform: uppercase; letter-spacing: .1em; font-size: 12px; font-weight: 600; }
.contact-card b { font: 600 19px/1.35 var(--display); }
.contact-card span { color: var(--muted); font-size: 15px; }
.map { border-radius: 36px; overflow: hidden; border: 1px solid var(--line); aspect-ratio: 21/9; background: #dfe5f0; }
.map iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.4) contrast(1.05); }
.map iframe[hidden], .map-consent[hidden] { display: none; }
.map-consent { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; padding: 1.5rem; text-align: center; }

/* Diensten-overzicht (grote rijen) */
.service-rows { border-top: 1px solid var(--line); }
.service-row { display: grid; grid-template-columns: 90px 1fr 1.2fr 60px; gap: 30px; align-items: center; padding: 40px 0; border-bottom: 1px solid var(--line); transition: padding .4s; position: relative; isolation: isolate; }
.service-row::before { content: ""; position: absolute; inset: 0 -30px; border-radius: 28px; background: #fff; opacity: 0; transition: opacity .4s; z-index: -1; }
.service-row:hover::before { opacity: 1; }
.service-row:hover { padding-left: 20px; padding-right: 20px; }
.service-row .n { font: 800 40px var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--blue-2); }
.service-row h3 { font-size: clamp(28px, 3vw, 40px); font-weight: 800; }
.service-row p { color: var(--muted); }
.service-row .go { width: 56px; height: 56px; border-radius: 50%; background: var(--grey); display: grid; place-items: center; transition: background .4s, color .4s, transform .4s; }
.service-row:hover .go { background: var(--red); color: #fff; transform: rotate(-45deg); }

/* Diverse */
.bg-white { background: #fff; }
.center { text-align: center; }
.mt-60 { margin-top: 60px; }
.section-tight { padding: clamp(70px, 9vw, 110px) 0; }
.big-404 { font: 900 clamp(140px, 28vw, 380px)/.8 var(--display); letter-spacing: -.06em; }

@media (max-width: 1080px) {
  .split { grid-template-columns: 1fr; gap: 60px; }
  .aside { position: static; }
  .values, .cases, .contact-cards, .posts.three { grid-template-columns: repeat(2, 1fr); }
  .post.featured { grid-template-columns: 1fr; gap: 24px; }
  .service-row { grid-template-columns: 60px 1fr 50px; }
  .service-row p { grid-column: 2 / 3; }
  .nav-links .sub { display: none; }
}
@media (max-width: 680px) {
  .page-hero { padding: 150px 0 80px; }
  .page-hero .stroke { width: 70px; height: 260px; right: -30px; opacity: .5; }
  .values, .cases, .cases.two, .contact-cards, .posts.three, .checks.two, .pager { grid-template-columns: 1fr; }
  .pager .next { grid-column: 1; text-align: left; }
  .service-row { grid-template-columns: 1fr 50px; gap: 12px; padding: 30px 0; }
  .service-row .n { display: none; }
  .service-row p { grid-column: 1 / -1; }
  .map { aspect-ratio: 4/3; }
  .case-visual, .article-cover { margin-top: -50px; }
  .cta-band { border-radius: 28px; }
}

/* Toegankelijkheid & kleine extra's */
.skip { position: absolute; left: 16px; top: -60px; z-index: 100; padding: 12px 18px; border-radius: 12px; background: #fff; color: var(--navy); font-weight: 600; transition: top .2s; }
.skip:focus { top: 16px; }
.foot-h { color: #fff; font-size: 16px; font-weight: 600; margin-bottom: 18px; letter-spacing: 0; font-family: var(--display); }
.split .steps { grid-template-columns: repeat(2, 1fr); }
:focus-visible { outline: 3px solid var(--red); outline-offset: 3px; border-radius: 8px; }
@media (max-width: 680px) { .split .steps { grid-template-columns: 1fr; } }
.about-card .quote, .about-card .who { z-index: 1; }
.about-card .stroke { opacity: .6; }
.prose .pager a, .prose a.tag-pill { text-decoration: none; color: inherit; }
.prose .pager b { color: var(--ink); }
.prose .pager a:hover b { color: var(--blue-2); }

/* "Think like there is NO BOX!" */
.nobox { padding: clamp(60px, 9vw, 120px) 0 clamp(90px, 12vw, 160px); overflow: hidden; }
.nobox-inner { text-align: center; }
.nobox-pre { font: 600 clamp(22px, 3vw, 40px)/1.2 var(--display); color: var(--muted); margin: 26px 0 10px; letter-spacing: -.01em; }
.nobox-inner.in .nobox-h { font-size: clamp(40px, 7.2vw, 112px); font-weight: 800; line-height: 1.05; }
.nobox-word { position: relative; display: inline-block; padding: .08em .22em; margin-top: .12em; white-space: nowrap; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.nobox-word .bang { display: inline-block; transform-origin: bottom center; color: var(--red); -webkit-text-fill-color: var(--red); background: none; margin-left: .04em; }
.edge { position: absolute; display: block; background: var(--navy); border-radius: 6px; }
.edge.t, .edge.b { height: 6px; left: 0; right: 0; }
.edge.l, .edge.r { width: 6px; top: 0; bottom: 0; }
.edge.t { top: 0; } .edge.b { bottom: 0; } .edge.l { left: 0; } .edge.r { right: 0; }
.edge.r { background: var(--red); } .edge.b { background: var(--blue-2); }
/* Herhalende animatie: kader dicht -> springt open -> blijft even open -> sluit weer */
.nobox-inner.in .edge { animation: 4.8s cubic-bezier(.2,.8,.2,1) .4s infinite both; }
.nobox-inner.in .edge.t { animation-name: edge-t; }
.nobox-inner.in .edge.r { animation-name: edge-r; }
.nobox-inner.in .edge.b { animation-name: edge-b; }
.nobox-inner.in .edge.l { animation-name: edge-l; }
.nobox-inner.in .nobox-word .bang { animation: bang 4.8s ease-out .4s infinite both; }
@keyframes edge-t { 0%, 18%, 92%, 100% { transform: none; opacity: 1; } 34%, 72% { transform: translate(-8%, -.45em) rotate(-7deg); opacity: .35; } }
@keyframes edge-r { 0%, 18%, 92%, 100% { transform: none; opacity: 1; } 34%, 72% { transform: translate(.55em, -.15em) rotate(16deg); opacity: .35; } }
@keyframes edge-b { 0%, 18%, 92%, 100% { transform: none; opacity: 1; } 34%, 72% { transform: translate(8%, .4em) rotate(5deg); opacity: .35; } }
@keyframes edge-l { 0%, 18%, 92%, 100% { transform: none; opacity: 1; } 34%, 72% { transform: translate(-.5em, .2em) rotate(-16deg); opacity: .35; } }
@keyframes bang { 0%, 20% { transform: none; } 28% { transform: scale(1.35) rotate(-14deg); } 36%, 74% { transform: rotate(8deg); } 90%, 100% { transform: none; } }
@media (prefers-reduced-motion: reduce) { .edge { opacity: .35; animation: none !important; } }

/* Klanten met website-screenshot */
.case-card .shot img.screen { border-radius: 12px; box-shadow: 0 20px 40px -18px rgba(0,0,0,.6); filter: none; aspect-ratio: 16/10; object-fit: cover; object-position: top; }
.case-visual .frame.screen-frame img { border-radius: 18px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.7); filter: none; }

/* Filters klanten */
.chips-label { align-self: center; margin-right: 6px; font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); min-width: 64px; }
.filter-empty { color: var(--muted); margin: 0 0 30px; }

/* Regio's */
.region-chips { gap: 10px; }
.region-chips .tag-pill { padding: 11px 18px; font: 500 15px var(--display); background: var(--grey); transition: background .25s, color .25s; }
.region-chips .tag-pill:hover { background: var(--navy); color: #fff; }
.region-grid .card { min-height: 0; }
.region-grid .card .num { text-transform: uppercase; }
.section-head h2 a:hover .grad-text { opacity: .8; }

/* Footer met 5 kolommen */
.foot-top { grid-template-columns: 1.3fr 1fr .9fr 1fr 1fr; gap: 40px; }
@media (max-width: 1080px) { .foot-top { grid-template-columns: 1fr 1fr 1fr; } .foot-top > div:first-child { grid-column: 1 / -1; } }
@media (max-width: 680px) { .foot-top { grid-template-columns: 1fr 1fr; } }

/* ===== Werk (portfolio per sector) ===== */
.work-intro { font: 500 clamp(20px, 2vw, 26px)/1.5 var(--display); max-width: 900px; color: var(--ink); }
.work-toc { margin-top: 30px; gap: 10px; }
.work-toc .tag-pill { padding: 10px 16px; font: 500 14px var(--display); background: #fff; border: 1px solid var(--line); }
.work-toc .tag-pill:hover { background: var(--navy); color: #fff; }
.work-group { padding: clamp(60px, 8vw, 100px) 0; border-top: 1px solid var(--line); }
.work-group:nth-child(even) { background: #fff; }
.work-grid { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 70px; align-items: start; }
.work-head { position: sticky; top: 110px; }
.work-n { display: block; font: 800 64px/1 var(--display); color: transparent; -webkit-text-stroke: 1.5px var(--blue-2); margin-bottom: 18px; }
.work-head h2 { font-size: clamp(32px, 3.4vw, 46px); font-weight: 800; margin-bottom: 18px; }
.work-head p { color: var(--muted); }
.work-filter { display: inline-block; margin-top: 22px; font: 600 15px var(--display); color: var(--blue-2); }
.work-list { display: grid; gap: 14px; }
.work-row { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: center; padding: 16px; border-radius: 24px; border: 1px solid var(--line); background: var(--grey); transition: transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s, border-color .35s; }
.work-group:nth-child(even) .work-row { background: var(--grey); }
.work-group:nth-child(odd) .work-row { background: #fff; }
.work-row:hover { transform: translateX(6px); border-color: transparent; box-shadow: 0 24px 50px -30px rgba(10,19,41,.4); }
.work-thumb { display: block; aspect-ratio: 16/10; border-radius: 16px; overflow: hidden; background: var(--navy-2); }
.work-thumb img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.work-thumb img:not(.screen) { object-fit: contain; padding: 6%; }
.work-txt { display: grid; gap: 6px; }
.work-txt small { color: var(--muted); font-size: 13px; }
.work-txt b { font: 700 22px/1.2 var(--display); }
.work-txt b span { color: var(--red); transition: margin .3s; }
.work-row:hover .work-txt b span { margin-left: 6px; }
.work-txt > span { color: var(--muted); font-size: 15px; line-height: 1.55; }

/* Overzicht-kaarten met beschrijving */
.case-card .case-sub { margin: 0 0 4px; }
.case-desc { color: var(--muted); font-size: 15px; line-height: 1.55; margin-top: -6px; }
.case-more { font: 600 14px var(--display); color: var(--blue-2); }

/* Projectpagina */
.case-facts { display: flex; flex-wrap: wrap; gap: 14px 46px; margin: 34px 0 0; padding-top: 26px; border-top: 1px solid var(--line-dark); max-width: 900px; }
.case-facts dt { font: 600 12px var(--body); letter-spacing: .12em; text-transform: uppercase; color: #8d99bb; margin-bottom: 6px; }
.case-facts dd { margin: 0; font: 500 17px var(--display); color: #fff; }
.case-facts a:hover { color: #9fb3ea; }
.case-caption { text-align: center; color: var(--muted); font-size: 14px; margin-top: 16px; }
.case-step { display: block; font: 600 13px var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.case-services { list-style: none; padding: 0 !important; display: grid; gap: 10px; }
.case-services li + li { margin-top: 0; }
.case-services a { display: flex; align-items: center; gap: 18px; padding: 18px 22px; border-radius: 18px; background: #fff; border: 1px solid var(--line); text-decoration: none !important; color: var(--ink) !important; font: 600 18px var(--display); transition: border-color .3s, transform .3s; }
.case-services a:hover { border-color: var(--blue-2); transform: translateX(4px); }
.case-services .n { font: 800 22px var(--display); color: transparent; -webkit-text-stroke: 1px var(--blue-2); }
.case-services .go { margin-left: auto; color: var(--red); }
.visit-band { display: flex; justify-content: space-between; align-items: center; gap: 30px; flex-wrap: wrap; }
.visit-band h2 { font-size: clamp(30px, 3.6vw, 48px); font-weight: 800; margin-top: 14px; }

@media (max-width: 1080px) {
  .work-grid { grid-template-columns: 1fr; gap: 34px; }
  .work-head { position: static; }
}
@media (max-width: 680px) {
  .work-row { grid-template-columns: 1fr; gap: 14px; }
  .case-facts { gap: 18px 30px; }
}

/* CTA-band niet tegen een sectie met andere achtergrond plakken */
.bg-white + .cta-section, .dark + .cta-section, .contact + .cta-section, .work-group + .cta-section { padding-top: clamp(60px, 8vw, 110px); }

/* Menu op één regel houden op kleinere laptops */
.nav-links a, .nav-phone { white-space: nowrap; }
@media (max-width: 1360px) { .nav-phone { display: none; } }
@media (max-width: 1240px) { .nav-links a { padding: 10px 13px; font-size: 14.5px; } .nav .wrap { gap: 16px; } }

/* Tag-knoppen in tekstblokken: zichtbaar als knop + leesbare hover */
.prose a.tag-pill, .aside-card a.tag-pill { background: #fff; border: 1px solid var(--line); color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.prose a.tag-pill:hover, .aside-card a.tag-pill:hover, a.tag-pill:hover { background: var(--navy); border-color: var(--navy); color: #fff !important; }
.region-chips .tag-pill:hover, .work-toc .tag-pill:hover { color: #fff !important; }

/* Blog: grafische thumbnails voor artikels zonder foto */
.post .thumb.art { display: grid; place-items: center; background: var(--navy); }
.post .thumb.art::after { opacity: .55; }
.post:nth-child(3n+2) .thumb.art { background: var(--blue); }
.post:nth-child(3n) .thumb.art { background: #13204a; }
.post .thumb.art .art-ico { position: relative; z-index: 1; width: 84px; height: 84px; border-radius: 26px; display: grid; place-items: center; background: rgba(255,255,255,.12); color: #fff; backdrop-filter: blur(6px); transition: transform .5s; }
.post:hover .thumb.art .art-ico { transform: rotate(-8deg) scale(1.06); }
.cover-art { position: relative; overflow: hidden; aspect-ratio: 21/7; border-radius: 36px; background: linear-gradient(160deg, #13204a, var(--navy)); display: grid; place-items: center; box-shadow: 0 40px 100px -50px rgba(10,19,41,.7); }
.cover-art::after { content: ""; position: absolute; width: 14%; height: 220%; border-radius: 999px; background: var(--grad); right: 14%; top: -60%; transform: rotate(-26deg); opacity: .8; }
.cover-art .art-ico { position: relative; z-index: 1; width: 120px; height: 120px; border-radius: 34px; display: grid; place-items: center; background: rgba(255,255,255,.1); color: #fff; }
.cover-art .cover-cat { position: absolute; left: 30px; bottom: 26px; z-index: 1; padding: 8px 16px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--navy); font: 600 13px var(--display); letter-spacing: .06em; text-transform: uppercase; }
@media (max-width: 680px) { .cover-art { aspect-ratio: 16/9; border-radius: 24px; } }

/* Dienstpagina: inbegrepen + links */
.includes { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.include { display: flex; align-items: center; gap: 14px; padding: 20px 22px; border-radius: 20px; background: var(--grey); font: 500 16px/1.3 var(--display); }
.include .ok { flex: none; width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--grad); color: #fff; font-size: 14px; }
.link-cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; }
.link-h { font-size: clamp(24px, 2.4vw, 32px); font-weight: 800; margin: 14px 0 22px; }
@media (max-width: 1080px) { .includes { grid-template-columns: repeat(2, 1fr); } .link-cols { grid-template-columns: 1fr; gap: 40px; } }
@media (max-width: 680px) { .includes { grid-template-columns: 1fr; } }

/* Oproep midden in een tekst, met knop */
.inline-cta { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin: 2.2em 0 !important; padding: 28px 30px; border-radius: 24px; background: var(--navy); color: #fff; position: relative; overflow: hidden; }
.inline-cta::after { content: ""; position: absolute; width: 70px; height: 260px; border-radius: 99px; background: var(--grad); right: 22%; top: -60px; transform: rotate(-26deg); opacity: .35; }
.inline-cta > * { position: relative; z-index: 1; }
.inline-cta div { display: grid; gap: 6px; max-width: 460px; }
.inline-cta b { font: 700 22px/1.25 var(--display); color: #fff; }
.inline-cta span { color: #c7d0e8; font-size: 16px; }
.prose .inline-cta a.btn { color: #fff; text-decoration: none; }

/* ===== Homepage: over ons + NO BOX herwerkt ===== */
.section.about { padding-bottom: clamp(70px, 8vw, 110px); }
.about-card { justify-content: space-between; padding: 44px; background: radial-gradient(120% 80% at 100% 0%, #1b2a5e 0%, var(--navy) 60%); }
.about-card .stroke { width: 84px; height: 300px; right: 34px; left: auto; top: -70px; transform: rotate(-26deg); opacity: .95; box-shadow: none; }
.about-card::before { content: "\201C"; position: relative; z-index: 1; font: 900 180px/0.8 var(--display); background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; margin-top: 40px; }
.about-card .quote { color: #fff; font-size: clamp(24px, 2.3vw, 32px); line-height: 1.22; margin-top: auto; }
.about-card .who { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--line-dark); }

/* NO BOX als donkere blikvanger */
.nobox { position: relative; background: var(--navy); color: #fff; padding: clamp(90px, 10vw, 140px) 0; isolation: isolate; }
.nobox::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: radial-gradient(40% 70% at 15% 100%, rgba(222,45,47,.28), transparent 70%), radial-gradient(45% 80% at 85% 0%, rgba(31,68,160,.55), transparent 70%); }
.nobox::after { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .35;
  background-image: linear-gradient(var(--line-dark) 1px, transparent 1px), linear-gradient(90deg, var(--line-dark) 1px, transparent 1px); background-size: 80px 80px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 0%, transparent 70%); }
.nobox .eyebrow { color: #9fb3ea; }
.nobox-pre { color: #aab4d0; }
.nobox-h { color: #fff; }
.edge { background: #fff; }
.edge.r { background: var(--red); } .edge.b { background: #6f8ee0; }
.nobox + .section { padding-top: clamp(90px, 10vw, 140px); }
.nobox .nobox-word { background: linear-gradient(150deg, #8aa6f5 0%, #8aa6f5 18%, #b77aa8 50%, #ff5153 100%); -webkit-background-clip: text; background-clip: text; }

/* Artikelpagina: rustigere kop en afbeelding */
.page-hero.article-hero { padding: 170px 0 140px; }
.page-hero.article-hero h1 { font-size: clamp(34px, 4.2vw, 58px); line-height: 1.1; letter-spacing: -.015em; max-width: 860px; margin: 18px 0 22px; }
.page-hero.article-hero .stroke { width: 80px; height: 300px; right: 10%; top: 50%; opacity: .7; }
.page-hero.article-hero .orb-blue { opacity: .35; }
.article-cover { max-width: 980px; }
.article-cover img, .article-cover .cover-art { aspect-ratio: 16/9; border-radius: 28px; }
@media (max-width: 680px) { .page-hero.article-hero { padding: 140px 0 100px; } }
.wrap.article-cover { width: min(980px, 100% - 40px); margin-left: max(20px, calc((100% - 1240px) / 2)); margin-right: auto; }
/* NO BOX: optisch gelijke ruimte boven en onder */
.nobox { padding: clamp(70px, 8vw, 112px) 0 clamp(90px, 10vw, 140px); }
.nobox-inner > .eyebrow { vertical-align: top; }

/* Footer: "Just call us." duidelijker */
.foot-giant { color: #fff; -webkit-text-stroke: 0; opacity: 1; }
.foot-giant span { -webkit-text-stroke: 0; }
.foot-giant span { color: transparent; -webkit-text-fill-color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; }
/* Footer: terug naar omtrek, maar 30% wit */
.foot-giant { color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.3); }
.foot-giant span { -webkit-text-stroke: 0; }
/* Omtrek zonder interne overlaplijnen: vulling in achtergrondkleur over de lijn */
.foot-giant { color: #060c1c; -webkit-text-fill-color: #060c1c; -webkit-text-stroke: 2px rgba(255,255,255,.3); paint-order: stroke fill; }

/* ===== Omtrekcijfers en -tekst zonder interne overlaplijnen =====
   Vulling = achtergrondkleur van de sectie (--bg), lijn dubbel zo dik want de binnenhelft valt weg. */
:root { --bg: var(--grey); }
.bg-white, .work-group:nth-child(even), .service-row:hover, .case-services a, .card { --bg: #fff; }
.dark, .nobox, .contact, .page-hero, .hero, .card.big { --bg: var(--navy); }
.marquee { --bg: var(--blue); }
.step .n, .service-row .n, .work-n, .case-services .n {
  -webkit-text-fill-color: var(--bg); color: var(--bg); paint-order: stroke fill;
}
.step .n, .work-n { -webkit-text-stroke: 3px var(--blue-2); }
.service-row .n { -webkit-text-stroke: 3px var(--blue-2); }
.case-services .n { -webkit-text-stroke: 2px var(--blue-2); }
.dark .step .n, .dark .work-n { -webkit-text-stroke-color: #9fb3ea; }
.marquee span:nth-child(even), .marquee a:nth-child(even) { color: var(--bg); -webkit-text-fill-color: var(--bg); -webkit-text-stroke: 3px rgba(255,255,255,.85); paint-order: stroke fill; }

/* <picture> gedraagt zich als de img erin (bestaande img-selectors blijven werken) */
picture { display: contents; }

/* Blogthumbnails in de verhouding van de illustraties (16:9) zodat niets wegvalt */
.post .thumb.has-img, .post .thumb.art { aspect-ratio: 16 / 9; }

/* ===== 404: "Let there be light" ===== */
.lights .wrap { position: relative; z-index: 2; }
/* Zaklamp: donker overal behalve rond de muis; dooft uit zodra het licht aangaat */
.lights .spot { position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: radial-gradient(circle 240px at var(--x, 50%) var(--y, 42%), rgba(4,7,18,0) 0%, rgba(4,7,18,.55) 45%, rgba(4,7,18,.95) 100%);
  animation: lights-on .9s ease 2.3s forwards; }
@keyframes lights-on { to { opacity: 0; visibility: hidden; } }
/* Neonbuis die aanflikkert, daarna af en toe een korte stroomhapering */
.lights .big-404 { animation: neon-on 2.4s linear .3s both, neon-hiccup 9s linear 3.2s infinite; }
@keyframes neon-on {
  0% { opacity: .07; filter: none; }
  7% { opacity: 1; filter: drop-shadow(0 0 40px rgba(31,68,160,.85)); }
  10% { opacity: .12; filter: none; }
  20% { opacity: .9; filter: drop-shadow(0 0 30px rgba(31,68,160,.7)); }
  23% { opacity: .2; filter: none; }
  38% { opacity: 1; }
  41% { opacity: .45; }
  60%, 100% { opacity: 1; filter: drop-shadow(0 0 28px rgba(222,45,47,.45)) drop-shadow(0 0 90px rgba(31,68,160,.55)); }
}
@keyframes neon-hiccup {
  0%, 91%, 100% { opacity: 1; filter: drop-shadow(0 0 28px rgba(222,45,47,.45)) drop-shadow(0 0 90px rgba(31,68,160,.55)); }
  92% { opacity: .25; filter: none; }
  93% { opacity: 1; }
  94.5% { opacity: .5; filter: none; }
  96% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) { .lights .spot { display: none; } .lights .big-404 { opacity: 1; } }

/* Marquee-streepje in de lichte variant van het merkverloop (blauw -> rood), leesbaar op logoblauw */
.marquee span::after, .marquee a::after { background: linear-gradient(160deg, #8aa6f5 0%, #b77aa8 50%, #ff5153 100%); }

/* Checklijst: tekst als één doorlopende regel (geen flex-kolommen bij <strong>) */
.checks li { display: block; position: relative; padding-left: 42px; }
.checks li::before { position: absolute; left: 0; top: 0; }

/* Vier principes naast elkaar */
.values { grid-template-columns: repeat(4, 1fr); }
.value { padding: 34px 28px; }
.value p a { color: var(--blue-2); font-weight: 600; white-space: nowrap; }
.dark .value p a { color: #9fb3ea; }
@media (max-width: 1080px) { .values { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px) { .values { grid-template-columns: 1fr; } }

/* Drie pijlers op /diensten/ */
.pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.pillar { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 40px 36px; display: flex; flex-direction: column; transition: transform .4s cubic-bezier(.2,.8,.2,1), box-shadow .4s; }
.pillar:hover { transform: translateY(-6px); box-shadow: 0 30px 60px -30px rgba(10,19,41,.35); }
.pillar-ico { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--grey); color: var(--red); margin-bottom: 28px; transition: background .4s, color .4s, transform .4s; }
.pillar:hover .pillar-ico { background: var(--grad); color: #fff; transform: rotate(-8deg); }
.pillar h3 { font-size: 30px; font-weight: 800; margin-bottom: 12px; }
.pillar > p { color: var(--muted); font-size: 16px; }
.pillar ul { list-style: none; margin: 26px 0 0; padding: 0; border-top: 1px solid var(--line); }
.pillar li a { display: flex; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--line); font: 500 16px var(--display); color: var(--ink); transition: color .2s, padding .2s; }
.pillar li a::after { content: "\2192"; color: var(--red); opacity: 0; transition: opacity .2s; }
.pillar li a:hover { color: var(--blue-2); padding-left: 6px; }
.pillar li a:hover::after { opacity: 1; }
.pillar .more { margin-top: auto; padding-top: 26px; font: 600 15px var(--display); color: var(--blue-2); display: inline-flex; gap: 8px; align-items: center; }
@media (max-width: 1080px) { .pillars { grid-template-columns: 1fr; } }

/* Optisch gelijke ruimte boven/onder secties die met een eyebrow-label beginnen */
.eyebrow { display: flex; width: max-content; max-width: 100%; }
.section > .wrap > .section-head:first-child,
.section > .wrap > .split:first-child { margin-top: -12px; }
/* Gelijke ruimte boven en onder: geen optische correctie meer */
.section > .wrap > .section-head:first-child,
.section > .wrap > .split:first-child { margin-top: 0; }

/* ===== Eén vaste sectieruimte: boven = onder, overal waar de achtergrond wisselt ===== */
:root { --sp: clamp(90px, 11vw, 160px); }
.section, .section-tight { padding-top: var(--sp); padding-bottom: var(--sp); }
.cta-section { padding: 0 0 var(--sp); }
.bg-white + .cta-section, .dark + .cta-section, .contact + .cta-section, .work-group + .cta-section,
.section-tight + .cta-section { padding-top: var(--sp); }
footer { padding-top: var(--sp); }
.page-hero { padding-bottom: var(--sp); }
.page-hero.compact { padding-bottom: var(--sp); }
.nobox { padding: var(--sp) 0; }
.nobox + .section { padding-top: var(--sp); }
.work-group { padding: var(--sp) 0; }
.section.about { padding-bottom: var(--sp); }
.page-hero .wrap > :last-child { margin-bottom: 0; }

/* Dienstkaarten (bento): compacter, nummer rechtsboven naast het icoon */
.card { min-height: 0; padding: 32px; }
.card .num { position: absolute; top: 34px; right: 32px; }
.card .ico { width: 56px; height: 56px; border-radius: 18px; margin: 0 0 22px; }
.card h3 { margin-bottom: 10px; }
.card .more { padding-top: 22px; }
.card.big .num { right: auto; left: auto; position: static; display: none; }

/* Projectvisual: screenshot vult de container, met browserbalk */
.case-visual .frame.screen-frame { padding: 0; background: #fff; }
.case-visual .frame.screen-frame::after { display: none; }
.case-visual .frame.screen-frame img { border-radius: 0; box-shadow: none; display: block; width: 100%; }
.browser-bar { display: flex; align-items: center; gap: 8px; padding: 14px 20px; background: #eef1f6; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 12px; height: 12px; border-radius: 50%; background: #d4d9e3; }
.browser-bar i:nth-child(1) { background: var(--red); } .browser-bar i:nth-child(2) { background: #f2b33d; } .browser-bar i:nth-child(3) { background: #3cc46b; }
.browser-bar span { margin-left: 14px; flex: 1; max-width: 420px; padding: 6px 16px; border-radius: 999px; background: #fff; font: 500 13px var(--body); color: var(--muted); }

/* ===== De V uit het logo, tegen de rand (zoals op het visitekaartje) ===== */
.hero-v { position: absolute; z-index: 1; right: -4%; bottom: -14%; height: 92%; width: auto; max-width: none; pointer-events: none;
  filter: drop-shadow(0 40px 80px rgba(222,45,47,.18)); animation: v-in 1.4s cubic-bezier(.2,.8,.2,1) .1s both; }
@keyframes v-in { from { opacity: 0; transform: translateY(8%) scale(.96); } }
.cta-band::after { display: none; }
.cta-band .cta-v { position: absolute; z-index: 0; right: -5%; top: -22%; height: 150%; width: auto; max-width: none; opacity: .12; pointer-events: none; }
@media (max-width: 1080px) { .hero-v { height: 70%; right: -18%; opacity: .55; } }
@media (max-width: 680px) { .hero-v { height: 48%; right: -30%; bottom: -8%; opacity: .35; } .cta-band .cta-v { height: 110%; right: -20%; top: auto; bottom: -25%; } }
@media (prefers-reduced-motion: reduce) { .hero-v { animation: none; } }
.hero-v { height: auto; width: min(44vw, 680px); right: -5vw; bottom: -16%; }
@media (max-width: 1080px) { .hero-v { width: 60vw; right: -16vw; bottom: -10%; opacity: .5; } }
@media (max-width: 680px) { .hero-v { width: 80vw; right: -30vw; bottom: -6%; opacity: .3; } }
.hero-v { bottom: 2%; width: min(40vw, 620px); right: -6vw; }

/* Logo-V in de koppen van subpagina's */
.page-v { position: absolute; z-index: 1; right: -7vw; bottom: -12%; width: min(34vw, 520px); height: auto; max-width: none; pointer-events: none;
  opacity: .9; animation: v-in 1.2s cubic-bezier(.2,.8,.2,1) .1s both; }
.page-hero.compact .page-v, .page-hero.article-hero .page-v { width: min(24vw, 360px); opacity: .55; bottom: -18%; }
.page-hero.with-visual .page-v { bottom: 6%; }
@media (max-width: 1080px) { .page-v { width: 50vw; right: -18vw; opacity: .4; } }
@media (max-width: 680px) { .page-v { width: 70vw; right: -30vw; opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .page-v { animation: none; } }

/* ===== Glow op de gekleurde woorden in de koppen ===== */
.hero h1 .grad-text, .page-hero h1 .grad-text {
  background-image: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.75) 50%, transparent 62%), var(--grad);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat;
  background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: head-shine 6s cubic-bezier(.4,0,.2,1) 1.2s infinite, head-glow 6s ease-in-out 1.2s infinite;
}
@keyframes head-shine { 0% { background-position: 160% 0, 0 0; } 35%, 100% { background-position: -60% 0, 0 0; } }
@keyframes head-glow {
  0%, 100% { filter: drop-shadow(0 0 0 rgba(31,68,160,0)); }
  18% { filter: drop-shadow(0 0 18px rgba(31,68,160,.75)) drop-shadow(0 0 34px rgba(222,45,47,.45)); }
  45% { filter: drop-shadow(0 0 6px rgba(222,45,47,.25)); }
}
@media (prefers-reduced-motion: reduce) { .hero h1 .grad-text, .page-hero h1 .grad-text { animation: none; } }
.hero h1 .grad-text, .page-hero h1 .grad-text {
  background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%), var(--grad); }

/* Glow + glans op gekleurde woorden in titels van alle donkere secties */
.dark h2 .grad-text, .contact h2 .grad-text, .nobox .nobox-word, footer .foot-giant span {
  background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%), var(--grad);
  background-size: 260% 100%, 100% 100%; background-repeat: no-repeat; background-position: 160% 0, 0 0;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: head-shine 6s cubic-bezier(.4,0,.2,1) 1.2s infinite, head-glow 6s ease-in-out 1.2s infinite;
}
/* NO BOX houdt zijn lichtere verloop */
.nobox .nobox-word { background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%), linear-gradient(150deg, #8aa6f5 0%, #8aa6f5 18%, #b77aa8 50%, #ff5153 100%); }
@media (prefers-reduced-motion: reduce) { .dark h2 .grad-text, .contact h2 .grad-text, .nobox .nobox-word, footer .foot-giant span { animation: none; } }
/* NO BOX: geen glans-laag (botst met het animerende uitroepteken); terug naar het eigen verloop */
.nobox .nobox-word { background-image: linear-gradient(150deg, #8aa6f5 0%, #8aa6f5 18%, #b77aa8 50%, #ff5153 100%); background-size: 100% 100%; background-position: 0 0; animation: none; }

/* Muis-gloed in alle donkere secties */
.has-glow { position: relative; overflow: hidden; isolation: isolate; }
.has-glow > .cursor-glow { z-index: 0; opacity: 0; transition: left .4s ease-out, top .4s ease-out, opacity .5s; }
.hero.has-glow > .cursor-glow { opacity: 1; }
.has-glow > .wrap { position: relative; z-index: 2; }
footer.has-glow > .cursor-glow { background: radial-gradient(circle, rgba(31,68,160,.22), transparent 65%); }

/* Glow per letter: drop-shadow op een omhullende span i.p.v. op de tekst met background-clip
   (Chrome tekent anders een rechthoekige gloed rond het hele vak) */
.hero h1 .grad-text, .page-hero h1 .grad-text,
.dark h2 .grad-text, .contact h2 .grad-text, footer .foot-giant span {
  animation: head-shine 6s cubic-bezier(.4,0,.2,1) 1.2s infinite;
}
.glow-wrap { display: inline-block; position: relative; }
.glow-wrap > .grad-text { position: relative; }
.glow-wrap > .glow-shadow {
  position: absolute; inset: 0; pointer-events: none; white-space: nowrap;
  color: transparent; -webkit-text-fill-color: transparent; background: none;
  animation: text-glow 6s ease-in-out 1.2s infinite;
}
@keyframes text-glow {
  0%, 100% { text-shadow: 0 0 0 rgba(31,68,160,0); }
  18% { text-shadow: 0 0 18px rgba(31,68,160,.75), 0 0 34px rgba(222,45,47,.45); }
  45% { text-shadow: 0 0 6px rgba(222,45,47,.25); }
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .grad-text, .page-hero h1 .grad-text, .dark h2 .grad-text, .contact h2 .grad-text, footer .foot-giant span, .glow-shadow { animation: none; }
}
footer .foot-giant .glow-wrap { background: none; animation: none; -webkit-text-fill-color: initial; }

/* Verplichte velden: rood sterretje bij het label */
.field input:required + label::after, .field textarea:required + label::after,
.privacy .req { content: " *"; color: var(--red, #DE2D2F); font-weight: 600; }

/* Minder sjabloon-look: eyebrows als gewone, kleine tekst (geen hoofdletters, geen streepje) */
.eyebrow { font: 600 13px/1.3 var(--body); letter-spacing: .1em; text-transform: uppercase; gap: 0; }
.eyebrow::before { content: none; }
/* Poppins loopt breder dan Outfit: koppen iets compacter */
h1, h2, h3, h4 { letter-spacing: -.03em; }

/* =====================================================================
   Ambachtelijke stijl: typische "AI-sjabloon"-kenmerken eruit
   - geen verloop/gloed/glans op tekst, maar effen merkkleur
   - geen wazige lichtbollen, raster of muisgloed
   - rechthoekige knoppen zonder gloed en zonder pijl-bolletje
   - kaarten met kleine hoeken, zonder icoontegels
   - geen inschuif-animaties bij het scrollen
   ===================================================================== */
:root { --radius: 6px; }

/* Tekst: merkverloop op de accentwoorden, zonder gloed of glans */
.grad-text, .fact .big {
  background-image: var(--grad) !important; background-size: 100% 100%; background-position: 0 0; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
  animation: none !important; filter: none !important; text-shadow: none !important;
}
/* Gloed (per letter) en glans terug op de koppen */
.hero h1 .grad-text, .page-hero h1 .grad-text, .dark h2 .grad-text, .contact h2 .grad-text, footer .foot-giant span {
  /* geen background-shorthand met !important: die zet ook de positie vast en blokkeert de glans-animatie */
  background-image: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%), var(--grad) !important;
  background-size: 260% 100%, 100% 100% !important; background-repeat: no-repeat !important; background-position: 160% 0, 0 0;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important; filter: none !important; text-shadow: none !important;
  animation: head-shine 6s cubic-bezier(.4,0,.2,1) 1.2s infinite !important;
}
@media (prefers-reduced-motion: reduce) {
  .hero h1 .grad-text, .page-hero h1 .grad-text, .dark h2 .grad-text, .contact h2 .grad-text, footer .foot-giant span { animation: none !important; }
}

/* Achtergronden: geen lichtbollen, raster of muisgloed */
/* Header-achtergrond (raster + lichtbollen) en muisgloed blijven; elders geen lichtbollen */
.orb { display: none; }
.hero .orb, .page-hero .orb, .contact .orb { display: block; }
.nobox::after { content: none; }
.nobox::before { background: none; }

/* Navigatie: gewone links, actieve link onderlijnd */
.nav-links { background: none; border: 0; padding: 0; gap: 4px; }
.nav-links a { border-radius: 0; padding: 10px 12px; background: none !important; box-shadow: inset 0 -2px 0 transparent; }
.nav-links a:hover, .nav-links a.active, .nav-links .active > a { box-shadow: inset 0 -2px 0 var(--red); }

/* Knoppen */
.btn { border-radius: var(--radius); box-shadow: none !important; padding: 15px 24px; }
.btn .arrow { width: auto; height: auto; background: none !important; border-radius: 0; }
.btn:hover .arrow { transform: translateX(3px); }

/* Kaarten en blokken: kleine hoeken, geen icoontegels */
.card, .value, .client, .post .thumb, .case-card .shot, .aside-card, .contact-card, .pager a,
.faq details, .fact, .about-card, .case-visual .frame, .article-cover img, .map, form, .field input, .field textarea,
.cta-band, .prose blockquote, .nav-links .sub, .nav-links .sub a, .service-row::before { border-radius: var(--radius) !important; }
.card .ico { width: auto; height: auto; background: none !important; border-radius: 0; margin: 0 0 18px; }
.contact-card .k, .contact-list .k { background: none; width: auto; height: auto; border-radius: 0; }
.value .n { display: none; }
.tag-pill, .chip, .post .thumb span { border-radius: 3px; }
.checks li::before { background: none; color: var(--red); width: auto; height: auto; }
.case-card .shot::after, .post .thumb::after, .cta-band::after, .case-visual .frame::after { content: none; }
.card .more, .case-card .more { text-decoration: underline; text-underline-offset: 4px; text-decoration-thickness: 1px; }


/* Geen inschuif-animaties */
.reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
.card .ico { display: block; text-align: left; }
.card .ico svg { display: block; }
/* Stappen: gewone cijfers i.p.v. grote omlijnde nummers */
.step .n { font: 700 15px/1 var(--body) !important; color: var(--red) !important; -webkit-text-stroke: 0 !important; -webkit-text-fill-color: currentColor !important; background: none !important; letter-spacing: 0; margin-bottom: 14px; }

/* Blok "Je website werkt harder dan je denkt": merkverloop blijft (zonder gloed) */
.fact .big {
  background: var(--grad) !important; -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important; -webkit-text-fill-color: transparent !important;
}
.card .ico { display: flex !important; justify-content: flex-start !important; place-items: start !important; }

/* Minder scrollen: kleinere tussenruimte tussen secties */
:root { --sp: clamp(64px, 7vw, 112px); }

/* NO BOX compacter */
.nobox { padding: clamp(48px, 6vw, 84px) 0 !important; }
.nobox-pre { margin: 14px 0 6px; font-size: clamp(18px, 2.2vw, 30px); }
.nobox-inner.in .nobox-h { font-size: clamp(34px, 5.4vw, 84px); }

/* "Wist u dat?" compacter */
.facts-band { padding-block: clamp(56px, 6vw, 90px) !important; }
.facts-band .section-head { margin-bottom: 28px; }
.facts-band .fact { padding: 28px 32px; display: flex; align-items: center; gap: 28px; }
.facts-band .fact .big { font-size: clamp(52px, 6vw, 88px); margin: 0; flex: none; }
.facts-band .fact h3 { font-size: clamp(18px, 1.7vw, 22px); }
@media (max-width: 680px) { .facts-band .fact { flex-direction: column; align-items: flex-start; gap: 12px; } }

/* Foto van Stijn i.p.v. de letter */
.avatar.has-photo { overflow: hidden; background: none; }
.avatar.has-photo img, .avatar.has-photo picture { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Afbeeldingen met width/height-attributen: hoogte volgt de breedte (anders wordt de omslagfoto 900px hoog) */
img { height: auto; }

/* "harder" in Wist u dat? blijft effen rood */
.facts-band h2 .grad-text { background: none !important; animation: none !important; color: var(--red) !important; -webkit-text-fill-color: currentColor !important; }

/* Onderkant van letters als de g niet afknippen (verloop is aan het tekstvak geknipt) */
.glow-wrap > .grad-text { display: inline-block; padding-bottom: .16em; margin-bottom: -.16em; }

/* Gsm/tablet: gloed in de header beweegt vanzelf */
.auto-glow > .cursor-glow { opacity: 1; width: 380px; height: 380px; animation: glow-drift 14s ease-in-out infinite; }
@keyframes glow-drift {
  0%, 100% { left: 70%; top: 30%; }
  33% { left: 25%; top: 45%; }
  66% { left: 60%; top: 70%; }
}
@media (prefers-reduced-motion: reduce) { .auto-glow > .cursor-glow { animation: none; } }

/* Grote footertekst past altijd op het scherm */
.foot-giant { font-size: clamp(40px, 12.5vw, 240px); }

/* Titelregels: ruimte rond de tekst zodat staartletters (g, j, p) en de gloed niet worden afgeknipt */
.hero h1 .line { padding: .15em .5em .3em; margin: -.15em -.5em -.3em; }
/* Krappe letterafstand: laatste letter (bv. de s in "us") valt anders buiten het verloop */
.glow-wrap > :not(.glow-shadow) { display: inline-block; padding: 0 .1em .16em 0; margin: 0 -.1em -.16em 0; }

/* NO BOX: label gecentreerd zoals de tekst; meer ruimte tussen de kader en de regel erboven */
.nobox-inner > .eyebrow { margin-inline: auto; }
@media (max-width: 760px) { .nobox-word { margin-top: .4em; } }

/* Kaartje met citaat: hoogte volgt de inhoud, zodat citaat en naam op gsm niet wegvallen */
.about-card { aspect-ratio: auto; min-height: 0; height: auto; align-self: center; gap: 0; }
.about-card::before { font-size: 120px; margin-top: 0; }
.about-card .stroke { height: 210px; top: -70px; width: 70px; }
.about-card .quote { font-size: clamp(22px, 1.9vw, 28px); margin-top: 56px; }
@media (max-width: 760px) { .about-card { padding: 32px 28px; } .about-card::before { font-size: 96px; } .about-card .quote { margin-top: 40px; } }
/* Meer ruimte tussen NO BOX en het kader eromheen */
.nobox-word { padding: .2em .38em .16em; }
@media (max-width: 760px) { .nobox-word { margin-top: .5em; } }
/* Marquee: schuift exact één reeksbreedte op (--set, gemeten in main.js), zodat de herstart naadloos is */
.marquee-set { display: flex; flex-shrink: 0; }
.marquee-track { animation: marquee-set var(--dur, 32s) linear infinite; will-change: transform; backface-visibility: hidden; }
@keyframes marquee-set { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--set, 50%)), 0, 0); } }
@media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; } }

/* Compacte CTA-balk (o.a. "Benieuwd naar alles?" op /werk/): titel, tekst en knoppen op één rij */
.cta-band.cta-compact { padding: clamp(28px, 3.2vw, 44px) clamp(28px, 4vw, 56px); gap: 20px 40px; }
.cta-band.cta-compact h2 { font-size: clamp(26px, 2.6vw, 36px); max-width: none; }
.cta-band.cta-compact p { margin-top: 8px; max-width: 560px; }
.cta-band.cta-compact .cta-v { height: 220%; top: -60%; }

/* Dienstenlijst met nummering 01, 02, ...: op desktop grote omlijnde cijfers in een eigen kolom;
   op tablet en gsm iets kleiner, boven de titel.
   minmax(0, …) zodat lange titels niet over de tekst lopen */
.service-row { grid-template-columns: 90px minmax(0, 1fr) minmax(0, 1.2fr) 60px; }
.service-row .n { -webkit-text-stroke: 2.5px var(--red); font-size: 30px; }
/* Minder bombastisch: kleinere, minder zware titels en minder hoge rijen */
.service-row { grid-template-columns: 64px minmax(0, 1fr) minmax(0, 1.3fr) 60px; padding: 28px 0; }
.service-row h3 { font-size: clamp(22px, 1.9vw, 27px); font-weight: 700; }
@media (max-width: 1080px) {
  .service-row { grid-template-columns: minmax(0, 1fr) 50px; row-gap: 10px; }
  .service-row .n { display: block; grid-column: 1; grid-row: 1; font-size: 26px; line-height: 1; }
  .service-row h3 { grid-column: 1; grid-row: 2; }
  .service-row p { grid-column: 1 / -1; grid-row: 3; }
  .service-row .go { grid-column: 2; grid-row: 1 / 3; align-self: center; width: 44px; height: 44px; }
}



/* Contactkaarten: icoon was wit op wit sinds de gradiënttegel weg is */
.contact-card .k { color: var(--blue-2); margin-bottom: 10px; align-self: flex-start; }

/* Homepage-hero begint op dezelfde hoogte als de andere pagina's (was verticaal gecentreerd, op grote schermen lager) */
.hero { align-items: flex-start; padding-top: 190px; }
@media (max-width: 680px) { .hero { padding-top: 150px; } }

/* Gsm-menu: backdrop-filter op de header zelf maakt van de header het kader voor het vaste menu
   (menu zo hoog als de header, pagina erdoor zichtbaar). Daarom zit de achtergrond op een aparte laag; effen, niet doorschijnend. */
.nav.scrolled { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--navy); opacity: 0; transition: opacity .3s; pointer-events: none; }
.nav.scrolled::before { opacity: 1; }
.menu-open { overflow: hidden; }

/* ===== CMS-formulieren en paginering (geen tegenhanger in het prototype) ===== */
.contact-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.field.has-error input, .field.has-error textarea { border-color: var(--red); }
.field-fout { display: block; margin-top: 6px; font-size: 13px; color: var(--red); }
.form-fouten { margin: 0 0 20px; padding: 14px 18px; border-radius: 14px; background: #fdecec; color: #8f1d1f; font-weight: 500; }
.form-fouten p { margin: 0; }
.form-fouten + .form-fouten { margin-top: -8px; }
.field-check { display: flex; align-items: flex-start; gap: 12px; margin: 6px 0 18px; font-size: 14px; color: var(--muted); }
.field-check input { margin-top: 3px; flex: none; width: 18px; height: 18px; accent-color: var(--blue-2); }
.field-check a { text-decoration: underline; }
.field-check.has-error { color: var(--red); }
.vco-pagination { margin-top: 50px; }
.vco-pagination ul, .vco-pagination__lijst { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.vco-pagination__btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font: 500 15px var(--display); color: var(--ink); transition: background .25s, color .25s, border-color .25s; }
.vco-pagination__btn:hover { border-color: var(--blue-2); color: var(--blue-2); }
.vco-pagination__btn.is-active { background: var(--navy); border-color: var(--navy); color: #fff; }
.vco-pagination__ellipsis { display: inline-flex; align-items: center; height: 44px; padding: 0 6px; color: var(--muted); }
.vco-pagination__pijl { font-size: 18px; line-height: 1; }

/* Losse tekstpagina's (factuurvoorwaarden, privacy, cookiebeleid): volledige containerbreedte */
.prose.prose-breed { max-width: none; }

/* Marquee-items als links naar de dienstpagina's: lichte oplichting bij hover */
.marquee a:hover, .marquee a:focus-visible { text-decoration: underline; text-decoration-thickness: 3px; text-underline-offset: 8px; }

/* De ContentBuilder wikkelt elke sectie in .row > .col-md-12; de broerselectors
   hierboven (.bg-white + .cta-section, .nobox + .section, ...) zien de secties dan
   niet meer. Dezelfde afstanden via :has() op de rijen. */
.row:has(> * > .bg-white) + .row > * > .cta-section,
.row:has(> * > .dark) + .row > * > .cta-section,
.row:has(> * > .contact) + .row > * > .cta-section,
.row:has(> * > .work-group) + .row > * > .cta-section,
.row:has(> * > .section-tight) + .row > * > .cta-section { padding-top: var(--sp); }
.row:has(> * > .nobox) + .row > * > .section { padding-top: var(--sp); }

/* Stappen als verticale lijst (bedankpagina): nummer links, tekst rechts */
.steps.steps-lijst { grid-template-columns: 1fr; gap: 0; margin-top: 34px; }
.steps.steps-lijst .step { display: grid; grid-template-columns: 84px 1fr; gap: 18px; align-items: start; padding: 26px 0 28px; }
.steps.steps-lijst .step .n { font-size: 48px; margin: 0; line-height: 1.1; }
.steps.steps-lijst .step h3 { font-size: 22px; margin-bottom: 6px; }
.split .steps.steps-lijst { grid-template-columns: 1fr; }
.bedankt-h2 { font-size: clamp(32px, 4vw, 52px); font-weight: 800; margin-top: 18px; }
.bedankt-knoppen { margin: 22px 0 0; gap: 10px; }
.aside-card.dark-card .btn-ghost { color: #fff; border-color: rgba(255,255,255,.5); }