:root {
        --loc-blue: #0ea5e9;
        --loc-blue-dark: #0369a1;
        --loc-navy: #071827;
        --loc-soft: #f0f9ff;
    }

    html {
        scroll-behavior: smooth;
        background: #f0f9ff;
    }

    body {
        margin: 0;
        background: #f7fcff;
        overflow-x: hidden;
    }

    #page-scroll-progress {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 10001;
        width: 100%;
        height: 2px;
        transform: scaleX(0);
        transform-origin: left center;
        background:
            linear-gradient(
                90deg,
                rgba(14,165,233,.25),
                #0ea5e9 45%,
                #38bdf8 78%,
                rgba(125,211,252,.7)
            );
        box-shadow: 0 0 14px rgba(14,165,233,.30);
        will-change: transform;
    }

    /* ====================================================== */
    /* HERO */
    /* ====================================================== */

    .location-hero {
        position: relative;
        min-height: 92vh;
        display: flex;
        align-items: center;
        overflow: hidden;
        isolation: isolate;
        padding: 150px 24px 88px;
    }

    .location-hero-bg {
        position: absolute;
        inset: -4%;
        z-index: -4;
        background-image:
            linear-gradient(
                90deg,
                rgba(240,249,255,.90) 0%,
                rgba(240,249,255,.65) 36%,
                rgba(255,255,255,.40) 68%,
                rgba(255,255,255,.55) 100%
            ),
            linear-gradient(
                180deg,
                rgba(255,255,255,.20),
                rgba(240,249,255,.44)
            ),
            url('https://lh3.googleusercontent.com/d/1_uJr5viwuC4N85Fo5GnzSIlpDvhPBQc4');
        background-size: cover;
        background-position: center;
        transform: scale(var(--hero-bg-scale, 1.03));
        will-change: transform;
    }

    .location-hero-glow {
        position: absolute;
        z-index: -3;
        width: 560px;
        height: 560px;
        right: -140px;
        top: 9%;
        border-radius: 50%;
        background:
            radial-gradient(
                circle,
                rgba(56,189,248,.18),
                rgba(125,211,252,.06) 42%,
                transparent 72%
            );
        filter: blur(2px);
    }

    .location-hero-orbit {
        position: absolute;
        z-index: -2;
        right: 4%;
        top: 20%;
        width: min(43vw, 630px);
        aspect-ratio: 1;
        border-radius: 50%;
        border: 1px solid rgba(14,165,233,.10);
        box-shadow:
            0 0 0 42px rgba(14,165,233,.025),
            0 0 0 86px rgba(14,165,233,.018);
        pointer-events: none;
    }

    .location-hero-inner {
        width: min(1180px, 100%);
        margin: 0 auto;
        display: grid;
        grid-template-columns: minmax(0, .94fr) minmax(430px, 1.06fr);
        gap: 58px;
        align-items: center;
    }

    .location-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 9px;
        padding: 8px 14px;
        border-radius: 999px;
        color: #0369a1;
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(186,230,253,.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 8px 24px rgba(14,165,233,.07);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .12em;
    }

    .location-title {
        margin-top: 22px;
        max-width: 670px;
        color: #0f172a;
        font-size: clamp(48px, 6.2vw, 82px);
        line-height: .98;
        letter-spacing: -.065em;
        font-weight: 800;
    }

    .location-title span {
        color: #0ea5e9;
    }

    .location-lead {
        max-width: 610px;
        margin-top: 24px;
        color: #64748b;
        font-size: 15px;
        line-height: 1.9;
    }

    .location-actions {
        margin-top: 30px;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: 11px;
    }

    .location-primary,
    .location-secondary {
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 19px;
        border-radius: 999px;
        font-size: 11px;
        font-weight: 750;
        transition:
            transform .35s cubic-bezier(.16,1,.3,1),
            box-shadow .35s ease,
            background .3s ease,
            color .3s ease;
    }

    .location-primary {
        color: #fff;
        background: #0ea5e9;
        box-shadow: 0 12px 28px rgba(14,165,233,.24);
    }

    .location-primary:hover {
        transform: translateY(-3px);
        background: #0284c7;
        box-shadow: 0 17px 36px rgba(14,165,233,.28);
    }

    .location-secondary {
        color: #334155;
        background: rgba(255,255,255,.76);
        border: 1px solid rgba(255,255,255,.96);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 9px 25px rgba(15,23,42,.055);
    }

    .location-secondary:hover {
        color: #0284c7;
        transform: translateY(-3px);
    }

    .location-meta-row {
        margin-top: 32px;
        display: flex;
        flex-wrap: wrap;
        gap: 9px;
    }

    .location-meta-pill {
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 12px;
        border-radius: 999px;
        color: #475569;
        background: rgba(255,255,255,.72);
        border: 1px solid rgba(255,255,255,.95);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        font-size: 9.5px;
        font-weight: 700;
        box-shadow: 0 8px 20px rgba(15,23,42,.04);
    }

    /* Hero visual card */
    .hero-map-card {
        position: relative;
        min-height: 530px;
        overflow: hidden;
        border-radius: 34px;
        border: 1px solid rgba(255,255,255,.90);
        background: rgba(255,255,255,.55);
        box-shadow:
            0 32px 90px rgba(14,165,233,.16),
            inset 0 1px 0 rgba(255,255,255,.90);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: rotate(.7deg);
    }

    .hero-map-card iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        filter: saturate(.90) contrast(.97) brightness(1.04);
    }

    .hero-map-card::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background:
            linear-gradient(
                180deg,
                rgba(255,255,255,.04) 50%,
                rgba(7,24,39,.18) 100%
            );
    }

    .hero-map-label {
        position: absolute;
        z-index: 4;
        top: 20px;
        left: 20px;
        right: 20px;
        display: flex;
        justify-content: space-between;
        gap: 10px;
    }

    .hero-map-label-card {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 13px;
        border-radius: 17px;
        color: #0f172a;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(255,255,255,.95);
        backdrop-filter: blur(14px);
        -webkit-backdrop-filter: blur(14px);
        box-shadow: 0 12px 32px rgba(15,23,42,.11);
    }

    .hero-map-label-card small {
        display: block;
        color: #64748b;
        font-size: 8.5px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: .08em;
    }

    .hero-map-label-card strong {
        display: block;
        margin-top: 2px;
        color: #0f172a;
        font-size: 11px;
    }

    .hero-map-bottom {
        position: absolute;
        z-index: 4;
        left: 20px;
        right: 20px;
        bottom: 20px;
        padding: 16px;
        border-radius: 21px;
        color: #fff;
        background:
            linear-gradient(
                135deg,
                rgba(7,24,39,.88),
                rgba(7,53,82,.84)
            );
        border: 1px solid rgba(255,255,255,.12);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 16px 38px rgba(7,24,39,.22);
    }

    .hero-map-bottom p {
        font-size: 9px;
        color: #7dd3fc;
        text-transform: uppercase;
        font-weight: 800;
        letter-spacing: .1em;
    }

    .hero-map-bottom h3 {
        margin-top: 4px;
        font-size: 15px;
        font-weight: 800;
    }

    .hero-map-bottom span {
        display: block;
        margin-top: 5px;
        color: #cbd5e1;
        font-size: 9.5px;
        line-height: 1.6;
    }

    /* ====================================================== */
    /* SECTION GLOBAL */
    /* ====================================================== */

    .location-section {
        position: relative;
        padding: 98px 24px;
        overflow: hidden;
    }

    .location-container {
        width: min(1180px, 100%);
        margin: 0 auto;
    }

    .location-section-header {
        max-width: 720px;
        margin: 0 auto 42px;
        text-align: center;
    }

    .section-kicker {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        border-radius: 999px;
        color: #0369a1;
        background: #f0f9ff;
        border: 1px solid #bae6fd;
        font-size: 9.5px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: .10em;
    }

    .location-section-title {
        margin-top: 16px;
        color: #0f172a;
        font-size: clamp(32px, 4vw, 50px);
        line-height: 1.08;
        letter-spacing: -.045em;
        font-weight: 800;
    }

    .location-section-copy {
        margin: 14px auto 0;
        max-width: 650px;
        color: #64748b;
        font-size: 13px;
        line-height: 1.85;
    }

    /* ====================================================== */
    /* INTERACTIVE MAP */
    /* ====================================================== */

    .map-stage-section {
        background:
            radial-gradient(
                circle at 20% 20%,
                rgba(125,211,252,.13),
                transparent 28%
            ),
            linear-gradient(180deg,#ffffff,#f7fcff);
    }

    .map-stage {
        position: relative;
        display: grid;
        grid-template-columns: minmax(280px,.58fr) minmax(0,1.42fr);
        min-height: 640px;
        overflow: hidden;
        border-radius: 36px;
        border: 1px solid #e0f2fe;
        background: rgba(255,255,255,.86);
        box-shadow:
            0 28px 80px rgba(14,165,233,.10),
            inset 0 1px 0 #fff;
    }

    .map-info-panel {
        position: relative;
        z-index: 3;
        padding: 38px 34px;
        background:
            linear-gradient(
                160deg,
                rgba(248,252,255,.98),
                rgba(240,249,255,.91)
            );
        border-right: 1px solid #e0f2fe;
    }

    .map-info-panel h3 {
        margin-top: 18px;
        color: #0f172a;
        font-size: 29px;
        line-height: 1.16;
        letter-spacing: -.035em;
        font-weight: 800;
    }

    .map-info-panel > p {
        margin-top: 12px;
        color: #64748b;
        font-size: 11.5px;
        line-height: 1.8;
    }

    .map-detail-list {
        margin-top: 30px;
        display: grid;
        gap: 12px;
    }

    .map-detail-item {
        display: grid;
        grid-template-columns: 42px minmax(0,1fr);
        gap: 12px;
        align-items: start;
        padding: 14px;
        border-radius: 18px;
        border: 1px solid rgba(186,230,253,.85);
        background: rgba(255,255,255,.72);
        transition:
            transform .35s cubic-bezier(.16,1,.3,1),
            background .3s ease,
            box-shadow .35s ease;
    }

    .map-detail-item:hover {
        transform: translateX(4px);
        background: #fff;
        box-shadow: 0 11px 28px rgba(14,165,233,.08);
    }

    .map-detail-icon {
        width: 42px;
        height: 42px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 14px;
        color: #0284c7;
        background: #f0f9ff;
        border: 1px solid #e0f2fe;
    }

    .map-detail-item strong {
        display: block;
        color: #334155;
        font-size: 10.5px;
        font-weight: 800;
    }

    .map-detail-item span {
        display: block;
        margin-top: 4px;
        color: #64748b;
        font-size: 9.5px;
        line-height: 1.65;
    }

    .map-stage-map {
        position: relative;
        min-height: 640px;
        background: #e0f2fe;
        overflow: hidden;
    }

    .map-stage-map iframe {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        filter: saturate(.93) contrast(.99);
    }

    .map-stage-map::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        box-shadow: inset 22px 0 40px rgba(240,249,255,.20);
    }

    .map-floating-chip {
        position: absolute;
        z-index: 4;
        right: 18px;
        bottom: 18px;
        display: inline-flex;
        align-items: center;
        gap: 7px;
        padding: 9px 12px;
        border-radius: 999px;
        color: #475569;
        background: rgba(255,255,255,.92);
        border: 1px solid rgba(255,255,255,.98);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: 0 10px 28px rgba(15,23,42,.10);
        font-size: 9px;
        font-weight: 700;
        pointer-events: none;
    }



    /* ====================================================== */
    /* ROUTE STEPS */
    /* ====================================================== */

    .route-section {
        background: #fff;
    }

    .route-grid {
        display: grid;
        grid-template-columns: repeat(3,minmax(0,1fr));
        gap: 18px;
    }

    .route-step {
        position: relative;
        padding: 25px 23px;
        border-radius: 25px;
        border: 1px solid #e2e8f0;
        background:
            linear-gradient(
                145deg,
                rgba(255,255,255,.98),
                rgba(248,252,255,.94)
            );
        transition:
            transform .45s cubic-bezier(.16,1,.3,1),
            box-shadow .45s ease,
            border-color .3s ease;
    }

    .route-step:hover {
        transform: translateY(-7px);
        border-color: #bae6fd;
        box-shadow: 0 22px 52px rgba(14,165,233,.09);
    }

    .route-number {
        width: 38px;
        height: 38px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 13px;
        color: #fff;
        background: #0ea5e9;
        box-shadow: 0 9px 20px rgba(14,165,233,.20);
        font-size: 11px;
        font-weight: 800;
    }

    .route-step h3 {
        margin-top: 18px;
        color: #0f172a;
        font-size: 16px;
        font-weight: 800;
    }

    .route-step p {
        margin-top: 8px;
        color: #64748b;
        font-size: 10.5px;
        line-height: 1.75;
    }

    /* ====================================================== */
    /* CTA */
    /* ====================================================== */

    .location-cta-section {
        padding: 20px 24px 100px;
        background: #fff;
    }

    .location-cta {
        position: relative;
        width: min(1180px,100%);
        margin: 0 auto;
        overflow: hidden;
        display: grid;
        grid-template-columns: minmax(0,1fr) auto;
        gap: 28px;
        align-items: center;
        padding: 38px 42px;
        border-radius: 31px;
        color: #fff;
        background:
            radial-gradient(
                circle at 12% 10%,
                rgba(56,189,248,.26),
                transparent 31%
            ),
            linear-gradient(
                135deg,
                #075985,
                #0369a1 48%,
                #0c4a6e
            );
        box-shadow:
            0 30px 78px rgba(3,105,161,.22),
            inset 0 1px 0 rgba(255,255,255,.14);
    }

    .location-cta::after {
        content: "";
        position: absolute;
        width: 290px;
        height: 290px;
        right: -80px;
        top: -110px;
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 50%;
        box-shadow:
            0 0 0 35px rgba(255,255,255,.025),
            0 0 0 70px rgba(255,255,255,.018);
        pointer-events: none;
    }

    .location-cta small {
        color: #7dd3fc;
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .11em;
        text-transform: uppercase;
    }

    .location-cta h2 {
        margin-top: 7px;
        max-width: 660px;
        font-size: clamp(26px,3.5vw,42px);
        line-height: 1.12;
        letter-spacing: -.035em;
        font-weight: 800;
    }

    .location-cta p {
        margin-top: 9px;
        max-width: 650px;
        color: #cbd5e1;
        font-size: 10.5px;
        line-height: 1.75;
    }

    .location-cta-button {
        position: relative;
        z-index: 2;
        min-height: 48px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 9px;
        padding: 0 19px;
        border-radius: 999px;
        color: #075985;
        background: #fff;
        font-size: 10.5px;
        font-weight: 800;
        box-shadow: 0 12px 28px rgba(7,24,39,.18);
        transition:
            transform .35s cubic-bezier(.16,1,.3,1),
            box-shadow .35s ease;
    }

    .location-cta-button:hover {
        transform: translateY(-3px);
        box-shadow: 0 17px 36px rgba(7,24,39,.24);
    }

    /* ====================================================== */
    /* SCROLL MOTION */
    /* ====================================================== */

    .location-reveal {
        opacity: 0;
        transform:
            translate3d(0,34px,0)
            scale(.985);
        filter: blur(5px);
        transition:
            opacity .8s cubic-bezier(.16,1,.3,1),
            transform .9s cubic-bezier(.16,1,.3,1),
            filter .7s ease;
    }

    .location-reveal.from-left {
        transform:
            translate3d(-48px,20px,0)
            scale(.985);
    }

    .location-reveal.from-right {
        transform:
            translate3d(48px,20px,0)
            scale(.985);
    }

    .location-reveal.visible {
        opacity: 1;
        transform:
            translate3d(0,0,0)
            scale(1);
        filter: blur(0);
    }

    /* ====================================================== */
    /* RESPONSIVE */
    /* ====================================================== */

    @media (max-width: 980px) {
        .location-hero {
            min-height: auto;
            padding-top: 130px;
        }

        .location-hero-inner {
            grid-template-columns: 1fr;
            gap: 42px;
        }

        .hero-map-card {
            min-height: 500px;
            transform: none;
        }

        .map-stage {
            grid-template-columns: 1fr;
        }

        .map-info-panel {
            border-right: 0;
            border-bottom: 1px solid #e0f2fe;
        }

        .map-stage-map {
            min-height: 520px;
        }

        .route-grid {
            grid-template-columns: 1fr 1fr;
        }
    }

    @media (max-width: 680px) {
        .location-hero {
            padding:
                112px 14px
                60px;
        }

        .location-title {
            font-size: 46px;
        }

        .location-lead {
            font-size: 13px;
        }

        .hero-map-card {
            min-height: 420px;
            border-radius: 27px;
        }

        .hero-map-label {
            top: 12px;
            left: 12px;
            right: 12px;
        }

        .hero-map-bottom {
            left: 12px;
            right: 12px;
            bottom: 12px;
        }

        .location-section {
            padding:
                72px 14px;
        }

        .map-stage {
            border-radius: 28px;
        }

        .map-info-panel {
            padding:
                28px 20px;
        }

        .map-stage-map {
            min-height: 430px;
        }

        .route-grid {
            grid-template-columns: 1fr;
        }

        .location-cta-section {
            padding:
                10px 14px
                78px;
        }

        .location-cta {
            grid-template-columns: 1fr;
            padding: 30px 24px;
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .location-reveal {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            transition: none !important;
        }
    }