/*
Theme Name: NoordgroeiT + NoordbuiTen
Theme URI: https://www.noordgroeit.nl/
Author: Susan Aben
Description: Het gezamenlijke WordPress-thema voor NoordgroeiT en NoordbuiTen.
Version: 1.0.0
Text Domain: noordgroeit-merged
*/

/* NoordgroeiT + NoordbuiTen — Basis en huisstijl */
:root {
    --color-green: #3e6b47;
    --color-green-light: #e6f0e1;
    --color-orange: #c87f4a;
    --color-coral: #f06653;
    --color-cream: #f4f1ec;
    --color-dark: #2e3b32;
    --color-white: #ffffff;
    --font-primary: "Open Sans", Arial, sans-serif;
    --content-width: 1200px;
    --content-padding: clamp(20px, 4vw, 56px);
    --radius-small: 8px;
    --radius-medium: 18px;
    --radius-large: 32px;
    --shadow-soft: 0 14px 40px rgba(46, 59, 50, 0.12);
    --ng-section-title: clamp(2rem, 2.65vw, 2.8rem);

    --ng-text-body: clamp(1rem, .25vw + .95rem, 1.0625rem);
    --ng-text-support: .875rem;
    --ng-text-meta: .75rem;

    --ng-text-muted: rgba(46, 59, 50, .68);
    --ng-text-soft: rgba(46, 59, 50, .56);
    --ng-text-muted-light: rgba(255, 255, 255, .70);
    --ng-text-soft-light: rgba(255, 255, 255, .58);

    --ng-home-body: var(--ng-text-body);
}
*, *::before, *::after {
    box-sizing: border-box;
}
html {
    scroll-behavior: smooth;
}
body {
    margin: 0;
    color: var(--color-dark);
    background: var(--color-cream);
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.65;
}
img {
    display: block;
    max-width: 100%;
    height: auto;
}
a {
    color: var(--color-green);
}
button, input, textarea, select {
    font: inherit;
}
.site-container {
    width: min(calc(100% - (2 * var(--content-padding))), var(--content-width));
    margin-inline: auto;
}
.ng-site-header .site-container{
    --content-width: 1400px;
}
/* Toegankelijkheid */
.skip-link {
    position: fixed;
    top: 12px;
    left: 12px;
    z-index: 9999;
    padding: 12px 18px;
    color: var(--color-white);
    background: var(--color-dark);
    border-radius: var(--radius-small);
    transform: translateY(-150%);
}
.skip-link:focus {
    transform: translateY(0);
}
/* Nieuwe NoordgroeiT-header */
.ng-site-header {
    position: sticky;
    z-index: 1000;
    top: 0;
    padding: 14px 0;
    background: rgba(244, 241, 236, 0.94);
    border-bottom: 1px solid rgba(46, 59, 50, 0.07);
    backdrop-filter: blur(14px);
}
.admin-bar .ng-site-header {
    top: 32px;
}
.ng-header-shell {
    position: relative;
    min-height: 78px;
    display: flex;
    align-items: center;
    gap: clamp(22px, 3vw, 44px);
    padding: 9px 11px 9px 22px;
    background: var(--color-white);
    border: 1px solid rgba(46, 59, 50, 0.09);
    border-radius: 22px;
    box-shadow: 0 9px 34px rgba(46, 59, 50, 0.07);
}
.ng-header-logo {
    width: clamp(145px, 12vw, 180px);
    flex: 0 0 auto;
    display: block;
}
.ng-header-logo img {
    width: 100%;
    max-height: 58px;
    display: block;
    object-fit: contain;
    object-position: left center;
}
.ng-primary-navigation {
    margin-left: auto;
}
.ng-navigation-list {
    display: flex;
    align-items: center;
    gap: clamp(17px, 1.7vw, 29px);
    margin: 0;
    padding: 0;
    list-style: none;
}
.ng-navigation-list a {
    position: relative;
    display: block;
    padding: 18px 0;
    color: var(--color-dark);
    font-size: 0.94rem;
    font-weight: 750;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
}
.ng-navigation-list a::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 9px;
    left: 0;
    height: 3px;
    background: var(--color-coral);
    border-radius: 999px;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 180ms ease;
}
.ng-navigation-list a:hover::after, .ng-navigation-list a:focus-visible::after {
    transform: scaleX(1);
    transform-origin: left;
}
.ng-mobile-home {
    display: none;
}
.ng-header-actions {
    display: flex;
    align-items: center;
    gap: 16px;
}
.ng-support-link {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    color: var(--color-dark);
    font-size: 0.9rem;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
}
.ng-support-link span {
    color: var(--color-coral);
    font-size: 1rem;
    transition: transform 180ms ease;
}
.ng-support-link:hover span, .ng-support-link:focus-visible span {
    transform: scale(1.18);
}
.ng-header-button {
    min-height: 52px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 12px 22px;
    color: var(--color-white);
    background: var(--color-coral);
    border-radius: 15px;
    font-weight: 800;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
.ng-header-button:hover, .ng-header-button:focus-visible {
    color: var(--color-white);
    background: var(--color-dark);
    transform: translateY(-2px);
}
.ng-menu-toggle {
    display: none;
}
/* Nieuwe split hero */

















/* Hero image */




/* NoordbuiTen card */









/* Header and hero responsive */
@media (max-width: 1180px) {
    .ng-header-shell {
        min-height: 72px;
    }
    .ng-menu-toggle {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        gap: 9px;
        margin-left: auto;
        padding: 10px 14px;
        color: var(--color-dark);
        background: var(--color-cream);
        border: 0;
        border-radius: 13px;
        font: inherit;
        font-weight: 800;
        cursor: pointer;
    }
    .ng-menu-icon {
        width: 20px;
        display: grid;
        gap: 5px;
    }
    .ng-menu-icon span {
        width: 100%;
        height: 2px;
        display: block;
        background: currentColor;
        border-radius: 999px;
        transition: transform 180ms ease;
    }
    .ng-primary-navigation {
        position: absolute;
        top: calc(100% + 11px);
        right: 0;
        left: 0;
        display: none;
        padding: 18px;
        background: var(--color-white);
        border: 1px solid rgba(46, 59, 50, 0.1);
        border-radius: 19px;
        box-shadow: 0 20px 50px rgba(46, 59, 50, 0.14);
    }
    .ng-site-header.menu-is-open .ng-primary-navigation {
        display: block;
    }
    .ng-navigation-list {
        display: grid;
        gap: 3px;
    }
    .ng-navigation-list a {
        padding: 14px 15px;
        border-radius: 11px;
    }
    .ng-navigation-list a::after {
        content: none;
    }
    .ng-navigation-list a:hover, .ng-navigation-list a:focus-visible {
        background: var(--color-green-light);
    }
    .ng-mobile-home {
        display: block;
    }
    
}
@media (max-width: 860px) {
    .ng-support-link {
        display: none;
    }
    
    
    
    
}
@media (max-width: 782px) {
    .admin-bar .ng-site-header {
        top: 46px;
    }
}
@media (max-width: 620px) {
    .ng-site-header {
        padding: 9px 0;
    }
    .ng-header-shell {
        min-height: 65px;
        gap: 10px;
        padding: 7px 8px 7px 15px;
        border-radius: 17px;
    }
    .ng-header-logo {
        width: 130px;
    }
    .ng-header-button {
        display: none;
    }
    .ng-menu-toggle {
        margin-left: auto;
    }
    
    
    
    
    
    
    
    
    
    
    
    
}
/* Homepage: identiteit */


.eyebrow {
    margin: 0 0 14px;
    color: var(--color-orange);
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}


























/* Homepage responsive */


/* Standaard WordPress-inhoud */





/* Footer */
.site-footer {
    color: var(--color-white);
    background: var(--color-green);
}



.footer-column h2 {
    margin: 0 0 18px;
    color: var(--color-white);
    font-size: 1rem;
}
.footer-column p {
    color: var(--color-green-light);
}
.footer-column a{
    color: var(--color-white);
    font-weight: 700;
}


.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}

.footer-bottom p {
    margin: 0;
    color: var(--color-green-light);
    font-size: 0.86rem;
}
/* Responsive */

@media (max-width: 640px) {
    
    
     .button {
        width: 100%;
    }
    
}
/* Homepage: in de praktijk */















/* Concrete voortgang */













/* NoordgroeiT is breder dan NoordbuiTen */






/* Responsive */



/* Homepage: meedoen en vrijwilligersverhaal */






/* Afbeelding */




/* Vrijwilligersverhaal */










/* Verwachtingen */


.expectation-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
}
.expectation-card {
    padding: clamp(26px, 4vw, 40px);
    color: var(--color-dark);
    background: var(--color-white);
    border-radius: var(--radius-medium);
}
.expectation-card:nth-child(2) {
    background: var(--color-green-light);
}
.expectation-card:nth-child(3) {
    background: #ffd7cc;
}

.expectation-card h3 {
    margin: 0 0 15px;
    color: var(--color-dark);
    font-size: clamp(1.3rem, 2vw, 1.75rem);
    letter-spacing: -0.035em;
    line-height: 1.1;
}
.expectation-card p {
    margin: 0;
}
/* Afsluitende oproep */
.join-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 44px;
    margin-top: 28px;
    padding: clamp(30px, 5vw, 52px);
    background: var(--color-green);
    border-radius: var(--radius-large);
}

.join-action h3 {
    margin: 0;
    color: var(--color-white);
    font-size: clamp(1.7rem, 3vw, 2.7rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
}


/* Responsive */
@media (max-width: 1000px) {
    
    
    .join-action {
        grid-template-columns: 1fr;
    }
    
}
@media (max-width: 760px) {
     .expectation-grid {
        grid-template-columns: 1fr;
    }
    
    
    
}

/* Homepage: nieuws en agenda */





/* Nieuws */





















/* Agenda */


















/* Lege situaties */






/* Responsive */



/* Homepage: netwerk en partners */






/* NoordbuiTen */










/* Partnerwand */












/* Afsluitende partneroproep */





/* Responsive */



/* Homepage: afsluitende call-to-action */




















/* Gezamenlijke footer */
.site-footer {
    padding: clamp(70px, 9vw, 110px) 0 28px;
    color: rgba(255, 255, 255, 0.76);
    background: var(--color-dark);
}
.footer-main {
    display: grid;
    grid-template-columns: minmax(280px, 1.3fr) minmax(150px, 0.65fr) minmax(150px, 0.65fr) minmax(230px, 0.9fr);
    gap: clamp(35px, 5vw, 72px);
}
.footer-identity {
    max-width: 420px;
}
.footer-logo {
    width: min(100%, 285px);
    min-height: 112px;
    display: grid;
    place-items: center;
    margin-bottom: 28px;
    padding: 21px 25px;
    background: var(--color-cream);
    border-radius: var(--radius-medium);
}
.footer-logo img {
    width: 100%;
    max-height: 82px;
    object-fit: contain;
}
.footer-identity > p {
    margin: 0;
    line-height: 1.7;
}
.footer-organisation-note {
    margin-top: 20px !important;
    padding-left: 17px;
    color: var(--color-green-light);
    border-left: 3px solid var(--color-coral);
    font-size: 0.88rem;
}
.footer-column h2 {
    margin: 0 0 24px;
    color: var(--color-white);
    font-size: 0.76rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
.footer-column ul {
    display: grid;
    gap: 13px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.footer-column a {
    color: rgba(255, 255, 255, 0.76);
    text-decoration: none;
    transition: color 180ms ease, transform 180ms ease;
}
.footer-column li a {
    display: inline-block;
}
.footer-column a:hover, .footer-column a:focus-visible {
    color: var(--color-white);
}
.footer-column li a:hover, .footer-column li a:focus-visible {
    transform: translateX(4px);
}
.footer-newsletter p {
    margin: 0 0 23px;
    line-height: 1.65;
}

 .footer-noordbuiten-copy a span {
    transition: transform 180ms ease;
}
 .footer-noordbuiten-copy a:hover span, .footer-noordbuiten-copy a:focus-visible span {
    transform: translateX(5px);
}
/* NoordbuiTen in footer */
.footer-noordbuiten {
    display: grid;
    grid-template-columns: minmax(230px, 0.65fr) minmax(0, 1.35fr);
    align-items: center;
    gap: clamp(28px, 5vw, 65px);
    margin-top: clamp(55px, 8vw, 90px);
    padding: clamp(28px, 5vw, 48px);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-large);
}
.footer-noordbuiten-logo {
    min-height: 145px;
    display: grid;
    place-items: center;
    padding: 25px;
    background: var(--color-green-light);
    border-radius: var(--radius-medium);
}
.footer-noordbuiten-logo img {
    width: 100%;
    max-width: 285px;
    max-height: 110px;
    object-fit: contain;
}
.footer-small-label {
    margin: 0 0 9px;
    color: var(--color-coral);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.footer-noordbuiten-copy h2 {
    max-width: 690px;
    margin: 0 0 22px;
    color: var(--color-white);
    font-size: clamp(1.55rem, 3vw, 2.5rem);
    letter-spacing: -0.04em;
    line-height: 1.08;
}
.footer-noordbuiten-copy a {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding-bottom: 4px;
    color: var(--color-white);
    border-bottom: 2px solid currentColor;
    font-weight: 800;
    text-decoration: none;
}
.footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 25px;
    margin-top: 34px;
    padding-top: 25px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    font-size: 0.78rem;
}
.footer-bottom p {
    margin: 0;
}
/* Responsive */
@media (max-width: 1050px) {
    
    
    .footer-main {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
@media (max-width: 700px) {
    
    
    .footer-main, .footer-noordbuiten {
        grid-template-columns: 1fr;
    }
    .footer-identity {
        max-width: none;
    }
}
@media (max-width: 520px) {
    
    
    .footer-main {
        gap: 42px;
    }
    .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* Homepage: introductie en missie */












/* Vier thema’s */
/* Relatie NoordgroeiT en NoordbuiTen */








/* Visuele organisatiestructuur */









/* Responsive */


/* Header language switcher */
.ng-header-actions {
    gap: 12px;
}
.ng-language-switcher {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 4px;
    background: var(--color-cream);
    border: 1px solid rgba(46, 59, 50, 0.09);
    border-radius: 12px;
}
.ng-language-switcher .ng-language-option {
    position: static;
    min-width: 34px;
    min-height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 8px;
    color: rgba(46, 59, 50, 0.58);
    border-radius: 9px;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.05em;
    line-height: 1;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease;
}
.ng-language-switcher .ng-language-option::after {
    content: none;
}
.ng-language-switcher a.ng-language-option:hover, .ng-language-switcher a.ng-language-option:focus-visible {
    color: var(--color-dark);
    background: var(--color-green-light);
}
.ng-language-switcher .ng-language-option.is-current {
    color: var(--color-white);
    background: var(--color-dark);
}
.ng-language-divider {
    color: rgba(46, 59, 50, 0.25);
    font-size: 0.7rem;
    font-weight: 700;
}
.ng-language-option.is-disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.ng-mobile-language {
    display: none;
}
/* Language switch inside the mobile menu */
@media (max-width: 1180px) {
    
    .ng-mobile-language {
        display: block;
        margin-top: 10px;
        padding-top: 14px;
        border-top: 1px solid rgba(46, 59, 50, 0.1);
    }
    
    .ng-mobile-language .ng-language-option {
        min-width: 46px;
        min-height: 40px;
        padding: 9px 12px;
    }
    .ng-mobile-language .ng-language-option:hover, .ng-mobile-language .ng-language-option:focus-visible {
        background: var(--color-green-light);
    }
    .ng-mobile-language .ng-language-option.is-current {
        color: var(--color-white);
        background: var(--color-dark);
    }
}
/* Nieuwe open homepagehero */



/* Hero text */
















/* Hero photography */








/* NoordbuiTen connection */





/* Responsive hero */


/* Rustige homepagehero */


/* Photograph */


/* Readability gradient */

/* Hero content */






/* Primary action */




/* Quiet secondary action */


/* Small scroll cue */



/* Tablet */

/* Mobile */

/* Respect reduced-motion settings */

/* Editorial hero: tekst boven brede foto */
.ng-editorial-hero {
    position: relative;
    padding: clamp(42px, 5vw, 70px) 0 clamp(90px, 10vw, 140px);
    overflow: hidden;
    background: var(--color-cream);
}
.ng-editorial-hero-copy {
    max-width: 790px;
    margin: 0 auto;
    text-align: center;
}
.ng-editorial-hero-label {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 18px;
    color: var(--color-coral);
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    line-height: 1.3;
    text-transform: uppercase;
}
.ng-editorial-hero-label span {
    width: 7px;
    height: 7px;
    display: block;
    background: currentColor;
    border-radius: 50%;
}
.ng-editorial-hero-copy h1 {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(2.8rem, 4.5vw, 4rem);
    letter-spacing: -0.055em;
    line-height: 1.02;
    text-wrap: balance;
}


/* Main action */




/* Quiet secondary action */


/* Wide photograph */
.ng-editorial-hero-photo {
    position: relative;
    height: clamp(390px, 33vw, 510px);
    margin: clamp(42px, 5vw, 65px) 0 0;
    overflow: hidden;
    background: var(--color-green-light);
    border-radius: clamp(23px, 2.5vw, 32px);
    box-shadow: 0 24px 65px rgba(46, 59, 50, 0.14);
}
.ng-editorial-hero-photo::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    left: clamp(25px, 4vw, 58px);
    width: clamp(48px, 6vw, 84px);
    height: 7px;
    background: var(--color-coral);
    border-radius: 0 0 999px 999px;
}
.ng-editorial-hero-photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center 66%;
    transition: transform 900ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.ng-editorial-hero-photo:hover img {
    transform: scale(1.018);
}
/* Tablet */
@media (max-width: 850px) {
    .ng-editorial-hero-copy {
        max-width: 680px;
    }
    .ng-editorial-hero-photo {
        height: min(58vw, 500px);
    }
    .ng-editorial-hero-photo img {
        object-position: 64% 66%;
    }
}
/* Mobile */
@media (max-width: 560px) {
    .ng-editorial-hero {
        padding-top: 34px;
    }
    .ng-editorial-hero-copy {
        text-align: left;
    }
    .ng-editorial-hero-copy h1 {
        max-width: 390px;
        font-size: clamp(2.55rem, 12vw, 3.2rem);
    }
    
    
    .ng-editorial-hero-photo {
        height: 400px;
        margin-top: 38px;
        border-radius: 21px;
    }
    .ng-editorial-hero-photo img {
        object-position: 70% 65%;
    }
}
/* Homepage: foto achter tekst en header */
/* Header floats over the hero on the homepage */
body.home .ng-site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    padding: 14px 0;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
/* Slightly transparent at the top so the photo remains visible */
body.home .ng-header-shell {
    background: rgba(244, 241, 236, 0.72);
    border-color: rgba(255, 255, 255, 0.42);
    box-shadow: 0 9px 34px rgba(31, 46, 37, 0.09);
    backdrop-filter: blur(13px);
    transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
/* Return to the existing header appearance after scrolling */
/* Full photograph hero */

/* The photograph fills the complete hero */

/* Local light-green veil: strong behind text, open over the photo */

/* Hero text */









/* Existing soft curve at the bottom */



/* Tablet and mobile */


/* Homepage: editorial photo behind text and header */
/* Transparent header at the top */
body.home .ng-site-header {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    padding: 14px 0;
    background: transparent;
    border-bottom-color: transparent;
    backdrop-filter: none;
    transition: background-color 240ms ease, border-color 240ms ease, backdrop-filter 240ms ease;
}
body.home.admin-bar .ng-site-header {
    top: 32px;
}
body.home .ng-header-shell {
    background: rgba(244, 241, 236, 0.72);
    border-color: rgba(255, 255, 255, 0.5);
    box-shadow: 0 10px 35px rgba(31, 46, 37, 0.1);
    backdrop-filter: blur(14px);
    transition: background-color 240ms ease, border-color 240ms ease, box-shadow 240ms ease;
}
/* Existing solid header after scrolling */
body.home .ng-site-header.is-scrolled {
    background: rgba(244, 241, 236, 0.94);
    border-bottom-color: rgba(46, 59, 50, 0.07);
    backdrop-filter: blur(14px);
}
body.home .ng-site-header.is-scrolled .ng-header-shell, body.home .ng-site-header.menu-is-open .ng-header-shell {
    background: var(--color-white);
    border-color: rgba(46, 59, 50, 0.09);
    box-shadow: 0 9px 34px rgba(46, 59, 50, 0.07);
}
/* Complete opening hero */
body.home .ng-editorial-hero {
    position: relative;
    isolation: isolate;
    min-height: clamp(760px, 100svh, 960px);
    display: flex;
    align-items: center;
    padding: clamp(175px, 20vh, 215px) 0 clamp(130px, 15vh, 165px);
    overflow: hidden;
    background: var(--color-green-light);
}
/* Allow the photograph to cover the complete section */
body.home .ng-editorial-hero .site-container {
    position: static;
}
body.home .ng-editorial-hero-photo {
    position: absolute;
    z-index: -2;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: var(--color-green-light);
    border-radius: 0;
    box-shadow: none;
}
body.home .ng-editorial-hero-photo::before {
    content: none;
}
body.home .ng-editorial-hero-photo img {
    position: absolute;
    inset: 0;
    width: 100%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    object-position: center 58%;
    filter: saturate(0.9) contrast(1.02);
    transform: scale(1.015);
}
body.home .ng-editorial-hero-photo:hover img {
    transform: scale(1.015);
}
/* Soft light area behind the text */
body.home .ng-editorial-hero::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: radial-gradient(ellipse 58% 53% at 50% 42%, rgba(244, 241, 236, 0.96) 0%, rgba(238, 241, 230, 0.84) 35%, rgba(230, 240, 225, 0.42) 58%, rgba(230, 240, 225, 0) 78%), linear-gradient(180deg, rgba(244, 241, 236, 0.64) 0%, rgba(244, 241, 236, 0.18) 30%, rgba(31, 46, 37, 0.03) 68%, rgba(31, 46, 37, 0.2) 100%);
    pointer-events: none;
}
/* Text remains calm and central */
body.home .ng-editorial-hero-copy {
    position: relative;
    z-index: 2;
    max-width: 820px;
    margin-inline: auto;
    text-align: center;
}
body.home .ng-editorial-hero-label {
    margin-bottom: 20px;
    color: var(--color-coral);
    text-shadow: 0 1px 10px rgba(244, 241, 236, 0.9);
}
body.home .ng-editorial-hero-copy h1 {
    max-width: 820px;
    margin-inline: auto;
    color: var(--color-dark);
    font-size: clamp(3.3rem, 5.5vw, 5.4rem);
    line-height: 0.96;
    text-shadow: 0 2px 18px rgba(244, 241, 236, 0.75);
}


/* Mobile and tablet */
@media (max-width: 850px) {
    body.home .ng-editorial-hero {
        min-height: 780px;
        align-items: flex-end;
        padding: 155px 0 115px;
    }
    body.home .ng-editorial-hero-photo img {
        object-position: 64% center;
    }
    body.home .ng-editorial-hero::before {
        background: linear-gradient(180deg, rgba(244, 241, 236, 0.5) 0%, rgba(244, 241, 236, 0.16) 28%, rgba(230, 240, 225, 0.72) 56%, rgba(244, 241, 236, 0.97) 100%);
    }
    body.home .ng-editorial-hero-copy {
        max-width: 650px;
        margin-left: 0;
        text-align: left;
    }
    body.home .ng-editorial-hero-copy h1{
        margin-left: 0;
    }
    
}
@media (max-width: 782px) {
    body.home.admin-bar .ng-site-header {
        top: 46px;
    }
}
@media (max-width: 560px) {
    body.home .ng-site-header {
        padding: 9px 0;
    }
    body.home .ng-editorial-hero {
        min-height: 740px;
        padding: 135px 0 90px;
    }
    body.home .ng-editorial-hero-photo img {
        object-position: 67% center;
    }
    body.home .ng-editorial-hero-copy h1 {
        font-size: clamp(3rem, 14vw, 4.15rem);
    }
    
}
/* Hero refinement: clean photograph, no light spotlight */
/* One consistent tint across the photograph */
body.home .ng-editorial-hero::before {
    background: linear-gradient(180deg, rgba(25, 39, 30, 0.30) 0%, rgba(25, 39, 30, 0.24) 38%, rgba(25, 39, 30, 0.42) 100%);
}
/* Strong, clear white typography */
body.home .ng-editorial-hero-copy {
    max-width: 1100px;
}
body.home .ng-editorial-hero-label {
    color: #ffd0c8;
    text-shadow: 0 2px 12px rgba(20, 33, 25, 0.32);
}
body.home .ng-editorial-hero-copy h1 {
    max-width: 1100px;
    color: var(--color-white);
    font-size: clamp(3.3rem, 4.7vw, 5.35rem);
    line-height: 0.98;
    white-space: nowrap;
    text-shadow: 0 3px 24px rgba(20, 33, 25, 0.38);
}



/* Tablet and mobile */
@media (max-width: 1000px) {
    body.home .ng-editorial-hero-copy h1 {
        white-space: normal;
    }
}
@media (max-width: 850px) {
    body.home .ng-editorial-hero::before {
        background: linear-gradient(180deg, rgba(25, 39, 30, 0.20) 0%, rgba(25, 39, 30, 0.34) 38%, rgba(25, 39, 30, 0.76) 100%);
    }
}
/* Show more of the panorama */
body.home .ng-editorial-hero {
    min-height: clamp(700px, 82svh, 820px);
}
body.home .ng-editorial-hero-photo img, body.home .ng-editorial-hero-photo:hover img {
    object-position: center center;
    transform: none;
}
/* Keep enough height on smaller screens */
@media (max-width: 850px) {
    body.home .ng-editorial-hero {
        min-height: 760px;
    }
}
@media (max-width: 560px) {
    body.home .ng-editorial-hero {
        min-height: 720px;
    }
}
/* Hero: calmer text, scroll cue and dotted divider */
/* Tighter text composition */
body.home .ng-editorial-hero-copy {
    max-width: 850px;
}
body.home .ng-editorial-hero-label {
    margin-bottom: 14px;
}
body.home .ng-editorial-hero-copy h1 {
    max-width: 850px;
    font-size: clamp(2.65rem, 3.8vw, 3.55rem);
    line-height: 1;
    letter-spacing: -0.045em;
    white-space: normal;
}


/* Animated “scroll omlaag” cue */
body.home .ng-editorial-hero-copy::after {
    content: "SCROLL OMLAAG";
    position: absolute;
    top: calc(100% + 48px);
    left: 50%;
    width: 140px;
    padding-top: 42px;
    color: rgba(255, 255, 255, 0.78);
    background: linear-gradient(rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.58)) center top / 1px 31px no-repeat;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    line-height: 1;
    text-align: center;
    transform: translateX(-50%);
}
body.home .ng-editorial-hero-copy::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: calc(100% + 51px);
    left: calc(50% - 3px);
    width: 6px;
    height: 6px;
    background: var(--color-coral);
    border-radius: 50%;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.22);
    animation: ng-editorial-scroll-dot 1.8s ease-in-out infinite;
}
@keyframes ng-editorial-scroll-dot {
    0% {
        opacity: 0;
        transform: translateY(0);
    }
    25% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translateY(23px);
    }
}
/* Fine line and coral dot between hero and next section */
body.home .ng-editorial-hero::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    left: 0;
    height: 38px;
    background: radial-gradient(circle at 50% 18px, var(--color-coral) 0 5px, var(--color-cream) 6px 9px, transparent 10px), linear-gradient(to bottom, transparent 17px, rgba(244, 241, 236, 0.9) 17px, rgba(244, 241, 236, 0.9) 19px, transparent 19px);
    pointer-events: none;
}
/* Keep mobile calmer */
@media (max-width: 850px) {
    body.home .ng-editorial-hero-copy h1 {
        font-size: clamp(2.65rem, 8vw, 3.5rem);
    }
}
@media (prefers-reduced-motion: reduce) {
    body.home .ng-editorial-hero-copy::before {
        animation: none;
    }
}
/* Hero: asymmetric editorial composition */
body.home .ng-editorial-hero {
    overflow: visible;
    margin-bottom: 56px;
}
/* Darker toward the text, without a spotlight */
body.home .ng-editorial-hero::before {
    background: linear-gradient(90deg, rgba(25, 39, 30, 0.55) 0%, rgba(25, 39, 30, 0.38) 38%, rgba(25, 39, 30, 0.16) 72%, rgba(25, 39, 30, 0.25) 100%), linear-gradient(180deg, rgba(25, 39, 30, 0.12) 0%, rgba(25, 39, 30, 0.34) 100%);
}
/* Align content with the wider header */
body.home .ng-editorial-hero .site-container {
    --content-width: 1400px;
}
/* Left-hand editorial text */
body.home .ng-editorial-hero-copy {
    position: static;
    max-width: 690px;
    margin: 25px 0 0;
    padding-left: clamp(25px, 3vw, 42px);
    border-left: 5px solid var(--color-coral);
    text-align: left;
}
body.home .ng-editorial-hero-label {
    justify-content: flex-start;
    margin-bottom: 16px;
    color: #ffd0c8;
}
body.home .ng-editorial-hero-copy h1 {
    max-width: 650px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3.25rem, 4.3vw, 4.7rem);
    letter-spacing: -0.055em;
    line-height: 0.94;
    text-align: left;
    text-wrap: balance;
    white-space: normal;
}


/* Keep scroll cue centred in the whole hero */
body.home .ng-editorial-hero-copy::after {
    z-index: 3;
    top: auto;
    right: auto;
    bottom: 45px;
    left: 50%;
}
body.home .ng-editorial-hero-copy::before {
    z-index: 4;
    top: auto;
    right: auto;
    bottom: 86px;
    left: calc(50% - 3px);
}
/* Divider now lives below the photograph */
body.home .ng-editorial-hero::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: auto;
    bottom: -46px;
    left: 50%;
    width: min(calc(100% - (2 * var(--content-padding))), 1400px);
    height: 34px;
    background: radial-gradient(circle at 50% 17px, var(--color-coral) 0 5px, var(--color-cream) 6px 9px, transparent 10px), linear-gradient(to bottom, transparent 16px, rgba(62, 107, 71, 0.28) 16px, rgba(62, 107, 71, 0.28) 18px, transparent 18px);
    transform: translateX(-50%);
    pointer-events: none;
}
/* Tablet and mobile */
@media (max-width: 850px) {
    body.home .ng-editorial-hero {
        margin-bottom: 48px;
    }
    body.home .ng-editorial-hero::before {
        background: linear-gradient(180deg, rgba(25, 39, 30, 0.16) 0%, rgba(25, 39, 30, 0.43) 42%, rgba(25, 39, 30, 0.78) 100%);
    }
    body.home .ng-editorial-hero-copy {
        max-width: 620px;
        margin-top: 0;
        padding-left: 25px;
        border-left-width: 4px;
    }
    body.home .ng-editorial-hero-copy h1 {
        max-width: 560px;
        font-size: clamp(2.8rem, 8vw, 3.7rem);
    }
    body.home .ng-editorial-hero-copy::before, body.home .ng-editorial-hero-copy::after {
        display: none;
    }
    body.home .ng-editorial-hero::after {
        bottom: -40px;
    }
}
@media (max-width: 560px) {
    body.home .ng-editorial-hero-copy {
        padding-left: 19px;
        border-left-width: 3px;
    }
    body.home .ng-editorial-hero-copy h1 {
        font-size: clamp(2.65rem, 12vw, 3.35rem);
    }
}
/* Divider exactly on the bottom edge of the hero */
body.home .ng-editorial-hero {
    margin-bottom: 0;
    overflow: visible;
}
body.home .ng-editorial-hero::after {
    content: "";
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: -10px;
    left: 0;
    width: 100%;
    height: 20px;
    background: radial-gradient(circle at 50% 10px, var(--color-coral) 0 5px, var(--color-cream) 6px 9px, transparent 10px), linear-gradient(to bottom, transparent 9px, rgba(244, 241, 236, 0.9) 9px, rgba(244, 241, 236, 0.9) 11px, transparent 11px);
    transform: none;
    pointer-events: none;
}
/* Keep the divider visible at the hero’s bottom edge */
body.home .ng-editorial-hero::after {
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 18px;
    background: radial-gradient(circle at 50% 12px, var(--color-coral) 0 5px, var(--color-cream) 6px 9px, transparent 10px), linear-gradient(to bottom, transparent 11px, rgba(244, 241, 236, 0.92) 11px, rgba(244, 241, 236, 0.92) 13px, transparent 13px);
    transform: none;
}
/* Actual divider on the exact bottom edge */
body.home .ng-editorial-hero {
    position: relative;
    z-index: 2;
    overflow: visible;
    margin-bottom: 0;
    border-bottom: 2px solid rgba(244, 241, 236, 0.92);
}
/* Keep the following section behind the divider */
body.home .ng-editorial-hero + * {
    position: relative;
    z-index: 1;
}
/* Dot centred directly on the border */
body.home .ng-editorial-hero::after {
    content: "";
    position: absolute;
    z-index: 5;
    right: auto;
    bottom: -9px;
    left: 50%;
    width: 18px;
    height: 18px;
    background: var(--color-coral);
    border: 4px solid var(--color-cream);
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}
/* Intro section: warm editorial opening */

/* Softer, more organic background shape */

/* Main composition */

/* Small section label */


/* More controlled heading */


/* Handmade coral stroke */

/* Right-hand explanation */





/* Responsive */


/* Over ons: editorial manifesto */

/* Remove previous decorative experiments */

/* Compact opening statement */







/* Themes become flowing manifesto rows */
/* Remove redundant NoordgroeiT–NoordbuiTen card */

/* Responsive */

/* NoordgroeiT story system: de groeilijn */

/* Calm introductory composition */










/* Quiet text link */



/* The growth journey */



/* Hand-drawn-feeling connecting line */


/* Three unboxed moments */










/* Outcomes without cards */






/* Tablet */

/* Mobile */

/* Reduced motion */

/* Homepage About: civic editorial identity */

/* Opening statement */







/* Origin story */

/* Founding-date seal */




/* Story text */





/* Text link */



/* The belief: not a card, just a strong voice */



/* Full-width role statement */






/* Tablet */

/* Mobile */

/* Initiatieven: typographic project index */
/* Section introduction */
/* Full-width project rows */
/* Large background word */
/* Number and type */
/* Project title and description */
/* Circular action */
/* Tablet */
/* Mobile */
/* PHOTOGRAPHIC ABOUT + INITIATIVES */


/* ABOUT */







/* About photography */










/* About story */












/* INITIATIVES */
/* Initiative rows */
/* Initiative footer */
/* RESPONSIVE */




/* COMMUNITY FIELD STORY */

.ng-field-kicker {
    margin: 0;
    color: #d76845;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ng-field-intro {
    display: grid;
    grid-template-columns: 180px minmax(0, 1fr) minmax(270px, 0.52fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: end;
    margin-bottom: clamp(3rem, 6vw, 5.5rem);
}
.ng-field-intro h2 {
    max-width: 690px;
    margin: 0;
    color: #29382f;
    font-size: clamp(3.5rem, 6vw, 6.6rem);
    font-weight: 760;
    line-height: 0.91;
    letter-spacing: -0.065em;
}
.ng-field-intro h2 span {
    display: block;
    color: #4d7445;
}



.ng-field-photo {
    position: relative;
    margin: 0;
}
.ng-field-photo::before {
    position: absolute;
    top: -0.55rem;
    left: clamp(2rem, 7vw, 7rem);
    z-index: 2;
    width: 4rem;
    height: 0.55rem;
    border-radius: 10rem;
    background: #f26452;
    content: "";
}
.ng-field-photo img {
    display: block;
    width: 100%;
    aspect-ratio: 2 / 1;
    border-radius: 1.8rem 1.8rem 0.4rem 1.8rem;
    object-fit: cover;
    object-position: center 48%;
}
.ng-field-photo figcaption {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    padding-top: 0.9rem;
    color: #68736c;
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
/* RESPONSIVE */
@media (max-width: 980px) {
    .ng-field-intro {
        grid-template-columns: 140px minmax(0, 1fr);
    }
    
}
@media (max-width: 720px) {
    
    .ng-field-intro {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    
    .ng-field-intro h2 {
        font-size: clamp(3.2rem, 14vw, 4.7rem);
    }
    .ng-field-photo img {
        aspect-ratio: 4 / 3;
        border-radius: 1.3rem 1.3rem 0.35rem 1.3rem;
    }
    .ng-field-photo figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.35rem;
    }
}
/* CALMER SECTION TYPOGRAPHY */
.ng-field-intro h2 {
    max-width: 590px;
    font-size: clamp(2.5rem, 3.7vw, 4.15rem);
    font-weight: 720;
    line-height: 0.98;
    letter-spacing: -0.045em;
}
/* Slightly calmer spacing around the headings */
.ng-field-intro {
    margin-bottom: clamp(2.5rem, 4.5vw, 4rem);
}
/* Mobile */
@media (max-width: 720px) {
    .ng-field-intro h2 {
        max-width: 520px;
        font-size: clamp(2.35rem, 10vw, 3.25rem);
        line-height: 1;
    }
}
/* NOORD IN CIJFERS */
.ng-number-strip {
    position: relative;
    overflow: hidden;
    padding: clamp(2.7rem, 4.5vw, 4.25rem) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
    border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    background: #293d31;
    color: #fff;
}
.ng-number-strip::before {
    position: absolute;
    top: 0;
    left: 50%;
    width: 0.85rem;
    height: 0.85rem;
    border: 0.22rem solid #f4f0e8;
    border-radius: 50%;
    background: #f26452;
    content: "";
    transform: translate(-50%, -50%);
}
.ng-number-strip-label {
    margin: 0 0 1.8rem;
    color: #f3a28c;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.ng-number-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
.ng-number-item {
    min-width: 0;
    padding: 0 clamp(1.4rem, 3vw, 3.25rem);
    border-left: 1px solid rgba(255, 255, 255, 0.16);
}
.ng-number-item:first-child {
    padding-left: 0;
    border-left: 0;
}
.ng-number-item:last-child {
    padding-right: 0;
}
.ng-number-item strong {
    display: block;
    margin-bottom: 0.65rem;
    color: #fff;
    font-size: clamp(2.45rem, 4vw, 4.2rem);
    font-weight: 730;
    line-height: 0.95;
    letter-spacing: -0.055em;
    font-variant-numeric: tabular-nums;
}
.ng-number-item p {
    max-width: 190px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.45;
}
/* Subtle animation finishing state */
.ng-number-item strong span {
    display: inline-block;
}
.ng-number-strip.is-counting .ng-number-item strong span {
    animation: ng-number-settle 600ms ease both;
}
.ng-number-item:nth-child(2) strong span {
    animation-delay: 60ms;
}
.ng-number-item:nth-child(3) strong span {
    animation-delay: 120ms;
}
.ng-number-item:nth-child(4) strong span {
    animation-delay: 180ms;
}
@keyframes ng-number-settle {
    0% {
        transform: translateY(0.3rem);
        opacity: 0.45;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* Tablet */
@media (max-width: 820px) {
    .ng-number-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        row-gap: 2.5rem;
    }
    .ng-number-item:nth-child(3) {
        padding-left: 0;
        border-left: 0;
    }
}
/* Mobile */
@media (max-width: 480px) {
    .ng-number-strip {
        padding: 3rem 0;
    }
    .ng-number-grid {
        column-gap: 1.25rem;
        row-gap: 2.5rem;
    }
    .ng-number-item {
        padding: 0 0 0 1.25rem;
    }
    .ng-number-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
    .ng-number-item strong {
        font-size: clamp(2.25rem, 12vw, 3.2rem);
    }
    .ng-number-item p {
        font-size: 0.72rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ng-number-strip.is-counting .ng-number-item strong span {
        animation: none;
    }
}
/* NOORDBUITEN STORY */
.ng-nb-story {
    position: relative;
    overflow: hidden;
    padding: clamp(5rem, 9vw, 9rem) 0;
    background: #dde8d8;
    color: #29382f;
}
.ng-nb-story::before {
    position: absolute;
    top: clamp(4rem, 8vw, 8rem);
    right: -7rem;
    width: 19rem;
    height: 19rem;
    border: 1px solid rgba(72, 113, 65, 0.17);
    border-radius: 50%;
    content: "";
}
.ng-nb-story::after {
    position: absolute;
    top: clamp(9rem, 16vw, 16rem);
    right: 2.5rem;
    width: 0.8rem;
    height: 0.8rem;
    border-radius: 50%;
    background: #f26452;
    content: "";
}
/* Introduction */

.ng-nb-identity {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
}
.ng-nb-identity p {
    margin: 0 0 1.75rem;
    color: #68776c;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.ng-nb-identity img {
    display: block;
    width: min(100%, 290px);
    max-height: 125px;
    object-fit: contain;
    object-position: left center;
}

.ng-nb-copy {
    max-width: 720px;
}
.ng-nb-copy h2 {
    max-width: 680px;
    margin: 0 0 1.5rem;
    color: #29382f;
    font-size: clamp(2.35rem, 3.7vw, 4.1rem);
    font-weight: 720;
    line-height: 0.99;
    letter-spacing: -0.045em;
}





/* Photographic sequence */
.ng-nb-gallery {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1.45fr) minmax(210px, 0.55fr) minmax(210px, 0.55fr);
    gap: clamp(0.8rem, 1.6vw, 1.35rem);
    align-items: stretch;
}
.ng-nb-photo {
    position: relative;
    min-width: 0;
    margin: 0;
    overflow: hidden;
    background: #b8c9b4;
}



.ng-nb-photo::after {
    position: absolute;
    inset: 45% 0 0;
    background: linear-gradient(to bottom, transparent, rgba(24, 40, 29, 0.82));
    content: "";
    pointer-events: none;
}
.ng-nb-photo img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 750ms cubic-bezier(0.2, 0.75, 0.25, 1);
}



.ng-nb-photo:hover img {
    transform: scale(1.025);
}
.ng-nb-photo figcaption {
    position: absolute;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    left: clamp(1rem, 2vw, 1.75rem);
    z-index: 2;
    color: rgba(255, 255, 255, 0.84);
    font-size: 0.75rem;
    font-weight: 650;
    line-height: 1.45;
}
.ng-nb-photo figcaption span {
    display: block;
    margin-bottom: 0.35rem;
    color: #fff;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
/* Closing line */
.ng-nb-footer {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 7vw, 7rem);
    align-items: center;
    margin-top: clamp(2.5rem, 4vw, 4rem);
    padding-top: clamp(2rem, 3vw, 3rem);
    border-top: 1px solid rgba(41, 56, 47, 0.2);
}
.ng-nb-footer > p {
    max-width: 660px;
    margin: 0;
    color: #59685e;
    font-size: 1rem;
    line-height: 1.7;
}
.ng-nb-footer > p strong {
    display: block;
    margin-bottom: 0.25rem;
    color: #29382f;
    font-size: clamp(1.3rem, 1.8vw, 1.7rem);
    letter-spacing: -0.025em;
}
.ng-nb-footer ul {
    display: flex;
    flex-wrap: wrap;
    gap: 0.65rem;
    justify-content: flex-end;
    margin: 0;
    padding: 0;
    list-style: none;
}
.ng-nb-footer li {
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    color: #487141;
    font-size: 0.72rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}
.ng-nb-footer li:not(:last-child)::after {
    width: 0.3rem;
    height: 0.3rem;
    border-radius: 50%;
    background: #f26452;
    content: "";
}
/* Tablet */
@media (max-width: 900px) {
    
    .ng-nb-gallery {
        grid-template-columns: minmax(0, 1.35fr) minmax(190px, 0.65fr);
    }
    
    
    
    
}
/* Mobile */
@media (max-width: 680px) {
    .ng-nb-story {
        padding: 4.5rem 0;
    }
    
    .ng-nb-identity img {
        width: min(70%, 250px);
    }
    .ng-nb-copy h2 {
        max-width: 520px;
        font-size: clamp(2.25rem, 10vw, 3.25rem);
    }
    .ng-nb-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    
    
    
    
    .ng-nb-footer {
        grid-template-columns: 1fr;
    }
    .ng-nb-footer ul {
        justify-content: flex-start;
    }
}
/* Small phones */
@media (max-width: 440px) {
    .ng-nb-gallery {
        grid-template-columns: 1fr;
    }
    
    .ng-nb-footer ul {
        gap: 0.45rem;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ng-nb-photo img{
        transition: none;
    }
}
/* Partners now use the full available width */


/* HOMEPAGE RHYTHM CLEANUP */
/* * ABOUT * Remove the unnecessary empty first column. */

.ng-field-intro {
    grid-template-columns: minmax(0, 1fr) minmax(260px, 0.47fr);
    gap: clamp(2.5rem, 5vw, 5rem);
    margin-bottom: clamp(2.5rem, 4vw, 3.75rem);
}
.ng-field-intro > .ng-field-kicker {
    grid-column: 1 / -1;
    margin-bottom: -1.25rem;
}
.ng-field-intro h2 {
    max-width: 520px;
}


.ng-field-photo img {
    aspect-ratio: 2.15 / 1;
}
/* * NUMBER STRIP */
.ng-number-strip {
    padding: clamp(2.25rem, 3.5vw, 3.25rem) 0;
}
.ng-number-strip-label {
    margin-bottom: 1.35rem;
}
/* * INITIATIVES */
/* One quieter link inside the active project */
/* * NOORDBUITEN */
.ng-nb-story {
    padding: clamp(4rem, 6vw, 6.25rem) 0;
}

.ng-nb-copy {
    max-width: 680px;
}
.ng-nb-copy h2 {
    max-width: 610px;
    font-size: clamp(2.25rem, 3.35vw, 3.7rem);
}

.ng-nb-gallery {
    gap: clamp(0.65rem, 1.2vw, 1rem);
}

.ng-nb-footer {
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(2rem, 3vw, 3rem);
    padding-top: clamp(1.75rem, 2.5vw, 2.5rem);
}
/* * Buttons should feel deliberate, not oversized. */

/* Tablet */
@media (max-width: 900px) {
    .ng-field-intro {
        grid-template-columns: 1fr 1fr;
    }
    .ng-field-intro > .ng-field-kicker {
        grid-column: 1 / -1;
    }
    
}
/* Mobile */
@media (max-width: 680px) {
     .ng-nb-story {
        padding: 3.75rem 0;
    }
    .ng-field-intro{
        grid-template-columns: 1fr;
    }
    .ng-field-intro > .ng-field-kicker {
        grid-column: auto;
    }
    .ng-field-intro > .ng-field-kicker {
        margin-bottom: -0.4rem;
    }
    .ng-field-photo img {
        aspect-ratio: 4 / 3;
    }
    
    .ng-nb-copy h2 {
        font-size: clamp(2.2rem, 9vw, 3rem);
    }
}
/* NOORDBUITEN DESTINATION */









/* MEEDOEN — EDITORIAL REDESIGN */

/* Opening */





/* Volunteer quote */






/* Photography */





/* Keep the clean expectation section, but tighten it */


.expectation-grid {
    gap: 0.8rem;
}
.expectation-card {
    padding: clamp(1.6rem, 3vw, 2.5rem);
}

/* Final action */
.join-action {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    margin-top: clamp(2.5rem, 4vw, 4rem);
    padding: clamp(2rem, 3.5vw, 3rem) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: transparent;
}




/* Desktop: keep the requested heading on one line */

/* Tablet */

/* Mobile */


/* MEEDOEN — CALMER TYPOGRAPHY AND REAL BUTTONS */


/* Final invitation */
.join-action {
    display: grid;
    grid-template-columns: minmax(250px, 0.7fr) minmax(460px, 1fr);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    margin-top: clamp(2.75rem, 4vw, 4rem);
    padding: clamp(2rem, 3vw, 3rem) 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 0;
    background: transparent;
}


/* Two proper choices */
















/* Tablet */
/* Mobile */

/* Heading */
/* Achievement strip */
/* Photographic proof */
/* Two small proof points */
/* Tablet */
/* Mobile */
/* Reset the broken grid behaviour */
/* Number stays inside its own panel */
/* Tablet */
/* Mobile */
/* Fully reset each card */
/* Card colours */
/* Fix the number inside the top-left corner */
/* Stop the text container drifting sideways */
/* Neater typography */
/* Tablet */
/* Mobile */
/* Only hide cards once JavaScript has prepared them */
/* Reveal cards one after another */
/* Gentle movement after the entrance finishes */
/* Keep the number circle subtly alive */
/* NIEUWS, AGENDA & ACTIVITEITEN */

/* Heading */
.ng-live-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.48fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.ng-live-heading h2 {
    max-width: 650px;
    margin: 1rem 0 0;
    color: #29382f;
    font-size: clamp(2.25rem, 3.4vw, 3.65rem);
    font-weight: 710;
    line-height: 1;
    letter-spacing: -0.045em;
}
.ng-live-heading > p {
    max-width: 450px;
    margin: 0 0 0.3rem;
    color: #627067;
    font-size: 1rem;
    line-height: 1.7;
}
/* Main layout */




/* News */

















/* Agenda */
.ng-live-agenda {
    display: flex;
    min-width: 0;
    flex-direction: column;
    padding: clamp(1.6rem, 3vw, 2.6rem);
    border-radius: 1.3rem 1.3rem 0.35rem 1.3rem;
    background: #293d31;
    color: #fff;
}















/* Proper destination rather than hyperlink */







/* Ongoing activities */








/* Responsive */

@media (max-width: 720px) {
    .ng-live-heading {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ng-live-heading h2 {
        font-size: clamp(2.2rem, 10vw, 3rem);
    }
    
    
    
    
}

/* News category and date */



/* EDITORIAL NEWS */

.ng-news-editorial-heading {
    display: flex;
    gap: 2rem;
    align-items: end;
    justify-content: space-between;
    margin-bottom: 1.25rem;
}
.ng-news-editorial-heading p {
    margin: 0 0 0.45rem;
    color: #c95d3f;
    font-size: 0.65rem;
    font-weight: 850;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.ng-news-editorial-heading h3 {
    margin: 0;
    color: #29382f;
    font-size: clamp(1.6rem, 2.2vw, 2.15rem);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: -0.035em;
}
.ng-news-editorial-heading > span {
    max-width: 220px;
    padding-bottom: 0.2rem;
    color: #768078;
    font-size: 0.72rem;
    line-height: 1.45;
    text-align: right;
}
/* Stories */
.ng-news-editorial-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem 1.25rem;
}
.ng-news-story {
    min-width: 0;
}
.ng-news-story > a {
    color: #29382f;
    text-decoration: none;
}
.ng-news-story > a:hover {
    color: #29382f;
}
/* Leading story */
.ng-news-story.is-leading {
    grid-column: 1 / -1;
}
.ng-news-story.is-leading > a {
    position: relative;
    display: block;
    min-height: clamp(340px, 34vw, 480px);
    overflow: hidden;
    border-radius: 1.5rem 1.5rem 0.4rem 1.5rem;
    background: #42584a;
}




.ng-news-story.is-leading h4 {
    max-width: 590px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.8rem, 3vw, 3rem);
    font-weight: 710;
    line-height: 1;
    letter-spacing: -0.045em;
}

/* Category and date */






/* Two compact stories */
.ng-news-story.is-compact > a {
    display: grid;
    grid-template-columns: minmax(115px, 0.42fr) minmax(0, 1fr);
    gap: 1.15rem;
    min-height: 145px;
    padding: 1rem 0;
    border-top: 1px solid rgba(41, 56, 47, 0.18);
    transition: transform 220ms ease;
}



.ng-news-story.is-compact h4 {
    margin: 0;
    color: #29382f;
    font-size: clamp(1.05rem, 1.45vw, 1.3rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.025em;
}


.ng-news-story.is-compact > a:hover {
    transform: translateY(-2px);
}
/* Shared photo movement */

/* Empty state */



/* Tablet */
@media (max-width: 760px) {
    .ng-news-editorial-heading > span {
        display: none;
    }
    .ng-news-story.is-leading > a {
        min-height: 390px;
    }
    .ng-news-editorial-list {
        grid-template-columns: 1fr;
    }
    .ng-news-story.is-leading {
        grid-column: auto;
    }
}
/* Mobile */
@media (max-width: 520px) {
    .ng-news-story.is-leading > a {
        min-height: 380px;
    }
    .ng-news-story.is-leading h4 {
        font-size: clamp(1.75rem, 9vw, 2.35rem);
    }
    .ng-news-story.is-compact > a {
        grid-template-columns: 105px minmax(0, 1fr);
        gap: 0.9rem;
    }
    
    
}
@media (prefers-reduced-motion: reduce) {
     .ng-news-story.is-compact > a {
        transition: none;
    }
}
/* MOVING PARTNER RIBBON */
.ng-partner-section {
    position: relative;
    overflow: hidden;
    padding: clamp(4.5rem, 7vw, 7rem) 0;
    background: #fffdfa;
    color: #29382f;
}
/* Introduction */
.ng-partner-heading {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(280px, 0.48fr);
    gap: clamp(3rem, 7vw, 7rem);
    align-items: end;
    margin-bottom: clamp(2.75rem, 5vw, 4.5rem);
}
.ng-partner-heading h2 {
    max-width: 610px;
    margin: 1rem 0 0;
    color: #29382f;
    font-size: clamp(2.1rem, 3.2vw, 3.35rem);
    font-weight: 710;
    line-height: 1.01;
    letter-spacing: -0.04em;
}
.ng-partner-heading > p {
    max-width: 470px;
    margin: 0 0 0.25rem;
    color: #637067;
    font-size: 1rem;
    line-height: 1.7;
}
/* Marquee viewport */
.ng-partner-marquee {
    --partner-gap: 1rem;
    --partner-speed: 38s;
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 0.75rem 0;
    /* * Logos softly disappear at both edges rather * than being sharply cut off. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
    mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
/* Moving track */
.ng-partner-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: ng-partner-scroll var(--partner-speed) linear infinite;
}
.ng-partner-group {
    display: flex;
    flex: 0 0 auto;
    gap: var(--partner-gap);
    align-items: stretch;
    padding-right: var(--partner-gap);
}
/* Logo panel */
.ng-partner-logo {
    display: grid;
    flex: 0 0 clamp(175px, 15vw, 220px);
    width: clamp(175px, 15vw, 220px);
    min-height: 120px;
    margin: 0;
    padding: 1.4rem;
    place-items: center;
    overflow: hidden;
    border: 1px solid rgba(41, 56, 47, 0.1);
    border-radius: 1rem 1rem 0.3rem 1rem;
    background: #f5f1ea;
    transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ng-partner-logo:nth-child(3n + 2) {
    background: #e4eddf;
}
.ng-partner-logo:nth-child(4n) {
    background: #f3ded3;
}
.ng-partner-logo img {
    display: block;
    width: auto;
    max-width: 86%;
    height: auto;
    max-height: 70px;
    object-fit: contain;
    filter: saturate(0.92);
    transition: filter 220ms ease, transform 220ms ease;
}
.ng-partner-logo.is-wide img {
    max-width: 96%;
    max-height: 76px;
}
.ng-partner-logo.is-small img {
    max-width: 75%;
    max-height: 62px;
}
/* Subtle interaction */
.ng-partner-logo:hover {
    border-color: rgba(41, 56, 47, 0.2);
    background: #fff;
    transform: translateY(-0.25rem);
}
.ng-partner-logo:hover img {
    filter: saturate(1);
    transform: scale(1.025);
}
/* * Pause so visitors can inspect a logo. */
.ng-partner-marquee:hover .ng-partner-track {
    animation-play-state: paused;
}
/* Seamless sideways movement */
@keyframes ng-partner-scroll {
    from {
        transform: translateX(0);
    }
    to {
        transform: translateX(-50%);
    }
}
/* Closing caption */
.ng-partner-footer {
    display: flex;
    justify-content: flex-end;
    margin-top: clamp(2rem, 3vw, 3rem);
    padding-top: 1.5rem;
    border-top: 1px solid rgba(41, 56, 47, 0.16);
}
.ng-partner-footer p {
    display: flex;
    max-width: 560px;
    gap: 0.75rem;
    align-items: center;
    margin: 0;
    color: #68746c;
    font-size: 0.76rem;
    font-weight: 650;
    line-height: 1.5;
}
.ng-partner-footer p > span {
    display: block;
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #f26452;
}
/* Tablet */
@media (max-width: 800px) {
    .ng-partner-heading {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ng-partner-logo {
        flex-basis: 175px;
        width: 175px;
        min-height: 105px;
    }
}
/* Mobile */
@media (max-width: 520px) {
    .ng-partner-section {
        padding: 4rem 0;
    }
    .ng-partner-heading h2 {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }
    .ng-partner-marquee {
        --partner-speed: 29s;
        -webkit-mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
        mask-image: linear-gradient(to right, transparent, #000 3%, #000 97%, transparent);
    }
    .ng-partner-logo {
        flex-basis: 155px;
        width: 155px;
        min-height: 95px;
        padding: 1rem;
    }
    .ng-partner-footer {
        justify-content: flex-start;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    .ng-partner-track {
        width: auto;
        animation: none;
    }
    .ng-partner-group:first-child {
        flex-wrap: wrap;
        justify-content: center;
        padding: 0 1rem;
    }
    .ng-partner-group[aria-hidden="true"] {
        display: none;
    }
    .ng-partner-logo {
        transition: none;
    }
}
/* PARTNER DESTINATION */
.ng-partner-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 390px);
    gap: clamp(2rem, 5vw, 5rem);
    align-items: center;
    margin-top: clamp(2rem, 3vw, 3rem);
    padding-top: clamp(1.5rem, 2.5vw, 2.25rem);
    border-top: 1px solid rgba(41, 56, 47, 0.16);
}
.ng-partner-footer > p {
    display: flex;
    max-width: 620px;
    gap: 0.75rem;
    align-items: flex-start;
    margin: 0;
    color: #68746c;
    font-size: 0.78rem;
    font-weight: 650;
    line-height: 1.6;
}
.ng-partner-footer > p > span {
    display: block;
    flex: 0 0 auto;
    width: 0.55rem;
    height: 0.55rem;
    margin-top: 0.3rem;
    border-radius: 50%;
    background: #f26452;
}
/* Deliberate destination—not a naked hyperlink */
.ng-partner-destination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    gap: 1rem;
    align-items: center;
    min-height: 78px;
    padding: 1rem 1rem 1rem 1.25rem;
    border: 1px solid rgba(41, 56, 47, 0.13);
    border-radius: 0.4rem 1.1rem 1.1rem 1.1rem;
    background: #f1e5d8;
    color: #29382f;
    text-decoration: none;
    transition: background-color 220ms ease, border-color 220ms ease, transform 220ms ease;
}
.ng-partner-destination > span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: 0.25rem;
}
.ng-partner-destination small {
    color: #b85a3e;
    font-size: 0.62rem;
    font-weight: 850;
    letter-spacing: 0.11em;
    line-height: 1.3;
    text-transform: uppercase;
}
.ng-partner-destination strong {
    color: #29382f;
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
}
.ng-partner-destination-arrow {
    display: grid;
    width: 2.75rem;
    height: 2.75rem;
    place-items: center;
    border-radius: 50%;
    background: #293d31;
    color: #fff;
    font-size: 1rem;
    transition: background-color 220ms ease, transform 220ms ease;
}
.ng-partner-destination:hover, .ng-partner-destination:focus-visible {
    border-color: rgba(41, 56, 47, 0.24);
    background: #f5d5cb;
    color: #29382f;
    text-decoration: none;
    transform: translateY(-2px);
}
.ng-partner-destination:hover .ng-partner-destination-arrow {
    background: #f26452;
    transform: translateX(0.2rem);
}
.ng-partner-destination:focus-visible {
    outline: 3px solid rgba(242, 100, 82, 0.4);
    outline-offset: 4px;
}
@media (max-width: 720px) {
    .ng-partner-footer {
        grid-template-columns: 1fr;
    }
    .ng-partner-destination {
        width: min(100%, 390px);
    }
}
/* Homepage: afsluiting / steun NoordgroeiT */
.support-closing-section {
    padding: clamp(72px, 9vw, 128px) 0 clamp(84px, 10vw, 142px);
    background: var(--color-white);
}
.support-closing-panel {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.12fr) minmax(320px, 0.78fr);
    align-items: center;
    gap: clamp(56px, 8vw, 120px);
    padding: clamp(46px, 7vw, 90px);
    overflow: hidden;
    color: var(--color-white);
    background: var(--color-green);
    border-radius: var(--radius-large);
    box-shadow: var(--shadow-soft);
}
/* Coral shape in the corner */
.support-closing-panel::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -190px;
    right: -150px;
    width: 390px;
    aspect-ratio: 1;
    background: var(--color-coral);
    border-radius: 50%;
}
/* Subtle green shape at the bottom */
.support-closing-panel::after {
    content: "";
    position: absolute;
    z-index: -1;
    bottom: -210px;
    left: 38%;
    width: 390px;
    aspect-ratio: 1;
    background: var(--color-green-light);
    border-radius: 50%;
    opacity: 0.1;
}
.support-closing-copy {
    max-width: 720px;
}
.support-closing-label {
    margin: 0 0 18px;
    color: var(--color-green-light);
    font-size: 0.75rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}
.support-closing-copy h2 {
    max-width: 700px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.75rem, 5vw, 5.25rem);
    line-height: 0.98;
    letter-spacing: -0.055em;
    text-wrap: balance;
}
.support-closing-intro {
    max-width: 620px;
    margin: 28px 0 0;
    color: rgba(255, 255, 255, 0.78);
    font-size: clamp(1rem, 1.35vw, 1.18rem);
    line-height: 1.7;
}
/* A real button, not a hyperlink-looking text link */
.support-closing-button {
    width: fit-content;
    min-height: 58px;
    display: inline-flex;
    align-items: center;
    gap: 22px;
    margin-top: 36px;
    padding: 8px 9px 8px 25px;
    color: var(--color-dark);
    background: var(--color-white);
    border: 2px solid var(--color-white);
    border-radius: 999px;
    font-weight: 800;
    text-decoration: none;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}
.support-closing-arrow {
    width: 40px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    color: var(--color-white);
    background: var(--color-coral);
    border-radius: 50%;
    transition: transform 180ms ease;
}
.support-closing-button:hover, .support-closing-button:focus-visible {
    color: var(--color-white);
    background: var(--color-coral);
    border-color: var(--color-coral);
    transform: translateY(-2px);
}
.support-closing-button:hover .support-closing-arrow, .support-closing-button:focus-visible .support-closing-arrow {
    color: var(--color-coral);
    background: var(--color-white);
    transform: translateX(3px);
}
/* Right-hand impact list */
.support-closing-side {
    position: relative;
    padding-left: clamp(32px, 5vw, 68px);
    border-left: 1px solid rgba(255, 255, 255, 0.2);
}
.support-closing-stamp {
    width: 112px;
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    margin: 0 0 34px auto;
    color: var(--color-dark);
    background: var(--color-green-light);
    border-radius: 50%;
    text-align: center;
    transform: rotate(5deg);
}
.support-closing-stamp > span {
    margin-bottom: 5px;
    color: var(--color-coral);
    font-size: 1.25rem;
    line-height: 1;
}
.support-closing-stamp small {
    font-size: 0.67rem;
    font-weight: 800;
    line-height: 1.25;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}
.support-closing-side-label {
    margin: 0 0 12px;
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.13em;
    text-transform: uppercase;
}
.support-closing-list {
    margin: 0;
    padding: 0;
    list-style: none;
}
.support-closing-list li {
    display: grid;
    grid-template-columns: 34px minmax(0, 1fr);
    gap: 15px;
    padding: 20px 0;
    color: var(--color-white);
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
    font-size: clamp(1rem, 1.5vw, 1.2rem);
    font-weight: 700;
    line-height: 1.35;
}
.support-closing-list li:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.18);
}
.support-closing-list li span {
    padding-top: 3px;
    color: var(--color-green-light);
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
/* Tablet */
@media (max-width: 900px) {
    .support-closing-panel {
        grid-template-columns: 1fr;
        gap: 52px;
    }
    .support-closing-side {
        padding: 42px 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 0;
    }
    .support-closing-stamp {
        position: absolute;
        top: -28px;
        right: 0;
        width: 92px;
    }
}
/* Mobile */
@media (max-width: 600px) {
    .support-closing-section {
        padding: 64px 0 82px;
    }
    .support-closing-panel {
        gap: 44px;
        padding: 40px 25px;
        border-radius: 24px;
    }
    .support-closing-copy h2 {
        font-size: clamp(2.45rem, 12vw, 3.7rem);
    }
    .support-closing-button {
        width: 100%;
        justify-content: space-between;
    }
    .support-closing-stamp {
        position: static;
        width: 86px;
        margin: 0 0 28px;
    }
}
.support-closing-section {
    position: relative;
    padding: clamp(92px, 11vw, 150px) 0 clamp(84px, 10vw, 142px);
    background: #f1e5d8;
}
/* Small visual transition from the partner section */
.support-closing-section::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: min(1200px, calc(100% - 48px));
    height: 1px;
    background: rgba(39, 60, 47, 0.18);
    transform: translateX(-50%);
}
@media (max-width: 600px) {
    .support-closing-section {
        padding: 72px 0 82px;
    }
    .support-closing-section::before {
        width: calc(100% - 32px);
    }
}
/* Hero: Samen voor Noord corner mark */
.ng-hero-corner-mark {
    position: absolute;
    z-index: 4;
    right: 0;
    bottom: 0;
    width: clamp(210px, 21vw, 300px);
    height: clamp(170px, 18vw, 235px);
    overflow: hidden;
    pointer-events: none;
}
/* Large coral circle disappearing beyond the image */
.ng-hero-corner-shape {
    position: absolute;
    right: clamp(-105px, -7vw, -72px);
    bottom: clamp(-125px, -8vw, -86px);
    width: clamp(230px, 22vw, 320px);
    aspect-ratio: 1;
    background: var(--color-coral);
    border-radius: 50%;
}
/* Pale Samen voor Noord seal */
.ng-hero-corner-seal {
    position: absolute;
    right: clamp(105px, 9vw, 140px);
    bottom: clamp(28px, 3vw, 45px);
    width: clamp(88px, 8vw, 112px);
    aspect-ratio: 1;
    display: grid;
    place-content: center;
    justify-items: center;
    color: var(--color-dark);
    background: #e8f0e3;
    border: 3px solid rgba(255, 255, 255, 0.72);
    border-radius: 50%;
    box-shadow: 0 12px 30px rgba(31, 46, 37, 0.2);
    text-align: center;
    transform: rotate(-4deg);
    transition: transform 300ms ease;
}
.ng-editorial-hero-photo:hover .ng-hero-corner-seal {
    transform: rotate(0deg) scale(1.04);
}
.ng-hero-corner-heart {
    margin-bottom: 5px;
    color: var(--color-coral);
    font-size: 0.95rem;
    line-height: 1;
}
.ng-hero-corner-text {
    font-size: clamp(0.58rem, 0.75vw, 0.72rem);
    font-weight: 900;
    line-height: 1.05;
    letter-spacing: 0.075em;
    text-transform: uppercase;
}
@media (max-width: 560px) {
    .ng-hero-corner-mark {
        width: 190px;
        height: 155px;
    }
    .ng-hero-corner-shape {
        right: -84px;
        bottom: -100px;
        width: 225px;
    }
    .ng-hero-corner-seal {
        right: 88px;
        bottom: 25px;
        width: 78px;
        border-width: 2px;
    }
    .ng-hero-corner-heart {
        margin-bottom: 3px;
        font-size: 0.78rem;
    }
    .ng-hero-corner-text {
        font-size: 0.53rem;
    }
}
/* Keep the hero seal above the dark image overlay */
.ng-hero-corner-mark {
    z-index: 20;
    filter: none;
    opacity: 1;
}
.ng-hero-corner-shape {
    z-index: 1;
    background: var(--color-coral);
    opacity: 1;
}
.ng-hero-corner-seal {
    z-index: 2;
    background: #e8f0e3;
    opacity: 1;
}
.ng-hero-corner-mark, .ng-hero-corner-mark * {
    mix-blend-mode: normal;
}





.ng-hero-corner-mark {
    z-index: 4;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
}
/* Badge is now independent from the darkened photograph */
body.home .ng-hero-corner-mark {
    position: absolute;
    z-index: 3;
    right: 0;
    bottom: 0;
    opacity: 1;
    filter: none;
    mix-blend-mode: normal;
}
body.home .ng-hero-corner-shape {
    background: var(--color-coral);
    opacity: 1;
}
body.home .ng-hero-corner-seal {
    background: #e8f0e3;
    opacity: 1;
}
/* Homepage: subtle scroll reveals */
/* * Elements are only hidden after JavaScript prepares them. * The site therefore remains fully visible if JavaScript fails. */
body.home .ng-scroll-reveal {
    --ng-reveal-delay: 0ms;
    opacity: 0;
    transform: translate3d(0, 24px, 0);
    transition: opacity 620ms ease var(--ng-reveal-delay), transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--ng-reveal-delay);
    will-change: opacity, transform;
}
/* Images settle into place slightly */
body.home .ng-scroll-reveal--image {
    transform: translate3d(0, 20px, 0) scale(0.985);
}
/* Used sparingly for split compositions */
body.home .ng-scroll-reveal--left {
    transform: translate3d(-28px, 0, 0);
}
body.home .ng-scroll-reveal--right {
    transform: translate3d(28px, 0, 0);
}
/* Revealed state */
body.home .ng-scroll-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
}
/* Horizontal movement becomes vertical on smaller screens */
@media (max-width: 760px) {
    body.home .ng-scroll-reveal--left, body.home .ng-scroll-reveal--right {
        transform: translate3d(0, 22px, 0);
    }
    body.home .ng-scroll-reveal--left.is-visible, body.home .ng-scroll-reveal--right.is-visible {
        transform: translate3d(0, 0, 0);
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-scroll-reveal, body.home .ng-scroll-reveal--image, body.home .ng-scroll-reveal--left, body.home .ng-scroll-reveal--right {
        opacity: 1;
        transform: none;
        transition: none;
    }
}
/* NoordbuiTen: compact location map */


/* Fine inner line keeps the map visually connected to the card */










/* FINAL HOMEPAGE RESPONSIVE PASS — Keep this at the absolute bottom of style.css */
/* Prevent decorative elements from creating horizontal scroll */
html, body {
    overflow-x: clip;
}
/* TABLET — 900px and smaller */
@media (max-width: 900px) {
    /* Consistent section rhythm */
     body.home .ng-nb-story, body.home .ng-partner-section {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
    /* Hero */
    body.home .ng-editorial-hero {
        min-height: 720px;
        padding: 150px 0 115px;
    }
    body.home .ng-editorial-hero-copy {
        width: min(100%, 620px);
    }
    body.home .ng-editorial-hero-copy h1 {
        max-width: 570px;
        font-size: clamp(2.9rem, 7vw, 3.8rem);
        white-space: normal;
    }
    /* About */
    .ng-field-intro {
        grid-template-columns: minmax(0, 1fr) minmax(240px, 0.65fr);
        gap: 2.5rem;
    }
    /* Initiatives */
    /* NoordbuiTen: map and story receive proper width */
    
    
    /* Join */
    
    
    .join-action {
        grid-template-columns: 1fr;
    }
    
    
    /* Impact */
    /* News and agenda */
    .ng-live-heading, .ng-partner-heading {
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
    
    .ng-live-agenda {
        min-height: 0;
    }
    /* Closing support chapter */
    .support-closing-panel {
        grid-template-columns: 1fr;
        gap: 3.25rem;
    }
    .support-closing-side {
        padding: 3rem 0 0;
        border-top: 1px solid rgba(255, 255, 255, 0.2);
        border-left: 0;
    }
}
/* SMALL TABLET — NoordbuiTen switches to one column */
@media (max-width: 780px) {
    
    .ng-nb-identity {
        width: 100%;
    }
    
    
}
/* MOBILE — 600px and smaller */
@media (max-width: 600px) {
    :root {
        --content-padding: 18px;
        --radius-large: 24px;
    }
    /* Header */
    body.home .ng-site-header {
        padding: 8px 0;
    }
    .ng-header-shell {
        min-height: 62px;
        padding: 7px 8px 7px 14px;
        border-radius: 16px;
    }
    .ng-header-logo {
        width: 122px;
    }
    .ng-menu-toggle {
        min-height: 44px;
        padding: 9px 12px;
        font-size: 0.82rem;
    }
    /* Hero */
    body.home .ng-editorial-hero {
        min-height: 690px;
        padding: 125px 0 105px;
    }
    body.home .ng-editorial-hero-copy {
        width: calc(100% - 10px);
        margin: 0;
        padding-left: 18px;
        border-left-width: 3px;
    }
    body.home .ng-editorial-hero-label {
        margin-bottom: 13px;
        font-size: 0.63rem;
    }
    body.home .ng-editorial-hero-copy h1 {
        max-width: 360px;
        font-size: clamp(2.65rem, 12.5vw, 3.35rem);
        line-height: 0.96;
    }
    
    
    
    
    .ng-hero-corner-mark {
        width: 164px;
        height: 137px;
    }
    .ng-hero-corner-shape {
        right: -78px;
        bottom: -91px;
        width: 205px;
    }
    .ng-hero-corner-seal {
        right: 75px;
        bottom: 21px;
        width: 70px;
    }
    /* Shared section rhythm */
     body.home .ng-nb-story, body.home .ng-partner-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }
    /* Shared typography */
    .ng-field-intro h2, .ng-nb-copy h2, .ng-live-heading h2, .ng-partner-heading h2 {
        font-size: clamp(2.15rem, 9.5vw, 2.8rem);
        line-height: 1;
    }
    /* About */
    .ng-field-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ng-field-intro > .ng-field-kicker {
        grid-column: auto;
    }
    .ng-field-photo {
        border-radius: 1.25rem;
    }
    .ng-field-photo img {
        aspect-ratio: 4 / 3;
        object-fit: cover;
    }
    .ng-field-photo figcaption {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.25rem;
    }
    /* Number strip stays compact as a 2 × 2 grid */
    .ng-number-strip {
        padding: 2.75rem 0;
    }
    .ng-number-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 1.25rem;
        row-gap: 2.25rem;
    }
    .ng-number-item, .ng-number-item:nth-child(3) {
        padding: 0 0 0 1.15rem;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
    .ng-number-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
    .ng-number-item strong {
        font-size: clamp(2.2rem, 11vw, 3rem);
    }
    /* Initiatives */
    /* NoordbuiTen */
    .ng-nb-identity img {
        width: min(67%, 230px);
    }
    
    
    
    .ng-nb-gallery {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.65rem;
    }
    
    
    .ng-nb-footer {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ng-nb-footer ul {
        justify-content: flex-start;
    }
    /* Join */
    
    
    
    
    
    .expectation-grid {
        grid-template-columns: 1fr;
    }
    
    
    /* Impact */
    /* News and agenda */
    .ng-live-heading {
        margin-bottom: 2.75rem;
    }
    
    .ng-news-story.is-leading > a {
        min-height: 360px;
    }
    .ng-news-story.is-leading h4 {
        font-size: clamp(1.65rem, 8vw, 2.15rem);
    }
    .ng-news-story.is-compact > a {
        grid-template-columns: 96px minmax(0, 1fr);
        gap: 0.85rem;
    }
    
    .ng-live-agenda {
        padding: 1.35rem;
        border-radius: 1.25rem;
    }
    
    
    /* Partners */
    .ng-partner-heading {
        margin-bottom: 2.5rem;
    }
    .ng-partner-footer {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    .ng-partner-destination {
        width: 100%;
    }
    /* Final support chapter */
    .support-closing-section {
        padding: 4.5rem 0 5rem;
    }
    .support-closing-panel {
        gap: 2.75rem;
        padding: 2.25rem 1.35rem;
        border-radius: 1.4rem;
    }
    .support-closing-copy h2 {
        font-size: clamp(2.35rem, 11vw, 3rem);
    }
    .support-closing-intro {
        margin-top: 1.3rem;
        font-size: 0.95rem;
    }
    .support-closing-button {
        width: 100%;
        justify-content: space-between;
        margin-top: 1.75rem;
    }
    .support-closing-side {
        padding-top: 2.5rem;
    }
    .support-closing-stamp {
        position: static;
        width: 80px;
        margin: 0 0 1.7rem;
    }
    .support-closing-list li {
        padding: 1rem 0;
        font-size: 0.96rem;
    }
}
/* Very narrow phones only */
@media (max-width: 360px) {
    .ng-nb-gallery {
        grid-template-columns: 1fr;
    }
    
    .ng-news-story.is-compact > a {
        grid-template-columns: 82px minmax(0, 1fr);
    }
}
/* Touch devices do not need hover jumps */
@media (hover: none) {
    .ng-nb-photo:hover img, .ng-partner-logo:hover, .support-closing-button:hover {
        transform: none;
    }
}
/* Doe mee: more compact opening */





/* Doe mee: volunteer experiences */

.join-reviews-heading {
    display: grid;
    grid-template-columns: minmax(250px, 0.55fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(2rem, 5vw, 5rem);
    margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
.join-reviews-heading h3 {
    max-width: 600px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.7rem, 2.7vw, 2.5rem);
    font-weight: 700;
    line-height: 1.08;
    letter-spacing: -0.04em;
}
/* Two testimonial cards */
.join-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(0.9rem, 2vw, 1.4rem);
}
.join-review-card {
    position: relative;
    min-height: 310px;
    display: flex;
    flex-direction: column;
    padding: clamp(1.65rem, 3vw, 2.6rem);
    overflow: hidden;
    color: #fff;
    background: rgba(255, 255, 255, 0.075);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 0.45rem 1.6rem 1.6rem 1.6rem;
}

/* Quiet decorative circle */
.join-review-card::after {
    content: "";
    position: absolute;
    right: -85px;
    bottom: -105px;
    width: 210px;
    aspect-ratio: 1;
    background: rgba(230, 240, 225, 0.055);
    border-radius: 50%;
    pointer-events: none;
}

.join-review-card blockquote {
    position: relative;
    z-index: 1;
    margin: 1rem 0 2rem;
    padding: 0;
    border: 0;
}
.join-review-card blockquote p {
    max-width: 620px;
    margin: 0;
    color: #fff;
    font-size: clamp(1.12rem, 1.65vw, 1.42rem);
    font-weight: 620;
    line-height: 1.5;
    letter-spacing: -0.018em;
}
.join-review-card footer {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: auto;
}
.join-review-card footer strong {
    color: #f3a28c;
    font-size: 0.85rem;
}
.join-review-card footer span {
    color: rgba(255, 255, 255, 0.57);
    font-size: 0.72rem;
    line-height: 1.45;
}
/* Keep the final action close to the testimonials */

@media (max-width: 760px) {
    .join-reviews-heading {
        grid-template-columns: 1fr;
        gap: 0.8rem;
    }
    .join-review-card {
        min-height: 0;
    }
}
@media (max-width: 600px) {
    
    .join-reviews-heading h3 {
        font-size: clamp(1.65rem, 8vw, 2.2rem);
    }
    .join-review-card {
        padding: 1.5rem 1.25rem;
        border-radius: 0.4rem 1.25rem 1.25rem 1.25rem;
    }
    
    .join-review-card blockquote {
        margin: 0.85rem 0 1.75rem;
    }
    .join-review-card blockquote p {
        font-size: 1.05rem;
    }
}
/* Doe mee: clean text-led section */
.join-clean-heading {
    margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.join-clean-heading > .eyebrow {
    margin: 0 0 1.25rem;
    color: #f3a28c;
}

.join-clean-heading h2 {
    max-width: 760px;
    margin: 0;
    color: #fff;
    font-size: clamp(2.25rem, 3.5vw, 3.65rem);
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.045em;
}

/* Reviews become a quiet supporting element */

.join-reviews-heading {
    display: block;
    margin-bottom: 1.4rem;
}
.join-reviews-heading .eyebrow {
    margin: 0;
    color: #f3a28c;
}
.join-reviews-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9rem;
}
.join-review-card {
    min-height: 0;
    padding: clamp(1.5rem, 2.5vw, 2.1rem);
    border-radius: 0.4rem 1.3rem 1.3rem 1.3rem;
}

.join-review-card blockquote {
    margin: 0.65rem 0 1.6rem;
}
.join-review-card blockquote p {
    font-size: clamp(1.02rem, 1.35vw, 1.18rem);
    line-height: 1.5;
}
.join-review-card footer span {
    max-width: 310px;
}
/* Keep the final action nearby */

@media (max-width: 760px) {
    
    .join-clean-heading h2 {
        font-size: clamp(2.1rem, 9vw, 2.85rem);
    }
    .join-reviews-grid {
        grid-template-columns: 1fr;
    }
}
/* SAFE SCROLL REVEALS — Content can never remain invisible */
body.home .ng-scroll-reveal {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
}
/* Start the animation only once JavaScript reveals it */
body.home .ng-scroll-reveal.is-visible {
    animation: ng-safe-reveal-up 650ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--ng-reveal-delay, 0ms) both;
}
body.home .ng-scroll-reveal--image.is-visible {
    animation-name: ng-safe-reveal-image;
}
body.home .ng-scroll-reveal--left.is-visible {
    animation-name: ng-safe-reveal-left;
}
body.home .ng-scroll-reveal--right.is-visible {
    animation-name: ng-safe-reveal-right;
}
@keyframes ng-safe-reveal-up {
    from {
        opacity: 0;
        transform: translate3d(0, 22px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes ng-safe-reveal-image {
    from {
        opacity: 0;
        transform: translate3d(0, 18px, 0) scale(0.985);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0) scale(1);
    }
}
@keyframes ng-safe-reveal-left {
    from {
        opacity: 0;
        transform: translate3d(-25px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
@keyframes ng-safe-reveal-right {
    from {
        opacity: 0;
        transform: translate3d(25px, 0, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}
/* The impact cards used the older pre-hidden approach */
/* Preserve a small stagger inside the impact cards */
@media (max-width: 760px) {
    body.home .ng-scroll-reveal--left.is-visible, body.home .ng-scroll-reveal--right.is-visible {
        animation-name: ng-safe-reveal-up;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.home .ng-scroll-reveal, body.home .ng-scroll-reveal.is-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }
}
/* COMPACT DESTINATION CONTROLS — Replaces the final naked text links */


/* Hero version */



/* Light-section version */



/* Shared movement */




/* FINAL CALM ANIMATION FIX — One subtle reveal system — no jumping or double animation */
/* Prepare elements smoothly */
body.home .ng-scroll-reveal, body.home .ng-scroll-reveal--image, body.home .ng-scroll-reveal--left, body.home .ng-scroll-reveal--right {
    opacity: 0 !important;
    transform: translate3d(0, 11px, 0) !important;
    animation: none !important;
    transition: opacity 420ms ease-out var(--ng-reveal-delay, 0ms), transform 480ms cubic-bezier(0.22, 1, 0.36, 1) var(--ng-reveal-delay, 0ms) !important;
    will-change: opacity, transform;
}
/* Revealed state */
body.home .ng-scroll-reveal.is-visible, body.home .ng-scroll-reveal--image.is-visible, body.home .ng-scroll-reveal--left.is-visible, body.home .ng-scroll-reveal--right.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) !important;
    animation: none !important;
}
/* Impact cards: remove the second animation */
/* Reveal the cards */
/* Small, controlled stagger */
/* Prevent every individual child from animating separately */
/* Keep hover movement subtle */
/* Even quieter on phones */
@media (max-width: 600px) {
    body.home .ng-scroll-reveal, body.home .ng-scroll-reveal--image, body.home .ng-scroll-reveal--left, body.home .ng-scroll-reveal--right {
        transform: translate3d(0, 8px, 0) !important;
        transition-duration: 360ms, 420ms !important;
    }
}
/* Accessibility */
/* RESTORE ORIGINAL HOMEPAGE ANIMATIONS — Original movement, without the double-animation bug */
/* Main upward reveal */
body.home .ng-scroll-reveal {
    --ng-reveal-delay: 0ms;
    opacity: 0 !important;
    transform: translate3d(0, 24px, 0) !important;
    animation: none !important;
    transition: opacity 620ms ease var(--ng-reveal-delay), transform 700ms cubic-bezier(0.2, 0.75, 0.25, 1) var(--ng-reveal-delay) !important;
    will-change: opacity, transform;
}
/* Images gently settle into position */
body.home .ng-scroll-reveal--image {
    transform: translate3d(0, 20px, 0) scale(0.985) !important;
}
/* Split layouts enter from opposite directions */
body.home .ng-scroll-reveal--left {
    transform: translate3d(-28px, 0, 0) !important;
}
body.home .ng-scroll-reveal--right {
    transform: translate3d(28px, 0, 0) !important;
}
/* Final revealed position */
body.home .ng-scroll-reveal.is-visible, body.home .ng-scroll-reveal--image.is-visible, body.home .ng-scroll-reveal--left.is-visible, body.home .ng-scroll-reveal--right.is-visible {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
    animation: none !important;
}
/* Original one-by-one rhythm */
/* Disable the conflicting inner animation */
/* Original hover movement */
/* MOBILE — Horizontal entrances become vertical */
@media (max-width: 760px) {
    body.home .ng-scroll-reveal--left, body.home .ng-scroll-reveal--right {
        transform: translate3d(0, 22px, 0) !important;
    }
    body.home .ng-scroll-reveal--left.is-visible, body.home .ng-scroll-reveal--right.is-visible {
        transform: translate3d(0, 0, 0) !important;
    }
}
/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-scroll-reveal, body.home .ng-scroll-reveal.is-visible {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        transition: none !important;
    }
}
/* FINAL NAVIGATION WITH SUBMENUS */
.ng-nav-parent {
    position: relative;
}
.ng-nav-parent-row {
    display: flex;
    align-items: center;
}
.ng-nav-parent-row > a {
    padding-right: 4px;
}
/* Small chevron control */
.ng-submenu-toggle {
    width: 26px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    color: var(--color-dark);
    background: transparent;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
}
.ng-submenu-toggle span {
    width: 7px;
    height: 7px;
    display: block;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 180ms ease;
}
.ng-submenu-toggle:hover, .ng-submenu-toggle:focus-visible {
    color: var(--color-coral);
    background: var(--color-green-light);
}
.ng-nav-parent.submenu-is-open .ng-submenu-toggle span {
    transform: translateY(2px) rotate(225deg);
}
/* Desktop dropdown */
.ng-submenu {
    position: absolute;
    z-index: 30;
    top: calc(100% - 5px);
    left: -18px;
    width: max-content;
    min-width: 245px;
    display: grid;
    margin: 0;
    padding: 13px 10px 10px;
    overflow: hidden;
    list-style: none;
    background: #fbfaf7;
    border: 1px solid rgba(46, 59, 50, 0.11);
    border-radius: 5px 17px 17px 17px;
    box-shadow: 0 20px 45px rgba(46, 59, 50, 0.14);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(9px);
    transition: opacity 180ms ease, visibility 180ms ease, transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}
.ng-submenu::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 46px;
    height: 3px;
    background: var(--color-coral);
    border-radius: 0 999px 999px 0;
}
.ng-nav-doe-mee .ng-submenu {
    right: 0;
    left: auto;
}
.ng-nav-parent:hover > .ng-submenu, .ng-nav-parent:focus-within > .ng-submenu, .ng-nav-parent.submenu-is-open > .ng-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}
.ng-submenu li + li {
    border-top: 1px solid rgba(46, 59, 50, 0.07);
}
.ng-submenu a {
    padding: 11px 12px;
    border-radius: 8px;
    font-size: 0.88rem;
    font-weight: 700;
    line-height: 1.3;
}
.ng-submenu a::after {
    content: none !important;
}
.ng-submenu a:hover, .ng-submenu a:focus-visible {
    color: var(--color-green);
    background: var(--color-green-light);
}
/* Mobile-only destinations */
.ng-mobile-support, .ng-mobile-vacancies {
    display: none;
}
/* Mobile navigation accordion */
@media (max-width: 1180px) {
    .ng-navigation-list {
        max-height: calc(100vh - 145px);
        overflow-y: auto;
        overscroll-behavior: contain;
    }
    .ng-nav-parent-row {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 46px;
        align-items: center;
    }
    .ng-nav-parent-row > a {
        padding-right: 8px;
    }
    .ng-submenu-toggle {
        width: 42px;
        height: 42px;
    }
    .ng-nav-parent > .ng-submenu {
        position: static;
        width: auto;
        min-width: 0;
        max-height: 0;
        margin: 0 14px;
        padding: 0 0 0 14px;
        overflow: hidden;
        background: transparent;
        border: 0;
        border-left: 2px solid rgba(62, 107, 71, 0.2);
        border-radius: 0;
        box-shadow: none;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: none;
        transition: max-height 280ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease, margin 280ms ease, padding 280ms ease;
    }
    .ng-nav-parent > .ng-submenu::before {
        display: none;
    }
    .ng-nav-parent.submenu-is-open > .ng-submenu {
        max-height: 420px;
        margin-top: 2px;
        margin-bottom: 9px;
        padding-top: 4px;
        padding-bottom: 4px;
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
    .ng-submenu li + li {
        border-top: 0;
    }
    .ng-submenu a {
        padding: 9px 11px;
        font-size: 0.9rem;
    }
}
@media (max-width: 860px) {
    .ng-mobile-support {
        display: block;
    }
    .ng-mobile-support > a {
        color: var(--color-coral);
    }
}
@media (max-width: 620px) {
    .ng-mobile-vacancies {
        display: block;
    }
    .ng-mobile-vacancies > a {
        margin-top: 7px;
        color: var(--color-white) !important;
        background: var(--color-coral) !important;
    }
    .ng-mobile-vacancies > a:hover, .ng-mobile-vacancies > a:focus-visible {
        background: var(--color-dark) !important;
    }
}
/* NAVIGATION WIDTH CORRECTION */
.ng-site-header .site-container {
    --content-width: 1500px;
}
.ng-header-shell {
    gap: clamp(14px, 1.35vw, 24px);
}
.ng-navigation-list {
    gap: clamp(9px, 0.9vw, 16px);
}
.ng-navigation-list > li > a, .ng-nav-parent-row > a {
    font-size: 0.91rem;
}
.ng-submenu-toggle {
    width: 20px;
    height: 36px;
}
.ng-header-actions {
    flex: 0 0 auto;
    gap: 11px;
}
.ng-support-link {
    font-size: 0.87rem;
}
.ng-header-button {
    min-height: 52px;
    padding-inline: 19px;
}
/* BALANCED HEADER + STEUN ONS BUTTON */
@media (min-width: 1181px) {
    /* Three balanced areas: logo | centred navigation | actions */
    .ng-header-shell {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        column-gap: clamp(18px, 1.8vw, 30px);
        padding: 9px 15px 9px 22px;
    }
    .ng-header-logo {
        justify-self: start;
    }
    .ng-primary-navigation {
        justify-self: center;
        margin-left: 0;
    }
    .ng-header-actions {
        justify-self: end;
        margin-left: 0;
        gap: 10px;
    }
    /* Keep the centre navigation compact */
    .ng-navigation-list {
        gap: clamp(8px, 0.75vw, 14px);
    }
    .ng-navigation-list > li > a, .ng-nav-parent-row > a {
        font-size: 0.9rem;
    }
}
/* Steun ons becomes a proper secondary CTA */
.ng-support-link--end {
    min-height: 52px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0 18px !important;
    color: var(--color-white) !important;
    background: var(--color-dark) !important;
    border: 1px solid var(--color-dark) !important;
    border-radius: 15px !important;
    font-size: 0.88rem;
    font-weight: 800;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}
.ng-support-link--end span {
    color: var(--color-coral) !important;
    font-size: 1rem;
}
/* Steun ons hover */
.ng-support-link--end:hover, .ng-support-link--end:focus-visible {
    color: var(--color-white) !important;
    background: var(--color-green) !important;
    border-color: var(--color-green) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(46, 59, 50, 0.18);
}
.ng-support-link--end:hover span, .ng-support-link--end:focus-visible span {
    color: var(--color-coral) !important;
    transform: scale(1.15);
}
/* Return to the existing mobile flex layout */
@media (max-width: 1180px) {
    .ng-header-shell {
        display: flex;
    }
}
/* HOMEPAGE — WAAR WE VOOR STAAN */
body.home .ng-values-strip {
    position: relative;
    z-index: 2;
    padding: 2.3rem 0 2.5rem;
    background: var(--color-cream);
    border-bottom: 1px solid rgba(46, 59, 50, 0.09);
}
/* Small editorial label */


/* Four values */
body.home .ng-values-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: stretch;
}
body.home .ng-value-item {
    min-width: 0;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr);
    gap: 0.9rem;
    align-items: center;
    padding: 0 1.7rem;
}
body.home .ng-value-item:first-child {
    padding-left: 0;
}
body.home .ng-value-item:last-child {
    padding-right: 0;
}
body.home .ng-value-item + .ng-value-item {
    border-left: 1px solid rgba(46, 59, 50, 0.12);
}
/* Icon circles */
body.home .ng-value-icon {
    width: 46px;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    font-size: 1.15rem;
    line-height: 1;
}
body.home .ng-value-icon--green {
    background: #e2eddc;
}
body.home .ng-value-icon--yellow {
    background: #fff0c9;
}
body.home .ng-value-icon--blue {
    background: #dcefed;
}
body.home .ng-value-icon--coral {
    color: var(--color-coral);
    background: #f7dfd7;
    font-size: 1.55rem;
    font-weight: 900;
}
/* Text */
body.home .ng-value-item h2 {
    margin: 0 0 0.18rem;
    color: var(--color-dark);
    font-size: clamp(1.05rem, 1.2vw, 1.28rem);
    font-weight: 850;
    letter-spacing: -0.035em;
    line-height: 1.05;
}
body.home .ng-value-item p {
    max-width: 220px;
    margin: 0;
    color: rgba(46, 59, 50, 0.72);
    font-size: 0.78rem;
    line-height: 1.45;
}
/* VALUES — TABLET */
@media (max-width: 900px) {
    body.home .ng-values-strip {
        padding: 2.2rem 0;
    }
    body.home .ng-values-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0;
    }
    body.home .ng-value-item {
        padding: 1.25rem 1.4rem;
    }
    body.home .ng-value-item:first-child, body.home .ng-value-item:nth-child(3) {
        padding-left: 0;
    }
    body.home .ng-value-item:nth-child(2), body.home .ng-value-item:last-child {
        padding-right: 0;
    }
    body.home .ng-value-item:nth-child(3) {
        border-left: 0;
    }
    body.home .ng-value-item:nth-child(n + 3) {
        border-top: 1px solid rgba(46, 59, 50, 0.12);
    }
}
/* VALUES — MOBILE */
@media (max-width: 560px) {
    body.home .ng-values-strip {
        padding: 1.9rem 0 2rem;
    }
    
    body.home .ng-values-grid {
        grid-template-columns: 1fr;
    }
    body.home .ng-value-item {
        grid-template-columns: 44px minmax(0, 1fr);
        gap: 0.9rem;
        padding: 1rem 0;
        border-left: 0 !important;
    }
    body.home .ng-value-icon {
        width: 42px;
        font-size: 1rem;
    }
    body.home .ng-value-icon--coral {
        font-size: 1.4rem;
    }
    body.home .ng-value-item h2 {
        font-size: 1.05rem;
    }
    body.home .ng-value-item p {
        max-width: 320px;
        font-size: 0.76rem;
    }
}
body.home .ng-values-strip {
    padding: 2.8rem 0 3rem;
}

body.home .ng-value-item {
    grid-template-columns: 54px minmax(0, 1fr);
    gap: 1rem;
    padding: 0 1.9rem;
}
body.home .ng-value-icon {
    width: 52px;
    font-size: 1.25rem;
}
body.home .ng-value-item h2 {
    margin: 0 0 0.28rem;
    font-size: clamp(1.12rem, 1.3vw, 1.38rem);
}
body.home .ng-value-item p {
    max-width: 235px;
    font-size: 0.82rem;
    line-height: 1.5;
}
body.home .ng-values-grid {
    align-items: stretch;
}
body.home .ng-value-item {
    grid-template-columns: 54px minmax(0, 1fr);
    align-items: start;
}
body.home .ng-value-item + .ng-value-item {
    border-left-color: rgba(255, 255, 255, 0.18);
}
/* Makes every icon start on exactly the same line */
body.home .ng-value-icon {
    margin-top: 1px;
}
/* Makes all four text blocks line up */
body.home .ng-values-strip {
    padding: 2.8rem 0 3rem;
    background: var(--color-white);
    border-bottom: 1px solid rgba(46, 59, 50, 0.09);
}


body.home .ng-value-item + .ng-value-item {
    border-left-color: rgba(46, 59, 50, 0.12);
}
body.home .ng-value-item h2 {
    color: var(--color-dark);
}
body.home .ng-value-item p {
    color: rgba(46, 59, 50, 0.72);
}
body.home .ng-value-item > div {
    display: grid;
    grid-template-rows: 1.5rem auto;
    align-content: start;
}
body.home .ng-value-item h2 {
    margin: 0;
    line-height: 1.1;
}
body.home .ng-value-item p {
    margin: 0.35rem 0 0;
}
/* ACCESSIBILITY — CONTRAST FIXES */
/* Impact section */
/* NoordbuiTen footer label */
.footer-small-label {
    color: #f3a28c;
}
/* VALUES STRIP — MOBILE CLEANUP */
@media (max-width: 560px) {
    body.home .ng-values-strip {
        padding: 1.8rem 0 2.2rem;
    }
    body.home .ng-values-grid {
        display: block;
    }
    body.home .ng-value-item {
        display: grid;
        grid-template-columns: 52px minmax(0, 1fr);
        align-items: start;
        gap: 1rem;
        padding: 1.25rem 0;
        border-left: 0 !important;
    }
    body.home .ng-value-item:first-child {
        padding-top: 0.4rem;
    }
    body.home .ng-value-item:last-child {
        padding-bottom: 0.4rem;
    }
    body.home .ng-value-item + .ng-value-item {
        border-top: 1px solid rgba(46, 59, 50, 0.1);
    }
    /* Undo desktop fixed-row alignment */
    body.home .ng-value-item > div {
        display: block;
    }
    body.home .ng-value-item h2 {
        margin: 0 0 0.35rem;
        font-size: 1.08rem;
        line-height: 1.2;
    }
    body.home .ng-value-item p {
        max-width: none;
        margin: 0;
        font-size: 0.8rem;
        line-height: 1.55;
    }
    body.home .ng-value-icon {
        width: 48px;
        margin-top: 0.1rem;
    }
}
/* MOBILE HEADER — COMPACT STEUN ONS */
@media (max-width: 560px) {
    body.home .ng-header-shell {
        gap: 10px;
        padding: 8px 10px 8px 14px;
    }
    body.home .ng-header-actions {
        flex: 0 0 auto;
        gap: 0;
    }
    body.home .ng-support-link--end {
        width: 48px;
        min-width: 48px;
        min-height: 48px;
        padding: 0 !important;
        /* Hides only the visible "Steun ons" text */
        font-size: 0;
        border-radius: 14px !important;
    }
    body.home .ng-support-link--end span {
        font-size: 1rem;
    }
}
/* FINAL HERO TYPOGRAPHY */
body.home .ng-editorial-hero-copy {
    max-width: 700px;
    margin: 20px 0 0;
    padding-left: clamp(28px, 3vw, 42px);
    border-left: 4px solid var(--color-coral);
    text-align: left;
}
/* Small explanatory line */
body.home .ng-editorial-hero-label {
    max-width: 620px;
    display: block;
    margin: 0 0 24px;
    color: #ffd7d0;
    font-size: clamp(0.72rem, 0.8vw, 0.82rem);
    font-weight: 800;
    line-height: 1.45;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    text-shadow: 0 2px 14px rgba(20, 33, 25, 0.45);
}
/* Main statement */
body.home .ng-editorial-hero-copy h1 {
    max-width: 690px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(3.8rem, 5.2vw, 5.6rem);
    font-weight: 800;
    line-height: 0.94;
    letter-spacing: -0.06em;
    text-align: left;
    text-wrap: initial;
    text-shadow: 0 4px 28px rgba(20, 33, 25, 0.38);
}
/* Force our deliberate line break */
body.home .ng-editorial-hero-copy h1 > span {
    display: block;
}
/* Tiny house-style detail */
body.home .ng-editorial-hero-dot {
    display: inline !important;
    color: var(--color-coral);
}
/* Give line two a tiny bit of breathing room */
body.home .ng-editorial-hero-copy h1 > span + span {
    margin-top: 6px;
}
/* Tablet */
@media (max-width: 850px) {
    body.home .ng-editorial-hero-copy {
        max-width: 600px;
        padding-left: 25px;
        border-left-width: 4px;
    }
    body.home .ng-editorial-hero-label {
        max-width: 540px;
        margin-bottom: 20px;
    }
    body.home .ng-editorial-hero-copy h1 {
        max-width: 560px;
        font-size: clamp(3rem, 8vw, 4.4rem);
    }
}
/* Mobile */
@media (max-width: 560px) {
    body.home .ng-editorial-hero-copy {
        padding-left: 18px;
        border-left-width: 3px;
    }
    body.home .ng-editorial-hero-label {
        margin-bottom: 17px;
        font-size: 0.67rem;
        line-height: 1.5;
        letter-spacing: 0.09em;
    }
    body.home .ng-editorial-hero-copy h1 {
        font-size: clamp(2.75rem, 13vw, 3.65rem);
        line-height: 0.96;
    }
}
/* VALUES STRIP — CTA + PLAYFUL ICON MOTION */
/* Button + values on one horizontal line */

/* Ontdek wat we doen */




/* ICON MOVEMENT — Matches the existing NoordgroeiT interaction */
body.home .ng-value-icon {
    transform: translateY(0);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
/* Only the little circle moves */
body.home .ng-value-item:hover .ng-value-icon {
    transform: translateY(-6px);
    box-shadow: 0 8px 16px rgba(31, 75, 43, 0.10);
}
/* The item itself stays completely still */
body.home .ng-value-item:hover {
    transform: none;
}
/* VALUES CTA — RESPONSIVE */


/* Accessibility */
@media (prefers-reduced-motion: reduce) {
     body.home .ng-value-icon {
        transition: none;
    }
    body.home .ng-value-item:hover .ng-value-icon {
        transform: none;
    }
}
/* VALUES — OUTSIDE DISCOVERY BUTTON */
/* Button lives in the empty gutter beside the strip */


/* Hover */


/* * Once there isn't enough room beside the 1200px container, * bring it back above the strip rather than letting it overlap. */

/* Mobile */

/* VALUES — DIRECTIONAL CUE */
body.home .ng-values-strip {
    position: relative;
}
body.home .ng-values-strip .site-container {
    position: relative;
}
/* Lives in the left gutter */
body.home .ng-values-direction {
    position: absolute;
    top: 50%;
    left: -205px;
    width: 170px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    transform: translateY(-50%);
}
/* Same quiet editorial language as SCROLL OMLAAG */
body.home .ng-values-direction-text {
    color: rgba(46, 59, 50, 0.68);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
}
/* Direction line */

/* Fine line */

/* Coral dot */

/* Tiny arrow at the end */
body.home .ng-values-direction-arrow {
    margin-left: 7px;
    color: var(--color-coral);
    font-size: 0.9rem;
    font-weight: 800;
    transform: translateX(0);
    animation: ng-values-direction-pulse 2.2s ease-in-out infinite;
}
@keyframes ng-values-direction-pulse {
    0%, 100% {
        transform: translateX(0);
    }
    50% {
        transform: translateX(5px);
    }
}
/* Bring it above the strip when the side gutter gets too small */
@media (max-width: 1640px) {
    body.home .ng-values-direction {
        position: relative;
        top: auto;
        left: auto;
        width: 180px;
        margin-bottom: 26px;
        transform: none;
    }
}
/* Mobile: quiet, no unnecessary movement */
@media (max-width: 560px) {
    body.home .ng-values-direction {
        width: 165px;
        margin-bottom: 22px;
    }
}
/* Respect accessibility settings */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-values-direction-arrow {
        animation: none;
    }
}
/* HERO — CALMER TEXT SCALE */
body.home .ng-editorial-hero-copy {
    max-width: 620px;
}
body.home .ng-editorial-hero-label {
    max-width: 560px;
    margin-bottom: 20px;
    font-size: clamp(0.67rem, 0.72vw, 0.76rem);
    line-height: 1.45;
    letter-spacing: 0.105em;
}
body.home .ng-editorial-hero-copy h1 {
    max-width: 600px;
    font-size: clamp(3.05rem, 4vw, 4.45rem);
    line-height: 0.96;
    letter-spacing: -0.055em;
}
/* Tablet */
@media (max-width: 850px) {
    body.home .ng-editorial-hero-copy {
        max-width: 560px;
    }
    body.home .ng-editorial-hero-copy h1 {
        max-width: 520px;
        font-size: clamp(2.8rem, 7vw, 3.8rem);
    }
}
/* Mobile */
@media (max-width: 560px) {
    body.home .ng-editorial-hero-copy h1 {
        font-size: clamp(2.55rem, 11vw, 3.2rem);
    }
}
/* OVER ONS — TIGHTER EDITORIAL INTRO */
body.home .ng-field-intro {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.55fr);
    align-items: end;
    gap: clamp(35px, 6vw, 90px);
    margin-bottom: clamp(3rem, 5vw, 4.6rem);
}
/* Kicker now actually belongs to the heading */



/* Short supporting sentence */


/* ORIGIN STORY UNDER PHOTO */
/* Date */
/* Main statement */
/* Right-side explanation */
/* Tablet */
@media (max-width: 900px) {
    body.home .ng-field-intro {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
}
/* Mobile */





/* NUMBER STRIP — FILL THE EXISTING 1200PX CONTAINER */
body.home .ng-number-strip .site-container {
    width: min(calc(100% - (2 * var(--content-padding))), var(--content-width));
    max-width: 1200px;
    margin-inline: auto;
}
/* Use the complete container width */
body.home .ng-number-grid {
    width: 100%;
    max-width: none;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* Four genuinely equal columns */
body.home .ng-number-item {
    width: 100%;
    min-width: 0;
    padding: 0 clamp(2rem, 3vw, 3.5rem);
}
/* Keep outer edges aligned with the rest of the site */
body.home .ng-number-item:first-child {
    padding-left: 0;
}
body.home .ng-number-item:last-child {
    padding-right: 0;
}
/* NUMBER STRIP — VISUALLY USE FULL 1200PX WIDTH */
body.home .ng-number-grid {
    width: 100%;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}
/* First one stays against the left edge */
body.home .ng-number-item:first-child {
    text-align: left;
}
/* Middle two sit nicely inside their columns */
body.home .ng-number-item:nth-child(2), body.home .ng-number-item:nth-child(3) {
    text-align: center;
}
/* Last one reaches the right edge */
body.home .ng-number-item:last-child {
    text-align: right;
}
/* Paragraphs currently have max-width:190px, so align those as well */
body.home .ng-number-item:nth-child(2) p, body.home .ng-number-item:nth-child(3) p {
    margin-left: auto;
    margin-right: auto;
}
body.home .ng-number-item:last-child p {
    margin-left: auto;
    margin-right: 0;
}
/* NUMBER STRIP — FINAL EVEN SPACING */
body.home .ng-number-grid {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
}
/* Every statistic gets exactly 1/4 of the 1200px */
body.home .ng-number-item, body.home .ng-number-item:first-child, body.home .ng-number-item:nth-child(2), body.home .ng-number-item:nth-child(3), body.home .ng-number-item:last-child {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0 clamp(1.5rem, 2.5vw, 2.75rem);
    text-align: center;
}
/* Dividers exactly between the four columns */
body.home .ng-number-item + .ng-number-item {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}
/* Text sits underneath the number consistently */
body.home .ng-number-item p, body.home .ng-number-item:first-child p, body.home .ng-number-item:nth-child(2) p, body.home .ng-number-item:nth-child(3) p, body.home .ng-number-item:last-child p {
    max-width: 210px;
    margin: 8px auto 0;
    text-align: center;
}
/* Keep the numbers visually consistent */
body.home .ng-number-item strong {
    display: block;
    line-height: 1;
}
/* HEADING */
/* CAROUSEL */
/* CARDS */
/* FRONT */
/* RIGHT CARD */
/* FURTHEST CARD */
/* fourth / invisible */
/* IMAGE */
/* number badge */
/* CONTENT */
/* CAS DE DAS PLACEHOLDER */
/* ARROWS */
/* DOTS */
/* QUIET INDEX */
/* TABLET */
/* MOBILE */
/* REDUCED MOTION */
/* INITIATIVES — CIRCULAR COVERFLOW CAROUSEL */
body.home .ng-coverflow-section {
    position: relative;
    padding: clamp(5rem, 8vw, 8rem) 0 clamp(5.5rem, 9vw, 9rem);
    overflow: hidden;
    background: #fffdfa;
}
/* SECTION HEADING */
body.home .ng-coverflow-heading {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 0.42fr);
    align-items: end;
    gap: clamp(3rem, 8vw, 8rem);
    margin-bottom: clamp(3rem, 5vw, 4.5rem);
}
body.home .ng-coverflow-heading h2 {
    max-width: 640px;
    margin: 0.9rem 0 0;
    color: var(--color-dark);
    font-size: clamp(3.05rem, 4vw, 4.45rem);
    font-weight: 760;
    line-height: 0.96;
    letter-spacing: -0.055em;
}
body.home .ng-coverflow-heading > p {
    max-width: 410px;
    margin: 0 0 0.25rem;
    color: #58665e;
    font-size: 1rem;
    line-height: 1.7;
}
/* CAROUSEL SHELL */
body.home .ng-coverflow {
    position: relative;
    width: 100%;
    min-height: 600px;
    outline: none;
}
body.home .ng-coverflow-stage {
    position: relative;
    width: 100%;
    height: 525px;
    overflow: visible;
}
/* CARDS */
body.home .ng-coverflow-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(760px, 63vw);
    height: 480px;
    overflow: hidden;
    margin: 0;
    color: var(--color-white);
    background: var(--color-dark);
    border-radius: 2rem 2rem 0.55rem 2rem;
    box-shadow: 0 1.5rem 4rem rgba(41, 56, 47, 0.16);
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.75);
    transition: left 560ms cubic-bezier(.2,.8,.2,1), opacity 420ms ease, transform 560ms cubic-bezier(.2,.8,.2,1), filter 420ms ease, box-shadow 420ms ease;
    will-change: left, transform, opacity;
}
/* ACTIVE / CENTRE */
body.home .ng-coverflow-card.is-active {
    left: 50%;
    z-index: 5;
    opacity: 1;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(1);
    filter: none;
    box-shadow: 0 2rem 5rem rgba(41, 56, 47, 0.22);
}
/* LEFT PREVIEW */
body.home .ng-coverflow-card.is-prev {
    left: 8%;
    z-index: 3;
    opacity: 0.62;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(0.78);
    filter: saturate(0.72) brightness(0.78);
}
/* RIGHT PREVIEW */
body.home .ng-coverflow-card.is-next {
    left: 92%;
    z-index: 3;
    opacity: 0.62;
    pointer-events: auto;
    transform: translate(-50%, -50%) scale(0.78);
    filter: saturate(0.72) brightness(0.78);
}
/* Anything else stays outside the carousel */
body.home .ng-coverflow-card.is-hidden {
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    transform: translate(-50%, -50%) scale(0.68);
}
/* PHOTOGRAPH */
body.home .ng-coverflow-card > img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform 850ms cubic-bezier(.2,.8,.2,1);
}
/* Fine tune existing photos */
body.home .ng-coverflow-card:nth-child(1) > img {
    object-position: center 48%;
}
body.home .ng-coverflow-card:nth-child(2) > img {
    object-position: center 44%;
}
body.home .ng-coverflow-card:nth-child(3) > img {
    object-position: center 50%;
}
/* GRADIENT OVER IMAGE */
body.home .ng-coverflow-shade {
    position: absolute;
    z-index: 1;
    inset: 0;
    background: linear-gradient(180deg, rgba(25, 39, 30, 0.02) 20%, rgba(25, 39, 30, 0.15) 48%, rgba(25, 39, 30, 0.88) 100%);
    pointer-events: none;
}
/* * Side cards are already darkened through filter, * so keep their gradient visually simple. */
body.home .ng-coverflow-card.is-prev .ng-coverflow-shade, body.home .ng-coverflow-card.is-next .ng-coverflow-shade {
    background: linear-gradient(180deg, rgba(25, 39, 30, 0.08), rgba(25, 39, 30, 0.76));
}
/* TEXT OVERLAY */
body.home .ng-coverflow-copy {
    position: absolute;
    z-index: 2;
    right: clamp(1.6rem, 3vw, 3rem);
    bottom: clamp(1.6rem, 3vw, 3rem);
    left: clamp(1.6rem, 3vw, 3rem);
    max-width: 620px;
    color: var(--color-white);
    transition: opacity 350ms ease, transform 450ms cubic-bezier(.2,.8,.2,1);
}
/* Small project label */
body.home .ng-coverflow-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 0.8rem;
    color: #ffd1c8;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.14em;
    line-height: 1.3;
    text-transform: uppercase;
}
body.home .ng-coverflow-meta span {
    min-width: 32px;
    display: inline-flex;
    align-items: center;
    gap: 9px;
}
body.home .ng-coverflow-meta span::after {
    content: "";
    width: 18px;
    height: 1px;
    display: block;
    background: var(--color-coral);
}
/* Title */
body.home .ng-coverflow-copy h3 {
    max-width: 620px;
    margin: 0;
    color: var(--color-white);
    font-size: clamp(2.6rem, 4.4vw, 4.65rem);
    font-weight: 760;
    line-height: 0.94;
    letter-spacing: -0.055em;
    text-shadow: 0 3px 18px rgba(20, 33, 25, 0.35);
}
/* Description */
body.home .ng-coverflow-description {
    max-width: 520px;
    margin: 1rem 0 0;
    color: rgba(255, 255, 255, 0.88);
    font-size: 0.95rem;
    line-height: 1.65;
}
/* Link */
body.home .ng-coverflow-link {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 1.25rem;
    padding-bottom: 4px;
    color: var(--color-white);
    border-bottom: 2px solid var(--color-coral);
    font-size: 0.84rem;
    font-weight: 800;
    text-decoration: none;
}
body.home .ng-coverflow-link span {
    transition: transform 180ms ease;
}
body.home .ng-coverflow-link:hover span, body.home .ng-coverflow-link:focus-visible span {
    transform: translateX(5px);
}
/* SIDE PREVIEW TEXT */
/* * Previews show only the identity, * not a full paragraph and button. */
body.home .ng-coverflow-card.is-prev .ng-coverflow-copy, body.home .ng-coverflow-card.is-next .ng-coverflow-copy {
    right: 1.7rem;
    bottom: 1.7rem;
    left: 1.7rem;
}
body.home .ng-coverflow-card.is-prev .ng-coverflow-copy h3, body.home .ng-coverflow-card.is-next .ng-coverflow-copy h3 {
    font-size: clamp(1.8rem, 2.6vw, 2.6rem);
    line-height: 1;
}
body.home .ng-coverflow-card.is-prev .ng-coverflow-description, body.home .ng-coverflow-card.is-next .ng-coverflow-description, body.home .ng-coverflow-card.is-prev .ng-coverflow-link, body.home .ng-coverflow-card.is-next .ng-coverflow-link, body.home .ng-coverflow-card.is-prev .ng-coverflow-soon, body.home .ng-coverflow-card.is-next .ng-coverflow-soon {
    display: none;
}
body.home .ng-coverflow-card.is-prev .ng-coverflow-meta, body.home .ng-coverflow-card.is-next .ng-coverflow-meta {
    margin-bottom: 0.6rem;
    font-size: 0.6rem;
}
/* Cursor indicates side card can be selected */
body.home .ng-coverflow-card.is-prev, body.home .ng-coverflow-card.is-next {
    cursor: pointer;
}
/* O & O / CAS DE DAS PLACEHOLDER */




body.home .ng-coverflow-soon {
    display: inline-block;
    margin-top: 1.3rem;
    color: #ffd1c8;
    font-size: 0.68rem;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}
/* ARROWS */
body.home .ng-coverflow-arrow {
    position: absolute;
    z-index: 20;
    top: 50%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    padding: 0;
    color: var(--color-dark);
    background: #fffdfa;
    border: 1px solid rgba(46, 59, 50, 0.14);
    border-radius: 50%;
    box-shadow: 0 10px 30px rgba(46, 59, 50, 0.15);
    font-size: 1rem;
    cursor: pointer;
    transform: translateY(-50%);
    transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}
body.home .ng-coverflow-arrow:hover, body.home .ng-coverflow-arrow:focus-visible {
    color: var(--color-white);
    background: var(--color-coral);
    transform: translateY(-50%) scale(1.07);
}
body.home .ng-coverflow-arrow--prev {
    left: 12px;
}
body.home .ng-coverflow-arrow--next {
    right: 12px;
}
/* COUNTER + DOTS */
body.home .ng-coverflow-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 22px;
    margin-top: 12px;
}
body.home .ng-coverflow-counter {
    display: flex;
    align-items: baseline;
    gap: 4px;
    color: rgba(46, 59, 50, 0.45);
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
}
body.home .ng-coverflow-counter strong {
    color: var(--color-coral);
    font-size: 0.85rem;
}
body.home .ng-coverflow-dots {
    display: flex;
    align-items: center;
    gap: 7px;
}
body.home .ng-coverflow-dots button {
    width: 7px;
    height: 7px;
    display: block;
    padding: 0;
    background: rgba(46, 59, 50, 0.22);
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    transition: width 200ms ease, background-color 200ms ease;
}
body.home .ng-coverflow-dots button.is-active {
    width: 25px;
    background: var(--color-coral);
}
/* TABLET */
@media (max-width: 950px) {
    body.home .ng-coverflow-heading {
        grid-template-columns: 1fr;
        gap: 1.6rem;
    }
    body.home .ng-coverflow-heading > p {
        max-width: 600px;
    }
    body.home .ng-coverflow-stage {
        height: 500px;
    }
    body.home .ng-coverflow-card {
        width: min(680px, 70vw);
        height: 450px;
    }
    body.home .ng-coverflow-card.is-prev {
        left: 4%;
    }
    body.home .ng-coverflow-card.is-next {
        left: 96%;
    }
}
/* MOBILE */
@media (max-width: 650px) {
    body.home .ng-coverflow-section {
        padding: 4.5rem 0 5rem;
    }
    body.home .ng-coverflow-heading h2 {
        font-size: clamp(2.55rem, 11vw, 3.2rem);
    }
    body.home .ng-coverflow {
        min-height: 575px;
    }
    body.home .ng-coverflow-stage {
        height: 500px;
        overflow: visible;
    }
    body.home .ng-coverflow-card {
        width: calc(100% - 3rem);
        max-width: 390px;
        height: 455px;
        border-radius: 1.5rem 1.5rem 0.4rem 1.5rem;
    }
    body.home .ng-coverflow-card.is-active {
        left: 50%;
    }
    /* * Mobile still gives a hint that more content exists. */
    body.home .ng-coverflow-card.is-prev {
        left: -34%;
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.78);
    }
    body.home .ng-coverflow-card.is-next {
        left: 134%;
        opacity: 0.38;
        transform: translate(-50%, -50%) scale(0.78);
    }
    body.home .ng-coverflow-copy {
        right: 1.4rem;
        bottom: 1.5rem;
        left: 1.4rem;
    }
    body.home .ng-coverflow-copy h3 {
        font-size: clamp(2.25rem, 10vw, 3.2rem);
    }
    body.home .ng-coverflow-description {
        font-size: 0.9rem;
        line-height: 1.55;
    }
    body.home .ng-coverflow-arrow {
        top: auto;
        bottom: -8px;
        transform: none;
    }
    body.home .ng-coverflow-arrow:hover, body.home .ng-coverflow-arrow:focus-visible {
        transform: scale(1.07);
    }
    body.home .ng-coverflow-arrow--prev {
        left: calc(50% - 62px);
    }
    body.home .ng-coverflow-arrow--next {
        right: calc(50% - 62px);
    }
    body.home .ng-coverflow-footer {
        margin-top: 62px;
    }
}
/* ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-coverflow-card, body.home .ng-coverflow-card > img, body.home .ng-coverflow-link span, body.home .ng-coverflow-arrow {
        transition: none;
    }
}
/* COVERFLOW — SMALLER PREVIEWS INSIDE 1200PX */
body.home .ng-coverflow-stage {
    overflow: hidden;
    border-radius: 2rem;
}
/* Centre card stays the hero of the carousel */
body.home .ng-coverflow-card.is-active {
    left: 50%;
    transform: translate(-50%, -50%) scale(1);
}
/* Smaller left preview */
body.home .ng-coverflow-card.is-prev {
    left: 22%;
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(0.62);
    filter: saturate(0.7) brightness(0.78);
}
/* Smaller right preview */
body.home .ng-coverflow-card.is-next {
    left: 78%;
    opacity: 0.52;
    transform: translate(-50%, -50%) scale(0.62);
    filter: saturate(0.7) brightness(0.78);
}
/* Previews should feel quieter than the centre */
body.home .ng-coverflow-card.is-prev .ng-coverflow-copy, body.home .ng-coverflow-card.is-next .ng-coverflow-copy {
    right: 2rem;
    bottom: 2rem;
    left: 2rem;
}
body.home .ng-coverflow-card.is-prev .ng-coverflow-copy h3, body.home .ng-coverflow-card.is-next .ng-coverflow-copy h3 {
    font-size: 2.25rem;
}
/* Arrows also stay comfortably inside the carousel */
body.home .ng-coverflow-arrow--prev {
    left: 24px;
}
body.home .ng-coverflow-arrow--next {
    right: 24px;
}
/* Cas de Das carousel image */
body.home .ng-coverflow-card:nth-child(4) > img {
    object-fit: fill;
    object-position: center center;
}
/* OVER ONS — MISSIE & VISIE */
body.home .ng-field-purpose {
    margin-top: clamp(3rem, 5vw, 4.8rem);
    padding-top: clamp(2.2rem, 3.5vw, 3.5rem);
    border-top: 1px solid rgba(41, 56, 47, 0.2);
}
/* Small introduction */


/* TWO CLEAR COLUMNS */


/* First column aligns with page */

/* Divider between mission and vision */

/* Small number */

/* Mission / vision label */

/* Main statement */

/* Explanation */

/* QUOTE / CLOSING LINE */


/* Keep existing compact button neat */

/* RESPONSIVE */


/* HOMEPAGE POLISH — CONSISTENT TYPOGRAPHY */
:root {
    --ng-home-section-title: clamp(2.85rem, 3.85vw, 4.15rem);
    --ng-home-body: clamp(0.98rem, 1.05vw, 1.06rem);
}
/* MAIN SECTION HEADINGS */
 body.home .ng-coverflow-heading h2, body.home .ng-nb-copy h2, body.home .join-clean-heading h2, body.home .ng-live-heading h2, body.home .ng-partner-heading h2 {
    font-size: var(--ng-home-section-title);
    line-height: 0.97;
    letter-spacing: -0.052em;
    font-weight: 750;
}
/* SECTION INTRO COPY */
 body.home .ng-coverflow-heading > p, body.home .ng-live-heading > p, body.home .ng-partner-heading > p {
    font-size: var(--ng-home-body);
    line-height: 1.68;
}
/* SMALL SECTION KICKERS */
body.home .ng-field-kicker, body.home .eyebrow, body.home .support-closing-label {
    font-size: 0.74rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}
@media (max-width: 700px) {
    :root {
        --ng-home-section-title: clamp(2.45rem, 10vw, 3.15rem);
        --ng-home-body: 0.98rem;
    }
}
/* HOMEPAGE POLISH — VERTICAL RHYTHM */
/* INITIATIVES — Less empty air around the carousel */
body.home .ng-coverflow-section {
    padding-top: clamp(4.5rem, 6vw, 6rem);
    padding-bottom: clamp(4.5rem, 6vw, 6.25rem);
}
body.home .ng-coverflow-heading {
    margin-bottom: clamp(2.25rem, 3.5vw, 3.25rem);
}
/* DOE MEE — Keep the dark chapter substantial, but tighter */

body.home .join-clean-heading {
    margin-bottom: clamp(2.1rem, 3.2vw, 2.9rem);
}
/* Testimonials belong to the same story, so they don't need a giant second opening */

/* NEWS & AGENDA */

body.home .ng-live-heading {
    margin-bottom: clamp(2.2rem, 3.5vw, 3.25rem);
}
/* PARTNERS — Supporting content = slightly more compact */
body.home .ng-partner-section {
    padding-top: clamp(4.25rem, 5.5vw, 5.75rem);
    padding-bottom: clamp(4.25rem, 5.5vw, 5.75rem);
}
body.home .ng-partner-heading {
    margin-bottom: clamp(2rem, 3.2vw, 3rem);
}
/* MOBILE */
@media (max-width: 700px) {
    body.home .ng-coverflow-section, body.home .ng-partner-section {
        padding-top: 3.75rem;
        padding-bottom: 3.75rem;
    }
    body.home .ng-coverflow-heading, body.home .join-clean-heading, body.home .ng-live-heading, body.home .ng-partner-heading {
        margin-bottom: 2rem;
    }
}
/* HOMEPAGE POLISH — CONTROL LANGUAGE */
/* 1. COMPACT DESTINATION CONTROLS */


/* One clean interaction everywhere */


/* * Remove the little rotation from the older version. * Horizontal movement feels cleaner and matches the site. */

/* 2. DOE MEE — TWO IMPORTANT CHOICES — Keep them larger, but bring their details into the system. */



/* Same circular arrow proportions */

/* * Coral primary: * white circle + coral arrow. * Makes it feel related to the final support CTA. */

/* Quiet choice keeps dark circle */

/* Same hover motion */


/* 3. AGENDA DESTINATION — Same arrow language without turning it into a pill. */





/* 4. FINAL SUPPORT CTA — Keep this one deliberately more important. */
body.home .support-closing-button {
    min-height: 56px;
    gap: 20px;
    padding: 7px 8px 7px 23px;
    font-size: 0.86rem;
}
body.home .support-closing-arrow {
    width: 39px;
    font-size: 0.9rem;
}
/* 5. ACCESSIBLE KEYBOARD FOCUS */
 body.home .support-closing-button:focus-visible {
    outline: 3px solid rgba(242, 100, 82, 0.38);
    outline-offset: 4px;
}
/* MOBILE */
@media (max-width: 600px) {
    
    
    body.home .support-closing-button {
        min-height: 54px;
    }
}
/* HOMEPAGE POLISH — MICRO INTERACTIONS */
/* 1. MAIN "VAN BINNENUIT" PHOTO — Keep this calm — tiny depth, no big zoom. */
body.home .ng-field-photo img {
    transition: filter 500ms ease, box-shadow 500ms ease;
}
body.home .ng-field-photo:hover img {
    filter: saturate(1.025) contrast(1.015);
    box-shadow: 0 18px 42px rgba(41, 56, 47, 0.10);
}
/* Coral marker gets a tiny response too */
body.home .ng-field-photo::before {
    transition: width 300ms ease, background-color 300ms ease;
}
body.home .ng-field-photo:hover::before {
    width: 4.7rem;
}
/* 2. NOORDBUITEN PHOTOS — Existing movement, just slightly calmer and unified. */
body.home .ng-nb-photo img {
    transition: transform 600ms cubic-bezier(.2,.75,.25,1), filter 300ms ease;
}
body.home .ng-nb-photo:hover img {
    transform: scale(1.02);
    filter: saturate(1.03);
}
/* Captions become a touch clearer on hover */
body.home .ng-nb-photo figcaption {
    transition: color 220ms ease, transform 220ms ease;
}
body.home .ng-nb-photo:hover figcaption {
    color: rgba(255, 255, 255, 0.98);
    transform: translateY(-2px);
}
/* 3. DOE MEE TESTIMONIALS — They're not buttons, so no big movement. — Just a little depth when the mouse passes over. */
body.home .join-review-card {
    transition: background-color 260ms ease, border-color 260ms ease, transform 260ms ease;
}
body.home .join-review-card:hover {
    background: rgba(255, 255, 255, 0.095);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-2px);
}
/* Let the decorative circle quietly move */
body.home .join-review-card::after {
    transition: transform 450ms cubic-bezier(.2,.8,.2,1), background-color 300ms ease;
}
body.home .join-review-card:hover::after {
    transform: translate(-8px, -8px) scale(1.04);
    background: rgba(230, 240, 225, 0.075);
}
/* Quote mark gets a little brighter */


/* 4. NEWS CARDS — Same motion language as buttons: 2px, not 3–5px. */




/* 5. PARTNER LOGOS — Very subtle: these shouldn't behave like product cards. */
body.home .ng-partner-logo {
    transition: border-color 220ms ease, background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
body.home .ng-partner-logo:hover {
    border-color: rgba(41, 56, 47, 0.18);
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(41, 56, 47, 0.07);
}
body.home .ng-partner-logo:hover img {
    transform: scale(1.02);
    filter: saturate(1);
}
/* 6. INITIATIVE CAROUSEL — Centre card gets life; previews clearly feel selectable. */
body.home .ng-coverflow-card.is-active > img {
    transition: transform 700ms cubic-bezier(.2,.75,.25,1), filter 300ms ease;
}
body.home .ng-coverflow-card.is-active:hover > img {
    transform: scale(1.018);
    filter: saturate(1.025);
}
/* Side previews: don't move position — that could fight the carousel animation. Just wake them up slightly. */
body.home .ng-coverflow-card.is-prev, body.home .ng-coverflow-card.is-next {
    transition: left 560ms cubic-bezier(.2,.8,.2,1), opacity 300ms ease, transform 560ms cubic-bezier(.2,.8,.2,1), filter 300ms ease;
}
body.home .ng-coverflow-card.is-prev:hover, body.home .ng-coverflow-card.is-next:hover {
    opacity: 0.66;
    filter: saturate(0.88) brightness(0.88);
}
/* 7. CONSISTENT FOCUS — Mouse hover is cute; keyboard should get equal treatment. */
 body.home .ng-coverflow-card a:focus-visible {
    outline: 3px solid rgba(242, 100, 82, 0.42);
    outline-offset: 4px;
}
/* 8. TOUCH DEVICES — No sticky fake hover effects on phones/tablets. */
@media (hover: none) {
    body.home .ng-field-photo:hover img, body.home .ng-nb-photo:hover img, body.home .join-review-card:hover, body.home .join-review-card:hover::after, body.home .ng-partner-logo:hover, body.home .ng-partner-logo:hover img, body.home .ng-coverflow-card.is-active:hover > img {
        transform: none;
    }
}
/* 9. REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-field-photo img, body.home .ng-field-photo::before, body.home .ng-nb-photo img, body.home .ng-nb-photo figcaption, body.home .join-review-card, body.home .join-review-card::after, body.home .ng-partner-logo, body.home .ng-partner-logo img {
        transition: none;
    }
}
body.home .ng-field-photo figcaption {
    font-size: 0.74rem;
    line-height: 1.4;
}
/* HOMEPAGE POLISH — SURFACE DESIGN SYSTEM */
:root {
    /* Borders */
    --ng-line-light: rgba(41, 56, 47, 0.14);
    --ng-line-light-soft: rgba(41, 56, 47, 0.09);
    --ng-line-dark: rgba(255, 255, 255, 0.17);
    /* Shadows */
    --ng-shadow-rest: 0 8px 26px rgba(41, 56, 47, 0.055);
    --ng-shadow-hover: 0 14px 34px rgba(41, 56, 47, 0.10);
    /* NoordgroeiT corner language */
    --ng-radius-card: 1.3rem 1.3rem 0.35rem 1.3rem;
    --ng-radius-card-large: 1.8rem 1.8rem 0.45rem 1.8rem;
    --ng-radius-quote: 0.45rem 1.5rem 1.5rem 1.5rem;
}
 body.home .ng-live-agenda {
    border-radius: var(--ng-radius-card);
}
/* News gets a very quiet resting shadow */


body.home .join-review-card {
    border-radius: var(--ng-radius-quote);
    border-color: var(--ng-line-dark);
}
body.home .ng-coverflow-card {
    border-radius: var(--ng-radius-card-large);
    box-shadow: 0 18px 46px rgba(41, 56, 47, 0.13);
}
body.home .ng-coverflow-card.is-active {
    box-shadow: 0 24px 56px rgba(41, 56, 47, 0.18);
}
body.home .ng-partner-logo {
    border-radius: 1rem 1rem 0.3rem 1rem;
    border-color: var(--ng-line-light-soft);
    box-shadow: none;
}
body.home .ng-partner-logo:hover {
    border-color: var(--ng-line-light);
    box-shadow: 0 8px 22px rgba(41, 56, 47, 0.065);
}
body.home .ng-field-purpose, body.home .ng-partner-footer {
    border-color: var(--ng-line-light);
}


body.home .ng-field-photo::before {
    width: 3.7rem;
    height: 0.42rem;
}
body.home .ng-field-photo:hover::before {
    width: 4.3rem;
}
body.home .ng-field-photo figcaption {
    color: #68736c;
    font-size: 0.74rem;
    font-weight: 750;
    line-height: 1.4;
    letter-spacing: 0.075em;
}
/* HOMEPAGE — FINAL RESPONSIVE & ACCESSIBILITY PASS — Keep this block at the VERY bottom of style.css */
/* TABLET — 900PX */
@media (max-width: 900px) {
    /* Section introductions */
    body.home .ng-field-intro, body.home .ng-coverflow-heading, body.home .ng-live-heading, body.home .ng-partner-heading{
        grid-template-columns: 1fr;
        gap: 1.4rem;
    }
     body.home .ng-coverflow-heading > p, body.home .ng-live-heading > p, body.home .ng-partner-heading > p{
        max-width: 620px;
    }
    /* Mission / vision */
    
    /* Carousel */
    body.home .ng-coverflow-card {
        width: min(650px, 68vw);
        height: 430px;
    }
    body.home .ng-coverflow-stage {
        height: 475px;
    }
    body.home .ng-coverflow-card.is-prev {
        left: 20%;
        transform: translate(-50%, -50%) scale(0.59);
    }
    body.home .ng-coverflow-card.is-next {
        left: 80%;
        transform: translate(-50%, -50%) scale(0.59);
    }
    /* Doe mee buttons */
    
}
/* MOBILE — 700PX */
@media (max-width: 700px) {
    :root {
        --content-padding: 18px;
        --ng-home-section-title: clamp(2.35rem, 10vw, 3rem);
        --ng-home-body: 0.98rem;
    }
    /* General headings */
     body.home .ng-coverflow-heading h2, body.home .ng-nb-copy h2, body.home .join-clean-heading h2, body.home .ng-live-heading h2, body.home .ng-partner-heading h2 {
        font-size: var(--ng-home-section-title);
        line-height: 0.98;
        letter-spacing: -0.045em;
    }
    /* Supporting paragraphs */
     body.home .ng-coverflow-heading > p, body.home .ng-live-heading > p, body.home .ng-partner-heading > p {
        font-size: var(--ng-home-body);
        line-height: 1.65;
    }
    /* Small uppercase labels — Don't let these become microscopic. */
    body.home .ng-field-kicker, body.home .eyebrow, body.home .support-closing-label, body.home .ng-coverflow-meta{
        font-size: 0.72rem;
        line-height: 1.35;
    }
    /* Hero */
    body.home .ng-editorial-hero {
        min-height: 620px;
        padding: 118px 0 88px;
    }
    body.home .ng-editorial-hero-copy {
        width: min(100%, 420px);
        padding-left: 17px;
    }
    body.home .ng-editorial-hero-label {
        max-width: 350px;
        margin-bottom: 14px;
        font-size: 0.7rem;
        line-height: 1.45;
    }
    body.home .ng-editorial-hero-copy h1 {
        max-width: 370px;
        font-size: clamp(2.5rem, 11.5vw, 3.2rem);
        line-height: 0.97;
    }
    /* Values — One clean authoritative mobile layout. */
    body.home .ng-values-strip {
        padding: 1.8rem 0 2.1rem;
    }
    body.home .ng-values-grid {
        display: block;
    }
    body.home .ng-value-item, body.home .ng-value-item:first-child, body.home .ng-value-item:nth-child(2), body.home .ng-value-item:nth-child(3), body.home .ng-value-item:last-child {
        display: grid;
        grid-template-columns: 48px minmax(0, 1fr);
        align-items: start;
        gap: 0.9rem;
        padding: 1.1rem 0;
        border-left: 0 !important;
    }
    body.home .ng-value-item + .ng-value-item {
        border-top: 1px solid rgba(46, 59, 50, 0.1);
    }
    body.home .ng-value-icon {
        width: 46px;
        margin-top: 0;
    }
    body.home .ng-value-item > div {
        display: block;
    }
    body.home .ng-value-item h2 {
        margin: 0 0 0.3rem;
        font-size: 1.08rem;
    }
    body.home .ng-value-item p {
        max-width: 360px;
        margin: 0;
        font-size: 0.82rem;
        line-height: 1.5;
    }
    /* Direction cue above values */
    body.home .ng-values-direction {
        width: 155px;
        margin-bottom: 1rem;
    }
    body.home .ng-values-direction-text {
        font-size: 0.64rem;
    }
    /* Mission / vision */
    
    
    
    
    
    
    /* Numbers — retain 2 × 2 */
    body.home .ng-number-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 0;
        row-gap: 2.2rem;
    }
    body.home .ng-number-item, body.home .ng-number-item:first-child, body.home .ng-number-item:nth-child(2), body.home .ng-number-item:nth-child(3), body.home .ng-number-item:last-child {
        padding: 0 0.8rem;
        text-align: center;
    }
    body.home .ng-number-item:nth-child(odd) {
        padding-left: 0;
        border-left: 0;
    }
    body.home .ng-number-item:nth-child(even) {
        padding-right: 0;
        border-left: 1px solid rgba(255, 255, 255, 0.16);
    }
    body.home .ng-number-item p {
        max-width: 150px;
        margin: 0.45rem auto 0;
        font-size: 0.76rem;
        line-height: 1.45;
    }
    /* Circular initiatives — Main card + tiny hints either side */
    body.home .ng-coverflow {
        min-height: 540px;
    }
    body.home .ng-coverflow-stage {
        height: 465px;
        overflow: hidden;
        border-radius: 1.5rem;
    }
    body.home .ng-coverflow-card {
        width: calc(100% - 3rem);
        max-width: 390px;
        height: 420px;
        border-radius: 1.45rem 1.45rem 0.4rem 1.45rem;
    }
    body.home .ng-coverflow-card.is-active {
        left: 50%;
    }
    body.home .ng-coverflow-card.is-prev {
        left: 2%;
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(0.7);
    }
    body.home .ng-coverflow-card.is-next {
        left: 98%;
        opacity: 0.35;
        transform: translate(-50%, -50%) scale(0.7);
    }
    body.home .ng-coverflow-copy {
        right: 1.35rem;
        bottom: 1.4rem;
        left: 1.35rem;
    }
    body.home .ng-coverflow-copy h3 {
        font-size: clamp(2rem, 9vw, 2.75rem);
    }
    body.home .ng-coverflow-description {
        max-width: 330px;
        font-size: 0.9rem;
        line-height: 1.55;
    }
    /* Doe mee */
    
    
    body.home .join-reviews-grid {
        grid-template-columns: 1fr;
    }
    /* News */
    
    
    /* Support */
    body.home .support-closing-button {
        width: 100%;
        justify-content: space-between;
    }
}
/* VERY SMALL PHONES — 430PX */
@media (max-width: 430px) {
    :root {
        --content-padding: 16px;
    }
    body.home .ng-editorial-hero-copy h1 {
        font-size: clamp(2.35rem, 12vw, 2.9rem);
    }
    body.home .ng-number-item strong {
        font-size: clamp(2.15rem, 11vw, 2.75rem);
    }
    body.home .ng-coverflow-card {
        width: calc(100% - 2.25rem);
    }
    body.home .ng-coverflow-description {
        font-size: 0.86rem;
    }
}
/* CAROUSEL DOTS — LARGE CLICK AREA, SMALL VISUAL DOT */
body.home .ng-coverflow-dots {
    gap: 1px;
}
body.home .ng-coverflow-dots button {
    position: relative;
    width: 28px;
    height: 28px;
    padding: 0;
    background: transparent;
}
body.home .ng-coverflow-dots button::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 7px;
    height: 7px;
    background: rgba(46, 59, 50, 0.24);
    border-radius: 999px;
    transform: translate(-50%, -50%);
    transition: width 200ms ease, background-color 200ms ease;
}
body.home .ng-coverflow-dots button.is-active::before {
    width: 22px;
    background: var(--color-coral);
}
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    body.home .ng-coverflow-card, body.home .ng-coverflow-card > img, body.home .ng-values-direction-arrow, body.home .ng-value-icon, body.home .ng-field-photo::before, body.home .ng-nb-photo img, body.home .join-review-card, body.home .join-review-card::after, body.home .ng-partner-logo, body.home .ng-partner-track {
        animation: none !important;
        transition-duration: 0.01ms !important;
    }
}

:root {
    --ng-home-body: var(--ng-text-body);
}
/* SECTION KICKERS — Never microscopic. */
main .eyebrow, main [class*="-kicker"] {
    font-size: var(--ng-text-meta) !important;
    line-height: 1.35;
}
/* * Keep the deliberate uppercase/editorial look, * just make it readable. */
main [class*="-kicker"] {
    letter-spacing: .12em;
}
/* HTML SMALL / META */
main small {
    font-size: var(--ng-text-meta) !important;
    line-height: 1.45;
}
/* SUPPORTING NOTES / CAPTIONS */
main [class*="-note"] p, main [class*="-caption"] p, main [class*="-meta"] small, main [class*="-meta"] span {
    font-size: var(--ng-text-support) !important;
    line-height: 1.5;
}
/* MAIN COPY BLOCKS */
main [class*="-copy"] > p:not([class*="kicker"]) :not([class*="label"]), main [class*="-intro"] > p:not([class*="kicker"]) :not([class*="label"]), main [class*="-summary"] > p, main p[class*="-description"] {
    font-size: var(--ng-text-body);
    line-height: 1.65;
}
/* HOMEPAGE — VALUES DIRECTION CUE — SIMPLE TEXT + ARROW */
body.home .ng-values-direction {
    position: absolute;
    top: 50%;
    left: -205px;
    width: auto;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: .7rem;
    transform: translateY(-50%);
}
body.home .ng-values-direction-text {
    color: rgba(46, 59, 50, .68);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    line-height: 1.2;
    text-transform: uppercase;
    white-space: nowrap;
}
body.home .ng-values-direction-arrow {
    margin: 0;
    color: var(--color-coral);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
    animation: ng-values-direction-pulse 2.2s ease-in-out infinite;
}
/* Kill old line + dot */


@media (max-width: 1640px) {
    body.home .ng-values-direction {
        position: relative;
        top: auto;
        left: auto;
        width: auto;
        margin-bottom: 1.5rem;
        transform: none;
    }
}
@media (max-width: 560px) {
    body.home .ng-values-direction {
        margin-bottom: 1.25rem;
    }
}
/* Ontdek wat we doen — position only */
body.home .ng-values-direction {
    position: absolute;
    top: 50%;
    right: calc(100% + 32px);
    left: auto;
    width: max-content;
    display: inline-flex;
    align-items: center;
    flex-direction: row;
    gap: .75rem;
    margin: 0;
    transform: translateY(-50%);
}
/* HOMEPAGE — VAN BINNENUIT */

/* INTRO */





/* PHOTO */







/* JOURNEY */

/* Route */



/* Origin beneath photo */

/* PURPOSE BLOCKS */




/* Labels */





/* CLOSING */



/* TABLET */

/* MOBILE */

/* ACCESSIBILITY */

/* HOMEPAGE — VAN BINNENUIT — COMMUNITY NOTICEBOARD */
.ng-home-manifesto {
    padding: clamp(5rem, 8vw, 8rem) 0;
    overflow: hidden;
    background: #f4f0e8;
    color: var(--color-dark);
}
/* INTRO */





/* STAGE */

/* PHOTO */



/* CONNECTING THREAD */



/* PAPER NOTES */


/* Mission */


/* Vision */


/* Little pin */

/* Labels */



/* PHOTO CAPTION */


/* FOOTER */



/* TABLET */

/* MOBILE */
@media (max-width: 650px) {
    .ng-home-manifesto {
        padding: 4.5rem 0;
    }
    
    
    
    
    
    
    
    
    
    
}
/* REDUCED MOTION */

/* HOMEPAGE MANIFESTO — CALMER REVEAL */
/* * Everything remains visible if JS fails. */

/* * JS adds this class once the section is ready * for scroll animation. */

/* Mission starts slightly left/down */

/* Vision starts slightly right/down */

/* Reveal state */

/* Mission first */

/* Vision follows */

/* THREAD — ONE QUIET REVEAL */



/* HOMEPAGE — INITIATIVES — NEIGHBOURHOOD EXHIBITION CAROUSEL */
body.home .ng-coverflow-section {
    position: relative;
    padding: clamp(5rem, 7vw, 7rem) 0 clamp(5rem, 7vw, 7rem);
    overflow: hidden;
    background: #fffdfa;
}
/* Soft oversized background word */
body.home .ng-coverflow-section::before {
    content: "NOORD";
    position: absolute;
    top: 45%;
    left: 50%;
    color: rgba(46, 59, 50, .035);
    font-size: clamp(11rem, 23vw, 25rem);
    font-weight: 900;
    line-height: .7;
    letter-spacing: -.08em;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* HEADING */
body.home .ng-coverflow-heading {
    position: relative;
    z-index: 3;
    margin-bottom: clamp(2.8rem, 4vw, 4rem);
}
body.home .ng-coverflow-heading h2 {
    max-width: 650px;
}
/* little coral editorial mark */
body.home .ng-coverflow-heading > div {
    position: relative;
}
body.home .ng-coverflow-heading > div::after {
    content: "";
    position: absolute;
    bottom: -1.25rem;
    left: 0;
    width: 54px;
    height: 4px;
    border-radius: 999px;
    background: var(--color-coral);
}
/* CAROUSEL FIELD */
body.home .ng-coverflow {
    position: relative;
    min-height: 610px;
}
body.home .ng-coverflow-stage {
    position: relative;
    height: 530px;
    overflow: visible;
    border-radius: 0;
}
/* * Big soft field behind the cards. * Gives the carousel a shape of its own. */
body.home .ng-coverflow-stage::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: min(1040px, 82vw);
    height: 410px;
    border-radius: 48% 52% 44% 56% / 55% 43% 57% 45%;
    background: #edf2e8;
    transform: translate(-50%, -50%) rotate(-1.2deg);
    pointer-events: none;
}
/* BASE CARD */
body.home .ng-coverflow-card {
    border-radius: 2.5rem .8rem 2.5rem 2.5rem;
    box-shadow: 0 20px 45px rgba(41, 56, 47, .12);
}
/* ACTIVE CARD */
body.home .ng-coverflow-card.is-active {
    left: 50%;
    width: min(780px, 62vw);
    height: 485px;
    z-index: 6;
    opacity: 1;
    transform: translate(-50%, -52%) scale(1);
    box-shadow: 0 32px 75px rgba(41, 56, 47, .20);
}
/* * Little coral tab — * like a marker attached to the active story. */
body.home .ng-coverflow-card.is-active::after {
    content: "";
    position: absolute;
    z-index: 5;
    top: 0;
    left: clamp(2rem, 5vw, 4rem);
    width: 58px;
    height: 8px;
    border-radius: 0 0 999px 999px;
    background: var(--color-coral);
}
/* SIDE CARDS */
body.home .ng-coverflow-card.is-prev {
    left: 13%;
    opacity: .76;
    transform: translate(-50%, -46%) rotate(-4deg) scale(.76);
    filter: saturate(.82) brightness(.84);
}
body.home .ng-coverflow-card.is-next {
    left: 87%;
    opacity: .76;
    transform: translate(-50%, -46%) rotate(4deg) scale(.76);
    filter: saturate(.82) brightness(.84);
}
/* Let side cards rise slightly when hovered */
body.home .ng-coverflow-card.is-prev:hover {
    transform: translate(-50%, -49%) rotate(-3deg) scale(.79);
}
body.home .ng-coverflow-card.is-next:hover {
    transform: translate(-50%, -49%) rotate(3deg) scale(.79);
}
/* ACTIVE IMAGE */
body.home .ng-coverflow-card.is-active > img {
    object-fit: cover;
    transform: scale(1.01);
}
body.home .ng-coverflow-card.is-active:hover > img {
    transform: scale(1.025);
}
/* * Active card doesn't need the huge dark gradient anymore. */
body.home .ng-coverflow-card.is-active .ng-coverflow-shade {
    background: linear-gradient(180deg, rgba(25, 39, 30, .02) 0%, rgba(25, 39, 30, .04) 48%, rgba(25, 39, 30, .14) 100%);
}
/* ACTIVE EDITORIAL TEXT SHEET */
body.home .ng-coverflow-card.is-active .ng-coverflow-copy {
    right: auto;
    bottom: 24px;
    left: 24px;
    width: min(520px, calc(100% - 48px));
    max-width: none;
    padding: 1.35rem 1.5rem 1.45rem;
    color: var(--color-dark);
    background: rgba(255, 253, 248, .96);
    border-radius: 1.35rem 1.35rem .35rem 1.35rem;
    box-shadow: 0 12px 35px rgba(20, 33, 25, .15);
    backdrop-filter: blur(8px);
}
/* Meta */
body.home .ng-coverflow-card.is-active .ng-coverflow-meta {
    margin-bottom: .55rem;
    color: var(--color-coral);
}
body.home .ng-coverflow-card.is-active .ng-coverflow-meta span::after {
    background: var(--color-coral);
}
/* Title */
body.home .ng-coverflow-card.is-active .ng-coverflow-copy h3 {
    color: var(--color-dark);
    font-size: clamp(2rem, 3.2vw, 3.35rem);
    line-height: .98;
    text-shadow: none;
}
/* Description */
body.home .ng-coverflow-card.is-active .ng-coverflow-description {
    max-width: 455px;
    margin-top: .75rem;
    color: rgba(46, 59, 50, .72);
    font-size: .9rem;
    line-height: 1.55;
}
/* Link */
body.home .ng-coverflow-card.is-active .ng-coverflow-link {
    margin-top: .9rem;
    color: var(--color-dark);
    border-bottom: 2px solid var(--color-coral);
}
/* ACTIVE COPY ANIMATION — Restarts each time a card becomes active */
body.home .ng-coverflow-card.is-active .ng-coverflow-copy {
    animation: ng-coverflow-sheet-in .65s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ng-coverflow-sheet-in {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* SIDE CARD COPY */
body.home .ng-coverflow-card.is-prev .ng-coverflow-copy, body.home .ng-coverflow-card.is-next .ng-coverflow-copy {
    bottom: 1.8rem;
    color: #fff;
}
body.home .ng-coverflow-card.is-prev .ng-coverflow-copy h3, body.home .ng-coverflow-card.is-next .ng-coverflow-copy h3 {
    color: #fff;
    text-shadow: 0 3px 16px rgba(20, 33, 25, .45);
}
/* ARROWS */
body.home .ng-coverflow-arrow {
    width: 52px;
    height: 52px;
    color: #fff;
    background: var(--color-dark);
    border: 0;
    box-shadow: 0 10px 30px rgba(41, 56, 47, .17);
}
body.home .ng-coverflow-arrow:hover, body.home .ng-coverflow-arrow:focus-visible {
    color: #fff;
    background: var(--color-coral);
}
body.home .ng-coverflow-arrow--prev {
    left: 30px;
}
body.home .ng-coverflow-arrow--next {
    right: 30px;
}
/* FOOTER / DOTS */
body.home .ng-coverflow-footer {
    position: relative;
    z-index: 5;
    gap: 16px;
    margin-top: 8px;
}
body.home .ng-coverflow-counter {
    color: rgba(46, 59, 50, .48);
}
body.home .ng-coverflow-counter strong {
    color: var(--color-coral);
}
/* TABLET */
@media (max-width: 950px) {
    body.home .ng-coverflow-stage::before {
        width: 92vw;
    }
    body.home .ng-coverflow-card.is-active {
        width: min(680px, 70vw);
    }
    body.home .ng-coverflow-card.is-prev {
        left: 7%;
    }
    body.home .ng-coverflow-card.is-next {
        left: 93%;
    }
}
/* MOBILE */
@media (max-width: 650px) {
    body.home .ng-coverflow-section::before {
        font-size: 10rem;
    }
    body.home .ng-coverflow-stage::before {
        width: calc(100% - 1rem);
        height: 420px;
    }
    body.home .ng-coverflow-card, body.home .ng-coverflow-card.is-active {
        width: calc(100% - 2rem);
        height: 455px;
        border-radius: 1.7rem .6rem 1.7rem 1.7rem;
    }
    body.home .ng-coverflow-card.is-prev {
        left: -28%;
        transform: translate(-50%, -48%) rotate(-3deg) scale(.72);
    }
    body.home .ng-coverflow-card.is-next {
        left: 128%;
        transform: translate(-50%, -48%) rotate(3deg) scale(.72);
    }
    body.home .ng-coverflow-card.is-active .ng-coverflow-copy {
        right: 16px;
        bottom: 16px;
        left: 16px;
        width: auto;
        padding: 1.15rem 1.15rem 1.25rem;
    }
    body.home .ng-coverflow-card.is-active .ng-coverflow-copy h3 {
        font-size: clamp(1.85rem, 9vw, 2.5rem);
    }
    body.home .ng-coverflow-arrow {
        width: 46px;
        height: 46px;
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-coverflow-card.is-active .ng-coverflow-copy {
        animation: none;
    }
}
/* INITIATIVES — MATCH PREVIOUS SECTION HEADING */
body.home .ng-coverflow-heading h2{
    font-size: var(--ng-home-section-title) !important;
    font-weight: 780 !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
    font-family: inherit !important;
}
/* HOMEPAGE — NOORDBUITEN — AUTHORITATIVE FIX + INTERACTIVE PHOTO STRIP */
/* 1. FIX LEAKING INNER-PAGE STYLES */
body.home #noordbuiten-uitgelicht.ng-nb-story {
    position: relative;
    padding: clamp(4.5rem, 6vw, 6rem) 0;
    overflow: hidden;
    background: #dde8d8 !important;
    color: var(--color-dark);
}
/* Kill decorative old circle / dot */
body.home #noordbuiten-uitgelicht.ng-nb-story::before, body.home #noordbuiten-uitgelicht.ng-nb-story::after {
    content: none !important;
}
/* Reset the inner-page .ng-nb-intro collision */

/* 2. FIX HEADING / PARAGRAPH RHYTHM */
body.home #noordbuiten-uitgelicht .ng-nb-copy {
    max-width: 680px;
}

body.home #noordbuiten-uitgelicht .ng-nb-copy h2 {
    max-width: 620px;
    margin: 0 0 1.4rem !important;
    color: var(--color-dark);
    font-size: var(--ng-home-section-title);
    font-weight: 750;
    line-height: .97;
    letter-spacing: -.052em;
}


/* 3. PHOTO ACCORDION */
body.home #noordbuiten-uitgelicht .ng-nb-gallery {
    position: relative;
    z-index: 2;
    display: flex;
    gap: clamp(.7rem, 1.2vw, 1rem);
    width: 100%;
    min-height: 0;
    height: clamp(430px, 39vw, 560px);
    margin: 0;
    overflow: hidden;
    border-radius: 2rem 2rem .6rem 2rem;
}
/* SHARED PANEL */
body.home #noordbuiten-uitgelicht .ng-nb-photo {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: auto;
    height: 100%;
    min-width: 0;
    min-height: 0;
    flex: .72 1 0;
    margin: 0;
    overflow: hidden;
    border-radius: .55rem !important;
    background: #b8c9b4;
    box-shadow: none;
    transform: none !important;
    cursor: pointer;
    transition: flex .7s cubic-bezier(.2,.75,.25,1), border-radius .5s ease;
}
/* * Main image gets the attention initially. */

/* * End image closes the composition. */

/* INTERACTION */
/* * When gallery is being explored, * all photos become slightly narrower... */
body.home #noordbuiten-uitgelicht .ng-nb-gallery:hover .ng-nb-photo {
    flex: .72 1 0;
}
/* * ...and the one you're looking at opens up. */
body.home #noordbuiten-uitgelicht .ng-nb-gallery .ng-nb-photo:hover {
    flex: 1.8 1 0;
}
/* IMAGES */
body.home #noordbuiten-uitgelicht .ng-nb-photo img {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.01) !important;
    transition: transform .75s cubic-bezier(.2,.75,.25,1), filter .4s ease !important;
}
body.home #noordbuiten-uitgelicht .ng-nb-photo:hover img {
    transform: scale(1.035) !important;
    filter: saturate(1.05);
}
/* GRADIENT */
body.home #noordbuiten-uitgelicht .ng-nb-photo::after {
    position: absolute;
    z-index: 1;
    inset: 42% 0 0;
    content: "";
    background: linear-gradient(to bottom, transparent, rgba(21, 35, 26, .82));
    pointer-events: none;
}
/* CAPTIONS */
body.home #noordbuiten-uitgelicht .ng-nb-photo figcaption {
    position: absolute;
    z-index: 3;
    right: clamp(1.1rem, 2vw, 1.65rem);
    bottom: clamp(1.1rem, 2vw, 1.65rem);
    left: clamp(1.1rem, 2vw, 1.65rem);
    color: rgba(255,255,255,.82);
    font-size: .8rem;
    line-height: 1.45;
    opacity: .82;
    transform: translateY(4px);
    transition: opacity .35s ease, transform .45s ease;
}
body.home #noordbuiten-uitgelicht .ng-nb-photo figcaption span {
    display: block;
    margin-bottom: .4rem;
    color: #fff;
    font-size: .72rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* * Expanded image gets full caption emphasis. */
body.home #noordbuiten-uitgelicht .ng-nb-photo:hover figcaption{
    opacity: 1;
    transform: translateY(0);
}
/* LITTLE CORAL ACTIVE LINE */
body.home #noordbuiten-uitgelicht .ng-nb-photo figcaption::before {
    content: "";
    display: block;
    width: 24px;
    height: 3px;
    margin-bottom: .7rem;
    border-radius: 999px;
    background: var(--color-coral);
    transition: width .4s ease;
}
body.home #noordbuiten-uitgelicht .ng-nb-photo:hover figcaption::before {
    width: 48px;
}
/* 4. SCROLL ENTRANCE */
body.home #noordbuiten-uitgelicht.is-animatable .ng-nb-photo {
    opacity: 0;
}



body.home #noordbuiten-uitgelicht.is-in-view .ng-nb-photo {
    opacity: 1;
    transform: translateY(0) !important;
    transition: opacity .8s ease, transform .9s cubic-bezier(.2,.75,.25,1), flex .7s cubic-bezier(.2,.75,.25,1);
}



/* TABLET */
@media (max-width: 900px) {
    
    body.home #noordbuiten-uitgelicht .ng-nb-gallery {
        height: 480px;
    }
}
/* MOBILE */
@media (max-width: 680px) {
    body.home #noordbuiten-uitgelicht.ng-nb-story {
        padding: 3.75rem 0;
    }
    
    /* * Mobile becomes a horizontal photo rail. * Still interactive, without crushing the images. */
    body.home #noordbuiten-uitgelicht .ng-nb-gallery {
        display: flex;
        gap: .75rem;
        height: 390px;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        border-radius: 0;
        scrollbar-width: none;
    }
    body.home #noordbuiten-uitgelicht .ng-nb-gallery::-webkit-scrollbar {
        display: none;
    }
    body.home #noordbuiten-uitgelicht .ng-nb-photo{
        flex: 0 0 min(82vw, 340px);
        height: 100%;
        border-radius: 1.25rem !important;
        scroll-snap-align: center;
    }
    body.home #noordbuiten-uitgelicht .ng-nb-gallery:hover .ng-nb-photo, body.home #noordbuiten-uitgelicht .ng-nb-gallery .ng-nb-photo:hover {
        flex: 0 0 min(82vw, 340px);
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home #noordbuiten-uitgelicht .ng-nb-photo, body.home #noordbuiten-uitgelicht .ng-nb-photo img {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* HOME — MISSIE / VISIE PHOTO DRAWERS */

/* DRAWER POSITION */

/* DRAWER */

/* Give vision opposite corner character */

/* COLLAPSED HEADER */



/* + BUTTON / HOVER AFFORDANCE */

/* HIDDEN CONTENT */



/* OPEN ON HOVER / KEYBOARD FOCUS */



/* DIM THE OTHER DRAWER SLIGHTLY */

/* MOBILE */

/* REDUCED MOTION */

/* HOME — VAN BINNENUIT — SPACING CLEANUP */
/* * Match the spacing rhythm used by the other homepage * section introductions. */

/* * No extra gap between intro and visual. */

/* * The photo starts immediately at the top of the stage. * Previously this had top: 55px, which created that * second unwanted gap. */

/* * We don't need this caption anymore now that * Missie + Visie become the interactive elements. */

/* MOBILE */

/* HOMEPAGE — MATCH INNER PAGE SECTION TYPOGRAPHY — HERO EXCLUDED */
/* * Exact same H2 treatment as Over ons / Team / * Financiën / Initiatieven / NoordbuiTen. */
body.home main section:not(.ng-editorial-hero) h2 {
    font-family: var(--font-primary) !important;
    font-size: var(--ng-section-title) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}
/* Same mobile scale as inner pages */
@media (max-width: 700px) {
    body.home main section:not(.ng-editorial-hero) h2 {
        font-size: var(--ng-section-title) !important;
        line-height: 1.06 !important;
        letter-spacing: -.035em !important;
    }
}
/* HOMEPAGE — DOE MEE V2 — INTERACTIVE CONVERSATION */

/* subtle giant background word */

/* INTRO */




/* INTERACTIVE ROWS */


/* ROW BUTTON */

/* little opening point */

/* LABEL */



/* PLUS */

/* HIDDEN PANEL */



/* OPEN STATE */







/* VOLUNTEER QUOTE */








/* FINAL CTA */



/* CTA BUTTONS */








/* TABLET / MOBILE */


/* REDUCED MOTION */

/* DOE MEE — PLAYFUL CONVERSATION PROMPTS */

/* each one gets slightly different character */


/* little symbol */

/* hover/open = wakes up */


/* when the row opens, keep contrast nice on cream */














/* positions */






/* HOMEPAGE — DOE MEE — CIRCULAR CONVERSATION JOURNEY */
body.home .ng-home-join-circle {
    position: relative;
    padding: clamp(4.75rem, 7vw, 6.5rem) 0;
    overflow: hidden;
    background: var(--color-dark);
    color: var(--color-white);
}
/* subtle background texture */
body.home .ng-home-join-circle::before {
    content: "";
    position: absolute;
    top: 28%;
    right: -160px;
    width: 470px;
    height: 470px;
    border: 1px solid rgba(255,255,255,.035);
    border-radius: 50%;
    pointer-events: none;
}
/* INTRO */
body.home .ng-home-join-circle__intro {
    position: relative;
    z-index: 5;
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .58fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(3rem, 5vw, 4rem);
}
body.home .ng-home-join-circle__eyebrow {
    margin: 0 0 1rem;
    color: #f3a28c;
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: .15em;
    text-transform: uppercase;
}
body.home .ng-home-join-circle__intro h2 {
    max-width: 690px;
    margin: 0;
    color: var(--color-white);
    /* * Same section-title system * as the inner pages. */
    font-family: var(--font-primary);
    font-size: var(--ng-section-title) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}
body.home .ng-home-join-circle__lead {
    max-width: 470px;
    margin: 0 0 .25rem;
    color: rgba(255,255,255,.67);
    font-size: 1rem;
    line-height: 1.68;
}
/* STAGE */
body.home .ng-home-join-circle__stage {
    position: relative;
    z-index: 3;
    width: 100%;
    height: clamp(520px, 46vw, 640px);
    margin: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 5vw, 4.5rem);
}
/* ORBIT */
body.home .ng-home-join-circle__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(340px, 38vw, 500px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* second imperfect circle */
body.home .ng-home-join-circle__orbit-inner {
    position: absolute;
    inset: 8%;
    border: 1px dashed rgba(240,102,83,.28);
    border-radius: 50%;
    transform: rotate(-7deg);
}
/* CENTRE */
body.home .ng-home-join-circle__orbit-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    align-items: center;
    flex-direction: column;
    color: rgba(255,255,255,.7);
    text-align: center;
    transform: translate(-50%, -50%);
}
body.home .ng-home-join-circle__orbit-centre strong {
    color: rgba(255,255,255,.83);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}
/* SLOW TRAVELLING DOT */
body.home .ng-home-join-circle__traveller {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
}
body.home .ng-home-join-circle__traveller span {
    position: absolute;
    top: -4px;
    left: 50%;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 6px rgba(240,102,83,.11);
    transform: translateX(-50%);
}
/* MOMENTS */
body.home .ng-home-join-circle__moment {
    position: absolute;
    z-index: 5;
    width: min(330px, 31%);
    color: var(--color-white);
}
/* LEFT */
body.home .ng-home-join-circle__moment--coffee {
    top: 13%;
    left: 0;
}
/* RIGHT */
body.home .ng-home-join-circle__moment--spark {
    top: 9%;
    right: 0;
}
/* BOTTOM */
body.home .ng-home-join-circle__moment--go {
    bottom: 1%;
    left: 50%;
    transform: translateX(-50%);
}
/* NODE */
body.home .ng-home-join-circle__node {
    display: block;
    width: 12px;
    height: 12px;
    margin-bottom: 1.1rem;
    border: 3px solid var(--color-dark);
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 1px rgba(240,102,83,.7), 0 0 0 7px rgba(240,102,83,.08);
}
/* MAIN COPY */
body.home .ng-home-join-circle__copy {
    max-width: 310px;
}
body.home .ng-home-join-circle__copy h3 {
    margin: 0 0 .8rem;
    color: var(--color-white);
    font-size: clamp(1.6rem, 2.2vw, 2.15rem);
    font-weight: 740;
    line-height: 1.04;
    letter-spacing: -.04em;
}
body.home .ng-home-join-circle__copy p {
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: .94rem;
    line-height: 1.65;
}
/* LITTLE POPUP LABELS */
body.home .ng-home-join-circle__tag {
    position: absolute;
    z-index: 8;
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .5rem .75rem;
    border-radius: 999px 999px 999px .32rem;
    color: var(--color-dark);
    background: #f3a28c;
    box-shadow: 0 10px 30px rgba(0,0,0,.16);
    font-size: .69rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(8px) rotate(-3deg) scale(.9);
    transition: opacity .42s ease, transform .55s cubic-bezier(.2,.9,.25,1.2);
}
/* Coffee */
body.home .ng-home-join-circle__tag--coffee {
    top: -2.4rem;
    right: 1rem;
}
/* Spark */
body.home .ng-home-join-circle__tag--spark {
    top: -2.7rem;
    left: .4rem;
    background: #dcebd7;
    transform: translateY(8px) rotate(2deg) scale(.9);
}
/* Go */
body.home .ng-home-join-circle__tag--go {
    top: -2.5rem;
    right: .5rem;
    background: #fff0c8;
    transform: translateY(8px) rotate(-2deg) scale(.9);
}
/* SCROLL REVEAL */
/* * Your existing reveal script adds .visible, * so no new JavaScript is necessary. */
body.home .ng-home-join-circle__moment.reveal {
    opacity: 0;
    transition: opacity .7s ease, transform .8s cubic-bezier(.2,.75,.25,1);
}
/* coffee starts */
body.home .ng-home-join-circle__moment--coffee.reveal {
    transform: translate(-22px, 18px);
}
/* spark follows */
body.home .ng-home-join-circle__moment--spark.reveal {
    transform: translate(22px, 18px);
}
/* bottom last */
body.home .ng-home-join-circle__moment--go.reveal {
    transform: translate(-50%, 24px);
}
/* visible */
body.home .ng-home-join-circle__moment--coffee.reveal.visible, body.home .ng-home-join-circle__moment--spark.reveal.visible {
    opacity: 1;
    transform: translate(0, 0);
}
body.home .ng-home-join-circle__moment--go.reveal.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}
/* stagger the main moments */
body.home .ng-home-join-circle__moment--coffee {
    transition-delay: .05s;
}
body.home .ng-home-join-circle__moment--spark {
    transition-delay: .32s;
}
body.home .ng-home-join-circle__moment--go {
    transition-delay: .62s;
}
/* labels pop AFTER each title appears */
body.home .ng-home-join-circle__moment.visible .ng-home-join-circle__tag {
    opacity: 1;
    transform: translateY(0) rotate(-1.5deg) scale(1);
    transition-delay: .35s;
}
body.home .ng-home-join-circle__moment--spark.visible .ng-home-join-circle__tag {
    transform: translateY(0) rotate(1deg) scale(1);
    transition-delay: .42s;
}
body.home .ng-home-join-circle__moment--go.visible .ng-home-join-circle__tag {
    transform: translateY(0) rotate(-.7deg) scale(1);
    transition-delay: .48s;
}
/* HOVER DETAILS */
body.home .ng-home-join-circle__moment:hover .ng-home-join-circle__tag {
    transform: translateY(-4px) rotate(0deg) scale(1.04);
}
body.home .ng-home-join-circle__moment:hover .ng-home-join-circle__node {
    box-shadow: 0 0 0 1px rgba(240,102,83,.8), 0 0 0 11px rgba(240,102,83,.10);
}
/* QUOTE */








/* CTA */
body.home .ng-home-join-circle__cta {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: clamp(3rem, 5vw, 4.25rem);
    padding-top: clamp(2rem, 3vw, 2.75rem);
    border-top: 1px solid rgba(255,255,255,.17);
}
body.home .ng-home-join-circle__cta > div:first-child > p {
    margin: 0 0 .4rem;
    color: #f3a28c;
    font-size: .67rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
body.home .ng-home-join-circle__cta h3 {
    margin: 0;
    color: #fff;
    font-size: clamp(1.45rem, 2.1vw, 1.95rem);
    font-weight: 730;
    line-height: 1.05;
    letter-spacing: -.035em;
}
/* CTA BUTTONS */
body.home .ng-home-join-circle__actions {
    display: flex;
    gap: .65rem;
}
body.home .ng-home-join-circle__action {
    display: inline-flex;
    align-items: center;
    gap: 1rem;
    min-height: 50px;
    padding: .75rem .85rem .75rem 1.1rem;
    border-radius: 999px;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    transition: transform .25s ease, background-color .25s ease;
}
body.home .ng-home-join-circle__action > span:last-child {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
}
body.home .ng-home-join-circle__action--primary {
    color: #fff;
    background: var(--color-coral);
}
body.home .ng-home-join-circle__action--primary > span:last-child {
    background: rgba(255,255,255,.18);
}
body.home .ng-home-join-circle__action--secondary {
    color: var(--color-dark);
    background: var(--color-cream);
}
body.home .ng-home-join-circle__action--secondary > span:last-child {
    color: #fff;
    background: var(--color-dark);
}
body.home .ng-home-join-circle__action:hover {
    transform: translateY(-3px);
}
/* TABLET */
@media (max-width: 850px) {
    body.home .ng-home-join-circle__intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    body.home .ng-home-join-circle__lead {
        max-width: 620px;
    }
    body.home .ng-home-join-circle__stage {
        height: 600px;
    }
    body.home .ng-home-join-circle__moment {
        width: 280px;
    }
    
    
    body.home .ng-home-join-circle__cta {
        align-items: flex-start;
        flex-direction: column;
    }
}
/* MOBILE — Still playful — alternating conversation path */
@media (max-width: 620px) {
    body.home .ng-home-join-circle {
        padding: 4rem 0;
    }
    body.home .ng-home-join-circle__stage {
        display: flex;
        height: auto;
        flex-direction: column;
        gap: 3.4rem;
        margin: 3rem 0 4rem;
        padding-left: 1.7rem;
    }
    /* * Circular route becomes a vertical dotted journey. */
    body.home .ng-home-join-circle__orbit {
        top: 0;
        bottom: 0;
        left: 6px;
        width: 1px;
        height: auto;
        aspect-ratio: auto;
        border: 0;
        border-left: 1px dashed rgba(240,102,83,.4);
        border-radius: 0;
        transform: none;
    }
    body.home .ng-home-join-circle__orbit-inner, body.home .ng-home-join-circle__traveller, body.home .ng-home-join-circle__orbit-centre {
        display: none;
    }
    body.home .ng-home-join-circle__moment, body.home .ng-home-join-circle__moment--coffee, body.home .ng-home-join-circle__moment--spark, body.home .ng-home-join-circle__moment--go {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: min(100%, 330px);
        transform: none;
    }
    body.home .ng-home-join-circle__moment--spark {
        align-self: flex-end;
    }
    body.home .ng-home-join-circle__moment--go {
        align-self: flex-start;
    }
    body.home .ng-home-join-circle__moment.reveal, body.home .ng-home-join-circle__moment.reveal.visible {
        transform: none;
    }
    body.home .ng-home-join-circle__tag {
        top: -2rem;
        right: auto;
        left: .3rem;
    }
    
    body.home .ng-home-join-circle__actions {
        width: 100%;
        flex-direction: column;
    }
    body.home .ng-home-join-circle__action {
        width: 100%;
        justify-content: space-between;
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-home-join-circle__traveller {
        animation: none;
    }
    body.home .ng-home-join-circle__moment, body.home .ng-home-join-circle__tag, body.home .ng-home-join-circle__action {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    body.home .ng-home-join-circle__moment--go {
        transform: translateX(-50%) !important;
    }
}
/* DOE MEE — DEFINITIVE POP SEQUENCE */
/* * IMPORTANT: * Content is visible by default. * JS only adds the animation when it is available. */
body.home .ng-home-join-circle__moment {
    opacity: 1;
}
/* Animation enabled by JS */
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment {
    opacity: 0;
    transition: opacity .65s ease, transform .75s cubic-bezier(.2,.75,.25,1);
}
/* starting positions */
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--coffee {
    transform: translate(-22px, 14px);
}
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--spark {
    transform: translate(22px, 14px);
}
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--go {
    transform: translate(-50%, 20px);
}
/* Main moment appears */
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment.is-join-visible {
    opacity: 1;
}
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--coffee.is-join-visible, body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--spark.is-join-visible {
    transform: translate(0, 0);
}
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--go.is-join-visible {
    transform: translate(-50%, 0);
}
/* LABELS */
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__tag {
    opacity: 0;
    transform: translateY(10px) rotate(-3deg) scale(.72);
    transition: opacity .28s ease, transform .48s cubic-bezier(.18,1.45,.35,1);
}
/* label actually POPS */
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment.is-label-visible .ng-home-join-circle__tag {
    opacity: 1;
    transform: translateY(0) rotate(-1deg) scale(1);
}
/* individual character */
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--spark.is-label-visible .ng-home-join-circle__tag {
    transform: translateY(0) rotate(1.5deg) scale(1);
}
body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--go.is-label-visible .ng-home-join-circle__tag {
    transform: translateY(0) rotate(-1.5deg) scale(1);
}
/* little icon reacts after popping */
body.home .ng-home-join-circle__tag > span {
    display: inline-block;
    transition: transform .45s cubic-bezier(.18,1.45,.35,1);
}
body.home .ng-home-join-circle__moment.is-label-visible .ng-home-join-circle__tag > span {
    transform: rotate(8deg) scale(1.12);
}
/* MOBILE */
@media (max-width: 620px) {
    body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment, body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--coffee, body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--spark, body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment--go {
        transform: translateY(18px);
    }
    body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment.is-join-visible {
        transform: translateY(0);
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__moment, body.home .ng-home-join-circle__stage.has-join-animation .ng-home-join-circle__tag {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}
/* DOE MEE — TRIANGLE AROUND CENTRAL CIRCLE */
body.home .ng-home-join-circle__stage {
    position: relative;
    z-index: 3;
    width: 100%;
    height: clamp(520px, 43vw, 610px);
    margin: clamp(1rem, 3vw, 2rem) 0 clamp(3rem, 5vw, 4.5rem);
}
/* CIRCLE — ACTUALLY CENTRED BETWEEN THE THREE */
body.home .ng-home-join-circle__orbit {
    position: absolute;
    top: 48%;
    left: 50%;
    width: clamp(360px, 34vw, 480px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
/* * Keep ONE softer inner circle. * No need for another moving/random-looking route. */
body.home .ng-home-join-circle__orbit-inner {
    position: absolute;
    inset: 8%;
    border: 1px dashed rgba(240,102,83,.26);
    border-radius: 50%;
}
/* THREE MOMENTS AROUND IT */
body.home .ng-home-join-circle__moment {
    position: absolute;
    z-index: 5;
    width: min(300px, 27%);
    color: #fff;
}
/* 10 o'clock */
body.home .ng-home-join-circle__moment--coffee {
    top: 8%;
    left: 2%;
}
/* 2 o'clock */
body.home .ng-home-join-circle__moment--spark {
    top: 8%;
    right: 2%;
}
/* 6 o'clock */
body.home .ng-home-join-circle__moment--go {
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
/* CENTRAL COPY */
body.home .ng-home-join-circle__orbit-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
}
body.home .ng-home-join-circle__orbit-centre small {
    margin-bottom: .45rem;
    color: #f3a28c;
    font-size: .61rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body.home .ng-home-join-circle__orbit-centre strong {
    color: rgba(255,255,255,.82);
    font-size: clamp(1rem, 1.5vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.02em;
}
/* RED DOT — ACTUAL JOURNEY */
body.home .ng-home-join-circle__traveller {
    position: absolute;
    inset: -1px;
    border-radius: 50%;
    /* * Start at the first stop: * upper-left. */
    transform: rotate(305deg);
    opacity: 0;
}
body.home .ng-home-join-circle__traveller span {
    position: absolute;
    top: -5px;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 5px rgba(240,102,83,.12);
    transform: translateX(-50%);
}
/* * ONE journey: * * upper-left * ↓ * upper-right * ↓ * bottom * * Then STOP. */
body.home .ng-home-join-circle__stage.is-journey-running .ng-home-join-circle__traveller {
    opacity: 1;
    animation: ng-home-join-travel 2.8s cubic-bezier(.55,.08,.32,.96) forwards;
}
@keyframes ng-home-join-travel {
    /* * First item */
    0% {
        transform: rotate(305deg);
    }
    /* * Hold briefly at coffee */
    14% {
        transform: rotate(305deg);
    }
    /* * Travel to second item */
    43% {
        transform: rotate(415deg);
    }
    /* * Hold at second */
    55% {
        transform: rotate(415deg);
    }
    /* * Travel to bottom */
    88% {
        transform: rotate(540deg);
    }
    /* * STOP HERE. */
    100% {
        transform: rotate(540deg);
    }
}
/* DOE MEE — CLEAN CIRCLE LAYOUT */
body.home .ng-home-join-circle__stage {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: minmax(230px, 1fr) auto minmax(230px, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(2.5rem, 5vw, 5rem);
    row-gap: clamp(1.5rem, 2.5vw, 2.5rem);
    width: 100%;
    height: auto;
    margin: clamp(2rem, 4vw, 3rem) 0 clamp(3.5rem, 5vw, 4.5rem);
}
/* CIRCLE */
body.home .ng-home-join-circle__orbit {
    position: relative;
    grid-column: 2;
    grid-row: 1;
    top: auto;
    left: auto;
    width: clamp(300px, 28vw, 390px);
    aspect-ratio: 1;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 50%;
    transform: none;
    pointer-events: none;
}
/* inner route */
body.home .ng-home-join-circle__orbit-inner {
    position: absolute;
    inset: 8%;
    border: 1px dashed rgba(240,102,83,.3);
    border-radius: 50%;
    transform: none;
}
/* CENTRE COPY */
body.home .ng-home-join-circle__orbit-centre {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 75%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    transform: translate(-50%, -50%);
}
/* MOMENTS */
body.home .ng-home-join-circle__moment {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: min(100%, 310px);
    transform: none;
    color: var(--color-white);
}
/* LEFT */
/* RIGHT */
/* BOTTOM */
body.home .ng-home-join-circle__moment--go {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 330px);
    transform: none;
}
/* MOMENT COPY */
body.home .ng-home-join-circle__copy {
    max-width: none;
}
body.home .ng-home-join-circle__copy h3 {
    margin: 0 0 .7rem;
    color: #fff;
    font-size: clamp(1.45rem, 1.8vw, 1.8rem);
    font-weight: 740;
    line-height: 1.06;
    letter-spacing: -.035em;
}
body.home .ng-home-join-circle__copy p {
    max-width: 300px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: .93rem;
    line-height: 1.62;
}
/* Bottom text centered */
body.home .ng-home-join-circle__moment--go .ng-home-join-circle__copy {
    text-align: center;
}
/* CONNECTOR NODES */
body.home .ng-home-join-circle__node {
    position: absolute;
    width: 10px;
    height: 10px;
    margin: 0;
    border: 3px solid var(--color-dark);
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 1px rgba(240,102,83,.65);
}
/* left points toward circle */
body.home .ng-home-join-circle__moment--coffee .ng-home-join-circle__node {
    top: 50%;
    right: -1.8rem;
    transform: translateY(-50%);
}
/* right points toward circle */
body.home .ng-home-join-circle__moment--spark .ng-home-join-circle__node {
    top: 50%;
    left: -1.8rem;
    transform: translateY(-50%);
}
/* bottom points upward */
body.home .ng-home-join-circle__moment--go .ng-home-join-circle__node {
    top: -1.6rem;
    left: 50%;
    transform: translateX(-50%);
}
/* POPUP LABELS */
body.home .ng-home-join-circle__tag {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-bottom: .8rem;
    padding: .48rem .72rem;
    border-radius: 999px 999px 999px .3rem;
    color: var(--color-dark);
    background: #f3a28c;
    box-shadow: 0 8px 24px rgba(0,0,0,.12);
    font-size: .67rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
}
/* second */
/* third */
body.home .ng-home-join-circle__tag--go {
    display: flex;
    margin: 0 auto .8rem;
    background: #fff0c8;
}
body.home .ng-home-join-circle__tag {
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1.15rem;
    padding: .72rem 1rem;
    border-radius: 999px 999px 999px .45rem;
    color: var(--color-dark);
    background: #f3a28c;
    box-shadow: 0 10px 24px rgba(0,0,0,.12), 0 2px 0 rgba(255,255,255,.35) inset;
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(10px) scale(.7);
    transform-origin: left center;
}
body.home .ng-home-join-circle__tag--spark {
    background: #dcebd7;
}
body.home .ng-home-join-circle__tag--go {
    margin: 0 auto 1.15rem;
    background: #fff0c8;
    transform-origin: center center;
}
body.home .ng-home-join-circle__tag.is-visible {
    animation: ng-home-tag-pop 560ms cubic-bezier(.2, 1.35, .35, 1) forwards;
}
body.home .ng-home-join-circle__moment--coffee .ng-home-join-circle__tag {
    transform-origin: left center;
}
body.home .ng-home-join-circle__moment--spark .ng-home-join-circle__tag {
    transform-origin: left center;
}
body.home .ng-home-join-circle__moment--go .ng-home-join-circle__tag {
    transform-origin: center center;
}
@keyframes ng-home-tag-pop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.68) rotate(-4deg);
    }
    45% {
        opacity: 1;
        transform: translateY(-4px) scale(1.08) rotate(1deg);
    }
    70% {
        opacity: 1;
        transform: translateY(1px) scale(.97) rotate(-.5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0deg);
    }
}
/* HOME — DOE MEE — FINAL CLEANUP / CALMER ORBIT COMPOSITION */
/* REMOVE THE RANDOM DOTS BESIDE THE TEXT — The travelling orbit dot is the ONLY coral dot. */
body.home .ng-home-join-circle .ng-home-join-circle__node {
    display: none !important;
}
/* TIGHTER, CLEANER STAGE */
body.home .ng-home-join-circle__stage {
    position: relative;
    display: grid !important;
    grid-template-columns: minmax(250px, 1fr) clamp(310px, 27vw, 380px) minmax(250px, 1fr);
    grid-template-rows: auto auto;
    align-items: center;
    column-gap: clamp(3rem, 5vw, 5.5rem);
    row-gap: clamp(2.75rem, 4vw, 4rem);
    width: 100%;
    height: auto !important;
    margin: clamp(2.5rem, 4vw, 3.5rem) 0 clamp(3.5rem, 5vw, 4.5rem);
}
/* CENTRAL CIRCLE */
body.home .ng-home-join-circle__orbit {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-column: 2;
    grid-row: 1;
    width: 100% !important;
    max-width: 380px;
    aspect-ratio: 1;
    justify-self: center;
    transform: none !important;
}
/* slightly quieter inner circle */
body.home .ng-home-join-circle__orbit-inner {
    inset: 9%;
    border-color: rgba(240,102,83,.22);
}
/* THREE MOMENTS */
body.home .ng-home-join-circle__moment {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    width: min(100%, 310px) !important;
    display: grid !important;
    grid-template-areas: "bubble" "copy";
    grid-template-columns: 1fr;
    align-content: start;
    transform: none !important;
}
/* LEFT */
body.home .ng-home-join-circle__moment--coffee {
    grid-column: 1;
    grid-row: 1;
    justify-self: end;
}
/* RIGHT */
body.home .ng-home-join-circle__moment--spark {
    grid-column: 3;
    grid-row: 1;
    justify-self: start;
}
/* BOTTOM */
body.home .ng-home-join-circle__moment--go {
    grid-column: 2;
    grid-row: 2;
    justify-self: center;
    width: min(100%, 340px) !important;
    text-align: center;
}
/* COPY */
body.home .ng-home-join-circle__copy {
    grid-area: copy;
    width: 100%;
    max-width: none;
}
body.home .ng-home-join-circle__copy h3 {
    margin: 0 0 .8rem;
    font-size: clamp(1.5rem, 1.8vw, 1.8rem);
    line-height: 1.06;
    letter-spacing: -.035em;
}
body.home .ng-home-join-circle__copy p {
    max-width: 305px;
    margin: 0;
    color: rgba(255,255,255,.62);
    font-size: .93rem;
    line-height: 1.65;
}
body.home .ng-home-join-circle__moment--go .ng-home-join-circle__copy p {
    margin-inline: auto;
}
/* SPEECH BUBBLES */
body.home .ng-home-join-circle__tag {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    grid-area: bubble;
    width: fit-content;
    display: inline-flex !important;
    align-items: center;
    gap: .55rem;
    /* * THIS is the extra breathing room * between bubble and heading. */
    margin: 0 0 1.65rem !important;
    padding: .72rem 1.05rem;
    border-radius: 1.1rem 1.1rem 1.1rem .32rem;
    color: var(--color-dark);
    font-size: .78rem;
    font-weight: 850;
    line-height: 1;
    letter-spacing: .005em;
    white-space: nowrap;
    box-shadow: 0 10px 24px rgba(0,0,0,.12);
    transform-origin: 16% 100%;
}
/* little cartoon speech tail */
body.home .ng-home-join-circle__tag::after {
    content: "";
    position: absolute;
    left: 15px;
    bottom: -6px;
    width: 12px;
    height: 12px;
    background: inherit;
    clip-path: polygon(0 0, 100% 0, 0 100%);
}
/* LEFT bubble */
body.home .ng-home-join-circle__moment--coffee .ng-home-join-circle__tag {
    justify-self: start;
    background: #f3a28c;
}
/* RIGHT bubble */
body.home .ng-home-join-circle__moment--spark .ng-home-join-circle__tag {
    justify-self: start;
    background: #dcebd7;
}
/* BOTTOM bubble */
body.home .ng-home-join-circle__moment--go .ng-home-join-circle__tag {
    justify-self: center;
    margin-bottom: 1.65rem !important;
    background: #fff0c8;
    transform-origin: 50% 100%;
}
/* bottom speech-tail centered */
body.home .ng-home-join-circle__moment--go .ng-home-join-circle__tag::after {
    left: 50%;
    transform: translateX(-50%);
}
/* CARTOON POP */
/* * JS already adds .is-label-visible. * Instead of a gentle fade: * little squash → overshoot → settle. */
body.home .ng-home-join-circle__moment .ng-home-join-circle__tag {
    opacity: 0;
    transform: translateY(10px) scale(.55) rotate(-4deg);
}
body.home .ng-home-join-circle__moment.is-label-visible .ng-home-join-circle__tag {
    animation: ngJoinBubblePop .58s cubic-bezier(.2, .9, .25, 1.25) forwards;
}
@keyframes ngJoinBubblePop {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.55) rotate(-4deg);
    }
    48% {
        opacity: 1;
        transform: translateY(-5px) scale(1.11) rotate(1.5deg);
    }
    72% {
        transform: translateY(1px) scale(.96) rotate(-.5deg);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1) rotate(0);
    }
}
/* little icon gets its own delayed boop */
body.home .ng-home-join-circle__tag > span {
    display: inline-block;
}
body.home .ng-home-join-circle__moment.is-label-visible .ng-home-join-circle__tag > span {
    animation: ngJoinBubbleIcon .42s .18s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngJoinBubbleIcon {
    0% {
        transform: scale(.6) rotate(-12deg);
    }
    65% {
        transform: scale(1.2) rotate(8deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
/* MOBILE */
@media (max-width: 760px) {
    body.home .ng-home-join-circle__stage {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        gap: 3.25rem;
    }
    body.home .ng-home-join-circle__orbit {
        grid-column: 1;
        grid-row: auto;
        width: min(78vw, 330px) !important;
        order: 2;
    }
    body.home .ng-home-join-circle__moment--coffee, body.home .ng-home-join-circle__moment--spark, body.home .ng-home-join-circle__moment--go {
        grid-column: 1;
        grid-row: auto;
        justify-self: center;
        width: min(100%, 340px) !important;
        text-align: left;
    }
    body.home .ng-home-join-circle__moment--go .ng-home-join-circle__copy p {
        margin-inline: 0;
    }
    body.home .ng-home-join-circle__moment--go .ng-home-join-circle__tag {
        justify-self: start;
    }
}
/* HOME — VOLUNTEER QUOTE WITH PORTRAIT */

/* PORTRAIT */



/* tiny coral accent */

/* LITTLE "HI" SPEECH BUBBLE */

/* little cartoon speech tail */

/* QUOTE CONTENT */







/* RIGHT-SIDE LABEL */

/* POP ANIMATION */
/* * Everything stays visible if JS fails. */


/* PHOTO POP */


/* SPEECH BUBBLE POPS AFTER PHOTO */


/* waving hand gets a tiny boop */



/* MOBILE */

/* REDUCED MOTION */












/* HOME — VRIJWILLIGERSERVARING — CLEAN SPEECH BUBBLE */
body.home .ng-volunteer-spotlight {
    position: relative;
    display: grid;
    grid-template-columns: clamp(125px, 12vw, 165px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 3.5rem);
    margin-top: clamp(3rem, 5vw, 4.5rem);
    padding: clamp(3rem, 5vw, 4rem) 0;
    border-top: 1px solid rgba(255,255,255,.16);
}
/* PHOTO */
body.home .ng-volunteer-spotlight__portrait {
    position: relative;
    z-index: 3;
    width: clamp(125px, 12vw, 165px);
    aspect-ratio: .88;
    margin: 0;
    overflow: hidden;
    border: 5px solid var(--color-cream);
    border-radius: 1.8rem 1.8rem .6rem 1.8rem;
    background: var(--color-cream);
    box-shadow: 0 18px 45px rgba(0,0,0,.22);
    transform: rotate(-2deg);
}
body.home .ng-volunteer-spotlight__portrait img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}
/* tiny brand accent */
body.home .ng-volunteer-spotlight__photo-dot {
    position: absolute;
    right: 9px;
    bottom: 9px;
    width: 11px;
    height: 11px;
    border: 3px solid var(--color-cream);
    border-radius: 50%;
    background: var(--color-coral);
}
/* THE ACTUAL SPEECH BUBBLE */
body.home .ng-volunteer-spotlight__bubble {
    position: relative;
    width: min(100%, 900px);
    padding: clamp(1.8rem, 3.5vw, 2.8rem) clamp(1.8rem, 4vw, 3.25rem);
    color: var(--color-dark);
    background: var(--color-cream);
    border-radius: .65rem 2rem 2rem 2rem;
    box-shadow: 0 20px 55px rgba(0,0,0,.14);
}
/* speech tail pointing to Susan */
body.home .ng-volunteer-spotlight__bubble::before {
    content: "";
    position: absolute;
    top: 42%;
    left: -22px;
    width: 28px;
    height: 34px;
    background: var(--color-cream);
    clip-path: polygon(100% 0, 0 50%, 100% 100%);
}
/* EYEBROW */
body.home .ng-volunteer-spotlight__eyebrow {
    margin: 0 0 1.15rem;
    color: var(--color-coral);
    font-size: .7rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}
/* QUOTE */
body.home .ng-volunteer-spotlight blockquote {
    max-width: 780px;
    margin: 0;
}
body.home .ng-volunteer-spotlight blockquote p {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(1.35rem, 2vw, 1.9rem);
    font-weight: 720;
    line-height: 1.38;
    letter-spacing: -.03em;
}
/* ATTRIBUTION */
body.home .ng-volunteer-spotlight footer {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .45rem .8rem;
    margin-top: 1.5rem;
    padding-top: 1.15rem;
    border-top: 1px solid rgba(46,59,50,.12);
}
body.home .ng-volunteer-spotlight footer strong {
    color: var(--color-dark);
    font-size: .82rem;
}
body.home .ng-volunteer-spotlight footer span {
    color: rgba(46,59,50,.58);
    font-size: .76rem;
}
/* SUBTLE POP-IN */
body.home .ng-volunteer-spotlight.reveal .ng-volunteer-spotlight__portrait {
    opacity: 0;
    transform: translateY(16px) rotate(-6deg) scale(.82);
    transition: opacity .55s ease, transform .7s cubic-bezier(.18,1.3,.3,1);
}
body.home .ng-volunteer-spotlight.reveal .ng-volunteer-spotlight__bubble {
    opacity: 0;
    transform: translateX(-14px) scale(.96);
    transition: opacity .55s .18s ease, transform .65s .18s cubic-bezier(.2,.8,.25,1);
}
body.home .ng-volunteer-spotlight.reveal.visible .ng-volunteer-spotlight__portrait {
    opacity: 1;
    transform: translateY(0) rotate(-2deg) scale(1);
}
body.home .ng-volunteer-spotlight.reveal.visible .ng-volunteer-spotlight__bubble {
    opacity: 1;
    transform: translateX(0) scale(1);
}
/* MOBILE */
@media (max-width: 700px) {
    body.home .ng-volunteer-spotlight {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    body.home .ng-volunteer-spotlight__portrait {
        width: 120px;
        margin-left: .5rem;
    }
    /* bubble points upward on mobile */
    body.home .ng-volunteer-spotlight__bubble::before {
        top: -17px;
        left: 42px;
        width: 30px;
        height: 20px;
        clip-path: polygon(0 100%, 50% 0, 100% 100%);
    }
    body.home .ng-volunteer-spotlight__bubble {
        padding: 1.5rem 1.35rem;
        border-radius: 1.5rem;
    }
    body.home .ng-volunteer-spotlight blockquote p {
        font-size: 1.25rem;
    }
}
/* HOME — WAT SPEELT ER IN NOORD — EDITORIAL WIJKKRANT */
body.home #actualiteit.ng-home-pulse {
    position: relative;
    padding: clamp(4.75rem, 6.5vw, 6.25rem) 0;
    overflow: hidden;
    color: var(--color-dark);
    background: var(--color-cream);
}
/* giant almost-invisible editorial mark */
body.home #actualiteit.ng-home-pulse::before {
    content: "NU";
    position: absolute;
    top: 34%;
    right: -1.5rem;
    color: rgba(46,59,50,.025);
    font-size: clamp(14rem, 25vw, 28rem);
    font-weight: 850;
    line-height: .7;
    letter-spacing: -.09em;
    pointer-events: none;
}
/* INTRO */
body.home .ng-home-pulse__intro {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, .48fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(3rem, 5vw, 4.25rem);
}
body.home .ng-home-pulse__eyebrow {
    margin: 0 0 1rem;
    color: var(--color-coral);
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: .15em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__intro h2 {
    max-width: 720px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-primary);
    font-size: var(--ng-section-title) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}
body.home .ng-home-pulse__lead {
    max-width: 440px;
    margin: 0 0 .25rem;
    color: rgba(46,59,50,.68);
    font-size: 1rem;
    line-height: 1.68;
}
/* MAIN LAYOUT */
body.home .ng-home-pulse__layout {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: minmax(0, 1.85fr) minmax(280px, .72fr);
    gap: clamp(3rem, 5vw, 5rem);
    align-items: start;
}
/* NEWS HEADING */
body.home .ng-home-pulse__subheading {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.4rem;
}
body.home .ng-home-pulse__subheading p {
    margin: 0 0 .45rem;
    color: var(--color-coral);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__subheading h3 {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(1.55rem, 2vw, 1.95rem);
    font-weight: 740;
    line-height: 1.06;
    letter-spacing: -.035em;
}
body.home .ng-home-pulse__subheading > a {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding-bottom: .2rem;
    color: rgba(46,59,50,.58);
    font-size: .72rem;
    font-weight: 750;
    text-decoration: none;
}
body.home .ng-home-pulse__subheading > a span {
    color: var(--color-coral);
    transition: transform .25s ease;
}
body.home .ng-home-pulse__subheading > a:hover span {
    transform: translate(2px,-2px);
}
/* FEATURE STORY */
body.home .ng-home-pulse__feature {
    position: relative;
    margin-bottom: 1.25rem;
}
body.home .ng-home-pulse__feature > a {
    position: relative;
    display: block;
    color: inherit;
    text-decoration: none;
}
body.home .ng-home-pulse__feature-image {
    position: relative;
    height: clamp(390px, 38vw, 540px);
    margin: 0;
    overflow: hidden;
    border-radius: 2rem 2rem .55rem 2rem;
    background: #bdcbbb;
}
body.home .ng-home-pulse__feature-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(25,40,31,.5), transparent 45%);
    pointer-events: none;
}
body.home .ng-home-pulse__feature-image img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    transition: transform .7s cubic-bezier(.2,.75,.25,1);
}
body.home .ng-home-pulse__feature:hover .ng-home-pulse__feature-image img {
    transform: scale(1.025);
}
/* round arrow */
body.home .ng-home-pulse__feature-arrow {
    position: absolute;
    z-index: 3;
    top: 1.2rem;
    right: 1.2rem;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--color-coral);
    font-size: 1rem;
    transition: transform .3s ease;
}
body.home .ng-home-pulse__feature:hover .ng-home-pulse__feature-arrow {
    transform: rotate(8deg) translate(2px,-2px);
}
/* EDITORIAL PAPER SHEET */
body.home .ng-home-pulse__feature-sheet {
    position: relative;
    z-index: 4;
    width: min(82%, 620px);
    margin: clamp(-7rem, -8vw, -5rem) 0 0 clamp(1rem, 3vw, 2.5rem);
    padding: clamp(1.5rem, 3vw, 2.2rem);
    color: var(--color-dark);
    background: rgba(244,241,236,.97);
    border-radius: .5rem 1.6rem 1.6rem 1.6rem;
    box-shadow: 0 16px 45px rgba(31,46,37,.12);
}
body.home .ng-home-pulse__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem .85rem;
    margin-bottom: .8rem;
}
body.home .ng-home-pulse__meta span {
    padding: .4rem .65rem;
    border-radius: 999px;
    color: var(--color-green);
    background: var(--color-green-light);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__meta time {
    color: rgba(46,59,50,.48);
    font-size: .68rem;
    font-weight: 750;
    text-transform: uppercase;
}
body.home .ng-home-pulse__feature-sheet h4 {
    max-width: 520px;
    margin: 0 0 .65rem;
    color: var(--color-dark);
    font-size: clamp(1.7rem, 2.6vw, 2.5rem);
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -.045em;
}
body.home .ng-home-pulse__feature-sheet > p {
    max-width: 500px;
    margin: 0;
    color: rgba(46,59,50,.66);
    font-size: .93rem;
    line-height: 1.6;
}
/* TWO SMALL STORIES */
body.home .ng-home-pulse__secondary {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    border-top: 1px solid rgba(46,59,50,.16);
}
body.home .ng-home-pulse__story {
    min-width: 0;
    padding: 1.25rem 1.25rem 0 0;
}
body.home .ng-home-pulse__story + .ng-home-pulse__story {
    padding-left: 1.25rem;
    border-left: 1px solid rgba(46,59,50,.16);
}
body.home .ng-home-pulse__story a {
    display: grid;
    grid-template-columns: 92px minmax(0,1fr);
    align-items: center;
    gap: 1rem;
    color: inherit;
    text-decoration: none;
}
body.home .ng-home-pulse__story figure {
    width: 92px;
    height: 78px;
    margin: 0;
    overflow: hidden;
    border-radius: .8rem .8rem .25rem .8rem;
}
body.home .ng-home-pulse__story figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
}
body.home .ng-home-pulse__story:hover figure img {
    transform: scale(1.06);
}
body.home .ng-home-pulse__story p {
    margin: 0 0 .35rem;
    color: var(--color-coral);
    font-size: .6rem;
    font-weight: 850;
    letter-spacing: .09em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__story h4 {
    margin: 0 0 .55rem;
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 750;
    line-height: 1.2;
    letter-spacing: -.025em;
}
body.home .ng-home-pulse__story div > span {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    color: rgba(46,59,50,.54);
    font-size: .68rem;
    font-weight: 700;
}
body.home .ng-home-pulse__story b {
    color: var(--color-coral);
}
/* AGENDA */
body.home .ng-home-pulse__agenda {
    position: relative;
    padding-left: clamp(2rem, 3vw, 3rem);
    border-left: 1px solid rgba(46,59,50,.18);
}
body.home .ng-home-pulse__agenda > header {
    margin-bottom: clamp(2rem, 3vw, 2.75rem);
}
body.home .ng-home-pulse__agenda > header p {
    margin: 0 0 .65rem;
    color: var(--color-coral);
    font-size: .66rem;
    font-weight: 850;
    letter-spacing: .13em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__agenda > header h3 {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(1.8rem, 2.5vw, 2.5rem);
    font-weight: 760;
    line-height: 1.02;
    letter-spacing: -.04em;
}
/* VERTICAL TIMELINE */
body.home .ng-home-pulse__timeline {
    position: relative;
}
body.home .ng-home-pulse__timeline::before {
    content: "";
    position: absolute;
    top: 12px;
    bottom: 12px;
    left: 5px;
    width: 1px;
    background: rgba(46,59,50,.18);
}
body.home .ng-home-pulse__event {
    position: relative;
    display: grid;
    grid-template-columns: 62px minmax(0,1fr) 28px;
    align-items: center;
    gap: 1rem;
    min-height: 100px;
    padding: 1rem 0 1rem 1.65rem;
    color: inherit;
    text-decoration: none;
    border-bottom: 1px solid rgba(46,59,50,.12);
}
body.home .ng-home-pulse__event-dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 11px;
    height: 11px;
    border: 3px solid var(--color-cream);
    border-radius: 50%;
    background: var(--color-coral);
    box-shadow: 0 0 0 1px rgba(240,102,83,.45);
    transform: translateY(-50%);
}
body.home .ng-home-pulse__event time {
    width: 58px;
    height: 58px;
    display: grid;
    place-content: center;
    text-align: center;
    border: 1px solid rgba(46,59,50,.15);
    border-radius: .9rem;
    background: rgba(255,255,255,.55);
}
body.home .ng-home-pulse__event time strong {
    color: var(--color-dark);
    font-size: 1.25rem;
    line-height: 1;
}
body.home .ng-home-pulse__event time span {
    margin-top: .25rem;
    color: var(--color-coral);
    font-size: .58rem;
    font-weight: 850;
    letter-spacing: .08em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__event h4 {
    margin: 0 0 .45rem;
    color: var(--color-dark);
    font-size: .92rem;
    font-weight: 760;
    line-height: 1.25;
}
body.home .ng-home-pulse__event p {
    display: flex;
    flex-direction: column;
    gap: .2rem;
    margin: 0;
    color: rgba(46,59,50,.55);
    font-size: .7rem;
    line-height: 1.45;
}
body.home .ng-home-pulse__event-arrow {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-dark);
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
body.home .ng-home-pulse__event:hover .ng-home-pulse__event-arrow {
    color: #fff;
    background: var(--color-coral);
    transform: rotate(6deg);
}
/* AGENDA CTA */
body.home .ng-home-pulse__agenda-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-top: 1.5rem;
    padding-top: 1.3rem;
    color: var(--color-dark);
    text-decoration: none;
}
body.home .ng-home-pulse__agenda-link > span:first-child {
    display: flex;
    flex-direction: column;
    gap: .15rem;
}
body.home .ng-home-pulse__agenda-link small {
    color: rgba(46,59,50,.48);
    font-size: .61rem;
    font-weight: 800;
    letter-spacing: .09em;
    text-transform: uppercase;
}
body.home .ng-home-pulse__agenda-link strong {
    font-size: .85rem;
}
body.home .ng-home-pulse__agenda-link > span:last-child {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--color-dark);
    transition: transform .3s ease, background-color .3s ease;
}
body.home .ng-home-pulse__agenda-link:hover > span:last-child {
    background: var(--color-coral);
    transform: translateX(4px);
}
/* EMPTY STATES */
body.home .ng-home-pulse__empty, body.home .ng-home-pulse__agenda-empty {
    padding: 2rem;
    border: 1px solid rgba(46,59,50,.14);
    border-radius: 1.2rem;
}
body.home .ng-home-pulse__empty span, body.home .ng-home-pulse__agenda-empty span {
    color: var(--color-coral);
    font-size: .65rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
/* TABLET */
@media (max-width: 900px) {
    body.home .ng-home-pulse__layout {
        grid-template-columns: 1fr;
        gap: 4rem;
    }
    body.home .ng-home-pulse__agenda {
        padding: 2.5rem 0 0;
        border-left: 0;
        border-top: 1px solid rgba(46,59,50,.18);
    }
}
/* MOBILE */
@media (max-width: 700px) {
    body.home #actualiteit.ng-home-pulse {
        padding: 4rem 0;
    }
    body.home .ng-home-pulse__intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-bottom: 2.75rem;
    }
    body.home .ng-home-pulse__subheading {
        align-items: flex-start;
        flex-direction: column;
        gap: .75rem;
    }
    body.home .ng-home-pulse__feature-image {
        height: 360px;
    }
    body.home .ng-home-pulse__feature-sheet {
        width: calc(100% - 1.5rem);
        margin: -4rem .75rem 0;
        padding: 1.35rem;
    }
    body.home .ng-home-pulse__secondary {
        grid-template-columns: 1fr;
    }
    body.home .ng-home-pulse__story, body.home .ng-home-pulse__story + .ng-home-pulse__story {
        padding: 1.25rem 0;
        border-left: 0;
        border-bottom: 1px solid rgba(46,59,50,.14);
    }
    body.home .ng-home-pulse__event {
        grid-template-columns: 54px minmax(0,1fr) 28px;
    }
    body.home .ng-home-pulse__event time {
        width: 52px;
        height: 52px;
    }
}
/* HOME — PARTNERS POLISH */
body.home .ng-partner-heading {
    margin-bottom: clamp(2.2rem, 3.5vw, 3.2rem);
}
/* slightly calmer logo cards */
body.home .ng-partner-logo {
    transition: transform .3s ease, box-shadow .3s ease, opacity .3s ease;
}
body.home .ng-partner-logo:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(46,59,50,.10);
}
body.home .ng-partner-logo img {
    transition: transform .3s ease, filter .3s ease, opacity .3s ease;
}
body.home .ng-partner-logo:hover img {
    transform: scale(1.035);
    opacity: 1;
}
/* bottom information area */
body.home .ng-partner-footer {
    margin-top: clamp(2.4rem, 4vw, 3.4rem);
    padding-top: clamp(1.8rem, 3vw, 2.4rem);
}
/* keep the CTA a little lighter / cleaner */
body.home .ng-partner-destination {
    transition: transform .25s ease, background-color .25s ease;
}
body.home .ng-partner-destination:hover {
    transform: translateY(-3px);
}
/* HOME — FINAL SUPPORT CTA POLISH — Keep the concept, integrate it with the homepage */
/* SECTION RHYTHM */
body.home .support-closing-section {
    padding: clamp(4.5rem, 6vw, 5.75rem) 0 clamp(4.75rem, 6.5vw, 6rem);
    background: #f1e5d8;
}
/* keep transition from partners subtle */
body.home .support-closing-section::before {
    opacity: .55;
}
/* PANEL — A LITTLE SHORTER / LESS BOXY */
body.home .support-closing-panel {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .72fr);
    align-items: center;
    gap: clamp(3rem, 5vw, 5rem);
    padding: clamp(3.25rem, 5vw, 4.75rem) clamp(2.75rem, 5.5vw, 5rem);
    border-radius: 2rem 2rem .65rem 2rem;
    box-shadow: 0 22px 55px rgba(46,59,50,.13);
}
/* CORAL CORNER — Same idea, softer / more organic */
body.home .support-closing-panel::before {
    top: -125px;
    right: -75px;
    width: 310px;
    height: 285px;
    aspect-ratio: auto;
    border-radius: 42% 0 0 72%;
    transform: rotate(-3deg);
    background: var(--color-coral);
}
/* softer green shape at the bottom */
body.home .support-closing-panel::after {
    bottom: -225px;
    left: 34%;
    width: 365px;
    opacity: .08;
}
/* LEFT COPY */
body.home .support-closing-copy {
    max-width: 600px;
}
body.home .support-closing-label {
    margin-bottom: 1rem;
}
body.home .support-closing-copy h2 {
    max-width: 470px;
    /* * Keep it on the SAME homepage/inner-page * section-title system. */
    font-size: var(--ng-section-title) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}
body.home .support-closing-intro {
    max-width: 550px;
    margin-top: 1.4rem;
    font-size: 1rem;
    line-height: 1.68;
}
/* CTA slightly closer to the message */
body.home .support-closing-button {
    min-height: 52px;
    gap: 1rem;
    margin-top: 1.75rem;
    padding: .45rem .5rem .45rem 1.25rem;
}
body.home .support-closing-arrow {
    width: 36px;
}
/* RIGHT SIDE — Remove the hard dividing line. */
body.home .support-closing-side {
    position: relative;
    padding-left: clamp(1.75rem, 3.5vw, 3.25rem);
    border-left: 0;
}
/* * Softer fading divider instead. */
body.home .support-closing-side::before {
    content: "";
    position: absolute;
    top: 8%;
    bottom: 8%;
    left: 0;
    width: 1px;
    background: linear-gradient(to bottom, transparent, rgba(255,255,255,.20) 20%, rgba(255,255,255,.20) 80%, transparent);
}
/* STAMP */
body.home .support-closing-stamp {
    width: 98px;
    margin: 0 .25rem 1.65rem auto;
    box-shadow: 0 9px 24px rgba(31,46,37,.10);
    transform: rotate(4deg);
}
/* IMPACT LIST */
body.home .support-closing-side-label {
    margin-bottom: .65rem;
}
body.home .support-closing-list li {
    grid-template-columns: 30px minmax(0,1fr);
    gap: .8rem;
    padding: 1rem 0;
    font-size: clamp(.95rem, 1.2vw, 1.08rem);
    line-height: 1.35;
}
/* * Make list separators less prominent. */
body.home .support-closing-list li, body.home .support-closing-list li:first-child {
    border-color: rgba(255,255,255,.13);
}
/* SUBTLE INTERACTION */
body.home .support-closing-list li {
    transition: padding-left .25s ease, border-color .25s ease;
}
body.home .support-closing-list li:hover {
    padding-left: .35rem;
    border-color: rgba(255,255,255,.26);
}
body.home .support-closing-list li span {
    transition: color .25s ease, transform .25s ease;
}
body.home .support-closing-list li:hover span {
    color: #fff;
    transform: translateX(2px);
}
/* TABLET */
@media (max-width: 900px) {
    body.home .support-closing-panel {
        grid-template-columns: 1fr;
        gap: 2.75rem;
    }
    body.home .support-closing-side {
        padding: 2.5rem 0 0;
        border-top: 0;
    }
    body.home .support-closing-side::before {
        top: 0;
        right: 0;
        bottom: auto;
        left: 0;
        width: 100%;
        height: 1px;
        background: linear-gradient(to right, rgba(255,255,255,.20), rgba(255,255,255,.08), transparent);
    }
    body.home .support-closing-stamp {
        position: absolute;
        top: 1.75rem;
        right: 0;
    }
}
/* MOBILE */
@media (max-width: 600px) {
    body.home .support-closing-section {
        padding: 4rem 0 4.5rem;
    }
    body.home .support-closing-panel {
        gap: 2.5rem;
        padding: 2.25rem 1.35rem;
        border-radius: 1.5rem 1.5rem .5rem 1.5rem;
    }
    body.home .support-closing-copy h2 {
        max-width: 350px;
    }
    body.home .support-closing-stamp {
        position: static;
        width: 82px;
        margin: 0 0 1.5rem auto;
    }
    body.home .support-closing-side {
        padding-top: 2rem;
    }
    body.home .support-closing-button {
        width: 100%;
        justify-content: space-between;
    }
}
/* HOME — "ONTDEK WAT WE DOEN" — RESTORE ORIGINAL TYPOGRAPHY ONLY */
body.home .ng-values-direction-text {
    font-family: var(--font-primary) !important;
    font-size: .62rem !important;
    font-weight: 800 !important;
    line-height: 1.2 !important;
    letter-spacing: .16em !important;
    text-transform: uppercase !important;
    color: rgba(46, 59, 50, .68);
}
/* Original small-screen size */
@media (max-width: 560px) {
    body.home .ng-values-direction-text {
        font-size: .64rem !important;
    }
}
/* HOME — VALUES STRIP — RESTORE ORIGINAL TYPOGRAPHY */
body.home .ng-values-strip .ng-value-item h2 {
    font-family: var(--font-primary) !important;
    font-size: clamp(1.12rem, 1.3vw, 1.38rem) !important;
    font-weight: 850 !important;
    line-height: 1.1 !important;
    letter-spacing: -.035em !important;
    margin: 0 !important;
}
/* Original mobile treatment */
@media (max-width: 560px) {
    body.home .ng-values-strip .ng-value-item h2 {
        font-size: 1.08rem !important;
        line-height: 1.2 !important;
        margin: 0 0 .35rem !important;
    }
}
/* HOME — OVER NOORDGROEIT — COMMUNITY WINDOW */
body.home .ng-home-origin {
    position: relative;
    padding: clamp(4.75rem, 7vw, 6.5rem) 0;
    overflow: hidden;
    color: var(--color-dark);
    background: var(--color-cream);
}
/* INTRO */
body.home .ng-home-origin__intro {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(300px, .52fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(2.75rem, 4vw, 3.75rem);
}
body.home .ng-home-origin__eyebrow {
    margin: 0 0 1rem;
    color: var(--color-coral);
    font-size: .74rem;
    font-weight: 850;
    line-height: 1.3;
    letter-spacing: .15em;
    text-transform: uppercase;
}
body.home .ng-home-origin__intro h2 {
    max-width: 680px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-primary);
    font-size: var(--ng-section-title) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}
body.home .ng-home-origin__intro h2 span {
    display: block;
    color: var(--color-green);
}
body.home .ng-home-origin__lead {
    max-width: 450px;
    margin: 0 0 .2rem;
    color: rgba(46,59,50,.68);
    font-size: 1rem;
    line-height: 1.68;
}
/* VISUAL COMPOSITION */
body.home .ng-home-origin__visual {
    display: grid;
    grid-template-columns: clamp(125px, 13vw, 175px) minmax(0, 1fr);
    align-items: center;
    gap: clamp(1.75rem, 3.5vw, 3.75rem);
}
/* LEFT STORY MARKER */
body.home .ng-home-origin__marker {
    align-self: center;
    color: rgba(46,59,50,.58);
}
body.home .ng-home-origin__marker-line {
    position: relative;
    width: 58px;
    height: 1px;
    display: block;
    margin-bottom: 1.4rem;
    background: rgba(46,59,50,.25);
}
body.home .ng-home-origin__marker-line::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--color-coral);
    transform: translateY(-50%);
}
body.home .ng-home-origin__marker > p {
    margin: 0;
}
body.home .ng-home-origin__marker > p:first-of-type {
    display: flex;
    flex-direction: column;
    margin-bottom: 1rem;
}
body.home .ng-home-origin__marker small {
    color: var(--color-coral);
    font-size: .64rem;
    font-weight: 850;
    letter-spacing: .12em;
    text-transform: uppercase;
}
body.home .ng-home-origin__marker strong {
    margin-top: .1rem;
    color: var(--color-dark);
    font-size: clamp(2.2rem, 3vw, 3rem);
    font-weight: 760;
    line-height: 1;
    letter-spacing: -.05em;
}
body.home .ng-home-origin__marker > p:last-child {
    max-width: 140px;
    font-size: .76rem;
    line-height: 1.55;
}
/* PHOTO */
body.home .ng-home-origin__photo-wrap {
    position: relative;
    min-width: 0;
}
body.home .ng-home-origin__photo {
    position: relative;
    width: 100%;
    height: clamp(480px, 48vw, 650px);
    margin: 0;
    overflow: hidden;
    border-radius: 2.2rem 2.2rem .55rem 2.2rem;
    background: #b9c9b5;
}
body.home .ng-home-origin__photo::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(31,46,37,.30), transparent 40%);
    pointer-events: none;
}
body.home .ng-home-origin__photo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    object-position: center;
    transition: transform .9s cubic-bezier(.2,.75,.25,1);
}
body.home .ng-home-origin__photo-wrap:hover .ng-home-origin__photo img {
    transform: scale(1.018);
}
/* MISSION / VISION DRAWERS */
body.home .ng-home-origin__drawer {
    position: absolute;
    z-index: 5;
    bottom: clamp(1.1rem, 2vw, 1.6rem);
    width: min(370px, 42%);
    overflow: hidden;
    color: var(--color-dark);
    background: rgba(244,241,236,.96);
    border: 1px solid rgba(255,255,255,.55);
    box-shadow: 0 16px 40px rgba(31,46,37,.16);
    backdrop-filter: blur(12px);
    transition: width .45s cubic-bezier(.2,.75,.25,1), transform .4s ease, box-shadow .4s ease;
}
body.home .ng-home-origin__drawer--mission {
    left: clamp(1.1rem, 2vw, 1.6rem);
    border-radius: .45rem 1.4rem 1.4rem 1.4rem;
}
body.home .ng-home-origin__drawer--vision {
    right: clamp(1.1rem, 2vw, 1.6rem);
    border-radius: 1.4rem .45rem 1.4rem 1.4rem;
}
/* remove native details marker */
body.home .ng-home-origin__drawer summary {
    list-style: none;
}
body.home .ng-home-origin__drawer summary::-webkit-details-marker {
    display: none;
}
/* trigger */
body.home .ng-home-origin__drawer summary {
    min-height: 78px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.1rem;
    cursor: pointer;
}
body.home .ng-home-origin__drawer summary > span:first-child {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}
body.home .ng-home-origin__drawer summary small {
    color: var(--color-coral);
    font-size: .59rem;
    font-weight: 850;
    letter-spacing: .1em;
    text-transform: uppercase;
}
body.home .ng-home-origin__drawer summary strong {
    color: var(--color-dark);
    font-size: 1.02rem;
    font-weight: 800;
    line-height: 1.15;
}
/* + */
body.home .ng-home-origin__drawer-plus {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: var(--color-coral);
    font-size: 1.05rem;
    transition: transform .4s cubic-bezier(.2,.75,.25,1), background-color .3s ease;
}
/* HIDDEN CONTENT */
body.home .ng-home-origin__drawer-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 1.1rem;
    opacity: 0;
    transform: translateY(8px);
    transition: max-height .55s cubic-bezier(.2,.75,.25,1), opacity .3s ease, transform .45s ease, padding .45s ease;
}
body.home .ng-home-origin__drawer-content h3 {
    margin: 0 0 .65rem;
    color: var(--color-dark);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 760;
    line-height: 1.1;
    letter-spacing: -.03em;
}
body.home .ng-home-origin__drawer-content p {
    margin: 0;
    color: rgba(46,59,50,.67);
    font-size: .84rem;
    line-height: 1.6;
}
/* DESKTOP HOVER / CLICK OPEN */
@media (hover: hover) {
    body.home .ng-home-origin__drawer:hover {
        width: min(430px, 47%);
        transform: translateY(-5px);
        box-shadow: 0 22px 50px rgba(31,46,37,.20);
    }
    body.home .ng-home-origin__drawer:hover .ng-home-origin__drawer-content {
        max-height: 230px;
        padding: 0 1.1rem 1.15rem;
        opacity: 1;
        transform: translateY(0);
    }
    body.home .ng-home-origin__drawer:hover .ng-home-origin__drawer-plus {
        transform: rotate(45deg);
    }
}
/* click/tap fallback */
body.home .ng-home-origin__drawer[open] {
    width: min(430px, 47%);
    transform: translateY(-5px);
}
body.home .ng-home-origin__drawer[open] .ng-home-origin__drawer-content {
    max-height: 230px;
    padding: 0 1.1rem 1.15rem;
    opacity: 1;
    transform: translateY(0);
}
/* CLOSING STATEMENT */
body.home .ng-home-origin__footer {
    display: grid;
    grid-template-columns: clamp(125px, 13vw, 175px) minmax(0, 1fr) auto;
    align-items: end;
    gap: clamp(1.75rem, 3.5vw, 3.75rem);
    margin-top: clamp(2.5rem, 4vw, 3.5rem);
}
/* * First empty column lines the statement * up with the PHOTO rather than the page edge. */
body.home .ng-home-origin__footer > p {
    grid-column: 2;
    max-width: 650px;
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(1.7rem, 2.8vw, 2.7rem);
    font-weight: 720;
    line-height: 1.08;
    letter-spacing: -.04em;
}
body.home .ng-home-origin__footer > p span {
    color: var(--green);
}
/* CTA */
body.home .ng-home-origin__link {
    grid-column: 3;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .8rem .85rem .8rem 1rem;
    color: var(--color-dark);
    background: rgba(255,255,255,.55);
    border: 1px solid rgba(46,59,50,.14);
    border-radius: 999px;
    text-decoration: none;
    transition: transform .25s ease, background-color .25s ease;
}
body.home .ng-home-origin__link > span:first-child {
    display: flex;
    flex-direction: column;
    gap: .1rem;
}
body.home .ng-home-origin__link small {
    color: rgba(46,59,50,.5);
    font-size: .58rem;
    font-weight: 750;
    letter-spacing: .06em;
}
body.home .ng-home-origin__link strong {
    color: var(--color-dark);
    font-size: .78rem;
    font-weight: 800;
}
body.home .ng-home-origin__link-arrow {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    border-radius: 50%;
    color: #fff;
    background: var(--color-dark);
    transition: transform .25s ease, background-color .25s ease;
}
body.home .ng-home-origin__link:hover {
    background: #fff;
    transform: translateY(-3px);
}
body.home .ng-home-origin__link:hover .ng-home-origin__link-arrow {
    background: var(--color-coral);
    transform: rotate(7deg);
}
/* TABLET */
@media (max-width: 900px) {
    body.home .ng-home-origin__visual {
        grid-template-columns: 105px minmax(0,1fr);
    }
    body.home .ng-home-origin__footer {
        grid-template-columns: 105px minmax(0,1fr);
    }
    body.home .ng-home-origin__link {
        grid-column: 2;
        justify-self: start;
        margin-top: 1.5rem;
    }
}
/* MOBILE */
@media (max-width: 700px) {
    body.home .ng-home-origin {
        padding: 4rem 0;
    }
    body.home .ng-home-origin__intro {
        grid-template-columns: 1fr;
        gap: 1.3rem;
        margin-bottom: 2.5rem;
    }
    body.home .ng-home-origin__visual {
        display: block;
    }
    body.home .ng-home-origin__marker {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
    body.home .ng-home-origin__marker-line {
        width: 35px;
        flex: 0 0 35px;
        margin: 0;
    }
    body.home .ng-home-origin__marker > p:first-of-type {
        margin: 0;
    }
    body.home .ng-home-origin__marker strong {
        font-size: 1.6rem;
    }
    body.home .ng-home-origin__marker > p:last-child {
        max-width: 160px;
    }
    body.home .ng-home-origin__photo {
        height: min(115vw, 520px);
        border-radius: 1.5rem 1.5rem .4rem 1.5rem;
    }
    /* * On mobile the drawers become neat panels * underneath the photo. */
    body.home .ng-home-origin__photo-wrap {
        display: grid;
        gap: .75rem;
    }
    body.home .ng-home-origin__drawer, body.home .ng-home-origin__drawer--mission, body.home .ng-home-origin__drawer--vision, body.home .ng-home-origin__drawer[open] {
        position: relative;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        width: 100%;
        transform: none;
        border: 1px solid rgba(46,59,50,.12);
        box-shadow: none;
        backdrop-filter: none;
    }
    body.home .ng-home-origin__drawer--mission {
        margin-top: .25rem;
    }
    body.home .ng-home-origin__drawer-content {
        background: transparent;
    }
    body.home .ng-home-origin__footer {
        display: block;
        margin-top: 2.5rem;
    }
    body.home .ng-home-origin__footer > p {
        max-width: 470px;
        font-size: clamp(1.65rem, 8vw, 2.25rem);
    }
    body.home .ng-home-origin__link {
        width: fit-content;
        margin-top: 1.5rem;
    }
}
body.home .ng-home-origin__footer > p span {
    color: var(--color-green);
}
/* HOME — MISSIE / VISIE OPEN STATE */
body.home .ng-home-origin__drawer[open] .ng-home-origin__drawer-content {
    max-height: 260px !important;
    padding: 0 1.1rem 1.15rem !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}
body.home .ng-home-origin__drawer[open] .ng-home-origin__drawer-plus {
    transform: rotate(45deg);
}
/* HOME — NOORDBUITEN — STEP INTO THE PLACE */

/* IDENTITY */





/* BIG EXPERIENCE */

/* IMAGES */



/* IMAGE SHADE */

/* STORY */





/* DESTINATION */







/* IMAGE SELECTORS */







/* LOCATION TICKET */







/* TABLET */

/* MOBILE */

/* HOME — NOORDBUITEN — EDITORIAL LANDSCAPE */
body.home .ng-home-nb-landscape {
    padding: clamp(4.75rem, 7vw, 6.5rem) 0;
    overflow: hidden;
    color: var(--color-dark);
    background: var(--color-green-light);
}
/* INTRO */
body.home .ng-home-nb-landscape__intro {
    display: grid;
    grid-template-columns: minmax(190px, .42fr) minmax(0, 1fr);
    align-items: end;
    gap: clamp(3rem, 7vw, 7rem);
    margin-bottom: clamp(2.5rem, 4vw, 3.5rem);
}
body.home .ng-home-nb-landscape__identity {
    align-self: start;
}
body.home .ng-home-nb-landscape__identity p {
    margin: 0 0 1.6rem;
    color: rgba(46,59,50,.6);
    font-size: .68rem;
    font-weight: 850;
    letter-spacing: .14em;
    text-transform: uppercase;
}
body.home .ng-home-nb-landscape__identity p span {
    color: var(--color-green);
}
body.home .ng-home-nb-landscape__identity img {
    width: clamp(100px, 10vw, 145px);
    height: auto;
    display: block;
}
/* COPY */
body.home .ng-home-nb-landscape__copy {
    max-width: 720px;
}
body.home .ng-home-nb-landscape__location {
    margin: 0 0 .9rem !important;
    color: var(--color-coral) !important;
    font-size: .69rem !important;
    font-weight: 850 !important;
    letter-spacing: .13em !important;
    text-transform: uppercase;
}
body.home .ng-home-nb-landscape__copy h2 {
    max-width: 680px;
    margin: 0;
    color: var(--color-dark);
    font-family: var(--font-primary);
    font-size: var(--ng-section-title) !important;
    font-weight: 750 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
}
/* * ONLY the word "groeit" is green. */
body.home .ng-home-nb-landscape__copy h2 span {
    color: var(--color-green);
}
body.home .ng-home-nb-landscape__copy > p:last-child {
    max-width: 650px;
    margin: 1.3rem 0 0;
    color: rgba(46,59,50,.68);
    font-size: 1rem;
    line-height: 1.7;
}
/* PHOTO STAGE */
body.home .ng-home-nb-landscape__stage {
    position: relative;
    height: clamp(500px, 51vw, 675px);
    overflow: hidden;
    border-radius: 2.2rem 2.2rem .55rem 2.2rem;
    background: var(--color-dark);
    box-shadow: 0 25px 60px rgba(46,59,50,.15);
}
body.home .ng-home-nb-landscape__images, body.home .ng-home-nb-landscape__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
body.home .ng-home-nb-landscape__image {
    display: block;
    object-fit: cover;
    opacity: 0;
    transform: scale(1.035);
    transition: opacity .65s ease, transform 1s cubic-bezier(.2,.75,.25,1);
}
body.home .ng-home-nb-landscape__image.is-active {
    opacity: 1;
    transform: scale(1);
}
/* very gentle shade only at bottom */
body.home .ng-home-nb-landscape__shade {
    position: absolute;
    z-index: 2;
    inset: 45% 0 0;
    pointer-events: none;
    background: linear-gradient(to bottom, transparent, rgba(24,39,29,.54));
}
/* IMAGE SWITCHER */
body.home .ng-home-nb-landscape__tabs {
    position: absolute;
    z-index: 5;
    left: clamp(1.25rem, 3vw, 2.5rem);
    bottom: clamp(1.25rem, 3vw, 2.5rem);
    display: flex;
    gap: .45rem;
}
body.home .ng-home-nb-landscape__tab {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    min-height: 44px;
    padding: .7rem 1rem;
    border: 1px solid rgba(255,255,255,.32);
    border-radius: 999px;
    color: rgba(255,255,255,.78);
    background: rgba(31,46,37,.36);
    backdrop-filter: blur(10px);
    font-family: var(--font-primary);
    font-size: .76rem;
    font-weight: 800;
    cursor: pointer;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
body.home .ng-home-nb-landscape__tab span {
    color: var(--color-coral);
    font-size: .58rem;
    font-weight: 850;
}
body.home .ng-home-nb-landscape__tab:hover {
    transform: translateY(-3px);
}
body.home .ng-home-nb-landscape__tab.is-active {
    color: var(--color-dark);
    background: var(--color-cream);
}
/* LOCATION TICKET */
body.home .ng-home-nb-landscape__route {
    position: absolute;
    z-index: 5;
    right: clamp(1.25rem, 3vw, 2.5rem);
    bottom: clamp(1.25rem, 3vw, 2.5rem);
    display: grid;
    grid-template-columns: auto minmax(0,1fr) auto;
    align-items: center;
    gap: .75rem;
    padding: .65rem .7rem .65rem .85rem;
    color: var(--color-dark);
    background: rgba(244,241,236,.96);
    border-radius: 999px;
    text-decoration: none;
    box-shadow: 0 14px 34px rgba(20,35,25,.18);
    transition: transform .25s ease;
}
body.home .ng-home-nb-landscape__route:hover {
    transform: translateY(-3px);
}
body.home .ng-home-nb-landscape__route-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-coral);
}
body.home .ng-home-nb-landscape__route > span:nth-child(2) {
    display: flex;
    flex-direction: column;
}
body.home .ng-home-nb-landscape__route small {
    color: rgba(46,59,50,.5);
    font-size: .54rem;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
}
body.home .ng-home-nb-landscape__route strong {
    color: var(--color-dark);
    font-size: .76rem;
}
body.home .ng-home-nb-landscape__route-arrow {
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--color-dark);
}
/* FOOTER */
body.home .ng-home-nb-landscape__footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(2rem, 5vw, 5rem);
    margin-top: clamp(2rem, 3.5vw, 3rem);
}
body.home .ng-home-nb-landscape__footer p {
    max-width: 560px;
    margin: 0;
}
body.home .ng-home-nb-landscape__footer p strong {
    display: block;
    margin-bottom: .4rem;
    color: var(--color-dark);
    font-size: 1rem;
    font-weight: 800;
}
body.home .ng-home-nb-landscape__footer p span {
    color: rgba(46,59,50,.62);
    font-size: .82rem;
    line-height: 1.55;
}
/* MAIN CTA */
body.home .ng-home-nb-landscape__destination {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .7rem .75rem .7rem 1rem;
    color: var(--color-dark);
    background: rgba(255,255,255,.58);
    border: 1px solid rgba(46,59,50,.14);
    border-radius: 999px;
    text-decoration: none;
    transition: transform .25s ease, background-color .25s ease;
}
body.home .ng-home-nb-landscape__destination > span:first-child {
    display: flex;
    flex-direction: column;
    gap: .08rem;
}
body.home .ng-home-nb-landscape__destination small {
    color: rgba(46,59,50,.48);
    font-size: .56rem;
    font-weight: 750;
    letter-spacing: .05em;
}
body.home .ng-home-nb-landscape__destination strong {
    color: var(--color-dark);
    font-size: .8rem;
    font-weight: 800;
}
body.home .ng-home-nb-landscape__destination > span:last-child {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: #fff;
    background: var(--color-dark);
    transition: background-color .25s ease, transform .25s ease;
}
body.home .ng-home-nb-landscape__destination:hover {
    background: #fff;
    transform: translateY(-3px);
}
body.home .ng-home-nb-landscape__destination:hover > span:last-child {
    background: var(--color-coral);
    transform: translateX(3px);
}
/* MOBILE */
@media (max-width: 700px) {
    body.home .ng-home-nb-landscape {
        padding: 4rem 0;
    }
    body.home .ng-home-nb-landscape__intro {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    body.home .ng-home-nb-landscape__identity {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
    }
    body.home .ng-home-nb-landscape__identity p {
        margin: 0;
        max-width: 150px;
    }
    body.home .ng-home-nb-landscape__stage {
        height: min(115vw, 520px);
        border-radius: 1.5rem 1.5rem .4rem 1.5rem;
    }
    body.home .ng-home-nb-landscape__tabs {
        right: .8rem;
        bottom: .8rem;
        left: .8rem;
        display: grid;
        grid-template-columns: repeat(3,1fr);
        gap: .35rem;
    }
    body.home .ng-home-nb-landscape__tab {
        justify-content: center;
        padding: .65rem .4rem;
        font-size: .68rem;
    }
    body.home .ng-home-nb-landscape__tab span {
        display: none;
    }
    body.home .ng-home-nb-landscape__route {
        top: .8rem;
        right: .8rem;
        bottom: auto;
    }
    body.home .ng-home-nb-landscape__footer {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    body.home .ng-home-nb-landscape__destination {
        width: fit-content;
    }
}
/* HOME — INITIATIEVEN HEADING — REMOVE OLD CORAL STRIKE */
body.home .ng-coverflow-heading h2::before, body.home .ng-coverflow-heading h2::after, body.home .ng-coverflow-heading > div::before, body.home .ng-coverflow-heading > div::after {
    content: none !important;
    display: none !important;
}
body.home .ng-coverflow-heading h2, body.home .ng-coverflow-heading > div {
    border-bottom: 0 !important;
    box-shadow: none !important;
}
/* HOME — NEWS MINI HEADER */
body.home .ng-home-pulse__subheading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 1.25rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(46,59,50,.14);
}
body.home .ng-home-pulse__subheading h3 {
    margin: 0;
    color: var(--color-dark);
    font-size: clamp(1.15rem, 1.5vw, 1.4rem);
    font-weight: 780;
    line-height: 1.1;
    letter-spacing: -.03em;
}
/* ALL NEWS LINK */
body.home .ng-home-pulse__all-news {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    flex: 0 0 auto;
    color: rgba(46,59,50,.64);
    font-size: .73rem;
    font-weight: 780;
    text-decoration: none;
    transition: color .25s ease;
}
body.home .ng-home-pulse__all-news-arrow {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-dark);
    background: rgba(46,59,50,.08);
    font-size: .72rem;
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
body.home .ng-home-pulse__all-news:hover {
    color: var(--color-dark);
}
body.home .ng-home-pulse__all-news:hover .ng-home-pulse__all-news-arrow {
    color: #fff;
    background: var(--color-coral);
    transform: rotate(7deg) translate(1px,-1px);
}
/* MOBILE */
@media (max-width: 560px) {
    body.home .ng-home-pulse__subheading {
        gap: 1rem;
        margin-bottom: 1rem;
    }
    body.home .ng-home-pulse__subheading h3 {
        font-size: 1.15rem;
    }
}
/* SITE FOOTER — FINAL EDITORIAL POLISH */
.site-footer {
    padding: clamp(4.5rem, 6vw, 5.75rem) 0 1.5rem;
    color: rgba(255,255,255,.72);
    background: var(--color-dark);
}
/* MAIN FOOTER GRID */
.site-footer .footer-main {
    display: grid;
    grid-template-columns: minmax(270px, 1.25fr) minmax(135px, .6fr) minmax(150px, .65fr) minmax(240px, .9fr);
    align-items: start;
    gap: clamp(2.5rem, 5vw, 5rem);
}
/* NOORDGROEIT IDENTITY */
.site-footer .footer-identity {
    max-width: 390px;
}
/* * Keep the cream tile because the green logo * needs contrast — just make it calmer. */
.site-footer .footer-logo {
    width: min(100%, 220px);
    min-height: 88px;
    margin-bottom: 1.5rem;
    padding: 1rem 1.35rem;
    background: rgba(244,241,236,.97);
    border-radius: 1.25rem 1.25rem .4rem 1.25rem;
    box-shadow: none;
}
.site-footer .footer-logo img {
    width: 100%;
    max-height: 62px;
    object-fit: contain;
}
.site-footer .footer-identity > p {
    max-width: 360px;
    margin: 0;
    color: rgba(255,255,255,.66);
    font-size: .9rem;
    line-height: 1.7;
}
/* stichting explanation */
.site-footer .footer-organisation-note {
    max-width: 345px;
    margin-top: 1.2rem !important;
    padding: .1rem 0 .1rem 1rem;
    color: rgba(255,255,255,.72);
    border-left: 2px solid var(--color-coral);
    font-size: .78rem;
    line-height: 1.55;
}
/* COLUMN HEADINGS */
.site-footer .footer-column h2 {
    margin: .2rem 0 1.3rem;
    color: #fff;
    font-size: .69rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .15em;
    text-transform: uppercase;
}
/* LINKS */
.site-footer .footer-column ul {
    gap: .72rem;
}
.site-footer .footer-column a {
    color: rgba(255,255,255,.7);
    font-size: .87rem;
    font-weight: 650;
    line-height: 1.4;
    text-decoration: none;
}
.site-footer .footer-column li a {
    position: relative;
    display: inline-flex;
    align-items: center;
    transition: color .22s ease, transform .22s ease;
}
.site-footer .footer-column li a:hover, .site-footer .footer-column li a:focus-visible {
    color: #fff;
    transform: translateX(4px);
}
/* NEWSLETTER */
.site-footer .footer-newsletter p {
    max-width: 290px;
    margin: 0 0 1.35rem;
    color: rgba(255,255,255,.67);
    font-size: .87rem;
    line-height: 1.65;
}
/* * Replace old underline link with the same * compact-control language used elsewhere. */

/* arrow becomes the round control */



/* NOORDBUITEN — FLAT EDITORIAL STRIP */
.site-footer .footer-noordbuiten {
    display: grid;
    grid-template-columns: minmax(165px, .38fr) minmax(0, 1fr);
    align-items: center;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(3rem, 5vw, 4.25rem);
    padding: clamp(2rem, 3.5vw, 2.75rem) 0;
    /* * No more giant card inside the footer. */
    background: transparent;
    border: 0;
    border-top: 1px solid rgba(255,255,255,.13);
    border-bottom: 1px solid rgba(255,255,255,.13);
    border-radius: 0;
}
/* smaller NoordbuiTen logo tile */
.site-footer .footer-noordbuiten-logo {
    width: min(100%, 190px);
    min-height: 100px;
    display: grid;
    place-items: center;
    padding: 1rem 1.25rem;
    background: var(--color-green-light);
    border-radius: 1rem 1rem .35rem 1rem;
}
.site-footer .footer-noordbuiten-logo img {
    width: min(100%, 145px);
    max-height: 76px;
    object-fit: contain;
}
/* NOORDBUITEN COPY */
.site-footer .footer-small-label {
    margin: 0 0 .55rem;
    color: var(--color-coral);
    font-size: .63rem;
    font-weight: 850;
    line-height: 1.2;
    letter-spacing: .14em;
    text-transform: uppercase;
}
.site-footer .footer-noordbuiten-copy h2 {
    max-width: 690px;
    margin: 0 0 1.1rem;
    color: #fff;
    font-size: clamp(1.35rem, 2.2vw, 2rem);
    font-weight: 730;
    line-height: 1.1;
    letter-spacing: -.035em;
}
/* * Lose the old underline here as well. */
.site-footer .footer-noordbuiten-copy a {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: .7rem;
    padding: 0;
    color: rgba(255,255,255,.78);
    border: 0;
    font-size: .78rem;
    font-weight: 800;
    text-decoration: none;
    transition: color .25s ease;
}
.site-footer .footer-noordbuiten-copy a::after {
    content: "→";
    width: 30px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    color: var(--color-dark);
    background: var(--color-cream);
    transition: color .25s ease, background-color .25s ease, transform .25s ease;
}
.site-footer .footer-noordbuiten-copy a:hover, .site-footer .footer-noordbuiten-copy a:focus-visible {
    color: #fff;
}
.site-footer .footer-noordbuiten-copy a:hover::after, .site-footer .footer-noordbuiten-copy a:focus-visible::after {
    color: #fff;
    background: var(--color-coral);
    transform: translateX(3px);
}
/* * The old link already contains an arrow span. * Hide that because ::after is now our circular arrow. */
.site-footer .footer-noordbuiten-copy a > span {
    display: none;
}
/* BOTTOM BAR */
.site-footer .footer-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 0;
    padding-top: 1.35rem;
    border-top: 0;
    color: rgba(255,255,255,.52);
    font-size: .7rem;
}
.site-footer .footer-bottom p {
    margin: 0;
}
/* tiny final brand accent */
.site-footer .footer-bottom p:last-child {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}
.site-footer .footer-bottom p:last-child::before {
    content: "";
    width: 6px;
    height: 6px;
    flex: 0 0 6px;
    border-radius: 50%;
    background: var(--color-coral);
}
/* TABLET */
@media (max-width: 1050px) {
    .site-footer .footer-main {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 3rem 4rem;
    }
    .site-footer .footer-newsletter p {
        max-width: 360px;
    }
}
/* MOBILE */
@media (max-width: 700px) {
    .site-footer {
        padding: 4rem 0 1.5rem;
    }
    .site-footer .footer-main {
        grid-template-columns: repeat(2, minmax(0,1fr));
        gap: 2.75rem 1.5rem;
    }
    .site-footer .footer-identity, .site-footer .footer-newsletter {
        grid-column: 1 / -1;
    }
    .site-footer .footer-logo {
        width: 190px;
    }
    .site-footer .footer-noordbuiten {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        margin-top: 3rem;
        padding: 2rem 0;
    }
    .site-footer .footer-noordbuiten-logo {
        width: 165px;
    }
    .site-footer .footer-bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: .65rem;
        padding-top: 1.25rem;
    }
}
/* SMALL PHONE */
@media (max-width: 480px) {
    .site-footer .footer-main {
        grid-template-columns: 1fr;
        gap: 2.25rem;
    }
    .site-footer .footer-identity, .site-footer .footer-newsletter {
        grid-column: auto;
    }
}
/* HOME MOTION — 01 HERO — Calm opening sequence */
/* PHOTO — VERY SUBTLE SETTLE */
body.home .ng-editorial-hero-photo img {
    animation: ngHeroPhotoIn 1.45s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngHeroPhotoIn {
    from {
        opacity: .82;
        transform: scale(1.035);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* CORAL LEFT LINE */
body.home .ng-editorial-hero-copy {
    animation: ngHeroLineIn .55s .12s ease both;
}
@keyframes ngHeroLineIn {
    from {
        border-left-color: transparent;
    }
    to {
        border-left-color: var(--color-coral);
    }
}
/* EYEBROW */
body.home .ng-editorial-hero-label {
    animation: ngHeroTextIn .6s .18s cubic-bezier(.2,.75,.25,1) both;
}
/* TITLE — LINE BY LINE */
body.home .ng-editorial-hero-copy h1 > span {
    display: block;
    animation: ngHeroTitleIn .72s cubic-bezier(.18,.82,.25,1) both;
}
body.home .ng-editorial-hero-copy h1 > span:first-child {
    animation-delay: .30s;
}
body.home .ng-editorial-hero-copy h1 > span:nth-child(2) {
    animation-delay: .43s;
}
@keyframes ngHeroTitleIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* SMALL LABEL MOTION */
@keyframes ngHeroTextIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* CORAL DOT AFTER "GEZOND" */
body.home .ng-editorial-hero-dot {
    display: inline-block !important;
    transform-origin: center;
    animation: ngHeroDotIn .45s .72s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngHeroDotIn {
    0% {
        opacity: 0;
        transform: scale(.25);
    }
    65% {
        opacity: 1;
        transform: scale(1.28);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* CORNER SHAPE */
body.home .ng-hero-corner-shape {
    animation: ngHeroCornerShapeIn .85s .48s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngHeroCornerShapeIn {
    from {
        opacity: 0;
        transform: translate(35px, 35px) scale(.85);
    }
    to {
        opacity: 1;
        transform: translate(0,0) scale(1);
    }
}
/* "SAMEN VOOR NOORD" SEAL */
body.home .ng-hero-corner-seal {
    animation: ngHeroSealIn .65s .68s cubic-bezier(.18,1.25,.3,1) both;
}
@keyframes ngHeroSealIn {
    0% {
        opacity: 0;
        transform: translateY(15px) rotate(-9deg) scale(.72);
    }
    70% {
        opacity: 1;
        transform: translateY(-2px) rotate(-2deg) scale(1.04);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(-4deg) scale(1);
    }
}
/* SCROLL CUE — Keep this as the ONE repeating hero animation */
body.home .ng-editorial-hero-copy::before {
    animation: ng-editorial-scroll-dot 2.35s ease-in-out 1.15s infinite;
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-editorial-hero-photo img, body.home .ng-editorial-hero-copy, body.home .ng-editorial-hero-label, body.home .ng-editorial-hero-copy h1 > span, body.home .ng-editorial-hero-dot, body.home .ng-hero-corner-shape, body.home .ng-hero-corner-seal, body.home .ng-editorial-hero-copy::before {
        animation: none !important;
        opacity: 1 !important;
    }
}
/* HOME MOTION — 02 VALUES */
/* DIRECTION CUE */
body.home .ng-values-strip.is-values-motion-ready .ng-values-direction {
    opacity: 0;
    transform: translateY(-50%) translateX(-12px);
}
/* * The cue becomes relative on narrower screens, * so don't keep the desktop translateY there. */
@media (max-width: 1640px) {
    body.home .ng-values-strip.is-values-motion-ready .ng-values-direction {
        transform: translateX(-12px);
    }
}
body.home .ng-values-strip.is-values-visible .ng-values-direction {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    transition: opacity .5s ease, transform .6s cubic-bezier(.2,.75,.25,1);
}
@media (max-width: 1640px) {
    body.home .ng-values-strip.is-values-visible .ng-values-direction {
        transform: translateX(0);
    }
}
/* DRAW THE LITTLE LINE */



/* CORAL DOT */



/* ARROW — Stop the old infinite pulse. */
body.home .ng-values-direction-arrow {
    animation: none !important;
}
body.home .ng-values-strip.is-values-motion-ready .ng-values-direction-arrow {
    opacity: 0;
    transform: translateX(-7px);
}
body.home .ng-values-strip.is-values-visible .ng-values-direction-arrow {
    animation: ngValuesArrowIn .45s .62s cubic-bezier(.2,1.25,.3,1) both !important;
}
@keyframes ngValuesArrowIn {
    0% {
        opacity: 0;
        transform: translateX(-7px);
    }
    70% {
        opacity: 1;
        transform: translateX(3px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}
/* VALUE ITEMS */
body.home .ng-values-strip.is-values-motion-ready .ng-value-item {
    opacity: 0;
    transform: translateY(15px);
}
body.home .ng-values-strip.is-values-visible .ng-value-item {
    animation: ngValueItemIn .58s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(1) {
    animation-delay: .24s;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(2) {
    animation-delay: .34s;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(3) {
    animation-delay: .44s;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(4) {
    animation-delay: .54s;
}
@keyframes ngValueItemIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* ICON POP */
body.home .ng-values-strip.is-values-motion-ready .ng-value-icon {
    transform: scale(.72) rotate(-5deg);
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(1) .ng-value-icon {
    animation: ngValueIconPop .48s .38s cubic-bezier(.2,1.35,.3,1) both;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(2) .ng-value-icon {
    animation: ngValueIconPop .48s .48s cubic-bezier(.2,1.35,.3,1) both;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(3) .ng-value-icon {
    animation: ngValueIconPop .48s .58s cubic-bezier(.2,1.35,.3,1) both;
}
body.home .ng-values-strip.is-values-visible .ng-value-item:nth-child(4) .ng-value-icon {
    animation: ngValueIconPop .48s .68s cubic-bezier(.2,1.35,.3,1) both;
}
@keyframes ngValueIconPop {
    0% {
        transform: scale(.72) rotate(-5deg);
    }
    65% {
        transform: scale(1.08) rotate(2deg);
    }
    100% {
        transform: scale(1) rotate(0);
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-values-direction, body.home .ng-values-direction-arrow, body.home .ng-value-item, body.home .ng-value-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}
/* HOME MOTION — 03 OVER NOORDGROEIT */
/* INTRO */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__eyebrow, body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__intro h2, body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__lead {
    opacity: 0;
    transform: translateY(18px);
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__eyebrow {
    animation: ngOriginTextIn .5s .05s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__intro h2 {
    animation: ngOriginTextIn .65s .14s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__lead {
    animation: ngOriginTextIn .6s .27s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngOriginTextIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* 2023 STORY MARKER */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__marker {
    opacity: 0;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__marker {
    animation: ngOriginMarkerIn .55s .4s ease both;
}
@keyframes ngOriginMarkerIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
/* little line draws itself */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__marker-line {
    transform: scaleX(0);
    transform-origin: left center;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__marker-line {
    animation: ngOriginLineDraw .55s .44s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngOriginLineDraw {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
/* 2023 gets a tiny stamp-like arrival */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__marker strong {
    display: inline-block;
    opacity: 0;
    transform: scale(.82) rotate(-3deg);
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__marker strong {
    animation: ngOriginYearIn .5s .58s cubic-bezier(.2,1.25,.3,1) both;
}
@keyframes ngOriginYearIn {
    0% {
        opacity: 0;
        transform: scale(.82) rotate(-3deg);
    }
    70% {
        opacity: 1;
        transform: scale(1.05) rotate(1deg);
    }
    100% {
        opacity: 1;
        transform: scale(1) rotate(0);
    }
}
/* COMMUNITY PHOTO — Window opens horizontally */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__photo {
    clip-path: inset(0 100% 0 0 round 2.2rem);
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__photo {
    animation: ngOriginPhotoOpen .9s .48s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngOriginPhotoOpen {
    from {
        clip-path: inset(0 100% 0 0 round 2.2rem);
    }
    to {
        clip-path: inset(0 0 0 0 round 2.2rem);
    }
}
/* MISSIE / VISIE — Arrive after the photograph */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__drawer {
    opacity: 0;
    transform: translateY(22px);
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__drawer--mission {
    animation: ngOriginDrawerIn .55s .92s cubic-bezier(.2,.85,.25,1) both;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__drawer--vision {
    animation: ngOriginDrawerIn .55s 1.03s cubic-bezier(.2,.85,.25,1) both;
}
@keyframes ngOriginDrawerIn {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* tiny + pop */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__drawer-plus {
    transform: scale(.55);
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__drawer--mission .ng-home-origin__drawer-plus {
    animation: ngOriginPlusPop .4s 1.12s cubic-bezier(.2,1.35,.3,1) both;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__drawer--vision .ng-home-origin__drawer-plus {
    animation: ngOriginPlusPop .4s 1.23s cubic-bezier(.2,1.35,.3,1) both;
}
@keyframes ngOriginPlusPop {
    0% {
        transform: scale(.55);
    }
    70% {
        transform: scale(1.15);
    }
    100% {
        transform: scale(1);
    }
}
/* CLOSING STATEMENT */
body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__footer > p, body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__link {
    opacity: 0;
    transform: translateY(15px);
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__footer > p {
    animation: ngOriginFooterIn .6s 1.18s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-origin.is-origin-visible .ng-home-origin__link {
    animation: ngOriginFooterIn .6s 1.3s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngOriginFooterIn {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* CTA arrow gets one little nudge */
body.home .ng-home-origin.is-origin-visible .ng-home-origin__link-arrow {
    animation: ngOriginArrowNudge .45s 1.55s ease both;
}
@keyframes ngOriginArrowNudge {
    0%, 100% {
        transform: translateX(0);
    }
    55% {
        transform: translateX(4px);
    }
}
/* MOBILE — Keep the reveal simpler */
@media (max-width: 700px) {
    body.home .ng-home-origin.is-origin-motion-ready .ng-home-origin__photo {
        clip-path: inset(0 0 35% 0 round 1.5rem);
    }
    body.home .ng-home-origin.is-origin-visible .ng-home-origin__photo {
        animation: ngOriginPhotoMobile .75s .4s ease both;
    }
    @keyframes ngOriginPhotoMobile {
        from {
            clip-path: inset(0 0 35% 0 round 1.5rem);
        }
        to {
            clip-path: inset(0 0 0 0 round 1.5rem);
        }
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-home-origin * {
        animation: none !important;
        transition-duration: .01ms !important;
    }
    body.home .ng-home-origin__eyebrow, body.home .ng-home-origin__intro h2, body.home .ng-home-origin__lead, body.home .ng-home-origin__marker, body.home .ng-home-origin__marker strong, body.home .ng-home-origin__drawer, body.home .ng-home-origin__footer > p, body.home .ng-home-origin__link {
        opacity: 1 !important;
        transform: none !important;
    }
    body.home .ng-home-origin__photo {
        clip-path: none !important;
    }
}
/* HOME MOTION — 04 INITIATIVES */
/* HEADING */
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-heading .ng-field-kicker, body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-heading h2, body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-heading > p {
    opacity: 0;
    transform: translateY(18px);
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-heading .ng-field-kicker {
    animation: ngInitiativesTextIn .48s .04s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-heading h2 {
    animation: ngInitiativesTextIn .62s .13s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-heading > p {
    animation: ngInitiativesTextIn .58s .25s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngInitiativesTextIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* CAROUSEL STAGE — Starts slightly lower. */
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-stage {
    opacity: 0;
    transform: translateY(26px);
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-stage {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .55s .38s ease, transform .7s .38s cubic-bezier(.18,.82,.25,1);
}
/* CARD FAN-OUT */
/* * While waiting: * active card is slightly smaller, * previews hide close behind it. */
body.home .ng-coverflow-section.is-initiatives-motion-ready:not(.is-initiatives-visible) .ng-coverflow-card.is-active {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.90);
}
body.home .ng-coverflow-section.is-initiatives-motion-ready:not(.is-initiatives-visible) .ng-coverflow-card.is-prev {
    left: 42%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.68);
}
body.home .ng-coverflow-section.is-initiatives-motion-ready:not(.is-initiatives-visible) .ng-coverflow-card.is-next {
    left: 58%;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.68);
}
/* * Once visible, send them to their * actual carousel positions. */
body.home .ng-coverflow-section.is-initiatives-motion-ready.is-initiatives-visible .ng-coverflow-card.is-active {
    left: 50%;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
    transition-delay: .46s;
}
body.home .ng-coverflow-section.is-initiatives-motion-ready.is-initiatives-visible .ng-coverflow-card.is-prev {
    left: 8%;
    opacity: .62;
    transform: translate(-50%, -50%) scale(.78);
    transition-delay: .62s;
}
body.home .ng-coverflow-section.is-initiatives-motion-ready.is-initiatives-visible .ng-coverflow-card.is-next {
    left: 92%;
    opacity: .62;
    transform: translate(-50%, -50%) scale(.78);
    transition-delay: .70s;
}
/* ACTIVE CARD COPY */
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-card.is-active .ng-coverflow-copy {
    opacity: 0;
    transform: translateY(18px);
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-card.is-active .ng-coverflow-copy {
    opacity: 1;
    transform: translateY(0);
    transition: opacity .5s .72s ease, transform .6s .72s cubic-bezier(.2,.8,.25,1);
}
/* tiny project number line */
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-card.is-active .ng-coverflow-meta span::after {
    transform: scaleX(0);
    transform-origin: left center;
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-card.is-active .ng-coverflow-meta span::after {
    animation: ngInitiativeMetaLine .45s .92s ease both;
}
@keyframes ngInitiativeMetaLine {
    from {
        transform: scaleX(0);
    }
    to {
        transform: scaleX(1);
    }
}
/* ARROW CONTROLS */
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-arrow {
    opacity: 0;
}
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-arrow--prev {
    transform: translateY(-50%) translateX(10px) scale(.75);
}
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-arrow--next {
    transform: translateY(-50%) translateX(-10px) scale(.75);
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-arrow--prev {
    animation: ngInitiativeArrowPrev .5s .88s cubic-bezier(.2,1.25,.3,1) both;
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-arrow--next {
    animation: ngInitiativeArrowNext .5s .95s cubic-bezier(.2,1.25,.3,1) both;
}
@keyframes ngInitiativeArrowPrev {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(10px) scale(.75);
    }
    70% {
        opacity: 1;
        transform: translateY(-50%) translateX(-2px) scale(1.06);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
}
@keyframes ngInitiativeArrowNext {
    from {
        opacity: 0;
        transform: translateY(-50%) translateX(-10px) scale(.75);
    }
    70% {
        opacity: 1;
        transform: translateY(-50%) translateX(2px) scale(1.06);
    }
    to {
        opacity: 1;
        transform: translateY(-50%) translateX(0) scale(1);
    }
}
/* COUNTER + PAGINATION STROKES */
body.home .ng-coverflow-section.is-initiatives-motion-ready .ng-coverflow-footer {
    opacity: 0;
    transform: translateY(10px);
}
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-footer {
    animation: ngInitiativeFooterIn .5s 1.04s ease both;
}
@keyframes ngInitiativeFooterIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* * Active pagination stroke gets one * quick stretch when it arrives. */
body.home .ng-coverflow-section.is-initiatives-visible .ng-coverflow-dots button.is-active {
    animation: ngInitiativeStrokeIn .45s 1.23s cubic-bezier(.2,1.25,.3,1) both;
}
@keyframes ngInitiativeStrokeIn {
    0% {
        transform: scaleX(.35);
    }
    70% {
        transform: scaleX(1.12);
    }
    100% {
        transform: scaleX(1);
    }
}
/* MOBILE — Side previews use different positions here. */
@media (max-width: 650px) {
    body.home .ng-coverflow-section.is-initiatives-motion-ready.is-initiatives-visible .ng-coverflow-card.is-prev {
        left: -34%;
    }
    body.home .ng-coverflow-section.is-initiatives-motion-ready.is-initiatives-visible .ng-coverflow-card.is-next {
        left: 134%;
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-coverflow-section * {
        animation: none !important;
    }
    body.home .ng-coverflow-heading .ng-field-kicker, body.home .ng-coverflow-heading h2, body.home .ng-coverflow-heading > p, body.home .ng-coverflow-stage, body.home .ng-coverflow-copy, body.home .ng-coverflow-arrow, body.home .ng-coverflow-footer {
        opacity: 1 !important;
    }
}
/* HOME MOTION — 05 NOORDBUITEN */
/* IDENTITY */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__identity p {
    opacity: 0;
    transform: translateY(10px);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__identity p {
    animation: ngNbTextIn .5s .05s cubic-bezier(.2,.75,.25,1) both;
}
/* Logo gets a tiny handmade stamp arrival */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__identity img {
    opacity: 0;
    transform: translateY(8px) rotate(-3deg) scale(.88);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__identity img {
    animation: ngNbLogoIn .62s .15s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes ngNbLogoIn {
    0% {
        opacity: 0;
        transform: translateY(8px) rotate(-3deg) scale(.88);
    }
    70% {
        opacity: 1;
        transform: translateY(-2px) rotate(1deg) scale(1.035);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(0) scale(1);
    }
}
/* HEADING + COPY */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__location, body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__copy h2, body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__copy > p:last-child {
    opacity: 0;
    transform: translateY(18px);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__location {
    animation: ngNbTextIn .48s .14s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__copy h2 {
    animation: ngNbTextIn .64s .24s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__copy > p:last-child {
    animation: ngNbTextIn .58s .36s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngNbTextIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* BIG PHOTO — Opens like a wide landscape. */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__stage {
    opacity: 0;
    clip-path: inset(0 8% 0 8% round 2.2rem);
    transform: translateY(22px);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__stage {
    animation: ngNbStageOpen .9s .48s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngNbStageOpen {
    from {
        opacity: 0;
        clip-path: inset(0 8% 0 8% round 2.2rem);
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0 round 2.2rem);
        transform: translateY(0);
    }
}
/* ONTMOETEN / MAKEN / GROEIEN */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__tab {
    opacity: 0;
    transform: translateY(10px) scale(.94);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__tab:nth-child(1) {
    animation: ngNbTabIn .46s .88s cubic-bezier(.2,1.15,.3,1) both;
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__tab:nth-child(2) {
    animation: ngNbTabIn .46s .98s cubic-bezier(.2,1.15,.3,1) both;
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__tab:nth-child(3) {
    animation: ngNbTabIn .46s 1.08s cubic-bezier(.2,1.15,.3,1) both;
}
@keyframes ngNbTabIn {
    0% {
        opacity: 0;
        transform: translateY(10px) scale(.94);
    }
    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* LOCATION TICKET */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__route {
    opacity: 0;
    transform: translateX(18px) scale(.94);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__route {
    animation: ngNbRouteIn .56s 1.03s cubic-bezier(.2,1.18,.3,1) both;
}
@keyframes ngNbRouteIn {
    0% {
        opacity: 0;
        transform: translateX(18px) scale(.94);
    }
    70% {
        opacity: 1;
        transform: translateX(-2px) scale(1.025);
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
    }
}
/* little coral location dot */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__route-dot {
    transform: scale(.3);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__route-dot {
    animation: ngNbRouteDot .4s 1.25s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngNbRouteDot {
    0% {
        transform: scale(.3);
    }
    70% {
        transform: scale(1.45);
    }
    100% {
        transform: scale(1);
    }
}
/* FOOTER STORY + CTA */
body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__footer > p, body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__destination {
    opacity: 0;
    transform: translateY(14px);
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__footer > p {
    animation: ngNbFooterIn .55s 1.18s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__destination {
    animation: ngNbFooterIn .55s 1.30s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngNbFooterIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* CTA ARROW — ONE LITTLE NUDGE */
body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__destination > span:last-child {
    animation: ngNbDestinationArrow .42s 1.52s ease both;
}
@keyframes ngNbDestinationArrow {
    0%, 100% {
        transform: translateX(0);
    }
    55% {
        transform: translateX(4px);
    }
}
/* MOBILE */
@media (max-width: 700px) {
    body.home .ng-home-nb-landscape.is-nb-motion-ready .ng-home-nb-landscape__stage {
        clip-path: inset(7% 0 7% 0 round 1.5rem);
    }
    body.home .ng-home-nb-landscape.is-nb-visible .ng-home-nb-landscape__stage {
        animation: ngNbStageMobile .78s .42s cubic-bezier(.2,.75,.25,1) both;
    }
    @keyframes ngNbStageMobile {
        from {
            opacity: 0;
            clip-path: inset(7% 0 7% 0 round 1.5rem);
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            clip-path: inset(0 0 0 0 round 1.5rem);
            transform: translateY(0);
        }
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-home-nb-landscape * {
        animation: none !important;
    }
    body.home .ng-home-nb-landscape__identity p, body.home .ng-home-nb-landscape__identity img, body.home .ng-home-nb-landscape__location, body.home .ng-home-nb-landscape__copy h2, body.home .ng-home-nb-landscape__copy > p:last-child, body.home .ng-home-nb-landscape__stage, body.home .ng-home-nb-landscape__tab, body.home .ng-home-nb-landscape__route, body.home .ng-home-nb-landscape__footer > p, body.home .ng-home-nb-landscape__destination {
        opacity: 1 !important;
        transform: none !important;
    }
    body.home .ng-home-nb-landscape__stage {
        clip-path: none !important;
    }
}
/* HOME MOTION — 07 ACTUALITEIT */
/* MAIN INTRO */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__eyebrow, body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__intro h2, body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__lead {
    opacity: 0;
    transform: translateY(18px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__eyebrow {
    animation: ngPulseTextIn .45s .04s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__intro h2 {
    animation: ngPulseTextIn .62s .13s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__lead {
    animation: ngPulseTextIn .56s .25s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngPulseTextIn {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* "NIEUWS UIT NOORD" MINI HEADER */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__subheading {
    opacity: 0;
    transform: translateY(12px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__subheading {
    animation: ngPulseSubheadingIn .5s .36s ease both;
}
@keyframes ngPulseSubheadingIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Alle nieuws arrow gets one tiny nudge */
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__all-news-arrow {
    animation: ngPulseNewsArrow .45s .66s ease both;
}
@keyframes ngPulseNewsArrow {
    0%, 100% {
        transform: translate(0,0);
    }
    55% {
        transform: translate(2px,-2px);
    }
}
/* FEATURE STORY IMAGE — Horizontal newspaper-photo reveal */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__feature-image {
    clip-path: inset(0 100% 0 0 round 1.5rem);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__feature-image {
    animation: ngPulseImageOpen .82s .45s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngPulseImageOpen {
    from {
        clip-path: inset(0 100% 0 0 round 1.5rem);
    }
    to {
        clip-path: inset(0 0 0 0 round 1.5rem);
    }
}
/* FEATURE STORY SHEET — Like the article has been placed over the photo */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__feature-sheet {
    opacity: 0;
    transform: translateY(24px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__feature-sheet {
    animation: ngPulseSheetIn .65s .72s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngPulseSheetIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* Feature arrow appears last */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__feature-arrow {
    opacity: 0;
    transform: scale(.72);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__feature-arrow {
    animation: ngPulseArrowPop .4s .96s cubic-bezier(.2,1.3,.3,1) both;
}
@keyframes ngPulseArrowPop {
    0% {
        opacity: 0;
        transform: scale(.72);
    }
    70% {
        opacity: 1;
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* SMALLER NEWS STORIES */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__secondary .ng-home-pulse__story {
    opacity: 0;
    transform: translateY(16px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__secondary .ng-home-pulse__story:nth-child(1) {
    animation: ngPulseStoryIn .52s .91s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__secondary .ng-home-pulse__story:nth-child(2) {
    animation: ngPulseStoryIn .52s 1.03s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngPulseStoryIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* AGENDA COLUMN */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__agenda {
    opacity: 0;
    transform: translateX(22px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__agenda {
    animation: ngPulseAgendaIn .68s .52s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngPulseAgendaIn {
    from {
        opacity: 0;
        transform: translateX(22px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* AGENDA EVENTS */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__event {
    opacity: 0;
    transform: translateY(12px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(1) {
    animation: ngPulseEventIn .48s .78s ease both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(2) {
    animation: ngPulseEventIn .48s .90s ease both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(3) {
    animation: ngPulseEventIn .48s 1.02s ease both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(4) {
    animation: ngPulseEventIn .48s 1.14s ease both;
}
@keyframes ngPulseEventIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* LITTLE TIMELINE DOTS */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__event-dot {
    transform: scale(.35);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event-dot {
    animation: ngPulseEventDot .38s cubic-bezier(.2,1.4,.3,1) both;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(1) .ng-home-pulse__event-dot {
    animation-delay: .92s;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(2) .ng-home-pulse__event-dot {
    animation-delay: 1.04s;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(3) .ng-home-pulse__event-dot {
    animation-delay: 1.16s;
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__event:nth-child(4) .ng-home-pulse__event-dot {
    animation-delay: 1.28s;
}
@keyframes ngPulseEventDot {
    0% {
        transform: scale(.35);
    }
    70% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}
/* AGENDA CTA */
body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__agenda-link {
    opacity: 0;
    transform: translateY(10px);
}
body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__agenda-link {
    animation: ngPulseAgendaLink .5s 1.34s ease both;
}
@keyframes ngPulseAgendaLink {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* MOBILE */
@media (max-width: 760px) {
    /* * No sideways agenda movement on mobile. */
    body.home .ng-home-pulse.is-pulse-motion-ready .ng-home-pulse__agenda {
        transform: translateY(18px);
    }
    body.home .ng-home-pulse.is-pulse-visible .ng-home-pulse__agenda {
        animation: ngPulseAgendaMobile .6s .5s ease both;
    }
    @keyframes ngPulseAgendaMobile {
        from {
            opacity: 0;
            transform: translateY(18px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-home-pulse * {
        animation: none !important;
    }
    body.home .ng-home-pulse__eyebrow, body.home .ng-home-pulse__intro h2, body.home .ng-home-pulse__lead, body.home .ng-home-pulse__subheading, body.home .ng-home-pulse__feature-sheet, body.home .ng-home-pulse__feature-arrow, body.home .ng-home-pulse__story, body.home .ng-home-pulse__agenda, body.home .ng-home-pulse__event, body.home .ng-home-pulse__agenda-link {
        opacity: 1 !important;
        transform: none !important;
    }
    body.home .ng-home-pulse__feature-image {
        clip-path: none !important;
    }
}
/* HOME MOTION — 08 PARTNERS */
/* INTRO */
body.home .ng-partner-section.is-partner-motion-ready .ng-partner-heading .eyebrow, body.home .ng-partner-section.is-partner-motion-ready .ng-partner-heading h2, body.home .ng-partner-section.is-partner-motion-ready .ng-partner-heading > p {
    opacity: 0;
    transform: translateY(17px);
}
body.home .ng-partner-section.is-partner-visible .ng-partner-heading .eyebrow {
    animation: ngPartnerTextIn .46s .04s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-heading h2 {
    animation: ngPartnerTextIn .62s .13s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-heading > p {
    animation: ngPartnerTextIn .56s .25s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngPartnerTextIn {
    from {
        opacity: 0;
        transform: translateY(17px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* MARQUEE — Keep its own horizontal transform untouched. */
/* * Important: * the moving transform belongs to .ng-partner-track. * So the reveal happens on the wrapper instead. */
body.home .ng-partner-section.is-partner-motion-ready .ng-partner-marquee {
    opacity: 0;
    clip-path: inset(0 50% 0 50%);
}
body.home .ng-partner-section.is-partner-visible .ng-partner-marquee {
    animation: ngPartnerRibbonOpen .9s .38s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngPartnerRibbonOpen {
    from {
        opacity: 0;
        clip-path: inset(0 50% 0 50%);
    }
    to {
        opacity: 1;
        clip-path: inset(0 0 0 0);
    }
}
/* DON'T LET LOGOS MOVE BEFORE THEY ARE VISIBLE */
body.home .ng-partner-section.is-partner-motion-ready:not(.is-partner-visible) .ng-partner-track {
    animation-play-state: paused;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-track {
    animation-play-state: running;
}
/* LOGOS — VERY SMALL SETTLE */
/* * Opacity only here. * No transform, because logo hover already uses transform. */
body.home .ng-partner-section.is-partner-motion-ready .ng-partner-logo {
    opacity: .35;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-logo {
    animation: ngPartnerLogoSettle .55s .62s ease both;
}
@keyframes ngPartnerLogoSettle {
    from {
        opacity: .35;
    }
    to {
        opacity: 1;
    }
}
/* FOOTER NOTE */
body.home .ng-partner-section.is-partner-motion-ready .ng-partner-footer > p {
    opacity: 0;
    transform: translateY(12px);
}
body.home .ng-partner-section.is-partner-visible .ng-partner-footer > p {
    animation: ngPartnerFooterIn .5s .92s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngPartnerFooterIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* LITTLE CORAL FOOTER DOT */
body.home .ng-partner-section.is-partner-motion-ready .ng-partner-footer p > span {
    transform: scale(.3);
}
body.home .ng-partner-section.is-partner-visible .ng-partner-footer p > span {
    animation: ngPartnerDotPop .4s 1.08s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngPartnerDotPop {
    0% {
        transform: scale(.3);
    }
    70% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}
/* PARTNERS DESTINATION */
body.home .ng-partner-section.is-partner-motion-ready .ng-partner-destination {
    opacity: 0;
    transform: translateY(14px);
}
body.home .ng-partner-section.is-partner-visible .ng-partner-destination {
    animation: ngPartnerDestinationIn .55s 1.02s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngPartnerDestinationIn {
    from {
        opacity: 0;
        transform: translateY(14px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* CTA ARROW */
body.home .ng-partner-section.is-partner-visible .ng-partner-destination-arrow {
    animation: ngPartnerArrowNudge .42s 1.28s ease both;
}
@keyframes ngPartnerArrowNudge {
    0%, 100% {
        transform: translateX(0);
    }
    55% {
        transform: translateX(4px);
    }
}
/* MOBILE */
@media (max-width: 700px) {
    /* * Simpler ribbon opening on small screens. */
    body.home .ng-partner-section.is-partner-motion-ready .ng-partner-marquee {
        clip-path: inset(0 0 0 18%);
    }
    body.home .ng-partner-section.is-partner-visible .ng-partner-marquee {
        animation: ngPartnerRibbonMobile .72s .35s ease both;
    }
    @keyframes ngPartnerRibbonMobile {
        from {
            opacity: 0;
            clip-path: inset(0 0 0 18%);
        }
        to {
            opacity: 1;
            clip-path: inset(0 0 0 0);
        }
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .ng-partner-section .ng-partner-heading .eyebrow, body.home .ng-partner-section .ng-partner-heading h2, body.home .ng-partner-section .ng-partner-heading > p, body.home .ng-partner-marquee, body.home .ng-partner-logo, body.home .ng-partner-footer > p, body.home .ng-partner-destination {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
        clip-path: none !important;
    }
    body.home .ng-partner-track {
        animation: none !important;
    }
}
/* PARTNERS MOTION — FASTER TIMING */
/* Heading comes in quicker */
body.home .ng-partner-section.is-partner-visible .ng-partner-heading .eyebrow {
    animation-duration: .34s;
    animation-delay: 0s;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-heading h2 {
    animation-duration: .45s;
    animation-delay: .06s;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-heading > p {
    animation-duration: .42s;
    animation-delay: .12s;
}
/* Ribbon starts almost immediately */
body.home .ng-partner-section.is-partner-visible .ng-partner-marquee {
    animation: ngPartnerRibbonOpen .55s .14s cubic-bezier(.18,.82,.25,1) both;
}
/* Logos become fully visible much faster */
body.home .ng-partner-section.is-partner-visible .ng-partner-logo {
    animation: ngPartnerLogoSettle .32s .24s ease both;
}
/* Bottom content follows shortly after */
body.home .ng-partner-section.is-partner-visible .ng-partner-footer > p {
    animation: ngPartnerFooterIn .4s .42s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-footer p > span {
    animation: ngPartnerDotPop .32s .55s cubic-bezier(.2,1.4,.3,1) both;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-destination {
    animation: ngPartnerDestinationIn .42s .48s cubic-bezier(.2,.75,.25,1) both;
}
body.home .ng-partner-section.is-partner-visible .ng-partner-destination-arrow {
    animation: ngPartnerArrowNudge .35s .67s ease both;
}
/* HOME MOTION — 09 FINAL SUPPORT CTA */
/* PANEL */
body.home .support-closing-section.is-support-motion-ready .support-closing-panel {
    opacity: 0;
    transform: translateY(26px) scale(.985);
}
body.home .support-closing-section.is-support-visible .support-closing-panel {
    animation: ngSupportPanelIn .68s cubic-bezier(.18,.82,.25,1) both;
}
@keyframes ngSupportPanelIn {
    from {
        opacity: 0;
        transform: translateY(26px) scale(.985);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* DECORATIVE CORAL CIRCLE */
body.home .support-closing-section.is-support-motion-ready .support-closing-panel::before {
    transform: scale(.35);
    transform-origin: center;
}
body.home .support-closing-section.is-support-visible .support-closing-panel::before {
    animation: ngSupportCoralIn .72s .15s cubic-bezier(.18,1.15,.3,1) both;
}
@keyframes ngSupportCoralIn {
    0% {
        transform: scale(.35);
    }
    70% {
        transform: scale(1.04);
    }
    100% {
        transform: scale(1);
    }
}
/* PALE GREEN SHAPE */
body.home .support-closing-section.is-support-motion-ready .support-closing-panel::after {
    transform: scale(.55);
}
body.home .support-closing-section.is-support-visible .support-closing-panel::after {
    animation: ngSupportGreenShapeIn .8s .22s ease both;
}
@keyframes ngSupportGreenShapeIn {
    from {
        transform: scale(.55);
    }
    to {
        transform: scale(1);
    }
}
/* LEFT COPY */
body.home .support-closing-section.is-support-motion-ready .support-closing-label, body.home .support-closing-section.is-support-motion-ready .support-closing-copy h2, body.home .support-closing-section.is-support-motion-ready .support-closing-intro, body.home .support-closing-section.is-support-motion-ready .support-closing-button {
    opacity: 0;
    transform: translateY(16px);
}
body.home .support-closing-section.is-support-visible .support-closing-label {
    animation: ngSupportTextIn .38s .16s ease both;
}
body.home .support-closing-section.is-support-visible .support-closing-copy h2 {
    animation: ngSupportTextIn .55s .24s cubic-bezier(.2,.75,.25,1) both;
}
body.home .support-closing-section.is-support-visible .support-closing-intro {
    animation: ngSupportTextIn .48s .36s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngSupportTextIn {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* SUPPORT BUTTON */
body.home .support-closing-section.is-support-visible .support-closing-button {
    animation: ngSupportButtonIn .5s .48s cubic-bezier(.2,1.2,.3,1) both;
}
@keyframes ngSupportButtonIn {
    0% {
        opacity: 0;
        transform: translateY(14px) scale(.96);
    }
    70% {
        opacity: 1;
        transform: translateY(-2px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}
/* little arrow finish */
body.home .support-closing-section.is-support-visible .support-closing-arrow {
    animation: ngSupportArrowNudge .38s .72s ease both;
}
@keyframes ngSupportArrowNudge {
    0%, 100% {
        transform: translateX(0);
    }
    55% {
        transform: translateX(4px);
    }
}
/* DIVIDER BETWEEN COPY + IMPACT */
body.home .support-closing-section.is-support-motion-ready .support-closing-side {
    border-left-color: transparent;
}
body.home .support-closing-section.is-support-visible .support-closing-side {
    animation: ngSupportDividerIn .55s .36s ease both;
}
@keyframes ngSupportDividerIn {
    from {
        border-left-color: transparent;
    }
    to {
        border-left-color: rgba(255,255,255,.2);
    }
}
/* STAMP — Our little final cute moment 😎 */
body.home .support-closing-section.is-support-motion-ready .support-closing-stamp {
    opacity: 0;
    transform: translateY(-14px) rotate(13deg) scale(.7);
}
body.home .support-closing-section.is-support-visible .support-closing-stamp {
    animation: ngSupportStampIn .58s .42s cubic-bezier(.18,1.3,.3,1) both;
}
@keyframes ngSupportStampIn {
    0% {
        opacity: 0;
        transform: translateY(-14px) rotate(13deg) scale(.7);
    }
    65% {
        opacity: 1;
        transform: translateY(2px) rotate(2deg) scale(1.06);
    }
    100% {
        opacity: 1;
        transform: translateY(0) rotate(5deg) scale(1);
    }
}
/* Heart pops inside the stamp */
body.home .support-closing-section.is-support-motion-ready .support-closing-stamp > span {
    transform: scale(.4);
}
body.home .support-closing-section.is-support-visible .support-closing-stamp > span {
    animation: ngSupportHeartPop .38s .70s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes ngSupportHeartPop {
    0% {
        transform: scale(.4);
    }
    70% {
        transform: scale(1.35);
    }
    100% {
        transform: scale(1);
    }
}
/* RIGHT-HAND LABEL */
body.home .support-closing-section.is-support-motion-ready .support-closing-side-label {
    opacity: 0;
    transform: translateY(10px);
}
body.home .support-closing-section.is-support-visible .support-closing-side-label {
    animation: ngSupportSideLabelIn .4s .55s ease both;
}
@keyframes ngSupportSideLabelIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
/* IMPACT ROWS */
body.home .support-closing-section.is-support-motion-ready .support-closing-list li {
    opacity: 0;
    transform: translateX(14px);
}
body.home .support-closing-section.is-support-visible .support-closing-list li:nth-child(1) {
    animation: ngSupportImpactIn .45s .65s cubic-bezier(.2,.75,.25,1) both;
}
body.home .support-closing-section.is-support-visible .support-closing-list li:nth-child(2) {
    animation: ngSupportImpactIn .45s .76s cubic-bezier(.2,.75,.25,1) both;
}
body.home .support-closing-section.is-support-visible .support-closing-list li:nth-child(3) {
    animation: ngSupportImpactIn .45s .87s cubic-bezier(.2,.75,.25,1) both;
}
@keyframes ngSupportImpactIn {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
/* 01 / 02 / 03 */
body.home .support-closing-section.is-support-motion-ready .support-closing-list li > span {
    opacity: 0;
    transform: scale(.6);
}
body.home .support-closing-section.is-support-visible .support-closing-list li:nth-child(1) > span {
    animation: ngSupportNumberIn .34s .78s cubic-bezier(.2,1.35,.3,1) both;
}
body.home .support-closing-section.is-support-visible .support-closing-list li:nth-child(2) > span {
    animation: ngSupportNumberIn .34s .89s cubic-bezier(.2,1.35,.3,1) both;
}
body.home .support-closing-section.is-support-visible .support-closing-list li:nth-child(3) > span {
    animation: ngSupportNumberIn .34s 1s cubic-bezier(.2,1.35,.3,1) both;
}
@keyframes ngSupportNumberIn {
    0% {
        opacity: 0;
        transform: scale(.6);
    }
    70% {
        opacity: 1;
        transform: scale(1.15);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}
/* TABLET — Border becomes horizontal in existing layout. */
@media (max-width: 900px) {
    body.home .support-closing-section.is-support-motion-ready .support-closing-side {
        border-left-color: transparent;
        border-top-color: transparent;
    }
    body.home .support-closing-section.is-support-visible .support-closing-side {
        animation: ngSupportDividerMobile .55s .36s ease both;
    }
    @keyframes ngSupportDividerMobile {
        from {
            border-top-color: transparent;
        }
        to {
            border-top-color: rgba(255,255,255,.2);
        }
    }
}
/* REDUCED MOTION */
@media (prefers-reduced-motion: reduce) {
    body.home .support-closing-panel, body.home .support-closing-label, body.home .support-closing-copy h2, body.home .support-closing-intro, body.home .support-closing-button, body.home .support-closing-stamp, body.home .support-closing-side-label, body.home .support-closing-list li, body.home .support-closing-list li > span {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

/* FOOTER — NEWSLETTER SIGNUP */
.footer-newsletter-form {
    width: 100%;
    margin-top: 1.15rem;
}
/* MailPoet form */
.footer-newsletter-form .mailpoet_form {
    padding: 0 !important;
}
.footer-newsletter-form .mailpoet_paragraph {
    margin: 0 !important;
}
/* Email */
.footer-newsletter-form input[type="email"] {
    width: 100%;
    min-height: 46px;
    padding: .75rem 1rem;
    color: var(--color-dark);
    background: rgba(255,255,255,.96);
    border: 1px solid rgba(255,255,255,.14);
    border-radius: .65rem;
    font: inherit;
    font-size: .72rem;
    outline: none;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.footer-newsletter-form input[type="email"]:focus {
    border-color: var(--color-coral);
    box-shadow: 0 0 0 3px rgba(240,102,83,.13);
}
/* Button */
.footer-newsletter-form input[type="submit"], .footer-newsletter-form button[type="submit"] {
    min-height: 42px;
    margin-top: .55rem;
    padding: .65rem 1rem;
    color: #fff;
    background: var(--color-coral);
    border: 0;
    border-radius: 999px;
    font: inherit;
    font-size: .7rem;
    font-weight: 800;
    cursor: pointer;
    transition: transform 180ms ease;
}
.footer-newsletter-form input[type="submit"]:hover, .footer-newsletter-form button[type="submit"]:hover {
    transform: translateY(-2px);
}
.footer-newsletter-privacy {
    margin: .7rem 0 0 !important;
    color: rgba(255,255,255,.36) !important;
    font-size: .58rem !important;
    line-height: 1.45 !important;
}


/* ACCESSIBILITY — FINAL CONTRAST PASS — Lighthouse contrast fixes */

:root {
    /*
     * Original coral stays available for decorative use.
     * These two variants are for readable text/buttons.
     */
    --color-coral-accessible: #b84438;
    --color-coral-on-dark: #f3a28c;
}

/* VOLUNTEER SPOTLIGHT */

/* Small coral text on cream needs stronger contrast */
body.home
.ng-volunteer-spotlight__eyebrow {
    color: var(--color-coral-accessible);
}

/* Attribution text was too faint */
body.home
.ng-volunteer-spotlight footer span {
    color: rgba(46, 59, 50, .72);
}

/* HOME — JOIN / VACATURE BUTTON */

/*
 * White text on the original coral does not quite reach
 * WCAG AA. Keep white text, slightly deepen the coral.
 */
body.home
.ng-home-join-circle__action--primary {
    color: #fff;
    background: var(--color-coral-accessible);
}

/* FOOTER */

/* Small footer privacy text was much too faint */
.site-footer
.footer-newsletter-privacy {
    color: rgba(255, 255, 255, .62) !important;
}

/*
 * Original coral is too dark against the dark-green footer.
 * Use the lighter coral variant here.
 */
.site-footer
.footer-small-label {
    color: var(--color-coral-on-dark);
}

/* Newsletter submit button uses the same white/coral combo */
.site-footer
.footer-newsletter-form input[type="submit"],
.site-footer
.footer-newsletter-form button[type="submit"] {
    color: #fff;
    background: var(--color-coral-accessible);
}

/* =========================================================
   HOME — PARTNER DESTINATION
   Restored after homepage CSS split
========================================================= */

body.home .ng-partner-destination {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 2.75rem;
    gap: 1rem;
    align-items: center;

    min-height: 78px;
    padding: 1rem 1rem 1rem 1.25rem;

    border: 1px solid rgba(41, 56, 47, 0.13);
    border-radius: .4rem 1.1rem 1.1rem 1.1rem;

    background: #f1e5d8;
    color: #29382f;

    text-decoration: none;

    transition:
        background-color 220ms ease,
        border-color 220ms ease,
        transform 220ms ease;
}

body.home .ng-partner-destination > span:first-child {
    display: flex;
    min-width: 0;
    flex-direction: column;
    gap: .25rem;
}

body.home .ng-partner-destination small {
    color: #b85a3e;

    font-size: .62rem;
    font-weight: 850;
    letter-spacing: .11em;
    line-height: 1.3;
    text-transform: uppercase;
}

body.home .ng-partner-destination strong {
    color: #29382f;

    font-size: 1rem;
    font-weight: 750;
    line-height: 1.25;
}

body.home .ng-partner-destination-arrow {
    display: grid;

    width: 2.75rem;
    height: 2.75rem;

    place-items: center;

    border-radius: 50%;
    background: #293d31;
    color: #fff;

    font-size: 1rem;

    transition:
        background-color 220ms ease,
        transform 220ms ease;
}

body.home .ng-partner-destination:hover,
body.home .ng-partner-destination:focus-visible {
    border-color: rgba(41, 56, 47, .24);
    background: #f5d5cb;

    color: #29382f;
    text-decoration: none;

    transform: translateY(-2px);
}

body.home
.ng-partner-destination:hover
.ng-partner-destination-arrow {
    background: #f26452;
    transform: translateX(.2rem);
}

@media (max-width: 720px) {
    body.home .ng-partner-destination {
        width: 100%;
    }
}

/* =========================================================
   HOME FOOTER — LIVE MAILPOET
========================================================= */

body.home .footer-newsletter-form {
    width: 100%;
    margin-top: 1.15rem;
}

body.home
.footer-newsletter-form
.mailpoet_form {
    padding: 0 !important;
    background: transparent !important;
}

body.home
.footer-newsletter-form
.mailpoet_paragraph,
body.home
.footer-newsletter-form
.mailpoet_form_paragraph {
    margin: 0 0 .55rem !important;
}

body.home
.footer-newsletter-form
input[type="email"],
body.home
.footer-newsletter-form
.mailpoet_text {
    width: 100% !important;
    min-height: 46px !important;

    padding: .75rem 1rem !important;

    color: #29382f !important;
    background: rgba(255, 255, 255, .96) !important;

    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: .65rem !important;

    font-family: var(--font-primary) !important;
    font-size: .72rem !important;

    box-sizing: border-box;
    outline: none;
}

body.home
.footer-newsletter-form
input[type="email"]:focus,
body.home
.footer-newsletter-form
.mailpoet_text:focus {
    border-color: #f26452 !important;

    box-shadow:
        0 0 0 3px rgba(240, 102, 83, .13) !important;
}

body.home
.footer-newsletter-form
input[type="submit"],
body.home
.footer-newsletter-form
button[type="submit"],
body.home
.footer-newsletter-form
.mailpoet_submit {
    width: 100% !important;
    min-height: 42px !important;

    margin-top: .1rem !important;
    padding: .65rem 1rem !important;

    color: #fff !important;
    background: #b84438 !important;

    border: 0 !important;
    border-radius: 999px !important;

    font-family: var(--font-primary) !important;
    font-size: .7rem !important;
    font-weight: 800 !important;

    cursor: pointer;
}

body.home
.footer-newsletter-form
.mailpoet_submit:hover {
    transform: translateY(-2px);
}

/* =========================================================
   HOME — PARTNER CTA FINAL OVERRIDE
========================================================= */

body.home .ng-partner-footer {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        minmax(280px, 390px) !important;
    gap: clamp(2rem, 5vw, 5rem) !important;
    align-items: center !important;

    margin-top: clamp(2rem, 3vw, 3rem) !important;
    padding-top: clamp(1.5rem, 2.5vw, 2.25rem) !important;

    border-top: 1px solid rgba(41, 56, 47, .16) !important;
}

body.home a.ng-partner-destination {
    display: grid !important;
    grid-template-columns:
        minmax(0, 1fr)
        2.75rem !important;

    width: 100% !important;
    max-width: 390px !important;

    gap: 1rem !important;
    align-items: center !important;
    justify-self: end !important;

    min-height: 78px !important;
    padding: 1rem 1rem 1rem 1.25rem !important;

    border:
        1px solid rgba(41, 56, 47, .13) !important;
    border-radius:
        .4rem 1.1rem 1.1rem 1.1rem !important;

    background: #f1e5d8 !important;
    color: #29382f !important;

    text-decoration: none !important;
}

body.home
a.ng-partner-destination
> span:first-child {
    display: flex !important;
    flex-direction: column !important;
    gap: .25rem !important;
}

body.home
a.ng-partner-destination
small {
    display: block !important;

    color: #b85a3e !important;

    font-size: .62rem !important;
    font-weight: 850 !important;
    letter-spacing: .11em !important;
    line-height: 1.3 !important;
    text-transform: uppercase !important;
}

body.home
a.ng-partner-destination
strong {
    display: block !important;

    color: #29382f !important;

    font-size: 1rem !important;
    font-weight: 750 !important;
    line-height: 1.25 !important;
}

body.home
a.ng-partner-destination
.ng-partner-destination-arrow {
    display: grid !important;

    width: 2.75rem !important;
    height: 2.75rem !important;

    place-items: center !important;

    border-radius: 50% !important;
    background: #293d31 !important;
    color: #fff !important;
}

@media (max-width: 720px) {

    body.home .ng-partner-footer {
        grid-template-columns: 1fr !important;
    }

    body.home a.ng-partner-destination {
        justify-self: start !important;
        max-width: 100% !important;
    }
}

/* =========================================================
   ACCESSIBILITY — HEADER CTA
========================================================= */

body.home .ng-header-button {
    color: #fff !important;
    background: #b84438 !important;
}

body.home .ng-header-button:hover,
body.home .ng-header-button:focus-visible {
    color: #fff !important;
    background: var(--color-dark) !important;
}

@media (max-width: 620px) {

    body.home .ng-mobile-vacancies > a {
        color: #fff !important;
        background: #b84438 !important;
    }

    body.home .ng-mobile-vacancies > a:hover,
    body.home .ng-mobile-vacancies > a:focus-visible {
        background: var(--color-dark) !important;
    }
}