/* ==========================================================================
   Tandheelkundig Centrum Huissen — design tokens & shared primitives
   Palette derived from the practice logo (sky blue #87C3E7 / sage #A5CB8B),
   modernised with warm neutrals so the site reads human rather than clinical.
   ========================================================================== */

:root {
    /* --- ink --------------------------------------------------------- */
    --tch-ink: #16282F;
    --tch-ink-2: #2C4550;
    /* Clears 4.5:1 on every surface in the palette, including sand. */
    --tch-ink-3: #556B73;
    /* Muted labels still have to clear 4.5:1 on every surface. */
    --tch-ink-4: #5E6E75;

    /* --- surfaces ---------------------------------------------------- */
    --tch-white: #FFFFFF;
    --tch-cream: #FBF9F5;
    --tch-sand: #F4F0E9;
    --tch-sand-deep: #EAE4DA;
    --tch-mist: #EEF5FA;
    --tch-moss: #EFF4E9;

    /* --- brand ------------------------------------------------------- */
    --tch-blue: #2E7FA6;
    --tch-blue-deep: #1F5E7D;
    --tch-blue-soft: #87C3E7;
    --tch-blue-pale: #C8E1F4;
    --tch-green: #527636;
    --tch-green-soft: #A5CB8B;
    --tch-green-pale: #CEE1BE;

    /* --- lines & shadow ---------------------------------------------- */
    --tch-line: #E3DDD3;
    --tch-line-soft: rgba(22, 40, 47, .10);
    --tch-line-invert: rgba(255, 255, 255, .18);
    --tch-shadow-sm: 0 1px 2px rgba(22, 40, 47, .04), 0 6px 18px rgba(22, 40, 47, .05);
    --tch-shadow-md: 0 2px 6px rgba(22, 40, 47, .05), 0 18px 44px rgba(22, 40, 47, .08);
    --tch-shadow-lg: 0 30px 80px rgba(22, 40, 47, .12);

    /* --- type -------------------------------------------------------- */
    --tch-font-display: "SUSE", "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    --tch-font-body: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

    --tch-h1: clamp(2.375rem, 1.7rem + 2.9vw, 4.25rem);
    --tch-h2: clamp(1.95rem, 1.35rem + 2.6vw, 3.5rem);
    --tch-h3: clamp(1.4rem, 1.13rem + 1.2vw, 2.125rem);
    --tch-h4: clamp(1.15rem, 1.03rem + .55vw, 1.5rem);
    --tch-lead: clamp(1.0625rem, .99rem + .38vw, 1.3125rem);
    --tch-body: clamp(1rem, .97rem + .17vw, 1.0625rem);
    --tch-small: .9375rem;
    --tch-label: .75rem;

    /* --- rhythm ------------------------------------------------------ */
    --tch-gutter: clamp(1.25rem, .55rem + 3vw, 4.5rem);
    --tch-section-y: clamp(4.5rem, 2.6rem + 8vw, 9.5rem);
    --tch-max: 1360px;
    --tch-max-narrow: 780px;

    /* --- radii ------------------------------------------------------- */
    --tch-r-sm: 6px;
    --tch-r-md: 12px;
    --tch-r-lg: 20px;
    --tch-r-xl: 28px;
    --tch-r-pill: 999px;

    /* --- motion ------------------------------------------------------ */
    --tch-ease: cubic-bezier(.22, .61, .36, 1);
    --tch-ease-soft: cubic-bezier(.4, 0, .2, 1);
    --tch-dur: .55s;
}

/* ==========================================================================
   Section shell — every widget renders inside .tch-section
   ========================================================================== */

.tch-section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    padding: var(--tch-section-y) var(--tch-gutter);
    font-family: var(--tch-font-body);
    color: var(--tch-ink);
    font-size: var(--tch-body);
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
}

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

.tch-section--flush {
    padding-left: 0;
    padding-right: 0;
}

.tch-section--tight {
    padding-top: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
    padding-bottom: clamp(2.5rem, 1.6rem + 3.6vw, 4.5rem);
}

.tch-section--slim {
    padding-top: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
    padding-bottom: clamp(1.75rem, 1.3rem + 2vw, 2.75rem);
}

.tch-shell {
    width: 100%;
    max-width: var(--tch-max);
    margin-inline: auto;
}

.tch-shell--wide {
    max-width: 1560px;
}

.tch-shell--narrow {
    max-width: var(--tch-max-narrow);
}

/* --- surface variants ------------------------------------------------ */
.tch-bg-white { background: var(--tch-white); }
.tch-bg-cream { background: var(--tch-cream); }
.tch-bg-sand { background: var(--tch-sand); }
.tch-bg-mist { background: var(--tch-mist); }
.tch-bg-moss { background: var(--tch-moss); }

.tch-bg-ink {
    background: var(--tch-ink);
    color: rgba(255, 255, 255, .78);
}

.tch-bg-ink :is(h1, h2, h3, h4, .tch-eyebrow, strong) {
    color: #fff;
}

/* ==========================================================================
   Typography primitives
   ========================================================================== */

.tch-section :is(h1, h2, h3, h4) {
    font-family: var(--tch-font-display);
    color: var(--tch-ink);
    font-weight: 600;
    letter-spacing: -.018em;
    line-height: 1.1;
    margin: 0;
    text-wrap: balance;
    /* Dutch compounds ("wortelkanaalbehandeling") are wider at display sizes
       than the narrow heading column a two-column section gives them, and an
       unbreakable word does not wrap: it runs straight over the body copy
       beside it. Hyphenation breaks it at a real syllable (the page is
       lang="nl-NL"). The 15-character floor keeps it to the compounds that
       actually need it — without it a merely long word like "tandvleesrand"
       picks up a hyphen it never needed. break-word is the last resort where
       no hyphenation dictionary is available. */
    hyphens: auto;
    hyphenate-limit-chars: 15 6 4;
    overflow-wrap: break-word;
}

.tch-h1 { font-size: var(--tch-h1); line-height: 1.03; letter-spacing: -.03em; }
.tch-h2 { font-size: var(--tch-h2); line-height: 1.08; letter-spacing: -.025em; }
.tch-h3 { font-size: var(--tch-h3); line-height: 1.18; }
.tch-h4 { font-size: var(--tch-h4); line-height: 1.25; }

.tch-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .625rem;
    font-family: var(--tch-font-body);
    font-size: var(--tch-label);
    font-weight: 600;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--tch-blue-deep);
    margin: 0 0 1.25rem;
    line-height: 1.4;
}

/* The hero's mark, at label size: the tooth draws itself and the shine lands
   as the outline closes, so every section opens on the same gesture. */
.tch-eyebrow__mark {
    flex: none;
    width: 1.5rem;
    height: 1.5rem;
    color: var(--tch-blue);
    overflow: visible;
}

.tch-eyebrow__text {
    padding-top: .05em;
}

/* pathLength="100" normalises the outline, so the dash maths stays exact. */
.tch-eyebrow__tooth {
    stroke-dasharray: 100;
    stroke-dashoffset: 100;
    animation: tch-eyebrow-draw 1.5s var(--tch-ease) forwards;
}

.tch-eyebrow__shine {
    color: var(--tch-green);
    transform-origin: 25.6px 9.05px;
    opacity: 0;
    animation: tch-eyebrow-shine 1.5s var(--tch-ease-soft) forwards;
}

/* Unlike the hero, section marks draw once — held at frame zero until their
   block scrolls in, so the page never carries thirteen looping animations. */
.tch-reveal:not(.is-visible) .tch-eyebrow__tooth,
.tch-reveal:not(.is-visible) .tch-eyebrow__shine {
    animation-play-state: paused;
}

@keyframes tch-eyebrow-draw {
    from      { stroke-dashoffset: 100; }
    70%, 100% { stroke-dashoffset: 0; }
}

@keyframes tch-eyebrow-shine {
    0%, 62% { opacity: 0; scale: .4; }
    100%    { opacity: 1; scale: 1; }
}

.tch-eyebrow--plain .tch-eyebrow__mark { display: none; }

.tch-bg-ink .tch-eyebrow { color: var(--tch-blue-soft); }
.tch-bg-ink .tch-eyebrow__mark { color: var(--tch-blue-soft); }
.tch-bg-ink .tch-eyebrow__shine { color: var(--tch-green-soft); }

.tch-lead {
    font-size: var(--tch-lead);
    line-height: 1.6;
    color: var(--tch-ink-2);
    margin: 0;
    max-width: 58ch;
}

.tch-bg-ink .tch-lead { color: rgba(255, 255, 255, .8); }

.tch-text p {
    font-family: var(--tch-font-body);
    font-size: var(--tch-body);
    line-height: 1.7;
    color: var(--tch-ink-2);
    margin: 0 0 1.05em;
}

.tch-text p:last-child { margin-bottom: 0; }
.tch-bg-ink .tch-text p { color: rgba(255, 255, 255, .76); }

.tch-quote {
    font-family: var(--tch-font-display);
    font-size: clamp(1.35rem, 1.05rem + 1.35vw, 2.125rem);
    line-height: 1.28;
    letter-spacing: -.02em;
    font-weight: 500;
    color: var(--tch-ink);
    margin: 0;
    text-wrap: balance;
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.tch-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .625rem;
    min-height: 3.25rem;
    padding: .875rem 1.75rem;
    border: 1px solid transparent;
    border-radius: var(--tch-r-pill);
    font-family: var(--tch-font-body);
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -.005em;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .3s var(--tch-ease-soft), color .3s var(--tch-ease-soft),
                border-color .3s var(--tch-ease-soft), transform .3s var(--tch-ease-soft),
                box-shadow .3s var(--tch-ease-soft);
}

.tch-btn svg { flex: none; }

.tch-btn--primary {
    background: var(--tch-blue-deep);
    color: #fff;
    box-shadow: 0 10px 26px rgba(31, 94, 125, .22);
}

.tch-btn--primary:hover,
.tch-btn--primary:focus-visible {
    background: var(--tch-ink);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 16px 34px rgba(22, 40, 47, .24);
}

.tch-btn--ghost {
    background: transparent;
    color: var(--tch-ink);
    border-color: rgba(22, 40, 47, .22);
}

.tch-btn--ghost:hover,
.tch-btn--ghost:focus-visible {
    background: var(--tch-ink);
    border-color: var(--tch-ink);
    color: #fff;
    transform: translateY(-2px);
}

.tch-btn--light {
    background: #fff;
    color: var(--tch-ink);
    box-shadow: var(--tch-shadow-sm);
}

.tch-btn--light:hover,
.tch-btn--light:focus-visible {
    background: var(--tch-blue-pale);
    transform: translateY(-2px);
}

.tch-btn--outline-light {
    background: transparent;
    color: #fff;
    border-color: rgba(255, 255, 255, .38);
}

.tch-btn--outline-light:hover,
.tch-btn--outline-light:focus-visible {
    background: rgba(255, 255, 255, .12);
    border-color: rgba(255, 255, 255, .7);
    color: #fff;
    transform: translateY(-2px);
}

/* Button with a sliding arrow disc. The two arrows share one grid cell: on
   hover the visible one slides out to the right while its twin slides in from
   the left. The shift clears half the disc plus half the arrow, so neither
   peeks past the clipped edge at rest. */
.tch-btn--disc {
    --tch-btn-disc-bg: rgba(255, 255, 255, .18);
    gap: .875rem;
    padding-right: .5rem;
    /* No effect while the button shrink-wraps; keeps the disc on the trailing
       edge where widgets stretch the button full-width on mobile. */
    justify-content: space-between;
}

.tch-btn__disc {
    display: grid;
    place-items: center;
    flex: none;
    width: 2.375rem;
    height: 2.375rem;
    border-radius: 50%;
    background: var(--tch-btn-disc-bg);
    overflow: hidden;
    transition: background-color .3s var(--tch-ease-soft);
}

.tch-btn__disc svg {
    grid-area: 1 / 1;
    transition: transform .45s var(--tch-ease);
}

.tch-btn__disc svg:last-child {
    transform: translateX(-2rem);
}

.tch-btn--disc:hover .tch-btn__disc svg:first-child,
.tch-btn--disc:focus-visible .tch-btn__disc svg:first-child {
    transform: translateX(2rem);
}

.tch-btn--disc:hover .tch-btn__disc svg:last-child,
.tch-btn--disc:focus-visible .tch-btn__disc svg:last-child {
    transform: none;
}

/* Disc tint follows the fill it sits on: light on dark, dark on light. */
.tch-btn--light.tch-btn--disc,
.tch-btn--ghost.tch-btn--disc {
    --tch-btn-disc-bg: rgba(22, 40, 47, .09);
}

.tch-btn--outline-light.tch-btn--disc {
    --tch-btn-disc-bg: rgba(255, 255, 255, .2);
}

/* Ghost flips to an ink fill on hover, so its disc flips with it. */
.tch-btn--ghost.tch-btn--disc:hover,
.tch-btn--ghost.tch-btn--disc:focus-visible {
    --tch-btn-disc-bg: rgba(255, 255, 255, .2);
}

/* Text link with animated rule. Inline rather than inline-flex so a link that
   wraps keeps its arrow next to the last word instead of at the far edge. */
.tch-link {
    display: inline;
    font-weight: 600;
    color: var(--tch-blue-deep);
    text-decoration: none;
    padding-bottom: 2px;
    background-image: linear-gradient(currentColor, currentColor);
    background-size: 100% 1px;
    background-repeat: no-repeat;
    background-position: 0 100%;
    transition: background-size .4s var(--tch-ease), color .3s var(--tch-ease-soft);
}

.tch-link:hover,
.tch-link:focus-visible {
    background-size: 0 1px;
    color: var(--tch-ink);
}

.tch-link svg {
    vertical-align: -1px;
    margin-left: .45em;
    transition: transform .35s var(--tch-ease);
}

.tch-link:hover svg { transform: translateX(4px); }

.tch-bg-ink .tch-link { color: var(--tch-blue-soft); }
.tch-bg-ink .tch-link:hover { color: #fff; }

.tch-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .875rem;
}

/* ==========================================================================
   Media primitives
   ========================================================================== */

.tch-figure {
    position: relative;
    margin: 0;
    overflow: hidden;
    border-radius: var(--tch-r-lg);
    background: var(--tch-sand-deep);
}

.tch-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--tch-ease);
}

.tch-figure--zoom:hover img { transform: scale(1.04); }

.tch-ratio-4-3 { aspect-ratio: 4 / 3; }
.tch-ratio-3-2 { aspect-ratio: 3 / 2; }
.tch-ratio-1-1 { aspect-ratio: 1 / 1; }
.tch-ratio-3-4 { aspect-ratio: 3 / 4; }
.tch-ratio-4-5 { aspect-ratio: 4 / 5; }
.tch-ratio-16-9 { aspect-ratio: 16 / 9; }

/* ==========================================================================
   Accessibility helpers
   ========================================================================== */

.tch-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.tch-section :is(a, button, [tabindex]):focus-visible {
    outline: 3px solid var(--tch-blue);
    outline-offset: 3px;
    border-radius: var(--tch-r-sm);
}

/* ==========================================================================
   Motion — reveal on scroll
   ========================================================================== */

.tch-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity .85s var(--tch-ease), transform .85s var(--tch-ease);
    transition-delay: var(--tch-delay, 0ms);
    will-change: opacity, transform;
}

.tch-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Image mask reveal.
   The mask sits on the inner image, never on the observed element itself: an
   element clipped to zero height reports no intersection, so it would never
   receive the class that reveals it. */
.tch-reveal-media img {
    clip-path: inset(0 0 100% 0);
    transition: clip-path 1.1s var(--tch-ease);
    transition-delay: var(--tch-delay, 0ms);
}

.tch-reveal-media.is-visible img {
    clip-path: inset(0 0 0 0);
}

@media (prefers-reduced-motion: reduce) {
    .tch-section *,
    .tch-section *::before,
    .tch-section *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .tch-reveal {
        opacity: 1 !important;
        transform: none !important;
    }

    .tch-reveal-media img {
        clip-path: none !important;
    }

    /* The mark is drawn by an animation, so its end state has to be stated
       outright — a paused, near-zero-duration animation never paints it. */
    .tch-eyebrow__tooth {
        stroke-dashoffset: 0;
        animation: none;
    }

    .tch-eyebrow__shine {
        opacity: 1;
        scale: 1;
        animation: none;
    }

    .tch-figure--zoom:hover img { transform: none; }
}