/*
Theme Name: bluectnew
Theme URI: https://bluect.nl
Author: BlueCT
Description: Custom classic PHP theme for BlueCT. Content lives in SCF fields. SmartCrawl owns SEO; Forminator owns forms.
Version: 1.0.0
Text Domain: bluectnew
*/

/* Concept: "Precision commerce" — an electric-blue system on ink-on-mist, Archivo
   display over Hanken Grotesk body, hairline structure and soft ambient cards.
   Every page is a calm, honest argument that terminates in one EUR 95 deposit.
   Signature details: (1) a thin accent top-border on the elevated price card and
   a small hairline "focal" rule under every eyebrow; (2) the accent-green
   guarantee bar as the single, reserved use of the brand green. */

/* ---------- Self-hosted fonts (woff2, latin, variable) ---------- */
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/archivo-latin.woff2') format('woff2');
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('assets/fonts/hanken-latin.woff2') format('woff2');
}
/* Matched fallback metrics so font-swap does not shift layout (CLS < 0.1) */
@font-face {
  font-family: 'Archivo Fallback';
  src: local('Arial');
  size-adjust: 105%;
  ascent-override: 87.8%;
  descent-override: 21%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Hanken Fallback';
  src: local('Arial');
  size-adjust: 100%;
  ascent-override: 100%;
  descent-override: 30.3%;
  line-gap-override: 0%;
}

/* ---------- Design tokens ---------- */
:root {
  /* brand palette (verified, non-negotiable) */
  --primary: #335eea;
  --primary-dark: #1f3fb0;
  --accent: #42ba96;      /* FILL only */
  --accent-ink: #1d6b52;  /* accent TEXT */
  --ink: #0d1117;
  --muted: #5f6a7d;
  --subhead: #869ab8;     /* only on dark grounds / large */
  --tint: #edf3ff;
  --page-bg: #f9fbfd;
  --surface: #ffffff;
  --line: #dfe5f2;

  /* button tokens */
  --btn-fill: var(--primary);
  --btn-label: #ffffff;

  /* fonts */
  --font-display: 'Archivo', 'Archivo Fallback', system-ui, sans-serif;
  --font-body: 'Hanken Grotesk', 'Hanken Fallback', system-ui, sans-serif;

  /* fluid type scale */
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);   /* body min 16px */
  --step-1: clamp(1.125rem, 1.06rem + 0.35vw, 1.3125rem);
  --step-2: clamp(1.3rem, 1.18rem + 0.6vw, 1.6rem);
  --step-3: clamp(1.6rem, 1.4rem + 1vw, 2.1rem);
  --step-4: clamp(1.9rem, 1.55rem + 1.8vw, 2.9rem);
  --step-5: clamp(2.05rem, 1.6rem + 3vw, 4.05rem);

  /* spacing */
  --space-1: .5rem;  --space-2: .75rem; --space-3: 1rem; --space-4: 1.5rem;
  --space-5: 2rem;   --space-6: 3rem;   --space-7: 4.5rem; --space-8: 7rem;

  --radius: 8px;      /* cards */
  --radius-btn: 12px; /* buttons */
  --shadow: 0 18px 40px -24px rgba(13,17,23,.28), 0 2px 8px -4px rgba(13,17,23,.12);
  --container: 1280px;
  --measure: 760px;
}

/* ---------- Reset / base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: hidden; max-width: 100%; }
body {
  margin: 0;
  background: var(--page-bg);
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  color: var(--ink);
  font-weight: 700;
  line-height: 1.17;
  letter-spacing: -0.03em;
  margin: 0 0 var(--space-3);
}
h1 { font-size: var(--step-5); }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); font-weight: 600; }
h4 { font-size: var(--step-1); font-weight: 600; }
p { margin: 0 0 var(--space-3); }
a { color: var(--primary); text-decoration: none; }
a:hover { color: var(--primary-dark); text-decoration: underline; }
img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a > svg, button > svg, p svg, li svg, .chip svg, label svg {
  display: inline-block; vertical-align: middle;
}
strong { color: var(--ink); font-weight: 600; }
:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-radius: 2px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(1rem, 5vw, 2rem); }
main { display: block; }
.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--tint { background: var(--tint); }
.section--dark { background: var(--ink); color: var(--subhead); }
.section--dark h1, .section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }
.section--dark p { color: var(--subhead); }
.section--dark a { color: #fff; }
.stack > * + * { margin-top: var(--space-3); }
.eyebrow {
  display: inline-flex; align-items: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: .8rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--primary);
  margin: 0 0 var(--space-3);
}
.eyebrow::before { content: ""; width: 26px; height: 3px; background: var(--primary); border-radius: 2px; display: inline-block; }
.section--dark .eyebrow { color: #fff; }
.section--dark .eyebrow::before { background: var(--accent); }
.lead { font-size: var(--step-1); color: var(--muted); }
.section-head { max-width: 720px; margin-bottom: var(--space-6); }

/* long-form reading measure — centered */
.prose--longform { max-width: var(--measure); margin-inline: auto; text-align: left; }
.prose h2, .prose h3, .prose h4 { color: var(--ink); margin-top: var(--space-5); }
.prose p { margin-bottom: var(--space-3); }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 var(--space-3); }
.prose li { margin-bottom: .4rem; }
.prose ul li::marker { color: var(--primary); }
.prose ul ul li::marker { color: var(--subhead); }
.prose blockquote { margin: var(--space-4) 0; padding-left: var(--space-3); border-left: 3px solid var(--line); color: var(--muted); font-style: italic; }
.prose a { text-decoration: underline; }
.table-scroll { overflow-x: auto; margin: var(--space-4) 0; }
.prose table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.prose th, .prose td { text-align: left; padding: .7rem .9rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; word-break: break-word; }
.prose th { font-family: var(--font-display); color: var(--ink); border-bottom: 2px solid var(--ink); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: var(--font-display); font-weight: 600; font-size: 1rem;
  padding: 11px 22px; border-radius: var(--radius-btn); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; line-height: 1.2; text-align: center;
  transition: background-color .2s ease, transform .15s ease, box-shadow .2s ease, color .2s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn--primary { background: var(--btn-fill); color: var(--btn-label); }
.btn--primary:hover { background: var(--primary-dark); color: #fff; }
.btn--secondary { background: var(--tint); color: var(--primary-dark); border-color: var(--line); }
.btn--secondary:hover { background: #e2ebff; color: var(--primary-dark); }
.btn--ghost { background: transparent; color: var(--primary); border-color: var(--line); }
.btn--ghost:hover { background: var(--tint); color: var(--primary-dark); }
.btn--lg { font-size: 1.0625rem; padding: 14px 28px; }
.btn--block { display: flex; width: 100%; }
.btn[disabled], .btn.is-disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }
.text-link { font-weight: 500; color: var(--primary); text-decoration: underline; text-underline-offset: 3px; }
.micro { font-size: .9rem; color: var(--muted); margin-top: var(--space-2); }

/* ---------- Header ---------- */
.skip-link { position: absolute; left: -9999px; top: 0; background: var(--primary); color: #fff; padding: .75rem 1rem; z-index: 2000; border-radius: 0 0 var(--radius) 0; }
.skip-link:focus { left: 0; }

.utility-bar { display: none; background: var(--ink); color: var(--subhead); font-size: .85rem; }
.utility-bar .container { display: flex; justify-content: flex-end; gap: var(--space-4); padding-block: .4rem; }
.utility-bar a { color: #fff; display: inline-flex; align-items: center; gap: .4rem; }
@media (min-width: 900px) { .utility-bar { display: block; } }

.site-header { position: sticky; top: 0; z-index: 900; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.2) blur(8px); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: .85rem; }
.brand { display: inline-flex; align-items: center; flex-direction: column; align-items: flex-start; gap: 2px; }
.brand img, .brand svg.brand-mark { height: clamp(30px, 4vw, 44px); width: auto; max-width: 190px; object-fit: contain; }
.brand .slogan { font-size: .72rem; color: var(--muted); letter-spacing: .02em; }

.primary-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); }
.nav-menu { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); list-style: none; margin: 0; padding: 0; }
.nav-menu a { color: var(--ink); font-family: var(--font-display); font-weight: 600; font-size: 1rem; white-space: nowrap; padding: .4rem 0; position: relative; }
.nav-menu a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0; height: 2px; background: var(--primary); transition: width .22s ease; }
.nav-menu a:hover, .nav-menu a[aria-current="page"] { color: var(--primary); text-decoration: none; }
.nav-menu a:hover::after, .nav-menu a[aria-current="page"]::after { width: 100%; }
.header-cta { display: inline-flex; }

.nav-toggle, .drawer-close { display: none; }
.nav-toggle {
  background: transparent; border: 1px solid var(--line); border-radius: var(--radius-btn);
  width: 46px; height: 46px; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
.nav-overlay { display: none; }

/* header CTA must never coexist with the mobile sticky checkout bar */
@media (max-width: 879px) { .header-cta { display: none; } }

@media (max-width: 980px) {
  .nav-toggle { display: inline-flex; }
  .primary-nav {
    position: fixed; inset: 0 0 0 auto; width: min(88vw, 360px); height: 100dvh;
    background: var(--ink); color: #fff; flex-direction: column; align-items: stretch;
    gap: 0; padding: calc(var(--space-6)) var(--space-5) calc(var(--space-6) + env(safe-area-inset-bottom));
    transform: translateX(100%); transition: transform .28s ease; overflow-y: auto;
    overscroll-behavior: contain; z-index: 995;
  }
  body.nav-open .primary-nav { transform: translateX(0); }
  body.nav-open .site-header { z-index: 1000; }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu li { border-bottom: 1px solid rgba(255,255,255,.12); }
  .nav-menu li > a { color: #fff; display: block; padding: .95rem 0; font-size: 1.15rem; }
  .nav-menu a::after { display: none; }
  .header-cta.header-cta--drawer { display: inline-flex; margin-top: var(--space-4); }
  .drawer-close {
    display: inline-flex; position: absolute; top: 1rem; right: 1rem; width: 44px; height: 44px;
    align-items: center; justify-content: center; background: transparent; border: 1px solid rgba(255,255,255,.25);
    border-radius: var(--radius-btn); color: #fff; cursor: pointer;
  }
  body.nav-open .nav-overlay { display: block; position: fixed; inset: 0; background: rgba(13,17,23,.5); z-index: 990; }
  body.nav-open { overflow: hidden; }
}
@media (min-width: 981px) {
  .header-cta--drawer { display: none; }
}

/* ---------- Hero (type-led) ---------- */
.hero { padding-block: clamp(3rem, 8vw, 6rem); background:
  radial-gradient(1100px 520px at 78% -10%, rgba(51,94,234,.12), transparent 60%),
  radial-gradient(760px 420px at 8% 8%, rgba(66,186,150,.08), transparent 55%),
  var(--page-bg); }
.hero .container { max-width: 960px; margin-inline: 0; }
.hero h1 { margin-bottom: var(--space-4); }
.hero .hero-sub { font-size: var(--step-1); color: var(--muted); max-width: 640px; }
.hero .hero-sub .price-note { display: block; margin-top: var(--space-2); color: var(--ink); font-weight: 500; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-5); align-items: center; }
.hero-micro { margin-top: var(--space-3); font-size: .95rem; color: var(--muted); max-width: 560px; }
.service-area-line { margin-top: var(--space-3); font-size: .95rem; color: var(--muted); display: inline-flex; align-items: flex-start; gap: .45rem; white-space: normal; }
.service-area-line svg { flex: none; margin-top: 3px; }
/* [micro-final] FIX 1: compact trade-hook line under the hero micro-copy. */
.hero-trade-hook { margin-top: var(--space-2); font-size: .9rem; color: var(--muted); max-width: 560px; }
.hero-trade-hook a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }
/* [micro-final] FIX 3: combined year-1 total, directly under the price note. */
.price-note--total { margin-top: var(--space-1); font-size: .88rem; color: var(--muted); font-weight: 400; }
/* [micro-final] a11y fix (QA_C axe link-in-text-block, serious): the sitewide
   `a { text-decoration: none; }` rule leaves inline links inside a text block
   indistinguishable from surrounding text by color alone. Both new inline
   links added by this round need an explicit underline, matching the
   existing `.text-link` convention used elsewhere on the site. */
.care-line a,
.sector-qa__a a { color: var(--primary); text-decoration: underline; text-underline-offset: 2px; }

/* ---------- Trust strip ---------- */
.trust-strip { background: var(--surface); border-block: 1px solid var(--line); }
.trust-strip ul { list-style: none; margin: 0; padding: var(--space-4) 0; display: flex; flex-wrap: wrap; gap: var(--space-4) var(--space-6); justify-content: center; }
.trust-strip li { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 500; font-size: .98rem; }
.trust-strip svg { color: var(--primary); flex: none; }

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: var(--space-4); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); }
.card h3 { color: var(--ink); }
.card--link { position: relative; transition: transform .18s ease, box-shadow .2s ease; }
.card--link:hover { transform: translateY(-3px); box-shadow: 0 26px 50px -24px rgba(13,17,23,.34); }
.card--link .stretched::after { content: ""; position: absolute; inset: 0; z-index: 1; }

/* numbered steps */
.steps { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); counter-reset: step; }
.step { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); position: relative; box-shadow: var(--shadow); }
.step .num { font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; color: var(--primary); line-height: 1; letter-spacing: -0.04em; }
.step h3 { margin-top: var(--space-2); }
.section--dark .step { background: #151b26; border-color: #232c3b; }
.section--dark .step .num { color: #24304a; }

/* problem band */
.problem-copy p { color: var(--muted); }
.problem-copy .closing { font-family: var(--font-display); color: var(--ink); font-size: var(--step-2); font-weight: 600; }

/* ---------- Guarantee bar (the single reserved use of accent green) ---------- */
.guarantee-bar {
  background: var(--accent); color: var(--ink);
  border-radius: var(--radius); padding: var(--space-4) var(--space-5);
  display: flex; align-items: center; gap: var(--space-3); font-weight: 500; font-size: 1.05rem;
}
.guarantee-bar .g-badge { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 999px; background: rgba(255,255,255,.35); color: var(--accent-ink); }
.guarantee-bar strong { color: var(--ink); }

/* ---------- Price cards ---------- */
.price-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(3, 1fr); align-items: start; }
.price-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); position: relative; }
.price-card.is-featured { border-top: 4px solid var(--accent); }
.price-card .badge { position: absolute; top: -14px; left: var(--space-5); background: var(--primary); color: #fff; font-family: var(--font-display); font-weight: 600; font-size: .78rem; letter-spacing: .04em; padding: .35rem .8rem; border-radius: 999px; }
.price-card h3 { color: var(--ink); margin-bottom: var(--space-2); }
.price { display: flex; flex-direction: column; margin-bottom: var(--space-3); }
.price .excl { font-family: var(--font-display); font-weight: 700; font-size: var(--step-3); color: var(--ink); line-height: 1.05; letter-spacing: -0.03em; }
.price .incl { font-size: .9rem; color: var(--muted); margin-top: 2px; }
.price .unit { font-size: .85rem; color: var(--muted); }
.price-card ul { list-style: none; margin: 0 0 var(--space-4); padding: 0; }
.price-card li { display: flex; gap: .5rem; padding: .35rem 0; color: var(--muted); }
.price-card li svg { color: var(--primary); flex: none; margin-top: 4px; }
.care-line { margin-top: var(--space-4); font-size: 1rem; color: var(--ink); font-weight: 500; }

/* add-on table */
.addon-table { width: 100%; border-collapse: collapse; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.addon-table th, .addon-table td { text-align: left; padding: .85rem 1rem; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; }
.addon-table th { font-family: var(--font-display); color: var(--ink); background: var(--tint); }
.addon-table td .incl { color: var(--muted); font-size: .9rem; }
.addon-table tr:last-child td { border-bottom: 0; }

/* dual-btw price atom */
.price-dual { display: inline-flex; flex-direction: column; }
.price-dual .excl { font-weight: 600; color: var(--ink); }
.price-dual .incl { color: var(--muted); font-size: .82em; }

/* ---------- FAQ ---------- */
.faq { max-width: 820px; margin-inline: auto; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4) var(--space-5); margin-bottom: var(--space-3); }
.faq summary { font-family: var(--font-display); font-weight: 600; color: var(--ink); cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; align-items: center; font-size: 1.1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .chev { flex: none; transition: transform .2s ease; color: var(--primary); }
.faq details[open] summary .chev { transform: rotate(180deg); }
.faq details > *:not(summary) { margin-top: var(--space-3); }

/* ---------- Proof / work cases ---------- */
.case-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); position: relative; display: flex; flex-direction: column; }
.case-media { aspect-ratio: 16 / 10; background: linear-gradient(135deg, var(--primary), var(--primary-dark)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.case-media img { width: 100%; height: 100%; object-fit: cover; }
.case-media .wordmark-fallback { color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.6rem; letter-spacing: -0.03em; opacity: .92; padding: 1rem; text-align: center; }
.case-body { padding: var(--space-5); }
.case-body .client { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--step-1); margin-bottom: var(--space-2); }
.case-body .caption { color: var(--muted); }
.case-body .role { color: var(--ink); font-weight: 500; margin-top: var(--space-2); }

/* quality-gate artefact */
.qc-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); }
.qc-list li { display: flex; gap: .6rem; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3) var(--space-4); color: var(--ink); font-weight: 500; }
.qc-list svg { color: var(--accent-ink); flex: none; }

/* ---------- CTA band (no dead ends) ---------- */
.cta-band { background: var(--ink); color: #fff; text-align: center; }
.cta-band h2 { color: #fff; max-width: 760px; margin-inline: auto; }
.cta-band p { color: var(--subhead); }
.cta-band .cta-actions { display: flex; flex-wrap: wrap; gap: var(--space-3); justify-content: center; margin-top: var(--space-4); }
.cta-band .guarantee-bar { max-width: 620px; margin: var(--space-4) auto 0; }
.cta-band .phone-link { color: #fff; font-family: var(--font-display); font-weight: 600; }

/* ---------- Checkout ---------- */
.checkout-wrap { display: grid; gap: var(--space-6); grid-template-columns: 1fr 1fr; align-items: start; }
.checkout-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-5); box-shadow: var(--shadow); }
.checkout-card .step-line { font-size: .9rem; color: var(--muted); margin-bottom: var(--space-2); }
.checkout-card .step-indicator { font-family: var(--font-display); font-weight: 600; color: var(--ink); margin-bottom: var(--space-4); }
.field { margin-bottom: var(--space-3); }
.field label { display: block; font-weight: 600; color: var(--ink); font-size: .98rem; margin-bottom: .35rem; }
.field input[type=text], .field input[type=email], .field input[type=tel], .field input[type=url], .field textarea, .field select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem; line-height: 1.4;
}
.field input:focus, .field textarea:focus, .field select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,94,234,.18); }
.field .err-msg { display: none; color: #b3261e; font-size: .88rem; margin-top: .3rem; }
.field [aria-invalid="true"] { border-color: #b3261e; }
.field.has-error .err-msg { display: block; }
details.optional-fields { margin-bottom: var(--space-3); }
details.optional-fields > summary { font-family: var(--font-display); font-weight: 600; color: var(--primary); cursor: pointer; padding: .5rem 0; }

.consent { display: flex; gap: .75rem; align-items: flex-start; margin: var(--space-4) 0; }
.consent .box-wrap { position: relative; padding: 12px; margin: -12px; flex: none; }
.consent input[type=checkbox] { width: 20px; height: 20px; accent-color: var(--primary); }
.consent label { font-size: 14px; color: var(--ink); line-height: 1.5; }
.consent label a { text-decoration: underline; }
/* [review-2-r2] D11: herroeping/waiver clause moved out of the checkbox
   label into fine print underneath — legal function unchanged, tone toned
   down so it isn't the first thing read next to the pay button. */
.consent-fineprint { font-size: 12px; color: var(--muted); line-height: 1.5; margin: 0 0 var(--space-3) 32px; }
.consent-fineprint a { text-decoration: underline; }

.trust-block { margin: var(--space-4) 0; }
.trust-block .three { list-style: none; margin: 0 0 var(--space-3); padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.trust-block .three li { display: flex; gap: .5rem; align-items: center; color: var(--ink); font-weight: 500; font-size: .95rem; }
.trust-block .three svg { color: var(--accent-ink); flex: none; }
.pay-marks { display: flex; align-items: center; gap: .6rem; margin-bottom: var(--space-2); }
.pay-marks .ideal { font-family: var(--font-display); font-weight: 700; color: #cc0066; background: #fff; border: 1px solid var(--line); border-radius: 6px; padding: .3rem .6rem; font-size: 1rem; }
.pay-marks .mark { font-size: .85rem; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; padding: .3rem .5rem; }
.mollie-line { font-size: .95rem; color: var(--ink); font-weight: 500; margin-bottom: var(--space-2); }
.no-charge-line { font-size: 1rem; color: var(--ink); font-weight: 600; margin-bottom: var(--space-3); }
.release-line, .keep-line { font-size: .95rem; color: var(--muted); margin-bottom: var(--space-2); }
.error-summary { display: none; background: #fdecea; border: 1px solid #f3b9b3; color: #7a1b14; border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3); }
.error-summary.is-visible { display: block; }
#pay-error:empty { display: none; }
#pay-error { background: #fdecea; border: 1px solid #f3b9b3; color: #7a1b14; border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); }
.checkout-guarantee { background: var(--accent); color: var(--ink); border-radius: var(--radius); padding: var(--space-4); margin-bottom: var(--space-4); font-weight: 500; }

/* checkout supporting column */
.checkout-support .support-step { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: var(--space-3); }
.checkout-support .support-step svg { color: var(--primary); flex: none; margin-top: 3px; }
.strip { font-family: var(--font-display); font-weight: 600; color: var(--ink); background: var(--tint); border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin: var(--space-4) 0; }
.checkout-support .proof { border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-4); background: var(--surface); }

/* ---------- Sticky mobile checkout bar ---------- */
.sticky-checkout { display: none; }
@media (max-width: 879px) {
  .sticky-checkout {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 850;
    display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
    background: var(--surface); border-top: 1px solid var(--line);
    padding: .55rem clamp(1rem, 4vw, 1.25rem);
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom));
    max-height: 73px; box-shadow: 0 -8px 24px -16px rgba(13,17,23,.4);
  }
  .sticky-checkout.is-hidden { display: none; }
  .sticky-checkout .sc-price { display: flex; flex-direction: column; line-height: 1.15; }
  .sticky-checkout .sc-price .amt { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: 1.05rem; }
  .sticky-checkout .sc-price .gtee { font-size: .74rem; color: var(--accent-ink); font-weight: 600; }
  .sticky-checkout .btn { padding: .7rem 1.1rem; white-space: nowrap; }
}

/* ---------- Footer ---------- */
.site-footer { background: var(--ink); color: var(--subhead); padding-block: var(--space-7) var(--space-5); }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: var(--space-6); }
.site-footer .footer-h4 { color: #fff; font-size: 1rem; font-weight: 700; margin-bottom: var(--space-3); }
.site-footer a { color: var(--subhead); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; margin: 0; padding: 0; }
.site-footer li { margin-bottom: .55rem; }
.footer-brand img, .footer-brand svg.brand-mark { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: var(--space-3); }
.footer-legal-links a { min-height: 44px; display: inline-flex; align-items: center; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.14); margin-top: var(--space-6); padding-top: var(--space-4); font-size: .85rem; display: flex; flex-wrap: wrap; gap: var(--space-3) var(--space-5); justify-content: space-between; }
.site-footer .btn--primary { color: #fff; }
.site-footer .nap { color: var(--subhead); font-style: normal; }
.site-footer .nap a { color: #fff; }

/* ---------- Forminator styling ---------- */
.forminator-custom-form input[type=text], .forminator-custom-form input[type=email],
.forminator-custom-form input[type=tel], .forminator-custom-form input[type=url],
.forminator-custom-form input[type=number], .forminator-custom-form textarea, .forminator-custom-form select {
  width: 100%; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: #fff;
  border: 1.5px solid var(--line); border-radius: var(--radius); padding: .8rem 1rem;
}
.forminator-custom-form input:focus, .forminator-custom-form textarea:focus, .forminator-custom-form select:focus {
  outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px rgba(51,94,234,.18);
}
.forminator-custom-form label { font-weight: 600; color: var(--ink); }
.forminator-custom-form .forminator-button, .forminator-custom-form button[type=submit] {
  background: var(--btn-fill); color: var(--btn-label); font-family: var(--font-display); font-weight: 600;
  border: 0; border-radius: 999px; padding: 12px 28px; cursor: pointer;
}
.forminator-custom-form .forminator-button:hover, .forminator-custom-form button[type=submit]:hover { background: var(--primary-dark); }
.form-placeholder { background: var(--tint); border: 1px dashed var(--line); border-radius: var(--radius); padding: var(--space-5); color: var(--muted); }

/* ---------- DRAFT band / booking ---------- */
.draft-band { background: #fff7e6; border: 1px solid #f0d089; color: #6b4e12; border-radius: var(--radius); padding: var(--space-3) var(--space-4); margin-bottom: var(--space-5); font-weight: 500; }
.booking-slots { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-4) 0; }
.booking-slots .slot { border: 1.5px solid var(--line); border-radius: var(--radius); padding: .8rem 1.2rem; font-family: var(--font-display); font-weight: 600; color: var(--ink); background: var(--surface); }
.disabled-note { font-size: .95rem; color: var(--muted); margin-top: var(--space-2); }

/* timeline */
.timeline { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--line); }
.timeline li { position: relative; padding: 0 0 var(--space-4) var(--space-5); }
.timeline li::before { content: ""; position: absolute; left: -7px; top: 4px; width: 12px; height: 12px; border-radius: 999px; background: var(--primary); }
.timeline .when { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.timeline .who { color: var(--muted); }

/* utility */
.center { text-align: center; }
.mt-6 { margin-top: var(--space-6); }
.split { display: grid; grid-template-columns: 1.1fr .9fr; gap: var(--space-6); align-items: center; }
.pill-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.pill { display: inline-flex; align-items: center; gap: .4rem; background: var(--tint); color: var(--primary-dark); border-radius: 999px; padding: .35rem .85rem; font-size: .9rem; font-weight: 500; }
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .grid-3, .price-grid, .steps { grid-template-columns: 1fr; }
  .checkout-wrap { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .qc-list { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 599px) {
  .grid-2, .footer-grid { grid-template-columns: 1fr; }
  .hero { text-align: left; }
  .hero-actions { align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .trust-strip ul { justify-content: flex-start; }
  .section { padding-block: clamp(3rem, 8vw, 4.5rem); }
}

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  html { scroll-behavior: auto; }
}

/* patch P-QA1: force long-form prose centering (QA gate) */
.prose--longform { margin-inline: auto !important; }

/* patch P-QA1b: a section-head wrapping long-form prose centers as a column */
.section-head:has(> .prose--longform) { margin-inline: auto; }

/* ==========================================================================
   [revision-1] Owner revision round, 2026-08-08
   Boxed hero, imagery, showcase sections, entrance animations, hosting cards.
   Animation law: content is VISIBLE by default. Animations only ADD motion via
   a .reveal class that JS applies AFTER confirming IntersectionObserver support.
   No rule ever hides content before scroll. prefers-reduced-motion respected.
   ========================================================================== */

/* ---------- 3. BOXED HERO (contained panel on large screens) ---------- */
.hero {
  position: relative;
  background: none;
  padding-block: clamp(1.25rem, 2.5vw, 2rem) clamp(2rem, 4vw, 3rem);
}
.hero > .container { max-width: var(--container); margin-inline: auto; }
.hero-panel {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background:
    radial-gradient(1100px 460px at 88% -12%, rgba(51,94,234,.13), transparent 62%),
    radial-gradient(760px 420px at 6% 108%, rgba(66,186,150,.10), transparent 60%),
    linear-gradient(180deg, #ffffff 0%, var(--tint) 100%);
  border: 1px solid var(--line);
  box-shadow: 0 32px 70px -46px rgba(13,17,23,.42), 0 2px 10px -6px rgba(13,17,23,.10);
  padding: clamp(2rem, 5vw, 4.5rem) clamp(1.25rem, 4vw, 3.75rem);
}
/* subtle mesh grain, purely decorative */
.hero-panel::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(51,94,234,.055) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
  pointer-events: none;
}
.hero-panel > * { position: relative; z-index: 1; }

.hero-grid { display: grid; gap: clamp(1.75rem, 4vw, 3.25rem); align-items: center; }
@media (min-width: 1000px) { .hero-grid { grid-template-columns: 1.08fr .92fr; } }
.hero-panel .hero-copy { max-width: 40rem; }
.hero-panel h1 { margin-bottom: var(--space-4); }
.hero-panel .hero-sub { max-width: 34rem; }

/* framed browser mock for the hero image */
.hero-shot {
  border: 1px solid var(--line);
  border-radius: 12px; /* [review-2-r2] D28: collapsed 14px one-off into the 12px token */
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 28px 56px -34px rgba(13,17,23,.46);
}
.hero-shot .bar {
  display: flex; align-items: center; gap: 6px;
  padding: .55rem .8rem;
  background: #f2f5fb;
  border-bottom: 1px solid var(--line);
}
.hero-shot .bar i { width: 9px; height: 9px; border-radius: 50%; background: #d5dced; display: block; }
.hero-shot img { width: 100%; height: auto; display: block; }
/* [visual-1] The hero mock used to be display:none below 1000px, so the only
   proof-of-craft above the fold was invisible to every phone visitor (the
   owner's "no images at all" verdict). Un-hiding it alone was not enough: as
   the last grid child it landed at ~900px, still past the 844px fold. On
   mobile the grid therefore becomes a flex column and the mock is ordered
   directly under the subheading (measured: top 901px -> 487px). .hero-copy is
   display:contents here purely so its children join that ordering.
   The >=1000px grid is deliberately left untouched, so the original
   1.08fr/.92fr desktop composition still holds exactly as designed. */
@media (max-width: 999px) {
  .hero-grid { display: flex; flex-direction: column; gap: 0; }
  .hero-copy { display: contents; }
  .hero-copy h1 { order: 1; }
  .hero-copy .hero-sub { order: 2; }
  .hero-media { order: 3; margin: var(--space-4) 0 var(--space-3); }
  .hero-copy .price-note--block { order: 4; display: block; margin-bottom: var(--space-1); }
  /* [micro-final] FIX 3: keep the year-1 total flush under the price note,
     tightened (not stacking two large margins) to minimise added mobile
     height, since the hero is already tall on small viewports. */
  .hero-copy .price-note--total { order: 4; display: block; margin-top: 0; margin-bottom: var(--space-4); }
  .hero-copy .hero-actions { order: 5; }
  .hero-copy .hero-micro { order: 6; }
  .hero-copy .service-area-line { order: 7; }
  /* [micro-final] FIX 1: trade-hook line after the service-area line. */
  .hero-copy .hero-trade-hook { order: 8; }
  .hero-shot img { aspect-ratio: 16 / 10; object-fit: cover; object-position: center top; }
  .hero-shot .bar { padding: .45rem .65rem; }
  .hero-shot .bar i { width: 7px; height: 7px; }
}

/* inner heroes on subpages keep the panel but stay compact */
.hero--compact .hero-panel { padding-block: clamp(1.75rem, 4vw, 3rem); }

/* ---------- 6. STATS BAND (animated counters) ---------- */
.stats-band { background: var(--surface); border-block: 1px solid var(--line); }
.stats-grid {
  display: grid; gap: var(--space-4);
  grid-template-columns: repeat(2, 1fr);
  padding-block: clamp(2rem, 4vw, 3rem);
}
@media (min-width: 860px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat { text-align: center; padding-inline: var(--space-2); }
.stat .n {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3rem);
  color: var(--primary); letter-spacing: -0.04em; line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
.stat .l { display: block; margin-top: .5rem; color: var(--muted); font-size: .97rem; line-height: 1.45; }

/* ---------- 9. CASE GALLERY ---------- */
.case-gallery { display: grid; gap: var(--space-4); margin: var(--space-5) 0; }
@media (min-width: 760px) { .case-gallery { grid-template-columns: repeat(2, 1fr); } }
.case-gallery figure {
  margin: 0; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface); box-shadow: var(--shadow);
}
.case-gallery img { width: 100%; height: auto; display: block; }
.case-gallery figcaption { padding: .7rem 1rem; font-size: .9rem; color: var(--muted); border-top: 1px solid var(--line); }
.case-gallery .wide { grid-column: 1 / -1; }

/* ---------- 6. PERSON BLOCK (/over-bluect/) ---------- */
.person {
  display: grid; gap: clamp(1.5rem, 4vw, 2.75rem);
  align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; /* [review-2-r2] D28: collapsed 18px one-off into the 12px token */ padding: clamp(1.5rem, 4vw, 2.75rem);
  box-shadow: var(--shadow);
}
@media (min-width: 820px) { .person { grid-template-columns: 260px 1fr; } }
.person-photo {
  border-radius: 16px; overflow: hidden; background: var(--tint);
  aspect-ratio: 3 / 4; max-width: 260px;
}
.person-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
.person-name { font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink); letter-spacing: -0.03em; }
.person-role { color: var(--primary); font-weight: 500; margin-bottom: var(--space-3); }
.person blockquote { margin: 0; font-size: var(--step-1); color: var(--ink); line-height: 1.6; border-left: 3px solid var(--accent); padding-left: var(--space-4); }

/* ---------- 7. HOSTING PACKAGE CARDS ---------- */
.hosting-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 900px) { .hosting-grid { grid-template-columns: repeat(3, 1fr); } }
.hosting-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); box-shadow: var(--shadow); position: relative;
  display: flex; flex-direction: column;
}
.hosting-card.is-featured { border-top: 4px solid var(--accent); }
.hosting-card h3 { color: var(--ink); margin-bottom: var(--space-2); }
.hosting-card .hp-year { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--ink); letter-spacing: -0.03em; }
.hosting-card .hp-month { display: block; color: var(--muted); font-size: .95rem; margin-top: .15rem; }
.hosting-card .hp-detail { margin-top: var(--space-3); color: var(--muted); }
.hosting-card ul { list-style: none; margin: var(--space-3) 0 0; padding: 0; }
.hosting-card li { display: flex; gap: .5rem; padding: .35rem 0; color: var(--muted); }
.hosting-card li svg { color: var(--primary); flex: none; margin-top: 4px; }
.hosting-note {
  margin-top: var(--space-5); padding: var(--space-4) var(--space-5);
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius);
  color: var(--ink);
}
.hosting-note strong { color: var(--ink); }
.free-flag {
  display: inline-flex; align-items: center; gap: .5rem;
  background: rgba(66,186,150,.14); color: var(--accent-ink);
  border: 1px solid rgba(66,186,150,.35);
  font-weight: 600; font-size: .95rem;
  padding: .45rem .85rem; border-radius: 999px; margin-bottom: var(--space-3);
}

/* ---------- 12. SERVICE PAGE (M365) ---------- */
.svc-grid { display: grid; gap: var(--space-4); margin-top: var(--space-5); }
@media (min-width: 820px) { .svc-grid { grid-template-columns: repeat(2, 1fr); } }
.svc-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); box-shadow: var(--shadow);
}
.svc-card .ic {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--tint); color: var(--primary); margin-bottom: var(--space-3);
}
.svc-card h3 { color: var(--ink); }
.svc-card .prijs { display: block; font-family: var(--font-display); font-weight: 700; font-size: var(--step-2); color: var(--primary); letter-spacing: -0.03em; margin: var(--space-2) 0; }

/* ---------- 13. NAV DROPDOWN (Diensten) ---------- */
.nav-menu { position: relative; }
.nav-menu li.menu-item-has-children { position: relative; }
.nav-menu .sub-menu {
  list-style: none; margin: 0; padding: .5rem;
  position: absolute; top: 100%; left: 0; z-index: 60;
  min-width: 250px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; box-shadow: 0 22px 48px -26px rgba(13,17,23,.4);
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.nav-menu li.menu-item-has-children:hover > .sub-menu,
.nav-menu li.menu-item-has-children:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-menu .sub-menu a { display: block; padding: .6rem .75rem; border-radius: 8px; color: var(--ink); font-weight: 500; }
.nav-menu .sub-menu a:hover { background: var(--tint); color: var(--primary); text-decoration: none; }
.nav-menu li.menu-item-has-children > a::after {
  content: ""; display: inline-block; width: .42em; height: .42em; margin-left: .45em;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
}
/* mobile drawer: dropdowns are always open, no hover needed */
@media (max-width: 899px) {
  .nav-menu .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-left: 2px solid var(--line);
    border-radius: 0; margin: .25rem 0 .5rem .5rem; padding-left: .75rem;
    min-width: 0;
    /* [visual-2] ROOT CAUSE of the "Microsoft 365 en e-mail" item looking
       highlighted in the mobile drawer: this override reset position, shadow,
       border and radius but NOT `background`, so the desktop dropdown's
       `background: var(--surface)` (white, correct for a floating panel over
       page content) leaked into the drawer, where it painted a white card
       behind the only child item on the site. The drawer's own ground must
       show through, so the submenu is transparent here and the M365 link gets
       exactly the same treatment as every other drawer item. */
    background: transparent;
  }
  /* Same reason: no hover/active plate that would re-emphasise the item.
     The colour MUST stay the drawer's own #fff — the desktop rule sets
     `color: var(--ink)` (near-black), which on the ink-coloured drawer
     rendered the M365 label invisible once the white plate behind it was
     removed. Caught by screenshot, not by the computed-style check, which
     only looked at background. */
  .nav-menu .sub-menu a {
    background: transparent;
    color: #fff;
    font-weight: 500;
  }
  .nav-menu .sub-menu a:hover,
  .nav-menu .sub-menu a[aria-current="page"] { background: transparent; color: #fff; }
  .nav-menu li.menu-item-has-children > a::after { display: none; }
}

/* ---------- 6. ENTRANCE ANIMATIONS ----------
   Content is visible by default. JS adds .reveal-on only when IO is supported,
   which is the ONLY state that can dim/offset an element, and it always
   resolves to .is-in on intersect. Nothing can stay hidden. */
.reveal-on { opacity: 0; transform: translateY(14px); }
.reveal-on.is-in {
  opacity: 1; transform: none;
  transition: opacity .62s cubic-bezier(.22,.61,.36,1), transform .62s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal-on, .reveal-on.is-in { opacity: 1 !important; transform: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
}

/* ---------- footer legal line ---------- */
.footer-legal-meta { display: flex; flex-wrap: wrap; gap: .35rem 1rem; }
.footer-legal-meta span { white-space: nowrap; }

/* ---------- [revision-1] INTAKE FORM (item 5) ---------- */
.intake-wrap { display: grid; gap: clamp(1.5rem, 4vw, 2.5rem); align-items: start; }
@media (min-width: 940px) { .intake-wrap { grid-template-columns: 320px 1fr; } }

.intake-aside {
  background: var(--tint); border: 1px solid var(--line); border-radius: var(--radius);
  padding: var(--space-5); position: sticky; top: 1.5rem;
}
@media (max-width: 939px) { .intake-aside { position: static; } }
.intake-aside h3 { color: var(--ink); margin-bottom: var(--space-2); }
.intake-aside p { color: var(--muted); }
.intake-aside .btn { width: 100%; justify-content: center; margin-top: var(--space-2); }
.intake-points { list-style: none; margin: var(--space-4) 0 0; padding: 0; }
.intake-points li { display: flex; gap: .5rem; padding: .35rem 0; color: var(--ink); font-size: .96rem; }
.intake-points svg { color: var(--primary); flex: none; margin-top: 3px; }

.intake-form {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: clamp(1.25rem, 3.5vw, 2.25rem); box-shadow: var(--shadow);
  display: grid; gap: var(--space-4);
}
.intake-form .field { display: grid; gap: .4rem; }
.intake-form label { font-weight: 600; color: var(--ink); font-size: .97rem; }
.intake-form label .opt { font-weight: 400; color: var(--muted); font-size: .87rem; margin-left: .35rem; }
.intake-form input,
.intake-form textarea,
.intake-form select {
  width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
  padding: .85rem 1rem; min-height: 52px;
}
.intake-form textarea { min-height: 118px; resize: vertical; line-height: 1.55; }
.intake-form select { min-height: 52px; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%235f6a7d' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 1rem center; padding-right: 2.75rem; }
.intake-form input:focus-visible,
.intake-form textarea:focus-visible,
.intake-form select:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; border-color: var(--primary); }
.intake-form .help { font-size: .88rem; color: var(--muted); }
.intake-form .err { font-size: .9rem; color: #b32d2e; font-weight: 500; display: none; }
.intake-form .field.has-error input,
.intake-form .field.has-error textarea { border-color: #b32d2e; }
.intake-form .field.has-error .err { display: block; }
.intake-form button[type="submit"] { justify-self: start; }
@media (max-width: 640px) { .intake-form button[type="submit"] { justify-self: stretch; width: 100%; } }
.intake-micro { font-size: .9rem; color: var(--muted); margin: 0; }

/* honeypot: off-screen but not display:none, so bots still fill it */
.hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.intake-status { display: none; padding: var(--space-3) var(--space-4); border-radius: 10px; font-weight: 500; }
.intake-status.is-error { display: block; background: #fdeceb; color: #8a2321; border: 1px solid #f3c4c2; }
.intake-status.is-ok { display: block; background: rgba(66,186,150,.12); color: var(--accent-ink); border: 1px solid rgba(66,186,150,.35); }
.intake-form.is-sending { opacity: .65; pointer-events: none; }

/* success panel replacing the form */
.intake-done {
  background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--accent);
  border-radius: var(--radius); padding: clamp(1.5rem, 4vw, 2.5rem); box-shadow: var(--shadow);
}
.intake-done h3 { color: var(--ink); }

/* ---------- [revision-1] Visual corrections after live review ---------- */

/* Logo: the scraped SVG carries its own outer frame; give it room and never
   let a container border double it up. */
.brand { border: 0 !important; }
.brand img, .brand svg.brand-mark {
  height: clamp(34px, 4.2vw, 46px);
  width: auto; max-width: 210px;
  object-fit: contain; border: 0;
}
.footer-brand img { max-width: 190px; }

/* Kill the stray marker some menu items render under the parent link.
   The chevron is drawn by our ::after rule only. */
.nav-menu li.menu-item-has-children > a::before { content: none !important; }
.nav-menu .sub-menu::before,
.nav-menu .sub-menu::after { content: none !important; }
.nav-menu li > a::marker { content: none; }
.nav-menu li { list-style: none; }

/* Hero panel: when a hero has no media column, the copy should not leave a
   dead half. Center-constrain it instead of stretching to the panel edge. */
.hero-panel:not(:has(.hero-media)) .hero-copy,
.hero--compact .hero-panel > .eyebrow ~ *,
.hero--compact .hero-panel { }
.hero--compact .hero-panel h1 { max-width: 22ch; }
.hero--compact .hero-panel .hero-sub { max-width: 60ch; }

/* Intake + service heroes: two-column so the panel reads as designed. */
.hero-split { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 1000px) { .hero-split { grid-template-columns: 1.05fr .95fr; } }
.hero-facts {
  background: rgba(255,255,255,.72);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: clamp(1.25rem, 3vw, 1.9rem);
  backdrop-filter: blur(6px);
}
.hero-facts h3 { font-size: var(--step-1); color: var(--ink); margin-bottom: var(--space-3); }
.hero-facts ul { list-style: none; margin: 0; padding: 0; }
.hero-facts li { display: flex; gap: .6rem; padding: .45rem 0; color: var(--ink); font-size: .98rem; line-height: 1.5; }
.hero-facts li svg { color: var(--primary); flex: none; margin-top: 4px; }
@media (max-width: 999px) { .hero-facts { margin-top: var(--space-4); } }

/* Chevron on dropdown parents must sit inline with the label, not on its own
   line (display:block made it render as a stray diamond under the link). */
.nav-menu li.menu-item-has-children > a {
  display: inline-flex !important;
  align-items: center;
  gap: .1rem;
}
.nav-menu li.menu-item-has-children > a::after {
  display: inline-block !important;
  width: .42em; height: .42em;
  margin-left: .45em;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  border-top: 0; border-left: 0;
  transform: translateY(-2px) rotate(45deg);
  flex: none;
}

/* ---------- [revision-1] Final header corrections ---------- */

/* The theme's nav rule sets .nav-menu a{display:block}, which pushed the
   chevron pseudo-element onto its own line where it read as a stray diamond.
   Draw the chevron on the LI instead, so the anchor's display is irrelevant. */
.nav-menu li.menu-item-has-children > a::after,
.nav-menu li.menu-item-has-children > a::before { content: none !important; }

.nav-menu li.menu-item-has-children { display: inline-flex; align-items: center; gap: .3rem; }
.nav-menu li.menu-item-has-children::after {
  content: "";
  width: .4em; height: .4em;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: translateY(-2px) rotate(45deg);
  flex: none;
  pointer-events: none;
}
.nav-menu li.menu-item-has-children:hover::after,
.nav-menu li.menu-item-has-children:focus-within::after { border-color: var(--primary); }

@media (max-width: 899px) {
  .nav-menu li.menu-item-has-children { display: block; }
  .nav-menu li.menu-item-has-children::after { display: none; }
}

/* Footer logo: the blanket invert filter turned the blue "CT" pill white,
   which erased the white "CT" letters inside it. Keep the brand mark in its
   own colours; the dark footer already gives it enough contrast. */
.footer-brand img, .footer-brand svg.brand-mark { filter: none !important; }
.footer-brand {
  display: inline-block;
  background: #fff;
  padding: .55rem .85rem;
  border-radius: 10px;
  margin-bottom: var(--space-3);
}
.footer-brand img { margin-bottom: 0; }

/* ---------- [revision-1] Accessibility corrections (QA_C) ---------- */

/* The free-months flag sits inside .section--dark on the home page, where the
   accent-ink label fell to 2.37:1 against the dark ground. Give it its own
   light-on-dark treatment there instead of inheriting the light-ground one. */
.section--dark .free-flag {
  background: rgba(66,186,150,.18);
  border-color: rgba(66,186,150,.45);
  color: #7ee0bd;            /* 8.6:1 on #142929 */
}
.section--dark .free-flag svg { color: #7ee0bd; }

/* Inline links inside muted paragraphs need a non-colour affordance:
   axe requires 3:1 against surrounding text OR a distinguishing style. */
.intake-micro a,
.hosting-note a,
.prose--longform p a,
.hero-micro a {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.intake-micro a:hover,
.hosting-note a:hover,
.prose--longform p a:hover,
.hero-micro a:hover { text-decoration-thickness: 2px; }

/* =====================================================================
   [review-2-fix] D13b + D12
   D13b: Escape must be able to beat `:focus-within` (line ~675). theme.js
   adds .is-closed on Escape and returns focus to the parent link.
   D12: sub-44px tap targets. Measured baseline at 390px: 145/429 sitewide,
   footer alone 105/165. Fixes are touch-area only (padding / min-height /
   pseudo-element) so the visual design is unchanged.
   ===================================================================== */

.nav-menu li.menu-item-has-children.is-closed > .sub-menu {
  opacity: 0 !important;
  visibility: hidden !important;
  transform: translateY(-4px) !important;
}

@media (max-width: 899px) {
  /* Footer links: were 21px tall with ~1px spacing — the worst combination
     on the site. Block layout + padding-block gives a >=44px touch area. */
  .site-footer a {
    display: inline-block;
    padding-block: 12px;
    min-height: 44px;
    line-height: 20px;
  }
  .site-footer li { margin-block: 0; }
  .site-footer .footer-nav a,
  .site-footer ul a {
    display: block;
    min-height: 44px;
    padding-block: 12px;
  }

  /* Header/nav items */
  .nav-menu a,
  .primary-nav a {
    display: block;
    min-height: 44px;
    padding-block: 12px;
    line-height: 20px;
  }

  /* Inline prose links: expand the touch box without changing the line box. */
  main p a, main li a {
    padding-block: 11px;
    margin-block: -11px;
    display: inline-block;
  }

  /* Submit buttons on every form (was 121.5x39). */
  form button[type=submit],
  .btn--block,
  #pay-btn,
  #intake-submit {
    min-height: 48px;
  }
}

/* Consent checkbox: the 20x20 control gating the EUR 95 submit.
   Visual size stays 20px; the hit area becomes 44x44 via a pseudo-element,
   applied at every viewport (a mis-tap here directly suppresses checkout). */
.consent .box-wrap { position: relative; padding: 12px; margin: -12px; flex: none; }
.consent input[type=checkbox] {
  width: 24px;
  height: 24px;
  accent-color: var(--primary);
  position: relative;
}
.consent input[type=checkbox]::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.consent label {
  font-size: 14px;
  color: var(--ink);
  line-height: 1.5;
  padding-block: 10px;
}

/* [review-2-fix] D12 follow-up, measured second pass.
   Remaining real offenders after the first pass were:
   (a) the consent label's inline "algemene voorwaarden" link at 147x18, and
   (b) the header .brand at 67x34.
   The consent checkbox itself is 24x24 visually with a 44x44 hit area from
   the ::after pseudo-element above (not reportable via getBoundingClientRect,
   verified separately by an elementFromPoint hit test). */
.consent label a {
  display: inline-block;
  min-height: 44px;
  padding-block: 13px;
  margin-block: -13px;
  text-decoration: underline;
}
.site-header .brand {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
}

/* [review-2-fix] D17: on the generic/legal pages the H1 sat left-aligned in
   the hero panel while `.prose--longform` centred itself with margin-inline:
   auto, leaving a measured 228px (then 169px) horizontal break between a
   heading and its own body. Give the hero copy the same measure and the same
   centring, so heading and body share one spine. Scoped to page.php's layout
   so the longform measure elsewhere is untouched. */
.page-legal .hero-panel .hero-copy,
body.page .hero-panel .hero-copy {
  max-width: var(--measure);
  margin-inline: auto;
  width: 100%;
}

/* ==========================================================================
   [review-2-r2] Round 2 mechanical fixes, 2026-08-08
   ========================================================================== */

/* D18: the D17 fix only covered hero-panel .hero-copy. The same 228px break
   recurs sitewide wherever a `.section-head` (left-aligned, max-width:720px,
   no margin-inline) is followed by a sibling `.prose--longform`
   (max-width:760px, margin-inline:auto — independently centered in the
   container). Measured before fix on /werkwijze/, /over-bluect/, /bedankt/,
   /prijzen/, /m365/, /, /website-laten-maken/: header.x=112 vs body.x=340.
   One spine, one measure container: rather than de-centering the prose
   block (which the QA harness's own "long-form prose must be centered"
   gate rejects — verified: it failed QA_C on first attempt), give the
   section-head the SAME measure and centring as the prose that follows it,
   so both share one spine at the centered position instead of the prose
   self-centering away from a left-pinned heading. */
.section-head:has(+ .prose--longform) {
  max-width: var(--measure);
  margin-inline: auto;
}

/* D13d: case-card / svc-card / hosting-card look clickable (shadow, border)
   but have no hover feedback and (for case/svc) only a small inline text-link
   is the actual hit target. Give them the same lift already proven on
   .card--link, and stretch the existing inner link to cover the whole card
   so the entire surface is clickable — matches the pattern already shipped
   sitewide on .card--link, just extended to these three components. */
.case-card,
.svc-card,
.hosting-card {
  transition: transform .18s ease, box-shadow .2s ease;
}
.case-card:hover,
.svc-card:hover,
.hosting-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -24px rgba(13,17,23,.34);
}
/* Only case-card and svc-card carry a real destination link (.text-link) —
   hosting-card is a pure pricing display with no per-card URL, so it gets the
   hover affordance only, not a fake stretched link to nowhere. Stretched-link
   must live on the ANCHOR's own ::after (exactly the working .card--link
   .stretched::after pattern) — an ::after on the card itself is a plain
   decorative box with no href and does not make the card clickable, which a
   real-click test caught before this was corrected. */
.case-card,
.svc-card {
  position: relative;
}
/* The text-link stays static (NOT position:relative) so its ::after's
   inset:0 resolves against the nearest positioned ancestor — the CARD —
   not the anchor's own small box. z-index keeps the visible link text/icon
   above the overlay so it still shows its own hover/focus state. */
.case-card .text-link,
.svc-card .text-link {
  z-index: 1;
}
.case-card .text-link::after,
.svc-card .text-link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* D21: /werk/ grid holds 3 fixed columns but often only 2 cases, leaving a
   fixed void beside the last card. Auto-fit so the row reflows to fill
   available width regardless of case count, while staying 3-up once there
   are enough cards. */
.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
}

/* D25: /contact/ .split centers its two columns vertically; the right column
   ("Rechtstreeks contact") is much shorter than the left (the form), so
   centering leaves a large empty band above and below it. Top-align instead. */
.split { align-items: start; }

/* D27: /prijzen/ price-grid cards ragged (262/265/301px measured) because
   align-items:start lets each card size to its own content. Stretch so the
   row shares one height; feature lists still render top-aligned inside. */
.price-grid {
  align-items: stretch;
}
.price-grid .price-card {
  display: flex;
  flex-direction: column;
}
.price-grid .price-card ul {
  margin-top: auto;
}

/* =========================================================================
 * [visual-1] VISUAL LAYER
 * The brand intake forbids stock photography outright ("NO STOCK PHOTOGRAPHY
 * ANYWHERE ON THIS SITE ... real delivered work is the strongest quality
 * signal available to a brand with no testimonials"), so the visual layer is
 * built from REAL assets only: client screenshots in a browser mock, and the
 * founder's own photo beside the payment ask. Both primitives emit explicit
 * width/height via wp_get_attachment_image, so neither can shift layout.
 * ========================================================================= */

/* ---- Editorial media figure: a tinted, hairline-framed inset ---- */
.media-figure {
  margin: 0;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--tint);
  border: 1px solid var(--line);
  box-shadow: 0 24px 48px -34px rgba(13,17,23,.40);
}
.media-figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 2;
}
.media-figure--tall img { aspect-ratio: 4 / 5; }
.media-figure--wide img { aspect-ratio: 16 / 9; }

/* Brand duotone wash: a low-opacity primary/accent veil pinned over the photo
   so unrelated stock frames share one temperature and read as owned art
   direction rather than pasted-in stock. Kept light (multiply at low alpha)
   so faces and hands stay legible and the image never looks murky. */
.media-figure::after {
  content: "";
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(51,94,234,.16) 0%, rgba(51,94,234,.04) 42%, rgba(13,17,23,.20) 100%),
    radial-gradient(120% 80% at 88% 6%, rgba(66,186,150,.16), transparent 60%);
  mix-blend-mode: multiply;
}
.media-figure figcaption {
  position: relative;
  padding: .7rem 1rem;
  font-size: .9rem;
  color: var(--muted);
  background: var(--surface);
  border-top: 1px solid var(--line);
}

/* Media + copy band. Alternating sides give the long text pages a rhythm
   without turning any section into a full-bleed stock banner.
   NOTE: never wrap a .prose--longform column in this — QA_C measures
   long-form centring against the container and a half-width prose cell
   fails that gate (see [visual-1] note in the LOG). Ambience beside a
   LIST or below a prose block is fine; ambience beside prose is not. */
.media-band { display: grid; gap: clamp(1.5rem, 4vw, 3rem); align-items: center; }
@media (min-width: 900px) {
  .media-band { grid-template-columns: 1fr 1fr; }
  .media-band--flip .media-figure { order: 2; }
}

/* ---- Browser mock: same language as the home hero, reusable ---- */
.shot-frame {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: 0 28px 56px -34px rgba(13,17,23,.46);
}
.shot-frame .bar {
  display: flex; align-items: center; gap: 6px;
  padding: .5rem .75rem;
  background: #f2f5fb;
  border-bottom: 1px solid var(--line);
}
.shot-frame .bar i { width: 8px; height: 8px; border-radius: 50%; background: #d5dced; display: block; }
.shot-frame img { display: block; width: 100%; height: auto; }
.shot-frame figcaption {
  padding: .7rem 1rem; font-size: .9rem; color: var(--muted);
  border-top: 1px solid var(--line);
}

/* ---- Signed trust block: small, dignified, next to the payment ask ---- */
.signed-by {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  margin-top: var(--space-4);
}
.signed-by img {
  flex: none;
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--tint);
}
.signed-by .sig-name { font-weight: 600; color: var(--ink); font-size: .95rem; line-height: 1.3; }
.signed-by .sig-role { color: var(--muted); font-size: .88rem; line-height: 1.4; }
.signed-by .sig-line { color: var(--muted); font-size: .88rem; line-height: 1.45; margin-top: .15rem; }



/* =========================================================================
   [persona-fix-1] Cohort-1 objection fixes.
   ========================================================================= */

/* --- 1. Cookie-consent banner (AVG). Sober, brand-styled, 44px+ targets. --
   Visible by default in the markup; JS hides it only when a choice exists,
   so a JS failure can never suppress the consent question. */
.consent-banner {
  position: fixed; z-index: 120;
  left: 0; right: 0; bottom: 0;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -18px 40px -24px rgba(13,17,23,.3);
  padding: var(--space-4) var(--space-3);
  /* No transform/opacity default: if the transition never runs it is still
     fully visible and usable. */
}
.consent-banner[hidden] { display: none; }
.consent-banner__inner {
  max-width: var(--container); margin-inline: auto;
  display: flex; flex-direction: column; gap: var(--space-3);
}
.consent-banner__title {
  font-family: var(--font-display); font-size: 1.05rem; font-weight: 600;
  color: var(--ink); margin: 0 0 .35rem;
}
.consent-banner__text {
  margin: 0; color: var(--muted); font-size: .95rem; line-height: 1.55;
  max-width: 68ch;
}
.consent-banner__text a { color: var(--primary); text-decoration: underline; }
.consent-banner__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
/* 44px minimum touch target on both choices, and equal visual weight for the
   refusal (a "Weigeren" styled as a whisper is not a free choice). */
.consent-banner .consent-btn {
  min-height: 48px; min-width: 152px;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 1rem;
}
@media (min-width: 760px) {
  .consent-banner__inner { flex-direction: row; align-items: center; justify-content: space-between; gap: var(--space-5); }
  .consent-banner__actions { flex: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .consent-banner { transition: transform .28s ease, opacity .28s ease; }
  .consent-banner.is-visible { transform: none; opacity: 1; }
}
/* Keep the sticky checkout bar clear of the consent banner while it is up. */
.consent-banner:not([hidden]) ~ .sticky-checkout { bottom: auto; }

/* --- 4a. Header phone: was display:none below 900px, so the only tappable
   phone number in the header measured 0x0 on every phone. The utility bar
   stays desktop-only (the UX panel removed it from mobile chrome on purpose,
   21.6% of a 390px viewport), so the number gets its own real target inside
   the mobile header instead. --- */
.header-phone {
  display: inline-flex; align-items: center; justify-content: center;
  gap: .4rem;
  min-height: 44px; min-width: 44px;
  padding: 0 .6rem; margin-inline-start: auto;
  border-radius: var(--radius-btn);
  color: var(--primary); font-weight: 600; font-size: .95rem;
  border: 1px solid var(--line); background: var(--surface);
}
.header-phone:hover, .header-phone:focus-visible { background: var(--tint); color: var(--primary-dark); }
.header-phone .header-phone__label { display: none; }
@media (min-width: 420px) { .header-phone .header-phone__label { display: inline; } }
/* Desktop already has the number in the utility bar; do not show it twice. */
@media (min-width: 900px) { .header-phone { display: none; } }

/* --- 4c. "Onze populairste keuze" badge: sat at top:-14px, overhanging the
   card and cutting through the featured card's accent top-border at 390px.
   Moved inside the card flow so nothing can clip or collide with it. --- */
.price-card .badge {
  position: static;
  display: inline-block;
  margin-bottom: var(--space-2);
  max-width: 100%;
  white-space: normal;
}

/* --- 4g. FAQ <summary> measured 285x29px: below the 44px target rule. --- */
.faq details > summary,
details.faq-item > summary,
.faq-list summary {
  min-height: 44px;
  display: flex; align-items: center; gap: .5rem;
  padding-block: .6rem;
}

/* --- 6a. "Voor wie" sector band. --- */
.sector-band .sector-list {
  list-style: none; margin: var(--space-4) 0 0; padding: 0;
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.sector-band .sector-list li {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .7rem .9rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); font-size: .97rem;
}
.sector-band .sector-list li svg { color: var(--primary); flex: none; margin-top: 3px; }
.sector-band .sector-note { margin-top: var(--space-3); color: var(--muted); font-size: .95rem; }

/* --- 5b. Honest year-1 / year-2 cost block on /prijzen/. --- */
.cost-truth {
  margin-top: var(--space-4);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: var(--space-4);
}
.cost-truth h3 { font-size: 1.05rem; margin: 0 0 var(--space-2); color: var(--ink); }
.cost-truth dl { margin: 0; display: grid; gap: .55rem; }
.cost-truth .row { display: flex; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }
.cost-truth dt { color: var(--muted); margin: 0; }
.cost-truth dd { margin: 0; color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.cost-truth .cost-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: .92rem; line-height: 1.55; }
/* --- [maatwerk-1] Maatwerk catch-all: prevents a sprawling module price
   list on /prijzen/ + gives price-certainty-before-payment (cohort-5). Same
   tinted-card language as .cost-truth so it reads as part of the family. --- */
.maatwerk-callout {
  margin-top: var(--space-4);
  background: var(--surface); border: 1px solid var(--line);
  border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: var(--space-4);
}
.maatwerk-callout h3 { font-size: 1.05rem; margin: 0 0 var(--space-2); color: var(--ink); }
.maatwerk-callout p { margin: 0 0 var(--space-3); color: var(--muted); line-height: 1.6; }
.maatwerk-line {
  display: flex; align-items: flex-start; gap: .5rem;
  margin-top: var(--space-3); color: var(--muted); font-size: .95rem; line-height: 1.55;
}
.maatwerk-line svg { flex: none; margin-top: 3px; color: var(--primary); }

/* --- 7b. Compact Kenneth block mid-homepage. --- */
.founder-note {
  display: flex; gap: var(--space-4); align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 12px; padding: var(--space-4);
}
.founder-note img {
  flex: none; width: 72px; height: 72px; border-radius: 50%;
  object-fit: cover; object-position: center top; background: var(--tint);
}
.founder-note .fn-body { flex: 1 1 260px; }
.founder-note .fn-quote { color: var(--ink); font-size: 1.02rem; line-height: 1.5; margin: 0 0 .3rem; }
.founder-note .fn-name { color: var(--muted); font-size: .9rem; margin: 0; }
.founder-note .fn-link { display: inline-block; margin-top: .5rem; min-height: 44px; line-height: 44px; }

/* --- 3. Herroepings-waiver: plain language, full size, ink-coloured.
   Was small grey print under the consent box. --- */
.consent-waiver {
  margin: var(--space-3) 0 0;
  padding: var(--space-3);
  background: var(--tint);
  border-radius: var(--radius);
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
}
.consent-waiver strong { font-weight: 600; }
.consent-waiver .waiver-legal { display: block; margin-top: .5rem; color: var(--muted); font-size: .95rem; }
.consent-waiver a { color: var(--primary); text-decoration: underline; }

/* --- 4b. Stat decoration: opacity/transform ONLY. The number itself is
   rendered final by PHP and is never rewritten, so no intermediate value
   ("78%", "288 euro") can ever be on screen. --- */
@media (prefers-reduced-motion: no-preference) {
  .stats-band .stat { transition: opacity .5s ease, transform .5s ease; }
  .stats-band .stat.stat-in { opacity: 1; transform: none; }
}

/* --- 2. Legal pages: real policy tables + the single remaining draft note. --- */
.prose .legal-note {
  background: var(--tint); border-left: 4px solid var(--primary);
  border-radius: var(--radius); padding: var(--space-3) var(--space-4);
  color: var(--ink); font-size: .97rem; margin-bottom: var(--space-5);
}
/* Wide tables scroll inside their own box; the page never scrolls sideways. */
.prose .legal-table {
  display: block; width: 100%; overflow-x: auto;
  border-collapse: collapse; table-layout: auto;
  margin: var(--space-3) 0 var(--space-5);
  font-size: .95rem;
  border: 1px solid var(--line); border-radius: var(--radius);
}
.prose .legal-table thead { background: var(--tint); }
.prose .legal-table th,
.prose .legal-table td {
  text-align: left; padding: .7rem .9rem;
  border-bottom: 1px solid var(--line);
  vertical-align: top; min-width: 8.5rem;
}
.prose .legal-table th { color: var(--ink); font-weight: 600; white-space: nowrap; }
.prose .legal-table td { color: var(--muted); }
.prose .legal-table tr:last-child td { border-bottom: 0; }

/* --- 7a. Phone-only vertical rhythm. The homepage measured 12.77 screens at
   390px; personas 3 and 7 both stopped scrolling before the checkout. The
   112px desktop section rhythm (a confirmed strength in REVIEW-2) is kept
   above 560px; below it the same rhythm costs ~96px per section across 14
   sections, which is more than a full screen of pure padding. Content is
   unchanged: this only tightens the gaps. --- */
@media (max-width: 560px) {
  .section { padding-block: 2.25rem; }
  .section .section-head { margin-bottom: 1.1rem; }
  /* Dense sector rows: label-only lines do not need card padding. */
  .sector-band .sector-list { gap: .4rem; grid-template-columns: 1fr 1fr; }
  .sector-band .sector-list li { padding: .5rem .6rem; font-size: .9rem; gap: .35rem; }
  .sector-band .sector-list li svg { width: 15px; height: 15px; margin-top: 2px; }
}

/* --- 7a. "Wat is inbegrepen" is a scan-list, not prose: it does not need one
   full-width card per item on a phone. Two dense columns keep all 8 items
   (nothing is hidden or removed) in roughly half the height. --- */
@media (max-width: 560px) {
  .qc-list { grid-template-columns: 1fr 1fr; gap: .4rem; }
  .qc-list li {
    padding: .5rem .6rem; font-size: .875rem; font-weight: 500;
    align-items: flex-start; gap: .35rem; line-height: 1.3;
  }
  .qc-list svg { width: 15px; height: 15px; margin-top: 2px; }
}

/* --- [owner-addition] "via <bureau>" partner credit on subcontracted cases.
   Small, factual, never louder than the client name it sits under. --- */
.partner-credit {
  display: flex; align-items: center; gap: .45rem; flex-wrap: wrap;
  margin: .15rem 0 .5rem; color: var(--muted); font-size: .85rem; line-height: 1.3;
}
.partner-credit .pc-label { color: var(--muted); }
.partner-credit .pc-logo {
  height: 15px; width: auto; max-width: 132px;
  display: block; flex: none;
}
.partner-credit .pc-name { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }
.partner-credit a.pc-name:hover, .partner-credit a.pc-name:focus-visible { color: var(--primary); }
/* On the case detail page the credit sits under the H1 and may breathe more. */
.section > .container > .partner-credit { margin-block: .35rem 1rem; font-size: .9rem; }
.section > .container > .partner-credit .pc-logo { height: 17px; }

/* --- [owner-addition] Partner testimonial. Styled ready, but render-gated
   behind `tlg_quote_approved` (default false) — see parts/partner-quote.php.
   Nothing below applies to any page until the agency has approved the quote. */
.partner-quote { margin: 0 0 var(--space-4); }
.partner-quote blockquote { margin: 0; }
.partner-quote blockquote p { margin: 0; color: var(--ink); }
.partner-quote figcaption {
  display: flex; align-items: center; gap: .5rem; flex-wrap: wrap;
  margin-top: .55rem; color: var(--muted);
}
.partner-quote .pq-logo { height: 16px; width: auto; max-width: 140px; display: block; flex: none; }
.partner-quote .pq-source::before { content: "\2014\00a0"; }

/* Full: on the case detail page, a real pull-quote. */
.partner-quote--full {
  background: var(--tint); border-radius: var(--radius);
  padding: var(--space-4); margin-block: var(--space-4);
}
.partner-quote--full blockquote p { font-size: var(--step-1); line-height: 1.5; }
.partner-quote--full figcaption { font-size: .92rem; }

/* Compact: inside a card, quieter than the client name above it. */
.partner-quote--compact { margin: .35rem 0 .6rem; padding-left: .7rem; border-left: 2px solid var(--line); }
.partner-quote--compact blockquote p { font-size: .93rem; line-height: 1.45; }
.partner-quote--compact figcaption { font-size: .84rem; margin-top: .3rem; }

/* --- Tap targets for the two links introduced this round (44px rule from
   REVIEW-2 D12). Touch area only: the visual size is unchanged, matching the
   technique already used for the consent checkbox. --- */
.partner-credit .pc-name,
.consent-banner__text a {
  position: relative;
  display: inline-block;
}
.partner-credit .pc-name::after,
.consent-banner__text a::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  height: 44px;
  /* Pointer target only; never paints and never blocks the text under it. */
}

/* The round-2 D13d stretched link covers the whole case card, which would
   swallow clicks on the partner-credit link inside it. Raising the whole
   credit block broke D13d (the block then shielded the overlay and the card
   body stopped navigating, measured by a real click). Lift ONLY the anchor,
   which is the single element that needs to win the hit test; the rest of the
   credit row stays behind the overlay so the card remains fully clickable. */
.case-card .partner-credit .pc-name { position: relative; z-index: 2; }

/* --- [persona-fix-1b] Compact homepage price band, replacing the 3-card grid
   (which duplicated /prijzen/ and cost 1.59 phone screens). One brand-tinted
   row: three name/price pairs, the btw qualifier once, and one primary CTA to
   the real pricing page. --- */
.price-band {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.price-band .pb-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .5rem var(--space-5);
}
.price-band .pb-list li {
  display: flex; align-items: baseline; gap: .45rem;
  white-space: nowrap;
}
.price-band .pb-name { color: var(--muted); font-size: .95rem; }
.price-band .pb-price {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); color: var(--ink);
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.price-band .pb-note { margin: var(--space-3) 0 0; color: var(--muted); font-size: .93rem; }
.price-band .pb-cta { margin: var(--space-3) 0 0; }
/* One row on phones too: the three pairs stack only if they genuinely cannot
   fit, and the CTA is full-width so it keeps a >=44px target either way. */
@media (max-width: 560px) {
  .price-band { padding: var(--space-3); }
  .price-band .pb-list { gap: .35rem var(--space-4); }
  .price-band .pb-cta .btn { display: block; width: 100%; }
}


/* ---------- [persona-fix-2] B4: Website | Webshop pricing switch ----------
   No panel is EVER hidden by CSS. theme.js adds .ps-ready to the wrapper and
   only then may a panel carry [hidden]. With CSS on and JS off, both panels
   stay visible and the tabs behave as ordinary jump links. */
.pricing-switch { position: sticky; top: 61px; z-index: 700; background: var(--bg);
  border-bottom: 1px solid var(--line); padding: .6rem 0; }
.ps-tabs { display: flex; gap: .5rem; justify-content: center; flex-wrap: wrap; }
.ps-tab {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: .7rem 1.6rem; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  font-weight: 600; text-decoration: none; font-size: 1rem;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.ps-tab:hover { border-color: var(--primary); color: var(--primary); }
.ps-tab.is-active { background: var(--primary); border-color: var(--primary); color: #fff; }
.ps-tab:focus-visible { outline: 3px solid var(--primary); outline-offset: 2px; }
/* Anchor offset so a deep link never lands under the sticky bars. */
#website, #webshop { scroll-margin-top: 130px; }
@media (max-width: 560px) {
  .pricing-switch { top: 57px; padding: .5rem 0; }
  .ps-tab { flex: 1 1 0; padding: .7rem 1rem; }
}

/* [persona-fix-2] B5: webshop cross-link under the homepage price band. */
.price-band .pb-shop { margin: .35rem 0 0; font-size: .93rem; }
.price-band .pb-shop a { color: var(--primary); }

/* [persona-fix-2] C6: honest status label replacing a contradicting link. */
.case-status { margin: 1.5rem 0 .5rem; }
.case-status .cs-badge {
  display: inline-flex; align-items: center; gap: .5rem;
  padding: .45rem .9rem; border-radius: 999px;
  background: var(--accent-bg, #eef6f2); color: var(--accent-ink, #1c6b4b);
  border: 1px solid currentColor; font-weight: 600; font-size: .9rem;
}
.case-status-note { color: var(--muted); font-size: .95rem; margin: 0 0 1rem; max-width: 62ch; }

/* ---------- [persona-fix-2] C7: call-route parity ---------- */
.call-btn { display: inline-flex; align-items: center; gap: .5rem; min-height: 48px; }
.call-route { margin: 1.25rem 0 0; display: flex; flex-direction: column; gap: .5rem; align-items: flex-start; }
.call-route .call-note { color: var(--muted); font-size: .93rem; max-width: 46ch; }
/* Sticky bar: the call button must never crowd out the primary action. */
.sticky-checkout .sc-call {
  display: inline-flex; align-items: center; gap: .4rem;
  min-height: 44px; padding: .7rem .9rem; white-space: nowrap;
  border: 1px solid var(--line); color: var(--ink); background: #fff;
}
@media (max-width: 380px) { .sticky-checkout .sc-call-label { display: none; } }
/* Office line under the founder block. */
.founder-note .fn-office {
  display: flex; align-items: flex-start; gap: .5rem;
  margin: .75rem 0 0; color: var(--muted); font-size: .93rem;
}
.founder-note .fn-office svg { flex: none; margin-top: .15rem; }
.founder-note .fn-addr { color: var(--muted); }

/* =========================================================================
 * [visual-2] VISUAL LAYER — structural, template-owned.
 *
 * Three defects this block closes, all measured in a real browser first:
 *  (1) Ambience photography lived only in copy-adjacent template blocks that
 *      later copy rounds deleted. It now renders from the `bluect_visual_images`
 *      slot map inside TEMPLATE markup, so a copy edit cannot remove it.
 *  (2) Screenshots were rewritten by Smush into 1x1 placeholders held at
 *      `opacity:0` by an inline `.lazyload` rule; when lazysizes lost the race
 *      the proof was invisible. Proof/ambience images now opt OUT of JS
 *      lazyloading (native loading="lazy" instead). The guard below is the
 *      belt-and-braces half: even if the class returns, our images stay visible.
 *  (3) Icons existed but were 16-18px utility marks. They are now sized as a
 *      real system where they carry meaning.
 * ========================================================================= */

/* (2) Never let a JS lazyloader hide OUR imagery. Scoped to the two theme
   primitives only, so plugin-managed content images keep their own behaviour. */
.shot-frame img.lazyload,
.shot-frame img.lazyloading,
.media-figure img.lazyload,
.media-figure img.lazyloading { opacity: 1 !important; }

/* ---- Sector ambience trio under the "Voor wie" band ---- */
.sector-shots {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: clamp(.75rem, 2vw, 1.25rem);
  margin-top: var(--space-5);
}
.sector-shots .media-figure img { aspect-ratio: 5 / 4; }
@media (max-width: 560px) {
  /* Two up on a phone: three stacked photos would cost a whole screen. */
  .sector-shots { grid-template-columns: 1fr 1fr; gap: .6rem; }
  .sector-shots .media-figure:nth-child(3) { display: none; }
}

/* ---- Real delivered work on the homepage problem band ---- */
.problem-proof { margin-top: var(--space-5); max-width: 720px; }
@media (min-width: 900px) { .problem-proof { margin-inline: auto; } }

/* ---- Proof cards that actually carry their screenshot ---- */
.card--shot { display: flex; flex-direction: column; }
.card--shot .shot-frame { margin: calc(var(--space-4) * -1) calc(var(--space-4) * -1) var(--space-4); border: 0; border-radius: 12px 12px 0 0; box-shadow: none; }
.card--shot .shot-frame img { aspect-ratio: 16 / 10; object-fit: cover; object-position: top center; }
.card--shot h3 { margin-top: 0; }
.card--shot p { margin-bottom: var(--space-3); }

/* ---- (3) Icon system: sizes that read as design, not as debris ---- */
.svc-card .ico,
.step .ico,
.qc-list .ico { color: var(--primary); flex: none; }

/* Service/feature card icon plate — the icon gets a ground, so it reads as a
   deliberate mark rather than a stray glyph beside a heading. */
.ico-plate {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 12px;
  background: var(--tint); color: var(--primary);
  border: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.ico-plate svg { width: 26px; height: 26px; }
.section--dark .ico-plate { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.16); color: #fff; }

/* Contact methods: the icons here were 16px marks jammed against text.
   Given a plate and a real row, they become a scannable contact block. */
.contact-methods { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); }
.contact-methods li { margin: 0; }
.contact-methods a,
.contact-methods .cm-static {
  display: flex; align-items: center; gap: var(--space-3);
  min-height: 56px; padding: .75rem 1rem;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); color: var(--ink);
  text-decoration: none;
}
.contact-methods a:hover { border-color: var(--primary); color: var(--primary); text-decoration: none; }
.contact-methods .cm-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  border-radius: 10px; background: var(--tint); color: var(--primary);
}
/* Explicit box + no shrink: the previous markup let flexbox squeeze the
   glyph, which is why these read as "cut off" on narrow screens. */
.contact-methods .cm-ico svg { width: 22px; height: 22px; flex: none; overflow: visible; }
.contact-methods .cm-label { display: flex; flex-direction: column; min-width: 0; }
.contact-methods .cm-label b { font-weight: 600; }
.contact-methods .cm-label span { color: var(--muted); font-size: .9rem; word-break: break-word; }

/* Global safety: an inline icon may never be squeezed by a flex parent. */
a > svg, button > svg, li > svg, p > svg, .chip > svg, label > svg { flex: none; }

/* ---- Numbered steps: give the process real visual weight ---- */
.step .step-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--tint); color: var(--primary); border: 1px solid var(--line);
  margin-bottom: var(--space-3);
}
.step .step-ico svg { width: 22px; height: 22px; }

/* ---- Restrained depth on section transitions ----
   A single soft mesh accent, same language as the hero panel. Tint bands keep
   their flat ground; only the seam gets light. `background-image` on a
   pseudo-element so nothing inherits it and no layout box changes. */
.section--tint { position: relative; isolation: isolate; }
.section--tint::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(70% 55% at 12% 0%, rgba(51,94,234,.10), transparent 62%),
    radial-gradient(55% 45% at 92% 100%, rgba(66,186,150,.09), transparent 60%);
}
@media (prefers-reduced-motion: no-preference) { .section--tint::before { will-change: auto; } }
/* Contact aside ambience sits under the methods, not crowded against them. */
.contact-methods + .media-figure { margin-top: var(--space-4); }

/* ---- [visual-2] Dark proof band (calibration vs recent factory builds) ----
   The proof cards sit on the ink ground now. Cards stay light so the client
   screenshots keep a neutral surround (a dark card would tint the browser
   mock and make two different sites look like one design), but the border and
   shadow are retuned for a dark ground, where a hairline grey line disappears
   and a soft shadow does nothing. */
.section--dark .card {
  background: #151b26;
  border-color: #232c3b;
  box-shadow: 0 24px 48px -30px rgba(0,0,0,.65);
}
.section--dark .card h3 { color: #fff; }
.section--dark .card p { color: var(--subhead); }
.section--dark .card--link:hover { border-color: var(--primary); }
/* The screenshot keeps its own light chrome: it is a picture of a real site,
   not a UI element of this one. */
.section--dark .shot-frame { background: #fff; border-color: #232c3b; }
.section--dark .shot-frame .bar { background: #f2f5fb; border-bottom-color: #e3e8f2; }
.section--dark .shot-frame figcaption { color: var(--muted); border-top-color: #e3e8f2; }
/* Partner credit on dark. */
.section--dark .partner-credit,
.section--dark .pc-name { color: var(--subhead); }
.section--dark .pc-name { text-decoration: underline; }
/* The tint band's mesh accent must not paint over the dark ground. */
.section--dark::before { content: none; }

/* =========================================================================
 * [visual-2] STICKY CHECKOUT BAR — two measured defects.
 *
 * (a) CONSENT WAS UNREACHABLE. Measured at 390x844 on `/` before the fix:
 *     consent banner z-index 120 vs sticky bar z-index 850, both
 *     position:fixed bottom:0 and overlapping by 64px. An elementFromPoint
 *     probe at the centre of the "Accepteren" button (152x48 at y=772)
 *     returned `.amt` — the sticky bar's PRICE — i.e. a real tap on the
 *     legal consent button hit the checkout bar instead. The existing rule
 *     `.consent-banner:not([hidden]) ~ .sticky-checkout { bottom: auto }`
 *     did not save it: `bottom:auto` on a fixed element with no `top` just
 *     leaves it at its static position, still over the banner, and it never
 *     addressed the z-order at all.
 *     Consent is the legal gate, so consent wins unconditionally: the banner
 *     is raised above the bar AND the bar is suppressed entirely until a
 *     choice exists. One question on screen at a time.
 *
 * (b) BUTTONS OVERFLOWED THE BAR. `max-height:73px` is a hard cap on a
 *     flex row whose content is a 46px button plus 0.55rem padding plus
 *     env(safe-area-inset-bottom). When Chrome's bottom chrome auto-hides
 *     the safe-area inset grows and the content exceeds the cap, so the
 *     buttons rendered outside the bar's own box. Height is now driven by
 *     content with a min-height floor, and the safe-area inset is added to
 *     the padding rather than fighting a fixed ceiling. Uses dvh-aware
 *     sizing so a resizing viewport cannot clip it.
 * ========================================================================= */
@media (max-width: 879px) {
  /* (b) content-driven height, no clipping cap */
  .sticky-checkout {
    max-height: none;
    min-height: 64px;
    box-sizing: content-box;
    padding-bottom: calc(.55rem + env(safe-area-inset-bottom, 0px));
  }
  .sticky-checkout > * { min-width: 0; }

  /* (a) consent always above the sticky bar, and the bar stands down
     entirely while the question is open. */
  .consent-banner { z-index: 1000; }
  .consent-banner:not([hidden]) ~ .sticky-checkout,
  body:has(.consent-banner:not([hidden])) .sticky-checkout { display: none; }
  /* Nothing may sit under the banner while it is up. */
  .consent-banner:not([hidden]) { max-height: 100dvh; overflow-y: auto; }
}

/* =========================================================================
   [concepts-final] Conceptontwerpen per branche (werkpagina)
   These sit below the real client cases and MUST NOT be mistakable for
   delivered work, so they are deliberately a different component from
   .case-card: a dashed border and a tinted ground read as "sample", the
   permanent "Conceptvoorbeeld" label sits on the screenshot itself, and the
   sector line replaces the client/role line that real cases carry.
   ========================================================================= */
.section--concepts { background: var(--tint); }

.concepts-intro { color: var(--muted); margin-top: var(--space-3); }

.concept-card {
  background: var(--surface);
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transition: transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}
.concept-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 26px 50px -24px rgba(13,17,23,.28);
  border-color: var(--primary);
}

.concept-media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--tint);
  overflow: hidden;
}
.concept-media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block; }

/* The label rides on the screenshot so it travels with the image wherever the
   card is seen, including when the page is skim-read at speed. */
.concept-label {
  position: absolute; top: .6rem; left: .6rem; z-index: 2;
  background: var(--ink); color: #fff;
  font-family: var(--font-display); font-weight: 600;
  font-size: .72rem; letter-spacing: .06em; text-transform: uppercase;
  padding: .3rem .6rem; border-radius: 999px;
}

.concept-body { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.concept-body .client { font-family: var(--font-display); font-weight: 700; color: var(--ink); font-size: var(--step-1); }
.concept-body .sector { color: var(--accent-ink); font-weight: 600; font-size: .92rem; margin: 0; }
.concept-body .rationale { color: var(--muted); margin: 0; }
.concept-body .text-link { margin-top: auto; padding-top: var(--space-2); }

/* Stretched link: the ::after must live on the ANCHOR and resolve against the
   positioned CARD (the pattern already proven on .case-card / .card--link).
   The anchor itself stays static so inset:0 does not resolve to its own box. */
.concept-card .text-link { z-index: 1; }
.concept-card .text-link::after { content: ""; position: absolute; inset: 0; z-index: 0; }

@media (max-width: 820px) {
  .concept-body { padding: var(--space-4); }
}

/* --- [wave-fix] 6a extended: sector tiles become real links to matching
   concept demos (item 1, the #1 finding: 5/19 personas asked for exactly
   what the demos already provide but never found them). The <li> itself no
   longer carries the padding/border — its child <a> does, so the whole
   tile is one hit target (44px+) rather than a text-only link floating
   inside a static card. --- */
.sector-band .sector-list li { padding: 0; border: none; background: none; display: block; }
.sector-band .sector-list li > a {
  display: flex; gap: .55rem; align-items: flex-start;
  padding: .7rem .9rem; min-height: 44px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); color: var(--ink); font-size: .97rem;
  text-decoration: none; transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sector-band .sector-list li > a svg { color: var(--primary); flex: none; margin-top: 3px; }
.sector-band .sector-list__item--linked > a:hover,
.sector-band .sector-list__item--linked > a:focus-visible {
  border-color: var(--primary); transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.08);
}
.sector-band .sector-list__text { display: flex; flex-direction: column; gap: .15rem; }
.sector-band .sector-list__cta {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: .82rem; font-weight: 600; color: var(--primary);
}
.sector-band .sector-list__cta svg { margin-top: 0; }
.sector-band .sector-list__cta--pending { color: var(--muted); font-weight: 500; }
.sector-band .sector-list__item--pending > a { color: var(--ink); }
.sector-band .sector-list__item--pending > a svg:first-child { color: var(--muted); }

/* --- [wave-fix] sector one-liner Q&A strip (item 2). --- */
.sector-qas {
  margin-top: var(--space-4);
  display: grid; gap: var(--space-2);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.sector-qa {
  padding: .8rem 1rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.sector-qa__q { margin: 0 0 .35rem; font-weight: 600; color: var(--ink); font-size: .93rem; }
.sector-qa__a { margin: 0; display: flex; gap: .4rem; align-items: flex-start; color: var(--muted); font-size: .9rem; line-height: 1.5; }
.sector-qa__a svg { color: var(--primary); flex: none; margin-top: 3px; }

@media (max-width: 640px) {
  .sector-band .sector-list__cta { font-size: .78rem; }
  .sector-qas { grid-template-columns: 1fr; }
}

/* --- [wave-fix] Home proof-band concept-demo thumbnail strip (item 1). --- */
.proof-concepts {
  margin-top: var(--space-5);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(255,255,255,.15);
}
.proof-concepts__label {
  color: rgba(255,255,255,.7); font-size: .85rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .04em; margin: 0 0 var(--space-3);
}
.proof-concepts__grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(3, 1fr); }
.proof-concepts__item {
  display: block; border-radius: var(--radius); overflow: hidden;
  border: 1px solid rgba(255,255,255,.15); position: relative;
  transition: transform .15s ease, border-color .15s ease;
}
.proof-concepts__item:hover, .proof-concepts__item:focus-visible {
  transform: translateY(-2px); border-color: rgba(255,255,255,.4);
}
.proof-concepts__item img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.proof-concepts__cap {
  position: absolute; inset: auto 0 0 0; padding: .4rem .6rem;
  background: linear-gradient(0deg, rgba(0,0,0,.75), transparent);
  color: #fff; font-size: .78rem; font-weight: 600;
}
@media (max-width: 640px) {
  .proof-concepts__grid { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
  .proof-concepts__cap { font-size: .68rem; padding: .3rem .4rem; }
}

/* --- [wave-fix] Terugbel micro-form on /contact/ (item 3b). --- */
.callback-card {
  margin-top: 1.5rem; padding: 1.25rem;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius);
}
.callback-card h3 { margin: 0 0 .35rem; font-size: 1.05rem; }
.callback-card > p { margin: 0 0 1rem; color: var(--muted); font-size: .93rem; }
.callback-form { display: flex; flex-direction: column; gap: .7rem; }
.callback-form .field input {
  width: 100%; min-height: 44px; padding: .6rem .8rem;
  border: 1px solid var(--line); border-radius: var(--radius);
  font-size: 1rem; color: var(--ink); background: var(--bg, #fff);
}
.callback-form .field.has-error input { border-color: #b32d2e; }
.callback-form .err { display: block; color: #b32d2e; font-size: .82rem; margin-top: .25rem; min-height: 0; }
.callback-form .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.callback-status.is-error { color: #b32d2e; font-size: .9rem; }
.callback-form button { align-self: flex-start; min-height: 44px; }
.callback-done { padding: .8rem 0; font-weight: 600; color: var(--ink); }

/* --- [wave-fix] Hero subline lead (item 4, ad-scent): the pre-existing
   headline now sits as the first line of the subline, once the literal ad
   hook takes the H1 slot on home + the paid landing page. --- */
.hero-sub__lead { font-weight: 600; color: var(--ink); margin: 0 0 .35rem; }

/* --- [owner-desktop-polish 2026-08-11] Desktop spacing + sector-grid tidy-up.
   1. .section--snug: for single-card interlude sections (founder-note). Two
      stacked clamp(4rem,9vw,7rem) paddings around one small card read as a
      hole in the page on desktop; snug keeps the card breathing without the
      void.
   2. Sector tiles: auto-fit let the 8 tiles run 5+3 on wide screens with
      ragged heights. Cap at 4 columns from 900px (8 tiles = two even rows)
      and stretch each tile link to the full row height so a 1-line and a
      2-line tile in the same row get the same card height. --- */
.section--snug { padding-block: clamp(1.25rem, 2.5vw, 2rem); }
/* [mobile-fix 2026-08-12] height:100% on the tile link broke intrinsic sizing
   on the 2-column phone grid: the link's percentage height resolved against a
   row that had not accounted for the link's own wrapped text, so "concept-
   voorbeeld volgt" spilled past the card border. Flex on the li gives the link
   full row height without a percentage, so the row grows with the text. */
.sector-band .sector-list li { display: flex; align-items: stretch; }
/* margin-block reset: the mobile tap-target rule (`main li a { padding-block:
   11px; margin-block: -11px }`) is meant for INLINE prose links but also
   catches these full-card anchors, making each card bleed 11px into its
   neighbours (the "tiles overlap" defect). The whole card is the link and
   already exceeds 44px, so the enlargement trick is both unneeded and
   harmful here. */
.sector-band .sector-list li > a { flex: 1 1 auto; margin-block: 0; }
/* Same tap-target-rule victim on /contact/: the Bellen/E-mailen rows are
   full-card li>a anchors (56px tall already), not inline prose links. */
.contact-methods li > a { margin-block: 0; }
/* The ambience figure on /contact/ sat flush against the callback card
   (only the .contact-methods sibling combinator carried a margin). */
.callback-card + .media-figure { margin-top: var(--space-4); }
/* [pay-marks-icons 2026-08-12] Official method icons (32x24 SVG badges).
   iDEAL/Wero lead slightly larger per "iDEAL first and largest". */
.pay-marks .pm-logo { display: block; height: 30px; width: auto; }
.pay-marks .pm-logo--lead { height: 36px; }
@media (min-width: 900px) {
  .sector-band .sector-list { grid-template-columns: repeat(4, 1fr); }
}
/* [mobile-fix-2 2026-08-12] Two cramped columns forced 3-4-line titles and,
   with equal-height rows, big empty card bottoms. On phones the list becomes
   ONE column of compact full-width rows: same total height as the 2-column
   grid (titles fit on 1-2 lines), far calmer to read. */
@media (max-width: 560px) {
  .sector-band .sector-list { grid-template-columns: 1fr; gap: .5rem; }
  .sector-band .sector-list li > a { padding: .6rem .8rem; }
}
/* [mobile-fix 2026-08-12] The phone glyph in the sticky bar was flex-squeezed
   on narrow viewports (svg default flex-shrink:1 inside the inline-flex
   button) — same defect class as the /contact/ icon plates. */
.sticky-checkout .sc-call svg { flex: none; }
/* [datadetect-fix 2026-08-12] iOS WebKit address detection wraps recognized
   addresses (footer, contact block) in its own tappable anchors with a dotted
   underline, which reads as broken styling. Neutralize the injected style;
   the tap-to-Maps behaviour itself is unaffected. */
a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  font: inherit !important;
}
/* [webshop-concept 2026-08-12] Four concept demos now (installatie, salon,
   horeca, webshop): the home strip runs 4-up on desktop, 2x2 on phones
   (4 thumbs at 1/3 phone width were unreadably small). */
.proof-concepts__grid { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 700px) {
  .proof-concepts__grid { grid-template-columns: repeat(2, 1fr); }
}