/* ═══════════════════════════════════════════════════════════════════
   AGIO CLEANING — COMBINED STYLESHEET
   ═══════════════════════════════════════════════════════════════════
   WordPress: zet deze CSS in style.css (thema) of via
   wp_enqueue_style in functions.php.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Design tokens ── */
:root {
  --agio-blue-50: #EBF0F7;
  --agio-blue-100: #D1DFF0;
  --agio-blue-200: #A8C5E0;
  --agio-blue-300: #5893D4;
  --agio-blue-400: #1F4E79;
  --agio-blue-500: #163A5A;
  --agio-blue-600: #0E2F4D;

  --ink-50: #F6F7F8;
  --ink-100: #E1E3E6;
  --ink-200: #C4C8CD;
  --ink-300: #A6ACB4;
  --ink-400: #828B95;
  --ink-500: #5F6874;
  --ink-600: #3F4855;
  --ink-700: #2B3138;
  --ink-800: #1C2126;
  --ink-900: #0B0D10;

  --fg-1: #1C2126;
  --fg-2: #5F6874;
  --fg-3: #828B95;

  --border-1: #E1E3E6;

  --brand-500: #5893D4;
  --brand-600: #1F4E79;
  --brand-700: #163A5A;
  --brand-soft: #D1DFF0;

  --color-success: #1E8E3E;
  --color-success-bg: #DFF3E1;
  --color-danger: #B3261E;

  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', ui-monospace, monospace;

  --shadow-1: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-2: 0 4px 12px rgba(0,0,0,0.10);
  --shadow-3: 0 8px 30px rgba(0,0,0,0.14);
  --shadow-focus: 0 0 0 3px rgba(88,147,212,0.35);

  --dur-fast: 120ms;
  --dur-base: 200ms;
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);

  --bg-1: #FFFFFF;
  --bg-2: #F6F7F8;
}

/* ── BASE ── */
*, *::before, *::after { box-sizing: border-box; }

html { font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--fg-1); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

body { margin: 0; background: var(--bg-1); }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--brand-700); }
a:hover { color: var(--brand-600); }

.h1, h1, .h2, h2, .h3, h3, .h4, h4 { font-family: var(--font-display); font-weight: 800; letter-spacing: -0.015em; line-height: 1.1; color: var(--ink-900); }
h1, .h1 { font-size: 48px; }
h2, .h2 { font-size: 34px; }

/* ── Container ── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
@media (max-width: 540px) { .container { padding: 0 16px; } }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-body); font-weight: 600; font-size: 15px; padding: 10px 22px; border-radius: 10px; border: 1px solid transparent; text-decoration: none; cursor: pointer; transition: background var(--dur-fast) var(--ease-standard), color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); line-height: 1.4; }
.btn-primary { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.btn-primary:hover { background: var(--brand-600); border-color: var(--brand-600); color: #fff; }
.btn-secondary { background: #fff; color: var(--ink-900); border-color: var(--border-1); }
.btn-secondary:hover { background: var(--ink-50); border-color: var(--ink-200); color: var(--ink-900); }
.btn-lg { padding: 14px 28px; font-size: 16px; }
.btn-sm { padding: 8px 16px; font-size: 13px; }
.btn-pill { border-radius: 999px; }
.btn-ghost { background: transparent; color: var(--fg-2); border-color: transparent; }
.btn-ghost:hover { background: var(--ink-50); color: var(--ink-900); border-color: var(--ink-100); }

/* ── Breadcrumb ── */
.breadcrumb { padding: 22px 0 0; font-size: 13px; color: var(--fg-3); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.breadcrumb a { color: var(--brand-700); text-decoration: none; font-weight: 600; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep { color: var(--ink-300); display: inline-flex; align-items: center; }
.breadcrumb .sep svg { width: 14px; height: 14px; }
.breadcrumb [aria-current="page"] { color: var(--fg-2); }

/* ── Site header ── */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.92); -webkit-backdrop-filter: blur(12px) saturate(160%); backdrop-filter: blur(12px) saturate(160%); border-bottom: 1px solid var(--border-1); }
.site-header-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; gap: 24px; }
.site-logo-link { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.site-logo-img { width: 34px; height: 34px; }
.wordmark { font-family: var(--font-display); font-weight: 800; font-size: 18px; color: var(--ink-900); letter-spacing: -0.01em; }
.site-nav { display: flex; align-items: center; gap: 8px; }
.site-nav > a { font-size: 14px; font-weight: 600; color: var(--fg-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.site-nav > a:hover { color: var(--fg-1); background: var(--ink-50); }
.site-nav > a.btn { padding: 8px 14px; }
.header-tel { background: transparent !important; padding: 8px 10px !important; }
.header-offerte { padding: 9px 18px !important; }

@media (max-width: 860px) {
  .site-nav > a:not(.header-tel):not(.header-offerte):not(.nav-menu-wrap) { display: none; }
}

/* ── Nav mega-menu ── */
.nav-menu-wrap { position: relative; display: inline-flex; }
.nav-menu-trigger { background: transparent; border: 0; cursor: pointer; font-family: var(--font-body); font-size: 14px; font-weight: 600; color: var(--fg-2); text-decoration: none; padding: 6px 10px; border-radius: 8px; display: inline-flex; align-items: center; gap: 4px; transition: color var(--dur-fast) var(--ease-standard), background var(--dur-fast) var(--ease-standard); }
.nav-menu-trigger:hover { color: var(--fg-1); background: var(--ink-50); }
.nav-menu-trigger.open { color: var(--brand-700); background: var(--brand-soft); }
.nav-chev { width: 14px; height: 14px; transition: transform var(--dur-base) var(--ease-standard); }
.nav-menu-trigger.open .nav-chev { transform: rotate(180deg); }
.nav-mega { position: absolute; top: calc(100% + 10px); left: -16px; background: #fff; border: 1px solid var(--border-1); border-radius: 14px; box-shadow: var(--shadow-3); padding: 12px; min-width: 280px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-standard); }
.nav-menu-wrap:hover .nav-mega, .nav-menu-wrap .nav-menu-trigger.open ~ .nav-mega { opacity: 1; pointer-events: auto; }
.nav-mega::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }
.nav-mega-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; }
.nav-mega-list a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink-900); font-size: 14px; font-weight: 600; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); line-height: 1.3; }
.nav-mega-list a:hover { background: var(--brand-soft); color: var(--brand-700); }
.nav-mega-icon { width: 30px; height: 30px; border-radius: 8px; background: var(--ink-50); color: var(--brand-700); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.nav-mega-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.nav-mega-list a:hover .nav-mega-icon { background: #fff; }
.nav-mega-foot { margin-top: 8px; padding: 10px 12px 4px; border-top: 1px solid var(--border-1); text-align: right; }
.nav-mega-all { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--brand-700); text-decoration: none; }
.nav-mega-all:hover { color: var(--brand-700); text-decoration: underline; }

/* ── Safety net: WordPress default menu classes (fallback als walker faalt) ── */
.site-nav .sub-menu { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.site-nav .sub-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 8px; color: var(--ink-900); font-size: 14px; font-weight: 600; text-decoration: none; line-height: 1.3; }
.site-nav .sub-menu a:hover { background: var(--brand-soft); color: var(--brand-700); }
.site-nav .menu-item-has-children { position: relative; }
.site-nav .menu-item-has-children > .sub-menu { position: absolute; top: calc(100% + 10px); left: -16px; background: #fff; border: 1px solid var(--border-1); border-radius: 14px; box-shadow: var(--shadow-3); padding: 12px; min-width: 260px; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 160ms var(--ease-standard); }
.site-nav .menu-item-has-children:hover > .sub-menu,
.site-nav .menu-item-has-children:focus-within > .sub-menu { opacity: 1; pointer-events: auto; }
.site-nav .menu-item-has-children > .sub-menu::before { content: ""; position: absolute; top: -10px; left: 0; right: 0; height: 10px; }

/* ── Field / Input / Select / Textarea ── */
.field { display: flex; flex-direction: column; gap: 4px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--ink-800); }
.input, .select, .textarea { font-family: var(--font-body); font-size: 15px; padding: 10px 13px; border: 1px solid var(--border-1); border-radius: 8px; background: #fff; color: var(--fg-1); transition: border-color var(--dur-fast) var(--ease-standard); }
.input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--brand-500); box-shadow: var(--shadow-focus); }
.textarea { resize: vertical; min-height: 80px; }
.select { cursor: pointer; }
.check { width: 17px; height: 17px; accent-color: var(--brand-500); }

/* ── Hero ── */
.hero { position: relative; min-height: 620px; padding: 120px 0 96px; overflow: hidden; background: var(--ink-900); color: #fff; }
.hero-bg { position: absolute; inset: 0; z-index: 0; background: linear-gradient(135deg, #1a2a3a 0%, #2c3e50 50%, #1a2a3a 100%); pointer-events: none; }
.hero-bg-img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; pointer-events: none; }
.hero-scrim { position: absolute; inset: 0; background: linear-gradient(105deg, rgba(11,13,16,0.78) 0%, rgba(11,13,16,0.55) 45%, rgba(22,49,79,0.35) 100%); pointer-events: none; }
.hero-content { position: relative; z-index: 2; max-width: 720px; }
.hero h1 { font-size: 64px; line-height: 1.04; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 20px; text-wrap: balance; color: #fff; }
.hero h1 .accent { color: var(--agio-blue-300); }
.hero p.lead { font-size: 19px; line-height: 1.55; color: rgba(255,255,255,0.88); margin: 0 0 32px; max-width: 560px; }
.hero-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.btn-hero-secondary { background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); font-family: var(--font-body); font-weight: 600; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); padding: 10px 22px; border-radius: 10px; }
.btn-hero-secondary:hover { background: rgba(255,255,255,0.2); color: #fff; }
.hero-meta { margin-top: 32px; display: flex; gap: 24px; font-size: 13px; flex-wrap: wrap; }
.hero-meta.on-dark { color: rgba(255,255,255,0.85); }
.hero-meta-row { display: flex; align-items: center; gap: 6px; }
.hero-meta.on-dark .hero-meta-row svg,
.hero-meta.on-dark .hero-meta-row i { color: var(--agio-blue-300); }

.eyebrow-line.on-dark { color: var(--agio-blue-300); }
.eyebrow-line.on-dark::before { background: var(--agio-blue-300); }

/* Hero mood: FRIS (default) */
.hero[data-mood="fris"] { background: var(--bg-1); color: var(--ink-900); }
.hero[data-mood="fris"] .hero-scrim { background: linear-gradient(105deg, rgba(255,255,255,0.92) 0%, rgba(255,255,255,0.72) 45%, rgba(255,255,255,0.4) 100%); }
.hero[data-mood="fris"] h1 { color: var(--ink-900); }
.hero[data-mood="fris"] h1 .accent { color: var(--brand-700); }
.hero[data-mood="fris"] p.lead { color: var(--fg-2); }
.hero[data-mood="fris"] .eyebrow-line.on-dark { color: var(--brand-700); }
.hero[data-mood="fris"] .eyebrow-line.on-dark::before { background: var(--brand-500); }
.hero[data-mood="fris"] .hero-meta.on-dark { color: var(--fg-2); }
.hero[data-mood="fris"] .hero-meta.on-dark .hero-meta-row svg,
.hero[data-mood="fris"] .hero-meta.on-dark .hero-meta-row i { color: var(--brand-600); }
.hero[data-mood="fris"] .btn-hero-secondary { background: rgba(255,255,255,0.7); color: var(--ink-900); border-color: var(--ink-200); }
.hero[data-mood="fris"] .btn-hero-secondary:hover { background: #fff; color: var(--ink-900); }

/* Accent palette overrides */
[data-accent="warm"] { --brand-500: #E67E5A; --brand-600: #D6633A; --brand-700: #B2492A; --brand-soft: #FBEAE1; }
[data-accent="navy"] { --brand-500: #1F4E79; --brand-600: #163A5A; --brand-700: #0E2F4D; --brand-soft: #E8EEF5; }
[data-accent="mint"] { --brand-500: #4FB8A8; --brand-600: #3A9A8B; --brand-700: #2E8276; --brand-soft: #E1F3EF; }
[data-accent="warm"] .hero h1 .accent { color: #FFD6C2; }
[data-accent="navy"] .hero h1 .accent { color: #A8C5E0; }
[data-accent="mint"] .hero h1 .accent { color: #B7E4DA; }
[data-accent="warm"] .hero[data-mood="fris"] h1 .accent,
[data-accent="warm"] .hero[data-mood="klassiek"] h1 .accent { color: #B2492A; }
[data-accent="navy"] .hero[data-mood="fris"] h1 .accent,
[data-accent="navy"] .hero[data-mood="klassiek"] h1 .accent { color: #0E2F4D; }
[data-accent="mint"] .hero[data-mood="fris"] h1 .accent,
[data-accent="mint"] .hero[data-mood="klassiek"] h1 .accent { color: #2E8276; }

/* Eyebrow */
.eyebrow-line { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--brand-700); font-weight: 700; margin-bottom: 18px; }
.eyebrow-line::before { content: ""; width: 28px; height: 2px; background: var(--brand-500); }

/* Services */
.services { padding: 96px 0; background: var(--bg-2); }
.services-head { text-align: center; margin-bottom: 48px; }
.services-head .eyebrow-line { justify-content: center; }
.services-head .eyebrow-line::before { display: none; }
.services-head h2 { font-size: 38px; margin: 0 0 14px; text-wrap: balance; }
.services-sub { color: var(--fg-2); font-size: 17px; line-height: 1.5; margin: 0 auto; max-width: 580px; text-wrap: balance; }
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.service-card { display: flex; align-items: flex-start; gap: 18px; padding: 24px 26px; background: #fff; border: 1px solid var(--border-1); border-radius: 16px; text-decoration: none; color: inherit; transition: border-color var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); cursor: pointer; }
.service-card:hover { border-color: var(--brand-500); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.service-card-icon { width: 56px; height: 56px; flex: none; background: var(--brand-soft); color: var(--brand-700); border-radius: 14px; display: flex; align-items: center; justify-content: center; }
.service-card-icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.service-card-body { min-width: 0; }
.service-card-body h3 { font-size: 18px; font-weight: 700; color: var(--ink-900); margin: 4px 0 6px; line-height: 1.3; }
.service-card-body p { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0; }
.services-foot { text-align: center; margin-top: 36px; }

@media (max-width: 860px) { .services-grid { grid-template-columns: 1fr; } }

/* How it works */
.how { padding: 96px 0; background: var(--bg-2); --how-navy: #134E7A; }
.how-head { text-align: center; max-width: 720px; margin: 0 auto 56px; }
.how-title { font-size: 44px; font-weight: 800; line-height: 1.05; letter-spacing: -0.015em; margin: 0 0 14px; color: var(--how-navy); text-wrap: balance; }
.how-sub { color: var(--fg-2); font-size: 18px; line-height: 1.5; margin: 0; }
.how-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.how-step { display: flex; flex-direction: column; align-items: center; text-align: center; }
.how-step-badge { width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: var(--how-navy); color: #fff; font-family: var(--font-body); font-weight: 800; font-size: 24px; line-height: 1; border-radius: 16px; margin-bottom: 22px; }
.how-step h4 { font-size: 22px; font-weight: 700; margin: 0 0 12px; color: var(--how-navy); }
.how-step p { color: var(--fg-2); font-size: 16px; line-height: 1.6; margin: 0; max-width: 320px; }

@media (max-width: 720px) { .how-steps { grid-template-columns: 1fr; gap: 44px; } .how-title { font-size: 34px; } }

/* CTA band */
.cta-band { background: var(--ink-900); color: #fff; padding: 76px 0; }
.cta-band-inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; flex-wrap: wrap; }
.cta-band-text { max-width: 600px; }
.cta-band .eyebrow-line { color: var(--agio-blue-300); }
.cta-band .eyebrow-line::before { background: var(--agio-blue-300); }
.cta-band h2 { font-size: 34px; font-weight: 800; letter-spacing: -0.01em; margin: 0 0 12px; color: #fff; text-wrap: balance; }
.cta-band p { color: rgba(255,255,255,0.82); font-size: 17px; line-height: 1.55; margin: 0; }
.cta-band-actions { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; flex: none; }
.btn-cta-secondary { background: rgba(255,255,255,0.10); color: #fff; border: 1px solid rgba(255,255,255,0.28); display: inline-flex; align-items: center; gap: 8px; padding: 14px 28px; border-radius: 10px; font-family: var(--font-body); font-weight: 600; font-size: 16px; text-decoration: none; transition: background var(--dur-fast) var(--ease-standard); }
.btn-cta-secondary:hover { background: rgba(255,255,255,0.18); color: #fff; }

@media (max-width: 860px) { .cta-band-inner { flex-direction: column; align-items: flex-start; } .cta-band { padding: 56px 0; } .cta-band h2 { font-size: 28px; } }

/* Over Agio */
.over { padding: 96px 0; background: var(--bg-2); }
.over-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 64px; align-items: center; }
.over h2 { margin-bottom: 18px; }
.over-body { color: var(--fg-2); font-size: 16px; line-height: 1.65; margin: 0 0 22px; max-width: 480px; }
.over-bullets { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; }
.over-bullets li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-900); line-height: 1.45; }
.over-bullets li .tick { width: 22px; height: 22px; flex: none; border-radius: 999px; background: var(--color-success); display: inline-flex; align-items: center; justify-content: center; margin-top: 1px; }
.over-bullets li .tick svg { width: 12px; height: 12px; }
.over-photo { aspect-ratio: 4/3; border-radius: 20px; overflow: hidden; border: 1px solid var(--border-1); }

@media (max-width: 860px) { .over-grid { grid-template-columns: 1fr; gap: 32px; } }

/* Reviews */
.reviews { padding: 96px 0; background: var(--bg-2); }
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 40px; }
.review-card { background: #fff; border: 1px solid var(--border-1); border-radius: 14px; padding: 22px; }
.review-card .stars { color: #E8A60C; font-size: 16px; letter-spacing: 2px; }
.review-card .quote { color: var(--fg-1); margin: 12px 0 18px; line-height: 1.5; font-size: 14px; }
.review-card .who { font-size: 13px; color: var(--fg-3); }
.review-card .who b { color: var(--fg-1); font-weight: 700; }

@media (max-width: 860px) { .reviews-grid { grid-template-columns: 1fr; } }

/* Footer */
.footer { background: var(--ink-900); color: #C8CDD3; padding: 64px 0 40px; font-size: 14px; }
.footer-grid { display: grid; grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr; gap: 40px; }
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; } }
.footer h5 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; margin: 0 0 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.footer a { color: #C8CDD3; text-decoration: none; }
.footer a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid #2B3138; margin-top: 48px; padding-top: 24px; display: flex; justify-content: space-between; font-size: 12px; color: #828B95; flex-wrap: wrap; gap: 8px; }
.footer-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.footer-logo { width: 38px; height: 38px; filter: brightness(0) invert(1); }
.footer-brand .wordmark { font-size: 20px; color: #fff; }
.footer-desc { max-width: 320px; line-height: 1.55; margin: 0; }
.footer-legal { max-width: 320px; line-height: 1.55; margin-top: 14px; font-size: 12px; color: #828B95; }

/* FAB */
.fab { position: fixed; bottom: 24px; right: 24px; background: var(--brand-500); color: #fff; border: none; border-radius: 999px; padding: 14px 22px; font-family: var(--font-body); font-weight: 700; font-size: 15px; box-shadow: var(--shadow-3); display: inline-flex; align-items: center; gap: 8px; cursor: pointer; z-index: 40; text-decoration: none; }
.fab:hover { background: var(--brand-600); }
.fab.fab-wa { background: #25D366; }
.fab.fab-wa:hover { background: #1ebe5d; }

/* ── Cookie banner ── */
.cookie-banner { position: fixed; left: 16px; right: 16px; bottom: 16px; z-index: 60; background: #fff; border: 1px solid var(--border-1); border-radius: 14px; box-shadow: var(--shadow-3); padding: 14px 18px; font-size: 13px; line-height: 1.5; color: var(--fg-2); max-width: 760px; margin: 0 auto; }
.cookie-banner-inner { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cookie-banner-text { flex: 1; min-width: 240px; }
.cookie-banner-text strong { color: var(--ink-900); font-weight: 700; margin-right: 4px; }
.cookie-banner-text a { color: var(--brand-700); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.cookie-banner-close { background: var(--ink-900); color: #fff; border: 0; border-radius: 8px; padding: 9px 16px; font-family: var(--font-body); font-size: 13px; font-weight: 600; cursor: pointer; flex: none; }
.cookie-banner-close:hover { background: #2B3138; }
@media (max-width: 540px) { .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; } .cookie-banner-inner { gap: 12px; } .cookie-banner-close { width: 100%; padding: 10px; } }
.cookie-banner.is-leaving { animation: cookie-banner-out 200ms var(--ease-standard) forwards; }
@keyframes cookie-banner-out { to { opacity: 0; transform: translateY(8px); } }

/* ── Lucide icon sizing ── */
[data-lucide] { width: 18px; height: 18px; stroke-width: 1.5; }
.btn [data-lucide] { width: 16px; height: 16px; }
.hero-meta-row [data-lucide] { width: 14px; height: 14px; }
.service-card-icon [data-lucide] { width: 26px; height: 26px; }
/* ---------- Werkgebied / steden (regio) ---------- */
.regio { padding: 96px 0; background: var(--bg-2); }
.regio .reasons-head { margin-bottom: 40px; }
.regio-cities { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.regio-city-card {
  display: flex; flex-direction: column; gap: 16px;
  background: #fff; border: 1px solid var(--border-1); border-radius: 18px;
  padding: 24px; text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
}
.regio-city-card:hover { border-color: var(--brand-500); transform: translateY(-3px); box-shadow: var(--shadow-2); }
.regio-city-top { display: flex; align-items: center; gap: 12px; }
.regio-city-ic {
  width: 44px; height: 44px; flex: none; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
}
.regio-city-ic svg { width: 22px; height: 22px; stroke-width: 1.5; }
.regio-city-card h3 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 0; }
.regio-city-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.regio-city-chip {
  font-size: 12px; font-weight: 600; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--border-1);
  padding: 4px 10px; border-radius: 999px;
}
.regio-city-chip.more { color: var(--brand-700); border-color: var(--agio-blue-200); }
.regio-city-go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 700; color: var(--brand-700);
}
.regio-city-go svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-standard); }
.regio-city-card:hover .regio-city-go svg { transform: translateX(3px); }

.regio-longform { background: #fff; }
.regio-longform-inner { max-width: 760px; }
.regio-longform-inner h2 { margin: 8px 0 16px; }
.regio-longform-inner p { color: var(--fg-2); font-size: 16px; line-height: 1.7; margin: 0 0 16px; }
.regio-longform-inner a { color: var(--brand-700); font-weight: 600; }

@media (max-width: 980px) { .regio-cities { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .regio-cities { grid-template-columns: 1fr; } }
.booking { padding: 96px 0; }
.booking-wrap { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 64px; align-items: start; }
.booking-form { background: #fff; border: 1px solid var(--border-1); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-1); }
.booking-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.booking-grid .full { grid-column: 1 / -1; }
.booking-success { background: var(--color-success-bg); border: 1px solid #B4DAB8; border-radius: 12px; padding: 16px 20px; color: var(--color-success); display: flex; gap: 10px; align-items: flex-start; }

/* ---------- Service detail page ---------- */
.svc-hero {
  position: relative;
  padding: 56px 0 80px;
  overflow: hidden;
  background: var(--bg-1);
}
.svc-hero-watermark {
  position: absolute; inset: 0;
  background: url("../../assets/agio-monogram.svg") no-repeat right -100px top -80px;
  background-size: 480px 480px;
  opacity: 0.05; pointer-events: none;
}
.svc-hero-grid {
  display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px;
  align-items: center; position: relative; z-index: 1;
}
.svc-back {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--fg-3); font-weight: 600;
  text-decoration: none;
}
.svc-back:hover { color: var(--brand-700); }
.svc-hero h1 {
  font-size: 54px; line-height: 1.05; font-weight: 800;
  letter-spacing: -0.015em; margin: 0 0 18px;
  text-wrap: balance;
}
.svc-lead { font-size: 18px; line-height: 1.55; color: var(--fg-2); margin: 0 0 24px; max-width: 540px; }
.svc-bullets {
  list-style: none; padding: 0; margin: 0 0 28px;
  display: flex; flex-direction: column; gap: 10px;
}
.svc-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: var(--fg-1); line-height: 1.45;
}
.svc-bullets li .tick {
  width: 20px; height: 20px; flex: none; border-radius: 999px;
  background: var(--color-success);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.svc-bullets li .tick svg { width: 11px; height: 11px; }
.svc-cta { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.svc-price-line {
  margin-top: 20px;
  font-family: var(--font-display); font-weight: 800;
  font-size: 22px; letter-spacing: .02em;
  color: var(--brand-700);
}
.svc-hero-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--border-1);
}
.svc-hero-photo image-slot {
  display: block; width: 100%; height: 100%;
  --slot-border: none;
  --slot-bg: linear-gradient(135deg, var(--agio-blue-100), var(--agio-blue-200));
  --slot-text: var(--brand-700);
}
.svc-hero-photo-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.svc-hero-icon {
  position: absolute; top: 16px; right: 16px;
  width: 56px; height: 56px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(8px);
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  color: var(--brand-700);
  box-shadow: var(--shadow-2);
  pointer-events: none;
}
.svc-hero-icon svg { width: 28px; height: 28px; stroke-width: 1.5; }


/* ---------- Trust strip (4-up below hero) ---------- */
.trust-strip { background: var(--bg-2); border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); padding: 36px 0; }
.trust-strip-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.trust-strip-item { display: flex; align-items: flex-start; gap: 14px; }
.trust-strip-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.trust-strip-icon svg { width: 20px; height: 20px; stroke-width: 1.5; }
.trust-strip-item h4 { font-size: 15px; font-weight: 700; margin: 2px 0 4px; color: var(--ink-900); }
.trust-strip-item p { font-size: 13px; color: var(--fg-2); margin: 0; line-height: 1.45; }

/* ---------- Narrative block (text + photo) ---------- */
.narrative { padding: 96px 0; }
.narrative-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.narrative h2 { margin-bottom: 18px; }
.narrative p { color: var(--fg-2); font-size: 16px; line-height: 1.65; margin: 0 0 14px; max-width: 520px; }
.narrative-photo {
  aspect-ratio: 4/3; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--border-1);
}
.narrative-photo.portrait {
  aspect-ratio: 3/4;
}
.narrative-photo image-slot {
  display: block; width: 100%; height: 100%;
  --slot-bg: linear-gradient(135deg, var(--agio-blue-100), var(--agio-blue-200));
  --slot-text: var(--brand-700);
}

/* ---------- Reason cards (6-up) ---------- */
.reasons { padding: 96px 0; background: var(--bg-2); }
.reasons-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.reasons-head .eyebrow-line { justify-content: center; }
.reasons-head .eyebrow-line::before { display: none; }
.reasons-head h2 { margin: 0 0 14px; }
.reasons-sub { color: var(--fg-2); font-size: 16px; line-height: 1.55; margin: 0; }
.reasons-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.reason-card {
  background: #fff; border: 1px solid var(--border-1); border-radius: 14px;
  padding: 24px;
}
.reason-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}
.reason-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.reason-card h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--ink-900); }
.reason-card p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; }

/* ---------- Process (numbered steps) ---------- */
.proc { padding: 96px 0; }
.proc-head { text-align: center; max-width: 720px; margin: 0 auto 48px; }
.proc-head .eyebrow-line { justify-content: center; }
.proc-head .eyebrow-line::before { display: none; }
.proc-head h2 { margin: 0 0 14px; }
.proc-sub { color: var(--fg-2); font-size: 16px; line-height: 1.55; margin: 0; }
.proc-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; counter-reset: step; }
.proc-step { display: flex; flex-direction: column; gap: 12px; position: relative; }
.proc-num {
  font-family: var(--font-display); font-weight: 800;
  font-size: 48px; letter-spacing: .02em; line-height: 1;
  color: var(--brand-500);
}
.proc-body h4 { font-size: 18px; font-weight: 700; margin: 0 0 6px; color: var(--ink-900); }
.proc-body p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0; }

/* ---------- Segment (Particulier / Zakelijk) ---------- */
.segment { padding: 96px 0; background: var(--bg-2); }
.segment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.segment-card {
  background: #fff; border: 1px solid var(--border-1); border-radius: 16px;
  padding: 32px;
}
.segment-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.segment-icon svg { width: 24px; height: 24px; stroke-width: 1.5; }
.segment-card h3 { font-size: 22px; font-weight: 700; margin: 0 0 8px; color: var(--ink-900); }
.segment-card p { font-size: 15px; color: var(--fg-2); line-height: 1.6; margin: 0; }

/* ---------- Bedrijfsgegevens grid (Over ons) ---------- */
.bedrijf-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  max-width: 1000px; margin: 0 auto;
}
.bedrijf-card {
  background: #fff; border: 1px solid var(--border-1); border-radius: 12px;
  padding: 22px 24px;
}
.bedrijf-card h3 {
  font-size: 11px; letter-spacing: .12em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-3); margin: 0 0 8px;
}
.bedrijf-card p { margin: 0; font-size: 16px; color: var(--ink-900); font-weight: 600; }
.bedrijf-card p.bedrijf-meta { font-size: 12px; color: var(--fg-3); font-weight: 500; margin-top: 4px; }
.bedrijf-card .mono { font-family: var(--font-mono); font-size: 15px; }
.bedrijf-card a { color: var(--brand-700); text-decoration: none; }
.bedrijf-card a:hover { text-decoration: underline; }

/* ---------- External-site CTA card ---------- */
.external-cta { padding: 0 0 24px; }
.external-cta-card {
  display: grid; grid-template-columns: 1.4fr auto; gap: 32px; align-items: center;
  background: var(--brand-soft);
  border: 1px solid var(--agio-blue-200);
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 1100px; margin: -32px auto 0;
  position: relative; z-index: 2;
}
.external-cta-card h3 {
  font-size: 22px; font-weight: 700; line-height: 1.3;
  margin: 4px 0 6px; color: var(--ink-900);
  text-wrap: balance;
}
.external-cta-card p {
  font-size: 14px; color: var(--fg-2); line-height: 1.55;
  margin: 0; max-width: 560px;
}
.external-cta-card .eyebrow-line { margin-bottom: 0; }
.external-cta-card .btn { white-space: nowrap; }

/* ---------- Price table ---------- */
.price { padding: 96px 0; }
.price-table { max-width: 720px; margin: 0 auto; border: 1px solid var(--border-1); border-radius: 14px; overflow: hidden; background: #fff; }
.price-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px;
  border-bottom: 1px solid var(--border-1);
}
.price-row:last-child { border-bottom: 0; }
.price-lbl { font-size: 15px; color: var(--ink-900); font-weight: 500; }
.price-val { font-family: var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: .02em; color: var(--brand-700); }

/* ---------- Guarantee ---------- */
.garantie { padding: 96px 0; background: var(--ink-900); color: #C8CDD3; }
.garantie-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
.garantie .eyebrow-line { color: var(--agio-blue-300); }
.garantie .eyebrow-line::before { background: var(--agio-blue-400); }
.garantie h2 { color: #fff; }
.garantie-body { font-size: 17px; line-height: 1.6; margin: 0 0 24px; color: #C8CDD3; max-width: 480px; }
.garantie-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.garantie-list li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 15px; color: #fff; font-weight: 500;
}
.garantie-list li .tick {
  width: 22px; height: 22px; flex: none; border-radius: 999px;
  background: var(--color-success);
  display: inline-flex; align-items: center; justify-content: center;
  margin-top: 1px;
}
.garantie-list li .tick svg { width: 12px; height: 12px; }
.garantie-photo {
  aspect-ratio: 4/3; border-radius: 16px; overflow: hidden;
  border: 1px solid #2B3138;
}
.garantie-photo image-slot {
  display: block; width: 100%; height: 100%;
  --slot-bg: linear-gradient(135deg, #2B3138, #14181C);
  --slot-text: #B6BCC4;
}

/* ---------- FAQ ---------- */
.faq { padding: 96px 0; background: var(--bg-2); }
.faq-wrap { display: grid; grid-template-columns: 1fr 1.4fr; gap: 64px; align-items: start; }
.faq-head { position: sticky; top: 100px; }
.faq-head h2 { margin: 0 0 12px; }
.faq-sub { color: var(--fg-2); font-size: 15px; line-height: 1.55; margin: 0; }
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border-1); }
.faq-item:first-child { border-top: 1px solid var(--border-1); }
.faq-q {
  width: 100%; background: transparent; border: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 0; cursor: pointer;
  font-family: var(--font-body); font-size: 17px; font-weight: 600;
  color: var(--ink-900); text-align: left;
}
.faq-q .chev { width: 18px; height: 18px; color: var(--brand-600); transition: transform var(--dur-base) var(--ease-standard); }
.faq-item.open .faq-q .chev { transform: rotate(180deg); }
.faq-a {
  display: none; padding: 0 0 20px;
  color: var(--fg-2); font-size: 15px; line-height: 1.6;
  max-width: 640px;
}
.faq-item.open .faq-a { display: block; }

/* ---------- Wijken (Rotterdam neighborhood chips) ---------- */
.wijken { padding: 96px 0; }
.wijken-head { text-align: center; max-width: 720px; margin: 0 auto 36px; }
.wijken-head .eyebrow-line { justify-content: center; }
.wijken-head .eyebrow-line::before { display: none; }
.wijken-head h2 { margin: 0 0 14px; }
.wijken-grid {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
  max-width: 760px; margin: 0 auto;
}
.wijk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px;
  background: #fff; border: 1px solid var(--border-1); border-radius: 999px;
  font-size: 13px; font-weight: 600; color: var(--ink-900);
}
.wijk-chip i, .wijk-chip svg { color: var(--brand-600); }
.wijken-foot {
  text-align: center; margin-top: 32px; color: var(--fg-2); font-size: 14px;
}
.wijken-foot a { color: var(--brand-700); font-weight: 600; text-decoration: none; }
.wijken-foot a:hover { text-decoration: underline; }

/* ---------- Before / During / After (matrasreiniging — used on matras detail page) ---------- */
.bda { padding: 96px 0; background: var(--bg-1); }

.bda-head {
  display: grid; grid-template-columns: 1.2fr 1fr;
  gap: 64px; align-items: end;
  margin-bottom: 32px;
}
.bda-tile-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-700); font-weight: 700;
  background: var(--brand-soft);
  padding: 6px 12px; border-radius: 999px;
  margin-bottom: 14px;
}
.bda-title {
  font-size: 28px; font-weight: 700; line-height: 1.2;
  letter-spacing: -0.01em; color: var(--fg-1);
  margin: 0; max-width: 560px;
  text-wrap: balance;
}
.bda-lead { color: var(--fg-2); font-size: 15px; line-height: 1.6; margin: 0; max-width: 420px; }

.bda-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }

.bda-step { margin: 0; display: flex; flex-direction: column; }
.bda-photo {
  position: relative;
  aspect-ratio: 4/5;
  border-radius: 14px;
  overflow: hidden;
  background: var(--ink-100);
  border: 1px solid var(--border-1);
}
.bda-photo image-slot {
  display: block; width: 100%; height: 100%;
  --slot-border: 1px dashed var(--ink-300);
  --slot-bg: linear-gradient(135deg, var(--agio-blue-100), var(--agio-blue-200));
  --slot-text: var(--brand-700);
}
.bda-photo-img {
  display: block; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
}
.bda-tag {
  position: absolute; top: 12px; left: 12px;
  background: rgba(11,13,16,0.78); color: #fff;
  padding: 5px 10px; border-radius: 999px;
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.bda-step figcaption { padding-top: 16px; }
.bda-step h4 { font-size: 17px; font-weight: 700; margin: 0 0 6px; color: var(--fg-1); }
.bda-step p { font-size: 14px; line-height: 1.55; color: var(--fg-2); margin: 0; }


/* ============================================================
   Legal / static pages (Privacy, Algemene voorwaarden, Contact)
   ============================================================ */

/* ---------- Breadcrumb ---------- */
.breadcrumb {
  padding: 22px 0 0;
  font-size: 13px;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 8px;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--brand-700);
  text-decoration: none;
  font-weight: 600;
}
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb .sep {
  color: var(--ink-300);
  display: inline-flex; align-items: center;
}
.breadcrumb .sep svg { width: 14px; height: 14px; }
.breadcrumb [aria-current="page"] { color: var(--fg-2); }

/* ---------- Legal hero (sober header for Privacy / AVW) ---------- */
.legal-hero {
  padding: 36px 0 56px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
}
.legal-hero h1 {
  font-size: 48px; line-height: 1.08; font-weight: 800;
  letter-spacing: -0.015em;
  margin: 18px 0 14px;
  color: var(--ink-900);
  text-wrap: balance;
  max-width: 820px;
}
.legal-hero .legal-meta {
  font-size: 14px;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 8px;
  font-weight: 500;
}
.legal-hero .legal-meta svg,
.legal-hero .legal-meta i {
  width: 16px; height: 16px;
  color: var(--brand-600);
}

/* ---------- Legal body: two-column with sticky TOC ---------- */
.legal-body { padding: 64px 0 96px; background: #fff; }
.legal-grid {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 64px;
  align-items: start;
}
@media (max-width: 880px) {
  .legal-grid { grid-template-columns: 1fr; gap: 32px; }
  .legal-toc { position: static; }
}
.legal-toc {
  position: sticky;
  top: 96px;
  font-size: 13px;
}
.legal-toc-label {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 700; color: var(--fg-3);
  margin: 0 0 14px;
}
.legal-toc ol {
  list-style: none;
  padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 8px;
  counter-reset: toc;
}
.legal-toc li { counter-increment: toc; }
.legal-toc a {
  display: flex; align-items: baseline; gap: 10px;
  color: var(--fg-2);
  text-decoration: none;
  line-height: 1.4;
  padding: 4px 0;
  border-left: 2px solid transparent;
  padding-left: 12px;
  margin-left: -14px;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-400);
  font-weight: 500;
  flex: none;
}
.legal-toc a:hover {
  color: var(--brand-700);
  border-left-color: var(--brand-500);
}

/* ---------- Legal prose (read-optimized body copy) ---------- */
.legal-prose {
  max-width: 720px;
  color: var(--fg-1);
  font-size: 16px;
  line-height: 1.7;
}
.legal-prose > * + * { margin-top: 16px; }
.legal-prose h2 {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 56px 0 12px;
  color: var(--ink-900);
  scroll-margin-top: 100px;
  display: flex; align-items: baseline; gap: 12px;
}
.legal-prose h2:first-child { margin-top: 0; }
.legal-prose h2 .num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--brand-600);
  font-weight: 600;
  letter-spacing: 0;
  flex: none;
  padding-top: 4px;
}
.legal-prose h3 {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.4;
  margin: 28px 0 8px;
  color: var(--ink-900);
}
.legal-prose p { margin: 0; }
.legal-prose ul,
.legal-prose ol {
  padding-left: 22px;
  margin: 4px 0;
  display: flex; flex-direction: column; gap: 6px;
}
.legal-prose ul li { padding-left: 4px; }
.legal-prose ol li { padding-left: 4px; }
.legal-prose ul li::marker { color: var(--brand-500); }
.legal-prose ol li::marker { color: var(--fg-3); font-weight: 600; font-variant-numeric: tabular-nums; }
.legal-prose a {
  color: var(--brand-700);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.legal-prose a:hover { color: var(--brand-600); }
.legal-prose strong { color: var(--ink-900); font-weight: 700; }
.legal-prose hr {
  border: 0;
  border-top: 1px solid var(--border-1);
  margin: 48px 0;
}

.legal-intro {
  font-size: 18px;
  line-height: 1.6;
  color: var(--fg-2);
  margin-bottom: 32px !important;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border-1);
}

.legal-footer-meta {
  margin-top: 64px;
  padding: 24px;
  background: var(--bg-2);
  border: 1px solid var(--border-1);
  border-radius: 12px;
  font-size: 14px;
  color: var(--fg-2);
  display: flex; flex-direction: column; gap: 14px;
}
.legal-footer-meta .legal-footer-row {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
}
.legal-footer-meta strong { color: var(--ink-900); }

/* ---------- Contact page ---------- */
.contact-hero {
  padding: 36px 0 56px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
}
.contact-hero h1 {
  font-size: 56px; line-height: 1.05; font-weight: 800;
  letter-spacing: -0.015em;
  margin: 18px 0 16px;
  color: var(--ink-900);
  text-wrap: balance;
  max-width: 820px;
}
.contact-hero .contact-sub {
  font-size: 18px;
  line-height: 1.55;
  color: var(--fg-2);
  margin: 0;
  max-width: 600px;
  text-wrap: pretty;
}

.contact-cards-section { padding: 56px 0 24px; }
.contact-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 880px) {
  .contact-cards { grid-template-columns: 1fr; }
}
.contact-card {
  display: flex; flex-direction: column;
  align-items: flex-start;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 24px;
  text-decoration: none;
  color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  position: relative;
  overflow: hidden;
}
.contact-card:hover {
  border-color: var(--brand-500);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
}
.contact-card-icon {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--brand-soft);
  color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 18px;
}
.contact-card-icon svg { width: 22px; height: 22px; stroke-width: 1.5; }
.contact-card[data-kind="whatsapp"] .contact-card-icon {
  background: #DFF3E1; color: #1E8E3E;
}
.contact-card h3 {
  font-size: 18px; font-weight: 700;
  margin: 0 0 6px; color: var(--ink-900);
  line-height: 1.3;
}
.contact-card p {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  margin: 0 0 16px;
}
.contact-card-value {
  font-family: var(--font-mono);
  font-size: 14px;
  font-weight: 600;
  color: var(--brand-700);
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: auto;
}
.contact-card-value svg { width: 14px; height: 14px; }
.contact-card[data-kind="whatsapp"] .contact-card-value { color: #1E8E3E; }

/* ---------- Contact form section ---------- */
.contact-form-section { padding: 56px 0 96px; }
.contact-form-wrap {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 56px;
  align-items: start;
}
@media (max-width: 960px) {
  .contact-form-wrap { grid-template-columns: 1fr; gap: 32px; }
}
.contact-form-head {
  margin-bottom: 28px;
}
.contact-form-head h2 {
  margin: 8px 0 10px;
}
.contact-form-head p {
  color: var(--fg-2);
  font-size: 16px;
  line-height: 1.55;
  margin: 0;
  max-width: 540px;
}
.contact-form {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 16px;
  padding: 28px;
  box-shadow: var(--shadow-1);
}
.contact-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.contact-form-grid .full { grid-column: 1 / -1; }
.contact-form .field-required {
  color: var(--color-danger);
  font-weight: 600;
  margin-left: 2px;
}
.contact-form .field-optional {
  color: var(--fg-3);
  font-weight: 400;
  margin-left: 6px;
  font-size: 12px;
}

/* File upload */
.file-drop {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 22px 18px;
  border: 1.5px dashed var(--ink-300);
  border-radius: 8px;
  background: var(--bg-2);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
  text-align: center;
}
.file-drop:hover {
  border-color: var(--brand-500);
  background: var(--brand-soft);
}
.file-drop input[type="file"] { display: none; }
.file-drop-icon {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border-1);
  color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 4px;
}
.file-drop-icon svg { width: 18px; height: 18px; stroke-width: 1.5; }
.file-drop-main {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-900);
}
.file-drop-main span { color: var(--brand-700); }
.file-drop-help {
  font-size: 12px;
  color: var(--fg-3);
  line-height: 1.4;
}
.file-list {
  list-style: none; padding: 0; margin: 12px 0 0;
  display: flex; flex-direction: column; gap: 6px;
}
.file-list li {
  font-size: 13px;
  color: var(--fg-2);
  background: var(--bg-2);
  padding: 8px 12px;
  border-radius: 6px;
  display: flex; align-items: center; gap: 8px;
}
.file-list li svg { width: 14px; height: 14px; color: var(--brand-600); flex: none; }
.file-list li .file-name { font-weight: 500; color: var(--ink-900); }
.file-list li .file-size { color: var(--fg-3); margin-left: auto; font-family: var(--font-mono); font-size: 12px; }

.form-consent {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.5;
  padding-top: 6px;
}
.form-consent input[type="checkbox"] { margin-top: 3px; flex: none; }
.form-consent a { color: var(--brand-700); text-decoration: underline; }

.form-submit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.form-submit-row .form-note {
  font-size: 12px;
  color: var(--fg-3);
  display: flex; align-items: center; gap: 6px;
}
.form-submit-row .form-note svg { width: 14px; height: 14px; color: var(--brand-600); }

/* Contact sidebar (bedrijfsgegevens) */
.contact-sidebar {
  background: var(--ink-900);
  color: #C8CDD3;
  border-radius: 16px;
  padding: 28px;
}
.contact-sidebar .eyebrow-line {
  color: var(--agio-blue-300);
  margin-bottom: 14px;
}
.contact-sidebar .eyebrow-line::before { background: var(--agio-blue-300); }
.contact-sidebar h3 {
  font-size: 22px; font-weight: 700;
  margin: 0 0 18px;
  color: #fff;
  line-height: 1.25;
}
.contact-sidebar .sidebar-list {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-direction: column; gap: 14px;
}
.contact-sidebar .sidebar-list li {
  display: flex; align-items: flex-start; gap: 12px;
  font-size: 14px; line-height: 1.5;
}
.contact-sidebar .sidebar-list .sidebar-icon {
  width: 32px; height: 32px; flex: none;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  color: var(--agio-blue-300);
  display: flex; align-items: center; justify-content: center;
}
.contact-sidebar .sidebar-list .sidebar-icon svg { width: 16px; height: 16px; stroke-width: 1.5; }
.contact-sidebar .sidebar-list .sidebar-label {
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  font-weight: 700; color: #828B95;
  margin-bottom: 2px;
}
.contact-sidebar .sidebar-list .sidebar-value { color: #fff; font-weight: 500; }
.contact-sidebar .sidebar-list .sidebar-value a {
  color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.25);
}
.contact-sidebar .sidebar-list .sidebar-value a:hover { border-color: #fff; }
.contact-sidebar .sidebar-list .sidebar-value.mono { font-family: var(--font-mono); font-size: 13px; }
.contact-sidebar .sidebar-list .sidebar-value.meta { color: #C8CDD3; font-weight: 400; font-size: 13px; }

/* Contact FAQ (re-use site FAQ with light tweaks if needed) */
.contact-faq { padding: 96px 0; background: var(--bg-2); border-top: 1px solid var(--border-1); }

/* ---------- Cookie banner (site-wide) ---------- */
.cookie-banner {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 60;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 14px;
  box-shadow: var(--shadow-3);
  padding: 14px 18px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--fg-2);
  max-width: 760px;
  margin: 0 auto;
  animation: cookie-banner-in 280ms var(--ease-standard);
}
@keyframes cookie-banner-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.cookie-banner.is-leaving {
  animation: cookie-banner-out 200ms var(--ease-standard) forwards;
}
@keyframes cookie-banner-out {
  to { opacity: 0; transform: translateY(8px); }
}
.cookie-banner-inner {
  display: flex; align-items: center; gap: 18px;
  flex-wrap: wrap;
}
.cookie-banner-text {
  flex: 1; min-width: 240px;
}
.cookie-banner-text strong {
  color: var(--ink-900);
  font-weight: 700;
  margin-right: 4px;
}
.cookie-banner-text a {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-banner-close {
  background: var(--ink-900);
  color: #fff;
  border: 0;
  border-radius: 8px;
  padding: 9px 16px;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  flex: none;
  transition: background var(--dur-fast) var(--ease-standard);
}
.cookie-banner-close:hover { background: #2B3138; }
.cookie-banner-close:focus-visible { outline: none; box-shadow: var(--shadow-focus); }

@media (max-width: 540px) {
  .cookie-banner { left: 8px; right: 8px; bottom: 8px; padding: 12px 14px; }
  .cookie-banner-inner { gap: 12px; }
  .cookie-banner-close { width: 100%; padding: 10px; }
}

/* ============================================================
   Diensten-overzichtspagina (/diensten/)
   ============================================================ */

/* Intro hero (sober, like legal-hero but warmer) */
.dov-hero {
  position: relative;
  padding: 40px 0 64px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
}
.dov-hero-watermark {
  position: absolute; inset: 0;
  background: url("../../assets/agio-monogram.svg") no-repeat right -120px top -90px;
  background-size: 460px 460px;
  opacity: 0.045; pointer-events: none;
}
.dov-hero-inner { position: relative; z-index: 1; max-width: 760px; }
.dov-hero h1 {
  font-size: 52px; line-height: 1.05; font-weight: 800;
  letter-spacing: -0.015em; margin: 16px 0 16px;
  color: var(--ink-900); text-wrap: balance;
}
.dov-hero p {
  font-size: 18px; line-height: 1.6; color: var(--fg-2);
  margin: 0; max-width: 600px; text-wrap: pretty;
}

/* Section shell */
.dov { padding: 64px 0 96px; }
.dov-section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; margin-bottom: 32px; flex-wrap: wrap;
}
.dov-section-head h2 { margin: 0; font-size: 30px; }
.dov-section-head .dov-count {
  font-family: var(--font-mono); font-size: 13px; color: var(--fg-3);
  white-space: nowrap;
}

/* ---- Variant A: RASTER (cards) ---- */
.dov-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.dov-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--border-1); border-radius: 18px;
  padding: 26px; text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              box-shadow var(--dur-base) var(--ease-standard);
  position: relative;
}
.dov-card:hover {
  border-color: var(--brand-500); transform: translateY(-3px); box-shadow: var(--shadow-2);
}
.dov-card-icon {
  width: 54px; height: 54px; flex: none; border-radius: 14px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center; margin-bottom: 18px;
}
.dov-card-icon svg { width: 26px; height: 26px; stroke-width: 1.5; }
.dov-card h3 { font-size: 20px; font-weight: 700; color: var(--ink-900); margin: 0 0 8px; line-height: 1.25; }
.dov-card p { font-size: 14px; color: var(--fg-2); line-height: 1.55; margin: 0 0 20px; }
.dov-card-foot {
  margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding-top: 16px; border-top: 1px solid var(--border-1);
}
.dov-card-price {
  font-family: var(--font-display); font-weight: 800; font-size: 15px;
  letter-spacing: .01em; color: var(--brand-700);
}
.dov-card-go {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--fg-3);
}
.dov-card:hover .dov-card-go { color: var(--brand-700); }
.dov-card-go svg { width: 15px; height: 15px; transition: transform var(--dur-base) var(--ease-standard); }
.dov-card:hover .dov-card-go svg { transform: translateX(3px); }

/* Spoke (matras) card accent */
.dov-card[data-spoke="1"] { background: var(--brand-soft); border-color: var(--agio-blue-200); }
.dov-badge {
  position: absolute; top: 20px; right: 20px;
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  background: var(--ink-900); color: #fff; padding: 4px 10px; border-radius: 999px;
}

/* ---- Variant B: LIJST (editorial rows) ---- */
.dov-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--border-1); }
.dov-row {
  display: grid; grid-template-columns: 64px 1.4fr 1fr auto; gap: 28px;
  align-items: center; padding: 28px 8px; border-bottom: 1px solid var(--border-1);
  text-decoration: none; color: inherit; position: relative;
  transition: background var(--dur-base) var(--ease-standard), padding-left var(--dur-base) var(--ease-standard);
}
.dov-row:hover { background: var(--bg-2); padding-left: 18px; }
.dov-row-num {
  font-family: var(--font-display); font-weight: 800; font-size: 26px;
  color: var(--ink-300); line-height: 1;
}
.dov-row:hover .dov-row-num { color: var(--brand-500); }
.dov-row-main { min-width: 0; }
.dov-row-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 21px; font-weight: 700; color: var(--ink-900); margin: 0 0 6px; line-height: 1.2;
}
.dov-row-title .dov-row-ic {
  width: 34px; height: 34px; flex: none; border-radius: 9px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
}
.dov-row-title .dov-row-ic svg { width: 18px; height: 18px; stroke-width: 1.6; }
.dov-row-main p { font-size: 14px; color: var(--fg-2); line-height: 1.5; margin: 0; }
.dov-row-price {
  font-family: var(--font-display); font-weight: 800; font-size: 16px; color: var(--brand-700);
}
.dov-row-price small { display: block; font-family: var(--font-body); font-weight: 500; font-size: 12px; color: var(--fg-3); margin-top: 2px; }
.dov-row-go {
  width: 44px; height: 44px; border-radius: 999px; flex: none;
  border: 1px solid var(--border-1); background: #fff; color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--dur-base) var(--ease-standard), color var(--dur-base) var(--ease-standard);
}
.dov-row:hover .dov-row-go { background: var(--brand-500); color: #fff; border-color: var(--brand-500); }
.dov-row-go svg { width: 18px; height: 18px; }
.dov-row[data-spoke="1"] .dov-row-num::after {
  content: "Vanaf €45"; display: block; margin-top: 8px;
  font-family: var(--font-body); font-size: 9px; font-weight: 700;
  letter-spacing: .06em; text-transform: uppercase; color: var(--brand-700);
}

/* ---- Variant C: COMPACT (dense 2-col) ---- */
.dov-compact { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dov-tile {
  display: flex; align-items: center; gap: 16px;
  background: #fff; border: 1px solid var(--border-1); border-radius: 12px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  transition: border-color var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard);
}
.dov-tile:hover { border-color: var(--brand-500); box-shadow: var(--shadow-1); }
.dov-tile-ic {
  width: 42px; height: 42px; flex: none; border-radius: 11px;
  background: var(--brand-soft); color: var(--brand-700);
  display: flex; align-items: center; justify-content: center;
}
.dov-tile-ic svg { width: 21px; height: 21px; stroke-width: 1.5; }
.dov-tile-body { min-width: 0; flex: 1; }
.dov-tile-body h3 { font-size: 16px; font-weight: 700; color: var(--ink-900); margin: 0 0 2px; line-height: 1.25; }
.dov-tile-body p { font-size: 12.5px; color: var(--fg-3); margin: 0; font-family: var(--font-mono); }
.dov-tile-go { color: var(--ink-300); flex: none; display: flex; }
.dov-tile:hover .dov-tile-go { color: var(--brand-600); }
.dov-tile-go svg { width: 18px; height: 18px; }
.dov-tile[data-spoke="1"] { background: var(--brand-soft); border-color: var(--agio-blue-200); }

/* Responsive */
@media (max-width: 920px) {
  .dov-grid { grid-template-columns: repeat(2, 1fr); }
  .dov-row { grid-template-columns: 44px 1fr auto; }
  .dov-row-price { display: none; }
  .dov-hero h1 { font-size: 40px; }
}
@media (max-width: 600px) {
  .dov-grid, .dov-compact { grid-template-columns: 1fr; }
}

/* ============================================================
   Reviews-pagina (/reviews.html)
   ============================================================ */

/* Hero with Google aggregate */
.rv-hero {
  padding: 40px 0 56px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
}
.rv-hero-inner { max-width: 820px; }
.rv-hero h1 {
  font-size: 50px; line-height: 1.05; font-weight: 800;
  letter-spacing: -0.015em; margin: 16px 0 20px; color: var(--ink-900);
  text-wrap: balance;
}
.rv-hero p { font-size: 18px; line-height: 1.6; color: var(--fg-2); margin: 0; max-width: 600px; text-wrap: pretty; }

.rv-aggregate {
  display: flex; align-items: center; gap: 28px; flex-wrap: wrap;
  margin-top: 30px; padding: 22px 26px;
  background: #fff; border: 1px solid var(--border-1); border-radius: 16px;
  box-shadow: var(--shadow-1); width: fit-content;
}
.rv-agg-score { display: flex; flex-direction: column; gap: 4px; }
.rv-agg-num {
  font-family: var(--font-display); font-weight: 800; font-size: 46px;
  line-height: 1; color: var(--ink-900); letter-spacing: -0.02em;
}
.rv-agg-num small { font-size: 20px; color: var(--fg-3); font-weight: 700; }
.rv-stars { color: #E8A60C; font-size: 18px; letter-spacing: 2px; line-height: 1; }
.rv-stars.lg { font-size: 22px; }
.rv-agg-meta { font-size: 13px; color: var(--fg-3); }
.rv-agg-divider { width: 1px; align-self: stretch; background: var(--border-1); }
.rv-agg-google { display: flex; align-items: center; gap: 10px; }
.rv-agg-google .gmark {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--border-1); background: #fff;
  font-family: var(--font-display); font-weight: 800; font-size: 20px;
}
.rv-agg-google .gmark span:nth-child(1) { color: #4285F4; }
.rv-agg-google-txt { font-size: 13px; color: var(--fg-2); line-height: 1.4; }
.rv-agg-google-txt b { color: var(--ink-900); display: block; font-size: 14px; }

/* Filter chips */
.rv-filters {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding: 28px 0 0;
}
.rv-chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 16px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--border-1); background: #fff;
  font-size: 14px; font-weight: 600; color: var(--fg-2);
  font-family: inherit;
  transition: border-color var(--dur-base) var(--ease-standard),
              background var(--dur-base) var(--ease-standard),
              color var(--dur-base) var(--ease-standard);
}
.rv-chip:hover { border-color: var(--brand-400); color: var(--brand-700); }
.rv-chip.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
.rv-chip .rv-chip-n { font-family: var(--font-mono); font-size: 12px; opacity: .7; }

/* Aligned card grid */
.rv-section { padding: 36px 0 96px; }
.rv-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 18px; align-items: start;
}
.rv-card {
  background: #fff; border: 1px solid var(--border-1); border-radius: 16px;
  padding: 24px;
  transition: box-shadow var(--dur-base) var(--ease-standard), border-color var(--dur-base) var(--ease-standard);
}
.rv-card:hover { box-shadow: var(--shadow-2); border-color: var(--ink-200, #d7dce2); }
.rv-card-head { display: flex; align-items: center; gap: 13px; margin-bottom: 14px; }
.rv-avatar {
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 18px; color: #fff;
}
.rv-card-id { min-width: 0; }
.rv-card-name { font-size: 15px; font-weight: 700; color: var(--ink-900); line-height: 1.2; }
.rv-card-meta { font-size: 12px; color: var(--fg-3); margin-top: 2px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rv-card-meta .rv-guide {
  display: inline-flex; align-items: center; gap: 3px;
  color: var(--brand-700); font-weight: 600;
}
.rv-card-meta .rv-guide svg { width: 11px; height: 11px; }
.rv-card-rateline { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.rv-card-rateline .rv-stars { font-size: 15px; }
.rv-card-rateline .rv-time { font-size: 12.5px; color: var(--fg-3); }
.rv-card-text { font-size: 14.5px; line-height: 1.6; color: var(--fg-1); margin: 0; text-wrap: pretty; }
.rv-card-text.truncated::after { content: ""; }
.rv-readmore {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 10px;
  font-size: 13px; font-weight: 600; color: var(--brand-700);
  text-decoration: none;
}
.rv-readmore:hover { text-decoration: underline; }
.rv-readmore svg { width: 13px; height: 13px; }
.rv-gphoto {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-size: 12px; color: var(--fg-3); font-family: var(--font-mono);
}
.rv-gphoto svg { width: 13px; height: 13px; }

/* Owner reply (nested) */
.rv-reply {
  margin-top: 16px; padding: 14px 16px;
  background: var(--bg-2); border-radius: 12px;
  border: 1px solid var(--border-1);
}
.rv-reply-head {
  display: flex; align-items: center; gap: 8px; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-900);
}
.rv-reply-head .rv-reply-badge {
  font-size: 10px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  background: var(--brand-soft); color: var(--brand-700); padding: 2px 8px; border-radius: 999px;
}
.rv-reply-head .rv-reply-date { margin-left: auto; font-weight: 500; color: var(--fg-3); font-size: 11.5px; }
.rv-reply p { font-size: 13.5px; line-height: 1.55; color: var(--fg-2); margin: 0; }

/* Bottom CTA */
.rv-leave {
  padding: 56px 0; background: var(--ink-900); color: #C8CDD3; text-align: center;
}
.rv-leave h2 { color: #fff; font-size: 30px; margin: 0 0 12px; text-wrap: balance; }
.rv-leave p { max-width: 520px; margin: 0 auto 24px; line-height: 1.6; }

@media (max-width: 920px) {
  .rv-grid { grid-template-columns: repeat(2, 1fr); }
  .rv-hero h1 { font-size: 38px; }
}
@media (max-width: 600px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-aggregate { gap: 18px; padding: 18px; }
  .rv-agg-divider { display: none; }
}


/* ── Picture element: transparent wrapper so img CSS still applies ── */
picture { display: contents; }
/* ── Mobile nav toggle ── */
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  flex: none;
}
.nav-toggle:hover { background: var(--ink-50); }
.nav-toggle-bar {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--ink-900);
  border-radius: 2px;
  transition: transform 200ms var(--ease-standard), opacity 200ms var(--ease-standard);
}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; transform: scaleX(0); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 860px) { .nav-toggle { display: flex; } }

/* ── Mobile nav overlay ── */
.mobile-nav {
  display: none;
  position: fixed;
  top: 64px; left: 0; right: 0; bottom: 0;
  background: #fff;
  z-index: 49;
  overflow-y: auto;
  border-top: 1px solid var(--border-1);
  box-shadow: var(--shadow-3);
}
.mobile-nav.is-open { display: block; }
.mobile-nav-inner {
  padding: 16px;
  display: flex;
  flex-direction: column;
}
.mobile-nav-inner > a {
  display: block;
  padding: 13px 16px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
  border-radius: 10px;
}
.mobile-nav-inner > a:hover { background: var(--ink-50); color: var(--brand-700); }
.mobile-nav-section-label {
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--fg-3);
  padding: 16px 16px 6px;
}
.mobile-nav-sub {
  display: flex;
  flex-direction: column;
}
.mobile-nav-sub a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-900);
  text-decoration: none;
  border-radius: 10px;
}
.mobile-nav-sub a:hover { background: var(--ink-50); color: var(--brand-700); }
.mobile-nav-divider { height: 1px; background: var(--border-1); margin: 10px 0; }
.mobile-nav-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  margin-top: 8px;
  border-top: 1px solid var(--border-1);
}
.mobile-nav-actions .btn { justify-content: center; }

/* Prevent body scroll when mobile nav is open */
body.nav-open { overflow: hidden; }

/* Mobile header: keep desktop nav out of the layout once the hamburger is active. */
@media (max-width: 860px) {
  .site-header { max-width: 100%; }
  .site-header-inner {
    gap: 12px;
    min-width: 0;
    max-width: 100%;
  }
  .site-logo-link {
    min-width: 0;
    max-width: calc(100% - 50px);
  }
  .site-logo-link .wordmark {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .site-nav { display: none; }
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }
  .mobile-nav {
    max-width: 100vw;
    overflow-x: hidden;
  }
}

/* ════════════════════════════════════════════════════════════════
   DESIGN POLISH — Conversie, Visueel ritme & Mobiel
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Sectie-ritme: wissel wit ↔ lichtgrijs ── */
/* Homepage volgorde: hero → services(grijs) → how(wit) → reviews(grijs) → over(wit) → dark */
.how  { background: var(--bg-1); }
.over { background: var(--bg-1); }

/* ── 2. Hero: Google-sterren in hero-meta ── */
.hero-meta-stars {
  color: #E8A60C;
  font-size: 13px;
  letter-spacing: 1.5px;
  line-height: 1;
  vertical-align: middle;
  display: inline-block;
}

/* ── 3. Hero: WhatsApp micro-hint ── */
.hero-wa-hint {
  font-size: 13px;
  margin: 10px 0 0;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.75);
}

.hero[data-mood="fris"] .hero-wa-hint {
  color: var(--fg-2);
}

.hero-wa-hint a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity var(--dur-fast) var(--ease-standard);
}

.hero-wa-hint a:hover { opacity: 0.75; text-decoration: none; }

/* ── 4. Hero: mobiele aanpassingen ── */
@media (max-width: 640px) {
  .hero { padding: 76px 0 56px; min-height: 0; }
  .hero h1 { font-size: 38px; line-height: 1.1; }
  .hero p.lead { font-size: 16px; margin-bottom: 24px; }
  .hero-cta { flex-direction: column; gap: 10px; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .hero-meta { gap: 14px; }
  .hero-meta-row { font-size: 12px; }
}

@media (max-width: 400px) {
  .hero h1 { font-size: 32px; }
}

/* ── 5. Service cards: prijs-footer + actie-hint ── */
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: auto;
  padding-top: 10px;
  border-top: 1px solid var(--border-1);
}

.service-card-price {
  font-size: 12px;
  font-weight: 700;
  color: var(--brand-700);
  white-space: nowrap;
}

.service-card-go {
  font-size: 12px;
  font-weight: 600;
  color: var(--brand-500);
  white-space: nowrap;
  transition: color var(--dur-fast) var(--ease-standard),
              letter-spacing var(--dur-fast) var(--ease-standard);
}

.service-card:hover .service-card-go {
  color: var(--brand-600);
  letter-spacing: 0.03em;
}

/* ── 6. Service grid: 2 kolommen op tablet ── */
@media (min-width: 541px) and (max-width: 860px) {
  .services-grid { grid-template-columns: 1fr 1fr; }
}

/* ── 7. Reviews: aggregate rating badge ── */
.reviews-agg {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 12px;
  padding: 10px 16px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-1);
  flex-wrap: wrap;
}

.reviews-agg-stars {
  color: #E8A60C;
  font-size: 17px;
  letter-spacing: 2px;
  line-height: 1;
}

.reviews-agg-score {
  font-size: 20px;
  font-weight: 800;
  color: var(--ink-900);
  line-height: 1;
}

.reviews-agg-divider {
  width: 1px;
  height: 24px;
  background: var(--border-1);
  flex-shrink: 0;
}

.reviews-agg-meta {
  font-size: 13px;
  color: var(--fg-2);
  line-height: 1.4;
}

.reviews-agg-meta b { color: var(--ink-900); }

/* ── 8. How-it-works: micro-CTA na stappen ── */
.how-cta {
  text-align: center;
  margin-top: 44px;
  padding-top: 36px;
  border-top: 1px solid var(--border-1);
}

/* ── 9. Knoppen: minimale touch-target (44 × 44 dp) ── */
.btn     { min-height: 44px; }
.btn-sm  { min-height: 36px; } /* nav-knoppen blijven compact */

/* ── 10. FAB: boven cookie-banner op mobiel ── */
@media (max-width: 540px) {
  .fab { bottom: 80px; right: 16px; }
}

/* ── 11. Sectie-padding op mobiel verkleinen ── */
@media (max-width: 640px) {
  .services { padding: 60px 0; }
  .how      { padding: 60px 0; }
  .reviews  { padding: 60px 0; }
  .over     { padding: 60px 0; }
  .cta-band { padding: 48px 0; }
  .booking  { padding: 60px 0; }
}

/* ── 12. Focus-states voor toetsenbord zichtbaar ── */
:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.btn:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: inherit;
}

a:not(.btn):focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 3px;
  border-radius: 3px;
}

/* ── 13. Review-card: consistente hoogte en spacing ── */
.review-card {
  display: flex;
  flex-direction: column;
}

.review-card .quote {
  flex: 1; /* zet quote op gelijke hoogte over kolommen */
}

/* ── 14. Footer: contactnummer accentueren ── */
.footer a[href^="tel"] {
  font-weight: 700;
  font-size: 15px;
  color: #fff;
}

/* ── 15. Over-sectie: photo border op wit achtergrond ── */
.over-photo { box-shadow: var(--shadow-2); }

/* ── 16. Mobile service-cards: volledige breedte CTA ── */
@media (max-width: 540px) {
  .services-grid { grid-template-columns: 1fr; }
  .service-card { gap: 14px; padding: 18px 20px; }
}

/* ── 16b. Service-card footer alignment ── */
.service-card {
  align-items: stretch;
}

.service-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
}

/* ── 17. Booking-form: consistent op mobiel ── */
@media (max-width: 640px) {
  .booking-grid { grid-template-columns: 1fr; }
  .booking-grid .full { grid-column: 1; }
}

/* ── Form states ── */

/* Loading: dim entire form, block interaction */
.booking-form.is-loading,
.contact-form.is-loading {
  pointer-events: none;
  opacity: 0.6;
  transition: opacity 200ms var(--ease-standard);
}

/* Disabled submit button */
.btn:disabled,
.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Error banner (shown on server/network failure) */
.booking-error {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #FEF2F2;
  border: 1px solid #FECACA;
  border-radius: 12px;
  padding: 14px 18px;
  color: var(--color-danger);
  font-size: 14px;
  line-height: 1.55;
  margin-top: 16px;
}
.booking-error a {
  color: var(--color-danger);
  font-weight: 700;
  text-decoration: underline;
}

/* Testmodus-notice inside success block */
.booking-success-note {
  margin-top: 8px;
  font-size: 12px;
  color: var(--fg-3);
  font-style: italic;
}

/* Responsive booking section */
@media (max-width: 860px) {
  .booking-wrap { grid-template-columns: 1fr; gap: 32px; }
  .booking-grid { grid-template-columns: 1fr; }
  .booking-grid .full { grid-column: 1; }
}

/* ── P1 visual polish: branded depth without structural changes ── */
.hero[data-mood="fris"] {
  background: var(--agio-blue-600);
  color: #fff;
}

.hero[data-mood="fris"] .hero-bg-img {
  filter: saturate(1.06) contrast(1.04);
}

.hero[data-mood="fris"] .hero-scrim {
  background:
    radial-gradient(circle at 20% 18%, rgba(88,147,212,0.34) 0%, rgba(88,147,212,0) 34%),
    linear-gradient(105deg, rgba(6,24,40,0.90) 0%, rgba(14,47,77,0.78) 42%, rgba(31,78,121,0.45) 72%, rgba(255,255,255,0.14) 100%);
}

.hero[data-mood="fris"] .hero-content {
  max-width: 760px;
}

.hero[data-mood="fris"] h1,
.hero[data-mood="fris"] h1 .accent {
  color: #fff;
}

.hero[data-mood="fris"] h1 .accent {
  text-shadow: 0 10px 34px rgba(88,147,212,0.32);
}

.hero[data-mood="fris"] p.lead {
  color: rgba(255,255,255,0.88);
}

.hero[data-mood="fris"] .eyebrow-line.on-dark {
  color: var(--agio-blue-200);
}

.hero[data-mood="fris"] .eyebrow-line.on-dark::before {
  background: var(--agio-blue-300);
}

.hero[data-mood="fris"] .btn-hero-secondary {
  background: rgba(255,255,255,0.13);
  color: #fff;
  border-color: rgba(255,255,255,0.28);
}

.hero[data-mood="fris"] .btn-hero-secondary:hover {
  background: rgba(255,255,255,0.22);
  color: #fff;
}

.hero[data-mood="fris"] .hero-wa-hint,
.hero[data-mood="fris"] .hero-meta.on-dark {
  color: rgba(255,255,255,0.82);
}

.hero[data-mood="fris"] .hero-meta {
  gap: 10px;
  margin-top: 28px;
}

.hero[data-mood="fris"] .hero-meta-row {
  min-width: 0;
  max-width: 100%;
  min-height: 34px;
  padding: 7px 11px;
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 999px;
  background: rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.16);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.hero[data-mood="fris"] .hero-meta.on-dark .hero-meta-row svg,
.hero[data-mood="fris"] .hero-meta.on-dark .hero-meta-row i {
  color: var(--agio-blue-200);
}

.hero[data-mood="fris"] .hero-meta-stars {
  color: #F3B51F;
  text-shadow: 0 1px 10px rgba(0,0,0,0.18);
}

.services {
  background: linear-gradient(180deg, #F6F9FD 0%, #EDF4FA 100%);
}

.how {
  background:
    linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%);
}

.reviews {
  position: relative;
  background:
    radial-gradient(circle at 86% 12%, rgba(88,147,212,0.16) 0%, rgba(88,147,212,0) 32%),
    linear-gradient(180deg, #EEF5FC 0%, #F7FBFF 58%, #FFFFFF 100%);
  border-top: 1px solid rgba(168,197,224,0.42);
  border-bottom: 1px solid rgba(168,197,224,0.34);
}

.reviews > .container {
  position: relative;
  z-index: 1;
}

.reviews-head .eyebrow-line {
  color: var(--brand-700);
}

.reviews-agg {
  background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFE 100%);
  border-color: rgba(88,147,212,0.22);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(14,47,77,0.10);
}

.reviews-agg-divider {
  background: rgba(88,147,212,0.22);
}

.review-card {
  background: linear-gradient(180deg, #FFFFFF 0%, #FBFDFF 100%);
  border-color: rgba(88,147,212,0.20);
  box-shadow: 0 16px 34px rgba(14,47,77,0.08);
}

.review-card .stars {
  color: #E8A60C;
}

.over {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FAFD 100%);
}

.cta-band {
  background:
    radial-gradient(circle at 84% 20%, rgba(88,147,212,0.22) 0%, rgba(88,147,212,0) 34%),
    linear-gradient(135deg, #0B0D10 0%, #0E2F4D 58%, #163A5A 100%);
}

.booking-hero {
  position: relative;
  overflow: hidden;
  padding: 42px 0 72px;
  background:
    radial-gradient(circle at 85% 10%, rgba(88,147,212,0.18) 0%, rgba(88,147,212,0) 34%),
    linear-gradient(135deg, #EEF5FC 0%, #FFFFFF 58%, #EAF2FB 100%);
  border-bottom: 1px solid rgba(168,197,224,0.38);
}

.booking-hero .container {
  position: relative;
  z-index: 1;
}

.booking-hero h1 {
  max-width: 720px;
  margin: 12px 0 14px;
  color: var(--agio-blue-600);
}

.booking-hero p {
  max-width: 700px;
  color: var(--fg-2);
  font-size: 18px;
  line-height: 1.6;
  margin: 0;
}

.offerte-form-section {
  background:
    linear-gradient(180deg, #F8FBFF 0%, #FFFFFF 100%);
}

.offerte-form-section .booking-wrap {
  gap: 52px;
  align-items: stretch;
}

.offerte-form-section .booking-wrap > div:first-child {
  align-self: start;
  padding: 28px;
  border: 1px solid rgba(88,147,212,0.20);
  border-radius: 16px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96) 0%, rgba(235,240,247,0.64) 100%);
  box-shadow: 0 18px 42px rgba(14,47,77,0.08);
}

.offerte-form-section .booking-wrap > div:first-child .lead {
  color: var(--fg-2);
}

.offerte-info {
  display: grid;
  gap: 12px;
  margin-top: 28px;
}

.offerte-info span {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid rgba(88,147,212,0.18);
  border-radius: 12px;
  background: rgba(255,255,255,0.88);
  color: var(--fg-1);
  font-size: 14px;
  line-height: 1.45;
  box-shadow: 0 10px 24px rgba(14,47,77,0.06);
}

.offerte-info svg {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  color: var(--brand-600);
  flex: none;
}

.offerte-form-section .booking-form {
  border-color: rgba(88,147,212,0.22);
  box-shadow: 0 22px 54px rgba(14,47,77,0.13);
}

.offerte-form-section .field {
  gap: 6px;
}

.offerte-form-section .input,
.offerte-form-section .select,
.offerte-form-section .textarea {
  border-color: #D7E2EC;
}

.offerte-form-section .file-drop {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
  border-color: rgba(88,147,212,0.26);
}

.offerte-form-section .form-submit-row {
  padding-top: 14px;
  border-top: 1px solid rgba(168,197,224,0.42);
}

.offerte-form-section .booking-success {
  background: #EAF7EE;
  border-color: #B8DDC2;
}

.offerte-form-section + .external-cta {
  padding: 0 0 72px;
  background: linear-gradient(180deg, #FFFFFF 0%, #F5F9FD 100%);
}

.offerte-form-section + .external-cta .container {
  text-align: center;
  padding-top: 40px;
  border-top: 1px solid rgba(168,197,224,0.42);
}

.offerte-form-section + .external-cta h2 {
  margin: 0 0 10px;
  color: var(--agio-blue-600);
}

.offerte-form-section + .external-cta p {
  max-width: 560px;
  margin: 0 auto 22px;
  color: var(--fg-2);
  line-height: 1.55;
}

@media (max-width: 860px) {
  .offerte-form-section .booking-wrap {
    gap: 24px;
  }

  .offerte-info {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .hero[data-mood="fris"] .hero-scrim {
    background:
      radial-gradient(circle at 18% 12%, rgba(88,147,212,0.30) 0%, rgba(88,147,212,0) 36%),
      linear-gradient(115deg, rgba(6,24,40,0.92) 0%, rgba(14,47,77,0.82) 58%, rgba(31,78,121,0.55) 100%);
  }

  .hero[data-mood="fris"] .hero-meta {
    gap: 8px;
  }

  .hero[data-mood="fris"] .hero-meta-row {
    min-height: 32px;
    padding: 7px 10px;
  }

  .reviews-agg {
    width: 100%;
  }

  .reviews-agg-divider {
    display: none;
  }

  .booking-hero {
    padding: 30px 0 52px;
  }

  .booking-hero h1 {
    font-size: 38px;
  }

  .booking-hero p {
    font-size: 16px;
  }

  .offerte-form-section .booking-wrap > div:first-child,
  .offerte-form-section .booking-form {
    padding: 20px;
    border-radius: 14px;
  }

  .offerte-info {
    grid-template-columns: 1fr;
  }

  .offerte-form-section + .external-cta {
    padding-bottom: 56px;
  }
}

@media (max-width: 1100px) {
  body:has(.cookie-banner) .fab {
    bottom: 104px;
  }
}

@media (max-width: 540px) {
  body:has(.cookie-banner) .fab {
    display: none;
  }
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAFIE VERFIJNING
   Doel: professioneler, rustiger, minder template-achtig.
   Uitsluitend CSS-overrides — geen HTML, geen JS, geen fonts.
   ════════════════════════════════════════════════════════════════ */

/* ── 1. Body line-height: comfortabeler leesbaar ─────────────────
   1.5 is het absolute minimum; 1.6 is merkbaar aangename op scherm.   */
html { line-height: 1.6; }

/* ── 2. H3 standaard 700 — niet 800 ──────────────────────────────
   Globale heading-regel zet alles op 800; ~80% van de specifieke
   h3-overrides corrigeren dat al naar 700. Centraliseer hier.         */
h3, .h3 { font-weight: 700; }

/* H4 ook: subtitels in cards/stappen horen lichter dan sectiestitel. */
h4, .h4 { font-weight: 700; }

/* ── 3. how-title: terug naar h2-niveau ──────────────────────────
   44px maakt "Zo werkt het" visueel groter dan de diensten-sectie
   en de reviews-kop. Een ondersteunende uitleg hoort lager in de
   hiërarchie. 38px → sober maar nog steeds prominent.                 */
.how-title { font-size: 38px; }

/* Mobile: van 44→34 was te abrupt; nu 38→32, vloeiender.            */
@media (max-width: 720px) { .how-title { font-size: 32px; } }

/* ── 4. Eyebrow letter-spacing: minder agressief ─────────────────
   0.14em is template-achtig; 0.10em is professioneel en leesbaar.     */
.eyebrow-line { letter-spacing: 0.10em; }

/* ── 5. Services h2: consistent met globale h2 ────────────────────
   .services-head h2 stond op 38px zonder reden; globale h2 is 34px.  */
.services-head h2 { font-size: 34px; }

/* ── 6. Review-quotes: leesbaar als echte tekst ──────────────────
   14px + line-height 1.5 is te compact voor reviewtekst.
   15px + 1.6 is comfortabeler zonder de kaart te vergroten.           */
.review-card .quote {
  font-size: 15px;
  line-height: 1.6;
}

/* ── 7. Bugfix: dov-tile-body beschrijvingen in mono ──────────────
   Beschrijvende tekst op de diensten-overzichtspagina stond
   abusievelijk in JetBrains Mono. Herstel naar body-font.
   Half-pixel grootte (12.5px) tegelijk gecorrigeerd naar 13px.       */
.dov-tile-body p {
  font-family: var(--font-body);
  font-size: 13px;
}

/* ── 8. svc-hero h1: mobiele schaling ────────────────────────────
   Service-pagina hero H1 stond op 54px zonder responsive override.
   Op 360px is 54px onleesbaar cramped; nu gelijke behandeling
   als de homepage hero.                                                */
@media (max-width: 640px) { .svc-hero h1 { font-size: 38px; } }
@media (max-width: 400px) { .svc-hero h1 { font-size: 32px; } }

/* ── 9. Subtiele button-tracking ─────────────────────────────────
   0.01em tracking geeft knoppen een iets meer 'gezette' look
   zonder de leesbaarheid te beïnvloeden.                              */
.btn { letter-spacing: 0.01em; }

/* ── 10. Paragraaf-tekst in cards: iets ruimer ───────────────────
   service-card en reason-card description text was 14px/1.5;
   1.55 geeft meer lucht zonder de kaarthoogte te veranderen.          */
.service-card-body p { line-height: 1.55; }
.reason-card p       { line-height: 1.55; }

/* ── Typografie audit-tokens: gedocumenteerd voor onderhoud ──────

   Heading schaal (desktop):
     h1 homepage hero  : 64px / 800 / ls -0.015em
     h1 service hero   : 54px / 800 / ls -0.015em
     h1 contact/legal  : 48–56px / 800
     h1 reviews/diensten: 50–52px / 800
     h2 global / .h2   : 34px / 800 / ls -0.015em
     h2 how-title       : 38px → 32px mobiel
     h3 global         : 18px / 700 (was 800)
     h4 global         : 22px / 700 (was 800)

   Body:
     html line-height  : 1.6 (was 1.5)
     body text         : 16px / 400

   UI:
     btn default       : 15px / 600 / ls 0.01em
     btn-lg            : 16px / 600
     btn-sm            : 13px / 600
     nav link          : 14px / 600
     eyebrow           : 12px / 700 / ls 0.10em (was 0.14em)
     field-label       : 13px / 600

   ──────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════
   P1 SUBPAGINA-FIXES — CSS-only bugfixes
   Alleen site.css gewijzigd; geen HTML / JS / content aangepast.
   ════════════════════════════════════════════════════════════════ */

/* ── Fix 1 — .reasons-card / .reasons-icon aliassen ─────────────
   Regio/stedenpagina's (rotterdam, den-haag, zoetermeer, leiden)
   gebruiken de meervoudsvorm '.reasons-card' en '.reasons-icon'.
   CSS definieerde alleen de enkelvoudsvorm '.reason-card' /
   '.reason-icon', waardoor kaarten volledig onstyled waren.        */

.reasons-card {
  background: #fff;
  border: 1px solid var(--border-1);
  border-radius: 14px;
  padding: 24px;
}

/* Regio-kaarten gebruiken <h3>; standaard '.reason-card' gebruikt <h4>. */
.reasons-card h3 {
  font-size: 17px;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--ink-900);
  line-height: 1.3;
}

.reasons-card p {
  font-size: 14px;
  color: var(--fg-2);
  line-height: 1.55;
  margin: 0;
}

.reasons-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--brand-soft);
  color: var(--brand-700);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
}

/* Zowel het ruwe [data-lucide]-element als de SVG die Lucide erin zet: */
.reasons-icon svg          { width: 22px; height: 22px; stroke-width: 1.5; }
.reasons-icon [data-lucide] { width: 22px; height: 22px; }


/* ── Fix 2a — .ref-hero ──────────────────────────────────────────
   De matras-laten-reinigen pagina is een doorverwijspagina naar de
   zustersite. De klasse '.ref-hero' bestond niet in CSS.
   Visueel aansluitend op '.dov-hero': wit, rustig, sober.          */

.ref-hero {
  position: relative;
  padding: 40px 0 64px;
  background: var(--bg-1);
  border-bottom: 1px solid var(--border-1);
  overflow: hidden;
}

.ref-hero h1 {
  font-size: 46px;
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--ink-900);
  max-width: 660px;
  margin: 16px 0 20px;
  text-wrap: balance;
}

.ref-hero p.lead {
  font-size: 17px;
  line-height: 1.6;
  color: var(--fg-2);
  max-width: 560px;
  margin: 0 0 28px;
}

@media (max-width: 640px) {
  .ref-hero h1 { font-size: 34px; }
  .ref-hero    { padding: 32px 0 48px; }
}


/* ── Fix 2b — .crumb ─────────────────────────────────────────────
   Matras-pagina gebruikt '.crumb' i.p.v. het standaard '.breadcrumb'.
   Scheiders zijn '·' (tekst) in plaats van SVG-chevrons.           */

.crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--fg-3);
  padding: 22px 0 0;
}

.crumb a {
  color: var(--brand-700);
  text-decoration: none;
  font-weight: 600;
}

.crumb a:hover            { text-decoration: underline; }
.crumb span:last-child    { color: var(--fg-2); }


/* ── Fix 2c — .ref-contact ───────────────────────────────────────
   Contactregel direct onder de CTA-knop op de matras-pagina.      */

.ref-contact {
  margin-top: 16px;
  font-size: 14px;
  color: var(--fg-3);
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.ref-contact a {
  color: var(--brand-700);
  font-weight: 600;
  text-decoration: none;
}

.ref-contact a:hover { text-decoration: underline; }


/* ── Fix 3 — .narrative-grid met één child ───────────────────────
   Alle vier steden-pagina's (rotterdam, den-haag, zoetermeer,
   leiden) plaatsen één <div> in '.narrative-grid', een twee-kolom
   grid. Zonder deze fix staat de tekst in de linkerhelft met een
   grote lege rechterkolom op desktop.
   ':has(> :only-child)' wordt ondersteund door ~95% van browsers;
   de resterende 5% ziet de bestaande half-breedte layout.         */

.narrative-grid:has(> :only-child) {
  grid-template-columns: 1fr;
  max-width: 760px;
}


/* ════════════════════════════════════════════════════════════════
   SUBPAGINA VISUAL POLISH
   CSS-only — geen HTML / JS / content aangepast.
   Doel: consistent Agio-branded gevoel op alle subpagina's.
   ════════════════════════════════════════════════════════════════ */

/* ── P1 · Hero-achtergronden ──────────────────────────────────── */

/* svc-hero — diensten, over-ons, zakelijk */
.svc-hero {
  background:
    radial-gradient(ellipse at 98% 5%,  rgba(88,147,212,0.11) 0%, transparent 46%),
    radial-gradient(circle  at  3% 88%, rgba(88,147,212,0.06) 0%, transparent 34%),
    linear-gradient(180deg, #EEF4FB 0%, #F5F9FD 42%, #FFFFFF 100%);
  border-bottom: 1px solid rgba(168,197,224,0.40);
}

/* Watermark-div verwijst naar ontbrekende SVG; neutraliseer de
   defecte image-reference. Visueel effect zit op .svc-hero zelf. */
.svc-hero-watermark,
.dov-hero-watermark {
  background: none;
  opacity: 0;
}

/* dov-hero — diensten-overzicht, regio Zuid-Holland */
.dov-hero {
  background:
    radial-gradient(ellipse at 97% -5%,  rgba(88,147,212,0.13) 0%, transparent 48%),
    linear-gradient(180deg, #EEF4FB 0%, #F5F9FD 50%, var(--bg-1) 100%);
  border-bottom: 1px solid rgba(168,197,224,0.42);
}

/* legal-hero — privacy en algemene voorwaarden */
.legal-hero {
  background: linear-gradient(160deg, #EEF4FB 0%, var(--bg-1) 60%);
  border-bottom: 1px solid rgba(168,197,224,0.35);
}

/* contact-hero (extends legal-hero) */
.contact-hero {
  background:
    radial-gradient(ellipse at 96% 10%, rgba(88,147,212,0.11) 0%, transparent 42%),
    linear-gradient(145deg, #EEF4FB 0%, #F4F8FD 48%, var(--bg-1) 100%);
  border-bottom: 1px solid rgba(168,197,224,0.38);
}

/* rv-hero — reviews-pagina */
.rv-hero {
  background:
    radial-gradient(ellipse at 94% -8%, rgba(88,147,212,0.12) 0%, transparent 46%),
    linear-gradient(180deg, #EEF4FB 0%, #F5F9FD 55%, var(--bg-1) 100%);
  border-bottom: 1px solid rgba(168,197,224,0.38);
}

/* ref-hero — matras doorverwijspagina */
.ref-hero {
  background:
    radial-gradient(ellipse at 95% 5%, rgba(88,147,212,0.10) 0%, transparent 44%),
    linear-gradient(180deg, #EEF4FB 0%, #F5F9FD 50%, var(--bg-1) 100%);
}


/* ── P1 · Trust-strip: visueel sterker ───────────────────────── */

.trust-strip {
  background: linear-gradient(180deg, #FFFFFF 0%, #EDF4FA 100%);
  border-top:    1px solid rgba(168,197,224,0.45);
  border-bottom: 1px solid rgba(168,197,224,0.45);
}

.trust-strip-icon {
  box-shadow: 0 4px 12px rgba(88,147,212,0.15);
}

.trust-strip-item h4 {
  color: var(--brand-700);
}


/* ── P1 · Sectie-achtergronden subpagina's ───────────────────── */

/* narrative: wit met zeer subtiele gradiënt */
.narrative {
  background: linear-gradient(180deg, #FFFFFF 0%, #F6F9FD 100%);
}

/* reasons: herkenbaar Agio-blauw vlak */
.reasons {
  background:
    radial-gradient(circle at 96% 8%, rgba(88,147,212,0.09) 0%, transparent 36%),
    linear-gradient(180deg, #EEF4FB 0%, #F2F7FC 100%);
}

/* proc: helder wit met subtiele scheidingslijnen */
.proc {
  background: #FFFFFF;
  border-top:    1px solid rgba(168,197,224,0.28);
  border-bottom: 1px solid rgba(168,197,224,0.28);
}

/* segment: blauw-getint — zelfde ritme als reasons */
.segment {
  background: linear-gradient(180deg, #EEF4FB 0%, #F3F7FC 100%);
}

/* price: wit naar blauw — leidt visueel naar garantie-donker */
.price {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FC 100%);
}

/* faq: lichtblauw-getint, gescheiden van price */
.faq {
  background:
    linear-gradient(180deg, #EEF4FB 0%, #F3F7FC 55%, #FFFFFF 100%);
  border-top: 1px solid rgba(168,197,224,0.30);
}

/* regio (steden-overzicht) */
.regio {
  background: linear-gradient(180deg, #F3F7FC 0%, #EEF4FB 100%);
  border-top: 1px solid rgba(168,197,224,0.28);
}

/* wijken: wit — chips hebben lucht nodig */
.wijken {
  background: #FFFFFF;
  border-top:    1px solid rgba(168,197,224,0.25);
  border-bottom: 1px solid rgba(168,197,224,0.25);
}

/* bda (matras before/during/after) */
.bda {
  background: linear-gradient(180deg, #FFFFFF 0%, #F3F7FC 100%);
  border-top: 1px solid rgba(168,197,224,0.28);
}


/* ── P2 · Kaartdiepte ────────────────────────────────────────── */

.reason-card,
.reasons-card {
  border-color: rgba(168,197,224,0.35);
  box-shadow: 0 4px 16px rgba(14,47,77,0.06);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow   var(--dur-base) var(--ease-standard),
    transform    var(--dur-base) var(--ease-standard);
}

.reason-card:hover,
.reasons-card:hover {
  border-color: var(--brand-500);
  box-shadow: 0 8px 24px rgba(14,47,77,0.10);
  transform: translateY(-2px);
}

.segment-card {
  border-color: rgba(168,197,224,0.32);
  box-shadow: 0 4px 16px rgba(14,47,77,0.06);
  transition:
    border-color var(--dur-base) var(--ease-standard),
    box-shadow   var(--dur-base) var(--ease-standard);
}

.segment-card:hover {
  border-color: var(--brand-500);
  box-shadow: 0 10px 28px rgba(14,47,77,0.10);
}

.bedrijf-card {
  border-color: rgba(168,197,224,0.32);
  box-shadow: 0 2px 10px rgba(14,47,77,0.06);
}

.contact-card {
  border-color: rgba(168,197,224,0.28);
  box-shadow: 0 4px 16px rgba(14,47,77,0.06);
}

.price-table {
  border-color: rgba(168,197,224,0.40);
  box-shadow: 0 8px 28px rgba(14,47,77,0.08);
}

.bda-photo {
  box-shadow: 0 8px 24px rgba(14,47,77,0.10);
}

.regio-city-card {
  border-color: rgba(168,197,224,0.30);
  box-shadow: 0 4px 16px rgba(14,47,77,0.06);
}

.dov-card {
  border-color: rgba(168,197,224,0.28);
  box-shadow: 0 4px 16px rgba(14,47,77,0.06);
}

.rv-card {
  border-color: rgba(168,197,224,0.28);
  box-shadow: 0 6px 20px rgba(14,47,77,0.07);
}


/* ── P2 · FAQ open-state ─────────────────────────────────────── */

.faq-item.open .faq-q {
  color: var(--brand-700);
}


/* ── P2 · Contact-paginasecties ──────────────────────────────── */

.contact-cards-section {
  background: linear-gradient(180deg, var(--bg-1) 0%, #F4F8FD 100%);
}

.contact-form-section {
  background: linear-gradient(180deg, #F4F8FD 0%, var(--bg-1) 100%);
}

.contact-faq {
  background:
    linear-gradient(180deg, #EEF4FB 0%, #F3F7FC 100%);
  border-top: 1px solid rgba(168,197,224,0.30);
}


/* ── P2 · Legal-body achtergrond ─────────────────────────────── */

.legal-body {
  background: linear-gradient(180deg, #FFFFFF 0%, #F7FBFF 100%);
}


/* ── P2 · Reviews rv-leave CTA: consistente donkere band ─────── */

.rv-leave {
  background:
    radial-gradient(circle at 84% 20%, rgba(88,147,212,0.22) 0%, rgba(88,147,212,0) 34%),
    linear-gradient(135deg, #0B0D10 0%, #0E2F4D 58%, #163A5A 100%);
}


/* ── Responsive: verklein sectie-padding op mobiel ───────────── */
@media (max-width: 640px) {
  .narrative { padding: 60px 0; }
  .reasons   { padding: 60px 0; }
  .proc      { padding: 60px 0; }
  .segment   { padding: 60px 0; }
  .price     { padding: 60px 0; }
  .faq       { padding: 60px 0; }
  .regio     { padding: 60px 0; }
  .wijken    { padding: 60px 0; }
  .bda       { padding: 60px 0; }
}


/* ── Diensten checkboxgroep (Fix 1) ─────────────────────────────
   Meerdere diensten selecteerbaar via checkbox-grid in offerteformulier. */

.diensten-checkboxes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px 16px;
  margin-top: 6px;
}

.dienst-check {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  cursor: pointer;
  user-select: none;
}

/* ════════════════════════════════════════════════════════════════
   STABILISATIEPATCH v5.1
   ════════════════════════════════════════════════════════════════ */

/* Universele [hidden] garantie — voorkomt dat browser-defaults of
   thirdparty CSS de verborgen staat overschrijven. */
[hidden] { display: none !important; }

/* ── Mobiele sticky CTA (WhatsApp + Bel) ── */
.mobile-sticky-cta {
  display: none; /* standaard verborgen op desktop */
}

@media (max-width: 768px) {
  .mobile-sticky-cta {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 50;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, 0.14);
  }
  .mobile-cta-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 15px 12px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    line-height: 1;
    -webkit-tap-highlight-color: transparent;
  }
  .mobile-cta-wa  { background: #25D366; color: #fff; }
  .mobile-cta-bel { background: var(--brand-500); color: #fff; }
  .mobile-cta-wa:hover  { background: #1ebe5d; color: #fff; }
  .mobile-cta-bel:hover { background: var(--brand-600); color: #fff; }

  /* Desktop FAB verbergen op mobiel (vervangen door sticky bar) */
  .fab#fab-bel { display: none !important; }

  /* Voldoende ruimte voor sticky CTA onderaan */
  body { padding-bottom: 56px; }
}

/* ── WhatsApp hero-knop ── */
.btn-whatsapp {
  background: #25D366;
  color: #fff;
  border: none;
  font-family: var(--font-body);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-standard);
  padding: 10px 22px;
  border-radius: 10px;
}
.btn-whatsapp:hover { background: #1ebe5d; color: #fff; }

/* ── WhatsApp knop in desktop header ─── */
.header-wa { background: #25D366; color: #fff; display: inline-flex; align-items: center; gap: 6px; }
.header-wa:hover { background: #1ebe5d; color: #fff; }

/* ── Stad-pagina: secties .wijken / .reasons ─────────────────────
   .wijken (wit) + .reasons (bijna-wit gradient) hebben elk 96px padding,
   wat een 192px onzichtbare lege zone creëert tussen secties.
   Op .page-stad terugbrengen naar 72px + .reasons visueel zichtbaar
   onderscheiden via var(--bg-2) achtergrond (#F6F7F8 lichtgrijs).      */
.page-stad .wijken  { padding: 72px 0; }
.page-stad .reasons { padding: 72px 0; background: var(--bg-2); }

@media (max-width: 640px) {
  .page-stad .wijken  { padding: 48px 0; }
  .page-stad .reasons { padding: 48px 0; }
}

/* ── Dienst-pagina reviews sectie ────────────────────────────────
   Toont gefilterde klantreviews per dienst (bank/matras/tapijt).
   Reviews worden gerenderd via JS uit window.AGIO_REVIEWS.         */
.svc-reviews { padding: 72px 0; background: var(--bg-2); }
.svc-reviews .h2 { margin-bottom: 8px; }
.svc-reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 40px; }
.svc-reviews .review-card { background: #fff; border: 1px solid var(--border-1); border-radius: 16px; padding: 24px; display: flex; flex-direction: column; gap: 12px; }
.svc-reviews .review-header { display: flex; align-items: center; gap: 12px; }
.svc-reviews .review-avatar { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 16px; flex-shrink: 0; }
.svc-reviews .review-name { font-weight: 600; font-size: 15px; color: var(--ink-1); }
.svc-reviews .review-stars { color: #F59E0B; font-size: 13px; letter-spacing: 1px; }
.svc-reviews .review-text { color: var(--ink-2); line-height: 1.65; font-size: 15px; flex: 1; }
.svc-reviews .review-time { font-size: 13px; color: var(--fg-2); }
.svc-reviews-more { display: inline-block; margin-top: 32px; font-size: 15px; font-weight: 600; color: var(--brand-1); text-decoration: none; }
.svc-reviews-more:hover { text-decoration: underline; }

@media (max-width: 768px) {
  .svc-reviews-grid { grid-template-columns: 1fr; }
}

/*  Footer Werkgebied sublijst  */
nav[aria-label="Werkgebied"] ul ul { margin: 0; padding: 0; list-style: none; }
nav[aria-label="Werkgebied"] ul ul li a { font-size: 0.85em; padding-left: 0.75rem; opacity: 0.75; }
nav[aria-label="Werkgebied"] strong { display: block; margin-top: 0.75rem; }


/* Codex Step 4 polish */
.services {
  background: linear-gradient(180deg, #f6f9fc 0%, #eef4fb 100%);
}
.services-grid {
  gap: 22px;
  align-items: stretch;
}
.service-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  min-height: 188px;
  padding: 28px;
  border-radius: 20px;
  border-color: rgba(168, 197, 224, 0.8);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  background: linear-gradient(180deg, #ffffff 0%, #f9fbfd 100%);
}
.service-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 20px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.75);
  pointer-events: none;
}
.service-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(15, 23, 42, 0.11);
}
.service-card-icon {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e6f0fb 0%, #dce9f7 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.8);
}
.service-card-body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.service-card-body h3 {
  font-size: 20px;
  margin: 2px 0 8px;
}
.service-card-body p {
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.service-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
}
.service-card-price {
  font-size: 15px;
  font-weight: 700;
  color: var(--brand-700);
}
.service-card-go {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-900);
}
.trust-strip {
  background: linear-gradient(180deg, #ffffff 0%, #f3f7fb 100%);
  padding: 44px 0;
}
.trust-strip-grid {
  gap: 18px;
}
.trust-strip-item {
  padding: 18px;
  border: 1px solid rgba(168, 197, 224, 0.72);
  border-radius: 18px;
  background: rgba(255,255,255,0.92);
  box-shadow: 0 8px 22px rgba(15, 23, 42, 0.05);
}
.reviews {
  background: linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}
.reviews-grid {
  gap: 20px;
}
.review-card {
  border-radius: 18px;
  border-color: rgba(168, 197, 224, 0.72);
  box-shadow: 0 10px 26px rgba(15, 23, 42, 0.05);
  padding: 24px;
}
.review-card .quote {
  font-size: 15px;
  line-height: 1.65;
}
.review-card .who {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.cta-band {
  background: linear-gradient(135deg, #0f3554 0%, #1f5f8f 52%, #2d78b3 100%);
}
.cta-band h2,
.cta-band p,
.cta-band .eyebrow-line {
  color: #fff;
}
.cta-band .eyebrow-line::before {
  background: rgba(255,255,255,0.75);
}
.cta-band .btn-cta-secondary {
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.22);
  color: #fff;
}
.cta-band .btn-cta-secondary:hover {
  background: rgba(255,255,255,0.18);
}
@media (max-width: 860px) {
  .service-card {
    grid-template-columns: 52px 1fr;
    min-height: 0;
    padding: 22px;
  }
}