* { margin: 0; padding: 0; box-sizing: border-box; }
        :root {
            --primary: #252525;
            --accent: #d4af37;
            --light: #f5f5f5;
            --white: #ffffff;
            --text: #333;
            --text-light: #666;
            --border: #e0e0e0;
        }
        html { scroll-behavior: smooth; }
        body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; line-height: 1.6; color: var(--text); background: var(--white); -webkit-font-smoothing: antialiased; }
        h1,h2,h3,h4,h5 { font-family: 'Space Grotesk', sans-serif; font-weight: 600; line-height: 1.2; color: var(--primary); }
        h1 { font-size: clamp(2.5rem,6vw,4.5rem); }
        h2 { font-size: clamp(2rem,4vw,3rem); }
        h3 { font-size: clamp(1.5rem,3vw,2rem); }
        h4 { font-size: clamp(1.25rem,2vw,1.5rem); }
        p { font-size: clamp(1rem,1.5vw,1.125rem); line-height: 1.7; color: var(--text-light); }
        a { text-decoration: none; color: inherit; transition: all 0.3s ease; }
        img { max-width: 100%; height: auto; display: block; }
        .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
        .skip-link { position: absolute; top: -100px; left: 0; background: var(--accent); color: var(--primary); padding: 1rem 2rem; z-index: 1000; font-weight: 600; }
        .skip-link:focus { top: 0; }

        /* ── Header ── */
        header { position: fixed; top: 0; left: 0; right: 0; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); z-index: 50; border-bottom: 1px solid var(--border); }
        .header-content { display: flex; justify-content: space-between; align-items: center; padding: 1.5rem 0; }
        .logo img { height: 140px; width: auto; }

        /* Desktop nav */
        .main-nav > ul { display: flex; flex-direction: row; list-style: none; gap: 2.5rem; align-items: baseline; }
        .main-nav ul ul { display: block; flex-direction: unset; gap: unset; align-items: unset; }
        .main-nav li { position: relative; display: inline-block; }
        .main-nav a { color: var(--primary); font-weight: 500; font-size: 0.95rem; display: inline-block; }
        .main-nav a:hover, .main-nav a:focus { color: #a07d1c; }
        .main-nav a:focus { outline: 2px solid var(--accent); outline-offset: 4px; }

        /* Dropdown */
        .dropdown { position: absolute; top: 100%; left: 0; background: var(--white); min-width: 220px; box-shadow: 0 4px 20px rgba(0,0,0,0.1); border-radius: 8px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; z-index: 1000; padding: 0.5rem 0; display: block; }
        .dropdown ul { display: block; }
        .main-nav li:hover > .dropdown, .main-nav li:focus-within > .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
        .dropdown li { position: relative; display: block; width: 100%; }
        .dropdown a { padding: 0.75rem 1.5rem; color: var(--text); white-space: nowrap; display: block; }
        .dropdown a:hover, .dropdown a:focus { background: var(--primary); color: var(--white); }
        .dropdown .dropdown { top: 0; left: 100%; margin-left: 0.5rem; }
        .has-dropdown > a::after { content: '\f107'; font-family: 'Font Awesome 6 Free'; font-weight: 900; margin-left: 0.5rem; font-size: 0.8rem; }
        .dropdown .has-dropdown > a::after { content: '\f105'; float: right; margin-left: 1rem; }

        .cta-btn { background: var(--accent); color: var(--primary); padding: 0.6rem 1.25rem; border-radius: 6px; font-weight: 600; border: 2px solid var(--accent); display: inline-block; line-height: 1; vertical-align: middle; }
        .cta-btn:hover, .cta-btn:focus { background: var(--primary); color: var(--white); border-color: var(--primary); }

        .mobile-toggle { display: none; background: none; border: none; font-size: 1.75rem; cursor: pointer; color: var(--primary); padding: 0.5rem; position: relative; z-index: 1001; }
        .mobile-close { display: none; position: fixed; top: 2rem; right: 2rem; background: none; border: none; font-size: 2.5rem; color: var(--white); cursor: pointer; z-index: 1002; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; padding: 0.5rem; line-height: 1; }
        .mobile-close.active { opacity: 1; visibility: visible; }
        .mobile-close:hover, .mobile-close:focus { color: var(--accent); }
        .mobile-overlay { display: none; }

        @media (max-width: 1024px) {
            .logo img { height: 100px; }
            .mobile-toggle { display: block; }
            .mobile-close { display: block; }
            .mobile-overlay { display: block; position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: rgba(37,37,37,0.97); z-index: 999; opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
            .mobile-overlay.active { opacity: 1; visibility: visible; }
            .main-nav { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100vw; height: 100vh; background: transparent; z-index: 1000; opacity: 0; visibility: hidden; transition: none; overflow-y: auto; -webkit-overflow-scrolling: touch; }
            .main-nav.active { opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; }
            .main-nav ul { flex-direction: column; padding: 140px 2rem 3rem; gap: 0; align-items: center; max-width: 600px; margin: 0 auto; }
            .main-nav li { display: block; width: 100%; text-align: center; position: static; }
            .main-nav a { display: block; padding: 1.25rem 2rem; font-size: 1.5rem; color: var(--white); font-weight: 500; border: none; transition: all 0.3s ease; }
            .main-nav a:hover, .main-nav a:focus { color: var(--accent); background: transparent; }
            .main-nav .dropdown { position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-radius: 0; background: transparent; padding: 0; display: none; width: 100%; min-width: 0; }
            .main-nav .has-dropdown.active .dropdown { display: block; }
            .main-nav .dropdown li { position: static; }
            .main-nav .dropdown a { padding: 0.875rem 2rem; background: transparent; font-size: 1.125rem; color: rgba(255,255,255,0.8); }
            .main-nav .dropdown a:hover, .main-nav .dropdown a:focus { color: var(--white); background: #111111; }
            .main-nav .dropdown .dropdown a { font-size: 1rem; color: rgba(255,255,255,0.7); padding: 0.75rem 2rem; }
            .main-nav .has-dropdown > a::after { margin-left: 0.5rem; }
            .main-nav .dropdown .has-dropdown > a::after { content: '\f107'; float: none; margin-left: 0.5rem; }
            .main-nav .cta-btn { margin-top: 2rem; display: inline-block; background: var(--accent); color: var(--primary); border: 2px solid var(--accent); border-radius: 8px; text-align: center; padding: 1rem 3rem; font-size: 1.25rem; }
            .main-nav .cta-btn:hover, .main-nav .cta-btn:focus { background: transparent; color: var(--accent); }
        }

        /* ── Hero ── */
        .hero { position: relative; height: 700px; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--primary); margin-top: 153px; }
        .hero-bg { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; height: 100%; object-fit: cover; }
        .hero-overlay { position: absolute; inset: 0; background: rgba(37,37,37,0.5); }
        .hero-content { position: relative; z-index: 2; text-align: center; color: var(--white); width: 90%; max-width: 900px; padding: 2.5rem 3rem; }
        .hero h1 { color: var(--white); margin-bottom: 1rem; font-weight: 700; font-size: clamp(2.5rem,5vw,3.5rem); text-shadow: 2px 2px 8px rgba(0,0,0,0.8), 0 0 20px rgba(0,0,0,0.6); }
        .hero p { font-size: clamp(1rem,1.8vw,1.25rem); color: var(--white); margin-bottom: 2rem; max-width: 800px; margin-left: auto; margin-right: auto; text-shadow: 1px 1px 6px rgba(0,0,0,0.8), 0 0 15px rgba(0,0,0,0.5); }
        .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; }
        .hero-bottom-edge { position: absolute; bottom: -1px; left: 0; width: 100%; overflow: hidden; line-height: 0; z-index: 3; }
        .hero-bottom-edge svg { display: block; width: 100%; height: 80px; }

        .btn { display: inline-block; padding: 1rem 2.5rem; border-radius: 8px; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; cursor: pointer; }
        .btn-primary { background: var(--accent); color: var(--primary); border: 2px solid var(--accent); }
        .btn-primary:hover, .btn-primary:focus { background: var(--primary); color: var(--white); border-color: var(--white); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(212,175,55,0.3); }
        .btn-secondary { background: transparent; color: var(--white); border: 2px solid var(--white); }
        .btn-secondary:hover, .btn-secondary:focus { background: var(--white); color: var(--primary); }

        @media (max-width: 1024px) {
            .hero { margin-top: 133px; height: 600px; }
            .hero-content { padding: 2rem; }
            .hero h1 { font-size: 2rem; }
            .hero p { font-size: 1rem; margin-bottom: 2rem; }
            .hero-bottom-edge svg { height: 55px; }
        }
        @media (max-width: 640px) {
            .hero { height: auto; min-height: 500px; padding: 3rem 0; }
            .hero-content { padding: 2rem 1.5rem; }
            .hero-buttons { flex-direction: column; width: 100%; max-width: 300px; margin: 0 auto; }
            .hero-buttons .btn { width: 100%; }
            .hero-bottom-edge svg { height: 40px; }
        }

        /* ── Stats ── */
        .stats { background: var(--primary); color: var(--white); padding: 4rem 0; }
        .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px,1fr)); gap: 3rem; text-align: center; }
        .stat-item h3 { color: var(--accent); font-size: clamp(2.5rem,5vw,3.5rem); margin-bottom: 0.5rem; }
        .stat-item p { color: rgba(255,255,255,0.8); font-size: 1rem; }

        /* ── About ── */
        .about { padding: 8rem 0; }
        .about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6rem; align-items: center; }
        .about-content h2 { margin-bottom: 1.5rem; }
        .about-content p { margin-bottom: 2rem; }

        /* Image Slider — aspect ratio: 1:1 (square) — recommended 800x800px */
        .about-slider { position: relative; width: 100%; aspect-ratio: 1/1; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.15); background: #111; }
        .slider-track { display: flex; height: 100%; transition: transform 0.5s ease; will-change: transform; }
        .slider-slide { min-width: 100%; height: 100%; flex-shrink: 0; }
        .slider-slide img { width: 100%; height: 100%; object-fit: cover; display: block; }
        .slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(37,37,37,0.65); color: #fff; border: 2px solid rgba(212,175,55,0.7); border-radius: 50%; width: 44px; height: 44px; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; transition: background 0.25s, border-color 0.25s; }
        .slider-btn:hover, .slider-btn:focus-visible { background: var(--accent); color: var(--primary); border-color: var(--accent); }
        .slider-btn:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
        .slider-btn-prev { left: 0.75rem; }
        .slider-btn-next { right: 0.75rem; }
        .slider-dots { position: absolute; bottom: 0.875rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 10; }
        .slider-dot { width: 10px; height: 10px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.8); background: transparent; cursor: pointer; padding: 0; transition: background 0.25s, border-color 0.25s; }
        .slider-dot:hover, .slider-dot:focus-visible { background: rgba(255,255,255,0.6); }
        .slider-dot:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
        .slider-dot.active { background: var(--accent); border-color: var(--accent); }

        @media (max-width: 768px) {
            .about { padding: 4rem 0; }
            .about-grid { grid-template-columns: 1fr; gap: 2rem; }
            .about-image { order: -1; }
            .about-content { order: 1; }
        }

        /* ── Video Section ── */
        .video-section { background: var(--primary); padding: 5rem 0; }
        .video-section .section-header { margin-bottom: 2.5rem; }
        .video-section .section-header h2 { color: var(--accent); }
        .video-section .section-header p { color: rgba(255,255,255,0.75); }
        .video-wrapper { width: 90%; max-width: 960px; margin: 0 auto; }
        .about-video { position: relative; width: 100%; padding-bottom: 56.25%; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,0.4); }
        .about-video video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }

        /* ── Featured Products & Services ── */
        .featured-services { padding: 8rem 0; background: var(--white); }
        .featured-services .section-header { margin-bottom: 3rem; }
        .featured-services-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; margin-bottom: 3rem; }

        /* FEATURED SERVICE CARDS — aspect ratio: 3:4 (portrait)
           Recommended image size: 900x1200px
           To change ratio, update the aspect-ratio value below. */
        .featured-service-card { position: relative; border-radius: 14px; overflow: hidden; aspect-ratio: 3/4; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: 0 8px 32px rgba(0,0,0,0.15); transition: transform 0.3s ease, box-shadow 0.3s ease; text-decoration: none; color: var(--white); }
        .featured-service-card:hover, .featured-service-card:focus-visible { transform: translateY(-8px); box-shadow: 0 16px 48px rgba(0,0,0,0.25); }
        .featured-service-card:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
        .featured-service-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
        .featured-service-card:hover img { transform: scale(1.05); }
        .featured-service-card::before { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(37,37,37,0.15) 0%, rgba(37,37,37,0.55) 45%, rgba(37,37,37,0.92) 100%); z-index: 1; transition: background 0.3s ease; }
        .featured-service-card:hover::before { background: linear-gradient(to bottom, rgba(37,37,37,0.2) 0%, rgba(37,37,37,0.6) 45%, rgba(37,37,37,0.95) 100%); }
        .featured-service-content { position: relative; z-index: 2; padding: 2rem; }
        .featured-service-content h3 { color: var(--white); font-size: 1.5rem; margin-bottom: 0.75rem; }
        .featured-service-content p { color: rgba(255,255,255,0.85); font-size: 0.975rem; line-height: 1.65; margin-bottom: 1.25rem; }
        .featured-service-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.9rem; letter-spacing: 0.03em; transition: gap 0.25s ease; }
        .featured-service-card:hover .featured-service-link, .featured-service-card:focus-visible .featured-service-link { gap: 0.85rem; }
        .featured-services-cta { text-align: center; }

        @media (max-width: 1024px) {
            .featured-services-grid { grid-template-columns: repeat(2,1fr); }
            .featured-service-card:last-child { grid-column: 1 / -1; max-width: 520px; margin: 0 auto; width: 100%; }
        }
        @media (max-width: 640px) {
            .featured-services-grid { grid-template-columns: 1fr; }
            .featured-service-card:last-child { grid-column: auto; max-width: none; }
        }

        /* ── Gallery ── */
        .gallery-categories { padding: 8rem 0; background: var(--light); }
        .section-header { text-align: center; max-width: 700px; margin: 0 auto 4rem; }
        .section-header h2 { margin-bottom: 1rem; }
        .categories-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 2rem; }
        @media (max-width: 1024px) { .categories-grid { grid-template-columns: repeat(2,1fr); } }
        /* Gallery category cards — aspect ratio: 4:3 — recommended 1600x1200px */
        .category-card { position: relative; border-radius: 12px; overflow: hidden; cursor: pointer; transition: transform 0.3s ease; background: var(--white); box-shadow: 0 4px 20px rgba(0,0,0,0.1); }
        .category-card:hover, .category-card:focus-within { transform: translateY(-8px); box-shadow: 0 8px 30px rgba(0,0,0,0.15); }
        .category-image { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
        .category-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
        .category-card:hover img { transform: scale(1.05); }
        .category-title { background: var(--primary); padding: 1.5rem 2rem; text-align: center; }
        .category-card h3 { color: var(--white); font-size: 1.5rem; margin: 0; }
        @media (max-width: 768px) { .categories-grid { grid-template-columns: 1fr; } }

        /* ── Testimonials & B2B ── */
        .testimonials-b2b { padding: 8rem 0; }
        .testimonials-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
        .testimonial-card { background: var(--light); padding: 3rem; border-radius: 12px; border-left: 4px solid var(--accent); }
        .testimonial-card h3 { margin-bottom: 1.5rem; color: var(--accent); }
        .testimonial-text { font-style: italic; margin-bottom: 1.5rem; line-height: 1.8; color: var(--text); }
        .testimonial-author { font-weight: 600; color: var(--primary); }
        .b2b-card { background: var(--primary); color: var(--white); padding: 3rem; border-radius: 12px; }
        .b2b-card h3 { margin-bottom: 1.5rem; color: var(--accent); }
        .b2b-card p { color: rgba(255,255,255,0.9); margin-bottom: 1rem; }
        .b2b-card a { color: var(--accent); font-weight: 600; }
        .b2b-card a:hover, .b2b-card a:focus { text-decoration: underline; }
        @media (max-width: 768px) { .testimonials-b2b { padding: 4rem 0; } .testimonials-grid { grid-template-columns: 1fr; gap: 2rem; } }

        /* ── Services ── */
        .services { padding: 8rem 0; background: var(--primary); color: var(--white); }
        .services .section-header h2, .services .section-header p { color: var(--white); }
        .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 3rem; }
        .service-card { text-align: center; padding: 2rem; }
        .service-icon { width: 80px; height: 80px; margin: 0 auto 1.5rem; background: var(--accent); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: var(--primary); }
        .service-card h3 { color: var(--white); margin-bottom: 1rem; }
        .service-card p { color: rgba(255,255,255,0.8); margin-bottom: 1.25rem; }
        .service-card .service-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-weight: 600; font-size: 0.95rem; transition: gap 0.25s ease; }
        .service-card .service-link:hover, .service-card .service-link:focus { gap: 0.85rem; }

        /* ── CTA ── */
        .cta-section { padding: 8rem 0; background: linear-gradient(135deg, var(--accent) 0%, #b8941f 100%); text-align: center; }
        .cta-section h2 { color: var(--primary); margin-bottom: 1.5rem; }
        .cta-section p { color: var(--primary); font-size: 1.25rem; margin-bottom: 2.5rem; max-width: 600px; margin-left: auto; margin-right: auto; }
        .cta-section .btn { background: var(--primary); color: var(--white); border: 2px solid var(--primary); font-size: 1.125rem; padding: 1.25rem 3rem; }
        .cta-section .btn:hover, .cta-section .btn:focus { color: var(--accent); }

        /* ── Footer ── */
        footer { background: var(--primary); color: var(--white); padding: 5rem 0 2rem; }
        .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 4rem; margin-bottom: 3rem; }
        footer h4 { color: var(--accent); margin-bottom: 1.5rem; font-size: 1.125rem; }
        footer p, footer address { color: rgba(255,255,255,0.8); font-style: normal; line-height: 1.8; }
        footer a { color: rgba(255,255,255,0.8); display: block; margin-bottom: 0.5rem; }
        footer a:hover, footer a:focus { color: var(--accent); }
        .social-links { display: flex; gap: 1rem; margin-top: 1rem; }
        .social-links a { width: 40px; height: 40px; background: rgba(255,255,255,0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; margin-bottom: 0; transition: all 0.3s ease; }
        .social-links a:hover, .social-links a:focus { background: var(--accent); color: var(--primary); transform: translateY(-3px); }
        .footer-bottom { padding-top: 2rem; border-top: 1px solid rgba(255,255,255,0.1); text-align: center; font-size: 0.9rem; color: rgba(255,255,255,0.6); }
        @media (max-width: 1024px) { .footer-grid { grid-template-columns: repeat(2,1fr); gap: 3rem; } }
        @media (max-width: 640px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } .services, .gallery-categories, .about { padding: 4rem 0; } }

        /* ── Accessibility ── */
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
        :focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
        a:focus-visible, button:focus-visible { outline: 3px solid var(--accent); outline-offset: 6px; border-radius: 2px; }
        button, .btn { min-height: 44px; min-width: 44px; }
        .main-nav a { min-height: unset; min-width: unset; line-height: normal; }

.preload * {
    transition: none !important;
}