/* ========================================
   HH BUITENCOACHING - Design System
   Organic Professionalism
   ======================================== */

/* Breadcrumbs */
.breadcrumbs {
    padding: 0 0 1.5rem;
    margin-bottom: 0;
    background: transparent;
    border-bottom: none;
    position: relative;
    z-index: 10;
}

.breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.9rem;
    color: var(--paper);
    opacity: 0.7;
}

.breadcrumbs__item {
    display: flex;
    align-items: center;
}

.breadcrumbs__item:not(:last-child)::after {
    content: '/';
    margin: 0 0.75rem;
    font-size: 0.8em;
}

.breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.2s;
}

.breadcrumbs__link:hover {
    opacity: 1;
    text-decoration: underline;
    color: var(--action);
}

.breadcrumbs__item--current {
    font-weight: 500;
    opacity: 1;
}

@media (max-width: 768px) {
    .breadcrumbs {
        padding: 0 0 1rem;
    }

    .breadcrumbs__list {
        font-size: 0.8rem;
    }
}

/* ----- CSS Variables ----- */
:root {
    /* Colors - Refined for higher contrast & organic feel */
    --deep-forest: #1A2E22;
    --sage: #6B7B68;
    --action: #C5D9B8;
    --paper: #FDFDFB;
    --cream: #F7F3EE;
    --charcoal: #1C1C1C;
    --slate: #525B50;
    --white: #FFFFFF;

    /* Typography - More distinctive */
    --font-heading: 'spirits-sharp', Georgia, serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing - Clamp-based for perfect rhythm */
    --space-2xs: clamp(0.25rem, 0.5vw, 0.375rem);
    --space-xs: clamp(0.5rem, 1vw, 0.75rem);
    --space-sm: clamp(1rem, 2vw, 1.25rem);
    --space-md: clamp(2rem, 4vw, 2.5rem);
    --space-lg: clamp(5rem, 10vw, 8rem);
    --space-xl: clamp(7rem, 12vw, 11rem);

    /* Layout */
    --container-max: 1300px;
    --header-height: 90px;

    /* Transitions */
    --transition-soft: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-normal: 400ms var(--transition-soft);
    --transition-slow: 700ms var(--transition-soft);

    /* Shadows - More sophisticated */
    --shadow-soft: 0 10px 40px rgba(45, 64, 52, 0.04);
    --shadow-medium: 0 20px 60px rgba(45, 64, 52, 0.08);

    /* ----- Border Radius System (Apple-Style) ----- */
    --radius-none: 0px;
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 8px;
    /* Standard Buttons (Round) */
    --radius-lg: 12px;
    /* Nested element base */
    --radius-xl: 16px;
    --radius-2xl: 24px;
    /* Standard Card (Smooth) */
    --radius-3xl: 32px;
    --radius-full: 9999px;
    /* Pills/Circles */

    /* dynamic calculation: outer = inner + padding gap */
    /* Example: Card padding is roughly 2rem (32px) or 1.5rem (24px) */
    --radius-card-outer: var(--radius-2xl);
    --radius-modal-outer: var(--radius-3xl);

    /* Typography Tokens */
    --font-size-h3: 1.75rem;
    /* 28px */

    /* Card Interaction Tokens */
    --card-hover-transform: translateY(-12px) scale(1.02);
    --card-hover-shadow: 0 20px 40px rgba(26, 46, 34, 0.12);
    --card-hover-border: var(--action);

    /* Icon Settings */
    --icon-size-sm: 1.25rem;
    --icon-size-md: 2rem;
    --icon-size-lg: 3rem;
}

/* ----- Reset & Base ----- */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    font-size: 16px;
}

body {
    font-family: var(--font-body);
    font-size: 1.125rem;
    line-height: 1.7;
    color: var(--charcoal);
    background-color: var(--deep-forest);
    /* Match the deep forest theme for the background */
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-radius 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-origin: center top;
}

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

a {
    color: var(--deep-forest);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--sage);
}

:focus-visible {
    outline: 3px solid var(--action);
    outline-offset: 3px;
    border-radius: var(--radius-xs);
}

/* ----- Typography ----- */
h1,
h2,
h3,
h4 {
    font-family: var(--font-heading);
    font-weight: 400;
    line-height: 1;
    color: var(--deep-forest);
    text-wrap: balance;
    letter-spacing: 0em;
}

h1 {
    font-size: clamp(3rem, 10vw, 6.5rem);
    letter-spacing: 0em;
    margin-bottom: var(--space-md);
}

h2 {
    font-size: clamp(2.25rem, 6vw, 4rem);
    margin-bottom: var(--space-md);
    letter-spacing: 0em;
}

h3 {
    font-family: var(--font-body);
    font-size: var(--font-size-h3);
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    /* 20px */
}

p {
    margin-bottom: 1rem;
}

.text-slate {
    color: var(--slate);
}

.text-sage {
    color: var(--sage);
}

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


/* ----- Layout ----- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.section {
    padding: var(--space-xl) 0;
}

.section--paper {
    background-color: var(--paper);
}

.section--forest {
    background-color: var(--deep-forest);
    color: var(--paper);
}

.section--cream {
    background-color: var(--cream);
}

.section--forest h2,
.section--forest h3 {
    color: var(--paper);
}

.section--visie {
    position: relative;
    overflow: hidden;
    margin-bottom: 0;
}

.section--visie__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section--visie__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(42, 82, 58, 0.65) 0%,
            rgba(42, 82, 58, 0.45) 100%);
    z-index: 1;
}

.section--visie .container {
    position: relative;
    z-index: 2;
}

/* ----- Layout Utilities ----- */
.grid-editorial {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: var(--space-lg);
    align-items: center;
}

.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: var(--transition-slow);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

.stagger-1 {
    transition-delay: 100ms;
}

.stagger-2 {
    transition-delay: 200ms;
}

.stagger-3 {
    transition-delay: 300ms;
}

/* ----- Location Page Styles ----- */
.location-header {
    margin-bottom: var(--space-lg);
}

.location-content {
    text-align: left;
    max-width: 800px;
    margin: 0 auto;
}

/* ----- Header ----- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: transparent;
    z-index: 1000;
    transition: var(--transition-normal);
}

.header.scrolled {
    background: rgba(253, 253, 251, 0.9);
    backdrop-filter: blur(20px);
    height: 80px;
    box-shadow: var(--shadow-soft);
    border-bottom: 1px solid rgba(45, 64, 52, 0.05);
}

.header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

.header__logo {
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--white);
    transition: var(--transition-normal);
    letter-spacing: 0em;
}

.header.scrolled .header__logo {
    color: var(--deep-forest);
}

.header__nav {
    display: flex;
    gap: var(--space-md);
}

/* LinkedIn social link – mobile overlay only */
.nav__social {
    display: none;
}

.nav__brand {
    display: none;
}

.header__nav a {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    padding: var(--space-xs) 0;
    position: relative;
    letter-spacing: 0.03em;
    transition: color var(--transition-normal);
}

.header.scrolled .header__nav a {
    color: var(--charcoal);
}

.header__nav a:hover,
.header__nav .dropdown__trigger:hover {
    color: var(--action);
}

.header.scrolled .header__nav a:hover,
.header.scrolled .nav__item:hover .dropdown__trigger {
    color: var(--sage);
}

.header__nav a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--action);
    transition: width var(--transition-normal);
}

.header.scrolled .header__nav a::after {
    background: var(--sage);
}

.header__nav a:hover::after,
.header__nav a.active::after,
.dropdown__trigger.active::after,
.nav__item:hover .dropdown__trigger::after {
    width: 100%;
}

/* Dropdown Styles - Glassmorphism & Premium Detail */
.nav__item {
    position: relative;
    display: flex;
    align-items: center;
}

.dropdown__trigger {
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--white);
    padding: var(--space-xs) 0;
    transition: color var(--transition-normal);
    letter-spacing: 0.03em;
}

.header.scrolled .dropdown__trigger {
    color: var(--charcoal);
}

.dropdown__trigger-icon {
    font-size: 1.1rem;
    transition: transform var(--transition-normal);
    opacity: 0.8;
}

.nav__item:hover .dropdown__trigger-icon,
.nav__item.active .dropdown__trigger-icon {
    transform: rotate(180deg);
}

.dropdown__menu {
    position: absolute;
    top: calc(100% + 5px);
    left: -20px;
    min-width: 240px;
    background: var(--paper);
    box-shadow: 0 15px 45px rgba(26, 46, 34, 0.15);
    border: 1px solid rgba(26, 46, 34, 0.08);
    border-radius: var(--radius-lg);
    padding: 0.75rem 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(15px);
    transition:
        opacity 400ms var(--transition-soft),
        transform 400ms var(--transition-soft),
        visibility 400ms;
    display: flex;
    flex-direction: column;
    z-index: 100;
}

.nav__item:hover .dropdown__menu,
.nav__item.active .dropdown__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown__menu a {
    display: flex;
    align-items: center;
    color: var(--charcoal) !important;
    padding: 0.85rem 1.5rem !important;
    font-size: 0.9rem !important;
    font-weight: 500;
    letter-spacing: 0.01em;
    transition: all 300ms ease !important;
}

.dropdown__menu a::after {
    display: none;
}

.dropdown__menu a:hover {
    background: rgba(107, 123, 104, 0.08);
    color: var(--deep-forest) !important;
    padding-left: 1.75rem !important;
}

/* Dropdown item chevron icons */
.dropdown__item-icon {
    font-size: 0.85rem;
    margin-right: 0.5rem;
    color: var(--sage);
    flex-shrink: 0;
}

/* Staggered entry for active menu items */
.nav__item:hover .dropdown__menu a,
.nav__item.active .dropdown__menu a {
    animation: slideInLow 400ms var(--transition-soft) forwards;
    opacity: 0;
}

.nav__item:hover .dropdown__menu a:nth-child(1) {
    animation-delay: 50ms;
}

.nav__item:hover .dropdown__menu a:nth-child(2) {
    animation-delay: 100ms;
}

.nav__item:hover .dropdown__menu a:nth-child(3) {
    animation-delay: 150ms;
}

@keyframes slideInLow {
    from {
        opacity: 0;
        transform: translateY(5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.header__menu-btn {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--space-xs);
}

.header__menu-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--white);
    margin: 5px 0;
    transition: var(--transition-fast);
}

.header.scrolled .header__menu-btn span {
    background: var(--charcoal);
}

/* ----- Hero ----- */
.hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding-top: calc(var(--header-height) + 4rem);
    overflow: hidden;
}

.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.hero__bg img,
.hero__bg video,
.parallax-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    /* Center the media */
    transform: scale(1.5);
    /* Match JS parallax start state */
    will-change: transform;
}

@media (max-width: 768px) {
    .hero--artikelen .hero__bg img {
        object-position: 80% center;
    }
}


.hero__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(42, 82, 58, 0.65) 0%,
            rgba(42, 82, 58, 0.45) 50%,
            rgba(42, 82, 58, 0.2) 100%);
}

.hero--home .hero__bg::after {
    background: linear-gradient(135deg,
            rgba(42, 82, 58, 0.55) 0%,
            rgba(42, 82, 58, 0.35) 50%,
            rgba(42, 82, 58, 0.1) 100%);
}

.hero__inner-grid {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: var(--space-md);
    /* Reduced from space-lg */
    padding-bottom: var(--space-md);
    max-width: 900px;
    margin: 0 auto;
}

.hero__content {
    position: relative;
    z-index: 1;
    color: var(--paper);
    width: 100%;
    max-width: 900px;
    margin: 0;
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.hero__content h1 {
    color: var(--paper);
    margin-bottom: var(--space-md);
    text-align: left;
}

/* Left align content specifically for subpage heros */
.hero--sub .hero__content {
    margin: 0;
    width: 100%;
    align-items: flex-start;
}

.hero__subtitle {
    font-size: 1.125rem;
    line-height: 1.6;
    margin-bottom: clamp(2rem, 5vw, 4rem);
    opacity: 0.9;
    max-width: 800px;
    margin: 0 0 clamp(2rem, 5vw, 4rem) 0;
    text-align: left;
    letter-spacing: 0.01em;
}

.hero__usps {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: var(--space-sm);
}

.hero__usp {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 1.125rem;
}

.hero__usp-icon {
    font-size: 1.25rem;
    color: var(--action);
}

.hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: flex-start;
    width: 100%;
    padding-left: 0;
    margin-top: -2rem;
    /* Pull buttons up as requested */
}

.hero__actions .btn {
    min-width: 250px;
    text-align: center;
    font-size: 1.1rem;
    backdrop-filter: blur(5px);
}

/* Tablet & Mobile responsive */
@media (max-width: 768px) {
    .hero__actions {
        flex-direction: column;
        align-items: center;
    }

    .hero__actions .btn {
        width: 100%;
        max-width: 400px;
    }
}

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: var(--transition-normal);
    position: relative;
    overflow: hidden;
}

.btn--primary {
    background: var(--deep-forest);
    color: var(--paper);
    border-color: var(--deep-forest);
}

.btn--primary:hover {
    background: var(--sage);
    border-color: var(--sage);
    color: var(--paper);
}

.btn--outline {
    background: transparent;
    color: var(--deep-forest);
    border: 1px solid var(--deep-forest);
}

.btn--outline:hover {
    background: var(--deep-forest);
    color: var(--paper);
}

/* Fix for Hero/Dark Backgrounds */
.hero .btn--outline {
    color: var(--paper);
    /* Default text color */
    border-color: rgba(255, 255, 255, 0.4);
    /* Visible border */
}

.hero .btn--outline:hover {
    background: var(--paper) !important;
    color: var(--deep-forest) !important;
    border-color: var(--paper) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.btn--ghost {
    background: transparent;
    color: var(--paper);
    border-color: var(--paper);
}

.btn--ghost:hover {
    background: var(--paper);
    color: var(--deep-forest);
}

.btn--ghost-dark {
    background: transparent;
    color: var(--deep-forest);
    border-color: var(--deep-forest);
}

.btn--ghost-dark:hover {
    background: var(--deep-forest);
    color: var(--paper);
}

.btn--secondary {
    background: transparent;
    color: var(--deep-forest);
    border: 1px solid rgba(45, 64, 52, 0.2);
}

.btn--secondary:hover {
    background: var(--action);
    border-color: var(--deep-forest);
    color: var(--deep-forest);
}

/* ----- Intro Section ----- */
.intro {
    text-align: center;
}

.intro__text {
    max-width: 800px;
    font-size: 1.125rem;
    color: var(--slate);
    line-height: 1.6;
    text-wrap: pretty;
}

/* Center alignment for sections with .intro class */
.intro .intro__text {
    margin: 0 auto var(--space-md);
}

/* Left alignment for standard sections */
.section:not(.intro) .intro__text {
    margin: 0 0 var(--space-md) 0;
}

/* Specific override for intro section on homepage */
#intro {
    text-align: left;
}

#intro .intro__text {
    margin: 0 0 var(--space-md) 0;
    max-width: 600px;
}

#intro h2 {
    max-width: 600px;
}

.intro__cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

#zakelijk .intro__cards {
    margin-top: 0;
}

/* ----- Intro Cards (Location Pages & Home) ----- */
.intro__card {
    background: var(--white);
    padding: var(--space-md);
    border-radius: var(--radius-card-outer);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(45, 64, 52, 0.05);
    text-align: center;
    /* Keep text centered */
    display: flex !important;
    /* Force flex */
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    height: 100%;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

/* ----- Start Overlay Redesign ----- */
#startOverlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(rgba(42, 82, 58, 0.5), rgba(42, 82, 58, 0.5)), url('../assets/images/experience-overlay.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 0.8s ease-in-out, visibility 0.8s;
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
    font-family: var(--font-body);
    color: var(--paper);
}

.start-container {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4rem;
    width: 100%;
    max-width: 72rem;
    padding: 1.5rem;
}

/* Background Decoration */
.overlay-bg-decoration {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
}

.bg-blur-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    background: rgba(197, 217, 184, 0.05);
    /* var(--action) approx */
    border-radius: 50%;
    filter: blur(120px);
}

/* Start Card */
.start-card-wrapper {
    position: relative;
    width: 100%;
    max-width: 60rem;
}

.organic-border {
    position: absolute;
    inset: -1rem;
    border-radius: 60% 40% 70% 30% / 40% 50% 60% 50%;
    background: rgba(197, 217, 184, 0.1);
    /* var(--action) */
    opacity: 0.2;
    filter: blur(40px);
    transition: opacity 1s ease;
}

.start-card-wrapper:hover .organic-border {
    opacity: 0.3;
}

.start-card-content {
    background: transparent;
    backdrop-filter: none;
    border: none;
    /* var(--action) */
    border-radius: 0;
    padding: 3rem 4rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    box-shadow: none;
    /* var(--action) */
    position: relative;
    overflow: visible;
}

.gradient-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(to right, transparent, rgba(197, 217, 184, 0.2), transparent);
    /* var(--action) */
}

.start-label-new {
    color: var(--action);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    font-weight: 700;
}

.start-fact-new {
    font-family: var(--font-body);
    font-size: clamp(1.35rem, 3vw, 2rem);
    line-height: 1.6;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.02em;
    text-wrap: balance;
    margin-bottom: 0;
    color: var(--paper);
}

/* Icons Row */
.start-icons-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
}

@media (min-width: 768px) {
    .start-icons-row {
        flex-direction: row;
        gap: 4rem;
    }
}

.start-icon-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    opacity: 0.5;
    transition: opacity 0.5s ease;
    cursor: default;
}

#overlayAudioToggle {
    cursor: pointer;
}

.start-icon-item:hover {
    opacity: 1;
}

.icon-box {
    padding: 0.75rem;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--paper);
}

.start-icon-item:hover .icon-box {
    border-color: rgba(197, 217, 184, 0.4);
    /* var(--action) */
    background: rgba(197, 217, 184, 0.05);
    color: var(--action);
}

.material-symbols-outlined,
iconify-icon {
    font-size: 1.25rem;
    /* text-xl */
    color: inherit;
}

.icon-text-col {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.icon-label-main {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
    color: var(--paper);
}

.icon-label-sub {
    font-size: 9px;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

.divider-vertical {
    display: none;
    width: 1px;
    height: 2rem;
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .divider-vertical {
        display: block;
    }
}

/* Button */
.btn-organic-start {
    position: relative;
    padding: 1.25rem 3rem;
    border-radius: var(--radius-full);
    background: transparent;
    border: 1px solid rgba(197, 217, 184, 0.3);
    /* var(--action) */
    overflow: hidden;
    cursor: pointer;
    transition: all 0.5s ease;
}

.btn-organic-start:hover {
    border-color: var(--action);
}

.btn-hover-bg {
    position: absolute;
    inset: 0;
    background: var(--action);
    opacity: 0;
    transition: opacity 0.5s ease;
}

.btn-organic-start:hover .btn-hover-bg {
    opacity: 0.1;
}

.btn-text {
    position: relative;
    z-index: 10;
    color: var(--action);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5em;
    transition: all 0.5s ease;
}

.btn-organic-start:hover .btn-text {
    letter-spacing: 0.6em;
}

/* Mask */
.overlay-mask {
    position: fixed;
    inset: 0;
    pointer-events: none;
    box-shadow: inset 0 0 150px rgba(0, 0, 0, 0.8);
    z-index: 40;
}


/* ----- Audio Controls & Start Overlay ----- */
.audio-control {
    position: absolute;
    bottom: 2rem;
    left: 2rem;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: center;
}

.audio-btn {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--paper);
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.5rem;
}

.audio-btn:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.05);
}

.audio-btn.playing {
    background: rgba(197, 217, 184, 0.2);
    border-color: var(--action);
    color: var(--action);
    animation: pulse-audio 2s infinite;
}

@keyframes pulse-audio {
    0% {
        box-shadow: 0 0 0 0 rgba(197, 217, 184, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(197, 217, 184, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(197, 217, 184, 0);
    }
}

/* Mobile specific styling override check */
.audio-btn-mobile {
    display: inline-flex;
    width: 36px;
    height: 36px;
    font-size: 1.2rem;
    margin-left: 0.5rem;
    vertical-align: middle;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

/* Hide desktop button on mobile, show mobile button */
@media (max-width: 768px) {
    .audio-control {
        display: none;
    }

    .audio-btn-mobile {
        display: inline-flex;
    }
}

/* Hide mobile button on desktop, show desktop button */
@media (min-width: 769px) {
    .audio-btn-mobile {
        display: none;
    }

    .audio-control {
        display: flex;
    }
}


/* Start Overlay */
/* #startOverlay definition consolidated above */


/* Mobile Overlay Fixes */
@media (max-width: 768px) {
    #startOverlay {
        padding: 1rem;
        align-items: flex-start;
        /* Allow scrolling from top */
        overflow-y: auto;
        /* Enable vertical scrolling */
        background-color: var(--deep-forest);
        /* Fallback if image delays */
    }

    .start-container {
        gap: 1.5rem;
        /* Reduced from 4rem */
        padding: 1rem 0;
        /* Reduced padding */
        margin-top: 2rem;
        /* Give some top space */
        height: auto;
        min-height: min-content;
    }

    .start-card-content {
        padding: 2rem 1.5rem;
        /* Reduced from 3rem 4rem */
        gap: 1rem;
        width: 100%;
        /* Ensure it doesn't overflow */
    }

    .start-fact-new {
        font-size: 1.15rem;
        /* Smaller font for mobile */
        line-height: 1.5;
    }

    .start-icons-row {
        gap: 1.5rem;
        /* Reduced gap */
        width: 100%;
    }

    .start-card-wrapper {
        margin-bottom: 1rem;
        width: 100%;
    }

    /* Ensure button is easily clickable */
    #startBtn {
        width: 100%;
        justify-content: center;
        padding: 1rem;
    }

    /* Hide overlay on mobile */
    #startOverlay,
    .overlay-mask {
        display: none !important;
    }
}


#startOverlay.hidden {

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.start-content {
    text-align: center;
    max-width: 600px;
    padding: 2rem;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 1s ease 0.5s forwards;
}

.start-logo {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: var(--white);
}

.start-text {
    font-size: 1.125rem;
    opacity: 0.8;
    margin-bottom: 2rem;
}

.btn-start {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: var(--white);
    padding: 1rem 3rem;
    font-size: 1.1rem;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-body);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-start:hover {
    background: var(--white);
    color: var(--deep-forest);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.intro__card>span:last-of-type {
    margin-top: auto;
    padding-top: var(--space-sm);
    display: block;
    width: fit-content;
}

.intro__card.stagger-2 {
    margin-top: 0;
}

/* Default state: No hover effect for regular intro cards */
.intro__card:hover {
    transform: none !important;
    box-shadow: var(--shadow-soft) !important;
    border-color: rgba(45, 64, 52, 0.05) !important;
}

/* Only apply hover effect to cards with .hover-lift class (Clickable/Interactive) */
.intro__card.hover-lift:hover {
    transform: var(--card-hover-transform) !important;
    box-shadow: var(--card-hover-shadow) !important;
    border-color: var(--card-hover-border) !important;
    cursor: pointer;
}

.intro__card h3 {
    margin-bottom: var(--space-xs);
    font-weight: 600;
    color: var(--deep-forest);
}

.intro__card-icon {
    font-size: var(--icon-size-lg);
    color: var(--sage);
    margin-bottom: var(--space-sm);
    align-self: center;
    /* Explicitly center icon */
    display: inline-flex;
    /* Fix for iconify alignment */
}

.intro__card p {
    color: var(--slate);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
    line-height: 1.6;
    flex-grow: 1;
    /* Push button to bottom */
}

.intro__card .btn {
    margin-top: auto;
    align-self: center;
    /* Keep button centered */
}

/* Specific alignment classes for intro cards */
.intro__card--left {
    text-align: left;
    align-items: flex-start;
}

.intro__card--left h3,
.intro__card--left p {
    text-align: left;
}

.intro__card--left .btn {
    align-self: flex-start;
}

/* SEO Cards Specifics */
.seo-card-list {
    margin-top: 1rem;
    list-style: none;
    padding: 0;
    text-align: left;
}

.seo-card-list li {
    margin-bottom: 0.5rem;
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.seo-card-list-icon {
    color: var(--action);
    font-size: 1.25rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.card-image-wrapper {
    margin-bottom: 0;
    width: 100%;
}



.card-image-wrapper img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* Download Card Variant */
.intro__card--download {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--paper);
}

.intro__card--download h3 {
    color: var(--paper);
}

.intro__card--download p {
    color: rgba(255, 255, 255, 0.8);
}

.intro__card--static {
    cursor: default;
}

.intro__card--static:hover {
    transform: none;
    box-shadow: var(--shadow-soft);
    border-color: rgba(45, 64, 52, 0.05);
}

.reviews {
    background: var(--deep-forest);
    color: var(--paper);
    overflow: hidden;
    padding: var(--space-lg) 0;
}

section.reviews--spaced {
    padding-bottom: var(--space-xl);
}

.reviews h2 {
    text-align: center;
    color: var(--paper);
    margin-bottom: var(--space-xs);
}

/* ----- Social Proof (Reviews Carousel) ----- */
.reviews__header {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.trust-badges {
    display: flex;
    gap: var(--space-md);
    margin-bottom: 0;
}

.trust-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 0.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--sage);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    min-height: 60px;
}

.stars-row {
    display: flex;
    gap: 2px;
    color: #FFD700;
    /* Gold/Yellow */
}

.stars-row iconify-icon {
    font-size: 1.25rem;
}

.trust-badge>iconify-icon {
    font-size: 2rem;
    margin-bottom: -2px;
}

/* Trust Badge Responsive Visibility */
.trust-badge--mobile {
    display: none;
}

@media (max-width: 768px) {
    .trust-badge--desktop {
        display: none !important;
    }

    .trust-badge--mobile {
        display: flex;
        margin-top: var(--space-md);
        margin-bottom: var(--space-sm);
        width: 100%;
        justify-content: center;
        align-items: center;
    }
}

/* Draggable Carousel Container */
.reviews-carousel {
    position: relative;
    width: 100%;
}

/* Fade gradient edges - disabled for simpler layout */
/*
.reviews-carousel::before,
.reviews-carousel::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: var(--radius-full);
    width: 60px;
    z-index: 2;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.reviews-carousel::before {
    left: 0;
    background: linear-gradient(to right, var(--deep-forest), transparent);
    opacity: 0;
}

.reviews-carousel::after {
    right: 0;
    background: linear-gradient(to left, var(--deep-forest), transparent);
}
*/

/* Scroll indicators - disabled with gradients
.reviews-carousel.scroll-start::before {
    opacity: 0;
}

.reviews-carousel.scroll-end::after {
    opacity: 0;
}

.reviews-carousel.scroll-middle::before,
.reviews-carousel.scroll-middle::after {
    opacity: 1;
}
*/

/* Scrollable Track - Updated for JS Physics */
.reviews-carousel__track {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-lg);
    overflow: visible;
    /* Changed from auto to visible for transform */
    -webkit-overflow-scrolling: touch;
    cursor: grab;
    scrollbar-width: none;
    -ms-overflow-style: none;
    will-change: transform;
    /* Hint for performance */
    transition: transform 0.1s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    /* Subtle smoothing */
}

/* Base style for the container to clip the track */
.reviews-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    /* Added to clip the track transformation */
}

.reviews-carousel__track.dragging .review-card {
    pointer-events: none;
}

/* Review Cards */
.review-card {
    flex: 0 0 auto;
    width: min(340px, 80vw);
    background: var(--paper);
    padding: var(--space-md) var(--space-md) var(--space-sm);
    border-radius: var(--radius-card-outer);
    box-shadow: 0 8px 24px rgba(26, 46, 34, 0.08);
    border: 1px solid rgba(107, 123, 104, 0.08);
    text-align: left;
    position: relative;
    display: flex;
    flex-direction: column;
    scroll-snap-align: center;
    scroll-snap-stop: always;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
}

.review-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 32px rgba(26, 46, 34, 0.12);
}

.review-card::before {
    content: '"';
    position: absolute;
    top: 0.75rem;
    left: 1rem;
    font-family: var(--font-heading);
    font-size: 3.5rem;
    line-height: 1;
    color: var(--action);
    opacity: 0.25;
    pointer-events: none;
}

.review-card__quote {
    font-size: 0.95rem;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: var(--space-sm);
    padding-top: 1.5rem;
    position: relative;
    z-index: 1;
    color: var(--charcoal);
}

.review-card__author {
    font-weight: 600;
    color: var(--sage);
    font-size: 0.85rem;
    display: block;
    margin-top: auto;
    padding-top: var(--space-xs);
    border-top: 1px solid rgba(107, 123, 104, 0.1);
}



@media (max-width: 768px) {
    .reviews__header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .trust-badges {
        margin-top: -0.5rem;
    }

    .review-card {
        width: min(300px, 85vw);
        padding: var(--space-sm) var(--space-sm) var(--space-xs);
    }

    .review-card__quote {
        font-size: 0.9rem;
        padding-top: 1.25rem;
    }

    .review-card::before {
        font-size: 2.5rem;
        top: 0.5rem;
        left: 0.75rem;
    }
}

/* ----- CTA Banner ----- */
.cta-banner {
    text-align: center;
    color: var(--paper);
    position: relative;
    overflow: hidden;
}

.cta-banner__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.parallax-container {
    position: relative;
    overflow: hidden;
}

.parallax-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1.1);
    /* Match JS parallax start state */
    will-change: transform;
}

.cta-banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(42, 82, 58, 0.65) 0%,
            rgba(42, 82, 58, 0.45) 100%);
    z-index: 1;
}

.cta-banner .container {
    position: relative;
    z-index: 2;
}

.cta-banner h2 {
    color: var(--paper);
    margin-bottom: var(--space-sm);
}

.cta-banner p {
    opacity: 0.9;
    margin-bottom: var(--space-md);
}

.cta-banner--large-margin h2 {
    margin-bottom: 40px;
}

/* White CTA Banner Variant */
.cta-banner--white {
    background: var(--paper);
    margin: 0 !important;
    padding: var(--space-xl) 0 !important;
}

/* Hide the background image so the white paper color shows */
.cta-banner--white .cta-banner__bg {
    display: none;
}

.cta-banner--white::after {
    display: none;
    /* Remove dark overlay */
}

.cta-banner--white h2,
.cta-banner--white p {
    color: var(--deep-forest);
}

.cta-banner--white .btn--primary {
    background: var(--deep-forest);
    color: var(--paper);
}

.cta-banner--white .btn--primary:hover {
    background: var(--charcoal);
}

/* ----- Footer ----- */
.footer {
    position: relative;
    background: linear-gradient(165deg, var(--charcoal) 0%, #151515 100%);
    color: var(--paper);
    padding: var(--space-lg) 0 0;
    overflow: hidden;
}

/* Decorative Leaves */
.footer__decoration {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    overflow: hidden;
}

.footer__leaf {
    position: absolute;
    font-size: 6rem;
    color: rgba(107, 123, 104, 0.06);
    opacity: 0.8;
}

.footer__leaf--1 {
    top: 2rem;
    right: 5%;
    transform: rotate(25deg);
    animation: leafFloat 8s ease-in-out infinite;
}

.footer__leaf--2 {
    bottom: 4rem;
    left: 3%;
    transform: rotate(-15deg) scaleX(-1);
    animation: leafFloat 10s ease-in-out infinite reverse;
    font-size: 4rem;
}

@keyframes leafFloat {

    0%,
    100% {
        transform: translateY(0) rotate(25deg);
    }

    50% {
        transform: translateY(-8px) rotate(28deg);
    }
}



/* Main Footer Content */
.footer__main {
    display: grid;
    grid-template-columns: 1.4fr 2fr;
    gap: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    position: relative;
    z-index: 1;
}

/* Brand Column */
.footer__brand {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.footer__logo {
    font-family: var(--font-heading);
    font-size: 2rem;
    color: var(--paper);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.footer__logo:hover {
    color: var(--action);
}

.footer__tagline {
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.95rem;
    line-height: 1.7;
    max-width: 300px;
}

/* Social Links */
.footer__social {
    display: flex;
    gap: 0.75rem;
    margin-top: var(--space-xs);
}

.footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    color: var(--paper);
    font-size: 1.25rem;
    transition: all 0.3s ease;
}

.footer__social-link:hover {
    background: var(--action);
    border-color: var(--action);
    color: var(--deep-forest);
    transform: translateY(-3px);
}

/* Links Grid */
.footer__links {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1.3fr;
    gap: var(--space-lg);
}

.footer__col {
    display: flex;
    flex-direction: column;
}

.footer__col h4 {
    font-family: var(--font-body);
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--action);
    margin-bottom: var(--space-sm);
}

/* Navigation Lists */
.footer__nav {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.footer__nav li a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease, transform 0.2s ease;
    display: inline-block;
    position: relative;
}

.footer__nav li a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--action);
    transition: width 0.3s ease;
}

.footer__nav li a:hover {
    color: var(--paper);
    transform: translateX(3px);
}

.footer__nav li a:hover::after {
    width: 100%;
}

/* Contact Links */
.footer__nav .footer__contact-link {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
    width: fit-content;
}

.footer__contact-link:hover {
    color: var(--paper);
}

.footer__nav .footer__contact-link iconify-icon {
    font-size: 1.25rem;
    width: 24px;
    display: inline-flex;
    justify-content: center;
    color: var(--sage);
    flex-shrink: 0;
}



/* Contact Navigation Specific */
.footer__nav--contact {
    gap: 1.25rem;
}

/* Bottom Bar */
.footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    position: relative;
    z-index: 1;
}

.footer__bottom-left p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer__bottom-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
}

.footer__bottom-right a {
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color 0.2s ease;
}

.footer__bottom-right a:hover {
    color: var(--action);
}

.footer__divider {
    color: rgba(255, 255, 255, 0.2);
}

/* Footer Mobile Responsive Refactor (768px) */
@media (max-width: 768px) {
    .footer__main {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .footer__brand {
        align-items: center;
        text-align: center;
    }

    .footer__tagline {
        max-width: 400px;
    }

    /* 2 Column Grid for Links */
    .footer__links {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md) var(--space-lg);
        /* Row gap, Col gap */
        text-align: left;
        /* Default left */
    }

    /* Left Column (Aanbod, Locaties) */
    .footer__col:nth-child(1),
    .footer__col:nth-child(3) {
        align-items: flex-start;
        text-align: left;
    }

    .footer__col:nth-child(1) .footer__nav,
    .footer__col:nth-child(3) .footer__nav {
        align-items: flex-start;
    }

    /* Right Column (Informatie, Contact) */
    .footer__col:nth-child(2),
    .footer__col:nth-child(4) {
        align-items: flex-end;
        text-align: right;
    }

    .footer__col:nth-child(2) .footer__nav,
    .footer__col:nth-child(4) .footer__nav {
        align-items: flex-end;
    }

    /* Improve Touch Targets */
    .footer__nav a {
        padding: 12px 0;
        /* Increase vertical hit area */
        display: block;
        /* Ensure full width clickability */
        min-height: 44px;
        /* Minimum recommended touch target size */
        display: flex;
        align-items: center;
        /* Center text vertically */
    }

    .footer__col:nth-child(3) .footer__nav a,
    .footer__col:nth-child(4) .footer__nav a {
        justify-content: flex-end;
        /* Align text within block for right col */
    }

    .footer__col:nth-child(1) .footer__nav a,
    .footer__col:nth-child(2) .footer__nav a {
        justify-content: flex-start;
        /* Align text within block for left col */
    }

    /* Bottom Bar */
    .footer__bottom {
        flex-direction: column;
        gap: var(--space-sm);
        text-align: center;
    }

    .footer__bottom-right {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* Left Aligned Footer Variant - Refined v3 */
    .footer--mobile-left .footer__brand {
        align-items: flex-start;
        text-align: left;
    }

    .footer--mobile-left .footer__tagline {
        margin-left: 0;
    }

    .footer--mobile-left .footer__social {
        justify-content: flex-start;
    }

    .footer--mobile-left .footer__links {
        grid-template-columns: repeat(2, 1fr);
        row-gap: var(--space-lg);
    }

    .footer--mobile-left .footer__col,
    .footer--mobile-left .footer__col:nth-child(even),
    .footer--mobile-left .footer__col:nth-child(odd) {
        align-items: flex-start;
        text-align: left;
    }

    .footer--mobile-left .footer__nav,
    .footer--mobile-left .footer__nav--contact {
        align-items: flex-start !important;
    }

    .footer--mobile-left .footer__nav a,
    .footer--mobile-left .footer__contact-link {
        justify-content: flex-start !important;
        text-align: left;
        padding: 4px 0 !important;
        min-height: auto !important;
    }

    .footer--mobile-left .footer__col:nth-child(even) .footer__nav,
    .footer--mobile-left .footer__col:nth-child(odd) .footer__nav {
        align-items: flex-start !important;
    }

    .footer--mobile-left .footer__bottom {
        align-items: center;
        text-align: center;
    }

    .footer--mobile-left .footer__bottom-right {
        justify-content: center;
    }
}

/* Hide decoration on smaller screens */
@media (max-width: 600px) {
    .footer__leaf--1 {
        display: none;
    }
}

/* ----- Mobile Responsive ----- */
@media (max-width: 768px) {
    :root {
        --space-lg: 4rem;
        --space-xl: 5rem;
    }

    .header__nav {
        /* Full-screen overlay */
        display: flex;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100vh;
        height: 100dvh;
        background: rgba(253, 253, 251, 1);
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        padding: calc(var(--space-xl) * 1.8) var(--space-lg) var(--space-lg);
        gap: var(--space-md);
        overflow-y: auto;
        z-index: 1000;

        /* Hidden State */
        opacity: 0;
        visibility: hidden;
        transition:
            opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1),
            visibility 0.4s;
    }

    .header__nav.active {
        /* Visible State */
        opacity: 1;
        visibility: visible;
    }

    /* Staggered Link Logic */
    .header__nav a {
        font-family: var(--font-body);
        font-weight: 500;
        color: var(--deep-forest);
        font-size: 1.5rem;
        padding: 0.25rem 0;
        width: 100%;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease, color 0.2s;
    }

    .header__nav.active a {
        opacity: 1;
        transform: translateY(0);
    }

    /* Stagger Delays */
    .header__nav.active a:nth-child(1) {
        transition-delay: 0.1s;
    }

    .header__nav.active div:nth-child(2) {
        transition-delay: 0.15s;
    }

    /* This is the div wrapper for 'Aanbod' */
    .header__nav.active a:nth-child(3) {
        transition-delay: 0.2s;
    }

    .header__nav.active a:nth-child(4) {
        transition-delay: 0.25s;
    }

    .header__nav.active a:nth-child(5) {
        transition-delay: 0.3s;
    }

    /* Brand name at bottom of nav overlay - hidden */
    .nav__brand {
        display: none;
    }

    /* LinkedIn social link in nav overlay */
    .nav__social {
        display: flex;
        margin-top: 0;
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
    }

    .header__nav.active .nav__social {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.35s;
    }

    .nav__social-link {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px;
        min-height: 44px;
        flex-shrink: 0;
        background: rgba(26, 46, 34, 0.05);
        border: 1px solid rgba(26, 46, 34, 0.1);
        border-radius: var(--radius-full);
        color: var(--charcoal);
        font-size: 1.25rem;
        transition: all 0.3s ease;
        padding: 0 !important;
    }

    .nav__social-link::after {
        content: none !important;
        display: none !important;
    }

    .nav__social-link:hover {
        background: var(--action);
        border-color: var(--action);
        color: var(--deep-forest);
        transform: translateY(-3px);
    }

    /* Special handling for dropdown wrapper animation */
    .header__nav .nav__item {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 0.3s ease, transform 0.3s ease;
        width: 100%;
    }

    .header__nav.active .nav__item {
        opacity: 1;
        transform: translateY(0);
        transition-delay: 0.15s;
    }

    .header__nav a::after {
        background: var(--deep-forest);
        height: 2.5px;
    }

    .nav__item {
        flex-direction: column;
        align-items: flex-start;
    }

    .dropdown__trigger {
        color: var(--charcoal) !important;
        font-size: 1.5rem;
        padding: 0.25rem 0;
        width: 100%;
        justify-content: space-between;
    }

    .header__nav .dropdown__trigger:hover,
    .dropdown__trigger.active {
        color: var(--charcoal) !important;
    }

    .dropdown__trigger::after {
        opacity: 0.7;
    }

    .dropdown__trigger-icon {
        font-size: 1.5rem;
        transition: none;
        transform: none !important;
    }

    .dropdown__menu {
        position: static;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 var(--space-md);
        min-width: 0;
        width: 100%;
        display: none;
        align-items: flex-start;
        transition: none;
    }

    .nav__item.active .dropdown__menu {
        display: flex;
        animation: slideDown 0.3s ease forwards;
    }

    @keyframes slideDown {
        from {
            opacity: 0;
            transform: translateY(-5px);
        }

        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown__menu a {
        font-size: 1.1rem !important;
        padding: 0.5rem 0 !important;
    }

    /* Menu Button Logic handled here to override potential conflicts */
    .header__menu-btn {
        display: block;
        z-index: 1002;
        /* Ensure above full-screen overlay */
        position: relative;
    }

    /* Prevent body scroll when nav is open */
    body.nav-open {
        overflow: hidden;
    }

    body.nav-open .chatbot,
    body.nav-open .whatsapp-btn,
    body.nav-open .back-to-top {
        display: none !important;
    }

    /* Hamburger to X Animation */
    .header__menu-btn span {
        transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
        transform-origin: center;
    }

    .header__menu-btn.active span:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
        background: var(--charcoal) !important;
    }

    .header__menu-btn.active span:nth-child(2) {
        opacity: 0;
        transform: scale(0);
    }

    .header__menu-btn.active span:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
        background: var(--charcoal) !important;
    }

    .hero__usps {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .hero__ctas {
        flex-direction: column;
    }

    .btn {
        width: 100%;
        text-align: center;
    }

    .review-card {
        flex: 0 0 280px;
    }
}

@media (max-width: 768px) {
    .grid-editorial {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
    }

    .grid-editorial>div {
        grid-column: span 12 !important;
        margin-top: 0 !important;
    }
}

@media (max-width: 480px) {
    h1 {
        font-size: 2.75rem;
    }

    .container {
        padding: 0 var(--space-sm);
    }
}

/* ----- Subpage Hero ----- */
.hero--sub {
    min-height: 60vh;
}

.hero--small {
    min-height: 50vh;
}

/* ----- Dienst Cards ----- */
.dienst-card {
    text-align: left;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    height: 100%;
    margin-top: 0;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), border-color var(--transition-normal);
    background: var(--white);
    padding: var(--space-md);
    border-radius: var(--radius-card-outer);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(45, 64, 52, 0.05);
}



.dienst-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    border-radius: var(--radius-lg);
    margin-bottom: 0;
}

.dienst-card__tagline {
    color: var(--sage);
    margin-bottom: var(--space-sm);
}

.dienst-card__features {
    list-style: none;
    margin: var(--space-sm) 0;
    padding: 0;
}

.dienst-card__features li {
    position: relative;
    padding-left: 0;
    margin-bottom: 0.5rem;
    color: var(--slate);
    font-size: 0.9rem;
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
}

.dienst-card__feature-icon {
    color: var(--action);
    font-size: 1.125rem;
    flex-shrink: 0;
    margin-top: 2px;
}

.dienst-card__meta {
    font-size: 0.9rem;
    color: var(--sage);
    font-weight: 500;
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.dienst-card__meta-container {
    margin-top: auto;
    margin-bottom: var(--space-sm);
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
}

.dienst-card__meta-container .dienst-card__meta {
    margin-top: 0;
    margin-bottom: 0;
}

.dienst-card__meta::before {
    display: none;
}

.dienst-card__meta-icon {
    font-size: 1.1rem;
    color: var(--sage);
}

.dienst-card .btn {
    margin-top: var(--space-sm);
}

/* ----- Footstep Animation Background ----- */
.section--footsteps {
    position: relative;
    overflow: hidden;
}

.footsteps-container {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.footstep {
    position: absolute;
    width: 110px;
    /* Increased from 95px */
    height: 165px;
    /* Increased from 145px */
    background-color: var(--sage);
    -webkit-mask-image: url('../assets/images/footstep.svg');
    -webkit-mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-image: url('../assets/images/footstep.svg');
    mask-size: contain;
    mask-repeat: no-repeat;
    mask-position: center;
    opacity: 0;
    transition: opacity 0.5s ease-out, transform 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* 
 * Making base rotation effectively completely horizontal (looking right).
 * Because the original SVG path naturally points slightly off-axis, we need to counter-rotate it
 * to hit pure 90-degree visually.
 */

.footstep--left {
    transform: rotate(calc(95deg + var(--var-rot, 0deg))) translateY(30px) scale(calc(0.8 * var(--var-scale, 1)));
}

.footstep--left.visible {
    transform: rotate(calc(91deg + var(--var-rot, 0deg))) translateY(0) scale(calc(1 * var(--var-scale, 1)));
    opacity: 0.6;
}

/* For right footsteps, we mirror with scaleX(-1) and adjust rotation to point completely right */
.footstep--right {
    transform: scaleX(-1) rotate(calc(-95deg + var(--var-rot, 0deg))) translateY(30px) scale(calc(0.8 * var(--var-scale, 1)));
}

.footstep--right.visible {
    transform: scaleX(-1) rotate(calc(-110deg + var(--var-rot, 0deg))) translateY(0) scale(calc(1 * var(--var-scale, 1)));
    opacity: 0.6;
}

/* Snaking positions from left to right - Tweak individual rotations to align with reference */
.footstep:nth-child(1) {
    top: 20%;
    left: 8%;
    transform-origin: center;
    --var-scale: 0.95;
    --var-rot: -5deg;
    /* Tilted slightly up */
}

.footstep:nth-child(2) {
    top: 38%;
    left: 21%;
    transform-origin: center;
    --var-scale: 1.05;
    --var-rot: 30deg;
    /* Tilted significantly down & outward (right foot below "Onze") */
}

.footstep:nth-child(3) {
    top: 26%;
    left: 41%;
    transform-origin: center;
    --var-scale: 0.9;
    --var-rot: -10deg;
    /* Tilted slightly up */
}

.footstep:nth-child(4) {
    top: 47%;
    left: 57%;
    transform-origin: center;
    --var-scale: 1.1;
    --var-rot: 15deg;
    /* Tilted downward, but not as severely as foot 2 */
}

.footstep:nth-child(5) {
    top: 31%;
    left: 74%;
    transform-origin: center;
    --var-scale: 0.98;
    --var-rot: -8deg;
    /* Tilted slightly up */
}

.footstep:nth-child(6) {
    top: 52%;
    left: 89%;
    transform-origin: center;
    --var-scale: 1.02;
    --var-rot: 20deg;
    /* Tilted downward over the final number blob */
}

@media (max-width: 768px) {
    .footstep {
        width: 75px;
        /* Increased mobile size from 65px */
        height: 110px;
        /* Increased mobile size from 95px */
    }

    .footstep:nth-child(1) {
        top: 10%;
        left: 10%;
    }

    .footstep:nth-child(2) {
        top: 25%;
        left: 80%;
    }

    .footstep:nth-child(3) {
        top: 40%;
        left: 15%;
    }

    .footstep:nth-child(4) {
        top: 55%;
        left: 85%;
    }

    .footstep:nth-child(5) {
        top: 70%;
        left: 10%;
    }

    .footstep:nth-child(6) {
        top: 85%;
        left: 80%;
    }
}

/* ----- Werkwijze Cards ----- */
.werkwijze-card {
    text-align: center;
    padding: var(--space-md);
}

.werkwijze-card__number {
    width: 50px;
    height: 50px;
    background: var(--action);
    color: var(--deep-forest);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-heading);
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto var(--space-sm);
}

.werkwijze-card h3 {
    color: var(--paper);
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.werkwijze-card p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.95rem;
}

/* ----- Team Profiles ----- */
.team-profiles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    align-items: start;
}

.team-card {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-lg);
    align-items: start;
    background: var(--white);
    padding: var(--space-lg);
    border-radius: var(--radius-card-outer);
    box-shadow: var(--shadow-soft);
}

.team-card__image img {
    width: 180px;
    height: 180px;
    border-radius: var(--radius-full);
    object-fit: cover;
}

.team-card__content h3 {
    margin-bottom: var(--space-xs);
    font-weight: 600;
}

.team-card__title {
    color: var(--sage);
    font-style: italic;
    margin-bottom: var(--space-sm);
}

@media (max-width: 768px) {
    .team-profiles {
        grid-template-columns: 1fr;
    }

    .team-card {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .team-card__image {
        display: flex;
        justify-content: center;
    }

    .team-card__image img {
        width: 120px;
        height: 120px;
    }

    .werkwijze-card {
        padding: var(--space-sm);
    }
}

/* ----- Download Cards ----- */
.download-card__icon {
    font-size: 3rem;
    margin-bottom: var(--space-sm);
}

/* ----- Contact Page ----- */
.contact-grid {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-xl);
    align-items: start;
}

.contact-form-wrapper h2,
.contact-info h2 {
    margin-bottom: var(--space-md);
}

.contact-info>p {
    margin-bottom: var(--space-lg);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.form-group label {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--charcoal);
}

.form-group input,
.form-group select,
.form-group textarea {
    padding: 0.875rem 1rem;
    border: 1px solid rgba(45, 64, 52, 0.2);
    border-radius: var(--radius-md);
    font-family: var(--font-body);
    font-size: 1rem;
    background: var(--white);
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--deep-forest);
    box-shadow: 0 0 0 3px rgba(45, 64, 52, 0.1);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.contact-form .btn {
    align-self: flex-start;
    margin-top: var(--space-sm);
}

/* ----- FAQ Section ----- */
.faq-section {
    text-align: center;
}

.faq-section h2 {
    margin-bottom: var(--space-xs);
}

.faq-section__subtitle {
    color: var(--slate);
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 800px;
    margin: 0 auto;
}

.faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid rgba(26, 46, 34, 0.12);
    border-radius: 0;
    padding: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}

.faq-item:first-child {
    border-top: 1px solid rgba(26, 46, 34, 0.12);
}

.faq-item summary {
    padding: 1.5rem 0;
    cursor: pointer;
    font-weight: 600;
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--deep-forest);
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    text-align: left;
    background: transparent;
    transition: color 0.2s;
}

.faq-item summary:hover {
    color: var(--sage);
}

.faq-item summary::-webkit-details-marker {
    display: none;
}

.faq-item summary::after {
    content: '';
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: 1.5px solid var(--sage);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7B68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='12' y1='5' x2='12' y2='19'%3E%3C/line%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.3s ease, background-image 0.3s ease;
}

.faq-item[open] summary::after {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236B7B68' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='5' y1='12' x2='19' y2='12'%3E%3C/line%3E%3C/svg%3E");
}

.faq-item[open] summary {
    color: var(--deep-forest);
}

.faq-item p {
    padding: 0 0 1.5rem 0;
    color: var(--slate);
    line-height: 1.7;
    margin: 0;
    background: transparent;
    text-align: left;
}

/* FAQ CTA Section */
.faq-cta {
    background: var(--cream);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    margin-top: var(--space-lg);
    text-align: center;
}

.faq-cta h3 {
    font-weight: 600;
    font-size: 1.25rem;
    color: var(--deep-forest);
    margin-bottom: 0.5rem;
}

.faq-cta p {
    color: var(--slate);
    margin-bottom: var(--space-sm);
    font-size: 1rem;
}

/* ----- ROI Section Redesign ----- */
.roi-section {
    position: relative;
    padding: var(--space-lg) 0;
    overflow: hidden;
    background-color: var(--paper);
}

/* Subtle Grain Overlay */
.roi-section::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.015;
    pointer-events: none;
    z-index: 1;
}

.roi-container {
    position: relative;
    z-index: 2;
}

.roi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    align-items: center;
}

.roi-content h2 {
    margin-bottom: var(--space-sm);
}

.roi-stats-display {
    position: relative;
    padding: 2rem;
}

/* Organic Background Shape */
.roi-stats-display::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle at center, rgba(197, 217, 184, 0.2) 0%, transparent 70%);
    z-index: -1;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    animation: organic-float 20s infinite alternate ease-in-out;
}

@keyframes organic-float {
    0% {
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
        transform: translate(-50%, -50%) rotate(0deg);
    }

    100% {
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 60%;
        transform: translate(-50%, -53%) rotate(5deg);
    }
}

/* Glassmorphic ROI Cards */
.roi-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: var(--radius-card-outer);
    padding: 1.5rem 2rem;
    box-shadow: var(--shadow-medium);
    margin-bottom: 1.5rem;
    position: relative;
}



.roi-card--accent {
    background: rgba(26, 46, 34, 0.05);
    border-color: rgba(26, 46, 34, 0.1);
}

.roi-card__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.roi-card__label {
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--sage);
}

.roi-card__value {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--deep-forest);
    line-height: 1;
}

.roi-card__progress-track {
    width: 100%;
    height: 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 0.75rem;
}

.roi-card__progress-bar {
    height: 100%;
    background: var(--sage);
    border-radius: 4px;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 2s ease-out;
}

.reveal.active .roi-card__progress-bar {
    transform: scaleX(1);
}

.roi-card__desc {
    font-size: 0.9rem;
    color: var(--slate);
    margin: 0;
}

/* ROI Badge */
.roi-badge {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.5rem;
    background: var(--deep-forest);
    color: var(--white);
    border-radius: var(--radius-card-outer);
    box-shadow: 0 15px 40px rgba(26, 46, 34, 0.2);
}

.roi-badge__score {
    font-family: var(--font-heading);
    font-size: 3rem;
    line-height: 1;
    color: var(--action);
}

.roi-badge__text {
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.4;
}

@media (max-width: 992px) {
    .roi-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .roi-stats-display {
        padding: 0;
    }

    .roi-stats-display::before {
        width: 140%;
    }
}


.contact-info__item {
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(45, 64, 52, 0.05);
}

.contact-info__item:last-child {
    border-bottom: none;
}

.contact-info__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}

.contact-info__icon {
    font-size: 1.25rem;
    color: var(--sage);
    opacity: 0.8;
}

.contact-info__item h3 {
    margin-bottom: 0;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--sage);
}

.contact-info__primary {
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 0.15rem !important;
    color: var(--deep-forest);
}

.contact-info__primary a {
    color: inherit;
    transition: color var(--transition-normal);
}

.contact-info__primary a:hover {
    color: var(--sage);
}

.contact-info__item p {
    margin-bottom: 0;
}

.contact-info__item .text-slate {
    font-size: 0.95rem;
    opacity: 0.9;
}

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

    /* .contact-info order override removed to let Contact Form appear first */
}

@media (max-width: 768px) {
    .intro__cards[style*="grid-template-columns: repeat(3"] {
        grid-template-columns: 1fr !important;
    }
}

/* ----- Maps Grid ----- */
.maps-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-md);
    margin-top: var(--space-md);
}

.map-card {
    background: rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* .map-card:hover removed */

.map-card__map {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    /* pointer-events: none;  <-- Removed to restore interaction */
}

/* Overlay removed */

.map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: var(--space-md);
    color: var(--sage);
    font-weight: 500;
    text-decoration: none;
    transition: color var(--transition-fast);
}

.map-link:hover {
    color: var(--action);
}

.map-link iconify-icon {
    font-size: 1.2em;
    transform: translateY(1px);
}

.map-card__map iframe {
    width: calc(100% + 100px);
    height: calc(100% + 150px);
    margin: -100px -50px -50px -50px;
    border: 0;
    filter: saturate(0.9) contrast(1.05);
}

.map-card__content {
    padding: var(--space-md);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.map-card__content h3 {
    color: var(--paper);
    margin-bottom: 12px;
    font-weight: 600;
}

.map-card__content p {
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

@media (max-width: 768px) {
    .maps-grid {
        grid-template-columns: 1fr;
    }
}

/* =========================================== */
/*               CHATBOT                       */
/* =========================================== */

/* Chatbot Container */
.chatbot {
    position: fixed;
    /* BOTTOM BUTTON: space-md (24px) */
    bottom: var(--space-md) !important;
    right: var(--space-md) !important;
    z-index: 1000;
    font-family: var(--font-body);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(20px);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
}

.chatbot.visible,
.chatbot.chatbot--open {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
}

/* Toggle Button */
.chatbot__toggle {
    width: 54px;
    height: 54px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--deep-forest) 0%, var(--sage) 100%);
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(26, 46, 34, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal), background var(--transition-normal);
    position: relative;
    z-index: 1001;
}

.chatbot__toggle:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 28px rgba(26, 46, 34, 0.4);
}

.chatbot__toggle-icon {
    font-size: 24px;
    color: var(--paper);
    transition: opacity var(--transition-fast), transform var(--transition-fast);
}

.chatbot__toggle-icon--close {
    position: absolute;
    opacity: 0;
    transform: rotate(-90deg);
}

.chatbot--open .chatbot__toggle-icon--chat {
    opacity: 0;
    transform: rotate(90deg);
}

.chatbot--open .chatbot__toggle-icon--close {
    opacity: 1;
    transform: rotate(0);
}

/* Chat Window */
.chatbot__window {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 380px;
    max-height: 520px;
    background: var(--paper);
    border-radius: var(--radius-card-outer);
    box-shadow: 0 20px 60px rgba(26, 46, 34, 0.2);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.95);
    transform-origin: bottom right;
    transition: opacity var(--transition-normal), transform var(--transition-normal), visibility var(--transition-normal);
    overflow: hidden;
}

.chatbot--open .chatbot__window {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

/* Header */
.chatbot__header {
    background: linear-gradient(135deg, var(--deep-forest) 0%, var(--sage) 100%);
    padding: var(--space-sm) var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--paper);
}

.chatbot__header-info {
    display: flex;
    flex-direction: column;
}

.chatbot__header-title {
    font-weight: 600;
    font-size: 1rem;
}

.chatbot__header-subtitle {
    font-size: 0.8rem;
    opacity: 0.8;
}

.chatbot__close {
    background: none;
    border: none;
    color: var(--paper);
    cursor: pointer;
    padding: var(--space-2xs);
    font-size: 1.25rem;
    opacity: 0.8;
    transition: opacity var(--transition-fast);
    display: flex;
    align-items: center;
    justify-content: center;
}

.chatbot__close:hover {
    opacity: 1;
}

/* Messages Area */
.chatbot__messages {
    flex: 1;
    padding: var(--space-md);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    max-height: 380px;
}

.chatbot__message {
    max-width: 85%;
    padding: var(--space-xs) var(--space-sm);
    border-radius: 12px;
    line-height: 1.5;
    font-size: 0.9rem;
}

.chatbot__message p {
    margin: 0;
}

.chatbot__message--bot {
    background: rgba(107, 123, 104, 0.12);
    color: var(--charcoal);
    align-self: flex-start;
    border-bottom-left-radius: 4px;
}

.chatbot__message--user {
    background: var(--deep-forest);
    color: var(--paper);
    align-self: flex-end;
    border-bottom-right-radius: 4px;
}

/* Options */
.chatbot__options {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    margin-top: 1.5rem;
}

.chatbot__option {
    padding: var(--space-xs) var(--space-sm);
    background: var(--white);
    border: 1px solid var(--action);
    border-radius: var(--radius-full);
    color: var(--deep-forest);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chatbot__option:hover:not(:disabled) {
    background: var(--action);
    color: var(--deep-forest);
}

.chatbot__option:disabled {
    opacity: 0.5;
    cursor: default;
}

.chatbot__option--selected {
    background: var(--deep-forest) !important;
    color: var(--paper) !important;
    border-color: var(--deep-forest) !important;
}

.chatbot__options--selected .chatbot__option:not(.chatbot__option--selected) {
    opacity: 0.4;
}

/* Tip Block */
.chatbot__tip {
    background: linear-gradient(to right, var(--action), transparent);
    padding: var(--space-sm) var(--space-md);
    border-left: 3px solid var(--sage);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.85rem;
    color: var(--deep-forest);
    line-height: 1.5;
}

.chatbot__tip strong {
    color: var(--deep-forest);
}

/* Referral Link */
.chatbot__referral {
    margin-top: 1.5rem;
}

.chatbot__referral-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: var(--deep-forest);
    color: var(--paper);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    font-weight: 500;
    text-decoration: none;
    transition: all var(--transition-fast);
}

/* Referral Link - CTA Button */
.chatbot .chatbot__referral-link:hover {
    background: var(--action) !important;
    color: var(--deep-forest) !important;
    transform: translateX(4px);
}

.chatbot .chatbot__referral-link:hover iconify-icon {
    color: var(--deep-forest) !important;
}

/* Restart Button */
.chatbot__restart {
    margin-top: var(--space-sm);
    padding-top: var(--space-sm);
    border-top: 1px solid rgba(107, 123, 104, 0.15);
}

.chatbot__restart-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: transparent;
    border: 1px solid var(--sage);
    border-radius: var(--radius-md);
    color: var(--sage);
    font-size: 0.8rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.chatbot__restart-btn:hover {
    background: var(--sage);
    color: var(--paper);
}

/* Footer */
.chatbot__footer {
    padding: 0 var(--space-md) var(--space-xs);
    background: rgba(107, 123, 104, 0.08);
    text-align: center;
}

.chatbot__footer-text {
    font-size: 0.7rem;
    color: var(--slate);
    opacity: 0.7;
}

@media (max-width: 768px) {
    .chatbot {
        bottom: var(--space-sm) !important;
        right: var(--space-sm) !important;
    }
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .chatbot {
        bottom: var(--space-sm) !important;
        right: var(--space-sm) !important;
        overflow: visible !important;
    }

    .chatbot__window {
        position: absolute;
        bottom: 70px;
        right: 0;
        width: calc(100vw - 32px);
        max-width: 380px;
        max-height: 520px;
        border-radius: var(--radius-card-outer);
        z-index: 1002;
    }

    .chatbot__messages {
        max-height: 380px;
    }
}


/* ----- Parallax Quote Section ----- */
.section-parallax {
    position: relative;
    min-height: 450px;
    display: flex;
    align-items: center;
    color: var(--paper);
    overflow: hidden;
    padding: var(--space-lg) 0;
}

.section-parallax::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(42, 82, 58, 0.65) 0%,
            rgba(42, 82, 58, 0.45) 100%);
    z-index: 1;
}

.section-parallax .container {
    position: relative;
    z-index: 2;
}

.parallax-content {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.parallax-quote {
    font-family: var(--font-body);
    font-size: clamp(1.2rem, 2.8vw, 1.6rem);
    line-height: 1.9;
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.02em;
    text-wrap: balance;
    margin-bottom: 0;
}

@media (max-width: 768px) {
    .section-parallax {
        background-attachment: scroll;
        /* Mobile friendly */
        min-height: 80vh;
        padding: var(--space-md) 0;
    }
}

/* =========================================== */
/*      VAN OVERLEVEN NAAR LEVEN REDESIGN      */
/* =========================================== */

.section--premium {
    position: relative;
    overflow: hidden;
}

.section--premium::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Gradient removed to eliminate visible separation between sections */
    pointer-events: none;
}

/* ----- High-End Editorial Grid Refinement ----- */
.grid-editorial--premium {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.editorial__header {
    max-width: 800px;
    margin-bottom: 0;
}

.editorial__content {
    width: 100%;
}

/* ----- Leaf Decorations ----- */
.leaf-decoration {
    position: absolute;
    color: var(--sage);
    opacity: 0.08;
    z-index: 0;
    pointer-events: none;
    line-height: 1;
}

.leaf--top-right {
    top: -5%;
    right: -5%;
    font-size: 18rem;
    transform: rotate(15deg);
}

.leaf--bottom-left {
    bottom: -10%;
    left: -8%;
    font-size: 22rem;
    transform: rotate(-45deg);
}

/* ----- Wide Stacked Cards ----- */
.intro__cards--stacked {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    width: 100%;
}

.intro__card--wide {
    display: grid;
    grid-template-columns: 1fr;
    padding: var(--space-sm);
    overflow: hidden;
    background: var(--white);
    border-radius: var(--radius-card-outer);
    border: 1px solid rgba(45, 64, 52, 0.08);
    box-shadow: var(--shadow-medium);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.intro__card--wide:hover {
    transform: none;
    box-shadow: var(--shadow-medium);
}

.intro__card--wide .card-image-wrapper {
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.intro__card--wide .card-content {
    padding: var(--space-md);
}

@media (min-width: 900px) {
    .intro__card--wide {
        grid-template-columns: 1fr 1fr;
        min-height: 450px;
    }

    .intro__card--wide.intro__card--reverse {
        grid-template-columns: 1fr 1fr;
    }

    .intro__card--wide .card-image-wrapper {
        height: 100%;
        margin-bottom: 0;
        border-radius: var(--radius-lg);
        overflow: hidden;
        order: 2;
    }

    .intro__card--wide .card-content {
        padding: clamp(2rem, 5vw, 4rem);
        display: flex;
        flex-direction: column;
        justify-content: center;
        order: 1;
    }
}

.intro__card--wide h3 {
    margin-bottom: var(--space-sm);
    line-height: 1.2;
}

.intro__card--wide p {
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: var(--space-md);
    color: var(--slate);
}

.card-image-wrapper {
    width: 100%;
    height: 300px;
    overflow: hidden;
    position: relative;
    background: var(--cream);
}

.card-image-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.2s var(--transition-soft);
}

.intro__card--wide:hover .card-image-wrapper img {
    transform: none;
}

.intro__card--wide .card-image-wrapper img {
    border-radius: 0;
    /* border-radius handled by wrapper overflow:hidden */
}

/* ----- Specific visual refinements ----- */
.decoration-line {
    width: 80px;
    height: 1px;
    background: var(--action);
    margin: var(--space-md) 0;
}

.hover-lift {
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.hover-lift:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow-medium);
}

/* Chatbot Input Area */
.chatbot__input-area {
    padding: var(--space-sm) var(--space-md);
    background: var(--paper);
    border-top: 1px solid rgba(107, 123, 104, 0.1);
    display: flex;
    gap: var(--space-xs);
    align-items: center;
}

.chatbot__input {
    flex: 1;
    padding: 0.75rem 1rem;
    border: 1px solid rgba(107, 123, 104, 0.2);
    border-radius: var(--radius-full);
    font-family: var(--font-body);
    font-size: 0.9rem;
    color: var(--charcoal);
    background: rgba(107, 123, 104, 0.05);
    transition: all var(--transition-fast);
}

.chatbot__input:focus {
    outline: none;
    border-color: var(--deep-forest);
    background: var(--white);
    box-shadow: 0 0 0 3px rgba(107, 123, 104, 0.1);
}

.chatbot__send-btn {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--deep-forest);
    color: var(--paper);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.1rem;
    transition: all var(--transition-fast);
}

.chatbot__send-btn:hover {
    background: var(--sage);
    transform: scale(1.05);
}


/* Ensure grid items (wrappers) stretch to full height so inner cards can fill them */
.grid-editorial>div {
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* ----- Services/Workshops ----- */
.dienst-card {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* ----- Profile Cards (Han & Hanny) ----- */
.profile-card {
    background: var(--white);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: 1fr 40%;
    margin-bottom: var(--space-md);
    transition: var(--transition-normal);
    min-height: 200px;
    max-width: 800px;
    margin-inline: auto;
    position: relative;
    margin-top: 60px;
}

.team-profiles--grid .profile-card {
    max-width: 100%;
    /* Be flexible when side-by-side */
}


.profile-card__content {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.profile-card__content h3 {
    margin-bottom: 0.5rem;
    color: var(--deep-forest);
    text-align: left;
}

.profile-card__role {
    color: var(--sage);
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.3;
    margin-bottom: var(--space-sm);
}

.profile-card__text {
    font-size: 0.95rem;
    color: var(--charcoal);
    line-height: 1.5;
    margin-bottom: 8px;
}

.profile-card__image {
    position: relative;
    height: 100%;
}

.profile-card__image img {
    width: 100%;
    height: 135%;
    /* Increased height slightly for better overflow */
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 2;
    pointer-events: none;
    object-fit: contain;
    object-position: bottom right;
    border-bottom-right-radius: var(--radius-3xl);
    /* Match card corner */
}

.team-profiles--vertical {
    display: flex;
    flex-direction: column;
    gap: 60px;
    max-width: var(--container-max);
    margin: var(--space-lg) 0 0;
}

.team-profiles--vertical .profile-card {
    max-width: 1100px;
    gap: var(--space-lg);
    grid-template-columns: 1fr 400px;
    margin-inline: 0;
}

.team-profiles--vertical .profile-card__role,
.team-profiles--vertical .profile-card__text {
    font-size: 1.125rem;
    line-height: 1.7;
}

.team-profiles--grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    max-width: var(--container-max);
    margin: 0 auto;
    align-items: stretch;
}

/* Specific adjustment for Hanny's card (2nd child) */
.team-profiles--grid .profile-card:nth-child(2) {
    grid-template-columns: 1fr 45%;
}

.team-profiles--grid .profile-card:nth-child(2) .profile-card__content {
    padding-right: 20px;
}

@media (max-width: 768px) {
    .profile-card {
        grid-template-columns: 1fr;
        min-height: auto;
        margin-top: 100px;
        max-width: 100%;
    }

    .profile-card__image {
        height: 220px;
        order: -1;
    }

    .profile-card__image img {
        width: 220px;
        left: 50%;
        transform: translateX(-50%);
        top: auto;
        bottom: 0;
        border-bottom-right-radius: 0;
    }

    .profile-card__content {
        padding: var(--space-md) var(--space-md) 0;
        text-align: center;
    }

    .profile-card__content .profile-card__role {
        margin-bottom: var(--space-sm);
    }

    .profile-card__content h3 {
        text-align: center;
    }

    .profile-card {
        margin-bottom: var(--space-sm);
    }

    .team-profiles--vertical {
        gap: var(--space-sm);
    }

    .team-profiles--grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* HAN BAETEN (First Card) - Reset to default centered layout */
    /* Removed specific left-align rules to match Hanny's centered layout */

    /* HANNY KOOIJ (Second Card) - Keep centered/default or adjust as needed */
    /* The user mentioned Hanny is already "right" (which implies text right, or image left?) 
       But looking at the screenshot/description, Hanny's text is "nice right" (meaning aligned right? or just good?)
       The user wants Han's text to be LEFT of the image. 
       Currently mobile layout stacks them. 
       
       If the user means "Han's text LEFT of his image" on mobile, it implies a side-by-side layout on mobile OR 
       just text alignment. 
       
       Let's look at the user request:
       "bij Han de text links van Han kunnen plaatsen" -> Place text left of Han.
       "net zoals de text bij Hanny rechts van Hanny staat" -> Just like text at Hanny stands right of Hanny.
       
       This suggests a horizontal layout on mobile is desired, or at least relative positioning.
       
       Current CSS for mobile:
        .profile-card {
            grid-template-columns: 1fr; ...
        }
        .profile-card__image {
            order: -1; ...
        }
       
       The user audio says: "buttons ... aligned ... and then on the same page ... mobile version ... Han on the right aligned ... Hanny on the left... text right of Hanny ... text left of Han."
       
       Wait, the user says:
       "Han aan de rechterkant uitgelijnd" (Han aligned to right side - image?)
       "Hanny aan de linkerkant" (Hanny to left side - image?)
       "Bij Hanny mooi de tekst rechts ervan" (At Hanny text nicely right of it)
       "Bij Han staat het eronder" (At Han it stands underneath)
       "Zou je bij Han de tekst links van Han kunnen plaatsen?" (Could you place text left of Han at Han?)
       
       So on mobile:
       Han: Text [LEFT] | Image [RIGHT]
       Hanny: Image [LEFT] | Text [RIGHT]
       
       Currently mobile stacks them (image on top).
       
       I need to change mobile layout to grid/flex side-by-side for these cards.
    */

    /* Redefine Mobile Layout to Side-by-Side */
    .profile-card {
        display: flex;
        flex-direction: column;
        /* Force vertical stack */
        align-items: center;
        margin-top: var(--space-lg);
        gap: var(--space-md);
        min-height: auto;
        width: 100%;
    }

    /* HAN BAETEN & HANNY KOOIJ - Mobile Layout: Stacked in HTML */
    .profile-card__image.desktop-only {
        display: none !important;
    }

    .profile-card__image-mobile-wrapper {
        display: block;
        width: 70%;
        /* Further reduced from 85% per user request ("net even een tikkie kleiner") */
        margin: var(--space-md) auto 0;
        /* Remove bottom margin to stick to bottom */
        position: relative;
        text-align: center;
        /* Ensure contents center */
    }

    .profile-card__image-mobile {
        width: 100%;
        max-width: 100%;
        /* Prevent overflow */
        height: auto;
        /* aspect-ratio: 16/9; Remove forced aspect ratio, use natural or specific height if needed */
        object-fit: cover;
        border-radius: var(--radius-md);
        display: block;
        margin: 0 auto;
        /* CENTER IMAGE ITSELF */
    }

    /* 1. NAME (h3) & ROLE */
    .team-profiles--grid .profile-card:first-child .profile-card__content h3,
    .team-profiles--grid .profile-card:nth-child(2) .profile-card__content h3,
    .team-profiles--grid .profile-card:first-child .profile-card__role,
    .team-profiles--grid .profile-card:nth-child(2) .profile-card__role {
        width: 100%;
        text-align: center;
        /* CENTER TEXT */
        margin-bottom: var(--space-sm);
        /* Doubled from space-xs */
        padding: 0;
        /* Remove padding to use full width */
    }

    /* 3. DESCRIPTION (p) */
    .team-profiles--grid .profile-card:first-child .profile-card__content p,
    .team-profiles--grid .profile-card:nth-child(2) .profile-card__content p {
        width: 100%;
        text-align: center;
        /* CENTER TEXT or Left if preferred, user said "alles in het midden uitgelijnd" */
        padding: 0;
    }

    /* Reset previous grid hacks */
    .team-profiles--grid .profile-card:first-child,
    .team-profiles--grid .profile-card:nth-child(2) {
        display: block;
        /* Let normal block flow handle it now */
        padding-top: 0;
    }

    .team-profiles--grid .profile-card:first-child .profile-card__content,
    .team-profiles--grid .profile-card:nth-child(2) .profile-card__content {
        display: block;
        /* Normal block */
        padding: var(--space-md) var(--space-md) 0;
        /* Remove bottom padding to stick image to bottom */
    }
}

/* DESKTOP/TABLET DEFAULTS */
@media (min-width: 769px) {
    .profile-card__image-mobile-wrapper {
        display: none;
    }
}




/* ----- Professional Horizontal Cards ----- */

.pro-cards-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.pro-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.pro-card {
    background: var(--white);
    border-radius: var(--radius-3xl);
    box-shadow: var(--shadow-soft);
    display: grid;
    grid-template-columns: 350px 1fr;
    transition: var(--transition-normal);
    overflow: hidden;
    border: 1px solid rgba(45, 64, 52, 0.05);
    height: 100%;
}

.pro-cards-grid .pro-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.pro-cards-grid .pro-card .pro-card__image {
    height: 250px;
    width: 100%;
}

.pro-cards-grid .pro-card .pro-card__content {
    flex: 1;
    padding: var(--space-md);
}



.pro-card__image {
    position: relative;
    height: 100%;
}

.pro-card__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.pro-card__content {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.pro-card__content h3 {
    margin-bottom: 0.5rem;
    text-align: left;
}

.pro-card__content p {
    font-size: 1.05rem;
    color: var(--slate);
    margin-bottom: var(--space-md);
    text-align: left;
    max-width: 600px;
}

.pro-card__meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 0.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.95rem;
}

.pro-card__meta-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--charcoal);
}

.pro-card__meta-item iconify-icon {
    color: var(--sage);
    font-size: 1.25rem;
}

.pro-card__actions {
    margin-top: auto;
    display: flex;
    gap: 1rem;
}

.pro-card--download {
    background: var(--deep-forest);
    color: var(--paper);
    border-color: rgba(255, 255, 255, 0.1);
}

.pro-card--download h3,
.pro-card--download .pro-card__meta-item {
    color: var(--paper);
}

.pro-card--download p {
    color: rgba(255, 255, 255, 0.8);
}

.pro-card--download .pro-card__image {
    background: rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pro-card--download .pro-card__image iconify-icon {
    font-size: 5rem;
    color: var(--sage);
}

@media (max-width: 992px) {
    .pro-cards-grid {
        grid-template-columns: 1fr;
    }

    .pro-card {
        grid-template-columns: 300px 1fr;
    }
}

@media (max-width: 768px) {
    .pro-card {
        grid-template-columns: 1fr;
    }

    .pro-card__image {
        height: 250px;
    }

    .pro-card__content {
        padding: var(--space-md);
    }

    .pro-card__meta {
        grid-template-columns: 1fr;
        gap: 0.5rem;
    }
}

/* Audio Player */
.audio-control {
    position: absolute;
    bottom: 3.1rem;
    left: 2rem;
    z-index: 999;
    pointer-events: auto;
}

/* Audio control positioned in header */
.audio-control--header {
    position: static;
    display: flex;
    align-items: center;
    margin-left: var(--space-sm);
}

.audio-control--header .audio-btn {
    width: 36px;
    height: 36px;
    font-size: 18px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: none;
    backdrop-filter: none;
}

.header.scrolled .audio-control--header .audio-btn {
    border-color: rgba(26, 46, 34, 0.2);
    color: var(--deep-forest);
}

.header.scrolled .audio-control--header .audio-btn.playing {
    background: var(--action);
    border-color: var(--action);
}

.audio-btn {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-full);
    background: rgba(26, 46, 34, 0.8);
    color: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(5px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    position: relative;
    /* Relative to .audio-control if needed */
}

@media (hover: hover) {
    .audio-btn:hover {
        background: var(--sage);
        transform: scale(1.1) rotate(5deg);
    }
}

.audio-btn.playing {
    background: var(--action);
    color: var(--deep-forest);
    box-shadow: 0 0 20px rgba(197, 217, 184, 0.4);
    animation: pulse-audio 2s infinite;
}

@keyframes pulse-audio {
    0% {
        box-shadow: 0 0 0 0 rgba(197, 217, 184, 0.4);
    }

    70% {
        box-shadow: 0 0 0 10px rgba(197, 217, 184, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(197, 217, 184, 0);
    }
}

/* Audio Button Visibility */
.audio-btn-desktop {
    display: flex;
}

.audio-btn-mobile {
    display: none;
}

@media (max-width: 768px) {

    /* Hide Hero Audio Control on Mobile, but allow Header one */
    .audio-control:not(.audio-control--header) {
        display: none !important;
    }

    .audio-control--header {
        display: flex !important;
        align-items: center;
        margin-left: auto;
        margin-right: 1rem;
        z-index: 1001;
        position: relative;
        bottom: auto;
        left: auto;
    }

    body.nav-open .audio-control--header .audio-btn {
        color: var(--charcoal);
        border-color: rgba(26, 46, 34, 0.2);
    }

    /* Show Mobile Audio Button Inline */
    .audio-btn-mobile {
        display: inline-flex;
        width: 48px;
        height: 48px;
        font-size: 24px;
        vertical-align: middle;
        margin-left: 0.5rem;
        position: relative;
        top: -2px;
        background: rgba(26, 46, 34, 0.8);
        /* Dark Forest Green transparent */
        color: var(--paper);
        /* White icon */
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: var(--radius-full);
        backdrop-filter: blur(5px);
        transition: all 0.3s ease;
    }

    .audio-btn-mobile:hover {
        background: var(--sage);
        color: var(--paper);
    }

    .audio-btn-mobile.playing {
        background: var(--action);
        color: var(--deep-forest);
        animation: pulse-audio 2s infinite;
        box-shadow: 0 0 20px rgba(197, 217, 184, 0.4);
    }

    /* Chatbot Visibility on Scroll (Global) */
    .chatbot {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(20px);
        transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease;
    }

    .chatbot.visible {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateY(0);
    }
}

.audio-btn.loading {
    animation: spin-audio 1s linear infinite;
    opacity: 0.7;
    pointer-events: none;
    cursor: wait;
}

@keyframes spin-audio {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* ----- Accessibility & UX Enhancements ----- */

/* Keyboard Focus Styles */
:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 4px;
}

/* Hover Effects for Interactive Elements */
a,
button,
.btn,
.card {
    transition: all 0.2s ease;
}

.btn:hover,
.btn:focus-visible {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(45, 74, 62, 0.15);
}

/* Only apply hover to interactive cards with buttons (hover-lift class) */
.intro__card.hover-lift:hover {
    transform: var(--card-hover-transform) !important;
    box-shadow: var(--card-hover-shadow) !important;
}

/* ----- Article Styles ----- */
.article-content h3 {
    margin-top: var(--space-md);
    margin-bottom: var(--space-sm);
    color: var(--deep-forest);
    font-weight: 600;
}



.icon-list {
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin: var(--space-xs) 0 var(--space-sm);
}

.icon-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-xs);
    line-height: 1.6;
}

.icon-list iconify-icon {
    flex-shrink: 0;
    font-size: 1.25rem;
    color: var(--action);
    transform: translateY(2px);
}

.step-list {
    list-style: decimal;
    padding-left: var(--space-md);
    margin-top: var(--space-xs);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.step-list li::marker {
    color: var(--sage);
    font-weight: 600;
}

/* Back to Top Button */
.back-to-top {
    position: fixed !important;
    /* TOP BUTTON: space-md + chatbot (54) + gap (12) + whatsapp (54) + gap (12) = 132px */
    bottom: calc(var(--space-md) + 132px) !important;
    right: var(--space-md) !important;
    left: unset !important;
    margin-left: auto !important;
    background: var(--sage);
    color: var(--white);
    width: 54px;
    height: 54px;
    border-radius: var(--radius-full);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    box-shadow: var(--shadow-medium);
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    transition-delay: 0.1s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    z-index: 990;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--deep-forest);
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .back-to-top {
        position: fixed !important;
        /* Mobile: space-sm + chatbot (54+12) + whatsapp (54+12) = 132px */
        bottom: calc(var(--space-sm) + 132px) !important;
        right: var(--space-sm) !important;
        left: unset !important;
        margin-left: auto !important;
        width: 54px;
        height: 54px;
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    .cta-banner .btn {
        width: 100%;
        max-width: 400px;
        /* Match sticky CTA max-width */
        display: flex;
        margin: 0 auto;
    }

    .cta-banner h2 {
        padding: 0 var(--space-md);
    }
}

.sticky-cta {
    display: none !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(253, 253, 251, 0.85);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 12px var(--space-md);
    box-shadow: 0 -4px 20px rgba(26, 46, 34, 0.1);
    z-index: 999;
    border-top: 1px solid rgba(26, 46, 34, 0.05);
}



.sticky-cta.hidden {
    transform: translateY(100%);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.sticky-cta__inner {
    max-width: var(--container-max);
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.sticky-cta .btn {
    width: 100%;
    max-width: 400px;
    padding: 1rem 2rem;
    font-size: 1rem;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 15px rgba(26, 46, 34, 0.2);
}

/* WhatsApp Floating Button (Fase 2) */
.whatsapp-float {
    position: fixed !important;
    /* MIDDLE BUTTON: space-md + chatbot (54) + gap (12) = 66px */
    bottom: calc(var(--space-md) + 66px) !important;
    right: var(--space-md) !important;
    left: unset !important;
    margin-left: auto !important;
    width: 54px;
    height: 54px;
    background-color: #25d366;
    color: #FFF;
    border-radius: var(--radius-full);
    text-align: center;
    font-size: 24px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    z-index: 995;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1), transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.4s;
    transition-delay: 0.05s;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
}

.whatsapp-float.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.whatsapp-float:hover {
    background-color: #128c7e;
    transform: scale(1.1);
    color: white;
}

@media (max-width: 768px) {
    .whatsapp-float {
        position: fixed !important;
        /* Mobile: space-sm + chatbot (54+12) = 66px */
        bottom: calc(var(--space-sm) + 66px) !important;
        right: var(--space-sm) !important;
        left: unset !important;
        margin-left: auto !important;
        width: 54px;
        height: 54px;
        font-size: 24px;
    }
}

/* Chatbot Header WhatsApp Button (Removed) */
.chatbot__whatsapp {
    display: none;
}

.chatbot__header-info-wrapper {
    display: block;
}

/* Accessibility Focus Improvements (Fase 2) */
[aria-label] {
    position: relative;
}

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

/* ========================================
   Article Detail Pages
   ======================================== */

/* Article Detail Container */
#article-detail {
    max-width: 800px;
    margin: 0 auto;
}

/* Article Content Card */
.article-content {
    background: var(--white);
    padding: var(--space-md) clamp(1.5rem, 4vw, 3rem);
    border-radius: var(--radius-card-outer);
    box-shadow: var(--shadow-soft);
    border: 1px solid rgba(45, 64, 52, 0.05);
}

/* Article Title */
.article-content h2,
#article-title {
    font-family: var(--font-heading);
    font-weight: 400;
    font-size: clamp(2rem, 5vw, 3.5rem);
    color: var(--deep-forest);
    line-height: 1.1;
    margin-bottom: var(--space-md);
    letter-spacing: 0em;
}

/* Article Sub-headings */
.article-content h3 {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.5rem;
    color: var(--deep-forest);
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    line-height: 1.3;
}

/* Article Body Text */
.article-content p,
#article-body {
    color: var(--charcoal);
    line-height: 1.8;
    font-size: 1.1rem;
}

.article-content p {
    margin-bottom: 1.25rem;
}

/* Article Links */
.article-content a:not(.btn) {
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.article-content a:not(.btn):hover {
    color: var(--deep-forest);
}

/* --- Callout Boxes (Overlay Sections) --- */
.callout {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2.25rem;
    border-radius: var(--radius-md);
    margin: 2rem 0;
    background-color: var(--paper);
    /* matching guidelines: Paper White #F9F9F7 */
    border: 1px solid rgba(45, 64, 52, 0.05);
    /* very subtle dun grijs-groen lijntje */
    box-shadow: var(--shadow-soft);
}

.callout__header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.callout__icon {
    flex-shrink: 0;
    font-size: 2rem;
    color: var(--sage);
    margin-bottom: 0;
}

.callout strong,
.callout h3 {
    color: var(--deep-forest);
    display: inline;
    margin-bottom: 0;
    margin-top: 0;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 1.5rem;
    line-height: 1.3;
}

.callout p {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
    line-height: 1.6;
    color: var(--charcoal);
}

.callout p:last-child {
    margin-bottom: 0;
}

.callout>div {
    color: var(--charcoal);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Remove extra breaks since we use margins now */
.callout div>br {
    display: none;
}

/* Callout video */
.callout video {
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-soft);
    margin-top: 0.5rem;
}

/* Responsiveness */
@media (max-width: 768px) {
    .callout {
        padding: 1.5rem;
        gap: 1rem;
    }
}

/* --- Article CTA Block --- */
.article-cta-block {
    background: linear-gradient(135deg, var(--deep-forest) 0%, rgba(26, 46, 34, 0.9) 100%);
    color: var(--paper);
    padding: 2rem 2.5rem;
    border-radius: var(--radius-xl);
    margin: 2.5rem 0;
    text-align: center;
}

.article-cta-block p {
    color: var(--paper);
    margin-bottom: 1.25rem;
    font-size: 1.1rem;
}

.article-cta-block strong {
    font-size: 1.15rem;
}

.article-cta-block .btn--primary {
    background: var(--action);
    color: var(--deep-forest);
    border-color: var(--action);
    font-weight: 600;
}

.article-cta-block .btn--primary:hover {
    background: var(--paper);
    color: var(--deep-forest);
    border-color: var(--paper);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* --- Icon Lists (Article) --- */
.icon-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.icon-list li {
    margin-bottom: 0.75rem;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    line-height: 1.6;
}

.icon-list iconify-icon {
    flex-shrink: 0;
    margin-top: 0.25rem;
    color: var(--deep-forest);
    font-size: 1.25rem;
}

/* Aligned list variant (Icon | Label + Description inline) */
.icon-list.aligned li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    line-height: 1.6;
}

.icon-list.aligned iconify-icon {
    margin-top: 0.2rem;
    transform: none;
    justify-self: unset;
    flex-shrink: 0;
}

.icon-list.aligned strong {
    color: var(--deep-forest);
    white-space: nowrap;
}

/* --- Article Info Tables --- */
.article-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 1.5rem 0;
    font-size: 1.05rem;
    line-height: 1.6;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(45, 64, 52, 0.08);
}

.article-table td {
    padding: 1rem 1.25rem;
    vertical-align: top;
    border-bottom: 1px solid rgba(45, 64, 52, 0.06);
}

.article-table tr:last-child td {
    border-bottom: none;
}

.article-table tr:nth-child(even) {
    background: rgba(197, 217, 184, 0.08);
}

.article-table td:first-child {
    width: 40px;
    text-align: center;
    color: var(--sage);
    font-size: 1.25rem;
    padding-right: 0;
}

.article-table td:nth-child(2) {
    font-weight: 600;
    color: var(--deep-forest);
    white-space: nowrap;
    padding-right: 0.75rem;
}

.article-table td:last-child {
    color: var(--charcoal);
}

@media (max-width: 600px) {
    .article-table td:nth-child(2) {
        white-space: normal;
    }
}

.text-link {
    color: var(--sage);
    text-decoration: underline;
    text-underline-offset: 4px;
    font-weight: 500;
    transition: color 0.2s ease;
}

.text-link:hover {
    color: var(--deep-forest);
}

/* --- Article Navigation Actions --- */
.article-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 2rem;
    gap: 1rem;
}

#back-btn,
#next-btn {
    transition: all 0.3s ease;
}

#back-btn:hover,
#next-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

#back-btn:hover {
    background-color: var(--action);
    border-color: var(--deep-forest);
}

#next-btn:hover {
    background-color: var(--sage);
    color: var(--paper);
}

/* --- Article Detail Responsive --- */
@media (max-width: 768px) {
    .article-content {
        padding: var(--space-sm) 1.25rem;
    }

    .article-content h2,
    #article-title {
        font-size: clamp(1.75rem, 5vw, 2.5rem);
    }

    .article-content h3 {
        font-size: 1.25rem;
        margin-top: 2rem;
    }

    .callout {
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.25rem;
    }

    .icon-list.aligned li {
        display: flex;
        align-items: flex-start;
    }

    .icon-list.aligned iconify-icon {
        margin-top: 0.2rem;
    }

    .icon-list.aligned strong {
        white-space: normal;
    }

    .article-actions {
        flex-direction: column-reverse;
        gap: 1rem;
    }

    .article-actions .btn {
        width: 100%;
        justify-content: center;
    }

    .article-cta-block {
        padding: 1.5rem 1.25rem;
    }
}

/* ----- Visie Section (Over Ons) ----- */
.section--visie {
    position: relative;
    overflow: hidden;
}

.section--visie__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.section--visie__bg img {
    display: block;
}

.section--visie__bg::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(42, 82, 58, 0.65) 0%,
            rgba(42, 82, 58, 0.45) 100%);
}

@supports (-webkit-touch-callout: none) {
    .section--visie__bg {
        background-attachment: scroll;
    }
}

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

/* ----- White CTA Banner Modifier (Over Ons) ----- */
.cta-banner--white {
    background: var(--paper) !important;
    background-image: none !important;
    color: var(--charcoal);
    padding: var(--space-md) 0;
    margin-bottom: var(--space-lg);
}

.cta-banner--white::after {
    display: none !important;
}

.cta-banner--white h2 {
    color: var(--deep-forest);
}

.cta-banner--white p {
    color: var(--charcoal);
    opacity: 1;
}


/* ========================================
   Article Layout & Long-form Content
   ======================================== */

.article-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
    margin-top: var(--space-md);
}

@media (min-width: 1024px) {
    .article-layout {
        grid-template-columns: 280px 1fr;
    }
}

/* Sidebar / Table of Contents */
.article-sidebar {
    position: sticky;
    top: calc(var(--header-height) + 2rem);
    height: fit-content;
}

.toc {
    background: var(--paper);
    padding: 1.5rem;
    border-radius: var(--radius-lg);
    border: 1px solid rgba(26, 46, 34, 0.08);
    box-shadow: var(--shadow-soft);
}

.toc__title {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 1rem;
    color: var(--sage);
    font-weight: 600;
}

.toc__list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.toc__item {
    margin-bottom: 0.75rem;
}

.toc__link {
    font-size: 0.95rem;
    color: var(--charcoal);
    transition: var(--transition-normal);
    display: block;
    line-height: 1.4;
}

.toc__link:hover {
    color: var(--sage);
    transform: translateX(4px);
}

/* Article Content Refinements */
.article-content {
    max-width: 800px;
    font-size: 1.125rem;
    line-height: 1.8;
}

.article-content h2 {
    font-size: clamp(2rem, 4vw, 2.5rem);
    margin: 3rem 0 1.5rem;
    scroll-margin-top: calc(var(--header-height) + 2rem);
}

.article-content h3 {
    font-size: 1.5rem;
    margin: 2rem 0 1rem;
    color: var(--deep-forest);
    scroll-margin-top: calc(var(--header-height) + 2rem);
}

.article-content p {
    margin-bottom: 1.5rem;
}

/* Skip link for accessibility */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--deep-forest);
    color: var(--white);
    padding: 1rem;
    z-index: 10001;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}

@media (max-width: 1023px) {
    .article-sidebar {
        position: static;
        margin-bottom: var(--space-md);
    }

    .toc {
        margin-bottom: 2rem;
    }
}

/* ========================================
   SEO Pages Shared Styles
   ======================================== */
.seo-intro-cards {
    display: flex;
    justify-content: flex-start;
    gap: var(--space-md);
}

.seo-card-list {
    margin-top: 1rem;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.seo-card-list li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seo-card-list-icon {
    color: var(--sage);
    font-size: 1.25rem;
    flex-shrink: 0;
}

.reviews--spaced {
    margin-bottom: var(--space-2xl);
    padding-bottom: var(--space-2xl);
}

@media (max-width: 768px) {
    .seo-intro-cards {
        flex-direction: column;
    }
}

/* ========================================
   Location Pages Shared Styles
   ======================================== */
.hero--align-left .hero__content {
    align-items: flex-start;
    text-align: left;
}

.hero--align-left .hero__subtitle {
    margin-left: 0;
    margin-right: auto;
}

.hero--align-left .hero__actions {
    justify-content: flex-start;
}

.location-card-link {
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.location-card-link-text {
    color: var(--sage);
    font-weight: 600;
    font-size: 0.95rem;
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    transition: var(--transition-normal);
}

.location-card-link:hover .location-card-link-text {
    color: var(--deep-forest);
    gap: 0.5rem;
}