/* Quiz page should fill the viewport and prevent scrolling during the test */
html,
body {
    height: 100%;
}

body.quiz-page {
    overflow-y: auto;
    overflow-x: hidden;
}

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

.material-symbols-rounded {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
    font-display: block;
    text-decoration: none !important;
    display: inline-block;
    vertical-align: middle;
}

/* VARIABLES: design tokens (colors, fonts, transitions) */
:root {
    --color-soft-cream: #F6E6C8;
    --color-dark-emerald: #0B5F58;
    --color-deep-navy: #0E1A2B;
    --color-light-blue: #CFE4EA;
    --background: var(--color-soft-cream);
    --foreground: var(--color-deep-navy);
    --font-sans: 'Montserrat', sans-serif;
    --transition-speed: 0.5s;

    /* Typography sizes (standardized) */
    --font-size-heading: 2.25rem;
    /* main H1 */
    --font-size-subheading: 1.25rem;
    /* H2/H3 */
    --font-size-lead: 1.125rem;
    /* intro text */
    --font-size-body: 1rem;
    /* base body text */
    --font-size-small: 0.875rem;
    /* captions, hints */

    /* Global layout tokens for consistent gutters and section spacing */
    --page-gutter: 1.5rem;
    /* horizontal side padding (mobile default) */
    --section-vertical: 6rem;
    /* vertical padding for sections (mobile default) */
    --navbar-padding-x: 1rem;
    /* internal horizontal padding for the navbar pill */
    --content-max-width: 56rem;
    /* Standardized box padding for card-like components */
    --box-padding: 2.5rem;
    --box-padding-lg: 2.5rem;
    /* aligns with .max-w-4xl used in body */
}

.dark {
    --background: var(--color-dark-emerald);
    --foreground: var(--color-soft-cream);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    -webkit-tap-highlight-color: transparent;
    box-shadow: none !important;
}

/* BASE: body styles, layout and default typography */
body {
    background-color: var(--background);
    color: var(--foreground);
    font-family: var(--font-sans);
    font-weight: 400;
    line-height: 1.5;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

main {
    flex-grow: 1;
    padding-top: 1rem; /* Significantly reduced top padding for mobile */
}

@media (min-width: 768px) {
    main {
        padding-top: 8rem; 
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

/* Standardized typography sizes */
body {
    font-size: var(--font-size-body);
}

h1 {
    font-size: var(--font-size-heading);
    line-height: 1.05;
}

h2 {
    font-size: var(--font-size-subheading);
    line-height: 1.15;
}

h3 {
    font-size: var(--font-size-subheading);
}

/* Utility classes for consistent sizing */
.text-heading {
    font-size: var(--font-size-heading) !important;
    line-height: 1.1 !important;
    letter-spacing: -0.02em !important;
    font-weight: 600 !important;
}

.text-subheading {
    font-size: var(--font-size-subheading) !important;
    line-height: 1.3 !important;
    letter-spacing: -0.01em !important;
    font-weight: 600 !important;
}

.text-body {
    font-size: var(--font-size-body) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

.text-small {
    font-size: var(--font-size-small) !important;
    line-height: 1.5 !important;
    font-weight: 400 !important;
}

/* Responsive scaling for the core types */
@media (min-width: 768px) {
    .text-heading {
        font-size: 3.5rem !important;
    }

    .text-subheading {
        font-size: 1.75rem !important;
    }

    .text-lead {
        font-size: 1.35rem !important;
    }
}

/* Backwards-compatibility: map legacy utility classes to the standardized tokens */
.text-6xl,
.text-5xl,
.text-4xl {
    font-size: var(--font-size-heading);
}

.text-3xl,
.text-2xl {
    font-size: var(--font-size-subheading);
}

.text-xl,
.text-lg {
    font-size: var(--font-size-body);
}

@media (min-width: 768px) {

    .md-text-8xl,
    .md-text-7xl,
    .md-text-6xl,
    .md-text-5xl,
    .md-text-4xl {
        font-size: 3.5rem;
    }

    .md-text-3xl,
    .md-text-2xl,
    .md-text-xl {
        font-size: 1.75rem;
    }
}

/* Color utility classes */
.text-dark-emerald {
    color: var(--color-dark-emerald) !important;
}

.text-soft-cream {
    color: var(--color-soft-cream) !important;
}

.text-deep-navy {
    color: var(--color-deep-navy) !important;
}

.text-light-blue {
    color: var(--color-light-blue) !important;
}

/* Font weight utilities */
.font-semibold {
    font-weight: 600 !important;
}

.font-medium {
    font-weight: 500 !important;
}

.font-normal {
    font-weight: 400 !important;
}

/* Text lead - intro paragraphs */
.text-lead {
    font-size: var(--font-size-lead) !important;
    line-height: 1.6 !important;
    font-weight: 400 !important;
}

/* Icon size utilities - standardized */
.icon-sm {
    font-size: 1.25rem !important;
}

.icon-md {
    font-size: 1.5rem !important;
}

.icon-lg {
    font-size: 2rem !important;
}

.icon-xl {
    font-size: 2.5rem !important;
}

.icon-hero {
    font-size: 6rem !important;
}

/* Heading icon - consistent size for page titles */
.heading-icon {
    font-size: 2rem !important;
    color: var(--color-dark-emerald);
}

@media (min-width: 768px) {
    .heading-icon {
        font-size: 2.5rem !important;
    }

    .icon-xl {
        font-size: 3rem !important;
    }
}

a {
    text-decoration: none;
    color: inherit;
    transition: all 0.3s ease;
}

/* LAYOUT: section spacing and layout */
.section {
    padding: var(--section-vertical) var(--page-gutter);
    min-height: 60vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (min-width: 768px) {

    /* increase global gutter and vertical spacing on larger screens */
    :root {
        --page-gutter: 4rem;
        --section-vertical: 8rem;
        --navbar-padding-x: 1.25rem;
    }
}

@media (min-width: 1024px) {

    /* on very wide screens, give a bit more horizontal breathing room */
    :root {
        --page-gutter: 6rem;
        --section-vertical: 8rem;
        --navbar-padding-x: 1.5rem;
    }
}

.section-container {
    max-width: 72rem;
    margin: 0 auto;
    width: 100%;
}

.max-w-4xl {
    max-width: 56rem;
}

.max-w-5xl {
    max-width: 64rem;
}

.max-w-2xl {
    max-width: 42rem;
}

.max-w-3xl {
    max-width: 48rem;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.section-beige {
    background-color: var(--color-soft-cream);
    color: var(--color-deep-navy);
}

.section-green {
    background-color: var(--color-dark-emerald);
    color: var(--color-soft-cream);
    min-height: auto;
    padding-top: 1.75rem;
    /* reduced vertical padding */
    padding-bottom: 1.75rem;
}

/* Allow making the whole green section full-bleed when needed (adds full-viewport width breakout) */
.section-green.full-bleed {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 0;
    padding-right: 0;
}

@media (min-width: 768px) {

    /* A bit more vertical spacing on larger screens */
    .section-green {
        padding-top: 3rem;
        /* slightly larger on tablet/desktop */
        padding-bottom: 3rem;
    }

    /* Reduce horizontal gap between text and flag specifically for the green intro */
    .section-green .section-container {
        gap: 0.5rem;
        /* tightened to bring the flag much closer to the text */
    }
}

.accent {
    color: inherit;
}

.section-beige .accent {
    color: var(--color-dark-emerald);
}

.section-green .accent {
    color: var(--color-light-blue);
}

.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1.125rem 2.25rem;
    border-radius: 9999px;
    font-weight: 600;
    font-size: var(--font-size-subheading);
    transition: all 0.3s ease;
    gap: 0.75rem;
    /* Prevent the label from breaking onto two lines */
    white-space: nowrap;
    /* Ensure a sensible minimum width so short labels don't collapse */
    min-width: 8.5rem;
}

.button-primary {
    background-color: var(--color-dark-emerald);
    color: var(--color-soft-cream);
}

.section-green .button-primary {
    background-color: var(--color-soft-cream);
    color: var(--color-dark-emerald);
}

.button-primary:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

/* Beige button for dark backgrounds */
.button-greenback {
    background-color: var(--color-soft-cream);
    color: var(--color-dark-emerald);
}

.button-greenback:hover {
    opacity: 0.9;
    transform: translateY(-1px);
}

.button-small {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    border-radius: 9999px;
}

/* Prevent button overflow on very small screens - keep labels on one line */
@media (max-width: 420px) {
    .button {
        padding: 0.7rem 1rem;
        font-size: var(--font-size-body);
        min-width: 6.5rem;
    }
}

/* Add spacing around buttons inside cards (e.g., Aanbod page) */
.card .button {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
}

/* Utility: outline button variant for secondary actions */
.button-outline {
    border: 2px solid var(--color-dark-emerald);
    color: var(--color-dark-emerald);
    background: transparent;
}

.section-green .button-outline {
    border-color: var(--color-soft-cream);
    color: var(--color-soft-cream);
}

/* Beige outline button variant for dark backgrounds */
.button-outline.button-beige {
    background-color: var(--color-soft-cream);
    color: var(--color-dark-emerald);
    border-color: var(--color-dark-emerald);
}

.button-outline:hover {
    opacity: 0.95;
    transform: translateY(-1px);
}

/* Icon utilities */
.icon-card {
    font-size: 2.5rem;
    color: var(--color-dark-emerald);
    display: block;
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .icon-card {
        font-size: 3rem;
    }
}

/* Button icons: size and alignment consistency */
.button .material-symbols-rounded {
    font-size: 1.25rem;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
}

/* Ensure material icons are vertically centered when used inline inside cards */
.card .material-symbols-rounded {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    vertical-align: middle;
}

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

.section-beige .inline-icon {
    color: var(--color-dark-emerald);
}

/* Accent and pricing helpers */
.text-accent {
    color: var(--color-light-blue);
}

.price-amount {
    color: var(--color-soft-cream);
    font-weight: 600;
}

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

/* Small helpers */
.text-center {
    text-align: center;
}

/* Simple grid helpers used throughout HTML */
.grid {
    display: grid;
    /* ensure items stretch to equal heights so cards line up neatly */
    align-items: stretch;
}

.gap-8 {
    gap: 2rem;
}

.gap-10 {
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .md-grid-cols-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .md-grid-cols-3 {
        grid-template-columns: repeat(3, 1fr);
    }

    /* Utility: allow grid items to span both columns on medium+ screens */
    .md-col-span-2 {
        grid-column: 1 / -1;
    }

    /* Responsive flex utilities */
    .md-flex {
        display: flex;
    }

    .md-flex-row {
        flex-direction: row;
    }

    .md-items-start {
        align-items: flex-start;
    }

    .md-items-center {
        align-items: center;
    }

    .md-text-left {
        text-align: left;
    }

    .md-w-1-3 {
        width: 33.333%;
    }

    .md-gap-12 {
        gap: 3rem;
    }

    .md-p-12 {
        padding: 3rem;
    }
}

/* Hide on mobile, show on md+ */
.hidden {
    display: none;
}

@media (min-width: 768px) {
    .hidden.md-flex {
        display: flex;
    }

    .hidden.md-block {
        display: block;
    }
}

.inline-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    transition: all 0.3s ease;
}

.inline-link span:not(.material-symbols-rounded) {
    text-decoration: underline;
    text-underline-offset: 6px;
    text-decoration-thickness: 1.5px;
}

.inline-link:hover {
    opacity: 0.7;
}

/* CONTACT: spacing for quick contact buttons */
.contact-links {
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem 4rem;
    /* vertical gap then horizontal gap */
    align-items: center;
}

.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 cols on mobile */
    gap: 0.75rem;
    width: 100%;
}

@media (max-width: 767px) {
    .contact-grid .contact-card,
    .contact-grid .card-base {
        padding: 1rem !important;
        min-height: 0 !important; /* Remove huge min-height */
        gap: 1rem;
    }
    
    .contact-grid h3 {
        font-size: 1rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .contact-grid p {
        font-size: 0.8rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .contact-grid svg, .contact-grid .material-symbols-rounded {
        width: 2rem !important;
        height: 2rem !important;
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }
    
    .contact-grid .button {
        width: 100%;
        padding: 0.5rem !important;
        font-size: 0.85rem !important;
    }
}

@media (min-width: 768px) {
    .contact-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem; /* Restore gap */
    }
}

.contact-card {
    /* contact card (keeps its layout but visually matches other components) */
    background-color: rgba(11, 95, 88, 0.04);
    padding: var(--box-padding);
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 200px;
    gap: 3rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid rgba(11, 95, 88, 0.06);
    text-decoration: none !important;
}

.contact-card:hover {
    box-shadow: 0 8px 20px rgba(14, 26, 43, 0.06);
}

/* COMPONENTS: shared base for card-like components */
.component,
.card,
.contact-card,
.price-card,
.quiz-step-card,
.quiz-results-card,
.card-outline,
.card-filled {
    padding: var(--box-padding) !important;
    border-radius: 2rem !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    border: 1px solid rgba(11, 95, 88, 0.08) !important;
    background-color: rgba(11, 95, 88, 0.04);
    /* No important here to allow overrides */
    display: flex;
    flex-direction: column;
    width: 100%;
}

/* Slightly stronger hover for card-like components */
.card:hover,
.contact-card:hover,
.price-card:hover,
.card-outline:hover,
.card-filled:hover {
    box-shadow: 0 8px 20px rgba(14, 26, 43, 0.06);
}

.card-scale:hover {
    transform: scale(1.05);
}

/* Design-system layout utilities */
.container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    width: 100%;
}

.grid-2 {
    display: grid;
    gap: 0.75rem; /* Tight gap for mobile */
    grid-template-columns: repeat(2, 1fr); /* 2 cols on mobile */
    align-items: stretch;
}

.grid-3 {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr; /* Keep 3-grid as 1 col on mobile? Or 2? Let's stick to user request "most boxes next to each other" but usually 3-grid content is denser. Let's keep 3-grid stacked for now as it might be too small, or make it 2-col? Let's keep 1 col for grid-3 unless requested */
}

@media (min-width: 768px) {
    .grid-2 {
        gap: 2rem;
        grid-template-columns: repeat(2, 1fr);
    }
    
    .grid-3 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* Mobile optimizations for cards in the dense 2-column grid */
@media (max-width: 767px) {
    .grid-2 .card, .grid-2 .card-base {
        padding: 1rem !important;
    }
    
    .grid-2 h3, .grid-2 .text-subheading {
        font-size: 1rem !important;
        margin-bottom: 0.5rem !important; 
        hyphens: auto;
    }
    
    .grid-2 p, .grid-2 .text-body {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
    }
    
    .grid-2 .material-symbols-rounded, .grid-2 svg, .grid-2 .accent {
        font-size: 2rem !important; /* Smaller icons */
        margin-bottom: 0.5rem !important;
    }
    
    .grid-2 .button {
        padding: 0.6rem 0.5rem !important;
        width: 100%;
        font-size: 0.85rem !important;
    }
}

/* --- Accordion / Expandable Cards --- */
.accordion-item {
    cursor: pointer;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Groepslessen Specific Layout Fixes */

/* 1. Header Text Stretching (Title and Subtitle horizontal) */
/* Target the text container (2nd child of the flex container inside header) */
.accordion-header > div > div:nth-child(2) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: baseline !important;
    gap: 0.5rem !important;
}

/* Groepslessen Specific Layout Fixes (Laptop & Mobile) */
/* User Requirement: Text must be long/wide, overlap/run-over the Lees Meer box. */
/* Updated Requirement: Button is primary and smaller. Extra text (subtitle) UNDER title. */

/* 1. Reset Header Layout for Overlap */
.accordion-header {
    display: block !important; /* Allow absolute positioning within relative container */
    position: relative !important;
    width: 100%;
    min-height: 4rem; /* Ensure height for button overlap */
}

.accordion-header > div {
    display: block !important;
    width: 100%;
}

/* 2. Text Container - Full Width Flow */
/* Target the div containing H2 and P */
.accordion-header > div > div:nth-child(2) {
    display: block !important; /* Back to block to STACK title and subtitle */
    width: 100% !important;
    padding-right: 0; /* Let it run behind/under button if needed */
}

.accordion-header h2 {
    display: block !important; /* Stack */
    margin-right: 0 !important;
    margin-bottom: 0.25rem !important; /* Space between title and subtitle */
}

.accordion-header p.opacity-60 {
    display: block !important; /* Stack */
    margin-bottom: 0 !important;
}

/* 3. Button - Positioned to intersect/overlap */
/* Now targeting .button-primary inside header as requested */
.accordion-header .button-primary {
    position: absolute !important;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    /* Remove previous outline styles if they conflict, primary has its own */
    background-color: var(--color-dark-emerald) !important; 
    color: var(--color-soft-cream) !important;
    z-index: 10;
    display: inline-flex !important;
    align-items: center !important; 
    gap: 0.5rem !important;
    /* User said "smaller" */
    padding: 0.5rem 1rem !important;
    font-size: 0.9rem !important;
    border: none !important; /* No outline for primary unless requested, user asked for outline previously on secondary? 
                              "De lees meer box moet ook een outline hebben." 
                              Wait, usually primary is filled. 
                              The user said: "boxes have the primary button ... and smaller. ... De lees meer box moet ook een outline hebben."
                              So Primary Button + Outline? 
                              Or just "outline" implies border. Primary implies filled. 
                              Let's give it a border too just in case or use button-outline style but with primary colors?
                              I will stick to standard Primary (Filled) but maybe add a white border if it overlaps text? 
                              Or maybe the user means "Outline Style" but "Primary Color"?
                              Let's assume Filled Primary Button based on class name, and maybe add a border if explicitly asked "outline" again.
                              Actually, let's add a border to the primary button to satisfy "outline".
                           */
    border: 1px solid var(--color-soft-cream) !important; /* Visible against dark bg, or dark against light? */
    /* Wait, the background is beige/dark. On beige, primary is dark green. Border should be... dark green? or white? */
    border: 2px solid rgba(255,255,255,0.2) !important; /* Subtle outline */
}

/* On mobile, careful with overlap if text is long */
@media (max-width: 767px) {
    .accordion-header .button-primary {
        /* If text is really long, we might need to push it down or let it wrap? 
           User said "text ... run over the lees meer box" (overheenlopen). 
           So text BEHIND button.
        */
        right: 0; 
        padding: 0.4rem 0.8rem !important;
        font-size: 0.8rem !important;
    }
}

/* 4. Icon Alignment in Lists (Wat kan je verwachten / Praktisch) */
.accordion-content ul li {
    align-items: flex-start !important;
}

.accordion-content ul li .material-symbols-rounded {
    margin-top: -2px; 
    min-width: 1.5rem; /* Ensure icon doesn't shrink */
}


.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease, padding 0.3s ease;
    opacity: 0;
}

.accordion-item.active {
    cursor: default;
}

.accordion-item.active .accordion-content {
    max-height: 2000px; /* Large enough for content */
    opacity: 1;
    padding-top: 2rem;
}

.accordion-arrow {
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    user-select: none;
}

.accordion-item.active .accordion-arrow {
    transform: rotate(180deg);
}

/* Hover effect on header when closed */
.accordion-item:not(.active):hover {
    background-color: rgba(11, 95, 88, 0.08);
}

.section-green .accordion-item:not(.active):hover {
    background-color: rgba(246, 230, 200, 0.12);
}

/* Design-system card variants */
.card-base {
    padding: var(--box-padding);
    border-radius: 2rem;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    width: 100%;
    border: 1px solid rgba(11, 95, 88, 0.08);
    background-color: rgba(11, 95, 88, 0.04);
}

.card-normal {
    background-color: rgba(11, 95, 88, 0.04);
    border: 1px solid rgba(11, 95, 88, 0.08);
}

.section-green .card-normal {
    background-color: rgba(246, 230, 200, 0.06);
    border: 1px solid rgba(246, 230, 200, 0.1);
    color: var(--color-soft-cream);
}

.section-green .card-filled {
    background-color: var(--color-soft-cream) !important;
    color: var(--color-dark-emerald) !important;
    border-color: rgba(11, 95, 88, 0.12) !important;
}

/* Taalreizen page */
.taalreis-hero-media {
    align-items: center;
    justify-content: center;
}

.taalreis-hero-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: 1fr;
}

.taalreis-hero-image {
    width: 100%;
    max-width: 760px; /* larger hero image */
    height: auto;
    object-fit: contain;
    border-radius: 0.75rem;
    box-shadow: 0 12px 30px rgba(14,26,43,0.08);
    transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.taalreis-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding-left: 0;
}

.taalreis-list-item {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
}

.taalreis-day-list {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.taalreis-day-card {
    display: grid;
    gap: 1.25rem;
    align-items: center;
    padding: 1.75rem;
}

.taalreis-day-photos {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(2, 1fr);
}

.taalreis-day-photo {
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 1.25rem;
    object-fit: cover;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.taalreis-day-photo:hover,
.taalreis-day-photo:focus-visible {
    transform: scale(1.06);
    box-shadow: 0 12px 24px rgba(14, 26, 43, 0.12);
}

@media (min-width: 768px) {
    .taalreis-hero-grid {
        grid-template-columns: 0.8fr 1.2fr; /* give media column more space */
        align-items: center;
    }
    
    /* Restore visual order: Text (default order 0) Left, Media Right */
    .taalreis-hero-media {
        order: 2;
    }

    .taalreis-day-card {
        grid-template-columns: 1.35fr 0.65fr;
    }

    .taalreis-day-photos {
        grid-template-columns: 1fr;
    }
}

.contact-icon {
    font-size: 2.5rem !important;
    color: var(--color-dark-emerald);
    margin-bottom: 1.5rem;
}

@media (min-width: 768px) {
    .contact-icon {
        font-size: 3rem !important;
    }
}

.contact-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.contact-label {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark-emerald);
}

@media (min-width: 768px) {
    .contact-label {
        font-size: 1.5rem;
    }
}

.contact-value {
    font-size: 1rem;
    opacity: 0.7;
    font-weight: 400;
}

/* Email capture box — uses site-wide box padding for consistency */
.email-capture {
    margin: 2rem 0;
    padding: var(--box-padding);
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 1rem;
}

@media (min-width: 768px) {
    .card {
        padding: var(--box-padding-lg);
    }

    /* Make the wider card span the full grid width — keep inner content stacked so icon sits above text */
    .card-wide {
        width: 100%;
    }

    .card-wide-inner {
        display: flex;
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    /* Ensure icons inside cards behave like the other (stacked) cards: block with bottom spacing */
    .card .material-symbols-rounded,
    .card-wide .material-symbols-rounded {
        display: block;
        margin-bottom: 1rem;
        color: var(--color-dark-emerald);
    }
}

/* On small screens, stack the wide card's inner content vertically */
@media (max-width: 767px) {
    .card-wide-inner {
        flex-direction: column;
        gap: 1rem;
    }
}

.price-card {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    min-height: 220px;
    border: 1px solid rgba(14, 26, 43, 0.06);
    box-shadow: 0 8px 20px rgba(14, 26, 43, 0.04);
    background-color: rgba(11, 95, 88, 0.04);
    color: var(--color-deep-navy);
}

@media (min-width: 768px) {
    .price-card {
        min-height: 260px;
    }
}

/* Invert visuals based on surrounding section (match secondary boxes behaviour, inverted) */
.section-green .price-card {
    /* 90% green + 10% beige (slightly lighter than background) */
    background-color: #236D63;
    /* mix of 90% #0B5F58 + 10% #F6E6C8 */
    color: var(--color-soft-cream);
    border: 1px solid rgba(246, 230, 200, 0.06);
    /* subtle beige border */
    box-shadow: 0 8px 18px rgba(11, 95, 88, 0.06);
    /* subtle green shadow */
}

.section-green .price-card h3,
.section-green .price-card .price-amount {
    color: var(--color-soft-cream) !important;
}

.section-beige .price-card {
    /* On light background, use the subtle green tint used for secondary boxes */
    background-color: rgba(11, 95, 88, 0.04);
    border: 1px solid rgba(11, 95, 88, 0.06);
    color: var(--color-deep-navy);
}

.section-beige .price-card .price-amount {
    color: var(--color-dark-emerald);
}

.card-outline {
    background-color: rgba(246, 230, 200, 0.05);
}

.card-filled,
.quiz-step-card,
.quiz-results-card {
    background-color: var(--color-dark-emerald) !important;
    color: var(--color-soft-cream) !important;
    border-color: rgba(246, 230, 200, 0.1) !important;
}

/* Ensure buttons inside dark quiz cards use the light theme for contrast */
.quiz-step-card .button-primary,
.quiz-results-card .button-primary {
    background-color: var(--color-soft-cream) !important;
    color: var(--color-dark-emerald) !important;
}

.quiz-step-card .button-outline,
.quiz-results-card .button-outline {
    border-color: var(--color-soft-cream) !important;
    color: var(--color-soft-cream) !important;
}

.card-filled .accent,
.quiz-step-card .accent,
.quiz-results-card .accent {
    color: var(--color-light-blue) !important;
}

/* Make cards on beige sections use the subtle green tint used on other pages */
.section-beige .card,
.section-beige .card-outline {
    background-color: rgba(11, 95, 88, 0.04);
    border: 1px solid rgba(11, 95, 88, 0.06);
}

.section-beige .card-outline {
    /* keep a light outline variant if needed */
    background-color: rgba(11, 95, 88, 0.03);
}

.docent-photo {
    width: 100%;
    max-width: 240px;
    border-radius: 1rem;
    object-fit: cover;
    box-shadow: 0 10px 30px rgba(14, 26, 43, 0.08);
}

.docent-photo-hero {
    max-width: 320px;
    border-radius: 1rem;
}

/* Spanish flag removed — flag styles cleaned up */

@media (max-width: 767px) {
    /* Spanish flag removed — mobile flag styles cleaned up */

    /* On mobile, make the docent image fill the available content width (respects section padding)
       and remove the max-width constraint so the photo is full-bleed within the section. */
    .profile-photo {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .docent-photo {
        max-width: none;
        width: 100%;
        border-radius: 1rem;
        object-fit: cover;
    }
}

@media (min-width: 1024px) {
    /* No flag styles needed here after removal */
}

@media (min-width: 768px) {
    .docent-photo {
        max-width: 300px;
    }

    .docent-photo-hero {
        max-width: 420px;
    }
}

/* NAVBAR: fixed header styles and responsive behavior */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    transition: all var(--transition-speed) ease;
    padding: 1.5rem calc(var(--page-gutter) - var(--navbar-padding-x));
    -webkit-transform: translate3d(0, 0, 0);
    /* Fix for iOS fixed element rendering */
    transform: translate3d(0, 0, 0);
}

@media (min-width: 768px) {
    .navbar {
        padding: 2rem calc(var(--page-gutter) - var(--navbar-padding-x));
    }
}

.navbar.scrolled {
    padding: 0.75rem calc(var(--page-gutter) - var(--navbar-padding-x));
}

.navbar-container {
    max-width: calc(var(--content-max-width) + (2 * var(--navbar-padding-x)));
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: all var(--transition-speed) ease;
    padding: 0.75rem var(--navbar-padding-x);
}

.navbar.scrolled .navbar-container {
    background-color: rgba(246, 230, 200, 0.95);
    backdrop-filter: blur(12px);
    border: 1px solid rgba(11, 95, 88, 0.08);
    border-radius: 9999px;
    padding-left: var(--navbar-padding-x);
    padding-right: var(--navbar-padding-x);
}

.logo {
    font-size: 1.25rem;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-dark-emerald);
}

.logo-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.logo-image {
    display: inline-block;
    height: 40px;
    width: auto;
}

@media (min-width: 820px) {
    .logo {
        font-size: 1.5rem;
    }

    .logo-desktop {
        display: inline-block;
    }

    .logo-mobile {
        display: none;
    }

    .logo-image {
        height: 48px;
    }
}

@media (max-width: 819px) {
    .logo-desktop {
        display: none;
    }

    .logo-mobile {
        display: inline-block;
    }

    .logo-image {
        height: 40px;
    }
}

.nav-links {
    display: none;
    align-items: center;
    gap: 2.5rem;
}

@media (min-width: 768px) {
    .nav-links {
        display: flex;
    }
}

.nav-link {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-deep-navy);
    opacity: 0.7;
}

.nav-link:hover {
    opacity: 1;
}

.nav-link.active {
    opacity: 1;
    color: var(--color-dark-emerald);
    text-decoration: underline;
    text-underline-offset: 8px;
    text-decoration-thickness: 2px;
}

.mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 9999px;
    transition: background-color 0.3s ease;

    /* iOS Safari Fixes */
    color: var(--color-dark-emerald);
    -webkit-text-fill-color: var(--color-dark-emerald);
    -webkit-tap-highlight-color: transparent;
}

.mobile-menu-toggle:focus,
.mobile-menu-toggle:active,
.mobile-menu-toggle:visited {
    color: var(--color-dark-emerald);
    -webkit-text-fill-color: var(--color-dark-emerald);
}

@media (min-width: 768px) {
    .mobile-menu-toggle {
        display: none;
    }
}

.mobile-menu-toggle:hover {
    background-color: rgba(11, 95, 88, 0.05);
}

/* MOBILE MENU: overlay styles and transitions for mobile navigation */
.mobile-menu {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--color-soft-cream);
    z-index: 60;
    display: flex;
    flex-direction: column;
    padding: var(--box-padding);
    /* Only animate transform and opacity to avoid unexpected horizontal changes */
    transition: transform var(--transition-speed) cubic-bezier(0.4, 0, 0.2, 1), opacity var(--transition-speed) ease;
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
}

.mobile-menu.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
}

.mobile-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4rem;
}

.mobile-menu-close {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    border-radius: 9999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    color: var(--color-dark-emerald);
    box-shadow: none;
}

.mobile-menu .mobile-menu-close {
    color: var(--color-dark-emerald);
}

.dark .mobile-menu .mobile-menu-close {
    color: var(--color-soft-cream);
}

.mobile-menu-close:hover {
    background-color: rgba(11, 95, 88, 0.05);
}

.dark .mobile-menu-close:hover {
    background-color: rgba(246, 230, 200, 0.06);
}

.mobile-menu-close:focus-visible {
    outline: none;
    box-shadow: 0 0 0 4px rgba(11, 95, 88, 0.12);
    border-radius: 9999px;
}

.mobile-menu-close svg {
    display: block;
}

.mobile-nav-links {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mobile-nav-link {
    display: flex;
    align-items: center;
    gap: 1rem;
    font-size: 2rem;
    font-weight: 600;
    color: var(--color-deep-navy);
    opacity: 0.4;
    transform: translateY(-1.25rem);
    transition-property: transform, opacity;
    transition-duration: 0.45s, 0.35s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1), ease;
    transform-origin: center top;
}

.mobile-menu.open .mobile-nav-link {
    transform: translateY(0);
    opacity: 1;
}

/* Hide icon glyphs next to page labels in the mobile menu */
.mobile-nav-link .material-symbols-rounded {
    display: none;
}

/* Ensure buttons inside the mobile menu don't move horizontally either */
.mobile-menu .button,
.mobile-menu button {
    transform: translateY(-0.6rem);
    transition-property: transform, opacity;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.2, 0, 0, 1);
    transform-origin: center top;
}

.mobile-menu.open .button,
.mobile-menu.open button {
    transform: translateY(0);
}

.mobile-footer {
    margin-top: auto;
    padding-top: 3rem;
}

footer {
    background-color: var(--color-dark-emerald);
    color: var(--color-soft-cream);
    padding: var(--section-vertical) var(--page-gutter);
}

@media (min-width: 768px) {
    /* footer uses global spacing variables (see :root) */
}

.footer-container {
    max-width: var(--content-max-width);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem 1.5rem;
}

.footer-container> :first-child {
    grid-column: 1 / -1;
}

@media (min-width: 768px) {
    .footer-container {
        grid-template-columns: 2fr 1fr 1fr;
        gap: 4rem;
    }

    .footer-container> :first-child {
        grid-column: auto;
    }
}

.footer-logo {
    color: var(--color-soft-cream);
    font-size: 1.5rem;
    font-weight: 600;
}

.footer-logo .logo-footer {
    display: inline-block;
    height: 48px;
    width: auto;
}

.footer-text {
    font-size: 1.125rem;
    opacity: 0.7;
    max-width: 24rem;
    margin-top: 1.5rem;
    font-weight: 400;
    line-height: 1.7;
}

.footer-column h4 {
    font-size: 1.25rem;
    color: var(--color-light-blue);
    margin-bottom: 2rem;
    font-weight: 600;
}

.footer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Mobile: Optimize footer items to be next to each other */
@media (max-width: 767px) {
    .footer-list {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 1rem 1.5rem;
    }

    .footer-column h4 {
        margin-bottom: 1rem;
    }

    .footer-link {
        font-size: 1rem;
    }

    .footer-text {
        font-size: 1rem;
        margin-top: 1rem;
    }
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.125rem;
    opacity: 0.7;
    font-weight: 600;
    transition: all 0.3s ease;
    text-decoration: none !important;
}

.footer-link span:not(.material-symbols-rounded) {
    text-decoration: none;
}

.footer-link:hover {
    color: var(--color-light-blue);
    opacity: 1;
}

.footer-bottom {
    max-width: var(--content-max-width);
    margin: 6rem auto 0;
    padding-top: 3rem;
    border-top: 1px solid rgba(246, 230, 200, 0.08);
    text-align: center;
    font-size: 0.875rem;
    opacity: 0.3;
}


.leading-tight {
    line-height: 1.2;
}

.leading-relaxed {
    line-height: 1.6;
}

.tracking-tight {
    letter-spacing: -0.015em;
}

.opacity-60 {
    opacity: 0.6;
}

.opacity-70 {
    opacity: 0.7;
}

.opacity-80 {
    opacity: 0.8;
}

.opacity-90 {
    opacity: 0.9;
}

.opacity-40 {
    opacity: 0.4;
}




.space-y-10>*+* {
    margin-top: 2.5rem;
}

.space-y-4>*+* {
    margin-top: 1rem;
}

.space-y-6>*+* {
    margin-top: 1.5rem;
}

.space-y-8>*+* {
    margin-top: 2rem;
}

.space-y-12>*+* {
    margin-top: 3rem;
}

.space-y-16>*+* {
    margin-top: 4rem;
}

.space-y-20>*+* {
    margin-top: 5rem;
}

.pt-20 {
    padding-top: 5rem;
}

.pt-12 {
    padding-top: 3rem;
}

.pt-4 {
    padding-top: 1rem;
}

/* Margin utilities */
.mt-24 {
    margin-top: 6rem;
}

.mt-10 {
    margin-top: 2.5rem;
}

.mt-4 {
    margin-top: 1rem;
}

.mt-2 {
    margin-top: 0.5rem;
}

.mt-auto {
    margin-top: auto;
}

.mb-1 {
    margin-bottom: 0.25rem;
}

.mb-2 {
    margin-bottom: 0.5rem;
}

.mb-4 {
    margin-bottom: 1rem;
}

.mb-6 {
    margin-bottom: 1.5rem;
}

.mb-10 {
    margin-bottom: 2.5rem;
}

.margin-0 {
    margin: 0;
}

/* Padding utilities */
.p-6 {
    padding: 1.5rem;
}

.p-8 {
    padding: 2rem;
}

.py-8 {
    padding-top: 2rem;
    padding-bottom: 2rem;
}

.flex {
    display: flex;
}

.display-flex {
    display: flex;
}

.display-block {
    display: block;
}

.flex-col {
    flex-direction: column;
}

.flex-wrap {
    flex-wrap: wrap;
}

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

.items-start {
    align-items: flex-start;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

/* Gap utilities */
.gap-4 {
    gap: 1rem;
}

.gap-5 {
    gap: 1.25rem;
}

.gap-6 {
    gap: 1.5rem;
}

.gap-12 {
    gap: 3rem;
}

.gap-16 {
    gap: 4rem;
}

/* Flex utilities */
.flex-shrink-0 {
    flex-shrink: 0;
}

/* Grid utilities */
.grid-cols-1 {
    grid-template-columns: 1fr;
}

/* Text utilities */
.text-left {
    text-align: left;
}

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

.whitespace-nowrap {
    white-space: nowrap;
}

.no-underline {
    text-decoration: none !important;
}

.text-inherit {
    color: inherit !important;
}

.italic {
    font-style: italic;
}

/* List utilities */
.list-none {
    list-style: none;
    padding: 0;
    margin: 0;
}

/* Layout utilities */
.min-h-0 {
    min-height: 0;
}

.w-full {
    width: 100%;
}

.block {
    display: block;
}

/* Border utilities */
.border-dark-emerald {
    border-color: var(--color-dark-emerald) !important;
}

.border-soft-cream {
    border-color: var(--color-soft-cream) !important;
}

/* Transition utilities */
.transition-all {
    transition: all 0.3s ease;
}

/* Section padding variant */
.section-padding {
    padding: var(--section-vertical) var(--page-gutter);
}

.section-padding-vertical {
    padding-top: 4rem;
    padding-bottom: 4rem;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.overflow-hidden {
    overflow: hidden;
}

.z-10 {
    z-index: 10;
}

.decorative-blob {
    position: absolute;
    top: 50%;
    right: -10rem;
    width: 30rem;
    height: 30rem;
    background-color: rgba(11, 95, 88, 0.05);
    border-radius: 9999px;
    filter: blur(100px);
    transform: translateY(-50%);
}

.border-t {
    border-top: 1px solid rgba(11, 95, 88, 0.05);
}

/* Removed unused delay utility classes (no references in HTML/JS) to reduce CSS size. Add them back only when needed. */

/* STACKED PHOTO GALLERY */
.gallery-wrapper {
    display: flex;
    justify-content: center;
    padding: 2rem 0;
    width: 100%;
    /* Ensure visible overflow on desktop so pop-out hover effects aren't clipped */
    overflow: visible;
}

/* Make gallery inside green sections break out full-bleed */
.section-green .gallery-wrapper {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: 1.5rem;
    /* preserve small gutter */
    padding-right: 1.5rem;
}

.stacked-gallery {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 240px;
    /* reduced height for a tighter band */
    position: relative;
    max-width: 100%;
}

.gallery-card {
    height: 160px;
    /* slightly smaller on desktop to reduce section height */
    width: auto;
    aspect-ratio: 3/2;
    object-fit: cover;
    border-radius: 1rem;
    border: 6px solid var(--color-soft-cream);
    margin-left: -3.5rem;
    margin-right: -3.5rem;
    flex-shrink: 0;
}

/* Random Rotations for "messy" stacked look */
.gallery-card:nth-child(1) {
    transform: rotate(-4deg);
    z-index: 1;
}

.gallery-card:nth-child(2) {
    transform: rotate(3deg) translateY(-5px);
    z-index: 2;
}

.gallery-card:nth-child(3) {
    transform: rotate(-2deg);
    z-index: 3;
}

.gallery-card:nth-child(4) {
    transform: rotate(5deg) translateY(5px);
    z-index: 4;
}

.gallery-card:nth-child(5) {
    transform: rotate(-3deg);
    z-index: 5;
}

/* Desktop Hover Interaction */
@media (hover: hover) {
    .gallery-card:hover {
        z-index: 100 !important;
        /* Rise above all */
        transform: scale(1.25) rotate(0deg);
        /* Zoom and straighten */
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    }
}

/* Active Class */
.gallery-card.active {
    z-index: 100 !important;
    transform: scale(1.25) rotate(0deg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

/* Mobile specific: Normal Horizontal Scroll (Netflix-style) */
@media (max-width: 767px) {
    .gallery-wrapper {
        display: block;
        padding: 0;
        /* Break out of parent padding to allow full-width scroll */
        width: 100vw;
        margin-left: -1.5rem;
        /* Assumes mobile gutter is 1.5rem */
        margin-right: -1.5rem;
        overflow-y: hidden;
    }

    .stacked-gallery {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        height: auto;
        overflow-x: auto;
        /* Enable scroll */
        scroll-snap-type: x mandatory;
        /* Snap behavior */
        padding: 1.5rem;
        /* Padding inside scroll container */
        gap: 1rem;
        transform: none;
    }

    .gallery-card {
        height: 200px;
        margin: 0 !important;
        /* Remove negative margins */
        transform: none !important;
        /* Remove rotation */
        scroll-snap-align: center;
        border-width: 4px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        z-index: 1 !important;
    }

    .gallery-card:hover,
    .gallery-card.active {
        transform: none;
        /* No zoom on mobile scroll */
    }

    /* Reset nth-child specific transforms */
    .gallery-card:nth-child(n) {
        transform: none !important;
    }
}


/* ANIMATION: Minimal fade-in up for hero text */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

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

.animate-fade-in-up {
    animation: fadeInUp 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

.quiz-advice-form .button {
    margin-top: 0.5rem;
    align-self: center;
}

/* ========================================
   QUIZ STEPPER STYLES (Single Question View)
   ======================================== */

/* Scroll offset for level anchors on groepslessen page */
#niveau-start,
#niveau-verder,
#niveau-verdieping,
#mijn-werkwijze {
    scroll-margin-top: 7rem;
}

.section-quiz-stepper {
    background-color: var(--color-soft-cream);
    min-height: auto;
    display: block;
}

.quiz-stepper {
    width: 100%;
    position: relative;
}

.quiz-step {
    display: none;
    opacity: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-step.active {
    display: block;
    opacity: 1;
}

/* Quiz Step Card - The green card containing each question */
.quiz-step-card {
    background-color: var(--color-dark-emerald) !important;
    color: var(--color-soft-cream) !important;
    box-shadow: 0 12px 32px rgba(11, 95, 88, 0.15);
    border: 1px solid rgba(246, 230, 200, 0.1) !important;
    border-radius: 2rem !important;
    padding: var(--box-padding) !important;
}

.quiz-step-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 2rem;
    opacity: 0.8;
}

.quiz-step-number {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-light-blue);
    background-color: rgba(207, 228, 234, 0.1);
    width: 3.5rem;
    height: 3.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.quiz-step-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 600;
}

.quiz-step-question {
    font-size: clamp(1.1rem, 2.1vw, 1.5rem);
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 1.75rem;
    letter-spacing: -0.01em;
    color: var(--color-soft-cream);
}

@media (max-width: 767px) {
    .quiz-step-question {
        font-size: 1.35rem;
        margin-bottom: 1.5rem;
    }
}

/* Quiz Options */
.quiz-step-options {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.quiz-step-option {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 1.25rem 2rem;
    border-radius: 9999px;
    /* Pill shape to match global button style */
    background-color: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(246, 230, 200, 0.1);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.quiz-step-option:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: var(--color-light-blue);
    transform: translateX(8px);
}

.quiz-step-option input[type="radio"] {
    display: none;
}

.quiz-option-letter {
    width: 2.25rem;
    height: 2.25rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.1);
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
    color: var(--color-soft-cream);
}

.quiz-option-text {
    font-size: 1.125rem;
    line-height: 1.4;
    font-weight: 500;
    color: var(--color-soft-cream);
}

/* Selected state */
.quiz-step-option:has(input:checked) {
    background-color: rgba(207, 228, 234, 0.15);
    border-color: var(--color-light-blue);
    box-shadow: 0 4px 12px rgba(207, 228, 234, 0.1);
}

.quiz-step-option:has(input:checked) .quiz-option-letter {
    background-color: var(--color-light-blue);
    color: var(--color-dark-emerald);
}

/* Hide footer on quiz page */
body.quiz-page~footer,
body.quiz-page+footer {
    display: none;
}

/* Results Screen */
.quiz-results-screen {
    display: none;
}

.quiz-results-screen.active {
    display: block;
}

.quiz-results-card {
    background-color: var(--color-dark-emerald);
    color: var(--color-soft-cream);
    padding: var(--box-padding);
    border-radius: 2rem;
    box-shadow: 0 12px 32px rgba(11, 95, 88, 0.15);
    text-align: center;
    position: relative;
    overflow: hidden;
    scroll-margin-top: 7rem;
}

.quiz-results-recommendation {
    display: inline-flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1.5rem 2.5rem;
    background-color: rgba(207, 228, 234, 0.1);
    border: 1px solid var(--color-light-blue);
    border-radius: 1.5rem;
    margin-bottom: 2.5rem;
}

.recommendation-label {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    opacity: 0.8;
}

.recommendation-level {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-light-blue);
}

.quiz-results-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin-bottom: 3rem;
}

.quiz-results-explanation {
    font-size: 1.1rem;
    max-width: 50ch;
    margin: 0 auto 2rem;
    line-height: 1.6;
    opacity: 0.9;
}

.quiz-advice-panel {
    display: none;
    margin-top: 2rem;
    text-align: left;
    background-color: rgba(246, 230, 200, 0.08);
    border: 1px solid rgba(246, 230, 200, 0.2);
    border-radius: 1.5rem;
    padding: 1.75rem;
}

.quiz-advice-panel.open {
    display: block;
}

.quiz-advice-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.quiz-advice-header .material-symbols-rounded {
    font-size: 2rem;
    color: var(--color-light-blue);
}

.quiz-advice-form {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-top: 1.5rem;
}

.quiz-advice-group {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.quiz-advice-label {
    font-weight: 600;
    font-size: 1rem;
    color: var(--color-soft-cream);
}

.quiz-advice-label .required {
    color: var(--color-light-blue);
}

.quiz-advice-input {
    padding: 1rem 1.25rem;
    border-radius: 0.75rem;
    border: 2px solid rgba(246, 230, 200, 0.2);
    background-color: var(--color-soft-cream);
    color: var(--color-deep-navy);
    font-family: var(--font-sans);
    font-size: 1.125rem;
    transition: all 0.3s ease;
}

.quiz-advice-input::placeholder {
    color: rgba(14, 26, 43, 0.5);
}

.quiz-advice-input:focus {
    outline: none;
    border-color: var(--color-light-blue);
}

.quiz-advice-input.error {
    border-color: var(--color-light-blue);
}

.quiz-advice-hint {
    font-size: 0.85rem;
    color: var(--color-light-blue);
    margin-top: 0.25rem;
}

.quiz-results-secondary {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
}

.quiz-contact-btn {
    font-size: 0.9rem;
    padding: 0.75rem 1.5rem;
}

/* Mobile Responsive - iPhone 12 Pro (390px) and similar */
@media (max-width: 767px) {
    .section-quiz-stepper {
        padding-top: 5rem;
        padding-bottom: 2rem;
        padding-left: 1rem;
        padding-right: 1rem;
        min-height: auto;
    }

    .section-quiz-stepper .section-container {
        padding: 0;
        max-width: 100%;
        width: 100%;
    }

    .section-quiz-stepper .space-y-16>*+* {
        margin-top: 1.5rem;
    }

    .section-quiz-stepper .space-y-6>*+* {
        margin-top: 0.75rem;
    }

    .section-quiz-stepper .text-heading {
        font-size: 1.5rem;
        gap: 0.5rem;
    }

    .section-quiz-stepper .heading-icon {
        font-size: 1.5rem;
    }

    .quiz-step-card,
    .quiz-results-card {
        padding: 1.5rem;
        border-radius: 1.5rem;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        display: block;
    }

    .quiz-step-header {
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        gap: 0.5rem;
    }

    .quiz-step-number {
        font-size: 1.1rem;
    }

    .quiz-step-label {
        font-size: 0.75rem;
    }

    .quiz-step-question {
        font-size: 0.95rem;
        margin-bottom: 0.75rem;
        line-height: 1.4;
    }

    .quiz-step-options {
        gap: 0.4rem;
    }

    .quiz-step-option {
        padding: 0.75rem 1rem;
        border-radius: 1rem;
        gap: 0.6rem;
    }

    .quiz-option-letter {
        width: 1.4rem;
        height: 1.4rem;
        font-size: 0.7rem;
        flex-shrink: 0;
    }

    .quiz-option-text {
        font-size: 0.85rem;
        line-height: 1.3;
    }

    .quiz-results-recommendation {
        padding: 0.6rem 1rem;
        margin-bottom: 1rem;
    }

    .recommendation-label {
        font-size: 0.75rem;
    }

    .recommendation-level {
        font-size: 0.95rem;
    }

    .quiz-results-actions {
        flex-direction: column;
        gap: 0.5rem;
        margin-bottom: 1rem;
    }

    .quiz-results-actions .button {
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
    }

    .quiz-results-secondary {
        flex-direction: column;
        gap: 0.5rem;
    }

    .quiz-contact-btn {
        width: 100%;
        padding: 0.6rem 1rem;
        font-size: 0.85rem;
    }

}

/* Extra small screens (iPhone SE, older devices) */
@media (max-width: 375px) {
    .section-quiz-stepper {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    .quiz-step-card,
    .quiz-results-card {
        padding: 0.875rem;
    }

    .quiz-step-question {
        font-size: 0.9rem;
    }

    .quiz-option-text {
        font-size: 0.8rem;
    }

    .quiz-step-option {
        padding: 0.5rem 0.6rem;
    }
}



/* ANIMATIONS: Scroll-triggered entry effects */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.4s ease-out, transform 0.4s ease-out;
    will-change: opacity, transform;
}

.animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.delay-100 {
    transition-delay: 0.1s;
}

.delay-200 {
    transition-delay: 0.2s;
}

.delay-300 {
    transition-delay: 0.3s;
}

/* HERO DESIGN */
.hero-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 80vh;
    /* Make hero take up most of the screen */
    text-align: center;
    align-items: center;
    position: relative;
    z-index: 10;
}

@media (min-width: 768px) {
    /* Kept for potential future overrides, but base styles are now centered */
}

.hero-title {
    font-size: clamp(2rem, 5vw, 4rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    margin-bottom: 1.5rem;
}

.hero-subtitle {
    font-size: clamp(1.125rem, 2vw, 1.5rem);
    max-width: 40ch;
    margin-bottom: 2.5rem;
    opacity: 0.8;
}


/* QUIZ DYNAMIC STYLES */

/* Question Header */
.quiz-step-header {
    display: flex;
    align-items: center;
    margin-bottom: 1.5rem;
}

.quiz-step-number {
    font-size: 2rem;
    font-weight: 700;
    opacity: 0.3;
}

.quiz-step-label {
    margin-left: 1rem;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 600;
    opacity: 0.6;
}

/* Question Title */
.quiz-step-question {
    font-size: 1.5rem;
    line-height: 1.2;
    margin-bottom: 2rem;
    color: var(--color-soft-cream);
}

/* Option Letter Badge */
.quiz-option-letter {
    flex-shrink: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: rgba(0, 0, 0, 0.05);
    font-weight: 700;
    margin-right: 1rem;
    font-size: 0.875rem;
    color: var(--color-soft-cream);
}

/* Option Text */
.quiz-option-text {
    font-weight: 500;
    font-size: 1rem;
    color: var(--color-soft-cream);
}

/* ==========================================
   MOBILE RESPONSIVE POLISH (0–767px)
   ========================================== */

/* Section-compact: reduced vertical padding for CTA-like end sections */
.section-compact {
    min-height: auto;
    padding-top: 3rem;
    padding-bottom: 3rem;
}

@media (max-width: 767px) {

    /* --- Global spacing reductions --- */
    :root {
        --section-vertical: 3.5rem;
        --box-padding: 1.5rem;
        --box-padding-lg: 1.5rem;
    }

    /* Reduce section min-height so short-content sections don't have awkward whitespace */
    .section {
        min-height: auto;
    }

    .section-compact {
        padding-top: 2rem;
        padding-bottom: 2rem;
    }

    /* --- Typography mobile scaling --- */
    h1 {
        font-size: 1.75rem;
    }

    h2 {
        font-size: 1.15rem;
    }

    .text-heading {
        font-size: 1.75rem !important;
    }

    .text-subheading {
        font-size: 1.15rem !important;
    }

    .text-lead {
        font-size: 1rem !important;
    }

    /* --- Heading + icon layout --- */
    .text-heading.flex.items-center.gap-6,
    h1.flex.items-center.gap-6,
    h2.flex.items-center.gap-6 {
        gap: 0.75rem !important;
    }

    .heading-icon {
        font-size: 1.5rem !important;
    }

    /* --- Space-y reductions on mobile --- */
    .space-y-16 > * + * {
        margin-top: 2.5rem;
    }

    .space-y-12 > * + * {
        margin-top: 2rem;
    }

    .space-y-10 > * + * {
        margin-top: 1.75rem;
    }

    /* --- Card mobile padding --- */
    .card,
    .card-base,
    .card-outline,
    .card-filled,
    .contact-card {
        padding: 1.5rem !important;
    }

    .card-base.card-filled {
        padding: 1.5rem !important;
    }

    /* --- Button mobile refinement --- */
    .button {
        padding: 0.85rem 1.5rem;
        font-size: 0.95rem;
    }

    .button-small {
        padding: 0.5rem 1rem;
        font-size: 0.85rem;
    }

    /* --- Grid-2 collapses to single column --- */
    .grid-2,
    .grid-2x3 {
        grid-template-columns: 1fr;
    }

/* Mobile Footer Optimization */
@media (max-width: 767px) {
    /* --- Main Layout Fixes --- */
    main {
        /* Header must not block text. Assuming ~80px fixed header. */
        padding-top: 5rem !important; 
    }

    /* Prevent horizontal overflow globally */
    body, .section-container, .container {
        max-width: 100vw;
        overflow-x: hidden;
    }

    /* Home Hero */
    .hero-home {
        min-height: auto !important;
        padding-top: 2rem !important;
        padding-bottom: 2rem !important;
    }

    /* --- Footer --- */
    .footer-container {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Main sections horizontal */
        gap: 1.5rem;
    }

    .footer-container > :first-child {
        grid-column: 1 / -1; /* Logo/Text full width on top */
        margin-bottom: 1rem;
        padding-bottom: 1.5rem;
        border-bottom: 1px solid rgba(246, 230, 200, 0.1);
        text-align: center;
    }

    .footer-list {
        display: flex;
        flex-direction: column !important; /* Sub-elements vertical */
        gap: 0.75rem;
    }

    .footer-column h4 {
        margin-bottom: 0.75rem;
        font-size: 1rem; 
    }

    .footer-bottom {
        margin-top: 3rem;
        padding-top: 2rem;
    }

    /* --- Contact grid mobile --- */
    .contact-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* --- Price card mobile --- */
    .price-card {
        min-height: 180px;
    }

    /* --- Taalreis mobile --- */
    .taalreis-hero-grid {
        display: block !important; /* Block for float support */
    }

    .taalreis-hero-media {
        float: right !important; /* Float Right */
        width: 45% !important;
        margin-left: 1.5rem !important;
        margin-bottom: 0.5rem !important;
        /* Ensure it clears or interacts properly */
    }
    
    .taalreis-hero-image {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        border-radius: 0.75rem !important;
    }

    .taalreis-day-card {
        display: grid !important;
        grid-template-columns: 1.1fr 0.9fr !important; /* Slightly more room for text */
        align-items: stretch !important; /* Make image fill box height */
        padding: 0 !important; /* Remove padding to let image reach edges */
        gap: 0 !important;
        min-height: 180px;
        overflow: hidden; /* Keep border radius clean */
    }

    .taalreis-day-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 1rem;
    }

    .taalreis-day-photos {
        grid-template-columns: 1fr !important; /* Stack photos inside the small column */
        height: 100%;
        gap: 0 !important;
    }

    .taalreis-day-photo {
        height: 100% !important;
        width: 100% !important;
        aspect-ratio: auto !important; /* Allow it to stretch */
        border-radius: 0 !important; /* Image fills the right half completely */
        object-fit: cover !important;
    }

    /* --- Profile hero mobile --- */
    /* Layout: Image floated left (50% w), Text wraps around it */
    .profile-hero {
        display: block !important;
        width: 100% !important;
    }

    .profile-photo {
        display: block !important;
        float: left !important;
        width: 50% !important; /* Exactly half width */
        margin-right: 1rem !important;
        margin-bottom: 0.5rem !important;
        padding: 0 !important; /* Ensure no padding steals space */
    }
    
    .docent-photo-hero {
        width: 100% !important;
        max-width: 100% !important; /* Override desktop max-width */
        height: auto !important;
        border-radius: 0.75rem !important;
    }

    .intro-text {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        display: block !important; 
        /* Block display ensures text flows around the float */
    }
    
    /* Ensure the icon flows with the text or sits nicely */
    .intro-text .material-symbols-rounded {
        display: none !important; /* Optional: Hide the icon to save space/clean layout on mobile? 
                                     Or keep it. User didn't ask to remove. 
                                     But an icon block might break the flow if it's width:100% */
    }
    
    /* If we keep the icon, ensure it doesn't clear */
    /* Actually, the icon has 'mb-4' and is a span. likely inline-block. */


    /* --- Hero section mobile --- */
    .hero-wrapper {
        min-height: 70vh;
    }

    .hero-title {
        font-size: 1.75rem !important;
    }

    .hero-subtitle {
        font-size: 1rem !important;
    }

    /* --- Gap reductions --- */
    .gap-8, .gap-10 {
        gap: 1.5rem !important;
    }

    .gap-12, .gap-16 {
        gap: 2rem !important;
    }

    /* --- Icon sizing mobile --- */
    .icon-xl {
        font-size: 2rem !important;
    }

    .icon-hero {
        font-size: 4rem !important;
    }

    /* --- Gallery card photo border reduction --- */
    .gallery-card {
        border-width: 4px;
    }

    /* --- GENERAL 2-COLUMN GRID FORCED --- */
    .grid-2,
    .grid-3,
    .md-grid-cols-2 /* For Voor Wie boxes */
    {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.75rem !important;
    }

    /* --- Aanbod - Typography Hierarchy --- */
    /* Bold Title > Non-bold subtext */
    .grid-2 h3, 
    .card-base h3,
    .card h3, 
    .text-subheading {
        font-weight: 700 !important;
        font-size: 1.15rem !important;
        margin-bottom: 0.25rem;
    }

    .grid-2 p,
    .card-base p,
    .card p,
    .text-body {
        font-weight: 400 !important;
        font-size: 0.9rem !important;
        opacity: 0.9;
    }

    /* --- Voor Wie Adjustments --- */
    /* Stack icon and text inside the small tile */
    .md-grid-cols-2 .card-base {
        flex-direction: column !important; 
        align-items: flex-start !important;
        padding: 1rem !important;
        text-align: left;
        gap: 0.5rem !important;
    }

    /* Hide Werkwijze description text, keep title */
    #mijn-werkwijze .card-base p.text-lead,
    #mijn-werkwijze .card p.text-lead {
        display: none !important;
    }
    
    #mijn-werkwijze .card-base, #mijn-werkwijze .card {
        min-height: auto !important;
        padding: 1.5rem !important;
    }

    /* Fix potential sidebar overflow from reviews */
    #reviews-container {
        width: 100% !important;
        grid-template-columns: 1fr !important;
        margin: 0 !important;
    }

    /* --- Over Mij - Typography Consistency --- */
    .intro-text p,
    section p.text-lead,
    section p {
        font-size: 1rem !important;
        line-height: 1.6 !important;
        font-family: var(--font-sans) !important;
        font-weight: 400 !important;
    }

    /* --- Reduce padding in cards --- */
    .grid-2 .card-base, .grid-2 .card,
    .grid-3 .card-base, .grid-3 .card,
    .contact-grid .card-base
    {
        padding: 0.75rem !important;
    }

    /* --- Icon scaling for small cards --- */
    .grid-2 .material-symbols-rounded, 
    .contact-grid .material-symbols-rounded,
    .md-grid-cols-2 .material-symbols-rounded 
    {
        font-size: 2rem !important;
        margin-bottom: 0.5rem !important;
    }

    /* --- Button sizes in grids --- */
    .grid-2 .button, .contact-grid .button {
        width: 100% !important;
        padding: 0.5rem !important;
        font-size: 0.8rem !important;
        min-width: 0 !important;
    }
}


/* Extra small screens (< 375px, e.g. iPhone SE) */
@media (max-width: 374px) {
    :root {
        --page-gutter: 1rem;
        --box-padding: 1.25rem;
    }

    .text-heading {
        font-size: 1.5rem !important;
    }

    .button {
        padding: 0.7rem 1rem;
        font-size: 0.9rem;
        min-width: auto;
    }
}