/**
 * LIVZO — "Explore by location" (homepage module 7).
 *
 * Location discovery: a location picker on the left, a map on the right. Not a
 * property search — no prices, listings or brokers.
 *
 * The right column is a live Google map and nothing else. With an API key it mounts the
 * SDK and drops a marker per city; while it loads the frame shows `.lz-loc__map-loading`,
 * and a rejected key or a failed request swaps that for `.lz-loc__map-fail`. With no key
 * (or no JavaScript) the frame carries a note instead, and no third-party request is made.
 * See `.lz-loc__map-canvas` and assets/js/locations.js.
 *
 * Motion index
 *   reveal-on-scroll → [data-lz-inview] + .is-in (assets/js/societies.js)
 *   tabs / city select / live map markers → assets/js/locations.js
 *   ambient         → glow drift, floating pins, loader spin
 *   hover           → card lift, sector pill accent, marker lift
 *
 * Layout
 *   ≥1180px : two columns — picker (left ≈45%) + map (right ≈55%)
 *   <1180px : stacked — picker, then the map
 */

/* ==========================================================================
   1. Shell + decorative background
   ========================================================================== */

.lz-loc {
    position: relative;
    isolation: isolate;
    padding: clamp(60px, 6.6vw, 96px) 0 clamp(68px, 8vw, 100px);
    scroll-margin-top: calc(var(--lz-header-h) + 16px);
}

.lz-loc__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.lz-loc__glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(74px);
}

.lz-loc__glow--a {
    top: -14%;
    right: -8%;
    width: min(48vw, 560px);
    aspect-ratio: 1;
    background-image: radial-gradient(circle at 50% 50%, rgba(109, 74, 255, 0.16), rgba(109, 74, 255, 0) 70%);
    animation: lzDrift 26s ease-in-out infinite;
}

.lz-loc__glow--b {
    bottom: -22%;
    left: -10%;
    width: min(42vw, 500px);
    aspect-ratio: 1;
    background-image: radial-gradient(circle at 50% 50%, rgba(109, 74, 255, 0.11), rgba(109, 74, 255, 0) 70%);
    animation: lzDrift 32s ease-in-out infinite reverse;
}

.lz-loc__grid-lines {
    position: absolute;
    inset: -6% -6% 0;
    background-image: linear-gradient(rgba(11, 27, 51, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(11, 27, 51, 0.04) 1px, transparent 1px);
    background-size: 72px 72px;
    -webkit-mask-image: radial-gradient(ellipse 68% 60% at 50% 42%, #000 0%, transparent 74%);
    mask-image: radial-gradient(ellipse 68% 60% at 50% 42%, #000 0%, transparent 74%);
}

/* Decorative pins — kept off the `.lz-loc__marker` name the map markers own, so the
   two can never fight over position. */
.lz-loc__bgpin {
    position: absolute;
    color: var(--lz-accent);
}

.lz-loc__bgpin .lz-icon { width: 100%; height: 100%; }

.lz-loc__bgpin--a {
    top: 16%;
    left: 2.5%;
    width: 22px;
    opacity: 0.09;
    animation: lzFloat 13s ease-in-out infinite;
}

.lz-loc__bgpin--b {
    top: 70%;
    left: 6%;
    width: 16px;
    opacity: 0.07;
    animation: lzFloat 16s ease-in-out infinite reverse;
}

.lz-loc__bgpin--c {
    top: 12%;
    right: 30%;
    width: 14px;
    opacity: 0.06;
    animation: lzFloat 11s ease-in-out infinite;
}

/* ==========================================================================
   2. Two-column body
   ========================================================================== */

.lz-loc__body {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: clamp(32px, 3.8vw, 54px);
}

@media (min-width: 1180px) {
    .lz-loc__body {
        grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
        align-items: start;
    }
}

.lz-loc__content { min-width: 0; }

/* ==========================================================================
   3. Head
   ========================================================================== */

.lz-loc__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    color: var(--lz-accent);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

.lz-loc__eyebrow-ico {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent);
    animation: lzPulse 3.4s var(--lz-ease) infinite;
}

.lz-loc__eyebrow-ico .lz-icon { width: 14px; height: 14px; }

.lz-loc__title {
    margin-top: 14px;
    font-size: clamp(1.9rem, 1.25rem + 2.05vw, 2.9rem);
    letter-spacing: -0.035em;
    text-wrap: balance;
}

.lz-loc__title-accent {
    background-image: linear-gradient(100deg, var(--lz-accent-700) 0%, var(--lz-accent) 34%, #9C86FF 62%, var(--lz-accent) 100%);
    background-size: 220% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: var(--lz-accent);
    -webkit-text-fill-color: transparent;
    animation: lzAccentFlow 9s var(--lz-ease) infinite;
}

.lz-loc__lead {
    margin-top: 14px;
    max-width: 56ch;
    font-size: clamp(0.96rem, 0.94rem + 0.2vw, 1.04rem);
    line-height: 1.68;
    color: var(--lz-body);
}

/* ==========================================================================
   4. Tabs
   ========================================================================== */

.lz-loc__tabs-wrap { margin-top: clamp(24px, 2.8vw, 32px); }

.lz-loc__tabs {
    display: inline-flex;
    gap: 6px;
    padding: 5px;
    border: 1px solid var(--lz-line);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    box-shadow: var(--lz-sh-1);
}

.lz-loc__tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border: 1px solid transparent;
    border-radius: var(--lz-r-pill);
    background-color: transparent;
    color: var(--lz-body);
    font-size: 0.84rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.28s var(--lz-ease),
        border-color 0.28s var(--lz-ease),
        color 0.28s var(--lz-ease),
        box-shadow 0.28s var(--lz-ease);
}

.lz-loc__tab-ico {
    display: grid;
    place-items: center;
    color: var(--lz-accent);
    transition: color 0.28s var(--lz-ease);
}

.lz-loc__tab-ico .lz-icon { width: 15px; height: 15px; }

.lz-loc__tab:hover {
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent-700);
}

.lz-loc__tab.is-active {
    border-color: transparent;
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    box-shadow: 0 12px 24px -16px rgba(109, 74, 255, 0.95);
}

.lz-loc__tab.is-active .lz-loc__tab-ico { color: #fff; }

/* ==========================================================================
   5. Panels, city cards, sectors
   ========================================================================== */

.lz-loc__panel { margin-top: clamp(22px, 2.6vw, 30px); }
.lz-loc__panel[hidden] { display: none; }

.lz-loc__label {
    color: var(--lz-body);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
}

.lz-loc__cities {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin-top: 14px;
}

@media (min-width: 520px) {
    .lz-loc__cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.lz-loc__city {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 100%;
    padding: 13px 14px;
    border: 1px solid var(--lz-line);
    border-radius: 19px;
    background-color: var(--lz-surface);
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 14px 30px -26px rgba(11, 27, 51, 0.30);
    transition: transform 0.28s var(--lz-ease-out),
        border-color 0.28s var(--lz-ease),
        background-color 0.28s var(--lz-ease),
        box-shadow 0.28s var(--lz-ease);
}

.lz-loc__city:hover {
    transform: translateY(-3px);
    border-color: rgba(109, 74, 255, 0.30);
    background-color: #F8F6FF;
    box-shadow: 0 18px 34px -24px rgba(109, 74, 255, 0.70);
}

.lz-loc__city.is-selected {
    border-color: rgba(109, 74, 255, 0.34);
    background-image: linear-gradient(180deg, rgba(109, 74, 255, 0.08), rgba(109, 74, 255, 0.04));
    background-color: #F8F6FF;
}

.lz-loc__city-media {
    display: block;
    width: 44px;
    height: 44px;
    flex: none;
    overflow: hidden;
    border: 2px solid #fff;
    border-radius: 50%;
    background-color: var(--lz-bg-2);
    box-shadow: 0 6px 14px -8px rgba(11, 27, 51, 0.60);
}

.lz-loc__city-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.lz-loc__city-body { display: grid; gap: 2px; min-width: 0; }

.lz-loc__city-name {
    color: var(--lz-navy);
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: -0.018em;
}

.lz-loc__city-count {
    color: var(--lz-body);
    font-size: 0.74rem;
    font-weight: 500;
}

.lz-loc__city-arrow {
    width: 17px;
    height: 17px;
    flex: none;
    margin-left: auto;
    color: var(--lz-accent);
    opacity: 0.55;
    transition: transform 0.28s var(--lz-ease-out), opacity 0.28s var(--lz-ease);
}

.lz-loc__city:hover .lz-loc__city-arrow,
.lz-loc__city.is-selected .lz-loc__city-arrow {
    transform: translateX(4px);
    opacity: 1;
}

/* --- Sectors ------------------------------------------------------------ */

.lz-loc__rows { margin-top: clamp(22px, 2.6vw, 28px); }

/* The city switcher above the sector list. Small pills, one city at a time; the row
   scrolls sideways on a phone (they are buttons, so the scroller stays reachable). */
.lz-loc__city-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 6px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.lz-loc__city-tabs::-webkit-scrollbar { display: none; }

.lz-loc__city-tab {
    display: inline-flex;
    align-items: center;
    flex: none;
    padding: 7px 14px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    color: var(--lz-body);
    font-family: inherit;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.25s var(--lz-ease),
        border-color 0.25s var(--lz-ease),
        color 0.25s var(--lz-ease),
        box-shadow 0.25s var(--lz-ease),
        transform 0.25s var(--lz-ease-out);
}

.lz-loc__city-tab:hover {
    color: var(--lz-accent-700);
    border-color: rgba(109, 74, 255, 0.30);
    background-color: var(--lz-accent-soft);
    transform: translateY(-1px);
}

.lz-loc__city-tab.is-active {
    border-color: transparent;
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    box-shadow: 0 12px 24px -16px rgba(109, 74, 255, 0.95);
}

/* One city at a time, so the panels never stack and the list sits right under the tabs. */
.lz-loc__rows--tabs .lz-loc__sector-row + .lz-loc__sector-row { margin-top: 0; }
.lz-loc__rows--tabs .lz-loc__sectors { margin-top: 0; }

.lz-loc__sector-row + .lz-loc__sector-row { margin-top: 20px; }
.lz-loc__sector-row[hidden] { display: none; }

.lz-loc__sector-head {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--lz-navy);
    font-size: 0.84rem;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.lz-loc__sector-head-ico {
    display: grid;
    place-items: center;
    color: var(--lz-accent);
}

.lz-loc__sector-head-ico .lz-icon { width: 16px; height: 16px; }

.lz-loc__sectors {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.lz-loc__rows--grid .lz-loc__sectors {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.lz-loc__sector {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px;
    border: 1px solid var(--lz-line-2);
    border-radius: var(--lz-r-pill);
    background-color: var(--lz-surface);
    color: var(--lz-body);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    white-space: nowrap;
    transition: background-color 0.25s var(--lz-ease),
        border-color 0.25s var(--lz-ease),
        color 0.25s var(--lz-ease),
        box-shadow 0.25s var(--lz-ease),
        transform 0.25s var(--lz-ease-out);
}

.lz-loc__sector:hover {
    color: var(--lz-accent-700);
    border-color: rgba(109, 74, 255, 0.30);
    background-color: var(--lz-accent-soft);
    transform: translateY(-1px);
}

.lz-loc__sector.is-active {
    border-color: transparent;
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    box-shadow: 0 12px 24px -16px rgba(109, 74, 255, 0.95);
}

.lz-loc__sector-count {
    padding: 1px 7px;
    border-radius: var(--lz-r-pill);
    background-color: rgba(11, 27, 51, 0.06);
    font-size: 0.68rem;
    font-weight: 700;
}

.lz-loc__sector.is-active .lz-loc__sector-count { background-color: rgba(255, 255, 255, 0.22); }

/* ==========================================================================
   6. Map
   ========================================================================== */

.lz-loc__map-col { min-width: 0; }

.lz-loc__stage {
    position: relative;
    min-height: clamp(470px, 44vw, 600px);
}

.lz-loc__stage-glow {
    position: absolute;
    inset: -4% -3%;
    z-index: 0;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 46%, rgba(109, 74, 255, 0.20), rgba(109, 74, 255, 0) 68%);
    filter: blur(34px);
    pointer-events: none;
}

.lz-loc__frame {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.8);
    border-radius: 28px;
    background-color: var(--lz-bg-2);
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.05), 0 34px 66px -44px rgba(11, 27, 51, 0.40);
}

/* --- Live map ------------------------------------------------------------ */

/* The map is the whole column: it fills the frame and nothing floats over it. */
.lz-loc__map-canvas {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    background-color: var(--lz-bg-2);
}

/* --- Loading / failure / no-JS states ------------------------------------ */

.lz-loc__map-loading,
.lz-loc__map-fail,
.lz-loc__map-note {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: grid;
    place-content: center;
    justify-items: center;
    gap: 12px;
    padding: 24px;
    background-color: var(--lz-bg-2);
    color: var(--lz-body);
    text-align: center;
}

.lz-loc__map-loading {
    font-size: 0.86rem;
    font-weight: 600;
    letter-spacing: -0.01em;
    transition: opacity 0.4s var(--lz-ease), visibility 0.4s var(--lz-ease);
}

.lz-loc__spinner {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    border: 3px solid rgba(109, 74, 255, 0.18);
    border-top-color: var(--lz-accent);
    animation: lzLocSpin 0.9s linear infinite;
}

@keyframes lzLocSpin {
    to { transform: rotate(360deg); }
}

/* Ready: the loader gets out of the way. */
.lz-loc__stage.is-ready .lz-loc__map-loading {
    opacity: 0;
    visibility: hidden;
}

/* Failed: the loader goes, the note takes its place. `display` is named explicitly
   because the class's own `display: grid` beats the UA's [hidden] rule. */
.lz-loc__stage.is-failed .lz-loc__map-loading { display: none; }

.lz-loc__map-fail[hidden] { display: none; }

.lz-loc__map-fail-text,
.lz-loc__map-note-text {
    max-width: 30ch;
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1.5;
    letter-spacing: -0.01em;
}

.lz-loc__map-fail-ico,
.lz-loc__map-note-ico {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background-color: var(--lz-accent-soft);
    color: var(--lz-accent);
}

.lz-loc__map-fail-ico .lz-icon,
.lz-loc__map-note-ico .lz-icon { width: 20px; height: 20px; }

/* The no-JS note is for a browser that cannot mount the map at all. */
.lz-loc__map-note--nojs { display: none; }
html:not(.has-js) .lz-loc__map-note--nojs { display: grid; }

/* --- City markers -------------------------------------------------------- */

/* The marker's tip is its anchor — the block's bottom edge is the coordinate — so
   locations.js can drop it straight onto a projected LatLng pixel. */
.lz-loc__marker {
    position: absolute;
    z-index: 3;
    display: block;
    transform: translate(-50%, -100%);
    transition: transform 0.28s var(--lz-ease-out);
}

.lz-loc__marker-pin {
    display: grid;
    place-items: center;
    width: 36px;
    height: 36px;
    margin: 0 auto;
    border-radius: 50% 50% 50% 4px;
    transform: rotate(-45deg);
    background-image: linear-gradient(160deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    box-shadow: 0 12px 22px -12px rgba(74, 40, 220, 0.9), 0 0 0 3px #fff;
}

.lz-loc__marker-pin .lz-icon {
    width: 16px;
    height: 16px;
    color: #fff;
    transform: rotate(45deg);
}

/* The tooltip — the city's name and its society count. Always visible, so the map
   reads as an index of places rather than a field of anonymous pins. */
.lz-loc__marker-tip {
    position: absolute;
    bottom: calc(100% + 7px);
    left: 50%;
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    padding: 6px 11px;
    border-radius: 12px;
    background-image: linear-gradient(150deg, #fa7c37, #fa955d);
    box-shadow: 0 10px 22px -12px rgba(221, 95, 4, 0.75);
    white-space: nowrap;
    transform: translateX(-50%);
    transition: box-shadow 0.28s var(--lz-ease);
}

/* The little tail pointing down at the pin. A solid midpoint, because a pseudo-element
   cannot continue the parent's gradient across its own 8px box. */
.lz-loc__marker-tip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    width: 8px;
    height: 8px;
    background-color: #fa8949;
    transform: translate(-50%, -4px) rotate(45deg);
}

.lz-loc__marker-name {
    color: #fff;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: -0.015em;
}

.lz-loc__marker-count {
    color: #fff;
    font-size: 0.7rem;
    font-weight: 600;
}

.lz-loc__marker:hover,
.lz-loc__marker:focus-visible,
.lz-loc__marker.is-active {
    transform: translate(-50%, -100%) scale(1.08);
    z-index: 6;
}

.lz-loc__marker:hover .lz-loc__marker-tip,
.lz-loc__marker:focus-visible .lz-loc__marker-tip,
.lz-loc__marker.is-active .lz-loc__marker-tip {
    box-shadow: 0 14px 28px -12px rgba(221, 95, 4, 0.95);
}

/* ==========================================================================
   7. CTA strip
   ========================================================================== */

.lz-loc__cta-wrap { margin-top: clamp(34px, 4vw, 54px); }

.lz-loc__cta {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: clamp(14px, 2vw, 26px);
    padding: clamp(20px, 2.6vw, 30px) clamp(20px, 2.8vw, 34px);
    border: 1px solid var(--lz-line);
    border-radius: 26px;
    background-image: linear-gradient(135deg, rgba(109, 74, 255, 0.10), rgba(109, 74, 255, 0.03) 52%, rgba(109, 74, 255, 0.08)),
        linear-gradient(180deg, var(--lz-surface), var(--lz-bg-2));
    box-shadow: 0 1px 2px rgba(11, 27, 51, 0.04), 0 22px 46px -38px rgba(11, 27, 51, 0.32);
    overflow: hidden;
}

.lz-loc__cta-skyline {
    position: absolute;
    right: 0;
    bottom: 0;
    width: min(48%, 520px);
    height: 100%;
    color: var(--lz-accent);
    opacity: 0.07;
    pointer-events: none;
}

.lz-loc__cta-ico {
    position: relative;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    flex: none;
    border-radius: 50%;
    background-image: linear-gradient(180deg, var(--lz-accent) 0%, var(--lz-accent-600) 100%);
    color: #fff;
    box-shadow: 0 14px 28px -16px rgba(109, 74, 255, 0.9);
}

.lz-loc__cta-ico .lz-icon { width: 24px; height: 24px; }

.lz-loc__cta-body { position: relative; min-width: 0; }

.lz-loc__cta-title {
    font-size: clamp(1.06rem, 0.98rem + 0.4vw, 1.3rem);
    letter-spacing: -0.028em;
}

.lz-loc__cta-text {
    margin-top: 6px;
    max-width: 62ch;
    color: var(--lz-body);
    font-size: 0.87rem;
    line-height: 1.6;
}

.lz-loc__cta-arc {
    position: relative;
    width: 84px;
    height: 44px;
    flex: none;
    color: var(--lz-accent);
    opacity: 0.45;
}

.lz-loc__cta-btn { position: relative; flex: none; }

/* ==========================================================================
   8. Statement + note
   ========================================================================== */

.lz-loc__statement {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    margin-top: clamp(24px, 3vw, 34px);
    color: var(--lz-navy-2);
    font-size: clamp(0.88rem, 0.85rem + 0.2vw, 0.98rem);
    font-weight: 600;
    letter-spacing: -0.012em;
    text-align: center;
}

.lz-loc__statement-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
    opacity: 0.8;
}

.lz-loc__statement-ico .lz-icon { width: 17px; height: 17px; }

.lz-loc__note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 14px;
    color: var(--lz-body);
    font-size: 0.76rem;
    line-height: 1.5;
    text-align: center;
}

.lz-loc__note-ico {
    display: grid;
    place-items: center;
    flex: none;
    color: var(--lz-accent);
}

.lz-loc__note-ico .lz-icon { width: 14px; height: 14px; }

/* ==========================================================================
   9. Reveal on scroll (scoped copy — the module stays self-contained)
   ========================================================================== */

.has-js .lz-loc [data-lz-inview] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.7s var(--lz-ease-out) var(--lz-delay, 0ms),
        transform 0.85s var(--lz-ease-out) var(--lz-delay, 0ms);
    will-change: opacity, transform;
}

.has-js .lz-loc [data-lz-inview].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
}

/* ==========================================================================
   10. Responsive
   ========================================================================== */

/* Stacked: the map keeps its height and the picker sits above it. */
@media (max-width: 1179px) {
    .lz-loc__stage {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-height: 0;
    }

    .lz-loc__frame {
        position: relative;
        inset: auto;
        aspect-ratio: 5 / 4;
        min-height: 320px;
    }

    .lz-loc__stage-glow { display: none; }

    .lz-loc__cta { grid-template-columns: auto minmax(0, 1fr); }

    .lz-loc__cta-arc { display: none; }

    .lz-loc__cta-btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 640px) {
    .lz-loc__frame { border-radius: 22px; aspect-ratio: 4 / 3; }
    .lz-loc__cta { border-radius: 20px; }

    .lz-loc__marker-pin { width: 30px; height: 30px; }
    .lz-loc__marker-pin .lz-icon { width: 14px; height: 14px; }
    .lz-loc__marker-name { font-size: 0.72rem; }
    .lz-loc__marker-count { font-size: 0.65rem; }

    .lz-loc__sectors {
        flex-wrap: nowrap;
        overflow-x: auto;
        width: 100%;
        max-width: 100%;
        min-width: 0;
        padding-bottom: 6px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }

    .lz-loc__sectors::-webkit-scrollbar { display: none; }
    .lz-loc__sector { flex: none; }
    .lz-loc__rows--grid .lz-loc__sectors { display: flex; }
}

@media (max-width: 420px) {
    .lz-loc__title { letter-spacing: -0.03em; }
    .lz-loc__cta { border-radius: 18px; }

    .lz-loc__marker-pin { width: 26px; height: 26px; }
    .lz-loc__marker-tip { padding: 5px 9px; border-radius: 10px; }
}

/* ==========================================================================
   11. Reduced motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .has-js .lz-loc [data-lz-inview] {
        opacity: 1;
        transform: none;
    }

    .lz-loc__title-accent,
    .lz-loc__eyebrow-ico,
    .lz-loc__glow,
    .lz-loc__bgpin,
    .lz-loc__spinner,
    .lz-loc__marker {
        animation: none;
    }
}