@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

        /* ==========================================================================
           1. CSS VARIABLES & THEME (NEUTRALIZED FOR TEMPLATE)
           ========================================================================== */
        :root {
            --brand: #666666;
            --brand-hover: #555555;
            --brand-dark: #333333;
            --brand-darkest: #111111;
            --brand-light: #eeeeee;
            --accent: #999999;
            
            --white: #ffffff;
            --black: #000000;
            --gray-50: #fafafa;
            --gray-100: #f4f4f4;
            --gray-200: #eaeaea;
            --gray-300: #cccccc;
            --gray-400: #aaaaaa;
            --gray-500: #888888;
            --gray-600: #666666;
            --gray-700: #444444;
            --gray-800: #222222;

            --text-dark: #333333;
            --text-muted: #666666;
            --text-light: #eeeeee;

            --max-w: 1320px;
            
            --section-padding-y: 160px;
            --section-padding-x: 24px;
            --header-margin-bottom: 80px;
            --radius-global: 0px;
            
            --shadow-sm: none;
            --shadow-md: none;
            --shadow-lg: none;
            --shadow-xl: none;
            --shadow-brand: none;
            
            --transition-fast: 0.15s ease-in-out;
            --transition-normal: 0.3s ease-in-out;
            --transition-slow: 0.6s cubic-bezier(0.25, 1, 0.5, 1);
            
            --z-base: 1;
            --z-elevated: 10;
            --z-dropdown: 100;
            --z-sticky: 1000;
            --z-fixed: 1050;
            --z-lightbox: 9999;
        }

        /* ==========================================================================
           2. RESET & BASE
           ========================================================================== */
        *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
        html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
        
        body {
            font-family: system-ui, -apple-system, sans-serif;
            background-color: var(--white);
            color: var(--text-dark);
            line-height: 1.6;
            font-size: 1.125rem;
            position: relative;
        }
        body.no-scroll { overflow: hidden; }

        h1, h2, h3, h4, h5, h6 { line-height: 1.2; color: var(--brand-dark); font-weight: bold; margin-bottom: 1rem; }
        p { color: var(--text-muted); margin-bottom: 1.5rem; }
        a { text-decoration: none; color: inherit; transition: color var(--transition-normal); }
        ul, ol { list-style: none; }
        img { max-width: 100%; height: auto; display: block; border-radius: var(--radius-global); }

        section, header, footer, div[id] { scroll-margin-top: 150px; }
        .no-break-headline { white-space: nowrap; }

        /* Fade-in Animation Classes */
        .js .fade-in { opacity: 0; transform: translateY(30px); transition: opacity 0.8s ease-out, transform 0.8s ease-out; will-change: opacity, transform; }
        .js .fade-in.is-visible { opacity: 1; transform: translateY(0); }

        /* ==========================================================================
           3. UTILITIES
           ========================================================================== */
        .container {
            width: 100%; max-width: var(--max-w);
            margin: 0 auto; padding: 0 var(--section-padding-x);
            position: relative; z-index: var(--z-base);
        }
        .text-center { text-align: center; }
        .text-brand { color: var(--brand); }
        .text-white { color: var(--white) !important; }
        .text-brand-dark { color: var(--brand-dark); }
        .bg-gray { background-color: var(--gray-50); }
        .bg-alternate { background-color: var(--gray-100); }
        .bg-white { background-color: var(--white); }
        .d-flex { display: flex; }
        .align-items-center { align-items: center; }
        .justify-content-center { justify-content: center; }
        .justify-content-between { justify-content: space-between; }
        .gap-10 { gap: 10px; }
        .gap-20 { gap: 20px; }
        .dark-bg-text { color: var(--white) !important; }
        .dark-bg-text-sub { color: rgba(255,255,255,0.95) !important; }

        /* ==========================================================================
           4. TYPOGRAPHY & BUTTONS
           ========================================================================== */
        .section-title { font-size: clamp(2.5rem, 4vw, 3.5rem); color: var(--brand-dark); margin-bottom: 20px; }
        .section-subtitle { font-size: 1.125rem; color: var(--brand); display: block; margin-bottom: 10px; }
        .section-header { margin-bottom: var(--header-margin-bottom) !important; position: relative; z-index: 2; }
        .section-header.text-center { text-align: center; }
        .section-header .section-title { margin-bottom: 0 !important; }
        .section-header p { margin-top: 15px; margin-bottom: 0; }

        .btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 12px;
            padding: 16px 32px; border-radius: var(--radius-global); font-size: 1.125rem; cursor: pointer;
            transition: all var(--transition-normal); border: 2px solid transparent; text-align: center; line-height: 1;
        }
        .btn-primary { background-color: var(--brand); color: var(--white); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
        .btn-outline { background-color: transparent; color: var(--brand-dark); border: 2px solid var(--brand-dark); }
        
        .section-cta-wrapper { margin-top: 40px; display: flex; justify-content: center; }

        /* ==========================================================================
           6. SHARED CARD STYLES
           ========================================================================== */
        .feature-card, .why-card, .info-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-global); position: relative; z-index: 1; }
        .form-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-global); padding: 40px; z-index: var(--z-elevated); }
        .form-card h3 { font-size: clamp(1.6rem, 3vw, 2rem); margin-bottom: 5px; color: var(--brand-dark); }
        .form-card p.form-desc { margin-bottom: 25px; font-size: 1rem; }
        .feature-card { padding: 35px; display: flex; gap: 25px; align-items: flex-start; overflow: hidden; }
        .feature-card > * { position: relative; z-index: 2; }
        .feature-card i { font-size: 3rem; color: var(--brand-dark); background: var(--brand-light); padding: 15px; border-radius: var(--radius-global); }
        .feature-card h4 { font-size: 1.4rem; margin-bottom: 10px; color: var(--brand-dark); }
        .feature-card p { margin: 0; font-size: 1.05rem; }

        /* Inputs */
        .input-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
        .input-group label { font-size: 0.95rem; font-weight: 600; color: var(--brand-dark); }
        .input-group input, .input-group select, .input-group textarea { background: var(--white); border: 1px solid var(--gray-200); color: var(--text-dark); border-radius: var(--radius-global); padding: 14px 18px; font-size: 1rem; transition: all var(--transition-normal); width: 100%; }
        .input-group textarea { resize: vertical; min-height: 100px; }

        /* Multi-step */
        .form-step { display: none; }
        .form-step.active { display: block; animation: fadeIn 0.4s ease-in-out; }
        .service-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-bottom: 25px; }
        .service-select-card { border: 1px solid var(--gray-200); border-radius: 8px; padding: 15px 10px; display: flex; flex-direction: column; align-items: center; text-align: center; cursor: pointer; transition: all var(--transition-fast); background: var(--white); user-select: none; }
        .service-select-card i { font-size: 2.2rem; color: var(--brand-dark); margin-bottom: 8px; }
        .service-select-card span { font-size: 0.9rem; font-weight: 600; color: var(--brand-dark); line-height: 1.2; }
        .service-select-card.selected { border-color: var(--brand); background: var(--gray-100); }
        .step-buttons { display: flex; gap: 15px; margin-top: 10px; }
        .step-buttons button { flex: 1; }

        /* ==========================================================================
           HEADER & NAVIGATION
           ========================================================================== */
        .top-bar { background-color: var(--brand-darkest); color: var(--gray-300); padding: 10px 0; font-size: 0.95rem; border-bottom: 1px solid var(--gray-700); }
        .top-bar-inner { display: flex; justify-content: space-between; align-items: center; }
        .header-sticky-wrapper { position: sticky; top: 0; z-index: var(--z-sticky); width: 100%; background: var(--white); border-bottom: 1px solid var(--gray-200); }
        .nav { padding: 15px 0; display: flex; justify-content: space-between; align-items: center; }
        .nav-logo-link { display: flex; align-items: center; gap: 12px; font-size: 1.6rem; color: var(--brand-dark); text-decoration: none; font-weight: bold; }
        .nav-logo-img { height: 55px; width: auto; object-fit: contain; }
        .nav-links { display: flex; gap: 35px; align-items: center; }
        .nav-links a { font-size: 1.05rem; color: var(--gray-700); position: relative; transition: color var(--transition-normal); }
        .nav-links a:hover, .nav-links a.active { color: var(--brand-darkest); font-weight: bold; }
        .nav-links a::after { content: ''; position: absolute; width: 0; height: 3px; bottom: -6px; left: 0; background-color: var(--brand); transition: width var(--transition-normal); border-radius: var(--radius-global); }
        .nav-links a.active::after, .nav-links a:hover::after { width: 100%; }
        .nav-cta { display: flex; gap: 20px; align-items: center; }
        .mobile-menu-btn { display: none; font-size: 2.2rem; color: var(--brand-dark); background: none; border: none; cursor: pointer; }

        /* Scroll Progress Bar (Below Navbar) */
        #scroll-progress {
            position: absolute; bottom: 0; left: 0; height: 3px; background: var(--brand);
            width: 0%; z-index: calc(var(--z-fixed) + 10); transition: width 0.1s linear;
        }

        /* ==========================================================================
           HERO SECTION
           ========================================================================== */
        .hero { position: relative; min-height: 60vh; display: flex; align-items: center; padding: 60px 0 80px 0; background: var(--gray-100); overflow: hidden; }
        .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center; position: relative; z-index: 2; }
        .hero-text h1 { font-size: clamp(2.6rem, 4vw, 3.5rem); margin-bottom: 20px; color: var(--brand-dark); line-height: 1.15; }
        .hero-text p.hero-subtitle { font-size: 1.15rem; color: var(--gray-700); margin-bottom: 35px; max-width: 600px; line-height: 1.6;}
        .hero-features { display: flex; gap: 12px; margin-bottom: 0; flex-wrap: wrap; align-items: center; }
        .hero-feature-item { display: flex; align-items: center; gap: 8px; background: var(--white); font-size: 0.95rem; padding: 10px 20px; border-radius: 50px; border: 1px solid var(--gray-200); color: var(--brand-dark); font-weight: bold;}
        .hero-feature-item i { color: var(--brand); font-size: 1.2rem; }

        /* ==========================================================================
           LOGO TICKER (Infinite Marquee)
           ========================================================================== */
        .logo-ticker-section { padding: 40px 0; background: var(--white); border-bottom: 1px solid var(--gray-200); overflow: hidden; }
        .ticker-wrapper { display: flex; width: 200%; animation: scrollTicker 25s linear infinite; }
        .ticker-wrapper:hover { animation-play-state: paused; }
        .ticker-track { display: flex; justify-content: space-around; width: 50%; align-items: center; gap: 40px; padding: 0 20px;}
        .ticker-track img { height: 40px; width: auto; object-fit: contain; filter: grayscale(100%) opacity(0.6); transition: filter 0.3s; cursor: pointer; }
        .ticker-track img:hover { filter: grayscale(0%) opacity(1); }
        @keyframes scrollTicker { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        /* ==========================================================================
           TRUST BADGES
           ========================================================================== */
        .trust-badges { background: var(--brand-dark); padding: 60px 0; position: relative; z-index: var(--z-elevated); color: var(--white); }
        .trust-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; text-align: center; }
        .trust-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 15px; font-size: 1.15rem; font-weight: bold;}
        .trust-item i { font-size: 2.8rem; color: var(--brand); padding: 15px; border-radius: var(--radius-global); }

        /* ==========================================================================
           BEFORE/AFTER SLIDER SECTION
           ========================================================================== */
        .before-after-section { padding: var(--section-padding-y) 0; background: var(--white); }
        .ba-wrapper { position: relative; max-width: 1000px; margin: 0 auto; overflow: hidden; border-radius: var(--radius-global); border: 1px solid var(--gray-200); }
        .ba-image-container { position: relative; width: 100%; font-size: 0; line-height: 0; }
        .ba-image-container img { width: 100%; height: auto; display: block; object-fit: cover; }
        .ba-overlay { position: absolute; top: 0; left: 0; height: 100%; overflow: hidden; z-index: 2; border-right: 2px solid var(--brand); }
        .ba-overlay img { width: auto; height: 100%; max-width: none; } 
        .ba-slider { position: absolute; top: 0; bottom: 0; width: 40px; transform: translateX(-50%); z-index: 3; cursor: ew-resize; display: flex; align-items: center; justify-content: center; }
        .ba-slider-btn { width: 40px; height: 40px; background: var(--brand); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; box-shadow: 0 4px 10px rgba(0,0,0,0.3); pointer-events: none;}
        .ba-range { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; z-index: 4; cursor: ew-resize; margin: 0; }
        
        .ba-labels { position: absolute; bottom: 20px; width: 100%; display: flex; justify-content: space-between; padding: 0 20px; z-index: 1; pointer-events: none; }
        .ba-label { background: rgba(0,0,0,0.6); color: var(--white); padding: 5px 15px; border-radius: 4px; font-weight: bold; font-size: 0.9rem; }
        .ba-label.before { z-index: 3; position: absolute; left: 20px; }

        /* ==========================================================================
           SERVICES & REST 
           ========================================================================== */
        .services-intro { padding-top: var(--section-padding-y); padding-bottom: 40px; background: var(--gray-50); text-align: center; }
        .service-detail { padding: 80px 0; background: var(--white); }
        .service-detail.bg-alternate { background: var(--gray-50); }
        .service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .content-side { display: flex; flex-direction: column; gap: 40px; }
        .feature-cards { display: grid; grid-template-columns: 1fr; gap: 25px; }

        .service-gallery { display: flex; flex-direction: column; gap: 15px; height: 100%; min-height: 500px; }
        .service-gallery-main { width: 100%; flex: 1; min-height: 0; object-fit: cover; border-radius: var(--radius-global); }
        .service-gallery-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; height: 140px; flex-shrink: 0; }
        .service-gallery-thumbs img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-global); cursor: pointer; }

        /* ==========================================================================
           STATS (Fixed Overflow)
           ========================================================================== */
        .stats-section { background: var(--brand-darkest); padding: var(--section-padding-y) 0; color: var(--white); position: relative; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 30px; position: relative; z-index: 2; }
        .stat-item { padding: 20px; text-align: center; }
        .stat-item i { font-size: 3.5rem; color: var(--brand); margin-bottom: 20px; display: inline-block; }
        .stat-item h3 { font-size: clamp(2.5rem, 5vw, 4rem); color: var(--white); margin-bottom: 5px; line-height: 1; word-break: break-word; hyphens: auto; }
        .stat-item p { color: rgba(255,255,255,0.9); font-size: 1.1rem; margin: 0;}

        /* ==========================================================================
           ABOUT
           ========================================================================== */
        .about-section { padding: var(--section-padding-y) 0; background: var(--white); position: relative; }
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
        .about-img { position: relative; z-index: 2; }
        .about-img img { width: 100%; height: 500px; object-fit: cover; position: relative; z-index: 2; border-radius: var(--radius-global); }
        .about-experience { position: absolute; bottom: -25px; left: -25px; background: var(--white); padding: 25px 30px; border-radius: var(--radius-global); z-index: 3; display: flex; align-items: center; gap: 20px; border: 1px solid var(--gray-200); border-left: 5px solid var(--brand); }
        .about-experience i { font-size: 3rem; color: var(--brand); }
        .about-experience p { margin: 0; font-size: 0.95rem; color: var(--brand-dark); font-weight: bold; }

        /* ==========================================================================
           TEAM SECTION
           ========================================================================== */
        .team-section { padding: var(--section-padding-y) 0; background: var(--gray-50); }
        .team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
        .team-card { background: var(--white); border-radius: var(--radius-global); overflow: hidden; border: 1px solid var(--gray-200); text-align: center; padding-bottom: 25px; transition: transform var(--transition-normal); }
        .team-card:hover { transform: translateY(-5px); }
        .team-card img { width: 100%; height: 300px; object-fit: cover; margin-bottom: 20px; border-radius: 0; }
        .team-card h4 { font-size: 1.4rem; color: var(--brand-dark); margin-bottom: 5px; }
        .team-card p { color: var(--brand); font-weight: bold; font-size: 0.9rem; margin-bottom: 15px; }
        .team-socials { display: flex; justify-content: center; gap: 15px; }
        .team-socials a { color: var(--gray-500); font-size: 1.2rem; transition: color 0.2s; }
        .team-socials a:hover { color: var(--brand); }

        /* ==========================================================================
           ACCORDIONS (Materials & FAQ)
           ========================================================================== */
        .materials-section { padding: var(--section-padding-y) 0; background: var(--white); }
        .accordion-container { display: flex; height: 500px; gap: 15px; overflow: hidden; }
        .accordion-panel { flex: 1; position: relative; overflow: hidden; border-radius: var(--radius-global); transition: flex var(--transition-slow); cursor: pointer; background: var(--gray-800); }
        .accordion-panel:is(:hover, :focus-within) { flex: 4; }
        .accordion-panel img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition-slow); position: relative; z-index: 0;}
        .accordion-content { position: absolute; bottom: 0; left: 0; right: 0; padding: 40px; color: var(--white); opacity: 0; transition: opacity var(--transition-slow); transition-delay: 0.1s; z-index: 2; background: rgba(0,0,0,0.6); }
        .accordion-panel:is(:hover, :focus-within) .accordion-content { opacity: 1; }
        .accordion-content h4 { font-size: 2rem; margin-bottom: 10px; color: var(--white); }
        .accordion-panel .vertical-title { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(270deg); transition: all var(--transition-slow); font-size: 1.8rem; text-transform: uppercase; color: var(--white); white-space: nowrap; pointer-events: none; z-index: 2; font-weight: bold;}
        .accordion-panel:is(:hover, :focus-within) .vertical-title { opacity: 0; }

        /* FAQ Section */
        .faq-section { padding: var(--section-padding-y) 0; background: var(--gray-50); }
        .faq-grid { display: flex; flex-direction: column; gap: 15px; max-width: 800px; margin: 0 auto; }
        .faq-item { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-global); overflow: hidden; }
        .faq-item summary { padding: 25px; font-weight: bold; font-size: 1.15rem; color: var(--brand-dark); cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; transition: background 0.2s; }
        .faq-item summary::-webkit-details-marker { display: none; }
        .faq-item summary:hover { background: var(--gray-50); }
        .faq-item summary::after { content: '+'; font-size: 1.5rem; color: var(--brand); transition: transform 0.3s; }
        .faq-item[open] summary::after { transform: rotate(45deg); }
        .faq-item .faq-content { padding: 0 25px 25px 25px; color: var(--text-muted); }

        /* ==========================================================================
           STICKY SCROLL 
           ========================================================================== */
        .sticky-section { padding: var(--section-padding-y) 0; background: var(--white); position: relative; }
        .sticky-wrapper { display: flex; gap: 80px; align-items: flex-start; }
        /* Sticky element with top offset */
        .sticky-left { position: sticky; top: 80px; width: 40%; } 
        .sticky-left-inner { padding-top: 40px; } /* Ensures padding above text when sticky */
        .sticky-right { width: 60%; display: flex; flex-direction: column; gap: 60px; }
        .scroll-card { background: var(--white); border-radius: var(--radius-global); overflow: hidden; border: 1px solid var(--gray-200); }
        .scroll-card img { width: 100%; height: 350px; object-fit: cover; }
        .scroll-card-content { padding: 40px; }
        .scroll-card-content h3 { font-size: 1.8rem; color: var(--brand-dark); margin-bottom: 15px; }

        /* ==========================================================================
           PROCESS
           ========================================================================== */
        .process-v1 { padding: var(--section-padding-y) 0; background: var(--brand-darkest); color: var(--white); }
        .process-grid-v1 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; position: relative; text-align: center; }
        .process-step-v1 { position: relative; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.05); padding: 60px 30px 40px 30px; border-radius: var(--radius-global); transition: all var(--transition-normal); box-shadow: var(--shadow-lg); z-index: 2; backdrop-filter: blur(10px); }
        .process-step-v1:hover { transform: scale(1.03); border-color: var(--brand); background: rgba(255,255,255,0.06); box-shadow: 0 20px 40px rgba(0,0,0,0.5); }
        .process-number-v1 { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 60px; height: 60px; background: var(--brand); color: var(--white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: bold; box-shadow: 0 0 0 8px rgba(255,255,255,0.1); transition: all var(--transition-normal); }
        .process-step-v1:hover .process-number-v1 { background: var(--white); color: var(--brand-dark); transform: translateX(-50%) scale(1.1); box-shadow: 0 0 0 8px rgba(255,255,255,0.2); }
        .process-step-v1 i { font-size: 3.5rem; color: var(--brand); margin-bottom: 25px; display: block; opacity: 0.9; }

        /* ==========================================================================
           TESTIMONIALS
           ========================================================================== */
        .testimonials { padding: var(--section-padding-y) 0; background: var(--gray-50); }
        .test-columns { display: flex; gap: 30px; justify-content: center; height: 600px; overflow: hidden; mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to bottom, transparent, black 10%, black 90%, transparent); }
        .test-col { flex: 1; max-width: 350px; display: flex; flex-direction: column; }
        .test-col-inner { display: flex; flex-direction: column; gap: 30px; animation: scrollVertical 20s linear infinite; }
        .test-card { display: flex; flex-direction: column; justify-content: space-between; background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-global); padding: 35px; }
        .test-author-row { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 25px; }
        .test-author-info { display: flex; align-items: center; gap: 12px; }
        .test-avatar { width: 45px; height: 45px; border-radius: 50%; background: var(--gray-100); color: var(--brand-dark); display: flex; align-items: center; justify-content: center; font-size: 1.1rem; font-weight: bold; }
        .test-name-role strong { display: block; font-size: 1.05rem; color: var(--brand-dark); line-height: 1; }
        
        @keyframes scrollVertical { from { transform: translateY(0); } to { transform: translateY(calc(-50% - 15px)); } }
        @keyframes scrollVerticalReverse { from { transform: translateY(calc(-50% - 15px)); } to { transform: translateY(0); } }
        .test-col-inner.reverse { animation: scrollVerticalReverse 20s linear infinite; }

        /* ==========================================================================
           DETAILED SERVICE SECTION (layout_2)
           ========================================================================== */
        .sd2-mobile-title { display: none; }
        .sd2-desktop-title { display: block; }
        .sd2-service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; }
        .sd2-content-side { display: flex; flex-direction: column; gap: 40px; }
        .sd2-feature-cards { display: grid; grid-template-columns: 1fr; gap: 25px; }
        .sd2-feature-card { background: var(--white); border: 1px solid var(--gray-200); border-radius: var(--radius-global); padding: 35px; display: flex; gap: 25px; align-items: flex-start; position: relative; z-index: 1; overflow: hidden; }
        .sd2-feature-card i { font-size: 3rem; color: var(--brand-dark); background: var(--brand-light); padding: 15px; border-radius: var(--radius-global); flex-shrink: 0; }
        .sd2-feature-card h4 { font-size: 1.4rem; margin-bottom: 10px; color: var(--brand-dark); }
        .sd2-feature-card p { margin: 0; font-size: 1.05rem; }
        .sd2-service-gallery { position: relative; width: 100%; height: 100%; }
        .sd2-slider-btn { display: none; }
        .sd2-gallery-track-wrapper { width: 100%; height: 100%; }
        .sd2-gallery-track { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: 1fr 140px; gap: 15px; width: 100%; height: 100%; }
        .sd2-gallery-item { position: relative; border-radius: var(--radius-global); overflow: hidden; background: var(--gray-200); height: 100%; }
        .sd2-gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .sd2-item-main { grid-column: span 3; }
        .sd2-expand-btn { position: absolute; top: 15px; right: 15px; background: rgba(0, 0, 0, 0.65); color: var(--white); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity 0.3s; z-index: 5; }
        .sd2-gallery-item:hover .sd2-expand-btn { opacity: 1; pointer-events: auto; }

        @media (max-width: 992px) {
            .sd2-service-grid { grid-template-columns: 1fr; gap: 30px; align-items: start; }
            .sd2-mobile-title { display: block; }
            .sd2-desktop-title { display: none; }
            .sd2-gallery-track-wrapper { overflow: hidden; position: relative; width: 100%; padding: 10px 0; }
            .sd2-gallery-track { display: flex; gap: 15px; height: auto; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); }
            .sd2-gallery-item { flex: 0 0 calc(50% - 7.5px); height: 250px; }
            .sd2-item-main { height: 250px; }
            .sd2-expand-btn { opacity: 1; pointer-events: auto; }
            .sd2-slider-btn { display: flex; position: absolute; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; border-radius: 50%; background: var(--white); color: var(--brand-dark); align-items: center; justify-content: center; font-size: 1.8rem; border: 1px solid var(--gray-200); cursor: pointer; z-index: 10; }
            .sd2-prev-btn { left: -10px; }
            .sd2-next-btn { right: -10px; }
        }
        @media (max-width: 576px) {
            .sd2-feature-card { flex-direction: column; align-items: center; text-align: center; padding: 25px; }
            .sd2-gallery-item, .sd2-item-main { height: 200px; }
            .sd2-mobile-title { font-size: clamp(1.6rem, 8vw, 2.2rem); overflow-wrap: break-word; hyphens: auto; }
        }

        /* ==========================================================================
           PREMIUM MOTION GALLERIES (SHARED)
           ========================================================================== */
        .img-wrapper { border-radius: var(--radius-global); overflow: hidden; position: relative; background: var(--gray-50); transform: translateZ(0); }
        .img-wrapper img { width: 100%; height: 100%; object-fit: cover; will-change: transform; border-radius: inherit; }
        .img-expand { position: absolute; top: 15px; right: 15px; background: transparent; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; cursor: pointer; z-index: 5; }
        .img-expand i { color: var(--white); font-size: 1.5rem; background: rgba(0, 0, 0, 0.9); padding: 10px; border-radius: 50%; }
        .img-wrapper:hover .img-expand { opacity: 1; }

        /* [TEMPLATE ANNOTATION]: Never put overflow: hidden, overflow: auto, overflow-x, overflow-y or contain on .gallery-motion-v2, .gallery-motion-v5, body, html or any other ancestor of .v2-sticky or .v5-sticky. It disables position: sticky and the galleries stop pinning and rotating. */
        
        /* MOTION GALLERY VARIANT 2 (CYLINDER) */
        .gallery-motion-v2 { height: 300vh; background: var(--gray-50); position: relative; margin-bottom: var(--section-padding-y); }
        .v2-sticky { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 100px; box-sizing: border-box; perspective: 1500px; overflow: visible; }
        .v2-header { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 100%; z-index: 20; margin-bottom: 0 !important; }
        .v2-carousel { position: relative; width: 400px; height: 500px; transform-style: preserve-3d; will-change: transform; }
        .v2-item { position: absolute; inset: 0; border: 4px solid var(--white); border-radius: var(--radius-global); overflow: hidden; }

        /* MOTION GALLERY VARIANT 5 (SPLIT GATE REVEAL) */
        .gallery-motion-v5 { height: 300vh; background: var(--white); position: relative; margin-bottom: var(--section-padding-y); }
        .v5-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; }
        .v5-inner { position: absolute; top: 0; left: 0; width: 100%; height: 100vh; padding-top: 130px; box-sizing: border-box; display: grid; grid-template-columns: repeat(3, 26vw); grid-auto-rows: 25vh; gap: 2vw; align-content: center; justify-content: center; will-change: transform, opacity; z-index: 1; }
        .v5-inner .img-wrapper { width: 100%; height: 100%; }
        .v5-gate-panel { position: absolute; top: 0; width: 50%; height: 100vh; overflow: hidden; z-index: 10; will-change: transform; background: var(--white); }
        .v5-gate-left { left: 0; }
        .v5-gate-right { right: 0; }
        .v5-gate-panel img { position: absolute; width: 200%; height: 100vh; object-fit: cover; opacity: 1; z-index: 1; top: 0; border-radius: 0; max-width: none; }
        .v5-gate-left img { left: 0; object-position: center; }
        .v5-gate-right img { left: -100%; object-position: center; }
        .v5-header { position: absolute; top: calc(50% + 65px); left: 50%; transform: translate(-50%, -50%); z-index: 20; text-align: center; pointer-events: none; width: 100%; }

        /* ==========================================================================
           LIGHTBOX SYSTEM
           ========================================================================== */
        .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.95); backdrop-filter: blur(10px); z-index: var(--z-lightbox); display: none; flex-direction: column; align-items: center; justify-content: center; perspective: 1200px; }
        .lightbox-overlay.active { display: flex; }
        .lb-close { position: absolute; top: 30px; right: 40px; color: var(--white); font-size: 3rem; cursor: pointer; z-index: 100; transition: transform 0.3s; }
        .lb-nav { position: absolute; top: 50%; transform: translateY(-50%); color: var(--white); font-size: 3.5rem; cursor: pointer; z-index: 100; padding: 20px; transition: transform 0.2s, color 0.2s; }
        .lb-prev { left: 20px; }
        .lb-next { right: 20px; }
        .lb-img-container { position: relative; width: 80vw; height: 80vh; display: flex; justify-content: center; align-items: center; transform-style: preserve-3d; }
        .lb-img { position: absolute; max-width: 100%; max-height: 100%; object-fit: contain; border-radius: 8px; opacity: 0;}
        .lb-img.active { opacity: 1; z-index: 10; }
        .lb-anim-v2.active, .lb-anim-v5.active { animation: fadeIn 0.4s ease-out forwards; }
        .lb-anim-v2.closing, .lb-anim-v5.closing { animation: fadeOut 0.4s ease-out forwards; }
        .lb-anim-v2 .lb-img.enter-next, .lb-anim-v5 .lb-img.enter-next { animation: subtleSlideInRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        .lb-anim-v2 .lb-img.enter-prev, .lb-anim-v5 .lb-img.enter-prev { animation: subtleSlideInLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        .lb-anim-v2 .lb-img.exit-next, .lb-anim-v5 .lb-img.exit-next { animation: subtleSlideOutLeft 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }
        .lb-anim-v2 .lb-img.exit-prev, .lb-anim-v5 .lb-img.exit-prev { animation: subtleSlideOutRight 0.5s cubic-bezier(0.25, 1, 0.5, 1) forwards; }

        @keyframes subtleSlideInRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes subtleSlideInLeft { from { transform: translateX(-50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
        @keyframes subtleSlideOutLeft { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-50px); opacity: 0; } }
        @keyframes subtleSlideOutRight { from { transform: translateX(0); opacity: 1; } to { transform: translateX(50px); opacity: 0; } }
        @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
        @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } }

        /* ==========================================================================
           20. CONTACT FORM REDESIGNED
           ========================================================================== */
        .contact-redesigned { padding: var(--section-padding-y) 0; background: var(--gray-50); }
        .contact-wrapper { max-width: 1100px; margin: 0 auto; padding: 0 var(--section-padding-x); }
        .contact-grid { display: grid; grid-template-columns: 1.2fr 2fr; gap: 40px; }
        .contact-left { background: var(--brand-darkest); border-radius: var(--radius-global); padding: 50px 30px; color: var(--white); display: flex; flex-direction: column; justify-content: flex-start;}
        .contact-left h3 { color: var(--white); font-size: 2.2rem; margin-bottom: 20px; }
        .contact-left p { color: rgba(255,255,255,0.85); font-size: 1.05rem; margin-bottom: 40px; line-height: 1.6; }
        .contact-info-block { background: rgba(255,255,255,0.08); border-radius: var(--radius-global); padding: 20px 25px; display: flex; align-items: center; gap: 20px; margin-bottom: 20px; transition: background 0.3s;}
        .icon-circle { width: 50px; height: 50px; border-radius: 50%; background: var(--brand); display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--white); flex-shrink: 0;}
        .contact-info-block small { display: block; font-size: 0.9rem; color: rgba(255,255,255,0.7); margin-bottom: 4px; }
        .contact-info-block strong { display: block; font-size: 1.3rem; font-weight: 700; color: var(--white); letter-spacing: 0.5px;}

        .contact-right { background: var(--white); border-radius: var(--radius-global); padding: 50px 40px; border: 1px solid var(--gray-200); }
        .contact-right label { display: block; font-size: 1rem; color: var(--brand-dark); font-weight: 700; margin-bottom: 12px; }
        .service-btn-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 30px; }
        .service-btn { width: 100%; height: 60px; border: 1px solid var(--gray-200); border-radius: var(--radius-global); padding: 0 16px; text-align: left; cursor: pointer; transition: 0.3s; display: flex; align-items: center; justify-content: flex-start; gap: 12px; font-size: 0.95rem; font-weight: 700; color: var(--text-dark); background: var(--white); line-height: 1.2; }
        .service-btn i { font-size: 1.4rem; color: var(--brand-dark); flex-shrink: 0;}
        .service-btn.active { border-color: var(--brand); background: var(--gray-100); color: var(--brand-dark); }
        .service-btn.active i { color: var(--brand); }
        .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 30px; }
        .contact-right input, .contact-right textarea { width: 100%; padding: 16px; border-radius: var(--radius-global); border: 1px solid var(--gray-200); background: var(--gray-50); font-size: 1rem; color: var(--text-dark); transition: border-color 0.3s, background 0.3s; }
        .contact-right textarea { resize: vertical; min-height: 120px; margin-bottom: 25px; }
        .btn-submit { width: 100%; background: var(--brand); color: var(--white); padding: 20px; border-radius: var(--radius-global); font-size: 1.25rem; font-weight: 700; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: 0.3s; }

        /* ==========================================================================
           FOOTER
           ========================================================================== */
        .footer { background: var(--brand-darkest); color: var(--white); padding: 80px 0 30px 0; position: relative; overflow: hidden; }
        .footer p { color: rgba(255,255,255,0.6); font-size: 1.05rem; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 60px; margin-bottom: 60px; }
        .footer-col h4 { font-size: 1.4rem; margin-bottom: 25px; color: var(--white); position: relative; padding-bottom: 15px; }
        .footer-links { display: flex; flex-direction: column; gap: 15px; font-size: 1.05rem; }
        .footer-links a { color: rgba(255,255,255,0.6); display: flex; align-items: center; gap: 12px; }
        .footer-links i { font-size: 1.2rem; color: var(--brand); }
        .footer-bottom { text-align: center; padding-top: 30px; border-top: 1px solid rgba(255,255,255,0.1); font-size: 0.95rem; color: rgba(255,255,255,0.5); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 20px; }

        /* ==========================================================================
           FLOATING WIDGETS & TOAST
           ========================================================================== */
        .widget-phone { position: fixed; bottom: 110px; right: 30px; height: 60px; width: 60px; background: var(--brand-dark); color: var(--white); border-radius: 30px; display: flex; align-items: center; z-index: var(--z-fixed); overflow: hidden; transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), background var(--transition-normal); cursor: pointer; border: 1px solid var(--gray-700); }
        .widget-phone .icon-wrapper { min-width: 56px; height: 56px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--brand); }
        .widget-phone .text-wrapper { white-space: nowrap; font-weight: 700; font-size: 1.1rem; padding-right: 20px; opacity: 0; transition: opacity 0.3s; color: var(--white); }
        .widget-phone:hover { width: 220px; background: var(--brand-darkest); }
        .widget-phone:hover .text-wrapper { opacity: 1; transition-delay: 0.15s; }

        .widget-chat { position: fixed; bottom: 30px; right: 30px; height: 60px; width: 60px; background: var(--brand); color: var(--white); border-radius: 30px; z-index: var(--z-fixed); overflow: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); }
        .widget-chat .icon-wrapper { position: absolute; bottom: 0; right: 0; min-width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; cursor: pointer; z-index: 2; }
        .chat-window { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--white); color: var(--text-dark); display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.2s; border-radius: 8px; overflow: hidden; }
        .chat-header { background: var(--brand-dark); color: var(--white); padding: 35px; border-bottom: 4px solid var(--brand); }
        .chat-header h4 { color: var(--white); font-size: 2rem; margin-bottom: 8px; }
        .chat-header p { color: rgba(255,255,255,0.8); font-size: 1.15rem; margin: 0; }
        .chat-body { padding: 35px; flex-grow: 1; display: flex; flex-direction: column; gap: 25px; }
        .chat-body label { font-size: 1.125rem !important; margin-bottom: 8px; display: block; font-weight: 600; color: var(--brand-dark); }
        .chat-body input, .chat-body textarea { font-size: 1.125rem !important; padding: 18px !important; border-radius: 8px !important; background: var(--gray-50); border: 1px solid var(--gray-200); width: 100%; box-sizing: border-box; }
        .chat-body textarea { height: 160px; resize: none; }
        .chat-body button { font-size: 1.25rem !important; padding: 20px !important; border-radius: 8px !important; width: 100%; margin-top: auto; border: none; font-weight: 700; cursor: pointer; color: var(--white); background: var(--brand); }
        
        /* [TEMPLATE ANNOTATION]: Chat double stroke for high contrast */
        .widget-chat.active { 
            width: 500px; height: 650px; background: var(--white); border-radius: 8px; 
            box-shadow: 0 0 0 2px var(--white), 0 0 0 4px var(--brand-darkest), 0 20px 40px rgba(0,0,0,0.3);
        }
        .widget-chat.active .icon-wrapper { display: none; }
        .widget-chat.active .chat-window { opacity: 1; pointer-events: all; transition-delay: 0.15s; }

        .toast-notification { position: fixed; bottom: -100px; left: 50%; transform: translateX(-50%); background: var(--brand-dark); color: var(--white); padding: 15px 30px; border-radius: 50px; z-index: 9999; font-weight: bold; transition: bottom 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); display: flex; align-items: center; gap: 10px;}
        .toast-notification.show { bottom: 40px; }

        .exit-popup { position: fixed; inset: 0; background: rgba(0,0,0,0.8); backdrop-filter: blur(5px); z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s; }
        .exit-popup.active { opacity: 1; pointer-events: all; }
        .exit-popup-content { background: var(--white); padding: 50px; border-radius: var(--radius-global); max-width: 500px; text-align: center; position: relative; }
        .exit-close { position: absolute; top: 15px; right: 15px; font-size: 1.5rem; cursor: pointer; color: var(--gray-500); }

        .mobile-bottom-cta { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: var(--white); z-index: var(--z-sticky); border-top: 1px solid var(--gray-200); padding: 15px; flex-direction: row; justify-content: space-between; gap: 10px; box-shadow: 0 -4px 10px rgba(0,0,0,0.05);}
        .mobile-bottom-cta .btn { flex: 1; padding: 12px; font-size: 1rem; }

        /* ==========================================================================
           23. MEDIA QUERIES
           ========================================================================== */
        @media (max-width: 1200px) {
            .hero-text h1 { font-size: 3.5rem; }
            .about-grid, .service-grid, .contact-grid { gap: 40px; }
            .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
            .contact-left, .contact-right { padding: 40px 30px; }
        }

        @media (max-width: 992px) {
            .top-bar-inner { flex-direction: column; gap: 10px; text-align: center; }
            .top-bar .d-flex { flex-direction: column; gap: 5px; }

            .hero-grid { grid-template-columns: 1fr; text-align: center; }
            .hero-text h1 { font-size: 3.2rem; }
            .hero-subtitle { margin: 0 auto 40px auto; }
            .hero-features { justify-content: center; }
            
            .about-grid, .service-grid, .contact-grid { grid-template-columns: 1fr; }
            .service-grid:nth-child(even) .content-side { order: -1; }
            
            .process-grid-v1 { grid-template-columns: repeat(2, 1fr); gap: 60px 40px; }
            .process-grid-v1::before { display: none; }
            
            .test-columns { height: auto; mask-image: none; -webkit-mask-image: none; flex-wrap: wrap;}
            .test-col-inner { animation: none !important; }
            .footer-grid { grid-template-columns: 1fr 1fr; }

            .accordion-container { flex-direction: column; height: auto; gap: 15px;}
            .accordion-panel { height: 150px; }
            .accordion-panel:is(:hover, :focus-within) { height: 350px; }
            .accordion-panel .vertical-title { transform: translate(-50%, -50%) rotate(0deg); letter-spacing: 2px;}
            
            .sticky-wrapper { flex-direction: column; } 
            .sticky-left { position: relative; top: 0; width: 100%; text-align: center; margin-bottom: 30px;} 
            .sticky-left-inner { padding-top: 0; }
            .sticky-right { width: 100%; }

            .service-btn-grid { grid-template-columns: repeat(2, 1fr); }
            
            .v5-inner { grid-template-columns: repeat(3, 30vw); grid-auto-rows: 20vh; }
            .v2-carousel { width: 300px; height: 400px; }
        }

        @media (max-width: 768px) {
            :root { --section-padding-y: 120px; } 
            .nav-links, .nav-cta { display: none; }
            .mobile-menu-btn { display: block; }
            
            .nav-links.active { display: flex; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 0; align-items: stretch; background: var(--white); padding: 10px 24px 18px; border-bottom: 1px solid var(--gray-200); z-index: var(--z-dropdown); box-shadow: 0 10px 20px rgba(0,0,0,0.1);}
            .nav-links.active a { padding: 13px 0; border-bottom: 1px solid var(--gray-100); }
            
            .trust-grid { grid-template-columns: 1fr; }
            .footer-grid { grid-template-columns: 1fr; }
            
            .form-row { grid-template-columns: 1fr; gap: 15px; margin-bottom: 15px;}
            .contact-left, .contact-right { padding: 30px 20px; }
            
            .v2-header { top: 10%; }
            .v5-header .section-title { font-size: 2.5rem; }
            .lb-img-container { width: 95vw; height: 80vh; }
            .v5-inner { grid-template-columns: repeat(3, 30vw); grid-auto-rows: 15vh; }

            .mobile-bottom-cta { display: flex; }
            .widget-phone { bottom: 80px; }
            .widget-chat { bottom: 80px; }
            
            .ba-labels { display: none; }
        }
        
        @media (max-width: 576px) {
            .hero-text h1 { font-size: 2.5rem; }
            .process-grid-v1 { grid-template-columns: 1fr; }
            .form-card { padding: 25px 20px; }
            .service-select-grid { grid-template-columns: 1fr; }
            
            .widget-chat.active { width: calc(100vw - 40px); height: calc(100vh - 120px); right: 20px; bottom: 80px; }
            .chat-window { width: 100%; }
            
            .service-btn-grid { grid-template-columns: 1fr; }
            
            .v2-carousel { width: 250px; height: 350px; }
        }
    
.hz-scope{--hz-brand:var(--brand);--hz-brand-hover:var(--brand-hover);--hz-brand-light:var(--brand-light);--hz-brand-dark:var(--brand-dark);--hz-brand-darkest:var(--brand-darkest);--hz-white:var(--white);--hz-black:var(--black);--hz-gray-50:var(--gray-50);--hz-gray-100:var(--gray-100);--hz-gray-200:var(--gray-200);--hz-gray-300:var(--gray-300);--hz-gray-400:var(--gray-400);--hz-gray-500:var(--gray-500);--hz-gray-600:var(--gray-600);--hz-gray-700:var(--gray-700);--hz-text-dark:var(--text-dark);--hz-text-muted:var(--text-muted);--hz-text-light:var(--text-light);--hz-max-w:var(--max-w);--hz-section-padding-x:var(--section-padding-x);--hz-transition-normal:var(--transition-normal);--hz-z-base:var(--z-base);--hz-section-padding-y:120px;--hz-radius-pill:50px;--hz-radius-card:24px;--hz-radius-global:16px;--hz-shadow-sm:0 4px 10px rgba(40,40,40,.05);--hz-shadow-md:0 10px 30px rgba(40,40,40,.08);--hz-shadow-lg:0 20px 40px rgba(40,40,40,.12);--hz-shadow-float:0 30px 60px rgba(100,100,100,.15);--hz-shadow-brand:none;font-size:1.125rem;line-height:1.6;color:var(--hz-text-muted)}:where(.hz-scope) :is(h2,h3,h4,h5,h6){font-family:inherit;line-height:1.15;color:var(--hz-brand-dark);font-weight:700;margin-bottom:1rem;letter-spacing:-.02em}:where(.hz-scope) p{margin-bottom:1.5rem}:where(.hz-scope) a{text-decoration:none;color:inherit;transition:color var(--hz-transition-normal)}:where(.hz-scope) ul{list-style:none}:where(.hz-scope) img{max-width:100%;height:auto;display:block}.hz-scope{scroll-margin-top:120px}
.hz-container {
            width: 100%; max-width: var(--hz-max-w);
            margin: 0 auto; padding: 0 var(--hz-section-padding-x);
            position: relative; z-index: var(--hz-z-base);
        }

        .hz-text-center { text-align: center; }
        .hz-bg-gray { background-color: var(--hz-gray-50); }
        .hz-bg-dark { background-color: var(--hz-brand-darkest); color: var(--hz-white); }
        .hz-bg-brand-light { background-color: var(--hz-brand-light); }
        
        .hz-d-flex { display: flex; }
        .hz-align-items-center { align-items: center; }
        .hz-justify-content-center { justify-content: center; }
        .hz-justify-content-between { justify-content: space-between; }
        .hz-gap-10 { gap: 10px; }
        .hz-gap-20 { gap: 20px; }
        .hz-gap-30 { gap: 30px; }

        
        .hz-text-white { color: var(--hz-white) !important; }
        .hz-dark-bg-text {
            color: var(--hz-white) !important;
            text-shadow: 0 4px 10px rgba(0,0,0,0.4);
        }
        .hz-dark-bg-text-sub {
            color: rgba(255,255,255,0.85) !important;
            text-shadow: 0 2px 5px rgba(0,0,0,0.3);
        }

        
        .hz-pill-badge {
            display: inline-flex; align-items: center; gap: 8px;
            background: var(--hz-brand-light); color: var(--hz-brand-dark);
            padding: 8px 16px; border-radius: var(--hz-radius-pill);
            font-family: inherit; font-size: 0.9rem; font-weight: 600;
            margin-bottom: 20px;
        }
        .hz-pill-badge span.hz-highlight {
            background: var(--hz-brand); color: var(--hz-white);
            padding: 2px 10px; border-radius: var(--hz-radius-pill);
            font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.5px;
        }

        
        .hz-section-title {
            font-size: clamp(2.5rem, 4vw, 3.5rem);
            color: var(--hz-brand-dark);
            margin-bottom: 20px;
        }
        .hz-section-title span {
            color: var(--hz-brand); 
        }

        .hz-section-header { margin-bottom: 60px; position: relative; z-index: 2; }
        .hz-section-header p { font-size: 1.15rem; max-width: 700px; }
        .hz-section-header.hz-text-center p { margin-left: auto; margin-right: auto; }

        
        .hz-btn {
            display: inline-flex; align-items: center; justify-content: center; gap: 10px;
            padding: 16px 35px; border-radius: var(--hz-radius-pill);
            font-weight: 600; font-size: 1.05rem; cursor: pointer;
            transition: all var(--hz-transition-normal); border: 2px solid transparent;
            font-family: inherit; line-height: 1;
        }
        .hz-btn-primary { background-color: var(--hz-brand-dark); color: var(--hz-white); box-shadow: var(--hz-shadow-md); }
        .hz-btn-primary:hover { background-color: var(--hz-brand); transform: translateY(-3px); box-shadow: var(--hz-shadow-lg); }
        
        .hz-btn-brand { background-color: var(--hz-brand); color: var(--hz-white); box-shadow: var(--hz-shadow-brand); }
        .hz-btn-brand:hover { background-color: var(--hz-brand-dark); transform: translateY(-3px); box-shadow: var(--hz-shadow-lg); }
        
        .hz-btn-outline { background-color: transparent; color: var(--hz-brand-dark); border: 2px solid var(--hz-brand-dark); }
        .hz-btn-outline:hover { background-color: var(--hz-brand-dark); color: var(--hz-white); }

        .hz-btn-play {
            background: transparent; color: var(--hz-brand-dark); font-weight: 600;
            padding: 10px; border-radius: 50px; display: inline-flex; align-items: center; gap: 12px;
            font-family: inherit; cursor: pointer; transition: all 0.3s;
        }
        .hz-btn-play i {
            display: flex; align-items: center; justify-content: center;
            width: 50px; height: 50px; background: var(--hz-brand); color: var(--hz-white);
            border-radius: 50%; font-size: 1.2rem; transition: all 0.3s;
        }
        .hz-btn-play:hover i { transform: scale(1.1); box-shadow: var(--hz-shadow-brand); }

        .hz-hero {
            position: relative; padding: 180px 0 100px;
            background: linear-gradient(180deg, var(--hz-gray-50) 0%, var(--hz-white) 100%);
            overflow: hidden;
        }
        
        .hz-hero-wave {
            position: absolute; bottom: 0; left: 0; width: 100%; height: auto; z-index: 1;
        }

        .hz-hero-grid {
            display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 60px; align-items: center;
            position: relative; z-index: 2;
        }

        .hz-hero-text { padding-right: 20px; }
        .hz-hero-text h2 { font-size: clamp(3rem, 4.5vw, 4.5rem); margin-bottom: 20px; line-height: 1.05; }
        .hz-hero-text p.hz-subtitle { font-size: 1.15rem; color: var(--hz-gray-600); margin-bottom: 40px; max-width: 90%; }

        .hz-hero-actions { display: flex; align-items: center; gap: 20px; margin-bottom: 40px; }
        
        .hz-hero-reviews { display: flex; align-items: center; gap: 15px; }
        .hz-review-avatars { display: flex; }
        .hz-review-avatars img { width: 45px; height: 45px; border-radius: 50%; border: 3px solid var(--hz-white); margin-left: -15px; box-shadow: var(--hz-shadow-sm); object-fit: cover;}
        .hz-review-avatars img:first-child { margin-left: 0; }
        .hz-review-stars { display: flex; flex-direction: column; }
        .hz-review-stars .hz-stars { color: var(--hz-brand); font-size: 1.1rem; letter-spacing: 2px;}
        .hz-review-stars span { font-size: 0.85rem; font-weight: 600; color: var(--hz-brand-dark); font-family: inherit;}

        
        .hz-hero-visual {
            position: relative; display: flex; justify-content: center; align-items: center;
            height: 600px;
        }
        
        .hz-target-wrapper {
            position: relative; width: 450px; height: 450px;
            display: flex; justify-content: center; align-items: center;
        }
        
        
        .hz-ring {
            position: absolute; border-radius: 50%; 
            border: 1px solid rgba(100,100,100, 0.2);
            top: 50%; left: 50%; transform: translate(-50%, -50%);
        }
        .hz-ring-1 { width: 100%; height: 100%; }
        .hz-ring-2 { width: 130%; height: 130%; border: 1px dashed rgba(100,100,100, 0.3); }
        .hz-ring-3 { width: 160%; height: 160%; border-width: 2px; border-color: rgba(100,100,100, 0.1); }
        
        .hz-crosshair {
            position: absolute; background: var(--hz-brand-light); border: 2px solid var(--hz-brand);
            border-radius: 50%; width: 12px; height: 12px;
        }
        .hz-ch-top { top: -6px; left: 50%; transform: translateX(-50%); }
        .hz-ch-bottom { bottom: -6px; left: 50%; transform: translateX(-50%); }
        .hz-ch-left { left: -6px; top: 50%; transform: translateY(-50%); }
        .hz-ch-right { right: -6px; top: 50%; transform: translateY(-50%); }

        .hz-hero-image-circle {
            width: 100%; height: 100%; border-radius: 50%;
            overflow: hidden; position: relative; z-index: 5;
            box-shadow: var(--hz-shadow-float); border: 10px solid var(--hz-white);
        }
        .hz-hero-image-circle img { width: 100%; height: 100%; object-fit: cover; }

        .hz-floating-icon {
            position: absolute; width: 70px; height: 70px; background: var(--hz-brand-dark);
            border-radius: 50%; display: flex; justify-content: center; align-items: center;
            color: var(--hz-white); font-size: 2rem; box-shadow: var(--hz-shadow-md); z-index: 10;
            border: 4px solid var(--hz-white);
        }
        .hz-fi-1 { top: 10%; left: -5%; animation: hz-floatY 4s ease-in-out infinite; }
        .hz-fi-2 { bottom: 15%; right: -5%; background: var(--hz-brand); animation: hz-floatY 5s ease-in-out infinite alternate; }

        @keyframes hz-floatY { 0% { transform: translateY(0); } 50% { transform: translateY(-15px); } 100% { transform: translateY(0); } }

        
        .hz-foundation-section { padding: var(--hz-section-padding-y) 0; background: var(--hz-white); overflow: hidden;}
        .hz-foundation-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; }
        
        .hz-foundation-images { position: relative; height: 500px; display: flex; align-items: center;}
        .hz-img-main-card {
            width: 85%; height: 400px; border-radius: var(--hz-radius-card); overflow: hidden;
            box-shadow: var(--hz-shadow-lg); position: relative; z-index: 2;
        }
        .hz-img-main-card img { width: 100%; height: 100%; object-fit: cover; }
        
        .hz-experience-badge {
            position: absolute; bottom: 20px; right: 0; background: var(--hz-white);
            padding: 25px 30px; border-radius: var(--hz-radius-card); box-shadow: var(--hz-shadow-float);
            z-index: 3; display: flex; align-items: center; gap: 20px;
        }
        .hz-experience-badge h3 { font-size: 3rem; color: var(--hz-brand); margin: 0; line-height: 1; }
        .hz-experience-badge p { font-size: 0.9rem; font-weight: 700; text-transform: uppercase; color: var(--hz-brand-dark); margin: 0; line-height: 1.2; font-family: inherit;}

        .hz-foundation-text .hz-section-title { font-size: 2.8rem; }
        
        .hz-foundation-list { margin-top: 30px; margin-bottom: 40px; }
        .hz-foundation-list li { display: flex; align-items: flex-start; gap: 15px; margin-bottom: 20px; }
        .hz-foundation-list i { font-size: 1.5rem; color: var(--hz-brand); background: var(--hz-brand-light); padding: 8px; border-radius: 50%; }
        .hz-foundation-list p { margin: 0; font-weight: 500; color: var(--hz-gray-700); }


        
        .hz-services-dark {
            background: var(--hz-brand-darkest); padding: var(--hz-section-padding-y) 0;
            position: relative; overflow: hidden;
        }
        
        .hz-services-dark::before {
            content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px;
            border-radius: 50%; background: radial-gradient(circle, rgba(100,100,100,0.1) 0%, transparent 70%);
        }

        .hz-services-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; }
        
        
        .hz-services-dark .hz-section-title { color: var(--hz-white); margin-bottom: 60px; text-align: center; max-width: 800px; margin-left: auto; margin-right: auto;}
        .hz-services-dark .hz-section-title span { color: var(--hz-brand-light); }

        .hz-service-card-ref {
            background: var(--hz-white); border-radius: var(--hz-radius-card); 
            padding: 0; overflow: hidden; position: relative;
            transition: all var(--hz-transition-normal);
        }
        .hz-service-card-ref:hover { transform: translateY(-10px); box-shadow: 0 20px 40px rgba(0,0,0,0.3); }
        .hz-service-card-ref img { width: 100%; height: 220px; object-fit: cover; }
        
        .hz-service-card-icon {
            position: absolute; right: 25px; top: 190px; 
            width: 60px; height: 60px; background: var(--hz-brand-light); color: var(--hz-brand);
            border-radius: 50%; display: flex; justify-content: center; align-items: center;
            font-size: 1.8rem; box-shadow: var(--hz-shadow-sm); border: 4px solid var(--hz-white);
        }
        
        .hz-service-card-content { padding: 40px 30px 30px; }
        .hz-service-card-content h4 { font-size: 1.4rem; color: var(--hz-brand-dark); margin-bottom: 15px; }
        .hz-service-card-content p { font-size: 0.95rem; margin-bottom: 25px; color: var(--hz-gray-600); }
        .hz-service-card-content a { 
            font-family: inherit; font-weight: 700; color: var(--hz-brand); 
            font-size: 0.95rem; display: flex; align-items: center; gap: 5px;
        }
        .hz-service-card-content a:hover { color: var(--hz-brand-dark); gap: 10px; }
        .hz-cta-section { padding: 60px 0 var(--hz-section-padding-y); background: var(--hz-white); }
        .hz-cta-box {
            background: var(--hz-brand-light); border-radius: 40px; overflow: hidden;
            display: grid; grid-template-columns: 1fr 1fr; align-items: center;
            position: relative;
        }
        
        .hz-cta-box::before {
            content: ''; position: absolute; right: 40%; top: -20%; width: 300px; height: 300px;
            border-radius: 50%; border: 2px dashed rgba(100,100,100,0.2);
        }

        .hz-cta-content { padding: 80px 60px; position: relative; z-index: 2; }
        .hz-cta-content .hz-section-title { font-size: 2.8rem; margin-bottom: 25px; }
        .hz-cta-content p { font-size: 1.1rem; color: var(--hz-brand-dark); margin-bottom: 35px; opacity: 0.8; }
        
        .hz-cta-image { height: 100%; position: relative; min-height: 500px;}
        .hz-cta-image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
        .hz-contact-form-block {
            background: var(--hz-white); border-radius: var(--hz-radius-card); padding: 50px;
            box-shadow: var(--hz-shadow-float); border: 1px solid var(--hz-gray-100);
            max-width: 800px; margin: -150px auto 100px auto; position: relative; z-index: 10;
        }
        .hz-contact-form-block h3 { text-align: center; font-size: 2rem; margin-bottom: 30px; }
        

        
        .hz-input-group { margin-bottom: 20px; }
        .hz-input-group label { display: block; font-family: inherit; font-weight: 600; color: var(--hz-brand-dark); margin-bottom: 8px; }
        .hz-input-group input, .hz-input-group textarea {
            width: 100%; padding: 16px 20px; border-radius: 12px; border: 1px solid var(--hz-gray-200); background: var(--hz-gray-50);
            font-family: inherit; font-size: 1rem; transition: all 0.3s;
        }
        .hz-input-group input:focus, .hz-input-group textarea:focus { border-color: var(--hz-brand); background: var(--hz-white); outline: none; box-shadow: 0 0 0 3px rgba(100,100,100,0.1); }
        
        .hz-service-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-bottom: 30px; }
        .hz-service-select-card {
            border: 2px solid var(--hz-gray-200); border-radius: 16px; padding: 20px; text-align: center;
            cursor: pointer; transition: all 0.2s;
        }
        .hz-service-select-card i { font-size: 2.5rem; color: var(--hz-brand); margin-bottom: 10px; }
        .hz-service-select-card span { display: block; font-family: inherit; font-weight: 600; color: var(--hz-brand-dark); }
        .hz-service-select-card.hz-selected { border-color: var(--hz-brand); background: var(--hz-brand-light); }
        .hz-form-step { display: none; animation: hz-fadeIn 0.4s; }

.hz-contact-row{display:grid;grid-template-columns:1fr 1fr;gap:20px}.hz-service-select-card{font:inherit;background:var(--hz-white)}.hz-btn:disabled{opacity:.5;cursor:not-allowed}.hz-scope [hidden]{display:none!important}.hz-scope :focus-visible{outline:3px solid var(--hz-brand);outline-offset:4px}
@keyframes hz-fadeIn{from{opacity:0}to{opacity:1}}
@media(max-width:1200px){.hz-hero-grid{grid-template-columns:1fr;text-align:center;gap:40px}.hz-hero-text{padding-right:0}.hz-hero-actions,.hz-hero-reviews{justify-content:center}.hz-hero-visual{height:500px}.hz-foundation-grid{grid-template-columns:1fr}.hz-foundation-images{height:auto;justify-content:center;margin-bottom:40px}.hz-img-main-card{width:100%;height:500px}.hz-services-grid{grid-template-columns:repeat(2,1fr)}.hz-cta-box{grid-template-columns:1fr}.hz-cta-image{min-height:400px}}
@media(max-width:768px){.hz-scope{--hz-section-padding-y:80px}.hz-hero-text h2{font-size:2.5rem}.hz-hero-visual{height:400px}.hz-target-wrapper{width:320px;height:320px;max-width:85vw;max-height:85vw}.hz-services-grid{grid-template-columns:1fr}.hz-cta-content{padding:50px 30px}.hz-contact-form-block{padding:30px 20px;margin-top:-80px}.hz-service-select-grid{grid-template-columns:1fr}.hz-contact-row{grid-template-columns:1fr}.hz-hero-actions{flex-wrap:wrap}}
@media(prefers-reduced-motion:reduce){.hz-scope *{animation:none!important;transition:none!important}}

.hz-form-step.hz-active{display:block}


/* Both calculators use the SITE_CALCULATOR configuration below. */
#hero-form.form-card { height:466px; overflow:hidden; }
.tc { --tc-accent:var(--brand, #666); font-size:15px; line-height:1.45; }
.tc *, .tc *::before, .tc *::after { box-sizing:border-box; }
.tc [hidden] { display:none!important; }
.tc button,.tc input { font:inherit; }
.tc button { cursor:pointer; }
.tc button:disabled { opacity:.45;cursor:not-allowed; }
.tc :focus-visible { outline:3px solid #999;outline-offset:3px; }
.tc fieldset { border:0;padding:0;margin:0;min-width:0; }
.tc legend { font-weight:700;margin:0 0 12px;font-size:1.1rem; }
.tc p { margin:0 0 12px; }
.tc .tc-note { font-size:.79rem;line-height:1.4;color:#646464; }
.tc .tc-btn { border:1px solid #bbb;border-radius:8px;padding:10px 13px;display:inline-flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:#333;font-weight:700;line-height:1.25; }
.tc .tc-btn-primary { background:var(--tc-accent);border-color:var(--tc-accent);color:white; }
.tc .tc-actions { display:flex;justify-content:space-between;gap:8px;border-top:1px solid #e7e7e7;padding-top:12px;margin-top:auto; }
.tc .tc-grid { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px; }
.tc .tc-option { position:relative;display:flex;flex-direction:column;border:2px solid #e7e7e7;border-radius:8px;padding:16px;cursor:pointer;background:white;min-width:0; }
.tc .tc-option:has(input:checked) { border-color:var(--tc-accent);background:#eee; }
.tc .tc-option:has(input:focus-visible) { outline:3px solid #999;outline-offset:2px; }
.tc .tc-option input { position:absolute;opacity:0;width:1px;height:1px; }
.tc .tc-option-title { display:flex;gap:8px;align-items:center;font-weight:800;color:#333;overflow-wrap:anywhere; }
.tc .tc-option-title i { font-size:1.3rem;flex-shrink:0; }
.tc .tc-option-desc { color:#666;font-size:.9rem;line-height:1.4;margin-top:5px; }
.tc .tc-fields { display:grid;grid-template-columns:1fr 1fr;gap:8px 12px; }
.tc .tc-field { display:flex;flex-direction:column;gap:4px;font-weight:600;font-size:.83rem;min-width:0; }
.tc .tc-field input:not([type=range]) { width:100%;min-width:0;border:1px solid #ccc;border-radius:8px;padding:9px 11px;background:white;color:#222; }
.tc .tc-field-wide { grid-column:1/-1; }
.tc .tc-range { width:100%;accent-color:var(--tc-accent);margin:12px 0; }
.tc .tc-value { display:block;font-size:2.3rem;font-weight:800;text-align:center;margin:18px 0;color:var(--tc-accent); }
.tc .tc-result { background:#333;color:white;border-radius:10px;text-align:center;padding:10px 14px;margin-bottom:10px; }
.tc .tc-result strong { display:block;font-size:1.65rem; }
.tc .tc-result .tc-note { color:#ddd;font-size:.74rem;margin:4px 0 0; }
.tc-hero { display:flex;flex-direction:column;height:100%;min-height:0; }
.tc-hero .tc-progress { position:relative;display:flex;justify-content:space-between;list-style:none;padding:0;margin:0 0 15px;flex-shrink:0; }
.tc-hero .tc-progress::before { content:'';position:absolute;left:10px;right:10px;top:17px;height:3px;background:#ddd; }
.tc-hero .tc-progress li { width:36px;height:36px;border:3px solid white;position:relative;border-radius:50%;background:#eee;color:#666;display:flex;align-items:center;justify-content:center;font-weight:800; }
.tc-hero .tc-progress li.active { background:var(--tc-accent);color:white; }
.tc-hero .tc-progress li.completed { background:#333;color:white; }
.tc-hero .tc-page { flex:1;min-height:0;overflow:auto;display:flex;flex-direction:column;gap:10px;padding:2px; }
.tc-hero h3 { font-size:1.25rem!important;margin:0!important; }
.tc-hero .tc-option { padding:13px 10px;min-height:76px;justify-content:center; }
.tc-hero .tc-option-title { flex-direction:column;text-align:center;font-size:.87rem;gap:4px; }
.tc-hero .tc-option-title i { font-size:1.65rem; }
.tc-hero .tc-contact { gap:6px; }
.tc-hero .tc-contact .tc-actions { padding-top:8px; }
.tc-hero .tc-done { justify-content:center;text-align:center; }
.tc .tc-done-icon { font-size:3.5rem;display:block;color:var(--tc-accent); }
.tc-split-section { padding:var(--section-padding-y, 100px) 0;background:#111; }
.tc-split-section .section-title,.tc-split-section .section-subtitle { color:white; }
.tc-split { display:flex;align-items:stretch;max-width:1100px;margin:0 auto;background:#111;border-radius:20px;box-shadow:0 0 36px rgba(255,255,255,.17);overflow:hidden;min-height:600px;border:1px solid #494949; }
.tc-split .tc-left { width:35%;background:#222;color:white;padding:50px 40px;display:flex;flex-direction:column;position:relative; }
.tc-split .tc-left::before { content:'';position:absolute;top:0;right:0;bottom:0;width:4px;background:#888; }
.tc-split .tc-left h3 { color:white;font-size:1.8rem;margin-bottom:15px; }
.tc-split .tc-left>p { color:#ccc;font-size:.95rem;margin-bottom:30px; }
.tc-split .tc-summary { background:rgba(255,255,255,.06);border-radius:12px;padding:25px;margin-top:auto;border:1px solid rgba(255,255,255,.1); }
.tc-split .tc-summary-row { display:flex;justify-content:space-between;gap:10px;margin-bottom:15px;border-bottom:1px dashed #555;padding-bottom:15px;align-items:center; }
.tc-split .tc-summary-row span { color:#ccc;font-size:.95rem; }
.tc-split .tc-summary-row strong { color:white;text-align:right;font-size:.95rem;overflow-wrap:anywhere; }
.tc-split .tc-total { margin-top:25px;border-top:1px solid #555;padding-top:20px; }
.tc-split .tc-total span { display:block;font-size:.95rem;color:#ccc;margin-bottom:5px; }
.tc-split .tc-total strong { display:block;font-size:2.2rem;color:white;font-weight:800;line-height:1.1;overflow-wrap:anywhere; }
.tc-split .tc-left .tc-note { color:#ccc;margin:15px 0 0; }
.tc-split .tc-right { width:65%;padding:50px 40px;background:#111;min-width:0; }
.tc-split .tc-accordion { background:#fff;border-radius:12px;margin-bottom:20px;border:1px solid #ddd;overflow:hidden; }
.tc-split .tc-accordion.active { border-color:#888;box-shadow:0 4px 14px #0003; }
.tc-split .tc-accordion h4 { margin:0; }
.tc-split .tc-accordion-toggle { padding:25px;width:100%;display:flex;justify-content:space-between;align-items:center;gap:15px;background:white;border:0;text-align:left;font-size:1.2rem;font-weight:700;color:#333; }
.tc-split .tc-header-title { display:flex;align-items:center;gap:15px; }
.tc-split .tc-step-num { width:30px;height:30px;flex-shrink:0;background:#eee;color:#666;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem; }
.tc-split .tc-status { color:#bbb;font-size:1.5rem; }
.tc-split .completed .tc-status { color:#26824b; }
.tc-split .completed .tc-accordion-toggle { color:#666; }
.tc-split .active .tc-step-num { background:#666;color:white; }
.tc-split .active .tc-accordion-toggle { border-bottom:1px solid #eee;margin-bottom:20px; }
.tc-split .tc-accordion-body { padding:0 25px 25px; }
.tc-split .tc-option { padding:20px; }
.tc-split .tc-actions { margin-top:20px; }
.tc-split .tc-demo-result { color:#333;background:white;border-radius:12px;padding:25px;text-align:center; }
@media(max-width:992px) { .tc-split { flex-direction:column; }.tc-split .tc-left,.tc-split .tc-right { width:100%; }.tc-split .tc-left { padding:40px 30px; }.tc-split .tc-left::before { width:100%;height:4px;top:auto; }.tc-split .tc-right { padding:40px 20px; } }
@media(max-width:576px) { #hero-form.form-card { height:648px; }.tc-hero .tc-grid { grid-template-columns:1fr;gap:10px; }.tc-hero .tc-option { min-height:84px; }.tc-hero .tc-fields { grid-template-columns:1fr; }.tc-hero .tc-actions { flex-wrap:wrap; }.tc-hero .tc-actions .tc-btn { flex:1; }.tc-split .tc-grid,.tc-split .tc-fields { grid-template-columns:1fr; }.tc-split .tc-accordion-toggle { font-size:1.05rem;padding:20px; }.tc-split .tc-left { padding:35px 24px; }.tc-split .tc-accordion-body { padding:0 18px 22px; } }

/* Small shared refinements: universal UI, contact balance, progressive motion. */
:focus-visible { outline: 3px solid var(--brand); outline-offset: 4px; }
.template-demo-note { color: var(--text-muted); font-size: .8rem; margin: 0 0 14px; }
.contact-grid { grid-template-columns: minmax(0, .45fr) minmax(0, .55fr); align-items: stretch; }
.contact-left, .contact-right { padding: 36px 28px; min-width: 0; }
.contact-left h3 { font-size: 1.8rem; margin-bottom: 16px; }
.contact-left p { font-size: .95rem; margin-bottom: 24px; }
.contact-info-block { padding: 16px; gap: 14px; margin-bottom: 16px; }
.contact-info-block:last-child { margin-bottom: 0; }
.contact-info-block > div { min-width: 0; }
.contact-info-block strong { font-size: 1rem; letter-spacing: 0; overflow-wrap: anywhere; }
.contact-info-block small { font-size: .82rem; }
.contact-left .icon-circle { width: 44px; height: 44px; font-size: 1.45rem; }
.contact-right label { font-size: .9rem; margin-bottom: 8px; }
.contact-right .service-btn { font-size: .85rem; height: auto; min-height: 48px; padding: 10px; gap: 8px; font-family: inherit; }
.contact-right .service-btn i { font-size: 1.2rem; }
.contact-right input, .contact-right textarea { font-size: .95rem; padding: 12px; }
.contact-right textarea { min-height: 96px; margin-bottom: 16px; }
.contact-right .form-row { gap: 14px; margin-bottom: 18px; }
.contact-right .btn-submit { padding: 15px; font-size: 1.05rem; }
.footer-links a, .nav-logo-link { overflow-wrap: anywhere; }
.process-step-v1 { min-width: 0; }
.process-step-v1 .no-break-headline, .scroll-card-content .no-break-headline { white-space: normal; overflow-wrap: anywhere; }
/* Clip projecting cylinder faces on the sticky element, never on its ancestors. */
.v2-sticky { overflow: clip; }
@media (max-width: 992px) { .contact-grid { grid-template-columns: 1fr; } }
@media (max-width: 576px) { .contact-left, .contact-right { padding: 28px 20px; } }

/* Opt in on ordinary image wrappers only. Never apply to sticky gallery ancestors. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .motion-image { overflow: hidden; }
    .motion-image > img { animation: imageDrift 1ms linear both; animation-timeline: view(); animation-range: entry 0% exit 100%; }
    @keyframes imageDrift { from { transform: translateY(-2%) scale(1.05); } to { transform: translateY(2%) scale(1.05); } }
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js .fade-in { opacity: 1; transform: none; }
}

/* Existing mobile CTA, now visible only after the primary hero. */
.mobile-progress-label { flex-basis: 100%; font-size: .75rem; line-height: 1.25; color: var(--text-muted); }
.mobile-bottom-cta { display: none; }
@media (max-width: 768px) {
  .mobile-bottom-cta { flex-wrap: wrap; gap: 8px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); }
  .mobile-bottom-cta.is-visible { display: flex; }
  .mobile-bottom-cta .btn { padding: 12px 8px; font-size: .95rem; }
  body { padding-bottom: calc(102px + env(safe-area-inset-bottom)); }
  .widget-phone, .widget-chat { bottom: calc(112px + env(safe-area-inset-bottom)); }
  .widget-chat.active { bottom: calc(112px + env(safe-area-inset-bottom)); max-height: calc(100dvh - 180px); }
  .widget-chat.active .chat-window { overflow-y: auto; max-height: calc(100dvh - 180px); }
}


        /* TEMPLATE FIXES: bounded visual QA repairs */
        /* Keep the fixed shell stable while allowing long or zoomed content to scroll. */
        :root { --template-header-offset: 150px; }
        section, header, footer, div[id] { scroll-margin-top: var(--template-header-offset, 150px); }
        .hz-scope { scroll-margin-top: var(--template-header-offset, 150px); }

        /* Desktop stage 3: compact the default field stack so both actions stay in the 466px shell. */
        .tc-hero .tc-contact { gap: 4px; }
        .tc-hero .tc-contact .tc-result { padding: 6px 12px; margin-bottom: 4px; }
        .tc-hero .tc-contact .tc-result strong { font-size: 1.45rem; line-height: 1.1; }
        .tc-hero .tc-contact .tc-result .tc-note { font-size: .72rem; line-height: 1.15; margin: 2px 0 0; }
        .tc-hero .tc-contact .tc-result p { margin-bottom: 0; }
        .tc-hero .tc-contact .tc-fields { gap: 3px 10px; }
        .tc-hero .tc-contact .tc-field { gap: 1px; font-size: .8rem; line-height: 1.2; }
        .tc-hero .tc-contact .tc-field input:not([type=range]) { padding: 6px 9px; line-height: 1.2; }
        .tc-hero .tc-contact > .tc-note { line-height: 1.2; margin-bottom: 3px; }
        .tc-hero .tc-contact .tc-actions { padding-top: 4px; }

        /* Hidden toast state is fully out of the viewport; shown state remains readable above the mobile bar. */
        .toast-notification { bottom: -120px; max-width: min(90vw, 420px); width: max-content; text-align: center; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(-50%); transition: transform .4s cubic-bezier(.175,.885,.32,1.275), opacity .2s ease, visibility 0s linear .4s; }
        .toast-notification.show { bottom: 40px; visibility: visible; opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); transition-delay: 0s; }

        /* Bounded mobile repairs from the visual QA pass. */
        @media (max-width: 768px) {
          .hz-experience-badge { left: 8px; right: 8px; max-width: calc(100% - 16px); padding: 18px 20px; display: block; text-align: center; }
          .hz-experience-badge h3 { font-size: 2.2rem; margin-bottom: 8px; }
          .hz-experience-badge p { min-width: 0; overflow-wrap: anywhere; text-align: center; }
          .accordion-content h4.no-break-headline { white-space: normal; overflow-wrap: anywhere; }
          .footer-grid > .footer-col:first-child { grid-column: auto !important; }
          .footer-col h4.no-break-headline { white-space: normal; overflow-wrap: anywhere; }
          /* The pinned cylinder keeps its own viewport; move only its title below the measured header. */
          .gallery-motion-v2 .v2-header { top: calc(var(--template-header-offset, 150px) + 4px); }
          .gallery-motion-v2 .v2-carousel { top: 44px; }
          .widget-phone { bottom: calc(180px + env(safe-area-inset-bottom)); }
          .widget-chat { bottom: calc(112px + env(safe-area-inset-bottom)); }
          .toast-notification { bottom: -120px; max-width: calc(100vw - 32px); width: max-content; padding: 12px 18px; border-radius: 16px; white-space: normal; }
          .toast-notification.show { bottom: calc(260px + env(safe-area-inset-bottom)); }
        }
    
    

.exit-popup,.chat-window{visibility:hidden}.exit-popup.active,.widget-chat.active .chat-window{visibility:visible}
.ba-wrapper:focus-within {outline:3px solid var(--brand);outline-offset:4px;}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation:none!important;transition:none!important}.fade-in{opacity:1!important;transform:none!important}.motion-image{transform:none!important}.v2-sticky,.v5-sticky{position:relative!important;top:auto!important}.gallery-motion-v2,.gallery-motion-v5{height:auto!important;min-height:0!important}.v2-carousel{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:min(90vw,900px)!important;height:auto!important;transform:none!important}.v2-item{position:relative!important;inset:auto!important;transform:none!important;aspect-ratio:4/3}.v2-sticky{height:auto!important;padding:40px 0!important}.v2-header,.v5-header{position:relative!important;top:auto!important;left:auto!important;transform:none!important;opacity:1!important}.v5-sticky{height:auto!important;display:flex!important;flex-direction:column!important}.v5-gate-panel{display:none!important}.v5-inner{position:relative!important;height:auto!important;opacity:1!important;transform:none!important;padding:30px 0!important}.v2-header{margin-bottom:24px!important}.v5-header,.v5-header h2,.v5-header .section-subtitle{color:var(--text,#172536)!important;text-shadow:none!important}}


.hero{isolation:isolate;background:var(--gray-100)}.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.72)),var(--hero-image,none);background-position:center;background-size:cover}.hero>.container{position:relative;z-index:1}
.ba-labels{z-index:6;left:0;right:0;box-sizing:border-box;align-items:flex-end}.ba-label.before,.ba-label.after{z-index:6;position:static;opacity:0;transition:opacity .2s ease}.ba-label.is-visible{opacity:1}@media(max-width:768px){.ba-labels{display:flex;padding:0 12px}.ba-label{max-width:48%;padding:4px 8px;font-size:.75rem;line-height:1.25}}@media(min-width:577px) and (max-width:768px){.ba-labels{bottom:auto;top:20px}}



:root{--brand:#1e73be;--brand-hover:#185f9d;--brand-dark:#123b61;--brand-darkest:#082338;--brand-light:#edf5fc;--radius-global:8px;--white:#fff}
body{font-family:'Source Sans 3',sans-serif}h1,h2,h3,h4,h5,h6,.btn{font-family:Manrope,sans-serif}
.scroll-card > img{border-bottom-left-radius:0;border-bottom-right-radius:0}
.hz-scope{--hz-primary:#1e73be;--hz-dark:#123b61;--hz-accent:#1e73be}
.hz-services-dark h2,.hz-services-dark h3,.hz-services-dark h4,.hz-services-dark p,.stats-section h2,.stats-section p,.trust-badges p,.accordion-panel h3,.accordion-panel p,.v5-title h2,.v5-title p,.process-v1 h2,.process-v1 h3,.process-v1 p,.contact-left h3,.contact-left p,.tc-split-section .section-title,.tc-split-section .section-subtitle,.tc-split .tc-left h3,.tc-split .tc-left>p,.tc-split .tc-left .tc-note{color:var(--white)!important;opacity:1!important;text-shadow:0 2px 5px #0005}
.hz-scope{--hz-radius-pill:10px;--hz-radius-card:10px;--hz-radius-global:8px}.hz-scope .hz-cta-box{border-radius:10px!important}.hz-scope .hz-service-select-card{border-radius:8px!important}.hz-scope .hz-btn,.hz-scope .hz-btn-play,.hz-scope .hz-pill-badge{border-radius:10px!important}.hz-cta-section .hz-cta-content h2,.hz-cta-section .hz-cta-content h3,.hz-cta-section .hz-cta-content p{color:var(--brand-dark)!important;opacity:1!important;text-shadow:none!important}.source-additions{margin-top:24px;padding:8px 0}.source-additions p{color:var(--hz-brand-dark);opacity:1}.catalog-details figcaption{color:#123b61;font-size:.85rem;text-align:center;margin-top:4px}
.hz-scope{--hz-radius-pill:10px;--hz-radius-card:10px;--hz-radius-global:8px}.hz-scope .hz-cta-box{border-radius:10px!important}.hz-scope .hz-service-select-card{border-radius:8px!important}.hz-scope .hz-btn,.hz-scope .hz-btn-play,.hz-scope .hz-pill-badge{border-radius:10px!important}.hz-cta-section .hz-cta-content h2,.hz-cta-section .hz-cta-content h3,.hz-cta-section .hz-cta-content p{color:var(--brand-dark)!important;opacity:1!important;text-shadow:none!important}.source-additions{margin-top:24px;padding:8px 0}.source-additions p{color:var(--hz-brand-dark);opacity:1}.catalog-details figcaption{color:#123b61;font-size:.85rem;text-align:center;margin-top:4px}@media(prefers-reduced-motion:reduce){.gallery-motion-v5 #v5-title h2,.gallery-motion-v5 #v5-title .section-subtitle,.gallery-motion-v5 .v5-header h2,.gallery-motion-v5 .v5-header .section-subtitle{color:var(--brand-dark)!important;opacity:1!important;text-shadow:none!important}}
.hz-service-card-ref{background:#123b61}.nav-logo-img{height:54px;width:55px;object-fit:contain}.nav-logo-link{flex-shrink:0}.test-card img{object-fit:cover;border-radius:4px}.test-card .quote{font-style:normal}.test-avatar{font-size:12px}.test-card{background:white}.catalog-details{padding:35px 20px;background:#edf5fc;color:#123b61;position:relative;z-index:5}.catalog-items{display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:center}.catalog-items figure{max-width:360px;margin:0}.catalog-items img{display:block}details{margin-top:20px}summary{cursor:pointer;font-weight:700;padding:16px 0}details p{font-size:1rem;line-height:1.6}.hz-review-avatars img{border:2px solid white}.top-bar a{color:white}.hz-hero-image-circle img{object-fit:cover}.hz-hero{overflow:hidden}.logo-ticker-section{overflow:hidden}.top-bar-inner{flex-wrap:wrap}.no-break-headline{white-space:normal!important;overflow-wrap:anywhere}.test-author-row img{width:24px!important;height:24px!important}.hz-services-dark{overflow:hidden}.hz-service-card-ref{border-radius:10px!important}.hz-service-card-ref a{color:#d8ecff!important}.ph-placeholder::before{content:"✓"}.hz-scope .hz-service-card-ref{background:#123b61}
@media(max-width:600px){.nav-logo-img{width:44px;height:44px}details{overflow-wrap:anywhere}}



#kezdes{--hero-image:url("images/final/centerpointt-2016x1512-800x600-1-008.jpg")}
#hz-szolgaltatasok .hz-service-card-icon i{font-size:2.2rem}
#kezdes .hero-text h1{color:var(--brand-darkest);text-shadow:0 2px 8px #fff8}#kezdes .hero-subtitle{color:#24445e}
#kalkulator{background:var(--brand-darkest)}.about-img:before,.about-img:after{border-radius:var(--radius-card)}.about-img>img{border-radius:var(--radius-card)!important}
.about-grid>.designed-disclosure{grid-column:1/-1}.project-reference{display:flex;padding-bottom:14px;border-bottom:1px solid #173b6115;font-weight:600}
.ba-label.before{max-width:55%;font-size:.86rem}.ba-label.after{font-size:.86rem}.before-after-section .section-subtitle{max-width:90%}
.test-columns{height:auto;mask-image:none;-webkit-mask-image:none;align-items:stretch}.test-col-inner{animation:none!important;height:100%}.test-card{height:100%;min-height:310px}.test-card .quote{font-style:normal}.test-card .review-stars.verified-rating{color:#f4b400}.review-stars.verified-rating svg{fill:currentColor;stroke-width:1}.review-stars strong{color:var(--brand-dark);font-size:1.6rem;margin-left:6px;line-height:1}.review-link{font-size:.85rem;margin-top:auto;border-top:1px solid #173b6115;padding-top:14px;text-decoration:underline;text-underline-offset:3px}

/* Shared component corrections. Keep circles and the template's interaction hooks. */
:root{--radius-card:var(--radius-global,8px);--elevation-3:0 3px 3px -2px #14283c24,0 3px 4px 0 #14283c1a,0 1px 8px 0 #14283c1a;--elevation-hover:0 8px 24px #14283c24}
i[data-local-icon]{display:inline-flex;align-items:center;justify-content:center;font-style:normal;vertical-align:middle;line-height:1;flex-shrink:0}
i[data-local-icon]::before{content:none!important}i[data-local-icon]>svg{width:1em;height:1em;display:block;flex-shrink:0}
.sr-only,.tc legend.sr-only{position:absolute!important;width:1px;height:1px;padding:0!important;margin:-1px!important;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.scroll-card>img{border-bottom-left-radius:0!important;border-bottom-right-radius:0!important}
.about-img,.about-img>img,.about-img::before,.about-img::after{border-radius:var(--radius-card)!important}.about-grid>.designed-disclosure{grid-column:1/-1}
.about-img.motion-image{overflow:visible}.about-img.motion-image>img{animation:none!important;transform:none!important}
.form-card,.feature-card,.sd2-feature-card,.about-experience,.scroll-card,.test-card,.team-card,.hz-contact-form-block,.hz-img-main-card,.hz-cta-box{box-shadow:var(--elevation-3);border-color:#173b6114}
.v5-gate-panel{width:50%;margin:0;border:0}.v5-gate-panel img{width:200%!important;max-width:none!important;height:100%!important;object-fit:cover!important;object-position:center!important;border-radius:0!important;transform:none!important}.v5-gate-left img{left:0!important}.v5-gate-right img{left:-100%!important}
.v5-header .section-title{color:var(--white)!important;text-shadow:0 2px 2px #000b,0 5px 14px #0009,0 14px 36px #0008!important;filter:drop-shadow(0 1px 0 #ffffff24)}
.v5-header .section-subtitle{color:var(--white)!important;text-shadow:0 2px 6px #0009!important}
.trust-item{font-weight:800;font-size:clamp(1.1rem,1.7vw,1.35rem);line-height:1.45;color:var(--white);letter-spacing:-.02em}.trust-item i{color:var(--white);background:linear-gradient(145deg,#ffffff26,#ffffff0c);border:1px solid #ffffff35;box-shadow:inset 0 1px 0 #ffffff3b,0 6px 20px #0002;border-radius:var(--radius-card);padding:17px}
.hz-service-card-icon{color:var(--hz-brand-dark,var(--brand-dark))!important}.hz-service-card-icon i{font-size:2.8rem}
.sd2-feature-card{transition:transform .2s,box-shadow .2s,border-color .2s}.sd2-feature-card:hover,.sd2-feature-card:focus-visible,.sd2-feature-card:focus-within{transform:translateY(-4px);box-shadow:var(--elevation-hover);border-color:var(--brand);outline:none}.sd2-feature-card:focus-visible{outline:3px solid var(--brand);outline-offset:4px}.sd2-feature-card i{color:var(--brand);border:1px solid #173b6110}
.about-experience{padding:22px 26px;gap:18px;align-items:center;box-shadow:var(--elevation-hover)}.about-experience i{width:62px;height:62px;border-radius:var(--radius-card);background:var(--brand-light);font-size:2.2rem}.about-experience p{line-height:1.45;max-width:230px}.about-image,.about-image img,.about-image .img-wrapper{border-radius:var(--radius-card)}.about-image .img-wrapper{overflow:hidden}.about-image .img-wrapper img{border-radius:inherit}
:is(.section-subtitle,.hz-pill-badge){display:inline-flex!important;align-items:center;justify-content:center;gap:8px;max-width:100%;width:fit-content;padding:7px 13px!important;margin-bottom:18px;border:1px solid #173b611c;border-radius:var(--radius-card)!important;background:var(--brand-light,#eef5fa);color:var(--brand-dark,#173b61)!important;font-size:.78rem!important;font-weight:800!important;line-height:1.45;letter-spacing:.055em;text-transform:uppercase;text-shadow:none!important;box-shadow:none}
.hz-pill-badge .hz-highlight{display:contents!important;color:inherit!important;background:none!important}.text-center>:is(.section-subtitle,.hz-pill-badge),#kalkulator>.container>.section-subtitle{margin-left:auto!important;margin-right:auto!important}
.hz-scope .hz-pill-badge{border-radius:var(--radius-card)!important}
:is(.hz-services-dark,.v5-header,.process-v1,.contact-left,.stats-section,.tc-split-section) :is(.section-subtitle,.hz-pill-badge){background:#ffffff18!important;border-color:#ffffff42!important;color:var(--white)!important}
.disclosure-container{position:relative;z-index:5;padding-top:24px;padding-bottom:24px}.designed-disclosure{margin:14px 0 0!important;padding:0!important;background:var(--white)!important;border:1px solid #173b6118;border-radius:var(--radius-card);color:var(--brand-dark,#173b61)!important;box-shadow:var(--elevation-3);text-align:left;overflow:hidden}
.designed-disclosure>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0;padding:20px 24px!important;font-size:1.04rem;font-weight:750;line-height:1.4;color:var(--brand-dark,#173b61)!important;background:transparent;cursor:pointer}.designed-disclosure>summary::-webkit-details-marker{display:none}.designed-disclosure>summary::after{content:'+';width:26px;height:26px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:var(--brand-light);color:var(--brand);font-size:1.2rem;font-weight:600}.designed-disclosure[open]>summary{border-bottom:1px solid #173b6115;background:var(--brand-light)}.designed-disclosure[open]>summary::after{content:'−'}.designed-disclosure>summary:focus-visible{outline:3px solid var(--brand);outline-offset:-4px}.designed-disclosure>:not(summary){margin:18px 24px!important;color:var(--brand-dark,#173b61)!important;text-shadow:none!important;opacity:1!important}.designed-disclosure p{font-size:1rem;line-height:1.65}.designed-disclosure .catalog-items{padding:6px 0;gap:22px}
#kalkulator>.container{text-align:center}#kalkulator .tc-split{text-align:left;background:var(--white);border:1px solid #ffffff38;border-radius:var(--radius-card);box-shadow:0 16px 50px #0003;min-height:0}#kalkulator .tc-left{width:33%;padding:30px;background:var(--brand-dark);gap:0}#kalkulator .tc-left::before{display:none}#kalkulator .tc-left h3{font-size:1.3rem;display:flex;align-items:center;gap:10px}#kalkulator .tc-left>p{font-size:.9rem;line-height:1.5;margin-bottom:24px;color:#fff!important}#kalkulator .tc-summary{margin-top:0;background:#ffffff0d;border:1px solid #ffffff24;border-radius:var(--radius-card);padding:20px}#kalkulator .tc-summary-row{padding-bottom:12px;margin-bottom:12px;border-bottom:1px solid #ffffff24}#kalkulator .tc-summary-row span,#kalkulator .tc-total span{color:#d9e8f3}#kalkulator .tc-summary-row strong{font-size:.86rem}#kalkulator .tc-total{margin-top:20px;border-color:#ffffff35}#kalkulator .tc-total strong{font-size:2rem;margin-top:8px}#kalkulator .tc-left .tc-note{line-height:1.6;font-size:.8rem;color:#e1edf5!important}#kalkulator .tc-right{width:67%;background:var(--brand-light);padding:30px}#kalkulator .tc-accordion{margin-bottom:14px;border-radius:var(--radius-card);border:1px solid #173b6125;box-shadow:var(--elevation-3)}#kalkulator .tc-accordion:last-of-type{margin-bottom:0}#kalkulator .tc-accordion.active{border-color:var(--brand);box-shadow:0 0 0 1px var(--brand),var(--elevation-3)}#kalkulator .tc-accordion-toggle{padding:20px;color:var(--brand-dark);font-size:1rem}#kalkulator .active .tc-accordion-toggle{background:#fff;border-bottom-color:#173b6115;margin-bottom:20px}#kalkulator .tc-accordion-body{padding:0 20px 20px}#kalkulator .tc-step-num{background:var(--brand-light);color:var(--brand-dark)}#kalkulator .active .tc-step-num{background:var(--brand);color:#fff}#kalkulator .tc-status{visibility:hidden}#kalkulator .completed .tc-status{visibility:visible}#kalkulator .tc-option{padding:16px;border-width:1px;border-color:#173b612a;gap:4px}#kalkulator .tc-option-title{font-size:.98rem;color:var(--brand-dark)}#kalkulator .tc-option-desc{font-size:.85rem;color:#526779}#kalkulator .tc-actions{border-top:0;margin-top:20px;padding-top:0}#kalkulator .tc-actions .tc-btn-primary{margin-left:auto;min-width:145px;padding:13px 20px}.tc .tc-option:has(input:checked){border-color:var(--brand);background:var(--brand-light);box-shadow:inset 0 0 0 1px var(--brand)}.tc .tc-option:hover{border-color:var(--brand)}.tc :focus-visible{outline-color:var(--brand)}.tc .tc-btn-primary:disabled{opacity:1;background:#dce6ee;border-color:#dce6ee;color:#5b7082}.tc .tc-result{background:var(--brand-dark)}
.scroll-feature-list{display:flex;flex-direction:column;gap:0;margin-top:20px;border-top:1px solid #173b6118}.scroll-feature-item{display:flex;align-items:flex-start;gap:12px;min-width:0;padding:13px 0;border-bottom:1px solid #173b6118;line-height:1.5;text-align:left}.scroll-feature-item i{background:var(--brand-light);color:var(--brand);border-radius:var(--radius-card);width:30px;height:30px;font-size:1.15rem;flex-shrink:0}
.test-card{position:relative;gap:18px;padding:26px;border-radius:var(--radius-card)}.test-author-row{order:-2;margin:0;gap:12px;align-items:flex-start}.test-author-info{gap:12px;align-items:center}.test-name-role strong{font-size:1rem;line-height:1.4}.test-name-role time{display:block;color:#667582;font-size:.78rem;margin-top:4px}.test-avatar{background:#e8eff4;color:var(--brand-dark);width:42px;height:42px;flex-shrink:0}.test-card .review-stars{order:-1;display:flex;gap:3px;color:#728391;font-size:1rem}.test-card .quote{font-size:1rem;line-height:1.65;margin:0}.test-card .design-placeholder{font-size:.71rem;color:#657887;border-top:1px solid #173b6114;padding-top:12px;margin-top:auto}.test-card .test-author-row img{width:23px!important;height:23px!important;border-radius:0;object-fit:contain;flex-shrink:0}
@media(max-width:992px){#kalkulator .tc-split{flex-direction:column}#kalkulator .tc-left,#kalkulator .tc-right{width:100%}#kalkulator .tc-left{padding:24px}#kalkulator .tc-summary{display:block}#kalkulator .tc-left>p{margin-bottom:16px}.about-experience{left:12px;bottom:12px}}
@media(max-width:600px){.designed-disclosure>summary{padding:17px 18px!important}.designed-disclosure>:not(summary){margin:16px 18px!important}#kalkulator .tc-right{padding:18px 12px}#kalkulator .tc-left{padding:22px 18px}#kalkulator .tc-accordion-body{padding:0 15px 18px}.sd2-feature-card i{padding:12px}.about-experience{position:relative;left:auto;bottom:auto;margin:-24px 14px 0;padding:16px;gap:12px}.about-experience i{width:48px;height:48px;font-size:1.7rem}.about-experience p{max-width:none}.test-card{padding:22px}}
@media(prefers-reduced-motion:reduce){.sd2-feature-card:hover,.sd2-feature-card:focus-visible{transform:none}.v5-header .section-title{color:var(--brand-dark)!important;text-shadow:none!important;filter:none}.v5-header .section-subtitle{background:var(--brand-light)!important;border-color:#173b611c!important;color:var(--brand-dark)!important;text-shadow:none!important}}
.hero{isolation:isolate;background:var(--gray-100)}.hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,255,255,.72)),var(--hero-image,none);background-position:center;background-size:cover}.hero>.container{position:relative;z-index:1}
.ba-labels{z-index:6;left:0;right:0;box-sizing:border-box;align-items:flex-end}.ba-label.before,.ba-label.after{z-index:6;position:static;opacity:0;transition:opacity .2s ease}.ba-label.is-visible{opacity:1}@media(max-width:768px){.ba-labels{display:flex;padding:0 12px}.ba-label{max-width:48%;padding:4px 8px;font-size:.75rem;line-height:1.25}}@media(min-width:577px) and (max-width:768px){.ba-labels{bottom:auto;top:20px}}


/* Round 1 review fixes */
.brand-wordmark{display:flex;flex-direction:column;gap:4px;line-height:1.1;font-size:18px;font-family:Manrope,sans-serif;font-weight:800;white-space:nowrap;color:var(--brand-dark)}
.brand-wordmark small{font-size:12px;letter-spacing:.045em;text-transform:uppercase;font-weight:600}
.nav-logo-link,.footer-brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.brand-logo-panel{background:#fff;border-radius:8px;padding:8px;display:flex}.brand-logo-panel img{object-fit:contain}
.footer-brand{margin-bottom:24px;width:fit-content}.footer-brand .brand-wordmark{color:#fff}
@media(max-width:600px){.nav .brand-wordmark{font-size:15px}.nav .brand-wordmark small{font-size:10px}}
/* One section-heading size everywhere (the "Így dolgozunk" size). */
section h2.section-title,section h2.hz-section-title,.hz-hero h2,#hz-rolunk h2,.hz-cta-section h2,.sd2-service-grid h2,.service-detail h2{font-size:clamp(1.9rem,1.1rem + 2.3vw,3.1rem)!important;line-height:1.15!important;letter-spacing:-.02em}
/* Hero visual without rings */
.hz-hero-reviews{gap:14px;align-items:center}
/* Trust strip with the guarantee highlighted */
.trust-grid{grid-template-columns:repeat(4,1fr)!important;align-items:stretch}
.trust-item--highlight{background:var(--white);color:var(--brand-dark)!important;border-radius:var(--radius-card);padding:22px 20px;box-shadow:0 12px 32px #0003}
.trust-item--highlight i{color:var(--white)!important;background:var(--brand)!important;border-color:var(--brand)!important}
.trust-item--highlight span{display:flex;flex-direction:column;gap:2px}.trust-item--highlight strong{font-size:1.45rem;color:var(--brand-dark)}
.trust-item--highlight small{font-size:.95rem;font-weight:600;color:var(--brand-dark);opacity:.8}
@media(max-width:900px){.trust-grid{grid-template-columns:1fr 1fr!important}}@media(max-width:560px){.trust-grid{grid-template-columns:1fr!important}}
/* Buttons: one component. Primary = brand fill, outline = secondary, auto-inverted on dark sections. */
.btn,.hz-btn,.btn-submit{font-family:Manrope,sans-serif!important;font-weight:700!important;font-size:1rem!important;line-height:1.2!important;padding:15px 28px!important;border-radius:8px!important;border:2px solid transparent!important;display:inline-flex!important;align-items:center;justify-content:center;gap:10px;text-decoration:none;cursor:pointer;transition:background-color .2s,color .2s,border-color .2s,transform .2s,box-shadow .2s}
.btn-primary,.hz-btn-brand,.hz-btn-primary,.btn-submit{background:var(--brand)!important;color:#fff!important;border-color:var(--brand)!important;box-shadow:0 6px 18px #1e73be33}
.btn-primary:hover,.hz-btn-brand:hover,.hz-btn-primary:hover,.btn-submit:hover{background:var(--brand-hover)!important;border-color:var(--brand-hover)!important;transform:translateY(-2px);box-shadow:0 10px 24px #1e73be47}
.btn-outline,.hz-btn-outline{background:transparent!important;color:var(--brand-dark)!important;border-color:var(--brand-dark)!important}
.btn-outline:hover,.hz-btn-outline:hover{background:var(--brand-dark)!important;color:#fff!important}
:is(.trust-badges,.process-v1,.stats-section,.hz-services-dark,.tc-split-section) .btn-outline{color:#fff!important;border-color:#fff!important}
:is(.trust-badges,.process-v1,.stats-section,.hz-services-dark,.tc-split-section) .btn-outline:hover{background:#fff!important;color:var(--brand-darkest)!important}
:is(.process-v1,.stats-section) .btn-primary{background:#fff!important;color:var(--brand-darkest)!important;border-color:#fff!important;box-shadow:none}
.btn:disabled,.hz-btn:disabled{opacity:.45;cursor:not-allowed;transform:none!important;box-shadow:none}
.btn:focus-visible,.hz-btn:focus-visible{outline:3px solid var(--brand);outline-offset:3px}
/* Floating phone widget: white icon */
.widget-phone,.widget-phone .icon-wrapper,.widget-phone i{color:#fff!important}
/* FAQ list */
#gyik .faq-grid{max-width:880px;margin:0 auto}
textarea{font-family:inherit}


.stats-section{padding:96px 0!important}
.stat-item--highlight{background:#fff;border-radius:8px;padding:28px 20px;box-shadow:0 12px 32px #0004}
.stat-item--highlight :is(h3,.stat-number,p,i){color:var(--brand-dark)!important;text-shadow:none!important}
.stat-item--highlight i{color:var(--brand)!important}
@media(max-width:768px){.stats-section{padding:48px 0!important}}

/* ===== Site layer: tokens from design/DESIGN.md + inner-page templates ===== */
:root{--section-padding-y:96px!important;--ink:#0b1526;--navy:#0e1730}
@media(max-width:768px){:root{--section-padding-y:56px!important}}

/* Navbar: 8 page links + CTA. Collapses to the burger menu below 1280px. */
.nav-links{gap:22px}
.nav-links a{font-size:.98rem;white-space:nowrap}
.nav-links a.nav-accent{color:var(--brand)!important;font-weight:700}
@media(max-width:1279px){
  .nav-links,.nav-cta{display:none}
  .mobile-menu-btn{display:block}
  .nav-links.active{display:flex;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;align-items:stretch;background:var(--white);padding:10px 24px 18px;border-bottom:1px solid var(--gray-200);z-index:var(--z-dropdown);box-shadow:0 10px 20px rgba(0,0,0,.1)}
  .nav-links.active a{padding:13px 0;border-bottom:1px solid var(--gray-100)}
  .nav-links.active a::after{display:none}
}

/* page-hero: compact hero for inner pages */
.page-hero{position:relative;background:var(--brand-darkest);color:#fff;padding:88px 0 80px;overflow:hidden}
.page-hero::before{content:"";position:absolute;inset:0;background:var(--page-hero-img) center/cover no-repeat;opacity:.28}
.page-hero::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--brand-darkest) 30%,transparent)}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{font-family:Manrope,sans-serif;font-size:clamp(2.1rem,1.3rem + 2.5vw,3.2rem);line-height:1.1;letter-spacing:-.02em;color:#fff;max-width:820px;margin:0 0 20px}
.page-hero .lead{font-size:1.2rem;line-height:1.6;color:#ffffffd9;max-width:680px;margin:0 0 32px}
.page-hero .actions{display:flex;gap:14px;flex-wrap:wrap}
.page-hero .btn-outline{color:#fff!important;border-color:#fff!important}
.page-hero .btn-outline:hover{background:#fff!important;color:var(--brand-darkest)!important}
.page-hero .chips{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.page-hero .chips span{display:inline-flex;align-items:center;gap:8px;background:#ffffff1a;border:1px solid #ffffff33;border-radius:8px;padding:8px 14px;font-weight:600;font-size:.95rem}
.page-hero .chips i{width:18px;height:18px;color:#fff}
@media(max-width:768px){.page-hero{padding:56px 0}}

/* Generic section shell for inner pages */
.block{padding:var(--section-padding-y) 0;background:var(--white)}
.block.alt{background:var(--gray-50)}
.block.dark{background:var(--brand-darkest);color:#fff}
.block.dark h2,.block.dark h3{color:#fff}
.block.dark p{color:#ffffffd9}
.block .section-header{margin-bottom:56px}
.block .section-header p{max-width:720px;margin:16px auto 0}

/* split: text + image, alternating (mirrors the homepage service rows) */
.split{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.split.reverse .split-media{order:2}
.split-media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:8px;box-shadow:var(--elevation-3);display:block}
.split-media.tall img{aspect-ratio:3/4;max-height:620px}
.split-body h2{margin-bottom:20px}
.split-body p{font-size:1.1rem;line-height:1.7;color:var(--gray-600);margin:0 0 16px}
.split-body .sd2-feature-cards{margin:28px 0}
.split-body .btn{margin-top:8px}
@media(max-width:900px){.split{grid-template-columns:1fr;gap:32px}.split.reverse .split-media{order:0}}

/* check-list */
.check-list{list-style:none;padding:0;margin:20px 0;display:grid;gap:12px}
.check-list li{position:relative;padding-left:34px;font-size:1.05rem;line-height:1.55;color:var(--gray-700)}
.check-list li::before{content:"";position:absolute;left:0;top:2px;width:22px;height:22px;border-radius:50%;background:var(--brand-light) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e73be' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12l5 5 9-10'/%3E%3C/svg%3E") center/13px no-repeat}
.check-list.cols{grid-template-columns:1fr 1fr;column-gap:32px}
.block.dark .check-list li{color:#ffffffe6}
@media(max-width:700px){.check-list.cols{grid-template-columns:1fr}}

/* card-grid (team-card look) */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.card-grid.four{grid-template-columns:repeat(4,1fr)}
.info-card{background:#fff;border:1px solid var(--gray-200);border-radius:8px;padding:28px;box-shadow:var(--elevation-3);display:flex;flex-direction:column;gap:10px}
.info-card i{width:56px;height:56px;padding:12px;border-radius:8px;background:var(--brand-light);color:var(--brand)}
.info-card i svg{width:30px;height:30px}
.info-card h3{font-family:Manrope,sans-serif;font-size:1.2rem;line-height:1.3;color:var(--brand-dark);margin:6px 0 0}
.info-card p{margin:0;color:var(--gray-600);line-height:1.6}
.info-card .meta{font-family:Manrope,sans-serif;font-weight:800;color:var(--brand);font-size:1.25rem;line-height:1.3}
.info-card .meta.figure{font-size:clamp(2.6rem,2rem + 2vw,3.5rem);line-height:1;letter-spacing:-.02em}
@media(max-width:1000px){.card-grid,.card-grid.four{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.card-grid,.card-grid.four{grid-template-columns:1fr}}

/* blog cards */
.post-card{background:#fff;border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;box-shadow:var(--elevation-3);display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s}
.post-card:hover{transform:translateY(-4px);box-shadow:0 16px 32px #14283c24}
.post-card img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block}
.post-card .body{padding:24px;display:flex;flex-direction:column;gap:12px;flex:1}
.post-card h3{font-family:Manrope,sans-serif;font-size:1.2rem;line-height:1.35;color:var(--brand-dark);margin:0}
.post-card p{margin:0;color:var(--gray-600);line-height:1.6}
.post-card .more{margin-top:auto;font-weight:700;color:var(--brand);display:inline-flex;gap:8px;align-items:center}
.post-card .more i{width:18px;height:18px}

/* photo-grid gallery with captions (opens the shared lightbox) */
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.photo-grid figure{margin:0;position:relative;border-radius:8px;overflow:hidden;cursor:zoom-in;background:var(--gray-100)}
.photo-grid img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;transition:transform .4s}
.photo-grid figure:hover img{transform:scale(1.04)}
.photo-grid figcaption{position:absolute;left:0;right:0;bottom:0;padding:28px 12px 10px;font-size:.88rem;font-weight:600;color:#fff;background:linear-gradient(transparent,#082338e6)}
@media(max-width:1000px){.photo-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.photo-grid{grid-template-columns:1fr 1fr}}

/* data-table (pricing, maintenance) */
.table-wrap{overflow-x:auto;border-radius:8px;border:1px solid var(--gray-200);box-shadow:var(--elevation-3);background:#fff}
.data-table{width:100%;border-collapse:collapse;font-size:1.02rem;min-width:560px}
.data-table th{background:var(--brand-darkest);color:#fff;text-align:left;font-family:Manrope,sans-serif;font-weight:700;padding:16px 20px}
.data-table td{padding:16px 20px;border-top:1px solid var(--gray-200);color:var(--gray-700);vertical-align:top}
.data-table tr:nth-child(even) td{background:var(--gray-50)}
.data-table td:first-child{font-weight:700;color:var(--brand-dark)}
.table-note{font-size:.95rem;color:var(--gray-600);margin-top:14px}

/* reference list */
.ref-list{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:12px 28px}
.ref-list li{display:flex;justify-content:space-between;gap:16px;padding:16px 20px;background:#fff;border:1px solid var(--gray-200);border-radius:8px}
.ref-list strong{color:var(--brand-dark)}
.ref-list span{color:var(--brand);font-weight:700;white-space:nowrap}
@media(max-width:800px){.ref-list{grid-template-columns:1fr}.ref-list li{flex-direction:column;gap:4px}}

/* prose: long legal or explanatory text */
.prose{max-width:820px;margin:0 auto}
.prose h2{margin:0 0 20px}
.prose h3{font-family:Manrope,sans-serif;font-size:1.35rem;color:var(--brand-dark);margin:40px 0 12px}
.prose p{font-size:1.08rem;line-height:1.75;color:var(--gray-700);margin:0 0 16px}
.prose .callout{background:var(--brand-light);border-left:4px solid var(--brand);border-radius:8px;padding:20px 24px;margin:28px 0}
.prose .callout p{margin:0}

/* contact cards (Kapcsolat) */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-cards a,.contact-cards div.info-card{text-decoration:none}
@media(max-width:900px){.contact-cards{grid-template-columns:1fr}}

.center-cta{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;margin-top:48px}

/* Mobile: smaller floating widgets so they cover less content (QA round 1). */
@media(max-width:768px){
  .widget-phone,.widget-chat:not(.active):not(:hover){width:48px;height:48px;right:16px}
  .widget-phone .icon-wrapper,.widget-chat .icon-wrapper{min-width:46px;height:46px;font-size:1.4rem}
  .widget-chat .icon-wrapper{min-width:48px;height:48px}
  .widget-phone{bottom:calc(168px + env(safe-area-inset-bottom))}
}

/* QA round 2 */
.vertical-title{text-shadow:0 1px 3px #000000b3,0 0 12px #00000080}
@media(max-width:768px){
  .hz-hero{padding-top:72px!important}
  .footer-bottom{padding-right:64px;padding-bottom:16px}
}

/* Round 5 review: testimonials (stars top, quote in body font, author and date at the bottom), unclipped shadows, tighter FAQ */
.test-columns{overflow:visible}
.test-card{gap:12px}
.test-card .review-stars{order:-1;margin-bottom:-2px}
.test-card .quote{font-family:'Source Sans 3',sans-serif;font-size:1.05rem;font-weight:400;color:var(--gray-700)}
.test-card .test-author-row{order:1;margin-top:auto;padding-top:16px;border-top:1px solid var(--gray-200);align-items:center}
#gyik .faq-grid{gap:14px}
#gyik .faq-grid>details.faq-item{margin-top:0!important;margin-bottom:0!important}
#szolgaltatasok>.section-header{margin-bottom:0!important;padding-bottom:40px}
#szolgaltatasok>.section-header+section.service-detail{padding-top:56px!important}

/* Hero calculator (review round 6): roomier steps, no divider, form inputs match the contact form */
.tc-hero .tc-progress{margin-bottom:30px}
.tc-hero h3{font-size:1.6rem!important;margin-bottom:10px!important}
.tc-hero .tc-actions{border-top:0;padding-top:0}
.tc-hero .tc-page[data-page="1"] fieldset{flex:1;display:flex;flex-direction:column;justify-content:center;margin:0;padding:0;border:0;min-width:0}
.tc-hero .tc-contact .tc-fields{gap:12px 12px}
.tc-hero .tc-contact .tc-field{font-weight:600;font-size:.95rem;line-height:1.3;gap:8px;color:var(--brand-dark);text-align:left}
.tc-hero .tc-contact .tc-field input:not([type=range]){padding:16px 20px;border-radius:12px;border:1px solid var(--gray-200);background:var(--gray-50);font:inherit;font-size:1rem;line-height:1.4;transition:all .3s}
.tc-hero .tc-contact .tc-field input:not([type=range]):focus{border-color:var(--brand);background:#fff;outline:none;box-shadow:0 0 0 3px rgba(30,115,190,.15)}
.tc-hero .tc-contact{gap:14px}
.tc-hero .tc-done h3{font-size:1.9rem!important}
.tc-hero .tc-done .tc-done-icon{align-self:center;margin:0 auto 8px}

/* Review round 6 QA: balanced heading wraps and footer clearance for the review toolbar */
h1,h2{text-wrap:balance}
footer{padding-bottom:64px!important}

/* Client image batch: preserve existing photo-grid template and category grouping. */
.client-gallery-heading{font-family:Manrope,sans-serif;color:var(--brand-dark);font-size:1.5rem;margin:44px 0 20px}
#galeria .client-gallery-heading:first-of-type{margin-top:0}
#galeria .client-system-image img{object-fit:contain;background:var(--gray-50)}

.materials-section .accordion-panel:nth-child(4) img{object-position:68% center}


.footer-area{display:flex;gap:10px;align-items:center;color:rgba(255,255,255,.7)}.footer-area i{width:18px;height:18px;color:var(--brand)}
/* v2 (2026-10-15): client round 2. Colour highlights instead of dashed lines, hero subline, hidden testimonials, mobile tidy. */
.hero-text h1 .hero-h1-sub{display:block;margin-top:.35em;font-size:.5em;line-height:1.3;font-weight:600;letter-spacing:0;color:var(--brand);text-shadow:none}
#velemenyek[hidden]{display:none!important}
.hz-ring-2{border:0;background:rgba(31,111,184,.06)}
.hz-cta-box::before{border:0;background:rgba(255,255,255,.12)}
.tc-split .tc-summary-row{border-bottom:0;background:rgba(255,255,255,.06);border-radius:8px;padding:10px 12px;margin-bottom:8px}
@media (max-width:767px){
.top-bar{padding:4px 0}
.top-bar-inner>.d-flex:first-child{display:none!important}
.top-bar-inner>.d-flex:last-child{flex-direction:row!important;justify-content:center;gap:4px 18px;flex-wrap:wrap}
.top-bar-inner>.d-flex:last-child a{display:inline-flex;align-items:center;gap:6px;min-height:40px}
}

/* v2 mobile QA pass 1 (2026-10-15) */
.page-hero::before{content:none}
.page-hero-bg{display:block;position:absolute;inset:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:.28}
.nw{white-space:nowrap}
.tc .tc-btn-primary:disabled,#kalkulator .tc-btn-primary:disabled{opacity:1;background:var(--gray-200,#e5e7eb)!important;border-color:var(--gray-200,#e5e7eb)!important;color:var(--gray-600,#4b5563)!important;box-shadow:none!important;cursor:not-allowed}
.tc-actions:has(.tc-btn-primary:disabled)::after{content:"Válasszon egy lehetőséget a továbblépéshez.";display:block;width:100%;margin-top:8px;font-size:.9rem;color:var(--gray-600,#4b5563)}
.materials-section .accordion-panel::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,#0000 30%,#082338b3 100%)}
.materials-section .vertical-title{text-shadow:0 2px 4px #000000d9,0 0 18px #000000b3}
.photo-grid figcaption{padding:40px 12px 10px;background:linear-gradient(transparent,#082338 92%);text-shadow:0 1px 3px #000c}
@media (max-width:767px){
  .widget-phone,.widget-chat{display:none!important}
  body{padding-bottom:calc(100px + env(safe-area-inset-bottom))}
  footer{padding-bottom:24px!important}
  .footer-bottom{padding-right:0;justify-content:flex-start;text-align:left;gap:8px}
  .footer-bottom p{margin:0;text-wrap:balance}
  .footer-links{gap:2px}
  .footer-links a,.footer-bottom a{min-height:40px;display:flex;align-items:center}
  .mobile-menu-btn{min-width:44px;min-height:44px;display:flex!important;align-items:center;justify-content:center;padding:0}
  .img-expand{width:44px;height:44px;top:8px;right:8px}
  .img-expand i{padding:10px;display:flex}
  .info-card h3 a,.contact-info-block strong a{display:inline-flex;align-items:center;min-height:40px}
  .sd2-prev-btn{left:12px}.sd2-next-btn{right:12px}
  .stats-section .section-header{margin-bottom:20px!important}
  .stats-grid .stat-item:first-child{padding-top:4px}
  .stats-grid{gap:16px}
  .page-hero .chips{gap:8px}
  .page-hero .chips span{max-width:100%;white-space:normal;line-height:1.3}
  .hero-features{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
  .hero-feature-item{margin:0;white-space:normal;max-width:100%}
  .table-wrap{overflow:visible;border:0;box-shadow:none;background:transparent}
  .data-table{min-width:0}
  .data-table thead{display:none}
  .data-table,.data-table tbody,.data-table tr,.data-table td{display:block;width:100%}
  .data-table tr{background:#fff;border:1px solid var(--gray-200);border-radius:8px;box-shadow:var(--elevation-3);margin-bottom:12px;overflow:hidden}
  .data-table td,.data-table tr:nth-child(even) td{background:transparent;border-top:1px solid var(--gray-200);padding:10px 16px}
  .data-table td:first-child{border-top:0;background:var(--brand-darkest)!important;color:#fff;font-size:1.05rem}
  .data-table td:not(:first-child)[data-label]::before{content:attr(data-label);display:block;font-size:.8rem;font-weight:700;letter-spacing:.02em;text-transform:uppercase;color:var(--brand);margin-bottom:2px}
  /* galeria-v5: static swipe gallery instead of the pinned storyboard */
  .gallery-motion-v5{height:auto!important;min-height:0!important;margin-bottom:0}
  .gallery-motion-v5 .v5-sticky{position:relative!important;top:auto!important;height:auto!important;display:flex!important;flex-direction:column!important;overflow:visible}
  .gallery-motion-v5 .v5-gate-panel{display:none!important}
  .gallery-motion-v5 .v5-header{order:-1;position:relative!important;top:auto!important;left:auto!important;transform:none!important;opacity:1!important;padding:40px 16px 16px}
  .gallery-motion-v5 .v5-header .section-title{color:var(--brand-dark)!important;text-shadow:none!important;filter:none}
  .gallery-motion-v5 .v5-inner{position:relative!important;height:auto!important;opacity:1!important;transform:none!important;padding:0 16px 8px!important;display:flex!important;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
  .gallery-motion-v5 .v5-inner .img-wrapper{flex:0 0 82%;height:auto;aspect-ratio:4/3;scroll-snap-align:start}
  .gallery-motion-v5 .v5-inner{scroll-padding-left:16px;justify-content:flex-start!important;align-items:stretch}
  .gallery-motion-v5 .v5-header.section-header{margin-bottom:0!important;padding-bottom:20px}
  .gallery-motion-v5 .v5-inner .img-expand{opacity:1}
}
.tc-actions:has(.tc-btn-primary:disabled){flex-wrap:wrap}

/* v2 mobile QA pass 2 (2026-10-15) */
i[data-local-icon="layers"]>svg{overflow:visible}
@media (max-width:767px){
  /* 1 utility bar links */
  .top-bar a{display:inline-flex;align-items:center;min-height:44px}
  .top-bar-inner>.d-flex:last-child a{min-height:44px}
  /* 2 collapse utility bar and slim nav when scrolled */
  .top-bar{overflow:hidden}
  body.hdr-scrolled .top-bar{display:none}
  body.hdr-scrolled .nav{padding:9px 0}
  body.hdr-scrolled .nav-logo-img{height:46px;width:auto}
  /* 3 bottom CTA */
  .mobile-bottom-cta{gap:4px 8px;padding:6px 16px calc(6px + env(safe-area-inset-bottom))}
  .mobile-bottom-cta .btn{padding:8px!important;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mobile-progress-label{font-size:.8125rem}
  body{padding-bottom:calc(80px + env(safe-area-inset-bottom))}
  /* 4 footer */
  footer .brand-wordmark small{font-size:12px}
  .footer-area{align-items:center}
  .footer-area i{display:inline-flex;align-items:center;justify-content:center;align-self:center}
  .footer-area i>svg,.footer-area i::before{display:block}
  .footer-area>span{line-height:1.3;display:block}
  /* 5 form controls */
  input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=hidden]):not([type=file]),select,textarea{min-height:44px;font-family:inherit}
  textarea{resize:vertical}
  /* 6 */
  button.tc-btn-primary{min-height:44px}
  .sd2-expand-btn{width:44px;height:44px}
  /* 7 hero overflow */
  .hz-hero-grid>*{min-width:0}
  .hz-hero-visual{overflow-x:clip}
  .hz-fi-1{left:0}.hz-fi-2{right:0}
  /* 10 */
  .hz-form-step.hz-active:has(#hz-c-nextBtn:disabled)::after{content:"Válasszon egy lehetőséget a továbblépéshez.";display:block;margin-top:8px;font-size:.9rem;text-align:center;color:var(--gray-600,#4b5563)}
  /* 9 swipeable service galleries */
  .sd2-gallery-track-wrapper{overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none;overscroll-behavior-x:contain}
  .sd2-gallery-track-wrapper::-webkit-scrollbar{display:none}
  .sd2-gallery-track{transform:none!important;transition:none}
  .sd2-gallery-item{scroll-snap-align:start}
}

/* v3: Matt's review comments (2026-10-16) */
/* exit popup: smaller heading (c00337bf) */
#exit-popup .exit-popup-content h2{font-size:1.75rem!important;line-height:1.25!important;margin-bottom:14px}
@media(max-width:576px){#exit-popup .exit-popup-content{padding:36px 22px}#exit-popup .exit-popup-content h2{font-size:1.5rem!important}}
/* mobile bottom bar: no "Következik" label (7c768883) */
.mobile-progress-label{display:none!important}
@media(min-width:993px){
  /* services: uniform main-image size across sections (d9d1057d) */
  .sd2-service-grid{align-items:start}
  .sd2-service-gallery,.sd2-gallery-track-wrapper,.sd2-gallery-track{height:auto}
  .sd2-gallery-track{grid-template-rows:520px 140px}
}
@media(min-width:1201px){
  /* Rólunk photo larger on desktop (a71c6dd2) */
  .hz-foundation-grid{grid-template-columns:1.15fr 1fr;gap:64px}
  .hz-foundation-images{height:600px}
  .hz-img-main-card{width:92%;height:540px}
}
@media(min-width:993px){
  /* hero text block about 11% larger and bolder on desktop (b42475fc) */
  #kezdes .hero-text h1{font-size:62px;font-weight:800;line-height:1.12}
  #kezdes .hero-text .hero-h1-sub{font-size:31px;font-weight:700}
  #kezdes .hero-text p.hero-subtitle{font-size:1.28rem;max-width:670px}
}
@media(max-width:767px){
  /* hero title and subtitle fill the screen width (b42475fc) */
  #kezdes .hero-text h1{font-size:calc((100vw - 48px) / 5);font-weight:800;line-height:1.02;letter-spacing:-.03em}
  #kezdes .hero-text .hero-h1-sub{display:block;font-size:calc((100vw - 48px) / 10.8);font-weight:700;line-height:1.18;margin-top:12px;letter-spacing:-.01em}
  /* featured section: hide decorative round photo, close the gaps (7c768883) */
  .hz-hero .hz-hero-visual{display:none!important}
  .hz-hero{padding-top:56px!important;padding-bottom:56px!important}
  .hz-hero-grid{gap:0!important}
  .hz-hero-actions{margin-bottom:0!important}
}

/* v3: mobile fixes from Sonnet screenshot review (2026-10-16) */
.pg-more{display:none}
@media (max-width:767px){
  /* rhythm: 48px sections, 24px under section headers */
  :root{--section-padding-y:40px!important;--header-margin-bottom:24px}
  .hz-scope{--hz-section-padding-y:40px}
  .block .section-header,.hz-section-header{margin-bottom:24px!important}
  .section-header p,.block .section-header p{margin:12px 0 0}
  .section-cta-wrapper{margin-top:24px}
  .stats-section{padding:40px 0!important}
  /* headings: section headers left on phones, like the content under them */
  .section-header.text-center,.hz-section-header.hz-text-center,#kalkulator>.container,.gallery-motion-v5 .v5-header{text-align:left!important}
  .text-center>:is(.section-subtitle,.hz-pill-badge),#kalkulator>.container>.section-subtitle,.v5-header :is(.section-subtitle,.hz-pill-badge){margin-left:0!important;margin-right:auto!important}
  .section-header p[style]{margin-left:0!important;margin-right:0!important}
  .hz-section-header.hz-text-center p{margin-left:0;margin-right:0}
  /* buttons: one full-width stack */
  .page-hero .actions,.hz-hero-actions,.center-cta{flex-direction:column;align-items:stretch;gap:12px}
  .page-hero .actions .btn,.hz-hero-actions .hz-btn,.center-cta .btn,.section-cta-wrapper .btn,.split-body>.btn,.block .container>.btn{width:100%;display:flex;justify-content:center;text-align:center}
  .section-cta-wrapper{justify-content:stretch}

  /* home hero: text only (wizard hidden, bottom bar gives Hívás / Ajánlatkérés) */
  #kezdes{min-height:0;padding:32px 0 40px}
  #kezdes::before{background-image:linear-gradient(180deg,rgba(255,255,255,.95),rgba(237,245,252,.96)),var(--hero-image,none)}
  #kezdes #hero-form{display:none!important}
  #kezdes .hero-grid{text-align:left;gap:0}
  #kezdes .hero-subtitle{margin:0 0 24px;color:#24445e}
  #kezdes .hero-features{flex-direction:column;align-items:stretch;justify-content:flex-start;gap:8px}
  #kezdes .hero-feature-item{justify-content:flex-start;padding:10px 16px;border-radius:8px;font-size:1rem}
  /* page heroes on inner pages */
  .page-hero{padding:36px 0 40px}
  .page-hero .lead{margin-bottom:24px}
  .page-hero .chips{flex-direction:column;align-items:stretch;gap:8px;margin-top:20px}
  .page-hero .chips span{width:100%;padding:9px 14px}

  /* stats: four identical tiles in a 2x2 grid */
  .stats-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}
  .stats-grid .stat-item,.stats-grid .stat-item:first-child,.stats-grid .stat-item.stat-item--highlight{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:8px;box-shadow:none;padding:18px 12px!important;text-align:center}
  .stats-grid .stat-item.stat-item--highlight :is(h3,p){color:#fff!important}
  .stats-grid .stat-item.stat-item--highlight p{color:rgba(255,255,255,.9)!important}
  .stats-grid .stat-item.stat-item--highlight i{color:var(--brand)!important}
  .stats-grid .stat-item i{font-size:2rem;margin-bottom:8px}
  .stats-grid .stat-item i svg{width:32px;height:32px}
  .stats-grid .stat-item h3{font-size:1.9rem;margin-bottom:6px}
  .stats-grid .stat-item p{font-size:.92rem;line-height:1.4}

  /* featured block (hz-hero): no badges, left aligned */
  .hz-hero .hz-floating-icon,.hz-hero .hz-hero-wave{display:none!important}
  .hz-hero.hz-scope{padding-top:40px!important;padding-bottom:8px!important}
  .hz-hero-grid{text-align:left}
  .hz-hero-text p.hz-subtitle{max-width:none;margin-bottom:24px}
  .hz-hero .hz-pill-badge{margin-left:0!important}
  /* swipe gallery: closer to the block above */
  .gallery-motion-v5 .v5-header{padding:32px 16px 16px}

  /* Rólunk */
  .hz-foundation-images{margin-bottom:24px!important}

  /* services: one swipe row per block, compact feature rows */
  #szolgaltatasok{padding-top:40px!important}
  #szolgaltatasok>.section-header{padding-bottom:8px!important}
  #szolgaltatasok>section.service-detail.fade-in{padding:40px 0!important}
  .sd2-service-grid{gap:20px}
  .sd2-content-side{gap:20px}
  .sd2-slider-btn,.sd2-expand-btn{display:none!important}
  .sd2-gallery-track-wrapper{padding:0;margin-right:-16px;width:auto}
  .sd2-gallery-track{gap:10px;padding-right:16px}
  .sd2-gallery-item,.sd2-item-main{flex:0 0 84%!important;height:auto!important;aspect-ratio:4/3}
  .sd2-feature-cards{gap:12px}
  .sd2-feature-card{flex-direction:row;align-items:flex-start;text-align:left;padding:16px;gap:14px}
  .sd2-feature-card i{font-size:1.5rem;padding:10px!important;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
  .sd2-feature-card i svg{width:24px;height:24px}
  .sd2-feature-card h4{font-size:1.1rem;margin-bottom:4px}
  .sd2-feature-card p{font-size:.98rem;line-height:1.5}
  .service-detail .btn-outline{align-self:stretch!important;justify-content:center;text-align:center}

  /* process steps: compact numbered rows */
  .process-grid-v1{gap:12px!important}
  .process-step-v1{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:4px;align-items:start;text-align:left;padding:16px!important;min-height:0!important;background:rgba(255,255,255,.06)!important;border-color:rgba(255,255,255,.12)!important}
  .process-step-v1 .process-number-v1{position:static;transform:none!important;width:44px;height:44px;font-size:1.2rem;box-shadow:none;grid-row:1/span 2;margin:0}
  .process-step-v1>i{display:none!important}
  .process-step-v1 h3{grid-column:2;margin:0 0 2px!important;font-size:1.15rem;align-self:end}
  .process-step-v1 p{grid-column:2;margin:0;font-size:.98rem;line-height:1.5}
  .process-step-v1:hover{transform:none}
  .process-v1 .section-cta-wrapper,.process-v1 .center-cta{margin-top:24px}

  /* consultation wizard duplicates #kalkulator: hidden on phones */
  #hz-konzultacio{display:none!important}
  /* materials: label bottom-left on a dark gradient */
  .materials-section .accordion-container{gap:12px}
  .materials-section .accordion-panel,.materials-section .accordion-panel:is(:hover,:focus-within){height:auto!important;aspect-ratio:16/9;flex:none}
  .materials-section .accordion-panel .vertical-title{left:16px;top:auto;bottom:14px;transform:none!important;font-size:1.15rem;letter-spacing:1px}
  .materials-section .accordion-panel::after{background:linear-gradient(180deg,#0000 45%,#082338d9 100%)}
  .materials-section .accordion-content{padding:14px 16px;background:#082338e6}
  .materials-section .accordion-content h4{font-size:1.15rem;margin-bottom:4px}
  .materials-section .accordion-content p{font-size:.95rem;margin:0}

  /* calculator: questions first, summary after */
  #kalkulator .tc-right{order:-1}
  /* work areas: equal 16:9 photos */
  .team-grid{gap:16px}
  .team-card{padding-bottom:16px}
  .team-card img{height:auto;aspect-ratio:16/9;margin-bottom:14px}
  .team-card h4{font-size:1.2rem}
  .team-card p{margin-bottom:0}

  /* contact block: one heading, compact tiles, 16px inputs */
  .contact-redesigned .contact-left>h3{display:none}
  .contact-left{padding:20px 16px!important}
  .contact-left>p{margin-bottom:16px}
  .contact-info-block{margin-bottom:10px;padding:12px 14px}
  .contact-grid{gap:16px}
  .contact-right{padding:20px 16px!important}
  .contact-right .service-btn-grid{grid-template-columns:1fr 1fr!important;gap:8px;margin-bottom:20px}
  .contact-right .service-btn{min-height:48px;padding:8px 10px}
  .contact-right input,.contact-right textarea,.contact-right select{font-size:16px!important}
  .contact-right ::placeholder{color:#6b7280;opacity:1}
  .contact-right .btn-submit{width:100%}

  /* info cards: icon left of the title, text below */
  .card-grid{gap:12px}
  .info-card{display:grid;grid-template-columns:44px 1fr;column-gap:14px;row-gap:6px;align-items:center;padding:16px 18px}
  .info-card>*{grid-column:1/-1;min-width:0}
  .info-card>i{grid-column:1;grid-row:1;width:44px;height:44px;padding:10px;display:flex;align-items:center;justify-content:center}
  .info-card>i svg{width:24px;height:24px}
  .info-card>h3{grid-column:2;grid-row:1;margin:0;font-size:1.1rem}
  .info-card:has(>.meta)>i{grid-row:1/span 2}
  .info-card>.meta{grid-column:2;grid-row:2;font-size:.95rem;line-height:1.3}
  .info-card>.meta.figure{grid-row:1;font-size:2rem;line-height:1}
  .info-card:has(>.meta.figure)>h3{grid-row:2}
  .info-card>p{font-size:1rem;line-height:1.5}
  .info-card>p:first-of-type{margin-top:2px}
  .info-card .check-list{margin:6px 0 0}

  /* split media and photos */
  .split{gap:24px}
  .split-media img,.split-media.tall img{aspect-ratio:16/10;max-height:none}
  .post-card img{aspect-ratio:16/9}
  .post-card .body{padding:18px}
  .post-card .more{min-height:44px}
  .prose h3{margin-top:28px}
  .block h3.section-title[style]{margin-top:40px!important}
  /* long galleries: first 6 tiles and a "Több kép" button */
  .photo-grid{gap:10px}
  .photo-grid.pg-collapsed>figure:nth-child(n+7){display:none}
  .photo-grid:not(.pg-collapsed)>figure:last-child:nth-child(odd){grid-column:1/-1}
  .pg-more{display:flex;width:100%;justify-content:center;margin:12px 0 0}
  #galeria .photo-grid figcaption{display:none}
  .client-gallery-heading{margin:32px 0 14px;font-size:1.3rem;scroll-margin-top:96px}
  #galeria .client-gallery-heading:first-of-type{margin-top:0}

  /* FAQ and footer */
  #gyik .faq-grid{gap:10px}
  .footer{padding-top:48px}
  .footer-grid{gap:32px;margin-bottom:32px}
  .footer-col h4{margin-bottom:16px}
  .footer-bottom,.footer-bottom p,.footer-bottom a{font-size:.9rem;color:rgba(255,255,255,.75)}
}
@media (max-width:767px){
  /* no trailing margins at the end of a section */
  :is(.container,.split-body,.prose,.contact-wrapper,.hz-container,.section-header)>:last-child{margin-bottom:0}
  /* neighbouring sections with the same background: one gap, not two */
  .gallery-motion-v5+.hz-foundation-section,.before-after-section+.hz-cta-section,.hz-cta-section+.materials-section,.team-section+.contact-redesigned,.contact-redesigned+.faq-section,.contact-redesigned+.block.alt,.process-v1+.stats-section{padding-top:8px!important}
  /* Rólunk photo: 4:3 instead of a tall portrait */
  .hz-foundation-grid{gap:24px!important}
  .hz-foundation-images{height:auto!important}
  .hz-img-main-card{height:auto!important;aspect-ratio:4/3}
  /* call-to-action card */
  .hz-cta-content{padding:28px 20px}
  .hz-cta-content p{margin-bottom:20px}
  .hz-cta-image{min-height:0;aspect-ratio:4/3}
}

/* Preserve both vehicles in the client photograph. */
.split-media.split-media-natural img{aspect-ratio:auto;height:auto;max-height:none}
/* All gallery tiles are already visible on desktop. */
@media(min-width:768px){.pg-more{display:none!important}}
/* Keep closed floating controls within the desktop gutter. */
@media(min-width:1200px){.widget-phone,.widget-chat{right:20px}}

/* Chat opens explicitly so close/Escape stays closed beneath the pointer. */
.chat-header{position:relative;padding-right:68px}
.chat-close{position:absolute;top:12px;right:12px;width:44px;height:44px;border:1px solid rgba(255,255,255,.5);border-radius:6px;background:transparent;color:white;font:28px/1 sans-serif;cursor:pointer}
.chat-close:focus-visible{outline:3px solid white;outline-offset:2px}
/* Decorative animation gates must not intercept the gallery controls below. */
.v5-gate-panel,.v5-header{pointer-events:none}