:root {
            --primary: #2B5BA6;
            --secondary: #0099CC;
            --accent: #1E4D8B;
            --text-dark: #1D1D1F;
            --text-light: #86868B;
            --bg-white: #FFFFFF;
            --bg-light: #F5F5F7;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, Arial, sans-serif;
            background: var(--bg-white);
            color: var(--text-dark);
            -webkit-font-smoothing: antialiased;
            scroll-behavior: smooth;
        }

        /* Navigation */
        #main-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1000;
            background: rgba(255, 255, 255, 0.8);
            backdrop-filter: saturate(180%) blur(20px);
            -webkit-backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.1);
            transition: background 0.3s ease, border-color 0.3s ease;
        }
        #main-nav.over-hero:not(.scrolled) {
            background: transparent;
            border-bottom-color: transparent;
            backdrop-filter: none;
            -webkit-backdrop-filter: none;
        }
        #main-nav.over-hero:not(.scrolled) .nav-menu > li > a,
        #main-nav.over-hero:not(.scrolled) .dropdown-toggle {
            color: var(--nav-link-color-over, rgba(255, 255, 255, 0.95));
        }
        #main-nav.over-hero:not(.scrolled) .hamburger span {
            background: var(--nav-hamburger-color-over, white);
        }
        /* Underline (segnaposto) sotto le voci nav, override quando sopra hero */
        #main-nav.over-hero:not(.scrolled) .nav-menu > li > a::after {
            background: var(--nav-underline-color-over, var(--nav-underline-color, var(--secondary)));
        }
        .nav-container {
            padding: 1.2rem 2rem;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .nav-logo {
            display: flex;
            align-items: center;
            height: 50px;
            text-decoration: none;
        }
        .logo-desktop {
            display: block;
            height: 40px;
            width: auto;
            object-fit: contain;
        }
        .logo-mobile { display: none; }

        /* Logo normal/over-hero swap */
        .nav-logo .logo-over { display: none !important; }
        #main-nav.over-hero:not(.scrolled) .nav-logo .logo-desktop.logo-normal { display: none !important; }
        #main-nav.over-hero:not(.scrolled) .nav-logo .logo-desktop.logo-over { display: block !important; }
        #main-nav.over-hero:not(.scrolled) .nav-logo .logo-mobile.logo-over { display: none !important; }
        .hamburger {
            display: none;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: none;
            border: none;
            cursor: pointer;
            padding: 0;
            z-index: 1001;
            width: 44px;
            height: 44px;
            position: relative;
        }
        .hamburger span {
            position: absolute;
            width: 26px;
            height: 2px;
            background: var(--nav-hamburger-color, var(--text-dark));
            transition: all 0.3s ease;
            border-radius: 2px;
            left: 50%;
            transform: translateX(-50%);
        }
        .hamburger span:nth-child(1) { top: 14px; }
        .hamburger span:nth-child(2) { top: 21px; }
        .hamburger span:nth-child(3) { top: 28px; }
        .hamburger.active span:nth-child(1) {
            top: 21px;
            transform: translateX(-50%) rotate(45deg);
        }
        .hamburger.active span:nth-child(2) { opacity: 0; }
        .hamburger.active span:nth-child(3) {
            top: 21px;
            transform: translateX(-50%) rotate(-45deg);
        }
        .nav-menu {
            display: flex;
            align-items: center;
            list-style: none;
            gap: 2.5rem;
        }
        .nav-menu li { position: relative; }
        /* Direct nav-menu items only — exclude dropdown-menu links via the
           direct child selector .nav-menu > li > a so that dropdown items
           keep their own color/underline rules. */
        .nav-menu > li > a, .dropdown-toggle {
            color: var(--nav-link-color, var(--text-light));
            text-decoration: none;
            font-size: var(--nav-link-size, 0.875rem);
            font-weight: 500;
            transition: color 0.3s ease;
            padding-bottom: 4px;
            position: relative;
            cursor: pointer;
            display: inline-flex;
            align-items: center;
            gap: 4px;
        }
        .nav-menu > li > a::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 2px;
            background: var(--nav-underline-color, var(--secondary));
            transform: scaleX(0);
            transform-origin: right;
            transition: transform 0.3s ease;
        }
        .nav-menu > li > a:hover, .nav-menu > li > a.active,
        .dropdown-toggle:hover {
            color: var(--primary);
        }
        .nav-menu > li > a:hover::after, .nav-menu > li > a.active::after {
            transform: scaleX(1);
            transform-origin: left;
        }
        .dropdown-caret {
            font-size: 0.7rem;
        }
        /* Language switch nav item: globe icon + text */
        .nav-lang > a {
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .nav-lang .nav-lang-icon {
            width: 16px;
            height: 16px;
            flex-shrink: 0;
        }
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            left: auto;
            transform: translateY(10px);
            background: linear-gradient(135deg, var(--dd-bg-from, var(--primary)), var(--dd-bg-to, var(--secondary)));
            min-width: 240px;
            border-radius: 10px;
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18);
            padding: 0.5rem 0;
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
            margin-top: 8px;
            overflow: hidden;
        }
        .dropdown:hover .dropdown-menu {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }
        .dropdown-menu a {
            display: block;
            padding: 0.75rem 1.5rem;
            color: var(--dd-text, #ffffff);
            font-size: 0.875rem;
            white-space: nowrap;
            text-decoration: none;
            transition: background 0.25s ease;
        }
        .dropdown-menu a:hover {
            background: var(--dd-bg-hover, rgba(255, 255, 255, 0.18));
            color: var(--dd-text-hover, var(--dd-text, #ffffff));
        }
        .nav-menu .dropdown-menu a::after { display: none !important; }

        @media (max-width: 1024px) {
            .nav-container { padding: 1rem 1.5rem; }
            .hamburger { display: flex; }
            .nav-menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 400px;
                height: 100vh;
                height: 100dvh;
                background: rgba(255, 255, 255, 0.98);
                backdrop-filter: saturate(180%) blur(20px);
                flex-direction: column;
                justify-content: flex-start;
                padding: 6rem 2rem calc(2rem + env(safe-area-inset-bottom, 0px));
                gap: 0;
                transition: right 0.4s ease;
                box-shadow: -5px 0 30px rgba(0, 0, 0, 0.1);
                overflow-y: auto;
                -webkit-overflow-scrolling: touch;
                overscroll-behavior: contain;
            }
            .nav-menu.active { right: 0; }
            .nav-menu li { width: 100%; border-bottom: 1px solid rgba(0, 0, 0, 0.05); }
            .nav-menu > li > a, .dropdown-toggle {
                display: block;
                padding: 1.2rem 1rem;
                font-size: 1.1rem;
                color: var(--text-dark) !important;
                text-shadow: none !important;
            }
            /* Language switch: keep globe icon + text inline on mobile too */
            .nav-menu > li.nav-lang > a {
                display: flex;
                align-items: center;
                gap: 8px;
            }
            .nav-menu > li.nav-lang .nav-lang-icon {
                width: 18px;
                height: 18px;
            }
            /* Mobile dropdown: no gradient, no absolute, no animation that shifts layout */
            .dropdown-menu {
                position: static !important;
                transform: none !important;
                margin: 0 !important;
                padding: 0 !important;
                background: var(--bg-light) !important;
                box-shadow: none !important;
                border-radius: 0 !important;
                max-height: 0;
                overflow: hidden;
                opacity: 1 !important;
                visibility: visible !important;
                transition: max-height 0.3s ease !important;
            }
            .dropdown.active .dropdown-menu { max-height: 500px; }
            /* Mobile dropdown link: frozen layout, only color changes on tap */
            .nav-menu .dropdown-menu a {
                padding: 1rem 2rem !important;
                font-size: 0.95rem !important;
                border-left: 3px solid var(--secondary) !important;
                border-right: none !important;
                border-top: none !important;
                border-bottom: none !important;
                margin: 0 !important;
                color: var(--text-dark) !important;
                background: transparent !important;
                position: static !important;
                transform: none !important;
                transition: color 0.2s ease !important;
                box-shadow: none !important;
            }
            .nav-menu .dropdown-menu a:hover,
            .nav-menu .dropdown-menu a:focus,
            .nav-menu .dropdown-menu a:active {
                color: var(--primary) !important;
                background: transparent !important;
                padding: 1rem 2rem !important;
                border-left: 3px solid var(--secondary) !important;
                transform: none !important;
                margin: 0 !important;
            }
            .nav-menu .dropdown-menu a::before,
            .nav-menu .dropdown-menu a::after {
                display: none !important;
            }
        }

        @media (max-width: 768px) {
            .logo-desktop { display: none !important; }
            .logo-mobile.logo-normal { display: block; height: 40px; width: auto; object-fit: contain; }
            /* Over-hero mobile: hide normal, show over */
            #main-nav.over-hero:not(.scrolled) .nav-logo .logo-mobile.logo-normal { display: none !important; }
            #main-nav.over-hero:not(.scrolled) .nav-logo .logo-mobile.logo-over { display: block !important; height: 40px; width: auto; object-fit: contain; }
            #main-nav.over-hero:not(.scrolled) .nav-logo .logo-desktop.logo-over { display: none !important; }
        }

        /* Hero Section */
        .hero {
            position: relative;
            height: 100vh;
            min-height: 500px;
            overflow: hidden;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .hero-slider {
            position: absolute;
            inset: 0;
            z-index: 0;
        }
        .hero-slide {
            position: absolute;
            inset: 0;
            background-size: cover;
            background-position: center;
            opacity: 0;
            transition: opacity var(--hero-transition-duration, 3.5s) ease;
            transform: scale(1.0);
            will-change: opacity, transform;
        }
        .hero-slide.active {
            opacity: 1;
            animation: heroKenBurns var(--hero-kb-duration, 8.5s) ease-out forwards;
        }
        /* While a slide is leaving, keep its Ken Burns animation running to
           prevent the transform from snapping back to scale(1.0) mid-fadeout. */
        .hero-slide.leaving {
            opacity: 0;
            animation: heroKenBurns var(--hero-kb-duration, 8.5s) ease-out forwards;
        }
        @keyframes heroKenBurns {
            from { transform: scale(1.0) translate(0, 0); }
            to   { transform: scale(1.08) translate(-2%, -1%); }
        }

        /* Video hero */
        .hero-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            opacity: 0.7;
            transition: opacity 3s ease;
        }
        .hero-video.video-reveal {
            opacity: 1 !important;
        }
        /* iOS-style activity indicator shown while the hero video is loading.
           Positioned absolutely above the H1 inside .hero-content so it does NOT
           push the text/CTA down when it appears or up when it disappears.
           Inherits parent's fade-out via .hero-content.fade-out, and also fades
           on its own via the .ready class once the video can play. */
        .hero-video-spinner {
            position: absolute;
            left: 50%;
            bottom: 100%;
            transform: translateX(-50%);
            margin-bottom: 1.5rem;
            width: 36px;
            height: 36px;
            opacity: 0.95;
            transition: opacity 0.4s ease;
            pointer-events: none;
            border-radius: 50%;
            -webkit-mask: radial-gradient(circle, transparent 10px, #000 10.5px, #000 16px, transparent 16.5px);
                    mask: radial-gradient(circle, transparent 10px, #000 10.5px, #000 16px, transparent 16.5px);
            background: conic-gradient(
                rgba(255,255,255,0) 0deg,
                rgba(255,255,255,1) 360deg
            );
            animation: hero-spinner-rotate 0.9s linear infinite;
            filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.4));
        }
        .hero-video-spinner.ready {
            opacity: 0;
        }
        @keyframes hero-spinner-rotate {
            from { transform: translateX(-50%) rotate(0deg); }
            to   { transform: translateX(-50%) rotate(360deg); }
        }
        .hero-content.fade-out {
            opacity: 0;
            pointer-events: none;
        }
        .hero-content {
            position: relative;
            z-index: 2;
            text-align: center;
            color: white;
            padding: 2rem;
            text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
            max-width: 900px;
            transition: opacity 2s ease;
        }
        .hero-content h1 {
            font-size: clamp(2.5rem, 6vw, 5rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 1rem;
            line-height: 1.1;
        }
        .hero-content p {
            font-size: clamp(1rem, 2vw, 1.5rem);
            font-weight: 400;
            margin-bottom: 2rem;
            opacity: 0.95;
        }
        .hero-cta-group {
            display: flex;
            flex-wrap: wrap;
            gap: 14px;
            justify-content: center;
            align-items: center;
        }
        .cta-button {
            display: inline-block;
            padding: 14px 32px;
            background: var(--primary);
            color: white;
            text-decoration: none;
            border-radius: 30px;
            font-size: 1rem;
            font-weight: 500;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
            text-shadow: none;
        }
        .cta-button:hover {
            background: var(--accent);
            transform: translateY(-2px);
            box-shadow: 0 8px 28px rgba(0, 0, 0, 0.4);
        }
        .hero-arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            z-index: 3;
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            font-size: 28px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s ease;
            line-height: 1;
        }
        .hero-arrow:hover { background: rgba(255, 255, 255, 0.35); }
        .hero-arrow-prev { left: 24px; }
        .hero-arrow-next { right: 24px; }
        @media (max-width: 768px) {
            .hero-arrow { display: none !important; }
        }
        /* Swipe support: allow vertical page scroll but capture horizontal gestures.
           Disable text selection and iOS callout on ALL children of the hero
           section so touch events reach our listener instead of being consumed
           by the browser's selection/callout mechanism. */
        .hero {
            touch-action: pan-y;
        }
        .hero,
        .hero * {
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
            user-select: none !important;
            -webkit-touch-callout: none !important;
            -webkit-tap-highlight-color: transparent !important;
        }
        .hero .hero-slide img {
            -webkit-user-drag: none;
            user-drag: none;
            pointer-events: none;
        }
        .hero-dots {
            position: absolute;
            bottom: 30px;
            left: 50%;
            transform: translateX(-50%);
            z-index: 3;
            display: flex;
            gap: 10px;
        }
        .hero-dot {
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.4);
            border: none;
            cursor: pointer;
            transition: all 0.2s ease;
            padding: 0;
        }
        .hero-dot.active { background: white; transform: scale(1.3); }

        /* Shared section styles */
        section { padding: 6rem 2rem; }
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        .section-header {
            text-align: center;
            margin-bottom: 4rem;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        .section-eyebrow {
            font-size: 0.75rem;
            text-transform: uppercase;
            letter-spacing: 0.15em;
            color: var(--secondary);
            font-weight: 600;
            margin-bottom: 1rem;
        }
        .section-title {
            font-size: clamp(2rem, 4vw, 3rem);
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 1.25rem;
            color: var(--text-dark);
            line-height: 1.15;
        }
        .section-description {
            font-size: 1.0625rem;
            line-height: 1.7;
            color: var(--text-light);
            max-width: 720px;
            margin: 0 auto;
            text-align: center;
        }
        .section-header .section-description {
            margin-top: 1.5rem;
        }

        /* About Section */
        .about { background: var(--bg-white); }
        /* About section-header: smaller bottom margin since description is outside.
           Match the gap to the description→cards gap (3.5rem). */
        .about .section-header {
            margin-bottom: 0;
        }
        /* Description 1, description 2, and description-title-2: same width as
           the features-grid below (constrained by .container's max-width: 1200px). */
        .about-description-wide,
        .about-description-2-wide {
            max-width: 100%;
            margin: 1rem auto 2rem;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: center;
        }
        /* First description: a bit of breathing room below before the next title */
        .about-description-wide {
            margin-bottom: 2.5rem;
        }
        /* Second description: same as first, and bottom space before cards */
        .about-description-2-wide {
            margin-top: 0.4rem;
            margin-bottom: 3.5rem;
        }
        /* Description title 2: tight to its paragraph below (acts as one block) */
        .about-description-title-2-wide {
            max-width: 100%;
            margin: 0 auto;
            line-height: 1.3;
            color: var(--text-dark);
            text-align: center;
        }
        @media (max-width: 768px) {
            .about-description-wide,
            .about-description-2-wide {
                font-size: 1rem;
            }
        }
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .feature-card {
            background: var(--bg-white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
        }
        .feature-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
        }
        .feature-image {
            width: 100%;
            aspect-ratio: 16 / 10;
            overflow: hidden;
            background: var(--bg-light);
        }
        .feature-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
        }
        .feature-card:hover .feature-image img {
            transform: scale(1.05);
        }
        .feature-image-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--bg-light), var(--border));
        }
        .feature-content {
            padding: 1.75rem;
        }
        .feature-content h3 {
            font-size: 1.25rem;
            font-weight: 600;
            margin-bottom: 0.75rem;
            color: var(--text-dark);
        }
        .feature-content p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-light);
        }
        @media (max-width: 768px) {
            section { padding: 4rem 1.5rem; }
            .features-grid { grid-template-columns: 1fr; gap: 1.5rem; }
            .team-grid { grid-template-columns: 1fr; gap: 2rem; }
            .services-showcase { grid-template-columns: 1fr; gap: 1.5rem; }
            .quality-grid { grid-template-columns: 1fr; gap: 1.5rem; }
            .download-grid { grid-template-columns: 1fr; }
            .maps-container { gap: 1rem; width: calc(100% - 2rem); padding: 0; }
            .map-card { height: 380px; }
            .contact-form { padding: 1.75rem; }
        }

        /* Team Section */
        .team { background: var(--bg-light); }
        /* Team section-header: smaller bottom margin since description is outside. */
        .team .section-header {
            margin-bottom: 0;
        }
        /* Team description: same width as Services description (constrained by
           .container's max-width). */
        .team-description-wide {
            max-width: 100%;
            margin: 1rem auto 3.5rem;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: center;
        }
        @media (max-width: 768px) {
            .team-description-wide {
                font-size: 1rem;
            }
        }

        /* Sections with optional background image (team, quality) */
        .has-bg-image {
            position: relative;
            isolation: isolate;
        }
        .has-bg-image::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: var(--bg-image);
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
            opacity: var(--bg-image-opacity, 1);
            z-index: -1;
            pointer-events: none;
        }
        .team-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2.5rem;
            margin-top: 2rem;
        }
        .team-card {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-align: center;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease;
        }
        .team-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 50px rgba(0, 0, 0, 0.1);
        }
        .team-photo-wrapper {
            display: inline-block;
            padding: 4px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            margin-bottom: 1.5rem;
        }
        .team-photo {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            overflow: hidden;
            background: var(--bg-light);
            border: 4px solid var(--bg-white);
        }
        .team-photo img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .team-photo-placeholder {
            width: 100%;
            height: 100%;
            background: linear-gradient(135deg, var(--bg-light), var(--border));
        }
        /* Degree (Titolo di studio): eyebrow-style line above the name */
        .team-degree {
            color: var(--primary);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.4rem;
            line-height: 1.4;
        }
        .team-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
        }
        .team-role {
            font-size: 0.8125rem;
            color: var(--secondary);
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 0.75rem;
        }
        .team-card h4 {
            font-size: 0.9375rem;
            font-weight: 400;
            color: var(--text-light);
            line-height: 1.5;
            margin-bottom: 1.25rem;
        }
        .team-card h4 strong {
            color: var(--text-dark);
            font-weight: 600;
        }
        .social-links {
            display: flex;
            justify-content: center;
            gap: 0.75rem;
        }
        .social-links a {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background: var(--bg-light);
            color: var(--text-light);
            display: flex;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .social-links a:hover {
            background: var(--primary);
            color: white;
            transform: translateY(-3px);
        }
        .social-icon {
            width: 18px;
            height: 18px;
        }

        /* Services Section */
        .services { background: var(--bg-white); }
        /* Services section-header: smaller bottom margin since description is outside.
           Match the gap pattern used by About / Contact. */
        .services .section-header {
            margin-bottom: 0;
        }
        /* Services description: same width as the cards grid below
           (constrained by .container's max-width). */
        .services-description-wide {
            max-width: 100%;
            margin: 1rem auto 3.5rem;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: center;
        }
        @media (max-width: 768px) {
            .services-description-wide {
                font-size: 1rem;
            }
        }
        /* Group header: eyebrow + h3 + description, sits above each tiles grid.
           Provides clear visual separation between Tecnologie and Servizi groups. */
        .services-group-header {
            text-align: center;
            margin: 2rem auto 2rem;
            max-width: 900px;
        }
        /* First group header sits closer to the section description above */
        .services-group-header:first-of-type {
            margin-top: 0.5rem;
        }
        /* Subsequent group headers (gruppo 2) get extra top breathing room */
        .services-showcase + .services-group-header {
            margin-top: 4rem;
        }
        .services-group-eyebrow {
            margin-bottom: 0.6rem;
        }
        .services-group-title {
            font-size: 1.65rem;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 0.75rem;
            line-height: 1.25;
        }
        .services-group-description {
            font-size: 1rem;
            line-height: 1.65;
            color: var(--text-light);
            margin: 0 auto;
            max-width: 720px;
        }
        @media (max-width: 768px) {
            .services-group-title { font-size: 1.4rem; }
            .services-group-description { font-size: 0.95rem; }
            .services-showcase + .services-group-header { margin-top: 3rem; }
        }
        .services-showcase {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .service-tile {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .service-tile:hover {
            transform: translateY(-6px);
            box-shadow: 0 20px 50px rgba(43, 91, 166, 0.12);
            border-color: transparent;
        }
        .service-icon {
            width: 72px;
            height: 72px;
            margin: 0 auto 1.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            border-radius: 18px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: white;
            font-size: 28px;
            transition: transform 0.4s ease;
        }
        .service-tile:hover .service-icon {
            transform: scale(1.1) rotate(5deg);
        }
        .service-tile h3 {
            font-size: 1.3rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.75rem;
        }
        .service-tile p {
            font-size: 0.95rem;
            line-height: 1.6;
            color: var(--text-light);
        }

        /* Partners carousel */
        .partners-block {
            margin-top: 5rem;
            overflow: hidden;
        }
        .partners-title {
            text-align: center;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary);
            margin-bottom: 2rem;
        }
        .partners-carousel {
            position: relative;
            width: 100%;
            overflow: hidden;
            padding: 1rem 0;
        }
        .partners-track {
            display: flex;
            width: max-content;
            animation: scroll-partners 30s linear infinite;
        }
        .partners-track:hover {
            animation-play-state: paused;
        }
        .partner-card {
            min-width: 230px;
            height: 110px;
            border-radius: 14px;
            flex-shrink: 0;
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 1.5rem 2rem;
            margin-right: 2rem;
        }
        .partner-card:hover {
            transform: scale(1.06) translateY(-4px);
        }
        .partner-card img {
            max-width: 100%;
            max-height: 100%;
            object-fit: contain;
        }
        @keyframes scroll-partners {
            0% { transform: translateX(0); }
            100% { transform: translateX(-50%); }
        }
        @media (max-width: 768px) {
            .partner-card {
                min-width: 170px;
                height: 90px;
                padding: 1rem 1.5rem;
                margin-right: 1.5rem;
            }
        }

        /* Quality Section */
        /* Strategy Section ("Perché siamo un partner strategico") — coordinated
           with About/Services/Team: container 1200px, section-header centered,
           wide description text inside container. */
        .strategy { background: var(--bg-white); }
        .strategy .section-header {
            margin-bottom: 0;
        }
        /* Description: same look as services-description-wide / team-description-wide */
        .strategy-description {
            max-width: 100%;
            margin: 1rem auto;
            font-size: 1.05rem;
            line-height: 1.75;
            color: var(--text-light);
            text-align: center;
        }
        .strategy-description:first-of-type {
            margin-top: 1rem;
        }
        .strategy-description:last-of-type {
            margin-bottom: 2.5rem;
        }
        /* Bullets eyebrow: small intro text above the bullets card, aligned with it.
           Centered horizontally with comfortable margin before the card. */
        .strategy-bullets-eyebrow {
            max-width: 880px;
            margin: 0 auto 1.5rem;
            text-align: center;
        }

        /* Bullets: card-like list, max-width comparable to features-grid alignment */
        .strategy-bullets {
            max-width: 880px;
            margin: 0 auto 3rem;
            padding: 1.5rem 2rem;
            list-style: none;
            background: var(--bg-light);
            border-radius: 16px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }
        .strategy-bullets li {
            position: relative;
            padding: 0.7rem 0 0.7rem 2rem;
            font-size: 1rem;
            line-height: 1.65;
            color: var(--text-dark);
            border-bottom: 1px solid var(--border);
        }
        .strategy-bullets li:last-child {
            border-bottom: none;
            padding-bottom: 0.3rem;
        }
        .strategy-bullets li:first-child {
            padding-top: 0.3rem;
        }
        .strategy-bullets li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 1.15rem;
            width: 8px;
            height: 8px;
            border-radius: 50%;
            background: var(--bullet-dot-bg, linear-gradient(135deg, var(--primary), var(--secondary)));
            box-shadow: 0 0 0 4px rgba(43, 91, 166, 0.08);
        }
        .strategy-bullets li:first-child::before {
            top: 0.75rem;
        }
        /* Closing as card container (when closingBoxed=true) */
        .strategy-closing-box {
            max-width: 880px;
            margin: 0 auto;
            padding: 2rem 2.25rem;
            background: var(--bg-light);
            border-radius: 16px;
            border-left: 4px solid var(--primary);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
        }
        .strategy-closing-box .strategy-closing {
            margin: 0;
            font-size: 1.0625rem;
            line-height: 1.75;
            color: var(--text-dark);
            text-align: left;
        }
        /* Closing without box (closingBoxed=false): plain paragraph */
        .strategy-closing--plain {
            max-width: 880px;
            margin: 0 auto;
            font-size: 1.05rem;
            line-height: 1.75;
            color: var(--text-light);
            text-align: center;
        }
        @media (max-width: 768px) {
            .strategy-description {
                font-size: 1rem;
            }
            .strategy-bullets {
                padding: 1rem 1.25rem;
                margin-bottom: 2rem;
            }
            .strategy-bullets li {
                font-size: 0.95rem;
            }
            .strategy-closing-box {
                padding: 1.5rem 1.5rem;
            }
            .strategy-closing-box .strategy-closing,
            .strategy-closing--plain {
                font-size: 1rem;
            }
        }

        /* Quality Section */
        .quality { background: var(--bg-light); }
        /* Quality section-header: smaller bottom margin since description is outside */
        .quality .section-header {
            margin-bottom: 0;
        }
        /* Quality description: same width as the form intro separator
           (calc(100% - 3rem), max 1100px). Constrained by .container's max-width too. */
        .quality-description-wide {
            max-width: 100%;
            margin: 1rem auto 3.5rem;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: center;
        }
        @media (max-width: 768px) {
            .quality-description-wide {
                font-size: 1rem;
            }
        }
        .quality-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 2rem;
            margin-top: 2rem;
        }
        .cert-card {
            background: var(--bg-white);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-align: center;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                        border-color 0.4s ease;
            position: relative;
            overflow: hidden;
            isolation: isolate;
        }
        /* Gradient overlay layered behind content — fades in/out for smooth bg transition */
        .cert-card::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            opacity: 0;
            transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
            z-index: -1;
            border-radius: inherit;
        }
        .cert-card:hover {
            transform: translateY(-6px);
            box-shadow: 0 16px 40px rgba(43, 91, 166, 0.12);
            border-color: transparent;
        }
        .cert-card:hover::before {
            opacity: 1;
        }
        .cert-card:hover h3,
        .cert-card:hover p {
            color: #fff !important;
        }
        .cert-icon {
            width: 90px;
            height: 90px;
            margin: 0 auto 1.5rem;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            transition: transform 0.4s ease;
        }
        .cert-card:hover .cert-icon {
            transform: scale(1.1) rotate(5deg);
        }
        .cert-icon i {
            font-size: 3rem;
            color: var(--secondary);
            transition: color 0.4s ease;
        }
        .cert-card:hover .cert-icon i {
            color: #fff;
        }
        .cert-icon img {
            max-width: 90%;
            max-height: 90%;
            object-fit: contain;
            transition: opacity 0.3s ease;
        }
        .cert-img-default {
            opacity: 1;
        }
        .cert-img-hover {
            position: absolute;
            top: 0; left: 0; right: 0; bottom: 0;
            margin: auto;
            opacity: 0;
            filter: brightness(0) invert(1);
        }
        .cert-card.cert-swap:hover .cert-img-default { opacity: 0; }
        .cert-card.cert-swap:hover .cert-img-hover { opacity: 1; }
        .cert-card h3 {
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.75rem;
            transition: color 0.4s ease;
        }
        .cert-card p {
            font-size: 0.9375rem;
            line-height: 1.6;
            color: var(--text-light);
            transition: color 0.4s ease;
        }
        .quality-closing {
            max-width: 760px;
            margin: 3.5rem auto 0;
            text-align: center;
            font-size: 1.0625rem;
            line-height: 1.7;
            color: var(--text-light);
        }
        /* Quality closing text wide: same width as the certs grid above and
           downloads below (constrained by .container's max-width). */
        .quality-closing-wide {
            max-width: 100%;
            margin: 3.5rem auto 3.5rem;
            text-align: center;
            font-size: 1.0625rem;
            line-height: 1.7;
            color: var(--text-light);
        }
        @media (max-width: 768px) {
            .quality-closing-wide {
                font-size: 1rem;
                margin: 2.5rem auto 2.5rem;
            }
        }

        /* Download Section */
        .download-section { margin-top: 3rem; }
        .download-title {
            text-align: center;
            font-size: 1.1rem;
            font-weight: 600;
            color: var(--secondary);
            margin-bottom: 2rem;
        }
        .download-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 1.75rem;
            max-width: 1100px;
            margin: 0 auto;
        }

        /* Download card — fedele all'originale Meta-HTS */
        .download-card {
            background: linear-gradient(135deg, #ffffff 0%, #f8fafc 100%);
            border: 1px solid rgba(43, 91, 166, 0.08);
            border-radius: 20px;
            padding: 2.5rem 2rem;
            text-decoration: none;
            color: var(--text-dark);
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 1.5rem;
            position: relative;
            overflow: hidden;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        }
        .download-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(90deg, var(--primary), var(--secondary), var(--primary));
            background-size: 200% 100%;
            transform: scaleX(0);
            transform-origin: left;
            transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .download-card:hover::before {
            transform: scaleX(1);
            animation: download-shimmer 2s infinite;
        }
        @keyframes download-shimmer {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        .download-card:hover {
            transform: translateY(-10px) scale(1.01);
            box-shadow: 0 20px 60px rgba(43, 91, 166, 0.1);
            border-color: transparent;
        }

        /* Icon circle (FA icon mode) */
        .download-icon {
            width: 90px;
            height: 90px;
            background: linear-gradient(135deg, rgba(43, 91, 166, 0.08), rgba(0, 153, 204, 0.08));
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            flex-shrink: 0;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .download-icon::before {
            content: '';
            position: absolute;
            inset: -3px;
            border-radius: 50%;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            opacity: 0;
            z-index: -1;
            transition: opacity 0.5s ease;
        }
        .download-card:hover .download-icon::before {
            opacity: 0.3;
            animation: download-pulse 2s infinite;
        }
        @keyframes download-pulse {
            0%, 100% { transform: scale(1); opacity: 0.3; }
            50% { transform: scale(1.1); opacity: 0.5; }
        }
        .download-icon i {
            font-size: 2.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .download-card:hover .download-icon {
            transform: scale(1.15) rotate(10deg);
            background: linear-gradient(135deg, var(--primary), var(--secondary));
        }
        .download-card:hover .download-icon i {
            -webkit-text-fill-color: white;
            transform: scale(1.1);
        }

        /* Image circle variant (same size/shape as icon mode) */
        .download-icon.download-icon-img {
            overflow: hidden;
            padding: 0;
        }
        .download-icon.download-icon-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            position: relative;
            z-index: 1;
            transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .download-card:hover .download-icon.download-icon-img img {
            transform: scale(1.1);
        }
        .download-icon.download-icon-empty {
            background: linear-gradient(135deg, var(--bg-light), rgba(0, 0, 0, 0.06));
        }

        /* Content */
        .download-content {
            text-align: center;
            width: 100%;
        }
        .download-name {
            font-size: 1.25rem;
            font-weight: 700;
            color: var(--text-dark);
            margin-bottom: 0.5rem;
            transition: all 0.3s ease;
            letter-spacing: -0.01em;
        }
        .download-card:hover .download-name {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        .download-meta {
            font-size: 0.9375rem;
            color: var(--text-light);
            font-weight: 500;
            margin-bottom: 0.75rem;
        }
        .file-badge {
            display: inline-block;
            padding: 0.25rem 0.75rem;
            background: rgba(43, 91, 166, 0.08);
            color: var(--primary);
            border-radius: 999px;
            font-size: 0.75rem;
            font-weight: 600;
            letter-spacing: 0.02em;
        }

        /* Action button */
        .download-action {
            width: 100%;
            padding: 0.875rem 2rem;
            background: var(--bg-light);
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            font-weight: 600;
            font-size: 0.9375rem;
            color: var(--primary);
            transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
            position: relative;
            overflow: hidden;
        }
        .download-action::before {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            transform: translateY(100%);
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .download-action i,
        .download-action span {
            position: relative;
            z-index: 1;
            transition: all 0.4s ease;
        }
        .download-card:hover .download-action {
            transform: scale(1.05);
        }
        .download-card:hover .download-action::before {
            transform: translateY(0);
        }
        .download-card:hover .download-action i,
        .download-card:hover .download-action span {
            color: #fff;
        }
        .download-card:hover .download-action i {
            animation: download-bounce 0.8s ease infinite;
        }
        @keyframes download-bounce {
            0%, 100% { transform: translateY(0); }
            50% { transform: translateY(5px); }
        }

        /* ═══ GALLERY SECTION ═══ */
        .gallery-section {
            background: var(--bg-light);
            padding-left: 0;
            padding-right: 0;
        }
        /* Header e filterBar restano centrati nel container; il masonry esce
           dal container per occupare l'intera larghezza dello schermo. */
        .gallery-section .container { padding-left: 2rem; padding-right: 2rem; }
        @media (max-width: 768px) {
            .gallery-section .container { padding-left: 1.5rem; padding-right: 1.5rem; }
        }
        .gallery-filter-bar {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-wrap: wrap;
            gap: 8px;
            padding: 0 24px 52px;
        }
        .gf-btn {
            background: var(--gf-bg, var(--bg-white));
            border: 1px solid var(--gf-border, rgba(0, 0, 0, 0.1));
            border-radius: 40px;
            padding: 8px 20px;
            font-family: inherit;
            font-size: 10px;
            font-weight: 400;
            letter-spacing: 0.22em;
            text-transform: uppercase;
            color: var(--gf-text, var(--text-light));
            cursor: pointer;
            transition: background 0.22s, border-color 0.22s, color 0.22s, box-shadow 0.22s;
            white-space: nowrap;
        }
        .gf-btn:hover {
            background: var(--gf-hover-bg, var(--gf-bg, var(--bg-white)));
            color: var(--gf-hover-text, var(--text-dark));
            border-color: var(--gf-hover-border, var(--text-light));
        }
        .gf-btn.active {
            background: var(--gf-active-bg, var(--text-dark));
            border-color: var(--gf-active-border, var(--text-dark));
            color: var(--gf-active-text, #fff);
            box-shadow: 0 2px 12px rgba(0, 0, 0, 0.14);
        }

        #gallery-masonry-wrap {
            width: calc(100% - 10px);
            margin: 0 5px;
            position: relative;
            min-height: 200px;
            box-sizing: border-box;
            transition: height 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }
        .gm-item {
            position: absolute;
            overflow: hidden;
            cursor: pointer;
            background: rgba(0, 0, 0, 0.04);
            border-radius: 6px;
            transition:
                left 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                top 0.48s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.28s ease,
                transform 0.28s ease;
        }
        .gm-item.hidden {
            opacity: 0;
            pointer-events: none;
            transform: scale(0.97);
        }
        .gm-item img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.55s;
        }
        .gm-item:hover img {
            transform: scale(1.06);
            filter: brightness(0.85);
        }
        .gm-ov {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            padding: 18px;
            opacity: 0;
            transition: opacity 0.4s;
            background: linear-gradient(to top, rgba(0, 0, 0, 0.4), transparent 60%);
            pointer-events: none;
        }
        .gm-item:hover .gm-ov { opacity: 1; }
        .gm-ov span {
            color: #fff;
            font-size: 10px;
            letter-spacing: 0.28em;
            text-transform: uppercase;
        }

        /* ═══ GALLERY LIGHTBOX ═══ */
        #gallery-lightbox {
            display: none;
            position: fixed;
            inset: 0;
            z-index: 99999;
            background: rgba(245, 244, 242, 0.96);
            backdrop-filter: blur(18px);
            -webkit-backdrop-filter: blur(18px);
            align-items: center;
            justify-content: center;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        #gallery-lightbox.open { display: flex; }
        #gallery-lightbox.visible { opacity: 1; }
        #gl-inner {
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 20px;
            max-width: calc(100vw - 120px);
            max-height: calc(100vh - 80px);
        }
        #gl-track {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gl-frame {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        .gl-frame img {
            display: block;
            max-width: 100%;
            max-height: calc(100vh - 140px);
            object-fit: contain;
            border-radius: 4px;
            box-shadow: 0 8px 60px rgba(0, 0, 0, 0.15), 0 2px 12px rgba(0, 0, 0, 0.08);
            user-select: none;
            -webkit-user-drag: none;
        }
        #gl-close {
            position: fixed;
            top: 24px;
            right: 32px;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            background: rgba(26, 26, 26, 0.07);
            border: 1px solid rgba(26, 26, 26, 0.1);
            color: var(--text-dark);
            font-size: 14px;
            cursor: pointer;
            line-height: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: background 0.2s, border-color 0.2s;
            z-index: 100010;
        }
        #gl-close:hover {
            background: rgba(26, 26, 26, 0.12);
            border-color: rgba(26, 26, 26, 0.2);
        }
        /* Lightbox arrows: minimal, no circle background, light grey */
        #gl-prev, #gl-next {
            position: fixed;
            top: 50%;
            transform: translateY(-50%);
            width: 48px;
            height: 48px;
            background: transparent;
            border: none;
            color: rgba(160, 160, 160, 0.9);
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0;
            font-size: 28px;
            transition: color 0.2s ease, transform 0.15s ease;
            -webkit-tap-highlight-color: transparent;
        }
        #gl-prev { left: 20px; }
        #gl-next { right: 20px; }
        #gl-prev:hover, #gl-next:hover {
            color: rgba(200, 200, 200, 1);
        }
        #gl-prev:active, #gl-next:active {
            transform: translateY(-50%) scale(0.92);
        }
        #gl-cap {
            font-size: 10px;
            letter-spacing: 0.3em;
            text-transform: uppercase;
            color: var(--text-light);
            text-align: center;
        }
        @media (max-width: 768px) {
            #gl-prev, #gl-next { display: none; }
            /* Top bar band: opaque strip at the very top of the lightbox that
               always holds the close button, impossible for images to cover. */
            #gallery-lightbox::before {
                content: '';
                position: fixed;
                top: 0;
                left: 0;
                right: 0;
                height: calc(60px + env(safe-area-inset-top, 0px));
                background: linear-gradient(to bottom, rgba(245, 244, 242, 0.98), rgba(245, 244, 242, 0));
                z-index: 100005;
                pointer-events: none;
            }
            /* Reserve a clear band at the top for the close button so tall
               portrait images can't cover it. Inner content sits below it. */
            #gl-inner {
                max-width: calc(100vw - 24px);
                max-height: calc(100dvh - 110px);
                margin-top: calc(72px + env(safe-area-inset-top, 0px));
            }
            .gl-frame img {
                /* Leave room for the top band (close btn) + caption below */
                max-height: calc(100dvh - 170px);
            }
            /* Bigger, more visible, always-on-top close target on mobile */
            #gl-close {
                top: calc(10px + env(safe-area-inset-top, 0px));
                right: 16px;
                width: 44px;
                height: 44px;
                font-size: 18px;
                background: rgba(26, 26, 26, 0.9);
                border: none;
                color: #fff;
                box-shadow: 0 2px 14px rgba(0, 0, 0, 0.3);
                z-index: 100010;
            }
        }
        @media (max-width: 480px) {
            .gallery-filter-bar { padding: 0 16px 32px; gap: 6px; }
            .gf-btn { padding: 6px 14px; font-size: 9px; letter-spacing: 0.18em; }
        }

        /* Contact Section */
        .contact { background: var(--bg-white); }
        .contact-description-title {
            margin: 1.25rem 0 0.5rem;
            line-height: 1.3;
            color: var(--text-dark);
        }
        /* Contact section-header: smaller bottom margin since description is outside.
           Match the gap to the description→maps gap (3.5rem). */
        .contact .section-header {
            margin-bottom: 0;
        }
        /* Description and form-intro: contact description matches the form-intro
           separator width (calc(100% - 3rem), max 1100px or 1300px with side desc).
           form-intro stays full-width since it sits between maps and form. */
        .contact-description-wide {
            width: calc(100% - 3rem);
            max-width: 1100px;
            margin: 1rem auto 3.5rem;
            padding: 0;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: center;
        }
        @media (min-width: 1025px) {
            .contact-description-wide--wide {
                max-width: 1300px;
            }
        }
        .contact-form-intro,
        .contact-after-form {
            max-width: none;
            margin: 1rem auto 2rem;
            padding: 0 1.5rem;
            font-size: 1.05rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: center;
        }
        /* formIntro paragraph: tight to its title (acts as a single block) */
        .contact-form-intro {
            margin-top: 0.4rem;
            margin-bottom: 2.5rem;
        }
        /* afterForm: centered between form/locations block and footer.
           Generous top margin so it sits halfway between content above and
           the footer below; bottom margin of 0 lets the section padding handle
           the gap to the footer. */
        .contact-after-form {
            margin-top: 3.5rem;
            margin-bottom: 0;
            max-width: 800px;
        }
        @media (max-width: 768px) {
            .contact-description-wide {
                width: calc(100% - 2rem);
                font-size: 1rem;
            }
            .contact-form-intro,
            .contact-after-form {
                padding: 0 1rem;
                font-size: 1rem;
            }
            .contact-after-form { margin-top: 2.5rem; }
        }
        .maps-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 480px), 1fr));
            gap: 1.5rem;
            margin: 0 auto;
            padding: 0;
            width: calc(100% - 3rem);
            max-width: 1100px;
        }
        @media (min-width: 1025px) {
            .maps-container--wide {
                max-width: 1300px;
            }
        }
        /* Wrap: each map + its address label, stacked vertically.
           This keeps each label attached to its own map on every viewport. */
        .map-card-wrap {
            display: flex;
            flex-direction: column;
            gap: 1rem;
            min-width: 0;
        }
        .map-address-cell {
            display: flex;
            align-items: flex-start;
            gap: 0.65rem;
            color: var(--text-dark);
            font-size: 0.95rem;
            font-weight: 500;
            line-height: 1.5;
            min-width: 0;
        }
        .map-address-cell i {
            color: var(--primary);
            font-size: 1rem;
            margin-top: 0.2em;
            flex-shrink: 0;
        }
        .map-address-cell span {
            min-width: 0;
            word-break: break-word;
        }

        /* Form intro separator: optional horizontal line between map addresses
           and the form intro title. Shown only when color is set in the panel.
           Inline style on the element overrides border-top-color. */
        .contact-form-intro-sep {
            margin: 3rem auto 0;
            border: none;
            border-top: 1px solid;
            opacity: 1;
            width: calc(100% - 3rem);
            max-width: 1100px;
        }
        /* Wider variant: when the side description is shown, the sep matches the
           3-column wrapper width on desktop (≥1025px). Below that, it falls back
           to the standard width since the side description is hidden. */
        @media (min-width: 1025px) {
            .contact-form-intro-sep--wide {
                max-width: 1300px;
            }
        }
        /* When the separator is present, tighten the gap above the form-intro-title
           since the separator itself already provides the visual break. */
        .contact-form-intro-sep + .contact-form-intro-title {
            margin-top: 2rem;
        }
        @media (max-width: 768px) {
            .contact-form-intro-sep { width: calc(100% - 2rem); margin-top: 2rem; }
            .contact-form-intro-sep + .contact-form-intro-title { margin-top: 1.5rem; }
        }

        /* Form intro title: same gap from addresses as description→maps gap.
           Margin-bottom small so the paragraph below feels attached. */
        .contact-form-intro-title {
            max-width: none;
            margin: 3.5rem auto 0;
            padding: 0 1.5rem;
            line-height: 1.3;
            color: var(--text-dark);
            text-align: center;
        }
        @media (max-width: 768px) {
            .contact-form-intro-title { padding: 0 1rem; }
        }
        .map-card {
            background: var(--bg-white);
            border-radius: 16px;
            overflow: hidden;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
            display: flex;
            flex-direction: column;
            height: 440px;
            min-width: 0;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
        }
        .map-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 12px 35px rgba(43, 91, 166, 0.12);
        }
        .map-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 1.25rem 1.5rem;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            gap: 1rem;
        }
        .map-header-content h4 {
            font-size: 1.05rem;
            font-weight: 600;
            margin-bottom: 0.125rem;
        }
        .map-header-content p {
            font-size: 0.8125rem;
            opacity: 0.9;
            margin: 0;
        }
        .map-action-btn {
            background: rgba(255, 255, 255, 0.2);
            backdrop-filter: blur(10px);
            color: #fff;
            text-decoration: none;
            padding: 0.5rem 1rem;
            border-radius: 8px;
            font-size: 0.8125rem;
            font-weight: 500;
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            transition: background 0.2s ease;
            white-space: nowrap;
            flex-shrink: 0;
        }
        .map-action-btn:hover {
            background: rgba(255, 255, 255, 0.3);
        }
        .map-iframe {
            flex: 1;
            border: none;
            width: 100%;
        }
        .map-placeholder {
            flex: 1;
            background: var(--bg-light);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text-mute);
            font-size: 0.875rem;
            text-align: center;
            padding: 2rem;
        }

        /* Contact wrapper: form + locations side by side on desktop.
           Width matches the form intro separator (calc(100% - 3rem), max 1100px)
           and centered horizontally for visual breathing room. */
        .contact-wrapper {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
            gap: 1.5rem;
            width: calc(100% - 3rem);
            max-width: 1100px;
            margin: 0 auto;
            align-items: start;
        }
        /* When only form (no info cards): keep narrower and centered too. */
        .contact-wrapper-form-only,
        .contact-wrapper-info-only {
            grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr));
        }

        /* Side description column (left of form). Desktop only (≥1025px).
           Hidden on tablet/mobile. The wrapper gets a wider max-width and
           a 3-column layout when this is present. */
        .contact-side {
            display: none; /* default: hidden (overridden on desktop) */
        }
        .contact-side-desc-title {
            margin: 0 0 0.6rem 0;
            line-height: 1.3;
            color: var(--text-dark);
            text-align: right;
        }
        .contact-side-desc {
            margin: 0;
            font-size: 0.9375rem;
            line-height: 1.7;
            color: var(--text-light);
            text-align: right;
        }
        @media (min-width: 1025px) {
            .contact-wrapper-with-side {
                grid-template-columns: 280px minmax(0, 440px) minmax(0, 440px);
                max-width: 1300px;
            }
            .contact-wrapper-with-side.contact-wrapper-form-only {
                grid-template-columns: 280px minmax(0, 440px);
                max-width: 760px;
            }
            .contact-wrapper-with-side.contact-wrapper-info-only {
                grid-template-columns: 280px minmax(0, 440px);
                max-width: 760px;
            }
            .contact-side {
                display: block;
                padding: 0.5rem 0;
            }
        }

        @media (max-width: 768px) {
            .contact-wrapper { width: calc(100% - 2rem); gap: 2rem; }
        }
        .contact-form {
            background: var(--bg-white);
            padding: 2.5rem;
            border-radius: 20px;
            box-shadow: 0 6px 25px rgba(0, 0, 0, 0.06);
        }
        .contact-form .form-group-row {
            margin-bottom: 1rem;
        }
        .contact-form input,
        .contact-form textarea {
            width: 100%;
            padding: 0.875rem 1rem;
            border: 1px solid rgba(0, 0, 0, 0.08);
            background: var(--bg-light);
            border-radius: 10px;
            font-family: inherit;
            font-size: 0.9375rem;
            color: var(--text-dark);
            transition: all 0.3s ease;
        }
        .contact-form input:focus,
        .contact-form textarea:focus {
            outline: none;
            border-color: var(--primary);
            background: var(--bg-white);
            box-shadow: 0 0 0 3px rgba(43, 91, 166, 0.1);
        }
        .contact-form textarea {
            resize: vertical;
            min-height: 120px;
        }
        .contact-form button[type="submit"],
        .contact-form button {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            border: none;
            padding: 0.875rem 2rem;
            border-radius: 8px !important;
            font-family: inherit;
            font-size: 0.9375rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            width: 100%;
        }
        .contact-form button:hover {
            transform: translateY(-2px);
            box-shadow: 0 10px 30px rgba(43, 91, 166, 0.3);
        }
        .contact-form button:disabled {
            opacity: 0.6;
            cursor: not-allowed;
            transform: none;
        }
        .form-message {
            margin-top: 1rem;
            padding: 0.875rem 1rem;
            border-radius: 10px;
            text-align: center;
            font-size: 0.875rem;
            font-weight: 500;
            display: none;
        }

        .contact-info {
            display: flex;
            flex-direction: column;
            gap: 1rem;
        }
        .info-card {
            background: var(--bg-white);
            padding: 1.5rem;
            border-radius: 16px;
            display: flex;
            gap: 1rem;
            align-items: flex-start;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 0;
        }
        .info-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(43, 91, 166, 0.1);
            border-color: var(--primary);
        }
        .info-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.1rem;
            flex-shrink: 0;
        }
        .info-content {
            flex: 1;
            min-width: 0;
        }
        .info-content h4 {
            font-size: 0.9375rem;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 0.25rem;
        }
        .info-content p {
            font-size: 0.875rem;
            color: var(--text-light);
            line-height: 1.5;
            margin: 0;
            word-wrap: break-word;
        }
        .info-content p a {
            color: inherit;
            text-decoration: none;
        }
        .info-content p a:hover {
            color: var(--primary);
        }

        /* Location card: structured contact card with title + address + contacts list */
        .location-card {
            background: var(--bg-white);
            padding: 1.75rem;
            border-radius: 16px;
            border: 1px solid rgba(0, 0, 0, 0.06);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: 0.75rem;
        }
        .location-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 10px 30px rgba(43, 91, 166, 0.1);
            border-color: var(--primary);
        }
        .location-title {
            font-size: 1.05rem;
            font-weight: 700;
            color: var(--text-dark);
            margin: 0 0 0.25rem;
            letter-spacing: -0.01em;
        }
        .location-row {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            font-size: 0.9375rem;
            line-height: 1.5;
            color: var(--text-light);
            min-width: 0;
        }
        .location-row i {
            color: var(--primary);
            font-size: 1rem;
            margin-top: 0.2em;
            flex-shrink: 0;
            width: 1.25rem;
            text-align: center;
        }
        .location-row span {
            min-width: 0;
            word-break: break-word;
        }
        .location-row a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .location-row a:hover {
            color: var(--primary);
        }
        .location-contact-label {
            color: var(--text-mute);
            font-weight: 500;
        }

        /* ===== FOOTER ===== */
        .site-footer {
            background: linear-gradient(180deg, var(--text-dark), #0a0a0f);
            color: rgba(255, 255, 255, 0.75);
            padding: 4rem 2rem 0;
            font-size: 0.9375rem;
        }
        .site-footer .container {
            max-width: 1400px;
            margin: 0 auto;
        }
        .footer-grid {
            display: grid;
            grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
            gap: 3rem;
            padding-bottom: 3rem;
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        }
        .footer-col h4 {
            font-size: 1rem;
            font-weight: 600;
            color: #fff;
            margin-bottom: 1.25rem;
            letter-spacing: -0.01em;
        }
        .footer-col ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }
        .footer-col ul li {
            margin-bottom: 0.75rem;
        }
        .footer-col ul li a {
            color: rgba(255, 255, 255, 0.7);
            text-decoration: none;
            font-size: 0.875rem;
            transition: color 0.2s ease;
        }
        .footer-col ul li a:hover {
            color: var(--secondary);
        }
        .footer-col-brand .footer-logo {
            max-width: 200px;
            max-height: 70px;
            margin-bottom: 1.25rem;
            display: block;
            filter: brightness(0) invert(1);
        }
        .footer-tagline {
            color: rgba(255, 255, 255, 0.65);
            font-size: 0.875rem;
            line-height: 1.6;
            margin-bottom: 1.25rem;
            max-width: 340px;
        }
        .footer-socials {
            display: flex;
            gap: 0.75rem;
        }
        .footer-socials a {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 38px;
            height: 38px;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.08);
            color: rgba(255, 255, 255, 0.85);
            font-size: 15px;
            text-decoration: none;
            transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
        }
        .footer-socials a:hover {
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            color: #fff;
            transform: translateY(-2px);
        }
        .footer-contacts-body {
            font-size: 0.875rem;
            line-height: 1.7;
            color: rgba(255, 255, 255, 0.7);
        }
        .footer-contacts-body a {
            color: inherit;
            text-decoration: none;
            transition: color 0.2s ease;
        }
        .footer-contacts-body a:hover {
            color: var(--secondary);
        }
        .footer-copyright {
            text-align: center;
            padding: 1.5rem 0;
            font-size: 0.8125rem;
            color: rgba(255, 255, 255, 0.5);
        }

        /* Footer: on tablet & mobile (<1024px) stack vertically and center everything */
        @media (max-width: 1024px) {
            .site-footer { padding: 3rem 1.5rem 0; }
            .footer-grid {
                grid-template-columns: 1fr;
                gap: 2.5rem;
                text-align: center;
                padding-bottom: 2rem;
            }
            .footer-col {
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .footer-col h4 {
                text-align: center;
            }
            .footer-col ul {
                text-align: center;
            }
            .footer-col-brand .footer-logo {
                margin-left: auto;
                margin-right: auto;
            }
            .footer-tagline {
                text-align: center;
                max-width: 500px;
            }
            .footer-socials {
                justify-content: center;
            }
            .footer-contacts-body {
                text-align: center;
            }
        }

        /* Building placeholder */
        .building {
            min-height: 50vh;
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 60px 20px;
            text-align: center;
            background: var(--bg-light);
        }
        .building-inner { max-width: 520px; }
        .building-mark {
            width: 48px;
            height: 48px;
            border-radius: 10px;
            background: linear-gradient(135deg, var(--primary), var(--secondary));
            margin: 0 auto 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            font-weight: 700;
            font-size: 18px;
        }
        .building h2 {
            font-size: 24px;
            font-weight: 600;
            color: var(--text-dark);
            margin-bottom: 10px;
        }
        .building p {
            font-size: 14px;
            color: var(--text-light);
            line-height: 1.5;
        }

        /* Accessibility: rispetta la preferenza dell'utente per animazioni ridotte */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after {
                animation-duration: 0.01ms !important;
                animation-iteration-count: 1 !important;
                transition-duration: 0.01ms !important;
                scroll-behavior: auto !important;
            }
        }