/* ============================

   PAGE WRAPPER

============================ */

    .locations-page {

        padding-top: 80px;

        background: var(--bg);

        color: var(--text);

    }



    /* ============================

   HERO SECTION

============================ */

    .locations-hero {

        max-width: 900px;

        margin: 0 auto;

        text-align: center;

        padding: 60px 20px;

    }



        .locations-hero h1 {

            font-size: 2.4rem;

            font-weight: 700;

            color: var(--gold);

            margin-bottom: 20px;

        }



        .locations-hero p {

            font-size: 1.1rem;

            line-height: 1.7;

            color: var(--muted);

            margin-bottom: 15px;

        }



    /* ============================

   BRAND TRUST SECTION

============================ */

    .brand-trust-section {

        max-width: 900px;

        margin: 50px auto;

        padding: 40px 20px;

        background: var(--panel);

        border: 1px solid var(--line-strong);

        border-radius: var(--radius);

        backdrop-filter: blur(6px);

    }



        .brand-trust-section h2 {

            color: var(--gold);

            font-size: 2rem;

            margin-bottom: 20px;

        }



        .brand-trust-section p {

            color: var(--muted);

            line-height: 1.7;

            margin-bottom: 15px;

        }



    /* ============================

   SEO AREAS SUMMARY

============================ */

    .seo-areas-summary {

        max-width: 900px;

        margin: 50px auto;

        padding: 40px 20px;

    }



        .seo-areas-summary h3 {

            color: var(--gold-soft);

            font-size: 1.7rem;

            margin-bottom: 20px;

        }



        .seo-areas-summary p {

            color: var(--muted);

            line-height: 1.7;

            margin-bottom: 15px;

        }



    /* ============================

   LOCATIONS GRID

============================ */

    .locations-grid {

        max-width: 1200px;

        margin: 60px auto;

        padding: 0 20px;

        display: grid;

        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));

        gap: 25px;

    }



    .location-card {

        background: var(--panel-strong);

        border: 1px solid var(--line);

        padding: 25px;

        border-radius: var(--radius);

        text-decoration: none;

        transition: 0.3s ease;

        display: block;

    }



        .location-card h3 {

            color: var(--gold);

            margin-bottom: 10px;

            font-size: 1.4rem;

        }



        .location-card p {

            color: var(--muted);

            line-height: 1.6;

        }



        .location-card:hover {

            transform: translateY(-6px);

            box-shadow: 0 0 18px rgba(225,185,47,0.35);

            border-color: var(--gold);

        }



    /* ============================

   CTA SECTION

============================ */

    .cta-section {

       

        margin-top: 80px;

        padding: 80px 20px;

        background: linear-gradient(135deg, var(--purple), var(--purple-soft));

        text-align: center;

    }



    .cta-inner {

        max-width: 800px;

        margin: 0 auto;

    }



    .cta-section h2 {

        color: var(--gold);

        font-size: 2.2rem;

        margin-bottom: 20px;

    }



    .cta-section p {

        color: var(--text);

        font-size: 1.1rem;

        line-height: 1.7;

        margin-bottom: 30px;

    }



    .cta-button {

        display: inline-block;

        padding: 14px 28px;

        background: linear-gradient(135deg, var(--gold), var(--gold-soft));

        color: #111;

        font-weight: 700;

        border-radius: var(--radius);

        text-decoration: none;

        transition: 0.25s ease;

        box-shadow: 0 0 12px rgba(225,185,47,0.4);

    }



        .cta-button:hover {

            filter: brightness(1.15);

        }