/* ==================================================================
   Busje komt zo · "Squares" design system v2 (2026-10-14)
   Square corners, 1px grid lines, small orange squares as the mark.
   Spec: DESIGN-SYSTEM-SQUARES-2026-10-14.md
   ================================================================== */

/* ---------- 1. Font (self-hosted, OFL) ---------- */
/* Readiness 2026-10-15: instanced to the axes the pages use (wght 400-800, wdth 100-112), 90 KB -> 53 KB.
   The preload in every page head must use the same URL (scripts/apply_squares_1014.py HEAD_NEW). */
@font-face {
  font-family: "Archivo";
  src: url("assets/fonts/archivo-latin-var-2.woff2") format("woff2");
  font-weight: 400 800;
  font-stretch: 100% 112%;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---------- 2. Tokens ---------- */
:root {
  --ink: #0a2530;
  --text: #26434d;
  --muted: #5b737b;
  --brand: #004f62;
  --brand-deep: #00303d;
  --brand-900: #00222c;
  --brand-tint: #cfe4ea;
  --brand-50: #eef5f7;
  --accent: #f39200;
  --accent-strong: #d97f00;
  --accent-ink: #1d1300;
  --accent-50: #fff4e2;
  --paper: #f5f7f8;
  --white: #ffffff;
  --line: #d8e2e5;
  --line-strong: #b3c6cb;
  --line-dark: rgba(255, 255, 255, .16);
  --wa: #15803d;
  --wa-strong: #116c33;
  --success: #177245;
  --error: #b42318;
  --focus: #1769e0;
  --lift: 0 24px 48px -24px rgba(0, 34, 44, .45);
  --lift-sm: 0 14px 30px -18px rgba(0, 34, 44, .35);
  --shell: 1240px;
  --gutter: 28px;
  --measure: 70ch;
  --section: clamp(60px, 7vw, 100px);
  --font: "Archivo", "Helvetica Neue", Arial, system-ui, sans-serif;
  --check-white: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --check-brand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23004f62' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
  --grid-dark: linear-gradient(rgba(255, 255, 255, .055) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .055) 1px, transparent 1px);
  --grid-light: linear-gradient(rgba(0, 79, 98, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 79, 98, .07) 1px, transparent 1px);
  --dots: radial-gradient(rgba(0, 79, 98, .22) 1.2px, transparent 1.4px);
  /* legacy aliases still referenced by a few inline styles and scripts */
  --teal: var(--brand);
  --teal-dark: var(--brand);
  --teal-deep: var(--brand-deep);
  --teal-soft: var(--brand-50);
  --orange: var(--accent);
  --orange-dark: var(--accent-strong);
  --orange-soft: var(--accent-50);
  --ink-strong: var(--ink);
  --radius-sm: 0;
  --radius: 0;
  --radius-lg: 0;
  --shadow-xs: none;
  --shadow-sm: var(--lift-sm);
  --shadow-md: var(--lift);
}

/* ---------- 3. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 130px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; color: var(--text); background: var(--white); font-family: var(--font); font-size: 17px; line-height: 1.65; font-stretch: 100%; font-kerning: normal; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: var(--brand); text-underline-offset: 3px; text-decoration-thickness: 1px; }
a:hover { color: var(--brand-deep); }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0 0 .5em; color: var(--ink); font-weight: 800; font-stretch: 108%; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(34px, 4.6vw, 60px); line-height: 1.02; letter-spacing: -.028em; font-stretch: 112%; }
h2 { font-size: clamp(30px, 3.4vw, 46px); }
h3 { font-size: clamp(19px, 1.6vw, 22px); font-stretch: 100%; letter-spacing: -.01em; line-height: 1.25; font-weight: 750; }
h4 { font-size: 17px; font-stretch: 100%; letter-spacing: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }
strong, b { font-weight: 750; color: inherit; }
figure { margin: 0; }
hr { border: 0; border-top: 1px solid var(--line); margin: 32px 0; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
.shell { width: min(calc(100% - var(--gutter) * 2), var(--shell)); margin-inline: auto; }
.narrow { max-width: 880px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; z-index: 1000; top: 10px; left: 10px; min-height: 44px; padding: 10px 16px; display: flex; align-items: center; color: var(--white); background: var(--brand-deep); border: 2px solid var(--accent); font-weight: 800; text-decoration: none; transform: translateY(-160%); transition: transform .16s ease; }
.skip-link:focus { transform: translateY(0); color: var(--white); }
main:focus { outline: none; }
.concept-bar { padding: 6px 16px; color: var(--accent-ink); background: var(--accent-50); text-align: center; font-size: 12.5px; font-weight: 700; border-bottom: 1px solid #f3d7a6; }
.prototype-note { margin-top: 14px; padding: 8px 12px; border-left: 3px solid var(--accent); background: var(--accent-50); color: var(--accent-ink); font-size: 13px; }

/* Sprite icons: stroked line icons with square ends. */
svg:has(> use):not(.google-g) { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: square; stroke-linejoin: miter; }
.stars { color: var(--accent); letter-spacing: 1px; white-space: nowrap; }
.star-ico { color: var(--accent); }

/* ---------- 4. Type helpers ---------- */
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; color: var(--brand); font-size: 14.5px; font-weight: 700; line-height: 1.35; letter-spacing: .005em; font-stretch: 100%; }
.eyebrow::before { content: ""; width: 10px; height: 10px; flex: none; background: var(--accent); }
.lead { font-size: clamp(17.5px, 1.5vw, 20px); line-height: 1.6; color: var(--text); max-width: 62ch; }
.text-link { display: inline-flex; align-items: center; gap: 6px; color: var(--brand); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 5px; line-height: 1.35; }
.text-link:hover { color: var(--accent-strong); }
.inline-actions { display: flex; flex-wrap: wrap; gap: 10px 26px; margin-top: 18px; }
.muted { color: var(--muted); }

/* ---------- 5. Buttons ---------- */
.button { --bg: var(--brand); --fg: var(--white); --bd: var(--brand); display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 22px; border: 1px solid var(--bd); border-radius: 0; background: var(--bg); color: var(--fg); font-family: var(--font); font-size: 15.5px; font-weight: 750; font-stretch: 104%; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease; }
.button:hover { --bg: var(--brand-deep); --bd: var(--brand-deep); color: var(--fg); }
.button:active { transform: translateY(1px); }
.button[disabled] { opacity: .6; cursor: progress; }
.button-gold { --bg: var(--accent); --bd: var(--accent); --fg: var(--accent-ink); }
.button-gold:hover { --bg: var(--accent-strong); --bd: var(--accent-strong); --fg: var(--accent-ink); }
.button-secondary { --bg: var(--white); --fg: var(--ink); --bd: var(--line-strong); }
.button-secondary:hover { --bg: var(--white); --bd: var(--brand); --fg: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }
/* .button-on-dark is a white outline on dark sections; anywhere light it falls back to the secondary look. */
.button-on-dark { --bg: var(--white); --fg: var(--ink); --bd: var(--line-strong); }
.button-on-dark:hover { --bg: var(--white); --bd: var(--brand); --fg: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); }
:is(.home-hero, .video-band, .site-footer, .contact-band, .reviews-google, .inner-hero, .quote-hero, .clear-hero, .lead-magnet, .calculator-summary, .decision-card, .pack-card.is-featured) .button-on-dark { --bg: transparent; --fg: var(--white); --bd: rgba(255, 255, 255, .45); box-shadow: none; }
:is(.home-hero, .video-band, .site-footer, .contact-band, .reviews-google, .inner-hero, .quote-hero, .clear-hero, .lead-magnet, .calculator-summary, .decision-card, .pack-card.is-featured) .button-on-dark:hover { --bg: rgba(255, 255, 255, .1); --bd: var(--white); --fg: var(--white); }
.button-whatsapp { --bg: var(--wa); --bd: var(--wa); --fg: var(--white); }
.button-whatsapp:hover { --bg: var(--wa-strong); --bd: var(--wa-strong); --fg: var(--white); }
.button-small { min-height: 44px; padding: 0 16px; font-size: 14.5px; }
.btn-icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.hero-actions, .contact-hooks { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.hero-actions { margin-top: 28px; }

/* ---------- 6. Safety tags and check lists ---------- */
.safe-tags { list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.safe-tags li { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 6px 12px 6px 6px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 14px; font-weight: 650; line-height: 1.2; }
.safe-tags li::before { content: ""; width: 22px; height: 22px; flex: none; background: var(--success) var(--check-white) center / 13px no-repeat; }
.safe-tags.on-dark li { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: var(--white); }
.check-list, .proof-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.check-list li, .proof-list li { position: relative; padding-left: 32px; line-height: 1.5; }
.check-list li::before, .proof-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--brand-50) var(--check-brand) center / 12px no-repeat; border: 1px solid var(--brand-tint); }
.proof-list { margin-top: 22px; gap: 6px; font-size: 15px; color: var(--muted); }

/* ---------- 7. Header ---------- */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--white); }
.utility { background: var(--brand-deep); color: rgba(255, 255, 255, .8); font-size: 13.5px; }
.utility-inner { min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-note { margin: 0; display: flex; align-items: center; gap: 10px; }
.sq { display: inline-block; width: 8px; height: 8px; flex: none; background: var(--accent); }
.utility-links { display: flex; align-items: center; gap: 22px; }
.utility a { min-height: 38px; display: inline-flex; align-items: center; gap: 6px; color: var(--white); text-decoration: none; }
.utility a:hover { color: var(--white); text-decoration: underline; }
.utility-rating b { font-weight: 800; }
.nav-bar { position: relative; background: var(--white); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease; }
.site-header.is-scrolled .nav-bar { box-shadow: 0 12px 30px -20px rgba(0, 34, 44, .45); }
.nav-shell { min-height: 78px; display: flex; align-items: stretch; gap: 22px; }
.brand { display: flex; align-items: center; margin-right: auto; text-decoration: none; }
.brand-logo img { width: 212px; height: auto; }
#site-nav { display: flex; align-items: stretch; gap: 2px; }
#site-nav > a, .nav-item > a { position: relative; display: flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--ink); font-size: 15.5px; font-weight: 650; text-decoration: none; white-space: nowrap; }
#site-nav > a::after, .nav-item > a::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 3px; background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .18s ease; }
#site-nav > a:hover::after, .nav-item:hover > a::after, #site-nav a[aria-current="page"]::after { transform: scaleX(1); }
#site-nav a[aria-current="page"] { color: var(--brand); }
.nav-item { position: relative; display: flex; }
.nav-caret { width: 14px; height: 14px; transform: rotate(90deg); transition: transform .18s ease; }
.nav-item:hover .nav-caret, .nav-item:focus-within .nav-caret { transform: rotate(-90deg); }
.nav-sub { position: absolute; top: 100%; left: 0; z-index: 5; min-width: 270px; display: grid; padding: 8px 0; background: var(--white); border: 1px solid var(--line); border-top: 3px solid var(--accent); box-shadow: var(--lift); visibility: hidden; opacity: 0; transform: translateY(6px); transition: opacity .16s ease, transform .16s ease, visibility .16s; }
.nav-item:hover .nav-sub, .nav-item:focus-within .nav-sub, .nav-item.is-open .nav-sub { visibility: visible; opacity: 1; transform: none; }
.nav-sub a { padding: 10px 20px; color: var(--text); font-size: 15px; font-weight: 600; text-decoration: none; }
.nav-sub a:hover, .nav-sub a[aria-current="page"] { background: var(--brand-50); color: var(--brand); }
.nav-sub .nav-sub-all { margin-top: 6px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--brand); font-weight: 750; }
.nav-mobile-contact { display: none; }
.header-phone { display: flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 750; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
.header-phone svg { width: 38px; height: 38px; padding: 9px; background: var(--brand-50); color: var(--brand); }
.header-phone:hover { color: var(--brand); }
.header-cta { align-self: stretch; min-height: 0; padding: 0 28px; font-size: 15.5px; }
.menu-toggle { display: none; align-self: center; width: 48px; height: 48px; padding: 0; border: 1px solid var(--line); background: var(--white); cursor: pointer; flex-direction: column; align-items: center; justify-content: center; gap: 5px; }
.menu-toggle span:not(.sr-only) { display: block; width: 20px; height: 2px; background: var(--ink); transition: transform .2s ease, opacity .2s ease; }
.menu-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 8. Sections ---------- */
.section { padding-block: var(--section); }
.section.soft, .soft { background: var(--paper); }
.section-heading { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px 56px; align-items: end; margin-bottom: 44px; }
.section-heading h2 { margin: 0; }
.section-heading > p { margin: 0; color: var(--muted); }
.section-heading > p .text-link { margin-top: 10px; }
.breadcrumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 22px; color: var(--muted); font-size: 13.5px; }
.breadcrumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.breadcrumbs a:hover { border-color: currentColor; }
.breadcrumbs span[aria-current], .breadcrumbs > span:last-child { color: var(--ink); font-weight: 650; }

/* ---------- 9. Trust strips: proof bar (top) and authority band (bottom) ---------- */
/* One component: 4 equal cells, content centred, 1px dividers. Rating cells are links. */
.trust-band, .authority-band { background: var(--white); }
.trust-band { border-bottom: 1px solid var(--line); }
.authority-band { border-top: 1px solid var(--line); }
.trust-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.trust-item { display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; min-height: 96px; padding: 18px 20px; border-left: 1px solid var(--line); color: var(--text); text-decoration: none; transition: background-color .15s ease; }
.trust-item:last-child { border-right: 1px solid var(--line); }
a.trust-item:hover { background: var(--brand-50); color: var(--text); }
.trust-item > div { display: grid; gap: 2px; min-width: 0; }
.trust-item strong { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: var(--ink); font-size: 20px; font-weight: 800; font-stretch: 108%; line-height: 1.15; overflow-wrap: anywhere; }
.trust-item strong small { margin-left: -6px; color: var(--muted); font-size: 14px; font-weight: 700; }
.trust-item strong .stars { font-size: 12px; letter-spacing: 1px; }
.trust-item span:not(.stars):not(.trust-ico) { display: block; color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.trust-logo { width: auto; height: 22px; flex: none; }
.trust-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
.trust-ico svg { width: 22px; height: 22px; }

/* ---------- 10. Footer ---------- */
.site-footer { background: var(--brand-900); color: rgba(255, 255, 255, .74); font-size: 15px; }
.footer-lead { position: relative; background-color: var(--brand-deep); background-image: var(--grid-dark); background-size: 64px 64px; border-top: 6px solid var(--accent); }
.footer-lead-inner { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(260px, .65fr); gap: 32px 64px; align-items: center; padding-block: clamp(56px, 7vw, 88px); }
.footer-lead .eyebrow { color: #9fd3df; }
.footer-lead h2 { color: var(--white); font-size: clamp(32px, 4.2vw, 54px); max-width: 16ch; }
.footer-lead p { color: rgba(255, 255, 255, .8); max-width: 54ch; }
.footer-actions { display: grid; gap: 10px; }
.footer-actions .button { width: 100%; justify-content: center; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); gap: 36px; padding-block: 60px 48px; }
.footer-grid > div > strong { display: block; margin-bottom: 14px; color: var(--white); font-size: 15px; font-weight: 750; }
.footer-grid a, .footer-grid span { display: block; padding: 4px 0; color: rgba(255, 255, 255, .74); text-decoration: none; line-height: 1.45; }
.footer-grid a:hover { color: var(--white); text-decoration: underline; }
.footer-brand p { margin: 10px 0 14px; max-width: 34ch; }
.footer-brand > strong { color: var(--white); }
.footer-logo { display: inline-block; margin-bottom: 18px; padding: 12px 16px; background: var(--white); }
.footer-logo img { width: 180px; }
.footer-grid .footer-rating { display: inline-flex; gap: 6px; padding: 8px 12px; border: 1px solid var(--line-dark); color: var(--white); }
.footer-bottom { border-top: 1px solid var(--line-dark); font-size: 13.5px; }
.footer-bottom-inner { min-height: 64px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; }
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; }
.footer-legal a { color: rgba(255, 255, 255, .74); text-decoration: none; }
.footer-legal a:hover { color: var(--white); text-decoration: underline; }
.cookie-settings-link { padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .74); font-size: inherit; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.cookie-settings-link:hover { color: var(--white); }

/* ---------- 11. Mobile quick actions ---------- */
.mobile-actions { display: none; }

/* ---------- 12. Contact band and CTA panel ---------- */
.contact-band { background-color: var(--brand-deep); background-image: var(--grid-dark); background-size: 64px 64px; color: rgba(255, 255, 255, .85); }
.contact-band .shell { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: 28px 56px; align-items: center; }
.contact-band .eyebrow { color: #9fd3df; }
.contact-band h2 { color: var(--white); max-width: 20ch; }
.contact-band p { color: rgba(255, 255, 255, .82); margin: 0; }
.contact-band .contact-hooks { display: grid; gap: 10px; }
.contact-band .contact-hooks .button { width: 100%; }
.cta-section { padding-block: var(--section); }
.cta-panel { position: relative; display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 24px 48px; align-items: center; padding: clamp(28px, 4vw, 52px); background: var(--brand-50); border: 1px solid var(--brand-tint); border-left: 6px solid var(--accent); }
.cta-panel h2 { margin-bottom: 10px; }
.cta-panel p { margin: 0; color: var(--muted); }
.cta-panel .hero-actions { margin-top: 0; }

.header-cta { --bg: var(--accent); --bd: var(--accent); --fg: var(--accent-ink); white-space: nowrap; }
.header-cta:hover, .header-cta[aria-current="page"] { --bg: var(--accent-strong); --bd: var(--accent-strong); --fg: var(--accent-ink); }

/* ==================================================================
   Homepage
   ================================================================== */

/* ---------- Hero ---------- */
.home-hero { position: relative; isolation: isolate; overflow: hidden; color: var(--white); background: var(--brand-900); }
.hero-media { position: absolute; inset: 0; z-index: -2; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%; }
.home-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 34, 44, .95) 0%, rgba(0, 34, 44, .86) 40%, rgba(0, 34, 44, .45) 72%, rgba(0, 34, 44, .3) 100%), linear-gradient(0deg, rgba(0, 34, 44, .92) 0%, rgba(0, 34, 44, 0) 38%); }
.home-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grid-dark); background-size: 80px 80px; background-position: -1px -1px; mask-image: linear-gradient(90deg, #000 0%, rgba(0, 0, 0, .55) 60%, transparent 100%); pointer-events: none; }
.home-hero .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 400px); gap: 40px 64px; align-items: center; padding-block: clamp(56px, 7vw, 96px) 48px; }
.home-hero h1 { margin: 0 0 22px; color: var(--white); font-size: clamp(42px, 6vw, 80px); line-height: .98; letter-spacing: -.032em; font-stretch: 112%; max-width: 13ch; }
.h1-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 20px; color: var(--accent); font-size: 15px; font-weight: 750; letter-spacing: .01em; line-height: 1.3; font-stretch: 100%; }
.h1-kicker::before { content: ""; width: 10px; height: 10px; background: var(--accent); flex: none; }
.home-hero .lead { color: rgba(255, 255, 255, .88); max-width: 54ch; }
.home-hero .hero-actions { margin-top: 30px; }
.hero-note { display: flex; align-items: center; gap: 10px; margin: 18px 0 0; color: rgba(255, 255, 255, .72); font-size: 14px; }
.hero-note::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #3ddc84; box-shadow: 0 0 0 4px rgba(61, 220, 132, .18); flex: none; }
.hero-copy > * { animation: sq-rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-copy > *:nth-child(2) { animation-delay: .06s; }
.hero-copy > *:nth-child(3) { animation-delay: .12s; }
.hero-copy > *:nth-child(4) { animation-delay: .18s; }
.hero-copy > *:nth-child(5) { animation-delay: .24s; }
@keyframes sq-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

.quick-card { position: relative; padding: 28px; background: var(--white); color: var(--text); border-top: 6px solid var(--accent); box-shadow: var(--lift); }
.quick-step { margin: 0 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .01em; }
.quick-card h2 { margin: 0 0 16px; font-size: 26px; font-stretch: 108%; }
.quick-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-tiles a { display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px; border: 1px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 650; line-height: 1.25; text-decoration: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.quick-tiles svg { width: 22px; height: 22px; flex: none; color: var(--brand); }
.quick-tiles a:hover { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 -3px 0 var(--accent); color: var(--ink); }
.quick-alt { margin: 16px 0 0; color: var(--muted); font-size: 14px; }
.quick-alt a { font-weight: 700; }
.quick-proof { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.quick-proof a { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: var(--ink); font-size: 14px; text-decoration: none; }
.quick-proof img { width: auto; height: 16px; }
.quick-proof strong { font-size: 16px; font-weight: 800; }
.quick-proof .stars { font-size: 12px; }

.hero-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid rgba(255, 255, 255, .2); }
.hero-steps li { position: relative; display: flex; gap: 14px; padding: 22px 28px 30px 0; }
.hero-steps li::before { content: ""; position: absolute; top: -2px; left: 0; width: 72px; height: 3px; background: rgba(255, 255, 255, .4); }
.hero-steps li:first-child::before { background: var(--accent); width: 120px; }
.hero-steps li > span { color: var(--accent); font-size: 14px; font-weight: 800; line-height: 1.6; }
.hero-steps strong { display: block; color: var(--white); font-size: 16px; font-weight: 750; }
.hero-steps small { display: block; color: rgba(255, 255, 255, .7); font-size: 14px; line-height: 1.45; }

/* ---------- Photo collage ---------- */
.collage-section { position: relative; overflow: hidden; }
.collage-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 48px 72px; align-items: center; }
.collage { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: repeat(5, clamp(74px, 8.4vw, 116px)); gap: 14px; }
.collage::before { content: ""; position: absolute; z-index: -1; left: -48px; bottom: -40px; width: 62%; height: 70%; background-image: var(--dots); background-size: 14px 14px; }
.collage figure { position: relative; overflow: hidden; background: var(--brand-50); }
.collage img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s cubic-bezier(.2, .7, .2, 1); }
.collage figure:hover img { transform: scale(1.04); }
.collage figcaption { position: absolute; left: 0; bottom: 0; max-width: 92%; padding: 7px 12px; background: rgba(0, 34, 44, .86); color: var(--white); font-size: 12.5px; font-weight: 600; line-height: 1.35; }
.collage-a { grid-column: 1; grid-row: 1 / span 3; }
.collage-b { grid-column: 2; grid-row: 1 / span 2; }
.collage-c { grid-column: 2; grid-row: 3 / span 3; }
.collage-a img { object-position: 50% 35%; }
.collage-tile { position: relative; grid-column: 1; grid-row: 4 / span 2; display: flex; flex-direction: column; justify-content: flex-end; gap: 4px; padding: 22px 70px 22px 22px; background: var(--brand-tint); color: var(--ink); text-decoration: none; transition: background-color .2s ease; }
.collage-tile svg { width: 30px; height: 30px; margin-bottom: auto; color: var(--brand); }
.collage-tile strong { font-size: 19px; font-stretch: 106%; }
.collage-tile span { color: var(--text); font-size: 14px; line-height: 1.4; }
.collage-tile i { position: absolute; right: 0; bottom: 0; width: 52px; height: 52px; display: grid; place-items: center; background: var(--brand); color: var(--white); font-style: normal; font-size: 20px; transition: background-color .2s ease; }
.collage-tile:hover { background: #bcdbe3; color: var(--ink); }
.collage-tile:hover i { background: var(--accent); color: var(--accent-ink); }
.collage-copy .check-list { margin-top: 22px; }

/* ---------- Services (8 square cards) ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.svc-card { position: relative; display: flex; flex-direction: column; gap: 12px; min-height: 300px; padding: 28px 26px 0; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); transition: box-shadow .2s ease, background-color .2s ease; }
.svc-card:hover { box-shadow: inset 0 4px 0 var(--accent); background: #fbfdfd; }
.svc-ico { width: 52px; height: 52px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); transition: background-color .2s ease, color .2s ease; }
.svc-ico svg { width: 26px; height: 26px; }
.svc-card:hover .svc-ico { background: var(--brand); color: var(--white); }
.svc-card h3 { margin: 8px 0 0; font-size: 20px; }
.svc-card h3 a { color: inherit; text-decoration: none; }
.svc-card h3 a::after { content: ""; position: absolute; inset: 0; }
.svc-card p { margin: 0; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.svc-link { position: relative; z-index: 1; display: flex; align-items: stretch; justify-content: space-between; margin: auto -26px 0; min-height: 54px; padding-left: 26px; border-top: 1px solid var(--line); color: var(--brand); font-size: 14.5px; font-weight: 750; text-decoration: none; }
.svc-link { align-items: center; }
.svc-link span { align-self: stretch; width: 54px; display: grid; place-items: center; background: var(--brand); color: var(--white); font-size: 19px; transition: background-color .2s ease, color .2s ease; }
.svc-card:hover .svc-link span, .svc-link:hover span { background: var(--accent); color: var(--accent-ink); }

/* ---------- Video band + why card ---------- */
.video-band { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(460px, 50vw, 640px); padding-bottom: 140px; color: var(--white); background: var(--brand-900); }
.video-media { position: absolute; inset: 0; z-index: -2; background: var(--brand-900); }
.video-media video { width: 100%; height: 100%; object-fit: cover; }
.video-band::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse at center, rgba(0, 34, 44, .45) 0%, rgba(0, 34, 44, .78) 100%), linear-gradient(0deg, rgba(0, 34, 44, .7), rgba(0, 34, 44, .2) 60%); }
.video-copy { display: grid; justify-items: center; text-align: center; padding-block: 72px 24px; }
.video-copy .eyebrow { color: #9fd3df; }
.video-copy h2 { max-width: 18ch; color: var(--white); font-size: clamp(32px, 4.6vw, 60px); }
.video-copy p { max-width: 56ch; color: rgba(255, 255, 255, .86); }
.video-play { display: inline-flex; align-items: center; gap: 16px; margin-top: 18px; padding: 0; border: 0; background: none; color: var(--white); font-size: 16px; font-weight: 750; cursor: pointer; }
.play-sq { width: 76px; height: 76px; display: grid; place-items: center; background: var(--accent); color: var(--accent-ink); box-shadow: 0 0 0 10px rgba(243, 146, 0, .22); transition: transform .2s ease, box-shadow .2s ease; }
.play-sq svg { width: 28px; height: 28px; fill: currentColor; }
.video-play:hover .play-sq { transform: scale(1.05); box-shadow: 0 0 0 14px rgba(243, 146, 0, .18); }
.why-wrap { position: relative; z-index: 2; margin-top: -140px; padding-bottom: var(--section); }
.why-card { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); max-width: 1080px; margin-inline: auto; background: var(--white); box-shadow: var(--lift); }
.why-photo { position: relative; min-height: 320px; }
.why-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.why-copy { padding: clamp(28px, 4vw, 56px); border-top: 6px solid var(--accent); }
.why-copy h2 { font-size: clamp(26px, 2.8vw, 36px); }
.why-list { list-style: none; margin: 24px 0 0; padding: 0; }
.why-list li { display: flex; gap: 16px; padding: 18px 0; border-top: 1px solid var(--line); }
.why-ico { width: 46px; height: 46px; flex: none; display: grid; place-items: center; background: var(--brand-deep); color: var(--white); }
.why-ico svg { width: 22px; height: 22px; }
.why-list strong { display: block; color: var(--ink); font-size: 17px; line-height: 1.35; }
.why-list p { margin: 3px 0 0; color: var(--muted); font-size: 15px; line-height: 1.5; }
.video-modal { width: min(1120px, 94vw); max-width: none; max-height: 92vh; padding: 0; border: 0; background: #000; overflow: visible; }
.video-modal::backdrop { background: rgba(0, 20, 26, .88); }
.video-modal video { width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000; }
.video-close { position: absolute; z-index: 2; top: 0; right: 0; width: 48px; height: 48px; display: grid; place-items: center; border: 0; background: var(--accent); color: var(--accent-ink); font-size: 28px; line-height: 1; cursor: pointer; }
.video-close:hover { background: var(--accent-strong); }

/* ---------- Reviews ---------- */
.reviews-google { position: relative; overflow: hidden; background-color: var(--brand-deep); background-image: var(--grid-dark); background-size: 64px 64px; color: rgba(255, 255, 255, .84); }
.reviews-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 64px; align-items: end; margin-bottom: 44px; }
.reviews-head .review-platforms { grid-column: 2; grid-row: 1 / span 4; align-self: center; }
.reviews-head .eyebrow { color: #9fd3df; }
.reviews-head h2 { color: var(--white); max-width: 16ch; }
.reviews-head > p { color: rgba(255, 255, 255, .8); }
.reviews-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.review-platforms { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 12px; }
.platform-card { display: grid; gap: 8px; padding: 22px; background: var(--white); color: var(--text); text-decoration: none; border-top: 4px solid var(--accent); transition: transform .2s ease; }
.platform-card:hover { transform: translateY(-3px); color: var(--text); }
.platform-logo { width: auto; height: 24px; max-width: 100%; object-fit: contain; object-position: left center; }
.platform-score { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; }
.platform-score strong { color: var(--ink); font-size: clamp(30px, 3vw, 40px); font-weight: 800; font-stretch: 110%; line-height: 1; }
.platform-score em { color: var(--muted); font-style: normal; font-weight: 700; }
.platform-score .stars { font-size: 15px; }
.platform-card small { color: var(--muted); font-size: 13.5px; overflow-wrap: anywhere; }
.reviews-reel { position: relative; overflow: hidden; mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%); }
.reviews-track { display: flex; gap: 16px; width: max-content; padding-right: 16px; animation: sq-marquee 70s linear infinite; }
.reviews-reel:hover .reviews-track, .reviews-reel:focus-within .reviews-track { animation-play-state: paused; }
@keyframes sq-marquee { to { transform: translateX(-50%); } }
.review-google-card { width: 360px; flex: none; display: flex; flex-direction: column; gap: 12px; padding: 24px; background: var(--white); color: var(--text); }
.review-google-card p { margin: 0; font-size: 15.5px; line-height: 1.6; }
.rg-head { display: flex; align-items: center; gap: 12px; }
.rg-avatar { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-deep); font-weight: 800; }
.rg-avatar-trustoo { background: #e5f3ec; color: #0b6b3a; }
.rg-head strong { display: block; color: var(--ink); font-size: 15.5px; line-height: 1.3; }
.rg-meta { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.google-g { width: 14px; height: 14px; flex: none; }
.rg-src-logo { width: auto; height: 11px; }

/* ---------- Who are we ---------- */
.who-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 48px 72px; align-items: center; }
.who-copy p { font-size: 16.5px; line-height: 1.75; }
.who-copy p a { font-weight: 700; }
.who-proof { display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 6px; }
.who-proof a { display: inline-flex; align-items: center; gap: 9px; padding: 10px 16px; border: 1px solid var(--line); background: var(--white); color: var(--ink); text-decoration: none; }
.who-proof a:hover { border-color: var(--brand); color: var(--ink); }
.who-proof img { width: auto; height: 18px; }
.who-proof strong { font-size: 18px; font-weight: 800; }
.who-proof .stars { font-size: 13px; }
.who-copy .hero-actions { margin-top: 20px; }
.who-photo { position: relative; }
.who-photo::before { content: ""; position: absolute; z-index: -1; right: -18px; top: -18px; width: 46%; height: 46%; background: var(--accent); }
.who-photo::after { content: ""; position: absolute; z-index: -1; left: -18px; bottom: -18px; width: 38%; height: 38%; background-image: var(--dots); background-size: 12px 12px; }
.who-section { position: relative; isolation: isolate; }
.who-photo img { width: 100%; aspect-ratio: 4 / 3.4; object-fit: cover; }

/* ---------- Route scenarios + service area ---------- */
.route-scenario-grid, .definition-grid { display: flex; flex-wrap: wrap; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.route-scenario-grid > *, .definition-grid > * { flex: 1 1 280px; }
.definition-grid.definition-grid-four > * { flex-basis: 230px; }
.route-scenario-card, .definition-grid > article { display: flex; flex-direction: column; gap: 8px; padding: 28px; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.route-scenario-card > span, .definition-grid > article > span { color: var(--accent); font-size: 15px; font-weight: 800; font-stretch: 110%; }
.route-scenario-card h3, .definition-grid h3 { margin: 4px 0; }
.route-scenario-card p, .definition-grid p { margin: 0 0 6px; color: var(--muted); font-size: 15.5px; }
.route-scenario-card .text-link { margin-top: auto; align-self: flex-start; }
#utrecht-routekeuze .hero-actions { margin-top: 32px; }
.area-block { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); margin-top: 32px; background: var(--white); border: 1px solid var(--line); }
.area-map { position: relative; aspect-ratio: 2 / 1; overflow: hidden; background-color: var(--brand-50); background-image: var(--grid-light); background-size: 40px 40px; border-right: 1px solid var(--line); }
.area-map::before, .area-map::after { content: ""; position: absolute; left: 47.6%; top: 50%; border: 1px dashed rgba(0, 79, 98, .35); transform: translate(-50%, -50%); }
.area-map::before { width: 34%; height: 56%; }
.area-map::after { width: 70%; height: 96%; border-color: rgba(0, 79, 98, .2); }
.area-pin { position: absolute; left: var(--x); top: var(--y); display: flex; align-items: center; gap: 7px; color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; transform: translate(-6px, -50%); }
.area-pin i { width: 12px; height: 12px; flex: none; background: var(--brand); box-shadow: 0 0 0 4px rgba(0, 79, 98, .14); }
.area-pin.is-left { flex-direction: row-reverse; transform: translate(calc(-100% + 6px), -50%); }
.area-pin.is-hub { font-size: 15px; font-weight: 800; transform: translate(-9px, -50%); }
.area-pin.is-hub i { width: 18px; height: 18px; background: var(--accent); box-shadow: 0 0 0 8px rgba(243, 146, 0, .2); }
.area-list { padding: 28px; }
.area-title { margin: 0 0 4px; color: var(--ink); font-size: 18px; font-weight: 800; font-stretch: 106%; }
.area-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 20px; padding: 0; }
.area-chips a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); color: var(--ink); font-size: 14.5px; font-weight: 650; text-decoration: none; }
.area-chips a:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }

/* ---------- Editorial ---------- */
.editorial-section { background: var(--paper); }
.editorial-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 72px; align-items: center; }
.move-photo { position: relative; }
.move-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.move-photo figcaption { margin-top: 10px; color: var(--muted); font-size: 14px; }
.editorial-grid .text-link { margin: 6px 24px 6px 0; }

/* ---------- FAQ ---------- */
.faq-head { max-width: 760px; margin-bottom: 36px; }
.faq-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 32px 72px; align-items: start; }
.faq-grid > div:first-child { position: sticky; top: 140px; }
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary { position: relative; display: block; padding: 20px 64px 20px 0; color: var(--ink); font-size: 17.5px; font-weight: 700; line-height: 1.4; cursor: pointer; list-style: none; }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; position: absolute; right: 0; top: 50%; width: 40px; height: 40px; display: grid; place-items: center; transform: translateY(-50%); border: 1px solid var(--line); color: var(--brand); font-size: 22px; font-weight: 500; transition: background-color .15s ease, color .15s ease; }
.faq-list details[open] summary::after { content: "−"; background: var(--brand); border-color: var(--brand); color: var(--white); }
.faq-list summary:hover { color: var(--brand); }
.faq-list details > p, .faq-list details > div { margin: 0; padding: 0 64px 22px 0; color: var(--text); }
.faq-help { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 32px; align-items: center; margin-top: 32px; padding: 26px 28px; background: var(--brand-50); border-left: 6px solid var(--accent); }
.faq-help strong { color: var(--ink); font-size: 18px; }
.faq-help p { grid-column: 1; margin: 0; color: var(--muted); }
.faq-help .contact-hooks { grid-column: 2; grid-row: 1 / span 2; }

/* ==================================================================
   Inner pages
   ================================================================== */

/* ---------- Dark page heroes (inner, quote, terms, checklist, thanks) ---------- */
.inner-hero, .quote-hero { position: relative; isolation: isolate; overflow: hidden; color: rgba(255, 255, 255, .86); background-color: var(--brand-deep); background-image: var(--grid-dark); background-size: 72px 72px; }
.inner-hero::after, .quote-hero::after { content: ""; position: absolute; z-index: -1; right: max(24px, calc((100% - var(--shell)) / 2)); bottom: 0; width: 144px; height: 144px; background: var(--accent); clip-path: polygon(50% 0, 100% 0, 100% 100%, 0 100%, 0 50%, 50% 50%); opacity: .95; }
.inner-hero > .shell, .quote-hero > .shell { padding-block: clamp(48px, 6vw, 88px); }
.inner-hero h1, .quote-hero h1 { color: var(--white); max-width: 22ch; }
.inner-hero .lead, .quote-hero .lead { color: rgba(255, 255, 255, .86); }
.inner-hero .eyebrow, .quote-hero .eyebrow { color: #9fd3df; }
.inner-hero .breadcrumbs, .quote-hero .breadcrumbs, .inner-hero .breadcrumbs > span:last-child, .quote-hero .breadcrumbs > span:last-child { color: rgba(255, 255, 255, .72); }
.inner-hero .button-secondary, .quote-hero .button-secondary { --bg: transparent; --fg: var(--white); --bd: rgba(255, 255, 255, .45); }
.inner-hero .button-secondary:hover, .quote-hero .button-secondary:hover { --bg: rgba(255, 255, 255, .1); --bd: var(--white); --fg: var(--white); box-shadow: none; }
.inner-hero .button:not(.button-gold):not(.button-whatsapp):not(.button-secondary):not(.button-on-dark) { --bg: var(--accent); --bd: var(--accent); --fg: var(--accent-ink); }
.inner-hero .safe-tags li, .quote-hero .safe-tags li { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: var(--white); }
.quote-hero.compact > .shell { padding-block: clamp(36px, 4.5vw, 60px); }
.quote-hero.compact h1 { font-size: clamp(30px, 3.8vw, 48px); }
.article-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0 0 14px; color: var(--muted); font-size: 13.5px; }
.article-meta span::before { content: "·"; margin-right: 18px; }
.inner-hero .article-meta { color: rgba(255, 255, 255, .7); }

/* ---------- Service / city hero (light, split with photo) ---------- */
.service-hero { position: relative; isolation: isolate; background-color: var(--paper); background-image: var(--grid-light); background-size: 72px 72px; border-bottom: 1px solid var(--line); }
.service-hero > .shell { padding-block: clamp(36px, 5vw, 72px); }
.service-hero-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, .9fr); gap: 40px 64px; align-items: center; }
.service-hero > .service-hero-grid, .service-hero > .shell.service-hero-grid { padding-block: clamp(36px, 5vw, 72px); }
.service-hero h1 { max-width: 20ch; }
.service-hero .lead { margin-bottom: 0; }
.service-aside { position: relative; display: grid; }
.service-photo { position: relative; }
.service-photo::before { content: ""; position: absolute; z-index: -1; right: -16px; top: -16px; width: 42%; height: 42%; background: var(--accent); }
.service-photo img { width: 100%; aspect-ratio: 4 / 3.6; object-fit: cover; object-position: 50% 40%; }
.decision-card { position: relative; z-index: 1; margin: -64px 0 0 -40px; max-width: 420px; padding: 24px 26px; background: var(--brand-deep); color: rgba(255, 255, 255, .86); box-shadow: var(--lift); }
.decision-card .eyebrow { color: #9fd3df; margin-bottom: 8px; }
.decision-card h2 { color: var(--white); font-size: 21px; font-stretch: 104%; letter-spacing: -.01em; line-height: 1.25; }
.decision-card .check-list { margin-top: 12px; gap: 8px; font-size: 15px; }
.decision-card .check-list li::before { background-color: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .25); background-image: var(--check-white); }
.decision-card p { margin: 0; }
.service-aside:not(:has(.decision-card)) .service-photo img { aspect-ratio: 4 / 4.2; }

/* ---------- Ontruiming hero ---------- */
.clear-hero { position: relative; isolation: isolate; overflow: hidden; color: rgba(255, 255, 255, .88); background: var(--brand-900) url("assets/real-moving-sofa.webp") 70% 40% / cover no-repeat; }
.clear-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(95deg, rgba(0, 34, 44, .96) 0%, rgba(0, 34, 44, .86) 46%, rgba(0, 34, 44, .4) 100%); }
.clear-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grid-dark); background-size: 80px 80px; mask-image: linear-gradient(90deg, #000, transparent 75%); }
.clear-hero-inner { padding-block: clamp(40px, 7vw, 96px); }
.clear-hero .breadcrumbs, .clear-hero .breadcrumbs a, .clear-hero .breadcrumbs > span:last-child { color: rgba(255, 255, 255, .72); }
.clear-hero h1 { max-width: 18ch; margin: 18px 0 16px; color: var(--white); font-size: clamp(34px, 5vw, 64px); }
.clear-hero .lead { max-width: 60ch; color: rgba(255, 255, 255, .88); }
.rating-pill { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px; background: var(--white); color: var(--ink); font-size: 14.5px; font-weight: 750; text-decoration: none; border-left: 4px solid var(--accent); }
.rating-pill:hover { color: var(--ink); }
.rating-pill span { color: var(--accent); font-size: 16px; }
.clear-checks { list-style: none; display: grid; gap: 8px; margin: 20px 0 26px; padding: 0; }
.clear-checks li { display: flex; align-items: center; gap: 12px; color: var(--white); font-size: 17px; font-weight: 650; }
.clear-checks li::before { content: ""; width: 24px; height: 24px; flex: none; background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231d1300' stroke-width='3.4' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / 14px no-repeat; }
.clear-hero .safe-tags li { border-color: rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .07); color: var(--white); }
.clear-list li { font-size: 15.5px; }
.clear-steps { list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.clear-steps li { display: grid; align-content: start; gap: 14px; padding: 26px; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clear-steps li > span { width: 44px; height: 44px; display: grid; place-items: center; background: var(--brand); color: var(--white); font-weight: 800; font-stretch: 110%; }
.clear-steps strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; }
.clear-steps p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.55; }
.quote-intro-photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* Before / after */
.ba-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(12px, 2vw, 22px); }
.ba-card { position: relative; background: var(--white); border: 1px solid var(--line); }
.ba-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.ba-card figcaption { padding: 14px 18px 16px; color: var(--text); font-size: 15px; font-weight: 650; }
.ba-tag { position: absolute; top: 0; left: 0; z-index: 1; padding: 8px 14px; background: var(--brand-deep); color: var(--white); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.ba-card.is-after { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.ba-card.is-after .ba-tag { background: var(--accent); color: var(--accent-ink); }
.ba-arrow { width: 52px; height: 52px; display: grid; place-items: center; background: var(--brand); color: var(--white); font-size: 22px; font-weight: 800; }

/* ---------- Content grids and side notes ---------- */
.content-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr); gap: 32px 64px; align-items: start; }
.content-grid > div > p { max-width: var(--measure); }
.side-note, .contact-card { display: grid; gap: 12px; padding: 28px; background: var(--brand-50); border: 1px solid var(--brand-tint); border-top: 6px solid var(--accent); }
.side-note strong { color: var(--ink); font-size: 18px; line-height: 1.35; }
.side-note p { margin: 0; color: var(--text); font-size: 15.5px; }
.side-note .text-link { justify-self: start; }
.side-note .contact-hooks { display: grid; gap: 8px; }
.side-note .contact-hooks .button { width: 100%; }
.contact-card { align-content: start; }
.contact-card h2 { margin: 0; font-size: 24px; }
.contact-card > strong { color: var(--ink); font-size: 18px; }
.contact-card > a:not(.button) { color: var(--ink); font-size: 18px; font-weight: 750; text-decoration: none; }
.contact-card > a:not(.button):hover { color: var(--brand); }
.contact-card p { margin: 0; color: var(--muted); }
.contact-photo { width: calc(100% + 56px); max-width: none; margin: -28px -28px 6px; aspect-ratio: 16 / 10; object-fit: cover; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 24px 0 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.facts > div { padding: 14px 18px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 2px 0 0; color: var(--ink); font-weight: 750; }

/* ---------- Process / journey (numbered steps) ---------- */
.process, .journey { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; border-top: 1px solid var(--line); border-left: 1px solid var(--line); counter-reset: none; }
.process { display: flex; flex-wrap: wrap; }
.process > li { flex: 1 1 250px; }
.process.process-four > li { flex-basis: 230px; }
.journey { grid-template-columns: 1fr; margin-top: 18px; }
.process li, .journey li { display: flex; flex-direction: column; gap: 14px; padding: 28px 26px; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey li, .journey > article { display: flex; flex-direction: row; gap: 18px; padding: 20px 22px; background: var(--white); border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.journey > article { gap: 24px; padding: 32px; }
.journey > article h2 { font-size: clamp(24px, 2.4vw, 32px); }
.journey > article p:not(.eyebrow) { color: var(--muted); max-width: 64ch; }
.process li > span, .journey li > span, .journey > article > span { width: 48px; height: 48px; flex: none; display: grid; place-items: center; background: var(--brand-deep); color: var(--white); font-size: 16px; font-weight: 800; font-stretch: 110%; }
.process li:first-child > span, .journey li:first-child > span, .journey > article:first-child > span { background: var(--accent); color: var(--accent-ink); }
.process h3, .journey h3 { margin: 0 0 6px; font-size: 19px; }
.process p, .journey p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---------- Local guide (city and guide pages) ---------- */
.local-guide { background: var(--paper); }
.local-guide-head { max-width: 780px; margin-bottom: 36px; }
.local-guide-head p:not(.eyebrow) { color: var(--text); }
.local-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.local-grid.local-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.local-card, .local-check-card, .tip-card { display: flex; flex-direction: column; gap: 10px; padding: 26px; background: var(--white); border: 1px solid var(--line); transition: box-shadow .2s ease; }
.local-card:hover, .local-check-card:hover, .tip-card:hover { box-shadow: inset 0 4px 0 var(--accent); }
.local-card h3, .local-check-card h3, .tip-card h3 { margin: 6px 0 0; font-size: 19px; }
.local-card p, .local-check-card p { margin: 0; color: var(--muted); font-size: 15.5px; }
.card-number { width: 48px; height: 48px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-weight: 800; }
.card-number svg { width: 24px; height: 24px; }
.local-check-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.local-check-card > span { color: var(--accent); font-size: 15px; font-weight: 800; font-stretch: 110%; }
.timeline-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; }
.tip-card > span { align-self: flex-start; padding: 4px 10px; background: var(--brand-deep); color: var(--white); font-size: 13px; font-weight: 750; }
.tip-card .check-list { margin-top: 6px; font-size: 15px; }
.tip-card .text-link { margin-top: auto; align-self: flex-start; }
.definition-grid.definition-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.definition-grid .text-link { margin-top: auto; align-self: flex-start; }
.region-grid { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.region-link { display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 14.5px; font-weight: 650; text-decoration: none; }
.region-link:hover { border-color: var(--brand); background: var(--brand-50); color: var(--brand); }
.text-link-on-dark { color: var(--brand); }
:is(.home-hero, .video-band, .contact-band, .reviews-google, .inner-hero, .quote-hero, .clear-hero, .lead-magnet, .calculator-summary) .text-link-on-dark { color: var(--white); }
:is(.home-hero, .video-band, .contact-band, .reviews-google, .inner-hero, .quote-hero, .clear-hero, .lead-magnet, .calculator-summary) .text-link-on-dark:hover { color: var(--accent); }
.tips-list { list-style: none; counter-reset: tip; display: grid; gap: 0; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tips-list li { counter-increment: tip; position: relative; display: grid; gap: 4px; padding: 18px 0 18px 64px; border-bottom: 1px solid var(--line); }
.tips-list li::before { content: counter(tip, decimal-leading-zero); position: absolute; left: 0; top: 18px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-weight: 800; }
.tips-list strong { color: var(--ink); font-size: 17px; }
.tips-list span { color: var(--muted); font-size: 15.5px; }
.tips-more { margin-top: 22px; color: var(--muted); }
.compare-shell { max-width: 900px; }
.compare-list { gap: 12px; }

/* Schematic city map card */
.map-card { position: relative; display: grid; gap: 14px; padding: 22px; background: var(--white); border: 1px solid var(--line); }
.map-card > p { margin: 0; color: var(--muted); font-size: 14.5px; }
.map-rings { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background-color: var(--brand-50); background-image: var(--grid-light); background-size: 32px 32px; }
.map-rings::before, .map-rings::after { content: ""; position: absolute; left: 50%; top: 50%; border: 1px dashed rgba(0, 79, 98, .4); transform: translate(-50%, -50%); }
.map-rings::before { width: 40%; height: 52%; }
.map-rings::after { width: 76%; height: 92%; border-color: rgba(0, 79, 98, .22); }
.map-rings > span { position: absolute; left: 50%; top: 50%; z-index: 1; padding: 8px 14px; transform: translate(-50%, -50%); background: var(--accent); color: var(--accent-ink); font-weight: 800; font-size: 15px; box-shadow: 0 0 0 8px rgba(243, 146, 0, .2); }
.map-node { position: absolute; width: 14px; height: 14px; background: var(--brand); box-shadow: 0 0 0 5px rgba(0, 79, 98, .15); }
.map-node-a { left: 18%; top: 24%; }
.map-node-b { right: 16%; top: 30%; }
.map-node-c { left: 30%; bottom: 16%; }

/* Source panels (official references) */
.source-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 32px; align-items: center; margin-top: 32px; padding: 22px 26px; background: var(--white); border: 1px solid var(--line); border-left: 6px solid var(--brand); }
.source-panel strong { color: var(--ink); }
.source-panel p { margin: 4px 0 0; color: var(--muted); font-size: 15px; }
.source-links { display: flex; flex-wrap: wrap; gap: 8px; }
.source-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); color: var(--brand); font-size: 14.5px; font-weight: 650; text-decoration: none; }
.source-links a::after { content: "↗"; margin-left: 8px; font-size: 13px; }
.source-links a:hover { border-color: var(--brand); background: var(--brand-50); }
.section > .source-panel, .section > .compact-source { width: min(calc(100% - var(--gutter) * 2), var(--shell)); margin-inline: auto; }

/* ---------- Terms and privacy ---------- */
.terms-section { background: var(--paper); }
.terms-shell { display: grid; grid-template-columns: 270px minmax(0, 1fr); gap: 16px 56px; align-items: start; }
.terms-shell > :not(.terms-toc) { grid-column: 2; }
.terms-shell > .terms-toc { grid-column: 1; grid-row: 1 / span 30; }
.terms-toc { position: sticky; top: 140px; display: grid; gap: 2px; padding: 18px 0; border-top: 3px solid var(--accent); }
.terms-toc strong, .terms-toc p { margin: 0 0 8px; color: var(--ink); font-size: 15px; }
.terms-toc a { display: flex; align-items: center; gap: 10px; min-height: 42px; padding: 6px 12px; border-left: 2px solid var(--line); color: var(--text); font-size: 14.5px; text-decoration: none; }
.terms-toc a span { width: 24px; height: 24px; flex: none; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); font-size: 12.5px; font-weight: 800; }
.terms-toc a:hover { border-left-color: var(--accent); background: var(--white); color: var(--brand); }
.terms-card { margin: 0; padding: clamp(22px, 3vw, 36px); background: var(--white); border: 1px solid var(--line); scroll-margin-top: 16px; }
.terms-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.terms-card-head h2 { margin: 0; font-size: clamp(21px, 2vw, 26px); }
.terms-card-head .terms-num { color: var(--accent-strong); }
.terms-ico { width: 44px; height: 44px; flex: none; display: grid; place-items: center; background: var(--brand-deep); color: var(--white); font-weight: 800; }
.terms-ico svg { width: 22px; height: 22px; }
.terms-card p, .terms-card li { font-size: 16px; }
.terms-list { display: grid; gap: 8px; padding-left: 1.2em; }
.terms-list li::marker { color: var(--accent); font-weight: 800; }
.terms-help { display: grid; gap: 10px; margin-top: 18px; padding: 22px; background: var(--brand-50); border-left: 6px solid var(--accent); }
.privacy-updated { color: var(--muted); font-size: 14px; }
.terms-hero h1 { max-width: 20ch; }

/* ==================================================================
   Forms and tools
   ================================================================== */

/* ---------- Generic fields ---------- */
label { display: grid; gap: 7px; margin-bottom: 16px; color: var(--ink); font-size: 14.5px; font-weight: 700; }
input, select, textarea { width: 100%; min-height: 52px; padding: 12px 14px; border: 1px solid var(--line-strong); border-radius: 0; background: var(--white); color: var(--ink); font-size: 16px; transition: border-color .15s ease, box-shadow .15s ease; }
input[type="checkbox"], input[type="radio"] { width: auto; min-height: 0; accent-color: var(--brand); }
textarea { min-height: 110px; resize: vertical; }
input:hover, select:hover, textarea:hover { border-color: #8aa6ac; }
input:focus, select:focus, textarea:focus { border-color: var(--brand); box-shadow: inset 0 -3px 0 var(--accent); outline: none; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--error); box-shadow: inset 0 -3px 0 var(--error); }
::placeholder { color: #8299a0; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.field-hint, .field-note { margin: -6px 0 0; color: var(--muted); font-size: 13.5px; font-weight: 500; }
.form-error { margin: 16px 0 0; padding: 12px 16px; border-left: 4px solid var(--error); background: #fff0ed; color: var(--error); font-weight: 700; }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 24px; }
.privacy-note { margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.text-button { min-height: 44px; padding: 6px 0; border: 0; background: transparent; color: var(--brand); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.text-button:hover { color: var(--accent-strong); }
.button-full { width: 100%; }
.hp-field, .bcz-honeypot { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.no-js-note { margin-bottom: 24px; padding: 20px; border-left: 6px solid var(--accent); background: var(--accent-50); }
.no-js-note p { margin: 4px 0 0; }
.success-state { display: grid; gap: 10px; }
.success-state .contact-hooks { margin-top: 8px; }

/* ---------- Quote form (two steps) ---------- */
.quote-workspace { background-color: var(--paper); background-image: var(--grid-light); background-size: 72px 72px; padding-top: clamp(28px, 4vw, 56px); }
.quote-form { position: relative; max-width: 860px; padding: clamp(24px, 4vw, 48px); background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--accent); box-shadow: var(--lift); }
#quote-form { scroll-margin-top: 16px; }
.lead-progress { display: flex; align-items: center; gap: 14px; margin-bottom: 26px; }
.lead-progress-bar { flex: 1; height: 6px; background: var(--brand-50); overflow: hidden; }
.lead-progress-bar i { display: block; width: 50%; height: 100%; background: var(--accent); transition: width .45s cubic-bezier(.2, .7, .2, 1); }
.quote-form[data-step="2"] .lead-progress-bar i { width: 92%; }
.lead-progress-label { color: var(--muted); font-size: 13.5px; font-weight: 700; white-space: nowrap; }
.lead-progress-label b { color: var(--ink); }
.quote-form:not(.is-stepped) .lead-progress { display: none; }
.lead-step { min-width: 0; margin: 0; padding: 0; border: 0; }
.lead-step + .lead-step { margin-top: 32px; }
.quote-form.is-stepped .lead-step + .lead-step { margin-top: 0; }
.lead-step[hidden] { display: none !important; }
.lead-step-title { margin: 0 0 6px; padding: 0; color: var(--ink); font-size: clamp(25px, 3vw, 34px); font-weight: 800; font-stretch: 108%; letter-spacing: -.02em; line-height: 1.12; }
.lead-step-sub { margin: 0 0 20px; color: var(--muted); }
.home-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.choice-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 14px; min-height: 112px; margin: 0; padding: 16px; border: 1px solid var(--line); background: var(--white); cursor: pointer; transition: border-color .15s ease, background-color .15s ease, box-shadow .15s ease; }
.choice-tile:hover { border-color: var(--brand); background: var(--brand-50); }
.choice-tile input { position: absolute; opacity: 0; pointer-events: none; }
.choice-ico { display: grid; place-items: center; width: 40px; height: 40px; background: var(--brand-50); color: var(--brand); transition: background-color .15s ease, color .15s ease; }
.choice-ico svg { width: 22px; height: 22px; }
.choice-text { color: var(--ink); font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.choice-tile:has(input:checked) { border-color: var(--brand); background: var(--brand-50); box-shadow: inset 0 -4px 0 var(--accent); }
.choice-tile:has(input:checked) .choice-ico { background: var(--brand); color: var(--white); }
.choice-tile:has(input:checked)::after { content: ""; position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; background: var(--success) var(--check-white) center / 13px no-repeat; }
.choice-tile:has(input:focus-visible), .chip:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.lead-q { margin: 26px 0 10px; color: var(--ink); font-weight: 750; }
.lead-q em, .lead-fields em, .lead-magnet em { color: var(--muted); font-style: normal; font-weight: 500; font-size: max(.88em, 13px); }
.lead-magnet em { color: rgba(255, 255, 255, .72); }
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; display: inline-block; margin: 0; cursor: pointer; }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip span { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--line); background: var(--white); color: var(--ink); font-size: 14.5px; font-weight: 650; transition: border-color .15s ease, background-color .15s ease, color .15s ease; }
.chip:hover span { border-color: var(--brand); }
.chip:has(input:checked) span { border-color: var(--brand); background: var(--brand); color: var(--white); }
.lead-step .form-actions { display: block; margin-top: 24px; }
.lead-step .form-actions .button { width: 100%; min-height: 58px; font-size: 17px; }
.lead-summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 4px 0 14px; padding: 10px 14px; border-left: 4px solid var(--accent); background: var(--brand-50); color: var(--brand-deep); font-size: 14.5px; font-weight: 700; }
.lead-summary[hidden] { display: none; }
.lead-back { padding: 6px 0; border: 0; background: none; color: var(--brand); font-size: 14px; font-weight: 750; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.lead-back-link { display: block; margin: 14px auto 0; }
.quote-form:not(.is-stepped) .lead-back, .quote-form:not(.is-stepped) [data-step="1"] .form-actions, .quote-form:not(.is-stepped) [data-step="1"] .lead-proof { display: none; }
.lead-fields { display: grid; gap: 0; }
.lead-fields input, .lead-fields select, .lead-fields textarea { min-height: 54px; }
.lead-fields textarea { min-height: 104px; }
.lead-fields > .field-hint { margin: -8px 0 16px; }
.lead-more { margin-top: 4px; border: 1px solid var(--line); background: var(--paper); }
.lead-more summary { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; padding: 14px 16px; color: var(--ink); cursor: pointer; list-style: none; }
.lead-more summary::-webkit-details-marker { display: none; }
.lead-more summary::after { content: "+"; margin-left: auto; color: var(--brand); font-size: 22px; font-weight: 600; line-height: 1; }
.lead-more[open] summary::after { content: "\2212"; }
.lead-more summary em { color: var(--muted); font-style: normal; font-size: 14px; }
.lead-more summary small { flex-basis: 100%; color: var(--muted); font-size: 13.5px; }
.lead-more-body { display: grid; padding: 4px 16px 16px; }
.lead-reassure { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; }
.lead-reassure li { display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 5px 12px 5px 6px; border: 1px solid var(--line); color: var(--ink); font-size: 13.5px; font-weight: 650; }
.lead-reassure li::before { content: ""; width: 20px; height: 20px; flex: none; background: var(--success) var(--check-white) center / 12px no-repeat; }
.lead-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 24px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.lead-proof a { display: inline-flex; align-items: center; gap: 7px; color: var(--ink); font-size: 14px; text-decoration: none; }
.lead-proof img { width: auto; height: 17px; }
.lead-proof strong { font-size: 15.5px; font-weight: 800; }
.lead-proof .stars { font-size: 12px; }
.lead-proof small { color: var(--muted); font-size: 12.5px; }
.photo-field { display: grid; gap: 8px; margin-top: 4px; }
.photo-field-label { color: var(--ink); font-size: 14.5px; font-weight: 700; }
.photo-drop { position: relative; display: flex; align-items: center; gap: 16px; margin: 0; padding: 18px; border: 2px dashed var(--line-strong); background: var(--white); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.photo-drop:hover, .photo-drop:focus-within, .photo-drop.is-drag { border-color: var(--brand); background: var(--brand-50); }
.photo-drop input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.photo-ico { width: 34px; height: 34px; flex: none; color: var(--brand); stroke-linecap: square; stroke-linejoin: miter; }
.photo-drop-text { display: grid; gap: 2px; }
.photo-drop-text strong { color: var(--ink); font-size: 15px; }
.photo-drop-text small { color: var(--muted); font-size: 13px; font-weight: 500; }
.photo-status { margin: 0; color: var(--brand-deep); font-size: 13.5px; font-weight: 700; }
.photo-status:empty { display: none; }
.photo-previews { display: flex; flex-wrap: wrap; gap: 8px; }
.photo-previews:empty { display: none; }
.photo-thumb { position: relative; width: 76px; height: 76px; }
.photo-thumb img { width: 100%; height: 100%; object-fit: cover; }
.photo-thumb button { position: absolute; top: 0; right: 0; width: 26px; height: 26px; display: grid; place-items: center; padding: 0; border: 0; background: rgba(0, 34, 44, .85); color: var(--white); font-size: 16px; line-height: 1; cursor: pointer; }
.photo-wa { margin: 0; color: var(--muted); font-size: 13.5px; }
.photo-wa a { font-weight: 700; }
.quote-info-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .8fr); gap: 40px 72px; align-items: center; }
.quote-info-grid .contact-hooks { margin-top: 24px; }
.quote-proof { list-style: none; display: grid; gap: 10px; margin: 20px 0 0; padding: 0; }
.quote-proof li { position: relative; padding-left: 32px; color: var(--text); font-weight: 600; }
.quote-proof li::before { content: ""; position: absolute; left: 0; top: 2px; width: 20px; height: 20px; background: var(--brand-50) var(--check-brand) center / 12px no-repeat; border: 1px solid var(--brand-tint); }
.quote-calc-link { margin-top: 18px; color: var(--muted); font-size: 14.5px; }
.quote-workspace .shell.quote-form { margin-inline: auto; }

/* ---------- Price packs (tarieven) ---------- */
.packs-section { scroll-margin-top: 0; }
.price-packs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; border: 1px solid var(--line); }
.pack-card { position: relative; display: flex; flex-direction: column; gap: 16px; padding: clamp(24px, 2.6vw, 34px); background: var(--white); border-right: 1px solid var(--line); scroll-margin-top: 16px; }
.pack-card:last-child { border-right: 0; }
.pack-card.is-featured { z-index: 1; margin: -14px 0; padding-top: calc(clamp(24px, 2.6vw, 34px) + 14px); background: var(--brand-deep); color: rgba(255, 255, 255, .86); box-shadow: var(--lift); border-right: 0; }
.pack-badge { position: absolute; top: 0; left: 0; right: 0; padding: 6px 14px; background: var(--accent); color: var(--accent-ink); font-size: 13px; font-weight: 800; text-align: center; }
.pack-card.is-featured .pack-head { margin-top: 14px; }
.pack-head { display: flex; align-items: center; gap: 14px; }
.pack-ico { flex: none; width: 48px; height: 48px; display: grid; place-items: center; background: var(--brand-50); color: var(--brand); }
.pack-ico svg { width: 24px; height: 24px; }
.pack-head h3 { margin: 0; font-size: 22px; }
.pack-head p { margin: 2px 0 0; color: var(--muted); font-size: 14.5px; }
.pack-price { display: flex; align-items: baseline; gap: 8px; margin-top: 4px; }
.pack-price strong { color: var(--ink); font-size: clamp(40px, 4.4vw, 52px); font-weight: 800; font-stretch: 112%; line-height: 1; letter-spacing: -.03em; }
.pack-price span { color: var(--muted); font-weight: 700; }
.pack-sub { margin: -8px 0 0; color: var(--muted); font-size: 14.5px; }
.pack-ex { white-space: nowrap; }
.pack-vehicle { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; background: var(--paper); border-left: 4px solid var(--brand); font-size: 15px; }
.pack-vehicle span { color: var(--muted); font-weight: 700; }
.pack-vehicle strong { color: var(--ink); white-space: nowrap; }
.pack-vehicle small { color: var(--muted); font-weight: 600; }
.pack-list { list-style: none; display: grid; gap: 10px; margin: 0; padding: 0; }
.pack-list li { position: relative; padding-left: 30px; color: var(--text); font-size: 15.5px; line-height: 1.45; }
.pack-list li::before { content: ""; position: absolute; left: 0; top: 1px; width: 20px; height: 20px; background: var(--brand-50) var(--check-brand) center / 12px no-repeat; border: 1px solid var(--brand-tint); }
.pack-example { display: grid; gap: 2px; margin: auto 0 0; padding: 14px 16px; border: 1px dashed var(--line-strong); }
.pack-example span { color: var(--muted); font-size: 13px; font-weight: 700; }
.pack-example strong { color: var(--ink); font-size: 22px; font-weight: 800; }
.pack-example small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.pack-cta { width: 100%; }
.pack-alt { align-self: center; font-size: 14.5px; }
.pack-card.is-featured h3, .pack-card.is-featured .pack-price strong, .pack-card.is-featured .pack-example strong, .pack-card.is-featured .pack-vehicle strong { color: var(--white); }
.pack-card.is-featured .pack-head p, .pack-card.is-featured .pack-price span, .pack-card.is-featured .pack-sub, .pack-card.is-featured .pack-example span, .pack-card.is-featured .pack-example small, .pack-card.is-featured .pack-vehicle span, .pack-card.is-featured .pack-vehicle small { color: rgba(255, 255, 255, .72); }
.pack-card.is-featured .pack-ico { background: rgba(255, 255, 255, .1); color: var(--white); }
.pack-card.is-featured .pack-vehicle { background: rgba(255, 255, 255, .07); border-left-color: var(--accent); }
.pack-card.is-featured .pack-list li { color: rgba(255, 255, 255, .9); }
.pack-card.is-featured .pack-list li::before { background-color: rgba(255, 255, 255, .1); background-image: var(--check-white); border-color: rgba(255, 255, 255, .25); }
.pack-card.is-featured .pack-example { border-color: rgba(255, 255, 255, .3); }
.pack-card.is-featured .text-link { color: var(--white); }
.pack-notes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: clamp(28px, 3vw, 40px); }
.pack-notes p { margin: 0; padding: 16px 18px; background: var(--paper); border: 1px solid var(--line); color: var(--text); font-size: 14.5px; }
.pack-notes strong { display: block; margin-bottom: 2px; color: var(--ink); font-size: 15px; }
.local-card .pack-ico { margin-bottom: 4px; }
.local-card .text-link { align-self: flex-start; margin-top: 6px; }

/* ---------- m³ calculator ---------- */
.calculator-workspace { background-color: var(--paper); background-image: var(--grid-light); background-size: 72px 72px; border-block: 1px solid var(--line); }
.calculator-layout { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(300px, .52fr); align-items: start; gap: clamp(28px, 4vw, 56px); }
.calculator-panel { padding: clamp(22px, 3.6vw, 40px); background: var(--white); border: 1px solid var(--line); border-top: 6px solid var(--accent); }
.inventory-toolbar { min-height: 48px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.inventory-toolbar h2 { margin-bottom: 6px; }
.inventory-toolbar p:not(.eyebrow) { margin: 0; color: var(--muted); }
.inventory-search { margin: 12px 0 18px; gap: 8px; }
.inventory-search > span:first-child { color: var(--ink); font-size: 14px; font-weight: 750; }
.inventory-search small { min-height: 18px; color: var(--muted); font-size: 12.5px; font-weight: 500; }
.search-field { position: relative; display: block; }
.search-field svg { position: absolute; z-index: 1; top: 50%; left: 15px; width: 20px; height: 20px; transform: translateY(-50%); color: var(--brand); pointer-events: none; }
.search-field input { padding-left: 46px; }
.inventory-group { margin-bottom: 10px; background: var(--white); border: 1px solid var(--line); }
.inventory-group summary { min-height: 72px; display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 12px 16px; background: var(--paper); color: var(--ink); font-weight: 750; cursor: pointer; list-style: none; }
.inventory-group summary::-webkit-details-marker { display: none; }
.inventory-group summary::after { content: "+"; color: var(--brand); font-size: 22px; font-weight: 600; }
.inventory-group[open] summary::after { content: "\2212"; }
.inventory-group[open] summary { box-shadow: inset 4px 0 0 var(--accent); }
.inventory-group summary:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; }
.inventory-group summary > span:nth-child(2) { display: grid; }
.inventory-group summary small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.inventory-group-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--white); border: 1px solid var(--line); color: var(--brand); }
.inventory-group-icon svg { width: 22px; height: 22px; }
.inventory-items { padding: 0 16px; border-top: 1px solid var(--line); }
.inventory-row { min-height: 70px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.inventory-row:last-child { border-bottom: 0; }
.inventory-row > div:first-child { display: grid; color: var(--ink); font-weight: 600; }
.inventory-row small { color: var(--muted); font-size: 12.5px; font-weight: 500; }
.quantity-control { display: grid; grid-template-columns: 44px 54px 44px; align-items: center; }
.quantity-control button, .quantity-control input { height: 44px; min-height: 44px; margin: 0; border: 1px solid var(--line-strong); text-align: center; }
.quantity-control button { padding: 0; background: var(--paper); color: var(--brand); font-size: 22px; line-height: 1; cursor: pointer; }
.quantity-control button:hover { background: var(--brand); border-color: var(--brand); color: var(--white); }
.quantity-control input { padding: 6px; border-inline: 0; -moz-appearance: textfield; font-weight: 750; }
.quantity-control input::-webkit-inner-spin-button, .quantity-control input::-webkit-outer-spin-button { margin: 0; appearance: none; }
.extra-volume { margin: 28px 0 0; padding-top: 22px; border-top: 1px solid var(--line); }
.extra-volume small { color: var(--muted); font-weight: 500; }
.field-with-unit { display: grid; grid-template-columns: minmax(0, 180px) auto; align-items: center; gap: 12px; }
.field-with-unit > span { color: var(--muted); }
.calculator-summary { position: sticky; top: 140px; padding: 28px; background: var(--brand-deep); background-image: var(--grid-dark); background-size: 48px 48px; color: var(--white); border-top: 6px solid var(--accent); box-shadow: var(--lift); }
.calculator-summary h2 { color: var(--white); font-size: 28px; }
.calculator-summary .eyebrow { color: #9fd3df; }
.calculator-summary > span, .calculator-summary > p { display: block; color: rgba(255, 255, 255, .78); }
.calculator-summary > p { margin: 20px 0; font-size: 14.5px; }
.calculator-summary .text-link { margin-top: 12px; color: var(--white); }
.m3-total { display: block; margin: 16px 0 8px; color: var(--white); font-size: clamp(46px, 5vw, 64px); font-weight: 800; font-stretch: 112%; line-height: 1; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.box-equivalent { margin-top: 20px; padding: 14px 16px; border: 1px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); }
.box-equivalent span, .box-equivalent strong { display: block; }
.box-equivalent span { color: rgba(255, 255, 255, .7); font-size: 12.5px; font-weight: 700; }
.box-equivalent strong { margin-top: 4px; color: var(--white); font-size: 15.5px; }
.m3-selection { margin-top: 16px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .18); }
.m3-selection > span { display: block; color: var(--accent); font-size: 12.5px; font-weight: 800; }
.m3-selection ul { list-style: none; display: grid; gap: 4px; max-height: 170px; margin: 8px 0 0; padding: 0; overflow: auto; scrollbar-gutter: stable; }
.m3-selection li { color: rgba(255, 255, 255, .88); font-size: 13.5px; line-height: 1.45; overflow-wrap: anywhere; }
.calculator-summary .button { width: 100%; margin-top: 8px; }
.box-tool-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .42fr); gap: 40px; align-items: stretch; }
.converter-stack { display: grid; gap: 16px; }
.box-converter { padding: 28px; background: var(--paper); border: 1px solid var(--line); border-top: 6px solid var(--accent); }
.box-converter h3 { margin-bottom: 18px; font-size: 24px; }
.box-converter label { margin-bottom: 12px; }
.box-converter-result { display: grid; gap: 4px; margin: 18px 0; padding: 16px; background: var(--brand-deep); color: var(--white); }
.box-converter-result span { color: rgba(255, 255, 255, .72); font-size: 12.5px; }
.box-converter-result strong { font-size: 24px; font-weight: 800; }
.dimension-fields { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 10px; }
.dimension-fields .field-with-unit { grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }

/* ---------- Interactive checklist ---------- */
.checklist-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .52fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.checklist-toolbar { position: sticky; top: 128px; z-index: 5; display: grid; gap: 14px; margin-bottom: 32px; padding: 16px 20px; background: var(--white); border: 1px solid var(--line); border-top: 4px solid var(--accent); box-shadow: var(--lift-sm); }
.cl-progress-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; }
#cl-percent { color: var(--brand-deep); font-size: 20px; font-weight: 800; }
#cl-count { color: var(--muted); font-size: 13.5px; font-weight: 600; }
.cl-progress-track { height: 8px; background: var(--brand-50); overflow: hidden; }
.cl-progress-bar { width: 0; height: 100%; background: var(--accent); transition: width .3s ease; }
.checklist-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.cl-group { margin-bottom: 40px; }
.cl-group-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.cl-num { width: 42px; height: 42px; flex: none; display: grid; place-items: center; background: var(--brand-deep); color: var(--white); font-weight: 800; font-size: 16px; }
.cl-group-head h2 { margin: 0; font-size: 21px; }
.cl-group-head p { margin: 2px 0 0; color: var(--muted); font-size: 13.5px; }
.cl-items { display: grid; gap: 6px; }
.cl-items-grid { grid-template-columns: 1fr 1fr; }
.cl-item { position: relative; display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 13px 15px; background: var(--white); border: 1px solid var(--line); font-weight: 500; cursor: pointer; transition: border-color .12s ease, background-color .12s ease; }
.cl-item:hover { border-color: var(--brand); background: var(--brand-50); }
.cl-item input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.cl-box { width: 22px; height: 22px; flex: none; margin-top: 1px; display: inline-grid; place-items: center; border: 2px solid var(--line-strong); background: var(--white); transition: background-color .12s ease, border-color .12s ease; }
.cl-box::after { content: ""; width: 6px; height: 11px; margin-top: -2px; border-right: 2.5px solid var(--white); border-bottom: 2.5px solid var(--white); transform: rotate(45deg) scale(0); transition: transform .12s ease; }
.cl-item input:checked ~ .cl-box, .cl-item.is-done .cl-box { background: var(--success); border-color: var(--success); }
.cl-item input:checked ~ .cl-box::after, .cl-item.is-done .cl-box::after { transform: rotate(45deg) scale(1); }
.cl-item input:focus-visible ~ .cl-box { outline: 3px solid var(--focus); outline-offset: 2px; }
.cl-text { color: var(--ink); font-size: 15px; line-height: 1.5; }
.cl-item.is-done .cl-text { color: var(--muted); text-decoration: line-through; }
.checklist-aside { position: sticky; top: 128px; display: grid; gap: 16px; }
.lead-magnet { padding: 28px; background: var(--brand-deep); background-image: var(--grid-dark); background-size: 48px 48px; color: var(--white); border-top: 6px solid var(--accent); }
.lead-magnet .eyebrow { color: #9fd3df; }
.lead-magnet h2 { margin: 0 0 8px; color: var(--white); font-size: 23px; }
.lead-magnet > p { color: rgba(255, 255, 255, .84); }
.lead-magnet label { display: block; margin: 12px 0 0; color: rgba(255, 255, 255, .92); }
.lead-magnet label > span { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 700; }
.lead-magnet input[type="email"], .lead-magnet input[type="text"] { border-color: transparent; }
.lead-magnet .consent { display: flex; gap: 10px; align-items: flex-start; }
.lead-magnet .consent input { width: 20px; min-height: 20px; margin-top: 2px; accent-color: var(--accent); }
.lead-magnet .consent span { color: rgba(255, 255, 255, .84); font-size: 13.5px; font-weight: 500; }
.lead-magnet .button { width: 100%; margin-top: 16px; }
.lead-magnet .success-state h2, .lead-magnet .success-state p { color: var(--white); }
.lead-magnet .success-state .eyebrow { color: var(--accent); }
.checklist-cta { padding: 26px; background: var(--paper); border: 1px solid var(--line); border-left: 6px solid var(--accent); }
.checklist-cta h2 { margin: 0 0 8px; font-size: 21px; }
.checklist-cta .contact-hooks { flex-direction: column; align-items: stretch; margin-top: 16px; }
.checklist-cta .contact-hooks .button { width: 100%; }

/* WordPress: the redesign has its own WhatsApp buttons; hide the old floating widget if it still renders. */
#ht-ctc-chat, .ht-ctc-chat, #wpconsent-consent-floating { display: none !important; }

/* ==================================================================
   Responsive: 1160 · 1060 (nav) · 820 (two columns to one) · 640 (phone) · 400
   ================================================================== */
@media (max-width: 1160px) {
  .header-phone span { display: none; }
  #site-nav > a, .nav-item > a { padding: 0 10px; font-size: 15px; }
  .brand-logo img { width: 190px; }
  .svc-card { padding-inline: 22px; }
  .svc-link { margin-inline: -22px; padding-left: 22px; }
}

@media (max-width: 1060px) {
  .menu-toggle { display: flex; }
  .nav-shell { min-height: 70px; gap: 12px; }
  #site-nav { position: absolute; z-index: 70; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; max-height: calc(100dvh - 120px); overflow: auto; padding: 8px var(--gutter) 22px; background: var(--white); border-top: 1px solid var(--line); box-shadow: var(--lift); }
  #site-nav.open { display: flex; }
  #site-nav > a, .nav-item > a { min-height: 54px; padding: 0; border-bottom: 1px solid var(--line); font-size: 17px; }
  #site-nav > a::after, .nav-item > a::after, .nav-caret { display: none; }
  .nav-item { flex-direction: column; }
  .nav-sub { position: static; min-width: 0; margin: 8px 0 6px; padding: 2px 0 4px 16px; visibility: visible; opacity: 1; transform: none; border: 0; border-left: 3px solid var(--accent); box-shadow: none; }
  .nav-sub a { padding: 9px 0; font-size: 15.5px; }
  .nav-sub a:hover { background: none; }
  .nav-sub .nav-sub-all { margin-top: 0; padding-top: 9px; border-top: 0; }
  .nav-mobile-contact { display: grid; gap: 8px; margin-top: 18px; }
  .nav-mobile-contact .button { width: 100%; }
  .header-cta { align-self: center; min-height: 44px; }

  .home-hero .hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .quick-card { max-width: 620px; }
  .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trust-item:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .trust-item:nth-child(2n) { border-right: 1px solid var(--line); }
  .footer-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-brand { grid-column: 1 / -1; }
  .process.process-four, .local-grid.local-grid-4, .definition-grid.definition-grid-four, .local-check-grid, .clear-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .price-packs { grid-template-columns: 1fr; max-width: 580px; margin-inline: auto; }
  .pack-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .pack-card.is-featured { margin: 0; }
  .terms-shell { grid-template-columns: 1fr; }
  .terms-shell > :not(.terms-toc), .terms-shell > .terms-toc { grid-column: 1; grid-row: auto; }
  .terms-toc { position: static; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
  .calculator-layout, .checklist-layout { grid-template-columns: 1fr; }
  .calculator-summary, .checklist-aside, .checklist-toolbar { position: static; }
  .box-tool-grid { grid-template-columns: 1fr; }
  .why-card { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
}

@media (max-width: 820px) {
  .utility-note { display: none; }
  .utility-inner { justify-content: center; }
  .section-heading, .collage-grid, .who-grid, .editorial-grid, .faq-grid, .content-grid, .service-hero-grid,
  .contact-band .shell, .cta-panel, .footer-lead-inner, .reviews-head, .why-card, .quote-info-grid, .area-block, .source-panel { grid-template-columns: 1fr; }
  .section-heading { gap: 12px; margin-bottom: 30px; }
  .faq-grid > div:first-child { position: static; }
  .faq-help { grid-template-columns: 1fr; }
  .faq-help .contact-hooks { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .reviews-head .review-platforms { grid-column: 1; grid-row: auto; margin-bottom: 24px; order: -1; }
  .reviews-head { display: flex; flex-direction: column; align-items: stretch; }
  .who-photo { order: -1; margin-right: 18px; }
  .service-aside { max-width: 560px; }
  .decision-card { margin: -48px 0 0 16px; max-width: none; }
  .why-photo { min-height: 240px; }
  .why-photo img { position: static; height: 240px; }
  .area-map { border-right: 0; border-bottom: 1px solid var(--line); }
  .route-scenario-grid, .definition-grid, .process, .definition-grid.definition-grid-four { grid-template-columns: 1fr; }
  .pack-notes { grid-template-columns: 1fr; }
  .home-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hero-steps { grid-template-columns: 1fr; border-top: 0; }
  .hero-steps li { padding: 14px 0; border-top: 1px solid rgba(255, 255, 255, .16); }
  .hero-steps li::before { display: none; }
  .collage { max-width: 620px; }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ba-grid { grid-template-columns: 1fr; }
  .ba-arrow { justify-self: center; transform: rotate(90deg); width: 44px; height: 44px; }

  .mobile-actions { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.15fr; padding-bottom: env(safe-area-inset-bottom); background: var(--white); box-shadow: 0 -12px 30px -18px rgba(0, 34, 44, .45); }
  .mobile-actions a { min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--white); font-size: 15px; font-weight: 750; text-decoration: none; }
  .mobile-actions .btn-icon { width: 19px; height: 19px; }
  .mobile-actions .call .btn-icon { fill: none; }
  .mobile-actions .wa { background: var(--wa); }
  .mobile-actions .call { background: var(--brand-deep); }
  .mobile-actions .quote { background: var(--accent); color: var(--accent-ink); }
  body { padding-bottom: calc(58px + env(safe-area-inset-bottom)); }
}

@media (max-width: 640px) {
  :root { --gutter: 16px; }
  body { font-size: 16.5px; }
  html { scroll-padding-top: 90px; }
  .utility { display: none; }
  .nav-shell { min-height: 64px; }
  .brand-logo img { width: 158px; }
  .header-cta { display: none; }
  .header-phone svg { width: 44px; height: 44px; padding: 11px; }
  .menu-toggle { width: 44px; height: 44px; }
  .home-hero h1 { font-size: clamp(36px, 10.4vw, 46px); }
  .home-hero .hero-grid { padding-block: 40px 28px; }
  .home-hero .hero-actions .button { width: 100%; }
  .home-hero::before { background: linear-gradient(180deg, rgba(0, 34, 44, .86) 0%, rgba(0, 34, 44, .74) 48%, rgba(0, 34, 44, .94) 100%); }
  .hero-media img { object-position: 70% 30%; }
  .quick-card { padding: 22px 18px; }
  .quick-card h2 { font-size: 23px; }
  .quick-tiles a { min-height: 54px; padding: 8px 10px; font-size: 14px; }
  .trust-band > .shell, .authority-band > .shell { width: 100%; }
  .trust-item { min-height: 0; padding: 16px 12px; flex-direction: column; justify-content: flex-start; gap: 8px; text-align: center; border-left: 0; border-right: 0; }
  .trust-item:nth-child(2n) { border-left: 1px solid var(--line); }
  .trust-item:last-child { border-right: 0; }
  .trust-item > div { justify-items: center; }
  .trust-item strong { font-size: 18px; justify-content: center; }
  .trust-item strong .stars { display: none; }
  .trust-logo { height: 18px; }
  .trust-ico { width: 36px; height: 36px; }
  .trust-ico svg { width: 19px; height: 19px; }
  .collage { grid-template-rows: repeat(5, 64px); gap: 8px; }
  .collage figcaption { display: none; }
  .collage-tile { padding: 14px 56px 14px 14px; }
  .collage-tile strong { font-size: 16px; }
  .collage-tile span { display: none; }
  .collage-tile svg { width: 24px; height: 24px; }
  .collage-tile i { width: 44px; height: 44px; }
  .svc-grid { grid-template-columns: 1fr; }
  .svc-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 6px 14px; min-height: 0; padding: 18px 16px 0; }
  .svc-ico { width: 44px; height: 44px; grid-row: span 2; }
  .svc-ico svg { width: 22px; height: 22px; }
  .svc-card h3 { margin: 0; font-size: 18px; align-self: center; }
  .svc-card p { font-size: 15px; }
  .svc-link { grid-column: 1 / -1; margin: 12px -16px 0; padding-left: 16px; min-height: 48px; }
  .svc-link span { width: 48px; }
  .video-band { min-height: 440px; padding-bottom: 96px; }
  .video-copy { padding-block: 56px 16px; }
  .play-sq { width: 64px; height: 64px; }
  .why-wrap { margin-top: -96px; }
  .why-copy { padding: 24px 18px; }
  .review-google-card { width: 290px; padding: 20px; }
  .platform-card { padding: 16px; }
  .area-map { display: none; }
  .area-list { padding: 20px 18px; }
  .footer-grid { gap: 28px 20px; padding-block: 44px 36px; }
  .footer-lead h2 { font-size: clamp(30px, 8.6vw, 38px); }
  .local-grid, .local-grid.local-grid-4, .local-check-grid, .process.process-four, .clear-steps, .timeline-grid { grid-template-columns: 1fr; }
  .journey li, .journey > article { flex-direction: column; gap: 12px; padding: 20px; }
  .field-grid, .dimension-fields { grid-template-columns: 1fr; }
  .facts { grid-template-columns: 1fr; }
  .cl-items-grid { grid-template-columns: 1fr; }
  .checklist-actions { flex-direction: column; align-items: stretch; }
  .checklist-actions .button, .checklist-actions .text-button { width: 100%; }
  .faq-list summary { padding-right: 54px; font-size: 16.5px; }
  .faq-list details > p, .faq-list details > div { padding-right: 0; }
  .faq-list summary::after { width: 36px; height: 36px; }
  .inner-hero::after, .quote-hero::after { width: 72px; height: 72px; }
  .service-photo::before, .who-photo::before { right: -10px; top: -10px; }
  .decision-card { margin: -36px 0 0 12px; padding: 20px; }
  .contact-photo { width: calc(100% + 40px); margin: -20px -20px 6px; }
  .side-note, .contact-card { padding: 20px; }
  .inventory-row { grid-template-columns: 1fr; gap: 8px; }
  .quantity-control { justify-self: start; }
  .contact-band .contact-hooks .button, .cta-panel .hero-actions .button, .inner-hero .hero-actions .button, .service-hero .hero-actions .button, .clear-hero .hero-actions .button { width: 100%; }
  .choice-tile { min-height: 96px; padding: 14px; }
  .home-tiles .choice-tile:last-child { grid-column: 1 / -1; min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .lead-step .form-actions .button { width: 100%; }
  .chip span { padding: 8px 14px; font-size: 14px; }
  .pack-price strong { font-size: 42px; }
  .text-link { min-height: 44px; }
  .who-proof a, .lead-proof a { display: inline-flex; align-items: center; min-height: 44px; }
  .region-link, .area-chips a, .source-links a, .contact-card > a:not(.button) { min-height: 44px; }
  .footer-grid a, .footer-legal a, .cookie-settings-link { display: flex; align-items: center; min-height: 44px; padding: 0; }
  .contact-card > a:not(.button) { display: flex; align-items: center; }
}

@media (min-width: 641px) {
  .home-tiles .choice-tile:last-child { grid-column: span 2; flex-direction: row; align-items: center; justify-content: flex-start; min-height: 0; }
}

@media (max-width: 400px) {
  .trust-item strong { font-size: 16.5px; }
  .trust-item span:not(.stars):not(.trust-ico) { font-size: 12.5px; }
  .quick-tiles a { font-size: 13.5px; gap: 8px; }
  .quick-tiles svg { width: 20px; height: 20px; }
  .mobile-actions a { font-size: 14px; gap: 6px; }
  .safe-tags li { font-size: 13.5px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .reviews-track { animation: none !important; }
  .reviews-reel { overflow-x: auto; mask-image: none; }
}

/* ---------- Print ---------- */
@media print {
  .site-header, .site-footer, .mobile-actions, .authority-band, .concept-bar, .skip-link, .video-band, .video-modal,
  .checklist-aside, .checklist-actions, .breadcrumbs { display: none !important; }
  body { padding: 0; background: #fff; color: #000; }
  .checklist-layout { display: block; }
  .checklist-toolbar { position: static; box-shadow: none; border: 0; padding: 0; margin-bottom: 16px; }
  .cl-item { break-inside: avoid; border: 0; padding: 4px 0; }
  .cl-box { border-color: #333; }
  .cl-group { break-inside: avoid; }
  .inner-hero, .checklist-hero { background: none; color: #000; }
  .inner-hero h1 { color: #000; }
}

/* ==================================================================
   QA pass (2026-10-14): fixes from the design + accessibility review
   ================================================================== */

/* Inputs read as typed text, not bold labels. */
input, select, textarea { font-weight: 400; }

/* Focus stays visible on dark surfaces. */
:is(.utility, .home-hero, .video-band, .site-footer, .contact-band, .reviews-google, .inner-hero, .quote-hero, .clear-hero, .lead-magnet, .calculator-summary, .decision-card, .pack-card.is-featured, .mobile-actions) :focus-visible { outline-color: #ffffff; }

/* Phone numbers never split across lines. */
a[href^="tel:"] { white-space: nowrap; }

/* Header: keep logo, nav, phone and CTA intact between 1061 and 1300px. */
.brand, .header-phone, .header-cta { flex: none; }
@media (max-width: 1300px) and (min-width: 1061px) {
  .header-phone span { display: none; }
  .brand-logo img { width: 184px; }
  #site-nav > a, .nav-item > a { padding: 0 9px; font-size: 15px; }
  .header-cta { padding: 0 20px; }
}
@media (max-width: 1060px) {
  .header-phone svg, .menu-toggle, .header-cta { width: auto; height: 44px; min-height: 44px; }
  .header-phone svg { width: 44px; padding: 11px; }
  .menu-toggle { width: 44px; }
  /* Mobile menu: full height below the header, above the bottom bar. */
  #site-nav { position: fixed; top: var(--hdr, 70px); bottom: 0; max-height: none; z-index: 80; }
}

/* Footer: logo plate, rating chip, contact column and bottom bar. */
.footer-grid .footer-logo { display: inline-block; padding: 12px 16px; }
.footer-grid .footer-rating { display: inline-flex; align-items: center; gap: 6px; }
.footer-grid .footer-rating .star-ico, .footer-grid .star-ico { display: inline; padding: 0; color: var(--accent); }
.footer-bottom-inner { padding-block: 14px; }
@media (max-width: 1100px) and (min-width: 641px) {
  .footer-lead-inner { grid-template-columns: 1fr; }
  .footer-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1060px) { .footer-brand p { max-width: 64ch; } }
@media (max-width: 640px) {
  .footer-grid > div:last-child { grid-column: 1 / -1; }
  .footer-legal { width: 100%; justify-content: space-between; }
}

/* Thank-you page: no second "request a quote" push right after a request. */
.page-bedankt .footer-lead, .page-bedankt .mobile-actions .quote { display: none; }
.page-bedankt .mobile-actions { grid-template-columns: 1fr 1fr; }
/* Pages that already end with a dark contact band skip the duplicate footer CTA. */
body:has(main .contact-band) .footer-lead { display: none; }

/* Dark inner heroes: content lines up with the rest of the page; the orange corner mark
   only shows where it cannot touch text. */
.inner-hero > .shell.narrow, .quote-hero > .shell.narrow { max-width: var(--shell); }
.inner-hero .lead, .quote-hero .lead { max-width: 64ch; }
.inner-hero > .shell, .quote-hero > .shell { padding-right: 180px; }
@media (max-width: 1060px) {
  .inner-hero::after, .quote-hero::after { display: none; }
  .inner-hero > .shell, .quote-hero > .shell { padding-right: 0; }
}

/* Home hero: one column below 1060px needs the vertical overlay. */
@media (max-width: 1060px) {
  .home-hero::before { background: linear-gradient(180deg, rgba(0, 34, 44, .88) 0%, rgba(0, 34, 44, .78) 50%, rgba(0, 34, 44, .94) 100%); }
  .quick-card, .collage { max-width: none; }
}
@media (max-width: 1060px) and (min-width: 641px) { .quick-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Safety tags: compact enough to stay on one row in hero columns; 2 x 2 on phones. */
.safe-tags { gap: 6px; }
.safe-tags li { padding: 5px 10px 5px 5px; font-size: 13.5px; gap: 7px; }
@media (max-width: 640px) {
  .safe-tags { display: grid; grid-template-columns: 1fr 1fr; }
  .safe-tags li { min-width: 0; }
}

/* Step numbers (01, 02...) as orange square marks: readable (AA) and on-system. */
.route-scenario-card > span, .definition-grid > article > span, .local-check-card > span { align-self: flex-start; padding: 3px 8px; background: var(--accent); color: var(--accent-ink); font-size: 14px; line-height: 1.3; }
.terms-list li::marker { color: var(--brand); }

/* Section rhythm: two white sections in a row share one padding. */
:is(.section.shell, .faq-section:not(.soft), .cta-section, .collage-section) + :is(.section.shell, .faq-section:not(.soft), .cta-section) { padding-top: 0; }
:is(.soft, .local-guide) + :is(.soft, .local-guide) { padding-top: calc(var(--section) * .6); border-top: 1px solid var(--line); }

/* Readable measures. */
.faq-list details > p, .faq-list details > div { max-width: 72ch; }
.terms-card > p, .terms-card > ol, .terms-card > ul { max-width: 78ch; }
.tips-list span { max-width: 75ch; }
.section-heading > p .text-link { display: inline; margin: 0; }

/* Reviews: rating cards fill the column on tablets/phones; touch users can swipe the reel. */
@media (max-width: 820px) { .reviews-head .review-platforms { align-self: stretch; } }
@media (hover: none) {
  .reviews-track { animation: none; }
  .reviews-reel { overflow-x: auto; scroll-snap-type: x mandatory; mask-image: none; padding-bottom: 6px; }
  .review-google-card { scroll-snap-align: start; }
  .review-google-card[aria-hidden="true"] { display: none; }
}
@media (prefers-reduced-motion: reduce) { .review-google-card[aria-hidden="true"] { display: none; } }

/* Service area: map fills the full height next to the town list. */
.area-block { align-items: stretch; }
.area-map { aspect-ratio: auto; min-height: 300px; }
@media (max-width: 820px) { .area-map { min-height: 0; aspect-ratio: 2 / 1; } }
@media (max-width: 640px) {
  .area-chips li { flex: 1 1 100%; }
  .area-chips a { width: 100%; }
  .who-proof a { flex: 1 1 100%; }
}

/* Video play button: a crisp square ring instead of a soft glow. */
.play-sq { box-shadow: none; outline: 1px solid rgba(255, 255, 255, .55); outline-offset: 7px; }
.video-play:hover .play-sq { box-shadow: none; outline-offset: 10px; }


/* Collage tile on phones. */
@media (max-width: 640px) { .collage-tile { padding-right: 48px; } .collage-tile strong { font-size: 15px; } }

/* Legal pages: no empty grid rows, chip TOC when stacked. */
.terms-card .cookie-settings-link { color: var(--brand); font-weight: 700; }
@media (max-width: 1060px) {
  .terms-toc { display: block; columns: 2; column-gap: 24px; margin-bottom: 16px; }
  .terms-toc > strong { display: block; column-span: all; margin-bottom: 10px; }
  .terms-toc a { break-inside: avoid; margin-bottom: 2px; }
}
@media (max-width: 640px) { .terms-toc { columns: 1; } }
@media (max-width: 640px) { .terms-help .contact-hooks .button { width: 100%; } }

/* Conversion pages. */
@media (max-width: 1060px) {
  .price-packs { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: none; }
  .pack-card { border-right: 1px solid var(--line); border-bottom: 0; }
  .pack-card.is-featured { margin: -14px 0; }
}
@media (max-width: 900px) {
  .price-packs { grid-template-columns: 1fr; max-width: 640px; margin-inline: auto; }
  .pack-card { border-right: 0; border-bottom: 1px solid var(--line); }
  .pack-card.is-featured { margin: 0; }
}
.pack-card.is-featured .pack-head { margin-top: 0; }
.lead-more summary { position: relative; padding-right: 52px; }
.lead-more summary::after { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); margin: 0; }
.lead-back { min-height: 44px; }
.facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.card-number:has(.rg-src-logo) { width: auto; padding: 0 14px; background: var(--white); border: 1px solid var(--line); }
.card-number .rg-src-logo { height: 15px; }
.journey:has(> article) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.journey > article .eyebrow { color: var(--brand); margin-bottom: 8px; }
@media (max-width: 820px) { .journey:has(> article) { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .contact-hooks .button, .reviews-cta .button, .inline-actions .button, .success-state .button { width: 100%; }
  .chip-row .chip { flex: 1 1 calc(50% - 4px); }
  .chip-row .chip span { width: 100%; justify-content: center; }
}

/* Service and town heroes: main CTA orange, calmer H1, compact stacked photo. */
.service-hero .hero-actions > .button:first-child:not(.button-secondary):not(.button-whatsapp):not(.button-gold) { --bg: var(--accent); --bd: var(--accent); --fg: var(--accent-ink); }
.service-hero .hero-actions > .button:first-child:not(.button-secondary):not(.button-whatsapp):not(.button-gold):hover { --bg: var(--accent-strong); --bd: var(--accent-strong); }
.service-hero h1 { font-size: clamp(32px, 4vw, 54px); }
@media (max-width: 820px) {
  .service-aside { max-width: none; }
  .service-photo img { aspect-ratio: 16 / 10; }
  .map-rings { aspect-ratio: 16 / 7; }
  .process > li { flex-direction: row; gap: 16px; }
}
.faq-grid h2 { font-size: clamp(26px, 2.6vw, 36px); }
.local-grid { display: flex; flex-wrap: wrap; }
.local-grid > * { flex: 1 1 260px; }
.region-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.region-link { justify-content: space-between; }
.region-link::after { content: "\2192"; color: var(--brand); }
@media (max-width: 640px) { .ba-grid { grid-template-columns: 1fr; } }
@media (max-width: 820px) and (min-width: 641px) {
  .ba-grid { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); }
  .ba-arrow { transform: none; }
}
.contact-card > a:not(.button) { text-decoration: underline; text-underline-offset: 4px; }

/* Guides and tools. */
.calculator-summary .button:not(.button-whatsapp) { --bg: var(--accent); --bd: var(--accent); --fg: var(--accent-ink); }
.calculator-summary .button:not(.button-whatsapp):hover { --bg: var(--accent-strong); --bd: var(--accent-strong); }
@media (max-height: 1050px) { .checklist-aside { position: static; } }
.checklist-toolbar { top: 116px; }
.dimension-fields { grid-template-columns: 1fr; }
.box-tool-grid { align-items: start; }
.source-panel { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.section:not(.shell) > .source-panel, .section:not(.shell) > .compact-source { width: min(calc(100% - var(--gutter) * 2), var(--shell)); }
.section.shell > .source-panel, .section.shell > .compact-source { width: auto; }
.lead-magnet .privacy-note { color: rgba(255, 255, 255, .78); }
.lead-magnet .privacy-note a { color: var(--white); }
.field-note { margin-top: 10px; }
.article-meta span::before { content: ""; display: inline-block; width: 6px; height: 6px; margin: 0 10px 2px 0; background: var(--accent); }
@media (max-width: 640px) {
  .inventory-toolbar { flex-wrap: wrap; }
  .calculator-panel { padding: 18px 14px; }
  .inventory-items { padding: 0 12px; }
}
/* Hero action rows fill evenly when three buttons wrap. */
.service-hero .hero-actions .button { flex: 1 1 auto; padding-inline: 18px; }

/* ---- QA pass 2: verifier-corrected fixes ---- */
/* Focus: white ring on dark, but the white quick-start card keeps the blue ring; the bottom bar draws it inside. */
.home-hero .quick-card :focus-visible { outline-color: var(--focus); }
.mobile-actions a:focus-visible { outline: 3px solid var(--white); outline-offset: -6px; }
.mobile-actions .quote:focus-visible { outline-color: var(--accent-ink); }
/* Header tiers so nothing squeezes between 1061 and 1300px. */
.nav-shell { gap: 18px; }
.brand, .header-phone, .header-phone svg, .header-cta, .nav-caret { flex-shrink: 0; }
@media (min-width: 1061px) and (max-width: 1160px) {
  .nav-shell { gap: 14px; }
  #site-nav > a, .nav-item > a { padding: 0 8px; font-size: 14.5px; }
  .header-cta { padding: 0 18px; }
  .brand-logo img { width: 176px; }
}
@media (max-width: 1060px) { .nav-shell { gap: 12px; } }
/* Reviews header on tablets/phones: intro, then the rating cards, then the buttons. */
@media (max-width: 820px) {
  .reviews-head .review-platforms { align-self: stretch; order: 1; margin: 4px 0 20px; }
  .reviews-head .reviews-cta { order: 2; }
}
@media (max-width: 640px) { .reviews-head .review-platforms { grid-template-columns: 1fr 1fr; gap: 8px; } }
/* Collage tile on small phones: arrow top right, title on one line. */
@media (max-width: 640px) { .collage-tile { padding: 14px; } .collage-tile i { top: 0; bottom: auto; } }
/* Footer CTA stacks until the four tags fit on one row. */
@media (max-width: 1120px) and (min-width: 641px) {
  .footer-lead-inner { grid-template-columns: 1fr; }
  .footer-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.footer-bottom-inner { padding-block: 16px; }
@media (max-width: 640px) {
  .footer-bottom-inner { flex-direction: column; align-items: flex-start; gap: 4px; }
  .footer-legal { gap: 0 20px; justify-content: flex-start; }
  .footer-legal a, .footer-legal .cookie-settings-link { display: inline-flex; align-items: center; min-height: 44px; }
}
/* Region links: an even grid, a last odd link spans two cells. */
.region-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.region-grid .region-link:last-child:nth-child(odd) { grid-column: span 2; }
@media (max-width: 1060px) { .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .region-grid { grid-template-columns: 1fr; } .region-grid .region-link:last-child:nth-child(odd) { grid-column: auto; } }
/* Official source links as equal rows. */
.source-links { display: grid; gap: 8px; }
.source-links a { justify-content: space-between; min-height: 44px; }
/* Forms and buttons on phones. */
.lead-fields > .form-error { margin: 0 0 16px; }
@media (max-width: 640px) {
  .chip-row .chip span { height: 100%; text-align: center; }
  .section .hero-actions .button { width: 100%; }
}
.card-number:has(.rg-src-logo) { align-self: flex-start; }
.journey > article .text-link { margin-top: 12px; }
.check-list + .button { margin-top: 24px; }
/* m³ tool: converters side by side under the steps; numbered grids without orphans. */
.box-tool-grid { grid-template-columns: 1fr; gap: 24px; }
.converter-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dimension-fields input { padding-inline: 10px; }
@media (min-width: 641px) { .dimension-fields { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 820px) { .converter-stack { grid-template-columns: 1fr; } }
.process.process-four { display: grid; }
@media (min-width: 1061px) {
  .process.process-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .process.process-four:has(> li:nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .process.process-four:has(> li:nth-child(6):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 1060px) {
  .process.process-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .process.process-four > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 640px) { .process.process-four { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .inventory-row { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; }
  .quantity-control { grid-template-columns: 44px 48px 44px; justify-self: end; }
}
/* Running m³ total stays in view on tablets and phones. */
.m3-mini { display: none; }
@media (max-width: 1060px) {
  .m3-mini { position: sticky; bottom: 0; z-index: 4; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px calc(-1 * clamp(22px, 3.6vw, 40px)) calc(-1 * clamp(22px, 3.6vw, 40px)); padding: 12px 18px; background: var(--brand-deep); border-top: 4px solid var(--accent); color: var(--white); font-size: 14.5px; font-weight: 700; text-decoration: none; }
  .m3-mini:hover { color: var(--white); }
  .m3-mini strong { font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }
}
@media (max-width: 820px) { .m3-mini { bottom: calc(58px + env(safe-area-inset-bottom)); } }
@media (max-width: 640px) { .m3-mini { margin: 20px -14px -18px; } }
/* Pages and heroes. */
.compare-shell { max-width: var(--shell); }
.compare-shell > * { max-width: 900px; }
@media (min-width: 1061px) {
  .terms-shell { row-gap: 0; }
  .terms-shell > .terms-card + .terms-card, .terms-shell > .privacy-updated { margin-top: 16px; }
}
@media (min-width: 1061px) and (max-width: 1279px) { .service-hero .safe-tags { display: grid; grid-template-columns: repeat(2, max-content); } }
@media (max-width: 400px) { .service-hero h1 { font-size: 31px; font-stretch: 100%; letter-spacing: -.02em; } }
.ba-grid { align-items: stretch; }
.ba-arrow { align-self: center; }
/* Ontruiming hero: the photo is a CSS background, so phones get the smaller file here. */
@media (max-width: 820px) { .clear-hero { background-image: url("assets/real-moving-sofa-480.webp"); } }

/* ==================================================================
   UX review round 2 (2026-10-14): verified fixes from six reviewer
   groups, merged and deduplicated. Each block names the finding ids it
   implements. Markup changes live in scripts/apply_ux_round2_1014.py and
   scripts/apply_squares_1014.py; behaviour in app.js.
   ================================================================== */

/* ---------- Header and chrome ---------- */
/* chrome-09: from 641px the dark utility row scrolls away; only the nav row stays sticky (71px / 79px). */
@media (min-width: 641px) {
  .site-header { top: -38px; }
  html { scroll-padding-top: 96px; }
}
@media (min-width: 1061px) {
  .faq-grid > div:first-child, .terms-toc, .calculator-summary, .checklist-aside { top: 104px; }
  .checklist-toolbar { top: 78px; }
}
/* chrome-04: WhatsApp link in the utility row. Its 960px rule replaces chrome-09's 860px one. */
.utility-wa { gap: 7px; }
.utility-wa-ico { width: 15px; height: 15px; flex: none; fill: currentColor; }
@media (max-width: 960px) { .utility-note { display: none; } .utility-inner { justify-content: center; } }

/* chrome-02 + SM-05 (merged): the open menu ends above the WhatsApp / Bellen / Offerte bar, so the bar
   stays usable (app.js closes the menu when the bar is tapped). 821-1060px (no bar): the menu's own
   Offerte / WhatsApp / Bel row is pinned to its bottom edge. */
@media (max-width: 820px) {
  #site-nav { bottom: calc(58px + env(safe-area-inset-bottom)); padding-bottom: 16px; box-shadow: none; border-bottom: 1px solid var(--line); }
  .nav-mobile-contact { display: none; }
}
@media (min-width: 821px) and (max-width: 1060px) {
  #site-nav { padding-bottom: 0; }
  .nav-mobile-contact { position: sticky; bottom: 0; z-index: 1; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px calc(var(--gutter) * -1) 0; padding: 12px var(--gutter); background: var(--white); border-top: 1px solid var(--line); box-shadow: 0 -14px 24px -20px rgba(0, 34, 44, .45); }
  /* chrome-04: Offerte, WhatsApp and Bel as three equal buttons. */
  #site-nav .nav-mobile-contact { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 370px) and (max-width: 1060px) {
  .nav-sub { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .nav-sub a { display: flex; align-items: center; min-height: 44px; padding-block: 6px; line-height: 1.25; }
  .nav-sub .nav-sub-all { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1060px) { .nav-sub { column-gap: 32px; max-width: 640px; } }
@media (max-width: 1060px) {
  /* The desktop dropdown's z-index would paint the list over the pinned contact row. */
  .nav-sub { z-index: auto; }
  #site-nav > a[aria-current="page"]::before, #site-nav .nav-item > a[aria-current="page"]::before { content: ""; width: 8px; height: 8px; margin-right: 10px; flex: none; background: var(--accent); }
}

/* F5 + SM-04 (merged): on the quote page the footer "request a quote" band and the bar's Offerte tab
   would only reload the form. The bar keeps WhatsApp and Bellen (as on bedankt). */
body:has(#quote-form) .footer-lead { display: none; }
body:has(#quote-form) .mobile-actions { grid-template-columns: 1fr 1fr; }
body:has(#quote-form) .mobile-actions .quote { display: none; }

/* cards-01 (fallback): a page whose contact band is not the last block of main keeps the footer CTA,
   so it never ends without one. Inert once the band is moved to the end (apply_ux_round2_1014.py). */
body:not(.page-bedankt):has(main .contact-band):not(:has(main > .contact-band:last-child)) .footer-lead { display: block; }

/* chrome-05 (via app.js body.is-typing): while a text field has focus the bottom bar steps aside, so it
   never covers the field. app.js removes the class 0.4s after the field loses focus, so a tap that
   blurs the field still lands where the finger was (the reason F2 dropped its pure-CSS :focus version). */
body.is-typing .mobile-actions { display: none; }
body.is-typing .m3-mini { bottom: 0; }
body.is-typing .quote-form.is-stepped .lead-step .form-actions { bottom: 0; }
body.is-typing .quote-form.is-stepped .step-error:not([hidden]) { bottom: 83px; }
@media (max-width: 640px) { body.is-typing .quote-form.is-stepped .step-error:not([hidden]) { bottom: 79px; } }

/* ---------- Long Dutch words on small phones ---------- */
/* chrome-06 + heroes-O + cards-08 + SM-09 (merged): one-column grids may shrink below their longest word,
   and the base H1/H2 minimums scale with the screen. Sizes from chrome-06 (verified together with the
   two soft hyphens); overflow-wrap: break-word only breaks a word that cannot fit. hyphens:auto (heroes-O)
   is left out: it would hyphenate every heading on real phones. */
@media (max-width: 820px) {
  .section-heading, .collage-grid, .who-grid, .editorial-grid, .faq-grid, .content-grid, .service-hero-grid,
  .contact-band .shell, .cta-panel, .footer-lead-inner, .why-card, .quote-info-grid, .area-block { grid-template-columns: minmax(0, 1fr); }
  .process > li > div { min-width: 0; }
}
@media (max-width: 640px) { .process.process-four { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 400px) {
  h1 { font-size: min(34px, 9vw); }
  h2 { font-size: min(30px, 7.6vw); }
  h1, h2, h3 { overflow-wrap: break-word; }
  /* cards-08: terms cards and TOC stay inside the 288px column. */
  .terms-card { padding: 20px 16px; }
  .terms-card-head { gap: 12px; }
}

/* ---------- Heroes ---------- */
/* heroes-G + space-03 (merged): ontruiming hero, calls to action directly under the intro; the safety tags
   and the three promises follow. From 821px the promises run in one row (space-03). */
.clear-hero-inner { display: flex; flex-direction: column; padding-block: clamp(32px, 5vw, 72px); }
.clear-hero-inner > * { margin-top: 0; margin-bottom: 0; }
.clear-hero-inner > .breadcrumbs { margin-bottom: 16px; }
.clear-hero-inner > .rating-pill { align-self: flex-start; }
.clear-hero h1 { max-width: 22ch; margin: 16px 0; font-size: clamp(31px, 4.2vw, 56px); }
.clear-hero .lead { max-width: 64ch; }
.clear-hero-inner > .hero-actions { order: 1; margin-top: 26px; }
.clear-hero-inner > .safe-tags { order: 2; margin-top: 18px; }
.clear-hero-inner > .clear-checks { order: 3; margin-top: 22px; }
@media (min-width: 821px) { .clear-checks { display: flex; flex-wrap: wrap; gap: 10px 24px; } }

/* heroes-A: phone heroes, compact top so headline, main CTA and safety tags share the first screen. */
@media (max-width: 640px) {
  .service-hero > .shell, .service-hero > .shell.service-hero-grid, .inner-hero > .shell, .quote-hero > .shell, .quote-hero.compact > .shell, .clear-hero-inner { padding-top: 20px; }
  .home-hero .hero-grid { padding-top: 26px; }
  .home-hero .h1-kicker { margin-bottom: 14px; }
  :is(.service-hero, .inner-hero, .quote-hero, .clear-hero) .breadcrumbs { flex-wrap: nowrap; gap: 8px; margin-bottom: 12px; font-size: 13px; white-space: nowrap; }
  :is(.service-hero, .inner-hero, .quote-hero, .clear-hero) .breadcrumbs > span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  :is(.service-hero, .inner-hero, .quote-hero, .clear-hero) .eyebrow { margin-bottom: 10px; }
  :is(.home-hero, .service-hero, .inner-hero, .quote-hero, .clear-hero) .lead { font-size: 16.5px; line-height: 1.55; }
}
@media (max-width: 400px) {
  :is(.inner-hero, .quote-hero, .clear-hero) h1 { font-size: 31px; font-stretch: 100%; letter-spacing: -.02em; }
}
/* Integration (heroes-A): on the smallest phones a slightly tighter trail keeps the longest town crumbs
   ("Verhuisbedrijf Nieuwegein") whole; the ellipsis above stays as a safety net. */
@media (max-width: 359px) {
  :is(.service-hero, .inner-hero, .quote-hero, .clear-hero) .breadcrumbs { gap: 4px; font-size: 12.5px; }
}

/* heroes-B: phone heroes, safety tags directly under the main CTA; secondary buttons follow. */
@media (max-width: 640px) {
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) { display: flex; flex-direction: column; gap: 12px; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > * { margin-top: 0; margin-bottom: 0; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > .hero-actions { display: contents; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > .hero-actions > .button:first-child { margin-top: 8px; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > .safe-tags { order: 1; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > .hero-actions > .button:not(:first-child) { order: 2; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > .hero-actions > .button:nth-child(2) { margin-top: 4px; }
  :is(.home-hero .hero-copy, .service-hero-grid > div:first-child, .inner-hero > .shell, .clear-hero-inner):has(> .hero-actions) > .safe-tags ~ *, .clear-hero-inner > .clear-checks { order: 3; }
  .clear-hero-inner > .rating-pill { align-self: flex-start; }
}
/* F8 (merged with heroes-B): the homepage hero keeps its orange CTA, but drops the WhatsApp and Bel
   buttons wherever the bottom bar shows them, so the quick-start tiles move up into the first screen. */
@media (max-width: 820px) {
  .home-hero .hero-actions .button-whatsapp, .home-hero .hero-actions .button-on-dark { display: none; }
}

/* heroes-C: safety tags on phones in two content-sized columns, no label breaks over two lines. */
@media (max-width: 640px) {
  .safe-tags { display: grid; grid-template-columns: repeat(2, auto); gap: 6px; }
  .safe-tags li { min-height: 32px; padding: 4px 8px 4px 4px; gap: 6px; font-size: 13px; }
  .safe-tags li::before { width: 18px; height: 18px; background-size: 11px; }
}
@media (max-width: 359px) {
  .safe-tags { display: flex; flex-wrap: wrap; }
  .safe-tags li { flex: 1 1 auto; padding: 3px 6px 3px 3px; gap: 5px; font-size: 12.5px; }
  .safe-tags li::before { width: 16px; height: 16px; background-size: 10px; }
}

/* heroes-D (+ chrome-03 CSS, same rule): service and town heroes from 821px, copy starts at the top,
   wider copy column, photo no taller than the copy. chrome-03's breadcrumb markup is in the script. */
@media (min-width: 821px) {
  .service-hero > .shell, .service-hero > .shell.service-hero-grid { padding-block: clamp(32px, 3.6vw, 56px); }
  .service-hero-grid { grid-template-columns: minmax(0, 1.2fr) minmax(300px, .8fr); gap: 40px 56px; align-items: start; }
  .service-hero-grid > .service-aside { margin-top: 12px; }
  .service-photo img { aspect-ratio: 4 / 3; }
  .service-aside:not(:has(.decision-card)) .service-photo img { aspect-ratio: 4 / 3.6; }
  .service-hero h1 { font-size: clamp(32px, 3.7vw, 52px); max-width: 22ch; }
}
@media (min-width: 821px) and (max-width: 1060px) { .service-hero .safe-tags { display: grid; grid-template-columns: repeat(2, max-content); } }

/* heroes-F + F4 (merged): quote page. From 641px the form card overlaps the bottom of the dark hero
   (heroes-F); on phones the form runs full width right under a compact hero (F4). */
.quote-hero.compact > .shell { padding-top: clamp(24px, 3.4vw, 48px); padding-bottom: clamp(56px, 5vw, 72px); }
.quote-hero.compact + .quote-workspace { padding-top: 0; }
.quote-hero.compact + .quote-workspace .quote-form { margin-top: clamp(-40px, -2.8vw, -28px); }
.quote-hero .breadcrumbs { margin-bottom: 14px; }
.quote-hero .lead { margin-bottom: 0; }
/* heroes-F hid the orange corner mark at 1061-1199px, where the card ran into it. With space-05 the aside
   overlaps the hero from 1200px as well, so the mark goes on every width where it would show. */
@media (min-width: 1061px) { .quote-hero.compact::after { display: none; } }

/* heroes-E: short laptop screens (1061px+ wide, at most 820px tall). After D and F (same selectors). */
@media (min-width: 1061px) and (max-height: 820px) {
  .home-hero .hero-grid { padding-block: 44px 36px; }
  .home-hero h1 { font-size: clamp(42px, 4.8vw, 66px); }
  .home-hero .h1-kicker { margin-bottom: 14px; }
  .home-hero .hero-actions { margin-top: 24px; }
  .inner-hero > .shell { padding-block: 52px; }
  .quote-hero.compact > .shell { padding-top: 28px; }
  .service-hero > .shell, .service-hero > .shell.service-hero-grid { padding-block: 28px 44px; }
  .service-hero h1 { font-size: clamp(32px, 3.5vw, 48px); }
  /* Integration (E + G): the ontruiming hero gets the same short-screen tier, so its buttons clear the fold. */
  .clear-hero-inner { padding-block: 40px 56px; }
  .clear-hero h1 { font-size: clamp(31px, 3.6vw, 48px); }
}

/* heroes-H: tablet portrait, photo and the dark checklist card side by side instead of stacked. */
@media (min-width: 641px) and (max-width: 820px) {
  .service-aside:has(.decision-card) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .service-aside:has(.decision-card) .service-photo { min-height: 260px; margin: 0; }
  .service-aside:has(.decision-card) .service-photo img { position: absolute; inset: 0; height: 100%; aspect-ratio: auto; }
  .service-aside:has(.decision-card) .decision-card { margin: 0; align-self: stretch; }
  .service-aside:has(.decision-card) .service-photo::before { display: none; }
  .service-aside:has(.decision-card)::before { content: ""; position: absolute; z-index: -1; right: -16px; top: -16px; width: 42%; height: 42%; background: var(--accent); }
}

/* heroes-I: ontruiming hero on desktop, the whole portrait photo at hero height on the right. */
@media (min-width: 1061px) {
  .clear-hero { background: linear-gradient(90deg, var(--brand-900) calc(100% - 540px), rgba(0, 34, 44, 0) calc(100% - 280px)), url("assets/real-moving-sofa.webp") right 38% / auto 100% no-repeat, var(--brand-900); }
  .clear-hero::before { background: linear-gradient(95deg, rgba(0, 34, 44, .96) 0%, rgba(0, 34, 44, .82) 52%, rgba(0, 34, 44, .25) 100%); }
}

/* space-11: dark inner heroes on wide screens, the four promises become a checklist card in the empty right column. */
@media (min-width: 1200px) {
  .inner-hero > .shell:has(> .safe-tags) { display: grid; grid-template-columns: minmax(0, 1fr) 248px; column-gap: 32px; align-content: start; padding-right: 0; }
  .inner-hero > .shell:has(> .safe-tags) > * { grid-column: 1; }
  .inner-hero > .shell:has(> .safe-tags) > .lead { margin-bottom: 0; }
  .inner-hero > .shell > .safe-tags { grid-column: 2; grid-row: 1 / span 8; align-self: start; display: grid; gap: 0; margin: 0; padding: 18px 20px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); border-top: 4px solid var(--accent); }
  .inner-hero > .shell > .safe-tags li { min-height: 46px; padding: 8px 0; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .12); background: none; font-size: 15px; }
  .inner-hero > .shell > .safe-tags li:last-child { border-bottom: 0; }
}

/* space-04: the home quick-start card stays beside the copy on landscape tablets and small laptops. */
@media (min-width: 900px) and (max-width: 1060px) {
  .home-hero .hero-grid { grid-template-columns: minmax(0, 1fr) minmax(300px, 340px); gap: 32px 36px; }
  .home-hero::before { background: linear-gradient(90deg, rgba(0, 34, 44, .95) 0%, rgba(0, 34, 44, .86) 45%, rgba(0, 34, 44, .5) 78%, rgba(0, 34, 44, .35) 100%), linear-gradient(0deg, rgba(0, 34, 44, .92) 0%, rgba(0, 34, 44, 0) 38%); }
  .home-hero h1 { font-size: clamp(42px, 5.6vw, 58px); }
  .home-hero .hero-actions .button { flex: 1 1 auto; }
  .home-hero .safe-tags { display: grid; grid-template-columns: repeat(2, max-content); }
  .home-hero .quick-tiles { grid-template-columns: 1fr 1fr; }
}

/* ---------- Quote form (offerte) ---------- */
/* F2: the step button stays pinned at the bottom of the screen while the step is in view (above the bar
   on phones); a step-1 error sits right above it and the unchosen tiles turn red. */
.quote-form.is-stepped .lead-step .form-actions { position: sticky; bottom: 0; z-index: 4; margin: 20px calc(-1 * clamp(24px, 4vw, 48px)) 0; padding: 12px clamp(24px, 4vw, 48px); background: var(--white); border-top: 1px solid var(--line); }
.quote-form.is-stepped .step-error:not([hidden]) { position: sticky; z-index: 4; bottom: 83px; }
.lead-step:has(.step-error:not([hidden])) .choice-tile:not(:has(input:checked)) { border-color: var(--error); }
html:has(.quote-form.is-stepped) { scroll-padding-bottom: 100px; }
@media (max-width: 820px) {
  .quote-form.is-stepped .lead-step .form-actions { bottom: calc(58px + env(safe-area-inset-bottom)); }
  .quote-form.is-stepped .step-error:not([hidden]) { bottom: calc(141px + env(safe-area-inset-bottom)); }
  html:has(.quote-form.is-stepped) { scroll-padding-bottom: calc(150px + env(safe-area-inset-bottom)); }
}

/* F6: the step-2 error shows above the fields; the focused field leaves room for it. */
.lead-fields > .form-error { order: -1; }
.lead-fields:has(> .form-error:not([hidden])) [name="phone"] { scroll-margin-top: 200px; }
.lead-fields:has(> .form-error:not([hidden])) [name="email"] { scroll-margin-top: 200px; }
@media (max-width: 640px) { .lead-fields:has(> .form-error:not([hidden])) [name="email"] { scroll-margin-top: 300px; } }

/* F3 (SM-03 merged, dropped): the step-1 choices as compact rows, icon beside the label; the check
   replaces the icon. Two columns on phones (258px instead of SM-03's 440px one-column list). */
.choice-tile, .home-tiles .choice-tile:last-child { min-height: 64px; flex-direction: row; align-items: center; justify-content: flex-start; gap: 12px; padding: 10px 12px; }
.choice-ico { flex: none; width: 38px; height: 38px; }
.choice-ico svg { width: 20px; height: 20px; }
.choice-tile:has(input:checked)::after { top: 50%; left: 12px; right: auto; width: 38px; height: 38px; transform: translateY(-50%); background-size: 18px; }
@media (max-width: 820px) { .home-tiles { gap: 6px; } .lead-q { margin: 20px 0 8px; } }
@media (max-width: 640px) {
  .choice-tile, .home-tiles .choice-tile:last-child { min-height: 60px; gap: 10px; padding: 8px; }
  .choice-ico { width: 34px; height: 34px; }
  .choice-text { font-size: 14px; }
  .choice-tile:has(input:checked)::after { left: 8px; width: 34px; height: 34px; background-size: 16px; }
}
@media (max-width: 359px) {
  .choice-ico { display: none; }
  .choice-tile, .home-tiles .choice-tile:last-child { padding: 8px 26px 8px 10px; }
  .choice-tile:has(input:checked)::after { top: 5px; right: 5px; left: auto; width: 18px; height: 18px; transform: none; background-size: 11px; }
}

/* F7: on laptops "Liever direct contact? App ons of bel" sits beside the step button (markup in the script). */
.lead-alt { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.lead-alt a { font-weight: 700; }
@media (min-width: 821px) {
  .quote-form .lead-step .form-actions:has(.lead-alt) { display: flex; align-items: center; gap: 12px 24px; }
  .quote-form .lead-step .form-actions:has(.lead-alt) .button { flex: 1 1 auto; width: auto; }
  .lead-alt { flex: 0 1 220px; }
}
@media (max-width: 820px) { .lead-alt { display: none; } }

/* space-05: "Zo werkt uw aanvraag" (WhatsApp, Bel, m³ link) moves from a section 1000px down into an
   aside next to the form: below it up to 1199px, a sticky column beside it from 1200px. */
.quote-layout { display: grid; gap: 24px; }
.quote-workspace .quote-layout .quote-form { width: 100%; max-width: 860px; margin-inline: auto; }
.quote-aside { width: 100%; max-width: 860px; margin-inline: auto; display: grid; align-content: start; background: var(--white); border: 1px solid var(--line); }
.quote-aside > div { padding: 24px 28px 28px; }
.quote-aside h2 { font-size: clamp(24px, 2.2vw, 28px); }
.quote-aside .quote-proof { margin-top: 14px; font-size: 15.5px; }
.quote-aside .contact-hooks { display: grid; gap: 8px; margin-top: 20px; }
.quote-aside .contact-hooks .button { width: 100%; }
.quote-aside .quote-intro-photo img { aspect-ratio: 16 / 9; }
@media (min-width: 641px) and (max-width: 1199px) {
  .quote-aside { grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
  .quote-aside .quote-intro-photo { order: -1; }
  .quote-aside .quote-intro-photo img { height: 100%; aspect-ratio: auto; }
}
@media (min-width: 1200px) {
  .quote-layout { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; gap: 32px; }
  .quote-workspace .quote-layout .quote-form { max-width: none; }
  /* top: 104px follows the chrome-09 header (was 140px). */
  .quote-aside { position: sticky; top: 104px; max-width: none; }
  .quote-aside h2 { font-size: 24px; }
  /* Integration (heroes-F): the aside rises into the dark hero with the form, so both cards start level. */
  .quote-hero.compact + .quote-workspace .quote-aside { margin-top: clamp(-40px, -2.8vw, -28px); }
}

/* F4 + heroes-F phones (merged, adapted to the space-05 markup): compact hero, no breadcrumbs, and the
   form full width with 16px padding, so the step-1 question and the first tiles sit above the pinned button. */
@media (max-width: 640px) {
  .quote-hero .breadcrumbs { display: none; }
  .quote-hero .lead { font-size: 16px; }
  .quote-hero.compact > .shell { padding-top: 20px; padding-bottom: 24px; }
  .quote-hero.compact h1 { font-size: 28px; font-stretch: 100%; }
  .quote-workspace { padding-top: 0; }
  .quote-workspace .quote-layout { width: 100%; gap: 16px; }
  .quote-hero.compact + .quote-workspace .quote-layout .quote-form { margin-top: 0; padding: 20px 16px 24px; border-inline: 0; box-shadow: none; }
  .quote-aside { border-inline: 0; }
  .quote-aside > div { padding: 22px 16px 24px; }
  .quote-form .lead-progress { margin-bottom: 14px; }
  .quote-form .lead-step-title { font-size: 23px; }
  .lead-step-sub { margin-bottom: 14px; }
  .quote-form.is-stepped .lead-step .form-actions { margin-inline: -16px; padding: 10px 16px; }
  .quote-form.is-stepped .step-error:not([hidden]) { bottom: calc(137px + env(safe-area-inset-bottom)); }
}

/* ---------- Homepage ---------- */
/* SM-06: the six quick-start tiles share the card width; on the smallest phones the icon sits above the label. */
@media (max-width: 640px) { .quick-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) {
  .quick-card { padding: 20px 14px; }
  .quick-tiles a { flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; padding: 8px 10px; }
}

/* SM-15 (+ F8's quick-proof part, merged): Google and Trustoo side by side in one row on phones. */
@media (max-width: 640px) {
  .quick-proof, .who-proof, .lead-proof { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  :is(.quick-proof, .who-proof, .lead-proof) a { flex: none; flex-wrap: wrap; min-width: 0; min-height: 44px; justify-content: center; gap: 0 6px; }
  .who-proof a { padding: 8px 10px; }
}
@media (max-width: 480px) {
  :is(.quick-proof, .who-proof, .lead-proof) .stars { display: none; }
}

/* cards-06 (space-13 merged, dropped): homepage FAQ, heading left and questions right like every other
   FAQ; the "Staat uw vraag er niet bij?" card (Bel / WhatsApp) fills the left column under the heading. */
@media (min-width: 1061px) {
  .faq-section > .shell:has(> .faq-head) { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); grid-template-rows: auto 1fr; gap: 0 72px; align-items: start; }
  .faq-section > .shell > .faq-head { grid-column: 1; grid-row: 1; margin: 0; }
  .faq-section > .shell > .faq-head h2 { font-size: clamp(26px, 2.6vw, 36px); }
  .faq-section > .shell > .faq-list { grid-column: 2; grid-row: 1 / span 2; }
  .faq-section > .shell > .faq-help { grid-column: 1; grid-row: 2; grid-template-columns: 1fr; margin-top: 28px; }
  .faq-section > .shell > .faq-help .contact-hooks { grid-column: 1; grid-row: auto; margin-top: 8px; }
  .faq-section > .shell > .faq-help .contact-hooks .button { flex: 1 1 auto; }
}

/* space-12: wide screens with a mouse, the review reel runs edge to edge instead of stopping at the shell. */
@media (min-width: 1400px) and (hover: hover) and (prefers-reduced-motion: no-preference) {
  .reviews-reel { width: min(100vw, 2200px); margin-left: calc(50% - min(50vw, 1100px)); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
}

/* ---------- Service cards (index #diensten, diensten) ---------- */
/* cards-03 (SM-10 merged, dropped): on phones the "Meer hierover" bar becomes a 48px arrow square in the
   card corner (the whole card is already a link); only the phone link (Spoedverhuizing) keeps its row.
   The flush corner square matches the collage tile on phones. cards-03's tablet min-height rule is
   covered by space-08. */
@media (max-width: 640px) {
  .svc-card { padding: 20px 16px 18px; row-gap: 12px; }
  .svc-card:has(> .svc-link:not([href^="tel:"])) h3 { padding-right: 46px; }
  .svc-link:not([href^="tel:"]) { grid-area: auto; position: absolute; top: 0; right: 0; width: 48px; height: 48px; min-height: 0; margin: 0; padding: 0; border: 0; font-size: 0; }
  .svc-link:not([href^="tel:"]) span { width: 48px; height: 48px; font-size: 19px; }
  .svc-link[href^="tel:"] { margin: 6px -16px -18px; }
}
/* space-08: four across down to 900px; below that compact cards (icon beside the title) in two columns. */
@media (min-width: 900px) and (max-width: 1060px) {
  .svc-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .svc-card { min-height: 270px; padding-inline: 20px; }
  .svc-link { margin-inline: -20px; padding-left: 20px; }
  .svc-card h3 { font-size: 19px; }
}
@media (min-width: 641px) and (max-width: 899px) {
  .svc-card { display: grid; grid-template-columns: 44px minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: 6px 14px; min-height: 0; padding: 20px 20px 0; }
  .svc-ico { width: 44px; height: 44px; }
  .svc-ico svg { width: 22px; height: 22px; }
  .svc-card h3 { margin: 0; font-size: 18px; align-self: center; }
  .svc-card p { grid-column: 1 / -1; font-size: 15px; }
  .svc-link { grid-column: 1 / -1; margin: 14px -20px 0; padding-left: 20px; min-height: 48px; }
  .svc-link span { width: 48px; }
}

/* ---------- Content cards on phones ---------- */
/* cards-07 + SM-11 (merged): one card padding; every step list (process, journey, clear-steps) puts a
   40px number square beside its title with the text across the full card width (SM-11's pattern, with
   cards-07's square size); icon and number cards put the mark beside the heading (cards-07's guarded
   selectors, SM-11's text-link alignment). */
@media (max-width: 640px) {
  .route-scenario-card, .definition-grid > article, .local-card, .local-check-card, .tip-card,
  .process li, .journey li, .clear-steps li, .source-panel { padding: 20px 18px; }
  .cta-panel, .faq-help { padding: 22px 18px 22px 20px; }
  .process > li, .journey li, .clear-steps li { display: grid; grid-template-columns: 40px minmax(0, 1fr); align-items: center; gap: 10px 14px; }
  .process > li > div, .journey li > div, .clear-steps li > div { display: contents; }
  .process li > span, .journey li > span, .clear-steps li > span { width: 40px; height: 40px; font-size: 15px; }
  .process > li h3, .journey li h3 { margin: 0; font-size: 18px; }
  .clear-steps li strong { margin: 0; }
  .process > li p, .journey li p, .clear-steps li p { grid-column: 1 / -1; }
  .tips-list li { padding-left: 54px; }
  .tips-list li::before { width: 40px; height: 40px; }
  :is(.local-card, .route-scenario-card, .definition-grid > article, .local-check-card):has(> :is(span, .card-number, .pack-ico):first-child + h3) { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px 14px; align-items: center; }
  :is(.local-card, .route-scenario-card, .definition-grid > article, .local-check-card):has(> :is(span, .card-number, .pack-ico):first-child + h3) > :not(:first-child, h3) { grid-column: 1 / -1; }
  :is(.local-card, .route-scenario-card, .definition-grid > article, .local-check-card) > :is(span, .card-number, .pack-ico):first-child { margin: 0; align-self: center; }
  :is(.local-card, .route-scenario-card, .definition-grid > article, .local-check-card) > :is(span, .card-number, .pack-ico):first-child + h3 { margin: 0; }
  :is(.local-card, .route-scenario-card, .definition-grid > article, .local-check-card) > .text-link { justify-self: start; margin-top: 0; }
}

/* cards-12 + space-09 (merged): four-card grids never leave one card alone on a row, 2 x 2 on tablets and
   4 across from 1061px (space-09; cards-12 kept 2 x 2 up to 1143px). Definition grids switch at 980px,
   where four fit (cards-12's exact breakpoint). */
@media (min-width: 641px) and (max-width: 1060px) {
  .local-grid:has(> :nth-child(4):last-child) > * { flex-basis: calc(50% - 8px); }
  .timeline-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1061px) {
  .local-grid:has(> :nth-child(4):last-child) > * { flex-basis: calc(25% - 12px); }
  .timeline-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 641px) and (max-width: 979px) {
  .definition-grid:has(> :nth-child(4):last-child) > * { flex-basis: 50%; }
}

/* cards-10 + SM-13 (merged): town links and area chips two per row on phones; on desktop the area
   chips fill each row evenly. */
.area-chips li { flex: 1 1 auto; }
.area-chips a { width: 100%; }
@media (max-width: 640px) {
  .region-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .region-grid .region-link:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .region-link { min-height: 52px; padding: 6px 12px; font-size: 14px; line-height: 1.25; gap: 8px; }
  .area-chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-chips li { flex: none; }
  .area-chips a { height: 100%; min-height: 52px; padding: 6px 12px; font-size: 14px; line-height: 1.25; }
}

/* ---------- Contact blocks ---------- */
/* F11 (phones) + cards-04 (tablets), merged: the contact band's three buttons no longer stack as three
   full-width bars. 360-640px: WhatsApp and Bel side by side, the orange button on its own row (F11);
   641-820px: all three in one row, like the footer CTA (cards-04). Below 360px the stack stays. */
@media (min-width: 360px) and (max-width: 640px) {
  .contact-band .contact-hooks { grid-template-columns: 1fr 1fr; }
  .contact-band .contact-hooks .button-gold { grid-column: 1 / -1; grid-row: 2; }
  .contact-band .contact-hooks .button:not(.button-gold) { padding-inline: 8px; font-size: 14.5px; gap: 8px; }
}
@media (min-width: 641px) and (max-width: 820px) {
  .contact-band .contact-hooks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .contact-band .contact-hooks .button { padding-inline: 12px; }
}
/* cards-05: the over-ons and verhuislift-huren contact cards get WhatsApp next to the orange quote button. */
.contact-card .contact-hooks { display: grid; gap: 8px; margin-top: 4px; }
.contact-card .contact-hooks .button { width: 100%; }

/* cards-09: before / after on phones side by side, so the change reads at a glance. */
@media (max-width: 640px) {
  .ba-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
  .ba-arrow { display: none; }
  .ba-card img { aspect-ratio: 1 / 1; }
  .ba-card figcaption { padding: 10px 10px 12px; font-size: 14px; line-height: 1.4; }
  .ba-tag { padding: 5px 10px; font-size: 12.5px; }
}

/* cards-13: two sections with the same background share one padding (grey + grey with a 1px line; a plain
   white section followed by the white FAQ). */
:is(.soft, .local-guide, .editorial-section, .quote-workspace) + :is(.soft, .local-guide, .editorial-section) { padding-top: calc(var(--section) * .6); border-top: 1px solid var(--line); }
.section[class="section"] + .faq-section:not(.soft) { padding-top: 0; }

/* ---------- Trust strips ---------- */
/* chrome-10 (space-10 merged, dropped: same idea for 900-1160px only): from 641 to 1199px the four proof
   cells sit in one row as compact stacked cells, values on one level. */
@media (max-width: 1199px) { .trust-item { justify-content: flex-start; } }
@media (min-width: 641px) and (max-width: 1199px) {
  .trust-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .trust-item { flex-direction: column; gap: 8px; min-height: 0; padding: 18px 10px; text-align: center; }
  .trust-item:nth-child(-n+2) { border-bottom: 0; }
  .trust-item:nth-child(2n):not(:last-child) { border-right: 0; }
  .trust-item > div { justify-items: center; }
  .trust-item strong { justify-content: center; }
  .trust-logo { margin-block: 11px; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .trust-item strong { font-size: 17px; }
  .trust-item strong .stars { display: none; }
  .trust-item span:not(.stars):not(.trust-ico) { font-size: 13px; }
}

/* ---------- Footer ---------- */
/* chrome-07: the footer CTA band, heading on two lines when stacked; on phones less padding and
   WhatsApp + Bel side by side under the orange button (from 390px, where both labels fit). */
@media (max-width: 1120px) { .footer-lead h2 { max-width: 22ch; } }
@media (max-width: 640px) { .footer-lead-inner { padding-block: 44px 40px; gap: 24px; } }
@media (min-width: 390px) and (max-width: 640px) {
  .footer-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-actions .button-gold { grid-column: 1 / -1; }
  .footer-actions .button { padding-inline: 10px; }
}
/* chrome-11 + SM-14 (merged; space-15 dropped, same tablet idea from 760px only): phones, "Informatie"
   spans the row with its links in two columns; tablets, logo and rating beside the name and intro. */
@media (max-width: 640px) {
  .footer-grid > div:nth-child(4) { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 20px; }
  .footer-grid > div:nth-child(4) > strong { grid-column: 1 / -1; }
}
@media (min-width: 641px) and (max-width: 1060px) {
  .footer-brand { display: grid; grid-template-columns: max-content minmax(0, 1fr); grid-template-areas: "logo name" "logo text" "rating text"; column-gap: 40px; align-items: start; }
  .footer-brand .footer-logo { grid-area: logo; justify-self: start; margin-bottom: 12px; }
  .footer-brand > strong { grid-area: name; margin: 0 0 6px; }
  .footer-brand p { grid-area: text; margin: 0; }
  .footer-brand .footer-rating { grid-area: rating; justify-self: start; }
}

/* ---------- m³ calculator ---------- */
/* F9 + space-02 (merged): the offer button now follows the total in the markup (script), so it is in reach
   in the sticky summary; the mini total gets an arrow and stays on one line. */
.calculator-summary #m3-quote-link { margin-top: 18px; }
.m3-mini strong { flex: none; white-space: nowrap; }
.m3-mini strong::after { content: "\2192"; content: "\2192" / ""; margin-left: 10px; font-size: 18px; color: var(--accent); }
@media (max-width: 359px) { .m3-mini { gap: 8px; padding-inline: 14px; font-size: 13.5px; } .m3-mini strong { font-size: 19px; } .m3-mini strong::after { margin-left: 6px; } }
/* space-02: the sticky summary is never taller than the screen (top 104px after chrome-09, was 140px). */
@media (min-width: 1061px) {
  .calculator-summary { max-height: calc(100vh - 120px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; }
}
/* space-06: running total and offer button beside the list down to 900px (top 96px = chrome-09's 71px header + 25px). */
@media (min-width: 900px) and (max-width: 1060px) {
  .calculator-layout { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .calculator-summary { position: sticky; top: 96px; max-height: calc(100vh - 112px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .35) transparent; padding: 20px 22px; }
  .calculator-summary h2 { font-size: 22px; }
  .calculator-summary .m3-total { margin: 10px 0 6px; font-size: 48px; }
  .calculator-summary > p { margin: 14px 0; }
  .calculator-summary .box-equivalent { margin-top: 14px; padding: 10px 14px; }
  .m3-mini { display: none; }
}
/* SM-07: a long item name no longer runs under the - / + buttons; the row wraps only when it must. */
@media (max-width: 640px) {
  .inventory-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; column-gap: 10px; row-gap: 6px; }
  .inventory-row > div:first-child { flex: 1 1 0; min-width: min-content; }
  .quantity-control { flex: none; margin-left: auto; grid-template-columns: 44px 44px 44px; }
}
@media (max-width: 400px) {
  .calculator-panel { padding-inline: 12px; }
  .inventory-items { padding: 0 10px; }
  .inventory-row > div:first-child { font-size: 15px; }
}

/* ---------- Checklist ---------- */
/* F10: in one column the PDF lead magnet and "Liever meteen een verhuizer?" follow task group 2, not group 8. */
@media screen and (max-width: 1060px) {
  .checklist-layout { row-gap: 0; }
  .checklist-main, #checklist { display: contents; }
  #checklist > .cl-group:nth-child(n+3) { order: 2; }
  .checklist-aside { order: 1; margin-bottom: 40px; }
}
/* space-07: on laptop-height screens the "Liever meteen een verhuizer?" panel stays in view next to the list
   (top 104px, the chrome-09 sticky column offset; was 116px). */
@media (min-width: 1061px) and (max-height: 1050px) {
  .checklist-layout { align-items: stretch; }
  .checklist-aside { align-content: start; }
  .checklist-cta { position: sticky; top: 104px; }
}

/* ---------- Text size, tap targets, measure ---------- */
/* SM-16: on phones the sentences that steer the lead read at 15px; short labels stay small. */
@media (max-width: 640px) {
  .hero-note, .quick-alt, .hero-steps small, .field-hint, .field-note, .privacy-note, .quote-calc-link,
  .extra-volume small, .extra-volume > span, .calculator-summary > p, .cl-group-head p, .map-card p, .source-links a { font-size: 15px; }
}
/* SM-17: touch screens, breadcrumb and terms TOC links get a 44px hit area; the text does not move. */
@media (max-width: 1060px) {
  .breadcrumbs a { display: inline-flex; align-items: center; min-height: 44px; margin: -10px -4px; padding-inline: 4px; }
  .terms-toc a { min-height: 44px; }
}
/* space-16: long body text follows the spec measure (--measure: 70ch). */
.local-guide-head p:not(.eyebrow) { max-width: var(--measure); }
.terms-card > p, .terms-card > ol, .terms-card > ul { max-width: var(--measure); }

/* ---------- Landscape phones and short screens (last, so it wins) ---------- */
/* space-01 + chrome-09 (merged): no utility row, a 56px nav row and a 48px bar. Up to 820px wide the header
   scrolls away (chrome-09; the bar keeps WhatsApp / Bellen / Offerte); wider landscape phones keep the slim
   sticky header and also get the bar (space-01). */
@media (max-height: 500px) and (orientation: landscape) {
  html { scroll-padding-top: 72px; }
  .utility { display: none; }
  .site-header { top: 0; }
  .nav-shell { min-height: 56px; }
  .brand-logo img { width: 150px; }
  .home-hero .hero-grid { padding-block: 22px 24px; }
  .home-hero h1 { max-width: 20ch; font-size: clamp(32px, 6vw, 44px); margin-bottom: 14px; }
  .h1-kicker { margin-bottom: 12px; }
  .home-hero .hero-actions { margin-top: 20px; }
  .quote-hero.compact > .shell, .inner-hero > .shell, .service-hero > .shell, .service-hero > .shell.service-hero-grid, .clear-hero-inner { padding-block: 20px 24px; }
  .inner-hero h1, .quote-hero h1, .service-hero h1, .clear-hero h1 { max-width: none; }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 820px) {
  .site-header { position: relative; }
  html { scroll-padding-top: 16px; }
}
@media (max-height: 500px) and (orientation: landscape) and (min-width: 900px) {
  .calculator-summary { top: 72px; max-height: calc(100vh - 136px); }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 820px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1060px) {
  .mobile-actions { position: fixed; z-index: 55; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: 1fr 1fr 1.15fr; padding-bottom: env(safe-area-inset-bottom); background: var(--white); box-shadow: 0 -12px 30px -18px rgba(0, 34, 44, .45); }
  .mobile-actions a { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--white); font-size: 15px; font-weight: 750; text-decoration: none; }
  .mobile-actions .btn-icon { width: 19px; height: 19px; }
  .mobile-actions .call .btn-icon { fill: none; }
  .mobile-actions .wa { background: var(--wa); }
  .mobile-actions .call { background: var(--brand-deep); }
  .mobile-actions .quote { background: var(--accent); color: var(--accent-ink); }
  body { padding-bottom: calc(48px + env(safe-area-inset-bottom)); }
  .m3-mini { bottom: calc(48px + env(safe-area-inset-bottom)); }
  .header-cta { display: none; }
  /* Integration: the menu, the pinned step button and its error sit above the 48px bar (chrome-02, F2). */
  #site-nav { bottom: calc(48px + env(safe-area-inset-bottom)); padding-bottom: 16px; }
  .nav-mobile-contact { display: none; }
  .quote-form.is-stepped .lead-step .form-actions { bottom: calc(48px + env(safe-area-inset-bottom)); }
  .quote-form.is-stepped .step-error:not([hidden]) { bottom: calc(131px + env(safe-area-inset-bottom)); }
}

/* ==================================================================
   Deployment readiness (2026-10-15, build 20261015-sq2): fixes from
   DEPLOYMENT-READINESS-2026-10-14.md. Each block names its item id.
   Markup lives in scripts/apply_readiness_1015.py and
   scripts/apply_squares_1014.py; behaviour in app.js.
   ================================================================== */

/* M-A3 + M-A4: form field borders 3.35:1 on white (was 1.77:1), placeholder text 5.02:1 (was 2.99:1). */
:root { --line-strong: #7a9097; }
::placeholder { color: var(--muted); }

/* H4 (WCAG 2.4.11): the fixed bottom bar never hides the focused element. The
   html:has(.quote-form.is-stepped) rules in sq-7 are more specific and still win on the quote page. */
@media (max-width: 820px) {
  html { scroll-padding-bottom: calc(58px + 16px + env(safe-area-inset-bottom)); }
}
@media (max-height: 500px) and (orientation: landscape) and (max-width: 820px), (max-height: 500px) and (orientation: landscape) and (pointer: coarse) and (max-width: 1060px) {
  html { scroll-padding-bottom: calc(48px + 16px + env(safe-area-inset-bottom)); }
}

/* H5: the menu button now comes before the menu in the DOM (focus order); order keeps it on the right. */
.menu-toggle { order: 1; }

/* M-A2 (1.4.13): Escape hides the desktop "Diensten" submenu until the pointer or focus leaves it. */
@media (min-width: 1061px) {
  .nav-item.has-sub.is-dismissed .nav-sub { visibility: hidden; opacity: 0; transform: translateY(6px); }
}

/* H8: art-directed phone crop of the homepage hero (<picture>); the image keeps filling the media box. */
.hero-media picture { display: block; width: 100%; height: 100%; }

/* H6 + M-A1 (2.2.2): pause button for the reviews marquee, and a focusable reel. Where the marquee does not
   run (touch screens, reduced motion) the reel scrolls by hand and the button is not needed. */
.reel-toggle { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin: 0 0 16px; padding: 0 16px; border: 1px solid rgba(255, 255, 255, .45); background: transparent; color: var(--white); font: inherit; font-size: 14.5px; font-weight: 750; line-height: 1.2; cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.reel-toggle::before { content: ""; width: 10px; height: 12px; box-sizing: border-box; border-inline: 3px solid currentColor; }
.reel-toggle:hover { border-color: var(--white); background: rgba(255, 255, 255, .08); }
.reel-toggle[aria-pressed="true"] { border-color: var(--white); background: rgba(255, 255, 255, .14); }
.reel-toggle[aria-pressed="true"]::before { width: 0; height: 0; border-inline: 0; border-left: 10px solid currentColor; border-block: 6px solid transparent; }
.reviews-reel.is-paused .reviews-track { animation-play-state: paused; }
.reviews-reel:focus-visible { outline: 3px solid var(--white); outline-offset: -3px; }
@media (hover: none), (prefers-reduced-motion: reduce) { .reel-toggle { display: none; } }

/* H7 (2.2.2): pause button for the homepage background loop. It sits in .video-band (not in .video-media,
   which is a z-index -2 layer under the copy), top right, clear of the "why us" card. */
.loop-toggle { position: absolute; z-index: 1; top: 16px; right: 16px; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255, 255, 255, .5); background: rgba(0, 34, 44, .55); color: var(--white); cursor: pointer; transition: background-color .15s ease, border-color .15s ease; }
.loop-toggle::before { content: ""; width: 12px; height: 14px; box-sizing: border-box; border-inline: 4px solid currentColor; }
.loop-toggle:hover { border-color: var(--white); background: rgba(0, 34, 44, .8); }
.loop-toggle[aria-pressed="true"]::before { width: 0; height: 0; margin-left: 4px; border-inline: 0; border-left: 12px solid currentColor; border-block: 7px solid transparent; }

/* Lead form: server errors (?fout=) get their own alert above the steps, so they show in step 1 too. */
.quote-form > .server-error { margin: 0 0 20px; }
.quote-form > .server-error:focus { outline: 3px solid var(--focus); outline-offset: 2px; }