/* =============================================================================
    SPAZIO CARBE - CLEANED & OPTIMIZED CSS
    ============================================================================= */

/* Declare layer order */
@layer tokens, reset, base, layout, components, utilities, overrides;

/* =============================================================================
   DESIGN TOKENS - Centralized variables for consistency
   ============================================================================= */
@layer tokens {
    :root {
        /* Brand Colors */
        --color-brand-ink: #0F0814;
        --color-brand-surface: #F8F8F8;
        --color-bg: #FFFFFF;
        --color-bg-alt: #F5F5F6;
        --color-surface: #FFFFFF;
        --color-surface-alt: #FBFBFC;
        --color-text: #0F0814;
        --color-text-muted: rgba(15, 8, 20, 0.65);
        --color-border: rgba(15, 8, 20, 0.12);
        --color-border-strong: rgba(15, 8, 20, 0.28);
        --color-overlay: rgba(0, 0, 0, 0.55);
        --color-focus-ring: rgba(15, 8, 20, 0.15);

        /* Semantic Colors */
        --color-accent: #1a1022;
        --color-danger: #C0392B;
        --color-warning: #E67E22;
        --color-success: #1E8449;

        /* Typography */
        --font-size-small: 0.875rem;
        --font-size-base: 1rem;
        --font-size-lg: 1.125rem;
        --font-size-xl: 1.25rem;
        --font-size-2xl: 1.5rem;
        --line-height-tight: 1.25;
        --line-height-normal: 1.5;
        --line-height-relaxed: 1.75;

        /* Radii */
        --radius-sm: 0.25rem;
        --radius-md: 0.375rem;
        --radius-lg: 0.5rem;
        --radius-xl: 0.75rem;
        --radius-2xl: 1rem;
        --radius-full: 9999px;

        /* Spacing Scale */
        --space-1: 0.25rem;
        --space-2: 0.5rem;
        --space-3: 0.75rem;
        --space-4: 1rem;
        --space-5: 1.25rem;
        --space-6: 1.5rem;
        --space-8: 2rem;
        --space-10: 2.5rem;
        --space-12: 3rem;
        --space-16: 4rem;
        --space-20: 5rem;

        /* Animation & Motion */
        --transition-fast: 150ms ease;
        --transition-base: 300ms ease;
        --transition-slow: 500ms ease;
        --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);

        /* Z-Index scale */
        --z-dropdown: 1000;
        --z-sticky: 1020;
        --z-fixed: 1030;
        --z-modal-backdrop: 1040;
        --z-modal: 1050;
        --z-popover: 1060;
        --z-tooltip: 1070;
        --z-toast: 1080;

        /* Breakpoints */
        --bp-sm: 480px;
        --bp-md: 768px;
        --bp-lg: 980px;
        --bp-xl: 1180px;

        /* =============================
          RESPONSIVE SIZING TOKENS
          Centralize frequently repeated breakpoint-specific values.
          Adjust only here for consistent scaling.
          ============================= */
        /* Logo heights */
        --logo-h-desktop: 64px;
        --logo-h-tablet: 58px;
        --logo-h-mobile: 54px;
        --logo-h-small: 46px;

        /* Social link (circular button) sizes */
        --social-btn-size-desktop: 30px;
        --social-btn-size-tablet: 30px;
        --social-btn-size-mobile: 28px;
        --social-icon-size-desktop: 20px;
        --social-icon-size-mobile: 20px;

        /* Language switcher typography & spacing */
        --lang-fs-desktop: 0.95rem;
        --lang-fs-medium: 0.92rem;
        --lang-fs-large-mobile: 16px;
        --lang-fs-mobile: 14px;
        --lang-fs-small: 14px;

        --lang-pad-desktop: 6px;
        --lang-pad-medium: 5px;
        --lang-pad-large-mobile: 0.4rem 0.5rem;
        --lang-pad-mobile: 0.35rem 0.5rem;
        --lang-pad-small: 0.4rem 0.6rem;

        /* Navigation & header spacing */
        --nav-gap-desktop: 2rem;
        --nav-gap-tablet: 0.85rem;
        --social-group-gap-tablet: 0.8rem;
        --social-group-gap-mobile: 1rem;
        --header-pad-desktop: 0.5rem 1rem;
        --header-pad-tablet: 0.45rem 0.8rem;
        --header-pad-mobile: 0.45rem 0.5rem;

        /* Media/Text layout tokens */
        --media-text-pad-inline: 2rem;
        --media-text-pad-inline-large: 4rem;
        --media-text-pad-block: 1.25rem;
        --media-text-pad-inline-tight: 1rem;
        --media-text-pad-block-tight: 0.75rem;
    }
}

/* =============================================================================
   RESET & BASE STYLES
   ============================================================================= */
@layer reset {
    * {
        box-sizing: border-box;
    }
}

/* =============================================================================
   WORDPRESS LAYOUT CONSTRAINT FIXES
   ============================================================================= */
@layer overrides {

    /* Override WordPress theme.json layout constraints that cause margin/width issues */
    .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    .wp-block-group.is-layout-constrained>*,
    .wp-block-post-content.is-layout-constrained>*,
    .wp-block-group.has-global-padding.is-layout-constrained>* {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Language-specific overrides for multisite consistency */
    html[lang="it-IT"] .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    html[lang="en-US"] .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)),
    html[lang="es-ES"] .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    /* Global button border-radius override to ensure consistent button styling */
    .wp-block-button__link,
    .wp-element-button,
    button:not(.project-open) {
        border-radius: 6px !important;
    }

    /* Root-level override for additional specificity */
    :root .is-layout-constrained> :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
        max-width: none !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }
}

/* =============================================================================
   LAYOUT UTILITIES
   ============================================================================= */
@layer utilities {

    /* Make a specific direct child full bleed (inner still padded) */
    .unconstrain,
    .fluid-section {
        max-width: none !important;
        width: 100% !important;
    }

    /* Combine with a content wrapper if you still want readable measure inside */
    .unconstrain>.wrap,
    .fluid-section>.wrap,
    .content-wrapper,
    .constrained-content {
        max-width: var(--wp--style--global--wide-size, 80rem);
        margin-left: auto;
        margin-right: auto;
        padding-left: min(2rem, 5vw);
        padding-right: min(2rem, 5vw);
    }

    /* Full width sections */
    .full-width {
        width: 100vw;
        margin-left: calc(-50vw + 50%);
        margin-right: calc(-50vw + 50%);
    }

    /* Max-width constraint when needed */
    .constrained {
        max-width: var(--wp--style--global--content-size, 42rem);
        margin-left: auto;
        margin-right: auto;
    }
}

/* =============================================================================
   VIDEO & COVER BLOCKS
   ============================================================================= */
@layer components {

    /* Video Background Styles */
    .wp-block-cover__video-background {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
        z-index: 1;
    }

    /* Enhanced overlay for better text readability */
    .wp-block-cover .wp-block-cover__background {
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
    }

    /* Ensure video is behind content */
    .wp-block-cover .wp-block-cover__inner-container {
        position: relative;
        z-index: 3;
    }

    /* Better text contrast on video background */
    .wp-block-cover h1,
    .wp-block-cover h2,
    .wp-block-cover h3,
    .wp-block-cover h4,
    .wp-block-cover p {
        text-shadow: none;
    }

    /* Ensure proper video display on mobile */
    @media (max-width: 768px) {
        .wp-block-cover__video-background {
            object-fit: cover;
            object-position: center;
        }

        header.wp-block-template-part.is-sticky {
            padding-top: 10px;
            /* Adjust this value as needed */
        }

        /* Ensure header remains sticky on mobile */
        header.wp-block-template-part {
            position: sticky !important;
            top: 0 !important;
            z-index: 999 !important;
        }

        /* Reduce section spacing on mobile */
        .wp-block-group.has-section-padding.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained,
        .wp-block-group.has-section-padding {
            padding-top: 0.5rem !important;
            /* Very small top padding */
            padding-bottom: 0.5rem !important;
            /* Very small bottom padding */
        }

        /* First section after hero: remove extra spacing */
        .wp-block-cover+.wp-block-group.has-section-padding {
            padding-top: 0.25rem !important;
            /* Tiny padding for first section */
        }

        /* Prevent horizontal overflow */
        body,
        html {
            overflow-x: clip !important;
        }

        /* Restore container padding that might be overridden by inline styles */
        .wp-block-cover__inner-container.is-layout-flow.wp-block-cover-is-layout-flow,
        .wp-block-cover .wp-block-cover__inner-container {
            padding-left: 18px !important;
            padding-right: 18px !important;
        }

        /* More specific targeting for the UL navigation container */
        .wp-block-navigation__responsive-container-content ul.wp-block-navigation__container,
        ul.wp-block-navigation__container.is-responsive.items-justified-center.no-wrap.wp-block-navigation {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            text-align: center !important;
            width: 100% !important;
            margin: 0 auto !important;
            padding: 1rem 0 !important;
            list-style: none !important;
            flex-wrap: nowrap !important;
        }

        /* Center individual navigation items */
        .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
        .wp-block-navigation__container.is-responsive .wp-block-navigation-item {
            width: 100% !important;
            text-align: center !important;
            margin: 0 auto !important;
        }

        /* Override WordPress core rule that forces left alignment */
        .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item,
        .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container,
        .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-page-list {
            align-items: center !important;
            /* Override flex-start with center */
        }
    }

    @media (max-width: 480px) {

        /* Even tighter spacing for very small mobile devices */
        .wp-block-group.has-section-padding.has-global-padding.is-layout-constrained.wp-block-group-is-layout-constrained,
        .wp-block-group.has-section-padding {
            padding-top: 0.25rem !important;
            /* Minimal top padding */
            padding-bottom: 0.25rem !important;

            /* Remove overflow hidden from .site-header on mobile for sticky */
            .site-header {
                overflow: visible !important;
            }

            /* Minimal bottom padding */
        }

        /* First section after hero: almost no spacing */
        .wp-block-cover+.wp-block-group.has-section-padding {
            padding-top: 0.125rem !important;
            /* Almost no padding for first section */
        }
    }


    /* Base Styles & Typography */
    @layer base {
        .wp-block-heading {
            word-wrap: break-word;
            overflow-wrap: break-word;
            hyphens: auto;
        }

        /* Normalize default flow group padding (WordPress adds large spacing via tokens) */


        /* Section padding normalization */
        .wp-block-group.has-section-padding {
            /* Override large preset if applied via var(--wp--custom--spacing--large) */
            padding-top: var(--space-8);
            /* 2rem */
            padding-bottom: var(--space-8);
        }

        /* First section after hero: slightly tighter */
        .wp-block-cover+.wp-block-group.has-section-padding {
            padding-top: var(--space-8);
            /* 1.5rem */
        }

        /* Utility classes (optional) */
        .section-tight {
            padding-top: var(--space-4);
            padding-bottom: var(--space-4);
        }

        .section-normal {
            padding-top: var(--space-8);
            padding-bottom: var(--space-8);
        }

        .section-roomy {
            padding-top: var(--space-12);
            padding-bottom: var(--space-12);
        }

        .no-vertical-pad {
            padding-top: 0 !important;
            padding-bottom: 0 !important;
        }

        /* Language-specific word breaking for CJK and RTL languages */
        .wp-block-heading:lang(zh),
        .wp-block-heading:lang(ja),
        .wp-block-heading:lang(ko),
        .wp-block-heading:lang(th),
        .wp-block-heading:lang(lo),
        .wp-block-heading:lang(my),
        .wp-block-heading:lang(km),
        .wp-block-heading:lang(ar),
        .wp-block-heading:lang(ur) {
            word-break: keep-all;
        }

        /* Fix for overflowing text in quotes */
        .wp-block-quote p {
            overflow-wrap: break-word;
            word-wrap: break-word;
            /* Legacy fallback */
            hyphens: auto;
        }

        .wp-block-media-text__content .wp-block-quote {
            margin-top: auto;
            width: 100%;
            box-sizing: border-box;
        }

        .wp-block-media-text__content {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
    }

    /* Site Logo & Branding */
    @layer base {

        /* Consolidated logo sizing (was duplicated in multiple places) */
        .wp-block-site-logo,
        .wp-block-site-logo img {
            max-height: var(--logo-h-desktop);
            width: auto;
            height: auto;
            object-fit: contain;
        }
    }

    /* Header & Navigation */
    @layer layout {

        /* Sticky header */
        header.wp-block-template-part {
            position: sticky;
            top: 0;
            z-index: 999;
            background-color: var(--wp--preset--color--background, #fff);
            border-bottom: 1px solid rgba(15, 8, 20, 0.08);
            transition: padding-top 0.2s ease;
        }

        /* Ensure header sticks on mobile devices */
        @media (max-width: 768px) {
            header.wp-block-template-part {
                position: sticky !important;
                top: 0 !important;
                z-index: 999 !important;
                background-color: var(--wp--preset--color--background, #fff) !important;
                height: auto !important;
                transform: none !important;
                width: 100% !important;
            }
        }

        body:not(.modal-open) header.wp-block-template-part {
            padding-top: env(safe-area-inset-top);
        }


        /* Reduce space after sticky header */
        header.wp-block-template-part+* {
            margin-top: 0 !important;
        }

        /* Ensure cover blocks start right after header */

        /* Sticky for Gutenberg .site-header */
        .site-header,
        .wp-block-group.site-header {
            position: sticky !important;
            top: 0 !important;
            z-index: 999 !important;
            width: 100% !important;
        }

        header.wp-block-template-part+.wp-block-cover {
            margin-top: 0 !important;
        }

        /* Optional: add a class to first section for more control */
        .first-content-block {
            padding-top: clamp(1.5rem, 3vw, 3rem);
        }

        /* Base header layout */
        .site-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1rem;
            padding: 0.5rem 1rem;
            box-sizing: border-box;
            min-height: 60px;
            pointer-events: auto;
        }

        /* Logo: keep fixed size, won't force wrapping */
        .site-header>.wp-block-site-logo,
        .site-header>.wp-block-site-logo img,
        .site-header>.site-logo-title {
            flex: 0 0 auto;
            max-height: var(--logo-h-desktop);
            height: auto;
            display: block;
        }

        /* Center column (navigation) — must be able to shrink */
        .site-header>.wp-block-group:nth-of-type(2),
        .site-header>.wp-block-navigation {
            flex: 1 1 0;
            min-width: 0;
            display: flex;
            justify-content: center;
            align-items: center;
        }

        /* Right column (language + socials) — stays compact */
        .site-header>.wp-block-group:last-of-type {
            display: flex;
            align-items: center;
            gap: 2rem;
            flex: 0 0 auto;
            white-space: nowrap;
            justify-content: flex-start !important;
        }

        /* Navigation spacing */
        header.wp-block-template-part nav.wp-block-navigation {
            flex: 1;
            display: flex;
            justify-content: center;
        }

        header.wp-block-template-part nav.wp-block-navigation ul.wp-block-navigation__container {
            gap: var(--nav-gap-desktop);
            justify-content: center;
        }

        /* Language switcher & social links (consolidated) */
        .language-switcher-wrapper {
            display: flex;
            justify-content: center;
            align-items: center;
            flex-wrap: nowrap;
        }

        .language-switcher {
            margin: 0;
            display: flex;
            /* gap: 0.5rem; */
            align-items: center;
            justify-content: center;
            white-space: nowrap;
            font-size: 14px;
        }

        .language-switcher a {
            text-decoration: none;
            font-size: 0.95rem;
            color: rgba(0, 0, 0, 0.85);
            padding: 6px;
            border-radius: 6px;
            transition: background 0.12s ease;
        }

        .language-switcher a:hover,
        .language-switcher a:focus,
        .language-switcher a.current-lang {
            background: rgba(6, 106, 171, 0.08);
            outline: none;
            font-weight: bold;
        }

        .language-switcher .sep {
            color: rgba(0, 0, 0, 0.35);
            margin: 0 6px;
        }

        .wp-block-social-links.is-style-logos-only .wp-social-link {
            background: transparent;
            border: none;
            width: var(--social-btn-size-desktop);
            height: var(--social-btn-size-desktop);
            padding: 0;
        }

        .wp-block-social-links.is-style-logos-only .wp-social-link svg {
            fill: currentColor;
            width: var(--social-icon-size-desktop);
            height: var(--social-icon-size-desktop);
        }

        /* Responsive visibility classes */
        .mobile-only {
            display: flex;
        }

        .desktop-only {
            display: none;
        }
    }

    /* Cover Blocks & Hero Sections */
    @layer base {

        /* Full-bleed background for specific cover block */
        #block-134005d0-d88d-4268-b099-d6fdb961fdb9 {
            position: relative;
            overflow: hidden;
        }

        #block-134005d0-d88d-4268-b099-d6fdb961fdb9 .wp-block-cover__image-background {
            position: absolute;
            left: 50%;
            top: 0;
            transform: translateX(-50%);
            width: 100vw;
            height: 100%;
            object-fit: cover;
            max-width: none;
            z-index: 0;
        }

        #block-134005d0-d88d-4268-b099-d6fdb961fdb9 .wp-block-cover__inner-container {
            position: relative;
            z-index: 1;
        }

        /* General cover block styling */
        .wp-block-cover {
            position: relative;
            overflow: hidden;
            margin-bottom: var(--space-8) !important;
        }

        .wp-block-cover .wp-block-cover__image-background {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
        }

        .wp-block-cover::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            pointer-events: none;
            background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.42) 35%, rgba(0, 0, 0, 0.18) 100%);
        }

        .wp-block-cover .wp-block-cover__inner-container {
            position: relative;
            z-index: 2;
            max-width: 820px;
            margin: 0 auto;
            padding: var(--wp--preset--spacing--40) 18px;
            color: #fff;
            text-align: center;
        }

        /* Cover block text content */
        .wp-block-cover .wp-block-group {
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }

        .wp-block-cover h1 {
            font-size: 3.2rem;
            margin: 0 0 0.25rem;
            line-height: 1.05;
        }

        .wp-block-cover h3 {
            font-size: 1.6rem;
            font-weight: 400;
            margin: 0 0 0.8rem;
            line-height: 1.4;
        }

        .wp-block-cover .wp-block-group p,
        .wp-block-cover p {
            font-size: 1.2rem;
            line-height: 1.6;
            margin: 8px 0;
        }

        /* Cover block buttons */
        .wp-block-cover .wp-block-buttons {
            display: flex;
            justify-content: center;
            gap: 12px;
            align-items: stretch;
            /* Changed from center */
            flex-wrap: wrap;
            margin-top: 16px;
        }

        .wp-block-cover .wp-block-button {
            display: flex;
            /* Changed from inline-flex */
            flex: 1 1 0;
            /* Allow buttons to grow and shrink equally */
            min-width: 150px;
            /* Retain minimum width */
            max-width: 280px;
            /* Added max-width to the wrapper */
            justify-content: center;
            margin: 0;
        }

        .wp-block-cover .wp-block-button__link {
            display: inline-block;
            width: 100%;
            /* Fill wrapper */
            text-align: center;
            /* Visual sizing (padding, radius, font-size) now comes from theme.json button element */
            transition: all 0.2s ease;
        }
    }

    /* Projects Grid & Slider */

    .projects-section {
        width: 100%;
        margin-left: auto;
        margin-right: auto;
        margin-block-start: 0 !important;
        padding: 0 var(--space-4);
    }

    /* Projects Filter */
    .projects-filter {
        display: flex;
        align-items: center;
        gap: 1rem;
        margin-bottom: 2rem;
        justify-content: flex-end;
        /* Move to right */
    }

    .filter-label {
        font-weight: 500;
        color: var(--color-text);
        font-size: 0.9rem;
    }

    .project-category-select {
        padding: 0.75rem 1rem;
        border: none;
        /* Remove border */
        border-bottom: 2px solid var(--color-border);
        /* Only bottom border */
        border-radius: 0;
        /* Remove border radius */
        background: transparent;
        /* Transparent background */
        color: var(--color-text);
        font-size: 0.95rem;
        font-weight: 500;
        cursor: pointer;
        transition: border-color var(--transition-base), background-color var(--transition-base);
        min-width: 200px;
        appearance: none;
        /* Remove default dropdown arrow */
        background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
        background-repeat: no-repeat;
        background-position: right 0.75rem center;
        background-size: 1.2em;
        padding-right: 2.5rem;
        /* Space for custom arrow */
    }

    .project-category-select:hover {
        border-bottom-color: var(--color-brand-ink);
        background-color: rgba(0, 0, 0, 0.02);
        /* Subtle hover background */
    }

    .project-category-select:focus {
        outline: none;
        border-bottom-color: var(--color-brand-ink);
        background-color: rgba(0, 0, 0, 0.03);
        box-shadow: 0 2px 0 0 var(--color-brand-ink);
        /* Bottom shadow instead of ring */
    }

    .projects-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
    }

    /* Responsive grid breakpoints */
    @media (max-width: 1200px) {
        .projects-grid {
            grid-template-columns: repeat(2, 1fr);
            gap: 1.25rem;
        }
    }

    @media (max-width: 920px) {
        .projects-grid {
            grid-template-columns: 1fr;
            gap: 1rem;
            max-width: 400px;
            margin: 0 auto;
        }
    }

    .projects-mobile-slider {
        display: none;
        /* Hidden by default, shown on mobile via media query */
        margin-top: var(--space-4);
    }

    .projects-grid .projects-item {
        position: relative;
        overflow: hidden;
        cursor: pointer;
        aspect-ratio: 4 / 3;
        /* Enforce a landscape aspect ratio */
    }

    .projects-grid .projects-item::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #000;
        opacity: 0;
        transition: opacity 0.4s var(--ease-out-quart);
        z-index: 1;
    }

    .projects-grid .projects-item:hover::after {
        opacity: 0.6;
    }

    .projects-grid .projects-item .project-info {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        opacity: 0;
        transition: opacity 0.4s var(--ease-out-quart);
        z-index: 2;
        pointer-events: none;
        color: #fff;
        text-align: center;
    }

    .projects-grid .projects-item:hover .project-info {
        opacity: 1;
    }

    .projects-grid .projects-item img {
        width: 100%;
        height: 100% !important;
        object-fit: cover;
        transition: transform 0.4s var(--ease-out-quart);
        border-radius: var(--border-radius-large);
    }



    .projects-grid .projects-item h3,
    .projects-grid .projects-item p {
        color: var(--color-text-inverse);
        text-shadow: var(--shadow-text);
    }

    .projects-grid .projects-item:hover h3,
    .projects-grid .projects-item:hover p {
        color: var(--color-text-inverse);
    }

    .projects-grid .projects-item h3 {
        margin-bottom: 0.8rem;
    }

    /* Enhanced image hover inside projects items (stronger zoom) */
    .projects-grid .projects-item:hover img {
        transform: scale(1.05);
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.30);
    }

    /* Projects slider (desktop) + mobile slider bullets unified */
    .projects-slider .swiper-pagination-bullet,
    .projects-mobile-slider .swiper-pagination-bullet {
        width: 10px !important;
        height: 10px !important;
        flex-shrink: 0 !important;
        flex-grow: 0 !important;
        margin: 0 2px !important;
        background-color: var(--color-brand-surface, rgba(248, 248, 248, 0.8)) !important;
        opacity: 0.7;
        border-radius: 50%;
        transition: all 0.2s ease;
        border: 1px solid var(--color-brand-ink, #0F0814);
    }

    .projects-slider .swiper-pagination-bullet-active,
    .projects-mobile-slider .swiper-pagination-bullet-active {
        background-color: var(--color-brand-ink, #0F0814) !important;
        opacity: 1;
        transform: scale(1.1);
    }

    .projects-slider .swiper-pagination-bullet:hover,
    .projects-mobile-slider .swiper-pagination-bullet:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    .projects-slider .swiper-slide {
        padding-bottom: 3rem;
        box-sizing: border-box;
    }

    .projects-slider .swiper-pagination,
    .projects-mobile-slider .swiper-pagination {
        bottom: 1rem;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 10px !important;
        /* moved slightly lower */
    }

    /* Projects: visibility control (slider only on mobile) */
    @media (max-width: 768px) {

        .projects-grid {
            display: none !important;
        }

        .projects-mobile-slider {
            display: block !important;
        }
    }

    @media (min-width: 769px) {
        .projects-mobile-slider {
            display: none !important;
        }

        .projects-grid {
            display: grid !important;
        }
    }

    /* Add padding to the last content block to prevent footer from being obscured */
    #main-content-end {
        padding: var(--space-4) var(--space-8) !important;
        /* Custom footer padding: 1rem top/bottom, 2rem left/right (thinner vertical, wider horizontal) */
        /* Override any generic wp-block-group rules that might affect footer */
        margin: 0 !important;
    }

    /* Remove any borders from footer image */
    #main-content-end .wp-block-image figure,
    #main-content-end .wp-block-image img,
    footer .wp-block-image figure,
    footer .wp-block-image img {
        border: none !important;
        outline: none !important;
        box-shadow: none !important;
    }

    /* Projects Accordion */

    /* Container that will be injected below the grid when a category is opened */
    .projects-accordion {
        margin-top: 2rem;
        display: none;
        /* Hidden until a category is opened */
        flex-direction: column;
        gap: 0;
        /* Borders define separation */
        position: relative;
    }

    .projects-accordion.is-open {
        display: flex;
    }

    /* Each project row inside the accordion */
    .project-row {
        display: flex;
        align-items: stretch;
        gap: 2.2rem;
        padding: 1.5rem 0;
        border-top: 1px solid rgba(0, 0, 0, 0.08);
        position: relative;
    }

    .project-row:first-child {
        border-top: none;
    }

    .project-row:last-child {
        border-bottom: none;
    }

    /* Alternating layout */
    .project-row.reverse {
        flex-direction: row-reverse;
    }

    /* Image / media column */
    .project-row .project-media {
        flex: 0 0 46%;
        display: flex;
        align-items: center;
    }

    .project-row .project-media figure {
        margin: 0;
        width: 100%;
    }

    .project-row .project-media img {
        width: 100%;
        height: 100%;
        max-height: 380px;
        object-fit: cover;
        border-radius: 14px;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.18);
        transition: transform 0.45s ease, box-shadow 0.45s ease;
    }

    .project-row:hover .project-media img {
        transform: scale(1.02);
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.22);
    }

    /* Text column */
    .project-row .project-content {
        flex: 1 1 54%;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .project-row .project-content h4 {
        margin: 0 0 0.75rem;
        font-size: 1.55rem;
        line-height: 1.2;
    }

    /* Restore project row paragraph styling (was displaced) */
    .project-row .project-content p {
        margin: 0 0 0.85rem;
        line-height: 1.55;
    }

    .project-row .project-actions {
        margin-top: 0.25rem;
    }

    .project-row button.project-open {
        background: #0F0814;
        /* new dark brand */
        color: #F8F8F8;
        border: 1px solid #0F0814;
        padding: 0.75rem 1.15rem;
        font-size: 0.95rem;
        border-radius: 24px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        letter-spacing: .5px;
        font-weight: 500;
        transition: background .3s ease, color .3s ease, box-shadow .3s ease, transform .25s ease;
    }

    .project-row button.project-open:hover {
        background: #1a1022;
        box-shadow: 0 4px 14px -2px rgba(15, 8, 20, .45);
    }

    .project-row button.project-open:active {
        transform: scale(.96);
    }

    /* Category state indicator (added as pseudo element on active card) */
    .projects-grid .projects-item.is-active {
        position: relative;
    }

    /* Arrow indicator removed in favor of cleaner visual */
    .projects-grid .projects-item.is-active::after {
        display: none;
    }

    /* Smoothly reveal accordion (mount + fade) */
    .projects-accordion.is-open {
        animation: accordionFade 0.45s ease;
    }

    @keyframes accordionFade {
        from {
            opacity: 0;
            transform: translateY(12px);
        }

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

    /* Accessibility focus styles */
    .projects-grid .projects-item:focus-visible,
    .project-row button.project-open:focus-visible {
        outline: 2px solid #0F0814;
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(15, 8, 20, .15);
    }

    /* MOBILE & SMALL SCREEN ADJUSTMENTS */
    @media (max-width: 920px) {
        .project-row {
            gap: 1.5rem;
        }

        .project-row .project-media img {
            max-height: 320px;
        }
    }

    @media (max-width: 768px) {

        /* Mobile: use slider (will be injected), hide desktop accordion + grid */
        .projects-grid,
        .projects-accordion {
            display: none !important;
        }

        .projects-mobile-slider {
            display: block;
        }

        /* Mobile filter styles */
        .projects-filter {
            flex-direction: column;
            gap: 0.75rem;
            margin-bottom: 1.5rem;
            text-align: center;
            justify-content: center;
            /* Center on mobile */
        }

        .filter-label {
            font-size: 0.85rem;
        }

        .project-category-select {
            min-width: auto;
            width: 100%;
            max-width: 280px;
            text-align: center;
            /* Center text on mobile */
        }

        .projects-mobile-slider .swiper-slide {
            padding: 0 0 2.25rem;
        }

        .projects-mobile-slider .project-card img {
            width: 100%;
            border-radius: 14px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
        }
    }

    @media (max-width: 520px) {
        .project-row .project-media img {
            .plan-carousel-bottom {
                margin-top: 1rem;
            }

            max-height: 220px;
        }

        .project-row .project-content h4 {
            font-size: 1.25rem;
        }
    }

    /* Remove bottom double border if accordion not open */
    .projects-accordion:not(.is-open) {
        border: none;
    }

    /* ============================================================================
   HERO / COVER LAYOUT UTILITIES (Hybrid full-bleed background + readable text)
   ----------------------------------------------------------------------------
   Usage Pattern in Block Editor:
   1. Outer Cover: set alignment to Full (alignfull) and add class `hero-cover`.
   2. Inside the Cover, wrap textual content in a Group block with class `hero-inner`.
      Optionally give that Group alignment Wide (alignwide) for an 80rem cap, or leave
      it unaligned to inherit base content size.
   3. If you need truly edge-to-edge text (rare), add class `hero-inner-full` instead.

   Rationale:
   - Cover background & media span full viewport width.
   - Text remains at a comfortable measure (content or wide size) to preserve readability.
   - Avoids removing core constraint rules globally; keeps design tokens intact.
============================================================================ */
    @layer layout {

        /* Ensure the cover itself removes any unintended inline max-width when nested */
        .wp-block-cover.alignfull.hero-cover {
            margin-left: 0;
            /* defensive: alignfull should already set this */
            margin-right: 0;
        }
    }

    @layer components {

        /* Constrain inner textual wrapper to wide width while allowing background full bleed */
        .wp-block-cover.alignfull.hero-cover>.wp-block-cover__inner-container>.hero-inner {
            max-width: var(--wp--style--global--wide-size, 80rem);
            margin-left: auto;
            margin-right: auto;
            padding-left: min(2rem, 5vw);
            padding-right: min(2rem, 5vw);
        }

        /* Variant: constrain to content size (use when you want the classic 42rem measure inside a visual full-bleed hero) */
        .wp-block-cover.alignfull.hero-cover>.wp-block-cover__inner-container>.hero-inner-content {
            max-width: var(--wp--style--global--content-size, 42rem);
            margin-left: auto;
            margin-right: auto;
            padding-left: min(2rem, 5vw);
            padding-right: min(2rem, 5vw);
        }

        /* Optional: fully unconstrained inner (use sparingly) */
        .wp-block-cover.alignfull.hero-cover>.wp-block-cover__inner-container>.hero-inner-full {
            max-width: none;
            width: 100%;
            padding-left: min(2rem, 5vw);
            padding-right: min(2rem, 5vw);
        }

        /* Utility to stretch media/background even if editor inserts nested Groups */
        .wp-block-cover.alignfull.hero-cover .wp-block-cover__background,
        .wp-block-cover.alignfull.hero-cover video,
        .wp-block-cover.alignfull.hero-cover img {
            object-fit: cover;
        }
    }

    @layer utilities {

        /* One-liner helper class to remove the constrained layout for a single direct child */
        .ignore-constrained-width {
            max-width: none !important;
        }
    }

    /* ============================================================================
   END PROJECTS SECTION (High Specificity)
   ============================================================================= */

    @layer components {

        /* Media query fixes for fullview modal */
        /* (utilities moved to top-level @layer utilities) */

        /* Contact Section */
        .wp-block-group.has-section-padding.contact {
            padding-bottom: 0;
        }

        /* Blockquotes & Quotes */

        .wp-block-quote {
            background: #f8f7f6;
            padding: 22px;
            border-radius: 10px;
            min-width: 0;
            /* Allows the block to shrink in a flex/grid container */
            overflow-wrap: break-word;
            word-wrap: break-word;
        }

        .wp-block-quote blockquote {
            margin: 0;
            font-style: italic;
            font-size: 1.05rem;
        }

        /* Target the row with text + quote */
        .wp-block-group.is-layout-flex {
            display: flex;
            flex-direction: row;
            gap: 2rem;
        }

        /* Features Grid */

        /* Outer grid container - 3 columns */
        .wp-block-group.is-layout-grid.grid-features,
        .wp-block-group__inner-container.is-layout-grid.grid-features {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 2rem;
            max-width: 1200px;
            margin-left: auto;
            margin-right: auto;
        }

        /* Inner groups should stretch */
        .wp-block-group.is-layout-grid.grid-features>.wp-block-group,
        .wp-block-group__inner-container.is-layout-grid.grid-features>.wp-block-group {
            width: 100%;
            max-width: none;
            justify-self: stretch;
        }

        /* Features typography */
        .grid-features h4 {
            margin-bottom: 0.5rem;
            font-size: 1.35rem;
            line-height: 1.2;
            text-align: center;
        }

        .grid-features p {
            font-size: 1.05rem;
            line-height: 1.6;
            text-align: center;
        }

        /* Center all content in features grid */
        .grid-features .wp-block-group {
            text-align: center;
        }

        /* Layout & Spacing */

        /* Apply minimal lateral padding to all main content sections */
        .main-content-padding,
        .wp-block-columns,
        main>.wp-block-group {
            padding-left: 1em;
            padding-right: 1em;
        }

        /* Remove padding for nested subsections */
        .wp-block-group .wp-block-group,
        .wp-block-columns .wp-block-group {
            padding-left: 0;
            padding-right: var(--wp--preset--spacing--20);
        }

        /* Responsive Design - Desktop First */

        /* Tablets and desktops: 768px and up */
        @media (min-width: 768px) {
            .center-nav {
                justify-content: center;
            }


        }

        /* Responsive Design - Mobile First */

        /* Large screens and tablets: 767px and down */
        @media (max-width: 767px) {

            /* Mobile: category slider + accordion below */
            .projects-mobile-slider {
                display: block;
                margin-bottom: 1rem;
            }

            .projects-grid {
                display: none !important;
            }

            .projects-accordion {
                display: flex !important;
            }

            .projects-mobile-slider .swiper-slide {
                padding: 0 0 1.75rem;
            }

            .projects-mobile-slider .category-card {
                text-align: center;
                cursor: pointer;
            }

            .projects-mobile-slider .category-card figure {
                margin: 0 0 .6rem;
                aspect-ratio: 4 / 3;
                /* Force landscape aspect ratio */
                overflow: hidden;
                border-radius: 14px;
            }

            .projects-mobile-slider .category-card img {
                width: 100%;
                height: 100% !important;
                object-fit: cover;
                /* Crop to fit landscape ratio */
                object-position: center;
                border-radius: 14px;
                box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
                transition: transform .4s ease, box-shadow .4s ease;
            }

            .projects-mobile-slider .category-card:hover img {
                transform: scale(1.03);
                box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
            }

            .projects-mobile-slider .category-card h3 {
                margin: .25rem 0 .35rem;
                font-size: 1.15rem;
            }

            .projects-mobile-slider .category-card p {
                margin: 0;
                font-size: .9rem;
                opacity: .8;
            }

            .wp-block-cover h3 {
                font-size: 1.4rem;
            }

            /* Features grid: 2 columns on tablets */
            .wp-block-group.is-layout-grid.grid-features,
            .wp-block-group__inner-container.is-layout-grid.grid-features {
                grid-template-columns: repeat(2, 1fr);
            }
        }

        /* Tablets: 1180px and down (merged former 980/976/948 rules) */
        @media (max-width: 1180px) {
            .site-header {
                gap: 0.6rem;
                /* padding: var(--header-pad-tablet);*/
                padding: var(--space-4) var(--space-8) !important;
            }

            .wp-block-navigation .wp-block-navigation-item__label {
                max-width: 130px;
                font-size: 0.95rem;
            }

            .wp-block-navigation .wp-block-navigation__container {
                gap: var(--nav-gap-tablet);
            }

            .site-header .wp-block-site-logo img,
            .wp-block-site-logo img {
                max-height: var(--logo-h-tablet);
                height: auto;
                width: auto;
            }


        }

        /* Force hamburger menu at 1180px and down */
        @media (max-width: 1180px) {

            /* 1. Hide the main desktop navigation links */
            .site-header .wp-block-navigation>.wp-block-navigation__container {
                display: none !important;
            }

            /* 2. Show the hamburger button */
            .wp-block-navigation__responsive-container-open {
                display: flex !important;
            }

            /* 3. Hide the mobile menu modal by default */
            .wp-block-navigation__responsive-container:not(.is-menu-open) {
                display: none !important;
            }

            /* 4. When the menu is open, ensure its container and the links inside are visible */
            .wp-block-navigation__responsive-container.is-menu-open {
                display: block !important;
                /* Or 'flex' if it's a flex container */
            }

            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
                display: flex !important;
                flex-direction: column;
                align-items: center;
                gap: 0 !important;
                padding-top: calc(3.25rem + env(safe-area-inset-top)) !important;
            }

            /* Ensure hamburger button is always clickable */
            .wp-block-navigation {
                position: relative !important;
                z-index: 1000 !important;
            }

            /* AGGRESSIVE WordPress Navigation Menu Fix - Nuclear Option for Safari */
            /* First, reset all elements that could interfere */
            body.has-modal-open .wp-site-blocks,
            body.has-modal-open .wp-block-group,
            body.has-modal-open header,
            body.has-modal-open main,
            body.has-modal-open footer,
            body.has-modal-open .wp-block-template-part {
                z-index: 1 !important;
                isolation: auto !important;
                transform: none !important;
                contain: none !important;
            }

            /* Force all non-navigation content to stay below */
            body.has-modal-open>*:not(.wp-block-navigation):not([class*="navigation"]) {
                z-index: 1 !important;
            }

            /* Create a new root stacking context for the navigation */
            body.has-modal-open .wp-block-navigation__responsive-container.has-modal-open.is-menu-open,
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open,
            .wp-block-navigation__responsive-container.has-modal-open.is-menu-open,
            .wp-block-navigation__responsive-container.is-menu-open {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                /* Use dynamic viewport units for iOS Safari while keeping fallbacks */
                height: 100vh !important;
                height: 100svh !important;
                height: 100dvh !important;
                z-index: 2147483647 !important;
                /* Maximum possible z-index */
                background-color: rgba(0, 0, 0, 0.8) !important;
                backdrop-filter: blur(4px) !important;
                -webkit-backdrop-filter: blur(4px) !important;
                display: block !important;
                overflow: hidden !important;
                -webkit-overflow-scrolling: touch !important;
                touch-action: none !important;
                isolation: isolate !important;
                /* Create new stacking context */
                contain: layout style paint !important;
                /* CSS containment */
                /* Force GPU rendering */
                -webkit-transform: translateZ(0) !important;
                transform: translateZ(0) !important;
                will-change: transform !important;
                /* Override any theme transforms */
                -webkit-perspective: 1000px !important;
                perspective: 1000px !important;
                /* Critical iOS Safari 15-16 fix: establish paint layer */
                -webkit-backface-visibility: hidden !important;
                backface-visibility: hidden !important;
            }

            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
                position: fixed !important;
                /* Changed from absolute to fixed */
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                z-index: 2147483647 !important;
                background-color: var(--wp--preset--color--background, #fff) !important;
                width: 100vw !important;
                height: 100vh !important;
                height: 100svh !important;
                height: 100dvh !important;
                display: flex !important;
                flex-direction: column !important;
                /* Respect iOS safe areas so buttons are not clipped */
                padding: calc(2rem + env(safe-area-inset-top)) calc(1rem + env(safe-area-inset-right)) 2rem calc(1rem + env(safe-area-inset-left)) !important;
                overflow-y: auto !important;
                -webkit-overflow-scrolling: touch !important;
                isolation: isolate !important;
                /* Force GPU rendering */
                -webkit-transform: translateZ(0) !important;
                transform: translateZ(0) !important;
                will-change: transform !important;
                /* Critical iOS Safari 15-16 fix */
                -webkit-backface-visibility: hidden !important;
                backface-visibility: hidden !important;
                /* Ensure it's above everything */
                pointer-events: auto !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            /* WordPress Core Navigation Overrides - Force display above everything */
            body.has-modal-open .wp-block-navigation__responsive-container[data-wp-class--has-modal-open="true"][data-wp-class--is-menu-open="true"],
            body.has-modal-open .wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                pointer-events: auto !important;
            }

            /* Ensure all menu content is visible and above everything */
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open * {
                z-index: inherit !important;
                position: relative !important;
                visibility: visible !important;
                opacity: 1 !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
                height: 100% !important;
                width: 100% !important;
                padding: 0 !important;
            }

            /* Ensure menu content is visible and properly styled on Safari */
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
                position: relative !important;
                z-index: 999999 !important;
                width: 100% !important;
                max-width: 400px !important;
                margin: 0 auto !important;
                padding: 2rem 1rem !important;
                background-color: var(--wp--preset--color--background, #fff) !important;
                border-radius: 0 !important;
                display: flex !important;
                flex-direction: column !important;
                align-items: center !important;
                justify-content: center !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
                display: block !important;
                width: 100% !important;
                text-align: center !important;
                margin: 0 !important;
                opacity: 1 !important;
                visibility: visible !important;
                transform: none !important;
                transition: all 0.3s ease !important;
                position: relative !important;
                z-index: 999999 !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
                display: block !important;
                padding: 0.72rem 0.9rem !important;
                color: var(--color-text, #0F0814) !important;
                text-decoration: none !important;
                font-size: 1rem !important;
                font-weight: 600 !important;
                border-radius: 12px !important;
                transition: all 0.3s ease !important;
                background-color: var(--wp--preset--color--background, #fff) !important;
                border: 1px solid rgba(0, 0, 0, .08) !important;
                width: 100% !important;
                box-sizing: border-box !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current],
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="true"] {
                background-color: var(--wp--preset--color--background, #fff) !important;
                color: var(--color-text, #0F0814) !important;
                border-color: rgba(0, 0, 0, .14) !important;
                transform: none !important;
                box-shadow: 0 1px 8px rgba(0, 0, 0, .06) !important;
                outline: none !important;
            }

            /* Ensure close button is visible and properly positioned */
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
                position: absolute !important;
                top: calc(0.75rem + env(safe-area-inset-top)) !important;
                right: calc(0.75rem + env(safe-area-inset-right)) !important;
                z-index: 9999999 !important;
                background: var(--wp--preset--color--background, #fff) !important;
                border: 2px solid #e5e5e5 !important;
                border-radius: 50% !important;
                padding: 0.75rem !important;
                width: 50px !important;
                height: 50px !important;
                display: flex !important;
                align-items: center !important;
                justify-content: center !important;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
                cursor: pointer !important;
                transition: all 0.3s ease !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close:hover {
                background: #f5f5f5 !important;
                border-color: #333 !important;
                transform: scale(1.1) !important;
            }

            /* Logo in mobile menu - now clickable! */
            .wp-block-navigation__responsive-container.is-menu-open .site-logo-title {
                position: absolute !important;
                top: calc(0.75rem + env(safe-area-inset-top)) !important;
                left: calc(0.75rem + env(safe-area-inset-left)) !important;
                z-index: 9999999 !important;
                border-radius: 8px !important;
                cursor: pointer !important;
                transition: opacity 0.2s ease, transform 0.2s ease !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .site-logo-title:hover {
                opacity: 0.8 !important;
                transform: scale(0.98) !important;
            }

            .wp-block-navigation__responsive-container.is-menu-open .site-logo-title:active {
                opacity: 0.7 !important;
                transform: scale(0.96) !important;
            }

            /* Match logo size to desktop header with proper sizing */
            .wp-block-navigation__responsive-container.is-menu-open .mobile-logo,
            .wp-block-navigation__responsive-container.is-menu-open .site-logo-title .wp-block-site-logo,
            .wp-block-navigation__responsive-container.is-menu-open .site-logo-title .wp-block-site-logo img,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo,
            .wp-block-navigation__responsive-container.is-menu-open .wp-block-site-logo img {
                max-height: var(--logo-h-desktop) !important;
                width: auto !important;
                height: auto !important;
                object-fit: contain !important;
                padding: 0.5rem 1rem 0.8rem 0.4rem !important
            }

            /* Prevent body scroll when mobile menu is open - Safari specific */
            body.has-modal-open {
                overflow: hidden !important;
                position: fixed !important;
                width: 100% !important;
                height: 100% !important;
            }

            /* Additional Safari-specific fixes for menu visibility */
            @supports (-webkit-appearance: none) {
                .wp-block-navigation__responsive-container.is-menu-open {
                    -webkit-transform: translateZ(0) !important;
                    transform: translateZ(0) !important;
                    will-change: transform !important;
                }

                .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
                    -webkit-transform: translateZ(0) !important;
                    transform: translateZ(0) !important;
                    will-change: transform !important;
                }
            }

            /* ========================================
               EXTENDABLE THEME SPECIFIC NAVIGATION FIX
               ======================================== */
            /* Override Extendable theme's navigation-customization.js interference */

            /* Force navigation to render in a new stacking context above everything else */
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open {
                /* Nuclear option: override ALL possible theme interference */
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                right: 0 !important;
                bottom: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                z-index: 2147483647 !important;
                background: rgba(0, 0, 0, 0.8) !important;
                display: block !important;
                visibility: visible !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                /* Override any theme JS inline styles */
                transform: none !important;
                translate: none !important;
                scale: none !important;
                rotate: none !important;
                /* Force new layer */
                isolation: isolate !important;
                contain: layout style paint !important;
                /* Safari specific */
                -webkit-transform: translateZ(0) !important;
                will-change: transform !important;
            }

            /* Ensure dialog is fully visible */
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
                position: fixed !important;
                top: 0 !important;
                left: 0 !important;
                width: 100vw !important;
                height: 100vh !important;
                background: var(--wp--preset--color--background, #fff) !important;
                z-index: 2147483647 !important;
                display: flex !important;
                flex-direction: column !important;
                visibility: visible !important;
                opacity: 1 !important;
                pointer-events: auto !important;
                /* Override theme JS */
                transform: none !important;
                translate: none !important;
                scale: none !important;
                rotate: none !important;
            }

            /* Force all navigation content to be visible */
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open * {
                visibility: visible !important;
                opacity: 1 !important;
                z-index: inherit !important;
                pointer-events: auto !important;
            }

            /* Override theme JavaScript that might hide elements */
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
            body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
                display: flex !important;
                visibility: visible !important;
                opacity: 1 !important;
                transform: none !important;
                position: relative !important;
            }

            /* Reset all other elements to prevent stacking context conflicts */
            body.has-modal-open .wp-site-blocks>*:not(.wp-block-navigation),
            body.has-modal-open header:not(:has(.wp-block-navigation)),
            body.has-modal-open main,
            body.has-modal-open footer {
                z-index: 1 !important;
                isolation: auto !important;
                contain: none !important;
                transform: none !important;
            }

            /* .wp-block-navigation__responsive-container_open {
                display: flex !important;
                z-index: 1001 !important;
                position: relative !important;
                pointer-events: auto !important;
            } */

            /* Reorganize header layout: Logo | Language+Social | Hamburger */
            .site-header {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap !important;
                gap: 0.5rem !important;
                max-width: 100% !important;
                overflow: hidden !important;
                padding: 0.5rem 0.75rem !important;
                /* keep explicit (token mismatch minor) */
            }

            /* Logo stays on the left - constrain size */
            .site-header .wp-block-columns .wp-block-column:first-child {
                order: 1 !important;
                flex: 0 0 auto !important;
                min-width: 0 !important;
                max-width: 25% !important;
            }

            /* Center: Language switcher + Social links (replace navigation) */
            .site-header .wp-block-columns .wp-block-column:last-child {
                order: 2 !important;
                flex: 1 1 0 !important;
                display: flex !important;
                justify-content: center !important;
                min-width: 0 !important;
                max-width: 50% !important;
                /* z-index: 1001 !important; */
                position: relative !important;
            }

            /* Right: Hamburger button (navigation column) */
            .site-header .wp-block-columns .wp-block-column:nth-child(2) {
                order: 3 !important;
                flex: 0 0 auto !important;
                display: flex !important;
                justify-content: flex-end !important;
                min-width: 0 !important;
                max-width: 25% !important;
                position: relative !important;
                pointer-events: none !important;
            }

            /* Re-enable pointer events only on the hamburger button itself */
            .site-header .wp-block-columns .wp-block-column:nth-child(2) .wp-block-navigation__responsive-container-open,
            .site-header .wp-block-columns .wp-block-column:nth-child(2) button {
                pointer-events: auto !important;
            }



            /* Ensure header columns container works properly */
            .site-header .wp-block-columns {
                flex-wrap: nowrap !important;
                width: 100% !important;
                gap: 0.5rem !important;
                max-width: 100% !important;
            }

            .site-header .wp-block-column {
                min-width: 0 !important;
            }
        }

        /* Standard mobile: 768px and down */
        @media (max-width: 768px) {

            /* Maintain the reorganized header layout from 820px */
            .site-header {
                display: flex !important;
                align-items: center !important;
                justify-content: space-between !important;
                flex-wrap: nowrap !important;
                gap: 0.4rem !important;
                max-width: 100% !important;
                padding: 0.45rem 0.5rem !important;
                height: auto !important;
                transform: none !important;
            }

            /* Logo stays on the left - order 1 */
            .site-header .wp-block-columns .wp-block-column:first-child {
                order: 1 !important;
                flex: 0 0 auto !important;
                min-width: 0 !important;
                max-width: 25% !important;
            }

            /* Center: Language switcher + Social links - order 2 */
            .site-header .wp-block-columns .wp-block-column:last-child {
                order: 2 !important;
                flex: 1 1 0 !important;
                display: flex !important;
                justify-content: center !important;
                min-width: 0 !important;
                max-width: 50% !important;
                /* z-index: 1001 !important; */
                position: relative !important;
            }

            /* Right: Hamburger button - order 3 */
            .site-header .wp-block-columns .wp-block-column:nth-child(2) {
                order: 3 !important;
                flex: 0 0 auto !important;
                display: flex !important;
                justify-content: flex-end !important;
                min-width: 0 !important;
                max-width: 25% !important;
                pointer-events: none !important;
            }

            /* Re-enable pointer events only on the hamburger button itself */
            .site-header .wp-block-columns .wp-block-column:nth-child(2) .wp-block-navigation__responsive-container-open,
            .site-header .wp-block-columns .wp-block-column:nth-child(2) button {
                pointer-events: auto !important;
            }

            /* Fix the columns container itself */
            .site-header .wp-block-columns {
                flex-wrap: nowrap !important;
                gap: 0.4rem !important;
                width: 100% !important;
                max-width: 100% !important;
            }

            /* Center column group - prevent social links from wrapping */
            .site-header .wp-block-columns .wp-block-column:last-child .wp-block-group {
                justify-content: flex-start !important;
                gap: 1rem !important;
                /* merged from former 780 breakpoint */
                flex-wrap: nowrap !important;
                align-items: center !important;
                min-width: 0 !important;
            }

            /* Language switcher - consistent with 780px for better mobile readability */
            .language-switcher-wrapper {
                justify-content: flex-end;
                margin-bottom: 0.25rem;
            }

            .language-switcher {
                font-size: var(--lang-fs-mobile);
                /* gap: 0.4rem; */
                white-space: nowrap;
            }

            .language-switcher a {
                padding: var(--lang-pad-mobile);
                font-size: var(--lang-fs-mobile);
            }

            .language-switcher .sep {
                margin: 0 0.15rem !important;
            }

            /* Social links - bigger mobile size for better usability */
            .wp-block-social-links.is-style-logos-only .wp-social-link {
                width: var(--social-btn-size-mobile);
                height: var(--social-btn-size-mobile);
            }

            .wp-block-social-links.is-style-logos-only .wp-social-link svg {
                width: var(--social-icon-size-mobile);
                height: var(--social-icon-size-mobile);
            }

            /* Keep logo at proper size on mobile - clean approach */
            .site-header .wp-block-site-logo img,
            .wp-block-site-logo img {
                max-height: var(--logo-h-mobile);
                height: auto;
                width: auto;
            }

            /* Minimal mobile padding - almost no lateral padding */
            .wp-block-group:not(.site-header):not(.wp-block-cover),
            .wp-block-columns,
            main>.wp-block-group {
                padding-left: 0.25rem;
                padding-right: 0.25rem;
            }

            /* No padding for nested subsections on mobile */
            .wp-block-group .wp-block-group,
            .wp-block-columns .wp-block-group {
                padding-left: 0;
            }

            /* Cover block responsive text */
            .wp-block-cover .wp-block-group p {
                padding-left: 0;
                padding-right: 0;
                font-size: 1.1rem;
            }

            .wp-block-cover h1 {
                font-size: 2rem;
            }

            .wp-block-cover h3 {
                font-size: 1.3rem;
            }

            .wp-block-cover .wp-block-group {
                max-width: 90%;
            }

            .wp-block-cover__inner-container {
                padding-left: 0;
                padding-right: 0;
            }

            /* Mobile button styling */
            .wp-block-cover .wp-block-button__link {
                width: 100%;
                max-width: 280px;
                margin: 0 auto;
                display: block;
                /* Allow theme.json values for font-size, padding, radius; keep motion */
                box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
                transition: all 0.15s ease-in-out;
            }

            .wp-block-cover .wp-block-button__link:active {
                transform: scale(0.97);
                box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
            }

            /* Social links mobile sizing - good touch targets */
            .wp-block-social-links.is-style-logos-only .wp-social-link {
                width: var(--social-btn-size-mobile);
                height: var(--social-btn-size-mobile);
            }

            .wp-block-social-links.is-style-logos-only .wp-social-link svg {
                width: var(--social-icon-size-mobile);
                height: var(--social-icon-size-mobile);
            }
        }

        /* Small mobile: 600px and down */
        @media (max-width: 600px) {
            .wp-block-cover h1 {
                font-size: 1.8rem;
            }

            .wp-block-cover h3 {
                font-size: 1.2rem;
            }

            /* Features grid: single column on mobile */
            .wp-block-group.is-layout-grid.grid-features,
            .wp-block-group__inner-container.is-layout-grid.grid-features {
                grid-template-columns: 1fr;
            }
        }

        /* Stack buttons on small screens */
        @media (max-width: 510px) {
            .wp-block-cover .wp-block-buttons {
                flex-direction: column;
            }

            .wp-block-cover .wp-block-button {
                width: 100%;
                flex: 1 1 100%;
            }
        }

        /* Mobile optimization for About section images */
        @media (max-width: 768px) {

            /* Stack flex containers vertically on mobile */
            .wp-block-group[style*="flex"] {
                flex-direction: column !important;
                align-items: center !important;
            }

            /* Adjust image sizes for mobile */
            .wp-image-425 {
                min-height: 350px !important;
                max-width: 100% !important;
                min-width: auto !important;
            }

            .wp-image-210 {
                min-height: 250px !important;
                max-width: 100% !important;
            }

            /* Reduce top margin on mobile */
            .wp-block-group:has(.wp-image-425) {
                margin-top: 2rem !important;
            }

            /* Ensure images take full width on mobile */
            .wp-block-image.size-large {
                width: 100% !important;
            }
        }

        /* Very small mobile: 599px and down */
        @media (max-width: 599px) {

            /* Small mobile - consistent sizing for readability */
            .language-switcher {
                font-size: var(--lang-fs-small);
                /* gap: 0.5rem; */
            }

            .language-switcher a {
                padding: var(--lang-pad-small);
                font-size: var(--lang-fs-small);
            }

            /* Small mobile logo sizing */
            .site-header .wp-block-site-logo img,
            .wp-block-site-logo img {
                max-height: var(--logo-h-small);
                height: auto;
                width: auto;
            }

            .wp-block-navigation__responsive-container .wp-block-navigation-item__content {
                font-size: 1rem;
                padding: 12px;
            }

            /* Further reduce image sizes for very small screens */
            .wp-image-425 {
                min-height: 280px !important;
            }

            .wp-image-210 {
                min-height: 200px !important;
            }

            /* Reduce spacing further on very small screens */
            .wp-block-group:has(.wp-block-image-425) {
                margin-top: 1.5rem !important;
            }
        }

        /* Extra small mobile: 380px and down - prevent overlap with hamburger menu */
        @media (max-width: 380px) {

            /* Also reduce gap to save space */
            .site-header .wp-block-columns .wp-block-column:last-child .wp-block-group {
                gap: 0.1rem !important;
            }
        }

        /* Image Blocks & About Section */

        /* WordPress Image Blocks - General Styling */
        .wp-block-image {
            margin: 1rem 0;
        }

        /* Exclude projects-grid images from height: auto rule */
        .wp-block-image img:not(.projects-grid img):not(.projects-item img) {
            max-width: 100%;
            height: auto;
            border-radius: 8px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }

        /* About Section - Add top margin to create space from previous section */
        .wp-block-group:has(.wp-image-425) {
            margin-top: 3rem !important;
        }

        /* About Section - Reduce Padding in Nested Groups */
        .wp-block-group .wp-block-group .wp-block-group {
            padding: 0.25rem !important;
        }

        .wp-block-group .wp-block-group .wp-block-group .wp-block-group {
            padding: 0 !important;
        }

        /* Specific targeting for your image containers - exclude footer area and publications */
        main .wp-block-group:has(.wp-block-image):not(#main-content-end):not(.publications) {
            padding: 0.25rem !important;
            margin: 0.25rem 0;
        }

        /* Make images larger - target your specific images */
        .wp-image-425,
        .wp-image-210 {
            width: 100% !important;
            height: auto !important;
            max-width: none !important;
        }

        /* Portrait image (ID 425) - make it much taller and wider */
        .wp-image-425 {
            min-height: 500px !important;
            min-width: 280px !important;
            object-fit: cover !important;
            max-width: 400px !important;
        }

        /* Landscape image (ID 210) - make it wider and taller */
        .wp-image-210 {
            min-height: 350px !important;
            object-fit: cover !important;
        }

        /* Image figure containers - remove default margins */
        .wp-block-image.size-large {
            margin: 0.25rem 0 !important;
        }

        /* Flex containers with images - adjust spacing */
        .wp-block-group[style*="flex"] .wp-block-image {
            flex: 1 1 auto;
            min-width: 250px;
        }

        /* Ensure images can grow in flex containers */
        .wp-block-group[style*="flex"]:has(.wp-block-image) {
            gap: 1rem;
            align-items: stretch;
        }

        /* Make flex containers allow images to be larger */
        .wp-block-group[style*="flex"] .wp-block-image figure {
            display: flex;
            width: 100%;
        }

        /* Media and Text Blocks - About Section */

        /* Media/Text unified spacing */
        .wp-block-media-text__content p {
            text-align: justify;
            text-justify: inter-word;
            margin: 0 0 0.75rem;
            line-height: 1.6;
            hyphens: auto;
            -webkit-hyphens: auto;
        }

        .wp-block-media-text {
            gap: 2rem;
            align-items: flex-start;
        }

        .wp-block-media-text__content {
            padding-top: var(--media-text-pad-block);
            padding-bottom: var(--media-text-pad-block);
            align-self: flex-start;
        }

        @media (min-width: 769px) {

            /* When image is on the left (default), add padding to the left of the text content */
            .wp-block-media-text:not(.has-media-on-the-right) .wp-block-media-text__content {
                padding-left: var(--media-text-pad-inline-large) !important;
            }

            /* When image is on the right, add padding to the right of the text content */
            .wp-block-media-text.has-media-on-the-right .wp-block-media-text__content {
                padding-right: var(--media-text-pad-inline-large) !important;
            }
        }

        /* Ensure proper spacing between media and text blocks */
        .wp-block-media-text+.wp-block-media-text {
            margin-top: 2rem !important;
        }

        /* 1. Responsive spacers - inside content blocks (100px) */
        .wp-block-media-text__content .wp-block-spacer {
            height: 100px !important;
        }

        /* Spacer between the two media-text blocks (50px) */
        .wp-block-media-text+.wp-block-spacer {
            height: 50px !important;
        }

        @media (max-width: 1420px) {
            .wp-block-media-text__content .wp-block-spacer {
                height: calc(100px - (100px * (1420px - 100vw) / 400px)) !important;
            }

            .wp-block-media-text+.wp-block-spacer {
                height: calc(50px - (50px * (1420px - 100vw) / 400px)) !important;
            }
        }

        @media (max-width: 1020px) {

            .wp-block-media-text__content .wp-block-spacer,
            .wp-block-media-text+.wp-block-spacer {
                height: calc(50px + 50vw / 8) !important;
                height: 0px !important;
                display: none;
            }
        }

        /* 2. Directional padding for text blocks */
        /* (Removed legacy directional overrides; unified above) */

        /* 3. Vertically center paragraphs, anchor quote to bottom */
        .wp-block-media-text__content {
            display: flex !important;
            flex-direction: column !important;
            justify-content: space-between !important;
            min-height: 100% !important;
        }

        .has-text-align-left {
            text-align: justify !important;
            text-justify: inter-word !important;
            hyphens: auto !important;
            -webkit-hyphens: auto !important;
        }

        /* Add margin-top: auto to first paragraph to center the text block */
        .wp-block-media-text__content>p:first-child {
            margin-top: auto !important;
        }

        /* Target the specific quote block and push it to bottom */
        .wp-block-media-text__content>.wp-block-quote:last-child {
            margin-top: auto !important;
            margin-bottom: 0 !important;
            padding: 1rem !important;
        }

        /* If quote is not the last child, find it after the last spacer */
        .wp-block-media-text__content .wp-block-spacer:last-of-type+.wp-block-quote {
            margin-top: auto !important;
            margin-bottom: 0 !important;
            padding: 1rem !important;
        }

        .wp-block-media-text__content .wp-block-quote p {
            text-align: center !important;
            font-style: italic;
            margin: 0 !important;
        }

        /* Mobile optimizations for media and text */
        @media (max-width: 768px) {
            .wp-block-media-text {
                gap: 1.5rem;
            }

            .wp-block-media-text__content {
                padding: 0 !important;
                display: block !important;
            }

            .wp-block-media-text__content p {
                margin-bottom: 0.6rem;
                font-size: 1rem;
            }

            .wp-block-media-text+.wp-block-media-text {
                margin-top: 1.5rem;
            }

            .wp-block-media-text__content .wp-block-quote {
                margin-top: 1rem;
            }
        }

        /* Utility Classes & Final Overrides */
    }

    body.modal-open {
        position: fixed;
        width: 100%;
        overflow: hidden;
    }

    /* Critical iOS Safari Fix: Force all page content below navigation modal */
    body.has-modal-open>*:not(.wp-block-navigation):not([class*="navigation"]) {
        z-index: 1 !important;
        position: relative !important;
    }

    /* Ensure body children respect z-index stacking */
    body.has-modal-open {
        isolation: isolate !important;
    }

    /* Hero / First Cover Spacing Overrides */
    @layer overrides {

        /* About Media/Text: figure margin resets & directional safeguards */
        .has-section-padding .wp-block-media-text .wp-block-media-text__media,
        .has-section-padding .wp-block-media-text .wp-block-media-text__media figure {
            margin: 0 !important;
            padding: 0 !important;
        }

        .has-section-padding .wp-block-media-text>.wp-block-media-text__media {
            margin-right: 0 !important;
        }

        .has-section-padding .wp-block-media-text.has-media-on-the-right>.wp-block-media-text__media {
            margin-left: 0 !important;
        }

        /* Migrated from nested overrides inside @layer components (flattened) */
        /* Ensure modal navigation is always clickable */
        .wp-block-navigation .wp-block-navigation__responsive-container,
        .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
            z-index: 11000;
            pointer-events: auto;
        }

        .wp-block-navigation .wp-block-navigation__responsive-container,
        .wp-block-navigation .wp-block-navigation__responsive-container button,
        .wp-block-navigation .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
            pointer-events: auto;
        }

        /* Ensure the mobile nav overlay sits above page content and fills the viewport
           ONLY when the menu is open. Prevents accidental overlay on desktop. */
        .wp-block-navigation__responsive-container {
            position: static !important;
            inset: auto !important;
            z-index: auto !important;
            background: transparent !important;
            isolation: auto;
        }

        /* Open state: take over the viewport (mobile contexts) */
        .wp-block-navigation__responsive-container.is-menu-open {
            position: fixed !important;
            inset: 0 !important;
            /* top/right/bottom/left: 0 */
            z-index: 11000 !important;
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            justify-content: center !important;
            -webkit-overflow-scrolling: touch;
            backdrop-filter: blur(10px);
            -webkit-backdrop-filter: blur(10px);
            background-color: var(--wp--preset--color--background, #fff);
            isolation: isolate;
        }

        /* Make the inner dialog transparent only when the menu is CLOSED.
           When open, allow specific open-state rules (above) to control styling. */
        .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-navigation__responsive-dialog {
            max-width: 100% !important;
            width: 100% !important;
            background: transparent !important;
            box-shadow: none !important;
        }

        /* Layout for the nav list when open */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
            display: flex !important;
            flex-direction: column !important;
            align-items: center !important;
            gap: 1.5rem !important;
            padding: 2rem 1rem !important;
            width: 100% !important;
            max-width: 520px !important;
        }

        /* Ensure links are visible over the dark overlay on all browsers (iOS included) */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item a,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item span {
            color: var(--color-brand-ink) !important;
            -webkit-text-fill-color: var(--color-brand-ink) !important;
            /* iOS rendering quirk */
            opacity: 1 !important;
            visibility: visible !important;
        }

        /* Desktop reset: on wider screens, never let the hidden container block the page */
        @media (min-width: 981px) {
            .wp-block-navigation__responsive-container {
                position: static !important;
                inset: auto !important;
                z-index: auto !important;
                background: transparent !important;
                pointer-events: none !important;
            }

            .wp-block-navigation__responsive-container .wp-block-navigation__responsive-dialog {
                background: transparent !important;
                box-shadow: none !important;
            }
        }

        /* OVERRIDES: SWIPER PAGINATION POSITION TWEAK */
        /* Swiper injects inline styles; increase specificity + !important to ensure movement. */
        .projects-slider.swiper,
        .projects-mobile-slider.swiper {
            position: relative;
        }

        .projects-slider.swiper .swiper-pagination.swiper-pagination-bullets,
        .projects-mobile-slider.swiper .swiper-pagination.swiper-pagination-bullets {
            bottom: 0.4rem !important;
            /* keep bullets inside container */
        }

        /* Add bottom padding so bullets have space and aren't clipped */
        .projects-slider.swiper,
        .projects-mobile-slider.swiper {
            padding-bottom: 2rem;
        }

        /* Tighten vertical padding inside the FIRST cover only */
        .entry-content>.wp-block-cover:first-of-type .wp-block-cover__inner-container {
            /* Adjust these values to taste; use design tokens for consistency */
            padding-top: var(--space-6) !important;
            /* 1.5rem */
            padding-bottom: var(--space-6) !important;
        }



        /* Neutralize horizontal global padding on the hero if present */
        .entry-content>.wp-block-cover:first-of-type.has-global-padding {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* Optionally reduce ALL covers globally (commented out by default) */
        /* .wp-block-cover .wp-block-cover__inner-container { */
        /*     padding-top: var(--space-8); */
        /*     padding-bottom: var(--space-8); */
        /* } */

        /* Shrink the spacer immediately following the hero (was 50px inline) */
        .entry-content>.wp-block-cover+.wp-block-spacer[style*="height: 50px"] {
            height: var(--space-6) !important;
            /* 1.5rem instead of 50px */
        }

        /* If you also want the inner flow groups site‑wide even tighter, adjust here */
        /* Current base sets them to var(--space-6); we reduce further for refinement */
        /* TODO - I'll comment this for now, maybe I'll use it later */
        /* .wp-block-group.is-layout-flow.wp-block-group-is-layout-flow {
            padding-top: var(--space-4) !important;
            padding-bottom: var(--space-4) !important;
        } */

        /* Minimal, non-invasive mobile nav and hero fixes */
        @layer overrides {

            /* Ensure cover overlay doesn’t block interactions */
            .wp-block-cover .wp-block-cover__background {
                pointer-events: none !important;
            }

            /* Keep hamburger toggle above nearby content */
            .site-header .wp-block-navigation__responsive-container-open {
                position: relative !important;
                z-index: 1100 !important;
            }

            /* Lock background scroll when WP opens nav modal */
            body.has-modal-open {
                overflow: hidden !important;
            }
        }

        /* =============================================================================
   MOBILE NAVIGATION VISIBILITY FIX
   ============================================================================= */
        @layer overrides {

            /* When the mobile menu is open, force the main content area to a lower z-index.
       This prevents the page content from rendering on top of the menu overlay,
       which was causing the menu items to be invisible on certain devices like iPhone 11. */
            body.has-modal-open main {
                z-index: -1 !important;
            }
        }

        /* OPTION A: Force zero padding for Media/Text content (overrides core) */
        .wp-block-media-text .wp-block-media-text__content {
            padding: 0 !important;
            /* enforce: eliminate any core/theme padding */
        }

        /* OPTION E: Compact spacing adjustments for Media/Text */
        .wp-block-media-text {
            gap: 1rem;
        }

        .wp-block-media-text__content p {
            margin: 0 0 0.5rem;
        }

        .wp-block-media-text__content p:last-of-type {
            margin-bottom: 0;
        }

        .wp-block-media-text__content>.wp-block-quote:last-child {
            padding: 0.5rem !important;
        }

        .wp-block-media-text__content .wp-block-spacer:last-of-type+.wp-block-quote {
            padding: 0.5rem !important;
        }

        /* About section (scoped) - gap between image and text */
        /* Desktop: maintain proper spacing */
        @media (min-width: 769px) {
            .has-section-padding .wp-block-media-text {
                gap: 2rem !important;
                column-gap: 2rem !important;
            }
        }

        /* Mobile: tighter spacing since elements stack */
        @media (max-width: 768px) {
            .has-section-padding .wp-block-media-text {
                gap: 0.5rem !important;
                column-gap: 0.5rem !important;
            }
        }

        /* Optional diagnostic helper (add class .debug-box-model in editor to see true padding vs margins) */
        .debug-box-model {
            outline: 1px dashed magenta !important;
            background: rgba(255, 0, 255, .04) !important;
        }

        /* MEDIA/TEXT JUSTIFICATION OVERRIDE
       --------------------------------------------------
       Justify paragraphs inside Media & Text blocks unless the editor explicitly
       applied an alignment class (has-text-align-*). This avoids fighting on
       deliberately centered / right‑aligned snippets while restoring the intended
       justified body copy. Placed in overrides layer to outrank core + earlier layers.
    */
        /* .wp-block-media-text__content p:not([class*="has-text-align"]) {
        text-align: justify;
        text-justify: inter-word;
        hyphens: auto;
        -webkit-hyphens: auto;
    } */
    }

    /* Publications Section - v7 */
    @layer overrides {
        .wp-block-columns {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            /* 4 equal columns */
            gap: 16px;
            /* Adjust gap as needed */
            align-items: stretch;
            /* Stretch items to fill the row height */
        }

        main .wp-block-group.has-section-padding.publications {
            padding-bottom: var(--space-8) !important;
        }

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

        .publication-column .wp-block-image {
            flex-grow: 1;
            display: flex;
        }

        .publication-column .wp-block-image figure {
            flex-grow: 1;
            margin: 0;
            display: flex;
        }

        .publication-column .wp-block-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* Responsive adjustment for smaller screens */
        @media (max-width: 782px) {
            .wp-block-columns {
                grid-template-columns: repeat(2, 1fr);
                /* 2 columns on tablets */
            }
        }

        @media (max-width: 500px) {
            .wp-block-columns {
                grid-template-columns: 1fr;
                /* 1 column on mobile */
            }
        }
    }

    /* =============================================================================
   INTERACTIVE ELEMENTS - PROJECT FUNCTIONALITY
   ============================================================================= */

    /* Note: Modal/fullview styles are in modal-layout.css */

    /* Enhanced project grid interactions */
    .projects-grid .projects-item {
        transition: all 0.3s ease;
    }

    .projects-grid .projects-item:focus {
        outline: 2px solid #0F0814;
        outline-offset: 4px;
    }

    .projects-grid .projects-item:focus-visible {
        box-shadow: 0 0 0 4px rgba(15, 8, 20, 0.15);
    }

    /* Category filter enhancements */
    .project-category-select:focus {
        border-bottom-color: #0F0814;
        outline: none;
        box-shadow: 0 2px 0 0 #0F0814;
    }

    /* Mobile optimizations for interactive elements - see modal-layout.css for fullview styles */

    /* Smooth transitions for all interactive elements */
    * {
        box-sizing: border-box;
    }

    .projects-item,
    .project-category-select,
    .testimonial-item,
    .publication-column .wp-block-image {
        transition: all var(--transition-base, 0.3s) ease;
    }

    /* Focus states for accessibility */
    .project-category-select:focus-visible,
    .projects-item:focus-visible {
        outline: 2px solid #0F0814;
        outline-offset: 3px;
        box-shadow: 0 0 0 4px rgba(15, 8, 20, 0.15);
    }

    /* ========================================
       SAFARI NAVIGATION FIX - HIGHEST PRIORITY LAYER
       ======================================== */
    /* (Consolidated to outside-of-layers block below for highest specificity) */

    /* Force all navigation content to be visible */
    body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open *,
    .wp-block-navigation__responsive-container.is-menu-open * {
        visibility: visible !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        z-index: inherit !important;
        position: relative !important;
    }

    /* Ensure navigation items are properly displayed */
    body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        height: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        margin: 0 !important;
        visibility: visible !important;
        opacity: 1 !important;
        transform: none !important;
    }

    body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: block !important;
        padding: 1.25rem 1rem !important;
        color: #333 !important;
        text-decoration: none !important;
        font-size: 1.3rem !important;
        font-weight: 600 !important;
        border-radius: 12px !important;
        background: var(--wp--preset--color--background, #fff) !important;
        border: 2px solid transparent !important;
        width: 100% !important;
        box-sizing: border-box !important;
        transition: all 0.3s ease !important;
    }

    body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
        background: var(--wp--preset--color--background, #fff) !important;
        color: var(--color-text, #0F0814) !important;
        border-color: rgba(0, 0, 0, .14) !important;
        transform: none !important;
        box-shadow: none !important;
    }

    /* Close button */
    body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
        position: absolute !important;
        top: 2rem !important;
        right: 2rem !important;
        z-index: 2147483647 !important;
        background: var(--wp--preset--color--background, #fff) !important;
        border: 2px solid #e5e5e5 !important;
        border-radius: 50% !important;
        padding: 0.75rem !important;
        width: 50px !important;
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
        cursor: pointer !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* Body scroll lock */
    body.has-modal-open {
        overflow: hidden !important;
        position: fixed !important;
        width: 100% !important;
        height: 100% !important;
    }

}

/* ========================================
   SAFARI NAVIGATION FIX - OUTSIDE ALL LAYERS (HIGHEST SPECIFICITY)
   ======================================== */
/* This is outside all @layer declarations for maximum specificity against CSS layers */

body.has-modal-open .wp-block-navigation__responsive-container.has-modal-open.is-menu-open,
body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open,
.wp-block-navigation__responsive-container.has-modal-open.is-menu-open,
.wp-block-navigation__responsive-container.is-menu-open {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    /* Force new stacking context */
    isolation: isolate !important;
    contain: layout style paint !important;
    /* Override any theme transforms */
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    /* Safari specific optimizations */
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
}

body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483647 !important;
    background: var(--wp--preset--color--background, #fff) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    padding: 2rem 1rem !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    /* Override theme transforms */
    transform: none !important;
    translate: none !important;
    scale: none !important;
    rotate: none !important;
    /* Safari optimizations */
    -webkit-transform: translateZ(0) !important;
    will-change: transform !important;
    isolation: isolate !important;
}

/* =============================================================
   FINAL MOBILE NAV SAFARI OVERRIDES (highest precedence)
   Ensures menu content renders visibly on iOS Safari
============================================================= */
@media (max-width: 1180px) {
    .has-modal-open .wp-block-navigation__responsive-container.is-menu-open {
        position: fixed !important;
        inset: 0 !important;
        z-index: 2147483647 !important;
        pointer-events: auto !important;
    }

    /* =============================================================
   Mobile nav – final visual tuning (spacing, colors, sizes)
   Keeps style consistent with site and avoids excessive gaps
============================================================= */
    @media (max-width: 1180px) {

        /* Dialog padding: leave room for logo/X, include safe-area */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
            padding: calc(1.25rem + env(safe-area-inset-top)) 1rem 1.25rem 1rem !important;
            background: var(--wp--preset--color--background, #fff) !important;
        }

        /* Stack and center links with compact gap */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
            display: flex !important;
            flex-direction: column !important;
            gap: 0 !important;
            padding: 0 !important;
            padding-top: calc(3.25rem + env(safe-area-inset-top)) !important;
            /* space under logo/X */
            width: 100% !important;
            max-width: 420px !important;
            margin: 0 auto !important;
        }

        /* Remove default margins between list items to rely solely on gap */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container>li.wp-block-navigation-item {
            margin: 0 !important;
        }

        /* Link appearance (neutral, no light blue) */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
            display: block !important;
            padding: 0.72rem 0.9rem !important;
            font-size: 1rem !important;
            font-weight: 600 !important;
            background: var(--wp--preset--color--background, #fff) !important;
            color: var(--color-text, #0F0814) !important;
            -webkit-text-fill-color: var(--color-text, #0F0814) !important;
            border: 1px solid rgba(0, 0, 0, .08) !important;
            border-radius: 12px !important;
            box-shadow: none !important;
            /* avoid appearing like separator lines */
            text-align: center !important;
            outline: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }

        /* Neutralize any theme highlight (light blue) for selected/active states */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:active,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current],
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="page"],
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content[aria-current="true"] {
            background: var(--wp--preset--color--background, #fff) !important;
            color: var(--color-text, #0F0814) !important;
            border-color: rgba(0, 0, 0, .14) !important;
            box-shadow: 0 1px 8px rgba(0, 0, 0, .06) !important;
            transform: none !important;
            outline: none !important;
        }

        /* Ultra-specific override for theme focus ring that may apply outline/shadow */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:focus-visible {
            outline: none !important;
            box-shadow: 0 1px 8px rgba(0, 0, 0, .06) !important;
        }

        /* Ensure there is no extra margin/padding on inner wrapper contributing to large gaps */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
            margin: 0 !important;
            padding-bottom: 0.25rem !important;
        }

        /* Kill any leftover margins or borders that create big gaps */
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
            margin: 0 !important;
            border: 0 !important;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::before,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container::after,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::before,
        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item::after {
            display: none !important;
            content: none !important;
            border: 0 !important;
        }

        /* Hard override for any theme focus ring/blue highlight */
        body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:any-link {
            background: var(--wp--preset--color--background, #fff) !important;
            color: var(--color-text, #0F0814) !important;
            outline: none !important;
            box-shadow: none !important;
            border-color: rgba(0, 0, 0, .12) !important;
        }

        /* Tuck logo/X a bit closer to edges */
        .wp-block-navigation__responsive-container.is-menu-open .site-logo-title {
            top: calc(0.5rem + env(safe-area-inset-top)) !important;
            left: calc(0.5rem + env(safe-area-inset-left)) !important;
        }

        .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
            top: calc(0.5rem + env(safe-area-inset-top)) !important;
            right: calc(0.5rem + env(safe-area-inset-right)) !important;
        }
    }

    /* When menu is open, neutralize sticky header so the overlay isn't clipped
       by a sticky/overflow/stacking context on Safari */
    .has-modal-open .site-header,
    .has-modal-open .wp-block-group.site-header {
        position: static !important;
        z-index: auto !important;
        overflow: visible !important;
        transform: none !important;
        contain: none !important;
        isolation: auto !important;
    }

    .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
    }

    .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 520px !important;
        margin: 0 auto !important;
        gap: 1.5rem !important;
    }

    .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
        display: flex !important;
        flex-direction: column !important;
        gap: 1.5rem !important;
        width: 100% !important;
    }

    .has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
        display: block !important;
        background: var(--wp--preset--color--background, #fff) !important;
        color: var(--color-brand-ink, #0F0814) !important;
        -webkit-text-fill-color: var(--color-brand-ink, #0F0814) !important;
        padding: 1.1rem 1rem !important;
        border-radius: 12px !important;
        border: 2px solid transparent !important;
        text-align: center !important;
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* When menu is open, demote page content layer and disable interactions
       so the overlay always sits above and receives the scroll/taps. */
    body.has-modal-open .wp-site-blocks,
    body.has-modal-open header,
    body.has-modal-open main,
    body.has-modal-open footer {
        z-index: 0 !important;
        pointer-events: none !important;
        transform: none !important;
        isolation: auto !important;
        contain: none !important;
    }

    body.has-modal-open .wp-block-navigation__responsive-container,
    body.has-modal-open .wp-block-navigation__responsive-container * {
        pointer-events: auto !important;
    }
}

/* =============================================================================
   NUCLEAR NAVIGATION Z-INDEX FIX - OUTSIDE ALL LAYERS
   Critical: This must be at the end of the file to override everything
   ============================================================================= */

/* Force navigation to render above ALL content when menu is open */
html body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open,
html body.has-modal-open .wp-block-navigation__responsive-container.has-modal-open.is-menu-open {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
    background: rgba(0, 0, 0, 0.8) !important;
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    isolation: isolate !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
}

html body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    width: 100dvw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 2147483647 !important;
    background: var(--wp--preset--color--background, #fff) !important;
    display: flex !important;
    flex-direction: column !important;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
    backface-visibility: hidden !important;
    -webkit-backface-visibility: hidden !important;
    padding: max(2rem, env(safe-area-inset-top) + 1rem) max(1rem, env(safe-area-inset-right)) 2rem max(1rem, env(safe-area-inset-left)) !important;
}

/* Force all page content to stay behind the navigation */
html body.has-modal-open>*:not(.wp-block-navigation__responsive-container),
html body.has-modal-open .wp-site-blocks,
html body.has-modal-open header:not(:has(.wp-block-navigation__responsive-container)),
html body.has-modal-open main,
html body.has-modal-open footer,
html body.has-modal-open .wp-block-template-part:not(:has(.wp-block-navigation__responsive-container)),
html body.has-modal-open .wp-block-group:not(:has(.wp-block-navigation__responsive-container)) {
    z-index: 1 !important;
    position: relative !important;
    isolation: auto !important;
    transform: none !important;
    pointer-events: none !important;
}

/* Ensure navigation container and all its children can receive clicks */
html body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open,
html body.has-modal-open .wp-block-navigation__responsive-container.is-menu-open * {
    pointer-events: auto !important;
}

/* iOS Safari specific: prevent background scroll */
html body.has-modal-open {
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
    overflow: hidden !important;
    -webkit-overflow-scrolling: auto !important;
}