:root {











            --brand-orange: #ff9900;











            --brand-gold: #ffcc00;











            --brand-dark: #050505;











            --brand-light: #fcfcfc;











            --text-gray: #4a4a4a;











        }























        body, html { margin: 0; padding: 0; font-family: 'Roboto Condensed', 'Roboto Fallback', sans-serif; color: var(--text-gray); line-height: 1.6; overflow-x: hidden; scroll-behavior: smooth; background: var(--brand-dark); }











        h1, h2, h3 { font-family: 'Oswald', 'Oswald Fallback', sans-serif; font-weight: 500; margin: 0; color: var(--brand-dark); line-height: 1.2; }











        a { text-decoration: none; transition: all 0.3s ease; }























        header { background-color: var(--brand-dark); position: sticky; top: 0; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.5); border-bottom: 2px solid var(--brand-orange); }











        .nav-container { max-width: 1200px; margin: 0 auto; display: flex; flex-wrap: wrap; justify-content: center; }











        .nav-container a { color: white; padding: 18px 30px; font-size: 1.1rem; font-weight: 700; letter-spacing: 1px; }











        .nav-container a:hover, .nav-container a.active { color: var(--brand-orange); }























        #tsparticles { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }























        .hero {











            background: transparent;











            min-height: 70vh; display: flex; align-items: center; padding: 50px 5%; position: relative; overflow: hidden;























        }











        .hero-glow {











            position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 80%; height: 2px;











            background: linear-gradient(90deg, transparent, var(--brand-orange), transparent);











            box-shadow: 0 0 30px 5px rgba(255, 153, 0, 0.4); z-index: 1;











        }











        .hero-inner { max-width: 1100px; margin: 0 auto; width: 100%; position: relative; z-index: 10; text-align: center; }











        .logo-badge {











            background-color: #ffffff;











            display: inline-block; max-width: 100%; box-sizing: border-box;











            padding: 18px 28px;











            border-radius: 12px;











            box-shadow: 0 8px 25px rgba(0,0,0,0.6);











            border: 4px solid #111;











            outline: 3px dashed var(--brand-orange);











            outline-offset: -8px;











            margin-bottom: 28px;











        }











        .logo-badge img { width: 240px; max-width: 100%; height: auto; aspect-ratio: 365 / 110; display: block;  }











        .hero h1 { color: white; font-size: clamp(2.2rem, 5.5vw, 4.2rem); text-shadow: 2px 2px 4px rgba(0,0,0,0.8); margin-bottom: 16px; }











        .hero-sub { color: var(--brand-orange); font-size: clamp(1.15rem, 2vw, 1.55rem); font-weight: 400; max-width: 760px; margin: 0 auto 28px auto; line-height: 1.4; }























        .btn-cta {











            display: inline-block;











            background: var(--brand-orange);











            color: var(--brand-dark);











            font-family: 'Oswald', 'Oswald Fallback', sans-serif;











            font-size: clamp(1.1rem, 2.4vw, 1.45rem);











            font-weight: 700;











            letter-spacing: 1px;











            text-transform: uppercase;











            padding: 16px 32px;











            border-radius: 6px;











            box-shadow: 0 8px 24px rgba(255, 153, 0, 0.35);











        }











        .btn-cta:hover { background: #ffaa33; transform: translateY(-2px); color: var(--brand-dark); }























        .trust-strip {











            position: relative; z-index: 10;











            display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 32px;











            padding: 8px 5% 10px;











            color: var(--brand-gold);











            font-family: 'Oswald', 'Oswald Fallback', sans-serif;











            font-size: 1rem;











            letter-spacing: 0.5px;











            text-transform: uppercase;











        }























        .content-wrapper { max-width: 1200px; margin: 0 auto; padding: 70px 5%; background: transparent; position: relative; z-index: 10; }











        .section-header { font-size: clamp(2rem, 4vw, 3rem); text-align: center; margin-bottom: 15px; color: white; }











        .section-sub { font-size: 1.2rem; text-align: center; max-width: 800px; margin: 0 auto 40px auto; color: #aaa; }























        .intro-copy { max-width: 860px; margin: 0 auto; }











        .intro-copy p { color: #cccccc; font-size: 1.25rem; margin-bottom: 22px; line-height: 1.7; font-weight: 300; }























        .services-grid { display: grid; grid-template-columns: 1fr; gap: 30px; }











        @media (min-width: 768px) { .services-grid { grid-template-columns: repeat(2, 1fr); } }











        @media (min-width: 1100px) {











            .services-grid { grid-template-columns: repeat(6, 1fr); }











            .service-card:nth-child(1),











            .service-card:nth-child(2),











            .service-card:nth-child(3) { grid-column: span 2; }











            .service-card:nth-child(4),











            .service-card:nth-child(5) { grid-column: span 3; }











        }























        .service-card {











            background: rgba(255, 255, 255, 0.05);











            backdrop-filter: blur(12px);











            -webkit-backdrop-filter: blur(12px);











            border: 1px solid rgba(255, 255, 255, 0.1);











            border-left: 5px solid var(--brand-orange);











            border-radius: 8px;











            overflow: hidden;











            display: flex;











            flex-direction: column;











            transition: all 0.3s ease;











        }











        .service-card:hover {











            transform: translateY(-5px);











            background: rgba(255, 255, 255, 0.1);











            box-shadow: 0 15px 40px rgba(0,0,0,0.6);











            border-left-color: var(--brand-gold);











        }











        a.service-card { color: inherit; cursor: pointer; }











        a.service-card:hover { color: inherit; }











        .service-card img { width: 100%; height: 200px; object-fit: cover; opacity: 0.8; transition: opacity 0.3s ease; }











        .service-card:hover img { opacity: 1; }











        .service-info { padding: 30px; }











        .service-info h3 { font-size: 1.6rem; margin-bottom: 12px; color: white; }











        .service-info p { color: #ccc; margin: 0; font-size: 1.1rem; }























        .local-note {











            margin-top: 50px;











            background: rgba(255, 255, 255, 0.04);











            border: 1px solid rgba(255, 255, 255, 0.1);











            border-top: 4px solid var(--brand-orange);











            border-radius: 12px;











            padding: 32px;











            display: grid;











            grid-template-columns: 1fr;











            gap: 24px;











            align-items: center;











        }











        @media (min-width: 800px) { .local-note { grid-template-columns: 180px 1fr; } }











        .local-note img { width: 100%; max-width: 180px; height: 180px; object-fit: cover; border-radius: 10px; border: 2px solid var(--brand-orange); justify-self: center; }











        .local-note p { color: #ccc; font-size: 1.15rem; margin: 0; }











        .local-note strong { color: white; }























        footer { background-color: rgba(0, 0, 0, 0.7); color: white; padding: 80px 5%; text-align: center; border-top: 1px solid #333; position: relative; z-index: 10; backdrop-filter: blur(5px); }











        footer h2 { color: white; font-size: clamp(2rem, 5vw, 2.8rem); margin-bottom: 12px; }











        footer p.footer-sub { color: #aaa; font-size: 1.2rem; margin: 0 auto 25px auto; max-width: 720px; }











        footer .phone-link { color: var(--brand-orange); font-size: clamp(2.5rem, 6vw, 4rem); text-shadow: 0 0 15px rgba(255, 153, 0, 0.3); font-weight: 700; display: block; }











        footer .phone-link:hover { color: var(--brand-gold); }











        .service-areas { margin-top: 36px; }











        .service-areas p { color: #888; margin-bottom: 8px; font-size: 0.95rem; letter-spacing: 1px; text-transform: uppercase; }











        .service-areas a { color: var(--brand-orange); font-weight: 700; font-size: 1.1rem; }











        .service-areas a:hover { color: var(--brand-gold); }











        .footer-meta { margin-top: 40px; border-top: 1px solid #333; padding-top: 20px; color: #888; }























        .glass-btn {











            display: inline-flex; align-items: center; justify-content: center;











            background: rgba(255, 255, 255, 0.08);











            backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);











            border: 1px solid rgba(255, 255, 255, 0.15);











            box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);











            color: #ffffff; font-weight: 600; font-size: 15px;











            padding: 14px 24px; border-radius: 20px; margin: 6px;











        }











        .glass-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px) scale(1.02); }











        .btn-fb:hover { border-color: rgba(24, 119, 242, 0.8); color: #1877F2; }











        .btn-nd:hover { border-color: rgba(0, 181, 90, 0.8); color: #00B55A; }











        .btn-x:hover { border-color: rgba(255,255,255,0.6); }























        @media (max-width: 640px) {











            .nav-container a { padding: 14px 16px; font-size: 0.95rem; }











            .service-info { padding: 22px; }











        }











        .glass-btn { display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.08); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); color: #ffffff; text-decoration: none; font-weight: 600; font-size: 15px; padding: 16px 28px; border-radius: 20px; transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; cursor: pointer; }











    .glass-btn:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-4px) scale(1.02); }











    .glass-btn:active { transform: scale(0.92); background: rgba(255, 255, 255, 0.05); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2); }











    .btn-fb:hover { border-color: rgba(24, 119, 242, 0.8); box-shadow: 0 8px 32px 0 rgba(24, 119, 242, 0.25); color: #1877F2; }











    .btn-fb:hover svg { fill: #1877F2; }











    .btn-ig:hover { border-color: rgba(230, 104, 60, 0.8); box-shadow: 0 8px 32px 0 rgba(230, 104, 60, 0.25); color: #e6683c; }











    .btn-ig:hover svg { fill: url(#ig-grad); }











    .btn-nd:hover { border-color: rgba(0, 181, 90, 0.8); box-shadow: 0 8px 32px 0 rgba(0, 181, 90, 0.25); color: #00B55A; }











    .btn-nd:hover svg { fill: #00B55A; }











    /* social: brand accent at rest (Nyx 2026-09-10) */











    /* Every brand colour used to live in :hover only, so on touch devices the row











       rendered as four identical grey buttons. Accent at rest, hover intensifies. */











    .social-badge-container .btn-fb:not(:hover) { border-color: rgba(24, 119, 242, 0.45); }











    .social-badge-container .btn-fb:not(:hover) svg { fill: #1877F2; }











    .social-badge-container .btn-ig:not(:hover) { border-color: rgba(230, 104, 60, 0.45); }











    .social-badge-container .btn-ig:not(:hover) svg { fill: #e6683c; }











    .social-badge-container .btn-nd:not(:hover) { border-color: rgba(0, 181, 90, 0.45); }











    .social-badge-container .btn-nd:not(:hover) svg { fill: #00B55A; }











    .social-badge-container .btn-x:not(:hover) { border-color: rgba(255, 255, 255, 0.5); }











    .social-badge-container .btn-x:not(:hover) svg { fill: #ffffff; }











    .social-badge-container .btn-x:hover { border-color: rgba(255, 255, 255, 0.75); box-shadow: 0 8px 32px 0 rgba(255, 255, 255, 0.18); color: #ffffff; }