/* Design tokens — DESIGN.md (HuisLens system). Warm-sand canvas
         (`--canvas-soft`) is the page floor; white cards sit on it and the
         surface contrast IS the elevation. Muted Dutch orange `--primary` is
         the sole CTA accent, always with dark ink text for legibility. A heavy
         display face (Inter weight 900) carries hero + section headlines; Inter
         600 carries sub-displays and body. Canonical button + card radius is
         `--r-xl` 24px. Ink 1px borders on inputs, the configurator card, and
         tertiary buttons. The footer is the single dark (ink) surface. */
      :root {
        /* Brand & accent — warm coral-orange. */
        --primary: #d66853;
        --primary-active: #c25748;
        --primary-neutral: #ebbb8e;
        --primary-pale: #fbeee0;
        /* Surface — sand page floor, white cards. */
        --canvas: #ffffff;
        --canvas-soft: #f0ebe4;
        /* Text. */
        --ink: #0e0f0c;
        --ink-deep: #163300;
        --body: #454745;
        --mute: #868685;
        /* Semantic. */
        --positive: #2ead4b;
        --positive-deep: #054d28;
        --warning: #ffd11a;
        --negative: #d03238;
        --negative-bg: #320707;
        /* On-color text — white on the deep orange CTA. */
        --on-primary: #ffffff;
        --on-dark: #ffffff;
        --on-dark-soft: rgba(255, 255, 255, 0.65);
        /* Hairlines — soft ink alphas for row dividers. */
        --hairline: rgba(14, 15, 12, 0.14);
        --hairline-soft: rgba(14, 15, 12, 0.08);
        /* Elevation — DESIGN uses surface contrast; card gets one soft lift. */
        --shadow-card: 0 2px 10px rgba(14, 15, 12, 0.06);
        /* Radius scale. */
        --r-sm: 8px;
        --r-md: 12px;
        --r-lg: 16px;
        --r-xl: 24px;
        --r-pill: 9999px;
        /* Spacing — 4px base. */
        --sp-xxs: 2px;
        --sp-xs: 4px;
        --sp-sm: 8px;
        --sp-md: 12px;
        --sp-lg: 16px;
        --sp-xl: 24px;
        --sp-2xl: 32px;
        --sp-3xl: 48px;
        --sp-section: 64px;
        --ui: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          sans-serif;
      }
      /* Self-hosted Inter (latin subset, only the weights the site uses:
         400/600/700/800/900). Replaces the render-blocking Google Fonts
         stylesheet — no external request, no visitor-IP leak to Google, and the
         font ships from our own origin. font-display: swap keeps text visible
         while the woff2 loads. */
      @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 400;
        font-display: swap;
        src: url("/static/fonts/inter-latin-400-normal.woff2") format("woff2");
      }
      @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 600;
        font-display: swap;
        src: url("/static/fonts/inter-latin-600-normal.woff2") format("woff2");
      }
      @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 700;
        font-display: swap;
        src: url("/static/fonts/inter-latin-700-normal.woff2") format("woff2");
      }
      @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 800;
        font-display: swap;
        src: url("/static/fonts/inter-latin-800-normal.woff2") format("woff2");
      }
      @font-face {
        font-family: "Inter";
        font-style: normal;
        font-weight: 900;
        font-display: swap;
        src: url("/static/fonts/inter-latin-900-normal.woff2") format("woff2");
      }
      * {
        box-sizing: border-box;
      }
      /* Class display rules (.btn-block, #leadform) outrank the UA
         [hidden] { display: none } on specificity — restore it so the
         hidden attribute reliably hides those elements. */
      [hidden] {
        display: none !important;
      }
      /* Anchor targets scroll clear of the sticky nav. */
      [id] {
        scroll-margin-top: 80px;
      }
      body {
        margin: 0;
        background: var(--canvas-soft);
        color: var(--body);
        font: 400 16px/1.5 var(--ui);
        font-feature-settings: "calt";
        -webkit-font-smoothing: antialiased;
      }
      .container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 0 var(--sp-xl);
      }

      /* ---- nav (white bar, 64px, orange CTA right) ---- */
      nav {
        position: sticky;
        top: 0;
        z-index: 10;
        background: var(--canvas);
        border-bottom: 1px solid var(--hairline-soft);
      }
      nav .container {
        display: flex;
        align-items: center;
        gap: var(--sp-lg);
        min-height: 64px;
      }
      .wordmark {
        font: 800 22px/1 var(--ui);
        letter-spacing: -0.02em;
        text-decoration: none;
        color: var(--ink);
      }
      nav .menu {
        margin: 0 auto;
        display: flex;
        align-items: center;
        gap: var(--sp-xl);
      }
      nav a.navlink {
        font: 600 14px/1.4 var(--ui);
        color: var(--ink);
        text-decoration: none;
      }
      nav a.navlink:hover {
        color: var(--mute);
      }
      nav .side {
        display: flex;
        align-items: center;
        gap: var(--sp-lg);
      }
      .langpick {
        font: 600 14px/1.4 var(--ui);
        color: var(--mute);
        display: inline-flex;
        gap: var(--sp-xs);
      }
      .langpick a {
        color: var(--mute);
        text-decoration: none;
      }
      .langpick a.active {
        color: var(--ink);
      }
      @media (max-width: 767px) {
        /* The nav keeps only wordmark + language picker; the configurator is
           the first thing below the hero text, so the CTA is redundant here
           and does not fit next to the wordmark anyway. */
        nav .menu,
        nav .btn {
          display: none;
        }
        nav .side {
          margin-left: auto;
        }
      }

      /* ---- buttons (24px pills; the brand's friendliness signature) ---- */
      .btn {
        display: inline-block;
        border: none;
        cursor: pointer;
        text-decoration: none;
        font: 600 16px/1.5 var(--ui);
        padding: var(--sp-md) var(--sp-xl);
        border-radius: var(--r-xl);
        transition: background 0.15s ease;
      }
      .btn-primary {
        background: var(--primary);
        color: var(--on-primary);
      }
      .btn-primary:hover,
      .btn-primary:active {
        background: var(--primary-active);
      }
      .btn-primary:disabled {
        background: #e3e0da;
        color: var(--mute);
        cursor: not-allowed;
      }
      /* Tertiary: white fill, 1px ink outline — Wise-style outline button. */
      .btn-secondary {
        background: var(--canvas);
        color: var(--ink);
        border: 1px solid var(--ink);
      }
      .btn-secondary:hover {
        background: var(--canvas-soft);
      }
      .btn-block {
        display: block;
        width: 100%;
        text-align: center;
        padding-top: 14px;
        padding-bottom: 14px;
      }

      /* ---- hero (sand canvas, split; configurator card right) ---- */
      .hero {
        padding: var(--sp-section) 0;
      }
      .hero .container {
        display: grid;
        grid-template-columns: 1.1fr 1fr;
        gap: var(--sp-3xl);
        align-items: start;
      }
      @media (max-width: 1023px) {
        .hero .container {
          grid-template-columns: 1fr;
          gap: var(--sp-2xl);
        }
      }
      /* The pitch column is shorter than the configurator: keep it in view
         while the visitor scrolls the card. */
      @media (min-width: 1024px) {
        .hero .pitch {
          position: sticky;
          top: 104px;
        }
      }
      /* Display weight 900 — the brand's hero voice. */
      h1 {
        font-weight: 900;
        font-size: clamp(40px, 6vw, 72px);
        line-height: 1.02;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 0 0 var(--sp-xl);
      }
      .hero h1 .accent {
        color: var(--primary);
      }
      .lead {
        font-size: 20px;
        line-height: 1.5;
        color: var(--body);
        margin: 0 0 var(--sp-lg);
        max-width: 52ch;
      }
      .hero ul.points {
        list-style: none;
        padding: 0;
        margin: var(--sp-2xl) 0 0;
      }
      .hero ul.points li {
        padding: var(--sp-md) 0 var(--sp-md) 32px;
        position: relative;
        font: 600 16px/1.5 var(--ui);
        color: var(--ink);
        border-bottom: 1px solid var(--hairline-soft);
      }
      .hero ul.points li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: var(--sp-md);
        color: var(--positive);
        font-weight: 800;
        font-size: 15px;
      }

      /* ---- configurator card (currency-converter-card chrome:
         white, 1px ink border, 24px radius) ---- */
      .config {
        background: var(--canvas);
        border: 1px solid var(--ink);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-card);
        padding: var(--sp-xl);
      }
      .config h2 {
        font: 800 24px/1.3 var(--ui);
        letter-spacing: -0.01em;
        color: var(--ink);
        margin: 0 0 var(--sp-md);
      }
      /* Step labels as pale-orange badge pills. */
      .step-label {
        display: inline-block;
        font: 600 13px/1.4 var(--ui);
        color: var(--ink);
        background: var(--primary-pale);
        border-radius: var(--r-pill);
        padding: var(--sp-xs) var(--sp-md);
        margin: var(--sp-xl) 0 var(--sp-xs);
      }
      .step-label:first-of-type {
        margin-top: 0;
      }
      .hint {
        font-size: 14px;
        line-height: 1.5;
        color: var(--mute);
        margin: 0 0 var(--sp-sm);
      }
      .search-row {
        display: flex;
        gap: var(--sp-sm);
      }
      .search-box {
        flex: 1;
        position: relative;
      }
      .search-box input {
        width: 100%;
        font: 400 16px/1.5 var(--ui);
        color: var(--ink);
        background: var(--canvas);
        border: 1px solid var(--ink);
        border-radius: var(--r-md);
        padding: 11px 14px;
      }
      .search-box input:focus,
      #leadform input:focus,
      #checkoutfields input:focus {
        outline: none;
        border-color: var(--ink);
        box-shadow: 0 0 0 3px var(--primary-pale);
      }
      #gsuggest {
        position: absolute;
        top: calc(100% + 4px);
        left: 0;
        right: 0;
        z-index: 20;
        background: var(--canvas);
        border: 1px solid var(--ink);
        border-radius: var(--r-md);
        overflow: hidden;
        box-shadow: var(--shadow-card);
      }
      #gsuggest button {
        display: block;
        width: 100%;
        text-align: left;
        font: 400 16px/1.5 var(--ui);
        color: var(--ink);
        background: none;
        border: none;
        cursor: pointer;
        padding: 10px 14px;
      }
      #gsuggest button:hover,
      #gsuggest button.hl {
        background: var(--canvas-soft);
      }
      .search-row input::placeholder {
        color: var(--mute);
      }
      /* Lead-mode form + paid-mode contact fields: text-input chrome. */
      #leadform,
      #checkoutfields {
        display: flex;
        flex-direction: column;
        gap: var(--sp-sm);
        margin-top: var(--sp-sm);
      }
      /* Space between the contact fields and the "start subscription" button
         (the button is a sibling after the fields, so it needs its own gap). */
      #checkoutfields {
        margin-bottom: var(--sp-sm);
      }
      #leadform input,
      #checkoutfields input {
        width: 100%;
        font: 400 16px/1.5 var(--ui);
        color: var(--ink);
        background: var(--canvas);
        border: 1px solid var(--ink);
        border-radius: var(--r-md);
        padding: 11px 14px;
      }
      #leadform input::placeholder,
      #checkoutfields input::placeholder {
        color: var(--mute);
      }
      #leadform input:disabled {
        background: var(--canvas-soft);
        border-color: var(--hairline);
        color: var(--mute);
        cursor: not-allowed;
      }
      /* Cloudflare Turnstile renders a fixed ~300px iframe. On a narrow phone
         that floor would force the configurator card (a grid item, default
         min-width:auto) wider than the viewport. Let the whole chain shrink,
         scale the widget to fit, and clip the leftover iframe box so it never
         drives page-level horizontal scroll. */
      .cf-turnstile {
        margin-top: var(--sp-sm);
      }
      @media (max-width: 767px) {
        .config,
        .summary,
        #leadform,
        #checkoutfields {
          min-width: 0;
        }
        #leadform {
          overflow: hidden;
        }
        .cf-turnstile {
          transform: scale(0.9);
          transform-origin: left center;
        }
      }
      #leadmsg {
        margin: var(--sp-md) 0 0;
        font: 600 14px/1.5 var(--ui);
      }
      #leadmsg.ok {
        color: var(--ink);
        background: var(--primary-pale);
        border-radius: var(--r-md);
        padding: var(--sp-sm) var(--sp-md);
      }
      #leadmsg.ok::before {
        content: "✓ ";
        color: var(--positive);
        font-weight: 800;
      }
      #leadmsg.err {
        color: var(--negative);
      }
      #leadrestart {
        margin-top: var(--sp-md);
      }
      .quick {
        margin-top: var(--sp-sm);
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-sm);
      }
      /* Pale-orange badge pills. */
      .quick button {
        font: 600 13px/1.4 var(--ui);
        color: var(--ink);
        cursor: pointer;
        background: var(--primary-pale);
        border: none;
        border-radius: var(--r-pill);
        padding: var(--sp-xs) var(--sp-md);
        transition: background 0.15s ease;
      }
      .quick button:hover {
        background: var(--primary-neutral);
      }

      #selected {
        margin: var(--sp-md) 0 0;
        padding: 0;
        list-style: none;
      }
      /* Empty state: tell the visitor what the list is waiting for. */
      #selected:empty::after {
        content: attr(data-empty);
        display: block;
        font: 400 13px/1.5 var(--ui);
        color: var(--mute);
        border: 1px dashed var(--hairline);
        border-radius: var(--r-md);
        padding: var(--sp-sm) var(--sp-md);
      }
      #selected li {
        display: flex;
        align-items: center;
        gap: var(--sp-sm);
        padding: var(--sp-sm) 0;
        border-bottom: 1px solid var(--hairline-soft);
      }
      #selected li .gname {
        font: 600 16px/1.4 var(--ui);
        color: var(--ink);
        min-width: 0;
        overflow-wrap: anywhere;
      }
      #selected li .gmeta {
        margin-left: auto;
        font-size: 14px;
        color: var(--mute);
        text-align: right;
        min-width: 0;
        overflow-wrap: anywhere;
      }
      #selected li .gmeta strong {
        color: var(--ink);
        font-weight: 700;
      }
      #selected li .gmeta .err {
        color: var(--negative);
      }
      #selected li button.rm {
        background: none;
        border: none;
        cursor: pointer;
        color: var(--mute);
        font-size: 18px;
        line-height: 1;
        padding: var(--sp-xs);
      }
      #selected li button.rm:hover {
        color: var(--ink);
      }
      .spinner {
        display: inline-block;
        width: 14px;
        height: 14px;
        vertical-align: -2px;
        border: 2px solid var(--hairline);
        border-top-color: var(--ink);
        border-radius: var(--r-pill);
        animation: spin 0.8s linear infinite;
      }
      @keyframes spin {
        to {
          transform: rotate(360deg);
        }
      }

      .cat {
        display: flex;
        align-items: center;
        gap: var(--sp-sm);
        cursor: pointer;
        padding: var(--sp-sm) 0;
        border-bottom: 1px solid var(--hairline-soft);
      }
      .cat input {
        width: 18px;
        height: 18px;
        accent-color: var(--primary);
      }
      .cat .cname {
        font: 600 16px/1.4 var(--ui);
        color: var(--ink);
      }
      .cat .cdesc {
        font-size: 13px;
        line-height: 1.4;
        color: var(--mute);
      }
      .cat .cmeta {
        margin-left: auto;
        text-align: right;
        font-size: 14px;
        color: var(--mute);
        white-space: nowrap;
      }
      .cat .cprice {
        font: 600 14px/1.5 var(--ui);
        color: var(--ink);
      }

      /* Sand summary block: the order recap reads as its own surface inside
         the white configurator card (surface contrast = elevation). */
      .summary {
        margin-top: var(--sp-lg);
        background: var(--canvas-soft);
        border-radius: var(--r-lg);
        padding: var(--sp-lg);
      }
      .price-row {
        display: flex;
        align-items: baseline;
        gap: var(--sp-sm);
      }
      /* Display weight 900 for the price. */
      #price {
        font-weight: 900;
        font-size: 40px;
        line-height: 1.1;
        letter-spacing: -0.02em;
        color: var(--ink);
      }
      .price-note {
        font-size: 14px;
        color: var(--mute);
      }
      #breakdown {
        list-style: none;
        margin: var(--sp-sm) 0 var(--sp-md);
        padding: 0;
        font-size: 14px;
        line-height: 1.5;
        color: var(--body);
      }
      #breakdown li {
        padding: 2px 0;
      }
      #volume {
        background: var(--canvas);
        color: var(--body);
        font: 400 14px/1.5 var(--ui);
        border-radius: var(--r-md);
        padding: var(--sp-sm) var(--sp-md);
        margin: 0 0 var(--sp-md);
      }
      .fine {
        font-size: 13px;
        line-height: 1.5;
        color: var(--mute);
        margin: var(--sp-sm) 0 0;
      }
      .fine a {
        color: var(--ink);
        text-decoration: none;
      }
      .fine a:hover,
      .fine a:focus {
        text-decoration: underline;
      }

      /* The werkgebied hero carries no CTA button (the card below is the
         offer), so the stacked band paddings left ~150px of empty canvas
         between the intro and the numbers. Pull the card up under the lead. */
      .wgpage .leadhero {
        padding-bottom: 0;
      }
      .wgpage .leadhero .leadhero-p {
        margin-bottom: 0;
      }
      .wgpage .leadhero + .band {
        padding-top: var(--sp-2xl);
      }

      /* ---- werkgebied pages (/werkgebied/<gemeente>) ----
         The outreach landing page reuses the configurator card surface; the
         rows are read-only, so the layout is a three-column grid rather than
         the .cat label rows. */
      .wgcard {
        max-width: 720px;
      }
      .wghead,
      .wgrow {
        display: grid;
        grid-template-columns: 1fr auto 132px;
        align-items: center;
        gap: var(--sp-md);
        padding: var(--sp-md) 0;
      }
      .wghead {
        font: 600 13px/1.4 var(--ui);
        color: var(--mute);
        text-transform: uppercase;
        letter-spacing: 0.04em;
        padding-bottom: var(--sp-sm);
        border-bottom: 1px solid var(--hairline);
      }
      .wgrow + .wgrow {
        border-top: 1px solid var(--hairline-soft);
      }
      /* The trades the mail preselected read at full strength; the rest are
         context, not the offer. */
      .wgrow:not(.is-selected) .cname,
      .wgrow:not(.is-selected) .wgnum {
        color: var(--mute);
      }
      .wgnum {
        font: 600 16px/1.4 var(--ui);
        color: var(--ink);
        font-variant-numeric: tabular-nums;
      }
      .wghead span:nth-child(2),
      .wgrow .wgnum {
        text-align: right;
      }
      .pill {
        display: inline-block;
        font: 600 12px/1.4 var(--ui);
        border-radius: var(--r-pill);
        padding: var(--sp-xs) var(--sp-md);
        white-space: nowrap;
      }
      .pill-free {
        background: var(--primary-pale);
        color: var(--primary-active);
      }
      .pill-taken {
        background: rgba(14, 15, 12, 0.06);
        color: var(--mute);
      }
      .pill-thin {
        background: var(--canvas-soft);
        color: var(--body);
      }
      .wgcard .summary .btn {
        margin-top: var(--sp-md);
      }
      @media (max-width: 767px) {
        .wghead,
        .wgrow {
          grid-template-columns: 1fr auto;
        }
        /* The status pill drops to its own line under the count. */
        .wghead span:nth-child(3) {
          display: none;
        }
        .wgrow > span:last-child {
          grid-column: 2;
          text-align: right;
        }
      }

      /* ---- content bands (sand canvas; white cards carry the contrast) ---- */
      .band {
        padding: var(--sp-section) 0;
      }
      .band h2.section {
        font-weight: 900;
        font-size: clamp(32px, 4vw, 48px);
        line-height: 1.08;
        letter-spacing: -0.02em;
        color: var(--ink);
        margin: 0 0 var(--sp-xl);
      }
      .monolabel {
        display: inline-block;
        font: 600 13px/1.4 var(--ui);
        color: var(--ink);
        background: var(--primary-pale);
        border-radius: var(--r-pill);
        padding: var(--sp-xs) var(--sp-md);
        margin: 0 0 var(--sp-md);
      }
      .grid3 {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-lg);
      }
      @media (max-width: 1023px) {
        .grid3 {
          grid-template-columns: repeat(2, 1fr);
        }
      }
      @media (max-width: 767px) {
        .grid3 {
          grid-template-columns: 1fr;
        }
      }
      /* Feature cards: white content cards on sand, 24px radius, 24px pad. */
      .card-dark-panel {
        background: var(--canvas);
        border-radius: var(--r-xl);
        padding: var(--sp-xl);
      }
      .card-dark-panel .num {
        font: 700 13px/1.4 var(--ui);
        color: var(--primary-active);
        margin-bottom: var(--sp-sm);
      }
      .card-dark-panel h3 {
        font: 800 18px/1.4 var(--ui);
        color: var(--ink);
        margin: 0 0 var(--sp-xs);
      }
      .card-dark-panel p {
        color: var(--body);
        font-size: 15px;
        line-height: 1.5;
        margin: 0;
      }

      /* ---- sample band ---- */
      .sample .container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-3xl);
        align-items: center;
      }
      @media (max-width: 1023px) {
        .sample .container {
          grid-template-columns: 1fr;
        }
      }
      /* Product-mockup card: white with 1px ink border — "the actual product". */
      .card-console {
        background: var(--canvas);
        border: 1px solid var(--ink);
        border-radius: var(--r-xl);
        box-shadow: var(--shadow-card);
        padding: var(--sp-xl);
      }
      .card-console .tag {
        display: inline-block;
        background: var(--primary-pale);
        color: var(--ink);
        font: 600 13px/1.4 var(--ui);
        border-radius: var(--r-pill);
        padding: var(--sp-xs) var(--sp-md);
        margin-bottom: var(--sp-md);
      }
      .card-console .addr {
        font-weight: 800;
        font-size: 22px;
        line-height: 1.3;
        letter-spacing: -0.01em;
        color: var(--ink);
        margin: 0 0 var(--sp-sm);
      }
      .card-console ul {
        list-style: none;
        margin: 0;
        padding: 0;
        font-size: 15px;
        line-height: 1.5;
      }
      .card-console ul li {
        color: var(--body);
        padding: var(--sp-sm) 0;
        border-top: 1px solid var(--hairline-soft);
      }
      .sample .desc h2 {
        margin-bottom: var(--sp-md);
      }
      .sample .desc p {
        color: var(--body);
        font-size: 16px;
        line-height: 1.5;
        margin: 0 0 var(--sp-md);
      }
      .sample .desc ul {
        color: var(--body);
        font-size: 15px;
        line-height: 1.7;
        margin: 0;
        padding-left: 20px;
      }
      /* Delivery/format callout, set apart from the data list by a hairline. */
      .sample .desc p.deliver {
        margin: var(--sp-lg) 0 0;
        padding-top: var(--sp-lg);
        border-top: 1px solid var(--hairline-soft);
      }
      .sample .desc p.deliver strong {
        color: var(--ink);
        font-weight: 600;
      }

      /* ---- service landing pages (/leads/<slug>) ---- */
      .leadhero-p {
        font-size: 20px;
        line-height: 1.5;
        color: var(--body);
        max-width: 60ch;
        margin: 0 0 var(--sp-xl);
      }
      .leadhero .btn,
      .leadcta .btn {
        margin-top: var(--sp-sm);
      }
      .compare {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-lg);
        margin-bottom: var(--sp-xl);
      }
      @media (max-width: 767px) {
        .compare {
          grid-template-columns: 1fr;
        }
      }
      .compare-col {
        border-radius: var(--r-xl);
        padding: var(--sp-xl);
      }
      .compare-them {
        background: var(--canvas);
        border: 1px solid var(--hairline-soft);
      }
      .compare-us {
        background: var(--primary-pale);
      }
      .compare-head {
        font: 700 13px/1.4 var(--ui);
        margin: 0 0 var(--sp-md);
      }
      .compare-them .compare-head {
        color: var(--mute);
      }
      .compare-us .compare-head {
        color: var(--primary-active);
      }
      .compare-col ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .compare-col li {
        font-size: 15px;
        line-height: 1.5;
        color: var(--body);
        padding: var(--sp-sm) 0;
        border-top: 1px solid var(--hairline-soft);
      }
      .compare-us li {
        color: var(--ink);
      }
      /* Standalone delivery callout on the service pages. */
      .leadpage .deliver {
        color: var(--body);
        font-size: 16px;
        line-height: 1.5;
        margin: 0;
        max-width: 70ch;
      }
      /* On /leads/ the callout follows .compare, which carries its own bottom
         margin. On the werkgebied page it follows .grid3, which does not, so
         the paragraph sat flush against the cards. Space the adjacency itself
         rather than the page, so both templates get the same rhythm. */
      .leadpage .grid3 + .deliver {
        margin-top: var(--sp-xl);
      }
      .leadpage .deliver strong {
        color: var(--ink);
        font-weight: 600;
      }
      .otherlinks {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-md);
      }
      .otherlink {
        display: inline-block;
        background: var(--canvas);
        border: 1px solid var(--ink);
        border-radius: var(--r-xl);
        padding: var(--sp-sm) var(--sp-lg);
        color: var(--ink);
        text-decoration: none;
        font: 600 15px/1.4 var(--ui);
      }
      .otherlink:hover {
        background: var(--canvas-soft);
      }

      /* ---- faq (white cards on sand) ---- */
      .faq details {
        background: var(--canvas);
        border-radius: var(--r-lg);
        padding: var(--sp-lg) var(--sp-xl);
        margin-bottom: var(--sp-md);
      }
      .faq summary {
        font: 700 16px/1.4 var(--ui);
        color: var(--ink);
        cursor: pointer;
      }
      .faq details p {
        color: var(--body);
        font-size: 15px;
        line-height: 1.5;
        margin: var(--sp-sm) 0 0;
        max-width: 72ch;
      }
      .faq a {
        color: var(--ink);
        text-decoration: underline;
      }

      /* ---- footer (the single dark/ink surface; closes the page) ---- */
      footer {
        background: var(--ink);
        color: var(--on-dark-soft);
        padding: var(--sp-3xl) 0;
      }
      footer .container {
        display: flex;
        flex-wrap: wrap;
        gap: var(--sp-lg);
        align-items: baseline;
      }
      footer .kicker {
        font: 600 13px/1.4 var(--ui);
        color: var(--on-dark-soft);
        margin: 0 0 var(--sp-xs);
      }
      footer .wordmark {
        color: var(--on-dark);
      }
      footer p {
        font-size: 14px;
        line-height: 1.5;
        margin: var(--sp-xs) 0 0;
        color: var(--on-dark-soft);
      }
      footer a {
        color: var(--on-dark);
        text-decoration: none;
      }
      footer a:hover,
      footer a:focus {
        text-decoration: underline;
      }
      footer .colofon {
        font-size: 13px;
        line-height: 1.6;
        color: var(--on-dark-soft);
        margin: var(--sp-md) 0 0;
        max-width: 42ch;
      }
      footer .footlinks {
        display: flex;
        flex-direction: column;
        gap: var(--sp-xs);
        background: transparent;
      }
      footer .footlinks a {
        font-size: 14px;
      }
      footer .right {
        margin-left: auto;
      }

      /* ---- mobile ---- */
      @media (max-width: 767px) {
        .container {
          padding: 0 var(--sp-lg);
        }
        .hero,
        .band {
          padding: var(--sp-2xl) 0;
        }
        h1 {
          font-size: 36px;
        }
        .config {
          padding: var(--sp-lg);
        }
        .sample .container,
        .grid3 {
          gap: var(--sp-md);
        }
        /* Category rows: keep name and count readable when narrow. */
        .search-row {
          flex-direction: column;
        }
        .cat .cmeta {
          font-size: 13px;
        }
        .cat .cname {
          font-size: 15px;
        }
        #selected li .gmeta {
          font-size: 13px;
        }
        #price {
          font-size: 34px;
        }
      }

/* ============================================================= *
 *  Shared additions (were per-page inline styles before app.css)
 * ============================================================= */

/* ---- legal prose (privacy / voorwaarden / cookies) ---- */
main.prose {
  max-width: 760px;
  margin: 0 auto;
  padding: var(--sp-3xl) var(--sp-xl);
}
main.prose h1 {
  font: 900 40px/1.1 var(--ui);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--sp-sm);
}
main.prose .updated {
  color: var(--mute);
  font-size: 14px;
  margin: 0 0 var(--sp-2xl);
}
main.prose h2 {
  font: 600 24px/1.3 var(--ui);
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: var(--sp-2xl) 0 var(--sp-sm);
}
main.prose h3 {
  font: 600 18px/1.4 var(--ui);
  color: var(--ink);
  margin: var(--sp-xl) 0 var(--sp-xs);
}
main.prose p,
main.prose li {
  color: var(--body);
  max-width: 72ch;
  line-height: 1.6;
}
main.prose ul {
  padding-left: var(--sp-xl);
}
main.prose li {
  margin: var(--sp-xs) 0;
}
main.prose a {
  color: var(--ink);
  text-decoration: underline;
}
main.prose code {
  background: var(--canvas);
  border: 1px solid var(--hairline-soft);
  border-radius: var(--r-sm);
  padding: 1px 6px;
  font-size: 0.9em;
}
@media (max-width: 767px) {
  main.prose h1 {
    font-size: 32px;
  }
}

/* ---- centered single-card pages (thanks, 404) ---- */
body.center {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-xl);
  text-align: center;
}
.card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-card);
  padding: var(--sp-3xl) var(--sp-2xl);
  max-width: 560px;
}
.card .dot {
  width: 56px;
  height: 56px;
  margin: 0 auto var(--sp-lg);
  border-radius: var(--r-pill);
  background: var(--canvas-soft);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  font-weight: 600;
  color: var(--positive);
}
.card h1 {
  font: 900 28px/1.2 var(--ui);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0 0 var(--sp-md);
}
.card p {
  color: var(--body);
  margin: 0 0 var(--sp-sm);
}
.card .fine {
  font-size: 14px;
  color: var(--mute);
  margin-bottom: var(--sp-lg);
}
.card .fine a {
  color: var(--ink);
  text-decoration: none;
}
.card .fine a:hover {
  text-decoration: underline;
}

/* ---- 404 ---- */
.notfound .code {
  font: 900 96px/1 var(--ui);
  letter-spacing: -0.02em;
  color: var(--primary);
  margin: 0;
}
.notfound h1 {
  font: 900 32px/1.2 var(--ui);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: var(--sp-lg) 0 var(--sp-sm);
}
.notfound p {
  margin: 0 0 var(--sp-xl);
  color: var(--body);
}

/* ---- photo band (installer work, maps to the lead categories) ---- */
/* Match the sample section: tighten the heading-to-subtitle gap to sp-md. */
.photos h2.section {
  margin-bottom: var(--sp-md);
}
.photos .photos-lead {
  font-size: 16px;
  line-height: 1.5;
  color: var(--body);
  max-width: 60ch;
  margin: 0 0 var(--sp-md);
}
.photostrip {
  margin-top: var(--sp-2xl);
}
.photostrip figure {
  margin: 0;
}
.photostrip img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-xl);
  display: block;
  background: var(--hairline-soft);
}
.photostrip figcaption {
  margin-top: var(--sp-md);
  font: 600 15px/1.4 var(--ui);
  color: var(--ink);
}