/* PageSparx Offices overview — Theme A.
   This follows the established public Offices composition while consuming the
   same canonical Location entities as individual office pages, menus and footer. */

.psl-offices-page {
    --psl-location-max: 1200px;
    --psl-location-side-pad: clamp(20px, 2vw, 30px);
    --psl-location-font-display: var(--font-serif-condensed);
    --psl-location-font-display-condensed: var(--font-serif-condensed);
    --psai-gold-metal: linear-gradient(45deg, rgba(155,111,43,1) 0%, rgba(242,236,184,1) 16.6%, rgba(242,236,184,1) 31%, rgba(155,111,43,1) 48.1%, rgba(155,111,43,1) 61.5%, rgba(218,178,92,1) 67%, rgba(165,99,42,1) 68.1%, rgba(165,99,42,1) 70.1%, rgba(250,248,198,1) 77%, rgba(250,248,198,1) 79%, rgba(218,178,92,1) 85%, rgba(182,144,70,1) 88%, rgba(122,74,30,1) 100%);
    background: var(--psl-white);
    color: var(--psl-charcoal);
    font-family: var(--font-sans);
}

.psl-offices-page *,
.psl-offices-page *::before,
.psl-offices-page *::after {
    box-sizing: border-box;
}

/* Live-page upper composition: centered heading/copy followed by one office
   image and the complete ordered office list. */
.psl-offices-hero {
    position: relative;
    overflow: hidden;
    padding: clamp(48px, 4.4vw, 68px) var(--psl-location-side-pad) clamp(66px, 6vw, 92px);
    background: linear-gradient(180deg, var(--psl-black) 0%, var(--psl-blue-dark) 100%);
    color: var(--psl-white);
}

.psl-offices-hero__inner {
    width: min(100%, var(--psl-location-max));
    margin: 0 auto;
}

.psl-offices-hero__header {
    width: min(100%, 940px);
    margin: 0 auto;
    text-align: center;
}

.psl-offices-hero__title {
    margin: 0;
    background: var(--psai-gold-metal);
    color: transparent;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-family: var(--psl-location-font-display-condensed);
    font-size: clamp(42px, 4vw, 68px);
    font-weight: 300;
    line-height: 1;
    text-wrap: balance;
}

.psl-offices-hero__rule {
    display: block;
    width: 100%;
    height: 1px;
    margin: clamp(12px, 1vw, 16px) auto clamp(22px, 2vw, 30px);
    background: linear-gradient(90deg, rgba(174, 146, 89, 0), var(--psl-subtle-gold), rgba(174, 146, 89, 0));
}

.psl-offices-hero__intro {
    width: min(100%, 900px);
    margin: 0 auto;
    color: var(--psl-subtle-gold);
    font-size: clamp(15px, 1.05vw, 18px);
    font-weight: 400;
    line-height: 1.6;
    text-wrap: pretty;
}

.psl-offices-hero__intro p {
    margin: 0 0 .45em;
}

.psl-offices-hero__intro p:last-child {
    margin-bottom: 0;
}

.psl-offices-identity {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(34px, 3.9vw, 60px);
    align-items: start;
    width: 100%;
    margin: clamp(42px, 4vw, 62px) auto 0;
}

.psl-offices-identity__media {
    width: 100%;
    margin: 0;
}

.psl-offices-identity__image {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
}

.psl-offices-identity__image-placeholder {
    display: block;
    width: 100%;
    aspect-ratio: 1200 / 947;
    background: #0b1420;
}

.psl-offices-identity__details {
    min-width: 0;
    padding-top: clamp(0px, .35vw, 5px);
}

.psl-offices-identity__firm-name {
    margin: 0;
    color: var(--psl-white);
    font-family: var(--psl-location-font-display);
    font-size: clamp(32px, 3.05vw, 47px);
    font-weight: 400;
    line-height: 1;
    text-transform: capitalize;
    text-wrap: balance;
}

.psl-offices-identity__firm-rule {
    width: 100%;
    height: 1px;
    margin: clamp(3px, .35vw, 6px) 0 clamp(5px, .45vw, 8px);
    background: var(--psl-light-gold);
}

.psl-offices-identity__descriptor {
    margin: 0;
    color: var(--psl-white);
    font-family: var(--font-sans);
    font-size: clamp(14px, 1.5vw, 23px);
    font-weight: 400;
    letter-spacing: clamp(1.5px, .2vw, 3px);
    line-height: 1;
    text-transform: uppercase;
}

.psl-offices-location-list {
    display: grid;
    gap: clamp(15px, 1.35vw, 21px);
    margin-top: clamp(24px, 2.2vw, 34px);
}

.psl-offices-location {
    min-width: 0;
}

.psl-offices-location__title {
    margin: 0;
    padding-bottom: clamp(4px, .4vw, 6px);
    border-bottom: 1px solid var(--psl-light-gold);
    color: var(--psl-white);
    font-family: var(--psl-location-font-display);
    font-size: clamp(20px, 1.7vw, 26px);
    font-weight: 400;
    line-height: 1;
}

.psl-offices-location__links {
    display: grid;
    gap: clamp(5px, .45vw, 7px);
    margin-top: clamp(6px, .55vw, 9px);
}

.psl-offices-location__links a {
    display: flex;
    width: fit-content;
    max-width: 100%;
    gap: 8px;
    align-items: center;
    color: var(--psl-white);
    font-family: var(--font-sans);
    font-size: clamp(16px, 1.05vw, 18px);
    font-weight: 400;
    line-height: 1.2;
    text-decoration: none;
}

.psl-offices-location__links a:hover,
.psl-offices-location__links a:focus-visible {
    color: var(--psl-white);
    text-decoration: underline;
    text-decoration-thickness: .5px;
    text-underline-offset: 3px;
}

.psl-offices-location__icon {
    flex: 0 0 auto;
    width: 18px;
    height: 18px;
    color: var(--psl-subtle-gold);
}

.psl-offices-identity__empty {
    margin-top: 24px;
    color: var(--psl-subtle-gold);
}

/* Same concave white transition used by the approved Location/blog heroes. */
.psl-offices-hero__divider {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 72px;
    height: 36px;
    color: var(--psl-white);
    line-height: 0;
    transform: translateX(-50%);
    z-index: 2;
}

.psl-offices-hero__divider svg {
    display: block;
    width: 100%;
    height: 100%;
}

/* The live Offices page uses the same form/map visual language as Location
   pages. Shared Location CSS owns the Fluent Forms controls and map card; these
   rules only handle overview-specific composition. */
.psl-offices-contact-map {
    padding-top: clamp(50px, 4.5vw, 68px);
    padding-bottom: clamp(70px, 6.5vw, 100px);
}

.psl-offices-map-card {
    min-height: 100%;
}

.psl-offices-map {
    height: clamp(430px, 39vw, 600px);
}

/* Reusable shortcode list receives a restrained dark surface when inserted
   outside the dedicated Offices template. */
.entry-content > .psl-offices-location-list,
.wp-block-group > .psl-offices-location-list {
    max-width: 760px;
    margin: 30px auto;
    padding: 30px;
    background: var(--psl-blue-dark);
}

@media (max-width: 950px) {
    .psl-offices-identity {
        grid-template-columns: 1fr;
        width: min(100%, 760px);
        gap: clamp(28px, 4vw, 40px);
    }

    .psl-offices-identity__details {
        width: min(100%, 680px);
        margin: 0 auto;
    }

    .psl-offices-map {
        height: clamp(430px, 62vw, 600px);
    }
}

@media (max-width: 700px) {
    .psl-offices-hero {
        padding-top: 30px;
        padding-bottom: 56px;
    }

    .psl-offices-hero__title {
        font-size: clamp(34px, 8.3vw, 54px);
    }

    .psl-offices-hero__rule {
        margin-bottom: 18px;
    }

    .psl-offices-hero__intro {
        font-size: clamp(14px, 3.8vw, 16px);
        line-height: 1.55;
    }

    .psl-offices-identity {
        margin-top: 34px;
        gap: 28px;
    }

    .psl-offices-identity__firm-name {
        font-size: clamp(30px, 8.5vw, 42px);
    }

    .psl-offices-identity__descriptor {
        font-size: clamp(13px, 4vw, 18px);
        letter-spacing: clamp(1.5px, .5vw, 2.5px);
    }

    .psl-offices-location__title {
        font-size: clamp(21px, 6vw, 27px);
    }

    .psl-offices-contact-map {
        padding-top: 44px;
        padding-bottom: 64px;
    }

    .psl-offices-map {
        min-height: 360px;
        height: 92vw;
        max-height: 500px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .psl-offices-page *,
    .psl-offices-page *::before,
    .psl-offices-page *::after {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}