/* Nieuwe hero (ontwerp A4) op de huidige site. Losstaand van het thema, alleen de klassen hieronder. */
.hero-a4 { position: relative; background: #0E3340; color: #F2F8FA; overflow: hidden; display: flex; align-items: center; }
.hero-a4::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-a4 .hero-art { position: absolute; top: 2%; right: 5%; width: min(29vw, 440px); aspect-ratio: 536 / 562; z-index: 0; pointer-events: none; }
.hero-a4 .hero-art .para, .hero-a4 .hero-art .float { position: absolute; inset: 0; }
.hero-a4 .stroke { position: absolute; inset: 0; background: var(--accent, #0891B2); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; }
.hero-a4 .s1 { -webkit-mask-image: url(/assets/hero/streep1.png); mask-image: url(/assets/hero/streep1.png); opacity: 0.12; }
.hero-a4 .s2 { -webkit-mask-image: url(/assets/hero/streep2.png); mask-image: url(/assets/hero/streep2.png); opacity: 0.18; }
.hero-a4 .s3 { -webkit-mask-image: url(/assets/hero/streep3.png); mask-image: url(/assets/hero/streep3.png); opacity: 0.26; }
.hero-a4 .s4 { -webkit-mask-image: url(/assets/hero/streep4.png); mask-image: url(/assets/hero/streep4.png); opacity: 0.38; }
.hero-a4 .float { animation: a4float 9s ease-in-out infinite; }
.hero-a4 .f2 { animation-duration: 11s; animation-delay: -3s; }
.hero-a4 .f3 { animation-duration: 13s; animation-delay: -6s; }
.hero-a4 .f4 { animation-duration: 10s; animation-delay: -1.5s; }
@keyframes a4float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
.hero-a4 .hero-veil { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, #0E3340 18%, transparent 55%), linear-gradient(180deg, transparent 60%, #0E3340 100%); }
.hero-a4 .hero-bits { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-a4 .hero-a4-inner { position: relative; z-index: 3; box-sizing: border-box; padding: 150px 24px 88px; display: flex; flex-direction: column; align-items: flex-start; gap: 22px; max-width: none; }
.hero-a4 h1 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 800; font-size: clamp(40px, 5.4vw, 72px); letter-spacing: -0.04em; line-height: 0.98; max-width: 12ch; color: #F2F8FA; animation: none; }
.hero-a4 h1 .line { display: block; }
.hero-a4 h1 .muted { display: block; color: var(--accent, #0891B2); }
.hero-a4 .lead { margin: 0; max-width: 48ch; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; color: rgba(242, 248, 250, 0.72); animation: none; }
.hero-a4 .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 6px; animation: none; }
.hero-a4 .pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 980px; font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease; }
.hero-a4 .pill:active { transform: translateY(1px); }
.hero-a4 .pill .arr { transition: transform 0.25s ease; }
.hero-a4 .pill:hover .arr { transform: translateX(4px); }
.hero-a4 .pill-accent { background: var(--accent, #0891B2); color: #FFFFFF; }
.hero-a4 .pill-accent:hover { filter: brightness(1.08); }
.hero-a4 .pill-ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); color: #F2F8FA; }
.hero-a4 .pill-ghost:hover { background: rgba(255, 255, 255, 0.08); }
@supports (animation-timeline: view()) {
  .hero-a4 .hero-art .para { animation: a4para linear both; animation-timeline: view(); animation-range: exit 0% exit 100%; }
  .hero-a4 .hero-art .p1 { --d: 40px; } .hero-a4 .hero-art .p2 { --d: 90px; } .hero-a4 .hero-art .p3 { --d: 150px; } .hero-a4 .hero-art .p4 { --d: 220px; }
  @keyframes a4para { from { transform: translateY(0); } to { transform: translateY(var(--d, 80px)); } }
}
/* vaste navigatie: lichte tekst zolang hij boven de donkere hero hangt */
.site-header:not(.scrolled) .logo-text, .site-header:not(.scrolled) .main-navigation a:not(.btn), .site-header:not(.scrolled) .theme-toggle, .site-header:not(.scrolled) .menu-toggle { color: #F2F8FA; }
.site-header:not(.scrolled) .theme-toggle { background: rgba(255, 255, 255, 0.10); border-color: rgba(255, 255, 255, 0.28); }
@media (prefers-reduced-motion: reduce) {
  .hero-a4 .float, .hero-a4 .hero-art .para { animation: none; }
}
@media (max-width: 1024px) {
  .hero-a4 .hero-art { width: 42vw; right: -4%; }
}
@media (max-width: 640px) {
  .hero-a4 .hero-a4-inner { padding: 120px 20px 60px; }
  .hero-a4 .hero-art { width: 62vw; right: -16%; top: 4%; }
  .hero-a4 .s1 { opacity: 0.08; } .hero-a4 .s2 { opacity: 0.12; } .hero-a4 .s3 { opacity: 0.17; } .hero-a4 .s4 { opacity: 0.24; }
  .hero-a4 .hero-veil { background: linear-gradient(180deg, transparent 40%, #0E3340 100%); }
  .hero-a4 .hero-actions { flex-direction: column; align-items: stretch; width: 100%; }
}

/* ---------- bodyfont: Manrope (koppen blijven Outfit) ---------- */
body { font-family: 'Manrope', 'Sora', -apple-system, 'Segoe UI', system-ui, sans-serif !important; }
button, input, textarea, select { font-family: inherit; }

/* ---------- dienstensectie (A4): zes tegels, volgt de thema-kleuren van de site ---------- */
.sec-a4 { padding: 112px 0; }
.sec-a4 .shead { display: flex; justify-content: space-between; align-items: flex-end; gap: 32px; margin-bottom: 56px; }
.sec-a4 .stack { display: flex; flex-direction: column; gap: 16px; }
.sec-a4 .kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #0891B2); }
.sec-a4 .h2 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.035em; line-height: 1.05; max-width: 16ch; color: var(--text-bright, #0f172a); text-wrap: balance; }
.sec-a4 .lead { margin: 0 0 6px; font-size: clamp(17px, 1.5vw, 20px); line-height: 1.55; max-width: 40ch; color: var(--text-dim, #64748b); }
.sec-a4 .dgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sec-a4 .dcell { background: var(--bg-card, #fff); border-radius: 28px; padding: 36px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); transition: transform 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.sec-a4 .dcell:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(14, 51, 64, 0.10); }
.sec-a4 .dcell .n { font-family: 'Outfit', sans-serif; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--accent, #0891B2); }
.sec-a4 .dcell h3 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; color: var(--text-bright, #0f172a); }
.sec-a4 .dcell p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--text-dim, #64748b); }
@media (max-width: 1024px) { .sec-a4 .dgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .sec-a4 { padding: 72px 0; }
  .sec-a4 .shead { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
  .sec-a4 .dgrid { grid-template-columns: 1fr; gap: 12px; }
  .sec-a4 .dcell { padding: 24px; min-height: 0; border-radius: 24px; }
}

/* ---------- knoppen (gedeeld) ---------- */
.pill { display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 52px; padding: 0 28px; border-radius: 980px; font-weight: 700; font-size: 15px; white-space: nowrap; text-decoration: none; transition: transform 0.2s ease, filter 0.2s ease, background 0.2s ease; }
.pill:active { transform: translateY(1px); }
.pill .arr { transition: transform 0.25s ease; }
.pill:hover .arr { transform: translateX(4px); }
.pill-accent { background: var(--accent, #0891B2); color: #FFFFFF; }
.pill-accent:hover { color: #FFFFFF; filter: brightness(1.08); }
.pill-ink { background: var(--text-bright, #0f172a); color: var(--bg, #FFFFFF); }
.pill-ink:hover { color: var(--bg, #FFFFFF); filter: brightness(1.15); }
.pill-white { background: #FFFFFF; color: #14181C; }
.pill-white:hover { color: #14181C; filter: brightness(0.94); }
.pill-ghost { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); color: #F2F8FA; }
.pill-ghost:hover { color: #F2F8FA; background: rgba(255, 255, 255, 0.08); }

/* ---------- AI-band ---------- */
.ai-a4-wrap { padding: 0 0 112px; }
.ai-a4 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center; background: var(--bg-card, #fff); border-radius: 28px; padding: 64px; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); }
.ai-a4 .h2 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(30px, 3.6vw, 44px); letter-spacing: -0.03em; line-height: 1.08; max-width: 14ch; color: var(--text-bright, #0f172a); }
.ai-a4 .ai-body { display: flex; flex-direction: column; gap: 26px; align-items: flex-start; }
.ai-a4 p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--text-dim, #64748b); }

/* ---------- contact als donkere tegel ---------- */
.cta-a4-wrap { padding: 0 0 112px; }
.cta-a4 { position: relative; overflow: hidden; background: #0E3340; color: #F2F8FA; border-radius: 28px; padding: 72px 64px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 18px; }
.cta-a4::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.cta-a4 .kicker { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent, #0891B2); }
.cta-a4 .h2 { margin: 0; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: clamp(32px, 4.4vw, 54px); letter-spacing: -0.035em; line-height: 1.05; max-width: 16ch; color: #F2F8FA; }
.cta-a4 p { margin: 0; max-width: 56ch; font-size: 18px; line-height: 1.55; color: rgba(242, 248, 250, 0.72); }
.cta-a4 .cta-actions { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 12px; position: relative; z-index: 1; }

/* ---------- lichte footer ---------- */
.footer-a4 { padding: 56px 0 36px; box-shadow: inset 0 1px 0 var(--border, rgba(0,0,0,0.08)); color: var(--text-dim, #64748b); }
.footer-a4 .fgrid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; margin-bottom: 52px; }
.footer-a4 .fbrand { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 17px; color: var(--text-bright, #0f172a); text-decoration: none; }
.footer-a4 .fbrand img { width: 26px; height: 26px; }
.footer-a4 .fbrand span span { color: var(--accent, #0891B2); }
.footer-a4 .fcol h4 { margin: 0 0 18px; font-family: 'Outfit', sans-serif; color: var(--accent, #0891B2); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; }
.footer-a4 .fcol a { display: block; color: var(--text, #334155); font-size: 15px; padding: 5px 0; text-decoration: none; }
.footer-a4 .fcol a:hover { color: var(--accent, #0891B2); }
.footer-a4 .fcol p { margin: 0; font-size: 15px; max-width: 34ch; line-height: 1.6; }
.footer-a4 .fcol p.small { margin-top: 10px; }
.footer-a4 .fbottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; padding-top: 24px; box-shadow: inset 0 1px 0 var(--border, rgba(0,0,0,0.08)); }
.footer-a4 .fbottom a { color: var(--text-dim, #64748b); text-decoration: none; }
.footer-a4 .fbottom a:hover { color: var(--accent, #0891B2); }
@media (max-width: 1024px) {
  .ai-a4 { grid-template-columns: 1fr; gap: 32px; padding: 44px; }
  .cta-a4 { padding: 56px 36px; }
}
@media (max-width: 680px) {
  .ai-a4-wrap, .cta-a4-wrap { padding: 0 0 72px; }
  .ai-a4 { padding: 28px 24px; border-radius: 24px; }
  .ai-a4 .pill { width: 100%; }
  .cta-a4 { padding: 40px 24px; border-radius: 24px; }
  .cta-a4 .cta-actions { flex-direction: column; align-items: stretch; width: 100%; }
  .footer-a4 .fgrid { grid-template-columns: 1fr; gap: 28px; }
}