@charset "UTF-8";
  /* ──────── Fonts (lokaal gehost, AVG-veilig, geen render-blocking external request) ──────── */
  @font-face {
    font-family: 'Jost';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Jost-VariableFont_wght.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Jost';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('../fonts/Jost-Italic-VariableFont_wght.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/PlayfairDisplay-VariableFont_wght.woff2') format('woff2');
  }
  @font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400 900;
    font-display: swap;
    src: url('../fonts/PlayfairDisplay-Italic-VariableFont_wght.woff2') format('woff2');
  }

  :root {
    /* Vast palet: wit basis, champagne accenten, forest-anchor */
    --bone: #FFFFFF;          /* hoofdachtergrond: zuiver wit */
    --bone-deep: #F6F4F3;     /* zachte warm-witte secties */
    --paper: #F6F4F3;         /* card/sectie-achtergrond */
    --ink: #1A1916;           /* tekst graphite (warm-zwart) */
    --ink-soft: #3a3530;
    --mute: #6B655E;
    --whisper: #a39a8e;
    --sand: #D4C1A6;          /* licht champagne */
    --sand-deep: #A98455;     /* deeper champagne-gold (hover-states) */
    --sand-soft: #E4C4A4;     /* warm champagne (donkere bg's) */
    --eyebrow: #b9a16b;       /* champagne-olive voor eyebrows op licht */
    --mocha: #746560;         /* warm taupe voor foto-gradients */
    --forest: #1e3b2e;        /* bottle-green anchor */
    --forest-light: #2d5240;  /* iets lichter forest voor hover */
    --line: rgba(26, 25, 22, 0.08);
    --line-warm: rgba(169, 132, 85, 0.22);
    --error: #b34a3a;         /* form-validatie + foutmeldingen */
  }

  * { margin: 0; padding: 0; box-sizing: border-box; }
  html { scroll-behavior: smooth; }
  body {
    background: var(--bone);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 1.125rem;
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
  }

  ::selection { background: var(--sand); color: var(--paper); }

  /* Anchor-reset: anchors mogen nooit standaard onderlijning of brand-blauw krijgen.
     Specifieke links die wel een underline willen krijgen 'border-bottom' of expliciete 'text-decoration: underline'. */
  a { color: inherit; text-decoration: none; }

  /* ──────── Header ──────── */
  header {
    padding: 26px 48px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    grid-template-areas: "left mid right";
    align-items: center;
    gap: 32px;
    background: var(--bone);
    position: sticky;
    top: 0;
    z-index: 50;
    border-bottom: 1px solid var(--line);
    transition: padding 0.3s ease;
  }
  /* Scroll-shrink: na ~20px scroll krimpt header padding */
  html.is-scrolled header { padding: 16px 48px; }
  .header-right {
    grid-area: right;
    justify-self: end;
    display: flex;
    align-items: center;
    gap: 18px;
    /* Hoogte stabiel houden of de taal-switcher nu wel/niet getoond wordt (amster.i18n_enabled).
       De .lang-switch was ~41px (de hoogste in deze cel); zonder switcher valt 'ie terug op de
       38px phone-link. Deze min-height houdt de header-hoogte gelijk, zodat alle sticky-offsets
       (section-nav, topic-pills, page-sidebar) blijven kloppen en i18n-re-enable niks verschuift. */
    min-height: 41px;
  }
  .header-right .lang-switch + .phone-link {
    margin-left: 4px;
    padding-left: 16px;
    border-left: 1px solid var(--line);
  }

  /* ──────── Menu overlay (left sidebar) ──────── */
  .menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(26, 25, 22, 0.18);
    z-index: 190;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s;
  }
  .menu-toggle-checkbox:checked ~ .menu-backdrop {
    opacity: 1;
    visibility: visible;
  }

  .menu-overlay {
    position: fixed;
    top: 0; left: 0;
    width: min(480px, 88vw);
    height: 100vh;        /* fallback voor browsers zonder dvh-support */
    height: 100dvh;       /* dynamic viewport: respecteert iOS Safari bottom-toolbar */
    background: var(--bone);
    z-index: 250;
    transform: translateX(-100%);
    transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1);
    padding: 120px 56px 32px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--line);
    overflow: hidden; /* sidebar zelf scrollt niet; views doen het wel */
  }
  .menu-toggle-checkbox:checked ~ .menu-overlay {
    transform: translateX(0);
  }

  /* Hide radio inputs visually */
  .submenu-view-radio {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }

  /* Close-X linksboven in sidebar */
  .overlay-close-x {
    position: absolute;
    top: 28px;
    left: 36px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(26, 25, 22, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    transition: background 0.25s ease;
  }
  .overlay-close-x:hover { background: rgba(26, 25, 22, 0.1); }
  /* Alleen de twee aria-hidden balkjes zijn het X-ontwerp; de derde span is
     sr-only-voorleestekst en mag NOOIT balkje-styling erven (positionele
     first/last-child-selectors breken zodra er een tekst-kind bij komt). */
  .overlay-close-x span[aria-hidden] {
    position: absolute;
    width: 15px;
    height: 1.5px;
    background: var(--ink);
    transition: background 0.25s ease;
  }
  .overlay-close-x span[aria-hidden]:nth-child(1) { transform: rotate(45deg); }
  .overlay-close-x span[aria-hidden]:nth-child(2) { transform: rotate(-45deg); }
  .overlay-close-x:hover span[aria-hidden] { background: var(--forest); }

  /* View switching: views scrollen binnen sidebar als content te lang is, bottom blijft sticky onder */
  .overlay-views {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;            /* belangrijk: laat container krimpen onder flex */
    overflow-y: auto;          /* scroll binnen de views, niet de hele sidebar */
    margin-right: -16px;       /* visuele compensatie voor scrollbar */
    padding-right: 16px;
  }
  .overlay-view {
    display: none;
    flex-direction: column;
    flex: 1;
  }
  #view-main:checked ~ .menu-overlay .overlay-view-main { display: flex; }
  #view-aanbod:checked ~ .menu-overlay .overlay-view-aanbod { display: flex; }
  #view-werkgebied:checked ~ .menu-overlay .overlay-view-werkgebied { display: flex; }
  #view-diensten:checked ~ .menu-overlay .overlay-view-diensten { display: flex; }
  #view-over-ons:checked ~ .menu-overlay .overlay-view-over-ons { display: flex; }

  /* Wanneer een submenu actief is: verberg de main-nav specifieke utility */

  /* Main view: vertikaal verdeelde nav */
  .overlay-view-main .overlay-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .menu-overlay nav.overlay-nav {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .overlay-nav-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 0;
    text-decoration: none;
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    position: relative;
    transition: color 0.25s ease;
  }
  .overlay-nav-item .label {
    position: relative;
    padding-bottom: 4px;
  }
  .overlay-nav-item .label::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 0;
    height: 1px;
    background: var(--ink);
    transition: width 0.3s ease;
  }
  .overlay-nav-item:hover .label::after { width: 100%; }
  .overlay-nav-item .chevron {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
    flex-shrink: 0;
  }
  .overlay-nav-item:hover .chevron { background: rgba(185, 161, 107, 0.18); }
  .overlay-nav-item .chevron svg {
    width: 12px;
    height: 12px;
    stroke: var(--ink);
    transition: stroke 0.25s ease, transform 0.3s ease;
  }
  .overlay-nav-item:hover .chevron svg { stroke: var(--forest); transform: translateX(2px); }
  .overlay-nav-item:hover { color: var(--forest); }

  /* ─── Submenu view: search bar ─── */
  .overlay-search {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
  }
  .overlay-search svg {
    width: 18px;
    height: 18px;
    color: var(--mute);
    flex-shrink: 0;
  }
  .overlay-search input {
    flex: 1;
    border: none;
    background: transparent;
    outline: none;
    font-family: 'Jost', sans-serif;
    font-size: 1.05rem;
    color: var(--ink);
    padding: 4px 0;
  }
  .overlay-search input::placeholder { color: var(--mute); }

  /* ─── Submenu view: back ─── */
  .overlay-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mute);
    cursor: pointer;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--line);
    width: 100%;
    transition: color 0.25s ease;
  }
  .overlay-back:hover { color: var(--forest); }
  .overlay-back svg {
    width: 14px;
    height: 14px;
    transition: transform 0.25s ease;
  }
  .overlay-back:hover svg { transform: translateX(-3px); }

  /* ─── Submenu view: section title ─── */
  .overlay-section-title {
    font-family: 'Jost', sans-serif;
    font-size: 1.25rem;
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
    margin-bottom: 24px;
  }

  /* ─── Submenu view: items list ─── */
  .overlay-submenu-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .overlay-submenu-list li a {
    display: inline-block;
    padding: 12px 0;
    color: var(--ink-soft);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 1.1rem;
    transition: color 0.2s ease, transform 0.25s ease;
  }
  .overlay-submenu-list li a:hover {
    color: var(--forest);
    transform: translateX(4px);
  }
  .overlay-submenu-list li a .sparkle { color: var(--eyebrow); margin-left: 4px; }

  /* Werkgebied (9 items) + Diensten (6 items) krijgen 2 kolommen voor verticale compactheid */
  .overlay-view-werkgebied .overlay-submenu-list,
  .overlay-view-diensten .overlay-submenu-list,
  .overlay-view-over-ons .overlay-submenu-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 28px;
  }

  /* ─── Persistent bottom block (krimpt niet bij overflow) ─── */
  .menu-overlay-bottom {
    border-top: 1px solid var(--line);
    padding-top: 24px;
    margin-top: 32px;
    flex-shrink: 0;
  }

  /* ─── Utility items (Inloggen, Wat is mijn woning waard, Favorieten) ─── */
  .overlay-utility {
    list-style: none;
    padding: 0;
    margin: 0 0 24px 0;
    display: flex;
    flex-direction: column;
  }
  .overlay-utility li + li { border-top: 1px solid var(--line); }
  .overlay-utility a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 0;
    color: var(--ink);
    text-decoration: none;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    transition: color 0.2s ease;
  }
  .overlay-utility a:hover { color: var(--forest); }
  .overlay-utility svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .overlay-lang {
    display: flex;
    align-items: baseline;
    gap: 14px;
    margin-bottom: 24px;
  }
  .overlay-lang-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--mute);
  }
  .overlay-lang-select {
    position: relative;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
  }
  .overlay-lang-select::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    transform: rotate(45deg);
    margin-bottom: 4px;
    transition: transform 0.25s ease;
  }
  .overlay-lang-select:hover { color: var(--forest); }
  .overlay-lang-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    background: var(--bone);
    border: 1px solid var(--line);
    min-width: 140px;
    margin-bottom: 8px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
  }
  .overlay-lang-select:hover .overlay-lang-dropdown,
  .overlay-lang-select:focus-within .overlay-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .overlay-lang-dropdown a {
    display: block;
    padding: 8px 16px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .overlay-lang-dropdown a:hover { background: var(--paper); color: var(--forest); }
  .overlay-lang-dropdown a.active { color: var(--forest); font-weight: 500; }

  .overlay-socials {
    display: flex;
    gap: 18px;
    align-items: center;
  }
  .overlay-socials a {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transition: color 0.25s ease, transform 0.25s ease;
  }
  .overlay-socials a:hover { color: var(--forest); transform: translateY(-1px); }
  .overlay-socials svg { width: 19px; height: 19px; }
  /* ──────── Minimal header navigation ──────── */
  .header-left {
    grid-area: left;
    justify-self: start;
    display: flex;
    align-items: center;
    gap: 28px;
    font-family: 'Jost', sans-serif;
    font-size: 1.2rem;
    font-weight: 400;
  }
  .header-left a {
    color: var(--ink);
    text-decoration: none;
    padding: 4px 0;
    transition: color 0.25s ease;
  }
  .header-left a:hover { color: var(--forest); }

  /* Language switcher (dropdown, geen vlaggen) */
  .lang-switch {
    position: relative;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
  }
  .lang-current {
    cursor: pointer;
    color: var(--ink);
    padding: 8px 4px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.25s ease;
  }
  .lang-current::after {
    content: '';
    width: 6px; height: 6px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    transform: rotate(45deg);
    margin-bottom: 3px;
    margin-left: 2px;
    transition: transform 0.25s ease, border-color 0.25s ease;
  }
  .lang-switch:hover .lang-current { color: var(--forest); }
  .lang-switch:hover .lang-current::after { border-color: var(--forest); transform: rotate(225deg) translate(2px, 2px); }
  .lang-dropdown {
    position: absolute;
    top: 100%;
    right: 0;
    background: var(--bone);
    border: 1px solid var(--line);
    min-width: 80px;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    z-index: 60;
  }
  .lang-switch:hover .lang-dropdown,
  .lang-switch:focus-within .lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .lang-dropdown a {
    display: block;
    padding: 10px 16px;
    color: var(--ink);
    text-decoration: none;
    font-size: 0.95rem;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .lang-dropdown a:hover { background: var(--paper); color: var(--forest); }
  .lang-dropdown a.active { color: var(--forest); font-weight: 500; }

  /* Phone icon (SVG) */
  .phone-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--ink);
    text-decoration: none;
    width: 38px; height: 38px;
    transition: color 0.25s ease, transform 0.25s ease;
  }
  .phone-link:hover { color: var(--forest); transform: translateY(-1px); }
  .phone-link svg { width: 19px; height: 19px; }

  /* Hamburger (CSS-only) */
  .menu-toggle-checkbox {
    position: fixed;
    top: 0;
    left: 0;
    width: 1px;
    height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .hamburger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
    transition: opacity 0.25s ease;
  }
  .hamburger-bars {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 22px;
  }
  .hamburger-bars span {
    display: block;
    width: 22px;
    height: 1.5px;
    background: var(--ink);
    transition: transform 0.35s ease, opacity 0.25s ease, background 0.25s ease;
    transform-origin: center;
  }
  .hamburger:hover .hamburger-bars span { background: var(--forest); }
  .hamburger-label {
    font-family: 'Jost', sans-serif;
    font-weight: 600;
    font-size: 1.2rem;
    color: var(--ink);
    transition: color 0.25s ease;
  }
  .hamburger:hover .hamburger-label { color: var(--forest); }

  .wordmark {
    grid-area: mid;
    text-align: center;
    text-decoration: none;
    color: inherit;
    transition: color 0.25s ease;
  }
  a.wordmark:hover .wordmark-name { color: var(--forest); }
  .wordmark-name {
    font-family: 'Jost', sans-serif;
    font-size: 22px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ink);
    line-height: 1;
    transition: color 0.25s ease;
  }
  .wordmark-name em {
    font-family: 'Jost', sans-serif;
    font-style: italic;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--forest);
    margin-left: 4px;
  }

  /* ──────── Hero ──────── */
  .hero {
    padding: 70px 48px 100px;
    display: grid;
    grid-template-columns: 0.95fr 1.1fr;
    gap: 70px;
    align-items: center;
  }
  .hero-left {
    max-width: 560px;
  }
  .hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 36px;
  }
  .hero-eyebrow::before {
    content: '';
    width: 8px;
    height: 1px;
    background: var(--eyebrow);
  }
  .hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1.08;
    letter-spacing: -0.008em;
    color: var(--ink);
    margin-bottom: 32px;
  }
  .hero-body {
    font-size: 1.125rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 44px;
    max-width: 460px;
    font-weight: 400;
  }
  .hero-cta-row {
    display: flex;
    gap: 18px;
    align-items: center;
    flex-wrap: wrap;
  }
  .btn-primary {
    background: var(--forest);
    color: var(--paper);
    padding: 16px 28px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .btn-primary::after { content: '→'; transition: transform 0.3s ease; }
  .btn-primary:hover { background: var(--sand-deep); }
  .btn-primary:hover::after { transform: translateX(4px); }
  .btn-ghost {
    color: var(--ink);
    padding: 16px 24px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    border-radius: 0;
    border: 1px solid var(--line);
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--paper);
  }
  .btn-ghost:hover { border-color: var(--sand); color: var(--sand-deep); }

  /* Hero mosaic */
  .hero-mosaic {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 14px;
    height: 640px;
    position: relative;
  }
  .mosaic-cell {
    position: relative;
    overflow: hidden;
    background-color: var(--bone-deep);
  }
  .mosaic-cell::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--mosaic-bg);
    background-size: cover;
    background-position: center;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .mosaic-cell:hover::before { transform: scale(1.04); }
  /* <img fetchpriority=high> voor LCP-optim. Vervangt CSS-bg ::before zodra image aanwezig. */
  .mosaic-cell-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
    z-index: 0;
  }
  .mosaic-cell:hover .mosaic-cell-img { transform: scale(1.04); }
  .mosaic-cell:has(.mosaic-cell-img)::before { display: none; }
  .mosaic-cell::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(26, 25, 22, 0.3) 100%);
    z-index: 1;
  }
  .mosaic-label {
    position: absolute;
    bottom: 18px;
    left: 18px;
    color: var(--paper);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    z-index: 2;
  }
  .mosaic-label em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 16px;
    text-transform: none;
    letter-spacing: 0;
    display: block;
    margin-top: 2px;
    color: var(--sand-soft);
  }
  .mosaic-badge {
    position: absolute;
    top: 18px;
    right: 18px;
    background: var(--paper);
    padding: 6px 14px;
    border-radius: 0;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.08em;
    color: var(--ink);
    z-index: 2;
  }
  .mosaic-badge .sparkle { color: var(--sand-deep); }

  .mosaic-cell-1 {
    grid-row: 1 / 3;
  }
  .mosaic-cell-2 {
    --mosaic-bg: url('../images/4.webp');
  }
  .mosaic-cell-3 {
    --mosaic-bg: url('../images/2.webp');
  }

  /* ──────── Centered tagline section ──────── */
  .tagline-section {
    padding: 110px 48px;
    text-align: center;
  }
  .tagline-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 28px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .tagline-eyebrow::before, .tagline-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .tagline-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1.12;
    color: var(--ink);
    max-width: 880px;
    margin: 0 auto 24px;
    letter-spacing: -0.005em;
  }
  .tagline-title em {
    font-style: normal;
    color: inherit;
  }
  .tagline-body {
    font-size: 1.125rem;
    color: var(--mute);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.7;
  }
  /* De titel-regels als blocks (vervangt de <br>; visueel identiek). */
  .tagline-title .tagline-regel { display: block; }

  /* Scroll-onthulling van de tagline-titel (progressive enhancement, geen JS):
     de tekst staat op 20% inkt en licht per REGEL in leesrichting op, gekoppeld
     aan de scrollpositie (terugscrollen draait het terug): eerst regel 1 van
     links naar rechts, daarna regel 2. Mechaniek: transparante tekstkleur + een
     inkt-gradient die als achtergrond op de tekstvorm geclipt wordt en via een
     scroll-driven animation doorschuift; de regels krijgen opeenvolgende
     animation-ranges. Browsers zonder support of met reduced-motion zien
     gewoon de volle titel. */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      /* EEN gedeelde tijdlijn op de sectie i.p.v. per span: de sectie is veel
         hoger dan een tekstregel, dus elk procent-venster wordt een langere
         scroll-afstand (rustiger effect), en beide regels meten op dezelfde
         schaal zodat de overlap exact klopt (per-span-tijdlijnen liepen
         onvoorspelbaar uit elkaar). */
      .tagline-section { view-timeline-name: --tagline-onthul-tl; }
      .tagline-title .tagline-regel {
        background-image: linear-gradient(90deg, var(--ink) 35%, color-mix(in srgb, var(--ink) 20%, transparent) 65%);
        background-size: 250% 100%;
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        animation: tagline-onthul linear both;
        animation-timeline: --tagline-onthul-tl;
      }
      /* Zelfde specificiteit als de animation-shorthand hierboven, anders wint
         de impliciete animation-range-reset van die shorthand en lopen beide
         regels op de default range (= tegelijk). */
      .tagline-title .tagline-regel-1 { animation-range: cover 18% cover 46%; }
      .tagline-title .tagline-regel-2 { animation-range: cover 40% cover 62%; }
      @keyframes tagline-onthul {
        from { background-position: 100% 0; }
        to   { background-position: 0% 0; }
      }
    }
  }

  /* Inline dienst-links in het diensten-statement (zelfde patroon als
     .article-body a / .faq-answer a; zonder dit maakt de anchor-reset ze
     onzichtbaar). Iets donkerder dan de --mute-bodytekst zodat ze opvallen. */
  .tagline-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .tagline-body a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }

  /* ──────── Over ons / team ──────── */
  .home-team {
    padding: 80px 48px 120px;
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 70px;
    align-items: center;
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
  }
  .home-team-photo {
    aspect-ratio: 16 / 11;
    background-image: url('../images/team-av-light.jpg'); /* fallback voor onaanwezige Panel-upload */
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    position: relative;
    overflow: hidden;
  }
  .home-team-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    z-index: 0;
  }
  .home-team-photo::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(160deg, transparent 50%, rgba(26, 25, 22, 0.35));
  }
  .home-team-caption {
    position: absolute;
    bottom: 28px;
    left: 28px;
    color: var(--paper);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    z-index: 2;
  }
  .home-team-content {
    max-width: 460px;
  }
  .home-team-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .home-team-eyebrow::before {
    content: '';
    width: 8px;
    height: 1px;
    background: var(--eyebrow);
  }
  .home-team-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(40px, 4.5vw, 60px);
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 20px;
    letter-spacing: -0.005em;
  }
  .home-team-title em { font-style: normal; color: inherit; }
  .home-team-body {
    font-size: 1.125rem;
    color: var(--mute);
    margin-bottom: 32px;
    line-height: 1.6;
  }
  .home-team-link {
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    border-bottom: 1px solid var(--sand);
    padding-bottom: 4px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: gap 0.3s ease;
  }
  .home-team-link:hover { gap: 16px; }

  /* ──────── Aanbod editorial grid ──────── */
  .aanbod {
    padding: 110px 48px;
    background: var(--paper);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
  .aanbod-head {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 60px;
    align-items: end;
    margin-bottom: 70px;
  }
  .aanbod-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(40px, 5vw, 64px);
    line-height: 1.02;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .aanbod-title em { font-style: normal; color: inherit; }
  .aanbod-meta {
    text-align: right;
    font-size: 1rem;
    color: var(--mute);
    line-height: 1.7;
  }
  .aanbod-meta a {
    color: var(--ink);
    text-decoration: none;
    border-bottom: 1px solid var(--sand);
    padding-bottom: 2px;
  }
  .aanbod-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 32px 28px;
  }
  .aanbod-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    transition: transform 0.4s ease;
  }
  .aanbod-card:hover { transform: translateY(-4px); }
  .aanbod-card-photo {
    aspect-ratio: 5 / 4;
    position: relative;
    overflow: hidden;
    margin-bottom: 20px;
  }
  /* <img> ipv background-image voor Google Image Search + lazy-load + alt SEO.
     Legacy .aanbod-card-photo-bg rules behouden voor backwards-compat. */
  .aanbod-card-photo-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .aanbod-card:hover .aanbod-card-photo-bg { transform: scale(1.05); }
  .aanbod-card-photo-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .aanbod-card:hover .aanbod-card-photo-img { transform: scale(1.05); }
  .aanbod-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--paper);
    padding: 6px 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    z-index: 2;
  }
  /* Legacy pill-styling — vervangen door .aanbod-card-ribbon voor card-context.
     Behouden voor backwards-compat als andere templates nog `.aanbod-tag.exclusief` gebruiken. */
  .aanbod-tag.exclusief {
    background: var(--forest);
    color: var(--sand);
    letter-spacing: 0.14em;
  }
  .aanbod-tag.exclusief::after { content: ' ✦'; color: var(--sand-soft); }

  /* Exclusief-ribbon rechtsboven (clone listing-hero-sold-ribbon, schaal naar card-size) */
  .aanbod-card-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 120px;
    height: 120px;
    overflow: hidden;
    pointer-events: none;
    z-index: 3;
  }
  .aanbod-card-ribbon span {
    position: absolute;
    top: 24px;
    right: -40px;
    width: 160px;
    transform: rotate(45deg);
    background: var(--forest);
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-align: center;
    padding: 6px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  }
  @media (max-width: 760px) {
    .aanbod-card-ribbon { width: 90px; height: 90px; }
    .aanbod-card-ribbon span {
      top: 18px;
      right: -48px;
      width: 130px;
      font-size: 9px;
      padding: 5px 0;
    }
  }
  .aanbod-card-area {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 8px;
  }
  .aanbod-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 30px;
    font-weight: 400;
    line-height: 1.05;
    color: var(--ink);
    margin-bottom: 10px;
  }
  /* scope-restricted clamp voor /woningen + /verkocht overzicht-cards.
     Homepage 3-cards (geen .aanbod-grid-wrap parent) blijft 30px.
     body.view-list override heeft hogere specificity en wint in list-view. */
  .aanbod-grid-wrap .aanbod-card-title {
    font-size: clamp(18px, 2.4vw, 30px);
    line-height: 1.15;
  }
  .aanbod-card-address {
    font-size: 1rem;
    color: var(--mute);
    line-height: 1.55;
    margin-bottom: 18px;
  }
  .aanbod-card-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 14px;
    border-top: 1px solid var(--line);
  }
  .aanbod-card-specs {
    font-size: 13px;
    color: var(--mute);
  }
  .aanbod-card-specs .dot { color: var(--sand); margin: 0 6px; }
  .aanbod-card-price {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--ink);
  }
  .aanbod-card-price em {
    font-style: italic;
    color: var(--forest);
    font-size: 15px;
  }

  /* ──────── /woningen overzicht: status-tabs + filter-bar + results-bar + pagination ──────── */
  .aanbod-grid-wrap {
    padding: 48px 48px 24px;
  }
  .status-tabs {
    display: flex;
    gap: 38px;
    padding: 0 48px;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    overflow-y: hidden;
    -ms-overflow-style: none;
  }
  .status-tabs::-webkit-scrollbar { display: none; }
  .status-tab {
    padding: 22px 0;
    color: var(--mute);
    position: relative;
    font-family: 'Jost', sans-serif;
    font-size: 1.05rem;
    font-weight: 400;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: color 0.25s ease;
  }
  .status-tab:hover { color: var(--ink); }
  .status-tab.active { color: var(--ink); font-weight: 500; }
  .status-tab.active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--forest);
  }
  .status-tab .sparkle { color: var(--eyebrow); margin-left: 4px; }
  .status-tab .count {
    color: var(--whisper);
    font-size: 0.85em;
    margin-left: 6px;
    font-weight: 400;
  }
  .status-tab.active .count { color: var(--mute); }

  .filter-bar {
    padding: 24px 48px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    align-items: center;
    border-bottom: 1px solid var(--line);
  }
  .filter-chip {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    background: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  }
  .filter-chip:hover { border-color: var(--ink); color: var(--forest); }
  .filter-chip[data-open] { border-color: var(--ink); color: var(--ink); }
  .filter-chip[data-open] svg { transform: rotate(180deg); }

  .filter-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    min-width: 220px;
    background: var(--paper);
    border: 1px solid var(--line);
    padding: 6px 0;
    z-index: 50;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    cursor: default;
  }
  .filter-dropdown-option {
    display: block;
    width: 100%;
    padding: 10px 18px;
    text-align: left;
    background: transparent;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
  }
  .filter-dropdown-option:hover { background: var(--bone-deep); color: var(--forest); }
  .filter-dropdown-empty {
    padding: 10px 18px;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-style: italic;
    color: var(--mute);
    white-space: nowrap;
  }
  .filter-dropdown-option.active { color: var(--forest); font-weight: 500; }
  .filter-dropdown-option.active::before {
    content: '✓ ';
    margin-right: 4px;
    color: var(--forest);
  }
  .filter-chip.active {
    border-color: var(--forest);
    color: var(--forest);
    background: var(--bone-deep);
  }
  .filter-chip-label { color: inherit; }
  .filter-chip-value {
    color: var(--mute);
    font-size: 0.9em;
    margin-left: -2px;
  }
  .filter-chip.active .filter-chip-value { color: var(--forest); }
  .filter-chip svg {
    width: 9px; height: 9px;
    stroke: currentColor;
    transition: transform 0.25s ease;
    margin-left: 2px;
  }
  .filter-chip:hover svg { transform: translateY(1px); }
  .filter-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px;
    border: 1px solid var(--line);
    background: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .filter-more:hover {
    border-color: var(--ink);
    color: var(--forest);
  }
  .filter-more svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    flex-shrink: 0;
  }
  .filter-clear {
    margin-left: auto;
    color: var(--mute);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    cursor: pointer;
    padding: 10px 18px;
    border: 1px solid transparent;
    background: transparent;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .filter-clear:hover {
    color: var(--forest);
    border-color: var(--line);
  }

  .results-bar {
    padding: 22px 48px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    border-bottom: 1px solid var(--line);
  }
  .results-count {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--mute);
  }
  .results-count strong { color: var(--ink); font-weight: 500; }
  .results-controls {
    display: flex;
    gap: 28px;
    align-items: center;
  }
  .sort-wrapper {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
  }
  .sort-label { color: var(--mute); }
  .sort-select {
    color: var(--ink);
    cursor: pointer;
    background: transparent;
    border: none;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    padding: 0 18px 0 0;
    appearance: none;
    -webkit-appearance: none;
    background-image:
      linear-gradient(45deg, transparent 50%, currentColor 50%),
      linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: calc(100% - 8px) 50%, calc(100% - 4px) 50%;
    background-size: 4px 4px, 4px 4px;
    background-repeat: no-repeat;
    transition: color 0.25s ease;
  }
  .sort-select:hover { color: var(--forest); }
  .sort-select:focus { outline: none; color: var(--forest); }
  .view-toggle {
    display: flex;
    border: 1px solid var(--line);
  }
  .view-toggle button {
    padding: 9px 13px;
    background: var(--bone);
    color: var(--mute);
    border: none;
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease;
  }
  .view-toggle button + button { border-left: 1px solid var(--line); }
  .view-toggle button:hover { color: var(--ink); }
  .view-toggle button.active {
    color: var(--ink);
    background: var(--bone-deep);
  }
  .view-toggle button svg { width: 16px; height: 16px; }

  .aanbod-tag.beschikbaar {
    background: var(--paper);
    color: var(--ink);
  }
  .aanbod-tag.onder-bod {
    background: var(--sand);
    color: var(--ink);
  }
  .aanbod-tag.verkocht-ov {
    background: var(--ink-soft);
    color: var(--bone);
  }
  .aanbod-tag.verkocht {
    background: var(--forest);
    color: var(--bone);
    letter-spacing: 0.14em;
  }

  .aanbod-card-specs-extended { display: none; }

  body.view-list .aanbod-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  body.view-list .aanbod-card {
    display: grid;
    grid-template-columns: minmax(320px, 25%) 1fr;
    column-gap: 44px;
    row-gap: 0;
    padding: 36px 0;
    border-bottom: 1px solid var(--line);
    grid-template-rows: auto auto auto 1fr auto;
    grid-template-areas:
      "photo area"
      "photo title"
      "photo address"
      "photo ."
      "photo meta";
  }
  body.view-list .aanbod-card:first-child { padding-top: 0; }
  body.view-list .aanbod-card:last-child { border-bottom: none; }
  body.view-list .aanbod-card:hover { transform: none; }
  body.view-list .aanbod-card:hover .aanbod-card-photo-bg { transform: scale(1.03); }
  body.view-list .aanbod-card:hover .aanbod-card-photo-img { transform: scale(1.03); }
  body.view-list .aanbod-card-photo {
    grid-area: photo;
    margin-bottom: 0;
    aspect-ratio: 4 / 3;
    height: 100%;
  }
  body.view-list .aanbod-card-area {
    grid-area: area;
    margin-bottom: 14px;
  }
  body.view-list .aanbod-card-title {
    grid-area: title;
    font-size: clamp(28px, 2.4vw, 36px);
    margin-bottom: 10px;
    line-height: 1.05;
  }
  body.view-list .aanbod-card-address {
    grid-area: address;
    margin-bottom: 22px;
    font-size: 1.05rem;
  }
  body.view-list .aanbod-card-meta {
    grid-area: meta;
    align-items: flex-end;
    padding-top: 18px;
    gap: 16px;
  }
  body.view-list .aanbod-card-specs {
    font-size: 1rem;
    color: var(--ink);
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  body.view-list .aanbod-card-specs-extended {
    display: block;
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--whisper);
    font-weight: 400;
  }
  body.view-list .aanbod-card-price {
    font-size: 24px;
    text-align: right;
  }

  .aanbod-empty {
    padding: 80px 48px 120px;
    text-align: center;
    color: var(--mute);
    font-size: 1.05rem;
  }

  /* Aangekocht placeholder-callout */
  .aangekocht-placeholder {
    padding: 80px 48px 120px;
    background: var(--bone);
  }
  .aangekocht-placeholder-inner {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
    background: var(--bone-deep);
    padding: 56px 48px 56px;
    border: 1px solid var(--line);
  }
  .aangekocht-placeholder-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
  }
  .aangekocht-placeholder-eyebrow::before,
  .aangekocht-placeholder-eyebrow::after {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--eyebrow);
  }
  .aangekocht-placeholder-body {
    font-size: 1.05rem;
    color: var(--ink-soft);
    line-height: 1.65;
    margin-bottom: 32px;
  }
  .aangekocht-placeholder-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
  }
  .aangekocht-cta-primary {
    padding: 14px 28px;
    background: var(--forest);
    color: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.04em;
    transition: background 0.25s ease, color 0.25s ease;
  }
  .aangekocht-cta-primary:hover {
    background: var(--forest-light);
    color: var(--bone);
  }
  .aangekocht-cta-secondary {
    padding: 14px 24px;
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .aangekocht-cta-secondary:hover {
    color: var(--forest);
    border-color: var(--forest);
  }
  @media (max-width: 760px) {
    .aangekocht-placeholder { padding: 48px 24px 64px; }
    .aangekocht-placeholder-inner { padding: 36px 24px; }
    .aangekocht-placeholder-actions { flex-direction: column; gap: 14px; }
    .aangekocht-cta-primary, .aangekocht-cta-secondary { width: 100%; text-align: center; }
  }

  /* ──────── Service-strip (cross-audience bridge) ──────── */
  .service-strip {
    padding: 44px 48px;
    background: var(--bone-deep);
    border-top: 1px solid var(--line);
    text-align: center;
  }
  .service-strip-eyebrow {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 18px;
  }
  .service-strip-eyebrow::before,
  .service-strip-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .service-strip-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 6px 22px;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--ink);
  }
  .service-strip-list a {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 2px 0;
    border-bottom: 1px solid transparent;
    transition: color 0.25s ease, border-bottom-color 0.25s ease, gap 0.25s ease;
  }
  .service-strip-list a:hover {
    color: var(--forest);
    border-bottom-color: var(--eyebrow);
    gap: 10px;
  }
  .service-strip-list a::after {
    content: '→';
    font-size: 0.9em;
    color: var(--eyebrow);
  }
  .service-strip-list a .sparkle { color: var(--eyebrow); margin-left: 2px; }
  @media (max-width: 760px) {
    .service-strip { padding: 36px 24px; }
    .service-strip-list { gap: 8px 18px; font-size: 0.95rem; }
  }

  .pagination {
    padding: 56px 48px 80px;
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
  }
  .pagination a,
  .pagination button {
    min-width: 42px;
    padding: 10px 14px;
    text-align: center;
    border: 1px solid var(--line);
    color: var(--ink);
    background: none;
    font: inherit;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
  }
  .pagination a:hover,
  .pagination button:hover:not(:disabled) { border-color: var(--forest); color: var(--forest); }
  .pagination a.active,
  .pagination button.active {
    background: var(--forest);
    color: var(--bone);
    border-color: var(--forest);
  }
  .pagination button:disabled { cursor: default; }
  .pagination .gap {
    padding: 10px 4px;
    color: var(--whisper);
    letter-spacing: 0.1em;
  }
  .pagination .next, .pagination .prev {
    padding-left: 18px;
    padding-right: 18px;
    color: var(--mute);
  }
  .pagination .next::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }
  .pagination .prev::before { content: '← '; color: var(--eyebrow); margin-right: 4px; }
  /* Smalle schermen: compactere knoppen + wrap-vangnet — de venster-variant
     kan tot 7 elementen groeien (1 … 5 6 7 … 11) en mag nooit overlappen.
     Vorige/Volgende tonen alleen hun pijl (tekst op font-size 0, glyph in de
     pseudo op normale maat; de toegankelijke naam blijft gewoon de tekst) —
     zo past ook de breedste variant op één regel op een telefoon. */
  @media (max-width: 760px) {
    .pagination {
      flex-wrap: wrap;
      padding-left: 24px;
      padding-right: 24px;
      gap: 4px;
    }
    .pagination a,
    .pagination button {
      min-width: 34px;
      padding: 8px 9px;
      font-size: 0.88rem;
    }
    .pagination .next, .pagination .prev {
      font-size: 0;
      padding-left: 12px;
      padding-right: 12px;
      min-width: 40px;
    }
    .pagination .next::after, .pagination .prev::before {
      font-size: 0.95rem;
      margin: 0;
    }
  }
  /* Kleine telefoons (t/m iPhone SE-klasse, 375px): nóg iets compacter zodat
     ook de breedste 7-elementen-variant op één regel past. Op antieke
     320px-schermen blijft de wrap het nette vangnet. */
  @media (max-width: 400px) {
    /* gap blijft 4px (de latere 1000px-layoutregel wint; 4px past ruim). De
       knopmaten hieronder houden wél stand: het 1000px-blok zet sinds de
       cascade-fix alleen nog layout, geen maten. */
    .pagination a,
    .pagination button {
      min-width: 30px;
      padding: 8px 7px;
      font-size: 0.85rem;
    }
    .pagination .next, .pagination .prev {
      min-width: 34px;
      padding-left: 10px;
      padding-right: 10px;
    }
  }
  .pagination .prev.disabled,
  .pagination .next.disabled {
    color: var(--whisper);
    pointer-events: none;
    border-color: var(--line);
  }

  /* Intermediate breakpoint voor /woningen (homepage 3-cards blijft 3-col tot mobile-grens) */
  @media (max-width: 1100px) {
    .aanbod-grid-wrap .aanbod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .status-tabs { gap: 28px; padding: 0 32px; }
    .filter-bar { padding: 20px 32px; }
    .results-bar { padding: 18px 32px; }
    .aanbod-grid-wrap { padding: 36px 32px 16px; }
    .pagination { padding: 44px 32px 64px; }
    /* meta-row stack verticaal in 2-col grid om regel-break op te lossen */
    .aanbod-grid-wrap .aanbod-card-meta {
      flex-direction: column;
      align-items: flex-start;
      gap: 6px;
    }
  }

  /* ──────── Soft divider (alleen hoogte) ──────── */
  .soft-divider {
    height: 35px;
  }

  /* ──────── Werkgebieden destinations ──────── */
  .werkgebieden {
    padding: 60px 48px 120px;
    content-visibility: auto;
    contain-intrinsic-size: 1px 700px;
  }
  .werkgebieden-head {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 64px;
  }
  .werkgebieden-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .werkgebieden-eyebrow::before, .werkgebieden-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .werkgebieden-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.08;
    color: var(--ink);
    margin-bottom: 16px;
  }
  .werkgebieden-title em { font-style: normal; color: inherit; }
  .werkgebieden-sub {
    font-size: 1.125rem;
    color: var(--mute);
    line-height: 1.6;
  }
  .destinations {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
  }
  .destination {
    aspect-ratio: 3 / 4;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    display: block;
  }
  .destination-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
  }
  .destination:hover .destination-bg { transform: scale(1.06); }
  .destination::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(26, 25, 22, 0.7) 100%);
    z-index: 1;
  }
  .destination-1 .destination-bg { background-image: url('../images/1.webp'); }
  .destination-2 .destination-bg { background-image: url('../images/4.webp'); }
  .destination-3 .destination-bg { background-image: url('../images/3.webp'); }
  .destination-4 .destination-bg { background-image: url('../images/2.webp'); }
  .destination-content {
    position: absolute;
    bottom: 24px;
    left: 24px;
    right: 24px;
    color: var(--paper);
    z-index: 2;
  }
  .destination-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--sand-soft);
    margin-bottom: 8px;
  }
  .destination-name {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 30px;
    line-height: 1;
    margin-bottom: 8px;
  }
  .destination-count {
    font-size: 12px;
    color: rgba(245, 241, 234, 0.7);
  }
  .werkgebieden-all {
    text-align: center;
    margin-top: 40px;
  }
  .werkgebieden-all a {
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 28px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--paper);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  .werkgebieden-all a:hover { border-color: var(--sand); color: var(--sand-deep); }

  /* Onderaan-button aanbod-sectie: zelfde stijl als .werkgebieden-all / .reviews-cta.
     Alleen zichtbaar zodra de kaarten stapelen (<=1000px, mobiel+tablet); op desktop
     staat 'ie naast elkaar en is de meta-link bovenin genoeg. */
  .aanbod-all { display: none; text-align: center; margin-top: 44px; }
  .aanbod-all a {
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 28px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--bone);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  .aanbod-all a:hover { border-color: var(--forest); color: var(--forest); }
  .aanbod-all a span { transition: transform 0.3s ease; }
  .aanbod-all a:hover span { transform: translateX(4px); }

  /* ──────── Reviews ──────── */
  .reviews {
    padding: 110px 48px 90px;
    background: var(--bone-deep);
    content-visibility: auto;
    contain-intrinsic-size: 1px 800px;
  }
  .reviews-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 70px;
  }
  .reviews-eyebrow {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 16px;
  }
  .reviews-eyebrow::before, .reviews-eyebrow::after {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .reviews-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 56px);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.005em;
    margin-bottom: 18px;
  }
  .reviews-title em { font-style: normal; color: inherit; }
  .reviews-sub {
    font-size: 1.125rem;
    color: var(--mute);
    line-height: 1.6;
  }

  .reviews-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: var(--bone);
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
  }
  .review {
    padding: 48px 36px 40px;
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    position: relative;
  }
  .review:last-child { border-right: none; }
  .review-quote-mark {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 80px;
    line-height: 0.4;
    color: var(--eyebrow);
    margin-bottom: 24px;
    opacity: 0.5;
    height: 32px;
  }
  .review-stars {
    color: var(--eyebrow);
    font-size: 14px;
    letter-spacing: 0.18em;
    margin-bottom: 22px;
  }
  .review-text {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--ink-soft);
    margin-bottom: 32px;
  }
  .review-text::before { content: '"'; }
  .review-text::after { content: '"'; }
  .review-attribution {
    margin-top: auto;
    padding-top: 20px;
    border-top: 1px solid var(--line);
  }
  .review-name {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .review-context {
    font-size: 0.875rem;
    color: var(--mute);
  }
  .review-source {
    position: absolute;
    top: 48px;
    right: 36px;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
  }
  .reviews-cta {
    text-align: center;
    margin-top: 50px;
  }
  .reviews-cta a {
    color: var(--ink);
    text-decoration: none;
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 28px;
    border: 1px solid var(--line);
    border-radius: 0;
    background: var(--bone);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    transition: all 0.3s ease;
  }
  .reviews-cta a:hover { border-color: var(--forest); color: var(--forest); }

  /* ──────── Footer ──────── */
  /* ─── Footer ─── */
  footer {
    background: var(--bone);
    color: var(--ink);
    padding: 64px 48px 28px;
    border-top: 1px solid var(--line);
    content-visibility: auto;
    contain-intrinsic-size: 1px 600px;
  }
  .footer-top {
    display: grid;
    grid-template-columns: 1.8fr 1fr 1fr 1fr 1fr;
    gap: 48px;
    margin-bottom: 56px;
  }
  .footer-brand-mark {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 22px;
  }
  .footer-logo-mark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border: 1.5px solid var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ink);
  }
  .footer-brand-name {
    font-family: 'Jost', sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .footer-brand-desc {
    font-size: 0.95rem;
    color: var(--mute);
    line-height: 1.55;
    max-width: 340px;
    margin-bottom: 22px;
  }
  .footer-brand-contact {
    font-size: 0.95rem;
    color: var(--ink-soft);
    line-height: 1.7;
    margin-bottom: 28px;
  }
  .footer-brand-contact a {
    color: var(--ink);
    border-bottom: 1px solid transparent;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .footer-brand-contact a:hover {
    border-bottom-color: var(--eyebrow);
    color: var(--forest);
  }
  .footer-certs {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    row-gap: 6px;
  }
  .footer-cert {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    padding: 0 14px;
    border-left: 1px solid var(--line);
  }
  .footer-cert:first-child { padding-left: 0; border-left: none; }
  .footer-cert { transition: color 0.25s ease; }
  a.footer-cert:hover { color: var(--ink); }

  /* De vijf certs passen onder de ~1680px anders net niet op één regel, met
     VastgoedCert als wees op regel twee. Compactere spatiëring houdt de rij
     daar één regel; op de smalste maten vouwt hij alsnog, maar dan met nette
     rij-afstand. */
  @media (max-width: 1680px) {
    .footer-cert { padding: 0 9px; letter-spacing: 0.16em; }
  }

  .footer-col-title {
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
  }
  .footer-col ul {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  .footer-col li a {
    color: var(--ink);
    font-size: 1rem;
    transition: color 0.2s ease;
  }
  .footer-col li a:hover { color: var(--forest); }
  .footer-col li a .sparkle { color: var(--eyebrow); margin-left: 4px; }
  .footer-col li a .arrow { color: var(--eyebrow); margin-left: 4px; }

  /* Footer-accordion: cross-breakpoint summary reset.
     Desktop heeft details `open` via HTML default + JS-sync.
     Mobile sluit ze via JS bij viewport < 1001px (zie site.js). */
  .footer-col > summary { list-style: none; }
  .footer-col > summary::-webkit-details-marker { display: none; }
  .footer-col > summary { cursor: default; pointer-events: none; }
  .footer-col > summary::after { display: none; }

  .footer-lang {
    margin-top: 22px;
    position: relative;
    display: inline-block;
  }
  .footer-lang-current {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 9px 14px;
    border: 1px solid var(--line);
    background: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    min-width: 140px;
    justify-content: space-between;
  }
  .footer-lang-current::after {
    content: '';
    width: 7px; height: 7px;
    border-right: 1px solid var(--ink);
    border-bottom: 1px solid var(--ink);
    transform: rotate(45deg);
    margin-bottom: 3px;
  }
  .footer-lang-dropdown {
    position: absolute;
    bottom: 100%;
    left: 0;
    right: 0;
    background: var(--bone);
    border: 1px solid var(--line);
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    margin-bottom: 6px;
  }
  .footer-lang:hover .footer-lang-dropdown,
  .footer-lang:focus-within .footer-lang-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .footer-lang-dropdown a {
    display: block;
    padding: 9px 14px;
    font-size: 0.95rem;
    color: var(--ink);
  }
  .footer-lang-dropdown a:hover { background: var(--paper); color: var(--forest); }
  .footer-lang-dropdown a.active { color: var(--forest); font-weight: 500; }

  .footer-meta {
    padding-top: 24px;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
  }
  .footer-meta-links { display: flex; gap: 32px; }
  .footer-meta-links a {
    color: var(--mute);
    transition: color 0.25s ease;
  }
  .footer-meta-links a:hover { color: var(--ink); }

  /* ──────── Animations ──────── */
  @keyframes editorialFade {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-eyebrow, .hero-title, .hero-body, .hero-cta-row, .hero-mosaic {
    animation: editorialFade 1s cubic-bezier(0.2, 0.7, 0.2, 1) both;
  }
  .hero-eyebrow { animation-delay: 0.1s; }
  .hero-title { animation-delay: 0.25s; }
  .hero-body { animation-delay: 0.4s; }
  .hero-cta-row { animation-delay: 0.55s; }
  .hero-mosaic { animation-delay: 0.2s; }

  /* ──────── Legal-hero (vereenvoudigd: eyebrow + Playfair H1 + meta-line met datum) ──────── */
  .legal-hero {
    padding: 32px 48px 48px;
    max-width: 920px;
    margin: 0 auto;
  }
  .legal-hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 24px;
  }
  .legal-hero-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .legal-hero-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(36px, 4.6vw, 56px);
    line-height: 1.08;
    letter-spacing: -0.012em;
    color: var(--ink);
    margin-bottom: 20px;
  }
  .legal-hero-meta {
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
    color: var(--mute);
    padding-top: 16px;
    border-top: 1px solid var(--line);
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
  }
  .legal-hero-meta .dot { color: var(--whisper); }

  /* ──────── Routes-cards ──────── */
  .notfound-body {
    max-width: 720px;
    margin: 0 auto;
    padding: 0 48px 48px;
    font-family: 'Jost', sans-serif;
    font-size: 1.1rem;
    line-height: 1.7;
    color: var(--ink-soft);
  }
  .routes-section {
    max-width: 1280px;
    margin: 0 auto 48px;
    padding: 0 48px;
  }
  .routes-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 28px;
  }
  .routes-section-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .routes-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
  }
  /* 404-variant: 2x2 grid voor 4 cards */
  .routes-grid.cols-2 {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin-inline: auto;
  }
  .route-card {
    display: flex;
    flex-direction: column;
    padding: 32px 28px 30px;
    background: var(--bone-deep);
    border: 1px solid var(--line);
    transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .route-card:hover {
    border-color: var(--eyebrow);
    transform: translateY(-3px);
  }
  .route-card-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--whisper);
    margin-bottom: 12px;
  }
  .route-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.5rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.2;
    margin-bottom: 14px;
  }
  .route-card-desc {
    font-size: 0.98rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 24px;
    flex-grow: 1;
  }
  .route-card-meta {
    display: flex;
    justify-content: flex-end;
    align-items: baseline;
    padding-top: 18px;
    border-top: 1px solid var(--line);
  }
  .route-card-link {
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color 0.25s ease;
    white-space: nowrap;
  }
  .route-card:hover .route-card-link { color: var(--forest); }
  .route-card-link::after {
    content: ' →';
    color: var(--eyebrow);
    margin-left: 4px;
  }
  @media (max-width: 1000px) {
    .notfound-body { padding: 0 24px 32px; }
    .routes-section { padding: 0 24px; margin-bottom: 32px; }
    .routes-grid,
    .routes-grid.cols-2 { grid-template-columns: 1fr; gap: 14px; }
    .route-card { padding: 26px 22px; }
    .route-card-title { font-size: 1.35rem; }
  }

  /* Legal-pages sticky TOC sidebar. Hergebruikt .page-sidebar voor de sticky-positionering. */
  .legal-toc-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .legal-toc-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--eyebrow);
  }
  .legal-toc-nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-left: 1px solid var(--line);
  }
  .legal-toc-nav li a {
    display: block;
    padding: 4px 0 4px 18px;
    color: var(--mute);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    line-height: 1.4;
    border-left: 2px solid transparent;
    margin-left: -1px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .legal-toc-nav li a:hover {
    color: var(--ink);
    border-left-color: var(--eyebrow);
  }
  .legal-toc-nav li a:target,
  .legal-toc-nav li a.is-active {
    color: var(--forest);
    border-left-color: var(--forest);
  }

  /* Scroll-margin op H2's zodat sticky header niet over de titel valt bij anchor-jump */
  .article-h2 {
    scroll-margin-top: 110px;
  }

  /* Mobile (<1100px): TOC stack onder content (via .page-grid:has()), border-left weg */
  @media (max-width: 1100px) {
    .legal-toc-nav ul { border-left: none; }
    .legal-toc-nav li a { padding-left: 0; border-left: none; }
  }

  /* ──────── Page-grid (single-column op legal-pages, geen sidebar) ──────── */
  .page-grid {
    padding: 56px 48px 80px;
  }

  /* ──────── Article body (long-form post typography, gedeeld door legal-pages) ──────── */
  .article-body {
    max-width: 720px;
    margin: 0 auto;
  }
  .article-body > p {
    font-family: 'Jost', sans-serif;
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 24px;
  }
  .article-body > p.lead {
    font-size: 1.22rem;
    line-height: 1.65;
    color: var(--ink);
    margin-bottom: 36px;
  }
  .article-body h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(26px, 2.6vw, 34px);
    line-height: 1.18;
    letter-spacing: -0.004em;
    color: var(--ink);
    margin: 56px 0 20px;
  }
  .article-body h2 em { font-style: normal; color: inherit; }
  .article-body h2:first-child { margin-top: 0; }
  .article-body h3 {
    font-family: 'Playfair Display', serif;
    font-weight: 500;
    font-size: 1.22rem;
    line-height: 1.3;
    color: var(--ink);
    margin: 36px 0 14px;
  }
  .article-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .article-body a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }
  .article-body ul,
  .article-body ol {
    margin: 0 0 24px;
    padding-left: 28px;
    font-size: 1.05rem;
    line-height: 1.75;
    color: var(--ink-soft);
  }
  .article-body ul li,
  .article-body ol li { margin-bottom: 10px; }
  .article-body ul li::marker { color: var(--eyebrow); }
  .article-body ol li::marker {
    color: var(--eyebrow);
    font-family: 'Playfair Display', serif;
    font-weight: 500;
  }
  .article-body strong { color: var(--ink); font-weight: 500; }
  .article-body em { font-style: italic; }
  .article-body h2[id] { scroll-margin-top: 120px; }

  /* ──────── Breadcrumbs (Home / Sectie / Huidige pagina) ──────── */
  .aanbod-crumbs {
    padding: 26px 48px 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--mute);
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .aanbod-crumbs a { color: var(--mute); transition: color 0.25s ease; }
  .aanbod-crumbs a:hover { color: var(--forest); }
  .aanbod-crumbs .sep { color: var(--whisper); }
  .aanbod-crumbs .current { color: var(--ink); }

  /* ──────── Page-wrap (single-column container, gedeeld door static pages) ──────── */
  .page-wrap {
    padding: 16px 48px 80px;
  }
  .page-wrap > section + section { margin-top: 80px; }

  /* ──────── Page intro (2-col eyebrow+H1 links, body rechts) ──────── */
  .aanbod-intro {
    padding: 32px 48px 48px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: end;
  }
  .aanbod-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 24px;
  }
  .aanbod-intro-eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background: var(--eyebrow);
  }
  .aanbod-intro-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(44px, 5.5vw, 80px);
    line-height: 1;
    letter-spacing: -0.012em;
    color: var(--ink);
  }
  .aanbod-intro-title em { font-style: normal; color: inherit; }
  .aanbod-intro-body {
    font-size: 1.05rem;
    color: var(--mute);
    line-height: 1.65;
    max-width: 480px;
    padding-bottom: 12px;
  }
  /* Links in de intro-body herkenbaar als link (de globale anchor-reset maakt ze
     anders onzichtbaar): zelfde opmaak als .article-body a / .faq-answer a. */
  .aanbod-intro-body a {
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .aanbod-intro-body a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }

  /* ──────── Team-feature (editorial full-width foto tussen intro en content) ──────── */
  .team-feature {
    padding: 8px 48px 64px;
  }
  .team-feature-image {
    aspect-ratio: 3 / 2;
    background-image: url('../images/team-av-light.jpg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }
  .team-feature-caption {
    margin-top: 16px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 14px;
  }
  .team-feature-caption .sep { color: var(--whisper); }

  /* ──────── Contact-grid (2-col: info-card links + form rechts) ──────── */
  .contact-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 56px;
    align-items: start;
    margin-top: 16px;
  }

  /* ──────── Contact info-card (adres + contact + openingstijden + aanspreekpunt + socials) ──────── */
  .contact-info-card {
    background: var(--bone-deep);
    padding: 36px 32px 40px;
  }
  .contact-info-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .contact-info-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--eyebrow);
  }
  .contact-info-block {
    padding-bottom: 22px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--line);
  }
  .contact-info-block:last-of-type { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
  .contact-info-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 8px;
  }
  .contact-info-block address {
    font-style: normal;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--ink);
  }
  .contact-channels {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .contact-channels a {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    transition: color 0.25s ease;
  }
  .contact-channels a:hover { color: var(--forest); }
  .contact-channels svg {
    width: 16px;
    height: 16px;
    color: var(--mute);
    flex-shrink: 0;
    transition: color 0.25s ease;
  }
  .contact-channels a:hover svg { color: var(--forest); }
  .opening-hours {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 0;
    margin: 0;
  }
  .opening-hours li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-size: 0.95rem;
    color: var(--ink-soft);
  }
  .opening-hours li span:first-child { color: var(--mute); }
  .contact-agent {
    display: inline-flex;
    align-items: center;
    gap: 14px;
  }
  .contact-agent-photo {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: url('../images/Joshua.webp') center top / cover no-repeat;
    flex-shrink: 0;
  }
  .contact-agent-name {
    font-family: 'Jost', sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
  }
  .contact-agent-role {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px;
  }
  .contact-socials {
    display: flex;
    gap: 18px;
    align-items: center;
  }
  .contact-socials a {
    color: var(--ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    transition: color 0.25s ease, transform 0.25s ease;
  }
  .contact-socials a:hover { color: var(--forest); transform: translateY(-1px); }
  .contact-socials svg { width: 18px; height: 18px; }

  /* ──────── Contact form (editorial underline-stijl) ──────── */
  .contact-form-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .contact-form-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--eyebrow);
  }
  .contact-form-intro {
    font-size: 1.05rem;
    color: var(--ink-soft);
    line-height: 1.6;
    margin-bottom: 32px;
    max-width: 540px;
  }
  .form-row {
    margin-bottom: 28px;
  }
  .form-label {
    display: block;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 8px;
  }
  .form-required {
    color: var(--eyebrow);
    margin-left: 4px;
    font-size: 0.85em;
  }
  .form-optional {
    color: var(--mute);
    text-transform: none;
    letter-spacing: 0.06em;
    margin-left: 6px;
    font-size: 0.9em;
  }
  .form-input,
  .form-textarea,
  .form-select {
    width: 100%;
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 14px 0;
    background: transparent;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    transition: border-color 0.25s ease;
    border-radius: 0;
  }
  .form-input:focus,
  .form-textarea:focus,
  .form-select:focus {
    outline: none;
    border-bottom-color: var(--eyebrow);
  }
  .form-input::placeholder,
  .form-textarea::placeholder {
    color: var(--whisper);
  }
  .form-textarea {
    resize: vertical;
    min-height: 120px;
    line-height: 1.55;
  }
  .form-select {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    padding-right: 28px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%236B655E' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='m2 2 4 4 4-4'/></svg>");
    background-repeat: no-repeat;
    background-position: right 4px center;
  }
  .form-select:focus {
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%23b9a16b' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'><path d='m2 2 4 4 4-4'/></svg>");
  }
  .form-submit-row {
    margin-top: 36px;
  }
  .form-submit {
    background: var(--forest);
    color: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    padding: 14px 32px;
    border: 1px solid var(--forest);
    border-radius: 0;
    cursor: pointer;
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  /* Verzendstatus: spinner + gedimde knop zolang de POST loopt (bij
     bijlagen duurt dat seconden). Cursor en pointer-events geblokkeerd,
     maar de knop blijft een echte submit-knop (zie site.js). */
  .form-submit.is-busy {
    position: relative;
    padding-left: 52px;
    opacity: 0.85;
    cursor: progress;
    pointer-events: none;
  }
  .form-submit.is-busy::before {
    content: '';
    position: absolute;
    left: 26px;
    top: 50%;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    border: 2px solid rgba(246, 244, 243, 0.35);
    border-top-color: var(--bone);
    border-radius: 50%;
    animation: form-submit-spin 0.7s linear infinite;
  }
  @keyframes form-submit-spin {
    to { transform: rotate(360deg); }
  }
  @media (prefers-reduced-motion: reduce) {
    .form-submit.is-busy::before { animation-duration: 2.4s; }
  }
  .form-submit:hover {
    background: var(--forest-light);
    border-color: var(--forest-light);
  }
  /* Reden-landing (site.js contactRedenScroll): ruimte voor de sticky header */
  .contact-form { scroll-margin-top: 140px; }
  /* Idem per veld: scrollt de browser naar een ongeldig veld (native
     validatie), dan moet dat veld — én de melding erboven — vrij van de
     sticky header landen. */
  .contact-form .form-input,
  .contact-form .form-textarea,
  .contact-form .form-select,
  .contact-form .form-file,
  .contact-form .form-consent-check { scroll-margin-top: 150px; }

  /* ──────── Aanvraagpagina's (/aanvraag/…): één rustige, smalle kolom ──────── */
  .aanvraag-wrap {
    max-width: 720px;
    margin: 0 auto;
    padding-top: clamp(56px, 7vw, 88px);
    padding-bottom: 96px;
  }
  /* Hint onder een veld (zelfde plek en maat als .form-error, maar neutraal) */
  .form-hint {
    margin-top: 6px;
    font-size: 0.88rem;
    color: var(--mute);
    line-height: 1.55;
  }
  /* Object-context boven het internationaal-formulier ("Je vraag gaat over: …") */
  .aanvraag-object {
    margin: 0 0 24px;
    padding: 12px 16px;
    background: var(--cream);
    border-left: 2px solid var(--forest);
    font-size: 0.95rem;
    color: var(--ink);
  }
  .aanvraag-object a {
    color: var(--forest);
    border-bottom: 1px solid var(--sand);
    transition: border-color 0.25s ease;
  }
  .aanvraag-object a:hover { border-bottom-color: var(--forest); }
  /* Bestandsvelden (sollicitatie: CV + motivatiebrief) in de form-stijl */
  .form-file {
    width: 100%;
    padding: 12px 14px;
    background: var(--cream);
    border: 1px dashed var(--sand);
    border-radius: 2px;
    font-size: 0.95rem;
    color: var(--ink);
    cursor: pointer;
  }
  .form-file::file-selector-button {
    margin-right: 14px;
    padding: 8px 16px;
    border: none;
    background: var(--forest);
    color: #fff;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 0.06em;
    cursor: pointer;
  }
  .form-file.has-error { border-color: var(--error); }
  .form-disclaimer {
    margin-top: 18px;
    font-size: 0.88rem;
    color: var(--mute);
    line-height: 1.55;
  }
  /* Links in de formulier-intro (bv. de bel-link op /aanvraag/kennismaking):
     de globale anchor-reset maakt ze anders onzichtbaar — zelfde
     onderlijning-patroon als de disclaimer eronder. */
  .contact-form-intro a {
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .contact-form-intro a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }
  .form-disclaimer a {
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .form-disclaimer a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }
  .honeypot {
    position: absolute;
    left: -9999px;
    top: -9999px;
    opacity: 0;
    pointer-events: none;
  }

  /* ──────── Form feedback (errors + success) ──────── */
  .form-error {
    margin-top: 6px;
    font-size: 0.88rem;
    color: var(--error);
  }
  .form-input.has-error,
  .form-textarea.has-error,
  .form-select.has-error {
    border-bottom-color: var(--error);
  }
  .form-success {
    padding: 28px 32px;
    background: var(--bone-deep);
    border-left: 3px solid var(--forest);
    margin-bottom: 32px;
  }
  .form-success-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.3rem;
    color: var(--ink);
    margin-bottom: 10px;
  }
  .form-success-body {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .form-success.is-error {
    border-left-color: var(--error);
  }

  /* ──────── Responsive ──────── */
  @media (max-width: 1000px) {
    header, .hero, .tagline-section, .home-team, .aanbod, .werkgebieden, .reviews, footer {
      padding-left: 24px; padding-right: 24px;
    }
    header {
      grid-template-columns: auto 1fr auto;
      grid-template-areas: "left mid right";
      padding: 20px 15px;
      gap: 5px;
      transition: none;
    }
    .wordmark { grid-area: mid; text-align: center; justify-self: center; }
    .header-left a { display: none; }
    .hamburger-label { display: none; }
    .lang-switch { display: none; }
    .header-right { gap: 12px; }
    .header-right .lang-switch + .phone-link {
      padding-left: 0;
      border-left: none;
    }
    html.is-scrolled header { padding: 20px 15px; }  /* mobile-config: padding constant op mobile */
    .menu-overlay { padding: 80px 32px calc(24px + env(safe-area-inset-bottom)); }
    .overlay-close-x { top: 22px; left: 26px; }
    .overlay-nav-item { font-size: 1.15rem; padding: 16px 0; }
    .overlay-section-title { font-size: 1.15rem; }
    .menu-overlay-bottom { margin-top: 24px; }
    /* op mobiel: submenus terug naar 1 kolom voor leesbaarheid */
    .overlay-view-werkgebied .overlay-submenu-list,
    .overlay-view-diensten .overlay-submenu-list,
    .overlay-view-over-ons .overlay-submenu-list {
      grid-template-columns: 1fr;
    }
    .hero { grid-template-columns: 1fr; padding: 50px 24px 60px; }
    .hero-mosaic { height: 480px; }
    .aanbod-head, .home-team { grid-template-columns: 1fr; gap: 40px; }
    .aanbod-meta { text-align: left; }
    /* Mobiel: 1 kolom. Losse .aanbod-grid (similar/home/wijk/team/exclusief) + de wrap-variant
       (overzichtspagina's; gelijke specificiteit aan de 1100-regel zodat deze wint). + list-look + toggle weg */
    .aanbod-grid,
    .aanbod-grid-wrap .aanbod-grid { grid-template-columns: 1fr; gap: 28px; }
    .view-toggle { display: none; }
    /* Onderaan-button verschijnt zodra de kaarten stapelen (mobiel+tablet). */
    .aanbod-all { display: block; }
    .aanbod-card-specs-extended {
      display: block;
      font-size: 11px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: var(--whisper);
      font-weight: 400;
    }
    .status-tabs { gap: 22px; padding: 0 24px; }
    .filter-bar { padding: 18px 24px; gap: 8px; }
    .filter-clear { margin-left: 0; padding: 10px 12px; }
    .results-bar { padding: 18px 24px; }
    .results-controls { gap: 18px; }
    .aanbod-grid-wrap { padding: 32px 24px 24px; }
    /* Alleen layout hier; de knopmaten regelt het ≤760-blok bij .pagination zelf
       (deze latere regels overschreven die compacte maten). */
    .pagination { padding: 36px 24px 56px; gap: 4px; }
    body.view-list .aanbod-card {
      grid-template-columns: 1fr;
      grid-template-areas: "photo" "area" "title" "address" "meta";
      column-gap: 0;
    }
    body.view-list .aanbod-card-photo { aspect-ratio: 5 / 4; height: auto; margin-bottom: 16px; }
    body.view-list .aanbod-card-meta { align-items: baseline; }
    body.view-list .aanbod-card-price { text-align: left; }
    .destinations { grid-template-columns: repeat(2, 1fr); }
    .reviews-grid { grid-template-columns: 1fr; }
    .review { border-right: none; border-bottom: 1px solid var(--line); }
    .review:last-child { border-bottom: none; }
    footer { padding: 48px 24px 24px; }
    /* Footer-accordion mobile: 1-koloms stack, kolommen ingeklapt achter chevron */
    .footer-top { grid-template-columns: 1fr; gap: 0; margin-bottom: 32px; }
    .footer-brand { margin-bottom: 16px; }
    .footer-col { border-bottom: 1px solid var(--line); }
    .footer-col:last-of-type { border-bottom: none; }
    .footer-col > summary {
      cursor: pointer; pointer-events: auto;
      padding: 16px 0; margin-bottom: 0;
      display: flex; align-items: center; justify-content: space-between;
      gap: 24px;
    }
    .footer-col > summary::after {
      content: ''; display: block;
      width: 5px; height: 5px;
      border-right: 1px solid var(--ink-soft); border-bottom: 1px solid var(--ink-soft);
      transform: rotate(45deg);
      transition: transform 0.3s ease;
      flex-shrink: 0; margin-bottom: 4px;
    }
    .footer-col[open] > summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
    .footer-col[open] > ul { padding-bottom: 16px; }
    .footer-meta { flex-direction: column; gap: 14px; align-items: flex-start; }
    .footer-meta-links { gap: 20px; }
    .footer-meta-links a { font-size: 9px; }
    .footer-cert { padding: 0 10px; }
    .aanbod-crumbs { padding: 20px 24px 0; }
    /* Compacte mobiele breadcrumb: altijd 1 regel, kleiner; scrollt horizontaal bij extra lange trails (geen 2-3 regels meer). */
    .aanbod-crumbs {
      flex-wrap: nowrap;
      white-space: nowrap;
      overflow-x: auto;
      scrollbar-width: none;
      font-size: 0.72rem;
      gap: 7px;
      letter-spacing: 0.04em;
      -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
      mask-image: linear-gradient(to right, #000 calc(100% - 16px), transparent);
    }
    .aanbod-crumbs::-webkit-scrollbar { display: none; }
    .page-wrap { padding: 16px 24px 56px; }
    .aanbod-intro { grid-template-columns: 1fr; gap: 28px; padding: 24px 24px 36px; }
    .team-feature { padding: 8px 24px 48px; }
    .contact-grid { grid-template-columns: 1fr; gap: 40px; }
    .contact-info-card { padding: 28px 24px 32px; }
    .form-row { margin-bottom: 24px; }
    .form-submit { width: 100%; }
  }
  @media (max-width: 600px) {
    .hero-mosaic { grid-template-columns: 1fr; grid-template-rows: 2fr 1fr 1fr; height: 600px; }
    .destinations { grid-template-columns: 1fr; }
    /* Homepage werkgebieden: op de telefoon 2x2 i.p.v. 1 lange kolom (4 staande
       kaarten stapelden tot ~880px). Gescopet op .werkgebieden; de
       werkgebied-hub en de wijk-detail-kaarten hebben elk hun eigen 2x2-recept.
       Kaarten iets minder hoog (4/5 i.p.v. 3/4) zodat 2 rijen compact blijven. */
    .werkgebieden .destinations { grid-template-columns: repeat(2, 1fr); gap: 12px; }
    .werkgebieden .destination { aspect-ratio: 4 / 5; }
    /* Op de smalle 2-koloms-kaart (~166px) werd "Grachtengordel" op 30px afgekapt:
       kleinere binnenmarge (24->10px) + bescheidener naamgrootte
       (30->18px) geven genoeg tekstbreedte, gemeten passend op 360/393/430px. */
    .werkgebieden .destination-content { left: 10px; right: 10px; bottom: 16px; }
    .werkgebieden .destination-name { font-size: 18px; }
    /* Reviews op de telefoon: alleen de eerste tonen (3 gestapeld = ~1000px).
       De "Lees alle beoordelingen"-CTA eronder leidt naar de rest. Puur CSS
       (HTML blijft 3 kaarten voor desktop); .review is homepage-only, dus dit
       raakt over-ons/beoordelingen (.review-card) niet. */
    .reviews-grid .review:nth-child(n+2) { display: none; }
    /* Kaart 1 is niet meer de :last-child (kaart 3 is dat, maar verborgen), dus z'n
       border-bottom bleef staan náást de border-bottom van .reviews-grid -> dubbele
       lijn. De grid-rand sluit de sectie al af. */
    .reviews-grid .review:first-child { border-bottom: none; }
    /* Defensief: de overgebleven kaart z'n natuurlijke hoogte geven i.p.v. laten
       stretchen (grid align-items:stretch + de margin-top:auto-footer). In de
       browser geverifieerd: 1 review op de telefoon, 3 op desktop. */
    .reviews-grid .review { align-self: start; }
    /* Aanbod op de telefoon: 2 woningen i.p.v. 3 (kaarten zijn detail-rijk ->
       3 gestapeld = lang). De "Bekijk het volledige aanbod"-link in de kop leidt
       naar de rest. Gescopet op .aanbod--home zodat de wijk-pagina (óók
       section.aanbod) ongemoeid blijft. */
    .aanbod--home .aanbod-card:nth-child(n+3) { display: none; }
  }


  /* ─────────────────────────────────────────────────────────── */
  /* LISTING DETAIL */
  /* ─────────────────────────────────────────────────────────── */
  /* Breadcrumb: gebruikt de gedeelde .aanbod-crumbs-stijl */

  /* Listing hero: 1 grote foto + 3 thumbnails strip */
  .listing-hero {
    padding: 24px 48px 0;
  }
  .listing-hero-main {
    aspect-ratio: 16 / 9;
    background: var(--bone-deep);
    margin-bottom: 12px;
    position: relative;
    overflow: hidden;
    cursor: pointer;
  }
  .listing-hero-cover {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .listing-hero-status {
    position: absolute;
    top: 24px;
    left: 24px;
    background: var(--bone);
    padding: 8px 14px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--ink);
  }
  .listing-hero-counter {
    position: absolute;
    bottom: 24px;
    right: 24px;
    background: rgba(255, 255, 255, 0.92);
    padding: 8px 14px;
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    color: var(--ink);
    backdrop-filter: blur(6px);
  }
  .listing-hero-thumbs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
  }
  .listing-hero-thumb {
    aspect-ratio: 16 / 9;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: opacity 0.3s ease;
  }
  .listing-hero-thumb:hover { opacity: 0.85; }
  /* button-reset: de foto-thumbs zijn echte <button>-elementen */
  button.listing-hero-thumb { border: 0; padding: 0; background: none; width: 100%; display: block; }
  .listing-hero-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
  }
  .listing-hero-thumb.thumb-more {
    background: var(--bone-deep);
    display: flex;
    align-items: center;
    justify-content: center;
    /* button-reset: dit element is een echte <button> (semantiek), geen anker */
    border: 0;
    padding: 0;
    cursor: pointer;
  }
  .listing-hero-thumb-more {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    text-align: center;
  }
  .listing-hero-thumb-more strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-size: 24px;
    font-weight: 400;
    color: var(--forest);
    margin-bottom: 4px;
  }
  /* Derde thumb-cel gesplitst zodra de woning een videotour heeft:
     video boven (forest), foto-teller onder. Zelfde 16/9-voetafdruk als
     de foto-thumbs, dus de strip blijft strak uitgelijnd. */
  .listing-hero-thumb-split {
    aspect-ratio: 16 / 9;
    display: grid;
    grid-template-rows: 1fr 1fr;
    gap: 8px;
  }
  .thumb-split-video,
  .thumb-split-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 0;
    padding: 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
    transition: opacity 0.3s ease;
  }
  .thumb-split-video:hover,
  .thumb-split-more:hover { opacity: 0.85; }
  .thumb-split-video {
    background: var(--forest);
    color: #fff;
    font-weight: 500;
  }
  .thumb-split-video svg { width: 14px; height: 14px; }
  .thumb-split-more {
    background: var(--bone-deep);
    color: var(--ink);
    gap: 10px;
  }
  .thumb-split-more strong {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    font-weight: 400;
    color: var(--forest);
  }

  /* Listing overview: 2-koloms layout met sticky sidebar */
  .listing-overview {
    padding: 80px 48px 100px;
    display: grid;
    grid-template-columns: 1.7fr 1fr;
    gap: 80px;
    align-items: start;
  }
  .listing-main { min-width: 0; }
  .listing-sidebar {
    position: sticky;
    top: 152px;
    padding: 32px;
    background: var(--bone-deep);
    border: 1px solid var(--line);
  }

  /* Sidebar content */
  .sidebar-area {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 8px;
  }
  .sidebar-address {
    font-family: 'Playfair Display', serif;
    font-size: 28px;
    font-weight: 400;
    line-height: 1.1;
    color: var(--ink);
    margin-bottom: 6px;
  }
  .sidebar-zip {
    font-size: 0.95rem;
    color: var(--mute);
    margin-bottom: 24px;
  }
  .sidebar-price {
    font-family: 'Playfair Display', serif;
    font-size: 32px;
    font-weight: 500;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1;
  }

  /* Mobile-only prijs-blok onder "Over deze woning"-titel.
     Desktop heeft sticky sidebar met prijs, mobile niet, vandaar deze fallback. */
  .listing-section-mobile-price { display: none; }
  .sidebar-price em {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 18px;
    color: var(--forest);
    font-weight: 400;
    margin-left: 4px;
  }
  .sidebar-price-note {
    font-size: 0.85rem;
    color: var(--mute);
    margin-bottom: 28px;
  }
  .sidebar-specs {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 16px 8px;
    padding: 20px 0;
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    margin-bottom: 28px;
  }
  .sidebar-spec-label {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--whisper);
    margin-bottom: 4px;
  }
  .sidebar-spec-value {
    font-family: 'Playfair Display', serif;
    font-size: 20px;
    color: var(--ink);
    line-height: 1;
  }
  .sidebar-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 28px;
  }
  .sidebar-cta-primary {
    background: var(--forest);
    color: #FFFFFF;
    padding: 16px 24px;
    text-align: center;
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: background 0.25s ease;
  }
  .sidebar-cta-primary:hover { background: var(--forest-light); }
  .sidebar-cta-secondary {
    background: transparent;
    color: var(--ink);
    padding: 14px 24px;
    text-align: center;
    border: 1px solid var(--line);
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    font-weight: 500;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .sidebar-cta-secondary:hover { border-color: var(--forest); color: var(--forest); }
  .sidebar-agent-mini {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .sidebar-agent-avatar {
    width: 48px; height: 48px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  .sidebar-agent-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .sidebar-agent-meta {
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    color: var(--mute);
    line-height: 1.4;
  }
  .sidebar-agent-meta strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 16px;
    color: var(--ink);
    margin-bottom: 2px;
  }

  /* Kleine WhatsApp link onder Bel in sidebar */
  .sidebar-cta-whatsapp {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--mute);
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    padding: 4px 0;
    margin-top: -4px;
    transition: color 0.25s ease;
  }
  .sidebar-cta-whatsapp:hover { color: var(--forest); }
  .sidebar-cta-whatsapp svg { width: 14px; height: 14px; flex-shrink: 0; }

  /* Delen-sectie onderaan sidebar */
  .sidebar-share {
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--line);
  }
  .sidebar-share-label {
    font-family: 'Jost', sans-serif;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--mute);
    margin-bottom: 12px;
  }
  .sidebar-share-options {
    display: flex;
    gap: 14px;
  }
  .sidebar-share-options a,
  .sidebar-share-options button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid var(--line);
    background: var(--bone);
    color: var(--ink);
    transition: border-color 0.25s ease, color 0.25s ease;
    cursor: pointer;
    padding: 0;
  }
  .sidebar-share-options a:hover,
  .sidebar-share-options button:hover {
    border-color: var(--forest);
    color: var(--forest);
  }
  .sidebar-share-options svg { width: 16px; height: 16px; }

  /* Copy-link tooltip-feedback */
  .sidebar-share-copy { position: relative; }
  .sidebar-share-copy.is-copied {
    border-color: var(--forest);
    color: var(--forest);
  }
  .sidebar-share-copy-feedback {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    background: var(--ink);
    color: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 6px 10px;
    white-space: nowrap;
    pointer-events: none;
  }
  .sidebar-share-copy-feedback::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    width: 0; height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid var(--ink);
  }

  /* WhatsApp inline link in agent-card contact-row */
  .agent-info-contact .whatsapp-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .agent-info-contact .whatsapp-link svg { width: 14px; height: 14px; }

  /* Main content sections */
  .listing-section {
    margin-bottom: 70px;
  }
  .listing-section:last-child { margin-bottom: 0; }
  .listing-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 18px;
  }
  .listing-section-eyebrow::before {
    content: '';
    width: 8px;
    height: 1px;
    background: var(--eyebrow);
  }
  .listing-section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-bottom: 28px;
  }
  .listing-section-title em { font-style: normal; color: inherit; }

  /* Beschrijving paragrafen */
  .listing-description p {
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 18px;
  }
  .listing-description p:last-child { margin-bottom: 0; }
  .listing-description p:first-of-type {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 1.4rem;
    line-height: 1.4;
    color: var(--ink);
    margin-bottom: 28px;
  }

  /* Read-more toggle voor lange beschrijvingen.
     JS detect bij page-load of clamping nodig is; korte beschrijvingen krijgen geen toggle. */
  .listing-description[data-description-state="collapsed"] .listing-description-text {
    display: -webkit-box;
    -webkit-line-clamp: 10;
    -webkit-box-orient: vertical;
    overflow: hidden;
    position: relative;
  }
  .listing-description[data-description-state="collapsed"] .listing-description-text::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 100px;
    background: linear-gradient(to bottom, rgba(246, 244, 243, 0) 0%, var(--bone) 90%);
    pointer-events: none;
  }
  .listing-description[data-description-state="expanded"] .listing-description-text {
    display: block;
    overflow: visible;
  }
  /* NL/EN-divider (uit WoningPage::displayDescription): dun huisstijl-lijntje
     op de plek waar de Realworks-tekst van taal wisselt. Bewust scoped. */
  .listing-description-text hr {
    border: 0;
    border-top: 1px solid var(--line);
    margin: 32px 0;
  }
  .listing-description-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 22px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .listing-description-toggle:hover {
    border-color: var(--forest);
    color: var(--forest);
  }
  .listing-description-toggle-chevron {
    width: 18px; height: 18px;
    transition: transform 0.25s ease;
  }
  .listing-description[data-description-state="expanded"] .listing-description-toggle-chevron {
    transform: rotate(180deg);
  }
  .listing-description[data-description-state="expanded"] .listing-description-toggle-label::after {
    content: " (sluit)";
    color: var(--mute);
    font-weight: 400;
  }

  /* Kenmerken-grid */
  .kenmerken-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--line);
  }
  .kenmerk-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
    gap: 24px;
  }
  .kenmerk-item:nth-child(odd) { padding-right: 24px; }
  .kenmerk-item:nth-child(even) { padding-left: 24px; }
  @media (min-width: 1000px) {
    .kenmerk-item:nth-child(odd) { border-right: 1px solid var(--line); }
  }
  .kenmerk-label {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--mute);
  }
  .kenmerk-value {
    font-family: 'Playfair Display', serif;
    font-size: 1.1rem;
    color: var(--ink);
    text-align: right;
  }
  .kenmerk-value .unit {
    font-family: 'Jost', sans-serif;
    font-size: 0.8rem;
    color: var(--mute);
    margin-left: 2px;
  }

  /* Plattegrond placeholder */
  .floorplan-placeholder {
    aspect-ratio: 4 / 3;
    background: var(--bone-deep);
    border: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    color: var(--mute);
  }
  .floorplan-placeholder svg {
    width: 56px;
    height: 56px;
    stroke: var(--eyebrow);
    stroke-width: 1.2;
    fill: none;
  }
  .floorplan-placeholder p {
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    text-align: center;
    max-width: 320px;
    line-height: 1.5;
  }
  .floorplan-cta {
    color: var(--ink);
    border-bottom: 1px solid var(--eyebrow);
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .floorplan-cta:hover { color: var(--forest); border-bottom-color: var(--forest); }

  /* Map-placeholder-familie verwijderd (de Locatie-sectie bestaat niet meer) */

  /* Makelaar card (uitgebreider dan author-byline) */
  .agent-card {
    display: grid;
    grid-template-columns: 140px 1fr auto;
    gap: 32px;
    align-items: center;
    padding: 32px;
    background: var(--bone-deep);
    border: 1px solid var(--line);
  }
  .agent-avatar-large {
    width: 140px; height: 140px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
  }
  .agent-avatar-large img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
  }
  .agent-info-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 8px;
  }
  .agent-info-name {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 4px;
    line-height: 1.2;
  }
  .agent-info-role {
    font-size: 0.95rem;
    color: var(--mute);
    margin-bottom: 14px;
  }
  .agent-info-contact {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
  }
  .agent-info-contact a {
    color: var(--ink);
    border-bottom: 1px solid var(--eyebrow);
    padding-bottom: 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .agent-info-contact a:hover { color: var(--forest); border-bottom-color: var(--forest); }
  .agent-action {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .agent-action .btn {
    padding: 12px 22px;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    text-align: center;
    transition: all 0.25s ease;
  }
  .agent-action .btn-fill {
    background: var(--forest);
    color: #FFFFFF;
  }
  .agent-action .btn-fill:hover { background: var(--forest-light); }
  .agent-action .btn-line {
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--line);
  }
  .agent-action .btn-line:hover { border-color: var(--forest); color: var(--forest); }

  /* Soortgelijke woningen — hergebruik aanbod-grid */
  .similar-section {
    padding: 80px 48px;
    background: var(--bone-deep);
    border-top: 1px solid var(--line);
  }
  .similar-section-head {
    text-align: center;
    margin-bottom: 60px;
  }
  .similar-section-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
  }
  .similar-section-eyebrow::before, .similar-section-eyebrow::after {
    content: '';
    width: 28px; height: 1px;
    background: var(--eyebrow);
  }
  .similar-section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(32px, 4vw, 48px);
    line-height: 1.1;
    color: var(--ink);
    letter-spacing: -0.005em;
  }
  .similar-section-title em { font-style: normal; color: inherit; }

  /* Responsive listing-pagina */
  @media (max-width: 1000px) {
    .listing-hero, .similar-section { padding-left: 24px; padding-right: 24px; }
    .listing-overview { padding: 50px 24px 70px; grid-template-columns: 1fr; gap: 48px; }
    .listing-sidebar { position: static; padding: 28px 24px; }
    .listing-hero-thumbs { grid-template-columns: repeat(3, 1fr); gap: 8px; }
    .listing-section-mobile-price {
      display: block;
      font-family: 'Playfair Display', serif;
      font-size: 28px;
      font-weight: 500;
      color: var(--ink);
      line-height: 1;
      margin-top: 0;
      margin-bottom: 24px;
    }
    .listing-section-mobile-price em {
      font-family: 'Playfair Display', serif;
      font-style: italic;
      font-size: 16px;
      color: var(--forest);
      font-weight: 400;
      margin-left: 4px;
    }
    /* Mobile: kortere clamp */
    .listing-description[data-description-state="collapsed"] .listing-description-text {
      -webkit-line-clamp: 6;
    }
    .kenmerken-grid { grid-template-columns: 1fr; }
    .kenmerk-item:nth-child(odd) { padding-right: 0; border-right: none; }
    .kenmerk-item:nth-child(even) { padding-left: 0; }
    .agent-card { grid-template-columns: 80px 1fr; gap: 20px; padding: 24px; }
    .agent-avatar-large { width: 80px; height: 80px; }
    .agent-action { grid-column: 1 / -1; flex-direction: row; }
    .agent-action .btn { flex: 1; }
  }

  /* Smal-mobile: listing-hero-thumbs 3 kolommen is te krap voor "+ N Bekijk alle"-cel */
  @media (max-width: 600px) {
    .listing-hero-thumbs { grid-template-columns: repeat(2, 1fr); gap: 6px; }
    .listing-hero-thumb-more { font-size: 0.85rem; }
    .listing-hero-thumb-more strong { font-size: 18px; }
    /* "+ N Bekijk alle" cell spant volle grid-breedte (= naast beide thumb-cellen erboven) */
    .listing-hero-thumb.thumb-more { grid-column: 1 / -1; aspect-ratio: 16 / 5; }
    /* Gesplitste cel op smal-mobile: volle rij, helften naast elkaar. */
    .listing-hero-thumb-split { grid-column: 1 / -1; aspect-ratio: 16 / 5; grid-template-rows: none; grid-template-columns: 1fr 1fr; gap: 6px; }
    .thumb-split-video, .thumb-split-more { font-size: 0.85rem; }
    .thumb-split-more strong { font-size: 18px; }
  }


  /* ─────────────────────────────────────────────────────────── */
  /* LIGHTBOX */
  /* ─────────────────────────────────────────────────────────── */
  .lightbox-overlay {
    position: fixed; inset: 0;
    background: rgba(20, 19, 15, 0.95);
    z-index: 1000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 40px 80px;
  }
  .lightbox-overlay.is-open { display: flex; }
  .lightbox-stage {
    width: 100%; height: 100%;
    display: flex; flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
  }
  .lightbox-image {
    max-width: 100%;
    max-height: calc(100vh - 160px);
    width: auto; height: auto;
    object-fit: contain;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  }
  .lightbox-meta {
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    display: flex;
    gap: 16px;
    align-items: center;
  }
  .lightbox-counter {
    letter-spacing: 0.2em;
    font-size: 11px;
    text-transform: uppercase;
    opacity: 0.7;
  }
  .lightbox-close, .lightbox-prev, .lightbox-next {
    position: absolute;
    z-index: 10;                              /* altijd boven de foto/plattegrond */
    width: 56px; height: 56px;
    background: rgba(20, 19, 15, 0.55);       /* donker: contrasteert tegen lichte foto's + witte plattegronden */
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    padding: 0;
  }
  .lightbox-close:hover, .lightbox-prev:hover, .lightbox-next:hover {
    background: rgba(20, 19, 15, 0.78);
  }
  .lightbox-close svg, .lightbox-prev svg, .lightbox-next svg {
    width: 24px; height: 24px;
  }
  .lightbox-close { top: 24px; right: 24px; }
  .lightbox-prev { left: 24px; top: 50%; transform: translateY(-50%); }
  .lightbox-next { right: 24px; top: 50%; transform: translateY(-50%); }

  /* Klikbare trigger-elementen krijgen cursor-pointer */
  [data-lightbox-trigger] {
    cursor: pointer;
    transition: opacity 0.25s ease;
  }
  [data-lightbox-trigger]:hover {
    opacity: 0.9;
  }

  /* Hidden data-container */
  #lightbox-data { display: none; }

  @media (max-width: 760px) {
    .lightbox-overlay { padding: 16px; }
    .lightbox-close { top: 12px; right: 12px; width: 44px; height: 44px; }
    .lightbox-prev { left: 8px; width: 44px; height: 44px; }
    .lightbox-next { right: 8px; width: 44px; height: 44px; }
    .lightbox-image { max-height: calc(100vh - 120px); }
  }


  /* ─────────────────────────────────────────────────────────── */
  /* PLATTEGROND COMPACT GRID + PDF-DOWNLOAD + 360-TOUR-LINK */
  /* ─────────────────────────────────────────────────────────── */
  .plattegrond-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
  }
  .plattegrond-thumb {
    display: block;
    border: 1px solid var(--line);
    background: var(--bone-deep);
    transition: border-color 0.25s ease, transform 0.25s ease;
    cursor: pointer;
    color: inherit;
  }
  .plattegrond-thumb:hover {
    border-color: var(--forest);
    transform: translateY(-2px);
  }
  .plattegrond-thumb-img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: #fff;
    display: block;
  }
  .plattegrond-thumb-label {
    padding: 12px 16px;
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    color: var(--mute);
    text-align: center;
    border-top: 1px solid var(--line);
  }

  /* 360-tour-knop */
  .tour-360-link {
    display: grid;
    grid-template-columns: 56px 1fr auto;
    align-items: center;
    gap: 22px;
    padding: 24px 28px;
    background: var(--bone-deep);
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    transition: border-color 0.25s ease, transform 0.25s ease;
  }
  .tour-360-link:hover {
    border-color: var(--forest);
    transform: translateY(-2px);
  }
  .tour-360-link svg {
    width: 40px; height: 40px;
    color: var(--forest);
  }
  .tour-360-link span {
    font-family: 'Playfair Display', serif;
    font-size: 1.2rem;
  }
  .tour-360-link em {
    font-style: normal;
    color: var(--mute);
    font-size: 0.9rem;
  }

  @media (max-width: 760px) {
    .plattegrond-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
    .tour-360-link { grid-template-columns: 40px 1fr; padding: 18px 20px; }
    .tour-360-link em { grid-column: 1 / -1; padding-left: 60px; }
  }


  /* ─────────────────────────────────────────────────────────── */
  /* FUNDA-KENMERKEN 8 categorieën met icoontjes + collapse-toggle */
  /* ─────────────────────────────────────────────────────────── */
  .kenmerken-wrapper { /* container voor categorieën + toggle-button */ }

  .kenmerken-hidden {
    display: none;
  }
  .kenmerken-wrapper[data-kenmerken-state="expanded"] .kenmerken-hidden {
    display: block;
  }

  /* Fade-overlay onder visible-categorieën in collapsed-state,
     pattern-reuse van de description-fade */
  .kenmerken-wrapper[data-kenmerken-state="collapsed"] .kenmerken-visible {
    position: relative;
  }
  .kenmerken-wrapper[data-kenmerken-state="collapsed"] .kenmerken-visible::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 120px;
    background: linear-gradient(to bottom, rgba(246, 244, 243, 0) 0%, var(--bone) 90%);
    pointer-events: none;
  }

  /* Spacing tussen categorieën via adjacent-sibling: werkt cross-boundary tussen visible en hidden */
  .kenmerk-category + .kenmerk-category,
  .kenmerken-wrapper[data-kenmerken-state="expanded"] .kenmerken-hidden > .kenmerk-category:first-child {
    margin-top: 36px;
  }
  .kenmerk-category-head {
    display: flex;
    align-items: center;
    gap: 14px;
    padding-bottom: 14px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--line);
  }
  .kenmerk-category-icon {
    width: 28px; height: 28px;
    flex-shrink: 0;
    object-fit: contain;
  }
  .kenmerk-category-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ink);
    margin: 0;
  }
  .kenmerk-category-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
  }
  .kenmerk-category-grid .kenmerk-item:nth-child(odd) {
    padding-right: 24px;
  }
  .kenmerk-category-grid .kenmerk-item:nth-child(even) {
    padding-left: 24px;
  }
  @media (min-width: 1000px) {
    .kenmerk-category-grid .kenmerk-item:nth-child(odd) {
      border-right: 1px solid var(--line);
    }
  }

  /* Multi-value lijsten binnen kenmerk-item */
  .kenmerk-item-list {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 8px !important;
  }
  .kenmerk-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
    width: 100%;
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.6;
  }
  .kenmerk-item-list .kenmerk-value-list {
    text-align: left;
  }

  /* "Bekijk alle kenmerken"-toggle */
  .kenmerken-toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 24px;
    padding: 14px 22px;
    background: transparent;
    border: 1px solid var(--line);
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.25s ease, color 0.25s ease;
  }
  .kenmerken-toggle:hover {
    border-color: var(--forest);
    color: var(--forest);
  }
  .kenmerken-toggle-chevron {
    width: 18px; height: 18px;
    transition: transform 0.25s ease;
  }
  .kenmerken-wrapper[data-kenmerken-state="expanded"] .kenmerken-toggle-chevron {
    transform: rotate(180deg);
  }
  .kenmerken-wrapper[data-kenmerken-state="expanded"] .kenmerken-toggle-label::after {
    content: " (sluit)";
    color: var(--mute);
    font-weight: 400;
  }

  @media (max-width: 760px) {
    .kenmerk-category-grid { grid-template-columns: 1fr; }
    .kenmerk-category-grid .kenmerk-item:nth-child(odd) {
      padding-right: 0;
      border-right: none;
    }
    .kenmerk-category-grid .kenmerk-item:nth-child(even) {
      padding-left: 0;
    }
  }


  /* ─────────────────────────────────────────────────────────── */
  /* VIDEO PLAY-BUTTON OVERLAY + LISTING-SECTION QUICKMETA */
  /* ─────────────────────────────────────────────────────────── */

  /* Play-button overlay op cover-foto (alleen tonen als woning video heeft) */
  .listing-hero-video-btn {
    position: absolute;
    bottom: 24px;
    left: 24px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 18px 10px 14px;
    background: rgba(255, 255, 255, 0.92);
    border: none;
    color: var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .listing-hero-video-btn:hover {
    background: var(--forest);
    color: #fff;
    transform: translateY(-1px);
  }
  .listing-hero-video-btn svg {
    width: 16px; height: 16px;
    color: var(--forest);
    transition: color 0.25s ease;
  }
  .listing-hero-video-btn:hover svg { color: #fff; }

  /* Lightbox video stage */
  .lightbox-video {
    max-width: 100%;
    max-height: calc(100vh - 180px);
    background: #000;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  }
  .lightbox-video-fallback {
    display: inline-block;
    margin-top: 12px;
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Jost', sans-serif;
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
  }
  .lightbox-video-fallback:hover { color: #fff; }
  /* HTML hidden-attribute moet display: inline-block overrulen */
  .lightbox-video-fallback[hidden] { display: none; }

  /* iOS tekent de geluidstoggle rechtsboven ÍN de video; een staande video vult op
   * mobiel de volle breedte en schuift daarmee onder de sluitknop. Alleen bij video
   * reserveert de stage daarom de sluitknop-zone (12px top + 44px knop + marge);
   * foto's houden hun huidige centrering. svh: past ook mét zichtbare adresbalk. */
  @media (max-width: 760px) {
    .lightbox-stage:has(.lightbox-video:not([hidden])) { padding-top: 68px; }
    .lightbox-video { max-height: calc(100svh - 150px); }
  }

  /* Listing-section quickmeta (postcode + 3 specs onder Section-title, ALLEEN op mobile, sober/flat).
   * Op desktop is dezelfde info al in sticky sidebar zichtbaar — dus hier verbergen om duplicatie te voorkomen. */
  .listing-section-zip,
  .listing-section-quickmeta {
    display: none;
  }
  @media (max-width: 1000px) {
    .listing-section-zip {
      display: block;
      font-family: 'Jost', sans-serif;
      font-size: 1rem;
      color: var(--mute);
      margin-top: -16px;
      margin-bottom: 8px;
    }
    .listing-section-quickmeta {
      display: flex;
      flex-wrap: wrap;
      gap: 28px;
      margin-bottom: 32px;
      padding-bottom: 22px;
      border-bottom: 1px solid var(--line);
    }
    .listing-quickmeta-item {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      font-family: 'Playfair Display', serif;
      font-size: 1rem;
      color: var(--ink);
      line-height: 1;
    }
    .listing-quickmeta-item img {
      width: 22px; height: 22px;
      object-fit: contain;
      flex-shrink: 0;
    }
    .listing-quickmeta-item small {
      font-family: 'Jost', sans-serif;
      font-size: 12px;
      color: var(--mute);
      margin-left: 2px;
    }
  }

  @media (max-width: 760px) {
    .listing-hero-video-btn { bottom: 16px; left: 16px; padding: 8px 14px 8px 12px; font-size: 0.85rem; }
    .listing-section-quickmeta { gap: 20px; }
  }


  /* ─────────────────────────────────────────────────────────── */
  /* Utility-classes (vervangen inline styles) */
  /* ─────────────────────────────────────────────────────────── */
  .sidebar-spec-unit {
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    color: var(--mute);
  }
  .aanbod-card-photo-empty {
    background: var(--bone-deep);
  }


  /* ─────────────────────────────────────────────────────────── */
  /* OPEN HUIS + VERKOCHT-STYLING */
  /* ─────────────────────────────────────────────────────────── */

  /* Open-huis-blok (boven 'Over deze woning') */
  .listing-open-huis {
    margin-bottom: 70px;
    padding: 22px 26px;
    background: var(--bone-deep);
    border: 1px solid var(--line);
    border-left: 3px solid var(--forest);
  }
  .listing-open-huis-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: 'Jost', sans-serif;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--forest);
    margin-bottom: 12px;
  }
  .listing-open-huis-eyebrow svg {
    width: 16px; height: 16px;
  }
  .listing-open-huis-list {
    list-style: none;
    padding: 0;
    margin: 0;
    font-family: 'Playfair Display', serif;
    font-size: 1.15rem;
    color: var(--ink);
    line-height: 1.6;
  }
  .listing-open-huis-list li {
    padding-left: 0;
  }
  .listing-open-huis-list li + li {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 1px solid var(--line);
  }

  /* Verkocht-banner (boven open-huis, eerste in main) */
  .listing-sold-banner {
    margin-bottom: 36px;
    padding: 20px 26px;
    background: rgba(20, 19, 15, 0.04);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ink);
    font-family: 'Jost', sans-serif;
    font-size: 0.95rem;
    color: var(--ink);
    line-height: 1.6;
  }
  .listing-sold-banner strong {
    display: block;
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .listing-sold-banner span {
    color: var(--mute);
  }
  .listing-sold-banner a {
    color: var(--ink);
    border-bottom: 1px solid var(--eyebrow);
    padding-bottom: 1px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .listing-sold-banner a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }

  /* Verkocht-state op listing-hero: foto-desaturate + grote overlay */
  .listing-hero.is-sold .listing-hero-cover {
    filter: grayscale(0.7) brightness(0.9);
    transition: filter 0.3s ease;
  }
  .listing-hero.is-sold:hover .listing-hero-cover {
    filter: grayscale(0.4) brightness(0.95);
  }
  /* Sold-ribbon: diagonale strook rechter-bovenhoek (linker-hoek is voor .listing-hero-status) */
  .listing-hero-sold-ribbon {
    position: absolute;
    top: 0;
    right: 0;
    width: 220px;
    height: 220px;
    overflow: hidden;
    pointer-events: none;
    z-index: 5;
  }
  .listing-hero-sold-ribbon span {
    position: absolute;
    top: 44px;
    right: -64px;
    width: 280px;
    transform: rotate(45deg);
    background: var(--forest);
    color: #FFFFFF;
    font-family: 'Jost', sans-serif;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    text-align: center;
    padding: 10px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  }
  @media (max-width: 760px) {
    .listing-hero-sold-ribbon { width: 180px; height: 180px; }
    .listing-hero-sold-ribbon span {
      top: 34px;
      right: -72px;
      width: 240px;
      font-size: 11px;
      padding: 8px 0;
    }
  }

  /* ──────── /exclusief-vastgoed ──────── */

  /* #beschikbaar-sectie: layout-overrides op de gedeelde aanbod-grid/-empty,
     gescopet op een eigen class (niet op het generieke #beschikbaar-id). */
  .exclusief-beschikbaar .aanbod-grid { margin-top: 40px; }
  .exclusief-beschikbaar .aanbod-empty { padding: 40px 0; text-align: left; }

  /* Section-nav sticky onder hoofd-header */
  .section-nav {
    position: sticky;
    top: 94px;
    z-index: 40;
    background: var(--bone);
    border-bottom: 1px solid var(--line);
    transition: top 0.3s ease;
  }
  html.is-scrolled .section-nav { top: 74px; }
  .section-nav-inner {
    display: flex;
    gap: 32px;
    padding: 0 48px;
    justify-content: center;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .section-nav-inner::-webkit-scrollbar { display: none; }
  .section-nav-inner a {
    display: inline-block;
    padding: 14px 0;
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mute);
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .section-nav-inner a:hover {
    color: var(--ink);
    border-bottom-color: var(--eyebrow);
  }
  section[id] { scroll-margin-top: 130px; }

  /* 2-col page-grid override via :has() — alleen actief op pages MET .page-sidebar (zoals exclusief). Legal-pages blijven single-col. */
  .page-grid:has(.page-sidebar) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 64px;
    padding: 56px 48px 80px;
    align-items: start;
  }
  .page-main > section + section { margin-top: 80px; }
  .page-sidebar {
    position: sticky;
    top: 172px;
    align-self: start;
    transition: top 0.3s ease;
  }
  html.is-scrolled .page-sidebar { top: 152px; }

  /* Sticky sidebar CTA-card */
  .cta-card {
    background: var(--bone);
    border: 1px solid var(--line);
    padding: 28px 28px 32px;
  }
  .cta-card-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 10px;
  }
  .cta-card-eyebrow::before {
    content: '';
    width: 18px;
    height: 1px;
    background: var(--eyebrow);
  }
  .cta-card-title {
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 400;
    line-height: 1.15;
    color: var(--ink);
    margin-bottom: 12px;
  }
  .cta-card-body {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 22px;
  }
  .cta-card-primary {
    display: block;
    width: 100%;
    text-align: center;
    background: var(--forest);
    color: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 0.98rem;
    font-weight: 500;
    padding: 14px 18px;
    border: 1px solid var(--forest);
    transition: background 0.25s ease, border-color 0.25s ease;
    margin-bottom: 8px;
  }
  .cta-card-primary:hover { background: var(--forest-light); border-color: var(--forest-light); }
  .cta-card-secondary {
    display: block;
    text-align: center;
    font-size: 0.92rem;
    color: var(--mute);
    padding: 8px 0;
    transition: color 0.25s ease;
  }
  .cta-card-secondary:hover { color: var(--forest); }
  .cta-agent {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 24px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
  }
  .cta-agent-photo {
    width: 44px; height: 44px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    background: var(--bone-deep);
    flex-shrink: 0;
  }
  .cta-agent-name {
    font-family: 'Jost', sans-serif;
    font-size: 0.92rem;
    font-weight: 500;
    color: var(--ink);
    line-height: 1.2;
  }
  .cta-agent-role {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mute);
    margin-top: 4px;
  }

  /* Section heading (gedeeld) */
  .section-eyebrow {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 14px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
  }
  .section-eyebrow::before {
    content: '';
    width: 24px;
    height: 1px;
    background: var(--eyebrow);
  }
  .section-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(32px, 3.8vw, 48px);
    line-height: 1.1;
    letter-spacing: -0.005em;
    color: var(--ink);
    margin-bottom: 28px;
    max-width: 720px;
  }
  .section-title em { font-style: normal; color: inherit; }
  .section-title .sparkle { color: var(--eyebrow); margin-left: 4px; }
  .section-body p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 18px;
    max-width: 680px;
  }
  .section-body p:last-child { margin-bottom: 0; }

  /* Editorial body (long-form narrative) */
  .editorial-body {
    max-width: 720px;
    margin-top: 8px;
  }
  .editorial-body p {
    font-size: 1.1rem;
    line-height: 1.75;
    color: var(--ink-soft);
    margin-bottom: 22px;
  }
  .editorial-body p:last-child { margin-bottom: 0; }
  .editorial-body p .sparkle { color: var(--eyebrow); margin: 0 2px; }

  /* Karakter-highlight (border-left quote-style) */
  .karakter-highlight {
    margin: 40px 0 8px;
    padding: 8px 0 8px 28px;
    border-left: 2px solid var(--eyebrow);
    max-width: 720px;
  }
  .karakter-highlight h2, .karakter-highlight h3 {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 24px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 12px;
    line-height: 1.25;
  }
  .karakter-highlight p {
    font-size: 1.05rem;
    line-height: 1.7;
    color: var(--ink-soft);
    margin-bottom: 0;
  }

  /* Exclusief teaser-grid (6 typografische cards, contact-gated) */
  .exclusief-teaser-grid {
    margin-top: 40px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .exclusief-teaser-card {
    display: flex;
    flex-direction: column;
    padding: 28px 26px 30px;
    background: var(--bone-deep);
    border: 1px solid var(--line);
    transition: border-color 0.3s ease, transform 0.3s ease;
  }
  .exclusief-teaser-card:hover {
    border-color: var(--eyebrow);
    transform: translateY(-3px);
  }
  .exclusief-teaser-eyebrow {
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 18px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
  }
  .exclusief-teaser-eyebrow .sparkle { color: var(--eyebrow); }
  .exclusief-teaser-wijk {
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--whisper);
    margin-bottom: 10px;
  }
  .exclusief-teaser-title {
    font-family: 'Playfair Display', serif;
    font-size: 1.4rem;
    font-weight: 400;
    color: var(--ink);
    line-height: 1.25;
    margin-bottom: 14px;
  }
  .exclusief-teaser-desc {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--ink-soft);
    margin-bottom: 22px;
    flex-grow: 1;
  }
  .exclusief-teaser-meta {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding-top: 18px;
    border-top: 1px solid var(--line);
    /* Krappere gap + iets strakkere link-tracking hieronder: samen precies
       de ruimte die een achtcijferige prijs (16M-kaart) extra nodig heeft,
       zonder tekst te verkleinen. */
    gap: 8px;
    /* Terugval voor extreem lange prijzen: dan zakt de toegang-link als
       geheel naar de volgende regel i.p.v. dat "k.k." losbreekt. */
    flex-wrap: wrap;
  }
  .exclusief-teaser-price {
    font-family: 'Playfair Display', serif;
    font-size: 1rem;
    white-space: nowrap;
    color: var(--ink);
  }
  .exclusief-teaser-link {
    font-family: 'Jost', sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    transition: color 0.25s ease;
    white-space: nowrap;
  }
  .exclusief-teaser-card:hover .exclusief-teaser-link { color: var(--forest); }
  .exclusief-teaser-link::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

  /* Proces-list (3-stappen toegang) */
  .proces-list {
    list-style: none;
    margin-top: 40px;
    max-width: 760px;
    padding: 0;
  }
  .proces-step {
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: 28px;
    padding: 26px 0;
    border-bottom: 1px solid var(--line);
  }
  .proces-step:first-child { padding-top: 0; }
  .proces-step:last-child { border-bottom: none; padding-bottom: 0; }
  .proces-step-num {
    font-family: 'Playfair Display', serif;
    font-style: italic;
    font-size: 28px;
    line-height: 1;
    color: var(--eyebrow);
  }
  .proces-step-title {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 400;
    color: var(--ink);
    margin-bottom: 8px;
    line-height: 1.2;
  }
  .proces-step-body {
    font-size: 1rem;
    color: var(--ink-soft);
    line-height: 1.6;
  }

  /* FAQ-list (details/summary) */
  .faq-list {
    margin-top: 40px;
    background: var(--bone);
    border: 1px solid var(--line);
  }
  .faq-item { border-bottom: 1px solid var(--line); }
  .faq-item:last-child { border-bottom: none; }
  .faq-item summary {
    list-style: none; cursor: pointer;
    padding: 22px 28px;
    display: flex; align-items: center;
    justify-content: space-between; gap: 24px;
    font-family: 'Jost', sans-serif;
    font-size: 1.02rem;
    color: var(--ink);
    transition: color 0.2s ease;
  }
  .faq-item summary::-webkit-details-marker { display: none; }
  .faq-item summary:hover { color: var(--forest); }
  .faq-item summary::after {
    content: '';
    width: 10px; height: 10px;
    border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
    transform: rotate(45deg); margin-bottom: 4px;
    transition: transform 0.3s ease, border-color 0.25s ease;
    flex-shrink: 0;
  }
  .faq-item[open] summary::after { transform: rotate(-135deg); margin-bottom: -2px; }
  .faq-item summary:hover::after { border-color: var(--forest); }
  .faq-item .faq-answer {
    padding: 0 28px 24px;
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--ink-soft);
  }
  .faq-item .faq-answer .sparkle { color: var(--eyebrow); margin: 0 2px; }
  .faq-item summary .sparkle { color: var(--eyebrow); }
  /* Links in FAQ-antwoorden herkenbaar als link (de globale anchor-reset maakt ze
     anders onzichtbaar): zelfde opmaak als .article-body a. Geldt site-breed, want
     .faq-item wordt gedeeld (FAQ-pagina, diensten, wijken, exclusief, werken-bij). */
  .faq-item .faq-answer a {
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .faq-item .faq-answer a:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }

  /* Closing-cta block */
  .closing-cta {
    margin-top: 0;
    padding: 72px 48px 80px;
    background: var(--bone-deep);
    text-align: center;
    border-top: 1px solid var(--line);
  }
  .closing-cta-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 16px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--eyebrow);
    margin-bottom: 22px;
  }
  .closing-cta-eyebrow::before, .closing-cta-eyebrow::after {
    content: '';
    width: 28px; height: 1px;
    background: var(--eyebrow);
  }
  .closing-cta-eyebrow .sparkle { color: var(--eyebrow); }
  .closing-cta-title {
    font-family: 'Playfair Display', serif;
    font-weight: 400;
    font-size: clamp(28px, 3.5vw, 40px);
    line-height: 1.18;
    color: var(--ink);
    margin: 0 auto 18px;
    max-width: 640px;
  }
  .closing-cta-title em { font-style: normal; color: inherit; }
  .closing-cta-title .sparkle { color: var(--eyebrow); }
  .closing-cta-body {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto 32px;
  }
  .closing-cta-actions {
    display: flex;
    gap: 24px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
  }
  .closing-cta-actions a.primary {
    background: var(--forest);
    color: var(--bone);
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    padding: 14px 28px;
    border: 1px solid var(--forest);
    transition: background 0.25s ease, border-color 0.25s ease;
  }
  .closing-cta-actions a.primary:hover {
    background: var(--forest-light);
    border-color: var(--forest-light);
  }
  .closing-cta-actions a.secondary {
    font-family: 'Jost', sans-serif;
    font-size: 1rem;
    color: var(--ink);
    border-bottom: 1px solid var(--sand);
    padding: 4px 2px;
    transition: color 0.25s ease, border-color 0.25s ease;
  }
  .closing-cta-actions a.secondary:hover {
    color: var(--forest);
    border-bottom-color: var(--forest);
  }

  /* Tablet-tussenmaat (sidebar nog náást de content, bv. iPad-landscape):
     de main-kolom is dan te smal voor 3 kaarten naast elkaar en kaart-inhoud
     steekt de goot over richting de sidebar. 2 kolommen in precies deze band:
     ondergrens 1001px zodat de site-brede 1-koloms mobielregel (≤1000px)
     ongemoeid blijft (een kale max-width overschreef die),
     bovengrens 1280px. Geldt voor de aanbod-grids (exclusief, team-profielen)
     én de off-market-teasers op exclusief (zelfde kale-1fr-blowout). */
  @media (min-width: 1001px) and (max-width: 1280px) {
    .page-grid:has(.page-sidebar) .aanbod-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .page-grid:has(.page-sidebar) .exclusief-teaser-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  }

  /* /exclusief-vastgoed mobile-overrides (@1100px en @760px) */
  @media (max-width: 1100px) {
    /* minmax(0, 1fr) en NIET een kale 1fr: die is gelijk aan minmax(auto, 1fr),
       waardoor de track niet onder de min-content van .page-main kan krimpen.
       Een kind met een grote intrinsieke breedte (het 900px-brede proces-raster)
       duwde de hele pagina dan naar 925px op een 360px-telefoon, met iOS-
       text-autosizing als bijverschijnsel. De desktop-track hierboven gebruikt
       minmax(0, ...) al; deze regel week daarvan af. Gemeten op 320-412px:
       alle 7 page-grid-pagina's nu 0 overflow. */
    .page-grid:has(.page-sidebar) { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 40px 32px 64px; }
    .page-sidebar { position: static; }
    .section-nav-inner { gap: 22px; padding: 0 32px; justify-content: flex-start; }
    .exclusief-teaser-grid { grid-template-columns: repeat(2, 1fr); }
  }
  @media (max-width: 760px) {
    .page-grid:has(.page-sidebar) { padding: 32px 24px 56px; gap: 40px; }
    .page-main > section + section { margin-top: 56px; }
    .section-nav { top: 79px; }
    html.is-scrolled .section-nav { top: 79px; }
    .section-nav-inner { gap: 18px; padding: 0 24px; }
    .section-nav-inner a { font-size: 0.72rem; padding: 12px 0; }
    .exclusief-teaser-grid { grid-template-columns: 1fr; gap: 16px; }
    .closing-cta { padding: 48px 24px 56px; }
    .closing-cta-actions { flex-direction: column; gap: 16px; align-items: center; }
    .closing-cta-actions a.primary { width: 100%; text-align: center; }
    /* .secondary blijft natural width — underline alleen onder de tekst, niet full-width */
    .proces-step { grid-template-columns: 44px 1fr; gap: 18px; }
  }

/* ─────────────────────────────────────────────────────────────────
   DIENSTEN — marketing-pillar / team-card /
   resultaten-card / author-byline / dienst-teaser. Foto's via <img>. De hero
   hergebruikt .aanbod-intro; proces-list,
   faq-list, cta-card, section-nav, service-strip bestaan al.
   ───────────────────────────────────────────────────────────────── */

.marketing-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.marketing-pillar { padding: 28px 28px 32px; background: var(--bone); border: 1px solid var(--line); transition: border-color 0.3s ease; }
.marketing-pillar:hover { border-color: var(--eyebrow); }
.marketing-pillar-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.marketing-pillar-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.marketing-pillar-title .sparkle { color: var(--eyebrow); margin-left: 4px; }
.marketing-pillar-body { font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); }

.team-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
/* Vier teamleden (dienst-pagina's): één rij van vier op brede desktops, 2×2 op
   smallere desktops. Mobiel (≤1000px) geldt gewoon de dienst-wide rij-weergave. */
.team-grid--4 { grid-template-columns: repeat(4, 1fr); gap: 18px; }
@media (min-width: 1001px) and (max-width: 1260px) {
  .team-grid--4 { grid-template-columns: repeat(2, 1fr); }
}
.team-card { position: relative; padding: 32px 24px; background: var(--bone); border: 1px solid var(--line); text-align: center; display: flex; flex-direction: column; align-items: center; transition: border-color 0.3s ease, transform 0.3s ease; }
.team-card:hover { border-color: var(--eyebrow); transform: translateY(-3px); }
.team-card-photo { width: 96px; height: 96px; border-radius: 50%; object-fit: cover; object-position: center top; margin-bottom: 18px; flex-shrink: 0; }
.team-card-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 6px; line-height: 1.2; }
/* Typering (wens Joshua): klein cursief bijschrift tussen naam en functie,
   als editorial onderschrift in gedempt goud. */
.team-card-typering { font-family: 'Playfair Display', serif; font-style: italic; font-size: 14px; color: var(--eyebrow); margin-bottom: 16px; }
.team-card-role { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 16px; }
.team-card-bio { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); margin-bottom: 18px; flex-grow: 1; }
.team-card-link { font-size: 0.9rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.team-card-link:hover { color: var(--forest); border-color: var(--forest); }
.team-card-link::after { content: ' →'; color: var(--eyebrow); margin-left: 2px; }
/* Hele team-card klikbaar (stretched link): onzichtbare overlay vanuit de echte <a>, geen JS,
   dus toetsenbord-focus + cmd/ctrl-klik (nieuw tabblad) blijven werken. ::before omdat ::after
   de pijl-glyph is. z-index houdt 'm boven de statische kaart-inhoud zodat de klik altijd op de
   <a> landt; pointer-events blijft bewust auto (het is deel van de link). Geldt voor de team-hub
   en de team-secties op dienstpagina's (zelfde kaart). */
.team-card-link::before { content: ''; position: absolute; inset: 0; z-index: 1; }
/* Toetsenbord-focus zichtbaar op de HELE kaart, niet alleen op de kleine link-tekst (WCAG 2.4.7). */
.team-card:focus-within { border-color: var(--forest); outline: 2px solid var(--forest); outline-offset: 2px; }
.team-card:focus-within .team-card-link { outline: none; }

.resultaten-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.resultaten-card { display: flex; flex-direction: column; transition: transform 0.4s ease; }
.resultaten-card:hover { transform: translateY(-4px); }
.resultaten-card-photo { aspect-ratio: 5 / 4; position: relative; overflow: hidden; margin-bottom: 14px; background: var(--bone-deep); }
.resultaten-card-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.resultaten-card:hover .resultaten-card-photo-img { transform: scale(1.05); }
.resultaten-tag { position: absolute; top: 12px; left: 12px; background: var(--forest); color: var(--bone); padding: 5px 10px; font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; }
.resultaten-tag.stille { background: var(--forest); color: var(--sand); }
.resultaten-tag.stille::after { content: ' ✦'; color: var(--sand-soft); }
.resultaten-card-area { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 6px; }
.resultaten-card-title { font-family: 'Playfair Display', serif; font-size: 20px; font-weight: 400; line-height: 1.15; color: var(--ink); margin-bottom: 4px; }
.resultaten-card-meta { font-size: 0.85rem; color: var(--mute); margin-top: 6px; line-height: 1.55; }
.resultaten-cta { display: flex; justify-content: flex-end; margin-top: 32px; }
.resultaten-cta a { font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.resultaten-cta a:hover { color: var(--forest); border-color: var(--forest); }
.resultaten-cta a::after { content: ' →'; color: var(--eyebrow); margin-left: 2px; }

.author-byline { margin-top: 72px; padding-top: 48px; border-top: 1px solid var(--line); }
.author-card { max-width: 720px; display: inline-grid; grid-template-columns: 80px 1fr; gap: 24px; align-items: center; text-align: left; }
.author-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; object-position: center top; flex-shrink: 0; }
.author-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 6px; }
.author-name { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 2px; }
.author-role { font-size: 0.95rem; color: var(--mute); margin-bottom: 12px; }
.author-bio { font-size: 0.95rem; line-height: 1.55; color: var(--ink-soft); max-width: 520px; }

.dienst-teaser-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: 32px; }
.dienst-teaser-grid + .dienst-teaser-grid { margin-top: 22px; }
.dienst-teaser-card { display: flex; flex-direction: column; padding: 30px 28px 28px; background: var(--bone); border: 1px solid var(--line); transition: border-color 0.3s ease, transform 0.3s ease; }
.dienst-teaser-card:hover { border-color: var(--eyebrow); transform: translateY(-3px); }
.dienst-teaser-lead { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--whisper); margin-bottom: 12px; }
.dienst-teaser-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 14px; }
.dienst-teaser-title .sparkle { color: var(--eyebrow); margin-left: 2px; }
.dienst-teaser-desc { font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 22px; flex-grow: 1; }
.dienst-teaser-meta { display: flex; justify-content: flex-end; padding-top: 16px; border-top: 1px solid var(--line); }
.dienst-teaser-link { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); transition: color 0.25s ease; white-space: nowrap; }
.dienst-teaser-card:hover .dienst-teaser-link { color: var(--forest); }
.dienst-teaser-link::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

@media (max-width: 1000px) {
  .marketing-grid { grid-template-columns: 1fr; gap: 16px; }
  .team-grid { grid-template-columns: 1fr; gap: 16px; }
  .resultaten-grid { grid-template-columns: 1fr; gap: 28px; }
  .author-card { grid-template-columns: 64px 1fr; gap: 18px; }
  .author-avatar { width: 64px; height: 64px; }
  .dienst-teaser-grid,
  .dienst-teaser-grid + .dienst-teaser-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   WIJKEN — werkgebied-hub + wijk-detailpagina's
   Hergebruikt (bestaat al): destination, section-nav, faq-list,
   author-byline, service-strip, closing-cta, aanbod-card, karakter-highlight,
   aanbod-intro, aanbod-head/-title/-meta, soft-divider.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Werkgebied-hub: wijk-grid (4-col, .destination-cards) ── */
.werkgebied-grid-wrap { padding: 56px 48px 80px; }
.werkgebied-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px; max-width: 1280px; margin: 0 auto;
}

/* ── Hub: karakter-quote (gecentreerde variant van karakter-highlight) ── */
.werkgebied-quote-wrap { padding: 32px 48px 48px; max-width: 1280px; margin: 0 auto; }
.werkgebied-quote-wrap .karakter-highlight {
  padding: 8px 0 8px 32px; border-left: 2px solid var(--eyebrow);
  max-width: 760px; margin: 0 auto;
}
.werkgebied-quote-wrap .karakter-highlight h2, .werkgebied-quote-wrap .karakter-highlight h3 {
  font-family: 'Playfair Display', serif; font-style: italic;
  font-size: clamp(22px, 2.4vw, 28px); font-weight: 400;
  color: var(--ink); line-height: 1.3; margin-bottom: 0;
}
.werkgebied-quote-wrap .karakter-highlight h3 em { font-style: normal; color: var(--forest); }


/* ── Hub: gooi-sectie ('t Gooi als secundair werkgebied) ── */
.gooi-section { padding: 72px 48px 80px; background: var(--bone); border-top: 1px solid var(--line); }
.gooi-section-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: center; }
.gooi-photo { aspect-ratio: 4 / 3; background: var(--bone-deep) center / cover no-repeat; }
.gooi-content { display: flex; flex-direction: column; }
.gooi-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; display: inline-flex; align-items: center; gap: 12px; }
.gooi-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.gooi-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 2.8vw, 36px); line-height: 1.15; color: var(--ink); margin-bottom: 22px; }
.gooi-title em { font-style: normal; color: inherit; }
.gooi-body { font-size: 1.05rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 28px; }
/* Zelfde link-opmaak als .article-body a / .faq-answer a: zonder dit maakt de
   globale anchor-reset de internationaal-link in de lopende tekst onzichtbaar. */
.gooi-body a { color: var(--ink); border-bottom: 1px solid var(--sand); transition: color 0.25s ease, border-color 0.25s ease; }
.gooi-body a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.gooi-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.gooi-tag { padding: 6px 14px; border: 1px solid var(--line); background: var(--bone-deep); font-family: 'Jost', sans-serif; font-size: 0.88rem; color: var(--ink); }
.gooi-link { font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; align-self: flex-start; transition: color 0.25s ease, border-color 0.25s ease; }
.gooi-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
.gooi-link::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

/* ── Wijk-detail: hero (grote landschap-foto + tekst eronder) ── */
.wijk-hero { padding: 60px 48px 0; }
.wijk-hero-photo { aspect-ratio: 21 / 9; background: var(--bone-deep) center / cover no-repeat; margin-bottom: 48px; position: relative; }
.wijk-hero-text { max-width: 720px; padding-bottom: 80px; }
.wijk-hero-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 28px; }
.wijk-hero-eyebrow::before { content: ''; width: 8px; height: 1px; background: var(--eyebrow); }
.wijk-hero-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(40px, 7vw, 96px); line-height: 1; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 28px; overflow-wrap: break-word; }
.wijk-hero-title em { font-style: normal; color: inherit; }
.wijk-hero-lede { font-size: 1.25rem; line-height: 1.5; color: var(--ink-soft); max-width: 580px; }

/* ── Wijk-detail: karakter / mini-historie + stats ── */
.wijk-karakter { padding: 80px 48px 100px; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; }
.wijk-karakter-head { position: sticky; top: 100px; }
.wijk-karakter-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.wijk-karakter-eyebrow::before { content: ''; width: 8px; height: 1px; background: var(--eyebrow); }
.wijk-karakter-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; }
.wijk-karakter-title em { font-style: normal; color: inherit; }
.wijk-karakter-body p { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 20px; }
.wijk-karakter-body p:last-child { margin-bottom: 0; }
.wijk-karakter-stats { margin-top: 36px; padding-top: 28px; border-top: 1px solid var(--line); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.wijk-stat-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); margin-bottom: 8px; }
.wijk-stat-value { font-family: 'Playfair Display', serif; font-size: 28px; color: var(--ink); line-height: 1; }

/* ── Wijk-detail: deelbuurten (sub-cards) ── */
.wijk-sub { padding: 80px 48px 100px; }
.wijk-sub-head { text-align: center; max-width: 720px; margin: 0 auto 60px; }
.wijk-sub-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.wijk-sub-eyebrow::before, .wijk-sub-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.wijk-sub-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; letter-spacing: -0.005em; color: var(--ink); margin-bottom: 14px; }
.wijk-sub-title em { font-style: normal; color: inherit; }
.wijk-sub-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; }
.wijk-sub-card { background: var(--bone); border: 1px solid var(--line); padding: 32px 32px 36px; transition: border-color 0.3s ease; }
.wijk-sub-card:hover { border-color: var(--eyebrow); }
.wijk-sub-card-name { font-family: 'Playfair Display', serif; font-size: 28px; font-weight: 400; color: var(--ink); margin-bottom: 6px; }
.wijk-sub-card-meta { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.wijk-sub-card-body { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }

/* ── Wijk-detail: vergelijkingstabel ── */
.compare-table-wrap:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.wijk-compare { padding: 100px 48px; background: var(--bone-deep); }
.wijk-compare-head { text-align: center; margin-bottom: 60px; }
.wijk-compare-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.wijk-compare-eyebrow::before, .wijk-compare-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.wijk-compare-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 14px; }
.wijk-compare-title em { font-style: normal; color: inherit; }
.wijk-compare-note { font-size: 0.95rem; color: var(--mute); font-style: italic; }
.compare-table-wrap { background: var(--bone); border: 1px solid var(--line); overflow-x: auto; }
.compare-table { width: 100%; border-collapse: collapse; min-width: 720px; }
.compare-table thead th { text-align: left; padding: 28px 24px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); background: transparent; border-bottom: 1px solid var(--line); }
.compare-table thead th:first-child { color: var(--mute); }
.compare-table thead th.is-self { color: var(--ink); border-bottom-color: var(--forest); }
.compare-table tbody tr { border-bottom: 1px solid var(--line); }
.compare-table tbody tr:last-child { border-bottom: none; }
.compare-table tbody td { padding: 22px 24px; font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--ink); vertical-align: top; }
.compare-table tbody td:first-child { font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--mute); text-transform: none; letter-spacing: 0; }
.compare-table tbody td.is-self { background: rgba(30, 59, 46, 0.04); }
.compare-table tbody td .unit { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--mute); margin-left: 4px; }

/* ── Wijk-detail: woningprijzen per type ── */
.price-section { padding: 80px 48px 100px; background: var(--bone-deep); }
.price-section-head { text-align: center; margin-bottom: 50px; }
.price-section-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.price-section-eyebrow::before, .price-section-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.price-section-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 14px; }
.price-section-title em { font-style: normal; color: inherit; }
.price-section-note { font-size: 0.95rem; color: var(--mute); font-style: italic; }
.price-grid { max-width: 900px; margin: 0 auto; background: var(--bone); border: 1px solid var(--line); }
/* m²-kolom breed genoeg voor de kop "Transactieprijs per m²" op één regel (~205px
   in de 11px-kapitalen met tracking; bij 0.7fr was de kolom ~162px en brak de kop). */
.price-row { display: grid; grid-template-columns: 1.45fr 1.2fr 0.95fr; padding: 22px 32px; border-bottom: 1px solid var(--line); align-items: center; }
.price-row:last-child { border-bottom: none; }
/* Kopregel boven uitlijnen: de m²-kop is twee regels (kop + subregel) en zou
   gecentreerd hoger zweven dan de éénregelige koppen Type en Prijsrange. */
.price-row.is-header { align-items: start; }
.price-row.is-header > * { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); }
.price-row .price-type { font-family: 'Jost', sans-serif; font-size: 1rem; color: var(--ink); }
.price-row .price-range { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--ink); }
.price-row .price-m2 { font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--mute); }
/* De labels staan op desktop al in de kolomkop; alleen mobiel (gestapelde rijen
   zonder kopregel) toont elke waarde zijn eigen eyebrow-label. */
.price-cell-label { display: none; }
/* Subregel onder de m²-kolomkop: duidt de bandbreedte (onderkant = opknapper,
   bovenkant = high-end afgewerkt) zonder de smalle kolom te laten afbreken. */
.price-head-sub { display: block; margin-top: 4px; font-size: 10px; font-weight: 400; letter-spacing: 0.08em; text-transform: none; color: var(--mute); }

/* ── Wijk-detail: Qualis-callout (off-market netwerk) ── */
.qualis-callout { padding: 80px 48px; }
.qualis-callout-inner { max-width: 1100px; margin: 0 auto; background: var(--bone-deep); color: var(--ink); padding: 56px 64px; display: grid; grid-template-columns: 1fr 1.4fr; gap: 48px; align-items: center; position: relative; overflow: hidden; border: 1px solid var(--line); }
.qualis-callout-inner::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 120px; height: 1px; background: var(--eyebrow); }
.qualis-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.qualis-eyebrow::before { content: ''; width: 8px; height: 1px; background: var(--eyebrow); }
.qualis-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 3.5vw, 44px); line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; }
.qualis-title em { font-style: normal; color: inherit; }
.qualis-body p { font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 24px; }
.qualis-body p:last-child { margin-bottom: 0; }
.qualis-body strong { color: var(--ink); font-weight: 500; }
.qualis-link { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-size: 1rem; font-weight: 500; border-bottom: 1px solid var(--eyebrow); padding-bottom: 4px; transition: gap 0.3s ease, color 0.25s ease, border-color 0.25s ease; }
.qualis-link:hover { gap: 16px; color: var(--forest); border-bottom-color: var(--forest); }
/* Forest-variant (Panel-toggle qualis_forest): het lichte kaartje wordt een
   full-bleed band in de gedeelde forest-esthetiek (dienst-pillars/club-year);
   het discretie-thema in de ankerkleur. Layout van de inner blijft gelijk. */
.qualis-callout.is-forest { background: var(--forest); padding-top: 96px; padding-bottom: 96px; }
.qualis-callout.is-forest .qualis-callout-inner { background: none; border: 0; padding: 0; }
.qualis-callout.is-forest .qualis-callout-inner::before { content: none; }
.qualis-callout.is-forest .qualis-eyebrow { color: var(--sand); }
.qualis-callout.is-forest .qualis-eyebrow::before { background: var(--sand); }
.qualis-callout.is-forest .qualis-title { color: var(--bone); }
.qualis-callout.is-forest .qualis-body p { color: rgba(255, 255, 255, 0.82); }
.qualis-callout.is-forest .qualis-body strong { color: var(--bone); }
.qualis-callout.is-forest .qualis-link { color: var(--bone); border-bottom-color: rgba(212, 193, 166, 0.45); }
.qualis-callout.is-forest .qualis-link:hover { color: var(--sand); border-bottom-color: var(--sand); }

/* ── Wijk-detail: voorzieningen ── */
.voorzieningen { padding: 90px 48px 100px; }
.voorzieningen-head { text-align: center; margin-bottom: 60px; }
.voorzieningen-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.voorzieningen-eyebrow::before, .voorzieningen-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.voorzieningen-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; }
.voorzieningen-title em { font-style: normal; color: inherit; }
.voorzieningen-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; margin-top: 48px; }
.voorz-item h3 { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.voorz-item p { font-size: 1rem; line-height: 1.55; color: var(--ink-soft); }

/* ── Wijk-detail: FAQ-wrapper (faq-list zelf bestaat al) ── */
.wijk-faq { padding: 80px 48px 100px; background: var(--bone-deep); }
.wijk-faq-head { text-align: center; margin-bottom: 50px; }
.wijk-faq-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.wijk-faq-eyebrow::before, .wijk-faq-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.wijk-faq-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; }
.wijk-faq-title em { font-style: normal; color: inherit; }

/* ── Wijk-detail: kaarten met andere wijken (.neighbours, hergebruikt .destinations + .destination) ── */
.neighbours { padding: 100px 48px; }
.neighbours-head { text-align: center; max-width: 640px; margin: 0 auto 56px; }
.neighbours-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.neighbours-eyebrow::before, .neighbours-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.neighbours-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink); letter-spacing: -0.005em; }
.neighbours-title em { font-style: normal; color: inherit; }

/* ── Wijk-aanbod empty-state ── */
.wijk-aanbod-empty { max-width: 640px; margin: 0 auto; text-align: center; padding: 40px 0 10px; }
.wijk-aanbod-empty p { font-size: 1.05rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 20px; }
.wijk-aanbod-empty a { font-family: 'Jost', sans-serif; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.wijk-aanbod-empty a:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* ── Wijken: mobiel ── */
@media (max-width: 1100px) {
  .werkgebied-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .gooi-section-inner { grid-template-columns: 1fr; gap: 32px; max-width: 760px; }
}
@media (max-width: 1000px) {
  .wijk-hero, .wijk-karakter, .wijk-compare, .neighbours {
    padding-left: 24px; padding-right: 24px;
  }
  .wijk-karakter { grid-template-columns: 1fr; gap: 40px; }
  .wijk-karakter-head { position: static; }
  .wijk-karakter-stats { grid-template-columns: 1fr; gap: 14px; }
  .wijk-sub, .price-section, .qualis-callout, .voorzieningen, .wijk-faq {
    padding-left: 24px; padding-right: 24px;
  }
  .wijk-sub-grid { grid-template-columns: 1fr; }
  .qualis-callout-inner { grid-template-columns: 1fr; padding: 40px 28px; gap: 28px; }
  .voorzieningen-grid { grid-template-columns: repeat(2, 1fr); gap: 24px; }
  .price-row { grid-template-columns: 1fr; gap: 10px; }
  .price-row.is-header { display: none; }
  /* Het type is in de gestapelde weergave de kaarttitel; iets meer gewicht
     maakt de hiërarchie af zonder een overbodig "Type"-label. */
  .price-row .price-type { font-weight: 500; }
  .price-cell-label { display: block; font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 3px; }
}
@media (max-width: 900px) {
  .compare-table { min-width: 640px; }
  .compare-table thead th, .compare-table tbody td { padding: 16px 14px; font-size: 1rem; }
  .compare-table thead th { font-size: 11px; padding: 18px 14px; }
  .compare-table thead th:first-child, .compare-table tbody td:first-child {
    position: sticky; left: 0; background: var(--bone); z-index: 1;
    box-shadow: 1px 0 0 var(--line); font-size: 0.9rem;
  }
  .compare-table tbody td.is-self { background: rgba(30, 59, 46, 0.04); }
}
@media (max-width: 760px) {
  .werkgebied-grid-wrap { padding: 36px 24px 40px; }
  /* Hub op de telefoon 2 kolommen i.p.v. 1 lange kolom (8 kaarten = 2x4), consistent met
     de homepage. Eigen naam-fix: font 16px (kleiner dan de homepage-18px want de
     hub heeft langere namen zoals "Amsterdam-Noord") + smalle binnenmarge, zodat
     ook de langste naam op de smalle kaart past. Gescopet op .werkgebied-grid. */
  .werkgebied-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .werkgebied-grid .destination { aspect-ratio: 4 / 5; }
  .werkgebied-grid .destination-content { left: 10px; right: 10px; bottom: 16px; }
  .werkgebied-grid .destination-name { font-size: 16px; }
  /* Kaarten met andere wijken op wijk-detail: zelfde 2x2-recept (de scope wint qua
     specificiteit van de generieke 1-koloms .destinations-regel op ≤600px). */
  .neighbours .destinations { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .neighbours .destination { aspect-ratio: 4 / 5; }
  .neighbours .destination-content { left: 10px; right: 10px; bottom: 16px; }
  .neighbours .destination-name { font-size: 16px; }
  .destination-name { font-size: 26px; }
  .werkgebied-quote-wrap { padding: 20px 24px 36px; }
  .werkgebied-quote-wrap .karakter-highlight { padding-left: 22px; }
  .gooi-section { padding: 48px 24px 56px; }
  .gooi-photo { aspect-ratio: 5 / 4; }
}

/* ── Wijken: visuele fixes ── */
/* faq-list: in de full-width wijk-faq-sectie smaller + gecentreerd */
.wijk-faq .faq-list { max-width: 880px; margin: 0 auto; }

/* author-byline: full-width band-variant (de basis-.author-byline is inline-in-kolom voor dienst.php) */
.author-byline.is-band {
  margin-top: 0;
  padding: 70px 48px;
  background: var(--bone);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  text-align: center;
}
.author-byline.is-band .author-card { margin-left: auto; margin-right: auto; }

/* wijk-cta (closing): eigen, grotere variant */
.wijk-cta {
  padding: 100px 48px;
  background: var(--bone-deep);
  text-align: center;
  border-top: 1px solid var(--line);
}
.wijk-cta-eyebrow {
  display: inline-flex; align-items: center; gap: 16px;
  font-size: 12px; font-weight: 500; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px;
}
.wijk-cta-eyebrow::before, .wijk-cta-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.wijk-cta-title {
  font-family: 'Playfair Display', serif; font-weight: 400;
  font-size: clamp(36px, 4.5vw, 56px); line-height: 1.08; color: var(--ink);
  letter-spacing: -0.005em; margin-bottom: 18px; max-width: 680px;
  margin-left: auto; margin-right: auto;
}
.wijk-cta-title em { font-style: normal; color: inherit; }
.wijk-cta-body { font-size: 1.125rem; color: var(--mute); max-width: 540px; margin: 0 auto 36px; line-height: 1.6; }
.wijk-cta-buttons { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 1000px) {
  .wijk-cta { padding-left: 24px; padding-right: 24px; }
  .author-byline.is-band { padding-left: 24px; padding-right: 24px; }
}

/* ═══════════════════ TEAM ═══════════════════ */
/* Over-ons brand + Team-hub + 7 profielpagina's.
   Hergebruik (bestaat al): aanbod-intro, team-feature, team-grid, team-card,
   marketing-grid/-pillar, resultaten-grid/-card(-img), faq-list, editorial-body,
   karakter-highlight, closing-cta, service-strip, author-byline, section-nav,
   section-eyebrow/-title/-body, cta-card, btn-primary/-ghost, destinations. */

/* ──── Profile-hero (2-col met portrait) ──── */
.profile-hero { padding: 32px 48px 64px; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: stretch; }
.profile-portrait { aspect-ratio: 4 / 5; background-size: cover; background-position: center top; background-repeat: no-repeat; min-height: 380px; }
.profile-info { display: flex; flex-direction: column; justify-content: center; padding: 12px 0; }
.profile-info-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.profile-info-eyebrow::before { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.profile-info-name { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(40px, 4.5vw, 60px); line-height: 1.02; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 8px; }
.profile-info-typering { font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(17px, 1.7vw, 20px); color: var(--eyebrow); margin-bottom: 6px; }
.profile-info-role { font-family: 'Jost', sans-serif; font-size: 1rem; color: var(--mute); margin-bottom: 26px; }
.profile-info-bio { font-size: 1.05rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 30px; max-width: 540px; }
.profile-contact-row { display: flex; align-items: center; gap: 22px; margin-bottom: 28px; flex-wrap: wrap; }
.profile-contact-row a { display: inline-flex; align-items: center; gap: 8px; font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--ink); padding: 4px 0; border-bottom: 1px solid transparent; transition: color 0.25s ease, border-bottom-color 0.25s ease; }
.profile-contact-row a:hover { color: var(--forest); border-bottom-color: var(--eyebrow); }
.profile-contact-row svg { width: 16px; height: 16px; color: var(--mute); flex-shrink: 0; }
.profile-contact-row a:hover svg { color: var(--forest); }
.profile-cta { display: inline-block; background: var(--forest); color: var(--bone); font-family: 'Jost', sans-serif; font-size: 0.98rem; font-weight: 500; padding: 14px 26px; border: 1px solid var(--forest); align-self: flex-start; transition: background 0.25s ease, border-color 0.25s ease; }
.profile-cta:hover { background: var(--forest-light); border-color: var(--forest-light); }

/* ──── Profile-body (single-col wrapper, scoped zodat het 2-col .page-grid van dienst niet raakt) ──── */
.profile-body { padding: 64px 48px 80px; }
.profile-main > section + section { margin-top: 80px; }

/* ──── Bio-inner (2-col: narrative links, portretfoto rechts) ──── */
.bio-inner { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: start; margin-top: 8px; }
.bio-image { aspect-ratio: 8 / 5; background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* ──── Team-card specialisme-tags (chip-row, aanvulling op bestaande .team-card) ──── */
.team-card-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; }
.team-tag { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.1em; color: var(--mute); padding: 4px 10px; background: var(--bone-deep); border: 1px solid var(--line); }

/* ──── Verhaal-inner (2-col narrative + sfeer-image, over-ons brand) ──── */
.verhaal-inner { display: grid; grid-template-columns: 6fr 5fr; gap: 56px; align-items: start; margin-top: 8px; }
.verhaal-inner .editorial-body { max-width: none; margin-top: 0; }
.verhaal-image { aspect-ratio: 7 / 5; background-image: url('../images/team-av-3.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat; }

/* ──── FAQ-byline (kleine label onder summary, per profiel "Beantwoord door X") ──── */
.faq-item .faq-byline { font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--whisper); padding: 0 28px 14px; margin-top: -6px; }

/* ──── Certificeringen-strip (over-ons brand + team-hub) ──── */
.certs-strip { margin-top: 80px; padding: 56px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); text-align: center; }
.certs-strip-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 28px; }
.certs-strip-eyebrow::before, .certs-strip-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.certs-strip-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 8px 48px; font-family: 'Jost', sans-serif; font-size: clamp(20px, 2.2vw, 28px); font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.certs-strip-list .sep { color: var(--whisper); font-size: 0.7em; letter-spacing: 0; }

/* ──── Werken-bij soft-CTA (rust-toon, team-hub) ──── */
.open-soll-cta { margin: 48px 0 24px; padding: 48px 36px 52px; background: var(--bone-deep); text-align: center; border: 1px solid var(--line); }
.open-soll-cta-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 18px; }
.open-soll-cta-eyebrow::before, .open-soll-cta-eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.open-soll-cta-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.22; color: var(--ink); margin: 0 auto 14px; max-width: 520px; }
.open-soll-cta-title em { font-style: normal; color: inherit; }
.open-soll-cta-body { font-size: 1rem; line-height: 1.65; color: var(--mute); max-width: 480px; margin: 0 auto 26px; }
.open-soll-cta-link { font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 3px; transition: color 0.25s ease, border-color 0.25s ease; }
.open-soll-cta-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
.open-soll-cta-link::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

/* ──── Team mobiel ──── */
@media (max-width: 1100px) {
  .profile-hero { grid-template-columns: 1fr; gap: 36px; }
  .profile-portrait { aspect-ratio: 4 / 5; min-height: 0; width: min(100%, 420px); margin-inline: auto; }
  .profile-body { padding: 48px 48px 64px; }
}
@media (max-width: 760px) {
  .profile-hero { padding: 24px 24px 40px; gap: 28px; }
  .profile-body { padding: 36px 24px 56px; }
  .profile-main > section + section { margin-top: 56px; }
  .bio-inner { grid-template-columns: 1fr; gap: 28px; }
  .bio-image { aspect-ratio: 4 / 3; }
  .verhaal-inner { grid-template-columns: 1fr; gap: 28px; }
  .verhaal-image { aspect-ratio: 4 / 3; }
  .profile-hero, .profile-body { padding-left: 24px; padding-right: 24px; }
}

/* ──── Reviews op de over-ons-pagina ──── */
/* Reviews op de over-ons brand-pagina. Eigen grid-namespace (.review-cards-grid)
   zodat het de seamless homepage-.reviews-grid niet raakt. */
.review-cards-grid { margin-top: 40px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.review-card { padding: 32px 28px; background: var(--bone); border: 1px solid var(--line); display: flex; flex-direction: column; }
.review-card-platform { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; }
.review-card-stars { font-size: 14px; color: var(--eyebrow); letter-spacing: 0.2em; margin-bottom: 16px; }
.review-card-quote { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1rem; line-height: 1.55; color: var(--ink); margin-bottom: 20px; }
.review-card-quote::before { content: '"'; }
.review-card-quote::after { content: '"'; }
/* Paginawissel scrollt het grid net onder de sticky header+pills; offset corrigeert dat. */
[data-reviews-grid], [data-blog-grid] { scroll-margin-top: 175px; }
.review-card-author { margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line); font-family: 'Jost', sans-serif; font-size: 0.92rem; color: var(--ink); }
.review-card-author .platform { color: var(--mute); margin-left: 6px; font-size: 0.88em; }

/* "Lees meer"-toggle voor reviews (hergebruik van het listing-description-patroon).
   Werkt op homepage (.review-text) + de gedeelde .review-card-quote-familie. Eigen
   wrapper-::after voor de fade zodat het de decoratieve ::before/::after-quotes niet
   raakt. Knop verschijnt alleen bij echte overflow (smart-detect in site.js reviewToggle). */
.review-clamp { position: relative; }
.review .review-clamp { margin-bottom: 32px; }
.review-card .review-clamp { margin-bottom: 20px; }
.review-clamp > .review-text,
.review-clamp > .review-card-quote { margin-bottom: 0; }
.review-clamp[data-review-state="collapsed"] > .review-text,
.review-clamp[data-review-state="collapsed"] > .review-card-quote {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.review-clamp[data-review-state="collapsed"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 42px;
  background: linear-gradient(to bottom, rgba(246, 244, 243, 0) 0%, var(--bone) 90%);
  pointer-events: none;
}
.review-clamp[data-review-state="expanded"] > .review-text,
.review-clamp[data-review-state="expanded"] > .review-card-quote {
  display: block;
  overflow: visible;
}
.review-toggle {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  margin-bottom: 24px;
  padding: 12px 20px;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: 'Jost', sans-serif;
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.review-toggle:hover { border-color: var(--forest); color: var(--forest); }
.review-toggle[hidden] { display: none; }
.review-toggle-chevron { width: 16px; height: 16px; transition: transform 0.25s ease; }
.review-clamp[data-review-state="expanded"] + .review-toggle .review-toggle-chevron { transform: rotate(180deg); }
.review-clamp[data-review-state="expanded"] + .review-toggle .review-toggle-label::after { content: " (sluit)"; color: var(--mute); font-weight: 400; }

/* author-byline + cta-agent: hele blok linkt naar het teamprofiel (E-E-A-T) */
.author-card { transition: color 0.25s ease; }
.author-card:hover .author-name { color: var(--forest); }
.cta-agent { transition: color 0.25s ease; }
.cta-agent:hover .cta-agent-name { color: var(--forest); }
/* woning-detail (agent-card + sidebar-mini) + contact-pagina naar profiel */
.sidebar-agent-mini { transition: color 0.25s ease; }
.sidebar-agent-mini:hover strong { color: var(--forest); }
.agent-info-name a { color: inherit; transition: color 0.25s ease; }
.agent-info-name a:hover { color: var(--forest); }
.contact-agent { transition: color 0.25s ease; }
.contact-agent:hover .contact-agent-name { color: var(--forest); }

/* certs-strip mobiele uitlijning (ontbrak) */
@media (max-width: 760px) {
  .certs-strip { margin-top: 56px; padding: 40px 0; }
  .certs-strip-list { gap: 8px 24px; }
  .review-cards-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════ WERKEN-BIJ ═══════════════════ */
/* Vacature-card familie. Bullet-glyph ✦
   bewust vervangen door een editorial lijn-marker (✦ is alleen voor Exclusief/
   Stille verkoop). Rest hergebruikt bestaande patterns. */
.vacature-card { background: var(--bone-deep); border: 1px solid var(--line); padding: 36px 36px 32px; margin-bottom: 22px; transition: border-color 0.3s ease; }
.section-body + .vacature-card { margin-top: 32px; }
.vacature-card:last-child { margin-bottom: 0; }
.vacature-card:hover { border-color: var(--eyebrow); }
.vacature-card-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; flex-wrap: wrap; gap: 12px; }
.vacature-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); padding: 5px 12px; border: 1px solid var(--line-warm); background: var(--bone); }
.vacature-hours { font-size: 0.85rem; color: var(--mute); font-family: 'Jost', sans-serif; letter-spacing: 0.04em; }
.vacature-title { font-family: 'Playfair Display', serif; font-size: 1.65rem; font-weight: 400; color: var(--ink); line-height: 1.2; margin-bottom: 8px; }
.vacature-salary { font-size: 0.92rem; color: var(--mute); margin-bottom: 20px; font-style: italic; }
.vacature-desc { font-size: 1rem; line-height: 1.65; color: var(--ink-soft); margin-bottom: 24px; }
.vacature-vereisten-eyebrow { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--whisper); margin-bottom: 8px; }
.vacature-vereisten { list-style: none; padding: 0; margin: 0 0 28px; }
.vacature-vereisten li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.vacature-vereisten li:last-child { border-bottom: none; }
.vacature-vereisten li::before { content: ''; position: absolute; left: 0; top: 16px; width: 12px; height: 1px; background: var(--eyebrow); }
/* Rijke vacature-omschrijving (kirbytext): eigen kopjes als kleine
   kapitalen-kop, lijstjes in dezelfde lijn-marker-stijl als de vereisten. */
.vacature-desc p { margin-bottom: 14px; }
.vacature-desc p:last-child { margin-bottom: 0; }
.vacature-desc h4 { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--whisper); margin: 26px 0 8px; }
.vacature-desc ul { list-style: none; padding: 0; margin: 0 0 18px; }
.vacature-desc ul li { position: relative; padding: 9px 0 9px 24px; border-bottom: 1px solid var(--line); font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5; }
.vacature-desc ul li:last-child { border-bottom: none; }
.vacature-desc ul li::before { content: ''; position: absolute; left: 0; top: 16px; width: 12px; height: 1px; background: var(--eyebrow); }
.vacature-apply { display: inline-block; font-family: 'Jost', sans-serif; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 4px; transition: color 0.25s ease, border-color 0.25s ease; }
.vacature-apply:hover { color: var(--forest); border-bottom-color: var(--forest); }
.vacature-apply::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

/* ═══════════════════ FAQ + BEOORDELINGEN ═══════════════════ */
/* Hergebruik (bestaat al): aanbod-intro, faq-list/-item/-byline, review-cards-grid/
   review-card-familie, service-strip, section-eyebrow/-title. Nieuw: topic-pills,
   faq-sections-wrap/faq-category, faq-soft-cta, review-card-author .traject. */

/* ──── Topic-pills (sticky anchor-nav op FAQ) ──── */
.topic-pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 16px 48px; align-items: center; background: var(--bone); border-bottom: 1px solid var(--line); position: sticky; top: 94px; z-index: 40; transition: top 0.3s ease, padding 0.3s ease; }
html.is-scrolled .topic-pills { top: 74px; padding: 12px 48px; }
.topic-pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 16px; border: 1px solid var(--line); background: var(--bone); font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--ink); cursor: pointer; transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; }
.topic-pill:hover { border-color: var(--ink); color: var(--forest); }
.topic-pill.active { border-color: var(--forest); color: var(--forest); background: var(--bone-deep); }
.topic-pill .sparkle { color: var(--eyebrow); }
.topic-pill.active .sparkle { color: var(--forest); }

/* ──── FAQ-secties (gegroepeerde categorieën) ──── */
.faq-sections-wrap { padding: 48px 48px 64px; max-width: 920px; margin: 0 auto; }
.faq-category { margin-bottom: 56px; }
.faq-category:last-child { margin-bottom: 0; }
.faq-category[id] { scroll-margin-top: 168px; }
html.is-scrolled .faq-category[id] { scroll-margin-top: 148px; }
.faq-category .section-title { font-size: clamp(26px, 2.6vw, 32px); margin-bottom: 20px; }
.faq-category .section-title .sparkle { color: var(--eyebrow); margin-left: 4px; }

/* ──── FAQ soft-CTA (rust-toon, onder de categorieën) ──── */
.faq-soft-cta { padding: 56px 48px 64px; background: var(--bone); text-align: center; border-top: 1px solid var(--line); }
.faq-soft-cta-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 18px; }
.faq-soft-cta-eyebrow::before, .faq-soft-cta-eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.faq-soft-cta-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(24px, 2.6vw, 32px); line-height: 1.22; color: var(--ink); margin: 0 auto 14px; max-width: 560px; }
.faq-soft-cta-title em { font-style: normal; color: inherit; }
.faq-soft-cta-body { font-size: 1rem; line-height: 1.6; color: var(--mute); max-width: 480px; margin: 0 auto 26px; }
.faq-soft-cta-actions { display: flex; gap: 28px; align-items: center; justify-content: center; flex-wrap: wrap; }
.faq-soft-cta-actions a { font-family: 'Jost', sans-serif; font-size: 0.95rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.faq-soft-cta-actions a:hover { color: var(--forest); border-bottom-color: var(--forest); }
.faq-soft-cta-actions a::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

/* ──── FAQ + beoordelingen: detail-afwerking ──── */
/* faq-list-spacing op de FAQ-pagina (scoped; raakt dienst/wijk/profiel niet) */
.faq-category .faq-list { margin-bottom: 14px; }
/* knop ONDER de soft-cta-actions (beoordelingen: 3 platform-links + 1 knop) */
/* canonieke primary-knop, 1:1 met .closing-cta-actions a.primary */
.faq-soft-cta-button { margin-top: 22px; }
.faq-soft-cta-button a { display: inline-block; background: var(--forest); color: var(--bone); font-family: 'Jost', sans-serif; font-size: 1rem; padding: 14px 28px; border: 1px solid var(--forest); transition: background 0.25s ease, border-color 0.25s ease; }
.faq-soft-cta-button a:hover { background: var(--forest-light); border-color: var(--forest-light); }

/* ──── FAQ-byline per categorie (Beantwoord door [Teamlid], met profiel-link) ──── */
.faq-category > .faq-byline { margin-top: 4px; padding-left: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.faq-category > .faq-byline a { color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; }
.faq-category > .faq-byline a:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* ──── Review-card auteur-traject (beoordelingen) ──── */
.review-card-author .traject { display: block; color: var(--mute); margin-top: 4px; font-size: 0.85em; }

/* ──── FAQ + beoordelingen mobiel ──── */
@media (max-width: 760px) {
  .topic-pills { padding: 12px 24px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; top: 63px; }
  html.is-scrolled .topic-pills { top: 79px; padding: 10px 24px; }
  .topic-pills::-webkit-scrollbar { display: none; }
  .topic-pill { white-space: nowrap; font-size: 0.85rem; padding: 7px 14px; }
  .faq-sections-wrap { padding: 32px 24px 48px; }
  .faq-soft-cta { padding: 44px 24px 52px; }
  .faq-soft-cta-actions { gap: 18px; }
}

/* ═══════════════════ KENNISBANK / BLOG ═══════════════════ */
/* Hergebruikt: .topic-pills/.topic-pill, .article-body (legal), .aanbod-intro,
   .section-*, .service-strip, .closing-cta, .pagination. Foto's als <img> (img-regel). */

/* ──── Topic-pill sparkle ──── */
.topic-pill .sparkle { color: var(--eyebrow); }
.topic-pill.active .sparkle { color: var(--forest); }

/* ──── Live-search ──── */
.kennisbank-search-section { padding: 12px 48px 32px; max-width: 1080px; margin: 0 auto; width: 100%; }
.kennisbank-search-label { display: block; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 10px; }
.kennisbank-search-input { font-family: 'Playfair Display', serif; font-size: clamp(20px, 2vw, 26px); font-weight: 400; color: var(--ink); background: transparent; border: none; border-bottom: 1px solid var(--line); padding: 8px 0 14px; outline: none; width: 100%; transition: border-color 0.25s ease; }
.kennisbank-search-input:focus { border-bottom-color: var(--eyebrow); }
.kennisbank-search-input::placeholder { color: var(--whisper); font-style: italic; }
.kennisbank-search-meta { font-family: 'Jost', sans-serif; font-size: 0.85rem; color: var(--mute); letter-spacing: 0.04em; margin-top: 10px; min-height: 1.2em; }

/* ──── Empty-state (JS toont bij 0 resultaten) ──── */
.kennisbank-empty-state { display: none; padding: 56px 48px 64px; max-width: 640px; margin: 0 auto; text-align: center; }
.kennisbank-empty-state-eyebrow { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 18px; }
.kennisbank-empty-state-eyebrow::before, .kennisbank-empty-state-eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.kennisbank-empty-state-title { font-family: 'Playfair Display', serif; font-size: clamp(22px, 2.4vw, 28px); font-weight: 400; color: var(--ink); margin-bottom: 14px; }
.kennisbank-empty-state-body { font-size: 1rem; line-height: 1.65; color: var(--mute); margin-bottom: 24px; }
.kennisbank-empty-state-clear { font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); border: none; border-bottom: 1px solid var(--sand); background: none; padding: 4px 2px; cursor: pointer; transition: color 0.25s ease, border-color 0.25s ease; }
.kennisbank-empty-state-clear:hover { color: var(--forest); border-bottom-color: var(--forest); }
.kennisbank-empty-state-clear::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }

/* ──── Featured post ──── */
.featured-post-wrap { padding: 56px 48px 24px; }
.featured-post { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; align-items: center; transition: transform 0.4s ease; }
.featured-post:hover { transform: translateY(-3px); }
.featured-post-photo { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: var(--bone-deep); }
.featured-post-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.featured-post:hover .featured-post-photo-img { transform: scale(1.04); }
.featured-post-tag { position: absolute; top: 16px; left: 16px; background: var(--ink); color: var(--bone); padding: 6px 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; z-index: 2; }
.featured-post-content { display: flex; flex-direction: column; }
.featured-post-meta { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 22px; }
.featured-post-meta::before { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.featured-post-meta .sparkle { color: var(--eyebrow); }
.featured-post-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(30px, 3.2vw, 44px); line-height: 1.08; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 22px; }
.featured-post-title em { font-style: normal; color: inherit; }
.featured-post-excerpt { font-size: 1.075rem; color: var(--mute); line-height: 1.65; margin-bottom: 32px; max-width: 480px; }
.featured-post-readlink { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink); display: inline-flex; align-items: center; gap: 10px; transition: color 0.25s ease; }
.featured-post-readlink::after { content: '→'; color: var(--eyebrow); transition: transform 0.3s ease; }
.featured-post:hover .featured-post-readlink { color: var(--forest); }
.featured-post:hover .featured-post-readlink::after { transform: translateX(4px); }

/* ──── Blog-overzicht grid ──── */
.blog-overview-wrap { padding: 64px 48px 24px; }
.blog-overview-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 32px; }
.blog-card { display: flex; flex-direction: column; transition: transform 0.4s ease; }
.blog-card:hover { transform: translateY(-4px); }
.blog-card-photo { aspect-ratio: 4 / 3; position: relative; overflow: hidden; margin-bottom: 22px; background: var(--bone-deep); }
.blog-card-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); }
.blog-card:hover .blog-card-photo-img { transform: scale(1.04); }
.blog-card-meta { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; }
.blog-card-meta .sparkle { color: var(--eyebrow); }
/* min-height reserveert twee titelregels: een kaart met een korte (1-regel-)titel houdt
 * dezelfde maat als zijn buren, zodat excerpts in het grid op één lijn beginnen. */
.blog-card-title { font-family: 'Playfair Display', serif; font-size: 26px; font-weight: 400; line-height: 1.12; color: var(--ink); margin-bottom: 12px; min-height: 2.24em; }
.blog-card-excerpt { font-size: 1rem; color: var(--mute); line-height: 1.6; margin-bottom: 20px; flex-grow: 1; }

/* ──── Author-byline mini (foto + naam + datum) ──── */
.author-byline-mini { display: inline-flex; align-items: center; gap: 12px; padding-top: 16px; border-top: 1px solid var(--line); }
.author-byline-mini-photo { width: 36px; height: 36px; object-fit: cover; object-position: center top; flex-shrink: 0; }
.author-byline-mini-photo.no-photo { background: var(--bone-deep); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 12px; color: var(--eyebrow); letter-spacing: 0.06em; }
.author-byline-mini-info { display: flex; flex-direction: column; line-height: 1.25; }
.author-byline-mini-name { font-family: 'Jost', sans-serif; font-size: 0.85rem; font-weight: 500; color: var(--ink); }
.author-byline-mini-date { font-size: 11px; color: var(--whisper); letter-spacing: 0.06em; margin-top: 2px; }
.featured-post .author-byline-mini { border-top: none; padding-top: 0; margin-bottom: 28px; order: -1; }
.featured-post .author-byline-mini-photo { width: 40px; height: 40px; }
.featured-post .author-byline-mini-name { font-size: 0.92rem; }

/* ──── Post-hero ──── */
.post-hero { padding: 32px 48px 48px; max-width: 920px; margin: 0 auto; }
.post-meta-row { display: inline-flex; align-items: center; gap: 12px; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 28px; }
.post-meta-row::before { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.post-meta-row .sparkle { color: var(--eyebrow); }
.post-meta-row .dot { color: var(--whisper); letter-spacing: 0; }
.post-meta-row .post-date, .post-meta-row .post-readtime { color: var(--mute); font-weight: 400; letter-spacing: 0.18em; }
.post-hero-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(34px, 4.4vw, 60px); line-height: 1.06; letter-spacing: -0.012em; color: var(--ink); margin-bottom: 28px; }
.post-hero-title em { font-style: normal; color: inherit; }
.post-hero-intro { font-family: 'Playfair Display', serif; font-size: 1.32rem; line-height: 1.55; color: var(--mute); margin-bottom: 36px; max-width: 760px; font-style: italic; }
.post-author-row { display: flex; align-items: center; gap: 16px; padding-top: 24px; border-top: 1px solid var(--line); }
.post-author-photo { width: 56px; height: 56px; object-fit: cover; object-position: center top; flex-shrink: 0; }
.post-author-photo.no-photo { background: var(--bone-deep); display: flex; align-items: center; justify-content: center; font-family: 'Playfair Display', serif; font-size: 14px; color: var(--eyebrow); letter-spacing: 0.06em; }
.post-author-info { display: flex; flex-direction: column; line-height: 1.35; }
.post-author-prefix { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--whisper); margin-bottom: 4px; }
.post-author-name { font-family: 'Jost', sans-serif; font-size: 1rem; font-weight: 500; color: var(--ink); }
.post-author-name a { border-bottom: 1px solid transparent; transition: border-color 0.25s ease, color 0.25s ease; }
.post-author-name a:hover { color: var(--forest); border-bottom-color: var(--eyebrow); }
.post-author-role { font-size: 0.88rem; color: var(--mute); margin-top: 2px; }

/* ──── Coverfoto (16:9) ──── */
.featured-image-wrap { padding: 16px 48px 48px; }
.featured-image { aspect-ratio: 16 / 9; position: relative; overflow: hidden; max-width: 1280px; margin: 0 auto; background: var(--bone-deep); }
.featured-image-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ──── Article-body: lead (post-scoped) + blockquote + pullquote + sparkle ──── */
.article-body--post > p:first-of-type { font-size: 1.22rem; line-height: 1.65; color: var(--ink); margin-bottom: 36px; }
.article-body h2 .sparkle, .article-body p .sparkle { color: var(--eyebrow); margin-left: 2px; }
.article-body h3 em { font-style: normal; color: inherit; }
.article-body blockquote { margin: 36px 0; padding: 4px 0 4px 28px; border-left: 2px solid var(--eyebrow); font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.15rem; line-height: 1.55; color: var(--ink); }
.article-body .pullquote { margin: 56px 0; padding: 36px 0; border-top: 1px solid var(--line-warm); border-bottom: 1px solid var(--line-warm); font-family: 'Playfair Display', serif; font-style: italic; font-size: clamp(22px, 2.4vw, 30px); line-height: 1.35; color: var(--ink); text-align: center; letter-spacing: -0.005em; }
.article-body .pullquote::before, .article-body .pullquote::after { content: ''; display: block; width: 36px; height: 1px; background: var(--eyebrow); margin: 0 auto; }
.article-body .pullquote::before { margin-bottom: 22px; }
.article-body .pullquote::after { margin-top: 22px; }
.article-body .pullquote em { font-style: normal; color: var(--forest); }

/* ──── Post-foot: tags + uitgebreide auteur ──── */
.post-foot-wrap { padding: 16px 48px 64px; }
.post-foot { max-width: 720px; margin: 0 auto; }
.post-tags { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 32px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.post-tags-label { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--whisper); margin-right: 8px; }
.post-tag { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border: 1px solid var(--line); font-family: 'Jost', sans-serif; font-size: 0.88rem; color: var(--ink); transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease; }
.post-tag:hover { border-color: var(--eyebrow); color: var(--forest); background: var(--bone-deep); }
.post-tag .sparkle { color: var(--eyebrow); }
.post-author-extended { margin-top: 48px; display: grid; grid-template-columns: 120px 1fr; gap: 28px; align-items: start; padding: 36px 32px; background: var(--bone-deep); border-left: 2px solid var(--eyebrow); }
.post-author-ext-photo { width: 120px; height: 150px; object-fit: cover; object-position: center top; }
.post-author-ext-prefix { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); display: block; margin-bottom: 10px; }
.post-author-ext-name { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 400; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.post-author-ext-bio { font-size: 0.98rem; line-height: 1.6; color: var(--ink-soft); margin-bottom: 18px; }
.post-author-ext-link { font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; display: inline-block; transition: color 0.25s ease, border-color 0.25s ease; }
.post-author-ext-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
.post-author-ext-link::after { content: ' →'; color: var(--eyebrow); margin-left: 2px; }

/* ──── Related posts strip ──── */
.related-posts-section { padding: 56px 48px 72px; background: var(--bone-deep); border-top: 1px solid var(--line); }
.related-posts-header { max-width: 1280px; margin: 0 auto 32px; }
.related-posts-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 12px; }
.related-posts-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.related-posts-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 3vw, 38px); line-height: 1.1; color: var(--ink); }
.related-posts-title em { font-style: normal; color: inherit; }
.blog-strip { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.blog-card-mini { display: flex; flex-direction: column; padding: 26px 24px 30px; background: var(--bone); border: 1px solid var(--line); transition: border-color 0.3s ease, transform 0.3s ease; }
.blog-card-mini:hover { border-color: var(--eyebrow); transform: translateY(-3px); }
.blog-card-mini-date { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.blog-card-mini-date .dot { color: var(--whisper); letter-spacing: 0; margin: 0 4px; }
.blog-card-mini-date .sparkle { color: var(--eyebrow); }
.blog-card-mini-title { font-family: 'Playfair Display', serif; font-size: 22px; font-weight: 400; color: var(--ink); margin-bottom: 12px; line-height: 1.2; }
.blog-card-mini-excerpt { font-size: 0.95rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; flex-grow: 1; }
.blog-card-mini-link { font-family: 'Jost', sans-serif; font-size: 0.9rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; align-self: flex-start; transition: color 0.25s ease, border-color 0.25s ease; }
.blog-card-mini-link:hover { color: var(--forest); border-color: var(--forest); }
.blog-card-mini-link::after { content: ' →'; color: var(--eyebrow); margin-left: 2px; }
/* #blog op team-profiel: auto-fit zodat 1 post niet als eenzaam 1/3-kaartje oogt */
/* min(300px, 100%): zonder de min() houdt de kolom een harde ondergrens van
   300px en loopt 'ie op een 320px-telefoon 28px buiten beeld (zelfde val als
   het proces-raster op de dienstpagina). */
.profile-blog-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }

/* Redactionele aanbod-module onderaan kennisbank-artikelen — bescheiden, geen zware bg */
.post-aanbod { padding: 56px 48px 64px; border-top: 1px solid var(--line); }
.post-aanbod-head { max-width: 1280px; margin: 0 auto 36px; }
.post-aanbod-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; display: inline-flex; align-items: center; gap: 12px; }
.post-aanbod-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.post-aanbod-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(26px, 3vw, 36px); line-height: 1.1; color: var(--ink); letter-spacing: -0.005em; }
.post-aanbod .aanbod-grid { max-width: 1280px; margin: 0 auto; }
.post-aanbod-links { max-width: 1280px; margin: 28px auto 0; display: flex; flex-wrap: wrap; gap: 8px 28px; }
.post-aanbod-links a { font-family: 'Jost', sans-serif; font-size: 0.95rem; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.post-aanbod-links a:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* ──── Kennisbank mobiel ──── */
@media (max-width: 760px) {
  .kennisbank-search-section { padding: 12px 24px 28px; }
  .featured-post-wrap { padding: 40px 24px 16px; }
  .featured-post { grid-template-columns: 1fr; gap: 28px; }
  .blog-overview-wrap { padding: 40px 24px 16px; }
  .blog-overview-grid { grid-template-columns: 1fr; gap: 44px; }
  /* 1-koloms: er valt niets uit te lijnen, dus de 2-regel-titelreserve vervalt */
  .blog-card-title { min-height: 0; }
  .post-hero { padding: 24px 24px 36px; }
  .featured-image-wrap { padding: 12px 24px 36px; }
  .post-foot-wrap { padding: 12px 24px 48px; }
  .post-author-extended { grid-template-columns: 1fr; gap: 18px; padding: 28px 24px; }
  .post-author-ext-photo { width: 96px; height: 120px; }
  .related-posts-section { padding: 44px 24px 56px; }
  .blog-strip { grid-template-columns: 1fr; gap: 18px; }
  .post-aanbod { padding: 44px 24px 56px; }
}

/* ──── Magazine-blok in de dienst-zijbalk: gewaaierde covers + korte regel.
   Verschijnt alleen mét geüploade covers (Panel); rotatie geeft het
   print-gevoel, de hoeken zelf blijven vierkant. ──── */
.dienst-magazine { margin-top: 24px; background: var(--bone); border: 1px solid var(--line); padding: 30px 26px; }
.dienst-magazine-covers { position: relative; aspect-ratio: 5 / 4; margin-bottom: 24px; }
.dienst-magazine-covers img { position: absolute; top: 10px; width: 54%; aspect-ratio: 3 / 4; object-fit: cover; box-shadow: 0 12px 28px rgba(26, 25, 22, 0.22); }
.dienst-magazine-covers img:nth-child(1) { left: 4%; transform: rotate(-6deg); z-index: 1; }
.dienst-magazine-covers img:nth-child(2) { left: 26%; top: 2px; transform: rotate(1deg); z-index: 2; }
.dienst-magazine-covers img:nth-child(3) { left: 46%; transform: rotate(6deg); z-index: 3; }
.dienst-magazine-covers.covers-1 { display: flex; justify-content: center; aspect-ratio: auto; }
.dienst-magazine-covers.covers-1 img { position: relative; left: auto; top: auto; width: 62%; transform: rotate(-2deg); }
.dienst-magazine-eyebrow { font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 12px; }
.dienst-magazine-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.2; color: var(--ink); margin-bottom: 10px; }
.dienst-magazine-body { font-size: 0.92rem; line-height: 1.6; color: var(--mute); margin-bottom: 18px; }
.dienst-magazine-link { display: inline-block; font-size: 0.92rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.dienst-magazine-link:hover { color: var(--forest); border-bottom-color: var(--forest); }
.dienst-magazine-link::after { content: ' →'; color: var(--eyebrow); margin-left: 4px; }
/* Lagere schermen: de sidebar (contact-kaart + magazine) is sticky als geheel;
   compactere covers houden het totaal zoveel mogelijk binnen de viewport. */
@media (max-height: 940px) {
  .dienst-magazine { margin-top: 20px; padding: 22px 22px; }
  .dienst-magazine-covers { aspect-ratio: 3 / 2; margin-bottom: 18px; }
  .dienst-magazine-covers img { width: 46%; }
  .dienst-magazine-covers.covers-1 img { width: 50%; }
  .dienst-magazine-body { margin-bottom: 14px; }
}

/* ════════════════════════════════════════════════════════════
   SHOWCASE — cinematische vitrine in de club-bouwstijl
   Hergebruikt de .club-*-bouwstenen (hero/intro/benefits/photo-band/
   closing); hieronder alleen wat eigen is aan deze pagina: de
   hero-VIDEO, de uitgelichte film als klikbare band en de grid van
   story-kaarten. Foto's als <img> (img-regel); klik-cursor alleen op
   kaarten mét een gekoppelde film.
   ════════════════════════════════════════════════════════════ */

/* Hero-video: zelfde vlakvulling als .club-hero-photo, maar zonder Ken Burns
   (de film beweegt zelf al). De club-hero-scrim (::after) dekt de leesbaarheid. */
.club-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; }

/* ── Uitgelichte film: gecentreerde kop + klikbare foto-band met play-knop ── */
.showcase-film { padding-bottom: clamp(96px, 11vw, 150px); }
.showcase-film-head { max-width: 720px; margin: 0 auto clamp(48px, 6vw, 72px); padding: 0 48px; text-align: center; }
.showcase-film-eyebrow { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 20px; }
.showcase-film-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; color: var(--ink); margin-bottom: 18px; }
.showcase-film-title em { font-style: normal; color: inherit; }
.showcase-film-desc { font-size: 1.05rem; line-height: 1.65; color: var(--mute); }
.showcase-film-visual { position: absolute; inset: 0; }
.showcase-film-visual img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.showcase-film-visual[data-lightbox-trigger] { cursor: pointer; }
.showcase-film-visual::before { content: ''; position: absolute; inset: 0; background: rgba(26,25,22,0.18); transition: background 0.4s ease; z-index: 1; }
.showcase-film-visual[data-lightbox-trigger]:hover::before { background: rgba(26,25,22,0.32); }
.showcase-film-visual[data-lightbox-trigger]:hover .story-play { transform: translate(-50%, -50%) scale(1.06); background: var(--bone); }

/* Play-knop (band + kaarten; rond was al de goedgekeurde vorm uit de eerste versie) */
.story-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 88px; height: 88px; border-radius: 50%; background: rgba(255,255,255,0.92); display: flex; align-items: center; justify-content: center; transition: transform 0.35s ease, background 0.35s ease; z-index: 2; }
.story-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 14px 0 14px 22px; border-color: transparent transparent transparent var(--ink); margin-left: 5px; }

/* ── Story-grid: kaarten als voorheen, kop gecentreerd in club-taal ── */
.showcase-grid-wrap { padding: 0 48px clamp(96px, 11vw, 150px); }
.showcase-grid-head { max-width: 720px; margin: 0 auto clamp(56px, 7vw, 80px); text-align: center; }
.showcase-grid-eyebrow { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 20px; }
.showcase-grid-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(32px, 3.6vw, 48px); line-height: 1.1; color: var(--ink); }
.showcase-grid-title em { font-style: normal; color: inherit; }
.showcase-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 36px; max-width: 1240px; margin: 0 auto; }
.story-card { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
/* De visual is de knop (de kaart blijft een article: een h3 mag niet ín een
   button). UA-knopstijl neutraliseren voor beide klikbare visuals. */
button.story-card-visual,
button.showcase-film-visual { border: 0; padding: 0; background: none; font: inherit; text-align: inherit; display: block; width: 100%; cursor: pointer; }
.story-card-visual { position: relative; aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 20px; }
.story-card-visual::before { content: ''; position: absolute; inset: 0; background: rgba(26,25,22,0.12); transition: background 0.35s ease; z-index: 1; }
.story-card-visual[data-lightbox-trigger]:hover::before { background: rgba(26,25,22,0.28); }
.story-card-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.6s ease; }
.story-card-visual[data-lightbox-trigger]:hover .story-card-bg { transform: scale(1.04); }
.story-card-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; z-index: 2; transition: transform 0.35s ease; }
.story-card-visual[data-lightbox-trigger]:hover .story-card-play { transform: translate(-50%, -50%) scale(1.08); }
.story-card-play::before { content: ''; width: 0; height: 0; border-style: solid; border-width: 9px 0 9px 14px; border-color: transparent transparent transparent var(--ink); margin-left: 3px; }
/* Foto-teller op serie-kaarten (zelfde pil-recept als de listing-hero-counter). */
.story-card-count { position: absolute; right: 14px; bottom: 14px; z-index: 2; background: rgba(255, 255, 255, 0.92); padding: 5px 10px; font-family: 'Jost', sans-serif; font-size: 0.78rem; color: var(--ink); backdrop-filter: blur(6px); }
.story-card-tag { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--forest); margin-bottom: 10px; }
.story-card-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.4rem; line-height: 1.22; color: var(--ink); margin-bottom: 10px; }
.story-card-title em { font-style: normal; color: inherit; }
.story-card-meta { font-size: 0.85rem; color: var(--mute); }
.story-card-body { margin-top: 8px; font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft); }
/* Link in het verhaaltje (bv. de vertaalde housetour op YouTube): de
   anchor-reset maakt links onzichtbaar zonder eigen opmaak. */
.story-card-body a { color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; }
.story-card-body a:hover { color: var(--forest); border-bottom-color: var(--forest); }

/* ── Showcase mobiel ── */
@media (max-width: 1000px) {
  .showcase-film-head { padding: 0 24px; }
  .showcase-grid-wrap { padding-left: 24px; padding-right: 24px; }
  .showcase-grid { grid-template-columns: 1fr; gap: 40px; }
  .story-play { width: 64px; height: 64px; }
  .story-play::before { border-width: 10px 0 10px 16px; }
}

/* Klikbare resultaat-kaart (live verkochte woningen op /diensten/verkoop): anchor erft de bestaande flex-layout + hover, geen onderstreping/kleur-shift. */
a.resultaten-card { color: inherit; text-decoration: none; }

/* ──── taXapi taxatie-wizard (/diensten/taxatie, click-to-load consent-facade) ──── */
.taxapi-embed { margin-top: 32px; }
.taxapi-placeholder { background: var(--bone-deep); border: 1px solid var(--line); padding: 48px 40px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 22px; }
.taxapi-note { font-size: 0.9rem; line-height: 1.6; color: var(--mute); max-width: 520px; margin: 0; }
.taxapi-load { display: inline-block; background: var(--forest); color: var(--bone); font-family: 'Jost', sans-serif; font-size: 1rem; padding: 14px 28px; border: 1px solid var(--forest); cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease; }
.taxapi-load:hover { background: var(--forest-light); border-color: var(--forest-light); }
.taxapi-frame { display: block; width: 100%; height: 680px; border: 0; background: var(--paper); }
@media (max-width: 760px) {
  .taxapi-placeholder { padding: 36px 24px; }
  .taxapi-frame { height: 760px; }
}

/* ──── Contactformulier: verplicht akkoord-vinkje ──── */
.form-consent { display: flex; align-items: flex-start; gap: 12px; }
.form-consent-check { flex-shrink: 0; width: 18px; height: 18px; margin-top: 2px; accent-color: var(--forest); cursor: pointer; }
.form-consent-check.has-error { outline: 2px solid var(--error); outline-offset: 2px; }
.form-consent-label { font-size: 0.9rem; line-height: 1.5; color: var(--mute); cursor: pointer; }
.form-consent-label a { color: var(--ink); border-bottom: 1px solid var(--sand); transition: color 0.25s ease, border-color 0.25s ease; }
.form-consent-label a:hover { color: var(--forest); border-color: var(--forest); }

/* ──── Aangekocht-archief: niet-klikbare kaarten + tag ──── */
.aanbod-tag.aangekocht { background: var(--forest); color: var(--bone); }
.aanbod-card-static { cursor: default; }
.aanbod-card-static:hover { transform: none; }
.aanbod-card-static:hover .aanbod-card-photo-img { transform: none; }

/* ──── Cross-sell CTA-kaart in de woninggrid ──── */
.aanbod-card-cta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--bone-deep);
  border: 1px solid var(--line);
  padding: 34px 30px;
  min-height: 340px;
  text-align: left;
}
.aanbod-card-cta[hidden] { display: none; }
.aanbod-card-cta:hover { transform: none; }
.aanbod-cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--eyebrow);
  margin-bottom: 16px;
}
.aanbod-cta-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.aanbod-cta-title {
  font-family: 'Playfair Display', serif;
  font-size: 28px;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 14px;
}
.aanbod-cta-title em { font-style: normal; color: inherit; }
.aanbod-cta-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-soft);
  margin: 0 0 24px;
}
.aanbod-cta-btn {
  display: inline-block;
  background: var(--forest);
  color: var(--bone);
  font-family: 'Jost', sans-serif;
  font-size: 0.95rem;
  padding: 13px 24px;
  border: 1px solid var(--forest);
  text-decoration: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.aanbod-cta-btn:hover { background: var(--forest-light); border-color: var(--forest-light); }

/* ──────── Visueel ritme op dienst-pagina's ──────── */
/* Hero-anker-beeld: full-bleed band onder de hero */
.dienst-hero-photo { margin-top: 16px; }
.dienst-hero-photo img { display: block; width: 100%; height: auto; }

/* Scroll-reveal: subtiele fade-up. Hidden-state alleen als JS de class zet (no-JS = gewoon zichtbaar) */
html.reveal-ready [data-scroll-reveal] { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
html.reveal-ready [data-scroll-reveal].is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  html.reveal-ready [data-scroll-reveal] { opacity: 1; transform: none; transition: none; }
}

/* ════════════════════════════════════════════════════════════
   TRANSPARANTE OVERLAY-HEADER (opt-in per template)
   De template geeft snippet('header', ['transparent' => true]) door ->
   <header class="header--transparent">. De header ligt dan als fixed laag
   over de fullscreen hero (transparant, witte onderdelen, geen border).
   Zodra html.is-scrolled erop staat (site.js, >64px) vallen ALLE overrides
   hieronder weg -> de header is automatisch weer exact de normale (incl.
   de bestaande padding-shrink). Pagina's zonder het opt-in-argument
   renderen een kale <header> en merken hier niets van.
   ════════════════════════════════════════════════════════════ */
.header--transparent {
  /* Fixed (niet sticky): uit de flow, zodat de hero op de viewport-top start
     en er geen positie-sprong is bij de transparant->wit-overgang. */
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* transform hoort in deze lijst: deze specifiekere regel wint van de autohide-
     transition op `header`, zonder transform flitst de slide op transparante
     pagina's (home/showcase/club/internationaal) in één keer weg. */
  transition: padding 0.3s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.7s ease;
}

/* Boven aan de pagina (nog niet gescrold): transparant + wit. */
html:not(.is-scrolled) .header--transparent {
  background: transparent;
  border-bottom-color: transparent;
}
html:not(.is-scrolled) .header--transparent .header-left a,
html:not(.is-scrolled) .header--transparent .hamburger-label,
html:not(.is-scrolled) .header--transparent .lang-current {
  color: rgba(255, 255, 255, 0.92);
}
html:not(.is-scrolled) .header--transparent .wordmark-name,
html:not(.is-scrolled) .header--transparent .phone-link {
  color: #fff;
}
html:not(.is-scrolled) .header--transparent .hamburger-bars span { background: #fff; }

/* Hover op beeld: forest leest niet op video/foto -> naar vol wit. */
html:not(.is-scrolled) .header--transparent .header-left a:hover,
html:not(.is-scrolled) .header--transparent .phone-link:hover,
html:not(.is-scrolled) .header--transparent .hamburger:hover .hamburger-label,
html:not(.is-scrolled) .header--transparent a.wordmark:hover .wordmark-name {
  color: #fff;
}
html:not(.is-scrolled) .header--transparent .hamburger:hover .hamburger-bars span { background: #fff; }

/* Divider header-right (alleen zichtbaar met taal-switch aan) + witte focus-ring op beeld. */
html:not(.is-scrolled) .header--transparent .header-right .lang-switch + .phone-link { border-left-color: rgba(255, 255, 255, 0.35); }
html:not(.is-scrolled) .header--transparent a:focus-visible,
html:not(.is-scrolled) .header--transparent .hamburger:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

/* ════════════════════════════════════════════════════════════
   HOME STATS-BAND — kerncijfers (forest merk-anker + rustpunt)
   Donkergroene full-bleed band tussen aanbod en werkgebieden.
   Cijfers in Playfair/sand (champagne op forest), labels in Jost
   uppercase. De count-up (site.js) telt op bij in-beeld-scrollen;
   zonder JS of met reduced-motion staan de eindwaardes er gewoon.
   ════════════════════════════════════════════════════════════ */
.home-stats { background: var(--forest); padding: clamp(64px, 8vw, 100px) 48px; }
.home-stats-grid { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); }
.home-stat { text-align: center; padding: 8px 24px; }
.home-stat + .home-stat { border-left: 1px solid rgba(212, 193, 166, 0.22); }
.home-stat-value { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(40px, 4.6vw, 64px); line-height: 1; color: var(--sand); font-variant-numeric: tabular-nums; }
.home-stat-suffix { font-size: 0.55em; vertical-align: 0.5em; margin-left: 2px; color: var(--sand); }
.home-stat-label { margin-top: 14px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.72); }

@media (max-width: 1000px) {
  .home-stats { padding: 56px 24px; }
  .home-stats-grid { grid-template-columns: 1fr 1fr; gap: 44px 0; }
  .home-stat + .home-stat { border-left: 0; }
  .home-stat:nth-child(even) { border-left: 1px solid rgba(212, 193, 166, 0.22); }
}

/* ════════════════════════════════════════════════════════════
   AV BUSINESS CLUB — luxe membership-onepager (zuster showcase)
   Donkere hero (transparante header via .header--transparent),
   gecentreerde ruime secties, forest + sand/goud. Scoped .club-*.
   LET OP: /internationaal hergebruikt deze bouwstenen 1-op-1
   (bewust, zelfde bouwstijl) — wijzigingen hier raken beide pagina's.
   ════════════════════════════════════════════════════════════ */
.club-hero { position: relative; height: 92vh; height: 92svh; min-height: 560px; background: var(--forest); overflow: hidden; display: flex; align-items: center; justify-content: center; text-align: center; }
.club-hero::before { content: ''; position: absolute; inset: 0; background: radial-gradient(110% 75% at 50% 0%, var(--forest-light) 0%, rgba(45,82,64,0) 62%); pointer-events: none; z-index: 0; }
/* Ken Burns + tweelaagse scrim: zelfde patroon als de homepage-forest-hero.
   Zelfde keyframes ('hero-kenburns'), zelfde radiale
   donkere ellips achter de gecentreerde tekst + verticale gradient voor diepte;
   zonder foto valt de scrim gewoon over de forest-gradient (iets meer diepte). */
.club-hero-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; transform-origin: center; animation: hero-kenburns 6s linear forwards; }
@media (prefers-reduced-motion: reduce) {
  .club-hero-photo { animation: none; transform: none; }
}
.club-hero::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 92% 68% at 50% 44%, rgba(20,26,22,0.52) 0%, rgba(20,26,22,0) 72%), linear-gradient(180deg, rgba(20,26,22,0.5) 0%, rgba(20,26,22,0.2) 42%, rgba(20,26,22,0.55) 100%); pointer-events: none; z-index: 1; }
.club-hero-inner { position: relative; z-index: 2; color: var(--bone); padding: 0 24px; max-width: 860px; }
/* Band-variant (aanvraagpagina's + bedankt): dezelfde forest-hero-machinerie
   (gradient, scrim, Ken Burns-foto, typografie) maar als royale band in
   plaats van schermvullend — het formulier of de vervolg-inhoud moet direct
   in beeld blijven. Ruime top-padding vanwege de transparante header. */
.club-hero.club-hero--band { height: auto; min-height: 0; padding: clamp(150px, 17vw, 210px) 0 clamp(76px, 9vw, 120px); }
.club-hero.club-hero--band .club-hero-title { font-size: clamp(36px, 4.8vw, 62px); }
/* Bedankt-pagina: de routes-grid volgt daar direct op de band-hero (de
   page-grid-body die de ruimte gaf, is vervallen — lede zit in de hero). */
.club-hero--band + .routes-section { margin-top: clamp(56px, 7vw, 88px); }
.club-hero-eyebrow { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.34em; text-transform: uppercase; color: var(--sand); margin-bottom: 28px; text-shadow: 0 1px 3px rgba(15,20,16,0.7), 0 0 14px rgba(15,20,16,0.45); }
.club-hero-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(42px, 6vw, 76px); line-height: 1.06; letter-spacing: -0.01em; color: var(--bone); }
.club-hero-title em { font-style: normal; color: inherit; }
.club-hero-lede { margin: 26px auto 0; max-width: 560px; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.8); }
/* Scroll-cue (gedeeld: Business Club, Internationaal + showcase, via .club-scroll-cue): klikbaar anker met daarboven een
   1px-lijntje dat rustig van boven naar beneden intekent en wegzacht (~2.8s-cyclus).
   Subtiel genoeg om chic te blijven; bij prefers-reduced-motion staat de lijn stil. */
.club-scroll-cue,
.home-hero-forest-cue { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); z-index: 2; font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.55); padding: 10px 14px; transition: color 0.25s ease; text-align: center; }
.club-scroll-cue::before,
.home-hero-forest-cue::before { content: ''; display: block; width: 1px; height: 20px; margin: 0 auto 10px; background: linear-gradient(to bottom, rgba(255,255,255,0.85), rgba(255,255,255,0.2)); transform-origin: top; animation: scroll-cue-line 2.8s ease-in-out infinite; }
@keyframes scroll-cue-line {
  0%   { transform: scaleY(0); opacity: 0.9; }
  45%  { transform: scaleY(1); opacity: 0.9; }
  75%  { transform: scaleY(1); opacity: 0; }
  100% { transform: scaleY(1); opacity: 0; }
}
.club-scroll-cue:hover,
.home-hero-forest-cue:hover { color: #fff; }
.club-scroll-cue:focus-visible,
.home-hero-forest-cue:focus-visible { outline: 2px solid #fff; outline-offset: 2px; color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .club-scroll-cue::before,
  .home-hero-forest-cue::before { animation: none; transform: scaleY(1); opacity: 0.6; }
}
/* Onzichtbaar ankerpunt voor de cue-scroll. Negatieve top = de scroll stopt
   IETS BOVEN de sectie-rand (de vaste header overlapt de bovenkant, dus iets
   eerder stoppen oogt beter): desktop 50px, mobiel 80px. */
.club-intro,
.tagline-section { position: relative; }
.scroll-cue-target { position: absolute; top: -50px; left: 0; width: 1px; height: 1px; pointer-events: none; }
@media (max-width: 1000px) {
  .scroll-cue-target { top: -80px; }
}

.club-intro { padding: clamp(96px, 12vw, 160px) 48px; max-width: 720px; margin: 0 auto; text-align: center; }
.club-intro p { font-size: 1.18rem; line-height: 1.75; color: var(--ink-soft); }
.club-intro p + p { margin-top: 22px; }

.club-benefits { padding: 0 48px clamp(96px, 11vw, 150px); }
.club-benefits-grid { max-width: 1080px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 80px) clamp(48px, 6vw, 88px); }
.club-benefit { border-top: 1px solid var(--sand); padding-top: 26px; }
.club-benefit-eyebrow { font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 14px; }
.club-benefit-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.2; color: var(--ink); margin-bottom: 12px; }
.club-benefit-body { font-size: 1rem; line-height: 1.65; color: var(--mute); max-width: 42ch; }

/* Optionele foto-band (tussen voordelen en clubjaar; rendert alleen mét foto).
   <img> conform de huisregel (geen CSS-background); subtiele scrim onderin
   voor het bijschrift. */
.club-photo-band { position: relative; height: clamp(320px, 45vw, 540px); overflow: hidden; }
.club-photo-band img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
.club-photo-band::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(20, 26, 22, 0.35), rgba(20, 26, 22, 0) 40%); pointer-events: none; }
.club-photo-band-caption { position: absolute; left: 48px; bottom: 22px; z-index: 2; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); }

.club-year { background: var(--forest); padding: clamp(88px, 11vw, 140px) 48px; }
.club-year-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.club-year-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; color: var(--bone); }
.club-year-title em { font-style: normal; color: inherit; }
.club-year-intro { margin: 18px auto 0; max-width: 520px; font-size: 1.02rem; line-height: 1.6; color: rgba(255,255,255,0.72); }
.club-events { margin-top: clamp(44px, 5vw, 64px); text-align: left; }
.club-event { display: grid; grid-template-columns: minmax(220px, 0.9fr) 1.6fr; gap: 12px 48px; padding: 26px 0; border-top: 1px solid rgba(212, 193, 166, 0.22); align-items: baseline; }
.club-event:last-child { border-bottom: 1px solid rgba(212, 193, 166, 0.22); }
.club-event-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--sand); }
.club-event-body { font-size: 0.98rem; line-height: 1.65; color: rgba(255,255,255,0.75); }

/* Reels-strip op de showcase: horizontaal scrollende rij staande (9:16)
   video-kaarten — het social-formaat in de merk-stijl. Native CSS scroll-snap,
   geen JS; klik opent de bestaande video-lightbox (die schaalt staand formaat
   vanzelf). De strip bloedt rechts uit het kader voor het doorscroll-gevoel. */
.showcase-reels { padding: 0 0 clamp(96px, 11vw, 150px) 48px; }
.showcase-reels-head { padding-right: 48px; margin-bottom: 30px; }
.showcase-reels-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(26px, 3.2vw, 38px); color: var(--ink); }
.showcase-reels-strip { display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 4px 48px 18px 0; -webkit-overflow-scrolling: touch; }
.showcase-reels-strip:focus-visible { outline: 2px solid var(--forest); outline-offset: 4px; }
.showcase-reel { position: relative; flex: 0 0 auto; width: clamp(200px, 21vw, 250px); aspect-ratio: 9 / 16; scroll-snap-align: start; border: 0; padding: 0; background: var(--bone-deep); cursor: pointer; overflow: hidden; }
.showcase-reel:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
.showcase-reel img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; }
.showcase-reel:hover img { transform: scale(1.04); }
.showcase-reel .story-play--klein { width: 56px; height: 56px; }
.showcase-reel .story-play--klein::before { border-width: 9px 0 9px 14px; margin-left: 4px; }
.showcase-reel:hover .story-play--klein { transform: translate(-50%, -50%) scale(1.06); background: var(--bone); }
.showcase-reel-label { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 14px 12px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; text-align: left; background: linear-gradient(transparent, rgba(0,0,0,0.55)); }
@media (max-width: 1000px) {
  .showcase-reels { padding-left: 24px; }
  .showcase-reels-head { padding-right: 24px; }
  .showcase-reels-strip { padding-right: 24px; gap: 12px; }
  /* ~1,6 kaart in beeld: de aangesneden volgende kaart laat zien dat de strip scrolt
   * (bij 44vw pasten er precies 2 strak in beeld en leek de strip "af"). */
  .showcase-reel { width: clamp(190px, 56vw, 250px); }
}

/* Klantquote-band op de showcase: forest-rustpunt tussen het grid en
   "Zo werkt het" (zelfde band-recept als .club-year). Eén echt citaat,
   Playfair in sand, sobere attributie eronder. */
.showcase-quote { background: var(--forest); padding: clamp(88px, 11vw, 140px) 48px; }
/* Quote-band midden in een page-wrap (over-ons): de wrap splitst eromheen.
   Boven de band levert het eerste wrap-deel zijn normale bodempadding (80px),
   het tweede deel spiegelt dat als bovenrand zodat de bone-ruimte rond het
   groen symmetrisch is en het sectie-ritme doorloopt. */
.page-wrap--na-band { padding-top: 80px; }
@media (max-width: 1000px) {
  .page-wrap--na-band { padding-top: 56px; }
}
.showcase-quote-inner { max-width: 860px; margin: 0 auto; text-align: center; }
.showcase-quote-text p { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(26px, 3.2vw, 40px); line-height: 1.3; color: var(--sand); }
.showcase-quote-attr { margin-top: 28px; font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.65); }

.club-membership { padding: clamp(96px, 12vw, 150px) 48px; max-width: 980px; margin: 0 auto; text-align: center; }
.club-membership-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 40px); color: var(--ink); }
.club-membership-intro { margin: 16px auto 0; max-width: 560px; font-size: 1.05rem; line-height: 1.65; color: var(--mute); }
.club-steps { margin-top: clamp(44px, 5vw, 60px); display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; text-align: center; }
.club-step-num { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--sand-deep); margin-bottom: 12px; }
.club-step-title { font-family: 'Jost', sans-serif; font-size: 1.05rem; font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.club-step-body { font-size: 0.95rem; line-height: 1.6; color: var(--mute); max-width: 30ch; margin: 0 auto; }
.club-membership-note { margin-top: clamp(36px, 4vw, 48px); font-size: 0.95rem; color: var(--whisper); font-style: italic; }

.club-closing { background: var(--bone-deep); padding: clamp(88px, 10vw, 130px) 48px; text-align: center; border-top: 1px solid var(--line); }
.club-closing-eyebrow { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 20px; }
.club-closing-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(28px, 3.4vw, 42px); color: var(--ink); margin-bottom: 16px; }
.club-closing-title em { font-style: normal; color: inherit; }
.club-closing-body { max-width: 480px; margin: 0 auto 32px; font-size: 1.02rem; line-height: 1.6; color: var(--mute); }
.club-closing-alt { margin-top: 20px; font-size: 0.95rem; color: var(--mute); }
.club-closing-alt a { color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; }
.club-closing-alt a:hover { color: var(--forest); border-bottom-color: var(--forest); }

@media (max-width: 1000px) {
  .club-hero { min-height: 480px; }
  .club-intro { padding-left: 24px; padding-right: 24px; }
  .club-benefits { padding-left: 24px; padding-right: 24px; }
  .club-benefits-grid { grid-template-columns: 1fr; gap: 44px; }
  .club-year { padding-left: 24px; padding-right: 24px; }
  .showcase-quote { padding-left: 24px; padding-right: 24px; }
  .club-event { grid-template-columns: 1fr; gap: 8px; }
  .club-photo-band { height: clamp(240px, 60vw, 380px); }
  .club-photo-band-caption { left: 24px; bottom: 16px; }
  .club-membership { padding-left: 24px; padding-right: 24px; }
  .club-steps { grid-template-columns: 1fr; gap: 32px; }
  .club-closing { padding-left: 24px; padding-right: 24px; }
}

/* ════════════════════════════════════════════════════════════
   INTERNATIONAAL — Qualis-aanbod (kaarten + off-market-band)
   en het lichte detailtemplate. Hergebruikt bewust de bestaande
   bouwstenen (.post-aanbod-kop, .aanbod-card, .club-year-band,
   .listing-*): hieronder alleen wat daar echt bovenop moet.
   ════════════════════════════════════════════════════════════ */
/* Kaarten-sectie: geen scheidingslijn na het intro-statement, wel club-lucht eronder. */
.intl-aanbod { border-top: 0; padding-bottom: clamp(96px, 11vw, 150px); }
.intl-aanbod-intro { margin-top: 14px; max-width: 560px; font-size: 1.02rem; line-height: 1.6; color: var(--ink-soft); }

/* Off-market-band: forest-band met de toegangs-CTA; benefits erna heeft
   basis-padding-top 0 (die leunde op de club-intro) en krijgt hier lucht terug. */
.intl-offmarket .btn-primary { margin-top: 36px; }
.intl-offmarket + .club-benefits { padding-top: clamp(88px, 10vw, 140px); }

/* Detailpagina: één gecentreerde leeskolom in het bestaande listing-grid. */
.intl-overview { grid-template-columns: 1fr; max-width: 1080px; margin: 0 auto; }

/* Hero-fotoknop (woning + internationaal, Codex 25-8): de foto is een echte
   button ín de container — de videotour-knop blijft een sibling (button-in-
   button is verboden HTML). Focusring aan de bínnenkant: de container heeft
   overflow:hidden en zou een buitenring wegknippen. De overlays (status/
   teller/ribbon) laten kliks door naar de fotoknop, zodat de hele foto
   klikbaar blijft zoals voorheen. */
.listing-hero-photo-btn { position: absolute; inset: 0; display: block; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
/* Tweekleurige focusring (wit + forest, Codex 25-8): één witte ring valt weg
   op een lichte lucht of muur. De forest-band staat op een ::after-overlay —
   een inset-schaduw op de button zelf zou achter de foto (child) verdwijnen;
   de witte outline tekent er middendoor, dus wit met donker aan weerszijden. */
.listing-hero-photo-btn:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.listing-hero-photo-btn:focus-visible::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 8px var(--forest); }
.listing-hero-status, .listing-hero-counter, .listing-hero-sold-ribbon { pointer-events: none; }
.intl-price { font-family: 'Playfair Display', serif; font-size: clamp(24px, 3vw, 32px); color: var(--ink); margin: 10px 0 24px; }
.intl-price em { font-style: normal; font-family: 'Jost', sans-serif; font-size: 0.9rem; color: var(--mute); }
.intl-price-vanaf { font-family: 'Jost', sans-serif; font-size: 0.95rem; letter-spacing: 0.04em; color: var(--mute); margin-right: 2px; }
/* Eigen toelichting onder de prijs: kruipt tegen het bedrag aan, de prijs geeft
   dan zijn onderruimte af. Zonder :has-ondersteuning blijft de ruimte staan. */
.intl-price:has(+ .intl-price-note) { margin-bottom: 8px; }
.intl-price-note { margin: 0 0 24px; max-width: 62ch; font-size: 0.95rem; line-height: 1.6; color: var(--mute); }
.intl-price-note p { margin: 0; }
.intl-price-note p + p { margin-top: 8px; }
.intl-bron-note { margin-top: 24px; font-size: 0.95rem; color: var(--mute); }

/* Qualis-bronteksten bevatten opsommingen; de woning-beschrijving kende alleen alinea's. */
.listing-description ul { margin: 0 0 18px 20px; }
.listing-description li { font-size: 1.125rem; line-height: 1.7; color: var(--ink-soft); margin-bottom: 6px; }

/* ════════════════════════════════════════════════════════════
   DIENST — brede secties (sidebar stopt bij Voordelen)
   De sticky CTA loopt alleen mee tijdens het lees-deel (Aanpak +
   Proces). Vanaf #pillar gaat de pagina full-width zodat de
   kaart-grids lucht krijgen. Koppen/alinea's blijven links en
   houden hun eigen max-width (720/680px), dus geen lange regels.
   ALLE grid-overrides zijn gescopet onder .dienst-wide: dezelfde
   selectors worden gedeeld met over-ons/team/werken-bij/showcase/
   beoordelingen/wijk (refactor-discipline).
   ════════════════════════════════════════════════════════════ */
.dienst-wide { padding: 0 48px 80px; }
.dienst-wide > section + section { margin-top: 60px; }

/* Voordelen: 4 kaarten passen nu naast elkaar; auto-fit vangt 3 (stille-verkoop)
   en toekomstige aantallen op zonder aparte regels. */
.dienst-wide .marketing-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }

/* FAQ over de volle sectie-breedte met gecentreerde kop; de vragenlijst zelf
   gecentreerd op leesbreedte (zelfde behandeling als de wijk-FAQ). De
   author-byline staat als is-band buiten .dienst-wide. */
.dienst-wide #faq { text-align: center; }
.dienst-wide #faq .section-eyebrow::after { content: ''; width: 24px; height: 1px; background: var(--eyebrow); }
.dienst-wide #faq .section-body p { margin-left: auto; margin-right: auto; }
/* 16px lucht tussen de intro-regel en de vragenlijst: de shorthand hieronder
   at eerst de 40px-basismarge van .faq-list volledig op. */
.dienst-wide #faq .faq-list { margin: 16px auto 0; text-align: left; }
.dienst-wide .faq-list { max-width: 880px; }

/* taXapi-wizard (alleen /diensten/taxatie): een formulier van 1300px breed
   leest slecht; zelfde cap als de FAQ. */
.dienst-wide .taxapi-embed { max-width: 880px; }

/* Brede layout (Panel-toggle layout_breed per dienst): club-bouwstijl.
   Fullscreen club-hero met transparante header (alle intro-tekst in de hero);
   sectiekoppen gecentreerd met de lopende tekst links in een gecentreerde
   kolom; de doelen-forest-band met extra lucht na het proces; FAQ-lijst op
   volle breedte; de taxatie-wizard houdt bewust zijn leescap van 880px. */
/* Dubbele klasse bewust: de algemene .dienst-wide-mediaqueries verderop zetten
   padding/sectieritme en zouden deze regels anders op tablet/mobiel overrulen. */
.dienst-wide.dienst-wide--lead { padding-top: clamp(64px, 8vw, 110px); padding-bottom: 0; }
.dienst-wide--lead + .forest-band { margin-top: clamp(72px, 8vw, 110px); }
.dienst-wide--lead > section,
.dienst-wide--breed > section { text-align: center; }
.dienst-wide--lead .section-eyebrow::after,
.dienst-wide--breed .section-eyebrow::after { content: ''; width: 28px; height: 1px; background: var(--eyebrow); }
.dienst-wide--lead .section-title,
.dienst-wide--breed .section-title { margin-left: auto; margin-right: auto; }
.dienst-wide--lead .section-body,
.dienst-wide--breed .section-body { text-align: left; }
.dienst-wide--lead .section-body p,
.dienst-wide--breed .section-body p { margin-left: auto; margin-right: auto; }
.dienst-wide--lead .karakter-highlight { margin-left: auto; margin-right: auto; text-align: left; }
.dienst-wide--lead .proces-list { max-width: 1080px; margin-left: auto; margin-right: auto; text-align: left; }
/* Ruimer club-ritme, incl. extra lucht tussen Proces en de doelen-sectie.
   Na de forest-band compenseert de lagere padding diens eigen margin-bottom
   (80px), zodat de band-naar-team-ruimte op hetzelfde 110px-ritme uitkomt. */
.dienst-wide.dienst-wide--lead > section + section { margin-top: 90px; }
.dienst-wide.dienst-wide--breed { padding-top: 110px; }
.forest-band + .dienst-wide.dienst-wide--breed { padding-top: 30px; }
.dienst-wide.dienst-wide--breed > section + section { margin-top: 110px; }
/* Doelen in de club-voordelen-stijl (zelfde maatvoering als .club-benefit). */
.dienst-wide--breed .marketing-grid { max-width: 1080px; margin: 48px auto 0; grid-template-columns: 1fr 1fr; gap: clamp(48px, 6vw, 80px) clamp(48px, 6vw, 88px); text-align: left; }
.dienst-wide--breed .marketing-pillar { background: none; border: none; border-top: 1px solid var(--sand); padding: 26px 0 0; }
.dienst-wide--breed .marketing-pillar-eyebrow { font-size: 11px; letter-spacing: 0.26em; }
.dienst-wide--breed .marketing-pillar-title { font-size: clamp(22px, 2.4vw, 28px); }
.dienst-wide--breed .marketing-pillar-body { color: var(--mute); max-width: 42ch; }
/* Foto-band boven de forest-band (club-variant): zelfde .club-photo-band als
   Internationaal; ligt strak tegen de band aan, met eigen lucht na het proces. */
.dienst-wide--lead + .club-photo-band { margin-top: clamp(72px, 8vw, 110px); }
/* Film-band-variant (band_video gevuld): de sectie-wrapper met kop erft
   dezelfde topmarge en zit bewust strak tegen de forest-band eronder
   (padding-bottom 0, keuze Richard: beeldband vloeit in de groene band;
   de showcase-pagina houdt zijn eigen ademruimte). */
.dienst-wide--lead + .showcase-film { margin-top: clamp(72px, 8vw, 110px); padding-bottom: 0; }

/* Proces-accordion (club-variant): inklapbare stappen in het club-benefits-
   raster (2 kolommen op 1080px), bewust anders dan de FAQ-stijl (genummerde
   regels met goud-plus, geen kader). Hairline per item, zoals .club-benefit. */
.proces-accordion { max-width: 1080px; margin: 48px auto 0; display: grid; grid-template-columns: 1fr 1fr; gap: 24px clamp(48px, 6vw, 88px); align-items: start; text-align: left; }
.proces-acc-item { border-top: 1px solid var(--line); }
.proces-acc-item summary { list-style: none; cursor: pointer; display: flex; align-items: baseline; gap: 22px; padding: 24px 6px; }
.proces-acc-item summary::-webkit-details-marker { display: none; }
.proces-acc-num { font-size: 12px; font-weight: 500; letter-spacing: 0.18em; color: var(--eyebrow); width: 30px; flex-shrink: 0; }
.proces-acc-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(19px, 2vw, 24px); line-height: 1.25; color: var(--ink); flex: 1; transition: color 0.25s ease; }
.proces-acc-item summary::after { content: '+'; font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 300; line-height: 1; color: var(--eyebrow); flex-shrink: 0; }
.proces-acc-item[open] summary::after { content: '−'; }
.proces-acc-item summary:hover .proces-acc-title { color: var(--forest); }
.proces-acc-body { margin: 0; padding: 0 6px 28px 58px; max-width: 66ch; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }

/* Compacte club-echo's van reviews en team: wél aanwezig, veel kleiner dan de
   volledige secties die de club-variant laat vervallen. */
.dienst-review-quote { max-width: 760px; margin-left: auto; margin-right: auto; }
.dienst-review-quote-stars { color: var(--eyebrow); font-size: 13px; letter-spacing: 0.3em; margin-bottom: 18px; }
.dienst-review-quote-text { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.5; color: var(--ink); margin: 0; }
.dienst-review-quote-text::before { content: '"'; }
.dienst-review-quote-text::after { content: '"'; }
.dienst-review-quote-meta { margin-top: 16px; font-size: 11px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--mute); }
.dienst-review-quote-link,
.dienst-team-strip-link { display: inline-block; margin-top: 14px; font-size: 0.9rem; font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.dienst-review-quote-link:hover,
.dienst-team-strip-link:hover { color: var(--forest); border-color: var(--forest); }
.dienst-review-quote-link span,
.dienst-team-strip-link span { color: var(--eyebrow); }

/* Review-citaat als forest-band: hetzelfde rustpunt als de showcase-quotband.
   Breekt uit de .dienst-wide-padding met gespiegelde negatieve marges
   (48/32/24px per breakpoint). */
.dienst-review-quote--forest { max-width: none; margin-left: -48px; margin-right: -48px; background: var(--forest); padding: clamp(88px, 11vw, 140px) 48px; }
.dienst-review-quote--forest .dienst-review-quote-stars { color: var(--sand); }
.dienst-review-quote--forest .dienst-review-quote-text { font-size: clamp(24px, 2.8vw, 34px); color: var(--sand); max-width: 860px; margin-left: auto; margin-right: auto; }
.dienst-review-quote--forest .dienst-review-quote-meta { color: rgba(255, 255, 255, 0.65); }
.dienst-review-quote--forest .dienst-review-quote-link { color: var(--bone); border-bottom-color: rgba(212, 193, 166, 0.45); }
.dienst-review-quote--forest .dienst-review-quote-link:hover { color: var(--sand); border-bottom-color: var(--sand); }
@media (max-width: 1100px) {
  .dienst-review-quote--forest { margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1000px) {
  .dienst-review-quote--forest { margin-left: -24px; margin-right: -24px; padding-left: 24px; padding-right: 24px; }
}
/* Zelf-centrerend sinds de strip ook buiten de club-containers leeft
   (over-ons); binnen .dienst-wide--breed centreerde de parent al. */
.dienst-team-strip { text-align: center; }
/* Team-strip op de bedankt-pagina: eigen ademruimte tussen de routekaarten
   en de service-strip (op /over-ons zit de strip al in een page-wrap). */
.bedankt-team { margin-top: clamp(56px, 7vw, 88px); margin-bottom: clamp(16px, 2vw, 32px); }
.dienst-team-strip-avatars { display: flex; justify-content: center; }
.dienst-team-strip-avatars a { display: block; width: 56px; height: 56px; border-radius: 50%; overflow: hidden; border: 2px solid #fff; box-shadow: 0 2px 10px rgba(28, 27, 23, 0.18); margin-left: -12px; transition: transform 0.25s ease; }
.dienst-team-strip-avatars a:first-child { margin-left: 0; }
.dienst-team-strip-avatars a:hover,
.dienst-team-strip-avatars a:focus-visible { transform: translateY(-3px); }
.dienst-team-strip-avatars img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.dienst-team-strip-text { margin: 18px 0 0; font-family: 'Playfair Display', serif; font-size: clamp(19px, 2vw, 24px); color: var(--ink); }

/* Collega-kaarten (werken-bij, brede layout): drie gezichten plus de lege
   "Jij?"-kaart in één rij van vier op volle containerbreedte (zelfde breedte
   als de FAQ-lijst erboven). De liggende 306:150-fotostrook houdt de rij
   laag en rustig. */
.collegas-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 26px); margin: 48px auto 0; }
.collega-card { display: flex; flex-direction: column; background: var(--bone); border: 1px solid var(--line); text-align: center; transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; }
.collega-card:hover,
.collega-card:focus-visible { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(26, 25, 22, 0.10); border-color: var(--line-warm); }
.collega-card-photo { display: block; width: 100%; height: auto; aspect-ratio: 306 / 150; object-fit: cover; }
.collega-card-photo--jij { display: flex; align-items: center; justify-content: center; background: var(--paper); }
.collega-card-photo--jij span { font-family: 'Playfair Display', serif; font-size: clamp(34px, 3.4vw, 46px); color: var(--sand); }
.collega-card-meta { padding: 20px 16px 24px; }
.collega-card-name { font-family: 'Playfair Display', serif; font-size: clamp(18px, 1.8vw, 22px); line-height: 1.3; color: var(--ink); transition: color 0.25s ease; }
.collega-card:hover .collega-card-name,
.collega-card:focus-visible .collega-card-name { color: var(--forest); }
.collega-card-role { margin-top: 5px; font-size: 12px; font-weight: 500; letter-spacing: 0.08em; color: var(--mute); }
.collegas-cards .dienst-team-strip-link { margin-top: 34px; }
@media (max-width: 1000px) {
  .collegas-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 480px) {
  .collegas-grid { gap: 12px; }
  .collega-card-meta { padding: 14px 10px 18px; }
  .collega-card-role { font-size: 11px; letter-spacing: 0.04em; }
}

/* Magazine-waaier als club-echo: zelfde waaier-opbouw als het sidebar-blok,
   zonder de bone-kaart eromheen; de covers krijgen hier meer ruimte.
   Aspect-ratio en cover-breedte expliciet, anders slaat de max-height-query
   van de sticky sidebar (compacte covers) de waaier hier ook plat. */
.dienst-magazine-echo .dienst-magazine-covers { max-width: 440px; margin: 0 auto 34px; aspect-ratio: 5 / 4; }
.dienst-magazine-echo .dienst-magazine-covers img { width: 54%; }
.dienst-magazine-echo .dienst-magazine-covers.covers-1 { aspect-ratio: auto; }
.dienst-magazine-echo .dienst-magazine-title { font-size: clamp(20px, 2.1vw, 25px); }
.dienst-magazine-echo .dienst-magazine-body { font-size: 0.98rem; max-width: 52ch; margin-left: auto; margin-right: auto; }

/* Hero-knop in de club-hero (werken-bij): zelfde bone-knop als de
   homepage-hero, gecentreerd onder de lede. */
.club-hero-cta { margin-top: 34px; }

/* Slotzin onder de vacature-accordeon: de open sollicitatie als één regel. */
.vacatures-outro { margin: 28px 0 0; font-size: 1rem; color: var(--mute); }
.vacatures-outro a { font-weight: 500; color: var(--ink); border-bottom: 1px solid var(--sand); padding-bottom: 2px; transition: color 0.25s ease, border-color 0.25s ease; }
.vacatures-outro a:hover { color: var(--forest); border-color: var(--forest); }
.vacatures-outro a span { color: var(--eyebrow); }

/* Club-stappen op de forest-band (sollicitatie werken-bij): zelfde nummers en
   ritme, kleuren mee met het donkergroen. */
.forest-band .club-steps { margin-top: clamp(40px, 5vw, 56px); }
.forest-band .club-step-num { color: var(--sand); }
.forest-band .club-step-title { color: var(--bone); }
.forest-band .club-step-body { color: rgba(255, 255, 255, 0.72); }

/* Vacatures ingeklapt (club-variant werken-bij): zelfde accordeon-taal als het
   dienst-proces, één kolom op leesbreedte; de kaart-onderdelen (tag, salaris,
   vereisten, solliciteer-link) verhuizen mee de body in. */
.vacature-acc { max-width: 800px; margin: 48px auto 0; text-align: left; }
.vacature-acc-item { border-top: 1px solid var(--line); }
.vacature-acc-item:last-child { border-bottom: 1px solid var(--line); }
/* Grid i.p.v. flex: de functietitel is een echte h3 en mag daarom niet in een
   span-wrapper zitten (summary staat alleen phrasing plus één kop toe); meta en
   kop stapelen in kolom 1, het plusje overspant rechts beide rijen. */
.vacature-acc-item summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 1fr auto; align-items: center; row-gap: 10px; column-gap: 22px; padding: 26px 6px; }
.vacature-acc-item summary::-webkit-details-marker { display: none; }
.vacature-acc-meta { grid-column: 1; display: flex; align-items: center; gap: 14px; }
.vacature-acc-title { grid-column: 1; font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; color: var(--ink); transition: color 0.25s ease; }
.vacature-acc-item summary::after { grid-column: 2; grid-row: 1 / -1; content: '+'; font-family: 'Jost', sans-serif; font-size: 22px; font-weight: 300; line-height: 1; color: var(--eyebrow); }
.vacature-acc-item[open] summary::after { content: '−'; }
.vacature-acc-item summary:hover .vacature-acc-title { color: var(--forest); }
.vacature-acc-body { padding: 2px 6px 34px; }
.vacature-acc-body .vacature-vereisten { margin-bottom: 24px; }
@media (max-width: 760px) {
  .vacature-acc-item summary { padding: 20px 2px; gap: 14px; }
  .vacature-acc-body { padding: 0 2px 28px; }
}

/* Exclusief in club-stijl: het verhaal-blok op leesbreedte gecentreerd, de
   woning- en teaser-rasters links uitgelijnd binnen de gecentreerde secties;
   teasers op de vertrouwde 1080-maat. */
.dienst-wide--lead .editorial-body { margin-left: auto; margin-right: auto; text-align: left; }
.dienst-wide--breed .aanbod-grid { text-align: left; }
.dienst-wide--breed .exclusief-teaser-grid { max-width: 1080px; margin-left: auto; margin-right: auto; text-align: left; }

/* Merkenstrip: kanalen en lidmaatschappen als rustige monochrome rij. Logo's
   kleuren grijs mee met de huisstijl en lichten bij hover iets op; zonder
   logo staat de naam er typografisch in kapitalen. */
.dienst-merken-rij { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 28px clamp(32px, 4vw, 64px); }
.dienst-merk { display: inline-flex; align-items: center; }
.dienst-merk img { height: 32px; width: auto; max-width: 140px; object-fit: contain; filter: grayscale(1); opacity: 0.55; transition: opacity 0.25s ease; }
/* Optische balans: staande/gestapelde merken (beeldmerk met letters eronder)
   en vierkant-achtige logo's hebben op de uniforme hoogte te weinig massa
   naast brede wordmarks; het template kent de klasse toe op de
   breedte/hoogte-verhouding van het bestand. */
.dienst-merk--staand img { height: 60px; }
.dienst-merk--halfstaand img { height: 40px; }
.dienst-merk--vierkant img { height: 48px; }
a.dienst-merk:hover img { opacity: 0.9; }
.dienst-merk-naam { font-family: 'Jost', sans-serif; font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); transition: color 0.25s ease; }
a.dienst-merk:hover .dienst-merk-naam { color: var(--ink); }
@media (max-width: 760px) {
  .dienst-merken-rij { gap: 18px 28px; }
  .dienst-merk img { height: 26px; }
  .dienst-merk--staand img { height: 48px; }
  .dienst-merk--halfstaand img { height: 32px; }
  .dienst-merk--vierkant img { height: 38px; }
}

/* Wizard gecentreerd; FAQ-lijst op volle breedte (kop houdt de gecentreerde
   dienst-stijl). */
.dienst-wide--breed .taxapi-embed { margin-left: auto; margin-right: auto; }
.dienst-wide--breed #faq .faq-list { max-width: none; margin: 16px 0 0; }
@media (min-width: 1001px) {
  /* Teamkaarten gecentreerd op elke teamgrootte; mobiel houdt de rij-weergave. */
  .dienst-wide--breed .team-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 360px)); justify-content: center; }
}
@media (max-width: 1000px) {
  .dienst-wide--breed .marketing-grid { grid-template-columns: 1fr; gap: 44px; }
  /* De forest-band-margin wordt hier 56px; compensatie mee laten rekenen
     zodat band-naar-volgende-sectie op het ritme blijft (56+54=110, 56+16=72). */
  .forest-band + .dienst-wide.dienst-wide--breed { padding-top: 54px; }
}
@media (max-width: 760px) {
  .proces-accordion { grid-template-columns: 1fr; gap: 14px; }
  .proces-acc-item summary { gap: 14px; padding: 18px 2px; }
  .proces-acc-body { padding-left: 46px; }
  .dienst-wide.dienst-wide--lead > section + section { margin-top: 64px; }
  .dienst-wide.dienst-wide--breed { padding-top: 72px; }
  .forest-band + .dienst-wide.dienst-wide--breed { padding-top: 16px; }
  .dienst-wide.dienst-wide--breed > section + section { margin-top: 72px; }
}

@media (max-width: 1100px) {
  /* Onder de page-grid-breakpoint valt de sidebar toch al onder de content;
     de brede sectie lijnt dan gewoon uit met de rest. */
  .dienst-wide { padding: 0 32px 64px; }
}
@media (max-width: 1000px) {
  .dienst-wide { padding: 0 24px 56px; }
  .dienst-wide > section + section { margin-top: 56px; }
  /* De site zet .marketing-grid hier op 1 kolom; onze auto-fit-regel hierboven
     is specifieker en zou dat overrulen (2 kolommen op tablet). Expliciet
     terugzetten zodat het dienst-brede deel het mobiele ritme volgt. */
  .dienst-wide .marketing-grid { grid-template-columns: 1fr; }
}

/* ════════════════════════════════════════════════════════════
   FOREST-BAND — gedeeld patroon (dienst-pillars via Panel-toggle
   pillar_forest + werkgebied-context). Geeft een pagina het ritme
   van de club-pagina: één donker rustpunt. Bewust EEN band per
   pagina — forest is volgens de huisregels een anker en werkt
   alleen als het spaarzaam blijft. Spiegelt .club-year (forest +
   Playfair/sand + gouden hairlines) met eigen classes, zodat de
   club-pagina onafhankelijk blijft. Koppen links, niet gecentreerd
   zoals de club (bewuste keuze).
   ════════════════════════════════════════════════════════════ */
.forest-band { background: var(--forest); padding: clamp(72px, 9vw, 120px) 48px; margin-bottom: 80px; }
.forest-band-inner { max-width: 1180px; margin: 0 auto; }
.forest-band-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: 'Jost', sans-serif; font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--sand); margin-bottom: 14px; }
.forest-band-eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--sand); }
.forest-band-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(32px, 3.8vw, 48px); line-height: 1.1; letter-spacing: -0.005em; color: var(--bone); max-width: 720px; margin-bottom: 20px; }
.forest-band-title em { font-style: normal; color: inherit; }
.forest-band-intro { font-size: 1.05rem; line-height: 1.7; color: rgba(255, 255, 255, 0.72); max-width: 680px; }

/* Kaarten worden regels: kop links, tekst rechts, dunne goudlijnen ertussen
   (de club-year-behandeling). */
.forest-band-rows { margin-top: clamp(40px, 5vw, 60px); }
.forest-band-row { display: grid; grid-template-columns: minmax(220px, 0.9fr) 1.6fr; gap: 10px 48px; padding: 28px 0; border-top: 1px solid rgba(212, 193, 166, 0.22); align-items: baseline; }
.forest-band-row:last-child { border-bottom: 1px solid rgba(212, 193, 166, 0.22); }
.forest-band-row-eyebrow { font-family: 'Jost', sans-serif; font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--eyebrow); margin-bottom: 8px; }
.forest-band-row-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: 1.35rem; line-height: 1.25; color: var(--sand); }
.forest-band-row-body { font-size: 0.98rem; line-height: 1.65; color: rgba(255, 255, 255, 0.75); }
/* Redactionele links in de band-regels (huispatroon, forest-variant): zonder
   eigen regel maakt de globale anchor-reset ze onzichtbaar. */
.forest-band-row-body a { color: var(--bone); border-bottom: 1px solid rgba(212, 193, 166, 0.45); padding-bottom: 1px; transition: color 0.25s ease, border-color 0.25s ease; }
.forest-band-row-body a:hover { color: var(--sand); border-bottom-color: var(--sand); }

/* Band-raster (bieden-band werken-bij): 2 rijen van 3 i.p.v. de rijenlijst,
   met de gouden toplijn van het pillar-motief op het donkergroen. */
.forest-band-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 52px) clamp(32px, 4vw, 64px); margin-top: clamp(40px, 5vw, 60px); }
.forest-band-cell { border-top: 1px solid rgba(212, 193, 166, 0.35); padding-top: 20px; }
.forest-band-cell .forest-band-row-body { margin-top: 8px; max-width: 40ch; }

@media (max-width: 1100px) {
  .forest-band { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 1000px) {
  .forest-band { padding: 56px 24px; margin-bottom: 56px; }
  .forest-band-row { grid-template-columns: 1fr; gap: 8px; padding: 22px 0; }
  .forest-band-grid { grid-template-columns: 1fr 1fr; gap: 32px 28px; }
}
@media (max-width: 640px) {
  .forest-band-grid { grid-template-columns: 1fr; gap: 26px; }
}

/* ════════════════════════════════════════════════════════════
   DIENST — compacter ritme
   De pagina oogde onnodig lang terwijl de tekst met ~1025 woorden
   juist compact is; de hoogte zat in lucht (7x 80px sectie-gat)
   en in de 7 proces-stappen als verticale sliert.
   Alles gescopet: .page-main en .proces-list worden gedeeld met
   de legal-pagina's, werken-bij, kennisbank-post en
   exclusief-vastgoed — die houden hun eigen ritme.
   ════════════════════════════════════════════════════════════ */
.dienst-grid .page-main > section + section { margin-top: 60px; }

/* Proces: 2-koloms raster i.p.v. één lange kolom (~40% minder hoogte).
   Grid vult rij-voor-rij, dus de volgorde leest 1-2 / 3-4 / 5-6 / 7 —
   zelfde leesrichting als tekst, de nummers houden de sequentie expliciet.

   auto-fit i.p.v. een vaste 2-koloms + breakpoint: een stap is pas leesbaar
   vanaf ~380px kolombreedte (56px nummer + 28px gap + ~296px tekst). Onder de
   808px die twee kolommen nodig hebben klapt 'ie vanzelf naar één — dat lost
   het gat 1100-1300px op, waar de sidebar van 340px de kolommen tot 192px
   tekst kneep. Geen breakpoint te
   onderhouden, en mobiel regelt zichzelf mee.
   max-width 900px capt op twee kolommen: een derde zou pas vanaf 1236px
   passen, en 3 kolommen maken een genummerde volgorde onleesbaar.

   LET OP de min(380px, 100%): een kale minmax(380px, 1fr) heeft een harde
   ondergrens van 380px, dus op een telefoon (327-364px beschikbaar) klapt 'ie
   wel naar een kolom maar blijft die kolom 380px breed -> horizontale overflow
   van 16-68px, en iOS Safari blaast dan ook nog de tekst willekeurig op
   (text-autosizing). Precies het gemelde telefoon-symptoom. min(..., 100%)
   laat de kolom onder de 380px krimpen zodra de container smaller is. */
.dienst-proces .proces-list { max-width: 900px; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); column-gap: 48px; }
.dienst-proces .proces-step { padding: 22px 0; border-bottom: 1px solid var(--line); }
/* De 1-koloms-regels (eerste zonder padding-top, laatste zonder rand) kloppen
   niet meer in een raster: elke cel is nu een gelijke rij. */
.dienst-proces .proces-step:first-child { padding-top: 22px; }
.dienst-proces .proces-step:last-child { border-bottom: 1px solid var(--line); padding-bottom: 22px; }

@media (max-width: 1000px) {
  /* NB: geen 1-koloms-override meer nodig voor .proces-list — de auto-fit
     hierboven klapt mobiel vanzelf om (een telefoon haalt de 380px niet). */
  .dienst-grid .page-main > section + section { margin-top: 48px; }
}

/* ════════════════════════════════════════════════════════════
   DIENST — Team compacter op mobiel
   Gemeten op 360x800: de Team-sectie was 1470px = 12% van de
   pagina, doordat elke kaart een 96px-portret gecentreerd BOVEN
   naam/rol/bio stapelt. Mobiel wordt dat een horizontale rij:
   klein portret links, tekst rechts. Boodschap ("dezelfde drie
   gezichten"), de bio per dienst en de profiellinks blijven; de
   stretched-link (.team-card-link::before) blijft de hele kaart
   klikbaar maken.
   Gescopet op .dienst-wide: .team-card/.team-grid worden gedeeld
   met de team-hub, waar de kaarten juist het hoofdgerecht zijn.
   ════════════════════════════════════════════════════════════ */
@media (max-width: 1000px) {
  .dienst-wide .team-grid { gap: 12px; }
  .dienst-wide .team-card {
    display: grid;
    grid-template-columns: 56px minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
    text-align: left;
    padding: 18px;
  }
  /* Portret spant de vier tekstregels ernaast; de rest gaat expliciet naar
     kolom 2 (niet op auto-placement vertrouwen). */
  .dienst-wide .team-card-photo { grid-column: 1; grid-row: 1 / span 2; width: 56px; height: 56px; margin-bottom: 0; }
  .dienst-wide .team-card-name { grid-column: 2; align-self: end; font-size: 18px; margin-bottom: 2px; }
  .dienst-wide .team-card-role { grid-column: 2; margin-bottom: 0; }
  .dienst-wide .team-card-bio  { grid-column: 1 / -1; font-size: 0.9rem; margin: 12px 0 10px; }
  .dienst-wide .team-card-link { grid-column: 1 / -1; justify-self: start; }
}

/* ════════════════════════════════════════════════════════════
   HOME — Forest-hero (Panel-toggle hero_forest)
   Alternatief voor de mozaïek-hero: fullscreen donker forest met
   de transparante overlay-header eroverheen. Achtergrond is een
   video (showcase-patroon) of een foto; de tekst staat linksonder
   zoals op de showcase, mét een knoppenrij. Laadketen: forest-
   achtergrond -> poster/foto -> video. Ken Burns geldt alleen
   voor de FOTO-variant (een video beweegt zelf); de keyframes
   worden gedeeld met .club-hero (club + internationaal).
   ════════════════════════════════════════════════════════════ */
.home-hero-forest { position: relative; min-height: 100vh; min-height: 100svh; background: var(--forest); overflow: hidden; }
.home-hero-forest::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 50% 0%, var(--forest-light) 0%, rgba(45,82,64,0) 60%); pointer-events: none; z-index: 0; }
.home-hero-forest-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; }
.home-hero-forest-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; z-index: 0; pointer-events: none; transform-origin: center; animation: hero-kenburns 6s linear forwards; }
/* Ken Burns: subtiele inzoom (scale 1 -> 1.05) op de hero-foto bij binnenkomst,
   eenmalig, houdt daarna z'n eindstand ('forwards'). Alleen de FOTO-laag beweegt;
   de scrim (::after) en de tekst blijven stil. transform:scale is GPU-composited
   -> geen layout/paint (compositor-vriendelijk). Pure CSS, geen slider-library
   nodig voor één beeld. prefers-reduced-motion: geen beweging (huisregel).
   Keyframes gedeeld met .club-hero-photo (club + internationaal). */
@keyframes hero-kenburns {
  from { transform: scale(1); }
  to   { transform: scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
  .home-hero-forest-photo { animation: none; transform: none; }
}
/* Scrim (leesbaarheids-laag over video/foto), showcase-recept voor tekst
   linksonder: bovenin een lichte laag zodat de witte header-tekst ook op een
   licht videoframe leesbaar blijft, onderin donker genoeg voor de titel en
   knoppen. Bewust robuust i.p.v. op een specifiek beeld afgestemd, zodat een
   beeld-wissel de leesbaarheid niet breekt. */
.home-hero-forest::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,22,0.35) 0%, rgba(20,26,22,0.05) 18%, rgba(20,26,22,0.55) 70%, rgba(20,26,22,0.85) 100%); pointer-events: none; z-index: 1; }
.home-hero-forest-inner { position: absolute; bottom: 80px; left: 48px; right: 48px; max-width: 720px; z-index: 2; color: var(--bone); }
/* Scroll-cue rechtsonder (tegenover de tekst linksonder); erft de gedeelde
   cue-opmaak, alleen de positie wijkt af. Op mobiel terug naar gecentreerd. */
.home-hero-forest-cue { left: auto; right: 48px; transform: none; bottom: 66px; /* onderkant gelijk aan de CTA-knoppen */ }
@media (max-width: 1000px) {
  /* Cue op mobiel: alleen het pulserende streepje, zonder het woord (het wóórd
     las eerder als label bij de aanbod-knop erboven — het kale lijntje
     gecentreerd onderin heeft die nabijheids-verwarring niet, en nodigt wel
     uit tot scrollen). Font-size 0 verbergt de tekst; het aria-label blijft
     de toegankelijke naam en de link blijft klikbaar. */
  .home-hero-forest-cue { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; font-size: 0; padding: 8px 20px; }
  /* Nadrukkelijker dan desktop (het 1px-lijntje was hier te subtiel):
     dikker, langer en witter, met een zachte gloed tegen lichte videoframes. */
  .home-hero-forest-cue::before { margin-bottom: 0; width: 2px; height: 34px; border-radius: 1px; background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.4)); box-shadow: 0 0 8px rgba(15, 20, 16, 0.35); }
}
/* text-shadow als leesbaarheids-hulp over foto's: champagne (lum 0.55) is te licht
   om via de scrim alleen 4.5:1 te halen zonder de foto dood te slaan. De schaduw
   geeft een donkere rand rond de glyphs, wat de leesbaarheid in de praktijk sterk
   verbetert (WCAG telt 'm niet mee in de pixelmeting, vandaar ook de art-directie:
   kies een foto die bovenin niet te licht is). */
.home-hero-forest-eyebrow { font-family: 'Jost', sans-serif; font-size: 12px; font-weight: 500; letter-spacing: 0.32em; text-transform: uppercase; color: var(--sand); margin-bottom: 26px; text-shadow: 0 1px 3px rgba(15,20,16,0.7), 0 0 14px rgba(15,20,16,0.45); }
/* Clamp evenredig verkleind van max 82px naar max 64px (factor ~0.78:
   vloer 44->34px, groeifactor 6.2->4.8vw). */
.home-hero-forest-title { font-family: 'Playfair Display', serif; font-weight: 400; font-size: clamp(42px, 4.8vw, 64px); line-height: 1.05; letter-spacing: -0.01em; color: var(--bone); }
.home-hero-forest-lede { margin: 26px 0 0; max-width: 560px; font-size: 1.1rem; line-height: 1.6; color: rgba(255,255,255,0.82); }
.home-hero-forest-cta { margin-top: 38px; display: flex; gap: 16px; justify-content: flex-start; flex-wrap: wrap; }

/* Knop-varianten voor op forest: de standaard btn-primary (donkere vulling) en
   btn-ghost (donkere rand/tekst) zouden donker-op-donker vallen. */
.btn-primary.btn-on-forest { background: var(--bone); color: var(--forest); }
.btn-primary.btn-on-forest:hover { background: var(--sand-deep); color: var(--bone); }
.btn-ghost.btn-ghost-on-forest { color: var(--bone); border-color: rgba(255,255,255,0.5); background: transparent; }
.btn-ghost.btn-ghost-on-forest:hover { border-color: var(--bone); color: var(--bone); background: rgba(255,255,255,0.08); }

@media (max-width: 1000px) {
  .home-hero-forest { min-height: 100vh; min-height: 100svh; }
  /* Linksonder ook op de telefoon (showcase-recept); knoppen gestapeld,
     uitgelijnd op de linkerkant van de tekst. */
  .home-hero-forest-inner { left: 24px; right: 24px; bottom: 96px; }
  .home-hero-forest-eyebrow { margin-bottom: 28px; }
  .home-hero-forest-lede { margin-top: 28px; }
  .home-hero-forest-cta { margin-top: 36px; flex-direction: column; align-items: flex-start; gap: 14px; }
  .home-hero-forest-cta a { width: 100%; max-width: 320px; text-align: center; justify-content: center; }
  /* Mobiel: óók de aanbod-knop in de rustige ghost-stijl; twee gevulde lagen op
     de video oogden te druk. Zelfde rand/maat als de ghost-knop;
     desktop houdt de gevulde primary. */
  .home-hero-forest-cta .btn-primary.btn-on-forest { background: transparent; color: var(--bone); border: 1px solid rgba(255,255,255,0.5); padding: 16px 24px; }
  .home-hero-forest-cta .btn-primary.btn-on-forest:hover { background: rgba(255,255,255,0.08); border-color: var(--bone); color: var(--bone); }
  /* Eén knop op mobiel (bewuste keuze): de kennismakings-knop
     vervalt; contact blijft bereikbaar via het telefoon-icoon in de header en de
     CTA's verderop op de pagina. */
  .home-hero-forest-cta .btn-ghost-on-forest { display: none; }
  /* Geen pijl op de knop hier: een pijl naar rechts pal boven de scroll-cue
     naar beneden wees twee kanten op. */
  .home-hero-forest-cta .btn-primary::after { content: none; }
}
@media (max-width: 1000px) and (max-height: 720px) {
  /* Kleine/korte schermen (of taakbalk zichtbaar): titel iets terug + minder
     lucht. Eigen bottom (wint van de mobiele waarde hierboven), ~2/3 daarvan. */
  .home-hero-forest-title { font-size: clamp(32px, 9vw, 44px); }
  .home-hero-forest-inner { bottom: 64px; }
}

/* ── Screenreader-only tekst (a11y-utility):
   visueel verborgen maar voorleesbaar — voor iconografische bedieningselementen
   zoals de overlay-sluitknop. ── */
.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; border: 0 !important; background: transparent !important; transform: none !important; }

/* ── Toetsenbord-focus voor het menu: de verborgen checkbox is het echte
   control (native focusbaar); de ring landt visueel op de hamburger. De
   menu-labels worden door JS focusbaar gemaakt en delen dezelfde ring. ── */
.menu-toggle-checkbox:focus-visible ~ header .hamburger { outline: 2px solid var(--forest); outline-offset: 3px; border-radius: 4px; }
.overlay-nav-item:focus-visible, .overlay-back:focus-visible, .overlay-close-x:focus-visible { outline: 2px solid var(--forest); outline-offset: 3px; }
/* Runtime-knoppen (JS vervangt de menu-labels door echte buttons): neutraliseer
   alleen de UA-buttondefaults; de bestaande klassen leveren de rest. */
button.overlay-nav-item, button.overlay-back { background: none; border: 0; width: 100%; text-align: left; cursor: pointer; }
button.overlay-close-x { border: 0; padding: 0; font: inherit; }

/* ─────────────────────────────────────────────────────────── */
/* HEADER-AUTOHIDE (desktop) */
/* ─────────────────────────────────────────────────────────── */
/* Voorbij ~360px scrolldiepte slidet de header weg bij omlaag scrollen en komt hij
   bij de eerste scroll omhoog terug (is-header-hidden via site.js) — richting-
   gebaseerd zodat het menu nooit een volledige terugscroll vraagt. Section-nav en
   topic-pills schuiven mee naar de bovenrand met dezelfde duur, anders valt er
   een kier tussen header en nav tijdens de slide. */
@media (min-width: 1001px) {
  header { transition: padding 0.3s ease, transform 0.7s ease; }
  html.is-header-hidden header { transform: translateY(-100%); }
  /* Menu open of toetsenbordfocus in de header: site.js haalt de klasse weg,
     zodat óók de section-nav/topic-pills naar hun normale plek terugzakken
     (een puur CSS-transform-guard liet die op top: 0 achter de header staan). */
  .section-nav { transition: top 0.7s ease; }
  .topic-pills { transition: top 0.7s ease, padding 0.3s ease; }
  html.is-header-hidden .section-nav,
  html.is-header-hidden .topic-pills { top: 0; }
}
/* Mobiel dezelfde autohide, iets sneller (0.4s: mobiel scrollen is vluchtiger) —
   verticale ruimte is daar het schaarst. De mobiele header houdt bewust géén
   padding-transitie (vaste maat sinds de mobile-header-config); alleen transform
   animeert. Section-nav/topic-pills (vast op 79px) schuiven mee naar de rand.
   Dit blok moet vóór de reduced-motion-regel blijven staan. */
@media (max-width: 1000px) {
  header { transition: transform 0.4s ease; }
  .header--transparent { transition: padding 0.3s ease, background-color 0.35s ease, border-color 0.35s ease, transform 0.4s ease; }
  html.is-header-hidden header { transform: translateY(-100%); }
  .section-nav, .topic-pills { transition: top 0.4s ease; }
  /* De mobiele header is exact 82px (41px content + 2x20px padding + 1px rand);
     de oude offsets (79px mobiel, 74px tabletband) lieten de nav 3-8px achter
     de header schuiven, zichtbaar sinds de autohide-beweging. */
  .section-nav, .topic-pills,
  html.is-scrolled .section-nav, html.is-scrolled .topic-pills { top: 82px; }
  html.is-header-hidden .section-nav,
  html.is-header-hidden .topic-pills { top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  header, .section-nav, .topic-pills { transition: none; }
}

/* ──────── Afspraak-knop (zwevend, per pagina via Panel) ──────── */
/* Ronde pill + cirkel-avatar zijn een bewuste ontwerp-uitzondering op de
   vierkante-hoeken-regel. Visibility zit in de transition zodat de verborgen
   knop ook uit de tab-volgorde en de accessibility tree valt. */
.afspraak-knop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 180;
  display: flex;
  align-items: center;
  gap: 12px;
  transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s;
}
html.has-afspraak-js .afspraak-knop:not(.is-visible) {
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
}
.afspraak-knop-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center top;
  background: var(--bone);
  box-shadow: 0 4px 16px rgba(28, 27, 23, 0.18);
  flex-shrink: 0;
}
.afspraak-knop-pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 15px 24px;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 6px 24px rgba(28, 27, 23, 0.14);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.afspraak-knop:hover .afspraak-knop-pill,
.afspraak-knop:focus-visible .afspraak-knop-pill {
  border-color: var(--eyebrow);
  transform: translateY(-2px);
}
.afspraak-knop-icon {
  width: 16px;
  height: 16px;
  color: var(--eyebrow);
  flex-shrink: 0;
}
@media (max-width: 760px) {
  /* Gecentreerd via left/right + auto-marges (geen translateX: zou botsen met
     de verschijn-transform) en iets hoger van de rand. */
  .afspraak-knop { left: 0; right: 0; width: max-content; margin: 0 auto; bottom: 28px; gap: 9px; }
  .afspraak-knop-avatar { width: 44px; height: 44px; }
  .afspraak-knop-pill { padding: 12px 18px; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .afspraak-knop, .afspraak-knop-pill { transition: none; }
}

/* ──────── Scroll-hero (homepage, Panel-toggle hero_scroll) ──────── */
/* Sticky beeldvlak in een hoge container. Scrollafstand en framecount horen
   bij elkaar: onder ~12px verschuiving per frame is het glad, daarboven gaat
   het zichtbaar stappen. 250vh past bij de grachtenpand-vlucht (liggend
   5,25s/126 frames = ~10,7px per frame op een 900px-venster; staand
   6,75s/162 frames zit ruimer); niet verhogen zonder langere film. Zonder JS
   of met beperkte beweging: één scherm met de poster, volledig werkend. */
.scroll-hero { position: relative; height: 250vh; }
/* Villa-vlucht (/internationaal): 8s/192 frames vraagt een langere baan.
   350vh ≈ 11,7px per frame op een 900px-venster, net onder de 12px-grens
   uit het recept hierboven; de no-JS- en reduced-motion-regels verderop
   winnen ook van deze modifier. */
.scroll-hero--villa { height: 350vh; }
.scroll-hero-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; background: var(--forest); }
.scroll-hero-stage picture { position: absolute; inset: 0; }
.scroll-hero-poster,
.scroll-hero-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scroll-hero-video { opacity: 0; transition: opacity 0.5s ease; }
.scroll-hero-stage[data-ready] .scroll-hero-video { opacity: 1; }
/* Scrim (zelfde recept als de forest-hero): bovenin licht voor de witte
   header-tekst, onderin donker voor titel en knoppen; bewust robuust over
   wisselende videoframes heen in plaats van afgestemd op een specifiek beeld. */
.scroll-hero-stage::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20,26,22,0.35) 0%, rgba(20,26,22,0.05) 18%, rgba(20,26,22,0.55) 70%, rgba(20,26,22,0.85) 100%); pointer-events: none; z-index: 1; }
.scroll-hero:not([data-enhanced]) { height: 100svh; }
.scroll-hero:not([data-enhanced]) .scroll-hero-video { display: none; }
@media (prefers-reduced-motion: reduce) {
  .scroll-hero { height: 100svh; }
  .scroll-hero-video { display: none; }
}

/* ──── Pers-strip (over-ons: persvermeldingen als forest-band tussen
   Vakmanschap en Reviews; de page-wrap splitst eromheen zoals bij de
   quote-band, dus de band draagt zijn eigen lucht) ──── */
.pers-strip { background: var(--forest); padding: clamp(64px, 8vw, 96px) 48px; text-align: center; }
.pers-strip-eyebrow { display: inline-flex; align-items: center; gap: 16px; font-size: 12px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255,255,255,0.65); margin-bottom: 26px; }
.pers-strip-eyebrow::before, .pers-strip-eyebrow::after { content: ''; width: 28px; height: 1px; background: rgba(255,255,255,0.35); }
.pers-strip-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 14px 48px; }
.pers-strip-list a { font-family: 'Playfair Display', serif; font-style: italic; font-weight: 400; font-size: clamp(26px, 3vw, 38px); line-height: 1.2; color: var(--sand); border-bottom: 1px solid rgba(255,255,255,0.28); padding-bottom: 5px; transition: color 0.25s ease, border-color 0.25s ease; }
.pers-strip-list a:hover { color: #fff; border-bottom-color: var(--sand); }
@media (max-width: 760px) {
  .pers-strip { padding: 56px 24px; }
}

/* ──── Club-hero linksonder-variant (werken-bij, wens Joshua 30-8): het
   homepage-hero-recept in de club-hero — tekst linksonder, scroll-cue
   rechtsonder, homepage-scrim voor leesbaarheid onderin. Op mobiel zakt de
   cue terug naar het midden als woordloos streepje (zelfde afweging als op
   home: het woord las als label bij de knop erboven). ──── */
.club-hero--links { display: block; text-align: left; }
.club-hero--links::after { background: linear-gradient(180deg, rgba(20,26,22,0.35) 0%, rgba(20,26,22,0.05) 18%, rgba(20,26,22,0.55) 70%, rgba(20,26,22,0.85) 100%); }
.club-hero--links .club-hero-inner { position: absolute; bottom: 80px; left: 48px; right: 48px; max-width: 720px; padding: 0; }
.club-hero--links .club-hero-lede { margin-left: 0; margin-right: 0; }
.club-hero--links .club-scroll-cue { left: auto; right: 48px; transform: none; bottom: 66px; }
@media (max-width: 1000px) {
  .club-hero--links .club-hero-inner { left: 24px; right: 24px; bottom: 72px; }
  .club-hero--links .club-scroll-cue { left: 50%; right: auto; transform: translateX(-50%); bottom: 12px; font-size: 0; padding: 8px 20px; }
  .club-hero--links .club-scroll-cue::before { margin-bottom: 0; width: 2px; height: 34px; border-radius: 1px; background: linear-gradient(to bottom, rgba(255,255,255,0.98), rgba(255,255,255,0.4)); box-shadow: 0 0 8px rgba(15, 20, 16, 0.35); }
}