.office-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin: 12px 0
}

.office {
    padding: 34px;
    background: #dfeae7;
    border-radius: 7px
}

.office.dark {
    background: #0b2035;
    color: #fff
}

.office h2 {
    margin: 28px 0 10px;
    font-size: 2rem;
    line-height: 1.05;
    letter-spacing: -.06em
}

.office p {
    color: #547080
}

.office.dark p {
    color: #c2d2dd
}

.office address {
    font-style: normal;
    font-size: .95rem
}

.office-meta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #b9cbc8;
    font-size: .83rem
}

.office.dark .office-meta {
    border-color: #38526a
}

.office-meta b {
    display: block;
    margin-bottom: 4px;
    color: #163c51
}

.office.dark .office-meta b {
    color: #c9f85a
}

.map-stage {
    display: grid;
    grid-template-columns: 1.05fr .95fr;
    margin-top: 12px;
    background: #0b2035
}

.map-stage iframe {
    width: 100%;
    min-height: 500px;
    border: 0;
    filter: contrast(1.05)
}

.map-copy {
    padding: 55px;
    color: #fff
}

.map-copy h2 {
    font-size: 3rem;
    line-height: 1;
    letter-spacing: -.07em
}

.map-copy p {
    color: #bdceda
}

.map-copy a {
    color: #c9f85a;
    font-weight: 700
}

@media(max-width:600px) {

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

    .map-stage iframe {
        min-height: 330px
    }

    .map-copy {
        padding: 35px
    }
}