/* =========================================================
   INNERFREE
   VOLLEDIGE STYLE.CSS
   ========================================================= */


/* ---------------------------------------------------------
   KLEUREN & BASISINSTELLINGEN
   --------------------------------------------------------- */

:root {
    --color-background: #F8F6F2;
    --color-background-soft: #F1ECE7;
    --color-text: #3D3935;
    --color-text-soft: #706A65;

    --color-lavender: #A98AC7;
    --color-lavender-light: #D8CAE5;
    --color-plum: #6F567D;

    --color-white: #FFFFFF;

    --font-heading: "Cormorant Garamond", Georgia, serif;
    --font-body: "Manrope", Arial, sans-serif;

    --container-width: 1200px;
}

/* =========================================================
   GROEPSLESSEN PER LOCATIE + OVERMERE LANDINGSPAGINA
   ========================================================= */

.yoga-location-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-top: 2rem;
}

.yoga-locations .section-heading {
    max-width: 720px;
}

.yoga-location-card {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.yoga-location-card-featured {
    background: linear-gradient(145deg, #eee6f4 0%, #f4eff6 100%);
    border-color: rgba(111, 86, 125, 0.16);
}

.location-label {
    margin-bottom: 0.7rem !important;
    color: var(--color-plum) !important;
    font-size: 0.76rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    line-height: 1.4 !important;
    text-transform: uppercase;
}

.location-details {
    display: grid;
    gap: 0.3rem;
    margin: 1.35rem 0 1.8rem;
    padding: 0;
    color: var(--color-text);
    list-style: none;
}

.location-details li {
    position: relative;
    padding-left: 1.1rem;
}

.location-details li::before {
    position: absolute;
    top: 0.76em;
    left: 0;
    width: 4px;
    height: 4px;
    background: var(--color-lavender);
    border-radius: 50%;
    content: "";
}

.yoga-location-card .button {
    margin-top: auto;
}

.location-card-actions {
    display: grid;
    width: 100%;
    gap: 0.75rem;
    margin-top: auto;
}

.yoga-location-card .location-card-actions .button {
    width: 100%;
    margin-top: 0;
    text-align: center;
}

.overmere-hero {
    padding: 104px 0 120px;
    overflow: hidden;
}

.overmere-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(360px, 0.72fr);
    align-items: center;
    gap: clamp(3rem, 8vw, 8rem);
}

.overmere-hero-content h1 {
    max-width: 720px;
    margin: 0.4rem 0 1.5rem;
    color: var(--color-plum);
    font-size: clamp(4rem, 7vw, 7.2rem);
}

.overmere-hero-content .hero-lead {
    max-width: 620px;
    color: var(--color-text-soft);
    font-size: clamp(1.15rem, 2vw, 1.42rem);
    line-height: 1.65;
}

.overmere-quick-details {
    display: grid;
    gap: 0.35rem;
    margin: 2rem 0 2.2rem;
    font-size: 0.96rem;
    font-weight: 500;
}

.overmere-hero-image {
    position: relative;
    margin: 0;
}

.overmere-hero-image::before {
    position: absolute;
    inset: -18px 20px 18px -20px;
    z-index: -1;
    background: var(--color-lavender-light);
    border-radius: 48% 48% 36% 36%;
    content: "";
    opacity: 0.45;
    transform: rotate(-2deg);
}

.overmere-hero-image img {
    aspect-ratio: 4 / 5;
    border-radius: 46% 46% 30px 30px;
    object-fit: cover;
    object-position: center 40%;
}

.overmere-intro {
    background: var(--color-background-soft);
    text-align: center;
}

.overmere-intro h2 {
    margin: 0.6rem auto 2rem;
    color: var(--color-plum);
    font-size: clamp(2.6rem, 5vw, 4.2rem);
}

.overmere-intro p:not(.section-subtitle) {
    margin-top: 1rem;
    color: var(--color-text-soft);
    font-size: 1.06rem;
}

.overmere-repeat-grid,
.overmere-booking-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(3rem, 8vw, 8rem);
}

.overmere-repeat h2,
.overmere-booking h2 {
    margin-top: 0.6rem;
    color: var(--color-plum);
    font-size: clamp(2.8rem, 5vw, 4.5rem);
}

.overmere-repeat p:not(.section-subtitle) + p {
    margin-top: 1.2rem;
}

.overmere-practical {
    background: var(--color-background-soft);
}

.overmere-practical-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.3rem;
}

.overmere-practical-grid article {
    min-height: 280px;
    padding: 2.2rem;
    background: rgba(255, 255, 255, 0.56);
    border: 1px solid rgba(111, 86, 125, 0.1);
    border-radius: 28px;
}

.detail-number {
    display: block;
    margin-bottom: 2.2rem;
    color: var(--color-lavender);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
}

.overmere-practical-grid h3,
.overmere-note h3 {
    margin-bottom: 1rem;
    color: var(--color-plum);
    font-size: 2rem;
}

.overmere-chair-note {
    margin-top: 2rem;
    color: var(--color-text-soft);
    text-align: center;
}

.overmere-trial {
    text-align: center;
}

.overmere-trial h2 {
    margin: 0.5rem 0 1.4rem;
    color: var(--color-plum);
    font-size: clamp(2.8rem, 5vw, 4.4rem);
}

.overmere-trial .button {
    margin-top: 2rem;
}

.overmere-booking {
    background: linear-gradient(135deg, #eee6f4 0%, #f8f6f2 72%);
}

.overmere-booking .button {
    margin-top: 2rem;
}

.overmere-note {
    align-self: center;
    padding: 2.4rem;
    background: rgba(255, 255, 255, 0.58);
    border: 1px solid rgba(111, 86, 125, 0.12);
    border-radius: 28px;
}

.overmere-note p + p {
    margin-top: 1rem;
}

@media (max-width: 1000px) {
    .overmere-hero-grid,
    .overmere-repeat-grid,
    .overmere-booking-grid {
        grid-template-columns: 1fr;
    }

    .overmere-hero-image {
        width: min(100%, 560px);
        margin-inline: auto;
    }

    .overmere-practical-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 700px) {
    .yoga-location-buttons {
        display: grid;
    }

    .yoga-location-buttons .button {
        width: 100%;
        text-align: center;
    }

    .overmere-hero {
        padding: 70px 0 82px;
    }

    .overmere-hero-grid {
        gap: 3rem;
    }

    .overmere-hero-content h1 {
        font-size: clamp(3.4rem, 16vw, 5rem);
    }

    .overmere-hero-image img {
        aspect-ratio: 4 / 5.2;
    }

    .overmere-practical-grid {
        grid-template-columns: 1fr;
    }

    .overmere-practical-grid article {
        min-height: 0;
    }
}


/* ---------------------------------------------------------
   RESET
   --------------------------------------------------------- */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    background-color: var(--color-background);
    color: var(--color-text);

    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;
    line-height: 1.8;

    -webkit-font-smoothing: antialiased;
}

img {
    display: block;
    width: 100%;
    height: auto;
}

a {
    color: inherit;
    text-decoration: none;
}


/* ---------------------------------------------------------
   ALGEMENE LAYOUT
   --------------------------------------------------------- */

.container {
    width: min(90%, var(--container-width));
    margin-inline: auto;
}

.container.narrow,
.narrow {
    width: min(90%, 760px);
    margin-inline: auto;
}

section {
    padding: 120px 0;
}


/* ---------------------------------------------------------
   TYPOGRAFIE
   --------------------------------------------------------- */

h1,
h2,
h3 {
    font-family: var(--font-heading);
    font-weight: 500;
    line-height: 1.05;
}

h1 {
    font-size: clamp(4rem, 8vw, 7rem);
    letter-spacing: -0.03em;
}

h2 {
    font-size: clamp(2.8rem, 5vw, 4.5rem);
    letter-spacing: -0.02em;
}

h3 {
    font-size: 2rem;
}

p {
    margin-top: 1.3rem;
}

.section-subtitle,
.hero-subtitle {
    margin-bottom: 1rem;

    color: var(--color-plum);

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    line-height: 1.4;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   KNOPPEN
   --------------------------------------------------------- */

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 52px;
    padding: 0.8rem 1.8rem;

    border: 1px solid transparent;
    border-radius: 100px;

    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;

    cursor: pointer;

    transition:
        background-color 0.3s ease,
        color 0.3s ease,
        border-color 0.3s ease,
        transform 0.3s ease;
}

.button:hover {
    transform: translateY(-2px);
}

.button-primary {
    background-color: var(--color-plum);
    color: var(--color-white);
}

.button-primary:hover {
    background-color: var(--color-lavender);
}

.button-secondary {
    border-color: var(--color-plum);
    color: var(--color-plum);
}

.button-secondary:hover {
    background-color: var(--color-plum);
    color: var(--color-white);
}

.text-link {
    display: inline-block;
    margin-top: 2rem;

    color: var(--color-plum);
    font-weight: 500;

    transition: opacity 0.3s ease;
}

.text-link:hover {
    opacity: 0.65;
}


/* ---------------------------------------------------------
   SECTIETITELS
   --------------------------------------------------------- */

.section-heading {
    max-width: 720px;
    margin-bottom: 5rem;
}

.section-heading h2 {
    margin-top: 0.5rem;
}

.section-intro {
    max-width: 650px;
    color: var(--color-text-soft);
    font-size: 1.05rem;
}


/* =========================================================
   NAVIGATIE
   ========================================================= */

.header {
    position: sticky;
    top: 0;
    z-index: 1000;

    background-color: rgba(248, 246, 242, 0.92);
    backdrop-filter: blur(12px);

    border-bottom: 1px solid rgba(111, 86, 125, 0.08);
}

.navigation {
    min-height: 86px;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;
}

.logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.logo img {
    width: 150px;
    max-height: 90px;
    object-fit: contain;
}

.navigation-menu {
    display: flex;
    align-items: center;

    gap: 2rem;

    list-style: none;
}

.navigation-menu a {
    position: relative;

    font-size: 0.84rem;
    font-weight: 400;
    letter-spacing: 0.02em;

    color: var(--color-text);

    transition: color 0.3s ease;
}

.navigation-menu a::after {
    content: "";

    position: absolute;
    left: 0;
    bottom: -7px;

    width: 0;
    height: 1px;

    background-color: var(--color-lavender);

    transition: width 0.3s ease;
}

.navigation-menu a:hover {
    color: var(--color-plum);
}

.navigation-menu a:hover::after {
    width: 100%;
}

.navigation > .button {
    flex-shrink: 0;
    min-height: 46px;
    padding-inline: 1.5rem;
}


/* =========================================================
   HERO
   ========================================================= */

.hero {
    padding-top: 45px;
    padding-bottom: 100px;

    overflow: hidden;
}

.hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.hero-content {
    position: relative;
    z-index: 2;

    max-width: 620px;
}

.hero-content h1 {
    max-width: 650px;

    margin-top: 0.4rem;
    margin-bottom: 1.6rem;
}

.hero-lead {
    max-width: 540px;

    margin-top: 0;

    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 3vw, 2.6rem);
    font-weight: 400;
    line-height: 1.2;

    color: var(--color-plum);
}

.hero-text {
    max-width: 560px;

    color: var(--color-text-soft);
    font-size: 1rem;
    line-height: 1.9;
}

.hero-buttons {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem;

    margin-top: 2.4rem;
}


/* ---------------------------------------------------------
   HERO FOTO
   --------------------------------------------------------- */

.hero-image {
    position: relative;

    min-height: 640px;

    transform: translateY(-110px);
}

.hero-image::before {
    content: "";

    position: absolute;

    width: 72%;
    height: 78%;

    top: -34px;
    right: -46px;

    border-radius: 46% 54% 42% 58% / 52% 43% 57% 48%;

    background-color: var(--color-lavender-light);

    opacity: 0.42;

    z-index: 0;
}

.hero-image img {
    position: relative;
    z-index: 1;

    display: block;

    width: 100%;
    height: 640px;

    object-fit: cover;
    object-position: center;

    border-radius: 48% 52% 46% 54% / 42% 47% 53% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.10);
}


/* ZACHTE VORM ACHTER TEKST */

.hero-content::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    left: -48px;
    top: -34px;

    border-radius: 50%;

    background-color: var(--color-lavender-light);

    opacity: 0.23;

    z-index: -1;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hero {
        padding-top: 70px;
        padding-bottom: 90px;
    }

    .hero-grid {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .hero-content {
        max-width: 680px;
    }

    .hero-image {
        min-height: 560px;

        transform: none;
    }

    .hero-image img {
        height: 560px;
    }

    .hero-image::before {
        width: 68%;
        height: 74%;

        top: -24px;
        right: -20px;
    }

}

/* Yoga: lesfoto direct onder 'Hoe voelt een les?' op mobiel. */
.yoga-experience-image-mobile {
    display: none !important;
}

.yoga-experience-image-desktop {
    display: block !important;
}

@media (max-width: 900px) {
    .yoga-experience-image-mobile {
        display: block !important;
        width: 100%;
        margin: 1rem 0 1.6rem;
        overflow: hidden;
        border-radius: 22px;
    }

    .yoga-experience-image-desktop {
        display: none !important;
    }

    .yoga-experience-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
    }
}

/* Gelijke beeldstijl voor alle mobiele hero's behalve Home. */
@media (max-width: 900px) {
    .about-page-hero-image-mobile,
    .workshops-page-hero-image-mobile,
    .retreats-hero-image-mobile,
    .yoga-hero-image-mobile,
    .bodywork-hero-image-mobile,
    .hd-hero-image-mobile,
    .ayurveda-hero-image-mobile {
        width: 100% !important;
        max-width: 620px;
        min-height: 0 !important;
        margin: 1rem auto 1.6rem !important;
        overflow: hidden;
        border-radius: 24px;
    }

    .about-page-hero-image-mobile img,
    .workshops-page-hero-image-mobile img,
    .retreats-hero-image-mobile img,
    .yoga-hero-image-mobile img,
    .bodywork-hero-image-mobile img,
    .hd-hero-image-mobile img,
    .ayurveda-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
        border-radius: 0;
    }
}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .hero {
        padding-top: 55px;
        padding-bottom: 75px;
    }

    .hero-grid {
        gap: 2.8rem;
    }

    .hero-content h1 {
        font-size: clamp(3rem, 14vw, 4.3rem);
        line-height: 0.98;
    }

    .hero-lead {
        font-size: 1.55rem;
        line-height: 1.3;
    }

    .hero-text {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    .hero-buttons {
        flex-direction: column;

        align-items: stretch;

        margin-top: 2rem;
    }

    .hero-buttons .button {
        width: 100%;

        text-align: center;
    }

    .hero-image {
        min-height: 430px;
    }

    .hero-image img {
        height: 430px;

        border-radius: 36px;
    }

    .hero-image::before {
        width: 75%;
        height: 72%;

        top: -18px;
        right: -15px;
    }

    .hero-content::before {
        width: 80px;
        height: 80px;

        left: -25px;
        top: -20px;
    }

}

/* =========================================================
   WORKSHOPS — MOBIELE HERO
   Foto onmiddellijk onder de ondertitel
   ========================================================= */

.workshops-page-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .workshops-page-hero-content {
        display: block;
        max-width: none;
    }

    .workshops-page-hero-image-desktop {
        display: none;
    }

    .workshops-page-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .workshops-page-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

/* Workshopspagina: één breed sfeerbeeld tussen de planning en thema's. */
.workshop-atmosphere {
    padding: 0 24px 40px;
    background: var(--color-background-soft);
}

.workshop-atmosphere .container {
    overflow: hidden;
    border-radius: 26px;
}

.workshop-atmosphere img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    object-position: center 52%;
}

@media (max-width: 600px) {
    .workshop-atmosphere {
        padding: 0 20px 28px;
    }

    .workshop-atmosphere .container {
        border-radius: 20px;
    }

    .workshop-atmosphere img {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 600px) {
    .workshops-page-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .workshops-page-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .workshops-page-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .workshops-page-hero .hero-lead {
        margin-bottom: 0;
    }

    .workshops-page-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .workshops-page-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}

/* Laatste responsive overrides voor de retreathero. */
.retreats-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .retreats-hero-content {
        display: block;
        max-width: none;
    }

    .retreats-hero-image-desktop {
        display: none;
    }

    .retreats-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .retreats-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .retreats-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .retreats-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .retreats-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .retreats-hero .hero-lead {
        margin-bottom: 0;
    }

    .retreats-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .retreats-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}

/* Laatste responsive overrides voor de retreathero. */
.retreats-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .retreats-hero-content {
        display: block;
        max-width: none;
    }

    .retreats-hero-image-desktop {
        display: none;
    }

    .retreats-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .retreats-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .retreats-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .retreats-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .retreats-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .retreats-hero .hero-lead {
        margin-bottom: 0;
    }

    .retreats-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .retreats-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}
/* =========================================================
   WELKOM
   ========================================================= */

.welcome {
    padding-top: 110px;
    padding-bottom: 120px;

    background-color: var(--color-background);
}

.welcome h2 {
    max-width: 760px;

    margin-bottom: 2rem;
}

.welcome p {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* =========================================================
   MIJN BEGELEIDING
   ========================================================= */

.guidance {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.guidance-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;
}

.card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding: 3rem;

    background-color: rgba(255, 255, 255, 0.55);

    border: 1px solid rgba(111, 86, 125, 0.10);
    border-radius: 32px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.card:hover {
    transform: translateY(-6px);

    border-color: rgba(111, 86, 125, 0.22);

    box-shadow:
        0 24px 60px rgba(61, 57, 53, 0.08);
}

.card-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    width: 58px;
    height: 58px;

    margin-bottom: 2rem;

    border-radius: 50%;

    background-color: var(--color-lavender-light);

    font-size: 1.7rem;
}

.card h3 {
    margin-bottom: 1rem;

    color: var(--color-text);

    font-size: clamp(2.2rem, 3vw, 3rem);
}

.card > p {
    margin-top: 0;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.card ul {
    margin-top: 2rem;
    margin-bottom: 2rem;

    padding-left: 0;

    list-style: none;
}

.card li {
    position: relative;

    padding: 0.65rem 0 0.65rem 1.5rem;

    color: var(--color-text-soft);

    border-bottom: 1px solid rgba(111, 86, 125, 0.08);
}

.card li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 1.25rem;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color: var(--color-lavender);
}

.card > a {
    display: inline-block;

    margin-top: auto;
    padding-top: 1rem;

    color: var(--color-plum);

    font-size: 0.9rem;
    font-weight: 500;

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.card > a:hover {
    color: var(--color-lavender);

    transform: translateX(4px);
}

.card:nth-child(1) {
    transform: translateY(0);
}

.card:nth-child(2) {
    transform: translateY(28px);
}

.card:nth-child(3) {
    transform: translateY(-10px);
}

.card:nth-child(4) {
    transform: translateY(18px);
}

.card:nth-child(1):hover {
    transform: translateY(-6px);
}

.card:nth-child(2):hover {
    transform: translateY(20px);
}

.card:nth-child(3):hover {
    transform: translateY(-18px);
}

.card:nth-child(4):hover {
    transform: translateY(10px);
}


/* =========================================================
   OVER INNERFREE
   ========================================================= */

.about {
    padding-top: 140px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.about-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: start;

    gap: clamp(4rem, 8vw, 8rem);
}

.about-image {
    position: relative;
}

.about-image::before {
    content: "";

    position: absolute;

    width: 78%;
    height: 82%;

    left: -34px;
    bottom: -34px;

    border-radius: 44% 56% 52% 48% / 56% 45% 55% 44%;

    background-color: var(--color-lavender-light);

    opacity: 0.35;

    z-index: 0;
}

.about-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 660px;

    object-fit: cover;
    object-position: center;

    border-radius: 46% 54% 49% 51% / 42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.about-content {
    max-width: 650px;
}

.about-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.about-content p {
    color: var(--color-text-soft);

    font-size: 1rem;
    line-height: 1.95;
}


/* =========================================================
   BETEKENIS VAN INNERFREE
   ========================================================= */

.meaning {
    padding-top: 140px;
    padding-bottom: 140px;

    text-align: center;

    background-color: var(--color-background-soft);
}

.meaning h2 {
    margin-top: 1rem;
    margin-bottom: 2.5rem;

    color: var(--color-plum);
}

.meaning p {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* =========================================================
   MIJN ACHTERGROND / OPLEIDINGEN
   ========================================================= */

.background {
    padding-top: 140px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.background-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 2rem;

    margin-top: 1rem;
}

.background-item {
    padding: 2.5rem;

    border-top: 1px solid rgba(111, 86, 125, 0.18);

    background-color: rgba(255, 255, 255, 0.35);
}

.background-item h3 {
    margin-bottom: 1.5rem;

    color: var(--color-plum);

    font-size: 2rem;
}

.background-item ul {
    list-style: none;

    padding: 0;
    margin: 0;
}

.background-item li {
    padding: 0.7rem 0;

    color: var(--color-text-soft);

    border-bottom: 1px solid rgba(111, 86, 125, 0.08);

    line-height: 1.6;
}

.background-item li:last-child {
    border-bottom: none;
}

.ongoing-training {
    max-width: 820px;

    margin-top: 5rem;
    padding: 3rem;

    background-color: var(--color-background-soft);

    border-radius: 28px;
}

.ongoing-training p:last-child {
    color: var(--color-text-soft);

    font-size: 1rem;
    line-height: 1.9;
}


/* =========================================================
   KERNQUOTE
   ========================================================= */

.quote-section {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-plum);
}

.quote-section blockquote {
    margin: 0;

    text-align: center;
}

.quote-section blockquote p {
    margin: 0;

    font-family: var(--font-heading);
    font-size: clamp(2.6rem, 5vw, 4.8rem);
    font-weight: 400;
    line-height: 1.15;

    color: var(--color-white);
}

.quote-section blockquote::before {
    content: "";

    display: block;

    width: 54px;
    height: 1px;

    margin: 0 auto 2.5rem;

    background-color: var(--color-lavender-light);
}


/* =========================================================
   WORKSHOPS
   ========================================================= */

.workshops {
    padding-top: 140px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.workshops-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;
}

.workshop-card {
    padding: 2.8rem;

    background-color: rgba(255, 255, 255, 0.5);

    border: 1px solid rgba(111, 86, 125, 0.10);
    border-radius: 30px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.workshop-card:hover {
    transform: translateY(-5px);

    border-color: rgba(111, 86, 125, 0.22);

    box-shadow:
        0 22px 55px rgba(61, 57, 53, 0.07);
}

.workshop-card h3 {
    margin-bottom: 1rem;

    color: var(--color-plum);

    font-size: clamp(2.1rem, 3vw, 2.8rem);
}

.workshop-card p {
    margin-top: 0;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.section-action {
    margin-top: 3rem;
}


/* =========================================================
   RETREATS
   ========================================================= */

.retreats {
    padding-top: 140px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.retreats-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.retreats-content {
    max-width: 620px;
}

.retreats-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.retreats-content p {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.retreats-image {
    position: relative;
}

.retreats-image::before {
    content: "";

    position: absolute;

    width: 76%;
    height: 80%;

    right: -30px;
    bottom: -28px;

    border-radius: 52% 48% 43% 57% / 48% 55% 45% 52%;

    background-color: var(--color-lavender-light);

    opacity: 0.32;

    z-index: 0;
}

.retreats-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 620px;

    object-fit: cover;
    object-position: center;

    border-radius: 50% 50% 46% 54% / 44% 51% 49% 56%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}


/* =========================================================
   THE INNERFREE CIRCLE
   ========================================================= */

.circle {
    padding-top: 140px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);

    text-align: center;
}

.circle .narrow {
    max-width: 760px;
}

.circle h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.circle p {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.circle .button {
    margin-top: 2.5rem;
}


/* =========================================================
   ONT-MOETING / BOEKING
   ========================================================= */

.booking {
    position: relative;

    padding-top: 150px;
    padding-bottom: 150px;

    overflow: hidden;

    background-color: var(--color-lavender-light);

    text-align: center;
}

.booking::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    top: -220px;
    left: -140px;

    border-radius: 50%;

    background-color: rgba(255, 255, 255, 0.28);
}

.booking::after {
    content: "";

    position: absolute;

    width: 340px;
    height: 340px;

    right: -170px;
    bottom: -180px;

    border-radius: 50%;

    background-color: rgba(111, 86, 125, 0.08);
}

.booking .container {
    position: relative;
    z-index: 1;
}

.booking h2 {
    max-width: 750px;

    margin: 0.5rem auto 1.5rem;
}

.booking-text {
    margin-top: 0;

    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.3rem);
    line-height: 1.3;

    color: var(--color-plum);
}

.booking-text strong {
    font-weight: 600;
}

.booking .button {
    margin-top: 2.5rem;
}


/* =========================================================
   CONTACT
   ========================================================= */

.contact {
    padding-top: 130px;
    padding-bottom: 130px;

    background-color: var(--color-background);
}

.contact h2 {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
}

.contact p {
    max-width: 650px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.9;
}

.contact-links {
    display: flex;
    flex-wrap: wrap;

    gap: 1rem 2.5rem;

    margin-top: 2.5rem;
}

.contact-links a {
    position: relative;

    color: var(--color-plum);

    font-weight: 500;

    padding-bottom: 5px;

    transition: color 0.3s ease;
}

.contact-links a::after {
    content: "";

    position: absolute;

    left: 0;
    bottom: 0;

    width: 100%;
    height: 1px;

    background-color: var(--color-lavender);
}

.contact-links a:hover {
    color: var(--color-lavender);
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer {
    padding-top: 80px;

    background-color: var(--color-text);

    color: var(--color-background);
}


/* BOVENSTE DEEL */

.footer-content {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;

    gap: 4rem;

    padding-bottom: 70px;
}


/* BRAND / LOGO */

.footer-brand {
    flex-shrink: 0;
}

.footer-brand h2 {
    margin: 0;

    color: var(--color-white);

    font-size: 3rem;
}

.footer-brand p {
    margin-top: 0.5rem;
    margin-bottom: 0;

    color: rgba(255, 255, 255, 0.65);

    font-family: var(--font-heading);
    font-size: 1.4rem;
}


/* NAVIGATIE */

.footer-navigation {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;

    max-width: 560px;

    gap: 1rem 2rem;
}

.footer-navigation a {
    color: rgba(255, 255, 255, 0.72);

    font-size: 0.85rem;

    transition: color 0.3s ease;
}

.footer-navigation a:hover {
    color: var(--color-lavender-light);
}


/* ONDERSTE DEEL */

.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 2rem;

    padding-top: 25px;
    padding-bottom: 25px;

    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-bottom p {
    margin: 0;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.75rem;
}


/* JURIDISCHE LINKS */

.footer-legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 1rem 1.5rem;
}

.footer-legal a {
    display: inline-block;

    color: rgba(255, 255, 255, 0.48);

    font-size: 0.75rem;

    transition: color 0.3s ease;
}

.footer-legal a:hover {
    color: var(--color-white);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .footer {
        padding-top: 65px;
    }

    .footer-content {
        flex-direction: column;

        gap: 2.5rem;

        padding-bottom: 50px;
    }

    .footer-navigation {
        justify-content: flex-start;

        max-width: 100%;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .footer {
        padding-top: 55px;
    }

    .footer-content {
        gap: 2rem;

        padding-bottom: 40px;
    }

    .footer-brand h2 {
        font-size: 2.5rem;
    }

    .footer-brand p {
        font-size: 1.2rem;
    }

    .footer-navigation {
        flex-direction: column;

        gap: 0.9rem;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;

        gap: 1rem;

        padding-top: 22px;
        padding-bottom: 22px;
    }

    .footer-legal {
        gap: 0.8rem 1.2rem;
    }

}



/* =========================================================
   RESPONSIVE — ALGEMEEN + HOMEPAGE
   ========================================================= */

/* Mobiele navigatieknop: verborgen op desktop */
.menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
}

.menu-toggle span {
    display: block;
    width: 24px;
    height: 1px;
    margin: 5px auto;
    background-color: var(--color-text);
    transition: transform 0.3s ease, opacity 0.3s ease;
}

@media (max-width: 1050px) {
    .navigation-menu {
        gap: 1.2rem;
    }

    .navigation-menu a {
        font-size: 0.78rem;
    }

    .navigation > .button {
        padding-inline: 1.15rem;
    }
}

@media (max-width: 1000px) {
    .background-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 900px) {
    /* Navigatie */
    .navigation {
        position: relative;
        min-height: 76px;
        gap: 1rem;
    }

    .logo img {
        width: 125px;
        max-height: 72px;
    }

    .menu-toggle {
        display: block;
        margin-left: auto;
    }

    .navigation > .button {
        display: none;
    }

    .navigation-menu {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        padding: 1.4rem 1.5rem 1.7rem;
        background-color: rgba(248, 246, 242, 0.98);
        border-top: 1px solid rgba(111, 86, 125, 0.08);
        border-bottom: 1px solid rgba(111, 86, 125, 0.08);
        box-shadow: 0 18px 40px rgba(61, 57, 53, 0.08);
    }

    .navigation-menu.is-open {
        display: flex;
    }

    .navigation-menu li {
        width: 100%;
    }

    .navigation-menu a {
        display: block;
        width: 100%;
        padding: 0.8rem 0;
        font-size: 0.95rem;
    }

    .navigation-menu a::after {
        display: none;
    }

    .menu-toggle.is-open span:nth-child(1) {
        transform: translateY(6px) rotate(45deg);
    }

    .menu-toggle.is-open span:nth-child(2) {
        opacity: 0;
    }

    .menu-toggle.is-open span:nth-child(3) {
        transform: translateY(-6px) rotate(-45deg);
    }

    /* Homepage — welkom */
    .welcome {
        padding-top: 90px;
        padding-bottom: 95px;
    }

    .welcome h2,
    .welcome p {
        max-width: 650px;
    }

    /* Homepage — begeleiding */
    .guidance {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .guidance-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    .card {
        padding: 2.5rem;
    }

    .card:nth-child(1),
    .card:nth-child(2),
    .card:nth-child(3),
    .card:nth-child(4) {
        transform: none;
    }

    .card:nth-child(1):hover,
    .card:nth-child(2):hover,
    .card:nth-child(3):hover,
    .card:nth-child(4):hover {
        transform: translateY(-4px);
    }

    /* Homepage — over */
    .about {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .about-image {
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .about-image img {
        height: 560px;
    }

    .about-content {
        max-width: 680px;
    }

    /* Homepage — betekenis */
    .meaning {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    /* Homepage — achtergrond */
    .background {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .background-grid {
        grid-template-columns: 1fr;
        max-width: 700px;
        margin-left: auto;
        margin-right: auto;
    }

    .ongoing-training {
        max-width: 700px;
        margin-top: 3rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Homepage — quote */
    .quote-section {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    /* Homepage — workshops */
    .workshops {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .workshops-grid {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }

    /* Homepage — retreats */
    .retreats {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .retreats-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .retreats-content {
        max-width: 680px;
    }

    .retreats-image {
        width: min(100%, 650px);
        margin-inline: auto;
    }

    .retreats-image img {
        height: 560px;
    }

    /* Homepage — circle */
    .circle {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    /* Gedeelde booking/contact/footer */
    .booking {
        padding-top: 105px;
        padding-bottom: 110px;
    }

    .contact {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .footer {
        padding-top: 65px;
    }

    .footer-content {
        flex-direction: column;
        gap: 3rem;
        padding-bottom: 50px;
    }

    .footer-navigation {
        justify-content: flex-start;
    }

    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
}

@media (max-width: 700px) {
    body {
        font-size: 15px;
        line-height: 1.75;
    }

    h1 {
        font-size: clamp(3.2rem, 14vw, 4.6rem);
    }

    h2 {
        font-size: clamp(2.4rem, 10vw, 3.6rem);
    }

    h3 {
        font-size: 1.9rem;
    }

    .section-subtitle,
    .hero-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.15em;
    }
}

@media (max-width: 600px) {
    .container,
    .container.narrow,
    .narrow {
        width: min(92%, 100%);
    }

    .logo img {
        width: 110px;
    }

    /* Homepage — welkom */
    .welcome {
        padding: 75px 22px 80px;
    }

    .welcome h2 {
        margin-bottom: 1.6rem;
    }

    .welcome p {
        font-size: 0.98rem;
        line-height: 1.85;
    }

    /* Homepage — begeleiding */
    .guidance {
        padding: 80px 22px 90px;
    }

    .guidance-grid {
        gap: 1.3rem;
    }

    .card {
        padding: 2.1rem 1.8rem;
        border-radius: 24px;
    }

    .card-icon {
        width: 52px;
        height: 52px;
        margin-bottom: 1.5rem;
        font-size: 1.5rem;
    }

    .card h3 {
        font-size: 2rem;
    }

    .card > p {
        line-height: 1.8;
    }

    .card ul {
        margin-top: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .card li {
        padding-top: 0.55rem;
        padding-bottom: 0.55rem;
    }

    /* Homepage — over */
    .about {
        padding: 80px 22px 90px;
    }

    .about-grid {
        gap: 3rem;
    }

    .about-image img {
        height: 460px;
        border-radius: 32px;
    }

    .about-image::before {
        width: 72%;
        height: 76%;
        left: -18px;
        bottom: -18px;
    }

    .about-content p {
        font-size: 0.95rem;
        line-height: 1.8;
    }

    /* Homepage — betekenis */
    .meaning {
        padding: 80px 22px 90px;
    }

    .meaning h2 {
        margin-bottom: 2rem;
    }

    .meaning p {
        font-size: 0.98rem;
        line-height: 1.85;
    }

    /* Homepage — achtergrond */
    .background {
        padding: 80px 22px 90px;
    }

    .background-grid {
        gap: 1.3rem;
    }

    .background-item {
        padding: 2rem 1.8rem;
        background-color: rgba(255, 255, 255, 0.35);
    }

    .background-item h3 {
        font-size: 1.8rem;
    }

    .ongoing-training {
        margin-top: 3rem;
        padding: 2.2rem 1.8rem;
        border-radius: 22px;
    }

    /* Homepage — quote */
    .quote-section {
        padding: 85px 22px 90px;
    }

    .quote-section blockquote p {
        font-size: clamp(2.2rem, 10vw, 3.4rem);
        line-height: 1.18;
    }

    .quote-section blockquote::before {
        margin-bottom: 2rem;
    }

    /* Homepage — workshops */
    .workshops {
        padding: 80px 22px 90px;
    }

    .workshops-grid {
        gap: 1.3rem;
    }

    .workshop-card {
        padding: 2.1rem 1.8rem;
        border-radius: 24px;
    }

    .workshop-card h3 {
        font-size: 2rem;
    }

    .workshop-card p {
        line-height: 1.8;
    }

    .section-action {
        margin-top: 2rem;
    }

    .section-action .button,
    .circle .button,
    .booking .button {
        width: 100%;
    }

    /* Homepage — retreats */
    .retreats {
        padding: 80px 22px 90px;
    }

    .retreats-grid {
        gap: 3rem;
    }

    .retreats-content p {
        line-height: 1.8;
    }

    .retreats-image img {
        height: 460px;
        border-radius: 32px;
    }

    .retreats-image::before {
        width: 72%;
        height: 74%;
        right: -16px;
        bottom: -16px;
    }

    /* Homepage — circle */
    .circle {
        padding: 80px 22px 90px;
    }

    .circle p {
        font-size: 0.98rem;
        line-height: 1.85;
    }

    .circle .button {
        margin-top: 2rem;
    }

    /* Gedeelde booking */
    .booking {
        padding: 80px 22px 85px;
    }

    .booking::before {
        width: 300px;
        height: 300px;
        top: -170px;
        left: -150px;
    }

    .booking::after {
        width: 250px;
        height: 250px;
        right: -140px;
        bottom: -140px;
    }

    /* Contact */
    .contact {
        padding: 85px 22px;
    }

    .contact-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.2rem;
    }

    /* Footer */
    .footer-navigation,
    .footer-legal {
        flex-direction: column;
    }

    .footer-navigation {
        gap: 1rem;
    }

    .footer-legal {
        gap: 0.6rem;
    }
}

@media (max-width: 420px) {
    .logo img {
        width: 100px;
    }

    .hero-content h1 {
        font-size: 3rem;
    }

    .hero-lead {
        font-size: 1.45rem;
    }

    .card,
    .workshop-card,
    .ongoing-training {
        padding: 1.6rem;
    }

    .footer-brand h2 {
        font-size: 2.4rem;
    }
}

/* =========================================================
   LAATSTE TECHNISCHE AFWERKING
   ========================================================= */


/* ---------------------------------------------------------
   TOEGANKELIJKHEID / FOCUS
   --------------------------------------------------------- */

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--color-lavender);
    outline-offset: 4px;
    border-radius: 8px;
}


/* ---------------------------------------------------------
   SELECTIEKLEUR
   --------------------------------------------------------- */

::selection {
    background-color: var(--color-lavender-light);
    color: var(--color-text);
}


/* ---------------------------------------------------------
   BETERE AFBEELDINGSWEERGAVE
   --------------------------------------------------------- */

.hero-image img,
.about-image img,
.retreats-image img {
    background-color: var(--color-background-soft);
}


/* ---------------------------------------------------------
   STANDAARD HOVER VOOR TEKSTLINKS
   --------------------------------------------------------- */

a {
    transition:
        color 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}


/* ---------------------------------------------------------
   BETERE SCROLLPOSITIE BIJ ANKERLINKS
   --------------------------------------------------------- */

section {
    scroll-margin-top: 100px;
}


/* ---------------------------------------------------------
   TEKSTBREEDTES BEWAKEN
   --------------------------------------------------------- */

.hero-text,
.about-content p,
.welcome p,
.section-intro,
.circle p,
.contact p,
.retreats-content p {
    text-wrap: pretty;
}


/* ---------------------------------------------------------
   KAARTEN: EGALE HOOGTE EN NETTERE UITLIJNING
   --------------------------------------------------------- */

.guidance-grid,
.workshops-grid {
    align-items: stretch;
}

.card,
.workshop-card {
    height: 100%;
}


/* ---------------------------------------------------------
   BUTTONS OP TOUCH DEVICES
   --------------------------------------------------------- */

@media (hover: none) {

    .button:hover,
    .card:hover,
    .workshop-card:hover,
    .card > a:hover {
        transform: none;
    }

}


/* ---------------------------------------------------------
   EXTRA TABLET-AFWERKING
   --------------------------------------------------------- */

@media (max-width: 1100px) {

    .navigation-menu {
        gap: 1rem;
    }

    .navigation {
        gap: 1.25rem;
    }

    .hero-grid,
    .about-grid,
    .retreats-grid {
        gap: 3.5rem;
    }

}


/* ---------------------------------------------------------
   MOBIELE TYPOGRAFIE
   --------------------------------------------------------- */

@media (max-width: 700px) {

    body {
        font-size: 15px;
        line-height: 1.75;
    }

    h1 {
        font-size: clamp(3.2rem, 14vw, 4.6rem);
    }

    h2 {
        font-size: clamp(2.4rem, 10vw, 3.6rem);
    }

    h3 {
        font-size: 1.9rem;
    }

    .section-subtitle,
    .hero-subtitle {
        font-size: 0.7rem;
        letter-spacing: 0.15em;
    }

}


/* ---------------------------------------------------------
   MOBIELE CONTAINERS
   --------------------------------------------------------- */

@media (max-width: 600px) {

    .container,
    .container.narrow,
    .narrow {
        width: min(92%, 100%);
    }

}



/* ---------------------------------------------------------
   MINDER BEWEGING VOOR GEBRUIKERS DIE DAT VERKIEZEN
   --------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

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

}


/* ---------------------------------------------------------
   ALGEMENE AFWERKING
   --------------------------------------------------------- */

main {
    overflow-x: hidden;
}

.footer a,
.contact a,
.text-link,
.card > a {
    text-underline-offset: 4px;
}

.footer-brand,
.footer-navigation,
.footer-bottom {
    position: relative;
    z-index: 1;
}
/* =========================================================
   HERO FOTO - DEFINITIEVE POSITIE
   ========================================================= */

@media (min-width: 901px) {

    .hero {
        position: relative;
        padding-top: 40px;
    }

    .hero-image {
        min-height: 640px;
        height: 640px;
        transform: translateY(-150px);
    }

    .hero-image img {
        width: 100%;
        height: 640px;
        object-fit: cover;
        object-position: center;
    }

}

/* =========================================================
   AYURVEDA — MOBIELE HERO
   Foto onmiddellijk onder de ondertitel
   ========================================================= */

.ayurveda-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .ayurveda-hero-content {
        display: block;
        max-width: none;
    }

    .ayurveda-hero-image-desktop {
        display: none;
    }

    .ayurveda-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .ayurveda-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .ayurveda-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .ayurveda-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .ayurveda-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .ayurveda-hero .hero-lead {
        margin-bottom: 0;
    }

    .ayurveda-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .ayurveda-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}

/* Subtiele nadruk in lopende tekst */
main p strong,
main li strong {
    color: var(--color-plum);
    font-weight: 600;
}

/* Compacte afsluiting met boeking en contact */
.booking .contact-links {
    justify-content: center;
    margin-top: 1.5rem;
}

.booking .contact-links a {
    color: var(--color-plum);
}

@media (max-width: 900px) {
    /* Homepage: foto bij Over InnerFree na de titel */
    .about-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.8rem;
    }

    .about-content {
        display: contents;
    }

    .about-content .section-subtitle { order: 1; }
    .about-content h2 { order: 2; }

    .about-image {
        order: 3;
        width: min(100%, 650px);
        margin: 0.4rem auto 1rem;
    }

    .about-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .about-content p:not(.section-subtitle) { order: 4; }
    .about-content .text-link { order: 5; }

    .booking .contact-links {
        justify-content: center;
        gap: 0.9rem 1.5rem;
    }
}

@media (max-width: 600px) {
    /* Homepage: volledige eerste indruk binnen het mobiele scherm */
    .hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .hero-grid {
        gap: 0.75rem;
    }

    .hero-content .hero-subtitle {
        margin-top: 0;
        margin-bottom: 0.1rem;
    }

    .hero-content h1 {
        margin-top: 0;
        margin-bottom: 0.25rem;
        font-size: clamp(2.8rem, 12vw, 4rem);
        line-height: 0.98;
    }

    .hero-content .hero-lead {
        margin-top: 0;
        margin-bottom: 0.25rem;
        font-size: clamp(1.3rem, 6vw, 1.65rem);
        line-height: 1.18;
    }

    .hero-image {
        margin: 0.25rem auto 0.8rem;
    }

    .hero-image img {
        width: 100%;
        height: min(42vh, 360px);
        aspect-ratio: auto;
        object-fit: contain;
        object-position: center;
    }
}

/* Yoga hero: aparte, betrouwbare mobiele beeldpositie */
.yoga-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .yoga-hero-content {
        display: block;
        max-width: none;
    }

    .yoga-hero-image-desktop {
        display: none;
    }

    .yoga-hero-image-mobile {
        display: block;
        width: min(100%, 650px);
        min-height: 0;
        margin: 1rem auto 1.5rem;
        transform: none;
    }

    .yoga-hero-image-mobile img {
        width: 100%;
        height: auto;
        max-height: 460px;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .yoga-experience-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .yoga-experience-image {
        width: 100%;
        border-radius: 24px;
    }

    .yoga-experience-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 16 / 10;
        object-fit: cover;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .yoga-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .yoga-hero-content .section-subtitle {
        margin-top: 0;
        margin-bottom: 0.15rem;
    }

    .yoga-hero-content h1 {
        margin-top: 0;
        margin-bottom: 0.35rem;
        font-size: clamp(2.8rem, 12vw, 4rem);
        line-height: 0.98;
    }

    .yoga-hero-content .hero-lead {
        margin-top: 0;
        margin-bottom: 0.4rem;
        font-size: clamp(1.3rem, 6vw, 1.65rem);
        line-height: 1.18;
    }

    .yoga-hero-image-mobile {
        margin-top: 0.6rem;
        margin-bottom: 1.2rem;
    }

    .yoga-hero-image-mobile img {
        height: min(42vh, 360px);
        max-height: 360px;
    }
}

/* Lichaamswerk: beelden en betrouwbare mobiele hero */
.bodywork-hero-image-mobile {
    display: none;
}

.bodywork-experience-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.4rem;
    margin: 2.8rem 0;
}

.bodywork-experience-images figure {
    margin: 0;
    overflow: hidden;
    border-radius: 24px;
}

.bodywork-experience-images img {
    display: block;
    width: 100%;
    height: 300px;
    object-fit: cover;
}

.treatment-card-image {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    margin: 1.4rem 0 2rem;
    object-fit: cover;
    object-position: center;
    border-radius: 20px;
}

.treatment-card-image-portrait {
    aspect-ratio: 4 / 3;
    object-position: center 42%;
}

@media (max-width: 900px) {
    .bodywork-hero-content {
        display: block;
        max-width: none;
    }

    .bodywork-hero-image-desktop {
        display: none;
    }

    .bodywork-hero-image-mobile {
        display: block;
        width: min(100%, 650px);
        min-height: 0;
        margin: 1rem auto 1.5rem;
        transform: none;
    }

    .bodywork-hero-image-mobile img {
        width: 100%;
        height: auto;
        max-height: 460px;
        aspect-ratio: auto;
        object-fit: contain;
    }

    .other-bodywork-intro {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 2.2rem;
        padding-inline: 22px;
    }

    .other-bodywork-intro .section-heading {
        width: min(100%, 760px);
        margin-inline: auto;
        padding-left: 0;
    }

    .other-bodywork-photo {
        width: min(calc(100% - 44px), 760px);
        height: auto;
        aspect-ratio: 16 / 9;
        margin-inline: auto;
    }

    .other-bodywork-grid {
        grid-template-columns: minmax(0, 1fr);
        width: min(calc(100% - 44px), 760px);
        margin-inline: auto;
    }
}

@media (max-width: 600px) {
    .bodywork-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .bodywork-hero-content .section-subtitle {
        margin-top: 0;
        margin-bottom: 0.15rem;
    }

    .bodywork-hero-content h1 {
        margin-top: 0;
        margin-bottom: 0.35rem;
        font-size: clamp(2.8rem, 12vw, 4rem);
        line-height: 0.98;
    }

    .bodywork-hero-content .hero-lead {
        margin-top: 0;
        margin-bottom: 0.4rem;
        font-size: clamp(1.3rem, 6vw, 1.65rem);
        line-height: 1.18;
    }

    .bodywork-hero-image-mobile {
        margin-top: 0.6rem;
        margin-bottom: 1.2rem;
    }

    .bodywork-hero-image-mobile img {
        height: min(42vh, 360px);
        max-height: 360px;
    }

    .bodywork-experience-images {
        grid-template-columns: minmax(0, 1fr);
        gap: 1rem;
        margin: 2rem 0;
    }

    .bodywork-experience-images img {
        height: auto;
        aspect-ratio: 16 / 10;
    }
}

/* Human Design: betrouwbare mobiele hero */
.hd-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .hd-hero-content {
        display: block;
        max-width: none;
    }

    .hd-hero-image-desktop {
        display: none;
    }

    .hd-hero-image-mobile {
        display: block;
        width: min(100%, 650px);
        min-height: 0;
        margin: 1rem auto 1.5rem;
        transform: none;
    }

    .hd-hero-image-mobile img {
        width: 100%;
        height: auto;
        max-height: 460px;
        aspect-ratio: auto;
        object-fit: contain;
    }
}

@media (max-width: 600px) {
    .hd-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .hd-hero-content .section-subtitle {
        margin-top: 0;
        margin-bottom: 0.15rem;
    }

    .hd-hero-content h1 {
        margin-top: 0;
        margin-bottom: 0.35rem;
        font-size: clamp(2.75rem, 11.5vw, 3.9rem);
        line-height: 0.98;
    }

    .hd-hero-content .hero-lead {
        margin-top: 0;
        margin-bottom: 0.4rem;
        font-size: clamp(1.28rem, 5.8vw, 1.6rem);
        line-height: 1.18;
    }

    .hd-hero-image-mobile {
        margin-top: 0.6rem;
        margin-bottom: 1.2rem;
    }

    .hd-hero-image-mobile img {
        height: min(40vh, 350px);
        max-height: 350px;
    }
}
/* =========================================================
   SCROLL ANIMATIES
   ========================================================= */

.reveal {
    opacity: 0;
    transform: translateY(28px);

    transition:
        opacity 0.8s ease,
        transform 0.8s ease;
}

.reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* Kaarten iets sneller */

.card.reveal,
.workshop-card.reveal,
.background-item.reveal {
    transition-duration: 0.65s;
}


/* =========================================================
   HEADER BIJ SCROLLEN
   ========================================================= */

.header {
    transition:
        min-height 0.3s ease,
        box-shadow 0.3s ease,
        background-color 0.3s ease;
}

.header-scrolled {
    background-color: rgba(248, 246, 242, 0.97);

    box-shadow:
        0 8px 30px rgba(61, 57, 53, 0.06);
}

.header-scrolled .navigation {
    min-height: 72px;
}


/* =========================================================
   MINDER ANIMATIE INDIEN GEWENST
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .reveal {
        opacity: 1;
        transform: none;
    }

}
/* =========================================================
   YOGA PAGINA
   ========================================================= */


/* ---------------------------------------------------------
   YOGA HERO
   --------------------------------------------------------- */

.yoga-hero {
    position: relative;
    padding-top: 90px;
    padding-bottom: 130px;

    overflow: hidden;

    background-color: var(--color-background);
}

.yoga-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.yoga-hero-content {
    position: relative;
    z-index: 2;

    max-width: 620px;
}

.yoga-hero-content h1 {
    margin-top: 0.5rem;
    margin-bottom: 1.8rem;

    font-size: clamp(4rem, 7vw, 6.5rem);
}

.yoga-hero-content .hero-lead {
    margin-bottom: 2rem;
}

.yoga-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 560px;

    color: var(--color-text-soft);

    line-height: 1.95;
}

.yoga-hero-content .button {
    margin-top: 2.5rem;
}


/* Hero-afbeelding */

.yoga-hero-image {
    position: relative;

    min-height: 640px;
}

.yoga-hero-image::before {
    content: "";

    position: absolute;

    width: 74%;
    height: 80%;

    top: -32px;
    right: -42px;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 42% 58% /
        52% 43% 57% 48%;

    opacity: 0.38;

    z-index: 0;
}

.yoga-hero-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 640px;

    object-fit: cover;
    object-position: center 30%;

    border-radius:
        48% 52% 46% 54% /
        42% 47% 53% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.10);
}


/* ---------------------------------------------------------
   YOGA INTRO
   --------------------------------------------------------- */

.yoga-intro {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.yoga-intro h2 {
    max-width: 700px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.yoga-intro p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   KRIYA KUNDALINI
   --------------------------------------------------------- */

.kriya-section {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.kriya-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);

    align-items: start;

    gap: clamp(4rem, 8vw, 8rem);
}

.kriya-content {
    position: sticky;
    top: 130px;
}

.kriya-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.kriya-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.kriya-content strong {
    color: var(--color-plum);

    font-weight: 500;
}


/* Kriya-elementen */

.kriya-elements {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.3rem;
}

.kriya-element {
    position: relative;

    min-height: 210px;

    padding: 2.2rem;

    background-color: var(--color-background-soft);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 26px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.kriya-element:hover {
    transform: translateY(-4px);

    border-color: rgba(111, 86, 125, 0.18);

    box-shadow:
        0 18px 45px rgba(61, 57, 53, 0.06);
}

.kriya-element span {
    display: block;

    margin-bottom: 1.3rem;

    color: var(--color-lavender);

    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
}

.kriya-element h3 {
    margin-bottom: 0.7rem;

    color: var(--color-plum);

    font-size: 1.8rem;
}

.kriya-element p {
    margin: 0;

    color: var(--color-text-soft);

    font-size: 0.9rem;
    line-height: 1.75;
}


/* Laatste element mooi centreren */

.kriya-element:last-child {
    grid-column: 1 / -1;

    width: calc(50% - 0.65rem);

    justify-self: center;
}


/* ---------------------------------------------------------
   HOE KAN EEN LES AANVOELEN?
   --------------------------------------------------------- */

.yoga-experience {
    position: relative;

    padding-top: 150px;
    padding-bottom: 150px;

    overflow: hidden;

    background-color: var(--color-plum);

    text-align: center;
}

.yoga-experience::before {
    content: "";

    position: absolute;

    width: 400px;
    height: 400px;

    top: -230px;
    left: -170px;

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 50%;
}

.yoga-experience::after {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    right: -170px;
    bottom: -190px;

    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 50%;
}

.yoga-experience .narrow {
    position: relative;
    z-index: 1;
}

.yoga-experience .section-subtitle {
    color: var(--color-lavender-light);
}

.yoga-experience h2 {
    margin-top: 0.5rem;
    margin-bottom: 2.5rem;

    color: var(--color-white);
}

.yoga-experience p:not(.section-subtitle) {
    max-width: 680px;

    margin-left: auto;
    margin-right: auto;

    color: rgba(255, 255, 255, 0.78);

    font-size: 1.05rem;
    line-height: 1.95;
}
.yoga-experience-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.yoga-experience-content {
    max-width: 650px;
}

.yoga-experience-image {
    width: 100%;
    overflow: hidden;
    border-radius:
        46% 54% 48% 52% /
        52% 45% 55% 48%;
}

.yoga-experience-image img {
    width: 100%;
    height: 520px;

    display: block;
    object-fit: cover;
    object-position: center;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}


/* ---------------------------------------------------------
   ENERGIEWERKING
   --------------------------------------------------------- */

.energy-section {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.energy-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: start;

    gap: clamp(4rem, 9vw, 9rem);
}

.energy-title h2 {
    max-width: 540px;

    margin-top: 0.5rem;

    color: var(--color-plum);
}

.energy-content {
    max-width: 620px;
}

.energy-content p {
    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.energy-content p:first-child {
    margin-top: 0;

    font-family: var(--font-heading);
    font-size: 1.65rem;
    line-height: 1.45;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   PERSOONLIJK AFGESTEMDE KRIYA
   --------------------------------------------------------- */

.personal-kriya {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.personal-kriya-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* Afbeelding */

.personal-kriya-image {
    position: relative;
}

.personal-kriya-image::before {
    content: "";

    position: absolute;

    width: 80%;
    height: 82%;

    left: -30px;
    bottom: -30px;

    background-color: var(--color-lavender-light);

    border-radius:
        44% 56% 52% 48% /
        56% 45% 55% 44%;

    opacity: 0.34;

    z-index: 0;
}

.personal-kriya-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center;

    border-radius:
        46% 54% 49% 51% /
        42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}


/* Tekst */

.personal-kriya-content {
    max-width: 630px;
}

.personal-kriya-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.personal-kriya-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.personal-kriya-content .personal-kriya-price {
    margin-top: 1.8rem;

    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: 1.55rem;
}

.personal-kriya-price strong {
    font-weight: 600;
}

.personal-kriya-content .personal-kriya-follow-up {
    margin-top: 1.5rem;
}

.personal-kriya-follow-up .text-link {
    display: block;
    width: fit-content;
    margin-top: 0.65rem;
}

.personal-kriya-content .personal-kriya-disclaimer {
    margin-top: 1.25rem;

    font-size: 0.8rem;
    line-height: 1.7;
    opacity: 0.8;
}

.personal-kriya-content .button {
    margin-top: 2.5rem;
}


/* ---------------------------------------------------------
   VOOR WIE?
   --------------------------------------------------------- */

.yoga-for-you {
    position: relative;

    padding-top: 150px;
    padding-bottom: 150px;

    overflow: hidden;

    background-color: var(--color-background-soft);
}

.yoga-for-you h2 {
    max-width: 700px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.yoga-for-you p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.yoga-for-you .playful-text {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;

    padding: 2rem 2.4rem;

    background-color: rgba(255, 255, 255, 0.55);

    border-left: 3px solid var(--color-lavender);

    border-radius: 0 20px 20px 0;

    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 3vw, 2rem);
    line-height: 1.45;

    color: var(--color-plum);
}

.yoga-for-you .playful-text strong {
    font-weight: 500;
}


/* ---------------------------------------------------------
   ZWANGERSCHAP / GOED OM TE WETEN
   --------------------------------------------------------- */

.yoga-note {
    padding-top: 110px;
    padding-bottom: 110px;

    background-color: var(--color-lavender-light);
}

.yoga-note .narrow {
    max-width: 720px;
}

.yoga-note h2 {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;

    color: var(--color-plum);
}

.yoga-note p:not(.section-subtitle) {
    color: var(--color-text);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   LESSEN & PRAKTISCH
   --------------------------------------------------------- */

.yoga-practical {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.yoga-practical-grid {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));

    gap: 2rem;
}

.yoga-practical-grid > .yoga-location-card {
    grid-column: span 2;
}

.yoga-online-card,
.yoga-workshops-card {
    grid-column: span 3;
    min-height: auto;
}

.yoga-practical-item {
    min-height: 260px;

    padding: 2.6rem;

    background-color: var(--color-background-soft);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.yoga-practical-item:hover {
    transform: translateY(-5px);

    box-shadow:
        0 22px 55px rgba(61, 57, 53, 0.07);
}

.yoga-practical-item h3 {
    margin-bottom: 1.2rem;

    color: var(--color-plum);

    font-size: 2rem;
}

.yoga-practical-item p {
    margin: 0;

    color: var(--color-text-soft);

    line-height: 1.85;
}

.yoga-practical-booking {
    margin-top: 2.5rem;
    text-align: center;
}


/* =========================================================
   YOGA PAGINA - RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .yoga-hero-grid,
    .personal-kriya-grid {
        gap: 4rem;
    }

    .kriya-grid {
        gap: 4rem;
    }

    .energy-grid {
        gap: 4rem;
    }

    .yoga-practical-grid {
        grid-template-columns: 1fr 1fr;
    }

    .yoga-practical-grid > .yoga-location-card,
    .yoga-online-card,
    .yoga-workshops-card {
        grid-column: auto;
        min-height: 260px;
    }

}


@media (max-width: 900px) {

    .yoga-hero {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .yoga-hero-grid {
        grid-template-columns: 1fr;
    }

    .yoga-hero-content {
        max-width: 720px;
    }

    .yoga-hero-image {
        width: min(100%, 650px);
        min-height: 580px;

        margin-inline: auto;
    }

    .yoga-hero-image img {
        height: 580px;
    }

    .kriya-grid {
        grid-template-columns: 1fr;
    }

    .kriya-content {
        position: static;

        max-width: 700px;
    }

    .energy-grid {
        grid-template-columns: 1fr;
    }

    .energy-title,
    .energy-content {
        max-width: 700px;
    }

    .personal-kriya-grid {
        grid-template-columns: 1fr;
    }

    .personal-kriya-image {
        width: min(100%, 650px);

        margin-inline: auto;
    }

    .personal-kriya-image img {
        height: 580px;
    }

}


@media (max-width: 700px) {

    .yoga-intro,
    .kriya-section,
    .energy-section,
    .personal-kriya,
    .yoga-for-you,
    .yoga-practical {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .yoga-experience {
        padding-top: 100px;
        padding-bottom: 100px;
    }

    .kriya-elements {
        grid-template-columns: 1fr;
    }

    .kriya-element:last-child {
        grid-column: auto;

        width: 100%;
    }

    .yoga-practical-grid {
        grid-template-columns: 1fr;
    }

    .yoga-practical-grid > .yoga-location-card {
        grid-column: auto;
    }

}


@media (max-width: 600px) {

    .yoga-hero {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .yoga-hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .yoga-hero-content .button {
        width: 100%;
    }

    .yoga-hero-image {
        min-height: 460px;
    }

    .yoga-hero-image img {
        height: 460px;
    }

    .kriya-element {
        min-height: auto;

        padding: 1.8rem;

        border-radius: 22px;
    }

    .yoga-experience p:not(.section-subtitle),
    .energy-content p,
    .yoga-for-you p:not(.section-subtitle) {
        font-size: 1rem;
    }

    .personal-kriya-image img {
        height: 480px;
    }

    .yoga-for-you .playful-text {
        padding: 1.6rem;

        font-size: 1.5rem;
    }

    .yoga-note {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .yoga-practical-item {
        min-height: auto;

        padding: 2rem;

        border-radius: 22px;
    }

}


/* =========================================================
   YOGA - SUBTIELE SCROLL ANIMATIES
   ========================================================= */

.kriya-element,
.yoga-practical-item {
    transition:
        opacity 0.7s ease,
        transform 0.7s ease,
        box-shadow 0.35s ease;
}
/* =========================================================
   MASSAGE & LICHAAMSWERK PAGINA
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.bodywork-hero {
    position: relative;
    padding-top: 90px;
    padding-bottom: 130px;

    overflow: hidden;

    background-color: var(--color-background);
}

.bodywork-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.bodywork-hero-content {
    max-width: 620px;
}

.bodywork-hero-content h1 {
    margin-top: 0.5rem;
    margin-bottom: 1.8rem;

    font-size: clamp(4rem, 7vw, 6.4rem);
}

.bodywork-hero-content .hero-lead {
    margin-bottom: 2rem;
}

.bodywork-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 560px;

    color: var(--color-text-soft);

    line-height: 1.95;
}

.bodywork-hero-content .button {
    margin-top: 2.5rem;
}

.bodywork-hero-image {
    position: relative;

    min-height: 640px;
}

.bodywork-hero-image::before {
    content: "";

    position: absolute;

    width: 74%;
    height: 80%;

    top: -32px;
    right: -42px;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 42% 58% /
        52% 43% 57% 48%;

    opacity: 0.38;

    z-index: 0;
}

.bodywork-hero-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 640px;

    object-fit: cover;
    object-position: center;

    border-radius:
        48% 52% 46% 54% /
        42% 47% 53% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.10);
}


/* ---------------------------------------------------------
   JOUW MOMENT BIJ INNERFREE
   --------------------------------------------------------- */

.bodywork-experience {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.bodywork-experience h2 {
    max-width: 720px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.bodywork-experience p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.bodywork-time-note {
    margin-top: 3rem;
    padding: 2.5rem;

    background-color: rgba(255, 255, 255, 0.6);

    border-left: 3px solid var(--color-lavender);
    border-radius: 0 24px 24px 0;
}

.bodywork-time-note h3 {
    color: var(--color-plum);

    font-size: 2rem;
}

.bodywork-time-note p {
    margin-top: 1rem;
}


/* ---------------------------------------------------------
   BEHANDELINGEN
   --------------------------------------------------------- */

.treatments {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.treatments-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;
}

.treatment-card {
    position: relative;

    display: flex;
    flex-direction: column;

    min-height: 100%;

    padding: 2.8rem;

    background-color: var(--color-background-soft);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 30px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.treatment-card:hover {
    transform: translateY(-5px);

    border-color: rgba(111, 86, 125, 0.18);

    box-shadow:
        0 22px 55px rgba(61, 57, 53, 0.07);
}

.treatment-label {
    margin: 0 0 1rem;

    color: var(--color-lavender);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.treatment-card h3 {
    margin-bottom: 1.2rem;

    color: var(--color-plum);

    font-size: clamp(2.2rem, 3vw, 2.9rem);
}

.treatment-card > p:not(.treatment-label) {
    color: var(--color-text-soft);

    line-height: 1.9;
}

.treatment-card .text-link,
.treatment-card .button {
    margin-top: auto;
}

.treatment-note {
    margin-top: 2rem;
    margin-bottom: 2rem;

    padding: 1.5rem;

    background-color: rgba(255, 255, 255, 0.6);

    border-radius: 18px;
}

.treatment-note strong {
    color: var(--color-plum);
}

.treatment-note p {
    margin-top: 0.5rem;

    color: var(--color-text-soft);

    font-size: 0.9rem;
    line-height: 1.7;
}


/* Highlight kaart */

.treatment-featured {
    background-color: var(--color-lavender-light);

    border-color: transparent;
}

.treatment-featured .treatment-label {
    color: var(--color-plum);
}

.treatment-featured .treatment-note {
    background-color: rgba(255, 255, 255, 0.45);
}


/* Extra gezichtsmassage */

.treatment-extra {
    border-style: dashed;

    background-color: rgba(248, 246, 242, 0.8);
}


/* ---------------------------------------------------------
   ZWANGERSCHAPSMASSAGE
   --------------------------------------------------------- */

.pregnancy-massage {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.pregnancy-massage-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

    align-items: start;

    gap: clamp(4rem, 8vw, 8rem);
}

.pregnancy-massage-content {
    max-width: 650px;
}

.pregnancy-massage-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.pregnancy-massage-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.pregnancy-massage-content .button {
    margin-top: 2.5rem;
}

.pregnancy-safety {
    padding: 2.8rem;

    background-color: rgba(255, 255, 255, 0.6);

    border-radius: 28px;
}

.pregnancy-safety ul {
    margin-top: 1.5rem;

    padding-left: 0;

    list-style: none;
}

.pregnancy-safety li {
    position: relative;

    padding: 0.7rem 0 0.7rem 1.5rem;

    color: var(--color-text-soft);

    border-bottom: 1px solid rgba(111, 86, 125, 0.08);
}

.pregnancy-safety li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 1.25rem;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color: var(--color-lavender);
}

.pregnancy-safety p:last-child {
    color: var(--color-text-soft);

    font-size: 0.9rem;
}


/* ---------------------------------------------------------
   BABYMASSAGE
   --------------------------------------------------------- */

.baby-massage {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.baby-massage h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.baby-massage p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.baby-massage-note {
    margin-top: 2.5rem;
    margin-bottom: 2.5rem;

    padding: 2rem;

    background-color: var(--color-background-soft);

    border-radius: 22px;
}

.baby-massage-note strong {
    color: var(--color-plum);
}

.baby-massage-note p {
    margin-top: 0.6rem;
}
.baby-massage-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    align-items: center;
    gap: clamp(4rem, 8vw, 8rem);
}

.baby-massage-image {
    width: 100%;
    overflow: hidden;

    border-radius:
        46% 54% 48% 52% /
        52% 45% 55% 48%;
}

.baby-massage-image img {
    width: 100%;
    height: 540px;

    display: block;

    object-fit: cover;
    object-position: center;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.baby-massage-content {
    max-width: 650px;
}


/* ---------------------------------------------------------
   ANDERE VORMEN VAN LICHAAMSWERK
   --------------------------------------------------------- */

.other-bodywork {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.other-bodywork-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;

    max-width: 1000px;

    margin-left: 80px;
    margin-right: 0;
}

.other-bodywork-card {
    min-height: 100%;

    padding: 2.8rem;

    background-color: rgba(255, 255, 255, 0.55);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;
}

.other-bodywork-card h3 {
    margin-bottom: 1.2rem;

    color: var(--color-plum);

    font-size: 2.4rem;
}

.other-bodywork-card p {
    color: var(--color-text-soft);

    line-height: 1.9;
}

.availability {
    display: inline-block;

    margin-top: 2rem !important;
    padding: 0.55rem 1rem;

    background-color: var(--color-lavender-light);

    border-radius: 100px;

    color: var(--color-plum) !important;

    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.05em;
}

.reiki-options {
    margin-top: 2rem;
    padding-top: 1.5rem;

    border-top: 1px solid rgba(111, 86, 125, 0.10);
}

.reiki-options p {
    margin-top: 1rem;
}

.reiki-options strong {
    color: var(--color-text);
}
/* ---------------------------------------------------------
   ANDERE VORMEN VAN LICHAAMSWERK - FOTO
--------------------------------------------------------- */

/* ---------------------------------------------------------
   ANDERE VORMEN VAN LICHAAMSWERK - INTRO + FOTO
--------------------------------------------------------- */

.other-bodywork-intro {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
    align-items: center;

    gap: clamp(4rem, 8vw, 7rem);

    margin-bottom: 4rem;
}

.other-bodywork-intro .section-heading {
    margin-bottom: 0;
}

.other-bodywork-photo {
    width: 100%;
    height: 360px;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.other-bodywork-photo img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center 45%;
}
.other-bodywork-intro .section-heading {
    margin-bottom: 0;
    padding-left: clamp(2rem, 4vw, 4rem);
}


/* ---------------------------------------------------------
   MOXA
   --------------------------------------------------------- */

.moxa-note {
    padding-top: 110px;
    padding-bottom: 110px;

    background-color: var(--color-lavender-light);
}

.moxa-note h2 {
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;

    color: var(--color-plum);
}

.moxa-note p:not(.section-subtitle) {
    color: var(--color-text);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   WELKE BEHANDELING?
   --------------------------------------------------------- */

.bodywork-choice {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.bodywork-choice h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.bodywork-choice p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.bodywork-choice .button {
    margin-top: 2.5rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .bodywork-hero-grid,
    .pregnancy-massage-grid {
        gap: 4rem;
    }

}


@media (max-width: 900px) {

    .bodywork-hero {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .bodywork-hero-grid {
        grid-template-columns: 1fr;
    }

    .bodywork-hero-content {
        max-width: 720px;
    }

    .bodywork-hero-image {
        width: min(100%, 650px);
        min-height: 580px;

        margin-inline: auto;
    }

    .bodywork-hero-image img {
        height: 580px;
    }

    .treatments-grid,
    .other-bodywork-grid {
        grid-template-columns: 1fr;
    }

    .pregnancy-massage-grid {
        grid-template-columns: 1fr;
    }

    .pregnancy-safety {
        max-width: 700px;
    }

}


@media (max-width: 700px) {

    .bodywork-experience,
    .treatments,
    .pregnancy-massage,
    .baby-massage,
    .other-bodywork,
    .bodywork-choice {
        padding-top: 90px;
        padding-bottom: 90px;
    }

}


@media (max-width: 600px) {

    .bodywork-hero {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .bodywork-hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .bodywork-hero-content .button {
        width: 100%;
    }

    .bodywork-hero-image {
        min-height: 460px;
    }

    .bodywork-hero-image img {
        height: 460px;
    }

    .bodywork-time-note,
    .treatment-card,
    .pregnancy-safety,
    .other-bodywork-card {
        padding: 2rem;

        border-radius: 22px;
    }

    .treatment-card h3 {
        font-size: 2.2rem;
    }

    .pregnancy-massage-content .button,
    .bodywork-choice .button {
        width: 100%;
    }

    .moxa-note {
        padding-top: 80px;
        padding-bottom: 80px;
    }

}
/* =========================================================
   AYURVEDA PAGINA
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.ayurveda-hero {
    position: relative;
    padding-top: 90px;
    padding-bottom: 130px;

    overflow: hidden;

    background-color: var(--color-background);
}

.ayurveda-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.ayurveda-hero-content {
    max-width: 620px;
}

.ayurveda-hero-content h1 {
    margin-top: 0.5rem;
    margin-bottom: 1.8rem;

    font-size: clamp(4rem, 7vw, 6.4rem);
}

.ayurveda-hero-content .hero-lead {
    margin-bottom: 2rem;
}

.ayurveda-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 560px;

    color: var(--color-text-soft);

    line-height: 1.95;
}

.ayurveda-hero-content .button {
    margin-top: 2.5rem;
}

.ayurveda-hero-image {
    position: relative;

    min-height: 640px;
}

.ayurveda-hero-image::before {
    content: "";

    position: absolute;

    width: 74%;
    height: 80%;

    top: -32px;
    right: -42px;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 42% 58% /
        52% 43% 57% 48%;

    opacity: 0.38;

    z-index: 0;
}

.ayurveda-hero-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 640px;

    object-fit: cover;
    object-position: center;

    border-radius:
        48% 52% 46% 54% /
        42% 47% 53% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.10);
}


/* ---------------------------------------------------------
   WAT IS AYURVEDA?
   --------------------------------------------------------- */

.ayurveda-intro {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.ayurveda-intro h2 {
    max-width: 720px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.ayurveda-intro p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   MIJN WEG NAAR AYURVEDA
   --------------------------------------------------------- */

.ayurveda-story {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.ayurveda-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.ayurveda-story-image {
    position: relative;
}

.ayurveda-story-image::before {
    content: "";

    position: absolute;

    width: 80%;
    height: 82%;

    left: -30px;
    bottom: -30px;

    background-color: var(--color-lavender-light);

    border-radius:
        44% 56% 52% 48% /
        56% 45% 55% 44%;

    opacity: 0.34;

    z-index: 0;
}

.ayurveda-story-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center;

    border-radius:
        46% 54% 49% 51% /
        42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.ayurveda-story-content {
    max-width: 650px;
}

.ayurveda-story-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.ayurveda-story-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}


/* ---------------------------------------------------------
   RITME & ZELFZORG
   --------------------------------------------------------- */

.ayurveda-rhythm {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.ayurveda-rhythm h2 {
    max-width: 720px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.ayurveda-rhythm p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.ayurveda-rhythm p:nth-of-type(5) {
    margin-top: 2.4rem;

    padding: 2rem 2.3rem;

    background-color: rgba(255, 255, 255, 0.55);

    border-left: 3px solid var(--color-lavender);

    border-radius: 0 20px 20px 0;

    font-family: var(--font-heading);
    font-size: 1.55rem;
    line-height: 1.5;

    color: var(--color-plum);
}


/* ---------------------------------------------------------
   AYURVEDA PIJLERS
   --------------------------------------------------------- */

.ayurveda-pillars {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.ayurveda-pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;
}

.ayurveda-pillar {
    min-height: 100%;

    padding: 2.8rem;

    background-color: var(--color-background-soft);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 30px;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}

.ayurveda-pillar:hover {
    transform: translateY(-5px);

    border-color: rgba(111, 86, 125, 0.18);

    box-shadow:
        0 22px 55px rgba(61, 57, 53, 0.07);
}

.ayurveda-pillar span {
    display: block;

    margin-bottom: 1.2rem;

    color: var(--color-lavender);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;
}

.ayurveda-pillar h3 {
    margin-bottom: 1.2rem;

    color: var(--color-plum);

    font-size: clamp(2.2rem, 3vw, 2.9rem);
}

.ayurveda-pillar p {
    color: var(--color-text-soft);

    line-height: 1.9;
}

.ayurveda-pillar .text-link {
    margin-top: 2rem;
}


/* ---------------------------------------------------------
   VOEDING & KOKEN
   --------------------------------------------------------- */

.ayurveda-food {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.ayurveda-food-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.ayurveda-food-content {
    max-width: 650px;
}

.ayurveda-food-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.ayurveda-food-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.ayurveda-food-quote {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 360px;

    padding: 3rem;

    background-color: var(--color-lavender-light);

    border-radius:
        44% 56% 48% 52% /
        52% 45% 55% 48%;
}

.ayurveda-food-quote p {
    margin: 0;

    max-width: 430px;

    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3.3rem);
    line-height: 1.25;

    text-align: center;

    color: var(--color-plum);
}
/* ---------------------------------------------------------
   AYURVEDA - VOEDING & KOKEN
--------------------------------------------------------- */

.ayurveda-food-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr);
    align-items: center;

    gap: clamp(4rem, 8vw, 7rem);
}

.ayurveda-food-image {
    width: 100%;
    height: 420px;

    overflow: hidden;

    border-radius: 28px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.ayurveda-food-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}

.ayurveda-food-quote {
    max-width: 720px;

    margin: 4rem auto 0;

    text-align: center;
}

.ayurveda-food-quote p {
    font-family: var(--font-heading);

    font-size: clamp(1.7rem, 3vw, 2.3rem);
    line-height: 1.5;

    color: var(--color-plum);
}


/* ---------------------------------------------------------
   NATUURLIJKE ZELFZORG
   --------------------------------------------------------- */

.natural-care {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.natural-care h2 {
    max-width: 700px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.natural-care p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   PREVENTIE
   --------------------------------------------------------- */

.ayurveda-prevention {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-plum);
}

.ayurveda-prevention-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: start;

    gap: clamp(4rem, 9vw, 9rem);
}

.ayurveda-prevention .section-subtitle {
    color: var(--color-lavender-light);
}

.ayurveda-prevention-title h2 {
    margin-top: 0.5rem;

    color: var(--color-white);
}

.ayurveda-prevention-content {
    max-width: 620px;
}

.ayurveda-prevention-content p {
    color: rgba(255, 255, 255, 0.78);

    font-size: 1.05rem;
    line-height: 1.95;
}

.ayurveda-prevention-content p:first-child {
    margin-top: 0;

    font-family: var(--font-heading);
    font-size: 1.65rem;
    line-height: 1.45;

    color: var(--color-white);
}


/* ---------------------------------------------------------
   BLIJVEN VERDIEPEN
   --------------------------------------------------------- */

.ayurveda-learning {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.ayurveda-learning h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.ayurveda-learning p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   WORKSHOPS CTA
   --------------------------------------------------------- */

.ayurveda-workshops {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.ayurveda-workshops h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.ayurveda-workshops p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.ayurveda-workshops .button {
    margin-top: 2.5rem;
}


/* =========================================================
   AYURVEDA RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .ayurveda-hero-grid,
    .ayurveda-story-grid,
    .ayurveda-food-grid,
    .ayurveda-prevention-grid {
        gap: 4rem;
    }

}


@media (max-width: 900px) {

    .ayurveda-hero {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .ayurveda-hero-grid,
    .ayurveda-story-grid,
    .ayurveda-food-grid,
    .ayurveda-prevention-grid {
        grid-template-columns: 1fr;
    }

    .ayurveda-hero-content,
    .ayurveda-story-content,
    .ayurveda-food-content,
    .ayurveda-prevention-content {
        max-width: 720px;
    }

    .ayurveda-hero-image,
    .ayurveda-story-image {
        width: min(100%, 650px);

        margin-inline: auto;
    }

    .ayurveda-hero-image {
        min-height: 580px;
    }

    .ayurveda-hero-image img {
        height: 580px;
    }

    .ayurveda-story-image img {
        height: 580px;
    }

    .ayurveda-pillars-grid {
        grid-template-columns: 1fr;
    }

    .ayurveda-food-quote {
        width: min(100%, 620px);

        margin-inline: auto;
    }

}


@media (max-width: 700px) {

    .ayurveda-intro,
    .ayurveda-story,
    .ayurveda-rhythm,
    .ayurveda-pillars,
    .ayurveda-food,
    .natural-care,
    .ayurveda-prevention,
    .ayurveda-learning,
    .ayurveda-workshops {
        padding-top: 90px;
        padding-bottom: 90px;
    }

}


@media (max-width: 600px) {

    .ayurveda-hero {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .ayurveda-hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .ayurveda-hero-content .button,
    .ayurveda-workshops .button {
        width: 100%;
    }

    .ayurveda-hero-image {
        min-height: 460px;
    }

    .ayurveda-hero-image img,
    .ayurveda-story-image img {
        height: 460px;
    }

    .ayurveda-pillar {
        padding: 2rem;

        border-radius: 22px;
    }

    .ayurveda-pillar h3 {
        font-size: 2.2rem;
    }

    .ayurveda-food-quote {
        min-height: 300px;

        padding: 2rem;
    }

    .ayurveda-rhythm p:nth-of-type(5) {
        padding: 1.6rem;

        font-size: 1.4rem;
    }


}
/* =========================================================
   HUMAN DESIGN PAGINA
   ========================================================= */


/* ---------------------------------------------------------
   HERO
   --------------------------------------------------------- */

.hd-hero {
    position: relative;

    padding-top: 0px;
    padding-bottom: 70px;

    overflow: hidden;

    background-color: var(--color-background);
}

.hd-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);

    align-items: center;

    gap: clamp(3rem, 5vw, 8rem);
}

.hd-hero-content {
    max-width: 820px;
}

.hd-hero-content h1 {
    margin-top: 0.5rem;
    margin-bottom: 1.8rem;

    font-size: clamp(3.2rem, 4.4vw, 5rem);
    line-height: 1.02;

    max-width: 850px;
}

.hd-hero-content .hero-lead {
    margin-bottom: 2rem;
}

.hd-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 560px;

    color: var(--color-text-soft);

    line-height: 1.95;
}

.hd-hero-content .button {
    margin-top: 2.5rem;
}

.hd-hero-image {
    position: relative;

    width: 100%;
    max-width: 520px;

    margin-left: auto;
    margin-right: auto;
    transform: translateY(80px);
}

.hd-hero-image::before {
    content: "";

    position: absolute;

    width: 76%;
    height: 80%;

    top: -28px;
    right: -38px;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 42% 58% /
        52% 43% 57% 48%;

    opacity: 0.34;

    z-index: 0;
}

.hd-hero-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: auto;

    display: block;

    border-radius: 28px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.10);
}


/* ---------------------------------------------------------
   WAT IS HUMAN DESIGN?
   --------------------------------------------------------- */

.hd-intro {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.hd-intro h2 {
    max-width: 760px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.hd-intro p:not(.section-subtitle) {
    max-width: 760px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   DECONDITIONERING
   --------------------------------------------------------- */

.hd-deconditioning {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.hd-deconditioning-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: start;

    gap: clamp(4rem, 9vw, 9rem);
}

.hd-deconditioning-title h2 {
    margin-top: 0.5rem;

    color: var(--color-plum);
}

.hd-deconditioning-content {
    max-width: 650px;
}

.hd-deconditioning-content p {
    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.hd-highlight {
    margin-top: 2.5rem;

    padding: 2.2rem 2.4rem;

    background-color: var(--color-background-soft);

    border-left: 3px solid var(--color-lavender);

    border-radius: 0 22px 22px 0;

    font-family: var(--font-heading);
    font-size: 1.55rem !important;
    line-height: 1.5 !important;

    color: var(--color-plum) !important;
}


/* ---------------------------------------------------------
   MIJN ERVARING
   --------------------------------------------------------- */

.hd-story {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.hd-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.hd-story-image {
    position: relative;
}

.hd-story-image::before {
    content: "";

    position: absolute;

    width: 80%;
    height: 82%;

    left: -30px;
    bottom: -30px;

    background-color: var(--color-lavender-light);

    border-radius:
        44% 56% 52% 48% /
        56% 45% 55% 44%;

    opacity: 0.32;

    z-index: 0;
}

.hd-story-image img {
    position: relative;
    z-index: 1;

    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center;

    border-radius:
        46% 54% 49% 51% /
        42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.hd-story-content {
    max-width: 650px;
}

.hd-story-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.hd-story-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}


/* ---------------------------------------------------------
   VAN HOOFD NAAR LICHAAM
   --------------------------------------------------------- */

.hd-body {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.hd-body h2 {
    max-width: 720px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.hd-body p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.hd-body-quote {
    margin-top: 2.5rem;

    padding: 2rem 2.4rem;

    background-color: var(--color-lavender-light);

    border-radius: 24px;

    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    line-height: 1.45 !important;

    color: var(--color-plum) !important;
}


/* =========================================================
   HUMAN DESIGN — JEZELF OPNIEUW ONTDEKKEN
   ========================================================= */

.hd-profile-story {
    padding: 140px 24px 150px;

    background-color: var(--color-background);
}

.hd-profile-story-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.hd-profile-story-content {
    max-width: 620px;
}

.hd-profile-story-content h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 500;
    line-height: 1.06;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.hd-profile-story-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   QUOTE RECHTS
   --------------------------------------------------------- */

.hd-profile-quote {
    max-width: 470px;

    padding: 4.5rem 3.8rem;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 48% 52% /
        52% 45% 55% 48%;

    text-align: center;
}

.hd-profile-quote p {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.4;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hd-profile-story {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .hd-profile-story-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .hd-profile-story-content {
        max-width: 680px;
    }

    .hd-profile-quote {
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .hd-profile-story {
        padding: 85px 22px 90px;
    }

    .hd-profile-story-grid {
        gap: 3rem;
    }

    .hd-profile-quote {
        padding: 3.2rem 2.2rem;
    }

}


/* =========================================================
   HUMAN DESIGN — JOUW DESIGN / ONTDEKKEN
   ========================================================= */

.hd-discover {
    padding: 150px 24px;

    background-color: var(--color-background-soft);
}


/* ---------------------------------------------------------
   TITELBLOK
   --------------------------------------------------------- */

.hd-discover .section-heading {
    max-width: 760px;

    margin: 0 auto 4.5rem;

    text-align: center;
}

.hd-discover .section-heading h2 {
    margin-top: 0.8rem;
    margin-bottom: 1.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.hd-discover .section-intro {
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.hd-discover-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.8rem;

    max-width: 1180px;

    margin: 0 auto;
}


/* ---------------------------------------------------------
   KAARTEN
   --------------------------------------------------------- */

.hd-discover-card {
    position: relative;

    padding: 2.8rem 2.5rem;

    background-color: rgba(255, 255, 255, 0.58);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.hd-discover-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(61, 57, 53, 0.07);
}


/* Nummer */

.hd-discover-card > span {
    display: inline-block;

    margin-bottom: 1.5rem;

    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;

    color: var(--color-lavender);
}


/* Titel */

.hd-discover-card h3 {
    margin-bottom: 1.25rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;

    color: var(--color-plum);
}


/* Tekst */

.hd-discover-card p {
    margin-bottom: 1rem;

    color: var(--color-text-soft);

    font-size: 0.95rem;
    line-height: 1.8;
}

.hd-discover-card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .hd-discover {
        padding-top: 115px;
        padding-bottom: 115px;
    }

    .hd-discover-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 650px) {

    .hd-discover {
        padding: 85px 22px 90px;
    }

    .hd-discover .section-heading {
        margin-bottom: 3rem;
    }

    .hd-discover-grid {
        grid-template-columns: 1fr;

        gap: 1.4rem;
    }

    .hd-discover-card {
        padding: 2.2rem 2rem;
    }

}

/* =========================================================
   HUMAN DESIGN — WAT KAN HET JE BRENGEN?
   ========================================================= */

.hd-benefits {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.hd-benefits-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    align-items: start;

    gap: clamp(4rem, 9vw, 8rem);
}


/* ---------------------------------------------------------
   TITEL LINKS
   --------------------------------------------------------- */

.hd-benefits-title {
    max-width: 470px;
}

.hd-benefits-title h2 {
    margin-top: 0.8rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   LIJST RECHTS
   --------------------------------------------------------- */

.hd-benefits-list {
    max-width: 650px;
}

.hd-benefit {
    display: grid;
    grid-template-columns: 52px 1fr;

    gap: 1.4rem;

    align-items: start;

    padding: 1.6rem 0;

    border-bottom: 1px solid rgba(111, 86, 125, 0.10);
}

.hd-benefit:first-child {
    padding-top: 0;
}

.hd-benefit:last-child {
    border-bottom: none;
}


/* Nummer */

.hd-benefit span {
    padding-top: 0.15rem;

    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;

    color: var(--color-lavender);
}


/* Tekst */

.hd-benefit p {
    margin: 0;

    color: var(--color-text-soft);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.45rem, 2.4vw, 1.9rem);
    line-height: 1.45;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hd-benefits {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .hd-benefits-grid {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .hd-benefits-title,
    .hd-benefits-list {
        max-width: 700px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .hd-benefits {
        padding: 85px 22px 90px;
    }

    .hd-benefits-grid {
        gap: 2.8rem;
    }

    .hd-benefit {
        grid-template-columns: 38px 1fr;

        gap: 1rem;

        padding: 1.3rem 0;
    }

}

/* =========================================================
   HUMAN DESIGN — BASISREADING
   ========================================================= */

.hd-reading {
    padding: 150px 24px;

    background-color: var(--color-background-soft);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.hd-reading-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: start;

    gap: clamp(4rem, 8vw, 7rem);
}


/* ---------------------------------------------------------
   LINKERKANT
   --------------------------------------------------------- */

.hd-reading-main {
    max-width: 650px;
}

.hd-reading-main h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.hd-reading-main > p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   DETAILS — DUUR / INVESTERING / OPNAME
   --------------------------------------------------------- */

.hd-reading-details {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1rem;

    margin-top: 3rem;
    margin-bottom: 2.5rem;
}

.hd-reading-details > div {
    padding: 1.5rem 1.3rem;

    background-color: rgba(255, 255, 255, 0.58);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 20px;
}

.hd-reading-details span {
    display: block;

    margin-bottom: 0.55rem;

    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;

    color: var(--color-lavender);
}

.hd-reading-details strong {
    font-family: "Cormorant Garamond", serif;
    font-size: 1.5rem;
    font-weight: 500;

    color: var(--color-plum);
}


/* ---------------------------------------------------------
   RECHTERKANT — VOOR JE READING
   --------------------------------------------------------- */

.hd-birth-info {
    padding: 3.2rem 3rem;

    background-color: var(--color-plum);

    border-radius: 28px;
}

.hd-birth-info .section-subtitle {
    color: var(--color-lavender-light);
}

.hd-birth-info h3 {
    margin-top: 0.8rem;
    margin-bottom: 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 500;
    line-height: 1.15;

    color: var(--color-white);
}

.hd-birth-info p {
    margin-bottom: 1.25rem;

    color: rgba(255, 255, 255, 0.78);

    line-height: 1.85;
}

.hd-birth-info p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hd-reading {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .hd-reading-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .hd-reading-main {
        max-width: 700px;
    }

    .hd-birth-info {
        max-width: 650px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 650px) {

    .hd-reading {
        padding: 85px 22px 90px;
    }

    .hd-reading-details {
        grid-template-columns: 1fr;
    }

    .hd-birth-info {
        padding: 2.5rem 2rem;
    }

}


/* =========================================================
   HUMAN DESIGN — VERDER VERDIEPEN
   ========================================================= */

.hd-deep {
    padding: 130px 24px 140px;

    background-color: var(--color-background);
}

.hd-deep .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* TITEL */

.hd-deep h2 {
    max-width: 650px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* TEKST */

.hd-deep p:not(.section-subtitle) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* KNOP */

.hd-deep .button {
    margin-top: 2rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hd-deep {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .hd-deep {
        padding: 80px 22px 90px;
    }

    .hd-deep h2 {
        margin-bottom: 2rem;
    }

    .hd-deep p:not(.section-subtitle) {
        line-height: 1.8;
    }

}

/* =========================================================
   HUMAN DESIGN — EXPERIMENT / GEEN REGELSBOEK
   ========================================================= */

.hd-experiment {
    padding: 140px 24px 150px;

    background-color: var(--color-plum);
}

.hd-experiment .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* SUBTITEL */

.hd-experiment .section-subtitle {
    color: var(--color-lavender-light);
}


/* TITEL */

.hd-experiment h2 {
    max-width: 650px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-white);
}


/* GEWONE TEKST */

.hd-experiment p:not(.section-subtitle):not(.hd-experiment-quote) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: rgba(255, 255, 255, 0.78);

    line-height: 1.9;
}


/* QUOTE */

.hd-experiment .hd-experiment-quote {
    max-width: 680px;

    margin-top: 3rem;
    margin-bottom: 3rem;

    padding: 2.4rem 2.6rem;

    background-color: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 26px;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    font-weight: 400;
    line-height: 1.45;

    color: var(--color-white);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hd-experiment {
        padding-top: 110px;
        padding-bottom: 115px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .hd-experiment {
        padding: 85px 22px 90px;
    }

    .hd-experiment .hd-experiment-quote {
        padding: 2rem 1.8rem;
    }

}

/* =========================================================
   HUMAN DESIGN RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .hd-hero-grid,
    .hd-deconditioning-grid,
    .hd-story-grid,
    .hd-profile-story-grid,
    .hd-benefits-grid,
    .hd-reading-grid {
        gap: 4rem;
    }

}


@media (max-width: 900px) {

    .hd-hero {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .hd-hero-grid,
    .hd-deconditioning-grid,
    .hd-story-grid,
    .hd-profile-story-grid,
    .hd-benefits-grid,
    .hd-reading-grid {
        grid-template-columns: 1fr;
    }

    .hd-hero-content,
    .hd-deconditioning-content,
    .hd-story-content,
    .hd-profile-story-content,
    .hd-reading-main {
        max-width: 720px;
    }

    .hd-hero-image,
    .hd-story-image {
        width: min(100%, 650px);

        margin-inline: auto;
    }

    .hd-profile-quote {
        width: min(100%, 620px);

        margin-inline: auto;
    }

    .hd-discover-grid {
        grid-template-columns: 1fr;
    }

    .hd-benefits-title {
        max-width: 650px;
    }

    .hd-birth-info {
        max-width: 650px;
    }

}


@media (max-width: 700px) {

    .hd-intro,
    .hd-deconditioning,
    .hd-story,
    .hd-body,
    .hd-profile-story,
    .hd-discover,
    .hd-benefits,
    .hd-reading,
    .hd-deep,
    .hd-experiment {
        padding-top: 90px;
        padding-bottom: 90px;
    }

    .hd-reading-details {
        grid-template-columns: 1fr;
    }

}


@media (max-width: 600px) {

    .hd-hero {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .hd-hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .hd-hero-content .button,
    .hd-deep .button {
        width: 100%;
    }

    .hd-highlight,
    .hd-body-quote,
    .hd-birth-info {
        padding: 1.8rem;

        border-radius: 22px;
    }

    .hd-discover-card {
        padding: 2rem;

        border-radius: 22px;
    }

    .hd-discover-card h3 {
        font-size: 2.2rem;
    }

    .hd-profile-quote {
        min-height: 300px;

        padding: 2rem;
    }

    .hd-benefit {
        grid-template-columns: 42px 1fr;

        gap: 1rem;
    }

}
/* Human Design hero foto hoger plaatsen */

.hd-hero-image {
    transform: translateY(-60px);
}
/* =========================================================
   WORKSHOPS PAGINA
   ========================================================= */


/* =========================================================
   WORKSHOPS — HERO
   ========================================================= */

.workshops-page-hero {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.workshops-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.workshops-page-hero-content {
    max-width: 590px;
}

.workshops-page-hero-content h1 {
    max-width: 600px;

    margin-top: 0.8rem;
    margin-bottom: 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.4rem, 6vw, 5.5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.03em;

    color: var(--color-text);
}

.workshops-page-hero-content .hero-lead {
    max-width: 520px;

    margin-bottom: 1.7rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.65rem;
    line-height: 1.45;

    color: var(--color-plum);
}

.workshops-page-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 520px;

    margin-bottom: 1.25rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.workshops-page-hero-content .button {
    margin-top: 1.8rem;
}


/* ---------------------------------------------------------
   FOTO
   --------------------------------------------------------- */

.workshops-page-hero-image {
    width: 100%;
    height: 680px;

    overflow: hidden;

    border-radius: 34px;
}

.workshops-page-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.8s ease;
}

.workshops-page-hero-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .workshops-page-hero {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .workshops-page-hero-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .workshops-page-hero-content {
        max-width: 680px;
    }

    .workshops-page-hero-image {
        height: 600px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .workshops-page-hero {
        padding-top: 100px;
        padding-bottom: 90px;
    }

    .workshops-page-hero-grid {
        gap: 3rem;
    }

    .workshops-page-hero-content h1 {
        font-size: clamp(3rem, 13vw, 4.3rem);
    }

    .workshops-page-hero-content .hero-lead {
        font-size: 1.45rem;
    }

    .workshops-page-hero-image {
        height: 520px;

        border-radius: 26px;
    }

}

/* =========================================================
   WORKSHOPS — NIEUWE DATA / STATUS
   ========================================================= */

.workshops-status {
    padding: 120px 24px 130px;

    background-color: var(--color-background-soft);
}

.workshops-status .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.workshops-status h2 {
    max-width: 720px;

    margin: 0.8rem auto 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 500;
    line-height: 1.08;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.workshops-status p:not(.section-subtitle) {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.3rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.workshops-status .button {
    margin-top: 2rem;
}


/* TABLET */

@media (max-width: 900px) {

    .workshops-status {
        padding-top: 100px;
        padding-bottom: 105px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .workshops-status {
        padding: 80px 22px 85px;
    }

}


/* =========================================================
   WORKSHOPS — THEMA'S
   ========================================================= */

.workshop-themes {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   TITELBLOK
   --------------------------------------------------------- */

.workshop-themes .section-heading {
    max-width: 760px;

    margin: 0 auto 4.5rem;

    text-align: center;
}

.workshop-themes .section-heading h2 {
    margin-top: 0.8rem;
    margin-bottom: 1.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.workshop-themes .section-intro {
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.workshop-themes-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.8rem;

    max-width: 1180px;

    margin: 0 auto;
}


/* ---------------------------------------------------------
   KAARTEN
   --------------------------------------------------------- */

.workshop-theme-card {
    padding: 2.8rem 2.5rem;

    background-color: rgba(255, 255, 255, 0.58);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.workshop-theme-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(61, 57, 53, 0.07);
}


/* NUMMER */

.workshop-theme-card > span {
    display: inline-block;

    margin-bottom: 1.5rem;

    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;

    color: var(--color-lavender);
}


/* TITEL */

.workshop-theme-card h3 {
    margin-bottom: 1.25rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;

    color: var(--color-plum);
}


/* TEKST */

.workshop-theme-card p {
    margin-bottom: 1rem;

    color: var(--color-text-soft);

    font-size: 0.95rem;
    line-height: 1.8;
}

.workshop-theme-card p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .workshop-themes {
        padding-top: 115px;
        padding-bottom: 115px;
    }

    .workshop-themes-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 650px) {

    .workshop-themes {
        padding: 85px 22px 90px;
    }

    .workshop-themes .section-heading {
        margin-bottom: 3rem;
    }

    .workshop-themes-grid {
        grid-template-columns: 1fr;

        gap: 1.4rem;
    }

    .workshop-theme-card {
        padding: 2.2rem 2rem;
    }

}

/* =========================================================
   WORKSHOPS — COMBINEREN
   ========================================================= */

.workshop-combinations {
    padding: 140px 24px 150px;

    background-color: var(--color-background-soft);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.workshop-combinations-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: clamp(4rem, 8vw, 8rem);

    align-items: start;
}


/* ---------------------------------------------------------
   TITEL LINKS
   --------------------------------------------------------- */

.workshop-combinations-title {
    max-width: 500px;
}

.workshop-combinations-title h2 {
    margin-top: 0.8rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.workshop-combinations-content {
    max-width: 650px;
}

.workshop-combinations-content p {
    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.workshop-combinations-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .workshop-combinations {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .workshop-combinations-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .workshop-combinations-title,
    .workshop-combinations-content {
        max-width: 700px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .workshop-combinations {
        padding: 85px 22px 90px;
    }

    .workshop-combinations-grid {
        gap: 2.5rem;
    }

}

/* =========================================================
   WORKSHOPS — RETREATDAG
   ========================================================= */

.retreat-day {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.retreat-day-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST LINKS
   --------------------------------------------------------- */

.retreat-day-content {
    max-width: 620px;
}

.retreat-day-content h2 {
    margin-top: 0.8rem;
    margin-bottom: 2.3rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.retreat-day-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.retreat-day-content p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   QUOTE RECHTS
   --------------------------------------------------------- */

.retreat-day-quote {
    max-width: 470px;

    padding: 4.5rem 3.8rem;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 48% 52% /
        52% 45% 55% 48%;

    text-align: center;
}

.retreat-day-quote p {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.4;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .retreat-day {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .retreat-day-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .retreat-day-content {
        max-width: 680px;
    }

    .retreat-day-quote {
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .retreat-day {
        padding: 85px 22px 90px;
    }

    .retreat-day-grid {
        gap: 3rem;
    }

    .retreat-day-quote {
        padding: 3.2rem 2.2rem;
    }

}


/* =========================================================
   WORKSHOPS — MAANMOMENTEN
   ========================================================= */

.moon-gatherings {
    padding: 140px 24px 150px;

    background-color: var(--color-plum);
}


/* GRID */

.moon-gatherings-grid {
    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;

    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* TEKST */

.moon-gatherings-content {
    max-width: 700px;
}


/* SUBTITEL */

.moon-gatherings .section-subtitle {
    color: var(--color-lavender-light);
}


/* TITEL */

.moon-gatherings h2 {
    max-width: 650px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-white);
}


/* TEKST */

.moon-gatherings p:not(.section-subtitle) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: rgba(255, 255, 255, 0.82);

    line-height: 1.9;
}

.moon-gatherings p:last-child {
    margin-bottom: 0;
}


/* FOTO */

.moon-gatherings-image {
    width: 100%;

    overflow: hidden;

    border-radius:
        48% 52% 46% 54% /
        42% 47% 53% 58%;

    box-shadow:
        0 28px 70px rgba(25, 18, 30, 0.20);
}

.moon-gatherings-image img {
    display: block;

    width: 100%;
    height: 560px;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .moon-gatherings {
        padding-top: 110px;
        padding-bottom: 115px;
    }

    .moon-gatherings-grid {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .moon-gatherings-content {
        max-width: 760px;
    }

    .moon-gatherings-image {
        max-width: 620px;

        margin-left: auto;
        margin-right: auto;
    }

    .moon-gatherings-image img {
        height: 500px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .moon-gatherings {
        padding: 85px 22px 90px;
    }

    .moon-gatherings h2 {
        margin-bottom: 2rem;
    }

    .moon-gatherings-grid {
        gap: 2.8rem;
    }

    .moon-gatherings-image img {
        height: auto;

        aspect-ratio: 4 / 5;
    }

}

/* =========================================================
   WORKSHOPS — THE INNERFREE CIRCLE
   ========================================================= */

.circle {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);

    text-align: center;
}

.circle .container {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;
}

.circle h2 {
    max-width: 620px;

    margin: 0.8rem auto 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.circle p:not(.section-subtitle) {
    max-width: 600px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.3rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.circle .button {
    margin-top: 2rem;
}


/* TABLET */

@media (max-width: 900px) {

    .circle {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .circle {
        padding: 80px 22px 90px;
    }

}
/* =========================================================
   WORKSHOPS — CONTACT
   ========================================================= */

.workshop-contact {
    padding: 130px 24px 140px;

    background-color: var(--color-background);
}

.workshop-contact .container {
    max-width: 780px;

    margin-left: auto;
    margin-right: auto;
}

.workshop-contact h2 {
    max-width: 650px;

    margin-top: 0.8rem;
    margin-bottom: 2.3rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.workshop-contact p:not(.section-subtitle) {
    max-width: 660px;

    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.workshop-contact .button {
    margin-top: 2rem;
}


/* TABLET */

@media (max-width: 900px) {

    .workshop-contact {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .workshop-contact {
        padding: 80px 22px 90px;
    }

}


/* =========================================================
   WORKSHOPS RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .workshops-page-hero-grid,
    .workshop-combinations-grid,
    .retreat-day-grid {
        gap: 4rem;
    }

}


@media (max-width: 900px) {

    .workshops-page-hero {
        padding-top: 60px;
        padding-bottom: 100px;
    }

    .workshops-page-hero-grid,
    .workshop-combinations-grid,
    .retreat-day-grid {
        grid-template-columns: 1fr;
    }

    .workshops-page-hero-content,
    .workshop-combinations-content,
    .retreat-day-content {
        max-width: 720px;
    }

    .workshops-page-hero-image {
        width: min(100%, 650px);
        min-height: 560px;

        margin-inline: auto;
    }

    .workshops-page-hero-image img {
        height: 560px;
    }

    .workshop-themes-grid {
        grid-template-columns: 1fr;
    }

    .retreat-day-quote {
        width: min(100%, 620px);

        margin-inline: auto;
    }

}


@media (max-width: 700px) {

    .workshops-status,
    .workshop-themes,
    .workshop-combinations,
    .retreat-day,
    .moon-gatherings,
    .workshop-contact {
        padding-top: 90px;
        padding-bottom: 90px;
    }

}


@media (max-width: 600px) {

    .workshops-page-hero {
        padding-top: 50px;
        padding-bottom: 80px;
    }

    .workshops-page-hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .workshops-page-hero-content .button,
    .workshops-status .button,
    .workshop-contact .button {
        width: 100%;
    }

    .workshops-page-hero-image {
        min-height: 450px;
    }

    .workshops-page-hero-image img {
        height: 450px;
    }

    .workshop-theme-card {
        padding: 2rem;

        border-radius: 22px;
    }

    .workshop-theme-card h3 {
        font-size: 2.2rem;
    }

    .retreat-day-quote {
        min-height: 300px;

        padding: 2rem;
    }

}
/* =========================================================
   OVER INNERFREE PAGINA
   ========================================================= */


/* =========================================================
   OVER INNERFREE — HERO
   ========================================================= */

.about-page-hero {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.about-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.about-page-hero-content {
    max-width: 590px;
}

.about-page-hero-content h1 {
    max-width: 620px;

    margin-top: 0.8rem;
    margin-bottom: 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.4rem, 6vw, 5.5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.03em;

    color: var(--color-text);
}

.about-page-hero-content .hero-lead {
    max-width: 520px;

    margin-bottom: 1.7rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.65rem;
    line-height: 1.45;

    color: var(--color-plum);
}

.about-page-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 520px;

    margin-bottom: 1.25rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.about-page-hero-content .button {
    margin-top: 1.8rem;
}


/* ---------------------------------------------------------
   FOTO
   --------------------------------------------------------- */

.about-page-hero-image {
    width: 100%;
    height: 680px;

    overflow: hidden;

    border-radius: 34px;
}

.about-page-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.8s ease;
}

.about-page-hero-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .about-page-hero {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .about-page-hero-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .about-page-hero-content {
        max-width: 680px;
    }

    .about-page-hero-image {
        height: 600px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .about-page-hero {
        padding-top: 100px;
        padding-bottom: 90px;
    }

    .about-page-hero-grid {
        gap: 3rem;
    }

    .about-page-hero-content h1 {
        font-size: clamp(3rem, 13vw, 4.3rem);
    }

    .about-page-hero-content .hero-lead {
        font-size: 1.45rem;
    }

    .about-page-hero-image {
        height: 520px;
        border-radius: 26px;
    }

}


/* =========================================================
   OVER INNERFREE — KIND & CONDITIONERING
   ========================================================= */

.innerfree-child {
    padding: 75px 24px 140px;

    background-color: var(--color-background-soft);
}

.innerfree-child .container {
    max-width: 1180px;

    margin-left: auto;
    margin-right: auto;
}


/* GRID */

.innerfree-child-grid {
    display: grid;

    grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);

    gap: 80px;

    align-items: center;
}


/* TEKSTKOLOM */

.innerfree-child-content {
    max-width: 700px;
}


/* TITEL */

.innerfree-child h2 {
    max-width: 680px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* TEKST */

.innerfree-child p:not(.section-subtitle):not(.innerfree-child-highlight) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* HIGHLIGHT */

.innerfree-child-highlight {
    max-width: 700px;

    margin-top: 3.5rem;
    margin-bottom: 0;

    padding-left: 2rem;

    border-left: 1px solid rgba(111, 86, 125, 0.30);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.45;

    color: var(--color-plum);
}


/* FOTO */

.innerfree-child-image {
    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius:
        48% 52% 46% 54% /
        42% 47% 53% 58%;
}

.innerfree-child-image img {
    display: block;

    width: 100%;
    height: 680px;

    object-fit: cover;
    object-position: center;

    transition: transform 0.6s ease;
}

.innerfree-child-image:hover img {
    transform: scale(1.02);
}


/* TABLET */

@media (max-width: 900px) {

    .innerfree-child {
        padding-top: 65px;
        padding-bottom: 110px;
    }

    .innerfree-child-grid {
        grid-template-columns: 1fr;

        gap: 55px;
    }

    .innerfree-child-content {
        max-width: 760px;
    }

    .innerfree-child-image {
        max-width: 620px;

        margin-left: auto;
        margin-right: auto;
    }

    .innerfree-child-image img {
        height: 620px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .innerfree-child {
        padding: 55px 22px 90px;
    }

    .innerfree-child-grid {
        gap: 40px;
    }

    .innerfree-child-highlight {
        margin-top: 2.8rem;

        padding-left: 1.4rem;
    }

    .innerfree-child-image img {
        height: auto;

        aspect-ratio: 4 / 5;
    }

}


/* ---------------------------------------------------------
   STUDEREN
   --------------------------------------------------------- */

.innerfree-study {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.innerfree-study-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.innerfree-study-content {
    max-width: 650px;
}

.innerfree-study-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-study-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.innerfree-study-quote {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 380px;

    padding: 3rem;

    background-color: var(--color-lavender-light);

    border-radius:
        44% 56% 48% 52% /
        52% 45% 55% 48%;
}

.innerfree-study-quote p {
    margin: 0;

    max-width: 430px;

    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    line-height: 1.3;

    text-align: center;

    color: var(--color-plum);
}


/* ---------------------------------------------------------
   PSYCHOLOGIE
   --------------------------------------------------------- */

.innerfree-psychology {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.innerfree-psychology h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-psychology p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   MIRABELLO
   --------------------------------------------------------- */

.innerfree-mirabello {
    padding-top: 130px;
    padding-bottom: 130px;

    background-color: var(--color-background);
}

.innerfree-mirabello .container {
    max-width: 1180px;
}

.innerfree-mirabello-content {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;
}

.innerfree-mirabello-content h2 {
    max-width: 700px;

    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-mirabello-content p:not(.section-subtitle) {
    max-width: 700px;

    color: var(--color-text-soft);

    line-height: 1.95;
}


/* TABLET */

@media (max-width: 900px) {

    .innerfree-mirabello {
        padding-top: 105px;
        padding-bottom: 105px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .innerfree-mirabello {
        padding-top: 80px;
        padding-bottom: 80px;
    }

}
/* ---------------------------------------------------------
   BURN-OUT / LICHAAM
   --------------------------------------------------------- */

.innerfree-burnout {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-plum);
}

.innerfree-burnout-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    align-items: start;

    gap: clamp(4rem, 9vw, 9rem);
}

.innerfree-burnout .section-subtitle {
    color: var(--color-lavender-light);
}

.innerfree-burnout-title h2 {
    margin-top: 0.5rem;

    color: var(--color-white);
}

.innerfree-burnout-content p {
    color: rgba(255, 255, 255, 0.80);

    font-size: 1.05rem;
    line-height: 1.95;
}

.innerfree-burnout-highlight {
    margin-top: 2rem;
    margin-bottom: 2rem;

    font-family: var(--font-heading);
    font-size: clamp(1.8rem, 3vw, 2.5rem) !important;
    line-height: 1.45 !important;

    color: var(--color-white) !important;
}


/* ---------------------------------------------------------
   REIZEN
   --------------------------------------------------------- */

.innerfree-travel {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.innerfree-travel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.innerfree-travel-content {
    max-width: 650px;
}

.innerfree-travel-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-travel-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.innerfree-travel-image img {
    width: 100%;
    height: 620px;

    object-fit: cover;
    object-position: center;

    border-radius:
        44% 56% 52% 48% /
        56% 45% 55% 44%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}


/* ---------------------------------------------------------
   YOGA ALS KIND
   --------------------------------------------------------- */

.innerfree-yoga-child {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.innerfree-yoga-child h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-yoga-child p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.innerfree-yoga-child-highlight {
    margin-top: 2.5rem;

    padding: 2rem 2.4rem;

    background-color: var(--color-lavender-light);

    border-radius: 24px;

    font-family: var(--font-heading);
    font-size: clamp(1.6rem, 3vw, 2.2rem) !important;
    line-height: 1.45 !important;

    color: var(--color-plum) !important;
}


/* ---------------------------------------------------------
   INDIA
   --------------------------------------------------------- */

.innerfree-india {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.innerfree-india-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.innerfree-india-image img {
    width: 100%;
    height: 650px;

    object-fit: cover;
    object-position: center;

    border-radius:
        46% 54% 49% 51% /
        42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-india-content {
    max-width: 650px;
}

.innerfree-india-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-india-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}


/* ---------------------------------------------------------
   YOGA DELEN
   --------------------------------------------------------- */

.innerfree-sharing {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.innerfree-sharing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.innerfree-sharing-content {
    max-width: 650px;
}

.innerfree-sharing-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-sharing-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}
.innerfree-sharing-image {
    overflow: hidden;
    height: 360px;
}

.innerfree-sharing-image img {
    width: 100%;
    height: 520px;

    object-fit: cover;
    object-position: center top;
    display: block;

    border-radius:
        44% 56% 52% 48% /
        56% 45% 55% 44%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}


/* ---------------------------------------------------------
   AUSTRALIË / DUIKEN
   --------------------------------------------------------- */

.innerfree-australia {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-plum);
}

.innerfree-australia-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: clamp(4rem, 9vw, 9rem);
}

.innerfree-australia .section-subtitle {
    color: var(--color-lavender-light);
}

.innerfree-australia-title h2 {
    margin-top: 0.5rem;

    color: var(--color-white);
}

.innerfree-australia-content p {
    color: rgba(255, 255, 255, 0.80);

    font-size: 1.05rem;
    line-height: 1.95;
}
.innerfree-australia-image img {
    width: 100%;
    height: 560px;

    object-fit: cover;
    object-position: center;

    border-radius:
        46% 54% 49% 51% /
        42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(0, 0, 0, 0.14);
}

.innerfree-australia-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;

    color: var(--color-white);
}


/* ---------------------------------------------------------
   HUMAN DESIGN
   --------------------------------------------------------- */

.innerfree-hd {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background-soft);
}

.innerfree-hd h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-hd p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   AYURVEDA
   --------------------------------------------------------- */

.innerfree-ayurveda {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.innerfree-ayurveda-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}

.innerfree-ayurveda-content {
    max-width: 650px;
}

.innerfree-ayurveda-content h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-ayurveda-content p:not(.section-subtitle) {
    color: var(--color-text-soft);

    line-height: 1.95;
}

.innerfree-ayurveda-image img {
    width: 100%;
    height: 620px;

    object-fit: cover;
    object-position: center;

    border-radius:
        46% 54% 49% 51% /
        42% 48% 52% 58%;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}


/* ---------------------------------------------------------
   INNERFREE NAAM
   --------------------------------------------------------- */

.innerfree-name {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.innerfree-name h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-name p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   FILOSOFIE
   --------------------------------------------------------- */

.innerfree-philosophy {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}


/* GRID */

.innerfree-philosophy-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: clamp(4rem, 9vw, 9rem);

    align-items: start;
}


/* LINKERKOLOM */

.innerfree-philosophy-title {
    max-width: 520px;
}

.innerfree-philosophy .section-subtitle {
    color: var(--color-lavender);
}

.innerfree-philosophy-title h2 {
    margin-top: 0.5rem;
    margin-bottom: 3rem;

    color: var(--color-text);
}


/* PAARSE QUOTE LINKS */

.innerfree-philosophy-highlight {
    margin: 0;

    padding: 2.6rem 2.8rem;

    background-color: var(--color-plum);

    border-radius: 28px;

    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 2.6vw, 2.3rem);
    font-weight: 400;
    line-height: 1.4;

    color: #ffffff;

    box-shadow:
        0 20px 50px rgba(61, 57, 53, 0.08);
}


/* RECHTER TEKSTKOLOM */

.innerfree-philosophy-content {
    max-width: 650px;
}

.innerfree-philosophy-content p {
    margin-top: 0;
    margin-bottom: 1.5rem;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.innerfree-philosophy-content p:last-child {
    margin-bottom: 0;
}


/* TABLET */

@media (max-width: 900px) {

    .innerfree-philosophy {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-philosophy-grid {
        grid-template-columns: 1fr;

        gap: 3.5rem;
    }

    .innerfree-philosophy-title {
        max-width: 700px;
    }

    .innerfree-philosophy-highlight {
        max-width: 560px;
    }

    .innerfree-philosophy-content {
        max-width: 700px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .innerfree-philosophy {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    .innerfree-philosophy-grid {
        gap: 3rem;
    }

    .innerfree-philosophy-title h2 {
        margin-bottom: 2.2rem;
    }

    .innerfree-philosophy-highlight {
        padding: 2rem 1.7rem;

        border-radius: 22px;

        font-size: 1.65rem;
    }

    .innerfree-philosophy-content p {
        font-size: 1rem;
    }

}
/* Quote filosofie zichtbaar maken */

.innerfree-philosophy-title .innerfree-philosophy-highlight {
    display: block;

    margin: 0;

    padding: 2.6rem 2.8rem;

    background-color: var(--color-plum);

    border-radius: 28px;

    font-family: var(--font-heading);
    font-size: clamp(1.75rem, 2.6vw, 2.3rem);
    font-weight: 400;
    line-height: 1.4;

    color: #ffffff !important;
    opacity: 1 !important;
    visibility: visible !important;
}

/* ---------------------------------------------------------
   TOEKOMSTVISIE
   --------------------------------------------------------- */

.innerfree-vision {
    padding-top: 130px;
    padding-bottom: 140px;

    background-color: var(--color-background);
}

.innerfree-vision h2 {
    margin-top: 0.5rem;
    margin-bottom: 2rem;
}

.innerfree-vision p:not(.section-subtitle) {
    max-width: 720px;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}


/* ---------------------------------------------------------
   ACHTERGROND / OPLEIDINGEN
   --------------------------------------------------------- */

.innerfree-background {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background-soft);
}

.innerfree-background-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 2rem;
}

.innerfree-background-item {
    padding: 2.8rem;

    background-color: rgba(255, 255, 255, 0.58);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;
}

.innerfree-background-item h3 {
    margin-bottom: 1.5rem;

    color: var(--color-plum);

    font-size: 2.2rem;
}

.innerfree-background-item ul {
    margin: 0;
    padding-left: 0;

    list-style: none;
}

.innerfree-background-item li {
    padding: 0.75rem 0;

    color: var(--color-text-soft);

    line-height: 1.6;

    border-bottom: 1px solid rgba(111, 86, 125, 0.08);
}

.innerfree-background-item li:last-child {
    border-bottom: none;
}

.innerfree-background-item span {
    display: inline-block;

    margin-left: 0.35rem;

    color: var(--color-lavender);

    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}


/* ---------------------------------------------------------
   SLOT
   --------------------------------------------------------- */

.innerfree-closing {
    padding-top: 140px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.innerfree-closing {
    text-align: center;
}

.innerfree-closing h2 {
    max-width: 760px;

    margin: 0.5rem auto 2rem;
}

.innerfree-closing p {
    max-width: 700px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    font-size: 1.05rem;
    line-height: 1.95;
}

.innerfree-closing-lead {
    font-family: var(--font-heading);

    font-size: clamp(1.8rem, 3.5vw, 2.6rem) !important;
    line-height: 1.45 !important;

    color: var(--color-plum) !important;
}

.innerfree-closing .button {
    margin-top: 2.5rem;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1000px) {

    .about-page-hero-grid,
    .innerfree-study-grid,
    .innerfree-mirabello-grid,
    .innerfree-burnout-grid,
    .innerfree-travel-grid,
    .innerfree-india-grid,
    .innerfree-sharing-grid,
    .innerfree-australia-grid,
    .innerfree-ayurveda-grid,
    .innerfree-philosophy-grid {
        gap: 4rem;
    }

}


@media (max-width: 900px) {

    .about-page-hero {
        padding-top: 50px;
        padding-bottom: 100px;
    }

    .about-page-hero-grid,
    .innerfree-study-grid,
    .innerfree-mirabello-grid,
    .innerfree-burnout-grid,
    .innerfree-travel-grid,
    .innerfree-india-grid,
    .innerfree-sharing-grid,
    .innerfree-australia-grid,
    .innerfree-ayurveda-grid,
    .innerfree-philosophy-grid {
        grid-template-columns: 1fr;
    }

    .about-page-hero-content,
    .innerfree-study-content,
    .innerfree-mirabello-content,
    .innerfree-travel-content,
    .innerfree-india-content,
    .innerfree-sharing-content,
    .innerfree-ayurveda-content {
        max-width: 720px;
    }

    .about-page-hero-image,
    .innerfree-mirabello-image,
    .innerfree-travel-image,
    .innerfree-india-image,
    .innerfree-sharing-image,
    .innerfree-ayurveda-image {
        width: min(100%, 650px);

        margin-inline: auto;
    }

    .about-page-hero-image {
        min-height: 560px;
    }

    .about-page-hero-image img,
    .innerfree-mirabello-image img,
    .innerfree-travel-image img,
    .innerfree-india-image img,
    .innerfree-sharing-image img,
    .innerfree-ayurveda-image img {
        height: 560px;
    }

    .innerfree-background-grid {
        grid-template-columns: 1fr;
    }

    .innerfree-study-quote {
        width: min(100%, 620px);

        margin-inline: auto;
    }

}


@media (max-width: 700px) {

    .innerfree-child,
    .innerfree-study,
    .innerfree-psychology,
    .innerfree-mirabello,
    .innerfree-burnout,
    .innerfree-travel,
    .innerfree-yoga-child,
    .innerfree-india,
    .innerfree-sharing,
    .innerfree-australia,
    .innerfree-hd,
    .innerfree-ayurveda,
    .innerfree-name,
    .innerfree-philosophy,
    .innerfree-vision,
    .innerfree-background,
    .innerfree-closing {
        padding-top: 90px;
        padding-bottom: 90px;
    }

}


@media (max-width: 600px) {

    .about-page-hero {
        padding-top: 40px;
        padding-bottom: 80px;
    }

    .about-page-hero-content h1 {
        font-size: clamp(3.2rem, 15vw, 4.8rem);
    }

    .about-page-hero-content .button,
    .innerfree-closing .button {
        width: 100%;
    }

    .about-page-hero-image {
        min-height: 450px;
    }

    .about-page-hero-image img,
    .innerfree-mirabello-image img,
    .innerfree-travel-image img,
    .innerfree-india-image img,
    .innerfree-sharing-image img,
    .innerfree-ayurveda-image img {
        height: 450px;
    }

    .innerfree-child-highlight,
    .innerfree-yoga-child-highlight {
        padding: 1.7rem;

        border-radius: 20px;
    }

    .innerfree-study-quote {
        min-height: 300px;

        padding: 2rem;
    }

    .innerfree-background-item {
        padding: 2rem;

        border-radius: 22px;
    }

}
/* ---------------------------------------------------------
   HUMAN DESIGN - HERO
--------------------------------------------------------- */

.hd-hero {
    padding-top: 150px;
    padding-bottom: 150px;
    background-color: var(--color-background);
}

.hd-hero-grid {
    display: grid;
    grid-template-columns: 0.95fr 1.05fr;
    gap: 6rem;
    align-items: center;
}

/* TEKST */

.hd-hero-content {
    max-width: 580px;
}

.hd-hero-content h1 {
    max-width: 620px;

    margin-top: 1rem;
    margin-bottom: 2rem;

    color: var(--color-text);

    font-size: clamp(3.4rem, 6vw, 5.6rem);
    line-height: 0.98;
    font-weight: 500;
    letter-spacing: -0.035em;
}

.hd-hero-content .hero-lead {
    max-width: 520px;

    margin-bottom: 1.6rem;

    color: var(--color-plum);

    font-family: "Cormorant Garamond", serif;
    font-size: 1.65rem;
    line-height: 1.45;
}

.hd-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 520px;

    margin-bottom: 1.2rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.hd-hero-content .button {
    margin-top: 1.8rem;
}


/* FOTO */

.hd-hero-image {
    position: relative;

    width: 100%;
    height: 680px;

    overflow: hidden;

    border-radius: 36px;
}

.hd-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.8s ease;
}

.hd-hero-image:hover img {
    transform: scale(1.025);
}


/* TABLET */

@media (max-width: 1000px) {

    .hd-hero {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .hd-hero-grid {
        grid-template-columns: 1fr;
        gap: 4rem;
    }

    .hd-hero-content {
        max-width: 680px;
    }

    .hd-hero-image {
        height: 600px;
    }

}


/* MOBIEL */

@media (max-width: 700px) {

    .hd-hero {
        padding-top: 100px;
        padding-bottom: 90px;
    }

    .hd-hero-grid {
        gap: 3rem;
    }

    .hd-hero-content h1 {
        font-size: clamp(3rem, 13vw, 4.3rem);
    }

    .hd-hero-content .hero-lead {
        font-size: 1.45rem;
    }

    .hd-hero-image {
        height: 520px;
        border-radius: 26px;
    }

}
/* ---------------------------------------------------------
   HUMAN DESIGN - WAT IS HUMAN DESIGN?
--------------------------------------------------------- */

.hd-intro {
    padding-top: 130px;
    padding-bottom: 130px;

    background-color: var(--color-background-soft);
}

.hd-intro .narrow {
    max-width: 820px;
}

.hd-intro h2 {
    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    max-width: 760px;

    color: var(--color-text);

    font-size: clamp(2.8rem, 4.5vw, 4.2rem);
    line-height: 1.08;
    font-weight: 500;
    letter-spacing: -0.025em;
}

.hd-intro p:not(.section-subtitle) {
    max-width: 720px;

    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.95;
}


/* TABLET */

@media (max-width: 900px) {

    .hd-intro {
        padding-top: 100px;
        padding-bottom: 100px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .hd-intro {
        padding-top: 80px;
        padding-bottom: 80px;
    }

    .hd-intro h2 {
        margin-bottom: 2rem;
    }

}
/* ---------------------------------------------------------
   HUMAN DESIGN - DECONDITIONERING
--------------------------------------------------------- */

.hd-deconditioning {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-plum);
}

.hd-deconditioning-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    gap: clamp(4rem, 9vw, 8rem);

    align-items: start;
}

.hd-deconditioning .section-subtitle {
    color: var(--color-lavender-light);
}

.hd-deconditioning-title {
    max-width: 470px;
}

.hd-deconditioning-title h2 {
    margin-top: 0.8rem;

    color: var(--color-white);

    font-size: clamp(3rem, 5vw, 4.6rem);
    line-height: 1.05;
    font-weight: 500;
}

.hd-deconditioning-content {
    max-width: 650px;
}

.hd-deconditioning-content p {
    margin-bottom: 1.4rem;

    color: rgba(255, 255, 255, 0.78);

    line-height: 1.95;
}

.hd-deconditioning-content .hd-highlight {
    margin-top: 2.5rem;
    margin-bottom: 0;

    padding-top: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.18);

    color: var(--color-white);

    font-family: var(--font-heading);
    font-size: clamp(1.65rem, 2.7vw, 2.25rem);
    line-height: 1.5;
}


/* TABLET */

@media (max-width: 900px) {

    .hd-deconditioning {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .hd-deconditioning-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .hd-deconditioning-title,
    .hd-deconditioning-content {
        max-width: 700px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .hd-deconditioning {
        padding-top: 85px;
        padding-bottom: 85px;
    }

    .hd-deconditioning-grid {
        gap: 2.5rem;
    }

}
/* =========================================================
   HUMAN DESIGN — MIJN ERVARING / MEXICO
   ========================================================= */

.hd-story {
    padding: 140px 0;
    background-color: #f3eee7;
}

.hd-story-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 110px;
    align-items: center;
}


/* FOTO
   --------------------------------------------------------- */

.hd-story-image {
    position: relative;
}

.hd-story-image img {
    display: block;
    width: 100%;
    height: 680px;
    object-fit: cover;
    object-position: center;
}


/* TEKST
   --------------------------------------------------------- */

.hd-story-content {
    max-width: 560px;
}

.hd-story-content .section-subtitle {
    margin-bottom: 18px;
}

.hd-story-content h2 {
    max-width: 500px;
    margin-bottom: 36px;
}

.hd-story-content p {
    margin-bottom: 20px;
}

.hd-story-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 900px) {

    .hd-story {
        padding: 100px 0;
    }

    .hd-story-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .hd-story-image {
        max-width: 620px;
    }

    .hd-story-image img {
        height: 620px;
    }

    .hd-story-content {
        max-width: 620px;
    }
}


@media (max-width: 600px) {

    .hd-story {
        padding: 80px 0;
    }

    .hd-story-grid {
        gap: 45px;
    }

    .hd-story-image img {
        height: 500px;
    }
}
/* =========================================================
   HUMAN DESIGN — VAN HOOFD NAAR LICHAAM
   ========================================================= */

.hd-body {
    padding: 130px 24px 140px;

    background-color: #f7f4ef;
}

.hd-body .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* TITEL */

.hd-body h2 {
    max-width: 650px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* GEWONE TEKST */

.hd-body p:not(.section-subtitle):not(.hd-body-quote) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* AFSLUITENDE QUOTE */

.hd-body .hd-body-quote {
    max-width: 680px;

    margin-top: 3.5rem;
    margin-bottom: 0;

    padding-left: 2rem;

    border-left: 1px solid rgba(111, 86, 125, 0.35);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    font-weight: 400;
    line-height: 1.4;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .hd-body {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .hd-body {
        padding: 80px 22px 90px;
    }

    .hd-body h2 {
        margin-bottom: 2rem;
    }

    .hd-body p:not(.section-subtitle):not(.hd-body-quote) {
        line-height: 1.8;
    }

    .hd-body .hd-body-quote {
        margin-top: 2.8rem;

        padding-left: 1.4rem;

        font-size: 1.65rem;
    }

}
/* =========================================================
   HUMAN DESIGN — SLOT CTA
   ========================================================= */

.hd-experiment + .booking {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);

    text-align: center;
}

.hd-experiment + .booking .container {
    max-width: 780px;

    margin-left: auto;
    margin-right: auto;
}

.hd-experiment + .booking .section-subtitle {
    margin-bottom: 1rem;
}

.hd-experiment + .booking h2 {
    max-width: 650px;

    margin: 0 auto 1.8rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.hd-experiment + .booking .booking-text {
    max-width: 560px;

    margin: 0 auto;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.5rem, 2.5vw, 1.9rem);
    line-height: 1.5;

    color: var(--color-text-soft);
}

.hd-experiment + .booking .button {
    margin-top: 2.5rem;
}


/* TABLET */

@media (max-width: 900px) {

    .hd-experiment + .booking {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* MOBIEL */

@media (max-width: 600px) {

    .hd-experiment + .booking {
        padding: 80px 22px 90px;
    }

}
/* =========================================================
   RETREATS — HERO
   ========================================================= */

.retreats-hero {
    padding-top: 150px;
    padding-bottom: 150px;

    background-color: var(--color-background);
}

.retreats-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.retreats-hero-content {
    max-width: 590px;
}

.retreats-hero-content h1 {
    max-width: 620px;

    margin-top: 0.8rem;
    margin-bottom: 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3.4rem, 6vw, 5.5rem);
    font-weight: 500;
    line-height: 0.98;
    letter-spacing: -0.03em;

    color: var(--color-text);
}

.retreats-hero-content .hero-lead {
    max-width: 520px;

    margin-bottom: 1.7rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 1.65rem;
    line-height: 1.45;

    color: var(--color-plum);
}

.retreats-hero-content > p:not(.section-subtitle):not(.hero-lead) {
    max-width: 520px;

    margin-bottom: 1.25rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.retreats-hero-content .button {
    margin-top: 1.8rem;
}


/* ---------------------------------------------------------
   FOTO
   --------------------------------------------------------- */

.retreats-hero-image {
    width: 100%;
    height: 680px;

    overflow: hidden;

    border-radius: 34px;
}

.retreats-hero-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;

    transition: transform 0.8s ease;
}

.retreats-hero-image:hover img {
    transform: scale(1.025);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .retreats-hero {
        padding-top: 120px;
        padding-bottom: 120px;
    }

    .retreats-hero-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .retreats-hero-content {
        max-width: 680px;
    }

    .retreats-hero-image {
        height: 600px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 700px) {

    .retreats-hero {
        padding-top: 100px;
        padding-bottom: 90px;
    }

    .retreats-hero-grid {
        gap: 3rem;
    }

    .retreats-hero-content h1 {
        font-size: clamp(3rem, 13vw, 4.3rem);
    }

    .retreats-hero-content .hero-lead {
        font-size: 1.45rem;
    }

    .retreats-hero-image {
        height: 520px;

        border-radius: 26px;
    }

}
/* =========================================================
   RETREATS — INTRO / TIJD OM TE ZAKKEN
   ========================================================= */

.retreats-intro {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);
}

.retreats-intro .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* TITEL */

.retreats-intro h2 {
    max-width: 680px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* TEKST */

.retreats-intro p:not(.section-subtitle) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.retreats-intro p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .retreats-intro {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .retreats-intro {
        padding: 80px 22px 90px;
    }

    .retreats-intro h2 {
        margin-bottom: 2rem;
    }

    .retreats-intro p:not(.section-subtitle) {
        line-height: 1.8;
    }

}
/* =========================================================
   RETREATS — INDIA RETREAT
   ========================================================= */

.india-retreat {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.india-retreat-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   FOTO
   --------------------------------------------------------- */

.india-retreat-image {
    width: 100%;
    height: 510px;

    overflow: hidden;

    border-radius: 30px;
}

.india-retreat-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center top;
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.india-retreat-content {
    max-width: 600px;
}

.india-retreat-content h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.3rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.india-retreat-content > p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   STATUS — NOVEMBER / VOLZET
   --------------------------------------------------------- */

.retreat-status {
    display: flex;
    align-items: center;

    gap: 1rem;

    width: fit-content;

    margin-top: 2.8rem;
    padding: 0.8rem 1.2rem;

    background-color: var(--color-lavender-light);

    border-radius: 100px;
}

.retreat-status span {
    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-text-soft);
}

.retreat-status strong {
    padding-left: 1rem;

    border-left: 1px solid rgba(111, 86, 125, 0.20);

    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .india-retreat {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .india-retreat-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .india-retreat-image {
        max-width: 650px;
        height: 600px;
    }

    .india-retreat-content {
        max-width: 680px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .india-retreat {
        padding: 85px 22px 90px;
    }

    .india-retreat-grid {
        gap: 3rem;
    }

    .india-retreat-image {
        height: 500px;

        border-radius: 24px;
    }

    .retreat-status {
        margin-top: 2.2rem;
    }

}
/* =========================================================
   RETREATS — ELEMENTEN
   ========================================================= */

.retreat-elements {
    padding: 150px 24px;

    background-color: var(--color-background-soft);
}


/* ---------------------------------------------------------
   TITELBLOK
   --------------------------------------------------------- */

.retreat-elements .section-heading {
    max-width: 780px;

    margin: 0 auto 4.5rem;

    text-align: center;
}

.retreat-elements .section-heading h2 {
    max-width: 700px;

    margin: 0.8rem auto 1.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.retreat-elements .section-intro {
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.retreat-elements-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));

    gap: 1.8rem;

    max-width: 1180px;

    margin: 0 auto;
}


/* ---------------------------------------------------------
   KAARTEN
   --------------------------------------------------------- */

.retreat-element {
    padding: 2.8rem 2.5rem;

    background-color: rgba(255, 255, 255, 0.58);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;

    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.retreat-element:hover {
    transform: translateY(-5px);

    box-shadow:
        0 20px 50px rgba(61, 57, 53, 0.07);
}


/* NUMMER */

.retreat-element > span {
    display: inline-block;

    margin-bottom: 1.5rem;

    font-family: "Manrope", sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.14em;

    color: var(--color-lavender);
}


/* TITEL */

.retreat-element h3 {
    margin-bottom: 1.25rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;

    color: var(--color-plum);
}


/* TEKST */

.retreat-element p {
    margin-bottom: 0;

    color: var(--color-text-soft);

    font-size: 0.95rem;
    line-height: 1.8;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

    .retreat-elements {
        padding-top: 115px;
        padding-bottom: 115px;
    }

    .retreat-elements-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 650px) {

    .retreat-elements {
        padding: 85px 22px 90px;
    }

    .retreat-elements .section-heading {
        margin-bottom: 3rem;
    }

    .retreat-elements-grid {
        grid-template-columns: 1fr;

        gap: 1.4rem;
    }

    .retreat-element {
        padding: 2.2rem 2rem;
    }

}
/* =========================================================
   RETREATS — WAAROM RETREATS?
   ========================================================= */

.retreats-why {
    padding: 140px 24px 150px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.retreats-why-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);

    gap: clamp(4rem, 8vw, 8rem);

    align-items: start;
}


/* ---------------------------------------------------------
   TITEL LINKS
   --------------------------------------------------------- */

.retreats-why-title {
    max-width: 500px;
}

.retreats-why-title h2 {
    margin-top: 0.8rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.retreats-why-content {
    max-width: 650px;
}

.retreats-why-content p {
    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.retreats-why-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .retreats-why {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .retreats-why-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .retreats-why-title,
    .retreats-why-content {
        max-width: 700px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .retreats-why {
        padding: 85px 22px 90px;
    }

    .retreats-why-grid {
        gap: 2.5rem;
    }

}
/* =========================================================
   RETREATS — TOEKOMSTIGE RETREATS
   ========================================================= */

.future-retreats {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);
}

.future-retreats .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;

    text-align: center;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.future-retreats h2 {
    max-width: 680px;

    margin: 0.8rem auto 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.future-retreats p:not(.section-subtitle) {
    max-width: 650px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.future-retreats p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .future-retreats {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .future-retreats {
        padding: 80px 22px 90px;
    }

    .future-retreats h2 {
        margin-bottom: 2rem;
    }

    .future-retreats p:not(.section-subtitle) {
        line-height: 1.8;
    }

}
/* =========================================================
   RETREATS — SLOT
   ========================================================= */

.retreats-closing {
    padding: 130px 24px 140px;

    background-color: var(--color-background);

    text-align: center;
}

.retreats-closing .container {
    max-width: 780px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.retreats-closing h2 {
    max-width: 680px;

    margin: 0.8rem auto 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   LEAD
   --------------------------------------------------------- */

.retreats-closing-lead {
    max-width: 620px;

    margin: 0 auto;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.6rem, 2.8vw, 2rem);
    line-height: 1.5;

    color: var(--color-plum);
}


/* ---------------------------------------------------------
   KNOP
   --------------------------------------------------------- */

.retreats-closing .button {
    margin-top: 2.5rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .retreats-closing {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .retreats-closing {
        padding: 80px 22px 90px;
    }

}
/* =========================================================
   OVER INNERFREE — STUDEREN / EERSTE KEERPUNT
   ========================================================= */

.innerfree-study {
    padding: 140px 24px 150px;

    background-color: var(--color-background);
}

.innerfree-study-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST LINKS
   --------------------------------------------------------- */

.innerfree-study-content {
    max-width: 620px;
}

.innerfree-study-content h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-study-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   QUOTE RECHTS
   --------------------------------------------------------- */

.innerfree-study-quote {
    max-width: 470px;

    padding: 4.5rem 3.8rem;

    background-color: var(--color-lavender-light);

    border-radius:
        46% 54% 48% 52% /
        52% 45% 55% 48%;

    text-align: center;
}

.innerfree-study-quote p {
    margin: 0;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 400;
    line-height: 1.4;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-study {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-study-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-study-content {
        max-width: 680px;
    }

    .innerfree-study-quote {
        max-width: 600px;

        margin-left: auto;
        margin-right: auto;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-study {
        padding: 85px 22px 90px;
    }

    .innerfree-study-grid {
        gap: 3rem;
    }

    .innerfree-study-quote {
        padding: 3.2rem 2.2rem;
    }

}
/* =========================================================
   OVER INNERFREE — MENS & PSYCHOLOGIE
   ========================================================= */

.innerfree-psychology {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);
}

.innerfree-psychology .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* TITEL */

.innerfree-psychology h2 {
    max-width: 680px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* TEKST */

.innerfree-psychology p:not(.section-subtitle) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-psychology p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-psychology {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-psychology {
        padding: 80px 22px 90px;
    }

    .innerfree-psychology h2 {
        margin-bottom: 2rem;
    }

}/* =========================================================
   OVER INNERFREE — MIRABELLO
   ========================================================= */

.innerfree-mirabello {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-mirabello-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   FOTO LINKS
   --------------------------------------------------------- */

.innerfree-mirabello-image {
    width: 100%;
    height: 620px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-mirabello-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.innerfree-mirabello-content {
    max-width: 620px;
}

.innerfree-mirabello-content h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-mirabello-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-mirabello-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-mirabello {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-mirabello-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-mirabello-image {
        max-width: 650px;
        height: 560px;
    }

    .innerfree-mirabello-content {
        max-width: 680px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-mirabello {
        padding: 85px 22px 90px;
    }

    .innerfree-mirabello-grid {
        gap: 3rem;
    }

    .innerfree-mirabello-image {
        height: 460px;

        border-radius: 24px;
    }

}
/* =========================================================
   OVER INNERFREE — BURN-OUT / LICHAAM
   ========================================================= */

.innerfree-burnout {
    padding: 150px 24px;

    background-color: var(--color-plum);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-burnout-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    gap: clamp(4rem, 9vw, 8rem);

    align-items: start;
}


/* ---------------------------------------------------------
   TITEL LINKS
   --------------------------------------------------------- */

.innerfree-burnout-title {
    max-width: 480px;
}

.innerfree-burnout .section-subtitle {
    color: var(--color-lavender-light);
}

.innerfree-burnout-title h2 {
    margin-top: 0.8rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-white);
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.innerfree-burnout-content {
    max-width: 650px;
}

.innerfree-burnout-content p:not(.innerfree-burnout-highlight) {
    margin-bottom: 1.4rem;

    color: rgba(255, 255, 255, 0.78);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   HIGHLIGHT
   --------------------------------------------------------- */

.innerfree-burnout-highlight {
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;

    padding-top: 2rem;
    padding-bottom: 2rem;

    border-top: 1px solid rgba(255, 255, 255, 0.18);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.45;

    color: var(--color-white);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-burnout {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-burnout-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .innerfree-burnout-title,
    .innerfree-burnout-content {
        max-width: 700px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-burnout {
        padding: 85px 22px 90px;
    }

    .innerfree-burnout-grid {
        gap: 2.5rem;
    }

}
/* =========================================================
   OVER INNERFREE — REIZEN / ALLES LOSLATEN
   ========================================================= */

.innerfree-travel {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-travel-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST LINKS
   --------------------------------------------------------- */

.innerfree-travel-content {
    max-width: 620px;
}

.innerfree-travel-content h2 {
    max-width: 570px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-travel-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-travel-content p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   FOTO RECHTS
   --------------------------------------------------------- */

.innerfree-travel-image {
    width: 100%;
    height: 620px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-travel-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-travel {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-travel-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-travel-content {
        max-width: 680px;
    }

    .innerfree-travel-image {
        max-width: 650px;
        height: 560px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-travel {
        padding: 85px 22px 90px;
    }

    .innerfree-travel-grid {
        gap: 3rem;
    }

    .innerfree-travel-image {
        height: 460px;

        border-radius: 24px;
    }

}
/* =========================================================
   OVER INNERFREE — YOGA WAS ER AL
   ========================================================= */

.innerfree-yoga-child {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);
}

.innerfree-yoga-child .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.innerfree-yoga-child h2 {
    max-width: 680px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.innerfree-yoga-child p:not(.section-subtitle):not(.innerfree-yoga-child-highlight) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   HIGHLIGHT
   --------------------------------------------------------- */

.innerfree-yoga-child-highlight {
    max-width: 700px;

    margin-top: 3.5rem;
    margin-bottom: 0;

    padding-left: 2rem;

    border-left: 1px solid rgba(111, 86, 125, 0.30);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.45;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-yoga-child {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-yoga-child {
        padding: 80px 22px 90px;
    }

    .innerfree-yoga-child h2 {
        margin-bottom: 2rem;
    }

    .innerfree-yoga-child-highlight {
        margin-top: 2.8rem;
        padding-left: 1.4rem;
    }

}
/* =========================================================
   OVER INNERFREE — INDIA / THUISKOMEN BIJ JEZELF
   ========================================================= */

.innerfree-india {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-india-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   FOTO LINKS
   --------------------------------------------------------- */

.innerfree-india-image {
    width: 100%;
    height: 620px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-india-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.innerfree-india-content {
    max-width: 620px;
}

.innerfree-india-content h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-india-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-india-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-india {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-india-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-india-image {
        max-width: 650px;
        height: 560px;
    }

    .innerfree-india-content {
        max-width: 680px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-india {
        padding: 85px 22px 90px;
    }

    .innerfree-india-grid {
        gap: 3rem;
    }

    .innerfree-india-image {
        height: 460px;

        border-radius: 24px;
    }

}
/* =========================================================
   OVER INNERFREE — YOGA DELEN
   ========================================================= */

.innerfree-sharing {
    padding: 150px 24px;

    background-color: var(--color-background-soft);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-sharing-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST LINKS
   --------------------------------------------------------- */

.innerfree-sharing-content {
    max-width: 620px;
}

.innerfree-sharing-content h2 {
    max-width: 570px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-sharing-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-sharing-content p:last-child {
    margin-bottom: 0;
}


/* FOTO RECHTS — YOGA DELEN */

.innerfree-sharing-image {
    width: 100%;
    height: 500px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-sharing-image img {
    display: block;

    width: 100%;
    height: 142%;

    object-fit: cover;
    object-position: center top;
}

/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-sharing {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-sharing-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-sharing-content {
        max-width: 680px;
    }

    .innerfree-sharing-image {
        max-width: 650px;
        height: 560px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-sharing {
        padding: 85px 22px 90px;
    }

    .innerfree-sharing-grid {
        gap: 3rem;
    }

    .innerfree-sharing-image {
        height: 460px;

        border-radius: 24px;
    }

}
/* =========================================================
   OVER INNERFREE — AUSTRALIË / DUIKEN
   ========================================================= */

.innerfree-australia {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-australia-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   FOTO LINKS
   --------------------------------------------------------- */

.innerfree-australia-image {
    width: 100%;
    height: 620px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-australia-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.innerfree-australia-content {
    max-width: 620px;
}

.innerfree-australia-content h2 {
    max-width: 560px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-australia-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-australia-content p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-australia {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-australia-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-australia-image {
        max-width: 650px;
        height: 560px;
    }

    .innerfree-australia-content {
        max-width: 680px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-australia {
        padding: 85px 22px 90px;
    }

    .innerfree-australia-grid {
        gap: 3rem;
    }

    .innerfree-australia-image {
        height: 460px;

        border-radius: 24px;
    }

}
/* =========================================================
   OVER INNERFREE — HUMAN DESIGN
   ========================================================= */

.innerfree-hd {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);
}

.innerfree-hd .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.innerfree-hd h2 {
    max-width: 680px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.innerfree-hd p:not(.section-subtitle) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   LINK
   --------------------------------------------------------- */

.innerfree-hd .text-link {
    display: inline-block;

    margin-top: 1.4rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-hd {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-hd {
        padding: 80px 22px 90px;
    }

    .innerfree-hd h2 {
        margin-bottom: 2rem;
    }

}
/* =========================================================
   OVER INNERFREE — AYURVEDA
   ========================================================= */

.innerfree-ayurveda {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-ayurveda-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST LINKS
   --------------------------------------------------------- */

.innerfree-ayurveda-content {
    max-width: 620px;
}

.innerfree-ayurveda-content h2 {
    max-width: 570px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-ayurveda-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-ayurveda-content .text-link {
    display: inline-block;

    margin-top: 1.4rem;
}


/* ---------------------------------------------------------
   FOTO RECHTS
   --------------------------------------------------------- */

.innerfree-ayurveda-image {
    width: 100%;
    height: 620px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-ayurveda-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-ayurveda {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-ayurveda-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-ayurveda-content {
        max-width: 680px;
    }

    .innerfree-ayurveda-image {
        max-width: 650px;
        height: 560px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-ayurveda {
        padding: 85px 22px 90px;
    }

    .innerfree-ayurveda-grid {
        gap: 3rem;
    }

    .innerfree-ayurveda-image {
        height: 460px;

        border-radius: 24px;
    }

}

/* =========================================================
   OVER INNERFREE — DE NAAM INNERFREE
   ========================================================= */

.innerfree-name {
    padding: 150px 24px;

    background-color: var(--color-background-soft);
}

.innerfree-name-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

    align-items: center;

    gap: clamp(4rem, 8vw, 8rem);
}


/* ---------------------------------------------------------
   TEKST LINKS
   --------------------------------------------------------- */

.innerfree-name-content {
    max-width: 620px;
}

.innerfree-name-content h2 {
    max-width: 570px;

    margin-top: 0.8rem;
    margin-bottom: 2.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-name-content p:not(.section-subtitle) {
    margin-bottom: 1.35rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-name-content p:last-child {
    margin-bottom: 0;
}


/* ---------------------------------------------------------
   FOTO RECHTS
   --------------------------------------------------------- */

.innerfree-name-image {
    display: block;

    width: 100%;
    height: 620px;

    overflow: hidden;

    border-radius: 30px;

    box-shadow:
        0 28px 70px rgba(61, 57, 53, 0.08);
}

.innerfree-name-image img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
    object-position: center;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-name {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-name-grid {
        grid-template-columns: 1fr;

        gap: 4rem;
    }

    .innerfree-name-content {
        max-width: 680px;
    }

    .innerfree-name-image {
        max-width: 650px;
        height: 560px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-name {
        padding: 85px 22px 90px;
    }

    .innerfree-name-grid {
        gap: 3rem;
    }

    .innerfree-name-image {
        height: 460px;

        border-radius: 24px;
    }

}
/* =========================================================
   OVER INNERFREE — FILOSOFIE
   ========================================================= */

.innerfree-philosophy {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-philosophy-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);

    align-items: start;

    gap: clamp(4rem, 9vw, 8rem);
}


/* ---------------------------------------------------------
   TITEL LINKS
   --------------------------------------------------------- */

.innerfree-philosophy-title {
    max-width: 480px;
}

.innerfree-philosophy-title h2 {
    max-width: 470px;

    margin-top: 0.8rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST RECHTS
   --------------------------------------------------------- */

.innerfree-philosophy-content {
    max-width: 650px;
}

.innerfree-philosophy-content p:not(.innerfree-philosophy-highlight) {
    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   HIGHLIGHT
   --------------------------------------------------------- */

.innerfree-philosophy-highlight {
    margin-top: 2.8rem;
    margin-bottom: 2.8rem;

    padding-top: 2rem;
    padding-bottom: 2rem;

    border-top: 1px solid rgba(111, 86, 125, 0.18);
    border-bottom: 1px solid rgba(111, 86, 125, 0.18);

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.8rem, 3vw, 2.4rem);
    line-height: 1.45;

    color: var(--color-plum);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-philosophy {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-philosophy-grid {
        grid-template-columns: 1fr;

        gap: 3rem;
    }

    .innerfree-philosophy-title,
    .innerfree-philosophy-content {
        max-width: 700px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-philosophy {
        padding: 85px 22px 90px;
    }

    .innerfree-philosophy-grid {
        gap: 2.5rem;
    }

    .innerfree-philosophy-highlight {
        margin-top: 2.3rem;
        margin-bottom: 2.3rem;

        padding-top: 1.6rem;
        padding-bottom: 1.6rem;
    }

}
/* =========================================================
   OVER INNERFREE — VISIE / BLIJVEN GROEIEN
   ========================================================= */

.innerfree-vision {
    padding: 130px 24px 140px;

    background-color: var(--color-background-soft);
}

.innerfree-vision .container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.innerfree-vision h2 {
    max-width: 700px;

    margin-top: 0.8rem;
    margin-bottom: 2.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.9rem, 5vw, 4.3rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   TEKST
   --------------------------------------------------------- */

.innerfree-vision p:not(.section-subtitle) {
    max-width: 700px;

    margin-bottom: 1.4rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.innerfree-vision p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-vision {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-vision {
        padding: 80px 22px 90px;
    }

    .innerfree-vision h2 {
        margin-bottom: 2rem;
    }

}
/* =========================================================
   OVER INNERFREE — MIJN ACHTERGROND / OPLEIDINGEN
   ========================================================= */

.innerfree-background {
    padding: 150px 24px;

    background-color: var(--color-background);
}


/* ---------------------------------------------------------
   TITELBLOK
   --------------------------------------------------------- */

.innerfree-background .section-heading {
    max-width: 780px;

    margin: 0 auto 4.5rem;

    text-align: center;
}

.innerfree-background .section-heading h2 {
    max-width: 700px;

    margin: 0.8rem auto 1.4rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}

.innerfree-background .section-intro {
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   GRID
   --------------------------------------------------------- */

.innerfree-background-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 1.8rem;

    max-width: 1080px;

    margin: 0 auto;
}


/* ---------------------------------------------------------
   KAARTEN
   --------------------------------------------------------- */

.innerfree-background-item {
    padding: 2.8rem 2.5rem;

    background-color: var(--color-background-soft);

    border: 1px solid rgba(111, 86, 125, 0.08);
    border-radius: 28px;
}


/* Laatste kaart mooi centreren als er 5 zijn */

.innerfree-background-item:last-child {
    grid-column: 1 / -1;

    max-width: 520px;

    width: 100%;

    justify-self: center;
}


/* TITEL KAART */

.innerfree-background-item h3 {
    margin-bottom: 1.5rem;

    font-family: "Cormorant Garamond", serif;
    font-size: 2rem;
    font-weight: 500;
    line-height: 1.15;

    color: var(--color-plum);
}


/* LIJST */

.innerfree-background-item ul {
    margin: 0;
    padding: 0;

    list-style: none;
}

.innerfree-background-item li {
    position: relative;

    padding-left: 1.3rem;
    margin-bottom: 0.9rem;

    color: var(--color-text-soft);

    font-size: 0.95rem;
    line-height: 1.7;
}

.innerfree-background-item li:last-child {
    margin-bottom: 0;
}


/* Klein subtiel bolletje */

.innerfree-background-item li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.72em;

    width: 5px;
    height: 5px;

    border-radius: 50%;

    background-color: var(--color-lavender);
}


/* "IN VERDIEPING" */

.innerfree-background-item li span {
    display: block;

    margin-top: 0.2rem;

    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.07em;
    text-transform: uppercase;

    color: var(--color-lavender);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-background {
        padding-top: 110px;
        padding-bottom: 110px;
    }

    .innerfree-background-grid {
        grid-template-columns: 1fr;

        max-width: 700px;
    }

    .innerfree-background-item:last-child {
        grid-column: auto;

        max-width: none;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-background {
        padding: 85px 22px 90px;
    }

    .innerfree-background .section-heading {
        margin-bottom: 3rem;
    }

    .innerfree-background-item {
        padding: 2.2rem 2rem;
    }

}
/* =========================================================
   OVER INNERFREE — MIJN UITNODIGING / SLOT
   ========================================================= */

.innerfree-closing {
    padding: 140px 24px 150px;

    background-color: var(--color-background-soft);

    text-align: center;
}

.innerfree-closing .container {
    max-width: 800px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.innerfree-closing h2 {
    max-width: 680px;

    margin: 0.8rem auto 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-text);
}


/* ---------------------------------------------------------
   GROTERE KERNZIN
   --------------------------------------------------------- */

.innerfree-closing-lead {
    max-width: 650px;

    margin: 0 auto 2.3rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.7rem, 3vw, 2.2rem);
    line-height: 1.45;

    color: var(--color-plum);
}


/* ---------------------------------------------------------
   GEWONE TEKST
   --------------------------------------------------------- */

.innerfree-closing p:not(.section-subtitle):not(.innerfree-closing-lead) {
    max-width: 620px;

    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1.3rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}


/* ---------------------------------------------------------
   KNOP
   --------------------------------------------------------- */

.innerfree-closing .button {
    margin-top: 2rem;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .innerfree-closing {
        padding-top: 110px;
        padding-bottom: 115px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .innerfree-closing {
        padding: 85px 22px 90px;
    }

    .innerfree-closing h2 {
        margin-bottom: 1.8rem;
    }

    .innerfree-closing-lead {
        margin-bottom: 2rem;
    }

}



/* =========================================================
   OVER INNERFREE — BOEKING / ONT-MOETEN
   ========================================================= */

.booking {
    padding: 125px 24px 135px;

    background-color: var(--color-plum);

    text-align: center;
}

.booking .container {
    max-width: 760px;

    margin-left: auto;
    margin-right: auto;
}


/* ---------------------------------------------------------
   SUBTITEL
   --------------------------------------------------------- */

.booking .section-subtitle {
    color: var(--color-lavender-light);
}


/* ---------------------------------------------------------
   TITEL
   --------------------------------------------------------- */

.booking h2 {
    max-width: 650px;

    margin: 0.8rem auto 2rem;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: -0.02em;

    color: var(--color-white);
}


/* ---------------------------------------------------------
   ONT-MOETEN
   --------------------------------------------------------- */

.booking-text {
    max-width: 580px;

    margin: 0 auto;

    font-family: "Cormorant Garamond", serif;
    font-size: clamp(1.5rem, 2.7vw, 1.9rem);
    line-height: 1.5;

    color: rgba(255, 255, 255, 0.78);
}

.booking-text strong {
    font-weight: 500;

    color: var(--color-white);
}


/* ---------------------------------------------------------
   KNOP
   --------------------------------------------------------- */

.booking .button {
    margin-top: 2.5rem;
}


/* Zorg dat de primary button zichtbaar blijft
   op de donkere achtergrond */

.booking .button-primary {
    background-color: var(--color-background);
    color: var(--color-plum);

    border-color: var(--color-background);
}

.booking .button-primary:hover {
    transform: translateY(-2px);

    background-color: var(--color-background-soft);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .booking {
        padding-top: 105px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .booking {
        padding: 80px 22px 85px;
    }

}
/* =========================================================
   JURIDISCHE PAGINA'S
   ========================================================= */

.legal-hero {
    padding: 130px 24px 100px;

    background-color: var(--color-background-soft);
}

.legal-hero .narrow {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}

.legal-hero h1 {
    margin-top: 0.8rem;
    margin-bottom: 2rem;

    font-family: var(--font-heading);
    font-size: clamp(3.4rem, 7vw, 5.8rem);
    font-weight: 500;
    line-height: 1;

    color: var(--color-text);
}

.legal-intro {
    max-width: 680px;

    color: var(--color-text-soft);

    font-size: 1.1rem;
    line-height: 1.9;
}


/* INHOUD */

.legal-content {
    padding: 120px 24px 140px;

    background-color: var(--color-background);
}

.legal-container {
    max-width: 820px;

    margin-left: auto;
    margin-right: auto;
}


/* SECTIES */

.legal-section {
    padding-bottom: 4rem;
    margin-bottom: 4rem;

    border-bottom: 1px solid rgba(111, 86, 125, 0.12);
}

.legal-section:last-child {
    padding-bottom: 0;
    margin-bottom: 0;

    border-bottom: none;
}


/* TITELS */

.legal-section h2 {
    margin-top: 0;
    margin-bottom: 1.8rem;

    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 500;
    line-height: 1.15;

    color: var(--color-plum);
}


/* TEKST */

.legal-section p {
    max-width: 720px;

    margin-top: 0;
    margin-bottom: 1.3rem;

    color: var(--color-text-soft);

    line-height: 1.9;
}

.legal-section strong {
    color: var(--color-text);

    font-weight: 500;
}


/* LIJSTEN */

.legal-section ul {
    margin: 1.5rem 0 2rem;

    padding-left: 0;

    list-style: none;
}

.legal-section li {
    position: relative;

    margin-bottom: 0.8rem;

    padding-left: 1.5rem;

    color: var(--color-text-soft);

    line-height: 1.8;
}

.legal-section li::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0.75rem;

    width: 6px;
    height: 6px;

    border-radius: 50%;

    background-color: var(--color-lavender);
}


/* LAATST BIJGEWERKT */

.legal-updated {
    margin-top: 2.5rem;

    font-size: 0.85rem;

    color: var(--color-text-soft);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

    .legal-hero {
        padding-top: 105px;
        padding-bottom: 85px;
    }

    .legal-content {
        padding-top: 95px;
        padding-bottom: 110px;
    }

}


/* =========================================================
   MOBIEL
   ========================================================= */

@media (max-width: 600px) {

    .legal-hero {
        padding: 85px 22px 70px;
    }

    .legal-content {
        padding: 75px 22px 90px;
    }

    .legal-section {
        padding-bottom: 3rem;
        margin-bottom: 3rem;
    }

    .legal-section h2 {
        margin-bottom: 1.4rem;
    }

}
/* ========================================
   REVIEWS
======================================== */

.reviews-section {
    padding: 110px 24px;
    background: #f7f4ef;
}

.reviews-container {
    max-width: 1180px;
    margin: 0 auto;
    text-align: center;
}

.reviews-eyebrow {
    margin: 0 0 14px;
    font-family: "Manrope", sans-serif;
    font-size: 0.78rem;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    opacity: 0.65;
}

.reviews-container h2 {
    max-width: 720px;
    margin: 0 auto 20px;
    font-family: "Cormorant Garamond", serif;
    font-size: clamp(2.2rem, 4vw, 3.4rem);
    font-weight: 500;
    line-height: 1.1;
}

.reviews-intro {
    max-width: 620px;
    margin: 0 auto 55px;
    line-height: 1.8;
    opacity: 0.75;
}

.reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    margin-top: 50px;
    text-align: left;
}

.reviews-grid-small {
    grid-template-columns: repeat(3, 1fr);
}

.reviews-grid-hd {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.review-card {
    padding: 38px 34px;
    background: rgba(255, 255, 255, 0.72);
    border-radius: 18px;
}

.review-card p {
    margin: 0 0 22px;
    font-family: "Cormorant Garamond", serif;
    font-size: 1.25rem;
    line-height: 1.55;
}

.review-card p:last-of-type {
    margin-bottom: 22px;
}

.review-card span {
    font-family: "Manrope", sans-serif;
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    opacity: 0.65;
}

.reviews-link {
    display: inline-block;
    margin-top: 42px;
    font-family: "Manrope", sans-serif;
    font-size: 0.9rem;
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid currentColor;
    padding-bottom: 4px;
    transition: opacity 0.25s ease;
}

.reviews-link:hover {
    opacity: 0.6;
}

/* Reviews mobiel */

@media (max-width: 850px) {

    .reviews-section {
        padding: 80px 20px;
    }

    .reviews-grid,
    .reviews-grid-small {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .review-card {
        padding: 30px 26px;
    }

    .review-card p {
        font-size: 1.15rem;
    }
}

/* =========================================================
   MOBIELE VERFIJNINGEN — AUGUSTUS 2026
   Foto's vroeg in beeld, rustige verhoudingen en centrering
   ========================================================= */

@media (max-width: 900px) {

    /* Hero-afbeelding direct na de eerste ondertitel/introzin */
    .hero-grid,
    .yoga-hero-grid,
    .bodywork-hero-grid,
    .hd-hero-grid,
    .workshops-page-hero-grid,
    .about-page-hero-grid,
    .retreats-hero-grid {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 1.8rem;
    }

    .hero-content,
    .yoga-hero-content,
    .bodywork-hero-content,
    .hd-hero-content,
    .workshops-page-hero-content,
    .about-page-hero-content,
    .retreats-hero-content {
        display: contents;
    }

    .hero-content .section-subtitle,
    .hero-content .hero-subtitle,
    .yoga-hero-content .section-subtitle,
    .bodywork-hero-content .section-subtitle,
    .hd-hero-content .section-subtitle,
    .workshops-page-hero-content .section-subtitle,
    .about-page-hero-content .section-subtitle,
    .retreats-hero-content .section-subtitle { order: 1; }

    .hero-content h1,
    .yoga-hero-content h1,
    .bodywork-hero-content h1,
    .hd-hero-content h1,
    .workshops-page-hero-content h1,
    .about-page-hero-content h1,
    .retreats-hero-content h1 { order: 2; }

    .hero-content .hero-lead,
    .yoga-hero-content .hero-lead,
    .bodywork-hero-content .hero-lead,
    .hd-hero-content .hero-lead,
    .workshops-page-hero-content .hero-lead,
    .about-page-hero-content .hero-lead,
    .retreats-hero-content .hero-lead { order: 3; }

    .hero-image,
    .yoga-hero-image,
    .bodywork-hero-image,
    .hd-hero-image,
    .workshops-page-hero-image,
    .about-page-hero-image,
    .retreats-hero-image {
        order: 4;
        width: min(100%, 650px);
        height: auto;
        min-height: 0;
        margin: 0.4rem auto 1rem;
        transform: none;
    }

    .hero-image img,
    .yoga-hero-image img,
    .bodywork-hero-image img,
    .hd-hero-image img,
    .workshops-page-hero-image img,
    .about-page-hero-image img,
    .retreats-hero-image img {
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 5;
        object-fit: cover;
    }

    .hero-content > :not(.hero-subtitle):not(.section-subtitle):not(h1):not(.hero-lead),
    .yoga-hero-content > :not(.section-subtitle):not(h1):not(.hero-lead),
    .bodywork-hero-content > :not(.section-subtitle):not(h1):not(.hero-lead),
    .hd-hero-content > :not(.section-subtitle):not(h1):not(.hero-lead),
    .workshops-page-hero-content > :not(.section-subtitle):not(h1):not(.hero-lead),
    .about-page-hero-content > :not(.section-subtitle):not(h1):not(.hero-lead),
    .retreats-hero-content > :not(.section-subtitle):not(h1):not(.hero-lead) { order: 5; }

    /* Yoga: liggend beeld bij 'Hoe voelt een les?' */
    .yoga-experience-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .yoga-experience-image {
        width: 100%;
        border-radius: 24px;
    }

    .yoga-experience-image img {
        height: auto;
        aspect-ratio: 16 / 10;
        object-position: center 38%;
    }

    /* Ouder & baby: tekst eerst, daarna een rustige liggende foto */
    .baby-massage-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
    }

    .baby-massage-content {
        order: 1;
        max-width: none;
    }

    .baby-massage-image {
        order: 2;
        border-radius: 24px;
    }

    .baby-massage-image img {
        height: auto;
        aspect-ratio: 16 / 10;
    }

    /* Andere vormen: volledige breedte en gecentreerde kaarten */
    .other-bodywork-intro {
        grid-template-columns: minmax(0, 1fr);
        gap: 2.5rem;
        padding-inline: 22px;
    }

    .other-bodywork-intro .section-heading {
        max-width: 760px;
        margin-inline: auto;
        padding-left: 0;
    }

    .other-bodywork-photo {
        width: min(100%, 760px);
        height: auto;
        aspect-ratio: 16 / 9;
        margin-inline: auto;
        border-radius: 24px;
    }

    .other-bodywork-grid {
        width: auto;
        max-width: 1000px;
        margin: 0 22px;
    }

    /* Reviews los van de schermrand, met zachtere tekstballonnen */
    .reviews-container {
        width: min(100%, 720px);
    }

    .review-card {
        position: relative;
        margin-inline: 4px;
        border: 1px solid rgba(111, 86, 125, 0.12);
        border-radius: 24px;
        background: rgba(255, 255, 255, 0.86);
        box-shadow: 0 16px 38px rgba(61, 57, 53, 0.07);
    }

    .review-card::before {
        content: none;
    }
}

@media (min-width: 901px) {
    .reviews-container {
        width: calc(100% - 96px);
        max-width: 1080px;
    }

    .review-card {
        border: 1px solid rgba(111, 86, 125, 0.10);
        border-radius: 26px;
        background: rgba(255, 255, 255, 0.82);
        box-shadow: 0 18px 42px rgba(61, 57, 53, 0.06);
    }
}

/* Laatste responsive overrides voor de workshophero. */
.workshops-page-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .workshops-page-hero-content {
        display: block;
        max-width: none;
    }

    .workshops-page-hero-image-desktop {
        display: none;
    }

    .workshops-page-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .workshops-page-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .workshops-page-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .workshops-page-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .workshops-page-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .workshops-page-hero .hero-lead {
        margin-bottom: 0;
    }

    .workshops-page-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .workshops-page-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}

/* Definitieve responsive overrides voor de retreathero. */
.retreats-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .retreats-hero-content {
        display: block;
        max-width: none;
    }

    .retreats-hero-image-desktop {
        display: none;
    }

    .retreats-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .retreats-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .retreats-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .retreats-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .retreats-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .retreats-hero .hero-lead {
        margin-bottom: 0;
    }

    .retreats-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .retreats-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}

/* Definitieve responsive overrides voor de Over InnerFree-hero. */
.about-page-hero-image-mobile {
    display: none;
}

@media (max-width: 900px) {
    .about-page-hero-content {
        display: block;
        max-width: none;
    }

    .about-page-hero-image-desktop {
        display: none;
    }

    .about-page-hero-image-mobile {
        display: block;
        width: min(100%, 620px);
        min-height: 0;
        margin: 20px auto 24px;
        transform: none;
    }

    .about-page-hero-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        max-height: 460px;
        object-fit: contain;
        object-position: center;
    }
}

@media (max-width: 600px) {
    .about-page-hero {
        padding-top: 20px;
        padding-bottom: 70px;
    }

    .about-page-hero .section-subtitle {
        margin-bottom: 8px;
    }

    .about-page-hero h1 {
        margin-bottom: 10px;
        font-size: clamp(2.35rem, 12vw, 3.35rem);
        line-height: 0.96;
    }

    .about-page-hero .hero-lead {
        margin-bottom: 0;
    }

    .about-page-hero-image-mobile {
        margin-top: 16px;
        margin-bottom: 22px;
    }

    .about-page-hero-image-mobile img {
        max-height: min(40vh, 350px);
    }
}

/* =========================================================
   DEFINITIEVE EINDCORRECTIES — 29/08
   ========================================================= */

/* Geen dubbele openingsfoto's op laptop. */
.about-page-hero-image-mobile,
.workshops-page-hero-image-mobile,
.retreats-hero-image-mobile,
.yoga-hero-image-mobile,
.bodywork-hero-image-mobile,
.hd-hero-image-mobile,
.ayurveda-hero-image-mobile {
    display: none !important;
}

.about-page-hero-image-desktop,
.workshops-page-hero-image-desktop,
.retreats-hero-image-desktop,
.yoga-hero-image-desktop,
.bodywork-hero-image-desktop,
.hd-hero-image-desktop,
.ayurveda-hero-image-desktop {
    display: block !important;
}

@media (max-width: 900px) {
    .about-page-hero-image-mobile,
    .workshops-page-hero-image-mobile,
    .retreats-hero-image-mobile,
    .yoga-hero-image-mobile,
    .bodywork-hero-image-mobile,
    .hd-hero-image-mobile,
    .ayurveda-hero-image-mobile {
        display: block !important;
    }

    .about-page-hero-image-desktop,
    .workshops-page-hero-image-desktop,
    .retreats-hero-image-desktop,
    .yoga-hero-image-desktop,
    .bodywork-hero-image-desktop,
    .hd-hero-image-desktop,
    .ayurveda-hero-image-desktop {
        display: none !important;
    }
}

/* Geen automatisch aanhalingsteken voor reviews. */
.review-card::before {
    content: none !important;
    display: none !important;
}

/* Leesbare links en nadruk op donkerpaarse vlakken. */
.booking .contact-links a,
.contact-links a {
    color: #ffffff !important;
    font-weight: 600;
}

.hd-birth-info strong,
.ayurveda-prevention strong,
.yoga-experience strong,
.quote-section strong,
.hd-experiment strong,
.moon-gatherings strong,
.innerfree-burnout strong,
.innerfree-australia strong,
.innerfree-philosophy-highlight strong,
.hd-deconditioning strong,
.booking strong,
.contact strong {
    color: #ffffff !important;
    font-weight: 700;
}

/* Lichaamswerk: elke sfeerfoto krijgt haar eigen rustige plaats. */
.bodywork-experience-photo,
.bodywork-tea-photo {
    width: min(100%, 760px);
    margin: 2.3rem auto;
}

.bodywork-experience-photo figure {
    margin: 0;
}

.bodywork-experience-photo,
.bodywork-tea-photo {
    overflow: hidden;
    border-radius: 24px;
}

.bodywork-experience-photo img,
.bodywork-tea-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
    object-position: center;
}

.bodywork-tea-photo img {
    object-position: center 58%;
}

/* Human Design: chart + zes compacte overzichtskaarten. */
.hd-benefits-grid {
    grid-template-columns: minmax(260px, 0.72fr) minmax(0, 1.28fr);
    gap: clamp(3rem, 7vw, 6rem);
    align-items: center;
}

.hd-benefits-chart {
    display: block;
    width: min(100%, 330px);
    max-height: 480px;
    margin: 2rem auto 0;
    object-fit: contain;
}

.hd-benefits-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    max-width: none;
}

.hd-benefit,
.hd-benefit:first-child,
.hd-benefit:last-child {
    display: block;
    min-height: 155px;
    padding: 1.45rem;
    border: 1px solid rgba(111, 86, 125, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.72);
    box-shadow: 0 12px 30px rgba(61, 57, 53, 0.05);
}

.hd-benefit span {
    display: block;
    margin-bottom: 0.65rem;
    padding: 0;
}

.hd-benefit p {
    font-size: clamp(1.15rem, 1.8vw, 1.38rem);
    line-height: 1.4;
}

@media (max-width: 900px) {
    .hd-benefits-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .hd-benefits-title {
        max-width: none;
        text-align: center;
    }

    .hd-benefits-chart {
        width: min(70%, 300px);
        max-height: 400px;
    }
}

@media (max-width: 600px) {
    .hd-benefits-list {
        grid-template-columns: 1fr;
    }

    .hd-benefit,
    .hd-benefit:first-child,
    .hd-benefit:last-child {
        min-height: 0;
        padding: 1.25rem 1.3rem;
    }

    .bodywork-experience-photo,
    .bodywork-tea-photo {
        margin: 1.8rem auto;
        border-radius: 20px;
    }
}

/* Over InnerFree: bijkomende foto's direct onder de ondertitel op mobiel. */
.innerfree-travel-image-mobile,
.innerfree-sharing-image-mobile,
.innerfree-ayurveda-image-mobile,
.innerfree-name-image-mobile {
    display: none !important;
}

.innerfree-travel-image-desktop,
.innerfree-sharing-image-desktop,
.innerfree-ayurveda-image-desktop,
.innerfree-name-image-desktop {
    display: block !important;
}

@media (max-width: 900px) {
    .innerfree-travel-image-mobile,
    .innerfree-sharing-image-mobile,
    .innerfree-ayurveda-image-mobile,
    .innerfree-name-image-mobile {
        display: block !important;
        width: 100%;
        margin: 1rem 0 1.6rem;
        overflow: hidden;
        border-radius: 22px;
    }

    .innerfree-travel-image-desktop,
    .innerfree-sharing-image-desktop,
    .innerfree-ayurveda-image-desktop,
    .innerfree-name-image-desktop {
        display: none !important;
    }

    .innerfree-travel-image-mobile img,
    .innerfree-sharing-image-mobile img,
    .innerfree-ayurveda-image-mobile img,
    .innerfree-name-image-mobile img {
        display: block;
        width: 100%;
        height: auto;
        aspect-ratio: 4 / 3;
        object-fit: cover;
        object-position: center;
    }

    .innerfree-name-image-mobile img {
        object-position: center 42%;
    }
}

/* Definitieve mobiele plaatsing voor verhaalbeelden en lesbeeld. */
@media (max-width: 900px) {
    .innerfree-travel-content,
    .innerfree-sharing-content,
    .innerfree-ayurveda-content,
    .yoga-experience-content {
        display: flex;
        flex-direction: column;
        max-width: none;
    }

    .innerfree-travel-content > .section-subtitle,
    .innerfree-sharing-content > .section-subtitle,
    .innerfree-ayurveda-content > .section-subtitle,
    .yoga-experience-content > .section-subtitle {
        order: 1;
    }

    .innerfree-travel-image-mobile,
    .innerfree-sharing-image-mobile,
    .innerfree-ayurveda-image-mobile,
    .yoga-experience-image-mobile {
        order: 2;
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 1rem 0 1.6rem !important;
        padding: 0 !important;
        overflow: hidden;
        border: 0 !important;
        border-radius: 22px;
        background: transparent !important;
        box-shadow: none !important;
        transform: none !important;
    }

    .innerfree-travel-content > h2,
    .innerfree-sharing-content > h2,
    .innerfree-ayurveda-content > h2,
    .yoga-experience-content > h2 {
        order: 3;
    }

    .innerfree-travel-content > :not(.section-subtitle):not(.innerfree-travel-image-mobile):not(h2),
    .innerfree-sharing-content > :not(.section-subtitle):not(.innerfree-sharing-image-mobile):not(h2),
    .innerfree-ayurveda-content > :not(.section-subtitle):not(.innerfree-ayurveda-image-mobile):not(h2),
    .yoga-experience-content > :not(.section-subtitle):not(.yoga-experience-image-mobile):not(h2) {
        order: 4;
    }

    .innerfree-travel-image-mobile img,
    .innerfree-sharing-image-mobile img,
    .innerfree-ayurveda-image-mobile img,
    .yoga-experience-image-mobile img {
        display: block;
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        margin: 0 !important;
        padding: 0 !important;
        border-radius: 0 !important;
        object-fit: cover;
    }

    .innerfree-travel-image-mobile img {
        aspect-ratio: 4 / 5;
        object-position: center;
    }

    .innerfree-sharing-image-mobile img,
    .innerfree-ayurveda-image-mobile img {
        aspect-ratio: 4 / 3;
    }

    .yoga-experience-image-mobile img {
        aspect-ratio: 16 / 10;
        object-position: center 38%;
    }

    /* InnerFree-foto opnieuw na de volledige tekst. */
    .innerfree-name-image-mobile {
        display: none !important;
    }

    .innerfree-name-image-desktop {
        display: block !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden;
        border-radius: 22px;
        background: transparent !important;
        box-shadow: none !important;
    }

    .innerfree-name-image-desktop img {
        display: block;
        width: 100%;
        height: auto !important;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        object-position: center 42%;
    }
}

/* Over InnerFree, Workshops & Retreats: zachte, organische mobiele hero-vorm. */
@media (max-width: 900px) {
    .about-page-hero-image-mobile,
    .workshops-page-hero-image-mobile,
    .retreats-hero-image-mobile {
        position: relative;
        isolation: isolate;
        width: min(calc(100% - 12px), 580px) !important;
        margin: 1.4rem auto 2rem !important;
        overflow: visible !important;
        border-radius: 48% 48% 28px 28px / 24% 24% 28px 28px !important;
        background: transparent !important;
        box-shadow: none !important;
    }

    .about-page-hero-image-mobile::before,
    .workshops-page-hero-image-mobile::before,
    .retreats-hero-image-mobile::before {
        content: "";
        position: absolute;
        inset: 14px -10px -12px 14px;
        z-index: -1;
        border-radius: 48% 48% 28px 28px / 24% 24% 28px 28px;
        background: rgba(177, 153, 190, 0.22);
    }

    .about-page-hero-image-mobile img,
    .workshops-page-hero-image-mobile img,
    .retreats-hero-image-mobile img {
        display: block;
        position: relative;
        z-index: 1;
        width: 100%;
        height: auto !important;
        max-height: none !important;
        aspect-ratio: 4 / 5;
        object-fit: cover;
        border: 1px solid rgba(255, 255, 255, 0.65);
        border-radius: 48% 48% 28px 28px / 24% 24% 28px 28px !important;
        box-shadow: 0 18px 42px rgba(61, 57, 53, 0.10);
    }

    .workshops-page-hero-image-mobile img {
        object-position: center 42%;
    }

    .about-page-hero-image-mobile img {
        object-position: center 38%;
    }

    .retreats-hero-image-mobile img {
        object-position: center;
    }
}


/* =========================================================
   NEW MOON JOURNEY — WORKSHOPKAART, LANDINGSPAGINA & HOME
   ========================================================= */

.new-moon-feature {
    padding: 135px 24px;
    background: linear-gradient(145deg, #f1ece7 0%, #f8f6f2 100%);
}

.new-moon-feature-grid {
    display: grid;
    grid-template-columns: minmax(360px, 0.9fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3.5rem, 8vw, 7rem);
}

.new-moon-feature-images,
.new-moon-hero-image {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.7rem;
    position: relative;
}

.new-moon-feature-images::before,
.new-moon-hero-image::before {
    position: absolute;
    inset: -18px 18px 18px -18px;
    z-index: 0;
    border-radius: 42% 42% 28px 28px;
    background: var(--color-lavender-light);
    content: "";
    opacity: 0.38;
    transform: rotate(-1.5deg);
}

.new-moon-feature-images img,
.new-moon-hero-image img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 620px;
    border-radius: 200px 200px 24px 24px;
    object-fit: cover;
}

.new-moon-feature-images img:first-child,
.new-moon-hero-image img:first-child {
    object-position: center 53%;
}

.new-moon-feature-images img:last-child,
.new-moon-hero-image img:last-child {
    object-position: center 72%;
}

.new-moon-feature-content h2 {
    margin: 0.55rem 0 1.15rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: clamp(3.4rem, 6vw, 5.5rem);
    font-weight: 500;
    line-height: 0.98;
}

.new-moon-feature-lead {
    max-width: 620px;
    color: var(--color-text);
    font-family: var(--font-heading);
    font-size: clamp(1.35rem, 2.3vw, 1.8rem);
    line-height: 1.45;
}

.new-moon-feature-content > p:not(.section-subtitle):not(.new-moon-feature-lead) {
    max-width: 620px;
    color: var(--color-text-soft);
    line-height: 1.85;
}

.new-moon-feature-details,
.new-moon-quick-details {
    display: grid;
    gap: 0.5rem;
    margin: 2rem 0;
    padding: 0;
    color: var(--color-text);
    font-size: 0.96rem;
    font-weight: 500;
    list-style: none;
}

.new-moon-feature-details li,
.new-moon-quick-details li {
    position: relative;
    padding-left: 1.25rem;
}

.new-moon-feature-details li::before,
.new-moon-quick-details li::before {
    position: absolute;
    top: 0.75em;
    left: 0;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--color-lavender);
    content: "";
}

.new-moon-feature-actions,
.home-event-highlight-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    margin-top: 2rem;
}

.new-moon-hero {
    padding: 105px 0 125px;
    overflow: hidden;
    background: var(--color-background);
}

.new-moon-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(420px, 0.85fr);
    align-items: center;
    gap: clamp(3.5rem, 8vw, 7rem);
}

.new-moon-hero-content h1 {
    margin: 0.45rem 0 1.4rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: clamp(4.5rem, 8vw, 7.5rem);
    font-weight: 500;
    line-height: 0.86;
    letter-spacing: -0.035em;
}

.new-moon-hero-content .hero-lead {
    max-width: 650px;
    color: var(--color-text-soft);
    font-size: clamp(1.14rem, 2vw, 1.42rem);
    line-height: 1.7;
}

.new-moon-hero-image-mobile {
    display: none;
}

.new-moon-intro {
    padding: 135px 24px;
    background: var(--color-plum);
    color: var(--color-white);
    text-align: center;
}

.new-moon-intro .section-subtitle {
    color: var(--color-lavender-light);
}

.new-moon-intro h2 {
    max-width: 820px;
    margin: 0.75rem auto 2rem;
    color: var(--color-white);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 4.6rem);
    font-weight: 500;
    line-height: 1.07;
}

.new-moon-intro p:not(.section-subtitle) {
    max-width: 710px;
    margin: 1rem auto 0;
    color: rgba(255, 255, 255, 0.84);
    line-height: 1.9;
}

.new-moon-intro strong {
    color: var(--color-white);
}

.new-moon-flow {
    padding: 140px 24px;
    background: var(--color-background);
}

.new-moon-flow .section-heading {
    max-width: 760px;
    margin: 0 auto 4.5rem;
    text-align: center;
}

.new-moon-flow .section-heading h2 {
    margin: 0.7rem 0 1.2rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: clamp(3rem, 5vw, 4.7rem);
    font-weight: 500;
    line-height: 1.05;
}

.new-moon-flow .section-intro {
    color: var(--color-text-soft);
    line-height: 1.85;
}

.new-moon-flow-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1.5rem;
    max-width: 1080px;
    margin: 0 auto;
}

.new-moon-step {
    padding: 2.7rem;
    border: 1px solid rgba(111, 86, 125, 0.1);
    border-radius: 26px;
    background: rgba(255, 255, 255, 0.62);
}

.new-moon-step-wide {
    grid-column: 1 / -1;
}

.new-moon-step > span {
    color: var(--color-lavender);
    font-family: var(--font-heading);
    font-size: 2.4rem;
    font-style: italic;
}

.new-moon-step h3 {
    margin: 0.7rem 0 1rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: 2rem;
    font-weight: 500;
}

.new-moon-step p {
    margin: 0;
    color: var(--color-text-soft);
    line-height: 1.8;
}

.new-moon-guides {
    padding: 140px 24px;
    background: var(--color-background-soft);
}

.new-moon-guides-grid {
    display: grid;
    gap: 6rem;
}

.new-moon-guide {
    display: grid;
    grid-template-columns: minmax(300px, 0.75fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(3rem, 7vw, 6rem);
    max-width: 1050px;
    margin: 0 auto;
}

.new-moon-guide-reverse img {
    grid-column: 2;
}

.new-moon-guide-reverse > div {
    grid-column: 1;
    grid-row: 1;
}

.new-moon-guide img {
    width: 100%;
    height: 520px;
    border-radius: 220px 220px 26px 26px;
    object-fit: cover;
}

.new-moon-guide:first-child img {
    object-position: center 55%;
}

.new-moon-guide:last-child img {
    object-position: center 72%;
}

.new-moon-guide h2,
.new-moon-practical h2,
.new-moon-booking-card h2 {
    margin: 0.55rem 0 1.25rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    font-weight: 500;
    line-height: 1.05;
}

.new-moon-guide p:not(.section-subtitle) {
    color: var(--color-text-soft);
    line-height: 1.9;
}

.new-moon-practical {
    padding: 140px 24px;
    background: var(--color-background);
}

.new-moon-practical-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(320px, 0.65fr);
    align-items: start;
    gap: clamp(3rem, 8vw, 7rem);
}

.new-moon-practical-grid > div > p:not(.section-subtitle) {
    color: var(--color-text-soft);
    line-height: 1.8;
}

.new-moon-bring-list {
    display: grid;
    gap: 0.8rem;
    margin: 2rem 0;
    padding: 0;
    list-style: none;
}

.new-moon-bring-list li {
    position: relative;
    padding-left: 1.5rem;
    color: var(--color-text);
}

.new-moon-bring-list li::before {
    position: absolute;
    top: 0.65em;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-lavender);
    content: "";
}

.new-moon-food-note {
    max-width: 650px;
    margin-top: 2rem;
    padding: 1.7rem 1.9rem;
    border-left: 4px solid var(--color-lavender);
    border-radius: 0 18px 18px 0;
    background: var(--color-background-soft);
}

.new-moon-food-note h3 {
    margin: 0 0 0.6rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-weight: 500;
}

.new-moon-food-note p {
    margin: 0;
    color: var(--color-text-soft);
    font-size: 0.94rem;
    line-height: 1.75;
}

.new-moon-booking-card {
    padding: 3rem;
    border: 1px solid rgba(111, 86, 125, 0.12);
    border-radius: 30px;
    background: var(--color-background-soft);
    box-shadow: 0 24px 60px rgba(61, 57, 53, 0.07);
}

.new-moon-booking-card p {
    color: var(--color-text-soft);
    line-height: 1.7;
}

.new-moon-booking-card .new-moon-payment {
    margin: 1.6rem 0;
    padding-top: 1.4rem;
    border-top: 1px solid rgba(111, 86, 125, 0.13);
    font-size: 0.92rem;
}

.new-moon-booking-card .button {
    width: 100%;
    margin-top: 0.7rem;
    text-align: center;
}

.home-event-highlight {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2.5rem;
    max-width: 980px;
    margin: 3rem auto 0;
    padding: 2.5rem 3rem;
    border: 1px solid rgba(111, 86, 125, 0.11);
    border-radius: 28px;
    background: rgba(255, 255, 255, 0.62);
    text-align: left;
}

.home-event-highlight-copy {
    max-width: 590px;
}

.home-event-highlight h3 {
    margin: 0.45rem 0 0.7rem;
    color: var(--color-plum);
    font-family: var(--font-heading);
    font-size: clamp(2.2rem, 4vw, 3.3rem);
    font-weight: 500;
}

.home-event-highlight p {
    color: var(--color-text-soft);
    line-height: 1.7;
}

.home-event-highlight .home-event-date,
.home-event-highlight .home-event-meta {
    color: var(--color-plum);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.home-event-highlight-actions {
    flex: 0 0 230px;
    flex-direction: column;
    margin-top: 0;
}

.home-event-highlight-actions .button {
    width: 100%;
    text-align: center;
}

.home-workshops-link {
    margin-top: 2rem;
}

@media (max-width: 900px) {
    .new-moon-feature,
    .new-moon-flow,
    .new-moon-guides,
    .new-moon-practical,
    .new-moon-intro {
        padding-top: 105px;
        padding-bottom: 105px;
    }

    .new-moon-feature-grid,
    .new-moon-hero-grid,
    .new-moon-practical-grid {
        grid-template-columns: 1fr;
    }

    .new-moon-feature-images {
        max-width: 620px;
        margin: 0 auto;
    }

    .new-moon-hero-image-desktop {
        display: none;
    }

    .new-moon-hero-image-mobile {
        display: grid;
        max-width: 620px;
        margin: 2.5rem auto;
    }

    .new-moon-feature-images img,
    .new-moon-hero-image img {
        height: 560px;
    }

    .new-moon-guide,
    .new-moon-guide-reverse {
        grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1fr);
        gap: 2.5rem;
    }

    .home-event-highlight {
        align-items: flex-start;
        flex-direction: column;
    }

    .home-event-highlight-actions {
        width: 100%;
        flex: none;
        flex-direction: row;
    }
}

@media (max-width: 650px) {
    .new-moon-feature,
    .new-moon-flow,
    .new-moon-guides,
    .new-moon-practical,
    .new-moon-intro {
        padding: 78px 22px;
    }

    .new-moon-hero {
        padding: 72px 22px 88px;
    }

    .new-moon-hero-content {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .new-moon-hero-content .section-subtitle { order: 1; }
    .new-moon-hero-content h1 { order: 2; }
    .new-moon-hero-content .hero-lead { order: 3; }
    .new-moon-hero-image-mobile { order: 4; }
    .new-moon-quick-details { order: 5; }
    .new-moon-hero-content > .button { order: 6; }

    .new-moon-feature-grid {
        gap: 3rem;
    }

    .new-moon-feature-images img,
    .new-moon-hero-image img {
        height: 390px;
        border-radius: 120px 120px 18px 18px;
    }

    .new-moon-feature-images::before,
    .new-moon-hero-image::before {
        inset: -10px 10px 10px -10px;
    }

    .new-moon-feature-content h2,
    .new-moon-hero-content h1 {
        font-size: clamp(3.6rem, 17vw, 5.2rem);
    }

    .new-moon-feature-actions,
    .home-event-highlight-actions {
        flex-direction: column;
    }

    .new-moon-feature-actions .button,
    .home-event-highlight-actions .button {
        width: 100%;
        text-align: center;
    }

    .new-moon-flow-grid {
        grid-template-columns: 1fr;
    }

    .new-moon-step-wide {
        grid-column: auto;
    }

    .new-moon-step {
        padding: 2.1rem;
    }

    .new-moon-guide,
    .new-moon-guide-reverse {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .new-moon-guide-reverse img,
    .new-moon-guide-reverse > div {
        grid-column: auto;
        grid-row: auto;
    }

    .new-moon-guide img {
        height: 440px;
        border-radius: 180px 180px 22px 22px;
    }

    .new-moon-booking-card {
        padding: 2.2rem 1.7rem;
    }

    .home-event-highlight {
        padding: 2rem 1.6rem;
    }
}

/* Mobiel: vetgedrukte tekst op de donkerpaarse yogasectie leesbaar houden. */
@media (max-width: 900px) {
    .yoga-experience .yoga-experience-content p strong {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}