/* ==========================================================================
   CMBG³ Law — Office Locations & Roster Layouts
   ========================================================================== */

/* Office Detail Template Column Layouts */
.office-layout-container {
    display: flex;
    flex-wrap: wrap;
    gap: 60px;
    margin-top: 3rem;
    margin-bottom: 5rem;
}

.office-info-column {
    flex: 1 1 300px;
    max-width: 400px;
}

.office-roster-column {
    flex: 2 1 600px;
}

/* Sidebar Contact Info Cards */
.office-contact-info h3 {
    font-family: var(--font-serif, 'Suisse Neue', serif);
    font-size: 2.2rem;
    font-weight: 400;
    color: var(--copley-deep-blue, #1b2332);
    margin-bottom: 1rem;
    margin-top: 0;
}

.office-contact-info .office-address-block,
.office-contact-info .office-phone-block {
    margin-bottom: 3rem;
}

.office-contact-info .address-details,
.office-contact-info .phone-details {
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.8rem;
    line-height: 1.5;
    color: var(--copley-slate, #3d4d66);
}

.office-contact-info .phone-details a,
.office-contact-info .address-details a {
    color: var(--copley-slate, #3d4d66);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}

.office-contact-info .phone-details a:hover,
.office-contact-info .address-details a:hover {
    color: var(--copley-tan, #d1a97c);
    text-decoration: underline;
    text-underline-offset: 3px;
}

@media (max-width: 991px) {
    .office-layout-container {
        flex-direction: column;
        gap: 40px;
    }

    .office-info-column {
        max-width: 100%;
    }
}

.office-key-contacts-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 2rem;
}

.office-key-contacts-grid .cmbg3-author-sidebar-card {
    flex: 0 1 320px;
    width: 100%;
    margin-bottom: 0 !important;
}

.office-roster-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 15px;
    margin-top: 2rem;
}

.office-section-title {
    font-family: var(--font-serif, 'Suisse Neue', serif);
    font-size: clamp(2rem, 3vw, 3rem);
    font-weight: 300;
    color: var(--copley-deep-blue, #1b2332);
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid var(--dockyard-light, #e2e8f0);
    padding-bottom: 0.5rem;
}

.office-key-contact-section {
    margin-bottom: 3rem;
}

.office-key-contacts-cta {
    margin-top: 40px;
    margin-bottom: 20px;
}

.office-full-team-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background-color: var(--harbor) !important;
    color: #ffffff !important;
    font-family: var(--font-body, 'Suisse Intl', sans-serif) !important;
    font-size: 2rem !important;
    font-weight: 400 !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    border: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.3s ease !important;
}

.office-full-team-btn:hover {
    background-color: var(--atlantic) !important;
    color: #ffffff !important;
    text-decoration: none !important;
}

/* Attorney Hero Office Links */
.member-hero-offices {
    display: flex;
    align-items: center;
    gap: 15px;
    /* Matches the gap of your GenerateBlocks button icons */
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 2rem;
    /* Matches phone/email font size */
    color: var(--copley-slate, #3d4d66);
    margin-top: 0.8rem;
    line-height: 1.2;
}

.member-hero-offices-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--copley-deep-blue, #1b2332);
    flex-shrink: 0;
}

.member-hero-offices-icon svg {
    width: 18px;
    /* Matches the width of the phone/email icons */
    height: 18px;
    stroke: currentColor;
    stroke-width: 1.75;
}

.member-hero-offices-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

.member-hero-offices a {
    color: var(--copley-slate, #3d4d66);
    text-decoration: none !important;
    /* Forces removal of any theme/editor default underlines */
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.member-hero-offices a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--copley-tan, #d1a97c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.member-hero-offices a:hover {
    color: var(--harbor);
}

.member-hero-offices a:hover::after {
    transform: scaleX(1);
}


.member-hero-offices a.member-hero-office-link {
    color: var(--copley-slate, #3d4d66);
    text-decoration: none !important;
    position: relative;
    padding-bottom: 2px;
    transition: color 0.2s ease;
}

.member-hero-offices a.member-hero-office-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 1.5px;
    background-color: var(--copley-tan, #d1a97c);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.member-hero-offices a.member-hero-office-link:hover {
    color: var(--harbor);
}

.member-hero-offices a.member-hero-office-link:hover::after {
    transform: scaleX(1);
}


:is(.video-hero-container, .page-hero, .hero, .blog-featured-hero) div:has(.member-hero-offices) {
    opacity: 0;
    animation: cmbg3SlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    animation-delay: 0.7s;
}

.member-hero-offices .sep {
    color: var(--dockyard-light, #e2e8f0);
    margin: 0 0.8rem;
    text-decoration: none !important;
}

@media (max-width: 1023px) {
    .office-roster-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 20px;
    }
}

@media (max-width: 767px) {
    .office-key-contacts-grid {
        gap: 10px;
    }

    .office-key-contacts-grid .cmbg3-author-sidebar-card {
        flex: 1 1 140px;
        max-width: 100%;
    }

    .office-roster-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
}

/* Directory Select Dropdowns & Search Styling */
.cmbg3-team-filters {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
    margin-bottom: 2.5rem;
}

.cmbg3-team-filters .filter-group {
    width: 100%;
}

.cmbg3-team-filters .filter-group--search {
    grid-column: 1 / -1;
}

@media (max-width: 1024px) {
    .cmbg3-team-filters {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 767px) {
    .cmbg3-team-filters {
        grid-template-columns: 1fr;
    }
}

.cmbg3-team-filters input.team-filter-search {
    width: 100%;
    padding: 12px 16px 12px 42px;
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--copley-deep-blue, #1b2332);
    background-color: #ffffff;
    border: 1px solid var(--dockyard-light, #e2e8f0);
    border-radius: 4px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%233d4d66' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 14px center;
    background-size: 16px;
}

.cmbg3-team-filters input.team-filter-search:hover {
    border-color: var(--copley-tan, #d1a97c);
}

.cmbg3-team-filters input.team-filter-search:focus {
    outline: none;
    border-color: var(--copley-tan, #d1a97c);
    box-shadow: 0 0 0 3px rgba(209, 169, 124, 0.15);
}

.cmbg3-team-filters select.team-filter-select {
    width: 100%;
    padding: 12px 40px 12px 16px;
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.6rem;
    font-weight: 500;
    color: var(--copley-deep-blue, #1b2332);
    background-color: #ffffff;
    border: 1px solid var(--dockyard-light, #e2e8f0);
    border-radius: 4px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' viewBox='0 0 24 24' stroke='%233d4d66' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m19.5 8.25-7.5 7.5-7.5-7.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
}

.cmbg3-team-filters select.team-filter-select:hover {
    border-color: var(--copley-tan, #d1a97c);
}

.cmbg3-team-filters select.team-filter-select:focus {
    outline: none;
    border-color: var(--copley-tan, #d1a97c);
    box-shadow: 0 0 0 3px rgba(209, 169, 124, 0.15);
}

/* Clear Filters Button Styling */
.cmbg3-team-filters-clear-wrapper {
    display: flex;
    justify-content: flex-end;
    margin-top: -1.2rem;
    margin-bottom: 2.5rem;
    min-height: 36px;
}

.cmbg3-team-filters-clear-wrapper button.clear-filters-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: none;
    border: none;
    padding: 6px 12px;
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.4rem;
    font-weight: 600;
    color: var(--copley-deep-blue, #1b2332);
    cursor: pointer;
    transition: opacity 0.2s ease, visibility 0.2s ease, color 0.2s ease, transform 0.2s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.cmbg3-team-filters-clear-wrapper button.clear-filters-btn.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.cmbg3-team-filters-clear-wrapper button.clear-filters-btn:hover {
    color: var(--copley-tan, #d1a97c);
}

.cmbg3-team-filters-clear-wrapper button.clear-filters-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.5;
    transition: transform 0.3s ease;
}

.cmbg3-team-filters-clear-wrapper button.clear-filters-btn:hover svg {
    transform: rotate(90deg);
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Office List Grid on /locations/ */
.office-list-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 40px;
    margin-top: 4rem;
    margin-bottom: 4rem;
}

.office-list-card {
    position: relative;
    z-index: 1;
    background: #ffffff;
    border: 1px solid rgba(100, 122, 130, 0.15);
    /* Soft dockyard color */
    border-radius: 8px;
    padding: 3.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
        box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.01);
}

.office-list-card:hover {
    transform: translateY(-5px);
    border-color: var(--copley-tan, #d1a97c);
    box-shadow: 0 20px 40px rgba(27, 35, 50, 0.08);
    /* Deep blue base shadow */
}

.office-list-card h3 {
    font-family: var(--font-serif, 'Suisse Neue', serif);
    font-size: 2.6rem;
    font-weight: 300;
    /* Extra elegant weight */
    color: var(--copley-deep-blue, #1b2332);
    margin-bottom: 2.5rem;
    margin-top: 0;
    border-bottom: 1px solid rgba(100, 122, 130, 0.1);
    padding-bottom: 1.5rem;
}

.office-list-card h3 a {
    color: var(--copley-deep-blue, #1b2332);
    text-decoration: none;
    transition: color 0.3s ease;
}

.office-list-card h3 a:hover {
    color: var(--copley-tan, #d1a97c);
}

/* Sub-locations (e.g. multiple addresses in one state) */
.office-list-sub-locations {
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}

.office-list-sub-location {
    position: relative;
}

.office-list-sub-location:not(:first-child) {
    border-top: 1px dashed rgba(100, 122, 130, 0.15);
    padding-top: 2rem;
}

.office-city-badge {
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--copley-tan, #d1a97c);
    background: rgba(209, 169, 124, 0.08);
    padding: 3px 8px;
    border-radius: 4px;
    display: inline-block;
    margin-bottom: 1.2rem;
    line-height: 1;
}

.office-list-card .office-list-info {
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.7rem;
    line-height: 1.6;
    color: var(--copley-slate, #3d4d66);
    margin-bottom: 2rem;
}

.office-list-card .office-list-address {
    margin-bottom: 1.2rem;
    font-style: normal;
}

.office-list-card .office-list-address p {
    margin: 0;
    line-height: 1.6;
}

.office-list-card .office-list-phone {
    margin: 0;
    font-size: 1.6rem;
}

.office-list-card .office-list-phone strong {
    font-weight: 600;
    color: var(--copley-deep-blue, #1b2332);
}

.office-list-card .office-list-info a {
    color: var(--copley-slate, #3d4d66);
    text-decoration: none;
    transition: color 0.2s ease;
}

.office-list-card .office-list-info a:hover {
    color: var(--copley-tan, #d1a97c);
}

.office-list-card .office-list-cta {
    margin-top: 0;
}

.office-list-card .office-list-link {
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.6rem;
    font-weight: 600;
    color: var(--copley-tan, #d1a97c);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: color 0.3s ease;
}

.office-list-card .office-list-link:hover {
    color: var(--copley-deep-blue, #1b2332);
}

.office-list-card .office-list-link span {
    display: inline-block;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.office-list-card:hover .office-list-link span {
    transform: translateX(4px);
}

@media (max-width: 767px) {
    .office-list-grid {
        grid-template-columns: 1fr;
        gap: 25px;
    }

    .office-list-card {
        padding: 2.5rem;
    }
}

/* Skeleton Shimmer Loading Animation */
.team-member-skeleton .team-member-card__image-wrapper {
    aspect-ratio: 1 / 1;
    width: 100%;
    border-radius: 4px;
}

.skeleton-shimmer {
    background: #f6f7f8;
    background-image: linear-gradient(to right, #f6f7f8 0%, #edeef1 20%, #f6f7f8 40%, #f6f7f8 100%);
    background-repeat: no-repeat;
    background-size: 800px 104px;
    display: inline-block;
    position: relative;
    animation-duration: 1.2s;
    animation-fill-mode: forwards;
    animation-iteration-count: infinite;
    animation-name: placeholderShimmer;
    animation-timing-function: linear;
}

@keyframes placeholderShimmer {
    0% {
        background-position: -468px 0;
    }

    100% {
        background-position: 468px 0;
    }
}

.skeleton-line {
    height: 14px;
    margin-bottom: 8px;
    border-radius: 2px;
    display: block;
}

.skeleton-line-title {
    width: 70%;
    height: 18px;
    margin-top: 15px;
    margin-bottom: 12px;
}

.skeleton-line-sub {
    width: 45%;
    height: 12px;
}

/* Styled "No Results" Empty State */
.team-filter-empty-state {
    grid-column: 1 / -1;
    text-align: center;
    padding: 5rem 2rem;
    background-color: #f8fafc;
    border: 1px dashed var(--dockyard-light, #e2e8f0);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
}

.team-filter-empty-state .empty-state-icon {
    color: var(--copley-slate, #3d4d66);
    margin-bottom: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.team-filter-empty-state h3 {
    font-family: var(--font-serif, 'Suisse Neue', serif);
    font-size: 2.4rem;
    font-weight: 400;
    color: var(--copley-deep-blue, #1b2332);
    margin: 0 0 1rem 0;
}

.team-filter-empty-state p {
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.6rem;
    color: var(--copley-slate, #3d4d66);
    max-width: 450px;
    margin: 0 0 2.5rem 0;
    line-height: 1.6;
}

.team-filter-empty-state button.reset-filters-btn-inline {
    background-color: var(--copley-deep-blue, #1b2332);
    color: #ffffff;
    border: none;
    border-radius: 4px;
    padding: 12px 24px;
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.team-filter-empty-state button.reset-filters-btn-inline:hover {
    background-color: var(--copley-tan, #d1a97c);
}

.team-filter-empty-state button.reset-filters-btn-inline:active {
    transform: scale(0.98);
}

/* ==========================================================================
   Author Sidebar Card Styles (Imported from posts.css for Office templates)
   ========================================================================== */

.cmbg3-author-sidebar-card {
    position: relative;
    background-color: var(--atlantic);
    /* Copley (Navy) */
    color: #ffffff;
    padding: 0;
    margin-bottom: 30px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.cmbg3-author-sidebar-card:hover .author-card-content {
    background-color: var(--harbor);
}

.cmbg3-author-sidebar-card .author-card-image {
    background-image: url('/wp-content/uploads/author-profile-bg.png');
    background-size: cover;
    background-position: top;
    background-repeat: no-repeat;
}

.cmbg3-author-sidebar-card .author-card-image img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 1/1;
    object-fit: cover;
    object-position: top;
    mix-blend-mode: multiply;
    transition: all 0.3s ease-in-out;
}

.cmbg3-author-sidebar-card .author-card-image a:hover img {
    transform: scale(1.05);
}

.cmbg3-author-sidebar-card .author-card-content {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem 2rem;
    z-index: 9;
    background-color: var(--atlantic);
    transition: all 0.3s ease-in-out;
}

.cmbg3-author-sidebar-card .author-name {
    color: #ffffff;
    font-size: 2rem;
    margin: 0 !important;
    line-height: 1;
}

.cmbg3-author-sidebar-card .author-name a {
    color: #fff;
    text-decoration: none !important;
    background-image: none !important;
}

.cmbg3-author-sidebar-card .author-name a span {
    background-image: none !important;
    text-decoration: none !important;
}

.cmbg3-author-sidebar-card .author-name a:hover {
    text-decoration: none !important;
    background-image: none !important;
}

.cmbg3-author-sidebar-card .author-name a:hover span {
    background-image: none !important;
    text-decoration: none !important;
}

.cmbg3-author-sidebar-card .author-title {
    color: #b9b9b9;
    font-size: 1.4rem;
    margin: 0 0 20px 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.cmbg3-author-sidebar-card .author-card-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.cmbg3-author-sidebar-card .view-profile-link {
    color: #ffffff;
    text-decoration: none;
    font-size: 1.4rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.2s ease;
}

.cmbg3-author-sidebar-card .view-profile-link:hover {
    opacity: 0.8;
}

.cmbg3-author-sidebar-card .view-profile-link .arrow {
    color: var(--gold);
    font-size: 1.2rem;
}

/* ==========================================================================
   Dynamic Accordion & Checkmark Bullet Styles
   ========================================================================== */

/* ==========================================================================
   Two-Column List Section Styles
   ========================================================================== */

.office-list-section-block {
    background-color: var(--beacon-light);
    padding: 8rem var(--gutter);
}

.office-text-section-block {
    padding: 8rem var(--gutter);
}

.office-list-section-title {
    font-family: var(--font-serif, 'Suisse Neue', serif);
    font-size: clamp(2.2rem, 3.5vw, 3rem);
    font-weight: 300;
    color: var(--copley-deep-blue, #1b2332);
    margin-bottom: 3rem;
    border-bottom: 1px solid var(--dockyard-light, #e2e8f0);
    padding-bottom: 0.8rem;
}

.office-list-items-grid {
    display: flex;
    flex-direction: column;
    gap: 4.5rem;
}

.office-list-item {
    display: flex;
    flex-direction: column;
}

.office-list-item-title {
    font-family: var(--font-serif, 'Suisse Neue', serif);
    font-size: 2.4rem;
    margin-top: 0;
    margin-bottom: 1.5rem;
    border-bottom: 1px solid rgba(100, 122, 130, 0.1);
    padding-bottom: 0.8rem;
}

.office-list-item-content {
    font-family: var(--font-default, 'Suisse Intl', sans-serif);
    font-size: 1.8rem;
    line-height: 1.6;
    color: var(--copley-slate, #3d4d66);
}

@media (max-width: 767px) {
    .office-list-items-grid {
        gap: 3rem;
    }
}

/* Accordion & List Bullet Styling (Applies to both 1-column and 2-column lists) */
.office-list-item-content ul {
    list-style: none;
    padding: 0 !important;
    margin: 0;
}

.office-list-item-content ul li {
    position: relative;
    padding-left: 35px;
    line-height: 1.5;
    margin-bottom: 12px;
}

.office-list-item-content ul li:last-child {
    margin-bottom: 0;
}

.office-list-item-content ul li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 4px;
    width: 20px;
    height: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cg stroke='%23677d85' stroke-linecap='square' stroke-width='1.5'%3E%3Cpath d='M1 10a9 9 0 1 1 18 0 9 9 0 0 1-18 0Z'/%3E%3Cpath d='m7.207 10.931 2.035 1.19 3.551-4.914'/%3E%3C/g%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: contain;
}

/* Two-Column Grid specific overrides */
.office-accordion-2-col ul {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px 40px;
}

.office-accordion-2-col ul li {
    margin-bottom: 0;
    /* Reset margins since grid handles gap */
}

@media (max-width: 767px) {
    .office-accordion-2-col ul {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}

/* Dynamic Text & Image flexible content block */
.office-text-image-section {
    display: flex;
    gap: 60px;
    align-items: center;
    padding: 8rem var(--gutter);
}

.office-text-image-section.image-align-left {
    flex-direction: row;
}

.office-text-image-section.image-align-right {
    flex-direction: row-reverse;
}

.office-section-image-col {
    max-width: 50%;
}

.office-section-text-col {
    flex: 1 1 55%;
}

.office-section-image-col img {
    width: 100%;
    height: auto;
    display: block;
}

@media (max-width: 991px) {
    .office-text-image-section {
        gap: 40px;
    }
}

@media (max-width: 767px) {

    .office-text-image-section.image-align-left,
    .office-text-image-section.image-align-right {
        flex-direction: column !important;
        align-items: stretch;
        gap: 30px;
    }

    .office-section-image-col {
        max-width: 100%;
    }
}