/* ==========================================================================
   Woo&zo — losse statische website
   Kleuren, spacing en secties komen 1-op-1 overeen met het WordPress-thema.
   ========================================================================== */

:root {
    --primary-navy: #1a2b4b;
    /* Oranje overgenomen uit het logo (#f58c21) zodat alle accenten gelijk zijn */
    --accent-orange: #f58c21;
    --accent-orange-dark: #d97614;
    --soft-blue: #f0f4f8;
    --neutral-white: #ffffff;
    --slate-50: #f8f9fa;
    --slate-100: #f1f3f5;
    --slate-200: #e9ecef;
    --slate-300: #cbd5e1;
    --slate-400: #94a3b8;
    --slate-500: #64748b;
    --slate-600: #475569;
    --slate-700: #334155;
    --slate-800: #1e293b;

    --nav-height: 5rem;
    --container-width: 1280px;
}

/* ==========================================================================
   Basis
   ========================================================================== */

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    /* Anker-links stoppen onder de vaste navigatiebalk */
    scroll-padding-top: var(--nav-height);
}

body {
    margin: 0;
    /* Voorkomt horizontaal scrollen door uitstekende decoratieve elementen */
    overflow-x: hidden;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    color: var(--primary-navy);
    background-color: var(--neutral-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Ruimte voor de vaste navigatiebalk */
    padding-top: var(--nav-height);
}

h1, h2, h3, h4, h5, h6 {
    font-weight: 700;
    letter-spacing: -0.025em;
}

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

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    user-select: none;
}

.container {
    max-width: var(--container-width);
    margin: 0 auto;
    padding: 0 1rem;
}

/* Het woord "Woo" krijgt overal dezelfde oranje accentkleur als in het logo */
.woo,
.highlight {
    color: var(--accent-orange);
}

@media (min-width: 640px) {
    .container {
        padding: 0 1.5rem;
    }
}

@media (min-width: 1024px) {
    .container {
        padding: 0 2rem;
    }
}

/* ==========================================================================
   Navigatie
   ========================================================================== */

.wooenzo-nav {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 50;
    background-color: var(--primary-navy);
    color: white;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.wooenzo-nav .nav-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--nav-height);
}

.wooenzo-nav .nav-brand {
    display: flex;
    align-items: center;
}

.wooenzo-nav .logo {
    display: block;
    line-height: 0;
}

.wooenzo-nav .logo img {
    /* Hoogte bepaalt de schaal; de breedte volgt automatisch */
    height: 2.5rem;
    width: auto;
}

.wooenzo-nav .tagline {
    margin-left: 1rem;
    padding-left: 1rem;
    border-left: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate-300);
    font-weight: 500;
    line-height: 1.3;
}

.wooenzo-nav .menu {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.wooenzo-nav .menu a {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
    text-decoration: none;
    transition: color 0.3s;
}

.wooenzo-nav .menu a:hover {
    color: var(--accent-orange);
}

.wooenzo-nav .btn-contact {
    background-color: var(--accent-orange);
    padding: 0.75rem 1.5rem;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    transition: background-color 0.3s;
}

.wooenzo-nav .btn-contact:hover {
    background-color: var(--accent-orange-dark);
    color: white;
}

/* Hamburger-knop (alleen zichtbaar op kleine schermen) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    padding: 0.5rem;
    line-height: 0;
}

.menu-toggle .material-symbols-outlined {
    font-size: 2rem;
}

.mobile-menu {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0 1rem 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    background-color: var(--primary-navy);
}

.mobile-menu[hidden] {
    display: none;
}

.mobile-menu a {
    color: white;
    text-decoration: none;
    font-size: 0.9375rem;
    font-weight: 600;
    padding: 0.875rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mobile-menu a:hover {
    color: var(--accent-orange);
}

.mobile-menu .btn-contact {
    margin-top: 1rem;
    background-color: var(--accent-orange);
    text-align: center;
    border-radius: 2px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 700;
    border-bottom: none;
    padding: 0.875rem 1.5rem;
}

.mobile-menu .btn-contact:hover {
    background-color: var(--accent-orange-dark);
    color: white;
}

/* ==========================================================================
   Hero
   ========================================================================== */

.wooenzo-hero {
    position: relative;
    padding-top: 7rem;
    padding-bottom: 8rem;
    background-color: white;
    overflow: hidden;
}

/*
  De schuine rand loopt van boven (--hero-skew vanaf links) naar beneden (0),
  over de volle hoogte van de hero. De clip-path zit direct op dit element,
  zodat er geen overflow:hidden van een ouder doorheen snijdt — dat kapte de
  schuine lijn eerder halverwege af.
*/
.wooenzo-hero-bg-image {
    --hero-skew: 14%;

    position: absolute;
    top: 0;
    right: 0;
    /*
      54% van het venster, maar op zeer brede schermen niet verder naar links
      dan 80px voorbij het midden. De tekstkolom staat namelijk stil ten
      opzichte van het midden zodra de container zijn maximum bereikt.
    */
    width: min(54%, calc(50% + 80px));
    height: 100%;
    background-image: url('../images/hero-achtergrond.png');
    background-size: cover;
    background-position: center right;
    clip-path: polygon(var(--hero-skew) 0, 100% 0, 100% 100%, 0 100%);
}

.wooenzo-hero .container {
    position: relative;
    z-index: 10;
}

/*
  De tekst springt eerder in dan de schuine rand: nooit breder dan 40% van
  het venster, zodat de regels altijd afbreken vóór de afbeelding begint.
  Daardoor staat er geen tekst over de foto en blijft alles goed leesbaar.
*/
.wooenzo-hero-content {
    max-width: min(30rem, 40%);
}

.wooenzo-hero h1 {
    font-size: 3rem;
    font-weight: 800;
    color: var(--primary-navy);
    line-height: 1.1;
    margin: 0 0 2rem;
}

.wooenzo-hero h1 .highlight {
    color: var(--accent-orange);
}

.wooenzo-hero p {
    font-size: 1.125rem;
    color: var(--slate-600);
    line-height: 1.75;
    margin: 0 0 2.5rem;
}

.btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 1rem 2rem;
    background-color: var(--accent-orange);
    color: white;
    font-weight: 700;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 2px;
    text-decoration: none;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.3s;
}

.btn-primary:hover {
    background-color: var(--accent-orange-dark);
}

/* ==========================================================================
   Sectie: Wet open overheid
   ========================================================================== */

.wooenzo-section-woo {
    padding: 6rem 0;
    background-color: white;
}

/* Introductie over de volle breedte */
.wooenzo-section-woo .intro {
    margin-bottom: 3.5rem;
}

.wooenzo-section-woo h2 {
    font-size: 1.875rem;
    color: var(--primary-navy);
    margin: 0 0 1.5rem;
}

.wooenzo-section-woo .intro p {
    max-width: 62rem;
    margin: 0;
}

/* Twee blokken naast elkaar, altijd even hoog (grid rekt ze gelijk) */
.wooenzo-section-woo .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.5rem;
    align-items: stretch;
}

.wooenzo-section-woo .block {
    padding: 3rem;
    border-radius: 2px;
    position: relative;
    overflow: hidden;
}

.wooenzo-section-woo .block-light {
    background-color: var(--slate-50);
    border: 1px solid var(--slate-200);
}

.wooenzo-section-woo .block-dark {
    background-color: var(--primary-navy);
    color: white;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

/* Decoratieve hoek in het donkere blok */
.wooenzo-section-woo .block-dark::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6rem;
    height: 6rem;
    background-color: rgba(245, 140, 33, 0.1);
    border-bottom-left-radius: 100%;
}

.wooenzo-section-woo h3 {
    font-size: 1.5rem;
    color: var(--primary-navy);
    margin: 0 0 1.25rem;
    position: relative;
}

.wooenzo-section-woo .block-dark h3 {
    color: white;
}

/* Zelfde tekstgrootte in beide blokken */
.wooenzo-section-woo p {
    font-size: 1rem;
    color: var(--slate-600);
    line-height: 1.75;
    margin: 0 0 1rem;
    position: relative;
}

.wooenzo-section-woo .block-dark p {
    color: var(--slate-300);
}

.wooenzo-section-woo .block-dark a {
    color: var(--accent-orange);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.wooenzo-section-woo .block-dark a:hover {
    color: white;
}

.wooenzo-section-woo .lead-in {
    font-weight: 600;
    margin-bottom: 1.5rem;
}

/* Eén opsommingsstijl voor beide blokken */
.wooenzo-section-woo .bullet-list {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

.wooenzo-section-woo .bullet-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    font-size: 1rem;
    line-height: 1.6;
    color: var(--slate-600);
    margin-bottom: 0.75rem;
}

.wooenzo-section-woo .block-dark .bullet-list li {
    color: var(--slate-200);
}

.wooenzo-section-woo .bullet-icon {
    color: var(--accent-orange);
    font-size: 0.75rem;
    flex-shrink: 0;
    /* Uitlijnen met de eerste tekstregel */
    margin-top: 0.55rem;
}

/* ==========================================================================
   Sectie: Onze Aanpak
   ========================================================================== */

/*
  Witte achtergrond, gelijk aan de andere secties. De haarlijnen boven en onder
  houden de sectie visueel gescheiden nu het grijze vlak weg is.
*/
.wooenzo-section-aanpak {
    padding: 6rem 0;
    background-color: white;
    border-top: 1px solid var(--slate-200);
    border-bottom: 1px solid var(--slate-200);
}

.wooenzo-section-aanpak .header {
    text-align: center;
    margin-bottom: 5rem;
}

.wooenzo-section-aanpak h2 {
    font-size: 1.875rem;
    color: var(--primary-navy);
    margin: 0 0 1rem;
}

.wooenzo-section-aanpak h2 .highlight {
    color: var(--accent-orange);
}

.wooenzo-section-aanpak .subtitle {
    font-size: 1.125rem;
    color: var(--slate-500);
    max-width: 42rem;
    margin: 0 auto;
    line-height: 1.6;
}

.wooenzo-section-aanpak .steps-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5rem;
}

/*
  De kaarten stonden eerder wit op een grijs vlak. Op de witte achtergrond
  bakent een dunne rand ze af; de dikke onderrand houdt zijn accentkleur
  (zie .accent-orange / .accent-navy hieronder).
*/
.wooenzo-aanpak-step {
    background: white;
    padding: 2rem 1.75rem;
    border: 1px solid var(--slate-200);
    border-bottom-width: 4px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s;
}

.wooenzo-aanpak-step:hover {
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.wooenzo-aanpak-step.accent-orange {
    border-bottom-color: var(--accent-orange);
}

.wooenzo-aanpak-step.accent-navy {
    border-bottom-color: var(--primary-navy);
}

.wooenzo-aanpak-step .step-number {
    color: var(--accent-orange);
    font-weight: 900;
    font-size: 1.875rem;
    margin-bottom: 1rem;
    opacity: 0.5;
    transition: opacity 0.3s;
}

.wooenzo-aanpak-step:hover .step-number {
    opacity: 1;
}

.wooenzo-aanpak-step h4 {
    color: var(--primary-navy);
    font-weight: 700;
    font-size: 1.0625rem;
    margin: 0 0 0.625rem;
}

/* Was 0.75rem in lichtgrijs en daardoor slecht leesbaar */
.wooenzo-aanpak-step p {
    color: var(--slate-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* ==========================================================================
   Sectie: Bezwaarprocedures
   ========================================================================== */

.wooenzo-section-bezwaar {
    padding: 6rem 0;
    background-color: white;
}

.wooenzo-section-bezwaar .card {
    background-color: var(--primary-navy);
    color: white;
    border-radius: 2px;
    overflow: hidden;
    display: flex;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.wooenzo-section-bezwaar .card-left {
    width: 50%;
    padding: 3rem 5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.wooenzo-section-bezwaar h2 {
    font-size: 1.875rem;
    margin: 0 0 1.5rem;
}

.wooenzo-section-bezwaar p {
    color: var(--slate-300);
    line-height: 1.75;
    margin: 0 0 2rem;
}

/* Oranje, net als elk ander accent — was hier als enige plek wit */
.wooenzo-section-bezwaar p .highlight {
    color: var(--accent-orange);
    font-weight: 600;
}

.wooenzo-section-bezwaar .feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: var(--accent-orange);
    font-weight: 700;
    font-style: italic;
}

.wooenzo-section-bezwaar .card-right {
    width: 50%;
    background-color: rgba(30, 41, 59, 0.5);
    padding: 3rem 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.wooenzo-section-bezwaar .card-right::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0.1;
    background: radial-gradient(circle at center, var(--accent-orange) 0%, transparent 70%);
}

.wooenzo-section-bezwaar .quote-content {
    text-align: center;
    position: relative;
    z-index: 10;
}

.wooenzo-section-bezwaar .quote-icon {
    color: var(--accent-orange);
    font-size: 5rem;
    margin-bottom: 1.5rem;
    display: block;
}

.wooenzo-section-bezwaar blockquote {
    font-size: 1.5rem;
    font-weight: 300;
    font-style: italic;
    line-height: 1.4;
    /* Nooit breder dan de beschikbare ruimte, anders overflow op mobiel */
    max-width: min(24rem, 100%);
    margin: 0;
}

.wooenzo-section-bezwaar blockquote .highlight {
    color: var(--accent-orange);
    font-weight: 600;
}

/* ==========================================================================
   Sectie: Over Woo&zo
   ========================================================================== */

/* Witte achtergrond, gelijk aan de andere secties */
.wooenzo-section-over {
    padding: 6rem 0;
    background-color: white;
}

.wooenzo-section-over .content {
    max-width: 48rem;
    margin: 0 auto;
    text-align: center;
}

.wooenzo-section-over h2 {
    font-size: 1.875rem;
    color: var(--primary-navy);
    margin: 0 0 2rem;
}

.wooenzo-section-over p {
    font-size: 1.125rem;
    color: var(--slate-600);
    line-height: 1.75;
    margin: 0 0 3rem;
}

.wooenzo-section-over p .highlight {
    color: var(--accent-orange);
    font-weight: 600;
}

/* Zonder de cijferblokken hoeft er onder de tekst geen ruimte te staan */
.wooenzo-section-over p.no-margin {
    margin-bottom: 0;
}

.wooenzo-section-over .stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

.wooenzo-section-over .stat {
    text-align: center;
}

.wooenzo-section-over .stat-value {
    font-size: 3rem;
    font-weight: 900;
    color: var(--primary-navy);
    margin-bottom: 0.5rem;
    transition: color 0.3s;
}

.wooenzo-section-over .stat:hover .stat-value {
    color: var(--accent-orange);
}

.wooenzo-section-over .stat-label {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
    color: var(--slate-500);
}

/* ==========================================================================
   Sectie: Contact & Intake
   ========================================================================== */

.wooenzo-section-contact {
    padding: 6rem 0;
    background-color: white;
    border-top: 1px solid var(--slate-200);
}

.wooenzo-section-contact .grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5rem;
}

.wooenzo-section-contact h2 {
    font-size: 1.875rem;
    color: var(--primary-navy);
    margin: 0 0 1.5rem;
}

.wooenzo-section-contact .intro {
    font-size: 1.125rem;
    color: var(--slate-600);
    line-height: 1.75;
    margin: 0 0 2.5rem;
}

.wooenzo-section-contact .contact-info {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.wooenzo-section-contact .contact-item {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.wooenzo-section-contact .contact-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background-color: var(--slate-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent-orange);
    flex-shrink: 0;
}

.wooenzo-section-contact .contact-text {
    color: var(--primary-navy);
    font-weight: 700;
    font-size: 1.25rem;
    text-decoration: none;
    transition: color 0.2s;
}

a.contact-text:hover {
    color: var(--accent-orange);
}

/* --- Formulier ----------------------------------------------------------- */

.wooenzo-section-contact .form-container {
    background-color: var(--primary-navy);
    padding: 2.5rem;
    border-radius: 2px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.contact-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
}

.contact-form label {
    display: block;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--slate-400);
    margin-bottom: 0.5rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--slate-700);
    border-radius: 2px;
    color: #fff;
    font-family: inherit;
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: var(--slate-500);
}

.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: var(--accent-orange);
    box-shadow: 0 0 0 2px rgba(245, 140, 33, 0.25);
}

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

.contact-form .field-error {
    display: none;
    font-size: 0.75rem;
    color: #fca5a5;
    margin-top: 0.375rem;
}

.contact-form .form-field.has-error .field-error {
    display: block;
}

.contact-form .form-field.has-error input,
.contact-form .form-field.has-error textarea {
    border-color: #ef4444;
}

.btn-submit {
    width: 100%;
    padding: 1.25rem 2rem;
    background-color: var(--accent-orange);
    color: #fff;
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: background-color 0.2s;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
}

.btn-submit:hover {
    background-color: var(--accent-orange-dark);
}

.btn-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.form-status {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--slate-300);
}

.form-status:empty {
    display: none;
}

.form-status.is-success {
    color: #86efac;
}

.form-status.is-error {
    color: #fca5a5;
}

/* Honeypot-veld onzichtbaar houden voor echte bezoekers */
.honeypot {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* ==========================================================================
   Footer
   ========================================================================== */

.wooenzo-footer {
    background-color: var(--primary-navy);
    padding: 4rem 0;
    color: var(--slate-400);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.wooenzo-footer .footer-inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 2.5rem;
}

.wooenzo-footer .footer-brand {
    display: flex;
    align-items: center;
}

.wooenzo-footer .logo {
    height: 2.25rem;
    width: auto;
    display: block;
}

.wooenzo-footer .tagline {
    margin-left: 1.5rem;
    padding-left: 1.5rem;
    border-left: 1px solid var(--slate-700);
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    color: var(--slate-500);
    line-height: 1.3;
}

.wooenzo-footer .links {
    display: flex;
    gap: 2.5rem;
}

.wooenzo-footer .links a {
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    font-weight: 700;
    color: var(--slate-400);
    text-decoration: none;
    transition: color 0.3s;
}

.wooenzo-footer .links a:hover {
    color: var(--accent-orange);
}

.wooenzo-footer .copyright {
    font-size: 0.625rem;
    font-weight: 500;
    letter-spacing: 0.05em;
    color: var(--slate-500);
}

/* ==========================================================================
   Responsive
   ========================================================================== */

@media (max-width: 1200px) {
    .wooenzo-nav .menu {
        gap: 1.25rem;
    }

    .wooenzo-nav .menu a {
        font-size: 0.8125rem;
    }
}

@media (max-width: 1024px) {
    /* Desktopmenu wisselt naar hamburger */
    .wooenzo-nav .menu,
    .wooenzo-nav .tagline {
        display: none;
    }

    .menu-toggle {
        display: block;
    }

    .wooenzo-hero {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .wooenzo-hero-bg-image {
        /* Achtergrondfoto als subtiele laag achter de tekst */
        width: 100%;
        opacity: 0.12;
        clip-path: none;
    }

    .wooenzo-hero-scrim {
        display: none;
    }

    .wooenzo-hero-content {
        max-width: none;
    }

    .wooenzo-section-woo .intro {
        margin-bottom: 2.5rem;
    }

    .wooenzo-hero h1 {
        font-size: 2.25rem;
    }

    .wooenzo-section-woo .grid,
    .wooenzo-section-contact .grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .wooenzo-section-aanpak .steps-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .wooenzo-section-bezwaar .card {
        flex-direction: column;
    }

    .wooenzo-section-bezwaar .card-left {
        width: 100%;
        padding: 3rem 2rem;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .wooenzo-section-bezwaar .card-right {
        width: 100%;
        padding: 4rem 2rem;
    }

    .wooenzo-footer .footer-inner {
        flex-direction: column;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .wooenzo-hero,
    .wooenzo-section-woo,
    .wooenzo-section-aanpak,
    .wooenzo-section-bezwaar,
    .wooenzo-section-over,
    .wooenzo-section-contact {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .wooenzo-section-aanpak .header {
        margin-bottom: 3rem;
    }

    .wooenzo-section-aanpak .steps-grid,
    .wooenzo-section-over .stats,
    .form-row {
        grid-template-columns: 1fr;
    }

    .wooenzo-section-over .stats {
        gap: 2rem;
    }

    .wooenzo-section-woo .block,
    .wooenzo-section-contact .form-container {
        padding: 2rem 1.5rem;
    }

    .wooenzo-hero h1 {
        font-size: 2rem;
    }

    .wooenzo-footer .links {
        flex-direction: column;
        gap: 1rem;
    }

    .wooenzo-footer .footer-brand {
        flex-direction: column;
        gap: 1rem;
    }

    .wooenzo-footer .tagline {
        margin-left: 0;
        padding-left: 0;
        border-left: none;
    }
}

/* Respecteer de systeemvoorkeur voor minder beweging */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    * {
        transition-duration: 0.01ms !important;
    }
}