/**
 * Tandartspraktijk Biemans — thema-stijlen
 *
 * Ontwerpuitgangspunt: "rust".
 * Veel mensen zien op tegen een bezoek aan de tandarts. De pagina moet daarom
 * kalmeren, niet schreeuwen: één kleur die iets betekent, veel wit, en een
 * warme serif die de praktijk menselijk maakt in plaats van klinisch.
 *
 * Kleur draagt betekenis:
 *   teal  = de praktijk zelf en alles wat je kunt aanklikken
 *   amber = uitsluitend spoed
 *   verder alleen inkt, papier en mint.
 *
 * @package Tandarts
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

:root {
    /* Merkkleuren — blijven overschrijfbaar via Praktijk > Instellingen (ACF) */
    --tandarts-primary: #0E7C86;   /* teal: praktijk + actie */
    --tandarts-secondary: #0A5C64; /* dieper teal: hover / diepte */
    --tandarts-accent: #C97B1F;    /* amber: uitsluitend spoed */
    --tandarts-dark: #14262A;      /* inkt */
    --tandarts-light: #EAF3F2;     /* mint wassing */

    /* Afgeleide vlakken */
    --t-paper: #FBFAF8;
    --t-surface: #FFFFFF;
    --t-mint: var(--tandarts-light);
    --t-mint-line: #D3E4E2;
    --t-teal: var(--tandarts-primary);
    --t-teal-deep: var(--tandarts-secondary);
    --t-teal-wash: rgba(14, 124, 134, 0.07);
    --t-ink: var(--tandarts-dark);
    --t-body: #4A5C60;
    --t-muted: #7B8C90;
    --t-line: #E4E7E5;
    --t-amber: var(--tandarts-accent);
    --t-amber-wash: #FBF1E4;

    /* Typografie */
    --t-display: 'Space Grotesk', 'Space Grotesk Fallback', Arial, sans-serif;
    --t-sans: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Vloeiende typeschaal */
    --t-xs: clamp(0.78rem, 0.76rem + 0.10vw, 0.83rem);
    --t-sm: clamp(0.875rem, 0.85rem + 0.13vw, 0.94rem);
    --t-base: clamp(1rem, 0.97rem + 0.16vw, 1.075rem);
    --t-lead: clamp(1.09rem, 1.03rem + 0.30vw, 1.24rem);
    --t-h4: clamp(1.12rem, 1.06rem + 0.28vw, 1.28rem);
    --t-h3: clamp(1.28rem, 1.18rem + 0.45vw, 1.55rem);
    --t-h2: clamp(1.85rem, 1.45rem + 1.75vw, 2.85rem);
    --t-h1: clamp(2.15rem, 1.55rem + 2.6vw, 3.5rem);
    --t-quote: clamp(1.55rem, 1.1rem + 2.1vw, 2.6rem);

    /* Ritme */
    --t-section: clamp(4rem, 8vw, 7rem);
    --t-section-tight: clamp(2.75rem, 5vw, 4.25rem);

    /* Vorm */
    --t-radius-sm: 8px;
    --t-radius: 14px;
    --t-radius-lg: 22px;

    /* Diepte — zacht en gelaagd, nooit hard */
    --t-shadow-sm: 0 1px 2px rgba(20, 38, 42, 0.04), 0 2px 8px rgba(20, 38, 42, 0.04);
    --t-shadow: 0 2px 4px rgba(20, 38, 42, 0.03), 0 10px 30px rgba(20, 38, 42, 0.07);
    --t-shadow-lg: 0 4px 10px rgba(20, 38, 42, 0.04), 0 24px 60px rgba(20, 38, 42, 0.10);

    --t-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
    --t-ease-out: cubic-bezier(0.16, 1, 0.3, 1); /* expo-uit: snel vertrekken, zacht landen */
}

/* Legacy alias — oude templates gebruiken deze nog */
:root {
    --tandarts-yellow: var(--t-amber);
    --tandarts-radius: var(--t-radius-sm);
    --tandarts-radius-lg: var(--t-radius);
    --tandarts-radius-xl: var(--t-radius-lg);
    --tandarts-transition: all 0.3s var(--t-ease);
}

/* ==========================================================================
   2. Basis
   ========================================================================== */

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

html { scroll-behavior: smooth; }

body {
    font-family: var(--t-sans);
    font-size: var(--t-base);
    font-weight: 400;
    line-height: 1.65;
    color: var(--t-body);
    background-color: var(--t-paper);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* 'clip' in plaats van 'hidden': hidden maakt van het element een scroll-container
   en breekt daarmee position:sticky op de header. */
html {
    overflow-x: clip;
}

/* Koppen: Space Grotesk voor de grote stemmen (h1 t/m h3). De rest blijft sans,
   zo blijft de serif een accent en geen behang. */
h1, .h1,
h2, .h2,
h3, .h3 {
    font-family: var(--t-display);
    font-weight: 600;
    font-variation-settings: 'wght' 600;
    line-height: 1.14;
    letter-spacing: -0.015em;
    color: var(--t-ink);
}

h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
    font-family: var(--t-sans);
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: -0.01em;
    color: var(--t-ink);
}

h1, .h1 { font-size: var(--t-h1); }
h2, .h2 { font-size: var(--t-h2); }
h3, .h3 { font-size: var(--t-h3); }
h4, .h4 { font-size: var(--t-h4); }

p { margin-bottom: 1.15rem; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--t-teal);
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
    transition: color 0.25s var(--t-ease);
}

a:hover { color: var(--t-teal-deep); }

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

::selection {
    background-color: var(--t-teal);
    color: #fff;
}

/* Zichtbare focus voor toetsenbordgebruikers */
:focus-visible {
    outline: 3px solid var(--t-teal);
    outline-offset: 3px;
    border-radius: 3px;
}

/* Bootstrap overschrijven waar het te hard is */
.text-muted { color: var(--t-muted) !important; }
.lead {
    font-size: var(--t-lead);
    font-weight: 400;
    line-height: 1.6;
}
.bg-light { background-color: var(--t-mint) !important; }

/* ==========================================================================
   3. Sectieritme & structuur
   ========================================================================== */

.section { padding: var(--t-section) 0; }
.section--tight { padding: var(--t-section-tight) 0; }
.section--wash { background-color: var(--t-mint); }
.section--paper { background-color: var(--t-paper); }
.section--surface { background-color: var(--t-surface); }

/* Sectiekop: hairline + label. Het label benoemt wat er staat, het versiert niet. */
.section-head { margin-bottom: clamp(2.25rem, 4vw, 3.5rem); }

.section-head__eyebrow {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-teal);
    margin-bottom: 1rem;
}


.section-head__title {
    font-size: clamp(2rem, 1.45rem + 2.4vw, 3.4rem);
    line-height: 1.08;
    letter-spacing: -0.012em;
    margin-bottom: 0.85rem;
}

.section-head__intro {
    font-size: var(--t-lead);
    color: var(--t-muted);
    max-width: 46ch;
    margin-bottom: 0;
}

.section-head--center {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.section-head--center .section-head__intro { max-width: 52ch; }

/* --------------------------------------------------------------------------
   Scroll-onthulling
   Eén bewegingstaal voor de hele site: alles stijgt rustig op, altijd met
   dezelfde curve. De verborgen begintoestanden staan achter html.js — zonder
   JavaScript is alle inhoud dus gewoon direct zichtbaar.
   -------------------------------------------------------------------------- */
.reveal {
    transition: opacity 0.9s var(--t-ease-out), transform 0.9s var(--t-ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
}
.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Beeld-gordijn: de omlijsting opent terwijl de foto zelf iets terugzoomt.
   Het klassieke "dure" reveal-effect — en het kost niets: alleen clip-path
   en transform, allebei composietvriendelijk. */
.js .media-reveal {
    clip-path: inset(9% 6% 9% 6%);
    transition: clip-path 1.1s var(--t-ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.js .media-reveal img {
    scale: 1.12;
    transition: scale 1.4s var(--t-ease-out);
    transition-delay: var(--reveal-delay, 0ms);
}
.js .media-reveal.is-visible { clip-path: inset(0 0 0 0); }
.js .media-reveal.is-visible img { scale: 1; }

/* Micro-parallax in de figuren: elke foto schuift een fractie trager mee dan
   de pagina. De translate staat los van de scale van de onthulling, dus de
   twee bewegingen stapelen zonder elkaar te storen. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        /* De tijdlijn hangt aan de figuur (met een naam), niet aan de img
           zelf: een view()-tijdlijn op een vervangen element blijkt in de
           praktijk stil te blijven staan. */
        .js .media-reveal:not(.gallery__item) {
            view-timeline: --figuur block;
        }

        .js .media-reveal:not(.gallery__item) img {
            animation: fig-plx linear both;
            animation-timeline: --figuur;
            animation-range: cover 0% cover 100%;
        }

        .js .media-reveal:not(.gallery__item).is-visible img { scale: 1.1; }
    }
}

@keyframes fig-plx {
    from { translate: 0 -3.5%; }
    to   { translate: 0 3.5%; }
}

/* Sectiekoppen: het streepje van het bovenschrift tekent zichzelf, daarna
   stijgen kop en intro er kort achteraan. Elk element wordt afzonderlijk
   waargenomen, dus dit werkt in elke opmaakvariant. */
.js .section-head__eyebrow {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.6s var(--t-ease-out), transform 0.6s var(--t-ease-out);
}
.js .section-head__eyebrow.is-visible { opacity: 1; transform: none; }

.js .section-head__title {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.85s var(--t-ease-out) 0.08s, transform 0.85s var(--t-ease-out) 0.08s;
}
.js .section-head__title.is-visible { opacity: 1; transform: none; }

.js .section-head__intro {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.85s var(--t-ease-out) 0.18s, transform 0.85s var(--t-ease-out) 0.18s;
}
.js .section-head__intro.is-visible { opacity: 1; transform: none; }

/* ==========================================================================
   4. Knoppen
   ========================================================================== */

.btn {
    font-family: var(--t-sans);
    font-weight: 500;
    font-size: var(--t-sm);
    letter-spacing: 0.01em;
    border-radius: 999px;
    padding: 0.72rem 1.55rem;
    transition: background-color 0.25s var(--t-ease), border-color 0.25s var(--t-ease),
                color 0.25s var(--t-ease), transform 0.25s var(--t-ease), box-shadow 0.25s var(--t-ease);
}

.btn-lg {
    font-size: var(--t-base);
    padding: 0.95rem 2.1rem;
}

.btn-primary,
.btn-light {
    position: relative;
    overflow: hidden; /* voor de glans-veeg */
}

/* Eén lichtveeg over de knop bij hover — subtiel, maar het maakt de knop
   tastbaar. Puur decoratief, dus pointer-events uit. */
.btn-primary::before,
.btn-light::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: translateX(-140%);
    transition: transform 0.7s var(--t-ease);
    pointer-events: none;
}
.btn-primary::before {
    background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.28) 50%, transparent 65%);
}
.btn-light::before {
    background: linear-gradient(105deg, transparent 35%, rgba(14, 124, 134, 0.14) 50%, transparent 65%);
}
.btn-primary:hover::before,
.btn-light:hover::before { transform: translateX(140%); }

.btn-primary {
    background-color: var(--t-teal);
    border-color: var(--t-teal);
    color: #fff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
    background-color: var(--t-teal-deep) !important;
    border-color: var(--t-teal-deep) !important;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(14, 124, 134, 0.25);
}

.btn-outline-primary {
    color: var(--t-teal);
    border-color: rgba(14, 124, 134, 0.35);
    background-color: transparent;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background-color: var(--t-teal);
    border-color: var(--t-teal);
    color: #fff;
}

.btn-light {
    background-color: #fff;
    border-color: #fff;
    color: var(--t-teal-deep);
}
.btn-light:hover {
    background-color: var(--t-mint);
    border-color: var(--t-mint);
    color: var(--t-teal-deep);
    transform: translateY(-2px);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.55);
    color: #fff;
}
.btn-outline-light:hover {
    background-color: #fff;
    border-color: #fff;
    color: var(--t-ink);
}

/* Tekstlink met pijl — voor "lees verder"-momenten */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-weight: 500;
    text-decoration: none;
}
/* Typografische pijl (geen icoonfont): schuift een tikje mee bij hover. */
.pijl {
    display: inline-block;
    transition: transform 0.3s var(--t-ease);
}
.link-arrow:hover .pijl,
.link-arrow:focus-visible .pijl,
.btn:hover .pijl,
a:hover > .pijl { transform: translateX(4px); }
a:hover .pijl--terug,
.pijl--terug:hover { transform: translateX(-4px); }

/* ==========================================================================
   5. Header & navigatie
   ========================================================================== */

.top-bar {
    background-color: var(--t-ink) !important;
    font-size: var(--t-xs);
    letter-spacing: 0.01em;
}
.top-bar a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.top-bar a:hover { color: #fff; }
.top-bar span { color: #fff; }

/* Spoednummer is het enige dat amber mag zijn */
.top-bar__spoed {
    color: #F0C078 !important;
    font-weight: 500;
}
.top-bar__spoed:hover { color: #FFD9A0 !important; }

.site-header {
    z-index: 1030;
    background-color: rgba(255, 255, 255, 0.9);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--t-line);
    transition: transform 0.5s var(--t-ease), box-shadow 0.3s var(--t-ease),
                background-color 0.3s var(--t-ease);
}

/* Verstopt zich bij omlaag scrollen, verschijnt direct bij omhoog scrollen:
   meer ruimte voor de inhoud, navigatie altijd maar één veegje weg. */
.site-header.is-hidden {
    transform: translateY(-102%);
    box-shadow: none;
}

/* Toetsenbordgebruikers raken de header nooit kwijt. */
.site-header:focus-within { transform: none; }

/* Leesvoortgang: een haarlijn die bovenin met u meescrolt. Waar de browser
   scroll-timelines kent draait dit volledig buiten JavaScript om. */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    z-index: 1045;
    background: linear-gradient(90deg, var(--t-teal), #6FC6CE);
    transform: scaleX(0);
    transform-origin: 0 50%;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
        .scroll-progress {
            animation: progress-grow linear both;
            animation-timeline: scroll(root);
        }
    }
}

@keyframes progress-grow {
    to { transform: scaleX(1); }
}

.site-header.is-stuck {
    box-shadow: 0 1px 24px rgba(20, 38, 42, 0.07);
    background-color: rgba(255, 255, 255, 0.96);
}

.site-header .navbar { padding-top: 0.9rem; padding-bottom: 0.9rem; }

.site-header .nav-link {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--t-ink);
    padding: 0.5rem 0.9rem !important;
    position: relative;
}

.site-header .nav-link::after {
    content: '';
    position: absolute;
    left: 0.9rem;
    right: 0.9rem;
    bottom: 0.15rem;
    height: 1.5px;
    background-color: var(--t-teal);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s var(--t-ease);
}

.site-header .nav-link:hover,
.site-header .nav-link.active { color: var(--t-teal); }

.site-header .nav-link:hover::after,
.site-header .nav-link.active::after { transform: scaleX(1); }

.site-header .dropdown-menu {
    border: 1px solid var(--t-line);
    box-shadow: var(--t-shadow);
    border-radius: var(--t-radius);
    padding: 0.5rem;
    margin-top: 0.5rem;
}
.site-header .dropdown-item {
    border-radius: var(--t-radius-sm);
    padding: 0.55rem 0.9rem;
    font-size: var(--t-sm);
    color: var(--t-body);
}
.site-header .dropdown-item:hover,
.site-header .dropdown-item:focus {
    background-color: var(--t-mint);
    color: var(--t-teal-deep);
}

/* Vast kader: de gereserveerde ruimte is altijd gelijk aan de getoonde ruimte,
   wat het logobestand ook is. Zonder dit springt de navigatie opzij zodra de
   afbeelding binnenkomt (layout shift). */
.logo-img {
    width: 180px;
    height: 52px;
    object-fit: contain;
    object-position: left center;
    display: block;
}

.navbar-toggler { padding: 0.35rem 0.5rem; }
.navbar-toggler:focus { box-shadow: none; }

.offcanvas { background-color: var(--t-paper); }
.offcanvas .nav-link {
    padding: 0.85rem 0 !important;
    border-bottom: 1px solid var(--t-line);
    font-size: var(--t-base);
}
.offcanvas .nav-link::after { display: none; }

/* ==========================================================================
   6. Hero
   ========================================================================== */

.hero {
    position: relative;
    isolation: isolate;
    background-color: var(--t-ink);
    overflow: clip; /* de parallax-laag steekt buiten de sectie */
}

.hero__media {
    position: absolute;
    inset: 0;
    z-index: -2;
}

.hero__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 40%;
}

/* Gerichte sluier: donker waar de tekst staat, transparant waar de foto mag ademen.
   Geen egale grijze waas over de hele foto. */
.hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(100deg,
            rgba(10, 27, 31, 0.92) 0%,
            rgba(10, 27, 31, 0.80) 34%,
            rgba(10, 27, 31, 0.42) 62%,
            rgba(10, 27, 31, 0.20) 100%),
        linear-gradient(180deg,
            rgba(10, 27, 31, 0.35) 0%,
            rgba(10, 27, 31, 0) 45%);
}

.hero__inner {
    position: relative;
    min-height: min(62vh, 640px);
    display: flex;
    align-items: center;
    padding: clamp(3.25rem, 6.5vw, 5.25rem) 0;
}

.hero__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
}

/* Het zetwerk draagt de pagina: de titel mag echt groot. */
.hero__title {
    color: #fff;
    font-size: clamp(2.7rem, 1.7rem + 4.6vw, 5.4rem);
    line-height: 1.04;
    letter-spacing: -0.015em;
    margin-bottom: 1.15rem;
    max-width: 16ch;
    text-shadow: 0 1px 30px rgba(0, 0, 0, 0.25);
}

.page-hero__title {
    font-size: clamp(2.3rem, 1.6rem + 3.2vw, 4.1rem);
    line-height: 1.06;
    letter-spacing: -0.012em;
}

.hero__text {
    color: rgba(255, 255, 255, 0.88);
    font-size: var(--t-lead);
    max-width: 52ch;
    margin-bottom: 1.85rem;
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
}

/* --------------------------------------------------------------------------
   Hero-choreografie
   Bij binnenkomst stijgen bovenschrift, kop, tekst en knoppen kort na elkaar
   op — één gebaar, binnen een seconde afgerond, zodat het LCP-element (de
   foto) nergens op hoeft te wachten. De foto zelf zoomt tergend langzaam
   (Ken Burns) en schuift bij het scrollen trager mee dan de voorgrond.
   De parallax is pure CSS via scroll-timelines; browsers zonder
   ondersteuning krijgen gewoon een stilstaand beeld.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: no-preference) {
    .hero__text,
    .hero__actions {
        animation: rise-in 0.9s var(--t-ease-out) both;
    }
    .hero__text    { animation-delay: 0.38s; }
    .hero__actions { animation-delay: 0.52s; }

    /* De hero-foto opent als een filmscherm: van een brede band naar volledig
       beeld. De foto zelf staat er vanaf frame één (goed voor LCP); alleen de
       maskering beweegt. */
    .hero__media,
    .page-hero__media {
        animation: hero-letterbox 1.1s var(--t-ease-out) both;
    }

    .hero__media img,
    .page-hero__media img {
        animation: kenburns 26s var(--t-ease) both;
    }
}

@keyframes rise-in {
    from {
        opacity: 0;
        transform: translateY(26px);
    }
}

@keyframes hero-letterbox {
    from { clip-path: inset(17% 0 17% 0); }
    to   { clip-path: inset(0 0 0 0); }
}

/* --------------------------------------------------------------------------
   Woord-voor-woord titels
   De grote koppen worden op de server in woord-maskers gesplitst
   (tandarts_woorden() in functions.php): elk woord stijgt in zijn eigen
   venster op. Puur CSS, dus geen flits en geen JavaScript-afhankelijkheid;
   bij verminderde beweging staan de woorden er meteen.
   -------------------------------------------------------------------------- */
.hw {
    display: inline-block;
    overflow: clip;
    vertical-align: bottom;
    padding: 0.1em 0 0.16em;
    margin: -0.1em 0 -0.16em;
}

.hw__i { display: inline-block; }

.hero__title { --hw-basis: 0.14s; }
.page-hero__title { --hw-basis: 0.08s; }

@media (prefers-reduced-motion: no-preference) {
    .hw__i {
        animation: word-rise 0.85s var(--t-ease-out) both;
        animation-delay: calc(var(--hw-basis, 0.1s) + var(--wi, 0) * 0.055s);
    }
}

@keyframes word-rise {
    from { transform: translateY(118%); }
}

@keyframes kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.1); }
}

/* Scroll-hint: een dunne lijn die zachtjes naar beneden wijst. */
.hero__scrollhint {
    position: absolute;
    left: 50%;
    bottom: 1.5rem;
    transform: translateX(-50%);
    width: 44px;
    height: 52px;
    display: none;
    justify-content: center;
    overflow: hidden;
    color: rgba(255, 255, 255, 0.85);
}

@media (min-width: 992px) {
    .hero__scrollhint { display: flex; }
}

.hero__scrollhint::before {
    content: '';
    width: 1px;
    height: 36px;
    background: linear-gradient(180deg, currentColor, transparent);
}

.hero__scrollhint:hover { color: #fff; }

@media (prefers-reduced-motion: no-preference) {
    .hero__scrollhint { animation: rise-in 0.9s var(--t-ease-out) 0.9s both; }
    .hero__scrollhint::before { animation: hint-drop 2.6s var(--t-ease) infinite; }
}

@keyframes hint-drop {
    0%   { transform: translateY(-40px); }
    55%  { transform: translateY(0); }
    100% { transform: translateY(56px); }
}

/* Fijne filmkorrel op de donkere vlakken: onmeetbaar subtiel, maar het haalt
   de gladde 'render'-look eraf. Puur decoratief, dus pointer-events uit. */
.hero::after,
.page-hero::after,
.enroll::after,
.rustmoment::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: 0.055;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size: 160px 160px;
}

/* Parallax: terwijl de hero het beeld uit scrolt, beweegt de foto langzamer
   mee dan de voorgrond. De laag is aan de bovenkant verlengd zodat er nooit
   een rand in beeld komt. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .hero__media,
        .page-hero__media {
            inset: -18% 0 0 0;
            animation: hero-letterbox 1.1s var(--t-ease-out) both,
                       plx-exit linear both;
            animation-timeline: auto, view();
            animation-range: normal, exit 0% exit 100%;
        }

        /* De voorgrond vertrekt trager dan de pagina en lost op: de hero
           neemt afscheid in plaats van simpelweg uit beeld te schuiven. */
        .hero__inner {
            animation: hero-inner-exit linear both;
            animation-timeline: view();
            animation-range: exit 0% exit 85%;
        }

        .hero__scrollhint {
            animation: rise-in 0.9s var(--t-ease-out) 0.9s both,
                       hint-fade linear both;
            animation-timeline: auto, view();
            animation-range: normal, exit 0% exit 18%;
        }
    }
}

@keyframes hero-inner-exit {
    to {
        transform: translateY(90px);
        opacity: 0;
    }
}

@keyframes hint-fade {
    to { opacity: 0; }
}

@keyframes plx-exit {
    to { transform: translateY(15%); }
}

/* ==========================================================================
   7. USP-balk
   ========================================================================== */

.usps {
    background-color: var(--t-ink);
    color: #fff;
    padding: 1.35rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.usp {
    display: block;
    text-align: center;
    font-size: var(--t-sm);
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
}

@media (min-width: 768px) {
    .usps [class*="col-"] + [class*="col-"] .usp {
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
}


/* ==========================================================================
   8. Over ons
   ========================================================================== */

.about__figure {
    position: relative;
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    box-shadow: var(--t-shadow);
}

.about__figure img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
}

/* Eén feitje, geen versiering: hoelang deze praktijk er al is. */
.about__since {
    position: absolute;
    left: 0;
    bottom: 0;
    background-color: var(--t-surface);
    padding: 1.1rem 1.5rem 1.1rem 1.35rem;
    border-top-right-radius: var(--t-radius);
    border-left: 3px solid var(--t-teal);
}

.about__since-value {
    font-family: var(--t-display);
    font-size: 1.85rem;
    font-weight: 600;
    line-height: 1;
    color: var(--t-ink);
}

.about__since-label {
    font-size: var(--t-xs);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--t-muted);
    margin-top: 0.3rem;
}

.about__list {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: grid;
    gap: 0.85rem;
}

.about__list li {
    padding-bottom: 0.85rem;
    border-bottom: 1px solid var(--t-line);
}

.about__list li:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}



/* ==========================================================================
   9. Behandelingen
   ========================================================================== */

/* Redactionele opzet: een genummerde kolom boven een haarlijn, geen kaartje
   met een pictogram erin. Bij hover kleurt de haarlijn van links naar rechts
   teal in. */
.treatment {
    height: 100%;
    position: relative;
    padding: 1.6rem 0 0;
    border-top: 1px solid var(--t-line);
}

.treatment::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 34px;
    background-color: var(--t-teal);
    transition: width 0.5s var(--t-ease-out);
}

.treatment:hover::after { width: 100%; }


.treatment__title { transition: color 0.3s var(--t-ease); }
.treatment:hover .treatment__title { color: var(--t-teal); }




.treatment__title { margin-bottom: 0.5rem; }

.treatment p {
    font-size: var(--t-sm);
    color: var(--t-muted);
    margin-bottom: 0;
}

/* ==========================================================================
   10. Fotogalerij
   ========================================================================== */

.gallery {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
}

.gallery__item {
    position: relative;
    overflow: hidden;
    border-radius: var(--t-radius-sm);
    background-color: var(--t-mint);
}

/* Eerste beeld krijgt gewicht: het is de praktijk zelf, geen decor. */
.gallery__item--wide {
    grid-column: span 2;
    grid-row: span 2;
}

.gallery__item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    aspect-ratio: 4 / 3;
    transition: transform 0.7s var(--t-ease);
}

.gallery__item--wide img { aspect-ratio: 1 / 1; }

.gallery__item:hover img { transform: scale(1.04); }

/* ==========================================================================
   11. Rustmoment  — het signatuurelement
   Eén sectie op de pagina die niets van je vraagt. Geen knop, geen kaart,
   geen icoon. Alleen wat de praktijk belooft, met lucht eromheen.
   ========================================================================== */

/* Een donker, filmisch tussenspel: het enige inktvlak midden op de pagina.
   Dat geeft het ritme dat twee lichte vlakken naast elkaar misten, en maakt
   van de belofte een moment in plaats van een sectie. */
.rustmoment {
    position: relative;
    background:
        radial-gradient(1100px 520px at 50% 12%, rgba(14, 124, 134, 0.32), transparent 62%),
        var(--t-ink);
    padding: clamp(4.5rem, 9vw, 7.5rem) 0;
    text-align: center;
}

.rustmoment__mark {
    display: block;
    width: 1px;
    height: clamp(40px, 6vw, 64px);
    margin: 0 auto clamp(2rem, 4vw, 3rem);
    background: linear-gradient(180deg, transparent, #6FC6CE);
}

.rustmoment__quote {
    font-family: var(--t-display);
    font-size: var(--t-quote);
    font-weight: 400;
    font-variation-settings: 'wght' 400;
    line-height: 1.35;
    letter-spacing: -0.015em;
    color: var(--t-paper);
    max-width: 22ch;
    margin: 0 auto;
    text-wrap: balance;
}

.rustmoment__quote em {
    font-style: normal;
    color: #6FC6CE;
}

.rustmoment__attrib {
    margin-top: clamp(1.75rem, 3vw, 2.5rem);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.55);
}

/* De stilste sectie krijgt de meest verzorgde beweging van de site: de lijn
   tekent zichzelf van boven naar beneden, daarna stijgt het citaat woord voor
   woord op. De woorden worden door JavaScript in maskers gewikkeld — zonder
   JavaScript staat de zin er gewoon. */
.rustmoment__mark { transform-origin: top center; }
.js .rustmoment__mark {
    transform: scaleY(0);
    transition: transform 1.1s var(--t-ease-out) 0.1s;
}
.js .rustmoment.is-visible .rustmoment__mark { transform: none; }

.rw {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    /* clipruimte oprekken zodat stokken en staarten niet worden afgeknipt */
    padding: 0.1em 0 0.14em;
    margin: -0.1em 0 -0.14em;
}
.rw > span {
    display: inline-block;
    transform: translateY(120%);
    transition: transform 0.75s var(--t-ease-out);
}
.rustmoment.is-visible .rw > span { transform: none; }

.rustmoment--split .rustmoment__attrib {
    opacity: 0;
    transition: opacity 0.9s var(--t-ease);
}
.rustmoment--split.is-visible .rustmoment__attrib { opacity: 1; }

/* ==========================================================================
   12. Team
   ========================================================================== */

.member { text-align: center; }

.member__photo {
    position: relative;
    width: 100%;
    max-width: 170px;
    margin: 0 auto 1.1rem;
    border-radius: 50%;
    overflow: hidden;
    background-color: var(--t-mint);
}

.member__photo img {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: block;
    filter: saturate(0.85);
    transition: transform 0.6s var(--t-ease), filter 0.6s var(--t-ease);
}

.member:hover .member__photo img {
    transform: scale(1.05);
    filter: saturate(1);
}

.member__name {
    font-size: var(--t-base);
    font-weight: 600;
    color: var(--t-ink);
    margin-bottom: 0.15rem;
}

.member__role {
    font-size: var(--t-sm);
    color: var(--t-muted);
    margin-bottom: 0;
}

/* Assistentes: platte lijst, geen gekleurde pillen */
.assistants {
    margin-top: clamp(3rem, 6vw, 4.5rem);
    padding-top: clamp(2rem, 4vw, 3rem);
    border-top: 1px solid var(--t-line);
    text-align: center;
}

.assistants__label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-muted);
    margin-bottom: 1.25rem;
}

.assistants__list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.6rem 1.5rem;
}

.assistants__list li {
    font-size: var(--t-base);
    color: var(--t-ink);
    position: relative;
}

.assistants__list li:not(:last-child)::after {
    content: '';
    position: absolute;
    right: -0.8rem;
    top: 50%;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background-color: var(--t-mint-line);
    transform: translateY(-50%);
}

/* ==========================================================================
   13. Ervaringen
   ========================================================================== */

/* Een ervaring is een citaat, geen beoordelingskaart: groot serif
   aanhalingsteken, de tekst in de Space Grotesk, naam eronder. */
.review {
    height: 100%;
    position: relative;
    padding: 2.5rem 0 0;
    display: flex;
    flex-direction: column;
}

.review::before {
    content: '\201C';
    position: absolute;
    top: -0.5rem;
    left: -0.12rem;
    font-family: var(--t-display);
    font-size: 3.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--t-teal);
}


.review__text {
    font-family: var(--t-display);
    font-weight: 500;
    font-variation-settings: 'wght' 500;
    font-size: 1.12rem;
    line-height: 1.55;
    letter-spacing: -0.005em;
    color: var(--t-ink);
    flex-grow: 1;
    margin-bottom: 1.1rem;
}

.review__author {
    display: block;
    padding-top: 0.9rem;
    border-top: 1px solid var(--t-line);
}


.review__name {
    display: block;
    font-weight: 600;
    font-size: var(--t-sm);
    color: var(--t-ink);
    line-height: 1.3;
}

.review__meta {
    font-size: var(--t-xs);
    color: var(--t-muted);
}

/* ==========================================================================
   14. Inschrijven (CTA)
   ========================================================================== */

.enroll {
    position: relative;
    isolation: isolate;
    background-color: var(--t-ink);
    padding: clamp(4rem, 8vw, 6.5rem) 0;
    text-align: center;
    overflow: clip; /* de parallax-laag steekt boven en onder uit */
}

/* De foto-band beweegt trager dan de pagina: diepte zonder JavaScript. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .enroll__media {
            inset: -12% 0;
            animation: plx-band linear both;
            animation-timeline: view();
            animation-range: cover 0% cover 100%;
        }
    }
}

@keyframes plx-band {
    from { transform: translateY(-7%); }
    to   { transform: translateY(7%); }
}

.enroll__media { position: absolute; inset: 0; z-index: -2; }

.enroll__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.enroll__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(160deg,
        rgba(10, 27, 31, 0.93) 0%,
        rgba(14, 124, 134, 0.82) 100%);
}

.enroll__title {
    color: #fff;
    margin-bottom: 1rem;
    max-width: 20ch;
    margin-inline: auto;
}

.enroll__text {
    color: rgba(255, 255, 255, 0.86);
    font-size: var(--t-lead);
    max-width: 50ch;
    margin: 0 auto 2rem;
}

/* ==========================================================================
   15. Contactkaarten
   ========================================================================== */

.contact-card {
    height: 100%;
    padding: 1.35rem 0 0;
    border-top: 1px solid var(--t-line);
}

.contact-card:hover {
    transform: translateY(-3px);
    border-color: transparent;
    box-shadow: var(--t-shadow);
}


.contact-card__label {
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--t-muted);
    margin-bottom: 0.5rem;
}

.contact-card__value {
    font-size: var(--t-base);
    font-weight: 500;
    color: var(--t-ink);
    font-style: normal;
    margin-bottom: 0;
    text-decoration: none;
    display: block;
}

a.contact-card__value:hover { color: var(--t-teal); }

.contact-card__note {
    font-size: var(--t-sm);
    color: var(--t-muted);
    margin: 0.45rem 0 0;
}

/* Spoed is de enige uitzondering: die mag opvallen. */
.contact-card--spoed { border-top: 2px solid var(--t-amber); }
.contact-card--spoed .contact-card__label { color: var(--t-amber); }
.contact-card--spoed .contact-card__icon {
    background-color: rgba(201, 123, 31, 0.12);
    color: var(--t-amber);
}
.contact-card--spoed:hover { box-shadow: 0 10px 30px rgba(201, 123, 31, 0.12); }

/* ==========================================================================
   16. Formulieren
   ========================================================================== */

.form-label {
    font-size: var(--t-sm);
    font-weight: 500;
    color: var(--t-ink);
    margin-bottom: 0.4rem;
}

.form-control,
.form-select {
    font-size: var(--t-base);
    padding: 0.75rem 1rem;
    border: 1px solid var(--t-line);
    border-radius: var(--t-radius-sm);
    background-color: var(--t-surface);
    color: var(--t-ink);
    transition: border-color 0.25s var(--t-ease), box-shadow 0.25s var(--t-ease);
}

.form-control:focus,
.form-select:focus {
    border-color: var(--t-teal);
    box-shadow: 0 0 0 4px var(--t-teal-wash);
    outline: none;
}

.form-control::placeholder { color: #A9B5B8; }

/* ==========================================================================
   17. FAQ
   ========================================================================== */

.accordion-item {
    border: none;
    border-bottom: 1px solid var(--t-line);
    background-color: transparent;
}

.accordion-button {
    font-family: var(--t-sans);
    font-size: var(--t-h4);
    font-weight: 600;
    color: var(--t-ink);
    background-color: transparent;
    padding: 1.35rem 0;
    box-shadow: none;
}

.accordion-button:not(.collapsed) {
    color: var(--t-teal);
    background-color: transparent;
    box-shadow: none;
}

.accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}

.accordion-button::after {
    background-image: none;
    content: '\2b';
    font-family: var(--t-sans);
    font-size: 1.4rem;
    font-weight: 300;
    line-height: 1;
    color: var(--t-teal);
    width: auto;
    height: auto;
    transition: transform 0.3s var(--t-ease);
}

.accordion-button:not(.collapsed)::after {
    content: '\2212';
    transform: none;
}

.accordion-body {
    padding: 0 0 1.5rem;
    color: var(--t-body);
}

/* ==========================================================================
   18. Kruimelpad
   ========================================================================== */

.breadcrumb {
    font-size: var(--t-sm);
    margin-bottom: 0;
}
.breadcrumb-item a { color: var(--t-muted); text-decoration: none; }
.breadcrumb-item a:hover { color: var(--t-teal); }
.breadcrumb-item.active { color: var(--t-ink); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--t-mint-line); }

/* ==========================================================================
   19. Paginakop (binnenpagina's)
   ========================================================================== */

.page-hero {
    position: relative;
    isolation: isolate;
    background-color: var(--t-ink);
    padding: clamp(3.5rem, 7vw, 6rem) 0;
    overflow: clip;
}

/* Dezelfde entree als de homepage-hero, in verkorte vorm. */
@media (prefers-reduced-motion: no-preference) {
    .page-hero .breadcrumb,
    .page-hero__eyebrow,
    .page-hero h1,
    .page-hero__text {
        animation: rise-in 0.8s var(--t-ease-out) both;
    }
    .page-hero .breadcrumb  { animation-delay: 0.04s; }
    .page-hero__eyebrow     { animation-delay: 0.10s; }
    .page-hero h1           { animation-delay: 0.18s; }
    .page-hero__text        { animation-delay: 0.30s; }
}

.page-hero__media { position: absolute; inset: 0; z-index: -2; }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }

.page-hero__scrim {
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(100deg,
        rgba(10, 27, 31, 0.92) 0%,
        rgba(10, 27, 31, 0.75) 50%,
        rgba(10, 27, 31, 0.45) 100%);
}

.page-hero__title { color: #fff; margin-bottom: 0.75rem; }
.page-hero__text { color: rgba(255, 255, 255, 0.85); margin-bottom: 0; }

.page-hero .breadcrumb-item a { color: rgba(255, 255, 255, 0.65); }
.page-hero .breadcrumb-item a:hover { color: #fff; }
.page-hero .breadcrumb-item.active { color: rgba(255, 255, 255, 0.9); }
.page-hero .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, 0.4); }

/* ==========================================================================
   20. Contentblokken (ACF flexible content)
   ========================================================================== */

.block-content { font-size: var(--t-base); }

.block-content h2,
.block-content h3 { margin-top: 2.25rem; margin-bottom: 0.85rem; }
.block-content h2:first-child,
.block-content h3:first-child { margin-top: 0; }

.block-content ul,
.block-content ol { margin-bottom: 1.25rem; padding-left: 1.35rem; }
.block-content li { margin-bottom: 0.4rem; }

.block-content img { border-radius: var(--t-radius); }

.block-figure {
    border-radius: var(--t-radius-lg);
    overflow: hidden;
    box-shadow: var(--t-shadow);
}
.block-figure img { width: 100%; display: block; }

/* Losse kaart (blokken.php) */
.tile {
    height: 100%;
    position: relative;
    padding: 1.5rem 0 0;
    border-top: 1px solid var(--t-line);
}

.tile::after {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    height: 1px;
    width: 34px;
    background-color: var(--t-teal);
    transition: width 0.5s var(--t-ease-out);
}

.tile:hover::after { width: 100%; }
.tile:hover {
    transform: translateY(-4px);
    border-color: transparent;
    box-shadow: var(--t-shadow);
}

/* ==========================================================================
   21. Footer
   ========================================================================== */

.site-footer {
    background-color: var(--t-ink);
    color: rgba(255, 255, 255, 0.72);
    font-size: var(--t-sm);
}

.site-footer__main { padding: clamp(4.25rem, 7vw, 6rem) 0 clamp(3rem, 5vw, 4.25rem); }


.site-footer h2,
.site-footer h3,
.site-footer .footer-heading {
    font-family: var(--t-sans);
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    margin-bottom: 1.35rem;
}

.site-footer p { color: rgba(255, 255, 255, 0.72); }

.site-footer a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
}
.site-footer a:hover { color: #fff; }

.footer-logo {
    height: 44px;
    width: auto;
    margin-bottom: 1.35rem;
}

/* Openingstijden — een leesbare tabel, geen opsomming */
.hours {
    list-style: none;
    padding: 0;
    margin: 0;
}

.hours li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.09);
}
.hours li:last-child { border-bottom: none; }

.hours__day { color: rgba(255, 255, 255, 0.72); }

.hours__time {
    color: #fff;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.hours__time--closed { color: rgba(255, 255, 255, 0.4); }

/* Vandaag oplichten: kleine service, groot effect */
.hours li.is-today .hours__day,
.hours li.is-today .hours__time { color: #6FC6CE; font-weight: 500; }

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-menu li { padding: 0.4rem 0; }
.footer-menu a {
    display: inline-block;
    transition: color 0.25s var(--t-ease);
}
.footer-menu a:hover,
.footer-menu a:focus-visible { color: #6FC6CE; }

.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-contact li {
    margin-bottom: 0.85rem;
    overflow-wrap: anywhere;
}
.footer-contact address { margin: 0; font-style: normal; }

.socials {
    display: flex;
    gap: 1.15rem;
    margin-top: 1.4rem;
}

.socials a {
    font-size: var(--t-sm);
    color: rgba(255, 255, 255, 0.78);
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.28);
    padding-bottom: 2px;
    transition: color 0.25s var(--t-ease), border-color 0.25s var(--t-ease);
}

.socials a:hover,
.socials a:focus-visible {
    color: #fff;
    border-color: #fff;
}

.site-footer__bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.09);
    padding: 1.5rem 0;
    font-size: var(--t-xs);
    color: rgba(255, 255, 255, 0.5);
}
.site-footer__bottom a { color: rgba(255, 255, 255, 0.6); }
.site-footer__bottom a:hover { color: #fff; }

/* ==========================================================================
   22. Terug naar boven
   ========================================================================== */

.to-top {
    position: fixed;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 1020;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--t-line);
    border-radius: 50%;
    background-color: var(--t-surface);
    color: var(--t-teal);
    box-shadow: var(--t-shadow-sm);
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: opacity 0.3s var(--t-ease), transform 0.3s var(--t-ease),
                visibility 0.3s var(--t-ease);
    cursor: pointer;
}

.to-top span {
    font-size: 1.1rem;
    line-height: 1;
}

.to-top.is-visible {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.to-top:hover {
    background-color: var(--t-teal);
    border-color: var(--t-teal);
    color: #fff;
}

/* Paginakop — bovenschrift en variant zonder foto */
.page-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.7rem;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 0.25rem;
}
.page-hero__eyebrow::before {
    content: '';
    width: 28px;
    height: 1px;
    background-color: rgba(255, 255, 255, 0.5);
}

.page-hero--plain {
    background-color: var(--t-mint);
    padding-block: clamp(2.75rem, 5vw, 4.25rem);
}
.page-hero--plain .page-hero__eyebrow {
    color: var(--t-teal);
}
.page-hero--plain .page-hero__eyebrow::before {
    background-color: currentColor;
}
.page-hero--plain h1 { color: var(--t-ink); }

/* Teamlid — optionele korte bio */
.member__bio {
    font-size: var(--t-sm);
    color: var(--t-muted);
    margin: 0.6rem auto 0;
    max-width: 30ch;
}

/* ==========================================================================
   22b. Pagina-onderdelen (stappen, kaart, lichte openingstijden)
   ========================================================================== */

/* Genummerde stappen (inschrijfpagina). De nummers zíjn hier de informatie —
   het is een echte volgorde — dus mogen ze zichtbaar zijn. */
.step { position: relative; }
.step__num {
    display: block;
    font-size: var(--t-xs);
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--t-teal);
    margin-bottom: 0.7rem;
}

.step__num::before { content: 'Stap '; }

/* Kaart-omlijsting (contactpagina) */
.map-frame {
    position: relative;
    overflow: hidden;
    border-radius: var(--t-radius-lg);
    border: 1px solid var(--t-line);
    box-shadow: var(--t-shadow-sm);
    aspect-ratio: 4 / 3;
    background-color: var(--t-mint);
}
@media (min-width: 992px) {
    .map-frame { height: 100%; min-height: 340px; aspect-ratio: auto; }
}

/* Openingstijden op een lichte achtergrond (de basisstijl is voor de donkere footer) */
.hours--light li {
    border-bottom-color: var(--t-line);
}
.hours--light .hours__day { color: var(--t-body); }
.hours--light .hours__time { color: var(--t-ink); }
.hours--light .hours__time--closed { color: var(--t-muted); }
.hours--light li.is-today .hours__day,
.hours--light li.is-today .hours__time { color: var(--t-teal); }

/* ==========================================================================
   22b2. De grote beweging
   Drie zwaardere effecten, allemaal met vangnet: het rustmoment als
   vastgepinde scroll-scene en echte
   paginaovergangen. Browsers zonder ondersteuning en bezoekers met
   verminderde beweging krijgen de rustige basisversie.
   ========================================================================== */

/* Het rustmoment pint vast terwijl u scrolt: de woorden lichten op in het
   tempo van uw eigen scrollbeweging. De pagina neemt hier letterlijk de
   tijd. JavaScript zet de klasse en de posities per woord; zonder
   ondersteuning geldt de bestaande onthulling op tijd. */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .js .rustmoment--scrub {
            min-height: 205vh;
            padding: 0;
            view-timeline: --rust block;
        }

        .js .rustmoment--scrub .container {
            position: sticky;
            top: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }

        .js .rustmoment--scrub .rustmoment__quote {
            font-size: clamp(1.55rem, 3.6vw, 2.7rem);
        }

        .js .rustmoment--scrub .rw {
            overflow: visible;
            padding: 0;
            margin: 0;
        }

        .js .rustmoment--scrub .rw > span {
            transform: none !important;
            transition: none;
            opacity: 0.16;
            animation: rust-word linear both;
            animation-timeline: --rust;
            /* animation-range komt per woord via een inline stijl */
        }

        .js .rustmoment--scrub .rustmoment__mark {
            transition: none;
            animation: rust-mark linear both;
            animation-timeline: --rust;
            animation-range: contain 2% contain 15%;
        }

        .js .rustmoment--scrub .rustmoment__attrib {
            opacity: 0;
            transition: none;
            animation: rust-attrib linear both;
            animation-timeline: --rust;
            animation-range: contain 76% contain 90%;
        }
    }
}

@keyframes rust-word   { to { opacity: 1; } }
@keyframes rust-mark   { to { transform: scaleY(1); } }
@keyframes rust-attrib { to { opacity: 1; } }

/* Echte paginaovergangen (View Transitions): de inhoud glijdt over in de
   volgende pagina, de header blijft rustig staan. Eén regel voor browsers
   die het kennen; alle andere navigeren gewoon zoals altijd. */
@media (prefers-reduced-motion: no-preference) {
    @view-transition {
        navigation: auto;
    }

    .site-header { view-transition-name: site-kop; }

    ::view-transition-old(root) { animation: vt-uit 0.4s var(--t-ease) both; }
    ::view-transition-new(root) { animation: vt-in 0.55s var(--t-ease-out) both; }

    ::view-transition-old(site-kop),
    ::view-transition-new(site-kop) { animation: none; }
}

@keyframes vt-uit {
    to {
        opacity: 0;
        transform: translateY(-12px);
    }
}

@keyframes vt-in {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
}

/* ==========================================================================
   22c. Ambachtelijke accenten
   Kleine, met de hand gezette details die de site menselijk maken.
   ========================================================================== */

/* Accentwoord in grote koppen: strak teal, geen versiering. Op donkere
   vlakken (hero, oproepblok) de lichte variant voor voldoende contrast. */
.section-head__title em {
    font-style: normal;
    color: var(--t-teal);
}

.hero__title em,
.enroll__title em {
    font-style: normal;
    color: #6FC6CE;
}


/* Tekstselectie in de praktijkkleur */
::selection {
    background-color: var(--t-teal);
    color: #fff;
}



/* ==========================================================================
   23. Responsief
   ========================================================================== */

@media (max-width: 991.98px) {
    .hero__inner { min-height: 0; }
    .hero__title { max-width: none; }
    .hero__scrim {
        background: linear-gradient(180deg,
            rgba(10, 27, 31, 0.72) 0%,
            rgba(10, 27, 31, 0.86) 100%);
    }

    .gallery { grid-template-columns: repeat(3, 1fr); gap: 0.5rem; }
    .gallery__item--wide { grid-column: span 2; grid-row: span 2; }

    .section-head__intro { max-width: none; }
}

@media (max-width: 767.98px) {
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .gallery__item--wide { grid-column: span 2; grid-row: span 1; }
    .gallery__item--wide img { aspect-ratio: 16 / 9; }

    .hero__actions .btn { width: 100%; }

    .about__since { padding: 0.9rem 1.2rem; }

    .usps .usp { justify-content: flex-start; }
}

/* ==========================================================================
   24. Beweging & print
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal,
    .media-reveal,
    .section-head__eyebrow,
    .section-head__title,
    .section-head__intro,
    .rustmoment__mark,
    .rustmoment__attrib,
    .rw > span {
        opacity: 1 !important;
        transform: none !important;
        clip-path: none !important;
    }

    .media-reveal img {
        transform: none !important;
        scale: 1 !important;
        translate: 0 !important;
    }
    .hero__media,
    .page-hero__media { clip-path: none !important; }
    .hw__i { transform: none !important; }
    .hero__inner {
        opacity: 1 !important;
        transform: none !important;
    }
    .site-header.is-hidden { transform: none; }
    .hero__scrollhint { display: none !important; }
}

@media print {
    .site-header,
    .site-footer,
    .to-top,
    .hero__media,
    .enroll,
    .gallery { display: none !important; }

    body {
        background: #fff;
        color: #000;
        font-size: 11pt;
    }

    a[href^="http"]::after { content: ' (' attr(href) ')'; font-size: 9pt; }
}