/*!
 * DWiA Theme Main Styles - WITH CAROUSEL & GALLERY
 * Complete stylesheet with photo carousel and gallery functionality
 * Part 1: Variables, Base Styles, Typography, Layout, Header
 */

/* ==========================================================================
   CSS VARIABLES & BASE STYLES
   ========================================================================== */

:root {
    /* ===== GLOBAL BASE COLORS ===== */
        --dwia-white: #FFFFFF;
        --dwia-black: #101010;
        
        /* ===== HEADER SECTION ===== */
        --header-background: #DBD2C7;              /* Header background (cream) */
        --header-nav-text: #D05038;                /* Burnt orange nav text */
        --header-nav-text-hover: #101010;          /* Dark hover state */
        --header-logo-text: #D05038;               /* Burnt orange logo */
        --header-border: rgba(208, 80, 56, 0.2);   /* Subtle orange border */
        --header-lang-switcher-bg: #A8A8B8;        /* Lavender-grey switcher bg */
        --header-lang-switcher-active: #FFFFFF;    /* White active state */
        
        /* ===== HERO/CAROUSEL SECTION ===== */
        --hero-background: #DBD2C7;                /* Home section background (matching header) */
        --hero-title-text: #101010;                /* Near-black title */
        --hero-subtitle-text: #D05038;             /* Burnt orange subtitle */
        --hero-body-text: #201810;                 /* Dark brown body text */
        --hero-btn-primary-bg: #D05038;            /* Burnt orange primary button */
        --hero-btn-primary-text: #FFFFFF;          /* White button text */
        --hero-btn-primary-hover: #101010;         /* Dark hover state */
        --hero-btn-secondary-bg: #FFFFFF;          /* White secondary button */
        --hero-btn-secondary-text: #D05038;        /* Burnt orange text */
        --hero-btn-secondary-hover: #A8A8B8;       /* Lavender hover */
        --hero-carousel-nav-bg: rgba(255, 255, 255, 0.9);  /* White nav buttons */
        --hero-carousel-nav-icon: #D05038;         /* Burnt orange icons */
        --hero-carousel-dots: rgba(208, 80, 56, 0.5);      /* Semi-transparent orange */
        --hero-carousel-dots-active: #D05038;      /* Solid burnt orange */
        
        /* ===== ABOUT SECTION ===== */
        --about-background: #ADABBF;               /* About Us section background */
        --about-title-text: #101010;               /* Near-black title */
        --about-body-text: #201810;                /* Dark brown body text */
        --about-accent-line: #D05038;              /* Burnt orange accent */
        
        /* ===== GALLERY SECTION ===== */
        --gallery-background: #D8A696;             /* Photo Gallery background */
        --gallery-title-text: #101010;             /* Near-black title */
        --gallery-body-text: #201810;              /* Dark brown body text */
        --gallery-card-bg: #FFFFFF;                /* White card background */
        --gallery-card-border: #D8D0C0;            /* Beige border */
        --gallery-card-shadow: rgba(16, 16, 16, 0.1);  /* Subtle shadow */
        --gallery-overlay-bg: rgba(208, 80, 56, 0.85);  /* Burnt orange overlay */
        --gallery-caption-bg: #FFFFFF;             /* White caption */
        --gallery-caption-text: #201810;           /* Dark brown text */
        --gallery-lightbox-bg: rgba(16, 16, 16, 0.95);  /* Dark lightbox */
        --gallery-lightbox-controls: rgba(255, 255, 255, 0.9);  /* White controls */
        
        /* ===== OUTCOMES SECTION ===== */
        --outcomes-background: #ADABBF;            /* Our Work section background */
        --outcomes-title-text: #101010;            /* Near-black title */
        --outcomes-body-text: #201810;             /* Dark brown body text */
        --outcomes-card-bg: #FFFFFF;               /* White card background */
        --outcomes-card-border: #D8D0C0;           /* Beige border */
        --outcomes-card-hover-border: #D05038;     /* Burnt orange hover */
        --outcomes-tab-bg: #FFFFFF;                /* White tab background */
        --outcomes-tab-text: #201810;              /* Dark brown text */
        --outcomes-tab-border: #8088B8;            /* Muted purple border */
        --outcomes-tab-active-bg: #D05038;         /* Burnt orange active */
        --outcomes-tab-active-text: #FFFFFF;       /* White active text */
        --outcomes-featured-badge-bg: #D05038;     /* Burnt orange badge */
        --outcomes-featured-badge-text: #FFFFFF;   /* White badge text */
        --outcomes-topic-chip-bg: #D8A090;         /* Salmon chip background */
        --outcomes-topic-chip-text: #201810;       /* Dark brown text */
        --outcomes-topic-chip-hover-bg: #8088B8;   /* Muted purple hover */
        --outcomes-topic-chip-hover-text: #FFFFFF; /* White hover text */
        --outcomes-filter-input-bg: #FFFFFF;       /* White input */
        --outcomes-filter-input-border: #D8D0C0;   /* Beige border */
        --outcomes-filter-input-text: #201810;     /* Dark brown text */
        
        /* ===== NEWSLETTER SECTION ===== */
        --newsletter-background: #7C988E;          /* Newsletter background */
        --newsletter-title-text: #FFFFFF;          /* White title */
        --newsletter-body-text: #FFFFFF;           /* White body text */
        --newsletter-form-border: rgba(255, 255, 255, 0.3);  /* Semi-transparent white */
        --newsletter-label-text: #FFFFFF;          /* White labels */
        --newsletter-input-bg: #FFFFFF;            /* White input background */
        --newsletter-input-text: #201810;          /* Dark brown input text */
        --newsletter-input-border: rgba(255, 255, 255, 0.8);  /* White border */
        --newsletter-btn-bg: #FFFFFF;              /* White button */
        --newsletter-btn-text: #789888;            /* Sage/teal button text */
        --newsletter-btn-hover-bg: #D8D0C0;        /* Beige hover */
        --newsletter-checkbox-accent: #FFFFFF;     /* White checkbox */
        --newsletter-success-bg: rgba(255, 255, 255, 0.2);  /* Success background */
        --newsletter-success-text: #206058;        /* Deep teal success */
        --newsletter-error-bg: rgba(255, 255, 255, 0.2);    /* Error background */
        --newsletter-error-text: #D05038;          /* Burnt orange error */
        
        /* ===== CONTACT SECTION ===== */
        --contact-background: #FFFFFF;             /* White background */
        --contact-title-text: #101010;             /* Near-black title */
        --contact-body-text: #201810;              /* Dark brown body */
        --contact-info-bg: #A8A8B8;                /* Lavender-grey info card */
        --contact-info-border: #8088B8;            /* Muted purple border */
        --contact-feature-icon-bg: linear-gradient(135deg, #D05038 0%, #101010 100%);  /* Orange to dark gradient */
        --contact-feature-title: #101010;          /* Near-black title */
        --contact-feature-text: #201810;           /* Dark brown text */
        --contact-form-bg: #FFFFFF;                /* White form background */
        --contact-form-border: #D8D0C0;            /* Beige border */
        --contact-form-accent-bar: linear-gradient(90deg, #D05038 0%, #8088B8 50%, #D05038 100%);  /* Orange-purple gradient */
        --contact-label-text: #201810;             /* Dark brown labels */
        --contact-input-bg: #D8D0C0;               /* Beige input background */
        --contact-input-border: #8088B8;           /* Muted purple border */
        --contact-input-text: #201810;             /* Dark brown text */
        --contact-input-focus-border: #D05038;     /* Burnt orange focus */
        --contact-input-focus-shadow: rgba(208, 80, 56, 0.1);  /* Orange shadow */
        --contact-btn-bg: linear-gradient(135deg, #D05038 0%, #101010 100%);  /* Orange to dark gradient */
        --contact-btn-text: #FFFFFF;               /* White button text */
        --contact-btn-hover-shadow: rgba(208, 80, 56, 0.3);  /* Orange shadow */
        --contact-success-bg: rgba(32, 96, 88, 0.1);     /* Teal success bg */
        --contact-success-text: #206058;           /* Deep teal text */
        --contact-success-border: rgba(32, 96, 88, 0.3); /* Teal border */
        --contact-error-bg: rgba(208, 80, 56, 0.1);      /* Orange error bg */
        --contact-error-text: #D05038;             /* Burnt orange text */
        --contact-error-border: rgba(208, 80, 56, 0.3);  /* Orange border */
        
        /* ===== FOOTER SECTION ===== */
        --footer-background: #DBD2C7;              /* Footer background */
        --footer-title-text: #FFFFFF;              /* White titles */
        --footer-body-text: rgba(255, 255, 255, 0.8);  /* Semi-transparent white */
        --footer-link-text: rgba(255, 255, 255, 0.8);  /* Semi-transparent white links */
        --footer-link-hover: #FFFFFF;              /* White hover */
        --footer-cta-bg: #D05038;                  /* Burnt orange CTA */
        --footer-cta-text: #FFFFFF;                /* White CTA text */
        --footer-cta-hover-bg: #789888;            /* Sage/teal hover */
        --footer-social-bg: rgba(255, 255, 255, 0.1);  /* Semi-transparent white */
        --footer-social-border: rgba(255, 255, 255, 0.2);  /* Border */
        --footer-social-hover-bg: #D05038;         /* Burnt orange hover */
        --footer-divider: rgba(255, 255, 255, 0.2);    /* Divider line */
        --footer-copyright-text: rgba(255, 255, 255, 0.7);  /* Copyright text */
        
        /* ===== MODAL/OVERLAY COMPONENTS ===== */
        --modal-overlay-bg: rgba(16, 16, 16, 0.8);     /* Dark overlay */
        --modal-content-bg: #FFFFFF;               /* White content */
        --modal-header-bg: #FFFFFF;                /* White header */
        --modal-header-border: #D8D0C0;            /* Beige border */
        --modal-title-text: #101010;               /* Near-black title */
        --modal-body-text: #201810;                /* Dark brown body */
        --modal-close-bg: #D8D0C0;                 /* Beige close button */
        --modal-close-icon: #201810;               /* Dark brown icon */
        --modal-close-hover-bg: #A8A8B8;           /* Lavender hover */
        --modal-btn-primary-bg: #D05038;           /* Burnt orange primary */
        --modal-btn-primary-text: #FFFFFF;         /* White text */
        --modal-btn-secondary-bg: #D8D0C0;         /* Beige secondary */
        --modal-btn-secondary-text: #201810;       /* Dark brown text */
        --modal-meta-bg: #D8A090;                  /* Salmon meta background */
        --modal-meta-text: #201810;                /* Dark brown text */
        --modal-topic-bg: linear-gradient(135deg, #8088B8 0%, #D05038 100%);  /* Purple to orange */
        --modal-topic-text: #FFFFFF;               /* White text */
        --modal-section-title: #D05038;            /* Burnt orange section title */
        --modal-section-border: #D8D0C0;           /* Beige border */
        
        /* ===== BUTTONS & INTERACTIVE ELEMENTS ===== */
        --btn-primary-bg: #D05038;                 /* Burnt orange */
        --btn-primary-text: #FFFFFF;               /* White text */
        --btn-primary-border: #D05038;             /* Orange border */
        --btn-primary-hover-bg: #101010;           /* Dark hover */
        --btn-primary-shadow: rgba(208, 80, 56, 0.3);  /* Orange shadow */
        --btn-secondary-bg: #FFFFFF;               /* White background */
        --btn-secondary-text: #D05038;             /* Burnt orange text */
        --btn-secondary-border: #D05038;           /* Orange border */
        --btn-secondary-hover-bg: #D8D0C0;         /* Beige hover */
        --btn-link-text: #D05038;                  /* Burnt orange link */
        --btn-link-hover: #101010;                 /* Dark hover */
        
        /* ===== FORMS & INPUTS (Global) ===== */
        --input-bg: #FFFFFF;                       /* White background */
        --input-border: #D8D0C0;                   /* Beige border */
        --input-text: #201810;                     /* Dark brown text */
        --input-placeholder: #8088B8;              /* Muted purple placeholder */
        --input-focus-border: #D05038;             /* Burnt orange focus */
        --input-focus-shadow: rgba(208, 80, 56, 0.1);  /* Orange shadow */
        --input-error-border: #D05038;             /* Burnt orange error */
        --input-error-text: #D05038;               /* Burnt orange text */
        
        /* ===== STATUS COLORS (Global) ===== */
        --status-success: #206058;                 /* Deep teal */
        --status-error: #D05038;                   /* Burnt orange */
        --status-warning: #D8A090;                 /* Salmon */
        --status-info: #8088B8;                    /* Muted purple */

        /* ===== ADDITIONAL VARIABLES ===== */
        /* Provide missing variables referenced later in the stylesheet.  These
           values align with the existing palette and ensure that references
           such as --dwia-text, --dwia-gray-500 and --dwia-secondary resolve
           correctly. */
        --dwia-text: #201810;                     /* Default body text colour */
        --dwia-gray-500: #4C7C70;                 /* Mid‑tone neutral between gray‑400 and gray‑600 */
        --dwia-secondary: #8088B8;                /* Secondary accent colour */
        
        /* ===== TOAST NOTIFICATIONS ===== */
        --toast-bg: #D05038;                       /* Burnt orange */
        --toast-text: #FFFFFF;                     /* White text */
        --toast-shadow: rgba(16, 16, 16, 0.2);     /* Dark shadow */
        
        /* ===== LOADING & EMPTY STATES ===== */
        --loading-spinner-track: #D8D0C0;          /* Beige track */
        --loading-spinner-fill: #D05038;           /* Burnt orange fill */
        --empty-state-text: #201810;               /* Dark brown text */
        --empty-state-icon: #8088B8;               /* Muted purple icon */
        
        /* ===== COOKIE BANNER ===== */
        --cookie-bg: #206058;                      /* Deep teal */
        --cookie-text: #FFFFFF;                    /* White text */
        --cookie-link: rgba(255, 255, 255, 0.8);   /* Semi-transparent white */
        --cookie-btn-bg: #D05038;                  /* Burnt orange button */
        --cookie-btn-text: #FFFFFF;                /* White text */
        --cookie-shadow: rgba(16, 16, 16, 0.1);    /* Dark shadow */
        
        /* ===== POLICY MODAL ===== */
        --policy-modal-overlay: rgba(16, 16, 16, 0.75);  /* Dark overlay */
        --policy-modal-bg: #FFFFFF;                /* White background */
        --policy-modal-title: #D05038;             /* Burnt orange title */
        --policy-modal-text: #201810;              /* Dark brown text */
        --policy-modal-header-bg: #D8D0C0;         /* Beige header */
        --policy-modal-close: #201810;             /* Dark brown close */
        --policy-modal-close-hover: #D05038;       /* Burnt orange hover */
        --policy-link-text: #D05038;               /* Burnt orange links */
        --policy-link-hover: #101010;              /* Dark hover */
        
        /* Keep existing spacing, typography, shadows, etc. */
        --dwia-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
        --dwia-font-size-xs: 0.75rem;
        --dwia-font-size-sm: 0.875rem;
        --dwia-font-size-base: 1rem;
        --dwia-font-size-lg: 1.125rem;
        --dwia-font-size-xl: 1.25rem;
        --dwia-font-size-2xl: 1.5rem;
        --dwia-font-size-3xl: 1.875rem;
        --dwia-font-size-4xl: 2.25rem;
        --dwia-space-1: 0.25rem;
        --dwia-space-2: 0.5rem;
        --dwia-space-3: 0.75rem;
        --dwia-space-4: 1rem;
        --dwia-space-5: 1.25rem;
        --dwia-space-6: 1.5rem;
        --dwia-space-8: 2rem;
        --dwia-space-10: 2.5rem;
        --dwia-space-12: 3rem;
        --dwia-space-16: 4rem;
        --dwia-space-20: 5rem;
        --dwia-radius-sm: 0.375rem;
        --dwia-radius: 0.5rem;
        --dwia-radius-md: 0.75rem;
        --dwia-radius-lg: 1rem;
        --dwia-radius-xl: 1.5rem;
        --dwia-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --dwia-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
        --dwia-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
        --dwia-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
        --dwia-container-max-width: 1200px;
        --dwia-z-dropdown: 1000;
        --dwia-z-sticky: 1020;
        --dwia-z-fixed: 1030;
        --dwia-z-modal-backdrop: 1040;
        --dwia-z-modal: 1050;
        --dwia-z-popover: 1060;
        --dwia-z-tooltip: 1070;
        --dwia-z-toast: 1080;

      
}

    /* ==========================================================================
    USAGE GUIDE - How to Apply These Colors
    ========================================================================== */


    /*
    HEADER SECTION:
    ----------------*/
    .dwia-header { background: var(--header-background); }
    .dwia-site-title a { color: var(--header-logo-text); }
    .dwia-nav a { color: var(--header-nav-text); }
    .dwia-nav a:hover { color: var(--header-nav-text-hover); }
    .dwia-language-switcher { background: var(--header-lang-switcher-bg); }

    /*HERO SECTION:
    -------------*/
    .dwia-carousel-slide { background-color: var(--hero-background); }
    .dwia-carousel-content h1 { color: var(--hero-title-text); }
    .dwia-carousel-content .dwia-hero-subtitle { color: var(--hero-subtitle-text); }
    .dwia-carousel-content p { color: var(--hero-body-text); }
    .dwia-btn { background: var(--hero-btn-primary-bg); color: var(--hero-btn-primary-text); }
    .dwia-btn:hover { background: var(--hero-btn-primary-hover); }

    /*ABOUT SECTION:
    --------------*/
    .dwia-about { background: var(--about-background); }
    .dwia-about h2 { color: var(--about-title-text); }
    .dwia-about p { color: var(--about-body-text); }

    /*GALLERY SECTION:
    ----------------*/
    .dwia-gallery-section { background: var(--gallery-background); }
    .dwia-gallery-header h2 { color: var(--gallery-title-text); }
    .dwia-gallery-item { background: var(--gallery-card-bg); }
    .dwia-gallery-overlay { background: var(--gallery-overlay-bg); }

    /*OUTCOMES SECTION:
    -----------------*/
    .dwia-outcomes-section { background: var(--outcomes-background); }
    .dwia-outcomes-header h2 { color: var(--outcomes-title-text); }
    .dwia-tab-btn { background: var(--outcomes-tab-bg); color: var(--outcomes-tab-text); }
    .dwia-tab-btn.active { background: var(--outcomes-tab-active-bg); color: var(--outcomes-tab-active-text); }
    .dwia-featured-badge { background: var(--outcomes-featured-badge-bg); }

    /*NEWSLETTER SECTION:
    -------------------*/
    .dwia-newsletter { background: var(--newsletter-background) !important; }
    .dwia-newsletter h2 { color: var(--newsletter-title-text); }
    .dwia-newsletter input { background: var(--newsletter-input-bg); color: var(--newsletter-input-text); }
    .dwia-newsletter #mc-embedded-subscribe { background: var(--newsletter-btn-bg) !important; color: var(--newsletter-btn-text) !important; }

    /*CONTACT SECTION:
    ----------------*/
    .dwia-contact { background: var(--contact-background); }
    .dwia-contact h2 { color: var(--contact-title-text); }
    .dwia-contact-info { background: var(--contact-info-bg); }
    .dwia-feature-icon { background: var(--contact-feature-icon-bg); }
    .dwia-contact-form { background: var(--contact-form-bg); }
    .dwia-form-group input { background: var(--contact-input-bg); border-color: var(--contact-input-border); }

    /*FOOTER SECTION:
    ---------------*/
    .dwia-footer { background: var(--footer-background); }
    .dwia-footer h3 { color: var(--footer-title-text); }
    .dwia-footer p { color: var(--footer-body-text); }
    .dwia-footer-cta { background: var(--footer-cta-bg); color: var(--footer-cta-text); }
    .dwia-social-link:hover { background: var(--footer-social-hover-bg); }

    /*MODALS:
    -------*/
    .dwia-modal-overlay { background: var(--modal-overlay-bg); }
    .dwia-modal-content { background: var(--modal-content-bg); }
    .dwia-modal-title { color: var(--modal-title-text); }
    .dwia-modal-close { background: var(--modal-close-bg); color: var(--modal-close-icon); }

    /*BUTTONS:
    --------*/
    .dwia-btn { background: var(--btn-primary-bg); color: var(--btn-primary-text); }
    .dwia-btn:hover { background: var(--btn-primary-hover-bg); }
    .dwia-btn-secondary { background: var(--btn-secondary-bg); color: var(--btn-secondary-text); }

    /*STATUS MESSAGES:
    ----------------*/
    .success { color: var(--status-success); }
    .error { color: var(--status-error); }
    .warning { color: var(--status-warning); }
    .info { color: var(--status-info); }
    
    


/* ==========================================================================
   RESET & BASE STYLES
   ========================================================================== */

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

html {
    scroll-behavior: smooth;
    line-height: 1.15;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--dwia-font-family);
    font-size: var(--dwia-font-size-base);
    line-height: 1.6;
    color: var(--dwia-gray-800);
    background-color: var(--dwia-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Remove default WordPress margins */
.wp-block-group,
.entry-content {
    margin: 0 !important;
}

/* ==========================================================================
   TYPOGRAPHY
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
    margin-bottom: var(--dwia-space-4);
    font-weight: 600;
    line-height: 1.2;
    color: var(--dwia-gray-900);
}

h1 { font-size: var(--dwia-font-size-4xl); }
h2 { font-size: var(--dwia-font-size-3xl); }
h3 { font-size: var(--dwia-font-size-2xl); }
h4 { font-size: var(--dwia-font-size-xl); }
h5 { font-size: var(--dwia-font-size-lg); }
h6 { font-size: var(--dwia-font-size-base); }

p {
    margin-bottom: var(--dwia-space-4);
    line-height: 1.7;
}

a {
    color: var(--dwia-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover,
a:focus {
    color: var(--dwia-primary-dark);
    text-decoration: underline;
}

/* ==========================================================================
   LAYOUT FOUNDATIONS
   ========================================================================== */

.dwia-container {
    max-width: var(--dwia-container-max-width);
    margin: 0 auto;
    padding: 0 var(--dwia-space-5);
}

@media (min-width: 768px) {
    .dwia-container {
        padding: 0 var(--dwia-space-8);
    }
}

/* Screen reader text */
.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute !important;
    width: 1px;
    word-wrap: normal !important;
}

.skip-link {
    position: absolute;
    left: -9999px;
    z-index: 999999;
    padding: 8px 16px;
    text-decoration: none;
    background: var(--dwia-gray-900);
    color: var(--dwia-white);
}

.skip-link:focus {
    left: 6px;
    top: 7px;
}

/* ==========================================================================
   HEADER STYLES
   ========================================================================== */

.dwia-header {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px); /* Safari support */
    border-bottom: 1px solid rgba(226, 232, 240, 0.8);
    padding: var(--dwia-space-5) 0;
    position: sticky !important;
    position: -webkit-sticky !important; /* Safari support */
    top: 0 !important;
    z-index: var(--dwia-z-sticky);
    transition: all 0.3s ease;
    width: 100%;
}

.dwia-header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--dwia-space-4);
}

/* Logo Section */
.dwia-logo-section {
    display: flex;
    align-items: center;
    gap: var(--dwia-space-4);
}

.dwia-logo a {
    display: block;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.dwia-logo a:hover {
    transform: scale(1.05);
}

.dwia-logo-placeholder {
    display: flex;
    align-items: center;
    gap: var(--dwia-space-2);
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%);
    color: var(--dwia-white);
    padding: var(--dwia-space-3) var(--dwia-space-4);
    border-radius: var(--dwia-radius-md);
    font-weight: 700;
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
    min-width: 70px;
    justify-content: center;
}

.dwia-logo-icon {
    font-size: var(--dwia-font-size-2xl);
}

.dwia-logo-text {
    font-size: var(--dwia-font-size-xl);
    letter-spacing: 0.5px;
}

.dwia-site-title {
    margin: 0;
    font-size: var(--dwia-font-size-xl);
    font-weight: 600;
}

.dwia-site-title a {
    color: var(--dwia-gray-900);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dwia-site-title a:hover {
    color: var(--dwia-primary);
    text-decoration: none;
}

/* Navigation */
.dwia-nav ul,
.dwia-nav-menu {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: var(--dwia-space-8);
}

.dwia-nav a {
    color: var(--dwia-gray-800);
    text-decoration: none;
    font-weight: 500;
    font-size: var(--dwia-font-size-base);
    transition: color 0.2s ease;
    padding: var(--dwia-space-2) 0;
}

.dwia-nav a:hover,
.dwia-nav a:focus {
    color: var(--dwia-primary);
    text-decoration: none;
}

/* Mobile Menu Toggle */
.dwia-mobile-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--dwia-space-2);
}

.dwia-hamburger {
    display: flex;
    flex-direction: column;
    width: 24px;
    height: 18px;
    justify-content: space-between;
}

.dwia-hamburger span {
    display: block;
    height: 2px;
    background: var(--dwia-gray-800);
    transition: all 0.3s ease;
}

/* Language Switcher */
.dwia-language-switcher {
    display: flex;
    gap: var(--dwia-space-2);
    background: var(--dwia-gray-100);
    padding: var(--dwia-space-1);
    border-radius: var(--dwia-radius);
}

.dwia-lang-toggle {
    background: none;
    border: none;
    padding: var(--dwia-space-2) var(--dwia-space-3);
    border-radius: var(--dwia-radius-sm);
    font-size: var(--dwia-font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--dwia-gray-700);
}

.dwia-lang-toggle.active,
.dwia-lang-toggle:hover {
    background: var(--dwia-white);
    color: var(--dwia-primary);
    box-shadow: var(--dwia-shadow-sm);
}

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

.dwia-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--dwia-primary);
    color: var(--dwia-white);
    padding: var(--dwia-space-3) var(--dwia-space-6);
    text-decoration: none;
    border-radius: var(--dwia-radius);
    font-weight: 500;
    font-size: var(--dwia-font-size-base);
    transition: all 0.2s ease;
    border: 1px solid var(--dwia-primary);
    cursor: pointer;
    min-height: 44px; /* Touch target size */
}

.dwia-btn:hover,
.dwia-btn:focus {
    background: var(--dwia-primary-dark);
    color: var(--dwia-white);
    text-decoration: none;
    transform: translateY(-1px);
    box-shadow: var(--dwia-shadow);
}

.dwia-btn-secondary {
    background: var(--dwia-white);
    color: var(--dwia-primary);
    border: 1px solid var(--dwia-primary);
}

.dwia-btn-secondary:hover,
.dwia-btn-secondary:focus {
    background: var(--dwia-gray-50);
    color: var(--dwia-primary-dark);
}

.dwia-btn-large {
    padding: var(--dwia-space-4) var(--dwia-space-8);
    font-size: var(--dwia-font-size-lg);
}

/* ==========================================================================
   ALTERNATING SECTION BACKGROUNDS - FIXED OPTION 1
   ========================================================================== */

/* About Section - Light Background (1st content section) */
.dwia-about {
    background: var(--dwia-section-bg); /* Light cream/orange tint */
    padding: var(--dwia-space-20) 0;
    text-align: center;
}

.dwia-about h2 {
    font-size: 1.8rem;
    margin-bottom: var(--dwia-space-10);
    color: #FFFFFF;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.2em;
    text-align: center;
}

.dwia-about p {
    font-size: var(--dwia-font-size-lg);
    max-width: 800px;
    margin: 0 auto var(--dwia-space-5);
    color: var(--dwia-gray-700);
}

/* Gallery Section - Custom Background (2nd content section) */
.dwia-gallery-section {
    /* Use the gallery-background variable instead of the global white so that the colour can be customised */
    background: var(--gallery-background);
    padding: var(--dwia-space-20) 0;
}

/* Outcomes Section - Light Background (3rd content section) */
.dwia-outcomes-section {
    background: var(--dwia-section-bg); /* Same as About - alternating pattern */
    padding: var(--dwia-space-20) 0;
}

/* Newsletter Section - Primary Brand Color (4th content section) */
.dwia-newsletter {
    /* Use the newsletter-background variable instead of the primary brand colour */
    background: var(--newsletter-background);
    color: var(--newsletter-title-text);
    padding: var(--dwia-space-20) 0;
    text-align: center;
}

/* Contact Section - White Background (5th content section) */
.dwia-contact {
    background: var(--dwia-white); /* White to alternate from blue newsletter */
    padding: var(--dwia-space-20) 0;
}

/* Optional: Add subtle visual separation between sections */
.dwia-about,
.dwia-gallery-section,
.dwia-outcomes-section,
.dwia-newsletter,
.dwia-contact {
    position: relative;
}

/* Subtle border between alternating sections for extra definition */
.dwia-about::after,
.dwia-outcomes-section::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--dwia-primary), transparent);
    opacity: 0.3;
}

/* ==========================================================================
   HERO CAROUSEL STYLES - FIXED TO SHOW BACKGROUND IMAGES
   ========================================================================== */

.dwia-hero-carousel {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
}

.dwia-carousel-container {
    position: relative;
    width: 100%;
    height: 100%;
}

.dwia-carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.dwia-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

.dwia-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center 25% !important;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.8s ease-in-out;
    transform: scale(1.05);
}

/* Alternative: Add this class to slides that need better fit */
.dwia-carousel-slide.dwia-fit-image {
    background-size: contain;
    background-color: rgba(0, 0, 0, 0.15);
}

.dwia-carousel-slide.active {
    opacity: 1;
    visibility: visible;
    transform: scale(1);
}

/* FIXED: Remove the color overlay completely or make it very subtle */
.dwia-carousel-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* REMOVED: Heavy color overlay that was hiding images */
    /* background: linear-gradient(135deg, rgba(139, 92, 246, 0.7) 0%, rgba(124, 58, 237, 0.8) 100%); */
    
    /* OPTION 1: Completely transparent - shows photos clearly */
    background: transparent;
    
    /* OPTION 2: Very subtle dark overlay for text readability (uncomment if needed) */
    /* background: rgba(0, 0, 0, 0.2); */
    
    /* OPTION 3: Subtle gradient overlay for text readability (uncomment if needed) */
    /* background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.3) 100%); */
}

.dwia-carousel-content {
    position: relative;
    z-index: 10;
    text-align: center;
    color: var(--dwia-white);
    max-width: 800px;
    animation: slideInUp 0.8s ease-out 0.3s both;
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.dwia-carousel-content h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-white);
    text-shadow: 0 3px 6px rgba(0, 0, 0, 0.8);
    font-weight: 700;
}

.dwia-carousel-content .dwia-hero-subtitle {
    font-size: var(--dwia-font-size-2xl);
    margin-bottom: var(--dwia-space-5);
    opacity: 0.95;
    font-weight: 400;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.dwia-carousel-content p {
    font-size: var(--dwia-font-size-lg);
    margin-bottom: var(--dwia-space-10);
    opacity: 0.9;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.6);
}

.dwia-hero-actions {
    display: flex;
    gap: var(--dwia-space-5);
    justify-content: center;
    flex-wrap: wrap;
}

/* Enhanced button styling for better visibility over photos */
.dwia-hero-actions .dwia-btn {
    backdrop-filter: blur(10px);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.dwia-hero-actions .dwia-btn:hover {
    backdrop-filter: blur(15px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px);
}

/* Carousel Navigation */
.dwia-carousel-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    color: var(--dwia-gray-800);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.dwia-carousel-btn:hover {
    background: var(--dwia-white);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.dwia-carousel-prev {
    left: var(--dwia-space-8);
}

.dwia-carousel-next {
    right: var(--dwia-space-8);
}

.dwia-carousel-dots {
    position: absolute;
    bottom: var(--dwia-space-8);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--dwia-space-3);
    z-index: 20;
}

.dwia-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.8);
    background: transparent;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(5px);
}

.dwia-carousel-dot.active,
.dwia-carousel-dot:hover {
    background: var(--dwia-white);
    border-color: var(--dwia-white);
    transform: scale(1.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   OPTIONAL: Advanced Image Positioning
   ========================================================================== */

/* Add these classes to specific carousel slides if needed */
.dwia-carousel-slide.focus-top {
    background-position: center top;
}

.dwia-carousel-slide.focus-bottom {
    background-position: center bottom;
}

.dwia-carousel-slide.focus-left {
    background-position: left center;
}

.dwia-carousel-slide.focus-right {
    background-position: right center;
}

/* Add these classes to specific gallery items if needed */
.dwia-gallery-item.focus-faces img {
    object-position: center 20%; /* Better for portraits */
}

.dwia-gallery-item.focus-center img {
    object-position: center center;
}

.dwia-gallery-item.focus-bottom img {
    object-position: center 80%;
}

/* ==========================================================================
   GALLERY SECTION STYLES
   ========================================================================== */

.dwia-gallery-header {
    text-align: center;
    margin-bottom: var(--dwia-space-16);
}

.dwia-gallery-header h2 {
    font-size: var(--dwia-font-size-3xl);
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-gray-900);
}

.dwia-gallery-header p {
    font-size: var(--dwia-font-size-lg);
    max-width: 600px;
    margin: 0 auto;
    color: var(--dwia-gray-600);
}

.dwia-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--dwia-space-6);
    margin-bottom: var(--dwia-space-10);
}

.dwia-gallery-item {
    background: var(--dwia-white);
    border-radius: var(--dwia-radius-lg);
    overflow: hidden;
    box-shadow: var(--dwia-shadow);
    transition: all 0.3s ease;
    cursor: pointer;
}

.dwia-gallery-item:hover {
    transform: translateY(-8px);
    box-shadow: var(--dwia-shadow-xl);
}

/* Gallery Grid Thumbnails - Better Cropping */
.dwia-gallery-image {
    position: relative;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.dwia-gallery-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20% !important;
    transition: transform 0.3s ease;
}

/* Keep hover effect but prevent over-scaling */
.dwia-gallery-item:hover .dwia-gallery-image img {
    transform: scale(1.03); /* Reduced from 1.05 to prevent cropping */
}

.dwia-gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(139, 92, 246, 0.8) 0%,
        rgba(124, 58, 237, 0.9) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.dwia-gallery-item:hover .dwia-gallery-overlay {
    opacity: 1;
}

.dwia-gallery-view-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid var(--dwia-white);
    color: var(--dwia-white);
    padding: var(--dwia-space-4) var(--dwia-space-6);
    border-radius: var(--dwia-radius-xl);
    display: flex;
    align-items: center;
    gap: var(--dwia-space-2);
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    backdrop-filter: blur(10px);
}

.dwia-gallery-view-btn:hover {
    background: var(--dwia-white);
    color: var(--dwia-primary);
    transform: scale(1.05);
}

.dwia-gallery-caption {
    padding: var(--dwia-space-5);
    background: var(--dwia-white);
}

.dwia-gallery-caption p {
    margin: 0;
    color: var(--dwia-gray-700);
    font-size: var(--dwia-font-size-base);
    line-height: 1.5;
}

/* Gallery Lightbox Modal */
.dwia-gallery-lightbox {
    background: #d8a696; /* Brown/beige background per specification */
}

.dwia-gallery-lightbox .dwia-modal-overlay {
    background: #d8a696; /* Brown/beige background per specification */
}

.dwia-gallery-modal-content {
    position: relative;
    width: 100vw !important;
    height: 100vh !important;
    max-width: none !important;
    max-height: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    overflow: visible !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Gallery Modal - Image and Caption Fit in Viewport - LARGE PHOTOS */
.dwia-gallery-modal-image {
    position: relative;
    width: 100% !important;
    flex: 0 0 auto !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 20px 20px 10px !important;
    box-sizing: border-box !important;
}

.dwia-gallery-modal-image img {
    max-width: 98vw !important;
    max-height: calc(100vh - 120px) !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center !important;
    border-radius: var(--dwia-radius-lg);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.3);
    background: transparent;
}

.dwia-gallery-modal-info {
    background: rgba(255, 255, 255, 0.95);
    padding: 0.75rem 1.5rem;
    border-radius: var(--dwia-radius-lg);
    margin: 0 auto 20px;
    backdrop-filter: blur(10px);
    max-width: 95%;
    text-align: center;
    flex: 0 0 auto !important;
    overflow: visible !important;
}

.dwia-gallery-modal-info p {
    margin: 0;
    color: var(--dwia-gray-800);
    font-size: var(--dwia-font-size-base);
    line-height: 1.6;
}

.dwia-gallery-lightbox .dwia-modal-close {
    position: absolute;
    top: var(--dwia-space-6);
    right: var(--dwia-space-6);
    background: rgba(255, 255, 255, 0.9);
    color: var(--dwia-gray-800);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--dwia-font-size-2xl);
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 1000;
}

.dwia-gallery-lightbox .dwia-modal-close:hover {
    background: var(--dwia-white);
    transform: scale(1.1);
}

.dwia-gallery-modal-nav {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    display: flex;
    justify-content: space-between;
    padding: 0 var(--dwia-space-6);
    pointer-events: none;
}

.dwia-gallery-nav-btn {
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--dwia-gray-800);
    pointer-events: auto;
}

.dwia-gallery-nav-btn:hover {
    background: var(--dwia-white);
    transform: scale(1.1);
}

.dwia-gallery-nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Mobile gallery adjustments */
@media (max-width: 768px) {
    .dwia-gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-5);
    }

    .dwia-gallery-modal-content {
        padding: 10px;
    }

    .dwia-gallery-modal-image {
        padding: 15px 10px 8px !important;
    }

    .dwia-gallery-modal-image img {
        max-height: calc(100vh - 100px) !important;
        max-width: 98vw !important;
    }

    .dwia-gallery-modal-info {
        padding: 0.6rem 1rem;
        margin: 0 auto 15px;
        max-width: 96%;
        font-size: 0.9rem;
        overflow: visible !important;
    }
}

/* 2x3 Grid Layout for Gallery and Outcomes */
.dwia-gallery-grid-2x3,
.dwia-outcomes-grid-2x3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    gap: var(--dwia-space-6);
    margin: var(--dwia-space-8) 0;
}

/* Responsive: 2x3 becomes 2x1 on tablet, 6x1 on mobile */
@media (max-width: 968px) {
    .dwia-gallery-grid-2x3,
    .dwia-outcomes-grid-2x3 {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }
}

@media (max-width: 640px) {
    .dwia-gallery-grid-2x3,
    .dwia-outcomes-grid-2x3 {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
}

.dwia-loading-indicator {
    margin-top: 20px;
    font-style: italic;
    color: var(--dwia-gray-600);
}

/* ==========================================================================
   OUTCOMES SECTION - FIXED SPACING
   ========================================================================== */

/* FIXED: Reduced header spacing */
.dwia-outcomes-header {
    text-align: center;
    margin-bottom: var(--dwia-space-10) !important;
}

.dwia-outcomes-header h2 {
    font-size: var(--dwia-font-size-3xl);
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-gray-900);
}

.dwia-outcomes-header p {
    font-size: var(--dwia-font-size-lg);
    max-width: 800px;
    margin: 0 auto;
    color: var(--dwia-gray-600);
}

/* FIXED: Reduced controls spacing */
.dwia-outcomes-controls {
    background: var(--dwia-white);
    padding: var(--dwia-space-6) !important;
    border-radius: var(--dwia-radius-lg);
    margin-bottom: var(--dwia-space-8) !important;
    box-shadow: var(--dwia-shadow-sm);
}

/* FIXED: Reduced featured section spacing */
.dwia-featured-section {
    margin-bottom: var(--dwia-space-6) !important;
    padding-bottom: var(--dwia-space-6) !important;
    border-bottom: 2px solid var(--dwia-gray-200);
}

.dwia-featured-title {
    font-size: var(--dwia-font-size-2xl);
    margin-bottom: var(--dwia-space-5) !important;
    color: var(--dwia-gray-900);
    display: flex;
    align-items: center;
    gap: var(--dwia-space-3);
}

.dwia-featured-title::before {
    content: "⭐";
    font-size: var(--dwia-font-size-2xl);
}

.dwia-all-outcomes h3 {
    font-size: var(--dwia-font-size-2xl);
    margin-bottom: var(--dwia-space-5) !important;
    color: var(--dwia-gray-900);
    text-align: center;
}

/* Outcome Tabs */
.dwia-outcome-tabs {
    display: flex;
    gap: var(--dwia-space-3);
    margin-bottom: var(--dwia-space-8);
    overflow-x: auto;
    padding-bottom: var(--dwia-space-1);
}

.dwia-tab-btn {
    background: var(--dwia-white);
    border: 2px solid var(--dwia-gray-300);
    color: var(--dwia-gray-700);
    padding: var(--dwia-space-3) var(--dwia-space-6);
    border-radius: var(--dwia-radius-xl);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
    white-space: nowrap;
    font-size: var(--dwia-font-size-base);
}

.dwia-tab-btn:hover,
.dwia-tab-btn.active {
    background: var(--dwia-primary);
    color: var(--dwia-white);
    border-color: var(--dwia-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.3);
}

/* Filters */
.dwia-filters-wrapper {
    display: flex;
    flex-direction: column;
    gap: var(--dwia-space-5);
}

@media (min-width: 768px) {
    .dwia-filters-wrapper {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }
}

.dwia-search-bar {
    position: relative;
    flex: 1;
    max-width: 400px;
}

.dwia-search-bar input {
    width: 100%;
    padding: var(--dwia-space-3) var(--dwia-space-12) var(--dwia-space-3) var(--dwia-space-5);
    border: 2px solid var(--dwia-gray-300);
    border-radius: var(--dwia-radius-xl);
    font-size: var(--dwia-font-size-base);
    transition: border-color 0.2s ease;
}

.dwia-search-bar input:focus {
    outline: none;
    border-color: var(--dwia-primary);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.1);
}

.dwia-search-btn {
    position: absolute;
    right: var(--dwia-space-4);
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: var(--dwia-space-1);
    font-size: var(--dwia-font-size-lg);
    color: var(--dwia-gray-500);
}

.dwia-filter-chips {
    display: flex;
    gap: var(--dwia-space-5);
    align-items: center;
    flex-wrap: wrap;
}

.dwia-filter-group {
    display: flex;
    align-items: center;
    gap: var(--dwia-space-2);
}

.dwia-filter-group label {
    font-size: var(--dwia-font-size-sm);
    font-weight: 500;
    color: var(--dwia-gray-700);
    white-space: nowrap;
}

.dwia-filter-select {
    padding: var(--dwia-space-2) var(--dwia-space-3);
    border: 1px solid var(--dwia-gray-300);
    border-radius: var(--dwia-radius-xl);
    font-size: var(--dwia-font-size-sm);
    background: var(--dwia-white);
    min-width: 120px;
    cursor: pointer;
}

.dwia-clear-filters {
    background: var(--dwia-gray-200);
    color: var(--dwia-gray-700);
    border: none;
    padding: var(--dwia-space-3) var(--dwia-space-5);
    border-radius: var(--dwia-radius-xl);
    cursor: pointer;
    font-size: var(--dwia-font-size-sm);
    transition: all 0.2s ease;
    font-weight: 500;
}

.dwia-clear-filters:hover {
    background: var(--dwia-gray-300);
    transform: translateY(-1px);
}

/* ==========================================================================
   OUTCOME CARDS
   ========================================================================== */

.dwia-outcomes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: var(--dwia-space-8);
    margin: var(--dwia-space-8) 0;
}

.dwia-outcome-card {
    background: var(--dwia-white);
    border-radius: var(--dwia-radius-lg);
    box-shadow: var(--dwia-shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    border: 1px solid var(--dwia-gray-100);
    height: 100%;
    display: flex;
    flex-direction: column;
}

.dwia-outcome-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--dwia-shadow-xl);
    border-color: var(--dwia-primary);
}

.dwia-card-thumbnail {
    position: relative;
    height: 200px;
    overflow: hidden;
    background: var(--dwia-gray-100);
}

.dwia-card-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.dwia-outcome-card:hover .dwia-card-thumbnail img {
    transform: scale(1.05);
}

.dwia-doc-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 4rem;
    background: linear-gradient(135deg, var(--dwia-gray-100) 0%, var(--dwia-gray-200) 100%);
    color: var(--dwia-gray-500);
}

.dwia-featured-badge {
    position: absolute;
    top: var(--dwia-space-4);
    right: var(--dwia-space-4);
    background: var(--dwia-primary);
    color: var(--dwia-white);
    padding: var(--dwia-space-2) var(--dwia-space-3);
    border-radius: var(--dwia-radius-xl);
    font-size: var(--dwia-font-size-xs);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.3);
}

.dwia-card-content {
    padding: var(--dwia-space-6);
    flex: 1;
    display: flex;
    flex-direction: column;
}

.dwia-card-title {
    font-size: var(--dwia-font-size-xl);
    margin-bottom: var(--dwia-space-4);
    color: var(--dwia-gray-900);
    line-height: 1.4;
    font-weight: 600;
}

.dwia-card-topics {
    margin-bottom: var(--dwia-space-4);
}

.dwia-topic-chip {
    display: inline-block;
    background: var(--dwia-gray-100);
    color: var(--dwia-gray-700);
    padding: var(--dwia-space-2) var(--dwia-space-3);
    border-radius: var(--dwia-radius-lg);
    font-size: var(--dwia-font-size-xs);
    margin-right: var(--dwia-space-2);
    margin-bottom: var(--dwia-space-2);
    cursor: pointer;
    transition: all 0.2s ease;
    font-weight: 500;
}

.dwia-topic-chip:hover,
.dwia-topic-chip:focus {
    background: var(--dwia-primary);
    color: var(--dwia-white);
    transform: translateY(-1px);
}

.dwia-card-teaser {
    color: var(--dwia-gray-600);
    margin-bottom: var(--dwia-space-4);
    flex: 1;
    line-height: 1.6;
    font-size: var(--dwia-font-size-base);
    font-style: italic;
}

.dwia-card-meta {
    display: flex;
    gap: var(--dwia-space-4);
    margin-bottom: var(--dwia-space-5);
    font-size: var(--dwia-font-size-xs);
    color: var(--dwia-gray-600);
    flex-wrap: wrap;
}

.dwia-card-meta > span {
    background: var(--dwia-gray-100);
    padding: var(--dwia-space-2) var(--dwia-space-3);
    border-radius: var(--dwia-radius-md);
    font-weight: 500;
}

.dwia-card-actions {
    display: flex;
    gap: var(--dwia-space-3);
    margin-top: auto;
}

.dwia-card-actions .dwia-btn {
    flex: 1;
    text-align: center;
    font-size: var(--dwia-font-size-sm);
    padding: var(--dwia-space-3) var(--dwia-space-4);
}

/* Fixed: Details button styling */
.dwia-details-btn {
    background: var(--dwia-primary) !important;
    color: var(--dwia-white) !important;
    border: 1px solid var(--dwia-primary) !important;
}

.dwia-details-btn:hover,
.dwia-details-btn:focus {
    background: var(--dwia-primary-dark) !important;
    color: var(--dwia-white) !important;
}

/* ==========================================================================
   NEWSLETTER SECTION
   ========================================================================== */

.dwia-newsletter h2 {
    font-size: var(--dwia-font-size-3xl);
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-white);
}

.dwia-newsletter p {
    font-size: var(--dwia-font-size-lg);
    margin-bottom: var(--dwia-space-10);
    opacity: 0.95;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.dwia-newsletter-form {
    max-width: 500px;
    margin: 0 auto;
}

.mc-field-group {
    margin-bottom: var(--dwia-space-5);
}

.mc-field-group input[type="email"],
.mc-field-group input[type="text"] {
    width: 100%;
    padding: var(--dwia-space-4);
    border: none;
    border-radius: var(--dwia-radius);
    font-size: var(--dwia-font-size-base);
    background: var(--dwia-white);
    color: var(--dwia-gray-800);
}

.mc-field-group label {
    display: flex;
    align-items: center;
    gap: var(--dwia-space-3);
    color: var(--dwia-white);
    font-size: var(--dwia-font-size-sm);
    justify-content: center;
}

.mc-field-group input[type="checkbox"] {
    margin: 0;
}

/* FIXED: Newsletter button styling */
#mc-embedded-subscribe {
    background: var(--dwia-white) !important;
    color: var(--dwia-primary) !important;
    border: 2px solid var(--dwia-white) !important;
}

#mc-embedded-subscribe:hover {
    background: var(--dwia-gray-100) !important;
    color: var(--dwia-primary) !important;
}

/* ==========================================================================
   CONTACT SECTION
   ========================================================================== */

.dwia-contact h2 {
    font-size: var(--dwia-font-size-3xl);
    text-align: center;
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-gray-900);
}

.dwia-contact > .dwia-container > p {
    text-align: center;
    font-size: var(--dwia-font-size-lg);
    margin-bottom: var(--dwia-space-16);
    color: var(--dwia-gray-600);
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.dwia-contact-content {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: var(--dwia-space-16);
    max-width: 1100px;
    margin: 0 auto;
    align-items: start;
}

.dwia-contact-info {
    background: var(--dwia-section-bg); /* Light background to contrast with white contact section */
    padding: var(--dwia-space-10);
    border-radius: var(--dwia-radius-xl);
    box-shadow: var(--dwia-shadow-lg);
    border: 1px solid var(--dwia-gray-200);
}

.dwia-contact-info h3 {
    font-size: var(--dwia-font-size-2xl);
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-primary);
    font-weight: 600;
}

.dwia-contact-info > p {
    color: var(--dwia-gray-600);
    margin-bottom: var(--dwia-space-8);
    line-height: 1.6;
}

.dwia-contact-features {
    display: flex;
    flex-direction: column;
    gap: var(--dwia-space-6);
}

.dwia-contact-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--dwia-space-4);
}

.dwia-feature-icon {
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%);
    border-radius: var(--dwia-radius-lg);
    flex-shrink: 0;
}

.dwia-contact-feature h4 {
    font-size: var(--dwia-font-size-lg);
    margin: 0 0 var(--dwia-space-2) 0;
    color: var(--dwia-gray-900);
    font-weight: 600;
}

.dwia-contact-feature p {
    margin: 0;
    color: var(--dwia-gray-600);
    font-size: var(--dwia-font-size-base);
    line-height: 1.5;
}

/* Enhanced Contact Form */
.dwia-contact-form {
    background: var(--dwia-white);
    padding: var(--dwia-space-12);
    border-radius: var(--dwia-radius-xl);
    box-shadow: var(--dwia-shadow-xl);
    border: 1px solid var(--dwia-gray-200);
    position: relative;
    overflow: hidden;
}

.dwia-contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 50%, var(--dwia-primary) 100%);
    border-radius: var(--dwia-radius-xl) var(--dwia-radius-xl) 0 0;
}

.dwia-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dwia-space-6);
    margin-bottom: var(--dwia-space-6);
}

.dwia-form-group {
    margin-bottom: var(--dwia-space-6);
}

.dwia-form-group label {
    display: block;
    margin-bottom: var(--dwia-space-3);
    font-weight: 600;
    color: var(--dwia-gray-800);
    font-size: var(--dwia-font-size-base);
    letter-spacing: 0.3px;
}

.dwia-form-group input,
.dwia-form-group textarea {
    width: 100%;
    padding: var(--dwia-space-4) var(--dwia-space-5);
    border: 2px solid var(--dwia-gray-200);
    border-radius: var(--dwia-radius-md);
    font-size: var(--dwia-font-size-base);
    transition: all 0.3s ease;
    background: var(--dwia-gray-50);
    color: var(--dwia-gray-800);
    font-family: inherit;
}

.dwia-form-group input:focus,
.dwia-form-group textarea:focus {
    outline: none;
    border-color: var(--dwia-primary);
    background: var(--dwia-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
    transform: translateY(-1px);
}

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

.dwia-contact-form .dwia-btn-primary {
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%);
    color: var(--dwia-white);
    border: none;
    padding: var(--dwia-space-4) var(--dwia-space-10);
    font-size: var(--dwia-font-size-lg);
    font-weight: 600;
    border-radius: var(--dwia-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    margin-top: var(--dwia-space-3);
}

.dwia-contact-form .dwia-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.dwia-footer {
    /* Use the footer-background variable for consistency with the header/home colour scheme */
    background: var(--footer-background);
    color: var(--dwia-white);
    padding: var(--dwia-space-16) 0 var(--dwia-space-5);
    margin-top: var(--dwia-space-20);
}

.dwia-footer-content {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: var(--dwia-space-12);
    margin-bottom: var(--dwia-space-10);
}

.dwia-footer h3,
.dwia-footer h4 {
    color: var(--dwia-white);
    margin-bottom: var(--dwia-space-5);
    font-weight: 600;
}

.dwia-footer-main p {
    color: rgba(255, 255, 255, 0.8);
    line-height: 1.6;
    margin-bottom: var(--dwia-space-6);
}

.dwia-social-links {
    display: flex;
    gap: var(--dwia-space-4);
    flex-wrap: wrap;
}

.dwia-social-link {
    display: flex;
    align-items: center;
    gap: var(--dwia-space-2);
    background: rgba(255, 255, 255, 0.1);
    color: var(--dwia-white);
    padding: var(--dwia-space-3) var(--dwia-space-5);
    border-radius: var(--dwia-radius-xl);
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.dwia-social-link:hover {
    background: var(--dwia-primary);
    color: var(--dwia-white);
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(139, 92, 246, 0.3);
}

.dwia-footer-links ul,
.dwia-footer-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

.dwia-footer-links li {
    margin-bottom: var(--dwia-space-3);
}

.dwia-footer-links a {
    color: rgba(255, 255, 255, 0.8);
    text-decoration: none;
    transition: color 0.2s ease;
    font-size: var(--dwia-font-size-base);
}

.dwia-footer-links a:hover {
    color: var(--dwia-white);
    text-decoration: none;
}

.dwia-footer-cta {
    display: inline-block;
    background: var(--dwia-primary);
    color: var(--dwia-white);
    padding: var(--dwia-space-3) var(--dwia-space-6);
    border-radius: var(--dwia-radius-xl);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.3s ease;
    font-size: var(--dwia-font-size-base);
}

.dwia-footer-cta:hover {
    background: var(--dwia-primary-dark);
    color: var(--dwia-white);
    text-decoration: none;
    transform: translateY(-1px);
}

.dwia-footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: var(--dwia-space-8);
    text-align: center;
}

.dwia-footer-bottom p {
    color: rgba(255, 255, 255, 0.7);
    margin: var(--dwia-space-1) 0;
    font-size: var(--dwia-font-size-sm);
}

/* ==========================================================================
   MODAL SYSTEM - FIXED VERSION
   ========================================================================== */

.dwia-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: var(--dwia-z-modal);
    display: flex !important;
    align-items: center;
    justify-content: center;
    padding: var(--dwia-space-5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    pointer-events: none;
}

/* FIXED: Force modal visibility when active */
.dwia-modal.active {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.dwia-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(8px);
}

.dwia-modal-content {
    position: relative;
    background: var(--dwia-white);
    border-radius: var(--dwia-radius-xl);
    max-width: 600px;
    width: 100%;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: var(--dwia-shadow-xl);
    transform: scale(0.9) translateY(30px);
    transition: all 0.3s ease;
    z-index: calc(var(--dwia-z-modal) + 1);
}

.dwia-modal.active .dwia-modal-content {
    transform: scale(1) translateY(0) !important;
}

.dwia-modal-header {
    position: sticky;
    top: 0;
    background: var(--dwia-white);
    padding: var(--dwia-space-5) var(--dwia-space-8) var(--dwia-space-3);
    border-radius: var(--dwia-radius-xl) var(--dwia-radius-xl) 0 0;
    z-index: 10;
    border-bottom: 1px solid var(--dwia-gray-100);
}

.dwia-modal-close {
    position: absolute;
    top: var(--dwia-space-4);
    right: var(--dwia-space-5);
    background: var(--dwia-gray-100);
    border: none;
    font-size: var(--dwia-font-size-2xl);
    color: var(--dwia-gray-600);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

.dwia-modal-close:hover {
    background: var(--dwia-gray-200);
    color: var(--dwia-gray-800);
    transform: rotate(90deg);
}

.dwia-modal-body {
    padding: var(--dwia-space-5) var(--dwia-space-8) var(--dwia-space-8);
}

.dwia-modal-meta {
    display: flex;
    gap: var(--dwia-space-3);
    margin-bottom: var(--dwia-space-5);
    flex-wrap: wrap;
}

.dwia-modal-meta > span {
    background: var(--dwia-gray-100);
    color: var(--dwia-gray-700);
    padding: var(--dwia-space-2) var(--dwia-space-4);
    border-radius: var(--dwia-radius-xl);
    font-size: var(--dwia-font-size-sm);
    font-weight: 500;
}

.dwia-modal-featured {
    background: var(--dwia-primary) !important;
    color: var(--dwia-white) !important;
}

.dwia-modal-title {
    font-size: var(--dwia-font-size-2xl);
    margin-bottom: var(--dwia-space-5);
    color: var(--dwia-gray-900);
    line-height: 1.3;
    font-weight: 600;
}

.dwia-modal-topics {
    margin-bottom: var(--dwia-space-5);
}

.dwia-modal-topic {
    display: inline-block;
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%);
    color: var(--dwia-white);
    padding: var(--dwia-space-2) var(--dwia-space-4);
    border-radius: var(--dwia-radius-xl);
    font-size: var(--dwia-font-size-sm);
    margin-right: var(--dwia-space-2);
    margin-bottom: var(--dwia-space-2);
    font-weight: 500;
}

/* Enhanced Modal Sections */
.dwia-modal-description-section,
.dwia-modal-takeaways-section,
.dwia-modal-audience-section,
.dwia-modal-impact-section {
    margin-bottom: var(--dwia-space-6);
    padding-bottom: var(--dwia-space-5);
    border-bottom: 1px solid var(--dwia-gray-100);
}

.dwia-modal-description-section:last-of-type,
.dwia-modal-takeaways-section:last-of-type,
.dwia-modal-audience-section:last-of-type,
.dwia-modal-impact-section:last-of-type {
    border-bottom: none;
    margin-bottom: var(--dwia-space-8);
}

.dwia-modal-description-section h3,
.dwia-modal-takeaways-section h3,
.dwia-modal-audience-section h3,
.dwia-modal-impact-section h3 {
    color: var(--dwia-primary);
    font-size: var(--dwia-font-size-lg);
    margin-bottom: var(--dwia-space-3);
    font-weight: 600;
}

.dwia-modal-description,
.dwia-modal-audience,
.dwia-modal-impact {
    line-height: 1.7;
    color: var(--dwia-gray-700);
}

.dwia-takeaways-list {
    margin: 0;
    padding-left: var(--dwia-space-5);
    color: var(--dwia-gray-700);
    line-height: 1.6;
}

.dwia-takeaways-list li {
    margin-bottom: var(--dwia-space-2);
    position: relative;
}

.dwia-takeaways-list li::marker {
    color: var(--dwia-primary);
    font-weight: bold;
}

.dwia-modal-actions {
    display: flex;
    gap: var(--dwia-space-4);
    flex-wrap: wrap;
}

.dwia-modal-actions .dwia-btn {
    flex: 1;
    min-width: 140px;
    justify-content: center;
    padding: var(--dwia-space-4) var(--dwia-space-6);
    font-size: var(--dwia-font-size-base);
}

/* FIXED: Share button styling */
.dwia-modal-share-btn {
    cursor: pointer !important;
    background: var(--dwia-gray-100) !important;
    color: var(--dwia-gray-800) !important;
    border: 1px solid var(--dwia-gray-300) !important;
}

.dwia-modal-share-btn:hover,
.dwia-modal-share-btn:focus {
    background: var(--dwia-gray-200) !important;
    color: var(--dwia-gray-900) !important;
}

/* Prevent body scroll when modal is open */
body.dwia-modal-open {
    overflow: hidden !important;
}

/* ==========================================================================
   TOAST NOTIFICATIONS - FIXED SHARE FUNCTIONALITY
   ========================================================================== */

.dwia-toast-container {
    position: fixed;
    top: var(--dwia-space-5);
    right: var(--dwia-space-5);
    z-index: var(--dwia-z-toast);
    pointer-events: none;
}

.dwia-toast {
    background: var(--dwia-primary);
    color: var(--dwia-white);
    padding: var(--dwia-space-4) var(--dwia-space-6);
    border-radius: var(--dwia-radius-lg);
    box-shadow: var(--dwia-shadow-xl);
    margin-bottom: var(--dwia-space-3);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    font-weight: 500;
    pointer-events: auto;
}

.dwia-toast.show {
    transform: translateX(0);
}

/* ==========================================================================
   CONTACT FORM 7 STYLING - MATCH CUSTOM DESIGN
   ========================================================================== */

/* Style Contact Form 7 to match custom design */
.dwia-cf7-styled .wpcf7-form {
    background: var(--dwia-white);
    padding: var(--dwia-space-12);
    border-radius: var(--dwia-radius-xl);
    box-shadow: var(--dwia-shadow-xl);
    border: 1px solid var(--dwia-gray-200);
    position: relative;
    overflow: hidden;
}

.dwia-cf7-styled .wpcf7-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 50%, var(--dwia-primary) 100%);
    border-radius: var(--dwia-radius-xl) var(--dwia-radius-xl) 0 0;
}

/* Style the contact-row to match dwia-form-row */
.dwia-cf7-styled .contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dwia-space-6);
    margin-bottom: var(--dwia-space-6);
}

/* Style contact-field to match dwia-form-group */
.dwia-cf7-styled .contact-field {
    margin-bottom: var(--dwia-space-6);
}

.dwia-cf7-styled .contact-field label {
    display: block;
    margin-bottom: var(--dwia-space-3);
    font-weight: 600;
    color: var(--dwia-gray-800);
    font-size: var(--dwia-font-size-base);
    letter-spacing: 0.3px;
}

/* Style form controls to match your inputs */
.dwia-cf7-styled .form-control {
    width: 100%;
    padding: var(--dwia-space-4) var(--dwia-space-5);
    border: 2px solid var(--dwia-gray-200);
    border-radius: var(--dwia-radius-md);
    font-size: var(--dwia-font-size-base);
    transition: all 0.3s ease;
    background: var(--dwia-gray-50);
    color: var(--dwia-gray-800);
    font-family: inherit;
    box-sizing: border-box;
}

.dwia-cf7-styled .form-control:focus {
    outline: none;
    border-color: var(--dwia-primary);
    background: var(--dwia-white);
    box-shadow: 0 0 0 4px rgba(139, 92, 246, 0.1);
    transform: translateY(-1px);
}

.dwia-cf7-styled textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Style submit button to match your design */
.dwia-cf7-styled .submit-btn {
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%);
    color: var(--dwia-white);
    border: none;
    padding: var(--dwia-space-4) var(--dwia-space-10);
    font-size: var(--dwia-font-size-lg);
    font-weight: 600;
    border-radius: var(--dwia-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    margin-top: var(--dwia-space-3);
    width: auto;
    display: inline-block;
}

.dwia-cf7-styled .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(139, 92, 246, 0.3);
}

/* Style CF7 response messages */
.dwia-cf7-styled .wpcf7-response-output {
    margin-top: var(--dwia-space-4);
    padding: var(--dwia-space-4);
    border-radius: var(--dwia-radius);
    font-weight: 500;
}

.dwia-cf7-styled .wpcf7-mail-sent-ok {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dwia-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dwia-cf7-styled .wpcf7-mail-sent-ng,
.dwia-cf7-styled .wpcf7-validation-errors {
    background: rgba(239, 68, 68, 0.1);
    color: var(--dwia-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Style validation errors */
.dwia-cf7-styled .wpcf7-not-valid-tip {
    color: var(--dwia-error);
    font-size: var(--dwia-font-size-sm);
    margin-top: var(--dwia-space-1);
    display: block;
}

.dwia-cf7-styled .wpcf7-not-valid {
    border-color: var(--dwia-error) !important;
}

/* Remove CF7 default styling */
.dwia-cf7-styled .wpcf7 form.invalid .wpcf7-response-output,
.dwia-cf7-styled .wpcf7 form.unaccepted .wpcf7-response-output,
.dwia-cf7-styled .wpcf7 form.payment-required .wpcf7-response-output {
    border-color: var(--dwia-error);
}

.dwia-cf7-styled .wpcf7 form.sent .wpcf7-response-output {
    border-color: var(--dwia-success);
}

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

@media (max-width: 768px) {
    /* Header responsive */
    .dwia-header-content {
        flex-direction: column;
        gap: var(--dwia-space-5);
        text-align: center;
    }
    
    .dwia-logo-section {
        flex-direction: column;
        gap: var(--dwia-space-2);
        text-align: center;
    }
    
    .dwia-site-title {
        font-size: var(--dwia-font-size-lg);
    }
    
    .dwia-nav ul {
        gap: var(--dwia-space-5);
        justify-content: center;
        flex-wrap: wrap;
    }
    
    /* Hero responsive - remove height constraints to show CTA buttons */
    .dwia-hero-carousel {
        height: auto;
        min-height: auto;
        max-height: none; /* Remove max-height to prevent clipping buttons */
        overflow: visible; /* Allow CTA buttons to be visible */
    }
    
    .dwia-carousel-btn {
        width: 40px;
        height: 40px;
    }
    
    .dwia-carousel-prev {
        left: var(--dwia-space-4);
    }
    
    .dwia-carousel-next {
        right: var(--dwia-space-4);
    }
    
    .dwia-hero-actions {
        flex-direction: column;
        align-items: center;
    }
    
    .dwia-carousel-content {
        padding: 0 var(--dwia-space-4);
    }

    .dwia-carousel-slide {
        background-position: center 25% !important;
    }

    .dwia-gallery-modal-image {
        padding: 10px 8px 6px !important;
    }

    .dwia-gallery-modal-image img {
        max-height: calc(100vh - 90px) !important;
        max-width: 98vw !important;
    }

    .dwia-gallery-modal-info {
        padding: 0.5rem 0.75rem;
        margin: 0 auto 12px;
        max-width: 96%;
        font-size: 0.85rem;
        overflow: visible !important;
    }
    
    /* Filters responsive */
    .dwia-filters-wrapper {
        gap: var(--dwia-space-4);
    }
    
    .dwia-filter-chips {
        gap: var(--dwia-space-3);
    }
    
    /* Cards responsive */
    .dwia-outcomes-grid {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-5);
    }
    
    .dwia-card-actions {
        flex-direction: column;
    }
    
    /* Contact responsive */
    .dwia-contact-content {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-10);
    }
    
    .dwia-contact-form {
        padding: var(--dwia-space-8) var(--dwia-space-6);
    }
    
    .dwia-form-row {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-4);
    }
    
    .dwia-contact-features {
        gap: var(--dwia-space-5);
    }
    
    .dwia-contact-feature {
        flex-direction: column;
        text-align: center;
        gap: var(--dwia-space-3);
    }
    
    .dwia-feature-icon {
        align-self: center;
    }
    
    /* Footer responsive */
    .dwia-footer-content {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-10);
        text-align: center;
    }
    
    .dwia-social-links {
        justify-content: center;
    }
    
    /* Modal responsive */
    .dwia-modal {
        padding: var(--dwia-space-3);
    }
    
    .dwia-modal-content {
        max-height: 95vh;
        border-radius: var(--dwia-radius-lg);
    }
    
    .dwia-modal-header {
        padding: var(--dwia-space-4) var(--dwia-space-5) var(--dwia-space-3);
    }
    
    .dwia-modal-body {
        padding: var(--dwia-space-4) var(--dwia-space-5) var(--dwia-space-6);
    }
    
    .dwia-modal-title {
        font-size: var(--dwia-font-size-xl);
    }
    
    .dwia-modal-actions {
        flex-direction: column;
    }
    
    .dwia-modal-actions .dwia-btn {
        min-width: auto;
    }
    
    /* CF7 Mobile responsive */
    .dwia-cf7-styled .contact-row {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-4);
    }
    
    .dwia-cf7-styled .wpcf7-form {
        padding: var(--dwia-space-8) var(--dwia-space-6);
    }
    
    .dwia-cf7-styled .form-control {
        padding: var(--dwia-space-3) var(--dwia-space-4);
    }
    
    /* Gallery grid responsive */
    .dwia-gallery-grid {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-5);
    }

    .dwia-gallery-modal-content {
        padding: 10px;
    }

    .dwia-gallery-modal-image {
        padding: 15px 10px 8px !important;
    }

    .dwia-gallery-modal-image img {
        max-height: calc(100vh - 100px) !important;
        max-width: 98vw !important;
    }

    .dwia-gallery-modal-info {
        padding: 0.6rem 1rem;
        margin: 0 auto 15px;
        max-width: 96%;
        font-size: 0.9rem;
        overflow: visible !important;
    }
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .dwia-gallery-image img {
        object-position: center 30%;
    }
}

@media (max-width: 480px) {
    /* Fix hero height on small mobile - remove constraints to show CTA buttons */
    .dwia-hero-carousel {
        height: auto;
        min-height: auto;
        max-height: none; /* Remove max-height to prevent clipping buttons */
        overflow: visible; /* Allow CTA buttons to be visible */
    }

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

    .dwia-contact h2 {
        font-size: var(--dwia-font-size-2xl);
    }
    
    .dwia-contact-form,
    .dwia-contact-info {
        padding: var(--dwia-space-6) var(--dwia-space-5);
    }
    
    .dwia-form-group input,
    .dwia-form-group textarea {
        padding: var(--dwia-space-3) var(--dwia-space-4);
    }
}

/* ==========================================================================
   UTILITY CLASSES AND FINAL ADJUSTMENTS
   ========================================================================== */

/* Back to top button */
.dwia-back-to-top {
    position: fixed;
    bottom: var(--dwia-space-8);
    right: var(--dwia-space-8);
    background: var(--dwia-primary);
    color: var(--dwia-white);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: var(--dwia-font-size-lg);
    box-shadow: var(--dwia-shadow-lg);
    transition: all 0.3s ease;
    z-index: var(--dwia-z-fixed);
}

.dwia-back-to-top:hover {
    background: var(--dwia-primary-dark);
    transform: translateY(-2px);
    box-shadow: var(--dwia-shadow-xl);
}

/* Cookie consent banner */
.dwia-cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--dwia-gray-900);
    color: var(--dwia-white);
    padding: var(--dwia-space-5);
    z-index: var(--dwia-z-fixed);
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.dwia-cookie-content {
    max-width: var(--dwia-container-max-width);
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--dwia-space-5);
    flex-wrap: wrap;
}

.dwia-cookie-actions {
    display: flex;
    gap: var(--dwia-space-3);
    flex-wrap: wrap;
}

.dwia-cookie-learn-more {
    color: var(--dwia-white);
    text-decoration: underline;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}

.dwia-cookie-learn-more:hover {
    opacity: 1;
}

/* Loading states */
.dwia-loading-state {
    text-align: center;
    padding: var(--dwia-space-16) 0;
}

.dwia-loading-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--dwia-gray-200);
    border-radius: 50%;
    border-top-color: var(--dwia-primary);
    animation: spin 1s ease-in-out infinite;
    margin-bottom: var(--dwia-space-4);
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Empty states */
.dwia-empty-state {
    text-align: center;
    padding: var(--dwia-space-16) 0;
}

.dwia-empty-content h3 {
    margin-bottom: var(--dwia-space-4);
    color: var(--dwia-gray-700);
}

.dwia-empty-content p {
    margin-bottom: var(--dwia-space-6);
    color: var(--dwia-gray-600);
    max-width: 400px;
    margin-left: auto;
    margin-right: auto;
}

/* Results info styling */
.dwia-results-info {
    margin-bottom: var(--dwia-space-6);
    padding: var(--dwia-space-4);
    background: var(--dwia-white);
    border-radius: var(--dwia-radius);
    border: 1px solid var(--dwia-gray-200);
}

.dwia-results-count {
    font-weight: 500;
    color: var(--dwia-gray-800);
    margin-bottom: var(--dwia-space-2);
}

.dwia-active-filters {
    margin-top: var(--dwia-space-3);
}

.dwia-active-filters-label {
    font-size: var(--dwia-font-size-sm);
    color: var(--dwia-gray-600);
    margin-right: var(--dwia-space-3);
}

.dwia-active-filter {
    display: inline-flex;
    align-items: center;
    background: var(--dwia-primary);
    color: var(--dwia-white);
    padding: var(--dwia-space-1) var(--dwia-space-3);
    border-radius: var(--dwia-radius-lg);
    font-size: var(--dwia-font-size-sm);
    margin-right: var(--dwia-space-2);
    margin-bottom: var(--dwia-space-2);
}

.dwia-filter-remove {
    background: none;
    border: none;
    color: var(--dwia-white);
    margin-left: var(--dwia-space-2);
    cursor: pointer;
    font-size: var(--dwia-font-size-lg);
    line-height: 1;
}

.dwia-filter-remove:hover {
    opacity: 0.8;
}

/* Ensure proper spacing for load more buttons */
.dwia-load-more-wrapper {
    text-align: center;
    margin: var(--dwia-space-10) 0;
}

.dwia-gallery-load-more {
    margin-top: var(--dwia-space-8);
}

/* Print styles */
@media print {
    .dwia-header,
    .dwia-footer,
    .dwia-modal,
    .dwia-toast-container,
    .dwia-back-to-top,
    .dwia-cookie-banner {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
        line-height: 1.4;
    }
    
    .dwia-container {
        max-width: none;
        padding: 0;
    }
}

/* ===== POLICY MODAL STYLES ===== */

/* Policy Link Buttons */
.dwia-policy-link {
    background: none;
    border: none;
    color: var(--dwia-white);
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    font-family: inherit;
    padding: 0;
    margin: 0;
    transition: opacity 0.3s ease;
}

.dwia-policy-link:hover {
    opacity: 0.8;
    text-decoration: underline;
}

.dwia-policy-link:focus {
    outline: 2px solid var(--dwia-primary);
    outline-offset: 2px;
}

/* Modal Container */
.dwia-policy-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.dwia-policy-modal.active {
    display: flex;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Modal Overlay */
.dwia-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

/* Modal Content */
.dwia-modal-content {
    position: relative;
    background: var(--dwia-white);
    border-radius: 1rem;
    max-width: 90%;
    max-height: 90%;
    width: 100%;
    max-width: 800px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    z-index: 10000;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Modal Header */
.dwia-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2rem;
    border-bottom: 1px solid #eee;
    background: var(--dwia-gray-50);
}

.dwia-modal-header h2 {
    margin: 0;
    color: var(--dwia-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

/* Modal Close Button */
.dwia-modal-close {
    background: none;
    border: none;
    font-size: 2rem;
    cursor: pointer;
    color: #666;
    padding: 0;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.dwia-modal-close:hover {
    color: var(--dwia-primary);
    background: rgba(0, 101, 207, 0.1);
}

.dwia-modal-close:focus {
    outline: 2px solid var(--dwia-primary);
    outline-offset: 2px;
}

/* Modal Body */
.dwia-modal-body {
    padding: 2rem;
    max-height: 70vh;
    overflow-y: auto;
    line-height: 1.6;
    color: var(--dwia-text);
}

/* Modal Body Scrollbar Styling */
.dwia-modal-body::-webkit-scrollbar {
    width: 8px;
}

.dwia-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

.dwia-modal-body::-webkit-scrollbar-thumb {
    background: var(--dwia-primary);
    border-radius: 4px;
}

.dwia-modal-body::-webkit-scrollbar-thumb:hover {
    background: var(--dwia-secondary);
}

/* Policy Content Styling */
.policy-content h3 {
    color: var(--dwia-primary);
    margin-top: 0;
    margin-bottom: 1rem;
    font-size: 1.8rem;
    font-weight: 600;
}

.policy-content h4 {
    color: var(--dwia-secondary);
    margin-top: 2rem;
    margin-bottom: 1rem;
    font-size: 1.3rem;
    font-weight: 600;
}

.policy-content h5 {
    color: var(--dwia-text);
    margin-top: 1.5rem;
    margin-bottom: 0.75rem;
    font-size: 1.1rem;
    font-weight: 600;
}

.policy-content p {
    margin-bottom: 1rem;
    color: var(--dwia-text);
}

.policy-content ul {
    margin: 1rem 0;
    padding-left: 1.5rem;
}

.policy-content li {
    margin-bottom: 0.5rem;
    color: var(--dwia-text);
}

.policy-content strong {
    color: var(--dwia-primary);
    font-weight: 600;
}

.policy-content em {
    color: var(--dwia-gray-700);
    font-style: italic;
}

.policy-content table {
    width: 100%;
    border-collapse: collapse;
    margin: 1rem 0;
    font-size: 0.9rem;
}

.policy-content table th {
    background: var(--dwia-gray-100);
    padding: 0.75rem;
    border: 1px solid var(--dwia-gray-300);
    text-align: left;
    font-weight: 600;
    color: var(--dwia-primary);
}

.policy-content table td {
    padding: 0.75rem;
    border: 1px solid var(--dwia-gray-300);
    color: var(--dwia-text);
}

.policy-content table tr:nth-child(even) {
    background: var(--dwia-gray-50);
}

.policy-content a {
    color: var(--dwia-primary);
    text-decoration: underline;
}

.policy-content a:hover {
    color: var(--dwia-secondary);
}

/* Body Modal Open State */
body.dwia-modal-open {
    overflow: hidden;
    padding-right: 17px; /* Prevent layout shift from scrollbar */
}

/* Responsive Modal Design */
@media (max-width: 768px) {
    .dwia-policy-modal {
        padding: 10px;
    }
    
    .dwia-modal-content {
        max-width: 100%;
        max-height: 95%;
        border-radius: 0.5rem;
    }
    
    .dwia-modal-header {
        padding: 1.5rem;
    }
    
    .dwia-modal-header h2 {
        font-size: 1.3rem;
    }
    
    .dwia-modal-body {
        padding: 1.5rem;
        max-height: 75vh;
    }
    
    .policy-content h3 {
        font-size: 1.5rem;
    }
    
    .policy-content h4 {
        font-size: 1.2rem;
    }
    
    .policy-content h5 {
        font-size: 1rem;
    }
    
    .policy-content table {
        font-size: 0.8rem;
    }
    
    .policy-content table th,
    .policy-content table td {
        padding: 0.5rem;
    }
    
    body.dwia-modal-open {
        padding-right: 0; /* No scrollbar compensation on mobile */
    }
}

@media (max-width: 480px) {
    .dwia-modal-header {
        padding: 1rem;
    }
    
    .dwia-modal-body {
        padding: 1rem;
    }
    
    .policy-content table {
        font-size: 0.7rem;
    }
    
    .policy-content table th,
    .policy-content table td {
        padding: 0.3rem;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .dwia-modal-content {
        border: 2px solid var(--dwia-text);
    }
    
    .dwia-modal-close {
        border: 1px solid var(--dwia-text);
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .dwia-policy-modal.active {
        animation: none;
    }
    
    .dwia-modal-content {
        animation: none;
    }
    
    .dwia-policy-link,
    .dwia-modal-close {
        transition: none;
    }
}


/* ===== LEGACY COMPATIBILITY VARIABLES ===== */
:root {
    /* CRITICAL: Your existing CSS uses these old names! */
    --dwia-primary: #D05038;        /* Links/primary accent on white (burnt orange) */
    --dwia-primary-dark: #101010;   /* Dark text variant from mockup */
    --dwia-accent: #8088B8;         /* Muted purple pill accent */
    --dwia-header-bg: #DBD2C7;      /* Header/page background (cream) */
    --dwia-header-text: #D05038;    /* Nav text/CTA accent (burnt orange) */
    --dwia-hero-bg: #DBD2C7;        /* Hero/page background matches header */
    --dwia-hero-text: #101010;      /* High-contrast hero text */
    --dwia-section-bg: #ADABBF;     /* Soft section used for About & Our Work */
    --dwia-footer-bg: #DBD2C7;      /* Footer background */
    --dwia-footer-text: #FFFFFF;    /* Footer text on teal */
    --dwia-footer-alt: #206058;     /* Deeper teal alt background */

    /* Neutral Colors (mapped to mockup tones) */
    --dwia-white: #FFFFFF;
    --dwia-gray-50:  #D8D0C0;       /* Beige background */
    --dwia-gray-100: #D8A090;       /* Gallery salmon/rose */
    --dwia-gray-200: #A8A8B8;       /* Lavender-grey section */
    --dwia-gray-300: #8088B8;       /* Muted purple accent */
    --dwia-gray-400: #789888;       /* Sage/teal */
    --dwia-gray-600: #206058;       /* Deep forest-teal */
    --dwia-gray-700: #101010;       /* Near-black body text */
    --dwia-gray-800: #201810;       /* Very dark brown UI text */
    --dwia-gray-900: #101010;       /* Strong text on light */

    /* Status Colors (chosen from mockup hues) */
    --dwia-success: #206058;        /* Deep teal */
    --dwia-error:   #D05038;        /* Burnt orange/red */
    --dwia-warning: #D8A090;        /* Salmon warning tone */
    --dwia-info:    #8088B8;        /* Muted purple */
    
    /* Typography Scale */
    --dwia-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --dwia-font-size-xs: 0.75rem;
    --dwia-font-size-sm: 0.875rem;
    --dwia-font-size-base: 1rem;
    --dwia-font-size-lg: 1.125rem;
    --dwia-font-size-xl: 1.25rem;
    --dwia-font-size-2xl: 1.5rem;
    --dwia-font-size-3xl: 1.875rem;
    --dwia-font-size-4xl: 2.25rem;
    
    /* Spacing Scale */
    --dwia-space-1: 0.25rem;
    --dwia-space-2: 0.5rem;
    --dwia-space-3: 0.75rem;
    --dwia-space-4: 1rem;
    --dwia-space-5: 1.25rem;
    --dwia-space-6: 1.5rem;
    --dwia-space-8: 2rem;
    --dwia-space-10: 2.5rem;
    --dwia-space-12: 3rem;
    --dwia-space-16: 4rem;
    --dwia-space-20: 5rem;
    
    /* Border Radius */
    --dwia-radius-sm: 0.375rem;
    --dwia-radius: 0.5rem;
    --dwia-radius-md: 0.75rem;
    --dwia-radius-lg: 1rem;
    --dwia-radius-xl: 1.5rem;
    
    /* Shadows */
    --dwia-shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --dwia-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --dwia-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --dwia-shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    
    /* Container */
    --dwia-container-max-width: 1200px;
    
    /* Z-Index Scale */
    --dwia-z-dropdown: 1000;
    --dwia-z-sticky: 1020;
    --dwia-z-fixed: 1030;
    --dwia-z-modal-backdrop: 1040;
    --dwia-z-modal: 1050;
    --dwia-z-popover: 1060;
    --dwia-z-tooltip: 1070;
    --dwia-z-toast: 1080;
}

/* ==========================================================================
   CONTACT FORM 7 LAYOUT FIX - TARGET ACTUAL CF7 CLASSES
   ========================================================================== */

/* Make both contact containers equal height and width */
.dwia-contact-content {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal width instead of 1fr 1.5fr */
    gap: var(--dwia-space-16);
    max-width: 1100px;
    margin: 0 auto;
    align-items: stretch; /* Force equal height */
}

/* Contact info card styling */
.dwia-contact-info {
    background: var(--dwia-section-bg);
    padding: var(--dwia-space-10);
    border-radius: var(--dwia-radius-xl);
    box-shadow: var(--dwia-shadow-lg);
    border: 1px solid var(--dwia-gray-200);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Contact form container - match info card exactly */
.dwia-contact-form {
    background: var(--dwia-white);
    padding: var(--dwia-space-10);
    border-radius: var(--dwia-radius-xl);
    box-shadow: var(--dwia-shadow-lg);
    border: 1px solid var(--dwia-gray-200);
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Add the brand gradient bar at top of form */
.dwia-contact-form::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: linear-gradient(90deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 50%, var(--dwia-primary) 100%);
    border-radius: var(--dwia-radius-xl) var(--dwia-radius-xl) 0 0;
}

/* Make CF7 form fill the container and center content */
.dwia-contact-form .wpcf7 {
    height: auto;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.dwia-contact-form .wpcf7-form {
    width: 100%;
    max-width: 450px;
    display: flex;
    flex-direction: column;
    margin: 0 auto;
    padding: 0;
}

/* Style the contact-row (2-column layout) */
.dwia-contact-form .contact-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--dwia-space-6);
    margin-bottom: var(--dwia-space-6);
}

/* Style individual contact fields */
.dwia-contact-form .contact-field {
    margin-bottom: var(--dwia-space-6);
}

.dwia-contact-form .contact-field:last-child {
    margin-bottom: 0;
}

/* Style field labels */
.dwia-contact-form .contact-field label {
    display: block;
    margin-bottom: var(--dwia-space-3);
    font-weight: 600;
    color: var(--dwia-gray-800);
    font-size: var(--dwia-font-size-base);
    letter-spacing: 0.3px;
}

/* Style all form controls (inputs and textarea) */
.dwia-contact-form .form-control {
    width: 100%;
    padding: var(--dwia-space-4) var(--dwia-space-5);
    border: 2px solid var(--dwia-gray-200);
    border-radius: var(--dwia-radius-md);
    font-size: var(--dwia-font-size-base);
    transition: all 0.3s ease;
    background: var(--dwia-gray-50);
    color: var(--dwia-gray-800);
    font-family: inherit;
    box-sizing: border-box;
}

.dwia-contact-form .form-control:focus {
    outline: none;
    border-color: var(--dwia-primary);
    background: var(--dwia-white);
    box-shadow: 0 0 0 4px rgba(0, 101, 207, 0.1);
    transform: translateY(-1px);
}

/* Style textarea specifically */
.dwia-contact-form textarea.form-control {
    resize: vertical;
    min-height: 120px;
    line-height: 1.6;
}

/* Style the submit button */
.dwia-contact-form .submit-btn {
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%);
    color: var(--dwia-white);
    border: none;
    padding: var(--dwia-space-4) var(--dwia-space-10);
    font-size: var(--dwia-font-size-lg);
    font-weight: 600;
    border-radius: var(--dwia-radius-md);
    cursor: pointer;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;
    overflow: hidden;
    margin-top: auto; /* Push to bottom */
    width: auto;
    align-self: flex-start;
}

.dwia-contact-form .submit-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 101, 207, 0.3);
}

/* Style CF7 response messages */
.dwia-contact-form .wpcf7-response-output {
    margin-top: var(--dwia-space-4);
    padding: var(--dwia-space-4);
    border-radius: var(--dwia-radius);
    font-weight: 500;
}

.dwia-contact-form .wpcf7-mail-sent-ok {
    background: rgba(16, 185, 129, 0.1);
    color: var(--dwia-success);
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.dwia-contact-form .wpcf7-mail-sent-ng,
.dwia-contact-form .wpcf7-validation-errors {
    background: rgba(239, 68, 68, 0.1);
    color: var(--dwia-error);
    border: 1px solid rgba(239, 68, 68, 0.3);
}

/* Style validation errors */
.dwia-contact-form .wpcf7-not-valid-tip {
    color: var(--dwia-error);
    font-size: var(--dwia-font-size-sm);
    margin-top: var(--dwia-space-1);
    display: block;
}

.dwia-contact-form .wpcf7-not-valid {
    border-color: var(--dwia-error);
}

/* Remove any conflicting styles from the old dwia-cf7-styled rules */
.dwia-cf7-styled .wpcf7-form,
.dwia-cf7-styled .contact-row,
.dwia-cf7-styled .contact-field,
.dwia-cf7-styled .form-control,
.dwia-cf7-styled .submit-btn {
    /* Reset any conflicting styles */
    background: unset;
    padding: unset;
    border: unset;
    border-radius: unset;
    box-shadow: unset;
    margin: unset;
}

/* Responsive design */
@media (max-width: 768px) {
    .dwia-contact-content {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-10);
    }
    
    .dwia-contact-form .contact-row {
        grid-template-columns: 1fr;
        gap: var(--dwia-space-4);
    }
    
    .dwia-contact-form,
    .dwia-contact-info {
        padding: var(--dwia-space-8) var(--dwia-space-6);
    }
}

@media (max-width: 480px) {
    .dwia-contact-form,
    .dwia-contact-info {
        padding: var(--dwia-space-6) var(--dwia-space-5);
    }
    
    .dwia-contact-form .form-control {
        padding: var(--dwia-space-3) var(--dwia-space-4);
    }
}

/**
 * Contact Form 7 Response Messages - ENHANCED VISIBILITY
 * Ensures form responses show up properly after submission
 */

/* CF7 Response Output Container */
.wpcf7-response-output {
    display: block !important;
    margin: 20px 0 !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    text-align: center !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: relative !important;
    z-index: 100 !important;
    min-height: auto !important;
    max-width: 100% !important;
    clear: both !important;
    animation: cfFormResponse 0.3s ease-out !important;
}

/* Success Messages */
.wpcf7-mail-sent-ok {
    background-color: #d4edda !important;
    color: #155724 !important;
    border: 2px solid #c3e6cb !important;
}

/* Error Messages */
.wpcf7-mail-sent-ng,
.wpcf7-validation-errors,
.wpcf7-acceptance-missing {
    background-color: #f8d7da !important;
    color: #721c24 !important;
    border: 2px solid #f5c6cb !important;
}

/* Spam Messages */
.wpcf7-spam-blocked {
    background-color: #fff3cd !important;
    color: #856404 !important;
    border: 2px solid #ffeaa7 !important;
}

/* Form Field Validation Errors */
.wpcf7-not-valid {
    border: 2px solid #dc3545 !important;
    background-color: #fff5f5 !important;
}

.wpcf7-not-valid-tip {
    display: block !important;
    color: #dc3545 !important;
    font-size: 14px !important;
    margin-top: 5px !important;
    font-weight: 500 !important;
}

/* Spinner/Loading State */
.wpcf7-spinner {
    display: inline-block !important;
    margin-left: 10px !important;
}

/* Form Container Enhancements */
.wpcf7-form {
    position: relative !important;
}

.wpcf7-form input[type="submit"] {
    transition: all 0.3s ease !important;
}

.wpcf7-form input[type="submit"]:disabled {
    opacity: 0.6 !important;
    cursor: not-allowed !important;
}


/* ----------------------------- */
/* CONTACT FORM RESPONSE FIX - LEARN FROM NEWSLETTER */
.wpcf7-response-output {
    display: block !important;
    margin: 20px 0 !important;
    padding: 15px !important;
    border-radius: 8px !important;
    font-weight: 500 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.wpcf7-mail-sent-ok {
    background: #d4edda !important;
    color: #155724 !important;
    border: 2px solid #c3e6cb !important;
}

.wpcf7-validation-errors,
.wpcf7-mail-sent-ng {
    background: #f8d7da !important;
    color: #721c24 !important;
    border: 2px solid #f5c6cb !important;
}

/* Remove any conflicting loaders */
.dwia-contact .wpcf7-spinner {
    display: none !important;
}

/* Ensure form resets properly after success */
.wpcf7-mail-sent-ok + form {
    opacity: 1 !important;
}



/* Animation for response messages */
@keyframes cfFormResponse {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Ensure proper spacing around the contact form */
.dwia-contact-form {
    position: relative;
    z-index: 10;
}

/* Override any theme styles that might hide responses */
.dwia-contact .wpcf7-response-output,
.dwia-contact-form .wpcf7-response-output {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Hide loading indicators that may interfere with pagination */
.dwia-loading,
.dwia-filter-loading,
[class*="loading"] {
    display: none !important;
}

/* ==========================================================================
   TARGETED NEWSLETTER FIX - REPLACE THE PREVIOUS ATTEMPT
   ========================================================================== */

/* ==========================================================================
   MAILCHIMP FORM STYLING - Blue background, white text
   ========================================================================== */

/* Target the specific Mailchimp container */
.dwia-newsletter #mc_embed_signup {
    background: transparent !important;
    clear: none !important;
    font-family: inherit !important;
    width: 100% !important;
    max-width: 600px !important;
    margin: 2rem auto !important;
}

/* Style the main form container - keep blue background */
.dwia-newsletter #mc_embed_signup form {
    background: transparent !important;
    padding: 2rem !important;
    border: 2px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: 12px !important;
    backdrop-filter: blur(10px) !important;
}

/* Newsletter signup heading - WHITE text */
.dwia-newsletter #mc_embed_signup h2 {
    color: white !important;
    font-size: 1.5rem !important;
    margin-bottom: 1rem !important;
    text-align: center !important;
}

/* Required field indicator - WHITE text */
.dwia-newsletter .indicates-required {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
}

.dwia-newsletter .asterisk {
    color: #ffeb3b !important;
}

/* Field groups */
.dwia-newsletter .mc-field-group {
    margin-bottom: 1rem !important;
}

/* Labels - WHITE text */
.dwia-newsletter .mc-field-group label {
    color: white !important;
    font-weight: 600 !important;
    display: block !important;
    margin-bottom: 0.5rem !important;
    font-size: 1rem !important;
}

/* Input fields - WHITE background with DARK text */
.dwia-newsletter .mc-field-group input[type="email"],
.dwia-newsletter .mc-field-group input[type="text"] {
    width: 100% !important;
    padding: 12px !important;
    border: 2px solid rgba(255, 255, 255, 0.8) !important;
    border-radius: 6px !important;
    background: white !important;
    color: #333 !important;
    font-size: 1rem !important;
    box-sizing: border-box !important;
    transition: all 0.3s ease !important;
}

.dwia-newsletter .mc-field-group input[type="email"]:focus,
.dwia-newsletter .mc-field-group input[type="text"]:focus {
    border-color: white !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.2) !important;
}

/* GDPR section - WHITE text */
.dwia-newsletter #mergeRow-gdpr {
    margin-top: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.dwia-newsletter .content__gdpr label {
    color: white !important;
    font-weight: 600 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
}

.dwia-newsletter .content__gdpr p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 0.9rem !important;
    margin-bottom: 1rem !important;
    line-height: 1.5 !important;
}

/* Checkbox styling */
.dwia-newsletter .checkbox.subfield {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 1rem !important;
}

.dwia-newsletter .checkbox.subfield label {
    color: white !important;
    font-weight: normal !important;
    margin-bottom: 0 !important;
    cursor: pointer !important;
}

.dwia-newsletter .checkbox.subfield input[type="checkbox"] {
    margin: 0 !important;
    flex-shrink: 0 !important;
    margin-top: 2px !important;
    accent-color: white !important;
}

/* GDPR legal text - WHITE text */
.dwia-newsletter .content__gdprLegal p {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.8rem !important;
    line-height: 1.4 !important;
    margin-top: 1rem !important;
}

.dwia-newsletter .content__gdprLegal a {
    color: white !important;
    text-decoration: underline !important;
}

/* Submit button - WHITE background with BLUE text */
.dwia-newsletter #mc-embedded-subscribe {
    background: white !important;
    color: var(--dwia-primary) !important;
    border: 2px solid white !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    margin-top: 1rem !important;
}

.dwia-newsletter #mc-embedded-subscribe:hover {
    background: rgba(255, 255, 255, 0.9) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 12px rgba(255, 255, 255, 0.3) !important;
}

/* Response messages - adjust for dark background */
.dwia-newsletter .response {
    margin-top: 1rem !important;
    padding: 1rem !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
}

.dwia-newsletter #mce-success-response {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #4caf50 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

.dwia-newsletter #mce-error-response {
    background: rgba(255, 255, 255, 0.2) !important;
    color: #f44336 !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* Hide Mailchimp branding */
.dwia-newsletter .refferal_badge {
    display: none !important;
}

.dwia-newsletter .optionalParent p {
    display: none !important;
}

/* Force all text elements to be white */
.dwia-newsletter #mc_embed_signup *:not(input):not(button) {
    color: white !important;
}

/* Ensure input fields stay white background with dark text */
.dwia-newsletter #mc_embed_signup input[type="email"],
.dwia-newsletter #mc_embed_signup input[type="text"] {
    background: white !important;
    color: #333 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .dwia-newsletter #mc_embed_signup form {
        padding: 1.5rem !important;
        margin: 1rem !important;
    }
    
    .dwia-newsletter #mc_embed_signup h2 {
        font-size: 1.25rem !important;
    }
}

/* FORCE NEWSLETTER BACKGROUND COLOUR */
.dwia-newsletter,
section.dwia-newsletter {
    /* Override any prior background declarations to ensure the newsletter uses the configured newsletter-background colour */
    background: var(--newsletter-background) !important;
    background-color: var(--newsletter-background) !important;
}

/* FORCE WHITE TEXT ON ALL NEWSLETTER ELEMENTS */
.dwia-newsletter h2,
.dwia-newsletter p,
.dwia-newsletter label,
.dwia-newsletter span:not(input):not(button),
.dwia-newsletter .indicates-required,
.dwia-newsletter .content__gdpr p,
.dwia-newsletter .content__gdprLegal p {
    color: white !important;
}

/* NUCLEAR NEWSLETTER FORM WIDTH FIX */
.dwia-newsletter #mc_embed_setup,
.dwia-newsletter #mc_embed_signup {
    max-width: 400px !important;
    width: 400px !important;
    margin: 2rem auto 0 !important;
    padding: 2rem 1.5rem !important;
}

/* Force form container width */
.dwia-newsletter form,
.dwia-newsletter #mc-embedded-subscribe-form {
    width: 100% !important;
    max-width: 100% !important;
}

/* Force input field widths */
.dwia-newsletter input[type="email"],
.dwia-newsletter input[type="text"],
.dwia-newsletter #mce-EMAIL,
.dwia-newsletter #mce-FNAME {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Force submit button width */
.dwia-newsletter input[type="submit"],
.dwia-newsletter #mc-embedded-subscribe,
.dwia-newsletter .button {
    width: 180px !important;
    max-width: 180px !important;
    margin: 1rem auto 0 !important;
    display: block !important;
}

/* Force all divs to respect container width */
.dwia-newsletter #mc_embed_setup div,
.dwia-newsletter #mc_embed_signup div,
.dwia-newsletter .mc-field-group,
.dwia-newsletter #mergeRow-gdpr {
    max-width: 100% !important;
    width: auto !important;
}

/* Override any Mailchimp inline styles */
.dwia-newsletter * {
    max-width: 100% !important;
}

.dwia-newsletter input,
.dwia-newsletter button {
    max-width: 100% !important;
}

/* CONTACT FEATURES - FILL ALL AVAILABLE SPACE */
.dwia-contact-features {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important; /* Remove all gaps */
    height: 100% !important; /* Fill container height */
}

.dwia-contact-feature {
    display: flex !important;
    align-items: center !important; /* Center content vertically */
    gap: var(--dwia-space-6) !important;
    padding: var(--dwia-space-8) var(--dwia-space-6) !important; /* Much larger padding */
    margin: 0 !important;
    flex: 1 !important; /* Each feature takes equal space */
    background: rgba(0, 101, 207, 0.03) !important;
    border-bottom: 1px solid rgba(0, 101, 207, 0.1) !important;
}

.dwia-contact-feature:last-child {
    border-bottom: none !important;
}

/* Larger icons */
.dwia-feature-icon {
    font-size: 2.5rem !important; /* Much larger icons */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 80px !important; /* Bigger icon container */
    height: 80px !important;
    background: linear-gradient(135deg, var(--dwia-primary) 0%, var(--dwia-primary-dark) 100%) !important;
    border-radius: var(--dwia-radius-lg) !important;
    flex-shrink: 0 !important;
}

/* Larger text */
.dwia-contact-feature h4 {
    margin: 0 0 var(--dwia-space-3) 0 !important;
    font-size: var(--dwia-font-size-xl) !important; /* Larger headings */
    font-weight: 600 !important;
}

.dwia-contact-feature p {
    margin: 0 !important;
    font-size: var(--dwia-font-size-lg) !important; /* Larger text */
    line-height: 1.6 !important;
    color: var(--dwia-gray-600) !important;
}

/* Make the contact info container taller */
.dwia-contact-info {
    min-height: 600px !important; /* Force minimum height */
    display: flex !important;
    flex-direction: column !important;
}

.dwia-contact-info > p {
    margin-bottom: var(--dwia-space-8) !important; /* More space after description */
}

/* ============================================
   HEADER REDESIGN - DWiA
   December 2025
   Changes: Logo size increase, brand text restructure, language switcher repositioning
   ============================================ */

/* Brand Section: Logo + Two-line text block */
.dwia-header-brand {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Logo size increase by 30% */
.dwia-brand-logo img {
    max-height: 78px !important; /* 60px * 1.3 = 78px */
    width: auto;
}

/* Brand text container - two lines, left-aligned */
.dwia-brand-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.1;
    gap: 0.15rem;
}

/* H1: DWiA - line 1 */
.dwia-brand-short {
    margin: 0;
    font-size: clamp(1.1rem, 2.2vw, 1.6rem);
    font-weight: 700;
    line-height: 1.1;
}

.dwia-brand-short a {
    color: var(--header-nav-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dwia-brand-short a:hover {
    color: var(--header-nav-text-hover);
}

/* H3: Diaspora Women in Action - line 2 */
.dwia-brand-long {
    margin: 0;
    font-size: clamp(0.85rem, 1.6vw, 1.15rem);
    font-weight: 600;
    line-height: 1.1;
}

.dwia-brand-long a {
    color: var(--header-nav-text);
    text-decoration: none;
    transition: color 0.2s ease;
}

.dwia-brand-long a:hover {
    color: var(--header-nav-text-hover);
}

/* Right side wrapper: Language switcher above navigation */
.dwia-header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.5rem;
}

/* Language switcher positioning - top-right */
.dwia-lang-switcher {
    order: 0;
    display: flex;
    gap: var(--dwia-space-2);
    background: var(--dwia-gray-100);
    padding: var(--dwia-space-1);
    border-radius: var(--dwia-radius);
}

/* Navigation below language switcher */
.dwia-header-right .dwia-nav {
    order: 1;
}

/* Responsive adjustments for tablet and below */
@media (max-width: 1024px) {
    .dwia-header-brand {
        gap: 0.75rem;
    }

    .dwia-brand-logo img {
        max-height: 65px !important; /* Slightly smaller on tablets */
    }

    .dwia-brand-short {
        font-size: clamp(1rem, 2vw, 1.4rem);
    }

    .dwia-brand-long {
        font-size: clamp(0.8rem, 1.5vw, 1rem);
    }
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .dwia-header-content {
        flex-direction: column;
        gap: var(--dwia-space-4);
    }

    .dwia-header-brand {
        flex-direction: row;
        justify-content: center;
        gap: 0.6rem;
        width: 100%;
    }

    .dwia-brand-logo img {
        max-height: 55px !important; /* Smaller on mobile */
    }

    .dwia-brand-text {
        align-items: flex-start;
    }

    .dwia-brand-short {
        font-size: 1.2rem;
    }

    .dwia-brand-long {
        font-size: 0.9rem;
    }

    .dwia-header-right {
        width: 100%;
        align-items: center;
        gap: var(--dwia-space-3);
    }

    .dwia-lang-switcher {
        order: 0;
    }

    .dwia-header-right .dwia-nav {
        order: 1;
    }
}

@media (max-width: 430px) {
    .dwia-header-brand {
        gap: 0.5rem;
    }

    .dwia-brand-logo img {
        max-height: 48px !important; /* Even smaller on very small screens */
    }

    .dwia-brand-short {
        font-size: 1.1rem;
    }

    .dwia-brand-long {
        font-size: 0.85rem;
    }
}

/* End of Header Redesign */

/* ============================================
   HERO SECTION REDESIGN - DWiA
   December 2025
   Changes: 2 slides, 25% size reduction, centered carousel, CTAs moved right, arrows outside, new caption overlay
   ============================================ */

/* Hero inner container - two-column layout */
.dwia-hero-inner {
    display: flex;
    align-items: flex-start; /* FIX: Top-align CTAs instead of center */
    justify-content: center;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* Carousel wrapper - reduced by 25% and centered */
.dwia-hero-carousel-wrap {
    position: relative;
    width: 75%; /* 25% reduction */
    max-width: 75%;
    flex: 0 0 75%;
}

/* Carousel container */
.dwia-hero-carousel-wrap .dwia-carousel-container {
    position: relative;
    width: 100%;
    margin: 0 auto;
}

/* Carousel viewport - overflow hidden + rounded edges */
.dwia-hero-carousel-wrap .dwia-carousel-wrapper {
    overflow: hidden;
    position: relative;
    width: 100%;
    height: 500px; /* Fixed height for carousel */
    border-radius: 16px; /* Rounded edges */
}

/* Carousel track - stacks slides on top of each other */
.dwia-hero-carousel-wrap .dwia-carousel-track {
    position: relative;
    width: 100%;
    height: 100%;
}

/* Carousel slides - ONE photo covers ENTIRE frame */
.dwia-hero-carousel-wrap .dwia-carousel-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; /* FULL width - covers entire carousel */
    height: 100%; /* FULL height - covers entire carousel */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0; /* Hidden by default */
    visibility: hidden;
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out;
}

/* Mobile optimization: reduce image quality demand on mobile */
@media (max-width: 768px) {
    .dwia-hero-carousel-wrap .dwia-carousel-slide {
        background-size: cover;
        /* Use image-rendering for better mobile performance */
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* FALLBACK: Show first slide by default (before JavaScript loads) */
.dwia-hero-carousel-wrap .dwia-carousel-slide:first-child {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* Active slide - fully visible (JavaScript controlled) */
.dwia-hero-carousel-wrap .dwia-carousel-slide.active {
    opacity: 1;
    visibility: visible;
    z-index: 1;
}

/* REMOVE translucent overlay - override any existing */
.dwia-carousel-overlay {
    display: none !important;
    opacity: 0 !important;
}

.dwia-carousel-slide::before {
    display: none !important;
}

/* Caption overlay - center-bottom, white text - ENHANCED VISIBILITY */
.dwia-hero-caption {
    position: absolute;
    left: 50%;
    bottom: 30px;
    transform: translateX(-50%);
    color: #FFFFFF;
    text-align: center;
    font-weight: 700;
    font-size: clamp(1.3rem, 2.8vw, 2rem);
    letter-spacing: 0.1em;
    text-shadow: 0 3px 10px rgba(0, 0, 0, 0.9);
    padding: 0.8rem 2rem;
    z-index: 10;
    white-space: nowrap;
    background: rgba(0, 0, 0, 0.5); /* Semi-transparent background for better readability */
    backdrop-filter: blur(8px);
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Carousel arrows - positioned OUTSIDE on desktop, INSIDE on mobile */
.dwia-hero-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.9);
    border: none;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    z-index: 20;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.dwia-hero-arrow:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.dwia-hero-arrow.prev {
    left: -60px; /* Outside the carousel on desktop */
}

.dwia-hero-arrow.next {
    right: -60px; /* Outside the carousel on desktop */
}

.dwia-hero-arrow svg {
    color: #333;
}

/* Carousel dots - position at bottom (outside on desktop, inside on mobile) */
.dwia-hero-carousel-wrap .dwia-carousel-dots {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 10px;
    z-index: 15;
}

/* Position dots below carousel on mobile/tablet */
@media (max-width: 1024px) {
    .dwia-hero-carousel-wrap {
        margin-bottom: 50px; /* Space for dots below */
    }

    .dwia-hero-carousel-wrap .dwia-carousel-dots {
        bottom: -45px; /* Below carousel */
    }

    /* Scale dots to 80% of desktop size (12px * 0.8 = 10px) */
    .dwia-carousel-dot {
        width: 10px;
        height: 10px;
        border-width: 1.5px;
    }

    .dwia-carousel-dot.active,
    .dwia-carousel-dot:hover {
        transform: scale(1.2);
    }
}

/* CTA Stack - right side, vertical */
.dwia-hero-cta-stack {
    display: flex;
    flex-direction: column;
    gap: 19px; /* ~5mm spacing */
    flex: 0 0 auto;
}

/* Individual CTA button styling */
.hero-cta {
    display: block;
    padding: 1rem 2rem;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    font-size: 1rem;
    border-radius: 50px; /* Oval-shaped buttons */
    transition: all 0.3s ease;
    color: #FFFFFF;
    min-width: 200px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.hero-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    text-decoration: none;
    color: #FFFFFF;
}

/* CTA button colors - exact specifications */
.hero-cta-work {
    background: #8488b8;
}

.hero-cta-work:hover {
    background: #6d71a0;
}

.hero-cta-gallery {
    background: #d3533a;
}

.hero-cta-gallery:hover {
    background: #b8442f;
}

.hero-cta-newsletter {
    background: #27645c;
}

.hero-cta-newsletter:hover {
    background: #1e4d47;
}

/* Responsive: Tablet and below */
@media (max-width: 1024px) {
    .dwia-hero-inner {
        flex-direction: column;
        gap: 2rem;
    }

    .dwia-hero-carousel-wrap {
        width: 90%;
        max-width: 90%;
        flex: 0 0 auto;
    }

    .dwia-hero-carousel-wrap .dwia-carousel-wrapper {
        height: 400px;
    }

    .dwia-hero-carousel-wrap .dwia-carousel-slide {
        height: 100%;
    }

    .dwia-hero-arrow.prev {
        left: 10px; /* INSIDE carousel on tablet */
    }

    .dwia-hero-arrow.next {
        right: 10px; /* INSIDE carousel on tablet */
    }

    .dwia-hero-cta-stack {
        width: 100%;
        max-width: 500px;
    }

    .hero-cta {
        width: 100%;
    }
}

/* Responsive: Mobile */
@media (max-width: 768px) {
    .dwia-hero-inner {
        padding: 2rem 1rem;
    }

    .dwia-hero-carousel-wrap {
        width: 100%;
        max-width: 100%;
    }

    .dwia-hero-carousel-wrap .dwia-carousel-wrapper {
        height: 350px;
    }

    .dwia-hero-carousel-wrap .dwia-carousel-slide {
        height: 100%;
    }

    .dwia-hero-caption {
        font-size: 1.1rem;
        bottom: 20px;
        padding: 0.6rem 1.2rem;
        letter-spacing: 0.08em;
    }

    .dwia-hero-arrow {
        width: 40px;
        height: 40px;
    }

    .dwia-hero-arrow.prev {
        left: 10px; /* INSIDE carousel on mobile */
    }

    .dwia-hero-arrow.next {
        right: 10px; /* INSIDE carousel on mobile */
    }

    .dwia-hero-cta-stack {
        gap: 15px;
    }

    .hero-cta {
        padding: 0.9rem 1.5rem;
        font-size: 0.95rem;
    }

    /* Ensure About section doesn't overlap hero buttons */
    #about,
    .dwia-about {
        margin-top: 8rem !important; /* 128px - ensures carousel buttons fully visible */
    }
}

@media (max-width: 480px) {
    .dwia-hero-carousel-wrap .dwia-carousel-wrapper {
        height: 300px;
    }

    .dwia-hero-carousel-wrap .dwia-carousel-slide {
        height: 100%;
    }

    .dwia-hero-caption {
        font-size: 0.95rem;
        letter-spacing: 0.06em;
        padding: 0.5rem 1rem;
        bottom: 15px;
    }

    .dwia-hero-arrow {
        width: 36px;
        height: 36px;
    }

    .dwia-hero-arrow.prev {
        left: 8px; /* INSIDE carousel on small mobile */
    }

    .dwia-hero-arrow.next {
        right: 8px; /* INSIDE carousel on small mobile */
    }

    /* Hero CTA buttons - ensure proper display on small mobile */
    .dwia-hero-cta-stack {
        gap: 12px;
        width: 100%;
    }

    .hero-cta {
        padding: 0.8rem 1.2rem;
        font-size: 0.9rem;
        min-width: 180px;
        width: 100%;
        max-width: 280px;
    }

    /* Ensure About section doesn't overlap hero buttons */
    #about,
    .dwia-about {
        margin-top: 7rem !important; /* 112px - ensures carousel buttons fully visible */
    }
}

/* End of Hero Section Redesign */