/* ==========================================================================
   Eefje — page-level section layouts
   ========================================================================== */

/* --------------------------------------------------------------------------
   Shared: media placeholder (empty-state photo slot) + figure resets
   -------------------------------------------------------------------------- */
figure {
    margin: 0;
}
figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus-x, 50%) var(--focus-y, 50%);
}
.media-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    padding: 24px;
    text-align: center;
    background: linear-gradient(135deg, #e7d2b4, #dcc4a0);
    color: var(--muted-brown);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
}

/* Date-badge theme variants (event rows/badges) */
.date-badge--somi {
    background: var(--zand);
    color: var(--grond);
}
.date-badge--cirkels {
    background: var(--kleigrond);
    color: var(--room);
}
.date-badge--indo {
    background: var(--grond);
    color: var(--oker);
}
.date-badge--1op1 {
    background: var(--oxbloed);
    color: var(--room);
}
.date-badge--general {
    background: var(--kleigrond);
    color: var(--room);
}

/* --------------------------------------------------------------------------
   Home — intro
   -------------------------------------------------------------------------- */
.home-intro {
    background: var(--room);
    padding: 76px 0 30px;
}
.home-intro__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 18px;
}
.home-intro__tagline {
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 300;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.875rem);
    line-height: 1.4;
    margin: 18px 0 0;
    max-width: 600px;
    color: var(--oxbloed);
}

/* Home — wie is eefje / de droom */
.dream {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.dream__media {
    position: relative;
    height: 560px;
}
.dream__photo {
    position: absolute;
    border-radius: var(--r-card);
    overflow: hidden;
}
.dream__photo--front {
    top: 0;
    left: 0;
    width: 72%;
    height: 78%;
    box-shadow: 0 20px 46px rgba(52, 33, 26, 0.16);
}
.dream__photo--inset {
    bottom: 0;
    right: 0;
    width: 52%;
    height: 50%;
    border: 7px solid var(--room);
    box-shadow: 0 20px 46px rgba(52, 33, 26, 0.2);
}
.dream__text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.dream__title {
    font-size: var(--fs-h2);
}
.dream__body {
    color: var(--oxbloed);
}
.dream__sign {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
}
.dream__sign-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.875rem;
    color: var(--grond);
}
.dream__sign-rule {
    height: 1px;
    flex: 1;
    background: var(--line-warm);
}

/* Home — belofte */
.promise {
    text-align: center;
    padding: 36px var(--gutter) 22px;
}
.promise__line {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--fs-h2-sm);
    line-height: 1.1;
    color: var(--grond);
    margin: 0;
}
.promise__line em {
    font-style: italic;
    color: var(--kleigrond);
}

/* Home — events grid */
.events-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 24px;
    align-items: stretch;
    margin-top: 24px;
}

.section-head__title em {
    font-style: italic;
    color: var(--kleigrond);
}

@media (max-width: 900px) {
    .dream,
    .events-grid {
        grid-template-columns: 1fr;
    }
    .dream__media {
        height: 460px;
    }
}

/* --------------------------------------------------------------------------
   Band utilities (sections that break out of the page's theme background)
   -------------------------------------------------------------------------- */
.band-light {
    background: var(--room);
    color: var(--grond);
}
.band-oxbloed {
    background: var(--oxbloed);
    color: var(--room);
}
.band-oker {
    background: var(--oker);
    color: var(--grond);
}
.band-zand {
    background: var(--zand);
    color: var(--grond);
}

/* Two blocks in a row on the same band read as one surface; their paddings
   would otherwise stack into 160px of empty band between them. */
.band-light + .band-light,
.band-oxbloed + .band-oxbloed,
.band-oker + .band-oker,
.band-zand + .band-zand {
    padding-top: 0;
}

/* --------------------------------------------------------------------------
   Somi — hero
   -------------------------------------------------------------------------- */
.hero-somi__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.hero-somi__title {
    font-size: var(--fs-hero-sm);
    margin: 24px 0 0;
    line-height: 1.02;
}
.hero-somi .orb {
    margin: 52px 0 0;
}
.hero-somi__cue {
    font-size: 1.0625rem;
    color: var(--muted-brown);
    margin-top: 30px;
    letter-spacing: 0.02em;
}
.hero-somi__intro {
    margin: 34px 0 0;
    max-width: 560px;
    color: var(--oxbloed);
}

/* Somi — breathflow */
.breathflow__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.breathflow__label {
    color: var(--oker);
    margin-bottom: 44px;
}
.breathflow__step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}
.breathflow__name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2rem;
    color: var(--kleigrond);
    line-height: 1;
    margin: 0;
}
.breathflow__text {
    font-size: 1.1875rem;
    line-height: 1.55;
    margin: 0;
    color: var(--oxbloed);
    max-width: 420px;
}
.breathflow__divider {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 9px;
    padding: 22px 0;
}
.breathflow__divider i {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--dot-gold);
}
.breathflow__closing {
    margin-top: 56px;
    max-width: 560px;
}

/* --------------------------------------------------------------------------
   Media pair
   -------------------------------------------------------------------------- */
.media-pair__grid {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 22px;
}
.media-pair__cell {
    height: 400px;
    border-radius: var(--r-card);
    overflow: hidden;
}

/* --------------------------------------------------------------------------
   Somi rooster / schedule band
   -------------------------------------------------------------------------- */
.schedule-section__head {
    margin-bottom: 34px;
}

/* --------------------------------------------------------------------------
   Indo — hero (batik panel)
   -------------------------------------------------------------------------- */
.hero-indo {
    padding: 54px var(--gutter) 70px;
    display: flex;
    justify-content: center;
}
.batik-panel {
    position: relative;
    width: 100%;
    max-width: 1000px;
    border: 1px solid rgba(196, 134, 59, 0.55);
    border-radius: 4px;
    padding: 10px;
}
.batik-panel__inner {
    position: relative;
    border: 1px solid rgba(196, 134, 59, 0.55);
    border-radius: 2px;
    padding: 84px 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 24px;
    overflow: hidden;
}
.batik-panel__watermark {
    position: absolute;
    inset: 0;
    opacity: 0.09;
    background-image: url('/assets/logo/icons/icon-melati-oker.svg'), url('/assets/logo/icons/icon-melati-oker.svg');
    background-size: 44px 42px, 44px 42px;
    background-position: 0 0, 44px 42px;
    background-repeat: repeat;
    pointer-events: none;
}
.batik-panel__mark,
.hero-indo__title,
.hero-indo__subtitle,
.hero-indo__date {
    position: relative;
}
.hero-indo__title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: var(--fs-hero);
    line-height: 0.95;
    margin: 0;
}
.hero-indo__subtitle {
    font-family: var(--font-display);
    font-style: italic;
    font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.125rem);
    margin: 0;
    color: var(--zand);
}
.hero-indo__date {
    display: flex;
    align-items: center;
    gap: 18px;
    font-size: 1rem;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--oker);
    margin: 0;
}
.hero-indo__date span {
    height: 1px;
    width: 70px;
    background: var(--oker);
}

/* Indo — story + collage */
.story__grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 70px;
    align-items: center;
}
.story__grid--reverse .story__text {
    order: 2;
}
.story__grid--reverse .story__collage {
    order: 1;
}
.story__text {
    display: flex;
    flex-direction: column;
    gap: 22px;
}
.story__heading {
    font-size: var(--fs-h2-sm);
    line-height: 1.05;
}
.story__sign {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.625rem;
    color: var(--kleigrond);
    margin: 0;
}
.story__collage {
    position: relative;
    height: 560px;
}
.story__photo {
    position: absolute;
    background: var(--room-2);
    box-shadow: 0 18px 40px rgba(52, 33, 26, 0.18);
}
.story__photo--1 {
    top: 0;
    left: 0;
    width: 78%;
    height: 76%;
    padding: 14px 14px 52px;
    transform: rotate(-2deg);
}
.story__photo--2 {
    bottom: 0;
    right: 0;
    width: 52%;
    height: 46%;
    padding: 11px 11px 40px;
    transform: rotate(2.5deg);
}
.story__mark {
    position: absolute;
    top: 58%;
    left: 8%;
    transform: rotate(-10deg);
}

/* Indo — programma / menukaart */
.programma {
    position: relative;
    overflow: hidden;
}
.programma__watermark {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: url('/assets/logo/icons/icon-melati-grond.svg'), url('/assets/logo/icons/icon-melati-grond.svg');
    background-size: 44px 42px, 44px 42px;
    background-position: 0 0, 44px 42px;
    background-repeat: repeat;
    pointer-events: none;
}
.menu-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background: var(--room);
    border-radius: var(--r-letter);
    padding: 64px 70px;
    box-shadow: 0 24px 60px rgba(52, 33, 26, 0.25);
    display: flex;
    flex-direction: column;
    gap: 8px;
    color: var(--grond);
}
.menu-card__head {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    margin-bottom: 28px;
}
.menu-card__label {
    font-size: var(--fs-body-sm);
    font-weight: 600;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--kleigrond);
}
.menu-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 16px 0;
}
.menu-row__time {
    font-family: var(--font-display);
    font-size: 1.875rem;
    color: var(--kleigrond);
    min-width: 76px;
}
.menu-row__leader {
    flex: 1;
    border-bottom: 1.5px dotted var(--dot-gold);
    transform: translateY(-6px);
}
.menu-row__desc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    text-align: right;
}
.menu-row__desc strong {
    font-size: 1.3125rem;
    font-weight: 600;
}
.menu-row__desc span {
    font-size: 1rem;
    color: var(--muted-brown);
}
.menu-card__cta {
    display: flex;
    justify-content: center;
    margin-top: 30px;
}

/* --------------------------------------------------------------------------
   1-op-1 — letter
   -------------------------------------------------------------------------- */
.letter-section {
    display: flex;
    justify-content: center;
}
.letter-card {
    position: relative;
    width: 100%;
    max-width: 760px;
    background: var(--room);
    color: var(--grond);
    border-radius: var(--r-letter);
    padding: 78px 84px 70px;
    box-shadow: var(--sh-letter);
    transform: rotate(-0.4deg);
}
.letter-card__greeting {
    font-family: var(--font-display);
    font-weight: 300;
    font-style: italic;
    font-size: clamp(2.375rem, 1.6rem + 3.4vw, 4.125rem);
    line-height: 1.05;
    margin: 26px 0 0;
    color: var(--grond);
}
.letter-card__body {
    margin-top: 30px;
    font-size: var(--fs-body-lg);
    line-height: 1.7;
    color: var(--oxbloed);
}
.letter-card__body > p {
    margin: 0 0 22px;
}
.letter-card__foot {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 44px;
    gap: 20px;
}
.letter-card__sign {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.letter-card__sign-name {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 2.125rem;
    color: var(--grond);
}
.letter-card__ps {
    font-size: 1rem;
    color: var(--muted-brown);
}
.letter-card__seal {
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: var(--kleigrond);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 6px 16px rgba(90, 36, 23, 0.4);
    transform: rotate(6deg);
    flex: none;
}

/* 1-op-1 / Cirkels — steps, styled as a tarot-card spread */
.steps-section__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 38px;
}
/* Cards grow between 160px and 230px, so five fit side by side from a
   ~980px-wide screen up; the card is a size container so its padding and
   title can follow its width. A size container has no content width of its
   own, so the grid takes the full row instead of shrinking to fit. */
.steps-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    width: 100%;
}
.step-card {
    position: relative;
    flex: 1 1 160px;
    max-width: 230px;
    min-height: 320px;
    container-type: inline-size;
    transition: transform var(--dur-hover) ease;
}
.step-card:nth-child(odd) {
    transform: rotate(-1.4deg);
}
.step-card:nth-child(even) {
    transform: rotate(1.1deg);
}
.step-card:hover {
    transform: translateY(-6px) rotate(0deg);
}
/* Both faces share one grid cell, so the card is as tall as its longest
   face (and a row of cards as tall as its tallest card) instead of text
   running out of a fixed-height card on narrow widths. */
.step-card__flip {
    position: relative;
    display: grid;
    width: 100%;
    height: 100%;
    min-height: 320px;
    cursor: pointer;
    transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transition: transform 0.7s cubic-bezier(0.4, 0.15, 0.2, 1);
}
.step-card__flip[data-flipped="true"] {
    transform: rotateY(180deg);
}
.step-card__face {
    position: relative;
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 16px;
    padding: 46px clamp(16px, 11cqw, 26px) 34px;
    background: var(--grond-tint);
    border: 1px solid rgba(217, 188, 147, 0.35);
    border-radius: 20px;
    box-shadow: var(--sh-card-hover);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.step-card__face::before {
    content: '';
    position: absolute;
    inset: 11px;
    border: 1px solid rgba(217, 188, 147, 0.35);
    border-radius: 12px;
    pointer-events: none;
}
.step-card__face--back {
    transform: rotateY(180deg) translateZ(0);
    justify-content: flex-start;
    padding-top: 42px;
}
.step-card__art {
    position: relative;
    width: 108px;
    height: 108px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 6px 0;
}
.step-card__rays {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: repeating-conic-gradient(
        rgba(217, 188, 147, 0.55) 0deg 3deg,
        transparent 3deg 20deg
    );
    -webkit-mask: radial-gradient(circle, transparent 32%, #000 35%, #000 90%, transparent 96%);
    mask: radial-gradient(circle, transparent 32%, #000 35%, #000 90%, transparent 96%);
}
.step-card__mark {
    position: relative;
    filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.35));
}
.step-card__brand {
    opacity: 0.55;
}
.step-card__hint {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--on-dark-55);
}
.step-card__num {
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.625rem;
    letter-spacing: 0.06em;
    color: var(--zand);
    line-height: 1;
}
.step-card__num--corner {
    font-size: 1.125rem;
}
.step-card__rule {
    width: 30px;
    height: 1px;
    background: var(--dot-gold);
    opacity: 0.55;
    flex-shrink: 0;
}
.step-card__title {
    font-family: var(--font-display);
    font-style: italic;
    font-size: min(var(--fs-card-title), 17cqw);
    line-height: 1.05;
    color: var(--room);
    margin: 0;
}
.step-card__text {
    font-size: 1rem;
    line-height: 1.55;
    margin: 0;
    color: var(--on-dark-82);
}

/* Phones: two cards per row, an odd last card centred below. */
@media (max-width: 760px) {
    .steps-grid {
        gap: 14px;
    }
    .step-card {
        flex: 0 1 calc(50% - 7px);
        min-height: 0;
    }
    .step-card__flip {
        min-height: 260px;
    }
    .step-card__face {
        gap: 12px;
        padding-block: 34px 26px;
    }
    .step-card__art {
        width: 84px;
        height: 84px;
        margin: 0;
    }
    .step-card__text {
        font-size: 0.9375rem;
    }
}

/* 1-op-1 — cta band */
.cta-band__grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 64px;
    align-items: center;
}
.cta-band__grid--reverse {
    grid-template-columns: 1.15fr 0.85fr;
}
.cta-band__grid--reverse .cta-band__photo {
    order: 2;
}
.cta-band__grid--reverse .cta-band__text {
    order: 1;
}
.cta-band__photo {
    height: 460px;
    border-radius: var(--r-card);
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(52, 33, 26, 0.25);
}
.cta-band__text {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.cta-band__title {
    font-size: var(--fs-h2-sm);
    line-height: 1.05;
}
.cta-band__title em {
    color: var(--oxbloed);
}

/* --------------------------------------------------------------------------
   Contact — kom erbij
   -------------------------------------------------------------------------- */
.contact__grid {
    display: grid;
    grid-template-columns: 0.88fr 1.12fr;
    gap: 56px;
    align-items: stretch;
    padding-block: 56px 92px;
}
.contact__photo {
    position: relative;
    border-radius: 26px;
    overflow: hidden;
    min-height: 580px;
}
.contact__caption {
    position: absolute;
    left: 22px;
    bottom: 22px;
    background: rgba(52, 33, 26, 0.72);
    color: var(--room);
    padding: 10px 20px;
    border-radius: var(--r-pill);
    font-family: var(--font-display);
    font-style: italic;
    font-size: 1.25rem;
}
.contact__body {
    display: flex;
    flex-direction: column;
    gap: 26px;
}
.contact__head {
    display: flex;
    flex-direction: column;
    gap: 14px;
}
.contact__title {
    font-size: var(--fs-h1);
    line-height: 1.02;
}
.contact__title em {
    color: var(--zand);
}
.contact__intro {
    font-size: 1.1875rem;
    line-height: 1.6;
    margin: 0;
    color: var(--on-dark-82);
    max-width: 480px;
}
.contact__whatsapp {
    align-self: flex-start;
}
.contact__info {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 8px;
}
.contact__info > div {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.contact__info-label {
    font-size: 0.75rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--oker);
}
.contact__info a,
.contact__info span:not(.contact__info-label) {
    font-size: 1rem;
    color: var(--on-dark-85);
}

@media (max-width: 900px) {
    .media-pair__grid,
    .story__grid,
    .cta-band__grid,
    .contact__grid {
        grid-template-columns: 1fr;
    }
    .story__collage,
    .contact__photo {
        height: 460px;
        min-height: 0;
    }
    .schedule-row {
        grid-template-columns: 1fr;
        gap: 8px;
        text-align: left;
    }
    .agenda-row {
        grid-template-columns: 76px 1fr;
    }
    .agenda-row .btn {
        grid-column: 1 / -1;
        justify-self: start;
    }
}

/* --------------------------------------------------------------------------
   Cirkels — the kring animation (signature front-end micro-interaction)
   Ported from the design prototype, then sped up: visitors scrolled on
   before anything happened. The whole story now plays in ~7.5s:
     0–2.4s  dots pop in around "De kring komt samen"; the quote below
             fades in at 1.2s so the message is there early
     3.2s    "er is een plekje vrij voor jou", the open spot pulses once
     5.0s    the last dot drops in by itself, the ring gives one hug
     6.0s    "welkom in de kring", then the logo; the ring keeps breathing

   The ring is drawn on a 640px canvas. --u is one canvas pixel at the ring's
   current size (the ring is a size container), so every position below keeps
   the prototype's numbers and the whole ring shrinks with the screen, centred.
   -------------------------------------------------------------------------- */
/* The dots fly in from outside the ring; on a phone that is past the screen
   edge, which would otherwise widen the whole page. */
.cirkels-hero {
    overflow-x: clip;
}
.cirkels-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kring {
    position: relative;
    width: min(640px, 100%);
    aspect-ratio: 1;
    container-type: inline-size;
    --u: calc(100cqw / 640);
}
.kring__ring {
    position: absolute;
    inset: 0;
    animation:
        ef2b-hug 0.8s ease-out 5.9s,
        ef2b-adem 9s ease-in-out 7s infinite;
}
.kring__dot,
.kring__spot {
    position: absolute;
    left: calc(var(--x) * var(--u));
    top: calc(var(--y) * var(--u));
    width: calc(var(--d) * var(--u));
    height: calc(var(--d) * var(--u));
    border-radius: 50%;
}
.kring__dot--1 { --x: 476.8; --y: 284.8; --d: 70.4; background: var(--room); opacity: 0; animation: ef2b-in1 1.2s var(--ease-pop) 5s both; }
.kring__dot--2 { --x: 438.4; --y: 414.7; --d: 57.6; background: var(--oker); animation: ef2b-in2 1.4s var(--ease-pop) 0.7s both; }
.kring__dot--3 { --x: 314.9; --y: 470.4; --d: 76.8; background: var(--zand); animation: ef2b-in3 1.4s var(--ease-pop) 0s both; }
.kring__dot--4 { --x: 198.4; --y: 457.6; --d: 57.6; background: var(--oxbloed); animation: ef2b-in4 1.4s var(--ease-pop) 0.9s both; }
.kring__dot--5 { --x: 108.8; --y: 351.4; --d: 70.4; background: var(--room); animation: ef2b-in5 1.4s var(--ease-pop) 0.4s both; }
.kring__dot--6 { --x: 115.2; --y: 224.6; --d: 57.6; background: var(--grond); animation: ef2b-in6 1.4s var(--ease-pop) 0.8s both; }
.kring__dot--7 { --x: 188.8; --y: 115.2; --d: 76.8; background: var(--zand); animation: ef2b-in7 1.4s var(--ease-pop) 0.15s both; }
.kring__dot--8 { --x: 324.5; --y: 102.4; --d: 57.6; background: var(--oxbloed); animation: ef2b-in8 1.4s var(--ease-pop) 1s both; }
.kring__dot--9 { --x: 432; --y: 161.3; --d: 70.4; background: var(--room); animation: ef2b-in9 1.4s var(--ease-pop) 0.55s both; }

/* The open spot and the arrow toward it: shown, one pulse, then they make
   way for the joining dot. The fade-outs fill forwards only, so they don't
   override the fade-ins before they start. */
.kring__spot {
    --x: 476.8; --y: 284.8; --d: 70.4;
    z-index: 2;
    border: 2px dashed rgba(241, 230, 212, 0.65);
    opacity: 0;
    animation:
        ef2b-fade 0.5s ease-out 3.2s both,
        ef2b-lok 1.4s ease-in-out 3.6s,
        ef2b-out 0.4s ease-out 5s forwards;
}
.kring__arrow {
    position: absolute;
    left: calc(380 * var(--u));
    top: calc(340 * var(--u));
    width: calc(110 * var(--u));
    height: calc(85 * var(--u));
    overflow: visible;
    opacity: 0;
    animation:
        ef2b-fade 0.5s ease-out 3.4s both,
        ef2b-out 0.4s ease-out 5s forwards;
}

.kring__text {
    position: absolute;
    inset: calc(170 * var(--u));
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin: 0;
    font-family: var(--font-display);
    font-weight: 300;
    font-size: min(clamp(2rem, 1.4rem + 2.6vw, 3.625rem), calc(58 * var(--u)));
    line-height: 1.08;
}
.kring__text--1 { animation: ef2b-t1 0.5s ease-in 2.7s both; }
.kring__text--2 {
    opacity: 0;
    animation:
        ef2b-t2 0.7s ease-out 3.2s both,
        ef2b-tout 0.5s ease-out 5s forwards;
}
.kring__text--3 { opacity: 0; animation: ef2b-t2 0.8s ease-out 6s both; }

.cirkels-hero__after {
    min-height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 34px;
    margin-top: 30px;
}
.cirkels-hero__quote {
    font-size: 1.375rem;
    line-height: 1.6;
    margin: 0;
    max-width: 620px;
    text-align: center;
    color: var(--on-dark-90);
    opacity: 0;
    animation: ef2b-t2 1s ease-out 1.2s both;
}
.cirkels-hero__logo {
    opacity: 0;
    animation: ef2b-t2 0.9s ease-out 6.6s both;
}

@keyframes ef2b-in1 { 0% { transform: translate(calc(211 * var(--u)), 0) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in2 { 0% { transform: translate(calc(162 * var(--u)), calc(136 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in3 { 0% { transform: translate(calc(37 * var(--u)), calc(208 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in4 { 0% { transform: translate(calc(-102 * var(--u)), calc(183 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in5 { 0% { transform: translate(calc(-194 * var(--u)), calc(73 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in6 { 0% { transform: translate(calc(-194 * var(--u)), calc(-73 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in7 { 0% { transform: translate(calc(-102 * var(--u)), calc(-183 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in8 { 0% { transform: translate(calc(37 * var(--u)), calc(-208 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-in9 { 0% { transform: translate(calc(162 * var(--u)), calc(-136 * var(--u))) scale(0.85); opacity: 0; } 35% { opacity: 1; } 100% { transform: translate(0,0) scale(1); opacity: 1; } }
@keyframes ef2b-adem { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.015); } }
@keyframes ef2b-hug { 0%, 100% { transform: scale(1); } 40% { transform: scale(1.045); } }
@keyframes ef2b-t1 { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-8px); } }
@keyframes ef2b-t2 { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes ef2b-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ef2b-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ef2b-tout { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-8px); } }
@keyframes ef2b-lok { 0%, 100% { box-shadow: 0 0 0 0 rgba(241,230,212,0); border-color: rgba(241,230,212,0.6); } 50% { box-shadow: 0 0 22px 4px rgba(241,230,212,0.4); border-color: rgba(241,230,212,0.95); } }

@media (prefers-reduced-motion: reduce) {
    /* Show the completed circle immediately; no fly-in, hug or breathing */
    .kring__ring { animation: none; }
    .kring__dot { animation: none !important; opacity: 1 !important; transform: none !important; }
    .kring__dot--1 { opacity: 1 !important; }
    .kring__spot, .kring__arrow { display: none; }
    .kring__text--1 { display: none; }
    .kring__text--2 { display: none; }
    .kring__text--3 { opacity: 1 !important; animation: none !important; }
    .cirkels-hero__quote, .cirkels-hero__logo { opacity: 1 !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Scoped accents (replaces per-instance inline colour overrides)
   -------------------------------------------------------------------------- */
.eyebrow--muted {
    color: var(--muted-brown-2);
}
.u-center-narrow {
    text-align: center;
    max-width: 820px;
    margin-inline: auto;
}
.u-hero-title {
    font-size: var(--fs-hero-sm);
    margin-top: 16px;
}
.u-mt-20 {
    margin-top: 20px;
}

/* home featured card eyebrow + empty-state */
.event-featured .eyebrow {
    color: var(--zand);
}
.home-empty {
    color: var(--muted-brown);
}

/* section-scoped eyebrow/body accents */
.story .eyebrow {
    color: var(--oker);
}
.story__text .rich {
    color: var(--oxbloed);
}
.schedule-section .eyebrow {
    color: var(--zand);
}
.schedule-section__footnote {
    text-align: left;
    color: var(--zand);
    margin-top: 34px;
}
.testimonials .eyebrow {
    color: var(--muted-brown-2);
}
.testimonials .section-head {
    margin-bottom: 40px;
}
.agenda__label {
    color: var(--kleigrond);
    margin-bottom: 30px;
}
.steps-section .eyebrow {
    color: var(--oker);
}
.cta-band__text .body-lg {
    color: var(--oxbloed);
}
.letter-card .eyebrow {
    color: var(--kleigrond);
}

/* rich-text headings sit on light surfaces here, whatever the page theme */
.letter-card .rich h2,
.band-light .rich h2,
.band-zand .rich h2 {
    color: var(--kleigrond);
}

/* testimonial dots cycle through three palette colours */
.testimonial:nth-child(3n + 1) .testimonial__dot {
    background: var(--oker);
}
.testimonial:nth-child(3n + 2) .testimonial__dot {
    background: var(--kleigrond);
}
.testimonial:nth-child(3n + 3) .testimonial__dot {
    background: var(--oxbloed);
}

/* breathflow orb breathing offsets, staggered per step (no inline delay) */
.breathflow__step:nth-child(2) .orb__layer { animation-delay: 0s; }
.breathflow__step:nth-child(4) .orb__layer--1 { animation-delay: 0.6s; }
.breathflow__step:nth-child(4) .orb__layer--3 { animation-delay: 0.85s; }
.breathflow__step:nth-child(6) .orb__layer--1 { animation-delay: 1.2s; }
.breathflow__step:nth-child(6) .orb__layer--3 { animation-delay: 1.45s; }
.breathflow__step:nth-child(8) .orb__layer--1 { animation-delay: 1.8s; }
.breathflow__step:nth-child(8) .orb__layer--3 { animation-delay: 2.05s; }
.breathflow__step:nth-child(10) .orb__layer--1 { animation-delay: 2.4s; }
.breathflow__step:nth-child(10) .orb__layer--3 { animation-delay: 2.65s; }