.locations-section {
    position: relative;
    overflow: hidden;
    padding: 54px 0 58px;
    color: #e7eefb;
    background-color: #020b20;
    background-image: linear-gradient(rgba(2, 11, 32, .33), rgba(2, 11, 32, .33)), url("../images/generic-background.webp");
    background-position: center;
    background-size: cover;
}

.locations-section::before {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: radial-gradient(rgba(37, 99, 235, .28) 1px, transparent 1px);
    background-size: 24px 24px;
    content: "";
    opacity: .45;
}

.locations-shell { position: relative; z-index: 1; }
.locations-heading { margin: 0 auto 36px; text-align: center; }
.locations-eyebrow {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    padding: 7px 15px;
    border: 1px solid #2563eb;
    border-radius: 999px;
    color: #80b7ff;
    background: rgba(20, 73, 164, .32);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
}
.locations-eyebrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.locations-heading h2 { margin: 0 0 12px; color: #fff; font-size: clamp(30px, 3.1vw, 42px); line-height: 1.15; letter-spacing: -.025em; }
.locations-heading > p:last-child { margin: 0 auto; color: #e1e9f7; font-size: 15px; line-height: 1.55; }

.locations-tabs {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
    margin: 0 auto 30px;
}
.locations-tab {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 9px 13px;
    border: 1px solid #263550;
    border-radius: 16px;
    color: #e6edf9;
    background: #17233a;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.locations-tab svg { width: 16px; height: 16px; fill: none; stroke: #a9b8ce; stroke-width: 1.8; }
.locations-tab span { color: inherit; }
.locations-tab:hover { border-color: #4a6c9e; background: #1d2c48; }
.locations-tab.is-active { border-color: #60a5fa; color: #fff; background: #1768f2; box-shadow: 0 0 0 2px rgba(96, 165, 250, .25), 0 10px 24px rgba(23, 104, 242, .28); }
.locations-tab.is-active svg { stroke: #fff; }
.locations-tab:focus-visible { outline: 3px solid rgba(96, 165, 250, .55); outline-offset: 2px; }

.locations-panel {
    display: none;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 38px;
    padding: 32px 34px;
    border: 1px solid #263550;
    border-radius: 20px;
    background: rgba(1, 8, 27, .92);
    box-shadow: 0 22px 50px rgba(0, 0, 0, .24);
}
.locations-panel.is-active { display: grid; }
.locations-office-heading { display: flex; align-items: center; gap: 13px; }
.locations-shield { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #2455a5; border-radius: 15px; color: #4ba3ff; background: #0b2858; }
.locations-shield svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.locations-office-heading h3 { margin: 0 0 4px; color: #fff; font-size: 20px; line-height: 1.25; }
.locations-office-heading p { margin: 0; color: #00e6a7; font-size: 12px; font-weight: 700; }
.locations-description { margin: 18px 0 23px; color: #c9d4e6; font-size: 13px; line-height: 1.65; }
.locations-call { min-height: 42px; display: inline-flex; gap: 9px; padding: 10px 17px; border-radius: 12px; font-size: 13px; text-transform: none; }
.locations-call svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.locations-panel-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
.locations-hub-link { color:#60a5fa; font-size:13px; font-weight:800; text-decoration:none; }
.locations-hub-link:hover { color:#fff; }
.locations-cities { align-self: center; }
.locations-cities > h3 { margin: 0 0 13px; padding-bottom: 11px; border-bottom: 1px solid #263550; color: #8f9db2; font-size: 12px; letter-spacing: .035em; text-transform: uppercase; }
.locations-city-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px; }
.locations-city-grid a {
    min-height: 43px;
    display: grid;
    grid-template-columns: 17px minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 10px 13px;
    border: 1px solid #263550;
    border-radius: 14px;
    color: #dce6f5;
    background: #111b31;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
.locations-city-grid a:hover { border-color: #397bd6; color: #fff; background: #162643; transform: translateY(-2px); }
.locations-city-grid svg { width: 16px; height: 16px; fill: none; stroke: #4ba3ff; stroke-width: 1.8; }
.locations-city-grid b { color: #60708a; font-size: 18px; font-weight: 400; }

@media (max-width: 1050px) {
    .locations-panel { grid-template-columns: 310px minmax(0, 1fr); gap: 28px; }
    .locations-city-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
    .locations-section { padding: 46px 0; }
    .locations-heading { margin-bottom: 28px; }
    .locations-heading h2 { font-size: 31px; }
    .locations-heading > p:last-child { font-size: 14px; }
    .locations-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .locations-panel, .locations-panel.is-active { grid-template-columns: 1fr; gap: 30px; padding: 25px 20px; }
    .locations-city-grid { grid-template-columns: 1fr; }
}

@media (max-width: 420px) {
    .locations-tab { padding-right: 8px; padding-left: 8px; font-size: 12px; }
    .locations-tab svg { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .locations-tab, .locations-city-grid a { transition: none; }
}