/* ========================================
   Homepage participation routes
======================================== */

.home-routes {
    position: relative;
    overflow: hidden;
    background: var(--color-soft-green);
}

.home-routes__header {
    display: grid;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(18rem, 0.65fr);
    gap: clamp(2rem, 7vw, 6rem);
}

.home-routes__heading {
    max-width: 620px;
}

.home-routes__heading h2 {
    max-width: 590px;
    margin-bottom: 0;
}

.home-routes__introduction {
    max-width: 430px;
    padding-left: 1.3rem;
    border-left: 2px solid rgba(62, 107, 71, 0.2);
}

.home-routes__introduction p {
    margin-bottom: 0.75rem;
    color: var(--color-text-muted);
    line-height: 1.75;
}

.home-routes__introduction span {
    color: var(--color-green);
    font-size: 0.78rem;
    font-weight: 800;
}

/* Route cards */

.home-routes__grid {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.route-card {
    position: relative;
    display: flex;
    min-height: 330px;
    overflow: hidden;
    padding: 1.6rem;
    border: 1px solid rgba(62, 107, 71, 0.13);
    border-radius: var(--radius-large);
    background: rgba(255, 255, 255, 0.86);
    box-shadow: 0 0.8rem 2rem rgba(41, 77, 51, 0.07);
    flex-direction: column;
    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

.route-card::before {
    position: absolute;
    right: -4.5rem;
    bottom: -5.5rem;
    width: 11rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(183, 206, 177, 0.22);
    content: "";
    pointer-events: none;
    transition: transform var(--transition-normal);
}

.route-card:hover {
    border-color: rgba(62, 107, 71, 0.26);
    box-shadow: 0 1.15rem 2.8rem rgba(41, 77, 51, 0.12);
    transform: translateY(-6px);
}

.route-card:hover::before {
    transform: scale(1.1);
}

/* Featured middle card */

.route-card--featured {
    border-color: transparent;
    background: var(--color-green);
    box-shadow: 0 1rem 2.8rem rgba(41, 77, 51, 0.18);
    color: var(--color-white);
}

.route-card--featured::before {
    background: rgba(255, 255, 255, 0.07);
}

/* Card top */

.route-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 3.25rem;
}

.route-card__number {
    color: var(--color-green);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.route-card__icon {
    display: inline-flex;
    width: 2.6rem;
    height: 2.6rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.12);
    border-radius: 50%;
    background: var(--color-soft-green);
    color: var(--color-green);
}

.route-card__icon svg {
    width: 1.1rem;
    height: 1.1rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.route-card--featured .route-card__number {
    color: rgba(255, 255, 255, 0.65);
}

.route-card--featured .route-card__icon {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.09);
    color: var(--color-white);
}

/* Card content */

.route-card__content {
    position: relative;
    z-index: 1;
    margin-bottom: 2rem;
}

.route-card__content h3 {
    margin-bottom: 0.85rem;
    color: var(--color-text);
    font-size: clamp(1.15rem, 1.8vw, 1.4rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.25;
}

.route-card__content p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.88rem;
    line-height: 1.7;
}

.route-card--featured .route-card__content h3 {
    color: var(--color-white);
}

.route-card--featured .route-card__content p {
    color: rgba(255, 255, 255, 0.7);
}

/* Card link */

.route-card__link {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 3rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(62, 107, 71, 0.12);
    color: var(--color-green-dark);
    font-size: 0.78rem;
    font-weight: 800;
    text-decoration: none;
}

.route-card__arrow {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.15);
    border-radius: 50%;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.route-card__link:hover .route-card__arrow {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateX(3px);
}

.route-card--featured .route-card__link {
    border-color: rgba(255, 255, 255, 0.14);
    color: var(--color-white);
}

.route-card--featured .route-card__arrow {
    border-color: rgba(255, 255, 255, 0.2);
}

.route-card--featured .route-card__link:hover .route-card__arrow {
    background: var(--color-white);
    color: var(--color-green-dark);
}

/* ========================================
   Homepage initiatives carousel
======================================== */

.home-initiatives {
    position: relative;
    overflow: hidden;
    background: var(--color-cream);
}

.home-initiatives__header {
    display: grid;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 4rem);
}

.home-initiatives__header .section-header {
    max-width: 700px;
    margin-bottom: 0;
}

.home-initiatives__header .lead {
    max-width: 610px;
}

/* Carousel outer frame */

.initiative-carousel {
    position: relative;
}

.initiative-carousel__viewport {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(62, 107, 71, 0.14);
    border-radius: 2rem;
    background: var(--color-white);
    box-shadow:
        0 0 0 5px rgba(62, 107, 71, 0.035),
        0 1.5rem 3.8rem rgba(41, 77, 51, 0.12);
}

.initiative-carousel__track {
    display: flex;
    transition:
        transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

/* Individual slides */

.initiative-slide {
    position: relative;
    display: grid;
    min-width: 100%;
    min-height: clamp(32rem, 46vw, 40rem);
    overflow: hidden;
    background: var(--color-white);
    grid-template-columns:
        minmax(0, 1.3fr)
        minmax(21rem, 0.7fr);
    opacity: 0.4;
    transform: scale(0.988);
    transition:
        opacity 500ms ease,
        transform 650ms cubic-bezier(0.22, 1, 0.36, 1);
}

.initiative-slide.is-active {
    opacity: 1;
    transform: scale(1);
}

/* Image or placeholder side */

.initiative-slide__image {
    position: relative;
    min-height: clamp(32rem, 46vw, 40rem);
    overflow: hidden;
    background: var(--color-soft-green);
}

.initiative-slide__image::after {
    position: absolute;
    inset: 0;
    z-index: 1;
    background:
        linear-gradient(
            180deg,
            transparent 52%,
            rgba(21, 31, 24, 0.34) 100%
        );
    content: "";
    pointer-events: none;
}

.initiative-slide__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        filter 500ms ease,
        transform 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}

.initiative-slide.is-active:hover .initiative-slide__image img {
    transform: scale(1.04);
}

/* Temporary image placeholder */

.initiative-slide__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    gap: 1rem;
    background:
        radial-gradient(
            circle at 18% 16%,
            rgba(255, 255, 255, 0.78),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--color-soft-green),
            var(--color-green-light)
        );
}

.initiative-slide__placeholder::before,
.initiative-slide__placeholder::after {
    position: absolute;
    border-radius: 45% 55% 62% 38% / 48% 42% 58% 52%;
    background: rgba(62, 107, 71, 0.12);
    content: "";
}

.initiative-slide__placeholder::before {
    top: -8rem;
    right: -5rem;
    width: 23rem;
    aspect-ratio: 1;
    transform: rotate(-18deg);
}

.initiative-slide__placeholder::after {
    bottom: -10rem;
    left: -7rem;
    width: 26rem;
    aspect-ratio: 1;
    transform: rotate(24deg);
}

.initiative-slide__placeholder-mark {
    position: relative;
    z-index: 1;
    display: inline-flex;
    width: clamp(7.5rem, 14vw, 10rem);
    aspect-ratio: 1;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.2);
    border-radius: 50%;
    background: rgba(244, 241, 236, 0.78);
    box-shadow:
        0 1rem 2.8rem rgba(41, 77, 51, 0.13);
    color: var(--color-green);
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: -0.08em;
    backdrop-filter: blur(14px);
}

.initiative-slide__placeholder-name {
    position: relative;
    z-index: 1;
    color: var(--color-green-dark);
    font-size: var(--font-md);
    font-weight: 800;
}

/* Image category pill */

.initiative-slide__category {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.68rem 0.95rem;
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.9);
    box-shadow: 0 0.65rem 1.8rem rgba(0, 0, 0, 0.09);
    color: var(--color-green-dark);
    font-size: var(--font-xs);
    font-weight: 800;
    backdrop-filter: blur(14px);
}

.initiative-slide__category::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-green);
    content: "";
}

/* Text side */

.initiative-slide__content {
    position: relative;
    display: flex;
    min-width: 0;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    padding: clamp(2.5rem, 5vw, 4.5rem);
    background: var(--color-white);
}

.initiative-slide__content::after {
    position: absolute;
    right: -8rem;
    bottom: -10rem;
    width: 20rem;
    aspect-ratio: 1;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    background: rgba(183, 206, 177, 0.12);
    content: "";
    pointer-events: none;
    transform: rotate(20deg);
}

.initiative-slide__meta,
.initiative-slide__content h3,
.initiative-slide__content p,
.initiative-slide__link {
    position: relative;
    z-index: 1;
}

.initiative-slide__meta {
    display: flex;
    align-items: baseline;
    margin-bottom: clamp(2rem, 4vw, 3rem);
}

.initiative-slide__number {
    color: var(--color-green);
    font-size: clamp(2.1rem, 3.4vw, 3.2rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1;
}

.initiative-slide__total {
    margin-left: 0.4rem;
    color: var(--color-text-muted);
    font-size: 0.82rem;
    font-weight: 800;
}

.initiative-slide__content h3 {
    max-width: 420px;
    margin-bottom: 1rem;
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.05em;
    line-height: 1.08;
}

.initiative-slide__content p {
    max-width: 31rem;
    margin-bottom: clamp(2rem, 4vw, 3rem);
    color: var(--color-text-muted);
    font-size: 0.96rem;
    line-height: 1.75;
}

.initiative-slide__link {
    display: inline-flex;
    align-self: flex-start;
    align-items: center;
    gap: 0.6rem;
    margin-top: auto;
}

.initiative-slide__link::after {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.17);
    border-radius: 50%;
    content: "→";
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.initiative-slide__link:hover::after {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateX(3px);
}

/* Previous and next controls */

.initiative-carousel__controls {
    display: flex;
    flex-shrink: 0;
    gap: 0.35rem;
    padding: 0.35rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.62);
    box-shadow: var(--shadow-small);
    backdrop-filter: blur(12px);
}

.initiative-carousel__button {
    display: inline-flex;
    width: 3.15rem;
    height: 3.15rem;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--color-green-dark);
    font-size: 1.15rem;
    cursor: pointer;
    transition:
        color var(--transition-fast),
        background-color var(--transition-fast),
        box-shadow var(--transition-fast),
        transform var(--transition-fast);
}

.initiative-carousel__button:hover {
    background: var(--color-green);
    box-shadow: 0 0.55rem 1.4rem rgba(41, 77, 51, 0.2);
    color: var(--color-white);
    transform: translateY(-2px);
}

.initiative-carousel__button:focus-visible {
    outline: 3px solid rgba(62, 107, 71, 0.28);
    outline-offset: 2px;
}

/* Footer and progress indicators */

.initiative-carousel__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-top: clamp(1.5rem, 3vw, 2rem);
}

.initiative-carousel__dots {
    display: flex;
    min-width: min(18rem, 45vw);
    align-items: center;
    gap: 0.5rem;
}

.initiative-carousel__dot {
    position: relative;
    width: 3.2rem;
    height: 0.35rem;
    overflow: hidden;
    padding: 0;
    border: 0;
    border-radius: var(--radius-pill);
    background: rgba(62, 107, 71, 0.16);
    cursor: pointer;
    transition:
        background-color var(--transition-normal),
        transform var(--transition-normal);
}

.initiative-carousel__dot::after {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: var(--color-green);
    content: "";
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.initiative-carousel__dot:hover {
    background: rgba(62, 107, 71, 0.28);
    transform: scaleY(1.25);
}

.initiative-carousel__dot.is-active::after {
    transform: scaleX(1);
}

/* ========================================
   Homepage impact section
======================================== */

.home-impact {
    position: relative;
    overflow: hidden;
    background: #3b7049;
    color: var(--color-white);
}

/* Soft organic background forms */

.home-impact::before,
.home-impact::after {
    position: absolute;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    content: "";
    pointer-events: none;
}

.home-impact::before {
    top: -19rem;
    right: -12rem;
    width: 39rem;
    aspect-ratio: 1;
    background: rgba(255, 255, 255, 0.045);
    transform: rotate(-18deg);
}

.home-impact::after {
    bottom: -23rem;
    left: -15rem;
    width: 44rem;
    aspect-ratio: 1;
    background: rgba(14, 30, 19, 0.08);
    transform: rotate(24deg);
}

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

/* Section introduction */

.home-impact__header {
    display: grid;
    align-items: end;
    margin-bottom: clamp(3rem, 6vw, 4.75rem);
    grid-template-columns:
        minmax(0, 1.05fr)
        minmax(20rem, 0.75fr);
    gap: clamp(2rem, 7vw, 6rem);
}

.home-impact__heading {
    max-width: 700px;
}

.home-impact__heading h2 {
    max-width: 650px;
    margin-bottom: 0;
    color: var(--color-white);
}

.home-impact .eyebrow {
    color: rgba(255, 255, 255, 0.68);
}

.home-impact__introduction {
    max-width: 500px;
    padding-left: 1.35rem;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
}

.home-impact__introduction .lead {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.76);
    font-size: 1rem;
    line-height: 1.75;
}

/* Impact-card grid */

.home-impact__grid {
    position: relative;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

/* Subtle connecting line */

.home-impact__grid::before {
    position: absolute;
    top: 3.7rem;
    right: 7%;
    left: 7%;
    height: 1px;
    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(255, 255, 255, 0.18) 14%,
            rgba(255, 255, 255, 0.18) 86%,
            transparent
        );
    content: "";
    pointer-events: none;
}

/* Individual cards */

.impact-card {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 330px;
    overflow: hidden;
    flex-direction: column;
    padding: clamp(1.5rem, 3vw, 2.1rem);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.09),
            rgba(255, 255, 255, 0.045)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.05),
        0 1rem 2.5rem rgba(17, 43, 25, 0.08);
    backdrop-filter: blur(9px);
    transition:
        background-color var(--transition-normal),
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

.impact-card::after {
    position: absolute;
    right: -5rem;
    bottom: -6rem;
    width: 12rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.035);
    content: "";
    pointer-events: none;
    transition: transform var(--transition-slow);
}

.impact-card:hover {
    border-color: rgba(255, 255, 255, 0.28);
    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.13),
            rgba(255, 255, 255, 0.065)
        );
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 1.4rem 3rem rgba(17, 43, 25, 0.15);
    transform: translateY(-6px);
}

.impact-card:hover::after {
    transform: scale(1.12);
}

/* Card header */

.impact-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 3.75rem;
}

.impact-card__number {
    color: rgba(255, 255, 255, 0.17);
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 1;
}

.impact-card__icon {
    display: inline-flex;
    width: 3.6rem;
    height: 3.6rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.09);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.impact-card__icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

/* Card text */

.impact-card__content {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: start;
    margin-top: 0;
    grid-template-rows: auto 1fr;
}

.impact-card__content h3 {
    min-height: 2.4em;
    margin-bottom: 0.75rem;
    color: var(--color-white);
    font-size: clamp(1.3rem, 1.8vw, 1.65rem);
    font-weight: 750;
    letter-spacing: -0.035em;
    line-height: 1.2;
}

.impact-card__content p {
    max-width: 29rem;
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    line-height: 1.72;
}

/* Closing statement */

.home-impact__statement {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vw, 3rem);
    margin-top: clamp(2rem, 5vw, 3.5rem);
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(255, 255, 255, 0.13);
    border-radius: var(--radius-medium);
    background: rgba(255, 255, 255, 0.055);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
}

.home-impact__statement p {
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.72);
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.5;
}

.home-impact__statement strong {
    color: var(--color-white);
}

.home-impact__statement .button {
    flex: 0 0 auto;
    background: var(--color-cream);
    color: var(--color-green-dark);
}

.home-impact__statement .button:hover {
    background: var(--color-white);
    box-shadow: 0 0.8rem 2rem rgba(12, 30, 18, 0.18);
    transform: translateY(-2px);
}

/* ========================================
   Homepage themes strip
======================================== */

.home-themes-strip {
    position: relative;
    background: var(--color-cream);
    border-top: 1px solid var(--color-border);
}

.home-themes-strip__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.home-theme-item {
    display: grid;
    min-width: 0;
    align-items: center;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1rem;
    padding: 1.8rem clamp(1rem, 2vw, 1.6rem);
}

.home-theme-item + .home-theme-item {
    border-left: 1px solid var(--color-border);
}

.home-theme-item__icon {
    display: inline-flex;
    width: 3.3rem;
    height: 3.3rem;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.home-theme-item__icon svg {
    width: 1.45rem;
    height: 1.45rem;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.home-theme-item--green .home-theme-item__icon {
    background: #dcefd4;
    color: var(--color-green);
}

.home-theme-item--yellow .home-theme-item__icon {
    background: #fff0bd;
    color: #c48b00;
}

.home-theme-item--mint .home-theme-item__icon {
    background: #d6eee5;
    color: #287b69;
}

.home-theme-item--peach .home-theme-item__icon {
    background: #f7ddd2;
    color: #b96747;
}

.home-theme-item__content h3 {
    margin-bottom: 0.3rem;
    color: var(--color-green-dark);
    font-family: var(--font-heading);
    font-size: 0.95rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.015em;
}

.home-theme-item__content p {
    margin-bottom: 0;
    color: var(--color-text-muted);
    font-size: 0.86rem;
    line-height: 1.5;
}

/* ========================================
   Homepage introduction
======================================== */

.home-intro {
    position: relative;
    overflow: hidden;
    background: var(--color-cream);
}

.home-intro__grid {
    display: grid;
    align-items: start;
    grid-template-columns:
        minmax(0, 0.85fr)
        minmax(0, 1.15fr);
    gap: clamp(3rem, 8vw, 7rem);
}

.home-intro__heading {
    position: relative;
    max-width: 540px;
    padding-left: 1.35rem;
}

.home-intro__heading::before {
    position: absolute;
    top: 0.15rem;
    bottom: 0.3rem;
    left: 0;
    width: 3px;
    border-radius: var(--radius-pill);
    background: var(--color-green);
    content: "";
}

.home-intro__heading h2 {
    max-width: 520px;
    margin-bottom: 0;
}

.home-intro__content {
    max-width: 670px;
}

.home-intro__lead {
    margin-bottom: 1.2rem;
    color: var(--color-text);
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    font-weight: 700;
    letter-spacing: -0.025em;
    line-height: 1.55;
}

.home-intro__content > p:not(.home-intro__lead) {
    max-width: 630px;
    margin-bottom: 1.75rem;
    color: var(--color-text-muted);
    line-height: 1.8;
}

/* Small mission statement */

.home-intro__statement {
    display: grid;
    margin-block: 2rem 1.6rem;
    padding: 1.35rem 1.5rem;
    border: 1px solid rgba(62, 107, 71, 0.15);
    border-radius: var(--radius-medium);
    background: var(--color-soft-green);
    grid-template-columns: auto minmax(0, 1fr);
    gap: 1.25rem;
}

.home-intro__statement-label {
    padding-right: 1.25rem;
    border-right: 1px solid rgba(62, 107, 71, 0.18);
    color: var(--color-green);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.09em;
    line-height: 1.5;
    text-transform: uppercase;
}

.home-intro__statement p {
    margin: 0;
    color: var(--color-green-dark);
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.65;
}

.home-intro__link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.home-intro__link span {
    transition: transform var(--transition-fast);
}

.home-intro__link:hover span {
    transform: translateX(4px);
}

/* ========================================
   Homepage actualiteit
======================================== */

.home-actualiteit {
    position: relative;
    overflow: hidden;
    background: var(--color-cream);
}

/* Section heading */

.home-actualiteit__header {
    display: grid;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 4rem);
}

.home-actualiteit__header .section-header {
    max-width: 720px;
    margin-bottom: 0;
}

.home-actualiteit__header .lead {
    max-width: 620px;
}

.home-actualiteit__all-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.4rem;
    white-space: nowrap;
}

.home-actualiteit__all-link::after {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.17);
    border-radius: 50%;
    content: "→";
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.home-actualiteit__all-link:hover::after {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateX(3px);
}

/* News and agenda layout */

.home-actualiteit__layout {
    display: grid;
    align-items: stretch;
    grid-template-columns:
        minmax(0, 1.55fr)
        minmax(19rem, 0.65fr);
    gap: clamp(1.25rem, 3vw, 2rem);
}

/* News cards */

.home-actualiteit__news {
    display: grid;
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(1rem, 2vw, 1.5rem);
}

.news-preview-card {
    position: relative;
    display: flex;
    min-width: 0;
    overflow: hidden;
    border: 1px solid rgba(62, 107, 71, 0.13);
    border-radius: var(--radius-large);
    background: var(--color-white);
    box-shadow:
        0 0.7rem 2rem rgba(41, 77, 51, 0.06);
    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

.news-preview-card:hover {
    border-color: rgba(62, 107, 71, 0.3);
    box-shadow:
        0 1.25rem 3rem rgba(41, 77, 51, 0.12);
    transform: translateY(-6px);
}

.news-preview-card__link {
    display: flex;
    width: 100%;
    height: 100%;
    flex-direction: column;
    color: inherit;
    text-decoration: none;
}

/* News-card visual */

.news-preview-card__visual {
    position: relative;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: var(--color-soft-green);
}

.news-preview-card__visual::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            180deg,
            transparent 55%,
            rgba(30, 50, 35, 0.1)
        );
    content: "";
    pointer-events: none;
}

.news-preview-card__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition:
        filter var(--transition-slow),
        transform var(--transition-slow);
}

.news-preview-card:hover .news-preview-card__visual img {
    transform: scale(1.04);
}

/* Temporary image placeholder */

.news-preview-card__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background:
        radial-gradient(
            circle at 18% 18%,
            rgba(255, 255, 255, 0.76),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            var(--color-soft-green),
            var(--color-green-light)
        );
}

.news-preview-card__placeholder::before,
.news-preview-card__placeholder::after {
    position: absolute;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    background: rgba(62, 107, 71, 0.1);
    content: "";
}

.news-preview-card__placeholder::before {
    top: -5rem;
    right: -4rem;
    width: 12rem;
    aspect-ratio: 1;
    transform: rotate(-18deg);
}

.news-preview-card__placeholder::after {
    right: auto;
    bottom: -6rem;
    left: -4rem;
    width: 13rem;
    aspect-ratio: 1;
    transform: rotate(21deg);
}

.news-preview-card__placeholder span {
    position: relative;
    z-index: 1;
    color: var(--color-green);
    font-size: 1.15rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

/* Date badge */

.news-preview-card__date {
    position: absolute;
    right: 1rem;
    bottom: 1rem;
    z-index: 3;
    padding: 0.55rem 0.8rem;
    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.91);
    box-shadow: 0 0.5rem 1.4rem rgba(0, 0, 0, 0.08);
    color: var(--color-green-dark);
    font-size: 0.7rem;
    font-weight: 800;
    backdrop-filter: blur(12px);
}

/* News-card content */

.news-preview-card__content {
    display: grid;
    flex: 1;
    padding: clamp(1.35rem, 2.5vw, 1.8rem);
    grid-template-rows: auto auto 1fr auto;
}

.news-preview-card__content h3 {
    min-height: 2.45em;
    margin-bottom: 0.8rem;
    color: var(--color-text);
    font-size: clamp(1.25rem, 1.7vw, 1.55rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.22;
}

.news-preview-card__content p {
    margin-bottom: 1.5rem;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
}

.news-preview-card__action {
    display: flex;
    min-height: 2.8rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1rem;
    border-top: 1px solid rgba(62, 107, 71, 0.11);
    color: var(--color-green);
    font-size: var(--font-sm);
    font-weight: 800;
}

.news-preview-card__action span {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.15);
    border-radius: 50%;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.news-preview-card:hover .news-preview-card__action span {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateX(3px);
}

/* ========================================
   Agenda preview
======================================== */

.agenda-preview {
    position: relative;
    display: flex;
    min-height: 100%;
    overflow: hidden;
    flex-direction: column;
    padding: clamp(1.6rem, 3vw, 2.3rem);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-large);
    background:
        linear-gradient(
            155deg,
            #477c53,
            var(--color-green)
        );
    box-shadow:
        0 1rem 2.8rem rgba(41, 77, 51, 0.16);
    color: var(--color-white);
}

.agenda-preview::before {
    position: absolute;
    top: -5rem;
    right: -5rem;
    width: 14rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.055);
    content: "";
    pointer-events: none;
}

.agenda-preview::after {
    position: absolute;
    right: -6rem;
    bottom: -7rem;
    width: 16rem;
    aspect-ratio: 1;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    background: rgba(255, 255, 255, 0.055);
    content: "";
    pointer-events: none;
}

.agenda-preview__top,
.agenda-preview__content,
.agenda-preview .button {
    position: relative;
    z-index: 1;
}

/* Agenda heading and date */

.agenda-preview__top {
    margin-bottom: clamp(2rem, 4vw, 3rem);
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.agenda-preview__label {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 1.5rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.agenda-preview__label::before {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-white);
    content: "";
    opacity: 0.75;
}

.agenda-preview__date {
    display: flex;
    align-items: baseline;
    gap: 0.65rem;
}

.agenda-preview__day {
    color: var(--color-white);
    font-size: clamp(3rem, 5vw, 4.5rem);
    font-weight: 800;
    letter-spacing: -0.075em;
    line-height: 0.9;
}

.agenda-preview__month {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
}

/* Agenda text */

.agenda-preview__content {
    margin-bottom: 2rem;
}

.agenda-preview__content h3 {
    margin-bottom: 0.9rem;
    color: var(--color-white);
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.18;
}

.agenda-preview__content p {
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.9rem;
    line-height: 1.7;
}

.agenda-preview__details {
    display: flex;
    flex-wrap: wrap;
    gap: 0.55rem 1rem;
    margin-top: 1.15rem;
    color: rgba(255, 255, 255, 0.68);
    font-size: 0.78rem;
    font-weight: 700;
}

/* Agenda button */

.agenda-preview .button {
    align-self: flex-start;
    margin-top: auto;
    background: var(--color-cream);
    color: var(--color-green-dark);
}

.agenda-preview .button:hover {
    background: var(--color-white);
    box-shadow: 0 0.8rem 2rem rgba(20, 45, 27, 0.18);
    transform: translateY(-2px);
}

/* ========================================
   Homepage partners
======================================== */

.home-partners {
    position: relative;
    overflow: hidden;
    background: var(--color-soft-green);
}

/* Soft decorative shape */

.home-partners::before {
    position: absolute;
    top: -12rem;
    right: -9rem;
    width: 27rem;
    aspect-ratio: 1;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    background: rgba(62, 107, 71, 0.045);
    content: "";
    pointer-events: none;
    transform: rotate(-18deg);
}

.home-partners__header {
    position: relative;
    z-index: 2;
    display: grid;
    align-items: end;
    margin-bottom: clamp(2.5rem, 5vw, 4rem);
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 4rem);
}

.home-partners__header .section-header {
    max-width: 720px;
    margin-bottom: 0;
}

.home-partners__header .section-header p {
    max-width: 620px;
}

/* Header link */

.home-partners__header > .text-link {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    margin-bottom: 0.35rem;
    white-space: nowrap;
}

.home-partners__header > .text-link::after {
    display: inline-flex;
    width: 2rem;
    height: 2rem;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(62, 107, 71, 0.17);
    border-radius: 50%;
    content: "→";
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.home-partners__header > .text-link:hover::after {
    background: var(--color-green);
    color: var(--color-white);
    transform: translateX(3px);
}

/* ========================================
   Moving partner row
======================================== */

.partner-marquee {
    position: relative;
    z-index: 1;
    width: 100%;
    overflow: hidden;
    padding-block: 1.4rem 1.7rem;
    border-top: 1px solid rgba(62, 107, 71, 0.1);
    border-bottom: 1px solid rgba(62, 107, 71, 0.1);
    background: rgba(255, 255, 255, 0.18);
}

/* Fade the cards near the screen edges */

.partner-marquee::before,
.partner-marquee::after {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 3;
    width: clamp(3rem, 10vw, 11rem);
    content: "";
    pointer-events: none;
}

.partner-marquee::before {
    left: 0;
    background:
        linear-gradient(
            90deg,
            var(--color-soft-green) 0%,
            rgba(230, 240, 225, 0.88) 34%,
            transparent 100%
        );
}

.partner-marquee::after {
    right: 0;
    background:
        linear-gradient(
            270deg,
            var(--color-soft-green) 0%,
            rgba(230, 240, 225, 0.88) 34%,
            transparent 100%
        );
}

/* Moving track */

.partner-marquee__track {
    display: flex;
    width: max-content;
    animation: partner-marquee-move 44s linear infinite;
    will-change: transform;
}

.partner-marquee:hover .partner-marquee__track,
.partner-marquee:focus-within .partner-marquee__track {
    animation-play-state: paused;
}

.partner-marquee__group {
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    padding-right: 1rem;
}

/* Individual partner card */

.partner-card {
    position: relative;
    display: flex;
    width: clamp(195px, 17vw, 245px);
    height: 122px;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    padding: 1.5rem;
    border: 1px solid rgba(62, 107, 71, 0.13);
    border-radius: var(--radius-large);
    background: rgba(255, 255, 255, 0.94);
    box-shadow:
        0 0.65rem 1.8rem rgba(41, 77, 51, 0.07),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
    color: var(--color-green-dark);
    text-decoration: none;
    transition:
        border-color var(--transition-normal),
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

/* Small accent line */

.partner-card::before {
    position: absolute;
    top: 0;
    right: 1.4rem;
    left: 1.4rem;
    height: 3px;
    border-radius: 0 0 var(--radius-pill) var(--radius-pill);
    background: var(--color-green-light);
    content: "";
}

/* Subtle organic shape */

.partner-card::after {
    position: absolute;
    right: -3rem;
    bottom: -4rem;
    width: 8rem;
    aspect-ratio: 1;
    border-radius: 50%;
    background: rgba(183, 206, 177, 0.12);
    content: "";
    pointer-events: none;
    transition: transform var(--transition-normal);
}

a.partner-card:hover,
a.partner-card:focus-visible {
    border-color: rgba(62, 107, 71, 0.3);
    box-shadow:
        0 1.1rem 2.7rem rgba(41, 77, 51, 0.13),
        inset 0 1px 0 rgba(255, 255, 255, 0.85);
    transform: translateY(-5px);
}

a.partner-card:hover::after,
a.partner-card:focus-visible::after {
    transform: scale(1.14);
}

a.partner-card:focus-visible {
    outline: 3px solid rgba(62, 107, 71, 0.24);
    outline-offset: 3px;
}

/* Real logos */

.partner-card__logo {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 175px;
    max-height: 68px;
    object-fit: contain;
}

/* Temporary partner names */

.partner-card__placeholder {
    position: relative;
    z-index: 1;
    max-width: 175px;
    color: var(--color-green-dark);
    font-size: 0.88rem;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.35;
    text-align: center;
}

/* Continuous movement */

@keyframes partner-marquee-move {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
    .partner-marquee {
        overflow-x: auto;
    }

    .partner-marquee__track {
        animation: none;
    }

    .partner-marquee__group[aria-hidden="true"] {
        display: none;
    }
}   

/* ========================================
   Homepage final call to action
======================================== */

.home-final-cta {
    overflow: hidden;
    background: var(--color-cream);
}

.home-final-cta__panel {
    position: relative;
    display: grid;
    min-height: 480px;
    overflow: hidden;
    border-radius: var(--radius-extra-large);
    background: var(--color-green);
    box-shadow: var(--shadow-medium);
    grid-template-columns:
        minmax(0, 0.95fr)
        minmax(24rem, 1.05fr);
}

.home-final-cta__panel::before {
    position: absolute;
    bottom: -13rem;
    left: -10rem;
    width: 28rem;
    aspect-ratio: 1;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    background: rgba(255, 255, 255, 0.045);
    content: "";
    pointer-events: none;
    transform: rotate(18deg);
}

.home-final-cta__content {
    position: relative;
    z-index: 2;
    display: flex;
    max-width: 660px;
    justify-content: center;
    flex-direction: column;
    padding: clamp(2.5rem, 6vw, 5rem);
}

.home-final-cta .eyebrow {
    color: rgba(255, 255, 255, 0.68);
}

.home-final-cta__content h2 {
    max-width: 620px;
    margin-bottom: var(--space-md);
    color: var(--color-white);
    font-size: clamp(2rem, 3vw, 3.1rem);
}

.home-final-cta__content > p:not(.home-final-cta__note) {
    max-width: 570px;
    margin-bottom: var(--space-lg);
    color: rgba(255, 255, 255, 0.78);
    font-size: 1rem;
    line-height: 1.75;
}

.home-final-cta__secondary-button {
    border: 1px solid rgba(255, 255, 255, 0.32);
    background: transparent;
    color: var(--color-white);
}

.home-final-cta__secondary-button:hover {
    border-color: var(--color-white);
    background: rgba(255, 255, 255, 0.1);
}

.home-final-cta__note {
    margin-top: var(--space-md);
    margin-bottom: 0;
    color: rgba(255, 255, 255, 0.62);
    font-size: var(--font-sm);
}

/* Visual side */

.home-final-cta__visual {
    position: relative;
    min-height: 480px;
    overflow: hidden;
    background: var(--color-soft-green);
}

.home-final-cta__visual::after {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(
            90deg,
            rgba(62, 107, 71, 0.35),
            transparent 42%
        );
    content: "";
    pointer-events: none;
}

.home-final-cta__visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.home-final-cta__placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-direction: column;
    background:
        radial-gradient(
            circle at 70% 25%,
            rgba(255, 255, 255, 0.68),
            transparent 28%
        ),
        linear-gradient(
            145deg,
            var(--color-soft-green),
            var(--color-green-light)
        );
}

.home-final-cta__placeholder::before,
.home-final-cta__placeholder::after {
    position: absolute;
    border-radius: 44% 56% 61% 39% / 48% 42% 58% 52%;
    background: rgba(62, 107, 71, 0.12);
    content: "";
}

.home-final-cta__placeholder::before {
    top: -8rem;
    right: -5rem;
    width: 22rem;
    aspect-ratio: 1;
    transform: rotate(-15deg);
}

.home-final-cta__placeholder::after {
    bottom: -10rem;
    left: -6rem;
    width: 25rem;
    aspect-ratio: 1;
    transform: rotate(20deg);
}

.home-final-cta__placeholder-small,
.home-final-cta__placeholder-large {
    position: relative;
    z-index: 1;
    color: var(--color-green-dark);
}

.home-final-cta__placeholder-small {
    margin-bottom: 0.4rem;
    font-size: var(--font-sm);
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-final-cta__placeholder-large {
    font-size: clamp(2rem, 4vw, 3.5rem);
    font-weight: 800;
    letter-spacing: -0.05em;
}

.home-final-cta__floating-label {
    position: absolute;
    right: 1.5rem;
    bottom: 1.5rem;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(62, 107, 71, 0.15);
    border-radius: var(--radius-pill);
    background: rgba(255, 255, 255, 0.88);
    box-shadow: var(--shadow-small);
    color: var(--color-green-dark);
    font-size: var(--font-xs);
    font-weight: 800;
    backdrop-filter: blur(12px);
}

.home-final-cta__floating-label span {
    position: relative;
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    background: var(--color-green);
}

.home-final-cta__floating-label span::after {
    position: absolute;
    inset: -0.28rem;
    border: 1px solid var(--color-green);
    border-radius: 50%;
    content: "";
    opacity: 0.3;
}

@media (prefers-reduced-motion: reduce) {
    .initiative-carousel__track,
    .initiative-slide,
    .initiative-slide__image img,
    .initiative-carousel__dot::after {
        transition-duration: 1ms;
    }

    .initiative-slide.is-active:hover .initiative-slide__image img {
        transform: none;
    }
}

/* ========================================
   Homepage final CTA
======================================== */

@media (max-width: 900px) {
    .home-final-cta__panel {
        grid-template-columns: 1fr;
    }

    .home-final-cta__visual {
        min-height: 360px;
        border-bottom: 1px solid rgba(62, 107, 71, 0.12);
        border-left: 0;
        grid-row: 1;
    }

    .home-final-cta__content {
        max-width: 760px;
        grid-row: 2;
    }

    .home-final-cta__visual::after {
        background:
            linear-gradient(
                180deg,
                transparent 56%,
                rgba(62, 107, 71, 0.18)
            );
    }
}

@media (max-width: 600px) {
    .home-final-cta__panel {
        border-radius: var(--radius-large);
    }

    .home-final-cta__visual {
        min-height: 285px;
    }

    .home-final-cta__content {
        padding: 2.25rem 1.4rem;
    }

    .home-final-cta__content h2 {
        font-size: clamp(2rem, 9vw, 2.65rem);
    }

    .home-final-cta .button-group {
        align-items: stretch;
        flex-direction: column;
    }

    .home-final-cta .button {
        width: 100%;
    }

    .home-final-cta__floating-label {
        right: 1rem;
        bottom: 1rem;
        left: 1rem;
        justify-content: center;
    }

    .home-final-cta__placeholder-large {
        font-size: 2.35rem;
    }
}

/* ========================================
   Homepage priority routes
======================================== */

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

.home-priority-card {
    position: relative;
    display: flex;
    min-height: 420px;
    overflow: hidden;
    flex-direction: column;
    padding: clamp(2rem, 4vw, 3rem);
    border-radius: var(--radius-extra-large);
    box-shadow: 0 1.3rem 3.4rem rgba(41, 77, 51, 0.14);
    transition:
        box-shadow var(--transition-normal),
        transform var(--transition-normal);
}

.home-priority-card:hover {
    box-shadow: 0 1.8rem 4.2rem rgba(41, 77, 51, 0.2);
    transform: translateY(-6px);
}

.home-priority-card::after {
    position: absolute;
    right: -6rem;
    bottom: -8rem;
    width: 18rem;
    aspect-ratio: 1;
    border: 1px solid currentColor;
    border-radius: 50%;
    content: "";
    opacity: 0.1;
    pointer-events: none;
}

.home-priority-card--volunteer {
    background: var(--color-green);
    color: var(--color-white);
}

.home-priority-card--support {
    border: 1px solid rgba(62, 107, 71, 0.18);
    background:
        linear-gradient(
            145deg,
            #edf4e9 0%,
            #d8e8d4 100%
        );
    color: var(--color-text);
}

/* Card top */

.home-priority-card__top {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.home-priority-card__number {
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.home-priority-card--volunteer
.home-priority-card__number {
    color: rgba(255, 255, 255, 0.58);
}

.home-priority-card--support
.home-priority-card__number {
    color: var(--color-green);
}

.home-priority-card__icon {
    display: inline-flex;
    width: 3rem;
    height: 3rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.home-priority-card__icon svg {
    width: 1.25rem;
    height: 1.25rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.7;
}

.home-priority-card--volunteer
.home-priority-card__icon {
    border: 1px solid rgba(255, 255, 255, 0.19);
    background: rgba(255, 255, 255, 0.08);
    color: var(--color-white);
}

.home-priority-card--support
.home-priority-card__icon {
    background: var(--color-green);
    color: var(--color-white);
}

/* Content */

.home-priority-card__content {
    position: relative;
    z-index: 1;
}

.home-priority-card__label {
    display: block;
    margin-bottom: 0.75rem;
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-priority-card--volunteer
.home-priority-card__label {
    color: rgba(255, 255, 255, 0.68);
}

.home-priority-card--support
.home-priority-card__label {
    color: var(--color-green);
}

.home-priority-card h3 {
    max-width: 520px;
    margin-bottom: 1.1rem;
    font-size: clamp(2rem, 3.3vw, 3.15rem);
    font-weight: 800;
    letter-spacing: -0.055em;
    line-height: 1.05;
}

.home-priority-card--volunteer h3 {
    color: var(--color-white);
}

.home-priority-card--support h3 {
    color: var(--color-text);
}

.home-priority-card__content p {
    max-width: 540px;
    margin-bottom: 0;
    font-size: 0.96rem;
    line-height: 1.75;
}

.home-priority-card--volunteer
.home-priority-card__content p {
    color: rgba(255, 255, 255, 0.74);
}

.home-priority-card--support
.home-priority-card__content p {
    color: var(--color-text-muted);
}

/* Links */

.home-priority-card__link {
    position: relative;
    z-index: 1;
    display: flex;
    min-height: 3.2rem;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: auto;
    padding-top: 1.35rem;
    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}

.home-priority-card--volunteer
.home-priority-card__link {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--color-white);
}

.home-priority-card--support
.home-priority-card__link {
    border-top: 1px solid rgba(62, 107, 71, 0.14);
    color: var(--color-green-dark);
}

.home-priority-card__arrow {
    display: inline-flex;
    width: 2.3rem;
    height: 2.3rem;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition:
        background-color var(--transition-fast),
        color var(--transition-fast),
        transform var(--transition-fast);
}

.home-priority-card--volunteer
.home-priority-card__arrow {
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.home-priority-card--support
.home-priority-card__arrow {
    border: 1px solid rgba(62, 107, 71, 0.17);
}

.home-priority-card__link:hover
.home-priority-card__arrow {
    transform: translateX(4px);
}

.home-priority-card--volunteer
.home-priority-card__link:hover
.home-priority-card__arrow {
    background: var(--color-white);
    color: var(--color-green);
}

.home-priority-card--support
.home-priority-card__link:hover
.home-priority-card__arrow {
    background: var(--color-green);
    color: var(--color-white);
}

/* Idea strip */

.home-routes__idea-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    padding: 1.5rem 1.75rem;
    border: 1px solid rgba(62, 107, 71, 0.14);
    border-radius: var(--radius-large);
    background: rgba(255, 255, 255, 0.62);
}

.home-routes__idea-content {
    display: grid;
    align-items: center;
    grid-template-columns: 2.5rem minmax(0, 1fr);
    gap: 1.25rem;
}

.home-routes__idea-number {
    color: var(--color-green);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.1em;
}

.home-routes__idea-label {
    color: var(--color-green);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.home-routes__idea-strip h3 {
    margin: 0.25rem 0;
    color: var(--color-text);
    font-size: 1.3rem;
}

.home-routes__idea-strip p {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.home-routes__idea-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 0.7rem;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(62, 107, 71, 0.16);
    border-radius: var(--radius-pill);
    color: var(--color-green-dark);
    font-size: 0.8rem;
    font-weight: 800;
    text-decoration: none;
}

@media (max-width: 900px) {
    .home-routes__priority-grid {
        grid-template-columns: 1fr;
    }

    .home-routes__idea-strip {
        align-items: flex-start;
        flex-direction: column;
    }
}

@media (max-width: 600px) {
    .home-priority-card {
        min-height: 380px;
        padding: 1.75rem 1.4rem;
        border-radius: var(--radius-large);
    }

    .home-priority-card__top {
        margin-bottom: 3.5rem;
    }

    .home-priority-card h3 {
        font-size: 2.25rem;
    }

    .home-routes__idea-strip {
        padding: 1.35rem;
    }

    .home-routes__idea-content {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
}

/* =========================================================
   UNDER CONSTRUCTION NOTICE
========================================================= */

.construction-notice {
    position: relative;
    z-index: 9999;
    width: 100%;
    padding: 12px 24px;
    background: #e6f0e1;
    color: #26382b;
    border-bottom: 1px solid rgba(62, 107, 71, 0.18);
}

.construction-notice__inner {
    width: min(1180px, 100%);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
}

.construction-notice__icon {
    flex-shrink: 0;
    font-size: 1.15rem;
    line-height: 1;
}

.construction-notice p {
    margin: 0;
    font-size: 0.92rem;
    line-height: 1.55;
}

.construction-notice strong {
    color: #3e6b47;
    font-weight: 700;
}

/* Dark mode */
body.dark-mode .construction-notice {
    background: #263c2b;
    color: #edf4ea;
    border-bottom-color: rgba(255, 255, 255, 0.1);
}

body.dark-mode .construction-notice strong {
    color: #c7ddc4;
}

/* Mobile */
@media (max-width: 700px) {
    .construction-notice {
        padding: 11px 18px;
    }

    .construction-notice__inner {
        align-items: flex-start;
        text-align: left;
    }

    .construction-notice p {
        font-size: 0.84rem;
        line-height: 1.5;
    }
}

/* =========================================
   INTRO — SAMEN MAKEN WE NOORD STERKER
========================================= */

.ng-intro {
    position: relative;

    padding: 58px 0 0;

    background: #fafaf8 !important;

    overflow: hidden;
}


/*
Prevents the general section divider from appearing here.
The wave already creates the transition.
*/

.ng-intro::before {
    display: none !important;
    content: none !important;
}


.ng-intro__container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   CENTRAL INTRODUCTION
========================================= */

.ng-intro__heading {
    max-width: 790px;

    margin: 0 auto;
    padding: 10px 0 62px;

    text-align: center;
}


.ng-intro__heading h2 {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin: 0 0 17px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(45px, 5vw, 66px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: #173a28;
}


/* Handwritten underline */

.ng-intro__heading h2::after {
    content: "";

    position: absolute;

    width: 205px;
    height: 4px;

    left: 50%;
    bottom: -7px;

    border-radius: 999px;

    background: #58a269;

    transform:
        translateX(-50%)
        rotate(-1deg);
}


.ng-intro__heading-leaf {
    width: 54px;
    height: 54px;

    flex: 0 0 auto;

    fill: none;
    stroke: #4d9b5e;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform: rotate(5deg);
}


.ng-intro__heading > p {
    max-width: 720px;

    margin: 23px auto 26px;

    color: #435149;

    font-size: 17px;
    line-height: 1.7;
}


/* =========================================
   INTRO BUTTON
========================================= */

.ng-intro__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    min-height: 50px;
    padding: 12px 23px;

    border-radius: 999px;

    background: #438953;
    color: #ffffff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 650;

    box-shadow:
        0 10px 24px rgba(45, 107, 62, 0.18);

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


.ng-intro__button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}


.ng-intro__button:hover {
    color: #ffffff;

    background: #347644;

    transform: translateY(-3px);

    box-shadow:
        0 16px 32px rgba(45, 107, 62, 0.24);
}


.ng-intro__button:hover svg {
    transform: translateX(4px);
}


/* =========================================
   FOUR VALUES
========================================= */

.ng-values {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    border-top: 1px solid rgba(35, 78, 48, 0.08);
    border-bottom: 1px solid rgba(35, 78, 48, 0.08);

    background: rgba(255, 255, 255, 0.5);
}


.ng-value {
    position: relative;

    min-height: 230px;
    padding: 28px 30px 34px;

    text-align: center;
}


/* Vertical separators */

.ng-value:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 28px;
    right: 0;
    bottom: 28px;

    width: 1px;

    background:
        linear-gradient(
            to bottom,
            transparent,
            rgba(38, 86, 51, 0.12),
            transparent
        );
}


.ng-value__icon {
    width: 65px;
    height: 65px;

    margin: 0 auto 4px;

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

    transition: transform 0.3s ease;
}


.ng-value__icon svg {
    width: 57px;
    height: 57px;

    fill: none;
    stroke: #32824b;
    stroke-width: 2.1;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.ng-value h3 {
    margin: 0 0 8px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: 34px;
    font-weight: 400;
    line-height: 1.1;

    color: #173a28;
}


.ng-value p {
    max-width: 230px;

    margin: 0 auto;

    color: #4f5953;

    font-size: 14px;
    line-height: 1.55;
}


.ng-value:hover .ng-value__icon {
    transform:
        translateY(-4px)
        rotate(-2deg);
}


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

@media (max-width: 900px) {

    .ng-values {
        grid-template-columns: repeat(2, 1fr);
    }


    .ng-value:nth-child(2)::after {
        display: none;
    }


    .ng-value:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(35, 78, 48, 0.08);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ng-intro {
        padding-top: 40px;
    }


    .ng-intro__container {
        width: min(100% - 30px, 520px);
    }


    .ng-intro__heading {
        padding-bottom: 45px;
    }


    .ng-intro__heading h2 {
        display: block;

        max-width: 390px;

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

        font-size: 43px;
        line-height: 1.05;
    }


    .ng-intro__heading-leaf {
        position: absolute;

        width: 42px;
        height: 42px;

        right: -3px;
        bottom: -2px;
    }


    .ng-intro__heading h2::after {
        width: 145px;
        bottom: -11px;
    }


    .ng-intro__heading > p {
        margin-top: 29px;

        font-size: 16px;
        line-height: 1.62;
    }


    .ng-values {
        grid-template-columns: 1fr;

        border-radius: 22px 22px 0 0;

        overflow: hidden;
    }


    .ng-value {
        min-height: auto;
        padding: 28px 25px;
    }


    .ng-value:not(:last-child) {
        border-bottom: 1px solid rgba(35, 78, 48, 0.08);
    }


    .ng-value:not(:last-child)::after {
        display: none;
    }


    .ng-value h3 {
        font-size: 32px;
    }

}

/* =========================================
   UPDATED NOORDGROEIT INTRO
========================================= */

section.ng-intro {
    position: relative;

    padding: 18px 0 0;

    background: #f4f1ec !important;

    overflow: visible;
}

section.ng-intro::before {
    display: none !important;
    content: none !important;
}


.ng-intro__container {
    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   HEADING AREA
========================================= */

.ng-intro__heading {
    max-width: 1060px;

    margin: 0 auto;
    padding: 4px 0 38px;

    text-align: center;
}


.ng-intro__heading h2 {
    position: relative;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px;

    width: auto;
    max-width: none;

    margin: 0 0 14px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(44px, 4.4vw, 61px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;

    color: #173a28;

    white-space: nowrap;
}


/* Smaller, neater underline */

.ng-intro__heading h2::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -5px;

    width: 190px;
    height: 3px;

    border-radius: 999px;

    background: #58a269;

    transform:
        translateX(-50%)
        rotate(-1deg);
}


.ng-intro__heading-leaf {
    width: 48px;
    height: 48px;

    flex: 0 0 auto;

    fill: none;
    stroke: #4d9b5e;
    stroke-width: 2.3;
    stroke-linecap: round;
    stroke-linejoin: round;

    transform: rotate(5deg);
}


.ng-intro__heading > p {
    max-width: 850px;

    margin: 20px auto 23px;

    color: #46534b;

    font-size: 17px;
    line-height: 1.65;
}


/* =========================================
   INTRO BUTTON
========================================= */

.ng-intro__button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    min-height: 48px;
    padding: 11px 22px;

    border-radius: 999px;

    background: #3b7d4c;
    color: #ffffff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 650;

    box-shadow:
        0 9px 22px rgba(45, 107, 62, 0.17);

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


.ng-intro__button svg {
    width: 18px;
    height: 18px;

    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;

    transition: transform 0.3s ease;
}


.ng-intro__button:hover {
    color: #ffffff;
    background: #2f6d40;

    transform: translateY(-3px);

    box-shadow:
        0 15px 30px rgba(45, 107, 62, 0.23);
}


.ng-intro__button:hover svg {
    transform: translateX(4px);
}


/* =========================================
   COMPACT VALUES STRIP
========================================= */

.ng-values {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    margin: 0 auto;

    background: #f4f1ec;

    border-top: 1px solid rgba(37, 80, 50, 0.1);
    border-bottom: 1px solid rgba(37, 80, 50, 0.1);
}


/* Compact horizontal blocks */

.ng-value {
    position: relative;
    z-index: 1;

    min-height: 102px;
    padding: 17px 20px;

    display: grid;
    grid-template-columns: 45px minmax(0, 1fr);
    grid-template-areas:
        "icon title"
        "icon text";

    align-items: center;
    column-gap: 14px;

    text-align: left;

    border-radius: 15px;

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


/* Separators between the four items */

.ng-value:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 18px;
    right: 0;
    bottom: 18px;

    width: 1px;

    background: rgba(37, 80, 50, 0.12);
}


/* Hover movement you liked */

.ng-value:hover {
    z-index: 3;

    transform: translateY(-6px);

    background: #fffdf9;

    box-shadow:
        0 13px 30px rgba(32, 72, 44, 0.11);
}


.ng-value:hover::after {
    opacity: 0;
}


/* =========================================
   VALUE ICONS
========================================= */

.ng-value__icon {
    grid-area: icon;

    width: 43px;
    height: 43px;

    margin: 0;

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

    border-radius: 50%;

    background: #e0efdf;

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


/* Subtle different colours like the example strip */

.ng-value:nth-child(1) .ng-value__icon {
    background: #dfeede;
}

.ng-value:nth-child(2) .ng-value__icon {
    background: #fff0c9;
}

.ng-value:nth-child(3) .ng-value__icon {
    background: #dceee9;
}

.ng-value:nth-child(4) .ng-value__icon {
    background: #f6dfd6;
}


.ng-value__icon svg {
    width: 25px;
    height: 25px;

    fill: none;
    stroke: #438b55;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}


.ng-value:hover .ng-value__icon {
    transform:
        translateY(-2px)
        rotate(-3deg)
        scale(1.06);
}


/* =========================================
   VALUE TEXT
========================================= */

.ng-value h3 {
    grid-area: title;

    align-self: end;

    margin: 0 0 1px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.05;

    color: #173a28;

    white-space: nowrap;
}


.ng-value p {
    grid-area: text;

    align-self: start;

    max-width: none;

    margin: 0;

    color: #4f5953;

    font-size: 12.5px;
    line-height: 1.4;
}


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

@media (max-width: 950px) {

    .ng-intro__heading h2 {
        font-size: 47px;
    }


    .ng-values {
        grid-template-columns: repeat(2, 1fr);
    }


    .ng-value:nth-child(2)::after {
        display: none;
    }


    .ng-value:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(37, 80, 50, 0.1);
    }

}


/* Allow the title to wrap once there is truly no room */

@media (max-width: 760px) {

    .ng-intro__heading h2 {
        white-space: normal;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 560px) {

    section.ng-intro {
        padding-top: 12px;
    }


    .ng-intro__container {
        width: min(100% - 28px, 520px);
    }


    .ng-intro__heading {
        padding: 4px 0 31px;
    }


    .ng-intro__heading h2 {
        display: block;

        max-width: 400px;

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

        font-size: 40px;
        line-height: 1.08;
    }


    .ng-intro__heading-leaf {
        position: absolute;

        width: 38px;
        height: 38px;

        right: -2px;
        bottom: -3px;
    }


    .ng-intro__heading > p {
        margin-top: 24px;

        font-size: 15.5px;
        line-height: 1.58;
    }


    .ng-values {
        grid-template-columns: 1fr;

        border-radius: 18px 18px 0 0;
    }


    .ng-value {
        min-height: 94px;

        padding: 16px 18px;

        grid-template-columns: 44px minmax(0, 1fr);
    }


    .ng-value:not(:last-child) {
        border-bottom: 1px solid rgba(37, 80, 50, 0.1);
    }


    .ng-value:not(:last-child)::after {
        display: none;
    }


    .ng-value h3 {
        font-size: 23px;
    }

}

/* =========================================
   INTRO HEADING REFINEMENT
========================================= */

.ng-intro__heading h2 {
    gap: 10px;

    font-size: clamp(38px, 3.8vw, 52px);
    line-height: 1.08;

    white-space: nowrap;
}


.ng-intro__leaf {
    display: inline-block;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 0.72em;
    line-height: 1;

    transform: rotate(-12deg);
}


/* =========================================
   WHITE VALUES STRIP
========================================= */

.ng-values {
    position: relative;

    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));

    width: 100%;
    margin: 0;

    background: #ffffff;

    /*
    Extends the white background beyond the container
    without making the content itself wider.
    */
    box-shadow: 0 0 0 100vmax #ffffff;
    clip-path: inset(0 -100vmax);
}


/* Full-width divider above and below */

.ng-values::before,



.ng-values::before {
    top: 0;
}


.ng-values::after {
    bottom: 0;
}


/* =========================================
   INDIVIDUAL VALUE ITEMS
========================================= */

.ng-value {
    position: relative;

    min-height: 112px;
    padding: 20px 24px;

    display: flex;
    align-items: center;
    gap: 15px;

    text-align: left;

    background: transparent;
    border-radius: 0;
    box-shadow: none;

    transform: none;

    transition: none;
}


/* Remove the card hover completely */

.ng-value:hover {
    background: transparent;
    box-shadow: none;
    transform: none;
}


/* Separators between the four items */

.ng-value:not(:last-child)::after {
    content: "";

    position: absolute;

    top: 22px;
    right: 0;
    bottom: 22px;

    width: 1px;

    background: rgba(35, 78, 48, 0.12);

    opacity: 1;
}


/* =========================================
   EMOJIS
========================================= */

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

    width: 44px;

    flex: 0 0 44px;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 30px;
    line-height: 1;

    transform: translateY(0);

    transition: transform 0.3s ease;
}


/* Only the emoji moves */

.ng-value:hover .ng-value__emoji {
    transform: translateY(-6px);
}


/* =========================================
   TEXT
========================================= */

.ng-value__content {
    min-width: 0;
}


.ng-value h3 {
    margin: 0 0 3px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: 23px;
    font-weight: 400;
    line-height: 1.1;

    color: #173a28;
}


.ng-value p {
    max-width: none;

    margin: 0;

    color: #4f5953;

    font-size: 12.5px;
    line-height: 1.4;
}


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

@media (max-width: 950px) {

    .ng-values {
        grid-template-columns: repeat(2, 1fr);
    }


    .ng-value:nth-child(2)::after {
        display: none;
    }


    .ng-value:nth-child(-n + 2) {
        border-bottom: 1px solid rgba(35, 78, 48, 0.12);
    }

}


/* =========================================
   SMALL TABLET / MOBILE HEADING
========================================= */

@media (max-width: 720px) {

    .ng-intro__heading h2 {
        max-width: 460px;

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

        font-size: 39px;

        white-space: normal;
    }

}


/* =========================================
   MOBILE VALUES
========================================= */

@media (max-width: 560px) {

    .ng-values {
        grid-template-columns: 1fr;
    }


    .ng-value {
        min-height: 94px;
        padding: 17px 10px;

        gap: 14px;
    }


    .ng-value:not(:last-child) {
        border-bottom: 1px solid rgba(35, 78, 48, 0.12);
    }


    .ng-value:not(:last-child)::after {
        display: none;
    }


    .ng-value__emoji {
        width: 42px;
        flex-basis: 42px;

        font-size: 28px;
    }


    .ng-value h3 {
        font-size: 22px;
    }

}

/* =========================================
   MATCH HERO FONT + COLOURED EMOJI CIRCLES
========================================= */

/* Same handwriting as the hero */
.ng-intro__heading h2,
.ng-value h3 {
    font-family: "Kalam", "Segoe Print", cursive;
    font-weight: 400;
    letter-spacing: -0.045em;
}


/* Slightly calmer heading size */
.ng-intro__heading h2 {
    font-size: clamp(36px, 3.5vw, 48px);
    line-height: 1.08;
}


/* Keep value titles neat */
.ng-value h3 {
    font-size: 22px;
    line-height: 1.08;
}


/* Coloured circles around the emojis */
.ng-value__emoji {
    width: 45px;
    height: 45px;
    flex: 0 0 45px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-size: 24px;
    line-height: 1;

    transform: translateY(0);

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


/* Samen */
.ng-value:nth-child(1) .ng-value__emoji {
    background: #e4f1e1;
}


/* Gezond */
.ng-value:nth-child(2) .ng-value__emoji {
    background: #fff0c8;
}


/* Veilig */
.ng-value:nth-child(3) .ng-value__emoji {
    background: #dcefeb;
}


/* Voor iedereen */
.ng-value:nth-child(4) .ng-value__emoji {
    background: #f7e1d8;
}


/* Only the emoji circle moves */
.ng-value:hover .ng-value__emoji {
    transform: translateY(-6px);

    box-shadow:
        0 8px 16px rgba(31, 75, 43, 0.1);
}


/* Extra protection against the old card hover */
.ng-values .ng-value:hover {
    background: transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

.ng-intro__leaf {
    width: 35px;
    height: 35px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e4f1e1;

    font-size: 18px;
    line-height: 1;

    transform: rotate(-10deg);
}

/* =========================================
   WAT WE DOEN & WAAR WE VOOR STAAN
========================================= */

section.ng-purpose {
    position: relative;

    padding: 95px 0 105px;

    background: #e8f2e5 !important;

    border-top: 1px solid rgba(36, 81, 49, 0.09);
    border-bottom: 1px solid rgba(36, 81, 49, 0.09);

    overflow: hidden;
}


section.ng-purpose::before {
    display: none !important;
    content: none !important;
}


.ng-purpose__container {
    width: min(1160px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.ng-purpose__heading {
    max-width: 780px;

    margin: 0 auto 48px;

    text-align: center;
}


.ng-purpose__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 12px;

    color: #3d7e4d;

    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.ng-purpose__eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 999px;

    background: #559564;
}


.ng-purpose__heading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 0 13px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(38px, 4vw, 50px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: #173b28;
}


.ng-purpose__heading h2 span {
    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 0.65em;
    line-height: 1;
}


.ng-purpose__heading p {
    max-width: 650px;

    margin: 0 auto;

    color: #526058;

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================
   TWO CARDS
========================================= */

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

    gap: 22px;
}


.ng-purpose-card {
    position: relative;

    min-height: 375px;
    padding: 32px;

    display: flex;
    flex-direction: column;

    border-radius: 25px;

    text-decoration: none;

    overflow: hidden;

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


/* Subtle decorative shape */

.ng-purpose-card::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: -95px;
    bottom: -105px;

    border-radius: 50%;

    background: currentColor;

    opacity: 0.04;

    pointer-events: none;
}


.ng-purpose-card:hover {
    transform: translateY(-7px);
}


/* =========================================
   DARK CARD
========================================= */

.ng-purpose-card--dark {
    color: #ffffff;

    background: #356c43;

    box-shadow:
        0 18px 42px rgba(35, 78, 48, 0.16);
}


.ng-purpose-card--dark:hover {
    color: #ffffff;

    box-shadow:
        0 25px 55px rgba(35, 78, 48, 0.23);
}


/* =========================================
   LIGHT CARD
========================================= */

.ng-purpose-card--light {
    color: #183a28;

    background: rgba(255, 255, 255, 0.62);

    border: 1px solid rgba(47, 103, 61, 0.12);

    box-shadow:
        0 14px 35px rgba(35, 78, 48, 0.08);
}


.ng-purpose-card--light:hover {
    color: #183a28;

    border-color: rgba(47, 103, 61, 0.24);

    box-shadow:
        0 22px 48px rgba(35, 78, 48, 0.13);
}


/* =========================================
   CARD TOP
========================================= */

.ng-purpose-card__top {
    position: relative;
    z-index: 1;

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

    margin-bottom: 38px;
}


.ng-purpose-card__emoji {
    width: 49px;
    height: 49px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 24px;
    line-height: 1;

    transition: transform 0.35s ease;
}


.ng-purpose-card--dark .ng-purpose-card__emoji {
    background: rgba(255, 255, 255, 0.15);
}


.ng-purpose-card--light .ng-purpose-card__emoji {
    background: #e2efdf;
}


.ng-purpose-card:hover .ng-purpose-card__emoji {
    transform: translateY(-5px) rotate(-4deg);
}


.ng-purpose-card__number {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.08em;

    opacity: 0.55;
}


/* =========================================
   CARD CONTENT
========================================= */

.ng-purpose-card__content {
    position: relative;
    z-index: 1;
}


.ng-purpose-card__label {
    display: block;

    margin-bottom: 10px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.13em;
    text-transform: uppercase;

    opacity: 0.7;
}


.ng-purpose-card h3 {
    max-width: 470px;

    margin: 0 0 14px;

    font-size: clamp(25px, 2.5vw, 34px);
    font-weight: 650;
    line-height: 1.16;
    letter-spacing: -0.035em;

    color: inherit;
}


.ng-purpose-card p {
    max-width: 470px;

    margin: 0;

    color: inherit;

    font-size: 15px;
    line-height: 1.65;

    opacity: 0.82;
}


/* =========================================
   CARD LINK
========================================= */

.ng-purpose-card__link {
    position: relative;
    z-index: 1;

    margin-top: auto;
    padding-top: 28px;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    font-size: 14px;
    font-weight: 700;

    color: inherit;
}


.ng-purpose-card__link span {
    transition: transform 0.3s ease;
}


.ng-purpose-card:hover .ng-purpose-card__link span {
    transform: translateX(5px);
}


/* =========================================
   RESPONSIVE
========================================= */

@media (max-width: 800px) {

    section.ng-purpose {
        padding: 75px 0 82px;
    }


    .ng-purpose__grid {
        grid-template-columns: 1fr;
    }


    .ng-purpose-card {
        min-height: 330px;
    }

}


@media (max-width: 560px) {

    section.ng-purpose {
        padding: 62px 0 68px;
    }


    .ng-purpose__container {
        width: min(100% - 28px, 520px);
    }


    .ng-purpose__heading {
        margin-bottom: 34px;
    }


    .ng-purpose__heading h2 {
        display: block;

        font-size: 38px;
    }


    .ng-purpose__heading h2 span {
        display: inline-block;
        margin-left: 4px;
    }


    .ng-purpose-card {
        min-height: 315px;
        padding: 27px 24px;

        border-radius: 21px;
    }


    .ng-purpose-card__top {
        margin-bottom: 30px;
    }


    .ng-purpose-card h3 {
        font-size: 27px;
    }

}

/* =========================================
   MIJN VERHAAL — CLEAN FINAL VERSION
========================================= */

section.ng-story {
    position: relative;

    padding: 90px 0;

    background: #ffffff !important;

    border-top: 1px solid rgba(35, 78, 48, 0.09);
    border-bottom: 1px solid rgba(35, 78, 48, 0.09);
}


/* Remove the automatic global divider */
section.ng-story::before {
    display: none !important;
    content: none !important;
}


.ng-story__container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   CARD
========================================= */

.ng-story__card {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;

    min-height: 510px;

    overflow: hidden;

    background: #f8f7f2;

    border: 1px solid rgba(32, 74, 45, 0.09);
    border-radius: 30px;

    box-shadow:
        0 20px 55px rgba(28, 63, 39, 0.1);
}


/* =========================================
   LEFT PHOTO
========================================= */

.ng-story__visual {
    position: relative;

    min-width: 0;
    min-height: 510px;

    overflow: hidden;

    background: #dbe6d8;
}


.ng-story__image {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    display: block;

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

    z-index: 0;
}


.ng-story__overlay {
    position: absolute;
    inset: 0;

    z-index: 1;

    background:
        linear-gradient(
            100deg,
            rgba(13, 43, 25, 0.7) 0%,
            rgba(13, 43, 25, 0.42) 31%,
            rgba(13, 43, 25, 0.08) 60%,
            transparent 78%
        );

    pointer-events: none;
}


/* =========================================
   PHOTO QUOTE
========================================= */

.ng-story__photo-quote {
    position: absolute;
    z-index: 2;

    top: 48px;
    left: 42px;

    width: 320px;
    max-width: calc(100% - 70px);
}


.ng-story__photo-quote blockquote {
    margin: 0;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(28px, 2.55vw, 39px);
    font-weight: 400;
    line-height: 1.1;
    letter-spacing: -0.04em;

    color: #ffffff;

    text-shadow:
        0 3px 16px rgba(0, 0, 0, 0.28);
}


/* Small hand-drawn accents */

.ng-story__rays {
    position: absolute;

    width: 34px;
    height: 34px;

    fill: none;
    stroke: #ffffff;
    stroke-width: 3;
    stroke-linecap: round;

    opacity: 0.9;

    pointer-events: none;
}


.ng-story__rays--top {
    top: -27px;
    left: -24px;
}


.ng-story__rays--bottom {
    right: 5px;
    bottom: -31px;

    transform: rotate(165deg);
}


/* =========================================
   SUSAN NAME CARD
========================================= */

.ng-story__name-card {
    position: absolute;
    z-index: 3;

    left: 36px;
    bottom: 31px;

    min-width: 205px;
    padding: 16px 18px;

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

    color: #173b27;

    background: rgba(255, 252, 242, 0.97);

    border: 1px solid rgba(23, 59, 39, 0.07);
    border-radius: 13px;

    box-shadow:
        0 13px 30px rgba(0, 0, 0, 0.17);

    transform: rotate(-2.5deg);
}


.ng-story__name-card strong {
    display: block;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: 28px;
    font-weight: 400;
    line-height: 1;
}


.ng-story__name-card span {
    display: block;

    margin-top: 5px;

    font-size: 13px;
    font-weight: 600;
    line-height: 1.2;
}


.ng-story__heart {
    width: 32px;
    height: 32px;

    flex: 0 0 32px;

    fill: none;
    stroke: #28613c;
    stroke-width: 1.7;
    stroke-linecap: round;
    stroke-linejoin: round;
}


/* =========================================
   RIGHT CONTENT
========================================= */

.ng-story__content {
    position: relative;

    min-width: 0;
    padding: 58px 56px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(75, 137, 88, 0.07),
            transparent 42%
        ),
        #f8f7f2;
}


.ng-story__content h2 {
    position: relative;

    margin: 0 0 43px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(48px, 4.8vw, 64px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.045em;

    color: #173a28;
}


.ng-story__content h2::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -14px;

    width: 155px;
    height: 3px;

    border-radius: 999px;

    background: #4f985f;

    transform:
        translateX(-50%)
        rotate(-2deg);
}


/* =========================================
   TEXT
========================================= */

.ng-story__testimonial {
    max-width: 480px;

    margin: 0 0 25px;

    color: #26362e;

    font-size: clamp(16px, 1.45vw, 19px);
    line-height: 1.72;
}


.ng-story__signature {
    margin: 0 0 31px;

    color: #172d20;

    font-size: 14px;
    font-weight: 700;
    line-height: 1.5;
}


/* =========================================
   BUTTON
========================================= */

.ng-story__button {
    width: min(100%, 315px);
    min-height: 57px;

    padding: 11px 20px 11px 27px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;

    color: #214d30;
    background: transparent;

    border: 1.5px solid rgba(31, 82, 48, 0.72);
    border-radius: 999px;

    text-decoration: none;

    font-size: 15px;
    font-weight: 700;

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


.ng-story__button > span {
    margin: 0;
}


.ng-story__button > span:last-child {
    font-size: 23px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.3s ease;
}


.ng-story__button:hover {
    color: #ffffff;
    background: #397b4b;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(33, 83, 48, 0.18);
}


.ng-story__button:hover > span:last-child {
    transform: translateX(5px);
}


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

@media (max-width: 900px) {

    section.ng-story {
        padding: 75px 0;
    }


    .ng-story__card {
        grid-template-columns: 1fr;
    }


    .ng-story__visual {
        min-height: 520px;
    }


    .ng-story__content {
        padding: 52px 44px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 560px) {

    section.ng-story {
        padding: 58px 0;
    }


    .ng-story__container {
        width: min(100% - 28px, 520px);
    }


    .ng-story__card {
        border-radius: 22px;
    }


    .ng-story__visual {
        min-height: 430px;
    }


    .ng-story__image {
        object-position: 56% center;
    }


    .ng-story__photo-quote {
        top: 30px;
        left: 25px;

        width: 245px;
        max-width: calc(100% - 50px);
    }


    .ng-story__photo-quote blockquote {
        font-size: 28px;
    }


    .ng-story__rays--top {
        display: none;
    }


    .ng-story__rays--bottom {
        right: -3px;
        bottom: -28px;
    }


    .ng-story__name-card {
        left: 20px;
        bottom: 20px;

        min-width: 180px;
        padding: 14px 16px;
    }


    .ng-story__name-card strong {
        font-size: 25px;
    }


    .ng-story__heart {
        width: 27px;
        height: 27px;

        flex-basis: 27px;
    }


    .ng-story__content {
        padding: 42px 27px;
    }


    .ng-story__content h2 {
        margin-bottom: 39px;

        font-size: 46px;
    }


    .ng-story__content h2::after {
        width: 125px;
    }


    .ng-story__testimonial {
        font-size: 16px;
    }


    .ng-story__button {
        width: 100%;
    }

}

/* =========================================
   FINAL STORY QUOTE REFINEMENT
========================================= */

.ng-story__photo-quote {
    top: 50px;
    left: 43px;

    width: 330px;
    max-width: calc(100% - 80px);
}


.ng-story__photo-quote blockquote {
    margin: 0;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(27px, 2.35vw, 37px);
    font-weight: 400;
    line-height: 1.08;
    letter-spacing: -0.04em;

    color: #ffffff;

    text-shadow:
        0 2px 12px rgba(0, 0, 0, 0.3);
}


.ng-story__photo-quote blockquote span {
    display: block;
    white-space: nowrap;
}

.ng-story__rays--bottom {
    left: 245px;
    right: auto;
    bottom: -39px;

    width: 31px;
    height: 31px;

    transform: rotate(155deg);
}

.ng-story__rays--top {
    top: -30px;
    left: -27px;

    width: 32px;
    height: 32px;

    transform: rotate(-5deg);
}

.ng-story__rays {
    fill: none;
    stroke: rgba(255, 255, 255, 0.92);
    stroke-width: 2.4;
    stroke-linecap: round;
}

@media (max-width: 560px) {

    .ng-story__photo-quote {
        top: 29px;
        left: 24px;

        width: 265px;
        max-width: calc(100% - 48px);
    }


    .ng-story__photo-quote blockquote {
        font-size: 27px;
    }


    .ng-story__photo-quote blockquote span {
        white-space: normal;
    }


    .ng-story__rays--bottom {
        left: 205px;
        bottom: -34px;
    }

}

/* =========================================
   ONZE INITIATIEVEN
========================================= */

section.ng-initiatives {
    position: relative;

    padding: 92px 0 86px;

    background: var(--intro-background, #f4f1ec) !important;

    border-top: 1px solid rgba(35, 78, 48, 0.09);
    border-bottom: 1px solid rgba(35, 78, 48, 0.09);

    overflow: hidden;
}


/* Remove automatic global section divider */

section.ng-initiatives::before {
    display: none !important;
    content: none !important;
}


.ng-initiatives__container {
    width: min(1280px, calc(100% - 32px));
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.ng-initiatives__heading {
    max-width: 760px;

    margin: 0 auto 48px;

    text-align: center;
}


.ng-initiatives__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 11px;

    color: #438052;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}


.ng-initiatives__eyebrow::before {
    content: "";

    width: 27px;
    height: 2px;

    border-radius: 999px;

    background: #559565;
}


.ng-initiatives__heading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    margin: 0 0 13px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(42px, 4.3vw, 57px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;

    color: #173a28;
}


.ng-initiatives__heading-emoji {
    width: 37px;
    height: 37px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 37px;

    border-radius: 50%;

    background: #e1eddf;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 19px;
    line-height: 1;
}


.ng-initiatives__heading p {
    max-width: 620px;

    margin: 0 auto 20px;

    color: #526058;

    font-size: 16px;
    line-height: 1.65;
}


.ng-initiatives__all-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #347247;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
}


.ng-initiatives__all-link span {
    transition: transform 0.3s ease;
}


.ng-initiatives__all-link:hover span {
    transform: translateX(5px);
}


/* =========================================
   CAROUSEL
========================================= */

.ng-initiatives__carousel {
    position: relative;

    display: flex;
    align-items: center;
}


.ng-initiatives__viewport {
    width: 100%;

    overflow-x: auto;
    overflow-y: visible;

    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;

    scrollbar-width: none;
}


.ng-initiatives__viewport::-webkit-scrollbar {
    display: none;
}


.ng-initiatives__track {
    display: flex;
    align-items: stretch;
    gap: 26px;

    padding:
        18px
        max(35px, calc((100% - 850px) / 2))
        32px;
}


/* =========================================
   INITIATIVE CARD
========================================= */

.ng-initiative-card {
    flex: 0 0 min(850px, 72vw);

    scroll-snap-align: center;

    opacity: 0.42;

    transform: scale(0.94);

    transition:
        opacity 0.42s ease,
        transform 0.42s ease,
        filter 0.42s ease;

    filter: saturate(0.72);
}


.ng-initiative-card.is-active {
    opacity: 1;

    transform: scale(1);

    filter: saturate(1);
}


.ng-initiative-card > a {
    min-height: 400px;

    display: grid;
    grid-template-columns: 1.12fr 0.88fr;

    overflow: hidden;

    color: #173a28;
    background: #ffffff;

    border: 1px solid rgba(35, 78, 48, 0.09);
    border-radius: 28px;

    text-decoration: none;

    box-shadow:
        0 18px 48px rgba(29, 66, 41, 0.1);

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


.ng-initiative-card.is-active > a:hover {
    transform: translateY(-6px);

    box-shadow:
        0 27px 62px rgba(29, 66, 41, 0.15);
}


/* =========================================
   CARD IMAGE
========================================= */

.ng-initiative-card__media {
    position: relative;

    min-height: 400px;

    overflow: hidden;

    background: #dbe7d9;
}


.ng-initiative-card__media img {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;

    transition: transform 0.65s ease;
}


.ng-initiative-card.is-active > a:hover img {
    transform: scale(1.035);
}


.ng-initiative-card__tag {
    position: absolute;

    top: 22px;
    left: 22px;

    padding: 8px 13px;

    color: #214f31;
    background: rgba(255, 253, 244, 0.94);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.04em;

    box-shadow:
        0 8px 22px rgba(20, 54, 31, 0.12);
}


/* =========================================
   CARD CONTENT
========================================= */

.ng-initiative-card__content {
    padding: 38px 36px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(84, 147, 96, 0.1),
            transparent 42%
        ),
        #ffffff;
}


.ng-initiative-card__top {
    display: flex;
    align-items: center;
    justify-content: space-between;

    margin-bottom: 38px;
}


.ng-initiative-card__number {
    color: #397a4a;

    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
}


.ng-initiative-card__emoji {
    width: 45px;
    height: 45px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 50%;

    background: #e3f0e1;

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 23px;
    line-height: 1;

    transition: transform 0.3s ease;
}


.ng-initiative-card.is-active > a:hover
.ng-initiative-card__emoji {
    transform: translateY(-5px) rotate(-4deg);
}


.ng-initiative-card h3 {
    margin: 0 0 13px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(32px, 3.1vw, 43px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.04em;

    color: #173a28;
}


.ng-initiative-card p {
    max-width: 360px;

    margin: 0 0 29px;

    color: #526058;

    font-size: 15px;
    line-height: 1.65;
}


.ng-initiative-card__link {
    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-top: auto;

    color: #347247;

    font-size: 14px;
    font-weight: 700;
}


.ng-initiative-card__link span {
    transition: transform 0.3s ease;
}


.ng-initiative-card.is-active > a:hover
.ng-initiative-card__link span {
    transform: translateX(5px);
}


/* =========================================
   ARROWS
========================================= */

.ng-initiatives__arrow {
    position: absolute;
    z-index: 5;

    top: 50%;

    width: 49px;
    height: 49px;

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

    padding: 0;

    color: #285f3a;
    background: rgba(255, 255, 255, 0.94);

    border: 1px solid rgba(36, 81, 49, 0.15);
    border-radius: 50%;

    font-size: 21px;

    box-shadow:
        0 12px 30px rgba(31, 72, 43, 0.13);

    cursor: pointer;

    transform: translateY(-50%);

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


.ng-initiatives__arrow:hover {
    color: #ffffff;
    background: #3a7b4b;
}


.ng-initiatives__arrow--prev {
    left: 8px;
}


.ng-initiatives__arrow--prev:hover {
    transform:
        translateY(-50%)
        translateX(-3px);
}


.ng-initiatives__arrow--next {
    right: 8px;
}


.ng-initiatives__arrow--next:hover {
    transform:
        translateY(-50%)
        translateX(3px);
}


/* =========================================
   DOTS
========================================= */

.ng-initiatives__dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;

    margin-top: 8px;
}


.ng-initiatives__dots button {
    width: 8px;
    height: 8px;

    padding: 0;

    border: 0;
    border-radius: 999px;

    background: rgba(47, 101, 61, 0.22);

    cursor: pointer;

    transition:
        width 0.3s ease,
        background-color 0.3s ease;
}


.ng-initiatives__dots button.is-active {
    width: 31px;

    background: #448455;
}


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

@media (max-width: 900px) {

    section.ng-initiatives {
        padding: 76px 0;
    }


    .ng-initiative-card {
        flex-basis: 82vw;
    }


    .ng-initiative-card > a {
        grid-template-columns: 1fr;
    }


    .ng-initiative-card__media {
        min-height: 330px;
    }


    .ng-initiative-card__content {
        min-height: 310px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    section.ng-initiatives {
        padding: 62px 0;
    }


    .ng-initiatives__container {
        width: min(100% - 16px, 520px);
    }


    .ng-initiatives__heading {
        width: calc(100% - 20px);
        margin-bottom: 35px;
    }


    .ng-initiatives__heading h2 {
        font-size: 41px;
    }


    .ng-initiatives__track {
        gap: 15px;

        padding:
            12px
            16px
            27px;
    }


    .ng-initiative-card {
        flex-basis: calc(100vw - 48px);

        opacity: 0.55;

        transform: scale(0.97);
    }


    .ng-initiative-card > a {
        min-height: auto;

        border-radius: 23px;
    }


    .ng-initiative-card__media {
        min-height: 260px;
    }


    .ng-initiative-card__content {
        min-height: 285px;
        padding: 30px 25px;
    }


    .ng-initiative-card__top {
        margin-bottom: 25px;
    }


    .ng-initiative-card h3 {
        font-size: 35px;
    }


    .ng-initiatives__arrow {
        display: none;
    }

}

/* =========================================
   WORD OOK VRIJWILLIGER
========================================= */

section.ng-volunteer-cta {
    position: relative;

    padding: 68px 0;

    background: #ffffff !important;

    border-top: 1px solid rgba(35, 78, 48, 0.09);
    border-bottom: 1px solid rgba(35, 78, 48, 0.09);
}


/* Remove the automatic global section stripe */
section.ng-volunteer-cta::before {
    display: none !important;
    content: none !important;
}


.ng-volunteer-cta__container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   MAIN BANNER
========================================= */

.ng-volunteer-cta__card {
    position: relative;

    min-height: 265px;

    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    align-items: center;

    overflow: hidden;

    border: 1px solid rgba(41, 88, 54, 0.09);
    border-radius: 28px;

    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(255, 255, 255, 0.55),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #edf5eb 0%,
            #e4f0e1 55%,
            #dbead8 100%
        );

    box-shadow:
        0 16px 42px rgba(31, 71, 43, 0.08);
}


/* Soft decorative glow */

.ng-volunteer-cta__card::before {
    content: "";

    position: absolute;

    width: 280px;
    height: 280px;

    left: -120px;
    bottom: -180px;

    border-radius: 50%;

    background: rgba(92, 151, 103, 0.08);

    pointer-events: none;
}


/* =========================================
   CONTENT
========================================= */

.ng-volunteer-cta__content {
    position: relative;
    z-index: 2;

    padding: 44px 30px 44px 62px;
}


.ng-volunteer-cta__content h2 {
    display: flex;
    align-items: center;
    gap: 13px;

    margin: 0 0 7px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(40px, 4vw, 54px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.045em;

    color: #173a28;
}


.ng-volunteer-cta__content h2 span {
    font-family: Arial, sans-serif;
    font-size: 0.8em;
    font-weight: 300;
    line-height: 1;

    color: #28613c;

    transform: rotate(-7deg);
}


.ng-volunteer-cta__content p {
    max-width: 650px;

    margin: 0 0 25px;

    color: #46544c;

    font-size: 16px;
    line-height: 1.6;
}


/* =========================================
   BUTTONS
========================================= */

.ng-volunteer-cta__buttons {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


.ng-volunteer-cta__button {
    min-height: 49px;
    padding: 11px 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

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


.ng-volunteer-cta__button--primary {
    color: #ffffff;
    background: #3d814e;

    border: 1px solid #3d814e;

    box-shadow:
        0 9px 22px rgba(40, 101, 58, 0.18);
}


.ng-volunteer-cta__button--primary:hover {
    color: #ffffff;
    background: #306f41;
    border-color: #306f41;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(40, 101, 58, 0.24);
}


.ng-volunteer-cta__button--primary span {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.3s ease;
}


.ng-volunteer-cta__button--primary:hover span {
    transform: translateX(4px);
}


.ng-volunteer-cta__button--secondary {
    color: #224d31;
    background: rgba(255, 255, 255, 0.28);

    border: 1.5px solid rgba(34, 77, 49, 0.54);
}


.ng-volunteer-cta__button--secondary:hover {
    color: #ffffff;
    background: #397a4a;
    border-color: #397a4a;

    transform: translateY(-3px);
}


/* =========================================
   ILLUSTRATION
========================================= */

.ng-volunteer-cta__visual {
    position: relative;
    z-index: 1;

    height: 100%;
    min-height: 265px;

    display: flex;
    align-items: flex-end;
    justify-content: center;

    padding: 12px 38px 0 10px;
}


.ng-volunteer-cta__visual img {
    width: min(100%, 350px);
    max-height: 250px;

    display: block;

    object-fit: contain;
    object-position: center bottom;

    filter:
        drop-shadow(
            0 8px 14px
            rgba(37, 91, 52, 0.06)
        );

    transition: transform 0.4s ease;
}


.ng-volunteer-cta__card:hover
.ng-volunteer-cta__visual img {
    transform: translateY(-5px);
}


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

@media (max-width: 900px) {

    .ng-volunteer-cta__card {
        grid-template-columns: minmax(0, 1fr) 290px;
    }


    .ng-volunteer-cta__content {
        padding-left: 42px;
    }


    .ng-volunteer-cta__visual {
        padding-right: 20px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 700px) {

    section.ng-volunteer-cta {
        padding: 56px 0;
    }


    .ng-volunteer-cta__container {
        width: min(100% - 28px, 520px);
    }


    .ng-volunteer-cta__card {
        grid-template-columns: 1fr;

        text-align: center;

        border-radius: 23px;
    }


    .ng-volunteer-cta__content {
        padding: 38px 25px 18px;
    }


    .ng-volunteer-cta__content h2 {
        justify-content: center;

        font-size: 41px;
    }


    .ng-volunteer-cta__content p {
        margin-left: auto;
        margin-right: auto;

        font-size: 15.5px;
    }


    .ng-volunteer-cta__buttons {
        justify-content: center;
    }


    .ng-volunteer-cta__visual {
        min-height: 210px;

        padding: 0 25px;
    }


    .ng-volunteer-cta__visual img {
        width: min(100%, 310px);
        max-height: 210px;
    }

}


/* =========================================
   SMALL MOBILE
========================================= */

@media (max-width: 430px) {

    .ng-volunteer-cta__buttons {
        flex-direction: column;
    }


    .ng-volunteer-cta__button {
        width: 100%;
    }


    .ng-volunteer-cta__content h2 {
        display: block;
    }


    .ng-volunteer-cta__content h2 span {
        display: inline-block;

        margin-left: 5px;
    }

}

/* =========================================
   AGENDA + LOCATIE
========================================= */

section.ng-practical {
    position: relative;
    padding: 70px 0 82px;
    background: #ffffff !important;
    border-top: 1px solid rgba(35, 78, 48, 0.09);
    border-bottom: 1px solid rgba(35, 78, 48, 0.09);
}

section.ng-practical::before {
    display: none !important;
    content: none !important;
}

.ng-practical__container {
    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 18px;
}

/* =========================================
   GENERIC CARD
========================================= */

.ng-practical-card {
    background: #ffffff;
    border: 1px solid rgba(35, 78, 48, 0.08);
    border-radius: 24px;
    box-shadow: 0 12px 34px rgba(31, 67, 41, 0.06);
    overflow: hidden;
}

.ng-practical-card__header {
    padding: 24px 28px 18px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.ng-practical-card__header h2 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(30px, 2.7vw, 40px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -0.04em;

    color: #173a28;
}

.ng-practical-card__header h2 span {
    font-size: 0.72em;
    line-height: 1;
}

.ng-practical-card__link {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    color: #3b7d4c;
    text-decoration: none;

    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.ng-practical-card__link span {
    transition: transform 0.3s ease;
}

.ng-practical-card__link:hover span {
    transform: translateX(4px);
}

/* =========================================
   AGENDA
========================================= */

.ng-agenda-list {
    padding: 0 18px 18px;
}

.ng-agenda-item {
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 16px;
    align-items: center;

    padding: 14px 10px;
    border-top: 1px solid rgba(35, 78, 48, 0.08);

    text-decoration: none;
    color: inherit;

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

.ng-agenda-item:first-child {
    border-top: 0;
}

.ng-agenda-item:hover {
    background: rgba(238, 246, 236, 0.7);
    transform: translateX(3px);
    border-radius: 16px;
}

.ng-agenda-item__date {
    width: 62px;
    min-height: 62px;
    padding: 8px 6px;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    background: #e8f2e5;
    border-radius: 14px;

    color: #2f6f41;
    text-align: center;
}

.ng-agenda-item__date strong {
    display: block;
    font-size: 24px;
    font-weight: 800;
    line-height: 1;
}

.ng-agenda-item__date span {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.05em;
}

.ng-agenda-item__content h3 {
    margin: 0 0 4px;
    font-size: 22px;
    font-weight: 700;
    line-height: 1.2;
    color: #173a28;
}

.ng-agenda-item__content p {
    margin: 0;
    font-size: 15px;
    line-height: 1.45;
    color: #5a645e;
}

/* =========================================
   LOCATIE
========================================= */

.ng-practical-card__header--location {
    padding-bottom: 10px;
}

.ng-location-card__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 18px;
    align-items: center;

    padding: 0 22px 22px;
}

.ng-location-card__content {
    padding-left: 6px;
}

.ng-location-card__text {
    margin: 0 0 18px;
    color: #4d5a53;
    font-size: 16px;
    line-height: 1.7;
}

.ng-location-card__button {
    min-height: 48px;
    padding: 11px 20px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    border-radius: 999px;
    border: 1px solid #3d814e;
    background: #3d814e;
    color: #ffffff;

    text-decoration: none;
    font-size: 14px;
    font-weight: 700;

    box-shadow: 0 9px 22px rgba(40, 101, 58, 0.18);

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

.ng-location-card__button:hover {
    background: #2f6f41;
    border-color: #2f6f41;
    transform: translateY(-3px);
    box-shadow: 0 14px 30px rgba(40, 101, 58, 0.22);
}

.ng-location-card__button span {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;
    transition: transform 0.3s ease;
}

.ng-location-card__button:hover span {
    transform: translateX(4px);
}

.ng-location-card__map {
    border-radius: 18px;
    overflow: hidden;
    background: #edf3ec;
}

.ng-location-card__map img {
    width: 100%;
    height: 180px;
    display: block;
    object-fit: cover;
}

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

@media (max-width: 900px) {

    .ng-practical__container {
        grid-template-columns: 1fr;
    }

    .ng-location-card__body {
        grid-template-columns: 1fr 220px;
    }
}

/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    section.ng-practical {
        padding: 56px 0 62px;
    }

    .ng-practical__container {
        width: min(100% - 28px, 520px);
        gap: 16px;
    }

    .ng-practical-card__header {
        padding: 20px 20px 14px;
        align-items: flex-start;
        flex-direction: column;
    }

    .ng-practical-card__header h2 {
        font-size: 32px;
    }

    .ng-practical-card__link {
        font-size: 13px;
    }

    .ng-agenda-list {
        padding: 0 14px 14px;
    }

    .ng-agenda-item {
        grid-template-columns: 64px minmax(0, 1fr);
        gap: 12px;
        padding: 13px 8px;
    }

    .ng-agenda-item__date {
        width: 56px;
        min-height: 56px;
    }

    .ng-agenda-item__date strong {
        font-size: 21px;
    }

    .ng-agenda-item__content h3 {
        font-size: 18px;
    }

    .ng-agenda-item__content p {
        font-size: 14px;
    }

    .ng-location-card__body {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 0 18px 18px;
    }

    .ng-location-card__content {
        padding-left: 0;
    }

    .ng-location-card__button {
        width: 100%;
    }

    .ng-location-card__map img {
        height: 165px;
    }
}

.ng-location-card__map {
    position: relative;

    min-height: 180px;

    border-radius: 18px;
    overflow: hidden;

    background: #edf3ec;
}


.ng-location-card__map iframe {
    width: 100%;
    height: 180px;

    display: block;

    border: 0;
}


/* NoordgroeiT label */

.ng-location-card__marker {
    position: absolute;
    z-index: 2;

    left: 55%;
    top: 43%;

    padding: 8px 13px;

    color: #214d30;
    background: rgba(255, 253, 246, 0.97);

    border: 1px solid rgba(34, 78, 48, 0.15);
    border-radius: 999px;

    font-size: 12px;
    font-weight: 750;
    line-height: 1;

    box-shadow:
        0 8px 22px rgba(24, 61, 35, 0.18);

    transform: translate(-50%, -100%);

    pointer-events: none;
}


/* Arrow beneath label */

.ng-location-card__marker::after {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -9px;

    width: 17px;
    height: 17px;

    background: rgba(255, 253, 246, 0.97);

    border-right: 1px solid rgba(34, 78, 48, 0.15);
    border-bottom: 1px solid rgba(34, 78, 48, 0.15);

    transform:
        translateX(-50%)
        rotate(45deg);
}


/* Small green dot indicating the location */

.ng-location-card__marker::before {
    content: "";

    position: absolute;

    left: 50%;
    bottom: -21px;

    width: 9px;
    height: 9px;

    border: 3px solid #ffffff;
    border-radius: 50%;

    background: #397d4a;

    box-shadow:
        0 3px 9px rgba(24, 61, 35, 0.3);

    transform: translateX(-50%);
}

/* =========================================
   AGENDA + LOCATIE — FINAL REFINEMENT
========================================= */

section.ng-practical {
    position: relative;

    padding: 92px 0;

    background: #356c43 !important;

    border-top: 0;
    border-bottom: 0;

    overflow: hidden;
}


/* Remove automatic divider */
section.ng-practical::before {
    display: none !important;
    content: none !important;
}


/* Soft background shapes */
section.ng-practical::after {
    content: "";

    position: absolute;

    width: 360px;
    height: 360px;

    right: -150px;
    top: -180px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);

    pointer-events: none;
}


.ng-practical__container {
    position: relative;
    z-index: 2;

    width: min(1240px, calc(100% - 48px));
    margin: 0 auto;

    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: 24px;
}


/* =========================================
   BOTH CARDS
========================================= */

.ng-practical-card {
    min-height: 420px;

    background: #fbfaf5;

    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 27px;

    box-shadow:
        0 22px 55px rgba(15, 45, 26, 0.2);

    overflow: hidden;
}


.ng-practical-card__header {
    padding: 29px 31px 18px;
}


.ng-practical-card__header h2 {
    font-size: clamp(35px, 3.2vw, 45px);
}


/* =========================================
   AGENDA
========================================= */

.ng-agenda-list {
    padding: 0 20px 22px;
}


.ng-agenda-item {
    grid-template-columns: 76px minmax(0, 1fr);

    gap: 18px;

    padding: 16px 10px;
}


.ng-agenda-item__date {
    width: 66px;
    min-height: 66px;

    border-radius: 15px;
}


.ng-agenda-item__date strong {
    font-size: 25px;
}


.ng-agenda-item__content h3 {
    font-size: 21px;
}


.ng-agenda-item__content p {
    font-size: 15px;
}


/* =========================================
   LOCATION CARD
========================================= */

.ng-practical-card--location {
    display: flex;
    flex-direction: column;
}


.ng-practical-card__header--location {
    padding-bottom: 15px;
}


.ng-location-card__body {
    flex: 1;

    display: grid;
    grid-template-columns:
        minmax(175px, 0.72fr)
        minmax(285px, 1.28fr);

    gap: 24px;
    align-items: stretch;

    padding: 0 24px 24px;
}


.ng-location-card__content {
    padding: 10px 0 10px 6px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.ng-location-card__text {
    margin: 0 0 24px;

    font-size: 16px;
    line-height: 1.7;
}


/* Prevent button text from breaking awkwardly */

.ng-location-card__button {
    width: max-content;
    max-width: 100%;

    min-height: 51px;

    padding: 12px 20px;

    white-space: nowrap;
}


/* =========================================
   BIGGER GOOGLE MAP
========================================= */

.ng-location-card__map {
    position: relative;

    min-height: 270px;

    border: 1px solid rgba(36, 80, 49, 0.1);
    border-radius: 20px;

    overflow: hidden;

    background: #e6efe4;
}


.ng-location-card__map iframe {
    width: 100%;
    height: 100%;
    min-height: 270px;

    display: block;

    border: 0;
}


/* Slightly neater custom marker */

.ng-location-card__marker {
    left: 57%;
    top: 45%;

    padding: 8px 14px;

    font-size: 12px;

    box-shadow:
        0 9px 24px rgba(24, 61, 35, 0.2);
}


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

@media (max-width: 1000px) {

    .ng-practical__container {
        grid-template-columns: 1fr;
    }


    .ng-practical-card {
        min-height: auto;
    }


    .ng-location-card__body {
        grid-template-columns:
            minmax(190px, 0.65fr)
            minmax(330px, 1.35fr);
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    section.ng-practical {
        padding: 62px 0;
    }


    .ng-practical__container {
        width: min(100% - 28px, 520px);
        gap: 18px;
    }


    .ng-practical-card {
        border-radius: 23px;
    }


    .ng-practical-card__header {
        padding: 23px 21px 15px;
    }


    .ng-location-card__body {
        grid-template-columns: 1fr;

        padding: 0 18px 18px;
    }


    .ng-location-card__content {
        padding: 0;
    }


    .ng-location-card__button {
        width: 100%;

        white-space: normal;

        text-align: center;
    }


    .ng-location-card__map,
    .ng-location-card__map iframe {
        min-height: 235px;
    }


    .ng-location-card__marker {
        left: 56%;
        top: 45%;
    }

}

/* =========================================
   PRACTICAL SECTION — CLEAN REFINEMENT
========================================= */

section.ng-practical {
    padding: 88px 0;

    background: #e6efe3 !important;

    border-top: 1px solid rgba(36, 79, 49, 0.08);
    border-bottom: 1px solid rgba(36, 79, 49, 0.08);

    overflow: hidden;
}


/* Remove the dark decorative circle */
section.ng-practical::after {
    display: none !important;
    content: none !important;
}


.ng-practical__container {
    width: min(1240px, calc(100% - 48px));

    grid-template-columns: 1.08fr 0.92fr;
    gap: 22px;
}


/* =========================================
   BOTH CARDS
========================================= */

.ng-practical-card {
    min-height: 420px;

    background: #fbfaf6;

    border: 1px solid rgba(36, 79, 49, 0.1);
    border-radius: 27px;

    box-shadow:
        0 15px 40px rgba(31, 71, 43, 0.09);
}


.ng-practical-card__header {
    padding: 28px 30px 17px;
}


.ng-practical-card__header h2 {
    font-size: clamp(34px, 3vw, 43px);
}


/* =========================================
   LOCATION LAYOUT
========================================= */

.ng-practical-card--location {
    display: flex;
    flex-direction: column;
}


.ng-location-card__body {
    flex: 1;

    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 20px;

    align-items: stretch;

    padding: 0 22px 22px;
}


.ng-location-card__content {
    padding: 14px 0 12px 4px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
}


.ng-location-card__text {
    margin: 0 0 22px;

    color: #46544c;

    font-size: 15px;
    line-height: 1.7;
}


/* =========================================
   SMALLER, CLEAN BUTTON
========================================= */

.ng-location-card__button {
    width: 100%;
    max-width: 150px;
    min-height: 48px;

    padding: 10px 15px;

    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;

    white-space: nowrap;

    font-size: 13px;
}


.ng-location-card__button span {
    flex: 0 0 auto;
}


/* =========================================
   LARGER MAP
========================================= */

.ng-location-card__map {
    position: relative;

    min-height: 275px;

    border: 1px solid rgba(36, 79, 49, 0.11);
    border-radius: 19px;

    overflow: hidden;

    background: #dfeadc;
}


.ng-location-card__map iframe {
    width: 100%;
    height: 100%;
    min-height: 275px;

    display: block;

    border: 0;
}


/* Remove any remaining custom marker */
.ng-location-card__marker {
    display: none !important;
}


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

@media (max-width: 1000px) {

    .ng-practical__container {
        grid-template-columns: 1fr;
    }


    .ng-practical-card {
        min-height: auto;
    }


    .ng-location-card__body {
        grid-template-columns: 180px minmax(0, 1fr);
    }


    .ng-location-card__button {
        max-width: 165px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 650px) {

    section.ng-practical {
        padding: 62px 0;
    }


    .ng-practical__container {
        width: min(100% - 28px, 520px);
    }


    .ng-location-card__body {
        grid-template-columns: 1fr;

        padding: 0 18px 18px;
    }


    .ng-location-card__content {
        padding: 0;
    }


    .ng-location-card__button {
        width: auto;
        max-width: none;

        padding-left: 20px;
        padding-right: 20px;
    }


    .ng-location-card__map,
    .ng-location-card__map iframe {
        min-height: 235px;
    }

}

/* =========================================
   ONZE PARTNERS
========================================= */

section.ng-partners {
    position: relative;

    padding: 88px 0 92px;

    background: #e6efe3 !important;

    border-top: 1px solid rgba(35, 78, 48, 0.08);
    border-bottom: 1px solid rgba(35, 78, 48, 0.08);

    overflow: hidden;
}


section.ng-partners::before {
    display: none !important;
    content: none !important;
}


/* Subtle organic background shape */

section.ng-partners::after {
    content: "";

    position: absolute;

    top: -210px;
    right: -150px;

    width: 430px;
    height: 430px;

    border-radius: 46% 54% 64% 36% / 46% 42% 58% 54%;

    background: rgba(67, 124, 80, 0.045);

    transform: rotate(-15deg);

    pointer-events: none;
}


.ng-partners__container {
    position: relative;
    z-index: 2;

    width: min(1180px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   HEADING
========================================= */

.ng-partners__heading {
    max-width: 720px;

    margin: 0 auto 47px;

    text-align: center;
}


.ng-partners__heading h2 {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    margin: 0 0 11px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(40px, 4vw, 53px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.045em;

    color: #173a28;
}


.ng-partners__emoji {
    width: 38px;
    height: 38px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 38px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.62);

    font-family:
        "Apple Color Emoji",
        "Segoe UI Emoji",
        "Noto Color Emoji",
        sans-serif;

    font-size: 19px;
    line-height: 1;
}


.ng-partners__heading p {
    max-width: 640px;

    margin: 0 auto;

    color: #526058;

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================
   MOVING LOGO STRIP
========================================= */

.ng-partners-marquee {
    position: relative;
    z-index: 2;

    width: 100%;

    padding: 18px 0 25px;

    overflow: hidden;

    border-top: 1px solid rgba(44, 94, 57, 0.09);
    border-bottom: 1px solid rgba(44, 94, 57, 0.09);

    background: rgba(255, 255, 255, 0.19);
}


/* Soft fade at the left and right edges */

.ng-partners-marquee::before,
.ng-partners-marquee::after {
    content: "";

    position: absolute;
    z-index: 5;

    top: 0;
    bottom: 0;

    width: clamp(55px, 10vw, 170px);

    pointer-events: none;
}


.ng-partners-marquee::before {
    left: 0;

    background:
        linear-gradient(
            90deg,
            #e6efe3 0%,
            rgba(230, 239, 227, 0.92) 34%,
            rgba(230, 239, 227, 0) 100%
        );
}


.ng-partners-marquee::after {
    right: 0;

    background:
        linear-gradient(
            270deg,
            #e6efe3 0%,
            rgba(230, 239, 227, 0.92) 34%,
            rgba(230, 239, 227, 0) 100%
        );
}


/* Continuous moving track */

.ng-partners-marquee__track {
    display: flex;

    width: max-content;

    animation:
        ngPartnersMove
        42s
        linear
        infinite;

    will-change: transform;
}


/* Pause the row while someone inspects a logo */

.ng-partners-marquee:hover
.ng-partners-marquee__track,
.ng-partners-marquee:focus-within
.ng-partners-marquee__track {
    animation-play-state: paused;
}


.ng-partners-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    gap: 17px;

    padding-right: 17px;
}


/* =========================================
   LOGO CARDS
========================================= */

.ng-partner-card {
    position: relative;

    width: clamp(190px, 16vw, 235px);
    height: 122px;

    flex: 0 0 auto;

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

    padding: 22px;

    overflow: hidden;

    color: inherit;
    background: rgba(255, 255, 255, 0.88);

    border: 1px solid rgba(40, 89, 53, 0.11);
    border-radius: 20px;

    text-decoration: none;

    box-shadow:
        0 10px 27px rgba(31, 70, 42, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.82);

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


/* Small green accent at top */

.ng-partner-card::before {
    content: "";

    position: absolute;

    top: 0;
    right: 23px;
    left: 23px;

    height: 3px;

    border-radius: 0 0 999px 999px;

    background: #8bb894;

    opacity: 0.62;
}


/* Soft organic detail */

.ng-partner-card::after {
    content: "";

    position: absolute;

    right: -48px;
    bottom: -65px;

    width: 125px;
    height: 125px;

    border-radius: 50%;

    background: rgba(88, 145, 99, 0.07);

    transition: transform 0.3s ease;

    pointer-events: none;
}


.ng-partner-card img {
    position: relative;
    z-index: 2;

    width: auto;
    height: auto;

    max-width: 165px;
    max-height: 68px;

    display: block;

    object-fit: contain;

    filter: grayscale(100%);
    opacity: 0.7;

    transition:
        filter 0.3s ease,
        opacity 0.3s ease,
        transform 0.3s ease;
}


a.ng-partner-card:hover,
a.ng-partner-card:focus-visible {
    transform: translateY(-6px);

    background: #ffffff;

    border-color: rgba(43, 98, 57, 0.24);

    box-shadow:
        0 17px 38px rgba(31, 70, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.88);
}


a.ng-partner-card:hover::after,
a.ng-partner-card:focus-visible::after {
    transform: scale(1.15);
}


a.ng-partner-card:hover img,
a.ng-partner-card:focus-visible img {
    filter: grayscale(0%);
    opacity: 1;

    transform: scale(1.045);
}


a.ng-partner-card:focus-visible {
    outline: 3px solid rgba(61, 126, 77, 0.28);
    outline-offset: 3px;
}


/* =========================================
   SEAMLESS MOVEMENT
========================================= */

@keyframes ngPartnersMove {

    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }

}


/* =========================================
   BOTTOM LINK
========================================= */

.ng-partners__footer {
    margin-top: 34px;
    padding: 22px 25px;

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

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

    border: 1px solid rgba(35, 78, 48, 0.08);
    border-radius: 20px;
}


.ng-partners__footer p {
    max-width: 620px;

    margin: 0;

    color: #46544c;

    font-size: 15px;
    line-height: 1.6;
}


.ng-partners__button {
    min-height: 49px;
    padding: 11px 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    flex: 0 0 auto;

    color: #ffffff;
    background: #3c7e4d;

    border: 1px solid #3c7e4d;
    border-radius: 999px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

    box-shadow:
        0 9px 22px rgba(40, 101, 58, 0.16);

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


.ng-partners__button span {
    font-size: 20px;
    line-height: 1;

    transition: transform 0.3s ease;
}


.ng-partners__button:hover {
    color: #ffffff;
    background: #306f41;

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(40, 101, 58, 0.22);
}


.ng-partners__button:hover span {
    transform: translateX(4px);
}


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

@media (max-width: 700px) {

    section.ng-partners {
        padding: 68px 0 72px;
    }


    .ng-partners__container {
        width: min(100% - 28px, 520px);
    }


    .ng-partners__heading {
        margin-bottom: 35px;
    }


    .ng-partners__heading h2 {
        font-size: 40px;
    }


    .ng-partners-marquee {
        padding: 14px 0 20px;
    }


    .ng-partners-marquee::before,
    .ng-partners-marquee::after {
        width: 48px;
    }


    .ng-partners-marquee__track {
        animation-duration: 32s;
    }


    .ng-partner-card {
        width: 180px;
        height: 108px;

        padding: 18px;

        border-radius: 17px;
    }


    .ng-partner-card img {
        max-width: 140px;
        max-height: 58px;
    }


    .ng-partners__footer {
        flex-direction: column;
        align-items: flex-start;

        padding: 20px;
    }


    .ng-partners__button {
        width: 100%;

        text-align: center;
    }

}


/* Let people who disable animation scroll manually */

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

    .ng-partners-marquee {
        overflow-x: auto;
    }


    .ng-partners-marquee__track {
        animation: none;
    }


    .ng-partners-marquee__group[aria-hidden="true"] {
        display: none;
    }

}

/* =========================================
   PARTNERS — NOORDGROEIT GREEN BACKGROUND
========================================= */

section.ng-partners {
    background: #356c43 !important;

    border-top: 0;
    border-bottom: 0;
}


/* Soft decorative circle */

section.ng-partners::after {
    background: rgba(255, 255, 255, 0.045);
}


/* =========================================
   HEADING
========================================= */

.ng-partners__heading h2 {
    color: #ffffff;
}


.ng-partners__heading p {
    color: rgba(255, 255, 255, 0.78);
}


.ng-partners__emoji {
    background: rgba(255, 255, 255, 0.14);
}


/* =========================================
   MOVING STRIP
========================================= */

.ng-partners-marquee {
    background: rgba(255, 255, 255, 0.055);

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


/* Make the edge fades match the green section */

.ng-partners-marquee::before {
    background:
        linear-gradient(
            90deg,
            #356c43 0%,
            rgba(53, 108, 67, 0.94) 34%,
            rgba(53, 108, 67, 0) 100%
        );
}


.ng-partners-marquee::after {
    background:
        linear-gradient(
            270deg,
            #356c43 0%,
            rgba(53, 108, 67, 0.94) 34%,
            rgba(53, 108, 67, 0) 100%
        );
}


/* =========================================
   LOGO CARDS
========================================= */

.ng-partner-card {
    background: #fbfaf6;

    border-color: rgba(255, 255, 255, 0.16);

    box-shadow:
        0 12px 30px rgba(19, 53, 29, 0.14);
}


a.ng-partner-card:hover,
a.ng-partner-card:focus-visible {
    background: #ffffff;

    box-shadow:
        0 18px 40px rgba(16, 48, 26, 0.22);
}


/* =========================================
   BOTTOM INVITATION
========================================= */

.ng-partners__footer {
    background: rgba(255, 255, 255, 0.1);

    border: 1px solid rgba(255, 255, 255, 0.14);
}


.ng-partners__footer p {
    color: rgba(255, 255, 255, 0.88);
}


.ng-partners__button {
    color: #285d38;
    background: #ffffff;

    border-color: #ffffff;

    box-shadow:
        0 10px 25px rgba(18, 51, 28, 0.18);
}


.ng-partners__button:hover {
    color: #214f30;
    background: #edf5eb;

    box-shadow:
        0 15px 32px rgba(18, 51, 28, 0.25);
}

/* =========================================
   SEAMLESS PARTNER LOOP
========================================= */

.ng-partners-marquee__track {
    display: flex;

    width: max-content;

    animation: ngPartnersMove 42s linear infinite;

    will-change: transform;
}


.ng-partners-marquee__group {
    display: flex;
    align-items: center;
    flex-shrink: 0;

    gap: 17px;

    /*
     * This final spacing must exist on both groups
     * so their widths remain exactly identical.
     */
    padding-right: 17px;
}


@keyframes ngPartnersMove {

    from {
        transform: translate3d(0, 0, 0);
    }

    to {
        transform: translate3d(-50%, 0, 0);
    }

}

/* =========================================
   FINAL CTA
========================================= */

section.ng-final-cta {
    position: relative;

    padding: 88px 0 96px;

    background: var(--intro-background, #f4f1ec) !important;

    border-top: 1px solid rgba(35, 78, 48, 0.09);

    overflow: hidden;
}


/* Remove automatic global divider */

section.ng-final-cta::before {
    display: none !important;
    content: none !important;
}


.ng-final-cta__container {
    width: min(1120px, calc(100% - 48px));
    margin: 0 auto;
}


/* =========================================
   SPLIT CARD
========================================= */

.ng-final-cta__card {
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;

    min-height: 390px;

    overflow: hidden;

    border: 1px solid rgba(34, 76, 47, 0.1);
    border-radius: 30px;

    box-shadow:
        0 22px 58px rgba(28, 67, 40, 0.13);
}


/* =========================================
   LEFT SIDE
========================================= */

.ng-final-cta__content {
    position: relative;

    padding: 60px 58px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    color: #ffffff;

    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(255, 255, 255, 0.08),
            transparent 42%
        ),
        #356c43;
}


/* Soft organic shape */

.ng-final-cta__content::after {
    content: "";

    position: absolute;

    width: 240px;
    height: 240px;

    left: -135px;
    bottom: -145px;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.045);

    pointer-events: none;
}


.ng-final-cta__eyebrow {
    position: relative;
    z-index: 2;

    display: inline-flex;
    align-items: center;
    gap: 9px;

    margin-bottom: 14px;

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

    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.ng-final-cta__eyebrow::before {
    content: "";

    width: 28px;
    height: 2px;

    border-radius: 999px;

    background: rgba(255, 255, 255, 0.7);
}


.ng-final-cta__content h2 {
    position: relative;
    z-index: 2;

    max-width: 480px;

    margin: 0 0 18px;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(40px, 4.2vw, 54px);
    font-weight: 400;
    line-height: 1.04;
    letter-spacing: -0.045em;

    color: #ffffff;
}


.ng-final-cta__content p {
    position: relative;
    z-index: 2;

    max-width: 510px;

    margin: 0 0 29px;

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

    font-size: 16px;
    line-height: 1.65;
}


/* =========================================
   BUTTONS
========================================= */

.ng-final-cta__buttons {
    position: relative;
    z-index: 2;

    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}


.ng-final-cta__button {
    min-height: 50px;
    padding: 11px 21px;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 11px;

    border-radius: 999px;

    text-decoration: none;

    font-size: 14px;
    font-weight: 700;

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


.ng-final-cta__button--primary {
    color: #285e39;
    background: #ffffff;

    border: 1px solid #ffffff;

    box-shadow:
        0 10px 25px rgba(17, 51, 28, 0.18);
}


.ng-final-cta__button--primary:hover {
    color: #214f30;
    background: #edf5eb;

    transform: translateY(-3px);

    box-shadow:
        0 15px 32px rgba(17, 51, 28, 0.25);
}


.ng-final-cta__button--primary span {
    font-size: 20px;
    font-weight: 400;
    line-height: 1;

    transition: transform 0.3s ease;
}


.ng-final-cta__button--primary:hover span {
    transform: translateX(4px);
}


.ng-final-cta__button--secondary {
    color: #ffffff;
    background: transparent;

    border: 1px solid rgba(255, 255, 255, 0.58);
}


.ng-final-cta__button--secondary:hover {
    color: #285e39;
    background: #ffffff;
    border-color: #ffffff;

    transform: translateY(-3px);
}


.ng-final-cta__button--secondary span {
    font-family: Arial, sans-serif;
    font-size: 22px;
    font-weight: 300;
    line-height: 1;
}


/* =========================================
   RIGHT VISUAL
========================================= */

.ng-final-cta__visual {
    position: relative;

    min-height: 390px;

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

    overflow: hidden;

    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(255, 255, 255, 0.5),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #dcebd8,
            #edf4ea
        );
}


/* Decorative circles */

.ng-final-cta__visual::before,
.ng-final-cta__visual::after {
    content: "";

    position: absolute;

    border-radius: 50%;

    background: rgba(61, 126, 77, 0.075);

    pointer-events: none;
}


.ng-final-cta__visual::before {
    width: 250px;
    height: 250px;

    top: -125px;
    right: -75px;
}


.ng-final-cta__visual::after {
    width: 200px;
    height: 200px;

    left: -95px;
    bottom: -115px;
}


.ng-final-cta__visual-copy {
    position: absolute;
    z-index: 2;

    top: 58px;
    left: 50%;

    width: 100%;

    text-align: center;

    transform: translateX(-50%);
}


.ng-final-cta__visual-copy span {
    display: block;

    margin-bottom: 2px;

    color: #4a7255;

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}


.ng-final-cta__visual-copy strong {
    display: block;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: clamp(35px, 3.4vw, 46px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.04em;

    color: #275f3a;
}


.ng-final-cta__visual img {
    position: absolute;
    z-index: 1;

    width: min(88%, 410px);
    max-height: 265px;

    left: 50%;
    bottom: -8px;

    display: block;

    object-fit: contain;
    object-position: center bottom;

    opacity: 0.48;

    transform: translateX(-50%);

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


.ng-final-cta__card:hover
.ng-final-cta__visual img {
    opacity: 0.62;

    transform:
        translateX(-50%)
        translateY(-5px);
}


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

@media (max-width: 850px) {

    .ng-final-cta__card {
        grid-template-columns: 1fr;
    }


    .ng-final-cta__visual {
        min-height: 330px;
    }


    .ng-final-cta__visual-copy {
        top: 43px;
    }


    .ng-final-cta__visual img {
        max-height: 235px;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 560px) {

    section.ng-final-cta {
        padding: 62px 0 70px;
    }


    .ng-final-cta__container {
        width: min(100% - 28px, 520px);
    }


    .ng-final-cta__card {
        border-radius: 23px;
    }


    .ng-final-cta__content {
        padding: 43px 27px;
    }


    .ng-final-cta__content h2 {
        font-size: 42px;
    }


    .ng-final-cta__buttons {
        width: 100%;

        flex-direction: column;
        align-items: stretch;
    }


    .ng-final-cta__button {
        width: 100%;
    }


    .ng-final-cta__visual {
        min-height: 285px;
    }


    .ng-final-cta__visual-copy strong {
        font-size: 38px;
    }


    .ng-final-cta__visual img {
        width: 95%;
        max-height: 205px;
    }

}

section.ng-intro {
    margin-top: -3px;

    background: var(--intro-background, #f4f1ec) !important;

    border-top: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
}

section.ng-intro::before {
    display: none !important;
    content: none !important;
}

/* =========================================
   INTRO ACTIONS + DONATION
========================================= */

.ng-intro__actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 15px;
}


/* Keep the original button neatly aligned */

.ng-intro__actions .ng-intro__button {
    flex: 0 0 auto;
}


/* =========================================
   DONATION CARD
========================================= */

.ng-intro__donation {
    position: relative;

    width: 245px;
    min-height: 66px;

    padding: 7px 38px 7px 7px;

    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 12px;

    color: #173a28;
    background: rgba(255, 255, 255, 0.82);

    border: 1px solid rgba(45, 103, 60, 0.16);
    border-radius: 17px;

    text-align: left;
    text-decoration: none;

    box-shadow:
        0 10px 25px rgba(31, 70, 42, 0.08);

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


.ng-intro__donation:hover {
    color: #173a28;
    background: #ffffff;

    border-color: rgba(45, 103, 60, 0.27);

    transform: translateY(-3px);

    box-shadow:
        0 15px 32px rgba(31, 70, 42, 0.13);
}


/* =========================================
   QR
========================================= */

.ng-intro__donation-qr,
.ng-intro__donation-placeholder {
    width: 50px;
    height: 50px;

    border-radius: 9px;
}


.ng-intro__donation-qr {
    display: block;

    padding: 3px;

    object-fit: contain;

    background: #ffffff;

    border: 1px solid rgba(45, 103, 60, 0.12);
}


.ng-intro__donation-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #367848;
    background: #edf5eb;

    border: 1.5px dashed rgba(54, 120, 72, 0.35);

    font-size: 17px;
    font-weight: 800;
}


/* =========================================
   DONATION TEXT
========================================= */

.ng-intro__donation-copy {
    min-width: 0;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}


.ng-intro__donation-copy strong {
    font-family: "Kalam", "Segoe Print", cursive;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.05;

    color: #173a28;

    white-space: nowrap;
}


.ng-intro__donation-copy small {
    display: block;

    margin-top: 4px;

    color: #56625b;

    font-size: 10.5px;
    font-weight: 600;
    line-height: 1.25;
}


/* =========================================
   HEART
========================================= */

.ng-intro__donation-heart {
    position: absolute;

    top: 9px;
    right: 10px;

    color: #397d4a;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;

    transition: transform 0.3s ease;
}


.ng-intro__donation:hover
.ng-intro__donation-heart {
    transform:
        translateY(-2px)
        rotate(-7deg)
        scale(1.08);
}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ng-intro__actions {
        width: 100%;

        flex-direction: column;

        gap: 11px;
    }


    .ng-intro__actions .ng-intro__button,
    .ng-intro__donation {
        width: min(100%, 295px);
    }


    .ng-intro__donation {
        min-height: 50px;

        padding: 10px 38px 10px 18px;

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

        text-align: center;
    }


    /*
     * A QR displayed on the same phone cannot
     * conveniently be scanned, so hide it.
     */

    .ng-intro__donation-qr,
    .ng-intro__donation-placeholder {
        display: none;
    }


    .ng-intro__donation-copy {
        align-items: center;
    }


    .ng-intro__donation-copy strong {
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
    }


    .ng-intro__donation-copy small {
        display: none;
    }


    .ng-intro__donation-heart {
        top: 50%;

        transform: translateY(-50%);
    }


    .ng-intro__donation:hover
    .ng-intro__donation-heart {
        transform:
            translateY(-55%)
            rotate(-7deg)
            scale(1.08);
    }

}

/* =========================================
   INTRO ACTIONS — CLEAN MATCHED PAIR
========================================= */

.ng-intro__actions {
    width: 100%;

    margin-top: 27px;

    display: flex;
    align-items: stretch;
    justify-content: center;
    flex-wrap: nowrap;
    gap: 12px;
}


/* =========================================
   PRIMARY BUTTON
========================================= */

.ng-intro__actions .ng-intro__button {
    width: auto;
    min-width: 205px;
    min-height: 62px;

    margin: 0;
    padding: 0 25px;

    flex: 0 0 auto;

    border-radius: 999px;

    box-shadow:
        0 10px 25px rgba(38, 88, 52, 0.15);
}


/* =========================================
   DONATION ACTION
========================================= */

.ng-intro__donation {
    position: relative;

    width: 275px;
    min-height: 62px;

    padding: 6px 38px 6px 6px;

    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: center;
    gap: 11px;

    flex: 0 0 auto;

    color: #173a28;
    background: rgba(255, 255, 255, 0.72);

    border: 1px solid rgba(45, 103, 60, 0.18);
    border-radius: 18px;

    text-align: left;
    text-decoration: none;

    box-shadow:
        0 8px 22px rgba(31, 70, 42, 0.065);

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


.ng-intro__donation:hover {
    color: #173a28;
    background: #ffffff;

    border-color: rgba(45, 103, 60, 0.3);

    transform: translateY(-3px);

    box-shadow:
        0 14px 30px rgba(31, 70, 42, 0.12);
}


/* =========================================
   QR
========================================= */

.ng-intro__donation-qr,
.ng-intro__donation-placeholder {
    width: 50px;
    height: 50px;

    margin: 0;

    border-radius: 10px;
}


.ng-intro__donation-qr {
    display: block;

    padding: 3px;

    object-fit: contain;

    background: #ffffff;

    border: 1px solid rgba(45, 103, 60, 0.12);
}


.ng-intro__donation-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;

    color: #337447;
    background: #edf5eb;

    border: 1.5px dashed rgba(54, 120, 72, 0.3);

    font-size: 16px;
    font-weight: 800;
    line-height: 1;
}


/* =========================================
   DONATION COPY
========================================= */

.ng-intro__donation-copy {
    min-width: 0;
    padding-left: 11px;

    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;

    border-left: 1px solid rgba(45, 103, 60, 0.12);
}


.ng-intro__donation-copy strong {
    margin: 0;

    font-family: "Kalam", "Segoe Print", cursive;
    font-size: 17px;
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -0.025em;

    color: #173a28;

    white-space: nowrap;
}


.ng-intro__donation-copy small {
    display: block;

    margin-top: 3px;

    color: #667169;

    font-size: 9.5px;
    font-weight: 600;
    line-height: 1.25;

    white-space: nowrap;
}


/* =========================================
   HEART
========================================= */

.ng-intro__donation-heart {
    position: absolute;

    top: 50%;
    right: 12px;

    color: #397d4a;

    font-family: Arial, sans-serif;
    font-size: 20px;
    font-weight: 300;
    line-height: 1;

    transform: translateY(-50%);

    transition: transform 0.3s ease;
}


.ng-intro__donation:hover
.ng-intro__donation-heart {
    transform:
        translateY(-55%)
        rotate(-7deg)
        scale(1.08);
}


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

@media (max-width: 720px) {

    .ng-intro__actions {
        max-width: 310px;

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

        flex-direction: column;
        align-items: stretch;

        gap: 10px;
    }


    .ng-intro__actions .ng-intro__button,
    .ng-intro__donation {
        width: 100%;
        min-width: 0;
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width: 600px) {

    .ng-intro__actions .ng-intro__button {
        min-height: 53px;
    }


    .ng-intro__donation {
        min-height: 53px;

        padding: 9px 40px 9px 18px;

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

        border-radius: 999px;

        background: transparent;

        box-shadow: none;
    }


    /* A QR cannot conveniently be scanned
       from the same phone displaying it */
    .ng-intro__donation-qr,
    .ng-intro__donation-placeholder {
        display: none;
    }


    .ng-intro__donation-copy {
        padding: 0;

        align-items: center;

        border-left: 0;
    }


    .ng-intro__donation-copy strong {
        font-family: inherit;
        font-size: 14px;
        font-weight: 700;
    }


    .ng-intro__donation-copy small {
        display: none;
    }

}

/* ==================================================
   NOORDGROEIT HOMEPAGE — DARK MODE
================================================== */

html[data-theme="dark"] {
    color-scheme: dark;

    --ng-dark-bg: #151816;
    --ng-dark-bg-alt: #1c211e;

    --ng-dark-card: #222824;
    --ng-dark-card-raised: #29302b;
    --ng-dark-card-soft: #202522;

    --ng-dark-text: #f4f1ec;
    --ng-dark-muted: #b8bfba;
    --ng-dark-muted-soft: #929b95;

    --ng-dark-border: rgba(244, 241, 236, 0.09);
    --ng-dark-border-strong: rgba(244, 241, 236, 0.16);

    --ng-dark-accent: #9bb99d;
    --ng-dark-accent-light: #bed2bb;

    --intro-background: #151816;
}


html[data-theme="dark"] body {
    color: var(--ng-dark-text);
    background: var(--ng-dark-bg);
}


/* ==================================================
   UNDER-CONSTRUCTION NOTICE
================================================== */

html[data-theme="dark"] .construction-notice {
    color: #d9dfda;

    background: #242a26;

    border-bottom-color: rgba(255, 255, 255, 0.08);
}


html[data-theme="dark"] .construction-notice strong {
    color: #c2d5be;
}


/* ==================================================
   INTRODUCTION
================================================== */

html[data-theme="dark"] section.ng-intro {
    color: var(--ng-dark-text);

    background: var(--ng-dark-bg) !important;
}


html[data-theme="dark"] .ng-intro__heading h2 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"] .ng-intro__heading > p {
    color: var(--ng-dark-muted) !important;
}


html[data-theme="dark"] .ng-intro__heading h2::after {
    background: var(--ng-dark-accent);
}


html[data-theme="dark"] .ng-intro__leaf {
    background: rgba(155, 185, 157, 0.12);
}


/* Primary intro button */

html[data-theme="dark"] .ng-intro__button {
    color: #ffffff;

    background: #496f52;

    box-shadow:
        0 11px 26px rgba(0, 0, 0, 0.25);
}


html[data-theme="dark"] .ng-intro__button:hover {
    background: #587f61;

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.32);
}


/* Donation card */

html[data-theme="dark"] .ng-intro__donation {
    color: var(--ng-dark-text);

    background: var(--ng-dark-card);

    border-color: var(--ng-dark-border);

    box-shadow:
        0 10px 25px rgba(0, 0, 0, 0.2);
}


html[data-theme="dark"] .ng-intro__donation:hover {
    color: var(--ng-dark-text);

    background: var(--ng-dark-card-raised);

    border-color: var(--ng-dark-border-strong);

    box-shadow:
        0 16px 34px rgba(0, 0, 0, 0.28);
}


html[data-theme="dark"] .ng-intro__donation-copy {
    border-left-color: var(--ng-dark-border);
}


html[data-theme="dark"]
.ng-intro__donation-copy strong {
    color: var(--ng-dark-text);
}


html[data-theme="dark"]
.ng-intro__donation-copy small {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-intro__donation-placeholder {
    color: var(--ng-dark-accent-light);

    background: rgba(155, 185, 157, 0.08);

    border-color: rgba(155, 185, 157, 0.3);
}


html[data-theme="dark"]
.ng-intro__donation-heart {
    color: var(--ng-dark-accent);
}


/* ==================================================
   VALUES STRIP
================================================== */

html[data-theme="dark"] .ng-values {
    color: var(--ng-dark-text);

    background: var(--ng-dark-bg-alt) !important;

    border-color: var(--ng-dark-border) !important;

    box-shadow:
        0 0 0 100vmax var(--ng-dark-bg-alt) !important;
}


html[data-theme="dark"] .ng-value {
    border-color: var(--ng-dark-border) !important;
}


html[data-theme="dark"]
.ng-value:not(:last-child)::after {
    background: var(--ng-dark-border);
}


html[data-theme="dark"] .ng-value h3 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"] .ng-value p {
    color: var(--ng-dark-muted) !important;
}


/* Muted versions of the colourful emoji circles */

html[data-theme="dark"]
.ng-value:nth-child(1) .ng-value__emoji {
    background: rgba(112, 156, 111, 0.18);
}


html[data-theme="dark"]
.ng-value:nth-child(2) .ng-value__emoji {
    background: rgba(185, 147, 66, 0.18);
}


html[data-theme="dark"]
.ng-value:nth-child(3) .ng-value__emoji {
    background: rgba(79, 145, 136, 0.18);
}


html[data-theme="dark"]
.ng-value:nth-child(4) .ng-value__emoji {
    background: rgba(176, 105, 80, 0.17);
}


/* ==================================================
   PURPOSE — WHAT WE DO
================================================== */

html[data-theme="dark"] section.ng-purpose {
    background: var(--ng-dark-bg-alt) !important;

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"] .ng-purpose__eyebrow {
    color: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-purpose__eyebrow::before {
    background: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-purpose__heading h2 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-purpose__heading p {
    color: var(--ng-dark-muted);
}


/* Both cards become neutral, not bright green */

html[data-theme="dark"]
.ng-purpose-card--dark {
    color: var(--ng-dark-text);

    background:
        linear-gradient(
            145deg,
            #272d29,
            #222724
        );

    border: 1px solid var(--ng-dark-border);

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.2);
}


html[data-theme="dark"]
.ng-purpose-card--light {
    color: var(--ng-dark-text);

    background: var(--ng-dark-card);

    border-color: var(--ng-dark-border);

    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.18);
}


html[data-theme="dark"]
.ng-purpose-card:hover {
    border-color: rgba(155, 185, 157, 0.25);

    box-shadow:
        0 24px 52px rgba(0, 0, 0, 0.28);
}


html[data-theme="dark"]
.ng-purpose-card--dark .ng-purpose-card__emoji,
html[data-theme="dark"]
.ng-purpose-card--light .ng-purpose-card__emoji {
    background: rgba(155, 185, 157, 0.11);
}


html[data-theme="dark"]
.ng-purpose-card__number,
html[data-theme="dark"]
.ng-purpose-card__label {
    color: var(--ng-dark-accent);
    opacity: 0.82;
}


/* ==================================================
   SUSAN'S STORY
================================================== */

html[data-theme="dark"] section.ng-story {
    background: var(--ng-dark-bg) !important;

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"] .ng-story__card {
    background: var(--ng-dark-card);

    border-color: var(--ng-dark-border);

    box-shadow:
        0 22px 58px rgba(0, 0, 0, 0.28);
}


/* Keep the photograph unchanged */

html[data-theme="dark"] .ng-story__content {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(155, 185, 157, 0.06),
            transparent 42%
        ),
        var(--ng-dark-card);
}


html[data-theme="dark"]
.ng-story__content h2 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-story__content h2::after {
    background: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-story__testimonial {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-story__signature {
    color: var(--ng-dark-text);
}


html[data-theme="dark"] .ng-story__button {
    color: var(--ng-dark-accent-light);

    border-color: rgba(190, 210, 187, 0.55);
}


html[data-theme="dark"] .ng-story__button:hover {
    color: #1a201c;

    background: var(--ng-dark-accent-light);

    border-color: var(--ng-dark-accent-light);
}


/*
The Susan label stays warm cream because it is designed
as a paper note over the photograph.
*/

html[data-theme="dark"] .ng-story__name-card {
    box-shadow:
        0 14px 34px rgba(0, 0, 0, 0.28);
}


/* ==================================================
   INITIATIVES
================================================== */

html[data-theme="dark"] section.ng-initiatives {
    background: var(--ng-dark-bg-alt) !important;

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"]
.ng-initiatives__eyebrow,
html[data-theme="dark"]
.ng-initiatives__all-link {
    color: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-initiatives__eyebrow::before {
    background: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-initiatives__heading h2 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-initiatives__heading p {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-initiatives__heading-emoji {
    background: rgba(155, 185, 157, 0.11);
}


html[data-theme="dark"]
.ng-initiative-card > a {
    color: var(--ng-dark-text);

    background: var(--ng-dark-card);

    border-color: var(--ng-dark-border);

    box-shadow:
        0 18px 48px rgba(0, 0, 0, 0.22);
}


html[data-theme="dark"]
.ng-initiative-card.is-active > a:hover {
    box-shadow:
        0 27px 62px rgba(0, 0, 0, 0.32);
}


html[data-theme="dark"]
.ng-initiative-card__content {
    background:
        radial-gradient(
            circle at 100% 0%,
            rgba(155, 185, 157, 0.07),
            transparent 42%
        ),
        var(--ng-dark-card);
}


html[data-theme="dark"]
.ng-initiative-card h3 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-initiative-card p {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-initiative-card__number,
html[data-theme="dark"]
.ng-initiative-card__link {
    color: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-initiative-card__emoji {
    background: rgba(155, 185, 157, 0.11);
}


html[data-theme="dark"]
.ng-initiatives__arrow {
    color: var(--ng-dark-text);

    background: var(--ng-dark-card-raised);

    border-color: var(--ng-dark-border);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.25);
}


html[data-theme="dark"]
.ng-initiatives__arrow:hover {
    color: #18201b;

    background: var(--ng-dark-accent-light);
}


html[data-theme="dark"]
.ng-initiatives__dots button {
    background: rgba(255, 255, 255, 0.16);
}


html[data-theme="dark"]
.ng-initiatives__dots button.is-active {
    background: var(--ng-dark-accent);
}


/* ==================================================
   VOLUNTEER CTA
================================================== */

html[data-theme="dark"]
section.ng-volunteer-cta {
    background: var(--ng-dark-bg) !important;

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"]
.ng-volunteer-cta__card {
    background:
        radial-gradient(
            circle at 92% 15%,
            rgba(255, 255, 255, 0.035),
            transparent 34%
        ),
        linear-gradient(
            110deg,
            #202522 0%,
            #272d29 58%,
            #2e3430 100%
        );

    border-color: var(--ng-dark-border);

    box-shadow:
        0 18px 46px rgba(0, 0, 0, 0.23);
}


html[data-theme="dark"]
.ng-volunteer-cta__card::before {
    background: rgba(155, 185, 157, 0.045);
}


html[data-theme="dark"]
.ng-volunteer-cta__content h2 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-volunteer-cta__content h2 span {
    color: var(--ng-dark-accent);
}


html[data-theme="dark"]
.ng-volunteer-cta__content p {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-volunteer-cta__button--primary {
    background: #4b7355;

    border-color: #4b7355;
}


html[data-theme="dark"]
.ng-volunteer-cta__button--primary:hover {
    background: #5a8263;

    border-color: #5a8263;
}


html[data-theme="dark"]
.ng-volunteer-cta__button--secondary {
    color: var(--ng-dark-accent-light);

    background: transparent;

    border-color: rgba(190, 210, 187, 0.48);
}


html[data-theme="dark"]
.ng-volunteer-cta__button--secondary:hover {
    color: #19201b;

    background: var(--ng-dark-accent-light);

    border-color: var(--ng-dark-accent-light);
}


/* ==================================================
   AGENDA AND LOCATION
================================================== */

html[data-theme="dark"] section.ng-practical {
    background: var(--ng-dark-bg-alt) !important;

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"] .ng-practical-card {
    background: var(--ng-dark-card);

    border-color: var(--ng-dark-border);

    box-shadow:
        0 14px 38px rgba(0, 0, 0, 0.19);
}


html[data-theme="dark"]
.ng-practical-card__header h2,
html[data-theme="dark"]
.ng-agenda-item__content h3 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-practical-card__link {
    color: var(--ng-dark-accent);
}


html[data-theme="dark"] .ng-agenda-item {
    color: var(--ng-dark-text);

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"] .ng-agenda-item:hover {
    background: rgba(255, 255, 255, 0.04);
}


html[data-theme="dark"]
.ng-agenda-item__date {
    color: var(--ng-dark-accent-light);

    background: rgba(155, 185, 157, 0.1);
}


html[data-theme="dark"]
.ng-agenda-item__content p,
html[data-theme="dark"]
.ng-location-card__text {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-location-card__map {
    background: var(--ng-dark-card-raised);

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"]
.ng-location-card__map iframe,
html[data-theme="dark"]
.ng-location-card__map img {
    filter:
        saturate(0.8)
        brightness(0.83)
        contrast(1.04);

    transition: filter 0.3s ease;
}


html[data-theme="dark"]
.ng-location-card__map:hover iframe,
html[data-theme="dark"]
.ng-location-card__map:hover img {
    filter:
        saturate(0.95)
        brightness(0.93);
}


/* ==================================================
   PARTNERS
================================================== */

html[data-theme="dark"] section.ng-partners {
    background: #191e1b !important;
}


html[data-theme="dark"]
section.ng-partners::after {
    background: rgba(155, 185, 157, 0.035);
}


html[data-theme="dark"]
.ng-partners__heading h2 {
    color: var(--ng-dark-text) !important;
}


html[data-theme="dark"]
.ng-partners__heading p {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-partners__emoji {
    background: rgba(155, 185, 157, 0.1);
}


html[data-theme="dark"] .ng-partners-marquee {
    background: rgba(255, 255, 255, 0.025);

    border-color: var(--ng-dark-border);
}


/* Edge fades must match the dark section */

html[data-theme="dark"]
.ng-partners-marquee::before {
    background:
        linear-gradient(
            90deg,
            #191e1b 0%,
            rgba(25, 30, 27, 0.94) 34%,
            rgba(25, 30, 27, 0) 100%
        );
}


html[data-theme="dark"]
.ng-partners-marquee::after {
    background:
        linear-gradient(
            270deg,
            #191e1b 0%,
            rgba(25, 30, 27, 0.94) 34%,
            rgba(25, 30, 27, 0) 100%
        );
}


/* Logo cards intentionally stay light */

html[data-theme="dark"] .ng-partner-card {
    background: #f8f7f3;

    border-color: rgba(255, 255, 255, 0.1);

    box-shadow:
        0 12px 30px rgba(0, 0, 0, 0.22);
}


html[data-theme="dark"]
a.ng-partner-card:hover,
html[data-theme="dark"]
a.ng-partner-card:focus-visible {
    background: #ffffff;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.3);
}


html[data-theme="dark"]
.ng-partners__footer {
    background: rgba(255, 255, 255, 0.04);

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"]
.ng-partners__footer p {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-partners__button {
    color: #222824;

    background: #f4f1ec;

    border-color: #f4f1ec;
}


html[data-theme="dark"]
.ng-partners__button:hover {
    color: #171c19;

    background: #ffffff;
}


/* ==================================================
   FINAL CTA
================================================== */

html[data-theme="dark"] section.ng-final-cta {
    background: var(--ng-dark-bg) !important;

    border-color: var(--ng-dark-border);
}


html[data-theme="dark"]
.ng-final-cta__card {
    border-color: var(--ng-dark-border);

    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.3);
}


/* One muted green focal panel is enough */

html[data-theme="dark"]
.ng-final-cta__content {
    background:
        radial-gradient(
            circle at 0% 100%,
            rgba(255, 255, 255, 0.04),
            transparent 42%
        ),
        #294b34;
}


html[data-theme="dark"]
.ng-final-cta__visual {
    background:
        radial-gradient(
            circle at 80% 15%,
            rgba(155, 185, 157, 0.07),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #202522,
            #2a302c
        );
}


html[data-theme="dark"]
.ng-final-cta__visual::before,
html[data-theme="dark"]
.ng-final-cta__visual::after {
    background: rgba(155, 185, 157, 0.045);
}


html[data-theme="dark"]
.ng-final-cta__visual-copy span {
    color: var(--ng-dark-muted);
}


html[data-theme="dark"]
.ng-final-cta__visual-copy strong {
    color: var(--ng-dark-accent-light);
}


html[data-theme="dark"]
.ng-final-cta__visual img {
    opacity: 0.38;
}


html[data-theme="dark"]
.ng-final-cta__card:hover
.ng-final-cta__visual img {
    opacity: 0.52;
}


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

html[data-theme="dark"] .site-footer,
html[data-theme="dark"] footer.site-footer {
    background: #0e110f !important;

    border-top-color: rgba(255, 255, 255, 0.07);
}


/* ==================================================
   MOBILE DONATION BUTTON
================================================== */

@media (max-width: 600px) {

    html[data-theme="dark"]
    .ng-intro__donation {
        color: var(--ng-dark-accent-light);

        background: transparent;

        border-color: rgba(190, 210, 187, 0.34);
    }


    html[data-theme="dark"]
    .ng-intro__donation:hover {
        color: #19201b;

        background: var(--ng-dark-accent-light);

        border-color: var(--ng-dark-accent-light);
    }

}

/* ==================================================
   HOMEPAGE — AGENDA LIST
================================================== */

.home-agenda-list {
    margin-top: clamp(2rem, 4vw, 3.25rem);
    overflow: hidden;
    background: #294e31;
    color: #ffffff;
}


/* Header */

.home-agenda-list__header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;

    padding:
        clamp(1.7rem, 3vw, 2.4rem)
        clamp(1.5rem, 4vw, 3rem);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.13);
}


.home-agenda-list__eyebrow {
    display: block;
    margin-bottom: 0.45rem;

    color: #cfe1c9;

    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}


.home-agenda-list__header h3 {
    margin: 0;

    color: #ffffff;

    font-size: clamp(1.5rem, 2.4vw, 2rem);
    line-height: 1.12;
    letter-spacing: -0.035em;
}


.home-agenda-list__all-link {
    display: inline-flex;
    align-items: center;
    flex: 0 0 auto;
    gap: 0.6rem;

    color: #ffffff;

    font-size: 0.82rem;
    font-weight: 800;
    text-decoration: none;
}


.home-agenda-list__all-link span {
    transition: transform 180ms ease;
}


.home-agenda-list__all-link:hover span,
.home-agenda-list__all-link:focus-visible span {
    transform: translateX(4px);
}


/* Agenda rows */

.home-agenda-list__items {
    display: grid;
}


.home-agenda-item {
    display: grid;
    grid-template-columns:
        105px
        minmax(0, 1fr);

    align-items: center;
    gap: clamp(1.3rem, 3vw, 2.5rem);

    padding:
        clamp(1.25rem, 2.5vw, 1.7rem)
        clamp(1.5rem, 4vw, 3rem);

    border-bottom:
        1px solid
        rgba(255, 255, 255, 0.11);

    transition: background-color 180ms ease;
}


.home-agenda-item:last-child {
    border-bottom: 0;
}


.home-agenda-item:hover {
    background: rgba(255, 255, 255, 0.045);
}


/* Date */

.home-agenda-item__date {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    gap: 0.55rem;

    color: #ffffff;
}


.home-agenda-item__date strong {
    font-size: clamp(2rem, 3vw, 2.8rem);
    font-weight: 800;
    line-height: 0.9;
    letter-spacing: -0.06em;
}


.home-agenda-item__date span {
    color: #cfe1c9;

    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.2;
    text-transform: uppercase;
}


/* Content */

.home-agenda-item__content h4 {
    margin: 0 0 0.35rem;

    color: #ffffff;

    font-size: clamp(1.05rem, 1.8vw, 1.3rem);
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: -0.025em;
}


.home-agenda-item__content p {
    max-width: 680px;
    margin: 0;

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

    font-size: 0.88rem;
    line-height: 1.6;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 650px) {

    .home-agenda-list__header {
        align-items: flex-start;
        flex-direction: column;
        gap: 1rem;

        padding: 1.6rem 1.3rem;
    }


    .home-agenda-item {
        grid-template-columns:
            78px
            minmax(0, 1fr);

        align-items: start;
        gap: 1rem;

        padding: 1.25rem 1.3rem;
    }


    .home-agenda-item__date {
        grid-template-columns: 1fr;
        gap: 0.2rem;
    }


    .home-agenda-item__date strong {
        font-size: 2.1rem;
    }


    .home-agenda-item__date span {
        font-size: 0.62rem;
    }


    .home-agenda-item__content h4 {
        font-size: 1.05rem;
    }


    .home-agenda-item__content p {
        font-size: 0.82rem;
    }

}


/* ==================================================
   DARK MODE
================================================== */

html[data-theme="dark"]
.home-agenda-list {
    background: #23452e;
}

/* ==================================================
   NOORDBUITEN — 2023 / 2026 COMPARISON
================================================== */

.ng-initiative-card__media--timeline {
    position: relative;
    isolation: isolate;
}


/* Large current image */

.ng-initiative-card__media--timeline
.ng-initiative-card__current-image {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
}


/* 2026 label */

.ng-initiative-card__current-year {
    position: absolute;
    z-index: 4;

    top: 15px;
    right: 15px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 7px 11px;

    border:
        1px solid
        rgba(255, 255, 255, 0.4);

    border-radius: 999px;

    color: #294e31;
    background:
        rgba(255, 253, 247, 0.93);

    box-shadow:
        0 8px 20px
        rgba(20, 45, 28, 0.11);

    font-size: 10px;
    font-weight: 800;
    line-height: 1.2;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* Small older photo */

.ng-initiative-card__past {
    position: absolute;
    z-index: 5;

    right: 15px;
    bottom: 15px;

    width: clamp(105px, 32%, 150px);

    padding: 6px;

    border:
        1px solid
        rgba(41, 78, 49, 0.12);

    border-radius: 15px;

    background: #fffdf9;

    box-shadow:
        0 15px 34px
        rgba(19, 45, 27, 0.24);

    transform: rotate(2deg);

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


.ng-initiative-card:hover
.ng-initiative-card__past {
    box-shadow:
        0 20px 42px
        rgba(19, 45, 27, 0.3);

    transform:
        rotate(0deg)
        translateY(-3px);
}


/* Important: prevents old generic image hover CSS
   from enlarging the small photo incorrectly */

.ng-initiative-card__past img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 4 / 3;

    display: block;

    border-radius: 10px;

    object-fit: cover;

    transform: none !important;
}


/* 2023 label */

.ng-initiative-card__past span {
    position: absolute;

    bottom: 11px;
    left: 11px;

    padding: 5px 8px;

    border-radius: 999px;

    color: #294e31;
    background:
        rgba(255, 253, 247, 0.94);

    box-shadow:
        0 5px 14px
        rgba(20, 45, 28, 0.12);

    font-size: 8.5px;
    font-weight: 800;
    line-height: 1.2;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 620px) {

    .ng-initiative-card__current-year {
        top: 11px;
        right: 11px;

        padding: 6px 9px;

        font-size: 9px;
    }


    .ng-initiative-card__past {
        right: 11px;
        bottom: 11px;

        width: clamp(95px, 36%, 125px);

        padding: 5px;

        border-radius: 13px;
    }


    .ng-initiative-card__past img {
        border-radius: 9px;
    }


    .ng-initiative-card__past span {
        bottom: 9px;
        left: 9px;

        padding: 4px 7px;

        font-size: 8px;
    }

}


/* ==================================================
   DARK MODE
================================================== */

html[data-theme="dark"]
.ng-initiative-card__past {
    border-color:
        rgba(244, 241, 236, 0.12);

    background: #222824;

    box-shadow:
        0 16px 36px
        rgba(0, 0, 0, 0.34);
}

/* ==================================================
   NOORDBUITEN — THEN AND NOW
================================================== */

.ng-initiative-card__media--timeline {
    position: relative;
    isolation: isolate;

    overflow: hidden;
}


/* Main 2026 photograph */

.ng-initiative-card__media--timeline
.ng-initiative-card__current-image {
    width: 100%;
    height: 100%;

    display: block;

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

    transition: transform 0.65s ease;
}


/* Keep the normal hover effect only on the large image */

.ng-initiative-card.is-active > a:hover
.ng-initiative-card__current-image {
    transform: scale(1.035);
}


/* Current year */

.ng-initiative-card__current-year {
    position: absolute;
    z-index: 5;

    top: 22px;
    right: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 8px 12px;

    border: 1px solid rgba(255, 255, 255, 0.42);
    border-radius: 999px;

    color: #214f31;
    background: rgba(255, 253, 244, 0.94);

    box-shadow:
        0 8px 22px rgba(20, 54, 31, 0.12);

    font-size: 10px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: 0.03em;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}


/* ==================================================
   OLDER PHOTO
================================================== */

.ng-initiative-card__past {
    position: absolute;
    z-index: 6;

    bottom: 20px;
    left: 20px;

    width: clamp(145px, 36%, 205px);

    margin: 0;
    padding: 7px 7px 0;

    overflow: hidden;

    border: 1px solid rgba(35, 78, 48, 0.13);
    border-radius: 17px;

    background: #fffdf9;

    box-shadow:
        0 18px 42px rgba(16, 43, 25, 0.29);

    transform: rotate(-2deg);
    transform-origin: bottom left;

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


.ng-initiative-card.is-active > a:hover
.ng-initiative-card__past {
    box-shadow:
        0 23px 50px rgba(16, 43, 25, 0.35);

    transform:
        rotate(0deg)
        translateY(-3px);
}


/* Prevent the generic card hover from zooming this image */

.ng-initiative-card__past img,
.ng-initiative-card.is-active > a:hover
.ng-initiative-card__past img {
    width: 100% !important;
    height: auto !important;

    display: block;

    aspect-ratio: 4 / 3;

    border-radius: 11px;

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

    transform: none !important;
}


/* Caption underneath the image */

.ng-initiative-card__past figcaption {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 8px 5px 9px;

    color: #68736b;

    font-size: 9px;
    line-height: 1.2;
}


.ng-initiative-card__past figcaption span {
    font-weight: 700;
}


.ng-initiative-card__past figcaption strong {
    color: #294e31;

    font-size: 10px;
    font-weight: 850;
}


/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {

    .ng-initiative-card__current-year {
        top: 14px;
        right: 14px;

        padding: 7px 10px;

        font-size: 9px;
    }


    .ng-initiative-card__past {
        bottom: 13px;
        left: 13px;

        width: clamp(125px, 42%, 165px);

        padding: 5px 5px 0;

        border-radius: 14px;
    }


    .ng-initiative-card__past img {
        border-radius: 9px;
    }


    .ng-initiative-card__past figcaption {
        padding: 7px 4px 8px;
    }

}


/* ==================================================
   DARK MODE
================================================== */

html[data-theme="dark"]
.ng-initiative-card__past {
    border-color: rgba(244, 241, 236, 0.12);
    background: #222824;

    box-shadow:
        0 18px 42px rgba(0, 0, 0, 0.38);
}


html[data-theme="dark"]
.ng-initiative-card__past figcaption {
    color: #aeb7b0;
}


html[data-theme="dark"]
.ng-initiative-card__past figcaption strong {
    color: #f4f1ec;
}

/* ==================================================
   NOORDBUITEN — CORRECTED 2023 PHOTO
================================================== */

.ng-initiative-card__past {
    position: absolute !important;
    z-index: 7 !important;

    right: 20px !important;
    bottom: 20px !important;
    left: auto !important;

    width: clamp(155px, 38%, 210px) !important;

    margin: 0 !important;
    padding: 7px !important;

    overflow: hidden !important;

    border: 1px solid rgba(35, 78, 48, 0.15) !important;
    border-radius: 17px !important;

    background: #fffdf9 !important;

    box-shadow:
        0 18px 42px
        rgba(16, 43, 25, 0.3) !important;

    transform: rotate(2deg) !important;
    transform-origin: bottom right !important;
}


/* Small photograph */

.ng-initiative-card__past img,
.ng-initiative-card:hover
.ng-initiative-card__past img {
    width: 100% !important;
    height: auto !important;

    display: block !important;

    aspect-ratio: 4 / 3;

    border-radius: 11px !important;

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

    transform: none !important;
}


/* Visible 2023 badge directly on the image */

.ng-initiative-card__past figcaption {
    position: absolute !important;
    z-index: 3 !important;

    right: 13px !important;
    bottom: 13px !important;
    left: auto !important;

    width: auto !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    margin: 0 !important;
    padding: 6px 9px !important;

    border: 1px solid rgba(255, 255, 255, 0.45) !important;
    border-radius: 999px !important;

    color: #294e31 !important;
    background: rgba(255, 253, 247, 0.95) !important;

    box-shadow:
        0 6px 16px
        rgba(20, 45, 28, 0.16) !important;

    font-size: 9px !important;
    font-weight: 850 !important;
    line-height: 1 !important;
    letter-spacing: 0.02em !important;

    white-space: nowrap !important;

    backdrop-filter: blur(7px);
    -webkit-backdrop-filter: blur(7px);
}


/* Hover movement */

.ng-initiative-card:hover
.ng-initiative-card__past {
    box-shadow:
        0 23px 50px
        rgba(16, 43, 25, 0.36) !important;

    transform:
        rotate(0deg)
        translateY(-3px) !important;
}


/* Mobile */

@media (max-width: 600px) {

    .ng-initiative-card__past {
        right: 13px !important;
        bottom: 13px !important;

        width: clamp(125px, 42%, 170px) !important;

        padding: 5px !important;

        border-radius: 14px !important;
    }


    .ng-initiative-card__past figcaption {
        right: 10px !important;
        bottom: 10px !important;

        padding: 5px 7px !important;

        font-size: 8px !important;
    }

}


/* Dark mode */

html[data-theme="dark"]
.ng-initiative-card__past {
    border-color:
        rgba(244, 241, 236, 0.12) !important;

    background: #222824 !important;
}